Bug 1359631 - Convert Toolkit's reader/RM-Close-24x24.svg to use context paint to improve performance. r=dao draft
authorJonathan Watt <jwatt@jwatt.org>
Fri, 28 Apr 2017 19:30:36 +0100
changeset 570311 cc417c10e7e3d0344f79eb7eeb6d5b13089dfbbc
parent 570310 3e6296b52916ee0af589d367679435ff40f76508
child 626460 24ad23165a6595b04b742352f6b737dc199bf84b
push id56454
push userjwatt@jwatt.org
push dateFri, 28 Apr 2017 18:30:57 +0000
reviewersdao
bugs1359631
milestone55.0a1
Bug 1359631 - Convert Toolkit's reader/RM-Close-24x24.svg to use context paint to improve performance. r=dao MozReview-Commit-ID: B77X0tsQEgu
toolkit/themes/shared/aboutReaderControls.css
toolkit/themes/shared/reader/RM-Close-24x24.svg
--- a/toolkit/themes/shared/aboutReaderControls.css
+++ b/toolkit/themes/shared/aboutReaderControls.css
@@ -330,30 +330,31 @@
   background-size: 18px 18px;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 /*======= Toolbar icons =======*/
 
 .close-button {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
+  -moz-context-properties: fill;
+  fill: #808080;
   height: 68px;
   background-position: center 8px;
 }
 
 .close-button:hover {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
+  fill: #fff;
   background-color: #d94141;
   border-bottom: 1px solid #d94141;
   border-right: 1px solid #d94141;
 }
 
 .close-button:hover:active {
-  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
   background-color: #AE2325;
   border-bottom: 1px solid #AE2325;
   border-right: 1px solid #AE2325;
 }
 
 .style-button {
   background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
 }
--- a/toolkit/themes/shared/reader/RM-Close-24x24.svg
+++ b/toolkit/themes/shared/reader/RM-Close-24x24.svg
@@ -1,23 +1,7 @@
-<?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="24" height="24" viewBox="0 0 24 24">
-  <defs>
-    <style>
-      use:not(:target) {
-        display: none;
-      }
-      #close {
-        fill: #808080;
-      }
-      #close-hover {
-        fill: #fff;
-      }
-    </style>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="context-fill" d="M19,22H6a2,2,0,0,1-2-2V18l2,2H18a1,1,0,0,0,1-1V5a1,1,0,0,0-1-1H6L4,6V4A2,2,0,0,1,6,2H19a2,2,0,0,1,2,2V20A2,2,0,0,1,19,22Zm-6-9H5.4l4.2,4.154L8.186,18.631,1.567,12.017,8.021,5.411,9.5,6.95,5.424,11H13v2Z"/>
+</svg>
 
-    <path id="close-shape" d="M19,22H6a2,2,0,0,1-2-2V18l2,2H18a1,1,0,0,0,1-1V5a1,1,0,0,0-1-1H6L4,6V4A2,2,0,0,1,6,2H19a2,2,0,0,1,2,2V20A2,2,0,0,1,19,22Zm-6-9H5.4l4.2,4.154L8.186,18.631,1.567,12.017,8.021,5.411,9.5,6.95,5.424,11H13v2Z"/>
-  </defs>
-  <use id="close" xlink:href="#close-shape"/>
-  <use id="close-hover" xlink:href="#close-shape"/>
-</svg>