Issue 4510 - Filter preferences: replace the built-in findbar widget by our own look-alike

chrome/skin/filters.css

Index: chrome/skin/filters.css
===================================================================
--- a/chrome/skin/filters.css
+++ b/chrome/skin/filters.css
@@ -216,8 +216,51 @@ treechildren::-moz-tree-image(col-slow, 
 {
   list-style-image: url(slow.png);
 }
 
 .findbar-highlight
 {
   display: none;
 }
+
+/* Findbar */
+
+#findbar-closebutton
+{
+  list-style-image: url(close.png);
+  -moz-image-region: rect(0px, 14px, 14px, 0px);
+}
+
+#findbar-closebutton:hover
+{
+  -moz-image-region: rect(0px, 28px, 14px, 14px);
+}
+
+#findbar-closebutton:active
+{
+  -moz-image-region: rect(0px, 42px, 14px, 28px);
+}
+
+#findbar-textbox[status="notFound"]
+{
+  /* We cannot change background color because of -moz-appearance but a red */
+  /* shadow works. */
+  filter: drop-shadow(0 0 4px red);
+}
+
+#findbar[data-os="darwin"] > #findbar-case-sensitive[checked="true"]
+{
+  /* Firefox on Mac doesn't indicate checked buttons, do it ourselves */
+  filter: brightness(70%);
+}
+
+.findbar-status
+{
+  font-size: 80%;
+}
+
+.findbar-status[hidden="true"]
+{
+  /* Make sure these elements always occupy the necessary space */
+  display: -moz-box;
+  visibility: hidden;
+}