Issue 2357 - Added "predefined list" dialog to options page

options.js

Index: options.js
===================================================================
--- a/options.js
+++ b/options.js
@@ -53,10 +53,10 @@
         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)
@@ -105,7 +105,7 @@
   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);
     else
@@ -115,13 +115,13 @@
   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;
+    var filter = this.parentNode.getAttribute("data-access");
     removeFilter(filter);
   }
 
@@ -316,6 +316,55 @@
     request.send(null);
   }
 
+  function onClick(e)
+  {
+    var element = e.target;
+    while (true)
+    {
+      if (!element)
+        return;
+
+      if (element.hasAttribute("data-action"))
+        break;
+
+      element = element.parentElement;
+    }
+
+    switch (element.getAttribute("data-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);
+        document.body.removeAttribute("data-dialog");
+        break;
+      case "cancel-domain-exception":
+        E("whitelisting-textbox").value = "";
+        break;
+      case "close-dialog":
+        document.body.removeAttribute("data-dialog");
+        break;
+      case "edit-custom-filters":
+        editCustomFilters();
+        break;
+      case "import-subscription":
+        var url = E("blockingList-textbox").value;
+        addEnableSubscription(url);
+        document.body.removeAttribute("data-dialog");
+        break;
+      case "open-language-dialog":
+        openDialog("language");
+        break;
+      case "open-subscription-dialog":
+        openDialog("customlist");
+        break;
+    }
+  }
+
   function onDOMLoaded()
   {
     var recommendationTemplate = document.querySelector("#recommend-list-table template");
@@ -332,7 +381,8 @@
     {
       tabList[i].addEventListener("click", function(e)
       {
-        document.body.dataset.tab = e.currentTarget.dataset.show;
+        document.body.setAttribute("data-tab",
+          e.currentTarget.getAttribute("data-show"));
       }, false);
     }
 
@@ -368,31 +418,10 @@
     updateShareLink();
 
     // Initialize interactive UI elements
+    document.body.addEventListener("click", onClick, false);

[saroyanm, 2015/07/13 16:20:07]

While we have click event on body element, maybe make sense to also move
navigation tab clicks to there as well.

[Thomas Greiner, 2015/07/13 18:37:14]

Done.

     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);
-    E("dialog-close").addEventListener("click", function()
-    {
-      delete document.body.dataset.dialog;
-    }, false);
-    E("edit-ownBlockingList-button").addEventListener("click", editCustomFilters, false);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
-    E("whitelisting").addEventListener("click", function(e)
-    {
-      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
@@ -400,17 +429,11 @@
       if ((e.key && e.key == "Enter") || (!e.key && e.keyCode == 13))
         addWhitelistedDomain();
     }, false);
-    E("import-blockingList-button").addEventListener("click", function()
-    {
-      var url = E("blockingList-textbox").value;
-      addEnableSubscription(url);
-      delete document.body.dataset.dialog;
-    }, false);
   }
 
   function openDialog(name)
   {
-    document.body.dataset.dialog = name;
+    document.body.setAttribute("data-dialog", name);
   }
 
   function populateLists()
@@ -606,8 +629,10 @@
 
   function showAddSubscriptionDialog(subscription)
   {
-    E("blockingList-textbox").value = subscription.url;
-    openDialog("customlist");
+    var dialog = E("dialog-content-addSubscription");
+    dialog.querySelector("h3").textContent = subscription.title || "";
+    dialog.querySelector(".url").textContent = subscription.url;
+    openDialog("addSubscription");
   }
 
   function updateShareLink()