{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-15-fully-featured-browser-in-the-browse-panel-performance-improvements-chromium-116-and-more/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 15: Fully featured browser in the browse panel, performance improvements, Chromium 116 and more\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2023-09-11\",\n  \"type\": [\"announcement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `In Polypane 15 we rebuilt the browse panel so that it's now a fully featured browser with tabs, pinned tabs, search and autocomplete.`), mdx(\"p\", null, `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.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"new-browse-panel\"\n  }, `New Browse panel`), mdx(\"p\", null, `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!`), mdx(\"p\", null, `That's right, we built a browser into our browser.`), mdx(\"img\", {\n    src: pp15browse,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `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, doing away with a major source of context switching.`), mdx(\"img\", {\n    src: browse1,\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"search-support\"\n  }, `Search support`), mdx(\"p\", null, `People have been asking us for search support for a long time too, and that just didn't make sense for the main UI in Polypane. 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.`), mdx(\"img\", {\n    src: browsesearch1,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `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).`), mdx(\"h4\", {\n    \"id\": \"quick-search\"\n  }, `Quick search`), mdx(\"p\", null, `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. You can do that by prefixing your search with the first few letters of a search engine name, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `m query`), ` for MDN or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `ec query`), ` for Ecosia.`), mdx(\"p\", null, `There's a bunch more features, like installing Browser extensions and setting a homepage and more. You can read all about it in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `browse documentation`), `.`), mdx(\"h3\", {\n    \"id\": \"let-us-know-what-to-do-about-shortcuts\"\n  }, `Let us know what to do about shortcuts`), mdx(\"p\", null, `The one thing still missing is browse-panel specific keyboard shortcuts. `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `We'd like your input!`), `.`), mdx(\"p\", null, `Should we use the same shortcuts as the main UI (like `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    letter: \"T\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` ) but look at whether the browse panel is focused, or should we use different shortcuts (like `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    altKey: true,\n    letter: \"T\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` )? Let us know!`), mdx(\"h2\", {\n    \"id\": \"search-from-the-regular-address-bar\"\n  }, `Search from the regular address bar!`), mdx(\"p\", null, `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 few letters of a specific search engine to pick that one.`), mdx(\"h2\", {\n    \"id\": \"performance-improvements\"\n  }, `Performance improvements`), mdx(\"p\", null, `In this release we profiled many different parts of the app and made a lot of improvements to make Polypane faster and more responsive.`), mdx(\"p\", null, `We had a pretty big performance issue where many network requests (like those done by Next, Gatsby etc) inside the panes would really slow down the UI. 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!`), mdx(\"p\", null, `We also improved the responsiveness of a number of debug tools and common actions by decoupling their UI responsiveness from the rest of the application. The result is that Polypane is now much more responsive and snappy.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `If performance was an issue for you in the past, give Polypane 15 a try!`)), mdx(\"h2\", {\n    \"id\": \"remote-debugging-support\"\n  }, `Remote Debugging support`), mdx(\"p\", null, `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.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `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 command to open Polypane with `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/command-line-options/#remote-debugging\"\n  }), `remote debugging`), ` enabled or configure your IDE to open Polypane with remote debugging enabled.`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"sh\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-sh\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-sh\"\n  }), `$ polypane --remote-debugging-port`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), `=`), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token number\"\n  }), `4321`)))), mdx(\"p\", null, `Thanks for Benjamin to get the ball rolling on this, and thanks to the WebStorm 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 here: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/configuring-webstorm-to-work-with-polypane/\"\n  }), `Configuring WebStorm to work with Polypane`), ` and we'll be adding more IDEs soon.`), mdx(\"h2\", {\n    \"id\": \"elements-panel-improvements\"\n  }, `Elements panel improvements`), mdx(\"p\", null, `The elements panel is one of the places where we spent time improving performance, as well as making a bunch of smaller tweaks:`), mdx(\"h3\", {\n    \"id\": \"layout-debugging-for-subtree-of-selected-element\"\n  }, `Layout debugging for subtree of selected element`), mdx(\"p\", null, `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 particular part of the page without having to turn on layout debugging for the entire page. Thanks Rik for suggesting this one!`), mdx(\"img\", {\n    src: pp15layoutdebugging,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"h3\", {\n    \"id\": \"support-for-complex-layer-nesting\"\n  }, `Support for complex @layer nesting`), mdx(\"p\", null, `We now resolve a whole bunch of advanced and complex nested @layer rules, none of which you should use but that we support anyway. So if you write stuff like this:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"css\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-css\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), `@layer`), ` components`, mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `,`), ` components.alert`, mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `;`)), `\n\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), `@layer`)), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), `@layer`), ` ihaveaname`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), ` ... `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`), `\n\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), `@layer`), ` components`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), `@layer`), ` table`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), `\n    `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), `@layer`), ` thead`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), ` ... `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`), `\n    `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), `@layer`), ` tbody`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), ` ... `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`), `\n  `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token atrule\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token rule\"\n  }), `@layer`), ` table.tfoot`), ` `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `{`), ` ... `, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`), `\n`, mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), `}`)))), mdx(\"p\", null, `It'll be correctly resolved to this:`), mdx(\"img\", {\n    src: pp15layers,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `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.`), mdx(\"p\", null, `Thanks to `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.projectwallace.com\"\n  }), `Project Wallace`), ` for getting us to improve our existing implementation. While Polypane uses the page's CSSOM to get the styles, Project Wallace inspects your CSS sources and gives you all sorts of insights. They have a cool `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.projectwallace.com/css-layers-visualizer\"\n  }), `@layer visualizer`), ` you should check out.`), mdx(\"img\", {\n    src: pp15nesting,\n    alt: \"\",\n    style: {\n      float: 'right',\n      maxWidth: \"400px\",\n      margin: \"2rem 0 1rem 1rem\"\n    },\n    className: \"imgshadow\"\n  }), mdx(\"h3\", {\n    \"id\": \"nesting-indicator-lines-in-the-tree-view\"\n  }, `Nesting indicator lines in the tree view`), mdx(\"p\", null, `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.`), mdx(\"p\", null, `It's a small thing but it makes it much easier to see the structure of your page.`), mdx(\"h3\", {\n    \"id\": \"debug-tab-improvements\"\n  }, `Debug tab improvements`), mdx(\"p\", null, `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:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The rendered font. This is also visible in the navigator and on inspecting elements, but it's nice to see here alongside other items.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The currently used source for videos (we already showed this for images) so you know which of your source files is being used.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The container type when an element is a container, so you know container queries use its size.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The natural size of an image, so you can see if it's being resized.`)), mdx(\"h3\", {\n    \"id\": \"container-query-unit-previews\"\n  }, `Container query unit previews`), mdx(\"p\", null, `Along with the actual size of a container, which we show when you hover over the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `container`), ` badge, we now also show you how much `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `1cqw`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `1cqh`), ` for this container is in pixels, so you don't have to do that math yourself.`), mdx(\"h2\", {\n    \"id\": \"mastodon-preview\"\n  }, `Mastodon preview`), mdx(\"p\", null, `We're continuing to add more social media previews to Polypane. This time we added Mastodon, the open source social network, bringing the total up to nine, which we think is `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `the most extensive preview collection of any tool.`)), mdx(\"img\", {\n    src: mastodon,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `Mastodon is interesting because while their code is open source (which makes it much easier to see how they build their preview!) they actually use `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://polypane.app/docs/meta-information/#structured-data\"\n  }), `json-ld`), ` as their primary source of data, and that's a fair bit more complicated than just getting some meta tags.`), mdx(\"p\", null, `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.`), mdx(\"h2\", {\n    \"id\": \"other-changes\"\n  }, `Other changes`), mdx(\"p\", null, `Smaller but still useful new features that are worth mentioning:`), mdx(\"h3\", {\n    \"id\": \"platform-emulation\"\n  }, `Platform emulation`), mdx(\"p\", null, `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.`), mdx(\"video\", {\n    src: pp15platform,\n    controls: true,\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `All existing devices have been updated to correctly emulate their platform.`), mdx(\"h3\", {\n    \"id\": \"cloudflare-captcha\"\n  }, `Cloudflare captcha`), mdx(\"p\", null, `Cloudflare is a popular CDN and security service that many sites use. They have a captcha that they show when they detect suspicious traffic, and previous versions of Polypane failed that captcha for a number of different reasons.`), mdx(\"p\", null, `We worked with the Cloudflare team to prevent this from happening and while they couldn't tell us anything about their algorithm, we're happy to say that Polypane no longer triggers the captcha.`), mdx(\"p\", null, `Thank you Andrew for putting this on our radar and the Cloudflare team for helping us out!`), mdx(\"h3\", {\n    \"id\": \"debug-tools-improvements\"\n  }, `Debug tools improvements`), mdx(\"p\", null, `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.`), mdx(\"h3\", {\n    \"id\": \"new-installer-image-on-macos\"\n  }, `New installer image on macOS`), mdx(\"p\", null, `We hadn't updated the macOS installer background since launching Polypane and it started to show, so we updated it to a more modern look.`), mdx(\"img\", {\n    src: pp15macos,\n    alt: \"\",\n    className: \"imgshadow\"\n  }), mdx(\"h2\", {\n    \"id\": \"chromium-116\"\n  }, `Chromium 116`), mdx(\"p\", null, `Polypane now runs on Chromium 116.0.5845.141, which means we have support for animating `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `display`), `, CSS Motion path and from Chromium 115: `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `display`), ` with two values.`), mdx(\"p\", null, `We've also enables new flags so you can try out upcoming features like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `accentcolor`), `, anchor positioning, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@scope`), ` and exponential functions in CSS. View the full list here: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/experimental-chromium-features/\"\n  }), `Experimental Chromium features`), `.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-15\"\n  }, `Get Polypane 15`), mdx(\"p\", null, `Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.`), mdx(\"p\", null, `Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` to download the latest version!`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Try it for free`), `.`), ` No credit card needed.`), mdx(\"h2\", {\n    \"id\": \"polypane-1501-changelog\"\n  }, `Polypane 15.0.1 Changelog`), mdx(\"p\", null, `This version bumps the Chromium version to fix CVE-2023-5217.`), mdx(\"h2\", {\n    \"id\": \"polypane-15-changelog\"\n  }, `Polypane 15 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Full-featured side browser`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support for search in address bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support for remote debugging`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Debug tools: Interactive macular degeneration (Thanks Severin!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Mastodon preview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support Cloudflare Captcha (Thanks Andrew!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Platform emulations`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Chromium 116`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improved`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console panel: no longer scrolls to bottom when new messages arrive`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Focus order also shows warning for going straight up`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` You can now hover and scroll over zoom slider to zoom in/out`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Container query info tooltips show the size of 1 cqw/cqh`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` 'Getting started' is now called 'Quick start'`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console panel: now also shows the request headers (Thanks Jay!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` User agent overwrites are now consistent for all subresources`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Better support for Wayland`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Full page screenshots now support more website configurations (Thanks Killian!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Focus layout header works the same as the full layout`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated workspace presets`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New installer image on mac`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Devtools: Open urls in Browse panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Panel: Layout debugging for subtree of selected element (Thanks Rik!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Panel: Support for complex @layer nesting`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Panel: Improved inheritable properties list`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Panel: draw nesting indicator lines in tree view`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Panel: improve hidden element styling in tree view (Thanks Ahmad!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Panel: New features in the debug tab`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Panel: improved performance of computed tab`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Web vitals: Prevent duplicate requests for CrUX data`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Performance: more responsive interactive debug tools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Performance: No longer slows down the UI on network events`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Overal UI performance and responsiveness`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Remove full browser layout as option during onboarding`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` .deb installations of Polypane can now also be auto-updated`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Experimental chromium flags added`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated google fonts`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline panel: non-http links no longer show a spinner after checking.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Incorrect position of status bar in full layout with address bar hidden`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Reference image didn't work on Windows (Thanks Jessica!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Dismissing the Quick Start didn't hide it on page load (Thanks Maria!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Page down in horizontal mode sometimes scrolled vertically`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Restart issue on Mac (Thanks Charlie!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: hidden elements could show incorrect box model info`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element Panel: Computed tab can now edit elements again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Meta panel: The Facebook preview had a scrollable description`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":8,"tableOfContents":{"items":[{"url":"#new-browse-panel","title":"New Browse panel","items":[{"url":"#search-support","title":"Search support","items":[{"url":"#quick-search","title":"Quick search"}]},{"url":"#let-us-know-what-to-do-about-shortcuts","title":"Let us know what to do about shortcuts"}]},{"url":"#search-from-the-regular-address-bar","title":"Search from the regular address bar!"},{"url":"#performance-improvements","title":"Performance improvements"},{"url":"#remote-debugging-support","title":"Remote Debugging support"},{"url":"#elements-panel-improvements","title":"Elements panel improvements","items":[{"url":"#layout-debugging-for-subtree-of-selected-element","title":"Layout debugging for subtree of selected element"},{"url":"#support-for-complex-layer-nesting","title":"Support for complex @layer nesting"},{"url":"#nesting-indicator-lines-in-the-tree-view","title":"Nesting indicator lines in the tree view"},{"url":"#debug-tab-improvements","title":"Debug tab improvements"},{"url":"#container-query-unit-previews","title":"Container query unit previews"}]},{"url":"#mastodon-preview","title":"Mastodon preview"},{"url":"#other-changes","title":"Other changes","items":[{"url":"#platform-emulation","title":"Platform emulation"},{"url":"#cloudflare-captcha","title":"Cloudflare captcha"},{"url":"#debug-tools-improvements","title":"Debug tools improvements"},{"url":"#new-installer-image-on-macos","title":"New installer image on macOS"}]},{"url":"#chromium-116","title":"Chromium 116"},{"url":"#get-polypane-15","title":"Get Polypane 15"},{"url":"#polypane-1501-changelog","title":"Polypane 15.0.1 Changelog"},{"url":"#polypane-15-changelog","title":"Polypane 15 Changelog"}]},"excerpt":"In Polypane 15 we rebuilt the browse panel so that it's now a fully featured browser with tabs, pinned tabs, search and autocomplete. We also improved…","frontmatter":{"title":"Polypane 15: Fully featured browser in the browse panel, performance improvements, Chromium 116 and more","cover":"/img/mail/icon.svg","date":"2023-09-11","updated":null},"fields":{"slug":"/blog/polypane-15-fully-featured-browser-in-the-browse-panel-performance-improvements-chromium-116-and-more/","date":"2023-09-10T22:00:00.000Z","ogFileName":"polypane-15-fully-featured-browser-in-the-browse-panel-performance-improvements-chromium-116-and-more"}}},"pageContext":{"slug":"/blog/polypane-15-fully-featured-browser-in-the-browse-panel-performance-improvements-chromium-116-and-more/"}},"staticQueryHashes":["4164364741","425175329"]}