Bug 1813598 - Add a Cancel and Done button to the bottom of the progr…

…ess page of the wizard. r=mconley,fluent-reviewers,flod.

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

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

@@ -89,6 +89,10 @@ export class MigrationWizard extends HTMLElement {
                 <span class="success-text">&nbsp;</span>
               </div>
             </div>
+            <moz-button-group class="buttons">
+              <button class="cancel-close" data-l10n-id="migration-cancel-button-label" disabled></button>
+              <button class="primary" id="done-button" data-l10n-id="migration-done-button-label"></button>
+            </moz-button-group>
           </div>
 
           <div name="page-safari-permission">
@@ -141,6 +145,9 @@ export class MigrationWizard extends HTMLElement {
       button.addEventListener("click", this);
     }
 
+    let doneCloseButtons = shadow.querySelector("#done-button");
+    doneCloseButtons.addEventListener("click", this);
+
     this.#importButton = shadow.querySelector("#import");
     this.#importButton.addEventListener("click", this);
 
@@ -319,12 +326,20 @@ export class MigrationWizard extends HTMLElement {
       }
     }
 
-    let headerL10nID =
-      remainingProgressGroups > 0
-        ? "migration-wizard-progress-header"
-        : "migration-wizard-progress-done-header";
+    let migrationDone = remainingProgressGroups == 0;
+    let headerL10nID = migrationDone
+      ? "migration-wizard-progress-done-header"
+      : "migration-wizard-progress-header";
     let header = this.#shadowRoot.getElementById("progress-header");
     document.l10n.setAttributes(header, headerL10nID);
+
+    let progressPage = this.#shadowRoot.querySelector(
+      "div[name='page-progress']"
+    );
+    let doneButton = progressPage.querySelector("#done-button");
+    let cancelButton = progressPage.querySelector(".cancel-close");
+    doneButton.hidden = !migrationDone;
+    cancelButton.hidden = migrationDone;
   }
 
   /**
@@ -384,7 +399,10 @@ export class MigrationWizard extends HTMLElement {
       case "click": {
         if (event.target == this.#importButton) {
           this.#doImport();
-        } else if (event.target.classList.contains("cancel-close")) {
+        } else if (
+          event.target.classList.contains("cancel-close") ||
+          event.target.id == "done-button"
+        ) {
           this.dispatchEvent(
             new CustomEvent("MigrationWizard:Close", { bubbles: true })
           );

browser/components/migration/tests/browser/browser_do_migration.js

@@ -248,6 +248,14 @@ add_task(async function test_successful_migrations() {
       MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.BOOKMARKS,
     ]);
     await migration;
+
+    let dialog = prefsWin.document.querySelector("#migrationWizardDialog");
+    let shadow = wizard.openOrClosedShadowRoot;
+    let doneButton = shadow.querySelector("#done-button");
+    let dialogClosed = BrowserTestUtils.waitForEvent(dialog, "close");
+
+    doneButton.click();
+    await dialogClosed;
     await wizardDone;
     assertQuantitiesShown(wizard, [
       MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.BOOKMARKS,
@@ -276,6 +284,14 @@ add_task(async function test_successful_migrations() {
       MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PASSWORDS,
     ]);
     await migration;
+
+    let dialog = prefsWin.document.querySelector("#migrationWizardDialog");
+    let shadow = wizard.openOrClosedShadowRoot;
+    let doneButton = shadow.querySelector("#done-button");
+    let dialogClosed = BrowserTestUtils.waitForEvent(dialog, "close");
+
+    doneButton.click();
+    await dialogClosed;
     await wizardDone;
     assertQuantitiesShown(wizard, [
       MigrationWizardConstants.DISPLAYED_RESOURCE_TYPES.PASSWORDS,

browser/components/migration/tests/chrome/test_migration_wizard.html

@@ -233,6 +233,13 @@
         "migration-wizard-progress-header",
         "Should be showing in-progress header string"
       );
+
+      let progressPage = gShadowRoot.querySelector("div[name='page-progress']");
+      let doneButton = progressPage.querySelector("#done-button");
+      ok(isHidden(doneButton), "Done button should be hidden");
+      let cancelButton = progressPage.querySelector(".cancel-close");
+      ok(!isHidden(cancelButton), "Cancel button should be visible");
+      ok(cancelButton.disabled, "Cancel button should be disabled");
     });
 
     /**
@@ -294,6 +301,12 @@
         "migration-wizard-progress-done-header",
         "Should be showing completed migration header string"
       );
+
+      let progressPage = gShadowRoot.querySelector("div[name='page-progress']");
+      let doneButton = progressPage.querySelector("#done-button");
+      ok(!isHidden(doneButton), "Done button should be visible and enabled");
+      let cancelButton = progressPage.querySelector(".cancel-close");
+      ok(isHidden(cancelButton), "Cancel button should be hidden");
     });
 
     /**
@@ -312,7 +325,7 @@
       // that one. Let's make this test fail if there are multiple so that we can
       // then update this test to switch to the right pages to test those buttons
       // too.
-      let buttons = gShadowRoot.querySelectorAll(".cancel-close");
+      let buttons = gShadowRoot.querySelectorAll(".cancel-close:not([disabled])");
       is(
         buttons.length,
         1,
@@ -332,7 +345,7 @@
 </head>
 <body>
 <p id="display"></p>
-<div id="content"><migration-wizard id="test-wizard"></migration-wizard></div>
+<div id="content"><migration-wizard id="test-wizard" dialog-mode=""></migration-wizard></div>
 <pre id="test"></pre>
 </body>
 </html>

browser/locales-preview/migrationWizard.ftl

@@ -51,6 +51,7 @@ migration-history-option-label = Browsing history
 migration-form-autofill-option-label = Form autofill data
 migration-import-button-label = Import
 migration-cancel-button-label = Cancel
+migration-done-button-label = Done
 
 migration-wizard-progress-header = Importing Data
 migration-wizard-progress-done-header = Data Imported Successfully