gorhill
10 years ago
6 changed files with 535 additions and 10 deletions
-
118src/css/logger-ui.css
-
22src/css/popup.css
-
63src/js/browsercache.js
-
309src/js/logger-ui.js
-
25src/logger-ui.html
-
8src/popup.html
@ -0,0 +1,118 @@ |
|||
body { |
|||
border: 0; |
|||
box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
margin: 0; |
|||
overflow-x: hidden; |
|||
padding: 0; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
} |
|||
#toolbar { |
|||
background-color: white; |
|||
border: 0; |
|||
box-sizing: border-box; |
|||
height: 40px; |
|||
left: 0; |
|||
margin: 0; |
|||
padding: 0 1em; |
|||
position: fixed; |
|||
top: 0; |
|||
width: 100%; |
|||
} |
|||
#toolbar .button { |
|||
background-color: white; |
|||
border: none; |
|||
box-sizing: border-box; |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
font-size: 20px; |
|||
margin: 0; |
|||
padding: 8px; |
|||
} |
|||
#toolbar .button:hover { |
|||
background-color: #eee; |
|||
} |
|||
body.filterOff #toolbar #filterButton { |
|||
opacity: 0.25; |
|||
} |
|||
#filterExpression.bad { |
|||
background-color: #fee; |
|||
} |
|||
#maxEntries { |
|||
margin-left: 3em; |
|||
} |
|||
input:focus { |
|||
background-color: #ffe; |
|||
} |
|||
#content { |
|||
margin-top: 40px; |
|||
} |
|||
#content table { |
|||
border: 0; |
|||
border-collapse: collapse; |
|||
direction: ltr; |
|||
font: 12px monospace; |
|||
width: 100%; |
|||
} |
|||
#content table tr { |
|||
background-color: #fafafa; |
|||
} |
|||
#content table tr:nth-of-type(2n+1) { |
|||
background-color: #eee; |
|||
} |
|||
#content table tr.doc { |
|||
background-color: #666; |
|||
color: white; |
|||
text-align: center; |
|||
} |
|||
#content table tr.doc > td:nth-of-type(2) { |
|||
padding: 1em 0; |
|||
white-space: normal; |
|||
word-break: break-all; |
|||
word-wrap: break-word; |
|||
} |
|||
#content table tr.cat_info { |
|||
color: #00a; |
|||
} |
|||
#content table tr.blocked { |
|||
color: #c00; |
|||
} |
|||
/* |
|||
#content table tr.allowed { |
|||
background-color: rgba(0, 160, 0, 0.1); |
|||
} |
|||
#content table tr.allowed:nth-of-type(2n+1) { |
|||
background-color: rgba(0, 160, 0, 0.2); |
|||
} |
|||
body.colorBlind #content table tr.allowed { |
|||
background-color: rgba(255, 194, 57, 0.1) |
|||
} |
|||
*/ |
|||
body:not(.filterOff) #content table tr.hidden { |
|||
display: none; |
|||
} |
|||
#content table tr td { |
|||
border: 1px solid #ccc; |
|||
padding: 3px; |
|||
vertical-align: top; |
|||
} |
|||
#content table tr td:nth-of-type(1) { |
|||
text-align: center; |
|||
white-space: pre; |
|||
width: 8em; |
|||
} |
|||
#content table tr td:nth-of-type(2) { |
|||
white-space: pre; |
|||
width: 2em; |
|||
} |
|||
#content table tr td:nth-of-type(3) { |
|||
white-space: pre; |
|||
width: 8em; |
|||
} |
|||
#content table tr td:nth-of-type(4) { |
|||
border-right: none; |
|||
white-space: normal; |
|||
word-break: break-all; |
|||
word-wrap: break-word; |
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
/******************************************************************************* |
|||
|
|||
uMatrix - a Chromium browser extension to black/white list requests. |
|||
Copyright (C) 2015 Raymond Hill |
|||
|
|||
This program is free software: you can redistribute it and/or modify |
|||
it under the terms of the GNU General Public License as published by |
|||
the Free Software Foundation, either version 3 of the License, or |
|||
(at your option) any later version. |
|||
|
|||
This program is distributed in the hope that it will be useful, |
|||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
GNU General Public License for more details. |
|||
|
|||
You should have received a copy of the GNU General Public License |
|||
along with this program. If not, see {http://www.gnu.org/licenses/}.
|
|||
|
|||
Home: https://github.com/gorhill/uMatrix
|
|||
*/ |
|||
|
|||
/* global µMatrix */ |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
(function() { |
|||
|
|||
'use strict'; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
// Browser data jobs
|
|||
|
|||
var clearCache = function() { |
|||
setTimeout(clearCache, 15 * 60 * 1000); |
|||
|
|||
var µm = µMatrix; |
|||
if ( !µm.userSettings.clearBrowserCache ) { |
|||
return; |
|||
} |
|||
|
|||
µm.clearBrowserCacheCycle -= 15; |
|||
if ( µm.clearBrowserCacheCycle > 0 ) { |
|||
return; |
|||
} |
|||
|
|||
µm.clearBrowserCacheCycle = µm.userSettings.clearBrowserCacheAfter; |
|||
µm.browserCacheClearedCounter++; |
|||
|
|||
vAPI.browserCache.clearByTime(0); |
|||
|
|||
µm.logger.writeOne('', 'info', 'browser cache cleared'); |
|||
|
|||
//console.debug('clearBrowserCacheCallback()> vAPI.browserCache.clearByTime() called');
|
|||
}; |
|||
|
|||
setTimeout(clearCache, 15 * 60 * 1000); |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
})(); |
|||
|
|||
/******************************************************************************/ |
|||
@ -0,0 +1,309 @@ |
|||
/******************************************************************************* |
|||
|
|||
uMatrix - a browser extension to benchmark browser session. |
|||
Copyright (C) 2015 Raymond Hill |
|||
|
|||
This program is free software: you can redistribute it and/or modify |
|||
it under the terms of the GNU General Public License as published by |
|||
the Free Software Foundation, either version 3 of the License, or |
|||
(at your option) any later version. |
|||
|
|||
This program is distributed in the hope that it will be useful, |
|||
but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
GNU General Public License for more details. |
|||
|
|||
You should have received a copy of the GNU General Public License |
|||
along with this program. If not, see {http://www.gnu.org/licenses/}.
|
|||
|
|||
Home: https://github.com/gorhill/sessbench
|
|||
|
|||
TODO: cleanup/refactor |
|||
*/ |
|||
|
|||
/* jshint boss: true */ |
|||
/* global vAPI, uDom */ |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
(function() { |
|||
|
|||
'use strict'; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var messager = vAPI.messaging.channel('logger-ui.js'); |
|||
|
|||
var inspectedTabId = ''; |
|||
var maxEntries = 0; |
|||
var doc = document; |
|||
var body = doc.body; |
|||
var tbody = doc.querySelector('#content tbody'); |
|||
var trJunkyard = []; |
|||
var tdJunkyard = []; |
|||
var firstVarDataCol = 1; |
|||
var lastVarDataCol = 3; |
|||
|
|||
var prettyRequestTypes = { |
|||
'main_frame': 'doc', |
|||
'stylesheet': 'css', |
|||
'sub_frame': 'frame', |
|||
'xmlhttprequest': 'xhr' |
|||
}; |
|||
|
|||
var timeOptions = { |
|||
month: 'short', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
second: '2-digit' |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var createCell = function() { |
|||
var td = tdJunkyard.pop(); |
|||
if ( td ) { |
|||
return td; |
|||
} |
|||
return doc.createElement('td'); |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var createRow = function(entry) { |
|||
var tr = trJunkyard.pop(); |
|||
if ( tr ) { |
|||
tr.className = ''; |
|||
} else { |
|||
tr = doc.createElement('tr'); |
|||
} |
|||
var td; |
|||
for ( var index = 0; index < firstVarDataCol; index++ ) { |
|||
td = tr.cells[index]; |
|||
if ( td === undefined ) { |
|||
td = createCell(); |
|||
tr.appendChild(td); |
|||
} |
|||
td.removeAttribute('colspan'); |
|||
} |
|||
var i = 1, span = 1; |
|||
for (;;) { |
|||
td = tr.cells[index]; |
|||
if ( td === undefined ) { |
|||
td = createCell(); |
|||
tr.appendChild(td); |
|||
} |
|||
if ( i === lastVarDataCol ) { |
|||
break; |
|||
} |
|||
if ( entry['d' + i] === undefined ) { |
|||
span += 1; |
|||
} else { |
|||
if ( span !== 1 ) { |
|||
td.setAttribute('colspan', span); |
|||
} else { |
|||
td.removeAttribute('colspan'); |
|||
} |
|||
index += 1; |
|||
span = 1; |
|||
} |
|||
i += 1; |
|||
} |
|||
if ( span !== 1 ) { |
|||
td.setAttribute('colspan', span); |
|||
} else { |
|||
td.removeAttribute('colspan'); |
|||
} |
|||
index += 1; |
|||
while ( td = tr.cells[index] ) { |
|||
tdJunkyard.push(tr.removeChild(td)); |
|||
} |
|||
return tr; |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var createGap = function(url) { |
|||
var tr = createRow({ d0: '' }); |
|||
tr.classList.add('doc'); |
|||
tr.cells[firstVarDataCol].textContent = url; |
|||
tbody.insertBefore(tr, tbody.firstChild); |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var renderLogEntry = function(entry) { |
|||
var tr = createRow(entry); |
|||
|
|||
tr.classList.add('tab_' + entry.tab); |
|||
tr.classList.add('cat_' + entry.cat); |
|||
|
|||
var time = new Date(entry.tstamp); |
|||
tr.cells[0].textContent = time.toLocaleString('fullwide', timeOptions); |
|||
|
|||
switch ( entry.cat ) { |
|||
case 'info': |
|||
tr.cells[firstVarDataCol].textContent = entry.d0; |
|||
break; |
|||
|
|||
case 'net': |
|||
// 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.d1 === 'doc' ) { |
|||
createGap(entry.d2); |
|||
} |
|||
if ( entry.d0 ) { |
|||
tr.classList.add('blocked'); |
|||
tr.cells[1].textContent = '---'; |
|||
} else { |
|||
tr.cells[1].textContent = ''; |
|||
} |
|||
tr.cells[2].textContent = (prettyRequestTypes[entry.d1] || entry.d1) + '\t'; |
|||
tr.cells[3].textContent = entry.d2 + '\t'; |
|||
break; |
|||
|
|||
default: |
|||
break; |
|||
} |
|||
|
|||
tbody.insertBefore(tr, tbody.firstChild); |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var renderLogBuffer = function(response) { |
|||
var buffer = response.entries; |
|||
if ( buffer.length === 0 ) { |
|||
return; |
|||
} |
|||
|
|||
// Preserve scroll position
|
|||
var height = tbody.offsetHeight; |
|||
|
|||
var n = buffer.length; |
|||
for ( var i = 0; i < n; i++ ) { |
|||
renderLogEntry(buffer[i]); |
|||
} |
|||
|
|||
// Prevent logger from growing infinitely and eating all memory. For
|
|||
// instance someone could forget that it is left opened for some
|
|||
// dynamically refreshed pages.
|
|||
truncateLog(maxEntries); |
|||
|
|||
var yDelta = tbody.offsetHeight - height; |
|||
if ( yDelta === 0 ) { |
|||
return; |
|||
} |
|||
|
|||
// Chromium:
|
|||
// body.scrollTop = good value
|
|||
// body.parentNode.scrollTop = 0
|
|||
if ( body.scrollTop !== 0 ) { |
|||
body.scrollTop += yDelta; |
|||
return; |
|||
} |
|||
|
|||
// Firefox:
|
|||
// body.scrollTop = 0
|
|||
// body.parentNode.scrollTop = good value
|
|||
var parentNode = body.parentNode; |
|||
if ( parentNode && parentNode.scrollTop !== 0 ) { |
|||
parentNode.scrollTop += yDelta; |
|||
} |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var truncateLog = function(size) { |
|||
if ( size === 0 ) { |
|||
size = 25000; |
|||
} |
|||
size = Math.min(size, 25000); |
|||
var tr; |
|||
while ( tbody.childElementCount > size ) { |
|||
tr = tbody.lastElementChild; |
|||
trJunkyard.push(tbody.removeChild(tr)); |
|||
} |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var onBufferRead = function(response) { |
|||
renderLogBuffer(response); |
|||
setTimeout(readLogBuffer, 1000); |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
// This can be called only once, at init time. After that, this will be called
|
|||
// automatically. If called after init time, this will be messy, and this would
|
|||
// require a bit more code to ensure no multi time out events.
|
|||
|
|||
var readLogBuffer = function() { |
|||
messager.send({ what: 'readMany', tabId: inspectedTabId }, onBufferRead); |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var clearBuffer = function() { |
|||
var tr; |
|||
while ( tbody.firstChild !== null ) { |
|||
tr = tbody.lastElementChild; |
|||
trJunkyard.push(tbody.removeChild(tr)); |
|||
} |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var reloadTab = function() { |
|||
messager.send({ what: 'reloadTab', tabId: inspectedTabId }); |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
var onMaxEntriesChanged = function() { |
|||
var raw = uDom(this).val(); |
|||
try { |
|||
maxEntries = parseInt(raw, 10); |
|||
if ( isNaN(maxEntries) ) { |
|||
maxEntries = 0; |
|||
} |
|||
} catch (e) { |
|||
maxEntries = 0; |
|||
} |
|||
|
|||
messager.send({ |
|||
what: 'userSettings', |
|||
name: 'requestLogMaxEntries', |
|||
value: maxEntries |
|||
}); |
|||
|
|||
truncateLog(maxEntries); |
|||
}; |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
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]; |
|||
} |
|||
|
|||
var onSettingsReady = function(settings) { |
|||
maxEntries = settings.requestLogMaxEntries || 0; |
|||
uDom('#maxEntries').val(maxEntries || ''); |
|||
}; |
|||
messager.send({ what: 'getUserSettings' }, onSettingsReady); |
|||
|
|||
readLogBuffer(); |
|||
|
|||
uDom('#reload').on('click', reloadTab); |
|||
uDom('#clear').on('click', clearBuffer); |
|||
uDom('#maxEntries').on('change', onMaxEntriesChanged); |
|||
}); |
|||
|
|||
/******************************************************************************/ |
|||
|
|||
})(); |
|||
@ -0,0 +1,25 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<link rel="stylesheet" type="text/css" href="css/common.css"> |
|||
<link rel="stylesheet" type="text/css" href="css/logger-ui.css"> |
|||
<title>uMatrix log</title> |
|||
</head> |
|||
<body> |
|||
<div id="toolbar"> |
|||
<span id="reload" class="button fa"></span> |
|||
<span id="clear" class="button fa"></span> |
|||
<span id="filterButton" class="button fa"></span><input id="filterExpression" type="text" placeholder="logFilterPrompt"> |
|||
<input id="maxEntries" type="text" size="5" title="logMaxEntriesTip"> |
|||
</div> |
|||
<div id="content"> |
|||
<table><tbody></tbody></table> |
|||
</div> |
|||
<script src="js/vapi-common.js"></script> |
|||
<script src="js/vapi-client.js"></script> |
|||
<script src="js/udom.js"></script> |
|||
<script src="js/i18n.js"></script> |
|||
<script src="js/logger-ui.js"></script> |
|||
</body> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue