Bug 1515902 - Introduce panel-footer class to fix common color problem with footer buttons. r=ntim

Differential Revision: https://phabricator.services.mozilla.com/D15188

--HG--
rename : toolkit/themes/shared/close-icon.inc.css => toolkit/themes/shared/global.inc.css
extra : moz-landing-system : lando

browser/base/content/browser.xul

@@ -338,6 +338,7 @@ xmlns="http://www.w3.org/1999/xhtml"
                   oncommand="StarUI.onShowForNewBookmarksCheckboxCommand();"/>
       </vbox>
       <hbox id="editBookmarkPanelBottomButtons"
+            class="panel-footer"
             style="min-width: &editBookmark.panel.width;;">
 #ifndef XP_UNIX
         <button id="editBookmarkPanelDoneButton"

browser/base/content/test/popupNotifications/browser_popupNotification.js

@@ -218,7 +218,7 @@ var tests = [
     },
     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) {
@@ -239,7 +239,7 @@ var tests = [
     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) {

browser/base/content/test/popupNotifications/head.js

@@ -205,8 +205,8 @@ function checkPopup(popup, notifyObj) {
        "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) {

browser/components/controlcenter/content/panel.inc.xul

@@ -136,7 +136,7 @@
       <!-- 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');"/>
@@ -225,7 +225,7 @@
                 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;"
@@ -245,7 +245,7 @@
           <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;"
@@ -260,7 +260,7 @@
                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;"
@@ -287,7 +287,8 @@
             <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();"/>

browser/components/downloads/content/downloadsPanel.inc.xul

@@ -135,7 +135,8 @@
                            crop="end"/>
             </vbox>
           </hbox>
-          <hbox id="downloadsFooterButtons">
+          <hbox id="downloadsFooterButtons"
+                class="panel-footer">
             <button id="downloadsHistory"
                     class="downloadsPanelFooterButton"
                     label="&downloadsHistory.label;"
@@ -158,7 +159,7 @@
         <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"

browser/themes/shared/controlcenter/panel.inc.css

@@ -313,26 +313,10 @@
   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 {
@@ -362,19 +346,6 @@ description#identity-popup-content-verifier,
   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;

browser/themes/shared/downloads/downloads.inc.css

@@ -31,7 +31,6 @@
 }
 
 .downloadsPanelFooter {
-  background-color: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
 }
 
@@ -45,41 +44,22 @@
 }
 
 .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;
 }

browser/themes/shared/places/editBookmarkPanel.inc.css

@@ -57,35 +57,11 @@ html|img#editBookmarkPanelFavicon[src] {
 
 .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;
-}

toolkit/content/widgets/notification.xml

@@ -54,10 +54,10 @@
       <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"
@@ -73,11 +73,10 @@
           </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>

toolkit/modules/PopupNotifications.jsm

@@ -838,7 +838,7 @@ PopupNotifications.prototype = {
       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');");
@@ -846,7 +846,7 @@ PopupNotifications.prototype = {
       } 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");

toolkit/themes/linux/global/global.css

@@ -12,6 +12,8 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/global.inc.css
+
 /* ::::: XBL bindings ::::: */
 
 menulist > menupopup {
@@ -280,6 +282,3 @@ popupnotificationcontent {
   background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
 }
 
-/* :::::: Close button icons ::::: */
-
-%include ../../shared/close-icon.inc.css

toolkit/themes/linux/global/notification.css

@@ -8,10 +8,10 @@
 %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);
 }

toolkit/themes/osx/global/global.css

@@ -9,6 +9,8 @@
 %include shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/global.inc.css
+
 /* ::::: XBL bindings ::::: */
 
 menulist > menupopup {
@@ -312,6 +314,3 @@ popupnotificationcontent {
   visibility: collapse;
 }
 
-/* :::::: Close button icons ::::: */
-
-%include ../../shared/close-icon.inc.css

toolkit/themes/osx/global/notification.css

@@ -17,6 +17,6 @@
   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);
 }

toolkit/themes/shared/close-icon.inc.css

@@ -1,27 +0,0 @@
-/* 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 {
-  -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;
-}
-
-.close-icon:hover {
-  fill-opacity: 0.1;
-}
-
-.close-icon:hover:active {
-  fill-opacity: 0.2;
-}
-
-.close-icon > .button-icon,
-.close-icon > .button-box > .button-icon,
-.close-icon > .toolbarbutton-icon {
-  width: 20px;
-  height: 20px;
-}

toolkit/themes/shared/global.inc.css

@@ -0,0 +1,67 @@
+/* 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;
+}
+
+.close-icon:hover {
+  fill-opacity: 0.1;
+}
+
+.close-icon:hover:active {
+  fill-opacity: 0.2;
+}
+
+.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;
+}
+

toolkit/themes/shared/popupnotification.inc.css

@@ -41,7 +41,6 @@
 }
 
 .popup-notification-button-container {
-  background-color: var(--arrowpanel-dimmed);
   display: flex;
 }
 
@@ -59,48 +58,21 @@
 
 .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;
 }
 

toolkit/themes/windows/global/global.css

@@ -12,6 +12,8 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+%include ../../shared/global.inc.css
+
 /* ::::: XBL bindings ::::: */
 
 menulist > menupopup {
@@ -285,6 +287,3 @@ popupnotificationcontent {
   background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
 }
 
-/* :::::: Close button icons ::::: */
-
-%include ../../shared/close-icon.inc.css

toolkit/themes/windows/global/notification.css

@@ -19,12 +19,12 @@
   }
 }
 
-/* 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);
 }