{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-8-better-elements-inspector-new-syncing-features-chromium-98-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 8: better Elements Inspector, new syncing features, Chromium 98 and more\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2022-02-01\",\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, `Polypane 8 comes with a better Elements inspector, big performance improvements, Chromium 98 and many other new and improved features, like forced colors emulation, focus state sync, ARM support, UI improvement, a new debug tool and all-in-all netting a changelog of over 100 items. Lets get into it.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"better-element-inspector\"\n  }, `Better Element inspector`), mdx(\"p\", null, `The Polypane element inspector inspects elements across panes and lets you edit the same element in all panes at the same time, a unique and powerful feature built from scratch for Polypane.`), mdx(\"p\", null, `This round, we focused on some of the most requested features, making the design easier to understand for people coming from other browsers and greatly improved the performance of the inspector as well.`), mdx(\"h3\", {\n    \"id\": \"60-faster-element-inspection\"\n  }, `60% faster element inspection`), mdx(\"p\", null, `We rewrote core parts of our element inspection logic, making selecting elements and changing styles over 60% faster compared to Polypane 7. This is a pretty major difference and `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `it feels great`), `. Especially considering we now surface more information than we ever did, more on that below.`), mdx(\"h3\", {\n    \"id\": \"updated-design\"\n  }, `Updated design`), mdx(\"p\", null, `To accommodate the new features and address some the issues people had with our Elements Panel we tweaked and improved the design. There are no major changes, but a lot of little tweaks to make it feel more familiar while also making room for new features. Have a look at the old and new design side by side:`), mdx(\"div\", {\n    style: {\n      \"display\": \"flex\",\n      \"gap\": \"1rem\",\n      \"width\": \"100%\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      \"flex\": \"1 1 50%\"\n    }\n  }, mdx(\"strong\", null, \"Element inspector in Polypane 7\"), mdx(\"img\", {\n    style: {\n      \"width\": \"100%\"\n    },\n    src: \"/blogs/polypane-8/old.png\",\n    className: \"imgshadow\",\n    alt: \"The old elements inspector.\"\n  })), mdx(\"div\", {\n    style: {\n      \"flex\": \"1 1 50%\"\n    }\n  }, mdx(\"strong\", null, \"Element inspector in Polypane 8\"), mdx(\"img\", {\n    style: {\n      \"width\": \"100%\"\n    },\n    src: \"/blogs/polypane-8/new.png\",\n    className: \"imgshadow\",\n    alt: \"The new elements inspector.\"\n  }))), mdx(\"p\", null, `The Tree view is now styled similarly to the Chromium elements panel: collapsed elements are shown with `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `...`), ` instead of as opening tags and short content is shown inside the element. We hope this makes it easier for people to switch to the Polypane Element inspector.`), mdx(\"p\", null, `For the navigator area, we tightened up the alignment and placement of icons, ids and classes, and we now collapse the box model by default so more space is visible for the Style tab. The button to toggle the box model now has text to make that clearer.`), mdx(\"p\", null, `The biggest changes happened in the Style tab. We switched to a monospace font which allows us to show more code in the same area while bumping up the contrast of different components without making it feel too busy. A sharp eye will notice some new checkboxes as well`, `…`), mdx(\"h3\", {\n    \"id\": \"toggling-individual-styles-on-and-off\"\n  }, `Toggling individual styles on and off`), mdx(\"p\", null, `Those checkboxes are for the most requested feature for the Elements inspector: the ability to toggle individual styles on and off. It was a huge undertaking, but it's here!`), mdx(\"img\", {\n    src: \"/blogs/polypane-8/disabledrules.png\",\n    className: \"imgshadow\",\n    alt: \"List of CSS Styles with some of them having a line through them, indicating they're disabled.\"\n  }), mdx(\"p\", null, `Toggling a style is quick and gives you feedback across all your panes. Styles that are toggled off are shown with a line-through so you can at a glance see which styles are enabled and disabled.`), mdx(\"h3\", {\n    \"id\": \"cascade-layer-support\"\n  }, `Cascade layer support`), mdx(\"p\", null, `The Element inspector now has full support for displaying Cascade layers. They are set to ship as stable in the next release of Chromium while in Polypane you can use them already.`), mdx(\"p\", null, `Instead of having just one way to overwrite the specificity, with `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `!important`), `, cascade layers lets you define separate layers for different parts of your CSS.`), mdx(\"p\", null, `Each new layer overwrites the old one, making it easy to work with third party CSS and saving you from having to add more complex selectors just to be more specific. For an introduction to Cascade Layers, read the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/\"\n  }), `Cascade Layers article by Stephanie Eckles`), `.`), mdx(\"img\", {\n    src: \"/blogs/polypane-8/cascade.png\",\n    className: \"imgshadow\",\n    alt: \"Nested cascade layers in the Polypane Element inspector\"\n  }), mdx(\"p\", null, `Work to support cascade layers is underway in all major browsers but it hasn't shipped yet (except in Safari's technology preview), meaning that `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Polypane is the first Chromium-based browser with devtools support for Cascade layers`), `, and the second browser to ship it. How cool is that?`), mdx(\"h3\", {\n    \"id\": \"container-query-and-supports-query-support\"\n  }, `Container Query and Supports query support`), mdx(\"p\", null, `Like Cascade layers, container queries are an upcoming technology that Polypane has enabled. While the elements panel already showed `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@media`), ` queries, we updated our logic to show `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `all`), ` at-rules, adding `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@supports`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@container`), ` to the list, as well as the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@layer`), ` mentioned above.`), mdx(\"img\", {\n    src: \"/blogs/polypane-8/container.png\",\n    className: \"imgshadow\",\n    alt: \"Container queries in the Polypane Element inspector\"\n  }), mdx(\"p\", null, `If there are nested at-rules the Elements inspector shows all of them so you can always see why something is applied.`), mdx(\"h3\", {\n    \"id\": \"shift-to-inspect-pointer-eventsnone\"\n  }, `Shift to inspect `, mdx(\"code\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"className\": \"language-text\"\n  }), `pointer-events:none`)), mdx(\"p\", null, `A useful feature in Chromium devtools is you can press `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `shift`), ` to inspect elements that have `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `pointer-events:none`), ` applied to them. Now that feature is also available for the Polypane inspection tools, either from the inspect button or after pressing `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), `/`, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `option`), ` to use Polypane Peek.`), mdx(\"video\", {\n    src: \"/blogs/polypane-8/pointerevents.m4v\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"other-element-inspector-improvements\"\n  }, `Other Element Inspector improvements`), mdx(\"p\", null, `We made more changes to the Element Inspector:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Double click any attribute in the tree view to copy its value.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Click any id or class in the Navigator to copy its value, formatted for CSS.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The color picker of a CSS value with a custom property now updates the custom property instead of the CSS value.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `We rewrote the autosuggest UI for CSS and HTML properties so you can find matches faster.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Polypane Peek can now also be used with the Chromium devtools by selecting those in the address bar.`)), mdx(\"p\", null, `There's also a few bug fixes, you can find those in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#polypane-800-changelog\"\n  }), `full changelog`), `.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements Inspector documentation`)), mdx(\"h2\", {\n    \"id\": \"performance-improvements\"\n  }, `Performance improvements`), mdx(\"p\", null, `With this release we set out to improve performance across the application. We wrote about the 60% performance improvement in the elements panel above, but we also made improvements to other parts of the app.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `50% reduction in load time`), mdx(\"br\", null), `\nBy improving the order of things we do during launch we managed to improve startup time by 50%, and completely did\naway with the \"loading Polypane\" screen.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Faster refresh rate for scroll syncing`), mdx(\"br\", null), `\nThe scroll sync logic has now been updated to no longer need CSS updates on scroll, making it much smoother.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Website bottlenecks guards`), mdx(\"br\", null), `\nWhile Polypane previously showed a warning for sites that had more than 10K CSS selectors, we now disable various features at 15K selectors. Polypane disables hover syncing, breakpoint detection and overflow detection to keep the rest of the UI performant. In future releases we might disable more features.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Preventing data-related performance issues`), mdx(\"br\", null), `\nWe also fixed several bottlenecks in the Polypane UI and parsing logic: The address bar could get slow because your history\nhad too many matches, so we now limit the number of matches we show.`), mdx(\"p\", null, `If a chat widget on a site changed the page title every second (purely hypothetical of course, you would never do that!) that would slow down Polypane a lot because we re-parsed the page whenever the page title changed for legacy reasons. Page title changes also reset any active page navigation. We now no longer use page title change as an indication for navigation or need to re-parse the page.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Faster Polypane Peek tooltip`), mdx(\"br\", null), `\nOur tooltip was already fast but when improving our style inspection we found a potential slowdown for the tooltip, so we added that in. Enjoy the 4ms speedup!`), mdx(\"h2\", {\n    \"id\": \"updated-sync-options\"\n  }, `Updated Sync options`), mdx(\"p\", null, `You can now turn off individual syncing options, we stopped syncing form submissions and we can also sync `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Focus events`), `.`), mdx(\"img\", {\n    src: \"/blogs/polypane-8/syncoptions.png\",\n    className: \"imgshadow\",\n    alt: \"Context menu of the sync options button showing which events are synced\"\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Individual sync options`), ` `, mdx(\"br\", null), `\nRight-click the sync button in the address bar to toggle individual syncing options. You can for example choose to sync hovering but not keypresses.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Focus sync`), ` `, mdx(\"br\", null), `\nNormally, focus is only ever in a single place across your entire operating system. With Focus sync, each pane can retain their own focus, synced between panes.`), mdx(\"p\", null, `Doing keyboard testing and seeing how Focus moves across the page on multiple panes is an extremely useful for those of you doing accessibility testing.`), mdx(\"p\", null, `Focus sync is off by default. Turn it on by right-clicking the sync button in the address bar.`), mdx(\"video\", {\n    src: \"/blogs/polypane-8/focus-sync.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Preventing multiple form submissions`), ` `, mdx(\"br\", null), `\nOne thing that tripped people up is that forms would be submitted multiple times (once in every pane), which could trigger server issues. While not unsurprising (if you do the same action in multiple panes, you ...do the same action) it's most often not desirable.`), mdx(\"p\", null, `Polypane 8 no longer syncs form submissions across panes. Note that you will need to use proper form semantics for Polypane to detect that a click or keypress triggers a submit action.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/synced-interactions/\"\n  }), `Synced interactions documentation`)), mdx(\"h2\", {\n    \"id\": \"forced-colors-emulation\"\n  }, `Forced colors emulation`), mdx(\"p\", null, `Polypane can now emulate forced colors:`), mdx(\"video\", {\n    src: \"/blogs/polypane-8/forced-colors-emulation.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `This is `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `great`), ` because it means that to work on your Forced Colors design you:`), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, `No longer need a windows device.`), mdx(\"li\", {\n    parentName: \"ol\"\n  }, `No longer need to switch your `, mdx(\"em\", {\n    parentName: \"li\"\n  }, `entire device`), ` into forced colors mode.`), mdx(\"li\", {\n    parentName: \"ol\"\n  }, `You can quickly refer back to the regular design side-by-side for pointers.`)), mdx(\"p\", null, `By switching the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-color-scheme`), ` from light to dark, the forced colors design will be updated as well.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `Emulation documentation`)), mdx(\"h2\", {\n    \"id\": \"console-updates\"\n  }, `Console updates`), mdx(\"p\", null, `Along with updating the Elements panel we also did another round of improvements for the Console: fixing various bugs, improving rendering performance and adding some new features`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New console functions`), mdx(\"br\", null), `\nThe Polypane console has added support the following console functions:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `assert`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `time`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `timeLog`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `timeEnd`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `count`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `countReset`))), mdx(\"p\", null, `It already supported `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `log`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `warn`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `error`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `debug`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `info`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `dir`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `table`), `. All console functions are now also available without typing `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `console.`), ` in front of them.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Navigation events`), mdx(\"br\", null), `\nThe console now shows navigation events like reloads and new pages so you know which console messages belong to which page.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New JSON renderer`), mdx(\"br\", null), `\nWe switched out our JSON/Object renderer for one that more closely resembles the JSON rendering of the Chromium devtools.`), mdx(\"div\", {\n    style: {\n      \"display\": \"flex\",\n      \"gap\": \"1rem\",\n      \"width\": \"100%\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      \"flex\": \"1 1 50%\"\n    }\n  }, mdx(\"strong\", null, \"Logging in Polypane 7\"), mdx(\"img\", {\n    style: {\n      \"width\": \"100%\"\n    },\n    src: \"/blogs/polypane-8/console-old.png\",\n    className: \"imgshadow\",\n    alt: \"The new console rendering.\"\n  })), mdx(\"div\", {\n    style: {\n      \"flex\": \"1 1 50%\"\n    }\n  }, mdx(\"strong\", null, \"Logging in Polypane 8\"), mdx(\"img\", {\n    style: {\n      \"width\": \"100%\"\n    },\n    src: \"/blogs/polypane-8/console-new.png\",\n    className: \"imgshadow\",\n    alt: \"The new console rendering.\"\n  }))), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/console/\"\n  }), `Console documentation`)), mdx(\"h2\", {\n    \"id\": \"updated-rules-and-guides\"\n  }, `Updated Rules and Guides`), mdx(\"p\", null, `Our rulers and guides feature also got another round of improvements:`), mdx(\"h3\", {\n    \"id\": \"alignment-to-site\"\n  }, `Alignment to site`), mdx(\"p\", null, `Previously the ruler features were fixed to the viewport, so if you scrolled the page they would not scroll along. In\nPolypane 8 they do, so the rulers, guides, rows and grid now scroll along with the page.`), mdx(\"video\", {\n    src: \"/blogs/polypane-8/page-scrolling-rulers.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"setting-a-custom-color\"\n  }, `Setting a custom color`), mdx(\"p\", null, `You can now change the color of the overlays to contrast with your site (or fit your mood):`), mdx(\"video\", {\n    src: \"/blogs/polypane-8/ruler-colors.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"dot-grid-option\"\n  }, `Dot grid option`), mdx(\"p\", null, `Instead of grid lines you can now also set the grid to be shown as dots:`), mdx(\"img\", {\n    src: \"/blogs/polypane-8/dotgrid.png\",\n    className: \"imgshadow\",\n    alt: \"This page overlaid with a 20px dot grid.\"\n  }), mdx(\"h3\", {\n    \"id\": \"right-aligned-guides\"\n  }, `Right-aligned guides`), mdx(\"p\", null, `You can now add guides that are right-aligned by specifying them with a negative value. They will stay attached to the right side even when you resize the page.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/rulers-grids-and-guides/\"\n  }), `Rulers, Grid and Guides documentation`)), mdx(\"h2\", {\n    \"id\": \"panel-can-now-be-left-aligned\"\n  }, `Panel can now be left aligned`), mdx(\"p\", null, `Speaking of alignment, you can now left-align the panel. Right-click the alignment button in the panel to set it to either right, bottom or left alignment:`), mdx(\"img\", {\n    src: \"/blogs/polypane-8/panel-left.png\",\n    className: \"imgshadow\",\n    alt: \"The meta panel open on the left side of the UI\"\n  }), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/intro-to-panel/\"\n  }), `Panel documentation`)), mdx(\"h2\", {\n    \"id\": \"new-color-contrast-debug-tool-logic\"\n  }, `New Color Contrast debug tool logic`), mdx(\"p\", null, `Measuring text contrast is complex and is influenced by a lot of different factors. Previously, we calculated the text and background colors of an element, taking opacity and all relevant parent background colors into account. This works well, but it's missing some factors.`), mdx(\"p\", null, `In Polypane 8, we now improved the handling of `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `opacity`), ` set on parent elements and added support for `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `filter: opacity()`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `text-shadow`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `text-stroke`), `, all of which combined provide a more realistic calculation of contrast.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/#contrast-checker\"\n  }), `Color Contrast Checker documentation`)), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `The contrast checker in Polypane uses the WCAG2 algorithm. If you've heard about APCA recently as the new improved algorithm, it's important to keep in mind that, while very cool, it's not yet an official standard so can not be used to check compliance. Kilian wrote the article `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://kilianvalkhof.com/2021/accessibility/wcag-2-is-what-we-have/\"\n  }), `WCAG2 is what we have`), ` that explains why. In a future update of Polypane we will provide APCA and WCAG2 contrast logic side by side.`)), mdx(\"h2\", {\n    \"id\": \"meta-panel-updates\"\n  }, `Meta Panel updates`), mdx(\"p\", null, `The meta panel now highlights the parts of your title or description that run over the recommended length.`), mdx(\"img\", {\n    src: \"/blogs/polypane-8/meta.png\",\n    className: \"imgshadow\",\n    alt: \"The meta panel highlighting the overly long title of this page.\"\n  }), mdx(\"p\", null, `In the past few months both Slack and Discord updated their rich previews (very subtly), so we've updated our previews to match their new designs.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `Meta panel documentation`)), mdx(\"h2\", {\n    \"id\": \"new-debug-tool-hide-cursor\"\n  }, `New Debug tool: Hide Cursor`), mdx(\"p\", null, `No image for this one, but it's handy nonetheless. The Hide Cursor debug tool hides your mouse cursor. This way you can do a keyboard test and not be tempted to cheat.`), mdx(\"h2\", {\n    \"id\": \"csp-header-warning\"\n  }, `CSP header warning`), mdx(\"p\", null, `When a site sets content-security-policy (CSP) headers it disables part of the functionality Polypane offers. While we had an option to disable CSP headers for a few versions now, Polypane now detects when CSP headers block functionality and shows a warning and option to turn them off.`), mdx(\"img\", {\n    src: \"/blogs/polypane-8/csp.png\",\n    className: \"imgshadow\",\n    alt: \"The CSP warning on news.ycombinator.com.\"\n  }), mdx(\"h2\", {\n    \"id\": \"chromium-98\"\n  }, `Chromium 98`), mdx(\"p\", null, `Polypane now runs on Chromium 98. We always try to keep up with the latest version of Chromium to make sure you get to use the latest rendering engine, the latest security improvements and the latest new features.`), mdx(\"p\", null, `Notable new experimental features are the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `selectmenu`), ` element and the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `::spelling-error`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `::grammar-error`), ` pseudo classes.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/experimental-chromium-features/\"\n  }), `Overview of experimental Chromium features`)), mdx(\"h2\", {\n    \"id\": \"arm-support\"\n  }, `ARM support`), mdx(\"p\", null, `We've had an M1 version for Mac for quite a long time and now we also have ARM versions for Windows and Linux. So if you run on those architectures you can now use a more performant version of Polypane.`), mdx(\"p\", null, `Windows now has a universal installer just like Mac, and for Linux you need to choose the appropriate architecture (The download page will automatically detect this for you).`), mdx(\"p\", null, `If you want to get the ARM version now make sure to download the new version from the site, as Polypane will update to the same architecture it installed with.`), mdx(\"h2\", {\n    \"id\": \"other-improvements-and-bugfixes\"\n  }, `Other improvements and bugfixes`), mdx(\"p\", null, `As usual this release got a little out of hand, here are some other notable improvements and bugfixes that dont deserve their own heading but are still noteworthy. You can find the entire list in the changelog.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `We aligned with Chrome on the behavior when double clicking the tab bar. Instead of opening a new tab, the app now (un)maximizes.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The scroll position in default mode is now preserved on reload again, so live reloading works much nicer. This worked in previous versions, but we broke it. It's fixed now!`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `All areas are now named sections so you can use assistive technologies to navigate across the app easier.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Live reload can now set a delay in decimal seconds. The newest generation of build tools is significantly faster, often only needing milliseconds to compile so waiting even a full second is way too long.`)), mdx(\"h2\", {\n    \"id\": \"get-polypane-8\"\n  }, `Get Polypane 8`), mdx(\"p\", null, `Polypane is available for Windows, Mac (universal dmg for Intel and M1) 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`), `.`)), mdx(\"h3\", {\n    \"id\": \"deprecation-notice\"\n  }, `Deprecation notice`), mdx(\"p\", null, `In Polypane 7 we deprecated legacy mode. This feature is on track to be removed in Polypane 9.`), mdx(\"h2\", {\n    \"id\": \"polypane-800-changelog\"\n  }, `Polypane 8.0.0 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New features`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Element inspector: Toggle individual styles off and on`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Element inspector: Cascade layer support in Element Inspector`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Element inspector: Container Query and Supports query support`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Emulation: Added Forced Color emulation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Sync Options: Focus sync`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Sync options: Turn specific sync options on and off`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Chromium 98`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` ARM support for Windows and Linux`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Experimental features: selectmenu, spelling and grammar pseudos`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Detect and warn about CSP issues on a site`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Shift to inspect elements with pointer-events: none`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Debug tool added: Hide cursor`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Rulers and Guides updates`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Panel can now be left-aligned`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improvements`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Performance: 50% improvement in app load time`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Performance: faster syncing of scroll position`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Performance: At 15K rules of CSS Polypane disables hover sync, breakpoint detection and overflow detection features`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Performance: Page title change no longer cause Panels to update`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Performance: Improve performance of suggestions in Address bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Page reloads preserve scroll position (Thanks many people!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: Double-clicking tab bar now maximizes app instead of opening a new tab`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: Address bar now works better when opening new tab`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: New design for URL hover indicator`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: Warning shown when first using tabs explaining how they work`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: Panel border lights up to indicate it's draggable`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: Focus border in Dark mode now less pronounced`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: Esc in address bar now reverts URL`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: All parts of the Polypane UI now are named sections for improved navigation with assistive technologies`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` UI: Reference image UI now visually consistent with other parts of UI`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Sync Scroll: Better handling of pages with smooth scrolling enabled (Thanks Stratos!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Sync: Form submissions are prevented from being synced across panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color contrast: now takes parent opacity and filter opacity into account`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color contrast: now takes text shadows into account`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color contrast: now takes text outlines into account`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live Reload: You can now set the delay in decimal seconds`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color chooser: Tints and shades now have consistent alpha value`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color chooser: Click preview to copy color`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color picker: Show icons for copy actions`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector: 60% performance improvement when selecting new element`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector: Update Style editing UI`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector: Improve performance of getting list of classes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector: Refreshes info on page reload`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector: Collapse box model by default, add text to toggle`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector: Active element in tree view now scrolls into view`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector: Click to copy Classes and ID in navigator (Thanks Roni!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector tree navigator is now styled like chromium`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector tree navigator double click attribute value to copy`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector now sorts CSS Rules by CSS4 compatible specificity calculation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector the color picker of a css value with a custom property now updates the custom property`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements Inspector: new autosuggest UI for css and HTML properties`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta Panel: Highlight part of title and page description that are too long`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta Panel: Update Slack preview to new design`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta Panel: Update Discord preview to new design`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta Panel: Detect more variations of charset declaration`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Share: QR code no longer moves Live CSS badge out of the way`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Devtools panel now includes a reload button`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Devtools: Add XState devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Devtools: F12 now both opens and closes the devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Debug tools: Small text tool no longer shows warning for elements with font-size of zero`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rulers: now scroll along with website`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rulers: Ability to set colors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rulers: Dot grid option`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rulers: Allow guides to be set from the right`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Displayed image src is limited to 5 lines of visible text`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Warn for more nondescriptive text in link and image overviews`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Prevent getting outline on each URL change`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console: JSON display is now more aligned with Chromium devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console: Support the time, time, timeLog, timeEnd, count, countReset and assert console methods`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console: show navigation events`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console: console functions can now be used without `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `console.`), ` in front of them`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Peek: faster rendering of inspection tooltip`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Peek: option to use chromium devtools instead`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Workspace pane: now shows icons for each default workspace`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New \"Reset app to defaults\" option in main menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Shortcut panel on Mac now uses ⌘ and ⌥ icons`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Web Vitals popup now shows status icons in the overview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Web Vitals popup now shows scoring for FCP`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated list of 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`), ` Prevent crash caused by parsing a non-plain text robots.txt (Thanks Roni!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Clicking relative links in outline panel now loads correct URL`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` issue with Polypane Peek not being available on load`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Alignment in Attribute and Data labels in elements panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent style editing sometimes changing wrong CSS rule`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Text overflow in Web Vitals tooltip with zoomed text`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Bug where Color chooser would be positioned incorrectly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Syncing of `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `-webkit`), ` hover styles`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Title change no longer blocks page navigation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Incorrect permission message for geolocation (Thanks Zjelko!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Console: Prevent issue where messages added in rapid succession weren't all being added`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Peek: issue when inspect tooltip would not be shown`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Live CSS: No longer indents randomly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Meta panel: No longer use \"favicon missing\" as alt for favicons`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Reference image being out of sync with website`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Consistent capitalization of menu shortcuts on Windows`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Overview screenshot sometimes having stale data`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element Inspector: Support editing and adding Keyframe styling`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element Inspector: consistent specificity display`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element Inspector: Arrow keys changed em to rem`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element Inspector: Formatting of Copied Keyframe CSS rules`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element Inspector: Pseudoclass styling being set incorrectly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element Inspector: font-face editing in Legacy mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Adjusted text size did not apply on launch`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Configurators and info panels overlapped address bar suggestions`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Error message when syncing events on deleted elements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Error message when getting hover status`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Live Reload: injection in legacy mode causing reloads`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Browse panel didn't open URL on app launch with tool selected (Thanks Michael!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Live Reload: Better support for strings in the ignorepatterns.txt file (Thanks Nick!)`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":13,"tableOfContents":{"items":[{"url":"#better-element-inspector","title":"Better Element inspector","items":[{"url":"#60-faster-element-inspection","title":"60% faster element inspection"},{"url":"#updated-design","title":"Updated design"},{"url":"#toggling-individual-styles-on-and-off","title":"Toggling individual styles on and off"},{"url":"#cascade-layer-support","title":"Cascade layer support"},{"url":"#container-query-and-supports-query-support","title":"Container Query and Supports query support"},{"url":"#shift-to-inspect-pointer-eventsnone","title":"Shift to inspect pointer-events:none"},{"url":"#other-element-inspector-improvements","title":"Other Element Inspector improvements"}]},{"url":"#performance-improvements","title":"Performance improvements"},{"url":"#updated-sync-options","title":"Updated Sync options"},{"url":"#forced-colors-emulation","title":"Forced colors emulation"},{"url":"#console-updates","title":"Console updates"},{"url":"#updated-rules-and-guides","title":"Updated Rules and Guides","items":[{"url":"#alignment-to-site","title":"Alignment to site"},{"url":"#setting-a-custom-color","title":"Setting a custom color"},{"url":"#dot-grid-option","title":"Dot grid option"},{"url":"#right-aligned-guides","title":"Right-aligned guides"}]},{"url":"#panel-can-now-be-left-aligned","title":"Panel can now be left aligned"},{"url":"#new-color-contrast-debug-tool-logic","title":"New Color Contrast debug tool logic"},{"url":"#meta-panel-updates","title":"Meta Panel updates"},{"url":"#new-debug-tool-hide-cursor","title":"New Debug tool: Hide Cursor"},{"url":"#csp-header-warning","title":"CSP header warning"},{"url":"#chromium-98","title":"Chromium 98"},{"url":"#arm-support","title":"ARM support"},{"url":"#other-improvements-and-bugfixes","title":"Other improvements and bugfixes"},{"url":"#get-polypane-8","title":"Get Polypane 8","items":[{"url":"#deprecation-notice","title":"Deprecation notice"}]},{"url":"#polypane-800-changelog","title":"Polypane 8.0.0 Changelog"}]},"excerpt":"Polypane 8 comes with a better Elements inspector, big performance improvements, Chromium 98 and many other new and improved features, like forced colors…","frontmatter":{"title":"Polypane 8: better Elements Inspector, new syncing features, Chromium 98 and more","cover":"/img/mail/icon.svg","date":"2022-02-01","updated":null},"fields":{"slug":"/blog/polypane-8-better-elements-inspector-new-syncing-features-chromium-98-and-more/","date":"2022-01-31T23:00:00.000Z","ogFileName":"polypane-8-better-elements-inspector-new-syncing-features-chromium-98-and-more"}}},"pageContext":{"slug":"/blog/polypane-8-better-elements-inspector-new-syncing-features-chromium-98-and-more/"}},"staticQueryHashes":["4164364741","425175329"]}