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-2015 Eyeo GmbH
+ * 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 15 matching lines @@
       return aValue.localeCompare(bValue);
     });
 
     for (var j = 0; j < this.details.length; j++) 
     {
       var table = E(this.details[j].id);
       var template = table.querySelector("template");
       for (var i = 0; i < arguments.length; i++) 
       {
         var item = arguments[i];
-        var text = item.title || item.url || item.text;
         var listItem = document.createElement("li");
         listItem.appendChild(document.importNode(template.content, true));
         listItem.setAttribute("data-access", item.url || item.text);
-        listItem.querySelector(".display").textContent = text;
-        if (text)
-          listItem.setAttribute("data-search", text.toLowerCase());
-
-        updateBlockingList(listItem, item);
+
+        var labelId = "label-" + (++maxLabelId);
+        listItem.querySelector(".display").setAttribute("id", labelId);
         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);
-          control.checked = item.disabled == 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)
   {
     var index = this.items.indexOf(item);
     if (index == -1)
       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 = getListElement(table);
+
+      // Element gets removed so make sure to handle focus appropriately
+      var control = element.querySelector(".control");
+      if (control && control == document.activeElement)
+      {
+        if (!focusNextElement(element.parentElement, control))
+        {
+          // Fall back to next focusable element within same tab or dialog
+          var focusableElement = element.parentElement;
+          while (focusableElement)
+          {
+            if (focusableElement.classList.contains("tab-content")
+                || focusableElement.classList.contains("dialog-content"))
+              break;
+
+            focusableElement = focusableElement.parentElement;
+          }
+          focusNextElement(focusableElement || document, control);
+        }
+      }
+
       element.parentElement.removeChild(element);
       if (this.items.length == 0)
         this._setEmpty(table, this.details[i].emptyText);
     }
   };
 
+  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 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)

[Thomas Greiner, 2016/01/27 17:17:00]

Again, checking for the "static" class when using `Element.nextElementSibling`
should be sufficient or not?

[saroyanm, 2016/01/28 17:00:14]

Done.

+        if (element.tagName == "LI" && !element.classList.contains("static"))
           table.removeChild(element);
-        element = element.nextSibling
+        element = element.nextElementSibling;
       }
 
       this._setEmpty(table, this.details[i].emptyText);
     }
   };
 
-  Collection.prototype.hasId = function(id) 
-  {
-    for (var i = 0; i < this.details.length; i++)
-      if (this.details[i].id == id)
-        return true;
-      
-    return false;
-  };
-
-  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)
+      return false;
+
+    nextElement.focus();
+    return true;
   }
 
   function toggleRemoveSubscription(e)
   {
     e.preventDefault();
     var subscriptionUrl = findParentData(e.target, "access", false);
-    if (!e.target.checked)
+    if (e.target.getAttribute("aria-checked") == "true")
     {
       ext.backgroundPage.sendMessage({
         type: "subscriptions.remove",
         url: subscriptionUrl
       });
     }
     else
       addEnableSubscription(subscriptionUrl);
   }
 
@@ skipping 89 matching lines @@
       onClick: toggleDisableSubscription
     }
   ]);
 
   function observeSubscription(subscription)
   {
     function onObjectChanged(change)
     {
       for (var i = 0; i < change.length; i++)
       {
-        var property = change[i].name;
-        if (property == "disabled")
-        {
-          var access = (subscription.url || 
-                        subscription.text).replace(/'/g, "\\'");
-          var elements = document.querySelectorAll("[data-access='" + access + "']");
-          for (var i = 0; i < elements.length; i++)
-          {
-            var element = elements[i];
-            var tableId = element.parentElement ? element.parentElement.id : "";
-            var control = element.querySelector(".control");
-            if (control && control.localName == "input")
-              control.checked = subscription.disabled == false;
-            if (subscription.url in recommendationsMap)
+        if (change[i].name == "disabled")
+        {
+          var recommendation = recommendationsMap[subscription.url];
+          if (recommendation && recommendation.type == "ads")
+          {
+            if (subscription.disabled == false)
             {
-              var recommendation = recommendationsMap[subscription.url];
-              if (recommendation.type == "ads" && 
-                 (collections.langs.hasId(tableId) ||
-                 collections.allLangs.hasId(tableId)))
-              {
-                if (subscription.disabled == false)
-                {
-                  collections.allLangs.removeItem(subscription);
-                  collections.langs.addItems(subscription);
-                }
-                else
-                {
-                  collections.allLangs.addItems(subscription);
-                  collections.langs.removeItem(subscription);
-                }
-              }
+              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");

[Thomas Greiner, 2016/01/27 17:17:00]

Detail: This class name is not very descriptive of its effects so it'd be great
if you could call it something like "show-context" or "show-context-menu"
instead.

[saroyanm, 2016/01/28 17:00:15]

Done.

-        if (context)
-          context.classList.remove("context");
         return;

[Thomas Greiner, 2016/01/27 17:17:00]

The context menu is also supposed to go away whenever you click on an element
that has an action attached to it so it probably makes sense to move this
outside of the switch-statement to the bottom of the click handler.

e.g.

// close context menu

if (action == "open-context-menu")
{
  // open context menu unless it is the same one that we just closed above
}

[saroyanm, 2016/01/28 17:00:14]

Not really sure that I understood what you mean, but changed the implementation,
please let me know if it's still needs to be changed. 

[Thomas Greiner, 2016/01/29 17:48:09]

Here's a more detailed and fleshed-out version:

function onClick(e)
{
  ...
  var context = document.querySelector(".show-context-menu");
  if (context)
    context.classList.remove("show-context-menu");

  for (...)
  {
    switch (actions[i])
    {
      ...
      case "open-context-menu":
        var listItem = findParentData(element, "access", true);
        if (listItem != context)
          listItem.classList.add("show-context-menu");
        break;
      ...
    }
  }
  ...
}

That way you should be able to ensure that the context menu always goes away and
only comes up when clicking on a different subscription title.

[saroyanm, 2016/01/29 18:56:17]

Well, that's what I've had implemented as well after your note, beside of the
part for checking the context, because I wasn't sure whether the context needs
to be hidden after second click on the list item, but yes also added that part.

-      }
 
       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");

[Thomas Greiner, 2016/01/27 17:17:00]

Detail: This variable is not being used.

[saroyanm, 2016/01/28 17:00:15]

Done.

-          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")

[Thomas Greiner, 2016/01/27 17:17:00]

Detail: While the last parameter is optional in such cases, you did explicitly
set it in all other cases. I don't mind either way but it should be consistent.

[saroyanm, 2016/01/28 17:00:15]

Done.

+            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);
 })();