Bug 1374107 - Convert chrome://global/skin/in-content/check.svg and its consumers to use SVG image context paint. r=dao

MozReview-Commit-ID: 5XgP61CLpME

browser/themes/shared/aboutSessionRestore.css

@@ -24,10 +24,14 @@ treechildren::-moz-tree-image(container, noicon) {
 }
 
 treechildren::-moz-tree-image(checked) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
+  list-style-image: url("chrome://global/skin/in-content/check.svg");
+  -moz-context-properties: fill, stroke;
+  fill: #2292d0;
+  stroke: none;
 }
 treechildren::-moz-tree-image(checked, selected) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
+  fill: white;
+  stroke: #0095dd;
 }
 
 treechildren::-moz-tree-image(partial) {

browser/themes/shared/aboutWelcomeBack.css

@@ -33,10 +33,14 @@ treechildren::-moz-tree-image(container, noicon) {
 }
 
 treechildren::-moz-tree-image(checked) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
+  list-style-image: url("chrome://global/skin/in-content/check.svg");
+  -moz-context-properties: fill, stroke;
+  fill: #2292d0;
+  stroke: none;
 }
 treechildren::-moz-tree-image(checked, selected) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
+  fill: white;
+  stroke: #0095dd;
 }
 
 treechildren::-moz-tree-image(partial) {

browser/themes/shared/incontentprefs-old/preferences.inc.css

@@ -24,14 +24,18 @@ treecol {
 
 #engineList treechildren::-moz-tree-image(engineShown, checked),
 #blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
+  list-style-image: url("chrome://global/skin/in-content/check.svg");
+  -moz-context-properties: fill, stroke;
+  fill: #2292d0;
+  stroke: none;
   width: 21px;
   height: 21px;
 }
 
 #engineList treechildren::-moz-tree-image(engineShown, checked, selected),
 #blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
+  fill: white;
+  stroke: #0095dd;
 }
 
 #engineList treechildren::-moz-tree-row,

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -24,14 +24,18 @@ treecol {
 
 #engineList treechildren::-moz-tree-image(engineShown, checked),
 #blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
+  list-style-image: url("chrome://global/skin/in-content/check.svg");
+  -moz-context-properties: fill, stroke;
+  fill: #2292d0;
+  stroke: none;
   width: 21px;
   height: 21px;
 }
 
 #engineList treechildren::-moz-tree-image(engineShown, checked, selected),
 #blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
+  fill: white;
+  stroke: #0095dd;
 }
 
 #engineList treechildren::-moz-tree-row,

toolkit/themes/linux/global/in-content/common.css

@@ -56,7 +56,8 @@ xul|*.checkbox-check {
 }
 
 xul|*.checkbox-check[checked] {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check-native");
+  fill: -moz-dialogText;
+  stroke: none;
   background-color: -moz-dialog;
 }
 

toolkit/themes/shared/in-content/check.svg

@@ -1,28 +1,8 @@
-<?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" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 21 21">
-  <style>
-    use:not(:target) {
-      display: none;
-    }
-    use {
-      fill: #2292d0;
-    }
-    use[id$="-inverted"] {
-      fill: #fff;
-      stroke: #0095dd;
-      stroke-width: 0.5;
-    }
-    use[id$="-native"] {
-      fill: -moz-dialogText;
-    }
-  </style>
-  <defs>
-    <path id="check-shape" d="M 9.39,16.5 16.28,6 14.77,4.5 9.37,12.7 6.28,9.2 4.7,10.7 z"/>
-  </defs>
-  <use id="check" xlink:href="#check-shape"/>
-  <use id="check-inverted" xlink:href="#check-shape"/>
-  <use id="check-native" xlink:href="#check-shape"/>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="21" height="21" viewBox="0 0 21 21">
+  <path fill="context-fill" stroke="context-stroke" stroke-width="0.5" d="M 9.39,16.5 16.28,6 14.77,4.5 9.37,12.7 6.28,9.2 4.7,10.7 z"/>
 </svg>
+

toolkit/themes/shared/in-content/common.inc.css

@@ -566,11 +566,17 @@ html|input[type="checkbox"]:not(:disabled):hover {
 }
 
 xul|*.checkbox-check[checked] {
-  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
+  list-style-image: url("chrome://global/skin/in-content/check.svg");
+  -moz-context-properties: fill, stroke;
+  fill: #2292d0;
+  stroke: none;
 }
 
 html|input[type="checkbox"]:checked {
-  background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8));
+  background-image: url("chrome://global/skin/in-content/check.svg"), linear-gradient(#fff, rgba(255,255,255,0.8));
+  -moz-context-properties: fill, stroke;
+  fill: #2292d0;
+  stroke: none;
 }
 
 xul|checkbox[disabled="true"] > xul|*.checkbox-check,

toolkit/themes/windows/global/in-content/common.css

@@ -30,7 +30,8 @@ xul|checkbox {
   }
 
   xul|*.checkbox-check[checked] {
-    list-style-image: url("chrome://global/skin/in-content/check.svg#check-native");
+    fill: -moz-dialogText;
+    stroke: none;
     background-color: -moz-dialog;
   }
 }