Bug 1506913 - Don't apply theme colors on findbar when theme has a header image. r=dao
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 10 Apr 2019 16:52:41 +0000
changeset 468828 53c0f17ba52cf0d0841d25320e06c386f78435a7
parent 468827 8e8da015fde18e4068f22f7f137ec9899b4310c8
child 468829 9ad896485f8948c03866e0cbdd3ed48b878f5b2e
push id112755
push userdvarga@mozilla.com
push dateWed, 10 Apr 2019 22:06:41 +0000
treeherdermozilla-inbound@606f85641d0b [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,25 +383,26 @@ 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);
+  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);
-  text-shadow: none;
+  color: var(--toolbar-color);
 }
 
 /* Tabstrip */
 
 %include ../shared/tabs.inc.css
 
 #tabbrowser-tabs {
   /* override the global style to allow the selected tab to be above the nav-bar */
--- 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,25 +678,26 @@ 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);
+  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);
-  text-shadow: none;
+  color: var(--toolbar-color);
 }
 
 /* Tabstrip */
 
 #TabsToolbar {
   min-height: 0;
   padding: 0;
 }
--- 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;