commit
ec33806379
|
@ -31,16 +31,17 @@ function colorToRgb(color) {
|
||||||
const g = (val >> 8) & 255;
|
const g = (val >> 8) & 255;
|
||||||
const b = val & 255;
|
const b = val & 255;
|
||||||
return [r, g, b];
|
return [r, g, b];
|
||||||
}
|
} else {
|
||||||
else {
|
const match = color.match(/rgb\((.*?),(.*?),(.*?)\)/);
|
||||||
let match = color.match(/rgb\((.*?),(.*?),(.*?)\)/);
|
|
||||||
if (match) {
|
if (match) {
|
||||||
return [ parseInt(match[1]),
|
return [
|
||||||
parseInt(match[2]),
|
parseInt(match[1]),
|
||||||
parseInt(match[3]) ];
|
parseInt(match[2]),
|
||||||
|
parseInt(match[3]),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return [0,0,0];
|
return [0, 0, 0];
|
||||||
}
|
}
|
||||||
|
|
||||||
// utility to turn [red,green,blue] into #rrggbb
|
// utility to turn [red,green,blue] into #rrggbb
|
||||||
|
@ -152,9 +153,11 @@ class Tinter {
|
||||||
|
|
||||||
this.calcCssFixups();
|
this.calcCssFixups();
|
||||||
|
|
||||||
if (DEBUG) console.log("Tinter.tint(" + primaryColor + ", " +
|
if (DEBUG) {
|
||||||
secondaryColor + ", " +
|
console.log("Tinter.tint(" + primaryColor + ", " +
|
||||||
tertiaryColor + ")");
|
secondaryColor + ", " +
|
||||||
|
tertiaryColor + ")");
|
||||||
|
}
|
||||||
|
|
||||||
if (!primaryColor) {
|
if (!primaryColor) {
|
||||||
primaryColor = this.keyRgb[0];
|
primaryColor = this.keyRgb[0];
|
||||||
|
@ -194,9 +197,11 @@ class Tinter {
|
||||||
this.colors[1] = secondaryColor;
|
this.colors[1] = secondaryColor;
|
||||||
this.colors[2] = tertiaryColor;
|
this.colors[2] = tertiaryColor;
|
||||||
|
|
||||||
if (DEBUG) console.log("Tinter.tint final: (" + primaryColor + ", " +
|
if (DEBUG) {
|
||||||
secondaryColor + ", " +
|
console.log("Tinter.tint final: (" + primaryColor + ", " +
|
||||||
tertiaryColor + ")");
|
secondaryColor + ", " +
|
||||||
|
tertiaryColor + ")");
|
||||||
|
}
|
||||||
|
|
||||||
// go through manually fixing up the stylesheets.
|
// go through manually fixing up the stylesheets.
|
||||||
this.applyCssFixups();
|
this.applyCssFixups();
|
||||||
|
@ -230,18 +235,15 @@ class Tinter {
|
||||||
// update keyRgb from the current theme CSS itself, if it defines it
|
// update keyRgb from the current theme CSS itself, if it defines it
|
||||||
if (document.getElementById('mx_theme_accentColor')) {
|
if (document.getElementById('mx_theme_accentColor')) {
|
||||||
this.keyRgb[0] = window.getComputedStyle(
|
this.keyRgb[0] = window.getComputedStyle(
|
||||||
document.getElementById('mx_theme_accentColor')
|
document.getElementById('mx_theme_accentColor')).color;
|
||||||
).color;
|
|
||||||
}
|
}
|
||||||
if (document.getElementById('mx_theme_secondaryAccentColor')) {
|
if (document.getElementById('mx_theme_secondaryAccentColor')) {
|
||||||
this.keyRgb[1] = window.getComputedStyle(
|
this.keyRgb[1] = window.getComputedStyle(
|
||||||
document.getElementById('mx_theme_secondaryAccentColor')
|
document.getElementById('mx_theme_secondaryAccentColor')).color;
|
||||||
).color;
|
|
||||||
}
|
}
|
||||||
if (document.getElementById('mx_theme_tertiaryAccentColor')) {
|
if (document.getElementById('mx_theme_tertiaryAccentColor')) {
|
||||||
this.keyRgb[2] = window.getComputedStyle(
|
this.keyRgb[2] = window.getComputedStyle(
|
||||||
document.getElementById('mx_theme_tertiaryAccentColor')
|
document.getElementById('mx_theme_tertiaryAccentColor')).color;
|
||||||
).color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.calcCssFixups();
|
this.calcCssFixups();
|
||||||
|
@ -262,9 +264,11 @@ class Tinter {
|
||||||
// cache our fixups
|
// cache our fixups
|
||||||
if (this.cssFixups[this.theme]) return;
|
if (this.cssFixups[this.theme]) return;
|
||||||
|
|
||||||
if (DEBUG) console.debug("calcCssFixups start for " + this.theme + " (checking " +
|
if (DEBUG) {
|
||||||
document.styleSheets.length +
|
console.debug("calcCssFixups start for " + this.theme + " (checking " +
|
||||||
" stylesheets)");
|
document.styleSheets.length +
|
||||||
|
" stylesheets)");
|
||||||
|
}
|
||||||
|
|
||||||
this.cssFixups[this.theme] = [];
|
this.cssFixups[this.theme] = [];
|
||||||
|
|
||||||
|
@ -322,21 +326,24 @@ class Tinter {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (DEBUG) console.log("calcCssFixups end (" +
|
if (DEBUG) {
|
||||||
this.cssFixups[this.theme].length +
|
console.log("calcCssFixups end (" +
|
||||||
" fixups)");
|
this.cssFixups[this.theme].length +
|
||||||
|
" fixups)");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
applyCssFixups() {
|
applyCssFixups() {
|
||||||
if (DEBUG) console.log("applyCssFixups start (" +
|
if (DEBUG) {
|
||||||
this.cssFixups[this.theme].length +
|
console.log("applyCssFixups start (" +
|
||||||
" fixups)");
|
this.cssFixups[this.theme].length +
|
||||||
|
" fixups)");
|
||||||
|
}
|
||||||
for (let i = 0; i < this.cssFixups[this.theme].length; i++) {
|
for (let i = 0; i < this.cssFixups[this.theme].length; i++) {
|
||||||
const cssFixup = this.cssFixups[this.theme][i];
|
const cssFixup = this.cssFixups[this.theme][i];
|
||||||
try {
|
try {
|
||||||
cssFixup.style[cssFixup.attr] = this.colors[cssFixup.index];
|
cssFixup.style[cssFixup.attr] = this.colors[cssFixup.index];
|
||||||
}
|
} catch (e) {
|
||||||
catch (e) {
|
|
||||||
// Firefox Quantum explodes if you manually edit the CSS in the
|
// Firefox Quantum explodes if you manually edit the CSS in the
|
||||||
// inspector and then try to do a tint, as apparently all the
|
// inspector and then try to do a tint, as apparently all the
|
||||||
// fixups are then stale.
|
// fixups are then stale.
|
||||||
|
@ -358,7 +365,7 @@ class Tinter {
|
||||||
if (DEBUG) console.log("calcSvgFixups start for " + svgs);
|
if (DEBUG) console.log("calcSvgFixups start for " + svgs);
|
||||||
const fixups = [];
|
const fixups = [];
|
||||||
for (let i = 0; i < svgs.length; i++) {
|
for (let i = 0; i < svgs.length; i++) {
|
||||||
var svgDoc;
|
let svgDoc;
|
||||||
try {
|
try {
|
||||||
svgDoc = svgs[i].contentDocument;
|
svgDoc = svgs[i].contentDocument;
|
||||||
} catch(e) {
|
} catch(e) {
|
||||||
|
@ -369,7 +376,7 @@ class Tinter {
|
||||||
if (e.stack) {
|
if (e.stack) {
|
||||||
msg += ' | stack: ' + e.stack;
|
msg += ' | stack: ' + e.stack;
|
||||||
}
|
}
|
||||||
console.error(e);
|
console.error(msg);
|
||||||
}
|
}
|
||||||
if (!svgDoc) continue;
|
if (!svgDoc) continue;
|
||||||
const tags = svgDoc.getElementsByTagName("*");
|
const tags = svgDoc.getElementsByTagName("*");
|
||||||
|
@ -379,8 +386,7 @@ class Tinter {
|
||||||
const attr = this.svgAttrs[k];
|
const attr = this.svgAttrs[k];
|
||||||
for (let l = 0; l < this.keyHex.length; l++) {
|
for (let l = 0; l < this.keyHex.length; l++) {
|
||||||
if (tag.getAttribute(attr) &&
|
if (tag.getAttribute(attr) &&
|
||||||
tag.getAttribute(attr).toUpperCase() === this.keyHex[l])
|
tag.getAttribute(attr).toUpperCase() === this.keyHex[l]) {
|
||||||
{
|
|
||||||
fixups.push({
|
fixups.push({
|
||||||
node: tag,
|
node: tag,
|
||||||
attr: attr,
|
attr: attr,
|
||||||
|
|
Loading…
Reference in New Issue