rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use browser builtin tooltip

Browse source 
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.
This commit is contained in:
Danny Colin 2022-06-21 11:04:32 -04:00
parent af73c1a401
commit c64df9f260
3 changed files with 3 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/js/mozillaVpn.js
View file

@ -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;
}
});
},

1
src/js/popup.js
View file

@ -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"/>

1
src/popup.html
View file

@ -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>