From 2237d97466bbff245018983d92e49413edce5936 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Sun, 17 May 2020 08:49:37 -0400 Subject: [PATCH] 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 --- src/3p-filters.html | 2 +- src/css/popup-fenix.css | 125 ++++++++++++++++++++++++++++------------ src/js/popup-fenix.js | 29 ++++++---- src/popup-fenix.html | 58 +++++++++---------- 4 files changed, 134 insertions(+), 80 deletions(-) diff --git a/src/3p-filters.html b/src/3p-filters.html index cf8b949ac..160ffb8bf 100644 --- a/src/3p-filters.html +++ b/src/3p-filters.html @@ -57,7 +57,7 @@  -->unlink -
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index d58a3b96a..4b2b05b71 100644 --- 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); } diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index 7cc1eb8a3..579c46b9e 100644 --- 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); diff --git a/src/popup-fenix.html b/src/popup-fenix.html index b90c5e018..4d0c495fd 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -13,34 +13,34 @@
-
-
-
- lock - eraser -
-
- - - - - - - -
-
- refresh -
-
-
­
-
+
+
+
+ lock + eraser +
+
+ + + + + + + +
+
+ refresh +
+
+
­
+
ph-popups @@ -50,7 +50,7 @@ code
-
+
@@ -67,7 +67,7 @@
-
+
 angle-up