{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-27-1-expanding-portal/","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 27.1: Expanding Portal\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2025-12-17\",\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 27.1 is here and Polypane Portal has expanded! The Polypane console will now show the console messages from all connected browsers so you get instant feedback on errors and your own logs. Snippets are now also injected and ran in connected portals. This combination makes Polypane's Portal an even more powerful tool for testing and debugging across multiple browser and real devices. The elements panel and projects have also received a lot of quality of life improvements in this release.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"portal\"\n  }, `Portal`), mdx(\"p\", null, `Polypane `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/portal/\"\n  }), `Portal`), ` is a powerful way to test and debug your site across browsers and devices by making your localhost available to the entire network or even the entire internet with zero setup. Once connected, browsers or devices are kept in sync with Polypane so as you scroll, type, inspect and edit in Polypane, your actions are mirrored in all connected browsers. It's pretty awesome.`), mdx(\"h3\", {\n    \"id\": \"console-messages-in-portal\"\n  }, `Console messages in Portal`), mdx(\"p\", null, `In 27.1 all connected browsers now send their console messages back to Polypane where they're shown in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/console/\"\n  }), `Polypane Console`), `. This means you can now see errors and logs from all connected browsers without needing to open devtools on each device or using other convoluted methods.`), mdx(\"video\", {\n    src: consolepp271,\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, `Code inputted in the Polypane console is also ran in all connected browsers, so inspecting and debugging is now easier than ever.`), mdx(\"h3\", {\n    \"id\": \"snippets-in-portal\"\n  }, `Snippets in Portal`), mdx(\"p\", null, `When Portal is connected you can opt to run `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/snippets/\"\n  }), `snippets`), ` in all connected browsers. Whether you have specific CSS debugging snippets, JS utilities you want to have available on page load or specific JS functions you run through the Snippets panel, all of those can now be ran in your Portal connected browsers too.`), mdx(\"video\", {\n    src: snippetspp271,\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(\"h2\", {\n    \"id\": \"elements-panel\"\n  }, `Elements panel`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/elements-panel/\"\n  }), `Elements panel`), ` has received quite a few improvements in this release to make it easier to use and more powerful.`), mdx(\"h3\", {\n    \"id\": \"arrow-key-navigation\"\n  }, `Arrow key navigation`), mdx(\"p\", null, `When selecting an element in the DOM tree, you can now use the arrow keys to navigate around the tree:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(ShortCutDisplay, {\n    letter: \"Up\",\n    mdxType: \"ShortCutDisplay\"\n  }), \"/\", mdx(ShortCutDisplay, {\n    letter: \"Down\",\n    mdxType: \"ShortCutDisplay\"\n  }), \" arrows move to the previous/next line.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(ShortCutDisplay, {\n    letter: \"Left\",\n    mdxType: \"ShortCutDisplay\"\n  }), \" arrow collapses the current node or moves to the parent if already collapsed.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(ShortCutDisplay, {\n    letter: \"Right\",\n    mdxType: \"ShortCutDisplay\"\n  }), \" arrow expands the current node or moves to the first child if already expanded.\")), mdx(\"p\", null, `This is a really quick way to navigate deeply nested trees without needing to click around a lot, and an easy way to quickly move back up the DOM.`), mdx(\"p\", null, `When the DOM tree has focus, you can also press `, mdx(ShortCutDisplay, {\n    letter: \"h\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to hide the currently selected element.`), mdx(\"h3\", {\n    \"id\": \"constructed-stylesheet-editing\"\n  }, `Constructed stylesheet editing`), mdx(\"p\", null, `You can now edit constructed stylesheets in the elements panel. These are stylesheets that are added to a document or web component root through JavaScript using the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `adoptedStyleSheets`), ` API.`), mdx(\"img\", {\n    src: constructedstylesheet,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"Styles coming from a constructed stylesheet.\"\n  }), mdx(\"p\", null, `Polypane had support for this in the Elements panel before, but the API for constructed stylesheets has changed (they're no longer available on the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `shadowRoot`), `) and the implementation had to be updated. You can now again view and edit styles set through constructed stylesheets.`), mdx(\"h3\", {\n    \"id\": \"collapsing-unused-custom-properties\"\n  }, `Collapsing unused custom properties`), mdx(\"p\", null, `A common pattern has emerged where all custom properties are defined on `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:root`), ` or `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `html`), ` to make them available throughout the app. Because of the way the elements panel collects styles, this means that each inspected element had dozens, if not hundreds of custom properties to be rendered in the elements panel.`), mdx(\"p\", null, `Because these custom properties often have a color widget, rendering them is relatively expensive and this had a performance impact on the elements panel.`), mdx(\"img\", {\n    src: unusedcss,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"A badge in the style panel reading 'show 109 unused custom CSS properties'.\"\n  }), mdx(\"p\", null, `To improve performance, Polypane now initially only renders the custom properties that are used by the selected element and hides the rest behind a \"Show unused custom properties\" button. Clicking that button will expand all custom properties so you can inspect and edit them as needed. All other places where Polypane shows custom properties, like in the value suggestions, will continue to list all of them for easy access.`), mdx(\"p\", null, `This performance improvement was recently `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://bsky.app/profile/webdevs.firefox.com/post/3m7rst5tscw27\"\n  }), `added by the Firefox' DevTools team`), ` and it was such a good idea that I decided to implement it in Polypane as well.`), mdx(\"h3\", {\n    \"id\": \"filtering-computed-styles\"\n  }, `Filtering computed styles`), mdx(\"p\", null, `The computed styles overview now has a filter input at the top so you can quickly find the property you're looking for without needing to scroll through the entire list. Filter on both property names and values.`), mdx(\"img\", {\n    src: computedfilter,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"Computed styles filtered down to things that just say color\"\n  }), mdx(\"h3\", {\n    \"id\": \"hold-cmdctrl-to-hide-element-info\"\n  }, `Hold cmd/ctrl to hide element info`), mdx(\"p\", null, `When hovering elements in the DOM tree, Polypane shows a `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/polypane-peek/\"\n  }), `tooltip with information`), ` about the element like its dimensions, font, contrast, accessible name and role.`), mdx(\"img\", {\n    src: cmdtooltip,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"Highlighted element without info popup\"\n  }), mdx(\"p\", null, `You can now hold the `, mdx(ShortCutDisplay, {\n    cmdKey: true,\n    mdxType: \"ShortCutDisplay\"\n  }), ` key while hovering to show the margin, padding etc while hide the info panel. so nothing is obscuring parts of the page.`), mdx(\"h2\", {\n    \"id\": \"projects\"\n  }, `Projects`), mdx(\"p\", null, `I'm overwhelmed by the positive response to Polypane Projects! It's great to see so many people using this powerful way to manage their work in Polypane, and I immediately went to work to make Projects even better based on your feedback.`), mdx(\"h3\", {\n    \"id\": \"bookmarks-filtering-and-navigation\"\n  }, `Bookmarks filtering and navigation`), mdx(\"p\", null, `Opening the bookmarks panel now focuses a filter input so you can quickly find the bookmark you're looking for. As you type, the bookmarks list is filtered to only show matching bookmarks.`), mdx(\"img\", {\n    src: bookmarkfilter,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"A badge in the style panel reading 'show 109 unused custom CSS properties'.\"\n  }), mdx(\"p\", null, `You can also now navigate the bookmarks list using the `, mdx(ShortCutDisplay, {\n    letter: \"Up\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` and `, mdx(ShortCutDisplay, {\n    letter: \"Down\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` arrow keys to move through the list and `, mdx(ShortCutDisplay, {\n    letter: \"Enter\",\n    mdxType: \"ShortCutDisplay\"\n  }), ` to open the selected bookmark in a new tab.`), mdx(\"h3\", {\n    \"id\": \"importexport-projects-and-bookmarks\"\n  }, `Import/export projects and bookmarks`), mdx(\"p\", null, `A new import and export system for Projects and Bookmarks makes it easier to back up you work, share projects with colleagues or move projects between different Polypane installations.`), mdx(\"img\", {\n    src: projectsettings,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"New export and import buttons in the project settings.\"\n  }), mdx(\"h4\", {\n    \"id\": \"projects-importexport\"\n  }, `Projects import/export`), mdx(\"p\", null, `Projects with all their settings can now be exported to JSON files. These files can then be imported into other Polypane installations to recreate the exact same project structure, settings and bookmarks.`), mdx(\"p\", null, `We'll be sharing out the JSON Schema for this soon, so third party tools can also generate Polypane projects for you. Imagine configuring your accessibility audit in an online tool, then exporting it and having all the pages that are part of your audit automatically set up in Polypane!`), mdx(\"h4\", {\n    \"id\": \"bookmarks-importexport\"\n  }, `Bookmarks import/export`), mdx(\"p\", null, `Separately Bookmarks are now also importable and exportable. You can export all bookmarks in a project to a JSON file which can then be imported into other Polypane installations.`), mdx(\"p\", null, `Additionally, Polypane now supports importing bookmarks from a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `bookmarks.html`), `, a weird and old format that all browsers support.`), mdx(\"p\", null, `This makes it easy to migrate your bookmarks from any browser to Polypane. When importing a bookmarks.html file all non-URL entries (like bookmarklets or browser internals) are filtered out automatically.`), mdx(\"h3\", {\n    \"id\": \"hide-project-selector-button\"\n  }, `Hide project selector button`), mdx(\"p\", null, `If you do not need the projects feature, you can now hide the project selector button by going to the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"\"\n  }), `settings`), ` in the address bar and unchecking \"Show project selector\". Thanks Artem for the suggestion!`), mdx(\"img\", {\n    src: showprojectselector,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"Project settings with 'Show project selector' option highlighted.\"\n  }), mdx(\"h2\", {\n    \"id\": \"snippets-panel-improvements\"\n  }, `Snippets panel improvements`), mdx(\"p\", null, `Snippets are now also available in portal, but the snippets panel itself has also received two quality of life improvements.`), mdx(\"h3\", {\n    \"id\": \"importing-bookmarkshtml\"\n  }, `Importing Bookmarks.html`), mdx(\"p\", null, `You can now import snippets from a bookmarks.html file. The import automatically filters down to the bookmarklets, and adds them as snippets. If your bookmarks has folders, those are also recreated and the snippets are automatically placed in the folder they were in in the bookmarks.html file.`), mdx(\"h4\", {\n    \"id\": \"deleting-folders\"\n  }, `Deleting folders`), mdx(\"p\", null, `When deleting a folder in the snippets panel, all contained snippets are now also deleted. Previously Polypane would just move the snippets to the root folder, but this created a lot of additional work when you wanted to delete a whole folder of snippets. Now you can just delete the folder and all its contents in one go.`), mdx(\"img\", {\n    src: deleteconfirmationfolder,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"Delete confirmation dialog for deleting a folder with 2 snippets.\"\n  }), mdx(\"p\", null, `Any snippet you want to keep can be moved out of the folder before deleting it.`), mdx(\"h2\", {\n    \"id\": \"outline-panel\"\n  }, `Outline panel`), mdx(\"p\", null, `The Outline panel is one of the most used features in Polypane, but heavy pages could feel slow in Polypane as it indexed, analysed and rendered sometimes thousands of links, headings and images parsed from the page, and doing so after every DOM change on the page.`), mdx(\"p\", null, `To prevent this performance impact, the outline panel for new tabs now always starts in a paused state. From there you have two options:`), mdx(\"img\", {\n    src: pausedtracking,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"Outline panel with tracking paused.\"\n  }), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Get the outline `, mdx(\"em\", {\n    parentName: \"li\"\n  }, `once`), ` by clicking the load button, which fetches the data once and then pauses again.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Enable automatic tracking by clicking the Track button: As the DOM changes, for example through user interaction or scripts running on the page, the outline will update automatically so you're always seeing the actual outline of the page.`)), mdx(\"img\", {\n    src: activetracking,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"Outline panel with tracking active.\"\n  }), mdx(\"p\", null, `This way, you can choose when you want the outline to update automatically, when you want to just get the outline once without impacting performance, and when you don't need the outline at all.`), mdx(\"h3\", {\n    \"id\": \"outline-rendering-improvements\"\n  }, `Outline rendering improvements`), mdx(\"p\", null, `There are also made a number of improvements to the outline rendering performance so that even when automatic updating is enabled, the outline panel is more responsive than before, especially on large outlines.`), mdx(\"h3\", {\n    \"id\": \"image-outline-roleimg-support\"\n  }, `Image outline role=img support`), mdx(\"p\", null, `The image outline now also includes elements with the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `role=\"img\"`), ` attribute. This is especially useful for SVG images that use this role to provide accessible names and descriptions.`), mdx(\"img\", {\n    src: roleimg,\n    className: \"imgshadow\",\n    loading: \"async\",\n    alt: \"Outline panel showing an element with role img.\"\n  }), mdx(\"p\", null, `It took a while to find the right solution for this, as elements with `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `role=\"img\"`), ` are not transportable like regular image files. They might simply be a HTML div, or SVGs might have external CSS or even import a specific group from an external SVG file.`), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `role=\"img\"`), ` elements are shows as a placeholder in the aspect ratio of the element. The outline will show you all the important information like the accessible name and dimensions so you can verify that these images are accessible. Thanks Robbert for the suggestion!`), mdx(\"h3\", {\n    \"id\": \"focus-outline-accessible-name-warnings\"\n  }, `Focus outline accessible name warnings`), mdx(\"p\", null, `The focus outline falls back to the text content of an element if it has no accessible name to make it easier to see what element `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `has focus`), `. This is a deliberate choice, but it also can make it seem like an element has an accessible name when it actually doesn't.`), mdx(\"p\", null, `The Focus outline will still fall back to the text content to aid the visual identification of focused elements, but now also shows a warning next to elements that have no accessible name so you can easily identify these elements and fix them. Other outlines and the Polypane Peek tooltip have always shown these warnings, so this makes the focus outline consistent with the rest of Polypane. Thanks Ron for the suggestion!`), mdx(\"h2\", {\n    \"id\": \"meta-panel\"\n  }, `Meta panel`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `meta panel`), ` now uses the newly released Capo.js 2.0.0 for its head order overview. Capo 2 is smaller and faster.`), mdx(\"h2\", {\n    \"id\": \"markerio-integration-update\"\n  }, `Marker.io integration update`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/integrations/markerio/\"\n  }), `Marker.io integration`), ` needed an API update to keep working. The Marker button will now appear again when set up.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-271\"\n  }, `Get Polypane 27.1`), mdx(\"p\", null, `Polypane is available for Windows, Mac and Linux in 64 bit and ARM versions.`), mdx(\"p\", null, `Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` to download the latest version!`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a 14 day trial available. `, mdx(\"br\", null), ` `, 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-271-changelog\"\n  }, `Polypane 27.1 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`), ` Portal: Console messages from connected browsers are now shown in the main Polypane console`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Portal: Snippets are now ran in connected browsers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Arrow key navigation for DOM tree`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Support for adopted stylesheet editing`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Filtering for computed styles`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: collapsing of unused custom properties`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Outline panel: Enable/disable automatic updating`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Projects: Import/export projects`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Projects: Import/export bookmarks`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Projects: Import bookmarks.html file support`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Projects: Filter bookmarks and navigate by keyboard`)), 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`), ` Elements panel: Support for referential IDREFs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Hold cmd/ctrl while hovering DOM tree to hide element info`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console panel: use `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `keys()`), `, `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `values()`), ` and `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `entries()`), ` to log iterable objects`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console panel: messages now support multiple styles using %c`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Show elements with role=img in image outline (Thanks Robbert!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Improve rendering performance for large outlines`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: Focus outline now shows warning for missing accessible names (Thanks Ron!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Accessibility info updates fasted across the app`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color picker: Picking a new selected color no longer changes the background color (Thanks Eric!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Projects: option to hide project selector button (Thanks Artem!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Projects: Adding bookmarks will refocus the URL input`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Quick start: Links are now opened in new tabs (Thanks Max!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: Capo.js head order overview updated to 2.0.0`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Snippets: Deleting a folder now deletes all containing snippets`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Snippets: Support importing bookmarks HTML`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Snippets: Updated list of Google fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Chromium to 142.0.7444.226`)), 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`), ` Marker.io integration needed an API update.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` QR for Portal now updates correctly (Thanks Jesper!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Console popups would sometimes lock up the app (Thanks Luan!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Projects: Add bookmarks as new tabs would not work (Thanks Andy!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Split view: Prevent rulers from overlapping pane headers`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: CSS Suggestions for new properties would be clipped`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: Fix HTML editing styling on Linux`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: adding styles with trailing ; works automatically`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Sidebar: Issue where sidebar could be visible without it being opened`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":8,"tableOfContents":{"items":[{"url":"#portal","title":"Portal","items":[{"url":"#console-messages-in-portal","title":"Console messages in Portal"},{"url":"#snippets-in-portal","title":"Snippets in Portal"}]},{"url":"#elements-panel","title":"Elements panel","items":[{"url":"#arrow-key-navigation","title":"Arrow key navigation"},{"url":"#constructed-stylesheet-editing","title":"Constructed stylesheet editing"},{"url":"#collapsing-unused-custom-properties","title":"Collapsing unused custom properties"},{"url":"#filtering-computed-styles","title":"Filtering computed styles"},{"url":"#hold-cmdctrl-to-hide-element-info","title":"Hold cmd/ctrl to hide element info"}]},{"url":"#projects","title":"Projects","items":[{"url":"#bookmarks-filtering-and-navigation","title":"Bookmarks filtering and navigation"},{"url":"#importexport-projects-and-bookmarks","title":"Import/export projects and bookmarks","items":[{"url":"#projects-importexport","title":"Projects import/export"},{"url":"#bookmarks-importexport","title":"Bookmarks import/export"}]},{"url":"#hide-project-selector-button","title":"Hide project selector button"}]},{"url":"#snippets-panel-improvements","title":"Snippets panel improvements","items":[{"url":"#importing-bookmarkshtml","title":"Importing Bookmarks.html","items":[{"url":"#deleting-folders","title":"Deleting folders"}]}]},{"url":"#outline-panel","title":"Outline panel","items":[{"url":"#outline-rendering-improvements","title":"Outline rendering improvements"},{"url":"#image-outline-roleimg-support","title":"Image outline role=img support"},{"url":"#focus-outline-accessible-name-warnings","title":"Focus outline accessible name warnings"}]},{"url":"#meta-panel","title":"Meta panel"},{"url":"#markerio-integration-update","title":"Marker.io integration update"},{"url":"#get-polypane-271","title":"Get Polypane 27.1"},{"url":"#polypane-271-changelog","title":"Polypane 27.1 Changelog"}]},"excerpt":"Polypane 27.1 is here and Polypane Portal has expanded! The Polypane console will now show the console messages from all connected browsers so you get instant…","frontmatter":{"title":"Polypane 27.1: Expanding Portal","cover":"/img/mail/icon.svg","date":"2025-12-17","updated":null},"fields":{"slug":"/blog/polypane-27-1-expanding-portal/","date":"2025-12-16T23:00:00.000Z","ogFileName":"polypane-27-1-expanding-portal"}}},"pageContext":{"slug":"/blog/polypane-27-1-expanding-portal/"}},"staticQueryHashes":["4164364741","425175329"]}