diff --git a/src/css/info.css b/src/css/info.css new file mode 100644 index 00000000..11271313 --- /dev/null +++ b/src/css/info.css @@ -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; + } diff --git a/src/info.html b/src/info.html index 4dc684ca..94322b7e 100644 --- a/src/info.html +++ b/src/info.html @@ -5,66 +5,7 @@ µMatrix — Info - + @@ -142,18 +83,20 @@

-

 Show: - - - - - - - - - - - +

+ + + + + + + + + + + + +

diff --git a/src/js/info.js b/src/js/info.js index 983d0151..2bd779ee 100644 --- a/src/js/info.js +++ b/src/js/info.js @@ -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(); }); /******************************************************************************/ diff --git a/src/js/messaging-handlers.js b/src/js/messaging-handlers.js index 80763b6c..8b17450e 100644 --- a/src/js/messaging-handlers.js +++ b/src/js/messaging-handlers.js @@ -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); } diff --git a/src/js/pagestats.js b/src/js/pagestats.js index 0c29cf36..cb9ef862 100644 --- a/src/js/pagestats.js +++ b/src/js/pagestats.js @@ -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;