Added toolbar to top panel.

Signed-off-by: jbicker <jan.bicker@typefox.io>

Author: jbicker

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -19,6 +19,8 @@ import { WorkspaceRootUriAwareCommandHandler } from '@theia/workspace/lib/browse
 import { SelectionService } from '@theia/core';
 import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
 import { SketchFactory } from './sketch-factory';
+import { ArduinoToolbar } from './toolbar/arduino-toolbar';
+import { EditorManager } from '@theia/editor/lib/browser';
 
 @injectable()
 export class ArduinoFrontendContribution extends DefaultFrontendApplicationContribution implements TabBarToolbarContribution, CommandContribution {
@@ -56,6 +58,8 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
     @inject(SketchFactory)
     protected readonly sketchFactory: SketchFactory;
 
+    @inject(EditorManager)
+    protected readonly editorManager: EditorManager;
 
     @postConstruct()
     protected async init(): Promise<void> {
@@ -86,15 +90,16 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
                 quickPickService={this.quickPickService}
                 onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
                 onUnknownBoard={this.onUnknownBoard.bind(this)} />,
-            isVisible: widget => this.isArduinoEditor(widget)
+            isVisible: widget => this.isArduinoToolbar(widget)
         })
     }
 
     registerCommands(registry: CommandRegistry): void {
         registry.registerCommand(ArduinoCommands.VERIFY, {
-            isVisible: widget => this.isArduinoEditor(widget),
-            isEnabled: widget => this.isArduinoEditor(widget),
-            execute: async widget => {
+            isVisible: widget => this.isArduinoToolbar(widget),
+            isEnabled: widget => this.isArduinoToolbar(widget),
+            execute: async () => {
+                const widget = this.editorManager.currentEditor;
                 if (widget instanceof EditorWidget) {
                     await widget.saveable.save();
                 }
@@ -112,9 +117,10 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
             }
         });
         registry.registerCommand(ArduinoCommands.UPLOAD, {
-            isVisible: widget => this.isArduinoEditor(widget),
-            isEnabled: widget => this.isArduinoEditor(widget),
-            execute: async widget => {
+            isVisible: widget => this.isArduinoToolbar(widget),
+            isEnabled: widget => this.isArduinoToolbar(widget),
+            execute: async () => {
+                const widget = this.editorManager.currentEditor;
                 if (widget instanceof EditorWidget) {
                     await widget.saveable.save();
                 }
@@ -170,9 +176,9 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
         this.boardsListWidgetFrontendContribution.openView({reveal: true});
     }
 
-    private isArduinoEditor(maybeEditorWidget: any): boolean {
-        if (maybeEditorWidget instanceof EditorWidget) {
-            return maybeEditorWidget.editor.uri.toString().endsWith('.ino');
+    private isArduinoToolbar(maybeToolbarWidget: any): boolean {
+        if (maybeToolbarWidget instanceof ArduinoToolbar) {
+            return true;
         }
         return false;
     }

arduino-ide-extension/src/browser/arduino-frontend-module.ts

@@ -34,7 +34,8 @@ import { SilentOutlineViewContribution } from './customization/silent-outline-co
 import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
 import { SilentProblemContribution } from './customization/silent-problem-contribution';
 import { SilentNavigatorContribution } from './customization/silent-navigator-contribution';
-import {FileNavigatorContribution} from '@theia/navigator/lib/browser/navigator-contribution';
+import { FileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
+import { ArduinoToolbarContribution } from './toolbar/arduino-toolbar-contribution';
 
 export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
     // Commands and toolbar items
@@ -43,6 +44,9 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
     bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
     bind(MenuContribution).to(ArduinoFileMenuContribution).inSingletonScope();
 
+    bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
+
     // `ino` TextMate grammar
     bind(LanguageGrammarDefinitionContribution).to(ArduinoLanguageGrammarContribution).inSingletonScope();
 

arduino-ide-extension/src/browser/style/main.css

@@ -8,4 +8,4 @@
 
 #outputView {
     color: var(--theia-ui-font-color3);
-}
+}

arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts

@@ -0,0 +1,22 @@
+import { FrontendApplicationContribution, FrontendApplication } from "@theia/core/lib/browser";
+import { injectable, inject } from "inversify";
+import { ArduinoToolbar } from "./arduino-toolbar";
+import { TabBarToolbarRegistry, TabBarToolbarFactory, TabBarToolbar } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
+
+@injectable()
+export class ArduinoToolbarContribution implements FrontendApplicationContribution {
+
+    protected toolbarWidget: ArduinoToolbar;
+
+    constructor(
+        @inject(TabBarToolbarRegistry) protected tabBarToolBarRegistry: TabBarToolbarRegistry,
+        @inject(TabBarToolbarFactory) protected tabBarToolBarFactory: () => TabBarToolbar) {
+        this.toolbarWidget = new ArduinoToolbar(this.tabBarToolBarRegistry, this.tabBarToolBarFactory);
+    }
+
+    onStart(app: FrontendApplication) {
+        app.shell.addWidget(this.toolbarWidget, {
+            area: 'top'
+        })
+    }
+}

arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx

@@ -0,0 +1,54 @@
+import { Widget } from '@phosphor/widgets';
+import { Message } from '@phosphor/messaging';
+import { TabBarToolbar, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+
+export class ArduinoToolbar extends Widget {
+
+    protected toolbar: TabBarToolbar | undefined;
+
+    constructor(
+        protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
+        protected readonly tabBarToolbarFactory: () => TabBarToolbar
+    ) {
+        super();
+        this.id = 'arduino-toolbar';
+        this.init();
+        this.tabBarToolbarRegistry.onDidChange(() => this.update());
+    }
+
+    protected onAfterAttach(msg: Message): void {
+        if (this.toolbar) {
+            if (this.toolbar.isAttached) {
+                Widget.detach(this.toolbar);
+            }
+            Widget.attach(this.toolbar, this.node);
+        }
+        super.onAfterAttach(msg);
+    }
+
+    protected onBeforeDetach(msg: Message): void {
+        if (this.toolbar && this.toolbar.isAttached) {
+            Widget.detach(this.toolbar);
+        }
+        super.onBeforeDetach(msg);
+    }
+
+    protected onUpdateRequest(msg: Message): void {
+        super.onUpdateRequest(msg);
+        this.updateToolbar();
+    }
+
+    protected updateToolbar(): void {
+        if (!this.toolbar) {
+            return;
+        }
+        const items = this ? this.tabBarToolbarRegistry.visibleItems(this) : [];
+        this.toolbar.updateItems(items, this);
+    }
+
+    protected init(): void {
+        this.node.classList.add('theia-arduino-toolbar');
+        this.toolbar = this.tabBarToolbarFactory();
+        this.update();
+    }
+}