issue 3741 - Add "remove" option to list items in new options page

new-options.js

Index: new-options.js
===================================================================
--- a/new-options.js
+++ b/new-options.js
@@ -24,7 +24,7 @@
   var filtersMap = Object.create(null);
   var collections = Object.create(null);
   var acceptableAdsUrl = null;
-  var maxLabelId = 0;
+  var maxItemId = 0;
   var getMessage = ext.i18n.getMessage;
   var filterErrors =
   {
@@ -102,27 +102,18 @@
       {
         var item = arguments[i];
         var listItem = document.createElement("li");
+        var ItemId = "item-" + (++maxItemId);
         listItem.appendChild(document.importNode(template.content, true));
         listItem.setAttribute("data-access", item.url || item.text);
+        listItem.setAttribute("id", ItemId);
+        listItem.setAttribute("role", "section");
 
-        var labelId = "label-" + (++maxLabelId);
         var label = listItem.querySelector(".display");
-        label.setAttribute("id", labelId);
+        label.setAttribute("for", ItemId);
 
-        var control = listItem.querySelector(".control");
-        if (control)
-        {
-          control.setAttribute("aria-labelledby", labelId);
-          control.addEventListener("click", this.details[j].onClick, false);
-
-          var role = control.getAttribute("role");
-          if (role == "checkbox" && !label.hasAttribute("data-action"))
-          {
-            var controlId = "control-" + maxLabelId;
-            control.setAttribute("id", controlId);
-            label.setAttribute("for", controlId);
-          }
-        }
+        var controls = listItem.querySelectorAll(".control");
+        for (var k = 0; k < controls.length; k++)
+          controls[k].setAttribute("aria-labelledby", ItemId);
 
         this._setEmpty(table, null);
         if (table.hasChildNodes())
@@ -189,14 +180,14 @@
 
       var title = this._getItemTitle(item, i);
       element.querySelector(".display").textContent = title;
+      element.setAttribute("label", title);
       if (title)

[saroyanm, 2016/06/08 15:21:07]

I think we should only specify the "data-search" attribute only for
"all-lang-table" table, I'm not sure why we have this check here, seems it
doesn't provide any value.

[Thomas Greiner, 2016/06/16 10:42:22]

Ok, feel free to change it so that it's only added to items in "all-lang-table".

[saroyanm, 2016/06/16 18:22:59]

Done.

         element.setAttribute("data-search", title.toLowerCase());
       var control = element.querySelector(".control[role='checkbox']");
       if (control)
       {
         control.setAttribute("aria-checked", item.disabled == false);
-        if (item.url == acceptableAdsUrl && this.details[i].onClick ==
-                                            toggleDisableSubscription)
+        if (item.url == acceptableAdsUrl && this == collections.filterLists)
           control.setAttribute("disabled", true);
       }
 
@@ -277,63 +268,17 @@
     return true;
   }
 
-  function toggleRemoveSubscription(e)
-  {
-    e.preventDefault();
-    var subscriptionUrl = findParentData(e.target, "access", false);
-    if (e.target.getAttribute("aria-checked") == "true")
-    {
-      ext.backgroundPage.sendMessage({
-        type: "subscriptions.remove",
-        url: subscriptionUrl
-      });
-    }
-    else
-      addEnableSubscription(subscriptionUrl);
-  }
-
-  function toggleDisableSubscription(e)
-  {
-    e.preventDefault();
-    var subscriptionUrl = findParentData(e.target, "access", false);
-    ext.backgroundPage.sendMessage(
-    {
-      type: "subscriptions.toggle",
-      keepInstalled: true,
-      url: subscriptionUrl
-    });
-  }
-
-  function onAddLanguageSubscriptionClick(e)
-  {
-    e.preventDefault();
-    var url = findParentData(this, "access", false);
-    addEnableSubscription(url);
-  }
-
-  function onRemoveFilterClick()
-  {
-    var filter = findParentData(this, "access", false);
-    ext.backgroundPage.sendMessage(
-    {
-      type: "filters.remove",
-      text: filter
-    });
-  }
-
   collections.popular = new Collection(
   [
     {
-      id: "recommend-list-table",
-      onClick: toggleRemoveSubscription
+      id: "recommend-list-table"
     }
   ]);
   collections.langs = new Collection(
   [
     {
       id: "blocking-languages-table",
-      emptyText: "options_dialog_language_added_empty",
-      onClick: toggleRemoveSubscription
+      emptyText: "options_dialog_language_added_empty"
     },
     {
       id: "blocking-languages-dialog-table",
@@ -344,30 +289,26 @@
   [
     {
       id: "all-lang-table",
-      emptyText: "options_dialog_language_other_empty",
-      onClick: onAddLanguageSubscriptionClick
+      emptyText: "options_dialog_language_other_empty"
     }
   ]);
   collections.acceptableAds = new Collection(
   [
     {
-      id: "acceptableads-table",
-      onClick: toggleRemoveSubscription
+      id: "acceptableads-table"
     }
   ]);
   collections.custom = new Collection(
   [
     {
-      id: "custom-list-table",
-      onClick: toggleRemoveSubscription
+      id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
       id: "whitelisting-table",
-      emptyText: "options_whitelisted_empty",
-      onClick: onRemoveFilterClick
+      emptyText: "options_whitelisted_empty"
     }
   ]);
   collections.customFilters = new Collection(
@@ -381,7 +322,6 @@
   [
     {
       id: "all-filter-lists-table",
-      onClick: toggleDisableSubscription,
       useOriginalTitle: true
     }
   ]);
@@ -476,7 +416,7 @@
           var subscription = Object.create(null);
           subscription.originalTitle = element.getAttribute("title");
           subscription.url = element.getAttribute("url");
-          subscription.disabled = null;
+          subscription.disabled = true;
           subscription.downloadStatus = null;
           subscription.homepage = null;
           var recommendation = Object.create(null);
@@ -629,6 +569,36 @@
             url: findParentData(element, "access", false)
           });
           break;
+        case "toggle-remove-subscription":
+          var subscriptionUrl = findParentData(element, "access", false);
+          if (element.getAttribute("aria-checked") == "true")
+          {
+            ext.backgroundPage.sendMessage({
+              type: "subscriptions.remove",
+              url: subscriptionUrl
+            });
+          }
+          else
+            addEnableSubscription(subscriptionUrl);
+          break;
+        case "toggle-disable-subscription":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "subscriptions.toggle",
+            keepInstalled: true,
+            url: findParentData(element, "access", false)
+          });
+          break;
+        case "add-language-subscription":
+          addEnableSubscription(findParentData(element, "access", false));
+          break;
+        case "remove-filter":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "filters.remove",
+            text: findParentData(element, "access", false)
+          });
+          break;
       }
     }
   }