Bug 1466826 - Use SVG context paint for the Windows tree twisties. r=dao

browser/themes/windows/syncedtabs/sidebar.css

@@ -86,33 +86,25 @@
 }
 
 .item.client .item-twisty-container {
-  background-image: url("chrome://global/skin/tree/twisty.svg#open");
+  background-image: url("chrome://global/skin/tree/twisty-expanded.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: #636363;
+  fill-opacity: 1;
 }
 
 .item.client.closed .item-twisty-container {
-  background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
-}
-
-.item.client .item-twisty-container:hover {
-  background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
-}
-
-.item.client.closed .item-twisty-container:hover {
-  background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
-}
-
-.item.client .item-twisty-container:dir(rtl) {
-  background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
+  background-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
+  fill: #b6b6b6;
 }
 
 .item.client.closed .item-twisty-container:dir(rtl) {
-  background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
+  background-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
 }
 
-.item.client .item-twisty-container:hover:dir(rtl) {
-  background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
+.item.client .item-twisty-container:hover {
+  fill: #4ed0f9;
 }
 
-.item.client.closed .item-twisty-container:hover:dir(rtl) {
-  background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");
+.item.client.selected .item-twisty-container:not(:hover) {
+  fill: currentColor;
 }

toolkit/themes/windows/global/button.css

@@ -108,10 +108,13 @@ button.plain {
 button[type="disclosure"] {
   margin: 0;
   -moz-appearance: none;
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd");
+  list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 1;
   min-width: 0;
 }
 
 button[type="disclosure"][open="true"] {
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#open");
+  list-style-image: url("chrome://global/skin/tree/twisty-expanded.svg");
 }

toolkit/themes/windows/global/jar.mn

@@ -56,14 +56,6 @@ toolkit.jar:
   skin/classic/global/icons/windowControls.png             (icons/windowControls.png)
 * skin/classic/global/in-content/common.css                (in-content/common.css)
 * skin/classic/global/in-content/info-pages.css            (in-content/info-pages.css)
-  skin/classic/global/tree/twisty.svg                      (tree/twisty.svg)
-  skin/classic/global/tree/twisty-preWin10.svg             (tree/twisty-preWin10.svg)
-
-% override chrome://global/skin/tree/twisty.svg#clsd              chrome://global/skin/tree/twisty-preWin10.svg#clsd           osversion<=6.3
-% override chrome://global/skin/tree/twisty.svg#clsd-rtl          chrome://global/skin/tree/twisty-preWin10.svg#clsd-rtl       osversion<=6.3
-% override chrome://global/skin/tree/twisty.svg#clsd-hover        chrome://global/skin/tree/twisty-preWin10.svg#clsd-hover     osversion<=6.3
-% override chrome://global/skin/tree/twisty.svg#clsd-hover-rtl    chrome://global/skin/tree/twisty-preWin10.svg#clsd-hover-rtl osversion<=6.3
-% override chrome://global/skin/tree/twisty.svg#open              chrome://global/skin/tree/twisty-preWin10.svg#open           osversion<=6.3
-% override chrome://global/skin/tree/twisty.svg#open-rtl          chrome://global/skin/tree/twisty-preWin10.svg#open-rtl       osversion<=6.3
-% override chrome://global/skin/tree/twisty.svg#open-hover        chrome://global/skin/tree/twisty-preWin10.svg#open-hover     osversion<=6.3
-% override chrome://global/skin/tree/twisty.svg#open-hover-rtl    chrome://global/skin/tree/twisty-preWin10.svg#open-hover-rtl osversion<=6.3
+  skin/classic/global/tree/twisty-collapsed.svg            (tree/twisty-collapsed.svg)
+  skin/classic/global/tree/twisty-collapsed-rtl.svg        (tree/twisty-collapsed-rtl.svg)
+  skin/classic/global/tree/twisty-expanded.svg             (tree/twisty-expanded.svg)

toolkit/themes/windows/global/tree.css

@@ -265,35 +265,23 @@ treechildren::-moz-tree-twisty {
   padding-inline-end: 1px;
   padding-top: 1px;
   width: 9px; /* The image's width is 9 pixels */
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd");
+  list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: #b6b6b6;
+  fill-opacity: 1;
 }
 
-treechildren::-moz-tree-twisty(open) {
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#open");
-}
-
-treechildren::-moz-tree-twisty(hover) {
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
-}
-
-treechildren::-moz-tree-twisty(hover, open) {
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
+treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(close) {
+  list-style-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
 }
 
-treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty {
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
-}
-
-treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(open) {
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
-}
-
-treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover) {
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");
+treechildren::-moz-tree-twisty(open) {
+  list-style-image: url("chrome://global/skin/tree/twisty-expanded.svg");
+  fill: #636363;
 }
 
-treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover, open) {
-  list-style-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
+treechildren::-moz-tree-twisty(hover) {
+  fill: #4ed0f9;
 }
 
 treechildren::-moz-tree-indentation {