--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1182,17 +1182,17 @@ toolbarpaletteitem[place="palette"][hidd
#customization-palette .toolbarpaletteitem-box {
-moz-box-pack: center;
-moz-box-flex: 1;
width: 10em;
max-width: 10em;
}
-#main-window[customizing=true] .PanelUI-notification-menu-item {
+#main-window[customizing=true] .panel-banner-item {
display: none;
}
/* UI Tour */
@keyframes uitour-wobble {
from {
transform: rotate(0deg) translateX(3px) rotate(0deg);
--- a/browser/base/content/test/appUpdate/head.js
+++ b/browser/base/content/test/appUpdate/head.js
@@ -203,17 +203,17 @@ function processStep({notificationId, bu
is(shownNotification, notificationId, "The right notification showed up.");
if (shownNotification != notificationId) {
if (cleanup) {
yield cleanup();
}
return;
}
- let notification = document.getElementById(`PanelUI-${notificationId}-notification`);
+ let notification = document.getElementById(`appMenu-${notificationId}-notification`);
is(notification.hidden, false, `${notificationId} notification is showing`);
if (beforeClick) {
yield Task.spawn(beforeClick);
}
let buttonEl = document.getAnonymousElementByAttribute(notification, "anonid", button);
buttonEl.click();
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -12,27 +12,22 @@
<panelmultiview id="PanelUI-multiView" mainViewId="PanelUI-mainView">
<panelview id="PanelUI-mainView" context="customizationPanelContextMenu">
<vbox id="PanelUI-contents-scroller">
<vbox id="PanelUI-contents" class="panelUI-grid"/>
</vbox>
<footer id="PanelUI-footer">
<vbox id="PanelUI-footer-addons"></vbox>
- <toolbarbutton id="PanelUI-update-available-menu-item"
- wrap="true"
- label="&updateAvailable.panelUI.label;"
- hidden="true"/>
- <toolbarbutton id="PanelUI-update-manual-menu-item"
+ <toolbarbutton class="panel-banner-item"
+ label-update-available="&updateAvailable.panelUI.label;"
+ label-update-manual="&updateManual.panelUI.label;"
+ label-update-restart="&updateRestart.panelUI.label;"
+ oncommand="PanelUI._onBannerItemSelected(event)"
wrap="true"
- label="&updateManual.panelUI.label;"
- hidden="true"/>
- <toolbarbutton id="PanelUI-update-restart-menu-item"
- wrap="true"
- label="&updateRestart.panelUI.label;"
hidden="true"/>
<hbox id="PanelUI-footer-fxa">
<hbox id="PanelUI-fxa-status"
defaultlabel="&fxaSignIn.label;"
signedinTooltiptext="&fxaSignedIn.tooltip;"
tooltiptext="&fxaSignedIn.tooltip;"
errorlabel="&fxaSignInError.label;"
unverifiedlabel="&fxaUnverified.label;"
@@ -424,27 +419,27 @@
<description>&panicButton.thankyou.msg2;</description>
</vbox>
</hbox>
<button label="&panicButton.thankyou.buttonlabel;"
id="panic-button-success-closebutton"
oncommand="PanicButtonNotifier.close()"/>
</panel>
-<panel id="PanelUI-notification-popup"
+<panel id="appMenu-notification-popup"
class="popup-notification-panel"
type="arrow"
position="after_start"
hidden="true"
orient="vertical"
noautofocus="true"
noautohide="true"
nopreventnavboxhide="true"
role="alert">
- <popupnotification id="PanelUI-update-available-notification"
+ <popupnotification id="appMenu-update-available-notification"
popupid="update-available"
label="&updateAvailable.header.message;"
buttonlabel="&updateAvailable.acceptButton.label;"
buttonaccesskey="&updateAvailable.acceptButton.accesskey;"
closebuttonhidden="true"
secondarybuttonlabel="&updateAvailable.cancelButton.label;"
secondarybuttonaccesskey="&updateAvailable.cancelButton.accesskey;"
dropmarkerhidden="true"
@@ -452,17 +447,17 @@
hidden="true">
<popupnotificationcontent id="update-available-notification-content" orient="vertical">
<description id="update-available-description">&updateAvailable.message;
<label id="update-available-whats-new" class="text-link" value="&updateAvailable.whatsnew.label;" />
</description>
</popupnotificationcontent>
</popupnotification>
- <popupnotification id="PanelUI-update-manual-notification"
+ <popupnotification id="appMenu-update-manual-notification"
popupid="update-manual"
label="&updateManual.header.message;"
buttonlabel="&updateManual.acceptButton.label;"
buttonaccesskey="&updateManual.acceptButton.accesskey;"
closebuttonhidden="true"
secondarybuttonlabel="&updateManual.cancelButton.label;"
secondarybuttonaccesskey="&updateManual.cancelButton.accesskey;"
dropmarkerhidden="true"
@@ -470,17 +465,17 @@
hidden="true">
<popupnotificationcontent id="update-manual-notification-content" orient="vertical">
<description id="update-manual-description">&updateManual.message;
<label id="update-manual-whats-new" class="text-link" value="&updateManual.whatsnew.label;" />
</description>
</popupnotificationcontent>
</popupnotification>
- <popupnotification id="PanelUI-update-restart-notification"
+ <popupnotification id="appMenu-update-restart-notification"
popupid="update-restart"
label="&updateRestart.header.message2;"
buttonlabel="&updateRestart.acceptButton.label;"
buttonaccesskey="&updateRestart.acceptButton.accesskey;"
closebuttonhidden="true"
secondarybuttonlabel="&updateRestart.cancelButton.label;"
secondarybuttonaccesskey="&updateRestart.cancelButton.accesskey;"
dropmarkerhidden="true"
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -30,19 +30,18 @@ const PanelUI = {
get kElements() {
return {
contents: "PanelUI-contents",
mainView: gPhotonStructure ? "appMenu-mainView" : "PanelUI-mainView",
multiView: gPhotonStructure ? "appMenu-multiView" : "PanelUI-multiView",
helpView: "PanelUI-helpView",
menuButton: "PanelUI-menu-button",
panel: gPhotonStructure ? "appMenu-popup" : "PanelUI-popup",
- notificationPanel: "PanelUI-notification-popup",
+ notificationPanel: "appMenu-notification-popup",
scroller: "PanelUI-contents-scroller",
- footer: "PanelUI-footer",
overflowFixedList: gPhotonStructure ? "widget-overflow-fixed-list" : "",
};
},
_initialized: false,
init() {
for (let [k, v] of Object.entries(this.kElements)) {
@@ -698,31 +697,31 @@ const PanelUI = {
if (this.panel.state == "showing" || this.panel.state == "open") {
// If the menu is already showing, then we need to dismiss all notifications
// since we don't want their doorhangers competing for attention
doorhangers.forEach(n => { n.dismissed = true; })
this._hidePopup();
this._clearBadge();
if (!this.notifications[0].options.badgeOnly) {
- this._showMenuItem(this.notifications[0]);
+ this._showBannerItem(this.notifications[0]);
}
} else if (doorhangers.length > 0) {
if (window.fullScreen) {
this._hidePopup();
this._showBadge(doorhangers[0]);
- this._showMenuItem(doorhangers[0]);
+ this._showBannerItem(doorhangers[0]);
} else {
this._clearBadge();
this._showNotificationPanel(doorhangers[0]);
}
} else {
this._hidePopup();
this._showBadge(this.notifications[0]);
- this._showMenuItem(this.notifications[0]);
+ this._showBannerItem(this.notifications[0]);
}
},
_showNotificationPanel(notification) {
this._refreshNotificationPanel(notification);
if (this.isNotificationPanelOpen) {
return;
@@ -739,17 +738,17 @@ const PanelUI = {
popupnotification.hidden = true;
popupnotification.notification = null;
}
},
_clearAllNotifications() {
this._clearNotificationPanel();
this._clearBadge();
- this._clearMenuItems();
+ this._clearBannerItem();
},
_refreshNotificationPanel(notification) {
this._clearNotificationPanel();
let popupnotificationID = this._getPopupId(notification);
let popupnotification = document.getElementById(popupnotificationID);
@@ -761,42 +760,41 @@ const PanelUI = {
popupnotification.hidden = false;
},
_showBadge(notification) {
let badgeStatus = this._getBadgeStatus(notification);
this.menuButton.setAttribute("badge-status", badgeStatus);
},
- // "Menu item" here refers to an item in the hamburger panel menu. They will
- // typically show up as a colored row near the bottom of the panel.
- _showMenuItem(notification) {
- this._clearMenuItems();
-
- let menuItemId = this._getMenuItemId(notification);
- let menuItem = document.getElementById(menuItemId);
- if (menuItem) {
- menuItem.notification = notification;
- menuItem.setAttribute("oncommand", "PanelUI._onNotificationMenuItemSelected(event)");
- menuItem.classList.add("PanelUI-notification-menu-item");
- menuItem.hidden = false;
- menuItem.fromPanelUINotifications = true;
+ // "Banner item" here refers to an item in the hamburger panel menu. They will
+ // typically show up as a colored row in the panel.
+ _showBannerItem(notification) {
+ if (!this._panelBannerItem) {
+ this._panelBannerItem = this.mainView.querySelector(".panel-banner-item");
}
+ let label = this._panelBannerItem.getAttribute("label-" + notification.id);
+ // Ignore items we don't know about.
+ if (!label) {
+ return;
+ }
+ this._panelBannerItem.setAttribute("notificationid", notification.id);
+ this._panelBannerItem.setAttribute("label", label);
+ this._panelBannerItem.hidden = false;
+ this._panelBannerItem.notification = notification;
},
_clearBadge() {
this.menuButton.removeAttribute("badge-status");
},
- _clearMenuItems() {
- for (let child of this.footer.children) {
- if (child.fromPanelUINotifications) {
- child.notification = null;
- child.hidden = true;
- }
+ _clearBannerItem() {
+ if (this._panelBannerItem) {
+ this._panelBannerItem.notification = null;
+ this._panelBannerItem.hidden = true;
}
},
_removeNotification(notification) {
// This notification may already be removed, in which case let's just fail
// silently.
let notifications = this.notifications;
if (!notifications)
@@ -847,17 +845,17 @@ const PanelUI = {
notification.dismissed = true;
this._notify(notification.id, "dismissed");
} else {
this._removeNotification(notification);
}
this._updateNotifications();
},
- _onNotificationMenuItemSelected(event) {
+ _onBannerItemSelected(event) {
let target = event.originalTarget;
if (!target.notification)
throw "menucommand target has no associated action/notification";
event.stopPropagation();
try {
target.notification.mainAction.callback(false);
@@ -865,22 +863,20 @@ const PanelUI = {
} catch (error) {
Cu.reportError(error);
}
this._removeNotification(target.notification);
this._updateNotifications();
},
- _getPopupId(notification) { return "PanelUI-" + notification.id + "-notification"; },
+ _getPopupId(notification) { return "appMenu-" + notification.id + "-notification"; },
_getBadgeStatus(notification) { return notification.id; },
- _getMenuItemId(notification) { return "PanelUI-" + notification.id + "-menu-item"; },
-
_getPanelAnchor(candidate) {
let iconAnchor =
document.getAnonymousElementByAttribute(candidate, "class",
"toolbarbutton-icon");
return iconAnchor || candidate;
},
_addedShortcuts: false,
--- a/browser/components/customizableui/test/browser_panelUINotifications.js
+++ b/browser/components/customizableui/test/browser_panelUINotifications.js
@@ -27,17 +27,17 @@ add_task(function* testMainActionCalled(
callback: () => { extraMainActionCalled = true; }
};
extraWindow.PanelUI.showNotification("update-manual", extraMainAction)
isnot(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is showing.");
let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
let doorhanger = notifications[0];
- is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+ is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
let mainActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "button");
mainActionButton.click();
ok(mainActionCalled, "Main action callback was called");
isnot(extraMainActionCalled, true, "Extra window's main action callback was not called");
is(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is closed.");
is(extraWindow.PanelUI.notificationPanel.state, "closed", "Extra window's update-manual doorhanger is closed.");
@@ -77,29 +77,30 @@ add_task(function* testSecondaryActionWo
callback: () => { extraMainActionCalled = true; }
};
extraWindow.PanelUI.showNotification("update-manual", extraMainAction)
isnot(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is showing.");
let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
let doorhanger = notifications[0];
- is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+ is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
let secondaryActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "secondarybutton");
secondaryActionButton.click();
is(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is closed.");
is(extraWindow.PanelUI.notificationPanel.state, "closed", "Extra window's update-manual doorhanger is closed.");
is(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "Badge is displaying on PanelUI button.");
yield PanelUI.show();
isnot(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "Badge is hidden on PanelUI button.");
- let menuItem = doc.getElementById("PanelUI-update-manual-menu-item");
+ let menuItem = PanelUI.mainView.querySelector(".panel-banner-item");
+ is(menuItem.label, menuItem.getAttribute("label-update-manual"), "Showing correct label");
is(menuItem.hidden, false, "update-manual menu item is showing.");
yield PanelUI.hide();
is(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "Badge is shown on PanelUI button.");
yield PanelUI.show();
menuItem.click();
ok(mainActionCalled, "Main action callback was called");
@@ -131,28 +132,29 @@ add_task(function* testInteractionWithBa
};
PanelUI.showNotification("update-manual", mainAction);
isnot(PanelUI.menuButton.getAttribute("badge-status"), "fxa-needs-authentication", "Fxa badge is hidden on PanelUI button.");
isnot(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is showing.");
let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
let doorhanger = notifications[0];
- is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+ is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
let secondaryActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "secondarybutton");
secondaryActionButton.click();
is(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is closed.");
is(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "Badge is displaying on PanelUI button.");
yield PanelUI.show();
isnot(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "Badge is hidden on PanelUI button.");
- let menuItem = doc.getElementById("PanelUI-update-manual-menu-item");
+ let menuItem = PanelUI.mainView.querySelector(".panel-banner-item");
+ is(menuItem.label, menuItem.getAttribute("label-update-manual"), "Showing correct label");
is(menuItem.hidden, false, "update-manual menu item is showing.");
menuItem.click();
ok(mainActionCalled, "Main action callback was called");
is(PanelUI.menuButton.getAttribute("badge-status"), "fxa-needs-authentication", "Fxa badge is shown on PanelUI button.");
PanelUI.removeNotification(/.*/);
is(PanelUI.menuButton.hasAttribute("badge-status"), false, "Should not have a badge status");
@@ -174,17 +176,17 @@ add_task(function* testAddingBadgeWhileD
PanelUI.showNotification("update-manual", mainAction);
PanelUI.showBadgeOnlyNotification("fxa-needs-authentication");
isnot(PanelUI.menuButton.getAttribute("badge-status"), "fxa-needs-authentication", "Fxa badge is hidden on PanelUI button.");
isnot(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is showing.");
let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
let doorhanger = notifications[0];
- is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+ is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
let mainActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "button");
mainActionButton.click();
ok(mainActionCalled, "Main action callback was called");
is(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is closed.");
is(PanelUI.menuButton.getAttribute("badge-status"), "fxa-needs-authentication", "Fxa badge is shown on PanelUI button.");
PanelUI.removeNotification(/.*/);
@@ -260,48 +262,47 @@ add_task(function* testMultipleNonBadges
let notifications;
let doorhanger;
isnot(PanelUI.notificationPanel.state, "closed", "Doorhanger is showing.");
notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
doorhanger = notifications[0];
- is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+ is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
PanelUI.showNotification("update-restart", updateRestartAction);
isnot(PanelUI.notificationPanel.state, "closed", "Doorhanger is showing.");
notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
doorhanger = notifications[0];
- is(doorhanger.id, "PanelUI-update-restart-notification", "PanelUI is displaying the update-restart notification.");
+ is(doorhanger.id, "appMenu-update-restart-notification", "PanelUI is displaying the update-restart notification.");
let secondaryActionButton = doc.getAnonymousElementByAttribute(doorhanger, "anonid", "secondarybutton");
secondaryActionButton.click();
is(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is closed.");
is(PanelUI.menuButton.getAttribute("badge-status"), "update-restart", "update-restart badge is displaying on PanelUI button.");
- let menuItem;
-
yield PanelUI.show();
isnot(PanelUI.menuButton.getAttribute("badge-status"), "update-restart", "update-restart badge is hidden on PanelUI button.");
- menuItem = doc.getElementById("PanelUI-update-restart-menu-item");
+ let menuItem = PanelUI.mainView.querySelector(".panel-banner-item");
+ is(menuItem.label, menuItem.getAttribute("label-update-restart"), "Showing correct label");
is(menuItem.hidden, false, "update-restart menu item is showing.");
menuItem.click();
ok(updateRestartAction.called, "update-restart main action callback was called");
is(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is closed.");
is(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "update-manual badge is displaying on PanelUI button.");
yield PanelUI.show();
isnot(PanelUI.menuButton.getAttribute("badge-status"), "update-manual", "update-manual badge is hidden on PanelUI button.");
- menuItem = doc.getElementById("PanelUI-update-manual-menu-item");
+ is(menuItem.label, menuItem.getAttribute("label-update-manual"), "Showing correct label");
is(menuItem.hidden, false, "update-manual menu item is showing.");
menuItem.click();
ok(updateManualAction.called, "update-manual main action callback was called");
});
});
add_task(function* testFullscreen() {
@@ -313,17 +314,17 @@ add_task(function* testFullscreen() {
callback: () => { mainActionCalled = true; }
};
PanelUI.showNotification("update-manual", mainAction);
isnot(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is showing.");
let notifications = [...PanelUI.notificationPanel.children].filter(n => !n.hidden);
is(notifications.length, 1, "PanelUI doorhanger is only displaying one notification.");
let doorhanger = notifications[0];
- is(doorhanger.id, "PanelUI-update-manual-notification", "PanelUI is displaying the update-manual notification.");
+ is(doorhanger.id, "appMenu-update-manual-notification", "PanelUI is displaying the update-manual notification.");
let popuphiddenPromise = BrowserTestUtils.waitForEvent(PanelUI.notificationPanel, "popuphidden");
EventUtils.synthesizeKey("VK_F11", {});
yield popuphiddenPromise;
yield new Promise(executeSoon);
is(PanelUI.notificationPanel.state, "closed", "update-manual doorhanger is closed.");
window.FullScreen.showNavToolbox();
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -119,26 +119,22 @@
border: 1px solid -moz-dialog;
/* "!important" is necessary to override the rule in toolbarbutton.css */
margin: -9px 0 0 !important;
margin-inline-end: -6px !important;
min-width: 16px;
min-height: 16px;
}
-#PanelUI-update-restart-menu-item::after,
-#PanelUI-update-available-menu-item::after,
-#PanelUI-update-manual-menu-item::after {
+.panel-banner-item[notificationid^=update]::after {
background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center;
border-radius: 50%;
}
-#PanelUI-update-restart-menu-item,
-#PanelUI-update-available-menu-item,
-#PanelUI-update-manual-menu-item {
+.panel-banner-item[notificationid^=update] {
list-style-image: url(chrome://branding/content/icon16.png);
}
#PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
#PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
box-shadow: none;
filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
}
@@ -460,17 +456,17 @@ toolbaritem[cui-areatype="menu-panel"][s
}
#PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
background-color: var(--arrowpanel-dimmed);
}
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
-#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .PanelUI-notification-menu-item,
+#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .panel-banner-item,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-footer-inner > toolbarseparator,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
#PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
opacity: .5;
}
@@ -583,17 +579,17 @@ toolbarpaletteitem[place="palette"] > to
padding-top: 1px;
display: block;
text-align: center;
position: relative;
top: 25%;
}
#PanelUI-footer-addons > toolbarbutton::after,
-.PanelUI-notification-menu-item::after {
+.panel-banner-item::after {
content: "";
width: 16px;
height: 16px;
margin-inline-end: 16.5px;
display: -moz-box;
}
#PanelUI-footer-addons > toolbarbutton {
@@ -649,17 +645,17 @@ toolbarpaletteitem[place="palette"] > to
-moz-appearance: none;
}
#PanelUI-footer-inner:hover > toolbarseparator,
#PanelUI-footer-fxa:hover > toolbarseparator {
margin: 0;
}
-.PanelUI-notification-menu-item,
+.panel-banner-item,
#PanelUI-help,
#PanelUI-fxa-label,
#PanelUI-fxa-icon,
#PanelUI-footer-addons > toolbarbutton,
#PanelUI-customize,
#PanelUI-quit {
margin: 0;
padding: 11px 0;
@@ -668,47 +664,47 @@ toolbarpaletteitem[place="palette"] > to
-moz-appearance: none;
box-shadow: none;
border: none;
border-radius: 0;
transition: background-color;
-moz-box-orient: horizontal;
}
-.PanelUI-notification-menu-item {
+.panel-banner-item {
border-top: 1px solid var(--panel-separator-color);
border-bottom: 1px solid transparent;
margin-bottom: -1px;
}
-.PanelUI-notification-menu-item > .toolbarbutton-text {
+.panel-banner-item > .toolbarbutton-text {
width: 0; /* Fancy cropping solution for flexbox. */
}
#PanelUI-help,
#PanelUI-quit {
min-width: 46px;
}
-.PanelUI-notification-menu-item > .toolbarbutton-text,
+.panel-banner-item > .toolbarbutton-text,
#PanelUI-fxa-label > .toolbarbutton-text,
#PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
#PanelUI-customize > .toolbarbutton-text {
margin: 0;
padding: 0 6px;
text-align: start;
}
#PanelUI-help > .toolbarbutton-text,
#PanelUI-quit > .toolbarbutton-text,
#PanelUI-fxa-avatar > .toolbarbutton-text {
display: none;
}
-.PanelUI-notification-menu-item > .toolbarbutton-icon,
+.panel-banner-item > .toolbarbutton-icon,
#PanelUI-fxa-label > .toolbarbutton-icon,
#PanelUI-fxa-icon > .toolbarbutton-icon,
#PanelUI-customize > .toolbarbutton-icon,
#PanelUI-help > .toolbarbutton-icon,
#PanelUI-quit > .toolbarbutton-icon {
margin-inline-end: 0;
}
@@ -727,17 +723,17 @@ toolbarpaletteitem[place="palette"] > to
#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
padding-inline-start: 0px;
}
/* descend from #PanelUI-footer to add specificity, or else the
padding-inline-start will be overridden */
-#PanelUI-footer > .PanelUI-notification-menu-item {
+#PanelUI-footer > .panel-banner-item {
width: calc(@menuPanelWidth@ + 30px);
padding-inline-start: 15px;
border-inline-start-style: none;
}
#PanelUI-fxa-label,
#PanelUI-fxa-icon {
list-style-image: url(chrome://browser/skin/sync-horizontalbar.png);
@@ -978,26 +974,26 @@ toolbarpaletteitem[place="palette"] > to
background-color: hsl(42,94%,85%);
}
#PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
background-color: hsl(42,94%,82%);
box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}
-.PanelUI-notification-menu-item {
+.panel-banner-item {
color: black;
background-color: hsla(96,65%,75%,.5);
}
-.PanelUI-notification-menu-item:not([disabled]):hover {
+.panel-banner-item:not([disabled]):hover {
background-color: hsla(96,65%,75%,.8);
}
-.PanelUI-notification-menu-item:not([disabled]):hover:active {
+.panel-banner-item:not([disabled]):hover:active {
background-color: hsl(96,65%,75%);
}
#PanelUI-quit:not([disabled]):hover {
background-color: #d94141;
outline-color: #c23a3a;
}
@@ -1703,19 +1699,17 @@ menuitem[checked="true"].subviewbutton >
}
#PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after,
toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl@2x.png),
linear-gradient(rgba(255,255,255,0.3), transparent);
}
- #PanelUI-update-restart-menu-item,
- #PanelUI-update-available-menu-item,
- #PanelUI-update-manual-menu-item {
+ .panel-banner-item[notificationid^=update] {
list-style-image: url(chrome://branding/content/icon32.png);
}
#PanelUI-fxa-label,
#PanelUI-fxa-icon {
list-style-image: url(chrome://browser/skin/sync-horizontalbar@2x.png);
}
@@ -1742,17 +1736,17 @@ menuitem[checked="true"].subviewbutton >
#PanelUI-fxa-label,
#PanelUI-fxa-icon,
#PanelUI-customize,
#PanelUI-help,
#PanelUI-quit {
-moz-image-region: rect(0, 32px, 32px, 0);
}
- .PanelUI-notification-menu-item > .toolbarbutton-icon,
+ .panel-banner-item > .toolbarbutton-icon,
#PanelUI-fxa-label > .toolbarbutton-icon,
#PanelUI-fxa-icon > .toolbarbutton-icon,
#PanelUI-customize > .toolbarbutton-icon,
#PanelUI-help > .toolbarbutton-icon,
#PanelUI-quit > .toolbarbutton-icon {
width: 16px;
}