Even more fine tuning of UI as per feedback

Fix unstyled checkbox in "Filter lists" pane. Related feedback: https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629780098 Hopefully fix glitchy popup panel when opened from the extension icon. By default the panel is configured to be rendered in landscape. It will be toggled programmatically to portrait mode when either the environment is mobile or the viewport is horizontally constrained. Related feedback: https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629712393 New layout for rendering the statistics text strings in landscape mode, so as to avoid text wrapping and to allow a slightly narrower basic pane. Related discussion: https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629785966
2020-05-17 08:49:37 -04:00 · 2020-05-17 08:49:37 -04:00 · 2237d97466
parent 4edbc8d456
commit 2237d97466
4 changed files with 134 additions and 80 deletions
--- a/src/3p-filters.html
+++ b/src/3p-filters.html
@ -57,7 +57,7 @@
     --><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><!--
+    <div class="listEntry toImport"><label><span class="input checkbox"><input type="checkbox" id="importLists"><svg><use href="img/material-design.svg#checkmark" /></svg></span><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><!--
        --><!--
        --><textarea id="externalLists" dir="ltr" spellcheck="false" placeholder="3pExternalListsHint"></textarea>
    </div>
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@ -5,6 +5,9 @@
    }

 /* Internal CSS values */
+:root body {
+    overflow: hidden;
+    }
 :root body,
 :root.mobile body {
    --font-size: 14px;
@ -28,10 +31,13 @@ a {
 #panes {
    align-items: stretch;
    display: flex;
-    flex-direction: column;
+    flex-direction: row-reverse;
    padding: 0;
    position: relative;
-    width: 100%;
+    }
+#main {
+    max-width: 340px;
+    min-width: 18em;
    }
 hr {
    border: 0;
@ -111,17 +117,47 @@ body.needSave #revertRules {
    font-weight: 600;
    }

+#basicStats {
+    column-gap: var(--popup-gap);
+    display: grid;
+    grid-template: auto / auto;
+    margin: var(--popup-gap) var(--popup-gap) 0 var(--popup-gap);
+    }
+#basicStats > span {
+    justify-self: center;
+    white-space: nowrap;
+    }
+#basicStats > [data-i18n] {
+    font-size: 95%;
+    }
+#basicStats > [data-i18n] + span {
+    font-size: 105%;
+    margin-bottom: var(--popup-gap);
+    }
+:root.portrait #basicStats {
+    grid-template: auto / auto auto;
+    }
+:root.portrait #basicStats > span {
+    font-size: inherit;
+    justify-self: stretch;
+    margin-bottom: var(--popup-gap);
+    white-space: unset;
+    }
+:root.portrait #basicStats > [data-i18n] {
+    }
+:root.portrait #basicStats > [data-i18n] + span {
+    text-align: end;
+    }
+
 .itemRibbon {
    column-gap: var(--popup-gap);
    display: grid;
-    grid-template: auto / auto auto;
-    margin: var(--popup-gap) var(--popup-gap) 0 var(--popup-gap);
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    grid-template: auto / 1fr 1fr;
+    margin: var(--popup-gap);
    }
-.itemRibbon > span {
-    margin-bottom: var(--popup-gap);
-    }
-.itemRibbon > [data-i18n] + span {
-    justify-self: end;
+.itemRibbon > span + span {
    text-align: end;
    }

@ -176,10 +212,13 @@ body.mobile.no-tooltips .toolRibbon .tool {
    visibility: visible;
    }

-.moreOrLess {
+#moreOrLess {
+    column-gap: var(--popup-gap);
+    display: grid;
+    grid-template: auto / 1fr 1fr;
    margin: 0;
    }
-.moreOrLess > span {
+#moreOrLess > span {
    cursor: pointer;
    margin: 0;
    padding: var(--popup-gap);
@ -189,7 +228,7 @@ body.mobile.no-tooltips .toolRibbon .tool {
    transform: rotate(180deg);
    }
 #lessButton {
-    text-align: right;
+    text-align: end;
    }
 body[data-more="a b c d e f"] #moreButton {
    pointer-events: none;
@ -202,11 +241,14 @@ body[data-more=""] #lessButton {

 #firewall {
    border: 0;
-    flex-shrink: 0;
+    flex-shrink: 1;
    font-size: 90%;
    margin: 0;
+    max-height: 600px;
+    max-width: 460px;
+    min-width: 30em;
    padding: 0;
-    overflow: hidden;
+    overflow-y: auto;
    text-align: right;
    --rule-cell-width: 5em;
    }
@ -491,44 +533,51 @@ body:not([data-more~="e"]) [data-more="e"] {
    display: none;
    }

+/* horizontally-constrained viewport */
+:root.portrait body {
+    overflow-y: auto;
+    width: 100%;
+    }
+:root.portrait #panes {
+    flex-direction: column;
+    }
+:root.portrait #main {
+    max-width: unset;
+    min-width: unset;
+    }
+:root.portrait #firewall {
+    max-height: unset;
+    max-width: unset;
+    min-width: unset;
+    overflow-y: hidden;
+    }
+
+/* touch-driven devices */
+:root.mobile #firewall {
+    line-height: 20px;
+    }
+
 /* mouse-driven devices */
 :root.desktop {
    display: flex;
    justify-content: flex-end;
-    overflow: hidden;
    }
-:root:not(.mobile) body {
-    --popup-gap: 12px;
-    max-width: 800px;
+:root.desktop body {
+    --popup-gap: calc(var(--font-size) * 0.875);
    }
-:root.desktop #panes {
-    flex-direction: row-reverse;
-    width: unset;
-    }
-:root.desktop #main {
-    max-width: 340px;
-    width: 21em;
-    }
-:root:not(.mobile) #switch:hover {
+:root.desktop #switch:hover {
    background-color: var(--default-surface-hover);
    }
-:root:not(.mobile) .rulesetTools [id]:hover {
+:root.desktop .rulesetTools [id]:hover {
    fill: var(--default-ink);
    }
-:root:not(.mobile) #firewall {
+:root.desktop #firewall {
    direction: rtl;
-    flex-grow: 1;
    line-height: 1.4;
    }
-:root.desktop #firewall {
-    max-height: 600px;
-    max-width: 460px;
-    overflow-y: auto;
-    width: 32em;
-    }
-:root:not(.mobile) .tool:hover {
+:root.desktop .tool:hover {
    background-color: var(--default-surface-hover);
    }
-:root:not(.mobile) .moreOrLess > span:hover {
+:root.desktop #moreOrLess > span:hover {
    background-color: var(--default-surface-hover);
    }
--- a/src/js/popup-fenix.js
+++ b/src/js/popup-fenix.js
@ -34,7 +34,7 @@
 let popupFontSize = 'unset';
 vAPI.localStorage.getItemAsync('popupFontSize').then(value => {
    if ( typeof value !== 'string' || value === 'unset' ) { return; }
-    document.body.style.setProperty('font-size', value);
+    document.body.style.setProperty('--font-size', value);
    popupFontSize = value;
 });

@ -184,7 +184,8 @@ const formatNumber = function(count) {
    } else {
      count = Math.floor(count * 1000) / 1000;
    }
-    return (count).toLocaleString(undefined) + '\u2009M';};
+    return (count).toLocaleString(undefined) + '\u2009M';
+};

 let intlNumberFormat;

@ -613,10 +614,10 @@ let renderOnce = function() {
    if ( popupData.fontSize !== popupFontSize ) {
        popupFontSize = popupData.fontSize;
        if ( popupFontSize !== 'unset' ) {
-            body.style.setProperty('font-size', popupFontSize);
+            body.style.setProperty('--font-size', popupFontSize);
            vAPI.localStorage.setItem('popupFontSize', popupFontSize);
        } else {
-            body.style.removeProperty('font-size');
+            body.style.removeProperty('--font-size');
            vAPI.localStorage.removeItem('popupFontSize');
        }
    }
@ -1200,18 +1201,22 @@ const getPopupData = async function(tabId) {
    const checkViewport = async function() {
        const root = document.querySelector(':root');
        if ( root.classList.contains('desktop') ) {
-            const main = document.getElementById('main');
-            const sticky = document.getElementById('sticky');
-            const stickyParent = sticky.parentElement;
-            if ( stickyParent !== main ) {
-                main.prepend(sticky);
-            }
            await nextFrames(4);
+            const main = document.getElementById('main');
            const firewall = document.getElementById('firewall');
            const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
            if ( window.innerWidth < minWidth ) {
-                stickyParent.prepend(sticky);
-                root.classList.remove('desktop');
+                root.classList.add('portrait');
+            }
+        } else if ( root.classList.contains('mobile') ) {
+            root.classList.add('portrait');
+        }
+        if ( root.classList.contains('portrait') ) {
+            const panes = document.getElementById('panes');
+            const sticky = document.getElementById('sticky');
+            const stickyParent = sticky.parentElement;
+            if ( stickyParent !== panes ) {
+                panes.prepend(sticky);
            }
        }
        await nextFrames(1);
--- a/src/popup-fenix.html
+++ b/src/popup-fenix.html
@ -13,34 +13,34 @@

 <body class="loading" data-more="a b c d">
 <div id="panes">
-    <div id="sticky">
-        <div id="stickyTools">
-            <div class="rulesetTools">
-                <span id="saveRules" class="fa-icon" data-i18n-title="popupTipSaveRules">lock</span>
-                <span id="revertRules" class="fa-icon" data-i18n-title="popupTipRevertRules">eraser</span>
-            </div>
-            <div id="switch" role="button" aria-label tabindex="0" title>
-                <span class="fa-icon"><!--
-                    Power button taken from Font Awesome v4.7.0 by Dave Gandy.
-                    Unlike other FA icons, the power button is inlined here so
-                    that we can use a clip-path in order to ensure that the stroke
-                    does not "bleed" outside the fill area.
-                    --><svg viewBox="0 0 1536 1664">
-                        <defs>
-                        <path id="power-off-path" d="m 1536,896 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 328,1542 225,1439 122,1336 61,1194 0,1052 0,896 0,714 80.5,553 161,392 307,283 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 503,455 461,487 363,561 309.5,668 256,775 256,896 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1061,1327 1130,1258 1199,1189 1239.5,1094.5 1280,1000 1280,896 1280,775 1226.5,668 1173,561 1075,487 1033,455 1025.5,402.5 1018,350 1050,308 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z m -640,-768 0,640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 l 0,-640 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z"/>
-                        <clipPath id="power-off-clip"><use href="#power-off-path"/></clipPath>
-                        </defs>
-                        <use href="#power-off-path" clip-path="url(#power-off-clip)"/>
-                    </svg><!--
-             --></span>
-            </div>
-            <div class="rulesetTools">
-                <span id="refresh" class="fa-icon">refresh</span>
-            </div>
-        </div>
-        <div id="hostname"><span></span>&shy;<span></span></div>
-    </div>
    <div id="main">
+        <div id="sticky">
+            <div id="stickyTools">
+                <div class="rulesetTools">
+                    <span id="saveRules" class="fa-icon" data-i18n-title="popupTipSaveRules">lock</span>
+                    <span id="revertRules" class="fa-icon" data-i18n-title="popupTipRevertRules">eraser</span>
+                </div>
+                <div id="switch" role="button" aria-label tabindex="0" title>
+                    <span class="fa-icon"><!--
+                        Power button taken from Font Awesome v4.7.0 by Dave Gandy.
+                        Unlike other FA icons, the power button is inlined here so
+                        that we can use a clip-path in order to ensure that the stroke
+                        does not "bleed" outside the fill area.
+                        --><svg viewBox="0 0 1536 1664">
+                            <defs>
+                            <path id="power-off-path" d="m 1536,896 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 328,1542 225,1439 122,1336 61,1194 0,1052 0,896 0,714 80.5,553 161,392 307,283 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 503,455 461,487 363,561 309.5,668 256,775 256,896 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1061,1327 1130,1258 1199,1189 1239.5,1094.5 1280,1000 1280,896 1280,775 1226.5,668 1173,561 1075,487 1033,455 1025.5,402.5 1018,350 1050,308 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z m -640,-768 0,640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 l 0,-640 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z"/>
+                            <clipPath id="power-off-clip"><use href="#power-off-path"/></clipPath>
+                            </defs>
+                            <use href="#power-off-path" clip-path="url(#power-off-clip)"/>
+                        </svg><!--
+                 --></span>
+                </div>
+                <div class="rulesetTools">
+                    <span id="refresh" class="fa-icon">refresh</span>
+                </div>
+            </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>
@ -50,7 +50,7 @@
            <span id="no-scripting" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">code<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoScripting_v2"></span></span>
        </div>
        <hr data-more="a">
-        <div id="basicStats" class="itemRibbon" data-more="a">
+        <div id="basicStats" data-more="a">
            <span data-i18n="popupBlockedOnThisPage_v2"></span><span></span>
            <span data-i18n="popupDomainsConnected_v2"></span><span></span>
            <span data-i18n="popupBlockedSinceInstall_v2" data-more="b"></span><span data-more="b"></span>
@ -67,7 +67,7 @@
            <span data-i18n="popupVersion"></span><span id="version"></span>
        </div>
        <hr>
-        <div class="itemRibbon moreOrLess">
+        <div id="moreOrLess">
            <span id="moreButton">
                <span data-i18n="popupMoreButton_v2"></span>&emsp;<span class="fa-icon">angle-up</span>
            </span>