issue 3741 - Add "remove" option to list items in new options page

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 recommendationsMap = 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 58 matching lines @@
 
     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("aria-label", this._getItemTitle(item, j));
         listItem.setAttribute("data-access", item.url || item.text);
-
-        var labelId = "label-" + (++maxLabelId);
+        listItem.setAttribute("role", "section");
+
         var label = listItem.querySelector(".display");
-        label.setAttribute("id", labelId);
-
-        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);
+        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)
           }
         }
 
         this._setEmpty(table, null);
         if (table.hasChildNodes())
         {
           table.insertBefore(listItem,
               table.childNodes[this.items.indexOf(item)]);
         }
         else
@@ skipping 48 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: toggleDisableSubscription
+      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: toggleDisableSubscription
+      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 updateLanguageCollections(subscription)
   {
-    var recommendation = recommendationsMap[subscription.url];
-
-    if (recommendation && recommendation.type == "ads")
+    if (subscription.recommended == "ads")
     {
       if (subscription.disabled)
       {
         collections.allLangs.addItems(subscription);
         collections.langs.removeItem(subscription);
       }
       else
       {
         collections.allLangs.removeItem(subscription);
         collections.langs.addItems(subscription);
       }
     }
   }
 
   function addSubscription(subscription)
   {
     var collection;
-    if (subscription.url in recommendationsMap)
-    {
-      var recommendation = recommendationsMap[subscription.url];
-      if (recommendation.type != "ads")
+    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);
     subscriptionsMap[subscription.url] = subscription;
+    updateTooltips();
   }
 
   function updateSubscription(subscription)
   {
     var knownSubscription = subscriptionsMap[subscription.url];
     for (var property in subscription)
     {
-      if (property == "title" && subscription.url in recommendationsMap)
+      if (property == "title" && subscription.recommended)
         knownSubscription.originalTitle = subscription.title;
       else
         knownSubscription[property] = subscription[property];
     }
 
     for (var name in collections)
       collections[name].updateItem(knownSubscription);
 
     return knownSubscription;
   }
@@ skipping 20 matching lines @@
         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 subscription = Object.create(null);
-          subscription.originalTitle = element.getAttribute("title");
-          subscription.url = element.getAttribute("url");
-          subscription.disabled = true;
-          subscription.downloadStatus = null;
-          subscription.homepage = null;
-          var recommendation = Object.create(null);
-          recommendation.type = element.getAttribute("type");
+          var type = element.getAttribute("type");
+          var subscription = {
+            disabled: null,
+            downloadStatus: null,
+            homepage: null,
+            originalTitle: element.getAttribute("title"),
+            recommended: type,
+            url: element.getAttribute("url")
+          };
+
           var prefix = element.getAttribute("prefixes");
           if (prefix)
           {
             prefix = prefix.replace(/\W/g, "_");
             subscription.title = getMessage("options_language_" + prefix);
           }
           else
           {
-            var type = recommendation.type.replace(/\W/g, "_");
+            type = type.replace(/\W/g, "_");
             subscription.title = getMessage("common_feature_" + type + "_title");
           }
 
-          recommendationsMap[subscription.url] = recommendation;
           addSubscription(subscription);
         }
       });
   }
 
   function findParentData(element, dataName, returnElement)
   {
     while (element)
     {
       if (element.hasAttribute("data-" + dataName))
@@ skipping 115 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 onDOMLoaded()
   {
     populateLists();
     function onFindLanguageKeyUp()
     {
       var searchStyle = E("search-style");
@@ skipping 30 matching lines @@
     {
       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);
     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();
@@ skipping 101 matching lines @@
     dialog.setAttribute("aria-hidden", true);
     dialog.removeAttribute("aria-labelledby");
     document.body.removeAttribute("data-dialog");
     focusedBeforeDialog.focus();
   }
 
   function populateLists()
   {
     subscriptionsMap = Object.create(null);
     filtersMap = Object.create(null);
-    recommendationsMap = Object.create(null);
 
     // Empty collections and lists
     for (var property in collections)
       collections[property].clearAll();
 
     ext.backgroundPage.sendMessage(
     {
       type: "subscriptions.get",
       special: true
     },
@@ skipping 128 matching lines @@
         if (subscription.url in subscriptionsMap)
           subscription = updateSubscription(subscription);
         else
           addSubscription(subscription);
 
         collections.filterLists.addItems(subscription);
         updateLanguageCollections(subscription);
         break;
       case "removed":
         var knownSubscription = subscriptionsMap[subscription.url];
-
-        if (subscription.url == acceptableAdsUrl ||
-            subscription.url in recommendationsMap)
+        if (subscription.url == acceptableAdsUrl || subscription.recommended)
         {
           subscription.disabled = true;
           onSubscriptionMessage("disabled", subscription);
         }
         else
         {
           collections.custom.removeItem(knownSubscription);
           delete subscriptionsMap[subscription.url];
         }
         collections.filterLists.removeItem(knownSubscription);
@@ skipping 93 matching lines @@
           tab.hidden = true;
           tab.removeEventListener("click", onShareLinkClick, false);
         }
         else
           tab.addEventListener("click", onShareLinkClick, false);
       }
     }
 
     for (var i = 0; i < shareResources.length; i++)
       checkShareResource(shareResources[i], onResult);
+  }
+
+  function getMessages(id)
+  {
+    var messages = [];
+    for (var i = 1; true; i++)
+    {
+      var message = ext.i18n.getMessage(id + "_" + i);
+      if (!message)
+        break;
+
+      messages.push(message);
+    }
+    return messages;
+  }
+
+  function updateTooltips()
+  {
+    var anchors = document.querySelectorAll(":not(.tooltip) > [data-tooltip]");
+    for (var i = 0; i < anchors.length; i++)
+    {
+      var anchor = anchors[i];
+      var id = anchor.getAttribute("data-tooltip");
+
+      var wrapper = document.createElement("div");
+      wrapper.className = "tooltip";
+      anchor.parentNode.replaceChild(wrapper, anchor);
+      wrapper.appendChild(anchor);
+
+      var topTexts = getMessages(id);
+      var bottomTexts = getMessages(id + "_notes");
+
+      // We have to use native tooltips to avoid issues when attaching a tooltip
+      // to an element in a scrollable list or otherwise it might get cut off
+      if (anchor.hasAttribute("data-tooltip-native"))
+      {
+        var title = topTexts.concat(bottomTexts).join("\n\n");
+        anchor.setAttribute("title", title);
+        continue;
+      }
+
+      var tooltip = document.createElement("div");
+      tooltip.setAttribute("role", "tooltip");
+
+      var flip = anchor.getAttribute("data-tooltip-flip");
+      if (flip)
+        tooltip.className = "flip-" + flip;
+
+      var imageSource = anchor.getAttribute("data-tooltip-image");
+      if (imageSource)
+      {
+        var image = document.createElement("img");
+        image.src = imageSource;
+        image.alt = "";
+        tooltip.appendChild(image);
+      }
+
+      for (var j = 0; j < topTexts.length; j++)
+      {
+        var paragraph = document.createElement("p");
+        paragraph.innerHTML = topTexts[j];
+        tooltip.appendChild(paragraph);
+      }
+      if (bottomTexts.length > 0)
+      {
+        var notes = document.createElement("div");
+        notes.className = "notes";
+        for (var j = 0; j < bottomTexts.length; j++)
+        {
+          var paragraph = document.createElement("p");
+          paragraph.innerHTML = bottomTexts[j];
+          notes.appendChild(paragraph);
+        }
+        tooltip.appendChild(notes);
+      }
+
+      wrapper.appendChild(tooltip);
+    }
   }
 
   ext.onMessage.addListener(function(message)
   {
     switch (message.type)
     {
       case "app.respond":
         switch (message.action)
         {
           case "addSubscription":
@@ skipping 39 matching lines @@
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
         "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();