Bug 1430871 - Stop using -moz-border-*-colors for tree rows on Windows 7. r?Paenglab draft
authorDão Gottwald <dao@mozilla.com>
Tue, 16 Jan 2018 20:52:29 +0100
changeset 721148 d20c4b78d60c906cd5d542da7f9d53d3a5a14a0a
parent 720975 9be7249e74fd7f6d9163b59d3386ed01038197a0
child 746244 13c0407e220ef135b05c1aab0d63e385a49b5b36
push id95742
push userdgottwald@mozilla.com
push dateTue, 16 Jan 2018 19:53:03 +0000
reviewersPaenglab
bugs1430871
milestone59.0a1
Bug 1430871 - Stop using -moz-border-*-colors for tree rows on Windows 7. r?Paenglab MozReview-Commit-ID: 4t1DdSGJhAx
toolkit/themes/windows/global/tree.css
--- a/toolkit/themes/windows/global/tree.css
+++ b/toolkit/themes/windows/global/tree.css
@@ -346,20 +346,16 @@ tree[seltype="text"] > treechildren::-mo
 
 treechildren::-moz-tree-cell-text(active, selected, editing) {
   opacity: 0;
 }
 
 .tree-input {
   -moz-appearance: none;
   border: 1px solid Highlight;
-  -moz-border-top-colors: Highlight;
-  -moz-border-bottom-colors: Highlight;
-  -moz-border-left-colors: Highlight;
-  -moz-border-right-colors: Highlight;
   margin: 0;
   margin-inline-start: -4px;
   padding: 1px;
 }
 
 %ifdef XP_WIN
 @media (-moz-windows-default-theme) {
   treechildren {
@@ -401,84 +397,67 @@ treechildren::-moz-tree-cell-text(active
     margin-inline-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: var(--treechildren-selectedBorder);
-    -moz-border-right-colors: var(--treechildren-selectedBorder);
-    -moz-border-left-colors: var(--treechildren-selectedBorder);
-    -moz-border-bottom-colors: var(--treechildren-selectedBottomBorder);
+    border-color: var(--treechildren-selectedBorder);
+    border-bottom-color: 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: var(--treechildren-currentFocusBorder);
-    -moz-border-right-colors: var(--treechildren-currentFocusBorder);
-    -moz-border-left-colors: var(--treechildren-currentFocusBorder);
-    -moz-border-bottom-colors: var(--treechildren-currentFocusBottomBorder);
+    border-color: var(--treechildren-currentFocusBorder);
+    border-bottom-color: 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: var(--treechildren-selectedFocusBorder);
-    -moz-border-right-colors: var(--treechildren-selectedFocusBorder);
-    -moz-border-left-colors: var(--treechildren-selectedFocusBorder);
-    -moz-border-bottom-colors: var(--treechildren-selectedFocusBottomBorder);
+    border-color: var(--treechildren-selectedFocusBorder);
+    border-bottom-color: 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: var(--treechildren-selectedFocusCurrentBorder);
-    -moz-border-right-colors: var(--treechildren-selectedFocusCurrentBorder);
-    -moz-border-left-colors: var(--treechildren-selectedFocusCurrentBorder);
-    -moz-border-bottom-colors: var(--treechildren-selectedFocusCurrentBottomBorder);
+    border-color: var(--treechildren-selectedFocusCurrentBorder);
+    border-bottom-color: var(--treechildren-selectedFocusCurrentBottomBorder);
     background-image: var(--treechildren-selectedFocusCurrentImage);
   }
 
   treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
-    -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);
+    border-color: var(--treechildren-hoverBottomBorder);
+    border-bottom-color: 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: var(--treechildren-hoverCurrentBorder);
-    -moz-border-right-colors: var(--treechildren-hoverCurrentBorder);
-    -moz-border-left-colors: var(--treechildren-hoverCurrentBorder);
-    -moz-border-bottom-colors: var(--treechildren-hoverCurrentBottomBorder);
+    border-color: var(--treechildren-hoverCurrentBorder);
+    border-bottom-color: var(--treechildren-hoverCurrentBottomBorder);
     background-image: var(--treechildren-hoverCurrentImage);
   }
 
   treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) {
-    -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);
+    border-color: var(--treechildren-hoverSelectedBorder);
+    border-bottom-color: 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;
+    border-color: transparent;
   }
 
   treechildren::-moz-tree-cell(dropOn) {
     background-image: none;
     background-color: transparent;
     border-radius: 0;
   }
 
@@ -491,51 +470,18 @@ treechildren::-moz-tree-cell-text(active
     border-color: transparent;
     background-color: transparent;
   }
 
   treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text(selected, focus) {
     color: -moz-DialogText;
   }
 
-  @media (-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;
-    }
-  }
-
-  @media (-moz-os-version: windows-win8) {
+  @media (-moz-os-version: windows-win7),
+         (-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);
@@ -548,10 +494,26 @@ treechildren::-moz-tree-cell-text(active
       --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));
     }
   }
+
+  @media (-moz-os-version: windows-win7) {
+    treechildren {
+      --treechildren-selectedImage: linear-gradient(rgba(190,190,190,.1), rgba(190,190,190,.4));
+      --treechildren-selectedFocusImage: linear-gradient(rgba(131,183,249,.16), rgba(131,183,249,.375));
+      --treechildren-selectedFocusCurrentImage: linear-gradient(rgba(131,183,249,.28), rgba(131,183,249,.5));
+      --treechildren-hoverImage: linear-gradient(rgba(131,183,249,.05), rgba(131,183,249,.16));
+      --treechildren-hoverCurrentImage: linear-gradient(rgba(131,183,249,.05), rgba(131,183,249,.16));
+      --treechildren-hoverSelectedImage: linear-gradient(rgba(131,183,249,.28), rgba(131,183,249,.5));
+    }
+
+    treechildren:not(.autocomplete-treebody)::-moz-tree-row {
+      border-radius: 3px;
+      -moz-outline-radius: 3px;
+    }
+  }
 }
 %endif