Add advanced setting to force popup panel orientation

Related discussion:
uBlockOrigin/uBlock-issues#2419 (reply in thread)

Name: `popupPanelOrientation`

Supported values:
- `unset` (default): uBO decides whichever mode is best
- `landscape`: force popup panel to landscape mode
- `portrait`: force popup panel to portrait mode

Author: gorhill

src/js/background.js

@@ -80,8 +80,9 @@ const hiddenSettingsDefault = {
     modifyWebextFlavor: 'unset',
     popupFontSize: 'unset',
     popupPanelDisabledSections: 0,
-    popupPanelLockedSections: 0,
     popupPanelHeightMode: 0,
+    popupPanelLockedSections: 0,
+    popupPanelOrientation: 'unset',
     requestJournalProcessPeriod: 1000,
     requestStatsDisabled: false,
     selfieDelayInSeconds: 53,

src/js/messaging.js

@@ -378,6 +378,7 @@ const popupDataFromTabId = function(tabId, tabTitle) {
         popupPanelDisabledSections: µbhs.popupPanelDisabledSections,
         popupPanelLockedSections: µbhs.popupPanelLockedSections,
         popupPanelHeightMode: µbhs.popupPanelHeightMode,
+        popupPanelOrientation: µbhs.popupPanelOrientation,
         tabId,
         tabTitle,
         tooltipsDisabled: µbus.tooltipsDisabled,

src/js/popup-fenix.js

@@ -802,7 +802,7 @@ let renderOnce = function() {
         dom.attr('#firewall [title][data-src]', 'title', null);
     }
 
-    // This must be done the firewall is populated
+    // This must be done when the firewall is populated
     if ( popupData.popupPanelHeightMode === 1 ) {
         dom.cl.add(dom.body, 'vMin');
     }
@@ -1462,6 +1462,31 @@ const getPopupData = async function(tabId, first = false) {
         }
     };
 
+    const setOrientation = async ( ) => {
+        if ( dom.cl.has(dom.root, 'mobile') ) {
+            dom.cl.remove(dom.root, 'desktop');
+            dom.cl.add(dom.root, 'portrait');
+            return;
+        }
+        if ( selfURL.searchParams.get('portrait') !== null ) {
+            dom.cl.add(dom.root, 'portrait');
+            return;
+        }
+        if ( popupData.popupPanelOrientation === 'landscape' ) { return; }
+        if ( popupData.popupPanelOrientation === 'portrait' ) {
+            dom.cl.add(dom.root, 'portrait');
+            return;
+        }
+        if ( dom.cl.has(dom.root, 'desktop') === false ) { return; }
+        await nextFrames(8);
+        const main = qs$('#main');
+        const firewall = qs$('#firewall');
+        const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
+        if ( window.innerWidth < minWidth ) {
+            dom.cl.add(dom.root, 'portrait');
+        }
+    };
+
     // The purpose of the following code is to reset to a vertical layout
     // should the viewport not be enough wide to accommodate the horizontal
     // layout.
@@ -1474,24 +1499,7 @@ const getPopupData = async function(tabId, first = false) {
     // Use a tolerance proportional to the sum of the width of the panes
     // when testing against viewport width.
     const checkViewport = async function() {
-        if (
-            dom.cl.has(dom.root, 'mobile') ||
-            selfURL.searchParams.get('portrait')
-        ) {
-            dom.cl.add(dom.root, 'portrait');
-            dom.cl.remove(dom.root, 'desktop');
-        } else if ( dom.cl.has(dom.root, 'desktop') ) {
-            await nextFrames(8);
-            const main = qs$('#main');
-            const firewall = qs$('#firewall');
-            const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
-            if (
-                selfURL.searchParams.get('portrait') ||
-                window.innerWidth < minWidth
-            ) {
-                dom.cl.add(dom.root, 'portrait');
-            }
-        }
+        await setOrientation();
         if ( dom.cl.has(dom.root, 'portrait') ) {
             const panes = qs$('#panes');
             const sticky = qs$('#sticky');