Restyle the findbar

3 files changed, 41 insertions, 111 deletions

diff --git a/toolkit/themes/linux/global/findBar.css b/toolkit/themes/linux/global/findBar.css
index f04911402..e3e2ad086 100644
--- a/toolkit/themes/linux/global/findBar.css
+++ b/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] {
-  transition-duration: 0s !important;
-  transition-delay: 0s !important;
-}
-
-.findbar-container {
-  padding-inline-start: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.findbar-closebutton {
-  -moz-appearance: none;
-  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;
-}
+/* find-next button */
 
-.findbar-find-previous:focus,
-.findbar-find-next:focus {
-  border-color: Highlight;
-  box-shadow: 0 0 1px 0 Highlight inset;
+.findbar-find-next > .toolbarbutton-icon {
+  -moz-appearance: button-arrow-next;
 }
 
-.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;
-}
+/* find-previous button */
 
-.findbar-find-previous {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-previous);
-  border-inline-end-width: 0;
+.findbar-find-previous > .toolbarbutton-icon {
+  -moz-appearance: button-arrow-previous;
 }
 
-.findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#glyph-find-next);
-}
+/* highlight button */
 
-.findbar-find-previous > .toolbarbutton-icon,
-.findbar-find-next > .toolbarbutton-icon {
-  margin: 0;
+.findbar-highlight {
+  list-style-image: url("chrome://global/skin/icons/find.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-.findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
-.findbar-find-next[disabled="true"] > .toolbarbutton-icon {
-  opacity: .5;
+.findbar-highlight[disabled="true"] {
+  -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
 
-.findbar-find-next:-moz-locale-dir(ltr) {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
+.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;
 }
 
-.findbar-find-next:-moz-locale-dir(rtl) {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
+.findbar-find-status,
+.findbar-matches {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  -moz-margin-start: 3px !important;
+  -moz-margin-end: 0 !important;
+  padding: 2px !important;
 }
 
-.findbar-find-previous:focus + .findbar-find-next {
-  border-inline-start-width: 0;
+.find-status-icon[status="notfound"] {
+  list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu");
 }
 
-.findbar-find-previous:focus {
-  border-inline-end-width: 1px;
+.find-status-icon[status="pending"] {
+  list-style-image: url("chrome://global/skin/icons/loading_16.png");
 }
 
-.findbar-highlight,
-.findbar-case-sensitive,
-.findbar-entire-word {
-  margin-inline-start: 5px;
+.findbar-textbox[status="notfound"] {
+  box-shadow: 0 0 0 1em #f66 inset;
+  color: white;
 }
 
-.findbar-find-status,
-.findbar-matches {
-  color: GrayText;
-  margin: 0 !important;
-  margin-inline-start: 12px !important;
+.findbar-textbox[flash="true"] {
+  box-shadow: 0 0 0 1em yellow inset;
+  color: black;
 }
 
-.find-status-icon[status="pending"] {
-  list-style-image: url("chrome://global/skin/icons/loading.png");
+.find-status-icon[status="wrapped"] {
+  list-style-image: url("chrome://global/skin/icons/wrap.png");
 }
diff --git a/toolkit/themes/linux/global/icons/find.png b/toolkit/themes/linux/global/icons/find.png
new file mode 100644
index 000000000..cceed403e
--- /dev/null
+++ b/toolkit/themes/linux/global/icons/find.png
diff --git a/toolkit/themes/linux/global/jar.mn b/toolkit/themes/linux/global/jar.mn
index 5bde219fd..c9b579112 100644
--- a/toolkit/themes/linux/global/jar.mn
+++ b/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)