diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index 51178df7d..b0c22ea9b 100644 --- a/src/css/popup-fenix.css +++ b/src/css/popup-fenix.css @@ -414,15 +414,15 @@ body.advancedUser #firewall > div > span.ownRule, color: var(--default-surface); } body.advancedUser #firewall > div > span.allowRule.ownRule, -:root.desktop #actionSelector > #dynaAllow:hover { +:root:not(.mobile) #actionSelector > #dynaAllow:hover { background-color: var(--bg-popup-cell-allow-own); } body.advancedUser #firewall > div > span.blockRule.ownRule, -:root.desktop #actionSelector > #dynaBlock:hover { +:root:not(.mobile) #actionSelector > #dynaBlock:hover { background-color: var(--bg-popup-cell-block-own); } body.advancedUser #firewall > div > span.noopRule.ownRule, -:root.desktop #actionSelector > #dynaNoop:hover { +:root:not(.mobile) #actionSelector > #dynaNoop:hover { background-color: var(--bg-popup-cell-noop-own); } @@ -459,16 +459,16 @@ body.advancedUser #firewall > div > span.noopRule.ownRule, } /* configurable UI elements */ -:root.desktop .toolRibbon .caption, +:root:not(.mobile) .toolRibbon .caption, :root.mobile body.no-tooltips .toolRibbon .caption, :root.mobile body[data-ui~="-captions"] .toolRibbon .caption { display: none; } :root.mobile .toolRibbon .caption, -:root.desktop body[data-ui~="+captions"] .toolRibbon .caption { +:root:not(.mobile) body[data-ui~="+captions"] .toolRibbon .caption { display: inherit; } -:root.desktop .toolRibbon .tool, +:root:not(.mobile) .toolRibbon .tool, :root.mobile body.no-tooltips .toolRibbon .tool, :root.mobile body[data-ui~="-captions"] .toolRibbon .tool { padding: calc(var(--popup-gap) + var(--popup-gap-thin)) @@ -478,7 +478,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule, :root body[data-ui~="-no-popups"] #no-popups { display: none; } -:root.desktop #no-popups, +:root:not(.mobile) #no-popups, :root body[data-ui~="+no-popups"] #no-popups { display: flex; } @@ -501,7 +501,7 @@ body:not([data-more~="e"]) [data-more="e"] { :root.desktop { overflow: hidden; } -:root.desktop body { +:root:not(.mobile) body { --popup-gap: 12px; max-width: max(100vw, 800px); } @@ -513,24 +513,26 @@ body:not([data-more~="e"]) [data-more="e"] { max-width: 300px; width: max-content; } -:root.desktop #switch:hover { +:root:not(.mobile) #switch:hover { background-color: var(--default-surface-hover); } -:root.desktop .rulesetTools [id]:hover { +:root:not(.mobile) .rulesetTools [id]:hover { fill: var(--default-ink); } -:root.desktop #firewall { +:root:not(.mobile) #firewall { direction: rtl; flex-grow: 1; line-height: 1.4; + } +:root.desktop #firewall { max-height: max(100vh, 600px); min-width: 360px; overflow-y: auto; width: min-content; } -:root.desktop .tool:hover { +:root:not(.mobile) .tool:hover { background-color: var(--default-surface-hover); } -:root.desktop .moreOrLess > span:hover { +:root:not(.mobile) .moreOrLess > span:hover { background-color: var(--default-surface-hover); } diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index e6507a46c..1db25c437 100644 --- a/src/js/popup-fenix.js +++ b/src/js/popup-fenix.js @@ -501,7 +501,7 @@ const renderPopup = function() { setGlobalExpand(popupData.firewallPaneMinimized === false, true); // Build dynamic filtering pane only if in use - if ( (computedSections() & 0b10000) !== 0 ) { + if ( (computedSections() & sectionFirewallBit) !== 0 ) { buildAllFirewallRows(); } @@ -736,6 +736,7 @@ const gotoURL = function(ev) { // be toggle on/off. const maxNumberOfSections = 6; +const sectionFirewallBit = 0b10000; const computedSections = ( ) => popupData.popupPanelSections & @@ -795,7 +796,7 @@ const toggleSections = function(more) { vAPI.localStorage.setItem('popupPanelSections', newBits); // Dynamic filtering pane may not have been built yet - if ( (newBits & 0b10000) !== 0 && dfPaneBuilt === false ) { + if ( (newBits & sectionFirewallBit) !== 0 && dfPaneBuilt === false ) { buildAllFirewallRows(); } }; @@ -1162,14 +1163,21 @@ const getPopupData = async function(tabId) { // To avoid querying a spurious viewport width -- it happens sometimes, // somehow -- we delay layout-changing operations to the next paint // frames. + // Force a layout recalculation by querying the body width. To be + // honest, I have no clue if this makes a difference in the end. + // https://gist.github.com/paulirish/5d52fb081b3570c81e3a + // Use a tolerance proportional to the sum of the width of the panes + // when testing against viewport width. const checkViewport = async function() { + void document.body.offsetWidth; + await nextFrame(); - + const root = document.querySelector(':root'); if ( root.classList.contains('desktop') ) { const main = document.getElementById('main'); const firewall = document.getElementById('firewall'); - const minWidth = Math.floor(main.offsetWidth + firewall.offsetWidth) - 4; + const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1; if ( document.body.offsetWidth < minWidth ) { root.classList.remove('desktop'); } else { @@ -1179,9 +1187,9 @@ const getPopupData = async function(tabId) { } } } - + await nextFrame(); - + document.body.classList.remove('loading'); };