Bug 1450554 - Fix identity box security color on dark themes. r=johannh
MozReview-Commit-ID: 4ulHEEAMonP
--- a/browser/components/nsBrowserGlue.js
+++ b/browser/components/nsBrowserGlue.js
@@ -712,16 +712,17 @@ BrowserGlue.prototype = {
name: gBrowserBundle.GetStringFromName("darkTheme.name"),
description: gBrowserBundle.GetStringFromName("darkTheme.description"),
iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg",
textcolor: "white",
accentcolor: "black",
popup: "#4a4a4f",
popup_text: "rgb(249, 249, 250)",
popup_border: "#27272b",
+ toolbar_field_text: "rgb(249, 249, 250)",
author: vendorShortName,
});
Normandy.init();
// Initialize the default l10n resource sources for L10nRegistry.
let locales = Services.locale.getPackagedLocales();
const appSource = new FileSource("app", locales, "resource://app/localization/{locale}/");
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -78,19 +78,15 @@ toolbar[brighttext] .toolbarbutton-1 {
}
/* URL bar and search bar*/
#urlbar:not([focused="true"]),
.searchbar-textbox:not([focused="true"]) {
border-color: var(--chrome-nav-bar-controls-border-color);
}
-#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels:-moz-lwtheme-brighttext {
- color: #30e60b;
-}
-
#urlbar-zoom-button:-moz-lwtheme-brighttext:hover {
background-color: rgba(255,255,255,.2);
}
#urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active {
background-color: rgba(255,255,255,.3);
}
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -25,16 +25,21 @@
#identity-box[open=true] {
background-color: hsla(0,0%,70%,.3);
fill-opacity: .8;
}
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
color: #058B00;
}
+
+:root[lwt-toolbar-field-brighttext] #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
+ color: #30e60b;
+}
+
#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
%ifdef MOZ_OFFICIAL_BRANDING
color: rgb(229,115,0);
%else
color: inherit;
%endif
}
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
@@ -31,18 +31,22 @@ add_task(async function test_support_too
},
files: {
"image1.png": BACKGROUND,
},
});
await extension.startup();
+ let root = document.documentElement;
// Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
- document.documentElement.removeAttribute("remotecontrol");
+ root.removeAttribute("remotecontrol");
+ registerCleanupFunction(() => {
+ root.setAttribute("remotecontrol", "true");
+ });
let toolbox = document.querySelector("#navigator-toolbox");
let searchbar = document.querySelector("#searchbar");
let fields = [
toolbox.querySelector("#urlbar"),
document.getAnonymousElementByAttribute(searchbar, "anonid", "searchbar-textbox"),
].filter(field => {
let bounds = field.getBoundingClientRect();
@@ -58,13 +62,65 @@ add_task(async function test_support_too
hexToCSS(TOOLBAR_FIELD_BACKGROUND),
"Field background should be set.");
Assert.equal(window.getComputedStyle(field).color,
hexToCSS(TOOLBAR_FIELD_COLOR),
"Field color should be set.");
testBorderColor(field, TOOLBAR_FIELD_BORDER);
}
- // Restore the `remotecontrol` attribute at the end of the test.
- document.documentElement.setAttribute("remotecontrol", "true");
+ await extension.unload();
+});
+
+add_task(async function test_support_toolbar_field_brighttext() {
+ let root = document.documentElement;
+ // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+ root.removeAttribute("remotecontrol");
+ registerCleanupFunction(() => {
+ root.setAttribute("remotecontrol", "true");
+ });
+ let toolbox = document.querySelector("#navigator-toolbox");
+ let urlbar = toolbox.querySelector("#urlbar");
+
+ let extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ "toolbar_field": "#fff",
+ "toolbar_field_text": "#000",
+ },
+ },
+ },
+ });
+
+ await extension.startup();
+
+ Assert.equal(window.getComputedStyle(urlbar).color,
+ hexToCSS("#000000"), "Color has been set");
+ Assert.ok(!root.hasAttribute("lwt-toolbar-field-brighttext"),
+ "Brighttext attribute should not be set");
+
+ await extension.unload();
+
+ extension = ExtensionTestUtils.loadExtension({
+ manifest: {
+ "theme": {
+ "colors": {
+ "accentcolor": ACCENT_COLOR,
+ "textcolor": TEXT_COLOR,
+ "toolbar_field": "#000",
+ "toolbar_field_text": "#fff",
+ },
+ },
+ },
+ });
+
+ await extension.startup();
+
+ Assert.equal(window.getComputedStyle(urlbar).color,
+ hexToCSS("#ffffff"), "Color has been set");
+ Assert.ok(root.hasAttribute("lwt-toolbar-field-brighttext"),
+ "Brighttext attribute should be set");
await extension.unload();
});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -24,17 +24,17 @@ const toolkitVariableMap = [
lwtProperty: "textcolor",
processColor(rgbaChannels, element) {
if (!rgbaChannels) {
element.removeAttribute("lwthemetextcolor");
element.removeAttribute("lwtheme");
return null;
}
const {r, g, b, a} = rgbaChannels;
- const luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
+ const luminance = _getLuminance(r, g, b);
element.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
element.setAttribute("lwtheme", "true");
return `rgba(${r}, ${g}, ${b}, ${a})` || "black";
}
}],
["--arrowpanel-background", {
lwtProperty: "popup"
}],
@@ -43,17 +43,31 @@ const toolkitVariableMap = [
}],
["--arrowpanel-border-color", {
lwtProperty: "popup_border"
}],
["--lwt-toolbar-field-background-color", {
lwtProperty: "toolbar_field"
}],
["--lwt-toolbar-field-color", {
- lwtProperty: "toolbar_field_text"
+ lwtProperty: "toolbar_field_text",
+ processColor(rgbaChannels, element) {
+ if (!rgbaChannels) {
+ element.removeAttribute("lwt-toolbar-field-brighttext");
+ return null;
+ }
+ const {r, g, b, a} = rgbaChannels;
+ const luminance = _getLuminance(r, g, b);
+ if (luminance <= 110) {
+ element.removeAttribute("lwt-toolbar-field-brighttext");
+ } else {
+ element.setAttribute("lwt-toolbar-field-brighttext", "true");
+ }
+ return `rgba(${r}, ${g}, ${b}, ${a})`;
+ }
}],
];
// Get the theme variables from the app resource directory.
// This allows per-app variables.
ChromeUtils.import("resource:///modules/ThemeVariableMap.jsm");
ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
@@ -238,8 +252,12 @@ function _parseRGBA(aColorString) {
rgba = rgba.map(x => parseFloat(x));
return {
r: rgba[0],
g: rgba[1],
b: rgba[2],
a: 3 in rgba ? rgba[3] : 1,
};
}
+
+function _getLuminance(r, g, b) {
+ return 0.2125 * r + 0.7154 * g + 0.0721 * b;
+}