external/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-10 09:07:54 +01:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Raymond Hill 2018-12-16 15:26:38 -05:00
parent ee89f88265
commit aa50dc00d2
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
3 changed files with 151 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/css/logger-ui.css
View file

@ -16,7 +16,6 @@ textarea {
width: 100%; width: 100%;
} }
.permatoolbar { .permatoolbar {
align-items: center;
background-color: white; background-color: white;
border: 0; border: 0;
box-sizing: border-box; box-sizing: border-box;
@ -50,12 +49,6 @@ textarea {
.permatoolbar .button:hover { .permatoolbar .button:hover {
background-color: #eee; background-color: #eee;
} }
.permatoolbar > div {
white-space: nowrap;
}
.permatoolbar > div > * {
vertical-align: middle;
}
#pageSelector { #pageSelector {
margin-right: 1em; margin-right: 1em;
padding: 0.25em 0; padding: 0.25em 0;
@ -111,6 +104,11 @@ textarea {
#inspectors.dom #netInspector { #inspectors.dom #netInspector {
display: none; display: none;
} }
#netInspector #filterExprGroup {
display: flex;
margin: 0 1em;
position: relative;
}
#netInspector #filterButton { #netInspector #filterButton {
opacity: 0.25; opacity: 0.25;
} }
@ -126,6 +124,59 @@ textarea {
#netInspector #maxEntries { #netInspector #maxEntries {
margin: 0 2em; 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 { #netInspector table {
border: 0; border: 0;
border-collapse: collapse; border-collapse: collapse;
@ -258,6 +309,9 @@ body #netInspector td {
position: relative; position: relative;
text-align: center; text-align: center;
} }
#netInspector tr td[data-parties]:nth-of-type(5) {
cursor: zoom-in;
}
/* visual for tabless network requests */ /* visual for tabless network requests */
#netInspector tr.tab_bts td:nth-of-type(5)::before { #netInspector tr.tab_bts td:nth-of-type(5)::before {
border: 5px solid #bbb; border: 5px solid #bbb;
@ -273,9 +327,10 @@ body #netInspector td {
z-index: -1; z-index: -1;
} }
/* visual for quick tooltip */ /* 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; background-color: #feb;
border: 1px outset #feb; border: 1px outset #feb;
border-left: 5px solid gray;
color: black; color: black;
content: attr(data-parties); content: attr(data-parties);
left: 100%; left: 100%;

79
src/js/logger-ui.js
View file

@ -260,8 +260,8 @@ var renderNetLogEntry = function(tr, details) {
} }
} }
td = tr.cells[1];
if ( filter !== undefined ) { if ( filter !== undefined ) {
td = tr.cells[1];
if ( filteringType === 'static' ) { if ( filteringType === 'static' ) {
td.textContent = filter.raw; td.textContent = filter.raw;
trcl.add('canLookup'); trcl.add('canLookup');
@ -274,8 +274,8 @@ var renderNetLogEntry = function(tr, details) {
} }
} }
td = tr.cells[2];
if ( filter !== undefined ) { if ( filter !== undefined ) {
td = tr.cells[2];
if ( filter.result === 1 ) { if ( filter.result === 1 ) {
trcl.add('blocked'); trcl.add('blocked');
td.textContent = '--'; td.textContent = '--';
@ -1406,10 +1406,12 @@ var reverseLookupManager = (function() {
/******************************************************************************/ /******************************************************************************/
const rowFilterer = (function() { const rowFilterer = (function() {
const filters = []; const userFilters = [];
const builtinFilters = [];
let filters = [];
const parseInput = function() { const parseInput = function() {
filters.length = 0; userFilters.length = 0;
const rawParts = uDom('#filterInput').val().trim().split(/\s+/); const rawParts = uDom('#filterInput').val().trim().split(/\s+/);
const n = rawParts.length; const n = rawParts.length;
@ -1457,13 +1459,14 @@ const rowFilterer = (function() {
continue; continue;
} }
reStr = reStrs.length === 1 ? reStrs[0] : reStrs.join('|'); reStr = reStrs.length === 1 ? reStrs[0] : reStrs.join('|');
filters.push({ userFilters.push({
re: new RegExp(reStr, 'i'), re: new RegExp(reStr, 'i'),
r: !not r: !not
}); });
reStrs.length = 0; reStrs.length = 0;
not = false; not = false;
} }
filters = builtinFilters.concat(userFilters);
}; };
const filterOne = function(tr, clean) { const filterOne = function(tr, clean) {
@ -1528,17 +1531,60 @@ const rowFilterer = (function() {
uDom.nodeFromId('netInspector').classList.toggle('f'); 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('#filterButton').on('click', onFilterButton);
uDom('#filterInput').on('input', onFilterChangedAsync); uDom('#filterInput').on('input', onFilterChangedAsync);
uDom('#filterExprButton').on('click', onToggleExtras);
uDom('#filterExprPicker').on('click', '[data-filtex]', onToggleBuiltinExpression);
// https://github.com/gorhill/uBlock/issues/404 // 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(); parseInput();
filterAll(); filterAll();
return { return {
filterOne: filterOne, filterOne,
filterAll: filterAll filterAll,
}; };
})(); })();
@ -1733,14 +1779,19 @@ uDom('#netInspector').on('click', 'tr.cat_net > td:nth-of-type(3)', netFiltering
pageSelectorFromURLHash(); pageSelectorFromURLHash();
window.addEventListener('hashchange', 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') ) { if ( self.location.search.includes('popup=1') ) {
window.addEventListener('load', ( ) => { window.addEventListener('load', ( ) => {
popupLoggerBox = { setTimeout(( ) => {
x: self.screenX, popupLoggerBox = {
y: self.screenY, x: self.screenX,
w: self.outerWidth, y: self.screenY,
h: self.outerHeight, w: self.outerWidth,
}; h: self.outerHeight,
};
}, 2000);
}, { once: true }); }, { once: true });
} }

40
src/logger-ui.html
View file

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <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/common.css">
<link rel="stylesheet" type="text/css" href="css/logger-ui.css"> <link rel="stylesheet" type="text/css" href="css/logger-ui.css">
<link rel="stylesheet" type="text/css" href="css/logger-ui-inspector.css"> <link rel="stylesheet" type="text/css" href="css/logger-ui-inspector.css">
@ -11,16 +12,14 @@
<body> <body>
<div class="permatoolbar"> <div class="permatoolbar">
<div> <select id="pageSelector">
<select id="pageSelector"> <option value="" data-i18n="logAll">
<option value="" data-i18n="logAll"> <option value="tab_bts" data-i18n="logBehindTheScene">
<option value="tab_bts" data-i18n="logBehindTheScene"> <option value="tab_active" data-i18n="loggerCurrentTab">
<option value="tab_active" data-i18n="loggerCurrentTab"> </select>
</select> <span id="refresh" class="button fa disabled needdom">&#xf021;</span>
<span id="refresh" class="button fa disabled needdom">&#xf021;</span> <span id="showdom" class="button fa disabled needdom">&#xf121;</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>
<span id="showpopup" class="button disabled needdom"><img src="/img/icon_64.png"></span>
</div>
</div> </div>
<div id="inspectors"> <div id="inspectors">
@ -40,13 +39,20 @@
</div> </div>
<div id="netInspector" class="inspector vCompact f"> <div id="netInspector" class="inspector vCompact f">
<div class="permatoolbar"> <div class="permatoolbar">
<div> <span class="button fa vCompactToggler"></span>
<span class="button fa vCompactToggler"></span> <span id="clean" class="button fa disabled">&#xf00d;</span>
<span id="clean" class="button fa disabled">&#xf00d;</span> <span id="clear" class="button fa disabled">&#xf12d;</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="filterButton" class="button fa">&#xf0b0;</span>
<input id="maxEntries" type="text" size="5" data-i18n-title="logMaxEntriesTip"> <input id="filterInput" type="text" placeholder="logFilterPrompt">
</div> <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>
<div class="vscrollable"> <div class="vscrollable">
<style id="tabFilterer"></style> <style id="tabFilterer"></style>