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", "message":"Apply changes",
"description":"English: 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":{ "logRequestsHeaderType":{
"message":"Type", "message":"Type",
"description":"English: Type" "description":"English: Type"
@ -395,14 +379,6 @@
"message":"Filter", "message":"Filter",
"description":"English: 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":{ "logAll":{
"message":"All", "message":"All",
"description":"Appears in the logger's tab selector" "description":"Appears in the logger's tab selector"
@ -419,6 +395,18 @@
"message":"Maximum number of log entries", "message":"Maximum number of log entries",
"description":"Tooltip informaing that the input field is to set the maximum number of entries in the log" "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":{ "aboutChangelog":{
"message":"Change log", "message":"Change log",
"description":"English: Change log" "description":"English: Change log"

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

@ -310,6 +310,7 @@ body[dir="rtl"] #popupContainer > div {
#urlFilteringMenu .dialog td { #urlFilteringMenu .dialog td {
border: 0; border: 0;
padding: 0;
vertical-align: middle; vertical-align: middle;
} }
#urlFilteringMenu .dialog > table.toolbar td.preview { #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 { #urlFilteringMenu .dialog > div.entries tr.entry > td:first-of-type {
border: 0; border: 0;
border-right: 1px solid white; border-right: 1px solid white;
padding: 0;
text-align: center; text-align: center;
} }
#urlFilteringMenu .dialog > div.entries tr.entry > td > div.action { #urlFilteringMenu .dialog > div.entries tr.entry > td > div.action {

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

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