{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-12-introducing-the-command-bar/","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 12: introducing the Command bar\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2022-12-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 12 introduces our new command bar, that you can use to control any part of the app without leaving your keyboard.\nWe also improved the reference image, color picker and screenshot features, added new accessibility checks and implemented\nsupport for proxies. Polypane 12 runs on the latest Chromium, version 108.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"command-bar\"\n  }, `Command bar`), mdx(\"p\", null, `We've wanted to add a command bar for ages, so we're extremely happy to finally have one. It's built on `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://cmdk.paco.me/\"\n  }), `cmdk`), ` where we've added our own improvements `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/pacocoursey/cmdk/pulls?q=author%3AKilian+is%3Apr\"\n  }), `and contributed them back`), `.`), mdx(\"p\", null, `Whether it's adding panes, opening new URLs, navigating to specific panels or even quickly copying lorem ipsum, a UUID or your own\nIP address, or, uhm, shoot confetti.`), mdx(\"video\", {\n    src: confetti,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `There is a ton of stuff to explore in the new Command bar. Open it by pressing `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    letter: \"k\",\n    mdxType: \"ShortCutDisplay\"\n  }), `. Let us know what you think, and what more you want the command bar to do!`), mdx(\"h2\", {\n    \"id\": \"reference-image\"\n  }, `Reference image`), mdx(\"p\", null, `For the reference image we added a quick way to toggle the image on and off without needing to change its opacity, and a new\noverlay mode that doesn't invert colors.`), mdx(\"p\", null, `We now have two overlay modes: difference and invert. Difference blends the image and website together and shows the difference. Everything that's the same is black, everything that's not is highlighted.`), mdx(\"p\", null, `Invert turns the image into a negative. When overlaying it on the website, everything that's the same cancels out to grey, and the differences are shown such that the website retains its original colors,\nand the image is inverted.`), mdx(\"video\", {\n    src: referenceimage,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `The benefit of the invert mode is that the website colors are the same, so you can see which part of the difference is coming from the website, and which one is coming from the overlaid image. Thanks Quang and Vladimir for suggesting this feature!`), mdx(\"h2\", {\n    \"id\": \"screenshots\"\n  }, `Screenshots`), mdx(\"p\", null, `You can now set a delay before taking a screenshot, and add white-space around the image while editing so you have more space for annotations.`), mdx(\"h3\", {\n    \"id\": \"delays\"\n  }, `Delays`), mdx(\"p\", null, `Before making a screenshot you can set a delay of 5 or 10 seconds. This lets you get the page in order by hovering, inspecting or clicking before the screenshot is actually taken.`), mdx(\"p\", null, `During the delay a countdown timer is shown:`), mdx(\"video\", {\n    src: delay,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `We like to use this to make screenshots of our node tooltips: set a delay, press `, mdx(ShortCutDisplay, {\n    altKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` to inspect and all its info shows up right in the screenshot ready to be shared.\nOf course, it's useful for any hover-related or timing dependent UI!`), mdx(\"h3\", {\n    \"id\": \"white-space\"\n  }, `White space`), mdx(\"p\", null, `We now support adding additional space around your image by zooming out in the crop feature of our screenshot editor.`), mdx(\"video\", {\n    src: crop,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `This\nlets you add a border around your image where you can put annotations before saving and sending it to your colleagues or customers!`), mdx(\"h2\", {\n    \"id\": \"proxy-support\"\n  }, `Proxy support`), mdx(\"p\", null, `If you require a proxy to access pages and you can't set that at an operating system level, Polypane now supports\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"\"\n  }), `configuring a proxy`), ` with all the options that `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.electronjs.org/docs/latest/api/session#sessetproxyconfig\"\n  }), `Electron proxies`), ` have.`), mdx(\"h2\", {\n    \"id\": \"easily-get-links-to-fragment-identifiers\"\n  }, `Easily get links to fragment identifiers`), mdx(\"p\", null, `When right-clicking any element that has an `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `id`), ` attribute, you can now copy the link to their fragment identifiers.\nLike copying regular links, you can copy the URL, or copy it as markdown. The markdown link will use the text inside the element as the name:`), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"text\"\n  }, mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-text\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-text\"\n  }), `[Easily get links to fragment identifiers](https://polypane.app/blog/polypane-12-the-one-with-the-command-bar/#easily-get-links-to-fragment-identifiers)`))), mdx(\"p\", null, `We found ourselves often wanting to link quickly to different sections of our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/\"\n  }), `docs`), ` and with this it's just a right-click and we're good to go.`), mdx(\"h2\", {\n    \"id\": \"meta-panel\"\n  }, `Meta panel`), mdx(\"p\", null, `Along with updates to the Slack and Discord previews made for Polypane 12, we now show the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `security.txt`), ` file when available.`), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `Security.txt`), ` is a new standard, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `robots.txt`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `humans.txt`), ` (which we also show) that lists information to allow\nsecurity researchers to easily report security vulnerabilities. You can learn more about it at `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://securitytxt.org/\"\n  }), `securitytxt.org`)), mdx(\"img\", {\n    src: security,\n    className: \"imgshadow\",\n    alt: \"contents of the security.txt for securitytxt.org.\"\n  }), mdx(\"p\", null, `Thanks Paul for suggesting this feature!`), mdx(\"h2\", {\n    \"id\": \"outline-panel\"\n  }, `Outline panel`), mdx(\"p\", null, `We've added new functionality to the various lists in the outline panel, the biggest update being the Landmarks panel.`), mdx(\"h3\", {\n    \"id\": \"landmarks\"\n  }, `Landmarks`), mdx(\"p\", null, `Some elements are landmarks when they're used at the top level, like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `header`), `, but not when they're used in other landmarks.\nLikewise, a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `section`), ` can be a landmark but not if it doesn't have a label. Hidden elements are also taken out of the landmarks list.`), mdx(\"p\", null, `Up until Polypane 11, those not-landmark elements were simply not displayed in the landmark list. With Polypane 12, we're\nnow showing those elements and explain why they're not landmarks. This helps you debug situations where you expect something to be\nin the landmarks structure but it isn't.`), mdx(\"img\", {\n    src: landmarks,\n    className: \"imgshadow\",\n    alt: \"Landmark overview with two items that have a warning icon to indicate they're not landmarks\"\n  }), mdx(\"p\", null, `If you want to learn more about how these landmark rules work exactly, check out `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.htmhell.dev/adventcalendar/2022/4/\"\n  }), `landmarks and where to put them`), `, which Kilian recently wrote\nfor the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.htmhell.dev/adventcalendar/\"\n  }), `HTMHell advent calendar`), `.`), mdx(\"h3\", {\n    \"id\": \"images\"\n  }, `Images`), mdx(\"p\", null, `The `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `src`), ` is a required attribute, so if an image element doesn't have one, it doesn't display an image right? Turns out\nwe made the wrong assumption here, since if it does have an `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `srcset`), ` for example, browsers will still find a way to show\nan image on screen. Browsers are such forgiving beasts.`), mdx(\"p\", null, `So the Polypane outline panel now also happily displays these, albeit with a warning about that missing `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `src`), ` attribute, since it's still required. Thanks Eric for helping us find this issue!`), mdx(\"h3\", {\n    \"id\": \"focus-order\"\n  }, `Focus order`), mdx(\"p\", null, `We improved the focus order in two ways: we now more accurately list all focusable elements, including links in\n`, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `summary`), ` elements (which themselves are focusable too) as well as `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `iframe`), `s. This will make the list more accurate.`), mdx(\"p\", null, `Secondly, we improved our algoritm to determine if elements had a logical focus order. Previously, it compared the center of two elements, but we now use the\ntop left corner instead. The result is that Polypane is better at assessing what a \"logical\" focus order is.`), mdx(\"h3\", {\n    \"id\": \"links\"\n  }, `Links`), mdx(\"p\", null, `For links, we now show the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hreflang`), ` attribute value when available.`), mdx(\"h2\", {\n    \"id\": \"color-picker\"\n  }, `Color picker`), mdx(\"p\", null, `The color picker will now switch to a set of icons when you're testing for non-text contrast.`), mdx(\"img\", {\n    src: colorpicker1,\n    className: \"imgshadow\",\n    alt: \"color picker with icon example\"\n  }), mdx(\"p\", null, `You can now switch between AA and AAA levels to determine if something has enough contrast or not. This paves the way for APCA to be included in the future.`), mdx(\"p\", null, `Lastly, when exporting a color swatch screenshot, we now include the suggestion in the file name as well.`), mdx(\"h2\", {\n    \"id\": \"lang-emulation\"\n  }, `Lang emulation`), mdx(\"img\", {\n    src: pagelang,\n    className: \"imgshadow\",\n    alt: \"new Page Language option in Emulation popup\",\n    style: {\n      float: 'right',\n      marginLeft: '1rem',\n      maxWidth: '60%'\n    }\n  }), mdx(\"p\", null, `The Emulations popup in Polypane already let you quickly change the direction of the page with the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `dir`), ` attribute, and you\ncan now also quickly change the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `lang`), ` of a page from the same UI.`), mdx(\"p\", null, `This is different from the `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `browser locale`), ` that you can also set in the same popover. That's used to send along with the\nrequest headers and tells your JavaScript which languages the `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `browser`), ` understands, while the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `lang`), ` attribute determines\nwhat language the page is written in. You can also find the page language in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `meta panel`), ` under \"language\". Thanks to Daniel for suggesting this feature.`), mdx(\"h2\", {\n    \"id\": \"click-outside-support\"\n  }, `Click outside support`), mdx(\"p\", null, `Polypane can now also sync \"click outside\" style interactions, where clicking outside an popup dismisses it. Because this\nclick doesn't happen on an interactive element previous versions didn't sync it.`), mdx(\"video\", {\n    src: clickoutside,\n    controls: true,\n    muted: true,\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"hiding-the-main-menu-on-linux\"\n  }, `Hiding the main menu on Linux.`), mdx(\"p\", null, `On Windows, the menu is integrated in the header and on macOS the menu sits at the top of the screen. On linux however,\na native menu is rendered wherever the OS determines it should be.`), mdx(\"p\", null, `If that happens to be at the top of the app (as opposed to in a global menu, which I recommend to everyone) that doesn't look great.\nSo if you're on Linux you can now show and hide the menu with `, mdx(ShortCutDisplay, {\n    altKey: true,\n    letter: \"m\",\n    mdxType: \"ShortCutDisplay\"\n  }), `. Thanks Philipp for requesting this feature!`), mdx(\"h2\", {\n    \"id\": \"chromium-108\"\n  }, `Chromium 108`), mdx(\"p\", null, `We now run on Chromium 108.0.5359.62 which supports new viewport size units (more on that in a future post). We've also\nenabled the flag that lets you use the new lh (for line-height) unit and Polypane can now animate `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `grid-template`), `.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-12\"\n  }, `Get Polypane 12`), 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`), `.`)), mdx(\"h2\", {\n    \"id\": \"polypane-1201-changelog\"\n  }, `Polypane 12.0.1 Changelog`), mdx(\"p\", null, `Bugfix to solve an issue with the Next.js devserver not loading a site properly.`), 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`), ` Add support for the `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `::slotted()`), ` CSS selector`)), 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`), ` Issue that prevented Next.js dev server from loading`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent removal of trailing slashes on URLs`)), mdx(\"h2\", {\n    \"id\": \"polypane-12-changelog\"\n  }, `Polypane 12 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`), ` Command bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Inverted reference images (Thanks Quang and Vladimir!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Delayed screenshots (Thanks Andrew!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Emulate page language (Thanks Daniel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Proxy support (Thanks Brad!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Security.txt support (Thanks Paul!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Right-click elements with an ID to copy url to document fragment`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Allow hiding the main menu on Linux (Thanks Philipp!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Ultrawide device preset`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Chromium 108.0.5359.62`)), 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`), ` Updated list of supported Google Fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Landmarks now show elements taken out of the landmark tree`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: show warning for images without `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `src`), ` attribute (Thanks Eric!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Links show the `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `hreflang`), ` value if available`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel Focus order: Offsets now test from the top left of element instead of center`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel Focus order: Links inside summary elements and iframes are now correctly detected if focusable`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta Panel: Improved Slack and Discord previews`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Screenshots: Now support adding white space around screenshots (Thanks Julian!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Pressing `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `?`), ` now opens shortcut overview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Support for click-outside-to-close interactions`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Wording in License flow (Thanks Jim!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` QR Code: Show IP or full URL to copy`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Newly added panes using `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `cmd n`), ` now get added to the end`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color picker: When testing non-text contrast, the preview now shows icons`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color picker: Suggested color is added to file name suggestion`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color picker: You can switch between AA and AAA Levels`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Custom Headers UI more clearly shows applied headers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Devtools extensions: Support CSS Feature Toggles extension`)), 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 ellipsis from being shown in the wrong instances in Twitter preview (Thanks Charlie!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Overflow issue for long classnames in node tooltip`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Alignment issue in collapsed pane headers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Support for click-outside-to-close interactions`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Load new Google Variable Fonts correctly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Active dot for emulation in Full mode moved during deactivation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Empty workspace message animates out smoothly again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue with synced focus after re-opened main window on macOS`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Navigating the live/auto reload options could clear out settings (Thanks Carlos!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Inconsistent indentation in debug tools (Thanks Vladimir!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Different text size wasn't applied in detached panel (Thanks Mac!)`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":7,"tableOfContents":{"items":[{"url":"#command-bar","title":"Command bar"},{"url":"#reference-image","title":"Reference image"},{"url":"#screenshots","title":"Screenshots","items":[{"url":"#delays","title":"Delays"},{"url":"#white-space","title":"White space"}]},{"url":"#proxy-support","title":"Proxy support"},{"url":"#easily-get-links-to-fragment-identifiers","title":"Easily get links to fragment identifiers"},{"url":"#meta-panel","title":"Meta panel"},{"url":"#outline-panel","title":"Outline panel","items":[{"url":"#landmarks","title":"Landmarks"},{"url":"#images","title":"Images"},{"url":"#focus-order","title":"Focus order"},{"url":"#links","title":"Links"}]},{"url":"#color-picker","title":"Color picker"},{"url":"#lang-emulation","title":"Lang emulation"},{"url":"#click-outside-support","title":"Click outside support"},{"url":"#hiding-the-main-menu-on-linux","title":"Hiding the main menu on Linux."},{"url":"#chromium-108","title":"Chromium 108"},{"url":"#get-polypane-12","title":"Get Polypane 12"},{"url":"#polypane-1201-changelog","title":"Polypane 12.0.1 Changelog"},{"url":"#polypane-12-changelog","title":"Polypane 12 Changelog"}]},"excerpt":"Polypane 12 introduces our new command bar, that you can use to control any part of the app without leaving your keyboard.\nWe also improved the reference image…","frontmatter":{"title":"Polypane 12: introducing the Command bar","cover":"/img/mail/icon.svg","date":"2022-12-12","updated":null},"fields":{"slug":"/blog/polypane-12-introducing-the-command-bar/","date":"2022-12-11T23:00:00.000Z","ogFileName":"polypane-12-introducing-the-command-bar"}}},"pageContext":{"slug":"/blog/polypane-12-introducing-the-command-bar/"}},"staticQueryHashes":["4164364741","425175329"]}