Bug 1201331 (part 1) - use a broadcaster to manage the Sync status. r=adw

This patch leverages broadcasters to keep the various sync UI elements sane.
Rather than adding yet another button ID to browser-syncui, we now just update
the broadcaster and let all the elements automagically get the attributes.

browser/base/content/browser-sets.inc

@@ -177,6 +177,14 @@
     <broadcaster id="isFrameImage"/>
     <broadcaster id="singleFeedMenuitemState" disabled="true"/>
     <broadcaster id="multipleFeedsMenuState" hidden="true"/>
+
+    <!-- Sync broadcasters -->
+    <!-- A broadcaster of a number of attributes suitable for "sync now" UI -
+        A 'syncstatus' attribute is set while actively syncing, and the label
+        attribute which changes from "sync now" to "syncing" etc. -->
+    <broadcaster id="sync-status"/>
+    <!-- broadcasters of the "hidden" attribute to reflect setup state for
+         menus -->
     <broadcaster id="sync-setup-state"/>
     <broadcaster id="sync-syncnow-state" hidden="true"/>
     <broadcaster id="sync-reauth-state" hidden="true"/>

browser/base/content/browser-syncui.js

@@ -77,6 +77,10 @@ var gSyncUI = {
       Services.obs.addObserver(this, topic, true);
     }, this);
 
+    // initial label for the sync buttons.
+    let broadcaster = document.getElementById("sync-status");
+    broadcaster.setAttribute("label", this._stringBundle.GetStringFromName("syncnow.label"));
+
     this.updateUI();
   },
 
@@ -176,14 +180,10 @@ var gSyncUI = {
 
     this.log.debug("onActivityStart with numActive", this._numActiveSyncTasks);
     if (++this._numActiveSyncTasks == 1) {
-      let button = document.getElementById("sync-button");
-      if (button) {
-        button.setAttribute("status", "active");
-      }
-      let container = document.getElementById("PanelUI-footer-fxa");
-      if (container) {
-        container.setAttribute("syncstatus", "active");
-      }
+      let broadcaster = document.getElementById("sync-status");
+      broadcaster.setAttribute("syncstatus", "active");
+      broadcaster.setAttribute("label", this._stringBundle.GetStringFromName("syncing.label"));
+      broadcaster.setAttribute("disabled", "true");
     }
     this.updateUI();
   },
@@ -203,14 +203,10 @@ var gSyncUI = {
       return; // active tasks are still ongoing...
     }
 
-    let syncButton = document.getElementById("sync-button");
-    if (syncButton) {
-      syncButton.removeAttribute("status");
-    }
-    let fxaContainer = document.getElementById("PanelUI-footer-fxa");
-    if (fxaContainer) {
-      fxaContainer.removeAttribute("syncstatus");
-    }
+    let broadcaster = document.getElementById("sync-status");
+    broadcaster.removeAttribute("syncstatus");
+    broadcaster.removeAttribute("disabled");
+    broadcaster.setAttribute("label", this._stringBundle.GetStringFromName("syncnow.label"));
     this.updateUI();
   },
 
@@ -313,8 +309,8 @@ var gSyncUI = {
     gFxAccounts.openSignInAgainPage(entryPoint);
   },
 
-  /* Update the tooltip for the Sync Toolbar button and the Sync spinner in the
-     FxA hamburger area.
+  /* Update the tooltip for the sync-status broadcaster (which will update the
+     Sync Toolbar button and the Sync spinner in the FxA hamburger area.)
      If Sync is configured, the tooltip is when the last sync occurred,
      otherwise the tooltip reflects the fact that Sync needs to be
      (re-)configured.
@@ -364,16 +360,13 @@ var gSyncUI = {
     // sure it hasn't been torn down since we started.
     if (!gBrowser)
       return;
-    let syncButton = document.getElementById("sync-button");
-    let statusButton = document.getElementById("PanelUI-fxa-icon");
 
-    for (let button of [syncButton, statusButton]) {
-      if (button) {
-        if (tooltiptext) {
-          button.setAttribute("tooltiptext", tooltiptext);
-        } else {
-          button.removeAttribute("tooltiptext");
-        }
+    let broadcaster = document.getElementById("sync-status");
+    if (broadcaster) {
+      if (tooltiptext) {
+        broadcaster.setAttribute("tooltiptext", tooltiptext);
+      } else {
+        broadcaster.removeAttribute("tooltiptext");
       }
     }
   }),

browser/base/content/browser.xul

@@ -1041,6 +1041,7 @@
 
       <toolbarbutton id="sync-button"
                      class="toolbarbutton-1 chromeclass-toolbar-additional"
+                     observes="sync-status"
                      label="&syncToolbarButton.label;"
                      oncommand="gSyncUI.handleToolbarButton()"/>
     </toolbarpalette>

browser/base/content/test/general/browser_syncui.js

@@ -128,14 +128,17 @@ add_task(function* testSyncLoginError() {
 });
 
 function checkButtonsStatus(shouldBeActive) {
-  let button = document.getElementById("sync-button");
-  let fxaContainer = document.getElementById("PanelUI-footer-fxa");
-  if (shouldBeActive) {
-    Assert.equal(button.getAttribute("status"), "active");
-    Assert.equal(fxaContainer.getAttribute("syncstatus"), "active");
-  } else {
-    Assert.ok(!button.hasAttribute("status"));
-    Assert.ok(!fxaContainer.hasAttribute("syncstatus"));
+  for (let eid of [
+    "sync-status", // the broadcaster itself.
+    "sync-button", // the main sync button which observes the broadcaster
+    "PanelUI-fxa-icon", // the sync icon in the fxa footer that observes it.
+    ]) {
+    let elt = document.getElementById(eid);
+    if (shouldBeActive) {
+      Assert.equal(elt.getAttribute("syncstatus"), "active", `${eid} should be active`);;
+    } else {
+      Assert.ok(!elt.hasAttribute("syncstatus"), `${eid} should have no status attr`);
+    }
   }
 }
 

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

@@ -34,7 +34,10 @@
           <toolbarseparator/>
           <toolbarbutton id="PanelUI-fxa-icon"
                          oncommand="gSyncUI.doSync();"
-                         closemenu="none"/>
+                         closemenu="none">
+            <observes element="sync-status" attribute="syncstatus"/>
+            <observes element="sync-status" attribute="tooltiptext"/>
+          </toolbarbutton>
         </hbox>
 
         <hbox id="PanelUI-footer-inner">

browser/themes/osx/browser.css

@@ -811,7 +811,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-ic
     -moz-image-region: rect(18px, 252px, 36px, 234px);
   }
 
-  #sync-button@toolbarButtonPressed@:not([status="active"]) {
+  #sync-button@toolbarButtonPressed@:not([syncstatus="active"]) {
     -moz-image-region: rect(18px, 270px, 36px, 252px);
   }
 
@@ -974,7 +974,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-ic
     -moz-image-region: rect(36px, 504px, 72px, 468px);
   }
 
-  #sync-button@toolbarButtonPressed@:not([status="active"]) {
+  #sync-button@toolbarButtonPressed@:not([syncstatus="active"]) {
     -moz-image-region: rect(36px, 540px, 72px, 504px);
   }
 

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

@@ -672,7 +672,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
 }
 
-#PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
+#PanelUI-fxa-icon[syncstatus="active"] {
   list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar.png);
 }
 
@@ -1535,7 +1535,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left {
     list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png);
   }
 
-  #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
+  #PanelUI-fxa-icon[syncstatus="active"] {
     list-style-image: url(chrome://browser/skin/syncProgress-horizontalbar@2x.png);
   }
 

browser/themes/shared/menupanel.inc.css

@@ -63,7 +63,7 @@
     -moz-image-region: rect(0px, 384px, 32px, 352px);
   }
 
-  #sync-button[cui-areatype="menu-panel"][status="active"] {
+  #sync-button[cui-areatype="menu-panel"][syncstatus="active"] {
     list-style-image: url(chrome://browser/skin/syncProgress-menuPanel.png);
     -moz-image-region: rect(0px, 32px, 32px, 0px);
   }
@@ -282,7 +282,7 @@
     -moz-image-region: rect(0px, 768px, 64px, 704px);
   }
 
-  #sync-button[cui-areatype="menu-panel"][status="active"] {
+  #sync-button[cui-areatype="menu-panel"][syncstatus="active"] {
     list-style-image: url(chrome://browser/skin/syncProgress-menuPanel@2x.png);
     -moz-image-region: rect(0px, 64px, 64px, 0px);
   }

browser/themes/shared/toolbarbuttons.inc.css

@@ -56,12 +56,12 @@ toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarke
   -moz-image-region: rect(0, 270px, 18px, 252px);
 }
 
-#sync-button[cui-areatype="toolbar"][status="active"] {
+#sync-button[cui-areatype="toolbar"][syncstatus="active"] {
   list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
   -moz-image-region: rect(0, 18px, 18px, 0px);
 }
 
-toolbar[brighttext] #sync-button[status="active"] {
+toolbar[brighttext] #sync-button[syncstatus="active"] {
   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
 }
 
@@ -256,12 +256,12 @@ toolbar[brighttext] #sync-button[status="active"] {
     -moz-image-region: rect(0, 540px, 36px, 504px);
   }
 
-  #sync-button[cui-areatype="toolbar"][status="active"] {
+  #sync-button[cui-areatype="toolbar"][syncstatus="active"] {
     list-style-image: url("chrome://browser/skin/syncProgress-toolbar@2x.png");
     -moz-image-region: rect(0, 36px, 36px, 0px);
   }
 
-  toolbar[brighttext] #sync-button[cui-areatype="toolbar"][status="active"] {
+  toolbar[brighttext] #sync-button[cui-areatype="toolbar"][syncstatus="active"] {
     list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted@2x.png");
   }
 

services/sync/locales/en-US/sync.properties

@@ -24,3 +24,6 @@ error.sync.eol.label = Service Unavailable
 error.sync.eol.description = Your Firefox Sync service is no longer available. You need to upgrade %1$S to keep syncing.
 sync.eol.learnMore.label = Learn more
 sync.eol.learnMore.accesskey = L
+
+syncnow.label = Sync Now
+syncing.label = Syncing