Bug 1515902 - Introduce panel-footer class to fix common color problem with footer buttons. r=ntim
authorDão Gottwald <dao@mozilla.com>
Fri, 21 Dec 2018 15:44:44 +0000
changeset 451682 a4dc9a08f321e53e14857d8eeb9d966b7a66314c
parent 451681 0987791fff8daa281dcfea241e0004a37ee7ee09
child 451683 97c7afd44d4b25da3d2ed2c1ff838a6ea36a28d3
push id35251
push userccoroiu@mozilla.com
push dateFri, 21 Dec 2018 21:54:30 +0000
treeherdermozilla-central@74101900e7d4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1515902
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1515902 - Introduce panel-footer class to fix common color problem with footer buttons. r=ntim Differential Revision: https://phabricator.services.mozilla.com/D15188
browser/base/content/browser.xul
browser/base/content/test/popupNotifications/browser_popupNotification.js
browser/base/content/test/popupNotifications/head.js
browser/components/controlcenter/content/panel.inc.xul
browser/components/downloads/content/downloadsPanel.inc.xul
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/shared/places/editBookmarkPanel.inc.css
toolkit/content/widgets/notification.xml
toolkit/modules/PopupNotifications.jsm
toolkit/themes/linux/global/global.css
toolkit/themes/linux/global/notification.css
toolkit/themes/osx/global/global.css
toolkit/themes/osx/global/notification.css
toolkit/themes/shared/close-icon.inc.css
toolkit/themes/shared/global.inc.css
toolkit/themes/shared/popupnotification.inc.css
toolkit/themes/windows/global/global.css
toolkit/themes/windows/global/notification.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -333,16 +333,17 @@ xmlns="http://www.w3.org/1999/xhtml"
       <vbox id="editBookmarkPanelBottomContent"
             flex="1">
         <checkbox id="editBookmarkPanel_showForNewBookmarks"
                   label="&editBookmark.showForNewBookmarks.label;"
                   accesskey="&editBookmark.showForNewBookmarks.accesskey;"
                   oncommand="StarUI.onShowForNewBookmarksCheckboxCommand();"/>
       </vbox>
       <hbox id="editBookmarkPanelBottomButtons"
+            class="panel-footer"
             style="min-width: &editBookmark.panel.width;;">
 #ifndef XP_UNIX
         <button id="editBookmarkPanelDoneButton"
                 class="editBookmarkPanelBottomButton"
                 label="&editBookmark.done.label;"
                 default="true"
                 oncommand="StarUI.panel.hidePopup();"/>
         <button id="editBookmarkPanelRemoveButton"
--- a/browser/base/content/test/popupNotifications/browser_popupNotification.js
+++ b/browser/base/content/test/popupNotifications/browser_popupNotification.js
@@ -213,17 +213,17 @@ var tests = [
     run() {
       this.notifyObj = new BasicNotification(this.id);
       this.notifyObj.mainAction = null;
       this.notifyObj.secondaryActions = null;
       this.notification = showNotification(this.notifyObj);
     },
     onShown(popup) {
       let notification = popup.children[0];
-      is(notification.getAttribute("buttonhighlight"), "true", "default action is highlighted");
+      ok(notification.hasAttribute("buttonhighlight"), "default action is highlighted");
       triggerMainCommand(popup);
     },
     onHidden(popup) {
       ok(!this.notifyObj.mainActionClicked, "mainAction was not clicked");
       ok(!this.notifyObj.dismissalCallbackTriggered, "dismissal callback wasn't triggered");
       ok(this.notifyObj.removedCallbackTriggered, "removed callback triggered");
     },
   },
@@ -234,17 +234,17 @@ var tests = [
     run() {
       this.notifyObj = new BasicNotification(this.id);
       this.notifyObj.mainAction = null;
       this.notification = showNotification(this.notifyObj);
     },
     onShown(popup) {
       let notification = popup.children[0];
       is(notification.getAttribute("secondarybuttonhidden"), "true", "secondary button is hidden");
-      is(notification.getAttribute("buttonhighlight"), "true", "default action is highlighted");
+      ok(notification.hasAttribute("buttonhighlight"), "default action is highlighted");
       triggerMainCommand(popup);
     },
     onHidden(popup) {
       ok(!this.notifyObj.mainActionClicked, "mainAction was not clicked");
       ok(!this.notifyObj.dismissalCallbackTriggered, "dismissal callback wasn't triggered");
       ok(this.notifyObj.removedCallbackTriggered, "removed callback triggered");
     },
   },
--- a/browser/base/content/test/popupNotifications/head.js
+++ b/browser/base/content/test/popupNotifications/head.js
@@ -200,18 +200,18 @@ function checkPopup(popup, notifyObj) {
   is(notification.getAttribute("endlabel"), text.end, "message matches");
 
   is(notification.id, notifyObj.id + "-notification", "id matches");
   if (notifyObj.mainAction) {
     is(notification.getAttribute("buttonlabel"), notifyObj.mainAction.label,
        "main action label matches");
     is(notification.getAttribute("buttonaccesskey"),
        notifyObj.mainAction.accessKey, "main action accesskey matches");
-    is(notification.getAttribute("buttonhighlight"),
-       (!notifyObj.mainAction.disableHighlight).toString(),
+    is(notification.hasAttribute("buttonhighlight"),
+       !notifyObj.mainAction.disableHighlight,
        "main action highlight matches");
   }
   if (notifyObj.secondaryActions && notifyObj.secondaryActions.length > 0) {
     let secondaryAction = notifyObj.secondaryActions[0];
     is(notification.getAttribute("secondarybuttonlabel"), secondaryAction.label,
        "secondary action label matches");
     is(notification.getAttribute("secondarybuttonaccesskey"),
        secondaryAction.accessKey, "secondary action accesskey matches");
--- a/browser/components/controlcenter/content/panel.inc.xul
+++ b/browser/components/controlcenter/content/panel.inc.xul
@@ -131,17 +131,17 @@
           <description id="identity-popup-permission-reload-hint">&identity.permissionsReloadHint;</description>
           <description id="identity-popup-permission-empty-hint">&identity.permissionsEmpty;</description>
         </vbox>
       </hbox>
 
       <!-- Clear Site Data Button -->
       <vbox hidden="true"
             id="identity-popup-clear-sitedata-footer"
-            class="identity-popup-footer">
+            class="panel-footer identity-popup-footer">
         <button id="identity-popup-clear-sitedata-button"
                 label="&identity.clearSiteData;"
                 oncommand="gIdentityHandler.clearSiteData(event); gIdentityHandler.recordClick('clear_sitedata');"/>
       </vbox>
     </panelview>
 
     <!-- Security SubView -->
     <panelview id="identity-popup-securityView"
@@ -220,17 +220,17 @@
                 oncommand="gIdentityHandler.disableMixedContentProtection()"/>
         <button when-mixedcontent="active-loaded"
                 label="&identity.enableMixedContentBlocking.label;"
                 accesskey="&identity.enableMixedContentBlocking.accesskey;"
                 class="panel-button"
                 oncommand="gIdentityHandler.enableMixedContentProtection()"/>
       </vbox>
 
-      <vbox id="identity-popup-more-info-footer" class="identity-popup-footer">
+      <vbox id="identity-popup-more-info-footer" class="panel-footer identity-popup-footer">
         <!-- More Security Information -->
         <button id="identity-popup-more-info"
                 label="&identity.moreInfoLinkText2;"
                 oncommand="gIdentityHandler.handleMoreInfoClick(event);"/>
       </vbox>
 
     </panelview>
 
@@ -240,32 +240,32 @@
                title="&contentBlocking.trackersView.label;"
                descriptionheightworkaround="true">
         <vbox id="identity-popup-trackersView-list" class="identity-popup-content-blocking-list">
         </vbox>
         <hbox id="identity-popup-trackersView-strict-info">
           <image/>
           <label>&contentBlocking.trackersView.strictInfo.label;</label>
         </hbox>
-        <vbox class="identity-popup-footer">
+        <vbox class="panel-footer identity-popup-footer">
           <button id="identity-popup-trackersView-settings-button"
                   label="&contentBlocking.manageSettings.label;"
                   accesskey="&contentBlocking.manageSettings.accesskey;"
                   oncommand="ContentBlocking.openPreferences();"/>
         </vbox>
     </panelview>
 
     <!-- Cookies SubView -->
     <panelview id="identity-popup-cookiesView"
                role="document"
                title="&contentBlocking.cookiesView.label;"
                descriptionheightworkaround="true">
         <vbox id="identity-popup-cookiesView-list" class="identity-popup-content-blocking-list">
         </vbox>
-        <vbox class="identity-popup-footer">
+        <vbox class="panel-footer identity-popup-footer">
           <button id="identity-popup-cookiesView-settings-button"
                   label="&contentBlocking.manageSettings.label;"
                   accesskey="&contentBlocking.manageSettings.accesskey;"
                   oncommand="ContentBlocking.openPreferences();"/>
         </vbox>
     </panelview>
 
     <!-- Report Breakage SubView -->
@@ -282,17 +282,18 @@
             <label class="identity-popup-breakageReportView-collection-label">&contentBlocking.breakageReportView.collection.url.label;</label>
             <label id="identity-popup-breakageReportView-collection-url"/>
           </vbox>
           <vbox class="identity-popup-breakageReportView-collection-section">
             <label class="identity-popup-breakageReportView-collection-label">&contentBlocking.breakageReportView.collection.comments.label;</label>
             <textbox multiline="true" id="identity-popup-breakageReportView-collection-comments"/>
           </vbox>
         </vbox>
-        <vbox id="identity-popup-breakageReportView-footer" class="identity-popup-footer">
+        <vbox id="identity-popup-breakageReportView-footer"
+              class="panel-footer identity-popup-footer">
           <button id="identity-popup-breakageReportView-cancel"
                   label="&contentBlocking.breakageReportView.cancel.label;"
                   oncommand="ContentBlocking.backToMainView();"/>
           <button id="identity-popup-breakageReportView-submit"
                   default="true"
                   label="&contentBlocking.breakageReportView.sendReport.label;"
                   oncommand="ContentBlocking.submitBreakageReport();"/>
         </vbox>
--- a/browser/components/downloads/content/downloadsPanel.inc.xul
+++ b/browser/components/downloads/content/downloadsPanel.inc.xul
@@ -130,17 +130,18 @@
               <description id="downloadsSummaryDescription"/>
               <html:progress id="downloadsSummaryProgress"
                              class="downloadProgress"
                              max="100"/>
               <description id="downloadsSummaryDetails"
                            crop="end"/>
             </vbox>
           </hbox>
-          <hbox id="downloadsFooterButtons">
+          <hbox id="downloadsFooterButtons"
+                class="panel-footer">
             <button id="downloadsHistory"
                     class="downloadsPanelFooterButton"
                     label="&downloadsHistory.label;"
                     accesskey="&downloadsHistory.accesskey;"
                     flex="1"
                     oncommand="DownloadsPanel.showDownloadsHistory();"
                     pack="start"/>
           </hbox>
@@ -153,17 +154,17 @@
                class="PanelUI-subView"
                title="&downloadDetails.label;">
       <vbox class="panel-view-body-unscrollable">
         <description id="downloadsPanel-blockedSubview-title"/>
         <description id="downloadsPanel-blockedSubview-details1"/>
         <description id="downloadsPanel-blockedSubview-details2"/>
       </vbox>
       <hbox id="downloadsPanel-blockedSubview-buttons"
-            class="downloadsPanelFooter"
+            class="panel-footer downloadsPanelFooter"
             align="stretch">
         <button id="downloadsPanel-blockedSubview-openButton"
                 class="downloadsPanelFooterButton"
                 command="downloadsCmd_unblockAndOpen"
                 flex="1"/>
         <toolbarseparator/>
         <button id="downloadsPanel-blockedSubview-deleteButton"
                 class="downloadsPanelFooterButton"
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -308,36 +308,20 @@
   border-top: 1px solid var(--panel-separator-color);
   padding-inline-end: 1em;
 }
 
 #identity-popup-more-info-footer {
   margin-top: 1em;
 }
 
-.identity-popup-footer {
-  background-color: var(--arrowpanel-dimmed);
-}
-
 .identity-popup-footer > button {
-  -moz-appearance: none;
   margin: 0;
   border-top: 1px solid var(--panel-separator-color);
   padding: 8px 20px;
-  /* !important overrides :hover and :active colors from button.css: */
-  color: inherit !important;
-}
-
-.identity-popup-footer > button:hover,
-.identity-popup-footer > button:focus {
-  background-color: var(--arrowpanel-dimmed);
-}
-
-.identity-popup-footer > button:hover:active {
-  background-color: var(--arrowpanel-dimmed-further);
 }
 
 #identity-popup-content-verifier ~ description {
   margin-top: 1em;
   color: var(--panel-disabled-color);
 }
 
 description#identity-popup-content-verified-by,
@@ -357,29 +341,16 @@ description#identity-popup-content-verif
 #identity-popup-breakageReportView-footer {
   display: flex;
 }
 
 #identity-popup-breakageReportView-footer > button {
   flex: 1;
 }
 
-#identity-popup-breakageReportView-footer > button[default] {
-  color: white;
-  background-color: #0996f8;
-}
-
-#identity-popup-breakageReportView-footer > button[default]:hover {
-  background-color: #0675d3;
-}
-
-#identity-popup-breakageReportView-footer > button[default]:hover:active {
-  background-color: #0568ba;
-}
-
 #identity-popup-breakageReportView-heading,
 #identity-popup-breakageReportView-body {
   padding: 16px;
   font-size: 110%;
 }
 
 .identity-popup-breakageReportView-collection-label {
   color: graytext;
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -26,65 +26,45 @@
 }
 
 #emptyDownloads {
   padding: 16px 16px;
   margin: 0;
 }
 
 .downloadsPanelFooter {
-  background-color: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
 }
 
 .downloadsPanelFooter toolbarseparator,
 @item@ > toolbarseparator {
   margin: 0;
   border: 0;
   min-width: 0;
   border-left: 1px solid var(--panel-separator-color);
   -moz-appearance: none;
 }
 
 .downloadsPanelFooterButton {
-  -moz-appearance: none;
-  background-color: transparent;
-  color: inherit;
   margin: 0;
   padding: 0;
   min-width: 0;
   min-height: 40px;
-  border: none;
 }
 
 .downloadsPanelFooterButton:hover {
   outline: 1px solid var(--arrowpanel-dimmed);
-  background-color: var(--arrowpanel-dimmed);
 }
 
 .downloadsPanelFooterButton:hover:active,
 .downloadsPanelFooterButton[open="true"] {
   outline: 1px solid var(--arrowpanel-dimmed-further);
-  background-color: var(--arrowpanel-dimmed-further);
   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
-.downloadsPanelFooterButton[default] {
-  background-color: #0996f8;
-  color: white;
-}
-
-.downloadsPanelFooterButton[default]:hover {
-  background-color: #0675d3;
-}
-
-.downloadsPanelFooterButton[default]:hover:active {
-  background-color: #0568ba;
-}
-
 .downloadsPanelFooterButton > .button-box {
   padding: 0;
 }
 
 #downloadsSummary {
   /* Reserve the same space as the button and separator in download items. */
   padding-inline-end: 59px;
 }
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -52,40 +52,16 @@ html|img#editBookmarkPanelFavicon[src] {
 }
 
 #editBookmarkPanelBottomButtons {
   display: flex;
 }
 
 .editBookmarkPanelBottomButton {
   flex: 1;
-  -moz-appearance: none;
   margin: 0;
   padding: .8em 0;
-  color: inherit;
-  background-color: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
 }
 
 .editBookmarkPanelBottomButton:not(:last-child) {
   border-inline-end: 1px solid var(--panel-separator-color);
 }
-
-.editBookmarkPanelBottomButton:hover {
-  background-color: var(--arrowpanel-dimmed-further);
-}
-
-.editBookmarkPanelBottomButton:hover:active {
-  background-color: var(--arrowpanel-dimmed-even-further);
-}
-
-.editBookmarkPanelBottomButton[default] {
-  color: white;
-  background-color: #0996f8;
-}
-
-.editBookmarkPanelBottomButton[default]:hover {
-  background-color: #0675d3;
-}
-
-.editBookmarkPanelBottomButton[default]:hover:active {
-  background-color: #0568ba;
-}
--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -49,40 +49,39 @@
           <xul:checkbox anonid="checkbox"
                         xbl:inherits="hidden=checkboxhidden,checked=checkboxchecked,label=checkboxlabel,oncommand=checkboxcommand" />
           <xul:description class="popup-notification-warning" xbl:inherits="hidden=warninghidden,xbl:text=warninglabel"/>
         </xul:vbox>
       </xul:hbox>
       <xul:hbox class="popup-notification-footer-container">
         <children includes="popupnotificationfooter"/>
       </xul:hbox>
-      <xul:hbox class="popup-notification-button-container">
+      <xul:hbox class="popup-notification-button-container panel-footer">
         <children includes="button"/>
         <xul:button anonid="secondarybutton"
-                    class="popup-notification-button"
+                    class="popup-notification-button popup-notification-secondary-button"
                     xbl:inherits="oncommand=secondarybuttoncommand,label=secondarybuttonlabel,accesskey=secondarybuttonaccesskey,hidden=secondarybuttonhidden"/>
         <xul:toolbarseparator xbl:inherits="hidden=dropmarkerhidden"/>
         <xul:button anonid="menubutton"
                     type="menu"
                     class="popup-notification-button popup-notification-dropmarker"
                     aria-label="&moreActionsButton.accessibleLabel;"
                     xbl:inherits="onpopupshown=dropmarkerpopupshown,hidden=dropmarkerhidden">
           <xul:menupopup anonid="menupopup"
                          position="after_end"
                          aria-label="&moreActionsButton.accessibleLabel;"
                          xbl:inherits="oncommand=menucommand">
             <children/>
           </xul:menupopup>
         </xul:button>
         <xul:button anonid="button"
-                    class="popup-notification-button"
-                    default="true"
+                    class="popup-notification-button popup-notification-primary-button"
                     label="&defaultButton.label;"
                     accesskey="&defaultButton.accesskey;"
-                    xbl:inherits="oncommand=buttoncommand,label=buttonlabel,accesskey=buttonaccesskey,highlight=buttonhighlight,disabled=mainactiondisabled"/>
+                    xbl:inherits="oncommand=buttoncommand,label=buttonlabel,accesskey=buttonaccesskey,default=buttonhighlight,disabled=mainactiondisabled"/>
       </xul:hbox>
     </content>
     <implementation>
       <field name="checkbox" readonly="true">
         document.getAnonymousElementByAttribute(this, "anonid", "checkbox");
       </field>
       <field name="closebutton" readonly="true">
         document.getAnonymousElementByAttribute(this, "anonid", "closebutton");
--- a/toolkit/modules/PopupNotifications.jsm
+++ b/toolkit/modules/PopupNotifications.jsm
@@ -833,25 +833,25 @@ PopupNotifications.prototype = {
       if (Services.prefs.getBoolPref("privacy.permissionPrompts.showCloseButton")) {
         popupnotification.setAttribute("closebuttoncommand", "PopupNotifications._onButtonEvent(event, 'secondarybuttoncommand', 'esc-press');");
       } else {
         popupnotification.setAttribute("closebuttoncommand", `PopupNotifications._dismiss(event, ${TELEMETRY_STAT_DISMISSAL_CLOSE_BUTTON});`);
       }
       if (n.mainAction) {
         popupnotification.setAttribute("buttonlabel", n.mainAction.label);
         popupnotification.setAttribute("buttonaccesskey", n.mainAction.accessKey);
-        popupnotification.setAttribute("buttonhighlight", !n.mainAction.disableHighlight);
+        popupnotification.toggleAttribute("buttonhighlight", !n.mainAction.disableHighlight);
         popupnotification.setAttribute("buttoncommand", "PopupNotifications._onButtonEvent(event, 'buttoncommand');");
         popupnotification.setAttribute("dropmarkerpopupshown", "PopupNotifications._onButtonEvent(event, 'dropmarkerpopupshown');");
         popupnotification.setAttribute("learnmoreclick", "PopupNotifications._onButtonEvent(event, 'learnmoreclick');");
         popupnotification.setAttribute("menucommand", "PopupNotifications._onMenuCommand(event);");
       } else {
         // Enable the default button to let the user close the popup if the close button is hidden
         popupnotification.setAttribute("buttoncommand", "PopupNotifications._onButtonEvent(event, 'buttoncommand');");
-        popupnotification.setAttribute("buttonhighlight", "true");
+        popupnotification.toggleAttribute("buttonhighlight", true);
         popupnotification.removeAttribute("buttonlabel");
         popupnotification.removeAttribute("buttonaccesskey");
         popupnotification.removeAttribute("dropmarkerpopupshown");
         popupnotification.removeAttribute("learnmoreclick");
         popupnotification.removeAttribute("menucommand");
       }
 
       if (n.options.popupIconClass) {
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -7,16 +7,18 @@
   ======================================================================= */
 
 /* all localizable skin settings shall live here */
 @import url("chrome://global/locale/intl.css");
 @import url("chrome://global/content/widgets.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/global.inc.css
+
 /* ::::: XBL bindings ::::: */
 
 menulist > menupopup {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
 }
 
 @media (-moz-menubar-drag) {
   toolbar[type="menubar"] {
@@ -275,11 +277,8 @@ popupnotificationcontent {
 .autoscroller[scrolldir="NS"] {
   background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
 }
 
 .autoscroller[scrolldir="EW"] {
   background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
 }
 
-/* :::::: Close button icons ::::: */
-
-%include ../../shared/close-icon.inc.css
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -3,15 +3,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 %include ../../shared/notification.inc.css
 %include ../../shared/popupnotification.inc.css
 
 .popup-notification-button:-moz-focusring {
-  outline: 1px -moz-dialogtext dotted;
+  outline: 1px dotted;
   outline-offset: -5px;
 }
 
-.popup-notification-button[anonid="secondarybutton"]:not([hidden="true"])  ~ .popup-notification-button[default]:not([highlight="true"]) {
+.popup-notification-secondary-button:not([hidden="true"]) ~ .popup-notification-primary-button:not([default]) {
   border-inline-start: 1px solid var(--panel-separator-color);
 }
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -4,16 +4,18 @@
 
 /* all localizable skin settings shall live here */
 @import url("chrome://global/locale/intl.css");
 @import url("chrome://global/content/widgets.css");
 
 %include shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/global.inc.css
+
 /* ::::: XBL bindings ::::: */
 
 menulist > menupopup {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
 }
 
 /* ::::: Variables ::::: */
 :root {
@@ -307,11 +309,8 @@ popupnotificationcontent {
   -moz-appearance: button-arrow-down;
 }
 
 .popup-internal-box > .scrollbutton-up[disabled="true"],
 .popup-internal-box > .scrollbutton-down[disabled="true"] {
   visibility: collapse;
 }
 
-/* :::::: Close button icons ::::: */
-
-%include ../../shared/close-icon.inc.css
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -12,11 +12,11 @@
   outline: 2px -moz-mac-focusring solid;
   outline-offset: -2px;
 }
 
 .popup-notification-warning {
   color: #aa1b08;
 }
 
-.popup-notification-button[anonid="secondarybutton"]:not([hidden="true"])  ~ .popup-notification-button[default]:not([highlight="true"]) {
+.popup-notification-secondary-button:not([hidden="true"]) ~ .popup-notification-primary-button:not([default]) {
   border-inline-start: 1px solid var(--panel-separator-color);
 }
rename from toolkit/themes/shared/close-icon.inc.css
rename to toolkit/themes/shared/global.inc.css
--- a/toolkit/themes/shared/close-icon.inc.css
+++ b/toolkit/themes/shared/global.inc.css
@@ -1,12 +1,14 @@
 /* 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/. */
 
+/* Close icon */
+
 .close-icon {
   -moz-appearance: none;
   -moz-context-properties: fill, fill-opacity;
   list-style-image: url(chrome://global/skin/icons/close.svg);
   color: inherit !important;
   fill: currentColor;
   fill-opacity: 0;
 }
@@ -20,8 +22,46 @@
 }
 
 .close-icon > .button-icon,
 .close-icon > .button-box > .button-icon,
 .close-icon > .toolbarbutton-icon {
   width: 20px;
   height: 20px;
 }
+
+/* Panel footers */
+
+.panel-footer {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+.panel-footer > button {
+  -moz-appearance: none;
+  /* !important overrides :hover and :active colors from button.css: */
+  color: inherit !important;
+}
+
+.panel-footer > button[disabled] {
+  color: var(--panel-disabled-color) !important;
+}
+
+.panel-footer > button:not([disabled]):hover {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+.panel-footer > button:not([disabled]):hover:active {
+  background-color: var(--arrowpanel-dimmed-further);
+}
+
+.panel-footer > button:not([disabled])[default] {
+  color: white !important;
+  background-color: #0996f8;
+}
+
+.panel-footer > button:not([disabled])[default]:hover {
+  background-color: #0675d3;
+}
+
+.panel-footer > button:not([disabled])[default]:hover:active {
+  background-color: #0568ba;
+}
+
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -36,17 +36,16 @@
   margin-bottom: .3em !important;
 }
 
 .popup-notification-learnmore-link {
   margin-top: .5em !important;
 }
 
 .popup-notification-button-container {
-  background-color: var(--arrowpanel-dimmed);
   display: flex;
 }
 
 .popup-notification-button-container > toolbarseparator {
   -moz-appearance: none;
   border: 0;
   border-left: 1px solid var(--panel-separator-color);
   margin: 7px 0 7px;
@@ -54,58 +53,31 @@
 }
 
 .popup-notification-button-container:hover > toolbarseparator {
   margin: 0;
 }
 
 .popup-notification-button {
   flex: 1;
-  -moz-appearance: none;
-  color: inherit;
   margin: 0;
   min-width: 0;
   min-height: 41px;
   border-top: 1px solid var(--panel-separator-color);
 }
 
-.popup-notification-button:hover:not([disabled]) {
-  background-color: var(--arrowpanel-dimmed);
-  color: inherit; /* override button.css on Linux */
-}
-
 .popup-notification-button:hover:active:not([disabled]) {
-  background-color: var(--arrowpanel-dimmed-further);
-  color: inherit; /* override button.css on Mac */
   box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
-.popup-notification-button[disabled] {
-  background-color: var(--arrowpanel-dimmed-further);
-  color: var(--panel-disabled-color);
-}
-
-.popup-notification-button[default]:not([alone]) {
+.popup-notification-primary-button:not([alone]) {
   flex: 0 50%;
 }
 
-.popup-notification-button[default][highlight="true"]:not([disabled]) {
-  background-color: #0996f8;
-  color: white;
-}
-
-.popup-notification-button[default][highlight="true"]:hover:not([disabled]) {
-  background-color: #0675d3;
-}
-
-.popup-notification-button[default][highlight="true"]:hover:active:not([disabled]) {
-  background-color: #0568ba;
-}
-
-.popup-notification-button[anonid="secondarybutton"][hidden="true"] ~ .popup-notification-button[default] {
+.popup-notification-secondary-button[hidden="true"] ~ .popup-notification-primary-button {
   flex: 1;
 }
 
 .popup-notification-button > .button-box {
   padding: 0;
 }
 
 .popup-notification-dropmarker {
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -7,16 +7,18 @@
   ======================================================================= */
 
 /* all localizable skin settings shall live here */
 @import url("chrome://global/locale/intl.css");
 @import url("chrome://global/content/widgets.css");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/global.inc.css
+
 /* ::::: XBL bindings ::::: */
 
 menulist > menupopup {
   -moz-binding: url("chrome://global/content/bindings/popup.xml#popup-scrollbars");
 }
 
 /* ::::: Variables ::::: */
 :root {
@@ -280,11 +282,8 @@ popupnotificationcontent {
 .autoscroller[scrolldir="NS"] {
   background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
 }
 
 .autoscroller[scrolldir="EW"] {
   background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
 }
 
-/* :::::: Close button icons ::::: */
-
-%include ../../shared/close-icon.inc.css
--- a/toolkit/themes/windows/global/notification.css
+++ b/toolkit/themes/windows/global/notification.css
@@ -14,17 +14,17 @@
 }
 
 @media (-moz-windows-default-theme) {
   .popup-notification-warning {
     color: #aa1b08;
   }
 }
 
-/* Swap the default and secondary action, because Windows
- * platform conventions put the default action on the left. */
-.popup-notification-button[default] {
+/* Swap the primary and secondary action, because Windows
+ * platform conventions put the primary action on the left. */
+.popup-notification-primary-button {
   order: -1;
 }
 
-.popup-notification-button[anonid="secondarybutton"]:not([hidden="true"])  ~ .popup-notification-button[default]:not([highlight="true"]) {
+.popup-notification-secondary-button:not([hidden="true"]) ~ .popup-notification-primary-button:not([default]) {
   border-inline-end: 1px solid var(--panel-separator-color);
 }