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

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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 "use strict";
 
 (function()
 {
   var subscriptionsMap = Object.create(null);
   var recommendationsMap = Object.create(null);
   var filtersMap = Object.create(null);
   var collections = Object.create(null);
   var maxLabelId = 0;
+  var getMessage = ext.i18n.getMessage;
+  var filterErrors =
+  {
+    "synchronize_invalid_url": "options_filterList_lastDownload_invalidURL",
+    "synchronize_connection_error": "options_filterList_lastDownload_connectionError",
+    "synchronize_invalid_data": "options_filterList_lastDownload_invalidData",
+    "synchronize_checksum_mismatch": "options_filterList_lastDownload_checksumMismatch"
+  };
 
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
   Collection.prototype._setEmpty = function(table, text)
   {
     var placeholder = table.querySelector(".empty-placeholder");
     if (text && !placeholder)
     {
       placeholder = document.createElement("li");
       placeholder.className = "empty-placeholder";
-      placeholder.textContent = ext.i18n.getMessage(text);
+      placeholder.textContent = getMessage(text);
       table.appendChild(placeholder);
     }
     else if (placeholder)
       table.removeChild(placeholder);
   }
 
   Collection.prototype._createElementQuery = function(item)
   {
     var access = (item.url || item.text).replace(/'/g, "\\'");
     return function(container)
@@ skipping 21 matching lines @@
       var template = table.querySelector("template");
       for (var i = 0; i < arguments.length; i++) 
       {
         var item = arguments[i];
         var listItem = document.createElement("li");
         listItem.appendChild(document.importNode(template.content, true));
         listItem.setAttribute("data-access", item.url || item.text);
 
         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)
         {
           // We use aria-labelledby to avoid triggering the control when
           // interacting with the label
           control.setAttribute("aria-labelledby", labelId);
           control.addEventListener("click", this.details[j].onClick, false);
         }
 
         this._setEmpty(table, null);
         if (table.hasChildNodes())
         {
           table.insertBefore(listItem, 
-                              table.childNodes[this.items.indexOf(item)]);
+              table.childNodes[this.items.indexOf(item)]);
         }
         else
           table.appendChild(listItem);
         this.updateItem(item);
       }
     }
     return length;
   };
 
   Collection.prototype.removeItem = function(item)
@@ skipping 38 matching lines @@
   Collection.prototype.updateItem = function(item)
   {
     var access = (item.url || item.text).replace(/'/g, "\\'");
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
       var element = table.querySelector("[data-access='" + access + "']");
       if (!element)
         continue;
 
-      var text = item.title || item.url || item.text;
-      element.querySelector(".display").textContent = text;
-      if (text)
-        element.setAttribute("data-search", text.toLowerCase());
+      var title = item.title || item.url || item.text;
+      element.querySelector(".display").textContent = title;
+      if (title)
+        element.setAttribute("data-search", title.toLowerCase());
       var control = element.querySelector(".control[role='checkbox']");
       if (control)
         control.setAttribute("aria-checked", item.disabled == false);
+
+      var downloadStatus = item.downloadStatus;
+      var dateElement = element.querySelector(".date");
+      var timeElement = element.querySelector(".time");
+      if(dateElement && timeElement)
+      {
+        var message = element.querySelector(".message");
+        ext.backgroundPage.sendMessage(
+        {
+          type: "subscriptions.isDownloading",
+          url: item.url
+        },
+        function(isDownloading)
+        {
+          if (isDownloading)
+          {
+            var text = getMessage("options_filterList_lastDownload_inProgress");
+            message.textContent = text;
+            element.classList.add("show-message");
+          }
+          else if (downloadStatus && downloadStatus != "synchronize_ok")
+          {
+            if (downloadStatus in filterErrors)
+              message.textContent = getMessage(filterErrors[downloadStatus]);
+            else
+              message.textContent = item.downloadStatus;
+            element.classList.add("show-message");
+          }
+          else if (item.lastDownload > 0)
+          {
+            var dateTime = i18n_formatDateTime(item.lastDownload * 1000);
+            dateElement.textContent = dateTime[0];
+            timeElement.textContent = dateTime[1];
+            element.classList.remove("show-message");
+          }
+        });
+      }
+      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);
     }
   };
 
   Collection.prototype.clearAll = function()
   {
     this.items = [];
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
       var element = table.firstChild;
       while (element)
       {
-        if ((element.tagName == "LI" && !element.classList.contains("static")) ||
-            element.nodeType == 3)
+        if (element.tagName == "LI" && !element.classList.contains("static"))
           table.removeChild(element);
-        element = element.nextSibling
+        element = element.nextElementSibling;
       }
 
       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");
     focusables = Array.prototype.slice.call(focusables);
     var index = focusables.indexOf(currentElement);
     index += (index == focusables.length - 1) ? -1 : 1;
 
     var nextElement = focusables[index];
     if (!nextElement)
@@ skipping 112 matching lines @@
   ]);
 
   function observeSubscription(subscription)
   {
     function onObjectChanged(change)
     {
       for (var i = 0; i < change.length; i++)
       {
         if (change[i].name == "disabled")
         {
-          for (var i in collections)
-            collections[i].updateItem(subscription);
-
           var recommendation = recommendationsMap[subscription.url];
           if (recommendation && recommendation.type == "ads")
           {
             if (subscription.disabled == false)
             {
               collections.allLangs.removeItem(subscription);
               collections.langs.addItems(subscription);
             }
             else
             {
               collections.allLangs.addItems(subscription);
               collections.langs.removeItem(subscription);
             }
           }
         }
-        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);
-        }
+        for (var i in collections)
+          collections[i].updateItem(subscription);
       }
     }
 
     if (!Object.observe)
     {
       ["disabled", "lastDownload"].forEach(function(property)
       {
         subscription["$" + property] = subscription[property];
         Object.defineProperty(subscription, property,
         {
           get: function()
           {
             return this["$" + property];
           },
-          set: function(value)
-          {
-            this["$" + property] = value;
-            var change = Object.create(null);
-            change.name = property;
-            onObjectChanged([change]);
+          set: function(newValue)
+          {
+            var oldValue = this["$" + property];
+            if (oldValue != newValue)
+            {
+              this["$" + property] = newValue;
+              var change = Object.create(null);
+              change.name = property;
+              onObjectChanged([change]);
+            }
           }
         });
       });
     }
     else
     {
       Object.observe(subscription, onObjectChanged);
     }
   }
 
@@ skipping 68 matching lines @@
           subscription.url = element.getAttribute("url");
           subscription.disabled = null;
           subscription.downloadStatus = null;
           subscription.homepage = null;
           var recommendation = Object.create(null);
           recommendation.type = element.getAttribute("type");
           var prefix = element.getAttribute("prefixes");
           if (prefix)
           {
             prefix = prefix.replace(/\W/g, "_");
-            subscription.title = ext.i18n.getMessage("options_language_" + prefix);
+            subscription.title = getMessage("options_language_" + prefix);
           }
           else
           {
             var type = recommendation.type.replace(/\W/g, "_");
-            subscription.title = ext.i18n.getMessage("common_feature_" + type + "_title");
+            subscription.title = getMessage("common_feature_" + type + "_title");
           }
 
           recommendationsMap[subscription.url] = recommendation;
           updateSubscription(subscription);
         }
       });
   }
 
   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)
     {
       if (!element)
-      {
-        var context = document.querySelector(".context");
-        if (context)
-          context.classList.remove("context");
         return;
-      }
 
       if (element.hasAttribute("data-action"))
         break;
 
       element = element.parentElement;
     }
 
     var actions = element.getAttribute("data-action").split(",");
     for (var i = 0; i < actions.length; i++)
     {
@@ skipping 48 matching lines @@
             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":
+          if (listItem != context)
+            listItem.classList.add("show-context-menu");
+          break;
+        case "update-subscription":
           ext.backgroundPage.sendMessage(
           {
             type: "subscriptions.update",
-            url: findParentData(element, "access")
+            url: findParentData(element, "access", false)
           });
           break;
         case "remove-subscription":
           ext.backgroundPage.sendMessage(
           {
             type: "subscriptions.remove",
-            url: findParentData(element, "access")
+            url: findParentData(element, "access", false)
           });
-          break;
-        case "close-context-menu":
-          var access = findParentData(element, "access", true);
-          if (access)
-            access.classList.remove("context");
           break;
       }
     }
   }
 
   function onDOMLoaded()
   {
     populateLists();
     function onFindLanguageKeyUp()
     {
@@ skipping 34 matching lines @@
 
     getDocLink("contribute", function(link)
     {
       document.querySelector("#tab-contribute a").setAttribute("href", link);
     });
 
     updateShareLink();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
-    var placeholderValue  = ext.i18n.getMessage("options_dialog_language_find");
+    var placeholderValue  = getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
     E("whitelisting-textbox").addEventListener("keypress", function(e)
     {
       if (getKey(e) == "Enter")
         addWhitelistedDomain();
     }, false);
 
     // Advanced tab
     var filterTextbox = document.querySelector("#custom-filters-add input");
-    placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeholder");
+    placeholderValue = getMessage("options_customFilters_textbox_placeholder");
     filterTextbox.setAttribute("placeholder", placeholderValue);
     function addCustomFilters()
     {
       var filterText = filterTextbox.value;
       ext.backgroundPage.sendMessage(
       {
         type: "filters.add",
         text: filterText
       });
       filterTextbox.value = "";
@@ skipping 87 matching lines @@
             updateFilter(filters[i]);
         });
       }
     });
     loadRecommendations();
     getAcceptableAdsURL(function(acceptableAdsUrl)
     {
       var subscription = Object.create(null);
       subscription.url = acceptableAdsUrl;
       subscription.disabled = true;
-      subscription.title = ext.i18n.getMessage("options_acceptableAds_description");
+      subscription.title = getMessage("options_acceptableAds_description");
       updateSubscription(subscription);
 
       // Load user subscriptions
       ext.backgroundPage.sendMessage(
       {
         type: "subscriptions.get",
         downloadable: true
       }, 
       function(subscriptions)
       {
@@ skipping 219 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();