Table of contents
Skip table of contentsPolypane 25 is here! We've updated our browser extension implementation to support Manifest v3 so we support a ton more extensions, there's a new Form outline view that shows you the structure of your forms, and we've updated to Chromium 138 along with many fixes and updates to existing features.
What's Polypane? Polypane is the web browser for devs who care. 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.
Browser extensions with Manifest v3
After adding regular extension support all the way back in 2023 with the release of Polypane 13, We've now updated our implementation to support Manifest v3 extensions. This means that you can now install and use a lot more extensions in Polypane.
All your my favorites are still there, like VisBug, Grammarly, React Developer Tools and 1Password, but now you can also install extensions like Fix Contrast, Dark Reader, Lighthouse, Stylus, WAVE and many more.
On Mac and Linux you can even connect the 1Password desktop app to the browser extension, so you can log in with a passkey and have the extension automatically unlock when you unlock the desktop app.
With this update, you can now install extensions directly from the Chrome Web Store, and the updated extension manager will automatically keep them up to date.
Take note that, due to this update, you will have to reinstall your extensions, and existing manifest v2 extensions will no longer work in Polypane 25.
A word of thanks
Landing this feature took a lot of effort, and we want to give a big thanks to Pascal of Horse Browser, Evan of Flow browser and especially to Samuel, the creator of electron-browser-shell.
Outline panel: Form outline view
The outline panel now lists all the forms on your page. This gives you a quick overview of the form properties, its fields, fieldsets and buttons.
Everything is updated in real-time, so as you interact with your form you can see the state update in the outline panel.
Additionally, Polypane will flag issues it finds with your form, from missing labels to the use of reset buttons, or typos in the autocomplete attribute.
Because everything is live you can immediately see the effect of your changes, and you can use the outline panel to quickly navigate to the form elements in the Elements panel. Read more about the form outline in our docs.
While building this feature we've found issues with almost all of our forms 🫣 We hope this will help you find and fix issues with your forms as well.
Free Online HTML form inspector
While building this feature, we noticed that there are no online form inspectors available.
So we built one!
You can now inspect your forms online with our HTML Form Inspector: paste in your HTML or use one of our examples and see the form structure.
This stripped-down version of our Form outline in the outline panel gives you a quick overview of your form, the configuration, the fields, fieldsets and buttons for a quick spot check.
Use it to test the forms on your site, or check the structure of a form you found on another site.
Other outline panel updates
We've improved the way the outline panel handles elements that are not visible so you get more accurate feedback on your page structure that takes into account how hiding and showing elements is perceived by accessible technologies.
Emulation reset buttons
The emulation settings now have a reset-to-defaults button. This allows you to quickly reset all emulation settings to their defaults with a single click. Thanks for the excellent suggestion Steve!
Storage panel updates
The storage panel now automatically updates when you add, remove or change something in your localStorage or sessionStorage.
This lets you see the changs as they happen, just like in the outline and elements panels.
Debug tools updates
Updated layout debugging colors
We've updated the layout debugging colors to use P3 colors where available. This means that the colors are more vibrant and stand out more against the site making them easier to see. Thanks Dyna for the suggestion!
Target Size UI position toggle
The target size debug tool adds a small UI to the top right of a pane where you can configure what it should test for. If the target you need to check is right behind that UI, that's very frustrating.
We've added a toggle to move the target size UI out of the way, so you can see what you need to see. Thanks Emma for the suggestion!
Elements panel updates
With Chromium 138 there were new CSS properties, values and functions that we've added support for, and the suggestions for CSS properties are now sorted by popularity making it even faster to find the property you need.
Notable fixes
The elements panel also has a number of fixes, including:
- There was an issues parsing selectors with nested parentheses like
:is(:not(.class)), which has now been fixed. - The tree view would sometimes incorrectly match parts of an HTML element, like values or element names as potential
idrefs. We've updated our implementation to only check specific attributes for valid IDs. - Sometimes the tree view would remain empty until first selecting an element. Polypane now more eagerly loads the DOM tree on page load.
- When using the Elements panel
@layeroverview, unnamed layers were not displayed correctly. This has been fixed. - The color contrast checker in the A11y tab wasn't taking the font-size of the element into account when calculating the required contrast ratio, and this has been fixed.
StructuredData validation improvements
The StructuredData validation in the Meta panel was too strict compared to Google's Structured Data Testing Tool, and we've improved it to handle cases where we would previously shown an error while things were actually working fine according to Google's tools. Thanks Josh for helping us find and fix this!
Other Fixes and improvements
Polypane lets you hide the header so you just see the panes, but on Mac you could run into an issue where the top icons for panes weren't clickable because of the drag area. This bug has been fixed. Thanks Trond for letting us know!
You can now right-click the suggestion in the Color Picker to copy the value, but also to copy the entire suggestion sentence, which is useful for pasting into documentation or comments. Thanks Eric for requesting this!
Example: Color Swatch #64b99d on #eff8f5 with contrast ratio 2.16:1 and foreground suggestion #02a17e
Unfocused tabs would collapse their panel causing unneeded resize events for pages in the browser layout. This is now prevented, so the unfocused tabs will no longer cause resize events.
The Source panel layout when the panel is in landscape mode has been improved, with a better distribution of the available space between the source code and the validation overview. Thanks Andreas for the request!
Removal of SCSS support
We've removed SCSS support in the Live CSS Panel. With modern CSS the need for SCSS is greatly reduced, and maintaining support for it in Polypane took a lot of effort.
Removing it also paves the way for some exciting new features for the Live CSS panel that we have planned for the future.
Widevine DRM support postponed
Despite promising early results, we have to postpone Widevine support in Polypane for the foreseeable future.
Widevine is the DRM (Digital Rights Management) technology offered by Google and used by many streaming services to protect their content. It would add support for playback of DRM-protected content from Spotify, Netflix, Disney+ and many others.
We had hoped to implement it in this release, but ironically we would have to lower our security standards to support it, which is not something we are willing to do.
When adding Widevice support without lowering our security standards becomes possible, we'll add it to Polypane.
Chromium 138
Polypane 25 runs on Chromium 138. For all the experimental features enabled in this release, check out the experimental web platform features overview.
Get Polypane 25
Polypane is available for Windows, Mac and Linux in 64 bit and ARM versions.
Polypane automatically 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 Polypane yet? There is a 14 day trial available.
Try it for free. No credit card needed.
Polypane 25 Changelog
New
- New Manifest v3 extensions support
- New Outline panel: Form outline view
- New Chromium 138.0.7204.35
Improvements
- Improved Elements panel: New CSS properties and attributes support
- Improved Elements panel: CSS property suggestions are now sorted by popularity
- Improved Meta panel: accuracy of StructuredData validation (Thanks Josh)
- Improved Storage panel: automatically updates when storage changes
- Improved Outline panel: Prevent warning about duplicate landmarks when some are hidden
- Improved Outline panel: more accurate detection of name for hidden elements
- Improved Updated default sizing of some device presets
- Improved JSON and XML viewer now support URLs with TrustedHTML enabled
- Improved Debug tools: Toggle option to move target size UI out of the way (Thanks Emma!)
- Improved Layout debugging: we now use p3 colors where available (Thanks Dyna!)
- Improved Emulation: Add a reset to defaults button (Thanks Steve!)
- Improved Color picker: Right-click suggestion to copy value or full suggestion string (Thanks Eric!)
- Improved Focus layout: Randomly resizing the pane now animates the resize
- Improved Updated Web Vitals library
- Improved Update Google fonts list
Removals
- Removed SCSS parsing in the Live CSS Panel
- Removed Support for Manifest v2 extensions
Fixes
- Fix Elements panel: issue with selectors with nested parentheses
- Fix Elements panel: Prevent non-values from being recognised as (in)valid IDs
- Fix Elements panel: Fix occurances where the tree view would remain empty until selecting an element
- Fix Elements panel: Unnamed layers weren't displayed correctly
- Fix Elements panel: Color contrast checker in a11y tab now takes font-size into account again
- Fix Source panel: Better layout in horizontal layout (Thanks Andreas!)
- Fix Meta panel: prevent crash when adding an invalid URL as domain overwrite
- Fix Undocked devtools opening when moving away from devtools panel
- Fix Context menu not working after a hard reload
- Fix Node highlights: prevent design leak issue with global CSS values
- Fix Hiding the header on mac prevented top pane buttons from being clickable (Thanks Trond!)
- Fix Remove space in front of color swatch screenshot default file name (Thanks Eric!)
- Fix Prevent resize events for unfocused tabs
