Bug 1570568 - Update Fxa menu to reflect decoupling r=eoger,markh

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

--HG--
extra : moz-landing-system : lando

browser/base/content/browser-sync.js

@@ -376,6 +376,15 @@ var gSync = {
     const cadButtonEl = document.getElementById(
       "PanelUI-fxa-menu-connect-device-button"
     );
+
+    const syncPrefsButtonEl = document.getElementById(
+      "PanelUI-fxa-menu-sync-prefs-button"
+    );
+
+    const syncSetupButtonEl = document.getElementById(
+      "PanelUI-fxa-menu-setup-sync-button"
+    );
+
     const syncNowButtonEl = document.getElementById(
       "PanelUI-fxa-menu-syncnow-button"
     );
@@ -396,9 +405,11 @@ var gSync = {
 
     fxaMenuPanel.removeAttribute("title");
     cadButtonEl.setAttribute("disabled", true);
-    syncNowButtonEl.setAttribute("disabled", true);
+    syncNowButtonEl.setAttribute("hidden", true);
     fxaMenuAccountButtonEl.classList.remove("subviewbutton-nav");
     fxaMenuAccountButtonEl.removeAttribute("closemenu");
+    syncPrefsButtonEl.setAttribute("hidden", true);
+    syncSetupButtonEl.removeAttribute("hidden");
 
     if (state.status === UIState.STATUS_NOT_CONFIGURED) {
       mainWindowEl.style.removeProperty("--avatar-image-url");
@@ -435,7 +446,13 @@ var gSync = {
       }
 
       cadButtonEl.removeAttribute("disabled");
-      syncNowButtonEl.removeAttribute("disabled");
+
+      if (state.syncEnabled) {
+        syncNowButtonEl.removeAttribute("hidden");
+        syncPrefsButtonEl.removeAttribute("hidden");
+        syncSetupButtonEl.setAttribute("hidden", true);
+      }
+
       fxaMenuAccountButtonEl.classList.add("subviewbutton-nav");
       fxaMenuAccountButtonEl.setAttribute("closemenu", "none");
 

browser/base/content/test/sync/browser_sync.js

@@ -58,18 +58,19 @@ add_task(async function test_ui_state_signedin() {
     headerDescription: "Settings",
     enabledItems: [
       "PanelUI-fxa-menu-sendtab-button",
-      "PanelUI-fxa-menu-remotetabs-button",
       "PanelUI-fxa-menu-connect-device-button",
+      "PanelUI-fxa-menu-syncnow-button",
+      "PanelUI-fxa-menu-remotetabs-button",
       "PanelUI-fxa-menu-sync-prefs-button",
       "PanelUI-fxa-menu-logins-button",
       "PanelUI-fxa-menu-monitor-button",
       "PanelUI-fxa-menu-send-button",
-      "PanelUI-fxa-menu-syncnow-button",
       "PanelUI-fxa-menu-account-settings-button",
       "PanelUI-fxa-menu-account-devices-button",
       "PanelUI-fxa-menu-account-signout-button",
     ],
     disabledItems: [],
+    hiddenItems: ["PanelUI-fxa-menu-setup-sync-button"],
   });
   if (!msBadgeEnabled) {
     checkFxAAvatar("signedin");
@@ -125,15 +126,16 @@ add_task(async function test_ui_state_unconfigured() {
     headerDescription: "Turn on Sync",
     enabledItems: [
       "PanelUI-fxa-menu-sendtab-button",
+      "PanelUI-fxa-menu-setup-sync-button",
       "PanelUI-fxa-menu-remotetabs-button",
-      "PanelUI-fxa-menu-sync-prefs-button",
       "PanelUI-fxa-menu-logins-button",
       "PanelUI-fxa-menu-monitor-button",
       "PanelUI-fxa-menu-send-button",
     ],
-    disabledItems: [
+    disabledItems: ["PanelUI-fxa-menu-connect-device-button"],
+    hiddenItems: [
       "PanelUI-fxa-menu-syncnow-button",
-      "PanelUI-fxa-menu-connect-device-button",
+      "PanelUI-fxa-menu-sync-prefs-button",
     ],
   });
   if (!msBadgeEnabled) {
@@ -166,16 +168,21 @@ add_task(async function test_ui_state_syncdisabled() {
     headerDescription: "Settings",
     enabledItems: [
       "PanelUI-fxa-menu-sendtab-button",
-      "PanelUI-fxa-menu-remotetabs-button",
       "PanelUI-fxa-menu-connect-device-button",
-      "PanelUI-fxa-menu-sync-prefs-button",
+      "PanelUI-fxa-menu-setup-sync-button",
+      "PanelUI-fxa-menu-remotetabs-button",
       "PanelUI-fxa-menu-logins-button",
       "PanelUI-fxa-menu-monitor-button",
       "PanelUI-fxa-menu-send-button",
-      // This one will move to `disabledItems` in subsequent patches!
-      "PanelUI-fxa-menu-syncnow-button",
+      "PanelUI-fxa-menu-account-settings-button",
+      "PanelUI-fxa-menu-account-devices-button",
+      "PanelUI-fxa-menu-account-signout-button",
     ],
     disabledItems: [],
+    hiddenItems: [
+      "PanelUI-fxa-menu-syncnow-button",
+      "PanelUI-fxa-menu-sync-prefs-button",
+    ],
   });
   if (!msBadgeEnabled) {
     checkFxAAvatar("signedin");
@@ -207,15 +214,16 @@ add_task(async function test_ui_state_unverified() {
     headerDescription: state.email,
     enabledItems: [
       "PanelUI-fxa-menu-sendtab-button",
+      "PanelUI-fxa-menu-setup-sync-button",
       "PanelUI-fxa-menu-remotetabs-button",
-      "PanelUI-fxa-menu-sync-prefs-button",
       "PanelUI-fxa-menu-logins-button",
       "PanelUI-fxa-menu-monitor-button",
       "PanelUI-fxa-menu-send-button",
     ],
-    disabledItems: [
+    disabledItems: ["PanelUI-fxa-menu-connect-device-button"],
+    hiddenItems: [
       "PanelUI-fxa-menu-syncnow-button",
-      "PanelUI-fxa-menu-connect-device-button",
+      "PanelUI-fxa-menu-sync-prefs-button",
     ],
   });
   checkFxAAvatar("unverified");
@@ -245,15 +253,16 @@ add_task(async function test_ui_state_loginFailed() {
     headerDescription: state.email,
     enabledItems: [
       "PanelUI-fxa-menu-sendtab-button",
+      "PanelUI-fxa-menu-setup-sync-button",
       "PanelUI-fxa-menu-remotetabs-button",
-      "PanelUI-fxa-menu-sync-prefs-button",
       "PanelUI-fxa-menu-logins-button",
       "PanelUI-fxa-menu-monitor-button",
       "PanelUI-fxa-menu-send-button",
     ],
-    disabledItems: [
+    disabledItems: ["PanelUI-fxa-menu-connect-device-button"],
+    hiddenItems: [
       "PanelUI-fxa-menu-syncnow-button",
-      "PanelUI-fxa-menu-connect-device-button",
+      "PanelUI-fxa-menu-sync-prefs-button",
     ],
   });
   checkFxAAvatar("unverified");
@@ -338,6 +347,7 @@ async function checkFxaToolbarButtonPanel({
   headerDescription,
   enabledItems,
   disabledItems,
+  hiddenItems,
 }) {
   is(
     document.getElementById("fxa-menu-header-title").value,
@@ -359,6 +369,11 @@ async function checkFxaToolbarButtonPanel({
     const el = document.getElementById(id);
     is(el.getAttribute("disabled"), "true", id + " is disabled");
   }
+
+  for (const id of hiddenItems) {
+    const el = document.getElementById(id);
+    is(el.getAttribute("hidden"), "true", id + " is hidden");
+  }
 }
 
 async function checkFxABadged() {

browser/components/customizableui/content/panelUI.inc.xul

@@ -742,30 +742,36 @@
                         class="subviewbutton subviewbutton-iconic subviewbutton-nav"
                         closemenu="none"
                         oncommand="gSync.showSendToDeviceViewFromFxaMenu(this);"/>
-        <toolbarbutton id="PanelUI-fxa-menu-remotetabs-button"
-                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                        label="&appMenuRemoteTabs.label;"
-                        closemenu="none"
-                        oncommand="gSync.showRemoteTabsFromFxaMenu(this);"/>
+        <toolbarseparator/>
         <!-- The `Connect Another Device` button is disabled by default until the user logs into Sync. -->
         <toolbarbutton id="PanelUI-fxa-menu-connect-device-button"
                         class="subviewbutton subviewbutton-iconic"
                         label="&fxa.menu.connectAnotherDevice2.label;"
                         disabled="true"
                         oncommand="gSync.openConnectAnotherDeviceFromFxaMenu(this);"/>
-        <toolbarbutton id="PanelUI-fxa-menu-sync-prefs-button"
-                        class="subviewbutton subviewbutton-iconic"
-                        label="&fxa.menu.syncSettings.label;"
-                        oncommand="gSync.openPrefsFromFxaMenu('sync_settings', this);"/>
         <toolbarseparator/>
-        <!-- The `Sync Now` button is disabled by default until the user logs into Sync. -->
+        <!-- The `Sync Now` button is hidden by default until the user logs into Sync. -->
         <toolbarbutton id="PanelUI-fxa-menu-syncnow-button"
                         label="&syncSyncNowItem.label;"
                         syncinglabel="&syncSyncNowItemSyncing.label;"
-                        disabled="true"
+                        hidden="true"
                         class="subviewbutton subviewbutton-iconic"
                         oncommand="gSync.doSyncFromFxaMenu(this);"
                         closemenu="none"/>
+        <toolbarbutton id="PanelUI-fxa-menu-setup-sync-button"
+                        class="subviewbutton subviewbutton-iconic"
+                        label="&fxa.menu.setupSync.label;"
+                        oncommand="gSync.openPrefsFromFxaMenu('sync_settings', this);"/>
+        <toolbarbutton id="PanelUI-fxa-menu-remotetabs-button"
+                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
+                        label="&appMenuRemoteTabs.label;"
+                        closemenu="none"
+                        oncommand="gSync.showRemoteTabsFromFxaMenu(this);"/>
+        <toolbarbutton id="PanelUI-fxa-menu-sync-prefs-button"
+                        class="subviewbutton subviewbutton-iconic"
+                        label="&fxa.menu.syncSettings2.label;"
+                        hidden="true"
+                        oncommand="gSync.openPrefsFromFxaMenu('sync_settings', this);"/>
         <toolbarseparator/>
         <toolbarbutton id="PanelUI-fxa-menu-logins-button"
                         class="subviewbutton subviewbutton-iconic"

browser/locales/en-US/chrome/browser/browser.dtd

@@ -93,7 +93,7 @@ convenience of Safari and Chrome users on macOS. See bug 1398988. -->
 <!-- LOCALIZATION NOTE (fxa.menu) Used to define the different labels
      for the Firefox Account toolbar menu screen. The `Signed in as` text is
      followed by the user's email. -->
-<!ENTITY fxa.menu.syncSettings.label "&syncBrand.shortName.label; Settings…">
+<!ENTITY fxa.menu.syncSettings2.label "&syncBrand.shortName.label; Settings">
 <!ENTITY fxa.menu.connectAnotherDevice2.label "Connect Another Device…">
 <!ENTITY fxa.menu.firefoxAccount "&syncBrand.fxAccount.label;">
 <!ENTITY fxa.menu.signin.label "Sign in to &brandProductName;">
@@ -104,6 +104,7 @@ convenience of Safari and Chrome users on macOS. See bug 1398988. -->
 <!ENTITY fxa.menu.accountSettings.label "Account Settings">
 <!ENTITY fxa.menu.signOut.label "Sign Out…">
 <!ENTITY fxa.menu.deviceSettings.label "Device Settings">
+<!ENTITY fxa.menu.setupSync.label "Set Up &syncBrand.shortName.label;…">
 
 <!-- LOCALIZATION NOTE (fxa.service) Used to define the different FxA services
      for the Firefox Account toolbar menu screen.  -->

browser/themes/shared/customizableui/panelUI.inc.css

@@ -573,7 +573,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 
 /* Handle different UI states. */
 #appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label > .toolbarbutton-icon,
-#appMenu-fxa-status:not([fxastatus="signedin"]) > #appMenu-fxa-avatar {
+#appMenu-fxa-status:not([fxastatus="signedin"]) > #appMenu-fxa-avatar,
+:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
   display: none;
 }
 

browser/themes/shared/menupanel.inc.css

@@ -99,6 +99,7 @@
 }
 
 #PanelUI-fxa-menu-syncnow-button,
+#PanelUI-fxa-menu-setup-sync-button,
 #PanelUI-remotetabs-syncnow {
   list-style-image: url("chrome://browser/skin/sync.svg");
 }