Polypane 15: Fully featured browser in the browse panel, performance improvements, Chromium 116 and more

By admin
If you want to be kept up to date with new articles,

CSS
ORG

resources and tools, join our newsletter.

In

Polypane
GPE


15
CARDINAL

we rebuilt the browse panel so that it’s now a fully featured browser with tabs, pinned tabs, search and autocomplete.

We also improved performance throughout the app, added new features to the elements panel, added support for remote debugging and we’re now also running on

Chromium 116
PRODUCT

.

What’s

Polypane
GPE

?

Polypane
GPE

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.


New Browse
ORG

panel

Since the inception of the browse panel we’ve been planning to add tabs and search to it. A major concern was to make sure that the browse panel wasn’t taking resources from the panes and that it wouldn’t slow down the app. We found a nice way to do it!

That’s right, we built a browser into our browser.

With the browse panel now having tabs (which live alongside your project/main tab) and pinned tabs (which are available in all projects/tabs), you can have all the external resources you need right inside

Polypane
GPE

, doing away with a major source of context switching.

Search support

People have been asking us for search support for a long time too, and that just didn’t make sense for the main

UI
ORG

in

Polypane
GPE

. But it does for the browse panel! The address bar in the browse panel works like an omnibox, so if you fill in something that’s not a URL, we’ll search for it in your default search engine.

That default search engine is configurable, and we ship with a whole bunch of them to make it easy to pick and switch, as well as an editor that lets you add your own (or update the existing ones).

Quick search

You probably don’t always want to search in your default search engine, sometimes you want to look up something in a specific one, like

MDN
ORG

. You can do that by prefixing your search with the

first
ORDINAL

few letters of a search engine name, like m query for

MDN
ORG

or

ec
ORG

query for

Ecosia
GPE

.

There’s a bunch more features, like installing Browser extensions and setting a homepage and more. You can read all about it in the browse documentation.

Let us know what to do about shortcuts

The

one
CARDINAL

thing still missing is browse-panel specific keyboard shortcuts. We’d like your input!.

Should we use the same shortcuts as the main

UI
ORG

(like ⌘ T ) but look at whether the browse panel is focused, or should we use different shortcuts (like ⌘ ⌥ T )? Let us know!

Search from the regular address bar!

Most people’s muscle memory is likely to still use the main address bar so when you fill in a search query there, we forward it to the browse panel. And here too you can search with the

first
ORDINAL

few letters of a specific search engine to pick that one.

Performance improvements

In this release we profiled many different parts of the app and made a lot of improvements to make

Polypane
GPE

faster and more responsive.

We had a pretty big performance issue where many network requests (like those done by

Next
ORG

, Gatsby etc) inside the panes would really slow down the

UI
ORG

. A lot of the feedback about performance that we’ve been getting since the past release was related to this, and I’m happy to say that we’ve resolved this problem!

We also improved the responsiveness of a number of debug tools and common actions by decoupling their

UI
ORG

responsiveness from the rest of the application. The result is that

Polypane
GPE

is now much more responsive and snappy.

If performance was an issue for you in the past, give

Polypane
GPE

15 a try!

Remote Debugging support

Many IDEs have a setting where they can open a browser and connect to it for debugging. This is called remote debugging and it’s a great way to have your site visible in your browser, but get all the debugging info in your IDE alongside your code.

Turns out, we already had basic support for it! We only needed to do a little bit of work to bring it up to proper support. Use the

CLI
ORG

command to open

Polypane
GPE

with remote debugging enabled or configure your IDE to open

Polypane
GPE

with remote debugging enabled.

$

polypane
GPE

–remote-debugging-port = 4321

Thanks for

Benjamin
PERSON

to get the ball rolling on this, and thanks to the

WebStorm
LOC

team to helping me figure out how they call the browser so we can correctly react to it. You can find the instructions for

WebStorm
LOC

here: Configuring WebStorm to work with

Polypane
GPE

and we’ll be adding more IDEs soon.

Elements panel improvements

The elements panel is one of the places where we spent time improving performance, as well as making a bunch of smaller tweaks:

Layout debugging for subtree of selected element

You can now turn on layout debugging for just the selected element and its children. Super useful if you want to focus in on the structure of

one
CARDINAL

particular part of the page without having to turn on layout debugging for the entire page. Thanks

Rik
PERSON

for suggesting this one!

Support for complex

@layer
PERSON

nesting

We now resolve a whole bunch of advanced and complex nested

@layer
PERSON

rules, none of which you should use but that we support anyway. So if you write stuff like this:


@layer
PERSON

components , components.alert ;

@layer
PERSON

{

@layer
PERSON

ihaveaname { … } }

@layer
PERSON

components {

@layer
PERSON

table {

@layer
PERSON

thead { … }

@layer
PERSON

tbody { … } }

@layer
PERSON

table.tfoot { … } }

It’ll be correctly resolved to this:

In the screenshot you can see some of the layers are more prominent. We dim all the layers that do not apply to the currently selected element, so you can quickly see which layers are relevant for the element you’re currently inspecting.

Thanks to

Project Wallace
PERSON

for getting us to improve our existing implementation. While

Polypane
GPE

uses the page’s

CSSOM
ORG

to get the styles,

Project Wallace
PERSON

inspects your CSS sources and gives you all sorts of insights. They have a cool

@layer
PERSON

visualizer you should check out.

Nesting indicator lines in the tree view

Your code editor (probably) draws lines to show you the nesting of your code and that’s really helpful. So we now do the same in the tree view in the elements panel.

It’s a small thing but it makes it much easier to see the structure of your page.

Debug tab improvements

The debug tab in the elements panel is all about showing element properties that often cause issues in a clear overview. We added a couple more:

The rendered font. This is also visible in the navigator and on inspecting elements, but it’s nice to see here alongside other items.

The currently used source for videos (we already showed this for images) so you know which of your source files is being used.

The container type when an element is a container, so you know container queries use its size.

The natural size of an image, so you can see if it’s being resized.

Container query unit previews

Along with the actual size of a container, which we show when you hover over the container badge, we now also show you how much

1cqw
ORG

and

1cqh
CARDINAL

for this container is in pixels, so you don’t have to do that math yourself.


Mastodon
PERSON

preview

We’re continuing to add more social media previews to

Polypane
GPE

. This time we added

Mastodon
PERSON

, the open source social network, bringing the total

up to
CARDINAL


nine
CARDINAL

, which we think is the most extensive preview collection of any tool.


Mastodon
PERSON

is interesting because while their code is open source (which makes it much easier to see how they build their preview!) they actually use json-ld as their primary source of data, and that’s a fair bit more complicated than just getting some meta tags.

On the plus side, they get to display much richer previews, including the author, date and publisher, all of which we accurately reproduce in

Polypane
GPE

.

Other changes

Smaller but still useful new features that are worth mentioning:

Platform emulation

Alongside a user agent, your browser also communicates the platform it’s running on, and this doesn’t automatically change when you change your user agent. Some sites use this to serve different content to different platforms, so we now support changing the platform in the emulation settings.

All existing devices have been updated to correctly emulate their platform.

Cloudflare captcha


Cloudflare
ORG

is a popular

CDN
ORG

and security service that many sites use. They have a captcha that they show when they detect suspicious traffic, and previous versions of

Polypane
GPE

failed that captcha for a number of different reasons.

We worked with the

Cloudflare
ORG

team to prevent this from happening and while they couldn’t tell us anything about their algorithm, we’re happy to say that

Polypane
GPE

no longer triggers the captcha.

Thank you

Andrew
PERSON

for putting this on our radar and the

Cloudflare
ORG

team for helping us out!

The macular degeneration debug tool is now interactive, like the glaucoma and tunnel vision ones. All interactive debug tools, like the target size debug tools, have been made more performant by decoupling their update speed from the rest of the page.

New installer image on macOS

We hadn’t updated the

macOS
ORG

installer background since launching

Polypane
GPE

and it started to show, so we updated it to a more modern look.

Chromium

116
CARDINAL


Polypane
GPE

now runs on

Chromium 116.0.5845.141
ORG

, which means we have support for animating display ,

CSS Motion
ORG

path and from

Chromium 115
ORG

: display with

two
CARDINAL

values.

We’ve also enables new flags so you can try out upcoming features like accentcolor , anchor positioning,

@scope
PRODUCT

and exponential functions in CSS. View the full list here:

Experimental Chromium
ORG

features.

Get Polypane

15
CARDINAL


Polypane
GPE

is available for

Windows, Mac and
ORG


Linux
PERSON

(.deb or AppImage) in both

64
CARDINAL

bit and ARM versions.


Polypane
GPE

automatically updates on

Mac, Windows
ORG

and on

Linux
PRODUCT

when using the

AppImage
ORG

. Otherwise, go to the download page to download the latest version!

Don’t have

Polypane
GPE

yet? There is a

14 day
DATE

trial available. Try it for free. No credit card needed.

Polypane

15.0.1
CARDINAL

Changelog

This version bumps the

Chromium
ORG

version to fix

CVE-2023-5217
PRODUCT

.

Polypane

15
CARDINAL

Changelog

New

New Full-featured side browser

Full-featured side browser New Support for search in address bar

Support for search in address bar New Support for remote debugging

Support for remote debugging

New Debug
PRODUCT

tools: Interactive macular degeneration (Thanks

Severin
PERSON

!)

Debug tools: Interactive macular degeneration (Thanks

Severin
PERSON

!)

New Mastodon
ORG

preview


Mastodon
PERSON

preview New Support Cloudflare Captcha (Thanks

Andrew
PERSON

!)

Support Cloudflare Captcha (Thanks Andrew!) New Platform emulations

Platform emulations New Chromium

116
CARDINAL

Improved

Improved

Console
LOC

panel: no longer scrolls to bottom when new messages arrive


Console
NORP

panel: no longer scrolls to bottom when new messages arrive Improved Outline panel: Focus order also shows warning for going straight up

Outline panel: Focus order also shows warning for going straight up Improved You can now hover and scroll over zoom slider to zoom in/out

You can now hover and scroll over zoom slider to zoom in/out Improved Container query info tooltips show the size of

1
CARDINAL

cqw/cqh

Container query info tooltips show the size of

1
CARDINAL

cqw/cqh Improved ‘Getting started’ is now called

‘Quick
WORK_OF_ART

start’

‘Getting started’ is now called

‘Quick
WORK_OF_ART

start’ Improved Console panel: now also shows the request headers (Thanks

Jay
PERSON

!)

Console panel: now also shows the request headers (Thanks

Jay
PERSON

!) Improved User agent overwrites are now consistent for all subresources

User agent overwrites are now consistent for all subresources Improved Better support for

Wayland
GPE

Better support for

Wayland
GPE

Improved Full page screenshots now support more website configurations (Thanks Killian!)

Full page screenshots now support more website configurations (Thanks Killian!) Improved

Focus
ORG

layout header works the same as the full layout


Focus
ORG

layout header works the same as the full layout

Improved Updated
ORG

workspace presets

Updated workspace presets Improved New installer image on

mac

New
ORG

installer image on mac Improved Devtools: Open urls in

Browse
ORG

panel


Devtools
ORG

: Open urls in

Browse
ORG

panel

Improved Elements Panel
ORG

: Layout debugging for subtree of selected element (Thanks

Rik
PERSON

!)

Elements Panel: Layout debugging for subtree of selected element (Thanks

Rik
PERSON

!) Improved Elements Panel: Support for complex

@layer
PERSON

nesting

Elements Panel: Support for complex

@layer
PERSON

nesting

Improved Elements Panel
ORG

: Improved inheritable properties list

Elements Panel: Improved inheritable properties list

Improved Elements Panel
ORG

: draw nesting indicator lines in tree view

Elements Panel: draw nesting indicator lines in tree view Improved Elements Panel: improve hidden element styling in tree view (Thanks

Ahmad
PERSON

!)

Elements Panel: improve hidden element styling in tree view (Thanks

Ahmad
PERSON

!)

Improved Elements Panel
ORG

: New features in the debug tab

Elements Panel: New features in the debug tab Improved Elements Panel: improved performance of computed tab

Elements Panel: improved performance of computed tab Improved Web vitals: Prevent duplicate requests for

CrUX
PRODUCT

data

Web vitals: Prevent duplicate requests for

CrUX
PRODUCT

data Improved Performance: more responsive interactive debug tools

Performance: more responsive interactive debug tools Improved Performance: No longer slows down the

UI
ORG

on network events

Performance: No longer slows down the

UI
ORG

on network events Improved

Overal
ORG

UI performance and responsiveness


Overal
ORG

UI performance and responsiveness Improved Remove full browser layout as option during onboarding

Remove full browser layout as option during onboarding Improved .deb installations of

Polypane
GPE

can now also be auto-updated

.deb installations of

Polypane
GPE

can now also be auto-updated Improved Experimental chromium flags added

Experimental chromium flags added Improved Updated google fonts


Fixes
ORG