diff --git a/browser/base/content/browser-sync.js b/browser/base/content/browser-sync.js index 8af4febffd3b..ff21de07126b 100644 --- a/browser/base/content/browser-sync.js +++ b/browser/base/content/browser-sync.js @@ -167,9 +167,6 @@ var gSync = { // setting this._initialized, so we don't attempt to remove observers. return; } - let syncNow = document.getElementById("PanelUI-remotetabs-syncnow"); - let label = this.syncStrings.GetStringFromName("syncnow.label"); - syncNow.setAttribute("label", label); // We start with every menuitem hidden (except for the "setup sync" state), // so that we don't need to init the sync UI on windows like pageInfo.xul // (see bug 1384856). @@ -645,7 +642,7 @@ var gSync = { }, updateSyncStatus(state) { - let syncNow = document.getElementById("PanelUI-remotetabs-syncnow"); + let syncNow = document.querySelector(".syncNowBtn"); const syncingUI = syncNow.getAttribute("syncstatus") == "active"; if (state.syncing != syncingUI) { // Do we need to update the UI? @@ -1171,26 +1168,11 @@ var gSync = { onActivityStart() { clearTimeout(this._syncAnimationTimer); this._syncStartTime = Date.now(); - - let label = this.syncStrings.GetStringFromName("syncingtabs.label"); - let remotetabsSyncNowEl = document.getElementById( - "PanelUI-remotetabs-syncnow" - ); - let fxaMenuSyncNowEl = document.getElementById( - "PanelUI-fxa-menu-syncnow-button" - ); - let syncElements = [remotetabsSyncNowEl, fxaMenuSyncNowEl]; - - syncElements.forEach(el => { + document.querySelectorAll(".syncNowBtn").forEach(el => { el.setAttribute("syncstatus", "active"); el.setAttribute("disabled", "true"); + document.l10n.setAttributes(el, el.getAttribute("syncinglabel")); }); - - remotetabsSyncNowEl.setAttribute("label", label); - fxaMenuSyncNowEl.setAttribute( - "label", - fxaMenuSyncNowEl.getAttribute("syncinglabel") - ); }, _onActivityStop() { @@ -1198,16 +1180,10 @@ var gSync = { return; } - let label = this.syncStrings.GetStringFromName("syncnow.label"); - let syncElements = [ - document.getElementById("PanelUI-remotetabs-syncnow"), - document.getElementById("PanelUI-fxa-menu-syncnow-button"), - ]; - - syncElements.forEach(el => { + document.querySelectorAll(".syncNowBtn").forEach(el => { el.removeAttribute("syncstatus"); el.removeAttribute("disabled"); - el.setAttribute("label", label); + document.l10n.setAttributes(el, "fxa-toolbar-sync-now"); }); Services.obs.notifyObservers(null, "test:browser-sync:activity-stop"); @@ -1378,14 +1354,13 @@ var gSync = { tooltiptext = this.formatLastSyncDate(state.lastSync); } - if (this.appMenuLabel) { - let syncNow = document.getElementById("PanelUI-remotetabs-syncnow"); + document.querySelectorAll(".syncNowBtn").forEach(el => { if (tooltiptext) { - syncNow.setAttribute("tooltiptext", tooltiptext); + el.setAttribute("tooltiptext", tooltiptext); } else { - syncNow.removeAttribute("tooltiptext"); + el.removeAttribute("tooltiptext"); } - } + }); }, get relativeTimeFormat() { diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml index 947b5f5e696e..ef919839ee34 100644 --- a/browser/base/content/browser.xhtml +++ b/browser/base/content/browser.xhtml @@ -643,8 +643,7 @@ - - diff --git a/browser/base/content/test/sync/browser_sync.js b/browser/base/content/test/sync/browser_sync.js index c270b2b1eff3..e28733e7b575 100644 --- a/browser/base/content/test/sync/browser_sync.js +++ b/browser/base/content/test/sync/browser_sync.js @@ -91,7 +91,7 @@ add_task(async function test_ui_state_syncing() { gSync.updateAllUI(state); - checkSyncNowButton("PanelUI-remotetabs-syncnow", true); + checkSyncNowButtons(true); // Be good citizens and remove the "syncing" state. gSync.updateAllUI({ @@ -285,7 +285,7 @@ function checkRemoteTabsPanel(expectedShownItemId, syncing, syncNowTooltip) { ); if (syncing != undefined && syncNowTooltip != undefined) { - checkSyncNowButton("PanelUI-remotetabs-syncnow", syncing, syncNowTooltip); + checkSyncNowButtons(syncing, syncNowTooltip); } } @@ -302,43 +302,41 @@ function checkMenuBarItem(expectedShownItemId) { ); } -function checkSyncNowButton(buttonId, syncing, tooltip = null) { - const remoteTabsButton = document.getElementById(buttonId); +function checkSyncNowButtons(syncing, tooltip = null) { + const syncButtons = document.querySelectorAll(".syncNowBtn"); - is( - remoteTabsButton.getAttribute("syncstatus"), - syncing ? "active" : "", - "button active has the right value" - ); - if (tooltip) { + for (const syncButton of syncButtons) { is( - remoteTabsButton.getAttribute("tooltiptext"), - tooltip, - "button tooltiptext is set to the right value" + syncButton.getAttribute("syncstatus"), + syncing ? "active" : "", + "button active has the right value" ); - } + if (tooltip) { + is( + syncButton.getAttribute("tooltiptext"), + tooltip, + "button tooltiptext is set to the right value" + ); + } - if (buttonId.endsWith("-fxa-icon")) { - return; - } - - is( - remoteTabsButton.hasAttribute("disabled"), - syncing, - "disabled has the right value" - ); - if (syncing) { is( - remoteTabsButton.getAttribute("label"), - gSync.syncStrings.GetStringFromName("syncingtabs.label"), - "label is set to the right value" - ); - } else { - is( - remoteTabsButton.getAttribute("label"), - gSync.syncStrings.GetStringFromName("syncnow.label"), - "label is set to the right value" + syncButton.hasAttribute("disabled"), + syncing, + "disabled has the right value" ); + if (syncing) { + is( + document.l10n.getAttributes(syncButton).id, + syncButton.getAttribute("syncinglabel"), + "label is set to the right value" + ); + } else { + is( + document.l10n.getAttributes(syncButton).id, + "fxa-toolbar-sync-now", + "label is set to the right value" + ); + } } } diff --git a/browser/components/customizableui/content/panelUI.inc.xul b/browser/components/customizableui/content/panelUI.inc.xul index 6ae7e33725d6..39f969b75c84 100644 --- a/browser/components/customizableui/content/panelUI.inc.xul +++ b/browser/components/customizableui/content/panelUI.inc.xul @@ -488,9 +488,11 @@ @@ -750,10 +752,11 @@