UI for manage dev mode instance

packages/core/src/browser/status-bar/status-bar.ts

@@ -7,7 +7,7 @@
 
 import { VirtualRenderer, VirtualWidget } from '../widgets';
 import { CommandService } from '../../common';
-import { h , ElementInlineStyle } from '@phosphor/virtualdom';
+import { h, ElementInlineStyle } from '@phosphor/virtualdom';
 import { LabelParser, LabelIcon } from '../label-parser';
 import { injectable, inject } from 'inversify';
 import { FrontendApplicationStateService } from '../frontend-application-state';
@@ -27,11 +27,13 @@ export interface StatusBarEntry {
  text: string;
  alignment: StatusBarAlignment;
  color?: string;
+ className?: string;
  tooltip?: string;
  command?: string;
  // tslint:disable-next-line:no-any
  arguments?: any[];
  priority?: number;
+ onclick?: (e: MouseEvent) => void;
 }
 
 export enum StatusBarAlignment {
@@ -42,9 +44,7 @@ export interface StatusBarEntryAttributes {
  style?: ElementInlineStyle;
  className?: string;
  title?: string;
- onclick?: () => void;
- onmouseover?: () => void;
- onmouseout?: () => void;
+ onclick?: (e: MouseEvent) => void;
 }
 
 export const STATUSBAR_WIDGET_FACTORY_ID = 'statusBar';
@@ -131,6 +131,13 @@ export class StatusBarImpl extends VirtualWidget implements StatusBar {
  }
  };
  attrs.className = 'element hasCommand';
+ } else if (entry.onclick) {
+ attrs.onclick = (e) => {
+ if (entry.onclick) {
+ entry.onclick(e);
+ }
+ };
+ attrs.className = 'element hasCommand';
  } else {
  attrs.className = 'element';
  }
@@ -145,6 +152,10 @@ export class StatusBarImpl extends VirtualWidget implements StatusBar {
  };
  }
 
+ if (entry.className) {
+ attrs.className += ' ' + entry.className;
+ }
+
  return attrs;
  }
 

packages/core/src/browser/style/status-bar.css

@@ -51,4 +51,4 @@
 
 #theia-statusBar .area.right .element {
  margin-left: 15px;
-}
+}

packages/plugin-ext/src/hosted/browser/hosted-plugin-informer.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2018 Red Hat, Inc. and others.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+import { injectable, inject, postConstruct } from 'inversify';
+import { StatusBar } from '@theia/core/lib/browser/status-bar/status-bar';
+import { StatusBarAlignment, StatusBarEntry } from '@theia/core/lib/browser';
+import { WorkspaceService } from '@theia/workspace/lib/browser';
+import { HostedPluginServer } from '../../common/plugin-protocol';
+import { ConnectionStatusService, ConnectionState } from '@theia/core/lib/browser/connection-status-service';
+import URI from '@theia/core/lib/common/uri';
+import { FileStat } from '@theia/filesystem/lib/common';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
+
+/**
+ * Informs the user whether Theia is running with hosted plugin.
+ * Adds 'Development Host' status bar element and appends the same prefix to window title.
+ */
+@injectable()
+export class HostedPluginInformer {
+
+ public static readonly DEVELOPMENT_HOST_TITLE = "Development Host";
+
+ public static readonly DEVELOPMENT_HOST = "development-host";
+ public static readonly DEVELOPMENT_HOST_OFFLINE = "development-host-offline";
+
+ private entry: StatusBarEntry;
+
+ @inject(StatusBar)
+ protected readonly statusBar: StatusBar;
+
+ @inject(WorkspaceService)
+ protected readonly workspaceService: WorkspaceService;
+
+ @inject(HostedPluginServer)
+ protected readonly hostedPluginServer: HostedPluginServer;
+
+ @inject(ConnectionStatusService)
+ protected readonly connectionStatusService: ConnectionStatusService;
+
+ @inject(FrontendApplicationStateService)
+ protected readonly frontendApplicationStateService: FrontendApplicationStateService;
+
+ @postConstruct()
+ protected async init(): Promise<void> {
+ this.workspaceService.root.then(root => {
+ this.hostedPluginServer.getHostedPlugin().then(pluginMetadata => {
+ if (pluginMetadata) {
+ this.updateTitle(root);
+
+ this.entry = {
+ text: `$(cube) ${HostedPluginInformer.DEVELOPMENT_HOST_TITLE}`,
+ tooltip: `Hosted Plugin '${pluginMetadata.model.name}'`,
+ alignment: StatusBarAlignment.LEFT,
+ priority: 100
+ };
+
+ this.frontendApplicationStateService.reachedState('ready').then(() => {
+ this.updateStatusBarElement();
+ });
+
+ this.connectionStatusService.onStatusChange(() => this.updateStatusBarElement());
+ }
+ });
+ });
+ }
+
+ private updateStatusBarElement(): void {
+ if (this.connectionStatusService.currentState.state === ConnectionState.OFFLINE) {
+ this.statusBar.removeElement(HostedPluginInformer.DEVELOPMENT_HOST);
+ this.statusBar.setElement(HostedPluginInformer.DEVELOPMENT_HOST_OFFLINE, this.entry);
+ } else {
+ this.statusBar.removeElement(HostedPluginInformer.DEVELOPMENT_HOST_OFFLINE);
+ this.statusBar.setElement(HostedPluginInformer.DEVELOPMENT_HOST, this.entry);
+ }
+ }
+
+ private updateTitle(root: FileStat | undefined): void {
+ if (root) {
+ const uri = new URI(root.uri);
+ document.title = HostedPluginInformer.DEVELOPMENT_HOST_TITLE + " - " + uri.displayName;
+ } else {
+ document.title = HostedPluginInformer.DEVELOPMENT_HOST_TITLE;
+ }
+ }
+
+}