Bug 1814278 - Align the spacing and layout of the new Migration Wizard more closely to the spec. r=kpatenio,fluent-reviewers,flod,settings-reviewers

Along with bringing us closer to the layout and spacing from Figma, this does the following:

1. Changes the header element to an <h1> and uses CSS to get the expected font size. This should
   make the organization of the wizard make more sense to screenreaders.
2. Handles the "single resource" case for Variant 2, where we hide "Select All" and align the
   resource list to the left if there's only a single resource to import.
3. Fixes a string to match the spec.

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

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

@@ -28,7 +28,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-live="polite" aria-busy="true">
           <div name="page-loading">
-            <h3 data-l10n-id="migration-wizard-selection-header"></h3>
+            <h1 data-l10n-id="migration-wizard-selection-header"></h1>
             <div class="loading-block large"></div>
             <div class="loading-block small"></div>
             <div class="loading-block small"></div>
@@ -41,7 +41,7 @@ export class MigrationWizard extends HTMLElement {
           </div>
 
           <div name="page-selection">
-            <h3 data-l10n-id="migration-wizard-selection-header"></h3>
+            <h1 data-l10n-id="migration-wizard-selection-header"></h1>
             <button id="browser-profile-selector">
               <span class="migrator-icon"></span>
               <div class="migrator-description">
@@ -83,7 +83,7 @@ export class MigrationWizard extends HTMLElement {
           </div>
 
           <div name="page-progress">
-            <h3 id="progress-header" data-l10n-id="migration-wizard-progress-header"></h3>
+            <h1 id="progress-header" data-l10n-id="migration-wizard-progress-header"></h1>
             <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>
@@ -116,7 +116,7 @@ export class MigrationWizard extends HTMLElement {
           </div>
 
           <div name="page-safari-permission">
-            <h3 data-l10n-id="migration-wizard-selection-header"></h3>
+            <h1 data-l10n-id="migration-wizard-selection-header"></h1>
             <div data-l10n-id="migration-wizard-safari-permissions-sub-header"></div>
             <ol>
               <li data-l10n-id="migration-wizard-safari-instructions-continue"></li>
@@ -129,7 +129,7 @@ export class MigrationWizard extends HTMLElement {
           </div>
 
           <div name="page-no-browsers-found">
-            <h3 data-l10n-id="migration-wizard-selection-header"></h3>
+            <h1 data-l10n-id="migration-wizard-selection-header"></h1>
             <div class="no-browsers-found">
               <span class="error-icon" role="img"></span>
               <div class="no-browsers-found-message" data-l10n-id="migration-wizard-import-browser-no-browsers"></div>
@@ -564,6 +564,15 @@ export class MigrationWizard extends HTMLElement {
         "migration-all-available-data-label"
       );
     }
+
+    let selectionPage = this.#shadowRoot.querySelector(
+      "div[name='page-selection']"
+    );
+    selectionPage.toggleAttribute("single-item", totalResources == 1);
+
+    this.dispatchEvent(
+      new CustomEvent("MigrationWizard:ResourcesUpdated", { bubbles: true })
+    );
   }
 
   handleEvent(event) {

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

@@ -284,9 +284,10 @@
         let bookmarks = gShadowRoot.querySelector("#bookmarks");
         let history = gShadowRoot.querySelector("#history");
 
-        let selectedDataUpdated = BrowserTestUtils.waitForCondition(() => {
-          return selectedData.textContent == "Bookmarks and history";
-        });
+        let selectedDataUpdated = BrowserTestUtils.waitForEvent(
+          gWiz,
+          "MigrationWizard:ResourcesUpdated"
+        );
         bookmarks.control.checked = true;
         history.control.checked = true;
         bookmarks.dispatchEvent(new CustomEvent("change"));
@@ -309,6 +310,56 @@
         );
       });
 
+
+      /**
+       * Tests variant 2 of the migration wizard when there's a single resource
+       * item.
+       */
+      add_task(async function test_selection_variant_2_single_item() {
+        let resourcesUpdated = BrowserTestUtils.waitForEvent(
+          gWiz,
+          "MigrationWizard:ResourcesUpdated"
+        );
+        gWiz.setState({
+          page: MigrationWizardConstants.PAGES.SELECTION,
+          migrators: [{
+            key: "some-browser-0",
+            displayName: "Some Browser 0 with a single resource",
+            resourceTypes: ["HISTORY"],
+            profile: { id: "person-1", name: "Person 1" },
+          }, {
+            key: "some-browser-1",
+            displayName: "Some Browser 1 with a two resources",
+            resourceTypes: ["HISTORY", "BOOKMARKS"],
+            profile: { id: "person-2", name: "Person 2" },
+          }],
+          showImportAll: true,
+        });
+        await resourcesUpdated;
+
+        let selectAll = gShadowRoot.querySelector("#select-all");
+        let summary = gShadowRoot.querySelector("summary");
+        let details = gShadowRoot.querySelector("details");
+        ok(!details.open, "Details should be closed");
+        details.open = true;
+
+        ok(isHidden(selectAll), "Selection for select-all should be hidden.");
+        ok(!isHidden(summary), "Summary should be shown.");
+        ok(!isHidden(details), "Details should be shown.");
+
+        resourcesUpdated = BrowserTestUtils.waitForEvent(
+          gWiz,
+          "MigrationWizard:ResourcesUpdated"
+        );
+        let browser1Item = gWiz.querySelector("panel-item[key='some-browser-1']");
+        browser1Item.click();
+        await resourcesUpdated;
+
+        ok(!isHidden(selectAll), "Selection for select-all should be shown.");
+        ok(!isHidden(summary), "Summary should be shown.");
+        ok(!isHidden(details), "Details should be shown.");
+      });
+
       /**
        * Tests that the wizard can show partial progress during migration.
        */

browser/components/storybook/stories/migration-wizard.stories.mjs

@@ -70,7 +70,7 @@ const FAKE_BROWSER_LIST = [
   {
     key: "vivaldi",
     displayName: "Vivaldi",
-    resourceTypes: ["HISTORY", "FORMDATA", "PASSWORDS", "BOOKMARKS"],
+    resourceTypes: ["HISTORY"],
     profile: { id: "Default", name: "Default" },
   },
 ];

browser/locales-preview/migrationWizard.ftl

@@ -117,5 +117,5 @@ migration-wizard-progress-success-history =
 
 migration-wizard-safari-permissions-sub-header = To import Safari bookmarks and browsing history:
 migration-wizard-safari-instructions-continue = Select “Continue”
-migration-wizard-safari-instructions-folder = Select Safari folder in the list and click “Open”
+migration-wizard-safari-instructions-folder = Select Safari folder in the list and choose “Open”
 migration-wizard-safari-select-button = Select File

browser/themes/shared/migration/migration-wizard.css

@@ -7,15 +7,25 @@
 :host {
   display: flex;
   flex-direction: column;
-  width: 25.54em;
+  width: 22.34em;
 }
 
-h3 {
+h1 {
+  font-size: 1.30em;
   font-weight: normal;
-  margin-block-start: 0;
+  margin-block: 0 16px;
   min-height: 1em;
 }
 
+ol {
+  padding-inline-start: 24px;
+  margin-block: 16px 0;
+}
+
+li:not(:last-child) {
+  margin-block-end: 16px;
+}
+
 div[name="page-loading"] > .buttons > button {
   color: transparent;
 }
@@ -67,6 +77,7 @@ button {
   display: flex;
   border: 0;
   padding: 8px;
+  margin: 0;
   font-weight: unset;
 }
 
@@ -105,11 +116,12 @@ button {
 }
 
 div[name="page-selection"]:not([show-import-all]) #select-all,
+div[name="page-selection"][show-import-all][single-item] #select-all,
 div[name="page-selection"]:not([show-import-all]) summary {
   display: none;
 }
 
-div[name="page-selection"][show-import-all] label:not(#select-all)  {
+div[name="page-selection"][show-import-all]:not([single-item]) label:not(#select-all)  {
   margin-inline-start: 24px;
 }
 
@@ -121,6 +133,10 @@ div[name="page-selection"][show-import-all] .resource-selection-preamble {
   display: none;
 }
 
+.resource-selection-preamble {
+  margin-block-start: 16px;
+}
+
 details[open] .expand-collapse-icon {
   background-image: url("chrome://browser/skin/zoom-out.svg");
 }
@@ -134,19 +150,28 @@ details[open] .expand-collapse-icon {
   -moz-context-properties: fill;
   fill: currentColor;
   justify-self: end;
+  margin-inline-end: 8px;
 }
 
 details:not([open]) summary {
   margin-block-end: 16px;
 }
 
+#resource-type-list {
+  padding: 0;
+}
+
+#resource-type-list > label {
+  margin-block-start: 16px;
+}
+
 :host(:not([dialog-mode])) .cancel-close {
   display: none;
 }
 
 .resource-progress {
   display: grid;
-  gap: 8px;
+  gap: 16px;
 }
 
 .resource-progress-group {
@@ -202,11 +227,16 @@ details:not([open]) summary {
   align-items: center;
 }
 
+div[name="page-selection"][show-import-all] .resource-selection-details {
+  padding-inline-start: 8px;
+}
+
 .resource-selection-details > summary {
   list-style: none;
   display: grid;
   grid-template-areas: "a b"
                        "c b";
+  margin-block: 16px 0;
 }
 
 @media (prefers-reduced-motion: reduce) {

browser/themes/shared/preferences/preferences.css

@@ -575,6 +575,10 @@ richlistitem[selected] .actionsMenu:focus-visible {
   visibility: hidden;
 }
 
+html|dialog {
+  padding: 24px;
+}
+
 html|dialog::backdrop,
 .dialogOverlay[topmost="true"] {
   background-color: rgba(0,0,0,0.5);