{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-6-peek-webvitals-new-simulators-chromium-91/","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 6: Peek, Webvitals, new simulators & Chromium 91\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2021-05-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 6 is now available! It's another packed release with new features, simulators, performance improvements and a new version of Chromium powering it all. Read on to learn about all the cool new things we have for you.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"polypane-is-two-years-old-🥳\"\n  }, `Polypane is two years old 🥳`), mdx(\"p\", null, `Polypane launched two years ago on May 14th. 32 releases, 18 Chromium versions and 5 major Polypane versions further we're now at Polypane 6.`), mdx(\"p\", null, `It's insane to look back at the now 32 releases we made. Polypane has truly become something I couldn't have imagined back then and it's all thanks to your support and suggestions. So thank you, and on to the next 2, 5, 10 years of Polypane!`), mdx(\"h2\", {\n    \"id\": \"polypane-peek-the-fastest-way-to-inspect-elements-ever\"\n  }, `Polypane peek: the fastest way to inspect elements ever`), mdx(\"p\", null, `Polypane peek is a deceptively simple feature, but one that will transform how you use the browser.`), mdx(\"p\", null, `Whenever you press `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), ` (or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `option`), `), Polypane will highlight the element under your cursor and show an tooltip with a bunch of info.`), mdx(\"video\", {\n    src: \"/blogs/polypane-6/polypane-peek.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Find out font details, margin sizes and other element info with a single button press. Once you get used to it there's no going back.`), mdx(\"p\", null, `And if you do want to dig in, click the element and you're inspecting it in the Polypane element inspector, same as ever.`), mdx(\"h2\", {\n    \"id\": \"web-vitals-overview\"\n  }, `Web vitals overview`), mdx(\"p\", null, `Web vitals are becoming an important part of website performance, so we've implemented web vitals monitoring for all panes.\nTurn the web vitals overview on by going to the application menu in the top right and checking \"Show Webvitals Status\".`), mdx(\"img\", {\n    alt: \"Webvitals for panes overview\",\n    src: \"/blogs/polypane-6/webvitals.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `A green dot means every Web Vital scores \"Good\", an orange rectangle means that a web vital needs improvement (and we'll show which) and lastly a red triangle means that this page in this pane scores \"Poor\" for a specific web vital.`), mdx(\"p\", null, `Hover over the button to get an overview of the web vitals and your score. This is Polypane's first foray into performance tooling and notifications, and we're eager to hear what you think and what you want to see next!`), mdx(\"h2\", {\n    \"id\": \"astigmatism-simulators\"\n  }, `Astigmatism simulators`), mdx(\"p\", null, `Astigmatism is most easily explained as a blurring and ghosting of the vision, but only in a single direction. According to Wikipedia, between 30% and 60% of adults in Europe and Asia have some form of astigmatism, from mild to severe.`), mdx(\"p\", null, `When we learned about it we thought it would be a good addition to our growing list of simulators, so we researched how astigmatism works and created simulators that map as close as we could to how people experience astigmatism.`), mdx(\"img\", {\n    alt: \"Screenshot of astigmatism overview\",\n    src: \"/doc-img/overlays/astigmatism.jpg\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `We've added two Astigmatism simulators to our Debug tools: horizontal and vertical astigmatism, which emulate the blurring in a horizontal and vertical direction respectively.`), mdx(\"h2\", {\n    \"id\": \"meta-panel-improvements\"\n  }, `Meta panel improvements`), mdx(\"p\", null, `All meta values in the Meta panel now come with a copy button that copies the fully formed HTML string for you. For missing values it copies a template for you to fill in, or will fill it in for you with the right content value.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `This follows our philosophy of not just pointing out what's wrong, but also how to improve it.`), ` It might be a small feature, but we spend quite some time thinking about the right defaults.`), mdx(\"h2\", {\n    \"id\": \"chromium-91\"\n  }, `Chromium 91`), mdx(\"p\", null, `Polypane now runs Chromium 91, with support for color-gamut emulation, a huge performance increase for devtools and support for container queries.`), mdx(\"p\", null, `Polypane has experimental support turned on for a number of new features like @scroll-timeline, container queries and prefers-reduced-data. This way you get to try out and experiment with these features before they become generally available in browsers. For example, here's a demo using @scroll-timeline to change the background color as you scroll, using only CSS:`), mdx(\"video\", {\n    src: \"/blogs/polypane-6/scroll.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"bug-fixes\"\n  }, `Bug fixes`), mdx(\"p\", null, `Unfortunately, bugs happen. In Polypane 6 we've solved a few big ones. We're really grateful to everyone that helped find and debug these issues with us.`), mdx(\"p\", null, `If any of these held you back from trying Polypane and you want to give it another go, please reach out and we'll restart your trial.`), mdx(\"h3\", {\n    \"id\": \"unfocusable-devtools-on-mac\"\n  }, `Unfocusable devtools on Mac`), mdx(\"p\", null, `Refocusing docked devtools on Mac didn't always work or if it did, keyboard input wouldn't be accepted. The underlying bug is now fixed across all Electron apps after we coordinated with the Electron team.`), mdx(\"h3\", {\n    \"id\": \"browser-extension-on-windows\"\n  }, `Browser extension on Windows`), mdx(\"p\", null, `The browser extension (that lets you open links from your browser straight into Polypane) did not work with Polypane 5.1 on Windows. This happened due to a change in the way we handle command line flags that didn't account for the fact that Windows treats them the same as \"open requests\" from other applications.`), mdx(\"p\", null, `Both the CLI options and the browser extension now work again.`), mdx(\"h3\", {\n    \"id\": \"post-calls-being-overwritten-by-gets\"\n  }, `POST calls being overwritten by GETs`), mdx(\"p\", null, `The navigation sync feature in Polypane gave panes a timeout before forcing a new URL, and this didn't account for POST requests that took longer than a few seconds.`), mdx(\"p\", null, `Polypane now keeps track of POST requests and will wait until they are done before checking if navigation sync is required.`), mdx(\"h3\", {\n    \"id\": \"style-caching-in-the-elements-panel\"\n  }, `Style caching in the Elements Panel`), mdx(\"p\", null, `For performance reasons we only parsed the styles for a pane during load, so if you resized a pane afterwards and new styling would be applied due to media queries, those wouldn't be shown until you reloaded.`), mdx(\"p\", null, `Thanks to the performance improvements in Chromium 91 and rewritten logic for style parsing this is now fast enough to get updated styles on-demand, even for sites with significant amounts of CSS.`), mdx(\"h2\", {\n    \"id\": \"other-updates\"\n  }, `Other updates`), mdx(\"p\", null, `Each Polypane release comes with large updates but also with smaller features. Here's some of the smaller features, but be sure to scroll through the full changelog to find all updates.`), mdx(\"h3\", {\n    \"id\": \"updated-tooltip\"\n  }, `Updated tooltip`), mdx(\"p\", null, `Now that the tooltip and element highlighter is so easy to activate, we've also improved the tooltip. For one, it will now stay in view much better than previous versions, taking into account all sides of the pane.`), mdx(\"img\", {\n    alt: \"New tooltip design\",\n    src: \"/blogs/polypane-6/tooltip.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `As space allows, we show the dimensions right inside the highlighted content, padding and margin areas. Inside the tooltip, we've added the intrinsic size for images and videos, so you can quickly check if the right version is being used, and we streamlined the tooltip when the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), ` attribute and accessible name are the same.`), mdx(\"h3\", {\n    \"id\": \"class-suggestions-in-the-elements-panel\"\n  }, `Class suggestions in the Elements panel`), mdx(\"p\", null, `When you edit classes in the Elements panel, Polypane suggests classes from your stylesheets and the page. Select classes with the arrow keys or mouse, and press enter or click to add them.`), mdx(\"video\", {\n    src: \"/blogs/polypane-6/classeditor.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\": \"css-style-properties-and-html-attributes-suggestions-in-the-elements-panel\"\n  }, `CSS Style properties and HTML attributes suggestions in the Elements panel`), mdx(\"p\", null, `As you add CSS style properties and HTML attributes the Elements panel will suggest appropriate values for you: all the CSS style properties supported by Chromium and the HTML attributes that are appropriate for the current element.`), mdx(\"h3\", {\n    \"id\": \"support-for-permission-requests\"\n  }, `Support for permission requests`), mdx(\"p\", null, `Polypane now shows permission requests, like for notification, audio and location, that you can accept or deny per URL. You can choose to remember this setting.`), mdx(\"img\", {\n    alt: \"Permission request\",\n    src: \"/blogs/polypane-6/permission.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"web-components-update\"\n  }, `Web components update`), mdx(\"p\", null, `In 5.1.0 we added support for web components across our various Panels, and in 6.0.0 we're expanding that support also to our syncing functionality. For open web components, hovers, clicks, input and keyboard events are now synced across all panes.`), mdx(\"h3\", {\n    \"id\": \"re-applying-debug-tools\"\n  }, `Re-applying debug tools`), mdx(\"p\", null, `There's now a re-apply button in the debug tools popover so you can quickly recheck for example color contrasts or overflowing issues as you work through them and the page auto-updates.`), mdx(\"p\", null, `We really needed this ourselves and its a big quality-of-life feature we hope you'll enjoy.`), mdx(\"h3\", {\n    \"id\": \"easily-scroll-in-the-horizontal-and-vertical-layout\"\n  }, `Easily scroll in the horizontal and vertical layout`), mdx(\"p\", null, `You can now use the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `home`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `end`), `, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `page up`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `page down`), ` keys to quickly scroll through the horizontal and vertical layouts rather than using your mouse, the scrollbar, `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `spacebar`), ` + click to drag or scroll wheel/two-finger scroll.`), mdx(\"h3\", {\n    \"id\": \"live-css-panel-now-gives-smarter-suggestions\"\n  }, `Live CSS Panel now gives smarter suggestions`), mdx(\"p\", null, `The element selector in the Live CSS panel lets you quickly get a list of CSS selectors to use to target the selected element. But some elements simply don't have a lot of classes or associated CSS selectors. To still give useful suggestions here Polypane now also takes parent elements into account when it can't find enough element-specific selectors.`), mdx(\"h3\", {\n    \"id\": \"best-practices-in-accessibility-panel\"\n  }, `Best practices in Accessibility panel`), mdx(\"p\", null, `We now split out best practices in the Accessibility panel for when you only want to check for WCAG issues.`), mdx(\"h3\", {\n    \"id\": \"spell-checking-support\"\n  }, `Spell checking support`), mdx(\"p\", null, `The \"Edit content\" debug tool now has added spell-checking support. Spelling mistakes will be highlighted, and you can right-click them to see a list of suggestions or add the current word to your dictionary. Spell check works in all the languages your current operating system supports.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `Fun fact: we implemented this feature after an automated spam bot emailed us we misspelled the word \"woah\" on our website. Obviously, we did no misspell the word \"Woah\".`)), mdx(\"h2\", {\n    \"id\": \"get-polypane-6\"\n  }, `Get Polypane 6`), mdx(\"p\", null, `Polypane will automatically update on Mac and Windows. Linux users need to download the new version from\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` and if you're on Mac and Windows but don't want to wait on the update popup, find\nyour download there as well.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a free 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Get it here`), `.`)), mdx(\"h2\", {\n    \"id\": \"full-changelog\"\n  }, `Full 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`), ` Polypane peek: Press `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), ` to get the info for the element under the cursor`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support for permission requests`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Webvitals overview per pane`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Sync events for open webcomponents`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Astigmatism Simulators`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Suggested classes, CSS properties and HTML attributes in Element panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Copy Meta attributes and suggestions from Meta panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Color gamut emulation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Container Queries support`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Reload debug tool options`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Home/End, PageUp/PageDown shortcuts for horizontal and vertical layouts (Thanks Jens!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Tooltip for images and videos now show intrinsic size`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Tooltip and Element panel now show aspect ratio`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Live CSS panel generates selectors based on parent elements when needed`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Spell checking in the Edit Content Debug Tool`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Update to Chromium 91`)), 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  }, `Improvement`), ` Faster app launch`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Faster page loads`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Show dimensions in Element overlay`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Show Margin and padding sizes in the Element overlay`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Edit Panel tabs are now in more logical order`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` The 'default' workspace panel is now the first selected one`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Support for SVG elements in Console`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Booleans are styled correctly in the Console`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Updated ruleset for Accessibility panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Accessibility panel shows optional best practices (Thanks Erik!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Inspect SVG elements from the Accessibility Panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Alignments improved in pane headers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Prevent additional fetch of document happening on load`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Added explanations to pane options`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Console popups are now off by default`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Console popups now filter out console.debug messages by default`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Split debug messages in Console panel, hide by default`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Improved hover performance`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Cleaner license flow`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Prevent pages from reloading during a POST request (Thanks Urs!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Show a clearer warning when `, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://polypane.app/docs/other-tools/#using-polypane-with-browsersync\"\n  }), `Polypane detects browser-sync`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Tooltip will now stay in view for left and bottom bounds`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Emulation toggles now have an info tooltip to explain their function`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Show a warning for links where a `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `rel`), ` is missing but needed`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Support data urls for favicons and meta panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Updated list of Google Fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Updated Discord preview rendering`)), 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 focus from being removed from pages during load`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent devtools on mac from becoming unfocusable`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Launching Polypane from browser extension on Windows now works again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent Element panel crash for element with multiple child text nodes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent styling overwrites for Polypane tooltip`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Bug where focus pane would remain zoomed in`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Bug where zoom would reset to 100 upon clearing`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Closing the app on Mac didn't work with active Live Reloading (Thanks Mike!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Zoom to fit now works on Windows again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Resize handle was overlapping header menus`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Slack preview no longer crashes when site contains errors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Polypane no longer tries to test mailto and tel links`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Overview screenshot now matches the current browser theme`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent stale styling overview for resized panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` 'Paste and go' context menu (Thanks John!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Sometimes overview screenshot used the wrong layout`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":8,"tableOfContents":{"items":[{"url":"#polypane-is-two-years-old-🥳","title":"Polypane is two years old 🥳"},{"url":"#polypane-peek-the-fastest-way-to-inspect-elements-ever","title":"Polypane peek: the fastest way to inspect elements ever"},{"url":"#web-vitals-overview","title":"Web vitals overview"},{"url":"#astigmatism-simulators","title":"Astigmatism simulators"},{"url":"#meta-panel-improvements","title":"Meta panel improvements"},{"url":"#chromium-91","title":"Chromium 91"},{"url":"#bug-fixes","title":"Bug fixes","items":[{"url":"#unfocusable-devtools-on-mac","title":"Unfocusable devtools on Mac"},{"url":"#browser-extension-on-windows","title":"Browser extension on Windows"},{"url":"#post-calls-being-overwritten-by-gets","title":"POST calls being overwritten by GETs"},{"url":"#style-caching-in-the-elements-panel","title":"Style caching in the Elements Panel"}]},{"url":"#other-updates","title":"Other updates","items":[{"url":"#updated-tooltip","title":"Updated tooltip"},{"url":"#class-suggestions-in-the-elements-panel","title":"Class suggestions in the Elements panel"},{"url":"#css-style-properties-and-html-attributes-suggestions-in-the-elements-panel","title":"CSS Style properties and HTML attributes suggestions in the Elements panel"},{"url":"#support-for-permission-requests","title":"Support for permission requests"},{"url":"#web-components-update","title":"Web components update"},{"url":"#re-applying-debug-tools","title":"Re-applying debug tools"},{"url":"#easily-scroll-in-the-horizontal-and-vertical-layout","title":"Easily scroll in the horizontal and vertical layout"},{"url":"#live-css-panel-now-gives-smarter-suggestions","title":"Live CSS Panel now gives smarter suggestions"},{"url":"#best-practices-in-accessibility-panel","title":"Best practices in Accessibility panel"},{"url":"#spell-checking-support","title":"Spell checking support"}]},{"url":"#get-polypane-6","title":"Get Polypane 6"},{"url":"#full-changelog","title":"Full Changelog"}]},"excerpt":"Polypane 6 is now available! It's another packed release with new features, simulators, performance improvements and a new version of Chromium powering it all…","frontmatter":{"title":"Polypane 6: Peek, Webvitals, new simulators & Chromium 91","cover":"/img/mail/icon.svg","date":"2021-05-12","updated":null},"fields":{"slug":"/blog/polypane-6-peek-webvitals-new-simulators-chromium-91/","date":"2021-05-11T22:00:00.000Z","ogFileName":"polypane-6-peek-webvitals-new-simulators-chromium-91"}}},"pageContext":{"slug":"/blog/polypane-6-peek-webvitals-new-simulators-chromium-91/"}},"staticQueryHashes":["4164364741","425175329"]}