this fixes popup matrix position/resize issues

platform/firefox/vapi-background.js

@@ -1541,6 +1541,7 @@ vAPI.toolbarButton.onBeforeCreated = function(doc) {
 
     var iframe = doc.createElement('iframe');
     iframe.setAttribute('type', 'content');
+    iframe.setAttribute('overflow-x', 'hidden');
 
     doc.getElementById('PanelUI-multiView')
         .appendChild(panel)
@@ -1562,10 +1563,20 @@ vAPI.toolbarButton.onBeforeCreated = function(doc) {
         var width = body.clientWidth;
         // https://github.com/chrisaljoudi/uBlock/issues/730
         // Voodoo programming: this recipe works
-        panel.style.height = iframe.style.height = height.toString() + 'px';
-        panel.style.width = iframe.style.width = width.toString() + 'px';
-        if ( iframe.clientHeight !== height || iframe.clientWidth !== width ) {
+        panel.style.setProperty('height', height + 'px');
+        iframe.style.setProperty('height', height + 'px');
+        // Adjust width for presence/absence of vertical scroll bar which may
+        // have appeared as a result of last operation.
+        panel.style.setProperty('width', width + 'px');
+        var cw = panel.clientWidth;
+        var dw = iframe.contentWindow.document.documentElement.clientWidth;
+        if ( cw !== dw ) {
+            width = 2 * cw - dw;
+            panel.style.setProperty('width', width + 'px');
+        }
+        if ( iframe.clientHeight !== height || panel.clientWidth !== width ) {
             delayedResize();
+            return;
         }
     };
     var onPopupReady = function() {

src/css/logger-ui.css

@@ -181,6 +181,8 @@ body:not(.popupOn) #content table tr.canMtx td:nth-of-type(2):hover {
     display: none;
     overflow: hidden;
     position: fixed;
+    right: 1em;
+    top: 0;
     z-index: 200;
     }
 body.popupOn #popupContainer {
@@ -190,15 +192,10 @@ body.popupOn #popupContainer {
     background: #444;
     border: 0;
     border-bottom: 1px solid white;
-    cursor: -webkit-grab;
-    cursor: grab;
-    height: 2em;
-    }
-body[dir="ltr"] #popupContainer > div {
-    direction: rtl;
+    height: 1.8em;
     }
-body[dir="rtl"] #popupContainer > div {
-    direction: ltr;
+#popupContainer > div {
+    text-align: right;
     }
 #popupContainer > div > span {
     color: #ccc;
@@ -216,17 +213,9 @@ body[dir="rtl"] #popupContainer > div {
     margin: 0;
     width: 100%;
     }
-#movingOverlay {
-    bottom: 0;
-    display: none;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 300;
+#popupContainer.hide {
+    width: 6em !important;
     }
-#popupContainer.moving ~ #movingOverlay {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-    display: block;
+#popupContainer.hide > iframe {
+    display: none;
     }

src/js/logger-ui.js

@@ -557,7 +557,6 @@ var popupManager = (function() {
     var realTabId = null;
     var localTabId = null;
     var container = null;
-    var movingOverlay = null;
     var popup = null;
     var popupObserver = null;
     var style = null;
@@ -568,96 +567,36 @@ var popupManager = (function() {
         '}'
     ].join('\n');
 
-    // Related to moving the popup around
-    var xnormal, ynormal, crect, dx, dy, vw, vh;
-
-    // Viewport data assumed to be properly set up
-    var positionFromNormal = function(x, y) {
-        if ( typeof x === 'number' ) {
-            if ( x < 0.5 ) {
-                container.style.setProperty('left', (x * vw) + 'px');
-                container.style.removeProperty('right');
-            } else {
-                container.style.removeProperty('left');
-                container.style.setProperty('right', ((1 - x) * vw) + 'px');
-            }
-        }
-        if ( typeof y === 'number' ) {
-            if ( y < 0.5 ) {
-                container.style.setProperty('top', (y * vh) + 'px');
-                container.style.removeProperty('bottom');
-            } else {
-                container.style.removeProperty('top');
-                container.style.setProperty('bottom', ((1 - y) * vh) + 'px');
-            }
-        }
-        // TODO: adjust size
-    };
-    var updateViewportData = function() {
-        crect = container.getBoundingClientRect();
-        vw = document.documentElement.clientWidth - crect.width;
-        vh = document.documentElement.clientHeight - crect.height;
-    };
-    var toNormalX = function(x) {
-        return xnormal = Math.max(Math.min(x / vw, 1), 0);
-    };
-    var toNormalY = function(y) {
-        return ynormal = Math.max(Math.min(y / vh, 1), 0);
-    };
-
-    var onMouseMove = function(ev) {
-        updateViewportData();
-        positionFromNormal(
-            toNormalX(ev.clientX + dx),
-            toNormalY(ev.clientY + dy)
-        );
-        ev.stopPropagation();
-        ev.preventDefault();
-    };
-
-    var onMouseUp = function(ev) {
-        updateViewportData();
-        positionFromNormal(
-            toNormalX(ev.clientX + dx),
-            toNormalY(ev.clientY + dy)
-        );
-        movingOverlay.removeEventListener('mouseup', onMouseUp);
-        movingOverlay.removeEventListener('mousemove', onMouseMove);
-        movingOverlay = null;
-        container.classList.remove('moving');
-        vAPI.localStorage.setItem('popupLastPosition', JSON.stringify({
-            xnormal: xnormal,
-            ynormal: ynormal
-        }));
-        ev.stopPropagation();
-        ev.preventDefault();
-    };
-
-    var onMouseDown = function(ev) {
-        if ( ev.target !== ev.currentTarget ) {
+    var resizePopup = function() {
+        if ( popup === null ) {
             return;
         }
-        container.classList.add('moving');
-        updateViewportData();
-        dx = crect.left - ev.clientX;
-        dy = crect.top - ev.clientY;
-        movingOverlay = document.getElementById('movingOverlay');
-        movingOverlay.addEventListener('mousemove', onMouseMove, true);
-        movingOverlay.addEventListener('mouseup', onMouseUp, true);
-        ev.stopPropagation();
-        ev.preventDefault();
-    };
-
-    var resizePopup = function() {
         var popupBody = popup.contentWindow.document.body;
         if ( popupBody.clientWidth !== 0 && container.clientWidth !== popupBody.clientWidth ) {
-            container.style.width = popupBody.clientWidth + 'px';
+            container.style.setProperty('width', popupBody.clientWidth + 'px');
         }
+        popup.style.removeProperty('height');
         if ( popupBody.clientHeight !== 0 && popup.clientHeight !== popupBody.clientHeight ) {
-            popup.style.height = popupBody.clientHeight + 'px';
+            popup.style.setProperty('height', popupBody.clientHeight + 'px');
+        }
+        var ph = document.documentElement.clientHeight;
+        var crect = container.getBoundingClientRect();
+        if ( crect.height > ph ) {
+            popup.style.setProperty('height', 'calc(' + ph + 'px - 1.8em)');
+        }
+        // Adjust width for presence/absence of vertical scroll bar which may
+        // have appeared as a result of last operation.
+        var cw = container.clientWidth;
+        var dw = popup.contentWindow.document.documentElement.clientWidth;
+        if ( cw !== dw ) {
+            container.style.setProperty('width', (2 * cw - dw) + 'px');
         }
     };
 
+    var toggleSize = function() {
+        container.classList.toggle('hide');
+    };
+
     var onLoad = function() {
         resizePopup();
         popupObserver.observe(popup.contentDocument.body, {
@@ -677,26 +616,10 @@ var popupManager = (function() {
             realTabId = noTabId;
         }
 
-        // Use last normalized position if one is defined.
-        // Default to top-right.
-        var x = 1, y = 0;
-        var json = vAPI.localStorage.getItem('popupLastPosition');
-        if ( json ) {
-            try {
-                var popupLastPosition = JSON.parse(json);
-                x = popupLastPosition.xnormal;
-                y = popupLastPosition.ynormal;
-            }
-            catch (e) {
-            }
-        }
         container = document.getElementById('popupContainer');
-        updateViewportData();
-        positionFromNormal(x, y);
 
-        // Window controls
-        container.querySelector('div > span:first-child').addEventListener('click', toggleOff);
-        container.querySelector('div').addEventListener('mousedown', onMouseDown);
+        container.querySelector('div > span:nth-of-type(1)').addEventListener('click', toggleSize);
+        container.querySelector('div > span:nth-of-type(2)').addEventListener('click', toggleOff);
 
         popup = document.createElement('iframe');
         popup.addEventListener('load', onLoad);
@@ -713,16 +636,8 @@ var popupManager = (function() {
     var toggleOff = function() {
         document.body.classList.remove('popupOn');
 
-        // Just in case
-        if ( movingOverlay !== null ) {
-            movingOverlay.removeEventListener('mousemove', onMouseMove, true);
-            movingOverlay.removeEventListener('mouseup', onMouseUp, true);
-            movingOverlay = null;
-        }
-
-        // Window controls
-        container.querySelector('div > span:first-child').removeEventListener('click', toggleOff);
-        container.querySelector('div').removeEventListener('mousedown', onMouseDown);
+        container.querySelector('div > span:nth-of-type(1)').removeEventListener('click', toggleSize);
+        container.querySelector('div > span:nth-of-type(2)').removeEventListener('click', toggleOff);
 
         popup.removeEventListener('load', onLoad);
         popupObserver.disconnect();

src/logger-ui.html

@@ -25,9 +25,8 @@
     </div>
 
 <div id="popupContainer">
-    <div><span>&#xf00d;</span></div>
+    <div><span>&#xf068;</span>&ensp;<span>&#xf00d;</span></div>
     </div>
-<div id="movingOverlay"></div>
 
 <div style="display: none;">
     <div id="renderedURLTemplate"><span><span></span><b></b><span></span></span></div>