forked from mirrors/gecko-dev
5b282b009e
MozReview-Commit-ID: HzL3w8vp8iS --HG-- rename : devtools/docs/backend.md => devtools/docs/backend/backend.md rename : devtools/docs/backward-compatibility.md => devtools/docs/backend/backward-compatibility.md rename : devtools/docs/debugger-api.md => devtools/docs/backend/debugger-api.md rename : devtools/docs/protocol.md => devtools/docs/backend/protocol.md rename : devtools/docs/frontend.md => devtools/docs/frontend/frontend.md rename : devtools/docs/react-guidelines.md => devtools/docs/frontend/react-guidelines.md rename : devtools/docs/react-tips.md => devtools/docs/frontend/react-tips.md rename : devtools/docs/react.md => devtools/docs/frontend/react.md rename : devtools/docs/redux-guidelines.md => devtools/docs/frontend/redux-guidelines.md rename : devtools/docs/redux-tips.md => devtools/docs/frontend/redux-tips.md rename : devtools/docs/redux.md => devtools/docs/frontend/redux.md rename : devtools/docs/svgs.md => devtools/docs/frontend/svgs.md rename : devtools/docs/img/box-model-highlighter-screenshot.png => devtools/docs/resources/box-model-highlighter-screenshot.png rename : devtools/docs/svgs/expand-strokes.gif => devtools/docs/resources/expand-strokes.gif rename : devtools/docs/svgs/pathfinder.gif => devtools/docs/resources/pathfinder.gif rename : devtools/docs/svgs/sketch-position.png => devtools/docs/resources/sketch-position.png rename : devtools/docs/debugger-panel.md => devtools/docs/tools/debugger-panel.md rename : devtools/docs/highlighters.md => devtools/docs/tools/highlighters.md rename : devtools/docs/http-inspector.md => devtools/docs/tools/http-inspector.md rename : devtools/docs/inspector-panel.md => devtools/docs/tools/inspector-panel.md rename : devtools/docs/inspector.md => devtools/docs/tools/inspector.md rename : devtools/docs/memory-panel.md => devtools/docs/tools/memory-panel.md rename : devtools/docs/responsive-design-mode.md => devtools/docs/tools/responsive-design-mode.md rename : devtools/docs/tools.md => devtools/docs/tools/tools.md extra : rebase_source : 96dfbd86b0294a041e0fc82158b1d91a8e9ba9e8
70 lines
3.2 KiB
Markdown
70 lines
3.2 KiB
Markdown
# Responsive Design Mode Architecture
|
|
|
|
## Context
|
|
|
|
You have a single browser tab that has visited several pages, and now has a
|
|
history that looks like, in oldest to newest order:
|
|
|
|
1. https://newsblur.com
|
|
2. https://mozilla.org (← current page)
|
|
3. https://convolv.es
|
|
|
|
## Opening RDM During Current Firefox Session
|
|
|
|
When opening RDM, the browser tab's history must preserved. Additionally, we
|
|
strive to preserve the exact state of the currently displayed page (effectively
|
|
any in-page state, which is important for single page apps where data can be
|
|
lost if they are reloaded).
|
|
|
|
This seems a bit convoluted, but one advantage of this technique is that it
|
|
preserves tab state since the same tab is reused. This helps to maintain any
|
|
extra state that may be set on tab by add-ons or others.
|
|
|
|
1. Create a temporary, hidden tab to load the tool UI.
|
|
2. Mark the tool tab browser's docshell as active so the viewport frame is
|
|
created eagerly and will be ready to swap.
|
|
3. Create the initial viewport inside the tool UI.
|
|
4. Swap tab content from the regular browser tab to the browser within the
|
|
viewport in the tool UI, preserving all state via
|
|
`gBrowser._swapBrowserDocShells`.
|
|
5. Force the original browser tab to be non-remote since the tool UI must be
|
|
loaded in the parent process, and we're about to swap the tool UI into
|
|
this tab.
|
|
6. Swap the tool UI (with viewport showing the content) into the original
|
|
browser tab and close the temporary tab used to load the tool via
|
|
`swapBrowsersAndCloseOther`.
|
|
7. Start a tunnel from the tool tab's browser to the viewport browser
|
|
so that some browser UI functions, like navigation, are connected to
|
|
the content in the viewport, instead of the tool page.
|
|
|
|
## Closing RDM During Current Firefox Session
|
|
|
|
To close RDM, we follow a similar process to the one from opening RDM so we can
|
|
restore the content back to a normal tab.
|
|
|
|
1. Stop the tunnel between outer and inner browsers.
|
|
2. Create a temporary, hidden tab to hold the content.
|
|
3. Mark the content tab browser's docshell as active so the frame is created
|
|
eagerly and will be ready to swap.
|
|
4. Swap tab content from the browser within the viewport in the tool UI to the
|
|
regular browser tab, preserving all state via
|
|
`gBrowser._swapBrowserDocShells`.
|
|
5. Force the original browser tab to be remote since web content is loaded in
|
|
the child process, and we're about to swap the content into this tab.
|
|
6. Swap the content into the original browser tab and close the temporary tab
|
|
used to hold the content via `swapBrowsersAndCloseOther`.
|
|
|
|
## Session Restore
|
|
|
|
When restarting Firefox and restoring a user's browsing session, we must
|
|
correctly restore the tab history. If the RDM tool was opened when the session
|
|
was captured, then it would be acceptable to either:
|
|
|
|
* A: Restore the tab content without any RDM tool displayed **OR**
|
|
* B: Restore the RDM tool the tab content inside, just as before the restart
|
|
|
|
We currently follow path A (no RDM after session restore), which seems more in
|
|
line with how the rest of DevTools currently functions after restore. To do so,
|
|
we watch for `beforeunload` events on the tab at shutdown and quickly exit RDM
|
|
so that session restore records only the original page content during its final
|
|
write at shutdown.
|