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
This commit is contained in:
Raymond Hill 2021-04-13 09:08:53 -04:00
parent f5b453fae3
commit 58505cfddc
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
3 changed files with 22 additions and 30 deletions

View file

@ -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"

View file

@ -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');
});
/******************************************************************************/

View file

@ -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>