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 18 matching lines @@
     this.details = details;
     this.items = [];
   }
 
   Collection.prototype.addItems = function() 
   {
     var length = Array.prototype.push.apply(this.items, arguments);
     if (length == 0)
       return;
 
     this.items.sort(function(a, b)

[Thomas Greiner, 2015/06/30 09:23:29]

You need to first filter out all empty lines before sorting them or otherwise
it'll throw an exception if you try to convert a filter to lower case.

[saroyanm, 2015/07/08 18:25:42]

I do wander why we even need to submit the empty string ? 
Maybe make sense to handle that during submission ?

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

Yep, the earlier we can filter those out the better.

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

Done.

     {
       var aValue = (a.title || a.text || a.url).toLowerCase();
-      var bValue = (b.title || b.text || a.url).toLowerCase();

[Thomas Greiner, 2015/06/30 09:23:27]

Be careful: It's `b.url`, not `a.url`

[saroyanm, 2015/07/08 18:25:41]

Done.

+      var bValue = (b.title || b.text || b.url).toLowerCase();
       return aValue.localeCompare(bValue);
     });
 
     for (var j = 0; j < this.details.length; j++) 
     {
       var table = E(this.details[j].id);
       var template = table.querySelector("template");
       for (var i = 0; i < arguments.length; i++) 
       {
         var item = arguments[i];
@@ skipping 47 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 129 matching lines @@
     }
   }
 
   function updateFilter(filter)
   {
     var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
       collections.whitelist.addItems(filter);
-      filtersMap[filter.text] = filter;
     }
     else
-    {
-      // TODO: add `filters[i].text` to list of custom filters

[Thomas Greiner, 2015/06/30 09:23:28]

Remove this comment

[saroyanm, 2015/07/08 18:25:42]

Done.

       collections.customFilters.addItems(filter);
-      filtersMap[filter.text] = filter;

[Thomas Greiner, 2015/06/30 09:23:28]

This line is shared across both branches of the if-statement so I'd suggest
moving it to the end of the function to avoid duplication.

[saroyanm, 2015/07/08 18:25:41]

Done.

-    }
+
+    filtersMap[filter.text] = filter;
   }
 
   function loadRecommendations()
   {
     var request = new XMLHttpRequest();
     request.open("GET", "subscriptions.xml", false);
     request.addEventListener("load", function()
     {
       var list = document.getElementById("subscriptionSelector");
       var docElem = request.responseXML.documentElement;
@@ skipping 33 matching lines @@
 
   function onDOMLoaded()
   {
     var recommendationTemplate = document.querySelector("#recommend-list-table template");
     var popularText = ext.i18n.getMessage("options_popular");
     recommendationTemplate.content.querySelector(".popular").textContent = popularText;
     var languagesTemplate = document.querySelector("#all-lang-table template");
     var buttonText = ext.i18n.getMessage("options_button_add");
     languagesTemplate.content.querySelector(".button-add span").textContent = buttonText;
 
-    updateShareLink();
     populateLists();
 
     var tabList = document.querySelectorAll("#main-navigation-tabs li");
     for (var i = 0; i < tabList.length; i++)
     {
       tabList[i].addEventListener("click", function(e)
       {
         document.body.dataset.tab = e.currentTarget.dataset.show;
       }, false);
     }
 
     function onFindLanguageKeyUp()
     {
       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"
-      if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13))
-        return true;
-      return false;

[Thomas Greiner, 2015/06/30 09:23:28]

Detail: You could reduce that to one line:

return (e.key && e.key == "Enter") || (!e.key && e.keyCode == 13);

[saroyanm, 2015/07/08 18:25:41]

Done. Please note that this function most probably will be removed with the
followup consistency ticket.

-    }
-
-    // Update version number in navigation sidebar
+      if ("key" in e)
+        return e.key == "Enter";
+      return e.keyCode == 13;  // keyCode "13" corresponds to "Enter"
+    }
+
+    // Initialize navigation sidebar
     ext.backgroundPage.sendMessage(
     {
-      method: "app.get",
+      type: "app.get",
       what: "addonVersion"
     },
     function(addonVersion)
     {
       E("abp-version").textContent = addonVersion;
     });
-    
+    getDocLink("releases", function(link)
+    {
+      E("link-version").setAttribute("href", link);
+    });
+
+    getDocLink("contribute", function(link)
+    {
+      document.querySelector("#tab-contribute a").setAttribute("href", link);
+    });
+
+    updateShareLink();
+
+    // Initialize interactive UI elements
     var placeholderValue  = ext.i18n.getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("add-blocking-list").addEventListener("click", function()
     {
       openDialog("customlist");
     }, false);
     E("add-website-language").addEventListener("click", function()
     {
       openDialog("language");
     }, false);
@@ skipping 18 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
-    E("custom-filters-add-textbox").setAttribute("placeholder", ext.i18n.getMessage("options_customFilters_textbox_placeholder"));

[Thomas Greiner, 2015/06/30 09:23:28]

Split this up into two lines to avoid exceeding the 80 character limit.
Preferably consistent with how you do it a few lines above.

[saroyanm, 2015/07/08 18:25:41]

Done.

-    function addCustomFilter()

[Thomas Greiner, 2015/06/30 09:23:28]

"addCustomFilters" please

[saroyanm, 2015/07/08 18:25:41]

Done.

-    {
-      var filterTextbox = E("custom-filters-add-textbox");
+    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: "parse.filter",
-        text: filterTextbox.value
-      },
-      function(result)
-      {
-        if (result.error)
-        {
-          alert(result.error);
-          return;
-        }
-        if (result.filter)
-          addFilter(result.filter.text);
-
-        filterTextbox.value = "";
+        type: "filters.add",
+        text: filterText
       });
-    }
-    E("custom-filters-add-btn").addEventListener("click", addCustomFilter, false);
-    E("custom-filters-add-textbox").addEventListener("keypress", function(e)
-    {
-      if (isEnterPressed(e))
-        addCustomFilter();
+      filterTextbox.value = "";
+    }
+    E("custom-filters-add").addEventListener("submit", function(e)
+    {
+      e.preventDefault();
+      addCustomFilters();
     }, false);
     var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");

[Thomas Greiner, 2015/06/30 09:23:28]

Please avoid setting event listeners individually on each button if you have to
distinguish them within the listener anyway. Instead only listen on the
`#custom-filters-edit-wrapper` element.

[saroyanm, 2015/07/08 18:25:40]

Done.

-    for (var i = 0; i < customFilterEditButtons.length; i++)
-    {
-      customFilterEditButtons[i].addEventListener("click", function(e)
-      {
-        E("custom-filters").dataset.view = e.currentTarget.dataset.show;

[Thomas Greiner, 2015/06/30 09:23:28]

This can be achieved more performantly by toggling a CSS class on that element
(i.e. `E("custom-filters").classList.toggle("mode-edit");`).

[saroyanm, 2015/07/08 18:25:41]

Done.

-        var id = e.currentTarget.id;
-        if (id == "custom-filters-edit-btn")
-          editCustomFilters();
-        else if (id == "custom-filters-save-btn")
-        {
-          ext.backgroundPage.sendMessage(
-          {
-            type: "filters.importRaw",
-            text: E("custom-filters-textarea").value
-          });
-        }
-      }, false);
-    }
+    E("custom-filters-edit-wrapper").addEventListener("click", function(e)
+    {
+      var target = null;
+      if (e.target.localName == "button")
+        target = e.target;
+      else if (e.target.parentElement.localName == "button")
+        target = e.target.parentElement;
+      else
+        return;
+
+      var id = target.id;
+      E("custom-filters").classList.toggle("mode-edit");
+      if (id == "custom-filters-show-edit")
+        editCustomFilters();
+      else if (id == "custom-filters-raw-save")
+      {
+        ext.backgroundPage.sendMessage(
+        {
+          type: "filters.importRaw",
+          text: E("custom-filters-raw").value
+        });
+      }
+    }, false);
   }
 
   function openDialog(name)
   {
     document.body.dataset.dialog = name;
   }
 
   function populateLists()
   {
     subscriptionsMap = Object.create(null);
@@ skipping 60 matching lines @@
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
   }
 
   function editCustomFilters()
   {
     var customFilterItems = collections.customFilters.items;
-    var text = "";
+    var filterTexts = [];
     for (var i = 0; i < customFilterItems.length; i++)
-      text += customFilterItems[i].text + "\n";
-    E("custom-filters-textarea").value = text;

[Thomas Greiner, 2015/06/30 09:23:28]

This loop is potentially creating a lot of strings. Therefore I'd replace the
function body with:

var customFilterItems = collections.customFilters.items;
var filterTexts = [];
for (var i = 0; i < customFilterItems.length; i++)
  filterTexts.push(customFilterItems[i].text);
E("custom-filters-textarea").value = filterTexts.join("\n");

[saroyanm, 2015/07/08 18:25:41]

Done.

+      filterTexts.push(customFilterItems[i].text);
+    E("custom-filters-raw").value = filterTexts.join("\n");
   }
 
   function getAcceptableAdsURL(callback)
   {
     ext.backgroundPage.sendMessage(
     {
       type: "prefs.get",
       key: "subscriptions_exceptionsurl"
     },
     function(value)
@@ skipping 18 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 addFilter(filter)

[Thomas Greiner, 2015/06/30 09:23:29]

There's no need to create a function for that because you're only using it once.

[saroyanm, 2015/07/08 18:25:41]

Done.
Please note that we still have similar methods, that were created initially, I
think they are leftover from previous review:
removeSubscription
removeFilter
onFilterMessage
showAddSubscriptionDialog

Not sure if handling theme here is okey, or make sense to do it separately.

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

Good point, feel free to include that in this review. I think for
"onFilterMessage", however, it might be good to have it separate to avoid
nesting switch-statements.

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

Done.

-  {
-    ext.backgroundPage.sendMessage(
-    {
-      type: "filters.add",
-      text: filter
-    });
   }
 
   function onFilterMessage(action, filter)
   {
     switch (action)
     {
       case "added":
         updateFilter(filter);
         updateShareLink();
         break;
       case "loaded":
         populateLists();
         break;
       case "removed":
         var knownFilter = filtersMap[filter.text];
         collections.whitelist.removeItem(knownFilter);
         collections.customFilters.removeItem(knownFilter);

[Thomas Greiner, 2015/06/30 09:23:28]

Note that when I click on "edit view" and right afterwards on "save" without
making any changes, then the filters for some of the whitelisted domains are
being removed while some of the filters I wanted to remove remain in the list.

This must not happen so please test everything carefully.

[saroyanm, 2015/07/08 18:25:41]

The problem is that in "filters.importRaw" we were excluding 
"Whitelist" filters before removing custom filters that are not in the raw-text,
but while we are only returning an instance of Filter with the fromText in mock,
we can't differentiate, Updated the mock. 
Thanks for noticing, I was testing in product env. beforehand.

         delete filtersMap[filter.text];
         updateShareLink();
         break;
     }
   }
 
   function onSubscriptionMessage(action, subscription)
   {
     switch (action)
     {
@@ skipping 53 matching lines @@
     {
       // TODO: modify "share" link accordingly
     });
   }
 
   function E(id)
   {
     return document.getElementById(id);
   }
 
+  function getDocLink(link, callback)
+  {
+    ext.backgroundPage.sendMessage(
+    {
+      type: "app.get",
+      what: "doclink",
+      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);
 })();