Enhanced boards toolbar item.

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

Author: jbicker

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

@@ -27,6 +27,7 @@ import { ArduinoOpenSketchContextMenu } from './arduino-file-menu';
 import { Sketch, SketchesService } from '../common/protocol/sketches-service';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
 import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution'
+import { BoardsToolBarItem } from './components/boards-toolbar-item';
 
 @injectable()
 export class ArduinoFrontendContribution implements TabBarToolbarContribution, CommandContribution {
@@ -118,15 +119,15 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         });
         registry.registerItem({
             id: ConnectedBoards.TOOLBAR_ID,
-            // render: () => <BoardsToolBarItem
-            //     onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
-            //     onUnknownBoard={this.onUnknownBoard.bind(this)} />,
-            render: () => <ConnectedBoards
-                boardsService={this.boardService}
-                boardsNotificationService={this.boardsNotificationService}
-                quickPickService={this.quickPickService}
+            render: () => <BoardsToolBarItem
                 onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
                 onUnknownBoard={this.onUnknownBoard.bind(this)} />,
+            // render: () => <ConnectedBoards
+            //     boardsService={this.boardService}
+            //     boardsNotificationService={this.boardsNotificationService}
+            //     quickPickService={this.quickPickService}
+            //     onNoBoardsInstalled={this.onNoBoardsInstalled.bind(this)}
+            //     onUnknownBoard={this.onUnknownBoard.bind(this)} />,
             isVisible: widget => this.isArduinoToolbar(widget)
         })
     }

arduino-ide-extension/src/browser/components/connected-boards.tsx

@@ -29,14 +29,14 @@ export class ConnectedBoards extends React.Component<ConnectedBoards.Props, Conn
             content = [ <option key="loading" value="0">{label}</option> ];
         }
 
-        return <div className={`${ARDUINO_TOOLBAR_ITEM_CLASS} item ${ConnectedBoards.Styles.CONNECTED_BOARDS_CLASS}`}>
-            <select disabled={!this.state.boards}
+        return <div key='arduino-connected-boards' className={`${ARDUINO_TOOLBAR_ITEM_CLASS} item ${ConnectedBoards.Styles.CONNECTED_BOARDS_CLASS}`}>
+            <select key='arduino-connected-boards-select' disabled={!this.state.boards}
                 onChange={this.onBoardSelect.bind(this)}
                 value={this.state.selection}>
-                <optgroup label="Attached boards">
+                <optgroup key='arduino-connected-boards-select-opt-group' label="Attached boards">
                     { content }
                 </optgroup>
-                <optgroup label="_________">
+                <optgroup label="_________" key='arduino-connected-boards-select-opt-group2'>
                     { !!this.state.otherBoard && <option value="selected-other" key="selected-other">{this.state.otherBoard.name} (not attached)</option> }
                     <option value="select-other" key="select-other">Select other Board</option>
                 </optgroup>

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

@@ -65,6 +65,7 @@
 }
 
 .arduino-open-boards-button {
+    background: white;
 }
 
 .arduino-boards-toolbar-item {