Issue 2802/2358 - Dynamically generate tooltips in options page

options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 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
@@ skipping 50 matching lines @@
     {
       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;
+        var display = listItem.querySelector(".display");
+        if (item.type)
+          display.setAttribute("data-tooltip-value", item.type);
+        display.textContent = text;
         if (text)
           listItem.setAttribute("data-search", text.toLowerCase());
 
         var control = listItem.querySelector(".control");
         if (control)
         {
           control.addEventListener("click", this.details[j].onClick, false);
           control.checked = item.disabled == false;
         }
 
@@ skipping 157 matching lines @@
                   collections.langs.addItems(subscription);
                 }
                 else
                 {
                   collections.allLangs.addItems(subscription);
                   collections.langs.removeItem(subscription);
                 }
               }
             }
           }
+          updateTooltips();
         }
 
         if (!Object.observe)
         {
           // Currently only "disabled" property of subscription used for observation
           // but with Advanced tab implementation we should also add more properties.
           ["disabled"].forEach(function(property)
           {
             subscription["$" + property] = subscription[property];
             Object.defineProperty(subscription, property,
@@ skipping 59 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.title = element.getAttribute("title");
-          subscription.url = element.getAttribute("url");
-          subscription.disabled = null;
-          subscription.downloadStatus = null;
-          subscription.homepage = null;
-          subscription.lastSuccess = null;
-          var recommendation = Object.create(null);
-          recommendation.type = element.getAttribute("type");
+          var recommendation = {type: element.getAttribute("type")};
+          var subscription = {
+            title: element.getAttribute("title"),
+            url: element.getAttribute("url"),
+            disabled: null,
+            downloadStatus: null,
+            homepage: null,
+            lastSuccess: null,
+            type: recommendation.type
+          };
           var prefix = element.getAttribute("prefixes");
           if (prefix)
           {
             prefix = prefix.replace(/\W/g, "_");
             subscription.title = ext.i18n.getMessage("options_language_" + prefix);
           }
           else
           {
             var type = recommendation.type.replace(/\W/g, "_");
             subscription.title = ext.i18n.getMessage("common_feature_" + type + "_title");
@@ skipping 427 matching lines @@
         }
         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");
+      id = id.replace("%value%", anchor.getAttribute("data-tooltip-value"));
+
+      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.textContent = 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.textContent = bottomTexts[j];
+          notes.appendChild(paragraph);
+        }
+        tooltip.appendChild(notes);
+      }
+
+      wrapper.appendChild(tooltip);
+    }
+  }
+
   ext.onMessage.addListener(function(message)
   {
     switch (message.type)
     {
       case "app.listen":
         if (message.action == "addSubscription")
         {
           var subscription = message.args[0];
           var dialog = E("dialog-content-predefined");
           dialog.querySelector("h3").textContent = subscription.title || "";
@@ skipping 25 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();