Bug 1368417 - Convert skin/classic/global/icons/spinner-arrows.svg to use context paint and avoid filtering to improve performance. r=mconley
authorJonathan Watt <jwatt@jwatt.org>
Wed, 03 May 2017 19:11:44 +0100
changeset 409376 8ddda830d3930ebed81970284ccf965020084197
parent 409375 fa5c6debadd31d7c3bec114849667dcd885a3a9c
child 409377 b5c3bb245c4e770eb128b0e2e803321d17e5239f
push id7391
push usermtabara@mozilla.com
push dateMon, 12 Jun 2017 13:08:53 +0000
treeherdermozilla-beta@2191d7f87e2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1368417
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1368417 - Convert skin/classic/global/icons/spinner-arrows.svg to use context paint and avoid filtering to improve performance. r=mconley
toolkit/themes/shared/datetimeinputpickers.css
toolkit/themes/shared/icons/spinner-arrow-down.svg
toolkit/themes/shared/icons/spinner-arrow-up.svg
toolkit/themes/shared/icons/spinner-arrows.svg
toolkit/themes/shared/jar.inc.mn
--- a/toolkit/themes/shared/datetimeinputpickers.css
+++ b/toolkit/themes/shared/datetimeinputpickers.css
@@ -128,23 +128,23 @@ button.month-year.active {
   background: var(--button-fill-color-active);
 }
 
 button.month-year::after {
   position: absolute;
   content: "";
   width: 2.6rem;
   height: 1.6rem;
-  background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
-  filter: url("chrome://global/skin/filters.svg#fill");
+  background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
+  -moz-context-properties: fill;
   fill: var(--button-font-color);
 }
 
 button.month-year.active::after {
-  background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .month-year-view {
   position: absolute;
   z-index: 5;
   padding-top: 3.2rem;
   top: 0;
   left: 0;
@@ -282,34 +282,34 @@ button.month-year.active::after {
 .spinner-container {
   display: flex;
   flex-direction: column;
   width: var(--spinner-width);
 }
 
 .spinner-container > button {
   height: var(--spinner-button-height);
-  filter: url("chrome://global/skin/filters.svg#fill");
+  -moz-context-properties: fill;
   fill: var(--button-font-color);
 }
 
 .spinner-container > button:hover {
   fill: var(--button-font-color-hover);
 }
 
 .spinner-container > button.active {
   fill: var(--button-font-color-active);
 }
 
 .spinner-container > button.up {
-  background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/spinner-arrow-up.svg") no-repeat 50% 50%;
 }
 
 .spinner-container > button.down {
-  background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%;
+  background: url("chrome://global/skin/icons/spinner-arrow-down.svg") no-repeat 50% 50%;
 }
 
 .spinner-container.hide-buttons > button {
   visibility: hidden;
 }
 
 .spinner-container > .spinner {
   position: relative;
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/spinner-arrow-down.svg
@@ -0,0 +1,7 @@
+<!-- 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"
+     width="10" height="6" viewBox="0 0 10 6">
+  <path fill="context-fill" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/spinner-arrow-up.svg
@@ -0,0 +1,7 @@
+<!-- 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"
+     width="10" height="6" viewBox="0 0 10 6">
+  <path fill="context-fill" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
+</svg>
deleted file mode 100644
--- a/toolkit/themes/shared/icons/spinner-arrows.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?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" width="10" height="6" viewBox="0 0 10 6">
-  <style>
-    path:not(:target) {
-      display: none;
-    }
-  </style>
-  <path id="down" d="M0 1l1-1 4 4 4-4 1 1-5 5"/>
-  <path id="up" d="M0 5l1 1 4-4 4 4 1-1-5-5"/>
-</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -29,17 +29,18 @@ toolkit.jar:
   skin/classic/global/icons/calendar-arrow-left.svg        (../../shared/icons/calendar-arrow-left.svg)
   skin/classic/global/icons/calendar-arrow-right.svg       (../../shared/icons/calendar-arrow-right.svg)
   skin/classic/global/icons/find-arrows.svg                (../../shared/icons/find-arrows.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
   skin/classic/global/icons/search-textbox.svg             (../../shared/icons/search-textbox.svg)
-  skin/classic/global/icons/spinner-arrows.svg             (../../shared/icons/spinner-arrows.svg)
+  skin/classic/global/icons/spinner-arrow-down.svg         (../../shared/icons/spinner-arrow-down.svg)
+  skin/classic/global/icons/spinner-arrow-up.svg           (../../shared/icons/spinner-arrow-up.svg)
   skin/classic/global/icons/menubutton-dropmarker.svg      (../../shared/icons/menubutton-dropmarker.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/alerts/alert-common.css              (../../shared/alert-common.css)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)
   skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)
   skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
   skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)