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, onSuccess)
+  function sendMessageHandleErrors(message, callback)
   {
     browser.runtime.sendMessage(message, (errors) =>
     {
-      if (errors.length > 0)
-        alert(errors.join("\n"));
-      else if (onSuccess)
-        onSuccess();
+      if (callback)
+      {
+        if (errors.length > 0)
+          callback(errors);
+        else
+          callback();
+      }
     });
   }
 
   function switchTab(id)
   {
     location.hash = id;
   }
 
   function execAction(action, element)
   {
@@ skipping 73 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").value;
         sendMessageHandleErrors({
           type: "filters.importRaw",
-          text: E("custom-filters-raw").value,
+          text: filters,
           removeExisting: true
         },
-        () =>
+        (errors) =>
         {
-          setCustomFiltersView("read");
+          if (errors)
+          {
+            E("custom-filters").classList.add("warning");

[saroyanm, 2018/02/02 16:57:20]

Detail: You can avoid duplication by moving this also into
"clearAndGetCustomFiltersError"

[a.giammarchi, 2018/02/02 17:22:00]

there's no duplication? this is .add the other one is .remove. Putting this
inside clearAndGetCustomFiltersError function means the order of adding the
class warning is now coupled with another element, the vustomFiltersEditor.

I'll do that, but I think it's a bit of a dirty approach.

[saroyanm, 2018/02/02 17:58:57]

Sorry, I missed that. I agree with you that it's not a duplication.

+            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;
       case "switch-acceptable-ads":
         let value = element.value || element.dataset.value;
         // User check the checkbox
         let shouldCheck = element.getAttribute("aria-checked") != "true";
         let installAcceptableAds = false;
@@ skipping 73 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").classList.remove("warning");
+      clearAndGetCustomFiltersError();
       customFiltersElement.disabled = true;
       if (!customFiltersElement.value)
       {
         setCustomFiltersView("empty");
         return;
       }
     }
     else if (mode == "write")
     {
       customFiltersElement.disabled = false;
@@ skipping 143 matching lines @@
 
     // General tab
     getDocLink("contribute", (link) =>
     {
       E("contribute").href = link;
     });
     getDocLink("acceptable_ads_criteria", (link) =>
     {
       setLinks("enable-acceptable-ads-description", link);
     });
-    setElementText(E("tracking-warning-1"), "options_tracking_warning_1", 
+    setElementText(E("tracking-warning-1"), "options_tracking_warning_1",
       [getMessage("common_feature_privacy_title"),
-      getMessage("options_acceptableAds_ads_label")]);
-    setElementText(E("tracking-warning-3"), "options_tracking_warning_3", 
+       getMessage("options_acceptableAds_ads_label")]);
+    setElementText(E("tracking-warning-3"), "options_tracking_warning_3",
       [getMessage("options_acceptableAds_privacy_label")]);
 
     getDocLink("privacy_friendly_ads", (link) =>
     {
       E("enable-acceptable-ads-privacy-description").href = link;
     });
     getDocLink("adblock_plus_{browser}_dnt", url =>
     {
       setLinks("dnt", url);
     });
@@ skipping 21 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-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 112 matching lines @@
         setPrivacyConflict();
         break;
       case "downloading":
       case "downloadStatus":
       case "homepage":
       case "lastDownload":
       case "title":
         updateSubscription(subscription);
         break;
       case "added":
-        let {url, recommended} = subscription;
+        let {url} = subscription;
         // Handle custom subscription
         if (/^~user/.test(url))
         {
           loadCustomFilters(subscription.filters);
           return;
         }
         else if (url in subscriptionsMap)
           updateSubscription(subscription);
         else
           addSubscription(subscription);
@@ skipping 160 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);
 }