Issue 2375 - Implement "Blocking lists" section in new options page

options.js

Index: options.js
===================================================================
--- a/options.js
+++ b/options.js
@@ -45,6 +45,15 @@
       table.removeChild(placeholder);
   }
 
+  Collection.prototype._createElementQuery = function(item)
+  {
+    var access = (item.url || item.text).replace(/'/g, "\\'");
+    return function(container)
+    {
+      return container.querySelector("[data-access='" + access + "']");
+    };
+  };
+
   Collection.prototype.addItems = function() 
   {
     var length = Array.prototype.push.apply(this.items, arguments);
@@ -82,7 +91,10 @@
 
         this._setEmpty(table, null);
         if (table.hasChildNodes())
-          table.insertBefore(listItem, table.childNodes[this.items.indexOf(item)]);
+        {
+          table.insertBefore(listItem, 
+              table.childNodes[this.items.indexOf(item)]);
+        }
         else
           table.appendChild(listItem);
         this.updateItem(item);
@@ -98,10 +110,11 @@
       return;
 
     this.items.splice(index, 1);
+    var getListElement = this._createElementQuery(item);
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
-      var element = table.childNodes[index];
+      var element = getListElement(table);
 
       // Element gets removed so make sure to handle focus appropriately
       var control = element.querySelector(".control");
@@ -146,6 +159,39 @@
       var control = element.querySelector(".control[role='checkbox']");
       if (control)
         control.setAttribute("aria-checked", item.disabled == false);
+
+      var dateElement = element.querySelector(".date");
+      var timeElement = element.querySelector(".time");
+      if(dateElement && timeElement)
+      {
+        if (item.downloadStatus && 
+            item.downloadStatus != "synchronize_ok")
+        {
+          var map =

[Thomas Greiner, 2016/02/01 18:52:36]

Detail: This content is static so it should be defined outside to avoid
declaring it each time when the function gets called.

[saroyanm, 2016/02/03 14:04:26]

Done, also made some other function/variable assignments to improve readability.

+          {
+            "synchronize_invalid_url": "options_subscription_lastDownload_invalidURL",
+            "synchronize_connection_error": "options_subscription_lastDownload_connectionError",
+            "synchronize_invalid_data": "options_subscription_lastDownload_invalidData",
+            "synchronize_checksum_mismatch": "options_subscription_lastDownload_checksumMismatch"
+          };
+          if (item.downloadStatus in map)
+            timeElement.textContent = ext.i18n.getMessage(map[item.downloadStatus]);
+          else
+            timeElement.textContent = item.downloadStatus;
+        }
+        else if (item.lastDownload > 0)
+        {
+          var dateTime = i18n_formatDateTime(item.lastDownload * 1000);
+          dateElement.textContent = dateTime[0];
+          timeElement.textContent = dateTime[1];
+        }

[Thomas Greiner, 2016/02/01 18:52:35]

What about the else-case here? Currently, this will cause both fields to be
empty whenever a new subscription is added until the download finishes.

If you look at the current options page it is indicating "Downloading…" which is
also shown when updating a subscription. The latter one is completely missing
from the new options page so we should fix that as well.

[saroyanm, 2016/02/03 14:04:26]

Good point, sorry for that, Done.

+      }
+      var websiteElement = element.querySelector(".context-menu .website");
+      var sourceElement = element.querySelector(".context-menu .source");
+      if (websiteElement && item.homepage)
+        websiteElement.setAttribute("href", item.homepage);
+      if (sourceElement)
+        sourceElement.setAttribute("href", item.url);
     }
   };
 
@@ -155,9 +201,14 @@
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
-      var template = table.querySelector("template");
-      table.innerHTML = "";
-      table.appendChild(template);
+      var element = table.firstChild;
+      while (element)
+      {
+        if (element.tagName == "LI" && !element.classList.contains("static"))
+          table.removeChild(element);
+        element = element.nextElementSibling;
+      }
+
       this._setEmpty(table, this.details[i].emptyText);
     }
   };
@@ -177,12 +228,11 @@
     return true;
   }
 
-  function onToggleSubscriptionClick(e)
+  function toggleRemoveSubscription(e)
   {
     e.preventDefault();
-    var checkbox = e.target;
-    var subscriptionUrl = checkbox.parentElement.getAttribute("data-access");
-    if (checkbox.getAttribute("aria-checked") == "true")
+    var subscriptionUrl = findParentData(e.target, "access", false);
+    if (e.target.getAttribute("aria-checked") == "true")
     {
       ext.backgroundPage.sendMessage({
         type: "subscriptions.remove",
@@ -193,16 +243,28 @@
       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 = this.parentNode.getAttribute("data-access");
+    var url = findParentData(this, "access", false);
     addEnableSubscription(url);
   }
 
   function onRemoveFilterClick()
   {
-    var filter = this.parentNode.getAttribute("data-access");
+    var filter = findParentData(this, "access", false);
     ext.backgroundPage.sendMessage(
     {
       type: "filters.remove",
@@ -214,7 +276,7 @@
   [
     {
       id: "recommend-list-table",
-      onClick: onToggleSubscriptionClick
+      onClick: toggleRemoveSubscription
     }
   ]);
   collections.langs = new Collection(
@@ -222,7 +284,7 @@
     {
       id: "blocking-languages-table",
       emptyText: "options_dialog_language_added_empty",
-      onClick: onToggleSubscriptionClick
+      onClick: toggleRemoveSubscription
     },
     {
       id: "blocking-languages-dialog-table",
@@ -241,14 +303,14 @@
   [
     {
       id: "acceptableads-table",
-      onClick: onToggleSubscriptionClick
+      onClick: toggleRemoveSubscription
     }
   ]);
   collections.custom = new Collection(
   [
     {
       id: "custom-list-table",
-      onClick: onToggleSubscriptionClick
+      onClick: toggleRemoveSubscription
     }
   ]);
   collections.whitelist = new Collection(
@@ -266,23 +328,23 @@
       emptyText: "options_customFilters_empty"
     }
   ]);
+  collections.filterLists = new Collection(
+  [
+    {
+      id: "all-filter-lists-table",
+      onClick: toggleDisableSubscription
+    }
+  ]);
 
-  function updateSubscription(subscription)
+  function observeSubscription(subscription)
   {
-    var subscriptionUrl = subscription.url;
-    var knownSubscription = subscriptionsMap[subscriptionUrl];
-    if (knownSubscription)
-      knownSubscription.disabled = subscription.disabled;
-    else
+    function onObjectChanged(change)
     {
-      getAcceptableAdsURL(function(acceptableAdsUrl)
+      for (var i = 0; i < change.length; i++)
       {
-        function onObjectChanged()
+        if (change[i].name == "disabled")
         {
-          for (var i in collections)
-            collections[i].updateItem(subscription);
-
-          var recommendation = recommendationsMap[subscriptionUrl];
+          var recommendation = recommendationsMap[subscription.url];
           if (recommendation && recommendation.type == "ads")
           {
             if (subscription.disabled == false)
@@ -297,33 +359,53 @@
             }
           }
         }
+        for (var i in collections)
+          collections[i].updateItem(subscription);
+      }
+    }
 
-        if (!Object.observe)
+    if (!Object.observe)

[Thomas Greiner, 2016/02/01 18:52:35]

Since `Object.observe()` is not implemented in Safari and older Chrome versions
and is going to be removed at some point, have you tested whether the polyfill
still works?

[saroyanm, 2016/02/03 14:04:26]

Thanks for pointing that out, apparently we have to check also for the old value
of the Object property when using define property, otherwise the set event will
be called also in case the value of the property is same. Done.

+    {
+      ["disabled", "lastDownload"].forEach(function(property)
+      {
+        subscription["$" + property] = subscription[property];
+        Object.defineProperty(subscription, property,
         {
-          // Currently only "disabled" property of subscription used for observation
-          // but with Advanced tab implementation we should also add more properties.
-          ["disabled"].forEach(function(property)
+          get: function()
           {
-            subscription["$" + property] = subscription[property];
-            Object.defineProperty(subscription, property,
-            {
-              get: function()
-              {
-                return this["$" + property];
-              },
-              set: function(value)
-              {
-                this["$" + property] = value;
-                onObjectChanged();
-              }
-            });
-          });
-        }
-        else
-        {
-          Object.observe(subscription, onObjectChanged);
-        }
+            return this["$" + property];
+          },
+          set: function(value)
+          {
+            this["$" + property] = value;
+            var change = Object.create(null);
+            change.name = property;
+            onObjectChanged([change]);
+          }
+        });
+      });
+    }
+    else
+    {
+      Object.observe(subscription, onObjectChanged);
+    }
+  }
 
+  function updateSubscription(subscription)
+  {
+    var subscriptionUrl = subscription.url;
+    var knownSubscription = subscriptionsMap[subscriptionUrl];
+    if (knownSubscription)
+    {
+      for (var property in subscription)
+        if (property != "title")
+          knownSubscription[property] = subscription[property];
+    }
+    else
+    {
+      observeSubscription(subscription);
+      getAcceptableAdsURL(function(acceptableAdsUrl)
+      {
         var collection = null;
         if (subscriptionUrl in recommendationsMap)
         {
@@ -381,7 +463,6 @@
           subscription.disabled = null;
           subscription.downloadStatus = null;
           subscription.homepage = null;
-          subscription.lastSuccess = null;
           var recommendation = Object.create(null);
           recommendation.type = element.getAttribute("type");
           var prefix = element.getAttribute("prefixes");
@@ -402,8 +483,24 @@
       });
   }
 
+  function findParentData(element, dataName, returnElement)
+  {
+    while (element)
+    {
+      if (element.hasAttribute("data-" + dataName))
+        return returnElement ? element : element.getAttribute("data-" + dataName);
+
+      element = element.parentElement;
+    }
+    return null;
+  }
+
   function onClick(e)
   {
+    var context = document.querySelector(".show-context-menu");
+    if (context)
+      context.classList.remove("show-context-menu");
+
     var element = e.target;
     while (true)
     {
@@ -469,21 +566,38 @@
           document.body.setAttribute("data-tab",
             element.getAttribute("data-tab"));
           break;
+        case "update-all-subscriptions":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "subscriptions.update"
+          });
+          break;
+        case "open-context-menu":
+          var listItem = findParentData(element, "access", true);
+          if (listItem != context)
+            listItem.classList.add("show-context-menu");
+          break;
+        case "update-now":

[Thomas Greiner, 2016/02/01 18:52:36]

Detail: For consistency I'd suggest renaming this to "update-subscription". Also
because "update-now" could be confused with "update-all-subscriptions".

[saroyanm, 2016/02/03 14:04:27]

Fare enough, done.

+          ext.backgroundPage.sendMessage(
+          {
+            type: "subscriptions.update",
+            url: findParentData(element, "access", false)
+          });
+          break;
+        case "remove-subscription":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "subscriptions.remove",
+            url: findParentData(element, "access", false)
+          });
+          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();
-
     function onFindLanguageKeyUp()
     {
       var searchStyle = E("search-style");
@@ -755,14 +869,27 @@
     switch (action)
     {
       case "added":
+        updateSubscription(subscription);
+        updateShareLink();
+
+        var knownSubscription = subscriptionsMap[subscription.url];
+        if (knownSubscription)
+          collections.filterLists.addItems(knownSubscription);
+        else
+          collections.filterLists.addItems(subscription);
+        break;
       case "disabled":
         updateSubscription(subscription);
         updateShareLink();
         break;
+      case "lastDownload":
+        updateSubscription(subscription);
+        break;
       case "homepage":
         // TODO: NYI
         break;
       case "removed":
+        var knownSubscription = subscriptionsMap[subscription.url];
         getAcceptableAdsURL(function(acceptableAdsUrl)
         {
           if (subscription.url == acceptableAdsUrl)
@@ -772,7 +899,6 @@
           }
           else
           {
-            var knownSubscription = subscriptionsMap[subscription.url];
             if (subscription.url in recommendationsMap)
               knownSubscription.disabled = true;
             else
@@ -782,6 +908,7 @@
             }
           }
           updateShareLink();
+          collections.filterLists.removeItem(knownSubscription);
         });
         break;
       case "title":
@@ -871,7 +998,7 @@
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
-    filter: ["added", "disabled", "homepage", "removed", "title"]
+    filter: ["added", "disabled", "homepage", "lastDownload", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);