From 4d02027b4d446f0d56f1b9f465dcd31159f9a236 Mon Sep 17 00:00:00 2001 From: Emma Malysz Date: Tue, 2 Mar 2021 16:02:35 +0000 Subject: [PATCH] Bug 1694678: update fxa and remote tabs sync now buttons r=fluent-reviewers,mconley This patch: -Maintains consistency between the fxa and remote tabs' panels "sync now" buttons -Removes a fluent string no longer in use -Restores tooltip functionality Differential Revision: https://phabricator.services.mozilla.com/D106651 --- browser/base/content/browser-sync.js | 74 ++++++------------- browser/base/content/browser.xhtml | 31 ++++---- .../base/content/test/sync/browser_sync.js | 19 ++--- browser/locales/en-US/browser/appmenu.ftl | 4 +- browser/locales/en-US/browser/sync.ftl | 5 +- .../shared/customizableui/panelUI.inc.css | 22 +++--- browser/themes/shared/menupanel.inc.css | 8 +- .../bug_1694678_syncNowBtn.py | 33 +++++++++ 8 files changed, 97 insertions(+), 99 deletions(-) create mode 100644 python/l10n/fluent_migrations/bug_1694678_syncNowBtn.py diff --git a/browser/base/content/browser-sync.js b/browser/base/content/browser-sync.js index a0f2d8cd57f2..241d0ccc701e 100644 --- a/browser/base/content/browser-sync.js +++ b/browser/base/content/browser-sync.js @@ -353,7 +353,7 @@ var gSync = { get fluentStrings() { delete this.fluentStrings; return (this.fluentStrings = new Localization( - ["branding/brand.ftl", "browser/appmenu.ftl"], + ["branding/brand.ftl", "browser/appmenu.ftl", "browser/sync.ftl"], true )); }, @@ -844,15 +844,6 @@ var gSync = { "defaultLabel" ); - const syncNowLabel = PanelMultiView.getViewNode( - document, - "PanelUI-fxa-menu-syncnow-label" - ); - const lastSyncedLabel = PanelMultiView.getViewNode( - document, - "PanelUI-appMenu-fxa-label-last-synced" - ); - if (PanelUI.protonAppMenuEnabled) { // TODO: sign out button icon is still showing despite removing class let toolbarbuttons = fxaMenuPanel.querySelectorAll("toolbarbutton"); @@ -913,20 +904,6 @@ var gSync = { if (state.syncEnabled) { syncNowButtonEl.removeAttribute("hidden"); syncSetupButtonEl.hidden = true; - document.l10n.setAttributes( - syncNowLabel, - "appmenuitem-fxa-toolbar-sync-now" - ); - let lastSyncDate = this.formatLastSyncDate(state.lastSync); - if (lastSyncDate) { - document.l10n.setAttributes( - lastSyncedLabel, - "appmenu-fxa-last-sync", - { - time: lastSyncDate, - } - ); - } } headerTitle = this.fluentStrings.formatValueSync( @@ -1626,10 +1603,16 @@ var gSync = { clearTimeout(this._syncAnimationTimer); this._syncStartTime = Date.now(); + let syncingLabel = this.fluentStrings.formatValueSync( + "fxa-toolbar-sync-syncing2" + ); + + document.querySelectorAll(".syncnow-label").forEach(el => { + el.value = syncingLabel; + }); + document.querySelectorAll(".syncNowBtn").forEach(el => { el.setAttribute("syncstatus", "active"); - el.setAttribute("disabled", "true"); - document.l10n.setAttributes(el, el.getAttribute("syncinglabel")); }); document @@ -1637,8 +1620,6 @@ var gSync = { .content.querySelectorAll(".syncNowBtn") .forEach(el => { el.setAttribute("syncstatus", "active"); - el.setAttribute("disabled", "true"); - document.l10n.setAttributes(el, el.getAttribute("syncinglabel")); }); }, @@ -1647,10 +1628,16 @@ var gSync = { return; } + let syncingLabel = this.fluentStrings.formatValueSync( + "appmenuitem-fxa-toolbar-sync-now2" + ); + + document.querySelectorAll(".syncnow-label").forEach(el => { + el.value = syncingLabel; + }); + document.querySelectorAll(".syncNowBtn").forEach(el => { el.removeAttribute("syncstatus"); - el.removeAttribute("disabled"); - document.l10n.setAttributes(el, "appmenuitem-fxa-toolbar-sync-now"); }); document @@ -1658,8 +1645,6 @@ var gSync = { .content.querySelectorAll(".syncNowBtn") .forEach(el => { el.removeAttribute("syncstatus"); - el.removeAttribute("disabled"); - document.l10n.setAttributes(el, "appmenuitem-fxa-toolbar-sync-now"); }); Services.obs.notifyObservers(null, "test:browser-sync:activity-stop"); @@ -1881,24 +1866,18 @@ var gSync = { } } - document.querySelectorAll(".syncNowBtn").forEach(el => { + let syncNowBtns = [ + "PanelUI-remotetabs-syncnow", + "PanelUI-fxa-menu-syncnow-button", + ]; + syncNowBtns.forEach(id => { + let el = PanelMultiView.getViewNode(document, id); if (tooltiptext) { el.setAttribute("tooltiptext", tooltiptext); } else { el.removeAttribute("tooltiptext"); } }); - - document - .getElementById("appMenu-viewCache") - .content.querySelectorAll(".syncNowBtn") - .forEach(el => { - if (tooltiptext) { - el.setAttribute("tooltiptext", tooltiptext); - } else { - el.removeAttribute("tooltiptext"); - } - }); }, get relativeTimeFormat() { @@ -1910,24 +1889,17 @@ var gSync = { }, formatLastSyncDate(date) { - const lastSyncedImage = PanelMultiView.getViewNode( - document, - "PanelUI-appMenu-fxa-image-last-synced" - ); if (!date) { - lastSyncedImage.hidden = true; // Date can be null before the first sync! return null; } try { - lastSyncedImage.hidden = false; let adjustedDate = new Date(Date.now() - 1000); let relativeDateStr = this.relativeTimeFormat.formatBestUnit( date < adjustedDate ? date : adjustedDate ); return relativeDateStr; } catch (ex) { - lastSyncedImage.hidden = true; // shouldn't happen, but one client having an invalid date shouldn't // break the entire feature. this.log.warn("failed to format lastSync time", date, ex); diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml index e1fa75b58bfa..ddffedd8a7c8 100644 --- a/browser/base/content/browser.xhtml +++ b/browser/base/content/browser.xhtml @@ -1381,12 +1381,18 @@ + closemenu="none"> + + + + @@ -1514,18 +1520,15 @@ align="center" class="subviewbutton subviewbutton-iconic" oncommand="gSync.doSyncFromFxaMenu(this);" + onmouseover="gSync.refreshSyncButtonsTooltip();" closemenu="none"> - - + .toolbarbutton @media (prefers-reduced-motion: no-preference) { #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon, #PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon, -#PanelUI-appMenu-fxa-image-last-synced[syncstatus="active"] { +.syncNowBtn[syncstatus="active"] { animation: syncRotate 0.8s linear infinite; -moz-context-properties: fill; fill: var(--toolbarbutton-icon-fill-attention); -} + visibility: visible; } -#PanelUI-appMenu-fxa-image-last-synced { +.syncNowBtn { -moz-context-properties: fill; - fill: var(--panel-description-color); - height: 8px; - width: 8px; + fill: currentColor; + height: 16px; + width: 16px; + list-style-image: url("chrome://browser/skin/sync.svg"); } #appMenu-fxa-status { @@ -794,14 +795,13 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton } #fxa-manage-account-button > vbox > label, - #PanelUI-fxa-menu-syncnow-button > vbox > label, - #PanelUI-fxa-menu-syncnow-button > vbox > hbox > label { + #PanelUI-fxa-menu-syncnow-button > hbox > label { margin-inline-start: 0; } - #PanelUI-appMenu-fxa-image-last-synced { - height: 8px; - width: 8px; + .syncNowBtn { + visibility: collapse; + -moz-box-ordinal-group: 2; } .PanelUI-remotetabs-clientcontainer > label[itemtype="client"] { diff --git a/browser/themes/shared/menupanel.inc.css b/browser/themes/shared/menupanel.inc.css index 9e316f5a9062..0b28f1aefae8 100644 --- a/browser/themes/shared/menupanel.inc.css +++ b/browser/themes/shared/menupanel.inc.css @@ -110,9 +110,7 @@ list-style-image: url("chrome://browser/skin/tab.svg"); } -#PanelUI-fxa-menu-syncnow-button, -#PanelUI-fxa-menu-setup-sync-button, -#PanelUI-remotetabs-syncnow { +#PanelUI-fxa-menu-setup-sync-button { list-style-image: url("chrome://browser/skin/sync.svg"); } @@ -200,8 +198,4 @@ toolbarpaletteitem[place="palette"] > #bookmarks-menu-button, #appMenu-fullscreen-button2[checked] { list-style-image: url(chrome://browser/skin/fullscreen-exit.svg); } - -#PanelUI-appMenu-fxa-image-last-synced { - list-style-image: url("chrome://browser/skin/sync.svg"); -} } /** END Proton **/ diff --git a/python/l10n/fluent_migrations/bug_1694678_syncNowBtn.py b/python/l10n/fluent_migrations/bug_1694678_syncNowBtn.py new file mode 100644 index 000000000000..e82d8efdd7cb --- /dev/null +++ b/python/l10n/fluent_migrations/bug_1694678_syncNowBtn.py @@ -0,0 +1,33 @@ +# coding=utf8 + +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ + +from __future__ import absolute_import +from fluent.migrate.helpers import transforms_from +from fluent.migrate import COPY_PATTERN + + +def migrate(ctx): + """Bug 1694678: update fxa and remote tabs sync now buttons, part {index}.""" + ctx.add_transforms( + "browser/browser/sync.ftl", + "browser/browser/sync.ftl", + transforms_from( + """ +fxa-toolbar-sync-syncing2 = { COPY_PATTERN(from_path, "fxa-toolbar-sync-syncing.label") } +""", + from_path="browser/browser/sync.ftl", + ), + ) + + ctx.add_transforms( + "browser/browser/appmenu.ftl", + "browser/browser/appmenu.ftl", + transforms_from( + """ +appmenuitem-fxa-toolbar-sync-now2 = { COPY_PATTERN(from_path, "appmenuitem-fxa-toolbar-sync-now.label") } +""", + from_path="browser/browser/appmenu.ftl", + ), + )