From 486183cbe6d3256c554bbd85b84676089bcab4d2 Mon Sep 17 00:00:00 2001 From: gorhill Date: Sat, 9 May 2015 12:07:20 -0400 Subject: [PATCH] this fixes popup matrix position/resize issues --- platform/firefox/vapi-background.js | 17 +++- src/css/logger-ui.css | 29 ++---- src/js/logger-ui.js | 135 ++++++---------------------- src/logger-ui.html | 3 +- 4 files changed, 49 insertions(+), 135 deletions(-) diff --git a/platform/firefox/vapi-background.js b/platform/firefox/vapi-background.js index 9427f4e..eedf9ec 100644 --- a/platform/firefox/vapi-background.js +++ b/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() { diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 91b5d28..4066e82 100644 --- a/src/css/logger-ui.css +++ b/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; + height: 1.8em; } -body[dir="ltr"] #popupContainer > div { - direction: rtl; - } -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; +#popupContainer.hide { + 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; } diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index 2c4564d..909ea5c 100644 --- a/src/js/logger-ui.js +++ b/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,94 +567,34 @@ 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() { @@ -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(); diff --git a/src/logger-ui.html b/src/logger-ui.html index 07ce19a..0c18bde 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -25,9 +25,8 @@
-
+
 
-