From 58505cfddcabf216fdfdd1150eedfc2f28f36435 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Tue, 13 Apr 2021 09:08:53 -0400
Subject: [PATCH] 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:
- https://github.com/uBlockOrigin/uBlock-issues/issues/210
---
 src/_locales/en/messages.json |  8 +++++++
 src/js/popup-fenix.js         | 40 +++++++++++------------------------
 src/popup-fenix.html          |  4 ++--
 3 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 470ee4401..e3b58d437 100644
--- 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
index 7b0383f4c..8032f2ed3 100644
--- 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' ]);
-        });
+/******************************************************************************/
 
-    // 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 emphasis of rows with[out] 3rd-party scripts/frames
+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', ( ) => {
+        document.getElementById('firewall').classList.toggle('show3pFrame');
+    });
 
 /******************************************************************************/
 
diff --git a/src/popup-fenix.html b/src/popup-fenix.html
index 2ef5ef2d6..1490ea673 100644
--- 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>