diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 17f04d42d..0c2e6b08d 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -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; diff --git a/src/css/settings.css b/src/css/settings.css index 030541883..fa51ab8d3 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -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; } diff --git a/src/css/themes/default.css b/src/css/themes/default.css index 5846fc421..dd17a7937 100644 --- a/src/css/themes/default.css +++ b/src/css/themes/default.css @@ -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)); } /* diff --git a/src/js/background.js b/src/js/background.js index 6674ee730..a5d06f557 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -250,6 +250,7 @@ const µBlock = { // jshint ignore:line liveBlockingProfiles: [], blockingProfileColorCache: new Map(), + uiAccentStylesheet: '', }; µBlock.domainFromHostname = domainFromHostname; diff --git a/src/js/messaging.js b/src/js/messaging.js index cfcc031dd..f76a3e25d 100644 --- a/src/js/messaging.js +++ b/src/js/messaging.js @@ -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, }; diff --git a/src/js/settings.js b/src/js/settings.js index 2c7c92afd..a6b78802c 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -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; } diff --git a/src/js/udom.js b/src/js/udom.js index 3913b6ed3..b1acf6058 100644 --- a/src/js/udom.js +++ b/src/js/udom.js @@ -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;