Report ruleset stats in popup panel

This commit is contained in:
Raymond Hill 2022-09-08 10:04:08 -04:00
parent 41d66a78ba
commit 1258414f37
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
7 changed files with 178 additions and 19 deletions

View File

@ -106,7 +106,8 @@ body.needSave #revertRules {
visibility: visible;
}
#hostname {
margin: var(--popup-gap) var(--popup-gap-extra-thin);
font-size: var(--font-size-larger);
margin: var(--popup-gap) var(--popup-gap-thin);
text-align: center;
}
#hostname > span {
@ -116,6 +117,18 @@ body.needSave #revertRules {
font-weight: 600;
}
#rulesetStats {
padding: 0 var(--popup-gap-thin);
}
#rulesetStats > h1 {
font-size: 1em;
margin-bottom: var(--popup-gap-thin);
}
#rulesetStats > p {
font-size: var(--font-size-smaller);
margin: var(--popup-gap-thin) 0 var(--popup-gap) var(--popup-gap-thin);
}
.itemRibbon {
column-gap: var(--popup-gap);
display: grid;
@ -170,6 +183,39 @@ body.mobile.no-tooltips .toolRibbon .tool {
margin-top: var(--default-gap);
}
#moreOrLess {
column-gap: 0;
display: grid;
grid-template: auto / 1fr 1fr;
justify-items: stretch;
margin: 1px 0 0 0;
}
#moreOrLess > span {
cursor: pointer;
margin: 0;
padding: var(--popup-gap-thin) var(--popup-gap);
user-select: none;
white-space: nowrap;
}
#moreButton .fa-icon {
transform: rotate(180deg);
}
#lessButton {
border-inline-start: 1px solid var(--surface-1);
text-align: end;
}
body[data-section="a"] #moreButton {
pointer-events: none;
visibility: hidden;
}
body[data-section=""] #lessButton {
pointer-events: none;
visibility: hidden;
}
body:not([data-section~="a"]) [data-section="a"] {
display: none;
}
/* configurable UI elements */
:root:not(.mobile) .toolRibbon .caption,
:root.mobile body.no-tooltips .toolRibbon .caption,
@ -185,6 +231,9 @@ body.mobile.no-tooltips .toolRibbon .tool {
:root.mobile body[data-ui~="-captions"] .toolRibbon .tool {
padding: var(--popup-gap) var(--popup-gap-thin);
}
:root.mobile #moreOrLess > span {
padding: var(--popup-gap);
}
/* horizontally-constrained viewport */
:root.portrait body {

View File

@ -15,7 +15,7 @@ async function updateRegexRules() {
const toCheck = [];
for ( const details of rulesetDetails ) {
if ( details.enabled !== true ) { continue; }
for ( const rule of details.ruleDetails.regexes ) {
for ( const rule of details.rules.regexes ) {
const regex = rule.condition.regexFilter;
const isCaseSensitive = rule.condition.isUrlFilterCaseSensitive === true;
allRules.push(rule);
@ -171,9 +171,18 @@ async function toggleTrustedSiteDirective(details) {
chrome.runtime.onMessage.addListener((request, sender, callback) => {
switch ( request.what ) {
case 'matchesTrustedSiteDirective':
case 'popupPanelData':
matchesTrustedSiteDirective(request).then(response => {
callback(response);
callback({
isTrusted: response,
rulesetDetails: rulesetDetails.filter(details =>
details.enabled
).map(details => ({
name: details.name,
filterCount: details.filters.accepted,
ruleCount: details.rules.accepted,
})),
});
});
return true;
case 'toggleTrustedSiteDirective':

View File

@ -28,6 +28,26 @@ let originalTrustedState = false;
/******************************************************************************/
class safeLocalStorage {
static getItem(k) {
try {
return self.localStorage.getItem(k);
}
catch(ex) {
}
return null;
}
static setItem(k, v) {
try {
self.localStorage.setItem(k, v);
}
catch(ex) {
}
}
}
/******************************************************************************/
async function toggleTrustedSiteDirective() {
let url;
try {
@ -42,7 +62,9 @@ async function toggleTrustedSiteDirective() {
origin: url.origin,
state: targetTrustedState,
tabId: currentTab.id,
}).catch(( ) => targetTrustedState === false);
}).catch(( ) =>
targetTrustedState === false
);
document.body.classList.toggle('off', newTrustedState === true);
document.body.classList.toggle(
'needReload',
@ -73,17 +95,18 @@ async function init() {
} catch(ex) {
}
let popupPanelData;
if ( url !== undefined ) {
originalTrustedState = await chrome.runtime.sendMessage({
what: 'matchesTrustedSiteDirective',
popupPanelData = await chrome.runtime.sendMessage({
what: 'popupPanelData',
origin: url.origin,
}) === true;
});
originalTrustedState = popupPanelData.isTrusted === true;
}
const body = document.body;
body.classList.toggle('off', originalTrustedState);
const elemHn = document.querySelector('#hostname');
elemHn.textContent = url && url.hostname || '';
document.querySelector('#switch').addEventListener(
@ -96,6 +119,18 @@ async function init() {
reloadTab
);
if ( popupPanelData ) {
const parent = document.querySelector('#rulesetStats');
for ( const details of popupPanelData.rulesetDetails ) {
const h1 = document.createElement('h1');
h1.textContent = details.name;
parent.append(h1);
const p = document.createElement('p');
p.textContent = `${details.ruleCount.toLocaleString()} rules, converted from ${details.filterCount.toLocaleString()} network filters`;
parent.append(p);
}
}
document.body.classList.remove('loading');
return true;
@ -112,3 +147,62 @@ async function tryInit() {
tryInit();
/******************************************************************************/
// The popup panel is made of sections. Visibility of sections can be
// toggled on/off.
const maxNumberOfSections = 1;
const sectionBitsFromAttribute = function() {
const attr = document.body.dataset.section;
if ( attr === '' ) { return 0; }
let bits = 0;
for ( const c of attr.split(' ') ) {
bits |= 1 << (c.charCodeAt(0) - 97);
}
return bits;
};
const sectionBitsToAttribute = function(bits) {
if ( typeof bits !== 'number' ) { return; }
if ( isNaN(bits) ) { return; }
const attr = [];
for ( let i = 0; i < maxNumberOfSections; i++ ) {
const bit = 1 << i;
if ( (bits & bit) === 0 ) { continue; }
attr.push(String.fromCharCode(97 + i));
}
document.body.dataset.section = attr.join(' ');
};
async function toggleSections(more) {
let currentBits = sectionBitsFromAttribute();
let newBits = currentBits;
for ( let i = 0; i < maxNumberOfSections; i++ ) {
const bit = 1 << (more ? i : maxNumberOfSections - i - 1);
if ( more ) {
newBits |= bit;
} else {
newBits &= ~bit;
}
if ( newBits !== currentBits ) { break; }
}
if ( newBits === currentBits ) { return; }
sectionBitsToAttribute(newBits);
safeLocalStorage.setItem('popupPanelSections', newBits);
}
sectionBitsToAttribute(
parseInt(safeLocalStorage.getItem('popupPanelSections'), 10)
);
document.querySelector('#moreButton').addEventListener('click', ( ) => {
toggleSections(true);
});
document.querySelector('#lessButton').addEventListener('click', ( ) => {
toggleSections(false);
});
/******************************************************************************/

View File

@ -11,7 +11,7 @@
<title data-i18n="extName"></title>
</head>
<body class="loading">
<body class="loading" data-section="">
<div id="main">
<div id="sticky">
<div id="stickyTools">
@ -40,12 +40,17 @@
</div>
<div id="hostname"><span></span>&shy;<span></span></div>
</div>
<div id="basicTools" class="toolRibbon">
<span></span>
<span></span>
<span></span>
<span></span>
<a href="dashboard.html" class="fa-icon tool" target="uBODashboard" tabindex="0" data-i18n-title="popupTipDashboard">cogs<span class="caption" data-i18n="popupTipDashboard"></span></a>
<hr data-section="a">
<div id="rulesetStats" data-section="a">
</div>
<hr>
<div id="moreOrLess" class="">
<span id="moreButton">
<span>More</span>&emsp;<span class="fa-icon">angle-up</span>
</span>
<span id="lessButton">
<span class="fa-icon">angle-up</span>&emsp;<span>Less</span>
</span>
</div>
</div>

View File

@ -204,13 +204,14 @@ async function main() {
rulesetDetails.push({
id: ruleset.id,
name: ruleset.name,
enabled: ruleset.enabled,
filterDetails: {
filters: {
total: details.filterCount,
accepted: details.acceptedFilterCount,
rejected: details.rejectedFilterCount,
},
ruleDetails: {
rules: {
total: rules.length,
accepted: good.length,
discarded: redirects.length + headers.length + removeparams.length,

View File

@ -24,7 +24,7 @@
export default [
{
id: 'default',
name: 'Default ruleset',
name: 'Default: Ads and trackers',
enabled: true,
paths: [
],

View File

@ -128,6 +128,7 @@
:root {
--font-size: 14px;
--font-size-smaller: 13px;
--font-size-larger: 15px;
--font-family: Inter, sans-serif;
--monospace-size: 12px;
}