fix #2274 (hopefully)

platform/firefox/vapi-background.js

@@ -2563,7 +2563,7 @@ vAPI.toolbarButton = {
         var win = winWatcher.getCurrentWindow();
         var curTabId = tabWatcher.tabIdFromTarget(getTabBrowser(win).selectedTab);
         vAPI.tabs.open({
-            url: 'popup.html?tabId=' + curTabId,
+            url: 'popup.html?tabId=' + curTabId + '&mobile=1',
             index: -1,
             select: true
         });

src/css/popup.css

@@ -11,6 +11,9 @@ body {
 body.fullsize {
     overflow: auto;
     }
+body.mobile {
+    overflow-y: auto;
+    }
 /**
  https://github.com/gorhill/uBlock/issues/83
  .portrait = portrait mode = width is constrained = optimize layout accordingly.

src/js/popup.js

@@ -40,26 +40,15 @@ if ( typeof popupFontSize === 'string' && popupFontSize !== 'unset' ) {
 
 var dfPaneVisibleStored = vAPI.localStorage.getItem('popupFirewallPane') === 'true';
 
-// Hacky? I couldn't figure a CSS recipe for this problem.
+// No restriction on vertical size?
-// I do not want the left pane -- optional and hidden by defaut -- to
+if ( /[\?&]fullsize=1/.test(window.location.search) ) {
-// dictate the height of the popup. The right pane dictates the height
+    document.body.classList.add('fullsize');
-// of the popup, and the left pane will have a scrollbar if ever its
+}
-// height is more than what is available.
-(function() {
-    // No restriction on vertical size?
-    if ( /[\?&]fullsize=1/.test(window.location.search) ) {
-        document.body.classList.add('fullsize');
-        return;
-    }
 
-    var rpane = document.querySelector('#panes > div:nth-of-type(1)');
+// Mobile device?
-    if ( typeof rpane.offsetHeight === 'number' ) {
+if ( /[\?&]mobile=1/.test(window.location.search) ) {
-        document.querySelector('#panes > div:nth-of-type(2)').style.setProperty(
+    document.body.classList.add('mobile');
-            'height',
+}
-            rpane.offsetHeight + 'px'
-        );
-    }
-})();
 
 // The padlock/eraser must be manually positioned:
 // - Its vertical position depends on the height of the popup title bar
@@ -390,23 +379,10 @@ var renderPrivacyExposure = function() {
 // Assume everything has to be done incrementally.
 
 var renderPopup = function() {
-    if ( popupData.fontSize !== popupFontSize ) {
-        popupFontSize = popupData.fontSize;
-        if ( popupFontSize !== 'unset' ) {
-            document.body.style.setProperty('font-size', popupFontSize);
-            vAPI.localStorage.setItem('popupFontSize', popupFontSize);
-        } else {
-            document.body.style.removeProperty('font-size');
-            vAPI.localStorage.removeItem('popupFontSize');
-        }
-    }
-
     if ( popupData.tabTitle ) {
         document.title = popupData.appName + ' - ' + popupData.tabTitle;
     }
 
-    uDom.nodeFromId('appname').textContent = popupData.appName;
-    uDom.nodeFromId('version').textContent = popupData.appVersion;
     uDom('body')
         .toggleClass('advancedUser', popupData.advancedUserEnabled)
         .toggleClass(
@@ -419,9 +395,9 @@ var renderPopup = function() {
     // If you think the `=== true` is pointless, you are mistaken
     uDom.nodeFromId('gotoPick').classList.toggle('enabled', popupData.canElementPicker === true);
 
-    var text;
+    var text,
-    var blocked = popupData.pageBlockedRequestCount;
+        blocked = popupData.pageBlockedRequestCount,
-    var total = popupData.pageAllowedRequestCount + blocked;
+        total = popupData.pageAllowedRequestCount + blocked;
     if ( total === 0 ) {
         text = formatNumber(0);
     } else {
@@ -499,6 +475,48 @@ var renderPopup = function() {
 
 /******************************************************************************/
 
+// All rendering code which need to be executed only once.
+
+var renderOnce = function() {
+    if ( popupData.fontSize !== popupFontSize ) {
+        popupFontSize = popupData.fontSize;
+        if ( popupFontSize !== 'unset' ) {
+            document.body.style.setProperty('font-size', popupFontSize);
+            vAPI.localStorage.setItem('popupFontSize', popupFontSize);
+        } else {
+            document.body.style.removeProperty('font-size');
+            vAPI.localStorage.removeItem('popupFontSize');
+        }
+    }
+
+    uDom.nodeFromId('appname').textContent = popupData.appName;
+    uDom.nodeFromId('version').textContent = popupData.appVersion;
+
+    var rpane = uDom.nodeFromSelector('#panes > div:first-of-type'),
+        lpane = uDom.nodeFromSelector('#panes > div:last-of-type');
+
+    // I do not want the left pane -- optional and hidden by defaut -- to
+    // dictate the height of the popup. The right pane dictates the height
+    // of the popup, and the left pane will have a scrollbar if ever its
+    // height is more than what is available.
+    var lpaneHeight = rpane.offsetHeight;
+
+    // https://github.com/gorhill/uBlock/issues/2274
+    //   Make use of the whole viewport on mobile devices.
+    if ( document.body.classList.contains('mobile') ) {
+        lpaneHeight = Math.max(
+            window.innerHeight - uDom.nodeFromSelector('#gotoPrefs').offsetHeight,
+            lpaneHeight
+        );
+        lpane.style.setProperty('width', (window.innerWidth - rpane.offsetWidth) + 'px');
+    }
+    lpane.style.setProperty('height', lpaneHeight + 'px');
+
+    renderOnce = function(){};
+};
+
+/******************************************************************************/
+
 var renderPopupLazy = function() {
     messaging.send('popupPanel', { what: 'getPopupLazyData', tabId: popupData.tabId });
 };
@@ -864,6 +882,7 @@ var pollForContentChange = (function() {
 var getPopupData = function(tabId) {
     var onDataReceived = function(response) {
         cachePopupData(response);
+        renderOnce();
         renderPopup();
         renderPopupLazy(); // low priority rendering
         hashFromPopupData(true);