Bug 1359631 - Convert Toolkit's media/playButton.svg to use context paint to improve performance. r=dao
MozReview-Commit-ID: GngXVZl73D2
--- a/toolkit/themes/shared/media/playButton.svg
+++ b/toolkit/themes/shared/media/playButton.svg
@@ -1,37 +1,5 @@
-<?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;
- }
- use[id$="-clicktoplay"] {
- fill: #000000;
- }
- </style>
+<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 18 18">
+ <path fill="context-fill" d="M3.243,15.155c0,0.845,0.593,1.157,1.317,0.707l9.659-6.041c0.727-0.453,0.722-1.193,0-1.645L4.556,2.137
+ C3.827,1.682,3.237,2.014,3.237,2.844v12.312H3.243z"/>
+</svg>
- <symbol id="play-shape">
- <path d="M3.243,15.155c0,0.845,0.593,1.157,1.317,0.707l9.659-6.041c0.727-0.453,0.722-1.193,0-1.645L4.556,2.137
- C3.827,1.682,3.237,2.014,3.237,2.844v12.312H3.243z"/>
- </symbol>
-
- <use id="play" xlink:href="#play-shape"/>
- <use id="play-hover" xlink:href="#play-shape"/>
- <use id="play-active" xlink:href="#play-shape"/>
- <use id="play-focus" xlink:href="#play-shape"/>
- <use id="play-clicktoplay" xlink:href="#play-shape"/>
-</svg>
--- a/toolkit/themes/shared/media/videocontrols.css
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -102,23 +102,25 @@ audio > xul|videocontrols {
}
.playButton:hover {
fill: #48a0f7;
}
.playButton:hover:active {
fill: #2d89e6;
}
.playButton[paused] {
- background-image: url(chrome://global/skin/media/playButton.svg#play);
+ background-image: url(chrome://global/skin/media/playButton.svg);
+ -moz-context-properties: fill;
+ fill: #ffffff;
}
.playButton[paused]:hover {
- background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
+ fill: #48a0f7;
}
.playButton[paused]:hover:active {
- background-image: url(chrome://global/skin/media/playButton.svg#play-active);
+ fill: #2d89e6;
}
.muteButton {
background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
}
.muteButton:hover {
background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
}
@@ -390,21 +392,23 @@ audio > xul|videocontrols {
background-size: contain;
}
/* Overlay Play button */
.clickToPlay {
min-width: 48px;
min-height: 48px;
border-radius: 50%;
- background-image: url(chrome://global/skin/media/playButton.svg#play);
+ background-image: url(chrome://global/skin/media/playButton.svg);
background-repeat: no-repeat;
background-position: 54% 50%;
background-size: 40% 40%;
background-color: #1a1a1a;
+ -moz-context-properties: fill;
+ fill: #ffffff;
opacity: 0.8;
position: relative;
top: 20px;
}
.controlsSpacerStack:hover > .clickToPlay,
.clickToPlay:hover {
opacity: 0.55;