Bug 1803447 - Implement progress page for the new migration wizard. r…

…=hjones,kpatenio,mstriemer

Differential Revision: https://phabricator.services.mozilla.com/D165090

browser/components/migration/content/migration-wizard-constants.mjs

@@ -15,4 +15,25 @@ export const MigrationWizardConstants = Object.freeze({
     PROGRESS: "progress",
     SAFARI_PERMISSION: "safari-permission",
   }),
+
+  /**
+   * Returns a mapping of a resource type to a string used to identify
+   * the associated resource group in the wizard via a data-resource-type
+   * attribute. The keys are used to set which items should be shown and
+   * in what state in #onShowingProgress.
+   *
+   * @type {Object<string, string>}
+   */
+  DISPLAYED_RESOURCE_TYPES: Object.freeze({
+    // The DISPLAYED_RESOURCE_TYPES should have their keys match those
+    // in MigrationUtils.resourceTypes.
+
+    // COOKIE resource migration is going to be removed, so we don't include
+    // it here.
+    HISTORY: "history",
+    FORMDATA: "form-autofill",
+    PASSWORDS: "logins-and-passwords",
+    BOOKMARKS: "bookmarks",
+    // We don't yet show OTHERDATA or SESSION resources.
+  }),
 });

browser/components/migration/content/migration-wizard.mjs

@@ -17,15 +17,16 @@ export class MigrationWizard extends HTMLElement {
 
   #deck = null;
   #browserProfileSelector = null;
+  #shadowRoot = null;
 
   static get markup() {
     return `
       <template>
         <link rel="stylesheet" href="chrome://browser/skin/migration/migration-wizard.css">
-        <named-deck id="wizard-deck" selected-view="page-selection">
+        <named-deck id="wizard-deck" selected-view="page-selection" aria-live="polite">
 
           <div name="page-selection">
-            <h3 data-l10n-id="migration-wizard-header"></h3>
+            <h3 data-l10n-id="migration-wizard-selection-header"></h3>
             <select id="browser-profile-selector">
             </select>
             <fieldset>
@@ -49,7 +50,32 @@ export class MigrationWizard extends HTMLElement {
           </div>
 
           <div name="page-progress">
-            <h3>TODO: Progress page</h3>
+            <h3 id="progress-header" data-l10n-id="migration-wizard-progress-header"></h3>
+            <div class="resource-progress">
+              <div data-resource-type="bookmarks" class="resource-progress-group">
+                <span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
+                <span data-l10n-id="migration-bookmarks-option-label"></span>
+                <span class="success-text">&nbsp;</span>
+              </div>
+
+              <div data-resource-type="logins-and-passwords" class="resource-progress-group">
+                <span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
+                <span data-l10n-id="migration-logins-and-passwords-option-label"></span>
+                <span class="success-text">&nbsp;</span>
+              </div>
+
+              <div data-resource-type="history" class="resource-progress-group">
+                <span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
+                <span data-l10n-id="migration-history-option-label"></span>
+                <span class="success-text">&nbsp;</span>
+              </div>
+
+              <div data-resource-type="form-autofill" class="resource-progress-group">
+                <span class="progress-icon-parent"><span class="progress-icon" role="img"></span></span>
+                <span data-l10n-id="migration-form-autofill-option-label"></span>
+                <span class="success-text">&nbsp;</span>
+              </div>
+            </div>
           </div>
 
           <div name="page-safari-permission">
@@ -96,6 +122,7 @@ export class MigrationWizard extends HTMLElement {
     this.#browserProfileSelector = shadow.querySelector(
       "#browser-profile-selector"
     );
+    this.#shadowRoot = shadow;
   }
 
   connectedCallback() {
@@ -113,11 +140,22 @@ export class MigrationWizard extends HTMLElement {
    *   be one of the MigrationWizardConstants.PAGES constants.
    */
   setState(state) {
-    if (state.page == MigrationWizardConstants.PAGES.SELECTION) {
-      this.#onShowingSelection(state);
+    switch (state.page) {
+      case MigrationWizardConstants.PAGES.SELECTION: {
+        this.#onShowingSelection(state);
+        break;
+      }
+      case MigrationWizardConstants.PAGES.PROGRESS: {
+        this.#onShowingProgress(state);
+        break;
+      }
     }
 
     this.#deck.setAttribute("selected-view", `page-${state.page}`);
+
+    if (window.IS_STORYBOOK) {
+      this.#updateForStorybook();
+    }
   }
 
   /**
@@ -139,6 +177,94 @@ export class MigrationWizard extends HTMLElement {
       this.#browserProfileSelector.appendChild(opt);
     }
   }
+
+  /**
+   * @typedef {object} ProgressState
+   *   The migration progress state for a resource.
+   * @property {boolean} inProgress
+   *   True if progress is still underway.
+   * @property {string} [message=undefined]
+   *   An optional message to display underneath the resource in
+   *   the progress dialog. This message is only shown when inProgress
+   *   is `false`.
+   */
+
+  /**
+   * Called when showing the progress / success page of the wizard.
+   *
+   * @param {object} state
+   *   The state object passed into setState. The following properties are
+   *   used:
+   * @param {Object<string, ProgressState>} state.progress
+   *   An object whose keys match one of DISPLAYED_RESOURCE_TYPES.
+   *
+   *   Any resource type not included in state.progress will be hidden.
+   */
+  #onShowingProgress(state) {
+    // Any resource progress group not included in state.progress is hidden.
+    let resourceGroups = this.#shadowRoot.querySelectorAll(
+      ".resource-progress-group"
+    );
+    let totalProgressGroups = Object.keys(state.progress).length;
+    let remainingProgressGroups = totalProgressGroups;
+
+    for (let group of resourceGroups) {
+      let resourceType = group.dataset.resourceType;
+      if (!state.progress.hasOwnProperty(resourceType)) {
+        group.hidden = true;
+        continue;
+      }
+      group.hidden = false;
+
+      let progressIcon = group.querySelector(".progress-icon");
+      let successText = group.querySelector(".success-text");
+
+      if (state.progress[resourceType].inProgress) {
+        document.l10n.setAttributes(
+          progressIcon,
+          "migration-wizard-progress-icon-in-progress"
+        );
+        progressIcon.classList.remove("completed");
+        // With no status text, we re-insert the &nbsp; so that the status
+        // text area does not fully collapse.
+        successText.appendChild(document.createTextNode("\u00A0"));
+      } else {
+        document.l10n.setAttributes(
+          progressIcon,
+          "migration-wizard-progress-icon-completed"
+        );
+        progressIcon.classList.add("completed");
+        successText.textContent = state.progress[resourceType].message;
+        remainingProgressGroups--;
+      }
+    }
+
+    let headerL10nID =
+      remainingProgressGroups > 0
+        ? "migration-wizard-progress-header"
+        : "migration-wizard-progress-done-header";
+    let header = this.#shadowRoot.getElementById("progress-header");
+    document.l10n.setAttributes(header, headerL10nID);
+  }
+
+  /**
+   * Certain parts of the MigrationWizard need to be modified slightly
+   * in order to work properly with Storybook. This method should be called
+   * to apply those changes after changing state.
+   */
+  #updateForStorybook() {
+    // The CSS mask used for the progress spinner cannot be loaded via
+    // chrome:// URIs in Storybook. We work around this by exposing the
+    // progress elements as custom parts that the MigrationWizard story
+    // can style on its own.
+    this.#shadowRoot.querySelectorAll(".progress-icon").forEach(progressEl => {
+      if (progressEl.classList.contains("completed")) {
+        progressEl.removeAttribute("part");
+      } else {
+        progressEl.setAttribute("part", "progress-spinner");
+      }
+    });
+  }
 }
 
 if (globalThis.customElements) {