迁移向导参考¶
迁移向导是允许用户从其他浏览器迁移到 Firefox 的 UI 部分。
迁移向导可以嵌入以下上下文
在顶级独立对话框窗口中
在特权的
about:
页面中,例如about:welcome
和about:preferences
为了适应这些上下文,迁移向导被开发成一个使用纯 HTML 的可重用组件,其架构将向导的控制与向导如何呈现给用户解耦。这种架构不仅有助于确保向导可以在这些不同的上下文中以类似的方式工作,而且还使组件可以在 Storybook 等工具中查看,从而简化开发。
高级概述¶
下图试图说明迁移向导的各个部分是如何组合在一起的
MigrationWizard
可重用组件¶
MigrationWizard
可重用组件 (<migration-wizard>
) 是一个自定义元素,可以从 migration-wizard.mjs
中导入。该模块预计将在 DOM 窗口上下文中加载,然后自动为该文档注册自定义元素。
绑定到文档后,如果 MigrationWizard
上设置了 auto-request-state
属性,它将分派一个 MigrationWizard:RequestState
自定义事件,这会导致 MigrationWizardChild
实例化并与其关联。从 MigrationWizardParent
接收迁移器状态后,MigrationWizardChild
将在 MigrationWizard
上分派一个 MigrationWizard:Ready
事件,主要用于辅助测试。 auto-request-state
属性在声明性地使用 MigrationWizard
元素的情况下很有用。
如果未设置 auto-request-state
属性,则在 MigrationWizard
上调用 requestState()
将执行上述步骤。这在动态构建 MigrationWizard
元素并且调用者希望更细粒度地控制何时请求状态的情况下很有用。
还可以设置一些属性来自定义 MigrationWizard
提供的体验。* option-expander-title-string
:如果设置了此属性,则选择页面上用于展开或隐藏资源列表的按钮旁边的标签字符串将被覆盖为该属性的值。* hide-option-expander-subtitle
:当设置为 true 时,此属性将隐藏资源列表展开器下方显示的副标题。* import-button-string
:当设置时,选择页面上主要操作按钮上的字符串将被覆盖为该属性的值。* import-button-class
:当设置时,该属性的值将添加到选择页面上主要操作按钮的类列表中。* checkbox-margin-inline
:当设置时,此属性的值将用于覆盖选择页面上资源列表中标签的 margin-inline
。* checkbox-margin-block
:当设置时,此属性的值将用于覆盖选择页面上资源列表中标签的 margin-block
。* selection-header-string
:当设置时,使用设置的字符串覆盖选择页面上标题的文本内容。* selection-subheader-string
:当设置时,在选择页面上显示一个带有设置字符串的副标题。* data-import-complete-success-string
:当设置时,此属性将用于覆盖导入成功时导入完成屏幕标题的文本内容。* header-font-size
:使用此字符串的值覆盖所有标题的默认 font-size
。* header-font-weight
:使用此字符串的值覆盖所有标题的默认 font-weight
。* header-margin-block
:使用此字符串的值覆盖所有标题的默认 margin-block
。* subheader-font-size
:与 selection-subheader-string
一起使用时,使用此字符串中的值覆盖选择页面副标题的默认 font-size
。单独使用时无效。* subheader-font-weight
:与 selection-subheader-string
一起使用时,使用此字符串中的值覆盖选择页面副标题的默认 font-weight
。单独使用时无效。* subheader-margin-block
:与 selection-subheader-string
一起使用时,使用此字符串中的值覆盖选择页面副标题的默认 margin-block
。单独使用时无效。
值得注意的是, MigrationWizard
不包含任何执行任何迁移或直接与迁移机制交互的内部逻辑或特权代码。它的唯一功能是接受用户的输入并将该输入作为事件发出。关联的 MigrationWizardChild
将侦听这些事件,并负责调用 MigrationWizard
以更新可重用组件的状态。这意味着可重用组件可以嵌入到非特权上下文中,并将其状态呈现到 Storybook 等工具中。
如果 MigrationWizard
嵌入到对话框中,则应在其上设置 dialog-mode
属性,以便应用适合对话框的按钮和样式。
如果 MigrationWizard
用于使用与 about:welcome
相同底层组件的消息系统界面,例如聚光灯模态或功能调用,则应在其上设置 is-aboutwelcome-bundle
属性,以便适当地捕获和处理锚点点击事件。
MigrationWizardConstants
¶
MigrationWizardConstants
模块导出一个相同名称的单个对象。该对象的属性是常量,可用于使用 MigrationWizard.setState
设置 MigrationWizard
实例的状态。
MigrationWizardChild
¶
MigrationWizardChild
是一个 JSWindowActorChild
(参见 JSActors),负责侦听来自 MigrationWizard
的事件,然后立即更新该 MigrationWizard
的状态,或向其配对的 MigrationWizardParent
发送消息以使用 MigrationUtils
执行任务。
注意
虽然
MigrationWizardChild
可以在内容进程中运行(对于about:welcome
等进程外页面),但它也可以在父进程上下文中运行 - 例如,在父进程about:preferences
页面或独立窗口对话框中。在所有上下文中,事件和消息的流程都是相同的。
MigrationWizardChild
还放弃了 Xrays,以便它可以直接调用 setState
方法来更新 MigrationWizard
的外观。有关 Xrays 的更多信息,请参见 XrayVision。
- class MigrationWizardChild()¶
此类负责更新 <migration-wizard> 组件的状态,并侦听来自该组件的事件以执行各种迁移功能。
- MigrationWizardChild.beginMigration(migrationDetails, extraArgs)¶
向父 actor 发送消息以尝试迁移。
有关 MigrationDetails 的定义,请参阅 migration-wizard.mjs。
- 参数:
migrationDetails (object) – MigrationDetails 对象。
extraArgs (object) – 传递给事件遥测以完成迁移的额外参数对象。
- 返回值:
Promise.<undefined> – 返回一个 Promise,在父级响应迁移消息后解析。
- MigrationWizardChild.handleEvent(event)¶
来自 <migration-wizard> 组件分发的事件的通用事件处理函数。
- 参数:
event (Event) – 处理的 DOM 事件。
- 返回值:
Promise –
- MigrationWizardChild.receiveMessage(message)¶
从关联的 MigrationWizardParent JSWindowActor 接收到的消息的通用消息处理函数。
- 参数:
message (ReceiveMessageArgument) – 从 MigrationWizardParent 接收到的消息。
- MigrationWizardChild.setComponentState(state)¶
在 <migration-wizard> 组件上调用 setState 方法。状态被克隆到 this.#wizardEl 的执行范围内。
- 参数:
state (object) – <migration-wizard> 组件期望的状态对象。有关更多详细信息,请参阅该元素的 setState 方法的文档。
MigrationWizardParent
¶
MigrationWizardParent
是一个 JSWindowActorParent
(请参阅 JSActors),负责监听来自配对的 MigrationWizardChild
的消息,以使用 MigrationUtils
执行操作。实际上,实际执行迁移的所有繁重工作将由 MigrationWizardParent
通过调用 MigrationUtils
来启动。迁移进度等状态更新将发送回 MigrationWizardChild
,然后反映在 MigrationWizard
的外观中。
由于 MigrationWizard
可能会嵌入到非特权文档中,因此在 MigrationWizardParent
的消息处理程序中添加了额外的检查,以确保文档要么在父进程中运行,要么在特权 about 内容进程中运行。JSActors 的 MigrationWizardParent
和 MigrationWizardChild
注册也确保了这些 actor 仅加载内置文档。
migration-dialog-window.html
¶
此文档旨在加载到窗口对话框中,并嵌入 MigrationWizard
可重用组件,在其上设置 dialog-mode
。它监听来自 MigrationWizard
的特定于对话框的事件,例如 MigrationWizard:Close
,这表示单击了应关闭对话框的“取消”按钮。
像 about:preferences
或 about:welcome
这样的页面可以直接嵌入 MigrationWizard
组件,而不是使用 migration-dialog-window.html
。