add built-in expressions to logger's row filterer (see #787)

src/css/logger-ui.css

@@ -16,7 +16,6 @@ textarea {
     width: 100%;
     }
 .permatoolbar {
-    align-items: center;
     background-color: white;
     border: 0;
     box-sizing: border-box;
@@ -50,12 +49,6 @@ textarea {
 .permatoolbar .button:hover {
     background-color: #eee;
     }
-.permatoolbar > div {
-    white-space: nowrap;
-    }
-.permatoolbar > div > * {
-    vertical-align: middle;
-    }
 #pageSelector {
     margin-right: 1em;
     padding: 0.25em 0;
@@ -111,6 +104,11 @@ textarea {
 #inspectors.dom #netInspector {
     display: none;
     }
+#netInspector #filterExprGroup {
+    display: flex;
+    margin: 0 1em;
+    position: relative;
+    }
 #netInspector #filterButton {
     opacity: 0.25;
     }
@@ -126,6 +124,59 @@ textarea {
 #netInspector #maxEntries {
     margin: 0 2em;
     }
+#netInspector #filterExprButton::before {
+    content: '\f078';
+    }
+#netInspector #filterExprButton.expanded::before {
+    content: '\f077';
+    }
+#netInspector #filterExprPicker {
+    background-color: white;
+    border: 1px solid gray;
+    display: none;
+    position: absolute;
+    flex-direction: column;
+    font-size: small;
+    margin-top: 0.2em;
+    top: 100%;
+    }
+#netInspector #filterExprButton.on {
+    color: #5F9EA0;
+    }
+#netInspector #filterExprButton.expanded ~ #filterExprPicker {
+    display: flex;
+    }
+#netInspector #filterExprPicker > div {
+    border: 1px dotted #ddd;
+    border-left: 0;
+    border-right: 0;
+    display: flex;
+    padding: 0.5em;
+    }
+#netInspector #filterExprPicker > div:first-of-type {
+    border-top: 0;
+    }
+#netInspector #filterExprPicker > div:last-of-type {
+    border-bottom: 0;
+    }
+#netInspector #filterExprPicker span[data-filtex] {
+    border: 1px solid transparent;
+    cursor: pointer;
+    margin: 0 0.5em 0 0;
+    padding: 0.5em;
+    }
+#netInspector #filterExprPicker span[data-filtex]:last-of-type {
+    margin: 0;
+    }
+#netInspector #filterExprPicker span[data-filtex]:hover {
+    background-color: aliceblue;
+    border: 1px solid lightblue;
+    }
+#netInspector #filterExprPicker span.on[data-filtex] {
+    background-color: lightblue;
+    border: 1px solid lightblue;
+    }
+
 #netInspector table {
     border: 0;
     border-collapse: collapse;
@@ -258,6 +309,9 @@ body #netInspector td {
     position: relative;
     text-align: center;
     }
+#netInspector tr td[data-parties]:nth-of-type(5) {
+    cursor: zoom-in;
+    }
 /* visual for tabless network requests */
 #netInspector tr.tab_bts td:nth-of-type(5)::before {
     border: 5px solid #bbb;
@@ -273,9 +327,10 @@ body #netInspector td {
     z-index: -1;
     }
 /* visual for quick tooltip */
-#netInspector tr td[data-parties]:nth-of-type(5):hover::after {
+#netInspector tr td[data-parties]:nth-of-type(5):active::after {
     background-color: #feb;
     border: 1px outset #feb;
+    border-left: 5px solid gray;
     color: black;
     content: attr(data-parties);
     left: 100%;

src/js/logger-ui.js

@@ -260,8 +260,8 @@ var renderNetLogEntry = function(tr, details) {
         }
     }
 
-    td = tr.cells[1];
     if ( filter !== undefined ) {
+        td = tr.cells[1];
         if ( filteringType === 'static' ) {
             td.textContent = filter.raw;
             trcl.add('canLookup');
@@ -274,8 +274,8 @@ var renderNetLogEntry = function(tr, details) {
         }
     }
 
-    td = tr.cells[2];
     if ( filter !== undefined ) {
+        td = tr.cells[2];
         if ( filter.result === 1 ) {
             trcl.add('blocked');
             td.textContent = '--';
@@ -1406,10 +1406,12 @@ var reverseLookupManager = (function() {
 /******************************************************************************/
 
 const rowFilterer = (function() {
-    const filters = [];
+    const userFilters = [];
+    const builtinFilters = [];
+    let filters = [];
 
     const parseInput = function() {
-        filters.length = 0;
+        userFilters.length = 0;
 
         const rawParts = uDom('#filterInput').val().trim().split(/\s+/);
         const n = rawParts.length;
@@ -1457,13 +1459,14 @@ const rowFilterer = (function() {
                 continue;
             }
             reStr = reStrs.length === 1 ? reStrs[0] : reStrs.join('|');
-            filters.push({
+            userFilters.push({
                 re: new RegExp(reStr, 'i'),
                 r: !not
             });
             reStrs.length = 0;
             not = false;
         }
+        filters = builtinFilters.concat(userFilters);
     };
 
     const filterOne = function(tr, clean) {
@@ -1528,17 +1531,60 @@ const rowFilterer = (function() {
         uDom.nodeFromId('netInspector').classList.toggle('f');
     };
 
+    const onToggleExtras = function(ev) {
+        ev.target.classList.toggle('expanded');
+    };
+
+    const onToggleBuiltinExpression = function(ev) {
+        builtinFilters.length = 0;
+
+        ev.target.classList.toggle('on');
+        const filtexElems = ev.currentTarget.querySelectorAll('[data-filtex]');
+        const orExprs = [];
+        let not = false;
+        for ( const filtexElem of filtexElems ) {
+            let filtex = filtexElem.getAttribute('data-filtex');
+            let active = filtexElem.classList.contains('on');
+            if ( filtex === '!' ) {
+                if ( orExprs.length !== 0 ) {
+                    builtinFilters.push({
+                        re: new RegExp(orExprs.join('|')),
+                        r: !not
+                    });
+                    orExprs.length = 0;
+                }
+                not = active;
+            } else if ( active ) {
+                orExprs.push(filtex);
+            }
+        }
+        if ( orExprs.length !== 0 ) {
+            builtinFilters.push({
+                re: new RegExp(orExprs.join('|')),
+                r: !not
+            });
+        }
+        uDom.nodeFromId('filterExprButton').classList.toggle(
+            'on',
+            builtinFilters.length !== 0
+        );
+        filters = builtinFilters.concat(userFilters);
+        filterAll();
+    };
+
     uDom('#filterButton').on('click', onFilterButton);
     uDom('#filterInput').on('input', onFilterChangedAsync);
+    uDom('#filterExprButton').on('click', onToggleExtras);
+    uDom('#filterExprPicker').on('click', '[data-filtex]', onToggleBuiltinExpression);
 
     // https://github.com/gorhill/uBlock/issues/404
-    // Ensure page state is in sync with the state of its various widgets.
+    //   Ensure page state is in sync with the state of its various widgets.
     parseInput();
     filterAll();
 
     return {
-        filterOne: filterOne,
-        filterAll: filterAll
+        filterOne,
+        filterAll,
     };
 })();
 
@@ -1733,14 +1779,19 @@ uDom('#netInspector').on('click', 'tr.cat_net > td:nth-of-type(3)', netFiltering
 pageSelectorFromURLHash();
 window.addEventListener('hashchange', pageSelectorFromURLHash);
 
+// Start to watch the current window geometry 2 seconds after the document
+// is loaded, to be sure no spurious geometry changes will be triggered due
+// to the window geometry pontentially not settling fast enough.
 if ( self.location.search.includes('popup=1') ) {
     window.addEventListener('load', ( ) => {
-        popupLoggerBox = {
-            x: self.screenX,
-            y: self.screenY,
-            w: self.outerWidth,
-            h: self.outerHeight,
-        };
+        setTimeout(( ) => {
+            popupLoggerBox = {
+                x: self.screenX,
+                y: self.screenY,
+                w: self.outerWidth,
+                h: self.outerHeight,
+            };
+        }, 2000);
     }, { once: true });
 }
 

src/logger-ui.html

@@ -2,6 +2,7 @@
 <html>
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="css/common.css">
 <link rel="stylesheet" type="text/css" href="css/logger-ui.css">
 <link rel="stylesheet" type="text/css" href="css/logger-ui-inspector.css">
@@ -11,16 +12,14 @@
 <body>
 
 <div class="permatoolbar">
-    <div>
-        <select id="pageSelector">
-            <option value="" data-i18n="logAll">
-            <option value="tab_bts" data-i18n="logBehindTheScene">
-            <option value="tab_active" data-i18n="loggerCurrentTab">
-        </select>
-        <span id="refresh" class="button fa disabled needdom">&#xf021;</span>
-        <span id="showdom" class="button fa disabled needdom">&#xf121;</span>
-        <span id="showpopup" class="button disabled needdom"><img src="/img/icon_64.png"></span>
-    </div>
+    <select id="pageSelector">
+        <option value="" data-i18n="logAll">
+        <option value="tab_bts" data-i18n="logBehindTheScene">
+        <option value="tab_active" data-i18n="loggerCurrentTab">
+    </select>
+    <span id="refresh" class="button fa disabled needdom">&#xf021;</span>
+    <span id="showdom" class="button fa disabled needdom">&#xf121;</span>
+    <span id="showpopup" class="button disabled needdom"><img src="/img/icon_64.png"></span>
 </div>
 
 <div id="inspectors">
@@ -40,13 +39,20 @@
     </div>
     <div id="netInspector" class="inspector vCompact f">
         <div class="permatoolbar">
-            <div>
-                <span class="button fa vCompactToggler"></span>
-                <span id="clean" class="button fa disabled">&#xf00d;</span>
-                <span id="clear" class="button fa disabled">&#xf12d;</span>
-                <span id="filterButton" class="button fa">&#xf0b0;</span><input id="filterInput" type="text" placeholder="logFilterPrompt">
-                <input id="maxEntries" type="text" size="5" data-i18n-title="logMaxEntriesTip">
-            </div>
+            <span class="button fa vCompactToggler"></span>
+            <span id="clean" class="button fa disabled">&#xf00d;</span>
+            <span id="clear" class="button fa disabled">&#xf12d;</span>
+            <span id="filterExprGroup">
+                <span id="filterButton" class="button fa">&#xf0b0;</span>
+                <input id="filterInput" type="text" placeholder="logFilterPrompt">
+                <span id="filterExprButton" class="button fa"></span>
+                <div id="filterExprPicker">
+                    <div><span data-filtex="!">Not</span><span data-filtex="^--$|^\+\+$|^\*\*$|^<<$|^##|^#@#">eventful</span><span data-filtex="^--$|^<<$|^##">blocked</span><span data-filtex="^\+\+$|^#@#">allowed</span></div>
+                    <div><span data-filtex="!">Not</span><span data-filtex="^(?:css|font)$">css/font</span><span data-filtex="^image$">image</span><span data-filtex="^(?:inline-)?script$">script</span><span data-filtex="^(?:websocket|xhr)$">xhr</span><span data-filtex="^frame$">frame</span><span data-filtex="^dom$">dom</span></div>
+                    <div><span data-filtex="!">Not</span><span data-filtex="^1$">1st-party</span><span data-filtex="^3(?:,\d)?$">3rd-party</span></div>
+                </div>
+            </span>
+            <input id="maxEntries" type="text" size="5" data-i18n-title="logMaxEntriesTip">
         </div>
         <div class="vscrollable">
             <style id="tabFilterer"></style>