Polypane 5.1 introduces support for web components across the application, many improvements to the Outline panel and Contrast checker. There an updates to the Chromium version, Google fonts list and accessibility ruleset.
Web component support
Polypane now has support for web components throughout the application: you can reach into them with the element inspector, inspect and edit them in the Elements panel and all the outline panel lists like headings, links and focus order support web components too.
Because web components are basically engineered to be as isolated from the rest of the page this was quite a lot of work, but it's an important part of the modern web.
Outline panel updates
As mentioned, all overviews now support web components, so you might see a different list compared to Polypane 5 if you use web components.
The outline panel Heading overview has additional warnings for a missing h1 element and empty, hidden or presentational headings are badged for context.
The Links checker now supports links that are missing a protocol (starting a link with // uses the same protocol as the current page) or contain ./ somewhere in the url.
Contrast checker updates
The contrast checker debug tool has been updated to provide less false positives (where the calculated contrast ratio shows as 1) and labels now stick to elements if they're fixed or sticky.
New performance options and notification
Polypane now warns you if your site has an excessive amount of CSS. We defined that at 10.000 unique rule sets (a rule set is a css selector and all its properties together). At 10K unique rule sets/selectors, Polypane has to do a lot of work in parsing all the CSS to provide the features we do. In the future we might disable certain features in Polypane to keep everything performant.
The performance options now have a clear all button to quickly reset all options, and a "keep in first pane" option so you can disable resource intensive features across panes but keep them visible in one of them.
Get Polypane 5.1
Polypane updates automatically on both Mac and Windows. Linux users need to download the new version from the download page.
Don't have Polypane yet? There is a free 14 day trial available. Get it here.
Full changelog
- New Full support for Web components in Element inspector
- New Full support for Web components in Outline panel
- New Performance warning for sites with 10K+ CSS selectors
- New Added CSS Stacking Context devtools extension
- New Inspect element in Chromium devtools from the Elements panel (Thanks Roel!)
- New Heading overview gives warnings for empty, hidden and presentational headings
- New Heading overview gives warning if there is no h1 on the page
- New Performance options have a reset button and a "keep in first pane" option
- Improved More performant scroll sync for sites with smooth scrolling enabled
- Improved Contrast checker shows less false positives
- Improved Contrast checker labels stick to fixed elements
- Improved Updated Chromium to 89.0.4389.90
- Improved Breakpoint panels warning limit changed from 16 to 20
- Improved Updated Google Fonts list
- Improved Links panel can now check links with "./" in them
- Improved Links panel can now check links without a protocol
- Improved Facebook preview rendering improved for sites without og:image
- Improved Twitter preview rendering improved for sites without twitter:image
- Improved Keyboard focus styling across the app
- Improved Updated accessibility panel ruleset
- Improved Errors messages consistency in the Meta panel
- Improved Tab order in Pane header
- Improved Reference image now takes visible rulers into account
- Improved Polypane console panel now uses same fonts as devtools console (Thanks Lars!)
- Improved Reloading devtools extensions now always forces a redownload
- Improved Automatically open Chromium devtools when switching to the devtools panel and there is just one pane
- Improved Prevent caret from changing position when editing style and attributes
- Improved Move Twitter preview to the top of the Social previews
- Improved Added support for clamp() in style editor
- Improved Node tooltip rendering consistency
- Improved Icon and tab alignment in the header
- Improved Rendering of inspect button right click menu
- Improved Rename Header overview to Heading overview (Thanks Roel!)
- Improved Meta panel now shows doctype
- Improved Address bar can no longer get cleared when you're typing in it.
- Improved Context menu now has copy option for selected text
- Fix Installed devtools extensions on Windows sometimes caused app not to load (Thanks Michael!)
- Fix Crash when console popup couldn't be rendered (Thanks Fabio!)
- Fix Context menu in Chromium devtools was not visible
- Fix Many typos (Thanks Roel!)
- Fix Full layout on Mac and Windows showed white bar at the bottom (Thanks Bjoern!)
- Fix Display DOM tree for pages without a doctype
- Fix 1px overlap of buttons in menus causing flickering (Thanks Niels!)
- Fix Flyout menus on windows were broken (Thanks Warren!)
- Fix Error when loading Polypane with layout debugging active (Thanks Sam!)
- Fix Deleting attributes from elements panel didn't work
- Fix Updating numbers in a calc() sometimes resulted in NaN
- Fix Tota11y is no longer loaded twice after navigation in SPA's
- Fix Overview screenshot sometimes generated empty image (Thanks Darius!)
- Fix Reference image no longer renders behind website
- Fix issue where reload in subframes caused main URL to update
