Issue 2376 - Implement custom filters in new options page

options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 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 89 matching lines @@
       table.appendChild(template);
     }
     this.items.length = 0;
   };
 
   function onToggleSubscriptionClick(e)
   {
     e.preventDefault();
     var subscriptionUrl = e.target.parentNode.dataset.access;
     if (!e.target.checked)
-      removeSubscription(subscriptionUrl);
+    {
+       ext.backgroundPage.sendMessage(
+        {
+          type: "subscriptions.remove",
+          url: subscriptionUrl
+        });
+    }
     else
       addEnableSubscription(subscriptionUrl);
   }
 
   function onAddLanguageSubscriptionClick(e)
   {
     e.preventDefault();
     var url = this.parentNode.dataset.access;
     addEnableSubscription(url);
   }
 
   function onRemoveFilterClick()
   {
     var filter = this.parentNode.dataset.access;
-    removeFilter(filter);
+    ext.backgroundPage.sendMessage(
+    {
+      type: "filters.remove",
+      text: filter
+    });
   }
 
   collections.popular = new Collection(
   [
     {
       id: "recommend-list-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.langs = new Collection(
@@ skipping 210 matching lines @@
       var searchStyle = E("search-style");
       if (!this.value)
         searchStyle.innerHTML = "";
       else
         searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
     }
 
     function isEnterPressed(e)
     {
       // e.keyCode has been deprecated so we attempt to use e.key
-      // keyCode "13" corresponds to "Enter"
-      return (e.key && e.key == "Enter") || (!e.key && e.keyCode == 13);

[Sebastian Noack, 2015/07/09 12:12:15]

Please don't duplicate the check for presence of e.key:

if ("key" in e)
  return e.key == "Enter";
return e.keyCode == 13;

[saroyanm, 2015/07/09 16:31:42]

Done.

+      if ("key" in e)
+        return e.key == "Enter";
+      return e.keyCode == 13;  // keyCode "13" corresponds to "Enter"
     }
 
     // Initialize navigation sidebar
     ext.backgroundPage.sendMessage(
     {
       type: "app.get",
       what: "addonVersion"
     },
     function(addonVersion)
     {
@@ skipping 43 matching lines @@
         addWhitelistedDomain();
     }, false);
     E("import-blockingList-button").addEventListener("click", function()
     {
       var url = E("blockingList-textbox").value;
       addEnableSubscription(url);
       delete document.body.dataset.dialog;
     }, false);
 
     // Advanced tab
-    var filterTextbox = document.querySelector("#custom-filter-add input");
+    var filterTextbox = document.querySelector("#custom-filters-add input");
     placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeholder");
     filterTextbox.setAttribute("placeholder", placeholderValue);
     function addCustomFilters()
     {
+      var filterText = filterTextbox.value;
       ext.backgroundPage.sendMessage(
       {
-        type: "filter.parse",
-        text: filterTextbox.value
-      },
-      function(result)
-      {
-        if (result.error)
-        {
-          alert(result.error);
-          return;
-        }
-        if (result.filter)
-        {
-          ext.backgroundPage.sendMessage(
-          {
-            type: "filters.add",
-            text: result.filter.text
-          });
-        }
-
-        filterTextbox.value = "";
+        type: "filters.add",
+        text: filterText
       });
-    }
-    E("custom-filter-add").addEventListener("submit", function(e)
+      filterTextbox.value = "";
+    }
+    E("custom-filters-add").addEventListener("submit", function(e)
     {
       e.preventDefault();
       addCustomFilters();
     }, false);
     var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");
     E("custom-filters-edit-wrapper").addEventListener("click", function(e)
     {
       var target = null;
-      if (e.target.tagName == "BUTTON")

[Thomas Greiner, 2015/07/09 11:07:56]

Use `e.target.localName == "button"` instead because its output is more
consistent.

[saroyanm, 2015/07/09 16:31:42]

Done.

+      if (e.target.localName == "button")
         target = e.target;
-      else if (e.target.parentElement.tagName == "BUTTON")
+      else if (e.target.parentElement.localName == "button")
         target = e.target.parentElement;
       else
         return;

[Thomas Greiner, 2015/07/09 11:07:56]

The most flexible way to achieve this is to go up the hierarchy until you find a
matching element.

Note that I implemented this in the review for #2357 (see
https://codereview.adblockplus.org/29321417/diff/29321418/options.js#newcode319)
so it would be great if we could merge those together into a single listener
later on.

[saroyanm, 2015/07/09 16:31:42]

Should we keep it as it is now and add merge it in 2357 ?

[Thomas Greiner, 2015/07/10 12:38:53]

Yes, either in #2357 or a later review.

 
       var id = target.id;
       E("custom-filters").classList.toggle("mode-edit");

[Sebastian Noack, 2015/07/09 12:12:15]

classList.toggle() isn't supported in older Safari versions.

[saroyanm, 2015/07/09 16:31:42]

According to MDN it's supported from 5.1, but webkit has a bug which is
currently fixed:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Specification

Can you please confirm that toggle is not supported in Safari 6 ?

[Sebastian Noack, 2015/07/10 07:31:00]

It might be that I confused this with the second parameter of toggle() not being
supported before Safari 7 (http://caniuse.com/#feat=classlist). So the way we
use toggle() here should be fine.

-      if (id == "custom-filters-edit-btn")
+      if (id == "custom-filters-show-edit")
         editCustomFilters();
-      else if (id == "custom-filters-save-btn")
+      else if (id == "custom-filters-raw-save")
       {
         ext.backgroundPage.sendMessage(
         {
           type: "filters.importRaw",
           text: E("custom-filters-raw").value
         });
       }
     }, false);
   }
 
@@ skipping 110 matching lines @@
     var message = {
       type: messageType,
       url: url
     };
     if (title)
       message.title = title;
     if (homepage)
       message.homepage = homepage;
 
     ext.backgroundPage.sendMessage(message);
-  }
-
-  function removeSubscription(url)
-  {
-    ext.backgroundPage.sendMessage(
-    {
-      type: "subscriptions.remove",
-      url: url
-    });
-  }
-
-  function removeFilter(filter)
-  {
-    ext.backgroundPage.sendMessage(
-    {
-      type: "filters.remove",
-      text: filter
-    });
   }
 
   function onFilterMessage(action, filter)
   {
     switch (action)
     {
       case "added":
         updateFilter(filter);
         updateShareLink();
         break;
@@ skipping 86 matching lines @@
       link: link
     }, callback);
   }
 
   ext.onMessage.addListener(function(message)
   {
     switch (message.type)
     {
       case "app.listen":
         if (message.action == "addSubscription")
-          showAddSubscriptionDialog(message.args[0]);
+        {
+          E("blockingList-textbox").value = message.args[0].url;
+          openDialog("customlist");
+        }
+        else if (message.action == "error")
+        {
+          alert(message.args.join("\n"));
+        }
         break;
       case "filters.listen":
         onFilterMessage(message.action, message.args[0]);
         break;
       case "subscriptions.listen":
         onSubscriptionMessage(message.action, message.args[0]);
         break;
     }
   });
 
   ext.backgroundPage.sendMessage(
   {
     type: "app.listen",
-    filter: ["addSubscription"]
+    filter: ["addSubscription", "error"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "filters.listen",
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();