{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-2-1-edit-all-your-panes-at-the-same-time/","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 2.1: Edit all your panes at the same time\",\n  \"cover\": \"\",\n  \"date\": \"2020-01-14\",\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, we want to give you better insights into your site and make the entire developer/designer workflow faster. With Polypane 2.1, we've made some huge improvements for both of those goals.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"whats-new\"\n  }, `What's new?`), mdx(\"p\", null, `Quick list of the major new features:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Live CSS`), ` Edit all panes at the same time`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Social media previews`), ` See what your page looks like when shared on Facebook, Slack, Twitter and LinkedIn.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Meta info`), ` Get a full overview of all your meta tags`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Handoff / browse`), ` Use Avocode, Zeplin and more directly in Polypane`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Workspaces UI`), ` Quickly switch between your favorite pane sets`)), mdx(\"p\", null, `Beyond that, we also added network throttling, new and improved overlays, better indicators, ways to detect when your site is shown in Polypane, speed improvements, and many more smaller features.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `If you don't have Polypane yet there is a free 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"/pricing/\"\n  }), `Get it here`), `.`)), mdx(\"video\", {\n    src: \"/blogs/polypane-2-1/livecss.mp4\",\n    autoPlay: true,\n    loop: true,\n    className: \"breakout\"\n  }), mdx(\"h3\", {\n    \"id\": \"live-css-panel\"\n  }, `Live CSS Panel`), mdx(\"p\", null, `Write CSS and SCSS that is `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `applied to all panes at the same time.`), ` With the Live CSS panel, quickly trying out new styling for your site on multiple sizes is super easy and very satifying.`), mdx(\"p\", null, `The CSS editor is fully featured, knows all CSS declarations and will suggest the appropriate ones as you type, so writing CSS is `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `super fast`), `.`), mdx(\"p\", null, `Live CSS comes with an element selector. This will let you click on any element in any pane, go through the CSS and find `, mdx(\"em\", null, `the actual selectors for that element`), ` and give them as suggestions in the editor. Selecting elements to write CSS for is super quick and doesn't require you to open devtools to find them.`), mdx(\"p\", null, `Lastly, all of the Google fonts are available when you write Live CSS, so trying out new fonts is as easy as saying `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `font-family: Aladin`), `. Polypane will automatically load in the fonts for you.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/snippets/\"\n  }), `More on the Live CSS panel`)), mdx(\"h3\", {\n    \"id\": \"meta-information-panel\"\n  }, `Meta information panel`), mdx(\"p\", null, `The meta information panel shows you all the information that's defined in your `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `<head>`), `. Your title, description and favicon, but also all your meta tags, viewport declaration, language and other information. This makes it super easy to spot missing info or typos.`), mdx(\"img\", {\n    alt: \"Meta info for Spiritapp.io\",\n    src: \"/blogs/polypane-2-1/meta.png\",\n    className: \"imgshadow breakout\"\n  }), mdx(\"h3\", {\n    \"id\": \"social-media-previews--rich-snippets\"\n  }, `Social media previews / rich snippets`), mdx(\"p\", null, `The meta information panel also gives you `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `previews of the social cards of Twitter, Facebook, Slack and Linkedin, as well as the Google search result`), `. For Twitter and Slack, we also support their dark mode.`), mdx(\"p\", null, `In developing this feature, we found out that none of the official social card previews of Twitter, Facebook and Linkedin accurately showed what your card was going to look like. `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `They're all out of date!`)), mdx(\"p\", null, `Additionally, despite their documentation claiming otherwise, all sites use whatever meta information is available. So we painstakingly reverse engineered the way the social cards were `, mdx(\"em\", {\n    parentName: \"p\"\n  }, `actually`), ` rendered and we replicate that with pixel-perfect accuracy.`), mdx(\"p\", null, `Our generated social previews: Twitter, Facebook, Linkedin & Slack (clockwise.)`), mdx(\"img\", {\n    alt: \"Social previews for Doka.js. Clockwise: Twitter, Facebook, Linkedin, Slack\",\n    src: \"/blogs/polypane-2-1/previews.png\",\n    style: {\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"display\": \"block\"\n    }\n  }), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `More on the Meta information panel`)), mdx(\"h3\", {\n    \"id\": \"handoffbrowse-panel\"\n  }, `Handoff/browse panel`), mdx(\"p\", null, `An important aspect of modern development is handoff: tools that take a design and then display the CSS and dimensions of elements and let you export images, so you don't have to click around in a design tool to figure all that stuff out.`), mdx(\"p\", {\n    \"style\": {\n      \"display\": \"flex\",\n      \"justifyContent\": \"space-around\",\n      \"alignItems\": \"center\",\n      \"flexWrap\": \"wrap\"\n    }\n  }, `\n  `, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"alt\": \"Avocode\",\n    \"src\": \"/blogs/polypane-2-1/avocode.svg\",\n    \"style\": {\n      \"width\": \"100px\"\n    }\n  })), `\n  `, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"alt\": \"Figma\",\n    \"src\": \"/blogs/polypane-2-1/figma.svg\",\n    \"style\": {\n      \"height\": \"30px\"\n    }\n  })), `\n  `, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"alt\": \"Invision\",\n    \"src\": \"/blogs/polypane-2-1/invision.svg\",\n    \"style\": {\n      \"width\": \"100px\"\n    }\n  })), `\n  `, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"alt\": \"Marvel\",\n    \"src\": \"/blogs/polypane-2-1/marvel.svg\",\n    \"style\": {\n      \"width\": \"80px\"\n    }\n  })), `\n  `, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"alt\": \"Zeplin\",\n    \"src\": \"/blogs/polypane-2-1/zeplin.svg\",\n    \"style\": {\n      \"height\": \"30px\"\n    }\n  })), `\n  `, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"alt\": \"Adobe XD\",\n    \"src\": \"/blogs/polypane-2-1/xd.svg\",\n    \"style\": {\n      \"height\": \"30px\"\n    }\n  })), `\n`), mdx(\"p\", null, `With the handoff panel, you can use all these handoff tools directly inside of Polypane. Your design spec and the site are always side-by-side.`), mdx(\"p\", null, `We support a number of handoff tools natively, like Avocode, Invision and Zeplin, but you can also fill in a custom URL.`), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `A custom URL you say? Does that mean you put a browser in a browser?`)), mdx(\"p\", null, `Well... `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Yeah!`)), mdx(\"p\", null, `You can also use the Custom URL option to keep open any reference that you're working with, like MDN, CanIUse, the React documentation or any API documentation.`), mdx(\"img\", {\n    alt: \"Custom URL showing React documentation\",\n    src: \"/blogs/polypane-2-1/customurl.png\",\n    className: \"imgshadow breakout\"\n  }), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/browse/\"\n  }), `More on the Handoff/browse panel`)), mdx(\"h3\", {\n    \"id\": \"workspaces-panel\"\n  }, `Workspaces panel`), mdx(\"p\", null, `Workspaces were introduced in Polypane 1.1 as a way to save sets of panes using shortcuts or the window menu. Now they have a visual interface.`), mdx(\"p\", null, `The workspaces panel contains a visual overview of all 9 workspaces (with a preview) and lets you easily save and restore them.`), mdx(\"p\", null, `New in the workspaces panel is that you can name your workspace, so you no longer have to remember if, for example, Your android devices were in workspace 1 or 2.`), mdx(\"h3\", {\n    \"id\": \"where-you-can-find-all-these-new-features-the-side-panel\"\n  }, `Where you can find all these new features: the side panel`), mdx(\"p\", null, `With the side panel, Polypane gains a new place to add functionality and show site information that is not so easily surfaced in other browsers, but still super important.`), mdx(\"p\", null, `You can dock the side panel either on the right or on the bottom so you can make it fit your favorite screen configuration.`), mdx(\"img\", {\n    alt: \"Side panel\",\n    src: \"/blogs/polypane-2-1/sidepanel.png\",\n    className: \"imgshadow\"\n  }), mdx(\"h2\", {\n    \"id\": \"new-and-updated-overlays\"\n  }, `New and updated overlays`), mdx(\"p\", null, `In Polypane 2 we introduced overlays: simulators and debuggers you could overlay on a pane. These simulators let you quickly check accessibility issues and simulate things like color blindness, or viewing your site in bright sunlight. In Polypane 2.1, we've added more overlays and improved existing ones.`), mdx(\"img\", {\n    alt: \"New and improved overlays\",\n    src: \"/blogs/polypane-2-1/overlays.png\",\n    className: \"imgshadow breakout\"\n  }), mdx(\"p\", null, `There is a new Z-index overlay (top left) that highlights which elements have a defined z-index. It's based on the plugin that Addy Osmani wrote for `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/GoogleChromeLabs/ProjectVisBug\"\n  }), `Visbug`), `, with UI improvements that we're contributing back to that project as well. We've improved readablity and also show the z-index stack for each element that has one.`), mdx(\"p\", null, `We have two new visual impairment simulators: Glaucoma (top center) and Cataracts (top right). Both of these eye conditions blur and dull your vision.`), mdx(\"p\", null, `The color contrast checker (bottom left) now works better when backgrounds are defined for ancestors, and no longer needs a reload.`), mdx(\"p\", null, `Bright sunlight (bottom center) now has less of a blowout and an additional glare to simulate the reflections that the glass on a device creates.`), mdx(\"p\", null, `We have a new Night mode (bottom right) that simulates the way your page looks when Night mode is active, where screens dial down the blue tones and brightness.`), mdx(\"h2\", {\n    \"id\": \"network-throttling\"\n  }, `Network throttling`), mdx(\"img\", {\n    alt: \"Throttling selector\",\n    src: \"/blogs/polypane-2-1/throttling.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '0 0 1rem 1rem',\n      float: 'right'\n    }\n  }), mdx(\"p\", null, `In Isolate panes mode you can now throttle your network connection alongside emulating devices, to test how a page behaves in more realistic settings. We currently have 4 settings: Online, Mid tier mobile, low-end mobile and offline.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `More on Network throttling`)), mdx(\"h2\", {\n    \"id\": \"detecting-polypane\"\n  }, `Detecting Polypane`), mdx(\"p\", null, `If you're developing your site, you might want to show additional debug information or test different variants of your page in different panes. Starting in Polypane 2.1 we offer two ways to detect your site running in Polypane, through our User agent and through a `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `__polypane`), ` property on the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `window`), `.`), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/detecting-polypane/\"\n  }), `Read about how to detect Polypane`)), mdx(\"h2\", {\n    \"id\": \"custom-tooltips\"\n  }, `Custom tooltips`), mdx(\"p\", null, `We switched out the native tooltips for all buttons for our custom ones, so they show up quicker and look better, making it easier to get started with Polypane.`), mdx(\"h2\", {\n    \"id\": \"indicators\"\n  }, `Indicators`), mdx(\"img\", {\n    alt: \"All indicators active\",\n    src: \"/blogs/polypane-2-1/indicators.png\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `Reference image, Overlays, Emulation and Devtools all have a blue dot when they're active.`), mdx(\"p\", null, `For Emulation, we show a yellow dot when the network is throttled, and if you have an error in your console, the Devtools icon will have a red dot. This will tell you at a glance if there is an issue you need to look at, without needing to open the devtools. Emulation and Devtools are available in Isolate Pane mode.`), mdx(\"h2\", {\n    \"id\": \"screenshotting-improvements\"\n  }, `Screenshotting improvements`), mdx(\"p\", null, `Each release we further tweak and improve the screenshots we create to get a better result. Polypane is already much better than Chrome, Firefox and nearly all online tools (check out `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/screenshot-comparison/\"\n  }), `Screenshot comparison page`), ` to find out how) and we're continuing to make the screenshots better for dynamic websites. Scripts now load better and animations are handled more consistently.`), mdx(\"h2\", {\n    \"id\": \"performance-improvements\"\n  }, `Performance improvements`), mdx(\"p\", null, `We've rewritten parts of Polypane to make them faster and more performant. The synchronized scrolling is now an order of magnitude faster, and most of the messaging and handling of content is done asynchronously, making the UI more responsive.`), 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`), ` Side panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Site meta information panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Live CSS panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Handoff/browse panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Workspaces panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` New overlays: Z-index, Glaucoma, Cataracts and Night mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Network throttling`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Live reload delay option`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Detect Polypane from your site`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Use custom tooltips for all buttons`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Faster and more performant scroll syncing`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Color contrast overlay has improved calculations`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Color contrast overlay no longer needs a reload`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Bright sunlight overlay now simulates glare`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Updated emulated user agents`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Better full page screenshotting support`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Icons in the pane header now show activity dots`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Pane devtools show red dot when there are errors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Clicking pane devtools icon will refocus it if already open`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` View mode and Filter buttons simplified`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` All popovers will stay inside window`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Close all panes option added to the menu`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Warning when opening more than 15 panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Added the f6 shortcut to focus address bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Tweak UI icons`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Lower bound of generated breakpoints is now 320px`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Full mode no longer overflows screen`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Speed and responsiveness improvements`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Zoom-to-fit for panes works again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Support multiple levels of imports for breakpoint detection`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` No longer blocking scripts when making screenshots`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` 404 page in full mode no longer overlays icons`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent syncing of file inputs`)), mdx(\"h2\", {\n    \"id\": \"211-update\"\n  }, `2.1.1 Update`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Live CSS now supports Variable Fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Updated Google SERP preview`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Update Twitter preview image aspect ratio`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Add Sketch Cloud to handoff panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Add context menu to handoff panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Support explicit downloads in handoff panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Device mode button in devtools is hidden`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` context menu being unresponsive on isolated panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` crash when opening sites that patch `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `document`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` dark mode on first launch on Mac being set incorrectly`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` workspace UI missing dark mode style`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` spacing issues in pane header`)), mdx(\"h2\", {\n    \"id\": \"212-update\"\n  }, `2.1.2 Update`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Svelte developer tools in Devtools manager`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Higher contrast in Live CSS in dark mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Bump font-size in Live CSS editor`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Panes outside of view are unsuspended quicker`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Handoff panel custom urls update quicker`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Overlay switching happens quicker`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Full page screenshot get 40% speed improvement`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Full mode was 1 pixel too narrow`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Crash with invalid og:url value`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outdated parameters when making overview screenshot`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Live CSS preserve checkbox alignment`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Occasional reload loop in isolate pane mode`)), mdx(\"h2\", {\n    \"id\": \"getting-polypane-21\"\n  }, `Getting Polypane 2.1`), 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":7,"tableOfContents":{"items":[{"url":"#whats-new","title":"What's new?","items":[{"url":"#live-css-panel","title":"Live CSS Panel"},{"url":"#meta-information-panel","title":"Meta information panel"},{"url":"#social-media-previews--rich-snippets","title":"Social media previews / rich snippets"},{"url":"#handoffbrowse-panel","title":"Handoff/browse panel"},{"url":"#workspaces-panel","title":"Workspaces panel"},{"url":"#where-you-can-find-all-these-new-features-the-side-panel","title":"Where you can find all these new features: the side panel"}]},{"url":"#new-and-updated-overlays","title":"New and updated overlays"},{"url":"#network-throttling","title":"Network throttling"},{"url":"#detecting-polypane","title":"Detecting Polypane"},{"url":"#custom-tooltips","title":"Custom tooltips"},{"url":"#indicators","title":"Indicators"},{"url":"#screenshotting-improvements","title":"Screenshotting improvements"},{"url":"#performance-improvements","title":"Performance improvements"},{"url":"#full-changelog","title":"Full changelog:"},{"url":"#211-update","title":"2.1.1 Update"},{"url":"#212-update","title":"2.1.2 Update"},{"url":"#getting-polypane-21","title":"Getting Polypane 2.1"}]},"excerpt":"With Polypane, we want to give you better insights into your site and make the entire developer/designer workflow faster. With Polypane 2.1, we've made some…","frontmatter":{"title":"Polypane 2.1: Edit all your panes at the same time","cover":"","date":"2020-01-14","updated":null},"fields":{"slug":"/blog/polypane-2-1-edit-all-your-panes-at-the-same-time/","date":"2020-01-13T23:00:00.000Z","ogFileName":"polypane-2-1-edit-all-your-panes-at-the-same-time"}}},"pageContext":{"slug":"/blog/polypane-2-1-edit-all-your-panes-at-the-same-time/"}},"staticQueryHashes":["4164364741","425175329"]}