diff --git a/platform/firefox/vapi-background.js b/platform/firefox/vapi-background.js index 36964825e..d960c8f0d 100644 --- a/platform/firefox/vapi-background.js +++ b/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 }); diff --git a/src/css/popup.css b/src/css/popup.css index 2e8dfefc9..2d47a0a95 100644 --- a/src/css/popup.css +++ b/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. diff --git a/src/js/popup.js b/src/js/popup.js index 50eddd781..e3453ed50 100644 --- a/src/js/popup.js +++ b/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. -// 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. -(function() { - // No restriction on vertical size? - if ( /[\?&]fullsize=1/.test(window.location.search) ) { - document.body.classList.add('fullsize'); - return; - } +// No restriction on vertical size? +if ( /[\?&]fullsize=1/.test(window.location.search) ) { + document.body.classList.add('fullsize'); +} - var rpane = document.querySelector('#panes > div:nth-of-type(1)'); - if ( typeof rpane.offsetHeight === 'number' ) { - document.querySelector('#panes > div:nth-of-type(2)').style.setProperty( - 'height', - rpane.offsetHeight + 'px' - ); - } -})(); +// Mobile device? +if ( /[\?&]mobile=1/.test(window.location.search) ) { + document.body.classList.add('mobile'); +} // 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 blocked = popupData.pageBlockedRequestCount; - var total = popupData.pageAllowedRequestCount + blocked; + var text, + blocked = popupData.pageBlockedRequestCount, + 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);