Bug 1818789 - Implement Safari / macOS permission wizard page for Passwords. r=mconley,fluent-reviewers,flod

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

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

@@ -15,6 +15,7 @@ export const MigrationWizardConstants = Object.freeze({
     SELECTION: "selection",
     PROGRESS: "progress",
     SAFARI_PERMISSION: "safari-permission",
+    SAFARI_PASSWORD_PERMISSION: "safari-password-permission",
     NO_BROWSERS_FOUND: "no-browsers-found",
   }),
 

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

@@ -115,6 +115,24 @@ export class MigrationWizard extends HTMLElement {
             </moz-button-group>
           </div>
 
+          <div name="page-safari-password-permission">
+            <h1 data-l10n-id="migration-safari-password-import-header"></h1>  
+            <span data-l10n-id="migration-safari-password-import-steps-header"></span>
+            <ol>
+              <li data-l10n-id="migration-safari-password-import-step1"></li>
+              <li data-l10n-id="migration-safari-password-import-step2"><img class="safari-icon-3dots" data-l10n-name="safari-icon-3dots"/></li>
+              <li data-l10n-id="migration-safari-password-import-step3"></li>
+              <li class="safari-icons-group">
+                <span data-l10n-id="migration-safari-password-import-step4"></span>
+                <span class="page-portrait-icon"></span>
+              </li>
+            </ol>
+            <moz-button-group class="buttons">
+              <button class="cancel-close" data-l10n-id="migration-safari-password-import-skip-button"></button>
+              <button class="primary" data-l10n-id="migration-safari-password-import-select-button"></button>
+            </moz-button-group>
+          </div>
+
           <div name="page-safari-permission">
             <h1 data-l10n-id="migration-wizard-selection-header"></h1>
             <div data-l10n-id="migration-wizard-safari-permissions-sub-header"></div>

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

@@ -199,6 +199,14 @@ SafariPermissions.args = {
   },
 };
 
+export const SafariPasswordPermissions = Template.bind({});
+SafariPasswordPermissions.args = {
+  dialogMode: true,
+  state: {
+    page: MigrationWizardConstants.PAGES.SAFARI_PASSWORD_PERMISSION,
+  },
+};
+
 export const NoBrowsersFound = Template.bind({});
 NoBrowsersFound.args = {
   dialogMode: true,

browser/locales-preview/migrationWizard.ftl

@@ -82,6 +82,16 @@ migration-wizard-progress-icon-in-progress =
 migration-wizard-progress-icon-completed =
   .aria-label = Completed
 
+migration-safari-password-import-header = Import Passwords from Safari
+migration-safari-password-import-steps-header = To import Safari passwords:
+migration-safari-password-import-step1 = In Safari, open “Safari” menu and go to Preferences > Passwords
+migration-safari-password-import-step2 = Select the <img data-l10n-name="safari-icon-3dots"/> button and choose “Export All Passwords”
+migration-safari-password-import-step3 = Save the passwords file
+migration-safari-password-import-step4 = Use “Select File” below to choose the passwords file you saved
+migration-safari-password-import-skip-button = Skip
+migration-safari-password-import-select-button = Select File
+
+
 # Shown in the migration wizard after importing bookmarks from another
 # browser has completed.
 #

browser/themes/shared/jar.inc.mn

@@ -73,6 +73,7 @@
   skin/classic/browser/migration/migration-wizard.css          (../shared/migration/migration-wizard.css)
   skin/classic/browser/migration/success.svg                   (../shared/migration/success.svg)
   skin/classic/browser/migration/progress-mask.svg                   (../shared/migration/progress-mask.svg)
+  skin/classic/browser/migration/safari-icon-3dots.svg                   (../shared/migration/safari-icon-3dots.svg)
   skin/classic/browser/notification-icons/autoplay-media.svg                (../shared/notification-icons/autoplay-media.svg)
   skin/classic/browser/notification-icons/autoplay-media-blocked.svg        (../shared/notification-icons/autoplay-media-blocked.svg)
   skin/classic/browser/notification-icons/camera-blocked.svg                (../shared/notification-icons/camera-blocked.svg)

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

@@ -219,6 +219,25 @@ details:not([open]) summary {
   margin-inline-end: 8px;
 }
 
+.page-portrait-icon {
+  width: 16px;
+  height: 16px;
+  content: url("chrome://global/skin/icons/page-portrait.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  vertical-align: middle;
+}
+
+.safari-icon-3dots {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  content: url("chrome://browser/skin/migration/safari-icon-3dots.svg");
+  -moz-context-properties: fill, stroke;
+  fill: currentColor;
+  stroke: color-mix(in srgb, currentColor 10%, transparent 90%);
+}
+
 .no-browsers-found-message {
   display: flex;
 }

browser/themes/shared/migration/safari-icon-3dots.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <circle cx="8" cy="8" r="8" fill="context-stroke"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.143 7h-.857L4 7.286v.857l.286.285h.857l.286-.285v-.857L5.143 7Zm3.286 0H7.57l-.285.286v.857l.285.285h.858l.285-.285v-.857L8.43 7Zm2.428 0h.857l.286.286v.857l-.286.285h-.857l-.285-.285v-.857L10.857 7Z" fill="context-fill"/>
+</svg>