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 782071 89a91357657aa712eead21fd644cbb8a1a816ee1
parent 782064 ceac91dc08bef5d099c10dda632fc3651b23c897
push id106479
push userbogdan@pozderca.com
push dateSat, 14 Apr 2018 07:21:02 +0000
reviewersjaws, mconley, ntim, dao
bugs1418605
milestone61.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/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
@@ -668,16 +669,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 {