Bug 1485017 - Make sidebar properties apply to synced tabs sidebar. r=mconley
authorTim Nguyen <ntim.bugs@gmail.com>
Mon, 27 Aug 2018 14:50:35 +0000
changeset 488652 3bf4771b88cba6f70e0192f15637ce7f9eadc64d
parent 488651 f4739ab0ece1b6014242b7b0c49e88d46ec2146f
child 488653 0192efea1b664db8d20a691401ec5d3f9d3a2122
push id9734
push usershindli@mozilla.com
push dateThu, 30 Aug 2018 12:18:07 +0000
treeherdermozilla-beta@71c71ab3afae [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley
bugs1485017
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1485017 - Make sidebar properties apply to synced tabs sidebar. r=mconley Differential Revision: https://phabricator.services.mozilla.com/D4284
browser/components/syncedtabs/sidebar.js
browser/components/syncedtabs/sidebar.xhtml
browser/themes/osx/syncedtabs/sidebar.css
browser/themes/shared/syncedtabs/sidebar.inc.css
--- a/browser/components/syncedtabs/sidebar.js
+++ b/browser/components/syncedtabs/sidebar.js
@@ -2,27 +2,38 @@
  * 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/. */
 
 "use strict";
 
 ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 ChromeUtils.import("resource://services-sync/SyncedTabs.jsm");
 ChromeUtils.import("resource:///modules/syncedtabs/SyncedTabsDeckComponent.js");
+ChromeUtils.import("resource:///actors/LightweightThemeChild.jsm");
 
 ChromeUtils.defineModuleGetter(this, "fxAccounts",
                                "resource://gre/modules/FxAccounts.jsm");
 
 var syncedTabsDeckComponent = new SyncedTabsDeckComponent({window, SyncedTabs, fxAccounts});
 
+let themeListener;
+
 let onLoaded = () => {
+  themeListener = new LightweightThemeChild({
+    content: window,
+    chromeOuterWindowID: window.top.windowUtils.outerWindowID,
+    docShell: window.docShell,
+  });
   syncedTabsDeckComponent.init();
   document.getElementById("template-container").appendChild(syncedTabsDeckComponent.container);
 };
 
 let onUnloaded = () => {
+  if (themeListener) {
+    themeListener.cleanup();
+  }
   removeEventListener("DOMContentLoaded", onLoaded);
   removeEventListener("unload", onUnloaded);
   syncedTabsDeckComponent.uninit();
 };
 
 addEventListener("DOMContentLoaded", onLoaded);
 addEventListener("unload", onUnloaded);
--- a/browser/components/syncedtabs/sidebar.xhtml
+++ b/browser/components/syncedtabs/sidebar.xhtml
@@ -14,16 +14,17 @@
     SYSTEM "chrome://browser/locale/syncBrand.dtd">
   %syncBrandDTD;
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <head>
     <script src="chrome://browser/content/syncedtabs/sidebar.js" type="application/javascript"></script>
     <script type="application/javascript" src="chrome://browser/content/utilityOverlay.js"/>
+    <script src="chrome://browser/content/contentTheme.js"></script>
 
     <link rel="stylesheet" type="text/css" media="all" href="chrome://browser/skin/syncedtabs/sidebar.css"/>
     <link rel="stylesheet" type="text/css" media="all" href="chrome://global/skin/"/>
     <link rel="stylesheet" type="text/css" media="all" href="chrome://global/skin/textbox.css"/>
     <link rel="stylesheet" type="text/css" media="all" href="chrome://browser/content/browser.css"/>
     <title>&syncedTabs.sidebar.label;</title>
   </head>
 
--- a/browser/themes/osx/syncedtabs/sidebar.css
+++ b/browser/themes/osx/syncedtabs/sidebar.css
@@ -1,17 +1,17 @@
 /* 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/. */
 
 %include ../../shared/syncedtabs/sidebar.inc.css
 
 /* These styles are intended to mimic XUL trees and the XUL search box. */
 
-.content-container {
+body:not([lwt-sidebar]) .content-container {
   -moz-appearance: -moz-mac-source-list;
   -moz-font-smoothing-background-color: -moz-mac-source-list;
 }
 
 .item-title-container {
   box-sizing: border-box;
   align-items: center;
   height: 24px;
--- a/browser/themes/shared/syncedtabs/sidebar.inc.css
+++ b/browser/themes/shared/syncedtabs/sidebar.inc.css
@@ -64,17 +64,16 @@ body {
 .item {
   display: inline-block;
   opacity: 1;
   flex: 1;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   outline: none;
-  color: -moz-FieldText;
 }
 
 .item.selected > .item-title-container {
   background-color: -moz-cellhighlight;
   color: -moz-cellhighlighttext;
 }
 
 .item.selected:focus > .item-title-container {
@@ -291,8 +290,31 @@ body {
 .textbox-search-icons .textbox-search-clear,
 .filtered .textbox-search-icons .textbox-search-icon {
   display: none;
 }
 
 .filtered .textbox-search-icons .textbox-search-clear {
   display: block;
 }
+
+/* Themed sidebars */
+
+body[lwt-sidebar] {
+  background-color: var(--lwt-sidebar-background-color);
+  color: var(--lwt-sidebar-text-color);
+}
+
+body[lwt-sidebar] .item.selected > .item-title-container {
+  background-color: hsla(0,0%,80%,.3);
+  color: inherit;
+}
+
+body[lwt-sidebar-brighttext] .item.selected > .item-title-container {
+  -moz-appearance: none;
+  background-color: rgba(249,249,250,.1);
+}
+
+body[lwt-sidebar-highlight] .item.selected:focus > .item-title-container {
+  -moz-appearance: none;
+  background-color: var(--lwt-sidebar-highlight-background-color);
+  color: var(--lwt-sidebar-highlight-text-color);
+}