Finalize 3rd-party scripts/frames mini-filtering widget

For now the mini-filtering widget on 3rd-party scripts/frames cells will allow to emphasize rows which have 3rd-party scripts and/or frames. Somewhat related issue: - uBlockOrigin/uBlock-issues#210
gorhill · Apr 13, 2021 · 58505cf · 58505cf
1 parent f5b453f
commit 58505cf
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 29 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -267,6 +267,14 @@
     "message": "Version",
     "description": "Example of use: Version 1.26.4"
   },
+  "popup3pScriptFilterTip": {
+    "message": "↑: Emphasize rows which have 3rd-party scripts",
+    "description": "Tooltip shown when hovering small filtering widget in '3rd-party scripts' cell"
+  },
+  "popup3pFrameFilterTip": {
+    "message": "↑: Emphasize rows which have 3rd-party frames",
+    "description": "Tooltip shown when hovering small filtering widget in '3rd-party frames' cell"
+  },
   "pickerCreate": {
     "message": "Create",
     "description": "English: Create"

diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js
@@ -1374,35 +1374,19 @@ uDom('#saveRules').on('click', saveFirewallRules);
 uDom('#revertRules').on('click', ( ) => { revertFirewallRules(); });
 uDom('a[href]').on('click', gotoURL);
 
+/******************************************************************************/
+
 // Toggle emphasis of rows with[out] 3rd-party scripts/frames
-{
-    const nextStep = (target, steps) => {
-        const firewall = document.getElementById('firewall');
-        const cl = firewall.classList;
-        if ( cl.contains(steps[0]) ) {
-            cl.remove(steps[0]);
-            if ( firewall.querySelector(target) !== null ) {
-                cl.add(steps[1]);
-            }
-            return;
-        }
-        if ( cl.contains(steps[1]) ) {
-            cl.remove(steps[1]);
-            return;
-        }
-        cl.add(steps[0]);
-    };
-    document.querySelector('#firewall > [data-type="3p-script"] .filter')
-        .addEventListener('click', ( ) => {
-            nextStep('.is3p.hasScript', [ 'show3pScript', 'hide3pScript' ]);
-        });
+document.querySelector('#firewall > [data-type="3p-script"] .filter')
+    .addEventListener('click', ( ) => {
+        document.getElementById('firewall').classList.toggle('show3pScript');
+    });
 
-    // Toggle visibility of rows with[out] 3rd-party frames
-    document.querySelector('#firewall > [data-type="3p-frame"] .filter')
-        .addEventListener('click', ( ) => {
-            nextStep('.is3p.hasFrame', [ 'show3pFrame', 'hide3pFrame' ]);
-        });
-}
+// Toggle visibility of rows with[out] 3rd-party frames
+document.querySelector('#firewall > [data-type="3p-frame"] .filter')
+    .addEventListener('click', ( ) => {
+        document.getElementById('firewall').classList.toggle('show3pFrame');
+    });
 
 /******************************************************************************/
 

diff --git a/src/popup-fenix.html b/src/popup-fenix.html
@@ -82,8 +82,8 @@
         <div data-des="*" data-type="3p"><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
         <div data-des="*" data-type="inline-script"><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
         <div data-des="*" data-type="1p-script"><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
-        <div data-des="*" data-type="3p-script"><span><span class="filter" title="&#x2191;: Emphasize rows which have 3rd-party scripts&#x0A;&#x2193;: De-emphasize rows which have 3rd-party scripts"></span><span data-i18n="popup3pScriptRulePrompt"></span></span><span data-src="/"> </span><span data-src="."> </span></div>
-        <div data-des="*" data-type="3p-frame"><span><span class="filter" title="&#x2191;: Emphasize rows which have 3rd-party frames&#x0A;&#x2193;: De-emphasize rows which have 3rd-party frames"></span><span data-i18n="popup3pFrameRulePrompt"></span></span><span data-src="/"> </span><span data-src="."> </span></div>
+        <div data-des="*" data-type="3p-script"><span><span class="filter" data-i18n-title="popup3pScriptFilterTip"></span><span data-i18n="popup3pScriptRulePrompt"></span></span><span data-src="/"> </span><span data-src="."> </span></div>
+        <div data-des="*" data-type="3p-frame"><span><span class="filter" data-i18n-title="popup3pFrameFilterTip"></span><span data-i18n="popup3pFrameRulePrompt"></span></span><span data-src="/"> </span><span data-src="."> </span></div>
     </div>
 </div>