Moved div/style inits from tooltip.update().toggle() + changed mouse<over|out> to mouse<enter|leave>` to align w/ KudoAI scripts for easier maintenance, condensed opacity update

Author: adamlui

chatgpt-widescreen/chromium/extension/components/buttons.js

@@ -88,7 +88,7 @@ window.buttons = {
             }
 
             // Add hover/click listeners
-            btn.onmouseover = btn.onmouseout = tooltip.toggle
+            btn.onmouseenter = btn.onmouseleave = tooltip.toggle
             btn.onclick = () => {
                 if (btnType == 'newChat') {
                     document.querySelector(this.imports.sites[site].selectors.btns.newChat)?.click()
@@ -100,8 +100,8 @@ window.buttons = {
                         tooltip.div.style.opacity = 0;
                         ['fullWindow', 'fullscreen'].forEach(btnType => {
                             const btn = this[btnType]
-                            btn.onmouseover = btn.onmouseout = null
-                            setTimeout(() => btn.onmouseover = btn.onmouseout = tooltip.toggle, 300)
+                            btn.onmouseenter = btn.onmouseleave = null
+                            setTimeout(() => btn.onmouseenter = btn.onmouseleave = tooltip.toggle, 300)
                         })
                     }
                 }

chatgpt-widescreen/chromium/extension/components/tooltip.js

@@ -26,14 +26,15 @@ window.tooltip = {
     },
 
     toggle(event) {
+        if (!tooltip.div) tooltip.div = dom.create.elem('div', { class: 'cwm-tooltip' })
+        if (!tooltip.div.isConnected) event.currentTarget?.before(tooltip.div)
+        if (!tooltip.styles) tooltip.stylize()
         tooltip.update(event.currentTarget.id.replace(/-btn$/, ''))
-        tooltip.div.style.opacity = event.type == 'mouseover' ? 1 : 0
+        tooltip.div.style.opacity = +(event.type == 'mouseenter')
     },
 
     async update(btnType) { // text & position
-        if (!tooltip.div) tooltip.div = dom.create.elem('div', { class: 'cwm-tooltip' })
-        if (!tooltip.div.isConnected) buttons[btnType]?.before(tooltip.div)
-        if (!tooltip.styles) tooltip.stylize()
+        if (!this.div) return // since nothing to update
         const site = this.imports.env.site
         const rects = {
             btn: buttons[btnType]?.getBoundingClientRect(), chatbar: (await chatbar.get())?.getBoundingClientRect() }

chatgpt-widescreen/firefox/extension/components/buttons.js

@@ -88,7 +88,7 @@ window.buttons = {
             }
 
             // Add hover/click listeners
-            btn.onmouseover = btn.onmouseout = tooltip.toggle
+            btn.onmouseenter = btn.onmouseleave = tooltip.toggle
             btn.onclick = () => {
                 if (btnType == 'newChat') {
                     document.querySelector(this.imports.sites[site].selectors.btns.newChat)?.click()
@@ -100,8 +100,8 @@ window.buttons = {
                         tooltip.div.style.opacity = 0;
                         ['fullWindow', 'fullscreen'].forEach(btnType => {
                             const btn = this[btnType]
-                            btn.onmouseover = btn.onmouseout = null
-                            setTimeout(() => btn.onmouseover = btn.onmouseout = tooltip.toggle, 300)
+                            btn.onmouseenter = btn.onmouseleave = null
+                            setTimeout(() => btn.onmouseenter = btn.onmouseleave = tooltip.toggle, 300)
                         })
                     }
                 }

chatgpt-widescreen/firefox/extension/components/tooltip.js

@@ -26,14 +26,15 @@ window.tooltip = {
     },
 
     toggle(event) {
+        if (!tooltip.div) tooltip.div = dom.create.elem('div', { class: 'cwm-tooltip' })
+        if (!tooltip.div.isConnected) event.currentTarget?.before(tooltip.div)
+        if (!tooltip.styles) tooltip.stylize()
         tooltip.update(event.currentTarget.id.replace(/-btn$/, ''))
-        tooltip.div.style.opacity = event.type == 'mouseover' ? 1 : 0
+        tooltip.div.style.opacity = +(event.type == 'mouseenter')
     },
 
     async update(btnType) { // text & position
-        if (!tooltip.div) tooltip.div = dom.create.elem('div', { class: 'cwm-tooltip' })
-        if (!tooltip.div.isConnected) buttons[btnType]?.before(tooltip.div)
-        if (!tooltip.styles) tooltip.stylize()
+        if (!this.div) return // since nothing to update
         const site = this.imports.env.site
         const rects = {
             btn: buttons[btnType]?.getBoundingClientRect(), chatbar: (await chatbar.get())?.getBoundingClientRect() }