[mv3] Prevent enabling more filter lists than allowed

Related issue:
- https://github.com/uBlockOrigin/uBOL-issues/issues/56#issuecomment-1627692213

platform/mv3/extension/css/settings.css

@@ -144,6 +144,11 @@ p {
     display: none;
 }
 
+body.noMoreRuleset .listEntry:not(.checked) {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
 /* touch-screen devices */
 :root.mobile .listEntry .fa-icon {
     font-size: 120%;

platform/mv3/extension/js/background.js

@@ -191,6 +191,7 @@ function onMessage(request, sender, callback) {
             callback({
                 defaultFilteringMode,
                 enabledRulesets,
+                maxNumberOfEnabledRulesets: dnr.MAX_NUMBER_OF_ENABLED_STATIC_RULESETS,
                 rulesetDetails: Array.from(rulesetDetails.values()),
                 autoReload: rulesetConfig.autoReload === 1,
                 firstRun,

platform/mv3/extension/js/settings.js

@@ -221,10 +221,12 @@ const renderWidgets = function() {
     qs$('#autoReload input[type="checkbox"').checked = cachedRulesetData.autoReload;
 
     // Compute total counts
+    let rulesetCount = 0;
     let filterCount = 0;
     let ruleCount = 0;
     for ( const liEntry of qsa$('#lists .listEntry[data-listkey]') ) {
-        if ( qs$(liEntry, 'input[type="checkbox"]:checked')  === null ) { continue; }
+        if ( qs$(liEntry, 'input[type="checkbox"]:checked') === null ) { continue; }
+        rulesetCount += 1;
         const stats = rulesetStats(liEntry.dataset.listkey);
         if ( stats === undefined ) { continue; }
         ruleCount += stats.ruleCount;
@@ -234,6 +236,10 @@ const renderWidgets = function() {
         .replace('{{ruleCount}}', ruleCount.toLocaleString())
         .replace('{{filterCount}}', filterCount.toLocaleString())
     );
+
+    dom.cl.toggle(dom.body, 'noMoreRuleset',
+        rulesetCount === cachedRulesetData.maxNumberOfEnabledRulesets
+    );
 };
 
 /******************************************************************************/
@@ -292,7 +298,9 @@ dom.on('#autoReload input[type="checkbox"', 'change', ev => {
 async function applyEnabledRulesets() {
     const enabledRulesets = [];
     for ( const liEntry of qsa$('#lists .listEntry[data-listkey]') ) {
-        if ( qs$(liEntry, 'input[type="checkbox"]:checked') === null ) { continue; }
+        const checked = qs$(liEntry, 'input[type="checkbox"]:checked') !== null;
+        dom.cl.toggle(liEntry, 'checked', checked);
+        if ( checked === false ) { continue; }
         enabledRulesets.push(liEntry.dataset.listkey);
     }