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 20 matching lines @@
   }
 
   Collection.prototype.addItems = function() 
   {
     var length = Array.prototype.push.apply(this.items, arguments);
     if (length == 0)
       return;
 
     this.items.sort(function(a, b)
     {
-      var aValue = (a.title || a.url || a.text).toLowerCase();
-      var bValue = (b.title || b.url || a.text).toLowerCase();
+      var aValue = (a.title || a.text || a.url).toLowerCase();
+      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 110 matching lines @@
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
       id: "whitelisting-table", 
       onClick: onRemoveFilterClick
     }
   ]);
+  collections.customFilters = new Collection(
+  [
+    {
+      id: "custom-filters-table"
+    }
+  ]);
 
   function updateSubscription(subscription)
   {
     var subscriptionUrl = subscription.url;
     var knownSubscription = subscriptionsMap[subscriptionUrl];
     if (knownSubscription)
       knownSubscription.disabled = subscription.disabled;
     else
     {
       getAcceptableAdsURL(function(acceptableAdsUrl)
@@ skipping 76 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
-    }
+      collections.customFilters.addItems(filter);
+
+    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 53 matching lines @@
 
     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"
+      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.

+    }
+
     // Initialize navigation sidebar
     ext.backgroundPage.sendMessage(
     {
       type: "app.get",
       what: "addonVersion"
     },
     function(addonVersion)
     {
       E("abp-version").textContent = addonVersion;
     });
@@ skipping 30 matching lines @@
     {
       var id = e.target.id;
       if (id == "whitelisting-add-icon" || id == "whitelisting-enter-icon")
         addWhitelistedDomain();
       else if (id == "whitelisting-cancel-button")
         E("whitelisting-textbox").value = "";
     }, false);
     E("whitelisting-add-button").addEventListener("click", addWhitelistedDomain, false);
     E("whitelisting-textbox").addEventListener("keypress", function(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))
+      if (isEnterPressed(e))
         addWhitelistedDomain();
     }, false);
     E("import-blockingList-button").addEventListener("click", function()
     {
       var url = E("blockingList-textbox").value;
       addEnableSubscription(url);
       delete document.body.dataset.dialog;

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

I wasn't involved in the initial review, but just realized that you use dataset,
which isn't supported in older Safari versions. So we should get rid of it,
probably with a followup patch.

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

According to MDN dataset is supported since Safari 6, should be sufficient I
think -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

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

See
https://codereview.adblockplus.org/29321417/diff/29321418/options.js#newcode333

[saroyanm, 2015/07/13 14:05:34]

Yes Its should be fixed with the #2357

     }, false);
+
+    // Advanced tab
+    var filterTextbox = document.querySelector("#custom-filter-add input");
+    placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeholder");
+    filterTextbox.setAttribute("placeholder", placeholderValue);
+    function addCustomFilters()
+    {
+      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 = "";
+      });
+    }
+    E("custom-filter-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.

+        target = e.target;
+      else if (e.target.parentElement.tagName == "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")
+        editCustomFilters();
+      else if (id == "custom-filters-save-btn")
+      {
+        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 59 matching lines @@
         type: "filters.add",
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
   }
 
   function editCustomFilters()
   {
-    //TODO: NYI
+    var customFilterItems = collections.customFilters.items;
+    var filterTexts = [];
+    for (var i = 0; i < customFilterItems.length; i++)
+      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 52 matching lines @@
       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);
         delete filtersMap[filter.text];
         updateShareLink();
         break;
     }
   }
 
   function onSubscriptionMessage(action, subscription)
   {
     switch (action)
     {
@@ skipping 98 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();