Bug 1560398 - Merge appMenu-fxa-status with appMenu-fxa-container. r=eoger

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

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

browser/base/content/browser-sync.js

@@ -71,7 +71,7 @@ var gSync = {
   },
 
   _generateNodeGetters() {
-    for (let k of ["Status", "Avatar", "Label", "Container"]) {
+    for (let k of ["Status", "Avatar", "Label"]) {
       let prop = "appMenu" + k;
       let suffix = k.toLowerCase();
       delete this[prop];
@@ -394,7 +394,7 @@ var gSync = {
     const status = state.status;
     // Reset the status bar to its original state.
     this.appMenuLabel.setAttribute("label", defaultLabel);
-    this.appMenuContainer.removeAttribute("fxastatus");
+    this.appMenuStatus.removeAttribute("fxastatus");
     this.appMenuAvatar.style.removeProperty("list-style-image");
     this.appMenuLabel.classList.remove("subviewbutton-nav");
 
@@ -406,21 +406,21 @@ var gSync = {
     if (status == UIState.STATUS_LOGIN_FAILED) {
       let tooltipDescription = this.fxaStrings.formatStringFromName("reconnectDescription", [state.email]);
       let errorLabel = this.appMenuStatus.getAttribute("errorlabel");
-      this.appMenuContainer.setAttribute("fxastatus", "login-failed");
+      this.appMenuStatus.setAttribute("fxastatus", "login-failed");
       this.appMenuLabel.setAttribute("label", errorLabel);
       this.appMenuStatus.setAttribute("tooltiptext", tooltipDescription);
       return;
     } else if (status == UIState.STATUS_NOT_VERIFIED) {
       let tooltipDescription = this.fxaStrings.formatStringFromName("verifyDescription", [state.email]);
       let unverifiedLabel = this.appMenuStatus.getAttribute("unverifiedlabel");
-      this.appMenuContainer.setAttribute("fxastatus", "unverified");
+      this.appMenuStatus.setAttribute("fxastatus", "unverified");
       this.appMenuLabel.setAttribute("label", unverifiedLabel);
       this.appMenuStatus.setAttribute("tooltiptext", tooltipDescription);
       return;
     }
 
     // At this point we consider sync to be logged-in.
-    this.appMenuContainer.setAttribute("fxastatus", "signedin");
+    this.appMenuStatus.setAttribute("fxastatus", "signedin");
     this.appMenuLabel.setAttribute("label", state.displayName || state.email);
     this.appMenuLabel.classList.add("subviewbutton-nav");
     this.appMenuStatus.removeAttribute("tooltiptext");
@@ -451,18 +451,18 @@ var gSync = {
   },
 
   onMenuPanelCommand() {
-    switch (this.appMenuContainer.getAttribute("fxastatus")) {
+    switch (this.appMenuStatus.getAttribute("fxastatus")) {
     case "signedin":
       const panel = document.getElementById("appMenu-fxa-status");
       this.emitFxaToolbarTelemetry("toolbar_icon", panel);
       PanelUI.showSubView("PanelUI-fxa", panel);
       break;
+    case "unverified":
+      this.openPrefs("menupanel", "fxaError");
+      PanelUI.hide();
+      break;
     case "error":
-      if (this.appMenuContainer.getAttribute("fxastatus") == "unverified") {
-        this.openPrefs("menupanel", "fxaError");
-      } else {
-        this.openSignInAgainPage("menupanel");
-      }
+      this.openSignInAgainPage("menupanel");
       PanelUI.hide();
       break;
     default:

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

@@ -144,12 +144,11 @@ add_task(async function test_ui_state_loginFailed() {
 
 function checkPanelUIStatusBar({label, tooltip, fxastatus, syncing, syncNowTooltip}) {
   let labelNode = document.getElementById("appMenu-fxa-label");
-  let tooltipNode = document.getElementById("appMenu-fxa-status");
-  let statusNode = document.getElementById("appMenu-fxa-container");
+  let statusNode = document.getElementById("appMenu-fxa-status");
 
   is(labelNode.getAttribute("label"), label, "fxa label has the right value");
-  if (tooltipNode.getAttribute("tooltiptext")) {
-    is(tooltipNode.getAttribute("tooltiptext"), tooltip, "fxa tooltip has the right value");
+  if (statusNode.getAttribute("tooltiptext")) {
+    is(statusNode.getAttribute("tooltiptext"), tooltip, "fxa tooltip has the right value");
   }
   if (fxastatus) {
     is(statusNode.getAttribute("fxastatus"), fxastatus, "fxa fxastatus has the right value");

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

@@ -236,23 +236,22 @@
                        oncommand="PanelUI._onBannerItemSelected(event)"
                        wrap="true"
                        hidden="true"/>
-        <toolbaritem id="appMenu-fxa-container" class="sync-ui-item">
-          <hbox id="appMenu-fxa-status"
-                flex="1"
-                defaultlabel="&fxaSignIn.label;"
+        <toolbaritem id="appMenu-fxa-status"
+                     class="sync-ui-item"
+                     flex="1"
+                     defaultlabel="&fxaSignIn.label;"
 # Despite the name, the tooltip says "Open Sync Preferences" and it is only used when *not* signed in.
 # Bug 1542334 changed the behaviour of the item when signed in so the tooltip was no longer appropriate there.
-                tooltiptext="&fxaSignedIn.tooltip;"
-                errorlabel="&fxaSignInError.label;"
-                unverifiedlabel="&fxaUnverified.label;"
-                onclick="if (event.which == 1) gSync.onMenuPanelCommand();">
-            <image id="appMenu-fxa-avatar"/>
-            <toolbarbutton id="appMenu-fxa-label"
-                class="subviewbutton subviewbutton-iconic"
-                label="&fxaSignIn.label;"
-                fxabrandname="&syncBrand.fxAccount.label;"
-                closemenu="none"/>
-          </hbox>
+                     tooltiptext="&fxaSignedIn.tooltip;"
+                     errorlabel="&fxaSignInError.label;"
+                     unverifiedlabel="&fxaUnverified.label;"
+                     onclick="if (event.which == 1) gSync.onMenuPanelCommand();">
+          <image id="appMenu-fxa-avatar"/>
+          <toolbarbutton id="appMenu-fxa-label"
+                         class="subviewbutton subviewbutton-iconic"
+                         label="&fxaSignIn.label;"
+                         fxabrandname="&syncBrand.fxAccount.label;"
+                         closemenu="none"/>
         </toolbaritem>
         <toolbarseparator class="sync-ui-item"/>
         <toolbaritem>

browser/components/uitour/UITour.jsm

@@ -80,7 +80,7 @@ var UITour = {
     ["accountStatus", {
       query: (aDocument) => {
         // If the user is logged in, use the avatar element.
-        let fxAFooter = aDocument.getElementById("appMenu-fxa-container");
+        let fxAFooter = aDocument.getElementById("appMenu-fxa-status");
         if (fxAFooter.getAttribute("fxastatus")) {
           return aDocument.getElementById("appMenu-fxa-avatar");
         }

browser/themes/osx/customizableui/panelUI.css

@@ -25,13 +25,13 @@ panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
   padding-inline-start: 18px;
 }
 
-#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label {
   /* 18px space before the avatar, then 16px for the avatar */
   padding-inline-start: 34px;
   margin-inline-start: -34px;
 }
 
-#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar {
   margin-inline-start: 18px;
 }
 

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

@@ -528,8 +528,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
   width: 16px;
 }
 
-#appMenu-addon-banners:not(:empty) ~ #appMenu-fxa-container,
-.panel-banner-item:not([hidden]) + #appMenu-fxa-container {
+#appMenu-addon-banners:not(:empty) ~ #appMenu-fxa-status,
+.panel-banner-item:not([hidden]) + #appMenu-fxa-status {
   margin-top: 6px;
 }
 
@@ -568,43 +568,43 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
 }
 
 /* Handle different UI states. */
-#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon,
-#appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar {
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label > .toolbarbutton-icon,
+#appMenu-fxa-status:not([fxastatus="signedin"]) > #appMenu-fxa-avatar {
   display: none;
 }
 
-#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label {
   /* 12px space before the avatar, then 16px for the avatar */
   padding-inline-start: 28px;
   margin-inline-start: -28px;
 }
 
-#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar {
   margin-inline-start: 12px;
 }
 
 /* Error states */
-#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
-#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
+#appMenu-fxa-status[fxastatus="unverified"] > #appMenu-fxa-label,
+#appMenu-fxa-status[fxastatus="login-failed"] > #appMenu-fxa-label {
   list-style-image: url(chrome://browser/skin/warning.svg);
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
-#appMenu-fxa-container[fxastatus="login-failed"],
-#appMenu-fxa-container[fxastatus="unverified"] {
+#appMenu-fxa-status[fxastatus="login-failed"],
+#appMenu-fxa-status[fxastatus="unverified"] {
   background-color: @appmenuWarningBackgroundColor@;
   color: @appmenuWarningColor@;
   border-top: 1px solid @appmenuWarningBorderColor@;
   border-bottom: 1px solid @appmenuWarningBorderColor@;
 }
 
-#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
-#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
+#appMenu-fxa-status[fxastatus="login-failed"]:hover,
+#appMenu-fxa-status[fxastatus="unverified"]:hover {
   background-color: @appmenuWarningBackgroundColorHover@;
 }
 
-#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
-#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
+#appMenu-fxa-status[fxastatus="login-failed"]:hover:active,
+#appMenu-fxa-status[fxastatus="unverified"]:hover:active {
   background-color: @appmenuWarningBackgroundColorActive@;
 }
 
@@ -666,19 +666,19 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
   background: @appmenuWarningBackgroundColorActiveBrightText@;
 }
 
-:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"],
-:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] {
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"],
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"] {
   background-color: @appmenuWarningBackgroundColorBrightText@;
   color: @appmenuWarningColorBrightText@;
 }
 
-:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
-:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"]:hover,
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover {
   background-color: @appmenuWarningBackgroundColorHoverBrightText@;
 }
 
-:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
-:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"]:hover:active,
+:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover:active {
   background-color: @appmenuWarningBackgroundColorActiveBrightText@;
 }