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

fine tuning dynamic URL filtering UI + i18n

This commit is contained in:
gorhill 2015-05-26 09:52:09 -04:00
parent d94d28e426
commit 93a3965e53
4 changed files with 72 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -363,22 +363,6 @@
"message":"Apply changes",
"description":"English: Apply changes"
},
"logNetRequestsPrompt":{
"message":"Enable the logging of network requests",
"description":"English: Enable the logging of network requests"
},
"logNetRequestsHelp":{
"message":"You can inspect the details of network requests if you wish by enabling this option. The logging of network requests increases the memory footprint of uBlock₀. Since many users will never use this feature, it is disabled by default.",
"description":"English: see _locales\/en\/messages.log"
},
"logBlockedRequestsHeader":{
"message":"Blocked requests",
"description":"English: Blocked requests"
},
"logAllowedRequestsHeader":{
"message":"Allowed requests",
"description":"English: Allowed requests"
},
"logRequestsHeaderType":{
"message":"Type",
"description":"English: Type"
@ -395,14 +379,6 @@
"message":"Filter",
"description":"English: Filter"
},
"logBlockedRequestsEmpty":{
"message":"No blocked requests logged for this page",
"description":"English: No blocked requests logged for this page"
},
"logAllowedRequestsEmpty":{
"message":"No non-blocked requests logged for this page",
"description":"English: No non-blocked requests logged for this page"
},
"logAll":{
"message":"All",
"description":"Appears in the logger's tab selector"
@ -419,6 +395,18 @@
"message":"Maximum number of log entries",
"description":"Tooltip informaing that the input field is to set the maximum number of entries in the log"
},
"loggerURLFilteringContextLabel":{
"message":"Context:",
"description":"Label for the context selector"
},
"loggerURLFilteringTypeLabel":{
"message":"Type:",
"description":"Label for the type selector"
},
"loggerURLFilteringHeader":{
"message":"Dynamic URL filtering",
"description":"Small header to identify the dynamic URL filtering section"
},
"aboutChangelog":{
"message":"Change log",
"description":"English: Change log"

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

@ -226,7 +226,7 @@ body.colorBlind #content tr.nooped td:nth-of-type(6) b {
body.colorBlind #content tr.allowed td:nth-of-type(6) b {
background-color: rgba(255, 194, 57, 0.2);
}
#popupContainer {
background: white;
border: 1px solid gray;
@ -310,6 +310,7 @@ body[dir="rtl"] #popupContainer > div {
#urlFilteringMenu .dialog td {
border: 0;
padding: 0;
vertical-align: middle;
}
#urlFilteringMenu .dialog > table.toolbar td.preview {
@ -392,7 +393,6 @@ body.dirty #urlFilteringMenu .dialog > table.toolbar .fa.save {
#urlFilteringMenu .dialog > div.entries tr.entry > td:first-of-type {
border: 0;
border-right: 1px solid white;
padding: 0;
text-align: center;
}
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action {

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

@ -51,6 +51,7 @@ var allTabIds = {};
var allTabIdsToken;
var hiddenTemplate = document.querySelector('#hiddenTemplate > span');
var reRFC3986 = /^([^:\/?#]+:)?(\/\/[^\/?#]*)?([^?#]*)(\?[^#]*)?(#.*)?/;
var urlFilteringMenu = document.querySelector('#urlFilteringMenu');
var prettyRequestTypes = {
'main_frame': 'doc',
@ -585,12 +586,11 @@ var onMaxEntriesChanged = function() {
/******************************************************************************/
/******************************************************************************/
var urlFilteringMenu = (function() {
var menu = document.querySelector('#urlFilteringMenu');
var dialog = menu.querySelector('.dialog');
var selectContext = dialog.querySelector('.context');
var selectType = dialog.querySelector('.type');
var menuURLs = [];
var urlFilteringDialog = (function() {
var dialog = null;
var selectContext = null;
var selectType = null;
var targetURLs = [];
var tabId = '';
var removeAllChildren = function(node) {
@ -613,7 +613,7 @@ var urlFilteringMenu = (function() {
continue;
}
colorEntry = colorEntries[url];
node = menu.querySelector('.entry .action[data-url="' + url + '"]');
node = urlFilteringMenu.querySelector('.entry .action[data-url="' + url + '"]');
if ( node === null ) {
continue;
}
@ -628,7 +628,7 @@ var urlFilteringMenu = (function() {
messager.send({
what: 'getURLFilteringData',
context: selectContext.value,
urls: menuURLs,
urls: targetURLs,
type: uglyTypeFromSelector()
}, onColorsReady);
};
@ -644,12 +644,14 @@ var urlFilteringMenu = (function() {
ev.stopPropagation();
var tcl = target.classList;
// Save url filtering rule(s)
if ( target.classList.contains('save') ) {
if ( tcl.contains('save') ) {
messager.send({
what: 'saveURLFilteringRules',
context: selectContext.value,
urls: menuURLs,
urls: targetURLs,
type: uglyTypeFromSelector()
}, colorize);
return;
@ -658,7 +660,7 @@ var urlFilteringMenu = (function() {
var persist = !!ev.ctrlKey || !!ev.metaKey;
// Remove url filtering rule
if ( target.classList.contains('action') ) {
if ( tcl.contains('action') ) {
messager.send({
what: 'setURLFilteringRule',
context: selectContext.value,
@ -671,7 +673,7 @@ var urlFilteringMenu = (function() {
}
// add "allow" url filtering rule
if ( target.classList.contains('allow') ) {
if ( tcl.contains('allow') ) {
messager.send({
what: 'setURLFilteringRule',
context: selectContext.value,
@ -684,7 +686,7 @@ var urlFilteringMenu = (function() {
}
// add "block" url filtering rule
if ( target.classList.contains('noop') ) {
if ( tcl.contains('noop') ) {
messager.send({
what: 'setURLFilteringRule',
context: selectContext.value,
@ -697,7 +699,7 @@ var urlFilteringMenu = (function() {
}
// add "block" url filtering rule
if ( target.classList.contains('block') ) {
if ( tcl.contains('block') ) {
messager.send({
what: 'setURLFilteringRule',
context: selectContext.value,
@ -710,7 +712,7 @@ var urlFilteringMenu = (function() {
}
// Force a reload of the tab
if ( target.classList.contains('reload') ) {
if ( tcl.contains('reload') ) {
messager.send({
what: 'reloadTab',
tabId: tabId
@ -719,19 +721,18 @@ var urlFilteringMenu = (function() {
}
// Hightlight corresponding element in target web page
if ( target.classList.contains('picker') ) {
if ( tcl.contains('picker') ) {
messager.send({
what: 'launchElementPicker',
tabId: tabId,
targetURL: 'img\t' + menuURLs[0],
targetURL: 'img\t' + targetURLs[0],
select: true
});
return;
}
};
// Enable interactive tools if resource was not blocked
var createPreviewIf = function(type, url) {
var createPreview = function(type, url) {
var preview = null;
if ( type === 'image' ) {
@ -750,18 +751,25 @@ var urlFilteringMenu = (function() {
};
var toggleOn = function(ev) {
if ( dialog !== null ) {
return toggleOff();
}
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;
return toggleOff();
}
var type = cells[4].textContent.trim();
if ( !type ) {
return;
return toggleOff();
}
tabId = tabIdFromClassName(tr.className);
@ -795,7 +803,7 @@ var urlFilteringMenu = (function() {
var candidateURL = cells[5].textContent;
var matches = reRFC3986.exec(candidateURL);
if ( matches === null || !matches[1] || !matches[2] ) {
return;
return toggleOff();
}
uDom(dialog).descendants('.picker').toggleClass(
@ -805,7 +813,7 @@ var urlFilteringMenu = (function() {
// Shortest URL which for a valid URL filtering rule
var candidateRootURL = matches[1] + matches[2];
menuURLs.unshift(candidateRootURL);
targetURLs.unshift(candidateRootURL);
var candidatePath = matches[3] || '';
pos = candidatePath.charAt(0) === '/' ? 1 : 0;
while ( pos < candidatePath.length ) {
@ -813,15 +821,15 @@ var urlFilteringMenu = (function() {
if ( pos === -1 ) {
pos = candidatePath.length;
}
menuURLs.unshift(candidateRootURL + candidatePath.slice(0, pos));
targetURLs.unshift(candidateRootURL + candidatePath.slice(0, pos));
}
var candidateQuery = matches[4] || '';
if ( candidateQuery !== '') {
menuURLs.unshift(candidateRootURL + candidatePath + candidateQuery);
targetURLs.unshift(candidateRootURL + candidatePath + candidateQuery);
}
// Create preview whenever possible
createPreviewIf(type, menuURLs[0]);
createPreview(type, targetURLs[0]);
// Fill menu
var menuEntryTemplate = dialog.querySelector('table.toolbar tr.entry');
@ -829,8 +837,8 @@ var urlFilteringMenu = (function() {
// Adding URL filtering rules
var url, menuEntry;
for ( var i = 0; i < menuURLs.length; i++ ) {
url = menuURLs[i];
for ( var i = 0; i < targetURLs.length; i++ ) {
url = targetURLs[i];
menuEntry = menuEntryTemplate.cloneNode(true);
menuEntry.cells[0].children[0].setAttribute('data-url', url);
menuEntry.cells[1].textContent = url;
@ -839,23 +847,29 @@ var urlFilteringMenu = (function() {
colorize();
document.body.appendChild(menu);
menu.addEventListener('click', onClick, true);
document.body.appendChild(urlFilteringMenu);
urlFilteringMenu.addEventListener('click', onClick, true);
selectContext.addEventListener('change', colorize);
selectType.addEventListener('change', colorize);
};
var toggleOff = function() {
if ( menu.parentNode === null ) {
return;
if ( selectContext !== null ) {
selectContext.removeEventListener('change', colorize);
selectContext = null;
}
uDom('table.toolbar td.preview > *').remove();
uDom(dialog).descendants('div.entries tr').remove();
selectContext.removeEventListener('change', colorize);
selectType.removeEventListener('change', colorize);
menu.removeEventListener('click', onClick, true);
menu.parentNode.removeChild(menu);
menuURLs = [];
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);
targetURLs = [];
};
return {
@ -1169,7 +1183,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)', urlFilteringMenu.toggleOn);
uDom('#content').on('click', 'tr.cat_net > td:nth-of-type(4)', urlFilteringDialog.toggleOn);
});
/******************************************************************************/

8
src/logger-ui.html
View File

@ -47,18 +47,18 @@
<colgroup><col><col></colgroup>
<tbody>
<tr>
<td colspan="2" class="hide preview">
<td colspan="2" class="hide preview"></td>
<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;
<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">Dynamic URL filtering</div>
<div class="header" data-i18n="loggerURLFilteringHeader"></div>
<div class="entries">
<table>
<colgroup><col><col></colgroup>