Bug 1359631 - Convert Toolkit's media/pauseButton.svg to use context paint to improve performance. r=dao
MozReview-Commit-ID: JOA4Xnk18yh
--- a/toolkit/themes/shared/media/pauseButton.svg
+++ b/toolkit/themes/shared/media/pauseButton.svg
@@ -1,36 +1,6 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 18 18">
- <style>
- use:not(:target) {
- display: none;
- }
- use {
- fill: #ffffff;
- }
- use[id$="-hover"] {
- fill: #48a0f7;
- }
- use[id$="-active"] {
- fill: #2d89e6;
- }
- use[id$="-focus"] {
- fill: #48a0f7;
- }
- use[id$="-disabled"] {
- fill: #ffffff;
- }
- </style>
-
-
- <symbol id="pause-shape">
- <path fill-rule="evenodd" clip-rule="evenodd" d="M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08
+<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 18 18">
+ <path fill="context-fill" d="M6.002,1.953C5.172,1.953,4.5,2.626,4.5,3.455v11.08
c0,0.83,0.672,1.502,1.502,1.502c0.829,0,1.502-0.672,1.502-1.502V3.455C7.504,2.626,6.831,1.953,6.002,1.953z M12,1.953
c-0.828,0-1.5,0.672-1.5,1.5v11.094c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5V3.453C13.5,2.625,12.828,1.953,12,1.953z"/>
- </symbol>
+</svg>
- <use id="pause" xlink:href="#pause-shape"/>
- <use id="pause-hover" xlink:href="#pause-shape"/>
- <use id="pause-active" xlink:href="#pause-shape"/>
- <use id="pause-focus" xlink:href="#pause-shape"/>
- <use id="pause-disalbed" xlink:href="#pause-shape"/>
-</svg>
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -91,23 +91,25 @@ audio > xul|videocontrols {
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
}
.playButton {
- background-image: url(chrome://global/skin/media/pauseButton.svg#pause);
+ background-image: url(chrome://global/skin/media/pauseButton.svg);
+ -moz-context-properties: fill;
+ fill: #ffffff;
}
.playButton:hover {
- background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover);
+ fill: #48a0f7;
}
.playButton:hover:active {
- background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active);
+ fill: #2d89e6;
}
.playButton[paused] {
background-image: url(chrome://global/skin/media/playButton.svg#play);
}
.playButton[paused]:hover {
background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
}
.playButton[paused]:hover:active {