Bug 1735643 - Unify Urlbar box HCM behaviour. r=desktop-theme-reviewe…

…rs,dao

This patch unifies the HCM colors used in the identity box, the search mode indicator, and the zoom indicator. It uses --button-bgcolor as the default background for all these elements. It uses SelectedItem/SelectedItemText on hover and active. This is similar to what we do with in-content buttons.

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

browser/themes/shared/browser.inc.css

@@ -55,6 +55,7 @@
   --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
   --urlbar-box-active-bgcolor: var(--button-active-bgcolor);
   --urlbar-box-text-color: inherit;
+  --urlbar-box-hover-text-color: var(--urlbar-box-text-color);
   --urlbar-min-height: 32px;
   --urlbar-icon-fill-opacity: 0.9;
   --urlbar-icon-padding: 6px; /* (32px - 2px border - 2px padding - 16px icon) / 2 */
@@ -74,6 +75,10 @@
     --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 86%, transparent);
     --urlbar-icon-fill-opacity: 1;
     --checkbox-checked-border-color: var(--checkbox-checked-bgcolor);
+
+    --urlbar-box-hover-bgcolor: SelectedItem;
+    --urlbar-box-active-bgcolor: SelectedItem;
+    --urlbar-box-hover-text-color: SelectedItemText;
   }
 }
 

browser/themes/shared/identity-block/identity-block.inc.css

@@ -74,9 +74,9 @@
   border-radius: var(--urlbar-icon-border-radius);
 }
 
-#urlbar[focused="true"] #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button,
-#urlbar[focused="true"] #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button,
-#urlbar[focused="true"] #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button,
+#urlbar[focused="true"] #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open=true]),
+#urlbar[focused="true"] #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open=true]),
+#urlbar[focused="true"] #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open=true]),
 #urlbar[focused="true"] #urlbar-label-box {
   background-color: var(--urlbar-box-focus-bgcolor);
 }
@@ -85,6 +85,7 @@
 #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:hover:not([open]),
 #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:not([open]) {
   background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
 }
 
 #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:hover:active,
@@ -94,6 +95,7 @@
 #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:hover:active,
 #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button[open=true] {
   background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
 }
 
 #urlbar[searchmode]:not([focused="true"]) > #urlbar-input-container > #urlbar-search-mode-indicator,

browser/themes/shared/urlbar-searchbar.inc.css

@@ -314,20 +314,15 @@
 }
 
 #urlbar-search-mode-indicator-close:hover {
-  background-color: hsla(0,0%,70%,.2);
+  background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
 }
 #urlbar-search-mode-indicator-close:hover:active {
-  background-color: hsla(0,0%,70%,.3);
+  background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
 }
 
-/* Use system colors for low/high contrast mode */
 @media (prefers-contrast) {
-  #urlbar-search-mode-indicator {
-    background-color: SelectedItem;
-    outline-color: SelectedItem;
-    color: SelectedItemText;
-  }
-
   #urlbar-search-mode-indicator-close {
     fill-opacity: 1.0;
   }
@@ -406,14 +401,16 @@
 .urlbar-page-action:not([disabled]):hover,
 #urlbar-go-button:hover,
 .search-go-button:hover {
-  background-color: hsla(0,0%,70%,.2);
+  background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
 }
 
 .urlbar-page-action:not([disabled])[open],
 .urlbar-page-action:not([disabled]):hover:active,
 #urlbar-go-button:hover:active,
 .search-go-button:hover:active {
-  background-color: hsla(0,0%,70%,.3);
+  background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
 }
 
 .urlbar-page-action:-moz-focusring {
@@ -594,16 +591,18 @@
   overflow: hidden;
 }
 
-#urlbar[focused="true"] #urlbar-zoom-button {
+#urlbar[focused="true"] #urlbar-zoom-button:not(:hover) {
   background-color: var(--urlbar-box-focus-bgcolor);
 }
 
 #urlbar-zoom-button:hover {
   background-color: var(--urlbar-box-hover-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
 }
 
 #urlbar-zoom-button:hover:active {
   background-color: var(--urlbar-box-active-bgcolor);
+  color: var(--urlbar-box-hover-text-color);
 }
 
 @keyframes urlbar-zoom-reset-pulse {