Bug 594488 - move status bar UI to an optional toolbar button, r=gavin

--HG--
extra : rebase_source : 9bada2c7b0c3f25f00395a4459a978058e8f8332

browser/base/content/browser-syncui.js

@@ -109,17 +109,10 @@ let gSyncUI = {
     document.getElementById("sync-menu").hidden = needsSetup;
 
     if (gBrowser) {
-      let showLabel = !this._isLoggedIn() && !needsSetup;
-      let button = document.getElementById("sync-status-button");
-      button.setAttribute("class", showLabel ? "statusbarpanel-iconic-text"
-                                             : "statusbarpanel-iconic");
-      button.image = "chrome://browser/skin/sync-16.png";
-
-      if (!this._isLoggedIn()) {
-        //XXXzpao When we move the string bundle, we can add more and make this
-        //        say "needs setup" or something similar. (bug 583381)
-        button.removeAttribute("tooltiptext");
-      }
+      document.getElementById("sync-button").removeAttribute("status");
+    }
+    if (needsSetup) {
+      document.getElementById("sync-button").removeAttribute("tooltiptext");
     }
   },
 
@@ -155,8 +148,7 @@ let gSyncUI = {
   onActivityStart: function SUI_onActivityStart() {
     //XXXzpao Followup: Do this with a class. (bug 583384)
     if (gBrowser)
-      document.getElementById("sync-status-button").image =
-        "chrome://browser/skin/sync-16-throbber.png";
+      document.getElementById("sync-button").setAttribute("status", "active");
   },
 
   onSyncFinish: function SUI_onSyncFinish() {
@@ -304,7 +296,7 @@ let gSyncUI = {
     Weave.Service.sync();
   },
 
-  handleStatusbarButton: function SUI_handleStatusbarButton() {
+  handleToolbarButton: function SUI_handleStatusbarButton() {
     if (Weave.Service.isLoggedIn)
       Weave.Service.sync();
     else if (this._needsSetup())
@@ -361,8 +353,8 @@ let gSyncUI = {
     document.getElementById("sync-lastsyncsep").hidden = false;
 
     if (gBrowser)
-      document.getElementById("sync-status-button").
-               setAttribute("tooltiptext", lastSyncLabel);
+      document.getElementById("sync-button")
+              .setAttribute("tooltiptext", lastSyncLabel);
   },
 
   _onSyncEnd: function SUI__onSyncEnd(success) {

browser/base/content/browser.xul

@@ -1233,7 +1233,12 @@
                        command="cmd_fullZoomEnlarge"
                        tooltiptext="&zoomInButton.tooltip;"/>
       </toolbaritem>
-
+#ifdef MOZ_SERVICES_SYNC
+      <toolbarbutton id="sync-button"
+                     class="toolbarbutton-1 chromeclass-toolbar-additional"
+                     label="&syncToolbarButton.label;"
+                     oncommand="gSyncUI.handleToolbarButton()"/>
+#endif
     </toolbarpalette>
   </toolbox>
 
@@ -1276,14 +1281,6 @@
                       hidden="true"
                       onclick="if (event.button == 0 &amp;&amp; event.detail == 1) displaySecurityInfo();"/>
 #ifdef MOZ_SERVICES_SYNC
-      <statusbarpanel id="sync-status-button"
-                      class="statusbarpanel-iconic"
-                      image="chrome://browser/skin/sync-16.png"
-                      label="&syncLogInItem.label;"
-                      oncommand="gSyncUI.handleStatusbarButton();"
-                      onmousedown="event.preventDefault();">
-      </statusbarpanel>
-      <separator class="thin"/>
       <statusbarpanel id="sync-notifications-button"
                       class="statusbarpanel-iconic-text"
                       hidden="true"

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

@@ -541,7 +541,7 @@ just addresses the organization to follow, e.g. "This site is run by " -->
 <!-- LOCALIZATION NOTE (syncTabsMenu.label): This appears in the history menu -->
 <!ENTITY syncTabsMenu.label     "Tabs From Other Computers">
 
-<!ENTITY syncBrand.shortName.label  "Sync">
+<!ENTITY syncBrand.shortName.label    "Sync">
 
 <!ENTITY syncMenu.label               "&syncBrand.shortName.label;">
 <!-- LOCALIZATION NOTE (sync.menu.accesskey): This is part of the tools menu, so
@@ -555,3 +555,4 @@ just addresses the organization to follow, e.g. "This site is run by " -->
 <!ENTITY syncLogOutItem.accesskey     "D">
 <!ENTITY syncSyncNowItem.label        "Sync Now">
 <!ENTITY syncSyncNowItem.accesskey    "S">
+<!ENTITY syncToolbarButton.label      "Sync">

browser/themes/browserShared.inc

@@ -1,3 +1,3 @@
 %filter substitution
 
-%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #history-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button
+%define primaryToolbarButtons #back-button, #forward-button, #reload-button, #stop-button, #home-button, #print-button, #downloads-button, #history-button, #bookmarks-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-in-button, #sync-buttons

browser/themes/gnomestripe/browser/browser.css

@@ -682,12 +682,26 @@ toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 
 #zoom-out-button {
   list-style-image: url("moz-icon://stock/gtk-zoom-out?size=toolbar");
-}
 
 #zoom-in-button {
   list-style-image: url("moz-icon://stock/gtk-zoom-in?size=toolbar");
 }
 
+/* sync button */
+#sync-button {
+  list-style-image: url("chrome://browser/skin/sync-16.png");
+}
+
+#sync-button[status="active"] {
+  list-style-image: url("chrome://browser/skin/sync-16-throbber.png");
+}
+
+toolbar:not([iconsize="small"]) #sync-button > .toolbarbutton-icon {
+  margin: 1px;
+  width: 16px;
+  height: 16px;
+}
+
 /* 16px primary toolbar buttons */
 toolbar[iconsize="small"] .toolbarbutton-1:not([type="menu-button"]) {
   -moz-box-orient: vertical;

browser/themes/pinstripe/browser/browser.css

@@ -684,6 +684,7 @@ toolbar[mode="icons"] #zoom-out-button {
 toolbar[mode="icons"] #zoom-in-button {
   -moz-border-start: none;
   -moz-margin-start: 0;
+  height: 16px;
 }
 
 #zoom-out-button:-moz-locale-dir(ltr),
@@ -698,6 +699,22 @@ toolbar[mode="icons"] #zoom-in-button {
   border-bottom-left-radius: 0;
 }
 
+/* sync button */
+
+#sync-button {
+  list-style-image: url("chrome://browser/skin/sync-16.png");
+}
+
+#sync-button[status="active"] {
+  list-style-image: url("chrome://browser/skin/sync-16-throbber.png");
+}
+
+toolbar:not([iconsize="small"]) #sync-button > .toolbarbutton-icon {
+  margin: 1px;
+  width: 16px;
+  height: 16px;
+}
+
 /* ----- FULLSCREEN WINDOW CONTROLS ----- */
 
 #minimize-button,
@@ -2256,9 +2273,3 @@ listitem.style-section {
 panel[dimmed="true"] {
   opacity: 0.5;
 }
-
-/* Sync */
-
-#sync-status-button.statusbarpanel-iconic {
-  padding: 0 5px;
-}

browser/themes/winstripe/browser/browser.css

@@ -912,6 +912,22 @@ toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="tru
   border-bottom-left-radius: 0;
 }
 
+/* sync button */
+
+#sync-button {
+  list-style-image: url("chrome://browser/skin/sync-16.png");
+}
+
+#sync-button[status="active"] {
+  list-style-image: url("chrome://browser/skin/sync-16-throbber.png");
+}
+
+toolbar:not([iconsize="small"]) #sync-button > .toolbarbutton-icon {
+  margin: 1px;
+  width: 16px;
+  height: 16px;
+}
+
 /* ::::: fullscreen window controls ::::: */
 
 #minimize-button,