Bug 1724878 - Apply fill:currentColor to #urlbar-search-mode-indicator-close. r=dao
authorHarry Twyford <htwyford@mozilla.com>
Fri, 13 Aug 2021 14:05:11 +0000
changeset 588836 97a6a6951ad60cc62392f585775f5fe898cecc7b
parent 588835 c925daa31146272ae0e6702b72597520eb34f129
child 588837 7e0dab3c9d5cbcf10e7e41571887cf2bb5240159
push id38704
push usernerli@mozilla.com
push dateFri, 13 Aug 2021 21:52:47 +0000
treeherdermozilla-central@df4b218d495a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1724878, 649451
milestone93.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1724878 - Apply fill:currentColor to #urlbar-search-mode-indicator-close. r=dao This fixes the bug but retains the fix for the unfiled bug I mentioned in [this](https://phabricator.services.mozilla.com/D117029#inline-649451) Phabricator comment. Basically we want fill:var(--toolbar-field-color) when the Urlbar is unfocused and fill:var(--toolbar-field-focus-color) when it's focused. Differential Revision: https://phabricator.services.mozilla.com/D122480
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -292,53 +292,53 @@
 #urlbar[searchmode] > #urlbar-input-container > #urlbar-search-mode-indicator {
   display: inline-flex;
 }
 
 #urlbar[searchmode] > #urlbar-input-container > #urlbar-label-box {
   display: none;
 }
 
+#urlbar-search-mode-indicator-close {
+  background: url(chrome://global/skin/icons/close.svg) no-repeat center;
+  background-size: 10px 10px;
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0.6;
+  stroke-opacity: var(--identity-box-label-opacity);
+  fill: currentColor;
+  border-radius: var(--urlbar-icon-border-radius);
+}
+
+#urlbar-search-mode-indicator-close:hover {
+  background-color: hsla(0,0%,70%,.2);
+}
+#urlbar-search-mode-indicator-close:hover:active {
+  background-color: hsla(0,0%,70%,.3);
+}
+
 /* Use system colors for low/high contrast mode */
 @media (prefers-contrast) {
   #urlbar-search-mode-indicator {
     background-color: Highlight;
     outline-color: Highlight;
     color: HighlightText;
   }
 
   #urlbar-search-mode-indicator-close {
-    fill: HighlightText;
     fill-opacity: 1.0;
   }
 }
 
 #urlbar-search-mode-indicator-title {
   padding-inline: 0 3px;
   opacity: var(--identity-box-label-opacity);
 }
 
-#urlbar-search-mode-indicator-close {
-  background: url(chrome://global/skin/icons/close.svg) no-repeat center;
-  background-size: 10px 10px;
-  width: 16px;
-  height: 16px;
-  -moz-context-properties: fill, fill-opacity;
-  fill-opacity: 0.6;
-  stroke-opacity: var(--identity-box-label-opacity);
-  fill: inherit;
-  border-radius: var(--urlbar-icon-border-radius);
-}
-
-#urlbar-search-mode-indicator-close:hover {
-  background-color: hsla(0,0%,70%,.2);
-}
-#urlbar-search-mode-indicator-close:hover:active {
-  background-color: hsla(0,0%,70%,.3);
-}
 /* Page action panel */
 .pageAction-panel-button > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 #pageAction-panel-bookmark,
 #star-button {