fdbfb23547
* parserlib: fast section extraction, tweaks and speedups
* csslint: "simple-not" rule
* csslint: enable and fix "selector-newline" rule
* simplify db: resolve with result
* simplify download()
* remove noCode param as it wastes more time/memory on copying
* styleManager: switch style<->data names to reflect their actual contents
* inline method bodies to avoid indirection and enable better autocomplete/hint/jump support in IDE
* upgrade getEventKeyName to handle mouse clicks
* don't trust location.href as it hides text fragment
* getAllKeys is implemented since Chrome48, FF44
* allow recoverable css errors + async'ify usercss.js
* openManage: unminimize windows
* remove the obsolete Chrome pre-65 workaround
* fix temporal dead zone in apply.js
* ff bug workaround for simple editor window
* consistent window scrolling in scrollToEditor and jumpToPos
* rework waitForSelector and collapsible <details>
* blank paint frame workaround for new Chrome
* extract stuff from edit.js and load on demand
* simplify regexpTester::isShown
* move MozDocMapper to sections-util.js
* extract fitSelectBox()
* initialize router earlier
* use helpPopup.close()
* fix autofocus in popups, follow-up to 5bb1b5ef
* clone objects in prefs.get() + cosmetics
* reuse getAll result for INC
90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
/* global $create */// dom.js
|
|
/* global debounce */// toolbox.js
|
|
'use strict';
|
|
|
|
/* exported colorMimicry */
|
|
/**
|
|
* Calculates real color of an element:
|
|
* colorMimicry(cm.display.gutters, {bg: 'backgroundColor'})
|
|
* colorMimicry('input.foo.bar', null, $('some.parent.to.host.the.dummy'))
|
|
*/
|
|
function colorMimicry(el, targets, dummyContainer = document.body) {
|
|
const styleCache = colorMimicry.styleCache || (colorMimicry.styleCache = new Map());
|
|
targets = targets || {};
|
|
targets.fore = 'color';
|
|
const colors = {};
|
|
const done = {};
|
|
let numDone = 0;
|
|
let numTotal = 0;
|
|
const rootStyle = getStyle(document.documentElement);
|
|
for (const k in targets) {
|
|
const base = {r: 255, g: 255, b: 255, a: 1};
|
|
blend(base, rootStyle[targets[k]]);
|
|
colors[k] = base;
|
|
numTotal++;
|
|
}
|
|
const isDummy = typeof el === 'string';
|
|
if (isDummy) {
|
|
el = dummyContainer.appendChild($create(el, {style: 'display: none'}));
|
|
}
|
|
for (let current = el; current; current = current && current.parentElement) {
|
|
const style = getStyle(current);
|
|
for (const k in targets) {
|
|
if (!done[k]) {
|
|
done[k] = blend(colors[k], style[targets[k]]);
|
|
numDone += done[k] ? 1 : 0;
|
|
if (numDone === numTotal) {
|
|
current = null;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
colors.style = colors.style || style;
|
|
}
|
|
if (isDummy) {
|
|
el.remove();
|
|
}
|
|
for (const k in targets) {
|
|
const {r, g, b, a} = colors[k];
|
|
colors[k] = `rgba(${r}, ${g}, ${b}, ${a})`;
|
|
// https://www.w3.org/TR/AERT#color-contrast
|
|
colors[k + 'Luma'] = (r * .299 + g * .587 + b * .114) / 256;
|
|
}
|
|
debounce(clearCache);
|
|
return colors;
|
|
|
|
function blend(base, color) {
|
|
const [r, g, b, a = 255] = (color.match(/\d+/g) || []).map(Number);
|
|
if (a === 255) {
|
|
base.r = r;
|
|
base.g = g;
|
|
base.b = b;
|
|
base.a = 1;
|
|
} else if (a) {
|
|
const mixedA = 1 - (1 - a / 255) * (1 - base.a);
|
|
const q1 = a / 255 / mixedA;
|
|
const q2 = base.a * (1 - mixedA) / mixedA;
|
|
base.r = Math.round(r * q1 + base.r * q2);
|
|
base.g = Math.round(g * q1 + base.g * q2);
|
|
base.b = Math.round(b * q1 + base.b * q2);
|
|
base.a = mixedA;
|
|
}
|
|
return Math.abs(base.a - 1) < 1e-3;
|
|
}
|
|
|
|
// speed-up for sequential invocations within the same event loop cycle
|
|
// (we're assuming the invoker doesn't force CSSOM to refresh between the calls)
|
|
function getStyle(el) {
|
|
let style = styleCache.get(el);
|
|
if (!style) {
|
|
style = getComputedStyle(el);
|
|
styleCache.set(el, style);
|
|
}
|
|
return style;
|
|
}
|
|
|
|
function clearCache() {
|
|
styleCache.clear();
|
|
}
|
|
}
|