From 1d8243583ce5e9e3e41ca395021799dc037396f1 Mon Sep 17 00:00:00 2001 From: gorhill Date: Wed, 6 May 2015 10:04:49 -0400 Subject: [PATCH] more work on matrix popup integration within logger --- src/css/logger-ui.css | 47 +++++++----- src/js/logger-ui.js | 169 +++++++++++++++++++++++++++--------------- src/js/popup.js | 1 + src/logger-ui.html | 3 +- 4 files changed, 140 insertions(+), 80 deletions(-) diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index cdb3876..d952053 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -76,7 +76,7 @@ input:focus { width: 3em; } #content table > colgroup > col:nth-of-type(4) { - width: 8em; + width: 5em; } #content table > colgroup > col:nth-of-type(5) { width: calc(100% - 20em); @@ -141,7 +141,7 @@ body.compactView #content td { content: '\f070'; font: 1em FontAwesome; } -#content table tr.cat_net td:nth-of-type(2) { +body:not(.popupOn) #content table tr.cat_net td:nth-of-type(2) { cursor: zoom-in; } #content table tr.cat_net td:nth-of-type(3) { @@ -160,37 +160,44 @@ body.compactView #content td { } #popupContainer { - background: #444; + background: white; border: 1px solid gray; - cursor: -webkit-grab; - cursor: grab; display: none; overflow: hidden; position: fixed; z-index: 200; } -#popupContainer.show { +body.popupOn #popupContainer { display: block; } +#popupContainer > div { + background: #444; + cursor: -webkit-grab; + cursor: grab; + height: 2em; + } +body[dir="ltr"] #popupContainer > div { + direction: rtl; + } +body[dir="rtl"] #popupContainer > div { + direction: ltr; + } +#popupContainer > div > span { + color: #ccc; + cursor: pointer; + display: inline-block; + font: 14px FontAwesome; + padding: 4px; + } +#popupContainer > div > span:hover { + color: white; + } #popupContainer > iframe { border: 0; padding: 0; - margin: 1.5em 0 0 0; + margin: 0; width: 100%; } -#focusOverlay { - bottom: 0; - cursor: not-allowed; - display: none; - left: 0; - position: fixed; - right: 0; - top: 3.5em; - z-index: 100; - } -#popupContainer.show ~ #focusOverlay { - display: block; - } #movingOverlay { bottom: 0; display: none; diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index 2c1b105..31aa83f 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -34,7 +34,6 @@ var messager = vAPI.messaging.channel('logger-ui.js'); -var inspectedTabId = ''; var doc = document; var body = doc.body; var tbody = doc.querySelector('#content tbody'); @@ -44,7 +43,6 @@ var firstVarDataCol = 2; // currently, column 2 (0-based index) var lastVarDataIndex = 3; // currently, d0-d3 var maxEntries = 5000; var noTabId = ''; -var popupTabId; var prettyRequestTypes = { 'main_frame': 'doc', @@ -166,9 +164,10 @@ var createRow = function(layout) { /******************************************************************************/ -var createGap = function(url) { +var createGap = function(tabId, url) { var tr = createRow('1'); tr.classList.add('doc'); + tr.classList.add('tab_' + tabId); tr.cells[firstVarDataCol].textContent = url; tbody.insertBefore(tr, tbody.firstChild); }; @@ -190,8 +189,8 @@ var renderLogEntry = function(entry) { tr = createRow('111'); // If the request is that of a root frame, insert a gap in the table // in order to visually separate entries for different documents. - if ( entry.d2 === 'doc' ) { - createGap(entry.d1); + if ( entry.d2 === 'doc' && entry.tab !== noTabId ) { + createGap(entry.tab, entry.d1); } if ( entry.d3 ) { tr.classList.add('blocked'); @@ -303,7 +302,7 @@ var onBufferRead = function(response) { // require a bit more code to ensure no multi time out events. var readLogBuffer = function() { - messager.send({ what: 'readMany', tabId: inspectedTabId }, onBufferRead); + messager.send({ what: 'readMany' }, onBufferRead); }; /******************************************************************************/ @@ -328,45 +327,93 @@ var toggleCompactView = function() { /******************************************************************************/ var togglePopup = (function() { + var realTabId = null; + var localTabId = null; var container = null; var movingOverlay = null; var popup = null; var popupObserver = null; var style = null; - var styleTemplate = 'tr:not(.tab_{{tabId}}) { opacity: 0.1; }'; - var dx, dy; - - var moveTo = function(ev) { - container.style.left = (ev.clientX + dx) + 'px'; - container.style.top = (ev.clientY + dy) + 'px'; + var styleTemplate = [ + 'tr:not(.tab_{{tabId}}) {', + 'cursor: not-allowed;', + 'opacity: 0.1;', + '}' + ].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) { - moveTo(ev); + updateViewportData(); + positionFromNormal( + toNormalX(ev.clientX + dx), + toNormalY(ev.clientY + dy) + ); ev.stopPropagation(); ev.preventDefault(); }; var onMouseUp = function(ev) { - moveTo(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'); - var rect = container.getBoundingClientRect(); vAPI.localStorage.setItem('popupLastPosition', JSON.stringify({ - x: rect.left, - y: rect.top + xnormal: xnormal, + ynormal: ynormal })); ev.stopPropagation(); ev.preventDefault(); }; - var onMove = function(ev) { + var onMouseDown = function(ev) { + if ( ev.target !== ev.currentTarget ) { + return; + } container.classList.add('moving'); - var rect = container.getBoundingClientRect(); - dx = rect.left - ev.clientX; - dy = rect.top - ev.clientY; + 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); @@ -398,61 +445,74 @@ var togglePopup = (function() { if ( matches === null ) { return; } - var tabId = matches[1]; - if ( tabId === 'bts' ) { - tabId = noTabId; + realTabId = localTabId = matches[1]; + if ( localTabId === 'bts' ) { + realTabId = noTabId; } - // Use last position if one is defined - var x, y; + // 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.x; - y = popupLastPosition.y; + x = popupLastPosition.xnormal; + y = popupLastPosition.ynormal; } catch (e) { } } - // Fall back to cell position if no position defined - if ( x === undefined ) { - var rect = td.getBoundingClientRect(); - x = rect.left; - y = rect.bottom; - } container = document.getElementById('popupContainer'); - container.style.left = x + 'px'; - container.style.top = y + 'px'; - container.addEventListener('mousedown', onMove); - popup = container.querySelector('iframe'); - popup.setAttribute('src', 'popup.html?tabId=' + tabId); + updateViewportData(); + positionFromNormal(x, y); + + // Window controls + container.querySelector('div > span:first-child').addEventListener('click', toggleOff); + container.querySelector('div').addEventListener('mousedown', onMouseDown); + + popup = document.createElement('iframe'); popup.addEventListener('load', onLoad); + popup.setAttribute('src', 'popup.html?tabId=' + realTabId); popupObserver = new MutationObserver(resizePopup); + container.appendChild(popup); + style = document.querySelector('#content > style'); - style.textContent = styleTemplate.replace('{{tabId}}', tabId); - container.classList.add('show'); - popupTabId = tabId; + style.textContent = styleTemplate.replace('{{tabId}}', localTabId); + + document.body.classList.add('popupOn'); }; var toggleOff = function() { - style.textContent = ''; - style = null; + 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); + + popup.removeEventListener('load', onLoad); popupObserver.disconnect(); popupObserver = null; - popup.removeEventListener('load', onLoad); popup.setAttribute('src', ''); + container.removeChild(popup); popup = null; - container.classList.remove('show'); - container.removeEventListener('mousedown', onMove); + + style.textContent = ''; + style = null; + container = null; - popupTabId = undefined; + realTabId = null; }; return function(ev) { - if ( popupTabId !== undefined ) { - toggleOff(); - } else { + if ( realTabId === null ) { toggleOn(ev.target); } }; @@ -483,19 +543,12 @@ var onMaxEntriesChanged = function() { /******************************************************************************/ uDom.onLoad(function() { - // Extract the tab id of the page we need to pull the log - var matches = window.location.search.match(/[\?&]tabId=([^&]+)/); - if ( matches && matches.length === 2 ) { - inspectedTabId = matches[1]; - } - readLogBuffer(); uDom('#compactViewToggler').on('click', toggleCompactView); uDom('#clear').on('click', clearBuffer); uDom('#maxEntries').on('change', onMaxEntriesChanged); uDom('#content table').on('click', 'tr.cat_net > td:nth-of-type(2)', togglePopup); - uDom('#focusOverlay').on('click', togglePopup); }); /******************************************************************************/ diff --git a/src/js/popup.js b/src/js/popup.js index 74dea0f..b90ed4f 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -1130,6 +1130,7 @@ function gotoExtensionURL(ev) { if ( url ) { messager.send({ what: 'gotoExtensionURL', url: url }); } + dropDownMenuHide(); vAPI.closePopup(); } diff --git a/src/logger-ui.html b/src/logger-ui.html index faa78ed..f6315ac 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -24,9 +24,8 @@
- +
-