From 17d105d1c2c685685e826864bd0d8c11f8f9be57 Mon Sep 17 00:00:00 2001
From: Sam Foster <sfoster@mozilla.com>
Date: Tue, 8 Feb 2022 22:35:10 +0000
Subject: [PATCH] Bug 1747423 - Remove the @buttonState* preprocessor vars from
 zoom controls in  panelUI.inc.css. r=dao

Differential Revision: https://phabricator.services.mozilla.com/D137348
---
 browser/themes/addons/dark/manifest.json      |  1 -
 .../shared/customizableui/panelUI.inc.css     | 23 ++++++++++---------
 .../extensions/default-theme/manifest.json    |  2 --
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json
index e14118aa10ac..1972130058fb 100644
--- a/browser/themes/addons/dark/manifest.json
+++ b/browser/themes/addons/dark/manifest.json
@@ -52,7 +52,6 @@
       "input_color": "rgb(251,251,254)",
       "input_border": "#8f8f9d",
       "input_border_error": "rgb(255, 132, 138)",
-      "zoom_controls": "rgb(74,74,85)",
       "autocomplete_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_info_icon_color": "#80EBFF",
diff --git a/browser/themes/shared/customizableui/panelUI.inc.css b/browser/themes/shared/customizableui/panelUI.inc.css
index b0232e239d52..10b9c38ae41b 100644
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1021,7 +1021,8 @@ panelview .toolbarbutton-1,
   padding: 4px;
 }
 
-#appMenu-zoom-controls2 > .subviewbutton:is(@buttonStateHover@, @buttonStateActive@) {
+/* hover and active color changes are applied to child elements not the button itself */
+#appMenu-zoom-controls2 > .subviewbutton:not([disabled]):is(:hover, :hover:active) {
   color: unset;
   background-color: unset;
 }
@@ -1040,7 +1041,7 @@ panelview .toolbarbutton-1,
   -moz-context-properties: fill, stroke;
   fill: var(--button-color);
   /* the stroke color is used to fill the circle in the icon */
-  stroke: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace));
+  stroke: var(--button-bgcolor);
   border-radius: 50%;
   padding: 0;
 }
@@ -1052,24 +1053,24 @@ panelview .toolbarbutton-1,
 
 #appMenu-fullscreen-button2 > .toolbarbutton-icon {
   padding: 1px;
-  background-color: var(--zoom-controls-bgcolor, var(--button-bgcolor, ButtonFace));
+  background-color: var(--button-bgcolor);
 }
 
-#appMenu-zoomReset-button2@buttonStateHover@ > .toolbarbutton-text,
-#appMenu-fullscreen-button2@buttonStateHover@ > .toolbarbutton-icon {
+#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text,
+#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon {
   background-color: var(--panel-item-hover-bgcolor);
 }
-#appMenu-zoomReduce-button2@buttonStateHover@ > .toolbarbutton-icon,
-#appMenu-zoomEnlarge-button2@buttonStateHover@ > .toolbarbutton-icon {
+#appMenu-zoomReduce-button2:not([disabled]):hover > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled]):hover > .toolbarbutton-icon {
   stroke: var(--panel-item-hover-bgcolor);
 }
 
-#appMenu-zoomReset-button2@buttonStateActive@ > .toolbarbutton-text,
-#appMenu-fullscreen-button2@buttonStateActive@ > .toolbarbutton-icon {
+#appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text,
+#appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon {
   background-color: var(--panel-item-active-bgcolor);
 }
-#appMenu-zoomReduce-button2@buttonStateActive@ > .toolbarbutton-icon,
-#appMenu-zoomEnlarge-button2@buttonStateActive@ > .toolbarbutton-icon {
+#appMenu-zoomReduce-button2:not([disabled]):active:hover > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled]):active:hover > .toolbarbutton-icon {
   stroke: var(--panel-item-active-bgcolor);
 }
 
diff --git a/toolkit/mozapps/extensions/default-theme/manifest.json b/toolkit/mozapps/extensions/default-theme/manifest.json
index a095bbea50f5..1e16593b3950 100644
--- a/toolkit/mozapps/extensions/default-theme/manifest.json
+++ b/toolkit/mozapps/extensions/default-theme/manifest.json
@@ -54,7 +54,6 @@
       "input_color": "rgb(251,251,254)",
       "input_border": "#8f8f9d",
       "input_border_error": "rgb(255, 132, 138)",
-      "zoom_controls": "rgb(74,74,85)",
       "autocomplete_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_info_icon_color": "#80EBFF",
@@ -84,7 +83,6 @@
       "input_color": "--input-color",
       "input_border": "--input-border-color",
       "input_border_error": "--input-error-border-color",
-      "zoom_controls": "--zoom-controls-bgcolor",
       "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",