Bug 1201331 (part 1) - use a broadcaster to manage the Sync status. r=adw

This patch leverages broadcasters to keep the various sync UI elements sane.
Rather than adding yet another button ID to browser-syncui, we now just update
the broadcaster and let all the elements automagically get the attributes.
This commit is contained in:
Mark Hammond 2015-12-03 10:05:03 +11:00
parent 7564cb24af
commit ef3a69b4dc
10 changed files with 57 additions and 46 deletions

View File

@ -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"/>

View File

@ -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) {
let broadcaster = document.getElementById("sync-status");
if (broadcaster) {
if (tooltiptext) {
button.setAttribute("tooltiptext", tooltiptext);
broadcaster.setAttribute("tooltiptext", tooltiptext);
} else {
button.removeAttribute("tooltiptext");
}
broadcaster.removeAttribute("tooltiptext");
}
}
}),

View File

@ -1041,6 +1041,7 @@
<toolbarbutton id="sync-button"
class="toolbarbutton-1 chromeclass-toolbar-additional"
observes="sync-status"
label="&syncToolbarButton.label;"
oncommand="gSyncUI.handleToolbarButton()"/>
</toolbarpalette>

View File

@ -128,14 +128,17 @@ add_task(function* testSyncLoginError() {
});
function checkButtonsStatus(shouldBeActive) {
let button = document.getElementById("sync-button");
let fxaContainer = document.getElementById("PanelUI-footer-fxa");
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(button.getAttribute("status"), "active");
Assert.equal(fxaContainer.getAttribute("syncstatus"), "active");
Assert.equal(elt.getAttribute("syncstatus"), "active", `${eid} should be active`);;
} else {
Assert.ok(!button.hasAttribute("status"));
Assert.ok(!fxaContainer.hasAttribute("syncstatus"));
Assert.ok(!elt.hasAttribute("syncstatus"), `${eid} should have no status attr`);
}
}
}

View File

@ -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">

View File

@ -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);
}

View File

@ -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);
}

View File

@ -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);
}

View File

@ -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");
}

View File

@ -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