Bug 1418605 - The toolbar, toolbar_text, toolbar_field, toolbar_field_text, toolbar_field_border properties should apply to the findbar r=jaws,mconley,ntim
authorBogdan Pozderca <bogdan@pozderca.com>
Sat, 10 Feb 2018 17:24:50 -0500
changeset 414794 d625d007d1249a1ce8f9cca281f57931882f2e13
parent 414793 d924aed5046046f3530d1e3f24e60acab505f64c
child 414795 3a2fedfeaa96466c02529523706c3ce084f8e502
push id33878
push userapavel@mozilla.com
push dateSat, 21 Apr 2018 09:30:31 +0000
treeherdermozilla-central@6a2fca281629 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, mconley, ntim
bugs1418605
milestone61.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 1418605 - The toolbar, toolbar_text, toolbar_field, toolbar_field_text, toolbar_field_border properties should apply to the findbar r=jaws,mconley,ntim MozReview-Commit-ID: 821d7kR41mJ
browser/modules/ThemeVariableMap.jsm
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/shared/urlbar-searchbar.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/modules/LightweightThemeConsumer.jsm
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/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -28,22 +28,16 @@ const ThemeVariableMap = [
     optionalElementID: "tabbrowser-tabs"
   }],
   ["--toolbar-bgcolor", {
     lwtProperty: "toolbarColor"
   }],
   ["--toolbar-color", {
     lwtProperty: "toolbar_text"
   }],
-  ["--url-and-searchbar-background-color", {
-    lwtProperty: "toolbar_field"
-  }],
-  ["--url-and-searchbar-color", {
-    lwtProperty: "toolbar_field_text"
-  }],
   ["--lwt-toolbar-field-border-color", {
     lwtProperty: "toolbar_field_border"
   }],
   ["--lwt-toolbar-field-focus", {
     lwtProperty: "toolbar_field_focus"
   }],
   ["--lwt-toolbar-field-focus-color", {
     lwtProperty: "toolbar_field_text_focus"
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -445,16 +445,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, -moz-DialogText);
+}
+
 /* 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
@@ -222,16 +222,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
@@ -673,16 +674,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, -moz-DialogText);
+}
+
 .openintabs-menuitem {
   list-style-image: none;
 }
 
 /* ::::: tabbrowser ::::: */
 
 #tabbrowser-tabbox {
   margin: 0;
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -2,16 +2,17 @@
 % License, v. 2.0. If a copy of the MPL was not distributed with this
 % file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 /* compacttheme.css is loaded in browser.xul after browser.css when it is
    preffed on.  The bulk of the styling is here in the shared file, but
    there are overrides for each platform in their compacttheme.css files. */
 
 :root:-moz-lwtheme {
+  --toolbar-color: var(--chrome-color);
   --toolbar-bgcolor: var(--chrome-secondary-background-color);
   --toolbar-non-lwt-bgcolor: var(--toolbar-bgcolor);
   --toolbar-non-lwt-textcolor: var(--chrome-color);
   --toolbar-non-lwt-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: .7;
 }
 
@@ -21,23 +22,23 @@
   --chrome-color: rgb(249, 249, 250);
   --chrome-secondary-background-color: hsl(240, 1%, 20%);
   --toolbox-border-bottom-color: hsla(240, 5%, 5%, .1);
   --chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
   --chrome-selection-color: #fff;
   --chrome-selection-background-color: #5675B9;
 
   /* Url and search bars */
-  --url-and-searchbar-background-color: rgb(71, 71, 73);
-  --url-and-searchbar-color: var(--chrome-color);
+  --lwt-toolbar-field-background-color: rgb(71, 71, 73);
+  --lwt-toolbar-field-color: var(--chrome-color);
   --urlbar-separator-color: #5F6670;
 }
 
 :root:-moz-lwtheme-darktext {
-  --url-and-searchbar-background-color: #fff;
+  --lwt-toolbar-field-background-color: #fff;
 
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
   --chrome-secondary-background-color: #f5f6f7;
   --toolbox-border-bottom-color: #cccccc;
   --chrome-nav-bar-controls-border-color: #ccc;
   --chrome-selection-color: #f5f7fa;
   --chrome-selection-background-color: #4c9ed9;
@@ -71,23 +72,16 @@ toolbar[brighttext] .toolbarbutton-1 {
 #navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar),
 .browserContainer > findbar,
 #browser-bottombox {
   background-color: var(--chrome-secondary-background-color) !important;
   background-image: none !important;
   color: var(--chrome-color);
 }
 
-/* Default findbar text color doesn't look good - Bug 1125677 */
-.browserContainer > findbar .findbar-find-status,
-.browserContainer > findbar .found-matches,
-.browserContainer > findbar .findbar-button {
-  color: inherit;
-}
-
 /* URL bar and search bar*/
 #urlbar:not([focused="true"]),
 .searchbar-textbox:not([focused="true"]) {
   border-color: var(--chrome-nav-bar-controls-border-color);
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels:-moz-lwtheme-brighttext {
   color: #30e60b;
--- 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/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -41,44 +41,44 @@
 #urlbar:hover,
 .searchbar-textbox:hover {
   border-color: @fieldHoverBorderColor@;
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
 }
 
 #urlbar:-moz-lwtheme,
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme {
-  background-color: var(--url-and-searchbar-background-color, hsla(0,0%,100%,.8));
-  color: var(--url-and-searchbar-color, black);
+  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
+  color: var(--lwt-toolbar-field-color, black);
 }
 
 #urlbar:not([focused="true"]):-moz-lwtheme,
 #navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, @fieldBorderColor@);
 }
 
 #urlbar:not([focused="true"]):-moz-lwtheme:hover,
 #navigator-toolbox .searchbar-textbox:not([focused="true"]):-moz-lwtheme:hover {
   border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
 }
 
 #urlbar:-moz-lwtheme:hover,
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme:hover {
-  background-color: var(--url-and-searchbar-background-color, white);
+  background-color: var(--lwt-toolbar-field-background-color, white);
 }
 
 #urlbar[focused="true"],
 .searchbar-textbox[focused="true"] {
   border-color: var(--toolbar-field-focus-border-color);
 }
 
 #urlbar:-moz-lwtheme[focused="true"],
 #navigator-toolbox .searchbar-textbox:-moz-lwtheme[focused="true"] {
-  background-color: var(--lwt-toolbar-field-focus, var(--url-and-searchbar-background-color, white));
-  color: var(--lwt-toolbar-field-focus-color, var(--url-and-searchbar-color, black));
+  background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
+  color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
 }
 
 :root[uidensity=compact] #urlbar,
 :root[uidensity=compact] .searchbar-textbox {
   min-height: 26px;
   margin-top: 3px;
   margin-bottom: 3px;
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -677,16 +677,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, -moz-DialogText);
+}
+
 /* 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
@@ -22,8 +22,9 @@ support-files =
 [browser_ext_themes_toolbars.js]
 [browser_ext_themes_toolbarbutton_icons.js]
 [browser_ext_themes_toolbarbutton_colors.js]
 [browser_ext_themes_theme_transition.js]
 [browser_ext_themes_arrowpanels.js]
 [browser_ext_themes_tab_selected.js]
 [browser_ext_themes_autocomplete_popup.js]
 [browser_ext_themes_sanitization.js]
+[browser_ext_themes_findbar.js]
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_findbar.js
@@ -0,0 +1,105 @@
+"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();
+  await gBrowser.getFindBar();
+
+  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();
+  await gBrowser.getFindBar();
+
+  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/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -39,16 +39,22 @@ const toolkitVariableMap = [
     lwtProperty: "popup"
   }],
   ["--arrowpanel-color", {
     lwtProperty: "popup_text"
   }],
   ["--arrowpanel-border-color", {
     lwtProperty: "popup_border"
   }],
+  ["--lwt-toolbar-field-background-color", {
+    lwtProperty: "toolbar_field"
+  }],
+  ["--lwt-toolbar-field-color", {
+    lwtProperty: "toolbar_field_text"
+  }],
 ];
 
 // Get the theme variables from the app resource directory.
 // This allows per-app variables.
 ChromeUtils.import("resource:///modules/ThemeVariableMap.jsm");
 
 ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -7,16 +7,21 @@
 findbar {
   border-top: 1px solid ThreeDShadow;
   min-width: 1px;
   transition-property: margin-bottom, opacity, visibility;
   transition-duration: 150ms, 150ms, 0s;
   transition-timing-function: ease-in-out, ease-in-out, linear;
 }
 
+findbar:-moz-lwtheme {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--toolbar-color, var(--chrome-color, -moz-DialogText));
+}
+
 findbar[hidden] {
   /* Override display:none to make the transition work. */
   display: -moz-box;
   visibility: collapse;
   margin-bottom: -1em;
   opacity: 0;
   transition-delay: 0s, 0s, 150ms;
 }
@@ -35,23 +40,28 @@ findbar[noanim] {
 .findbar-closebutton {
   margin: 0 8px;
 }
 
 /* Search field */
 
 .findbar-textbox {
   -moz-appearance: none;
-  border: 1px solid ThreeDShadow;
+  border: 1px solid var(--lwt-toolbar-field-border-color, ThreeDShadow);
   box-shadow: 0 0 1px 0 ThreeDShadow inset;
   margin: 0;
   padding: 5px;
   width: 14em;
 }
 
+.findbar-textbox:-moz-lwtheme {
+  background-color: var(--lwt-toolbar-field-background-color, -moz-Field);
+  color: var(--lwt-toolbar-field-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 +117,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,18 +25,20 @@ findbar[hidden] {
 
 findbar[noanim] {
   transition-duration: 0s !important;
   transition-delay: 0s !important;
 }
 
 findbar:-moz-lwtheme {
   -moz-appearance: none;
-  background: none;
+  background-color: var(--toolbar-bgcolor);
+  background-image: none;
   border-style: none;
+  color: var(--toolbar-color, var(--chrome-color, -moz-DialogText));
 }
 
 .findbar-container {
   padding-inline-start: 2px;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
@@ -64,23 +66,28 @@ 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: @roundButtonBorderWidth@ @roundButtonBorderStyle@ @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 +133,30 @@ 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: @roundButtonBorderWidth@ @roundButtonBorderStyle@ 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;
   margin: 0;
   padding: 2px 8px;
   padding-inline-start: 19px;
 }
 
+.findbar-textbox:-moz-lwtheme {
+  background-color: var(--lwt-toolbar-field-background-color, -moz-Field);
+  color: var(--lwt-toolbar-field-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 +216,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,17 @@ 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: @roundButtonBorderWidth@ @roundButtonBorderStyle@ @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
@@ -10,16 +10,21 @@ findbar {
   background-size: 100% 2px;
   background-repeat: no-repeat;
   min-width: 1px;
   transition-property: margin-bottom, opacity, visibility;
   transition-duration: 150ms, 150ms, 0s;
   transition-timing-function: ease-in-out, ease-in-out, linear;
 }
 
+findbar:-moz-lwtheme {
+  background-color: var(--toolbar-bgcolor);
+  color: var(--toolbar-color, var(--chrome-color, -moz-DialogText));
+}
+
 findbar[hidden] {
   /* Override display:none to make the transition work. */
   display: -moz-box;
   visibility: collapse;
   margin-bottom: -1em;
   opacity: 0;
   transition-delay: 0s, 0s, 150ms;
 }
@@ -42,23 +47,30 @@ 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;
   margin: 0;
   padding: 1px 5px;
   width: 14em;
 }
 
+.findbar-textbox:-moz-lwtheme {
+  background-color: var(--lwt-toolbar-field-background-color, -moz-Field);
+  color: var(--lwt-toolbar-field-color, -moz-FieldText);
+}
+
 .findbar-textbox:-moz-locale-dir(rtl) {
   border-radius: 0 2px 2px 0;
 }
 
 .findbar-textbox[focused="true"] {
   border-color: Highlight;
 }
 
@@ -100,16 +112,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 {