Bug 1374108 - Split up the search bar's next/previous icon and convert it to use SVG context paint. r=dao draft
authorJonathan Watt <jwatt@jwatt.org>
Thu, 01 Jun 2017 14:53:26 +0100
changeset 596216 c1a2dad924a0beef97d067b9621f1ac730b10cb8
parent 596215 97a7287dc0bba9898424c93e3b1aacab372cd611
child 633884 9fed0dd25e495c365996b2d601a90e9aae1166fc
push id64546
push userjwatt@jwatt.org
push dateMon, 19 Jun 2017 00:10:07 +0000
reviewersdao
bugs1374108
milestone56.0a1
Bug 1374108 - Split up the search bar's next/previous icon and convert it to use SVG context paint. r=dao MozReview-Commit-ID: EZvfagvJjVg
toolkit/themes/linux/global/findBar.css
toolkit/themes/osx/global/findBar.css
toolkit/themes/shared/icons/find-arrows.svg
toolkit/themes/shared/icons/find-next-arrow.svg
toolkit/themes/shared/icons/find-previous-arrow.svg
toolkit/themes/shared/jar.inc.mn
toolkit/themes/windows/global/findBar.css
--- a/toolkit/themes/linux/global/findBar.css
+++ b/toolkit/themes/linux/global/findBar.css
@@ -99,30 +99,34 @@ findbar[noanim] {
 .findbar-find-previous:not([disabled]):active,
 .findbar-find-next:not([disabled]):active {
   background: rgba(23,50,76,.2);
   border: 1px solid ThreeDShadow;
   box-shadow: 0 1px 2px rgba(10,31,51,.2) inset;
 }
 
 .findbar-find-previous {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous);
+  list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
   border-inline-end-width: 0;
 }
 
 .findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next);
+  list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
 }
 
 .findbar-find-previous[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-next[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-previous > .toolbarbutton-icon,
 .findbar-find-next > .toolbarbutton-icon {
   margin: 0;
 }
 
 .findbar-find-previous[disabled="true"] > .toolbarbutton-icon,
--- a/toolkit/themes/osx/global/findBar.css
+++ b/toolkit/themes/osx/global/findBar.css
@@ -196,31 +196,35 @@ label.findbar-find-fast:-moz-lwtheme,
 .findbar-find-next > .toolbarbutton-icon {
   margin: 0;
 }
 
 .findbar-find-previous {
   border-left: none;
   border-right: none;
   margin-inline-end: 0;
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous);
+  list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
   border-radius: 0;
 }
 
 .findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next);
+  list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
   padding-inline-end: 7px;
 }
 
 .findbar-find-previous[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-next[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-next:-moz-locale-dir(ltr) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
 .findbar-find-next:-moz-locale-dir(rtl) {
deleted file mode 100644
--- a/toolkit/themes/shared/icons/find-arrows.svg
+++ /dev/null
@@ -1,27 +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" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12">
-  <style>
-    #previous,
-    #next {
-      fill: -moz-dialogtext;
-    }
-    #previous-disabled,
-    #next-disabled {
-      fill: GrayText;
-    }
-    use:not(:target) {
-      display: none;
-    }
-  </style>
-  <defs>
-    <path id="path-previous" d="M5.407,1.5l-5,4.599L1.65,7.283l3.757-3.387l3.705,3.385l1.296-1.158L5.407,1.5z"/>
-    <path id="path-next" d="M5.547,8.255L0.538,3.53l1.239-1.265l3.77,3.641l3.719-3.641l1.264,1.188L5.547,8.255z"/>
-  </defs>
-  <use xlink:href="#path-previous" id="previous"/>
-  <use xlink:href="#path-next" id="next"/>
-  <use xlink:href="#path-previous" id="previous-disabled"/>
-  <use xlink:href="#path-next" id="next-disabled"/>
-</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/find-next-arrow.svg
@@ -0,0 +1,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="12" height="12" viewBox="0 0 12 12">
+  <path fill="context-fill" d="M5.547,8.255L0.538,3.53l1.239-1.265l3.77,3.641l3.719-3.641l1.264,1.188L5.547,8.255z"/>
+</svg>
+
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/find-previous-arrow.svg
@@ -0,0 +1,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="12" height="12" viewBox="0 0 12 12">
+  <path fill="context-fill" d="M5.407,1.5l-5,4.599L1.65,7.283l3.757-3.387l3.705,3.385l1.296-1.158L5.407,1.5z"/>
+</svg>
+
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -23,17 +23,18 @@ toolkit.jar:
   skin/classic/global/config.css                           (../../shared/config.css)
   skin/classic/global/datetimeinputpickers.css             (../../shared/datetimeinputpickers.css)
   skin/classic/global/datetimepopup.css                    (../../shared/datetimepopup.css)
   skin/classic/global/filters.svg                          (../../shared/filters.svg)
   skin/classic/global/passwordmgr.css                      (../../shared/passwordmgr.css)
   skin/classic/global/scale.css                            (../../shared/scale.css)
   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/find-previous-arrow.svg        (../../shared/icons/find-previous-arrow.svg)
+  skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.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-arrow-indicator.svg     (../../shared/icons/search-arrow-indicator.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)
--- a/toolkit/themes/windows/global/findBar.css
+++ b/toolkit/themes/windows/global/findBar.css
@@ -91,29 +91,33 @@ findbar[noanim] {
 
 .findbar-find-previous:not([disabled]):active,
 .findbar-find-next:not([disabled]):active {
   background: rgba(23,50,76,.2);
   box-shadow: 0 1px 2px rgba(10,31,51,.2) inset;
 }
 
 .findbar-find-previous {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous);
+  list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
 }
 
 .findbar-find-next {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next);
+  list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
+  -moz-context-properties: fill;
+  fill: -moz-dialogtext;
 }
 
 .findbar-find-previous[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#previous-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-next[disabled] {
-  list-style-image: url(chrome://global/skin/icons/find-arrows.svg#next-disabled);
+  fill: GrayText;
 }
 
 .findbar-find-previous,
 .findbar-find-previous:not([disabled]):active {
   border-right: none;
   border-left: none;
 }