From 93a3965e53202d87aee87d152cc1344b6a3d92cd Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Tue, 26 May 2015 09:52:09 -0400
Subject: [PATCH] fine tuning dynamic URL filtering UI + i18n

---
 src/_locales/en/messages.json | 36 +++++---------
 src/css/logger-ui.css         |  4 +-
 src/js/logger-ui.js           | 94 ++++++++++++++++++++---------------
 src/logger-ui.html            |  8 +--
 4 files changed, 72 insertions(+), 70 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index f26b32dd9..f361eadf3 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -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"
diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index d21fe8d83..6ae5ff4fe 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -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 {
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index a13e2928b..e347d8afe 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -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);
 });
 
 /******************************************************************************/
diff --git a/src/logger-ui.html b/src/logger-ui.html
index 9db6201bb..05c7d4033 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -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>