Bug 1515902 - Introduce panel-footer class to fix common color problem with footer buttons. r=ntim, a=RyanVM
authorDão Gottwald <dao@mozilla.com>
Fri, 21 Dec 2018 15:44:44 +0000
changeset 506392 d67ea56c71a28696c059691f5779916d72f6bc97
parent 506391 d47021d7e1bc85218b5753acae4a2d9446981392
child 506393 3bd5407d62836b2435e6e241d751563129d150d9
push id10393
push userryanvm@gmail.com
push dateWed, 26 Dec 2018 21:58:42 +0000
treeherdermozilla-beta@d67ea56c71a2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim, RyanVM
bugs1515902
milestone65.0
Bug 1515902 - Introduce panel-footer class to fix common color problem with footer buttons. r=ntim, a=RyanVM 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
@@ -331,16 +331,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"] {
@@ -283,11 +285,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 {
@@ -315,11 +317,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 {
@@ -288,11 +290,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);
 }