Bug 1455922 - Adjust findbar style to work better on dark themes. r=dao

MozReview-Commit-ID: IGIFlJUV1V8

--HG--
extra : rebase_source : e3e7f79aac57404d8136625db9da30bbbc960158

toolkit/themes/osx/global/findBar.css

@@ -74,6 +74,9 @@ label.findbar-find-fast:-moz-lwtheme,
 
 .findbar-textbox {
   border: @roundButtonBorderWidth@ @roundButtonBorderStyle@ var(--lwt-toolbar-field-border-color, @roundButtonBorderColor@);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
   background-image: url("chrome://global/skin/icons/search-textbox.svg");
   background-repeat: no-repeat;
   background-position: 5px center;

toolkit/themes/osx/global/icons/search-textbox.svg

@@ -1,7 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
-  <path fill="#939393" fill-rule="evenodd" d="M11.354,10.646l-0.707.707L7.295,8A4.483,4.483,0,1,1,9,4.5,4.458,4.458,0,0,1,8,7.295ZM4.5,1A3.5,3.5,0,1,0,8,4.5,3.5,3.5,0,0,0,4.5,1Z"/>
-</svg>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.354,10.646l-0.707.707L7.295,8A4.483,4.483,0,1,1,9,4.5,4.458,4.458,0,0,1,8,7.295ZM4.5,1A3.5,3.5,0,1,0,8,4.5,3.5,3.5,0,0,0,4.5,1Z"/>
+</svg>

toolkit/themes/shared/findBar.inc.css

@@ -74,13 +74,13 @@ findbar[noanim] {
 }
 
 .findbar-textbox[status="notfound"] {
-  background-color: #f66;
-  color: white;
+  background-color: rgba(255,0,57,.3);
+  color: inherit;
 }
 
 .findbar-textbox[flash="true"] {
-  background-color: yellow;
-  color: black;
+  background-color: rgba(255,233,0,.3);
+  color: inherit;
 }
 
 .findbar-textbox.minimal {
@@ -91,7 +91,8 @@ findbar[noanim] {
 .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));
+  background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.1));
+  background-clip: padding-box;
   border: 1px solid ThreeDShadow;
   padding: 2px 5px;
   line-height: 1em;