forked from mirrors/gecko-dev
We want to introduce this new variable to be able to theme more surfaces on the NTP. ntp_card_background is the color of cards (top site tiles, Pocket cards, etc). This patch changes browser_ext_themes_ntp_colors_perwindow.js and browser_ext_theme_ntp_colors.js. These aren't the most reliable tests; they fail on central and have [a lot of issues](https://bugzilla.mozilla.org/buglist.cgi?f5=component&f3=OP&f2=OP&f8=status_whiteboard&f9=cf_crash_signature&list_id=15832113&v8=toolkit%2Fcomponents%2Fextensions%2Ftest%2Fbrowser%2Fbrowser_ext_themes_ntp_colors_perwindow.js&o8=substring&query_format=advanced&v9=toolkit%2Fcomponents%2Fextensions%2Ftest%2Fbrowser%2Fbrowser_ext_themes_ntp_colors_perwindow.js&o9=substring&o5=substring&f10=CP&v5=toolkit%2Fcomponents%2Fextensions%2Ftest%2Fbrowser%2Fbrowser_ext_themes_ntp_colors_perwindow.js&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&f6=alias&classification=Client%20Software&classification=Developer%20Infrastructure&classification=Components&classification=Server%20Software&classification=Other&o4=substring&v4=toolkit%2Fcomponents%2Fextensions%2Ftest%2Fbrowser%2Fbrowser_ext_themes_ntp_colors_perwindow.js&o7=substring&v1=Graveyard&f11=CP&o1=notequals&v7=toolkit%2Fcomponents%2Fextensions%2Ftest%2Fbrowser%2Fbrowser_ext_themes_ntp_colors_perwindow.js&j3=OR&f4=product&f1=classification&f7=short_desc&v6=toolkit%2Fcomponents%2Fextensions%2Ftest%2Fbrowser%2Fbrowser_ext_themes_ntp_colors_perwindow.js&o6=substring). I will follow-up and attempt to fix them to be more reliable. Differential Revision: https://phabricator.services.mozilla.com/D125115
199 lines
3.9 KiB
JavaScript
199 lines
3.9 KiB
JavaScript
/* 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/. */
|
|
|
|
var EXPORTED_SYMBOLS = ["ThemeVariableMap", "ThemeContentPropertyList"];
|
|
|
|
const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
|
|
|
|
const ThemeVariableMap = [
|
|
[
|
|
"--lwt-accent-color-inactive",
|
|
{
|
|
lwtProperty: "accentcolorInactive",
|
|
},
|
|
],
|
|
[
|
|
"--lwt-background-alignment",
|
|
{
|
|
isColor: false,
|
|
lwtProperty: "backgroundsAlignment",
|
|
},
|
|
],
|
|
[
|
|
"--lwt-background-tiling",
|
|
{
|
|
isColor: false,
|
|
lwtProperty: "backgroundsTiling",
|
|
},
|
|
],
|
|
[
|
|
"--tab-loading-fill",
|
|
{
|
|
lwtProperty: "tab_loading",
|
|
optionalElementID: "tabbrowser-tabs",
|
|
},
|
|
],
|
|
[
|
|
"--lwt-tab-text",
|
|
{
|
|
lwtProperty: "tab_text",
|
|
},
|
|
],
|
|
[
|
|
"--tab-line-color",
|
|
{
|
|
lwtProperty: "tab_line",
|
|
optionalElementID: "tabbrowser-tabs",
|
|
},
|
|
],
|
|
[
|
|
"--lwt-background-tab-separator-color",
|
|
{
|
|
lwtProperty: "tab_background_separator",
|
|
},
|
|
],
|
|
[
|
|
"--toolbar-bgcolor",
|
|
{
|
|
lwtProperty: "toolbarColor",
|
|
processColor(rgbaChannels, element) {
|
|
if (!rgbaChannels) {
|
|
Services.prefs.setIntPref("browser.theme.toolbar-theme", 2);
|
|
return null;
|
|
}
|
|
const { r, g, b, a } = rgbaChannels;
|
|
Services.prefs.setIntPref(
|
|
"browser.theme.toolbar-theme",
|
|
_isColorDark(r, g, b) ? 0 : 1
|
|
);
|
|
return `rgba(${r}, ${g}, ${b}, ${a})`;
|
|
},
|
|
},
|
|
],
|
|
[
|
|
"--toolbar-color",
|
|
{
|
|
lwtProperty: "toolbar_text",
|
|
},
|
|
],
|
|
[
|
|
"--tabs-border-color",
|
|
{
|
|
lwtProperty: "toolbar_top_separator",
|
|
optionalElementID: "navigator-toolbox",
|
|
},
|
|
],
|
|
[
|
|
"--toolbarseparator-color",
|
|
{
|
|
lwtProperty: "toolbar_vertical_separator",
|
|
},
|
|
],
|
|
[
|
|
"--chrome-content-separator-color",
|
|
{
|
|
lwtProperty: "toolbar_bottom_separator",
|
|
},
|
|
],
|
|
[
|
|
"--toolbarbutton-icon-fill",
|
|
{
|
|
lwtProperty: "icon_color",
|
|
},
|
|
],
|
|
[
|
|
"--lwt-toolbarbutton-icon-fill-attention",
|
|
{
|
|
lwtProperty: "icon_attention_color",
|
|
},
|
|
],
|
|
[
|
|
"--toolbarbutton-hover-background",
|
|
{
|
|
lwtProperty: "button_background_hover",
|
|
},
|
|
],
|
|
[
|
|
"--toolbarbutton-active-background",
|
|
{
|
|
lwtProperty: "button_background_active",
|
|
},
|
|
],
|
|
[
|
|
"--lwt-selected-tab-background-color",
|
|
{
|
|
lwtProperty: "tab_selected",
|
|
},
|
|
],
|
|
[
|
|
"--autocomplete-popup-background",
|
|
{
|
|
lwtProperty: "popup",
|
|
},
|
|
],
|
|
[
|
|
"--autocomplete-popup-color",
|
|
{
|
|
lwtProperty: "popup_text",
|
|
},
|
|
],
|
|
[
|
|
"--autocomplete-popup-highlight-background",
|
|
{
|
|
lwtProperty: "popup_highlight",
|
|
},
|
|
],
|
|
[
|
|
"--autocomplete-popup-highlight-color",
|
|
{
|
|
lwtProperty: "popup_highlight_text",
|
|
},
|
|
],
|
|
[
|
|
"--sidebar-background-color",
|
|
{
|
|
lwtProperty: "sidebar",
|
|
optionalElementID: "sidebar-box",
|
|
processColor(rgbaChannels, element) {
|
|
if (!rgbaChannels) {
|
|
element.removeAttribute("lwt-sidebar");
|
|
return null;
|
|
}
|
|
const { r, g, b } = rgbaChannels;
|
|
element.setAttribute("lwt-sidebar", "true");
|
|
// Drop alpha channel
|
|
return `rgb(${r}, ${g}, ${b})`;
|
|
},
|
|
},
|
|
],
|
|
[
|
|
"--sidebar-text-color",
|
|
{
|
|
lwtProperty: "sidebar_text",
|
|
optionalElementID: "sidebar-box",
|
|
},
|
|
],
|
|
[
|
|
"--sidebar-border-color",
|
|
{
|
|
lwtProperty: "sidebar_border",
|
|
optionalElementID: "browser",
|
|
},
|
|
],
|
|
];
|
|
|
|
const ThemeContentPropertyList = [
|
|
"ntp_background",
|
|
"ntp_card_background",
|
|
"ntp_text",
|
|
"sidebar",
|
|
"sidebar_highlight",
|
|
"sidebar_highlight_text",
|
|
"sidebar_text",
|
|
];
|
|
|
|
// This is copied from LightweightThemeConsumer.jsm.
|
|
function _isColorDark(r, g, b) {
|
|
return 0.2125 * r + 0.7154 * g + 0.0721 * b <= 127;
|
|
}
|