Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

logger: ability to create static net filters

This commit is contained in:
gorhill 2015-06-06 18:31:38 -04:00
parent a364a869f5
commit 48f47a6849
8 changed files with 596 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/_locales/en/messages.json
View File

@ -415,6 +415,42 @@
"message":"Dynamic URL filtering",
"description":"Small header to identify the dynamic URL filtering section"
},
"loggerStaticFilteringHeader":{
"message":"Static filtering",
"description":"Small header to identify the static filtering section"
},
"loggerStaticFilteringSentence":{
"message":"{{action}} network requests of {{type}} {{br}}which URL address matches {{url}} {{br}}and which originates from {{origin}},{{br}}{{importance}} there is an exception filter.",
"description":"Used in the static filtering wizard"
},
"loggerStaticFilteringSentencePartBlock":{
"message":"Block",
"description":"Used in the static filtering wizard"
},
"loggerStaticFilteringSentencePartAllow":{
"message":"Allow",
"description":"Used in the static filtering wizard"
},
"loggerStaticFilteringSentencePartType":{
"message":"type “{{type}}”",
"description":"Used in the static filtering wizard"
},
"loggerStaticFilteringSentencePartAnyType":{
"message":"any type",
"description":"Used in the static filtering wizard"
},
"loggerStaticFilteringSentencePartAnyOrigin":{
"message":"anywhere",
"description":"Used in the static filtering wizard"
},
"loggerStaticFilteringSentencePartNotImportant":{
"message":"except when",
"description":"Used in the static filtering wizard"
},
"loggerStaticFilteringSentencePartImportant":{
"message":"even if",
"description":"Used in the static filtering wizard"
},
"aboutChangelog":{
"message":"Change log",
"description":"English: Change log"

22
src/css/common.css
View File

@ -17,6 +17,28 @@ body {
color: black;
font: 14px/1.3 sans-serif;
}
button.important {
padding: 5px;
border: 1px solid transparent;
border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
border-radius: 3px;
background-color: hsl(36, 100%, 75%);
background-image: linear-gradient(#ffdca8, #ffcc7f);
background-repeat: repeat-x;
color: #222;
opacity: 0.8;
}
button.important[disabled],
button.important.disabled {
border-color: #dddddd #dddddd hsl(36, 0%, 85%);
background-color: hsl(36, 0%, 72%);
background-image: linear-gradient(#f2f2f2, #dddddd);
color: #888;
pointer-events: none;
}
button.important:hover {
opacity: 1.0;
}
.hiddenFileInput {
height: 0;
visibility: hidden;

23
src/css/dashboard-common.css
View File

@ -25,29 +25,6 @@ div > p:last-child {
margin-bottom: 0;
}
button.important {
padding: 5px;
border: 1px solid transparent;
border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
border-radius: 3px;
background-color: hsl(36, 100%, 75%);
background-image: linear-gradient(#ffdca8, #ffcc7f);
background-repeat: repeat-x;
color: #222;
opacity: 0.8;
}
button.important[disabled],
button.important.disabled {
border-color: #dddddd #dddddd hsl(36, 0%, 85%);
background-color: hsl(36, 0%, 72%);
background-image: linear-gradient(#f2f2f2, #dddddd);
color: #888;
pointer-events: none;
}
button.important:hover {
opacity: 1.0;
}
.para {
width: 40em;
}

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

@ -286,6 +286,7 @@ body[dir="rtl"] #popupContainer > div {
top: 0;
z-index: 400;
}
#urlFilteringMenu .dialog {
background-color: white;
border: 2px solid white;
@ -296,24 +297,23 @@ body[dir="rtl"] #popupContainer > div {
transform-style: preserve-3d;
width: 80%;
}
#urlFilteringMenu .dialog table {
border: 0;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
#urlFilteringMenu .dialog table > colgroup > col:nth-of-type(1) {
width: 3.8em;
}
#urlFilteringMenu .dialog table > colgroup > col:nth-of-type(2) {
#urlFilteringMenu .dialog p {
line-height: 2em;
}
#urlFilteringMenu .dialog td {
border: 0;
padding: 0;
vertical-align: middle;
}
#urlFilteringMenu .dialog > table.toolbar td.preview {
#urlFilteringMenu .dialog select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #f4f4f4;
border: 1px solid #ddd;
max-width: 75%;
outline: none;
padding: 0.2em;
}
#urlFilteringMenu .dialog > div.preview {
/* http://lea.verou.me/css3patterns/ */
background-color: #aaa;
background-image:
@ -337,20 +337,83 @@ body[dir="rtl"] #popupContainer > div {
background-size: 18px 18px;
text-align: center;
}
#urlFilteringMenu .dialog > table.toolbar td.preview > * {
#urlFilteringMenu .dialog > div.preview > * {
max-width: 100%;
max-height: 40vh;
}
#urlFilteringMenu .dialog > table.toolbar select {
font: 14px;
height: 2em;
#urlFilteringMenu .dialog table {
border: 0;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
#urlFilteringMenu .dialog > table.toolbar .fa {
#urlFilteringMenu .dialog table > colgroup > col:nth-of-type(1) {
width: 3.8em;
}
#urlFilteringMenu .dialog table > colgroup > col:nth-of-type(2) {
}
#urlFilteringMenu .dialog td {
border: 0;
padding: 0;
vertical-align: middle;
}
#urlFilteringMenu .dialog > div.headers {
border-bottom: 1px solid #888;
position: relative;
}
#urlFilteringMenu .dialog > div.headers > span.header {
background-color: #eee;
border: 1px solid #aaa;
border-bottom: 1px solid #888;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #888;
cursor: pointer;
display: inline-block;
font-size: small;
line-height: 2em;
margin-left: 0.5em;
padding: 0 1em;
position: relative;
text-align: center;
top: 1px;
}
#urlFilteringMenu .dialog > div.headers > span.header.selected {
background-color: white;
border-color: #888;
border-bottom: 1px solid white;
color: black;
}
#urlFilteringMenu .dialog > div.headers > span.tools {
display: inline-block;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
#urlFilteringMenu .dialog > div.headers > span.tools > span {
cursor: pointer;
font-size: 1.2em;
text-align: center;
}
#urlFilteringMenu .dialog > table.toolbar .fa.save {
#urlFilteringMenu .dialog > div.containers {
height: 40vh;
overflow: hidden;
overflow-y: auto;
}
#urlFilteringMenu .dialog > div.containers > div {
display: none;
}
#urlFilteringMenu .dialog > div.containers > div.selected {
display: block;
}
#urlFilteringMenu .dialog > div.containers > div.dynamic > table.toolbar select {
font: 14px;
height: 2em;
}
#urlFilteringMenu .dialog > div.containers > div.dynamic > table.toolbar #saveRules {
background-color: #ffe;
border: 1px solid #ddc;
border-radius: 4px;
@ -360,49 +423,37 @@ body[dir="rtl"] #popupContainer > div {
padding: 0.25em 0.5em;
visibility: hidden;
}
body.dirty #urlFilteringMenu .dialog > table.toolbar .fa.save {
body.dirty #urlFilteringMenu .dialog > div.containers > div.dynamic > table.toolbar #saveRules {
visibility: visible;
}
#urlFilteringMenu .dialog > table.toolbar .fa.save:hover {
#urlFilteringMenu .dialog > div.containers > div.dynamic > table.toolbar #saveRules:hover {
color: black;
}
#urlFilteringMenu .dialog > table.toolbar tr.entry {
#urlFilteringMenu .dialog > div.containers > div.dynamic > table.toolbar tr.entry {
display: none;
}
#urlFilteringMenu .dialog > div.entries {
max-height: 30vh;
overflow: hidden;
overflow-y: auto;
}
#urlFilteringMenu .dialog > div.header {
background-color: #666;
color: white;
font-size: smaller;
padding: 2px;
text-align: center;
}
#urlFilteringMenu .dialog > div.entries tr.entry {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry {
background-color: #e6e6e6;
border: 0;
border-bottom: 1px solid white;
font-size: 13px;
}
#urlFilteringMenu .dialog > div.entries tr.entry:hover {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry:hover {
background-color: #f0f0f0;
}
#urlFilteringMenu .dialog > div.entries tr.entry > td:first-of-type {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td:first-of-type {
border: 0;
border-right: 1px solid white;
text-align: center;
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action {
background-color: transparent;
border: 0;
cursor: pointer;
height: 2em;
width: 100%;
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action > span {
background-color: transparent;
border: 0;
display: inline-block;
@ -411,67 +462,79 @@ body.dirty #urlFilteringMenu .dialog > table.toolbar .fa.save {
visibility: hidden;
width: 33.33%;
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.allow {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action.allow {
background-color: rgba(0, 160, 0, 0.3);
}
body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.allow {
body.colorBlind #urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action.allow {
background-color: rgba(255, 194, 57, 0.4);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.noop {
#urlFilteringMenu .dialog > div.containers > div.dynamic 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 {
body.colorBlind #urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action.noop {
background-color: rgba(96, 96, 96, 0.4);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action.block {
#urlFilteringMenu .dialog > div.containers > div.dynamic 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 {
body.colorBlind #urlFilteringMenu .dialog > div.containers > div.dynamic 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 {
#urlFilteringMenu .dialog > div.containers > div.dynamic 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 {
body.colorBlind #urlFilteringMenu .dialog > div.containers > div.dynamic 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 {
#urlFilteringMenu .dialog > div.containers > div.dynamic 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 {
#urlFilteringMenu .dialog > div.containers > div.dynamic 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 {
body.colorBlind #urlFilteringMenu .dialog > div.containers > div.dynamic 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 {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action:not(.own):hover > span {
opacity: 0.2;
visibility: visible;
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action:not(.own):hover > span:hover {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action:not(.own):hover > span:hover {
opacity: 0.75;
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.allow {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.allow {
background-color: rgb(0, 160, 0);
}
body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.allow {
body.colorBlind #urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.allow {
background-color: rgb(255, 194, 57);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.noop {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.noop {
background-color: rgb(108, 108, 108);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.block {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.block {
background-color: rgb(192, 0, 0);
}
body.colorBlind #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action > span.block {
body.colorBlind #urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.block {
background-color: rgb(0, 19, 110);
}
#urlFilteringMenu .dialog > div.entries tr.entry > td.url {
#urlFilteringMenu .dialog > div.containers > div.dynamic tr.entry > td.url {
overflow: hidden;
padding-left: 4px;
text-overflow: ellipsis;
white-space: nowrap;
}
#urlFilteringMenu .dialog > div.containers > div.static > p {
margin: 0.75em 0;
}
#urlFilteringMenu .dialog > div.containers > div.static textarea {
box-sizing: border-box;
height: 6em;
resize: none;
width: 100%;
}
#urlFilteringMenu .dialog > div.containers > div.static > p:nth-of-type(2) {
text-align: center;
}
.hide {
display: none;
}

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

@ -197,8 +197,8 @@ var createRow = function(layout) {
var tr = trJunkyard.pop();
if ( tr ) {
tr.className = '';
tr.removeAttribute('data-context');
tr.removeAttribute('data-frame');
tr.removeAttribute('data-hn-page');
tr.removeAttribute('data-hn-frame');
} else {
tr = document.createElement('tr');
}
@ -270,10 +270,10 @@ var renderNetLogEntry = function(tr, entry) {
// Contexts
if ( entry.d3 ) {
tr.setAttribute('data-context', entry.d3);
tr.setAttribute('data-hn-page', entry.d3);
}
if ( entry.d4 ) {
tr.setAttribute('data-frame', entry.d4);
tr.setAttribute('data-hn-frame', entry.d4);
}
// Cosmetic filter?
@ -590,12 +590,19 @@ var onMaxEntriesChanged = function() {
/******************************************************************************/
/******************************************************************************/
var urlFilteringDialog = (function() {
var filteringDialog = (function() {
var targetRow = null;
var dialog = null;
var selectContext = null;
var selectType = null;
var createdStaticFilters = {};
var targetType;
var targetURLs = [];
var tabId = '';
var targetFrameHostname;
var targetPageHostname;
var targetTabId;
var targetDomain;
var targetPageDomain;
var targetFrameDomain;
var removeAllChildren = function(node) {
while ( node.firstChild ) {
@ -603,11 +610,23 @@ var urlFilteringDialog = (function() {
}
};
var uglyTypeFromSelector = function() {
var prettyType = selectType.value;
var uglyTypeFromSelector = function(pane) {
var prettyType = selectValue('select.type.' + pane);
return uglyRequestTypes[prettyType] || prettyType;
};
var selectNode = function(selector) {
return dialog.querySelector(selector);
};
var selectValue = function(selector) {
return selectNode(selector).value || '';
};
var staticFilterNode = function() {
return dialog.querySelector('div.containers > div.static textarea');
};
var onColorsReady = function(response) {
document.body.classList.toggle('dirty', response.dirty);
var colorEntries = response.colors;
@ -617,7 +636,7 @@ var urlFilteringDialog = (function() {
continue;
}
colorEntry = colorEntries[url];
node = urlFilteringMenu.querySelector('.entry .action[data-url="' + url + '"]');
node = dialog.querySelector('.dynamic .entry .action[data-url="' + url + '"]');
if ( node === null ) {
continue;
}
@ -631,12 +650,54 @@ var urlFilteringDialog = (function() {
var colorize = function() {
messager.send({
what: 'getURLFilteringData',
context: selectContext.value,
context: selectValue('select.dynamic.origin'),
urls: targetURLs,
type: uglyTypeFromSelector()
type: uglyTypeFromSelector('dynamic')
}, onColorsReady);
};
var parseStaticInputs = function() {
var filter = '';
var value;
value = selectValue('select.static.action');
if ( value !== '' ) {
filter = '@@';
}
value = selectValue('select.static.url');
if ( value !== '' ) {
filter += '||' + value;
}
var options = [];
if ( selectValue('select.static.importance') !== '' ) {
options.push('important');
}
value = selectValue('select.static.type');
if ( value !== '' ) {
options.push(uglyTypeFromSelector('static'));
}
value = selectValue('select.static.origin');
if ( value !== '' ) {
if ( value === targetDomain ) {
options.push('first-party');
} else {
options.push('domain=' + value);
}
}
if ( options.length ) {
filter += '$' + options.join(',');
}
staticFilterNode().value = filter;
updateWidgets();
};
var updateWidgets = function() {
var value = staticFilterNode().value;
dialog.querySelector('#createStaticFilter').classList.toggle(
'disabled',
createdStaticFilters.hasOwnProperty(value) || value === ''
);
};
var onClick = function(ev) {
var target = ev.target;
@ -649,14 +710,47 @@ var urlFilteringDialog = (function() {
ev.stopPropagation();
var tcl = target.classList;
var value;
// Select a mode
if ( tcl.contains('header') ) {
if ( tcl.contains('selected') ) {
return;
}
uDom('.header').removeClass('selected');
uDom('.container').removeClass('selected');
value = target.getAttribute('data-container');
uDom('.header.' + value).addClass('selected');
uDom('.container.' + value).addClass('selected');
return;
}
// Create static filter
if ( target.id === 'createStaticFilter' ) {
value = staticFilterNode().value;
// Avoid duplicates
if ( createdStaticFilters.hasOwnProperty(value) ) {
return;
}
createdStaticFilters[value] = true;
if ( value !== '' ) {
var d = new Date();
messager.send({
what: 'createUserFilter',
filters: '! ' + d.toLocaleString() + ' ' + targetPageDomain + '\n' + value
});
}
updateWidgets();
return;
}
// Save url filtering rule(s)
if ( tcl.contains('save') ) {
if ( target.id === 'saveRules' ) {
messager.send({
what: 'saveURLFilteringRules',
context: selectContext.value,
context: selectValue('select.dynamic.origin'),
urls: targetURLs,
type: uglyTypeFromSelector()
type: uglyTypeFromSelector('dynamic')
}, colorize);
return;
}
@ -667,9 +761,9 @@ var urlFilteringDialog = (function() {
if ( tcl.contains('action') ) {
messager.send({
what: 'setURLFilteringRule',
context: selectContext.value,
context: selectValue('select.dynamic.origin'),
url: target.getAttribute('data-url'),
type: uglyTypeFromSelector(),
type: uglyTypeFromSelector('dynamic'),
action: 0,
persist: persist
}, colorize);
@ -680,9 +774,9 @@ var urlFilteringDialog = (function() {
if ( tcl.contains('allow') ) {
messager.send({
what: 'setURLFilteringRule',
context: selectContext.value,
context: selectValue('select.dynamic.origin'),
url: target.parentNode.getAttribute('data-url'),
type: uglyTypeFromSelector(),
type: uglyTypeFromSelector('dynamic'),
action: 2,
persist: persist
}, colorize);
@ -693,9 +787,9 @@ var urlFilteringDialog = (function() {
if ( tcl.contains('noop') ) {
messager.send({
what: 'setURLFilteringRule',
context: selectContext.value,
context: selectValue('select.dynamic.origin'),
url: target.parentNode.getAttribute('data-url'),
type: uglyTypeFromSelector(),
type: uglyTypeFromSelector('dynamic'),
action: 3,
persist: persist
}, colorize);
@ -706,9 +800,9 @@ var urlFilteringDialog = (function() {
if ( tcl.contains('block') ) {
messager.send({
what: 'setURLFilteringRule',
context: selectContext.value,
context: selectValue('select.dynamic.origin'),
url: target.parentNode.getAttribute('data-url'),
type: uglyTypeFromSelector(),
type: uglyTypeFromSelector('dynamic'),
action: 1,
persist: persist
}, colorize);
@ -719,7 +813,7 @@ var urlFilteringDialog = (function() {
if ( tcl.contains('reload') ) {
messager.send({
what: 'reloadTab',
tabId: tabId
tabId: targetTabId
});
return;
}
@ -728,7 +822,7 @@ var urlFilteringDialog = (function() {
if ( tcl.contains('picker') ) {
messager.send({
what: 'launchElementPicker',
tabId: tabId,
tabId: targetTabId,
targetURL: 'img\t' + targetURLs[0],
select: true
});
@ -736,7 +830,34 @@ var urlFilteringDialog = (function() {
}
};
var onSelectChange = function(ev) {
var target = ev.target;
var tcl = target.classList;
if ( tcl.contains('dynamic') ) {
colorize();
return;
}
if ( tcl.contains('static') ) {
parseStaticInputs();
return;
}
};
var onInputChange = function() {
updateWidgets();
};
var createPreview = function(type, url) {
// First, whether picker can be used
dialog.querySelector('.picker').classList.toggle(
'hide',
targetTabId === noTabId ||
targetType !== 'image' ||
/(?:^| )[dlsu]b(?: |$)/.test(targetRow.className)
);
var preview = null;
if ( type === 'image' ) {
@ -744,9 +865,7 @@ var urlFilteringDialog = (function() {
preview.setAttribute('src', url);
}
// More...
var container = dialog.querySelector('table.toolbar td.preview');
var container = dialog.querySelector('div.preview');
container.classList.toggle('hide', preview === null);
if ( preview === null ) {
return;
@ -754,94 +873,53 @@ var urlFilteringDialog = (function() {
container.appendChild(preview);
};
var toggleOn = function(ev) {
if ( dialog !== null ) {
return toggleOff();
// Build list of candidate URLs
var createTargetURLs = function(url) {
var urls = [];
var matches = reRFC3986.exec(url);
if ( matches === null || !matches[1] || !matches[2] ) {
return urls;
}
dialog = urlFilteringMenu.querySelector('.dialog');
selectContext = dialog.querySelector('.context');
selectType = dialog.querySelector('.type');
var td = ev.target;
var tr = td.parentElement;
var cells = tr.cells;
var context = tr.getAttribute('data-context');
if ( !context ) {
return toggleOff();
}
var type = cells[4].textContent.trim();
if ( !type ) {
return toggleOff();
}
tabId = tabIdFromClassName(tr.className);
var pos, option;
// Fill context selector
removeAllChildren(selectContext);
for (;;) {
option = document.createElement('option');
option.textContent = context;
option.setAttribute('value', context);
pos = context.indexOf('.');
selectContext.appendChild(option);
// Shortest URL for a valid URL filtering rule
var rootURL = matches[1] + matches[2];
urls.unshift(rootURL);
var path = matches[3] || '';
var pos = path.charAt(0) === '/' ? 1 : 0;
while ( pos < path.length ) {
pos = path.indexOf('/', pos + 1);
if ( pos === -1 ) {
break;
pos = path.length;
}
context = context.slice(pos + 1);
urls.unshift(rootURL + path.slice(0, pos));
}
option = document.createElement('option');
var query = matches[4] || '';
if ( query !== '') {
urls.unshift(rootURL + path + query);
}
return urls;
};
// Fill dynamic URL filtering pane
var fillDynamicPane = function() {
var select;
// Fill context selector
select = selectNode('select.dynamic.origin');
removeAllChildren(select);
fillOriginSelect(select, targetPageHostname, targetPageDomain);
var option = document.createElement('option');
option.textContent = '*';
option.setAttribute('value', '*');
selectContext.appendChild(option);
select.appendChild(option);
// Fill type selector
selectType.options[0].textContent = type;
selectType.options[0].setAttribute('value', type);
selectType.selectedIndex = 0;
select = selectNode('select.dynamic.type');
select.options[0].textContent = targetType;
select.options[0].setAttribute('value', targetType);
select.selectedIndex = 0;
// Extract data needed to build URL filtering menu
var candidateURL = cells[5].textContent;
var matches = reRFC3986.exec(candidateURL);
if ( matches === null || !matches[1] || !matches[2] ) {
return toggleOff();
}
uDom(dialog).descendants('.picker').toggleClass(
'hide',
tr.classList.contains('tab_bts') ||
type !== 'image' ||
/(?:^| )[dlsu]b(?: |$)/.test(tr.className)
);
// Shortest URL which for a valid URL filtering rule
var candidateRootURL = matches[1] + matches[2];
targetURLs.unshift(candidateRootURL);
var candidatePath = matches[3] || '';
pos = candidatePath.charAt(0) === '/' ? 1 : 0;
while ( pos < candidatePath.length ) {
pos = candidatePath.indexOf('/', pos + 1);
if ( pos === -1 ) {
pos = candidatePath.length;
}
targetURLs.unshift(candidateRootURL + candidatePath.slice(0, pos));
}
var candidateQuery = matches[4] || '';
if ( candidateQuery !== '') {
targetURLs.unshift(candidateRootURL + candidatePath + candidateQuery);
}
// Create preview whenever possible
createPreview(type, targetURLs[0]);
// Fill menu
// Fill entries
var menuEntryTemplate = dialog.querySelector('table.toolbar tr.entry');
var tbody = dialog.querySelector('div.entries tbody');
// Adding URL filtering rules
var tbody = dialog.querySelector('div.dynamic table.entries tbody');
var url, menuEntry;
for ( var i = 0; i < targetURLs.length; i++ ) {
url = targetURLs[i];
@ -852,30 +930,169 @@ var urlFilteringDialog = (function() {
}
colorize();
};
var fillOriginSelect = function(select, hostname, domain) {
var option, pos;
var value = hostname;
for (;;) {
option = document.createElement('option');
option.setAttribute('value', value);
option.textContent = value;
select.appendChild(option);
if ( value === domain ) {
break;
}
pos = value.indexOf('.');
if ( pos === -1 ) {
break;
}
value = value.slice(pos + 1);
}
};
// Fill static filtering pane
var fillStaticPane = function() {
var template = vAPI.i18n('loggerStaticFilteringSentence');
var rePlaceholder = /\{\{[^}]+?\}\}/g;
var nodes = [];
var match, pos = 0;
var select, option, i, value;
for (;;) {
match = rePlaceholder.exec(template);
if ( match === null ) {
break;
}
if ( pos !== match.index ) {
nodes.push(document.createTextNode(template.slice(pos, match.index)));
}
pos = rePlaceholder.lastIndex;
switch ( match[0] ) {
case '{{br}}':
nodes.push(document.createElement('br'));
break;
case '{{action}}':
select = document.createElement('select');
select.className = 'static action';
option = document.createElement('option');
option.setAttribute('value', '');
option.textContent = vAPI.i18n('loggerStaticFilteringSentencePartBlock');
select.appendChild(option);
option = document.createElement('option');
option.setAttribute('value', '@@');
option.textContent = vAPI.i18n('loggerStaticFilteringSentencePartAllow');
select.appendChild(option);
nodes.push(select);
break;
case '{{type}}':
select = document.createElement('select');
select.className = 'static type';
option = document.createElement('option');
option.setAttribute('value', targetType);
option.textContent = vAPI.i18n('loggerStaticFilteringSentencePartType').replace('{{type}}', targetType);
select.appendChild(option);
option = document.createElement('option');
option.setAttribute('value', '');
option.textContent = vAPI.i18n('loggerStaticFilteringSentencePartAnyType');
select.appendChild(option);
nodes.push(select);
break;
case '{{url}}':
select = document.createElement('select');
select.className = 'static url';
for ( i = 0; i < targetURLs.length; i++ ) {
value = targetURLs[i].replace(/^[a-z]+:\/\//, '');
option = document.createElement('option');
option.setAttribute('value', value);
option.textContent = value;
select.appendChild(option);
}
nodes.push(select);
break;
case '{{origin}}':
select = document.createElement('select');
select.className = 'static origin';
fillOriginSelect(select, targetFrameHostname, targetFrameDomain);
option = document.createElement('option');
option.setAttribute('value', '');
option.textContent = vAPI.i18n('loggerStaticFilteringSentencePartAnyOrigin');
select.appendChild(option);
nodes.push(select);
break;
case '{{importance}}':
select = document.createElement('select');
select.className = 'static importance';
option = document.createElement('option');
option.setAttribute('value', '');
option.textContent = vAPI.i18n('loggerStaticFilteringSentencePartNotImportant');
select.appendChild(option);
option = document.createElement('option');
option.setAttribute('value', 'important');
option.textContent = vAPI.i18n('loggerStaticFilteringSentencePartImportant');
select.appendChild(option);
nodes.push(select);
break;
default:
break;
}
}
if ( pos < template.length ) {
nodes.push(document.createTextNode(template.slice(pos)));
}
var parent = dialog.querySelector('div.containers > div.static > p:first-of-type');
removeAllChildren(parent);
for ( i = 0; i < nodes.length; i++ ) {
parent.appendChild(nodes[i]);
}
parseStaticInputs();
};
var fillDialog = function(domains) {
targetDomain = domains[0];
targetPageDomain = domains[1];
targetFrameDomain = domains[2];
createPreview(targetType, targetURLs[0]);
fillDynamicPane();
fillStaticPane();
document.body.appendChild(urlFilteringMenu);
urlFilteringMenu.addEventListener('click', onClick, true);
selectContext.addEventListener('change', colorize);
selectType.addEventListener('change', colorize);
urlFilteringMenu.addEventListener('change', onSelectChange, true);
urlFilteringMenu.addEventListener('input', onInputChange, true);
};
var toggleOn = function(ev) {
dialog = urlFilteringMenu.querySelector('.dialog');
targetRow = ev.target.parentElement;
targetTabId = tabIdFromClassName(targetRow.className);
targetType = targetRow.cells[4].textContent.trim() || '';
targetURLs = createTargetURLs(targetRow.cells[5].textContent);
targetPageHostname = targetRow.getAttribute('data-hn-page') || '';
targetFrameHostname = targetRow.getAttribute('data-hn-frame') || '';
// We need the root domain names for best user experience.
messager.send({
what: 'getDomainNames',
targets: [targetURLs[0], targetPageHostname, targetFrameHostname]
}, fillDialog);
};
var toggleOff = function() {
if ( selectContext !== null ) {
selectContext.removeEventListener('change', colorize);
selectContext = null;
}
if ( selectType !== null ) {
selectType.removeEventListener('change', colorize);
selectType = null;
}
if ( dialog !== null ) {
uDom(dialog).descendants('table.toolbar td.preview > *').remove();
uDom(dialog).descendants('div.entries tr').remove();
dialog = null;
}
urlFilteringMenu.removeEventListener('click', onClick, true);
document.body.removeChild(urlFilteringMenu);
removeAllChildren(dialog.querySelector('div.preview'));
removeAllChildren(dialog.querySelector('div.dynamic table.entries tbody'));
dialog = null;
targetRow = null;
targetURLs = [];
urlFilteringMenu.removeEventListener('click', onClick, true);
urlFilteringMenu.removeEventListener('change', onSelectChange, true);
urlFilteringMenu.removeEventListener('input', onInputChange, true);
document.body.removeChild(urlFilteringMenu);
};
return {
@ -1186,7 +1403,7 @@ uDom.onLoad(function() {
uDom('#clear').on('click', clearBuffer);
uDom('#maxEntries').on('change', onMaxEntriesChanged);
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(4)', urlFilteringDialog.toggleOn);
uDom('#content').on('click', 'tr.cat_net > td:nth-of-type(4)', filteringDialog.toggleOn);
});
/******************************************************************************/

36
src/js/messaging.js
View File

@ -32,9 +32,29 @@
/******************************************************************************/
var onMessage = function(request, sender, callback) {
var µb = µBlock;
var µb = µBlock;
/******************************************************************************/
var getDomainNames = function(targets) {
var out = [];
var µburi = µb.URI;
var target, domain;
for ( var i = 0; i < targets.length; i++ ) {
target = targets[i];
if ( target.indexOf('/') !== -1 ) {
domain = µburi.domainFromURI(target) || '';
} else {
domain = µburi.domainFromHostname(target) || target;
}
out.push(domain);
}
return out;
};
/******************************************************************************/
var onMessage = function(request, sender, callback) {
// Async
switch ( request.what ) {
case 'getAssetContent':
@ -71,6 +91,10 @@ var onMessage = function(request, sender, callback) {
}
break;
case 'createUserFilter':
µb.appendUserFilters(request.filters);
break;
case 'forceUpdateAssets':
µb.assetUpdater.force();
break;
@ -79,6 +103,10 @@ var onMessage = function(request, sender, callback) {
response = {name: vAPI.app.name, version: vAPI.app.version};
break;
case 'getDomainNames':
response = getDomainNames(request.targets);
break;
case 'getUserSettings':
response = µb.userSettings;
break;
@ -601,10 +629,6 @@ var onMessage = function(request, sender, callback) {
var response;
switch ( request.what ) {
case 'createUserFilter':
µb.appendUserFilters(request.filters);
break;
case 'elementPickerEprom':
µb.epickerEprom = request;
break;

11
src/js/static-net-filtering.js
View File

@ -1294,7 +1294,10 @@ FilterParser.prototype.parseOptType = function(raw, not) {
/******************************************************************************/
FilterParser.prototype.parseOptParty = function(not) {
FilterParser.prototype.parseOptParty = function(firstParty, not) {
if ( firstParty ) {
not = !not;
}
if ( not ) {
this.firstParty = true;
} else {
@ -1330,7 +1333,7 @@ FilterParser.prototype.parseOptions = function(s) {
opt = opt.slice(1);
}
if ( opt === 'third-party' ) {
this.parseOptParty(not);
this.parseOptParty(false, not);
continue;
}
if ( opt === 'elemhide' ) {
@ -1358,6 +1361,10 @@ FilterParser.prototype.parseOptions = function(s) {
this.important = Important;
continue;
}
if ( opt === 'first-party' ) {
this.parseOptParty(true, not);
continue;
}
this.unsupported = true;
break;
}

55
src/logger-ui.html
View File

@ -43,29 +43,40 @@
<div id="hiddenTemplate"><span style="display:none;"></span></div>
<div id="urlFilteringMenu">
<div class="dialog">
<table class="toolbar">
<colgroup><col><col></colgroup>
<tbody>
<tr>
<td colspan="2" class="hide preview"></td>
<tr>
<td><span class="fa save">&#xf023;</span>
<td><label><span data-i18n="loggerURLFilteringContextLabel"></span> <select class="context"></select></label>&emsp;
<label><span data-i18n="loggerURLFilteringTypeLabel"></span> <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" data-i18n="loggerURLFilteringHeader"></div>
<div class="entries">
<table>
<colgroup><col><col></colgroup>
<tbody></tbody>
</table>
<div class="hide preview"></div>
<div class="headers">
<span class="header dynamic selected" data-container="dynamic" data-i18n="loggerURLFilteringHeader"></span>
<span class="header static" data-container="static" data-i18n="loggerStaticFilteringHeader"></span>
<span class="tools"><span class="fa reload">&#xf021;</span>&emsp;<span class="fa picker">&#xf1fb;</span></span>
</div>
<div class="containers">
<div class="container dynamic selected">
<table class="toolbar">
<colgroup><col><col></colgroup>
<tbody>
<tr>
<td><span id="saveRules" class="fa">&#xf023;</span>
<td><p>
<label><span data-i18n="loggerURLFilteringContextLabel"></span> <select class="dynamic origin"></select></label>&emsp;
<label><span data-i18n="loggerURLFilteringTypeLabel"></span> <select class="dynamic type"><option><option value="*">*</select></label>
</p>
<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>
<table class="entries">
<colgroup><col><col></colgroup>
<tbody></tbody>
</table>
</div>
<div class="container static">
<p></p>
<p><textarea class="staticFilter" value=""></textarea>
<button id="createStaticFilter" class="important" type="button" data-i18n="pickerCreate"></button>
</p>
</div>
</div>
<!-- <div class="header">Static URL filtering (TBD)</div> -->
</div>
</div>
</div>