Moved custom buttons to left in Perplexity chatbar to avoid constant pointless breaking UI changes ↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/chatgpt-widescreen]

kudo-sync-bot · kudo-sync-bot · commit 08e72f42f5e3 · 2025-05-07T09:04:24.000-07:00
diff --git a/chromium/extension/components/buttons.js b/chromium/extension/components/buttons.js
@@ -70,7 +70,9 @@ window.buttons = {
                 `@media (max-width: 768px) {
                     #fullWindow-btn { display: none }
                     #widescreen-btn { margin-right: ${ site == 'perplexity' ? 9 : 19 }px }}`
-                : '' }`
+                : '' }
+            ${ site == 'perplexity' ? // hide native tooltip that persists for being in same parent
+                `body:not(:has(button[role=radio]:hover)) ${selectors.tooltip} { display: none !important }` : '' }`
         ))
     },
 
@@ -152,23 +154,31 @@ window.buttons = {
 
     async insert() {
         if (!config.btnsVisible || this.state.status == 'inserting' || this.fullscreen?.isConnected) return
+        const { site } = this.imports.env
         this.state.status = 'inserting' ; if (!this.fullscreen) await this.create()
 
         // Init elems
         const chatbarDiv = await chatbar.get() ; if (!chatbarDiv) return this.state.status = 'missing'
         const btnTypesToInsert = this.get.types.valid()
-        const parentToInsertInto = (
-            this.imports.env.site == 'chatgpt' ? (await this.get.rightBtn()).closest('[class*=bottom]') // right btn div
-          : chatbarDiv.lastChild ) // parent of [Perplexity right btns or Poe Mic/Send btns]
+        let parentToInsertInto = (
+            site == 'chatgpt' ? (await this.get.rightBtn()).closest('[class*=bottom]') // right btn div
+          : site == 'perplexity' ? chatbarDiv.querySelector('div[role=radiogroup]') // left mode btns div
+          : /* poe */ chatbarDiv.lastChild ) // parent of Mic/Send btns
+        if (site == 'perplexity') { // wrap in div to tweak side-gaps
+            parentToInsertInto.append(this.btnsDiv = dom.create.elem('div', {
+                style: 'display: flex ; margin-left: -36px ; margin-right: 9px ; align-items: center' }))
+            parentToInsertInto = this.btnsDiv
+        }
         const elemToInsertBefore = parentToInsertInto[
-            this.imports.env.site == 'chatgpt' ? 'lastChild' // right btn
-          : 'firstChild'] // Perplexity Pro spam toggle or Poe Mic btn
+            site == 'poe' ? 'firstChild' // Mic btn
+          : 'lastChild'] // right btn
 
         // Insert buttons
+
         btnTypesToInsert.slice().reverse().forEach((btnType, idx) => {
             const btn = this[btnType]
             this.update.svg(btnType) // update icon
-            elemToInsertBefore.before(btn) // insert button
+            parentToInsertInto.insertBefore(btn, elemToInsertBefore) // insert button
             if (!this.state.hasFadedIn) { // fade-in
                 btn.style.opacity = 0 ; setTimeout(() => btn.style.opacity = 1, (idx +1) *30)
                 if (idx == btnTypesToInsert.length -1) // final button scheduled for fade-in
@@ -181,7 +191,7 @@ window.buttons = {
 
     async remove() {
         if (!await chatbar.get() || !this.fullscreen?.isConnected) return
-        this.types.forEach(type => this[type]?.remove()) ; tooltip.div?.remove()
+        ['btnsDiv', ...this.types].filter(Boolean).forEach(type => this[type]?.remove()) ; tooltip.div?.remove()
         this.state.status = 'missing' // ensure next .insert() doesn't return early
         this.state.hasFadedIn = false // ensure next .insert() fades in buttons
     },
diff --git a/chromium/extension/components/tooltip.js b/chromium/extension/components/tooltip.js
@@ -26,7 +26,7 @@ window.tooltip = {
     toggle(event) {
         if (tooltip.imports.env.browser.isMobile) return
         tooltip.div = tooltip.div || dom.create.elem('div', { class: `${tooltip.imports.app.slug}-tooltip` })
-        if (!tooltip.div.isConnected) event.currentTarget?.before(tooltip.div)
+        if (!tooltip.div.isConnected) event.currentTarget?.after(tooltip.div)
         if (!tooltip.styles) tooltip.stylize()
         tooltip.update(event.currentTarget)
         tooltip.div.style.opacity = +(event.type == 'mouseenter')
diff --git a/chromium/extension/content.js b/chromium/extension/content.js
@@ -166,7 +166,7 @@
                 }
                 styles.tweaks.update() // sync TCB/NCB/HH/HF/BA
                 styles.chatbar.update() // sync WCB
-                chatbar.tweak() // update ChatGPT chatbar inner width or hack other sites' button positions
+                if (env.site != 'perplexity') chatbar.tweak() // update ChatGPT chatbar inner width or hack Poe btn pos
                 buttons[config.btnsVisible ? 'insert' : 'remove']() // update button visibility
                 if (options?.updatedKey == 'btnAnimationsDisabled' && !config.btnAnimationsDisabled) // apply/remove fx
                     // ...to visually signal location + preview fx applied by Button Animations toggle-on
diff --git a/chromium/extension/lib/chatbar.js b/chromium/extension/lib/chatbar.js
@@ -25,17 +25,6 @@ window.chatbar = {
         if (site == 'chatgpt') { // restore chatbar inner width
             const inputArea = chatbarDiv.querySelector(selectors.input)
             if (inputArea) inputArea.style.width = inputArea.parentNode.style.width = 'initial'
-        } else if (site == 'perplexity') { // restore left-align right buttons
-            const leftAlignedBtns = chatbarDiv.querySelectorAll('[data-left-aligned]')
-            if (leftAlignedBtns.length) {
-                const ogBtnParents = [...chatbarDiv.querySelectorAll('[data-btn-moved]')].reverse()
-                leftAlignedBtns.forEach((btn, idx) => {
-                    ogBtnParents[idx].append(btn) ; ogBtnParents[idx].removeAttribute('data-btn-moved')
-                    btn.style.margin = '' ; btn.removeAttribute('data-left-aligned') // reset margins/attr
-                })
-                const modeDiv = chatbarDiv.querySelector('button').closest('div')
-                modeDiv.style.marginRight = modeDiv.parentNode.style.paddingRight = '' // reset gap x-hacks
-            }
         } else if (site == 'poe') // restore Attach File button icon + Poe Mic button position
             ['attachFile', 'mic'].forEach(btnType => {
                 const btn = chatbarDiv.querySelector(selectors.btns[btnType]) ; if (!btn) return
@@ -45,7 +34,7 @@ window.chatbar = {
             })
     },
 
-    async tweak() { // update ChatGPT chatbar inner width or hack Perplexity/Poe buttons
+    async tweak() { // update ChatGPT chatbar inner width or hack Poe buttons
         const chatbarDiv = await this.get() ; if (!chatbarDiv) return
         const { site, sites: { [site]: { selectors }}} = this.imports
         if (site == 'chatgpt') { // update chatbar inner width
@@ -62,19 +51,6 @@ window.chatbar = {
                     widths.chatbar - totalBtnWidths -43 }px`
                 inputArea.style.width = '100%' // rid h-scrollbar
             }
-        } else if (site == 'perplexity') { // left-align Attach File + Search src buttons
-            const modeDiv = chatbarDiv.querySelector('button').closest('div') ; if (!modeDiv) return
-            const rightBtns = {} ; ['attachFile', 'searchSrcs'].forEach(btnType =>
-                rightBtns[btnType] = chatbarDiv.querySelector(selectors.btns[btnType]))
-            Object.values(rightBtns).forEach(btn => { if (!btn) return
-                btn.style.marginTop = '2px' // lower it
-                btn.dataset.leftAligned = true ; btn.parentNode.dataset.btnMoved = true // for this.reset()
-                modeDiv.after(btn) // move to right of selector
-            })
-            if (chatbarDiv.querySelector('[data-left-aligned]')) {
-                modeDiv.style.marginRight = '-2px' // close gap vs. right buttons
-                modeDiv.parentNode.style.paddingRight = '5px' // extend bg rightward
-            }
         } else if (site == 'poe') { // replace Attach File btn icon + move Mic btn closer to Send
             const btnLoadTimeout = 5000
             dom.get.loadedElem(selectors.btns.attachFile, { timeout: btnLoadTimeout }).then(btn => {
diff --git a/chromium/extension/service-worker.js b/chromium/extension/service-worker.js
@@ -6,7 +6,7 @@ const appReady = (async () => {
     // Init APP data
     const app = {
         version: chrome.runtime.getManifest().version,
-        latestResourceCommitHash: '196be4d', // for cached app.json + sites.json5 + icons.questionMark.src
+        latestResourceCommitHash: '50c7504', // for cached app.json + sites.json5 + icons.questionMark.src
         urls: {},
         chatgptJSver: /v(\d+\.\d+\.\d+)/.exec(await (await fetch(chrome.runtime.getURL('lib/chatgpt.js'))).text())[1]
     }
diff --git a/firefox/extension/background.js b/firefox/extension/background.js
@@ -4,7 +4,7 @@
     // Init APP data
     const app = {
         version: chrome.runtime.getManifest().version,
-        latestResourceCommitHash: '196be4d', // for cached app.json + sites.json5 + icons.questionMark.src
+        latestResourceCommitHash: '50c7504', // for cached app.json + sites.json5 + icons.questionMark.src
         urls: {},
         chatgptJSver: /v(\d+\.\d+\.\d+)/.exec(await (await fetch(chrome.runtime.getURL('lib/chatgpt.js'))).text())[1]
     }
diff --git a/firefox/extension/components/buttons.js b/firefox/extension/components/buttons.js
@@ -70,7 +70,9 @@ window.buttons = {
                 `@media (max-width: 768px) {
                     #fullWindow-btn { display: none }
                     #widescreen-btn { margin-right: ${ site == 'perplexity' ? 9 : 19 }px }}`
-                : '' }`
+                : '' }
+            ${ site == 'perplexity' ? // hide native tooltip that persists for being in same parent
+                `body:not(:has(button[role=radio]:hover)) ${selectors.tooltip} { display: none !important }` : '' }`
         ))
     },
 
@@ -152,23 +154,31 @@ window.buttons = {
 
     async insert() {
         if (!config.btnsVisible || this.state.status == 'inserting' || this.fullscreen?.isConnected) return
+        const { site } = this.imports.env
         this.state.status = 'inserting' ; if (!this.fullscreen) await this.create()
 
         // Init elems
         const chatbarDiv = await chatbar.get() ; if (!chatbarDiv) return this.state.status = 'missing'
         const btnTypesToInsert = this.get.types.valid()
-        const parentToInsertInto = (
-            this.imports.env.site == 'chatgpt' ? (await this.get.rightBtn()).closest('[class*=bottom]') // right btn div
-          : chatbarDiv.lastChild ) // parent of [Perplexity right btns or Poe Mic/Send btns]
+        let parentToInsertInto = (
+            site == 'chatgpt' ? (await this.get.rightBtn()).closest('[class*=bottom]') // right btn div
+          : site == 'perplexity' ? chatbarDiv.querySelector('div[role=radiogroup]') // left mode btns div
+          : /* poe */ chatbarDiv.lastChild ) // parent of Mic/Send btns
+        if (site == 'perplexity') { // wrap in div to tweak side-gaps
+            parentToInsertInto.append(this.btnsDiv = dom.create.elem('div', {
+                style: 'display: flex ; margin-left: -36px ; margin-right: 9px ; align-items: center' }))
+            parentToInsertInto = this.btnsDiv
+        }
         const elemToInsertBefore = parentToInsertInto[
-            this.imports.env.site == 'chatgpt' ? 'lastChild' // right btn
-          : 'firstChild'] // Perplexity Pro spam toggle or Poe Mic btn
+            site == 'poe' ? 'firstChild' // Mic btn
+          : 'lastChild'] // right btn
 
         // Insert buttons
+
         btnTypesToInsert.slice().reverse().forEach((btnType, idx) => {
             const btn = this[btnType]
             this.update.svg(btnType) // update icon
-            elemToInsertBefore.before(btn) // insert button
+            parentToInsertInto.insertBefore(btn, elemToInsertBefore) // insert button
             if (!this.state.hasFadedIn) { // fade-in
                 btn.style.opacity = 0 ; setTimeout(() => btn.style.opacity = 1, (idx +1) *30)
                 if (idx == btnTypesToInsert.length -1) // final button scheduled for fade-in
@@ -181,7 +191,7 @@ window.buttons = {
 
     async remove() {
         if (!await chatbar.get() || !this.fullscreen?.isConnected) return
-        this.types.forEach(type => this[type]?.remove()) ; tooltip.div?.remove()
+        ['btnsDiv', ...this.types].filter(Boolean).forEach(type => this[type]?.remove()) ; tooltip.div?.remove()
         this.state.status = 'missing' // ensure next .insert() doesn't return early
         this.state.hasFadedIn = false // ensure next .insert() fades in buttons
     },
diff --git a/firefox/extension/components/tooltip.js b/firefox/extension/components/tooltip.js
@@ -26,7 +26,7 @@ window.tooltip = {
     toggle(event) {
         if (tooltip.imports.env.browser.isMobile) return
         tooltip.div = tooltip.div || dom.create.elem('div', { class: `${tooltip.imports.app.slug}-tooltip` })
-        if (!tooltip.div.isConnected) event.currentTarget?.before(tooltip.div)
+        if (!tooltip.div.isConnected) event.currentTarget?.after(tooltip.div)
         if (!tooltip.styles) tooltip.stylize()
         tooltip.update(event.currentTarget)
         tooltip.div.style.opacity = +(event.type == 'mouseenter')
diff --git a/firefox/extension/content.js b/firefox/extension/content.js
@@ -166,7 +166,7 @@
                 }
                 styles.tweaks.update() // sync TCB/NCB/HH/HF/BA
                 styles.chatbar.update() // sync WCB
-                chatbar.tweak() // update ChatGPT chatbar inner width or hack other sites' button positions
+                if (env.site != 'perplexity') chatbar.tweak() // update ChatGPT chatbar inner width or hack Poe btn pos
                 buttons[config.btnsVisible ? 'insert' : 'remove']() // update button visibility
                 if (options?.updatedKey == 'btnAnimationsDisabled' && !config.btnAnimationsDisabled) // apply/remove fx
                     // ...to visually signal location + preview fx applied by Button Animations toggle-on
diff --git a/firefox/extension/lib/chatbar.js b/firefox/extension/lib/chatbar.js
@@ -25,17 +25,6 @@ window.chatbar = {
         if (site == 'chatgpt') { // restore chatbar inner width
             const inputArea = chatbarDiv.querySelector(selectors.input)
             if (inputArea) inputArea.style.width = inputArea.parentNode.style.width = 'initial'
-        } else if (site == 'perplexity') { // restore left-align right buttons
-            const leftAlignedBtns = chatbarDiv.querySelectorAll('[data-left-aligned]')
-            if (leftAlignedBtns.length) {
-                const ogBtnParents = [...chatbarDiv.querySelectorAll('[data-btn-moved]')].reverse()
-                leftAlignedBtns.forEach((btn, idx) => {
-                    ogBtnParents[idx].append(btn) ; ogBtnParents[idx].removeAttribute('data-btn-moved')
-                    btn.style.margin = '' ; btn.removeAttribute('data-left-aligned') // reset margins/attr
-                })
-                const modeDiv = chatbarDiv.querySelector('button').closest('div')
-                modeDiv.style.marginRight = modeDiv.parentNode.style.paddingRight = '' // reset gap x-hacks
-            }
         } else if (site == 'poe') // restore Attach File button icon + Poe Mic button position
             ['attachFile', 'mic'].forEach(btnType => {
                 const btn = chatbarDiv.querySelector(selectors.btns[btnType]) ; if (!btn) return
@@ -45,7 +34,7 @@ window.chatbar = {
             })
     },
 
-    async tweak() { // update ChatGPT chatbar inner width or hack Perplexity/Poe buttons
+    async tweak() { // update ChatGPT chatbar inner width or hack Poe buttons
         const chatbarDiv = await this.get() ; if (!chatbarDiv) return
         const { site, sites: { [site]: { selectors }}} = this.imports
         if (site == 'chatgpt') { // update chatbar inner width
@@ -62,19 +51,6 @@ window.chatbar = {
                     widths.chatbar - totalBtnWidths -43 }px`
                 inputArea.style.width = '100%' // rid h-scrollbar
             }
-        } else if (site == 'perplexity') { // left-align Attach File + Search src buttons
-            const modeDiv = chatbarDiv.querySelector('button').closest('div') ; if (!modeDiv) return
-            const rightBtns = {} ; ['attachFile', 'searchSrcs'].forEach(btnType =>
-                rightBtns[btnType] = chatbarDiv.querySelector(selectors.btns[btnType]))
-            Object.values(rightBtns).forEach(btn => { if (!btn) return
-                btn.style.marginTop = '2px' // lower it
-                btn.dataset.leftAligned = true ; btn.parentNode.dataset.btnMoved = true // for this.reset()
-                modeDiv.after(btn) // move to right of selector
-            })
-            if (chatbarDiv.querySelector('[data-left-aligned]')) {
-                modeDiv.style.marginRight = '-2px' // close gap vs. right buttons
-                modeDiv.parentNode.style.paddingRight = '5px' // extend bg rightward
-            }
         } else if (site == 'poe') { // replace Attach File btn icon + move Mic btn closer to Send
             const btnLoadTimeout = 5000
             dom.get.loadedElem(selectors.btns.attachFile, { timeout: btnLoadTimeout }).then(btn => {

Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,7 @@`
`166`	`166`	`}`
`167`	`167`	`styles.tweaks.update() // sync TCB/NCB/HH/HF/BA`
`168`	`168`	`styles.chatbar.update() // sync WCB`
`169`		`- chatbar.tweak() // update ChatGPT chatbar inner width or hack other sites' button positions`
	`169`	`+ if (env.site != 'perplexity') chatbar.tweak() // update ChatGPT chatbar inner width or hack Poe btn pos`
`170`	`170`	`buttons[config.btnsVisible ? 'insert' : 'remove']() // update button visibility`
`171`	`171`	`if (options?.updatedKey == 'btnAnimationsDisabled' && !config.btnAnimationsDisabled) // apply/remove fx`
`172`	`172`	`// ...to visually signal location + preview fx applied by Button Animations toggle-on`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ const appReady = (async () => {`
`6`	`6`	`// Init APP data`
`7`	`7`	`const app = {`
`8`	`8`	`version: chrome.runtime.getManifest().version,`
`9`		`- latestResourceCommitHash: '196be4d', // for cached app.json + sites.json5 + icons.questionMark.src`
	`9`	`+ latestResourceCommitHash: '50c7504', // for cached app.json + sites.json5 + icons.questionMark.src`
`10`	`10`	`urls: {},`
`11`	`11`	`chatgptJSver: /v(\d+\.\d+\.\d+)/.exec(await (await fetch(chrome.runtime.getURL('lib/chatgpt.js'))).text())[1]`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`// Init APP data`
`5`	`5`	`const app = {`
`6`	`6`	`version: chrome.runtime.getManifest().version,`
`7`		`- latestResourceCommitHash: '196be4d', // for cached app.json + sites.json5 + icons.questionMark.src`
	`7`	`+ latestResourceCommitHash: '50c7504', // for cached app.json + sites.json5 + icons.questionMark.src`
`8`	`8`	`urls: {},`
`9`	`9`	`chatgptJSver: /v(\d+\.\d+\.\d+)/.exec(await (await fetch(chrome.runtime.getURL('lib/chatgpt.js'))).text())[1]`
`10`	`10`	`}`