Bug 1396085 - ensure the sync widget is always initialized and animate the sync spinner. r?Gijs
MozReview-Commit-ID: HcAuLZQ95EH
--- 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;
}