From 88c819ec03eeb23b31aa2a812e3e1eb407a8897a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A3o=20Gottwald?= <dao@mozilla.com>
Date: Fri, 30 Apr 2021 15:39:20 +0000
Subject: [PATCH] Bug 1708690 - Use :where in button.css to allow easier color
 overrides. r=Itiel

Differential Revision: https://phabricator.services.mozilla.com/D113965
---
 browser/themes/shared/controlcenter/panel.inc.css        | 5 ++---
 browser/themes/shared/ctrlTab.inc.css                    | 3 +--
 .../themes/shared/customizableui/customizeMode.inc.css   | 3 +--
 browser/themes/shared/customizableui/panelUI.inc.css     | 6 ++----
 browser/themes/shared/downloads/downloads.inc.css        | 2 +-
 browser/themes/shared/places/editBookmarkPanel.inc.css   | 2 +-
 browser/themes/shared/searchbar.inc.css                  | 2 +-
 toolkit/themes/linux/global/button.css                   | 6 +++---
 toolkit/themes/osx/global/button.css                     | 8 ++++----
 toolkit/themes/shared/global.inc.css                     | 3 +--
 toolkit/themes/shared/in-content/common.inc.css          | 3 +--
 toolkit/themes/shared/notification.css                   | 3 +--
 toolkit/themes/shared/popupnotification.inc.css          | 9 ++-------
 toolkit/themes/windows/global/button.css                 | 4 ++--
 14 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/browser/themes/shared/controlcenter/panel.inc.css b/browser/themes/shared/controlcenter/panel.inc.css
index 058454b0a05b..2cb8f8180f6e 100644
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -236,7 +236,7 @@
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: .6;
-  color: inherit !important; /* !important overrides :hover and :active:hover colors from button.css on Mac and Linux */
+  color: inherit;
 }
 
 .identity-popup-expander:-moz-locale-dir(ltr) {
@@ -957,8 +957,7 @@ description#identity-popup-content-verifier,
   min-width: 0;
   padding: 2px;
   background-color: var(--button-bgcolor);
-  /* !important overrides :hover and :active colors from button.css */
-  color: inherit !important;
+  color: var(--button-color);
   opacity: 0.6;
   border-radius: 4px;
 }
diff --git a/browser/themes/shared/ctrlTab.inc.css b/browser/themes/shared/ctrlTab.inc.css
index ecb45d38de3d..9b92590c7992 100644
--- a/browser/themes/shared/ctrlTab.inc.css
+++ b/browser/themes/shared/ctrlTab.inc.css
@@ -23,8 +23,7 @@
 .ctrlTab-preview,
 #ctrlTab-showAll {
   appearance: none;
-  /* !important overrides the :hover color from button.css on Linux */
-  color: inherit !important;
+  color: inherit;
   /* remove the :-moz-focusring outline from button.css on Windows */
   outline: none !important;
   margin: 0;
diff --git a/browser/themes/shared/customizableui/customizeMode.inc.css b/browser/themes/shared/customizableui/customizeMode.inc.css
index 3f87a4ff8f13..0ec7fa946302 100644
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -74,8 +74,7 @@
 
 .customizationmode-checkbox:not(:-moz-lwtheme, [disabled]),
 .customizationmode-button {
-  /* !important overrides :hover:active color from button.css on Mac */
-  color: rgb(71, 71, 71) !important;
+  color: rgb(71, 71, 71);
 }
 
 .customizationmode-checkbox[disabled]:-moz-lwtheme {
diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css
index 5ec2d71a4828..820f87588e57 100644
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -2852,16 +2852,14 @@ panelview:not([mainview]) #PanelUI-whatsNew-title {
 
 .PanelUI-profiler-button-primary {
   background-color: #0060DF;
-  /* The !important designation here is to overcome the specificity of the button.css
-     styles that are being applied on linux for hovers. */
-  color: #fff !important;
+  color: #fff;
 }
 
 .PanelUI-profiler-button-primary:hover {
   background-color: #003eaa;
 }
 
-.PanelUI-profiler-button-primary:active {
+.PanelUI-profiler-button-primary:active:hover {
   background-color: #002275;
 }
 
diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css
index abdde8845703..a30eb6f8d54e 100644
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -328,7 +328,7 @@ button.downloadButton {
   border: none;
   background: transparent;
   padding: 0;
-  color: inherit !important /* !important overrides button.css on Mac and Linux */;
+  color: inherit;
 }
 
 .downloadButton > .button-box > .button-icon {
diff --git a/browser/themes/shared/places/editBookmarkPanel.inc.css b/browser/themes/shared/places/editBookmarkPanel.inc.css
index e3b5945e4d46..8d0c363ce149 100644
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -222,7 +222,7 @@ html|img#editBookmarkPanelFavicon[src] {
   margin-inline-start: 4px;
   min-width: 32px;
   min-height: 32px;
-  color: var(--button-color, ButtonText);
+  color: var(--button-color);
   background-color: var(--button-bgcolor);
 }
 
diff --git a/browser/themes/shared/searchbar.inc.css b/browser/themes/shared/searchbar.inc.css
index 245d32ec483d..0a5e176674c7 100644
--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -111,7 +111,7 @@
 
 .searchbar-engine-one-off-item[selected] {
   background-color: var(--autocomplete-popup-highlight-background);
-  color: var(--autocomplete-popup-highlight-color) !important; /* Override button.css on Linux */
+  color: var(--autocomplete-popup-highlight-color);
 }
 
 .searchbar-engine-one-off-item > .button-box {
diff --git a/toolkit/themes/linux/global/button.css b/toolkit/themes/linux/global/button.css
index 3e1df18ae1f8..0a104b1d7524 100644
--- a/toolkit/themes/linux/global/button.css
+++ b/toolkit/themes/linux/global/button.css
@@ -30,19 +30,19 @@ button {
 
 /* .......... hover state .......... */
 
-button:hover:not(:active,[disabled="true"],[open="true"],[checked="true"],[default="true"]) {
+button:where(:hover:not([checked="true"], [default="true"])) {
   color: -moz-buttonhovertext;
 }
 
 /* .......... active state .......... */
 
-button:is(:hover:active, [open="true"]):not([default="true"], [disabled="true"]) {
+button:where(:hover:active, [open="true"]):where(:not([default="true"])) {
   color: -moz-gtk-buttonactivetext;
 }
 
 /* .......... disabled state .......... */
 
-button[disabled="true"] {
+button:where([disabled="true"]) {
   color: GrayText;
 }
 
diff --git a/toolkit/themes/osx/global/button.css b/toolkit/themes/osx/global/button.css
index 4b0c2315765a..0e3d5477a059 100644
--- a/toolkit/themes/osx/global/button.css
+++ b/toolkit/themes/osx/global/button.css
@@ -13,19 +13,19 @@ button {
   text-shadow: none;
 }
 
-button:not([disabled="true"]):hover:active {
+button:where(:hover:active) {
   color: -moz-mac-buttonactivetext;
 }
 
 /* When the window isn't focused, the default button background isn't drawn,
  * so don't change the text color then: */
-button[default="true"]:not([disabled="true"], :-moz-window-inactive) {
+button:where([default="true"]:not(:-moz-window-inactive)) {
   color: -moz-mac-defaultbuttontext;
 }
 
 /* Likewise, when active (mousedown) but not hovering, the default button
  * background isn't drawn, override the previous selector for that case: */
-button[default="true"]:not(:hover):active {
+button:where([default="true"]:active:not(:hover)) {
   color: ButtonText;
 }
 
@@ -41,7 +41,7 @@ button[type="default"] {
 
 /* .......... disabled state .......... */
 
-button[disabled="true"] {
+button:where([disabled="true"]) {
   color: GrayText;
 }
 
diff --git a/toolkit/themes/shared/global.inc.css b/toolkit/themes/shared/global.inc.css
index b94176cd9e5f..3421a0d51231 100644
--- a/toolkit/themes/shared/global.inc.css
+++ b/toolkit/themes/shared/global.inc.css
@@ -169,8 +169,7 @@ xul|label[disabled="true"] {
 .panel-footer > xul|button {
   appearance: none;
   border-top: 1px solid var(--panel-separator-color);
-  /* !important overrides :hover and :active colors from button.css: */
-  color: inherit !important;
+  color: inherit;
   min-width: 0;
   margin: 0;
   padding: .9em 2px;
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index 065a9b1eaa74..f168dabe2b30 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -383,8 +383,7 @@ html|input[type="color"],
 xul|menulist {
   appearance: none;
   min-height: 32px;
-  /* !important overrides button.css for disabled and default XUL buttons: */
-  color: inherit !important;
+  color: inherit;
   border: 1px solid transparent; /* shows up in high-contrast mode */
   border-radius: var(--in-content-button-border-radius);
   background-color: var(--in-content-button-background);
diff --git a/toolkit/themes/shared/notification.css b/toolkit/themes/shared/notification.css
index c025f9a87911..e85f57b5c821 100644
--- a/toolkit/themes/shared/notification.css
+++ b/toolkit/themes/shared/notification.css
@@ -147,8 +147,7 @@ notification[type="critical"] > hbox > .messageImage {
   border: 1px solid transparent;
   border-radius: 4px;
   background-color: var(--notification-button-background);
-  /* Override button.css hover & active styles */
-  color: var(--notification-button-text) !important;
+  color: var(--notification-button-text);
   padding: 0 6px;
   margin: 4px 8px;
   height: 24px;
diff --git a/toolkit/themes/shared/popupnotification.inc.css b/toolkit/themes/shared/popupnotification.inc.css
index b84f1ce29993..2257156f5bc3 100644
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -174,7 +174,7 @@ popupnotification {
 }
 
 .panel-footer > button {
-  color: var(--button-color);
+  color: var(--button-color, inherit);
 }
 
 .panel-footer:not(.panel-footer-menulike) > button {
@@ -195,16 +195,11 @@ popupnotification {
 }
 
 .panel-footer > button:not([disabled]):hover:active {
-  /**
-   * We override the colour here because on macOS, buttons default to
-   * having :hover:active buttons have color -moz-mac-buttonactivetext
-   */
-  color: var(--button-color);
   background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
 }
 
 .panel-footer > button:not([disabled])[default] {
-  color: var(--buttons-primary-button-color, -moz-accent-color-foreground) !important;
+  color: var(--buttons-primary-button-color, -moz-accent-color-foreground);
   background-color: var(--buttons-primary-button-bgcolor, -moz-accent-color);
 }
 
diff --git a/toolkit/themes/windows/global/button.css b/toolkit/themes/windows/global/button.css
index 4a0f6057d8fe..778d856c8c05 100644
--- a/toolkit/themes/windows/global/button.css
+++ b/toolkit/themes/windows/global/button.css
@@ -52,12 +52,12 @@ button:-moz-focusring {
 
 /* .......... disabled state .......... */
 
-button[disabled="true"] {
+button:where([disabled="true"]) {
   color: GrayText;
 }
 
 @media (-moz-windows-classic) {
-  button[disabled="true"] {
+  button:where([disabled="true"]) {
     color: ThreeDShadow;
     text-shadow: 1px 1px ThreeDHighlight;
   }