{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-3-browser-tabs-and-dark-mode-emulation/","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 3: browser tabs and dark mode emulation\",\n  \"cover\": \"\",\n  \"date\": \"2020-03-02\",\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 3 is now available and comes with two big new features: `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Media Feature emulation`), ` and `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Browser tabs`), `, as well as an upgrade to Chromium 80. To allow for browser tabs we also updated the rest of the UI to match.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"browser-tabs\"\n  }, `Browser Tabs`), mdx(\"p\", null, `Even before we launched in early 2019, adding browser tabs has been a popular request. We held off on that for a while due to performance\nconcerns, but we found a nice way to implement tabs without any performance penalty.`), mdx(\"img\", {\n    src: \"/blogs/polypane-3/tabs.png\",\n    alt: \"The Polypane tabs and header on all three platforms\"\n  }), mdx(\"p\", null, `With the addition of tabs, we also streamlined the rest of the header and made it fit better with each operating system. Polypane now looks even better on all three platforms\nwith more consistent styling and better integration with each platform.`), mdx(\"p\", null, `Each tab has its own full state, history, view mode, zoom levels and of course panes. Tabs can be reordered with drag and drop, and there's shortcuts for adding, removing and switching between tabs.`), mdx(\"img\", {\n    src: \"/blogs/polypane-3/mediafeatureexample.png\",\n    alt: \"overreacted side-by-side\",\n    className: \"imgshadow\"\n  }), mdx(\"h2\", {\n    \"id\": \"media-feature-emulation\"\n  }, `Media Feature emulation`), mdx(\"img\", {\n    alt: \"Media feature options\",\n    src: \"/blogs/polypane-3/mediafeature.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '0 0 1rem 1rem',\n      float: 'right'\n    }\n  }), mdx(\"p\", null, `Media feature emulation lets you toggle media query settings like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `screen`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `print`), `, but more interestingly, set values for `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-color-scheme`), ` and `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-reduced-motion`), `.`), mdx(\"p\", null, `This means you can develop dark mode without having to switch your OS level settings or your browser settings. Even better, you can develop your dark and light mode at the same time `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `side-by-side`), `.`), mdx(\"p\", null, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-reduced-motion`), ` is an important media feature you can use to disable animations and other jarring effects to make your site more usable for people with vestibular disorders or\nother impairments that make motion unpleasant. Watching this side-by-side again is an excellent way to make sure your site looks good and works good for all your users.`), mdx(\"p\", null, `We're working on getting more Media Feature emulations available in updated version of Chromium. We're particularly interested in the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-reduced-data`), ` feature but there are other ones like Edge's `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-contrast`), ` that would be great to emulate as well.`), mdx(\"h2\", {\n    \"id\": \"other-improvements\"\n  }, `Other improvements`), mdx(\"p\", null, `Polypane 3 `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `updates Chromium from 78 to 80`), `, bringing it up to date with the current release.`), mdx(\"p\", null, `We made `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `improvements to our CSS breakpoint detection`), ` along with our handling. When you create breakpoints from your CSS, rather than give all panes a 100% height, we now give a height\ncalculated on average device ratios. smaller (mobile) sizes scale to portrait, while larger (desktop) sizes scale to landscape.`), mdx(\"img\", {\n    alt: \"Media query list\",\n    src: \"/blogs/polypane-3/mqlist.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '1rem 1rem 1rem 0',\n      float: 'left'\n    }\n  }), mdx(\"p\", null, `Additionally, you can now right-click the breakpoint\nicon in the header to get a list of your breakpoints, so you can add just a single one. (note: we hide this list if you have too many breakpoints to display comfortably).`), mdx(\"h3\", {\n    \"id\": \"detecting-polypane\"\n  }, `Detecting Polypane`), mdx(\"p\", null, `In previous releases we added the Polypane user agent and a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `window.__polypane`), ` object so you could detect that your site was being shown on your server and in JavaScript.\nIn Polypane 3 we also `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `add a way to detect that you're running in Polypane in CSS`), `.`), mdx(\"p\", null, `When your site runs in Polypane, the HTML element gets an additional class `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `in-polypane`), `. Now you can use your server output, JavaScript and CSS together to display extra debug information when you're working with your site in Polypane.`), mdx(\"h3\", {\n    \"id\": \"interface-updates\"\n  }, `Interface updates`), mdx(\"p\", null, `With the browser tabs we also improved many other parts of the interface. We redesigned the quick switcher, global zoom now works per tab and per view mode and we highlight the active pane with a blue glow, so you know when keyboard input is sent to the site.`), mdx(\"h3\", {\n    \"id\": \"new-overlay\"\n  }, `New overlay`), mdx(\"p\", null, `We also added a new overlay: Audible changes. This overlay sounds a beep every time it detects a change in your HTML. It's a neat way of finding out where you're doing too much DOM manipulation, or when you're doing DOM manipulation where you don't expect it.`), mdx(\"h3\", {\n    \"id\": \"microsoft-edge-browser-extension\"\n  }, `Microsoft Edge browser extension`), mdx(\"p\", null, `Microsoft recently launched their new chromium-based Edge browser, so we made the Polypane helper extension available for it too. Get it here: `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://microsoftedge.microsoft.com/addons/detail/leojkjmhbidaiacgldgodkagffjhjipn\"\n  }), `Polypane helper for Edge`), `.`), mdx(\"h2\", {\n    \"id\": \"full-changelog\"\n  }, `Full changelog`), mdx(\"p\", null, `There's more new features, improvements and fixes in this release so read through the full changelog below. All new features are fully documented in our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/\"\n  }), `docs`), ` too.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Media feature emulation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Browser tabs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` UI streamlining`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `in-polypane`), ` class for styling`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Update to Chromium 80`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Individual breakpoints in dropdown`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Audible changes overlay`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Edge browser extension`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` CSS Breakpoints are now sized horizontally too`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Zoom now works per view mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Active pane is now highlighted`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Windows titlebar integrates into the design`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Workspaces now save emulation options`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Support more sites in the side browser`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Color contrast overlay now detects backgrounds more consistently`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvment`), ` Support more complex login flows in Isolate Pane mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` F12 now opens devtools on windows 10 too`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Better handling of license renewal`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` No longer use occasionally stale data for screenshots`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Isolate pane mode could get in a reload loop`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` OG images not updating when switching between view modes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Viewport screenshot now positions and clears correctly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Panes can now be longer than the viewport in vertical mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Workspace save shortcut no longer overlaps with Mac screenshot shortcut`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Color contrast overlay crashed on some websites`)), mdx(\"h2\", {\n    \"id\": \"updated-to-304\"\n  }, `Updated to 3.0.4:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Clear localStorage option`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Clear All Storage option`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Add 19 new Google fonts to Live CSS, including the Inter variable font`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` More accurate live reloading when using IDE's`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Panes now remember their scroll position on reload`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Update Electron`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Faster CSS breakpoint detection`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Tab navigation shortcuts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Side browser address bar background color in Dark mode now correct`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` First login on new machine custom url and paneset choice`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Emulation options not being set for new panes created from workspaces`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` First login on new machine gave incorrect license error`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` First login on new machine gave incorrect state error`)), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://polypane.app/blog/polypane-3-browser-tabs-and-dark-mode-emulation/\"\n  }), `Full release notes for Polypane 3`)), mdx(\"h2\", {\n    \"id\": \"getting-polypane-3\"\n  }, `Getting Polypane 3`), mdx(\"p\", null, `Polypane will automatically update on Mac and Windows. Linux users need to download the new version from\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` and if you're on Mac and Windows but don't want to wait on the update popup, you can find\nyour download there as well.`), mdx(\"p\", null, `If you don't have Polypane yet there is a free 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/pricing/\"\n  }), `Get it here`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"tableOfContents":{"items":[{"url":"#browser-tabs","title":"Browser Tabs"},{"url":"#media-feature-emulation","title":"Media Feature emulation"},{"url":"#other-improvements","title":"Other improvements","items":[{"url":"#detecting-polypane","title":"Detecting Polypane"},{"url":"#interface-updates","title":"Interface updates"},{"url":"#new-overlay","title":"New overlay"},{"url":"#microsoft-edge-browser-extension","title":"Microsoft Edge browser extension"}]},{"url":"#full-changelog","title":"Full changelog"},{"url":"#updated-to-304","title":"Updated to 3.0.4:"},{"url":"#getting-polypane-3","title":"Getting Polypane 3"}]},"excerpt":"Polypane 3 is now available and comes with two big new features:  Media Feature emulation  and  Browser tabs , as well as an upgrade to Chromium 80. To allow…","frontmatter":{"title":"Polypane 3: browser tabs and dark mode emulation","cover":"","date":"2020-03-02","updated":null},"fields":{"slug":"/blog/polypane-3-browser-tabs-and-dark-mode-emulation/","date":"2020-03-01T23:00:00.000Z","ogFileName":"polypane-3-browser-tabs-and-dark-mode-emulation"}}},"pageContext":{"slug":"/blog/polypane-3-browser-tabs-and-dark-mode-emulation/"}},"staticQueryHashes":["4164364741","425175329"]}