迁移向导参考

迁移向导是允许用户从其他浏览器迁移到 Firefox 的 UI 部分。

迁移向导可以嵌入以下上下文

  1. 在顶级独立对话框窗口中

  2. 在特权的 about: 页面中,例如 about:welcomeabout:preferences

为了适应这些上下文,迁移向导被开发成一个使用纯 HTML 的可重用组件,其架构将向导的控制与向导如何呈现给用户解耦。这种架构不仅有助于确保向导可以在这些不同的上下文中以类似的方式工作,而且还使组件可以在 Storybook 等工具中查看,从而简化开发。

高级概述

下图试图说明迁移向导的各个部分是如何组合在一起的

../../../../_images/migration-wizard-architecture-diagram.svg

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 内容进程中运行。JSActorsMigrationWizardParentMigrationWizardChild 注册也确保了这些 actor 仅加载内置文档。

class MigrationWizardParent()

此类负责与 MigrationUtils 通信,以根据来自关联的 MigrationWizardChild 的消息执行任何类型的迁移工作的实际繁重工作。

MigrationWizardParent.receiveMessage(message)

从关联的 MigrationWizardChild JSWindowActor 接收到的消息的通用消息处理函数。

参数:
  • message (ReceiveMessageArgument) – 从 MigrationWizardChild 接收到的消息。

返回值:

Promise

migration-dialog-window.html

此文档旨在加载到窗口对话框中,并嵌入 MigrationWizard 可重用组件,在其上设置 dialog-mode。它监听来自 MigrationWizard 的特定于对话框的事件,例如 MigrationWizard:Close,这表示单击了应关闭对话框的“取消”按钮。

about:preferencesabout:welcome 这样的页面可以直接嵌入 MigrationWizard 组件,而不是使用 migration-dialog-window.html