Bug 1317600 - Make date / time picker spinner arrow buttons no longer depend on find bar resources; r=dao

toolkit/themes/shared/icons/spinner-arrows.svg

@@ -0,0 +1,13 @@
+<?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="10" height="6" viewBox="0 0 10 6">
+  <style>
+    path:not(:target) {
+      display: none;
+    }
+  </style>
+  <path id="down" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
+  <path id="up" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
+</svg>

toolkit/themes/shared/jar.inc.mn

@@ -28,6 +28,7 @@ toolkit.jar:
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
+  skin/classic/global/icons/spinner-arrows.svg             (../../shared/icons/spinner-arrows.svg)
   skin/classic/global/icons/menubutton-dropmarker.svg      (../../shared/icons/menubutton-dropmarker.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)

toolkit/themes/shared/timepicker.css

@@ -55,24 +55,25 @@ body {
   -moz-appearance: none;
   border: none;
   background: none;
-  background-color: var(--button-font-color);
   height: var(--spinner-button-height);
+  filter: url("chrome://global/skin/filters.svg#fill");
+  fill: var(--button-font-color);
 }
 
 .spinner-container > button:hover {
-  background-color: var(--button-font-color-hover);
+  fill: var(--button-font-color-hover);
 }
 
 .spinner-container > button.active {
-  background-color: var(--button-font-color-active);
+  fill: var(--button-font-color-active);
 }
 
 .spinner-container > button.up {
-  mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
 }
 
 .spinner-container > button.down {
-  mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
 }
 
 .spinner-container.hide-buttons > button {