Bug 1506913 - Don't apply theme colors on findbar when theme has a header image. r=dao
☠☠ backed out by a5db25e4f477 ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 10 Apr 2019 09:52:55 +0000
changeset 468753 6ce615da7b68745b5a703cf98d85b6d3d4072b74
parent 468752 1fe827432de458d397fcfc78280bed57291ffc6f
child 468754 0a7766ece186bc0092123d00d5d28c197fcdaaf4
push id35850
push userdvarga@mozilla.com
push dateWed, 10 Apr 2019 21:52:56 +0000
treeherdermozilla-central@9d3dbe3fef26 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1506913
milestone68.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 1506913 - Don't apply theme colors on findbar when theme has a header image. r=dao Differential Revision: https://phabricator.services.mozilla.com/D25538
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
toolkit/themes/shared/findBar.inc.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -383,21 +383,21 @@ notification[value="translation"] menuli
   -moz-appearance: none;
   width: 6px;
   background-color: -moz-dialog;
   border: 1px ThreeDShadow;
   border-style: none solid;
 }
 
 .browserContainer > findbar {
-  background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color);
+  background-color: var(--toolbar-non-lwt-bgcolor);
+  color: var(--toolbar-non-lwt-textcolor);
 }
 
-.browserContainer > findbar:-moz-lwtheme {
+:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme {
   background-color: var(--lwt-accent-color);
   background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
   border-top-color: var(--chrome-content-separator-color);
   text-shadow: none;
 }
 
 /* Tabstrip */
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -559,17 +559,17 @@ html|input.urlbar-input {
 
 .browserContainer > findbar {
   background: @scopeBarBackground@;
   border-top: @scopeBarSeparatorBorder@;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
-.browserContainer > findbar:-moz-lwtheme {
+:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme {
   background-color: var(--lwt-accent-color);
   background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
   border-top-color: var(--chrome-content-separator-color);
   color: var(--toolbar-color);
 }
 
 .openintabs-menuitem {
   list-style-image: none;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -678,21 +678,21 @@ html|*.urlbar-input:-moz-lwtheme::placeh
 
 %include ../shared/sidebar.inc.css
 
 #browser {
   --sidebar-border-color: ThreeDLightShadow;
 }
 
 .browserContainer > findbar {
-  background-color: var(--toolbar-bgcolor);
-  color: var(--toolbar-color);
+  background-color: var(--toolbar-non-lwt-bgcolor);
+  color: var(--toolbar-non-lwt-textcolor);
 }
 
-.browserContainer > findbar:-moz-lwtheme {
+:root:not([lwtheme-image]) .browserContainer > findbar:-moz-lwtheme {
   background-color: var(--lwt-accent-color);
   background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
   border-top-color: var(--chrome-content-separator-color);
   text-shadow: none;
 }
 
 /* Tabstrip */
 
--- a/toolkit/themes/shared/findBar.inc.css
+++ b/toolkit/themes/shared/findBar.inc.css
@@ -33,16 +33,26 @@ findbar[noanim] {
 }
 
 .findbar-closebutton {
   padding: 0 8px;
 }
 
 /* Search field */
 
+/* Don't apply theme colors on findbar when header image is applied to avoid
+contrast issues, see bug 1506913 */
+:root[lwtheme-image] findbar {
+  --lwt-toolbar-field-background-color: initial;
+  --lwt-toolbar-field-color: initial;
+  --lwt-toolbar-field-border-color: initial;
+  --lwt-toolbar-field-focus: initial;
+  --lwt-toolbar-field-focus-color: initial;
+}
+
 .findbar-textbox {
   -moz-appearance: none;
   background-color: -moz-Field;
   border: 1px solid var(--lwt-toolbar-field-border-color, ThreeDShadow);
   border-start-start-radius: 2px;
   border-end-start-radius: 2px;
   margin: 0;
   padding: 2px 5px;