Bug 1497041 - Set the tag color directly instead of using tagColors.css. r=jorgk DONTBUILD
This is now needed because since
bug 1495808 the user can choose all 24bit colors and
tagColors.css does only support a small subset.
--- a/mail/base/content/glodaFacet.js
+++ b/mail/base/content/glodaFacet.js
@@ -1,16 +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/. */
/* global HTMLElement, DateFacetVis, FacetContext, glodaFacetStrings, FacetUtils, PluralForm */
/* global logException, Gloda */
var {MailServices} = ChromeUtils.import("resource:///modules/MailServices.jsm");
+var {Windows8WindowFrameColor} = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
class MozFacetDate extends HTMLElement {
get build() {
return this.buildFunc;
}
get brushItems() {
return (items) => this.vis.hoverItems(items);
@@ -1526,18 +1527,23 @@ class MozFacetResultMessage extends HTML
}
}
// - Tags
let tagsNode = this.tags;
if ("tags" in message && message.tags.length) {
for (let tag of message.tags) {
let tagNode = document.createElement("span");
- let colorClass = "blc-" + MailServices.tags.getColorForKey(tag.key).substr(1);
- tagNode.setAttribute("class", "message-tag tag " + colorClass);
+ let color = MailServices.tags.getColorForKey(tag.key);
+ let textColor = "black";
+ if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+ textColor = "white";
+ }
+ tagNode.setAttribute("class", "message-tag");
+ tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
tagNode.textContent = tag.tag;
tagsNode.appendChild(tagNode);
}
}
// - Body
if (message.indexedBodyText) {
let bodyText = message.indexedBodyText;
--- a/mail/base/content/glodaFacetView.js
+++ b/mail/base/content/glodaFacetView.js
@@ -12,16 +12,17 @@
* get it wrong and it may eventually want to migrate.
*/
var { Log4Moz } = ChromeUtils.import("resource:///modules/gloda/log4moz.js");
var { StringBundle } = ChromeUtils.import("resource:///modules/StringBundle.js");
var { PluralForm } = ChromeUtils.import("resource://gre/modules/PluralForm.jsm");
var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
var { MailServices } = ChromeUtils.import("resource:///modules/MailServices.jsm");
+var { Windows8WindowFrameColor } = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
var {
logObject,
logException,
} = ChromeUtils.import("resource:///modules/errUtils.js");
var { Gloda } = ChromeUtils.import("resource:///modules/gloda/public.js");
var {
FacetDriver,
@@ -91,18 +92,23 @@ const QueryExplanation = {
"glodaFacetView.constraints.query.involves.label");
involvesLabel = involvesLabel.replace("#1", constraint[2].value);
spanify(involvesLabel, "explanation-query-involves");
} else if (constraint[1].attributeName == "tag") {
const tagLabel = glodaFacetStrings.get(
"glodaFacetView.constraints.query.tagged.label");
const tag = constraint[2];
const tagNode = document.createElement("span");
- const colorClass = "blc-" + MailServices.tags.getColorForKey(tag.key).substr(1);
- tagNode.setAttribute("class", "message-tag tag " + colorClass);
+ const color = MailServices.tags.getColorForKey(tag.key);
+ let textColor = "black";
+ if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+ textColor = "white";
+ }
+ tagNode.setAttribute("class", "message-tag");
+ tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
tagNode.textContent = tag.tag;
spanify(tagLabel, "explanation-query-tagged");
this.node.appendChild(tagNode);
}
}
label = label + constraintStrings.join(", "); // XXX l10n?
} catch (e) {
logException(e);
--- a/mail/base/content/glodaFacetView.xhtml
+++ b/mail/base/content/glodaFacetView.xhtml
@@ -13,18 +13,16 @@
%facetViewDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
version="-//W3C//DTD XHTML 1.1//EN"
dir="&locale.dir;">
<head>
- <link rel="stylesheet" media="screen" type="text/css"
- href="chrome://messenger/skin/tagColors.css"/>
<!-- Themes -->
<link rel="stylesheet"
href="chrome://messenger/skin/glodaFacetView.css"
type="text/css"/>
<!-- Custom elements -->
<script type="application/javascript"
src="chrome://messenger/content/glodaFacet.js"></script>
<!-- Global Context -->
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -11,16 +11,17 @@
/* global gFolderDisplay */
/* global MozElementMixin */
/* global BaseControlMixin */
var {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
var {MailUtils} = ChromeUtils.import("resource:///modules/MailUtils.jsm");
var {MailServices} = ChromeUtils.import("resource:///modules/MailServices.jsm");
var {DBViewWrapper} = ChromeUtils.import("resource:///modules/DBViewWrapper.jsm");
+var { Windows8WindowFrameColor } = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
class MozMailHeaderfield extends MozXULElement {
connectedCallback() {
this.setAttribute("context", "copyPopup");
this.classList.add("headerValue");
}
set headerValue(val) {
@@ -69,21 +70,26 @@ class MozMailHeaderfieldTags extends Moz
// if we got a bad tag name, getTagForKey will throw an exception, skip it
// and go to the next one.
tagName = MailServices.tags.getTagForKey(tagsArray[i]);
} catch (ex) {
continue;
}
let color = MailServices.tags.getColorForKey(tagsArray[i]);
+ let textColor = "black";
+ if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+ textColor = "white";
+ }
// now create a label for the tag name, and set the color
const label = document.createElement("label");
label.setAttribute("value", tagName);
- label.className = "tagvalue blc-" + color.substr(1);
+ label.className = "tagvalue";
+ label.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
this.appendChild(label);
}
}
}
class MozMailNewsgroup extends MozXULElement {
connectedCallback() {
--- a/mail/base/content/mailWindowOverlay.js
+++ b/mail/base/content/mailWindowOverlay.js
@@ -987,17 +987,17 @@ function InitMessageTags(menuPopup) {
var newMenuItem = document.createElement("menuitem");
SetMessageTagLabel(newMenuItem, i + 1, taginfo.tag);
newMenuItem.setAttribute("value", taginfo.key);
newMenuItem.setAttribute("type", "checkbox");
newMenuItem.setAttribute("checked", removeKey);
newMenuItem.setAttribute("oncommand", "ToggleMessageTagMenu(event.target);");
var color = taginfo.color;
if (color)
- newMenuItem.setAttribute("class", "lc-" + color.substr(1));
+ newMenuItem.setAttribute("style", "color: " + color + ";");
menuPopup.appendChild(newMenuItem);
}
}
function InitRecentlyClosedTabsPopup(menuPopup) {
let tabs = document.getElementById("tabmail").recentlyClosedTabs;
// show Popup only when there are restorable tabs.
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -431,17 +431,17 @@ function OnLoadMessenger() {
UpdateMailPaneConfig(false);
CompactTheme.init();
if (AppConstants.platform == "win") {
// On Win8 set an attribute when the window frame color is too dark for black text.
if (window.matchMedia("(-moz-os-version: windows-win8)").matches &&
window.matchMedia("(-moz-windows-default-theme)").matches) {
let {Windows8WindowFrameColor} = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
- let windowFrameColor = new Color(Windows8WindowFrameColor.get());
+ let windowFrameColor = new Color(...Windows8WindowFrameColor.get());
// Default to black for foreground text.
if (!windowFrameColor.isContrastRatioAcceptable(new Color(0, 0, 0))) {
document.documentElement.setAttribute("darkwindowframe", "true");
}
} else if (AppConstants.isPlatformAndVersionAtLeast("win", "10")) {
// 17763 is the build number of Windows 10 version 1809
if (getWindowsVersionInfo().buildNumber < 17763) {
document.documentElement.setAttribute("always-use-accent-color-for-window-border", "");
--- a/mail/base/content/multimessageview.js
+++ b/mail/base/content/multimessageview.js
@@ -5,16 +5,18 @@
var {XPCOMUtils} = ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
var { Gloda } = ChromeUtils.import("resource:///modules/gloda/gloda.js");
var {
mimeMsgToContentSnippetAndMeta,
} = ChromeUtils.import("resource:///modules/gloda/connotent.js");
var { MsgHdrToMimeMessage } = ChromeUtils.import("resource:///modules/gloda/mimemsg.js");
var {DisplayNameUtils} = ChromeUtils.import("resource:///modules/DisplayNameUtils.jsm");
var {MailServices} = ChromeUtils.import("resource:///modules/MailServices.jsm");
+var {Windows8WindowFrameColor} = ChromeUtils.import("resource:///modules/Windows8WindowFrameColor.jsm");
+
var {
PluralStringFormatter,
makeFriendlyDateAgo,
} = ChromeUtils.import("resource:///modules/templateUtils.js");
var gMessenger = Cc["@mozilla.org/messenger;1"]
.createInstance(Ci.nsIMessenger);
@@ -354,21 +356,24 @@ MultiMessageSummary.prototype = {
let sortedTags = [...aTags];
sortedTags.sort(function(a, b) {
return a.key.localeCompare(b.key) ||
a.ordinal.localeCompare(b.ordinal);
});
for (let tag of sortedTags) {
let tagNode = document.createElement("span");
- // See tagColors.css.
let color = MailServices.tags.getColorForKey(tag.key);
- let colorClass = "blc-" + color.substr(1);
+ let textColor = "black";
+ if (!Windows8WindowFrameColor.isColorContrastEnough(color)) {
+ textColor = "white";
+ }
- tagNode.classList.add("tag", colorClass);
+ tagNode.className = "tag";
+ tagNode.setAttribute("style", "color: " + textColor + "; background-color: " + color + ";");
tagNode.dataset.tag = tag.tag;
tagNode.textContent = tag.tag;
aTagsNode.appendChild(tagNode);
}
},
/**
* Compute the size of the messages in the selection and display it in the
--- a/mail/base/content/multimessageview.xhtml
+++ b/mail/base/content/multimessageview.xhtml
@@ -24,18 +24,16 @@
<link rel="stylesheet" media="screen" type="text/css"
href="chrome://messenger/skin/primaryToolbar.css"/>
<link rel="stylesheet" media="screen" type="text/css"
href="chrome://messenger/skin/messageHeader.css"/>
<link rel="stylesheet" media="screen, print" type="text/css"
href="chrome://messenger/skin/multimessageview.css"/>
<link rel="stylesheet" media="print" type="text/css"
href="chrome://messenger/content/multimessageview_print.css"/>
- <link rel="stylesheet" media="screen, print" type="text/css"
- href="chrome://messenger/skin/tagColors.css"/>
<title>&window.title;</title>
<script type="application/javascript"
src="chrome://messenger/content/multimessageview.js"/>
</head>
<body>
<div id="heading_wrapper">
<xul:toolbox id="header-view-toolbox" class="inline-toolbox"
labelalign="end"
--- a/mail/base/modules/QuickFilterManager.jsm
+++ b/mail/base/modules/QuickFilterManager.jsm
@@ -877,20 +877,20 @@ var TagFacetingFilter = {
button.setAttribute("checked", "true");
if (!keywordMap[tag.key])
button.setAttribute("inverted", "true");
}
button.setAttribute("label", tag.tag);
button.setAttribute("value", tag.key);
let color = tag.color;
// everybody always gets to be an qfb-tag-button.
- if (color)
- button.setAttribute("class", "toolbarbutton-1 qfb-tag-button lc-" + color.substr(1));
- else
button.setAttribute("class", "toolbarbutton-1 qfb-tag-button");
+ if (color) {
+ button.setAttribute("style", "color: " + color + " !important;");
+ }
tagbar.appendChild(button);
}
}
tagbar.collapsed = !addCount;
},
};
QuickFilterManager.defineFilter(TagFacetingFilter);
--- a/mail/base/modules/Windows8WindowFrameColor.jsm
+++ b/mail/base/modules/Windows8WindowFrameColor.jsm
@@ -2,16 +2,17 @@
* 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";
this.EXPORTED_SYMBOLS = ["Windows8WindowFrameColor"];
const {WindowsRegistry} = ChromeUtils.import("resource://gre/modules/WindowsRegistry.jsm");
+const {Color} = ChromeUtils.import("resource://gre/modules/Color.jsm");
var Windows8WindowFrameColor = {
_windowFrameColor: null,
get() {
if (this._windowFrameColor)
return this._windowFrameColor;
@@ -21,30 +22,42 @@ var Windows8WindowFrameColor = {
"ColorizationColor");
if (customizationColor == undefined) {
// Seems to be the default color (hardcoded because of bug 1065998, bug 1107902)
return [158, 158, 158];
}
// The color returned from the Registry is in decimal form.
let customizationColorHex = customizationColor.toString(16);
+ let colorizationColorBalance = WindowsRegistry.readRegKey(HKCU, dwmKey,
+ "ColorizationColorBalance");
+ return this._windowFrameColor = this.getColor(customizationColorHex,
+ colorizationColorBalance);
+ },
+
+ /* Checks if black writing on 'aColor' background has enough contrast */
+ isColorContrastEnough(aColor) {
+ let bgColor = this.getColor(aColor);
+ return new Color(...bgColor).isContrastRatioAcceptable(new Color(0, 0, 0));
+ },
+
+ getColor(customizationColorHex, colorizationColorBalance) {
// Zero-pad the number just to make sure that it is 8 digits.
customizationColorHex = ("00000000" + customizationColorHex).substr(-8);
let customizationColorArray = customizationColorHex.match(/../g);
let [, fgR, fgG, fgB] = customizationColorArray.map(val => parseInt(val, 16));
- let colorizationColorBalance = WindowsRegistry.readRegKey(HKCU, dwmKey,
- "ColorizationColorBalance");
+
if (colorizationColorBalance == undefined) {
colorizationColorBalance = 78;
}
// Window frame base color when Color Intensity is at 0, see bug 1004576.
let frameBaseColor = 217;
let alpha = colorizationColorBalance / 100;
// Alpha-blend the foreground color with the frame base color.
let r = Math.round(fgR * alpha + frameBaseColor * (1 - alpha));
let g = Math.round(fgG * alpha + frameBaseColor * (1 - alpha));
let b = Math.round(fgB * alpha + frameBaseColor * (1 - alpha));
- return this._windowFrameColor = [r, g, b];
+ return [r, g, b];
},
};
--- a/mail/extensions/mailviews/content/msgViewPickerOverlay.js
+++ b/mail/extensions/mailviews/content/msgViewPickerOverlay.js
@@ -221,17 +221,17 @@ function RefreshTagsPopup(aMenupopup) {
let menuitem = document.createElement("menuitem");
menuitem.setAttribute("label", tagInfo.tag);
menuitem.setAttribute("value", kViewTagMarker + tagInfo.key);
menuitem.setAttribute("type", "radio");
if (tagInfo.key == currentTagKey)
menuitem.setAttribute("checked", true);
let color = tagInfo.color;
if (color)
- menuitem.setAttribute("class", "lc-" + color.substr(1));
+ menuitem.setAttribute("style", "color: " + color + ";");
aMenupopup.appendChild(menuitem);
}
}
function ViewPickerOnLoad() {
var viewPickerPopup = document.getElementById("viewPickerPopup");
if (viewPickerPopup)
RefreshAllViewPopups(viewPickerPopup, true);
--- a/mail/themes/linux/mail/messageWindow.css
+++ b/mail/themes/linux/mail/messageWindow.css
@@ -3,17 +3,16 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* ===== messageWindow.css ==============================================
== Styles for the message window.
======================================================================= */
@import url("chrome://messenger/skin/");
@import url("chrome://messenger/skin/primaryToolbar.css");
-@import url("chrome://messenger/skin/tagColors.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.mail-toolbox {
margin-top: 0;
padding-top: 0;
}
--- a/mail/themes/osx/mail/messageWindow.css
+++ b/mail/themes/osx/mail/messageWindow.css
@@ -3,17 +3,16 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* ===== messageWindow.css ==============================================
== Styles for the message window.
======================================================================= */
@import url("chrome://messenger/skin/");
@import url("chrome://messenger/skin/primaryToolbar.css");
-@import url("chrome://messenger/skin/tagColors.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* ::::: Mail Toolbars and Menubars ::::: */
.mail-toolbox {
border-bottom: 0;
}
--- a/mail/themes/windows/mail/messageWindow.css
+++ b/mail/themes/windows/mail/messageWindow.css
@@ -3,17 +3,16 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* ===== messageWindow.css ==============================================
== Styles for the message window.
======================================================================= */
@import url("chrome://messenger/skin/");
@import url("chrome://messenger/skin/primaryToolbar.css");
-@import url("chrome://messenger/skin/tagColors.css");
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#messengerWindow {
-moz-appearance: window;
background-color: -moz-Dialog;
}