Merge pull request #23 from bcmi-labs/ui-changes

Ui changes
2025-07-07 19:36:33 +00:00 · 2019-06-17 09:36:26 +02:00 · 2019-06-17 09:36:26 +02:00 · 7760915014
commit 7760915014
parent 1d6ba97d68 f9746b350d
26 changed files with 2197 additions and 2458 deletions
--- a/arduino-ide-extension/package.json
+++ b/arduino-ide-extension/package.json
@ -16,6 +16,7 @@
    "@theia/monaco": "next",
    "@theia/outline-view": "next",
    "@theia/workspace": "next",
+    "@theia/navigator": "next",
    "p-queue": "^5.0.0"
  },
  "scripts": {
@ -44,6 +45,10 @@
    {
      "backend": "lib/node/arduino-backend-module",
      "frontend": "lib/browser/arduino-frontend-module"
+    },
+    {
+      "frontend": "lib/browser/menu/browser-arduino-menu-module",
+      "frontendElectron": "lib/electron-browser/electron-arduino-menu-module"
    }
  ]
 }
--- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
+++ b/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.getCurrentWidget();
                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.getCurrentWidget();
                if (widget instanceof EditorWidget) {
                    await widget.saveable.save();
                }
@ -142,7 +148,7 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
                    await this.sketchFactory.createNewSketch(uri);
                } catch (e) {
                    await this.messageService.error(e.toString());
-                } 
+                }
            }
        }));
        registry.registerCommand(ArduinoCommands.REFRESH_BOARDS, {
@ -151,13 +157,24 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
        })
    }

+    protected getCurrentWidget(): EditorWidget | undefined {
+        let widget = this.editorManager.currentEditor;
+        if (!widget) {
+            const visibleWidgets = this.editorManager.all.filter(w => w.isVisible);
+            if (visibleWidgets.length > 0) {
+                widget = visibleWidgets[0];
+            }
+        }
+        return widget;
+    }
+
    private async onNoBoardsInstalled() {
        const action = await this.messageService.info("You have no boards installed. Use the boards mangager to install one.", "Open Boards Manager");
        if (!action) {
            return;
        }

-        this.boardsListWidgetFrontendContribution.openView({reveal: true});
+        this.boardsListWidgetFrontendContribution.openView({ reveal: true });
    }

    private async onUnknownBoard() {
@ -167,12 +184,12 @@ export class ArduinoFrontendContribution extends DefaultFrontendApplicationContr
            return;
        }

-        this.boardsListWidgetFrontendContribution.openView({reveal: true});
+        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;
    }
--- a/arduino-ide-extension/src/browser/arduino-frontend-module.ts
+++ b/arduino-ide-extension/src/browser/arduino-frontend-module.ts
@ -33,6 +33,17 @@ import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline
 import { SilentOutlineViewContribution } from './customization/silent-outline-contribution';
 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 { ArduinoToolbarContribution } from './toolbar/arduino-toolbar-contribution';
+import { OutputToolbarContribution } from '@theia/output/lib/browser/output-toolbar-contribution';
+import { ArduinoOutputToolContribution } from './customization/silent-output-tool-contribution';
+import { EditorContribution } from '@theia/editor/lib/browser/editor-contribution';
+import { SilentEditorContribution } from './customization/silent-editor-contribution';
+import { MonacoStatusBarContribution } from '@theia/monaco/lib/browser/monaco-status-bar-contribution';
+import { SilentMonacoStatusBarContribution } from './customization/silent-monaco-status-bar-contribution';
+import { ApplicationShell } from '@theia/core/lib/browser';
+import { CustomApplicationShell } from './customization/custom-application-shell';

 export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
    // Commands and toolbar items
@ -41,6 +52,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();

@ -106,4 +120,15 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
    bind(OutlineViewContribution).to(SilentOutlineViewContribution).inSingletonScope();
    unbind(ProblemContribution);
    bind(ProblemContribution).to(SilentProblemContribution).inSingletonScope();
+
+    unbind(FileNavigatorContribution);
+    bind(FileNavigatorContribution).to(SilentNavigatorContribution).inSingletonScope();
+    unbind(OutputToolbarContribution);
+    bind(OutputToolbarContribution).to(ArduinoOutputToolContribution).inSingletonScope();
+    unbind(EditorContribution);
+    bind(EditorContribution).to(SilentEditorContribution).inSingletonScope();
+    unbind(MonacoStatusBarContribution);
+    bind(MonacoStatusBarContribution).to(SilentMonacoStatusBarContribution).inSingletonScope();
+    unbind(ApplicationShell);
+    bind(ApplicationShell).to(CustomApplicationShell).inSingletonScope();
 });
--- a/arduino-ide-extension/src/browser/boards/boards-widget-frontend-contribution.ts
+++ b/arduino-ide-extension/src/browser/boards/boards-widget-frontend-contribution.ts
@ -8,7 +8,7 @@ import { BoardsListWidget } from './boards-list-widget';
 export abstract class ListWidgetFrontendContribution extends AbstractViewContribution<ListWidget> implements FrontendApplicationContribution {

    async initializeLayout(): Promise<void> {
-        await this.openView();
+        // await this.openView();
    }

 }
--- a/arduino-ide-extension/src/browser/components/connected-boards.tsx
+++ b/arduino-ide-extension/src/browser/components/connected-boards.tsx
@ -3,6 +3,7 @@ import { BoardsService, Board } from '../../common/protocol/boards-service';
 // import { SelectBoardDialog } from './select-board-dialog';
 import { QuickPickService } from '@theia/core/lib/common/quick-pick-service';
 import { BoardsNotificationService } from '../boards-notification-service';
+import { ARDUINO_TOOLBAR_ITEM_CLASS } from '../toolbar/arduino-toolbar';

 export class ConnectedBoards extends React.Component<ConnectedBoards.Props, ConnectedBoards.State> {
    static TOOLBAR_ID: 'connected-boards-toolbar';
@ -28,7 +29,7 @@ export class ConnectedBoards extends React.Component<ConnectedBoards.Props, Conn
            content = [ <option key="loading" value="0">{label}</option> ];
        }

-        return <div className={ConnectedBoards.Styles.CONNECTED_BOARDS_CLASS}>
+        return <div className={`${ARDUINO_TOOLBAR_ITEM_CLASS} item ${ConnectedBoards.Styles.CONNECTED_BOARDS_CLASS}`}>
            <select disabled={!this.state.boards}
                onChange={this.onBoardSelect.bind(this)}
                value={this.state.selection}>
--- a/arduino-ide-extension/src/browser/customization/custom-application-shell.ts
+++ b/arduino-ide-extension/src/browser/customization/custom-application-shell.ts
@ -0,0 +1,7 @@
+import { ApplicationShell } from "@theia/core/lib/browser";
+
+export class CustomApplicationShell extends ApplicationShell {
+    protected refreshBottomPanelToggleButton() {
+        
+    }
+}
--- a/arduino-ide-extension/src/browser/customization/silent-editor-contribution.ts
+++ b/arduino-ide-extension/src/browser/customization/silent-editor-contribution.ts
@ -0,0 +1,11 @@
+import {EditorContribution} from '@theia/editor/lib/browser/editor-contribution'; 
+import { TextEditor } from '@theia/editor/lib/browser';
+
+export class SilentEditorContribution extends EditorContribution {
+    protected updateLanguageStatus(editor: TextEditor | undefined): void {
+    }
+
+    protected setCursorPositionStatus(editor: TextEditor | undefined): void {
+
+    }
+}
--- a/arduino-ide-extension/src/browser/customization/silent-monaco-status-bar-contribution.ts
+++ b/arduino-ide-extension/src/browser/customization/silent-monaco-status-bar-contribution.ts
@ -0,0 +1,11 @@
+import {MonacoStatusBarContribution} from '@theia/monaco/lib/browser/monaco-status-bar-contribution';
+
+export class SilentMonacoStatusBarContribution extends MonacoStatusBarContribution {
+    protected setConfigTabSizeWidget() {
+        
+    }
+
+    protected setLineEndingWidget() {
+        
+    }
+}
--- a/arduino-ide-extension/src/browser/customization/silent-navigator-contribution.ts
+++ b/arduino-ide-extension/src/browser/customization/silent-navigator-contribution.ts
@ -0,0 +1,10 @@
+import { injectable } from "inversify";
+import { FileNavigatorContribution } from "@theia/navigator/lib/browser/navigator-contribution";
+import { FrontendApplication } from "@theia/core/lib/browser";
+
+@injectable()
+export class SilentNavigatorContribution extends FileNavigatorContribution {
+    async initializeLayout(app: FrontendApplication): Promise<void> {
+        // await this.openView();
+    }
+}
--- a/arduino-ide-extension/src/browser/customization/silent-output-tool-contribution.ts
+++ b/arduino-ide-extension/src/browser/customization/silent-output-tool-contribution.ts
@ -0,0 +1,10 @@
+import { OutputToolbarContribution } from "@theia/output/lib/browser/output-toolbar-contribution";
+import { TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
+import { injectable } from "inversify";
+
+@injectable()
+export class ArduinoOutputToolContribution extends OutputToolbarContribution {
+    async registerToolbarItems(toolbarRegistry: TabBarToolbarRegistry): Promise<void> {
+        // register nothing
+    }
+}
--- a/arduino-ide-extension/src/browser/customization/silent-problem-contribution.ts
+++ b/arduino-ide-extension/src/browser/customization/silent-problem-contribution.ts
@ -1,5 +1,6 @@
 import { injectable } from 'inversify';
 import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
+import { ProblemStat } from '@theia/markers/lib/browser/problem/problem-manager';

@injectable()
 export class SilentProblemContribution extends ProblemContribution {
@ -8,4 +9,7 @@ export class SilentProblemContribution extends ProblemContribution {
        // await this.openView();
    }

+    protected setStatusBarElement(problemStat: ProblemStat) {
+        
+    }
 }
--- a/arduino-ide-extension/src/browser/icons/buttons.svg
+++ b/arduino-ide-extension/src/browser/icons/buttons.svg
@ -0,0 +1,869 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="198px"
+   height="99px"
+   viewBox="0 0 198 99"
+   enable-background="new 0 0 198 99"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="buttons.svg"><metadata
+     id="metadata327"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs325" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1215"
+     inkscape:window-height="1000"
+     id="namedview323"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="4"
+     inkscape:cx="45.252385"
+     inkscape:cy="36.224987"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><g
+     id="g5"
+     transform="translate(-0.12000084,0)"><circle
+       cx="16.620001"
+       cy="16.608999"
+       r="12"
+       id="circle7"
+       style="fill:#ffcc00" /><polyline
+       stroke-miterlimit="10"
+       points="21.453,12.745 15.788,20.571    11.775,16.658  "
+       id="polyline9"
+       style="fill:none;stroke:#655100;stroke-width:2.30489993;stroke-miterlimit:10" /></g><g
+     id="g11"
+     transform="translate(-0.12000084,0)"><circle
+       cx="16.620001"
+       cy="49.465"
+       r="12"
+       id="circle13"
+       style="fill:#ffffff" /><polyline
+       stroke-miterlimit="10"
+       points="21.453,45.601 15.788,53.427    11.775,49.514  "
+       id="polyline15"
+       style="fill:none;stroke:#006468;stroke-width:2.30489993;stroke-miterlimit:10" /></g><g
+     id="g17"
+     transform="translate(-0.12000084,0)"><circle
+       cx="16.620001"
+       cy="82.476997"
+       r="12"
+       id="circle19"
+       style="fill:#4db7bb" /><polyline
+       stroke-miterlimit="10"
+       points="21.453,78.612 15.788,86.438    11.775,82.525  "
+       id="polyline21"
+       style="fill:none;stroke:#006468;stroke-width:2.30489993;stroke-miterlimit:10" /></g><g
+     id="g23"
+     transform="translate(-0.26100159,0)"><circle
+       cx="49.761002"
+       cy="16.608999"
+       r="12"
+       id="circle25"
+       style="fill:#ffcc00" /><polygon
+       points="45.412,15.313 49.307,15.313 49.307,11.53 54.701,16.875 49.331,22.245 49.331,18.563 45.412,18.539 "
+       id="polygon27"
+       style="fill:#655100" /></g><g
+     id="g29"
+     transform="translate(-0.26100159,0)"><circle
+       cx="49.761002"
+       cy="49.465"
+       r="12"
+       id="circle31"
+       style="fill:#ffffff" /><polygon
+       points="45.412,48.169 49.307,48.169 49.307,44.386 54.701,49.731 49.331,55.101 49.331,51.419 45.412,51.394 "
+       id="polygon33"
+       style="fill:#006468" /></g><g
+     id="g35"
+     transform="translate(-0.26100159,0)"><circle
+       cx="49.761002"
+       cy="82.476997"
+       r="12"
+       id="circle37"
+       style="fill:#4db7bb" /><polygon
+       points="45.412,81.18 49.307,81.18 49.307,77.397 54.701,82.743 49.331,88.113 49.331,84.43 45.412,84.406 "
+       id="polygon39"
+       style="fill:#006468" /></g><g
+     id="g41"
+     transform="translate(-0.54399872,0)"><rect
+       x="105.544"
+       y="6.1090002"
+       width="21"
+       height="21"
+       id="rect43"
+       style="fill:#ffcc00" /><polygon
+       points="114.44,19.083 114.44,15.116 110.586,15.116 116.032,9.621 121.502,15.091 117.751,15.091 117.726,19.083 "
+       id="polygon45"
+       style="fill:#655100" /><rect
+       x="110.511"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect47"
+       style="fill:#655100" /><rect
+       x="112.518"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect49"
+       style="fill:#655100" /><rect
+       x="114.517"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect51"
+       style="fill:#655100" /><rect
+       x="116.525"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect53"
+       style="fill:#655100" /><rect
+       x="118.524"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect55"
+       style="fill:#655100" /><rect
+       x="120.531"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect57"
+       style="fill:#655100" /></g><g
+     id="g59"
+     transform="translate(-0.68600464,0)"><rect
+       x="138.686"
+       y="6.1090002"
+       width="21"
+       height="21"
+       id="rect61"
+       style="fill:#ffcc00" /><polygon
+       points="150.79,9.621 150.79,13.588 154.644,13.588 149.198,19.083 143.728,13.612 147.479,13.613 147.504,9.621 "
+       id="polygon63"
+       style="fill:#655100" /><rect
+       x="143.65199"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect65"
+       style="fill:#655100" /><rect
+       x="145.66"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect67"
+       style="fill:#655100" /><rect
+       x="147.659"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect69"
+       style="fill:#655100" /><rect
+       x="149.666"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect71"
+       style="fill:#655100" /><rect
+       x="151.666"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect73"
+       style="fill:#655100" /><rect
+       x="153.673"
+       y="22.193001"
+       width="1"
+       height="1"
+       id="rect75"
+       style="fill:#655100" /></g><g
+     id="g77"
+     transform="translate(-0.54399872,0)"><rect
+       x="105.544"
+       y="38.965"
+       width="21"
+       height="21"
+       id="rect79"
+       style="fill:#ffffff" /><polygon
+       points="114.44,51.939 114.44,47.971 110.586,47.971 116.032,42.476 121.502,47.947 117.751,47.947 117.726,51.939 "
+       id="polygon81"
+       style="fill:#006468" /><rect
+       x="110.511"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect83"
+       style="fill:#006468" /><rect
+       x="112.518"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect85"
+       style="fill:#006468" /><rect
+       x="114.517"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect87"
+       style="fill:#006468" /><rect
+       x="116.525"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect89"
+       style="fill:#006468" /><rect
+       x="118.524"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect91"
+       style="fill:#006468" /><rect
+       x="120.531"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect93"
+       style="fill:#006468" /></g><g
+     id="g95"
+     transform="translate(-0.68600464,0)"><rect
+       x="138.686"
+       y="38.965"
+       width="21"
+       height="21"
+       id="rect97"
+       style="fill:#ffffff" /><polygon
+       points="150.79,42.476 150.79,46.444 154.644,46.444 149.198,51.939 143.728,46.468 147.479,46.468 147.504,42.477 "
+       id="polygon99"
+       style="fill:#006468" /><rect
+       x="143.65199"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect101"
+       style="fill:#006468" /><rect
+       x="145.66"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect103"
+       style="fill:#006468" /><rect
+       x="147.659"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect105"
+       style="fill:#006468" /><rect
+       x="149.666"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect107"
+       style="fill:#006468" /><rect
+       x="151.666"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect109"
+       style="fill:#006468" /><rect
+       x="153.673"
+       y="55.049"
+       width="1"
+       height="1"
+       id="rect111"
+       style="fill:#006468" /></g><g
+     id="g113"
+     transform="translate(-0.54399872,0)"><rect
+       x="105.544"
+       y="71.976997"
+       width="21"
+       height="21"
+       id="rect115"
+       style="fill:#4db7bb" /><polygon
+       points="114.44,84.95 114.44,80.983 110.586,80.983 116.032,75.488 121.502,80.959 117.751,80.958 117.726,84.95 "
+       id="polygon117"
+       style="fill:#006468" /><rect
+       x="110.511"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect119"
+       style="fill:#006468" /><rect
+       x="112.518"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect121"
+       style="fill:#006468" /><rect
+       x="114.517"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect123"
+       style="fill:#006468" /><rect
+       x="116.525"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect125"
+       style="fill:#006468" /><rect
+       x="118.524"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect127"
+       style="fill:#006468" /><rect
+       x="120.531"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect129"
+       style="fill:#006468" /></g><g
+     id="g131"
+     transform="translate(-0.68600464,0)"><rect
+       x="138.686"
+       y="71.976997"
+       width="21"
+       height="21"
+       id="rect133"
+       style="fill:#4db7bb" /><polygon
+       points="150.79,75.488 150.79,79.455 154.644,79.455 149.198,84.95 143.728,79.48 147.479,79.48 147.504,75.488 "
+       id="polygon135"
+       style="fill:#006468" /><rect
+       x="143.65199"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect137"
+       style="fill:#006468" /><rect
+       x="145.66"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect139"
+       style="fill:#006468" /><rect
+       x="147.659"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect141"
+       style="fill:#006468" /><rect
+       x="149.666"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect143"
+       style="fill:#006468" /><rect
+       x="151.666"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect145"
+       style="fill:#006468" /><rect
+       x="153.673"
+       y="88.060997"
+       width="1"
+       height="1"
+       id="rect147"
+       style="fill:#006468" /></g><g
+     id="g149"
+     transform="translate(-0.40299988,0)"><path
+       d="M 87.445,22.097"
+       id="path151"
+       inkscape:connector-curvature="0"
+       style="fill:#655100" /><rect
+       x="72.403"
+       y="6.1090002"
+       width="21"
+       height="21"
+       id="rect153"
+       style="fill:#ffcc00" /><polygon
+       points="83.44,10.094 84.441,10.094 88.421,14.079 88.421,15.057 87.445,15.057 83.44,15.057 "
+       id="polygon155"
+       style="fill:#655100" /><polygon
+       points="78.404,11.093 78.404,22.097 87.445,22.097 87.445,14.87 88.421,14.87 88.421,23.134 77.399,23.134 77.399,10.094 83.562,10.094 83.568,11.093 "
+       id="polygon157"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="12.111"
+       width="0.995"
+       height="0.99599999"
+       id="rect159"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="12.111"
+       width="0.995"
+       height="0.99599999"
+       id="rect161"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="14.103"
+       width="0.995"
+       height="0.99599999"
+       id="rect163"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="14.103"
+       width="0.995"
+       height="0.99599999"
+       id="rect165"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="16.115999"
+       width="0.995"
+       height="0.99599999"
+       id="rect167"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="16.115999"
+       width="0.995"
+       height="0.99599999"
+       id="rect169"
+       style="fill:#655100" /><rect
+       x="83.403"
+       y="16.115999"
+       width="0.995"
+       height="0.99599999"
+       id="rect171"
+       style="fill:#655100" /><rect
+       x="85.400002"
+       y="16.115999"
+       width="0.995"
+       height="0.99599999"
+       id="rect173"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="18.118"
+       width="0.995"
+       height="0.99599999"
+       id="rect175"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="18.118"
+       width="0.995"
+       height="0.99599999"
+       id="rect177"
+       style="fill:#655100" /><rect
+       x="79.399002"
+       y="20.132"
+       width="0.995"
+       height="0.99599999"
+       id="rect179"
+       style="fill:#655100" /><rect
+       x="81.394997"
+       y="20.132"
+       width="0.995"
+       height="0.99599999"
+       id="rect181"
+       style="fill:#655100" /><rect
+       x="83.403"
+       y="18.118"
+       width="0.995"
+       height="0.99599999"
+       id="rect183"
+       style="fill:#655100" /><rect
+       x="85.400002"
+       y="18.118"
+       width="0.995"
+       height="0.99599999"
+       id="rect185"
+       style="fill:#655100" /><rect
+       x="83.403"
+       y="20.132"
+       width="0.995"
+       height="0.99599999"
+       id="rect187"
+       style="fill:#655100" /><rect
+       x="85.400002"
+       y="20.132"
+       width="0.995"
+       height="0.99599999"
+       id="rect189"
+       style="fill:#655100" /></g><g
+     id="g191"
+     transform="translate(-0.40299988,0)"><path
+       d="M 87.445,54.953"
+       id="path193"
+       inkscape:connector-curvature="0"
+       style="fill:#006468" /><rect
+       x="72.403"
+       y="38.965"
+       width="21"
+       height="21"
+       id="rect195"
+       style="fill:#ffffff" /><polygon
+       points="83.44,42.95 84.441,42.95 88.421,46.935 88.421,47.912 87.445,47.912 83.44,47.912 "
+       id="polygon197"
+       style="fill:#006468" /><polygon
+       points="78.404,43.949 78.404,54.953 87.445,54.953 87.445,47.726 88.421,47.726 88.421,55.99 77.399,55.99 77.399,42.95 83.586,42.95 83.599,43.951 "
+       id="polygon199"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="44.966999"
+       width="0.995"
+       height="0.99599999"
+       id="rect201"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="44.966999"
+       width="0.995"
+       height="0.99599999"
+       id="rect203"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="46.959"
+       width="0.995"
+       height="0.99599999"
+       id="rect205"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="46.959"
+       width="0.995"
+       height="0.99599999"
+       id="rect207"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="48.972"
+       width="0.995"
+       height="0.99599999"
+       id="rect209"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="48.972"
+       width="0.995"
+       height="0.99599999"
+       id="rect211"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="48.972"
+       width="0.995"
+       height="0.99599999"
+       id="rect213"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="48.972"
+       width="0.995"
+       height="0.99599999"
+       id="rect215"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="50.973999"
+       width="0.995"
+       height="0.99599999"
+       id="rect217"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="50.973999"
+       width="0.995"
+       height="0.99599999"
+       id="rect219"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="52.987"
+       width="0.995"
+       height="0.99599999"
+       id="rect221"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="52.987"
+       width="0.995"
+       height="0.99599999"
+       id="rect223"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="50.973999"
+       width="0.995"
+       height="0.99599999"
+       id="rect225"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="50.973999"
+       width="0.995"
+       height="0.99599999"
+       id="rect227"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="52.987"
+       width="0.995"
+       height="0.99599999"
+       id="rect229"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="52.987"
+       width="0.995"
+       height="0.99599999"
+       id="rect231"
+       style="fill:#006468" /></g><g
+     id="g233"
+     transform="translate(-0.40299988,0)"><path
+       d="M 87.445,87.965"
+       id="path235"
+       inkscape:connector-curvature="0"
+       style="fill:#006468" /><rect
+       x="72.403"
+       y="71.976997"
+       width="21"
+       height="21"
+       id="rect237"
+       style="fill:#4db7bb" /><polygon
+       points="83.44,75.961 84.441,75.961 88.421,79.946 88.421,80.924 87.445,80.924 83.44,80.924 "
+       id="polygon239"
+       style="fill:#006468" /><polygon
+       points="78.404,76.961 78.404,87.965 87.445,87.965 87.445,80.738 88.421,80.738 88.421,89.002 77.399,89.002 77.399,75.961 83.586,75.961 83.599,76.963 "
+       id="polygon241"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="77.977997"
+       width="0.995"
+       height="0.99599999"
+       id="rect243"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="77.977997"
+       width="0.995"
+       height="0.99599999"
+       id="rect245"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="79.970001"
+       width="0.995"
+       height="0.99599999"
+       id="rect247"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="79.970001"
+       width="0.995"
+       height="0.99599999"
+       id="rect249"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="81.984001"
+       width="0.995"
+       height="0.99599999"
+       id="rect251"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="81.984001"
+       width="0.995"
+       height="0.99599999"
+       id="rect253"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="81.984001"
+       width="0.995"
+       height="0.99599999"
+       id="rect255"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="81.984001"
+       width="0.995"
+       height="0.99599999"
+       id="rect257"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="83.986"
+       width="0.995"
+       height="0.99599999"
+       id="rect259"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="83.986"
+       width="0.995"
+       height="0.99599999"
+       id="rect261"
+       style="fill:#006468" /><rect
+       x="79.399002"
+       y="85.999001"
+       width="0.995"
+       height="0.99599999"
+       id="rect263"
+       style="fill:#006468" /><rect
+       x="81.394997"
+       y="85.999001"
+       width="0.995"
+       height="0.99599999"
+       id="rect265"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="83.986"
+       width="0.995"
+       height="0.99599999"
+       id="rect267"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="83.986"
+       width="0.995"
+       height="0.99599999"
+       id="rect269"
+       style="fill:#006468" /><rect
+       x="83.403"
+       y="85.999001"
+       width="0.995"
+       height="0.99599999"
+       id="rect271"
+       style="fill:#006468" /><rect
+       x="85.400002"
+       y="85.999001"
+       width="0.995"
+       height="0.99599999"
+       id="rect273"
+       style="fill:#006468" /></g><g
+     id="g275"
+     transform="translate(-0.82800293,0)"><rect
+       x="171.828"
+       y="6.1090002"
+       width="21"
+       height="21"
+       id="rect277"
+       style="fill:#ffcc00" /><rect
+       x="187.819"
+       y="16.101"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect279"
+       style="fill:#655100" /><rect
+       x="189.825"
+       y="16.101"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect281"
+       style="fill:#655100" /><rect
+       x="174.83299"
+       y="16.101"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect283"
+       style="fill:#655100" /><circle
+       stroke-miterlimit="10"
+       cx="181.80299"
+       cy="16.101"
+       r="4.0900002"
+       id="circle285"
+       style="fill:none;stroke:#655100;stroke-width:1.95439994;stroke-miterlimit:10" /><rect
+       x="175.895"
+       y="18.427999"
+       transform="matrix(0.6915,0.7224,-0.7224,0.6915,69.5827,-121.6599)"
+       width="2.6800001"
+       height="4.4229999"
+       id="rect287"
+       style="fill:#655100" /><rect
+       x="180.789"
+       y="15.103"
+       width="2.0280001"
+       height="1.9960001"
+       id="rect289"
+       style="fill:#655100" /></g><g
+     id="g291"
+     transform="translate(-0.82800293,0)"><rect
+       x="171.828"
+       y="38.965"
+       width="21"
+       height="21"
+       id="rect293"
+       style="fill:#ffffff" /><rect
+       x="187.819"
+       y="48.957001"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect295"
+       style="fill:#006468" /><rect
+       x="189.825"
+       y="48.957001"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect297"
+       style="fill:#006468" /><rect
+       x="174.83299"
+       y="48.957001"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect299"
+       style="fill:#006468" /><circle
+       stroke-miterlimit="10"
+       cx="181.80299"
+       cy="48.957001"
+       r="4.0900002"
+       id="circle301"
+       style="fill:none;stroke:#006468;stroke-width:1.95439994;stroke-miterlimit:10" /><rect
+       x="175.895"
+       y="51.284"
+       transform="matrix(0.6915,0.7224,-0.7224,0.6915,93.3163,-111.5246)"
+       width="2.6800001"
+       height="4.4229999"
+       id="rect303"
+       style="fill:#006468" /><rect
+       x="180.789"
+       y="47.959"
+       width="2.0280001"
+       height="1.9960001"
+       id="rect305"
+       style="fill:#006468" /></g><g
+     id="g307"
+     transform="translate(-0.82800293,0)"><rect
+       x="171.828"
+       y="71.976997"
+       width="21"
+       height="21"
+       id="rect309"
+       style="fill:#4db7bb" /><rect
+       x="187.819"
+       y="81.969002"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect311"
+       style="fill:#006468" /><rect
+       x="189.825"
+       y="81.969002"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect313"
+       style="fill:#006468" /><rect
+       x="174.83299"
+       y="81.969002"
+       width="0.99900001"
+       height="0.99800003"
+       id="rect315"
+       style="fill:#006468" /><circle
+       stroke-miterlimit="10"
+       cx="181.80299"
+       cy="81.969002"
+       r="4.0900002"
+       id="circle317"
+       style="fill:none;stroke:#006468;stroke-width:1.95439994;stroke-miterlimit:10" /><rect
+       x="175.895"
+       y="84.295998"
+       transform="matrix(0.6915,0.7224,-0.7224,0.6915,117.1625,-101.3412)"
+       width="2.6800001"
+       height="4.4229999"
+       id="rect319"
+       style="fill:#006468" /><rect
+       x="180.789"
+       y="80.970001"
+       width="2.0280001"
+       height="1.9960001"
+       id="rect321"
+       style="fill:#006468" /></g></svg>
--- a/arduino-ide-extension/src/browser/library/list-widget-frontend-contribution.ts
+++ b/arduino-ide-extension/src/browser/library/list-widget-frontend-contribution.ts
@ -8,7 +8,7 @@ import { LibraryListWidget } from './library-list-widget';
 export abstract class ListWidgetFrontendContribution extends AbstractViewContribution<ListWidget> implements FrontendApplicationContribution {

    async initializeLayout(): Promise<void> {
-        await this.openView();
+        // await this.openView();
    }

 }
--- a/arduino-ide-extension/src/browser/menu/arduino-menu-contribution.ts
+++ b/arduino-ide-extension/src/browser/menu/arduino-menu-contribution.ts
@ -0,0 +1,18 @@
+import { injectable } from "inversify";
+import { BrowserMenuBarContribution } from "@theia/core/lib/browser/menu/browser-menu-plugin";
+import { FrontendApplication } from "@theia/core/lib/browser";
+
+@injectable()
+export class ArduinoMenuContribution extends BrowserMenuBarContribution {
+    onStart(app: FrontendApplication): void {
+        if (this.isProMode()) {
+            const menu = this.factory.createMenuBar();
+            app.shell.addWidget(menu, { area: 'top' });
+        }
+    }
+
+    protected isProMode(): boolean {
+        // TODO ask for pro preference
+        return false;
+    }
+}
--- a/arduino-ide-extension/src/browser/menu/browser-arduino-menu-module.ts
+++ b/arduino-ide-extension/src/browser/menu/browser-arduino-menu-module.ts
@ -0,0 +1,8 @@
+import { BrowserMenuBarContribution } from '@theia/core/lib/browser/menu/browser-menu-plugin';
+import { ArduinoMenuContribution } from './arduino-menu-contribution';
+import { ContainerModule, interfaces } from 'inversify';
+
+export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind) => {
+    unbind(BrowserMenuBarContribution);
+    bind(BrowserMenuBarContribution).to(ArduinoMenuContribution).inSingletonScope();
+})
--- a/arduino-ide-extension/src/browser/style/arduino.useable.css
+++ b/arduino-ide-extension/src/browser/style/arduino.useable.css
@ -18,8 +18,9 @@ is not optimized for dense, information rich UIs.

 :root {
    /* Custom Theme Colors */
-    --theia-arduino-light: rgb(0, 102, 105);
-    --theia-arduino-light1: rgb(0, 164, 167);
+    --theia-arduino-light: rgb(0, 102, 102);
+    --theia-arduino-light1: rgb(0, 153, 153);
+    --theia-arduino-terminal: rgb(0, 0, 0);
    /* Borders: Width and color (bright to dark) */
    --theia-border-width: 1px;
    --theia-panel-border-width: 2px;
@ -74,9 +75,9 @@ is not optimized for dense, information rich UIs.
    /* Main layout colors (bright to dark)
        ------------------------------------ */
    --theia-layout-color0: #ffffff;
-    --theia-layout-color1: #f3f3f3;
+    --theia-layout-color1: var(--theia-arduino-light1);
    --theia-layout-color2: #ececec;
-    --theia-layout-color3: #dcdcdc;
+    --theia-layout-color3: var(--theia-arduino-light);
    --theia-layout-color4: #dcdcdc;
    /* Brand colors */
    --theia-brand-color0: var(--md-blue-700);
--- a/arduino-ide-extension/src/browser/style/index.css
+++ b/arduino-ide-extension/src/browser/style/index.css
@ -1,2 +1,3 @@
@import './list-widget.css';
-@import './select-board-dialog.css';
+@import './select-board-dialog.css';
+@import './main.css';
--- a/arduino-ide-extension/src/browser/style/main.css
+++ b/arduino-ide-extension/src/browser/style/main.css
@ -0,0 +1,66 @@
+.p-TabBar[data-orientation='horizontal'].theia-app-bottom {
+    background: var(--theia-layout-color1);
+}
+
+.theia-output {
+    background: var(--theia-arduino-terminal);
+}
+
+#outputView {
+    color: var(--theia-ui-font-color3);
+}
+
+#arduino-verify.arduino-tool-icon {
+    background: url(../icons/buttons.svg);
+    background-size: 800%;
+    background-position-x: 141px;
+    background-position-y: 21px;
+}
+
+#arduino-upload.arduino-tool-icon {
+    background: url(../icons/buttons.svg);
+    background-size: 800%;
+    background-position-x: 117px;
+    background-position-y: 21px;
+}
+
+#arduino-verify.arduino-tool-icon:hover {
+    background-position-y: 45px;
+}
+
+#arduino-upload.arduino-tool-icon:hover {
+    background-position-y: 45px;
+}
+
+.p-TabBar-toolbar .item.arduino-tool-item {
+    margin-left: 3px;
+}
+
+.arduino-tool-item.item.connected-boards {
+    opacity: 1;
+}
+
+.arduino-tool-item.item.connected-boards  select {
+    line-height: var(--theia-content-line-height);
+    font-size: var(--theia-ui-font-size1);
+    color: var(--theia-ui-font-color1);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--theia-ui-font-color1) 50%), linear-gradient(135deg, var(--theia-ui-font-color1) 50%, transparent 50%);
+    background-position: calc(100% - 6px) 8px, calc(100% - 2px) 8px, 100% 0;
+    background-size: 4px 5px;
+    background-repeat: no-repeat;
+    padding-left: 3px;
+    padding-right: 15px;
+}
+
+.p-Widget.p-TabBar.theia-app-centers.theia-app-bottom .p-TabBar-content-container.ps {
+    display: none;
+}
+
+.arduino-toolbar-tooltip {
+    margin-left: 10px;
+    display: flex;
+    align-items: center;
+    color: var(--theia-ui-font-color3);
+}
--- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts
+++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar-contribution.ts
@ -0,0 +1,25 @@
+import { FrontendApplicationContribution, FrontendApplication } from "@theia/core/lib/browser";
+import { injectable, inject } from "inversify";
+import { ArduinoToolbar } from "./arduino-toolbar";
+import { TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
+import { CommandRegistry } from "@theia/core/lib/common/command";
+import { LabelParser } from "@theia/core/lib/browser/label-parser";
+
+@injectable()
+export class ArduinoToolbarContribution implements FrontendApplicationContribution {
+
+    protected toolbarWidget: ArduinoToolbar;
+
+    constructor(
+        @inject(TabBarToolbarRegistry) protected tabBarToolBarRegistry: TabBarToolbarRegistry,
+        @inject(CommandRegistry) protected commandRegistry: CommandRegistry,
+        @inject(LabelParser) protected labelParser: LabelParser) {
+        this.toolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser);
+    }
+
+    onStart(app: FrontendApplication) {
+        app.shell.addWidget(this.toolbarWidget, {
+            area: 'top'
+        })
+    }
+}
--- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
+++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
@ -0,0 +1,87 @@
+import * as React from 'react';
+import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarItem, ReactTabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { LabelParser } from '@theia/core/lib/browser/label-parser';
+import { CommandRegistry } from '@theia/core/lib/common/command';
+
+export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item';
+
+export namespace ArduinoToolbarComponent {
+    export interface Props {
+        items: (TabBarToolbarItem | ReactTabBarToolbarItem)[],
+        commands: CommandRegistry,
+        commandIsEnabled: (id: string) => boolean,
+        executeCommand: (e: React.MouseEvent<HTMLElement>) => void
+    }
+    export interface State {
+        tootip: string
+    }
+}
+export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarComponent.Props, ArduinoToolbarComponent.State> {
+
+    constructor(props: ArduinoToolbarComponent.Props) {
+        super(props);
+        this.state = {tootip: ''};
+    }
+
+    protected renderItem(item: TabBarToolbarItem): React.ReactNode {
+        let innerText = '';
+        const command = this.props.commands.getCommand(item.command);
+        return <React.Fragment>
+            <div key={item.id}
+                className={`${ARDUINO_TOOLBAR_ITEM_CLASS} 
+                            ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}
+                            ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}`} >
+                <div
+                    id={item.id}
+                    className='arduino-tool-icon'
+                    onClick={this.props.executeCommand}
+                    onMouseOver={() => this.setState({ tootip: item.tooltip || '' })}
+                    onMouseOut={() => this.setState({ tootip: '' })}
+                    title={item.tooltip}>
+                    {innerText}
+                </div>
+            </div>
+        </React.Fragment>;
+    }
+
+    render(): React.ReactNode {
+        return <React.Fragment>
+            <div className={'arduino-toolbar-tooltip'}>{this.state.tootip}</div>
+            {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
+        </React.Fragment>;
+    }
+}
+
+export class ArduinoToolbar extends TabBarToolbar {
+
+    constructor(
+        protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
+        commands: CommandRegistry, labelParser: LabelParser
+    ) {
+        super(commands, labelParser);
+        this.id = 'arduino-toolbar';
+        this.init();
+        this.tabBarToolbarRegistry.onDidChange(() => this.updateToolbar());
+    }
+
+    protected updateToolbar(): void {
+        const items = this ? this.tabBarToolbarRegistry.visibleItems(this) : [];
+        this.updateItems(items, this);
+    }
+
+    protected init(): void {
+        this.node.classList.add('theia-arduino-toolbar');
+        this.update();
+    }
+
+    protected readonly doCommandIsEnabled = (id: string) => this.commandIsEnabled(id);
+    protected render(): React.ReactNode {
+        return <ArduinoToolbarComponent
+            items={[...this.items.values()]}
+            commands={this.commands}
+            commandIsEnabled={this.doCommandIsEnabled}
+            executeCommand={this.executeCommand}
+        />
+    }
+
+}
--- a/arduino-ide-extension/src/electron-browser/electron-arduino-main-menu-factory.ts
+++ b/arduino-ide-extension/src/electron-browser/electron-arduino-main-menu-factory.ts
@ -0,0 +1,20 @@
+import { injectable } from "inversify";
+import * as electron from 'electron';
+import { ElectronMainMenuFactory } from "@theia/core/lib/electron-browser/menu/electron-main-menu-factory";
+import {
+    isOSX
+} from '@theia/core/lib/common';
+
+@injectable()
+export class ElectronArduinoMainMenuFactory extends ElectronMainMenuFactory {
+    createMenuBar(): Electron.Menu {
+        const menuModel = this.menuProvider.getMenu();
+        const template = this.fillMenuTemplate([], menuModel);
+        if (isOSX) {
+            template.unshift(this.createOSXMenu());
+        }
+        const menu = electron.remote.Menu.buildFromTemplate(template);
+        this._menu = menu;
+        return menu;
+    }
+}
--- a/arduino-ide-extension/src/electron-browser/electron-arduino-menu-contribution.ts
+++ b/arduino-ide-extension/src/electron-browser/electron-arduino-menu-contribution.ts
@ -0,0 +1,33 @@
+import * as electron from 'electron';
+import { injectable } from "inversify";
+import { ElectronMenuContribution } from "@theia/core/lib/electron-browser/menu/electron-menu-contribution";
+import { FrontendApplication } from "@theia/core/lib/browser";
+import { isOSX } from '@theia/core';
+
+@injectable()
+export class ElectronArduinoMenuContribution extends ElectronMenuContribution {
+    onStart(app: FrontendApplication): void {
+        if (this.isProMode()) {
+            const currentWindow = electron.remote.getCurrentWindow();
+            const createdMenuBar = this.factory.createMenuBar();
+
+            if (isOSX) {
+                electron.remote.Menu.setApplicationMenu(createdMenuBar);
+                currentWindow.on('focus', () =>
+                    // OSX: Recreate the menus when changing windows.
+                    // OSX only has one menu bar for all windows, so we need to swap
+                    // between them as the user switch windows.
+                    electron.remote.Menu.setApplicationMenu(this.factory.createMenuBar())
+                );
+
+            } else {
+                // Unix/Windows: Set the per-window menus
+                currentWindow.setMenu(createdMenuBar);
+            }
+        }
+    }
+
+    protected isProMode(): boolean {
+        return false;
+    }
+}
--- a/arduino-ide-extension/src/electron-browser/electron-arduino-menu-module.ts
+++ b/arduino-ide-extension/src/electron-browser/electron-arduino-menu-module.ts
@ -0,0 +1,13 @@
+import { ContainerModule } from "inversify";
+import { ElectronArduinoMainMenuFactory } from "./electron-arduino-main-menu-factory";
+import { ElectronMainMenuFactory } from "@theia/core/lib/electron-browser/menu/electron-main-menu-factory";
+import { ElectronMenuContribution } from "@theia/core/lib/electron-browser/menu/electron-menu-contribution"
+import { ElectronArduinoMenuContribution } from "./electron-arduino-menu-contribution";
+
+export default new ContainerModule((bind, unbind, isBound, rebind) => {
+    bind(ElectronArduinoMainMenuFactory).toSelf().inSingletonScope();
+    rebind(ElectronMainMenuFactory).to(ElectronArduinoMainMenuFactory);
+
+    bind(ElectronArduinoMenuContribution).toSelf().inSingletonScope();
+    rebind(ElectronMenuContribution).to(ElectronArduinoMenuContribution);
+})
--- a/arduino-ide-extension/tsconfig.json
+++ b/arduino-ide-extension/tsconfig.json
@ -8,6 +8,7 @@
    "noUnusedLocals": true,
    "strictNullChecks": true,
    "experimentalDecorators": true,
+    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "moduleResolution": "node",
--- a/package.json
+++ b/package.json
@ -14,7 +14,8 @@
      "prepare": "lerna run prepare",
      "rebuild:browser": "theia rebuild:browser",
      "rebuild:electron": "theia rebuild:electron",
-      "start": "cd arduino-ide-browser && yarn start"
+      "start": "cd arduino-ide-browser && yarn start",
+      "watch": "lerna run watch --parallel"
  },
  "workspaces": [
      "arduino-ide-electron",
--- a/yarn.lock
+++ b/yarn.lock