Added additional toolbar to the right of the toppanel.

Added Toolbar button for toggling serial monitor and tooltips for serial monitor toolbar items.

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

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

@@ -1,26 +1,40 @@
-import { FrontendApplicationContribution, FrontendApplication } from "@theia/core/lib/browser";
+import { FrontendApplicationContribution, FrontendApplication, Widget, Message } 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";
 import { LabelParser } from "@theia/core/lib/browser/label-parser";
 
+export class ArduinoToolbarContainer extends Widget {
+    constructor(protected left: ArduinoToolbar, protected right: ArduinoToolbar) {
+        super();
+        this.id = 'arduino-toolbar-container';
+    }
+
+    onAfterAttach(msg: Message) {
+        Widget.attach(this.left, this.node);
+        Widget.attach(this.right, this.node);
+    }
+}
+
 @injectable()
 export class ArduinoToolbarContribution implements FrontendApplicationContribution {
 
-    protected toolbarWidget: ArduinoToolbar;
+    protected arduinoToolbarContainer: ArduinoToolbarContainer;
 
     constructor(
         @inject(TabBarToolbarRegistry) protected tabBarToolBarRegistry: TabBarToolbarRegistry,
         @inject(CommandRegistry) protected commandRegistry: CommandRegistry,
         @inject(LabelParser) protected labelParser: LabelParser) {
-        this.toolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser);
+        const leftToolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser, 'left');
+        const rightToolbarWidget = new ArduinoToolbar(tabBarToolBarRegistry, commandRegistry, labelParser, 'right');
+        this.arduinoToolbarContainer = new ArduinoToolbarContainer(leftToolbarWidget, rightToolbarWidget);
     }
 
 
     onStart(app: FrontendApplication) {
-        app.shell.addWidget(this.toolbarWidget, {
+        app.shell.addWidget(this.arduinoToolbarContainer, {
             area: 'top'
-        })
+        });
     }
 }

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

@@ -8,6 +8,7 @@ export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item';
 
 export namespace ArduinoToolbarComponent {
     export interface Props {
+        side: 'left' | 'right',
         items: (TabBarToolbarItem | ReactTabBarToolbarItem)[],
         commands: CommandRegistry,
         commandIsEnabled: (id: string) => boolean,
@@ -29,25 +30,32 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
         const command = this.props.commands.getCommand(item.command);
         const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}`
         return <div key={item.id}
-                className={cls} >
-                <div
-                    key={item.id + '-icon'}
-                    id={item.id}
-                    className={`${item.id} arduino-tool-icon`}
-                    onClick={this.props.executeCommand}
-                    onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
-                    onMouseOut={() => this.setState({ tooltip: '' })}
-                    title={item.tooltip}>
-                    {innerText}
-                </div>
+            className={cls} >
+            <div
+                key={item.id + '-icon'}
+                id={item.id}
+                className={`${item.id} arduino-tool-icon`}
+                onClick={this.props.executeCommand}
+                onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
+                onMouseOut={() => this.setState({ tooltip: '' })}
+                title={item.tooltip}>
+                {innerText}
             </div>
+        </div>
     }
 
     render(): React.ReactNode {
-        return <React.Fragment>
-            <div key='arduino-toolbar-tooltip' className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>
-            {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
-        </React.Fragment>;
+        if (this.props.side === 'left') {
+            return <React.Fragment>
+                <div key='arduino-toolbar-tooltip' className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>
+                {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
+            </React.Fragment>;
+        } else {
+            return <React.Fragment>
+                {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
+                <div key='arduino-toolbar-tooltip' className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>
+            </React.Fragment>;
+        }
     }
 }
 
@@ -58,10 +66,11 @@ export class ArduinoToolbar extends ReactWidget {
     constructor(
         protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
         protected readonly commands: CommandRegistry,
-        protected readonly labelParser: LabelParser
+        protected readonly labelParser: LabelParser,
+        public readonly side: 'left' | 'right'
     ) {
         super();
-        this.id = 'arduino-toolbar';
+        this.id = side + '-arduino-toolbar';
         this.addClass(TabBarToolbar.Styles.TAB_BAR_TOOLBAR);
         this.init();
         this.tabBarToolbarRegistry.onDidChange(() => this.updateToolbar());
@@ -83,6 +92,7 @@ export class ArduinoToolbar extends ReactWidget {
 
     protected init(): void {
         this.node.classList.add('theia-arduino-toolbar');
+        this.node.classList.add(this.side);
         this.update();
     }
 
@@ -93,6 +103,7 @@ export class ArduinoToolbar extends ReactWidget {
 
     protected render(): React.ReactNode {
         return <ArduinoToolbarComponent
+            side={this.side}
             items={[...this.items.values()]}
             commands={this.commands}
             commandIsEnabled={this.doCommandIsEnabled}
@@ -107,3 +118,9 @@ export class ArduinoToolbar extends ReactWidget {
         }
     }
 }
+
+export namespace ArduinoToolbar {
+    export function is(maybeToolbarWidget: any): maybeToolbarWidget is ArduinoToolbar {
+        return maybeToolbarWidget instanceof ArduinoToolbar;
+    }
+}