perf(ExtensionPopup): make extension popup animation buttery smooth

src/SEQTA.ts

@@ -1040,28 +1040,22 @@ export function AppendElementsToDisabledPage() {
   document.head.append(settingsStyle)
 }
 
-export function closeSettings() {
+export const closeExtensionPopup = (extensionPopup?: HTMLElement) => {
-  const ExtensionSettings = document.getElementById('ExtensionPopup')!
+  if (!extensionPopup) extensionPopup = document.getElementById('ExtensionPopup')!
-  // = document.getElementById('ExtensionIframe') as HTMLIFrameElement
 
-  if (SettingsClicked == true) {
+  extensionPopup.classList.add('hide')
-    ExtensionSettings!.classList.add('hide')
   if (settingsState.animations) {
-      animate(
+    animate((progress) => {
-        '#ExtensionPopup',
+      extensionPopup.style.opacity = Math.max(0, 1 - progress).toString()
-        { opacity: [1, 0], scale: [1, 0] },
+      extensionPopup.style.transform = `scale(${Math.max(0, 1 - progress)})`
-        { easing: spring({ stiffness: 220, damping: 18 }) }
+    }, { easing: spring({ stiffness: 520, damping: 20 }) })
-      )
   } else {
-      ExtensionSettings.style.opacity = '0'
+    extensionPopup.style.opacity = '0'
-      ExtensionSettings.style.transform = 'scale(0)'
+    extensionPopup.style.transform = 'scale(0)'
   }
+  
+  settingsPopup.triggerClose()
   SettingsClicked = false
-
-    // hide extension frame
-  }
-
-  ExtensionSettings!.classList.add('hide')
 }
 
 export function addExtensionSettings() {
@@ -1084,25 +1078,10 @@ export function addExtensionSettings() {
 
   new SettingsResizer();
 
-  const closeExtensionPopup = () => {
-    extensionPopup.classList.add('hide')
-    if (settingsState.animations) {
-      animate(
-        '#ExtensionPopup',
-        { opacity: [1, 0], scale: [1, 0] },
-        { easing: spring({ stiffness: 220, damping: 18 }) }
-      )
-    } else {
-      extensionPopup.style.opacity = '0'
-      extensionPopup.style.transform = 'scale(0)'
-    }
-    
-    settingsPopup.triggerClose()
-    SettingsClicked = false
-  }
-
   container!.onclick = (event) => {
-    if ((event.target as HTMLElement).closest('#AddedSettings') == null && SettingsClicked) {
+    if (!SettingsClicked) return;
+
+    if (!(event.target as HTMLElement).closest('#AddedSettings')) {
       if (event.target == extensionPopup) return;
       closeExtensionPopup()
     }
@@ -1338,31 +1317,17 @@ export function setupSettingsButton() {
   var AddedSettings = document.getElementById('AddedSettings');
   var extensionPopup = document.getElementById('ExtensionPopup');
 
-  AddedSettings!.addEventListener('click', async function () {
+  AddedSettings!.addEventListener('click', async () => {
     if (SettingsClicked) {
-      extensionPopup!.classList.add('hide');
+      closeExtensionPopup(extensionPopup as HTMLElement);
-      if (settingsState.animations) {
-        animate('#ExtensionPopup', { opacity: [1, 0], scale: [1, 0] }, { easing: spring({ stiffness: 220, damping: 18 }) });
-      } else {
-        extensionPopup!.style.opacity = '0'
-        extensionPopup!.style.transform = 'scale(0)'
-      }
-      settingsPopup.triggerClose()
-      SettingsClicked = false;
     } else {
       if (settingsState.animations) {
-        //animate('#ExtensionPopup', { opacity: [0, 1], scale: [0, 1] }, { easing: spring({ stiffness: 260, damping: 24 }) });
         animate((progress) => {
-          console.log(progress)
           extensionPopup!.style.opacity = progress.toString()
           extensionPopup!.style.transform = `scale(${progress})`
-        }, { easing: spring({ stiffness: 260, damping: 24 }) });
+        }, { easing: spring({ stiffness: 280, damping: 20 }) });
-
-        await delay(10)
 
         extensionPopup!.classList.remove('hide');
-        //extensionPopup!.style.opacity = '1'
-        //extensionPopup!.style.transform = 'scale(1)'
       } else {
         extensionPopup!.style.opacity = '1'
         extensionPopup!.style.transform = 'scale(1)'

src/seqta/utils/listeners/MessageListener.ts

@@ -1,6 +1,6 @@
 import browser from 'webextension-polyfill'
 
-import { closeSettings, MenuOptionsOpen, OpenMenuOptions } from '../../../SEQTA';
+import { closeExtensionPopup, MenuOptionsOpen, OpenMenuOptions } from '../../../SEQTA';
 import { deleteTheme } from '@/seqta/ui/themes/deleteTheme';
 import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes';
 import { saveTheme } from '@/seqta/ui/themes/saveTheme';
@@ -23,7 +23,7 @@ export class MessageHandler {
     switch (request.info) {
       case 'EditSidebar':
         this.editSidebar();
-        closeSettings();
+        closeExtensionPopup();
         sendResponse({ status: 'success' });
         break;
   
@@ -77,7 +77,7 @@ export class MessageHandler {
       case 'OpenThemeCreator':
         const themeID = request?.body?.themeID;
         OpenThemeCreator( themeID ? themeID : '' );
-        closeSettings();
+        closeExtensionPopup();
         sendResponse({ status: 'success' });
         break;
       
@@ -110,7 +110,7 @@ export class MessageHandler {
   editSidebar() {
     if (!MenuOptionsOpen) {
       OpenMenuOptions();
-      closeSettings();
+      closeExtensionPopup();
     }
   }
 }

src/svelte-interface/pages/settings.svelte

@@ -9,7 +9,7 @@
   import { onMount } from 'svelte'
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
 
-  import { closeSettings, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
+  import { closeExtensionPopup, OpenAboutPage, OpenWhatsNewPopup } from "@/SEQTA"
   import ColourPicker from '../components/ColourPicker.svelte'
   import { settingsPopup } from '../hooks/SettingsPopup'
 
@@ -20,12 +20,12 @@
 
   const openChangelog = () => {
     OpenWhatsNewPopup();
-    closeSettings();
+    closeExtensionPopup();
   };
 
   const openAbout = () => {
     OpenAboutPage();
-    closeSettings();
+    closeExtensionPopup();
   };
     
   let { standalone = false } = $props<{ standalone?: boolean }>();
@@ -51,7 +51,6 @@
       <img src={browser.runtime.getURL('resources/icons/betterseqta-light-full.png')} class="hidden w-4/5 dark:block" alt="Dark logo" />
       <button onclick={openChangelog} class="absolute right-0 w-8 h-8 text-lg rounded-xl font-IconFamily top-1 bg-zinc-100 dark:bg-zinc-700"></button>
       <button onclick={openAbout} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">ⓘ</button>
-      <!-- <button onclick={() => showColourPicker = true} class="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-10 bg-zinc-100 dark:bg-zinc-700">ⓘ</button> -->
     </div>
 
     <TabbedContainer tabs={[