Third pass to re-design the dashboard

Related commits:
- 453f5450b6
- a45a21f337

This commit fixes parts of the re-design not
rendering as intended as per <https://github.com/brampitoyo>'s
feedback screenshots.

The dashboard tab buttons have been converted to
`span` tags (from `a` tags), thus eliminating
the unwanted side effect of the text being
rendered as unvisited links (blueish).

The font size intended for touch screens was not
taking effect due to bad cut & paste.

Other minor adjustments to improve consistency
in spacing.

src/css/3p-filters.css

@@ -4,10 +4,14 @@
     }
 body {
     border: 0;
-    font: 14px/21px sans-serif;
+    font: 14px/1.5 sans-serif;
     margin: 0;
     padding: 0;
     }
+input[type="checkbox"] {
+    margin-inline-end: 0.5em;
+    -webkit-margin-end: 0.5em;
+    }
 .root {
     background-color: white;
     overflow: auto;
@@ -18,14 +22,17 @@ body {
     display: flex;
     margin: 0.5em 0;
     }
+.entry > * {
+    margin-left: 0;
+    margin-right: 0;
+    margin-inline-end: 0.5em;
+    -webkit-margin-end: 0.5em;
+    }
 #actions {
     position: sticky;
     top: 0;
     z-index: 10;
     }
-#options li {
-    margin-bottom: 0.5em;
-    }
 #listsOfBlockedHostsPrompt {
     cursor: pointer;
     }
@@ -33,11 +40,6 @@ body {
     margin: 0.5em 0 0 0;
     padding: 0;
     }
-#lists > li {
-    margin: 0.5em 0 0 0;
-    padding: 0;
-    list-style-type: none;
-    }
 #listsOfBlockedHostsPrompt::before,
 .groupEntry:not([data-groupkey="user"]) .geDetails::before {
     color: #888;
@@ -64,10 +66,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
     font-size: 90%;
     pointer-events: none;
     }
-.groupEntry > ul {
-    margin: 0.25em 0 0 0;
-    padding-left: 1em;
-    }
 .listEntries {
     margin-inline-start: 0.7em;
     -webkit-margin-start: 0.7em;
@@ -80,11 +78,15 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
     display: none;
     }
 .listEntry > * {
-    margin-right: 0.5em;
+    margin-left: 0;
+    margin-right: 0;
+    margin-inline-end: 0.5em;
+    -webkit-margin-end: 0.5em;
     unicode-bidi: embed;
     }
-.listEntry input[type="checkbox"] {
+.listEntry > label {
-    margin-right: 0.5em;
+    align-items: center;
+    display: inline-flex;
     }
 .listEntry.toRemove input[type="checkbox"] {
     visibility: hidden;
@@ -179,6 +181,7 @@ body.updating .listEntry.checked.obsolete .updating {
     display: block;
     font-size: smaller;
     height: 6em;
+    margin: 0;
     resize: vertical;
     visibility: hidden;
     white-space: pre;
@@ -189,7 +192,7 @@ body.updating .listEntry.checked.obsolete .updating {
     }
 
 @media (pointer: coarse) {
-    #dashboard-nav {
+    body {
-        font: 16px/24px sans-serif;
+        font: 16px/1.5 sans-serif;
     }
 }

src/css/dashboard.css

@@ -1,6 +1,6 @@
 html, body {
     border: 0;
-    font: 14px/21px sans-serif;
+    font: 14px/1.5 sans-serif;
     height: 100%;
     margin: 0;
     overflow: hidden;
@@ -21,13 +21,13 @@ html, body {
     width: 100%;
     z-index: 10;
     }
-#dashboard-nav > span {
+#dashboard-nav > span.logo {
     align-items: center;
     display: inline-flex;
     padding: 0 0.5em;
     width: 1.25em;
     }
-#dashboard-nav > span > img {
+#dashboard-nav > span.logo > img {
     width: 100%;
     }
 .tabButton {
@@ -41,10 +41,6 @@ html, body {
 .tabButton:focus {
     outline: 0;
     }
-.tabButton:active,
-.tabButton:visited {
-    color: #20123a;
-    }
 .tabButton.selected {
     border-bottom: 3px solid #592acb;
     color: #592acb;
@@ -77,14 +73,14 @@ iframe {
     width: 100vw;
     }
 
-body:not(.canUpdateShortcuts) .tabButton[href="#shortcuts.html"] {
+body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
     display: none;
     }
 
 @media (pointer: coarse) {
     #dashboard-nav {
         flex-wrap: nowrap;
-        font: 16px/24px sans-serif;
+        font: 16px/1.5 sans-serif;
         overflow-x: auto;
     }
 }

src/css/settings.css

@@ -1,6 +1,6 @@
 body {
     border: 0;
-    font: 14px/21px sans-serif;
+    font: 14px/1.5 sans-serif;
     margin: 0;
     padding: 0;
     }
@@ -42,7 +42,7 @@ body.advancedUser #advanced-user-enabled ~ a.fa {
     }
 
 @media (pointer: coarse) {
-    #dashboard-nav {
+    body {
-        font: 16px/24px sans-serif;
+        font: 16px/1.5 sans-serif;
     }
 }

src/dashboard.html

@@ -11,14 +11,14 @@
 
 <body>
 <div id="dashboard-nav">
-    <span class="hverbose" ><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
+    <span class="logo" ><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
- --><a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a><!--
+ --><span class="tabButton" data-pane="settings.html" data-i18n="settingsPageName"></span><!--
- --><a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a><!--
+ --><span class="tabButton" data-pane="3p-filters.html" data-i18n="3pPageName"></span><!--
- --><a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a><!--
+ --><span class="tabButton" data-pane="1p-filters.html" data-i18n="1pPageName"></span><!--
- --><a class="tabButton" href="#dyna-rules.html" data-i18n="rulesPageName"></a><!--
+ --><span class="tabButton" data-pane="dyna-rules.html" data-i18n="rulesPageName"></span><!--
- --><a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a><!--
+ --><span class="tabButton" data-pane="whitelist.html" data-i18n="whitelistPageName"></span><!--
- --><a class="tabButton" href="#shortcuts.html" data-i18n="shortcutsPageName"></a><!--
+ --><span class="tabButton" data-pane="shortcuts.html" data-i18n="shortcutsPageName"></span><!--
- --><a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
+ --><span class="tabButton" data-pane="about.html" data-i18n="aboutPageName"></span>
 </div>
 <div id="unsavedWarning">
     <div>

src/js/dashboard.js

@@ -84,7 +84,7 @@ const discardUnsavedData = function(synchronous = false) {
 };
 
 const loadDashboardPanel = function(pane, first) {
-    const tabButton = uDom.nodeFromSelector(`[href="#${pane}"]`);
+    const tabButton = uDom.nodeFromSelector(`[data-pane="${pane}"]`);
     if ( tabButton === null || tabButton.classList.contains('selected') ) {
         return;
     }
@@ -111,8 +111,7 @@ const loadDashboardPanel = function(pane, first) {
 };
 
 const onTabClickHandler = function(ev) {
-    loadDashboardPanel(ev.target.hash.slice(1));
+    loadDashboardPanel(ev.target.getAttribute('data-pane'));
-    ev.preventDefault();
 };
 
 // https://github.com/uBlockOrigin/uBlock-issues/issues/106