perf: avoid gpu memory increase

tabby-core/src/components/baseTab.component.ts

@@ -75,6 +75,7 @@ export abstract class BaseTabComponent extends BaseComponent {
     private titleChange = new Subject<string>()
     private focused = new Subject<void>()
     private blurred = new Subject<void>()
+    private visibility = new Subject<boolean>()
     private progress = new Subject<number|null>()
     private activity = new Subject<boolean>()
     private destroyed = new Subject<void>()
@@ -83,6 +84,7 @@ export abstract class BaseTabComponent extends BaseComponent {
 
     get focused$ (): Observable<void> { return this.focused }
     get blurred$ (): Observable<void> { return this.blurred }
+    get visibility$ (): Observable<boolean> { return this.visibility }
     get titleChange$ (): Observable<string> { return this.titleChange.pipe(distinctUntilChanged()) }
     get progress$ (): Observable<number|null> { return this.progress.pipe(distinctUntilChanged()) }
     get activity$ (): Observable<boolean> { return this.activity }
@@ -177,6 +179,10 @@ export abstract class BaseTabComponent extends BaseComponent {
         this.blurred.next()
     }
 
+    emitVisibility (visibility: boolean): void {
+        this.visibility.next(visibility)
+    }
+
     insertIntoContainer (container: ViewContainerRef): EmbeddedViewRef<any> {
         this.viewContainerEmbeddedRef = container.insert(this.hostView) as EmbeddedViewRef<any>
         this.viewContainer = container

tabby-core/src/components/splitTab.component.ts

@@ -275,6 +275,7 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
             }
         })
         this.blurred$.subscribe(() => this.getAllTabs().forEach(x => x.emitBlurred()))
+        this.visibility$.subscribe(visibility => this.getAllTabs().forEach(x => x.emitVisibility(visibility)))
 
         this.tabAdded$.subscribe(() => this.updateTitle())
         this.tabRemoved$.subscribe(() => this.updateTitle())

tabby-core/src/services/app.service.ts

@@ -230,11 +230,13 @@ export class AppService {
         if (this._activeTab) {
             this._activeTab.clearActivity()
             this._activeTab.emitBlurred()
+            this._activeTab.emitVisibility(false)
         }
         this._activeTab = tab
         this.activeTabChange.next(tab)
         setImmediate(() => {
             this._activeTab?.emitFocused()
+            this._activeTab?.emitVisibility(true)
         })
         this.hostWindow.setTitle(this._activeTab?.title)
     }

tabby-terminal/src/api/baseTerminalTab.component.ts

@@ -408,6 +408,23 @@ export class BaseTerminalTabComponent<P extends BaseTerminalProfile> extends Bas
         this.blurred$.subscribe(() => {
             this.multifocus.cancel()
         })
+
+        this.visibility$.subscribe(visibility => {
+            if (this.frontend instanceof XTermFrontend) {
+                if (visibility) {
+                    // this.frontend.resizeHandler()
+                    const term = this.frontend.xterm as any
+                    term._core._renderService.clear()
+                    term._core._renderService.handleResize(term.cols, term.rows)
+                } else {
+                    this.frontend.xterm.element?.querySelectorAll('canvas').forEach(c => {
+                        c.height = c.width = 0
+                        c.style.height = c.style.width = '0px'
+                    })
+                }
+            }
+            console.log('visibility:', this.title, visibility)
+        })
     }
 
     protected onFrontendReady (): void {

tabby-terminal/src/frontends/xtermFrontend.ts

@@ -66,7 +66,7 @@ export class XTermFrontend extends Frontend {
     private configuredFontSize = 0
     private configuredLinePadding = 0
     private zoom = 0
-    private resizeHandler: () => void
+    resizeHandler: () => void
     private configuredTheme: ITheme = {}
     private copyOnSelect = false
     private preventNextOnSelectionChangeEvent = false