some event listener cleanup + design tweaks

altair-graphql · Aug 31, 2024 · a5043a9 · a5043a9
1 parent ec15177
commit a5043a9
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 34 deletions.
diff --git a/packages/altair-app/src/app/modules/altair/services/pre-request/evaluator-client.factory.ts b/packages/altair-app/src/app/modules/altair/services/pre-request/evaluator-client.factory.ts
@@ -12,6 +12,9 @@ import { getAltairConfig } from 'altair-graphql-core/build/config';
 
 export class EvaluatorFrameClient extends ScriptEvaluatorClient {
   private iframe = this.createIframe();
+  private messageListeners: Array<
+    (e: MessageEvent<ScriptEventData<ScriptEvent>>) => void
+  > = [];
 
   constructor(private sandboxUrl: string) {
     super();
@@ -35,7 +38,7 @@ export class EvaluatorFrameClient extends ScriptEvaluatorClient {
     type: T,
     handler: (type: T, e: ScriptEventData<T>) => void
   ): void {
-    window.addEventListener('message', (e: MessageEvent<ScriptEventData<T>>) => {
+    const listener = (e: MessageEvent<ScriptEventData<T>>) => {
       if (e.origin !== new URL(this.sandboxUrl).origin) {
         return;
       }
@@ -46,7 +49,11 @@ export class EvaluatorFrameClient extends ScriptEvaluatorClient {
         debug.log(event.type, event);
         handler(type, event);
       }
-    });
+    };
+
+    window.addEventListener('message', listener);
+    // FIXME: we shouldn't use any here
+    this.messageListeners.push(listener as any);
   }
   send(type: string, payload: any): void {
     this.iframe.addEventListener('load', () => {
@@ -57,6 +64,10 @@ export class EvaluatorFrameClient extends ScriptEvaluatorClient {
     this.iframe.addEventListener('error', handler);
   }
   destroy(): void {
+    this.messageListeners.forEach((listener) => {
+      window.removeEventListener('message', listener);
+    });
+    this.iframe.removeAllListeners?.();
     this.iframe.remove();
   }
 }

diff --git a/packages/altair-app/src/scss/_input.scss b/packages/altair-app/src/scss/_input.scss
@@ -15,7 +15,7 @@
   display: block;
   border-radius: 4px;
   border-style: solid;
-  border-width: 1px;
+  border-width: 2px;
   border-color: var(--input-border-color, rgba(var(--rgb-theme-font), 0.04));
   background: var(--input-bg, rgba(var(--rgb-theme-off-bg), 0.2));
   padding-block: 5px;
@@ -32,9 +32,9 @@
   }
   &:focus,
   &:focus-within {
-    --input-bg: var(--input-focus-bg, rgba(var(--rgb-theme-off-bg), 0.4));
+    --input-bg: var(--input-focus-bg, rgba(var(--rgb-theme-off-bg), 0.8));
     // setting border-color instead of the css variable to override the default border-color
-    border-color: var(--input-border-color, rgba(var(--rgb-theme-font), 0.08));
+    border-color: var(--input-border-color, rgba(var(--rgb-theme-font), 0.1));
     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
   }
 

diff --git a/packages/altair-core/src/plugin/v3/frame-worker.ts b/packages/altair-core/src/plugin/v3/frame-worker.ts
@@ -33,6 +33,8 @@ export class PluginFrameWorker extends EvaluatorWorker {
   private instanceType: InstanceType = instanceTypes.MAIN;
   private params: FrameOptions;
 
+  private messageListeners: Array<(e: MessageEvent<any>) => void> = [];
+
   constructor() {
     super();
     // Check for params in special params object on the window object first. Using srcdoc, we will set the params on the window object
@@ -67,12 +69,14 @@ export class PluginFrameWorker extends EvaluatorWorker {
   onMessage<T extends string, P = unknown>(
     handler: (e: EventData<T, P>) => void
   ): void {
-    window.addEventListener('message', (e) => {
+    const listener = (e: MessageEvent<any>) => {
       if (e.origin !== this.origin) {
         return;
       }
       handler(e.data);
-    });
+    };
+    window.addEventListener('message', listener);
+    this.messageListeners.push(listener);
   }
 
   send(type: string, payload: any): void {
@@ -89,6 +93,9 @@ export class PluginFrameWorker extends EvaluatorWorker {
 
   destroy(): void {
     // cleanup resources
+    this.messageListeners.forEach((listener) => {
+      window.removeEventListener('message', listener);
+    });
     window.close();
   }
 }
diff --git a/packages/altair-core/src/plugin/v3/parent-worker.ts b/packages/altair-core/src/plugin/v3/parent-worker.ts
@@ -26,6 +26,7 @@ export type PluginParentWorkerOptions =
   | PluginParentWorkerOptionsWithScripts
   | PluginParentWorkerOptionsWithUrl;
 export class PluginParentWorker extends EvaluatorWorker {
+  private messageListeners: Array<(e: MessageEvent<any>) => void> = [];
   constructor(private opts: PluginParentWorkerOptions) {
     super();
   }
@@ -102,20 +103,18 @@ export class PluginParentWorker extends EvaluatorWorker {
   onMessage<T extends string, P = unknown>(
     handler: (e: EventData<T, P>) => void
   ): void {
-    window.addEventListener(
-      'message',
-      (e) => {
-        if (e.origin !== 'null' || e.source !== this.iframe.contentWindow) {
-          return;
-        }
-        if (e.data.frameId !== this.opts.id) {
-          console.error('Invalid frameId in data', e.data.frameId, this.opts.id);
-          return;
-        }
-        handler(e.data);
-      },
-      false
-    );
+    const listener = (e: MessageEvent<any>) => {
+      if (e.origin !== 'null' || e.source !== this.iframe.contentWindow) {
+        return;
+      }
+      if (e.data.frameId !== this.opts.id) {
+        console.error('Invalid frameId in data', e.data.frameId, this.opts.id);
+        return;
+      }
+      handler(e.data);
+    };
+    window.addEventListener('message', listener, false);
+    this.messageListeners.push(listener);
   }
   send<T extends string>(type: T, payload?: unknown): void {
     this.frameReady().then(() => {
@@ -134,6 +133,10 @@ export class PluginParentWorker extends EvaluatorWorker {
     this.iframe.addEventListener('error', handler);
   }
   destroy(): void {
+    // cleanup resources
+    this.messageListeners.forEach((listener) => {
+      window.removeEventListener('message', listener);
+    });
     this.iframe.remove();
   }
 }
diff --git a/packages/altair-core/src/theme/theme.ts b/packages/altair-core/src/theme/theme.ts
@@ -16,23 +16,13 @@ If you choose #232931 (rich blue-gray) as the background, #3a4149 would be a sui
 For a #2d2f33 (slightly lighter dark gray) background, #404448 could work well for borders.
 */
 
-// TODO: Introduce glassmorphism
-// https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
-// https://codepen.io/kanishkkunal/pen/QWGzBwz
-// https://codepen.io/TurkAysenur/pen/ZEpxeYm
-// https://codepen.io/gutugaluppo/pen/MWjjWPx
-// https://codepen.io/omeal/pen/VwKKgjG
-// https://codepen.io/opeala/pen/yLaMBvN
-// https://dribbble.com/shots/16261258-Metaspark-web-site-design-landing-page-home-page-ui/attachments/8128256?mode=media
-// https://smarative.com/blog/realistic-frosted-glassmorphism-css-gradient-borders
-
 export const foundations = {
   easing: 'ease',
   colors: {
     black: '#201e1f',
     darkGray: '#a6a6a6',
     gray: '#eaeaea',
-    lightGray: '#f0f0f0',
+    lightGray: '#fafafa',
     white: '#ffffff',
     green: '#64CB29',
     blue: '#2d9ee0',
@@ -138,8 +128,8 @@ const theme: ITheme = deepmerge(foundations, {
     offBg: foundations.colors.white,
     font: foundations.colors.black,
     offFont: foundations.colors.darkGray,
-    border: foundations.colors.gray,
-    offBorder: foundations.colors.lightGray,
+    border: foundations.colors.darkGray,
+    offBorder: foundations.colors.gray,
 
     headerBg: foundations.colors.white,
   },