Bug 1469287 - Implement new shared tree styling. r=dao draft
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 27 Jun 2018 11:22:27 +0100
changeset 815598 d4fb59d1ffac7879135a5c2d8ec4903ebd5db93d
parent 815597 4b42a006f52ad2ce42bb2cf953ca693ea8e6ed41
push id115563
push userbmo:ntim.bugs@gmail.com
push dateMon, 09 Jul 2018 12:45:57 +0000
reviewersdao
bugs1469287
milestone63.0a1
Bug 1469287 - Implement new shared tree styling. r=dao MozReview-Commit-ID: r4rU9rDKNG
browser/themes/linux/places/places.css
browser/themes/linux/syncedtabs/sidebar.css
browser/themes/osx/places/organizer.css
browser/themes/osx/places/places.css
browser/themes/osx/syncedtabs/sidebar.css
browser/themes/shared/places/tree-icons.inc.css
browser/themes/shared/syncedtabs/sidebar.inc.css
browser/themes/windows/syncedtabs/sidebar.css
layout/reftests/bugs/reftest.list
layout/reftests/xul/reftest.list
toolkit/themes/linux/global/button.css
toolkit/themes/linux/global/jar.mn
toolkit/themes/linux/global/tree.css
toolkit/themes/linux/global/tree/twisty-collapsed-rtl.svg
toolkit/themes/linux/global/tree/twisty-collapsed.svg
toolkit/themes/linux/global/tree/twisty-expanded.svg
toolkit/themes/osx/global/jar.mn
toolkit/themes/osx/global/tree.css
toolkit/themes/osx/global/tree/arrow-collapsed-rtl.svg
toolkit/themes/osx/global/tree/arrow-collapsed.svg
toolkit/themes/osx/global/tree/arrow-expanded.svg
toolkit/themes/shared/icons/twisty-collapsed-rtl.svg
toolkit/themes/shared/icons/twisty-collapsed.svg
toolkit/themes/shared/icons/twisty-expanded.svg
toolkit/themes/shared/jar.inc.mn
toolkit/themes/shared/tree.inc.css
toolkit/themes/windows/global/button.css
toolkit/themes/windows/global/jar.mn
toolkit/themes/windows/global/tree.css
toolkit/themes/windows/global/tree/twisty-collapsed-rtl.svg
toolkit/themes/windows/global/tree/twisty-collapsed.svg
toolkit/themes/windows/global/tree/twisty-expanded.svg
--- a/browser/themes/linux/places/places.css
+++ b/browser/themes/linux/places/places.css
@@ -41,20 +41,16 @@
 
 .sidebar-placesTree {
   margin: 0;
   color: inherit;
   -moz-appearance: none;
   background: transparent;
 }
 
-.sidebar-placesTreechildren::-moz-tree-row {
-  min-height: 24px;
-}
-
 :root[uidensity=touch] #search-box,
 :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
   min-height: 32px;
 }
 
 .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
 .sidebar-placesTreechildren::-moz-tree-image(leaf) {
   cursor: pointer;
@@ -67,13 +63,8 @@
 
 .sidebar-placesTreechildren::-moz-tree-cell(separator) {
   cursor: default;
 }
 
 /* Trees */
 
 %include ../../shared/places/tree-icons.inc.css
-
-treechildren:-moz-tree-image(container,selected),
-treechildren:-moz-tree-image(selected,focus) {
-  fill: HighlightText;
-}
--- a/browser/themes/linux/syncedtabs/sidebar.css
+++ b/browser/themes/linux/syncedtabs/sidebar.css
@@ -45,31 +45,8 @@ html {
 
 .search-box > .textbox-input-box:-moz-locale-dir(rtl) {
   background-position: right center;
 }
 
 .textbox-search-clear:not([disabled]) {
   cursor: pointer;
 }
-
-.item-twisty-container {
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  min-width: 9px; /* The image's width is 9 pixels */
-  height: 9px;
-  margin: auto;
-}
-
-.item.client .item-twisty-container {
-  background-image: url("chrome://global/skin/tree/twisty-expanded.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-.item.client.closed .item-twisty-container {
-  background-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
-}
-
-.item.client.closed .item-twisty-container:dir(rtl) {
-  background-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
-}
--- a/browser/themes/osx/places/organizer.css
+++ b/browser/themes/osx/places/organizer.css
@@ -1,23 +1,19 @@
 /* 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/. */
 
 /* Places Organizer Sidebars */
 
 #placesList > treechildren::-moz-tree-row {
-  background-color: transparent;
-  border-color: transparent;
   padding-bottom: 1px;
-  height: 24px;
 }
 
 #placesList > treechildren::-moz-tree-cell-text {
-  font-size: 12px;
   margin-inline-end: 6px;
 }
 
 #placesList > treechildren::-moz-tree-row(selected) {
   -moz-appearance: -moz-mac-source-list-selection;
   -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
 }
 
@@ -42,37 +38,16 @@
 
 #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-collapsed.svg");
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  fill-opacity: 0.6;
-}
-
-#placesList > treechildren::-moz-tree-twisty(selected) {
-  fill: currentColor;
-}
-
-#placesList > treechildren::-moz-tree-twisty(open) {
-  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-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;
   }
 
--- a/browser/themes/osx/places/places.css
+++ b/browser/themes/osx/places/places.css
@@ -49,63 +49,39 @@
 
 .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-collapsed.svg");
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  fill-opacity: 0.6;
-}
-
-.sidebar-placesTreechildren::-moz-tree-twisty(selected) {
-  fill: currentColor;
-}
-
-.sidebar-placesTreechildren::-moz-tree-twisty(open) {
-  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-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;
-    fill-opacity: 1;
   }
 }
 
 #viewButton {
   -moz-appearance: none;
   border-radius: 4px;
   padding: 2px 4px;
   margin: 4px 0;
@@ -131,12 +107,8 @@
   list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
   width: 12px;
   height: 12px;
 }
 
 /* Trees */
 
 %include ../../shared/places/tree-icons.inc.css
-
-treechildren:-moz-tree-image(selected,focus) {
-  fill: HighlightText;
-}
--- a/browser/themes/osx/syncedtabs/sidebar.css
+++ b/browser/themes/osx/syncedtabs/sidebar.css
@@ -32,44 +32,16 @@
   -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
 }
 
 .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-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 {
-    fill-opacity: 1;
-  }
-}
-
-
 @media (-moz-mac-yosemite-theme) {
   .item.selected > .item-title-container {
     color: -moz-dialogtext;
     font-weight: 500;
   }
 
   .item.selected:focus > .item-title-container {
     color: #fff;
--- a/browser/themes/shared/places/tree-icons.inc.css
+++ b/browser/themes/shared/places/tree-icons.inc.css
@@ -1,15 +1,14 @@
 /* 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/. */
 
 treechildren:-moz-tree-image {
   -moz-context-properties: fill, fill-opacity;
-  fill: -moz-FieldText;
   fill-opacity: 0.7;
 }
 
 treechildren::-moz-tree-image(title) {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   padding-inline-end: 2px;
   margin: 0 2px;
   width: 16px;
--- a/browser/themes/shared/syncedtabs/sidebar.inc.css
+++ b/browser/themes/shared/syncedtabs/sidebar.inc.css
@@ -75,31 +75,44 @@ body {
   color: -moz-cellhighlighttext;
 }
 
 .item.selected:focus > .item-title-container {
   background-color: Highlight;
   color: HighlightText;
 }
 
+.item.client .item-twisty-container {
+  min-width: 8px;
+  height: 8px;
+  background-image: url("chrome://global/skin/icons/twisty-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/icons/twisty-collapsed.svg");
+}
+
+.item.client.closed .item-twisty-container:dir(rtl) {
+  background-image: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
+}
+
 .client .item.tab > .item-title-container {
   padding-inline-start: 35px;
 }
 
 .item.tab > .item-title-container {
   padding-inline-start: 20px;
 }
 
 .item.client[clientType] > .item-title-container > .item-icon-container {
   -moz-context-properties: fill;
-  fill: #4d4d4d;
-}
-
-.item.client[clientType].selected:focus > .item-title-container > .item-icon-container {
-  fill: white;
+  fill: currentColor;
 }
 
 .item.client[clientType=phone] > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/device-phone.svg");
 }
 
 .item.client[clientType=tablet] > .item-title-container > .item-icon-container {
   background-image: url("chrome://browser/skin/device-tablet.svg");
@@ -128,16 +141,17 @@ body {
   background-position: center;
 }
 
 .item-title-container {
   display: flex;
   flex-flow: row;
   overflow: hidden;
   flex-grow: 1;
+  align-items: center;
   padding: 4px;
 }
 
 .item-title {
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
--- a/browser/themes/windows/syncedtabs/sidebar.css
+++ b/browser/themes/windows/syncedtabs/sidebar.css
@@ -70,40 +70,8 @@
   max-width: 16px;
   min-height: 16px;
   max-height: 16px;
   margin-right: 5px;
   background-size: 16px 16px;
   background-repeat: no-repeat;
   background-position: center;
 }
-
-.item-twisty-container {
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  min-width: 9px; /* The image's width is 9 pixels */
-  height: 9px;
-  margin: auto;
-}
-
-.item.client .item-twisty-container {
-  background-image: url("chrome://global/skin/tree/twisty-expanded.svg");
-  -moz-context-properties: fill;
-  fill: #636363;
-}
-
-.item.client.closed .item-twisty-container {
-  background-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
-  fill: #b6b6b6;
-}
-
-.item.client.closed .item-twisty-container:dir(rtl) {
-  background-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
-}
-
-.item.client .item-twisty-container:hover {
-  fill: #4ed0f9;
-}
-
-.item.client.selected .item-twisty-container:not(:hover) {
-  fill: currentColor;
-}
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -1682,17 +1682,17 @@ HTTP == 652991-4.html 652991-4-ref.html
 fuzzy-if(skiaContent,1,5) == 653930-1.html 653930-1-ref.html
 == 654057-1.html 654057-1-ref.html
 fuzzy-if(skiaContent,1,65536) == 654950-1.html 654950-1-ref.html # Quartz alpha blending doesn't match GL alpha blending
 == 655549-1.html 655549-1-ref.html
 == 655836-1.html 655836-1-ref.html
 != 656875.html about:blank
 == 658952.html 658952-ref.html
 fuzzy-if(skiaContent,10,919) fuzzy-if(webrender&&cocoaWidget,54-54,831-831) == 660682-1.html 660682-1-ref.html
-fuzzy-if(d2d,1,256) skip-if(Android) fuzzy-if(skiaContent,1,68000) fuzzy-if(webrender&&cocoaWidget,2-2,256-256) == 664127-1.xul 664127-1-ref.xul # Android: Intermittent failures - bug 1019131
+fuzzy-if(d2d,1,256) skip-if(Android) fuzzy-if(skiaContent,1,68000) == 664127-1.xul 664127-1-ref.xul # Android: Intermittent failures - bug 1019131
 == 665597-1.html 665597-1-ref.html
 == 665597-2.html 665597-2-ref.html
 == 667079-1.html 667079-1-ref.html
 == 668319-1.xul about:blank
 != 669015-1.xul 669015-1-notref.xul
 skip-if(azureSkiaGL) == 670442-1.html 670442-1-ref.html
 == 670467-1.html 670467-1-ref.html
 == 670467-2.html 670467-2-ref.html
--- a/layout/reftests/xul/reftest.list
+++ b/layout/reftests/xul/reftest.list
@@ -2,17 +2,17 @@
 
 == menuitem-key.xul menuitem-key-ref.xul
 # these random-if(Android) are due to differences between Android Native & Xul, see bug 732569
 random-if(Android) == menulist-shrinkwrap-1.xul menulist-shrinkwrap-1-ref.xul
 random-if(Android) == menulist-shrinkwrap-2.xul menulist-shrinkwrap-2-ref.xul
 == textbox-overflow-1.xul textbox-overflow-1-ref.xul # for bug 749658
 # accesskeys are not normally displayed on Mac, so skip this test
 skip-if(cocoaWidget) == accesskey.xul accesskey-ref.xul
-fails-if(cocoaWidget) fuzzy-if(xulRuntime.widgetToolkit=="gtk3",1,11) == tree-row-outline-1.xul tree-row-outline-1-ref.xul # win8: bug 1254832
+fuzzy-if(xulRuntime.widgetToolkit=="gtk3",1,11) == tree-row-outline-1.xul tree-row-outline-1-ref.xul # win8: bug 1254832
 skip-if(!cocoaWidget) fails-if(webrender&&cocoaWidget) == mac-tab-toolbar.xul mac-tab-toolbar-ref.xul
 != tree-row-outline-1.xul tree-row-outline-1-notref.xul
 == text-crop.xul text-crop-ref.xul
 random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == text-small-caps-1.xul text-small-caps-1-ref.xul
 fuzzy-if(skiaContent,1,60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaContent,1,31) fuzzy-if(winWidget&&browserIsRemote&&layersGPUAccelerated,1,50) == inactive-fixed-bg-bug1205630.xul inactive-fixed-bg-bug1205630-ref.html
 fuzzy-if(skiaContent,1,60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaContent,1,31) fuzzy-if(winWidget&&browserIsRemote&&layersGPUAccelerated,1,50) == inactive-fixed-bg-bug1272525.xul inactive-fixed-bg-bug1272525-ref.html
 
 # Tests for XUL <image> with 'object-fit' & 'object-position':
--- a/toolkit/themes/linux/global/button.css
+++ b/toolkit/themes/linux/global/button.css
@@ -67,17 +67,17 @@ button[type="menu-button"] {
 button.plain {
   margin: 0 !important;
   padding: 0 !important;
 }
 
 button[type="disclosure"] {
   margin: 0;
   -moz-appearance: none;
-  list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
   -moz-context-properties: fill;
   fill: currentColor;
   min-width: 0;
 }
 
 button[type="disclosure"][open="true"] {
-  list-style-image: url("chrome://global/skin/tree/twisty-expanded.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg");
 }
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -23,24 +23,21 @@ toolkit.jar:
    skin/classic/global/popup.css
    skin/classic/global/radio.css
    skin/classic/global/scrollbox.css
    skin/classic/global/splitter.css
    skin/classic/global/tabbox.css
    skin/classic/global/textbox.css
    skin/classic/global/toolbar.css
    skin/classic/global/toolbarbutton.css
-   skin/classic/global/tree.css
+*  skin/classic/global/tree.css
 *  skin/classic/global/alerts/alert.css                        (alerts/alert.css)
 
    skin/classic/global/icons/Authentication.png                (icons/Authentication.png)
    skin/classic/global/icons/blacklist_favicon.png             (icons/blacklist_favicon.png)
    skin/classic/global/icons/blacklist_large.png               (icons/blacklist_large.png)
    skin/classic/global/icons/Close.gif                         (icons/Close.gif)
    skin/classic/global/icons/Minimize.gif                      (icons/Minimize.gif)
    skin/classic/global/icons/Restore.gif                       (icons/Restore.gif)
    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/twisty-collapsed.svg               (tree/twisty-collapsed.svg)
-   skin/classic/global/tree/twisty-collapsed-rtl.svg           (tree/twisty-collapsed-rtl.svg)
-   skin/classic/global/tree/twisty-expanded.svg                (tree/twisty-expanded.svg)
--- a/toolkit/themes/linux/global/tree.css
+++ b/toolkit/themes/linux/global/tree.css
@@ -1,216 +1,11 @@
 /* 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/. */
 
-/* ===== tree.css ===================================================
-  == Styles used by the XUL outline element.
-  ======================================================================= */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-/* ::::: tree ::::: */
-
-tree {
-  margin: 0 4px;
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  -moz-appearance: listbox;
-}
-
-/* ::::: tree focusring ::::: */
-
-.focusring > .tree-stack > .tree-rows > .tree-bodybox {
-  border: 1px solid transparent;
-}
-
-.focusring:focus > .tree-stack > .tree-rows > .tree-bodybox {
-  border: 1px solid #000000;
-}
-
-
-/* ::::: tree rows ::::: */
-
-treechildren::-moz-tree-row {
-  border: 1px solid transparent;
-  min-height: 18px;
-  height: 1.3em;
-}
-
-treechildren::-moz-tree-row(multicol, odd) {
-  background-color: -moz-oddtreerow;
-}
-
-treechildren::-moz-tree-row(selected) {
-  background-color: -moz-cellhighlight;
-}
-
-treechildren::-moz-tree-row(selected, focus) {
-  background-color: Highlight;
-}
-
-treechildren::-moz-tree-row(current, focus) {
-  border: 1px dotted Highlight;
-}
-
-treechildren::-moz-tree-row(selected, current, focus) {
-  border: 1px dotted #F3D982;
-}
-
-/* ::::: tree cells ::::: */
-
-treechildren::-moz-tree-cell {
-  padding: 0 2px;
-}
-
-treechildren::-moz-tree-cell-text {
-  color: inherit;
-}
-
-treechildren::-moz-tree-cell-text(selected) {
-  color: -moz-cellhighlighttext;
-}
-
-treechildren::-moz-tree-cell-text(selected, focus) {
-  color: HighlightText;
-}
-
-/* ::::: lines connecting cells ::::: */
-
-treechildren::-moz-tree-line {
-  border: 1px dotted ThreeDShadow;
-}
-
-treechildren::-moz-tree-line(selected, focus) {
-  border: 1px dotted HighlightText;
-}
-
-
-/* ::::: tree separator ::::: */
-
-treechildren::-moz-tree-separator {
-  border-top: 1px solid ThreeDShadow;
-  border-bottom: 1px solid ThreeDHighlight;
-}
-
-
-/* ::::: drop feedback ::::: */
-
-treechildren::-moz-tree-cell-text(primary, dropOn) {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-treechildren::-moz-tree-drop-feedback {
-  background-color: Highlight;
-  width: 50px;
-  height: 2px;
-  margin-inline-start: 5px;
-}
-
-/* ::::: tree columns ::::: */
-
-treecol,
-treecolpicker {
-  -moz-appearance: treeheadercell;
-  -moz-box-align: center;
-  -moz-box-pack: center;
-  color: -moz-DialogText;
-}
-
-treecol:hover,
-treecolpicker:hover {
-  color: -moz-buttonhovertext;
-}
-
-.treecol-image {
-  padding: 0 1px;
-}
-
-.treecol-text {
-  margin: 0 !important;
-}
-
-treecol[hideheader="true"] {
-  -moz-appearance: none;
-}
-
-/* ::::: column drag and drop styles ::::: */
-
-treecol[dragging="true"] {
-  color: Graytext;
-}
-
-treechildren::-moz-tree-column(insertbefore) {
-  border-inline-start: 1px solid ThreeDShadow;
-}
-
-treechildren::-moz-tree-column(insertafter) {
-  border-inline-end: 1px solid ThreeDShadow;
-}
+%include ../../shared/tree.inc.css
 
 /* ::::: sort direction indicator :::::  */
 
 .treecol-sortdirection {
   -moz-appearance: treeheadersortarrow;
 }
-
-/* ::::: column picker :::::  */
-
-.tree-columnpicker-icon {
-  list-style-image: url("chrome://global/skin/tree/columnpicker.gif");
-}
-
-/* ::::: twisty :::::  */
-
-treechildren::-moz-tree-twisty {
-  padding-inline-end: 4px;
-  padding-top: 1px;
-  width: 9px; /* The image's width is 9 pixels */
-  list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(close) {
-  list-style-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
-}
-
-treechildren::-moz-tree-twisty(open) {
-  list-style-image: url("chrome://global/skin/tree/twisty-expanded.svg");
-}
-
-treechildren::-moz-tree-twisty(selected) {
-  fill: -moz-cellhighlighttext;
-}
-
-treechildren::-moz-tree-indentation {
-  width: 18px;
-}
-
-/* ::::: editable tree ::::: */
-
-treechildren::-moz-tree-row(selected, editing) {
-  background-color: transparent;
-  border: none;
-}
-
-treechildren::-moz-tree-cell-text(selected, editing) {
-  color: inherit;
-}
-
-treechildren::-moz-tree-cell(active, selected, focus, editing) {
-  background-color: transparent;
-  border: none;
-}
-
-treechildren::-moz-tree-cell-text(active, selected, editing) {
-  opacity: 0;
-}
-
-.tree-input {
-  -moz-appearance: none;
-  border: 1px solid Highlight;
-  margin: 0;
-  margin-inline-start: -4px;
-  padding: 1px;
-}
deleted file mode 100644
--- a/toolkit/themes/linux/global/tree/twisty-collapsed-rtl.svg
+++ /dev/null
@@ -1,6 +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="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
-  <path d="m 6.5,0.5 -4,4 4,4"/>
-</svg>
deleted file mode 100644
--- a/toolkit/themes/linux/global/tree/twisty-collapsed.svg
+++ /dev/null
@@ -1,6 +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="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
-  <path d="m 2.5,0.5 4,4 -4,4"/>
-</svg>
deleted file mode 100644
--- a/toolkit/themes/linux/global/tree/twisty-expanded.svg
+++ /dev/null
@@ -1,6 +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="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
-  <path d="m 8.5,2.5 -4,4 -4,-4"/>
-</svg>
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -68,12 +68,9 @@ 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-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)
--- a/toolkit/themes/osx/global/tree.css
+++ b/toolkit/themes/osx/global/tree.css
@@ -1,186 +1,23 @@
 /* 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/. */
 
-%include shared.inc
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-tree {
-  margin: 0px 4px;
-  color: -moz-DialogText;
-  background-color: #FFFFFF;
-  -moz-appearance: listbox;
-}
+%include ../../shared/tree.inc.css
 
 /* ::::: tree focusring ::::: */
 
 .focusring > .tree-stack > .tree-rows > .tree-bodybox {
   border: 1px solid transparent;
 }
 
 .focusring:focus > .tree-stack > .tree-rows > .tree-bodybox {
   border: 1px solid -moz-mac-focusring;
 }
 
-
-/* ::::: tree rows ::::: */
-
-treechildren::-moz-tree-row {
-  border-top: 1px solid transparent;
-  height: 18px;
-  background-color: -moz-field;
-}
-
-treechildren::-moz-tree-row(multicol, odd) {
-  background-color: -moz-oddtreerow;
-}
-
-treechildren::-moz-tree-row(selected) {
-  background-color: -moz-mac-secondaryhighlight;
-}
-
-treechildren::-moz-tree-row(selected, focus) {
-  background-color: Highlight;
-  color: HighlightText;
-}
-
-/* ::::: tree cells ::::: */
-
-treechildren::-moz-tree-cell {
-  padding: 0px 2px 0px 2px;
-}
-
-treechildren::-moz-tree-cell-text {
-  color: inherit;
-}
-
-treechildren::-moz-tree-cell-text(selected) {
-  color: -moz-DialogText;
-}
-
-treechildren::-moz-tree-cell-text(selected, focus) {
-  color: HighlightText;
-}
-
-/* ::::: lines connecting cells ::::: */
-
-treechildren::-moz-tree-line {
-  /* XXX there should be no border on Mac, but trees currently
-         paint the line black by default, so I'll just leave this
-         for now. */
-  visibility: hidden;
-  border: 1px dotted grey;
-}
-
-
-/* ::::: tree separator ::::: */
-
-treechildren::-moz-tree-separator {
-  border-top: 1px dashed #C7C7C7;
-  margin: 0 2px;
-}
-
-
-/* ::::: drop feedback ::::: */
-
-treechildren::-moz-tree-cell(primary, dropOn) {
-  background-color: #A1A1A1 !important;
-  color: #FFF !important;
-  background-image: none;
-}
-
-treechildren::-moz-tree-cell-text(primary, dropOn) {
-  color: #FFF !important;
-}
-
-treechildren::-moz-tree-drop-feedback {
-  background-color: #A1A1A1;
-  width: 50px;
-  height: 2px;
-  margin-inline-start: 5px;
-}
-
-/* ::::: tree columns ::::: */
-
-treecol,
-treecolpicker {
-  -moz-appearance: treeheadercell;
-  -moz-box-align: center;
-  -moz-box-pack: center;
-  color: -moz-DialogText;
-  padding: 0 4px;
-}
-
-.treecol-image {
-  padding: 0 1px;
-}
-
-.treecol-text {
-  margin: 0 !important;
-}
-
-treecol[hideheader="true"] {
-  -moz-appearance: none;
-  border: none;
-  padding: 0;
-  max-height: 0;
-}
-
-/* ::::: column drag and drop styles ::::: */
-
-treecol[dragging="true"] {
-  color: GrayText;
-}
-
-treechildren::-moz-tree-column(insertbefore) {
-  border-inline-start: 1px solid ThreeDShadow;
-}
-
-treechildren::-moz-tree-column(insertafter) {
-  border-inline-end: 1px solid ThreeDShadow;
-}
-
-/* ::::: column picker :::::  */
-
-.tree-columnpicker-icon {
-  list-style-image: url("chrome://global/skin/tree/columnpicker.gif");
-}
-
-/* ::::: twisty :::::  */
-
-treechildren::-moz-tree-twisty {
-  -moz-appearance: treetwisty;
-  padding-inline-end: 2px;
-}
-
-treechildren::-moz-tree-twisty(open) {
-  -moz-appearance: treetwistyopen;
-}
-
-treechildren::-moz-tree-twisty(Name, separator) {
-  -moz-appearance: none;
-}
-
-treechildren::-moz-tree-indentation {
-  width: 16px;
-}
-
 /* ::::: editable tree ::::: */
 
 .tree-input {
   -moz-appearance: none;
   border-width: 0;
   box-shadow: var(--focus-ring-box-shadow);
-  margin: 0;
-  margin-inline-start: -2px;
-  padding: 2px 1px 1px;
 }
-
-treechildren::-moz-tree-cell(active, selected, focus, editing) {
-  background-color: transparent;
-  border: none;
-}
-
-treechildren::-moz-tree-cell-text(active, selected, editing) {
-  opacity: 0;
-}
deleted file mode 100644
--- a/toolkit/themes/osx/global/tree/arrow-collapsed-rtl.svg
+++ /dev/null
@@ -1,6 +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" 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>
deleted file mode 100644
--- a/toolkit/themes/osx/global/tree/arrow-collapsed.svg
+++ /dev/null
@@ -1,6 +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" 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-expanded.svg
+++ /dev/null
@@ -1,6 +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" 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>
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/twisty-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="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" >
+  <path d="M1 4l4 4 1-1-3-3 3-3-1-1-4 4z" fill="context-fill"/>
+</svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/twisty-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="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7,4L3,8L2,7l3-3L2,1l1-1L7,4z" fill="context-fill"/>
+</svg>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/twisty-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="8" height="8" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 7L0 3l1-1 3 3 3-3 1 1-4 4z" fill="context-fill"/>
+</svg>
\ No newline at end of file
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -35,16 +35,19 @@ toolkit.jar:
   skin/classic/global/icons/find-next-arrow.svg            (../../shared/icons/find-next-arrow.svg)
   skin/classic/global/icons/help.svg                       (../../shared/icons/help.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.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/resizer.svg                    (../../shared/icons/resizer.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/twisty-collapsed.svg           (../../shared/icons/twisty-collapsed.svg)
+  skin/classic/global/icons/twisty-collapsed-rtl.svg       (../../shared/icons/twisty-collapsed-rtl.svg)
+  skin/classic/global/icons/twisty-expanded.svg            (../../shared/icons/twisty-expanded.svg)
   skin/classic/global/icons/arrow-dropdown-12.svg          (../../shared/icons/arrow-dropdown-12.svg)
   skin/classic/global/icons/arrow-dropdown-16.svg          (../../shared/icons/arrow-dropdown-16.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/icons/warning.svg)
   skin/classic/global/illustrations/about-rights.svg       (../../shared/illustrations/about-rights.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/illustrations/about-license.svg      (../../shared/illustrations/about-license.svg)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)
   skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
copy from toolkit/themes/linux/global/tree.css
copy to toolkit/themes/shared/tree.inc.css
--- a/toolkit/themes/linux/global/tree.css
+++ b/toolkit/themes/shared/tree.inc.css
@@ -1,14 +1,14 @@
 /* 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/. */
 
 /* ===== tree.css ===================================================
-  == Styles used by the XUL outline element.
+  == Styles used by the XUL tree element.
   ======================================================================= */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: tree ::::: */
 
 tree {
   margin: 0 4px;
@@ -27,58 +27,56 @@ tree {
   border: 1px solid #000000;
 }
 
 
 /* ::::: tree rows ::::: */
 
 treechildren::-moz-tree-row {
   border: 1px solid transparent;
-  min-height: 18px;
+  min-height: 24px;
   height: 1.3em;
 }
 
 treechildren::-moz-tree-row(multicol, odd) {
   background-color: -moz-oddtreerow;
 }
 
 treechildren::-moz-tree-row(selected) {
   background-color: -moz-cellhighlight;
 }
 
 treechildren::-moz-tree-row(selected, focus) {
   background-color: Highlight;
 }
 
-treechildren::-moz-tree-row(current, focus) {
-  border: 1px dotted Highlight;
-}
-
-treechildren::-moz-tree-row(selected, current, focus) {
-  border: 1px dotted #F3D982;
-}
 
 /* ::::: tree cells ::::: */
 
 treechildren::-moz-tree-cell {
   padding: 0 2px;
 }
 
 treechildren::-moz-tree-cell-text {
   color: inherit;
 }
 
+treechildren::-moz-tree-image(selected),
+treechildren::-moz-tree-twisty(selected),
 treechildren::-moz-tree-cell-text(selected) {
   color: -moz-cellhighlighttext;
 }
 
+treechildren::-moz-tree-image(selected, focus),
+treechildren::-moz-tree-twisty(selected, focus),
 treechildren::-moz-tree-cell-text(selected, focus) {
   color: HighlightText;
 }
 
+
 /* ::::: lines connecting cells ::::: */
 
 treechildren::-moz-tree-line {
   border: 1px dotted ThreeDShadow;
 }
 
 treechildren::-moz-tree-line(selected, focus) {
   border: 1px dotted HighlightText;
@@ -110,21 +108,17 @@ treechildren::-moz-tree-drop-feedback {
 /* ::::: tree columns ::::: */
 
 treecol,
 treecolpicker {
   -moz-appearance: treeheadercell;
   -moz-box-align: center;
   -moz-box-pack: center;
   color: -moz-DialogText;
-}
-
-treecol:hover,
-treecolpicker:hover {
-  color: -moz-buttonhovertext;
+  padding: 0 4px;
 }
 
 .treecol-image {
   padding: 0 1px;
 }
 
 .treecol-text {
   margin: 0 !important;
@@ -143,53 +137,51 @@ treecol[dragging="true"] {
 treechildren::-moz-tree-column(insertbefore) {
   border-inline-start: 1px solid ThreeDShadow;
 }
 
 treechildren::-moz-tree-column(insertafter) {
   border-inline-end: 1px solid ThreeDShadow;
 }
 
-/* ::::: sort direction indicator :::::  */
-
-.treecol-sortdirection {
-  -moz-appearance: treeheadersortarrow;
-}
-
 /* ::::: column picker :::::  */
 
 .tree-columnpicker-icon {
   list-style-image: url("chrome://global/skin/tree/columnpicker.gif");
 }
 
+/* ::::: tree icons ::::: */
+
+treechildren::-moz-tree-image {
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 /* ::::: twisty :::::  */
 
 treechildren::-moz-tree-twisty {
   padding-inline-end: 4px;
+  padding-inline-start: 4px;
   padding-top: 1px;
-  width: 9px; /* The image's width is 9 pixels */
-  list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
+  width: 8px; /* The image's width is 8 pixels */
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
-treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(close) {
-  list-style-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
+treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
 }
 
 treechildren::-moz-tree-twisty(open) {
-  list-style-image: url("chrome://global/skin/tree/twisty-expanded.svg");
-}
-
-treechildren::-moz-tree-twisty(selected) {
-  fill: -moz-cellhighlighttext;
+  list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg");
 }
 
 treechildren::-moz-tree-indentation {
-  width: 18px;
+  width: 16px;
 }
 
 /* ::::: editable tree ::::: */
 
 treechildren::-moz-tree-row(selected, editing) {
   background-color: transparent;
   border: none;
 }
--- a/toolkit/themes/windows/global/button.css
+++ b/toolkit/themes/windows/global/button.css
@@ -103,17 +103,17 @@ button[type="menu-button"] {
 button.plain {
   margin: 0 !important;
   padding: 0 !important;
 }
 
 button[type="disclosure"] {
   margin: 0;
   -moz-appearance: none;
-  list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
   -moz-context-properties: fill;
   fill: currentColor;
   min-width: 0;
 }
 
 button[type="disclosure"][open="true"] {
-  list-style-image: url("chrome://global/skin/tree/twisty-expanded.svg");
+  list-style-image: url("chrome://global/skin/icons/twisty-expanded.svg");
 }
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -50,11 +50,8 @@ toolkit.jar:
   skin/classic/global/icons/Search-close.png               (icons/Search-close.png)
   skin/classic/global/icons/Question.png                   (icons/Question.png)
   skin/classic/global/icons/sslWarning.png                 (icons/sslWarning.png)
   skin/classic/global/icons/Warning.png                    (icons/Warning.png)
   skin/classic/global/icons/warning-large.png              (icons/warning-large.png)
   skin/classic/global/icons/windowControls.png             (icons/windowControls.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/twisty-collapsed.svg            (tree/twisty-collapsed.svg)
-  skin/classic/global/tree/twisty-collapsed-rtl.svg        (tree/twisty-collapsed-rtl.svg)
-  skin/classic/global/tree/twisty-expanded.svg             (tree/twisty-expanded.svg)
--- a/toolkit/themes/windows/global/tree.css
+++ b/toolkit/themes/windows/global/tree.css
@@ -1,170 +1,13 @@
 /* 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/. */
 
-/* ===== tree.css ===================================================
-  == Styles used by the XUL outline element.
-  ======================================================================= */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-/* ::::: tree ::::: */
-
-tree {
-  margin: 0 4px;
-  background-color: -moz-Field;
-  color: -moz-FieldText;
-  -moz-appearance: listbox;
-}
-
-/* ::::: tree focusring ::::: */
-
-.focusring > .tree-stack > .tree-rows > .tree-bodybox {
-  border: 1px solid transparent;
-}
-
-.focusring:-moz-focusring > .tree-stack > .tree-rows > .tree-bodybox {
-  border: 1px solid #000000;
-}
-
-
-/* ::::: tree rows ::::: */
-
-treechildren::-moz-tree-row {
-  border: 1px solid transparent;
-  min-height: 18px;
-  height: 1.3em;
-}
-
-treechildren::-moz-tree-row(selected) {
-  background-color: -moz-cellhighlight;
-}
-
-treechildren::-moz-tree-row(selected, focus) {
-  background-color: Highlight;
-}
-
-treechildren::-moz-tree-row(current, focus) {
-  border: 1px dotted Highlight;
-}
-
-treechildren::-moz-tree-row(selected, current, focus) {
-  border: 1px dotted #F3D982;
-}
-
-/* ::::: tree cells ::::: */
-
-treechildren::-moz-tree-cell {
-  padding: 0 2px;
-}
-
-treechildren::-moz-tree-cell-text {
-  color: inherit;
-}
-
-treechildren::-moz-tree-cell-text(selected) {
-  color: -moz-cellhighlighttext;
-}
-
-treechildren::-moz-tree-cell-text(selected, focus) {
-  color: HighlightText;
-}
-
-/* ::::: lines connecting cells ::::: */
-
-treechildren::-moz-tree-line {
-  border: 1px dotted ThreeDShadow;
-}
-
-treechildren::-moz-tree-line(selected, focus) {
-  border: 1px dotted HighlightText;
-}
-
-/* ::::: tree separator ::::: */
-
-treechildren::-moz-tree-separator {
-  border-top: 1px solid ThreeDShadow;
-  border-bottom: 1px solid ThreeDHighlight;
-}
-
-
-/* ::::: drop feedback ::::: */
-
-treechildren::-moz-tree-row(dropOn) {
-  background-color: Highlight;
-}
-
-treechildren::-moz-tree-cell-text(primary, dropOn) {
-  color: HighlightText;
-}
-
-treechildren::-moz-tree-drop-feedback {
-  background-color: Highlight;
-  width: 50px;
-  height: 2px;
-  margin-inline-start: 5px;
-}
-
-/* ::::: tree columns ::::: */
-
-treecol,
-treecolpicker {
-  -moz-appearance: treeheadercell;
-  -moz-box-align: center;
-  -moz-box-pack: center;
-  color: -moz-DialogText;
-  padding: 0 4px;
-}
-
-.treecol-image {
-  padding: 0 1px;
-}
-
-.treecol-text {
-  margin: 0 !important;
-}
-
-treecol[hideheader="true"] {
-  -moz-appearance: none;
-  border: none;
-  padding: 0;
-}
-
-/* ..... internal box ..... */
-
-treecol:hover:active,
-treecolpicker:hover:active {
-  padding-top: 1px;
-  padding-bottom: 0;
-  padding-inline-start: 5px;
-  padding-inline-end: 3px;
-}
-
-.treecol-image:hover:active {
-  padding-top: 1px;
-  padding-bottom: 0;
-  padding-inline-start: 2px;
-  padding-inline-end: 0;
-}
-
-/* ::::: column drag and drop styles ::::: */
-
-treecol[dragging="true"] {
-  color: GrayText;
-}
-
-treechildren::-moz-tree-column(insertbefore) {
-  border-inline-start: 1px solid ThreeDShadow;
-}
-
-treechildren::-moz-tree-column(insertafter) {
-  border-inline-end: 1px solid ThreeDShadow;
-}
+%include ../../shared/tree.inc.css
 
 /* ::::: sort direction indicator :::::  */
 
 .treecol-sortdirection {
   list-style-image: none;
 }
 
 treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="ascending"] {
@@ -179,202 +22,8 @@ treecol:not([hideheader="true"]) > .tree
   treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="ascending"] {
     list-style-image: url("chrome://global/skin/tree/sort-asc-classic.png");
   }
 
   treecol:not([hideheader="true"]) > .treecol-sortdirection[sortDirection="descending"] {
     list-style-image: url("chrome://global/skin/tree/sort-dsc-classic.png");
   }
 }
-
-/* ::::: column picker :::::  */
-
-.tree-columnpicker-icon {
-  list-style-image: url("chrome://global/skin/tree/columnpicker.gif");
-}
-
-/* ::::: twisty :::::  */
-
-treechildren::-moz-tree-twisty {
-  padding-inline-end: 1px;
-  padding-top: 1px;
-  width: 9px; /* The image's width is 9 pixels */
-  list-style-image: url("chrome://global/skin/tree/twisty-collapsed.svg");
-  -moz-context-properties: fill;
-  fill: #b6b6b6;
-}
-
-treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(close) {
-  list-style-image: url("chrome://global/skin/tree/twisty-collapsed-rtl.svg");
-}
-
-treechildren::-moz-tree-twisty(open) {
-  list-style-image: url("chrome://global/skin/tree/twisty-expanded.svg");
-  fill: #636363;
-}
-
-treechildren::-moz-tree-twisty(hover) {
-  fill: #4ed0f9;
-}
-
-treechildren::-moz-tree-indentation {
-  width: 12px;
-}
-
-/* ::::: editable tree ::::: */
-
-treechildren::-moz-tree-row(selected, editing) {
-  background-color: transparent;
-  border: none;
-}
-
-treechildren::-moz-tree-cell-text(selected, editing) {
-  color: inherit;
-}
-
-treechildren::-moz-tree-cell(active, selected, focus, editing) {
-  background-color: transparent;
-  border: none;
-}
-
-treechildren::-moz-tree-cell-text(active, selected, editing) {
-  opacity: 0;
-}
-
-.tree-input {
-  -moz-appearance: none;
-  border: 1px solid Highlight;
-  margin: 0;
-  margin-inline-start: -4px;
-  padding: 1px;
-}
-
-%ifdef XP_WIN
-@media (-moz-windows-default-theme) {
-  treechildren {
-    --treechildren-outline: none;
-    --treechildren-focusColor: rgb(123,195,255);
-    --treechildren-selectedFocusColor: rgb(205,232,255);
-    --treechildren-currentColor: rgb(125,162,206);
-    --treechildren-hoverColor: rgb(229,243,255);
-    --treechildren-selectedBorder: rgb(217,217,217);
-    --treechildren-selectedBackground: rgb(217,217,217);
-    --treechildren-currentFocusBorder: var(--treechildren-focusColor);
-    --treechildren-selectedFocusBorder: var(--treechildren-selectedFocusColor) var(--treechildren-selectedFocusColor) rgb(165,214,255);
-    --treechildren-selectedFocusBackground: var(--treechildren-selectedFocusColor);
-    --treechildren-selectedFocusCurrentBorder: var(--treechildren-focusColor);
-    --treechildren-selectedFocusCurrentBackground: rgb(205,232,255);
-    --treechildren-hoverBorder: var(--treechildren-hoverColor);
-    --treechildren-hoverBackground: rgb(229,243,255);
-    --treechildren-hoverCurrentBorder: var(--treechildren-currentColor);
-    --treechildren-hoverCurrentBackground: rgba(131,183,249,.16);
-    --treechildren-hoverSelectedBorder: var(--treechildren-focusColor);
-    --treechildren-hoverSelectedBackground: rgb(205,232,255);
-  }
-
-  treechildren::-moz-tree-row {
-    height: 1.8em;
-    color: -moz-FieldText;
-    margin-inline-start: 1px;
-    margin-inline-end: 1px;
-    border-width: 1px;
-    border-color: transparent;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  treechildren::-moz-tree-row(selected) {
-    border-color: var(--treechildren-selectedBorder);
-    background-color: var(--treechildren-selectedBackground);
-    outline: var(--treechildren-outline);
-  }
-
-  treechildren::-moz-tree-row(current, focus) {
-    border-style: solid;
-    border-color: var(--treechildren-currentFocusBorder);
-    outline: var(--treechildren-outline);
-  }
-
-  treechildren::-moz-tree-row(selected, focus),
-  treechildren::-moz-tree-row(dropOn) {
-    border-color: var(--treechildren-selectedFocusBorder);
-    background-color: var(--treechildren-selectedFocusBackground);
-  }
-
-  treechildren::-moz-tree-row(selected, current, focus) {
-    border-style: solid;
-    border-color: var(--treechildren-selectedFocusCurrentBorder);
-    background-color: var(--treechildren-selectedFocusCurrentBackground);
-  }
-
-  treechildren::-moz-tree-row(hover) {
-    border-color: var(--treechildren-hoverBorder);
-    background-color: var(--treechildren-hoverBackground);
-    outline: var(--treechildren-outline);
-  }
-
-  treechildren::-moz-tree-row(hover, current) {
-    border-color: var(--treechildren-hoverCurrentBorder);
-    background-image: var(--treechildren-hoverCurrentBackground);
-  }
-
-  treechildren::-moz-tree-row(hover, selected) {
-    border-color: var(--treechildren-hoverSelectedBorder);
-    background-color: var(--treechildren-hoverSelectedBackground);
-  }
-
-  tree[disabled="true"] > treechildren::-moz-tree-row {
-    background: none;
-    border-color: transparent;
-  }
-
-  treechildren::-moz-tree-cell(dropOn) {
-    background-image: none;
-    background-color: transparent;
-    border-radius: 0;
-  }
-
-  treechildren::-moz-tree-cell-text(primary, dropOn) {
-    color: -moz-FieldText;
-  }
-
-  treechildren::-moz-tree-cell-text {
-    padding-bottom: initial;
-    border-color: transparent;
-    background-color: transparent;
-  }
-
-  treechildren::-moz-tree-cell-text(selected, focus) {
-    color: -moz-DialogText;
-  }
-
-  @media (-moz-os-version: windows-win7),
-         (-moz-os-version: windows-win8) {
-    treechildren {
-      --treechildren-2ndBorderColor: rgba(255,255,255,.4);
-      --treechildren-outline: 1px solid var(--treechildren-2ndBorderColor);
-      --treechildren-selectedBackground: rgba(190,190,190,.4);
-      --treechildren-currentFocusBorder: var(--treechildren-currentColor);
-      --treechildren-selectedFocusBorder: rgb(132,172,221) var(--treechildren-2ndBorderColor) var(--treechildren-currentColor);
-      --treechildren-selectedFocusBackground: rgba(131,183,249,.375);
-      --treechildren-selectedFocusCurrentBorder: var(--treechildren-currentColor);
-      --treechildren-selectedFocusCurrentBackground: rgba(131,183,249,.5);
-      --treechildren-hoverBorder: rgb(184,214,251);
-      --treechildren-hoverBackground: rgba(131,183,249,.16);
-      --treechildren-hoverSelectedBorder: var(--treechildren-currentColor);
-      --treechildren-hoverSelectedBackground: rgba(131,183,249,.5);
-    }
-  }
-
-  @media (-moz-os-version: windows-win7) {
-    treechildren::-moz-tree-row(selected),
-    treechildren::-moz-tree-row(dropOn),
-    treechildren::-moz-tree-row(hover) {
-      background-image: linear-gradient(rgba(255,255,255,.7), transparent);
-    }
-
-    treechildren::-moz-tree-row {
-      border-radius: 3px;
-      -moz-outline-radius: 3px;
-    }
-  }
-}
-%endif
deleted file mode 100644
--- a/toolkit/themes/windows/global/tree/twisty-collapsed-rtl.svg
+++ /dev/null
@@ -1,6 +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="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
-  <path d="m 6.5,0.5 -4,4 4,4"/>
-</svg>
deleted file mode 100644
--- a/toolkit/themes/windows/global/tree/twisty-collapsed.svg
+++ /dev/null
@@ -1,6 +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="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
-  <path d="m 2.5,0.5 4,4 -4,4"/>
-</svg>
deleted file mode 100644
--- a/toolkit/themes/windows/global/tree/twisty-expanded.svg
+++ /dev/null
@@ -1,6 +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="9" height="9" xmlns="http://www.w3.org/2000/svg" stroke="context-fill" stroke-width="1.6" fill="none">
-  <path d="m 8.5,2.5 -4,4 -4,-4"/>
-</svg>