Polypane 16: workflow improvements, scoped styles and Chromium 118
16ships a ton of improvements to common workflows, updates to the meta panel social media previews, support for @scope in the elements panel, an update to Chromium 118 and more.
What’s Polypane? Polypane is the web browser for ambitious web developers. It’s a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.
@scope support in the elements panel
With Chromium 118bringing support for scoped styles, the Elements panel now also shows them.
When there’s scoped styles, Polypaneshows the scoping root and end (if available), and like our container query support you can hover over the scoping root to see the element highlighted and click to inspect the element.
Scoped styles can define an end but that end doesn’t actually have to be in the DOM. When that’s the case, the selector is struck through in the elements panel.
You can now emulate prefers-reduced-transparency in Polypane, along with the pre-existing 7 other media features.
Prefers-reduced-transparency exists for people that have a hard time reading text on patterned background, and most operating systems have a "reduce transparency" accessibility option that this media query will match against.
Learn more about it in our complete guide to CSS Media Queries.
Meta panel improvements
The big update here is the new X (formerly Twitter) style.
New X style
X/Twitter removed almost everything in their preview apart from the twitter:image and the domain. That domain can overlap any text in the image, so make sure you put text where it doesn’t get overlapped.
Our friend Charlieasked us if we could overwrite the domain in the social media previews. While you develop the domain is most likely going to be localhost, but what you actually want to see is what it will look like on your production domain.
So now you can overwrite the domain in the meta panel and have all social media previews update to that domain.
15we mostly focused on the large image display (since that’s usually what you’re aiming for!) but we noticed that our small image display had some issues when there was no OG :image. Polypane 16 remedies that so even if you don’t have a large image for your social media previews, everything should look as expected on Mastodon now.
Reveal Password field context menu option
Right-clicking a password field now shows a "Reveal password" option that changes the input to a regular text input, letting you see the password. Pretty handy when you need to know the password for whatever reason, and much faster than editing the attribute in the elements panel.
When clicked, "reveal password" has a checkmark, click it again to revert the input back to a password field.
Measure text now counts sentences and supports more languages.
Thanks to the INTLsegmenter API , the measure text feature that counts characters and words when you right-click a selection now also supports sentences is many different languages, and does a better job of determining what is a word and what isn’t.
Accessibility workflow improvements
A big focus in Polypaneis always to make it easier to find and fix accessibility issues. In this release we’ve made a few improvements to the accessibility workflow.
All content in the A11y tab in the elements panel is now copyable. You could get to all that information through other means, but now you can just copy it and paste it wherever you need it. Thanks to Ericfor requesting this.
Quickly zoom in to 200%and 400%
Websites being able to zoom into 200%and 400% without breaking is required for WCAG criteria 1.4.4 Resize text and 1.4.10 Reflow , respectively. So zooming to those specific values is something many accessibility testers do a lot.
To help with this, we’ve now added added them as option to the command bar, along with the pre-existing page zoom options. Thanks Ianfor asking for this feature.
While we would love to support zooming in at different levels at different panes so you could check these zoom levels side-by-side in onego, unfortunately Chromium ‘s page zoom works on an origin level. This means any open page on the same domain is updated when the zoom percentage changes.
The aria-hidden attribute removes an element from the accessibility tree, but it’s easy to miss that attribute being there (or higher up the DOMtree) and wasting time trying to find why the element doesn’t have the accessible name you think it should have.
To prevent you from wasting time there, we now highlight aria-hidden in the tree view in the elements panel. Thanks Scottfor helping us come up with this!
Should we highlight more attributes? Let us know!
Export Cookies for Polypane Cloud
The storage panel now has an export button for the cookies, that copies them to the clipboard in a format supported by Polypane Cloud, Playwright and Puppeteer .
If you need to test a website with, for example, a logged in state, or with cookies accepted, then you can configure that in Polypane, then export the cookies and use them in Polypane Cloud so it has the right levels of access.
Due to Electronnot supporting some of the newer Chrome Extension APIs, we had to run an older version of the React DevTools . In The most recent Electron versions those newer APIs have become available, so we can now run the latest and greatest again.
We always ship with a bunch of fixes, these are some of the more notable ones.
Browse panel reloads
When the fragment identifier changed (the part after a #in a URL), the browse panel incorrectly reloaded the entire page. In the case of 1Password and Figma that unfortunately led to issues with getting logged out, or continuously reloading the page. This is now fixed. A bunch of you reported this, thanks for that!
The work we did to support Cloudflare‘s Captcha in Polypane
15unwittingly broke service workers for some websites. We had to revise the way we deal with Cloudflare ‘s Captcha ‘s (and luckily they also improved the support for Polypane on their side in the mean time!) to make sure that service workers still work. Thanks Sander for reporting this!
Polypanenow runs on Chromium 118.0.5993.89. This means we now ship support for scoped styles, prefers-reduced-transparency and the <search> element.
We’ve also enables new flags so you can try out upcoming features like the scripting media query and the relative color syntax. View the full list here: Experimental Chromiumfeatures.
Get Polypane 16
Polypaneis available for Windows, Mac and
Linux(.deb or AppImage) in both 64 bit and ARM versions.
Polypaneautomatically updates on Mac, Windows and on Linux when using the AppImage . Otherwise, go to the download page to download the latest version!
Don’t have Polypaneyet? There is a 14 day trial available. Try it for free. No credit card needed.
New Elements panel: Scoped Styles support
Elements panel: Scoped Styles support New Toggle Passwordfield context menu option
Toggle Password field context menu option New Metapanel: X social media preview
Meta panel: X social media preview New Metapanel: Overwrite domain in social media previews (Thanks Charlie !)
Meta panel: Overwrite domain in social media previews (Thanks Charlie!) New Prefers-reduced-transparency emulation
Prefers-reduced-transparency emulation New Commandbar options to zoom to 200% and 400% (Thanks Ian !)
Command bar options to zoom to 200%and 400% (Thanks Ian !) New Storage panel: Export cookies for Polypane Cloud , Playwright and Puppeteer
Storagepanel: Export cookies for Polypane Cloud , Playwright and Puppeteer New Chromium
Improved Measure text now also counts sentences, better language support
Measure text now also counts sentences, better language support Improved Elementspanel: a11y tab content is now copyable (Thanks Eric !)
Elements panel: a11y tab content is now copyable (Thanks Eric!) Improved Elements panel: aria-hidden is now highlighted in the tree view (Thanks Scott !)
Elements panel: aria-hidden is now highlighted in the tree view (Thanks Scott!) Improved Elements panel: Support for new CSS properties like overlay and transition-behavior
Elements panel: Support for new CSS properties like overlay and transition-behavior Improved Meta panel: Improved Mastodonpreviews without og image.
Meta panel: Improved Mastodonpreviews without og image. Improved Tooltips: More resilient tooltip styling for sites using popovers
Tooltips: More resilient tooltip styling for sites using popovers Improved Browsepanel: Also support installing extensions from new Chrome Web Store
Browse panel: Also support installing extensions from new Chrome Web StoreImproved Browse panel: now uses local version of favicons
Browse panel: now uses local version of favicons Improved Browse panel: added Phind search engine
Browse panel: added Phind search engine Improved Debugtools: Contrast checker performance
Debug tools: Contrast checker performance Improved Quicker resizing of full layout web page when resizing the browser
Quicker resizing of full layout web page when resizing the browser Improved Updated screenshot tool
Updated screenshot tool Improved Support the latest react devtools
Support the latest react devtools Improved Better color-scheme: dark support
Better color-scheme: dark support Improved Performance improvements across the app
Performance improvements across the app Improves Storage panel: improve the UIof the buttons