Issue 4156 - Adblocking filter only being removed in advanced tab fix

new-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 filtersMap = Object.create(null);
   var collections = Object.create(null);
   var acceptableAdsUrl = 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)
@@ skipping 27 matching lines @@
 
   Collection.prototype._getItemTitle = function(item, i)
   {
     if (item.url == acceptableAdsUrl)
       return getMessage("options_acceptableAds_description");
     if (this.details[i].useOriginalTitle && item.originalTitle)
       return item.originalTitle;
     return item.title || item.url || item.text;
   };
 
-  Collection.prototype.addItems = function()
-  {
-    var length = Array.prototype.push.apply(this.items, arguments);
-    if (length == 0)
+  Collection.prototype.addItem = function(item)
+  {
+    if (this.items.indexOf(item) >= 0)
       return;
 
+    this.items.push(item);
     this.items.sort(function(a, b)
     {
       // Make sure that Acceptable Ads is always last, since it cannot be
       // disabled, but only be removed. That way it's grouped together with
       // the "Own filter list" which cannot be disabled either at the bottom
       // of the filter lists in the Advanced tab.
       if (a.url == acceptableAdsUrl)
         return 1;
       if (b.url == acceptableAdsUrl)
         return -1;
 
       var aTitle = this._getItemTitle(a, 0).toLowerCase();
       var bTitle = this._getItemTitle(b, 0).toLowerCase();
       return aTitle.localeCompare(bTitle);
     }.bind(this));
 
     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 listItem = document.createElement("li");
-        listItem.appendChild(document.importNode(template.content, true));
-        listItem.setAttribute("data-access", item.url || item.text);
-
-        var labelId = "label-" + (++maxLabelId);
-        var label = listItem.querySelector(".display");
-        label.setAttribute("id", labelId);
-        if (item.recommended && label.hasAttribute("data-tooltip"))
-        {
-          var tooltipId = label.getAttribute("data-tooltip");
-          tooltipId = tooltipId.replace("%value%", item.recommended);
-          label.setAttribute("data-tooltip", tooltipId);
+      var listItem = document.createElement("li");
+      listItem.appendChild(document.importNode(template.content, true));
+      listItem.setAttribute("aria-label", this._getItemTitle(item, j));
+      listItem.setAttribute("data-access", item.url || item.text);
+      listItem.setAttribute("role", "section");
+
+      var label = listItem.querySelector(".display");
+      if (item.recommended && label.hasAttribute("data-tooltip"))
+      {
+        var tooltipId = label.getAttribute("data-tooltip");
+        tooltipId = tooltipId.replace("%value%", item.recommended);
+        label.setAttribute("data-tooltip", tooltipId);
+      }
+
+      var controls = listItem.querySelectorAll(".control");
+      for (var k = 0; k < controls.length; k++)
+      {
+        if (controls[k].hasAttribute("title"))
+        {
+          var titleValue = getMessage(controls[k].getAttribute("title"));
+          controls[k].setAttribute("title", titleValue)
         }
-
-        var control = listItem.querySelector(".control");
-        if (control)
-        {
-          control.setAttribute("aria-labelledby", labelId);
-          control.addEventListener("click", this.details[j].onClick, false);
-
-          var role = control.getAttribute("role");
-          if (role == "checkbox" && !label.hasAttribute("data-action"))
-          {
-            var controlId = "control-" + maxLabelId;
-            control.setAttribute("id", controlId);
-            label.setAttribute("for", controlId);
-          }
-        }
-
-        this._setEmpty(table, null);
-        if (table.hasChildNodes())
-        {
-          table.insertBefore(listItem,
-              table.childNodes[this.items.indexOf(item)]);
-        }
-        else
-          table.appendChild(listItem);
-        this.updateItem(item);
-      }
+      }
+
+      this._setEmpty(table, null);
+      if (table.hasChildNodes())
+      {
+        table.insertBefore(listItem,
+            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;
 
@@ skipping 35 matching lines @@
     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 = this._getItemTitle(item, i);
       element.querySelector(".display").textContent = title;
-      if (title)
+      element.setAttribute("aria-label", title);
+      if (this.details[i].searchable)
         element.setAttribute("data-search", title.toLowerCase());
       var control = element.querySelector(".control[role='checkbox']");
       if (control)
       {
         control.setAttribute("aria-checked", item.disabled == false);
-        if (item.url == acceptableAdsUrl && this.details[i].onClick ==
-                                            toggleDisableSubscription)
+        if (item.url == acceptableAdsUrl && this == collections.filterLists)
           control.setAttribute("disabled", true);
       }
 
       var dateElement = element.querySelector(".date");
       var timeElement = element.querySelector(".time");
       if (dateElement && timeElement)
       {
         var message = element.querySelector(".message");
         if (item.isDownloading)
         {
@@ skipping 60 matching lines @@
     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.getAttribute("aria-checked") == "true")
-    {
-      ext.backgroundPage.sendMessage({
-        type: "subscriptions.remove",
-        url: subscriptionUrl
-      });
-    }
-    else
-      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 = findParentData(this, "access", false);
-    addEnableSubscription(url);
-  }
-
-  function onRemoveFilterClick()
-  {
-    var filter = findParentData(this, "access", false);
-    ext.backgroundPage.sendMessage(
-    {
-      type: "filters.remove",
-      text: filter
-    });
-  }
-
   collections.popular = new Collection(
   [
     {
-      id: "recommend-list-table",
-      onClick: toggleRemoveSubscription
+      id: "recommend-list-table"
     }
   ]);
   collections.langs = new Collection(
   [
     {
       id: "blocking-languages-table",
-      emptyText: "options_dialog_language_added_empty",
-      onClick: toggleRemoveSubscription
+      emptyText: "options_dialog_language_added_empty"
     },
     {
       id: "blocking-languages-dialog-table",
       emptyText: "options_dialog_language_added_empty"
     }
   ]);
   collections.allLangs = new Collection(
   [
     {
       id: "all-lang-table",
       emptyText: "options_dialog_language_other_empty",
-      onClick: onAddLanguageSubscriptionClick
+      searchable: true
     }
   ]);
   collections.acceptableAds = new Collection(
   [
     {
-      id: "acceptableads-table",
-      onClick: toggleRemoveSubscription
+      id: "acceptableads-table"
     }
   ]);
   collections.custom = new Collection(
   [
     {
-      id: "custom-list-table",
-      onClick: toggleRemoveSubscription
+      id: "custom-list-table"
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
       id: "whitelisting-table",
-      emptyText: "options_whitelisted_empty",
-      onClick: onRemoveFilterClick
+      emptyText: "options_whitelisted_empty"
     }
   ]);
   collections.customFilters = new Collection(
   [
     {
       id: "custom-filters-table",
       emptyText: "options_customFilters_empty"
     }
   ]);
   collections.filterLists = new Collection(
   [
     {
       id: "all-filter-lists-table",
-      onClick: toggleDisableSubscription,
       useOriginalTitle: true
     }
   ]);
+
+  function toggleShowLanguage(subscription)
+  {
+    if (subscription.recommended == "ads")
+    {
+      if (subscription.disabled)
+      {
+        collections.allLangs.addItem(subscription);
+        collections.langs.removeItem(subscription);
+      }
+      else
+      {
+        collections.allLangs.removeItem(subscription);
+        collections.langs.addItem(subscription);
+      }
+    }
+  }
 
   function addSubscription(subscription)
   {
     var collection;
     if (subscription.recommended)
     {
       if (subscription.recommended != "ads")
         collection = collections.popular;
       else if (subscription.disabled == false)
         collection = collections.langs;
       else
         collection = collections.allLangs;
     }
     else if (subscription.url == acceptableAdsUrl)
       collection = collections.acceptableAds;
     else
       collection = collections.custom;
 
-    collection.addItems(subscription);
+    collection.addItem(subscription);
     subscriptionsMap[subscription.url] = subscription;
+    toggleShowLanguage(subscription);
     updateTooltips();
   }
 
   function updateSubscription(subscription)
   {
     for (var name in collections)
       collections[name].updateItem(subscription);
+
+    toggleShowLanguage(subscription);
   }
 
   function updateFilter(filter)
   {
     var match = filter.text.match(/^@@\|\|([^\/:]+)\^\$document$/);
     if (match && !filtersMap[filter.text])
     {
       filter.title = match[1];
-      collections.whitelist.addItems(filter);
+      collections.whitelist.addItem(filter);
     }
     else
-      collections.customFilters.addItems(filter);
+      collections.customFilters.addItem(filter);
 
     filtersMap[filter.text] = filter;
   }
 
   function loadRecommendations()
   {
     fetch("subscriptions.xml")
       .then(function(response)
       {
         return response.text();
       })
       .then(function(text)
       {
         var list = document.getElementById("subscriptionSelector");
         var doc = new DOMParser().parseFromString(text, "application/xml");
         var elements = doc.documentElement.getElementsByTagName("subscription");
         for (var i = 0; i < elements.length; i++)
         {
           var element = elements[i];
           var type = element.getAttribute("type");
           var subscription = {
-            disabled: null,
+            disabled: true,
             downloadStatus: null,
             homepage: null,
             originalTitle: element.getAttribute("title"),
             recommended: type,
             url: element.getAttribute("url")
           };
 
           var prefix = element.getAttribute("prefixes");
           if (prefix)
           {
@@ skipping 27 matching lines @@
   {
     ext.backgroundPage.sendMessage(message, function(errors)
     {
       if (errors.length > 0)
         alert(errors.join("\n"));
       else if (onSuccess)
         onSuccess();
     });
   }
 
+  function openDocLink(id)
+  {
+    getDocLink(id, function(link)
+    {
+      if (id == "share-general")
+        openSharePopup(link);
+      else
+        location.href = link;
+    });
+  }
+
+  function switchTab(id)
+  {
+    location.hash = id;
+  }
+
   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)
         return;
 
       if (element.hasAttribute("data-action"))
         break;
 
       element = element.parentElement;
     }
 
+    var element = findParentData(e.target, "action", true);
     var actions = element.getAttribute("data-action").split(",");
     for (var i = 0; i < actions.length; i++)
     {
       switch (actions[i])
       {
         case "add-domain-exception":
           addWhitelistedDomain();
           break;
         case "add-predefined-subscription":
           var dialog = E("dialog-content-predefined");
@@ skipping 19 matching lines @@
         case "edit-domain-exception":
           document.querySelector("#whitelisting .controls").classList.add("mode-edit");
           E("whitelisting-textbox").focus();
           break;
         case "import-subscription":
           var url = E("blockingList-textbox").value;
           addEnableSubscription(url);
           closeDialog();
           break;
         case "open-dialog":
-          openDialog(element.getAttribute("data-dialog"));
+          var dialog = findParentData(element, "dialog", false);
+          openDialog(dialog);
+          break;
+        case "open-doclink":
+          var doclink = findParentData(element, "doclink", false);
+          openDocLink(doclink);
           break;
         case "save-custom-filters":
           sendMessageHandleErrors(
           {
             type: "filters.importRaw",
             text: E("custom-filters-raw").value,
             removeExisting: true
           },
           function()
           {
             E("custom-filters").classList.remove("mode-edit");
           });
           break;
         case "switch-tab":
-          document.body.setAttribute("data-tab",
-            element.getAttribute("data-tab"));
+          var tabId = findParentData(e.target, "tab", false);
+          switchTab(tabId);
           break;
         case "toggle-pref":
           ext.backgroundPage.sendMessage(
           {
             type: "prefs.toggle",
             key: findParentData(element, "pref", false)
           });
           break;
         case "update-all-subscriptions":
           ext.backgroundPage.sendMessage(
@@ skipping 13 matching lines @@
             url: findParentData(element, "access", false)
           });
           break;
         case "remove-subscription":
           ext.backgroundPage.sendMessage(
           {
             type: "subscriptions.remove",
             url: findParentData(element, "access", false)
           });
           break;
-      }
+        case "toggle-remove-subscription":
+          var subscriptionUrl = findParentData(element, "access", false);
+          if (element.getAttribute("aria-checked") == "true")
+          {
+            ext.backgroundPage.sendMessage({
+              type: "subscriptions.remove",
+              url: subscriptionUrl
+            });
+          }
+          else
+            addEnableSubscription(subscriptionUrl);
+          break;
+        case "toggle-disable-subscription":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "subscriptions.toggle",
+            keepInstalled: true,
+            url: findParentData(element, "access", false)
+          });
+          break;
+        case "add-language-subscription":
+          addEnableSubscription(findParentData(element, "access", false));
+          break;
+        case "remove-filter":
+          ext.backgroundPage.sendMessage(
+          {
+            type: "filters.remove",
+            text: findParentData(element, "access", false)
+          });
+          break;
+      }
+    }
+  }
+
+  function getKey(e)
+  {
+    // e.keyCode has been deprecated so we attempt to use e.key
+    if ("key" in e)
+      return e.key;
+    return getKey.keys[e.keyCode];
+  }
+  getKey.keys = {
+    9: "Tab",
+    13: "Enter",
+    27: "Escape",
+    37: "ArrowLeft",
+    38: "ArrowUp",
+    39: "ArrowRight",
+    40: "ArrowDown"
+  };
+
+  function onKeyUp(e)
+  {
+    var key = getKey(e);
+    var element = document.activeElement;
+    if (!key || !element)
+      return;
+
+    var container = findParentData(element, "action", true);
+    if (!container || !container.hasAttribute("data-keys"))
+      return;
+
+    var keys = container.getAttribute("data-keys").split(" ");
+    if (keys.indexOf(key) < 0)
+      return;
+
+    switch (container.getAttribute("data-action"))
+    {
+      case "add-domain-exception":
+        addWhitelistedDomain();
+        break;
+      case "open-doclink":
+        var doclink = findParentData(element, "doclink", false);
+        openDocLink(doclink);
+        break;
+      case "switch-tab":
+        if (key == "Enter")
+        {
+          var tabId = findParentData(element, "tab", false);
+          switchTab(tabId);
+        }
+        else if (element.hasAttribute("aria-selected"))
+        {
+          if (key == "ArrowLeft" || key == "ArrowUp")
+          {
+            element = element.previousElementSibling
+                || container.lastElementChild;
+          }
+          else if (key == "ArrowRight" || key == "ArrowDown")
+          {
+            element = element.nextElementSibling
+                || container.firstElementChild;
+          }
+
+          var tabId = findParentData(element, "tab", false);
+          switchTab(tabId);
+        }
+        break;
+    }
+  }
+
+  function selectTabItem(tabId, container, focus)
+  {
+    // Show tab content
+    document.body.setAttribute("data-tab", tabId);
+
+    // Select tab
+    var tabList = container.querySelector("[role='tablist']");
+    if (!tabList)
+      return null;
+
+    var previousTab = tabList.querySelector("[aria-selected]");
+    previousTab.removeAttribute("aria-selected");
+    previousTab.setAttribute("tabindex", -1);
+
+    var tab = tabList.querySelector("li[data-tab='" + tabId + "']");
+    tab.setAttribute("aria-selected", true);
+    tab.setAttribute("tabindex", 0);
+
+    var tabContentId = tab.getAttribute("aria-controls");
+    var tabContent = document.getElementById(tabContentId);
+
+    // Select sub tabs
+    if (tab.hasAttribute("data-subtab"))
+      selectTabItem(tab.getAttribute("data-subtab"), tabContent, false);
+
+    if (tab && focus)
+      tab.focus();
+
+    return tabContent;
+  }
+
+  function onHashChange()
+  {
+    var hash = location.hash.substr(1);
+    if (!hash)
+      return;
+
+    // Select tab and parent tabs
+    var tabIds = hash.split("-");
+    var tabContent = document.body;
+    for (var i = 0; i < tabIds.length; i++)
+    {
+      var tabId = tabIds.slice(0, i + 1).join("-");
+      tabContent = selectTabItem(tabId, tabContent, true);
+      if (!tabContent)
+        break;
     }
   }
 
   function onDOMLoaded()
   {
     populateLists();
     function onFindLanguageKeyUp()
     {
       var searchStyle = E("search-style");
       if (!this.value)
         searchStyle.innerHTML = "";
       else
         searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
     }
 
-    function getKey(e)
-    {
-      // e.keyCode has been deprecated so we attempt to use e.key
-      if ("key" in e)
-        return e.key;
-      return getKey.keys[e.keyCode];
-    }
-    getKey.keys = {
-      9: "Tab",
-      13: "Enter",
-      27: "Escape"
-    };
-
     // Initialize navigation sidebar
     ext.backgroundPage.sendMessage(
     {
       type: "app.get",
       what: "addonVersion"
     },
     function(addonVersion)
     {
       E("abp-version").textContent = addonVersion;
     });
     getDocLink("releases", function(link)
     {
       E("link-version").setAttribute("href", link);
     });
 
-    getDocLink("contribute", function(link)
-    {
-      document.querySelector("#tab-contribute a").setAttribute("href", link);
-    });
-
     updateShareLink();
     updateTooltips();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
+    document.body.addEventListener("keyup", onKeyUp, false);
     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
@@ skipping 67 matching lines @@
             }
           }
           else if (e.target.classList.contains("focus-last"))
           {
             e.preventDefault();
             this.querySelector(".focus-first").focus();
           }
           break;
       }
     }, false);
+
+    onHashChange();
   }
 
   var focusedBeforeDialog = null;
   function openDialog(name)
   {
     var dialog = E("dialog");
     dialog.setAttribute("aria-hidden", false);
     dialog.setAttribute("aria-labelledby", "dialog-title-" + name);
     document.body.setAttribute("data-dialog", name);
 
@@ skipping 150 matching lines @@
         if (property == "title" && knownSubscription.recommended)
           knownSubscription.originalTitle = subscription.title;
         else
           knownSubscription[property] = subscription[property];
       }
       subscription = knownSubscription;
     }
     switch (action)
     {
       case "disabled":
-        if (subscription.recommended == "ads")
-        {
-          if (subscription.disabled == true)
-          {
-            collections.allLangs.addItems(subscription);
-            collections.langs.removeItem(subscription);
-          }
-          else
-          {
-            collections.allLangs.removeItem(subscription);
-            collections.langs.addItems(subscription);
-          }
-        }
         updateSubscription(subscription);
         break;
       case "downloading":
       case "downloadStatus":
       case "homepage":
       case "lastDownload":
       case "title":
         updateSubscription(subscription);
         break;
       case "added":
-        if (subscription.recommended == "ads")
-        {
-          collections.allLangs.removeItem(subscription);

[Thomas Greiner, 2016/06/22 10:08:04]

The subscription might be disabled when it's added so don't assume that it
isn't. Reverting the merge of `updateLanguageCollections()` should fix that
regression though.

[saroyanm, 2016/06/22 12:31:59]

Well spotted, done

-          collections.langs.addItems(subscription);
-        }
-        else if (subscription.url in subscriptionsMap)
+        if (subscription.url in subscriptionsMap)
           updateSubscription(subscription);
         else
           addSubscription(subscription);
-        
-        collections.filterLists.addItems(subscription);
+
+        collections.filterLists.addItem(subscription);
         break;
       case "removed":
         if (subscription.url == acceptableAdsUrl || subscription.recommended)
         {
           subscription.disabled = true;
           onSubscriptionMessage("disabled", subscription);
         }
         else
         {
           collections.custom.removeItem(subscription);
@@ skipping 58 matching lines @@
         break;
 
       case "safari_contentblocker":
         E("restart-safari").setAttribute("aria-hidden", value || initial);
         break;
     }
 
     var checkbox = document.querySelector("[data-pref='" + key + "'] button[role='checkbox']");
     if (checkbox)
       checkbox.setAttribute("aria-checked", value);
-  }
-
-  function onShareLinkClick(e)
-  {
-    e.preventDefault();
-
-    getDocLink("share-general", openSharePopup);
   }
 
   function updateShareLink()
   {
     var shareResources = [
       "https://facebook.com/plugins/like.php?",
       "https://platform.twitter.com/widgets/",
       "https://apis.google.com/se/0/_/+1/fastbutton?"
     ];
     var isAnyBlocked = false;
     var checksRemaining = shareResources.length;
 
     function onResult(isBlocked)
     {
       isAnyBlocked |= isBlocked;
       if (!--checksRemaining)
       {
         // Hide the share tab if a script on the share page would be blocked
-        var tab = E("tab-share");
-        if (isAnyBlocked)
-        {
-          tab.hidden = true;
-          tab.removeEventListener("click", onShareLinkClick, false);
-        }
-        else
-          tab.addEventListener("click", onShareLinkClick, false);
+        E("tab-share").hidden = isAnyBlocked;
       }
     }
 
     for (var i = 0; i < shareResources.length; i++)
       checkShareResource(shareResources[i], onResult);
   }
 
   function getMessages(id)
   {
     var messages = [];
@@ skipping 121 matching lines @@
         "shouldShowBlockElementMenu"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
         "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
+  window.addEventListener("hashchange", onHashChange, false);
 })();