[BASILISK] Port PM Sync Client - Part 5: Port the original sync toolbar button and create a synced tabs toolbar button

application/basilisk/base/content/browser.js

@@ -6262,7 +6262,10 @@ function checkEmptyPageOrigin(browser = gBrowser.selectedBrowser,
 
 #ifdef MOZ_SERVICES_SYNC
 function BrowserOpenSyncTabs() {
-  switchToTabHavingURI("about:sync-tabs", true);
+  if (gSyncUI._needsSetup())
+    gSyncUI.openSetup();
+  else
+    switchToTabHavingURI("about:sync-tabs", true);
 }
 #endif
 

application/basilisk/base/content/browser.xul

@@ -913,6 +913,18 @@
                      type="checkbox"
                      label="&fullScreenCmd.label;"
                      tooltip="dynamic-shortcut-tooltip"/>
+
+#ifdef MOZ_SERVICES_SYNC
+      <toolbarbutton id="sync-button"
+                     class="toolbarbutton-1 chromeclass-toolbar-additional"
+                     label="&syncToolbarButton.label;"
+                     oncommand="gSyncUI.handleToolbarButton();"/>>
+
+      <toolbarbutton id="sync-tabs-button"
+                     class="toolbarbutton-1 chromeclass-toolbar-additional"
+                     label="&syncTabsToolbarButton.label;"
+                     oncommand="BrowserOpenSyncTabs();"/>
+#endif
     </toolbarpalette>
   </toolbox>
 

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

@@ -734,6 +734,7 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 <!ENTITY syncSyncNowItem.label        "Sync Now">
 <!ENTITY syncSyncNowItem.accesskey    "S">
 <!ENTITY syncToolbarButton.label      "Sync">
+<!ENTITY syncTabsToolbarButton.label  "Synced Tabs">
 #endif
 
 <!ENTITY customizeMode.menuAndToolbars.header2 "Additional Tools and Features">

application/basilisk/themes/shared/browser.inc

@@ -2,7 +2,7 @@
 
 % Note that zoom-reset-button is a bit different since it doesn't use an image and thus has the image with display: none.
 %define nestedButtons #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button
-%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #webide-button, #containers-panelmenu
+%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #sync-tabs-button, #feed-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, @nestedButtons@, #e10s-button, #panic-button, #webide-button, #containers-panelmenu
 
 %ifdef XP_MACOSX
 % Prior to 10.7 there wasn't a native fullscreen button so we use #restore-button to exit fullscreen

application/basilisk/themes/shared/menupanel.inc.css

@@ -48,11 +48,32 @@ toolbarpaletteitem[place="palette"] > #save-page-button {
   -moz-image-region: rect(0px, 352px, 32px, 320px);
 }
 
+/* Start Sync Buttons */
+
 #sync-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #sync-button {
+  -moz-image-region: rect(0px, 384px, 32px, 352px)
+}
+
+#sync-button[cui-areatype="menu-panel"][status="active"] {
+  list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
+  -moz-image-region: rect(0, 32px, 32px, 0);
+}
+
+@media (min-resolution: 1.1dppx) {
+  #sync-button[cui-areatype="menu-panel"][status="active"] {
+    list-style-image: url("chrome://browser/skin/syncProgress-menuPanel@2x.png");
+    -moz-image-region: rect(0, 64px, 64px, 0);
+  }
+}
+
+#sync-tabs-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #sync-tabs-button {
   -moz-image-region: rect(0px, 1024px, 32px, 992px);
 }
 
+/* End Sync Buttons */
+
 #containers-panelmenu[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
   -moz-image-region: rect(0px, 1056px, 32px, 1024px);

application/basilisk/themes/shared/toolbarbuttons.inc.css

@@ -52,10 +52,35 @@ toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarke
   -moz-image-region: rect(0, 252px, 18px, 234px);
 }
 
+/* Start Sync Buttons */
+
 #sync-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 270px, 18px, 252px);
+}
+
+#sync-button[cui-areatype="toolbar"][status="active"] {
+  list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
+  -moz-image-region: rect(0, 18px, 18px, 0);
+}
+
+@media (-moz-os-version: windows-win7) {
+  #sync-button[cui-areatype="toolbar"][status="active"] {
+    list-style-image: url("chrome://browser/skin/syncProgress-toolbar-win7.png");
+    -moz-image-region: rect(0, 18px, 18px, 0);
+  }
+}
+
+toolbar[brighttext] #sync-button[cui-areatype="toolbar"][status="active"] {
+  list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
+  -moz-image-region: rect(0, 18px, 18px, 0);
+}
+
+#sync-tabs-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 792px, 18px, 774px);
 }
 
+/* End Sync Buttons */
+
 #containers-panelmenu[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 810px, 18px, 792px);
 }
@@ -226,10 +251,35 @@ toolbar[brighttext] #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarke
     -moz-image-region: rect(0, 504px, 36px, 468px);
   }
 
+  /* Start Sync Buttons */
+
   #sync-button[cui-areatype="toolbar"] {
+    -moz-image-region: rect(0, 540px, 36px, 504px);
+  }
+
+  #sync-button[cui-areatype="toolbar"][status="active"] {
+    list-style-image: url("chrome://browser/skin/syncProgress-toolbar@2x.png");
+    -moz-image-region: rect(0, 36px, 36px, 0);
+  }
+
+  @media (-moz-os-version: windows-win7) {
+    #sync-button[cui-areatype="toolbar"][status="active"] {
+      list-style-image: url("chrome://browser/skin/syncProgress-toolbar-win7@2x.png");
+      -moz-image-region: rect(0, 36px, 36px, 0);
+    }
+  }
+  
+  toolbar[brighttext] #sync-button[cui-areatype="toolbar"][status="active"] {
+      list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted@2x.png");
+      -moz-image-region: rect(0, 36px, 36px, 0);
+  }
+
+  #sync-tabs-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0, 1584px, 36px, 1548px);
   }
 
+  /* End Sync Buttons */
+
   #containers-panelmenu[cui-areatype="toolbar"] {
     -moz-image-region: rect(0, 1620px, 36px, 1584px);
   }