Bug 1763138 - Hook up the tabs-setup flow to the sync status and fxa …

…device list to enable the first steps. r=dao,fluent-reviewers,flod

* The FxA signin/signup step is wired up
* The signin with another device step to open the about:preferences deep-link is mostly wired up

Not implemented here:
* Detecting and displaying recent remote tabs is not implemented yet
* Offline and other error conditions not handled
* We may need to wait for FxA to be ready
* Only the bare bones of markup/CSS is implemented
* String for all but the Step 1 of 3 in scope here are still placeholders

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

browser/components/myfirefox/myFirefox.ftl

@@ -1,37 +1,43 @@
 # 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/.
-# NOTE: New strings should use the about-logins- prefix.
 
-myfirefox-page-title = My Firefox
+-myfirefox-brand-name = My Firefox
+
+myfirefox-page-title = { -myfirefox-brand-name }
 
 myfirefox-colorway-button = Colorway Closet
 
 # Used instead of the localized relative time when a timestamp is within a minute or so of now
 myfirefox-just-now-timestamp = Just now
 
+# This is a headline for an area in the product where users can resume and re-open tabs they have previously viewed on other devices.
 myfirefox-tabpickup-header = Tab Pickup
 myfirefox-tabpickup-description = Pick up where you left off on another device.
 
 myfirefox-tabpickup-recenttabs-description = Recent tabs list would go here
 
-# These are placeholders for now..
+# Variables:
+#  $percentValue (Number): the percentage value for setup completion
+myfirefox-tabpickup-progress-label = { $percentValue }% complete
 
-myfirefox-tabpickup-step-signin-header = Step 1 Header
-myfirefox-tabpickup-step-signin-description = Step 1 description.
-myfirefox-tabpickup-step-signin-primarybutton = Step 1 Action
+myfirefox-tabpickup-step-signin-header = Step 1 of 3: Sign in to { -brand-product-name }
+myfirefox-tabpickup-step-signin-description = To get your mobile tabs on this device, sign in to { -brand-product-name } and turn on sync.
+myfirefox-tabpickup-step-signin-primarybutton = Continue
+
+# These are placeholders for now..
 
-myfirefox-tabpickup-adddevice-header = Step 2 Header
+myfirefox-tabpickup-adddevice-header = Step 2 of 3: Sign in on a mobile device
 myfirefox-tabpickup-adddevice-description = Step 2 description.
-myfirefox-tabpickup-adddevice-primarybutton = Step 2 Action
+myfirefox-tabpickup-adddevice-primarybutton = Get { -brand-product-name } for mobile
 
-myfirefox-tabpickup-synctabs-header = Step 3 Header
+myfirefox-tabpickup-synctabs-header = Step 3 of 3: Sync open tabs
 myfirefox-tabpickup-synctabs-description = Step 3 description.
-myfirefox-tabpickup-synctabs-primarybutton = Step 3 Action
+myfirefox-tabpickup-synctabs-primarybutton = Sync open tabs
 
-myfirefox-tabpickup-setupsuccess-header = Step 4 Header
+myfirefox-tabpickup-setupsuccess-header = Setup Complete!
 myfirefox-tabpickup-setupsuccess-description = Step 4 description.
-myfirefox-tabpickup-setupsuccess-primarybutton = Step 4 Action
+myfirefox-tabpickup-setupsuccess-primarybutton = Get my other tabs
 
 myfirefox-closed-tabs-title = Recently closed
 myfirefox-closed-tabs-collapse-button =

browser/components/myfirefox/myfirefox.html

@@ -9,6 +9,7 @@
     <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'">
     <meta name="color-scheme" content="light dark">
     <title data-l10n-id="myfirefox-page-title"></title>
+    <link rel="localization" href="branding/brand.ftl">
     <link rel="localization" href="preview/myFirefox.ftl"/>
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
     <link rel="stylesheet" href="chrome://browser/content/myfirefox.css">
@@ -23,33 +24,51 @@
     </nav>
     <main>
       <template id="sync-setup-template">
-        <named-deck class="sync-setup-container">
-          <div name="sync-setup-view0" class="card setup-step">
-            <h2 data-l10n-id="myfirefox-tabpickup-step-signin-header" class="card-header"></h2>
+        <named-deck class="sync-setup-container" data-prefix="id:">
+          <div name="sync-setup-view0" data-prefix="id:-view0" class="card setup-step" data-prefix="aria-labelledby:-view0-header">
+            <h2 data-prefix="id:-view0-header" data-l10n-id="myfirefox-tabpickup-step-signin-header" class="card-header"></h2>
             <section class="step-body">
               <p class="step-content" data-l10n-id="myfirefox-tabpickup-step-signin-description"></p>
               <button class="primary" data-action="view0-primary-action" data-l10n-id="myfirefox-tabpickup-step-signin-primarybutton"></button>
             </section>
-            <progress class="step-progress" max="100" value="11"/>
+            <footer>
+              <progress data-prefix="id:-view0-progress" class="step-progress" max="100" value="11"></progress>
+              <label
+                data-prefix="for:-view0-progress"
+                data-l10n-id="myfirefox-tabpickup-progress-label"
+                data-l10n-args='{"percentValue":"11"}'></label>
+            </footer>
           </div>
-          <div name="sync-setup-view1" class="card setup-step">
-            <h2 data-l10n-id="myfirefox-tabpickup-adddevice-header"></h2>
+          <div name="sync-setup-view1" data-prefix="id:-view1" class="card setup-step" data-prefix="aria-labelledby:-view1-header">
+            <h2 data-prefix="id:-view1-header" data-l10n-id="myfirefox-tabpickup-adddevice-header" class="card-header"></h2>
             <section class="step-body">
               <p class="step-content" data-l10n-id="myfirefox-tabpickup-adddevice-description"></p>
               <button class="primary" data-action="view1-primary-action" data-l10n-id="myfirefox-tabpickup-adddevice-primarybutton"></button>
             </section>
-            <progress class="step-progress" max="100" value="33"/>
+            <footer>
+              <progress data-prefix="id:-view1-progress" class="step-progress" max="100" value="33"></progress>
+              <label
+                data-prefix="for:-view1-progress"
+                data-l10n-id="myfirefox-tabpickup-progress-label"
+                data-l10n-args='{"percentValue":"33"}'></label>
+            </footer>
           </div>
-          <div name="sync-setup-view2" class="card setup-step">
-            <h2 data-l10n-id="myfirefox-tabpickup-synctabs-header"></h2>
+          <div name="sync-setup-view2" data-prefix="id:-view2" class="card setup-step" data-prefix="aria-labelledby:-view2-header">
+            <h2 data-prefix="id:-view2-header" data-l10n-id="myfirefox-tabpickup-synctabs-header" class="card-header"></h2>
             <section class="step-body">
               <p class="step-content" data-l10n-id="myfirefox-tabpickup-synctabs-description"></p>
               <button class="primary" data-action="view2-primary-action" data-l10n-id="myfirefox-tabpickup-synctabs-primarybutton"></button>
             </section>
-            <progress class="step-progress" max="100" value="66"/>
+            <footer>
+              <progress data-prefix="id:-view2-progress" class="step-progress" max="100" value="66"></progress>
+              <label
+                data-prefix="for:-view2-progress"
+                data-l10n-id="myfirefox-tabpickup-progress-label"
+                data-l10n-args='{"percentValue":"66"}'></label>
+            </footer>
           </div>
-          <div name="sync-setup-view3" class="card setup-step">
-            <h2 data-l10n-id="myfirefox-tabpickup-setupsuccess-header"></h2>
+          <div name="sync-setup-view3" data-prefix="id:-view3" class="card setup-step" data-prefix="aria-labelledby:-view3-header">
+            <h2 data-prefix="id:-view2-header" data-l10n-id="myfirefox-tabpickup-setupsuccess-header" class="card-header"></h2>
             <section class="step-body">
               <p class="step-content" data-l10n-id="myfirefox-tabpickup-setupsuccess-description"></p>
               <button class="primary" data-action="view3-primary-action" data-l10n-id="myfirefox-tabpickup-setupsuccess-primarybutton"></button>
@@ -58,7 +77,7 @@ <h2 data-l10n-id="myfirefox-tabpickup-setupsuccess-header"></h2>
         </named-deck>
       </template>
       <template id="synced-tabs-template">
-        <div class="synced-tabs-container" hidden>
+        <div class="synced-tabs-container" data-prefix="id:" hidden>
           <div class="card">
             <h2 data-l10n-id="myfirefox-tabpickup-recenttabs-description"></h2>
           </div>

browser/components/myfirefox/myfirefox.js

@@ -26,3 +26,7 @@ window.addEventListener("load", () => {
   );
   document.getElementById("recently-closed-tabs-container").onLoad();
 });
+
+window.addEventListener("unload", () => {
+  tabsSetupFlowManager?.uninit();
+});