diff --git a/browser/base/content/browser-fxaccounts.js b/browser/base/content/browser-fxaccounts.js index f7f1092d80ad..85237b64562e 100644 --- a/browser/base/content/browser-fxaccounts.js +++ b/browser/base/content/browser-fxaccounts.js @@ -277,6 +277,7 @@ let gFxAccounts = { this.panelUIFooter.removeAttribute("fxastatus"); this.panelUIFooter.removeAttribute("fxaprofileimage"); this.panelUIAvatar.style.removeProperty("list-style-image"); + let showErrorBadge = false; if (!this._inCustomizationMode && userData) { // At this point we consider the user as logged-in (but still can be in an error state) @@ -285,6 +286,7 @@ let gFxAccounts = { this.panelUIFooter.setAttribute("fxastatus", "error"); this.panelUILabel.setAttribute("label", errorLabel); this.panelUIStatus.setAttribute("tooltiptext", tooltipDescription); + showErrorBadge = true; } else { this.panelUIFooter.setAttribute("fxastatus", "signedin"); this.panelUILabel.setAttribute("label", userData.email); @@ -294,6 +296,11 @@ let gFxAccounts = { this.panelUIFooter.setAttribute("fxaprofileimage", "enabled"); } } + if (showErrorBadge) { + gMenuButtonBadgeManager.addBadge(gMenuButtonBadgeManager.BADGEID_FXA, "fxa-needs-authentication"); + } else { + gMenuButtonBadgeManager.removeBadge(gMenuButtonBadgeManager.BADGEID_FXA); + } } let updateWithProfile = (profile) => { diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index fe4b23bcb149..17c87593ea53 100644 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -2569,6 +2569,47 @@ function PageProxyClickHandler(aEvent) middleMousePaste(aEvent); } +let gMenuButtonBadgeManager = { + BADGEID_APPUPDATE: "update", + BADGEID_FXA: "fxa", + + fxaBadge: null, + appUpdateBadge: null, + + _showBadge: function () { + let badgeToShow = this.appUpdateBadge || this.fxaBadge; + + if (badgeToShow) { + PanelUI.menuButton.setAttribute("badge-status", badgeToShow); + } else { + PanelUI.menuButton.removeAttribute("badge-status"); + } + }, + + _changeBadge: function (badgeId, badgeStatus = null) { + if (badgeId == this.BADGEID_APPUPDATE) { + this.appUpdateBadge = badgeStatus; + } else if (badgeId == this.BADGEID_FXA) { + this.fxaBadge = badgeStatus; + } else { + Cu.reportError("This badge ID is unknown!"); + } + this._showBadge(); + }, + + addBadge: function (badgeId, badgeStatus) { + if (!badgeStatus) { + Cu.reportError("badgeStatus must be defined"); + return; + } + this._changeBadge(badgeId, badgeStatus); + }, + + removeBadge: function (badgeId) { + this._changeBadge(badgeId); + } +}; + // Setup the hamburger button badges for updates, if enabled. let gMenuButtonUpdateBadge = { enabled: false, @@ -2585,7 +2626,6 @@ let gMenuButtonUpdateBadge = { } catch (e) { this.badgeWaitTime = 345600; // 4 days } - PanelUI.menuButton.classList.add("badged-button"); Services.obs.addObserver(this, "update-staged", false); Services.obs.addObserver(this, "update-downloaded", false); } @@ -2597,7 +2637,6 @@ let gMenuButtonUpdateBadge = { if (this.enabled) { Services.obs.removeObserver(this, "update-staged"); Services.obs.removeObserver(this, "update-downloaded"); - PanelUI.panel.removeEventListener("popupshowing", this, true); this.enabled = false; } }, @@ -2645,10 +2684,8 @@ let gMenuButtonUpdateBadge = { displayBadge: function (succeeded) { let status = succeeded ? "succeeded" : "failed"; - PanelUI.menuButton.setAttribute("update-status", status); - if (!succeeded) { - PanelUI.menuButton.setAttribute("badge", "!"); - } + let badgeStatus = "update-" + status; + gMenuButtonBadgeManager.addBadge(gMenuButtonBadgeManager.BADGEID_APPUPDATE, badgeStatus); let stringId; let updateButtonText; @@ -2667,15 +2704,6 @@ let gMenuButtonUpdateBadge = { updateButton.setAttribute("label", updateButtonText); updateButton.setAttribute("update-status", status); updateButton.hidden = false; - - PanelUI.panel.addEventListener("popupshowing", this, true); - }, - - handleEvent: function(e) { - if (e.type === "popupshowing") { - PanelUI.menuButton.removeAttribute("badge"); - PanelUI.panel.removeEventListener("popupshowing", this, true); - } } }; diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul index 6e6478c26e89..96acdcf6511f 100644 --- a/browser/base/content/browser.xul +++ b/browser/base/content/browser.xul @@ -960,7 +960,7 @@ class="chromeclass-toolbar-additional" removable="false"> diff --git a/browser/base/content/test/general/browser.ini b/browser/base/content/test/general/browser.ini index 4b19883871c0..6b9c5aa36d3c 100644 --- a/browser/base/content/test/general/browser.ini +++ b/browser/base/content/test/general/browser.ini @@ -509,3 +509,4 @@ support-files = support-files = readerModeArticle.html [browser_domFullscreen_fullscreenMode.js] +[browser_menuButtonBadgeManager.js] diff --git a/browser/base/content/test/general/browser_menuButtonBadgeManager.js b/browser/base/content/test/general/browser_menuButtonBadgeManager.js new file mode 100644 index 000000000000..25ec55f63062 --- /dev/null +++ b/browser/base/content/test/general/browser_menuButtonBadgeManager.js @@ -0,0 +1,28 @@ +/* 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/. */ + +let menuButton = document.getElementById("PanelUI-menu-button"); + +add_task(function* testButtonActivities() { + is(menuButton.hasAttribute("badge-status"), false, "Should not have a badge status"); + is(menuButton.hasAttribute("badge"), false, "Should not have the badge attribute set"); + + gMenuButtonBadgeManager.addBadge(gMenuButtonBadgeManager.BADGEID_FXA, "fxa-needs-authentication"); + is(menuButton.getAttribute("badge-status"), "fxa-needs-authentication", "Should have fxa-needs-authentication badge status"); + + gMenuButtonBadgeManager.addBadge(gMenuButtonBadgeManager.BADGEID_APPUPDATE, "update-succeeded"); + is(menuButton.getAttribute("badge-status"), "update-succeeded", "Should have update-succeeded badge status (update > fxa)"); + + gMenuButtonBadgeManager.addBadge(gMenuButtonBadgeManager.BADGEID_APPUPDATE, "update-failed"); + is(menuButton.getAttribute("badge-status"), "update-failed", "Should have update-failed badge status"); + + gMenuButtonBadgeManager.addBadge("unknownbadge", "attr"); + is(menuButton.getAttribute("badge-status"), "update-failed", "Should not have changed badge status"); + + gMenuButtonBadgeManager.removeBadge(gMenuButtonBadgeManager.BADGEID_APPUPDATE); + is(menuButton.getAttribute("badge-status"), "fxa-needs-authentication", "Should have fxa-needs-authentication badge status"); + + gMenuButtonBadgeManager.removeBadge(gMenuButtonBadgeManager.BADGEID_FXA); + is(menuButton.hasAttribute("badge-status"), false, "Should not have a badge status"); +}); diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn index 1b6d6ce5b0ae..065904a60c1b 100644 --- a/browser/themes/linux/jar.mn +++ b/browser/themes/linux/jar.mn @@ -105,6 +105,7 @@ browser.jar: skin/classic/browser/Toolbar-small.png skin/classic/browser/undoCloseTab.png (../shared/undoCloseTab.png) skin/classic/browser/update-badge.svg (../shared/update-badge.svg) + skin/classic/browser/update-badge-failed.svg (../shared/update-badge-failed.svg) skin/classic/browser/urlbar-arrow.png (../shared/urlbar-arrow.png) skin/classic/browser/urlbar-arrow@2x.png (../shared/urlbar-arrow@2x.png) skin/classic/browser/session-restore.svg (../shared/incontent-icons/session-restore.svg) diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn index 2ed2e12421a7..3008c2832419 100644 --- a/browser/themes/osx/jar.mn +++ b/browser/themes/osx/jar.mn @@ -138,6 +138,7 @@ browser.jar: skin/classic/browser/undoCloseTab.png (../shared/undoCloseTab.png) skin/classic/browser/undoCloseTab@2x.png (../shared/undoCloseTab@2x.png) skin/classic/browser/update-badge.svg (../shared/update-badge.svg) + skin/classic/browser/update-badge-failed.svg (../shared/update-badge-failed.svg) skin/classic/browser/urlbar-history-dropmarker.png skin/classic/browser/urlbar-history-dropmarker@2x.png skin/classic/browser/urlbar-arrow.png (../shared/urlbar-arrow.png) diff --git a/browser/themes/shared/customizableui/panelUIOverlay.inc.css b/browser/themes/shared/customizableui/panelUIOverlay.inc.css index 4380ba38771c..532f9ee32174 100644 --- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css +++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css @@ -101,15 +101,35 @@ border-image-source: linear-gradient(transparent, rgba(100%,100%,100%,.2) 20%, rgba(100%,100%,100%,.2) 80%, transparent); } -#PanelUI-menu-button[update-status="succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { +#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { display: -moz-box; - background-image: url(chrome://browser/skin/update-badge.svg); - background-color: #74BF43; height: 10px; width: 10px; + background-size: contain; border: none; } +#PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background-image: url(chrome://browser/skin/update-badge.svg); + background-color: #74BF43; +} + +#PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background-image: url(chrome://browser/skin/update-badge-failed.svg); + background-color: #D90000; +} + +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background-color: transparent; + background-image: url(chrome://browser/skin/warning.svg); + box-shadow: none; + filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15)); +} + +#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { + filter: none; +} + .panel-subviews { padding: 4px; background-clip: padding-box; diff --git a/browser/themes/shared/update-badge-failed.svg b/browser/themes/shared/update-badge-failed.svg new file mode 100644 index 000000000000..e31e6ec6b2b1 --- /dev/null +++ b/browser/themes/shared/update-badge-failed.svg @@ -0,0 +1,6 @@ + + + + diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn index bd152435bf5e..c4d447e9c892 100644 --- a/browser/themes/windows/jar.mn +++ b/browser/themes/windows/jar.mn @@ -143,6 +143,7 @@ browser.jar: skin/classic/browser/undoCloseTab.png (../shared/undoCloseTab.png) skin/classic/browser/undoCloseTab@2x.png (../shared/undoCloseTab@2x.png) skin/classic/browser/update-badge.svg (../shared/update-badge.svg) + skin/classic/browser/update-badge-failed.svg (../shared/update-badge-failed.svg) skin/classic/browser/urlbar-arrow.png (../shared/urlbar-arrow.png) skin/classic/browser/urlbar-arrow@2x.png (../shared/urlbar-arrow@2x.png) skin/classic/browser/urlbar-popup-blocked.png