diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 5cc760959..a4decfb16 100644 --- a/src/css/logger-ui.css +++ b/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%; diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index c45e2dffb..78332079b 100644 --- a/src/js/logger-ui.js +++ b/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 }); } diff --git a/src/logger-ui.html b/src/logger-ui.html index 25c4cbf32..08a24d15f 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -2,6 +2,7 @@ + @@ -11,16 +12,14 @@
-
- - - - -
+ + + +
@@ -40,13 +39,20 @@
-
- - - - - -
+ + + + + + + +
+
Noteventfulblockedallowed
+
Notcss/fontimagescriptxhrframedom
+
Not1st-party3rd-party
+
+ +