Issue 2357 - Added "predefined list" dialog to 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];
         var text = item.title || item.url || item.text;
         var listItem = document.createElement("li");
         listItem.appendChild(document.importNode(template.content, true));
-        listItem.dataset.access = item.url || item.text;
+        listItem.setAttribute("data-access", item.url || item.text);
         listItem.querySelector(".display").textContent = text;
         if (text)
-          listItem.dataset.search = text.toLowerCase();
+          listItem.setAttribute("data-search", text.toLowerCase());
 
         var control = listItem.querySelector(".control");
         if (control)
         {
           control.addEventListener("click", this.details[j].onClick, false);
           control.checked = item.disabled == false;
         }
 
         if (table.hasChildNodes())
           table.insertBefore(listItem, table.childNodes[this.items.indexOf(item)]);
@@ skipping 28 matching lines @@
       var template = table.querySelector("template");
       table.innerHTML = "";
       table.appendChild(template);
     }
     this.items.length = 0;
   };
 
   function onToggleSubscriptionClick(e)
   {
     e.preventDefault();
-    var subscriptionUrl = e.target.parentNode.dataset.access;
+    var subscriptionUrl = e.target.parentNode.getAttribute("data-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;
+    var url = this.parentNode.getAttribute("data-access");
     addEnableSubscription(url);
   }
 
   function onRemoveFilterClick()
   {
-    var filter = this.parentNode.dataset.access;
-    removeFilter(filter);
+    var filter = this.parentNode.getAttribute("data-access");
+    ext.backgroundPage.sendMessage(
+    {
+      type: "filters.remove",
+      text: filter
+    });
   }
 
   collections.popular = new Collection(
   [
     {
       id: "recommend-list-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.langs = new Collection(
@@ skipping 25 matching lines @@
     {
       id: "custom-list-table", 
       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
@@ skipping 78 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 29 matching lines @@
       }
     }, false);
     request.send(null);
   }
 
   function onClick(e)
   {
     var element = e.target;
     while (true)
     {
-      if (element === document.body)

[Sebastian Noack, 2015/07/09 12:24:18]

What if the click event occurs on the <html> element?

Probably the simplest and most robust solution would be to simply check for
element not being null here, and using element.parentElement (which will be null
instead document when you reach the root) below.

[Sebastian Noack, 2015/07/09 12:24:19]

Nit: We don't use the strict equality operator unless necessary. This is also in
the Mozilla coding guide, which our coding guide refers to.

[Thomas Greiner, 2015/07/09 13:55:06]

I can't find that section in the Mozilla coding style, it only says "In
JavaScript, === is preferred to ==."
(https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style...)

[Thomas Greiner, 2015/07/09 13:55:07]

Done.
Note that it doesn't make a difference in this scenario because we're only
interested in events that happen within the page body inside an element that has
the "data-action" attribute set.

[Sebastian Noack, 2015/07/09 15:16:56]

Yes, we are, however if the "click" is is triggered for the document element,
you would never bail out, if you check only for document.body.

[Sebastian Noack, 2015/07/09 15:16:57]

You are right, I thought it were the other way around. But anyway, it seems that
we use == and != (instead === and !==) in most of our code. And frankly I, and
apparently some others, prefer it this way as it keeps the code concise, and IMO
also more simple.

+      if (!element)
         return;
 
-      if ("action" in element.dataset)
-        break;
-
-      element = element.parentNode;

[Sebastian Noack, 2015/07/09 15:16:56]

This should be |element.parentElement| as mentioned before.

[Thomas Greiner, 2015/07/10 14:19:15]

Done.

-    }
-
-    switch (element.dataset.action)

[Sebastian Noack, 2015/07/09 12:24:18]

Older Safari versions don't have dataset.

[Thomas Greiner, 2015/07/09 13:55:06]

According to caniuse.com it has been supported since version 5.1
(http://caniuse.com/#search=dataset) while MDN says it was introduced in Safari
6
(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset#Browser_...).
AFAIK we no longer support versions older than Safari 6 so that should be
sufficient for us, right?

Otherwise I can simply modify the code to use "getAttribute" and "setAttribute".

[Sebastian Noack, 2015/07/09 15:16:56]

Officially, we support Safari 6+. That is mostly because a WebKit bug causing
side effects when registering any onbeforeload listener on older versions.
Except for that issue, and slower performance, Adblock Plus still works on
Safari 5.1. And is actually a fairly popular there, since everybody on OS X Snow
Leopard as well as people using Safari on Windows are stuck with Safari 5.1.
Last time we checked, more than 10% of our Safari users were on Safari 5.1. I'm
fine with incomplete support of Safari 5.1. But breaking the options page when
we could easily avoid it, seems unnecessary.

[saroyanm, 2015/07/09 17:14:19]

I will suggest to make that kind of modification in the follow up ticket, I just
found out that we don't have one, but I do remember that we wanted to have
separate Stylesheet for older Safari versions, so I think we will need to test
our new options page on safari 5.1 anyway.
While initially we were designing new option page to support safari 6 and newer
I would suggest to leave this for now, I do believe that It's not only
modification that we will need to make and not sure how big will be our user
base on safari 5.1 when we finish the new option page implementation.
What you think ?

[Sebastian Noack, 2015/07/10 07:58:19]

Well, by relying on flexbox, the new option page actually requires Safari 6.1+.
IIRC, the plan was to have a minimal stylesheet for Safari 6.0, to support the
most important functionality there, while hiding all other elements, that it
doesn't look broken.

Safari 5.1 has way more users than Safari 6.0. But if we support Safari 6.0,
supporting Safari 5.1 with the options page as well would be as trivial as using
setAttribute/getAttriubte instead dataset. Also note that we would need to do
that as well to support IE 8-10.

[Thomas Greiner, 2015/07/10 14:19:15]

Done.

I wouldn't consider IE support to be relevant at this point of development
because of the general overhead that this would introduce.

-    {
-      case "add-domain-exception":
-        addWhitelistedDomain();
-        break;
-      case "add-subscription":
-        var dialog = E("dialog-content-addSubscription");
-        var title = dialog.querySelector("h3").textContent;
-        var url = dialog.querySelector(".url").textContent;
-        addEnableSubscription(url, title);
-        delete document.body.dataset.dialog;
-        break;
-      case "cancel-domain-exception":
-        E("whitelisting-textbox").value = "";
-        break;
-      case "close-dialog":
-        delete document.body.dataset.dialog;
-        break;
-      case "edit-custom-filters":
-        editCustomFilters();
-        break;
-      case "import-subscription":
-        var url = E("blockingList-textbox").value;
-        addEnableSubscription(url);
-        delete document.body.dataset.dialog;
-        break;
-      case "open-language-dialog":
-        openDialog("language");
-        break;
-      case "open-subscription-dialog":
-        openDialog("customlist");
-        break;
+      if (element.hasAttribute("data-action"))
+        break;
+
+      element = element.parentElement;
+    }
+
+    var actions = element.getAttribute("data-action").split(",");
+    for (var i = 0; i < actions.length; i++)
+    {
+      switch (actions[i])
+      {
+        case "add-domain-exception":
+          addWhitelistedDomain();
+          break;
+        case "add-predefined-subscription":
+          var dialog = E("dialog-content-predefined");
+          var title = dialog.querySelector("h3").textContent;
+          var url = dialog.querySelector(".url").textContent;
+          addEnableSubscription(url, title);
+          document.body.removeAttribute("data-dialog");
+          break;
+        case "cancel-custom-filters":
+          E("custom-filters").classList.remove("mode-edit");

[saroyanm, 2015/07/16 12:32:27]

Strange, classList according to MDN is supported since safari 5.1:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_co...

But according to caniuse:
http://caniuse.com/#search=classList
It's supported since safari 7

But I do think it's mistake in caniuse because they are referencing to MDN and
some other articles where nothing mentioned about classList being supported
since safari 7. 
So we should be good to go with classList.

[Sebastian Noack, 2015/07/16 12:36:50]

As I already told you in a different comment, it's only classList.toggle() with
second argument that doesn't work in older Safari versions. classList as we use
it here should be fine.

[saroyanm, 2015/07/16 12:41:01]

Ahh right your reference to caniuse went out of my radar.

+          break;
+        case "cancel-domain-exception":
+          E("whitelisting-textbox").value = "";
+          break;
+        case "close-dialog":
+          document.body.removeAttribute("data-dialog");
+          break;
+        case "edit-custom-filters":
+          E("custom-filters").classList.add("mode-edit");
+          editCustomFilters();
+          break;
+        case "import-subscription":
+          var url = E("blockingList-textbox").value;
+          addEnableSubscription(url);
+          document.body.removeAttribute("data-dialog");
+          break;
+        case "open-dialog":
+          openDialog(element.getAttribute("data-dialog"));
+          break;
+        case "save-custom-filters":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "filters.importRaw",
+            text: E("custom-filters-raw").value
+          });
+          E("custom-filters").classList.remove("mode-edit");
+          break;
+        case "switch-tab":
+          document.body.setAttribute("data-tab",
+            element.getAttribute("data-tab"));
+          break;
+      }
     }
   }
 
   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;
 
     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
+      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 11 matching lines @@
 
     updateShareLink();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
     var placeholderValue  = ext.i18n.getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, 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);
+
+    // Advanced tab
+    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: "filters.add",
+        text: filterText
+      });
+      filterTextbox.value = "";
+    }
+    E("custom-filters-add").addEventListener("submit", function(e)
+    {
+      e.preventDefault();
+      addCustomFilters();
+    }, false);
+    var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");
   }
 
   function openDialog(name)
   {
-    document.body.dataset.dialog = name;
+    document.body.setAttribute("data-dialog", name);
   }
 
   function populateLists()
   {
     subscriptionsMap = Object.create(null);
     filtersMap = Object.create(null);
     recommendationsMap = Object.create(null);
 
     // Empty collections and lists
     for (var property in collections)
@@ skipping 54 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 20 matching lines @@
       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;
       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 26 matching lines @@
           }
           updateShareLink();
         });
         break;
       case "title":
         // TODO: NYI
         break;
     }
   }
 
-  function showAddSubscriptionDialog(subscription)
-  {
-    var dialog = E("dialog-content-addSubscription");
-    dialog.querySelector("h3").textContent = subscription.title || "";
-    dialog.querySelector(".url").textContent = subscription.url;
-    openDialog("addSubscription");
-  }
-
   function updateShareLink()
   {
     ext.backgroundPage.sendMessage(
     {
       type: "filters.blocked",
       url: "https://platform.twitter.com/widgets/",
       requestType: "SCRIPT",
       docDomain: "adblockplus.org",
       thirdParty: true
     },
@@ skipping 17 matching lines @@
       link: link
     }, callback);
   }
 
   ext.onMessage.addListener(function(message)
   {
     switch (message.type)
     {
       case "app.listen":
         if (message.action == "addSubscription")
-          showAddSubscriptionDialog(message.args[0]);
+        {
+          var subscription = message.args[0];
+          var dialog = E("dialog-content-predefined");
+          dialog.querySelector("h3").textContent = subscription.title || "";
+          dialog.querySelector(".url").textContent = subscription.url;
+          openDialog("predefined");
+        }
+        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);
 })();