{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-19-workflow-improvements/","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 19: Workflow improvements\",\n \"cover\": \"/img/mail/icon.svg\",\n \"date\": \"2024-05-16\",\n \"updated\": \"2024-05-27\",\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 19 comes with updated performance tests, a live DOM view in the elements panel and tons of workflow improvements. It also runs on a new Chromium version, 124.`), mdx(PolypaneIntro, {\n mdxType: \"PolypaneIntro\"\n }), mdx(\"h2\", {\n \"id\": \"performance-testing\"\n }, `Performance testing`), mdx(\"p\", null, `We added capo.js to the meta panel, giving you insight in how to improve the ordering of the elements in your `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), ``), ` and updated our web vitals panel to include the new INP metric, updated CrUX data and split the panel into Core and Others.`), mdx(\"h3\", {\n \"id\": \"head-ordering-with-capojs\"\n }, `Head ordering with Capo.js`), mdx(\"p\", null, `Capo.js is a tool that helps you understand how your site's performance is affected by the order of elements in your `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), ``), `. It gives you an overview of the current ordering, highlighting any issues, and suggests a new order that should improve your site's performance.`), mdx(\"img\", {\n src: capo,\n className: \"imgshadow\",\n alt: \"Overview of two sets of Head orders, one 'current' and one 'sorted'. A line goes from one set to the other.\"\n }), mdx(\"p\", null, `In Polypane we automatically run Capo.js for you and show you the results in `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/meta-information/\"\n }), `the meta panel`), `. This way you can quickly see if there are any issues with the ordering of your elements and what you can do to improve it.`), mdx(\"p\", null, `When you open up the Capo section, you'll see two bars which visually represent the current order and the suggested order (if you see just one, congrats! 🎉 You already have the most optimal ordering!) Striped bars means there is an issue with that particular element.`), mdx(\"p\", null, `Hovering over the bars will give you the details and show you where the element currently is and where it should be moved to.`), mdx(\"p\", null, `Opening up the bars will show you the list of elements written out along with their relative important score.`), mdx(\"p\", null, `We've also opened `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/rviscomi/capo.js/pull/111\"\n }), `our first PR`), ` to add support for `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `viewport-fit`), ` (already live in Polypane) and look forward to contributing more.`), mdx(\"h3\", {\n \"id\": \"web-vitals\"\n }, `Web Vitals`), mdx(\"p\", null, `Recently the Interaction to Next Paint (INP) metric was made part of the core web vitals, replacing First Input Delay (FID). We've updated our `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/web-vitals/\"\n }), `web vitals`), ` popup to include this new metric, as well as added the available CrUX data.`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `CrUX data is \"field data\", it shows you how well you score on average across all your visitors (using Chrome) so you can get a breakdown of how many of them had a good experience and how many had a poor experience, as well as contrast that against your current own score.`)), mdx(\"p\", null, `Previously we showed the web vitals as a single list, but we've now split them into Core and Others. This way you can quickly see which of the core web vitals you need to focus on and which are already good.`), mdx(\"img\", {\n src: webvitals,\n className: \"imgshadow\",\n alt: \"A popup showing a list of web vitals\"\n }), mdx(\"h2\", {\n \"id\": \"elements-panel-improvements\"\n }, `Elements panel improvements`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/elements-panel/\"\n }), `elements panel`), ` got a lot of love in this release. We added a live DOM view so that you can instantly see updates to your DOM in the elements panel, we added color format switching, the ability to copy the HTML of an element, weighted autocomplete suggestions as you type, more ways to copy CSS rules and improved @scope support.`), mdx(\"h3\", {\n \"id\": \"live-dom-view\"\n }, `Live DOM View`), mdx(\"p\", null, `The DOM tree in the elements panel in previous releases would only update as a result of a user action (like selecting a new element, changing a css property or loading a new page) but now, changes to your DOM structure will be reflected in the elements panel in real time. This makes the elements panel more useful for everyone that uses the DOM view as a way to keep track of the state of things in their page.`), mdx(\"video\", {\n src: elementspanelupdate,\n muted: true,\n controls: true,\n preload: \"auto\",\n loading: \"lazy\",\n playsInline: true,\n className: \"imgshadow\",\n style: {\n maxWidth: '100%'\n }\n }), mdx(\"p\", null, `Getting the performance right for this was tricky (and it's why it took us a while to build it) but we're happy with the result. Let us know what you think!`), mdx(\"h3\", {\n \"id\": \"scroll-and-scroll-snap-badges\"\n }, `Scroll and Scroll-snap badges`), mdx(\"p\", null, `The DOM view now also shows new badges for elements that scroll, or that have scroll-snapping set. This way you can quickly see the scroll areas and in the case of scroll-snap you can can also click the badge to toggle the scroll-snap overlay (like you can also do with the Flex and Grid badges)`), mdx(\"img\", {\n src: scrollsnap,\n className: \"imgshadow\",\n alt: \"Polypane showing a number of panes with a scroll-snap overlay visible\"\n }), mdx(\"h3\", {\n \"id\": \"color-format-switching\"\n }, `Color format switching`), mdx(\"p\", null, `You can now switch between different color formats by shift-clicking on the color. This way you can quickly switch between hex, rgb, hsl, hwb and, if available, the named color.`), mdx(\"video\", {\n src: shiftclickcolor,\n muted: true,\n controls: true,\n preload: \"auto\",\n loading: \"lazy\",\n playsInline: true,\n className: \"imgshadow\",\n style: {\n maxWidth: '100%'\n }\n }), mdx(\"p\", null, `What's more, if you open the color picker and switch the color format, the color picker will update to the new format as well, so you never lose the context you're in.`), mdx(\"h3\", {\n \"id\": \"copying-css-and-html\"\n }, `Copying CSS and HTML`), mdx(\"p\", null, `We added a few new ways to copy CSS rules and HTML from the elements panel. You can now right-click the part of the CSS you want to copy and you get a few different options like copying just the selector, just the declarations, the entire ruleset, an individual declaration, property or value. So no matter what you need to copy, you can do it quickly and easily.`), mdx(\"img\", {\n src: copyhtml,\n className: \"imgshadow\",\n alt: \"an opened menu showing a number of copy options, including outer HTML and inner HTML.\"\n }), mdx(\"p\", null, `Along with copying a unique CSS or Xpath selector, you can now also copy the outerHTML and innerHTML of a given element from the copy button in the elements panel. The copied HTML is automatically formatted with Prettier so it looks great regardless of the source.`), mdx(\"h3\", {\n \"id\": \"weighted-autocomplete\"\n }, `Weighted autocomplete`), mdx(\"p\", null, `When you're typing in the elements panel, you'll now get autocomplete suggestions based on the weight of the property or attribute you're typing. This means that the most commonly used properties and attributes will show up first, making it easier to quickly find what you're looking for.`), mdx(\"p\", null, `Just like autocomplete in the address bar (which we added in Polypane 18) this means you can just press enter to select the first suggestion, saving you time and keystrokes.`), mdx(\"p\", null, `For example, when adding a new CSS property and you type 'fo', that will get autocompleted to 'font-size', because it's more commonly used than just 'font' or 'font-display'. Less keystrokes needed for the same result!`), mdx(\"h3\", {\n \"id\": \"improved-scope-support\"\n }, `Improved @scope support`), mdx(\"p\", null, `We had a few gaps in our @scope support, primarily support for implicit scoping in inline style elements. This means that if you have an inline `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `style`), ` element in your page that has CSS in an `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `@scope {`), ` (without root value) the elements panel will now correctly scope the CSS rules to the parent of that style element.`), mdx(\"p\", null, `The highlight selectors button will also now limit the highlighting to the scope of the element you're inspecting, so you're not highlighting elements outside of the scope the CSS is active in.`), mdx(\"p\", null, `In previous releases the way we calculated the scope limit wasn't correct. We've now fixed this so that the scope limit element is correctly determined.`), mdx(\"h3\", {\n \"id\": \"lang-and-hreflang-attribute-validation\"\n }, `Lang and hreflang attribute validation`), mdx(\"p\", null, `When you have a `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `lang`), ` or `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `hreflang`), ` attribute on an element, we now validate that the value is correct. This means that if you have a lang attribute with an invalid formatting, unknown language or too-specific language code, we'll show a warning next to the field in the attribute tab.`), mdx(\"h3\", {\n \"id\": \"nits-in-the-elements-panel\"\n }, `Nits in the elements panel`), mdx(\"p\", null, `We also solved a bunch of annoying little issues:`), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, `The color picker optimised the color whenever you dragged the picker to pure black, which also reset the hue back to 0. Now when you drag to black the color picker stays at whatever hue value you had selected.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `The color picker would sometimes start toggling between two color rapidly because the roundtrip for a color update in all panes was just a few ms too long. We now short-circuit that loopback so the color picker stays stable.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Pseudo element selectors had highlighting buttons that didn't do anything. We no longer show those.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `In some situations, toggling a CSS property would move it to the bottom of the list of declarations. That order is now always preserved.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Turns out, we forgot to add support for container and status badges to the HTML element. Those are now supported as well.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Hovering an idref to highlight it elsewhere in the DOM view would also trigger the open/collapse tree action. We now prevent that from happening, so that it only opens elements to show the idref but doesn't close already open ones.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Pressing `, mdx(ShortcutDisplay, {\n shiftKey: true,\n cmdKey: true,\n letter: \"c\",\n mdxType: \"ShortcutDisplay\"\n }), ` started inpection mode, but pressing it again didn't stop it (pressing `, mdx(ShortcutDisplay, {\n letter: \"Esc\",\n mdxType: \"ShortcutDisplay\"\n }), ` did). We now also stop inspection mode when pressing `, mdx(ShortcutDisplay, {\n shiftKey: true,\n cmdKey: true,\n letter: \"c\",\n mdxType: \"ShortcutDisplay\"\n }), ` again.`)), mdx(\"h2\", {\n \"id\": \"element-screenshots-with-padding\"\n }, `Element screenshots with padding`), mdx(\"p\", null, `When `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/making-screenshots/#element-screenshots\"\n }), `screenshotting a single element`), ` you can now add padding around that element. Really useful to add a little bit more context to your element screenshots without having to switch to the viewport screenshot and then cropping it manually.`), mdx(\"img\", {\n src: screenshotpadding,\n className: \"imgshadow\",\n alt: \"Screenshot configuration UI, the 'element padding' option is highlighted.\"\n }), mdx(\"h2\", {\n \"id\": \"meta-panel-improvements\"\n }, `Meta panel improvements`), mdx(\"p\", null, `The new Capo.js support is available in `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/meta-information/\"\n }), `the meta panel`), `, but we also added other new features and fixes there. A lot of these came from user requests, so keep them coming!`), mdx(\"h3\", {\n \"id\": \"language-validation\"\n }, `Language validation`), mdx(\"p\", null, `The meta panel has always shown the language, and now we also validate the value:`), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, `we check the formatting: though Firefox is lenient and fixes \"en_us\" for you, other browsers won't recognize language tags unless they use the proper notation: \"en-us\".`), mdx(\"li\", {\n parentName: \"ul\"\n }, `We check if the language is known at all (so its easy to catch typos)`), mdx(\"li\", {\n parentName: \"ul\"\n }, `We check if the language is too specific: You'll rarely want to use \"en-us\" over just \"en\" for example, and we'll warn you if you do.`)), mdx(\"img\", {\n src: langwarn,\n className: \"imgshadow\",\n alt: \"A section that reads 'de-AT', with an info button that reads 'Do you need AT-specific German?'\"\n }), mdx(\"p\", null, `This was a case of us already having all the information we need (The emulation panel already knows about all the language codes and autosuggests them for the page language and browser locale emulation) and a user request helping us realize we could use that information in the meta panel as well. Thanks Eric!`), mdx(\"h3\", {\n \"id\": \"color-scheme-meta-value\"\n }, `Color-scheme meta value`), mdx(\"p\", null, `The color-scheme meta tag is getting increasingly more important as browsers implement more and more automatic dark-mode specific features, so it's been upgraded to show at the top of the meta panel as well. Thanks Luke!`), mdx(\"img\", {\n src: colorscheme,\n className: \"imgshadow\",\n alt: \"A list of meta panel values, one of them being color-scheme with the value 'missing'\"\n }), mdx(\"h3\", {\n \"id\": \"self-signed-certificates\"\n }, `Self-signed certificates`), mdx(\"p\", null, `Polypane silently supports self-signed certificates for localhost, but for the Meta panel we request things like robots.txt in a background process and that process lacked the same support. We've now added that support, so it all works well. Thanks Matt!`), mdx(\"h3\", {\n \"id\": \"social-preview-updates\"\n }, `Social preview updates`), mdx(\"p\", null, `LinkedIn rolled out a new share preview with a much smaller image and new colors, and so we also updated our design to match the new design. Additionally, we fixed an issue with the canonical URL check for LinkedIn: our implementation incorrectly handled trailing slashes for the top level domain, which caused warnings that weren't necessary.`), mdx(\"img\", {\n src: linkedin,\n className: \"imgshadow\",\n alt: \"LinkedIn preview of polypane.app\"\n }), mdx(\"p\", null, `Slack recently updated their image size limit from 2MB to 20MB, so we updated our preview to behave the same: if your image is larger than 20MB, Polypane shows it collapsed just like Slack does.`), mdx(\"p\", null, `Lastly, the Discord card implementation used the page title as fallback when an og:title was missing, but Discord doesn't actually do that, it just shows no title. We updated our preview. Thanks Cory for the feedback!`), mdx(\"h3\", {\n \"id\": \"always-visible-suggestions\"\n }, `Always visible suggestions`), mdx(\"p\", null, `In Polypane 18 we added suggestions for missing meta values (split into required and optional) but we only showed them when you already had meta tags in each category (twitter, og, meta). If you for example didn't have any twitter meta tags, then the entire section would be hidden along with the suggestions.`), mdx(\"img\", {\n src: requiredtags,\n className: \"imgshadow\",\n alt: \"Overview of Twitter tags where there are none on the page, but a list of required ones are visible.\"\n }), mdx(\"p\", null, `We now show the suggestions especially if you don't have any meta tags in that category, so you can quickly see which ones are actually required.`), mdx(\"p\", null, `We helped our friend Tejas with the Twitter previews on his website and realised that Polypane would've flagged the required meta tags if only we had shown them, and now we do!`), mdx(\"h2\", {\n \"id\": \"console-improvements\"\n }, `Console improvements`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/console/\"\n }), `console panel`), ` got a few updates as well. We added a search for errors, improved the styling of warnings and errors and made sure that the error messages are more complete.`), mdx(\"h3\", {\n \"id\": \"search-errors\"\n }, `Search errors`), mdx(\"p\", null, `Each error logged in the console now has a quick-search option that searches for that error in the browse panel using your default search engine. This way you can quickly find more information about the error and how to fix it.`), mdx(\"img\", {\n src: consolesearch,\n className: \"imgshadow\",\n alt: \"A console error with a magnifier icon.\"\n }), mdx(\"h3\", {\n \"id\": \"improved-styling\"\n }, `Improved styling`), mdx(\"p\", null, `We've streamlined the styling of different types of messages in the console panel so that finding warnings and errors is easier and all messages now have an easier to see filepath.`), mdx(\"img\", {\n src: consolestyle,\n className: \"imgshadow\",\n alt: \"A list of different console messages.\"\n }), mdx(\"p\", null, `We also found an issue where the monospace font we used for Linux didn't match Chromium's monospace font, so we've updated that as well.`), mdx(\"h3\", {\n \"id\": \"more-complete-error-messages\"\n }, `More complete error messages`), mdx(\"p\", null, `In some situations, we didn't pass the full error stack to the Polypane console, which meant that you didn't get the full error message. We now pass the full error message so you can see exactly what went wrong.`), mdx(\"h2\", {\n \"id\": \"pick-text-and-background-colors-directly-from-elements\"\n }, `Pick text and background colors directly from elements`), mdx(\"p\", null, `There's a dozen different ways to get color contrast information in Polypane, and we've added another one! From `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/color-picker/\"\n }), `the color picker`), ` you can now also select elements and the color picker automatically loads the text and background colors of that element.`), mdx(\"video\", {\n src: colorpickerfromelement,\n muted: true,\n controls: true,\n preload: \"auto\",\n loading: \"lazy\",\n playsInline: true,\n className: \"imgshadow\",\n style: {\n maxWidth: '100%'\n }\n }), mdx(\"p\", null, `This way you can quickly see if the contrast is good enough, export the swatches as a screenshot or colors and make sure your site is accessible to everyone.`), mdx(\"p\", null, `If you just want to know an elements contrast, hover over it and hold `, mdx(ShortcutDisplay, {\n altKey: true,\n mdxType: \"ShortcutDisplay\"\n }), ` to `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/polypane-peek/\"\n }), `peek`), ` at the contrast.`), mdx(\"h2\", {\n \"id\": \"automatic-dark-mode-emulation\"\n }, `Automatic dark mode emulation`), mdx(\"p\", null, `Chromium since a few versions has a built-in automatic dark mode that converts websites that don't have their own dark mode to a dark theme. We've added an emulation option for this so you can see how your site looks in this mode.`), mdx(\"img\", {\n src: autodarkmode,\n className: \"imgshadow\",\n alt: \"The Polypane quick start in auto dark mode. The emulation popup is opened and automatic dark mode is highlighted\"\n }), mdx(\"p\", null, `This mode isn't something you want to develop against, but it is a mode that people will see your site in, so it's good to know how your site behaves in this mode.`), mdx(\"h2\", {\n \"id\": \"outline-panel-links\"\n }, `Outline panel links`), mdx(\"p\", null, `The Links overview in the outline panel now warns when links have the same text but go to a different URL, and when links go to the same URL but have different text. This way you can quickly see if you have any inconsistencies in your links.`), mdx(\"img\", {\n src: outlinelinks,\n className: \"imgshadow\",\n alt: \"an 'inconsistent link names' warning.\"\n }), mdx(\"h2\", {\n \"id\": \"workflow-improvements\"\n }, `Workflow improvements`), mdx(\"p\", null, `We've collected a ton of small improvements from user feedback and added them to this release that will make working with Polypane even smoother.`), mdx(\"h3\", {\n \"id\": \"shift-click-to-apply-to-all-panes\"\n }, `Shift-click to apply to all panes`), mdx(\"p\", null, `Whenever you now shift click a `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://polypane.app/docs/debug-tools/\"\n }), `debug tool`), ` or a `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://polypane.app/docs/emulation/#media\"\n }), `media emulation`), `, it will apply to all panes. This way you can quickly apply a debug tool to all panes, or see how your site looks in a specific media feature across all panes. We initially added this to the debug tools, and then Artem asked is for a similar feature for media features, so we added that as well. Thanks Artem!`), mdx(\"h3\", {\n \"id\": \"disable-the-next-mouse-click\"\n }, `Disable the next mouse click`), mdx(\"p\", null, `Polypane syncs all clicks, but sometimes you have a javascript listener that you only want to execute in one pane instead of all. Rather than disabling click sync entirely, clicking and then turning it back on, you can now right-click and select \"Don't sync next click\" to prevent syncing of the next click you do. Any subsequent clicks will be synced again, without needing to change any settings. Quick and easy, thanks Marv!`), mdx(\"h3\", {\n \"id\": \"better-release-notes\"\n }, `Better release notes`), mdx(\"p\", null, `Previous versions showed the release notes of the most recent version, even if you weren't on that one. Now it shows the release notes of the current version, and warns you if there's a new version available. Thanks for that suggestion Josey!`), mdx(\"p\", null, `Any links in the release notes are now opened in the browse panel.`), mdx(\"h3\", {\n \"id\": \"copy-image-and-video-features\"\n }, `Copy image and video features`), mdx(\"p\", null, `Right-clicking an image now lets you copy the image as a data URI, along with all the other copy options we already had. Right-clicking a video or audio element lets you download the video or copy the video URL. This way you can quickly grab the image or video you need without having to open the devtools.`), mdx(\"h3\", {\n \"id\": \"extension-button-opens-manager\"\n }, `Extension button opens manager`), mdx(\"p\", null, `The extension button in the header now opens the manager if you have no extensions installed. Once you have it installed, clicking it will show the extension icons like before.`), mdx(\"h3\", {\n \"id\": \"scroll-reset-options\"\n }, `Scroll reset options`), mdx(\"p\", null, `We added a scroll to top and scroll to bottom option in the reload menu and command bar, so you can quickly scroll to the top or bottom of the page without having to scroll manually or use the scrollbars (or the home/end keys when a pane is focused). Thanks Kerstin for this request!`), mdx(\"img\", {\n src: reloadmenu,\n className: \"imgshadow\",\n alt: \"The reload menu in Polypane, showing newly added scroll to top and bottom options.\"\n }), mdx(\"h2\", {\n \"id\": \"performance\"\n }, `Performance`), mdx(\"p\", null, `We found a performance issue with pages where the headings consist of multiple child elements. This meant that Chromium took significantly longer to calculate the accessible name of a header, causing a slowdown on load while Polypane was calculating the header structure. We've improved performance in that situation so load should be faster now. Thanks Ahmad for reporting this!`), mdx(\"h2\", {\n \"id\": \"chromium-124\"\n }, `Chromium 124`), mdx(\"p\", null, `Polypane 19 includes an updated Chromium version, 124.0.6367.207.`), mdx(\"p\", null, `For an overview of the new experimental features enabled in 124, head over to our experimental features overview: `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/experimental-web-platform-features/\"\n }), `Experimental Chromium Web Platform Features`), ` and for additional info, head over to the `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/experimental-chromium-features/\"\n }), `experimental chromium features docs`), `.`), mdx(\"h2\", {\n \"id\": \"get-polypane-19\"\n }, `Get Polypane 19`), 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-1902-changelog\"\n }, `Polypane 19.0.2 Changelog`), mdx(\"p\", null, `This is a bugfix and performance release.`), 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`), ` Performance of sites with often-changing DOMs (Thanks Amit!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Stop Element panel listeners when not visible`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Generate all viewport and all full page screenshots in parallel`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Revert address bar to current URL after opening search in Browse panel`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Update Chromium to 124.0.6367.230`)), 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`), ` Extensions would apply to the wrong pane`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Calculation of the computed name of complex DOM structures (Thanks Amit!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Prevent getting element info while scrolling (Thanks Amit!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Hide unused \"frame\" option in screenshot editor`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Create screenshots for all viewport option created full page screenshots instead`)), mdx(\"h2\", {\n \"id\": \"polypane-1901-changelog\"\n }, `Polypane 19.0.1 Changelog`), mdx(\"p\", null, `This is a bugfix release.`), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, `New`)), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, `Support for ARC toolkit devtools extension`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Element screenshot with padding support in Element inspector (Thanks Eric!)`)), 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`), ` Devices didn't apply user agent and pixel ratio when selecting them (Thanks Tiva!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Full height screenshots wouldn't always resolve correctly (Thanks Arthur!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Full height screenshots with alternate devicePixelRatio caused incorrect stitching`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Prevent issue where Meta panel would stay empty after initial error`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Reference image icon had the incorrect opacity`)), mdx(\"h2\", {\n \"id\": \"polypane-19-changelog\"\n }, `Polypane 19 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`), ` Head order visualisation`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Console: Search for error`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Color picker: Select element for contrast`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Element screenshot with padding (Thanks Eric!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Scroll and Scroll-Snap labels and overlay in Elements panel`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Shift click to toggle color mode in Elements panel`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Auto Dark Theme emulation (Thanks Brian!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Meta panel: New Linkedin Share preview`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Live DOM view in Elements panel`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Web vitals panel split into Core and Others`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `New`), ` Chromium 124.0.6367.207`)), 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`), ` Meta panel: Self-signed certificates are now also supported when fetching URLs in the background like robots.txt (Thanks Matt!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Meta panel: Updated Discord card preview (Thanks Cory!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Meta panel: LinkedIn canonical URL check handles trailing slashes better`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Meta panel: Maximum image size in Slack preview is no 20MB`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Meta panel: Warnings for invalid, unknown and too-specific language codes (Thanks Eric!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Meta panel: Show color-scheme meta value at the top (Thanks Luke!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Meta panel: Show missing meta values even for empty categories (Thanks Tejas!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Release notes links now open in Browse panel`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Release notes show current version as well as notification for update when available (Thanks Josey!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Context menus: Copy/Save options for video and audio elements`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Context menus: Copy Image as Data URI`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Pressing shift + cmd + c while inspecting disables element inspection`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Right-click debug tools icon to reload, middle click to remove`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Ability to disable only the next mouse click (Thanks Marv!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Debug tools: shift + click to apply a debug tool to all panes`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Emulation options: shift + click to apply media features to all panes (Thanks Artem!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Copy inner/outerHTML (Thanks Eric!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: faster feedback when toggling a css property`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Support color selection for CSS variables in compound properties`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Remove newlines when there are many selectors in a ruleset`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Tab completion for CSS properties and attributes based on weight (Thanks Mitchel!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Tab completion for HTML and Aria properties and attributes`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Copy all declaration and copy ruleset context menu options (Thanks Charles!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Warnings for invalid, unknown and too-specific language codes (Thanks Eric!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Support implicit scoping in inline style elements (Thanks Nicolas!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Elements panel: Highlighting selectors now limits to the scope`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Add grid and flex highlighting to Peek for Chromium devtools (Thanks Aresh!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Improve page load time issues on pages with many headings (Thanks Ahmad!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Performance of node tooltip`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Open Extension manager when clicking the extension icon without installed extensions`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Use correct monospace font on Linux`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Console panel: Update styling of warnings and errors`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Console panel: More complete error messages`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Console panel: Don't show the full path for messages`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Outline panel: Warning for links with inconsistent names`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Outline panel: Warning for links with inconsistent destinations`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Browse panel: 'Open this page in workspace' context menu option`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Fragment identifier matching now excludes the special-cased `, mdx(\"code\", _extends({\n parentName: \"li\"\n }, {\n \"className\": \"language-text\"\n }), `#top`), ` value.`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Dark mode styling issues`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Scroll to top/bottom option in reload menu (Thanks Kerstin!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Distances drawn between guides now have triangle markers`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Add new shortcuts for tab switching (Thanks André!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` The image editor now supports multiselection of shapes`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Improved`), ` Our user agent string now only shows the major Chromium version`), 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`), ` Color contrast overlay not removing the tooltips on disabling`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Pressing enter with selection in Browse panel doesn't use full completed URL`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Outline panel: Taborder values above 10 are now sorted correctly (Thanks Eric!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Outline panel: Overlays not showing when warnings were turned off`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Sessions: Clear session for tab when removing it from a pane settings menu`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Sessions: Allow adding a session with the same name as a just deleted session`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Meta panel improved text contrast for warnings.`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Emulation: lang and locale would not always be set correctly`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Emulation: lang could be overwritten by locale on app launch`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Extensions: revert back to Manifest v2 versions of Mate Translate and Visbug`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Node screenshots could sometimes be blurry (Thanks Marty!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Overview screenshot for single pane in vertical layout now has less whitespace`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Screenshot editor: Stickers and other overlays weren't initially editable`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Screenshot editor: Measure overlay now shows value again`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Elements panel: container and status badges for the HTML element can now be shown`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Elements panel: Toggling a CSS property in specific situations no longer moves it to the bottom of the list`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Elements panel: Don't show highlight selector button for pseudo elements`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Elements panel: Color picker no longer resets hue`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Elements panel: prevent color picker from jittering in specific situations`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Elements panel: Don't open/collapse tree when hovering idrefs`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Elements panel: Improve resolution of scoping limits`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Outline panel: Fix visual issue with issue icon alignment for pages with no landmarks`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Pages with manual scrollRestoration now have synced scrolling again (Thanks Artem!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Inability to parse CSS breakpoints from CSS containing errors (Thanks Martin!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Computed name calculation for input/label pairs with plain text content (Thanks Eric!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Crash when trying to load browser extensions with missing icons`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Page emulation and Browser locale emulation were broken`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Issue where CSS was blocked in the Browse Panel due to overwritten CSP settings (Thanks Stephan!)`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Reference image: Don't show onion skin UI when reference is side-by-side`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Platform emulation not being set from chosen device`), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, `Fix`), ` Media permissions check forwarding to broken URL after granted permission`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":15,"tableOfContents":{"items":[{"url":"#performance-testing","title":"Performance testing","items":[{"url":"#head-ordering-with-capojs","title":"Head ordering with Capo.js"},{"url":"#web-vitals","title":"Web Vitals"}]},{"url":"#elements-panel-improvements","title":"Elements panel improvements","items":[{"url":"#live-dom-view","title":"Live DOM View"},{"url":"#scroll-and-scroll-snap-badges","title":"Scroll and Scroll-snap badges"},{"url":"#color-format-switching","title":"Color format switching"},{"url":"#copying-css-and-html","title":"Copying CSS and HTML"},{"url":"#weighted-autocomplete","title":"Weighted autocomplete"},{"url":"#improved-scope-support","title":"Improved @scope support"},{"url":"#lang-and-hreflang-attribute-validation","title":"Lang and hreflang attribute validation"},{"url":"#nits-in-the-elements-panel","title":"Nits in the elements panel"}]},{"url":"#element-screenshots-with-padding","title":"Element screenshots with padding"},{"url":"#meta-panel-improvements","title":"Meta panel improvements","items":[{"url":"#language-validation","title":"Language validation"},{"url":"#color-scheme-meta-value","title":"Color-scheme meta value"},{"url":"#self-signed-certificates","title":"Self-signed certificates"},{"url":"#social-preview-updates","title":"Social preview updates"},{"url":"#always-visible-suggestions","title":"Always visible suggestions"}]},{"url":"#console-improvements","title":"Console improvements","items":[{"url":"#search-errors","title":"Search errors"},{"url":"#improved-styling","title":"Improved styling"},{"url":"#more-complete-error-messages","title":"More complete error messages"}]},{"url":"#pick-text-and-background-colors-directly-from-elements","title":"Pick text and background colors directly from elements"},{"url":"#automatic-dark-mode-emulation","title":"Automatic dark mode emulation"},{"url":"#outline-panel-links","title":"Outline panel links"},{"url":"#workflow-improvements","title":"Workflow improvements","items":[{"url":"#shift-click-to-apply-to-all-panes","title":"Shift-click to apply to all panes"},{"url":"#disable-the-next-mouse-click","title":"Disable the next mouse click"},{"url":"#better-release-notes","title":"Better release notes"},{"url":"#copy-image-and-video-features","title":"Copy image and video features"},{"url":"#extension-button-opens-manager","title":"Extension button opens manager"},{"url":"#scroll-reset-options","title":"Scroll reset options"}]},{"url":"#performance","title":"Performance"},{"url":"#chromium-124","title":"Chromium 124"},{"url":"#get-polypane-19","title":"Get Polypane 19"},{"url":"#polypane-1902-changelog","title":"Polypane 19.0.2 Changelog"},{"url":"#polypane-1901-changelog","title":"Polypane 19.0.1 Changelog"},{"url":"#polypane-19-changelog","title":"Polypane 19 Changelog"}]},"excerpt":"Polypane 19 comes with updated performance tests, a live DOM view in the elements panel and tons of workflow improvements. It also runs on a new Chromium…","frontmatter":{"title":"Polypane 19: Workflow improvements","cover":"/img/mail/icon.svg","date":"2024-05-16","updated":"2024-05-27"},"fields":{"slug":"/blog/polypane-19-workflow-improvements/","date":"2024-05-15T22:00:00.000Z","ogFileName":"polypane-19-workflow-improvements"}}},"pageContext":{"slug":"/blog/polypane-19-workflow-improvements/"}},"staticQueryHashes":["4164364741","425175329"]}