{"componentChunkName":"component---src-templates-doc-jsx","path":"/docs/mental-model/","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\": \"Mental model of Polypane's browser contexts\",\n  \"slug\": \"mental-model\"\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 shows your web page in multiple panes simultaneously. This is powerful, but it means your site can behave differently compared to a single tab in a regular browser, especially around session data and emulation. Understanding these two contexts will save you from unexpected surprises.`), mdx(\"p\", null, `There are two contexts that are important to remember:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, `The `, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `session`), ` is shared across all panes.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Request headers`), ` and `, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `emulation`), ` settings are unique per pane.`)), mdx(\"h2\", {\n    \"id\": \"all-panes-share-a-session\"\n  }, `All panes share a session`), mdx(\"p\", null, `The shared session means that all panes have access to the same `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `browser storage data`), ` like cookies, localStorage and\nsessionStorage.`), mdx(\"p\", null, `This means things like login status and other application state is automatically shared between all panes and you don't have\nto log into each pane separately.`), mdx(\"p\", null, `To inspect this state, you can use the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/storage-panel/\"\n  }), `Storage panel`), `.`), mdx(\"h2\", {\n    \"id\": \"each-pane-requests-its-own-resources-and-has-its-own-emulation-settings\"\n  }, `Each pane requests its own resources and has its own emulation settings`), mdx(\"p\", null, `Panes can run with many different `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/emulation/\"\n  }), `emulation settings`), `. This means one pane can pretend to be an\niPhone while another can be Firefox on Linux and yet another can be IE6 on Windows (😱).`), mdx(\"p\", null, `This information is part of the request headers, and server can (and do) send back different resources depending on these\nheaders. To make sure that each pane behaves as closely as possible to whatever they're emulating, we need to let each pane\nrequest its own resources so they use these different resources.`), mdx(\"p\", null, `All resources can still be cached, but it's good to remember that each pane requests new resources and each counts as a \"page load\".`), mdx(\"h2\", {\n    \"id\": \"where-things-can-go-wrong\"\n  }, `Where things can go wrong`), mdx(\"p\", null, `A shared session but separate resources and emulation can cause explainable but unexpected behavior when you move from\none context (the page itself) to the other (the shared session state).`), mdx(\"h3\", {\n    \"id\": \"an-example\"\n  }, `An example`), mdx(\"p\", null, `Suppose your site has a dark/light mode toggle that uses a value in localStorage but if that's missing uses\n`, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-color-scheme`), ` and then stores that data for the next page load.`), mdx(\"p\", null, `When the panes load, localStorage will be empty and each pane will get `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-color-scheme`), ` read out and stored in localStorage.`), mdx(\"p\", null, `Now suppose we have two panes: one emulating light mode and one emulating dark mode. The light mode pane loads, has\nnothing in localstorage so reads out `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-color-scheme`), ` and stores \"light\" in localStorage. At the same time, but\nslightly slower because of network unpredictabilities, the dark mode pane loads. The light mode pane hasn't stored things in\nlocalStorage yet when the dark mode pane checks it, so it too reads out `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-color-scheme`), ` and stores \"dark\" in localStorage\n(inadvertedly overwriting the \"light\" value from the other pane).`), mdx(\"p\", null, `Now when you re-load the panes, both will read out \"dark\" from localStorage and use the dark mode theme, because localStorage is\nshared between all panes and the site uses that before checking `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-color-scheme`), `.`), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, `To work around this specific issue you can run each pane in a different session through the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/session-management/\"\n  }), `session management`), ` feature.`)), mdx(\"h2\", {\n    \"id\": \"using-the-mental-model\"\n  }, `Using the mental model`), mdx(\"p\", null, `When you keep the difference between the page context and the session context in mind, things that may seems weird at first start to make\na lot of sense.`), mdx(\"p\", null, `Code that is written under the assumption that your page is only ever shown in a single tab is more quickly\n\"exposed\", though the same issues would appear with your site being shown in two tabs in any regular browser.`), mdx(\"p\", null, `By using the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/storage-panel/\"\n  }), `Storage panel`), ` and configuring which `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/synced-interactions/\"\n  }), `interactions to sync`), ` you can\nstill check differences between panes even if your site tries to consolidate them in your session.`), mdx(\"p\", null, `To learn more about the effects this can have on your website, read our docs on `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/website-issues-you-could-encounter/\"\n  }), `website issues you could encounter`), `.`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":2,"excerpt":"Polypane shows your web page in multiple panes simultaneously. This is powerful, but it means your site can behave differently compared to a…","frontmatter":{"title":"Mental model of Polypane's browser contexts","cover":null,"date":null,"beta":null},"fields":{"nextTitle":"Message Bus","nextSlug":"/docs/message-bus/","prevTitle":"Configuring WebStorm to work with Polypane","prevSlug":"/docs/configuring-webstorm-to-work-with-polypane/","slug":"/docs/mental-model/","date":null,"ogFileName":"mental-model-of-polypanes-browser-contexts"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/docs/1-password-setup-instructions/"},"frontmatter":{"title":"1Password setup instructions"}}},{"node":{"fields":{"slug":"/docs/accessibility-audit-workflow/"},"frontmatter":{"title":"Accessibility audit workflow"}}},{"node":{"fields":{"slug":"/docs/accessibility-overview/"},"frontmatter":{"title":"Accessibility overview"}}},{"node":{"fields":{"slug":"/docs/accessibility-panel/"},"frontmatter":{"title":"Accessibility panel"}}},{"node":{"fields":{"slug":"/docs/application-folder/"},"frontmatter":{"title":"Application folder"}}},{"node":{"fields":{"slug":"/docs/brand-guidelines/"},"frontmatter":{"title":"Brand guidelines"}}},{"node":{"fields":{"slug":"/docs/breakpoints/"},"frontmatter":{"title":"Breakpoints"}}},{"node":{"fields":{"slug":"/docs/browse/"},"frontmatter":{"title":"Browse"}}},{"node":{"fields":{"slug":"/docs/browser-extensions/"},"frontmatter":{"title":"Browser extensions"}}},{"node":{"fields":{"slug":"/docs/browser-features/"},"frontmatter":{"title":"Browser features"}}},{"node":{"fields":{"slug":"/docs/browsersync-and-polypane/"},"frontmatter":{"title":"Browsersync and Polypane"}}},{"node":{"fields":{"slug":"/docs/color-picker/"},"frontmatter":{"title":"Color Picker"}}},{"node":{"fields":{"slug":"/docs/command-bar/"},"frontmatter":{"title":"Command Bar"}}},{"node":{"fields":{"slug":"/docs/command-line-options/"},"frontmatter":{"title":"Command line options"}}},{"node":{"fields":{"slug":"/docs/configuring-logitech-mouses/"},"frontmatter":{"title":"Configuring Logitech mouses"}}},{"node":{"fields":{"slug":"/docs/configuring-webstorm-to-work-with-polypane/"},"frontmatter":{"title":"Configuring WebStorm to work with Polypane"}}},{"node":{"fields":{"slug":"/docs/console/"},"frontmatter":{"title":"Console"}}},{"node":{"fields":{"slug":"/docs/customizing-polypane/"},"frontmatter":{"title":"Customizing Polypane"}}},{"node":{"fields":{"slug":"/docs/dark-and-light-mode/"},"frontmatter":{"title":"Dark and light mode"}}},{"node":{"fields":{"slug":"/docs/data-processing-agreement/"},"frontmatter":{"title":"Data Processing Agreement"}}},{"node":{"fields":{"slug":"/docs/debug-tools/"},"frontmatter":{"title":"Debug tools"}}},{"node":{"fields":{"slug":"/docs/detecting-polypane/"},"frontmatter":{"title":"Detecting Polypane"}}},{"node":{"fields":{"slug":"/docs/developer-tools/"},"frontmatter":{"title":"Developer tools"}}},{"node":{"fields":{"slug":"/docs/device-presets/"},"frontmatter":{"title":"Device presets"}}},{"node":{"fields":{"slug":"/docs/devtools-panel/"},"frontmatter":{"title":"Devtools Panel"}}},{"node":{"fields":{"slug":"/docs/elements-panel/"},"frontmatter":{"title":"Elements Panel"}}},{"node":{"fields":{"slug":"/docs/emulation/"},"frontmatter":{"title":"Emulation"}}},{"node":{"fields":{"slug":"/docs/experimental-chromium-features/"},"frontmatter":{"title":"Experimental Chromium features"}}},{"node":{"fields":{"slug":"/docs/find-elements/"},"frontmatter":{"title":"Find elements"}}},{"node":{"fields":{"slug":"/docs/form-autofill/"},"frontmatter":{"title":"Form autofill"}}},{"node":{"fields":{"slug":"/docs/global-zoom/"},"frontmatter":{"title":"Global zoom"}}},{"node":{"fields":{"slug":"/docs/helper-extension-for-other-browsers/"},"frontmatter":{"title":"Helper extension for other browsers"}}},{"node":{"fields":{"slug":"/docs/horizontal-overflow/"},"frontmatter":{"title":"Horizontal overflow detection"}}},{"node":{"fields":{"slug":"/docs/integrations/"},"frontmatter":{"title":"Integrations"}}},{"node":{"fields":{"slug":"/docs/intro-to-panel/"},"frontmatter":{"title":"Intro to panel"}}},{"node":{"fields":{"slug":"/docs/intro-to-panes/"},"frontmatter":{"title":"Intro to panes"}}},{"node":{"fields":{"slug":"/docs/json-and-xml-viewer/"},"frontmatter":{"title":"JSON and XML viewer"}}},{"node":{"fields":{"slug":"/docs/known-issues/"},"frontmatter":{"title":"Known issues"}}},{"node":{"fields":{"slug":"/docs/layout-debugging/"},"frontmatter":{"title":"Layout debugging"}}},{"node":{"fields":{"slug":"/docs/layouts/"},"frontmatter":{"title":"Layouts"}}},{"node":{"fields":{"slug":"/docs/link/"},"frontmatter":{"title":"Share panel"}}},{"node":{"fields":{"slug":"/docs/list-of-shortcuts/"},"frontmatter":{"title":"List of shortcuts"}}},{"node":{"fields":{"slug":"/docs/live-auto-reloading/"},"frontmatter":{"title":"Live/auto reloading"}}},{"node":{"fields":{"slug":"/docs/making-screenshots/"},"frontmatter":{"title":"Making screenshots"}}},{"node":{"fields":{"slug":"/docs/measure-text-length/"},"frontmatter":{"title":"Measure text length"}}},{"node":{"fields":{"slug":"/docs/mental-model/"},"frontmatter":{"title":"Mental model of Polypane's browser contexts"}}},{"node":{"fields":{"slug":"/docs/message-bus/"},"frontmatter":{"title":"Message Bus"}}},{"node":{"fields":{"slug":"/docs/meta-information/"},"frontmatter":{"title":"Meta information"}}},{"node":{"fields":{"slug":"/docs/network-panel/"},"frontmatter":{"title":"Network panel"}}},{"node":{"fields":{"slug":"/docs/other-tools/"},"frontmatter":{"title":"Polypane and local servers"}}},{"node":{"fields":{"slug":"/docs/outline-panel/"},"frontmatter":{"title":"Outline Panel"}}},{"node":{"fields":{"slug":"/docs/pane-management/"},"frontmatter":{"title":"Manage panes"}}},{"node":{"fields":{"slug":"/docs/pane-sizes/"},"frontmatter":{"title":"Pane sizes"}}},{"node":{"fields":{"slug":"/docs/performance/"},"frontmatter":{"title":"Performance"}}},{"node":{"fields":{"slug":"/docs/pitching-polypane/"},"frontmatter":{"title":"Pitching Polypane"}}},{"node":{"fields":{"slug":"/docs/polypane-peek/"},"frontmatter":{"title":"Polypane Peek"}}},{"node":{"fields":{"slug":"/docs/portal/"},"frontmatter":{"title":"Polypane Portal"}}},{"node":{"fields":{"slug":"/docs/projects/"},"frontmatter":{"title":"Projects"}}},{"node":{"fields":{"slug":"/docs/recording/"},"frontmatter":{"title":"Recording"}}},{"node":{"fields":{"slug":"/docs/reference-image/"},"frontmatter":{"title":"Reference image"}}},{"node":{"fields":{"slug":"/docs/reload-css/"},"frontmatter":{"title":"Reload CSS"}}},{"node":{"fields":{"slug":"/docs/responsive-debugging-workflow/"},"frontmatter":{"title":"Responsive debugging workflow"}}},{"node":{"fields":{"slug":"/docs/review-and-approval-by-it-and-security/"},"frontmatter":{"title":"Review and approval by IT and Security"}}},{"node":{"fields":{"slug":"/docs/rulers-grids-and-guides/"},"frontmatter":{"title":"Rulers, grids and guides"}}},{"node":{"fields":{"slug":"/docs/sales-and-procurement/"},"frontmatter":{"title":"Sales and Procurement"}}},{"node":{"fields":{"slug":"/docs/security-policy/"},"frontmatter":{"title":"Security Policy"}}},{"node":{"fields":{"slug":"/docs/security/"},"frontmatter":{"title":"Security"}}},{"node":{"fields":{"slug":"/docs/session-management/"},"frontmatter":{"title":"Session management"}}},{"node":{"fields":{"slug":"/docs/setup/"},"frontmatter":{"title":"Setup"}}},{"node":{"fields":{"slug":"/docs/showing-multiple-urls/"},"frontmatter":{"title":"Showing multiple URLs"}}},{"node":{"fields":{"slug":"/docs/simulators/"},"frontmatter":{"title":"Simulators"}}},{"node":{"fields":{"slug":"/docs/snippets/"},"frontmatter":{"title":"Snippets"}}},{"node":{"fields":{"slug":"/docs/social-card-and-open-graph-workflow/"},"frontmatter":{"title":"Social card and Open Graph workflow"}}},{"node":{"fields":{"slug":"/docs/source-panel/"},"frontmatter":{"title":"Source panel"}}},{"node":{"fields":{"slug":"/docs/storage-panel/"},"frontmatter":{"title":"Storage panel"}}},{"node":{"fields":{"slug":"/docs/switching-to-polypane/"},"frontmatter":{"title":"Switching to Polypane"}}},{"node":{"fields":{"slug":"/docs/synced-interactions/"},"frontmatter":{"title":"Synced interactions"}}},{"node":{"fields":{"slug":"/docs/tab-customization/"},"frontmatter":{"title":"Tab customization"}}},{"node":{"fields":{"slug":"/docs/team-workflows/"},"frontmatter":{"title":"Team workflows"}}},{"node":{"fields":{"slug":"/docs/ui-overview/"},"frontmatter":{"title":"Polypane UI overview"}}},{"node":{"fields":{"slug":"/docs/web-vitals/"},"frontmatter":{"title":"Web Vitals"}}},{"node":{"fields":{"slug":"/docs/website-issues-you-could-encounter/"},"frontmatter":{"title":"Website issues you could encounter"}}},{"node":{"fields":{"slug":"/docs/workspace-management/"},"frontmatter":{"title":"Workspace management"}}},{"node":{"fields":{"slug":"/docs/workspaces/"},"frontmatter":{"title":"Workspaces"}}}]}},"pageContext":{"slug":"/docs/mental-model/"}},"staticQueryHashes":["4164364741","425175329"]}