Bug 1455138 - Use SVG context paint for macOS tree twisties. r=Gijs
MozReview-Commit-ID: hnOYEq4Q27
--- a/browser/themes/osx/places/organizer.css
+++ b/browser/themes/osx/places/organizer.css
@@ -11,22 +11,22 @@
height: 24px;
}
#placesList > treechildren::-moz-tree-cell-text {
font-size: 12px;
margin-inline-end: 6px;
}
-#placesList > treechildren::-moz-tree-row(selected) {
+#placesList > treechildren::-moz-tree-row(selected) {
-moz-appearance: -moz-mac-source-list-selection;
-moz-font-smoothing-background-color: -moz-mac-source-list-selection;
}
-#placesList > treechildren::-moz-tree-row(selected,focus) {
+#placesList > treechildren::-moz-tree-row(selected,focus) {
-moz-appearance: -moz-mac-active-source-list-selection;
-moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
}
#placesList > treechildren::-moz-tree-row(History),
#placesList > treechildren::-moz-tree-row(history) {
background-color: blue;
}
@@ -35,79 +35,56 @@
cursor: default;
}
#placesList > treechildren::-moz-tree-separator {
border-top: 1px solid #505d6d;
margin: 0 10px;
}
-#placesList > treechildren::-moz-tree-cell-text(selected) {
+#placesList > treechildren::-moz-tree-twisty(selected),
+#placesList > treechildren::-moz-tree-cell-text(selected) {
color: #fff;
+ fill-opacity: 1;
font-weight: bold;
}
#placesList > treechildren::-moz-tree-twisty {
-moz-appearance: none;
padding: 0 2px;
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
+ list-style-image: url("chrome://global/skin/tree/arrow-collapsed.svg");
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 0.6;
}
-#placesList > treechildren::-moz-tree-twisty(closed, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
+#placesList > treechildren::-moz-tree-twisty(selected) {
+ fill: currentColor;
}
#placesList > treechildren::-moz-tree-twisty(open) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
-}
-
-#placesList > treechildren::-moz-tree-twisty(open, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
+ list-style-image: url("chrome://global/skin/tree/arrow-expanded.svg");
}
#placesList > treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
-}
-
-#placesList > treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
+ list-style-image: url("chrome://global/skin/tree/arrow-collapsed-rtl.svg");
}
@media (-moz-mac-yosemite-theme) {
+ #placesList > treechildren::-moz-tree-twisty(selected),
#placesList > treechildren::-moz-tree-cell-text(selected) {
color: -moz-dialogtext;
+ fill-opacity: 0.6;
font-weight: 500;
}
+ #placesList > treechildren::-moz-tree-twisty(selected, focus),
#placesList > treechildren::-moz-tree-cell-text(selected, focus) {
color: #fff;
- }
-
- #placesList > treechildren::-moz-tree-twisty(closed, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
- }
-
- #placesList > treechildren::-moz-tree-twisty(closed, selected, focus) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
- }
-
- #placesList > treechildren::-moz-tree-twisty(open, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
- }
-
- #placesList > treechildren::-moz-tree-twisty(open, selected, focus) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
- }
-
- #placesList > treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
- }
-
- #placesList > treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed, selected, focus) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
+ fill-opacity: 1;
}
}
#placesToolbar {
padding: 0 4px 3px;
}
#placesView {
--- a/browser/themes/osx/places/places.css
+++ b/browser/themes/osx/places/places.css
@@ -46,89 +46,66 @@
-moz-appearance: -moz-mac-active-source-list-selection;
-moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
}
.sidebar-placesTreechildren::-moz-tree-cell-text {
margin-inline-end: 6px;
}
+.sidebar-placesTreechildren::-moz-tree-twisty(selected),
.sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
color: #fff;
+ fill-opacity: 1;
font-weight: bold;
}
#sidebar-search-label {
display: none;
}
#sidebar-search-container {
/* Native searchbar styling already adds 4px margin on Mac, so
* adding 4px padding results in 8px of total whitespace. */
padding: 4px;
}
.sidebar-placesTreechildren::-moz-tree-twisty {
-moz-appearance: none;
padding: 0 2px;
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
+ list-style-image: url("chrome://global/skin/tree/arrow-collapsed.svg");
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 0.6;
}
-.sidebar-placesTreechildren::-moz-tree-twisty(closed, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
+.sidebar-placesTreechildren::-moz-tree-twisty(selected) {
+ fill: currentColor;
}
.sidebar-placesTreechildren::-moz-tree-twisty(open) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
-}
-
-.sidebar-placesTreechildren::-moz-tree-twisty(open, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
+ list-style-image: url("chrome://global/skin/tree/arrow-expanded.svg");
}
.sidebar-placesTreechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
-}
-
-.sidebar-placesTreechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
+ list-style-image: url("chrome://global/skin/tree/arrow-collapsed-rtl.svg");
}
@media (-moz-mac-yosemite-theme) {
+ .sidebar-placesTreechildren::-moz-tree-twisty(selected),
.sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
color: -moz-dialogtext;
+ fill-opacity: 0.6;
font-weight: 500;
}
+ .sidebar-placesTreechildren::-moz-tree-twisty(selected, focus),
.sidebar-placesTreechildren::-moz-tree-cell-text(selected, focus) {
color: #fff;
- }
-
- .sidebar-placesTreechildren::-moz-tree-twisty(closed, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
- }
-
- .sidebar-placesTreechildren::-moz-tree-twisty(closed, selected, focus) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
- }
-
- .sidebar-placesTreechildren::-moz-tree-twisty(open, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
- }
-
- .sidebar-placesTreechildren::-moz-tree-twisty(open, selected, focus) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
- }
-
- .sidebar-placesTreechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed, selected) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
- }
-
- .sidebar-placesTreechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed, selected, focus) {
- list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl")
+ fill-opacity: 1;
}
}
#viewButton {
-moz-appearance: none;
border-radius: 4px;
padding: 2px 4px;
margin: 4px 0;
--- a/browser/themes/osx/syncedtabs/sidebar.css
+++ b/browser/themes/osx/syncedtabs/sidebar.css
@@ -35,64 +35,40 @@
.item.selected:focus > .item-title-container {
-moz-appearance: -moz-mac-active-source-list-selection;
-moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
}
.item.client .item-twisty-container {
min-width: 16px;
height: 16px;
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
+ background-image: url("chrome://global/skin/tree/arrow-expanded.svg");
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 1;
+}
+
+.item.client.closed .item-twisty-container {
+ background-image: url("chrome://global/skin/tree/arrow-collapsed.svg");
+}
+
+.item.client.closed .item-twisty-container:dir(rtl) {
+ background-image: url("chrome://global/skin/tree/arrow-collapsed-rtl.svg");
+}
+
+.item.client.selected:focus .item-twisty-container {
+ fill-opacity: 1;
}
@media (-moz-mac-yosemite-theme: 0) {
.item.client.selected .item-twisty-container {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
- }
-
- .item.client.selected.closed .item-twisty-container {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
- }
-
- .item.client.selected .item-twisty-container:dir(rtl) {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
- }
-
- .item.client.selected.closed .item-twisty-container:dir(rtl) {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
+ fill-opacity: 1;
}
}
-.item.client.closed .item-twisty-container {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
-}
-
-.item.client.selected:focus .item-twisty-container {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
-}
-
-.item.client.selected.closed:focus .item-twisty-container {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
-}
-
-.item.client .item-twisty-container:dir(rtl) {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
-}
-
-.item.client.closed .item-twisty-container:dir(rtl) {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-rtl");
-}
-
-.item.client.selected:focus .item-twisty-container:dir(rtl) {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
-}
-
-.item.client.selected.closed:focus .item-twisty-container:dir(rtl) {
- background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted-rtl");
-}
@media (-moz-mac-yosemite-theme) {
.item.selected > .item-title-container {
color: -moz-dialogtext;
font-weight: 500;
}
.item.selected:focus > .item-title-container {
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -68,10 +68,12 @@ toolkit.jar:
skin/classic/global/icons/error-16.png (icons/error-16.png)
skin/classic/global/icons/error-64.png (icons/error-64.png)
skin/classic/global/icons/question-16.png (icons/question-16.png)
skin/classic/global/icons/question-32.png (icons/question-32.png)
skin/classic/global/icons/question-64.png (icons/question-64.png)
skin/classic/global/icons/sslWarning.png (icons/sslWarning.png)
* skin/classic/global/in-content/common.css (in-content/common.css)
* skin/classic/global/in-content/info-pages.css (in-content/info-pages.css)
- skin/classic/global/tree/arrow-disclosure.svg (tree/arrow-disclosure.svg)
+ skin/classic/global/tree/arrow-collapsed.svg (tree/arrow-collapsed.svg)
+ skin/classic/global/tree/arrow-collapsed-rtl.svg (tree/arrow-collapsed-rtl.svg)
+ skin/classic/global/tree/arrow-expanded.svg (tree/arrow-expanded.svg)
skin/classic/global/tree/columnpicker.gif (tree/columnpicker.gif)
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/osx/global/tree/arrow-collapsed-rtl.svg
@@ -0,0 +1,6 @@
+<!-- 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 width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <polygon points="4,8.5 12,4 12,13" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/osx/global/tree/arrow-collapsed.svg
@@ -0,0 +1,6 @@
+<!-- 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 width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <polygon points="4,4 12,8.5 4,13" />
+</svg>
deleted file mode 100644
--- a/toolkit/themes/osx/global/tree/arrow-disclosure.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<!-- 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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-
- <style>
- .icon:not(:target) {
- display: none;
- }
-
- .icon {
- fill: #8c8c8c;
- }
-
- .icon.white {
- fill: #fff;
- }
- </style>
-
- <polygon id="arrow-disclosure-collapsed" class="icon" points="4,4 12,8.5 4,13" />
- <polygon id="arrow-disclosure-collapsed-rtl" class="icon" points="4,8.5 12,4 12,13" />
- <polygon id="arrow-disclosure-collapsed-inverted" class="icon white" points="4,4 12,8.5 4,13" />
- <polygon id="arrow-disclosure-collapsed-inverted-rtl" class="icon white" points="4,8.5 12,4 12,13" />
-
- <polygon id="arrow-disclosure-expanded" class="icon" points="3,5 12,5 7.5,13" />
- <polygon id="arrow-disclosure-expanded-inverted" class="icon white" points="3,5 12,5 7.5,13" />
-
-</svg>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/osx/global/tree/arrow-expanded.svg
@@ -0,0 +1,6 @@
+<!-- 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 width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+ <polygon points="3,5 12,5 7.5,13" />
+</svg>