Polypane is a desktop application that lets web developers preview their work in multiple viewports at once, which is essential for good responsive web design. Built using OpenJS’s Electron, Polypane offers all of the web content rendering and inspection benefits Chromium provides, plus a number of unique features such as automated media breakpoint detection, measurement rulers, one-click screenshotting of individual viewports, and more.

Earlier this year, Polypane’s creator, Kilian Valkhof, got in touch with Igalia and hired us to add some capabilities to Chromium. Primary among those were the ability to emulate safe-area-inset values, and the ability to emulate a different small viewport height using the CSS svh unit. The addition of these capabilities makes it possible to generate much better mobile-view emulation in Polypane 26. As Valkhof puts it:

Polypane is the first desktop browser with the ability to emulate parts of the mobile web that until now you needed physical devices for and that very often caused issues for developers. Getting to these early saves a lot of frustration and bugs, and lowers the time developers need to spend working on real devices, which is much slower.

We also worked with Valkhof to write an API specification for Electron to support language-aware hyphenation. When the API is implemented, this will bring Electron’s language handling in line with Chrome’s when hyphenating text.

These enhancements aren’t limited to Polypane by any stretch: all users stand to benefit from the work Igalia did. “Since the changes are made in Chromium directly, any browser built on it can potentially include these features in their device emulation and offer a significantly better emulation,” Valkhof said. Furthermore, the improved device emulation you can now experience in Polypane could soon be native to Chrome itself. This was, in fact, a primary goal of the work we did for Polypane. To quote Valkhof:

My goals here were two-fold: on the one hand there were simply features I wanted to have in Polypane. On the other hand I also wanted to show that contributing to a huge project like Chromium isn’t just for the Googles and Microsofts of this world. Instead it is within reach for any browser vendor, including a solo developer like me. It’s great that, thanks to Igalia, Polypane can have a massively outsized impact on a project like Chromium.

We’re thrilled to have helped make this possible, and we look forward to future work along the same lines, whether it’s for Polyane or for anyone else. If you have something you’d like help adding to browsers, please get in touch!