Bug 1169981 - Add win10 media query to listitem and treechildren. r=dao, a=lizzard
authorRichard Marti <richard.marti@gmail.com>
Mon, 08 Jun 2015 08:05:00 -0400
changeset 266206 0c1d5e2461d4
parent 266205 62f75a6439dd
child 266207 d810a18a0e0f
push id4787
push userryanvm@gmail.com
push date2015-06-08 17:52 +0000
treeherdermozilla-beta@48c9f45a00f2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, lizzard
bugs1169981
milestone39.0
Bug 1169981 - Add win10 media query to listitem and treechildren. r=dao, a=lizzard
toolkit/themes/windows/global/listbox-aero.css
toolkit/themes/windows/global/tree-aero.css
--- a/toolkit/themes/windows/global/listbox-aero.css
+++ b/toolkit/themes/windows/global/listbox-aero.css
@@ -15,53 +15,52 @@
 @media (-moz-windows-default-theme) {
   listitem {
     color: -moz-FieldText;
     -moz-margin-start: 1px;
     -moz-margin-end: 1px;
     padding-top: 1px;
     padding-bottom: 1px;
     border-width: 1px;
-    border-radius: 3px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    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"] {
     border-color: @selectedBorderColor@;
-    background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
+    background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
     background-color: rgba(190,190,190,.15);
     color: -moz-DialogText;
   }
 
   listbox:focus > listitem[selected="true"] {
     border-color: @selectedFocusBorderColor@;
-    background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
+    background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
     background-color: rgba(131,183,249,.02);
     color: -moz-DialogText;
   }
 
   listbox:focus > listitem[current="true"] {
     border-color: @hoverAndFocusBorderColor@;
     outline: none;
   }
 
   listbox:focus > listitem[selected="true"][current="true"] {
     background-color: rgba(131,183,249,.15);
     outline: none;
   }
 
-  @media (-moz-os-version: windows-win8) {
+  @media (-moz-os-version: windows-vista),
+         (-moz-os-version: windows-win7) {
     listitem {
-      border-radius: 0;
-      box-shadow: none;
+      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(@selectedGradientColor2@, @selectedGradientColor2@);
+      background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
     }
 
     listbox:focus > listitem[selected="true"] {
-      background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
+      background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
     }
   }
 }
--- a/toolkit/themes/windows/global/tree-aero.css
+++ b/toolkit/themes/windows/global/tree-aero.css
@@ -64,30 +64,28 @@ treechildren:-moz-locale-dir(rtl)::-moz-
 }
 
 @media (-moz-windows-default-theme) {
   treechildren:not(.autocomplete-treebody)::-moz-tree-row {
     height: 1.8em;
     color: -moz-FieldText;
     -moz-margin-start: 1px;
     -moz-margin-end: 1px;
-    border-width: 2px;
+    border-width: 1px;
     border-color: transparent;
-    border-radius: 3px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    -moz-outline-radius: 3px;
   }
 
   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(@selectedGradientColor1@, @selectedGradientColor2@);
+    background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
     background-color: transparent;
     outline: 1px solid @whiteOpacityBorderColor@;
   }
 
   treechildren:not(.autocomplete-treebody)::-moz-tree-row(current, focus) {
     border-style: solid;
     -moz-border-top-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
     -moz-border-right-colors: @hoverAndFocusBorderColor@ @whiteOpacityBorderColor@;
@@ -97,52 +95,52 @@ treechildren:-moz-locale-dir(rtl)::-moz-
   }
 
   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(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
+    background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
     background-color: transparent;
   }
 
   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(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
+    background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
   }
 
   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(@hoverGradientColor1@, @hoverGradientColor2@);
+    background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
     outline: 1px solid @whiteOpacityBorderColor@;
   }
 
   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(@hoverGradientColor1@, @hoverGradientColor2@);
+    background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
   }
 
   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(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
+    background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
   }
 
   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;
@@ -159,41 +157,42 @@ treechildren:-moz-locale-dir(rtl)::-moz-
     border-color: transparent;
     background-color: transparent;
   }
 
   treechildren:not(.autocomplete-treebody)::-moz-tree-cell-text(selected, focus) {
     color: -moz-DialogText;
   }
 
-  @media (-moz-os-version: windows-win8) {
+  @media (-moz-os-version: windows-vista),
+         (-moz-os-version: windows-win7) {
     treechildren:not(.autocomplete-treebody)::-moz-tree-row {
-      border-width: 1px;
-      border-radius: 0;
-      -moz-outline-radius: 0;
+      border-width: 2px;
+      border-radius: 3px;
+      -moz-outline-radius: 3px;
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected) {
-      background-image: linear-gradient(@selectedGradientColor2@, @selectedGradientColor2@);
+      background-image: linear-gradient(@selectedGradientColor1@, @selectedGradientColor2@);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, focus),
     treechildren::-moz-tree-row(dropOn) {
-      background-image: linear-gradient(@selectedFocusGradientColor2@, @selectedFocusGradientColor2@);
+      background-image: linear-gradient(@selectedFocusGradientColor1@, @selectedFocusGradientColor2@);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(selected, current, focus) {
-      background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
+      background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover) {
-      background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
+      background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, current) {
-      background-image: linear-gradient(@hoverGradientColor2@, @hoverGradientColor2@);
+      background-image: linear-gradient(@hoverGradientColor1@, @hoverGradientColor2@);
     }
 
     treechildren:not(.autocomplete-treebody)::-moz-tree-row(hover, selected) {
-      background-image: linear-gradient(@hoverAndCurrentFocusGradientColor2@, @hoverAndCurrentFocusGradientColor2@);
+      background-image: linear-gradient(@hoverAndCurrentFocusGradientColor1@, @hoverAndCurrentFocusGradientColor2@);
     }
   }
 }