Merging upstream version 125.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

13 files changed, 442 insertions, 31 deletions

diff --git a/browser/components/migration/ChromeProfileMigrator.sys.mjs b/browser/components/migration/ChromeProfileMigrator.sys.mjs
index 342ac3f376..e32417cd04 100644
--- a/browser/components/migration/ChromeProfileMigrator.sys.mjs
+++ b/browser/components/migration/ChromeProfileMigrator.sys.mjs
@@ -140,7 +140,7 @@ export class ChromeProfileMigrator extends MigratorBase {
     // to Chrome's local state directory.
     while (!(await this.hasPermissions())) {
       let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
-      fp.init(win, "", Ci.nsIFilePicker.modeGetFolder);
+      fp.init(win?.browsingContext, "", Ci.nsIFilePicker.modeGetFolder);
       fp.filterIndex = 1;
       // Now wait for the filepicker to open and close. If the user picks
       // the local state folder, the OS should grant us read access to everything
diff --git a/browser/components/migration/EdgeProfileMigrator.sys.mjs b/browser/components/migration/EdgeProfileMigrator.sys.mjs
index d495727ec9..d34743dcf2 100644
--- a/browser/components/migration/EdgeProfileMigrator.sys.mjs
+++ b/browser/components/migration/EdgeProfileMigrator.sys.mjs
@@ -54,8 +54,8 @@ ChromeUtils.defineLazyGetter(lazy, "gEdgeDatabase", function () {
  *
  * @param {string}            tableName the name of the table to read.
  * @param {string[]|Function} columns   a list of column specifiers
- *                                      (see ESEDBReader.jsm) or a function that
- *                                      generates them based on the database
+ *                                      (see ESEDBReader.sys.mjs) or a function
+ *                                      that generates them based on the database
  *                                      reference once opened.
  * @param {nsIFile}           dbFile    the database file to use. Defaults to
  *                                      the main Edge database.
diff --git a/browser/components/migration/MigrationUtils.sys.mjs b/browser/components/migration/MigrationUtils.sys.mjs
index 000b471ee6..cda3028cc4 100644
--- a/browser/components/migration/MigrationUtils.sys.mjs
+++ b/browser/components/migration/MigrationUtils.sys.mjs
@@ -165,6 +165,7 @@ class MigrationUtils {
         "about:welcome",
         "about:welcome?*",
         "about:preferences",
+        "about:settings",
         "chrome://browser/content/migration/migration-dialog-window.html",
         "chrome://browser/content/spotlight.html",
         "about:firefoxview",
@@ -411,7 +412,7 @@ class MigrationUtils {
       });
 
     Services.tm.spinEventLoopUntil(
-      "MigrationUtils.jsm:MU_spinResolve",
+      "MigrationUtils.sys.mjs:MU_spinResolve",
       () => done || gForceExitSpinResolve
     );
     if (!done) {
diff --git a/browser/components/migration/MigrationWizardParent.sys.mjs b/browser/components/migration/MigrationWizardParent.sys.mjs
index deb0e89007..dd9ef3b85c 100644
--- a/browser/components/migration/MigrationWizardParent.sys.mjs
+++ b/browser/components/migration/MigrationWizardParent.sys.mjs
@@ -219,7 +219,11 @@ export class MigrationWizardParent extends JSWindowActorParent {
 
     let { result, path } = await new Promise(resolve => {
       let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
-      fp.init(window, filePickerConfig.title, Ci.nsIFilePicker.modeOpen);
+      fp.init(
+        window.browsingContext,
+        filePickerConfig.title,
+        Ci.nsIFilePicker.modeOpen
+      );
 
       for (let filter of filePickerConfig.filters) {
         fp.appendFilter(filter.title, filter.extensionPattern);
@@ -299,7 +303,11 @@ export class MigrationWizardParent extends JSWindowActorParent {
 
     let { result, path } = await new Promise(resolve => {
       let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
-      fp.init(window, filePickerConfig.title, Ci.nsIFilePicker.modeOpen);
+      fp.init(
+        window.browsingContext,
+        filePickerConfig.title,
+        Ci.nsIFilePicker.modeOpen
+      );
 
       for (let filter of filePickerConfig.filters) {
         fp.appendFilter(filter.title, filter.extensionPattern);
diff --git a/browser/components/migration/SafariProfileMigrator.sys.mjs b/browser/components/migration/SafariProfileMigrator.sys.mjs
index 418d2b66c8..c134c0869a 100644
--- a/browser/components/migration/SafariProfileMigrator.sys.mjs
+++ b/browser/components/migration/SafariProfileMigrator.sys.mjs
@@ -632,7 +632,7 @@ export class SafariProfileMigrator extends MigratorBase {
     while (!(await this.hasPermissions())) {
       let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
       // The title (second arg) is not displayed on macOS, so leave it blank.
-      fp.init(win, "", Ci.nsIFilePicker.modeGetFolder);
+      fp.init(win?.browsingContext, "", Ci.nsIFilePicker.modeGetFolder);
       fp.filterIndex = 1;
       fp.displayDirectory = FileUtils.getDir("ULibDir", [""]);
       // Now wait for the filepicker to open and close. If the user picks
diff --git a/browser/components/migration/content/migration-wizard.mjs b/browser/components/migration/content/migration-wizard.mjs
index 7643e4bce3..6fc7a715d7 100644
--- a/browser/components/migration/content/migration-wizard.mjs
+++ b/browser/components/migration/content/migration-wizard.mjs
@@ -38,7 +38,7 @@ export class MigrationWizard extends HTMLElement {
         <link rel="stylesheet" href="chrome://browser/skin/migration/migration-wizard.css">
         <named-deck id="wizard-deck" selected-view="page-loading" aria-busy="true" part="deck">
           <div name="page-loading">
-            <h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1>
+            <h1 class="migration-wizard-header" data-l10n-id="migration-wizard-selection-header" part="header"></h1>
             <div class="loading-block large"></div>
             <div class="loading-block small"></div>
             <div class="loading-block small"></div>
@@ -46,12 +46,13 @@ export class MigrationWizard extends HTMLElement {
               <!-- If possible, use the same button labels as the SELECTION page with the same strings.
                    That'll prevent flicker when the load state exits if we then enter the SELECTION page. -->
               <button class="cancel-close" data-l10n-id="migration-cancel-button-label" disabled></button>
-              <button data-l10n-id="migration-import-button-label" disabled></button>
+              <button class="migration-import-button" data-l10n-id="migration-import-button-label" disabled></button>
             </moz-button-group>
           </div>
 
           <div name="page-selection">
-            <h1 data-l10n-id="migration-wizard-selection-header" part="header"></h1>
+            <h1 class="migration-wizard-header" data-l10n-id="migration-wizard-selection-header" part="header"></h1>
+            <p class="migration-wizard-subheader" part="subheader" hidden=""></p>
             <button id="browser-profile-selector" aria-haspopup="menu" aria-labelledby="migrator-name profile-name">
               <span class="migrator-icon" role="img"></span>
               <div class="migrator-description" role="presentation">
@@ -89,22 +90,22 @@ export class MigrationWizard extends HTMLElement {
                 <label id="select-all">
                   <input type="checkbox" class="select-all-checkbox"/><span data-l10n-id="migration-select-all-option-label"></span>
                 </label>
-                <label id="bookmarks" data-resource-type="BOOKMARKS"/>
+                <label id="bookmarks" class="resource-type-label" data-resource-type="BOOKMARKS"/>
                   <input type="checkbox"/><span default-data-l10n-id="migration-bookmarks-option-label" ie-edge-data-l10n-id="migration-favorites-option-label"></span>
                 </label>
-                <label id="logins-and-passwords" data-resource-type="PASSWORDS">
+                <label id="logins-and-passwords" class="resource-type-label" data-resource-type="PASSWORDS">
                   <input type="checkbox"/><span data-l10n-id="migration-passwords-option-label"></span>
                 </label>
-                <label id="history" data-resource-type="HISTORY">
+                <label id="history" class="resource-type-label" data-resource-type="HISTORY">
                   <input type="checkbox"/><span data-l10n-id="migration-history-option-label"></span>
                 </label>
-                <label id="extensions" data-resource-type="EXTENSIONS">
+                <label id="extensions" class="resource-type-label" data-resource-type="EXTENSIONS">
                   <input type="checkbox"/><span data-l10n-id="migration-extensions-option-label"></span>
                 </label>
-                <label id="form-autofill" data-resource-type="FORMDATA">
+                <label id="form-autofill" class="resource-type-label" data-resource-type="FORMDATA">
                   <input type="checkbox"/><span data-l10n-id="migration-form-autofill-option-label"></span>
                 </label>
-                <label id="payment-methods" data-resource-type="PAYMENT_METHODS">
+                <label id="payment-methods" class="resource-type-label" data-resource-type="PAYMENT_METHODS">
                   <input type="checkbox"/><span data-l10n-id="migration-payment-methods-option-label"></span>
                 </label>
               </fieldset>
@@ -118,7 +119,7 @@ export class MigrationWizard extends HTMLElement {
             <moz-button-group class="buttons" part="buttons">
               <button class="cancel-close" data-l10n-id="migration-cancel-button-label"></button>
               <button id="import-from-file" class="primary" data-l10n-id="migration-import-from-file-button-label"></button>
-              <button id="import" class="primary" data-l10n-id="migration-import-button-label"></button>
+              <button id="import" class="primary migration-import-button" data-l10n-id="migration-import-button-label"></button>
               <button id="get-permissions" class="primary" data-l10n-id="migration-continue-button-label"></button>
             </moz-button-group>
           </div>
@@ -582,6 +583,18 @@ export class MigrationWizard extends HTMLElement {
       "div[name='page-selection']"
     );
 
+    if (this.hasAttribute("selection-header-string")) {
+      selectionPage.querySelector(".migration-wizard-header").textContent =
+        this.getAttribute("selection-header-string");
+    }
+
+    let selectionSubheaderString = this.getAttribute(
+      "selection-subheader-string"
+    );
+    let subheader = selectionPage.querySelector(".migration-wizard-subheader");
+    subheader.textContent = selectionSubheaderString;
+    subheader.toggleAttribute("hidden", !selectionSubheaderString);
+
     let details = this.#shadowRoot.querySelector("details");
 
     if (this.hasAttribute("force-show-import-all")) {
@@ -596,6 +609,8 @@ export class MigrationWizard extends HTMLElement {
 
     this.#expandedDetails = false;
 
+    this.#applyContentCustomizations();
+
     for (let migrator of state.migrators) {
       let opt = document.createElement("panel-item");
       opt.setAttribute("key", migrator.key);
@@ -772,6 +787,7 @@ export class MigrationWizard extends HTMLElement {
             MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.EXTENSIONS
           ) {
             messageText.textContent = "";
+            this.#extensionsSuccessLink.target = "_blank";
             this.#extensionsSuccessLink.textContent =
               state.progress[resourceType].message;
           }
@@ -787,6 +803,7 @@ export class MigrationWizard extends HTMLElement {
           messageText.textContent = state.progress[resourceType].message;
           supportLink.textContent = state.progress[resourceType].linkText;
           supportLink.href = state.progress[resourceType].linkURL;
+          supportLink.target = "_blank";
           remainingProgressGroups--;
           totalWarnings++;
           break;
@@ -800,11 +817,13 @@ export class MigrationWizard extends HTMLElement {
           messageText.textContent = state.progress[resourceType].message;
           supportLink.textContent = state.progress[resourceType].linkText;
           supportLink.href = state.progress[resourceType].linkURL;
+          supportLink.target = "_blank";
           if (
             resourceType ==
             MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.EXTENSIONS
           ) {
             messageText.textContent = "";
+            this.#extensionsSuccessLink.target = "_blank";
             this.#extensionsSuccessLink.textContent =
               state.progress[resourceType].message;
           }
@@ -816,16 +835,20 @@ export class MigrationWizard extends HTMLElement {
 
     let migrationDone = remainingProgressGroups == 0;
     let headerL10nID = "migration-wizard-progress-header";
+    let header = this.#shadowRoot.getElementById("progress-header");
 
     if (migrationDone) {
       if (totalWarnings) {
         headerL10nID = "migration-wizard-progress-done-with-warnings-header";
+      } else if (this.getAttribute("data-import-complete-success-string")) {
+        header.textContent = this.getAttribute(
+          "data-import-complete-success-string"
+        );
       } else {
         headerL10nID = "migration-wizard-progress-done-header";
       }
     }
 
-    let header = this.#shadowRoot.getElementById("progress-header");
     document.l10n.setAttributes(header, headerL10nID);
 
     let finishButtons = progressPage.querySelectorAll(".finish-button");
@@ -1233,7 +1256,10 @@ export class MigrationWizard extends HTMLElement {
     let importButton = this.#shadowRoot.querySelector("#import");
     importButton.disabled = checkedResources == 0;
 
-    if (checkedResources == 0) {
+    if (this.hasAttribute("option-expander-title-string")) {
+      let optionString = this.getAttribute("option-expander-title-string");
+      selectedDataHeader.textContent = optionString;
+    } else if (checkedResources == 0) {
       document.l10n.setAttributes(
         selectedDataHeader,
         "migration-no-selected-data-label"
@@ -1260,6 +1286,111 @@ export class MigrationWizard extends HTMLElement {
     );
   }
 
+  /**
+   * Updates content and layout to apply changes that are
+   * informed through element attributes
+   */
+  #applyContentCustomizations() {
+    let selectionPage = this.#shadowRoot.querySelector(
+      "div[name='page-selection']"
+    );
+    if (this.hasAttribute("hide-select-all")) {
+      let hideSelectAll = this.getAttribute("hide-select-all");
+
+      selectionPage.toggleAttribute("hide-select-all", hideSelectAll);
+    } else {
+      selectionPage.removeAttribute("hide-select-all");
+    }
+
+    if (this.hasAttribute("import-button-string")) {
+      if (this.getAttribute("import-button-string")) {
+        this.#importButton.textContent = this.getAttribute(
+          "import-button-string"
+        );
+      }
+    }
+
+    if (this.hasAttribute("checkbox-margin-inline")) {
+      let inlineMargin = this.getAttribute("checkbox-margin-inline");
+      this.style.setProperty(
+        "--resource-type-label-margin-inline",
+        inlineMargin
+      );
+    }
+
+    if (this.hasAttribute("checkbox-margin-block")) {
+      let blockMargin = this.getAttribute("checkbox-margin-block");
+      this.style.setProperty("--resource-type-label-margin-block", blockMargin);
+    }
+
+    if (this.hasAttribute("import-button-class")) {
+      let importButtonClass = this.getAttribute("import-button-class");
+      if (importButtonClass) {
+        this.#importButton.classList.add(importButtonClass);
+      }
+    }
+
+    if (this.hasAttribute("header-font-size")) {
+      let headerFontSize = this.getAttribute("header-font-size");
+      if (headerFontSize) {
+        this.style.setProperty(
+          "--embedded-wizard-header-font-size",
+          headerFontSize
+        );
+      }
+    }
+
+    if (this.hasAttribute("header-font-weight")) {
+      let headerFontWeight = this.getAttribute("header-font-weight");
+      if (headerFontWeight) {
+        this.style.setProperty(
+          "--embedded-wizard-header-font-weight",
+          headerFontWeight
+        );
+      }
+    }
+
+    if (this.hasAttribute("header-margin-block")) {
+      let headerMarginBlock = this.getAttribute("header-margin-block");
+      if (headerMarginBlock) {
+        this.style.setProperty(
+          "--embedded-wizard-header-margin-block",
+          headerMarginBlock
+        );
+      }
+    }
+
+    if (this.hasAttribute("subheader-font-size")) {
+      let subheaderFontSize = this.getAttribute("subheader-font-size");
+      if (subheaderFontSize) {
+        this.style.setProperty(
+          "--embedded-wizard-subheader-font-size",
+          subheaderFontSize
+        );
+      }
+    }
+
+    if (this.hasAttribute("subheader-font-weight")) {
+      let subheaderFontWeight = this.getAttribute("subheader-font-weight");
+      if (subheaderFontWeight) {
+        this.style.setProperty(
+          "--embedded-wizard-subheader-font-weight",
+          subheaderFontWeight
+        );
+      }
+    }
+
+    if (this.hasAttribute("subheader-margin-block")) {
+      let subheaderMarginBlock = this.getAttribute("subheader-margin-block");
+      if (subheaderMarginBlock) {
+        this.style.setProperty(
+          "--embedded-wizard-subheader-margin-block",
+          subheaderMarginBlock
+        );
+      }
+    }
+  }
+
   handleEvent(event) {
     switch (event.type) {
       case "click": {
diff --git a/browser/components/migration/docs/migration-wizard.rst b/browser/components/migration/docs/migration-wizard.rst
index 320b429db5..c54d50515b 100644
--- a/browser/components/migration/docs/migration-wizard.rst
+++ b/browser/components/migration/docs/migration-wizard.rst
@@ -28,6 +28,23 @@ After binding to the document, if the ``MigrationWizard`` has the ``auto-request
 
 If the ``auto-request-state`` attribute is not set, calling ``requestState()`` on the ``MigrationWizard`` will perform the above step. This is useful in situations where the ``MigrationWizard`` element is being constructed dynamically and the callers wants finer-grain control over when the state will be requested.
 
+There are also a handful of attributes that can be set to customize the experience that the ``MigrationWizard`` provides.
+* ``option-expander-title-string``: The string of the label that is displayed next to the button that expands or hides the resource list on the selection page will be overwritten with the value of this attribute, if it is set.
+* ``hide-option-expander-subtitle``: When set to true, this attribute hides the subtitle that is displayed underneath the resource list expander.
+* ``import-button-string``: The string on the primary action button on the selection page is overridden with the value of this attribute when set.
+* ``import-button-class``: When set, the value of this attribute will be added to the class list on the primary action button on the selection page.
+* ``checkbox-margin-inline``: When set, the value of this attribute will be used to override the ``margin-inline`` of the labels in the resource list on the selection page.
+* ``checkbox-margin-block``: When set, the value of this attribute will be used to override the ``margin-block`` of the labels in the resource list on the selection page.
+* ``selection-header-string``: When set, overrides the text content of the header on the selection page with the set string.
+* ``selection-subheader-string``: When set, presents a subheader on the selection page with the set string.
+* ``data-import-complete-success-string``: When set, this attribute will be used to override the text content of the header of the import complete screen when the import was successful.
+* ``header-font-size``: Overrides the default ``font-size`` of all headers with the value of this string.
+* ``header-font-weight``: Overrides the default ``font-weight`` of all headers with the value of this string.
+* ``header-margin-block``: Overrides the default ``margin-block`` of all headers with the value of this string.
+* ``subheader-font-size``: When used with ``selection-subheader-string``, overrides the default ``font-size`` of the selection page subheader with the value in this string. This has no effect when used alone.
+* ``subheader-font-weight``: When used with ``selection-subheader-string``, overrides the default ``font-weight`` of the selection page subheader with the value in this string. This has no effect when used alone.
+* ``subheader-margin-block``: When used with ``selection-subheader-string``, overrides the default ``margin-block`` of the selection page subheader with the value in this string. This has no effect when used alone.
+
 Notably, the ``MigrationWizard`` does not contain any internal logic or privileged code to perform any migrations or to directly interact with the migration mechanisms. Its sole function is to accept input from the user and emit that input as events. The associated ``MigrationWizardChild`` will listen for those events, and take care of calling into the ``MigrationWizard`` to update the state of the reusable component. This means that the reusable component can be embedded in unprivileged contexts and have its states presented in a tool like Storybook.
 
 If the ``MigrationWizard`` is embedded in a dialog, it should have the ``dialog-mode`` attribute set on it so that dialog-appropriate buttons and styles are applied.
diff --git a/browser/components/migration/tests/browser/browser_file_migration.js b/browser/components/migration/tests/browser/browser_file_migration.js
index 04241d29d5..c73dfc4456 100644
--- a/browser/components/migration/tests/browser/browser_file_migration.js
+++ b/browser/components/migration/tests/browser/browser_file_migration.js
@@ -68,7 +68,7 @@ add_setup(async () => {
   // We use MockFilePicker to simulate a native file picker, and prepare it
   // to return a dummy file pointed at TEST_FILE_PATH. The file at
   // TEST_FILE_PATH is not required (nor expected) to exist.
-  MockFilePicker.init(window);
+  MockFilePicker.init(window.browsingContext);
   registerCleanupFunction(() => {
     MockFilePicker.cleanup();
   });
diff --git a/browser/components/migration/tests/browser/browser_safari_passwords.js b/browser/components/migration/tests/browser/browser_safari_passwords.js
index c005342b46..e9ebd05e0a 100644
--- a/browser/components/migration/tests/browser/browser_safari_passwords.js
+++ b/browser/components/migration/tests/browser/browser_safari_passwords.js
@@ -18,7 +18,7 @@ const TEST_FILE_PATH = getTestFilePath("dummy_file.csv");
 const { MockFilePicker } = SpecialPowers;
 
 add_setup(async function () {
-  MockFilePicker.init(window);
+  MockFilePicker.init(window.browsingContext);
   registerCleanupFunction(() => {
     MockFilePicker.cleanup();
   });
diff --git a/browser/components/migration/tests/chrome/test_migration_wizard.html b/browser/components/migration/tests/chrome/test_migration_wizard.html
index d991cce114..cc2d8a0363 100644
--- a/browser/components/migration/tests/chrome/test_migration_wizard.html
+++ b/browser/components/migration/tests/chrome/test_migration_wizard.html
@@ -725,6 +725,10 @@
           EXTENSIONS_INFO_HREF
         );
         is(
+          extensionsGroup.querySelector("a.message-text").target,
+          "_blank"
+        );
+        is(
           extensionsGroup.querySelector(".support-text").textContent,
           EXTENSIONS_SUPPORT_STRING
         );
@@ -732,6 +736,10 @@
           extensionsGroup.querySelector(".support-text").href,
           EXTENSIONS_SUPPORT_HREF
         );
+        is(
+          extensionsGroup.querySelector(".support-text").target,
+          "_blank"
+        );
 
         // With progress being complete, the header should be using the completed
         // migration string.
@@ -792,6 +800,10 @@
           extensionsGroup.querySelector(".support-text").href,
           EXTENSIONS_SUPPORT_HREF
         );
+        is(
+          extensionsGroup.querySelector(".support-text").target,
+          "_blank"
+        );
 
         // With progress being complete, the header should be using the completed
         // migration string.
@@ -1521,6 +1533,248 @@
         let getPermissionButton = gShadowRoot.querySelector("#get-permissions");
         ok(isHidden(getPermissionButton), "Get permissions button hiddne.");
       });
+
+      add_task(async function hide_option_expander_subtitle() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        gWiz.setAttribute("hide-option-expander-subtitle", "true");
+        let subtitle = selectionPage.querySelector("#resource-selection-summary > .selected-data");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        ok(gWiz.hasAttribute("hide-option-expander-subtitle"), "hide option expander subtitle attribute is present on migration wizard");
+
+        ok(isHidden(subtitle), "subtitle is hidden");
+
+        gWiz.removeAttribute("hide-option-expander-subtitle");
+      });
+
+      add_task(async function update_option_expander_title_string() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+
+        let title = selectionPage.querySelector(".selected-data-header");
+        gWiz.setAttribute("option-expander-title-string", "test");
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        await BrowserTestUtils.waitForMutationCondition(
+          title,
+          {childList: true},
+          () => title.textContent == "test"
+        )
+        is(title.textContent, "test", "resource selection expander subtitle has been changed");
+
+        gWiz.removeAttribute("option-expander-title-string");
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        await BrowserTestUtils.waitForMutationCondition(
+          title,
+          {childList: true},
+          () => title.textContent != "test"
+        )
+        isnot(title.textContent, "test", "resource selection expander subtitle was reverted");
+      });
+
+      add_task(async function hide_select_all_checkbox() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+
+        let selectAll = selectionPage.querySelector("#select-all");
+        gWiz.setAttribute("hide-select-all", true);
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        ok(isHidden(selectAll), "select all is not displayed");
+
+        gWiz.removeAttribute("hide-select-all");
+      });
+
+      add_task(async function update_import_button_string() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        gWiz.setAttribute("import-button-string", "test");
+        let button = selectionPage.querySelector(".migration-import-button");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        is(button.textContent, "test", "button text is expected");
+
+        gWiz.removeAttribute("import-button-string");
+      });
+
+      add_task(async function update_checkbox_margins() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+
+        gWiz.setAttribute("checkbox-margin-inline", "27px 42px");
+        gWiz.setAttribute("checkbox-margin-block", "42px 27px");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        let checkboxLabels = selectionPage.querySelectorAll(".resource-type-label");
+        for(let label of checkboxLabels) {
+          let computedStyle = getComputedStyle(label);
+          let marginInline = computedStyle.getPropertyValue("margin-inline");
+          let marginBlock = computedStyle.getPropertyValue("margin-block");
+          is(marginInline, "27px 42px", "margin inline is set to expected value");
+          is(marginBlock, "42px 27px", "margin block is set to expected value");
+        }
+
+        gWiz.removeAttribute("checkbox-margin-inline");
+        gWiz.removeAttribute("checkbox-margin-block");
+      });
+
+      add_task(async function update_import_button_class() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        let importButton = selectionPage.querySelector("#import");
+
+        gWiz.setAttribute("import-button-class", "primary");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        ok(importButton.classList.contains("primary"), "import button has the primary class");
+
+        gWiz.removeAttribute("import-button-class");
+      });
+
+      add_task(async function update_header_font_size() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        let header = selectionPage.querySelector("h1");
+
+        gWiz.setAttribute("header-font-size", "24px");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+        let computedStyle = getComputedStyle(header);
+
+        is(computedStyle.getPropertyValue("font-size"), "24px", "header font size is changed to correct value");
+        gWiz.removeAttribute("header-font-size");
+      });
+
+      add_task(async function update_header_margin_block() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        let header = selectionPage.querySelector("h1");
+
+        gWiz.setAttribute("header-margin-block", "20px 30px");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+        let computedStyle = getComputedStyle(header);
+
+        is(computedStyle.getPropertyValue("margin-block"), "20px 30px", "header margin block is changed to correct value");
+        gWiz.removeAttribute("header-margin-block");
+      });
+
+      add_task(async function update_header_string() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        let header = selectionPage.querySelector("h1");
+
+        gWiz.setAttribute("selection-header-string", "test string");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        is(header.textContent, "test string", "header text content is changed to correct value");
+        gWiz.removeAttribute("selection-header-string");
+      });
+
+      add_task(async function update_subheader_font_size() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        let subheader = selectionPage.querySelector("h1");
+
+        gWiz.setAttribute("subheader-font-size", "24px");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+        let computedStyle = getComputedStyle(subheader);
+
+        is(computedStyle.getPropertyValue("font-size"), "24px", "subheader font size is changed to correct value");
+        gWiz.removeAttribute("subheader-font-size");
+      });
+
+      add_task(async function update_subheader_margin_block() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        let subheader = selectionPage.querySelector("h1");
+
+        gWiz.setAttribute("subheader-margin-block", "20px 30px");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+        let computedStyle = getComputedStyle(subheader);
+
+        is(computedStyle.getPropertyValue("margin-block"), "20px 30px", "subheader margin block is changed to correct value");
+        gWiz.removeAttribute("subheader-margin-block");
+      });
+
+      add_task(async function update_subheader_string() {
+        let selectionPage = gShadowRoot.querySelector("div[name='page-selection']");
+        let subheader = selectionPage.querySelector(".migration-wizard-subheader");
+
+        gWiz.setAttribute("selection-subheader-string", "test string");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        is(subheader.textContent, "test string", "subheader text content is changed to correct value");
+
+        gWiz.removeAttribute("selection-subheader-string");
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: MIGRATOR_PROFILE_INSTANCES,
+        });
+
+        ok(isHidden(subheader), "subheader is hidden")
+      });
+
+      add_task(async function update_data_import_success_string() {
+        let progressPage = gShadowRoot.querySelector("div[name='page-progress']");
+        let header = progressPage.querySelector("h1");
+
+        gWiz.setAttribute("data-import-complete-success-string", "test string");
+
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.PROGRESS,
+          key: "chrome",
+          progress: {
+            [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.EXTENSIONS]: {
+              value: MigrationWizardConstants.PROGRESS_VALUE.SUCCESS,
+            },
+            [MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.FORMDATA]: {
+              value: MigrationWizardConstants.PROGRESS_VALUE.SUCCESS,
+            },
+          },
+        });
+
+        is(header.textContent, "test string", "import success header text content is changed to correct value");
+        gWiz.removeAttribute("data-import-complete-success-string");
+      });
     </script>
   </head>
   <body>
diff --git a/browser/components/migration/tests/marionette/test_refresh_firefox.py b/browser/components/migration/tests/marionette/test_refresh_firefox.py
index ea5d6bce99..2ffcd4f099 100644
--- a/browser/components/migration/tests/marionette/test_refresh_firefox.py
+++ b/browser/components/migration/tests/marionette/test_refresh_firefox.py
@@ -224,8 +224,8 @@ class TestFirefoxRefresh(MarionetteTestCase):
         self.runAsyncCode(
             """
           let resolve = arguments[arguments.length - 1];
-          let { FxAccountsStorageManager } = ChromeUtils.import(
-            "resource://gre/modules/FxAccountsStorage.jsm"
+          let { FxAccountsStorageManager } = ChromeUtils.importESModule(
+            "resource://gre/modules/FxAccountsStorage.sys.mjs"
           );
           let storage = new FxAccountsStorageManager();
           let data = {email: "test@test.com", uid: "uid", keyFetchToken: "top-secret"};
@@ -448,8 +448,8 @@ class TestFirefoxRefresh(MarionetteTestCase):
     def checkFxA(self):
         result = self.runAsyncCode(
             """
-          let { FxAccountsStorageManager } = ChromeUtils.import(
-            "resource://gre/modules/FxAccountsStorage.jsm"
+          let { FxAccountsStorageManager } = ChromeUtils.importESModule(
+            "resource://gre/modules/FxAccountsStorage.sys.mjs"
           );
           let resolve = arguments[arguments.length - 1];
           let storage = new FxAccountsStorageManager();
@@ -528,16 +528,16 @@ class TestFirefoxRefresh(MarionetteTestCase):
           global.Preferences = ChromeUtils.importESModule(
             "resource://gre/modules/Preferences.sys.mjs"
           ).Preferences;
-          global.FormHistory = ChromeUtils.import(
-            "resource://gre/modules/FormHistory.jsm"
+          global.FormHistory = ChromeUtils.importESModule(
+            "resource://gre/modules/FormHistory.sys.mjs"
           ).FormHistory;
         """  # NOQA: E501
         )
         self._formAutofillAvailable = self.runCode(
             """
           try {
-            global.formAutofillStorage = ChromeUtils.import(
-              "resource://formautofill/FormAutofillStorage.jsm"
+            global.formAutofillStorage = ChromeUtils.importESModule(
+              "resource://formautofill/FormAutofillStorage.sys.mjs"
             ).formAutofillStorage;
           } catch(e) {
             return false;
diff --git a/browser/components/migration/tests/unit/test_Chrome_permissions.js b/browser/components/migration/tests/unit/test_Chrome_permissions.js
index 6dfd8bcceb..04bded3c8e 100644
--- a/browser/components/migration/tests/unit/test_Chrome_permissions.js
+++ b/browser/components/migration/tests/unit/test_Chrome_permissions.js
@@ -35,7 +35,7 @@ add_setup(async () => {
   gTempDir = do_get_tempdir();
   await IOUtils.writeJSON(PathUtils.join(gTempDir.path, "Local State"), []);
 
-  MockFilePicker.init(globalThis);
+  MockFilePicker.init(/* mock BrowsingContext */ { window: globalThis });
   registerCleanupFunction(() => {
     MockFilePicker.cleanup();
   });
diff --git a/browser/components/migration/tests/unit/test_Safari_permissions.js b/browser/components/migration/tests/unit/test_Safari_permissions.js
index eaa6c7788e..3e11adc3d8 100644
--- a/browser/components/migration/tests/unit/test_Safari_permissions.js
+++ b/browser/components/migration/tests/unit/test_Safari_permissions.js
@@ -30,7 +30,7 @@ add_setup(async () => {
 
   registerFakePath("ULibDir", tempDir);
 
-  MockFilePicker.init(globalThis);
+  MockFilePicker.init(/* mock BrowsingContext */ { window: globalThis });
   registerCleanupFunction(() => {
     MockFilePicker.cleanup();
   });