Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-15 07:22:28 +02:00
Code Issues Releases Wiki Activity

Store non-normalized accent color

Browse Source 
Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/1957

Normalize color only at stylesheet build time, and cache
generated stylesheet for future reuse.
This commit is contained in:
Raymond Hill 2022-02-03 06:14:04 -05:00
parent 0e6d6e587b
commit 3e3d1e26be
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
7 changed files with 73 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/css/logger-ui.css
View File

@ -30,7 +30,7 @@ textarea {
padding-right: var(--default-gap-xsmall);
}
.permatoolbar button.active {
fill: rgb(var(--primary-color-50));
fill: rgb(var(--primary-50));
}
.permatoolbar button > .fa-icon {
font-size: 180%;
@ -175,12 +175,12 @@ body[dir="rtl"] #netInspector #filterExprPicker {
margin: 0;
}
#netInspector #filterExprPicker span[data-filtex]:hover {
background-color: rgb(var(--primary-color-70) / 25%);
border: 1px solid rgb(var(--primary-color-70));
background-color: rgb(var(--primary-70) / 25%);
border: 1px solid rgb(var(--primary-70));
}
#netInspector #filterExprPicker span.on[data-filtex] {
background-color: rgb(var(--primary-color-70) / 40%);
border: 1px solid rgb(var(--primary-color-70));
background-color: rgb(var(--primary-70) / 40%);
border: 1px solid rgb(var(--primary-70));
}
#netInspector .vscrollable {
@ -668,7 +668,7 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
text-decoration: line-through;
}
#netFilteringDialog > .panes > .details .exceptored .exceptor {
background-color: rgb(var(--primary-color-50) / 50%);
background-color: rgb(var(--primary-50) / 50%);
}
#netFilteringDialog > .panes > .details .exceptor::before {
content: '#@#';
@ -888,7 +888,7 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
display: inline-flex;
}
#loggerExportDialog .options span[data-i18n] {
border: 1px solid rgb(var(--primary-color-70));
border: 1px solid rgb(var(--primary-70));
cursor: pointer;
font-size: 90%;
margin: 0;
@ -896,11 +896,11 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
white-space: nowrap;
}
#loggerExportDialog .options span[data-i18n]:hover {
background-color: rgb(var(--primary-color-70) / 40%);
background-color: rgb(var(--primary-70) / 40%);
}
#loggerExportDialog .options span.on[data-i18n],
#loggerExportDialog .options span.pushbutton:active {
background-color: rgb(var(--primary-color-70) / 40%);
background-color: rgb(var(--primary-70) / 40%);
}
#loggerExportDialog .output {
font: smaller mono;

2
src/css/settings.css
View File

@ -36,7 +36,7 @@ body {
position: relative;
}
#themePrimary > span {
background-color: rgb(var(--primary-color-50));
background-color: rgb(var(--primary-50));
display: inline-flex;
width: 2em;
}

46
src/css/themes/default.css
View File

@ -140,17 +140,17 @@
*
* */
:root /* h268 */ {
--primary-color-5: 13 4 65; /* S:90 Luv:5 */
--primary-color-10: 22 9 92; /* S:90 Luv:10 */
--primary-color-20: 40 20 145; /* S:90 Luv:20 */
--primary-color-30: 59 32 202; /* S:90 Luv:30 */
--primary-color-40: 84 62 234; /* S:90 Luv:40 */
--primary-color-50: 112 98 240; /* S:90 Luv:50 */
--primary-color-60: 139 130 244; /* S:90 Luv:60 */
--primary-color-70: 168 162 247; /* S:90 Luv:70 */
--primary-color-80: 196 193 250; /* S:90 Luv:80 */
--primary-color-90: 225 224 252; /* S:90 Luv:90 */
--primary-color-95: 240 239 254; /* S:90 Luv:95 */
--primary-5: 13 4 65; /* S:90 Luv:5 */
--primary-10: 22 9 92; /* S:90 Luv:10 */
--primary-20: 40 20 145; /* S:90 Luv:20 */
--primary-30: 59 32 202; /* S:90 Luv:30 */
--primary-40: 84 62 234; /* S:90 Luv:40 */
--primary-50: 112 98 240; /* S:90 Luv:50 */
--primary-60: 139 130 244; /* S:90 Luv:60 */
--primary-70: 168 162 247; /* S:90 Luv:70 */
--primary-80: 196 193 250; /* S:90 Luv:80 */
--primary-90: 225 224 252; /* S:90 Luv:90 */
--primary-95: 240 239 254; /* S:90 Luv:95 */
}
/*
@ -219,13 +219,13 @@
--border-4: rgb(var(--gray-60));
--accent-ink-3: var(--ink-1);
--accent-surface-1: rgb(var(--primary-color-40));
--accent-surface-1: rgb(var(--primary-40));
/* popup panel */
--popup-cell-cname-ink: rgb(var(--blue-50));
--popup-cell-label-mixed-surface: #c29100; /* TODO: fix */
--popup-icon-x-ink: rgb(var(--red-60));
--popup-power-ink-rgb: var(--primary-color-50);
--popup-power-ink-rgb: var(--primary-50);
/* horizontal line separator */
--hr-ink: var(--surface-2);
@ -247,7 +247,7 @@
--cm-merge-chunk-surface: rgb(var(--surface-0-rgb) / 40%);
--cm-negative: #e32f00; /* h:15 S:100 Luv:50 */
--cm-positive: #008a21; /* h:130 S:100 Luv:50 */
--cm-selection-surface: rgb(var(--primary-color-70) / 50%);
--cm-selection-surface: rgb(var(--primary-70) / 50%);
--cm-selection-ink: var(--ink-1);
--cm-searching-ink: inherit;
--cm-searching-surface: rgb(var(--yellow-20) / 80%);
@ -296,13 +296,13 @@
--border-3: rgb(var(--gray-45));
--border-4: rgb(var(--gray-50));
--accent-surface-1: rgb(var(--primary-color-70));
--accent-surface-1: rgb(var(--primary-70));
/* popup panel */
--popup-cell-cname-ink: hsla(0, 0%, 53%, 0.3);
--popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1); /* TODO: fix */
--popup-icon-x-ink: rgb(var(--red-50));
--popup-power-ink-rgb: var(--primary-color-60);
--popup-power-ink-rgb: var(--primary-60);
/* cloud widget */
--cloud-total-used-surface: rgb(var(--violet-20) / 25%);
@ -314,7 +314,7 @@
--cm-matchingbracket: rgb(var(--green-30) / 50%);
--cm-negative: #ff8982; /* h:15 S:100 Luv:70 */
--cm-positive: #00c634; /* h:130 S:100 Luv:70 */
--cm-selection-surface: rgb(var(--primary-color-30) / 50%);
--cm-selection-surface: rgb(var(--primary-30) / 50%);
--cm-searching-ink: var(--surface-0);
--cm-searching-surface: rgb(var(--yellow-20));
@ -404,11 +404,11 @@
--popup-cell-block-own-surface: rgb(var(--popup-cell-block-own-surface-rgb));
--popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb));
--popup-power-ink: rgb(var(--popup-power-ink-rgb));
--popup-toolbar-surface: rgb(var(--primary-color-80) / 20%);
--popup-toolbar-surface-hover: rgb(var(--primary-color-80) / 25%);
--popup-toolbar-surface: rgb(var(--primary-80) / 20%);
--popup-toolbar-surface-hover: rgb(var(--primary-80) / 25%);
--popup-ruleset-tool-ink: var(--ink-1);
--popup-ruleset-tool-surface: rgb(var(--primary-color-80) / 20%);
--popup-ruleset-tool-surface-hover: rgb(var(--primary-color-80) / 25%);
--popup-ruleset-tool-surface: rgb(var(--primary-80) / 20%);
--popup-ruleset-tool-surface-hover: rgb(var(--primary-80) / 25%);
--popup-ruleset-tool-shadow: transparent;
}
@ -434,11 +434,11 @@
}
:root.accented {
--button-surface: rgb(var(--primary-color-80));
--button-surface: rgb(var(--primary-80));
}
:root.dark.accented {
--button-surface: rgb(var(--primary-color-30));
--button-surface: rgb(var(--primary-30));
}
/*

1
src/js/background.js
View File

@ -250,6 +250,7 @@ const µBlock = { // jshint ignore:line
liveBlockingProfiles: [],
blockingProfileColorCache: new Map(),
uiAccentStylesheet: '',
};
µBlock.domainFromHostname = domainFromHostname;

5
src/js/messaging.js
View File

@ -219,10 +219,15 @@ const onMessage = function(request, sender, callback) {
µb.toggleHostnameSwitch(request);
break;
case 'uiAccentStylesheet':
µb.uiAccentStylesheet = request.stylesheet;
break;
case 'uiStyles':
response = {
uiAccentCustom: µb.userSettings.uiAccentCustom,
uiAccentCustom0: µb.userSettings.uiAccentCustom0,
uiAccentStylesheet: µb.uiAccentStylesheet,
uiStyles: µb.hiddenSettings.uiStyles,
uiTheme: µb.userSettings.uiTheme,
};

3
src/js/settings.js
View File

@ -237,9 +237,6 @@ const onValueChanged = function(ev) {
case 'largeMediaSize':
value = Math.min(Math.max(Math.floor(parseInt(value, 10) || 0), 0), 1000000);
break;
case 'uiAccentCustom0':
value = uDom.normalizeAccentColor(value);
break;
default:
break;
}

66
src/js/udom.js
View File

@ -98,50 +98,48 @@ DOMListFactory.setTheme = function(theme) {
}
};
DOMListFactory.normalizeAccentColor = function(accentColor) {
if ( self.hsluv === undefined ) { return accentColor; }
const hsl = self.hsluv.hexToHsluv(accentColor);
hsl[0] = Math.round(hsl[0] * 10) / 10;
hsl[1] = Math.round(Math.min(100, Math.max(50, hsl[1])));
hsl[2] = 70;
const rgb = self.hsluv.hsluvToRgb(hsl).map(
a => Math.round(a * 255).toString(16).padStart(2, '0')
);
return `#${rgb.join('')}`;
};
DOMListFactory.setAccentColor = function(accentEnabled, accentColor) {
if ( self.hsluv === undefined ) { return; }
let w = self;
let styleText = '';
if ( accentEnabled ) {
DOMListFactory.setAccentColor = function(accentEnabled, accentColor, stylesheet = '') {
if ( accentEnabled && stylesheet === '' && self.hsluv !== undefined ) {
// Normalize first
const hsl = self.hsluv.hexToHsluv(accentColor);
hsl[0] = Math.round(hsl[0] * 10) / 10;
hsl[1] = Math.round(Math.min(100, Math.max(0, hsl[1])));
hsl[2] = 70;
const rgb = self.hsluv.hsluvToRgb(hsl).map(
a => Math.round(a * 255).toString(16).padStart(2, '0')
);
// Use normalized result to derive all shades
const rgbNormal = `#${rgb.join('')}`;
const shades = [ 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95 ];
const text = [];
const hsl = self.hsluv.hexToHsluv(accentColor);
text.push(':root {');
const hslNormal = self.hsluv.hexToHsluv(rgbNormal);
text.push(':root.accented {');
for ( const shade of shades ) {
hsl[2] = shade;
const rgb = self.hsluv.hsluvToRgb(hsl).map(a => Math.round(a * 255));
text.push(` --primary-color-${shade}: ${rgb.join(' ')};`);
hslNormal[2] = shade;
const rgb = self.hsluv.hsluvToRgb(hslNormal).map(a => Math.round(a * 255));
text.push(` --primary-${shade}: ${rgb.join(' ')};`);
}
text.push('}', '');
styleText = text.join('\n');
stylesheet = text.join('\n');
vAPI.messaging.send('uDom', { what: 'uiAccentStylesheet', stylesheet });
}
let w = self;
for (;;) {
let style = w.document.querySelector('style#accentColors');
const wdoc = w.document;
let style = wdoc.querySelector('style#accentColors');
if ( style !== null ) { style.remove(); }
if ( styleText.length !== 0 ) {
style = w.document.createElement('style');
if ( accentEnabled ) {
style = wdoc.createElement('style');
style.id = 'accentColors';
style.textContent = styleText;
w.document.head.append(style);
w.document.documentElement.classList.add('accented');
style.textContent = stylesheet;
wdoc.head.append(style);
wdoc.documentElement.classList.add('accented');
} else {
w.document.documentElement.classList.remove('accented');
wdoc.documentElement.classList.remove('accented');
}
if ( w === w.parent ) { break; }
w = w.parent;
try { void w.document; } catch(ex) { return; }
try { void w.document; } catch(ex) { break; }
}
};
@ -152,7 +150,11 @@ DOMListFactory.setAccentColor = function(accentEnabled, accentColor) {
if ( typeof response !== 'object' || response === null ) { return; }
uDom.setTheme(response.uiTheme);
if ( response.uiAccentCustom ) {
uDom.setAccentColor(true, response.uiAccentCustom0);
uDom.setAccentColor(
true,
response.uiAccentCustom0,
response.uiAccentStylesheet
);
}
if ( response.uiStyles !== 'unset' ) {
document.body.style.cssText = response.uiStyles;