Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-22 18:32:45 +01:00
Code Issues Releases Wiki Activity

Bring dark theme out of experimental status

Browse Source 
Too many changes to list here, essentially there is now a
user interface setting to enable/disable dark theme, and
I've rearranged a bit the Settings pane as a result and
also altered other visuals in various places.

There are places which I know have not been thoroughly
tested (i.e. logger inspector).

Will fine-tune as per feedback.

Issues with the classic popup panel will not be addressed,
and if feedback is that it has become unusuable, it will be
outright removed.
This commit is contained in:
Raymond Hill 2022-02-02 15:40:47 -05:00
parent 2bc9c8aa38
commit ecb73d2ff5
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
34 changed files with 462 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/1p-filters.html
View File

@ -50,6 +50,7 @@
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/diff/swatinem_diff.js"></script>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/codemirror/search.js"></script>
<script src="js/codemirror/search-thread.js"></script>

2
src/3p-filters.html
View File

@ -70,6 +70,8 @@
</div>
</div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>

3
src/about.html
View File

@ -35,6 +35,7 @@
<div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
<div class="li"><span><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a></span></div>
<div class="li"><span><a href="https://github.com/foo123/RegexAnalyzer" target="_blank">Regular Expression Analyzer</a> by <a href="https://github.com/foo123">Nikos M.</a></span></div>
<div class="li"><span><a href="https://github.com/hsluv/hsluv" target="_blank">HSLuv - Human-friendly HSL</a> by <a href="https://github.com/foo123">Alexei Boronine</a></span></div>
</div>
<div class="li"><span data-i18n="aboutCDNs"></span></div>
<div class="liul">
@ -44,6 +45,8 @@
</div>
</div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>

1
src/advanced-settings.html
View File

@ -27,6 +27,7 @@
<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>

1
src/asset-viewer.html
View File

@ -33,6 +33,7 @@
<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/codemirror/search.js"></script>
<script src="js/codemirror/search-thread.js"></script>

20
src/css/codemirror.css
View File

@ -12,9 +12,6 @@
height: 100%;
width: 100%;
}
.CodeMirror-activeline-background {
background-color: var(--cm-active-line);
}
.CodeMirror-cursor {
border-color: var(--cm-cursor);
}
@ -118,6 +115,7 @@
color: var(--sf-variable-ink);
}
.cm-s-default .cm-warning {
background-color: var(--sf-warning-surface);
text-decoration: underline var(--sf-warning-ink);
text-underline-position: under;
}
@ -166,7 +164,7 @@
font-size: 140%;
}
.cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
fill: #000;
fill: var(--ink-1);
}
.cm-search-widget-input input {
border: 1px solid var(--cm-gutter-ink);
@ -205,11 +203,11 @@
color: var(--cm-merge-copy-ink);
}
.CodeMirror-merge-l-chunk {
background-color: var(--cm-merge-l-chunk-surface);
background-color: var(--cm-merge-chunk-surface);
}
.CodeMirror-merge-l-chunk-start,
.CodeMirror-merge-l-chunk-end {
border-color: var(--cm-merge-l-chunk-border);
border-color: var(--cm-merge-chunk-border);
}
.CodeMirror-merge-l-deleted {
background-image: none;
@ -224,10 +222,16 @@
vertical-align: top;
}
.CodeMirror-merge-spacer {
background-color: var(--surface-0);
opacity: 40%;
background-color: var(--cm-merge-chunk-surface);
}
.CodeMirror-hints {
z-index: 10000;
}
/* Must appear after other background color declarations to be sure it
* overrides them
* */
.CodeMirror-activeline-background {
background-color: var(--cm-active-line);
}

4
src/css/common.css
View File

@ -115,7 +115,7 @@ button.active {
}
button.disabled,
button[disabled] {
background-color: var(--button-surface);
background-color: var(--button-disabled-surface);
color: var(--button-ink);
fill: var(--button-ink);
filter: var(--button-disabled-filter);
@ -124,7 +124,7 @@ button[disabled] {
button.preferred:not(.disabled):not([disabled]) {
background-color: var(--button-preferred-surface);
color: var(--button-preferred-ink);
fill: var(--button-preferred-ink);
fill: var(--button-preferred-ink);
}
button.preferred:not(.disabled):not([disabled]):hover > .hover {
background-color: var(--elevation-down-surface);

4
src/css/dashboard-common.css
View File

@ -25,6 +25,10 @@ a {
color: var(--info2-ink);
fill: var(--info2-ink);
}
.fa-icon.info.very-important {
color: var(--info3-ink);
fill: var(--info3-ink);
}
input[type="number"] {
width: 5em;
}

20
src/css/document-blocked.css
View File

@ -45,6 +45,7 @@ a {
font-size: 96px;
}
#theURL {
color: var(--ink-2);
padding: 0;
}
#theURL > * {
@ -54,33 +55,32 @@ a {
position: relative;
z-index: 10;
}
#theURL > p > span:last-of-type {
#theURL #toggleParse {
background-color: transparent;
top: 100%;
box-sizing: border-box;
color: var(--ink-4);
fill: var(--ink-4);
color: var(--ink-3);
fill: var(--ink-3);
cursor: pointer;
font-size: 1.2rem;
padding: var(--default-gap-xxsmall);
position: absolute;
transform: translate(0, -50%);
}
#theURL:not(.collapsed) > p > span:last-of-type > span:first-of-type {
#theURL:not(.collapsed) #toggleParse > span:first-of-type {
display: none;
}
#theURL.collapsed > p > span:last-of-type > span:last-of-type {
#theURL.collapsed #toggleParse > span:last-of-type {
display: none;
}
body[dir="ltr"] #theURL > p > span:last-of-type {
body[dir="ltr"] #toggleParse {
right: 0;
}
body[dir="rtl"] #theURL > p > span:last-of-type {
body[dir="rtl"] #toggleParse {
left: 0;
}
#theURL > p:hover > span {
color: var(--ink-1);
fill: var(--ink-1);
#theURL > p:hover #toggleParse {
transform: translate(0, -50%) scale(1.15);
}
#parsed {
background-color: var(--surface-1);

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

@ -225,29 +225,21 @@ body[dir="rtl"] #netInspector #filterExprPicker {
}
#vwRenderer .logEntry > div[data-status="1"],
#netFilteringDialog > .panes > .details > div[data-status="1"] {
background-color: var(--logger-blocked-surface);
background-color: rgb(var(--popup-cell-block-surface-rgb) / 50%);
}
#vwRenderer .logEntry > div[data-status="1"][data-modifier],
#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] {
background-color: var(--logger-modified-surface);
}
body.colorBlind #vwRenderer .logEntry > div[data-status="1"],
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] {
background-color: rgba(0, 19, 110, 0.1);
}
#vwRenderer .logEntry > div[data-status="3"] {
background-color: rgba(108, 108, 108, 0.1);
}
body.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
background-color: rgba(96, 96, 96, 0.1);
}
#vwRenderer .logEntry > div[data-status="2"],
#netFilteringDialog > .panes > .details > div[data-status="2"] {
background-color: var(--logger-allowed-surface);
}
body.colorBlind #vwRenderer .logEntry > div[data-status="2"],
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
background-color: rgba(255, 194, 57, 0.1)
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 50%);
}
#vwRenderer .logEntry > div[data-tabid="-1"] {
text-shadow: 0 0.2em 0.4em #aaa;
@ -256,8 +248,8 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
#vwRenderer .logEntry > div.redirect {
background-color: var(--logger-redirected-surface);
}
body.colorBlind #vwRenderer .logEntry > div.extendedRealm,
body.colorBlind #vwRenderer .logEntry > div.redirect {
:root.colorBlind #vwRenderer .logEntry > div.extendedRealm,
:root.colorBlind #vwRenderer .logEntry > div.redirect {
background-color: rgba(0, 19, 110, 0.1);
}
#vwRenderer .logEntry > div[data-aliasid] {
@ -376,29 +368,21 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
}
#vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
#netFilteringDialog > .panes > .details > div[data-status="1"] b {
background-color: var(--logger-blocked-em-surface);
background-color: rgb(var(--popup-cell-block-surface-rgb) / 100%);
}
#vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(7) b,
#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b {
background-color: var(--logger-modified-em-surface);
}
body.colorBlind #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] b {
background-color: rgba(0, 19, 110, 0.2);
}
#vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
background-color: rgba(108, 108, 108, 0.2);
}
body.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
:root.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
background-color: rgba(96, 96, 96, 0.2);
}
#vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
#netFilteringDialog > .panes > .details > div[data-status="2"] b {
background-color: var(--logger-allowed-em-surface);
}
body.colorBlind #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b {
background-color: rgba(255, 194, 57, 0.2);
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%);
}
#vwRenderer .logEntry > div > span:nth-of-type(7) a {
background-color: dimgray;
@ -759,35 +743,35 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
#netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
background-color: rgba(0, 160, 0, 0.3);
}
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
background-color: rgba(255, 194, 57, 0.4);
}
#netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
background-color: rgba(108, 108, 108, 0.3);
}
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
background-color: rgba(96, 96, 96, 0.4);
}
#netFilteringDialog > div.panes > .dynamic .entry > .action.block {
background-color: rgba(192, 0, 0, 0.3);
}
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
background-color: rgba(0, 19, 110, 0.4);
}
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
background-color: rgba(0, 160, 0, 1);
}
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
background-color: rgba(255, 194, 57, 1);
}
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop,
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop {
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop {
background-color: rgba(108, 108, 108, 1);
}
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
background-color: rgba(192, 0, 0, 1);
}
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
background-color: rgba(0, 19, 110, 1);
}
#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span {
@ -800,7 +784,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.
#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
background-color: rgb(0, 160, 0);
}
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
background-color: rgb(255, 194, 57);
}
#netFilteringDialog > div.panes > .dynamic .entry > .action > .noop {
@ -809,7 +793,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .
#netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
background-color: rgb(192, 0, 0);
}
body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
background-color: rgb(0, 19, 110);
}
#netFilteringDialog > div.panes > .dynamic .entry > .url {

32
src/css/popup-fenix.css
View File

@ -64,10 +64,6 @@ hr {
align-items: stretch;
display: flex;
justify-content: space-between;
margin: var(--popup-gap-thin)
var(--popup-gap-thin)
var(--popup-gap)
var(--popup-gap-thin);
}
#switch {
color: var(--popup-power-ink);
@ -77,7 +73,7 @@ hr {
flex-grow: 1;
font-size: 96px;
justify-content: center;
margin: 0 var(--popup-gap-thin);
margin: var(--popup-gap-thin) var(--popup-gap-thin) 0;
padding: 0;
stroke: none;
stroke-width: 64;
@ -106,7 +102,7 @@ body.off #switch {
visibility: hidden;
}
.rulesetTools [id]:not(:first-of-type) {
margin-top: 0.2em;
margin-block-start: 1px;
}
.rulesetTools [id] > svg {
fill: var(--ink-4);
@ -174,6 +170,7 @@ body.needSave #revertRules {
.toolRibbon {
align-items: start;
background-color: var(--popup-toolbar-surface);
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
@ -228,10 +225,11 @@ body.mobile.no-tooltips .toolRibbon .tool {
}
#moreOrLess {
column-gap: var(--popup-gap);
column-gap: 0;
display: grid;
grid-template: auto / 1fr 1fr;
margin: 0;
justify-items: stretch;
margin: 1px 0 0 0;
}
#moreOrLess > span {
cursor: pointer;
@ -247,6 +245,7 @@ body.mobile.no-tooltips .toolRibbon .tool {
transform: rotate(180deg);
}
#lessButton {
border-inline-start: 1px solid var(--surface-1);
text-align: end;
}
body[data-more="a b c d e f"] #moreButton {
@ -269,6 +268,9 @@ body[data-more=""] #lessButton {
padding: 0;
overflow-y: auto;
}
:root.desktop #firewall {
margin-inline-start: 1px;
}
:root.desktop body.vMin #firewall {
max-height: 100vh;
}
@ -601,6 +603,15 @@ body:not([data-more~="f"]) [data-more="f"] {
overflow-y: hidden;
visibility: hidden;
}
body[data-more~="d"] hr[data-more="a"] {
display: none;
}
body[data-more~="c"] hr[data-more="f"] {
display: none;
}
body[data-more~="c"]:not([data-more~="f"]) hr[data-more="g"] {
display: none;
}
body:not([data-more~="e"]) [data-more="e"] {
display: none;
}
@ -663,15 +674,16 @@ body:not([data-more~="e"]) [data-more="e"] {
background-color: var(--popup-ruleset-tool-surface-hover);
}
:root.desktop .rulesetTools [id]:hover > svg {
fill: var(--ink-3);
fill: var(--ink-2);
}
:root.desktop #firewall {
direction: rtl;
line-height: 1.4;
}
:root.desktop .tool:hover {
background-color: var(--surface-2);
background-color: var(--popup-toolbar-surface-hover);
}
:root.desktop #moreOrLess > span:hover {
background-color: var(--surface-2);
/* background-color: var(--popup-toolbar-surface-hover); */
}

3
src/css/popup.css
View File

@ -2,6 +2,9 @@
--bg-tooltip: hsla(60, 100%, 97%, 1);
--popup-power-ink: rgb(0 110 254);
--popup-power-ink-hover: rgb(var(--blue-60));
--ink-2: rgb(var(--ink-rgb) / 80%);
--ink-3: rgb(var(--ink-rgb) / 60%);
--ink-4: rgb(var(--ink-rgb) / 40%);
--ink-5: rgb(var(--ink-rgb) / 20%);
}
:root.dark {

38
src/css/settings.css
View File

@ -1,15 +1,53 @@
body {
margin-bottom: 6rem;
}
.synopsis {
color: var(--ink-1);
font-size: 90%;
opacity: var(--medium-em);
}
/* surface/ink */
#themeMood {
align-items: stretch;
align-self: stretch;
display: inline-flex;
justify-content: stretch
user-select: none;
}
#themeMood > span {
border: 1px solid var(--ink-1);
color: var(--ink-1);
display: inline-flex;
background-color: var(--surface-1);
display: inline-block;
padding: 0 0.5em;
text-align: center;
user-select: none;
}
/* primary color */
#themePrimary {
align-items: stretch;
align-self: stretch;
display: inline-flex;
justify-content: stretch
position: relative;
}
#themePrimary > span {
background-color: rgb(var(--primary-color-50));
display: inline-flex;
width: 2em;
}
[href="advanced-settings.html"] {
display: none;
}
body.advancedUser [href="advanced-settings.html"] {
display: inline-flex;
}
#localData > div {
margin-bottom: var(--default-gap-small);
}

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

@ -134,65 +134,23 @@
}
/*
* Color themes
* Default color theme
*
* Tool: hsluv.org
*
* */
:root.h0 {
--primary-color-30: 139 18 60; /* S:90 Luv:30 */
--primary-color-40: 181 27 81; /* S:90 Luv:40 */
--primary-color-50: 226 37 102; /* S:90 Luv:50 */
--primary-color-60: 247 87 130; /* S:90 Luv:60 */
--primary-color-70: 248 138 162; /* S:90 Luv:70 */
--primary-color-70: 248 138 162; /* S:90 Luv:70 */
--primary-color-80: 250 180 193; /* S:90 Luv:80 */
}
:root.h45 {
--primary-color-30: 98 63 17; /* S:90 Luv:30 */
--primary-color-40: 130 85 25; /* S:90 Luv:40 */
--primary-color-50: 162 107 34; /* S:90 Luv:50 */
--primary-color-60: 196 131 43; /* S:90 Luv:60 */
--primary-color-70: 232 155 53; /* S:90 Luv:70 */
--primary-color-80: 251 185 123; /* S:90 Luv:80 */
}
:root.h180 {
--primary-color-30: 18 79 73; /* S:90 Luv:30 */
--primary-color-40: 27 105 98; /* S:90 Luv:40 */
--primary-color-50: 37 132 123; /* S:90 Luv:50 */
--primary-color-60: 47 161 150; /* S:90 Luv:60 */
--primary-color-70: 57 190 177; /* S:90 Luv:70 */
--primary-color-80: 67 220 205; /* S:90 Luv:80 */
}
:root.h225 {
--primary-color-30: 20 77 95; /* S:90 Luv:30 */
--primary-color-40: 29 102 125; /* S:90 Luv:40 */
--primary-color-50: 39 128 157; /* S:90 Luv:50 */
--primary-color-60: 50 156 190; /* S:90 Luv:60 */
--primary-color-70: 60 184 224; /* S:90 Luv:70 */
--primary-color-80: 110 211 250; /* S:90 Luv:80 */
}
:root /* .h270 default */ {
--primary-color-30: 72 31 194; /* S:90 Luv:30 */
--primary-color-40: 96 56 234; /* S:90 Luv:40 */
--primary-color-50: 120 95 240; /* S:90 Luv:50 */
--primary-color-60: 146 128 244; /* S:90 Luv:60 */
--primary-color-70: 172 160 247; /* S:90 Luv:70 */
--primary-color-80: 199 192 250; /* S:90 Luv:80 */
}
:root.h315 {
--primary-color-10: 54 5 49; /* S:90 Luv:10 */
--primary-color-30: 126 22 115; /* S:90 Luv:30 */
--primary-color-40: 165 32 151; /* S:90 Luv:40 */
--primary-color-50: 205 43 189; /* S:90 Luv:50 */
--primary-color-60: 244 61 225; /* S:90 Luv:60 */
--primary-color-70: 247 127 231; /* S:90 Luv:70 */
--primary-color-80: 250 174 238; /* S:90 Luv:80 */
: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 */
}
/*
@ -211,14 +169,12 @@
--elevation-down1-opacity: 16%;
--elevation-down2-opacity: 32%;
/* https://material.io/design/color/text-legibility.html#text-backgrounds */
--ink-rgb: var(--ink-80);
--ink-0: black;
--ink-1: rgb(var(--ink-rgb));
--ink-2: rgb(var(--ink-rgb) / 80%);
--ink-3: rgb(var(--ink-rgb) / 60%);
--ink-4: rgb(var(--ink-rgb) / 40%);
--surface-0: white;
--surface-0-rgb: 255 255 255;
--surface-0: rgb(var(--surface-0-rgb));
--surface-1: rgb(var(--gray-95));
--surface-2: rgb(var(--gray-90));
--surface-3: rgb(var(--gray-80));
@ -228,68 +184,14 @@
--border-3: rgb(var(--gray-65));
--border-4: rgb(var(--gray-60));
--accent-ink-1: var(--surface-1);
--accent-ink-3: var(--ink-1);
--accent-surface-1: rgb(var(--primary-color-30));
--accent-surface-2: rgb(var(--primary-color-50));
--accent-surface-3: rgb(var(--primary-color-70));
--link-ink: var(--accent-surface-1);
--subtil-ink: var(--accent-surface-1);
--fieldset-header-surface: transparent;
--fieldset-header-ink: var(--ink-2);
--button-ink: var(--ink-1);
--button-surface: var(--surface-3);
--button-border-radius: 5px;
--button-preferred-ink: var(--accent-ink-1);
--button-preferred-surface: var(--accent-surface-1);
--button-disabled-filter: opacity(50%);
--checkbox-size: calc(var(--font-size) + 2px);
--checkbox-ink: var(--ink-3);
--checkbox-checked-ink: var(--accent-surface-1);
--checkbox-disabled-filter: opacity(50%);
--notice-ink: var(--accent-ink-1);
--notice-surface: var(--accent-surface-1);
--notice-surface-shadow: #000 0 2px 8px;
--dashboard-tab-ink: var(--ink-1);
--dashboard-tab-active-ink: var(--accent-surface-1);
--dashboard-tab-active-surface: rgb(var(--primary-color-70) / 10%);
--dashboard-tab-surface-hover: var(--surface-2);
--dashboard-tab-border-hover: var(--surface-3);
/* info levels: normal, fyi, warn, error -- we want same Luv */
--info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */
--info1-ink-rgb: 72 143 255; /* h:255 S:100 Luv:60 */
--info2-ink-rgb: 208 125 0; /* h: 40 S:100 Luv:60 */
--info3-ink-rgb: 255 82 94; /* h: 10 S:100 Luv:60 */
--info0-ink: rgb(var(--info0-ink-rgb));
--info1-ink: rgb(var(--info1-ink-rgb));
--info2-ink: rgb(var(--info2-ink-rgb));
--info3-ink: rgb(var(--info3-ink-rgb));
--accent-surface-1: rgb(var(--primary-color-40));
/* popup panel */
--popup-cell-surface: var(--surface-2);
--popup-cell-label-filter: opacity(40%);
--popup-cell-cname-ink: rgb(var(--blue-50));
--popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-own-surface-rgb));
--popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb));
--popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-own-surface-rgb));
--popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb));
--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-cell-label-mixed-surface: #c29100; /* TODO: fix */
--popup-icon-x-ink: rgb(var(--red-60));
--popup-power-ink-rgb: var(--primary-color-40);
--popup-power-ink: rgb(var(--popup-power-ink-rgb));
--popup-ruleset-tool-ink: var(--ink-1);
--popup-ruleset-tool-surface: rgb(var(--primary-color-70) / 20%);
--popup-ruleset-tool-surface-hover: rgb(var(--primary-color-70) / 40%);
--popup-ruleset-tool-shadow: rgb(var(--primary-color-30) / 20%);
--popup-power-ink-rgb: var(--primary-color-50);
/* horizontal line separator */
--hr-ink: var(--surface-2);
@ -307,11 +209,11 @@
--cm-gutter-surface: var(--surface-2);
--cm-matchingbracket: rgb(var(--green-30));
--cm-merge-copy-ink: rgb(var(--blue-50));
--cm-merge-l-chunk-border: rgb(var(--blue-5));
--cm-merge-l-chunk-surface: rgb(var(--blue-5) / 20%);
--cm-negative: #c00;
--cm-positive: #080;
--cm-selection-surface: #8cf4;
--cm-merge-chunk-border: rgb(var(--surface-0-rgb) / 40%);
--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-ink: var(--ink-1);
--cm-searching-ink: inherit;
--cm-searching-surface: rgb(var(--yellow-20) / 80%);
@ -319,17 +221,18 @@
/* syntax highlight: static filtering */
--sf-comment-ink: var(--ink-3);
--sf-def-ink: rgb(var(--blue-50));
--sf-def-ink: #0075e7; /* h:255 S:100 Luv:50 */
--sf-directive-ink: var(--ink-1);
--sf-error-ink: rgb(var(--red-60));
--sf-error-surface: rgb(var(--red-60) / 10%);
--sf-keyword-ink: rgb(var(--purple-60));
--sf-notice-ink: var(--border-2);
--sf-error-ink: #e32f00; /* h15 S:100 Luv:50 */
--sf-error-surface: #e32f0019; /* h15 S:100 Luv:50 @ 10% */
--sf-keyword-ink: #8c00e6; /* h:280 S:100 Luv:40 */
--sf-notice-ink: var(--ink-4);
--sf-readonly-ink: var(--ink-3);
--sf-tag-ink: rgb(var(--green-60));
--sf-value-ink: rgb(var(--orange-70));
--sf-tag-ink: #008a3c /* h:135 S:100 Luv:50 */;
--sf-value-ink: #c65400 /* h:25 S:100 Luv:50 */;
--sf-variable-ink: var(--ink-1);
--sf-warning-ink: rgb(var(--yellow-50));
--sf-warning-ink: #a06d00; /* h:50 S:100 Luv:50 */
--sf-warning-surface: #a06d0019; /* h:50 S:100 Luv:50 @ 10% */
/* syntax highlight: dynamic filtering */
--df-allow-ink: var(--cm-positive);
@ -337,13 +240,9 @@
--df-noop-ink: rgb(var(--dark-gray-10));
/* logger */
--logger-allowed-surface: #00a00014;
--logger-blocked-surface: #c0000014;
--logger-modified-surface: #0000c010;
--logger-redirected-surface: rgb(var(--yellow-5) / 50%);
--logger-blocked-em-surface: #c0000036;
--logger-modified-em-surface: #0000c028;
--logger-allowed-em-surface: #00a00036;
}
/*
@ -368,7 +267,7 @@
--ink-rgb: var(--gray-95);
--ink-0: white;
--surface-0: black;
--surface-0-rgb: 0 0 0;
--surface-1: rgb(var(--gray-10));
--surface-2: rgb(var(--gray-20));
--surface-3: rgb(var(--gray-30));
@ -378,21 +277,13 @@
--border-3: rgb(var(--gray-45));
--border-4: rgb(var(--gray-50));
--accent-ink-1: rgb(var(--ink-80));
--accent-surface-1: rgb(var(--primary-color-70));
--accent-ink-1: var(--surface-1);
--accent-ink-3: var(--ink-1);
--accent-surface-1: rgb(var(--primary-color-70));
--accent-surface-3: rgb(var(--primary-color-30));
/* popup panel */
--popup-cell-label-filter: opacity(40%);
--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-ruleset-tool-shadow: -surface-0;
/* cloud widget */
--cloud-total-used-surface: rgb(var(--violet-20) / 25%);
@ -402,35 +293,104 @@
--cm-merge-copy-ink: rgb(var(--blue-30));
--cm-foldmarker-ink: rgb(var(--blue-20));
--cm-matchingbracket: rgb(var(--green-30) / 50%);
--cm-merge-l-chunk-border: rgb(var(--blue-70));
--cm-merge-l-chunk-surface: rgb(var(--blue-90));
--cm-negative: #f44;
--cm-positive: #0c0;
--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-searching-ink: var(--surface-0);
--cm-searching-surface: rgb(var(--yellow-20));
/* syntax highlight: static filtering */
--sf-comment-ink: var(--ink-3);
--sf-def-ink: rgb(var(--blue-20));
--sf-error-ink: rgb(var(--red-40));
--sf-error-surface: rgb(var(--red-40) / 40%);
--sf-keyword-ink: rgb(var(--purple-10));
--sf-notice-ink: var(--border-2);
--sf-tag-ink: rgb(var(--green-50));
--sf-value-ink: rgb(var(--orange-20));
--sf-def-ink: #84aaff; /* h:255 S:100 Luv:70 */
--sf-error-ink: #ff8981; /* h15 S:100 Luv:70 */
--sf-error-surface: #ff898166; /* h15 S:100 Luv:70 @ 40% */
--sf-keyword-ink: #d5bbff; /* h:280 S:100 Luv:80 */
--sf-tag-ink: #00c559 /* h:135 S:100 Luv:70 */;
--sf-value-ink: #ff8c62 /* h:25 S:100 Luv:70 */;
--sf-variable-ink: var(--ink-1);
--sf-warning-ink: rgb(var(--yellow-50));
--sf-warning-ink: #e49d00; /* h:50 S:100 Luv:70 */
--sf-warning-surface: #e49d0066; /* h:50 S:100 Luv:50 @ 40% */
/* syntax highlight: dynamic filtering */
--df-noop-ink: var(--ink-3);
/* logger */
--logger-allowed-surface: #24a71960;
--logger-blocked-surface: #ff4c2b60;
--logger-modified-surface: #663efd60;
--logger-redirected-surface: rgb(var(--yellow-5) / 40%);
}
/*
* Shared declarations
* */
:root {
--high-em: 87%;
--medium-em: 60%;
--low-em: 38%;
--ink-1: rgb(var(--ink-rgb));
--ink-2: rgb(var(--ink-rgb) / var(--high-em));
--ink-3: rgb(var(--ink-rgb) / var(--medium-em));
--ink-4: rgb(var(--ink-rgb) / var(--low-em));
--accent-ink-1: var(--surface-0);
--accent-ink-3: var(--ink-1);
--link-ink: var(--accent-surface-1);
--subtil-ink: var(--accent-surface-1);
--fieldset-header-surface: transparent;
--fieldset-header-ink: var(--ink-2);
--button-ink: var(--ink-1);
--button-surface: var(--surface-3);
--button-border-radius: 5px;
--button-preferred-ink: var(--accent-ink-1);
--button-preferred-surface: var(--accent-surface-1);
--button-disabled-surface: var(--surface-3);
--button-disabled-filter: opacity(50%);
--checkbox-size: calc(var(--font-size) + 2px);
--checkbox-ink: var(--ink-3);
--checkbox-checked-ink: var(--accent-surface-1);
--checkbox-disabled-filter: opacity(50%);
--notice-ink: var(--accent-ink-1);
--notice-surface: var(--accent-surface-1);
--notice-surface-shadow: #000 0 2px 8px;
--dashboard-tab-ink: var(--ink-1);
--dashboard-tab-active-ink: var(--accent-surface-1);
--dashboard-tab-active-surface: transparent;
--dashboard-tab-surface-hover: var(--surface-2);
--dashboard-tab-border-hover: var(--surface-3);
/* info levels: normal, fyi, warn, error -- we want same Luv */
--info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */
--info1-ink-rgb: 72 143 255; /* h:255 S:100 Luv:60 */
--info2-ink-rgb: 208 125 0; /* h: 40 S:100 Luv:60 */
--info3-ink-rgb: 255 82 94; /* h: 10 S:100 Luv:60 */
--info0-ink: rgb(var(--info0-ink-rgb));
--info1-ink: rgb(var(--info1-ink-rgb));
--info2-ink: rgb(var(--info2-ink-rgb));
--info3-ink: rgb(var(--info3-ink-rgb));
--popup-cell-surface: var(--surface-2);
--popup-cell-label-filter: opacity(40%);
--popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-own-surface-rgb));
--popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb));
--popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-own-surface-rgb));
--popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb));
--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-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-shadow: transparent;
}
/*
* Rule colors
* */
@ -452,6 +412,14 @@
--popup-cell-noop-surface-rgb: 94 94 94; /* h:0 S:0 Luv:40 */
}
:root.accented {
--button-surface: rgb(var(--primary-color-80));
}
:root.dark.accented {
--button-surface: rgb(var(--primary-color-30));
}
/*
* Source for color-blind color scheme:
* https://davidmathlogic.com/colorblind/

2
src/dashboard.html
View File

@ -34,6 +34,8 @@
<iframe id="iframe" src=""></iframe>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>

1
src/devtools.html
View File

@ -38,6 +38,7 @@
<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/codemirror/search.js"></script>
<script src="js/codemirror/search-thread.js"></script>

4
src/document-blocked.html
View File

@ -15,7 +15,7 @@
<div>
<p data-i18n="docblockedPrompt1"></p>
<div id="theURL" class="collapsed">
<p class="code"><span></span><span><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
<p class="code"><span></span><span id="toggleParse" class="hidden"><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
<ul id="parsed"></ul>
</div>
</div>
@ -55,6 +55,8 @@
</span>
</div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>

1
src/dyna-rules.html
View File

@ -51,6 +51,7 @@
<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/merge/merge.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>

4
src/js/background.js
View File

@ -83,7 +83,6 @@ const hiddenSettingsDefault = {
uiPopupConfig: 'unset',
uiFlavor: 'unset',
uiStyles: 'unset',
uiTheme: 'unset',
updateAssetBypassBrowserCache: false,
userResourcesLocation: 'unset',
};
@ -97,6 +96,9 @@ const userSettingsDefault = {
collapseBlocked: true,
colorBlindFriendly: false,
contextMenuEnabled: true,
uiAccentCustom: false,
uiAccentCustom0: '#aca0f7',
uiTheme: 'auto',
externalLists: '',
firewallPaneMinimized: true,
hyperlinkAuditingDisabled: true,

3
src/js/document-blocked.js
View File

@ -170,7 +170,8 @@ uDom.nodeFromId('why').textContent = details.fs;
return;
}
const toggler = document.querySelector('#theURL > p > span:last-of-type');
const toggler = document.querySelector('#toggleParse');
toggler.classList.remove('hidden');
toggler.addEventListener('click', ( ) => {
const cl = uDom.nodeFromId('theURL').classList;

2
src/js/logger-ui.js
View File

@ -1005,7 +1005,7 @@ const onLogBufferRead = function(response) {
processLoggerEntries(response);
// Synchronize DOM with sent logger data
document.body.classList.toggle(
document.documentElement.classList.toggle(
'colorBlind',
response.colorBlind === true
);

4
src/js/messaging.js
View File

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

48
src/js/settings.js
View File

@ -208,35 +208,50 @@ const changeUserSettings = function(name, value) {
name,
value,
});
// Maybe reflect some changes immediately
switch ( name ) {
case 'uiTheme':
uDom.setTheme(value, [ 'dark', 'light' ]);
break;
case 'uiAccentCustom':
case 'uiAccentCustom0':
uDom.setAccentColor(
uDom.nodeFromSelector('[data-setting-name="uiAccentCustom"]').checked,
uDom.nodeFromSelector('[data-setting-name="uiAccentCustom0"]').value
);
break;
default:
break;
}
};
/******************************************************************************/
const onInputChanged = function(ev) {
const onValueChanged = function(ev) {
const input = ev.target;
const name = this.getAttribute('data-setting-name');
let value = input.value;
if ( name === 'largeMediaSize' ) {
// Maybe sanitize value
switch ( name ) {
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;
}
if ( value !== input.value ) {
input.value = value;
}
changeUserSettings(name, value);
};
/******************************************************************************/
// Workaround for:
// https://github.com/gorhill/uBlock/issues/1448
const onPreventDefault = function(ev) {
ev.target.focus();
ev.preventDefault();
};
/******************************************************************************/
// TODO: use data-* to declare simple settings
const onUserSettingsReceived = function(details) {
@ -261,14 +276,9 @@ const onUserSettingsReceived = function(details) {
.css('display', '');
}
uDom('[data-i18n="settingsNoLargeMediaPrompt"] > input[type="number"]')
.attr('data-setting-name', 'largeMediaSize')
.attr('data-setting-type', 'input');
uDom('[data-setting-type="input"]').forEach(function(uNode) {
uDom('[data-setting-type="value"]').forEach(function(uNode) {
uNode.val(details[uNode.attr('data-setting-name')])
.on('change', onInputChanged)
.on('click', onPreventDefault);
.on('change', onValueChanged);
});
uDom('#export').on('click', ( ) => { exportToFile(); });

162
src/js/udom.js
View File

@ -36,26 +36,19 @@ const uDom = (( ) => {
/******************************************************************************/
const DOMList = function() {
this.nodes = [];
const DOMList = class {
constructor() {
this.nodes = [];
}
get length() {
return this.nodes.length;
}
};
/******************************************************************************/
Object.defineProperty(
DOMList.prototype,
'length',
{
get: function() {
return this.nodes.length;
}
}
);
/******************************************************************************/
const DOMListFactory = function(selector, context) {
var r = new DOMList();
const r = new DOMList();
if ( typeof selector === 'string' ) {
selector = selector.trim();
if ( selector !== '' ) {
@ -74,6 +67,109 @@ const DOMListFactory = function(selector, context) {
return r;
};
DOMListFactory.root = document.querySelector(':root');
/******************************************************************************/
DOMListFactory.setTheme = function(theme, remove) {
if ( theme === 'auto' && typeof self.watchMedia === 'function' ) {
const mql = self.watchMedia('(prefers-color-scheme: dark)');
theme = mql instanceof Object && mql.matches === true
? 'dark'
: '';
}
let w = self;
for (;;) {
const rootcl = w.document.documentElement.classList;
rootcl.remove(...remove);
switch ( theme ) {
case 'dark':
rootcl.add('dark');
break;
case 'light':
rootcl.add('light');
break;
default:
break;
}
if ( w === w.parent ) { break; }
w = w.parent;
try { void w.document; } catch(ex) { return; }
}
};
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 ) {
const shades = [ 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95 ];
const text = [];
const hsl = self.hsluv.hexToHsluv(accentColor);
text.push(':root {');
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(' ')};`);
}
text.push('}', '');
styleText = text.join('\n');
}
for (;;) {
let style = w.document.querySelector('style#accentColors');
if ( style !== null ) { style.remove(); }
if ( styleText.length !== 0 ) {
style = w.document.createElement('style');
style.id = 'accentColors';
style.textContent = styleText;
w.document.head.append(style);
w.document.documentElement.classList.add('accented');
} else {
w.document.documentElement.classList.remove('accented');
}
if ( w === w.parent ) { break; }
w = w.parent;
try { void w.document; } catch(ex) { return; }
}
};
{
// https://github.com/uBlockOrigin/uBlock-issues/issues/1044
// Offer the possibility to bypass uBO's default styling
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
if ( typeof response !== 'object' || response === null ) { return; }
uDom.setTheme(response.uiTheme, [ 'dark', 'light' ]);
if ( response.uiAccentCustom ) {
uDom.setAccentColor(true, response.uiAccentCustom0);
}
if ( response.uiStyles !== 'unset' ) {
document.body.style.cssText = response.uiStyles;
}
});
const rootcl = DOMListFactory.root.classList;
if ( vAPI.webextFlavor.soup.has('mobile') ) {
rootcl.add('mobile');
} else {
rootcl.add('desktop');
}
if ( window.matchMedia('(min-resolution: 150dpi)').matches ) {
rootcl.add('hidpi');
}
}
/******************************************************************************/
DOMListFactory.onLoad = function(callback) {
@ -92,42 +188,6 @@ DOMListFactory.nodeFromSelector = function(selector) {
/******************************************************************************/
{
// https://github.com/uBlockOrigin/uBlock-issues/issues/1044
// Offer the possibility to bypass uBO's default styling
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
if ( typeof response !== 'object' || response === null ) { return; }
if ( response.uiTheme !== 'unset' ) {
if ( /\blight\b/.test(response.uiTheme) ) {
root.classList.remove('dark');
}
if ( /\bdark\b/.test(response.uiTheme) ) {
root.classList.remove('dark');
}
root.classList.add(...response.uiTheme.split(/\s+/));
}
if ( response.uiStyles !== 'unset' ) {
document.body.style.cssText = response.uiStyles;
}
});
const root = DOMListFactory.root = document.querySelector(':root');
if ( vAPI.webextFlavor.soup.has('mobile') ) {
root.classList.add('mobile');
} else {
root.classList.add('desktop');
}
if ( window.matchMedia('(min-resolution: 150dpi)').matches ) {
root.classList.add('hidpi');
}
// TODO: re-enable once there is a fully functional dark theme
//if ( window.matchMedia('(prefers-color-scheme: dark)').matches ) {
// root.classList.add('dark');
//}
}
/******************************************************************************/
const addNodeToList = function(list, node) {
if ( node ) {
list.nodes.push(node);

20
src/lib/hsluv/LICENSE Normal file
View File

@ -0,0 +1,20 @@
Copyright (c) 2012-2021 Alexei Boronine
Copyright (c) 2016 Florian Dormont
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

8
src/lib/hsluv/hsluv-0.1.0.min.js vendored Normal file
View File

@ -0,0 +1,8 @@
(function() {function f(a){var c=[],b=Math.pow(a+16,3)/1560896;b=b>g?b:a/k;for(var d=0;3>d;){var e=d++,h=l[e][0],w=l[e][1];e=l[e][2];for(var x=0;2>x;){var y=x++,z=(632260*e-126452*w)*b+126452*y;c.push({b:(284517*h-94839*e)*b/z,a:((838422*e+769860*w+731718*h)*a*b-769860*y*a)/z})}}return c}function m(a){a=f(a);for(var c=Infinity,b=0;b<a.length;){var d=a[b];++b;c=Math.min(c,Math.abs(d.a)/Math.sqrt(Math.pow(d.b,2)+1))}return c}
function n(a,c){c=c/360*Math.PI*2;a=f(a);for(var b=Infinity,d=0;d<a.length;){var e=a[d];++d;e=e.a/(Math.sin(c)-e.b*Math.cos(c));0<=e&&(b=Math.min(b,e))}return b}function p(a,c){for(var b=0,d=0,e=a.length;d<e;){var h=d++;b+=a[h]*c[h]}return b}function q(a){return.0031308>=a?12.92*a:1.055*Math.pow(a,.4166666666666667)-.055}function r(a){return.04045<a?Math.pow((a+.055)/1.055,2.4):a/12.92}function t(a){return[q(p(l[0],a)),q(p(l[1],a)),q(p(l[2],a))]}
function u(a){a=[r(a[0]),r(a[1]),r(a[2])];return[p(v[0],a),p(v[1],a),p(v[2],a)]}function A(a){var c=a[0],b=a[1];a=c+15*b+3*a[2];0!=a?(c=4*c/a,a=9*b/a):a=c=NaN;b=b<=g?b/B*k:116*Math.pow(b/B,.3333333333333333)-16;return 0==b?[0,0,0]:[b,13*b*(c-C),13*b*(a-D)]}function E(a){var c=a[0];if(0==c)return[0,0,0];var b=a[1]/(13*c)+C;a=a[2]/(13*c)+D;c=8>=c?B*c/k:B*Math.pow((c+16)/116,3);b=0-9*c*b/((b-4)*a-b*a);return[b,c,(9*c-15*a*c-a*b)/(3*a)]}
function F(a){var c=a[0],b=a[1],d=a[2];a=Math.sqrt(b*b+d*d);1E-8>a?b=0:(b=180*Math.atan2(d,b)/Math.PI,0>b&&(b=360+b));return[c,a,b]}function G(a){var c=a[1],b=a[2]/360*2*Math.PI;return[a[0],Math.cos(b)*c,Math.sin(b)*c]}function H(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<a)return[100,0,c];if(1E-8>a)return[0,0,c];b=n(a,c)/100*b;return[a,b,c]}function I(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<c)return[a,0,100];if(1E-8>c)return[a,0,0];var d=n(c,a);return[a,b/d*100,c]}
function J(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<a)return[100,0,c];if(1E-8>a)return[0,0,c];b=m(a)/100*b;return[a,b,c]}function K(a){var c=a[0],b=a[1];a=a[2];if(99.9999999<c)return[a,0,100];if(1E-8>c)return[a,0,0];var d=m(c);return[a,b/d*100,c]}function L(a){for(var c="#",b=0;3>b;){var d=b++;d=Math.round(255*a[d]);var e=d%16;c+=M.charAt((d-e)/16|0)+M.charAt(e)}return c}
function N(a){a=a.toLowerCase();for(var c=[],b=0;3>b;){var d=b++;c.push((16*M.indexOf(a.charAt(2*d+1))+M.indexOf(a.charAt(2*d+2)))/255)}return c}function O(a){return t(E(G(a)))}function P(a){return F(A(u(a)))}function Q(a){return O(H(a))}function R(a){return I(P(a))}function S(a){return O(J(a))}function T(a){return K(P(a))}
var l=[[3.240969941904521,-1.537383177570093,-.498610760293],[-.96924363628087,1.87596750150772,.041555057407175],[.055630079696993,-.20397695888897,1.056971514242878]],v=[[.41239079926595,.35758433938387,.18048078840183],[.21263900587151,.71516867876775,.072192315360733],[.019330818715591,.11919477979462,.95053215224966]],B=1,C=.19783000664283,D=.46831999493879,k=903.2962962,g=.0088564516,M="0123456789abcdef";
window.hsluv={hsluvToRgb:Q,rgbToHsluv:R,hpluvToRgb:S,rgbToHpluv:T,hsluvToHex:function(a){return L(Q(a))},hexToHsluv:function(a){return R(N(a))},hpluvToHex:function(a){return L(S(a))},hexToHpluv:function(a){return T(N(a))},lchToHpluv:K,hpluvToLch:J,lchToHsluv:I,hsluvToLch:H,lchToLuv:G,luvToLch:F,xyzToLuv:A,luvToXyz:E,xyzToRgb:t,rgbToXyz:u,lchToRgb:O,rgbToLch:P};})();

2
src/logger-ui.html
View File

@ -205,6 +205,8 @@
</div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>

2
src/no-dashboard.html
View File

@ -15,6 +15,8 @@
Your administrator removed the ability to access the dashboard
</div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>

16
src/popup-fenix.html
View File

@ -4,10 +4,10 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/themes/default.css">
<link rel="stylesheet" href="css/common.css" type="text/css">
<link rel="stylesheet" href="css/fa-icons.css" type="text/css">
<link rel="stylesheet" href="css/popup-fenix.css" type="text/css">
<link rel="stylesheet" href="css/themes/default.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css">
<link rel="stylesheet" href="css/popup-fenix.css">
<title data-i18n="extName"></title>
</head>
@ -41,7 +41,6 @@
</div>
<div id="hostname"><span></span>&shy;<span></span></div>
</div>
<hr data-more="d">
<div id="extraTools" class="toolRibbon" data-more="d">
<span id="no-popups" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-popups<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoPopups_v2"></span></span>
<span id="no-large-media" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">film<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoLargeMedia_v2"></span></span>
@ -55,7 +54,6 @@
<span data-i18n="popupDomainsConnected_v2"></span><span></span>
<span data-i18n="popupBlockedSinceInstall_v2" data-more="b"></span><span data-more="b"></span>
</div>
<hr data-more="c">
<div id="basicTools" class="toolRibbon" data-more="c">
<span id="gotoZap" class="fa-icon tool enabled needPick" data-i18n-title="popupTipZapper">bolt<span class="caption" data-i18n="popupTipZapper"></span></span>
<span id="gotoPick" class="fa-icon tool enabled needPick" data-i18n-title="popupTipPicker">eye-dropper<span class="caption" data-i18n="popupTipPicker"></span></span>
@ -67,8 +65,8 @@
<div class="itemRibbon" data-more="f">
<span data-i18n="popupVersion"></span><span id="version"></span>
</div>
<hr>
<div id="moreOrLess">
<hr data-more="g">
<div id="moreOrLess" class="">
<span id="moreButton">
<span data-i18n="popupMoreButton_v2"></span>&emsp;<span class="fa-icon">angle-up</span>
</span>
@ -96,6 +94,8 @@
<div id="tooltip"></div>
</div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>

29
src/settings.html
View File

@ -13,13 +13,10 @@
<body>
<div class="fieldset">
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsCollapseBlockedPrompt"></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsIconBadgePrompt"></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsContextMenuPrompt"></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsTooltipsPrompt"></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsColorBlindPrompt"></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsCloudStorageEnabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsAdvancedUserPrompt"></span>&nbsp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsCollapseBlockedPrompt">_</span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsIconBadgePrompt">_</span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsContextMenuPrompt">_</span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsCloudStorageEnabledPrompt">_</span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div class="fieldset">
@ -31,15 +28,29 @@
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cnameUncloakEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsUncloakCnamePrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#uncloak-canonical-names" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div class="fieldset">
<div class="fieldset-header" data-i18n="settingsAppearance"></div>
<div class="li"><label><span data-i18n="settingsThemeLabel">_</span>&emsp;<select data-setting-name="uiTheme" data-setting-type="value"><option value="auto">Auto<option value="light">Light<option value="dark">Dark</select></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="uiAccentCustom" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsThemeAccent0Label">_</span></label>&emsp;<input type="color" data-setting-name="uiAccentCustom0" data-setting-type="value"></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsColorBlindPrompt">_</span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="settingsTooltipsPrompt">_</span></label></div>
</div>
<hr>
<div class="fieldset">
<div class="fieldset-header" data-i18n="settingPerSiteSwitchGroup"></div>
<div class="li synopsis"><legend><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">info-circle</a></legend></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoCosmeticFilteringPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0" data-setting-name="largeMediaSize" data-setting-type="value"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoRemoteFontsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoScriptingPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div class="fieldset">
<div class="fieldset-header" data-i18n="settingsAdvanced"></div>
<div class="li synopsis"><legend><span data-i18n="settingsAdvancedSynopsis"></span>&nbsp;<a class="fa-icon info very-important" href="https://github.com/gorhill/uBlock/wiki/Advanced-user-features" target="_blank">info-circle</a></legend></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsAdvancedUserPrompt"></span>&nbsp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
</div>
<hr>
<div id="localData" class="fieldset">
<div>
<div class="li" id="storageUsed"></div>
@ -57,6 +68,8 @@
<input id="restoreFilePicker" type="file" accept="text/plain">
</div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/fa-icons.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>

2
src/shortcuts.html
View File

@ -26,6 +26,8 @@
</table>
</div>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>

1
src/support.html
View File

@ -106,6 +106,7 @@
<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script>

2
src/web_accessible_resources/epicker-ui.html
View File

@ -61,11 +61,13 @@
<script src="../lib/codemirror/addon/edit/closebrackets.js"></script>
<script src="../lib/codemirror/addon/edit/matchbrackets.js"></script>
<script src="../lib/codemirror/addon/hint/show-hint.js"></script>
<script src="../lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="../js/vapi.js"></script>
<script src="../js/vapi-common.js"></script>
<script src="../js/vapi-client.js"></script>
<script src="../js/vapi-client-extra.js"></script>
<script src="../js/udom.js"></script>
<script src="../js/i18n.js"></script>
<script src="../js/epicker-ui.js" type="module"></script>

1
src/whitelist.html
View File

@ -43,6 +43,7 @@
<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
<script src="lib/codemirror/addon/search/searchcursor.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<script src="lib/hsluv/hsluv-0.1.0.min.js"></script>
<script src="js/codemirror/search.js"></script>
<script src="js/codemirror/search-thread.js"></script>