[mv3] Add option to disable toolbar icon badge

Related issue:
https://github.com/uBlockOrigin/uBOL-home/issues/119

platform/mv3/extension/_locales/en/messages.json

@@ -154,5 +154,9 @@
   "autoReloadLabel": {
     "message": "Automatically reload page when changing filtering mode",
     "description": "Label for a checkbox in the options page"
+  },
+  "showBlockedCountLabel": {
+    "message": "Show the number of blocked requests on the toolbar icon",
+    "description": "Label for a checkbox in the options page"
   }
 }

platform/mv3/extension/css/settings.css

@@ -22,6 +22,14 @@ p {
     white-space: pre-line;
     }
 
+section > div {
+    padding: 0 var(--default-gap-xxsmall);
+    }
+
+#showBlockedCount:has(input[type="checkbox"][disabled]) {
+    opacity: 0.5;
+    }
+
 #defaultFilteringMode {
     display: grid;
     gap: 1em;

platform/mv3/extension/dashboard.html

@@ -25,6 +25,13 @@
     </div>
     <!-- -------- -->
     <section data-pane="settings">
+        <div>
+            <h3 data-i18n="behaviorSectionLabel"></h3>
+            <p><label id="autoReload" data-i18n="autoReloadLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label>
+            </p>
+            <p><label id="showBlockedCount" data-i18n="showBlockedCountLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label>
+        </div>
+
         <div class="firstRun">
             <h3 data-i18n="firstRunSectionLabel"></h3>
             <p data-i18n="firstRunDescription"></p>
@@ -89,12 +96,6 @@
             </p>
         </div>
 
-        <div>
-            <h3 data-i18n="behaviorSectionLabel"></h3>
-            <p><label id="autoReload" data-i18n="autoReloadLabel"><span class="input checkbox"><input type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span>_</label>
-            </p>
-        </div>
-
         <div>
             <h3 data-i18n="aboutFilterLists"></h3>
             <div>

platform/mv3/extension/js/background.js

@@ -19,58 +19,57 @@
     Home: https://github.com/gorhill/uBlock
 */
 
-/* jshint esversion:11 */
-
-'use strict';
-
 /******************************************************************************/
 
 import {
+    adminRead,
     browser,
     dnr,
-    runtime,
     localRead, localWrite,
+    runtime,
     sessionRead, sessionWrite,
-    adminRead,
 } from './ext.js';
 
-import {
-    getRulesetDetails,
-    defaultRulesetsFromLanguage,
-    enableRulesets,
-    getEnabledRulesetsDetails,
-    updateDynamicRules,
-} from './ruleset-manager.js';
-
-import {
-    registerInjectables,
-} from './scripting-manager.js';
-
-import {
-    getFilteringMode,
-    setFilteringMode,
-    getDefaultFilteringMode,
-    setDefaultFilteringMode,
-    getTrustedSites,
-    setTrustedSites,
-    syncWithBrowserPermissions,
-} from './mode-manager.js';
-
 import {
     broadcastMessage,
     ubolLog,
 } from './utils.js';
 
+import {
+    defaultRulesetsFromLanguage,
+    enableRulesets,
+    getEnabledRulesetsDetails,
+    getRulesetDetails,
+    updateDynamicRules,
+} from './ruleset-manager.js';
+
+import {
+    getDefaultFilteringMode,
+    getFilteringMode,
+    getTrustedSites,
+    setDefaultFilteringMode,
+    setFilteringMode,
+    setTrustedSites,
+    syncWithBrowserPermissions,
+} from './mode-manager.js';
+
+import {
+    registerInjectables,
+} from './scripting-manager.js';
+
 /******************************************************************************/
 
 const rulesetConfig = {
     version: '',
     enabledRulesets: [ 'default' ],
     autoReload: true,
+    showBlockedCount: true,
 };
 
 const UBOL_ORIGIN = runtime.getURL('').replace(/\/$/, '');
 
+const canShowBlockedCount = typeof dnr.setExtensionActionOptions === 'function';
+
 let firstRun = false;
 let wakeupRun = false;
 
@@ -85,7 +84,12 @@ async function loadRulesetConfig() {
     if ( data ) {
         rulesetConfig.version = data.version;
         rulesetConfig.enabledRulesets = data.enabledRulesets;
-        rulesetConfig.autoReload = data.autoReload && true || false;
+        rulesetConfig.autoReload = typeof data.autoReload === 'boolean'
+            ? data.autoReload
+            : true;
+        rulesetConfig.showBlockedCount = typeof data.showBlockedCount === 'boolean'
+            ? data.showBlockedCount
+            : true;
         wakeupRun = true;
         return;
     }
@@ -93,7 +97,12 @@ async function loadRulesetConfig() {
     if ( data ) {
         rulesetConfig.version = data.version;
         rulesetConfig.enabledRulesets = data.enabledRulesets;
-        rulesetConfig.autoReload = data.autoReload && true || false;
+        rulesetConfig.autoReload = typeof data.autoReload === 'boolean'
+            ? data.autoReload
+            : true;
+        rulesetConfig.showBlockedCount = typeof data.showBlockedCount === 'boolean'
+            ? data.showBlockedCount
+            : true;
         sessionWrite('rulesetConfig', rulesetConfig);
         return;
     }
@@ -201,6 +210,8 @@ function onMessage(request, sender, callback) {
                 maxNumberOfEnabledRulesets: dnr.MAX_NUMBER_OF_ENABLED_STATIC_RULESETS,
                 rulesetDetails: Array.from(rulesetDetails.values()),
                 autoReload: rulesetConfig.autoReload,
+                showBlockedCount: rulesetConfig.showBlockedCount,
+                canShowBlockedCount,
                 firstRun,
             });
             firstRun = false;
@@ -216,6 +227,19 @@ function onMessage(request, sender, callback) {
         });
         return true;
 
+    case 'setShowBlockedCount':
+        rulesetConfig.showBlockedCount = request.state && true || false;
+        if ( canShowBlockedCount ) {
+            dnr.setExtensionActionOptions({
+                displayActionCountAsBadgeText: rulesetConfig.showBlockedCount,
+            });
+        }
+        saveRulesetConfig().then(( ) => {
+            callback();
+            broadcastMessage({ showBlockedCount: rulesetConfig.showBlockedCount });
+        });
+        return true;
+
     case 'popupPanelData': {
         Promise.all([
             getFilteringMode(request.hostname),
@@ -329,8 +353,10 @@ async function start() {
 
     // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/declarativeNetRequest
     //   Firefox API does not support `dnr.setExtensionActionOptions`
-    if ( wakeupRun === false && dnr.setExtensionActionOptions ) {
-        dnr.setExtensionActionOptions({ displayActionCountAsBadgeText: true });
+    if ( wakeupRun === false && canShowBlockedCount ) {
+        dnr.setExtensionActionOptions({
+            displayActionCountAsBadgeText: rulesetConfig.showBlockedCount,
+        });
     }
 
     runtime.onMessage.addListener(onMessage);

platform/mv3/extension/js/settings.js

@@ -19,11 +19,9 @@
     Home: https://github.com/gorhill/uBlock
 */
 
-'use strict';
-
-import { browser, sendMessage, localRead, localWrite } from './ext.js';
-import { i18n$, i18n } from './i18n.js';
+import { browser, localRead, localWrite, sendMessage } from './ext.js';
 import { dom, qs$, qsa$ } from './dom.js';
+import { i18n, i18n$ } from './i18n.js';
 import punycode from './punycode.js';
 
 /******************************************************************************/
@@ -211,7 +209,17 @@ function renderWidgets() {
     renderDefaultMode();
     renderTrustedSites();
 
-    qs$('#autoReload input[type="checkbox"').checked = cachedRulesetData.autoReload;
+    qs$('#autoReload input[type="checkbox"]').checked = cachedRulesetData.autoReload;
+
+    {
+        const input = qs$('#showBlockedCount input[type="checkbox"]');
+        if ( cachedRulesetData.canShowBlockedCount ) {
+            input.checked = cachedRulesetData.showBlockedCount;
+        } else {
+            input.checked = false;
+            dom.attr(input, 'disabled', '');
+        }
+    }
 
     // Compute total counts
     let rulesetCount = 0;
@@ -290,13 +298,20 @@ dom.on(
 
 /******************************************************************************/
 
-dom.on('#autoReload input[type="checkbox"', 'change', ev => {
+dom.on('#autoReload input[type="checkbox"]', 'change', ev => {
     sendMessage({
         what: 'setAutoReload',
         state: ev.target.checked,
     });
 });
 
+dom.on('#showBlockedCount input[type="checkbox"]', 'change', ev => {
+    sendMessage({
+        what: 'setShowBlockedCount',
+        state: ev.target.checked,
+    });
+});
+
 /******************************************************************************/
 
 function renderTrustedSites() {
@@ -455,6 +470,13 @@ bc.onmessage = ev => {
         }
     }
 
+    if ( message.showBlockedCount !== undefined ) {
+        if ( message.showBlockedCount !== local.showBlockedCount ) {
+            local.showBlockedCount = message.showBlockedCount;
+            render = true;
+        }
+    }
+
     if ( message.enabledRulesets !== undefined ) {
         if ( hashFromIterable(message.enabledRulesets) !== hashFromIterable(local.enabledRulesets) ) {
             local.enabledRulesets = message.enabledRulesets;