From c64df9f2607da509c615e5cf8983af3a4f633a35 Mon Sep 17 00:00:00 2001
From: Danny Colin <contact@dannycolin.com>
Date: Tue, 21 Jun 2022 11:04:32 -0400
Subject: [PATCH] Use browser builtin tooltip

If the containers list is too long, the tooltip is rendered outside the visible area. Using the builtin tooltip ensures that it is always rendered on top of all the items and so it prevents it to be hidden if the list overflow.
---
 src/js/mozillaVpn.js | 12 +++---------
 src/js/popup.js      |  1 -
 src/popup.html       |  1 -
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/js/mozillaVpn.js b/src/js/mozillaVpn.js
index 941e148..16708c8 100644
--- a/src/js/mozillaVpn.js
+++ b/src/js/mozillaVpn.js
@@ -34,11 +34,8 @@ const MozillaVPN = {
         }
         if (!mozillaVpnConnected && proxy.mozProxyEnabled) {
           flag.classList.add("proxy-unavailable");
-          const tooltip = el.querySelector(".tooltip.proxy-unavailable");
-          if (tooltip) {
-            tooltip.textContent = tooltipProxyWarning;
-          }
           const menuItemName = el.querySelector(".menu-item-name");
+          menuItemName.setAttribute("title", tooltipProxyWarning);
           if (menuItemName) {
             el.querySelector(".menu-item-name").dataset.mozProxyWarning = "proxy-unavailable";
           }
@@ -68,14 +65,11 @@ const MozillaVPN = {
     const mozillaVpnConnected = await browser.runtime.sendMessage({ method: "MozillaVPN_getConnectionStatus" });
     const connectionStatusStringId = mozillaVpnConnected ? "moz-vpn-connected" : "moz-vpn-disconnected";
     const connectionStatusLocalizedString = browser.i18n.getMessage(connectionStatusStringId);
+    const connectionStatusTooltip = document.querySelector(".vpn-status-container-list");
+    connectionStatusTooltip.setAttribute("title", connectionStatusLocalizedString);
 
     statusIconEls.forEach(el => {
       el.style.backgroundImage = mozillaVpnConnected ? connectedIndicatorSrc : disconnectedIndicatorSrc;
-      if (el.querySelector(".tooltip")) {
-        el.querySelector(".tooltip").textContent = connectionStatusLocalizedString;
-      } else {
-        el.textContent = connectionStatusLocalizedString;
-      }
     });
   },
 
diff --git a/src/js/popup.js b/src/js/popup.js
index c10242f..c52fe50 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -789,7 +789,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             </div>
           </div>
           <span class="menu-text">${identity.name}</span>
-          <span class="tooltip proxy-unavailable"></span>
         </div>
         <span class="menu-right-float">
           <img alt="" class="always-open-in-flag flag-img" src="/img/flags/.png"/>
diff --git a/src/popup.html b/src/popup.html
index 9725d0d..10f0f33 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -154,7 +154,6 @@
       <div class="sub-header" data-i18n-message-id="containers"></div>
       <h4 class="moz-vpn-logotype vpn-status-container-list display-none">Mozilla VPN
         <span class="moz-vpn-connection-status-indicator container-list-status-icon">
-          <span class="tooltip"></span>
         </span>
       </h4>
     </div>