BUg 680256 - Update OS X Sidebar styling for Mavericks and Yosemite+. r=jaws

MozReview-Commit-ID: 2MDjRL9oAvT

--HG--
extra : amend_source : 08259e7d918df5a4c534af154541b6a2e18c9cad

browser/themes/osx/browser.css

@@ -2336,30 +2336,25 @@ richlistitem[type~="action"][actiontype$="tab"][selected="true"] > .ac-url-box >
 
 /* ----- SIDEBAR ELEMENTS ----- */
 
-#sidebar,
-sidebarheader {
-  -moz-appearance: -moz-mac-vibrancy-light;
-  background-color: #e2e7ed;
-}
-
-#sidebar:-moz-window-inactive,
-sidebarheader:-moz-window-inactive {
-  background-color: #e8e8e8;
-}
-
-sidebarheader {
-  padding: 2px;
-  text-shadow: none;
-}
-
 #sidebar-box {
-  -moz-appearance: dialog;
-  -moz-appearance: none;
+  background-color: hsl(212,19%,85%);
+  background-image: linear-gradient(hsl(213,26%,93%), hsl(212,19%,85%));
+  box-shadow: inset -2px 0 0 hsla(0,0%,100%,.2);
+}
+
+#sidebar-box:-moz-window-inactive {
+  background-color: hsl(0,0%,92%);
+  background-image: linear-gradient(hsl(0,0%,97%), hsl(0,0%,92%));
+}
+
+sidebarheader {
+  padding: 2px 2px 0;
+  text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
 }
 
 .sidebar-splitter {
   -moz-border-start: none;
-  -moz-border-end: 1px solid #bdbdbd;
+  -moz-border-end: 1px solid #b4b4b4;
   min-width: 1px;
   width: 3px;
   background-image: none !important;
@@ -2377,10 +2372,15 @@ sidebarheader {
 
 .sidebar-title,
 #sidebar-title {
-  color: #535f6d;
+  color: #596c80;
   font-weight: bold;
 }
 
+.sidebar-title:-moz-window-inactive,
+#sidebar-title:-moz-window-inactive {
+  color: #868b92;
+}
+
 .sidebar-throbber[loading="true"],
 #sidebar-throbber[loading="true"] {
   list-style-image: url("chrome://global/skin/icons/loading.png");
@@ -2394,6 +2394,30 @@ sidebarheader {
   }
 }
 
+@media (-moz-mac-yosemite-theme) {
+  #sidebar-box {
+    -moz-appearance: -moz-mac-vibrancy-light;
+    background-image: none;
+    box-shadow: none;
+  }
+
+  #sidebar-box:-moz-window-inactive {
+    background-image: none;
+  }
+
+  sidebarheader {
+    text-shadow: none;
+    font-weight: 500;
+  }
+
+  .sidebar-title,
+  #sidebar-title {
+    color: #636363;
+    font-weight: 500;
+  }
+}
+
+
 /* ----- CONTENT ----- */
 
 .browserContainer > findbar {

browser/themes/osx/places/organizer.css

@@ -9,31 +9,37 @@
 #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;
+  -moz-margin-end: 6px;
 }
 
 #placesList > treechildren::-moz-tree-row(selected) {  
   background: @sidebarItemBackground@;
   border-top: @sidebarItemBorderTop@;
+  border-bottom: @sidebarItemBorderBottom@;
 }
 
 #placesList > treechildren::-moz-tree-row(selected,focus) {  
   background: @sidebarItemFocusedBackground@;
   border-top: @sidebarItemFocusedBorderTop@;
+  border-bottom: @sidebarItemFocusedBorderBottom@;
 }
 
 #placesList:-moz-system-metric(mac-graphite-theme) > treechildren::-moz-tree-row(selected) {
   background: @sidebarItemGraphiteBackground@;
   border-top: @sidebarItemGraphiteBorderTop@;
+  border-bottom: @sidebarItemGraphiteBorderBottom@;
 }
 
 #placesList:-moz-system-metric(mac-graphite-theme) > treechildren::-moz-tree-row(selected,focus) {
   background: @sidebarItemGraphiteFocusedBackground@;
   border-top: @sidebarItemGraphiteFocusedBorderTop@;
-}
-
-#placesList > treechildren:-moz-window-inactive::-moz-tree-row(selected) {
-  background: @sidebarItemInactiveBackground@;
-  border-top: @sidebarItemInactiveBorderTop@;
+  border-bottom: @sidebarItemGraphiteFocusedBorderBottom@;
 }
 
 #placesList > treechildren::-moz-tree-row(History),
@@ -51,8 +57,77 @@
 }
 
 #placesList > treechildren::-moz-tree-cell-text(selected) {  
-  font-weight: bold !important;
-  color: #ffffff !important;
+  color: #fff;
+  font-weight: bold;
+}
+
+#placesList > treechildren::-moz-tree-twisty {
+  -moz-appearance: none;
+  padding: 0 2px;
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
+}
+
+#placesList > treechildren::-moz-tree-twisty(selected) {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
+}
+
+#placesList > treechildren::-moz-tree-twisty(open) {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
+}
+
+#placesList > treechildren::-moz-tree-twisty(open, selected) {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
+}
+
+@media (-moz-mac-yosemite-theme) {
+  #placesList > treechildren::-moz-tree-row(selected) {
+    background: @sidebarItemBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  #placesList > treechildren::-moz-tree-row(selected,focus) {
+    background: @sidebarItemFocusedBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  #placesList > treechildren:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected) {
+    background: @sidebarItemGraphiteBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  #placesList > treechildren:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected,focus) {
+    background: @sidebarItemGraphiteFocusedBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  #placesList > treechildren::-moz-tree-cell-text(selected) {
+    color: -moz-dialogtext;
+    font-weight: 500;
+  }
+
+  #placesList > treechildren::-moz-tree-cell-text(selected, focus) {
+    color: #fff;
+  }
+
+  #placesList > treechildren::-moz-tree-twisty(selected) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
+  }
+
+  #placesList > treechildren::-moz-tree-twisty(selected, focus) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
+  }
+
+  #placesList > treechildren::-moz-tree-twisty(open, selected) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
+  }
+
+  #placesList > treechildren::-moz-tree-twisty(open, selected, focus) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
+  }
 }
 
 #placesToolbar {
@@ -65,7 +140,7 @@
 
 #placesView > splitter {
   -moz-border-start: none !important;
-  -moz-border-end: 1px solid #bdbdbd;
+  -moz-border-end: 1px solid #b4b4b4;
   min-width: 1px;
   width: 3px;
   -moz-margin-start: -3px;
@@ -174,15 +249,30 @@
 
 /* Place List, Place Content */
 #placesList {
-  -moz-appearance: -moz-mac-vibrancy-light;
-  background-color: #e2e7ed;
+  background-color: hsl(212,19%,85%);
+  background-image: linear-gradient(hsl(213,26%,93%), hsl(212,19%,85%));
+  box-shadow: inset -2px 0 0 hsla(0,0%,100%,.2);
   width: 160px;
 }
 
 #placesList:-moz-window-inactive {
-  background-color: #e8e8e8;
+  background-color: hsl(0,0%,92%);
+  background-image: linear-gradient(hsl(0,0%,97%), hsl(0,0%,92%));
 }
 
+@media (-moz-mac-yosemite-theme) {
+  #placesList {
+    -moz-appearance: -moz-mac-vibrancy-light;
+    background-image: none;
+    box-shadow: none;
+  }
+
+  #placesList:-moz-window-inactive {
+    background-image: none;
+  }
+}
+
+
 /* Info box */
 #detailsDeck {
   border-top: 1px solid #919191;

browser/themes/osx/places/places.css

@@ -22,7 +22,9 @@
   padding-bottom: 1px;
   -moz-appearance: none;
   margin: 0;
+  height: 24px;
   border: none;
+  font-size: 12px;
 }
 
 .sidebar-placesTreechildren::-moz-tree-separator {
@@ -37,43 +39,135 @@
 .sidebar-placesTreechildren::-moz-tree-row(selected) {
   background: @sidebarItemBackground@;
   border-top: @sidebarItemBorderTop@;
+  border-bottom: @sidebarItemBorderBottom@;
 }
 
 .sidebar-placesTreechildren::-moz-tree-row(selected,focus) {
   background: @sidebarItemFocusedBackground@;
   border-top: @sidebarItemFocusedBorderTop@;
+  border-bottom: @sidebarItemFocusedBorderBottom@;
 }
 
 .sidebar-placesTreechildren:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected) {
   background: @sidebarItemGraphiteBackground@;
   border-top: @sidebarItemGraphiteBorderTop@;
+  border-bottom: @sidebarItemGraphiteBorderBottom@;
 }
 
 .sidebar-placesTreechildren:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected,focus) {
   background: @sidebarItemGraphiteFocusedBackground@;
   border-top: @sidebarItemGraphiteFocusedBorderTop@;
+  border-bottom: @sidebarItemGraphiteFocusedBorderBottom@;
+}
+
+.sidebar-placesTreechildren::-moz-tree-cell-text {
+  -moz-margin-end: 6px;
 }
 
 .sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
-  font-weight: bold !important;
-  color: #ffffff !important;
+  color: #fff;
+  font-weight: bold;
 }
 
 #sidebar-search-label {
   display: none;
 }
 
+.sidebar-placesTreechildren::-moz-tree-twisty {
+  -moz-appearance: none;
+  padding: 0 2px;
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
+}
+
+.sidebar-placesTreechildren::-moz-tree-twisty(selected) {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
+}
+
+.sidebar-placesTreechildren::-moz-tree-twisty(open) {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
+}
+
+.sidebar-placesTreechildren::-moz-tree-twisty(open, selected) {
+  list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
+}
+
+@media (-moz-mac-yosemite-theme) {
+  .sidebar-placesTreechildren::-moz-tree-row(selected) {
+    background: @sidebarItemBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-row(selected,focus) {
+    background: @sidebarItemFocusedBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .sidebar-placesTreechildren:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected) {
+    background: @sidebarItemGraphiteBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .sidebar-placesTreechildren:-moz-system-metric(mac-graphite-theme)::-moz-tree-row(selected,focus) {
+    background: @sidebarItemGraphiteFocusedBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
+    color: -moz-dialogtext;
+    font-weight: 500;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(selected, focus) {
+    color: #fff;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-twisty(selected) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-twisty(selected, focus) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-twisty(open, selected) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-twisty(open, selected, focus) {
+    list-style-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
+  }
+}
+
 #viewButton {
   -moz-appearance: none;
-  border: 1px solid #7F7F7F;
-  border-radius: 10px;
-  background: @toolbarbuttonBackground@;
-  min-width: 0px;
-  min-height: 0px;
+  padding-bottom: 1px;
   -moz-padding-start: 5px;
   -moz-padding-end: 0px;
-  padding-top: 1px;
-  padding-bottom: 1px;
+  margin: 0;
+  -moz-margin-end: 4px;
+  min-width: 0px;
+  min-height: 0px;
+  border: 1px solid #a2a9b1;
+  border-radius: 10px;
+  background-image: linear-gradient(hsla(0,0%,100%,.75),hsla(0,0%,100%,.1));
+  box-shadow: inset 0 0 1px hsla(0,0%,100%,.85),
+                    0 1px hsla(0,0%,100%,.35);
+}
+
+#viewButton:hover:active,
+#viewButton[open=true] {
+  background-image: linear-gradient(hsla(0,0%,100%,.1),hsla(0,0%,100%,.75));
+  box-shadow: @roundButtonPressedShadow@;
+  color: -moz-dialogText;
+}
+
+#viewButton:-moz-window-inactive {
+  border-color: #b6b6b6;
+  background-image: linear-gradient(hsla(0,0%,100%,.3),hsla(0,0%,100%,0));
 }
 
 #viewButton .button-menu-dropmarker {
@@ -82,9 +176,10 @@
 }
 
 #viewButton:focus {
-  outline: 2px solid #4A8BC7;
-  outline-offset: -2px;
-  -moz-outline-radius: 10px;
+  box-shadow: 0 1px 0 hsla(0, 0%, 0%, .15),
+              0 0 0 1px hsla(210, 100%, 60%, .45) inset,
+              0 0 0 2px hsla(210, 100%, 60%, .45);
+  border-color: hsla(210, 100%, 60%, 1);
 }
 
 #sidebar-search-container {

browser/themes/osx/syncedtabs/sidebar.css

@@ -2,6 +2,7 @@
  * 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
 %include ../../shared/syncedtabs/sidebar.inc.css
 
 /* These styles are intended to mimic XUL trees and the XUL search box. */
@@ -13,37 +14,92 @@ html {
   color: -moz-DialogText;
 }
 
+.item-title-container {
+  box-sizing: border-box;
+  align-items: center;
+  height: 24px;
+  font-size: 12px;
+}
+
 .item.selected > .item-title-container {
   color: HighlightText;
   font-weight: bold;
 }
 
 .item.selected > .item-title-container {
-  background: linear-gradient(to bottom, rgba(156,172,204,1) 0%, rgba(116,135,172,1) 100%);
+  background: @sidebarItemBackground@;
+  border-top: @sidebarItemBorderTop@;
+  border-bottom: @sidebarItemBorderBottom@;
 }
 
 .item.selected:focus > .item-title-container {
-  background: linear-gradient(to bottom, rgba(95,144,209,1) 0%, rgba(39,90,173,1) 100%);
-}
-
-/* Using '-moz-appearance: twistytree[open];' seems to force the twisty to
-   be 20px high and max-height etc doesn't adjust it. So we set the max-height
-   on the container and a negative margin-top on the twisty itself to keep things
-   aligned.
-*/
-.item-title-container {
-  max-height: 16px;
+  background: @sidebarItemFocusedBackground@;
+  border-top: @sidebarItemFocusedBorderTop@;
+  border-bottom: @sidebarItemFocusedBorderBottom@;
 }
 
 .item.client .item-twisty-container {
-  margin-top: -2px;
-  -moz-appearance: treetwistyopen;
+  width: 16px;
+  height: 16px;
+  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded");
 }
 
 .item.client.closed .item-twisty-container {
-  -moz-appearance: treetwisty;
+  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed");
 }
 
+.item.client.selected:focus .item-twisty-container {
+  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-expanded-inverted");
+}
+
+.item.client.selected.closed:focus .item-twisty-container {
+  background-image: url("chrome://global/skin/tree/arrow-disclosure.svg#arrow-disclosure-collapsed-inverted");
+}
+
+@media (-moz-mac-yosemite-theme) {
+  .item.selected > .item-title-container {
+    font-weight: 500;
+  }
+
+  .item.selected > .item-title-container {
+    background-image: none;
+    background-color: @sidebarItemBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .item.selected:focus > .item-title-container {
+    background-image: none;
+    background-color: @sidebarItemFocusedBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .item.selected:-moz-system-metric(mac-graphite-theme) > .item-title-container {
+    background-image: none;
+    background-color: @sidebarItemGraphiteBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .item.selected:focus:-moz-system-metric(mac-graphite-theme) > .item-title-container {
+    background-image: none;
+    background-color: @sidebarItemGraphiteFocusedBackgroundYosemite@;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .item.selected > .item-title-container {
+    color: -moz-dialogtext;
+    font-weight: 500;
+  }
+
+  .item.selected:focus > .item-title-container {
+    color: #fff;
+  }
+}
+
+
 .sidebar-search-container {
   border-bottom: 1px solid #bdbdbd;
 }

toolkit/themes/osx/global/jar.mn

@@ -175,6 +175,7 @@ toolkit.jar:
   skin/classic/global/splitter/grip-right.gif                        (splitter/grip-right.gif)
   skin/classic/global/toolbar/spring.png                             (toolbar/spring.png)
   skin/classic/global/toolbar/toolbar-separator.png                  (toolbar/toolbar-separator.png)
+  skin/classic/global/tree/arrow-disclosure.svg                      (tree/arrow-disclosure.svg)
   skin/classic/global/tree/columnpicker.gif                          (tree/columnpicker.gif)
   skin/classic/global/tree/folder.png                                (tree/folder.png)
   skin/classic/global/tree/folder@2x.png                             (tree/folder@2x.png)

toolkit/themes/osx/global/shared.inc

@@ -13,16 +13,23 @@
 %define scopeBarSeparatorBorder 1px solid #888
 %define scopeBarTitleColor #6D6D6D
 
-%define sidebarItemBorderTop 1px solid #94A1C0
-%define sidebarItemBackground linear-gradient(#A0B0CF, #7386AB) repeat-x
-%define sidebarItemFocusedBorderTop 1px solid #5382C5
-%define sidebarItemFocusedBackground linear-gradient(#6494D4, #2559AC) repeat-x
-%define sidebarItemGraphiteBorderTop 1px solid #97A4B1
-%define sidebarItemGraphiteBackground linear-gradient(#AAB7C4, #8393A4) repeat-x
-%define sidebarItemGraphiteFocusedBorderTop 1px solid #6B798D
-%define sidebarItemGraphiteFocusedBackground linear-gradient(#8293A6, #425972) repeat-x
-%define sidebarItemInactiveBorderTop 1px solid #979797
-%define sidebarItemInactiveBackground linear-gradient(#B4B4B4, #8A8A8A) repeat-x
+%define sidebarItemBorderTop 1px solid #bcc5d5
+%define sidebarItemBorderBottom 1px solid #94a1b9
+%define sidebarItemBackground linear-gradient(#c3ccdf 1px, #bdc7db 2px, #9dabc5)
+%define sidebarItemFocusedBorderTop 1px solid #61a6dd
+%define sidebarItemFocusedBorderBottom 1px solid #387cc0
+%define sidebarItemFocusedBackground linear-gradient(#79bbe6 1px, #6eb2e3 2px, #3f8ad2)
+%define sidebarItemGraphiteBorderTop 1px solid #a9b5c1
+%define sidebarItemGraphiteBorderBottom 1px solid #8594a4
+%define sidebarItemGraphiteBackground linear-gradient(#bfcad3 1px, #b6c2cc 2px, #94a1b1)
+%define sidebarItemGraphiteFocusedBorderTop 1px solid #7c8c9d
+%define sidebarItemGraphiteFocusedBorderBottom 1px solid #536c83
+%define sidebarItemGraphiteFocusedBackground linear-gradient(#9eacbb 1px, #8fa1b1 2px, #587087)
+
+%define sidebarItemBackgroundYosemite hsla(0,0%,0%,.1)
+%define sidebarItemFocusedBackgroundYosemite #2d8cf9
+%define sidebarItemGraphiteBackgroundYosemite hsla(0,0%,0%,.1)
+%define sidebarItemGraphiteFocusedBackgroundYosemite #86858c
 
 %define toolbarbuttonCornerRadius 3px
 %define toolbarbuttonBackground linear-gradient(#FFF, #ADADAD) repeat-x

toolkit/themes/osx/global/tree/arrow-disclosure.svg

@@ -0,0 +1,26 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+
+  <style>
+    .icon:not(:target) {
+      display: none;
+    }
+
+    .icon {
+      fill: #8c8c8c;
+    }
+
+    .icon.white {
+      fill: #fff;
+    }
+  </style>
+
+  <polygon id="arrow-disclosure-collapsed" class="icon" points="4,4  12,8.5  4,13" />
+  <polygon id="arrow-disclosure-collapsed-inverted" class="icon white" points="4,4  12,8.5  4,13" />
+
+  <polygon id="arrow-disclosure-expanded" class="icon" points="3,5  12,5  7.5,13" />
+  <polygon id="arrow-disclosure-expanded-inverted" class="icon white" points="3,5  12,5  7.5,13" />
+
+</svg>