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-textbox[status="notFound"]
+{
+  /* We cannot change background color because of -moz-appearance but a red */
+  /* shadow works. */
+  filter: drop-shadow(0 0 4px red);

[Thomas Greiner, 2016/10/12 14:03:14]

Detail: This looks quite strange due to the border color of the textbox element
when it is focused.

For reference, below are the styles from Firefox' stylesheet for invalid form
input fields. I'd suggest applying those instead.

/**
 * Set default style for invalid elements.
 */
:not(output):-moz-ui-invalid {
  box-shadow: 0 0 1.5px 1px red;
}

:not(output):-moz-ui-invalid:-moz-focusring {
  box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
}

output:-moz-ui-invalid {
  color: red;
}

See resource://gre-resources/forms.css

[Wladimir Palant, 2016/10/12 15:22:00]

I considered just marking the field as invalid instead but that looks *really*
weird - only the actual input field can be marked that way, and it's way smaller
than the <textbox> element.

box-shadow doesn't seem to look too different but fine with me. Not sure whether
a different shadow for focused elements is really a good idea...

Changing text color without being able to control the background color is
definitely a bad idea.

[Thomas Greiner, 2016/10/12 17:18:10]

It's a pity that we can't just mark it as invalid, agreed. Alternatively, we
could use the `<html:input>` element if we want to have more control over its
design since that's what Firefox uses for the search bars in about:config and
about:preferences#applications.

But the way it is now should already be sufficient.

[Wladimir Palant, 2016/10/12 17:53:30]

Or we simply set `-moz-appearance: none` or drop `type="search"` which will also
give us full control over the design, but then we have to reimplement all the
styles and behavior. Mozilla doesn't mind doing that for the findbar, but for us
that would clearly be too much effort (particularly getting somewhat native
look&feel on all platforms).

+}
+
+#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;

[Thomas Greiner, 2016/10/12 14:03:14]

Sounds like it behaves the same way as `flex="1"` so I wonder why are we using
this instead?

[Wladimir Palant, 2016/10/12 15:22:00]

This is merely overriding display:none that hidden="true" normally applies, but
this is no longer necessary now.

+  visibility: hidden;
+}