Polypane 24: Recording, 3D view, Custom tab colors and HTML editing

This is a jam packed release. We're introducing a new recording feature, a 3D stacking context visualization, you can customize tab titles and colors so you never confuse local and production again, the elements panel lets you edit HTML while preserving events, and we've updated Chromium to version 136.

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.

We took a little longer than usual to get this release out and the resulting changelog is massive because of it. Make sure to go through it to not miss anything!

New: Record panes and annotate the resulting video

Joining our extensive screenshotting capabilities, you can now record a pane and annotate the resulting video.

When recording a video, we show a custom cursor that highlights links and shows clicks with a quick animation, to make it easy to follow along.

We do this because we record directly from the web contents as they get painted, which gives us good performance but doesn't include the rendered cursor. Plus we get to highlight those clicks!

When you're done recording, you can annotate and trim the video in our built-in video editor, powered by Pintura, the same powerful editor we use for screenshots.

That means the same tools like text, emoji, arrows and other annotations can be added to your video as well. The new Trim plugin lets you trim the start and end of your video, or cut out parts you don't like.

more about the video editor in our recording documentation.

Stacking context 3D view

The new stacking context 3D view debug tool shows your page in 3D, with the stacking context and z-index of each element visualized.

This is a great way to understand how elements are layered on top of each other, and to debug z-index issues.

The debug tool is very intuitive: simply drag and drop to rotate the 3d view. Drag and drop will always rotate around the center of the pane, so you'll never lose sight of the element you're inspecting.

More on our stacking context 3d view debug tool.

Design updates

We're also continuing the design updates we started a few releases ago, slowly iterating on the design of Polypane to make it more modern and consistent.

Tab and address bar customization

Did you ever waste a bunch of time refreshing the tab because you didn't see the changes you are certain you just saved, only to find out embarrassingly late that you were looking at production rather than your dev server?

...me neither. 😬

Totaly unrelated, right-click on a tab to customize it and set a custom title and color for both the tab and address bar.

The tab customisation can be configured just for a tab, or for all tabs with the same domain. That will automatically apply the color and/or title overwrite whenever you open a page on that domain.

I've been using this for a while now and it's small, but such a game changer. I can now easily see which tab is which server, even when they are all the same page.

More on our tab customization.

Pane resizing

The pane resize indicators have been the same since before the 1.0 release, and it was high time we made them more modern.

The new pane resize indicators are more subtle and less intrusive, while still being easy to see and use. Rather than a blue bulge, we now have a small resize indicator that appears when you hover the side, bottom or corner of a pane.

Pane focus style

Rather than a thin blue bar at the top of a pane, a focused pane now has a full outline around it, making it easier to see which pane is currently focused and interactive.

Integrations are hidden by default

Our Marker.io integration is very useful, but not used by everyone. In order to make the UI less busy, we've hidden the integrations by default. To re-enable them go to the global settings in the top right and enable "Show pane integrations"

Pane rotation button

The pane rotation button is back! It was removed in a previous release but it turns out having a dedicated button is just a much better interaction. We hide it until you hover the pane header though, so it's still out of the way.

Copy link to highlight

After selecting some text and right-clicking it you can now create a URL that links to, and highlights, that selected text. This is a great way to share a specific part of a page with someone else, and it also works in other browsers like Chromium and Firefox.

While you're in that context menu, you can also find information on the text you just selected, like the number of characters and words: measure text length.

Sortable workspaces

You can now sort your custom workspaces to switch around which workspace uses which shortcut. Simply drag and drop a workspace to its prefered position in the list.

'Invisible' improvements

Some improvements aren't immediately noticeable that make the browser just that little but more usable: the type of details we want to get right.

• When the address bar is too narrow to show the entire URL, you can hover it to see the URL in a tooltip.
• Whenever you change the position of the panel, the new position is automatically set for new tabs as well without it affecting existing tabs.
• You can now drag and drop non-active tabs without first activating them. This is a small but very useful change that makes it easier to manage your tabs.

When using Polypane it means that it just feels right.

Elements panel updates

Edit as HTML

A feature that until now was missing from the Polypane elements panel is editing the HTML of an element. It took me a while to crack this because I didn't want editing the HTML to have the side-effect of removing the event listeners elements or their children have. (some browsers preserve these, some don't)

The Edit HTML feature in the Polypane elements panel preserves the event listeners of child elements even if you edit their contents or attributes, by carefully looping over the children and updating them in place, rather than rebuilding the entire DOM tree. It just works.

Add to that we use the existing non-modal text-editing UI and support code hightlighting, and editing HTML in the Polypane Elements panel is miles ahead of other browsers. It's a joy to use.

Containing block information in the debug tab

Along with information on the offsetParent and Stacking context, the debug tab in the Elements panel now shows the containing block of an element, and whether it is a containing block itself. Thanks James for the suggestion!

The containing block determines how elements get their dimensions (e.g. which element percentages are based on) so this is a very useful piece of information to have.

Accessibility warnings

The A11y tab now looks at the role of an element to determine if it's allowed to have an accessible name and gives a warning when you try to set one.

For example, adding an aria-label attribute on an element with a generic role like a div does nothing, and so the A11y tab will warn you about it. This is a great way to learn about the different roles and their implications.

Layout debugging clearing

While debugging a layout, you might have added layout debugging overlays to a large number of elements. While you can easily find those thanks to the indicators in the tree view, removing them one-by-one is annoying.

You can now middle-click the layout debugging icon in the elements panel to remove all layout debugging overlays from the page. (note that middle-clicking also works for the debug tools active on panes!)

Newly supported CSS

There's a whole bunch of new CSS. in this release. We've updated the autocomplete for many CSS properties that recently got updates and added autocomplete for new ones like corner-shape (which, yes, you can test out in Polypane!).

We've also added support for inspecting the styles of new pseudo classes like ::checkmark, ::picker-icon, and carousel-related ::column, ::scroll-button, ::scroll-marker, and ::scroll-marker-group. Lastly, you can now force the :open pseudo state for elements that support it (like details and dialog).

Meta panel updates

Sorting and hiding social media previews

The list of social medias previews can now be sorted, and you can hide individual previews. If there's some social media you just don't care about anymore or you want to see a specific one first, you can now do that!

Author info in Mastodon previews

Mastodon cards can show an associated Mastodon author if you define a fediverse:author meta property. Polypane will now fetch that information when it detects that an author is available:

No all Mastodon instances allow this access, so we show a warning when the author information is not available.

More robust handling of fallback and HTML in Slack and discord card previews

Rather than encode HTML in titles, Slack and Discord just remove anything that looks remotely like HTML. Polypane now emulates this accurately:

Should be useful for that blog post about the <select> element that now can be customized with CSS ;)

Screenshotting updates

Quality Fixes

In Chromium 122, the graphics team working on Chromium made some changes to how web contents are rendered on the screen, resulting in screenshot capturing not using the correct page scale. Fixing this issue in Chromium isn't feasible so we changed the way we make screenshots.

When you take a screenshot of a pane, we'll quickly "blink" the pane to make sure we capture it correctly. The end result is much sharper screenshots!

Default action

The default action for screenshots is now configurable in the screenshot settings, rather than the global settings, to make it easier to change. You can choose to open the editor, save to disk or copy to clipboard.

Screenshot editing updates

The screenshot editor (powered by Pintura) got some additional configuration to make the default style of arrows, lines and paths more in line with the rest of Polypane, so they should look much better now.

Outline panel updates

We made a ton of small improvements to the outline panel to deal with weird edge cases and improve the overall experience.

For example, we've improved our own accessibility name calculation for images and complex nesting of elements, which has some tricky edge cases for specific element types.

Another fun thing we fixed is that the Focus order now handles negative tabindices tabindex="-4" correctly, which is a totally weird and useless thing to do but happens in the real world, so we need to be able to handle it.

Radio group focus handling

Turns out, radio groups are a bit more complex than I thought. The focus order now follows the browser logic for radio button groups, meaning the first radio button in a group is focused, unless a radio button in the group is checked and then that is focused. That was fun to build!

Links outline

The links outline now also shows <a> elements if they lack a href attribute (for example because it's mistyped, or because it only has an onclick handler). These are broken links so having them in the overview should help you find and fix them.

Accessibility panel wording update

A source of confusion for many people has been that when the accessibility panel finds issues, we show the version of WCAG that a rule was introduced in.

For a rule that was introduced in 2.0, it would say "WCAG 2.0", and for a rule that was introduced in 2.1 it would say "WCAG 2.1". This is useful for people that have a legal obligation to test strictly 2.0 or 2.1 rules: much of the current world-wide web accessibility legislation is based on WCAG 2.0 or 2.1.

Unfortunately it frequently caused people to think that Polypane used outdated rules, not realizing that rules introduced in 2.0 and 2.1 are still part of 2.2.

To help communicate this better, we now say "WCAG 2" for rules that are part of 2.0, 2.1 and 2.2, we show "2.1 and up" for rules that are part of 2.1 and 2.2, and "2.2" for rules that are only part of 2.2.

If there ever is a 2.3, we'll update the wording again to make it clear which rules are part of which version.

There is one success criterion that is in 2.0 and 2.1 but not in 2.2: 4.1.1 Parsing. The accessibility panel will not test for this rule. If you need to check validation errors still, use the built-in validation in the source panel.

Video element context menu

The context menu for video elements has been improves to allow you to easily play/pause and show the controls of a video.

Polypane already had saving and copying options for video elements, and this makes it even easier to manage videos when inspecting sites. Thanks Eric for the suggestion!

Polypane has a ton of custom context menu options for specific elements like images, links, headings and SVGs. Make sure to try right-clicking on elements to learn the options that are available!

Debug tools updates

We made a few updates to the debug tools in this release.

The target size debug tools now have a recheck button and an option to check targets in paragraphs. The recheck button will let you quickly validate if your changes solved the issue, and while targets in paragraphs are excluded from the WCAG rules, often times you'll still want to check them.

In addition to this, we've updated the logic of our target size debug tools. It can now handle many more edge cases where measuring the target size is tricky.

The track focus debug tool has a small indicator that shows the role and accessible name of the element that currently has focus. Previously this was in the lower left corner, where it was partially obscured by the status bar. It's now in the bottom right corner, where it won't be obscured by anything.

Thanks Eric for requesting these changes and helping make test cases!

Emulation updates

In this release we improved the handling of userAgentData, a chromium-only 'successor' to the userAgent. userAgentData now more closely follows other emulated properties to prevent situations where the userAgent and userAgent data return different values. Thanks Stuart and Stephanie for the suggestions!

We also improved the handling of mobile page zoom logic and resetting. This is a small but important change that makes automatic zoom behavior more in line with actual mobile devices.

Not in this release: Manifest v3 😟

I planned Manifest v3 support for this release since that landed in Electron 35. Unfortunately, we found issues with its support with multiple sessions, particularly on Windows and Linux. This means we had to postpone it to a later release. I hope to land it soon.

Chromium 136

Polypane 24 runs on Chromium 136 Beta, the upcoming release. For all the experimental features enabled in this release, check out the experimental web platform features overview.

Get Polypane 24

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 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 24 Changelog

New

• New Record panes and annotate the resulting video
• New Debug tools: Stacking context 3d visualisation (Thanks Ollie!)
• New Custom tab title and color
• New Custom tab and address bar colors based on domain
• New Elements panel: Support for event-preserving HTML editing
• New Copy link to highlight
• New Meta panel: Mastodon preview now includes author information
• New Chromium 136.0.7103.33

Improvements

• Improved Elements panel: show warnings for elements/roles that should not have an aria-label or accessible name
• Improved Elements panel: Show information on an elements status as containing block and the containing block it's in (Thanks James!)
• Improved Elements panel: middle-click layout debugging icon to turn it off across the page (Thanks Paulo!)
• Improved Elements panel: support for forcing the :open pseudo state
• Improved Elements panel: inspect and edit styles for new pseudo classes like ::checkmark, ::picker-icon, and carousel-related ::column, ::scroll-button, ::scroll-marker, and ::scroll-marker-group.
• Improved Elements panel: support for corner-shape
• Improved Elements panel: support for newly added CSS properties and associated values
• Improved Elements panel: Show explainer warning when you double-click to edit in the tree view
• Improved Meta panel: Order and hide social media previews (Thanks Bailey!)
• Improved Meta panel: Improve handling of HTML in Slack card previews
• Improved Outline panel: Now also knows how to handle tabindices lower than -1 (Thanks Jules!)
• Improved Outline panel: Add warning for links with the word "continue"
• Improved Outline panel: visual content is normalised before comparing to prevent false positives
• Improved Outline panel: Shows links with missing href attribute and warns about them
• Improved Outline panel: Focus order now follow browser logic for radio button groups (Thanks Eric!)
• Improved Design: New pane resizing indicator designs
• Improved Design: New focused pane indicator style
• Improved Design: Address bar now shows full URL as title when truncated
• Improved Design: Add the pane rotation button back again
• Improved Design: Integrations are hidden by default
• Improved Design: Latest set panel position is applied to new tabs to bring it in line with other browsers
• Improved Debug tools: Track focus infobox is now in the bottom right, no longer obcured by status bar (Thanks Eric!)
• Improved Debug tools: Target size is now even more accurate for edge cases (Thanks Eric!)
• Improved Debug tools: Target size checks now have a recheck button, and an option to check targets in paragraphs
• Improved Rename cache disable option for clarity around sessions
• Improved Right-click context menu options for video elements (Thanks Eric!)
• Improved JSON viewer: Opening JSON files from disk now automatically uses the full layout
• Improved More performant address bar suggestions
• Improved Workspace panel: Re-order custom workspaces (Thanks Sam!)
• Improved Screenshots: Default screenshot handling action is now configured in screenshot settings
• Improved Screenshots: Better defaults for arrows and other annotation shapes
• Improved Screenshots: refactored to be at the correct scale to improve quality
• Improved Color picker: Show pickers for fore- and background and improve design
• Improved Tabs: Allow dragging non-active tabs without first activating them (Thanks Sander!)
• Improved Emulation: improved handling of mobile page zoom logic and resetting
• Improved Extensions: When switching tabs, the first pane is automatically set as the extension target
• Improved Additional notifications during autoupdate download process
• Improved Accessibility panel: Improve wording around which versions of WCAG 2 are being used
• Improved Console panel: Use the right mac shortcut on mac (Thanks Livio!)
• Improved Improve userAgentData emulation (Thanks Stephanie!)
• Improved Updated set of accessibility rules
• Improved Updated list of known Google fonts

Fixes

• Fix Allow workspace imports that are missing a title (Thanks Masana!)
• Fix Prevent issue where the reload button would keep spinning even after the page has finished loading (Thanks Steve!)
• Fix Backdrop filters didn't work in some cases (Thanks Matthias!)
• Fix The Storage panel not updating correctly (Thanks David!)
• Fix Clearing stored data now works across all sessions
• Fix Browse panel: correctly hide status bar on context menu
• Fix Opening files from disk on Windows and Linux
• Fix update navigator.userAgentData platform information (Thanks Stuart!)
• Fix Pane title blinking when switching between tabs
• Fix Outline panel: Prevent accessibility tree from other active tabs from showing
• Fix Outline panel: only run checks for title attribute if it is defined (Thanks Eric!)
• Fix Outline panel: Prevent error for images with invalid URLs as src.
• Fix Outline panel: Headings overview now correctly handles headings with explicit roles (Thanks Eric!)
• Fix Outline panel: Prevent duplicate elements from appearing in the outline panel (Thanks Eric!)
• Fix Improved accessibility name calculation for images
• Fix Improved accessibility name calculation for complex nesting (Thanks Eric!)
• Fix Command bar: Lorem ipsum generator always returned 3 sentences
• Fix Allow pages without favicon to also be available as suggestion in the Address bar
• Fix Context-menu being temporarily unopenable after form input on macos
• Fix Elements panel: Fix background of dropdown with panes (Thanks Qton!)
• Fix Elements panel: Better handling of tab key in style editor
• Fix Rulers: Column overlay didn't update on browser resize in the Full layout
• Fix Meta panel: Return correct attribute copy when copying an undefined language
• Fix Meta panel: Prevent showing double errors for non-existent languages
• Fix Polypane no longer marks link elements without an href as focusable