--- a/browser/components/places/content/bookmarksSidebar.js
+++ b/browser/components/places/content/bookmarksSidebar.js
@@ -1,15 +1,18 @@
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* 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/. */
/* import-globals-from ../../../../toolkit/components/places/PlacesUtils.jsm */
+const { LightweightThemeConsumer } = ChromeUtils.import("resource://gre/modules/LightweightThemeConsumer.jsm", {});
+new LightweightThemeConsumer(document, window.top);
+
function init() {
let uidensity = window.top.document.documentElement.getAttribute("uidensity");
if (uidensity) {
document.documentElement.setAttribute("uidensity", uidensity);
}
document.getElementById("bookmarks-view").place =
"place:type=" + Ci.nsINavHistoryQueryOptions.RESULTS_AS_ROOTS_QUERY;
--- a/browser/components/places/content/historySidebar.js
+++ b/browser/components/places/content/historySidebar.js
@@ -2,16 +2,19 @@
/* 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/. */
/* import-globals-from ../../../../toolkit/components/places/PlacesUtils.jsm */
ChromeUtils.import("resource://gre/modules/TelemetryStopwatch.jsm");
+const { LightweightThemeConsumer } = ChromeUtils.import("resource://gre/modules/LightweightThemeConsumer.jsm", {});
+new LightweightThemeConsumer(document, window.top);
+
var gHistoryTree;
var gSearchBox;
var gHistoryGrouping = "";
var gSearching = false;
function HistorySidebarInit() {
let uidensity = window.top.document.documentElement.getAttribute("uidensity");
if (uidensity) {
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -18,16 +18,31 @@ const ThemeVariableMap = [
}],
["--tab-loading-fill", {
lwtProperty: "tab_loading",
optionalElementID: "tabbrowser-tabs"
}],
["--lwt-tab-text", {
lwtProperty: "tab_text"
}],
+ ["--lwt-sidebar-background", {
+ lwtProperty: "sidebar"
+ }],
+ ["--lwt-sidebar-text", {
+ lwtProperty: "sidebar_text"
+ }],
+ ["--lwt-sidebar-border", {
+ lwtProperty: "sidebar_border"
+ }],
+ ["--lwt-sidebar-highlight", {
+ lwtProperty: "sidebar_highlight"
+ }],
+ ["--lwt-sidebar-highlight-text", {
+ lwtProperty: "sidebar_highlight_text"
+ }],
["--tab-line-color", {
lwtProperty: "tab_line",
optionalElementID: "tabbrowser-tabs"
}],
["--toolbar-bgcolor", {
lwtProperty: "toolbarColor"
}],
["--toolbar-color", {
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/places/places.inc.css
@@ -0,0 +1,22 @@
+/* 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/. */
+
+.sidebar,
+#sidebar {
+ background-color: var(--lwt-sidebar-background, transparent);
+ color: color: var(--lwt-sidebar-text, black);
+ border-color: var(--lwt-sidebar-border, transparent);
+}
+
+.sidebar-header,
+#sidebar-header {
+ background-color: var(--lwt-sidebar-background, transparent);
+ color: var(--lwt-sidebar-text, black);
+ border-color: var(--lwt-sidebar-border, transparent);
+}
+
+:root[style*="--lwt-sidebar-highlight"] treechildren::-moz-tree-row(hover) {
+ color: var(--lwt-sidebar-highlight-text);
+ background-color: var(--lwt-sidebar-highlight);
+}
\ No newline at end of file
--- a/browser/themes/shared/places/tree-icons.inc.css
+++ b/browser/themes/shared/places/tree-icons.inc.css
@@ -1,15 +1,15 @@
/* 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/. */
treechildren:-moz-tree-image {
-moz-context-properties: fill, fill-opacity;
- fill: -moz-FieldText;
+ fill: currentColor;
fill-opacity: 0.7;
}
treechildren::-moz-tree-image(title) {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
padding-inline-end: 2px;
margin: 0 2px;
width: 16px;
--- a/browser/themes/shared/sidebar.inc.css
+++ b/browser/themes/shared/sidebar.inc.css
@@ -1,14 +1,16 @@
%if 0
/* 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/. */
%endif
+%include ../shared/places/places.inc.css
+
.sidebar-header,
#sidebar-header {
font-size: 1.333em;
font-weight: lighter;
padding: 8px;
}
%ifndef MOZ_WIDGET_GTK
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -664,21 +664,21 @@ html|*.urlbar-input:-moz-lwtheme::placeh
%include ../shared/sidebar.inc.css
#sidebar-box {
background-color: -moz-Field;
color: -moz-FieldText;
}
#sidebar-header {
- border-bottom: 1px solid ThreeDLightShadow;
+ border-bottom: 1px solid var(--lwt-sidebar-border, ThreeDLightShadow);
}
.sidebar-splitter {
- border-color: ThreeDLightShadow;
+ border-color: var(--lwt-sidebar-border, ThreeDLightShadow);;
}
.browserContainer > findbar {
background-color: -moz-dialog;
color: -moz-DialogText;
text-shadow: none;
}
@@ -713,16 +713,18 @@ html|*.urlbar-input:-moz-lwtheme::placeh
}
/* All tabs menupopup */
.alltabs-item[selected="true"] {
font-weight: bold;
}
+%include ../shared/places/places.inc.css
+
/* Bookmarks toolbar */
#PlacesToolbarDropIndicator {
list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
}
toolbarbutton.bookmark-item[dragover="true"][open="true"] {
-moz-appearance: none;
background: Highlight !important;
--- a/browser/themes/windows/places/places.css
+++ b/browser/themes/windows/places/places.css
@@ -7,17 +7,17 @@
#history-panel,
#bookmarksPanel {
background-color: transparent;
}
.sidebar-placesTree {
-moz-appearance: none;
background-color: transparent;
- color: inherit;
+ color: var(--lwt-sidebar-text, inherit);
border: 0;
margin: 0;
}
:root[uidensity=touch] #search-box,
:root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
min-height: 32px;
}
--- a/toolkit/components/extensions/parent/ext-theme.js
+++ b/toolkit/components/extensions/parent/ext-theme.js
@@ -164,16 +164,21 @@ class Theme {
case "toolbar_vertical_separator":
case "button_background_hover":
case "button_background_active":
case "popup":
case "popup_text":
case "popup_border":
case "popup_highlight":
case "popup_highlight_text":
+ case "sidebar":
+ case "sidebar_text":
+ case "sidebar_border":
+ case "sidebar_highlight":
+ case "sidebar_highlight_text":
this.lwtStyles[color] = cssColor;
break;
}
}
}
/**
* Helper method for loading images found in the extension's manifest.
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -187,16 +187,36 @@
},
"popup_highlight": {
"$ref": "ThemeColor",
"optional": true
},
"popup_highlight_text": {
"$ref": "ThemeColor",
"optional": true
+ },
+ "sidebar": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
+ "sidebar_text": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
+ "sidebar_border": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
+ "sidebar_highlight": {
+ "$ref": "ThemeColor",
+ "optional": true
+ },
+ "sidebar_highlight_text": {
+ "$ref": "ThemeColor",
+ "optional": true
}
},
"additionalProperties": { "$ref": "UnrecognizedProperty" }
},
"icons": {
"type": "object",
"optional": true,
"properties": {
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -20,9 +20,10 @@ support-files =
[browser_ext_themes_toolbar_fields_focus.js]
[browser_ext_themes_toolbar_fields.js]
[browser_ext_themes_toolbars.js]
[browser_ext_themes_toolbarbutton_icons.js]
[browser_ext_themes_toolbarbutton_colors.js]
[browser_ext_themes_theme_transition.js]
[browser_ext_themes_arrowpanels.js]
[browser_ext_themes_tab_selected.js]
+[browser_ext_themes_sidebars.js]
[browser_ext_themes_autocomplete_popup.js]
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_sidebars.js
@@ -0,0 +1,62 @@
+"use strict";
+
+// This test checks applied WebExtension themes that attempt to change
+// popup properties
+
+add_task(async function test_popup_styling(browser, accDoc) {
+ const BACKGROUND_COLOR = "#FF0000";
+ const TEXT_COLOR = "#008000";
+ const BORDER_COLOR = "#0000FF";
+ const HIGHLIGHT_COLOR = "#FF00FF";
+ const HIGHLIGHT_TEXT_COLOR = "#00FF00";
+
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "images": {
+ "headerURL": "image1.png",
+ },
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ "sidebar": BACKGROUND_COLOR,
+ "sidebar_text": TEXT_COLOR,
+ "sidebar_border": BORDER_COLOR,
+ "sidebar_highlight": HIGHLIGHT_COLOR,
+ "sidebar_highlight_text": HIGHLIGHT_TEXT_COLOR,
+ },
+ },
+ },
+ files: {
+ "image1.png": BACKGROUND,
+ },
+ });
+
+
+ await BrowserTestUtils.withNewTab({gBrowser, url: "https://example.com"}, async function(browser) {
+ await extension.startup();
+ let sidebar = document.getElementById("sidebar");
+ BrowserTestUtils.waitForEvent(sidebar, "load", true);
+ SidebarUI.toggle("viewBookmarksSidebar");
+
+ let sidebarContent = document.getElementById("sidebar");
+ let sidebarComputedStyle = window.getComputedStyle(sidebarContent);
+
+ // Ensure sidebar background color was set properly
+ Assert.equal(
+ sidebarComputedStyle.getPropertyValue("background-color"),
+ `rgb(${hexToRGB(BACKGROUND_COLOR).join(", ")})`,
+ "Popup background color should have been themed"
+ );
+
+ // Ensure sidebar text color was set properly
+ Assert.equal(
+ sidebarComputedStyle.getPropertyValue("color"),
+ `rgb(${hexToRGB(TEXT_COLOR).join(", ")})`,
+ "Popup text color should have been themed"
+ );
+
+ SidebarUI.toggle("viewBookmarksSidebar");
+ await extension.unload();
+ });
+});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -48,20 +48,22 @@ const toolkitVariableMap = [
// Get the theme variables from the app resource directory.
// This allows per-app variables.
ChromeUtils.import("resource:///modules/ThemeVariableMap.jsm");
ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
"resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
-function LightweightThemeConsumer(aDocument) {
+function LightweightThemeConsumer(aDocument, aWindow = null) {
this._doc = aDocument;
- this._win = aDocument.defaultView;
-
+ if (aWindow == null)
+ this._win = aDocument.defaultView;
+ else
+ this._win = aWindow;
Services.obs.addObserver(this, "lightweight-theme-styling-update");
var temp = {};
ChromeUtils.import("resource://gre/modules/LightweightThemeManager.jsm", temp);
this._update(temp.LightweightThemeManager.currentThemeForDisplay);
this._win.addEventListener("unload", this, { once: true });
}
@@ -182,16 +184,19 @@ function _setProperties(root, active, th
const {
lwtProperty,
optionalElementID,
processColor,
isColor = true
} = definition;
let elem = optionalElementID ? root.ownerDocument.getElementById(optionalElementID)
: root;
+ if (!elem) {
+ continue;
+ }
let val = themeData[lwtProperty];
if (isColor) {
val = _sanitizeCSSColor(root.ownerDocument, val);
if (processColor) {
val = processColor(_parseRGBA(val), elem);
}
}
--- a/toolkit/themes/windows/global/tree.css
+++ b/toolkit/themes/windows/global/tree.css
@@ -332,35 +332,35 @@ treechildren::-moz-tree-cell-text(active
%ifdef XP_WIN
@media (-moz-windows-default-theme) {
treechildren {
--treechildren-outline: none;
--treechildren-focusColor: rgb(123,195,255);
--treechildren-selectedFocusColor: rgb(205,232,255);
--treechildren-currentColor: rgb(125,162,206);
- --treechildren-hoverColor: rgb(229,243,255);
+ --treechildren-hoverColor: var(--lwt-sidebar-highlight-text, rgb(229,243,255));
--treechildren-selectedBorder: rgb(217,217,217);
--treechildren-selectedBackground: rgb(217,217,217);
--treechildren-currentFocusBorder: var(--treechildren-focusColor);
--treechildren-selectedFocusBorder: var(--treechildren-selectedFocusColor) var(--treechildren-selectedFocusColor) rgb(165,214,255);
--treechildren-selectedFocusBackground: var(--treechildren-selectedFocusColor);
--treechildren-selectedFocusCurrentBorder: var(--treechildren-focusColor);
--treechildren-selectedFocusCurrentBackground: rgb(205,232,255);
--treechildren-hoverBorder: var(--treechildren-hoverColor);
- --treechildren-hoverBackground: rgb(229,243,255);
+ --treechildren-hoverBackground: var(--lwt-sidebar-highlight, rgb(229,243,255));
--treechildren-hoverCurrentBorder: var(--treechildren-currentColor);
--treechildren-hoverCurrentBackground: rgba(131,183,249,.16);
--treechildren-hoverSelectedBorder: var(--treechildren-focusColor);
--treechildren-hoverSelectedBackground: rgb(205,232,255);
}
treechildren::-moz-tree-row {
height: 1.8em;
- color: -moz-FieldText;
+ color: currentColor;
margin-inline-start: 1px;
margin-inline-end: 1px;
border-width: 1px;
border-color: transparent;
background-repeat: no-repeat;
background-size: 100% 100%;
}
@@ -411,27 +411,27 @@ treechildren::-moz-tree-cell-text(active
treechildren::-moz-tree-cell(dropOn) {
background-image: none;
background-color: transparent;
border-radius: 0;
}
treechildren::-moz-tree-cell-text(primary, dropOn) {
- color: -moz-FieldText;
+ color: currentColor;
}
treechildren::-moz-tree-cell-text {
padding-bottom: initial;
border-color: transparent;
background-color: transparent;
}
treechildren::-moz-tree-cell-text(selected, focus) {
- color: -moz-DialogText;
+ color: currentColor;
}
@media (-moz-os-version: windows-win7),
(-moz-os-version: windows-win8) {
treechildren {
--treechildren-2ndBorderColor: rgba(255,255,255,.4);
--treechildren-outline: 1px solid var(--treechildren-2ndBorderColor);
--treechildren-selectedBackground: rgba(190,190,190,.4);