Ensure default data and sketch dir existence.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>

.gitignore

@@ -6,7 +6,8 @@ build/
 downloads/
 !electron/build/
 src-gen/
-arduino-ide-*/webpack.config.js
+browser-app/webpack.config.js
+electron-app/webpack.config.js
 .DS_Store
 /workspace/static
 # switching from `electron` to `browser` in dev mode.

.gitpod.yml

@@ -8,7 +8,7 @@ ports:
 tasks:
   - init: >
       yarn &&
-      yarn --cwd ./arduino-ide-browser start
+      yarn --cwd ./browser-app start
 
 github:
   prebuilds:

.vscode/launch.json

@@ -7,14 +7,15 @@
         {
             "type": "node",
             "request": "launch",
-            "name": "Launch Node.js Program",
-            "program": "${file}"
+            "name": "Launch Electron Packager",
+            "program": "${workspaceRoot}/electron/packager/index.js",
+            "cwd": "${workspaceFolder}/electron/packager"
         },
         {
             "type": "node",
             "request": "launch",
             "name": "Launch Backend",
-            "program": "${workspaceRoot}/arduino-ide-browser/src-gen/backend/main.js",
+            "program": "${workspaceRoot}/browser-app/src-gen/backend/main.js",
             "args": [
                 "--hostname=0.0.0.0",
                 "--port=3000",
@@ -26,8 +27,8 @@
             },
             "sourceMaps": true,
             "outFiles": [
-                "${workspaceRoot}/arduino-ide-browser/src-gen/backend/*.js",
-                "${workspaceRoot}/arduino-ide-browser/lib/**/*.js",
+                "${workspaceRoot}/browser-app/src-gen/backend/*.js",
+                "${workspaceRoot}/browser-app/lib/**/*.js",
                 "${workspaceRoot}/arduino-ide-extension/*/lib/**/*.js"
             ],
             "smartStep": true,

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

.vscode/tasks.json

@@ -4,9 +4,9 @@
     "version": "2.0.0",
     "tasks": [
         {
-            "label": "Arduino-PoC - Start Browser Example",
+            "label": "Arduino Editor - Start Browser Example",
             "type": "shell",
-            "command": "yarn --cwd ./arduino-ide-browser start",
+            "command": "yarn --cwd ./browser-app start",
             "group": "build",
             "presentation": {
                 "reveal": "always",
@@ -15,7 +15,7 @@
             }
         },
         {
-            "label": "Arduino-PoC - Watch Theia Extension",
+            "label": "Arduino Editor - Watch Theia Extension",
             "type": "shell",
             "command": "yarn --cwd ./arduino-ide-extension watch",
             "group": "build",
@@ -26,9 +26,9 @@
             }
         },
         {
-            "label": "Arduino-PoC - Watch Browser Example",
+            "label": "Arduino Editor - Watch Browser Example",
             "type": "shell",
-            "command": "yarn --cwd ./arduino-ide-browser watch",
+            "command": "yarn --cwd ./browser-app watch",
             "group": "build",
             "presentation": {
                 "reveal": "always",
@@ -37,11 +37,11 @@
             }
         },
         {
-            "label": "Arduino-PoC - Watch All",
+            "label": "Arduino Editor - Watch All",
             "type": "shell",
             "dependsOn": [
-                "Arduino-PoC - Watch Theia Extension",
-                "Arduino-PoC - Watch Browser Example"
+                "Arduino Editor - Watch Theia Extension",
+                "Arduino Editor - Watch Browser Example"
             ]
         }
     ]

README.md

@@ -9,12 +9,15 @@ It's built on top of a [fork of the arduino-cli](https://github.com/typefox/ardu
 
 ## How to try (offline)
 
+### Prerequisites
+You should be able to build Theia locally. The requirements are defined [here](https://github.com/theia-ide/theia/blob/master/doc/Developing.md#prerequisites).
+
 ```
 git clone https://github.com/bcmi-labs/arduino-editor
 cd arduino-editor
 yarn
 yarn rebuild:electron
-yarn --cwd arduino-ide-electron start
+yarn --cwd electron-app start
 ```
 
 If you want to switch back to the browser-based example, execute the following in the repository root
@@ -23,13 +26,13 @@ yarn rebuild:browser
 ```
 Then you can start the browser example again:
 ```
-yarn --cwd arduino-ide-browser start
+yarn --cwd browser-app start
 ```
 
-## Arduino-PoC Electron Application
+## Arduino Pro IDE Electron Application
 The project is built on [Azure DevOps](https://dev.azure.com/typefox/Arduino).
 
-Currently, we provide the Arduino-PoC for the following platforms:
+Currently, we provide the Arduino Pro IDE for the following platforms:
  - Windows,
  - macOS, and
  - Linux.
@@ -41,4 +44,4 @@ and follow the steps from below.
  ![](static/download_01.gif)
  ![](static/download_02.gif)
 
-Click [here](./electron/README.md) for more details on the CI/CD, the GitHub release, and the build process in general.
+Click [here](./electron/README.md) for more details on the CI/CD, the GitHub release, and the build process in general.

arduino-ide-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arduino-ide-extension",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "An extension for Theia building the Arduino IDE",
   "license": "MIT",
   "engines": {
@@ -8,9 +8,11 @@
   },
   "dependencies": {
     "@grpc/grpc-js": "^0.4.0",
+    "@theia/application-package": "next",
     "@theia/core": "next",
     "@theia/editor": "next",
     "@theia/filesystem": "next",
+    "@theia/git": "next",
     "@theia/languages": "next",
     "@theia/markers": "next",
     "@theia/monaco": "next",
@@ -18,15 +20,26 @@
     "@theia/workspace": "next",
     "@theia/navigator": "next",
     "@theia/terminal": "next",
+    "@theia/search-in-workspace": "next",
+    "@theia/cpp": "next",
+    "@types/ps-tree": "^1.1.0",
     "@types/which": "^1.3.1",
+    "@types/react-select": "^3.0.0",
+    "@types/google-protobuf": "^3.7.1",
     "css-element-queries": "^1.2.0",
+    "react-select": "^3.0.4",
     "p-queue": "^5.0.0",
+    "ps-tree": "^1.2.0",
+    "string-natural-compare": "^2.0.3",
+    "tree-kill": "^1.2.1",
+    "upath": "^1.1.2",
     "which": "^1.3.1"
   },
   "scripts": {
-    "prepare": "yarn download-cli && yarn run clean && yarn run build",
+    "prepare": "yarn download-cli && yarn download-ls && yarn run clean && yarn run build",
     "clean": "rimraf lib",
     "download-cli": "node ./scripts/download-cli.js",
+    "download-ls": "node ./scripts/download-ls.js",
     "generate-protocol": "node ./scripts/generate-protocol.js",
     "lint": "tslint -c ./tslint.json --project ./tsconfig.json",
     "build": "tsc && ncp ./src/node/cli-protocol/ ./lib/node/cli-protocol/ && yarn lint",
@@ -34,11 +47,12 @@
   },
   "devDependencies": {
     "decompress": "^4.2.0",
-    "decompress-tarbz2": "^4.1.1",
+    "decompress-targz": "^4.1.1",
     "decompress-unzip": "^4.0.1",
     "download": "^7.1.0",
     "grpc-tools": "^1.7.3",
     "grpc_tools_node_protoc_ts": "^2.5.0",
+    "moment": "^2.24.0",
     "ncp": "^2.0.0",
     "rimraf": "^2.6.1",
     "shelljs": "^0.8.3",

arduino-ide-extension/scripts/download-cli.js

@@ -1,41 +1,27 @@
 // @ts-check
-// The links to the downloads as of today (11.08.) are the followings:
-// - https://downloads.arduino.cc/arduino-cli/nightly/arduino-cli-nightly-latest-${FILE_NAME}
-// - https://downloads.arduino.cc/arduino-cli/arduino-cli-latest-${FILE_NAME}
+// The links to the downloads as of today (02.09.) are the followings:
+// In order to get the latest nightly build for your platform use the following links replacing <DATE> with the current date, using the format YYYYMMDD (i.e for 2019/Aug/06 use 20190806 )
+// Linux 64 bit: https://downloads.arduino.cc/arduino-cli/nightly/arduino-cli_nightly-<DATE>_Linux_64bit.tar.gz
+// Linux ARM 64 bit: https://downloads.arduino.cc/arduino-cli/nightly/arduino-cli_nightly-<DATE>_Linux_ARM64.tar.gz
+// Windows 64 bit: https://downloads.arduino.cc/arduino-cli/nightly/arduino-cli_nightly-<DATE>_Windows_64bit.zip
+// Mac OSX: https://downloads.arduino.cc/arduino-cli/nightly/arduino-cli_nightly-<DATE>_macOS_64bit.tar.gz
+// [...]
+// redirecting to latest generated builds by replacing latest with the latest available build date, using the format YYYYMMDD (i.e for 2019/Aug/06 latest is replaced with 20190806 
 
-(async () => {
+(() => {
 
-    const DEFAULT_VERSION = 'nightly';
+    const DEFAULT_VERSION = 'latest'; // require('moment')().format('YYYYMMDD');
 
     const os = require('os');
-    const fs = require('fs');
     const path = require('path');
     const shell = require('shelljs');
-    const download = require('download');
-    const decompress = require('decompress');
-    const unzip = require('decompress-unzip');
-    const untarbz = require('decompress-tarbz2');
-
-    process.on('unhandledRejection', (reason, _) => {
-        shell.echo(String(reason));
-        shell.exit(1);
-        throw reason;
-    });
-    process.on('uncaughtException', error => {
-        shell.echo(String(error));
-        shell.exit(1);
-        throw error;
-    });
+    const downloader = require('./downloader');
 
     const yargs = require('yargs')
         .option('cli-version', {
             alias: 'cv',
             default: DEFAULT_VERSION,
-            choices: [
-                // 'latest', // TODO: How do we get the source for `latest`. Currently, `latest` is the `0.3.7-alpha.preview`.
-                'nightly'
-            ],
-            describe: `The version of the 'arduino-cli' to download. Defaults to ${DEFAULT_VERSION}.`
+            describe: `The version of the 'arduino-cli' to download with the YYYYMMDD format, or 'latest'. Defaults to ${DEFAULT_VERSION}.`
         })
         .option('force-download', {
             alias: 'fd',
@@ -49,32 +35,16 @@
     const { platform, arch } = process;
 
     const build = path.join(__dirname, '..', 'build');
-    const downloads = path.join(__dirname, '..', 'downloads');
     const cli = path.join(build, `arduino-cli${os.platform() === 'win32' ? '.exe' : ''}`);
 
-    if (fs.existsSync(cli) && !force) {
-        shell.echo(`The 'arduino-cli' already exists at ${cli}. Skipping download.`);
-        shell.exit(0);
-    }
-    if (!fs.existsSync(build)) {
-        if (shell.mkdir('-p', build).code !== 0) {
-            shell.echo('Could not create new directory.');
-            shell.exit(1);
-        }
-    }
-    if (shell.rm('-rf', cli, downloads).code !== 0) {
-        shell.exit(1);
-    }
-
     const suffix = (() => {
         switch (platform) {
-            case 'darwin': return 'macosx.zip';
-            case 'win32': return 'windows.zip';
+            case 'darwin': return 'macOS_64bit.tar.gz';
+            case 'win32': return 'Windows_64bit.zip';
             case 'linux': {
                 switch (arch) {
-                    case 'arm64': return 'linuxarm.tar.bz2';
-                    case 'x32': return 'linux32.tar.bz2';
-                    case 'x64': return 'linux64.tar.bz2';
+                    case 'arm64': return 'Linux_ARM64.tar.gz';
+                    case 'x64': return 'Linux_64bit.tar.gz';
                     default: return undefined;
                 }
             }
@@ -86,32 +56,7 @@
         shell.exit(1);
     }
 
-    const url = `https://downloads.arduino.cc/arduino-cli/${version === 'nightly' ? 'nightly/' : ''}arduino-cli-${version}-latest-${suffix}`;
-    shell.echo(`>>> Downloading 'arduino-cli' from '${url}'...`);
-    const data = await download(url);
-    shell.echo(`<<< Download succeeded.`);
-    shell.echo('>>> Decompressing CLI...');
-    const files = await decompress(data, downloads, {
-        plugins: [
-            unzip(),
-            untarbz()
-        ]
-    });
-    shell.echo('<<< Decompressing succeeded.');
-
-    if (files.length !== 1) {
-        shell.echo('Error ocurred when decompressing the CLI.');
-        shell.exit(1);
-    }
-    if (shell.mv('-f', path.join(downloads, files[0].path), cli).code !== 0) {
-        shell.echo(`Could not move file to ${cli}.`);
-        shell.exit(1);
-    }
-    if (!fs.existsSync(cli)) {
-        shell.echo(`Could not find CLI at ${cli}.`);
-        shell.exit(1);
-    } else {
-        shell.echo('Done.');
-    }
+    const url = `https://downloads.arduino.cc/arduino-cli/nightly/arduino-cli_nightly-${version}_${suffix}`;
+    downloader.download(url, cli, 'arduino-cli', force);
 
 })();

arduino-ide-extension/scripts/download-ls.js

@@ -0,0 +1,72 @@
+// @ts-check
+// The links to the downloads as of today (28.08.2019) are the following:
+// - https://downloads.arduino.cc/arduino-language-server/nightly/arduino-language-server_${SUFFIX}
+// - https://downloads.arduino.cc/arduino-language-server/clangd/clangd_${VERSION}_${SUFFIX}
+
+(() => {
+
+    const DEFAULT_ALS_VERSION = 'nightly';
+    const DEFAULT_CLANGD_VERSION = '8.0.1';
+
+    const os = require('os');
+    const path = require('path');
+    const shell = require('shelljs');
+    const downloader = require('./downloader');
+
+    const yargs = require('yargs')
+        .option('ls-version', {
+            alias: 'lv',
+            default: DEFAULT_ALS_VERSION,
+            choices: ['nightly'],
+            describe: `The version of the 'arduino-language-server' to download. Defaults to ${DEFAULT_ALS_VERSION}.`
+        })
+        .option('clangd-version', {
+            alias: 'cv',
+            default: DEFAULT_CLANGD_VERSION,
+            choices: ['8.0.1'],
+            describe: `The version of 'clangd' to download. Defaults to ${DEFAULT_CLANGD_VERSION}.`
+        })
+        .option('force-download', {
+            alias: 'fd',
+            default: false,
+            describe: `If set, this script force downloads the 'arduino-language-server' even if it already exists on the file system.`
+        })
+        .version(false).parse();
+
+    const alsVersion = yargs['ls-version'];
+    const clangdVersion = yargs['clangd-version']
+    const force = yargs['force-download'];
+    const { platform, arch } = process;
+
+    const build = path.join(__dirname, '..', 'build');
+    const als = path.join(build, `arduino-language-server${os.platform() === 'win32' ? '.exe' : ''}`);
+    const clangd = path.join(build, `clangd${os.platform() === 'win32' ? '.exe' : ''}`);
+
+    let alsSuffix, clangdSuffix;
+    switch (platform) {
+        case 'darwin':
+            alsSuffix = 'Darwin_amd64.zip';
+            clangdSuffix = 'macos.zip';
+            break;
+        case 'win32':
+            alsSuffix = 'Windows_NT_amd64.zip';
+            clangdSuffix = 'windows.zip';
+            break;
+        case 'linux':
+            alsSuffix = 'Linux_amd64.zip';
+            break;
+    }
+    if (!alsSuffix) {
+        shell.echo(`The arduino-language-server is not available for ${platform} ${arch}.`);
+        shell.exit(1);
+    }
+
+    const alsUrl = `https://downloads.arduino.cc/arduino-language-server/${alsVersion === 'nightly' ? 'nightly/arduino-language-server' : 'arduino-language-server_' + alsVersion}_${alsSuffix}`;
+    downloader.download(alsUrl, als, 'arduino-language-server', force);
+
+    if (clangdSuffix) {
+        const clangdUrl = `https://downloads.arduino.cc/arduino-language-server/clangd/clangd_${clangdVersion}_${clangdSuffix}`;
+        downloader.download(clangdUrl, clangd, 'clangd', force);
+    }
+
+})();

arduino-ide-extension/scripts/downloader.js

@@ -0,0 +1,71 @@
+const fs = require('fs');
+const path = require('path');
+const shell = require('shelljs');
+const download = require('download');
+const decompress = require('decompress');
+const unzip = require('decompress-unzip');
+const untargz = require('decompress-targz');
+
+process.on('unhandledRejection', (reason, _) => {
+    shell.echo(String(reason));
+    shell.exit(1);
+    throw reason;
+});
+process.on('uncaughtException', error => {
+    shell.echo(String(error));
+    shell.exit(1);
+    throw error;
+});
+
+exports.download = async (url, targetFile, filePrefix, force) => {
+    const { platform, arch } = process;
+
+    if (fs.existsSync(targetFile) && !force) {
+        shell.echo(`Skipping download because file already exists: ${targetFile}`);
+        return;
+    }
+    if (!fs.existsSync(path.dirname(targetFile))) {
+        if (shell.mkdir('-p', path.dirname(targetFile)).code !== 0) {
+            shell.echo('Could not create new directory.');
+            shell.exit(1);
+        }
+    }
+
+    const downloads = path.join(__dirname, '..', 'downloads');
+    if (shell.rm('-rf', targetFile, downloads).code !== 0) {
+        shell.exit(1);
+    }
+
+    shell.echo(`>>> Downloading from '${url}'...`);
+    const data = await download(url);
+    shell.echo(`<<< Download succeeded.`);
+
+    shell.echo('>>> Decompressing...');
+    const files = await decompress(data, downloads, {
+        plugins: [
+            unzip(),
+            untargz()
+        ]
+    });
+    if (files.length === 0) {
+        shell.echo('Error ocurred while decompressing the archive.');
+        shell.exit(1);
+    }
+    const fileIndex = files.findIndex(f => f.path.startsWith(filePrefix));
+    if (fileIndex === -1) {
+        shell.echo(`The downloaded artifact does not contain any file with prefix ${filePrefix}.`);
+        shell.exit(1);
+    }
+    shell.echo('<<< Decompressing succeeded.');
+
+    if (shell.mv('-f', path.join(downloads, files[fileIndex].path), targetFile).code !== 0) {
+        shell.echo(`Could not move file to target path: ${targetFile}`);
+        shell.exit(1);
+    }
+    if (!fs.existsSync(targetFile)) {
+        shell.echo(`Could not find file: ${targetFile}`);
+        shell.exit(1);
+    } else {
+        shell.echo(`Done: ${targetFile}`);
+    }
+}

arduino-ide-extension/src/browser/arduino-commands.ts

@@ -35,17 +35,11 @@ export namespace ArduinoCommands {
         category: 'File'
     }
 
-    export const REFRESH_BOARDS: Command = {
-        id: "arduino-refresh-attached-boards",
-        label: "Refresh attached boards"
-    }
-
-    export const SELECT_BOARD: Command = {
-        id: "arduino-select-board"
-    }
-
     export const OPEN_BOARDS_DIALOG: Command = {
         id: "arduino-open-boards-dialog"
     }
 
+    export const TOGGLE_ADVANCED_MODE: Command = {
+        id: "arduino-toggle-advanced-mode"
+    }
 }

arduino-ide-extension/src/browser/arduino-file-menu.ts

@@ -1,25 +0,0 @@
-import { injectable, inject } from "inversify";
-import { MenuContribution, MenuModelRegistry, MenuPath } from "@theia/core";
-import { CommonMenus } from "@theia/core/lib/browser";
-import { ArduinoCommands } from "./arduino-commands";
-
-export namespace ArduinoToolbarContextMenu {
-    export const OPEN_SKETCH_PATH: MenuPath = ['arduino-open-sketch-context-menu'];
-    export const OPEN_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '1_open'];
-    export const WS_SKETCHES_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '2_sketches'];
-    export const EXAMPLE_SKETCHES_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '3_examples'];
-}
-
-@injectable()
-export class ArduinoToolbarMenuContribution implements MenuContribution {
-
-    constructor(
-        @inject(MenuModelRegistry) protected readonly menuRegistry: MenuModelRegistry) {
-    }
-
-    registerMenus(registry: MenuModelRegistry) {
-        registry.registerMenuAction([...CommonMenus.FILE, '0_new_sletch'], {
-            commandId: ArduinoCommands.NEW_SKETCH.id
-        })
-    }
-}

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

@@ -5,25 +5,29 @@ import { EditorWidget } from '@theia/editor/lib/browser/editor-widget';
 import { MessageService } from '@theia/core/lib/common/message-service';
 import { CommandContribution, CommandRegistry, Command } from '@theia/core/lib/common/command';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import { BoardsService, Board } from '../common/protocol/boards-service';
+import { BoardsService } from '../common/protocol/boards-service';
 import { ArduinoCommands } from './arduino-commands';
-import { ConnectedBoards } from './components/connected-boards';
 import { CoreService } from '../common/protocol/core-service';
 import { WorkspaceServiceExt } from './workspace-service-ext';
 import { ToolOutputServiceClient } from '../common/protocol/tool-output-service';
 import { QuickPickService } from '@theia/core/lib/common/quick-pick-service';
 import { BoardsListWidgetFrontendContribution } from './boards/boards-widget-frontend-contribution';
-import { BoardsNotificationService } from './boards-notification-service';
+import { BoardsServiceClientImpl } from './boards/boards-service-client-impl';
 import { WorkspaceRootUriAwareCommandHandler, WorkspaceCommands } from '@theia/workspace/lib/browser/workspace-commands';
-import { SelectionService, MenuContribution, MenuModelRegistry, MAIN_MENU_BAR } from '@theia/core';
-import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
-import { SketchFactory } from './sketch-factory';
+import { SelectionService, MenuContribution, MenuModelRegistry, MAIN_MENU_BAR, MenuPath } from '@theia/core';
 import { ArduinoToolbar } from './toolbar/arduino-toolbar';
 import { EditorManager, EditorMainMenu } from '@theia/editor/lib/browser';
-import { ContextMenuRenderer, OpenerService, Widget, StatusBar } from '@theia/core/lib/browser';
+import {
+    ContextMenuRenderer,
+    OpenerService,
+    Widget,
+    StatusBar,
+    ShellLayoutRestorer,
+    StatusBarAlignment,
+    QuickOpenService
+} from '@theia/core/lib/browser';
 import { OpenFileDialogProps, FileDialogService } from '@theia/filesystem/lib/browser/file-dialog';
 import { FileSystem, FileStat } from '@theia/filesystem/lib/common';
-import { ArduinoToolbarContextMenu } from './arduino-file-menu';
 import { Sketch, SketchesService } from '../common/protocol/sketches-service';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
 import { CommonCommands, CommonMenus } from '@theia/core/lib/browser/common-frontend-contribution';
@@ -32,14 +36,35 @@ import { FileDownloadCommands } from '@theia/filesystem/lib/browser/download/fil
 import { MonacoMenus } from '@theia/monaco/lib/browser/monaco-menu';
 import { TerminalMenus } from '@theia/terminal/lib/browser/terminal-frontend-contribution';
 import { MaybePromise } from '@theia/core/lib/common/types';
-import { SelectBoardDialog } from './boards/select-board-dialog';
+import { BoardsConfigDialog } from './boards/boards-config-dialog';
 import { BoardsToolBarItem } from './boards/boards-toolbar-item';
+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';
+import { ArduinoWorkspaceService } from './arduino-workspace-service';
 
 export namespace ArduinoMenus {
     export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
     export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
 }
 
+export namespace ArduinoToolbarContextMenu {
+    export const OPEN_SKETCH_PATH: MenuPath = ['arduino-open-sketch-context-menu'];
+    export const OPEN_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '1_open'];
+    export const WS_SKETCHES_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '2_sketches'];
+    export const EXAMPLE_SKETCHES_GROUP: MenuPath = [...OPEN_SKETCH_PATH, '3_examples'];
+}
+
+export namespace ArduinoAdvancedMode {
+    export const LS_ID = 'arduino-advanced-mode';
+    export const TOGGLED: boolean = (() => {
+        const advancedModeStr = window.localStorage.getItem(LS_ID);
+        return advancedModeStr === 'true';
+    })();
+}
+
 @injectable()
 export class ArduinoFrontendContribution implements TabBarToolbarContribution, CommandContribution, MenuContribution {
 
@@ -47,11 +72,14 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
     protected readonly messageService: MessageService;
 
     @inject(BoardsService)
-    protected readonly boardService: BoardsService;
+    protected readonly boardsService: BoardsService;
 
     @inject(CoreService)
     protected readonly coreService: CoreService;
 
+    @inject(MonitorService)
+    protected readonly monitorService: MonitorService;
+
     @inject(WorkspaceServiceExt)
     protected readonly workspaceServiceExt: WorkspaceServiceExt;
 
@@ -64,15 +92,12 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
     @inject(BoardsListWidgetFrontendContribution)
     protected readonly boardsListWidgetFrontendContribution: BoardsListWidgetFrontendContribution;
 
-    @inject(BoardsNotificationService)
-    protected readonly boardsNotificationService: BoardsNotificationService;
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
 
     @inject(SelectionService)
     protected readonly selectionService: SelectionService;
 
-    @inject(SketchFactory)
-    protected readonly sketchFactory: SketchFactory;
-
     @inject(EditorManager)
     protected readonly editorManager: EditorManager;
 
@@ -92,10 +117,10 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
     protected readonly windowService: WindowService;
 
     @inject(SketchesService)
-    protected readonly sketches: SketchesService;
+    protected readonly sketchService: SketchesService;
 
-    @inject(SelectBoardDialog)
-    protected readonly selectBoardsDialog: SelectBoardDialog;
+    @inject(BoardsConfigDialog)
+    protected readonly boardsConfigDialog: BoardsConfigDialog;
 
     @inject(MenuModelRegistry)
     protected readonly menuRegistry: MenuModelRegistry;
@@ -106,65 +131,96 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
     @inject(StatusBar)
     protected readonly statusBar: StatusBar;
 
+    @inject(ShellLayoutRestorer)
+    protected readonly layoutRestorer: ShellLayoutRestorer;
+
+    @inject(QuickOpenService)
+    protected readonly quickOpenService: QuickOpenService;
+
+    @inject(ArduinoWorkspaceService)
+    protected readonly workspaceService: ArduinoWorkspaceService;
+
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
+
+    @inject(MonitorConnection)
+    protected readonly monitorConnection: MonitorConnection;
+
     protected boardsToolbarItem: BoardsToolBarItem | null;
     protected wsSketchCount: number = 0;
 
-    constructor(@inject(WorkspaceService) protected readonly workspaceService: WorkspaceService) {
-        this.workspaceService.onWorkspaceChanged(() => {
-            if (this.workspaceService.workspace) {
-                this.registerSketchesInMenu(this.menuRegistry);
-            }
-        })
-    }
-
     @postConstruct()
     protected async init(): Promise<void> {
         // This is a hack. Otherwise, the backend services won't bind.
         await this.workspaceServiceExt.roots();
+
+        const updateStatusBar = (config: BoardsConfig.Config) => {
+            this.statusBar.setElement('arduino-selected-board', {
+                alignment: StatusBarAlignment.RIGHT,
+                text: BoardsConfig.Config.toString(config)
+            });
+        }
+        this.boardsServiceClient.onBoardsConfigChanged(updateStatusBar);
+        updateStatusBar(this.boardsServiceClient.boardsConfig);
+
+        this.registerSketchesInMenu(this.menuRegistry);
+
+        Promise.all([
+            this.boardsService.getAttachedBoards(),
+            this.boardsService.getAvailablePorts()
+        ]).then(([{ boards }, { ports }]) => this.boardsServiceClient.tryReconnect(boards, ports));
     }
 
     registerToolbarItems(registry: TabBarToolbarRegistry): void {
         registry.registerItem({
             id: ArduinoCommands.VERIFY.id,
             command: ArduinoCommands.VERIFY.id,
-            tooltip: 'Verify',
-            text: '$(check)'
+            tooltip: 'Verify'
         });
         registry.registerItem({
             id: ArduinoCommands.UPLOAD.id,
             command: ArduinoCommands.UPLOAD.id,
-            tooltip: 'Upload',
-            text: '$(arrow-right)'
+            tooltip: 'Upload'
         });
         registry.registerItem({
             id: ArduinoCommands.SHOW_OPEN_CONTEXT_MENU.id,
             command: ArduinoCommands.SHOW_OPEN_CONTEXT_MENU.id,
-            tooltip: 'Open',
-            text: '$(arrow-up)'
+            tooltip: 'Open'
         });
         registry.registerItem({
             id: ArduinoCommands.SAVE_SKETCH.id,
             command: ArduinoCommands.SAVE_SKETCH.id,
-            tooltip: 'Save',
-            text: '$(arrow-down)'
+            tooltip: 'Save'
         });
         registry.registerItem({
-            id: ConnectedBoards.TOOLBAR_ID,
+            id: BoardsToolBarItem.TOOLBAR_ID,
             render: () => <BoardsToolBarItem
                 key='boardsToolbarItem'
                 ref={ref => this.boardsToolbarItem = ref}
                 commands={this.commands}
-                statusBar={this.statusBar}
-                contextMenuRenderer={this.contextMenuRenderer}
-                boardsNotificationService={this.boardsNotificationService}
-                boardService={this.boardService} />,
-            isVisible: widget => this.isArduinoToolbar(widget)
-        })
+                boardsServiceClient={this.boardsServiceClient}
+                boardService={this.boardsService} />,
+            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'
+        });
+
+        registry.registerItem({
+            id: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+            command: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+            tooltip: 'Toggle Advanced Mode',
+            text: (ArduinoAdvancedMode.TOGGLED ? '$(toggle-on)' : '$(toggle-off)'),
+            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();
@@ -178,14 +234,21 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
                 }
 
                 try {
-                    await this.coreService.compile({ uri: uri.toString() });
+                    const { boardsConfig } = this.boardsServiceClient;
+                    if (!boardsConfig || !boardsConfig.selectedBoard) {
+                        throw new Error('No boards selected. Please select a board.');
+                    }
+                    if (!boardsConfig.selectedBoard.fqbn) {
+                        throw new Error(`No core is installed for ${boardsConfig.selectedBoard.name}. Please install the board.`);
+                    }
+                    await this.coreService.compile({ uri: uri.toString(), board: boardsConfig.selectedBoard });
                 } catch (e) {
                     await this.messageService.error(e.toString());
                 }
             }
         });
         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();
@@ -198,16 +261,31 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
                     return;
                 }
 
+                const connectionConfig = this.monitorConnection.connectionConfig;
+                await this.monitorConnection.disconnect();
+
                 try {
-                    await this.coreService.upload({ uri: uri.toString() });
+                    const { boardsConfig } = this.boardsServiceClient;
+                    if (!boardsConfig || !boardsConfig.selectedBoard) {
+                        throw new Error('No boards selected. Please select a board.');
+                    }
+                    const { selectedPort } = boardsConfig;
+                    if (!selectedPort) {
+                        throw new Error('No ports selected. Please select a port.');
+                    }
+                    await this.coreService.upload({ uri: uri.toString(), board: boardsConfig.selectedBoard, port: selectedPort.address });
                 } catch (e) {
                     await this.messageService.error(e.toString());
+                } finally {
+                    if (connectionConfig) {
+                        await this.monitorConnection.connect(connectionConfig);
+                    }
                 }
             }
         });
         registry.registerCommand(ArduinoCommands.SHOW_OPEN_CONTEXT_MENU, {
-            isVisible: widget => this.isArduinoToolbar(widget),
-            isEnabled: widget => this.isArduinoToolbar(widget),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             execute: async (widget: Widget, target: EventTarget) => {
                 if (this.wsSketchCount) {
                     const el = (target as HTMLElement).parentElement;
@@ -229,12 +307,12 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         registry.registerCommand(ArduinoCommands.OPEN_SKETCH, {
             isEnabled: () => true,
             execute: async (sketch: Sketch) => {
-                this.openSketchFilesInNewWindow(sketch.uri);
+                this.workspaceService.open(new URI(sketch.uri));
             }
         })
         registry.registerCommand(ArduinoCommands.SAVE_SKETCH, {
-            isEnabled: widget => this.isArduinoToolbar(widget),
-            isVisible: widget => this.isArduinoToolbar(widget),
+            isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
             execute: async (sketch: Sketch) => {
                 registry.executeCommand(CommonCommands.SAVE_ALL.id);
             }
@@ -247,58 +325,64 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
                         uri = uri.withPath(uri.path.dir.dir);
                     }
 
-                    await this.sketchFactory.createNewSketch(uri);
+                    const sketch = await this.sketchService.createNewSketch(uri.toString());
+                    this.workspaceService.open(new URI(sketch.uri));
                 } catch (e) {
                     await this.messageService.error(e.toString());
                 }
             }
         }));
-        registry.registerCommand(ArduinoCommands.REFRESH_BOARDS, {
-            isEnabled: () => true,
-            execute: () => this.boardsNotificationService.notifyBoardsInstalled()
-        });
-        registry.registerCommand(ArduinoCommands.SELECT_BOARD, {
-            isEnabled: () => true,
-            execute: async (board: Board) => {
-                this.selectBoard(board);
-            }
-        })
         registry.registerCommand(ArduinoCommands.OPEN_BOARDS_DIALOG, {
             isEnabled: () => true,
             execute: async () => {
-                const boardAndPort = await this.selectBoardsDialog.open();
-                if (boardAndPort && boardAndPort.board) {
-                    this.selectBoard(boardAndPort.board);
+                const boardsConfig = await this.boardsConfigDialog.open();
+                if (boardsConfig) {
+                    this.boardsServiceClient.boardsConfig = boardsConfig;
                 }
             }
         })
+        registry.registerCommand(ArduinoCommands.TOGGLE_ADVANCED_MODE, {
+            execute: () => {
+                const oldModeState = ArduinoAdvancedMode.TOGGLED;
+                window.localStorage.setItem(ArduinoAdvancedMode.LS_ID, oldModeState ? 'false' : 'true');
+                registry.executeCommand('reset.layout');
+            },
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right',
+            isToggled: () => ArduinoAdvancedMode.TOGGLED
+        })
     }
 
-    protected async selectBoard(board: Board) {
-        await this.boardService.selectBoard(board);
-        if (this.boardsToolbarItem) {
-            this.boardsToolbarItem.setSelectedBoard(board);
-        }
-    }
-    
     registerMenus(registry: MenuModelRegistry) {
-        registry.unregisterMenuAction(FileSystemCommands.UPLOAD);
-        registry.unregisterMenuAction(FileDownloadCommands.DOWNLOAD);
+        if (!ArduinoAdvancedMode.TOGGLED) {
+            // If are not in pro-mode, we have to disable the context menu for the tabs.
+            // Such as `Close`, `Close All`, etc.
+            for (const command of [
+                CommonCommands.CLOSE_TAB,
+                CommonCommands.CLOSE_OTHER_TABS,
+                CommonCommands.CLOSE_RIGHT_TABS,
+                CommonCommands.CLOSE_ALL_TABS,
+                CommonCommands.COLLAPSE_PANEL,
+                CommonCommands.TOGGLE_MAXIMIZED
+            ]) {
+                registry.unregisterMenuAction(command);
+            }
 
-        registry.unregisterMenuAction(WorkspaceCommands.NEW_FILE);
-        registry.unregisterMenuAction(WorkspaceCommands.NEW_FOLDER);
-        
-        registry.unregisterMenuAction(WorkspaceCommands.OPEN_FOLDER);
-        registry.unregisterMenuAction(WorkspaceCommands.OPEN_WORKSPACE);
-        registry.unregisterMenuAction(WorkspaceCommands.OPEN_RECENT_WORKSPACE);
-        registry.unregisterMenuAction(WorkspaceCommands.SAVE_WORKSPACE_AS);
-        registry.unregisterMenuAction(WorkspaceCommands.CLOSE);
+            registry.unregisterMenuAction(FileSystemCommands.UPLOAD);
+            registry.unregisterMenuAction(FileDownloadCommands.DOWNLOAD);
 
-        registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(MonacoMenus.SELECTION));
-        registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(EditorMainMenu.GO));
-        registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(TerminalMenus.TERMINAL));
-        registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(CommonMenus.VIEW));
-        registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(CommonMenus.HELP));
+            registry.unregisterMenuAction(WorkspaceCommands.NEW_FOLDER);
+
+            registry.unregisterMenuAction(WorkspaceCommands.OPEN_FOLDER);
+            registry.unregisterMenuAction(WorkspaceCommands.OPEN_WORKSPACE);
+            registry.unregisterMenuAction(WorkspaceCommands.OPEN_RECENT_WORKSPACE);
+            registry.unregisterMenuAction(WorkspaceCommands.SAVE_WORKSPACE_AS);
+            registry.unregisterMenuAction(WorkspaceCommands.CLOSE);
+
+            registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(MonacoMenus.SELECTION));
+            registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(EditorMainMenu.GO));
+            registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(TerminalMenus.TERMINAL));
+            registry.getMenu(MAIN_MENU_BAR).removeNode(this.getMenuId(CommonMenus.VIEW));
+        }
 
         registry.registerSubmenu(ArduinoMenus.SKETCH, 'Sketch');
         registry.registerMenuAction(ArduinoMenus.SKETCH, {
@@ -317,6 +401,15 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         });
 
         registry.registerSubmenu(ArduinoMenus.TOOLS, 'Tools');
+
+        registry.registerMenuAction(CommonMenus.HELP, {
+            commandId: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+            label: 'Advanced Mode'
+        });
+
+        registry.registerMenuAction([...CommonMenus.FILE, '0_new_sketch'], {
+            commandId: ArduinoCommands.NEW_SKETCH.id
+        });
     }
 
     protected getMenuId(menuPath: string[]): string {
@@ -325,8 +418,8 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         return menuId;
     }
 
-    protected registerSketchesInMenu(registry: MenuModelRegistry) {
-        this.getWorkspaceSketches().then(sketches => {
+    protected async registerSketchesInMenu(registry: MenuModelRegistry): Promise<void> {
+        this.sketchService.getSketches().then(sketches => {
             this.wsSketchCount = sketches.length;
             sketches.forEach(sketch => {
                 const command: Command = {
@@ -344,25 +437,12 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         })
     }
 
-    protected async getWorkspaceSketches(): Promise<Sketch[]> {
-        const sketches = this.sketches.getSketches(this.workspaceService.workspace);
-        return sketches;
-    }
-
-    protected async openSketchFilesInNewWindow(uri: string) {
-        const location = new URL(window.location.href);
-        location.searchParams.set('sketch', uri);
-        this.windowService.openNewWindow(location.toString());
-    }
-
-    async openSketchFiles(uri: string) {
-        const fileStat = await this.fileSystem.getFileStat(uri);
-        if (fileStat) {
-            const uris = await this.sketches.getSketchFiles(fileStat);
+    async openSketchFiles(uri: string): Promise<void> {
+        this.sketchService.getSketchFiles(uri).then(uris => {
             for (const uri of uris) {
                 this.editorManager.open(new URI(uri));
             }
-        }
+        });
     }
 
     /**
@@ -386,7 +466,7 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
             if (destinationFile && !destinationFile.isDirectory) {
                 const message = await this.validate(destinationFile);
                 if (!message) {
-                    await this.openSketchFilesInNewWindow(destinationFileUri.toString());
+                    await this.workspaceService.open(destinationFileUri);
                     return destinationFileUri;
                 } else {
                     this.messageService.warn(message);
@@ -423,32 +503,6 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         return undefined;
     }
 
-    // private async onNoBoardsInstalled() {
-    //     const action = await this.messageService.info("You have no boards installed. Use the boards manager to install one.", "Open Boards Manager");
-    //     if (!action) {
-    //         return;
-    //     }
-
-    //     this.boardsListWidgetFrontendContribution.openView({ reveal: true });
-    // }
-
-    // private async onUnknownBoard() {
-    //     const action = await this.messageService.warn("There's a board connected for which you need to install software." +
-    //         " If this were not a PoC we would offer you the right package now.", "Open Boards Manager");
-    //     if (!action) {
-    //         return;
-    //     }
-
-    //     this.boardsListWidgetFrontendContribution.openView({ reveal: true });
-    // }
-
-    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/arduino-frontend-module.ts

@@ -7,13 +7,14 @@ import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar
 import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging/ws-connection-provider';
 import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser/frontend-application'
 import { LanguageGrammarDefinitionContribution } from '@theia/monaco/lib/browser/textmate';
+import { LanguageClientContribution } from '@theia/languages/lib/browser';
+import { ArduinoLanguageClientContribution } from './language/arduino-language-client-contribution';
 import { LibraryListWidget } from './library/library-list-widget';
-import { ArduinoFrontendContribution } from './arduino-frontend-contribution';
+import { ArduinoFrontendContribution, ArduinoAdvancedMode } from './arduino-frontend-contribution';
 import { ArduinoLanguageGrammarContribution } from './language/arduino-language-grammar-contribution';
 import { LibraryService, LibraryServicePath } from '../common/protocol/library-service';
-import { BoardsService, BoardsServicePath } from '../common/protocol/boards-service';
+import { BoardsService, BoardsServicePath, BoardsServiceClient } from '../common/protocol/boards-service';
 import { SketchesService, SketchesServicePath } from '../common/protocol/sketches-service';
-import { LibraryListWidgetFrontendContribution } from './library/list-widget-frontend-contribution';
 import { CoreService, CoreServicePath } from '../common/protocol/core-service';
 import { BoardsListWidget } from './boards/boards-list-widget';
 import { BoardsListWidgetFrontendContribution } from './boards/boards-widget-frontend-contribution';
@@ -22,14 +23,12 @@ import { WorkspaceServiceExtImpl } from './workspace-service-ext-impl';
 import { ToolOutputServiceClient } from '../common/protocol/tool-output-service';
 import { ToolOutputService } from '../common/protocol/tool-output-service';
 import { ToolOutputServiceClientImpl } from './tool-output/client-service-impl';
-import { BoardsNotificationService } from './boards-notification-service';
+import { BoardsServiceClientImpl } from './boards/boards-service-client-impl';
 import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
-import { AWorkspaceService } from './arduino-workspace-service';
+import { ArduinoWorkspaceService } from './arduino-workspace-service';
 import { ThemeService } from '@theia/core/lib/browser/theming';
 import { ArduinoTheme } from './arduino-theme';
-import { ArduinoToolbarMenuContribution } from './arduino-file-menu';
 import { MenuContribution } from '@theia/core';
-import { SketchFactory } from './sketch-factory';
 import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
 import { SilentOutlineViewContribution } from './customization/silent-outline-contribution';
 import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
@@ -40,16 +39,37 @@ import { ArduinoToolbarContribution } from './toolbar/arduino-toolbar-contributi
 import { OutputToolbarContribution } from '@theia/output/lib/browser/output-toolbar-contribution';
 import { ArduinoOutputToolContribution } from './customization/silent-output-tool-contribution';
 import { EditorContribution } from '@theia/editor/lib/browser/editor-contribution';
-import { CustomEditorContribution } from './customization/custom-editor-contribution';
+import { ArduinoEditorContribution } from './customization/arduino-editor-contribution';
 import { MonacoStatusBarContribution } from '@theia/monaco/lib/browser/monaco-status-bar-contribution';
-import { SilentMonacoStatusBarContribution } from './customization/silent-monaco-status-bar-contribution';
+import { ArduinoMonacoStatusBarContribution } from './customization/arduino-monaco-status-bar-contribution';
 import { ApplicationShell } from '@theia/core/lib/browser';
-import { CustomApplicationShell } from './customization/custom-application-shell';
-import { CustomFrontendApplication } from './customization/custom-frontend-application';
-import { EditorWidgetFactory } from '@theia/editor/lib/browser/editor-widget-factory';
-import { CustomEditorWidgetFactory } from './customization/custom-editor-widget-factory';
-import { SelectBoardDialog, SelectBoardDialogProps } from './boards/select-board-dialog';
-import { SelectBoardDialogWidget } from './boards/select-board-dialog-widget';
+import { ArduinoApplicationShell } from './customization/arduino-application-shell';
+import { ArduinoFrontendApplication } from './customization/arduino-frontend-application';
+import { BoardsConfigDialog, BoardsConfigDialogProps } from './boards/boards-config-dialog';
+import { BoardsConfigDialogWidget } from './boards/boards-config-dialog-widget';
+import { ScmContribution } from '@theia/scm/lib/browser/scm-contribution';
+import { SilentScmContribution } from './customization/silent-scm-contribution';
+import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
+import { SilentSearchInWorkspaceContribution } from './customization/silent-search-in-workspace-contribution';
+import { LibraryListWidgetFrontendContribution } from './library/library-widget-frontend-contribution';
+import { LibraryItemRenderer } from './library/library-item-renderer';
+import { BoardItemRenderer } from './boards/boards-item-renderer';
+import { MonitorServiceClientImpl } from './monitor/monitor-service-client-impl';
+import { MonitorServicePath, MonitorService, MonitorServiceClient } from '../common/protocol/monitor-service';
+import { ConfigService, ConfigServicePath } from '../common/protocol/config-service';
+import { MonitorWidget } from './monitor/monitor-widget';
+import { MonitorViewContribution } from './monitor/monitor-view-contribution';
+import { MonitorConnection } from './monitor/monitor-connection';
+import { MonitorModel } from './monitor/monitor-model';
+import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
+import { ArduinoMonacoEditorProvider } from './editor/arduino-monaco-editor-provider';
+import { TabBarDecoratorService } from '@theia/core/lib/browser/shell/tab-bar-decorator';
+import { ArduinoTabBarDecoratorService } from './shell/arduino-tab-bar-decorator';
+import { ProblemManager } from '@theia/markers/lib/browser';
+import { ArduinoProblemManager } from './markers/arduino-problem-manager';
+import { BoardsAutoInstaller } from './boards/boards-auto-installer';
+import { AboutDialog } from '@theia/core/lib/browser/about-dialog';
+import { ArduinoAboutDialog } from './customization/arduino-about-dialog';
 const ElementQueries = require('css-element-queries/src/ElementQueries');
 
 export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
@@ -62,13 +82,13 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
     bind(MenuContribution).toService(ArduinoFrontendContribution);
     bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
     bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
-    bind(MenuContribution).to(ArduinoToolbarMenuContribution).inSingletonScope();
 
     bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
     bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
 
-    // `ino` TextMate grammar
+    // `ino` TextMate grammar and language client
     bind(LanguageGrammarDefinitionContribution).to(ArduinoLanguageGrammarContribution).inSingletonScope();
+    bind(LanguageClientContribution).to(ArduinoLanguageClientContribution).inSingletonScope();
 
     // Library service
     bind(LibraryService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, LibraryServicePath)).inSingletonScope();
@@ -81,16 +101,31 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
         createWidget: () => context.container.get(LibraryListWidget)
     }));
     bind(FrontendApplicationContribution).toService(LibraryListWidgetFrontendContribution);
+    bind(LibraryItemRenderer).toSelf().inSingletonScope();
 
     // Sketch list service
     bind(SketchesService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, SketchesServicePath)).inSingletonScope();
 
-    // Boards Notification service for updating boards list
-    // TODO (post-PoC): move this to boards service/backend
-    bind(BoardsNotificationService).toSelf().inSingletonScope();
+    // Config service
+    bind(ConfigService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, ConfigServicePath)).inSingletonScope();
 
     // Boards service
-    bind(BoardsService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, BoardsServicePath)).inSingletonScope();
+    bind(BoardsService).toDynamicValue(context => {
+        const connection = context.container.get(WebSocketConnectionProvider);
+        const client = context.container.get(BoardsServiceClientImpl);
+        return connection.createProxy(BoardsServicePath, client);
+    }).inSingletonScope();
+    // Boards service client to receive and delegate notifications from the backend.
+    bind(BoardsServiceClientImpl).toSelf().inSingletonScope();
+    bind(BoardsServiceClient).toDynamicValue(context => {
+        const client = context.container.get(BoardsServiceClientImpl);
+        WebSocketConnectionProvider.createProxy(context.container, BoardsServicePath, client);
+        return client;
+    }).inSingletonScope();
+
+    // boards auto-installer
+    bind(BoardsAutoInstaller).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(BoardsAutoInstaller);
 
     // Boards list widget
     bind(BoardsListWidget).toSelf();
@@ -100,11 +135,12 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
         createWidget: () => context.container.get(BoardsListWidget)
     }));
     bind(FrontendApplicationContribution).toService(BoardsListWidgetFrontendContribution);
+    bind(BoardItemRenderer).toSelf().inSingletonScope();
 
     // Board select dialog
-    bind(SelectBoardDialogWidget).toSelf().inSingletonScope();
-    bind(SelectBoardDialog).toSelf().inSingletonScope();
-    bind(SelectBoardDialogProps).toConstantValue({
+    bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
+    bind(BoardsConfigDialog).toSelf().inSingletonScope();
+    bind(BoardsConfigDialogProps).toConstantValue({
         title: 'Select Board'
     })
 
@@ -132,30 +168,80 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
         return workspaceServiceExt;
     });
 
-    bind(AWorkspaceService).toSelf().inSingletonScope();
-    rebind(WorkspaceService).to(AWorkspaceService).inSingletonScope();
-    bind(SketchFactory).toSelf().inSingletonScope();
+    // Serial Monitor
+    bind(MonitorModel).toSelf().inSingletonScope();
+    bind(MonitorWidget).toSelf();
+    bindViewContribution(bind, MonitorViewContribution);
+    bind(TabBarToolbarContribution).toService(MonitorViewContribution);
+    bind(WidgetFactory).toDynamicValue(context => ({
+        id: MonitorWidget.ID,
+        createWidget: () => context.container.get(MonitorWidget)
+    }));
+    // Frontend binding for the monitor service
+    bind(MonitorService).toDynamicValue(context => {
+        const connection = context.container.get(WebSocketConnectionProvider);
+        const client = context.container.get(MonitorServiceClientImpl);
+        return connection.createProxy(MonitorServicePath, client);
+    }).inSingletonScope();
+    bind(MonitorConnection).toSelf().inSingletonScope();
+    // Monitor service client to receive and delegate notifications from the backend.
+    bind(MonitorServiceClientImpl).toSelf().inSingletonScope();
+    bind(MonitorServiceClient).toDynamicValue(context => {
+        const client = context.container.get(MonitorServiceClientImpl);
+        WebSocketConnectionProvider.createProxy(context.container, MonitorServicePath, client);
+        return client;
+    }).inSingletonScope();
+
+    bind(ArduinoWorkspaceService).toSelf().inSingletonScope();
+    rebind(WorkspaceService).to(ArduinoWorkspaceService).inSingletonScope();
 
     const themeService = ThemeService.get();
     themeService.register(...ArduinoTheme.themes);
 
-    // customizing default theia
-    unbind(OutlineViewContribution);
-    bind(OutlineViewContribution).to(SilentOutlineViewContribution).inSingletonScope();
-    unbind(ProblemContribution);
-    bind(ProblemContribution).to(SilentProblemContribution).inSingletonScope();
-    unbind(FileNavigatorContribution);
-    bind(FileNavigatorContribution).to(SilentNavigatorContribution).inSingletonScope();
-    unbind(OutputToolbarContribution);
-    bind(OutputToolbarContribution).to(ArduinoOutputToolContribution).inSingletonScope();
-    unbind(EditorContribution);
-    bind(EditorContribution).to(CustomEditorContribution).inSingletonScope();
-    unbind(MonacoStatusBarContribution);
-    bind(MonacoStatusBarContribution).to(SilentMonacoStatusBarContribution).inSingletonScope();
-    unbind(ApplicationShell);
-    bind(ApplicationShell).to(CustomApplicationShell).inSingletonScope();
+    // Customizing default Theia layout
+    if (!ArduinoAdvancedMode.TOGGLED) {
+        unbind(OutlineViewContribution);
+        bind(OutlineViewContribution).to(SilentOutlineViewContribution).inSingletonScope();
+        unbind(ProblemContribution);
+        bind(ProblemContribution).to(SilentProblemContribution).inSingletonScope();
+        unbind(FileNavigatorContribution);
+        bind(FileNavigatorContribution).to(SilentNavigatorContribution).inSingletonScope();
+        unbind(OutputToolbarContribution);
+        bind(OutputToolbarContribution).to(ArduinoOutputToolContribution).inSingletonScope();
+        unbind(EditorContribution);
+        bind(EditorContribution).to(ArduinoEditorContribution).inSingletonScope();
+        unbind(MonacoStatusBarContribution);
+        bind(MonacoStatusBarContribution).to(ArduinoMonacoStatusBarContribution).inSingletonScope();
+        unbind(ApplicationShell);
+        bind(ApplicationShell).to(ArduinoApplicationShell).inSingletonScope();
+        unbind(ScmContribution);
+        bind(ScmContribution).to(SilentScmContribution).inSingletonScope();
+        unbind(SearchInWorkspaceFrontendContribution);
+        bind(SearchInWorkspaceFrontendContribution).to(SilentSearchInWorkspaceContribution).inSingletonScope();
+    } else {
+        // We use this CSS class on the body to modify the visibility of the close button for the editors and views.
+        document.body.classList.add(ArduinoAdvancedMode.LS_ID);
+    }
     unbind(FrontendApplication);
-    bind(FrontendApplication).to(CustomFrontendApplication).inSingletonScope();
-    unbind(EditorWidgetFactory);
-    bind(EditorWidgetFactory).to(CustomEditorWidgetFactory).inSingletonScope();
+    bind(FrontendApplication).to(ArduinoFrontendApplication).inSingletonScope();
+
+    // Monaco customizations
+    unbind(MonacoEditorProvider);
+    bind(ArduinoMonacoEditorProvider).toSelf().inSingletonScope();
+    bind(MonacoEditorProvider).toService(ArduinoMonacoEditorProvider);
+
+    // Decorator customizations
+    unbind(TabBarDecoratorService);
+    bind(ArduinoTabBarDecoratorService).toSelf().inSingletonScope();
+    bind(TabBarDecoratorService).toService(ArduinoTabBarDecoratorService);
+
+    // Problem markers
+    unbind(ProblemManager);
+    bind(ArduinoProblemManager).toSelf().inSingletonScope();
+    bind(ProblemManager).toService(ArduinoProblemManager);
+
+    // About dialog to show the CLI version
+    unbind(AboutDialog);
+    bind(ArduinoAboutDialog).toSelf().inSingletonScope();
+    bind(AboutDialog).toService(ArduinoAboutDialog);
 });

arduino-ide-extension/src/browser/arduino-theme.ts

@@ -19,9 +19,10 @@ export class ArduinoTheme {
         deactivate() {
             ARDUINO_CSS.unuse();
         }
-    }
+    };
 
     static readonly themes: Theme[] = [
         ArduinoTheme.arduino
-    ]
-}
+    ];
+
+}

arduino-ide-extension/src/browser/arduino-workspace-resolver.ts

@@ -0,0 +1,68 @@
+import { toUnix } from 'upath';
+import URI from '@theia/core/lib/common/uri';
+import { isWindows } from '@theia/core/lib/common/os';
+import { notEmpty } from '@theia/core/lib/common/objects';
+import { MaybePromise } from '@theia/core/lib/common/types';
+
+/**
+ * Class for determining the default workspace location from the
+ * `location.hash`, the historical workspace locations, and recent sketch files.
+ * 
+ * The following logic is used for determining the default workspace location:
+ * - `hash` points to an exists in location?
+ *  - Yes
+ *   - `validate location`. Is valid sketch location?
+ *    - Yes
+ *     - Done.
+ *    - No
+ *     - `try open recent workspace roots`, then `try open last modified sketches`, finally `create new sketch`.
+ *  - No
+ *   - `try open recent workspace roots`, then `try open last modified sketches`, finally `create new sketch`.
+ */
+namespace ArduinoWorkspaceRootResolver {
+    export interface InitOptions {
+        readonly isValid: (uri: string) => MaybePromise<boolean>;
+    }
+    export interface ResolveOptions {
+        readonly hash?: string
+        readonly recentWorkspaces: string[];
+        // Gathered from the default sketch folder. The default sketch folder is defined by the CLI.
+        readonly recentSketches: string[];
+    }
+}
+export class ArduinoWorkspaceRootResolver {
+
+    constructor(protected options: ArduinoWorkspaceRootResolver.InitOptions) {
+    }
+
+    async resolve(options: ArduinoWorkspaceRootResolver.ResolveOptions): Promise<{ uri: string } | undefined> {
+        const { hash, recentWorkspaces, recentSketches } = options;
+        for (const uri of [this.hashToUri(hash), ...recentWorkspaces, ...recentSketches].filter(notEmpty)) {
+            const valid = await this.isValid(uri);
+            if (valid) {
+                return { uri };
+            }
+        }
+        return undefined;
+    }
+
+    protected isValid(uri: string): MaybePromise<boolean> {
+        return this.options.isValid.bind(this)(uri);
+    }
+
+    // Note: here, the `hash` was defined as new `URI(yourValidFsPath).path` so we have to map it to a valid FS path first.
+    // This is important for Windows only and a NOOP on POSIX.
+    // Note: we set the `new URI(myValidUri).path.toString()` as the `hash`. See:
+    // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L143 and
+    // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L423
+    protected hashToUri(hash: string | undefined): string | undefined {
+        if (hash
+            && hash.length > 1
+            && hash.startsWith('#')) {
+                const path = hash.slice(1); // Trim the leading `#`.
+                return new URI(toUnix(path.slice(isWindows && hash.startsWith('/') ? 1 : 0))).withScheme('file').toString();
+        }
+        return undefined;
+    }
+
+}

arduino-ide-extension/src/browser/arduino-workspace-service.ts

@@ -1,50 +1,56 @@
-import { WorkspaceService } from "@theia/workspace/lib/browser/workspace-service";
-import { injectable, inject } from "inversify";
-import { WorkspaceServer } from "@theia/workspace/lib/common";
-import { FileSystem, FileStat } from "@theia/filesystem/lib/common";
-import URI from "@theia/core/lib/common/uri";
-import { SketchFactory } from "./sketch-factory";
+import { injectable, inject } from 'inversify';
+import { LabelProvider } from '@theia/core/lib/browser';
+import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
+import { ConfigService } from '../common/protocol/config-service';
+import { SketchesService } from '../common/protocol/sketches-service';
+import { ArduinoWorkspaceRootResolver } from './arduino-workspace-resolver';
+import { ArduinoAdvancedMode } from './arduino-frontend-contribution';
 
-/**
- * This is workaround to have custom frontend binding for the default workspace, although we
- * already have a custom binding for the backend.
- */
 @injectable()
-export class AWorkspaceService  extends WorkspaceService {
+export class ArduinoWorkspaceService extends WorkspaceService {
 
-    @inject(WorkspaceServer)
-    protected readonly workspaceServer: WorkspaceServer;
+    @inject(SketchesService)
+    protected readonly sketchService: SketchesService;
 
-    @inject(FileSystem)
-    protected readonly fileSystem: FileSystem;
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
 
-    @inject(SketchFactory)
-    protected readonly sketchFactory: SketchFactory;
+    @inject(LabelProvider)
+    protected readonly labelProvider: LabelProvider;
 
-    protected async getDefaultWorkspacePath(): Promise<string | undefined> {
-        let result = await super.getDefaultWorkspacePath();
-        if (!result) {
-            const userHome = await this.fileSystem.getCurrentUserHome();
-            if (!userHome) {
-                return;
-            }
-
-            // The backend has created this location if it was missing.
-            result = new URI(userHome.uri).resolve('Arduino-PoC').resolve('Sketches').toString();
+    async getDefaultWorkspacePath(): Promise<string | undefined> {
+        const [hash, recentWorkspaces, recentSketches] = await Promise.all([
+            window.location.hash,
+            this.sketchService.getSketches().then(sketches => sketches.map(({ uri }) => uri)),
+            this.server.getRecentWorkspaces()
+        ]);
+        const toOpen = await new ArduinoWorkspaceRootResolver({
+            isValid: this.isValid.bind(this)
+        }).resolve({
+            hash,
+            recentWorkspaces,
+            recentSketches
+        });
+        if (toOpen) {
+            const { uri } = toOpen;
+            await this.server.setMostRecentlyUsedWorkspace(uri);
+            return toOpen.uri;
         }
-
-        const stat = await this.fileSystem.getFileStat(result);
-        if (!stat) {
-            // workspace does not exist yet, create it
-            await this.fileSystem.createFolder(result);
-            await this.sketchFactory.createNewSketch(new URI(result));
-        }
-
-        return result;
+        return (await this.sketchService.createNewSketch()).uri;
     }
 
-    protected async setWorkspace(workspaceStat: FileStat | undefined): Promise<void> {
-        await super.setWorkspace(workspaceStat);
+    private async isValid(uri: string): Promise<boolean> {
+        const exists = await this.fileSystem.exists(uri);
+        if (!exists) {
+            return false;
+        }
+        // The workspace root location must exist. However, when opening a workspace root in pro-mode,
+        // the workspace root must not be a sketch folder. It can be the default sketch directory, or any other directories, for instance.
+        if (!ArduinoAdvancedMode.TOGGLED) {
+            return true;
+        }
+        const sketchFolder = await this.sketchService.isSketchFolder(uri);
+        return sketchFolder;
     }
 
-}
+}

arduino-ide-extension/src/browser/boards-notification-service.ts

@@ -1,19 +0,0 @@
-import { EventEmitter } from "events";
-import { injectable } from "inversify";
-
-// TODO (post-PoC): move this to the backend / BoardsService
-@injectable()
-export class BoardsNotificationService {
-
-    protected readonly emitter = new EventEmitter();
-
-    public on(event: 'boards-installed', listener: (...args: any[]) => void): this {
-        this.emitter.on(event, listener);
-        return this;
-    }
-
-    public notifyBoardsInstalled() {
-        this.emitter.emit('boards-installed');
-    }
-
-}

arduino-ide-extension/src/browser/boards/boards-auto-installer.ts

@@ -0,0 +1,63 @@
+import { injectable, inject } from 'inversify';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import { BoardsService, Board } from '../../common/protocol/boards-service';
+import { BoardsServiceClientImpl } from './boards-service-client-impl';
+import { BoardsListWidgetFrontendContribution } from './boards-widget-frontend-contribution';
+import { InstallationProgressDialog } from '../components/installation-progress-dialog';
+import { BoardsConfig } from './boards-config';
+
+
+/**
+ * Listens on `BoardsConfig.Config` changes, if a board is selected which does not
+ * have the corresponding core installed, it proposes the user to install the core.
+ */
+@injectable()
+export class BoardsAutoInstaller implements FrontendApplicationContribution {
+
+    @inject(MessageService)
+    protected readonly messageService: MessageService;
+
+    @inject(BoardsService)
+    protected readonly boardsService: BoardsService;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    @inject(BoardsListWidgetFrontendContribution)
+    protected readonly boardsManagerFrontendContribution: BoardsListWidgetFrontendContribution;
+
+    onStart(): void {
+        this.boardsServiceClient.onBoardsConfigChanged(this.ensureCoreExists.bind(this));
+        this.ensureCoreExists(this.boardsServiceClient.boardsConfig);
+    }
+
+    protected ensureCoreExists(config: BoardsConfig.Config): void {
+        const { selectedBoard } = config;
+        if (selectedBoard) {
+            this.boardsService.search({}).then(({ items }) => {
+                const candidates = items
+                    .filter(item => item.boards.some(board => Board.sameAs(board, selectedBoard)))
+                    .filter(({ installable, installedVersion }) => installable && !installedVersion);
+                for (const candidate of candidates) {
+                    // tslint:disable-next-line:max-line-length
+                    this.messageService.info(`The \`"${candidate.name}"\` core has to be installed for the currently selected \`"${selectedBoard.name}"\` board. Do you want to install it now?`, 'Yes', 'Install Manually').then(async answer => {
+                        if (answer === 'Yes') {
+                            const dialog = new InstallationProgressDialog(candidate.name);
+                            dialog.open();
+                            try {
+                                await this.boardsService.install(candidate);
+                            } finally {
+                                dialog.close();
+                            }
+                        }
+                        if (answer) {
+                            this.boardsManagerFrontendContribution.openView({ reveal: true }).then(widget => widget.refresh(candidate.name.toLocaleLowerCase()));
+                        } 
+                    });
+                }
+            })
+        }
+    }
+
+}

arduino-ide-extension/src/browser/boards/boards-config-dialog-widget.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { injectable, inject } from 'inversify';
+import { Emitter } from '@theia/core/lib/common/event';
+import { ReactWidget, Message } from '@theia/core/lib/browser';
+import { BoardsService } from '../../common/protocol/boards-service';
+import { BoardsConfig } from './boards-config';
+import { BoardsServiceClientImpl } from './boards-service-client-impl';
+
+@injectable()
+export class BoardsConfigDialogWidget extends ReactWidget {
+
+    @inject(BoardsService)
+    protected readonly boardsService: BoardsService;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    protected readonly onBoardConfigChangedEmitter = new Emitter<BoardsConfig.Config>();
+    readonly onBoardConfigChanged = this.onBoardConfigChangedEmitter.event;
+
+    protected focusNode: HTMLElement | undefined;
+
+    constructor() {
+        super();
+        this.id = 'select-board-dialog';
+    }
+
+    protected fireConfigChanged = (config: BoardsConfig.Config) => {
+        this.onBoardConfigChangedEmitter.fire(config);
+    }
+
+    protected setFocusNode = (element: HTMLElement | undefined) => {
+        this.focusNode = element;
+    }
+
+    protected render(): React.ReactNode {
+        return <div className='selectBoardContainer'>
+            <BoardsConfig
+                boardsService={this.boardsService}
+                boardsServiceClient={this.boardsServiceClient}
+                onConfigChange={this.fireConfigChanged}
+                onFocusNodeSet={this.setFocusNode} />
+        </div>;
+    }
+
+    protected onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        if (this.focusNode instanceof HTMLInputElement) {
+            this.focusNode.select();
+        }
+        (this.focusNode || this.node).focus();
+    }
+
+
+}

arduino-ide-extension/src/browser/boards/boards-config-dialog.ts

@@ -0,0 +1,113 @@
+import { injectable, inject, postConstruct } from 'inversify';
+import { Message } from '@phosphor/messaging';
+import { AbstractDialog, DialogProps, Widget, DialogError } from '@theia/core/lib/browser';
+import { BoardsService } from '../../common/protocol/boards-service';
+import { BoardsConfig } from './boards-config';
+import { BoardsConfigDialogWidget } from './boards-config-dialog-widget';
+import { BoardsServiceClientImpl } from './boards-service-client-impl';
+
+@injectable()
+export class BoardsConfigDialogProps extends DialogProps {
+}
+
+@injectable()
+export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
+
+    @inject(BoardsConfigDialogWidget)
+    protected readonly widget: BoardsConfigDialogWidget;
+
+    @inject(BoardsService)
+    protected readonly boardService: BoardsService;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    protected config: BoardsConfig.Config = {};
+
+    constructor(@inject(BoardsConfigDialogProps) protected readonly props: BoardsConfigDialogProps) {
+        super(props);
+
+        this.contentNode.classList.add('select-board-dialog');
+        this.contentNode.appendChild(this.createDescription());
+
+        this.appendCloseButton('CANCEL');
+        this.appendAcceptButton('OK');
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.toDispose.push(this.boardsServiceClient.onBoardsConfigChanged(config => {
+            this.config = config;
+            this.update();
+        }));
+    }
+
+    protected createDescription(): HTMLElement {
+        const head = document.createElement('div');
+        head.classList.add('head');
+
+        const title = document.createElement('div');
+        title.textContent = 'Select Other Board & Port';
+        title.classList.add('title');
+        head.appendChild(title);
+
+        const text = document.createElement('div');
+        text.classList.add('text');
+        head.appendChild(text);
+
+        for (const paragraph of [
+            'Select both a Board and a Port if you want to upload a sketch.',
+            'If you only select a Board you will be able just to compile, but not to upload your sketch.'
+        ]) {
+            const p = document.createElement('p');
+            p.textContent = paragraph;
+            text.appendChild(p);
+        }
+
+        return head;
+    }
+
+    protected onAfterAttach(msg: Message): void {
+        if (this.widget.isAttached) {
+            Widget.detach(this.widget);
+        }
+        Widget.attach(this.widget, this.contentNode);
+        this.toDisposeOnDetach.push(this.widget.onBoardConfigChanged(config => {
+            this.config = config;
+            this.update();
+        }));
+        super.onAfterAttach(msg);
+        this.update();
+    }
+
+    protected onUpdateRequest(msg: Message) {
+        super.onUpdateRequest(msg);
+        this.widget.update();
+    }
+
+    protected onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        this.widget.activate();
+    }
+
+    protected handleEnter(event: KeyboardEvent): boolean | void {
+        if (event.target instanceof HTMLTextAreaElement) {
+            return false;
+        }
+    }
+
+    protected isValid(value: BoardsConfig.Config): DialogError {
+        if (!value.selectedBoard) {
+            if (value.selectedPort) {
+                return 'Please pick a board connected to the port you have selected.';
+            }
+            return false;
+        }
+        return '';
+    }
+
+    get value(): BoardsConfig.Config {
+        return this.config;
+    }
+
+}

arduino-ide-extension/src/browser/boards/boards-config.tsx

@@ -0,0 +1,295 @@
+import * as React from 'react';
+import { DisposableCollection } from '@theia/core';
+import { BoardsService, Board, Port, AttachedSerialBoard, AttachedBoardsChangeEvent } from '../../common/protocol/boards-service';
+import { BoardsServiceClientImpl } from './boards-service-client-impl';
+
+export namespace BoardsConfig {
+
+    export interface Config {
+        selectedBoard?: Board;
+        selectedPort?: Port;
+    }
+
+    export interface Props {
+        readonly boardsService: BoardsService;
+        readonly boardsServiceClient: BoardsServiceClientImpl;
+        readonly onConfigChange: (config: Config) => void;
+        readonly onFocusNodeSet: (element: HTMLElement | undefined) => void;
+    }
+
+    export interface State extends Config {
+        searchResults: Array<Board & { packageName: string }>;
+        knownPorts: Port[];
+        showAllPorts: boolean;
+    }
+
+}
+
+export abstract class Item<T> extends React.Component<{
+    item: T,
+    label: string,
+    selected: boolean,
+    onClick: (item: T) => void,
+    missing?: boolean,
+    detail?: string
+}> {
+
+    render(): React.ReactNode {
+        const { selected, label, missing, detail } = this.props;
+        const classNames = ['item'];
+        if (selected) {
+            classNames.push('selected');
+        }
+        if (missing === true) {
+            classNames.push('missing')
+        }
+        return <div onClick={this.onClick} className={classNames.join(' ')} title={`${label}${!detail ? '' : detail}`}>
+            <div className='label'>
+                {label}
+            </div>
+            {!detail ? '' : <div className='detail'>{detail}</div>}
+            {!selected ? '' : <div className='selected-icon'><i className='fa fa-check' /></div>}
+        </div>;
+    }
+
+    protected onClick = () => {
+        this.props.onClick(this.props.item);
+    }
+
+}
+
+export class BoardsConfig extends React.Component<BoardsConfig.Props, BoardsConfig.State> {
+
+    protected toDispose = new DisposableCollection();
+
+    constructor(props: BoardsConfig.Props) {
+        super(props);
+
+        const { boardsConfig } = props.boardsServiceClient;
+        this.state = {
+            searchResults: [],
+            knownPorts: [],
+            showAllPorts: false,
+            ...boardsConfig
+        }
+    }
+
+    componentDidMount() {
+        this.updateBoards();
+        this.props.boardsService.getAvailablePorts().then(({ ports }) => this.updatePorts(ports));
+        const { boardsServiceClient: client } = this.props;
+        this.toDispose.pushAll([
+            client.onBoardsChanged(event => this.updatePorts(event.newState.ports, AttachedBoardsChangeEvent.diff(event).detached.ports)),
+            client.onBoardsConfigChanged(({ selectedBoard, selectedPort }) => {
+                this.setState({ selectedBoard, selectedPort }, () => this.fireConfigChanged());
+            })
+        ]);
+    }
+
+    componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    protected fireConfigChanged() {
+        const { selectedBoard, selectedPort } = this.state;
+        this.props.onConfigChange({ selectedBoard, selectedPort });
+    }
+
+    protected updateBoards = (eventOrQuery: React.ChangeEvent<HTMLInputElement> | string = '') => {
+        const query = (typeof eventOrQuery === 'string'
+            ? eventOrQuery
+            : eventOrQuery.target.value.toLowerCase()
+        ).trim();
+        this.queryBoards({ query }).then(({ searchResults }) => this.setState({ searchResults }));
+    }
+
+    protected updatePorts = (ports: Port[] = [], removedPorts: Port[] = []) => {
+        this.queryPorts(Promise.resolve({ ports })).then(({ knownPorts }) => {
+            let { selectedPort } = this.state;
+            // If the currently selected port is not available anymore, unset the selected port.
+            if (removedPorts.some(port => Port.equals(port, selectedPort))) {
+                selectedPort = undefined;
+            }
+            this.setState({ knownPorts, selectedPort }, () => this.fireConfigChanged());
+        });
+    }
+
+    protected queryBoards = (options: { query?: string } = {}): Promise<{ searchResults: Array<Board & { packageName: string }> }> => {
+        const { boardsService } = this.props;
+        const query = (options.query || '').toLocaleLowerCase();
+        return new Promise<{ searchResults: Array<Board & { packageName: string }> }>(resolve => {
+            boardsService.search(options)
+                .then(({ items }) => items
+                    .map(item => item.boards.map(board => ({ ...board, packageName: item.name })))
+                    .reduce((acc, curr) => acc.concat(curr), [])
+                    .filter(board => board.name.toLocaleLowerCase().indexOf(query) !== -1)
+                    .sort(Board.compare))
+                .then(searchResults => resolve({ searchResults }));
+        });
+    }
+
+    protected get attachedBoards(): Promise<{ boards: Board[] }> {
+        return this.props.boardsService.getAttachedBoards();
+    }
+
+    protected get availablePorts(): Promise<{ ports: Port[] }> {
+        return this.props.boardsService.getAvailablePorts();
+    }
+
+    protected queryPorts = (availablePorts: Promise<{ ports: Port[] }> = this.availablePorts) => {
+        return new Promise<{ knownPorts: Port[] }>(resolve => {
+            availablePorts
+                .then(({ ports }) => ports
+                    .sort(Port.compare))
+                .then(knownPorts => resolve({ knownPorts }));
+        });
+    }
+
+    protected toggleFilterPorts = () => {
+        this.setState({ showAllPorts: !this.state.showAllPorts });
+    }
+
+    protected selectPort = (selectedPort: Port | undefined) => {
+        this.setState({ selectedPort }, () => this.fireConfigChanged());
+    }
+
+    protected selectBoard = (selectedBoard: Board & { packageName: string } | undefined) => {
+        this.setState({ selectedBoard }, () => this.fireConfigChanged());
+    }
+
+    protected focusNodeSet = (element: HTMLElement | null) => {
+        this.props.onFocusNodeSet(element || undefined);
+    }
+
+    render(): React.ReactNode {
+        return <div className='body'>
+            {this.renderContainer('boards', this.renderBoards.bind(this))}
+            {this.renderContainer('ports', this.renderPorts.bind(this), this.renderPortsFooter.bind(this))}
+        </div>;
+    }
+
+    protected renderContainer(title: string, contentRenderer: () => React.ReactNode, footerRenderer?: () => React.ReactNode): React.ReactNode {
+        return <div className='container'>
+            <div className='content'>
+                <div className='title'>
+                    {title}
+                </div>
+                {contentRenderer()}
+                <div className='footer'>
+                    {(footerRenderer ? footerRenderer() : '')}
+                </div>
+            </div>
+        </div>;
+    }
+
+    protected renderBoards(): React.ReactNode {
+        const { selectedBoard, searchResults } = this.state;
+        // Board names are not unique. We show the corresponding core name as a detail.
+        // https://github.com/arduino/arduino-cli/pull/294#issuecomment-513764948
+        const distinctBoardNames = new Map<string, number>();
+        for (const { name } of searchResults) {
+            const counter = distinctBoardNames.get(name) || 0;
+            distinctBoardNames.set(name, counter + 1);
+        }
+
+        // Due to the non-unique board names, we have to check the package name as well.
+        const selected = (board: Board & { packageName: string }) => {
+            if (!!selectedBoard) {
+                if (Board.equals(board, selectedBoard)) {
+                    if ('packageName' in selectedBoard) {
+                        return board.packageName === (selectedBoard as any).packageName;
+                    }
+                    return true;
+                }
+            }
+            return false;
+        }
+
+        return <React.Fragment>
+            <div className='search'>
+                <input type='search' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
+                <i className='fa fa-search'></i>
+            </div>
+            <div className='boards list'>
+                {this.state.searchResults.map(board => <Item<Board & { packageName: string }>
+                    key={`${board.name}-${board.packageName}`}
+                    item={board}
+                    label={board.name}
+                    detail={(distinctBoardNames.get(board.name) || 0) > 1 ? ` - ${board.packageName}` : undefined}
+                    selected={selected(board)}
+                    onClick={this.selectBoard}
+                    missing={!Board.installed(board)}
+                />)}
+            </div>
+        </React.Fragment>;
+    }
+
+    protected renderPorts(): React.ReactNode {
+        const filter = this.state.showAllPorts ? () => true : Port.isBoardPort;
+        const ports = this.state.knownPorts.filter(filter);
+        return !ports.length ?
+            (
+                <div className='loading noselect'>
+                    No ports discovered
+                </div>
+            ) :
+            (
+                <div className='ports list'>
+                    {ports.map(port => <Item<Port>
+                        key={Port.toString(port)}
+                        item={port}
+                        label={Port.toString(port)}
+                        selected={Port.equals(this.state.selectedPort, port)}
+                        onClick={this.selectPort}
+                    />)}
+                </div>
+            );
+    }
+
+    protected renderPortsFooter(): React.ReactNode {
+        return <div className='noselect'>
+            <label
+                title='Shows all available ports when enabled'>
+                <input
+                    type='checkbox'
+                    defaultChecked={this.state.showAllPorts}
+                    onChange={this.toggleFilterPorts}
+                />
+                <span>Show all ports</span>
+            </label>
+        </div>;
+    }
+
+}
+
+export namespace BoardsConfig {
+
+    export namespace Config {
+
+        export function sameAs(config: Config, other: Config | AttachedSerialBoard): boolean {
+            const { selectedBoard, selectedPort } = config;
+            if (AttachedSerialBoard.is(other)) {
+                return !!selectedBoard
+                    && Board.equals(other, selectedBoard)
+                    && Port.sameAs(selectedPort, other.port);
+            }
+            return sameAs(config, other);
+        }
+
+        export function equals(left: Config, right: Config): boolean {
+            return left.selectedBoard === right.selectedBoard
+                && left.selectedPort === right.selectedPort;
+        }
+
+        export function toString(config: Config, options: { default: string } = { default: '' }): string {
+            const { selectedBoard, selectedPort: port } = config;
+            if (!selectedBoard) {
+                return options.default;
+            }
+            const { name } = selectedBoard;
+            return `${name}${port ? ' at ' + Port.toString(port) : ''}`;
+        }
+
+    }
+
+}

arduino-ide-extension/src/browser/boards/boards-item-renderer.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { injectable } from 'inversify';
+import { ListItemRenderer } from '../components/component-list/list-item-renderer';
+import { BoardPackage } from '../../common/protocol/boards-service';
+
+@injectable()
+export class BoardItemRenderer extends ListItemRenderer<BoardPackage> {
+
+    renderItem(item: BoardPackage, install: (item: BoardPackage) => Promise<void>): React.ReactNode {
+        const name = <span className='name'>{item.name}</span>;
+        const author = <span className='author'>{item.author}</span>;
+        const installedVersion = !!item.installedVersion && <div className='version-info'>
+            <span className='version'>Version {item.installedVersion}</span>
+            <span className='installed'>INSTALLED</span>
+        </div>;
+
+        const summary = <div className='summary'>{item.summary}</div>;
+        const description = <div className='summary'>{item.description}</div>;
+
+        const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onClick}>More info</a>;
+        const installButton = item.installable && !item.installedVersion &&
+            <button className='install' onClick={install.bind(this, item)}>INSTALL</button>;
+
+        const versions = (() => {
+            const { availableVersions } = item;
+            if (!!item.installedVersion || availableVersions.length === 0) {
+                return undefined;
+            } else if (availableVersions.length === 1) {
+                return <label>{availableVersions[0]}</label>
+            } else {
+                return <select>{item.availableVersions.map(version => <option value={version} key={version}>{version}</option>)}</select>;
+            }
+        })();
+
+        return <div className='component-list-item noselect'>
+            <div className='header'>
+                <span>{name} by {author}</span>
+                {installedVersion}
+            </div>
+            <div className='content'>
+                {summary}
+                {description}
+            </div>
+            <div className='info'>
+                {moreInfo}
+            </div>
+            <div className='footer'>
+                {installButton}
+                {versions}
+            </div>
+        </div>;
+    }
+
+}

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

@@ -0,0 +1,27 @@
+import { inject, injectable } from 'inversify';
+import { BoardPackage, BoardsService } from '../../common/protocol/boards-service';
+import { ListWidget } from '../components/component-list/list-widget';
+import { BoardItemRenderer } from './boards-item-renderer';
+
+@injectable()
+export class BoardsListWidget extends ListWidget<BoardPackage> {
+
+    static WIDGET_ID = 'boards-list-widget';
+    static WIDGET_LABEL = 'Boards Manager';
+
+    constructor(
+        @inject(BoardsService) protected service: BoardsService,
+        @inject(BoardItemRenderer) protected itemRenderer: BoardItemRenderer) {
+
+        super({
+            id: BoardsListWidget.WIDGET_ID,
+            label: BoardsListWidget.WIDGET_LABEL,
+            iconClass: 'fa fa-microchip',
+            searchable: service,
+            installable: service,
+            itemLabel: (item: BoardPackage) => item.name,
+            itemRenderer
+        });
+    }
+
+}

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

@@ -1,16 +0,0 @@
-import { ListWidget } from './list-widget';
-
-export class BoardsListWidget extends ListWidget {
-
-    static WIDGET_ID = 'boards-list-widget';
-    static WIDGET_LABEL = 'Boards Manager';
-
-    protected widgetProps(): ListWidget.Props {
-        return {
-            id: BoardsListWidget.WIDGET_ID,
-            title: BoardsListWidget.WIDGET_LABEL,
-            iconClass: 'fa fa-microchip'
-        }
-    }
-
-}

arduino-ide-extension/src/browser/boards/boards-service-client-impl.ts

@@ -0,0 +1,122 @@
+import { injectable, inject, postConstruct } from 'inversify';
+import { Emitter } from '@theia/core/lib/common/event';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { LocalStorageService } from '@theia/core/lib/browser/storage-service';
+import { RecursiveRequired } from '../../common/types';
+import { BoardsServiceClient, AttachedBoardsChangeEvent, BoardInstalledEvent, AttachedSerialBoard, Board, Port } from '../../common/protocol/boards-service';
+import { BoardsConfig } from './boards-config';
+
+@injectable()
+export class BoardsServiceClientImpl implements BoardsServiceClient {
+
+    @inject(ILogger)
+    protected logger: ILogger;
+
+    @inject(LocalStorageService)
+    protected storageService: LocalStorageService;
+
+    protected readonly onBoardInstalledEmitter = new Emitter<BoardInstalledEvent>();
+    protected readonly onAttachedBoardsChangedEmitter = new Emitter<AttachedBoardsChangeEvent>();
+    protected readonly onSelectedBoardsConfigChangedEmitter = new Emitter<BoardsConfig.Config>();
+
+    /**
+     * Used for the auto-reconnecting. Sometimes, the attached board gets disconnected after uploading something to it.
+     * It happens with certain boards on Windows. For example, the `MKR1000` boards is selected on post `COM5` on Windows,
+     * perform an upload, the board automatically disconnects and reconnects, but on another port, `COM10`.
+     * We have to listen on such changes and auto-reconnect the same board on another port.
+     * See: https://arduino.slack.com/archives/CJJHJCJSJ/p1568645417013000?thread_ts=1568640504.009400&cid=CJJHJCJSJ
+     */
+    protected latestValidBoardsConfig: RecursiveRequired<BoardsConfig.Config> | undefined = undefined;
+    protected _boardsConfig: BoardsConfig.Config = {};
+
+    readonly onBoardsChanged = this.onAttachedBoardsChangedEmitter.event;
+    readonly onBoardInstalled = this.onBoardInstalledEmitter.event;
+    readonly onBoardsConfigChanged = this.onSelectedBoardsConfigChangedEmitter.event;
+
+    @postConstruct()
+    protected init(): void {
+        this.loadState();
+    }
+
+    notifyAttachedBoardsChanged(event: AttachedBoardsChangeEvent): void {
+        this.logger.info('Attached boards and available ports changed: ', JSON.stringify(event));
+        const { detached, attached } = AttachedBoardsChangeEvent.diff(event);
+        const { selectedPort, selectedBoard } = this.boardsConfig;
+        this.onAttachedBoardsChangedEmitter.fire(event);
+        // Dynamically unset the port if is not available anymore. A port can be "detached" when removing a board.
+        if (detached.ports.some(port => Port.equals(selectedPort, port))) {
+            this.boardsConfig = {
+                selectedBoard,
+                selectedPort: undefined
+            };
+        }
+        // Try to reconnect.
+        this.tryReconnect(attached.boards, attached.ports);
+    }
+
+    async tryReconnect(attachedBoards: Board[], availablePorts: Port[]): Promise<boolean> {
+        if (this.latestValidBoardsConfig && !this.canUploadTo(this.boardsConfig)) {
+            for (const board of attachedBoards.filter(AttachedSerialBoard.is)) {
+                if (this.latestValidBoardsConfig.selectedBoard.fqbn === board.fqbn
+                    && this.latestValidBoardsConfig.selectedBoard.name === board.name
+                    && Port.sameAs(this.latestValidBoardsConfig.selectedPort, board.port)) {
+
+                    this.boardsConfig = this.latestValidBoardsConfig;
+                    return true;
+                }
+            }
+            // If we could not find an exact match, we compare the board FQBN-name pairs and ignore the port, as it might have changed.
+            // See documentation on `latestValidBoardsConfig`.
+            for (const board of attachedBoards.filter(AttachedSerialBoard.is)) {
+                if (this.latestValidBoardsConfig.selectedBoard.fqbn === board.fqbn
+                    && this.latestValidBoardsConfig.selectedBoard.name === board.name) {
+
+                    this.boardsConfig = {
+                        ...this.latestValidBoardsConfig,
+                        selectedPort: availablePorts.find(port => Port.sameAs(port, board.port))
+                    };
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    notifyBoardInstalled(event: BoardInstalledEvent): void {
+        this.logger.info('Board installed: ', JSON.stringify(event));
+        this.onBoardInstalledEmitter.fire(event);
+    }
+
+    set boardsConfig(config: BoardsConfig.Config) {
+        this.logger.info('Board config changed: ', JSON.stringify(config));
+        this._boardsConfig = config;
+        if (this.canUploadTo(this._boardsConfig)) {
+            this.latestValidBoardsConfig = this._boardsConfig;
+        }
+        this.saveState().then(() => this.onSelectedBoardsConfigChangedEmitter.fire(this._boardsConfig));
+    }
+
+    get boardsConfig(): BoardsConfig.Config {
+        return this._boardsConfig;
+    }
+
+    protected saveState(): Promise<void> {
+        return this.storageService.setData('latest-valid-boards-config', this.latestValidBoardsConfig);
+    }
+
+    protected async loadState(): Promise<void> {
+        const storedValidBoardsConfig = await this.storageService.getData<RecursiveRequired<BoardsConfig.Config>>('latest-valid-boards-config');
+        if (storedValidBoardsConfig) {
+            this.latestValidBoardsConfig = storedValidBoardsConfig;
+        }
+    }
+
+    protected canVerify(config: BoardsConfig.Config | undefined): config is BoardsConfig.Config & { selectedBoard: Board } {
+        return !!config && !!config.selectedBoard;
+    }
+
+    protected canUploadTo(config: BoardsConfig.Config | undefined): config is RecursiveRequired<BoardsConfig.Config> {
+        return this.canVerify(config) && !!config.selectedPort && !!config.selectedBoard.fqbn;
+    }
+
+}

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

@@ -1,61 +1,42 @@
 import * as React from 'react';
-import { BoardsService, Board, AttachedSerialBoard } from '../../common/protocol/boards-service';
-import { ContextMenuRenderer, StatusBar, StatusBarAlignment } from '@theia/core/lib/browser';
-import { BoardsNotificationService } from '../boards-notification-service';
-import { Command, CommandRegistry } from '@theia/core';
+import * as ReactDOM from 'react-dom';
+import { CommandRegistry, DisposableCollection } from '@theia/core';
+import { BoardsService, Board, AttachedSerialBoard, Port } from '../../common/protocol/boards-service';
 import { ArduinoCommands } from '../arduino-commands';
-import ReactDOM = require('react-dom');
+import { BoardsServiceClientImpl } from './boards-service-client-impl';
+import { BoardsConfig } from './boards-config';
 
-export interface BoardsDropdownItem {
-    label: string;
-    commandExecutor: () => void;
-    isSelected: () => boolean;
-}
-
-export interface BoardsDropDownListCoord {
-    top: number;
-    left: number;
-    width: number;
-    paddingTop: number;
-}
-
-export namespace BoardsDropdownItemComponent {
-    export interface Props {
-        label: string;
-        onClick: () => void;
-        isSelected: boolean;
-    }
-}
-
-export class BoardsDropdownItemComponent extends React.Component<BoardsDropdownItemComponent.Props> {
-    render() {
-        return <div className={`arduino-boards-dropdown-item ${this.props.isSelected ? 'selected' : ''}`} onClick={this.props.onClick}>
-            <div>{this.props.label}</div>
-            {this.props.isSelected ? <span className='fa fa-check'></span> : ''}
-        </div>;
-    }
+export interface BoardsDropDownListCoords {
+    readonly top: number;
+    readonly left: number;
+    readonly width: number;
+    readonly paddingTop: number;
 }
 
 export namespace BoardsDropDown {
     export interface Props {
-        readonly coords: BoardsDropDownListCoord;
-        readonly isOpen: boolean;
-        readonly dropDownItems: BoardsDropdownItem[];
-        readonly openDialog: () => void;
+        readonly coords: BoardsDropDownListCoords | 'hidden';
+        readonly items: Item[];
+        readonly openBoardsConfig: () => void;
+    }
+    export interface Item {
+        readonly label: string;
+        readonly selected: boolean;
+        readonly onClick: () => void;
     }
 }
 
 export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
-    protected dropdownId: string = 'boards-dropdown-container';
+
     protected dropdownElement: HTMLElement;
 
     constructor(props: BoardsDropDown.Props) {
         super(props);
 
-        let list = document.getElementById(this.dropdownId);
+        let list = document.getElementById('boards-dropdown-container');
         if (!list) {
             list = document.createElement('div');
-            list.id = this.dropdownId;
+            list.id = 'boards-dropdown-container';
             document.body.appendChild(list);
             this.dropdownElement = list;
         }
@@ -65,179 +46,157 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
         return ReactDOM.createPortal(this.renderNode(), this.dropdownElement);
     }
 
-    renderNode(): React.ReactNode {
-        if (this.props.isOpen) {
-            return <div className='arduino-boards-dropdown-list'
-                style={{
-                    position: 'absolute',
-                    top: this.props.coords.top,
-                    left: this.props.coords.left,
-                    width: this.props.coords.width,
-                    paddingTop: this.props.coords.paddingTop
-                }}>
-                {
-                    this.props.dropDownItems.map(item => {
-                        return <React.Fragment key={item.label}>
-                            <BoardsDropdownItemComponent isSelected={item.isSelected()} label={item.label} onClick={item.commandExecutor}></BoardsDropdownItemComponent>
-                        </React.Fragment>;
-                    })
-                }
-                <BoardsDropdownItemComponent isSelected={false} label={'Select Other Board & Port'} onClick={this.props.openDialog}></BoardsDropdownItemComponent>
-            </div>
-        } else {
+    protected renderNode(): React.ReactNode {
+        const { coords, items } = this.props;
+        if (coords === 'hidden') {
             return '';
         }
+        items.push({
+            label: 'Select Other Board & Port',
+            selected: false,
+            onClick: () => this.props.openBoardsConfig()
+        })
+        return <div className='arduino-boards-dropdown-list'
+            style={{
+                position: 'absolute',
+                ...coords
+            }}>
+            {items.map(this.renderItem)}
+        </div>
     }
+
+    protected renderItem(item: BoardsDropDown.Item): React.ReactNode {
+        const { label, selected, onClick } = item;
+        return <div key={label} className={`arduino-boards-dropdown-item ${selected ? 'selected' : ''}`} onClick={onClick}>
+            <div>
+                {label}
+            </div>
+            {selected ? <span className='fa fa-check'/> : ''}
+        </div>
+    }
+
 }
 
 export namespace BoardsToolBarItem {
+
     export interface Props {
-        readonly contextMenuRenderer: ContextMenuRenderer;
-        readonly boardsNotificationService: BoardsNotificationService;
         readonly boardService: BoardsService;
+        readonly boardsServiceClient: BoardsServiceClientImpl;
         readonly commands: CommandRegistry;
-        readonly statusBar: StatusBar;
     }
 
     export interface State {
-        selectedBoard?: Board;
-        selectedIsAttached: boolean;
-        boardItems: BoardsDropdownItem[];
-        isOpen: boolean;
+        boardsConfig: BoardsConfig.Config;
+        attachedBoards: Board[];
+        availablePorts: Port[];
+        coords: BoardsDropDownListCoords | 'hidden';
     }
 }
 
 export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, BoardsToolBarItem.State> {
 
-    protected attachedBoards: Board[];
-    protected dropDownListCoord: BoardsDropDownListCoord;
+    static TOOLBAR_ID: 'boards-toolbar';
+
+    protected readonly toDispose: DisposableCollection = new DisposableCollection();
 
     constructor(props: BoardsToolBarItem.Props) {
         super(props);
 
         this.state = {
-            selectedBoard: undefined,
-            selectedIsAttached: true,
-            boardItems: [],
-            isOpen: false
+            boardsConfig: this.props.boardsServiceClient.boardsConfig,
+            attachedBoards: [],
+            availablePorts: [],
+            coords: 'hidden'
         };
 
         document.addEventListener('click', () => {
-            this.setState({ isOpen: false });
+            this.setState({ coords: 'hidden' });
         });
     }
 
     componentDidMount() {
-        this.setAttachedBoards();
-    }
-
-    setSelectedBoard(board: Board) {
-        if (this.attachedBoards && this.attachedBoards.length) {
-            this.setState({ selectedIsAttached: !!this.attachedBoards.find(attachedBoard => attachedBoard.name === board.name) });
-        }
-        this.setState({ selectedBoard: board });
-    }
-
-    protected async setAttachedBoards() {
-        const { boards } = await this.props.boardService.getAttachedBoards();
-        this.attachedBoards = boards;
-        if (this.attachedBoards.length) {
-            await this.createBoardDropdownItems();
-            await this.props.boardService.selectBoard(this.attachedBoards[0]);
-            this.setSelectedBoard(this.attachedBoards[0]);
-        }
-    }
-
-    protected createBoardDropdownItems() {
-        const boardItems: BoardsDropdownItem[] = [];
-        this.attachedBoards.forEach(board => {
-            const { commands } = this.props;
-            const port = this.getPort(board);
-            const command: Command = {
-                id: 'selectBoard' + port
-            }
-            commands.registerCommand(command, {
-                execute: () => {
-                    commands.executeCommand(ArduinoCommands.SELECT_BOARD.id, board);
-                    this.setState({ isOpen: false, selectedBoard: board });
-                }
-            });
-            boardItems.push({
-                commandExecutor: () => commands.executeCommand(command.id),
-                label: board.name + ' at ' + port,
-                isSelected: () => this.doIsSelectedBoard(board)
-            });
+        const { boardsServiceClient: client, boardService } = this.props;
+        this.toDispose.pushAll([
+            client.onBoardsConfigChanged(boardsConfig => this.setState({ boardsConfig })),
+            client.onBoardsChanged(({ newState }) => this.setState({ attachedBoards: newState.boards, availablePorts: newState.ports }))
+        ]);
+        Promise.all([
+            boardService.getAttachedBoards(),
+            boardService.getAvailablePorts()
+        ]).then(([{boards: attachedBoards}, { ports: availablePorts }]) => {
+            this.setState({ attachedBoards, availablePorts })
         });
-        this.setState({ boardItems });
     }
 
-    protected doIsSelectedBoard = (board: Board) => this.isSelectedBoard(board);
-    protected isSelectedBoard(board: Board): boolean {
-        return AttachedSerialBoard.is(board) &&
-            !!this.state.selectedBoard &&
-            AttachedSerialBoard.is(this.state.selectedBoard) &&
-            board.port === this.state.selectedBoard.port &&
-            board.fqbn === this.state.selectedBoard.fqbn;
+    componentWillUnmount(): void {
+        this.toDispose.dispose();
     }
 
-    protected getPort(board: Board): string {
-        if (AttachedSerialBoard.is(board)) {
-            return board.port;
+    protected readonly show = (event: React.MouseEvent<HTMLElement>) => {
+        const { currentTarget: element } = event;
+        if (element instanceof HTMLElement) {
+            if (this.state.coords === 'hidden') {
+                const rect = element.getBoundingClientRect();
+                this.setState({
+                    coords: {
+                        top: rect.top,
+                        left: rect.left,
+                        width: rect.width,
+                        paddingTop: rect.height
+                    }
+                });
+            } else {
+                this.setState({ coords: 'hidden'});
+            }
         }
-        return '';
-    }
-
-    protected readonly doShowSelectBoardsMenu = (event: React.MouseEvent<HTMLElement>) => {
-        this.showSelectBoardsMenu(event);
         event.stopPropagation();
         event.nativeEvent.stopImmediatePropagation();
     };
-    protected showSelectBoardsMenu(event: React.MouseEvent<HTMLElement>) {
-        const el = (event.currentTarget as HTMLElement);
-        if (el) {
-            this.dropDownListCoord = {
-                top: el.getBoundingClientRect().top,
-                left: el.getBoundingClientRect().left,
-                paddingTop: el.getBoundingClientRect().height,
-                width: el.getBoundingClientRect().width
-            }
-            this.setState({ isOpen: !this.state.isOpen });
-        }
-    }
 
     render(): React.ReactNode {
-        const selectedBoard = this.state.selectedBoard;
-        const port = selectedBoard ? this.getPort(selectedBoard) : undefined;
-        const boardTxt = selectedBoard && `${selectedBoard.name}${port ? ' at ' + port : ''}` || '';
-        this.props.statusBar.setElement('arduino-selected-board', {
-            alignment: StatusBarAlignment.RIGHT,
-            text: boardTxt
-        });
+        const { boardsConfig, coords, attachedBoards, availablePorts } = this.state;
+        const title = BoardsConfig.Config.toString(boardsConfig, { default: 'no board selected' });
+        const configuredBoard = attachedBoards
+            .filter(AttachedSerialBoard.is)
+            .filter(board => availablePorts.some(port => Port.sameAs(port, board.port)))
+            .filter(board => BoardsConfig.Config.sameAs(boardsConfig, board)).shift();
+
+        const items = attachedBoards.filter(AttachedSerialBoard.is).map(board => ({
+            label: `${board.name} at ${board.port}`,
+            selected: configuredBoard === board,
+            onClick: () => {
+                this.props.boardsServiceClient.boardsConfig = {
+                    selectedBoard: board,
+                    selectedPort: availablePorts.find(port => Port.sameAs(port, board.port))
+                }
+            }
+        }));
+
         return <React.Fragment>
             <div className='arduino-boards-toolbar-item-container'>
-                <div className='arduino-boards-toolbar-item' title={boardTxt}>
-                    <div className='inner-container' onClick={this.doShowSelectBoardsMenu}>
-                        <span className={!selectedBoard || !this.state.selectedIsAttached ? 'fa fa-times notAttached' : ''}></span>
+                <div className='arduino-boards-toolbar-item' title={title}>
+                    <div className='inner-container' onClick={this.show}>
+                        <span className={!configuredBoard ? 'fa fa-times notAttached' : ''}/>
                         <div className='label noWrapInfo'>
                             <div className='noWrapInfo noselect'>
-                                {selectedBoard ? boardTxt : 'no board selected'}
+                                {title}
                             </div>
                         </div>
-                        <span className='fa fa-caret-down caret'></span>
+                        <span className='fa fa-caret-down caret'/>
                     </div>
                 </div>
             </div>
             <BoardsDropDown
-                isOpen={this.state.isOpen}
-                coords={this.dropDownListCoord}
-                dropDownItems={this.state.boardItems}
-                openDialog={this.openDialog}>
+                coords={coords}
+                items={items}
+                openBoardsConfig={this.openDialog}>
             </BoardsDropDown>
         </React.Fragment>;
     }
 
     protected openDialog = () => {
         this.props.commands.executeCommand(ArduinoCommands.OPEN_BOARDS_DIALOG.id);
-        this.setState({ isOpen: false });
+        this.setState({ coords: 'hidden' });
     };
-}
+
+}

arduino-ide-extension/src/browser/boards/boards-widget-frontend-contribution.ts

@@ -1,22 +1,12 @@
 import { injectable } from 'inversify';
-import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
-import { AbstractViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
-import { ListWidget } from './list-widget';
-import { BoardsListWidget } from './boards-list-widget';
 import { MenuModelRegistry } from '@theia/core';
+import { BoardsListWidget } from './boards-list-widget';
 import { ArduinoMenus } from '../arduino-frontend-contribution';
+import { BoardPackage } from '../../common/protocol/boards-service';
+import { ListWidgetFrontendContribution } from '../components/component-list/list-widget-frontend-contribution';
 
 @injectable()
-export abstract class ListWidgetFrontendContribution extends AbstractViewContribution<ListWidget> implements FrontendApplicationContribution {
-
-    async initializeLayout(): Promise<void> {
-        // await this.openView();
-    }
-
-}
-
-@injectable()
-export class BoardsListWidgetFrontendContribution extends ListWidgetFrontendContribution {
+export class BoardsListWidgetFrontendContribution extends ListWidgetFrontendContribution<BoardPackage> {
 
     static readonly OPEN_MANAGER = `${BoardsListWidget.WIDGET_ID}:toggle`;
 

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

@@ -1,88 +0,0 @@
-import * as React from 'react';
-import { inject, injectable, postConstruct } from 'inversify';
-import { Message } from '@phosphor/messaging';
-import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
-import { FilterableListContainer } from '../components/component-list/filterable-list-container';
-import { BoardsService, Board, BoardPackage } from '../../common/protocol/boards-service';
-import { BoardsNotificationService } from '../boards-notification-service';
-import { LibraryService } from '../../common/protocol/library-service';
-
-@injectable()
-export abstract class ListWidget extends ReactWidget {
-
-    @inject(BoardsService)
-    protected readonly boardsService: BoardsService;
-
-    @inject(WindowService)
-    protected readonly windowService: WindowService;
-
-    @inject(BoardsNotificationService)
-    protected readonly boardsNotificationService: BoardsNotificationService;
-
-    constructor() {
-        super();
-        const { id, title, iconClass } = this.widgetProps();
-        this.id = id;
-        this.title.label = title;
-        this.title.caption = title;
-        this.title.iconClass = iconClass;
-        this.title.closable = true;
-        this.addClass(ListWidget.Styles.LIST_WIDGET_CLASS);
-        this.node.tabIndex = 0; // To be able to set the focus on the widget.
-    }
-
-    protected abstract widgetProps(): ListWidget.Props;
-
-    @postConstruct()
-    protected init(): void {
-        this.update();
-    }
-
-    protected onActivateRequest(msg: Message): void {
-        super.onActivateRequest(msg);
-        this.node.focus();
-        this.render();
-    }
-
-    protected onUpdateRequest(msg: Message): void {
-        super.onUpdateRequest(msg);
-        this.render();
-    }
-
-    render(): React.ReactNode {
-        const boardsServiceDelegate = this.boardsService;
-        const boardsService: BoardsService = {
-            getAttachedBoards: () => boardsServiceDelegate.getAttachedBoards(),
-            selectBoard: (board: Board) => boardsServiceDelegate.selectBoard(board),
-            getSelectBoard: () => boardsServiceDelegate.getSelectBoard(),
-            search: (options: { query?: string, props?: LibraryService.Search.Props }) => boardsServiceDelegate.search(options),
-            install: async (item: BoardPackage) => {
-                await boardsServiceDelegate.install(item);
-                this.boardsNotificationService.notifyBoardsInstalled();
-            }
-        }
-        return <FilterableListContainer
-            service={boardsService}
-            windowService={this.windowService}
-        />;
-    }
-
-}
-
-export namespace ListWidget {
-
-    /**
-     * Props for customizing the abstract list widget.
-     */
-    export interface Props {
-        readonly id: string;
-        readonly title: string;
-        readonly iconClass: string;
-    }
-
-    export namespace Styles {
-        export const LIST_WIDGET_CLASS = 'arduino-list-widget'
-    }
-
-}

arduino-ide-extension/src/browser/boards/select-board-dialog-widget.tsx

@@ -1,305 +0,0 @@
-import * as React from 'react';
-import { ReactWidget } from '@theia/core/lib/browser';
-import { injectable, inject } from 'inversify';
-import { BoardsService, Board, BoardPackage, AttachedSerialBoard } from '../../common/protocol/boards-service';
-import { BoardsNotificationService } from '../boards-notification-service';
-import { Emitter, Event } from '@theia/core';
-
-export interface BoardAndPortSelection {
-    board?: Board;
-    port?: string;
-}
-
-export namespace BoardAndPortSelectableItem {
-    export interface Props {
-        item: BoardAndPortSelection,
-        selected: boolean,
-        onSelect: (selection: BoardAndPortSelection) => void
-    }
-}
-
-export class BoardAndPortSelectableItem extends React.Component<BoardAndPortSelectableItem.Props> {
-
-    render(): React.ReactNode {
-        if (this.props.item.board || this.props.item.port) {
-            return <div onClick={this.select} className={`item ${this.props.selected ? 'selected' : ''}`}>
-                {this.props.item.board ? this.props.item.board.name : this.props.item.port}
-                {this.props.selected ? <i className='fa fa-check'></i> : ''}
-            </div>;
-        }
-    }
-
-    protected readonly select = (() => {
-        this.props.onSelect({ board: this.props.item.board, port: this.props.item.port })
-    }).bind(this);
-}
-
-export namespace BoardAndPortSelectionList {
-    export interface Props {
-        type: 'boards' | 'ports';
-        list: BoardAndPortSelection[];
-        onSelect: (selection: BoardAndPortSelection) => void;
-    }
-
-    export interface State {
-        selection: BoardAndPortSelection
-    }
-}
-
-export class BoardAndPortSelectionList extends React.Component<BoardAndPortSelectionList.Props, BoardAndPortSelectionList.State> {
-
-    constructor(props: BoardAndPortSelectionList.Props) {
-        super(props);
-
-        this.state = {
-            selection: {}
-        }
-    }
-
-    reset(): void {
-        this.setState({ selection: {} });
-    }
-
-    render(): React.ReactNode {
-        return <div className={`${this.props.type} list`}>
-            {this.props.list.map(item => <BoardAndPortSelectableItem
-                key={item.board ? item.board.name : item.port}
-                onSelect={this.doSelect}
-                item={item}
-                selected={this.isSelectedItem(item)}
-            />)}
-        </div>
-    }
-
-    protected readonly doSelect = (boardAndPortSelection: BoardAndPortSelection) => {
-        this.setState({ selection: boardAndPortSelection });
-        this.props.onSelect(boardAndPortSelection);
-    }
-
-    protected readonly isSelectedItem = ((item: BoardAndPortSelection) => {
-        if (this.state.selection.board) {
-            return (this.state.selection.board === item.board);
-        } else if (this.state.selection.port) {
-            return (this.state.selection.port === item.port);
-        }
-        return false;
-    });
-
-    protected readonly isSelectedPort = ((port: string) => {
-        return (this.state.selection.port && this.state.selection.port === port) || false;
-    });
-}
-
-export namespace BoardAndPortSelectionComponent {
-    export interface Props {
-        boardsService: BoardsService;
-        onSelect: (selection: BoardAndPortSelection) => void;
-    }
-
-    export interface State {
-        boards: Board[];
-        ports: string[];
-        selection: BoardAndPortSelection;
-    }
-}
-
-export class BoardAndPortSelectionComponent extends React.Component<BoardAndPortSelectionComponent.Props, BoardAndPortSelectionComponent.State> {
-
-    protected allBoards: Board[] = [];
-    protected boardListComponent: BoardAndPortSelectionList | null;
-    protected portListComponent: BoardAndPortSelectionList | null;
-
-    constructor(props: BoardAndPortSelectionComponent.Props) {
-        super(props);
-
-        this.state = {
-            boards: [],
-            ports: [],
-            selection: {}
-        }
-    }
-
-    componentDidMount() {
-        this.searchAvailableBoards();
-        this.setPorts();
-    }
-
-    reset(): void {
-        if (this.boardListComponent) {
-            this.boardListComponent.reset();
-        }
-        if (this.portListComponent) {
-            this.portListComponent.reset();
-        }
-        this.setState({ selection: {} });
-    }
-
-    render(): React.ReactNode {
-        return <React.Fragment>
-            <div className='body'>
-                <div className='left container'>
-                    <div className='content'>
-                        <div className='title'>
-                            BOARDS
-                        </div>
-                        <div className='search'>
-                            <input type='search' placeholder='SEARCH BOARD' onChange={this.doFilter} />
-                            <i className='fa fa-search'></i>
-                        </div>
-                        <BoardAndPortSelectionList
-                            ref={ref => { this.boardListComponent = ref }}
-                            type='boards'
-                            onSelect={this.doSelect}
-                            list={this.state.boards.map<BoardAndPortSelection>(board => ({ board }))} />
-                    </div>
-                </div>
-                <div className='right container'>
-                    <div className='content'>
-                        <div className='title'>
-                            PORTS
-                    </div>
-                        {
-                            this.state.ports.length ?
-                                <BoardAndPortSelectionList
-                                    ref={ref => { this.portListComponent = ref }}
-                                    type='ports'
-                                    onSelect={this.doSelect}
-                                    list={this.state.ports.map<BoardAndPortSelection>(port => ({ port }))} /> : 'loading ports...'
-                        }
-                    </div>
-                </div>
-            </div>
-        </React.Fragment>
-    }
-
-    protected sort(items: Board[]): Board[] {
-        return items.sort((a, b) => {
-            if (a.name < b.name) {
-                return -1;
-            } else if (a.name === b.name) {
-                return 0;
-            } else {
-                return 1;
-            }
-        });
-    }
-
-    protected readonly doSelect = (boardAndPortSelection: BoardAndPortSelection) => {
-        const selection = this.state.selection;
-        if (boardAndPortSelection.board) {
-            selection.board = boardAndPortSelection.board;
-        }
-        if (boardAndPortSelection.port) {
-            selection.port = boardAndPortSelection.port;
-        }
-        this.setState({ selection });
-        this.props.onSelect(this.state.selection);
-    }
-
-    protected readonly doFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const boards = this.allBoards.filter(board => board.name.toLowerCase().indexOf(event.target.value.toLowerCase()) >= 0);
-        this.setState({ boards })
-    }
-
-    protected async searchAvailableBoards() {
-        const boardPkg = await this.props.boardsService.search({});
-        const boards = [].concat.apply([], boardPkg.items.map<Board[]>(item => item.boards)) as Board[];
-        this.allBoards = this.sort(boards);
-        this.setState({ boards: this.allBoards });
-    }
-
-    protected async setPorts() {
-        const ports: string[] = [];
-        const { boards } = await this.props.boardsService.getAttachedBoards();
-        boards.forEach(board => {
-            if (AttachedSerialBoard.is(board)) {
-                ports.push(board.port);
-            }
-        });
-        this.setState({ ports });
-    }
-}
-
-@injectable()
-export class SelectBoardDialogWidget extends ReactWidget {
-    @inject(BoardsService)
-    protected readonly boardsService: BoardsService;
-    @inject(BoardsNotificationService)
-    protected readonly boardsNotificationService: BoardsNotificationService;
-
-    protected readonly onChangedEmitter = new Emitter<BoardAndPortSelection>();
-    protected boardAndPortSelectionComponent: BoardAndPortSelectionComponent | null;
-    protected attachedBoards: Promise<{ boards: Board[] }>;
-
-    boardAndPort: BoardAndPortSelection = {};
-
-    constructor() {
-        super();
-        this.id = 'select-board-dialog';
-
-        this.toDispose.push(this.onChangedEmitter);
-    }
-
-    get onChanged(): Event<BoardAndPortSelection> {
-        return this.onChangedEmitter.event;
-    }
-
-    reset(): void {
-        if (this.boardAndPortSelectionComponent) {
-            this.boardAndPortSelectionComponent.reset();
-        }
-        this.boardAndPort = {};
-    }
-
-    setAttachedBoards(attachedBoards: Promise<{ boards: Board[] }>): void {
-        this.attachedBoards = attachedBoards;
-    }
-
-    protected fireChanged(boardAndPort: BoardAndPortSelection): void {
-        this.onChangedEmitter.fire(boardAndPort);
-    }
-
-    protected render(): React.ReactNode {
-        let content: React.ReactNode;
-
-        const boardsServiceDelegate = this.boardsService;
-        const attachedBoards = this.attachedBoards;
-        const boardsService: BoardsService = {
-            getAttachedBoards: () => attachedBoards,
-            selectBoard: (board: Board) => boardsServiceDelegate.selectBoard(board),
-            getSelectBoard: () => boardsServiceDelegate.getSelectBoard(),
-            search: (options: { query?: string }) => boardsServiceDelegate.search(options),
-            install: async (item: BoardPackage) => {
-                await boardsServiceDelegate.install(item);
-                this.boardsNotificationService.notifyBoardsInstalled();
-            }
-        }
-
-        content = <React.Fragment>
-            <div className='selectBoardContainer'>
-                <div className='head'>
-                    <div className='title'>
-                        Select Other Board &amp; Port
-                    </div>
-                    <div className='text'>
-                        <p>Select both a BOARD and a PORT if you want to upload a sketch.</p>
-                        <p>If you only select a BOARD you will be able just to compile,</p>
-                        <p>but not to upload your sketch.</p>
-                    </div>
-                </div>
-                <BoardAndPortSelectionComponent
-                    ref={ref => this.boardAndPortSelectionComponent = ref}
-                    boardsService={boardsService}
-                    onSelect={this.onSelect} />
-            </div>
-        </React.Fragment>
-
-        return content;
-    }
-
-    protected readonly onSelect = (selection: BoardAndPortSelection) => { this.doOnSelect(selection) };
-    protected doOnSelect(selection: BoardAndPortSelection) {
-        this.boardAndPort = selection;
-        this.fireChanged(this.boardAndPort);
-    }
-}

arduino-ide-extension/src/browser/boards/select-board-dialog.ts

@@ -1,113 +0,0 @@
-import { AbstractDialog, DialogProps, Widget, Panel, DialogError } from '@theia/core/lib/browser';
-import { injectable, inject } from 'inversify';
-import { SelectBoardDialogWidget, BoardAndPortSelection } from './select-board-dialog-widget';
-import { Message } from '@phosphor/messaging';
-import { Disposable } from '@theia/core';
-import { Board, BoardsService, AttachedSerialBoard } from '../../common/protocol/boards-service';
-
-@injectable()
-export class SelectBoardDialogProps extends DialogProps {
-
-}
-
-@injectable()
-export class SelectBoardDialog extends AbstractDialog<BoardAndPortSelection> {
-
-    protected readonly dialogPanel: Panel;
-    protected attachedBoards: Board[];
-
-    constructor(
-        @inject(SelectBoardDialogProps) protected readonly props: SelectBoardDialogProps,
-        @inject(SelectBoardDialogWidget) protected readonly widget: SelectBoardDialogWidget,
-        @inject(BoardsService) protected readonly boardService: BoardsService
-    ) {
-        super({ title: props.title });
-
-        this.dialogPanel = new Panel();
-        this.dialogPanel.addWidget(this.widget);
-
-        this.contentNode.classList.add('select-board-dialog');
-
-        this.toDispose.push(this.widget.onChanged(() => this.update()));
-        this.toDispose.push(this.dialogPanel);
-
-        this.attachedBoards = [];
-        this.init();
-
-        this.appendCloseButton('CANCEL');
-        this.appendAcceptButton('OK');
-    }
-
-    protected init() {
-        const boards = this.boardService.getAttachedBoards();
-        boards.then(b => this.attachedBoards = b.boards);
-        this.widget.setAttachedBoards(boards);
-    }
-
-    protected onAfterAttach(msg: Message): void {
-        Widget.attach(this.dialogPanel, this.contentNode);
-
-        this.toDisposeOnDetach.push(Disposable.create(() => {
-            Widget.detach(this.dialogPanel);
-        }))
-
-        super.onAfterAttach(msg);
-        this.update();
-    }
-
-    protected onUpdateRequest(msg: Message) {
-        super.onUpdateRequest(msg);
-        this.widget.update();
-    }
-
-    protected onActivateRequest(msg: Message): void {
-        this.widget.activate();
-    }
-
-    protected handleEnter(event: KeyboardEvent): boolean | void {
-        if (event.target instanceof HTMLTextAreaElement) {
-            return false;
-        }
-    }
-
-    protected isValid(value: BoardAndPortSelection): DialogError {
-        if (!value.board) {
-            if (value.port) {
-                return 'Please pick the Board connected to the Port you have selected';
-            }
-            return false;
-        }
-        return '';
-    }
-
-    get value(): BoardAndPortSelection {
-        const boardAndPortSelection = this.widget.boardAndPort;
-        if (this.attachedBoards.length) {
-            boardAndPortSelection.board = this.attachedBoards.find(b => {
-                const isAttachedBoard = !!boardAndPortSelection.board &&
-                    b.name === boardAndPortSelection.board.name &&
-                    b.fqbn === boardAndPortSelection.board.fqbn;
-                if (boardAndPortSelection.port) {
-                    return isAttachedBoard &&
-                        AttachedSerialBoard.is(b) &&
-                        b.port === boardAndPortSelection.port;
-                } else {
-                    return isAttachedBoard;
-                }
-
-            })
-                || boardAndPortSelection.board;
-        }
-        return boardAndPortSelection;
-    }
-
-    close(): void {
-        this.widget.reset();
-        super.close();
-    }
-
-    onAfterDetach(msg: Message) {
-        this.widget.reset();
-        super.onAfterDetach(msg);
-    }
-}

arduino-ide-extension/src/browser/components/component-list/component-list-item.tsx

@@ -1,78 +1,25 @@
 import * as React from 'react';
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
-import { ArduinoComponent } from '../../../common/protocol/arduino-component';
+import { ListItemRenderer } from './list-item-renderer';
 
-export class ComponentListItem extends React.Component<ComponentListItem.Props> {
+export class ComponentListItem<T> extends React.Component<ComponentListItem.Props<T>> {
 
-    protected onClick = (event: React.SyntheticEvent<HTMLAnchorElement, Event>) => {
-        const { target } = event.nativeEvent;
-        if (target instanceof HTMLAnchorElement) {
-            this.props.windowService.openNewWindow(target.href);
-            event.nativeEvent.preventDefault();
-        }
-    }
-
-    protected async install(item: ArduinoComponent): Promise<void> {
+    protected async install(item: T): Promise<void> {
         await this.props.install(item);
     }
 
     render(): React.ReactNode {
-        const { item } = this.props;
-
-        const style = ComponentListItem.Styles;
-        const name = <span className={style.NAME_CLASS}>{item.name}</span>;
-        const author = <span className={style.AUTHOR_CLASS}>{item.author}</span>;
-        const installedVersion = !!item.installedVersion && <div className={style.VERSION_INFO_CLASS}>
-            <span className={style.VERSION_CLASS}>Version {item.installedVersion}</span>
-            <span className={style.INSTALLED_CLASS}>INSTALLED</span>
-        </div>;
-
-        const summary = <div className={style.SUMMARY_CLASS}>{item.summary}</div>;
-
-        const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onClick}>More info</a>;
-        const install = this.props.install && item.installable && !item.installedVersion &&
-            <button className={style.INSTALL_BTN_CLASS} onClick={this.install.bind(this, item)}>INSTALL</button>;
-
-        return <div className={[style.LIST_ITEM_CLASS, style.NO_SELECT_CLASS].join(' ')}>
-            <div className={style.HEADER_CLASS}>
-                <span>{name} by {author}</span>
-                {installedVersion}
-            </div>
-            <div className={style.CONTENT_CLASS}>
-                {summary}
-            </div>
-            <div className={style.FOOTER_CLASS}>
-                {moreInfo}
-                {install}
-            </div>
-        </div>;
+        const { item, itemRenderer, install } = this.props;
+        return itemRenderer.renderItem(item, install.bind(this));
     }
 
 }
 
 export namespace ComponentListItem {
 
-    export interface Props {
-        readonly item: ArduinoComponent;
-        readonly windowService: WindowService;
-        readonly install: (comp: ArduinoComponent) => Promise<void>;
-    }
-
-    export namespace Styles {
-        export const LIST_ITEM_CLASS = 'component-list-item';
-        export const HEADER_CLASS = 'header';
-        export const VERSION_INFO_CLASS = 'version-info';
-        export const CONTENT_CLASS = 'content';
-        export const FOOTER_CLASS = 'footer';
-        export const INSTALLED_CLASS = 'installed';
-        export const NO_SELECT_CLASS = 'noselect';
-
-        export const NAME_CLASS = 'name';
-        export const AUTHOR_CLASS = 'author';
-        export const VERSION_CLASS = 'version';
-        export const SUMMARY_CLASS = 'summary';
-        export const DESCRIPTION_CLASS = 'description';
-        export const INSTALL_BTN_CLASS = 'install';
+    export interface Props<T> {
+        readonly item: T;
+        readonly install: (item: T) => Promise<void>;
+        readonly itemRenderer: ListItemRenderer<T>;
     }
 
 }

arduino-ide-extension/src/browser/components/component-list/component-list.tsx

@@ -1,16 +1,15 @@
 import * as React from 'react';
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
 import { ComponentListItem } from './component-list-item';
-import { ArduinoComponent } from '../../../common/protocol/arduino-component';
+import { ListItemRenderer } from './list-item-renderer';
 
-export class ComponentList extends React.Component<ComponentList.Props> {
+export class ComponentList<T> extends React.Component<ComponentList.Props<T>> {
 
     protected container?: HTMLElement;
 
     render(): React.ReactNode {
         return <div
             className={'items-container'}
-            ref={element => this.container = element || undefined}>
+            ref={this.setRef}>
             {this.props.items.map(item => this.createItem(item))}
         </div>;
     }
@@ -21,19 +20,28 @@ export class ComponentList extends React.Component<ComponentList.Props> {
         }
     }
 
-    protected createItem(item: ArduinoComponent): React.ReactNode {
-        return <ComponentListItem key={item.name} item={item} windowService={this.props.windowService} install={this.props.install} />
+    protected setRef = (element: HTMLElement | null) => {
+        this.container = element || undefined;
+    }
+
+    protected createItem(item: T): React.ReactNode {
+        return <ComponentListItem<T>
+            key={this.props.itemLabel(item)}
+            item={item}
+            itemRenderer={this.props.itemRenderer}
+            install={this.props.install} />
     }
 
 }
 
 export namespace ComponentList {
 
-    export interface Props {
-        readonly items: ArduinoComponent[];
-        readonly windowService: WindowService;
-        readonly install: (comp: ArduinoComponent) => Promise<void>;
-        readonly resolveContainer?: (element: HTMLElement) => void;
+    export interface Props<T> {
+        readonly items: T[];
+        readonly itemLabel: (item: T) => string;
+        readonly itemRenderer: ListItemRenderer<T>;
+        readonly install: (item: T) => Promise<void>;
+        readonly resolveContainer: (element: HTMLElement) => void;
     }
 
 }

arduino-ide-extension/src/browser/components/component-list/filterable-list-container.tsx

@@ -1,24 +1,27 @@
 import * as React from 'react';
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import debounce = require('lodash.debounce');
+import { Event } from '@theia/core/lib/common/event';
+import { Searchable } from '../../../common/protocol/searchable';
+import { Installable } from '../../../common/protocol/installable';
+import { InstallationProgressDialog } from '../installation-progress-dialog';
 import { SearchBar } from './search-bar';
 import { ComponentList } from './component-list';
-import { LibraryService } from '../../../common/protocol/library-service';
-import { ArduinoComponent } from '../../../common/protocol/arduino-component';
-import { InstallationProgressDialog } from '../installation-progress-dialog';
+import { ListItemRenderer } from './list-item-renderer';
 
-export class FilterableListContainer extends React.Component<FilterableListContainer.Props, FilterableListContainer.State> {
+export class FilterableListContainer<T> extends React.Component<FilterableListContainer.Props<T>, FilterableListContainer.State<T>> {
 
-    constructor(props: Readonly<FilterableListContainer.Props>) {
+    constructor(props: Readonly<FilterableListContainer.Props<T>>) {
         super(props);
         this.state = {
             filterText: '',
             items: []
         };
-        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
     }
 
     componentWillMount(): void {
+        this.search = debounce(this.search, 500);
         this.handleFilterTextChange('');
+        this.props.filterTextChangeEvent(this.handleFilterTextChange.bind(this));
     }
 
     render(): React.ReactNode {
@@ -42,36 +45,43 @@ export class FilterableListContainer extends React.Component<FilterableListConta
     }
 
     protected renderComponentList(): React.ReactNode {
-        return <ComponentList
+        const { itemLabel, resolveContainer, itemRenderer } = this.props;
+        return <ComponentList<T>
             items={this.state.items}
+            itemLabel={itemLabel}
+            itemRenderer={itemRenderer}
             install={this.install.bind(this)}
-            windowService={this.props.windowService}
-            resolveContainer={this.props.resolveContainer}
+            resolveContainer={resolveContainer}
         />
     }
 
-    private handleFilterTextChange(filterText: string): void {
-        const { props } = this.state;
-        this.props.service.search({ query: filterText, props }).then(result => {
+    protected handleFilterTextChange = (filterText: string) => {
+        this.setState({ filterText });
+        this.search(filterText);
+    }
+
+    protected search(query: string): void {
+        const { searchable } = this.props;
+        searchable.search({ query: query.trim() }).then(result => {
             const { items } = result;
             this.setState({
-                filterText,
                 items: this.sort(items)
             });
         });
     }
 
-    protected sort(items: ArduinoComponent[]): ArduinoComponent[] {
-        return items.sort((left, right) => left.name.localeCompare(right.name));
+    protected sort(items: T[]): T[] {
+        const { itemLabel } = this.props;
+        return items.sort((left, right) => itemLabel(left).localeCompare(itemLabel(right)));
     }
 
-    protected async install(comp: ArduinoComponent): Promise<void> {
-        const dialog = new InstallationProgressDialog(comp.name);
+    protected async install(item: T): Promise<void> {
+        const { installable, searchable, itemLabel } = this.props;
+        const dialog = new InstallationProgressDialog(itemLabel(item));
         dialog.open();
         try {
-            await this.props.service.install(comp);
-            const { props } = this.state;
-            const { items } = await this.props.service.search({ query: this.state.filterText, props });
+            await installable.install(item);
+            const { items } = await searchable.search({ query: this.state.filterText });
             this.setState({ items: this.sort(items) });
         } finally {
             dialog.close();
@@ -82,23 +92,19 @@ export class FilterableListContainer extends React.Component<FilterableListConta
 
 export namespace FilterableListContainer {
 
-    export interface Props {
-        readonly service: ComponentSource;
-        readonly windowService: WindowService;
-        readonly resolveContainer?: (element: HTMLElement) => void;
-        readonly resolveFocus?: (element: HTMLElement | undefined) => void;
+    export interface Props<T> {
+        readonly installable: Installable<T>;
+        readonly searchable: Searchable<T>;
+        readonly itemLabel: (item: T) => string;
+        readonly itemRenderer: ListItemRenderer<T>;
+        readonly resolveContainer: (element: HTMLElement) => void;
+        readonly resolveFocus: (element: HTMLElement | undefined) => void;
+        readonly filterTextChangeEvent: Event<string>;
     }
 
-    export interface State {
+    export interface State<T> {
         filterText: string;
-        items: ArduinoComponent[];
-        props?: LibraryService.Search.Props;
-    }
-
-    export interface ComponentSource {
-        search(req: { query: string, props?: LibraryService.Search.Props }): Promise<{ items: ArduinoComponent[] }>
-        install(board: ArduinoComponent): Promise<void>;
+        items: T[];
     }
 
 }
-

arduino-ide-extension/src/browser/components/component-list/list-item-renderer.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { inject, injectable } from 'inversify';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+
+@injectable()
+export abstract class ListItemRenderer<T> {
+
+    @inject(WindowService)
+    protected windowService: WindowService;
+
+    protected onClick = (event: React.SyntheticEvent<HTMLAnchorElement, Event>) => {
+        const { target } = event.nativeEvent;
+        if (target instanceof HTMLAnchorElement) {
+            this.windowService.openNewWindow(target.href, { external: true });
+            event.nativeEvent.preventDefault();
+        }
+    }
+
+    abstract renderItem(item: T, install: (item: T) => Promise<void>): React.ReactNode;
+
+}

arduino-ide-extension/src/browser/components/component-list/list-widget-frontend-contribution.ts

@@ -0,0 +1,12 @@
+import { injectable } from 'inversify';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import { AbstractViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
+import { ListWidget } from './list-widget';
+
+@injectable()
+export abstract class ListWidgetFrontendContribution<T> extends AbstractViewContribution<ListWidget<T>> implements FrontendApplicationContribution {
+
+    async initializeLayout(): Promise<void> {
+    }
+
+}

arduino-ide-extension/src/browser/components/component-list/list-widget.tsx

@@ -1,43 +1,39 @@
 import * as React from 'react';
-import { inject, injectable, postConstruct } from 'inversify';
+import { injectable, postConstruct } from 'inversify';
 import { Message } from '@phosphor/messaging';
 import { Deferred } from '@theia/core/lib/common/promise-util';
+import { Emitter } from '@theia/core/lib/common/event';
 import { MaybePromise } from '@theia/core/lib/common/types';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
-import { LibraryFilterableListContainer } from './library-filterable-list-container';
-import { LibraryService } from '../../common/protocol/library-service';
+import { Installable } from '../../../common/protocol/installable';
+import { Searchable } from '../../../common/protocol/searchable';
+import { FilterableListContainer } from './filterable-list-container';
+import { ListItemRenderer } from './list-item-renderer';
 
 @injectable()
-export class LibraryListWidget extends ReactWidget {
-
-    static WIDGET_ID = 'library-list-widget';
-    static WIDGET_LABEL = 'Library Manager';
-
-    @inject(LibraryService)
-    protected readonly libraryService: LibraryService;
-
-    @inject(WindowService)
-    protected readonly windowService: WindowService;
+export abstract class ListWidget<T> extends ReactWidget {
 
     /**
      * Do not touch or use it. It is for setting the focus on the `input` after the widget activation.
      */
     protected focusNode: HTMLElement | undefined;
     protected readonly deferredContainer = new Deferred<HTMLElement>();
+    protected readonly filterTextChangeEmitter = new Emitter<string>();
 
-    constructor() {
+    constructor(protected options: ListWidget.Options<T>) {
         super();
-        this.id = LibraryListWidget.WIDGET_ID
-        this.title.label = LibraryListWidget.WIDGET_LABEL;
-        this.title.caption = LibraryListWidget.WIDGET_LABEL
-        this.title.iconClass = 'library-tab-icon';
+        const { id, label, iconClass } = options;
+        this.id = id;
+        this.title.label = label;
+        this.title.caption = label;
+        this.title.iconClass = iconClass
         this.title.closable = true;
         this.addClass('arduino-list-widget');
         this.node.tabIndex = 0; // To be able to set the focus on the widget.
         this.scrollOptions = {
             suppressScrollX: true
         }
+        this.toDispose.push(this.filterTextChangeEmitter);
     }
 
     @postConstruct()
@@ -64,25 +60,30 @@ export class LibraryListWidget extends ReactWidget {
     }
 
     render(): React.ReactNode {
-        return <LibraryFilterableListContainer
+        return <FilterableListContainer<T>
             resolveContainer={this.deferredContainer.resolve}
             resolveFocus={this.onFocusResolved}
-            service={this.libraryService}
-            windowService={this.windowService}
-        />;
+            searchable={this.options.searchable}
+            installable={this.options.installable}
+            itemLabel={this.options.itemLabel}
+            itemRenderer={this.options.itemRenderer}
+            filterTextChangeEvent={this.filterTextChangeEmitter.event}/>;
+    }
+
+    refresh(filterText: string): void {
+        this.deferredContainer.promise.then(() => this.filterTextChangeEmitter.fire(filterText));
     }
 
 }
 
 export namespace ListWidget {
-
-    /**
-     * Props for customizing the abstract list widget.
-     */
-    export interface Props {
+    export interface Options<T> {
         readonly id: string;
-        readonly title: string;
+        readonly label: string;
         readonly iconClass: string;
+        readonly installable: Installable<T>;
+        readonly searchable: Searchable<T>;
+        readonly itemLabel: (item: T) => string;
+        readonly itemRenderer: ListItemRenderer<T>;
     }
-
 }

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

@@ -1,148 +0,0 @@
-import * as React from 'react';
-import { BoardsService, Board } from '../../common/protocol/boards-service';
-// import { SelectBoardDialog } from './select-board-dialog';
-import { QuickPickService } from '@theia/core/lib/common/quick-pick-service';
-import { BoardsNotificationService } from '../boards-notification-service';
-import { ARDUINO_TOOLBAR_ITEM_CLASS } from '../toolbar/arduino-toolbar';
-
-export class ConnectedBoards extends React.Component<ConnectedBoards.Props, ConnectedBoards.State> {
-    static TOOLBAR_ID: 'connected-boards-toolbar';
-
-    constructor(props: ConnectedBoards.Props) {
-        super(props);
-        this.state = { boardsLoading: false };
-
-        props.boardsNotificationService.on('boards-installed', () => this.onBoardsInstalled());
-    }
-
-    render(): React.ReactNode {
-        let content = [];
-        if (!!this.state.boards && this.state.boards.length > 0) {
-            content = this.state.boards.map((b, i) => <option value={i} key={i}>{b.name}</option>);
-        } else {
-            let label;
-            if (this.state.boardsLoading) {
-                label = "Loading ...";
-            } else {
-                label = "No board attached";
-            }
-            content = [ <option key="loading" value="0">{label}</option> ];
-        }
-
-        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 key='arduino-connected-boards-select-opt-group' label="Attached boards">
-                    { content }
-                </optgroup>
-                <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>
-            </select>
-        </div>;
-    }
-
-    componentDidMount(): void {
-        this.reloadBoards();
-    }
-
-    protected onBoardsInstalled() {
-        if (!!this.findUnknownBoards()) {
-            this.reloadBoards();
-        }
-    }
-
-    protected findUnknownBoards(): Board[] {
-        if (!this.state || !this.state.boards) {
-            return [];
-        }
-
-        return this.state.boards.filter(b => !b.fqbn || b.name === "unknown");
-    }
-
-    protected async reloadBoards() {
-        const prevSelection = this.state.selection;
-        this.setState({ boardsLoading: true, boards: undefined, selection: "loading" });
-        const { boards } = await this.props.boardsService.getAttachedBoards()
-        this.setState({ boards, boardsLoading: false, selection: prevSelection });
-
-        if (boards) {
-            this.setState({ selection: "0" });
-            await this.props.boardsService.selectBoard(boards[0]);
-
-            const unknownBoards = this.findUnknownBoards();
-            if (unknownBoards && unknownBoards.length > 0) {
-                this.props.onUnknownBoard(unknownBoards[0]);
-            }
-        }
-    }
-
-    protected async onBoardSelect(evt: React.ChangeEvent<HTMLSelectElement>) {
-        const selection = evt.target.value;
-        if (selection === "select-other" || selection === "selected-other") {
-            let selectedBoard = this.state.otherBoard;
-            if (selection === "select-other" || !selectedBoard) {
-                selectedBoard = await this.selectedInstalledBoard();
-            }
-            if (!selectedBoard) {
-                return;
-            }
-
-            await this.props.boardsService.selectBoard(selectedBoard);
-            this.setState({otherBoard: selectedBoard, selection: "selected-other"});
-            return;
-        }
-
-        const selectedBoard = (this.state.boards || [])[parseInt(selection, 10)];
-        if (!selectedBoard) {
-            return;
-        }
-        await this.props.boardsService.selectBoard(selectedBoard);
-        this.setState({selection});
-    }
-
-    protected async selectedInstalledBoard(): Promise<Board | undefined> {
-        const {items} = await this.props.boardsService.search({});
-
-        const idx = new Map<string, Board>();
-        items.filter(pkg => !!pkg.installedVersion).forEach(pkg => pkg.boards.forEach(brd => idx.set(`${brd.name}`, brd) ));
-
-        if (idx.size === 0) {
-            this.props.onNoBoardsInstalled();
-            return;
-        }
-
-        const selection = await this.props.quickPickService.show(Array.from(idx.keys()));
-        if (!selection) {
-            return;
-        }
-
-        return idx.get(selection);
-    }
-
-}
-
-export namespace ConnectedBoards {
-
-    export interface Props {
-        readonly boardsService: BoardsService;
-        readonly boardsNotificationService: BoardsNotificationService;
-        readonly quickPickService: QuickPickService;
-        readonly onNoBoardsInstalled: () => void;
-        readonly onUnknownBoard: (board: Board) => void;
-    }
-
-    export interface State {
-        boardsLoading: boolean;
-        boards?: Board[];
-        otherBoard?: Board;
-        selection?: string;
-    }
-
-    export namespace Styles {
-        export const CONNECTED_BOARDS_CLASS = 'connected-boards';
-    }
-
-}

arduino-ide-extension/src/browser/components/installation-progress-dialog.tsx

@@ -1,12 +1,12 @@
-import { AbstractDialog } from "@theia/core/lib/browser";
+import { AbstractDialog } from '@theia/core/lib/browser';
 
+export class InstallationProgressDialog extends AbstractDialog<undefined> {
 
-export class InstallationProgressDialog extends AbstractDialog<string> {
-    readonly value: "does-not-matter";
+    readonly value = undefined;
 
     constructor(componentName: string) {
         super({ title: 'Installation in progress' });
         this.contentNode.textContent = `Installing ${componentName}. Please wait.`;
     }
 
-}
+}

arduino-ide-extension/src/browser/customization/arduino-about-dialog.ts

@@ -0,0 +1,25 @@
+import { injectable, inject, postConstruct } from 'inversify';
+import { AboutDialog, ABOUT_CONTENT_CLASS } from '@theia/core/lib/browser/about-dialog';
+import { ConfigService } from '../../common/protocol/config-service';
+
+@injectable()
+export class ArduinoAboutDialog extends AboutDialog {
+
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
+
+    @postConstruct()
+    protected async init(): Promise<void> {
+        const [, version] = await Promise.all([super.init(), this.configService.getVersion()]);
+        if (version) {
+            const { firstChild } = this.contentNode;
+            if (firstChild instanceof HTMLElement && firstChild.classList.contains(ABOUT_CONTENT_CLASS)) {
+                const cliVersion = document.createElement('div');
+                cliVersion.textContent = version;
+                firstChild.appendChild(cliVersion);
+                // TODO: anchor to the commit in the `arduino-cli` repository.
+            }
+        }
+    }
+
+}

arduino-ide-extension/src/browser/customization/arduino-application-shell.ts

@@ -0,0 +1,33 @@
+import { ApplicationShell, Widget, Saveable, FocusTracker, Message } from '@theia/core/lib/browser';
+import { EditorWidget } from '@theia/editor/lib/browser';
+
+export class ArduinoApplicationShell extends ApplicationShell {
+
+    protected refreshBottomPanelToggleButton() {
+    }
+
+    protected async track(widget: Widget): Promise<void> {
+        const tracker = (this as any).tracker as FocusTracker<Widget>;
+        tracker.add(widget);
+        this.disableClose(Saveable.apply(widget));
+        if (ApplicationShell.TrackableWidgetProvider.is(widget)) {
+            for (const toTrack of await widget.getTrackableWidgets()) {
+                tracker.add(toTrack);
+                this.disableClose(Saveable.apply(toTrack));
+            }
+            if (widget.onDidChangeTrackableWidgets) {
+                widget.onDidChangeTrackableWidgets(widgets => widgets.forEach(w => this.track(w)));
+            }
+        }
+    }
+
+    private disableClose(widget: Widget | undefined): void {
+        if (widget instanceof EditorWidget) {
+            const onCloseRequest = (_: Message) => {
+                // NOOP
+            };
+            (widget as any).onCloseRequest = onCloseRequest.bind(widget);
+        }
+    }
+
+}

arduino-ide-extension/src/browser/customization/arduino-editor-contribution.ts

@@ -1,8 +1,9 @@
-import {EditorContribution} from '@theia/editor/lib/browser/editor-contribution'; 
+import { EditorContribution } from '@theia/editor/lib/browser/editor-contribution';
 import { TextEditor } from '@theia/editor/lib/browser';
 import { StatusBarAlignment } from '@theia/core/lib/browser';
 
-export class CustomEditorContribution extends EditorContribution {
+export class ArduinoEditorContribution extends EditorContribution {
+
     protected updateLanguageStatus(editor: TextEditor | undefined): void {
     }
 
@@ -18,4 +19,5 @@ export class CustomEditorContribution extends EditorContribution {
             priority: 100
         });
     }
-}
+
+}

arduino-ide-extension/src/browser/customization/arduino-file-menu-contribution.ts

@@ -0,0 +1,11 @@
+import { injectable } from 'inversify';
+import { FileMenuContribution } from '@theia/workspace/lib/browser';
+import { MenuModelRegistry } from '@theia/core';
+
+@injectable()
+export class ArduinoFileMenuContribution extends FileMenuContribution {
+
+    registerMenus(registry: MenuModelRegistry) {
+    }
+
+}

arduino-ide-extension/src/browser/customization/arduino-frontend-application.ts

@@ -0,0 +1,38 @@
+import { injectable, inject } from 'inversify';
+import { FileSystem } from '@theia/filesystem/lib/common/filesystem';
+import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
+import { FrontendApplication } from '@theia/core/lib/browser/frontend-application';
+import { ArduinoFrontendContribution, ArduinoAdvancedMode } from '../arduino-frontend-contribution';
+
+@injectable()
+export class ArduinoFrontendApplication extends FrontendApplication {
+
+    @inject(FileSystem)
+    protected readonly fileSystem: FileSystem;
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(ArduinoFrontendContribution)
+    protected readonly frontendContribution: ArduinoFrontendContribution;
+
+    protected async initializeLayout(): Promise<void> {
+        super.initializeLayout().then(() => {
+            // If not in PRO mode, we open the sketch file with all the related files.
+            // Otherwise, we reuse the workbench's restore functionality and we do not open anything at all.
+            // TODO: check `otherwise`. Also, what if we check for opened editors, instead of blindly opening them?
+            if (!ArduinoAdvancedMode.TOGGLED) {
+                this.workspaceService.roots.then(roots => {
+                    for (const root of roots) {
+                        this.fileSystem.exists(root.uri).then(exists => {
+                            if (exists) {
+                                this.frontendContribution.openSketchFiles(root.uri);
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+}

arduino-ide-extension/src/browser/customization/arduino-monaco-status-bar-contribution.ts

@@ -0,0 +1,11 @@
+import { MonacoStatusBarContribution } from '@theia/monaco/lib/browser/monaco-status-bar-contribution';
+
+export class ArduinoMonacoStatusBarContribution extends MonacoStatusBarContribution {
+
+    protected setConfigTabSizeWidget() {
+    }
+
+    protected setLineEndingWidget() {
+    }
+
+}

arduino-ide-extension/src/browser/customization/custom-application-shell.ts

@@ -1,7 +0,0 @@
-import { ApplicationShell } from "@theia/core/lib/browser";
-
-export class CustomApplicationShell extends ApplicationShell {
-    protected refreshBottomPanelToggleButton() {
-        
-    }
-}

arduino-ide-extension/src/browser/customization/custom-common-frontend-contribution.ts

@@ -1,44 +0,0 @@
-import { injectable } from "inversify";
-import { CommonFrontendContribution, CommonMenus, CommonCommands } from "@theia/core/lib/browser";
-import { MenuModelRegistry } from "@theia/core";
-
-@injectable()
-export class CustomCommonFrontendContribution extends CommonFrontendContribution {
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerSubmenu(CommonMenus.FILE, 'File');
-        registry.registerSubmenu(CommonMenus.EDIT, 'Edit');
-
-        registry.registerSubmenu(CommonMenus.FILE_SETTINGS_SUBMENU, 'Settings');
-
-        registry.registerMenuAction(CommonMenus.EDIT_UNDO, {
-            commandId: CommonCommands.UNDO.id,
-            order: '0'
-        });
-        registry.registerMenuAction(CommonMenus.EDIT_UNDO, {
-            commandId: CommonCommands.REDO.id,
-            order: '1'
-        });
-
-        registry.registerMenuAction(CommonMenus.EDIT_FIND, {
-            commandId: CommonCommands.FIND.id,
-            order: '0'
-        });
-        registry.registerMenuAction(CommonMenus.EDIT_FIND, {
-            commandId: CommonCommands.REPLACE.id,
-            order: '1'
-        });
-
-        registry.registerMenuAction(CommonMenus.EDIT_CLIPBOARD, {
-            commandId: CommonCommands.CUT.id,
-            order: '0'
-        });
-        registry.registerMenuAction(CommonMenus.EDIT_CLIPBOARD, {
-            commandId: CommonCommands.COPY.id,
-            order: '1'
-        });
-        registry.registerMenuAction(CommonMenus.EDIT_CLIPBOARD, {
-            commandId: CommonCommands.PASTE.id,
-            order: '2'
-        });
-    }
-}

arduino-ide-extension/src/browser/customization/custom-editor-widget-factory.ts

@@ -1,22 +0,0 @@
-import { injectable } from "inversify";
-import { EditorWidgetFactory } from "@theia/editor/lib/browser/editor-widget-factory";
-import URI from "@theia/core/lib/common/uri";
-import { EditorWidget } from "@theia/editor/lib/browser";
-
-@injectable()
-export class CustomEditorWidgetFactory extends EditorWidgetFactory {
-
-    protected async createEditor(uri: URI): Promise<EditorWidget> {
-        const icon = await this.labelProvider.getIcon(uri);
-        return this.editorProvider(uri).then(textEditor => {
-            const newEditor = new EditorWidget(textEditor, this.selectionService);
-            newEditor.id = this.id + ':' + uri.toString();
-            newEditor.title.closable = false;
-            newEditor.title.label = this.labelProvider.getName(uri);
-            newEditor.title.iconClass = icon + ' file-icon';
-            newEditor.title.caption = this.labelProvider.getLongName(uri);
-            return newEditor;
-        });
-    }
-
-}

arduino-ide-extension/src/browser/customization/custom-file-menu-contribution.ts

@@ -1,10 +0,0 @@
-import { injectable } from "inversify";
-import { FileMenuContribution } from "@theia/workspace/lib/browser";
-import { MenuModelRegistry } from "@theia/core";
-
-@injectable()
-export class CustomFileMenuContribution extends FileMenuContribution {
-    registerMenus(registry: MenuModelRegistry) {
-        
-    }
-}

arduino-ide-extension/src/browser/customization/custom-frontend-application.ts

@@ -1,18 +0,0 @@
-import { injectable, inject } from "inversify";
-import { FrontendApplication } from "@theia/core/lib/browser";
-import { ArduinoFrontendContribution } from "../arduino-frontend-contribution";
-
-@injectable()
-export class CustomFrontendApplication extends FrontendApplication {
-
-    @inject(ArduinoFrontendContribution)
-    protected readonly frontendContribution: ArduinoFrontendContribution;
-
-    protected async initializeLayout(): Promise<void> {
-        const location = new URL(window.location.href);
-        const sketchPath = location.searchParams.get('sketch');
-        if (sketchPath) {
-            this.frontendContribution.openSketchFiles(decodeURIComponent(sketchPath));
-        }
-    }
-}

arduino-ide-extension/src/browser/customization/custom-monaco-editor-menu-contribution.ts

@@ -1,10 +0,0 @@
-import { injectable } from "inversify";
-import { MonacoEditorMenuContribution } from "@theia/monaco/lib/browser/monaco-menu";
-import { MenuModelRegistry } from "@theia/core";
-
-@injectable()
-export class CustomMonacoEditorMenuContribution extends MonacoEditorMenuContribution {
-    registerMenus(registry: MenuModelRegistry) {
-        
-    }
-}

arduino-ide-extension/src/browser/customization/silent-monaco-status-bar-contribution.ts

@@ -1,11 +0,0 @@
-import {MonacoStatusBarContribution} from '@theia/monaco/lib/browser/monaco-status-bar-contribution';
-
-export class SilentMonacoStatusBarContribution extends MonacoStatusBarContribution {
-    protected setConfigTabSizeWidget() {
-        
-    }
-
-    protected setLineEndingWidget() {
-        
-    }
-}

arduino-ide-extension/src/browser/customization/silent-navigator-contribution.ts

@@ -1,10 +1,11 @@
-import { injectable } from "inversify";
-import { FileNavigatorContribution } from "@theia/navigator/lib/browser/navigator-contribution";
-import { FrontendApplication } from "@theia/core/lib/browser";
+import { injectable } from 'inversify';
+import { FileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
+import { FrontendApplication } from '@theia/core/lib/browser';
 
 @injectable()
 export class SilentNavigatorContribution extends FileNavigatorContribution {
+
     async initializeLayout(app: FrontendApplication): Promise<void> {
-        // await this.openView();
     }
-}
+
+}

arduino-ide-extension/src/browser/customization/silent-outline-contribution.ts

@@ -1,26 +1,12 @@
-/********************************************************************************
- * Copyright (C) 2017 TypeFox and others.
- *
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License v. 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * This Source Code may also be made available under the following Secondary
- * Licenses when the conditions for such availability set forth in the Eclipse
- * Public License v. 2.0 are satisfied: GNU General Public License, version 2
- * with the GNU Classpath Exception which is available at
- * https://www.gnu.org/software/classpath/license.html.
- *
- * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
- ********************************************************************************/
-
 import { injectable } from 'inversify';
 import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
+import { FrontendApplication } from '@theia/core/lib/browser';
 
 @injectable()
 export class SilentOutlineViewContribution extends OutlineViewContribution {
 
-    async initializeLayout(): Promise<void> {
-        // await this.openView();
+    async initializeLayout(app: FrontendApplication): Promise<void> {
     }
+
 }
+

arduino-ide-extension/src/browser/customization/silent-output-tool-contribution.ts

@@ -1,10 +1,11 @@
-import { OutputToolbarContribution } from "@theia/output/lib/browser/output-toolbar-contribution";
-import { TabBarToolbarRegistry } from "@theia/core/lib/browser/shell/tab-bar-toolbar";
-import { injectable } from "inversify";
+import { OutputToolbarContribution } from '@theia/output/lib/browser/output-toolbar-contribution';
+import { TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { injectable } from 'inversify';
 
 @injectable()
 export class ArduinoOutputToolContribution extends OutputToolbarContribution {
+
     async registerToolbarItems(toolbarRegistry: TabBarToolbarRegistry): Promise<void> {
-        // register nothing
     }
-}
+
+}

arduino-ide-extension/src/browser/customization/silent-problem-contribution.ts

@@ -1,15 +1,15 @@
 import { injectable } from 'inversify';
 import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
 import { ProblemStat } from '@theia/markers/lib/browser/problem/problem-manager';
+import { FrontendApplication } from '@theia/core/lib/browser';
 
 @injectable()
 export class SilentProblemContribution extends ProblemContribution {
 
-    async initializeLayout(): Promise<void> {
-        // await this.openView();
+    async initializeLayout(app: FrontendApplication): Promise<void> {
     }
 
     protected setStatusBarElement(problemStat: ProblemStat) {
-        
     }
+
 }

arduino-ide-extension/src/browser/customization/silent-scm-contribution.ts

@@ -0,0 +1,14 @@
+import { injectable } from 'inversify';
+import { ScmContribution } from '@theia/scm/lib/browser/scm-contribution';
+import { StatusBarEntry } from '@theia/core/lib/browser';
+
+@injectable()
+export class SilentScmContribution extends ScmContribution {
+
+    async initializeLayout(): Promise<void> {
+    }
+
+    protected setStatusBarEntry(id: string, entry: StatusBarEntry): void {
+    }
+
+}

arduino-ide-extension/src/browser/customization/silent-search-in-workspace-contribution.ts

@@ -0,0 +1,11 @@
+import { injectable } from 'inversify';
+import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
+import { FrontendApplication } from '@theia/core/lib/browser';
+
+@injectable()
+export class SilentSearchInWorkspaceContribution extends SearchInWorkspaceFrontendContribution {
+
+    async initializeLayout(app: FrontendApplication): Promise<void> {
+    }
+
+}

arduino-ide-extension/src/browser/editor/arduino-monaco-editor-provider.ts

@@ -0,0 +1,34 @@
+import { inject, injectable } from 'inversify';
+import URI from '@theia/core/lib/common/uri';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+import { MonacoEditorModel } from '@theia/monaco/lib/browser/monaco-editor-model';
+import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
+import { ConfigService } from '../../common/protocol/config-service';
+
+@injectable()
+export class ArduinoMonacoEditorProvider extends MonacoEditorProvider {
+
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
+    protected dataDirUri: string | undefined;
+
+    protected async getModel(uri: URI, toDispose: DisposableCollection): Promise<MonacoEditorModel> {
+        // `createMonacoEditorOptions` is not `async` so we ask the `dataDirUri` here.
+        // https://github.com/eclipse-theia/theia/issues/6234
+        const { dataDirUri } = await this.configService.getConfiguration()
+        this.dataDirUri = dataDirUri;
+        return super.getModel(uri, toDispose);
+    }
+
+    protected createMonacoEditorOptions(model: MonacoEditorModel): MonacoEditor.IOptions {
+        const options = this.createOptions(this.preferencePrefixes, model.uri, model.languageId);
+        options.model = model.textEditorModel;
+        options.readOnly = model.readOnly;
+        if (this.dataDirUri) {
+            options.readOnly = new URI(this.dataDirUri).isEqualOrParent(new URI(model.uri));
+        }
+        return options;
+    }
+
+}

arduino-ide-extension/src/browser/icons/mask-buttons.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!--Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)-->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" id="Layer_1" width="198px" height="99px" x="0px" y="0px" enable-background="new 0 0 198 99" version="1.1" viewBox="0 0 198 99" inkscape:version="0.91 r13725" sodipodi:docname="buttons.svg" xml:space="preserve">
+  <metadata id="metadata327">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>
+          image/svg+xml
+        </dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs325"/>
+  <sodipodi:namedview id="namedview323" bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" objecttolerance="10" pagecolor="#ffffff" showgrid="false" showguides="true" inkscape:current-layer="Layer_1" inkscape:cx="45.252385" inkscape:cy="36.224987" inkscape:guide-bbox="true" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1000" inkscape:window-maximized="1" inkscape:window-width="1215" inkscape:window-x="65" inkscape:window-y="24" inkscape:zoom="4"/>
+  <g id="g5" transform="translate(-0.12000084,0)">
+    <polyline id="polyline9" stroke-miterlimit="10" points="21.453,12.745 15.788,20.571    11.775,16.658  " style="fill:none;stroke:#000000;stroke-width:2.30489993;stroke-miterlimit:10"/>
+  </g>
+  <g id="g23" transform="translate(-0.26100159,0)">
+    <polygon id="polygon27" points="45.412,15.313 49.307,15.313 49.307,11.53 54.701,16.875 49.331,22.245 49.331,18.563 45.412,18.539 " style="fill:#000000"/>
+  </g>
+  <g id="g41" transform="translate(-0.54399872,0)">
+    <polygon id="polygon45" points="114.44,19.083 114.44,15.116 110.586,15.116 116.032,9.621 121.502,15.091 117.751,15.091 117.726,19.083 " style="fill:#000000"/>
+    <rect id="rect47" width="1" height="1" x="110.511" y="22.193001" style="fill:#000000"/>
+    <rect id="rect49" width="1" height="1" x="112.518" y="22.193001" style="fill:#000000"/>
+    <rect id="rect51" width="1" height="1" x="114.517" y="22.193001" style="fill:#000000"/>
+    <rect id="rect53" width="1" height="1" x="116.525" y="22.193001" style="fill:#000000"/>
+    <rect id="rect55" width="1" height="1" x="118.524" y="22.193001" style="fill:#000000"/>
+    <rect id="rect57" width="1" height="1" x="120.531" y="22.193001" style="fill:#000000"/>
+  </g>
+  <g id="g59" transform="translate(-0.68600464,0)">
+    <polygon id="polygon63" points="150.79,9.621 150.79,13.588 154.644,13.588 149.198,19.083 143.728,13.612 147.479,13.613 147.504,9.621 " style="fill:#000000"/>
+    <rect id="rect65" width="1" height="1" x="143.65199" y="22.193001" style="fill:#000000"/>
+    <rect id="rect67" width="1" height="1" x="145.66" y="22.193001" style="fill:#000000"/>
+    <rect id="rect69" width="1" height="1" x="147.659" y="22.193001" style="fill:#000000"/>
+    <rect id="rect71" width="1" height="1" x="149.666" y="22.193001" style="fill:#000000"/>
+    <rect id="rect73" width="1" height="1" x="151.666" y="22.193001" style="fill:#000000"/>
+    <rect id="rect75" width="1" height="1" x="153.673" y="22.193001" style="fill:#000000"/>
+  </g>
+  <g id="g149" transform="translate(-0.40299988,0)">
+    <path id="path151" d="M 87.445,22.097" style="fill:#000000" inkscape:connector-curvature="0"/>
+    <polygon id="polygon155" points="83.44,10.094 84.441,10.094 88.421,14.079 88.421,15.057 87.445,15.057 83.44,15.057 " style="fill:#000000"/>
+    <polygon id="polygon157" points="78.404,11.093 78.404,22.097 87.445,22.097 87.445,14.87 88.421,14.87 88.421,23.134 77.399,23.134 77.399,10.094 83.562,10.094 83.568,11.093 " style="fill:#000000"/>
+    <rect id="rect159" width="0.995" height="0.99599999" x="79.399002" y="12.111" style="fill:#000000"/>
+    <rect id="rect161" width="0.995" height="0.99599999" x="81.394997" y="12.111" style="fill:#000000"/>
+    <rect id="rect163" width="0.995" height="0.99599999" x="79.399002" y="14.103" style="fill:#000000"/>
+    <rect id="rect165" width="0.995" height="0.99599999" x="81.394997" y="14.103" style="fill:#000000"/>
+    <rect id="rect167" width="0.995" height="0.99599999" x="79.399002" y="16.115999" style="fill:#000000"/>
+    <rect id="rect169" width="0.995" height="0.99599999" x="81.394997" y="16.115999" style="fill:#000000"/>
+    <rect id="rect171" width="0.995" height="0.99599999" x="83.403" y="16.115999" style="fill:#000000"/>
+    <rect id="rect173" width="0.995" height="0.99599999" x="85.400002" y="16.115999" style="fill:#000000"/>
+    <rect id="rect175" width="0.995" height="0.99599999" x="79.399002" y="18.118" style="fill:#000000"/>
+    <rect id="rect177" width="0.995" height="0.99599999" x="81.394997" y="18.118" style="fill:#000000"/>
+    <rect id="rect179" width="0.995" height="0.99599999" x="79.399002" y="20.132" style="fill:#000000"/>
+    <rect id="rect181" width="0.995" height="0.99599999" x="81.394997" y="20.132" style="fill:#000000"/>
+    <rect id="rect183" width="0.995" height="0.99599999" x="83.403" y="18.118" style="fill:#000000"/>
+    <rect id="rect185" width="0.995" height="0.99599999" x="85.400002" y="18.118" style="fill:#000000"/>
+    <rect id="rect187" width="0.995" height="0.99599999" x="83.403" y="20.132" style="fill:#000000"/>
+    <rect id="rect189" width="0.995" height="0.99599999" x="85.400002" y="20.132" style="fill:#000000"/>
+  </g>
+  <g id="g275" transform="translate(-0.82800293,0)">
+    <rect id="rect279" width="0.99900001" height="0.99800003" x="187.819" y="16.101" style="fill:#000000"/>
+    <rect id="rect281" width="0.99900001" height="0.99800003" x="189.825" y="16.101" style="fill:#000000"/>
+    <rect id="rect283" width="0.99900001" height="0.99800003" x="174.83299" y="16.101" style="fill:#000000"/>
+    <circle id="circle285" cx="181.80299" cy="16.101" r="4.0900002" stroke-miterlimit="10" style="fill:none;stroke:#000000;stroke-width:1.95439994;stroke-miterlimit:10"/>
+    <rect id="rect287" width="2.6800001" height="4.4229999" x="175.895" y="18.427999" style="fill:#000000" transform="matrix(0.6915,0.7224,-0.7224,0.6915,69.5827,-121.6599)"/>
+    <rect id="rect289" width="2.0280001" height="1.9960001" x="180.789" y="15.103" style="fill:#000000"/>
+  </g>
+</svg>

arduino-ide-extension/src/browser/language/arduino-language-client-contribution.ts

@@ -0,0 +1,40 @@
+import { injectable, inject, postConstruct } from 'inversify';
+import { BaseLanguageClientContribution } from '@theia/languages/lib/browser';
+import { BoardsServiceClientImpl } from '../boards/boards-service-client-impl';
+import { BoardsConfig } from '../boards/boards-config';
+
+@injectable()
+export class ArduinoLanguageClientContribution extends BaseLanguageClientContribution {
+
+    readonly id = 'ino';
+    readonly name = 'Arduino';
+
+    protected get documentSelector(): string[] {
+        return ['ino'];
+    }
+
+    protected get globPatterns() {
+        return ['**/*.ino'];
+    }
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    protected boardConfig?: BoardsConfig.Config;
+
+    @postConstruct()
+    protected init() {
+        this.boardsServiceClient.onBoardsConfigChanged(this.selectBoard.bind(this));
+    }
+
+    selectBoard(config: BoardsConfig.Config): void {
+        this.boardConfig = config;
+        // Force a restart to send the new board config to the language server
+        this.restart();
+    }
+
+    protected getStartParameters(): BoardsConfig.Config | undefined {
+        return this.boardConfig;
+    }
+
+}

arduino-ide-extension/src/browser/library/library-component-list-item.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import { ComponentListItem } from '../components/component-list/component-list-item';
-
-export class LibraryComponentListItem extends ComponentListItem {
-
-    render(): React.ReactNode {
-        const { item } = this.props;
-
-        const name = <span className={'name'}>{item.name}</span>;
-        const author = <span className={'author'}>by {item.author}</span>;
-        const installedVersion = !!item.installedVersion && <div className={'version-info'}>
-            <span className={'version'}>Version {item.installedVersion}</span>
-            <span className={'installed'}>INSTALLED</span>
-        </div>;
-
-        const summary = <div className={'summary'}>{item.summary}</div>;
-
-        const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onClick}>More info</a>;
-        const install = this.props.install && item.installable && !item.installedVersion &&
-            <button className={'install'} onClick={this.install.bind(this, item)}>INSTALL</button>;
-        const versions = (() => {
-            const { availableVersions } = item;
-            if (availableVersions.length === 0) {
-                return undefined;
-            } else if (availableVersions.length === 1) {
-                return <label>{availableVersions[0]}</label>
-            } else {
-                return <select>{item.availableVersions.map(version => <option value={version} key={version}>{version}</option>)}</select>;
-            }
-        })();
-
-        return <div className={'component-list-item noselect'}>
-            <div className={'header'}>
-                <span>{name} {author}</span>
-                {installedVersion}
-            </div>
-            <div className={'content'}>
-                {summary}
-            </div>
-            <div className={'info'}>
-                {moreInfo}
-            </div>
-            <div className={'footer'}>
-                {install}
-                {versions}
-            </div>
-        </div>;
-    }
-
-}

arduino-ide-extension/src/browser/library/library-component-list.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { ArduinoComponent } from '../../common/protocol/arduino-component';
-import { ComponentList } from '../components/component-list/component-list';
-import { LibraryComponentListItem } from './library-component-list-item';
-
-export class LibraryComponentList extends ComponentList {
-
-    createItem(item: ArduinoComponent): React.ReactNode {
-        return <LibraryComponentListItem
-            key={item.name}
-            item={item}
-            windowService={this.props.windowService}
-            install={this.props.install}
-        />
-    }
-
-}

arduino-ide-extension/src/browser/library/library-filterable-list-container.tsx

@@ -1,110 +0,0 @@
-import * as React from 'react';
-import { FilterableListContainer } from '../components/component-list/filterable-list-container';
-import { LibraryComponentList } from './library-component-list';
-
-export class LibraryFilterableListContainer extends FilterableListContainer {
-
-    constructor(props: Readonly<FilterableListContainer.Props>) {
-        super(props);
-        this.state = {
-            filterText: '',
-            items: [],
-            props: {
-                topic: this.topics[0],
-                type: this.types[0]
-            }
-        };
-    }
-
-    protected renderSearchFilter(): React.ReactNode {
-        const types = this.types.map(type => <option value={type} key={type}>{type}</option>);
-        let type = this.types[0];
-        if (this.state.props) {
-            const currentType = this.types.find(t => t === this.state.props!.type) || this.types[0];
-            if (currentType) {
-                type = currentType;
-            }
-        }
-        const topics = this.topics.map(topic => <option value={topic} key={topic}>{topic}</option>);
-        let topic = this.topics[0];
-        if (this.state.props) {
-            const currentTopic = this.topics.find(t => t === this.state.props!.topic) || this.topics[0];
-            if (currentTopic) {
-                topic = currentTopic;
-            }
-        }
-        return <div className={'search-filters'}>
-            <div className={'filter'}>
-                <div className={'title'} style={{ minWidth: '32.088px' }}>Type</div> {/** TODO: do `minWidth` better! */}
-                <select
-                    value={type}
-                    onChange={this.onTypeChange}>
-                    {types}
-                </select>
-            </div>
-            <div className={'filter'}>
-                <div className={'title'}>Topic</div>
-                <select
-                    value={topic}
-                    onChange={this.onTopicChange}>
-                    {topics}
-                </select>
-            </div>
-        </div>
-    }
-
-    protected onTypeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        const type = event.target.value;
-        const props = { ...(this.state.props || {}), ...{ type } };
-        this.setState({
-            props
-        });
-    }
-
-    protected onTopicChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-        const topic = event.target.value;
-        const props = { ...(this.state.props || {}), ...{ topic } };
-        this.setState({
-            props
-        });
-    }
-
-    protected renderComponentList(): React.ReactNode {
-        return <LibraryComponentList
-            items={this.state.items}
-            install={this.install.bind(this)}
-            windowService={this.props.windowService}
-            resolveContainer={this.props.resolveContainer}
-        />
-    }
-
-    private get topics(): string[] {
-        return [
-            'All',
-            'Communication',
-            'Data Processing',
-            'Data Storage',
-            'Device Control',
-            'Display',
-            'Other',
-            'Sensor',
-            'Signal Input/Output',
-            'Timing',
-            'Uncategorized'
-        ];
-    }
-
-    private get types(): string[] {
-        return [
-            'All',
-            'Updatable',
-            'Installed',
-            'Arduino',
-            'Partner',
-            'Recommended',
-            'Contributed',
-            'Retired'
-        ];
-    }
-
-}

arduino-ide-extension/src/browser/library/library-item-renderer.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { injectable } from 'inversify';
+import { Library } from '../../common/protocol/library-service';
+import { ListItemRenderer } from '../components/component-list/list-item-renderer';
+
+@injectable()
+export class LibraryItemRenderer extends ListItemRenderer<Library> {
+
+    renderItem(item: Library, install: (item: Library) => Promise<void>): React.ReactNode {
+        const name = <span className='name'>{item.name}</span>;
+        const author = <span className='author'>by {item.author}</span>;
+        const installedVersion = !!item.installedVersion && <div className='version-info'>
+            <span className='version'>Version {item.installedVersion}</span>
+            <span className='installed'>INSTALLED</span>
+        </div>;
+
+        const summary = <div className='summary'>{item.summary}</div>;
+
+        const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onClick}>More info</a>;
+        const installButton = item.installable && !item.installedVersion &&
+            <button className='install' onClick={install.bind(this, item)}>INSTALL</button>;
+
+        const versions = (() => {
+            const { availableVersions } = item;
+            if (!!item.installedVersion || availableVersions.length === 0) {
+                return undefined;
+            } else if (availableVersions.length === 1) {
+                return <label>{availableVersions[0]}</label>
+            } else {
+                return <select>{item.availableVersions.map(version => <option value={version} key={version}>{version}</option>)}</select>;
+            }
+        })();
+
+        return <div className='component-list-item noselect'>
+            <div className='header'>
+                <span>{name} {author}</span>
+                {installedVersion}
+            </div>
+            <div className='content'>
+                {summary}
+            </div>
+            <div className='info'>
+                {moreInfo}
+            </div>
+            <div className='footer'>
+                {installButton}
+                {versions}
+            </div>
+        </div>;
+    }
+
+}

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

@@ -0,0 +1,27 @@
+import { inject, injectable } from 'inversify';
+import { Library, LibraryService } from '../../common/protocol/library-service';
+import { ListWidget } from '../components/component-list/list-widget';
+import { LibraryItemRenderer } from './library-item-renderer';
+
+@injectable()
+export class LibraryListWidget extends ListWidget<Library> {
+
+    static WIDGET_ID = 'library-list-widget';
+    static WIDGET_LABEL = 'Library Manager';
+
+    constructor(
+        @inject(LibraryService) protected service: LibraryService,
+        @inject(LibraryItemRenderer) protected itemRenderer: LibraryItemRenderer) {
+
+        super({
+            id: LibraryListWidget.WIDGET_ID,
+            label: LibraryListWidget.WIDGET_LABEL,
+            iconClass: 'library-tab-icon',
+            searchable: service,
+            installable: service,
+            itemLabel: (item: Library) => item.name,
+            itemRenderer
+        });
+    }
+
+}

arduino-ide-extension/src/browser/markers/arduino-problem-manager.ts

@@ -0,0 +1,28 @@
+import { inject, injectable, postConstruct } from 'inversify';
+import { Diagnostic } from 'vscode-languageserver-types';
+import URI from '@theia/core/lib/common/uri';
+import { Marker } from '@theia/markers/lib/common/marker';
+import { ProblemManager } from '@theia/markers/lib/browser/problem/problem-manager';
+import { ConfigService } from '../../common/protocol/config-service';
+
+@injectable()
+export class ArduinoProblemManager extends ProblemManager {
+
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
+    protected dataDirUri: URI | undefined;
+
+    @postConstruct()
+    protected init(): void {
+        super.init();
+        this.configService.getConfiguration().then(({ dataDirUri }) => this.dataDirUri = new URI(dataDirUri));
+    }
+
+    setMarkers(uri: URI, owner: string, data: Diagnostic[]): Marker<Diagnostic>[] {
+        if (this.dataDirUri && this.dataDirUri.isEqualOrParent(uri)) {
+            return [];
+        }
+        return super.setMarkers(uri, owner, data);
+    }
+
+}

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

@@ -1,11 +1,13 @@
-import { injectable } from "inversify";
-import { BrowserMenuBarContribution } from "@theia/core/lib/browser/menu/browser-menu-plugin";
-import { FrontendApplication } from "@theia/core/lib/browser";
+import { injectable } from 'inversify';
+import { FrontendApplication } from '@theia/core/lib/browser';
+import { BrowserMenuBarContribution } from '@theia/core/lib/browser/menu/browser-menu-plugin';
 
 @injectable()
 export class ArduinoMenuContribution extends BrowserMenuBarContribution {
+
     onStart(app: FrontendApplication): void {
         const menu = this.factory.createMenuBar();
         app.shell.addWidget(menu, { area: 'top' });
     }
-}
+
+}

arduino-ide-extension/src/browser/menu/browser-arduino-menu-module.ts

@@ -7,4 +7,4 @@ import '../../../src/browser/style/browser-menu.css'
 export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind) => {
     unbind(BrowserMenuBarContribution);
     bind(BrowserMenuBarContribution).to(ArduinoMenuContribution).inSingletonScope();
-})
+});

arduino-ide-extension/src/browser/monitor/monitor-connection.ts

@@ -0,0 +1,53 @@
+import { injectable, inject } from "inversify";
+import { MonitorService, ConnectionConfig } from "../../common/protocol/monitor-service";
+import { Emitter, Event } from "@theia/core";
+
+@injectable()
+export class MonitorConnection {
+
+    @inject(MonitorService)
+    protected readonly monitorService: MonitorService;
+
+    connectionId: string | undefined;
+
+    protected _connectionConfig: ConnectionConfig | undefined;
+
+    protected readonly onConnectionChangedEmitter = new Emitter<string | undefined>();
+    readonly onConnectionChanged: Event<string | undefined> = this.onConnectionChangedEmitter.event;
+
+    get connectionConfig(): ConnectionConfig | undefined {
+        return this._connectionConfig;
+    }
+
+    async connect(config: ConnectionConfig): Promise<string | undefined> {
+        if (this.connectionId) {
+            await this.disconnect();
+        }
+        const { connectionId } = await this.monitorService.connect(config);
+        this.connectionId = connectionId;
+        this._connectionConfig = config;
+
+        this.onConnectionChangedEmitter.fire(this.connectionId);
+
+        return connectionId;
+    }
+
+    async disconnect(): Promise<boolean> {
+        let result = true;
+        const connections = await this.monitorService.getConnectionIds();
+        if (this.connectionId && connections.findIndex(id => id === this.connectionId) >= 0) {
+            console.log('>>> Disposing existing monitor connection before establishing a new one...');
+            result = await this.monitorService.disconnect(this.connectionId);
+            if (!result) {
+                // TODO: better!!!
+                console.error(`Could not close connection: ${this.connectionId}. Check the backend logs.`);
+            } else {
+                console.log(`<<< Disposed ${this.connectionId} connection.`);
+                this.connectionId = undefined;
+                this._connectionConfig = undefined;
+                this.onConnectionChangedEmitter.fire(this.connectionId);
+            }
+        }
+        return result;
+    }
+}

arduino-ide-extension/src/browser/monitor/monitor-model.ts

@@ -0,0 +1,58 @@
+import { injectable } from "inversify";
+import { Emitter } from "@theia/core";
+
+export namespace MonitorModel {
+    export interface Data {
+        autoscroll: boolean,
+        timestamp: boolean,
+        baudRate: number,
+        lineEnding: string
+    }
+}
+
+@injectable()
+export class MonitorModel {
+
+    protected readonly onChangeEmitter = new Emitter<void>();
+
+    readonly onChange = this.onChangeEmitter.event;
+
+    protected _autoscroll: boolean = true;
+    protected _timestamp: boolean = false;
+    baudRate: number;
+    lineEnding: string = '\n';
+
+    get autoscroll(): boolean {
+        return this._autoscroll;
+    }
+
+    get timestamp(): boolean {
+        return this._timestamp;
+    }
+
+    toggleAutoscroll(): void {
+        this._autoscroll = !this._autoscroll;
+        this.onChangeEmitter.fire(undefined);
+    }
+
+    toggleTimestamp(): void {
+        this._timestamp = !this._timestamp;
+        this.onChangeEmitter.fire(undefined);
+    }
+
+    restore(model: MonitorModel.Data) {
+        this._autoscroll = model.autoscroll;
+        this._timestamp = model.timestamp;
+        this.baudRate = model.baudRate;
+        this.lineEnding = model.lineEnding;
+    }
+
+    store(): MonitorModel.Data {
+        return {
+            autoscroll: this._autoscroll,
+            timestamp: this._timestamp,
+            baudRate: this.baudRate,
+            lineEnding: this.lineEnding
+        }
+    }
+}

arduino-ide-extension/src/browser/monitor/monitor-service-client-impl.ts

@@ -0,0 +1,23 @@
+import { injectable } from 'inversify';
+import { Emitter } from '@theia/core/lib/common/event';
+import { MonitorServiceClient, MonitorReadEvent, MonitorError } from '../../common/protocol/monitor-service';
+
+@injectable()
+export class MonitorServiceClientImpl implements MonitorServiceClient {
+
+    protected readonly onReadEmitter = new Emitter<MonitorReadEvent>();
+    protected readonly onErrorEmitter = new Emitter<MonitorError>();
+    readonly onRead = this.onReadEmitter.event;
+    readonly onError = this.onErrorEmitter.event;
+
+    notifyRead(event: MonitorReadEvent): void {
+        this.onReadEmitter.fire(event);
+        const { connectionId, data } = event;
+        console.log(`Received data from ${connectionId}: ${data}`);
+    }
+
+    notifyError(error: MonitorError): void {
+        this.onErrorEmitter.fire(error);
+    }
+
+}

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

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { injectable, inject } from "inversify";
+import { AbstractViewContribution } from "@theia/core/lib/browser";
+import { MonitorWidget } from "./monitor-widget";
+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 {
+        export const AUTOSCROLL: Command = {
+            id: 'serial-monitor-autoscroll',
+            label: 'Autoscroll'
+        }
+        export const TIMESTAMP: Command = {
+            id: 'serial-monitor-timestamp',
+            label: 'Timestamp'
+        }
+        export const CLEAR_OUTPUT: Command = {
+            id: 'serial-monitor-clear-output',
+            label: 'Clear Output',
+            iconClass: 'clear-all'
+        }
+    }
+}
+
+@injectable()
+export class MonitorViewContribution extends AbstractViewContribution<MonitorWidget> implements TabBarToolbarContribution {
+
+    static readonly OPEN_SERIAL_MONITOR = MonitorWidget.ID + ':toggle';
+
+    @inject(MonitorModel) protected readonly model: MonitorModel;
+
+    constructor() {
+        super({
+            widgetId: MonitorWidget.ID,
+            widgetName: 'Serial Monitor',
+            defaultWidgetOptions: {
+                area: 'bottom'
+            },
+            toggleCommandId: MonitorViewContribution.OPEN_SERIAL_MONITOR,
+            toggleKeybinding: 'ctrl+shift+m'
+        })
+    }
+
+    registerMenus(menus: MenuModelRegistry): void {
+        if (this.toggleCommand) {
+            menus.registerMenuAction(ArduinoMenus.TOOLS, {
+                commandId: this.toggleCommand.id,
+                label: 'Serial Monitor'
+            });
+        }
+    }
+
+    async registerToolbarItems(registry: TabBarToolbarRegistry) {
+        registry.registerItem({
+            id: 'monitor-autoscroll',
+            render: () => this.renderAutoScrollButton(),
+            isVisible: widget => widget instanceof MonitorWidget,
+            onDidChange: this.model.onChange
+        });
+        registry.registerItem({
+            id: 'monitor-timestamp',
+            render: () => this.renderTimestampButton(),
+            isVisible: widget => widget instanceof MonitorWidget,
+            onDidChange: this.model.onChange
+        });
+        registry.registerItem({
+            id: SerialMonitor.Commands.CLEAR_OUTPUT.id,
+            command: SerialMonitor.Commands.CLEAR_OUTPUT.id,
+            tooltip: 'Clear Output'
+        });
+    }
+
+    registerCommands(commands: CommandRegistry): void {
+        commands.registerCommand(SerialMonitor.Commands.CLEAR_OUTPUT, {
+            isEnabled: widget => widget instanceof MonitorWidget,
+            isVisible: widget => widget instanceof MonitorWidget,
+            execute: widget => {
+                if (widget instanceof MonitorWidget) {
+                    widget.clear();
+                }
+            }
+        });
+        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 key='autoscroll-toolbar-item'>
+            <div
+                title='Toggle Autoscroll'
+                className={`item enabled fa fa-angle-double-down arduino-monitor ${this.model.autoscroll ? 'toggled' : ''}`}
+                onClick={this.toggleAutoScroll}
+            ></div>
+        </React.Fragment>;
+    }
+
+    protected readonly toggleAutoScroll = () => this.doToggleAutoScroll();
+    protected async doToggleAutoScroll() {
+        this.model.toggleAutoscroll();
+    }
+
+    protected renderTimestampButton(): React.ReactNode {
+        return <React.Fragment key='line-ending-toolbar-item'>
+            <div
+                title='Toggle Timestamp'
+                className={`item enabled fa fa-clock-o arduino-monitor ${this.model.timestamp ? 'toggled' : ''}`}
+                onClick={this.toggleTimestamp}
+            ></div>
+        </React.Fragment>;
+    }
+
+    protected readonly toggleTimestamp = () => this.doToggleTimestamp();
+    protected async doToggleTimestamp() {
+        this.model.toggleTimestamp();
+    }
+}

arduino-ide-extension/src/browser/monitor/monitor-widget.tsx

@@ -0,0 +1,398 @@
+import { ReactWidget, Message, Widget, StatefulWidget } from "@theia/core/lib/browser";
+import { postConstruct, injectable, inject } from "inversify";
+import * as React from 'react';
+import Select, { components } from 'react-select';
+import { Styles } from "react-select/src/styles";
+import { ThemeConfig } from "react-select/src/theme";
+import { OptionsType } from "react-select/src/types";
+import { MonitorServiceClientImpl } from "./monitor-service-client-impl";
+import { MessageService } from "@theia/core";
+import { ConnectionConfig, MonitorService } from "../../common/protocol/monitor-service";
+import { MonitorConnection } from "./monitor-connection";
+import { BoardsServiceClientImpl } from "../boards/boards-service-client-impl";
+import { AttachedSerialBoard, BoardsService, Board } from "../../common/protocol/boards-service";
+import { BoardsConfig } from "../boards/boards-config";
+import { MonitorModel } from "./monitor-model";
+
+export namespace SerialMonitorSendField {
+    export interface Props {
+        onSend: (text: string) => void
+    }
+
+    export interface State {
+        value: string;
+    }
+}
+
+export class SerialMonitorSendField extends React.Component<SerialMonitorSendField.Props, SerialMonitorSendField.State> {
+
+    protected inputField: HTMLInputElement | null;
+
+    constructor(props: SerialMonitorSendField.Props) {
+        super(props);
+        this.state = { value: '' };
+
+        this.handleChange = this.handleChange.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    componentDidMount() {
+        if (this.inputField) {
+            this.inputField.focus();
+        }
+    }
+
+    render() {
+        return <React.Fragment>
+            <form onSubmit={this.handleSubmit}>
+                <input
+                    tabIndex={-1}
+                    ref={ref => this.inputField = ref}
+                    type='text' id='serial-monitor-send'
+                    autoComplete='off'
+                    value={this.state.value}
+                    onChange={this.handleChange} />
+                <input className="btn" type="submit" value="Submit" />
+            </form>
+        </React.Fragment>
+    }
+
+    protected handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+        this.setState({ value: event.target.value });
+    }
+
+    protected handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+        this.props.onSend(this.state.value);
+        this.setState({ value: '' });
+        event.preventDefault();
+    }
+}
+
+export namespace SerialMonitorOutput {
+    export interface Props {
+        lines: string[];
+        model: MonitorModel;
+    }
+}
+
+export class SerialMonitorOutput extends React.Component<SerialMonitorOutput.Props> {
+    protected theEnd: HTMLDivElement | null;
+
+    render() {
+        let result = '';
+
+        const style: React.CSSProperties = {
+            whiteSpace: 'pre',
+            fontFamily: 'monospace',
+        };
+
+        for (const text of this.props.lines) {
+            result += text;
+        }
+        return <React.Fragment>
+            <div style={style}>{result}</div>
+            <div style={{ float: "left", clear: "both" }}
+                ref={(el) => { this.theEnd = el; }}>
+            </div>
+        </React.Fragment>;
+    }
+
+    protected scrollToBottom() {
+        if (this.theEnd) {
+            this.theEnd.scrollIntoView();
+        }
+    }
+
+    componentDidMount() {
+        if (this.props.model.autoscroll) {
+            this.scrollToBottom();
+        }
+    }
+
+    componentDidUpdate() {
+        if (this.props.model.autoscroll) {
+            this.scrollToBottom();
+        }
+    }
+}
+
+export interface SelectOption {
+    label: string;
+    value: string | number;
+}
+
+@injectable()
+export class MonitorWidget extends ReactWidget implements StatefulWidget {
+
+    static readonly ID = 'serial-monitor';
+
+    protected lines: string[];
+    protected tempData: string;
+
+    protected widgetHeight: number;
+
+    protected continuePreviousConnection: boolean;
+
+    constructor(
+        @inject(MonitorServiceClientImpl) protected readonly serviceClient: MonitorServiceClientImpl,
+        @inject(MonitorConnection) protected readonly connection: MonitorConnection,
+        @inject(MonitorService) protected readonly monitorService: MonitorService,
+        @inject(BoardsServiceClientImpl) protected readonly boardsServiceClient: BoardsServiceClientImpl,
+        @inject(MessageService) protected readonly messageService: MessageService,
+        @inject(BoardsService) protected readonly boardsService: BoardsService,
+        @inject(MonitorModel) protected readonly model: MonitorModel
+    ) {
+        super();
+
+        this.id = MonitorWidget.ID;
+        this.title.label = 'Serial Monitor';
+        this.title.iconClass = 'arduino-serial-monitor-tab-icon';
+
+        this.lines = [];
+        this.tempData = '';
+
+        this.scrollOptions = undefined;
+
+        this.toDisposeOnDetach.push(serviceClient.onRead(({ data, connectionId }) => {
+            this.tempData += data;
+            if (this.tempData.endsWith('\n')) {
+                if (this.model.timestamp) {
+                    const nu = new Date();
+                    const h = (100 + nu.getHours()).toString().substr(1)
+                    const min = (100 + nu.getMinutes()).toString().substr(1)
+                    const sec = (100 + nu.getSeconds()).toString().substr(1)
+                    const ms = (1000 + nu.getMilliseconds()).toString().substr(1);
+                    this.tempData = `${h}:${min}:${sec}.${ms} -> ` + this.tempData;
+                }
+                this.lines.push(this.tempData);
+                this.tempData = '';
+                this.update();
+            }
+        }));
+
+        // TODO onError
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.update();
+    }
+
+    clear(): void {
+        this.lines = [];
+        this.update();
+    }
+
+    storeState(): MonitorModel.Data {
+        return this.model.store();
+    }
+
+    restoreState(oldState: MonitorModel.Data): void {
+        this.model.restore(oldState);
+    }
+
+    protected onAfterAttach(msg: Message) {
+        super.onAfterAttach(msg);
+        this.clear();
+        this.connect();
+        this.toDisposeOnDetach.push(
+            this.boardsServiceClient.onBoardsChanged(async states => {
+                const currentConnectionConfig = this.connection.connectionConfig;
+                const connectedBoard = states.newState.boards
+                    .filter(AttachedSerialBoard.is)
+                    .find(board => {
+                        const potentiallyConnected = currentConnectionConfig && currentConnectionConfig.board;
+                        if (AttachedSerialBoard.is(potentiallyConnected)) {
+                            return Board.equals(board, potentiallyConnected) && board.port === potentiallyConnected.port;
+                        }
+                        return false;
+                    });
+                if (connectedBoard && currentConnectionConfig) {
+                    this.continuePreviousConnection = true;
+                    this.connection.connect(currentConnectionConfig);
+                }
+            })
+        );
+        this.toDisposeOnDetach.push(
+            this.boardsServiceClient.onBoardsConfigChanged(async boardConfig => {
+                this.connect();
+            })
+        )
+
+        this.toDisposeOnDetach.push(this.connection.onConnectionChanged(() => {
+            if (!this.continuePreviousConnection) {
+                this.clear();
+            } else {
+                this.continuePreviousConnection = false;
+            }
+        }));
+    }
+
+    protected onBeforeDetach(msg: Message) {
+        super.onBeforeDetach(msg);
+        this.connection.disconnect();
+    }
+
+    protected onResize(msg: Widget.ResizeMessage) {
+        super.onResize(msg);
+        this.widgetHeight = msg.height;
+        this.update();
+    }
+
+    protected async connect() {
+        const config = await this.getConnectionConfig();
+        if (config) {
+            this.connection.connect(config);
+        }
+    }
+
+    protected async getConnectionConfig(): Promise<ConnectionConfig | undefined> {
+        const baudRate = this.model.baudRate;
+        const { boardsConfig } = this.boardsServiceClient;
+        const { selectedBoard, selectedPort } = boardsConfig;
+        if (!selectedBoard) {
+            this.messageService.warn('No boards selected.');
+            return;
+        }
+        const { name } = selectedBoard;
+        if (!selectedPort) {
+            this.messageService.warn(`No ports selected for board: '${name}'.`);
+            return;
+        }
+        const attachedBoards = await this.boardsService.getAttachedBoards();
+        const connectedBoard = attachedBoards.boards.filter(AttachedSerialBoard.is).find(board => BoardsConfig.Config.sameAs(boardsConfig, board));
+        if (!connectedBoard) {
+            return;
+        }
+
+        return {
+            baudRate,
+            board: selectedBoard,
+            port: selectedPort.address
+        }
+    }
+
+    protected getLineEndings(): OptionsType<SelectOption> {
+        return [
+            {
+                label: 'No Line Ending',
+                value: ''
+            },
+            {
+                label: 'Newline',
+                value: '\n'
+            },
+            {
+                label: 'Carriage Return',
+                value: '\r'
+            },
+            {
+                label: 'Both NL & CR',
+                value: '\r\n'
+            }
+        ]
+    }
+
+    protected getBaudRates(): OptionsType<SelectOption> {
+        const baudRates = [300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200];
+        return baudRates.map<SelectOption>(baudRate => ({ label: baudRate + ' baud', value: baudRate }))
+    }
+
+    protected render(): React.ReactNode {
+        const le = this.getLineEndings();
+        const br = this.getBaudRates();
+        const leVal = this.model.lineEnding && le.find(val => val.value === this.model.lineEnding);
+        const brVal = this.model.baudRate && br.find(val => val.value === this.model.baudRate);
+        return <React.Fragment>
+            <div className='serial-monitor-container'>
+                <div className='head'>
+                    <div className='send'>
+                        <SerialMonitorSendField onSend={this.onSend} />
+                    </div>
+                    <div className='config'>
+                        {this.renderSelectField('arduino-serial-monitor-line-endings', le, leVal || le[1], this.onChangeLineEnding)}
+                        {this.renderSelectField('arduino-serial-monitor-baud-rates', br, brVal || br[4], this.onChangeBaudRate)}
+                    </div>
+                </div>
+                <div id='serial-monitor-output-container'>
+                    <SerialMonitorOutput model={this.model} lines={this.lines} />
+                </div>
+            </div>
+        </React.Fragment>;
+    }
+
+    protected readonly onSend = (value: string) => this.doSend(value);
+    protected async doSend(value: string) {
+        const { connectionId } = this.connection;
+        if (connectionId) {
+            this.monitorService.send(connectionId, value + this.model.lineEnding);
+        }
+    }
+
+    protected readonly onChangeLineEnding = (le: SelectOption) => {
+        this.model.lineEnding = typeof le.value === 'string' ? le.value : '\n';
+    }
+
+    protected readonly onChangeBaudRate = async (br: SelectOption) => {
+        await this.connection.disconnect();
+        this.model.baudRate = typeof br.value === 'number' ? br.value : 9600;
+        this.clear();
+        const config = await this.getConnectionConfig();
+        if (config) {
+            await this.connection.connect(config);
+        }
+    }
+
+    protected renderSelectField(id: string, options: OptionsType<SelectOption>, defaultVal: SelectOption, onChange: (v: SelectOption) => void): React.ReactNode {
+        const height = 25;
+        const selectStyles: Styles = {
+            control: (provided, state) => ({
+                ...provided,
+                width: 200,
+                border: 'none'
+            }),
+            dropdownIndicator: (p, s) => ({
+                ...p,
+                padding: 0
+            }),
+            indicatorSeparator: (p, s) => ({
+                display: 'none'
+            }),
+            indicatorsContainer: (p, s) => ({
+                padding: '0 5px'
+            }),
+            menu: (p, s) => ({
+                ...p,
+                marginTop: 0
+            })
+        };
+        const theme: ThemeConfig = theme => ({
+            ...theme,
+            borderRadius: 0,
+            spacing: {
+                controlHeight: height,
+                baseUnit: 2,
+                menuGutter: 4
+            }
+        });
+        const DropdownIndicator = (
+            props: React.Props<typeof components.DropdownIndicator>
+        ) => {
+            return (
+                <span className='fa fa-caret-down caret'></span>
+            );
+        };
+        return <Select
+            options={options}
+            defaultValue={defaultVal}
+            onChange={onChange}
+            components={{ DropdownIndicator }}
+            theme={theme}
+            styles={selectStyles}
+            maxMenuHeight={this.widgetHeight - 40}
+            classNamePrefix='sms'
+            className='serial-monitor-select'
+            id={id}
+        />
+    }
+}

arduino-ide-extension/src/browser/shell/arduino-tab-bar-decorator.ts

@@ -0,0 +1,32 @@
+import { inject, injectable, postConstruct } from 'inversify';
+import URI from '@theia/core/lib/common/uri';
+import { Title, Widget } from '@phosphor/widgets';
+import { WidgetDecoration } from '@theia/core/lib/browser/widget-decoration';
+import { TabBarDecoratorService } from '@theia/core/lib/browser/shell/tab-bar-decorator';
+import { ConfigService } from '../../common/protocol/config-service';
+import { EditorWidget } from '@theia/editor/lib/browser';
+
+@injectable()
+export class ArduinoTabBarDecoratorService extends TabBarDecoratorService {
+
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
+    protected dataDirUri: URI | undefined;
+
+    @postConstruct()
+    protected init(): void {
+        super.init();
+        this.configService.getConfiguration().then(({ dataDirUri }) => this.dataDirUri = new URI(dataDirUri));
+    }
+
+    getDecorations(title: Title<Widget>): WidgetDecoration.Data[] {
+        if (title.owner instanceof EditorWidget) {
+            const editor = title.owner.editor;
+            if (this.dataDirUri && this.dataDirUri.isEqualOrParent(editor.uri)) {
+                return [];
+            }
+        }
+        return super.getDecorations(title);
+    }
+
+}

arduino-ide-extension/src/browser/sketch-factory.ts

@@ -1,60 +0,0 @@
-import { injectable, inject } from "inversify";
-import URI from "@theia/core/lib/common/uri";
-import { FileSystem } from "@theia/filesystem/lib/common";
-import { WindowService } from "@theia/core/lib/browser/window/window-service";
-
-@injectable()
-export class SketchFactory {
-
-    @inject(FileSystem)
-    protected readonly fileSystem: FileSystem;
-
-    @inject(WindowService)
-    protected readonly windowService: WindowService;
-
-    public async createNewSketch(parent: URI): Promise<void> {
-        const monthNames = ["january", "february", "march", "april", "may", "june",
-            "july", "august", "september", "october", "november", "december"
-        ];
-        const today = new Date();
-
-        const sketchBaseName = `sketch_${monthNames[today.getMonth()]}${today.getDay()}`;
-        let sketchName: string | undefined;
-        for (let i = 97; i < 97 + 26; i++) {
-            let sketchNameCandidate = `${sketchBaseName}${String.fromCharCode(i)}`;
-            if (await this.fileSystem.exists(parent.resolve(sketchNameCandidate).toString())) {
-                continue;
-            }
-
-            sketchName = sketchNameCandidate;
-            break;
-        }
-
-        if (!sketchName) {
-            throw new Error("Cannot create a unique sketch name");
-        }
-
-        try {
-            const sketchDir = parent.resolve(sketchName);
-            const sketchFile = sketchDir.resolve(`${sketchName}.ino`);
-            this.fileSystem.createFolder(sketchDir.toString());
-            this.fileSystem.createFile(sketchFile.toString(), { content: `
-void setup() {
-    // put your setup code here, to run once:
-
-}
-
-void loop() {
-    // put your main code here, to run repeatedly:
-
-}
-`                   });
-            const location = new URL(window.location.href);
-            location.searchParams.set('sketch', sketchFile.toString());
-            this.windowService.openNewWindow(location.toString());
-        } catch (e) {
-            throw new Error("Cannot create new sketch: " + e);
-        }
-    }
-
-}

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

@@ -18,47 +18,57 @@ is not optimized for dense, information rich UIs.
 
 :root {
     /* Custom Theme Colors */
-    --theia-arduino-light: rgb(0, 102, 102);
-    --theia-arduino-light1: rgb(0, 153, 153);
+    --theia-arduino-light: rgb(0, 100, 104);
+    --theia-arduino-light1: rgb(23, 161, 165);
     --theia-arduino-light2: rgb(218, 226, 228);
     --theia-arduino-light3: rgb(237, 241, 242);
     --theia-arduino-terminal: rgb(0, 0, 0);
+
     /* Borders: Width and color (bright to dark) */
+    
     --theia-border-width: 1px;
     --theia-panel-border-width: 2px;
     --theia-border-color0: var(--md-grey-100);
     --theia-border-color1: var(--md-grey-200);
     --theia-border-color2: var(--md-grey-300);
     --theia-border-color3: var(--md-grey-400);
+    
+    
     /* UI fonts: Family, size and color (dark to bright)
         ---------------------------------------------------
          The UI font CSS variables are used for the typography all of the Theia
          user interface elements that are not directly user-generated content.
       */
+
     --theia-ui-font-scale-factor: 1.2;
     --theia-ui-font-size0: calc(var(--theia-ui-font-size1) / var(--theia-ui-font-scale-factor));
-    --theia-ui-font-size1: 13px;
-    /* Base font size */
+    --theia-ui-font-size1: 13px; /* Base font size */
     --theia-ui-font-size2: calc(var(--theia-ui-font-size1) * var(--theia-ui-font-scale-factor));
     --theia-ui-font-size3: calc(var(--theia-ui-font-size2) * var(--theia-ui-font-scale-factor));
-    --theia-ui-icon-font-size: 14px;
-    /* Ensures px perfect FontAwesome icons */
+    --theia-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */
     --theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
     --theia-ui-font-color0: var(--md-grey-900);
     --theia-ui-font-color1: var(--md-grey-700);
     --theia-ui-font-color2: var(--md-grey-500);
     --theia-ui-font-color3: var(--md-grey-300);
+    
     /* Special font colors */
+    
     --theia-ui-icon-font-color: #ffffff;
     --theia-ui-bar-font-color0: var(--theia-ui-font-color0);
     --theia-ui-bar-font-color1: var(--theia-inverse-ui-font-color0); /* var(--theia-ui-font-color1); */
+    
     /* Use the inverse UI colors against the brand/accent/warn/error colors. */
+    
     --theia-inverse-ui-font-color0: rgba(255, 255, 255, 1.0);
     --theia-inverse-ui-font-color2: rgba(255, 255, 255, 0.7);
     --theia-inverse-ui-font-color3: rgba(255, 255, 255, 0.5);
+    
     /* Content fonts: Family, size and color (dark to bright)
          Content font variables are used for typography of user-generated content.
       */
+    
     --theia-content-font-size: 13px;
     --theia-content-line-height: 1.5;
     --theia-content-font-color0: black;
@@ -71,75 +81,101 @@ is not optimized for dense, information rich UIs.
     --theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
     --theia-terminal-font-family: monospace;
     --theia-ui-padding: 6px;
+
     /* Tab Icon Colors */
     --theia-tab-icon-color: var(--theia-ui-font-color1);
     --theia-tab-font-color: #000;
+    
     /* Main layout colors (bright to dark)
-        ------------------------------------ */
+      ------------------------------------ */
+    
     --theia-layout-color0: #ffffff;
-    --theia-layout-color1: var(--theia-arduino-light1);
+    --theia-layout-color1: #f7f9f9;
     --theia-layout-color2: #ececec;
-    --theia-layout-color3: var(--theia-arduino-light);
+    --theia-layout-color3: var(--theia-arduino-light2);
     --theia-layout-color4: #dcdcdc;
+
     /* Brand colors */
-    --theia-brand-color0: var(--md-blue-700);
-    --theia-brand-color1: var(--md-blue-500);
-    --theia-brand-color2: var(--md-blue-300);
-    --theia-brand-color3: var(--md-blue-100);
+    
+    --theia-brand-color0: var(--theia-arduino-light);
+    --theia-brand-color1: var(--theia-arduino-light1);
+    --theia-brand-color2: var(--theia-arduino-light2);
+    --theia-brand-color3: var(--theia-arduino-light3);
+    
     /* Secondary Brand colors */
+    
     --theia-secondary-brand-color0: var(--md-grey-700);
     --theia-secondary-brand-color1: #b5c8c9;
-    --theia-secondary-brand-color2: var(--md-grey-300);
-    --theia-secondary-brand-color3: var(--md-grey-100);
+    --theia-secondary-brand-color2: var(--theia-arduino-light2);
+    --theia-secondary-brand-color3: var(--theia-arduino-light3);
+    
     /* Accent colors (dark to bright): Use these to create contrast to layout colors. */
-    --theia-accent-color0: rgb(0, 102, 105);
-    --theia-accent-color1: rgb(0, 164, 167, 1.0);
-    --theia-accent-color2: rgb(0, 164, 167, 0.8);
-    --theia-accent-color3: rgb(0, 164, 167, 0.6);
-    --theia-accent-color4: rgb(0, 164, 167, 0.4);
+    
+    --theia-accent-color0: var(--theia-arduino-light);
+    --theia-accent-color1: rgb(77, 183, 187, 1.0);
+    --theia-accent-color2: rgb(77, 183, 187, 0.8);
+    --theia-accent-color3: rgb(77, 183, 187, 0.6);
+    --theia-accent-color4: rgba(77, 183, 187, 0.4);
+    
     /* Accent colors with opacity */
+    
     --theia-transparent-accent-color0: hsla(210, 63%, 46%, 0.3);
     --theia-transparent-accent-color1: hsla(207, 66%, 56%, 0.3);
     --theia-transparent-accent-color2: hsla(207, 64%, 85%, 0.3);
     --theia-transparent-accent-color3: hsla(205, 70%, 91%, 0.3);
+    
     /* State colors (warn, error, success, info)
         ------------------------------------------ */
     --theia-warn-color0: var(--md-amber-500);
     --theia-warn-color1: var(--md-amber-400);
     --theia-warn-color2: var(--md-amber-300);
     --theia-warn-color3: var(--md-amber-200);
+
     --theia-warn-font-color0: var(--md-grey-900);
+    
     --theia-error-color0: var(--md-red-400);
     --theia-error-color1: #da5b4a;
     --theia-error-color2: var(--md-red-200);
     --theia-error-color3: var(--md-red-100);
+    
     --theia-error-font-color0: var(--md-grey-300);
+    
     --theia-success-color0: var(--md-green-500);
     --theia-success-color1: var(--md-green-300);
     --theia-success-color2: var(--md-green-100);
     --theia-success-color3: var(--md-green-50);
+    
     --theia-success-font-color0: var(--md-grey-300);
+    
     --theia-info-color0: var(--md-cyan-700);
     --theia-info-color1: var(--md-cyan-500);
     --theia-info-color2: var(--md-cyan-300);
     --theia-info-color3: var(--md-cyan-100);
+    
     --theia-info-font-color0: var(--md-grey-300);
+    
     --theia-disabled-color0: var(--md-grey-500);
     --theia-disabled-color1: var(--md-grey-300);
     --theia-disabled-color2: var(--md-grey-200);
     --theia-disabled-color3: var(--md-grey-50);
+    
     --theia-added-color0: rgba(0, 255, 0, 0.8);
     --theia-removed-color0: rgba(230, 0, 0, 0.8);
     --theia-modified-color0: rgba(0, 100, 150, 0.8);
+    
     /* Background for selected text */
     --theia-selected-text-background: var(--theia-accent-color3);
+    
     /* Colors to highlight words in widgets like tree or editors */
+    
     --theia-word-highlight-color0: rgba(168, 172, 148, 0.7);
     --theia-word-highlight-color1: rgba(253, 255, 0, 0.2);
     --theia-word-highlight-match-color0: rgba(234, 92, 0, 0.33);
     --theia-word-highlight-match-color1: rgba(234, 92, 0, 0.5);
     --theia-word-highlight-replace-color0: rgba(155, 185, 85, 0.2);
+    
     /* Scroll-bars */
+    
     --theia-scrollbar-width: 10px;
     --theia-scrollbar-rail-width: 10px;
     --theia-scrollbar-thumb-color: hsla(0, 0%, 61%, .4);
@@ -147,7 +183,7 @@ is not optimized for dense, information rich UIs.
     --theia-scrollbar-active-thumb-color: hsla(0, 0%, 39%, .4);
     --theia-scrollbar-active-rail-color: transparent;
     /* Menu */
-    --theia-menu-color0: var(--theia-layout-color3);
+    --theia-menu-color0: var(--theia-arduino-light);
     --theia-menu-color1: var(--theia-layout-color0);
     --theia-menu-color2: #dae3e3;
     /* Statusbar */
@@ -155,9 +191,9 @@ is not optimized for dense, information rich UIs.
     --theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
     --theia-statusBar-font-size: 12px;
     /* Buttons */
-    --theia-ui-button-color: var(--theia-arduino-light);
-    --theia-ui-button-color-hover: var(--theia-arduino-light1);
-    --theia-ui-button-font-color: var(--theia-inverse-ui-font-color0);
+    --theia-ui-button-color: var(--theia-accent-color1);
+    --theia-ui-button-color-hover: var(--theia-accent-color2);
+    --theia-ui-button-font-color: var(--theia-arduino-light);
     --theia-ui-button-color-secondary: var(--theia-secondary-brand-color1);
     --theia-ui-button-color-secondary-hover: var(--theia-menu-color2);
     --theia-ui-button-font-color-secondary: var(--theia-inverse-ui-font-color0);
@@ -197,4 +233,8 @@ is not optimized for dense, information rich UIs.
     --theia-ansi-magenta-background-color: darkmagenta;
     --theia-ansi-cyan-background-color: darkcyan;
     --theia-ansi-white-background-color: #BDBDBD;
+
+    /* Output */
+    --theia-output-font-color: var(--theia-ui-font-color3);
+
   }

arduino-ide-extension/src/browser/style/board-select-dialog.css

@@ -7,11 +7,11 @@ div#select-board-dialog .selectBoardContainer .body {
     overflow: hidden;
 }
 
-div#select-board-dialog .selectBoardContainer .head {
-    margin-bottom: 10px;
+div.dialogContent.select-board-dialog > div.head {
+    padding-left: 21px;
 }
 
-div#select-board-dialog .selectBoardContainer .head .title {
+div.dialogContent.select-board-dialog > div.head .title {
     font-weight: 400;
     letter-spacing: .02em;
     font-size: 1.2em;
@@ -31,11 +31,11 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
     color: var(--theia-arduino-light);
 }
 
-#select-board-dialog .selectBoardContainer .body .search input, 
-#select-board-dialog .selectBoardContainer .body .boards.list,
-#select-board-dialog .selectBoardContainer .body .search, 
-#select-board-dialog .selectBoardContainer .body .ports.list {
-    background: white;
+#select-board-dialog .selectBoardContainer .search,
+#select-board-dialog .selectBoardContainer .search input,
+#select-board-dialog .selectBoardContainer .list,
+#select-board-dialog .selectBoardContainer .list {
+    background: white; /* TODO find a theia color instead! */
 }
 
 #select-board-dialog .selectBoardContainer .body .search input {
@@ -43,7 +43,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
     width: 100%;
     height: auto;
     max-height: 37px;
-    padding: 10px 8px;
+    padding: 10px 5px 10px 10px;
     margin: 0;
     vertical-align: top;
     display: flex;
@@ -56,6 +56,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
 
 #select-board-dialog .selectBoardContainer .body .container {
     flex: 1;
+    padding: 0px 10px 0px 0px;
 }
 
 #select-board-dialog .selectBoardContainer .body .left.container .content {
@@ -66,27 +67,61 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
     margin: 0 0 0 5px;
 }
 
-#select-board-dialog .selectBoardContainer .body .container .content .title{
+#select-board-dialog .selectBoardContainer .body .container .content .title {
     color: #7f8c8d;
-    margin-bottom: 10px;
+    padding: 0px 0px 10px 0px;
+    text-transform: uppercase;
+}
+
+#select-board-dialog .selectBoardContainer .body .container .content .footer {
+    padding: 10px 5px 10px 0px;
+}
+
+#select-board-dialog .selectBoardContainer .body .container .content .loading {
+    font-size: var(--theia-ui-font-size1);
+    color: #7f8c8d;
+    padding: 10px 5px 10px 10px;
+    text-transform: uppercase;
+    /* The max, min-height comes from `.body .list` 265px + 47px top padding - 2 * 10px top padding */
+    max-height: 292px;
+    min-height: 292px;
 }
 
 #select-board-dialog .selectBoardContainer .body .list .item {
-    padding: 10px 5px 10px 20px;
+    padding: 10px 5px 10px 10px;
     display: flex;
-    justify-content: space-between;
+    justify-content: end;
 }
+
+#select-board-dialog .selectBoardContainer .body .list .item .selected-icon {
+    margin-left: auto;
+}
+
+#select-board-dialog .selectBoardContainer .body .list .item .detail {
+    font-size: var(--theia-ui-font-size1);
+    color: var(--theia-disabled-color0);
+    width: 155px; /* used heuristics for the calculation */
+    white-space: pre;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#select-board-dialog .selectBoardContainer .body .list .item.missing {
+    color: var(--theia-disabled-color0);
+}
+
 #select-board-dialog .selectBoardContainer .body .list .item:hover {
     background: var(--theia-ui-button-color-secondary-hover);
 }
 
 #select-board-dialog .selectBoardContainer .body .list {
     max-height: 265px;
+    min-height: 265px;
     overflow-y: auto;
 }
 
-#select-board-dialog .selectBoardContainer .body .boards.list {
-    min-height: 265px;
+#select-board-dialog .selectBoardContainer .body .ports.list {
+    margin: 47px 0px 0px 0px /* 47 is 37 as input height for the `Boards`, plus 10 margin bottom. */
 }
 
 #select-board-dialog .selectBoardContainer .body .search {
@@ -112,8 +147,8 @@ button.theia-button.secondary {
 
 button.theia-button.main {
     color: #fff;
-    background-color: #00979c;
-    box-shadow: 0 4px #005c5f;
+    /* background-color: #00979c; */
+    box-shadow: 0 4px var(--theia-accent-color0);
 }
 
 .dialogControl {
@@ -129,7 +164,7 @@ button.theia-button.main {
     align-items: baseline;
     width: 100%;
 }
-                    
+
 .arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .notAttached {
     width: 10px;
     height: 10px;
@@ -149,7 +184,6 @@ button.theia-button.main {
     align-items: center;
     margin: 0 5px;
     width: 100%;
-    font-weight: bold;
 }
 
 .arduino-boards-toolbar-item .caret {
@@ -158,7 +192,7 @@ button.theia-button.main {
 }
 
 .arduino-boards-toolbar-item {
-    background: white;
+    background: var(--theia-layout-color1);
     height: 22px;
     display: flex;
     width: 100%;
@@ -166,9 +200,9 @@ button.theia-button.main {
 }
 
 .arduino-boards-dropdown-list {
-    background: #f7f7f7;
     border: 3px solid var(--theia-border-color2);
     margin: -3px;
+    z-index: 1;
 }
 
 .arduino-boards-dropdown-item {
@@ -176,13 +210,16 @@ button.theia-button.main {
     display: flex;
     padding: 10px;
     cursor: pointer;
+    color: var(--theia-ui-font-color1);
+    background: var(--theia-layout-color1);
 }
 
 .arduino-boards-dropdown-item .fa-check {
-    color: var(--theia-accent-color2);
+    color: var(--theia-accent-color1);
+    align-self: center;
 }
 
 .arduino-boards-dropdown-item.selected,
 .arduino-boards-dropdown-item:hover {
-    background: var(--theia-ui-button-color-secondary-hover);
-}               
+    background: var(--theia-layout-color3);
+}

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

@@ -3,7 +3,7 @@
     flex-direction: column;
 }
 
-.p-TabBar-toolbar {
+#theia-top-panel .p-TabBar-toolbar {
     justify-content: flex-end;
     margin: 0;
     padding-left: 10px;

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

@@ -0,0 +1,13 @@
+/* Do not show the `close` icon for editor, but show the dirty state if not in pro-mode. */
+body:not(.arduino-advanced-mode) .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:hover > .p-TabBar-tabCloseIcon,
+body:not(.arduino-advanced-mode) .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon {
+    background-image: none;
+    cursor: pointer;
+}
+
+body:not(.arduino-advanced-mode) .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty:hover > .p-TabBar-tabCloseIcon,
+body:not(.arduino-advanced-mode) .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:hover {
+    background-size: 10px;
+    background-image: var(--theia-icon-circle);
+    cursor: pointer;
+}

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

@@ -1,3 +1,5 @@
 @import './list-widget.css';
 @import './board-select-dialog.css';
 @import './main.css';
+@import './editor.css';
+@import './monitor.css';

arduino-ide-extension/src/browser/style/list-widget.css

@@ -50,17 +50,17 @@
 }
 
 .filterable-list-container .items-container > div:nth-child(odd) {
-    background-color: var(--theia-layout-color2);
-}
-
-.filterable-list-container .items-container > div:nth-child(even) {
     background-color: var(--theia-layout-color0);
 }
 
-.filterable-list-container .items-container > div:hover {
+.filterable-list-container .items-container > div:nth-child(even) {
     background-color: var(--theia-layout-color1);
 }
 
+.filterable-list-container .items-container > div:hover {
+    background-color: var(--theia-layout-color2);
+}
+
 .component-list-item {
     padding: 10px 10px 10px 15px;
     font-size: var(--theia-ui-font-size1);
@@ -111,7 +111,7 @@
 .component-list-item .header .installed {
     margin-left: 4px;
     justify-self: end;
-    background-color: var(--theia-accent-color2);
+    background-color: var(--theia-accent-color1);
     padding: 2px 4px 2px 4px;
     font-size: 10px;
     font-weight: bold;

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

@@ -7,61 +7,90 @@
 }
 
 #outputView {
-    color: var(--theia-ui-font-color3);
-}
-
-#arduino-verify.arduino-tool-icon:hover,
-#arduino-save-file.arduino-tool-icon:hover,
-#arduino-show-open-context-menu.arduino-tool-icon:hover,
-#arduino-upload.arduino-tool-icon:hover {
-    background-position-y: 60px;
-}
-
-#arduino-verify.arduino-tool-icon,
-#arduino-save-file.arduino-tool-icon,
-#arduino-show-open-context-menu.arduino-tool-icon,
-#arduino-upload.arduino-tool-icon {
-    height: 24px;
-    width: 24px;
-}
-
-#arduino-save-file {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 59px;
-}
-
-#arduino-verify {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 188px;
-}
-
-#arduino-upload {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 156px;
-}
-
-#arduino-show-open-context-menu {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 92px;
+    cursor: text;
 }
 
 .p-TabBar-toolbar .item.arduino-tool-item {
     margin-left: 3px;
 }
 
+.p-TabBar-toolbar .item.arduino-tool-item > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    width: 24px;
+    background: var(--theia-ui-button-color);
+}
+
+.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
+    background: var(--theia-ui-button-color-hover);
+}
+
+.arduino-verify, .arduino-upload {
+    border-radius: 12px;
+}
+
+.arduino-tool-icon {
+    height: 24px;
+    width: 24px;
+    background: var(--theia-ui-button-font-color);
+    -webkit-mask: url(../icons/mask-buttons.svg);
+    mask: url(../icons/mask-buttons.svg);
+    -webkit-mask-size: 800%;
+    mask-size: 800%;
+}
+
+.arduino-save-file-icon {
+    -webkit-mask-position: 59px -4px;
+    mask-position: 59px -4px;
+}
+
+.arduino-verify-icon {
+    -webkit-mask-position: 188px -4px;
+    mask-position: 188px -4px;
+}
+
+.arduino-upload-icon {
+    -webkit-mask-position: 156px -4px;
+    mask-position: 156px -4px;
+}
+
+.arduino-show-open-context-menu-icon {
+    -webkit-mask-position: 92px -4px;
+    mask-position: 92px -4px;
+}
+
+.toggle-serial-monitor-icon {
+    -webkit-mask-position: 28px -4px;
+    mask-position: 28px -4px;
+}
+
+#arduino-toolbar-container {
+    display: flex;
+    width: 100%;
+}
+
+.p-TabBar-toolbar.theia-arduino-toolbar {
+    flex: 1;
+    z-index: 0;
+}
+
+#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.right {
+    justify-content: flex-start;
+    min-width: 190px;
+}
+
+#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.left {
+    min-width: 398px;
+    justify-content: flex-end;
+}
+
 .arduino-tool-item.item.connected-boards {
     opacity: 1;
 }
 
-.arduino-tool-item.item.connected-boards  select {
+.arduino-tool-item.item.connected-boards select {
     line-height: var(--theia-content-line-height);
     font-size: var(--theia-ui-font-size1);
     color: var(--theia-ui-font-color1);
@@ -75,10 +104,6 @@
     padding-right: 15px;
 }
 
-.p-Widget.p-TabBar.theia-app-centers.theia-app-bottom .p-TabBar-content-container.ps {
-    display: none;
-}
-
 .arduino-toolbar-tooltip {
     margin-left: 10px;
     display: flex;
@@ -86,6 +111,24 @@
     color: var(--theia-ui-font-color3);
 }
 
+.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+}
+
+.arduino-toggle-advanced-mode-icon {
+    mask: none;
+    -webkit-mask: none;
+    background: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--theia-ui-button-font-color);
+}
+
 .monaco-editor .margin {
     border-right: 2px solid var(--theia-border-color1);
     box-sizing: border-box;

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

@@ -0,0 +1,126 @@
+.p-TabBar.theia-app-centers .p-TabBar-tabIcon.arduino-serial-monitor-tab-icon {
+    background: url(../icons/buttons.svg);
+    background-size: 800%;
+    background-position-y: 41px;
+    background-position-x: 19px;
+}
+
+.serial-monitor-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.serial-monitor-container .head {
+    display: flex;
+    padding: 5px;
+    background: var(--theia-layout-color0);
+    height: 27px;
+}
+
+.serial-monitor-container .head .send {
+    display: flex;
+    flex:1;
+}
+
+.serial-monitor-container .head .send .btn {
+    display: flex;
+    padding: 0 5px;
+    align-items: center;
+    color: var(--theia-ui-font-color1);
+    opacity: 0.7;
+}
+.serial-monitor-container .head .send .btn:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
+.serial-monitor-container .head .send form {
+    flex: 1;
+    display: flex;
+    background: var(--theia-layout-color2);
+}
+
+.serial-monitor-container .head .send input#serial-monitor-send {
+    color: var(--theia-ui-font-color1);
+    flex: 1;
+}
+
+.serial-monitor-container .head .send input:focus {
+    outline: none;
+}
+
+.serial-monitor-container .head .config {
+    display: flex;
+}
+
+.serial-monitor-container .head .config .serial-monitor-select {
+    margin-left: 5px;
+}
+
+#serial-monitor-output-container {
+    overflow: auto;
+    flex: 1;
+    padding: 6px;
+}
+
+.p-TabBar-toolbar .item.arduino-monitor {
+    width: 24px;
+    justify-content: center;
+    font-size: medium;
+    box-sizing: border-box;
+}
+
+.p-TabBar-toolbar .item.arduino-monitor.toggled {
+    background: var(--theia-secondary-brand-color1);
+}
+
+.p-TabBar-toolbar .item .clear-all {
+    background: var(--theia-icon-clear) no-repeat;
+}
+
+/* React Select Styles */
+.serial-monitor-select .sms__control {
+    border: var(--theia-border-color1) var(--theia-border-width) solid;
+    background: var(--theia-layout-color2);
+}
+
+.serial-monitor-select .sms__control--is-focused {
+    border-color: var(--theia-border-color2) !important;
+    box-shadow: none !important;
+}
+
+.sms__control--is-focused:hover {
+    border-color: var(--theia-border-color2) !important;
+}
+
+.serial-monitor-select .sms__option--is-selected {
+    background-color: var(--theia-ui-button-color-secondary-hover);
+    color: var(--theia-content-font-color0);
+}
+
+.serial-monitor-select .sms__option--is-focused {
+    background-color: var(--theia-ui-button-color-secondary-hover);
+}
+
+.serial-monitor-select .sms__menu {
+    background-color: var(--theia-layout-color1);
+    border: 1px solid var(--theia-border-color2);
+    border-top: none;
+    box-shadow: none;
+}
+
+.serial-monitor-select .sms__control.sms__control--menu-is-open {
+    border: 1px solid;
+    border-color: var(--theia-border-color2) !important;
+    border-bottom: none;
+}
+
+.serial-monitor-select .sms__value-container .sms__single-value {
+    color: var(--theia-ui-font-color1);
+}
+
+.sms__menu-list {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}

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

@@ -1,26 +1,45 @@
-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 {
+
+    protected toolbars: ArduinoToolbar[];
+
+    constructor(...toolbars: ArduinoToolbar[]) {
+        super();
+        this.id = 'arduino-toolbar-container';
+        this.toolbars = toolbars;
+    }
+
+    onAfterAttach(msg: Message) {
+        for (const toolbar of this.toolbars) {
+            Widget.attach(toolbar, 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

@@ -2,14 +2,16 @@ import * as React from 'react';
 import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarItem, ReactTabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { CommandRegistry } from '@theia/core/lib/common/command';
 import { ReactWidget } from '@theia/core/lib/browser';
-import { LabelParser } from '@theia/core/lib/browser/label-parser';
+import { LabelParser, LabelIcon } from '@theia/core/lib/browser/label-parser';
 
 export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item';
 
 export namespace ArduinoToolbarComponent {
     export interface Props {
+        side: 'left' | 'right',
         items: (TabBarToolbarItem | ReactTabBarToolbarItem)[],
         commands: CommandRegistry,
+        labelParser: LabelParser,
         commandIsEnabled: (id: string) => boolean,
         executeCommand: (e: React.MouseEvent<HTMLElement>) => void
     }
@@ -26,14 +28,24 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
 
     protected renderItem = (item: TabBarToolbarItem) => {
         let innerText = '';
+        let className = `arduino-tool-icon ${item.id}-icon`;
+        if (item.text) {
+            for (const labelPart of this.props.labelParser.parse(item.text)) {
+                if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) {
+                    className += ` fa fa-${labelPart.name}`;
+                } else {
+                    innerText = labelPart;
+                }
+            }
+        }
         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} >
+        return <div key={item.id} className={cls} >
+            <div className={item.id}>
                 <div
                     key={item.id + '-icon'}
                     id={item.id}
-                    className={`${item.id} arduino-tool-icon`}
+                    className={className}
                     onClick={this.props.executeCommand}
                     onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
                     onMouseOut={() => this.setState({ tooltip: '' })}
@@ -41,13 +53,22 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
                     {innerText}
                 </div>
             </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>;
+        const tooltip = <div key='arduino-toolbar-tooltip' className={'arduino-toolbar-tooltip'}>{this.state.tooltip}</div>;
+        const items = [
+            <React.Fragment key={this.props.side + '-arduino-toolbar-tooltip'}>
+                {[...this.props.items].map(item => TabBarToolbarItem.is(item) ? this.renderItem(item) : item.render())}
+            </React.Fragment>
+        ]
+        if (this.props.side === 'left') {
+            items.unshift(tooltip);
+        } else {
+            items.push(tooltip)
+        }
+        return items;
     }
 }
 
@@ -58,10 +79,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());
@@ -82,7 +104,7 @@ export class ArduinoToolbar extends ReactWidget {
     }
 
     protected init(): void {
-        this.node.classList.add('theia-arduino-toolbar');
+        this.node.classList.add('theia-arduino-toolbar', this.side);
         this.update();
     }
 
@@ -93,6 +115,9 @@ export class ArduinoToolbar extends ReactWidget {
 
     protected render(): React.ReactNode {
         return <ArduinoToolbarComponent
+            key='arduino-toolbar-component'
+            side={this.side}
+            labelParser={this.labelParser}
             items={[...this.items.values()]}
             commands={this.commands}
             commandIsEnabled={this.doCommandIsEnabled}
@@ -107,3 +132,9 @@ export class ArduinoToolbar extends ReactWidget {
         }
     }
 }
+
+export namespace ArduinoToolbar {
+    export function is(maybeToolbarWidget: any): maybeToolbarWidget is ArduinoToolbar {
+        return maybeToolbarWidget instanceof ArduinoToolbar;
+    }
+}

arduino-ide-extension/src/common/protocol/boards-service.ts

@@ -1,14 +1,169 @@
-import { ArduinoComponent } from "./arduino-component";
+import { isWindows, isOSX } from '@theia/core/lib/common/os';
+import { JsonRpcServer } from '@theia/core/lib/common/messaging/proxy-factory';
+import { Searchable } from './searchable';
+import { Installable } from './installable';
+import { ArduinoComponent } from './arduino-component';
+const naturalCompare: (left: string, right: string) => number = require('string-natural-compare').caseInsensitive;
+
+export interface AttachedBoardsChangeEvent {
+    readonly oldState: Readonly<{ boards: Board[], ports: Port[] }>;
+    readonly newState: Readonly<{ boards: Board[], ports: Port[] }>;
+}
+export namespace AttachedBoardsChangeEvent {
+
+    export function diff(event: AttachedBoardsChangeEvent): Readonly<{
+        attached: {
+            boards: Board[],
+            ports: Port[]
+        },
+        detached: {
+            boards: Board[],
+            ports: Port[]
+        }
+    }> {
+        const diff = <T>(left: T[], right: T[]) => {
+            return left.filter(item => right.indexOf(item) === -1);
+        }
+        const { boards: newBoards } = event.newState;
+        const { boards: oldBoards } = event.oldState;
+        const { ports: newPorts } = event.newState;
+        const { ports: oldPorts } = event.oldState;
+        return {
+            detached: {
+                boards: diff(oldBoards, newBoards),
+                ports: diff(oldPorts, newPorts)
+            },
+            attached: {
+                boards: diff(newBoards, oldBoards),
+                ports: diff(newPorts, oldPorts)
+            }
+        };
+    }
+
+}
+
+export interface BoardInstalledEvent {
+    readonly pkg: Readonly<BoardPackage>;
+}
+
+export const BoardsServiceClient = Symbol('BoardsServiceClient');
+export interface BoardsServiceClient {
+    notifyAttachedBoardsChanged(event: AttachedBoardsChangeEvent): void;
+    notifyBoardInstalled(event: BoardInstalledEvent): void
+}
 
 export const BoardsServicePath = '/services/boards-service';
 export const BoardsService = Symbol('BoardsService');
-export interface BoardsService {
+export interface BoardsService extends Installable<BoardPackage>, Searchable<BoardPackage>, JsonRpcServer<BoardsServiceClient> {
     getAttachedBoards(): Promise<{ boards: Board[] }>;
-    selectBoard(board: Board | AttachedSerialBoard | AttachedNetworkBoard): Promise<void>;
-    getSelectBoard(): Promise<Board | AttachedSerialBoard | AttachedNetworkBoard | undefined>;
+    getAvailablePorts(): Promise<{ ports: Port[] }>;
+}
+
+export interface Port {
+    readonly address: string;
+    readonly protocol: Port.Protocol;
+    /**
+     * Optional label for the protocol. For example: `Serial Port (USB)`.
+     */
+    readonly label?: string;
+}
+export namespace Port {
+
+    export type Protocol = 'serial' | 'network' | 'unknown';
+    export namespace Protocol {
+        export function toProtocol(protocol: string | undefined): Protocol {
+            if (protocol === 'serial') {
+                return 'serial';
+            } else if (protocol === 'network') {
+                return 'network';
+            } else {
+                return 'unknown';
+            }
+        }
+    }
+
+    export function toString(port: Port, options: { useLabel: boolean } = { useLabel: false }): string {
+        if (options.useLabel && port.label) {
+            return `${port.address} ${port.label}`
+        }
+        return port.address;
+    }
+
+    export function compare(left: Port, right: Port): number {
+        // Board ports have higher priorities, they come first.
+        if (isBoardPort(left) && !isBoardPort(right)) {
+            return -1;
+        }
+        if (!isBoardPort(left) && isBoardPort(right)) {
+            return 1;
+        }
+        let result = left.protocol.toLocaleLowerCase().localeCompare(right.protocol.toLocaleLowerCase());
+        if (result !== 0) {
+            return result;
+        }
+        result = naturalCompare(left.address, right.address);
+        if (result !== 0) {
+            return result;
+        }
+        return (left.label || '').localeCompare(right.label || '');
+    }
+
+    export function equals(left: Port | undefined, right: Port | undefined): boolean {
+        if (left && right) {
+            return left.address === right.address
+                && left.protocol === right.protocol
+                && (left.label || '') === (right.label || '');
+        }
+        return left === right;
+    }
+
+    // Based on: https://github.com/arduino/Arduino/blob/93581b03d723e55c60caedb4729ffc6ea808fe78/arduino-core/src/processing/app/SerialPortList.java#L48-L74   
+    export function isBoardPort(port: Port): boolean {
+        const address = port.address.toLocaleLowerCase();
+        if (isWindows) {
+            // `COM1` seems to be the default serial port on Windows.
+            return address !== 'COM1'.toLocaleLowerCase();
+        }
+        // On macOS and Linux, the port should start with `/dev/`.
+        if (!address.startsWith('/dev/')) {
+            return false
+        }
+        if (isOSX) {
+            // Example: `/dev/cu.usbmodem14401`
+            if (/(tty|cu)\..*/.test(address.substring('/dev/'.length))) { 
+                return [
+                    '/dev/cu.MALS',
+                    '/dev/cu.SOC',
+                    '/dev/cu.Bluetooth-Incoming-Port'
+                ].map(a => a.toLocaleLowerCase()).every(a => a !== address);
+            }
+        }
+
+        // Example: `/dev/ttyACM0`
+        if (/(ttyS|ttyUSB|ttyACM|ttyAMA|rfcomm|ttyO)[0-9]{1,3}/.test(address.substring('/dev/'.length))) {
+            // Default ports were `/dev/ttyS0` -> `/dev/ttyS31` on Ubuntu 16.04.2.
+            if (address.startsWith('/dev/ttyS')) {
+                const index = Number.parseInt(address.substring('/dev/ttyS'.length), 10);
+                if (!Number.isNaN(index) && 0 <= index && 31 >= index) {
+                    return false;
+                }
+            }
+            return true;
+        }
+
+        return false;
+    }
+
+    export function sameAs(left: Port | undefined, right: string | undefined) {
+        if (left && right) {
+            if (left.protocol !== 'serial') {
+                console.log(`Unexpected protocol for port: ${JSON.stringify(left)}. Ignoring protocol, comparing addresses with ${right}.`);
+            }
+            return left.address === right;
+        }
+        return false;
+    }
 
-    search(options: { query?: string }): Promise<{ items: BoardPackage[] }>;
-    install(item: BoardPackage): Promise<void>;
 }
 
 export interface BoardPackage extends ArduinoComponent {
@@ -21,13 +176,48 @@ export interface Board {
     fqbn?: string
 }
 
+export namespace Board {
+
+    export function is(board: any): board is Board {
+        return !!board && 'name' in board;
+    }
+
+    export function equals(left: Board, right: Board): boolean {
+        return left.name === right.name && left.fqbn === right.fqbn;
+    }
+
+    export function sameAs(left: Board, right: string | Board): boolean {
+        // How to associate a selected board with one of the available cores: https://typefox.slack.com/archives/CJJHJCJSJ/p1571142327059200
+        // 1. How to use the FQBN if any and infer the package ID from it: https://typefox.slack.com/archives/CJJHJCJSJ/p1571147549069100
+        // 2. How to trim the `/Genuino` from the name: https://arduino.slack.com/archives/CJJHJCJSJ/p1571146951066800?thread_ts=1571142327.059200&cid=CJJHJCJSJ
+        const other = typeof right === 'string' ? { name: right } : right;
+        if (left.fqbn && other.fqbn) {
+            return left.fqbn === other.fqbn;
+        }
+        return left.name.replace('/Genuino', '') === other.name.replace('/Genuino', '');
+    }
+
+    export function compare(left: Board, right: Board): number {
+        let result = left.name.localeCompare(right.name);
+        if (result === 0) {
+            result = (left.fqbn || '').localeCompare(right.fqbn || '');
+        }
+        return result;
+    }
+
+    export function installed(board: Board): boolean {
+        return !!board.fqbn;
+    }
+
+}
+
 export interface AttachedSerialBoard extends Board {
     port: string;
 }
 
 export namespace AttachedSerialBoard {
-    export function is(b: Board): b is AttachedSerialBoard {
-        return 'port' in b;
+    export function is(b: Board | any): b is AttachedSerialBoard {
+        return !!b && 'port' in b;
     }
 }
 

arduino-ide-extension/src/common/protocol/config-service.ts

@@ -0,0 +1,14 @@
+export const ConfigServicePath = '/services/config-service';
+export const ConfigService = Symbol('ConfigService');
+
+export interface ConfigService {
+    getVersion(): Promise<string>;
+    getConfiguration(): Promise<Config>;
+    isInDataDir(uri: string): Promise<boolean>;
+    isInSketchDir(uri: string): Promise<boolean>;
+}
+
+export interface Config {
+    sketchDirUri: string;
+    dataDirUri: string;
+}

arduino-ide-extension/src/common/protocol/core-service.ts

@@ -1,3 +1,5 @@
+import { Board } from "./boards-service";
+
 export const CoreServicePath = '/services/core-service';
 export const CoreService = Symbol('CoreService');
 export interface CoreService {
@@ -10,12 +12,15 @@ export namespace CoreService {
     export namespace Upload {
         export interface Options {
             readonly uri: string;
+            readonly board: Board;
+            readonly port: string;
         }
     }
 
     export namespace Compile {
         export interface Options {
             readonly uri: string;
+            readonly board: Board;
         }
     }
 }

arduino-ide-extension/src/common/protocol/installable.ts

@@ -0,0 +1,3 @@
+export interface Installable<T> {
+    install(item: T): Promise<void>;
+}

arduino-ide-extension/src/common/protocol/library-service.ts

@@ -1,20 +1,13 @@
-import { ArduinoComponent } from "./arduino-component";
+import { Searchable } from './searchable';
+import { Installable } from './installable';
+import { ArduinoComponent } from './arduino-component';
 
 export const LibraryServicePath = '/services/library-service';
 export const LibraryService = Symbol('LibraryService');
-export interface LibraryService {
-    search(options: { query?: string, props?: LibraryService.Search.Props }): Promise<{ items: Library[] }>;
+export interface LibraryService extends Installable<Library>, Searchable<Library> {
     install(library: Library): Promise<void>;
 }
 
-export namespace LibraryService {
-    export namespace Search {
-        export interface Props {
-            [key: string]: string | undefined;
-        }
-    }
-}
-
 export interface Library extends ArduinoComponent {
     readonly builtIn?: boolean;
 }

arduino-ide-extension/src/common/protocol/monitor-service.ts

@@ -0,0 +1,44 @@
+import { JsonRpcServer } from '@theia/core';
+import { Board } from './boards-service';
+
+export interface MonitorError {
+    readonly message: string;
+    readonly code: number
+}
+
+export interface MonitorReadEvent {
+    readonly connectionId: string;
+    readonly data: string;
+}
+
+export const MonitorServiceClient = Symbol('MonitorServiceClient');
+export interface MonitorServiceClient {
+    notifyRead(event: MonitorReadEvent): void;
+    notifyError(event: MonitorError): void;
+}
+
+export const MonitorServicePath = '/services/serial-monitor';
+export const MonitorService = Symbol('MonitorService');
+export interface MonitorService extends JsonRpcServer<MonitorServiceClient> {
+    connect(config: ConnectionConfig): Promise<{ connectionId: string }>;
+    disconnect(connectionId: string): Promise<boolean>;
+    send(connectionId: string, data: string | Uint8Array): Promise<void>;
+    getConnectionIds(): Promise<string[]>;
+}
+
+export interface ConnectionConfig {
+    readonly board: Board;
+    readonly port: string;
+    /**
+     * Defaults to [`SERIAL`](ConnectionType#SERIAL).
+     */
+    readonly type?: ConnectionType;
+    /**
+     * Defaults to `9600`.
+     */
+    readonly baudRate?: number;
+}
+
+export enum ConnectionType {
+    SERIAL = 0
+}

arduino-ide-extension/src/common/protocol/searchable.ts

@@ -0,0 +1,11 @@
+export interface Searchable<T> {
+    search(options: Searchable.Options): Promise<{ items: T[] }>;
+}
+export namespace Searchable {
+    export interface Options {
+        /**
+         * Defaults to empty an empty string.
+         */
+        readonly query?: string;
+    }
+}

arduino-ide-extension/src/common/protocol/sketches-service.ts

@@ -1,13 +1,21 @@
-import { FileStat } from "@theia/filesystem/lib/common";
-
 export const SketchesServicePath = '/services/sketches-service';
 export const SketchesService = Symbol('SketchesService');
 export interface SketchesService {
-    getSketches(fileStat?: FileStat): Promise<Sketch[]>
-    getSketchFiles(fileStat: FileStat): Promise<string[]>
+    /**
+     * Returns with the direct sketch folders from the location of the `fileStat`.
+     * The sketches returns with inverse-chronological order, the first item is the most recent one.
+     */
+    getSketches(uri?: string): Promise<Sketch[]>
+    getSketchFiles(uri: string): Promise<string[]>
+    /**
+     * Creates a new sketch folder in the `parentUri` location. If `parentUri` is not specified,
+     * it falls back to the default `sketchDirUri` from the CLI.
+     */
+    createNewSketch(parentUri?: string): Promise<Sketch>
+    isSketchFolder(uri: string): Promise<boolean>
 }
 
 export interface Sketch {
-    name: string;
-    uri: string
+    readonly name: string;
+    readonly uri: string
 }

arduino-ide-extension/src/common/types.ts

@@ -0,0 +1,3 @@
+export type RecursiveRequired<T> = {
+    [P in keyof T]-?: RecursiveRequired<T[P]>;
+};

arduino-ide-extension/src/electron-browser/electron-arduino-menu-contribution.ts

@@ -1,27 +1,12 @@
-import * as electron from 'electron';
-import { injectable } from "inversify";
-import { ElectronMenuContribution } from "@theia/core/lib/electron-browser/menu/electron-menu-contribution";
-import { FrontendApplication } from "@theia/core/lib/browser";
-import { isOSX } from '@theia/core';
+import { injectable } from 'inversify';
+import { ElectronMenuContribution } from '@theia/core/lib/electron-browser/menu/electron-menu-contribution';
 
 @injectable()
 export class ElectronArduinoMenuContribution extends ElectronMenuContribution {
-    onStart(app: FrontendApplication): void {
-        const currentWindow = electron.remote.getCurrentWindow();
-        const createdMenuBar = this.factory.createMenuBar();
 
-        if (isOSX) {
-            electron.remote.Menu.setApplicationMenu(createdMenuBar);
-            currentWindow.on('focus', () =>
-                // OSX: Recreate the menus when changing windows.
-                // OSX only has one menu bar for all windows, so we need to swap
-                // between them as the user switch windows.
-                electron.remote.Menu.setApplicationMenu(this.factory.createMenuBar())
-            );
-
-        } else {
-            // Unix/Windows: Set the per-window menus
-            currentWindow.setMenu(createdMenuBar);
-        }
+    protected hideTopPanel(): void {
+        // NOOP
+        // We reuse the `div` for the Arduino toolbar.
     }
-}
+
+}

arduino-ide-extension/src/electron-browser/electron-arduino-menu-module.ts

@@ -1,8 +1,8 @@
-import { ContainerModule } from "inversify";
-import { ElectronMenuContribution } from "@theia/core/lib/electron-browser/menu/electron-menu-contribution"
-import { ElectronArduinoMenuContribution } from "./electron-arduino-menu-contribution";
+import { ContainerModule } from 'inversify';
+import { ElectronMenuContribution } from '@theia/core/lib/electron-browser/menu/electron-menu-contribution'
+import { ElectronArduinoMenuContribution } from './electron-arduino-menu-contribution';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(ElectronArduinoMenuContribution).toSelf().inSingletonScope();
     rebind(ElectronMenuContribution).to(ElectronArduinoMenuContribution);
-})
+});

arduino-ide-extension/src/node/arduino-backend-module.ts

@@ -1,9 +1,14 @@
+import * as fs from 'fs';
+import * as os from 'os';
+import { join } from 'path';
 import { ContainerModule } from 'inversify';
 import { ArduinoDaemon } from './arduino-daemon';
 import { ILogger } from '@theia/core/lib/common/logger';
 import { BackendApplicationContribution } from '@theia/core/lib/node/backend-application';
+import { LanguageServerContribution } from '@theia/languages/lib/node';
+import { ArduinoLanguageServerContribution } from './language/arduino-language-server-contribution';
 import { LibraryService, LibraryServicePath } from '../common/protocol/library-service';
-import { BoardsService, BoardsServicePath } from '../common/protocol/boards-service';
+import { BoardsService, BoardsServicePath, BoardsServiceClient } from '../common/protocol/boards-service';
 import { LibraryServiceImpl } from './library-service-impl';
 import { BoardsServiceImpl } from './boards-service-impl';
 import { CoreServiceImpl } from './core-service-impl';
@@ -19,11 +24,31 @@ import { DefaultWorkspaceServerExt } from './default-workspace-server-ext';
 import { WorkspaceServer } from '@theia/workspace/lib/common';
 import { SketchesServiceImpl } from './sketches-service-impl';
 import { SketchesService, SketchesServicePath } from '../common/protocol/sketches-service';
+import { ConfigService, ConfigServicePath } from '../common/protocol/config-service';
+import { MonitorServiceImpl } from './monitor/monitor-service-impl';
+import { MonitorService, MonitorServicePath, MonitorServiceClient } from '../common/protocol/monitor-service';
+import { MonitorClientProvider } from './monitor/monitor-client-provider';
+import { ArduinoCli } from './arduino-cli';
+import { ArduinoCliContribution } from './arduino-cli-contribution';
+import { CliContribution } from '@theia/core/lib/node';
+import { ConfigServiceImpl } from './config-service-impl';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
+    // Theia backend CLI contribution.
+    bind(ArduinoCliContribution).toSelf().inSingletonScope();
+    bind(CliContribution).toService(ArduinoCliContribution);
+
+    // Provides the path of the Ardunio CLI.
+    bind(ArduinoCli).toSelf().inSingletonScope();
+
+    // Shared daemonn 
     bind(ArduinoDaemon).toSelf().inSingletonScope();
     bind(BackendApplicationContribution).toService(ArduinoDaemon);
 
+    // Language server
+    bind(ArduinoLanguageServerContribution).toSelf().inSingletonScope();
+    bind(LanguageServerContribution).toService(ArduinoLanguageServerContribution);
+
     // Library service
     const libraryServiceConnectionModule = ConnectionContainerModule.create(({ bind, bindBackendService }) => {
         bind(LibraryServiceImpl).toSelf().inSingletonScope();
@@ -39,12 +64,24 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
         bindBackendService(SketchesServicePath, SketchesService);
     });
     bind(ConnectionContainerModule).toConstantValue(sketchesServiceConnectionModule);
+    
+    // Config service
+    bind(ConfigServiceImpl).toSelf().inSingletonScope();
+    bind(ConfigService).toService(ConfigServiceImpl);
+    const configServiceConnectionModule = ConnectionContainerModule.create(({ bind, bindBackendService }) => {
+        bindBackendService(ConfigServicePath, ConfigService);
+    });
+    bind(ConnectionContainerModule).toConstantValue(configServiceConnectionModule);
 
     // Boards service
     const boardsServiceConnectionModule = ConnectionContainerModule.create(({ bind, bindBackendService }) => {
         bind(BoardsServiceImpl).toSelf().inSingletonScope();
         bind(BoardsService).toService(BoardsServiceImpl);
-        bindBackendService(BoardsServicePath, BoardsService);
+        bindBackendService<BoardsService, BoardsServiceClient>(BoardsServicePath, BoardsService, (service, client) => {
+            service.setClient(client);
+            client.onDidCloseConnection(() => service.dispose());
+            return service;
+        });
     });
     bind(ConnectionContainerModule).toConstantValue(boardsServiceConnectionModule);
 
@@ -90,8 +127,44 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
         return parentLogger.child('daemon');
     }).inSingletonScope().whenTargetNamed('daemon');
 
-    // Default workspace server extension to initialize and use a fallback workspace (`~/Arduino-PoC/workspace/`)
+    // Logger for the "serial discovery".
+    bind(ILogger).toDynamicValue(ctx => {
+        const parentLogger = ctx.container.get<ILogger>(ILogger);
+        return parentLogger.child('discovery');
+    }).inSingletonScope().whenTargetNamed('discovery');
+
+    // Default workspace server extension to initialize and use a fallback workspace.
     // If nothing was set previously.
     bind(DefaultWorkspaceServerExt).toSelf().inSingletonScope();
     rebind(WorkspaceServer).toService(DefaultWorkspaceServerExt);
+
+    // Shared monitor client provider service for the backend.
+    bind(MonitorClientProvider).toSelf().inSingletonScope();
+
+    // Connection scoped service for the serial monitor.
+    const monitorServiceConnectionModule = ConnectionContainerModule.create(({ bind, bindBackendService }) => {
+        bind(MonitorServiceImpl).toSelf().inSingletonScope();
+        bind(MonitorService).toService(MonitorServiceImpl);
+        bindBackendService<MonitorService, MonitorServiceClient>(MonitorServicePath, MonitorService, (service, client) => {
+            service.setClient(client);
+            client.onDidCloseConnection(() => service.dispose());
+            return service;
+        });
+    });
+    bind(ConnectionContainerModule).toConstantValue(monitorServiceConnectionModule);
+
+    // Logger for the monitor service.
+    bind(ILogger).toDynamicValue(ctx => {
+        const parentLogger = ctx.container.get<ILogger>(ILogger);
+        return parentLogger.child('monitor-service');
+    }).inSingletonScope().whenTargetNamed('monitor-service');
+
+    // Set up cpp extension
+    if (!process.env.CPP_CLANGD_COMMAND) {
+        const executable = os.platform() === 'win32' ? 'clangd.exe' : 'clangd';
+        const clangdCommand = join(__dirname, '..', '..', 'build', executable);
+        if (fs.existsSync(clangdCommand)) {
+            process.env.CPP_CLANGD_COMMAND = clangdCommand;
+        }
+    }
 });

arduino-ide-extension/src/node/arduino-cli-contribution.ts

@@ -0,0 +1,27 @@
+import { injectable } from 'inversify';
+import { Argv, Arguments } from 'yargs';
+import { CliContribution } from '@theia/core/lib/node';
+
+@injectable()
+export class ArduinoCliContribution implements CliContribution {
+
+    protected _debugCli = false
+
+    configure(conf: Argv): void {
+        conf.option('debug-cli', {
+            description: 'Can be specified if the CLI daemon process was started externally.',
+            type: 'boolean',
+            default: false,
+            nargs: 1
+        });
+    }
+
+    setArguments(args: Arguments): void {
+        this._debugCli = args['debug-cli'];
+    }
+
+    get debugCli(): boolean {
+        return this._debugCli;
+    }
+
+}