[mv3] Propagate DNR API errors to "Filter lists" pane

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

platform/mv3/extension/css/settings.css

@@ -92,6 +92,12 @@ body:not(.committing) #commit-spinner {
 body.committing #commit-spinner {
     animation: spin 1s steps(8) infinite;
     }
+#dnrError {
+    color: var(--info3-ink);
+    }
+#dnrError:empty {
+    display: none;
+    }
 section[data-pane="rulesets"] > div:first-of-type > p:first-of-type {
     margin-top: 0;
     }

platform/mv3/extension/dashboard.html

@@ -31,6 +31,7 @@
         <!-- -------- -->
         <div data-pane-related="rulesets">
             <p><span id="listsOfBlockedHostsPrompt"></span> <span id="commit-spinner" class="fa-icon">spinner</span></p>
+            <p id="dnrError"></p>
             <p><input id="findInLists" type="search" spellcheck="false" placeholder="findListsPlaceholder" /></p>
         </div>
     </header>

platform/mv3/extension/js/background.js

@@ -248,15 +248,18 @@ function onMessage(request, sender, callback) {
     switch ( request.what ) {
 
     case 'applyRulesets': {
-        enableRulesets(request.enabledRulesets).then(( ) => {
-            rulesetConfig.enabledRulesets = request.enabledRulesets;
-            return saveRulesetConfig();
-        }).then(( ) => {
-            registerInjectables();
-            callback();
-            return dnr.getEnabledRulesets();
-        }).then(enabledRulesets => {
-            broadcastMessage({ enabledRulesets });
+        enableRulesets(request.enabledRulesets).then(result => {
+            if ( result === undefined || result.error ) {
+                callback(result);
+                return;
+            }
+            rulesetConfig.enabledRulesets = result.enabledRulesets;
+            return saveRulesetConfig().then(( ) => {
+                return registerInjectables();
+            }).then(( ) => {
+                callback(result);
+                broadcastMessage({ enabledRulesets: result.enabledRulesets });
+            });
         });
         return true;
     }
@@ -547,7 +550,7 @@ async function startSession() {
     const rulesetsUpdated = await enableRulesets(rulesetConfig.enabledRulesets);
 
     // We need to update the regex rules only when ruleset version changes.
-    if ( rulesetsUpdated === false ) {
+    if ( rulesetsUpdated === undefined ) {
         if ( isNewVersion ) {
             updateDynamicRules();
         } else {

platform/mv3/extension/js/filter-lists.js

@@ -413,10 +413,11 @@ const applyEnabledRulesets = (( ) => {
         const modified = hashFromIterable(enabledRulesets) !==
             hashFromIterable(cachedRulesetData.enabledRulesets);
         if ( modified ) {
-            await sendMessage({
+            const result = await sendMessage({
                 what: 'applyRulesets',
                 enabledRulesets,
             });
+            dom.text('#dnrError', result?.error || '');
         }
 
         dom.cl.remove(dom.body, 'committing');

platform/mv3/extension/js/ruleset-manager.js

@@ -306,6 +306,9 @@ async function updateDynamicRules() {
     if ( dynamicRegexCount !== 0 ) {
         ubolLog(`Using ${dynamicRegexCount}/${dnr.MAX_NUMBER_OF_REGEX_RULES} dynamic regex-based DNR rules`);
     }
+
+    const response = {};
+
     try {
         await dnr.updateDynamicRules({ addRules, removeRuleIds });
         if ( removeRuleIds.length !== 0 ) {
@@ -316,8 +319,15 @@ async function updateDynamicRules() {
         }
     } catch(reason) {
         console.error(`updateDynamicRules() / ${reason}`);
+        response.error = `${reason}`;
     }
-    await updateSessionRules();
+
+    const result = await updateSessionRules();
+    if ( result?.error ) {
+        response.error ||= result.error;
+    }
+
+    return response;
 }
 
 /******************************************************************************/
@@ -452,6 +462,7 @@ async function updateSessionRules() {
     if ( sessionRegexCount !== 0 ) {
         ubolLog(`Using ${sessionRegexCount}/${dnr.MAX_NUMBER_OF_REGEX_RULES} session regex-based DNR rules`);
     }
+    const response = {};
     try {
         await dnr.updateSessionRules({ addRules, removeRuleIds });
         if ( removeRuleIds.length !== 0 ) {
@@ -462,7 +473,9 @@ async function updateSessionRules() {
         }
     } catch(reason) {
         console.error(`updateSessionRules() / ${reason}`);
+        response.error = `${reason}`;
     }
+    return response;
 }
 
 /******************************************************************************/
@@ -636,9 +649,7 @@ async function enableRulesets(ids) {
         disableRulesetSet.delete(id);
     }
 
-    if ( enableRulesetSet.size === 0 && disableRulesetSet.size === 0 ) {
-        return false;
-    }
+    if ( enableRulesetSet.size === 0 && disableRulesetSet.size === 0 ) { return; }
 
     const enableRulesetIds = Array.from(enableRulesetSet);
     const disableRulesetIds = Array.from(disableRulesetSet);
@@ -649,20 +660,34 @@ async function enableRulesets(ids) {
     if ( disableRulesetIds.length !== 0 ) {
         ubolLog(`Disable ruleset: ${disableRulesetIds}`);
     }
-    await dnr.updateEnabledRulesets({ enableRulesetIds, disableRulesetIds }).catch(reason => {
+
+    const response = {};
+
+    await dnr.updateEnabledRulesets({
+        enableRulesetIds,
+        disableRulesetIds,
+    }).catch(reason => {
         ubolLog(reason);
+        response.error = `${reason}`;
     });
 
-    await updateDynamicRules();
+    const result = await updateDynamicRules();
+    if ( result?.error ) {
+        response.error ||= result.error;
+    }
 
-    dnr.getEnabledRulesets().then(enabledRulesets => {
+    await dnr.getEnabledRulesets().then(enabledRulesets => {
         ubolLog(`Enabled rulesets: ${enabledRulesets}`);
+        response.enabledRulesets = enabledRulesets;
         return dnr.getAvailableStaticRuleCount();
     }).then(count => {
         ubolLog(`Available static rule count: ${count}`);
+        response.staticRuleCount = count;
+    }).catch(reason => {
+        ubolLog(reason);
     });
 
-    return true;
+    return response;
 }
 
 /******************************************************************************/