[WIP] Display initial loading message in terminal

packages/task/src/browser/task-frontend-module.ts

@@ -39,6 +39,7 @@ import './tasks-monaco-contribution';
 import { TaskNameResolver } from './task-name-resolver';
 import { TaskSourceResolver } from './task-source-resolver';
 import { TaskTemplateSelector } from './task-templates';
+import { TaskTerminal } from './task-terminal';
 
 export default new ContainerModule(bind => {
     bind(TaskFrontendContribution).toSelf().inSingletonScope();
@@ -77,6 +78,7 @@ export default new ContainerModule(bind => {
     bind(TaskNameResolver).toSelf().inSingletonScope();
     bind(TaskSourceResolver).toSelf().inSingletonScope();
     bind(TaskTemplateSelector).toSelf().inSingletonScope();
+    bind(TaskTerminal).toSelf().inSingletonScope();
 
     bindProcessTaskModule(bind);
     bindTaskPreferences(bind);

packages/task/src/browser/task-service.ts

@@ -60,6 +60,7 @@ import { TaskSchemaUpdater } from './task-schema-updater';
 import { TaskConfigurationManager } from './task-configuration-manager';
 import { PROBLEMS_WIDGET_ID, ProblemWidget } from '@theia/markers/lib/browser/problem/problem-widget';
 import { TaskNode } from './task-node';
+import { TaskTerminal } from './task-terminal';
 
 export interface QuickPickProblemMatcherItem {
     problemMatchers: NamedProblemMatcher[] | undefined;
@@ -169,6 +170,10 @@ export class TaskService implements TaskConfigurationClient {
 
     @inject(LabelProvider)
     protected readonly labelProvider: LabelProvider;
+
+    @inject(TaskTerminal)
+    protected readonly taskTerminal: TaskTerminal;
+
     /**
      * @deprecated To be removed in 0.5.0
      */
@@ -454,6 +459,9 @@ export class TaskService implements TaskConfigurationClient {
      * It looks for configured and detected tasks.
      */
     async run(source: string, taskLabel: string, scope?: string): Promise<TaskInfo | undefined> {
+        // Open an empty terminal, display a message informing the user that terminal is starting
+        await this.taskTerminal.openEmptyTerminal(taskLabel);
+
         let task = await this.getProvidedTask(source, taskLabel, scope);
         if (!task) { // if a detected task cannot be found, search from tasks.json
             task = this.taskConfigurations.getTask(source, taskLabel);
@@ -462,6 +470,7 @@ export class TaskService implements TaskConfigurationClient {
                 return;
             }
         }
+
         const customizationObject = await this.getTaskCustomization(task);
 
         if (!customizationObject.problemMatcher) {
@@ -972,29 +981,13 @@ export class TaskService implements TaskConfigurationClient {
     async attach(processId: number, taskId: number): Promise<void> {
         // Get the list of all available running tasks.
         const runningTasks: TaskInfo[] = await this.getRunningTasks();
+
         // Get the corresponding task information based on task id if available.
         const taskInfo: TaskInfo | undefined = runningTasks.find((t: TaskInfo) => t.taskId === taskId);
-        // Create terminal widget to display an execution output of a task that was launched as a command inside a shell.
-        const widget = <TerminalWidget>await this.widgetManager.getOrCreateWidget(
-            TERMINAL_WIDGET_FACTORY_ID,
-            <TerminalWidgetFactoryOptions>{
-                created: new Date().toString(),
-                id: this.getTerminalWidgetId(processId),
-                title: taskInfo
-                    ? `Task: ${taskInfo.config.label}`
-                    : `Task: #${taskId}`,
-                destroyTermOnClose: true
-            }
-        );
-        this.shell.addWidget(widget, { area: 'bottom' });
-        if (taskInfo && taskInfo.config.presentation && taskInfo.config.presentation.reveal === RevealKind.Always) {
-            if (taskInfo.config.presentation.focus) { // assign focus to the terminal if presentation.focus is true
-                this.shell.activateWidget(widget.id);
-            } else { // show the terminal but not assign focus
-                this.shell.revealWidget(widget.id);
-            }
-        }
-        widget.start(processId);
+
+        // Attach terminal to the running task
+        // to display an execution output of a task that was launched as a command inside a shell.
+        this.taskTerminal.attach(processId, taskId, taskInfo, this.getTerminalWidgetId(processId));
     }
 
     private getTerminalWidgetId(terminalId: number): string {

packages/task/src/browser/task-terminal.ts

@@ -0,0 +1,99 @@
+/********************************************************************************
+ * Copyright (C) 2020 Red Hat, Inc. and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { inject, injectable } from 'inversify';
+import { TerminalWidgetFactoryOptions, TERMINAL_WIDGET_FACTORY_ID } from '@theia/terminal/lib/browser/terminal-widget-impl';
+import { TerminalWidget } from '@theia/terminal/lib/browser/base/terminal-widget';
+import { ApplicationShell, WidgetManager } from '@theia/core/lib/browser';
+import { TaskInfo, RevealKind } from '../common';
+
+@injectable()
+export class TaskTerminal {
+
+    @inject(WidgetManager)
+    protected readonly widgetManager: WidgetManager;
+
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
+
+    protected terminalWidgets: TerminalWidget[] = [];
+
+    async openEmptyTerminal(taskLabel: string): Promise<void> {
+        const id = TERMINAL_WIDGET_FACTORY_ID + '-connecting';
+
+        const widget = <TerminalWidget>await this.widgetManager.getOrCreateWidget(
+            TERMINAL_WIDGET_FACTORY_ID,
+            <TerminalWidgetFactoryOptions>{
+                created: new Date().toString(),
+                id: id,
+                title: taskLabel,
+                destroyTermOnClose: true,
+                loadingMessage: `Task '${taskLabel}' - Connecting...`
+            }
+        );
+
+        this.shell.addWidget(widget, { area: 'bottom' });
+        this.shell.revealWidget(widget.id);
+
+        this.terminalWidgets.push(widget);
+    }
+
+    private findWidget(taskInfo: TaskInfo | undefined): TerminalWidget | undefined {
+        if (taskInfo && taskInfo.config.label) {
+            for (let i = 0; i < this.terminalWidgets.length; i++) {
+                const w = this.terminalWidgets[i];
+                if (taskInfo.config.label === w.title.label) {
+                    this.terminalWidgets.splice(i, 1);
+                    return w;
+                }
+            }
+        }
+
+        return undefined;
+    }
+
+    async attach(processId: number, taskId: number, taskInfo: TaskInfo | undefined, terminalWidgetId: string): Promise<void> {
+        let widget: TerminalWidget | undefined = this.findWidget(taskInfo);
+        if (widget) {
+            widget.id = terminalWidgetId;
+        } else {
+            widget = <TerminalWidget>await this.widgetManager.getOrCreateWidget(
+                TERMINAL_WIDGET_FACTORY_ID,
+                <TerminalWidgetFactoryOptions>{
+                    created: new Date().toString(),
+                    id: terminalWidgetId,
+                    title: taskInfo
+                        ? `Task: ${taskInfo.config.label}`
+                        : `Task: #${taskId}`,
+                    destroyTermOnClose: true
+                }
+            );
+
+            this.shell.addWidget(widget, { area: 'bottom' });
+        }
+
+        if (taskInfo && taskInfo.config.presentation && taskInfo.config.presentation.reveal === RevealKind.Always) {
+            if (taskInfo.config.presentation.focus) { // assign focus to the terminal if presentation.focus is true
+                this.shell.activateWidget(widget.id);
+            } else { // show the terminal but not assign focus
+                this.shell.revealWidget(widget.id);
+            }
+        }
+
+        widget.start(processId);
+    }
+
+}

packages/terminal/src/browser/base/terminal-widget.ts

@@ -106,4 +106,9 @@ export interface TerminalWidgetOptions {
      * Terminal attributes. Can be useful to apply some implementation specific information.
      */
     readonly attributes?: { [key: string]: string | null };
+
+    /**
+     * Initial message to be displayed while terminal is not started.
+     */
+    readonly loadingMessage?: string;
 }

packages/terminal/src/browser/terminal-widget-impl.ts

@@ -54,6 +54,7 @@ export class TerminalWidgetImpl extends TerminalWidget implements StatefulWidget
     protected waitForConnection: Deferred<MessageConnection> | undefined;
     protected hoverMessage: HTMLDivElement;
     protected lastTouchEnd: TouchEvent | undefined;
+    protected loadingMessage: HTMLDivElement;
 
     @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;
     @inject(WebSocketConnectionProvider) protected readonly webSocketConnectionProvider: WebSocketConnectionProvider;
@@ -193,6 +194,24 @@ export class TerminalWidgetImpl extends TerminalWidget implements StatefulWidget
         for (const contribution of this.terminalContributionProvider.getContributions()) {
             contribution.onCreate(this);
         }
+
+        if (this.options.loadingMessage) {
+            this.loadingMessage = document.createElement('div');
+            this.loadingMessage.style.zIndex = '20';
+            this.loadingMessage.style.display = 'block';
+            this.loadingMessage.style.position = 'absolute';
+            this.loadingMessage.style.left = '0px';
+            this.loadingMessage.style.right = '0px';
+            this.loadingMessage.style.top = '30%';
+            this.loadingMessage.style.textAlign = 'center';
+            this.loadingMessage.style.color = 'var(--theia-editorWidget-foreground)';
+
+            const text = document.createElement('pre');
+            text.textContent = this.options.loadingMessage;
+            this.loadingMessage.appendChild(text);
+
+            this.node.appendChild(this.loadingMessage);
+        }
     }
 
     /**
@@ -280,6 +299,12 @@ export class TerminalWidgetImpl extends TerminalWidget implements StatefulWidget
         this.terminalId = typeof id !== 'number' ? await this.createTerminal() : await this.attachTerminal(id);
         this.resizeTerminalProcess();
         this.connectTerminalProcess();
+
+        // Hide loading message after starting the terminal.
+        if (this.loadingMessage) {
+            this.loadingMessage.style.display = 'none';
+        }
+
         if (IBaseTerminalServer.validateId(this.terminalId)) {
             this.onDidOpenEmitter.fire(undefined);
             return this.terminalId;