diff --git a/browser/base/content/browser-sync.js b/browser/base/content/browser-sync.js index 75b915a385f7..1582095a9afc 100644 --- a/browser/base/content/browser-sync.js +++ b/browser/base/content/browser-sync.js @@ -71,7 +71,7 @@ var gSync = { }, _generateNodeGetters() { - for (let k of ["Status", "Avatar", "Label", "Container"]) { + for (let k of ["Status", "Avatar", "Label"]) { let prop = "appMenu" + k; let suffix = k.toLowerCase(); delete this[prop]; @@ -394,7 +394,7 @@ var gSync = { const status = state.status; // Reset the status bar to its original state. this.appMenuLabel.setAttribute("label", defaultLabel); - this.appMenuContainer.removeAttribute("fxastatus"); + this.appMenuStatus.removeAttribute("fxastatus"); this.appMenuAvatar.style.removeProperty("list-style-image"); this.appMenuLabel.classList.remove("subviewbutton-nav"); @@ -406,21 +406,21 @@ var gSync = { if (status == UIState.STATUS_LOGIN_FAILED) { let tooltipDescription = this.fxaStrings.formatStringFromName("reconnectDescription", [state.email]); let errorLabel = this.appMenuStatus.getAttribute("errorlabel"); - this.appMenuContainer.setAttribute("fxastatus", "login-failed"); + this.appMenuStatus.setAttribute("fxastatus", "login-failed"); this.appMenuLabel.setAttribute("label", errorLabel); this.appMenuStatus.setAttribute("tooltiptext", tooltipDescription); return; } else if (status == UIState.STATUS_NOT_VERIFIED) { let tooltipDescription = this.fxaStrings.formatStringFromName("verifyDescription", [state.email]); let unverifiedLabel = this.appMenuStatus.getAttribute("unverifiedlabel"); - this.appMenuContainer.setAttribute("fxastatus", "unverified"); + this.appMenuStatus.setAttribute("fxastatus", "unverified"); this.appMenuLabel.setAttribute("label", unverifiedLabel); this.appMenuStatus.setAttribute("tooltiptext", tooltipDescription); return; } // At this point we consider sync to be logged-in. - this.appMenuContainer.setAttribute("fxastatus", "signedin"); + this.appMenuStatus.setAttribute("fxastatus", "signedin"); this.appMenuLabel.setAttribute("label", state.displayName || state.email); this.appMenuLabel.classList.add("subviewbutton-nav"); this.appMenuStatus.removeAttribute("tooltiptext"); @@ -451,18 +451,18 @@ var gSync = { }, onMenuPanelCommand() { - switch (this.appMenuContainer.getAttribute("fxastatus")) { + switch (this.appMenuStatus.getAttribute("fxastatus")) { case "signedin": const panel = document.getElementById("appMenu-fxa-status"); this.emitFxaToolbarTelemetry("toolbar_icon", panel); PanelUI.showSubView("PanelUI-fxa", panel); break; + case "unverified": + this.openPrefs("menupanel", "fxaError"); + PanelUI.hide(); + break; case "error": - if (this.appMenuContainer.getAttribute("fxastatus") == "unverified") { - this.openPrefs("menupanel", "fxaError"); - } else { - this.openSignInAgainPage("menupanel"); - } + this.openSignInAgainPage("menupanel"); PanelUI.hide(); break; default: diff --git a/browser/base/content/test/sync/browser_sync.js b/browser/base/content/test/sync/browser_sync.js index ca264897ba76..213ac02d9bcc 100644 --- a/browser/base/content/test/sync/browser_sync.js +++ b/browser/base/content/test/sync/browser_sync.js @@ -144,12 +144,11 @@ add_task(async function test_ui_state_loginFailed() { function checkPanelUIStatusBar({label, tooltip, fxastatus, syncing, syncNowTooltip}) { let labelNode = document.getElementById("appMenu-fxa-label"); - let tooltipNode = document.getElementById("appMenu-fxa-status"); - let statusNode = document.getElementById("appMenu-fxa-container"); + let statusNode = document.getElementById("appMenu-fxa-status"); is(labelNode.getAttribute("label"), label, "fxa label has the right value"); - if (tooltipNode.getAttribute("tooltiptext")) { - is(tooltipNode.getAttribute("tooltiptext"), tooltip, "fxa tooltip has the right value"); + if (statusNode.getAttribute("tooltiptext")) { + is(statusNode.getAttribute("tooltiptext"), tooltip, "fxa tooltip has the right value"); } if (fxastatus) { is(statusNode.getAttribute("fxastatus"), fxastatus, "fxa fxastatus has the right value"); diff --git a/browser/components/customizableui/content/panelUI.inc.xul b/browser/components/customizableui/content/panelUI.inc.xul index 1d1821f53490..a396e83bf053 100644 --- a/browser/components/customizableui/content/panelUI.inc.xul +++ b/browser/components/customizableui/content/panelUI.inc.xul @@ -236,23 +236,22 @@ oncommand="PanelUI._onBannerItemSelected(event)" wrap="true" hidden="true"/> - - - - - + tooltiptext="&fxaSignedIn.tooltip;" + errorlabel="&fxaSignInError.label;" + unverifiedlabel="&fxaUnverified.label;" + onclick="if (event.which == 1) gSync.onMenuPanelCommand();"> + + diff --git a/browser/components/uitour/UITour.jsm b/browser/components/uitour/UITour.jsm index e26ec2e81dcd..dcae82364264 100644 --- a/browser/components/uitour/UITour.jsm +++ b/browser/components/uitour/UITour.jsm @@ -80,7 +80,7 @@ var UITour = { ["accountStatus", { query: (aDocument) => { // If the user is logged in, use the avatar element. - let fxAFooter = aDocument.getElementById("appMenu-fxa-container"); + let fxAFooter = aDocument.getElementById("appMenu-fxa-status"); if (fxAFooter.getAttribute("fxastatus")) { return aDocument.getElementById("appMenu-fxa-avatar"); } diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css index 8f8c1d992a40..0a581e838b08 100644 --- a/browser/themes/osx/customizableui/panelUI.css +++ b/browser/themes/osx/customizableui/panelUI.css @@ -25,13 +25,13 @@ panelmultiview .toolbaritem-combined-buttons > spacer.before-label { padding-inline-start: 18px; } -#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label { +#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label { /* 18px space before the avatar, then 16px for the avatar */ padding-inline-start: 34px; margin-inline-start: -34px; } -#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar { +#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar { margin-inline-start: 18px; } diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css index b8072e3b9b28..4ad39c60d72f 100644 --- a/browser/themes/shared/customizableui/panelUI.inc.css +++ b/browser/themes/shared/customizableui/panelUI.inc.css @@ -528,8 +528,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton width: 16px; } -#appMenu-addon-banners:not(:empty) ~ #appMenu-fxa-container, -.panel-banner-item:not([hidden]) + #appMenu-fxa-container { +#appMenu-addon-banners:not(:empty) ~ #appMenu-fxa-status, +.panel-banner-item:not([hidden]) + #appMenu-fxa-status { margin-top: 6px; } @@ -568,43 +568,43 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton } /* Handle different UI states. */ -#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon, -#appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar { +#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label > .toolbarbutton-icon, +#appMenu-fxa-status:not([fxastatus="signedin"]) > #appMenu-fxa-avatar { display: none; } -#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label { +#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label { /* 12px space before the avatar, then 16px for the avatar */ padding-inline-start: 28px; margin-inline-start: -28px; } -#appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar { +#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar { margin-inline-start: 12px; } /* Error states */ -#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label, -#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label { +#appMenu-fxa-status[fxastatus="unverified"] > #appMenu-fxa-label, +#appMenu-fxa-status[fxastatus="login-failed"] > #appMenu-fxa-label { list-style-image: url(chrome://browser/skin/warning.svg); -moz-image-region: rect(0, 16px, 16px, 0); } -#appMenu-fxa-container[fxastatus="login-failed"], -#appMenu-fxa-container[fxastatus="unverified"] { +#appMenu-fxa-status[fxastatus="login-failed"], +#appMenu-fxa-status[fxastatus="unverified"] { background-color: @appmenuWarningBackgroundColor@; color: @appmenuWarningColor@; border-top: 1px solid @appmenuWarningBorderColor@; border-bottom: 1px solid @appmenuWarningBorderColor@; } -#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover, -#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover { +#appMenu-fxa-status[fxastatus="login-failed"]:hover, +#appMenu-fxa-status[fxastatus="unverified"]:hover { background-color: @appmenuWarningBackgroundColorHover@; } -#appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active, -#appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active { +#appMenu-fxa-status[fxastatus="login-failed"]:hover:active, +#appMenu-fxa-status[fxastatus="unverified"]:hover:active { background-color: @appmenuWarningBackgroundColorActive@; } @@ -666,19 +666,19 @@ toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton background: @appmenuWarningBackgroundColorActiveBrightText@; } -:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"], -:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] { +:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"], +:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"] { background-color: @appmenuWarningBackgroundColorBrightText@; color: @appmenuWarningColorBrightText@; } -:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover, -:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover { +:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"]:hover, +:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover { background-color: @appmenuWarningBackgroundColorHoverBrightText@; } -:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active, -:root[lwt-popup-brighttext] #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active { +:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="login-failed"]:hover:active, +:root[lwt-popup-brighttext] #appMenu-fxa-status[fxastatus="unverified"]:hover:active { background-color: @appmenuWarningBackgroundColorActiveBrightText@; }