1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-07 03:12:33 +01:00

request log filtering: early draft

This commit is contained in:
gorhill 2015-03-02 19:48:28 -05:00
parent 82c0342f23
commit 8b1ecfc09c
3 changed files with 130 additions and 18 deletions

View File

@ -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;

View File

@ -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>

View File

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