Issue 5549 - Implement missing error handlings for custom filter lists

desktop-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 529 matching lines @@
         if (returnElement)
           return element;
         return element.getAttribute("data-" + dataName);
       }
 
       element = element.parentElement;
     }
     return null;
   }
 
-  function sendMessageHandleErrors(message, onMessage)
+  function sendMessageHandleErrors(message, callback)
   {
     browser.runtime.sendMessage(message, (errors) =>
     {
-      if (onMessage)
-      {
-        if (errors.length > 0) onMessage(errors);
-        else onMessage();
+      if (callback)
+      {
+        if (errors.length > 0)
+          callback(errors);
+        else
+          callback();
       }
     });
   }
 
   function switchTab(id)
   {
     location.hash = id;
   }
 
   function execAction(action, element)
@@ skipping 74 matching lines @@
           text: findParentData(element, "access", false)
         });
         break;
       case "remove-subscription":
         browser.runtime.sendMessage({
           type: "subscriptions.remove",
           url: findParentData(element, "access", false)
         });
         break;
       case "save-custom-filters":
-        const filters = E("custom-filters-raw");
+        const filters = E("custom-filters-raw").value;
         sendMessageHandleErrors({
           type: "filters.importRaw",
-          text: filters.value,
+          text: filters,
           removeExisting: true
         },
         (errors) =>
         {
           if (errors)
           {
-            filters.classList.add("warning");
-            E("custom-filters-edit-error").classList.add("warning");
-            E("link-filters-on-edit-error").classList.add("visible");
-            const lines = filters.value.split(/\n+/);
-            const info = errors.map(error => lines[error.lineno - 1]);
-            const editFilters = E("custom-filters-edit-filters");
-            editFilters.textContent = info.join("\n");
-            if (errors.length > 5) editFilters.classList.add("many");
+            E("custom-filters").classList.add("warning");
+            const customFiltersError = clearAndGetCustomFiltersError();
+
+            // The current error does not contain info about the line
+            // that generated such error.
+            // Whenever the error object will pass the bad filter
+            // within its properties, this split should be removed.
+            const lines = filters.split("\n");
+            const messages = errors.map(error => lines[error.lineno - 1]);
+            for (const message of messages)
+            {
+              const li = document.createElement("li");
+              customFiltersError.appendChild(li).textContent = message;
+            }
+            if (errors.length > 5)
+              customFiltersError.classList.add("many");
           }
           else
           {
             setCustomFiltersView("read");
           }
         });
         break;
       case "show-more-filters-section":
         E("more-filters").setAttribute("aria-hidden", false);
         break;
@@ skipping 78 matching lines @@
           closeDialog();
         }
         else
         {
           form.querySelector(":invalid").focus();
         }
         break;
     }
   }
 
+  function clearAndGetCustomFiltersError()
+  {
+    const customFiltersError = E("custom-filters-error");
+    customFiltersError.textContent = "";
+    customFiltersError.classList.remove("many");
+    return customFiltersError;
+  }
+
   function setCustomFiltersView(mode)
   {
     let customFiltersElement = E("custom-filters-raw");
     updateCustomFiltersUi();
     if (mode == "read")
     {
-      E("custom-filters-raw").classList.remove("warning");
-      E("custom-filters-edit-error").classList.remove("warning");
-      E("link-filters-on-edit-error").classList.remove("visible");
-      const editFilters = E("custom-filters-edit-filters");
-      editFilters.textContent = "";
-      editFilters.classList.remove("many");
+      E("custom-filters").classList.remove("warning");
+      clearAndGetCustomFiltersError();
       customFiltersElement.disabled = true;
       if (!customFiltersElement.value)
       {
         setCustomFiltersView("empty");
         return;
       }
     }
     else if (mode == "write")
     {
       customFiltersElement.disabled = false;
@@ skipping 188 matching lines @@
       type: "app.get",
       what: "features"
     },
     (features) =>
     {
       hidePref("show_devtools_panel", !features.devToolsPanel);
     });
 
     getDocLink("filterdoc", (link) =>
     {
-      E("link-filters").setAttribute("href", link);
-      E("link-filters-on-edit-error").setAttribute("href", link);
+      E("link-filters-1").setAttribute("href", link);
+      E("link-filters-2").setAttribute("href", link);
     });
 
     getDocLink("subscriptions", (link) =>
     {
       E("filter-lists-learn-more").setAttribute("href", link);
     });
 
     E("custom-filters-raw").setAttribute("placeholder",
       getMessage("options_customFilters_edit_placeholder", ["/ads/track/*"]));
 
@@ skipping 174 matching lines @@
       special: true
     },
     (subscriptions) =>
     {
       // Load filters
       for (let subscription of subscriptions)
       {
         browser.runtime.sendMessage({
           type: "filters.get",
           subscriptionUrl: subscription.url
-        },
-        (filters) =>
-        {
-          loadCustomFilters(filters);
-        });
+        }, loadCustomFilters);
       }
     });
     loadRecommendations();
     browser.runtime.sendMessage({
       type: "prefs.get",
       key: "subscriptions_exceptionsurl"
     },
     (url) =>
     {
       acceptableAdsUrl = url;
@@ skipping 293 matching lines @@
   });
   browser.runtime.sendMessage({
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
              "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
   window.addEventListener("hashchange", onHashChange, false);
 }