Issue 2377 - Implement user filter lists toggle

options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 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 729 matching lines @@
 
   function closeDialog()
   {
     var dialog = E("dialog");
     dialog.setAttribute("aria-hidden", true);
     dialog.removeAttribute("aria-labelledby");
     document.body.removeAttribute("data-dialog");
     focusedBeforeDialog.focus();
   }
 
+  function toggleUserLists(e)
+  {
+    e.preventDefault();
+    ext.backgroundPage.sendMessage(
+    {
+      type: "app.userSubscriptionsToggle",
+      state: e.target.getAttribute("aria-checked") == "true"
+    });
+  }
+
   function populateLists()
   {
     subscriptionsMap = Object.create(null);
     filtersMap = Object.create(null);
     recommendationsMap = Object.create(null);
 
     // Empty collections and lists
     for (var property in collections)
       collections[property].clearAll();
 
+    var userListsControl = document.querySelector("#user-filter-lists .control");
+    userListsControl.addEventListener("click", toggleUserLists, false);
     ext.backgroundPage.sendMessage(
     {
       type: "subscriptions.get",
       special: true
     },
     function(subscriptions)
     {
+      var specialEnabled = false;
       // Load filters
       for (var i = 0; i < subscriptions.length; i++)
       {
+        if (!specialEnabled)
+          specialEnabled = !subscriptions[i].disabled;
         ext.backgroundPage.sendMessage(
         {
           type: "filters.get",
           subscriptionUrl: subscriptions[i].url
         }, 
         function(filters)
         {
           for (var i = 0; i < filters.length; i++)
             updateFilter(filters[i]);
         });
       }
+      userListsControl.setAttribute("aria-checked", specialEnabled);
     });
     loadRecommendations();
     getAcceptableAdsURL(function(acceptableAdsUrl)
     {
       var subscription = Object.create(null);
       subscription.url = acceptableAdsUrl;
       subscription.disabled = true;
       subscription.title = getMessage("options_acceptableAds_description");
       updateSubscription(subscription);
 
@@ skipping 67 matching lines @@
       url: url
     };
     if (title)
       message.title = title;
     if (homepage)
       message.homepage = homepage;
 
     ext.backgroundPage.sendMessage(message);
   }
 
+  function onAppMessage(action, args)
+  {
+    switch (action)
+    {
+      case "addSubscription":
+        var subscription = args[0];
+        var dialog = E("dialog-content-predefined");
+        dialog.querySelector("h3").textContent = subscription.title || "";
+        dialog.querySelector(".url").textContent = subscription.url;
+        openDialog("predefined");
+        break;
+      case "error":
+        alert(args.join("\n"));
+        break;
+      case "userSubscriptionsToggle":
+        document.querySelector("#user-filter-lists .control").
+          setAttribute("aria-checked", !args[0]);
+        break;
+    }
+  }
+
   function onFilterMessage(action, filter)
   {
     switch (action)
     {
       case "added":
         updateFilter(filter);
         updateShareLink();
         break;
       case "loaded":
         populateLists();
@@ skipping 100 matching lines @@
 
     for (var i = 0; i < shareResources.length; i++)
       checkShareResource(shareResources[i], onResult);
   }
 
   ext.onMessage.addListener(function(message)
   {
     switch (message.type)
     {
       case "app.listen":
-        if (message.action == "addSubscription")
-        {
-          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"));
-        }
+        onAppMessage(message.action, message.args);
         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", "error"]
+    filter: ["addSubscription", "error", "userSubscriptionsToggle"]

[saroyanm, 2016/02/26 11:31:22]

It's bit inconsistent,  but the chrome implementation itself is inconsistent, so
I thought it doesn't make sense to represent the listener on
"subscriptions.listen", because with current logic in "subscriptions.listen" we
expect changes for each subscription separately, while with the user filter
lists with current logic I'm only sending final result, so I thought it should
be separate listener from subscriptions.listen.
Ideally we should provide people ability to manage each separate user filter
list and add ability to create new user filter list, but I assume we will
implement that ability in future for Firefox.

[Thomas Greiner, 2016/03/01 12:11:22]

Yes, that feature will be added for Firefox. However, I'd argue that we can
already avoid inconsistencies by reusing "subscriptions.listen", and
"subscriptions.toggle".

It might be sufficient to just create a dummy subscription that represents all
user subscriptions. We could then en-/disable and listen to that subscription
without having to duplicate existing logic.

   });
   ext.backgroundPage.sendMessage(
   {
     type: "filters.listen",
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();