Bug 1359631 - Convert Toolkit's narrate/forward.svg to use context paint to improve performance. r=dao draft
authorJonathan Watt <jwatt@jwatt.org>
Tue, 25 Apr 2017 23:43:39 +0100
changeset 568317 7d533e0a1229e5b8d6ccb0105058fc20b91bd673
parent 568316 35ef9e936941ee2179d235775e6150575756973b
child 568318 8bfec190b221f41ca9fe71ec6b28bd9632279658
push id55822
push userjwatt@jwatt.org
push dateTue, 25 Apr 2017 22:53:15 +0000
reviewersdao
bugs1359631
milestone55.0a1
Bug 1359631 - Convert Toolkit's narrate/forward.svg to use context paint to improve performance. r=dao MozReview-Commit-ID: GG7unJwzRyF
toolkit/themes/shared/narrate/forward.svg
toolkit/themes/shared/narrateControls.css
--- a/toolkit/themes/shared/narrate/forward.svg
+++ b/toolkit/themes/shared/narrate/forward.svg
@@ -1,15 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      use:not(:target) {
-        display: none;
-      }
-      #disabled {
-        opacity: 0.5;
-      }
-    </style>
-    <path id="shape" d="m 19,0 c 0.554,0 1,0.446 1,1 l 0,22 c 0,0.554 -0.446,1 -1,1 l -2,0 c -0.554,0 -1,-0.446 -1,-1 l 0,-10.595703 c -0.04108,0.105 -0.109944,0.205828 -0.203125,0.298828 L 4.703125,23.775391 c -0.198384,0.197 -0.364738,0.264171 -0.5,0.201171 C 4.067863,23.915564 4,23.748516 4,23.478516 L 4,0.52148438 c 0,-0.26900001 0.06786,-0.43700001 0.203125,-0.5 0.135262,-0.062 0.301616,0.0070781 0.5,0.20507812 l 11.09375,11.0722655 c 0.09318,0.083 0.162045,0.182875 0.203125,0.296875 L 16,1 c 0,-0.554 0.446,-1 1,-1 l 2,0 z" fill="gray"/>
-  </defs>
-  <use id="enabled" xlink:href="#shape"/>
-  <use id="disabled" xlink:href="#shape"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="context-fill" d="m 19,0 c 0.554,0 1,0.446 1,1 l 0,22 c 0,0.554 -0.446,1 -1,1 l -2,0 c -0.554,0 -1,-0.446 -1,-1 l 0,-10.595703 c -0.04108,0.105 -0.109944,0.205828 -0.203125,0.298828 L 4.703125,23.775391 c -0.198384,0.197 -0.364738,0.264171 -0.5,0.201171 C 4.067863,23.915564 4,23.748516 4,23.478516 L 4,0.52148438 c 0,-0.26900001 0.06786,-0.43700001 0.203125,-0.5 0.135262,-0.062 0.301616,0.0070781 0.5,0.20507812 l 11.09375,11.0722655 c 0.09318,0.083 0.162045,0.182875 0.203125,0.296875 L 16,1 c 0,-0.554 0.446,-1 1,-1 l 2,0 z"/>
 </svg>
+
--- a/toolkit/themes/shared/narrateControls.css
+++ b/toolkit/themes/shared/narrateControls.css
@@ -47,25 +47,27 @@
   border-top-left-radius: 3px;
   background-image: url("chrome://global/skin/narrate/back.svg");
   /* uncomment after bug 1350010 lands: context-properties: fill; */
   fill: rgb(128 128 128); /* context-fill for image */
 }
 
 #narrate-skip-next {
   border-top-right-radius: 3px;
-  background-image: url("chrome://global/skin/narrate/forward.svg#enabled");
+  background-image: url("chrome://global/skin/narrate/forward.svg");
+  /* uncomment after bug 1350010 lands: context-properties: fill; */
+  fill: rgb(128 128 128); /* context-fill for image */
 }
 
 #narrate-skip-previous:disabled {
   fill: rgb(128 128 128 / 50%); /* context-fill for image */
 }
 
 #narrate-skip-next:disabled {
-  background-image: url("chrome://global/skin/narrate/forward.svg#disabled");
+  fill: rgb(128 128 128 / 50%); /* context-fill for image */
 }
 
 #narrate-start-stop {
   background-image: url("chrome://global/skin/narrate/start.svg");
 }
 
 #narrate-dropdown.speaking #narrate-start-stop {
   background-image: url("chrome://global/skin/narrate/stop.svg");