Bug 1385518 - (WIP) Update sidebar styling for dark theme. draft
authorJared Wein <jwein@mozilla.com>
Wed, 18 Oct 2017 00:44:10 -0400
changeset 713816 081ba25e47a37dfe3e3a9fd602267c1530962961
parent 712645 5572465c08a9ce0671dcd01c721f9356fcd53a65
child 744442 8ccc577bc9e4c54fcad59ae0011f489e3093cdbe
push id93762
push userbmo:jaws@mozilla.com
push dateThu, 21 Dec 2017 00:33:47 +0000
bugs1385518
milestone59.0a1
Bug 1385518 - (WIP) Update sidebar styling for dark theme. This patch doesn't correctly handle changing themes during runtime or maintaining the colors while switching through the sidebars (history -> bookmarks for example). Also the hover states for the treechildren are not correct. MozReview-Commit-ID: 5pRooUibIb0
browser/components/places/content/places.css
browser/components/places/content/sidebarUtils.js
browser/themes/linux/places/places.css
browser/themes/osx/places/places.css
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/places/tree-icons.inc.css
browser/themes/shared/sidebar.inc.css
browser/themes/windows/places/places.css
--- a/browser/components/places/content/places.css
+++ b/browser/components/places/content/places.css
@@ -1,12 +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/. */
 
+:root[compacttheme] {
+  color: var(--chrome-color);
+}
+
 tree[type="places"] {
   -moz-binding: url("chrome://browser/content/places/tree.xml#places-tree");
 }
 
 tree[type="places"] > treechildren::-moz-tree-cell {
   /* ensure we use the direction of the website title / url instead of the
    * browser locale */
   unicode-bidi: plaintext;
--- a/browser/components/places/content/sidebarUtils.js
+++ b/browser/components/places/content/sidebarUtils.js
@@ -1,15 +1,34 @@
 /* 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/. */
 
 Components.utils.import("resource://gre/modules/AppConstants.jsm");
+Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "BrowserUtils",
+  "resource://gre/modules/BrowserUtils.jsm");
+
 window.top.gUIDensity.update();
 
+if (window.top.CompactTheme.isThemeCurrentlyApplied) {
+  let theme = window.top.LightweightThemeManager.currentTheme;
+  if (theme) {
+    BrowserUtils.promiseLayoutFlushed(window.top.document, "style", () => {
+      let docCS = window.top.getComputedStyle(window.top.document.documentElement);
+      let background = docCS.getPropertyValue("--chrome-secondary-background-color");
+      let color = docCS.getPropertyValue("--chrome-color");
+      document.documentElement.style.setProperty("--chrome-secondary-background-color", background);
+      document.documentElement.style.setProperty("--chrome-color", color);
+      document.documentElement.setAttribute("compacttheme", "true");
+    });
+  }
+}
+
 var SidebarUtils = {
   handleTreeClick: function SU_handleTreeClick(aTree, aEvent, aGutterSelect) {
     // right-clicks are not handled here
     if (aEvent.button == 2)
       return;
 
     var tbo = aTree.treeBoxObject;
     var cell = tbo.getCellAt(aEvent.clientX, aEvent.clientY);
--- a/browser/themes/linux/places/places.css
+++ b/browser/themes/linux/places/places.css
@@ -34,16 +34,25 @@
 #viewButton:hover {
   background: hsla(240, 5%, 5%, 0.1);
 }
 
 #viewButton[open] {
   background: hsla(240, 5%, 5%, 0.15);
 }
 
+#viewButton > .button-box > .button-menu-dropmarker {
+  margin-inline-end: -3px;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  width: 8px;
+  height: 8px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 .sidebar-placesTree {
   margin: 0;
   color: inherit;
   -moz-appearance: none;
   background: transparent;
 }
 
 .sidebar-placesTreechildren::-moz-tree-row {
--- a/browser/themes/osx/places/places.css
+++ b/browser/themes/osx/places/places.css
@@ -130,16 +130,17 @@
 #viewButton {
   -moz-appearance: none;
   border-radius: 4px;
   padding: 2px 4px;
   margin: 4px 0;
   margin-inline-end: 4px;
   /* Default font size is 11px on mac, so this is 12px */
   font-size: 1.0909rem;
+  color: inherit;
 }
 
 #viewButton:focus {
   box-shadow: var(--focus-ring-box-shadow);
 }
 
 #viewButton:hover {
   background: hsla(240, 5%, 5%, 0.1);
@@ -149,16 +150,18 @@
   background: hsla(240, 5%, 5%, 0.15);
 }
 
 #viewButton > .button-box > .button-menu-dropmarker {
   display: -moz-box;
   list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
   width: 12px;
   height: 12px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 /* Trees */
 
 %include ../../shared/places/tree-icons.inc.css
 
 treechildren:-moz-tree-image(selected,focus) {
   fill: HighlightText;
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -108,8 +108,19 @@ toolbar[brighttext] .toolbarbutton-1 {
   background-color: rgba(255,255,255,.3);
 }
 
 .tab-icon-sound[soundplaying],
 .tab-icon-sound[muted] {
   filter: none !important; /* removes drop-shadow filter */
 }
 
+
+
+#sidebar-box {
+  background-color: var(--chrome-secondary-background-color);
+  color: var(--chrome-color);
+}
+
+#history-panel,
+#bookmarksPanel {
+  color: var(--chrome-color);
+}
--- a/browser/themes/shared/places/tree-icons.inc.css
+++ b/browser/themes/shared/places/tree-icons.inc.css
@@ -7,17 +7,17 @@ treechildren::-moz-tree-image(title) {
   padding-inline-end: 2px;
   margin: 0 2px;
   width: 16px;
   height: 16px;
 }
 
 treechildren:-moz-tree-image {
   -moz-context-properties: fill, fill-opacity;
-  fill: -moz-FieldText;
+  fill: currentColor;
   fill-opacity: 0.7;
 }
 
 treechildren::-moz-tree-image(title, livemarkItem) {
   list-style-image: url("chrome://browser/skin/places/livemark-item.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
--- a/browser/themes/shared/sidebar.inc.css
+++ b/browser/themes/shared/sidebar.inc.css
@@ -89,16 +89,19 @@
 }
 #sidebar-switcher-target:hover:active:-moz-lwtheme,
 #sidebar-switcher-target.active:-moz-lwtheme {
   background: hsla(240, 5%, 5%, 0.15);
 }
 
 #sidebarMenu-popup .subviewbutton {
   min-width: 190px;
+  /* Need to explicitly set the color or checked
+     toolbarbuttons will always use ButtonText. */
+  color: currentColor;
 }
 
 #sidebar-extensions:empty + toolbarseparator {
   display: none;
 }
 
 #sidebarMenu-popup > .subviewbutton[checked="true"] {
   list-style-image: none;
--- a/browser/themes/windows/places/places.css
+++ b/browser/themes/windows/places/places.css
@@ -54,30 +54,34 @@
 /* Browser Sidebars */
 
 /* Default button vert. margins are 1px/2px, and this can cause misalignment */
 #viewButton {
   -moz-appearance: none;
   margin: 0;
   margin-inline-start: 4px;
   border-radius: 2px;
+  color: inherit;
 }
 
 #viewButton:hover {
   background-color: hsla(240, 5%, 5%, .1);
 }
 
 #viewButton[open] {
   background-color: hsla(240, 5%, 5%, .15);
 }
 
 #viewButton > .button-box > .button-menu-dropmarker {
-  height: auto;
-  width: auto;
   margin-inline-end: -3px;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  width: 8px;
+  height: 8px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 #sidebar-search-container {
   padding: 8px;
 }
 
 #search-box {
   margin: 0;