From a639abe1b36c7064c5ded642f9f9a6bc1af6b37f Mon Sep 17 00:00:00 2001
From: Harry Twyford <htwyford@mozilla.com>
Date: Tue, 13 Jul 2021 15:03:19 +0000
Subject: [PATCH] Bug 1706479 - Simplify page action style rules.
 r=desktop-theme-reviewers,dao

Differential Revision: https://phabricator.services.mozilla.com/D114642
---
 browser/base/content/browser-pageActions.js   |  2 +-
 .../base/content/navigator-toolbox.inc.xhtml  |  8 ++---
 .../themes/shared/urlbar-searchbar.inc.css    | 31 +++++++++----------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/browser/base/content/browser-pageActions.js b/browser/base/content/browser-pageActions.js
index f0b15707bb83..f1be9b0c0987 100644
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@@ -533,7 +533,7 @@ var BrowserPageActions = {
 
   _makeUrlbarButtonNode(action) {
     let buttonNode = document.createXULElement("hbox");
-    buttonNode.classList.add("urlbar-icon-wrapper", "urlbar-page-action");
+    buttonNode.classList.add("urlbar-page-action");
     if (action.extensionID) {
       buttonNode.classList.add("urlbar-addon-page-action");
     }
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index 02636a6b46b5..acd2a89dbf15 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -336,7 +336,7 @@
                 </hbox>
                 <hbox id="cfr-button"
                       role="presentation"
-                      class="urlbar-page-action urlbar-icon-wrapper">
+                      class="urlbar-page-action">
                   <image class="urlbar-icon"/>
                 </hbox>
               </hbox>
@@ -345,7 +345,7 @@
                 <image id="userContext-indicator"/>
               </hbox>
               <hbox id="reader-mode-button"
-                    class="urlbar-page-action urlbar-icon-wrapper"
+                    class="urlbar-page-action"
                     role="button"
                     hidden="true"
                     tooltip="dynamic-shortcut-tooltip"
@@ -358,7 +358,7 @@
                      tooltip="dynamic-shortcut-tooltip"
                      hidden="true"/>
               <hbox id="pageActionButton"
-                    class="urlbar-page-action urlbar-icon-wrapper"
+                    class="urlbar-page-action"
                     role="button"
                     data-l10n-id="urlbar-page-action-button"
                     onmousedown="BrowserPageActions.mainButtonClicked(event);"
@@ -368,7 +368,7 @@
               <hbox id="star-button-box"
                     hidden="true"
                     role="button"
-                    class="urlbar-page-action urlbar-icon-wrapper"
+                    class="urlbar-page-action"
                     onclick="BrowserPageActions.doCommandForAction(PageActions.actionForID('bookmark'), event, this);">
                 <image id="star-button"
                        class="urlbar-icon"/>
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
index c29938eafa03..465ef0b9f948 100644
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -407,38 +407,35 @@
 }
 
 .urlbar-icon {
-  width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
-  height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
-  padding: var(--urlbar-icon-padding);
+  width: 16px;
+  height: 16px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: var(--urlbar-icon-fill-opacity);
+}
+
+.urlbar-page-action {
+  width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+  height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+  border-radius: var(--urlbar-icon-border-radius);
+  padding: var(--urlbar-icon-padding);
   color: inherit;
 }
 
-.urlbar-icon,
-.urlbar-icon-wrapper {
-  border-radius: var(--urlbar-icon-border-radius);
-}
-
-:root[uidensity=compact] .urlbar-icon {
+:root[uidensity=compact] .urlbar-page-action {
   margin-inline: 1px;
 }
 
-:not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled]):hover,
-.urlbar-icon-wrapper:not([disabled]):hover {
+.urlbar-page-action:not([disabled]):hover {
   background-color: hsla(0,0%,70%,.2);
 }
 
-:not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled])[open],
-:not(.urlbar-icon-wrapper) > .urlbar-icon:not([disabled]):hover:active,
-.urlbar-icon-wrapper:not([disabled])[open],
-.urlbar-icon-wrapper:not([disabled]):hover:active {
+.urlbar-page-action:not([disabled])[open],
+.urlbar-page-action:not([disabled]):hover:active {
   background-color: hsla(0,0%,70%,.3);
 }
 
-.urlbar-icon:-moz-focusring,
-.urlbar-icon-wrapper:-moz-focusring {
+.urlbar-page-action:-moz-focusring {
   outline: var(--toolbarbutton-focus-outline);
   outline-offset: -2px;
 }