Bug 1664307 - Revise the pairing modal. r=markh,fluent-reviewers,pref…

…erences-reviewers,flod,Gijs Differential Revision: https://phabricator.services.mozilla.com/D89824
iaxat · Sep 11, 2020 · e7208b0 · e7208b0
1 parent e4a1403
commit e7208b0
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 5 deletions.
diff --git a/browser/components/preferences/fxaPairDevice.xhtml b/browser/components/preferences/fxaPairDevice.xhtml
@@ -24,13 +24,28 @@
   <script src="chrome://browser/content/preferences/fxaPairDevice.js"/>
 
   <vbox id="qrCodeDisplay">
-    <description class="pairHeading" data-l10n-id="fxa-qrcode-heading-phase1">
+    <description class="pairHeading" data-l10n-id="fxa-qrcode-heading-step1">
       <html:a
         id="connect-another-device-link"
         data-l10n-name="connect-another-device"
         class="text-link" target="_blank"/>
     </description>
-    <description class="pairHeading" data-l10n-id="fxa-qrcode-heading-phase2"></description>
+    <description class="pairHeading" data-l10n-id="fxa-qrcode-heading-step2"></description>
+    <description class="pairHeading" data-l10n-id="fxa-qrcode-heading-step3">
+      <html:img
+        src="chrome://browser/skin/preferences/ios-menu.svg"
+        data-l10n-name="ios-menu-icon"
+        class="menu-icon"/>
+      <html:img
+        src="chrome://browser/skin/preferences/android-menu.svg"
+        data-l10n-name="android-menu-icon"
+        class="menu-icon"/>
+      <html:img
+        src="chrome://global/skin/icons/settings.svg"
+        data-l10n-name="settings-icon"
+        class="menu-icon"/>
+    </description>
+    <description class="pairHeading" data-l10n-id="fxa-qrcode-heading-step4"></description>
     <vbox>
       <vbox align="center" id="qrWrapper" pairing-status="loading">
         <box id="qrContainer"></box>

diff --git a/browser/locales/en-US/browser/preferences/fxaPairDevice.ftl b/browser/locales/en-US/browser/preferences/fxaPairDevice.ftl
@@ -6,9 +6,13 @@ fxa-pair-device-dialog =
     .title = Connect Another Device
     .style = width: 26em; min-height: 35em;
 
-fxa-qrcode-heading-phase1 = 1. If you haven’t already, install <a data-l10n-name="connect-another-device">Firefox on your mobile device</a>.
+fxa-qrcode-heading-step1 = 1. If you haven’t already, install <a data-l10n-name="connect-another-device">Firefox on your mobile device</a>.
 
-fxa-qrcode-heading-phase2 = 2. Then sign in to { -sync-brand-short-name }, or on Android scan the pairing code from inside the { -sync-brand-short-name } settings.
+fxa-qrcode-heading-step2 = 2. Open Firefox on your mobile device.
+
+fxa-qrcode-heading-step3 = 3. Open the <b>menu</b> (<img data-l10n-name="ios-menu-icon"/> or <img data-l10n-name="android-menu-icon"/>), tap <img data-l10n-name="settings-icon"/> <b>Settings</b> and select <b>Turn on Sync</b>
+
+fxa-qrcode-heading-step4 = 4. Scan this code:
 
 fxa-qrcode-error-title = Pairing unsuccessful.
 

diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn
@@ -121,6 +121,7 @@
   skin/classic/browser/protections/breached-password.svg       (../shared/protections/breached-password.svg)
   skin/classic/browser/protections/new-feature.svg             (../shared/protections/new-feature.svg)
 
+  skin/classic/browser/preferences/android-menu.svg            (../shared/preferences/android-menu.svg)
   skin/classic/browser/preferences/bookmark.svg                (../shared/preferences/bookmark.svg)
   skin/classic/browser/preferences/critters-postcard.jpg       (../shared/preferences/critters-postcard.jpg)
   skin/classic/browser/preferences/extensions.svg              (../shared/preferences/extensions.svg)
@@ -131,6 +132,7 @@
   skin/classic/browser/preferences/fxaPairDevice.css           (../shared/preferences/fxaPairDevice.css)
   skin/classic/browser/preferences/general.svg                 (../shared/preferences/general.svg)
   skin/classic/browser/preferences/history.svg                 (../shared/preferences/history.svg)
+  skin/classic/browser/preferences/ios-menu.svg                (../shared/preferences/ios-menu.svg)
   skin/classic/browser/preferences/no-search-bar.svg           (../shared/preferences/no-search-bar.svg)
   skin/classic/browser/preferences/no-search-results.svg       (../shared/preferences/no-search-results.svg)
   skin/classic/browser/preferences/preferences.svg             (../shared/preferences/preferences.svg)

diff --git a/browser/themes/shared/preferences/android-menu.svg b/browser/themes/shared/preferences/android-menu.svg
diff --git a/browser/themes/shared/preferences/fxaPairDevice.css b/browser/themes/shared/preferences/fxaPairDevice.css
@@ -8,7 +8,14 @@
 
 .pairHeading {
   padding-bottom: 1em;
-  text-align: center;
+}
+
+.menu-icon {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 #qrWrapper {

diff --git a/browser/themes/shared/preferences/ios-menu.svg b/browser/themes/shared/preferences/ios-menu.svg