{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-13-1/","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 13.1\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2023-03-27\",\n  \"updated\": \"2023-04-12\",\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 13.1 is here! In this release we retooled our build system from webpack to Vite, which has improved the startup time and UI performance of Polypane by about 20%. 13.1 also adds network requests to the Console Panel, flex and grid overlays to the Elements Panel, APCA support to the color picker and unique URLs per tab to the Browse Panel.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"elements-panel-updates\"\n  }, `Elements panel updates`), mdx(\"p\", null, `We've made a bunch of updates to the Elements panel, along with a few bug fixes and newly added property suggestions.`), mdx(\"h3\", {\n    \"id\": \"flex-and-grid-overlays\"\n  }, `Flex and Grid overlays`), mdx(\"p\", null, `While previous versions of Polypane showed badges for elements with a grid or flex layout, they weren't interactive. Now if you click a badge we'll draw a grid of flex overlay in all panes, so you get a quick overview of how the layout for that element is constructed.`), mdx(\"p\", null, `The overlays update as you make changes across panes and you can add as many overlays as you need.`), mdx(\"img\", {\n    src: flexgrid,\n    alt: \"Three panes in Polypane with multiple flex and grid overlays visible.\",\n    className: \"imgshadow\"\n  }), mdx(\"h3\", {\n    \"id\": \"copy-css-selector-or-xpath-to-clipboard\"\n  }, `Copy CSS Selector or XPath to clipboard`), mdx(\"p\", null, `From the navigator you can now copy the CSS selector or XPath for an element to the clipboard. This is useful for debugging and for using in tools like `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.cypress.io/\"\n  }), `Cypress`), `, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pptr.dev/\"\n  }), `Puppeteer`), ` or `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://playwright.dev/\"\n  }), `Playwright`), `.`), mdx(\"img\", {\n    src: copyselector,\n    alt: \"a menu showing the option to copy the CSS selector or XPath for an element to the clipboard.\",\n    className: \"imgshadow\"\n  }), mdx(\"h3\", {\n    \"id\": \"show-color-picker-for-named-colors\"\n  }, `Show color picker for named colors`), mdx(\"p\", null, `Polypane already showed a color picker for properties that took colors (like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `background-color`), `) but now we also show one when Polypane detects that the value is a named color (like \"red\", \"deeppink\" or \"olivegreen\") regardless of the property. That means if you now use the \"background\" shorthand with just a color it gets a color picker too.`), mdx(\"h3\", {\n    \"id\": \"support-for-css-nesting-without-nesting-rule-\"\n  }, `Support for CSS nesting without nesting rule (\"&\")`), mdx(\"p\", null, `In Polypane 13 we introduced support for CSS nesting in the elements panel, but because of the Chromium version we were running, we couldn't yet display the styling for nested CSS that didn't use the \"&\" selector.`), mdx(\"p\", null, `In Polypane 13.1 that's now possible and all nesting along with nesting at-rules is shown with the selector in the elements panel.`), mdx(\"h3\", {\n    \"id\": \"non-inherited-css-properties-are-shown-dimmed\"\n  }, `Non-inherited CSS properties are shown dimmed`), mdx(\"p\", null, `The elements panel also shows CSS for parent elements that contain inherited styles. We've updated the display of these so that only the inherited styles (like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `color`), `) are highlighted, while the styles that don't inherit (like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `padding`), `) are dimmed slightly.`), mdx(\"h2\", {\n    \"id\": \"network-requests-in-the-console-panel\"\n  }, `Network requests in the console panel`), mdx(\"p\", null, `Polypane has a unified elements panel and console panel that lets you inspect and edit across all panes at the same time, but for network data you still had to use the Network panel in the Chromium devtools.`), mdx(\"p\", null, `That panel has a wealth of information and options that aren't easily replicated. As a first step to a unified overview of your network Polypane can now show you the Fetch and Xhr requests that happen in your pages in the Console panel. Turn the \"network\" option in the console panel level settings on to see them.`), mdx(\"img\", {\n    src: network,\n    alt: \"The console showing a fetch request with expanded headers, and a menu option to show network requests in the console.\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `The console will then show fetch/XHR requests as they come in, with inspectable return headers, and will automatically merge identical requests across panes making it easy to see what data is the same and what is different per pane.`), mdx(\"h3\", {\n    \"id\": \"better-level-filters\"\n  }, `Better level filters`), mdx(\"p\", null, `To support this feature we also made the levels multiselectable, so you can now choose if you want to see errors, warnings, info, navigation, network and debug events separately. In addition, these filters will also affect which console notifications are shown under each pane. That overview will now also show counters for debug and network console messages when you have those turned on.`), mdx(\"h2\", {\n    \"id\": \"apca-support-in-the-color-picker\"\n  }, `APCA support in the color picker`), mdx(\"p\", null, `Along with testing against WCAG2 AA and AAA, you can now get the APCA score of colors in the color picker. APCA is a more advanced contrast formula that explicitly takes into account the way colors work on self-illuminating displays (so, uh, screens).`), mdx(\"img\", {\n    src: apca,\n    alt: \"The color picker showing APCA scores.\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `Unlike WCAG2, scoring is a little more complex. With APCA you get a score between -108 and +106, where negative scores are for light text on a dark background and positive numbers are for dark text on a light background. The higher the number in an absolute sense, the better the contrast.`), mdx(\"p\", null, `APCA gives a `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `minimum`), ` contrast ratio to hit and an `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `advised`), ` contrast ratio which is 15 points higher. In the color picker, a minimum contrast ratio will give you one check mark, while hitting the advises contrast will give you two check marks. And just like with WCAG2, a cross means the contrast is too low.`), mdx(\"p\", null, `The APCA algorithm doesn't yet have its own suggested color functionality, though that is coming and we're planning on helping them out with that as we've done with various other parts in the past year.`), mdx(\"blockquote\", null, mdx(\"h3\", _extends({\n    parentName: \"blockquote\"\n  }, {\n    \"id\": \"a-note-on-apca-usage\"\n  }), `A note on APCA usage`), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `While exciting (in that it feels both more accurate and more reasonable, even though it's actually stricter than the WCAG formula) it's worth noting that APCA is not part of any official standard. It's set to become part of WCAG3, but that itself is many years away from being ready.`), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `We're excited for APCA, and part of the reason we implemented it ahead of it becoming a standard is that real-world usage and testing is vital for it to prove itself. If you want to build accessible websites however, WCAG2 is still the formula you should test with.`)), mdx(\"h2\", {\n    \"id\": \"meta-panel-updates\"\n  }, `Meta panel updates`), mdx(\"p\", null, `In the meta panel we've updated our Slack preview (small change to the way dates are displayed) and Google SERP preview. Google SERPS now show a favicon as well as a site title, that they get from any structured data on the page that describes the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `WebSite`), `. (but of course, Google being Google means they'll also replace it with something else if they deem that better)`), mdx(\"img\", {\n    src: googleserp,\n    alt: \"comparing the old and new Google Search engine result.\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `Google SERP pages now also often show an image alongside a search result and although we've implemented that design wise, it's not currently visible because there is no clarity yet on how they decide which image to show (or when to show one to begin with). Expect that in a future update.`), mdx(\"h3\", {\n    \"id\": \"improved-data-loading\"\n  }, `Improved data loading`), mdx(\"p\", null, `Previous versions of Polypane loaded any manifest or oEmbed files directly from the page's javascript context. In 13.1 we're loading them from a background process so they don't show up in the network panel anymore.`), mdx(\"h2\", {\n    \"id\": \"other-updates\"\n  }, `Other updates`), mdx(\"p\", null, `Some smaller updates worth mentioning:`), mdx(\"h3\", {\n    \"id\": \"browse-panel-with-unique-urls-per-tab\"\n  }, `Browse panel with unique URLs per tab`), mdx(\"p\", null, `When we introduced the browse panel, Polypane didn't have tabs yet, and so the URL shown in the browse panel was the same regardless of what tab you had open.`), mdx(\"p\", null, `We've now updated the Browse panel so it shows a unique URL for each tab. Thanks Verdi for the suggestion!`), mdx(\"p\", null, `Later this year we're going to expand the Browse panel with tabs.`), mdx(\"p\", null, `In addition, we've removed Avocode since it was shut down recently, and replace it with Ceros Inspect.`), mdx(\"h3\", {\n    \"id\": \"clear-cookies-and-reload-option-in-the-context-menu\"\n  }, `Clear cookies and reload option in the context menu`), mdx(\"p\", null, `When you right-click the reload button in the toolbar, you'll now see a new option to clear cookies and reload the page. Use it to quickly reset any state stored in cookies, such as login status or cookie acceptance.`), mdx(\"p\", null, `You can still find the previously available options to reload just the CSS, force a hard reload and quick access to the live reload options.`), mdx(\"h3\", {\n    \"id\": \"measure-selected-text-character-and-word-lengths-in-context-menu\"\n  }, `Measure selected text character and word lengths in context menu`), mdx(\"p\", null, `When you right-click on text you've selected, Polypane now shows the number of characters and number of words in your selection in the context menu. This is useful to quickly count the words or character, but also to select a single line and check if the line length is between 45 and 70 characters, which is ideal for paragraphs. Thanks Ryan for suggesting this feature! Ryan also recently wrote about how he `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://ryantrimble.com/blog/building-with-polypane/\"\n  }), `built his new site with Polypane`), `.`), mdx(\"img\", {\n    src: measuretext,\n    alt: \"Selected text with a context menu showing the number of characters and words in the selection.\",\n    className: \"imgshadow\"\n  }), mdx(\"h3\", {\n    \"id\": \"screenshot-annotations-now-have-fixed-sizes\"\n  }, `Screenshot annotations now have fixed sizes`), mdx(\"p\", null, `In previous versions of Polypane the size of annotations (text, arrows etc) was dependent on the size of the image. For screenshots that doesn't quite work, so we've switched those out for absolute sizes. This was the size is always consistent. During the process of this we found a tiny issue in `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://pqina.nl/pintura/?aff=xLXrx&ref=polypane\"\n  }), `Pintura`), `, which powers our screenshot editor and Rik, the creator, fixed that within a day. Thanks Rik!`), mdx(\"h2\", {\n    \"id\": \"upgrading-to-vite\"\n  }, `Upgrading to Vite`), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `If you don't care about how Polypane's built you can skip this section.`)), mdx(\"p\", null, `Though a 20% startup time improvement and about the same for general UI responsiveness is nothing to sneeze at, it wasn't the main reason we switched.`), mdx(\"p\", null, `Polypane has been in development since 2015 and our existing build configuration has evolved from webpack 2 all the way through to 5. Unfortunately with each upgrade the dev build took longer to the point where it was taking 2 minutes before I could start working after running `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `yarn dev`), `. Using Vite it takes less than 20 seconds.`), mdx(\"p\", null, `I've tried migrating to Vite twice before, with both Vite 2 and 3, and while I liked the way everything was set up, both times I ran into issues with the way Vite handled things that made the process too brittle for my liking.`), mdx(\"p\", null, `This time round, I had the help of `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/caoxiemeihao\"\n  }), `草鞋没号`), ` who maintains `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/electron-vite/\"\n  }), `electron-vite`), `. I couldn't have done it without their help.`), mdx(\"p\", null, `For those interested, we use both `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `vite-electron-plugin`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `vite-plugin-electron`), `, the former for our main process and the latter for our preload scripts. For the UI we use a plain `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@vitejs/plugin-react`), `. (should we switch to `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@vitejs/plugin-react-swc`), `? Let me know!)`), mdx(\"p\", null, `The switch to Vite also gives us a strong foundation for improvements to performance and UI responsiveness in the future, as well as making it much easier to adopt various ESM based packages. Other than better performance though, you shouldn't notice any difference. If you do, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `Let me know`), `!`), mdx(\"h2\", {\n    \"id\": \"deprecations\"\n  }, `Deprecations`), mdx(\"p\", null, `In this release we are deprecating the Tota11y debug tool. It's a great tool, but it hasn't been maintained for quite a while and its functionality can be found in other tools, such as the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `outline panel`), ` and the other `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/\"\n  }), `Debug tools`), `, which have a much more thorough and up to date set of tests. Tota11y will be removed in Polypane 14.`), mdx(\"h2\", {\n    \"id\": \"what-can-we-do-for-you\"\n  }, `What can we do for you?`), mdx(\"p\", null, `As you've seen in the changelogs for this release and the past few releases, many features have come from Polypane's users. We love getting feedback and one of the best things about having devs as users is that they are `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `very good at feature requests`), `.`), mdx(\"p\", null, `So consider this an open invitation: What is missing from Polypane? What's the one thing we should do that makes Polypane amazing for you? What nit would you just love we fix? `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `Let us know!`), ` 🙏`), mdx(\"h2\", {\n    \"id\": \"get-polypane-131\"\n  }, `Get Polypane 13.1`), 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-1312-changelog\"\n  }, `Polypane 13.1.2 Changelog`), mdx(\"p\", null, `This is a bugfix release.`), 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`), ` Outline panel: non-landmarks are now hidden when \"show warnings\" is turned off`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Command palette can now be opened from View menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live reload: \"temp\" and \"tmp\" folders are now ignored by default`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` More precise reload button rotation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Remove close button from screenshot notification (Thanks Zach!)`)), 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 console from showing a failed sourcemap download warning`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Live CSS: suggestions in dark mode now use the right theme (Thanks Giovanni!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Screenshot file format selection is now correctly shown (Thanks Jay!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Browse panel: Figma now correctly loads again (Thanks Efekahya!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Panel: Switching from devtools to other panels sometimes kept devtools visible`)), mdx(\"h2\", {\n    \"id\": \"polypane-1311-changelog\"\n  }, `Polypane 13.1.1 Changelog`), mdx(\"p\", null, `This is a bugfix release.`), 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`), ` Support for Mate translate extension`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support for Snapfont extension`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Updated Chromium to 110.0.5481.208`)), 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`), ` Zoom option in View menu are now clearer`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Clicking inside panes now closes any open color picker`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console messages now show faster`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Removed extensions now have their address bar icon cleaned up immediately`)), 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`), ` disabling multiple css styles reset Elements panel (Thanks Saif!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Console popups show up again (Thanks Jay!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` issue with Typekit stylesheets (Thanks Seth!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` issue with late-loading styles not being parsed`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent potential crash with console logging deeply nested objects (Thanks Dan!)`)), mdx(\"h2\", {\n    \"id\": \"polypane-131-changelog\"\n  }, `Polypane 13.1 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`), ` Network requests in the Console panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Browse panel now has a unique URL per tab (Thanks Verdi!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Flex and Grid overlays from the Elements Panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` APCA support in the color picker`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Clear cookies and reload option in the reload menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Measure selected text character and word lengths in context menu (Thanks Ryan!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Updated Chromium to 110.0.5481.179`)), 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`), ` Startup time and UI performance improvements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Google SERP design`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Slack card preview design`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Webmanifest and oEmbed are fetched out of process`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Copy CSS Selector or XPath to clipboard`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Show color picker for named colors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Support for CSS nesting without nesting rule (\"&\")`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Non-inherited CSS properties are shown dimmed`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Updated known CSS properties`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Cache handling is now more strict`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Removed whitespace around logo in Share QR code`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` JSON viewer performance`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Rulers: default alignment for rows is now top`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Full mode now also shows a visual warning for disabled JS, CSS and Content Chaos`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Screenshot editor: Font sizes and line widths now use absolute values`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Only show one 'large CSS' warning per URL per session (Thanks Andrew!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console panel: shortcut to clear the console (Thanks Austin!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console panel: New way to filter different types of console messages`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Pane Console indicator: Add a network and debug type, filter types by console panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Added support for new Google Variable Fonts`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Deprecations`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Deprecated`), ` The Tota11y debug tool will be removed in 14.0`)), 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`), ` Use correct theme background color during loading`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` offscreen webviews no longer being captured correctly for overview screenshots (Thanks Nicolaus!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where finding a previous search term would lock up the browser`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent panel from getting larger than the window (Thanks Kenneth!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Scroll sync not working when scrollingElement can't scroll (Thanks Giovanni!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel no longer scrolls the tree to the closing tag`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Browse panel: Replace Avocode with Ceros Inspect`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Clearly disable Extensions button on Getting Started page`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` issue where the element tooltip could show NaN for the contrast ratio`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":9,"tableOfContents":{"items":[{"url":"#elements-panel-updates","title":"Elements panel updates","items":[{"url":"#flex-and-grid-overlays","title":"Flex and Grid overlays"},{"url":"#copy-css-selector-or-xpath-to-clipboard","title":"Copy CSS Selector or XPath to clipboard"},{"url":"#show-color-picker-for-named-colors","title":"Show color picker for named colors"},{"url":"#support-for-css-nesting-without-nesting-rule-","title":"Support for CSS nesting without nesting rule (\"&\")"},{"url":"#non-inherited-css-properties-are-shown-dimmed","title":"Non-inherited CSS properties are shown dimmed"}]},{"url":"#network-requests-in-the-console-panel","title":"Network requests in the console panel","items":[{"url":"#better-level-filters","title":"Better level filters"}]},{"url":"#apca-support-in-the-color-picker","title":"APCA support in the color picker"},{"url":"#meta-panel-updates","title":"Meta panel updates","items":[{"url":"#improved-data-loading","title":"Improved data loading"}]},{"url":"#other-updates","title":"Other updates","items":[{"url":"#browse-panel-with-unique-urls-per-tab","title":"Browse panel with unique URLs per tab"},{"url":"#clear-cookies-and-reload-option-in-the-context-menu","title":"Clear cookies and reload option in the context menu"},{"url":"#measure-selected-text-character-and-word-lengths-in-context-menu","title":"Measure selected text character and word lengths in context menu"},{"url":"#screenshot-annotations-now-have-fixed-sizes","title":"Screenshot annotations now have fixed sizes"}]},{"url":"#upgrading-to-vite","title":"Upgrading to Vite"},{"url":"#deprecations","title":"Deprecations"},{"url":"#what-can-we-do-for-you","title":"What can we do for you?"},{"url":"#get-polypane-131","title":"Get Polypane 13.1"},{"url":"#polypane-1312-changelog","title":"Polypane 13.1.2 Changelog"},{"url":"#polypane-1311-changelog","title":"Polypane 13.1.1 Changelog"},{"url":"#polypane-131-changelog","title":"Polypane 13.1 Changelog"}]},"excerpt":"Polypane 13.1 is here! In this release we retooled our build system from webpack to Vite, which has improved the startup time and UI performance of Polypane by…","frontmatter":{"title":"Polypane 13.1","cover":"/img/mail/icon.svg","date":"2023-03-27","updated":"2023-04-12"},"fields":{"slug":"/blog/polypane-13-1/","date":"2023-03-26T22:00:00.000Z","ogFileName":"polypane-13-1"}}},"pageContext":{"slug":"/blog/polypane-13-1/"}},"staticQueryHashes":["4164364741","425175329"]}