{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-6-3-tunnel-vision-simulator-webmanifest-support-updated-ui/","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 6.3: Tunnel vision simulator, webmanifest support, updated UI\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2021-08-05\",\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, `In Polypane 6.3 we added new debug tools and improved the meta panel and outline panel. And we moved the reload button.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"tunnel-vision-simulator\"\n  }, `Tunnel vision simulator`), mdx(\"p\", null, `The new tunnel vision simulator will let you experience websites as if you had tunnel vision, with the mouse cursor position\nacting as your focus. Everything apart from a small area in the center of your vision will be obscured while the page itself\nremains fully interactive.`), mdx(\"video\", {\n    src: \"/blogs/polypane-6-3/tunnelvision-site.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }, \"Tunnel vision debug tool overlaid on the Polypane website\"), mdx(\"p\", null, `Tunnel vision can be caused by various diseases like glaucoma or pituitary tumors but also as a result of temporary impairments like alcohol consumption, migraines\ndrugs, panic attacks, altitude sickness or poisoning, or even situational impairments like wearing safety goggles or helmets.`), mdx(\"p\", null, `With such a wide range of causes, your site will certainly be used by people with tunnel vision (though we haven't been\nable to finds specific numbers on how common it is), so it's important that information can be found even when you can't\nsee the entire page, and that related information is close to each other.`), mdx(\"h2\", {\n    \"id\": \"target-size-cursor-debug-tool\"\n  }, `Target size cursor debug tool`), mdx(\"p\", null, `To make sure all the elements on your site are easily clickable or touchable, they should be at least 44 by 44 pixels and\nthat area should not overlap with other clickable elements. The target size cursor debug tool replaces your cursor with a 44 by 44 pixel square so you\ncan hover over elements and check if they have enough space around them.`), mdx(\"video\", {\n    src: \"/blogs/polypane-6-3/targetsize.mp4\",\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"margin\": \"2rem auto\",\n      \"maxWidth\": \"100%\"\n    }\n  }, \"Target size cursor hovering over a number of different links showing they are far enough apart.\"), mdx(\"img\", {\n    alt: \"webmanifest entries of the Polypane site\",\n    src: \"/blogs/polypane-6-3/webmanifest.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem 0 2rem 1rem',\n      display: 'block',\n      maxWidth: '33%',\n      float: 'right'\n    }\n  }), mdx(\"h2\", {\n    \"id\": \"web-manifest-support\"\n  }, `Web manifest support`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/meta-information/\"\n  }), `Meta panel`), ` now shows the contents of a linked manifest file so you can easily verify its contents.\nAny theme color specified by it is added to the list of theme colors.`), mdx(\"h2\", {\n    \"id\": \"the-reload-button-has-been-moved-\"\n  }, `The reload button has been moved 😱`), mdx(\"p\", null, `The reload button is now positioned to the left of the address bar, in the same location it's in Google Chrome. A lot\nof users have requested this change because the reload button inside the address bar messes with their muscle memory.`), mdx(\"img\", {\n    alt: \"An arrow going from the old location of the reload button in the address bar to the new location next to the navigation arrows\",\n    src: \"/blogs/polypane-6-3/reload.png\",\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      display: 'block',\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `While we really liked the reload button in the address bar, it's more important to make the Polypane UI as easy to use\nas possible and sometimes that involves making sure it aligns with other browsers.`), mdx(\"h2\", {\n    \"id\": \"outline-panel-improvements\"\n  }, `Outline panel improvements`), mdx(\"p\", null, `We've continued to improve the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `Outline panel`), ` by surfacing more info that helps you build better structures.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Links`), ` now show a warning for non-descriptive text like \"click here\" or \"more\".`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Images`), ` show warnings for more variations of redundant text (like \"a photo of\").`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Focus order`), ` now also shows which element(s) have an autofocus attribute.`)), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/outline-panel/\"\n  }), `Outline panel`), ` already warns you about many other issues as well, like missing alt attributes, links that don't use\nhttps, broken links, skipped heading levels and more. If you haven't opened it yet to inspect your pages, have a look!`), mdx(\"h2\", {\n    \"id\": \"other-changes\"\n  }, `Other changes`), mdx(\"h3\", {\n    \"id\": \"social-media-rendering\"\n  }, `Social media rendering`), mdx(\"p\", null, `We've updated the Discord and Slack previews to be in line with recent updates on those platforms (You need a keen eye\nto spot the differences, but they're there!), and have improved the resolution of relative opengraph image urls for all\npreviews using them.`), mdx(\"h3\", {\n    \"id\": \"performance\"\n  }, `Performance`), mdx(\"p\", null, `We've improved performance in a number of different areas of the application, most notably in opening and interacting with\nthe panel and the elements panel in particular.`), mdx(\"h3\", {\n    \"id\": \"better-scroll-syncing\"\n  }, `Better scroll syncing`), mdx(\"p\", null, `Starting in 6.3 Polypane detects when the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `body`), ` and not the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `html`), ` is the scroll container and uses that to sync the scroll position instead.\nThis also works for the full height screenshots.`), mdx(\"p\", null, `We recommend avoiding giving the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `body`), ` element a fixed height so the browser can use the viewport as a scroll area for\nslightly better performance. If your site uses the body element as a scroll container however, Polypane should now work better for you.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-63\"\n  }, `Get Polypane 6.3`), mdx(\"p\", null, `Polypane is available for Windows, Mac (with versions for Intel and M1) and Linux (.deb or AppImage).`), mdx(\"p\", null, `Polypane automatically updates 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`), `. You can find the Mac and Windows versions on that page too.`), 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`), `.`)), mdx(\"h2\", {\n    \"id\": \"full-changelog\"\n  }, `Full Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New Features`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Tunnel vision simulator`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Target size cursor debug tool`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Reload button moved out of address bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Webmanifest info in Meta panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support setting Polypane as default browser (Thanks Jared!)`)), 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`), ` Outline panel adds warning for non-descriptive links (Thanks Roel!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel adds warning for more redundant alt texts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` More complex object rendering supported in Console`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Console log message rendering`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` More accurate Opengraph image link resolution`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Discord preview rendering (Thanks Charlie!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Slack preview rendering`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Support scroll sync on the body element as well (Thanks Galen!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: prevent warning for multiple theme colors`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel: explain warning for theme colors in non-hex format`), 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`), ` Updates list of accessibility rules`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel focus order now shows elements with autofocus`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel performance`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Support SVG favicons in tabs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Improve application of Glaucoma simulator`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Website notifications are now being shown`)), 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 workspaces were not applied correctly (Thanks Galen!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent incorrect ruler grid sizes (Thanks Nick!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Highlighting not working on page load`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Twitter preview title cutoff`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Opengraph warning not detecting the og:image:alt attribute (Thank Charlie!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Mailto permission requests no longer block and open new tabs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent redirection after accepting web notifications`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Peek stopped working in Legacy mode after first click`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Element panel shows text content for elements with single text node`)), mdx(\"h2\", {\n    \"id\": \"polypane-631\"\n  }, `Polypane 6.3.1`), mdx(\"p\", null, `6.3.1 adds the ability to set custom ignore patterns for live reload, a custom font size for live CSS, updates the Twitter and Google previews and fixes a number of bugs.`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New Features`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Set custom ignore patterns for live reloading (Thanks Patrick!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Ability to set a custom font size in the Live CSS panel (Thanks Kevin!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Open `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `polypane://`), ` links from inside Polypane`)), 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`), ` Google preview rendering is now more accurate`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Twitter preview has been updated to the new Twitter design`)), 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 Elements panel didn't display the correct specificity`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Inspector tooltip on mobile devices no longer causes the page to zoom out`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Hide 'redundant' warnings when show warnings is unchecked.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Restore 'redundant' image warning style`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where the panel menu would pop open without the rest of the panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where scrolling caused console errors to appear (Thanks Alex!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `vmin`), ` got replaces by `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `in`), ` in Element style panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Issue where the best practices checkbox got reset on new accessibility tests`)), mdx(\"h2\", {\n    \"id\": \"polypane-632\"\n  }, `Polypane 6.3.2`), mdx(\"p\", null, `6.3.2 is a bugfix release with some dependency upgrades.`), 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`), ` Show warning if Polypane is running under Rosetta on Mac`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Add new Google Fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Update accessibility ruleset`)), 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`), ` Live reload ignorepatterns expecting unix line endings (Thanks Patrick!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Toybox API key input was broken (Thanks Kave!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Situation where inlined background images were rewritten incorrectly (Thanks Todd!)`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":4,"tableOfContents":{"items":[{"url":"#tunnel-vision-simulator","title":"Tunnel vision simulator"},{"url":"#target-size-cursor-debug-tool","title":"Target size cursor debug tool"},{"url":"#web-manifest-support","title":"Web manifest support"},{"url":"#the-reload-button-has-been-moved-","title":"The reload button has been moved 😱"},{"url":"#outline-panel-improvements","title":"Outline panel improvements"},{"url":"#other-changes","title":"Other changes","items":[{"url":"#social-media-rendering","title":"Social media rendering"},{"url":"#performance","title":"Performance"},{"url":"#better-scroll-syncing","title":"Better scroll syncing"}]},{"url":"#get-polypane-63","title":"Get Polypane 6.3"},{"url":"#full-changelog","title":"Full Changelog"},{"url":"#polypane-631","title":"Polypane 6.3.1"},{"url":"#polypane-632","title":"Polypane 6.3.2"}]},"excerpt":"In Polypane 6.3 we added new debug tools and improved the meta panel and outline panel. And we moved the reload button. Tunnel vision simulator The new tunnel…","frontmatter":{"title":"Polypane 6.3: Tunnel vision simulator, webmanifest support, updated UI","cover":"/img/mail/icon.svg","date":"2021-08-05","updated":null},"fields":{"slug":"/blog/polypane-6-3-tunnel-vision-simulator-webmanifest-support-updated-ui/","date":"2021-08-04T22:00:00.000Z","ogFileName":"polypane-6-3-tunnel-vision-simulator-webmanifest-support-updated-ui"}}},"pageContext":{"slug":"/blog/polypane-6-3-tunnel-vision-simulator-webmanifest-support-updated-ui/"}},"staticQueryHashes":["4164364741","425175329"]}