Bug 1506913 - Don't apply theme colors on findbar when theme has a header image. r=dao
☠☠ backed out by 995276110de4 ☠ ☠
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 10 Apr 2019 15:07:21 +0000
changeset 468774 f38ce082341e1631132dfcac799bca6cce8380f3
parent 468773 e0edc59f9158d65e91a45cb6b1d96d75b5998da3
child 468775 b8e84c48c6720e03b24170671b502ec306939bf3
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/components/extensions/test/browser/browser_ext_themes_findbar.js
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/components/extensions/test/browser/browser_ext_themes_findbar.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js
@@ -7,30 +7,24 @@ add_task(async function test_support_too
   const TOOLBAR_COLOR = "#ff00ff";
   const TOOLBAR_TEXT_COLOR = "#9400ff";
   // The TabContextMenu initializes its strings only on a focus or mouseover event.
   // Calls focus event on the TabContextMenu early in the test.
   gBrowser.selectedTab.focus();
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
-        "images": {
-          "theme_frame": "image1.png",
-        },
         "colors": {
           "frame": ACCENT_COLOR,
           "tab_background_text": TEXT_COLOR,
           "toolbar": TOOLBAR_COLOR,
           "bookmark_text": TOOLBAR_TEXT_COLOR,
         },
       },
     },
-    files: {
-      "image1.png": BACKGROUND,
-    },
   });
 
   await extension.startup();
   await gBrowser.getFindBar();
 
   let findbar_button = gFindBar.getElement("highlight");
 
   info("Checking findbar background is set as toolbar color");
@@ -54,31 +48,25 @@ add_task(async function test_support_too
   const TOOLBAR_FIELD_TEXT_COLOR = "#9400ff";
   const TOOLBAR_FIELD_BORDER_COLOR = "#ffffff";
   // The TabContextMenu initializes its strings only on a focus or mouseover event.
   // Calls focus event on the TabContextMenu early in the test.
   gBrowser.selectedTab.focus();
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
-        "images": {
-          "theme_frame": "image1.png",
-        },
         "colors": {
           "frame": ACCENT_COLOR,
           "tab_background_text": TEXT_COLOR,
           "toolbar_field": TOOLBAR_FIELD_COLOR,
           "toolbar_field_text": TOOLBAR_FIELD_TEXT_COLOR,
           "toolbar_field_border": TOOLBAR_FIELD_BORDER_COLOR,
         },
       },
     },
-    files: {
-      "image1.png": BACKGROUND,
-    },
   });
 
   await extension.startup();
   await gBrowser.getFindBar();
 
   let findbar_textbox = gFindBar.getElement("findbar-textbox");
 
   let findbar_prev_button = gFindBar.getElement("find-previous");
@@ -95,8 +83,108 @@ add_task(async function test_support_too
                hexToCSS(TOOLBAR_FIELD_TEXT_COLOR),
                "Findbar textbox text color should be the same as toolbar field text color.");
   testBorderColor(findbar_textbox, TOOLBAR_FIELD_BORDER_COLOR);
   testBorderColor(findbar_prev_button, TOOLBAR_FIELD_BORDER_COLOR);
   testBorderColor(findbar_next_button, TOOLBAR_FIELD_BORDER_COLOR);
 
   await extension.unload();
 });
+
+// Test that theme properties are *not* applied with a theme_frame (see bug 1506913)
+add_task(async function test_toolbar_properties_on_findbar_with_theme_frame() {
+  const TOOLBAR_COLOR = "#ff00ff";
+  const TOOLBAR_TEXT_COLOR = "#9400ff";
+  // The TabContextMenu initializes its strings only on a focus or mouseover event.
+  // Calls focus event on the TabContextMenu early in the test.
+  gBrowser.selectedTab.focus();
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "theme_frame": "image1.png",
+        },
+        "colors": {
+          "frame": ACCENT_COLOR,
+          "tab_background_text": TEXT_COLOR,
+          "toolbar": TOOLBAR_COLOR,
+          "bookmark_text": TOOLBAR_TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+  await gBrowser.getFindBar();
+
+  let findbar_button = gFindBar.getElement("highlight");
+
+  info("Checking findbar background is *not* set as toolbar color");
+  Assert.notEqual(
+    window.getComputedStyle(gFindBar).backgroundColor,
+    hexToCSS(ACCENT_COLOR),
+    "Findbar background color should not be set by theme."
+  );
+
+  info("Checking findbar and button text color is *not* set as toolbar text color");
+  Assert.notEqual(
+    window.getComputedStyle(gFindBar).color,
+    hexToCSS(TOOLBAR_TEXT_COLOR),
+    "Findbar text color should not be set by theme."
+  );
+  Assert.notEqual(
+    window.getComputedStyle(findbar_button).color,
+    hexToCSS(TOOLBAR_TEXT_COLOR),
+    "Findbar button text color should not be set by theme."
+  );
+
+  await extension.unload();
+});
+
+add_task(async function test_toolbar_field_properties_on_findbar_with_theme_frame() {
+  const TOOLBAR_FIELD_COLOR = "#ff00ff";
+  const TOOLBAR_FIELD_TEXT_COLOR = "#9400ff";
+  const TOOLBAR_FIELD_BORDER_COLOR = "#ffffff";
+  // The TabContextMenu initializes its strings only on a focus or mouseover event.
+  // Calls focus event on the TabContextMenu early in the test.
+  gBrowser.selectedTab.focus();
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "theme_frame": "image1.png",
+        },
+        "colors": {
+          "frame": ACCENT_COLOR,
+          "tab_background_text": TEXT_COLOR,
+          "toolbar_field": TOOLBAR_FIELD_COLOR,
+          "toolbar_field_text": TOOLBAR_FIELD_TEXT_COLOR,
+          "toolbar_field_border": TOOLBAR_FIELD_BORDER_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+  await gBrowser.getFindBar();
+
+  let findbar_textbox = gFindBar.getElement("findbar-textbox");
+
+  Assert.notEqual(
+    window.getComputedStyle(findbar_textbox).backgroundColor,
+    hexToCSS(TOOLBAR_FIELD_COLOR),
+    "Findbar textbox background color should not be set by theme."
+  );
+
+  Assert.notEqual(
+    window.getComputedStyle(findbar_textbox).color,
+    hexToCSS(TOOLBAR_FIELD_TEXT_COLOR),
+    "Findbar textbox text color should not be set by theme."
+  );
+
+  await extension.unload();
+});
--- 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;