Report ruleset stats in popup panel

platform/mv3/extension/css/popup.css

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

platform/mv3/extension/js/background.js

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

platform/mv3/extension/js/popup.js

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

platform/mv3/extension/popup.html

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

platform/mv3/make-rulesets.js

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

platform/mv3/ruleset-config.js

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

src/css/themes/default.css

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