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/arduino-frontend-contribution.tsx

@@ -48,6 +48,7 @@ import { BoardsConfig } from './boards/boards-config';
 import { MonitorService } from '../common/protocol/monitor-service';
 import { ConfigService } from '../common/protocol/config-service';
 import { MonitorConnection } from './monitor/monitor-connection';
+import { MonitorViewContribution } from './monitor/monitor-view-contribution';
 
 export namespace ArduinoMenus {
     export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
@@ -200,13 +201,19 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
                 commands={this.commands}
                 boardsServiceClient={this.boardsServiceClient}
                 boardService={this.boardsService} />,
-            isVisible: widget => this.isArduinoToolbar(widget)
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left'
+        });
+        registry.registerItem({
+            id: 'toggle-serial-monitor',
+            command: MonitorViewContribution.OPEN_SERIAL_MONITOR,
+            tooltip: 'Toggle Serial Monitor',
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
         })
     }
 
     registerCommands(registry: CommandRegistry): void {
         registry.registerCommand(ArduinoCommands.VERIFY, {
-            isVisible: widget => this.isArduinoToolbar(widget),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             isEnabled: widget => true,
             execute: async () => {
                 const widget = this.getCurrentWidget();
@@ -234,7 +241,7 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
             }
         });
         registry.registerCommand(ArduinoCommands.UPLOAD, {
-            isVisible: widget => this.isArduinoToolbar(widget),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             isEnabled: widget => true,
             execute: async () => {
                 const widget = this.getCurrentWidget();
@@ -270,8 +277,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
             }
         });
         registry.registerCommand(ArduinoCommands.SHOW_OPEN_CONTEXT_MENU, {
-            isVisible: widget => this.isArduinoToolbar(widget),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
-            isEnabled: widget => this.isArduinoToolbar(widget),
+            isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             execute: async (widget: Widget, target: EventTarget) => {
                 if (this.wsSketchCount) {
                     const el = (target as HTMLElement).parentElement;
@@ -297,8 +304,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
             }
         })
         registry.registerCommand(ArduinoCommands.SAVE_SKETCH, {
-            isEnabled: widget => this.isArduinoToolbar(widget),
+            isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
-            isVisible: widget => this.isArduinoToolbar(widget),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             execute: async (sketch: Sketch) => {
                 registry.executeCommand(CommonCommands.SAVE_ALL.id);
             }
@@ -565,13 +572,6 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         return undefined;
     }
 
-    private isArduinoToolbar(maybeToolbarWidget: any): boolean {
-        if (maybeToolbarWidget instanceof ArduinoToolbar) {
-            return true;
-        }
-        return false;
-    }
-
     private toUri(arg: any): URI | undefined {
         if (arg instanceof URI) {
             return arg;

arduino-ide-extension/src/browser/monitor/monitor-view-contribution.tsx

@@ -6,6 +6,7 @@ import { MenuModelRegistry, Command, CommandRegistry } from "@theia/core";
 import { ArduinoMenus } from "../arduino-frontend-contribution";
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
 import { MonitorModel } from './monitor-model';
+import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
 
 export namespace SerialMonitor {
     export namespace Commands {
@@ -56,14 +57,12 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
     async registerToolbarItems(registry: TabBarToolbarRegistry) {
         registry.registerItem({
             id: 'monitor-autoscroll',
-            tooltip: 'Toggle Autoscroll',
             render: () => this.renderAutoScrollButton(),
             isVisible: widget => widget instanceof MonitorWidget,
             onDidChange: this.model.onChange
         });
         registry.registerItem({
             id: 'monitor-timestamp',
-            tooltip: 'Toggle Timestamp',
             render: () => this.renderTimestampButton(),
             isVisible: widget => widget instanceof MonitorWidget,
             onDidChange: this.model.onChange
@@ -76,7 +75,6 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
     }
 
     registerCommands(commands: CommandRegistry): void {
-        super.registerCommands(commands);
         commands.registerCommand(SerialMonitor.Commands.CLEAR_OUTPUT, {
             isEnabled: widget => widget instanceof MonitorWidget,
             isVisible: widget => widget instanceof MonitorWidget,
@@ -86,12 +84,21 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
                 }
             }
         });
+        if (this.toggleCommand) {
+            commands.registerCommand(this.toggleCommand, {
+                execute: () => this.openView({
+                    toggle: true,
+                    activate: true
+                }),
+                isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
+            });
+        }
     }
 
     protected renderAutoScrollButton(): React.ReactNode {
-
         return <React.Fragment>
             <div
+                title='Toggle Autoscroll'
                 className={`item enabled fa fa-angle-double-down arduino-monitor ${this.model.autoscroll ? 'toggled' : ''}`}
                 onClick={this.toggleAutoScroll}
             ></div>
@@ -104,9 +111,9 @@ export class MonitorViewContribution extends AbstractViewContribution<MonitorWid
     }
 
     protected renderTimestampButton(): React.ReactNode {
-
         return <React.Fragment>
             <div
+                title='Toggle Timestamp'
                 className={`item enabled fa fa-clock-o arduino-monitor ${this.model.timestamp ? 'toggled' : ''}`}
                 onClick={this.toggleTimestamp}
             ></div>

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

@@ -11,6 +11,7 @@
     cursor: text;
 }
 
+#toggle-serial-monitor.arduino-tool-icon:hover,
 #arduino-verify.arduino-tool-icon:hover,
 #arduino-save-file.arduino-tool-icon:hover,
 #arduino-show-open-context-menu.arduino-tool-icon:hover,
@@ -18,6 +19,7 @@
     background-position-y: 60px;
 }
 
+#toggle-serial-monitor.arduino-tool-icon,
 #arduino-verify.arduino-tool-icon,
 #arduino-save-file.arduino-tool-icon,
 #arduino-show-open-context-menu.arduino-tool-icon,
@@ -54,10 +56,29 @@
     background-position-x: 92px;
 }
 
+#toggle-serial-monitor {
+    background: url(../icons/buttons.svg);
+    background-size: 800%;
+    background-position-y: 28px;
+    background-position-x: 28px;
+}
+
 .p-TabBar-toolbar .item.arduino-tool-item {
     margin-left: 3px;
 }
 
+#arduino-toolbar-container {
+    display: flex;
+}
+
+.p-TabBar-toolbar.theia-arduino-toolbar {
+    flex: 1;
+}
+
+#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.right {
+    justify-content: flex-start;
+}
+
 .arduino-tool-item.item.connected-boards {
     opacity: 1;
 }

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,
@@ -44,10 +45,17 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
     }
 
     render(): React.ReactNode {
+        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;
+    }
+}