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

chrome/skin/filters.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 199 matching lines @@
 {
   list-style-image: url(checkbox.png);
   -moz-image-region: rect(0px 13px 13px 0px);
 }
 
 treechildren::-moz-tree-image(col-slow, slow-true)
 {
   list-style-image: url(slow.png);
 }
 
-.findbar-highlight
+/* Findbar */
+
+#findbar-closebutton
 {
-  display: none;
+  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[data-status="notFound"] > #findbar-textbox
+{
+  /* We cannot change background color because of -moz-appearance but a red */
+  /* shadow works. */
+  box-shadow: 0 0 1.5px 1px red;
+}
+
+#findbar[data-status="notFound"] > #findbar-textbox[focused="true"]
+{
+  box-shadow: 0 0 2px 2px rgba(255, 0, 0, 0.4);
+}
+
+#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:not([data-status="wrappedStart"]) #findbar-status-wrappedStart,
+#findbar:not([data-status="wrappedEnd"]) #findbar-status-wrappedEnd,
+#findbar:not([data-status="notFound"]) #findbar-status-notFound
+{
+  visibility: hidden;
+}