Improve heuristic to toggle panel to vertical layout

By using a larger tolerance.

Also, ensure that the hover visuals are still
being used in vertical layout mode on non-mobile
devices.

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);
     }

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');
     };