Bug 1691965 - Improve some existing high contrast mode CSS. r=Itiel
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 10 Feb 2021 22:16:44 +0000
changeset 566887 5cbcb80f72bd7606c8572aa89247235ddcbd7762
parent 566886 4a5e7a2e86e29fe311924f4653de23199b62070c
child 566888 01bd07adb674c2739bc560aacde633ed61d530c8
push id38191
push userbtara@mozilla.com
push dateThu, 11 Feb 2021 05:02:45 +0000
treeherdermozilla-central@5cbcb80f72bd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersItiel
bugs1691965
milestone87.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 1691965 - Improve some existing high contrast mode CSS. r=Itiel Differential Revision: https://phabricator.services.mozilla.com/D104738
browser/components/aboutlogins/content/components/login-item.css
browser/components/aboutlogins/content/components/login-list.css
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -460,22 +460,16 @@ input[name="password"] {
 .error-message-link > a,
 .error-message-link > a:hover,
 .error-message-link > a:hover:active {
   color: currentColor;
   text-decoration: underline;
   font-weight: 600;
 }
 
-@media (prefers-contrast) {
-  .alert-icon {
-    fill: currentColor;
-  }
-}
-
 @media (prefers-color-scheme: dark) {
   :host {
     --reveal-checkbox-opacity: .8;
     --reveal-checkbox-opacity-hover: 1;
     --reveal-checkbox-opacity-active: .6;
     --success-color: #86DE74;
     --edit-delete-button-color: #cfcfd1;
   }
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -185,12 +185,14 @@ ol {
   min-width: 16px;
   width: 16px;
   margin-inline-start: 12px;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.75;
 }
 
-.breached > .alert-icon {
-  fill: var(--red-60);
-  fill-opacity: 1;
+@media not (prefers-contrast) {
+  .breached > .alert-icon {
+    fill: var(--red-60);
+    fill-opacity: 1;
+  }
 }
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -295,16 +295,25 @@
 
 /* Invert the colors in the search mode indicator in dark mode. */
 :root[lwt-toolbar-field-brighttext] #urlbar-search-mode-indicator {
   background-color: #0060df;
   outline-color: #d6ebff;
   color: #d6ebff;
 }
 
+/* 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-title {
   padding-inline: 5px;
 }
 
 #urlbar-search-mode-indicator-close {
   display: none;
   background: url(chrome://global/skin/icons/close.svg) no-repeat center;
   background-size: 100% 16px;
@@ -322,33 +331,26 @@
 
 #urlbar-search-mode-indicator-close:-moz-lwtheme {
   /* fill and background-color should match the urlbar focused color and
      background. */
   fill: var(--lwt-toolbar-field-focus-color);
   background-color: var(--lwt-toolbar-field-focus);
 }
 
-#urlbar-search-mode-indicator:hover > #urlbar-search-mode-indicator-close {
-  display: block;
-}
-
-/* Low/high-contrast themes */
 @media (prefers-contrast) {
-  #urlbar-search-mode-indicator {
-    background-color: Highlight;
-    outline-color: Highlight;
-    color: HighlightText;
-  }
-
   #urlbar-search-mode-indicator-close {
     stroke-opacity: 1.0;
   }
 }
 
+#urlbar-search-mode-indicator:hover > #urlbar-search-mode-indicator-close {
+  display: block;
+}
+
 @supports -moz-bool-pref("browser.urlbar.experimental.searchModeIndicatorHover") {
   #urlbar-search-mode-indicator-close:hover {
     background-color: #ededf0; /* Grey 20 */
   }
   #urlbar-search-mode-indicator-close:hover:active {
     background-color: #d7d7db; /* Grey 30 */
   }