archive
/
nuTensor
mirror of https://github.com/geekprojects/nuTensor.git
1
0
Fork 0
Code Issues Releases Wiki Activity

more work on matrix popup integration within logger

Browse Source
pull/2/head
gorhill 10 years ago
parent 1901b9c6e8
commit 1d8243583c
4 changed files with 140 additions and 80 deletions
Show Stats Download Patch File Download Diff File

47
src/css/logger-ui.css
Unescape Escape View File

@ -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;

169
src/js/logger-ui.js
Unescape Escape View File

@ -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);
});
/******************************************************************************/

1
src/js/popup.js
Unescape Escape View File

@ -1130,6 +1130,7 @@ function gotoExtensionURL(ev) {
if ( url ) {
messager.send({ what: 'gotoExtensionURL', url: url });
}
dropDownMenuHide();
vAPI.closePopup();
}

3
src/logger-ui.html
Unescape Escape View File

@ -24,9 +24,8 @@
</div>
<div id="popupContainer">
<iframe src></iframe>
<div><span>&#xf00d;</span></div>
</div>
<div id="focusOverlay"></div>
<div id="movingOverlay"></div>
<div style="display: none;">

Write Preview
Loading…
Cancel
Save