make popup sticky in top-right corner

src/css/logger-ui.css

@@ -145,7 +145,7 @@ body.compactView #content td {
     }
 
 #content table tr td:nth-of-type(1) {
-    text-align: center;
+    text-align: right;
     white-space: nowrap;
     }
 #content table tr td:nth-of-type(2) {
@@ -167,7 +167,7 @@ body:not(.popupOn) #content table tr.canMtx td:nth-of-type(2) {
     cursor: zoom-in;
     }
 body:not(.popupOn) #content table tr.canMtx td:nth-of-type(2):hover {
-    background: white;
+    background: #ccc;
     }
 #content table tr.cat_net td:nth-of-type(3),
 #content table tr.cat_cosmetic td:nth-of-type(3) {
@@ -198,9 +198,12 @@ body.colorBlind #content table tr.allowed td:nth-of-type(6) b {
     background: white;
     border: 1px solid gray;
     border-radius: 3px;
+    box-sizing: border-box;
     display: none;
     overflow: hidden;
     position: fixed;
+    right: 0;
+    top: 0;
     z-index: 200;
     }
 body.popupOn #popupContainer {
@@ -209,15 +212,12 @@ body.popupOn #popupContainer {
 #popupContainer > div {
     background: #aaa;
     border: 0;
-    cursor: -webkit-grab;
-    cursor: grab;
-    height: 1.2em;
     }
 body[dir="ltr"] #popupContainer > div {
-    direction: rtl;
+    text-align: right;
     }
 body[dir="rtl"] #popupContainer > div {
-    direction: ltr;
+    text-align: left;
     }
 #popupContainer > div > span {
     color: #eee;
@@ -235,17 +235,9 @@ body[dir="rtl"] #popupContainer > div {
     margin: 0;
     width: 100%;
     }
-#movingOverlay {
+#popupContainer.hide {
-    bottom: 0;
+    width: 6em !important;
+    }
+#popupContainer.hide > iframe {
     display: none;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 300;
-    }
-#popupContainer.moving ~ #movingOverlay {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-    display: block;
     }

src/js/logger-ui.js

@@ -567,7 +567,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;
@@ -578,96 +577,23 @@ var popupManager = (function() {
         '}'
     ].join('\n');
 
-    // Related to moving the popup around
+    var resizePopup = function() {
-    var xnormal, ynormal, crect, dx, dy, vw, vh;
+        if ( popup === null ) {
-
-    // 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 ) {
             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');
         }
         if ( popupBody.clientHeight !== 0 && popup.clientHeight !== popupBody.clientHeight ) {
-            popup.style.height = popupBody.clientHeight + 'px';
+            popup.style.setProperty('height', popupBody.clientHeight + 'px');
         }
     };
 
+    var toggleSize = function() {
+        container.classList.toggle('hide');
+    };
+
     var onLoad = function() {
         resizePopup();
         popupObserver.observe(popup.contentDocument.body, {
@@ -687,26 +613,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:nth-of-type(1)').addEventListener('click', toggleSize);
-        container.querySelector('div > span:first-child').addEventListener('click', toggleOff);
+        container.querySelector('div > span:nth-of-type(2)').addEventListener('click', toggleOff);
-        container.querySelector('div').addEventListener('mousedown', onMouseDown);
 
         popup = document.createElement('iframe');
         popup.addEventListener('load', onLoad);
@@ -723,16 +633,9 @@ var popupManager = (function() {
     var toggleOff = function() {
         document.body.classList.remove('popupOn');
 
-        // Just in case
+        container.querySelector('div > span:nth-of-type(1)').removeEventListener('click', toggleSize);
-        if ( movingOverlay !== null ) {
+        container.querySelector('div > span:nth-of-type(2)').removeEventListener('click', toggleOff);
-            movingOverlay.removeEventListener('mousemove', onMouseMove, true);
+        container.classList.remove('hide');
-            movingOverlay.removeEventListener('mouseup', onMouseUp, true);
-            movingOverlay = null;
-        }
-
-        // Window controls
-        container.querySelector('div > span:first-child').removeEventListener('click', toggleOff);
-        container.querySelector('div').removeEventListener('mousedown', onMouseDown);
 
         popup.removeEventListener('load', onLoad);
         popupObserver.disconnect();

src/logger-ui.html

@@ -24,9 +24,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>