popup resize: code review

platform/chromium/vapi-common.js

@@ -81,10 +81,6 @@ vAPI.closePopup = function() {
     window.open('','_self').close();
 };
 
-vAPI.resizePopup = function() {
-    // Nothing to do: chromium API takes care to resize the popup
-};
-
 /******************************************************************************/
 
 // A localStorage-like object which should be accessible from the

platform/firefox/vapi-background.js

@@ -1997,8 +1997,8 @@ vAPI.toolbarButton = {
 
             // https://github.com/chrisaljoudi/uBlock/issues/730
             // Voodoo programming: this recipe works
-            panel.style.setProperty('height', height + 'px');
+            panel.style.setProperty('height', toPx(height));
-            iframe.style.setProperty('height', height + 'px');
+            iframe.style.setProperty('height', toPx(height));
 
             // Adjust width for presence/absence of vertical scroll bar which may
             // have appeared as a result of last operation.
@@ -2007,13 +2007,13 @@ vAPI.toolbarButton = {
             if ( contentWindow.scrollMaxY !== 0 ) {
                 width += scrollBarWidth;
             }
-            panel.style.setProperty('width', width + 'px');
+            panel.style.setProperty('width', toPx(width));
 
             // scrollMaxX should always be zero once we know the scrollbar width
             if ( contentWindow.scrollMaxX !== 0 ) {
                 scrollBarWidth = contentWindow.scrollMaxX;
                 width += scrollBarWidth;
-                panel.style.setProperty('width', width + 'px');
+                panel.style.setProperty('width', toPx(width));
             }
 
             if ( iframe.clientHeight !== height || panel.clientWidth !== width ) {
@@ -2042,14 +2042,16 @@ vAPI.toolbarButton = {
                 tbb.onBeforePopupReady.call(this);
             }
 
+            var body = win.document.body;
+            body.removeAttribute('data-resize-popup');
             var mutationObserver = new win.MutationObserver(onResizeRequested);
-            mutationObserver.observe(win.document.body, {
+            mutationObserver.observe(body, {
                 attributes: true,
                 attributeFilter: [ 'data-resize-popup' ]
             });
         };
 
-        iframe.addEventListener('DOMContentLoaded', onPopupReady, true);
+        iframe.addEventListener('load', onPopupReady, true);
     };
 })();
 

platform/firefox/vapi-common.js

@@ -120,10 +120,6 @@ vAPI.closePopup = function() {
     sendAsyncMessage(location.host + ':closePopup');
 };
 
-vAPI.resizePopup = function() {
-    document.body.setAttribute('data-resize-popup', 'true');
-};
-
 /******************************************************************************/
 
 // A localStorage-like object which should be accessible from the

src/css/popup.css

@@ -313,6 +313,7 @@ body.tScopeSite #scopeCell {
     padding: 6px 1px 3px 1px;
     display: inline-block;
     box-sizing: content-box;
+    -moz-box-sizing: content-box;
     width: 2.6em;
     white-space: nowrap;
     text-align: center;

src/js/logger-ui.js

@@ -761,11 +761,22 @@ var popupManager = (function() {
         container.classList.toggle('hide');
     };
 
+    var onResizeRequested = function() {
+        var popupBody = popup.contentWindow.document.body;
+        if ( popupBody.getAttribute('data-resize-popup') !== 'true' ) {
+            return;
+        }
+        popupBody.removeAttribute('data-resize-popup');
+        resizePopup();
+    };
+
     var onLoad = function() {
         resizePopup();
-        popupObserver.observe(popup.contentDocument.body, {
+        var popupBody = popup.contentDocument.body;
-            subtree: true,
+        popupBody.removeAttribute('data-resize-popup');
-            attributes: true
+        popupObserver.observe(popupBody, {
+            attributes: true,
+            attributesFilter: [ 'data-resize-popup' ]
         });
     };
 
@@ -788,7 +799,7 @@ var popupManager = (function() {
         popup = document.createElement('iframe');
         popup.addEventListener('load', onLoad);
         popup.setAttribute('src', 'popup.html?tabId=' + realTabId);
-        popupObserver = new MutationObserver(resizePopup);
+        popupObserver = new MutationObserver(onResizeRequested);
         container.appendChild(popup);
 
         style = document.getElementById('popupFilterer');

src/js/popup.js

@@ -288,7 +288,7 @@ function toggleCollapseState(elem) {
     } else {
         toggleSpecificCollapseState(elem);
     }
-    vAPI.resizePopup();
+    resizePopup();
 }
 
 function toggleMainCollapseState(uelem) {
@@ -369,7 +369,6 @@ function updateMatrixColors() {
         cell = cells.nodeAt(i);
         cell.className = 'matCell ' + getCellClass(cell.hostname, cell.reqType);
     }
-    vAPI.resizePopup();
 }
 
 /******************************************************************************/
@@ -395,7 +394,6 @@ function updateMatrixBehavior() {
         }
         section.toggleClass('collapsible', subdomainRows.filter('.collapsible').length > 0);
     }
-    vAPI.resizePopup();
 }
 
 /******************************************************************************/
@@ -478,7 +476,7 @@ var endMatrixUpdate = function() {
     updateMatrixBehavior();
     matrixList.css('display', '');
     matrixList.appendTo('.paneContent');
-    vAPI.resizePopup();
+    resizePopup();
 };
 
 var createMatrixGroup = function() {
@@ -1220,6 +1218,11 @@ var onMatrixSnapshotReady = function(response) {
     // TODO:
 };
 
+/******************************************************************************/
+
+var resizePopup = function() {
+    document.body.setAttribute('data-resize-popup', 'true');
+};
 
 /******************************************************************************/
 
@@ -1367,7 +1370,7 @@ uDom('#matList').on('click', '.g4Meta', function() {
         .toggleClass('g4Collapsed')
         .hasClass('g4Collapsed');
     setUISetting('popupHideBlacklisted', collapsed);
-    vAPI.resizePopup();
+    resizePopup();
 });
 
 /******************************************************************************/