{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-18-introducing-polypane-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 18: Introducing Polypane Portal\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2024-02-22\",\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, `With Polypane Portal you can now build and test your sites across all browsers, engines and devices, all without leaving Polypane.`), mdx(\"p\", null, `We added new features to element inspection, the document outlines and the meta data overview, as well as added new iOS and Android devices. And we've updated to the latest Chromium version, 122.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"img\", {\n    src: \"/og-custom/portal.png\",\n    alt: \"\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"polypane-portal\"\n  }, `Polypane Portal`), mdx(\"p\", null, `Polypane Portal makes your localhost `, mdx(\"b\", null, `available to your network or to the world`), `. Test your site on all the devices you have or share your work with your team, your clients, or your friends. All without deploying it to a server.`), mdx(\"p\", null, `That's right, Polypane portal means you can now also use the tools in Polypane to test on Firefox, Safari, your iPhone, your Kindle, whatever!`), mdx(\"video\", {\n    src: portal,\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(\"h3\", {\n    \"id\": \"test-all-browsers-at-once\"\n  }, `Test all browsers at once`), mdx(\"p\", null, `Scrolling, clicking, typing, layout debugging, live reloading and even `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `changes made in the elements panel`), ` are all mirrored across all the connected browsers and devices. Using it feels like magic, but it's real.`), mdx(\"p\", null, `Test in Firefox, Safari, your Android Phone, your iPad, your Kindle, all from Polypane. This is a game changer. You can now truly test your site `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `once`), ` across all browsers and devices, all without leaving Polypane. Yeah. 🤯`), mdx(\"h3\", {\n    \"id\": \"share-your-work\"\n  }, `Share your work`), mdx(\"p\", null, `Public portals are available to the world, so instead of deploying that change, open a public portal and share the URL with your team mates or clients. They can open it in any browser, on any device, and see the changes you made in real time.`), mdx(\"p\", null, `We automatically create `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/\"\n  }), `a QR code`), ` for the Portal as well`), mdx(\"p\", null, `So that's Polypane Portal. Head over to our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/portal/\"\n  }), `Portal landing page`), ` for a cool overview of the possibilities and to the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/portal/\"\n  }), `Portal documentation`), ` to learn more about how it works and how to use it.`), mdx(\"h2\", {\n    \"id\": \"idrefs-in-the-elements-panel\"\n  }, `IDrefs in the Elements panel`), mdx(\"p\", null, `The elements panel will now warn you for nonexistent idrefs or href targets referencing IDs that don't exist on the page. This can help you find accessibility issues or broken anchor targets.`), mdx(\"p\", null, `If they can't be found it will show a warning in the DOM tree. Otherwise, you can click the crosshair icon to inspect the linked element.`), mdx(\"img\", {\n    src: idrefs,\n    alt: \"Idref with target, and not-found idref\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `The warning is also shown in the attributes and a11y overviews:`), mdx(\"img\", {\n    src: targetcheck2,\n    alt: \"Idref in a11y overview\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `This feature also exists in the Firefox devtools (for aria attributes) so we wanted to acknowledge that we're not the first to do this, but we're happy to bring it to Polypane.`), mdx(\"p\", null, `In building our version we also found a bug in the Firefox implementation and filed `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://bugzilla.mozilla.org/show_bug.cgi?id=1881443\"\n  }), `a bug report`), ` with them.`), mdx(\"h2\", {\n    \"id\": \"outline-panel-improvements\"\n  }, `Outline panel improvements`), mdx(\"p\", null, `Like idrefs, the outline panel now checks if the target IDs of elements linking to parts of the page exist. If they don't, it will show a warning in the outline panel.`), mdx(\"img\", {\n    src: targetcheck,\n    alt: \"A warning in the outline panel for a missing target ID\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `The outline panel shows this info along with the validity of all the links on the page. This is useful to quickly check if all your anchor links are valid regardless of if they go to a different page, or to a different part of the same page.`), mdx(\"h2\", {\n    \"id\": \"storage-panel-improvements\"\n  }, `Storage panel improvements`), mdx(\"p\", null, `The storage panel now lets you pin storage values and import cookies`), mdx(\"h3\", {\n    \"id\": \"import-cookies\"\n  }, `Import Cookies`), mdx(\"p\", null, `When you want to copy over cookies from another browser, previously you needed to do that one-by-one. Now you can import cookies in bulk using JSON, similar to how tools like Playwright, Puppeteer and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://polypane.cloud\"\n  }), `Polypane Cloud`), ` do it. Super useful if you have e.g. permission based logins in another browser and want to transfer that cookie over to Polypane. Thanks Mitch for requesting this feature!`), mdx(\"img\", {\n    src: cookie4,\n    alt: \"The cookie import UI\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h3\", {\n    \"id\": \"pinned-storage-values\"\n  }, `Pinned storage values`), mdx(\"p\", null, `When you're working with local storage or session storage, you can now pin values to keep them around for every page that you open in Polypane. This is great for localstorage features you want to set regardless of the page you're currently working on, or for session storage values you want to keep around during development. Thanks Markus for requesting this feature!`), mdx(\"img\", {\n    src: storage1,\n    alt: \"localStorage overview with a pinned value\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"meta-panel-improvements\"\n  }, `Meta panel improvements`), mdx(\"p\", null, `We've made it easier to add missing meta tags and to debug social media sharing.`), mdx(\"h3\", {\n    \"id\": \"suggested-values-for-missing-tags\"\n  }, `Suggested values for missing tags`), mdx(\"p\", null, `We added missing tag suggestions in Polypane 17 that showed you the tags you could add along with their description. When copying over the HTML for the tag, we now set the value to the suggested value we know for that tag, rather than the description. We now also show that suggestion:`), mdx(\"img\", {\n    src: metatagsuggestions,\n    alt: \"Color-scheme meta tag with suggested value of 'light dark'\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Thanks Felipe for asking for better defaults!`), mdx(\"h3\", {\n    \"id\": \"social-media-debugger-links\"\n  }, `Social media debugger links`), mdx(\"p\", null, `When you're viewing a public URL (so not localhost or a local IP address), we now show links to the official social media debuggers for Facebook, Twitter and LinkedIn.`), mdx(\"img\", {\n    src: validator,\n    alt: \"Twitter preview with a button for the card validator\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Clicking the button opens the debugger in the browse panel and where possible we send along the URL as well, so you get an instant overview of what the social media platforms see when they scrape your site.`), mdx(\"h2\", {\n    \"id\": \"live-reloading-improvements\"\n  }, `Live Reloading improvements`), mdx(\"p\", null, `Live reloading got two updates to support SCSS/Sass files and to support a local ignorepatterns.txt file. Both of these also work in Portals.`), mdx(\"h3\", {\n    \"id\": \"ignorepatternstxt-support\"\n  }, `ignorepatterns.txt support`), mdx(\"p\", null, `Ignorepatterns.txt let you set filters to ignore certain files or folders from live reloading. If you have a CMS that writes a cache to disk, or a build process that also stores debug information in folders, you can use that to prevent those files from causing unneeded reloads.`), mdx(\"p\", null, `Polypane's previous support of ignorepatterns.txt only supported setting a single ignorepatterns in the Polypane settings folder that would apply for every project. That still exists, but Polypane will now also look in the selected folder and all its ancestors for an ignorepatterns.txt file and apply that as well.`), mdx(\"p\", null, `This means you can now have `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/live-auto-reloading/#custom-ignore-patterns\"\n  }), `project-specific ignore patterns`), ` included in the project and Polypane will automatically pick them up. Thanks Simon for requesting this feature!`), mdx(\"h3\", {\n    \"id\": \"css-refresh-for-scss-files\"\n  }, `CSS refresh for SCSS files`), mdx(\"p\", null, `Polypane now supports `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/live-auto-reloading/#css-and-images-update-without-a-page-refresh\"\n  }), `refreshing SCSS files`), ` if it finds a matching CSS file, rather than reloading the entire page.`), mdx(\"h2\", {\n    \"id\": \"new-devices\"\n  }, `New devices`), mdx(\"p\", null, `We've added the iPhone 15 series (15, 15 pro, 15 Plus and 15 Pro Max) and Samsung S23 and S24 series (S23, S23+, S23 Ultra, S24, S24+ and S24 Ultra) and the Pixel 6 and 7 series (6, 6 Pro, 6a, 7, 7 Pro) to the list of available devices.`), mdx(\"h2\", {\n    \"id\": \"web-components-improvements\"\n  }, `Web components improvements`), mdx(\"p\", null, `We've made improvements to how we deal with web components across the board. Most notably, our Color Contrast checker can now detect contrast issues inside (open) web components.`), mdx(\"img\", {\n    src: webcomponents,\n    alt: \"Color Contrast checker inside a web component\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `This work is the result of a blog post written by Manuel Matuzović on how `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://matuzo.at/blog/2024/automated-testing-tools-and-web-components\"\n  }), `automated testing tools deal with web components`), `. Polypane already caught 4 out of 5 issues and now finds the last issue as well!`), mdx(\"p\", null, `Additionally, the elements panel can now correctly select elements inside web components and style them.`), mdx(\"p\", null, `Elements in web components can not be targeted by CSS selectors because they're encapsulated, so the \"get unique CSS selector\" option in the elements panel is now hidden for elements inside web components.`), mdx(\"h2\", {\n    \"id\": \"ui-quality-of-life-improvements\"\n  }, `UI quality of life improvements`), mdx(\"p\", null, `In Polypane 18 we landed a lot improvements to the UI that should make your day-to-day work with Polypane easier.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Address bar suggestions`), mdx(\"br\", null), `\nThe address bar will now autocomplete the current URL for you, similar to how it works in Chrome and Firefox. Instead of using the arrow keys to select the full URL, you can now just press enter to accept the suggestion.`), mdx(\"video\", {\n    src: suggestions,\n    muted: true,\n    controls: true,\n    preload: \"auto\",\n    loading: \"lazy\",\n    playsInline: true,\n    className: \"imgshadow\",\n    style: {\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `This was `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `surprisingly hard`), ` to build as it has a lot of edge-cases, and not every browser solves them the same time, but we ended up with something that feels seamless.`), mdx(\"p\", null, `Related we now remove 404 pages from the list of suggestions and have improved the sorting of suggestions so more relevant suggestions are higher up and you'll need less keystrokes.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Layout Debugger indicator`), mdx(\"br\", null), `\nWhen you're using the layout debugger, we now show a small indicator in the address bar to show you that the layout debugger is active.`), mdx(\"p\", null, `We get frequent reports from people that turned this on and then forgot they did so. This should help with that.`), mdx(\"img\", {\n    src: layoutdebuggerindicator,\n    alt: \"Layout debugger indicator in the address bar\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `You can click the indicator to turn the layout debugger off.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Quick-open in Focus layout`), mdx(\"br\", null), `\nEvery pane now has a button to quickly open it in focus layout. This was previously doable by switching to the focus mode and then selecting the pane in the quick switcher, but this is a much faster way to do it.`), mdx(\"img\", {\n    src: focusbutton,\n    alt: \"Hovered button with tooltip saying 'Open pane in focus layout'\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Perplexity search engine support`), mdx(\"br\", null), `\nThis doesn't feel like a big deal but `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `apparently`), ` it can be `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `a major browser feature announcement`), ` so: We now support the Perplexity search engine in the browse panel.`), mdx(\"img\", {\n    src: perplexity,\n    alt: \"Browse panel showing a perplexity search page\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, `Right-click the search icon in the browse panel to configure it. Of course in Polypane you don't need us as you can add your own search engines just as easily: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browse/#adding-editing-and-removing-search-engines\"\n  }), `Adding, editing and removing search engines`), `.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Alignment options in Focus layout`), mdx(\"br\", null), `\nLike the horizontal and vertical layout you can now left-align, center-align (default) or right-align the Focus layout, for example to have the page right next to the inspector. Another great ask by Felipe!`), mdx(\"img\", {\n    src: focusalignment,\n    alt: \"right-aligned focus pane with open UI\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, ` Copy URL options`), mdx(\"br\", null), `\nThe copy URL context menu now has options to copy the URL as plain text, as Markdown or as HTML. That brings it in line with the context menu options we have for images. This feature is incredibly useful when you're writing documentation or blog posts and want to quickly copy a URL in a specific format. I use it all the time.`), mdx(\"img\", {\n    src: context,\n    alt: \"Context menu with the new copy URL options\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Clear button for input fields`), mdx(\"br\", null), `\nThe input fields for filter in the console panel and lang and locale in the emulation popup now have a 'clear' button when filled. Instead of backspacing or selecting and deleting, you can now just click the clear button to remove the value.`), mdx(\"img\", {\n    src: clearbtn,\n    alt: \"Clear button in the input field\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Optional 'in-polypane' class`), mdx(\"br\", null), `\nThe 'in-polypane' class is now optional. This class is added to the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `html`), ` element of the page when it's viewed in Polypane, and is a a very easy way to check if a page is being shown in Polypane.`), mdx(\"p\", null, `Certain Hydration libraries will throw an error if the HTML isn't `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `exactly`), ` the same as what was sent from the server though, and this class can cause that. So you can now disable the class from the app settings. Thanks Rolando for requesting this feature!`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Margin:auto visualisation`), mdx(\"br\", null), `\nWhen using Polypane peek to inspect, Polypane now accurately draws the margin areas for `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `margin: auto`), `. Previously these wouldn't be visible.`), mdx(\"img\", {\n    src: marginauto,\n    alt: \"Margin: auto visualisation\",\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"notable-bug-fixes\"\n  }, `Notable bug fixes`), mdx(\"p\", null, `We've fixed a number of annoying bugs. The biggest one was that Polypane was prevented from checking for updates on launch. The \"Check for updates\" button still worked fine, but Polypane wouldn't check for updates itself. This has been fixed in 18.`), mdx(\"p\", null, `In the elements panel, you couldn't shift+tab back from a new property to a previously set property value. Thanks Charles and others for reporting this.`), mdx(\"p\", null, `In Polypane 17.1 we refactored the way we get accessible names (for a 10x performance improvement in most situations) but that caused a bug where the Outline panel couldn't correctly determine if a heading was hidden or not. Thanks Eric for reporting this.`), mdx(\"p\", null, `There were a number of Next.js specific issues that cropped up that we fixed in this release. Next.js caused issues with overwriting the page lang attribute and with the visibility of Flex/Grid overlays. Thanks Felipe and Laurens for reporting these.`), mdx(\"h2\", {\n    \"id\": \"chromium-122\"\n  }, `Chromium 122`), mdx(\"p\", null, `Polypane 18 includes the latest Chromium version, 122.0.6261.39. This version includes a number of new features and improvements like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `align-content`), ` for block level elements, the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `light-dark()`), ` Color function and the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `field-sizing`), ` property. All of these were previously available as experimental features in Polypane, but are now available by default.`), mdx(\"p\", null, `For an overview of the new experimental features, head over to our experimental features overview: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/experimental-web-platform-features/\"\n  }), `Experimental Chromium Web Platform Features`), ` and for additional info, head over to our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/experimental-chromium-features/\"\n  }), `experimental chromium features docs page`), `.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-18\"\n  }, `Get Polypane 18`), 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-1804\"\n  }, `Polypane 18.0.4`), mdx(\"p\", null, `This is a bugfix release that improves Portals availability and fixes a blank window issue.`), 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`), ` Portal now supports IPv6 loopback address recognition`)), 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 where app started with a blank window for some configurations`)), mdx(\"h2\", {\n    \"id\": \"polypane-1803-changelog\"\n  }, `Polypane 18.0.3 Changelog`), mdx(\"p\", null, `This is a bugfix release that improves handling of localhost addressess.`), 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 addressbar from trying to open localhost URLs in external applications`)), mdx(\"h2\", {\n    \"id\": \"polypane-1802-changelog\"\n  }, `Polypane 18.0.2 Changelog`), mdx(\"p\", null, `This is a bugfix release that improves handling of address bar autocompletion.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improved`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated screenshot editor`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated HTML validation ruleset`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` You can now close the last tab`)), 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`), ` Application crash when moving from certain specific URLs.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue with repeating characters and autocomplete in the address bar`)), mdx(\"h2\", {\n    \"id\": \"polypane-1801-changelog\"\n  }, `Polypane 18.0.1 Changelog`), mdx(\"p\", null, `This is a bugfix release that improves the availability of Polypane portal and fixes a number of issues.`), 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`), ` Polypane Portal now works for any local domain, not just localhost`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` The About panel on macOS now shows the Chromium version (Thanks Cory!)`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improved`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Scroll syncing now respects the history.scrollRestoration setting (Thanks Rob!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Better color contrast in the Z-index debug tool (Thanks Ferry!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` When activating a workspace in Full layout, switch to the horizontal layout (Thanks Nick!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Screenshot editor: Colors picked with the color picker are now suggested as colors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated list of Google Fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Chromium to 122.0.6261.70`)), 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`), ` Element panel: issue where it didn't update the selected element`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue with nested commas in the specificity calculation of selectors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Navigational shortcuts didn't work (Thanks Charles!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` unneccessary fetching of images in the meta panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Command bar crash`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent incorrect click syncing after closing context menus`)), mdx(\"h2\", {\n    \"id\": \"polypane-18-changelog\"\n  }, `Polypane 18 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`), ` Polypane Portal`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Import Cookies (Thanks Mitch!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Pinned Storage values (Thanks Markus!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Check if referenced ids in attributes are valid`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Elements panel: Click idref attributes to inspect the linked element`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support ignorepatterns.txt in target folder (Thanks Simon!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` iPhone 15 devices`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Android Devices: Samsung S23 and S24 ranges, Pixel 6 and 7 ranges`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Open pane in focus mode option`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Inline autocompletion for the Address bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Meta Panel: Suggested values for missing meta tags (Thanks Felipe!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Meta Panel: Open Social media debuggers from inside the meta panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Outline panel: Check if target IDs exist (Thanks Manuel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Browse panel: Perplexity search engine`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Focus Layout: alignment options (Thanks Felipe!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Newly added experimental Chromium features`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Chromium 122.0.6261.39`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improved`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live Reload now supports injecting SCSS files`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Color Contrast checker: Test color contrast inside web components (Thanks Manuel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Indicator for active layout debugging (Thanks Jeremy!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Copy URL context menu can now copy just the text, as Markdown or as HTML`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel no longer warns about missing rel=\"noopener\".`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: Better contrast for selected elements in tree view`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel: More responsive resizing of textarea`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: add warning for duplicate favicon.ico links (Thanks Gov.uk!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: tooltip for icons now show full URL`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Input fields like filter, lang and locale now have a clear button when filled`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` 'in-polypane' class is now optional (Thanks Rolando!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Tighter security defaults`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Add support for late-initialised lang attribute setting in Next.js (Thanks Felipe!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Syncing of checkbox and radio buttons states`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Support for margin:auto visualisation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Add toast notification when switching to a new layout`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Visibility of Flex/Grid overlays on Next.js websites (Thanks Laurens!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Pages that return a 404 are now removed from the history suggestions`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Address bar suggestions are now sorted by how near they are to the current input`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console panel: Better contrast for string content in objects in dark mode (Thanks Jay!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` More fine-grained browsersync detection (Thanks Cosmin!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Added support for Scroll-Driven Animations Debugger 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`), ` Use correct font in detached panel on Linux`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Re-instate check for updates on app launch`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: prevent style=\"null\" from being added to elements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: Fix issue with inspecting elements inside web components`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: Hide unique CSS selector for elements in web components`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel: shift-tab out of a new property value moved focus to previous property (Thanks Charles!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline Panel: Headings now show 'hidden' badge again when applicable (Thanks Eric!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue with incorrect QR code in Share panel of new tabs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Hide Yellow outline around workspace when focus was on it after keyboard input`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Closing warnings no longer triggers their info action (Thanks Cosmin!)`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":10,"tableOfContents":{"items":[{"url":"#polypane-portal","title":"Polypane Portal","items":[{"url":"#test-all-browsers-at-once","title":"Test all browsers at once"},{"url":"#share-your-work","title":"Share your work"}]},{"url":"#idrefs-in-the-elements-panel","title":"IDrefs in the Elements panel"},{"url":"#outline-panel-improvements","title":"Outline panel improvements"},{"url":"#storage-panel-improvements","title":"Storage panel improvements","items":[{"url":"#import-cookies","title":"Import Cookies"},{"url":"#pinned-storage-values","title":"Pinned storage values"}]},{"url":"#meta-panel-improvements","title":"Meta panel improvements","items":[{"url":"#suggested-values-for-missing-tags","title":"Suggested values for missing tags"},{"url":"#social-media-debugger-links","title":"Social media debugger links"}]},{"url":"#live-reloading-improvements","title":"Live Reloading improvements","items":[{"url":"#ignorepatternstxt-support","title":"ignorepatterns.txt support"},{"url":"#css-refresh-for-scss-files","title":"CSS refresh for SCSS files"}]},{"url":"#new-devices","title":"New devices"},{"url":"#web-components-improvements","title":"Web components improvements"},{"url":"#ui-quality-of-life-improvements","title":"UI quality of life improvements"},{"url":"#notable-bug-fixes","title":"Notable bug fixes"},{"url":"#chromium-122","title":"Chromium 122"},{"url":"#get-polypane-18","title":"Get Polypane 18"},{"url":"#polypane-1804","title":"Polypane 18.0.4"},{"url":"#polypane-1803-changelog","title":"Polypane 18.0.3 Changelog"},{"url":"#polypane-1802-changelog","title":"Polypane 18.0.2 Changelog"},{"url":"#polypane-1801-changelog","title":"Polypane 18.0.1 Changelog"},{"url":"#polypane-18-changelog","title":"Polypane 18 Changelog"}]},"excerpt":"With Polypane Portal you can now build and test your sites across all browsers, engines and devices, all without leaving Polypane. We added new features to…","frontmatter":{"title":"Polypane 18: Introducing Polypane Portal","cover":"/img/mail/icon.svg","date":"2024-02-22","updated":null},"fields":{"slug":"/blog/polypane-18-introducing-polypane-portal/","date":"2024-02-21T23:00:00.000Z","ogFileName":"polypane-18-introducing-polypane-portal"}}},"pageContext":{"slug":"/blog/polypane-18-introducing-polypane-portal/"}},"staticQueryHashes":["4164364741","425175329"]}