Polypane 22.1: true browser tabs and a new split layout

In this last full release of 2024 we're shipping two big new features and a host of improvements and fixes. The biggest new feature is the introduction of true browser tabs that keep their state, and the second is the new split layout.

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.

True browser tabs

Browser tabs landed all the way back in Polypane 3, where I implemented tabs with one caveat: unfocused tabs were not kept in memory, and reloaded when you focused them.

This helped keep the memory requirements down but came at the cost of not being able to quickly tab over to a docs tab and then tab back. While Polypane has the browse panel for those pages, this back-and-forth tabbing is engrained in many developers' workflow.

In Polypane 22.1 I've completely rewritten the tab logic to keep tabs in memory and keep their state. This means that when you switch tabs, the tab is not reloaded but instead kept in memory, with the full state of your pages and the panel retained. This makes tabbing between tabs much faster and more reliable, at the cost of using more memory in total.

To manage memory, Polypane will let you mark tabs as being allowed to go to sleep when not active from their context menu. This will unload the tab from memory and reload it when you switch back to it.

Search now also happens in regular tabs

When performing a search, Polypane previously opened that in the Browse panel. Now search happens in the current tab just like regular browsers. As a result we've also moved the search management UI to the main browser instead of the browse panel.

Split layouts

So hot right now.

Joking aside, the split layout is a new layout option that gives you two panes side by side with a resizable divider in the middle.

This is useful if you want some Polypane (like a single desktop view and a mobile view to keep an eye on), or if you want to compare different pages side by side (by turning off navigation sync).

Beyond the two panes being automatically sized horizontally, everything else still works as you'd expect: you can still resize them vertically and all the emulation options, debug tools and panels still work.

Astigmatism simulators

Polypane has had astigmatism simulators and while they did a really good job of showing how texts on screens can get 'doubled' for people with astigmatism, they lacked the simulation of the way light gets bend into streaks.

To be honest, I didn't think it was possible to simulate light streaking at an angle, but Kuba proved me wrong and created these amazing looking simulators that are fully interactive.

UI updates

Over the next couple of releases we're doing a small UI refresh to clean up the UI where possible, improve colors and increase consistency across the app. This release has a few of those changes, with more to come in the future.

Notable in this release is that fonts should be more readable, icons in the address bar are more consistent and the pane headers has been realigned to the grid.

Address bar

Additionally I've taken another look at how the address bar sorts suggestions and made the URL length part of the sorting logic. If you switch between a lot of local server ports like me, this should make your life a little easier.

The address bar now also prefers matches to the URL rather than the title, which results in slightly more predictable sort ordering.

Web security warning

When web security is disabled in the browser, Polypane will now show a warning in the address bar. This is to prevent you from accidentally working on a site with security disabled.

Coming UI updates

Future releases will look into the color scheme of at least light mode as well as the layout of the panels. The goal here is to make incremental improvements without changing the overall look and feel of the app.

Support for blob: and data: URLs

Polypane now supports blob: and data: URLs. This means that if you're working with these URLs in your development environment, you can now open them in Polypane and they will work as expected.

While I have used blob: urls to create downloads in the past, you can also assign blobs to actual URLs and open those. This is how Web Awesome creates their full-page examples, and those didn't open in Polypane because it rejected the blob:https:// protocol.

After Jeroen asked about it on Bluesky (we're on bluesky: @polypane.app!) I couldn't help but be nerd-sniped into adding support for them.

While implementing that, I also made sure data: support was added (which, coincidentally, @firefoxdevtools asked about on Mastodon!)

Performance improvements

We've identified several more bottlenecks for large DOM pages and improved performance in those situations.

Additionally, we've made sure that scroll actions will prevent other more expensive actions from running, which should make scrolling in Polypane feel smoother.

In this release we've also updated to React 19 which comes with its own set of performance improvements meaning the UI should also feel snappier.

Elements panel improvements

The elements panel has seen a bunch of improvements:

Warning for all:unset

all:unset is rarely what you want to do in CSS and can have unintended consequences (like also removing all focus styling). When you use all:unset in your CSS we'll show a info icon next to the declaration.

Mouse wheel to increase/decrease numbers

After focusing a number in the elements panel you can now also increase and decrease it with the mouse wheel, along with the up and down arrow keys that already worked in previous releases.

Like the arrow keys, this will increase or decrease the number by 1, by 10 when you hold ⇧, by 100 when you hold ⌘ and by 0.1 when you hold ⌥.

Stylesheets are now clickable

You can now click on a stylesheet in the elements panel to inspect it. If it's an external stylesheet it will be opened in the Browse panel. If it's from a style element that element will be focused in the Elements panel itself.

Better CSS selector generation

The CSS selector generator is now faster and avoids unstable css-in-js selectors. This means that when you're using css-in-js libraries like styled-components, the generated selectors will be more stable and less likely to change.

This makes the generated CSS selectors more reliable to use for automated testing.

Color previews for inherit and currentcolor

When using inherit or currentcolor as a value for a color property (or part of one), the color preview will now show the actual color that is used.

Outline panel improvements

I want to give a quick shout-out here to Eric and Manuel, both of who have been providing a lot of very valuable feedback regarding existing features as well as insights into the correct interpretation of various accessibility-related standards.

Presentational and content images

The image outline now clearly shows the difference between content and presentational images, and if you're only concerned about the content images you can hide the presentational ones.

Presentational images are images that don't convey any information. They are marked with a role of none/presentation or with aria-hidden, which is a slightly different signal than a present but empty alt attribute.

Warnings for repeated accessible names

In the heading overview we warn about repeated header text. We now do the same in the accessibility panel for accessible names. Using the same text for multiple elements can be confusing for screen reader users.

While implementing this we found a bug in the way our custom accessible name algorithm worked when elements had self-referential aria-labelledby attributes. This has been fixed.

Focus order

There are two types of focus:

• Elements marked as focusable in the accessibility tree are programatically focusable (you can do elem.focus() on them)
• Elements in the focus order (you can tab to them)

Since implementing the accessibility tree in Polypane, we've incorrectly conflated the two in the focus order outline.

This has now been fixed, and instead we show a warning for elements that you'd expect to be in the focus order but are not.

Late discovered tab order

Late discovered focusable elements are now added in the correct order in both the Accessibility tree and the focus order.

What are late discovered focusable elements? Elements that can be tabbed to but that are inside an element that is hidden from assistive technologies are not in the accessibility tree until you tab to them. Chromium automatically removed for example an aria-hidden attribute if this happens.

Meta panel improvements

Bluesky, Mastodon and Google all had updates to their social card designs so in Polypane they're now up to date.

Bluesky has a new order and shows a little globe icon for the URL, Mastodon now shows relative time for articles and has a few new ways to get the Author, and Google partially reverted to a previous design.

Web vitals updates

We've removed FID from the list of web vitals, as the web vitals library no longer reports it.

We've also updated the way data gets displayed in the popop so you can see the difference between the web vitals reporter not having gathered enough info yet, or it having gathered info but the value being zero.

Improvements to the Windows platform

I recently upgraded the windows device I use for testing Polypane (I went from a 1st gen Surface Go with Windows 10 to a Lenovo Ideapad 5 with Windows 11) and that has allowed me to make some Windows-specific improvements:

• Native titlebar controls: Polypane now uses native titlebar controls everywhere, So you can hold maximize to show the alignment menu.
• Sharp looking installer The text in the installer was very blurry on High DPI screens, a common issue with the NSIS installers we use. There's a non-default option to match the DPI of the screen so I've enabled that.
• Touch pane resizing: If you have a touch screen, you can now also tap and drag the panes and side panel to resize them.

Middle mouse click to drag

There's a bunch of different ways to drag the horizontal and vertical layouts. One of the ways is holding spacebar and click + move, which is how a lot of design tools allow panning.

What I didn't know was that those same design tools also support doing this with just a mouse wheel hold! So that now also works.

Notable fixes

There are a couple of notable fixes in this release:

Dark mode devtools

The Chromium devtools now properly start in dark mode when you're in dark mode in Polypane. This was an electron bug that took a while for the fix to land but I'm glad it's here.

Apologies for all the flashes of bright light, folks!

Clean up of Chromium flags

We've cleaned up some of the Chromium flags we were using, as some causes rendering issues to appear on specific pages (one had its header completely missing!).

Connection errors

When you have a connection error, Polypane will clear the web vitals and console stats. This prevents stale data from showing up in the UI.

Get Polypane 22.1

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.

Happy new year!

This is the 17th and last full release of 2024, and I want to thank you all for your support, feedback and bug reports.

I hope you have a great holiday season. I'll see you all in 2025!

Polypane 22.1.1 Changelog

• Fix Show find in page UI again (Thanks Eric!)
• Fix Focus order works for SPAs again
• Fix Focus order correctly differentiates between programmatically focusable divs and keyboard focusable scrollers
• Fix Panes animate in and out again, fixes onboarding (Thank Oliy!)
• Fix Social media previews using GIF now show the first frame again
• Fix Some extensions no longer installed correctly due to Chrome store changes

Polypane 22.1 Changelog

New

• New True browser tabs that keep their state
• New Split layout
• New Astigmatism simulators (Thanks Kuba!)
• New Support for blob: and data: URLs (Thanks Jeroen!)

Improvements

• Improved Better performance during synced scrolling
• Improved Styling changes for better readability
• Improved Better Address bar sorting logic
• Improved Show warning in address bar when web security is disabled (Thanks Lloyd!)
• Improved Performance for large DOMs (Thanks Luke!)
• Improved Middle-click to drag now works in horizontal and vertical layous (Thanks Sil!)
• Improved Elements panel: Warning icons when all:unset is used (Thanks Marcus!)
• Improved Elements panel: Suggestions no longer get applied on hover
• Improved Elements panel: Stylesheets are now clickable to inspect them (Thanks Marc!)
• Improved Elements panel: Better support for SVGs encoded in CSS values (Thanks Philip!)
• Improved Elements panel: Increase/decrease numbers with mouse wheel
• Improved Elements panel: CSS selector generation is now faster and avoids unstable css-in-js selectors
• Improved Elements panel: Support color previews and editing for inherit and currentcolor
• Improved Meta panel: Updated Mastodon design
• Improved Meta panel: Updated Bluesky design
• Improved Meta panel: Updated Google design
• Improved Meta panel: Shorter warning for tab target sizes
• Improved Web vitals: Removed FID from the list of web vitals
• Improved Web vitals: Show difference between no data yet, and the value being 0
• Improved Web vitals: Updated INP data to be more accurate
• Improved Outline panel: Focus order overlay now takes tabindex into account (Thanks Eric!)
• Improved Outline panel: List items that could be in the focus order but are not now
• Improved Outline panel: Improved logic for generic roles with computed name in a11y tree (Thanks Eric!)
• Improved Outline panel: show warnings for repeating computedNames
• Improved Outline panel: Clearly show difference between content and presentational images (Thanks Eric!)
• Improved Outline panel: checkbox option to hide presentational images
• Improved Live CSS panel: Introduced the new CSS logo
• Improved Live CSS Panel: Faster SCSS parsing
• Improved Live CSS Panel: Better update logic
• Improved Debug tools: Updated A11y.css
• Improved Debug tools: Placeholderifier with only translatable now supports translatable=no on parent elements (Thanks Robbert!)
• Improved Windows: Use native titlebar controls
• Improved Windows: Fix blurry text in installer
• Improved Windows: support for touch pane resizing
• Improved Accessibility panel: Titles are now copyable (Thanks Bart!)
• Improved Accessible name calculation: support self-referential aria-labelledby
• Improved Full layout and Focus layout now use separate panes
• Improved Extensions: Add Testing Playground to known extensions
• Improved Polypane peek: Separate logic for content and presentational images
• Improved A11y (app-wide): Show the correct role for presentational images
• Improved Command bar: added close other tabs commands
• Improved Accessibility panel: Updated accessibility ruleset
• Improved Updated list of Google Fonts
• Improved Updated Chromium to 130.0.6723.152

Fixes

• Fix Favicon from previous page applying when current page has no favicon of its own
• Fix Logic for when social media previews show the og image
• Fix Image tooltips now correctly show warnings for missing alt text
• Fix Color jump to hue 0 when dragging color to grayscal for ruler color
• Fix Incorrect rendering of pages due to outdated Chromium flags
• Fix Connection errors now clear web vitals and console stats
• Fix Elements panel: improve support for CSS Selectors when calculating specificity
• Fix Elements panel: updating the color of a property using a css custom property as value updates that custom property
• Fix Elements panel: pressing the chromium button now always opens the chromium devtools in the panel
• Fix Elements panel: Faster updating of style overview after changes
• Fix Middle click to remove debug tools
• Fix Exclude Marker.io from internal pages
• Fix Exclude marker.io from CORS header changes
• Fix incorrect size for Marker.io button for focus and full layouts
• Fix issue where Chromium devtools would not be in dark mode
• Fix Invisible text in options in the app settings menu dropdowns (Thanks Alex!)
• Fix Detached panel icon on macOS showed a 1px open line
• Fix Outline panel: Late-discovered focusable elements are added in the correct order (Thanks Manuel!)
• Fix Outline panel: Show potential landmarks option is now remembers between app starts
• Fix Tooltip for buttons would sometimes list "undefined"
• Fix Icon colors in dark mode session manager (Thanks qton!)