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 32 matching lines @@
   }
 
   function onClick(e)
   {
     var element = e.target;
     while (true)
     {
       if (!element)
         return;
 
-      if ("action" in element.dataset)
-        break;
-
-      element = element.parentNode;
-    }
-
-    switch (element.dataset.action)
-    {
-      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);
 })();