Bug 1176565 - Update tree and list box styling for Windows 10. r=dao, a=lmandel
authorRichard Marti <richard.marti@gmail.com>
Thu, 09 Jul 2015 21:24:29 +0200
changeset 275469 cdcb857553252cd6ecedcb58c3222a5d6b500c25
parent 275468 1c5ca6f8fc3ffaddeb242b29917154e770b020a4
child 275470 d086a62eb08c1e68a240d499e0f7dc1e7a50435d
push id863
push userraliiev@mozilla.com
push dateMon, 03 Aug 2015 13:22:43 +0000
treeherdermozilla-release@f6321b14228d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, lmandel
bugs1176565
milestone40.0
Bug 1176565 - Update tree and list box styling for Windows 10. r=dao, a=lmandel
toolkit/themes/windows/global/jar.mn
toolkit/themes/windows/global/listbox.css
toolkit/themes/windows/global/tree.css
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -28,17 +28,17 @@ toolkit.jar:
         skin/classic/global/filefield.css
         skin/classic/global/filepicker.css
         skin/classic/global/findBar.css
 *       skin/classic/global/global.css
         skin/classic/global/globalBindings.xml
         skin/classic/global/groupbox.css
 *       skin/classic/global/inContentUI.css
         skin/classic/global/linkTree.css
-*       skin/classic/global/listbox.css
+        skin/classic/global/listbox.css
 *       skin/classic/global/menu.css
         skin/classic/global/menulist.css
         skin/classic/global/netError.css
         skin/classic/global/numberbox.css
 *       skin/classic/global/notification.css
         skin/classic/global/passwordmgr.css
 *       skin/classic/global/popup.css
         skin/classic/global/preferences.css
--- a/toolkit/themes/windows/global/listbox.css
+++ b/toolkit/themes/windows/global/listbox.css
@@ -1,24 +1,16 @@
 /* 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/. */
 
 /* ===== listbox.css =======================================================
   == Styles used by XUL listbox-related elements.
   ======================================================================= */
 
-%filter substitution
-%define selectedBorderColor rgb(217,217,217)
-%define hoverAndFocusBorderColor rgb(125,162,206)
-%define selectedFocusBorderColor rgb(132,172,221)
-%define selectedGradientColor1 rgba(190,190,190,.1)
-%define selectedGradientColor2 rgba(190,190,190,.4)
-%define selectedFocusGradientColor1 rgba(131,183,249,.16)
-%define selectedFocusGradientColor2 rgba(131,183,249,.375)
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: listbox ::::: */
 
 listbox {
   -moz-appearance: listbox;
   margin: 2px 4px;
@@ -149,59 +141,100 @@ listheader[sortable="true"]:hover:active
   min-width: 13px;
   min-height: 13px;
   background: -moz-Field no-repeat 50% 50%;
 }
 
 @media (-moz-windows-default-theme) {
   @media not all and (-moz-os-version: windows-xp) {
     listitem {
+      --listitem-selectedColor: rgb(217,217,217);
+      --listitem-selectedBorder: var(--listitem-selectedColor);
+      --listitem-selectedBottomBorder: rgb(204,204,204);
+      --listitem-selectedBackground: var(--listitem-selectedColor);
+      --listitem-selectedImage: none;
+      --listitem-selectedCurrentBorder: rgb(123,195,255);
+      --listitem-selectedFocusColor: rgb(205,232,255);
+      --listitem-selectedFocusBorder: var(--listitem-selectedFocusColor);
+      --listitem-selectedFocusBottomBorder: rgb(165,214,255);
+      --listitem-selectedFocusBackground: var(--listitem-selectedFocusColor);
+      --listitem-selectedFocusImage: none;
+      --listitem-selectedFocusCurrentBorder: var(--listitem-selectedFocusColor);
+      --listitem-selectedFocusCurrentBottomBorder: var(--listitem-selectedFocusBottomBorder);
+      --listitem-selectedFocusCurrentBackground: var(--listitem-selectedFocusColor);
+
       color: -moz-FieldText;
       -moz-margin-start: 1px;
       -moz-margin-end: 1px;
       padding-top: 1px;
       padding-bottom: 1px;
       border-width: 1px;
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
 
     listitem[selected="true"] {
-      border-color: @selectedBorderColor@;
-      background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
-      background-color: rgba(190,190,190,.15);
+      border-top-color: var(--listitem-selectedBorder);
+      border-right-color: var(--listitem-selectedBorder);
+      border-left-color: var(--listitem-selectedBorder);
+      border-bottom-color: var(--listitem-selectedBottomBorder);
+      background-image: var(--listitem-selectedImage);
+      background-color: var(--listitem-selectedBackground);
       color: -moz-DialogText;
     }
 
     listbox:focus > listitem[selected="true"] {
-      border-color: @selectedFocusBorderColor@;
-      background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
-      background-color: rgba(131,183,249,.02);
+      border-top-color: var(--listitem-selectedFocusBorder);
+      border-right-color: var(--listitem-selectedFocusBorder);
+      border-left-color: var(--listitem-selectedFocusBorder);
+      border-bottom-color: var(--listitem-selectedFocusBottomBorder);
+      background-image: var(--listitem-selectedFocusImage);
+      background-color: var(--listitem-selectedFocusBackground);
       color: -moz-DialogText;
     }
 
     listbox:focus > listitem[current="true"] {
-      border-color: @hoverAndFocusBorderColor@;
+      border-color: var(--listitem-selectedCurrentBorder);
       outline: none;
     }
 
     listbox:focus > listitem[selected="true"][current="true"] {
-      background-color: rgba(131,183,249,.15);
+      border-top-color: var(--listitem-selectedFocusCurrentBorder);
+      border-right-color: var(--listitem-selectedFocusCurrentBorder);
+      border-left-color: var(--listitem-selectedFocusCurrentBorder);
+      border-bottom-color: var(--listitem-selectedFocusCurrentBottomBorder);
+      background-color: var(--listitem-selectedFocusCurrentBackground);
       outline: none;
     }
   }
 
   @media (-moz-os-version: windows-vista),
          (-moz-os-version: windows-win7) {
     listitem {
+      --listitem-selectedBottomBorder: var(--listitem-selectedColor);
+      --listitem-selectedBackground: rgba(190,190,190,.15);
+      --listitem-selectedImage: linear-gradient(rgba(190,190,190,.1), rgba(190,190,190,.4));
+      --listitem-selectedCurrentBorder: rgb(125,162,206);
+      --listitem-selectedFocusColor: rgb(132,172,221);
+      --listitem-selectedFocusBottomBorder: var(--listitem-selectedFocusColor);
+      --listitem-selectedFocusBackground: rgba(131,183,249,.02);
+      --listitem-selectedFocusImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.375));
+      --listitem-selectedFocusCurrentBackground: rgba(131,183,249,.15);
+
       border-radius: 3px;
       box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 -1px 0 1px rgba(255,255,255,.2);
     }
+  }
 
-    listitem[selected="true"] {
-      background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
-    }
-
-    listbox:focus > listitem[selected="true"] {
-      background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
+  @media (-moz-os-version: windows-win8) {
+    listitem {
+      --listitem-selectedBottomBorder: var(--listitem-selectedColor);
+      --listitem-selectedBackground: rgba(190,190,190,.15);
+      --listitem-selectedImage: linear-gradient(rgba(190,190,190,.4), rgba(190,190,190,.4));
+      --listitem-selectedCurrentBorder: rgb(125,162,206);
+      --listitem-selectedFocusColor: rgb(132,172,221);
+      --listitem-selectedFocusBottomBorder: var(--listitem-selectedFocusColor);
+      --listitem-selectedFocusBackground: rgba(131,183,249,.02);
+      --listitem-selectedFocusImage: linear-gradient(rgba(131,183,249,.375), rgba(131,183,249,.375));
+      --listitem-selectedFocusCurrentBackground: rgba(131,183,249,.15);
     }
   }
 }
--- a/toolkit/themes/windows/global/tree.css
+++ b/toolkit/themes/windows/global/tree.css
@@ -1,32 +1,16 @@
 /* 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.
   ======================================================================= */
 
-%filter substitution
-%define selectedBorderColor rgb(217,217,217)
-%define hoverAndFocusBorderColor rgb(125,162,206)
-%define selectedFocusBorderColor rgb(132,172,221)
-%define hoverBorderColor rgb(184,214,251)
-%define whiteOpacityBorderColor rgba(255,255,255,.4)
-%define whiteOpacityBottomBorderColor rgba(255,255,255,.6)
-%define selectedGradientColor1 rgba(190,190,190,.1)
-%define selectedGradientColor2 rgba(190,190,190,.4)
-%define selectedFocusGradientColor1 rgba(131,183,249,.16)
-%define selectedFocusGradientColor2 rgba(131,183,249,.375)
-%define hoverAndCurrentFocusGradientColor1 rgba(131,183,249,.28)
-%define hoverAndCurrentFocusGradientColor2 rgba(131,183,249,.5)
-%define hoverGradientColor1 rgba(131,183,249,.05)
-%define hoverGradientColor2 rgba(131,183,249,.16)
-
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: tree ::::: */
 
 tree {
   margin: 0px 4px;
   border: 2px solid;
   -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
@@ -414,88 +398,120 @@ treechildren::-moz-tree-cell-text(select
     list-style-image: url("chrome://global/skin/tree/twisty-clsd-hover-rtl.png");
   }
 
   treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(hover, open) {
     list-style-image: url("chrome://global/skin/tree/twisty-open-hover-rtl.png");
   }
 
   @media (-moz-windows-default-theme) {
+    treechildren {
+      --treechildren-outline: none;
+      --treechildren-2ndBorderColor: rgba(255,255,255,.4);
+      --treechildren-selectedColor: rgb(217,217,217);
+      --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: var(--treechildren-selectedColor);
+      --treechildren-selectedBottomBorder: rgb(204,204,204);
+      --treechildren-selectedImage: linear-gradient(rgb(217,217,217), rgb(217,217,217));
+      --treechildren-selectedBackground: transparent;
+      --treechildren-currentFocusBorder: var(--treechildren-focusColor);
+      --treechildren-currentFocusBottomBorder: var(--treechildren-focusColor);
+      --treechildren-selectedFocusBorder: var(--treechildren-selectedFocusColor);
+      --treechildren-selectedFocusBottomBorder: rgb(165,214,255);
+      --treechildren-selectedFocusImage: none;
+      --treechildren-selectedFocusBackground: var(--treechildren-selectedFocusColor);
+      --treechildren-selectedFocusCurrentBorder: var(--treechildren-focusColor);
+      --treechildren-selectedFocusCurrentBottomBorder: var(--treechildren-focusColor);
+      --treechildren-selectedFocusCurrentImage: linear-gradient(rgb(205,232,255), rgb(205,232,255));
+      --treechildren-hoverBorder: var(--treechildren-hoverColor);
+      --treechildren-hoverBottomBorder: var(--treechildren-hoverColor);
+      --treechildren-hoverImage: linear-gradient(rgb(229,243,255), rgb(229,243,255));
+      --treechildren-hoverCurrentBorder: var(--treechildren-currentColor);
+      --treechildren-hoverCurrentBottomBorder: var(--treechildren-currentColor);
+      --treechildren-hoverCurrentImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.16));
+      --treechildren-hoverSelectedBorder: var(--treechildren-focusColor);
+      --treechildren-hoverSelectedBottomBorder: var(--treechildren-focusColor);
+      --treechildren-hoverSelectedImage: linear-gradient(rgb(205,232,255), rgb(205,232,255));
+    }
+
     treechildren:not(.autocomplete-treebody)::-moz-tree-row {
       height: 1.8em;
       color: -moz-FieldText;
       -moz-margin-start: 1px;
       -moz-margin-end: 1px;
       border-width: 1px;
       border-color: transparent;
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
-      -moz-border-top-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-right-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-left-colors: @selectedBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-bottom-colors: @selectedBorderColor@ @whiteOpacityBottomBorderColor@;
-      background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
-      background-color: transparent;
-      outline: 1px solid @whiteOpacityBorderColor@;
+      -moz-border-top-colors: var(--treechildren-selectedBorder);
+      -moz-border-right-colors: var(--treechildren-selectedBorder);
+      -moz-border-left-colors: var(--treechildren-selectedBorder);
+      -moz-border-bottom-colors: var(--treechildren-selectedBottomBorder);
+      background-image: var(--treechildren-selectedImage);
+      background-color: var(--treechildren-selectedBackground);
+      outline: var(--treechildren-outline);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(current, focus) {
       border-style: solid;
-      -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
-      outline: 1px solid @whiteOpacityBorderColor@;
+      -moz-border-top-colors: var(--treechildren-currentFocusBorder);
+      -moz-border-right-colors: var(--treechildren-currentFocusBorder);
+      -moz-border-left-colors: var(--treechildren-currentFocusBorder);
+      -moz-border-bottom-colors: var(--treechildren-currentFocusBottomBorder);
+      outline: var(--treechildren-outline);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus),
     treechildren::-moz-tree-row(dropOn) {
-      -moz-border-top-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-right-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-left-colors: @selectedFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-bottom-colors: @selectedFocusBorderColor@ @whiteOpacityBottomBorderColor@;
-      background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
-      background-color: transparent;
+      -moz-border-top-colors: var(--treechildren-selectedFocusBorder);
+      -moz-border-right-colors: var(--treechildren-selectedFocusBorder);
+      -moz-border-left-colors: var(--treechildren-selectedFocusBorder);
+      -moz-border-bottom-colors: var(--treechildren-selectedFocusBottomBorder);
+      background-image: var(--treechildren-selectedFocusImage);
+      background-color: var(--treechildren-selectedFocusBackground);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
       border-style: solid;
-      -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
-      background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
+      -moz-border-top-colors: var(--treechildren-selectedFocusCurrentBorder);
+      -moz-border-right-colors: var(--treechildren-selectedFocusCurrentBorder);
+      -moz-border-left-colors: var(--treechildren-selectedFocusCurrentBorder);
+      -moz-border-bottom-colors: var(--treechildren-selectedFocusCurrentBottomBorder);
+      background-image: var(--treechildren-selectedFocusCurrentImage);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
-      -moz-border-top-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-right-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-left-colors: @hoverBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-bottom-colors: @hoverBorderColor@ @whiteOpacityBottomBorderColor@;
-      background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
-      outline: 1px solid @whiteOpacityBorderColor@;
+      -moz-border-top-colors: var(--treechildren-hoverBorder);
+      -moz-border-right-colors: var(--treechildren-hoverBorder);
+      -moz-border-left-colors: var(--treechildren-hoverBorder);
+      -moz-border-bottom-colors: var(--treechildren-hoverBottomBorder);
+      background-image: var(--treechildren-hoverImage);
+      outline: var(--treechildren-outline);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, current) {
-      -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
-      background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
+      -moz-border-top-colors: var(--treechildren-hoverCurrentBorder);
+      -moz-border-right-colors: var(--treechildren-hoverCurrentBorder);
+      -moz-border-left-colors: var(--treechildren-hoverCurrentBorder);
+      -moz-border-bottom-colors: var(--treechildren-hoverCurrentBottomBorder);
+      background-image: var(--treechildren-hoverCurrentImage);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) {
-      -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-left-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
-      -moz-border-bottom-colors: @hoverAndFocusBorderColor@ @whiteOpacityBottomBorderColor@;
-      background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
+      -moz-border-top-colors: var(--treechildren-hoverSelectedBorder);
+      -moz-border-right-colors: var(--treechildren-hoverSelectedBorder);
+      -moz-border-left-colors: var(--treechildren-hoverSelectedBorder);
+      -moz-border-bottom-colors: var(--treechildren-hoverSelectedBottomBorder);
+      background-image: var(--treechildren-hoverSelectedImage);
     }
 
     tree[disabled="true"] > treechildren::-moz-tree-row {
       background: none;
       -moz-border-top-colors: transparent;
       -moz-border-right-colors: transparent;
       -moz-border-left-colors: transparent;
       -moz-border-bottom-colors: transparent;
@@ -514,42 +530,67 @@ treechildren::-moz-tree-cell-text(select
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text(selected, focus) {
       color: -moz-DialogText;
     }
 
     @media (-moz-os-version: windows-vista),
            (-moz-os-version: windows-win7) {
+      treechildren {
+        --treechildren-outline: 1px solid var(--treechildren-2ndBorderColor);
+        --treechildren-2ndBottomBorderColor: rgba(255,255,255,.6);
+        --treechildren-selectedBorder: var(--treechildren-selectedColor) var(--treechildren-2ndBorderColor);
+        --treechildren-selectedBottomBorder: var(--treechildren-selectedColor) var(--treechildren-2ndBottomBorderColor);
+        --treechildren-selectedImage: linear-gradient(rgba(190,190,190,.1), rgba(190,190,190,.4));
+        --treechildren-currentFocusBorder: var(--treechildren-currentColor) var(--treechildren-2ndBorderColor);
+        --treechildren-currentFocusBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor);
+        --treechildren-selectedFocusBorder: rgb(132,172,221) var(--treechildren-2ndBorderColor);
+        --treechildren-selectedFocusBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor);
+        --treechildren-selectedFocusImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.375));
+        --treechildren-selectedFocusBackground: transparent;
+        --treechildren-selectedFocusCurrentBorder: var(--treechildren-currentColor) var(--treechildren-2ndBorderColor);
+        --treechildren-selectedFocusCurrentBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor);
+        --treechildren-selectedFocusCurrentImage: linear-gradient(rgba(131,183,249,.28), rgba(131,183,249,.5));
+        --treechildren-hoverBorder: rgb(184,214,251) var(--treechildren-2ndBorderColor);
+        --treechildren-hoverBottomBorder: rgb(184,214,251) var(--treechildren-2ndBottomBorderColor);
+        --treechildren-hoverImage: linear-gradient(rgba(131,183,249,.05), rgba(131,183,249,.16));
+        --treechildren-hoverCurrentBorder: var(--treechildren-currentColor) var(--treechildren-2ndBorderColor);
+        --treechildren-hoverCurrentBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor);
+        --treechildren-hoverCurrentImage: linear-gradient(rgba(131,183,249,.05), rgba(131,183,249,.16));
+        --treechildren-hoverSelectedBorder: var(--treechildren-currentColor) var(--treechildren-2ndBorderColor);
+        --treechildren-hoverSelectedBottomBorder: var(--treechildren-currentColor) var(--treechildren-2ndBottomBorderColor);
+        --treechildren-hoverSelectedImage: linear-gradient(rgba(131,183,249,.28), rgba(131,183,249,.5));
+      }
+
       treechildren:not(.autocomplete-treebody)::-moz-tree-row {
         border-width: 2px;
         border-radius: 3px;
         -moz-outline-radius: 3px;
       }
-
-      treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
-        background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
-      }
-
-      treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus),
-      treechildren::-moz-tree-row(dropOn) {
-        background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
-      }
+    }
 
-      treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
-        background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
-      }
-
-      treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
-        background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@);
-      }
-
-      treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, current) {
-        background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@);
-      }
-
-      treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) {
-        background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
+    @media (-moz-os-version: windows-win8) {
+      treechildren {
+        --treechildren-outline: 1px solid var(--treechildren-2ndBorderColor);
+        --treechildren-selectedBorder: var(--treechildren-selectedColor);
+        --treechildren-selectedBottomBorder: var(--treechildren-selectedColor);
+        --treechildren-selectedImage: linear-gradient(rgba(190,190,190,.4), rgba(190,190,190,.4));
+        --treechildren-currentFocusBorder: var(--treechildren-currentColor);
+        --treechildren-currentFocusBottomBorder: var(--treechildren-currentColor);
+        --treechildren-selectedFocusBorder: rgb(132,172,221) var(--treechildren-2ndBorderColor);
+        --treechildren-selectedFocusBottomBorder: var(--treechildren-currentColor);
+        --treechildren-selectedFocusImage: linear-gradient(rgba(131,183,249,.375), rgba(131,183,249,.375));
+        --treechildren-selectedFocusBackground: transparent;
+        --treechildren-selectedFocusCurrentBorder: var(--treechildren-currentColor);
+        --treechildren-selectedFocusCurrentBottomBorder: var(--treechildren-currentColor);
+        --treechildren-selectedFocusCurrentImage: linear-gradient(rgba(131,183,249,.5), rgba(131,183,249,.5));
+        --treechildren-hoverBorder: rgb(184,214,251);
+        --treechildren-hoverBottomBorder: rgb(184,214,251);
+        --treechildren-hoverImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.16));
+        --treechildren-hoverSelectedBorder: var(--treechildren-currentColor);
+        --treechildren-hoverSelectedBottomBorder: var(--treechildren-currentColor);
+        --treechildren-hoverSelectedImage: linear-gradient(rgba(131,183,249,.5), rgba(131,183,249,.5));
       }
     }
   }
 }
 %endif