Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-10-06 09:37:12 +02:00
Code Issues Releases Wiki Activity

logger: UI work on URL-based dynamic filtering

Browse Source
This commit is contained in:
gorhill 2015-05-24 18:50:09 -04:00
parent c265d6747b
commit 72c930ddff
15 changed files with 428 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
platform/chromium/vapi-background.js
View File

@ -392,6 +392,27 @@ vAPI.tabs.reload = function(tabId /*, flags*/) {
/******************************************************************************/ /******************************************************************************/
// Select a specific tab.
vAPI.tabs.select = function(tabId) {
tabId = toChromiumTabId(tabId);
if ( tabId === 0 ) {
return;
}
chrome.tabs.update(tabId, { active: true }, function(tab) {
if ( chrome.runtime.lastError ) {
/* noop */
}
if ( !tab ) {
return;
}
chrome.windows.update(tab.windowId, { focused: true });
});
};
/******************************************************************************/
vAPI.tabs.injectScript = function(tabId, details, callback) { vAPI.tabs.injectScript = function(tabId, details, callback) {
var onScriptExecuted = function() { var onScriptExecuted = function() {
// https://code.google.com/p/chromium/issues/detail?id=410868#c8 // https://code.google.com/p/chromium/issues/detail?id=410868#c8

2
src/css/common.css
View File

@ -10,7 +10,7 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
vertical-align: baseline; vertical-align: middle;
} }
body { body {
background-color: white; background-color: white;

244
src/css/logger-ui.css
View File

@ -91,10 +91,10 @@ input:focus {
width: 2.5em; width: 2.5em;
} }
#content table > colgroup > col:nth-of-type(3) { #content table > colgroup > col:nth-of-type(3) {
width: 2.5em; width: 20%;
} }
#content table > colgroup > col:nth-of-type(4) { #content table > colgroup > col:nth-of-type(4) {
width: 20%; width: 2.5em;
} }
#content table > colgroup > col:nth-of-type(5) { #content table > colgroup > col:nth-of-type(5) {
width: 6em; width: 6em;
@ -102,7 +102,7 @@ input:focus {
#content table > colgroup > col:nth-of-type(6) { #content table > colgroup > col:nth-of-type(6) {
width: calc(100% - 16em - 20%); width: calc(100% - 16em - 20%);
} }
body.f table tr.f { body.f #content table tr.f {
display: none; display: none;
} }
@ -115,6 +115,12 @@ body.f table tr.f {
body.colorBlind #content tr.blocked { body.colorBlind #content tr.blocked {
background-color: rgba(0, 19, 110, 0.1); background-color: rgba(0, 19, 110, 0.1);
} }
#content tr.nooped {
background-color: rgba(108, 108, 108, 0.1);
}
body.colorBlind #content tr.nooped {
background-color: rgba(96, 96, 96, 0.1);
}
#content tr.allowed { #content tr.allowed {
background-color: rgba(0, 160, 0, 0.1); background-color: rgba(0, 160, 0, 0.1);
} }
@ -183,17 +189,17 @@ body:not(.popupOn) #content tr.canMtx td:nth-of-type(2) {
body:not(.popupOn) #content tr.canMtx td:nth-of-type(2):hover { body:not(.popupOn) #content tr.canMtx td:nth-of-type(2):hover {
background: #ccc; background: #ccc;
} }
#content tr.cat_net td:nth-of-type(3), #content tr.cat_net td:nth-of-type(4),
#content tr.cat_cosmetic td:nth-of-type(3) { #content tr.cat_cosmetic td:nth-of-type(4) {
font: 12px monospace; font: 12px monospace;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
} }
#content tr.cat_net td:nth-of-type(3) { #content tr.cat_net td:nth-of-type(4) {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
#content tr.cat_net td:nth-of-type(3):hover { #content tr.cat_net td:nth-of-type(4):hover {
background: #ccc; background: #ccc;
} }
#content tr.cat_net td:nth-of-type(6) > span > b { #content tr.cat_net td:nth-of-type(6) > span > b {
@ -208,6 +214,12 @@ body:not(.popupOn) #content tr.canMtx td:nth-of-type(2):hover {
body.colorBlind #content tr.blocked td:nth-of-type(6) b { body.colorBlind #content tr.blocked td:nth-of-type(6) b {
background-color: rgba(0, 19, 110, 0.2); background-color: rgba(0, 19, 110, 0.2);
} }
#content tr.nooped td:nth-of-type(6) b {
background-color: rgba(108, 108, 108, 0.2);
}
body.colorBlind #content tr.nooped td:nth-of-type(6) b {
background-color: rgba(96, 96, 96, 0.2);
}
#content tr.allowed td:nth-of-type(6) b { #content tr.allowed td:nth-of-type(6) b {
background-color: rgba(0, 160, 0, 0.2); background-color: rgba(0, 160, 0, 0.2);
} }
@ -272,107 +284,125 @@ body[dir="rtl"] #popupContainer > div {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 100; z-index: 400;
} }
#urlFilteringMenu .dialog { #urlFilteringMenu .dialog {
background-color: white; background-color: white;
border: 1px solid gray; border: 2px solid white;
max-width: 70%; left: 10%;
padding: 0.2em; position: absolute;
position: fixed; top: 50%;
transform: translate(0, -50%);
transform-style: preserve-3d;
width: 80%;
} }
#urlFilteringMenu .dialog > div:first-child { #urlFilteringMenu .dialog table {
padding: 0.2em 0.2em 0.4em 0.2em; border: 0;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
} }
#urlFilteringMenu .dialog > div:first-child > * { #urlFilteringMenu .dialog table > colgroup > col:nth-of-type(1) {
display: inline-block; width: 3.8em;
}
#urlFilteringMenu .dialog table > colgroup > col:nth-of-type(2) {
}
#urlFilteringMenu .dialog td {
border: 0;
vertical-align: middle; vertical-align: middle;
} }
#urlFilteringMenu .save { #urlFilteringMenu .dialog > table.toolbar td.preview {
/* http://lea.verou.me/css3patterns/ */
background-color: #aaa;
background-image:
linear-gradient(
45deg,
#666 25%,
transparent 25%,
transparent 75%,
#666 75%,
#666
),
linear-gradient(
45deg,
#666 25%,
transparent 25%,
transparent 75%,
#666 75%,
#666
);
background-position:0 0, 9px 9px;
background-size: 18px 18px;
text-align: center;
}
#urlFilteringMenu .dialog > table.toolbar td.preview > * {
max-width: 100%;
max-height: 40vh;
}
#urlFilteringMenu .dialog > table.toolbar select {
font: 14px;
height: 1.8em;
}
#urlFilteringMenu .dialog > table.toolbar .fa {
cursor: pointer;
font-size: 1.2em;
text-align: center;
}
#urlFilteringMenu .dialog > table.toolbar .fa.save {
background-color: #ffe; background-color: #ffe;
border: 1px solid #ddc; border: 1px solid #ddc;
border-radius: 4px; border-radius: 4px;
color: #888; color: #888;
cursor: pointer;
font-size: 1.8em; font-size: 1.8em;
margin-right: 0.1em; margin: 0.1em;
padding: 0.1em 0.5em; padding: 0.25em 0.5em;
visibility: hidden; visibility: hidden;
} }
body.dirty #urlFilteringMenu .save { body.dirty #urlFilteringMenu .dialog > table.toolbar .fa.save {
visibility: visible; visibility: visible;
} }
#urlFilteringMenu .save:hover { #urlFilteringMenu .dialog > table.toolbar .fa.save:hover {
color: black; color: black;
} }
#urlFilteringMenu select { #urlFilteringMenu .dialog > table.toolbar tr.entry {
font: inherit; display: none;
} }
#urlFilteringMenu .entries { #urlFilteringMenu .dialog > div.entries {
font-size: 13px; max-height: 30vh;
max-height: 12em; overflow: hidden;
overflow-y: auto; overflow-y: auto;
} }
#urlFilteringMenu .entries > div { #urlFilteringMenu .dialog > div.header {
background-color: #666;
color: white;
font-size: smaller;
padding: 2px;
text-align: center;
}
#urlFilteringMenu .dialog > div.entries tr.entry {
background-color: #e6e6e6; background-color: #e6e6e6;
border: 0; border: 0;
line-height: 2em; border-bottom: 1px solid white;
margin: 0; font-size: 13px;
margin-top: 1px;
overflow: hidden;
padding: 0;
white-space: nowrap;
width: 100%;
} }
#urlFilteringMenu .entries > div:first-child { #urlFilteringMenu .dialog > div.entries tr.entry:hover {
margin-top: 0;
}
#urlFilteringMenu .entries > div:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
#urlFilteringMenu .entries > div > .action { #urlFilteringMenu .dialog > div.entries tr.entry > td:first-of-type {
background-color: transparent;
border: 0; border: 0;
border-right: 1px solid white; border-right: 1px solid white;
padding: 0;
text-align: center;
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action {
background-color: transparent;
border: 0;
cursor: pointer; cursor: pointer;
display: inline-block; height: 2em;
height: 100%; width: 100%;
width: 3.8em;
} }
#urlFilteringMenu .entries > div > .action.allow { #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span {
background-color: rgba(0, 160, 0, 0.3);
}
body.colorBlind #urlFilteringMenu .entries > div > .action.allow {
background-color: rgba(255, 194, 57, 0.4);
}
#urlFilteringMenu .entries > div > .action.noop {
background-color: rgba(108, 108, 108, 0.3);
}
body.colorBlind #urlFilteringMenu .entries > div > .action.noop {
background-color: rgba(96, 96, 96, 0.4);
}
#urlFilteringMenu .entries > div > .action.block {
background-color: rgba(192, 0, 0, 0.3);
}
body.colorBlind #urlFilteringMenu .entries > div > .action.block {
background-color: rgba(0, 19, 110, 0.4);
}
#urlFilteringMenu .entries > div > .action.allow.own {
background-color: rgba(0, 160, 0, 1);
}
body.colorBlind #urlFilteringMenu .entries > div > .action.allow.own {
background-color: rgba(255, 194, 57, 1);
}
#urlFilteringMenu .entries > div > .action.noop.own {
background-color: rgba(108, 108, 108, 1);
}
#urlFilteringMenu .entries > div > .action.block.own {
background-color: rgba(192, 0, 0, 1);
}
body.colorBlind #urlFilteringMenu .entries > div > .action.block.own {
background-color: rgba(0, 19, 110, 1);
}
#urlFilteringMenu .entries > div > .action > span {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
display: inline-block; display: inline-block;
@ -381,31 +411,67 @@ body.colorBlind #urlFilteringMenu .entries > div > .action.block.own {
visibility: hidden; visibility: hidden;
width: 33.33%; width: 33.33%;
} }
#urlFilteringMenu .entries > div > .action > span:before { #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.allow {
content: '\00A0'; background-color: rgba(0, 160, 0, 0.3);
} }
#urlFilteringMenu .entries > div > .action:not(.own):hover > span { body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.allow {
background-color: rgba(255, 194, 57, 0.4);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.noop {
background-color: rgba(108, 108, 108, 0.3);
}
body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.noop {
background-color: rgba(96, 96, 96, 0.4);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.block {
background-color: rgba(192, 0, 0, 0.3);
}
body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.block {
background-color: rgba(0, 19, 110, 0.4);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.own.allow {
background-color: rgba(0, 160, 0, 1);
}
body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.own.allow {
background-color: rgba(255, 194, 57, 1);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.own.noop {
background-color: rgba(108, 108, 108, 1);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.own.block {
background-color: rgba(192, 0, 0, 1);
}
body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.own.block {
background-color: rgba(0, 19, 110, 1);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action:not(.own):hover > span {
opacity: 0.2; opacity: 0.2;
visibility: visible; visibility: visible;
} }
#urlFilteringMenu .entries > div > .action:not(.own):hover > span:hover { #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action:not(.own):hover > span:hover {
opacity: 0.75; opacity: 0.75;
} }
#urlFilteringMenu .entries > div > .action > .allow { #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.allow {
background-color: rgb(0, 160, 0); background-color: rgb(0, 160, 0);
} }
body.colorBlind #urlFilteringMenu .entries > div > .action > .allow { body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.allow {
background-color: rgb(255, 194, 57); background-color: rgb(255, 194, 57);
} }
#urlFilteringMenu .entries > div > .action > .noop { #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.noop {
background-color: rgb(108, 108, 108); background-color: rgb(108, 108, 108);
} }
#urlFilteringMenu .entries > div > .action > .block { #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.block {
background-color: rgb(192, 0, 0); background-color: rgb(192, 0, 0);
} }
body.colorBlind #urlFilteringMenu .entries > div > .action > .block { body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.block {
background-color: rgb(0, 19, 110); background-color: rgb(0, 19, 110);
} }
#urlFilteringMenu .entries > div > .url { #urlFilteringMenu .dialog > div.entries tr.entry > td.url {
padding: 0 0.25em; overflow: hidden;
padding-left: 4px;
text-overflow: ellipsis;
white-space: nowrap;
}
.hide {
display: none;
} }

5
src/js/background.js
View File

@ -144,13 +144,14 @@ return {
noopFunc: function(){}, noopFunc: function(){},
apiErrorCount: 0, apiErrorCount: 0,
contextMenuTarget: '',
contextMenuClientX: -1, contextMenuClientX: -1,
contextMenuClientY: -1, contextMenuClientY: -1,
epickerTarget: '', epickerTarget: '',
epickerEprom: null, epickerEprom: null,
scriptlets: {
},
// so that I don't have to care for last comma // so that I don't have to care for last comma
dummy: 0 dummy: 0
}; };

132
src/js/logger-ui.js
View File

@ -92,6 +92,16 @@ var classNameFromTabId = function(tabId) {
/******************************************************************************/ /******************************************************************************/
var tabIdFromClassName = function(className) {
var matches = className.match(/(?:^| )tab_([^ ]+)(?: |$)/);
if ( matches === null ) {
return '';
}
return matches[1];
};
/******************************************************************************/
var retextFromStaticFilteringResult = function(result) { var retextFromStaticFilteringResult = function(result) {
var retext = result.slice(3); var retext = result.slice(3);
var pos = retext.indexOf('$'); var pos = retext.indexOf('$');
@ -267,23 +277,26 @@ var renderNetLogEntry = function(tr, entry) {
tr.classList.add(filterCat.slice(0, 2)); tr.classList.add(filterCat.slice(0, 2));
} }
td = tr.cells[2]; var filterText = filter.slice(3);
if ( filter.lastIndexOf('sa', 0) === 0 ) {
filterText = '@@' + filterText;
}
tr.cells[2].textContent = filterText;
td = tr.cells[3];
if ( filter.charAt(1) === 'b' ) { if ( filter.charAt(1) === 'b' ) {
tr.classList.add('blocked'); tr.classList.add('blocked');
td.textContent = '--'; td.textContent = '--';
} else if ( filter.charAt(1) === 'a' ) { } else if ( filter.charAt(1) === 'a' ) {
tr.classList.add('allowed'); tr.classList.add('allowed');
td.textContent = '++'; td.textContent = '++';
} else if ( filter.charAt(1) === 'n' ) {
tr.classList.add('nooped');
td.textContent = '**';
} else { } else {
td.textContent = ''; td.textContent = '';
} }
var filterText = filter.slice(3);
if ( filter.lastIndexOf('sa', 0) === 0 ) {
filterText = '@@' + filterText;
}
tr.cells[3].textContent = filterText;
tr.cells[4].textContent = (prettyRequestTypes[type] || type); tr.cells[4].textContent = (prettyRequestTypes[type] || type);
tr.cells[5].appendChild(nodeFromURL(url, filter)); tr.cells[5].appendChild(nodeFromURL(url, filter));
}; };
@ -540,14 +553,11 @@ var pageSelectorChanged = function() {
var reloadTab = function() { var reloadTab = function() {
var tabClass = document.getElementById('pageSelector').value; var tabClass = document.getElementById('pageSelector').value;
var matches = tabClass.match(/^tab_(.+)$/); var tabId = tabIdFromClassName(tabClass);
if ( matches === null ) { if ( tabId === 'bts' || tabId === '' ) {
return; return;
} }
if ( matches[1] === 'bts' ) { messager.send({ what: 'reloadTab', tabId: tabId });
return;
}
messager.send({ what: 'reloadTab', tabId: matches[1] });
}; };
/******************************************************************************/ /******************************************************************************/
@ -577,11 +587,11 @@ var onMaxEntriesChanged = function() {
var urlFilteringMenu = (function() { var urlFilteringMenu = (function() {
var menu = document.querySelector('#urlFilteringMenu'); var menu = document.querySelector('#urlFilteringMenu');
var menuDialog = menu.querySelector('.dialog'); var dialog = menu.querySelector('.dialog');
var selectContext = menuDialog.querySelector('.context'); var selectContext = dialog.querySelector('.context');
var selectType = menuDialog.querySelector('.type'); var selectType = dialog.querySelector('.type');
var menuEntries = menu.querySelector('.entries');
var menuURLs = []; var menuURLs = [];
var tabId = '';
var removeAllChildren = function(node) { var removeAllChildren = function(node) {
while ( node.firstChild ) { while ( node.firstChild ) {
@ -603,7 +613,7 @@ var urlFilteringMenu = (function() {
continue; continue;
} }
colorEntry = colorEntries[url]; colorEntry = colorEntries[url];
node = menu.querySelector('.entries [data-url="' + url + '"]'); node = menu.querySelector('.entry .action[data-url="' + url + '"]');
if ( node === null ) { if ( node === null ) {
continue; continue;
} }
@ -698,6 +708,45 @@ var urlFilteringMenu = (function() {
}, colorize); }, colorize);
return; return;
} }
// Force a reload of the tab
if ( target.classList.contains('reload') ) {
messager.send({
what: 'reloadTab',
tabId: tabId
});
return;
}
// Hightlight corresponding element in target web page
if ( target.classList.contains('picker') ) {
messager.send({
what: 'launchElementPicker',
tabId: tabId,
targetURL: 'img\t' + menuURLs[0],
select: true
});
return;
}
};
// Enable interactive tools if resource was not blocked
var createPreviewIf = function(type, url) {
var preview = null;
if ( type === 'image' ) {
preview = document.createElement('img');
preview.setAttribute('src', url);
}
// More...
var container = dialog.querySelector('table.toolbar td.preview');
container.classList.toggle('hide', preview === null);
if ( preview === null ) {
return;
}
container.appendChild(preview);
}; };
var toggleOn = function(ev) { var toggleOn = function(ev) {
@ -715,6 +764,8 @@ var urlFilteringMenu = (function() {
return; return;
} }
tabId = tabIdFromClassName(tr.className);
var pos, option; var pos, option;
// Fill context selector // Fill context selector
@ -747,9 +798,14 @@ var urlFilteringMenu = (function() {
return; return;
} }
uDom(dialog).descendants('.picker').toggleClass(
'hide',
type !== 'image' || /(?:^| )[dlsu]b(?: |$)/.test(tr.className)
);
// Shortest URL which for a valid URL filtering rule // Shortest URL which for a valid URL filtering rule
var candidateRootURL = matches[1] + matches[2]; var candidateRootURL = matches[1] + matches[2];
menuURLs.push(candidateRootURL); menuURLs.unshift(candidateRootURL);
var candidatePath = matches[3] || ''; var candidatePath = matches[3] || '';
pos = candidatePath.charAt(0) === '/' ? 1 : 0; pos = candidatePath.charAt(0) === '/' ? 1 : 0;
while ( pos < candidatePath.length ) { while ( pos < candidatePath.length ) {
@ -757,34 +813,33 @@ var urlFilteringMenu = (function() {
if ( pos === -1 ) { if ( pos === -1 ) {
pos = candidatePath.length; pos = candidatePath.length;
} }
menuURLs.push(candidateRootURL + candidatePath.slice(0, pos)); menuURLs.unshift(candidateRootURL + candidatePath.slice(0, pos));
} }
var candidateQuery = matches[4] || ''; var candidateQuery = matches[4] || '';
if ( candidateQuery !== '') { if ( candidateQuery !== '') {
menuURLs.push(candidateRootURL + candidatePath + candidateQuery); menuURLs.unshift(candidateRootURL + candidatePath + candidateQuery);
} }
// Create preview whenever possible
createPreviewIf(type, menuURLs[0]);
// Fill menu // Fill menu
var menuEntryTemplate = document.querySelector('#templates .urlFilteringMenuEntry'); var menuEntryTemplate = dialog.querySelector('table.toolbar tr.entry');
var tbody = dialog.querySelector('div.entries tbody');
// Adding URL filtering rules // Adding URL filtering rules
var i = menuURLs.length;
var url, menuEntry; var url, menuEntry;
while ( i-- ) { for ( var i = 0; i < menuURLs.length; i++ ) {
url = menuURLs[i]; url = menuURLs[i];
menuEntry = menuEntryTemplate.cloneNode(true); menuEntry = menuEntryTemplate.cloneNode(true);
menuEntry.children[0].setAttribute('data-url', url); menuEntry.cells[0].children[0].setAttribute('data-url', url);
menuEntry.children[1].textContent = url; menuEntry.cells[1].textContent = url;
menuEntries.appendChild(menuEntry); tbody.appendChild(menuEntry);
} }
colorize(); colorize();
var rect = td.getBoundingClientRect();
menuDialog.style.setProperty('left', rect.left + 'px');
menuDialog.style.setProperty('top', rect.bottom + 'px');
document.body.appendChild(menu); document.body.appendChild(menu);
menu.addEventListener('click', onClick, true); menu.addEventListener('click', onClick, true);
selectContext.addEventListener('change', colorize); selectContext.addEventListener('change', colorize);
selectType.addEventListener('change', colorize); selectType.addEventListener('change', colorize);
@ -794,7 +849,8 @@ var urlFilteringMenu = (function() {
if ( menu.parentNode === null ) { if ( menu.parentNode === null ) {
return; return;
} }
removeAllChildren(menuEntries); uDom('table.toolbar td.preview > *').remove();
uDom(dialog).descendants('div.entries tr').remove();
selectContext.removeEventListener('change', colorize); selectContext.removeEventListener('change', colorize);
selectType.removeEventListener('change', colorize); selectType.removeEventListener('change', colorize);
menu.removeEventListener('click', onClick, true); menu.removeEventListener('click', onClick, true);
@ -845,8 +901,7 @@ var rowFilterer = (function() {
continue; continue;
} }
// https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions // https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions
reStr = rawPart.replace(/[.+?^${}()|[\]\\]/g, '\\$&') reStr = rawPart.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
.replace(/\*/g, '.*');
if ( hardBeg ) { if ( hardBeg ) {
reStr = '(?:^|\\s)' + reStr; reStr = '(?:^|\\s)' + reStr;
} }
@ -1003,7 +1058,7 @@ var popupManager = (function() {
var popupObserver = null; var popupObserver = null;
var style = null; var style = null;
var styleTemplate = [ var styleTemplate = [
'tr:not(.tab_{{tabId}}) {', '#content tr:not(.tab_{{tabId}}) {',
'cursor: not-allowed;', 'cursor: not-allowed;',
'opacity: 0.2;', 'opacity: 0.2;',
'}' '}'
@ -1036,11 +1091,10 @@ var popupManager = (function() {
var toggleOn = function(td) { var toggleOn = function(td) {
var tr = td.parentNode; var tr = td.parentNode;
var matches = tr.className.match(/(?:^| )tab_([^ ]+)/); realTabId = localTabId = tabIdFromClassName(tr.className);
if ( matches === null ) { if ( realTabId === '' ) {
return; return;
} }
realTabId = localTabId = matches[1];
if ( localTabId === 'bts' ) { if ( localTabId === 'bts' ) {
realTabId = noTabId; realTabId = noTabId;
} }
@ -1115,7 +1169,7 @@ uDom.onLoad(function() {
uDom('#clear').on('click', clearBuffer); uDom('#clear').on('click', clearBuffer);
uDom('#maxEntries').on('change', onMaxEntriesChanged); uDom('#maxEntries').on('change', onMaxEntriesChanged);
uDom('#content table').on('click', 'tr.canMtx > td:nth-of-type(2)', popupManager.toggleOn); uDom('#content table').on('click', 'tr.canMtx > td:nth-of-type(2)', popupManager.toggleOn);
uDom('#content').on('click', 'tr.cat_net > td:nth-of-type(3)', urlFilteringMenu.toggleOn); uDom('#content').on('click', 'tr.cat_net > td:nth-of-type(4)', urlFilteringMenu.toggleOn);
}); });
/******************************************************************************/ /******************************************************************************/

175
src/js/messaging.js
View File

@ -83,10 +83,20 @@ var onMessage = function(request, sender, callback) {
response = µb.userSettings; response = µb.userSettings;
break; break;
case 'launchElementPicker':
// Launched from some auxiliary pages, clear context menu coords.
µb.contextMenuClientX = µb.contextMenuClientY = -1;
µb.elementPickerExec(request.tabId, request.targetURL);
break;
case 'gotoURL': case 'gotoURL':
vAPI.tabs.open(request.details); vAPI.tabs.open(request.details);
break; break;
case 'scriptletGotoImageURL':
µb.scriptletGotoImageURL(request);
break;
case 'reloadTab': case 'reloadTab':
if ( vAPI.isBehindTheSceneTabId(request.tabId) === false ) { if ( vAPI.isBehindTheSceneTabId(request.tabId) === false ) {
vAPI.tabs.reload(request.tabId); vAPI.tabs.reload(request.tabId);
@ -322,16 +332,6 @@ var onMessage = function(request, sender, callback) {
var response; var response;
switch ( request.what ) { switch ( request.what ) {
case 'gotoPick':
// Picker launched from popup: clear context menu args
µb.contextMenuClientX = -1;
µb.contextMenuClientY = -1;
µb.elementPickerExec(request.tabId);
if ( request.select && vAPI.tabs.select ) {
vAPI.tabs.select(request.tabId);
}
break;
case 'hasPopupContentChanged': case 'hasPopupContentChanged':
pageStore = µb.pageStoreFromTabId(request.tabId); pageStore = µb.pageStoreFromTabId(request.tabId);
var lastModified = pageStore ? pageStore.contentLastModified : 0; var lastModified = pageStore ? pageStore.contentLastModified : 0;
@ -542,80 +542,6 @@ vAPI.messaging.listen('contentscript-end.js', onMessage);
/******************************************************************************/ /******************************************************************************/
/******************************************************************************/ /******************************************************************************/
// cosmetic-*.js
(function() {
'use strict';
/******************************************************************************/
var µb = µBlock;
/******************************************************************************/
var logCosmeticFilters = function(tabId, details) {
if ( µb.logger.isEnabled() === false ) {
return;
}
var selectors = details.matchedSelectors;
selectors.sort();
for ( var i = 0; i < selectors.length; i++ ) {
µb.logger.writeOne(
tabId,
'cosmetic',
'cb:##' + selectors[i],
'dom',
details.pageURL
);
}
};
/******************************************************************************/
var onMessage = function(request, sender, callback) {
// Async
switch ( request.what ) {
default:
break;
}
// Sync
var response;
var tabId = sender && sender.tab ? sender.tab.id : 0;
switch ( request.what ) {
case 'liveCosmeticFilteringData':
var pageStore = µb.pageStoreFromTabId(tabId);
if ( pageStore ) {
pageStore.hiddenElementCount = request.filteredElementCount;
}
break;
case 'logCosmeticFilteringData':
logCosmeticFilters(tabId, request);
break;
default:
return vAPI.messaging.UNHANDLED;
}
callback(response);
};
vAPI.messaging.listen('cosmetic-*.js', onMessage);
/******************************************************************************/
})();
/******************************************************************************/
/******************************************************************************/
// element-picker.js // element-picker.js
(function() { (function() {
@ -654,13 +580,13 @@ var onMessage = function(request, sender, callback) {
callback({ callback({
frameContent: this.responseText.replace(reStrings, replacer), frameContent: this.responseText.replace(reStrings, replacer),
target: µb.contextMenuTarget, target: µb.epickerTarget,
clientX: µb.contextMenuClientX, clientX: µb.contextMenuClientX,
clientY: µb.contextMenuClientY, clientY: µb.contextMenuClientY,
eprom: µb.epickerEprom eprom: µb.epickerEprom
}); });
µb.contextMenuTarget = ''; µb.epickerTarget = '';
µb.contextMenuClientX = -1; µb.contextMenuClientX = -1;
µb.contextMenuClientY = -1; µb.contextMenuClientY = -1;
}; };
@ -1363,3 +1289,80 @@ vAPI.messaging.listen('document-blocked.js', onMessage);
})(); })();
/******************************************************************************/ /******************************************************************************/
/******************************************************************************/
// scriptlets
(function() {
'use strict';
/******************************************************************************/
var µb = µBlock;
/******************************************************************************/
var logCosmeticFilters = function(tabId, details) {
if ( µb.logger.isEnabled() === false ) {
return;
}
var selectors = details.matchedSelectors;
selectors.sort();
for ( var i = 0; i < selectors.length; i++ ) {
µb.logger.writeOne(
tabId,
'cosmetic',
'cb:##' + selectors[i],
'dom',
details.pageURL
);
}
};
/******************************************************************************/
var onMessage = function(request, sender, callback) {
// Async
switch ( request.what ) {
default:
break;
}
// Sync
var response;
var tabId = sender && sender.tab ? sender.tab.id : 0;
switch ( request.what ) {
case 'gotoImageURL':
response = µb.scriptlets.gotoImageURL;
break;
case 'liveCosmeticFilteringData':
var pageStore = µb.pageStoreFromTabId(tabId);
if ( pageStore ) {
pageStore.hiddenElementCount = request.filteredElementCount;
}
break;
case 'logCosmeticFilteringData':
logCosmeticFilters(tabId, request);
break;
default:
return vAPI.messaging.UNHANDLED;
}
callback(response);
};
vAPI.messaging.listen('scriptlets', onMessage);
/******************************************************************************/
})();
/******************************************************************************/

8
src/js/pagestore.js
View File

@ -508,12 +508,14 @@ PageStore.prototype.filterRequest = function(context) {
// evaluation of static filtering. // evaluation of static filtering.
if ( result === '' && µb.userSettings.advancedUserEnabled ) { if ( result === '' && µb.userSettings.advancedUserEnabled ) {
µb.sessionFirewall.evaluateCellZY( context.rootHostname, context.requestHostname, context.requestType); µb.sessionFirewall.evaluateCellZY( context.rootHostname, context.requestHostname, context.requestType);
if ( µb.sessionFirewall.mustBlockOrAllow() ) {
result = µb.sessionFirewall.toFilterString(); result = µb.sessionFirewall.toFilterString();
} }
}
// Static filtering never override dynamic filtering // Static filtering never override dynamic filtering
if ( result === '' || result.charAt(1) === 'n' ) { if ( result === '' || result.charAt(1) === 'n' ) {
result = µb.staticNetFilteringEngine.matchString(context); result = µb.staticNetFilteringEngine.matchString(context) || result;
} }
//console.debug('cache MISS: PageStore.filterRequest("%s")', context.requestURL); //console.debug('cache MISS: PageStore.filterRequest("%s")', context.requestURL);
@ -546,12 +548,14 @@ PageStore.prototype.filterRequestNoCache = function(context) {
// evaluation of static filtering. // evaluation of static filtering.
if ( result === '' && µb.userSettings.advancedUserEnabled ) { if ( result === '' && µb.userSettings.advancedUserEnabled ) {
µb.sessionFirewall.evaluateCellZY(context.rootHostname, context.requestHostname, context.requestType); µb.sessionFirewall.evaluateCellZY(context.rootHostname, context.requestHostname, context.requestType);
if ( µb.sessionFirewall.mustBlockOrAllow() ) {
result = µb.sessionFirewall.toFilterString(); result = µb.sessionFirewall.toFilterString();
} }
}
// Static filtering never override dynamic filtering // Static filtering never override dynamic filtering
if ( result === '' || result.charAt(1) === 'n' ) { if ( result === '' || result.charAt(1) === 'n' ) {
result = µb.staticNetFilteringEngine.matchString(context); result = µb.staticNetFilteringEngine.matchString(context) || result;
} }
return result; return result;

5
src/js/popup.js
View File

@ -504,9 +504,8 @@ var toggleNetFilteringSwitch = function(ev) {
var gotoPick = function() { var gotoPick = function() {
messager.send({ messager.send({
what: 'gotoPick', what: 'launchElementPicker',
tabId: popupData.tabId, tabId: popupData.tabId
select: true
}); });
vAPI.closePopup(); vAPI.closePopup();

4
src/js/cosmetic-logger.js → src/js/scriptlets/cosmetic-logger.js
View File

@ -36,7 +36,7 @@ if ( document instanceof HTMLDocument === false ) {
} }
// This can happen // This can happen
if ( !vAPI ) { if ( typeof vAPI !== 'object' ) {
//console.debug('cosmetic-logger.js > vAPI not found'); //console.debug('cosmetic-logger.js > vAPI not found');
return; return;
} }
@ -79,7 +79,7 @@ vAPI.loggedSelectors = loggedSelectors;
/******************************************************************************/ /******************************************************************************/
var localMessager = vAPI.messaging.channel('cosmetic-*.js'); var localMessager = vAPI.messaging.channel('scriptlets');
localMessager.send({ localMessager.send({
what: 'logCosmeticFilteringData', what: 'logCosmeticFilteringData',

0
src/js/cosmetic-off.js → src/js/scriptlets/cosmetic-off.js
View File

0
src/js/cosmetic-on.js → src/js/scriptlets/cosmetic-on.js
View File

4
src/js/cosmetic-survey.js → src/js/scriptlets/cosmetic-survey.js
View File

@ -36,7 +36,7 @@ if ( document instanceof HTMLDocument === false ) {
} }
// This can happen // This can happen
if ( !vAPI ) { if ( typeof vAPI !== 'object' ) {
//console.debug('cosmetic-survey.js > vAPI not found'); //console.debug('cosmetic-survey.js > vAPI not found');
return; return;
} }
@ -63,7 +63,7 @@ if ( injectedSelectors.length !== 0 ) {
/******************************************************************************/ /******************************************************************************/
var localMessager = vAPI.messaging.channel('cosmetic-*.js'); var localMessager = vAPI.messaging.channel('scriptlets');
localMessager.send({ localMessager.send({
what: 'liveCosmeticFilteringData', what: 'liveCosmeticFilteringData',

7
src/js/element-picker.js → src/js/scriptlets/element-picker.js
View File

@ -917,10 +917,17 @@ var startPicker = function(details) {
if ( src !== url ) { if ( src !== url ) {
continue; continue;
} }
elem.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
filtersFromElement(elem); filtersFromElement(elem);
showDialog({ modifier: true }); showDialog({ modifier: true });
return; return;
} }
// A target was specified, but it wasn't found: abort.
stopPicker();
}; };
/******************************************************************************/ /******************************************************************************/

24
src/js/ublock.js
View File

@ -283,8 +283,14 @@ var matchWhitelistDirective = function(url, hostname, directive) {
/******************************************************************************/ /******************************************************************************/
µBlock.elementPickerExec = function(tabId, targetElement) { µBlock.elementPickerExec = function(tabId, targetElement) {
if ( vAPI.isBehindTheSceneTabId(tabId) ) {
return;
}
this.epickerTarget = targetElement || ''; this.epickerTarget = targetElement || '';
vAPI.tabs.injectScript(tabId, { file: 'js/element-picker.js' }); vAPI.tabs.injectScript(tabId, { file: 'js/scriptlets/element-picker.js' });
if ( typeof vAPI.tabs.select === 'function' ) {
vAPI.tabs.select(tabId);
}
}; };
/******************************************************************************/ /******************************************************************************/
@ -364,7 +370,7 @@ var matchWhitelistDirective = function(url, hostname, directive) {
// Take action if needed // Take action if needed
if ( details.name === 'no-cosmetic-filtering' ) { if ( details.name === 'no-cosmetic-filtering' ) {
vAPI.tabs.injectScript(details.tabId, { vAPI.tabs.injectScript(details.tabId, {
file: 'js/cosmetic-' + (details.state ? 'off' : 'on') + '.js', file: 'js/scriptlets/cosmetic-' + (details.state ? 'off' : 'on') + '.js',
allFrames: true allFrames: true
}); });
return; return;
@ -382,7 +388,7 @@ var matchWhitelistDirective = function(url, hostname, directive) {
callback(); callback();
return; return;
} }
vAPI.tabs.injectScript(tabId, { file: 'js/cosmetic-survey.js' }, callback); vAPI.tabs.injectScript(tabId, { file: 'js/scriptlets/cosmetic-survey.js' }, callback);
}; };
/******************************************************************************/ /******************************************************************************/
@ -392,7 +398,7 @@ var matchWhitelistDirective = function(url, hostname, directive) {
var injectNow = function(tabId) { var injectNow = function(tabId) {
delete tabIdToTimerMap[tabId]; delete tabIdToTimerMap[tabId];
vAPI.tabs.injectScript(tabId, { file: 'js/cosmetic-logger.js' }); vAPI.tabs.injectScript(tabId, { file: 'js/scriptlets/cosmetic-logger.js' });
}; };
var injectAsync = function(tabId) { var injectAsync = function(tabId) {
@ -410,4 +416,14 @@ var matchWhitelistDirective = function(url, hostname, directive) {
/******************************************************************************/ /******************************************************************************/
µBlock.scriptletGotoImageURL = function(details) {
if ( vAPI.isBehindTheSceneTabId(details.tabId) ) {
return;
}
this.scriptlets.gotoImageURL = details.url;
vAPI.tabs.injectScript(details.tabId, { file: 'js/scriptlets/goto-img.js' });
};
/******************************************************************************/
})(); })();

32
src/logger-ui.html
View File

@ -26,8 +26,8 @@
</div> </div>
<div id="content"> <div id="content">
<style id="tabFilterer"></style> <style id="tabFilterer" scoped></style>
<style id="popupFilterer"></style> <style id="popupFilterer" scoped></style>
<table> <table>
<colgroup><col><col><col><col><col></colgroup> <colgroup><col><col><col><col><col></colgroup>
<tbody></tbody> <tbody></tbody>
@ -43,15 +43,31 @@
<div id="hiddenTemplate"><span style="display:none;"></span></div> <div id="hiddenTemplate"><span style="display:none;"></span></div>
<div id="urlFilteringMenu"> <div id="urlFilteringMenu">
<div class="dialog"> <div class="dialog">
<div> <table class="toolbar">
<span class="fa save">&#xf023;</span> <colgroup><col><col></colgroup>
<label>Context: <select class="context"></select></label>&emsp; <tbody>
<label>Type: <select class="type"><option><option value="*">*</select></label> <tr>
<td colspan="2" class="hide preview">
<tr>
<td><span class="fa save">&#xf023;</span>
<td><label>Context: <select class="context"></select></label>&emsp;
<label>Type: <select class="type"><option><option value="*">*</select></label>&emsp;
<span class="fa reload">&#xf021;</span>&emsp;<span class="fa picker">&#xf1fb;</span>
<tr class="entry">
<td><div class="action"><span class="allow">&nbsp;</span><span class="noop">&nbsp;</span><span class="block">&nbsp;</span></div>
<td class="url">
</tbody>
</table>
<div class="header">Dynamic URL filtering</div>
<div class="entries">
<table>
<colgroup><col><col></colgroup>
<tbody></tbody>
</table>
</div> </div>
<div class="entries"></div> <!-- <div class="header">Static URL filtering (TBD)</div> -->
</div> </div>
</div> </div>
<div class="urlFilteringMenuEntry"><span class="action"><span class="allow"></span><span class="noop"></span><span class="block"></span></span><span class="url"></span></div>
</div> </div>
<script src="js/vapi-common.js"></script> <script src="js/vapi-common.js"></script>