Bug 1396085 - ensure the sync widget is always initialized and animate the sync spinner. r?Gijs draft
authorMark Hammond <mhammond@skippinet.com.au>
Tue, 05 Sep 2017 15:08:17 +1000
changeset 659311 2507bec268761c41aba44236c03d00073743d6b4
parent 658813 1401e3eec44df87963d3af329ef8a4183ab0483f
child 729969 fbccdc53a2cde0d75daff640384273553309c8a8
push id78107
push userbmo:markh@mozilla.com
push dateTue, 05 Sep 2017 22:32:48 +0000
reviewersGijs
bugs1396085
milestone57.0a1
Bug 1396085 - ensure the sync widget is always initialized and animate the sync spinner. r?Gijs MozReview-Commit-ID: HcAuLZQ95EH
browser/components/customizableui/CustomizableWidgets.jsm
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/components/customizableui/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/CustomizableWidgets.jsm
@@ -251,16 +251,22 @@ const CustomizableWidgets = [
       DECKINDEX_TABS: 0,
       DECKINDEX_TABSDISABLED: 1,
       DECKINDEX_FETCHING: 2,
       DECKINDEX_NOCLIENTS: 3,
     },
     TABS_PER_PAGE: 25,
     NEXT_PAGE_MIN_TABS: 5, // Minimum number of tabs displayed when we click "Show All"
     onCreated(aNode) {
+      this._initialize(aNode);
+    },
+    _initialize(aNode) {
+      if (this._initialized) {
+        return;
+      }
       // Add an observer to the button so we get the animation during sync.
       // (Note the observer sets many attributes, including label and
       // tooltiptext, but we only want the 'syncstatus' attribute for the
       // animation)
       let doc = aNode.ownerDocument;
       let obnode = doc.createElementNS(kNSXUL, "observes");
       obnode.setAttribute("element", "sync-status");
       obnode.setAttribute("attribute", "syncstatus");
@@ -295,18 +301,20 @@ const CustomizableWidgets = [
         let os = e.target.getAttribute("mobile-promo-os");
         if (!os || e.button > 1) {
           return;
         }
         let link = Services.prefs.getCharPref(`identity.mobilepromo.${os}`) + "synced-tabs";
         doc.defaultView.openUILinkIn(link, "tab");
         CustomizableUI.hidePanelForNode(e.target);
       });
+      this._initialized = true;
     },
     onViewShowing(aEvent) {
+      this._initialize(aEvent.target);
       let doc = aEvent.target.ownerDocument;
       this._tabsList = doc.getElementById("PanelUI-remotetabs-tabslist");
       Services.obs.addObserver(this, SyncedTabs.TOPIC_TABS_CHANGED);
 
       if (SyncedTabs.isConfiguredToSyncTabs) {
         if (SyncedTabs.hasSyncedThisSession) {
           this.setDeckIndex(this.deckIndices.DECKINDEX_TABS);
         } else {
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -801,17 +801,18 @@ toolbaritem[cui-areatype="menu-panel"][s
 #appMenu-fxa-label {
   -moz-box-flex: 1;
 }
 
 @keyframes syncRotate {
   to { transform: rotate(360deg); }
 }
 
-#appMenu-fxa-icon[syncstatus="active"] > .toolbarbutton-icon {
+#appMenu-fxa-icon[syncstatus="active"] > .toolbarbutton-icon,
+#PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon {
   animation: syncRotate 0.8s linear infinite;
   fill: #0a84ff;
 }
 
 #appMenu-fxa-status {
   -moz-box-align: center;
 }