request log filtering: early draft

src/css/devtool-log.css

@@ -10,32 +10,35 @@ body {
     width: 100%;
     }
 #toolbar {
-    padding: 8px 0;
+    background-color: white;
+    border: 0;
+    box-sizing: border-box;
+    height: 36px;
+    margin: 0;
+    padding: 0;
     position: fixed;
     text-align: center;
     top: 0;
-    width: 4em;
+    width: 100%;
     }
 #toolbar .button {
     background-color: white;
     border: none;
+    box-sizing: border-box;
     cursor: pointer;
-    display: block;
-    font-size: large;
+    display: inline-block;
+    font-size: 20px;
     margin: 0;
-    padding: 0.5em 0;
+    padding: 8px;
     }
 #toolbar .button:hover {
     background-color: #eee;
     }
+#toolbar #filterButton.off {
+    opacity: 0.25;
+    }
 #content {
-    width: calc(100% - 4em);
-    }
-body[dir="ltr"] #content {
-    margin-left: 4em;
-    }
-body[dir="rtl"] #content {
-    margin-right: 4em;
+    margin-top: 36px;
     }
 #content table {
     border: 0;
@@ -55,6 +58,9 @@ body[dir="rtl"] #content {
 #content table tr.maindoc {
     background-color: #eee;
     }
+#content table tr.hidden {
+    display: none;
+    }
 #content table tr td {
     border: 1px solid #ccc;
     padding: 3px;
@@ -63,6 +69,7 @@ body[dir="rtl"] #content {
 #content table tr td:nth-of-type(1) {
     padding: 3px 0;
     text-align: center;
+    white-space: pre;
     }
 #content table tr td:nth-of-type(2) {
     white-space: normal;

src/devtool-log.html

@@ -10,7 +10,9 @@
 <div id="toolbar">
     <span id="reload" class="button fa">&#xf021;</span>
     <span id="clear" class="button fa">&#xf12d;</span>
-    </div><!-- DO NOT REMOVE --><div id="content">
+    <span id="filterButton" class="button fa">&#xf0b0;</span><input id="filterExpression" type="text">
+    </div>
+<div id="content">
     <table><tbody></tbody></table>
     </div>
 <script src="js/vapi-common.js"></script>

src/js/devtool-log.js

@@ -36,6 +36,7 @@ var doc = document;
 var body = doc.body;
 var tbody = doc.querySelector('#content tbody');
 var rowJunkyard = [];
+var reFilter = null;
 
 /******************************************************************************/
 
@@ -101,15 +102,15 @@ var renderLogEntry = function(entry) {
     var tr = createRow();
     if ( entry.result.charAt(1) === 'b' ) {
         tr.classList.add('blocked');
-        tr.cells[0].textContent = '\u2009\u2212\u2009';
+        tr.cells[0].textContent = ' \u2212\u00A0';
     } else if ( entry.result.charAt(1) === 'a' ) {
         tr.classList.add('allowed');
         if ( entry.result.charAt(0) === 'm' ) {
             tr.classList.add('mirrored');
         }
-        tr.cells[0].textContent = '\u2009+\u2009';
+        tr.cells[0].textContent = ' +\u00A0';
     } else {
-        tr.cells[0].textContent = '\u2009\u00A0\u2009';
+        tr.cells[0].textContent = '   ';
     }
     if ( entry.type === 'main_frame' ) {
         tr.classList.add('maindoc');
@@ -118,9 +119,10 @@ var renderLogEntry = function(entry) {
     if ( entry.result.lastIndexOf('sa', 0) === 0 ) {
         filterText = '@@' + filterText;
     }
-    tr.cells[1].textContent = filterText;
-    tr.cells[2].textContent = entry.type;
+    tr.cells[1].textContent = filterText + ' ';
+    tr.cells[2].textContent = entry.type + ' ';
     vAPI.insertHTML(tr.cells[3], renderURL(entry.url, entry.result));
+    applyFilterToRow(tr);
     tbody.insertBefore(tr, tbody.firstChild);
 };
 
@@ -196,6 +198,105 @@ var reloadTab = function() {
 
 /******************************************************************************/
 
+var applyFilterToRow = function(row) {
+    var re = reFilter;
+    if ( re === null || re.test(row.textContent) ) {
+        row.classList.remove('hidden');
+    } else {
+        row.classList.add('hidden');
+    }
+};
+
+/******************************************************************************/
+
+var applyFilter = function() {
+    if ( reFilter === null ) {
+        unapplyFilter();
+        return;
+    }
+    var row = document.querySelector('#content tr');
+    if ( row === null ) {
+        return;
+    }
+    var re = reFilter;
+    while ( row !== null ) {
+        if ( re.test(row.textContent) ) {
+            row.classList.remove('hidden');
+        } else {
+            row.classList.add('hidden');
+        }
+        row = row.nextSibling;
+    }
+};
+
+/******************************************************************************/
+
+var unapplyFilter = function() {
+    var row = document.querySelector('#content tr');
+    if ( row === null ) {
+        return;
+    }
+    while ( row !== null ) {
+        row.classList.remove('hidden');
+        row = row.nextSibling;
+    }
+};
+
+/******************************************************************************/
+
+var onFilterButton = function() {
+    uDom('#filterButton').toggleClass('off');
+    onFilterChanged();
+};
+
+/******************************************************************************/
+
+var onFilterChanged = function() {
+    var filterRaw = uDom('#filterButton').hasClass('off') ?
+            '' :
+            uDom('#filterExpression').val().trim();
+
+    if ( filterRaw === '') {
+        reFilter = null;
+        unapplyFilter();
+        return;
+    }
+
+    var filterParts = filterRaw
+                        .replace(/^\s*-(\s+|$)/, '−\xA0')
+                        .replace(/^\s*\\+(\s+|$)/, '\\+\xA0')
+                        .split(/\s+/);
+    var n = filterParts.length;
+    for ( var i = 0; i < n; i++ ) {
+        filterParts[i] = filterParts[i].replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    reFilter = new RegExp(filterParts.join('.*\\s+.*'));
+
+    applyFilter();
+};
+
+/******************************************************************************/
+
+var onFilterChangedAsync = (function() {
+    var timer = null;
+
+    var commit = function() {
+        timer = null;
+        onFilterChanged();
+    };
+
+    var changed = function() {
+        if ( timer !== null ) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(commit, 750);
+    };
+
+    return changed;
+})();
+
+/******************************************************************************/
+
 uDom.onLoad(function() {
     // Extract the tab id of the page we need to pull the log
     var matches = window.location.search.match(/[\?&]tabId=([^&]+)/);
@@ -207,6 +308,8 @@ uDom.onLoad(function() {
 
     uDom('#reload').on('click', reloadTab);
     uDom('#clear').on('click', clearBuffer);
+    uDom('#filterButton').on('click', onFilterButton);
+    uDom('#filterExpression').on('input', onFilterChangedAsync);
 });
 
 /******************************************************************************/