Issue 2802/2358 - Dynamically generate tooltips in 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
@@ skipping 69 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 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);
+        var display = listItem.querySelector(".display");
+        display.setAttribute("id", labelId);
+        if (item.type)
+          display.setAttribute("data-tooltip-value", item.type);
         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);
@@ skipping 268 matching lines @@
             {
               collections.allLangs.removeItem(subscription);
               collections.langs.addItems(subscription);
             }
             else
             {
               collections.allLangs.addItems(subscription);
               collections.langs.removeItem(subscription);
             }
           }
+          updateTooltips();

[saroyanm, 2016/03/24 18:27:51]

Why do you update tooltip on every update ? I think this should be called during
the load and after adding new subscription.

[Thomas Greiner, 2016/05/31 17:00:01]

Since we no longer use `observeSubscription()` I made that change now together
with the rebase.

         }
         for (var i in collections)
           collections[i].updateItem(subscription);
       }
     }
 
     if (!Object.observe)
     {
       ["disabled", "lastDownload"].forEach(function(property)
       {
@@ skipping 83 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;
-          var recommendation = Object.create(null);
-          recommendation.type = element.getAttribute("type");
+          var recommendation = {type: element.getAttribute("type")};

[saroyanm, 2016/03/24 18:27:51]

Do we need reccomendationMap ? I think it's possible to only have type in
"knownSubscriptions" anyway we are not overriding the properties until the
original subscriptions doesn't have some, so I assume we can get rid of
recommendationsMap and keep checking for type as you did above, beforehand we
were overriding all properties, so probably that was the reason why we had two
different mapping objects.
Otherwise I think it's better to have types only in recommendationMaps.

[Thomas Greiner, 2016/05/31 17:00:02]

Indeed, `recommendationsMap` was no longer necessary so I removed it now.

+          var subscription = {
+            disabled: null,
+            downloadStatus: null,
+            homepage: null,
+            lastDownload: null,
+            title: element.getAttribute("title"),
+            type: recommendation.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, "_");
             subscription.title = getMessage("common_feature_" + type + "_title");
@@ skipping 568 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];

[saroyanm, 2016/03/24 18:27:50]

Why does it called anchor ? 

[Thomas Greiner, 2016/05/31 17:00:01]

Because it's the element the tooltip is anchored/attached to.

You can also find this naming in the XUL's `openPopup()` function which opens a
popup that's anchored to an existing UI element (see
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/openPopup).
It's also why the `<a>` tag is called "anchor tag" (see
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).

+      var id = anchor.getAttribute("data-tooltip");
+      id = id.replace("%value%", anchor.getAttribute("data-tooltip-value"));

[saroyanm, 2016/03/24 18:27:50]

Why not to do this when the item is added ? 
Currently you are setting there the data-tooltip-value and barely using it, I'm
not sure if we even need this attribute ?

[Thomas Greiner, 2016/05/31 17:00:02]

Done.

+
+      var wrapper = document.createElement("div");

[saroyanm, 2016/03/24 18:27:50]

Why do we need create a wrapper for elements that are only using title attribute
to show the tooltip, I think we should only do that for the elements that really
need wrapper.

[Thomas Greiner, 2016/05/31 17:00:01]

Because the alternative would be to put the tooltip inside of the anchor
element, in which case the tooltip would point to itself if we use
"aria-describedby" or "for" later on and that may cause issues (see #2411).

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

[saroyanm, 2016/03/24 18:27:51]

According to the ticket image attribute should be retrieved using [data-tooltip]
attribute.

[Thomas Greiner, 2016/05/31 17:00:02]

It's just tricky to determine whether the image exists so I thought it'd be
better to specify it explicitly since not every tooltip has an 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 32 matching lines @@
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
         "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();