Toolbar enhancements (#1194)

Author: francescospissu

arduino-ide-extension/arduino-icons.json

@@ -46,6 +46,7 @@ import { ArduinoMenus } from './menu/arduino-menus';
 import { MonitorViewContribution } from './serial/monitor/monitor-view-contribution';
 import { ArduinoToolbar } from './toolbar/arduino-toolbar';
 import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
+import { SerialPlotterContribution } from './serial/plotter/plotter-frontend-contribution';
 
 @injectable()
 export class ArduinoFrontendContribution
@@ -130,6 +131,14 @@ export class ArduinoFrontendContribution
         ArduinoToolbar.is(widget) && widget.side === 'left',
       priority: 7,
     });
+    registry.registerItem({
+      id: 'toggle-serial-plotter',
+      command: SerialPlotterContribution.Commands.OPEN_TOOLBAR.id,
+      tooltip: nls.localize(
+        'arduino/serial/openSerialPlotter',
+        'Serial Plotter'
+      ),
+    });
     registry.registerItem({
       id: 'toggle-serial-monitor',
       command: MonitorViewContribution.TOGGLE_SERIAL_MONITOR_TOOLBAR,
@@ -222,6 +231,26 @@ export class ArduinoFrontendContribution
         description:
           'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.',
       },
+      {
+        id: 'arduino.toolbar.button.secondary.label',
+        defaults: {
+          dark: 'secondaryButton.foreground',
+          light: 'button.foreground',
+          hc: 'activityBar.inactiveForeground',
+        },
+        description:
+          'Foreground color of the toolbar items. Such as Serial Monitor and Serial Plotter',
+      },
+      {
+        id: 'arduino.toolbar.button.secondary.hoverBackground',
+        defaults: {
+          dark: 'secondaryButton.hoverBackground',
+          light: 'button.hoverBackground',
+          hc: 'textLink.foreground',
+        },
+        description:
+          'Background color of the toolbar items when hovering over them, such as "Serial Monitor" and "Serial Plotter"',
+      },
       {
         id: 'arduino.toolbar.toggleBackground',
         defaults: {

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

@@ -1,4 +1,8 @@
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import {
+  inject,
+  injectable,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import {
   BoardsPackage,
   BoardsService,

arduino-ide-extension/src/browser/boards/boards-list-widget.ts

@@ -10,7 +10,6 @@ import {
   Command,
   CommandRegistry,
   SketchContribution,
-  TabBarToolbarRegistry,
 } from './contribution';
 import { MaybePromise, MenuModelRegistry, nls } from '@theia/core/lib/common';
 import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
@@ -112,10 +111,6 @@ export class Debug extends SketchContribution {
     });
   }
 
-  override registerToolbarItems(registry: TabBarToolbarRegistry): void {
-    registry.registerItem(this.debugToolbarItem);
-  }
-
   override registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
       commandId: Debug.Commands.OPTIMIZE_FOR_DEBUG.id,

arduino-ide-extension/src/browser/contributions/debug.ts

@@ -9,7 +9,6 @@ import {
   CommandRegistry,
   MenuModelRegistry,
   KeybindingRegistry,
-  TabBarToolbarRegistry,
 } from './contribution';
 
 @injectable()
@@ -40,15 +39,6 @@ export class NewSketch extends SketchContribution {
     });
   }
 
-  override registerToolbarItems(registry: TabBarToolbarRegistry): void {
-    registry.registerItem({
-      id: NewSketch.Commands.NEW_SKETCH__TOOLBAR.id,
-      command: NewSketch.Commands.NEW_SKETCH__TOOLBAR.id,
-      tooltip: nls.localize('arduino/sketch/new', 'New'),
-      priority: 3,
-    });
-  }
-
   async newSketch(): Promise<void> {
     try {
       const sketch = await this.sketchService.createNewSketch();

arduino-ide-extension/src/browser/contributions/new-sketch.ts

@@ -16,7 +16,6 @@ import {
   CommandRegistry,
   MenuModelRegistry,
   KeybindingRegistry,
-  TabBarToolbarRegistry,
 } from './contribution';
 import { ExamplesService } from '../../common/protocol/examples-service';
 import { BuiltInExamples } from './examples';
@@ -131,15 +130,6 @@ export class OpenSketch extends SketchContribution {
     });
   }
 
-  override registerToolbarItems(registry: TabBarToolbarRegistry): void {
-    registry.registerItem({
-      id: OpenSketch.Commands.OPEN_SKETCH__TOOLBAR.id,
-      command: OpenSketch.Commands.OPEN_SKETCH__TOOLBAR.id,
-      tooltip: nls.localize('vscode/dialogMainService/open', 'Open'),
-      priority: 4,
-    });
-  }
-
   async openSketch(
     toOpen: MaybePromise<Sketch | undefined> = this.selectSketch()
   ): Promise<void> {

arduino-ide-extension/src/browser/contributions/open-sketch.ts

@@ -9,7 +9,6 @@ import {
   CommandRegistry,
   MenuModelRegistry,
   KeybindingRegistry,
-  TabBarToolbarRegistry,
 } from './contribution';
 import { nls } from '@theia/core/lib/common';
 import { CurrentSketch } from '../../common/protocol/sketches-service-client-impl';
@@ -43,15 +42,6 @@ export class SaveSketch extends SketchContribution {
     });
   }
 
-  override registerToolbarItems(registry: TabBarToolbarRegistry): void {
-    registry.registerItem({
-      id: SaveSketch.Commands.SAVE_SKETCH__TOOLBAR.id,
-      command: SaveSketch.Commands.SAVE_SKETCH__TOOLBAR.id,
-      tooltip: nls.localize('vscode/fileCommands/save', 'Save'),
-      priority: 5,
-    });
-  }
-
   async saveSketch(): Promise<void> {
     const sketch = await this.sketchServiceClient.currentSketch();
     if (!CurrentSketch.isValid(sketch)) {

arduino-ide-extension/src/browser/contributions/save-sketch.ts

@@ -276,7 +276,7 @@ export namespace SketchControl {
   export namespace Commands {
     export const OPEN_SKETCH_CONTROL__TOOLBAR: Command = {
       id: 'arduino-open-sketch-control--toolbar',
-      iconClass: 'fa fa-caret-down',
+      iconClass: 'fa fa-arduino-sketch-tabs-menu',
     };
   }
 }

arduino-ide-extension/src/browser/contributions/sketch-control.ts

@@ -46,6 +46,8 @@
     "arduino.output.foreground": "#ffffff",
     "arduino.output.background": "#000000",
     "arduino.toolbar.button.hoverBackground": "#dae3e3",
+    "arduino.toolbar.button.secondary.label": "#dae3e3",
+    "arduino.toolbar.button.secondary.hoverBackground": "#dae3e366",
     "arduino.toolbar.button.background": "#0ca1a6",
     "arduino.toolbar.dropdown.border": "#7fcbcd",
     "arduino.toolbar.dropdown.borderActive": "#0ca1a6",

arduino-ide-extension/src/browser/data/dark.color-theme.json

@@ -46,6 +46,8 @@
     "arduino.output.foreground": "#ffffff",
     "arduino.output.background": "#000000",
     "arduino.toolbar.button.hoverBackground": "#f7f9f9",
+    "arduino.toolbar.button.secondary.label": "#dae3e3",
+    "arduino.toolbar.button.secondary.hoverBackground": "#dae3e366",
     "arduino.toolbar.button.background": "#7fcbcd",
     "arduino.toolbar.dropdown.border": "#dae3e3",
     "arduino.toolbar.dropdown.borderActive": "#7fcbcd",

arduino-ide-extension/src/browser/data/default.color-theme.json

@@ -13,6 +13,7 @@ import { ipcRenderer } from '@theia/electron/shared/electron';
 import { MonitorManagerProxyClient } from '../../../common/protocol';
 import { BoardsServiceProvider } from '../../boards/boards-service-provider';
 import { MonitorModel } from '../../monitor-model';
+import { ArduinoToolbar } from '../../toolbar/arduino-toolbar';
 
 const queryString = require('query-string');
 
@@ -30,6 +31,9 @@ export namespace SerialPlotterContribution {
     export const RESET: Command = {
       id: 'serial-plotter-reset',
     };
+    export const OPEN_TOOLBAR: Command = {
+      id: 'serial-plotter-open-toolbar',
+    };
   }
 }
 
@@ -71,6 +75,14 @@ export class PlotterFrontendContribution extends Contribution {
     registry.registerCommand(SerialPlotterContribution.Commands.RESET, {
       execute: () => this.reset(),
     });
+    registry.registerCommand(
+      { id: SerialPlotterContribution.Commands.OPEN_TOOLBAR.id },
+      {
+        isVisible: (widget) =>
+          ArduinoToolbar.is(widget) && widget.side === 'right',
+        execute: this.startPlotter.bind(this),
+      }
+    );
   }
 
   override registerMenus(menus: MenuModelRegistry): void {

arduino-ide-extension/src/browser/icons/boards-manager.svg

@@ -150,11 +150,11 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
   color: var(--theia-arduino-toolbar-dropdown-label);
   display: flex;
   gap: 10px;
-  height: 24px;
-  margin: 0 6px;
+  height: 28px;
+  margin: 0 4px;
   overflow: hidden;
   padding: 0 10px;
-  width: 230px;
+  width: 210px;
 }
 
 .arduino-boards-toolbar-item--protocol, 

arduino-ide-extension/src/browser/icons/monitor.svg

@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'FontAwesome';
   src:
-    url('fonts/FontAwesome.ttf?ykyvxr') format('truetype'),
-    url('fonts/FontAwesome.woff?ykyvxr') format('woff'),
-    url('fonts/FontAwesome.svg?ykyvxr#FontAwesome') format('svg');
+    url('fonts/FontAwesome.ttf?nk42gd') format('truetype'),
+    url('fonts/FontAwesome.woff?nk42gd') format('woff'),
+    url('fonts/FontAwesome.svg?nk42gd#FontAwesome') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -24,6 +24,21 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.fa-arduino-verify:before {
+  content: "\e90b";
+}
+.fa-arduino-upload:before {
+  content: "\e90c";
+}
+.fa-arduino-monitor:before {
+  content: "\e90d";
+}
+.fa-arduino-sketch-tabs-menu:before {
+  content: "\e90e";
+}
+.fa-arduino-plotter:before {
+  content: "\e90f";
+}
 .fa-fa-check:before {
   content: "\e90a";
 }