Issue 5542: Implement tooltips for new options page

desktop-options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 515 matching lines @@
                                             type + "_title");
           }
 
           addSubscription(subscription);
         }
       });
   }
 
   function findParentData(element, dataName, returnElement)
   {
-    while (element)
-    {
-      if (element.hasAttribute("data-" + dataName))
-      {
-        if (returnElement)
-          return element;
-        return element.getAttribute("data-" + dataName);
-      }
-
-      element = element.parentElement;
-    }
-    return null;
+    element = element.closest(`[data-${dataName}]`);
+    if (!element)
+      return null;
+    if (returnElement)
+      return element;
+    return element.getAttribute(`data-${dataName}`);
   }
 
   function sendMessageHandleErrors(message, onSuccess)
   {
     browser.runtime.sendMessage(message, (errors) =>
     {
       if (errors.length > 0)
         alert(errors.join("\n"));
       else if (onSuccess)
         onSuccess();
@@ skipping 353 matching lines @@
 
     // General tab
     getDocLink("contribute", (link) =>
     {
       E("contribute").href = link;
     });
     getDocLink("acceptable_ads_criteria", (link) =>
     {
       setLinks("enable-acceptable-ads-description", link);
     });
-    setElementText(E("tracking-warning-1"), "options_tracking_warning_1", 
+    setElementText(E("tracking-warning-1"), "options_tracking_warning_1",
       [getMessage("common_feature_privacy_title"),
-      getMessage("options_acceptableAds_ads_label")]);
-    setElementText(E("tracking-warning-3"), "options_tracking_warning_3", 
+       getMessage("options_acceptableAds_ads_label")]);
+    setElementText(E("tracking-warning-3"), "options_tracking_warning_3",
       [getMessage("options_acceptableAds_privacy_label")]);
 
     getDocLink("privacy_friendly_ads", (link) =>
     {
       E("enable-acceptable-ads-privacy-description").href = link;
     });
     getDocLink("adblock_plus_{browser}_dnt", url =>
     {
       setLinks("dnt", url);
     });
@@ skipping 353 matching lines @@
         setPrivacyConflict();
         break;
       case "downloading":
       case "downloadStatus":
       case "homepage":
       case "lastDownload":
       case "title":
         updateSubscription(subscription);
         break;
       case "added":
-        let {url, recommended} = subscription;
+        let {url} = subscription;
         // Handle custom subscription
         if (/^~user/.test(url))
         {
           loadCustomFilters(subscription.filters);
           return;
         }
         else if (url in subscriptionsMap)
           updateSubscription(subscription);
         else
           addSubscription(subscription);
@@ skipping 85 matching lines @@
 
     let checkbox = document.querySelector(
       "[data-pref='" + key + "'] button[role='checkbox']"
     );
     if (checkbox)
       checkbox.setAttribute("aria-checked", value);
   }
 
   function updateTooltips()
   {
-    let anchors = document.querySelectorAll(":not(.tooltip) > [data-tooltip]");
-    for (let anchor of anchors)
+    const tooltipsSelector = ":not(.tooltip) > [data-tooltip]";
+    const anchors = document.querySelectorAll(tooltipsSelector);
+    for (const anchor of anchors)
     {
-      let id = anchor.getAttribute("data-tooltip");
+      // avoid creating same tooltip N times
+      // updateTooltips gets invoked during bootstrap
+      if (anchor.querySelector('[role="tooltip"]'))
+        continue;
 
-      let wrapper = document.createElement("div");
-      wrapper.className = "icon tooltip";
-      anchor.parentNode.replaceChild(wrapper, anchor);
-      wrapper.appendChild(anchor);
+      const id = anchor.getAttribute("data-tooltip");
 
-      let tooltip = document.createElement("div");
+      anchor.classList.add("icon", "tooltip");
+
+      const tooltip = document.createElement("div");
       tooltip.setAttribute("role", "tooltip");
 
-      let paragraph = document.createElement("p");
+      const paragraph = document.createElement("p");
       paragraph.textContent = getMessage(id);
       tooltip.appendChild(paragraph);
 
-      wrapper.appendChild(tooltip);
+      anchor.appendChild(tooltip);
+
+      // if focused and the mouse reaches another (?)
+      // blur the active element to drop previous tooltip
+      anchor.addEventListener("mouseover", dropActiveElement);
     }
   }
 
+  function dropActiveElement(event)
+  {
+    const active = event.target.ownerDocument.activeElement;
+    if (active)
+      active.blur();
+  }
+
   ext.onMessage.addListener((message) =>
   {
     switch (message.type)
     {
       case "app.respond":
         switch (message.action)
         {
           case "addSubscription":
             let subscription = message.args[0];
             let dialog = E("dialog-content-predefined");
@@ skipping 34 matching lines @@
   });
   browser.runtime.sendMessage({
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "lastDownload", "removed",
              "title", "downloadStatus", "downloading"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
   window.addEventListener("hashchange", onHashChange, false);
 }