Bug 1549049 - Unify Sync Now buttons logic. r=markh,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D48410

--HG--
extra : moz-landing-system : lando

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() {

browser/base/content/browser.xhtml

@@ -643,8 +643,7 @@
       <menuitem data-lazy-l10n-id="synced-tabs-context-manage-devices"
                 id="syncedTabsManageDevices"
                 oncommand="gSync.openDevicesManagementPage('syncedtabs-sidebar');"/>
-      <menuitem label="&syncSyncNowItem.label;"
-                accesskey="&syncSyncNowItem.accesskey;"
+      <menuitem data-lazy-l10n-id="synced-tabs-context-sync-now"
                 id="syncedTabsRefresh"/>
     </menupopup>
     <menupopup id="SyncedTabsSidebarTabsFilterContext"
@@ -670,8 +669,7 @@
                 accesskey="&selectAllCmd.accesskey;"
                 cmd="cmd_selectAll"/>
       <menuseparator/>
-      <menuitem label="&syncSyncNowItem.label;"
-                accesskey="&syncSyncNowItem.accesskey;"
+      <menuitem data-lazy-l10n-id="synced-tabs-context-sync-now"
                 id="syncedTabsRefreshFilter"/>
     </menupopup>
 

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

browser/components/customizableui/content/panelUI.inc.xul

@@ -488,9 +488,11 @@
                            <observes element="sidebar-box" attribute="positionend"/>
             </toolbarbutton>
             <toolbarbutton id="PanelUI-remotetabs-syncnow"
-                           onmouseover="gSync.refreshSyncButtonsTooltip();"
-                           class="subviewbutton subviewbutton-iconic"
+                           lazy-data-l10n-id="fxa-toolbar-sync-now"
+                           syncinglabel="fxa-toolbar-sync-syncing-tabs"
+                           class="syncNowBtn subviewbutton subviewbutton-iconic"
                            oncommand="gSync.doSync();"
+                           onmouseover="gSync.refreshSyncButtonsTooltip();"
                            closemenu="none"/>
             <menuseparator id="PanelUI-remotetabs-separator"/>
           </vbox>
@@ -750,10 +752,11 @@
         <toolbarseparator/>
         <!-- The `Sync Now` button is hidden by default until the user logs into Sync. -->
         <toolbarbutton id="PanelUI-fxa-menu-syncnow-button"
-                        label="&syncSyncNowItem.label;"
-                        syncinglabel="&syncSyncNowItemSyncing.label;"
+                        lazy-data-l10n-id="fxa-toolbar-sync-now"
+                        syncinglabel="fxa-toolbar-sync-syncing"
                         hidden="true"
-                        class="subviewbutton subviewbutton-iconic"
+                        class="syncNowBtn subviewbutton subviewbutton-iconic"
+                        onmouseover="gSync.refreshSyncButtonsTooltip();"
                         oncommand="gSync.doSyncFromFxaMenu(this);"
                         closemenu="none"/>
         <toolbarbutton id="PanelUI-fxa-menu-setup-sync-button"

browser/locales/en-US/browser/sync.ftl

@@ -2,6 +2,13 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+fxa-toolbar-sync-now =
+    .label = Sync Now
+fxa-toolbar-sync-syncing =
+    .label = Syncing…
+fxa-toolbar-sync-syncing-tabs =
+    .label = Syncing Tabs…
+
 sync-disconnect-dialog-title = Disconnect { -sync-brand-short-name }?
 sync-disconnect-dialog-body = { -brand-product-name } will stop syncing your account but won’t delete any of your browsing data on this device.
 fxa-disconnect-dialog-title = Disconnect { -brand-product-name }?

browser/locales/en-US/browser/syncedTabs.ftl

@@ -36,5 +36,8 @@ synced-tabs-context-open-all-in-tabs =
 synced-tabs-context-manage-devices =
     .label = Manage Devices…
     .accesskey = D
+synced-tabs-context-sync-now =
+    .label = Sync Now
+    .accesskey = S
 fxa-sign-in = Sign in to { -sync-brand-short-name }
 turn-on-sync = Turn on { -sync-brand-short-name }

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

@@ -713,10 +713,6 @@ you can use these alternative items. Otherwise, their values should be empty.  -
 
 <!ENTITY syncBrand.shortName.label    "Sync">
 
-<!ENTITY syncSyncNowItem.label        "Sync Now">
-<!ENTITY syncSyncNowItemSyncing.label "Syncing…">
-<!ENTITY syncSyncNowItem.accesskey    "S">
-
 <!ENTITY customizeMode.autoHideDownloadsButton.label "Auto-hide">
 
 <!ENTITY getUserMedia.selectCamera.label "Camera to share:">

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -694,6 +694,11 @@ button > hbox > label {
   height: auto;
 }
 
+dialog > .sync-engines-list > div,
+dialog > .sync-engines-list + hbox {
+  padding-top: 0px;
+}
+
 .sync-engines-list checkbox .checkbox-icon,
 .sync-engine-image {
   margin-inline-start: 4px;

python/l10n/fluent_migrations/bug_1549049_syncing_labels.py

@@ -0,0 +1,36 @@
+# coding=utf8
+
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+from __future__ import absolute_import
+import fluent.syntax.ast as FTL
+from fluent.migrate.helpers import transforms_from
+from fluent.migrate import COPY
+
+
+def migrate(ctx):
+    """Bug 1549049 - Unify Sync Now buttons logic, part {index}."""
+
+    ctx.add_transforms(
+        "browser/browser/sync.ftl",
+        "browser/browser/sync.ftl",
+        transforms_from(
+"""
+fxa-toolbar-sync-now =
+    .label = { COPY(from_path, "syncSyncNowItem.label") }
+fxa-toolbar-sync-syncing =
+    .label = { COPY(from_path, "syncSyncNowItemSyncing.label") }
+fxa-toolbar-sync-syncing-tabs =
+    .label = { COPY("services/sync/sync.properties", "syncingtabs.label") }
+""", from_path="browser/chrome/browser/browser.dtd"))
+
+    ctx.add_transforms(
+        "browser/browser/syncedTabs.ftl",
+        "browser/browser/syncedTabs.ftl",
+        transforms_from(
+"""
+synced-tabs-context-sync-now =
+    .label = { COPY(from_path, "syncSyncNowItem.label") }
+    .accesskey = { COPY(from_path, "syncSyncNowItem.accesskey") }
+""", from_path="browser/chrome/browser/browser.dtd"))

services/sync/locales/en-US/sync.properties

@@ -11,6 +11,3 @@ lastSync2.label = Last sync: %S
 # signInToSync.description is the tooltip for the Sync buttons when Sync is
 # not configured.
 signInToSync.description = Sign In To Sync
-
-syncnow.label = Sync Now
-syncingtabs.label = Syncing Tabs…