Bug 1374108 - Split up the find bar's next/previous icon and convert it to use SVG context paint. r=dao

MozReview-Commit-ID: GHdhJNrrF5B
This commit is contained in:
Jonathan Watt 2017-05-25 12:46:19 +01:00
parent 1dfbbc4cda
commit 2d59ddbfad
7 changed files with 42 additions and 40 deletions

View File

@ -104,20 +104,24 @@ findbar[noanim] {
}
.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,

View File

@ -201,21 +201,25 @@ label.findbar-find-fast:-moz-lwtheme,
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) {

View File

@ -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>

Before

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -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>

After

Width:  |  Height:  |  Size: 427 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 421 B

View File

@ -28,7 +28,8 @@ toolkit.jar:
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)

View File

@ -96,19 +96,23 @@ findbar[noanim] {
}
.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,