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 @@
+ class="urlbar-page-action">
@@ -345,7 +345,7 @@
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;
}