Restyle the findbar

toolkit/content/widgets/findbar.xml

@@ -162,21 +162,29 @@
     <content hidden="true">
     <xul:hbox anonid="findbar-container" class="findbar-container" flex="1" align="center">
       <xul:hbox anonid="findbar-textbox-wrapper" align="stretch">
+      <xul:toolbarbutton anonid="find-closebutton"
+                         class="findbar-closebutton close-icon"
+                         tooltiptext="&findCloseButton.tooltip;"
+                         oncommand="close();"/>
         <xul:textbox anonid="findbar-textbox"
                      class="findbar-textbox findbar-find-fast"
                      xbl:inherits="flash"/>
-        <xul:toolbarbutton anonid="find-previous"
+         <xul:toolbarbutton anonid="find-next"
-                           class="findbar-find-previous tabbable"
-                           tooltiptext="&previous.tooltip;"
-                           oncommand="onFindAgainCommand(true);"
-                           disabled="true"
-                           xbl:inherits="accesskey=findpreviousaccesskey"/>
-        <xul:toolbarbutton anonid="find-next"
                            class="findbar-find-next tabbable"
+                           label="&next.label;"
+                           accesskey="&next.accesskey;"
                            tooltiptext="&next.tooltip;"
                            oncommand="onFindAgainCommand(false);"
                            disabled="true"
                            xbl:inherits="accesskey=findnextaccesskey"/>
+       <xul:toolbarbutton anonid="find-previous"
+                           class="findbar-find-previous tabbable"
+                           label="&previous.label;"
+                           accesskey="&previous.accesskey;"
+                           tooltiptext="&previous.tooltip;"
+                           oncommand="onFindAgainCommand(true);"
+                           disabled="true"
+                           xbl:inherits="accesskey=findpreviousaccesskey"/>
       </xul:hbox>
       <xul:toolbarbutton anonid="highlight"
                          class="findbar-highlight findbar-button tabbable"
@@ -186,22 +194,22 @@
                          oncommand="toggleHighlight(this.checked);"
                          type="checkbox"
                          xbl:inherits="accesskey=highlightaccesskey"/>
-      <xul:toolbarbutton anonid="find-case-sensitive"
+      <xul:checkbox anonid="find-case-sensitive"
-                         class="findbar-case-sensitive findbar-button tabbable"
+                     class="findbar-case-sensitive findbar-button tabbable"
-                         label="&caseSensitive.label;"
+                     label="&caseSensitive.label;"
-                         accesskey="&caseSensitive.accesskey;"
+                     accesskey="&caseSensitive.accesskey;"
-                         tooltiptext="&caseSensitive.tooltiptext;"
+                     tooltiptext="&caseSensitive.tooltiptext;"
-                         oncommand="_setCaseSensitivity(this.checked ? 1 : 0);"
+                     oncommand="_setCaseSensitivity(this.checked ? 1 : 0);"
-                         type="checkbox"
+                     type="checkbox"
-                         xbl:inherits="accesskey=matchcaseaccesskey"/>
+                     xbl:inherits="accesskey=matchcaseaccesskey"/>
-      <xul:toolbarbutton anonid="find-entire-word"
+      <xul:checkbox anonid="find-entire-word"
-                         class="findbar-entire-word findbar-button tabbable"
+                     class="findbar-entire-word findbar-button tabbable"
-                         label="&entireWord.label;"
+                     label="&entireWord.label;"
-                         accesskey="&entireWord.accesskey;"
+                     accesskey="&entireWord.accesskey;"
-                         tooltiptext="&entireWord.tooltiptext;"
+                     tooltiptext="&entireWord.tooltiptext;"
-                         oncommand="toggleEntireWord(this.checked);"
+                     oncommand="toggleEntireWord(this.checked);"
-                         type="checkbox"
+                     type="checkbox"
-                         xbl:inherits="accesskey=entirewordaccesskey"/>
+                     xbl:inherits="accesskey=entirewordaccesskey"/>
       <xul:label anonid="match-case-status" class="findbar-find-fast"/>
       <xul:label anonid="entire-word-status" class="findbar-find-fast"/>
       <xul:label anonid="found-matches" class="findbar-find-fast found-matches" hidden="true"/>
@@ -212,10 +220,6 @@
       <!-- Do not use value, first child is used because it provides a11y with text change events -->
       </xul:description>
     </xul:hbox>
-    <xul:toolbarbutton anonid="find-closebutton"
-                       class="findbar-closebutton close-icon"
-                       tooltiptext="&findCloseButton.tooltip;"
-                       oncommand="close();"/>
     </content>
 
     <implementation implements="nsIMessageListener, nsIEditActionListener">

toolkit/locales/en-US/chrome/global/findbar.dtd

@@ -5,7 +5,11 @@
 <!-- LOCALIZATION NOTE : FILE This file contains the entities needed to -->
 <!-- LOCALIZATION NOTE : FILE use the Find Bar. --> 
 
+<!ENTITY next.label "Next">
+<!ENTITY next.accesskey "N">
 <!ENTITY next.tooltip "Find the next occurrence of the phrase">
+<!ENTITY previous.label "Previous">
+<!ENTITY previous.accesskey "P">
 <!ENTITY previous.tooltip "Find the previous occurrence of the phrase">
 <!ENTITY findCloseButton.tooltip "Close find bar">
 <!ENTITY highlightAll.label "Highlight All">

toolkit/themes/linux/global/findBar.css

@@ -7,6 +7,7 @@
 findbar {
   border-top: 2px solid;
   -moz-border-top-colors: ThreeDShadow ThreeDHighlight;
+  padding-bottom: 1px;
   min-width: 1px;
   transition-property: margin-bottom, opacity, visibility;
   transition-duration: 150ms, 150ms, 0s;
@@ -22,138 +23,66 @@ findbar[hidden] {
   transition-delay: 0s, 0s, 150ms;
 }
 
-findbar[noanim] {
+/* find-next button */
-  transition-duration: 0s !important;
+
-  transition-delay: 0s !important;
+.findbar-find-next > .toolbarbutton-icon {
+  -moz-appearance: button-arrow-next;
 }
 
-.findbar-container {
+/* find-previous button */
-  padding-inline-start: 8px;
+
-  padding-top: 4px;
+.findbar-find-previous > .toolbarbutton-icon {
-  padding-bottom: 4px;
+  -moz-appearance: button-arrow-previous;
 }
 
-.findbar-closebutton {
+/* highlight button */
-  -moz-appearance: none;
+
+.findbar-highlight {
+  list-style-image: url("chrome://global/skin/icons/find.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+.findbar-highlight[disabled="true"] {
+  -moz-image-region: rect(16px, 16px, 32px, 0px);
+}
+
+.find-status-icon {
+  list-style-image: none;
+  margin-top: 2px;
+  margin-bottom: 0;
+  -moz-margin-start: 12px;
+  -moz-margin-end: 0;
   width: 16px;
   height: 16px;
-  margin: 0 8px;
-}
-
-/* Search field */
-
-.findbar-textbox {
-  -moz-appearance: none;
-  border: 1px solid ThreeDShadow;
-  box-shadow: 0 0 1px 0 ThreeDShadow inset;
-  margin: 0;
-  padding: 5px;
-  width: 14em;
-}
-
-.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;
-}
-
-.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-arrows.svg#glyph-find-previous);
-  border-inline-end-width: 0;
-}
-
-.findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-next);
-}
-
-.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: .5;
-}
-
-.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-top: 0 !important;
-  margin: 0 !important;
+  margin-bottom: 0 !important;
-  margin-inline-start: 12px !important;
+  -moz-margin-start: 3px !important;
+  -moz-margin-end: 0 !important;
+  padding: 2px !important;
+}
+
+.find-status-icon[status="notfound"] {
+  list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu");
 }
 
 .find-status-icon[status="pending"] {
-  list-style-image: url("chrome://global/skin/icons/loading.png");
+  list-style-image: url("chrome://global/skin/icons/loading_16.png");
+}
+
+.findbar-textbox[status="notfound"] {
+  box-shadow: 0 0 0 1em #f66 inset;
+  color: white;
+}
+
+.findbar-textbox[flash="true"] {
+  box-shadow: 0 0 0 1em yellow inset;
+  color: black;
+}
+
+.find-status-icon[status="wrapped"] {
+  list-style-image: url("chrome://global/skin/icons/wrap.png");
 }

toolkit/themes/linux/global/jar.mn

@@ -43,6 +43,7 @@ toolkit.jar:
    skin/classic/global/icons/blacklist_favicon.png             (icons/blacklist_favicon.png)
    skin/classic/global/icons/blacklist_large.png               (icons/blacklist_large.png)
    skin/classic/global/icons/close.svg                         (icons/close.svg)
+   skin/classic/global/icons/find.png                          (icons/find.png)
    skin/classic/global/icons/resizer.png                       (icons/resizer.png)
    skin/classic/global/icons/sslWarning.png                    (icons/sslWarning.png)
 

toolkit/themes/osx/global/findBar.css

@@ -9,6 +9,7 @@ findbar {
   background: @scopeBarBackground@;
   border-top: @scopeBarSeparatorBorder@;
   min-width: 1px;
+  padding: 4px 2px;
   transition-property: margin-bottom, opacity, visibility;
   transition-duration: 150ms, 150ms, 0s;
   transition-timing-function: ease-in-out, ease-in-out, linear;
@@ -23,27 +24,16 @@ findbar[hidden] {
   transition-delay: 0s, 0s, 150ms;
 }
 
-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;
-}
-
 label.findbar-find-fast {
+  margin: 1px 3px 0 !important;
   color: @scopeBarTitleColor@;
-  margin: 0;
+  font-weight: bold;
-  margin-inline-start: 12px;
   text-shadow: @loweredShadow@;
 }
 
@@ -54,15 +44,20 @@ label.findbar-find-fast:-moz-lwtheme,
 }
 
 .findbar-closebutton {
-  margin-inline-start: 4px;
+  padding: 0;
-  padding-inline-start: 0;
+  margin: 0 4px;
-  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-closebutton:-moz-lwtheme-brighttext {
+  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
 }
 
 @media (min-resolution: 2dppx) {
+  .findbar-closebutton:-moz-lwtheme-brighttext {
+    list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
+  }
+  
   .findbar-closebutton > .toolbarbutton-icon {
     width: 16px;
   }
@@ -70,109 +65,124 @@ label.findbar-find-fast:-moz-lwtheme,
 
 .findbar-find-next,
 .findbar-find-previous,
-.findbar-highlight,
+.findbar-highlight {
-.findbar-case-sensitive,
+  margin: 0 4px;
-.findbar-entire-word {
+  padding: 1px 3px;
   -moz-appearance: none;
   border-radius: 10000px;
   border: @roundButtonBorder@;
   background: @roundButtonBackground@;
   box-shadow: @roundButtonShadow@;
   color: buttontext;
-  margin: 0;
 }
 
-@media (-moz-mac-yosemite-theme) {
+.findbar-container > toolbarbutton:-moz-focusring {
-  .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;
-}
-
-.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: @focusRingShadow@, @roundButtonShadow@;
 }
 
+.findbar-container > toolbarbutton > .toolbarbutton-text {
+  margin: 0 6px !important;
+}
+
 .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-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@;
   background: @roundButtonPressedBackground@;
   box-shadow: @roundButtonPressedShadow@;
 }
 
-.findbar-find-next:hover:active:-moz-focusring,
+.findbar-container > toolbarbutton:hover:active:-moz-focusring {
-.findbar-find-previous:hover:active:-moz-focusring {
   text-shadow: @loweredShadow@;
   background: @roundButtonPressedBackground@;
   box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
 }
 
-@media (-moz-mac-yosemite-theme) {
+.findbar-closebutton > .toolbarbutton-text {
-  .findbar-container > toolbarbutton:-moz-focusring,
+  display: none;  
-  .findbar-find-next:-moz-focusring,
+}
-  .findbar-find-previous:-moz-focusring {
+
-    box-shadow: @yosemiteFocusRingShadow@, @roundButtonShadow@;
+/* Match case checkbox */
+
+.findbar-container > checkbox {
+  list-style-image: url("chrome://global/skin/icons/checkbox.png");
+  -moz-image-region: rect(0px 16px 16px 0px);
+  -moz-appearance: none;
+  margin: 0 2px;
+  -moz-margin-start: 7px;
+}
+
+.findbar-container > checkbox:hover:active {
+  -moz-image-region: rect(0px 32px 16px 16px);
+}
+.findbar-container > checkbox[checked] {
+  -moz-image-region: rect(0px 48px 16px 32px);
+}
+.findbar-container > checkbox[checked]:hover:active {
+  -moz-image-region: rect(0px 64px 16px 48px);
+}
+
+@media (min-resolution: 2dppx) {
+  .findbar-container > checkbox {
+    list-style-image: url("chrome://global/skin/icons/checkbox@2x.png");
+    -moz-image-region: rect(0px 32px 32px 0px);
   }
 
-  .findbar-find-next:hover:active:-moz-focusring,
+  .findbar-container > checkbox:hover:active {
-  .findbar-find-previous:hover:active:-moz-focusring {
+    -moz-image-region: rect(0px 64px 32px 32px);
-    box-shadow: @yosemiteFocusRingShadow@, @roundButtonPressedShadow@;
   }
+  .findbar-container > checkbox[checked] {
+    -moz-image-region: rect(0px 96px 32px 64px);
+  }
+  .findbar-container > checkbox[checked]:hover:active {
+    -moz-image-region: rect(0px 128px 32px 96px);
+  }
+}
+
+
+
+.findbar-container > checkbox > .checkbox-check {
+  display: none;
+}
+
+.findbar-container > checkbox > .checkbox-label-box > .checkbox-label {
+  margin: 0 !important;
+  padding: 2px 0 0;
+}
+
+.findbar-container > checkbox > .checkbox-label-box > .checkbox-icon {
+  -moz-padding-start: 1px;
+  padding-bottom: 1px;
+}
+@media (min-resolution: 2dppx) {
+  .findbar-container > checkbox > .checkbox-label-box > .checkbox-icon {
+    width: 17px;
+    height: 17px;
+  }
+}
+
+.findbar-container > checkbox:-moz-focusring > .checkbox-label-box > .checkbox-icon {
+  border-radius: 4px;
+  box-shadow: @focusRingShadow@;
 }
 
 /* Search field */
 
 .findbar-textbox {
-  position: relative;
   -moz-appearance: none;
-  border: @roundButtonBorder@;
+  border-radius: 10000px;
-  border-radius: 10000px 0 0 10000px;
+  border: none;
-  box-shadow: @roundButtonShadow@;
+  box-shadow: 0 1px 1.5px rgba(0, 0, 0, .7) inset,
-  background: url("chrome://global/skin/icons/search-textbox.svg") -moz-Field no-repeat 5px center;
+              0 0 0 1px rgba(0, 0, 0, .17) inset;
-  margin: 0;
+  background: url("chrome://global/skin/icons/search-textbox.png") -moz-Field no-repeat 5px center;
-  padding: 2px 8px;
+  margin: 0 4px -1px;
-  padding-inline-start: 19px;
+  padding: 3px 8px 2px;
-}
+  -moz-padding-start: 19px;
-
-.findbar-textbox:-moz-locale-dir(rtl) {
-  border-radius: 0 10000px 10000px 0;
-}
-
-@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;
-  }
 }
 
 .findbar-textbox:not([focused="true"]):-moz-lwtheme {
@@ -180,13 +190,8 @@ label.findbar-find-fast:-moz-lwtheme,
 }
 
 .findbar-textbox[focused="true"] {
-  box-shadow: @focusRingShadow@;
+  box-shadow: @focusRingShadow@,
-}
+              0 1px 1.5px rgba(0, 0, 0, .8) inset;
-
-@media (-moz-mac-yosemite-theme) {
-  .findbar-textbox[focused="true"] {
-    box-shadow: @yosemiteFocusRingShadow@;
-  }
 }
 
 .findbar-textbox[flash="true"] {
@@ -198,48 +203,52 @@ label.findbar-find-fast:-moz-lwtheme,
   color: #FFF;
 }
 
-.findbar-textbox.minimal {
+/* find-next button */
-  border-radius: 10000px;
-  margin-inline-start: 5px;
-}
 
-/* Find previous/next buttons */
-
-.findbar-find-previous,
 .findbar-find-next {
-  margin-inline-start: 0;
+  -moz-border-end: none;
-  padding: 3px 6px 1px;
+  -moz-margin-end: 0 !important;
 }
 
-.findbar-find-previous > .toolbarbutton-icon,
+.findbar-find-next:-moz-locale-dir(ltr),
-.findbar-find-next > .toolbarbutton-icon {
+.findbar-find-previous:-moz-locale-dir(rtl) {
-  margin: 0;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
 }
 
+/* find-previous button */
+
 .findbar-find-previous {
-  border-left: none;
+  -moz-margin-start: 0 !important;
-  border-right: none;
-  margin-inline-end: 0;
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-previous);
-  border-radius: 0;
-}
-
-.findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-next);
-  padding-inline-end: 7px;
-}
-
-.findbar-find-next:-moz-locale-dir(ltr) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
 }
 
+.findbar-find-previous:-moz-locale-dir(ltr),
 .findbar-find-next:-moz-locale-dir(rtl) {
-  border-top-right-radius: 0;
+  border-top-left-radius: 0px;
-  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0px;
 }
 
-/* Status description */
+/* highlight button */
+
+.findbar-highlight {
+  -moz-margin-start: 8px;
+}
+
+.findbar-highlight > .toolbarbutton-icon {
+  width: 13px;
+  height: 8px;
+  margin: 0 4px;
+  -moz-margin-end: 0;
+  border: 1px solid #818181;
+  border-radius: 4px;
+  background-color: #F4F4F3;
+}
+
+
+.findbar-highlight[checked="true"] > .toolbarbutton-icon {
+  background-color: #FFFF00;
+  border-color: #818100;
+}
 
 .find-status-icon {
   display: none;
@@ -247,20 +256,14 @@ label.findbar-find-fast:-moz-lwtheme,
 
 .find-status-icon[status="pending"] {
   display: block;
-  list-style-image: url("chrome://global/skin/icons/loading.png");
+  list-style-image: url("chrome://global/skin/icons/loading_16.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);
+  color: #436599;
-  margin: 0 !important;
+  font-weight: bold;
-  margin-inline-start: 12px !important;
+  text-shadow: 0 1px rgba(255, 255, 255, .4);
-  text-shadow: 0 1px rgba(255,255,255,.4);
+  margin: 1px 1px 0 !important;
+  -moz-margin-start: 12px !important;
 }

toolkit/themes/windows/global/findBar.css

@@ -4,8 +4,18 @@
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+.findbar-closebutton {
+  border: none;
+  padding: 3px 5px;
+  -moz-appearance: none;
+}
+
+.findbar-closebutton:-moz-lwtheme-brighttext {
+  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
+}
+
 findbar {
-  box-shadow: 0 1px 1px rgba(0,0,0,.1) inset;
+  padding-top: 1px;
   background-image: linear-gradient(rgba(0,0,0,.15) 1px, rgba(255,255,255,.15) 1px);
   background-size: 100% 2px;
   background-repeat: no-repeat;
@@ -24,137 +34,94 @@ findbar[hidden] {
   transition-delay: 0s, 0s, 150ms;
 }
 
-findbar[noanim] {
+/* find-next button */
-  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;
-  -moz-appearance: none;
-}
-
-
-/* Search field */
-
-.findbar-textbox {
-  -moz-appearance: none;
-  border: 1px solid ThreeDShadow;
-  border-radius: 2px 0 0 2px;
-  margin: 0;
-  padding: 1px 5px;
-  width: 14em;
-}
-
-.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;
+  list-style-image: url("chrome://global/skin/icons/find.png");
-  -moz-appearance: none;
+  -moz-image-region: rect(0px 16px 16px 0px);
-  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;
 }
 
-.findbar-find-previous:not([disabled]):active,
+.findbar-find-next:hover {
-.findbar-find-next:not([disabled]):active {
+  -moz-image-region: rect(16px 16px 32px 0px);
-  background: rgba(23,50,76,.2);
-  box-shadow: 0 1px 2px rgba(10,31,51,.2) inset;
 }
 
+.findbar-find-next[disabled="true"] {
+  -moz-image-region: rect(32px 16px 48px 0px) !important;
+}
+
+/* find-previous button */
+
 .findbar-find-previous {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-previous);
+  list-style-image: url("chrome://global/skin/icons/find.png");
+  -moz-image-region: rect(0px 32px 16px 16px);
 }
 
-.findbar-find-next {
+.findbar-find-previous:hover {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-next);
+  -moz-image-region: rect(16px 32px 32px 16px);
 }
 
-.findbar-find-previous,
+.findbar-find-previous[disabled="true"] {
-.findbar-find-previous:not([disabled]):active {
+  -moz-image-region: rect(32px 32px 48px 16px) !important;
-  border-right: none;
-  border-left: none;
 }
 
-.findbar-find-previous > .toolbarbutton-icon,
+/* highlight button */
-.findbar-find-next > .toolbarbutton-icon {
+
-  margin: 0;
+.findbar-highlight {
+  list-style-image: url("chrome://global/skin/icons/find.png");
+  -moz-image-region: rect(0px 48px 16px 32px);
 }
 
-.findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
+.findbar-highlight:hover {
-.findbar-find-next[disabled="true"] > .toolbarbutton-icon {
+  -moz-image-region: rect(16px 48px 32px 32px);
-  opacity: .5;
 }
 
-.findbar-find-next:-moz-locale-dir(ltr) {
+.findbar-highlight[disabled="true"] {
-  border-top-right-radius: 2px;
+  -moz-image-region: rect(32px 48px 48px 32px) !important;
-  border-bottom-right-radius: 2px;
 }
 
-.findbar-find-next:-moz-locale-dir(rtl) {
+.findbar-highlight:active, .findbar-highlight[checked="true"] {
-  border-top-left-radius: 2px;
+  -moz-image-region: rect(48px 48px 64px 32px);
-  border-bottom-left-radius: 2px;
 }
 
-.findbar-highlight,
+.findbar-highlight[checked="true"]:hover {
-.findbar-case-sensitive,
+  -moz-image-region: rect(64px 48px 80px 32px);
-.findbar-entire-word {
-  margin-inline-start: 5px;
 }
 
-.findbar-highlight > .toolbarbutton-icon,
+.find-status-icon {
-.findbar-case-sensitive > .toolbarbutton-icon,
+  list-style-image: none;
-.findbar-entire-word > .toolbarbutton-icon {
+  margin-top: 2px;
-  display: none;
+  margin-bottom: 0px;
+  -moz-margin-start: 12px;
+  -moz-margin-end: 0px;
+  width: 16px;
+  height: 16px;
 }
 
 .findbar-find-status,
 .found-matches {
-  color: GrayText;
   margin: 0 !important;
-  margin-inline-start: 12px !important;
+  -moz-margin-start: 3px !important;
+  padding: 2px !important;
+}
+
+.find-status-icon[status="notfound"] {
+  list-style-image: url("chrome://global/skin/icons/information-16.png");
+}
+
+.findbar-textbox[status="notfound"] {
+  box-shadow: 0 0 0 1em #f66 inset;
+  color: white;
+}
+
+.findbar-textbox[flash="true"] {
+  box-shadow: 0 0 0 1em yellow inset;
+  color: black;
+}
+
+.find-status-icon[status="wrapped"] {
+  list-style-image: url("chrome://global/skin/icons/wrap.png");
 }
 
 .find-status-icon[status="pending"] {
-  list-style-image: url("chrome://global/skin/icons/loading.png");
+  list-style-image: url("chrome://global/skin/icons/loading_16.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .find-status-icon[status="pending"] {
-    width: 16px;
-    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
-  }
 }

toolkit/themes/windows/global/jar.mn

@@ -48,6 +48,7 @@ toolkit.jar:
   skin/classic/global/icons/close-XPVista7@2x.png          (icons/close-XPVista7@2x.png)
   skin/classic/global/icons/close-inverted-XPVista7.png    (icons/close-inverted-XPVista7.png)
   skin/classic/global/icons/close-inverted-XPVista7@2x.png (icons/close-inverted-XPVista7@2x.png)
+  skin/classic/global/icons/find.png                       (icons/find.png)
   skin/classic/global/icons/resizer.png                    (icons/resizer.png)
   skin/classic/global/icons/sslWarning.png                 (icons/sslWarning.png)
 * skin/classic/global/in-content/common.css                (in-content/common.css)