1
0
Fork 0
mirror of https://github.com/gorhill/uMatrix.git synced 2024-06-17 01:35:00 +12:00

this fixes #31

This commit is contained in:
gorhill 2014-11-01 19:03:09 -04:00
parent 296f16f08e
commit 85ecc71230
5 changed files with 167 additions and 100 deletions

60
src/css/info.css Normal file
View file

@ -0,0 +1,60 @@
select {
max-width: 20em;
}
#stats div div,#lists div div {
padding: 0 1em 0 0;
display: inline-block;
text-align: right;
}
#requestsFilters button {
font-size: 15px;
}
#requestsFilters label {
font-size: 13px;
padding-right: 0.5em;
white-space: nowrap;
}
#requests-log {
margin: 0;
border: 1px inset #eee;
padding: 0;
font: 11px monospace;
background-color: white;
overflow: scroll;
width: calc(100% - 1.5em);
}
#requests-log table {
border-collapse: collapse;
}
#requests-log tr {
margin: 0;
border: 0;
padding: 0;
color: #070;
}
#requests-log tr.ro {
color: gray;
}
#requests-log tr:hover {
background-color: #eee;
}
#requests-log tr.blocked-true {
color: #c00;
}
#requests-log tr:first-child {
font-weight: bold;
background-color: #eee;
}
#requests-log tr > td {
padding: 1px 0.75em 1px 0;
white-space: nowrap;
}
#requests-log tr > td:nth-of-type(2) {
text-align: right;
}
.type-main_frame {
font-weight: bold;
}
tr.unused {
display: none;
}

View file

@ -5,66 +5,7 @@
<title>µMatrix &mdash; Info</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
<style>
select {
max-width: 20em;
}
#stats div div,#lists div div {
padding: 0 1em 0 0;
display: inline-block;
text-align: right;
}
#requests-filters {
font-size: 13px;
}
#requests-filters label {
padding-right: 1em
}
#requests-log {
margin: 0;
border: 1px inset #eee;
padding: 0;
font: 11px monospace;
background-color: white;
overflow: scroll;
width: calc(100% - 1.5em);
}
#requests-log table {
border-collapse: collapse;
}
#requests-log tr {
margin: 0;
border: 0;
padding: 0;
color: #070;
}
#requests-log tr.ro {
color: gray;
}
#requests-log tr:hover {
background-color: #eee;
}
#requests-log tr.blocked-true {
color: #c00;
}
#requests-log tr:first-child {
font-weight: bold;
background-color: #eee;
}
#requests-log tr > td {
padding: 1px 0.75em 1px 0;
white-space: nowrap;
}
#requests-log tr > td:nth-of-type(2) {
text-align: right;
}
.type-main_frame {
font-weight: bold;
}
tr.unused {
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="css/info.css">
</head>
<body>
@ -142,18 +83,20 @@ tr.unused {
<div><span data-i18n="statsPageLogSizePrompt1"></span> <input id="max-logged-requests" type="text" value="50" size="3"> <span data-i18n="statsPageLogSizePrompt2"></span>
<button class="whatisthis"></button>
<p class="whatisthis-expandable para" data-i18n="statsPageLogSizeHelp"></p>
<p id="requests-filters"><button id="refresh-requests" data-i18n="statsPageRefresh"></button>&emsp;Show:
<input id="show-doc" type="checkbox" checked value="1"><label for="show-doc">Pages</label>
<input id="show-blocked" type="checkbox" checked value="1"><label for="show-blocked"><span style="color:#c00" data-i18n="statsPageBlocked">Blocked</span></label>
<input id="show-allowed" type="checkbox" checked value="1"><label for="show-allowed"><span style="color:#070" data-i18n="statsPageAllowed">Allowed</span></label>
<input id="show-cookie" type="checkbox" checked value="1"><label for="show-cookie">Cookies</label>
<input id="show-image" type="checkbox" checked value="1"><label for="show-image">Images</label>
<input id="show-css" type="checkbox" checked value="1"><label for="show-css">CSS</label>
<input id="show-plugin" type="checkbox" checked value="1"><label for="show-plugin">Plugins</label>
<input id="show-script" type="checkbox" checked value="1"><label for="show-script">Scripts</label>
<input id="show-xhr" type="checkbox" checked value="1"><label for="show-xhr">XHRs</label>
<input id="show-frame" type="checkbox" checked value="1"><label for="show-frame">Frames</label>
<input id="show-other" type="checkbox" checked value="1"><label for="show-other">Others</label>
<p id="requestsFilters">
<button id="refreshRequests" class="fa" type="button">&#xf021;</button>
<button id="clearRequests" class="fa" type="button">&#xf12d;</button>
<label><input id="show-doc" type="checkbox" checked value="1">Pages</label>
<label><input id="show-blocked" type="checkbox" checked value="1"><span style="color:#c00" data-i18n="statsPageBlocked">Blocked</span></label>
<label><input id="show-allowed" type="checkbox" checked value="1"><span style="color:#070" data-i18n="statsPageAllowed">Allowed</span></label>
<label><input id="show-cookie" type="checkbox" checked value="1">Cookies</label>
<label><input id="show-image" type="checkbox" checked value="1">Images</label>
<label><input id="show-css" type="checkbox" checked value="1">CSS</label>
<label><input id="show-plugin" type="checkbox" checked value="1">Plugins</label>
<label><input id="show-script" type="checkbox" checked value="1">Scripts</label>
<label><input id="show-xhr" type="checkbox" checked value="1">XHRs</label>
<label><input id="show-frame" type="checkbox" checked value="1">Frames</label>
<label><input id="show-other" type="checkbox" checked value="1">Others</label>
</p>
</div>
<div id="requests-log" style="overflow-y:hidden">

View file

@ -58,6 +58,16 @@ function updateRequestData(callback) {
/******************************************************************************/
function clearRequestData() {
var request = {
what: 'clearRequestLogs',
pageURL: targetUrl !== 'all' ? targetUrl : null
};
messaging.tell(request);
}
/******************************************************************************/
function renderNumber(value) {
if ( isNaN(value) ) {
return '0';
@ -225,36 +235,48 @@ function renderRequestRow(row, request) {
cells.at(3).text(request.url);
}
/*----------------------------------------------------------------------------*/
/******************************************************************************/
var renderRequests = function() {
var onResponseReceived = function(requests) {
var table = uDom('#requestsTable');
var i, row;
var rowTemplate = table.descendants('#requestRowTemplate').first();
var renderRequests = function(requests) {
var table = uDom('#requestsTable');
var i, row;
var rowTemplate = table.descendants('#requestRowTemplate').first();
// Reuse whatever rows is already in there.
var rows = table.descendants('tr:not(.ro)');
var n = Math.min(requests.length, rows.length);
for ( i = 0; i < n; i++ ) {
renderRequestRow(rows.at(i), requests[i]);
}
// Reuse whatever rows is already in there.
var rows = table.descendants('tr:not(.ro)');
var n = Math.min(requests.length, rows.length);
for ( i = 0; i < n; i++ ) {
renderRequestRow(rows.at(i), requests[i]);
}
// Hide extra rows
rows.subset(0, i).removeClass('unused');
rows.subset(i).addClass('unused');
// Unhide reused rows
rows.subset(0, n).removeClass('unused');
// Create new rows to receive what is left
n = requests.length;
for ( ; i < n; i++ ) {
row = rowTemplate.clone();
renderRequestRow(row, requests[i]);
row.insertBefore(rowTemplate);
}
// Hide extra rows
rows.subset(n).addClass('unused');
syncWithFilters();
};
updateRequestData(onResponseReceived);
// Create new rows to receive what is left
n = requests.length;
for ( ; i < n; i++ ) {
row = rowTemplate.clone();
renderRequestRow(row, requests[i]);
row.insertBefore(rowTemplate);
}
syncWithFilters();
};
/******************************************************************************/
var updateRequests = function() {
updateRequestData(renderRequests);
};
/******************************************************************************/
var clearRequests = function() {
clearRequestData();
renderRequests([]);
};
/******************************************************************************/
@ -341,7 +363,7 @@ function renderTransientData(internal) {
function targetUrlChangeHandler() {
targetUrl = this[this.selectedIndex].value;
renderStats();
renderRequests();
updateRequests();
}
/******************************************************************************/
@ -353,7 +375,8 @@ function prepareToDie() {
/******************************************************************************/
var installEventHandlers = function() {
uDom('#refresh-requests').on('click', renderRequests);
uDom('#refreshRequests').on('click', updateRequests);
uDom('#clearRequests').on('click', clearRequests);
uDom('input[id^="show-"][type="checkbox"]').on('change', changeFilterHandler);
uDom('#selectPageUrls').on('change', targetUrlChangeHandler);
uDom('#max-logged-requests').on('change', function(){ changeValueHandler(uDom(this), 'maxLoggedRequests', 0, 999); });
@ -384,7 +407,7 @@ uDom.onLoad(function(){
messaging.ask({ what: 'getUserSettings' }, onResponseReceived);
renderTransientData(true);
renderRequests();
updateRequests();
});
/******************************************************************************/

View file

@ -545,7 +545,10 @@ var onMessage = function(request, sender, callback) {
(function() {
/******************************************************************************/
// map(pageURL) => array of request log entries
var getRequestLog = function(pageURL) {
var requestLogs = {};
var pageStores = µMatrix.pageStats;
@ -574,6 +577,22 @@ var getRequestLog = function(pageURL) {
return requestLogs;
};
/******************************************************************************/
var clearRequestLog = function(pageURL) {
var pageStores = µMatrix.pageStats;
var pageURLs = pageURL ? [pageURL] : Object.keys(pageStores);
var pageStore;
for ( var i = 0; i < pageURLs.length; i++ ) {
if ( pageStore = pageStores[pageURLs[i]] ) {
pageStore.requests.clearLogBuffer();
}
}
};
/******************************************************************************/
var onMessage = function(request, sender, callback) {
var µm = µMatrix;
@ -612,6 +631,10 @@ var onMessage = function(request, sender, callback) {
response = getRequestLog(request.pageURL);
break;
case 'clearRequestLogs':
clearRequestLog(request.pageURL);
break;
default:
return µm.messaging.defaultHandler(request, sender, callback);
}

View file

@ -348,6 +348,24 @@ PageRequestStats.prototype.resizeLogBuffer = function(size) {
/******************************************************************************/
PageRequestStats.prototype.clearLogBuffer = function() {
var buffer = this.ringBuffer;
if ( buffer === null ) {
return;
}
var logEntry;
var i = buffer.length;
while ( i-- ) {
if ( logEntry = buffer[i] ) {
logEntry.dispose();
buffer[i] = null;
}
}
this.ringBufferPointer = 0;
};
/******************************************************************************/
PageRequestStats.prototype.logRequest = function(url, type, block) {
var buffer = this.ringBuffer;
var len = buffer.length;