Bug 1455922 - Create shared findbar CSS across platforms. r=dao draft
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 29 May 2018 20:45:22 +0200
changeset 801104 e890a2a8704a7d143db0b63947e0d72662169d7e
parent 800391 20d536fd0f2a02bd4527044d367cf98bebbb358d
child 801105 e3e7f79aac57404d8136625db9da30bbbc960158
push id111574
push userbmo:ntim.bugs@gmail.com
push dateTue, 29 May 2018 18:46:08 +0000
reviewersdao
bugs1455922
milestone62.0a1
Bug 1455922 - Create shared findbar CSS across platforms. r=dao MozReview-Commit-ID: Hv3WHysJOQX
toolkit/themes/linux/global/findBar.css
toolkit/themes/linux/global/jar.mn
toolkit/themes/osx/global/findBar.css
toolkit/themes/shared/findBar.inc.css
toolkit/themes/windows/global/findBar.css
toolkit/themes/windows/global/jar.mn
--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -1,173 +1,5 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-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;
-}
-
-findbar[noanim] {
-  transition-duration: 0s !important;
-  transition-delay: 0s !important;
-}
-
-.findbar-container {
-  padding-inline-start: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.findbar-closebutton {
-  margin: 0 8px;
-}
-
-/* Search field */
-
-.findbar-textbox {
-  -moz-appearance: none;
-  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;
-}
-
-.findbar-textbox[focused="true"] {
-  border-color: Highlight;
-  box-shadow: 0 0 1px 0 Highlight inset;
-}
-
-.findbar-textbox[status="notfound"] {
-  background-color: #f66;
-  color: white;
-}
-
-.findbar-textbox[flash="true"] {
-  background-color: yellow;
-  color: black;
-}
-
-.findbar-textbox.minimal {
-  border-width: 1px;
-  border-radius: 3px;
-}
-
-.findbar-find-previous,
-.findbar-find-next {
-  margin-inline-start: 0;
-  -moz-appearance: none;
-  background: linear-gradient(rgba(255,255,255,.8) 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.1));
-  border: 1px solid ThreeDShadow;
-  padding: 5px 9px;
-  line-height: 1em;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  color: inherit;
-}
-
-.findbar-find-previous:focus,
-.findbar-find-next:focus {
-  border-color: Highlight;
-  box-shadow: 0 0 1px 0 Highlight inset;
-}
-
-.findbar-find-previous:not([disabled]):active,
-.findbar-find-next:not([disabled]):active {
-  background: rgba(23,50,76,.2);
-  border: 1px solid ThreeDShadow;
-  box-shadow: 0 1px 2px rgba(10,31,51,.2) inset;
-}
-
-.findbar-find-previous {
-  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;
-}
-
-.findbar-find-next:-moz-locale-dir(ltr) {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
-.findbar-find-next:-moz-locale-dir(rtl) {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-
-.findbar-find-previous:focus + .findbar-find-next {
-  border-inline-start-width: 0;
-}
-
-.findbar-find-previous:focus {
-  border-inline-end-width: 1px;
-}
-
-.findbar-highlight,
-.findbar-case-sensitive,
-.findbar-entire-word {
-  margin-inline-start: 5px;
-}
-
-.findbar-find-status,
-.findbar-matches {
-  color: GrayText;
-  margin: 0 !important;
-  margin-inline-start: 12px !important;
-}
-
-.find-status-icon[status="pending"] {
-  list-style-image: url("chrome://global/skin/icons/loading.png");
-}
+%include ../../shared/findBar.inc.css
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -6,17 +6,17 @@
 
 toolkit.jar:
    skin/classic/global/autocomplete.css
    skin/classic/global/button.css
    skin/classic/global/checkbox.css
    skin/classic/global/colorpicker.css
    skin/classic/global/commonDialog.css
    skin/classic/global/dropmarker.css
-   skin/classic/global/findBar.css
+*  skin/classic/global/findBar.css
 *  skin/classic/global/global.css
    skin/classic/global/groupbox.css
    skin/classic/global/listbox.css
    skin/classic/global/menu.css
    skin/classic/global/menulist.css
    skin/classic/global/netError.css
 *  skin/classic/global/notification.css
 *  skin/classic/global/numberbox.css
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -1,271 +1,90 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 %include shared.inc
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+%include ../../shared/findBar.inc.css
 
 findbar {
   background: @scopeBarBackground@;
   border-top: @scopeBarSeparatorBorder@;
-  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[hidden] {
-  /* Override display:none to make the transition work. */
-  display: -moz-box;
-  visibility: collapse;
-  margin-bottom: -1em;
-  opacity: 0;
-  transition-delay: 0s, 0s, 150ms;
-}
-
-findbar[noanim] {
-  transition-duration: 0s !important;
-  transition-delay: 0s !important;
-}
-
-findbar:-moz-lwtheme {
-  -moz-appearance: 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;
 }
 
 label.findbar-find-fast {
   color: @scopeBarTitleColor@;
   margin: 0;
   margin-inline-start: 12px;
-  text-shadow: @loweredShadow@;
 }
 
 label.findbar-find-fast:-moz-lwtheme,
 .findbar-find-status:-moz-lwtheme {
   color: inherit;
-  text-shadow: inherit;
 }
 
 .findbar-closebutton {
   margin-inline-start: 4px;
+  margin-inline-end: 0;
   padding-inline-start: 0;
   padding-inline-end: 8px;
   border: none;
   /* make sure the closebutton is displayed as the first element in the bar: */
   -moz-box-ordinal-group: 0;
 }
 
-.findbar-find-next,
-.findbar-find-previous,
-.findbar-highlight,
-.findbar-case-sensitive,
-.findbar-entire-word {
-  -moz-appearance: none;
-  border-radius: 10000px;
-  border: @roundButtonBorderWidth@ @roundButtonBorderStyle@ @roundButtonBorderColor@;
+.findbar-find-next:not(:-moz-lwtheme),
+.findbar-find-previous:not(:-moz-lwtheme),
+.findbar-button {
+  border-style: @roundButtonBorderStyle@;
+  border-color: @roundButtonBorderColor@;
   color: @roundButtonColor@;
   background: @roundButtonBackground@;
-  box-shadow: @roundButtonShadow@;
-  margin: 0;
+}
+
+.findbar-button {
+  -moz-appearance: none;
+  border-width: @roundButtonBorderWidth@;
+  margin-inline-end: 5px;
+  padding: 2px 9px;
+  border-radius: 10000px;
 }
 
 .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;
-  }
-}
-
-.findbar-highlight,
-.findbar-case-sensitive,
-.findbar-entire-word {
-  margin-inline-end: 5px;
-  padding: 2px 9px;
+  border-color: var(--lwt-toolbar-field-border-color, @roundButtonBorderColor@);
 }
 
-.findbar-highlight {
-  margin-inline-start: 8px;
-}
-
-.findbar-container > toolbarbutton:-moz-focusring,
-.findbar-find-next:-moz-focusring,
-.findbar-find-previous:-moz-focusring {
-  position: relative;
-  box-shadow: var(--focus-ring-box-shadow), @roundButtonShadow@;
-}
-
-.findbar-container > toolbarbutton[disabled] {
-  color: GrayText !important;
-}
-
-.findbar-find-next:not([disabled]):hover:active,
-.findbar-find-previous:not([disabled]):hover:active,
-.findbar-highlight:not([disabled]):hover:active,
-.findbar-case-sensitive:not([disabled]):hover:active,
-.findbar-entire-word:not([disabled]):hover:active,
-.findbar-highlight:not([disabled])[checked="true"],
-.findbar-case-sensitive:not([disabled])[checked="true"],
-.findbar-entire-word:not([disabled])[checked="true"] {
-  text-shadow: @loweredShadow@;
+.findbar-find-next:not(:-moz-lwtheme):not([disabled]):hover:active,
+.findbar-find-previous:not(:-moz-lwtheme):not([disabled]):hover:active,
+.findbar-button:not([disabled]):hover:active,
+.findbar-button:not([disabled])[checked="true"] {
   background: @roundButtonPressedBackground@;
   box-shadow: @roundButtonPressedShadow@;
 }
 
-.findbar-find-next:hover:active:-moz-focusring,
-.findbar-find-previous:hover:active:-moz-focusring {
-  text-shadow: @loweredShadow@;
-  background: @roundButtonPressedBackground@;
-  box-shadow: var(--focus-ring-box-shadow), @roundButtonPressedShadow@;
-}
-
-/* Search field */
-
-.findbar-textbox {
-  position: relative;
-  -moz-appearance: none;
-  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;
-    border-bottom-left-radius: 3px;
-    box-shadow: none;
-  }
-
-  .findbar-textbox:-moz-locale-dir(rtl) {
-    border-radius: 0 3px 3px 0;
+@media (-moz-mac-yosemite-theme: 0) {
+  .findbar-textbox,
+  .findbar-find-next {
+    border-radius: 10000px;
   }
 }
 
-.findbar-textbox:not([focused="true"]):-moz-lwtheme {
-  opacity: 0.9;
+.findbar-textbox {
+  border: @roundButtonBorderWidth@ @roundButtonBorderStyle@ var(--lwt-toolbar-field-border-color, @roundButtonBorderColor@);
+  background-image: url("chrome://global/skin/icons/search-textbox.svg");
+  background-repeat: no-repeat;
+  background-position: 5px center;
+  margin: 0;
+  padding-inline-start: 19px;
 }
 
 .findbar-textbox[focused="true"] {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
-.findbar-textbox[flash="true"] {
-  background-color: #F7E379;
-}
-
-.findbar-textbox[status="notfound"] {
-  background-color: #FD919B;
-  color: #FFF;
-}
-
-.findbar-textbox.minimal {
-  border-radius: 10000px;
-  margin-inline-start: 5px;
-}
-
-/* Find previous/next buttons */
-
-.findbar-find-previous,
-.findbar-find-next {
-  margin-inline-start: 0;
-  padding: 3px 6px 1px;
-}
-
-.findbar-find-previous > .toolbarbutton-icon,
-.findbar-find-next > .toolbarbutton-icon {
-  margin: 0;
-}
-
-.findbar-find-previous {
-  border-left: none;
-  border-right: none;
-  margin-inline-end: 0;
-  list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
-  -moz-context-properties: fill;
-  fill: -moz-dialogtext;
-  border-radius: 0;
-}
-
-.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-textbox:-moz-locale-dir(rtl) {
+  background-position-x: right 5px;
 }
-
-.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;
-}
-
-.findbar-find-next:-moz-locale-dir(ltr) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.findbar-find-next:-moz-locale-dir(rtl) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/* Status description */
-
-.find-status-icon {
-  display: none;
-}
-
-.find-status-icon[status="pending"] {
-  display: block;
-  list-style-image: url("chrome://global/skin/icons/loading.png");
-}
-
-@media (min-resolution: 2dppx) {
-  .find-status-icon[status="pending"] {
-    width: 16px;
-    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
-  }
-}
-
-.findbar-find-status,
-.found-matches {
-  color: rgba(0,0,0,.5);
-  margin: 0 !important;
-  margin-inline-start: 12px !important;
-  text-shadow: 0 1px rgba(255,255,255,.4);
-}
copy from toolkit/themes/windows/global/findBar.css
copy to toolkit/themes/shared/findBar.inc.css
--- a/toolkit/themes/windows/global/findBar.css
+++ b/toolkit/themes/shared/findBar.inc.css
@@ -1,28 +1,26 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 findbar {
-  box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
-  background-image: linear-gradient(rgba(0,0,0,.15) 1px, rgba(255,255,255,.15) 1px);
-  background-size: 100% 2px;
-  background-repeat: no-repeat;
+  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));
+  background-image: none;
+  color: var(--toolbar-color, -moz-DialogText);
 }
 
 findbar[hidden] {
   /* Override display:none to make the transition work. */
   display: -moz-box;
   visibility: collapse;
   margin-bottom: -1em;
   opacity: 0;
@@ -36,43 +34,44 @@ findbar[noanim] {
 
 .findbar-container {
   padding-inline-start: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
 .findbar-closebutton {
-  margin-inline-start: 4px;
-  padding-inline-start: 0;
-  padding-inline-end: 8px;
-  border: none;
+  padding: 0 8px;
 }
 
-
 /* Search field */
 
 .findbar-textbox {
   -moz-appearance: none;
   background-color: -moz-Field;
-  border: 1px solid;
-  border-color: var(--lwt-toolbar-field-border-color, ThreeDShadow);
-  border-radius: 2px 0 0 2px;
+  border: 1px solid var(--lwt-toolbar-field-border-color, ThreeDShadow);
+  border-radius: 2px;
   margin: 0;
-  padding: 1px 5px;
+  padding: 2px 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-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .findbar-textbox:-moz-locale-dir(rtl) {
-  border-radius: 0 2px 2px 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .findbar-textbox[focused="true"] {
   border-color: Highlight;
 }
 
 .findbar-textbox[status="notfound"] {
   background-color: #f66;
@@ -83,74 +82,70 @@ findbar[noanim] {
   background-color: yellow;
   color: black;
 }
 
 .findbar-textbox.minimal {
   border-radius: 2px;
 }
 
-/* Buttons */
-
 .findbar-find-previous,
 .findbar-find-next {
   margin-inline-start: 0;
   -moz-appearance: none;
   background: linear-gradient(rgba(255,255,255,.8) 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.1));
   border: 1px solid ThreeDShadow;
-  padding: 1px 5px;
+  padding: 2px 5px;
   line-height: 1em;
   -moz-context-properties: fill;
   fill: currentColor;
   color: inherit;
 }
 
-.findbar-find-previous:not([disabled]):active,
-.findbar-find-next:not([disabled]):active {
+.findbar-find-previous:not([disabled]):hover:active,
+.findbar-find-next:not([disabled]):hover:active {
   background: rgba(23,50,76,.2);
   box-shadow: 0 1px 2px rgba(10,31,51,.2) inset;
 }
 
 .findbar-find-previous {
   list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
+  border-right-width: 0;
+  border-left-width: 0;
+  margin-inline-end: 0;
 }
 
 .findbar-find-next {
   list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
+  border-radius: 2px;
 }
 
 .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;
+  border-color: var(--lwt-toolbar-field-border-color, ThreeDShadow);
 }
 
 .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;
 }
 
 .findbar-find-next:-moz-locale-dir(ltr) {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .findbar-find-next:-moz-locale-dir(rtl) {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .findbar-highlight,
 .findbar-case-sensitive,
 .findbar-entire-word {
   margin-inline-start: 5px;
 }
 
--- a/toolkit/themes/windows/global/findBar.css
+++ b/toolkit/themes/windows/global/findBar.css
@@ -1,179 +1,5 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-findbar {
-  box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
-  background-image: linear-gradient(rgba(0,0,0,.15) 1px, rgba(255,255,255,.15) 1px);
-  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;
-}
-
-findbar[noanim] {
-  transition-duration: 0s !important;
-  transition-delay: 0s !important;
-}
-
-.findbar-container {
-  padding-inline-start: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.findbar-closebutton {
-  margin-inline-start: 4px;
-  padding-inline-start: 0;
-  padding-inline-end: 8px;
-  border: none;
-}
-
-
-/* Search field */
-
-.findbar-textbox {
-  -moz-appearance: none;
-  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;
-}
-
-.findbar-textbox[status="notfound"] {
-  background-color: #f66;
-  color: white;
-}
-
-.findbar-textbox[flash="true"] {
-  background-color: yellow;
-  color: black;
-}
-
-.findbar-textbox.minimal {
-  border-radius: 2px;
-}
-
-/* Buttons */
-
-.findbar-find-previous,
-.findbar-find-next {
-  margin-inline-start: 0;
-  -moz-appearance: none;
-  background: linear-gradient(rgba(255,255,255,.8) 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.1));
-  border: 1px solid ThreeDShadow;
-  padding: 1px 5px;
-  line-height: 1em;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  color: inherit;
-}
-
-.findbar-find-previous:not([disabled]):active,
-.findbar-find-next:not([disabled]):active {
-  background: rgba(23,50,76,.2);
-  box-shadow: 0 1px 2px rgba(10,31,51,.2) inset;
-}
-
-.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 {
-  margin: 0;
-}
-
-.findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
-.findbar-find-next[disabled="true"] > .toolbarbutton-icon {
-  opacity: .4;
-}
-
-.findbar-find-next:-moz-locale-dir(ltr) {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-
-.findbar-find-next:-moz-locale-dir(rtl) {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-
-.findbar-highlight,
-.findbar-case-sensitive,
-.findbar-entire-word {
-  margin-inline-start: 5px;
-}
-
-.findbar-highlight > .toolbarbutton-icon,
-.findbar-case-sensitive > .toolbarbutton-icon,
-.findbar-entire-word > .toolbarbutton-icon {
-  display: none;
-}
-
-.findbar-find-status,
-.found-matches {
-  color: GrayText;
-  margin: 0 !important;
-  margin-inline-start: 12px !important;
-}
-
-.find-status-icon[status="pending"] {
-  list-style-image: url("chrome://global/skin/icons/loading.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .find-status-icon[status="pending"] {
-    width: 16px;
-    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
-  }
-}
+%include ../../shared/findBar.inc.css
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -13,17 +13,17 @@ toolkit.jar:
 * skin/classic/global/menu.css
   skin/classic/global/menulist.css
 * skin/classic/global/popup.css
   skin/classic/global/radio.css
   skin/classic/global/tabbox.css
   skin/classic/global/textbox.css
   skin/classic/global/colorpicker.css
   skin/classic/global/commonDialog.css
-  skin/classic/global/findBar.css
+* skin/classic/global/findBar.css
 * skin/classic/global/global.css
   skin/classic/global/listbox.css
   skin/classic/global/netError.css
 * skin/classic/global/numberbox.css
 * skin/classic/global/notification.css
   skin/classic/global/printPageSetup.css
   skin/classic/global/printPreview.css
   skin/classic/global/scrollbox.css