Bug 1455138 - Use SVG context paint for macOS tree twisties. r=Gijs draft
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 05 Jun 2018 15:33:54 +0100
changeset 804060 5823016ba77a159a726a040d1e0e1995fb6a5f53
parent 804006 b0ba8697fe4b987c1be2f9d66dae0d57fc3a61d9
push id112299
push userbmo:ntim.bugs@gmail.com
push dateTue, 05 Jun 2018 14:34:55 +0000
reviewersGijs
bugs1455138
milestone62.0a1
Bug 1455138 - Use SVG context paint for macOS tree twisties. r=Gijs MozReview-Commit-ID: hnOYEq4Q27
browser/themes/osx/places/organizer.css
browser/themes/osx/places/places.css
browser/themes/osx/syncedtabs/sidebar.css
toolkit/themes/osx/global/jar.mn
toolkit/themes/osx/global/tree/arrow-collapsed-rtl.svg
toolkit/themes/osx/global/tree/arrow-collapsed.svg
toolkit/themes/osx/global/tree/arrow-disclosure.svg
toolkit/themes/osx/global/tree/arrow-expanded.svg
--- 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>