Bug 1418605 - The toolbar, toolbar_text, toolbar_field, toolbar_field_text, toolbar_field_border properties should apply to the findbar r?jaws,mconley,ntim,dao draft
authorBogdan Pozderca <bogdan@pozderca.com>
Sat, 10 Feb 2018 17:24:50 -0500
changeset 761041 c262a987eda998a960a818383d06293d78954b38
parent 755325 9aea2ffbb322bf8c08e51686f0502120edc08974
child 761042 302589ab7481732301f6168eec95244ac64ba10d
push id100829
push userbogdan@pozderca.com
push dateWed, 28 Feb 2018 15:56:07 +0000
reviewersjaws, mconley, ntim, dao
bugs1418605
milestone60.0a1
Bug 1418605 - The toolbar, toolbar_text, toolbar_field, toolbar_field_text, toolbar_field_border properties should apply to the findbar r?jaws,mconley,ntim,dao MozReview-Commit-ID: 821d7kR41mJ
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/windows/browser.css
toolkit/components/extensions/test/browser/browser.ini
toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js
toolkit/themes/linux/global/findBar.css
toolkit/themes/osx/global/findBar.css
toolkit/themes/osx/global/global.css
toolkit/themes/osx/global/shared.inc
toolkit/themes/windows/global/findBar.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -453,16 +453,21 @@ notification[value="translation"] menuli
 }
 
 .browserContainer > findbar {
   background-color: -moz-dialog;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
+.browserContainer > findbar:-moz-lwtheme {
+  background-color: var(--toolbar-bgcolor);
+  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 */
   z-index: auto;
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -220,16 +220,17 @@
 %include ../shared/toolbarbutton-icons.inc.css
 %include ../shared/menupanel.inc.css
 
 /* Override OSX-specific toolkit findbar button styles */
 .findbar-button {
   background: none;
   box-shadow: none;
   border: none;
+  color: inherit;
 }
 
 /* On Mac, native buttons keep their full opacity when they become disabled
  * and only the glyph or text on top of them becomes less opaque. */
 :root:not([customizing]) #back-button[disabled="true"] {
   opacity: 1 !important;
   /* Disabled toolbar buttons get an opacity of 0.4 which multiplies
    * their fill-opacity of 0.7. calc() doesn't work here - we'd need
@@ -666,16 +667,22 @@ html|input.urlbar-input {
 
 .browserContainer > findbar {
   background: @scopeBarBackground@;
   border-top: @scopeBarSeparatorBorder@;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
+.browserContainer > findbar:-moz-lwtheme {
+  background-color: var(--toolbar-bgcolor);
+  background-image: none;
+  color: var(--toolbar-color);
+}
+
 .openintabs-menuitem {
   list-style-image: none;
 }
 
 /* ::::: tabbrowser ::::: */
 
 .tabbrowser-tabbox {
   margin: 0;
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -89,16 +89,17 @@ toolbar[brighttext] {
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
   background-color: Highlight;
 }
 
 .findbar-button {
   -moz-appearance: none;
   padding: 0;
+  color: inherit;
 }
 
 toolbar .toolbarbutton-1 {
   -moz-appearance: none;
   margin: 0;
   padding: 0 var(--toolbarbutton-outer-padding);
   -moz-box-pack: center;
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -681,16 +681,21 @@ html|*.urlbar-input:-moz-lwtheme::placeh
 }
 
 .browserContainer > findbar {
   background-color: -moz-dialog;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
+.browserContainer > findbar:-moz-lwtheme {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--toolbar-color);
+}
+
 /* Tabstrip */
 
 #TabsToolbar {
   min-height: 0;
   padding: 0;
 }
 
 %include ../shared/tabs.inc.css
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -16,8 +16,9 @@ support-files =
 [browser_ext_themes_static_onUpdated.js]
 [browser_ext_themes_tab_loading.js]
 [browser_ext_themes_tab_text.js]
 [browser_ext_themes_toolbar_fields.js]
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
 [browser_ext_themes_toolbarbutton_colors.js]
 [browser_ext_themes_arrowpanels.js]
+[browser_ext_themes_findbar.js]
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js
@@ -0,0 +1,103 @@
+"use strict";
+
+// This test checks whether applied WebExtension themes that attempt to change
+// the toolbar and toolbar_field properties also theme the findbar.
+
+add_task(async function setup() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["extensions.webextensions.themes.enabled", true]],
+  });
+});
+
+add_task(async function test_support_toolbar_properties_on_findbar() {
+  const TOOLBAR_COLOR = "#ff00ff";
+  const TOOLBAR_TEXT_COLOR = "#9400ff";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": TEXT_COLOR,
+          "toolbar": TOOLBAR_COLOR,
+          "toolbar_text": TOOLBAR_TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let findbar_button = document.getAnonymousElementByAttribute(gFindBar, "anonid", "highlight");
+
+  info("Checking findbar background is set as toolbar color");
+  Assert.equal(window.getComputedStyle(gFindBar).backgroundColor,
+               hexToCSS(TOOLBAR_COLOR),
+               "Findbar background color should be the same as toolbar background color.");
+
+  info("Checking findbar and button text color is set as toolbar text color");
+  Assert.equal(window.getComputedStyle(gFindBar).color,
+               hexToCSS(TOOLBAR_TEXT_COLOR),
+               "Findbar text color should be the same as toolbar text color.");
+  Assert.equal(window.getComputedStyle(findbar_button).color,
+               hexToCSS(TOOLBAR_TEXT_COLOR),
+               "Findbar button text color should be the same as toolbar text color.");
+
+  await extension.unload();
+});
+
+add_task(async function test_support_toolbar_field_properties_on_findbar() {
+  const TOOLBAR_FIELD_COLOR = "#ff00ff";
+  const TOOLBAR_FIELD_TEXT_COLOR = "#9400ff";
+  const TOOLBAR_FIELD_BORDER_COLOR = "#ffffff";
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "headerURL": "image1.png",
+        },
+        "colors": {
+          "accentcolor": ACCENT_COLOR,
+          "textcolor": 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();
+
+  let findbar_textbox =
+    document.getAnonymousElementByAttribute(gFindBar, "anonid", "findbar-textbox");
+
+  let findbar_prev_button =
+    document.getAnonymousElementByAttribute(gFindBar, "anonid", "find-previous");
+
+  let findbar_next_button =
+    document.getAnonymousElementByAttribute(gFindBar, "anonid", "find-next");
+
+  info("Checking findbar textbox background is set as toolbar field background color");
+  Assert.equal(window.getComputedStyle(findbar_textbox).backgroundColor,
+               hexToCSS(TOOLBAR_FIELD_COLOR),
+               "Findbar textbox background color should be the same as toolbar field color.");
+
+  info("Checking findbar textbox color is set as toolbar field text color");
+  Assert.equal(window.getComputedStyle(findbar_textbox).color,
+               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();
+});
--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -35,23 +35,31 @@ findbar[noanim] {
 .findbar-closebutton {
   margin: 0 8px;
 }
 
 /* Search field */
 
 .findbar-textbox {
   -moz-appearance: none;
-  border: 1px solid ThreeDShadow;
+  background-color: -moz-Field;
+  border: 1px solid;
+  border-color: var(--lwt-toolbar-field-border-color, ThreeDShadow);
   box-shadow: 0 0 1px 0 ThreeDShadow inset;
+  color: -moz-FieldText;
   margin: 0;
   padding: 5px;
   width: 14em;
 }
 
+.findbar-textbox:-moz-lwtheme {
+  background-color: var(--url-and-searchbar-background-color, -moz-Field);
+  color: var(--url-and-searchbar-color, -moz-FieldText);
+}
+
 .findbar-textbox:-moz-locale-dir(ltr) {
   border-radius: 3px 0 0 3px;
   border-right-width: 0;
 }
 
 .findbar-textbox:-moz-locale-dir(rtl) {
   border-radius: 0 3px 3px 0;
   border-left-width: 0;
@@ -107,16 +115,21 @@ findbar[noanim] {
   list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
   border-inline-end-width: 0;
 }
 
 .findbar-find-next {
   list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
 }
 
+.findbar-find-next:-moz-lwtheme,
+.findbar-find-previous:-moz-lwtheme {
+  border-color: var(--lwt-toolbar-field-border-color);
+}
+
 .findbar-find-previous > .toolbarbutton-icon,
 .findbar-find-next > .toolbarbutton-icon {
   margin: 0;
 }
 
 .findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
 .findbar-find-next[disabled="true"] > .toolbarbutton-icon {
   opacity: .4;
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -25,17 +25,16 @@ findbar[hidden] {
 
 findbar[noanim] {
   transition-duration: 0s !important;
   transition-delay: 0s !important;
 }
 
 findbar:-moz-lwtheme {
   -moz-appearance: none;
-  background: none;
   border-style: none;
 }
 
 .findbar-container {
   padding-inline-start: 2px;
   padding-top: 4px;
   padding-bottom: 4px;
 }
@@ -64,23 +63,30 @@ label.findbar-find-fast:-moz-lwtheme,
 
 .findbar-find-next,
 .findbar-find-previous,
 .findbar-highlight,
 .findbar-case-sensitive,
 .findbar-entire-word {
   -moz-appearance: none;
   border-radius: 10000px;
-  border: @roundButtonBorder@;
+  border-width: @roundButtonBorderWidth@;
+  border-style: @roundButtonBorderStyle@;
+  border-color: @roundButtonBorderColor@;
   color: @roundButtonColor@;
   background: @roundButtonBackground@;
   box-shadow: @roundButtonShadow@;
   margin: 0;
 }
 
+.findbar-find-next:-moz-lwtheme,
+.findbar-find-previous:-moz-lwtheme {
+  background-image: linear-gradient(rgba(255,255,255,.6) 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.1));
+}
+
 @media (-moz-mac-yosemite-theme) {
   .findbar-find-previous,
   .findbar-find-next {
     border-radius: 3px;
     box-shadow: none;
   }
 }
 
@@ -126,25 +132,36 @@ label.findbar-find-fast:-moz-lwtheme,
   box-shadow: var(--focus-ring-box-shadow), @roundButtonPressedShadow@;
 }
 
 /* Search field */
 
 .findbar-textbox {
   position: relative;
   -moz-appearance: none;
-  border: @roundButtonBorder@;
+  border-width: @roundButtonBorderWidth@;
+  border-style: @roundButtonBorderStyle@;
+  border-color: var(--lwt-toolbar-field-border-color, @roundButtonBorderColor@);
   border-radius: 10000px 0 0 10000px;
   box-shadow: @roundButtonShadow@;
-  background: url("chrome://global/skin/icons/search-textbox.svg") -moz-Field no-repeat 5px center;
+  background-image: url("chrome://global/skin/icons/search-textbox.svg");
+  background-color: -moz-Field;
+  background-repeat: no-repeat;
+  background-position: 5px center;
+  color: -moz-FieldText;
   margin: 0;
   padding: 2px 8px;
   padding-inline-start: 19px;
 }
 
+.findbar-textbox:-moz-lwtheme {
+  background-color: var(--url-and-searchbar-background-color, -moz-Field);
+  color: var(--url-and-searchbar-color, -moz-FieldText);
+}
+
 .findbar-textbox:-moz-locale-dir(rtl) {
   border-radius: 0 10000px 10000px 0;
   background-position-x: calc(100% - 5px);
 }
 
 @media (-moz-mac-yosemite-theme) {
   .findbar-textbox {
     border-top-left-radius: 3px;
@@ -204,16 +221,21 @@ label.findbar-find-fast:-moz-lwtheme,
 
 .findbar-find-next {
   list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
   -moz-context-properties: fill;
   fill: -moz-dialogtext;
   padding-inline-end: 7px;
 }
 
+.findbar-find-next:-moz-lwtheme,
+.findbar-find-previous:-moz-lwtheme {
+  border-color: var(--lwt-toolbar-field-border-color);
+}
+
 .findbar-find-previous[disabled] {
   fill: GrayText;
 }
 
 .findbar-find-next[disabled] {
   fill: GrayText;
 }
 
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -218,17 +218,19 @@ label[disabled="true"] {
 
 notification > button {
   margin: 0 3px;
   padding: 1px 10px;
   min-width: 60px;
   min-height: 16px;
   -moz-appearance: none;
   border-radius: 10000px;
-  border: @roundButtonBorder@;
+  border-width: @roundButtonBorderWidth@;
+  border-style: @roundButtonBorderStyle@;
+  border-color: @roundButtonBorderColor@;
   text-shadow: @loweredShadow@;
   color: @roundButtonColor@;
   background: @roundButtonBackground@;
   box-shadow: @roundButtonShadow@;
 }
 
 notification > button:active:hover {
   color: @roundButtonColor@;
--- a/toolkit/themes/osx/global/shared.inc
+++ b/toolkit/themes/osx/global/shared.inc
@@ -1,14 +1,16 @@
 %filter substitution
 
 %define loweredShadow 0 1px rgba(255, 255, 255, .4)
 %define focusRingShadow 0 0 0 1px -moz-mac-focusring inset, 0 0 0 1px -moz-mac-focusring
 
-%define roundButtonBorder 1px solid rgba(0,0,0,.35)
+%define roundButtonBorderWidth 1px
+%define roundButtonBorderStyle solid
+%define roundButtonBorderColor rgba(0,0,0,.35)
 %define roundButtonColor black
 %define roundButtonBackground linear-gradient(#f6f6f6, #e9e9e9)
 %define roundButtonShadow 0 1px rgba(255,255,255,.5), inset 0 1px 1px rgba(255,255,255,.5)
 %define roundButtonPressedBackground #dadada
 %define roundButtonPressedShadow 0 1px rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.2)
 
 %define scopeBarBackground linear-gradient(#E8E8E8, #D0D0D0) repeat-x
 %define scopeBarSeparatorBorder 1px solid #888
--- a/toolkit/themes/windows/global/findBar.css
+++ b/toolkit/themes/windows/global/findBar.css
@@ -42,23 +42,31 @@ findbar[noanim] {
   border: none;
 }
 
 
 /* Search field */
 
 .findbar-textbox {
   -moz-appearance: none;
-  border: 1px solid ThreeDShadow;
+  background-color: -moz-Field;
+  border: 1px solid;
+  border-color: var(--lwt-toolbar-field-border-color, ThreeDShadow);
   border-radius: 2px 0 0 2px;
+  color: -moz-FieldText;
   margin: 0;
   padding: 1px 5px;
   width: 14em;
 }
 
+.findbar-textbox:-moz-lwtheme {
+  background-color: var(--url-and-searchbar-background-color, -moz-Field);
+  color: var(--url-and-searchbar-color, -moz-FieldText);
+}
+
 .findbar-textbox:-moz-locale-dir(rtl) {
   border-radius: 0 2px 2px 0;
 }
 
 .findbar-textbox[focused="true"] {
   border-color: Highlight;
 }
 
@@ -100,16 +108,21 @@ findbar[noanim] {
 .findbar-find-previous {
   list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
 }
 
 .findbar-find-next {
   list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
 }
 
+.findbar-find-next:-moz-lwtheme,
+.findbar-find-previous:-moz-lwtheme {
+  border-color: var(--lwt-toolbar-field-border-color);
+}
+
 .findbar-find-previous,
 .findbar-find-previous:not([disabled]):active {
   border-right: none;
   border-left: none;
 }
 
 .findbar-find-previous > .toolbarbutton-icon,
 .findbar-find-next > .toolbarbutton-icon {