{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-24-recording-3-d-view-custom-tab-colors-and-html-editing/","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 24: Recording, 3D view, Custom tab colors and HTML editing\",\n \"cover\": \"/img/mail/icon.svg\",\n \"date\": \"2025-04-23\",\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, `This is a jam packed release. We're introducing a new recording feature, a 3D stacking context visualization, you can customize tab titles and colors so you never confuse local and production again, the elements panel lets you edit HTML while preserving events, and we've updated Chromium to version 136.`), mdx(PolypaneIntro, {\n mdxType: \"PolypaneIntro\"\n }), mdx(\"p\", null, `We took a little longer than usual to get this release out and the resulting changelog is `, mdx(\"em\", {\n parentName: \"p\"\n }, `massive`), ` because of it. Make sure to `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"#polypane-24-changelog\"\n }), `go through it`), ` to not miss anything!`), mdx(\"h2\", {\n \"id\": \"new-record-panes-and-annotate-the-resulting-video\"\n }, `New: Record panes and annotate the resulting video`), mdx(\"p\", null, `Joining our extensive screenshotting capabilities, you can now record a pane and annotate the resulting video.`), mdx(\"video\", {\n src: video1,\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, `When recording a video, we show a custom cursor that highlights links and shows clicks with a quick animation, to make it easy to follow along.`), mdx(\"p\", null, `We do this because we record directly from the web contents as they get painted, which gives us good performance but doesn't include the rendered cursor. Plus we get to highlight those clicks!`), mdx(\"p\", null, `When you're done recording, you can annotate and trim the video in our built-in video editor, powered by `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://pqina.nl/pintura/?aff=xLXrx&ref=polypane\"\n }), `Pintura`), `, the same powerful editor we use for screenshots.`), mdx(\"p\", null, `That means the same tools like text, emoji, arrows and other annotations can be added to your video as well. The new Trim plugin lets you trim the start and end of your video, or cut out parts you don't like.`), mdx(\"video\", {\n src: video2,\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, `more about the video editor in our `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/recording/\"\n }), `recording documentation`), `.`), mdx(\"h2\", {\n \"id\": \"stacking-context-3d-view\"\n }, `Stacking context 3D view`), mdx(\"p\", null, `The new stacking context 3D view debug tool shows your page in 3D, with the stacking context and z-index of each element visualized.`), mdx(\"video\", {\n src: threedview,\n loop: true,\n controls: true,\n className: \"imgshadow\",\n style: {\n margin: '2rem auto',\n maxWidth: '100%'\n }\n }), mdx(\"p\", null, `This is a great way to understand how elements are layered on top of each other, and to debug z-index issues.`), mdx(\"p\", null, `The debug tool is very intuitive: simply drag and drop to rotate the 3d view. Drag and drop will always rotate around the center of the pane, so you'll never lose sight of the element you're inspecting.`), mdx(\"p\", null, `More on our `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/debug-tools/#stacking-context-3d-view\"\n }), `stacking context 3d view debug tool`), `.`), mdx(\"h2\", {\n \"id\": \"design-updates\"\n }, `Design updates`), mdx(\"p\", null, `We're also continuing the design updates we started a few releases ago, slowly iterating on the design of Polypane to make it more modern and consistent.`), mdx(\"h3\", {\n \"id\": \"tab-and-address-bar-customization\"\n }, `Tab and address bar customization`), mdx(\"p\", null, `Did you ever waste a bunch of time refreshing the tab because you didn't see the changes you `, mdx(\"em\", {\n parentName: \"p\"\n }, `are certain`), ` you just saved, only to find out embarrassingly late that you were looking at production rather than your dev server?`), mdx(\"p\", null, `...me neither. 😬`), mdx(\"p\", null, mdx(\"em\", {\n parentName: \"p\"\n }, `Totaly unrelated`), `, right-click on a tab to customize it and set a custom title and color for both the tab and address bar.`), mdx(\"img\", {\n src: customize2,\n alt: \"\",\n className: \"imgshadow\",\n style: {\n \"margin\": \"2rem auto\",\n \"maxWidth\": \"100%\"\n }\n }), mdx(\"p\", null, `The tab customisation can be configured just for a tab, or for all tabs with the same domain. That will automatically apply the color and/or title overwrite whenever you open a page on that domain.`), mdx(\"p\", null, `I've been using this for a while now and it's small, but such a game changer. I can now easily see which tab is which server, even when they are all the same page.`), mdx(\"p\", null, `More on our `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/tab-customization/\"\n }), `tab customization`), `.`), mdx(\"h3\", {\n \"id\": \"pane-resizing\"\n }, `Pane resizing`), mdx(\"p\", null, `The pane resize indicators have been the same since before the 1.0 release, and it was high time we made them more modern.`), mdx(\"p\", null, `The new pane resize indicators are more subtle and less intrusive, while still being easy to see and use. Rather than a `, mdx(\"em\", {\n parentName: \"p\"\n }, `blue bulge`), `, we now have a small resize indicator that appears when you hover the side, bottom or corner of a pane.`), mdx(\"video\", {\n src: resizepane,\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\": \"pane-focus-style\"\n }, `Pane focus style`), mdx(\"p\", null, `Rather than a thin blue bar at the top of a pane, a focused pane now has a full outline around it, making it easier to see which pane is currently focused and interactive.`), mdx(\"img\", {\n src: focusstyle,\n alt: \"\",\n className: \"imgshadow\",\n style: {\n \"margin\": \"2rem auto\",\n \"maxWidth\": \"100%\"\n }\n }), mdx(\"h3\", {\n \"id\": \"integrations-are-hidden-by-default\"\n }, `Integrations are hidden by default`), mdx(\"p\", null, `Our `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/integrations/\"\n }), `Marker.io integration`), ` is very useful, but not used by everyone. In order to make the UI less busy, we've hidden the integrations by default. To re-enable them go to the global settings in the top right and enable \"Show pane integrations\"`), mdx(\"h3\", {\n \"id\": \"pane-rotation-button\"\n }, `Pane rotation button`), mdx(\"p\", null, `The pane rotation button is back! It was removed in a previous release but it turns out having a dedicated button is just a much better interaction. We hide it until you hover the pane header though, so it's still out of the way.`), mdx(\"h3\", {\n \"id\": \"copy-link-to-highlight\"\n }, `Copy link to highlight`), mdx(\"p\", null, `After selecting some text and right-clicking it you can now create a URL that links to, and highlights, that selected text. This is a great way to share a specific part of a page with someone else, and it also works in other browsers like Chromium and Firefox.`), mdx(\"p\", null, `While you're in that context menu, you can also find information on the text you just selected, like the number of characters and words: `, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"/docs/measure-text-length/\"\n }), `measure text length`), `.`), mdx(\"h3\", {\n \"id\": \"sortable-workspaces\"\n }, `Sortable workspaces`), mdx(\"p\", null, `You can now sort your custom workspaces to switch around which workspace uses which shortcut. Simply drag and drop a workspace to its prefered position in the list.`), mdx(\"video\", {\n src: sortingWorkspaces,\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\": \"invisible-improvements\"\n }, `'Invisible' improvements`), mdx(\"p\", null, `Some improvements aren't immediately noticeable that make the browser just that little but more usable: the type of details we want to get right.`), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, `When the address bar is too narrow to show the entire URL, you can hover it to see the URL in a tooltip.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `Whenever you change the position of the panel, the new position is automatically set for new tabs as well without it affecting existing tabs.`), mdx(\"li\", {\n parentName: \"ul\"\n }, `You can now drag and drop non-active tabs without first activating them. This is a small but very useful change that makes it easier to manage your tabs.`)), mdx(\"p\", null, `When using Polypane it means that it just `, mdx(\"em\", {\n parentName: \"p\"\n }, `feels right`), `.`), mdx(\"h2\", {\n \"id\": \"elements-panel-updates\"\n }, `Elements panel updates`), mdx(\"h3\", {\n \"id\": \"edit-as-html\"\n }, `Edit as HTML`), mdx(\"p\", null, `A feature that until now was missing from the Polypane elements panel is editing the HTML of an element. It took me a while to crack this because I didn't want editing the HTML to have the side-effect of removing the event listeners elements or their children have. (some browsers preserve these, some don't)`), mdx(\"video\", {\n src: edithtml,\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, `The Edit HTML feature in the Polypane elements panel preserves the event listeners of child elements even if you edit their contents or attributes, by carefully looping over the children and updating them in place, rather than rebuilding the entire DOM tree. `, mdx(\"em\", {\n parentName: \"p\"\n }, `It just works`), `.`), mdx(\"p\", null, `Add to that we use the existing non-modal text-editing UI and support code hightlighting, and editing HTML in the Polypane Elements panel is miles ahead of other browsers. It's a joy to use.`), mdx(\"h3\", {\n \"id\": \"containing-block-information-in-the-debug-tab\"\n }, `Containing block information in the debug tab`), mdx(\"p\", null, `Along with information on the offsetParent and Stacking context, the debug tab in the Elements panel now shows the containing block of an element, and whether it is a containing block itself. Thanks James for the suggestion!`), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, `The containing block determines how elements get their dimensions (e.g. which element percentages are based on) so this is a very useful piece of information to have.`)), mdx(\"img\", {\n src: debugpanel2,\n alt: \"\",\n className: \"imgshadow\",\n style: {\n \"margin\": \"2rem auto\",\n \"maxWidth\": \"100%\"\n }\n }), mdx(\"h3\", {\n \"id\": \"accessibility-warnings\"\n }, `Accessibility warnings`), mdx(\"p\", null, `The A11y tab now looks at the role of an element to determine if it's allowed to have an accessible name and gives a warning when you try to set one.`), mdx(\"img\", {\n src: accnamewarning,\n alt: \"\",\n className: \"imgshadow\",\n style: {\n \"margin\": \"2rem auto\",\n \"maxWidth\": \"100%\"\n }\n }), mdx(\"p\", null, `For example, adding an `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `aria-label`), ` attribute on an element with a `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `generic`), ` role like a `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `div`), ` does nothing, and so the A11y tab will warn you about it. This is a great way to learn about the different roles and their implications.`), mdx(\"h3\", {\n \"id\": \"layout-debugging-clearing\"\n }, `Layout debugging clearing`), mdx(\"p\", null, `While debugging a layout, you might have added layout debugging overlays to a large number of elements. While you can easily find those thanks to the indicators in the tree view, removing them one-by-one is annoying.`), mdx(\"p\", null, `You can now middle-click the layout debugging icon in the elements panel to remove all layout debugging overlays from the page. (note that middle-clicking also works for the debug tools active on panes!)`), mdx(\"h3\", {\n \"id\": \"newly-supported-css\"\n }, `Newly supported CSS`), mdx(\"p\", null, `There's a whole bunch of new CSS. in this release. We've updated the autocomplete for many CSS properties that recently got updates and added autocomplete for new ones like `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `corner-shape`), ` (which, yes, you can test out in Polypane!).`), mdx(\"p\", null, `We've also added support for inspecting the styles of new pseudo classes like `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `::checkmark`), `, `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `::picker-icon`), `, and carousel-related `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `::column`), `, `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `::scroll-button`), `, `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `::scroll-marker`), `, and `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `::scroll-marker-group`), `. Lastly, you can now force the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `:open`), ` pseudo state for elements that support it (like `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `details`), ` and `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `dialog`), `).`), mdx(\"h2\", {\n \"id\": \"meta-panel-updates\"\n }, `Meta panel updates`), mdx(\"h3\", {\n \"id\": \"sorting-and-hiding-social-media-previews\"\n }, `Sorting and hiding social media previews`), mdx(\"p\", null, `The list of social medias previews can now be sorted, and you can hide individual previews. If there's some social media you just don't care about anymore or you want to see a specific one first, you can now do that!`), mdx(\"video\", {\n src: sortableSocials,\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\": \"author-info-in-mastodon-previews\"\n }, `Author info in Mastodon previews`), mdx(\"p\", null, `Mastodon cards can show an associated Mastodon author if you define a `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `fediverse:author`), ` meta property. Polypane will now fetch that information when it detects that an author is available:`), mdx(\"img\", {\n src: mastodonauthor,\n alt: \"\",\n className: \"imgshadow\",\n style: {\n \"margin\": \"2rem auto\",\n \"maxWidth\": \"100%\"\n }\n }), mdx(\"p\", null, `No all Mastodon instances allow this access, so we show a warning when the author information is not available.`), mdx(\"h3\", {\n \"id\": \"more-robust-handling-of-fallback-and-html-in-slack-and-discord-card-previews\"\n }, `More robust handling of fallback and HTML in Slack and discord card previews`), mdx(\"p\", null, `Rather than encode HTML in titles, Slack and Discord just remove anything that looks remotely like HTML. Polypane now emulates this accurately:`), mdx(\"img\", {\n src: slackhtml,\n alt: \"\",\n className: \"imgshadow\",\n style: {\n \"margin\": \"2rem auto\",\n \"maxWidth\": \"100%\"\n }\n }), mdx(\"p\", null, `Should be useful for that blog post about the `, mdx(\"code\", _extends({\n parentName: \"p\"\n }, {\n \"className\": \"language-text\"\n }), `