diff --git a/app/src/app.module.ts b/app/src/app.module.ts index c8fc2be5..ff0dba57 100644 --- a/app/src/app.module.ts +++ b/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, diff --git a/app/src/components/terminal.scss b/app/src/components/terminalTab.scss similarity index 100% rename from app/src/components/terminal.scss rename to app/src/components/terminalTab.scss diff --git a/app/src/components/terminal.ts b/app/src/components/terminalTab.ts similarity index 69% rename from app/src/components/terminal.ts rename to app/src/components/terminalTab.ts index 0c64ab7d..46e91c9c 100644 --- a/app/src/components/terminal.ts +++ b/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 { +export class TerminalTabComponent extends BaseTabComponent { 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 { private pluginDispatcher: PluginDispatcherService, ) { super() + this.startupTime = performance.now() this.configSubscription = config.change.subscribe(() => { this.configure() }) @@ -82,6 +49,11 @@ export class TerminalComponent extends BaseTabComponent { 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(() => { diff --git a/app/src/hterm.ts b/app/src/hterm.ts new file mode 100644 index 00000000..3b7ab0d1 --- /dev/null +++ b/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 diff --git a/app/src/models/tab.ts b/app/src/models/tab.ts index 538061b3..5a4dfcb4 100644 --- a/app/src/models/tab.ts +++ b/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 = new (...args: any[]) => BaseTabComponent 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 { return null } @@ -30,35 +35,20 @@ export class SettingsTab extends Tab { this.scrollable = true } - getComponentType (): (new (...args: any[])) { + getComponentType (): ComponentType { 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[])) { - return TerminalComponent - } - - destroy () { - super.destroy() - if (this.activitySubscription) { - this.activitySubscription.unsubscribe() - } + getComponentType (): ComponentType { + return TerminalTabComponent } }