Polypane 20: Browser features and performance
Tags: webdev, productivity, css, news
Published: 2024-06-19 13:16:32

Polypane 20 improves the features and performance of the Elements and Outline panel, as well as improving general browser features and stability. It's also running the latest version of Chromium, 126.

> **What's [Polypane](https://polypane.app)?** 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.

With [Polypane 19](https://polypane.app/blog/polypane-19-workflow-improvements/) being only a few weeks old we weren't planning on releasing a major version so soon, but we wanted to get the new Chromium version out to you as soon as possible.

Because of that this release is a little light on new features, but it does include a lot of smaller improvements and fixes that make a real difference in day-to-day usage.

## Elements panel

The [Elements panel](https://polypane.app/docs/elements-panel) is where you can inspect and edit the DOM and CSS across all opened panes at once.

As more CSS features become available we work hard to implement them (often before other devtools do, like `@layer` support in Polypane 8 or native CSS nesting in Polypane 13) and to make sure the panel is still as fast as possible.

### Performance

In this release we made a significant improvement in how we index the CSS styles for each pane. In some situations that is now an order of magnitude faster.

This means that the initial load of the Elements panel is faster, and that the panel is much more responsive when switching between DOM nodes even in more complex pages.

### `@starting-style` support

The `@starting-style` at-rule is really cool: it lets you define the initial style for an element when adding it to the DOM. This means that you can now animate elements as you add them to the DOM without needing JS. In Polypane you can now access that `@starting-style` like any other CSS rule.

You won't find this in the Chromium devtools yet so if you want to experiment with it, Polypane is the place to do it.

### A11y panel updates

In the accessibility panel we now have two new checks for the accessible name.

#### Warning for missing accessible names

Firstly, Polypane now knows which elements should have an accessible name (like headings, links, buttons etc) and will warn you if the selected element is missing one. Just a quick little test that will catch small issues. Note that this can also easily be checked in the Outline panel.


![A warning in the a11y panel when the accessible name is missing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hfajgeoo1v67vrlo44q.png)

#### Warning for repetition in the accessible name

An often found accessibility issue is the following scenario:

```html
<a href="/">
  <img src="home-icon.svg" alt="Home" />
  Home
</a>
```

Superficially this looks pretty good:

- it's a real link;
- it has readable text;
- the image has an alt text.

But when this is sent to a screen reader, it will read out "Home Home" because the accessible name for the link is the combination of the alt text and the text content.

![A warning in the a11y panel when the accessible name has repeating parts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcfvio69ig93l14qm3cp.png)

Polypane now check for repetition in accessible names and warns you when it finds them, and will also work with more complex repetition.

Writing the function/algorithm for this was a lot of fun, and we'll explain how we did it in a future blog post.

### Other Elements panel improvements

1. In this release we've improved the sorting of autocompletion suggestions when adding new CSS properties. In Polypane 19 we made suggestions purely on frequency (so if you types `fo` that would be autocompleted to `font-style`, as that's more likely than `font` or `font-display`) and in Polypane 20 this is now expanded to prefer the shortest property name when the frequencies are close. Long story short, it should make the suggestion feel even more natural.
1. When you have a top level `&` in your CSS that applies the styling to `:root`. Polypane now correctly shows this selector in the Elements panel.
1. The Elements panel now supports the `round()`, `mod()` and `rem()` CSS functions.
1. Along with `aria-hidden`, the DOM view now also highlights the `inert` attribute.

## Outline panel

We added some new checks to the [Outline panel](https://polypane.app/docs/outline-panel/), and improved its performance too.

### Performance improvements

Instead of getting accessibility data directly from the rendered page, we now get it from the accessibility tree that Chromium generates. This moves the work out of the main process and into a separate process, which makes the panel faster and more stable.

#### Looking ahead: full accessibility tree view

In a future release, this means we'll also introduce a full accessibility tree view. If you have suggestions on how we can make that the most useful for you, let us know!

### Cap on automatic link testing

The Link overview in the panel will [automatically check all links on a page](https://polypane.app/docs/outline-panel/#broken-link-checking) to see if they don't go to broken pages, so you catch broken URLs without having to click each one.

This is great when you have a few links, but when you have a lot of links this takes a lot of processing as well as bandwidth (for you and your server).

![a check status button next to the 'link' heading in the outline panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc73uq57eb8wcz7tz1uv.png)

So we've added a cap. When there are more than 100 links on a page, Polypane shows a "Check status" button that you have to click before we go and check them all.

### Accessible name vs visible name

The Outline panel now also checks the visible name of an element against the accessible name.
The visible text should be the same as the accessible name, or a substring off it. When it's not this could be a violation of WCAG success criterion 2.5.3, so we flag that for you.


![an exclamation point icon next to the words 'visual content', showing an unexpected difference between the visible and accessible name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v61nz9w3aex1ptvvspr4.png)

For example, on the homepage of Polypane we have a title with some fancy styling, and that styling interferes with the accessible name (removing spaces) so we overwrite that with a `aria-label` attribute. Then we (let's not hide behind "we". It was _I_, Kilian) changed the visible text to a much cooler title, but forgot to update the `aria-label` attribute. Polypane now catches that for me.

If the visible text is a substring of the accessible name, we show the difference but this isn't considered a violation (on its own).

### Repetition in accessible names

Like in the Elements panel, we now also check for repetition in accessible names in the Outline panel. Here too we show the repeating parts so you can quickly validate if it's a problem or not.


![A warning about repeating text in the outline panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bkukuo7ohko33dlt476.png)

### Support for heading levels 7 through 9

When it comes to accessibility, there's always more to know. Turns out that `aria-level` doesn't just match up to H1 through H6, but you can actually go all the way up to level 9 and browsers will still understand it.

...Except you probably shouldn't be using them, so we now flag it as a warning. If you find your structure needs them you're probably better off splitting that page or restructuring your content.

Heading levels beyond 9 however are not supported at all by browsers and aren't communicated as such to assistive technology. Those we will flag as an error.

## Load failure messages

The earliest few version of Polypane had a load error state but we lost them during a refactor. It took us a while but now they're back, and updated!


![unreachable server message in the panes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcdji5sfb6hm8q6tjgna.png)

When a page fails to load, Polypane will show a message in the pane that failed to load, so you know what's going on. Depending on the type of failure it tries to be a little helpful. Most often it's either a typo, a network issue or the server is gone.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="128"
  height="128"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="icon icon-tabler icons-tabler-outline icon-tabler-device-gamepad-2"
  style="display: block;margin-inline: auto;"
>
  <path d="M12 5h3.5a5 5 0 0 1 0 10h-5.5l-4.015 4.227a2.3 2.3 0 0 1 -3.923 -2.035l1.634 -8.173a5 5 0 0 1 4.904 -4.019h3.4z" />
  <path d="M14 15l4.07 4.284a2.3 2.3 0 0 0 3.925 -2.023l-1.6 -8.232" />
  <path d="M8 9v2" />
  <path d="M7 10h2" />
  <path d="M14 10h2" />
</svg>

Like any _serious_ browser, this error message should also have some sort of game in it. _Obviously_. So I'm asking you:

**What kind of game would you like to see in Polypane?** A snake game where the snake travels across all panes? A pong or breakout game where you control the paddle in all panes and you're playing multiple games at once? A game where you have to find the differences between two panes? Let me know (on Twitter, via email or the chat)! ...Bonus points if I don't have to build something from scratch.

## Screenshotting improvements

We've made various small improvements to the screenshotting functionality in Polypane.

### Dashed and dotted lines in the screenshot editor

You can now draw dashed and dotted lines in the screenshot editor. Thanks Rik for enabling this in [Pintura](https://pqina.nl/pintura/?aff=xLXrx&ref=polypane)!


![Dashed lines in the screenshot editor with the opened option showing the different line styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20rv4bo0nva1jymy833j.png)


### Easy access to the storage folder

When you take a screenshot and quick-save it, it will automatically be saved to the last used folder. We've now added a link to open that folder directly from the context menu of screenshot buttons.


![open folder button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7shzeoeaoyg0bhopg58v.png)

### Overview screenshot distortion (fix)

In vertical layout, sometimes the panes in an overview screenshot would get distorted, depending on things like multiple monitors with different pixel ratios and other fun situations. This is now fixed.

## Address bar

The address bar in Polypane can match URLs and page titles based on fragments. So you can type `po blo 20` to get to e.g. <code>https://**po**lypane.app/**blo**g/**po**lypane-**20**-browser-features-and-performance/</code>.

The algorithm behind it now prefers perfect matches over multiple partial matches. So if you type "sign in" it will put urls with "sign in" in the url or title higher than other URLs that might contain both "sign" and "in" at different points in the URL.

It's a small tweak but it makes the address bar feel much more dependable.

## Chromium 126

Polypane 20 includes an updated Chromium version, 126.0.6478.36. This lands cross-document view transitions and the Chromium devtools performance panel got a lot of improvements.

For an overview of the new experimental features enabled in 126, head over to our experimental features overview: [Experimental Chromium Web Platform Features](/experimental-web-platform-features/) and for additional info, head over to the [experimental chromium features docs](/docs/experimental-chromium-features/).

## Get Polypane 20

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](https://polypane.app/download/) to download the latest version!

**Don't have Polypane yet? There is a 14 day trial available. [Try it for free](https://dashboard.polypane.app/register).** No credit card needed.

## Polypane 20 Changelog

**New**

- **New** Elements panel: `@starting-style` support
- **New** Elements panel: Accessible name missing warnings (Thanks Torrance!)
- **New** Outline panel: check visible name against accessible name (WCAG SC 2.5.3) Thanks Markus!
- **New** Accessible names check for repeating substrings (Thanks Eric!)
- **New** Screenshot editor: dotted and dashed line support (Thanks Eric and Rik!)
- **New** Page load failure messages
- **New** Chromium 126

**Improved**

- **Improved** Elements panel: better sorting of suggested CSS properties
- **Improved** Elements panel: Support for `round()`, `mode()` and `rem()` CSS functions
- **Improved** Elements panel: Support for top level `&`
- **Improved** Elements panel: Support for nested at-rules
- **Improved** Elements panel: increase the number of CSS rules Polypane can process at once
- **Improved** Elements panel: significant performance improvements for nested styles
- **Improved** Elements panel: Highlight the `inert` attribute
- **Improved** Outline panel: With more than 100 links, testing them is now an explicit action
- **Improved** Address bar: Prefer perfect matches in suggestions when typing fragments
- **Improved** Screenshots: add 'open folder' link in context menus of screenshot buttons
- **Improved** Command bar: Allow matching by category (Thanks Artem!)
- **Improved** Show a error message for unsupported state files
- **Improved** Outline panel: support for heading levels 7 through 9
- **Improved** Performance: Get and use accessibility tree out-of-process
- **Improved** Live CSS panel: Support folding CSS code
- **Improved** Touch emulation: Easier toggle between touch in pane and normal mouse outside of pane
- **Improved** Add cmd+shift+brackets to nagivate between tabs (Thanks Jerod!)
- **Improved** Responsiveness of resizing the devtools and browser panels
- **Improved** Updated Google Fonts

**Fixes**

- **Fix** Elements panel: pressing : when adding a css property no longer applies the suggestion.
- **Fix** Elements panel: Only add anonymous scoping roots when style elements contains them.
- **Fix** Workspace panel: preview for 100% height panes are now visible again (Thanks Artem!)
- **Fix** Command bar: Lorem Ipsum command now works again
- **Fix** Command bar: Show correct shortcuts for next/previous tab on mac
- **Fix** Screenshot menu no longer hidden under devtools (Thanks Ahmad!)
- **Fix** 100% height panes in vertical layout now have a minimum height of 800px.
- **Fix** A11y checks: Prevent `input type="hidden"` from being marked as focusable
- **Fix** Visible focus styles during signup flow (Thanks Novella!)
- **Fix** Prevent error when failing to write detached panel window state (Thanks John!)
- **Fix** Prevent error when devtools reference is destroyed (Thanks Mike!)
- **Fix** Overview screenshot distortion in vertical layout (Thanks Travis!)
- **Fix** Pane emulation: Prevent auto dark mode from incorrectly showing as on for certain configurations