Issue 2802/2358 - Dynamically generate tooltips in options page

options.js

Index: options.js
===================================================================
--- a/options.js
+++ b/options.js
@@ -87,7 +87,10 @@
         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)
         {
@@ -376,6 +379,7 @@
               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);
@@ -479,14 +483,16 @@
         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)
           {
@@ -1075,6 +1081,85 @@
       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)