.

app/src/app.module.ts

@@ -26,7 +26,7 @@ import { HotkeyInputModalComponent } from 'components/hotkeyInputModal'
 import { SettingsPaneComponent } from 'components/settingsPane'
 import { TabBodyComponent } from 'components/tabBody'
 import { TabHeaderComponent } from 'components/tabHeader'
-import { TerminalComponent } from 'components/terminal'
+import { TerminalTabComponent } from 'components/terminalTab'
 
 
 @NgModule({
@@ -53,7 +53,7 @@ import { TerminalComponent } from 'components/terminal'
     entryComponents: [
         HotkeyInputModalComponent,
         SettingsPaneComponent,
-        TerminalComponent,
+        TerminalTabComponent,
     ],
     declarations: [
         AppComponent,
@@ -65,7 +65,7 @@ import { TerminalComponent } from 'components/terminal'
         SettingsPaneComponent,
         TabBodyComponent,
         TabHeaderComponent,
-        TerminalComponent,
+        TerminalTabComponent,
     ],
     bootstrap: [
         AppComponent,

app/src/components/terminalTab.ts

@@ -7,54 +7,20 @@ import { PluginDispatcherService } from 'services/pluginDispatcher'
 import { BaseTabComponent } from 'components/baseTab'
 import { TerminalTab } from 'models/tab'
 
+import { hterm, preferenceManager } from 'hterm'
 
-const hterm = require('hterm-commonjs')
-const dataurl = require('dataurl')
-
-
-hterm.hterm.VT.ESC['k'] = function(parseState) {
-    parseState.resetArguments();
-
-    function parseOSC(ps) {
-        if (!this.parseUntilStringTerminator_(ps) || ps.func == parseOSC) {
-            return
-        }
-
-        this.terminal.setWindowTitle(ps.args[0])
-    }
-    parseState.func = parseOSC
-}
-
-hterm.hterm.defaultStorage = new hterm.lib.Storage.Memory()
-const preferenceManager = new hterm.hterm.PreferenceManager('default')
-preferenceManager.set('user-css', dataurl.convert({
-    data: require('./terminal.userCSS.scss'),
-    mimetype: 'text/css',
-    charset: 'utf8',
-}))
-preferenceManager.set('background-color', '#1D272D')
-preferenceManager.set('color-palette-overrides', {
-    0: '#1D272D',
-})
-
-const oldDecorate = hterm.hterm.ScrollPort.prototype.decorate
-hterm.hterm.ScrollPort.prototype.decorate = function (...args) {
-    oldDecorate.bind(this)(...args)
-    this.screen_.style.cssText += `; padding-right: ${this.screen_.offsetWidth - this.screen_.clientWidth}px;`
-}
-
-hterm.hterm.Terminal.prototype.showOverlay = () => null
 
 @Component({
-  selector: 'terminal',
+  selector: 'terminalTab',
   template: '',
-  styles: [require('./terminal.scss')],
+  styles: [require('./terminalTab.scss')],
 })
-export class TerminalComponent extends BaseTabComponent<TerminalTab> {
+export class TerminalTabComponent extends BaseTabComponent<TerminalTab> {
     title: string
     @Output() titleChange = new EventEmitter()
     terminal: any
     configSubscription: Subscription
+    startupTime: number
 
     constructor(
         private zone: NgZone,
@@ -63,6 +29,7 @@ export class TerminalComponent extends BaseTabComponent<TerminalTab> {
         private pluginDispatcher: PluginDispatcherService,
     ) {
         super()
+        this.startupTime = performance.now()
         this.configSubscription = config.change.subscribe(() => {
             this.configure()
         })
@@ -82,6 +49,11 @@ export class TerminalComponent extends BaseTabComponent<TerminalTab> {
             this.terminal.installKeyboard()
             io = this.terminal.io.push()
             const dataSubscription = this.model.session.dataAvailable.subscribe((data) => {
+                if (performance.now() - this.startupTime > 500)  {
+                    this.zone.run(() => {
+                        this.model.displayActivity()
+                    })
+                }
                 io.writeUTF8(data)
             })
             const closedSubscription = this.model.session.closed.subscribe(() => {

app/src/hterm.ts

@@ -0,0 +1,36 @@
+const dataurl = require('dataurl')
+export const hterm = require('hterm-commonjs')
+hterm.hterm.defaultStorage = new hterm.lib.Storage.Memory()
+export const preferenceManager = new hterm.hterm.PreferenceManager('default')
+
+
+hterm.hterm.VT.ESC['k'] = function(parseState) {
+    parseState.resetArguments();
+
+    function parseOSC(ps) {
+        if (!this.parseUntilStringTerminator_(ps) || ps.func == parseOSC) {
+            return
+        }
+
+        this.terminal.setWindowTitle(ps.args[0])
+    }
+    parseState.func = parseOSC
+}
+
+preferenceManager.set('user-css', dataurl.convert({
+    data: require('./components/terminal.userCSS.scss'),
+    mimetype: 'text/css',
+    charset: 'utf8',
+}))
+preferenceManager.set('background-color', '#1D272D')
+preferenceManager.set('color-palette-overrides', {
+    0: '#1D272D',
+})
+
+const oldDecorate = hterm.hterm.ScrollPort.prototype.decorate
+hterm.hterm.ScrollPort.prototype.decorate = function (...args) {
+    oldDecorate.bind(this)(...args)
+    this.screen_.style.cssText += `; padding-right: ${this.screen_.offsetWidth - this.screen_.clientWidth}px;`
+}
+
+hterm.hterm.Terminal.prototype.showOverlay = () => null

app/src/models/tab.ts

@@ -1,6 +1,7 @@
-import { Subscription } from 'rxjs'
+import { BaseTabComponent } from 'components/baseTab'
 import { Session } from 'services/sessions'
 
+declare type ComponentType<T extends Tab> = new (...args: any[]) => BaseTabComponent<T>
 
 export class Tab {
     id: number
@@ -13,7 +14,11 @@ export class Tab {
         this.id = Tab.lastTabID++
     }
 
-    getComponentType (): (new (...args: any[])) {
+    displayActivity () {
+        this.hasActivity = true
+    }
+
+    getComponentType (): ComponentType<Tab> {
         return null
     }
 
@@ -30,35 +35,20 @@ export class SettingsTab extends Tab {
         this.scrollable = true
     }
 
-    getComponentType (): (new (...args: any[])) {
+    getComponentType (): ComponentType<SettingsTab> {
         return SettingsPaneComponent
     }
 }
 
 
-import { TerminalComponent } from 'components/terminal'
+import { TerminalTabComponent } from 'components/terminalTab'
 
 export class TerminalTab extends Tab {
-    private activitySubscription: Subscription
-
     constructor (public session: Session) {
         super()
-        // ignore the initial refresh
-        setTimeout(() => {
-            this.activitySubscription = this.session.dataAvailable.subscribe(() => {
-                this.hasActivity = true
-            })
-        }, 500)
     }
 
-    getComponentType (): (new (...args: any[])) {
+    getComponentType (): ComponentType<TerminalTab> {
-        return TerminalComponent
+        return TerminalTabComponent
-    }
-
-    destroy () {
-        super.destroy()
-        if (this.activitySubscription) {
-            this.activitySubscription.unsubscribe()
-        }
     }
 }