Polypane 16: workflow improvements, scoped styles and Chromium 118

Created on November 12, 2023 at 10:22 am

If you want to be kept up to date with new articles, CSS ORG resources and tools, join our newsletter.

Polypane GPE

16 CARDINAL ships 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 ORG and more.

What’s Polypane GPE ? Polypane GPE 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 118 ORG bringing support for scoped styles, the Elements panel now also shows them.

When there’s scoped styles, Polypane GPE shows 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 ORG . When that’s the case, the selector is struck through in the elements panel.

Prefers-reduced-transparency emulation

You can now emulate prefers-reduced-transparency in Polypane GPE , along with the pre-existing 7 CARDINAL 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 ORG .

Meta panel improvements

The big update here is the new X (formerly Twitter PERSON ) 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.

Domain overwriting

Our friend Charlie PERSON asked 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.

In Polypane GPE

15 CARDINAL we 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 ORG :image. Polypane 16 CARDINAL remedies that so even if you don’t have a large image for your social media previews, everything should look as expected on Mastodon GPE 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 INTL ORG segmenter API ORG , 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 Polypane GPE is always to make it easier to find and fix accessibility issues. In this release we’ve made a few improvements to the accessibility workflow.

Copyable content

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 Eric PERSON for requesting this.

Quickly zoom in to 200% PERCENT and 400% PERCENT

Websites being able to zoom into 200% PERCENT and 400% PERCENT without breaking is required for WCAG ORG criteria 1.4.4 CARDINAL Resize text and 1.4.10 Reflow PERSON , 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 Ian PERSON for 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 one CARDINAL go, unfortunately Chromium ORG ‘s page zoom works on an origin level. This means any open page on the same domain is updated when the zoom percentage changes.

Highlighted aria-hidden

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 DOM ORG tree) 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 Scott PERSON for 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 PERSON , Playwright WORK_OF_ART and Puppeteer PERSON .

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 GPE , then export the cookies and use them in Polypane Cloud GPE so it has the right levels of access.

Due to Electron ORG not supporting some of the newer Chrome Extension PRODUCT APIs, we had to run an older version of the React DevTools ORG . In The most recent Electron ORG versions those newer APIs have become available, so we can now run the latest and greatest again.

Notable Fixes ORG

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 # MONEY in a URL), the browse panel incorrectly reloaded the entire page. In the case of 1Password ORG and Figma ORG 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!

Service workers

The work we did to support Cloudflare ORG ‘s Captcha ORG in Polypane GPE

15 CARDINAL unwittingly broke service workers for some websites. We had to revise the way we deal with Cloudflare ORG ‘s Captcha ORG ‘s (and luckily they also improved the support for Polypane GPE on their side in the mean time!) to make sure that service workers still work. Thanks Sander for reporting this!

Chromium 118 CARDINAL

Polypane GPE now runs on Chromium ORG 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 Chromium ORG features.

Get Polypane 16 CARDINAL

Polypane GPE is available for Windows, Mac and ORG

Linux PERSON (.deb or AppImage) in both 64 CARDINAL bit and ARM versions.

Polypane GPE automatically updates on Mac, Windows ORG and on Linux PRODUCT when using the AppImage ORG . Otherwise, go to the download page to download the latest version!

Don’t have Polypane GPE yet? There is a 14 day DATE trial available. Try it for free. No credit card needed.

Polypane 16 CARDINAL Changelog

New

New Elements panel: Scoped Styles support

Elements panel: Scoped Styles support New Toggle Password ORG field context menu option

Toggle Password field context menu option New Meta ORG panel: X social media preview

Meta panel: X social media preview New Meta ORG panel: Overwrite domain in social media previews (Thanks Charlie PERSON !)

Meta panel: Overwrite domain in social media previews (Thanks Charlie PERSON !) New Prefers-reduced-transparency emulation

Prefers-reduced-transparency emulation New Command ORG bar options to zoom to 200% PERCENT and 400% PERCENT (Thanks Ian PERSON !)

Command bar options to zoom to 200% PERCENT and 400% PERCENT (Thanks Ian PERSON !) New Storage ORG panel: Export cookies for Polypane Cloud ORG , Playwright and Puppeteer

Storage PERSON panel: Export cookies for Polypane Cloud ORG , Playwright and Puppeteer New Chromium ORG

118 CARDINAL

Improved

Improved Measure text now also counts sentences, better language support

Measure text now also counts sentences, better language support Improved Elements ORG panel: a11y tab content is now copyable (Thanks Eric PERSON !)

Elements panel: a11y tab content is now copyable (Thanks Eric PERSON !) Improved Elements panel: aria-hidden is now highlighted in the tree view (Thanks Scott PERSON !)

Elements panel: aria-hidden is now highlighted in the tree view (Thanks Scott PERSON !) 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 Mastodon ORG previews without og image.

Meta panel: Improved Mastodon ORG previews without og image. Improved Tooltips: More resilient tooltip styling for sites using popovers

Tooltips: More resilient tooltip styling for sites using popovers Improved Browse ORG panel: Also support installing extensions from new Chrome Web Store ORG

Browse panel: Also support installing extensions from new Chrome Web Store ORG Improved 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 Debug PRODUCT tools: 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 UI ORG of the buttons

Fixes PRODUCT

Connecting to blog.lzomedia.com... Connected... Page load complete