refreshed search panel design

tabby-terminal/src/frontends/frontend.ts

@@ -24,6 +24,7 @@ export abstract class Frontend {
     protected resize = new ReplaySubject<ResizeEvent>(1)
     protected dragOver = new Subject<DragEvent>()
     protected drop = new Subject<DragEvent>()
+    protected destroyed = new Subject<void>()
 
     get ready$ (): Observable<void> { return this.ready }
     get title$ (): Observable<string> { return this.title }
@@ -35,10 +36,12 @@ export abstract class Frontend {
     get resize$ (): Observable<ResizeEvent> { return this.resize }
     get dragOver$ (): Observable<DragEvent> { return this.dragOver }
     get drop$ (): Observable<DragEvent> { return this.drop }
+    get destroyed$ (): Observable<void> { return this.destroyed }
 
     constructor (protected injector: Injector) { }
 
     destroy (): void {
+        this.destroyed.next()
         for (const o of [
             this.ready,
             this.title,
@@ -50,6 +53,7 @@ export abstract class Frontend {
             this.resize,
             this.dragOver,
             this.drop,
+            this.destroyed,
         ]) {
             o.complete()
         }

tabby-terminal/src/frontends/xtermFrontend.ts

@@ -1,6 +1,7 @@
 import { Injector } from '@angular/core'
 import { ConfigService, getCSSFontFamily, HostAppService, HotkeysService, Platform, PlatformService } from 'tabby-core'
 import { Frontend, SearchOptions } from './frontend'
+import { takeUntil } from 'rxjs'
 import { Terminal, ITheme } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
 import { LigaturesAddon } from 'xterm-addon-ligatures'
@@ -151,6 +152,11 @@ export class XTermFrontend extends Frontend {
         if (this.enableWebGL) {
             this.webGLAddon = new WebglAddon()
             this.xterm.loadAddon(this.webGLAddon)
+            this.platformService.displayMetricsChanged$.pipe(
+                takeUntil(this.destroyed$),
+            ).subscribe(() => {
+                this.webGLAddon?.clearTextureAtlas()
+            })
         }
 
         this.ready.next()