set popup as early as possible

src/js/popup.js

@@ -23,25 +23,51 @@
 
 /******************************************************************************/
 
+// Ensure the popup is properly sized as soon as possible. It is assume the DOM
+// content is ready at this point, which should be the case given where this
+// script file is included in the HTML file.
+
+(function() {
+    'use strict';
+
+    var doc = document;
+
+    // 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 larger than what is available.
+    doc.querySelector('#panes > div:nth-of-type(2)').style.setProperty(
+        'height',
+        doc.querySelector('#panes > div:nth-of-type(1)').offsetHeight + 'px'
+    );
+
+    // The padlock must be manually positioned:
+    // - It's vertical position depends on the height on the title bar.
+    doc.getElementById('saveRules').style.setProperty(
+        'top',
+        (doc.getElementById('gotoPrefs').getBoundingClientRect().bottom + 4) + 'px'
+    );
+
+    // https://github.com/gorhill/uBlock/issues/996
+    // Experimental: mitigate glitchy popup UI: immediately set the firewall pane
+    // visibility to its last known state. By default the pane is hidden.
+    // Will remove if it makes no difference.
+    if ( vAPI.localStorage.getItem('popupFirewallPane') === 'true' ) {
+        doc.getElementById('panes').classList.add('dfEnabled');
+    }
+})();
+
+/******************************************************************************/
+
 (function() {
 
 'use strict';
 
 /******************************************************************************/
 
-// https://github.com/gorhill/uBlock/issues/996
-// Experimental: mitigate glitchy popup UI: immediately set the firewall pane
-// visibility to its last known state. By default the pane is hidden.
-// Will remove if it makes no difference.
-if ( vAPI.localStorage.getItem('popupFirewallPane') === 'true' ) {
-    uDom('#panes').addClass('dfEnabled');
-}
-
-/******************************************************************************/
-
 var popupData;
 var dfPaneBuilt = false;
-var popupHeight;
 var reIP = /^\d+(?:\.\d+){1,3}$/;
 var reSrcHostnameFromRule = /^d[abn]:([^ ]+) ([^ ]+) ([^ ]+)/;
 var scopeToSrcHostnameMap = {
@@ -169,20 +195,6 @@ var addFirewallRow = function(des) {
     row.toggleClass('blocked', hnDetails.blockCount !== 0);
     row.appendTo('#firewallContainer');
 
-    // 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 larger than what is available.
-    if ( popupHeight === undefined ) {
-        popupHeight = uDom('#panes > div:nth-of-type(1)').nodeAt(0).offsetHeight;
-        uDom('#panes > div:nth-of-type(2)').css('height', popupHeight + 'px');
-
-        // The padlock must be manually positioned:
-        // - It's vertical position depends on the height on the title bar.
-        var rect = document.getElementById('gotoPrefs').getBoundingClientRect();
-        document.getElementById('saveRules').style.setProperty('top', (rect.bottom + 4) + 'px');
-    }
     return row;
 };
 

src/popup.html

@@ -15,17 +15,17 @@
     <div>
         <p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa">&#xf011;</span></p>
         <p id="switch-hint"></p>
-        <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt"></h2>
+        <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt">&nsbsp;</h2>
         <p class="statName">
-            <span data-i18n="popupBlockedOnThisPagePrompt"></span>&ensp;
+            <span data-i18n="popupBlockedOnThisPagePrompt">&nsbsp;</span>&ensp;
             <span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top">&#xf1fb;</span>&ensp;
             <a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</a>
             </p>
         <p class="statValue" id="page-blocked">?</p>
-        <p class="statName" data-i18n="popupBlockedSinceInstallPrompt"></p>
+        <p class="statName" data-i18n="popupBlockedSinceInstallPrompt">&nsbsp;</p>
         <p class="statValue" id="total-blocked">?</p>
-        <h2 data-i18n="popupHitDomainCountPrompt"></h2>
+        <h2 data-i18n="popupHitDomainCountPrompt">&nsbsp;</h2>
-        <p class="statValue" id="popupHitDomainCount"></p>
+        <p class="statValue" id="popupHitDomainCount">&nsbsp;</p>
         <div id="refresh" class="fa">&#xf021;</div>
         </div><!-- DO NOT REMOVE --><div>
         <div id="firewallContainer">