mirror of
https://github.com/gorhill/uMatrix.git
synced 2024-09-28 15:21:49 +12:00
more work on matrix popup integration within logger
This commit is contained in:
parent
1901b9c6e8
commit
1d8243583c
4 changed files with 139 additions and 79 deletions
|
@ -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;
|
||||
|
|
|
@ -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 styleTemplate = [
|
||||
'tr:not(.tab_{{tabId}}) {',
|
||||
'cursor: not-allowed;',
|
||||
'opacity: 0.1;',
|
||||
'}'
|
||||
].join('\n');
|
||||
|
||||
var moveTo = function(ev) {
|
||||
container.style.left = (ev.clientX + dx) + 'px';
|
||||
container.style.top = (ev.clientY + dy) + 'px';
|
||||
// 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);
|
||||
});
|
||||
|
||||
/******************************************************************************/
|
||||
|
|
|
@ -1130,6 +1130,7 @@ function gotoExtensionURL(ev) {
|
|||
if ( url ) {
|
||||
messager.send({ what: 'gotoExtensionURL', url: url });
|
||||
}
|
||||
dropDownMenuHide();
|
||||
vAPI.closePopup();
|
||||
}
|
||||
|
||||
|
|
|
@ -24,9 +24,8 @@
|
|||
</div>
|
||||
|
||||
<div id="popupContainer">
|
||||
<iframe src></iframe>
|
||||
<div><span></span></div>
|
||||
</div>
|
||||
<div id="focusOverlay"></div>
|
||||
<div id="movingOverlay"></div>
|
||||
|
||||
<div style="display: none;">
|
||||
|
|
Loading…
Reference in a new issue