this fixes #31

10 years ago · 85ecc71230
5 changed files with 167 additions and 100 deletions
--- a/src/css/info.css
+++ 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;
+    }
--- a/src/info.html
+++ b/src/info.html
@ -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">
--- 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,10 +235,9 @@ function renderRequestRow(row, request) {
    cells.at(3).text(request.url);
 }

-/*----------------------------------------------------------------------------*/
+/******************************************************************************/

-var renderRequests = function() {
-    var onResponseReceived = function(requests) {
+var renderRequests = function(requests) {
    var table = uDom('#requestsTable');
    var i, row;
    var rowTemplate = table.descendants('#requestRowTemplate').first();
@ -240,9 +249,11 @@ var renderRequests = function() {
        renderRequestRow(rows.at(i), requests[i]);
    }

+    // Unhide reused rows
+    rows.subset(0, n).removeClass('unused');
+
    // Hide extra rows
-        rows.subset(0, i).removeClass('unused');
-        rows.subset(i).addClass('unused');
+    rows.subset(n).addClass('unused');

    // Create new rows to receive what is left
    n = requests.length;
@ -253,8 +264,19 @@ var renderRequests = function() {
    }

    syncWithFilters();
-    };
-    updateRequestData(onResponseReceived);
+};
+
+/******************************************************************************/
+
+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();
 });

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