More fine tuning of UI

src/3p-filters.html

@@ -54,8 +54,8 @@
      --><span class="fa-icon status obsolete" data-i18n-title="3pExternalListObsolete">exclamation-triangle</span><!--
      --><span class="fa-icon status cache">clock-o</span><!--
      --><span class="fa-icon status updating" data-i18n-title="3pUpdating">spinner</span><!--
-     --><span class="fa-icon status failed" data-i18n-title="3pNetworkError">unlink</span></span><!--
-     --><span class="counts"></span></span></label>
+     --><span class="fa-icon status failed" data-i18n-title="3pNetworkError">unlink</span><!--
+     --><span class="counts"></span></span></span></label>
     </div>
     <div class="listEntry toImport"><label><input type="checkbox" id="importLists"><span><span class="forinput" data-i18n="3pImport"></span> <a class="fa-icon info towiki" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">info-circle</a></span></label><!--
         --><!--

src/css/3p-filters.css

@@ -124,7 +124,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
     font-size: smaller;
 }
 .listEntry.checked .counts {
-    display: inline;
+    display: inline-block;
 }
 .listEntry .status {
     cursor: default;
@@ -200,7 +200,11 @@ body.updating .listEntry.checked.obsolete .updating {
     padding-inline-start: 0.3em;
     }
 :root.mobile .li.listEntry .listname,
-:root.mobile .li.listEntry .iconbar,
-:root.mobile .li.listEntry.checked .counts {
-    display: block;
+:root.mobile .li.listEntry .iconbar {
+    align-items: flex-start;
+    display: flex;
+    white-space: nowrap;
+    }
+:root.mobile .li.listEntry .iconbar {
+    margin-top: 0.2em;
     }

src/css/common.css

@@ -13,6 +13,12 @@
     font-weight: 600;
     src: url('fonts/Inter/Inter-SemiBold.woff2') format('woff2');
 }
+@font-face {
+    font-family: Metropolis;
+    font-style: normal;
+    font-weight: normal;
+    src: url('fonts/Metropolis/Metropolis-Regular.woff2') format('woff2');
+}
 @font-face {
     font-family: Metropolis;
     font-style: normal;
@@ -33,8 +39,8 @@ body {
     background-color: var(--default-surface);
     border: 0;
     box-sizing: border-box;
-    color: var(--fg-0);
-    fill: var(--fg-0);
+    color: var(--default-ink);
+    fill: var(--default-ink);
     font-family: Inter, sans-serif;
     font-size: 14px;
     line-height: 1.5;

src/css/popup-fenix.css

@@ -467,8 +467,8 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
 :root.desktop body {
     overflow: auto;
     }
-:root.desktop body.loading * {
-    visibility: hidden !important;
+:root.desktop body.loading {
+    opacity: 0;
     }
 :root.desktop #panes {
     flex-direction: row-reverse;
@@ -495,6 +495,5 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
     background-color: var(--bg-button);
     }
 :root.desktop .tool [data-i18n] {
-    /* display: none; */
     width: min-content;
     }

src/css/themes/default.css

@@ -6,24 +6,34 @@
 
 */
 
-/* color names */
+/**
+    Color names from:
+    https://protocol.mozilla.org/fundamentals/color.html
+*/
 :root {
     --blue-50: #0060df;
     --ink-20: #312a64;
+    --ink-50: #291d4f;
     --ink-80: #20123a;
     --ink-80-a4: #20123a0a;
+    --ink-90: #1d1133;
     --light-gray-10: #f9f9fb;
     --light-gray-30: #e0e0e6;
     --light-gray-40: #cfcfd8;
     --violet-70: #592acb;
+    --violet-80: #45278d;
     --black: #000;
     --white: #fff;
 }
 
-/* components */
+/**
+    Components
+*/
 :root {
     --bg-0: var(--white);
     --fg-0: var(--ink-80);
+    --default-ink: var(--ink-80);
+    --default-ink-a4: var(--ink-80-a4);
     --default-surface: var(--light-gray-10);
 
     --bg-1: hsla(240, 20%, 98%, 1);
@@ -68,7 +78,7 @@
         0px 1px 6px 0px rgba(14, 13, 26, 0.12);
     --dashboard-tab-ink: var(--ink-80);
     --dashboard-tab-active-ink: var(--violet-70);
-    --dashboard-tab-surface-hover: var(--ink-80-a4);
+    --dashboard-tab-surface-hover: var(--default-ink-a4);
 
     --fg-icon-info-lvl-0-dimmed: #888;
     --fg-icon-info-lvl-0: inherit;
@@ -103,6 +113,19 @@
     --fg-popup-icon-x: hsla(0, 100%, 50%, 1);
 }
 
+/**
+    Use slightly darker inks on lower pixel-density devices to improve
+    contrast.
+*/
+@media (max-resolution: 150dpi) {
+    :root {
+        --default-ink: var(--ink-90);
+        --button-ink: var(--ink-50);
+        --fieldset-header-ink: var(--ink-50);
+        --link-ink: var(--violet-80);
+    }
+}
+
 /**
  Source for color-blind color scheme from https://github.com/WyohKnott:
  https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219

src/js/popup-fenix.js

@@ -1073,7 +1073,7 @@ const getPopupData = async function(tabId) {
     let tabId = null;
 
     // Extract the tab id of the page this popup is for
-    const matches = window.location.search.match(/[\?&]tabId=([^&]+)/);
+    const matches = self.location.search.match(/[\?&]tabId=([^&]+)/);
     if ( matches && matches.length === 2 ) {
         tabId = parseInt(matches[1], 10) || 0;
     }
@@ -1096,12 +1096,14 @@ const getPopupData = async function(tabId) {
                 }
             }
         }
+        self.requestAnimationFrame(( ) => {
             document.body.classList.remove('loading');
+        });
     };
 
     getPopupData(tabId).then(( ) => {
         if ( document.readyState !== 'complete' ) {
-            window.addEventListener('load', checkViewport, { once: true });
+            self.addEventListener('load', checkViewport, { once: true });
         } else {
             checkViewport();
         }