Merge pull request #8801 from robinfai/memory_optimization

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,8 @@ export abstract class BaseTabComponent extends BaseComponent {
 
     get focused$ (): Observable<void> { return this.focused }
     get blurred$ (): Observable<void> { return this.blurred }
+    /* @hidden */
+    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 +180,11 @@ export abstract class BaseTabComponent extends BaseComponent {
         this.blurred.next()
     }
 
+    /* @hidden */
+    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

@@ -1,4 +1,4 @@
-import { Observable, Subject, first, auditTime } from 'rxjs'
+import { Observable, Subject, first, auditTime, debounce, interval } from 'rxjs'
 import { Spinner } from 'cli-spinner'
 import colors from 'ansi-colors'
 import { NgZone, OnInit, OnDestroy, Injector, ViewChild, HostBinding, Input, ElementRef, InjectFlags, Component } from '@angular/core'
@@ -14,6 +14,9 @@ import { TerminalDecorator } from './decorator'
 import { SearchPanelComponent } from '../components/searchPanel.component'
 import { MultifocusService } from '../services/multifocus.service'
 
+
+const INACTIVE_TAB_UNLOAD_DELAY = 1000 * 30
+
 /**
  * A class to base your custom terminal tabs on
  */
@@ -408,6 +411,24 @@ export class BaseTerminalTabComponent<P extends BaseTerminalProfile> extends Bas
         this.blurred$.subscribe(() => {
             this.multifocus.cancel()
         })
+
+        this.visibility$
+            .pipe(debounce(visibility => interval(visibility ? 0 : INACTIVE_TAB_UNLOAD_DELAY)))
+            .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'
+                        })
+                    }
+                }
+            })
     }
 
     protected onFrontendReady (): void {