diff --git a/browser/base/content/browser-sets.inc b/browser/base/content/browser-sets.inc
index 0b5b1030b0f..d65de7c73db 100644
--- a/browser/base/content/browser-sets.inc
+++ b/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"/>
diff --git a/browser/base/content/browser-syncui.js b/browser/base/content/browser-syncui.js
index e122c5f0517..d3b4cac26c9 100644
--- a/browser/base/content/browser-syncui.js
+++ b/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");
       }
     }
   }),
diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 28b8b6b8bb9..a9195ee7d66 100644
--- a/browser/base/content/browser.xul
+++ b/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>
diff --git a/browser/base/content/test/general/browser_syncui.js b/browser/base/content/test/general/browser_syncui.js
index 48b9b419a5b..815a9f72b5f 100644
--- a/browser/base/content/test/general/browser_syncui.js
+++ b/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`);
+    }
   }
 }
 
diff --git a/browser/components/customizableui/content/panelUI.inc.xul b/browser/components/customizableui/content/panelUI.inc.xul
index b8aaf5f7f30..9c5ad033092 100644
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/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">
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index 46b10f1794a..be970e126eb 100644
--- a/browser/themes/osx/browser.css
+++ b/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);
   }
 
diff --git a/browser/themes/shared/customizableui/panelUIOverlay.inc.css b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
index 4cec72c2937..ae56c56611d 100644
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/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);
   }
 
diff --git a/browser/themes/shared/menupanel.inc.css b/browser/themes/shared/menupanel.inc.css
index 3fe8f4f9cad..29c3843afaa 100644
--- a/browser/themes/shared/menupanel.inc.css
+++ b/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);
   }
diff --git a/browser/themes/shared/toolbarbuttons.inc.css b/browser/themes/shared/toolbarbuttons.inc.css
index 34fe448fbc3..db6f4be1b36 100644
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/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");
   }
 
diff --git a/services/sync/locales/en-US/sync.properties b/services/sync/locales/en-US/sync.properties
index ede7afb5bdc..8c3b9b14c50 100644
--- a/services/sync/locales/en-US/sync.properties
+++ b/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