响应式设计模式架构¶
上下文¶
您有一个浏览器选项卡已访问多个页面，现在具有如下历史记录（从旧到新）：
https://newsblur.com
https://mozilla.org (← 当前页面)
https://convolv.es
在当前 Firefox 会话期间打开 RDM¶
打开 RDM 时，必须保留浏览器选项卡的历史记录。此外，我们努力保留当前显示页面的精确状态（实际上是任何页面内状态，这对于单页面应用程序非常重要，因为如果重新加载它们，数据可能会丢失）。
这看起来有点复杂，但这种技术的一个优点是它保留了选项卡状态，因为重用了同一个选项卡。这有助于维护附加组件或其他程序可能在选项卡上设置的任何额外状态。
创建一个临时的隐藏选项卡来加载工具 UI。
将工具选项卡浏览器的 docshell 标记为活动状态，以便提前创建视口框架，并准备进行交换。
在工具 UI 中创建初始视口。
通过
gBrowser._swapBrowserDocShells将选项卡内容从常规浏览器选项卡交换到工具 UI 中的浏览器内视口，保留所有状态。强制原始浏览器选项卡变为非远程，因为工具 UI 必须加载到父进程中，并且我们即将将工具 UI 交换到此选项卡。
通过
swapBrowsersAndCloseOther将工具 UI（显示内容的视口）交换到原始浏览器选项卡中，并关闭用于加载工具的临时选项卡。从工具选项卡的浏览器到视口浏览器的启动隧道，以便某些浏览器 UI 功能（如导航）连接到视口中的内容，而不是工具页面。
在当前 Firefox 会话期间关闭 RDM¶
要关闭 RDM，我们遵循与打开 RDM 类似的过程，以便可以将内容恢复到普通选项卡。
停止外部和内部浏览器之间的隧道。
创建一个临时的隐藏选项卡来保存内容。
将内容选项卡浏览器的 docshell 标记为活动状态，以便提前创建框架，并准备进行交换。
通过
gBrowser._swapBrowserDocShells将工具 UI 中的浏览器内视口中的选项卡内容交换到常规浏览器选项卡，保留所有状态。强制原始浏览器选项卡变为远程，因为 Web 内容加载到子进程中，并且我们即将将内容交换到此选项卡。
通过
swapBrowsersAndCloseOther将内容交换到原始浏览器选项卡中，并关闭用于保存内容的临时选项卡。
会话恢复¶
重新启动 Firefox 并恢复用户浏览会话时，我们必须正确恢复选项卡历史记录。如果在捕获会话时打开了 RDM 工具，则可以接受以下任一操作：
A：在不显示任何 RDM 工具的情况下恢复选项卡内容 **或**
B：恢复 RDM 工具和其中的选项卡内容，就像重新启动之前一样
我们目前遵循路径 A（会话恢复后没有 RDM），这似乎更符合 DevTools 在恢复后当前的功能方式。为此，我们在关闭时监视选项卡上的 beforeunload 事件并快速退出 RDM，以便会话恢复仅在关闭时的最终写入期间记录原始页面内容。
设备列表¶
RDM 维护着一些流行的移动设备列表，可用于快速模拟特定环境（屏幕分辨率、像素比率、用户代理等）了解更多 有关如何维护此列表以及如何正确更新它的信息。