Bug 1400266 - Use SVG icons for the twisties on Linux. r=dao

browser/themes/linux/syncedtabs/sidebar.css

@@ -51,12 +51,25 @@ html {
   cursor: pointer;
 }
 
+.item-twisty-container {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  min-width: 9px; /* The image's width is 9 pixels */
+  height: 9px;
+  margin: auto;
+}
+
 .item.client .item-twisty-container {
-  -moz-appearance: treetwistyopen;
-  margin-top: 3px;
-  margin-left: 2px;
+  background-image: url("chrome://global/skin/tree/twisty-expanded.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .item.client.closed .item-twisty-container {
-  -moz-appearance: treetwisty;
+  background-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
+}
+
+.item.client.closed .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
 }

browser/themes/windows/syncedtabs/sidebar.css

@@ -87,9 +87,8 @@
 
 .item.client .item-twisty-container {
   background-image: url("chrome://global/skin/tree/twisty-expanded.svg");
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
   fill: #636363;
-  fill-opacity: 1;
 }
 
 .item.client.closed .item-twisty-container {

toolkit/themes/linux/global/button.css

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

toolkit/themes/linux/global/jar.mn

@@ -44,5 +44,6 @@ toolkit.jar:
 
 *  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-clsd.png                    (tree/twisty-clsd.png)
-   skin/classic/global/tree/twisty-open.png                    (tree/twisty-open.png)
+   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/linux/global/tree.css

@@ -20,7 +20,7 @@ tree {
 /* ::::: tree focusring ::::: */
 
 .focusring > .tree-stack > .tree-rows > .tree-bodybox {
-  border: 1px solid transparent;  
+  border: 1px solid transparent;
 }
 
 .focusring:focus > .tree-stack > .tree-rows > .tree-bodybox {
@@ -163,17 +163,24 @@ treechildren::-moz-tree-column(insertafter) {
 /* ::::: twisty :::::  */
 
 treechildren::-moz-tree-twisty {
-  -moz-appearance: treetwisty;
   padding-inline-end: 4px;
   padding-top: 1px;
   width: 9px; /* The image's width is 9 pixels */
-  list-style-image: url("chrome://global/skin/tree/twisty-clsd.png");
+  list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(close) {
+  list-style-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
 }
 
 treechildren::-moz-tree-twisty(open) {
-  -moz-appearance: treetwistyopen;
-  width: 9px; /* The image's width is 9 pixels */
-  list-style-image: url("chrome://global/skin/tree/twisty-open.png");
+  list-style-image: url("chrome://global/skin/tree/twisty-expanded.svg");
+}
+
+treechildren::-moz-tree-twisty(selected) {
+  fill: -moz-cellhighlighttext;
 }
 
 treechildren::-moz-tree-indentation {

toolkit/themes/linux/global/tree/twisty-collapsed-rtl.svg

@@ -0,0 +1,6 @@
+<!-- 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 width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
+  <path d="m 6.5,0.5 -4,4 4,4"/>
+</svg>

toolkit/themes/linux/global/tree/twisty-collapsed.svg

@@ -0,0 +1,6 @@
+<!-- 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 width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
+  <path d="m 2.5,0.5 4,4 -4,4"/>
+</svg>

toolkit/themes/linux/global/tree/twisty-expanded.svg

@@ -0,0 +1,6 @@
+<!-- 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 width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
+  <path d="m 8.5,2.5 -4,4 -4,-4"/>
+</svg>

toolkit/themes/windows/global/button.css

@@ -109,9 +109,8 @@ button[type="disclosure"] {
   margin: 0;
   -moz-appearance: none;
   list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
   fill: currentColor;
-  fill-opacity: 1;
   min-width: 0;
 }
 

toolkit/themes/windows/global/tree.css

@@ -198,9 +198,8 @@ treechildren::-moz-tree-twisty {
   padding-top: 1px;
   width: 9px; /* The image's width is 9 pixels */
   list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill;
   fill: #b6b6b6;
-  fill-opacity: 1;
 }
 
 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(close) {

toolkit/themes/windows/global/tree/twisty-collapsed-rtl.svg

@@ -1,6 +1,6 @@
 <!-- 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 width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-width="1.6" fill="none">
-    <path d="m 6.5,0.5 -4,4 4,4"/>
+<svg width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
+  <path d="m 6.5,0.5 -4,4 4,4"/>
 </svg>

toolkit/themes/windows/global/tree/twisty-collapsed.svg

@@ -1,6 +1,6 @@
 <!-- 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 width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-width="1.6" fill="none">
-    <path d="m 2.5,0.5 4,4 -4,4"/>
+<svg width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
+  <path d="m 2.5,0.5 4,4 -4,4"/>
 </svg>

toolkit/themes/windows/global/tree/twisty-expanded.svg

@@ -1,6 +1,6 @@
 <!-- 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 width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-width="1.6" fill="none">
-    <path d="m 8.5,2.5 -4,4 -4,-4"/>
+<svg width="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
+  <path d="m 8.5,2.5 -4,4 -4,-4"/>
 </svg>