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);
@@ -71,6 +80,7 @@
 
         var labelId = "label-" + (++maxLabelId);
         listItem.querySelector(".display").setAttribute("id", labelId);
+		    updateBlockingList(listItem, item);

[Thomas Greiner, 2016/01/28 14:09:58]

Detail: Don't use `\t` for whitespaces.

         var control = listItem.querySelector(".control");
         if (control)
         {
@@ -82,7 +92,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 +111,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");
@@ -155,13 +169,56 @@
     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")) ||
+            element.nodeType == 3)
+          table.removeChild(element);
+        element = element.nextSibling
+      }
+
       this._setEmpty(table, this.details[i].emptyText);
     }
   };
 
+  function updateBlockingList(listItem, subscription)
+  {
+    var dateElement = listItem.querySelector(".date");
+    var timeElement = listItem.querySelector(".time");
+
+    if(dateElement && timeElement)
+    {
+      if (subscription.downloadStatus && 
+          subscription.downloadStatus != "synchronize_ok")
+      {
+        var map =
+        {
+          "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 (subscription.downloadStatus in map)
+          timeElement.textContent = ext.i18n.getMessage(map[subscription.downloadStatus]);
+        else
+          timeElement.textContent = subscription.downloadStatus;
+      }
+      else if (subscription.lastDownload > 0)
+      {
+        var dateTime = i18n_formatDateTime(subscription.lastDownload * 1000);
+        dateElement.textContent = dateTime[0];
+        timeElement.textContent = dateTime[1];
+      }
+    }
+    var websiteElement = listItem.querySelector(".context-menu .website");
+    var sourceElement = listItem.querySelector(".context-menu .source");
+    if (websiteElement && subscription.homepage)
+      websiteElement.setAttribute("href", subscription.homepage);
+    if (sourceElement)
+      sourceElement.setAttribute("href", subscription.url);
+  }
+
   function focusNextElement(container, currentElement)
   {
     var focusables = container.querySelectorAll("a, button, input, .control");
@@ -177,12 +234,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 +249,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 +282,7 @@
   [
     {
       id: "recommend-list-table",
-      onClick: onToggleSubscriptionClick
+      onClick: toggleRemoveSubscription
     }
   ]);
   collections.langs = new Collection(
@@ -222,7 +290,7 @@
     {
       id: "blocking-languages-table",
       emptyText: "options_dialog_language_added_empty",
-      onClick: onToggleSubscriptionClick
+      onClick: toggleRemoveSubscription
     },
     {
       id: "blocking-languages-dialog-table",
@@ -241,14 +309,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 +334,26 @@
       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 +368,60 @@
             }
           }
         }
+        else 
+        {
+          var blockingListId = collections.filterLists.details[0].id;
+          var blockingList = document.getElementById(blockingListId);
+          var listItem = blockingList.querySelector("[data-access='" +
+                          subscription.url + "']");
+          if (listItem)
+            updateBlockingList(listItem, subscription);
+        }
+      }
+    }
 
-        if (!Object.observe)
+    if (!Object.observe)
+    {
+      ["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 +479,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,13 +499,30 @@
       });
   }
 
+  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 element = e.target;
     while (true)
     {
       if (!element)
+      {
+        var context = document.querySelector(".context");
+        if (context)
+          context.classList.remove("context");
         return;
+      }
 
       if (element.hasAttribute("data-action"))
         break;
@@ -469,21 +583,43 @@
           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);
+          var contextMenu = listItem.querySelector(".content");
+          listItem.classList.add("context");
+          break;
+        case "update-now":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "subscriptions.update",
+            url: findParentData(element, "access")
+          });
+          break;
+        case "remove-subscription":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "subscriptions.remove",
+            url: findParentData(element, "access")
+          });
+          break;
+        case "close-context-menu":
+          var access = findParentData(element, "access", true);
+          if (access)
+            access.classList.remove("context");
+          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 +891,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 +921,6 @@
           }
           else
           {
-            var knownSubscription = subscriptionsMap[subscription.url];
             if (subscription.url in recommendationsMap)
               knownSubscription.disabled = true;
             else
@@ -782,6 +930,7 @@
             }
           }
           updateShareLink();
+          collections.filterLists.removeItem(knownSubscription);
         });
         break;
       case "title":
@@ -871,7 +1020,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);