From aded4f7c0122582d425e19166ab964aaae6b35f7 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 18 Aug 2017 10:15:51 +0300
Subject: [PATCH] display full text in tooltips of ellipsized buttons

---
 js/dom.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/js/dom.js b/js/dom.js
index ced73414..07ad5ccf 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -11,6 +11,31 @@ for (const type of [NodeList, NamedNodeMap, HTMLCollection, HTMLAllCollection])
   }
 }
 
+{
+  // display a full text tooltip on buttons with ellipsis overflow and no inherent title
+  const addTooltipsToEllipsized = () => {
+    for (const btn of document.getElementsByTagName('button')) {
+      if (btn.title && !btn.titleIsForEllipsis ||
+          btn.clientWidth === btn.preresizeClientWidth) {
+        continue;
+      }
+      btn.preresizeClientWidth = btn.clientWidth;
+      const padding = btn.offsetWidth - btn.clientWidth;
+      const displayedWidth = btn.getBoundingClientRect().width - padding;
+      if (btn.scrollWidth > displayedWidth) {
+        btn.title = btn.textContent;
+        btn.titleIsForEllipsis = true;
+      } else if (btn.title) {
+        btn.title = '';
+      }
+    }
+  };
+  // enqueue after DOMContentLoaded/load events
+  setTimeout(addTooltipsToEllipsized);
+  // throttle on continuous resizing
+  window.addEventListener('resize', () => debounce(addTooltipsToEllipsized, 100));
+}
+
 // add favicon in Firefox
 // eslint-disable-next-line no-unused-expressions
 navigator.userAgent.includes('Firefox') && setTimeout(() => {