corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1696284, show badge on fxa button instead of app menu r=mhowell

Browse Source 
Also removes avatar images that are no longer used.
For unverified accounts, we show a blue dot.
For failed logins, we show a warning icon.

Differential Revision: https://phabricator.services.mozilla.com/D109935
This commit is contained in:
Emma Malysz
2021-04-01 22:00:36 +00:00
parent 02ceed10d8
commit 03a0a18d68
8 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
browser/base/content/test/sync/browser_fxa_badge.js
View File

@@ -60,12 +60,11 @@ add_task(async function test_loginFailed_badge_shown() {
});
function checkFxABadge(shouldBeShown) {
let isShown = false;
for (let notification of AppMenuNotifications.notifications) {
if (notification.id == "fxa-needs-authentication") {
isShown = true;
break;
}
}
let fxaButton = document.getElementById("fxa-toolbar-menu-button");
let isShown =
fxaButton.hasAttribute("badge-status") ||
fxaButton
.querySelector(".toolbarbutton-badge")
.classList.contains("feature-callout");
is(isShown, shouldBeShown, "Fxa badge shown matches expected value.");
}

4
browser/base/content/test/sync/browser_sync.js
View File

@@ -744,9 +744,9 @@ function checkFxAAvatar(fxaStatus) {
const avatarURL = getComputedStyle(avatar).listStyleImage;
const expected = {
not_configured: 'url("chrome://browser/skin/fxa/avatar-empty.svg")',
unverified: 'url("chrome://browser/skin/fxa/avatar-confirm.svg")',
unverified: 'url("chrome://browser/skin/fxa/avatar.svg")',
signedin: 'url("chrome://browser/skin/fxa/avatar.svg")',
"login-failed": 'url("chrome://browser/skin/fxa/avatar-alert.svg")',
"login-failed": 'url("chrome://browser/skin/fxa/avatar.svg")',
};
ok(
avatarURL == expected[fxaStatus],

25
browser/components/BrowserGlue.jsm
View File

@@ -1186,7 +1186,7 @@ BrowserGlue.prototype = {
}
break;
case "sync-ui-state:update":
this._updateFxaBadges();
this._updateFxaBadges(BrowserWindowTracker.getTopWindow());
break;
case "handlersvc-store-initialized":
// Initialize PdfJs when running in-process and remote. This only
@@ -4098,16 +4098,31 @@ BrowserGlue.prototype = {
);
},
_updateFxaBadges() {
_updateFxaBadges(win) {
let fxaButton = win.document.getElementById("fxa-toolbar-menu-button");
let badge = fxaButton.querySelector(".toolbarbutton-badge");
let state = UIState.get();
if (
state.status == UIState.STATUS_LOGIN_FAILED ||
state.status == UIState.STATUS_NOT_VERIFIED
) {
AppMenuNotifications.showBadgeOnlyNotification(
"fxa-needs-authentication"
);
// If the fxa toolbar button is in the toolbox, we display the notification
// on the fxa button instead of the app menu.
let navToolbox = win.document.getElementById("navigator-toolbox");
let isFxAButtonShown = navToolbox.contains(fxaButton);
if (isFxAButtonShown) {
state.status == UIState.STATUS_LOGIN_FAILED
? fxaButton.setAttribute("badge-status", state.status)
: badge.classList.add("feature-callout");
} else {
AppMenuNotifications.showBadgeOnlyNotification(
"fxa-needs-authentication"
);
}
} else {
fxaButton.removeAttribute("badge-status");
badge.classList.remove("feature-callout");
AppMenuNotifications.removeNotification("fxa-needs-authentication");
}
},

7
browser/components/customizableui/test/browser_panelUINotifications.js
View File

@@ -226,6 +226,13 @@ add_task(async function testDownloadingBadge() {
*/
add_task(async function testInteractionWithBadges() {
await BrowserTestUtils.withNewTab("about:blank", async function(browser) {
// Remove the fxa toolbar button from the navbar to ensure the notification
// is displayed on the app menu button.
let { CustomizableUI } = ChromeUtils.import(
"resource:///modules/CustomizableUI.jsm"
);
CustomizableUI.removeWidgetFromArea("fxa-toolbar-menu-button");
AppMenuNotifications.showBadgeOnlyNotification("fxa-needs-authentication");
is(
PanelUI.menuButton.getAttribute("badge-status"),

15
browser/themes/shared/customizableui/panelUI.inc.css
View File

@@ -160,7 +160,8 @@
} /** END not Proton **/
#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
height: 13px;
background: url(chrome://browser/skin/warning.svg) center / contain no-repeat transparent;
box-shadow: none;
@@ -169,6 +170,10 @@
-moz-context-properties: none;
}
#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
display: flex;
}
#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
filter: grayscale(100%);
}
@@ -946,14 +951,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton
--avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg);
}
:root[fxastatus="unverified"] {
--avatar-image-url: url(chrome://browser/skin/fxa/avatar-confirm.svg);
}
:root[fxastatus="login-failed"] {
--avatar-image-url: url(chrome://browser/skin/fxa/avatar-alert.svg);
}
:root[fxastatus="not_configured"] {
--avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg);
}

6
browser/themes/shared/fxa/avatar-alert.svg
View File

@@ -1,6 +0,0 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path fill="context-fill" d="M15.82 14.13l-3.19-6.41a1.28 1.28 0 0 0-2.3 0l-3.19 6.41A1.29 1.29 0 0 0 8.29 16h6.38a1.29 1.29 0 0 0 1.15-1.87zM11 9.5a0.5 0.5 0 0 1 1 0v2a0.5 0.5 0 0 1-1 0zm0.5 4.69a0.69 0.69 0 1 1 0.69-0.69 0.69 0.69 0 0 1-0.69 0.69zm-7.61-3.38A1 1 0 0 1 4 9.58C5 8.36 6.48 10 8 10h0.12l0.53-1.07A2.82 2.82 0 0 1 8 9a3 3 0 1 1 3-3v0.07A2.33 2.33 0 0 1 11.52 6a2.28 2.28 0 0 1 2.05 1.27l1.21 2.44A6.91 6.91 0 0 0 15 8a7 7 0 1 0-8.95 6.72 2.26 2.26 0 0 1 0.24-1l0.42-0.85a5 5 0 0 1-2.82-2.06z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 797 B

8
browser/themes/shared/fxa/avatar-confirm.svg
View File

@@ -1,8 +0,0 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
<path d="M14.92 9A6.63 6.63 0 0 0 15 8a7 7 0 1 0-7 7v-2a4.94 4.94 0 0 1-4.11-2.19A1 1 0 0 1 4 9.58C5 8.36 6.48 10 8 10h.09A1.51 1.51 0 0 1 9.5 9zM8 9a3 3 0 1 1 3-3 3 3 0 0 1-3 3z"/>
<path d="M15.5 10h-6a.5.5 0 0 0-.5.5v.32l3.5 2.1 3.5-2.1v-.32a.5.5 0 0 0-.5-.5z"/>
<path d="M12.5 14a.48.48 0 0 1-.26-.07L9 12v3.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V12l-3.24 1.95a.48.48 0 0 1-.26.05z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 728 B

2
browser/themes/shared/jar.inc.mn
View File

@@ -131,9 +131,7 @@
skin/classic/browser/fxa/send-to-device.svg (../shared/fxa/send-to-device.svg)
skin/classic/browser/fxa/avatar.svg (../shared/fxa/avatar.svg)
skin/classic/browser/fxa/avatar-alert.svg (../shared/fxa/avatar-alert.svg)
skin/classic/browser/fxa/avatar-color.svg (../shared/fxa/avatar-color.svg)
skin/classic/browser/fxa/avatar-confirm.svg (../shared/fxa/avatar-confirm.svg)
skin/classic/browser/fxa/avatar-empty.svg (../shared/fxa/avatar-empty.svg)
skin/classic/browser/fxa/sync-devices.svg (../shared/fxa/sync-devices.svg)
skin/classic/browser/fxa/send.svg (../shared/fxa/send.svg)