Bring dark theme out of experimental status

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.

src/1p-filters.html

@@ -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>

src/3p-filters.html

@@ -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>

src/about.html

@@ -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>

src/advanced-settings.html

@@ -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>

src/asset-viewer.html

@@ -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>

src/css/codemirror.css

@@ -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);
+    }

src/css/common.css

@@ -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);

src/css/dashboard-common.css

@@ -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;
     }

src/css/document-blocked.css

@@ -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);

src/css/logger-ui.css

@@ -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 {