Support toggled state in arduino toolbar items

fix hover state on toolbar items

Improved statemanagement for ToolbarItem and Menus

Disable Upload buttons while a sketch upload is already in progress

toggled state to have override disabled button opacity

doublecheck internal status before verify/upload a sketch

fixes after code review

Author: fstasi

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

@@ -418,6 +418,15 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
                 },
                 description: 'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.'
             },
+            {
+              id: 'arduino.toolbar.toggleBackground',
+              defaults: {
+                  dark: 'editor.selectionBackground',
+                  light: 'editor.selectionBackground',
+                  hc: 'activityBar.inactiveForeground'
+              },
+              description: 'Toggle color of the toolbar items when they are currently toggled (the command is in progress)'
+            },
             {
                 id: 'arduino.output.foreground',
                 defaults: {

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

@@ -22,15 +22,21 @@ export class UploadSketch extends SketchContribution {
     @inject(BoardsServiceProvider)
     protected readonly boardsServiceClientImpl: BoardsServiceProvider;
 
+    protected uploadInProgress = false;
+
     registerCommands(registry: CommandRegistry): void {
         registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH, {
-            execute: () => this.uploadSketch()
+            execute: () => this.uploadSketch(),
+            isEnabled: () => !this.uploadInProgress,
         });
         registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER, {
-            execute: () => this.uploadSketch(true)
+            execute: () => this.uploadSketch(true),
+            isEnabled: () => !this.uploadInProgress,
         });
         registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR, {
             isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            isEnabled: () => !this.uploadInProgress,
+            isToggled: () => this.uploadInProgress,
             execute: () => registry.executeCommand(UploadSketch.Commands.UPLOAD_SKETCH.id)
         });
     }
@@ -69,6 +75,16 @@ export class UploadSketch extends SketchContribution {
     }
 
     async uploadSketch(usingProgrammer: boolean = false): Promise<void> {
+        
+        // even with buttons disabled, better to double check if an upload is already in progress
+        if (this.uploadInProgress) {
+            return;
+        }
+
+        // toggle the toolbar button and menu item state.
+        // uploadInProgress will be set to false whether the upload fails or not
+        this.uploadInProgress = true;
+        
         const sketch = await this.sketchServiceClient.currentSketch();
         if (!sketch) {
             return;
@@ -131,6 +147,7 @@ export class UploadSketch extends SketchContribution {
         } catch (e) {
             this.messageService.error(e.toString());
         } finally {
+            this.uploadInProgress = false;
             if (monitorConfig) {
                 const { board, port } = monitorConfig;
                 try {

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

@@ -18,15 +18,21 @@ export class VerifySketch extends SketchContribution {
     @inject(BoardsServiceProvider)
     protected readonly boardsServiceClientImpl: BoardsServiceProvider;
 
+    protected verifyInProgress = false;
+
     registerCommands(registry: CommandRegistry): void {
         registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH, {
-            execute: () => this.verifySketch()
+            execute: () => this.verifySketch(),
+            isEnabled: () => !this.verifyInProgress,
         });
         registry.registerCommand(VerifySketch.Commands.EXPORT_BINARIES, {
-            execute: () => this.verifySketch(true)
+            execute: () => this.verifySketch(true),
+            isEnabled: () => !this.verifyInProgress,
         });
         registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR, {
             isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            isEnabled: () => !this.verifyInProgress,
+            isToggled: () => this.verifyInProgress,
             execute: () => registry.executeCommand(VerifySketch.Commands.VERIFY_SKETCH.id)
         });
     }
@@ -65,7 +71,17 @@ export class VerifySketch extends SketchContribution {
     }
 
     async verifySketch(exportBinaries?: boolean): Promise<void> {
+
+        // even with buttons disabled, better to double check if a verify is already in progress
+        if (this.verifyInProgress) {
+            return;
+        }
+
+        // toggle the toolbar button and menu item state.
+        // verifyInProgress will be set to false whether the compilation fails or not
+        this.verifyInProgress = true;
         const sketch = await this.sketchServiceClient.currentSketch();
+        
         if (!sketch) {
             return;
         }
@@ -90,6 +106,8 @@ export class VerifySketch extends SketchContribution {
             this.messageService.info('Done compiling.', { timeout: 1000 });
         } catch (e) {
             this.messageService.error(e.toString());
+        } finally {
+            this.verifyInProgress = false;
         }
     }
 

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

@@ -15,15 +15,24 @@
     background: var(--theia-arduino-toolbar-background);
 }
 
-.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
-    background: (--theia-arduino-toolbar-hoverBackground);
+.p-TabBar-toolbar .item.arduino-tool-item:hover > div {
+    background: var(--theia-arduino-toolbar-hoverBackground);
 }
 
 .arduino-verify-sketch--toolbar,
 .arduino-upload-sketch--toolbar {
     border-radius: 12px;
 }
 
+.item.arduino-tool-item.toggled {
+  background-color: unset;
+  opacity: 1;
+}
+
+.item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar {
+  background-color: var(--theia-arduino-toolbar-toggleBackground) !important;
+}
+
 .arduino-tool-icon {
     height: 24px;
     width: 24px;

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

@@ -13,6 +13,7 @@ export namespace ArduinoToolbarComponent {
         commands: CommandRegistry,
         labelParser: LabelParser,
         commandIsEnabled: (id: string) => boolean,
+        commandIsToggled: (id: string) => boolean,
         executeCommand: (e: React.MouseEvent<HTMLElement>) => void
     }
     export interface State {
@@ -39,7 +40,7 @@ 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' : ''}`
+        const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? 'enabled' : ''} ${command && this.props.commandIsToggled(command.id) ? 'toggled' : ''}`
         return <div key={item.id} className={cls} >
             <div className={item.id}>
                 <div
@@ -112,6 +113,10 @@ export class ArduinoToolbar extends ReactWidget {
     protected commandIsEnabled(command: string): boolean {
         return this.commands.isEnabled(command, this);
     }
+    protected readonly doCommandIsToggled = (id: string) => this.commandIsToggled(id);
+    protected commandIsToggled(command: string): boolean {
+      return this.commands.isToggled(command, this);
+  }
 
     protected render(): React.ReactNode {
         return <ArduinoToolbarComponent
@@ -121,6 +126,7 @@ export class ArduinoToolbar extends ReactWidget {
             items={[...this.items.values()]}
             commands={this.commands}
             commandIsEnabled={this.doCommandIsEnabled}
+            commandIsToggled={this.doCommandIsToggled}
             executeCommand={this.executeCommand}
         />
     }