Merge pull request #143 from bcmi-labs/0.1.1

0.1.1

.github/workflows/build.yml

@@ -0,0 +1,133 @@
+name: Arduino Pro IDE
+
+on:
+  push:
+    branches:
+      - master
+    tags:
+      - '[0-9]+.[0-9]+.[0-9]+*'
+  pull_request:
+    branches:
+      - master
+  schedule:
+    - cron: '0 3 * * *' # run every day at 3AM (https://docs.github.com/en/actions/reference/events-that-trigger-workflows#scheduled-events-schedule)
+
+jobs:
+
+  build:
+    strategy:
+      matrix:
+        config:
+          - os: windows-2016
+          - os: ubuntu-latest
+          - os: macos-latest
+          # - os: rsora-rpi-arm # self-hosted armhf
+    runs-on: ${{ matrix.config.os }}
+    timeout-minutes: 90
+    env:
+      CERTIFICATE_PATH: /tmp/macos_signing_certificate.p12
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install Node.js 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: '10.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install Python 2.7
+        uses: actions/setup-python@v2
+        with:
+          python-version: '2.7'
+
+      - name: Generate signing certificate file [macOS]
+        if: runner.OS == 'macOS'
+        run: |
+            # APPLE_SIGNING_CERTIFICATE_P12 secret was produced by following the procedure from:
+            # https://www.kencochrane.com/2020/08/01/build-and-sign-golang-binaries-for-macos-with-github-actions/#exporting-the-developer-certificate
+            echo "${{ secrets.APPLE_SIGNING_CERTIFICATE_P12 }}" | base64 --decode > "${{ env.CERTIFICATE_PATH }}"
+
+      - name: Package
+        shell: bash
+        env:
+          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          AC_USERNAME: ${{ secrets.AC_USERNAME }}
+          AC_PASSWORD: ${{ secrets.AC_PASSWORD }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          IS_NIGHTLY: ${{ github.event_name == 'schedule' }}
+          IS_RELEASE: ${{ startsWith(github.ref, 'refs/tags/') }}
+        run: |
+            # electron-builder will try to sign during the Windows job if these environment variables are defined
+            if [ "${{ runner.OS }}" = "macOS" ]; then
+              # See: https://www.electron.build/code-signing
+              export CSC_LINK="${{ env.CERTIFICATE_PATH }}"
+              export CSC_KEY_PASSWORD="${{ secrets.KEYCHAIN_PASSWORD }}"
+            fi
+            yarn --cwd ./electron/packager/
+            yarn --cwd ./electron/packager/ package
+
+      - name: Upload [GitHub Actions]
+        uses: actions/upload-artifact@v2
+        with:
+          name: build-artifacts
+          path: electron/build/dist/build-artifacts/
+
+  publish:
+    needs: build
+    if: github.event_name == 'schedule'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download [GitHub Actions]
+        uses: actions/download-artifact@v2
+        with:
+          name: build-artifacts
+          path: build-artifacts
+
+      - name: Publish Nightly [S3]
+        uses: kittaakos/upload-s3-action@v0.0.1
+        with:
+          aws_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws_bucket: ${{ secrets.DOWNLOADS_BUCKET }}
+          source_dir: build-artifacts/
+          destination_dir: arduino-pro-ide/nightly/
+
+  release:
+    needs: build
+    if: startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download [GitHub Actions]
+        uses: actions/download-artifact@v2
+        with:
+          name: build-artifacts
+          path: build-artifacts
+
+      - name: Create Release [GitHub]
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: ${{ github.ref }}
+
+      - name: Publish Release [GitHub]
+        uses: svenstaro/upload-release-action@v1-release
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: build-artifacts/*
+          tag: ${{ github.ref }}
+          file_glob: true
+
+      - name: Publish Release [S3]
+        uses: kittaakos/upload-s3-action@v0.0.1
+        with:
+          aws_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws_bucket: ${{ secrets.DOWNLOADS_BUCKET }}
+          source_dir: build-artifacts/
+          destination_dir: arduino-pro-ide/

.gitignore

@@ -2,12 +2,16 @@ node_modules/
 # .node_modules is a hack for the electron builder.
 .node_modules/
 lib/
-build/
 downloads/
+build/
 !electron/build/
 src-gen/
-arduino-ide-*/webpack.config.js
+*webpack.config.js
 .DS_Store
-/workspace/static
 # switching from `electron` to `browser` in dev mode.
 .browser_modules
+yarn*.log
+# For the VS Code extensions used by Theia.
+plugins
+# the config files for the CLI
+arduino-ide-extension/data/cli/config

.gitpod.yml

@@ -2,13 +2,17 @@ image:
   file: Dockerfile
 
 ports:
-- port: 3000
-  onOpen: open-browser
+  - port: 3000
+    onOpen: open-preview
+  - port: 5900
+    onOpen: ignore
+  - port: 6080
+    onOpen: ignore
 
 tasks:
   - init: >
       yarn &&
-      yarn --cwd ./arduino-ide-browser start
+      yarn --cwd ./browser-app start
 
 github:
   prebuilds:

.vscode/launch.json

@@ -1,38 +1,109 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch Node.js Program",
-            "program": "${file}"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Launch Backend",
-            "program": "${workspaceRoot}/arduino-ide-browser/src-gen/backend/main.js",
-            "args": [
-                "--hostname=0.0.0.0",
-                "--port=3000",
-                "--no-cluster",
-                "--no-app-auto-install"
-            ],
-            "env": {
-                "NODE_ENV": "development"
-            },
-            "sourceMaps": true,
-            "outFiles": [
-                "${workspaceRoot}/arduino-ide-browser/src-gen/backend/*.js",
-                "${workspaceRoot}/arduino-ide-browser/lib/**/*.js",
-                "${workspaceRoot}/arduino-ide-extension/*/lib/**/*.js"
-            ],
-            "smartStep": true,
-            "internalConsoleOptions": "openOnSessionStart",
-            "outputCapture": "std"
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach by Process ID",
+      "processId": "${command:PickProcess}"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Electron Packager",
+      "program": "${workspaceRoot}/electron/packager/index.js",
+      "cwd": "${workspaceFolder}/electron/packager"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "App (Electron)",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
+        "env": {
+          "NODE_ENV": "development",
+          "NODE_PRESERVE_SYMLINKS": "1"
         }
-    ]
-}
+      },
+      "program": "${workspaceRoot}/electron-app/src-gen/frontend/electron-main.js",
+      "protocol": "inspector",
+      "args": [
+        "--log-level=debug",
+        "--hostname=localhost",
+        "--no-cluster",
+        "--remote-debugging-port=9222",
+        "--no-app-auto-install",
+        "--plugins=local-dir:plugins"
+      ],
+      "env": {
+        "NODE_ENV": "development"
+      },
+      "sourceMaps": true,
+      "outFiles": [
+        "${workspaceRoot}/electron-app/src-gen/backend/*.js",
+        "${workspaceRoot}/electron-app/src-gen/frontend/*.js",
+        "${workspaceRoot}/electron-app/lib/**/*.js",
+        "${workspaceRoot}/arduino-ide-extension/lib/**/*.js"
+      ],
+      "smartStep": true,
+      "internalConsoleOptions": "openOnSessionStart",
+      "outputCapture": "std"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "App (Browser)",
+      "program": "${workspaceRoot}/browser-app/src-gen/backend/main.js",
+      "args": [
+        "--hostname=0.0.0.0",
+        "--port=3000",
+        "--no-cluster",
+        "--no-app-auto-install",
+        "--plugins=local-dir:plugins"
+      ],
+      "windows": {
+        "env": {
+          "NODE_ENV": "development",
+          "NODE_PRESERVE_SYMLINKS": "1"
+        }
+      },
+      "env": {
+        "NODE_ENV": "development"
+      },
+      "sourceMaps": true,
+      "outFiles": [
+        "${workspaceRoot}/browser-app/src-gen/backend/*.js",
+        "${workspaceRoot}/browser-app/lib/**/*.js",
+        "${workspaceRoot}/arduino-ide-extension/lib/**/*.js"
+      ],
+      "smartStep": true,
+      "internalConsoleOptions": "openOnSessionStart",
+      "outputCapture": "std"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "protocol": "inspector",
+      "name": "Run Test [current]",
+      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
+      "args": [
+        "--require",
+        "reflect-metadata/Reflect",
+        "--no-timeouts",
+        "--colors",
+        "**/${fileBasenameNoExtension}.js"
+      ],
+      "env": {
+        "TS_NODE_PROJECT": "${workspaceRoot}/tsconfig.json"
+      },
+      "sourceMaps": true,
+      "smartStep": true,
+      "internalConsoleOptions": "openOnSessionStart",
+      "outputCapture": "std"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "tslint.enable": true,
+  "tslint.configFile": "./tslint.json",
+  "editor.formatOnSave": true,
+  "files.exclude": {
+    "**/lib": false
+  },
+  "editor.insertSpaces": true,
+  "editor.detectIndentation": false,
+  "[typescript]": {
+    "editor.tabSize": 4
+  },
+  "[json]": {
+    "editor.tabSize": 2
+  },
+  "[jsonc]": {
+    "editor.tabSize": 2
+  },
+  "files.insertFinalNewline": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.vscode/tasks.json

@@ -1,48 +1,80 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "label": "Arduino-PoC - Start Browser Example",
-            "type": "shell",
-            "command": "yarn --cwd ./arduino-ide-browser start",
-            "group": "build",
-            "presentation": {
-                "reveal": "always",
-                "panel": "new",
-                "clear": true
-            }
-        },
-        {
-            "label": "Arduino-PoC - Watch Theia Extension",
-            "type": "shell",
-            "command": "yarn --cwd ./arduino-ide-extension watch",
-            "group": "build",
-            "presentation": {
-                "reveal": "always",
-                "panel": "new",
-                "clear": false
-            }
-        },
-        {
-            "label": "Arduino-PoC - Watch Browser Example",
-            "type": "shell",
-            "command": "yarn --cwd ./arduino-ide-browser watch",
-            "group": "build",
-            "presentation": {
-                "reveal": "always",
-                "panel": "new",
-                "clear": false
-            }
-        },
-        {
-            "label": "Arduino-PoC - Watch All",
-            "type": "shell",
-            "dependsOn": [
-                "Arduino-PoC - Watch Theia Extension",
-                "Arduino-PoC - Watch Browser Example"
-            ]
-        }
-    ]
-}
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Arduino Pro IDE - Start Browser App",
+      "type": "shell",
+      "command": "yarn --cwd ./browser-app start",
+      "group": "build",
+      "presentation": {
+        "reveal": "always",
+        "panel": "new",
+        "clear": true
+      }
+    },
+    {
+      "label": "Arduino Pro IDE - Watch IDE Extension",
+      "type": "shell",
+      "command": "yarn --cwd ./arduino-ide-extension watch",
+      "group": "build",
+      "presentation": {
+        "reveal": "always",
+        "panel": "new",
+        "clear": false
+      }
+    },
+    {
+      "label": "Arduino Pro IDE - Watch Debugger Extension",
+      "type": "shell",
+      "command": "yarn --cwd ./arduino-debugger-extension watch",
+      "group": "build",
+      "presentation": {
+        "reveal": "always",
+        "panel": "new",
+        "clear": false
+      }
+    },
+    {
+      "label": "Arduino Pro IDE - Watch Browser App",
+      "type": "shell",
+      "command": "yarn --cwd ./browser-app watch",
+      "group": "build",
+      "presentation": {
+        "reveal": "always",
+        "panel": "new",
+        "clear": false
+      }
+    },
+    {
+      "label": "Arduino Pro IDE - Watch Electron App",
+      "type": "shell",
+      "command": "yarn --cwd ./electron-app watch",
+      "group": "build",
+      "presentation": {
+        "reveal": "always",
+        "panel": "new",
+        "clear": false
+      }
+    },
+    {
+      "label": "Arduino Pro IDE - Watch All [Browser]",
+      "type": "shell",
+      "dependsOn": [
+        "Arduino Pro IDE - Watch IDE Extension",
+        "Arduino Pro IDE - Watch Debugger Extension",
+        "Arduino Pro IDE - Watch Browser App"
+      ]
+    },
+    {
+      "label": "Arduino Pro IDE - Watch All [Electron]",
+      "type": "shell",
+      "dependsOn": [
+        "Arduino Pro IDE - Watch IDE Extension",
+        "Arduino Pro IDE - Watch Debugger Extension",
+        "Arduino Pro IDE - Watch Electron App"
+      ]
+    }
+  ]
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM gitpod/workspace-full
+FROM gitpod/workspace-full-vnc
 
 USER root
 RUN apt-get update -q --fix-missing && \
@@ -7,7 +7,8 @@ RUN apt-get update -q --fix-missing && \
     build-essential \
     libssl-dev \
     golang-go \
-    libxkbfile-dev
+    libxkbfile-dev \
+    libnss3-dev
 
 RUN set -ex && \
     tmpdir=$(mktemp -d) && \

README.md

@@ -1,44 +1,129 @@
-# Arduino IDE PoC
+# Arduino Pro IDE
 
-[![Build Status](https://dev.azure.com/typefox/Arduino/_apis/build/status/bcmi-labs.arduino-editor?branchName=master)](https://dev.azure.com/typefox/Arduino/_build/latest?definitionId=4&branchName=master)
+[![Arduino Pro IDE](https://github.com/bcmi-labs/arduino-editor/workflows/Arduino%20Pro%20IDE/badge.svg)](https://github.com/bcmi-labs/arduino-editor/actions?query=workflow%3A%22Arduino+Pro+IDE%22)
 
-> **Beware:** This is very much work-in-progress. Things can and probably will be broken, even on master.
+### Download
 
-This repo contains a proof-of-concept for an Arduino IDE based on Theia.
-It's built on top of a [fork of the arduino-cli](https://github.com/typefox/arduino-cli/tree/daemon) that sports a gRPC interface.
+You can download the latest version of the Arduino Pro IDE application for the supported platforms from the [GitHub release page](https://github.com/arduino/arduino-pro-ide/releases) or following the links in the following table.
 
-## How to try (offline)
+#### Latest version
 
-```
-git clone https://github.com/bcmi-labs/arduino-editor
-cd arduino-editor
+Platform  | 32 bit                   | 64 bit                   |
+--------- | ------------------------ | ------------------------ |
+Linux     |                          | [Linux 64 bit]           |
+Linux ARM | [🚧 Work in progress...] | [🚧 Work in progress...] |
+Windows   |                          | [Windows 64 bit]         |
+macOS     |                          | [macOS 64 bit]           |
+
+[🚧 Work in progress...]: https://github.com/arduino/arduino-pro-ide/issues/287
+[Linux 64 bit]: https://downloads.arduino.cc/arduino-pro-ide/arduino-pro-ide_latest_Linux_64bit.zip
+[Windows 64 bit]: https://downloads.arduino.cc/arduino-pro-ide/arduino-pro-ide_latest_Windows_64bit.zip
+[macOS 64 bit]: https://downloads.arduino.cc/arduino-pro-ide/arduino-pro-ide_latest_macOS_64bit.dmg
+
+#### Previous versions
+
+These are available from the [GitHub releases page](https://github.com/arduino/arduino-pro-ide/releases).
+
+#### Nightly builds
+
+These builds are generated every day at 03:00 GMT from the `master` branch and
+should be considered unstable. In order to get the latest nightly build
+available for the supported platform, use the following links:
+
+Platform  | 32 bit                   | 64 bit                   |
+--------- | ------------------------ | ------------------------ |
+Linux     |                          | [Nightly Linux 64 bit]   |
+Linux ARM | [🚧 Work in progress...] | [🚧 Work in progress...] |
+Windows   |                          | [Nightly Windows 64 bit] |
+macOS     |                          | [Nightly macOS 64 bit]   |
+
+[🚧 Work in progress...]: https://github.com/arduino/arduino-pro-ide/issues/287
+[Nightly Linux 64 bit]: https://downloads.arduino.cc/arduino-pro-ide/nightly/arduino-pro-ide_nightly-latest_Linux_64bit.zip
+[Nightly Windows 64 bit]: https://downloads.arduino.cc/arduino-pro-ide/nightly/arduino-pro-ide_nightly-latest_Windows_64bit.zip
+[Nightly macOS 64 bit]: https://downloads.arduino.cc/arduino-pro-ide/nightly/arduino-pro-ide_nightly-latest_macOS_64bit.dmg
+
+> These links return an HTTP `302: Found` response, 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` )
+
+### Build from source
+
+If you’re familiar with TypeScript, the [Theia IDE](https://theia-ide.org/), and if you want to contribute to the
+project, you should be able to build the Arduino Pro IDE locally. Please refer to the [Theia IDE prerequisites](https://github.com/theia-ide/theia/blob/master/doc/) documentation for the setup instructions.
+
+### Build
+```sh
 yarn
+```
+
+### Rebuild the native dependencies
+```sh
 yarn rebuild:electron
-yarn --cwd arduino-ide-electron start
 ```
 
-If you want to switch back to the browser-based example, execute the following in the repository root
-```
-yarn rebuild:browser
-```
-Then you can start the browser example again:
-```
-yarn --cwd arduino-ide-browser start
+### Start
+```sh
+yarn start
 ```
 
-## Arduino-PoC Electron Application
-The project is built on [Azure DevOps](https://dev.azure.com/typefox/Arduino).
+### CI
 
-Currently, we provide the Arduino-PoC for the following platforms:
- - Windows,
- - macOS, and
- - Linux.
-   
-You can download the latest release applications fom [here](https://github.com/bcmi-labs/arduino-editor/releases/latest).
-If you want to get a nightly build, go to the [Azure DevOps page](https://dev.azure.com/typefox/Arduino/_build?definitionId=4),
-and follow the steps from below.
+This project is built on [GitHub Actions](https://github.com/bcmi-labs/arduino-editor/actions?query=workflow%3A%22Arduino+Pro+IDE%22).
 
- ![](static/download_01.gif)
- ![](static/download_02.gif)
+ - _Snapshot_ builds run when changes are pushed to the `master` branch, or when a PR is created against the `master` branch. For the sake of the review and verification process, the build artifacts can be downloaded from the GitHub Actions page. Note: [due to a limitation](https://github.com/actions/upload-artifact/issues/80#issuecomment-630030144) with the GH Actions UI, you cannot download a particular build, but you have to get all together inside the `build-artifacts.zip`.
+ - _Nightly_ builds run every day at 03:00 GMT from the `master` branch.
+ - _Release_ builds run when a new tag is pushed to the remote. The tag must follow the [semver](https://semver.org/). For instance, `1.2.3` is a correct tag, but `v2.3.4` won't work. Steps to trigger a new release build:
+   - Create a local tag:
+    ```sh
+    git tag -a 1.2.3 -m "Creating a new tag for the `1.2.3` release."
+    ```
+   - Push it to the remote:
+   ```sh
+    git push origin 1.2.3
+   ```
 
-Click [here](./electron/README.md) for more details on the CI/CD, the GitHub release, and the build process in general.
+### FAQ
+
+ - Q: Can I manually change the version of the [`arduino-cli`](https://github.com/arduino/arduino-cli/) used by the IDE?
+ - A: Yes. It is possible but not recommended. The CLI exposes a set of functionality via [gRPC](https://github.com/arduino/arduino-cli/tree/master/rpc) and the IDE uses this API to communicate with the CLI. Before we build a new version of IDE, we pin a specific version of CLI and use the corresponding `proto` files to generate TypeScript modules for gRPC. This means, a particular version of IDE is compliant only with the pinned version of CLI. Mismatching IDE and CLI versions might not be able to communicate with each other. This could cause unpredictable IDE behavior.
+
+ - Q: I have understood that not all versions of the CLI is compatible with my version of IDE but how can I manually update the `arduino-cli` inside the IDE?
+ - A: [Get](https://arduino.github.io/arduino-cli/installation) the desired version of `arduino-cli` for your platform and manually replace the one inside the IDE. The CLI can be found inside the IDE at:
+   - Windows: `C:\path\to\Arduino Pro IDE\resources\app\node_modules\arduino-ide-extension\build\arduino-cli.exe`,
+   - macOS: `/path/to/Arduino Pro IDE.app/Contents/Resources/app/node_modules/arduino-ide-extension/build/arduino-cli`, and
+   - Linux: `/path/to/Arduino Pro IDE/resources/app/node_modules/arduino-ide-extension/build/arduino-cli`.
+
+### Architecture overview
+
+The Pro IDE consists of three major parts:
+ - the _Electron main_ process,
+ - the _backend_, and 
+ - the _frontend_.
+
+The _Electron main_ process is responsible for:
+ - creating the application,
+ - managing the application lifecycle via listeners, and
+ - creating and managing the web pages for the app.
+
+In Electron, the process that runs the main entry JavaScript file is called the main process. The _Electron main_ process can display a GUI by creating web pages. An Electron app always has exactly on main process.
+
+By default, whenever the _Electron main_ process creates a web page, it will instantiate a new `BrowserWindow` instance. Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process. Each `BrowserWindow` instance runs the web page in its own renderer process. When a `BrowserWindow` instance is destroyed, the corresponding renderer process is also terminated. The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.<sup>[[1]]</sup>
+
+In normal browsers, web pages usually run in a sandboxed environment, and accessing native resources are disallowed. However, Electron has the power to use Node.js APIs in the web pages allowing lower-level OS interactions. Due to security reasons, accessing native resources is an undesired behavior in the Pro IDE. So by convention, we do not use Node.js APIs. (Note: the Node.js integration is [not yet disabled](https://github.com/eclipse-theia/theia/issues/2018) although it is not used). In the Pro IDE, only the _backend_ allows OS interaction.
+
+The _backend_ process is responsible for:
+ - providing access to the filesystem,
+ - communicating with the Arduino CLI via gRPC,
+ - running your terminal,
+ - exposing additional RESTful APIs,
+ - performing the Git commands in the local repositories,
+ - hosting and running any VS Code extensions, or
+ - executing VS Code tasks<sup>[[2]]</sup>.
+
+The _Electron main_ process spawns the _backend_ process. There is always exactly one _backend_ process. However, due to performance considerations, the _backend_ spawns several sub-processes for the filesystem watching, Git repository discovery, etc. The communication between the _backend_ process and its sub-processes is established via IPC. Besides spawning sub-processes, the _backend_ will start an HTTP server on a random available port, and serves the web application as static content. When the sub-processes are up and running, and the HTTP server is also listening, the _backend_ process sends the HTTP server port to the _Electron main_ process via IPC. The _Electron main_ process will load the _backend_'s endpoint in the `BrowserWindow`.
+
+The _frontend_ is running as an Electron renderer process and can invoke services implemented on the _backend_. The communication between the _backend_ and the _frontend_ is done via JSON-RPC over a websocket connection. This means, the services running in the _frontend_ are all proxies, and will ask the corresponding service implementation on the _backend_.
+
+[1]: https://www.electronjs.org/docs/tutorial/application-architecture#differences-between-main-process-and-renderer-process
+[2]: https://code.visualstudio.com/Docs/editor/tasks

arduino-debugger-extension/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "arduino-debugger-extension",
+  "version": "0.1.1",
+  "description": "An extension for debugging Arduino programs",
+  "license": "MIT",
+  "dependencies": {
+    "@theia/debug": "next",
+    "arduino-ide-extension": "0.1.1",
+    "cdt-gdb-adapter": "^0.0.14",
+    "vscode-debugadapter": "^1.26.0",
+    "vscode-debugprotocol": "^1.26.0"
+  },
+  "scripts": {
+    "prepare": "yarn run clean && yarn run build",
+    "clean": "rimraf lib",
+    "lint": "tslint -c ./tslint.json --project ./tsconfig.json",
+    "build": "tsc && yarn lint",
+    "watch": "tsc -w"
+  },
+  "files": [
+    "lib",
+    "src"
+  ],
+  "theiaExtensions": [
+    {
+      "backend": "lib/node/arduino-debug-backend-module",
+      "frontend": "lib/browser/arduino-debug-frontend-module"
+    }
+  ]
+}

arduino-debugger-extension/src/browser/arduino-debug-configuration-manager.ts

@@ -0,0 +1,39 @@
+import { DebugConfigurationManager } from "@theia/debug/lib/browser/debug-configuration-manager";
+import { injectable } from "inversify";
+
+@injectable()
+export class ArduinoDebugConfigurationManager extends DebugConfigurationManager {
+
+    get defaultDebugger(): Promise<string | undefined> {
+        return this.debug.getDebuggersForLanguage('ino').then(debuggers => {
+            if (debuggers.length === 0)
+                return undefined;
+            return debuggers[0].type;
+        });
+    }
+
+    protected async selectDebugType(): Promise<string | undefined> {
+        const widget = this.editorManager.currentEditor;
+        if (!widget) {
+            return this.defaultDebugger;
+        }
+        const { languageId } = widget.editor.document;
+        const debuggers = await this.debug.getDebuggersForLanguage(languageId);
+        if (debuggers.length === 0) {
+            return this.defaultDebugger;
+        }
+        return this.quickPick.show(debuggers.map(
+            ({ label, type }) => ({ label, value: type }),
+            { placeholder: 'Select Environment' })
+        );
+    }
+
+    async createDefaultConfiguration(): Promise<void> {
+        const { model } = this;
+        if (model) {
+            await this.doCreate(model);
+            await this.updateModels();
+        }
+    }
+
+}

arduino-debugger-extension/src/browser/arduino-debug-frontend-application-contribution.ts

@@ -0,0 +1,133 @@
+import { injectable, inject } from 'inversify';
+import { MenuModelRegistry, Path, MessageService, Command, CommandRegistry } from '@theia/core';
+import { KeybindingRegistry } from '@theia/core/lib/browser';
+import { TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { DebugFrontendApplicationContribution, DebugCommands } from '@theia/debug/lib/browser/debug-frontend-application-contribution';
+import { DebugSessionOptions } from "@theia/debug/lib/browser/debug-session-options";
+import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
+import { FileSystem } from '@theia/filesystem/lib/common';
+import URI from '@theia/core/lib/common/uri';
+import { EditorManager } from '@theia/editor/lib/browser';
+import { EditorMode } from "arduino-ide-extension/lib/browser/editor-mode";
+import { SketchesService } from 'arduino-ide-extension/lib/common/protocol/sketches-service';
+import { ArduinoToolbar } from 'arduino-ide-extension/lib/browser/toolbar/arduino-toolbar';
+import { ArduinoDebugConfigurationManager } from './arduino-debug-configuration-manager';
+
+export namespace ArduinoDebugCommands {
+    export const START_DEBUG: Command = {
+        id: 'arduino-start-debug',
+        label: 'Start Debugging'
+    }
+}
+
+@injectable()
+export class ArduinoDebugFrontendApplicationContribution extends DebugFrontendApplicationContribution {
+
+    @inject(EditorMode)
+    protected readonly editorMode: EditorMode;
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(SketchesService)
+    protected readonly sketchesService: SketchesService;
+
+    @inject(FileSystem)
+    protected readonly fileSystem: FileSystem;
+
+    @inject(EditorManager)
+    protected readonly editorManager: EditorManager;
+
+    @inject(MessageService)
+    protected readonly messageService: MessageService;
+
+    async start(noDebug?: boolean, debugSessionOptions?: DebugSessionOptions): Promise<void> {
+        const configurations = this.configurations as ArduinoDebugConfigurationManager;
+        let current = debugSessionOptions ? debugSessionOptions : configurations.current;
+        // If no configurations are currently present, create them
+        if (!current) {
+            await configurations.createDefaultConfiguration();
+            current = configurations.current;
+        }
+        if (current) {
+            if (noDebug !== undefined) {
+                current = {
+                    ...current,
+                    configuration: {
+                        ...current.configuration,
+                        noDebug
+                    }
+                };
+            }
+            if (current.configuration.type === 'arduino') {
+                const wsStat = this.workspaceService.workspace;
+                let sketchFileURI: URI | undefined;
+                if (wsStat && await this.sketchesService.isSketchFolder(wsStat.uri)) {
+                    const wsPath = new Path(wsStat.uri);
+                    const sketchFilePath = wsPath.join(wsPath.name + '.ino').toString();
+                    sketchFileURI = new URI(sketchFilePath);
+                } else if (this.editorManager.currentEditor) {
+                    const editorURI = this.editorManager.currentEditor.getResourceUri();
+                    if (editorURI && editorURI.path && editorURI.path.ext === '.ino') {
+                        sketchFileURI = editorURI;
+                    }
+                }
+                if (sketchFileURI) {
+                    await this.editorManager.open(sketchFileURI);
+                    await this.manager.start(current);
+                } else {
+                    this.messageService.error('Please open a sketch file to start debugging.')
+                }
+            } else {
+                await this.manager.start(current);
+            }
+        }
+    }
+
+    initializeLayout(): Promise<void> {
+        if (this.editorMode.proMode) {
+            return super.initializeLayout();
+        }
+        return Promise.resolve();
+    }
+
+    registerMenus(menus: MenuModelRegistry): void {
+        if (this.editorMode.proMode) {
+            super.registerMenus(menus);
+            menus.unregisterMenuAction(DebugCommands.START_NO_DEBUG);
+        }
+    }
+
+    registerKeybindings(keybindings: KeybindingRegistry): void {
+        if (this.editorMode.proMode) {
+            super.registerKeybindings(keybindings);
+            keybindings.unregisterKeybinding({
+                command: DebugCommands.START_NO_DEBUG.id,
+                keybinding: 'ctrl+f5'
+            });
+        }
+    }
+
+    registerToolbarItems(toolbar: TabBarToolbarRegistry): void {
+        super.registerToolbarItems(toolbar);
+        toolbar.registerItem({
+            id: ArduinoDebugCommands.START_DEBUG.id,
+            command: ArduinoDebugCommands.START_DEBUG.id,
+            tooltip: 'Start Debugging',
+            priority: 3
+        });
+    }
+
+    registerCommands(registry: CommandRegistry): void {
+        super.registerCommands(registry);
+        registry.registerCommand(ArduinoDebugCommands.START_DEBUG, {
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            isEnabled: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            execute: () => {
+                registry.executeCommand(DebugCommands.START.id);
+            }
+        });
+    }
+
+
+}

arduino-debugger-extension/src/browser/arduino-debug-frontend-module.ts

@@ -0,0 +1,19 @@
+import { ContainerModule } from 'inversify';
+import { VariableContribution } from '@theia/variable-resolver/lib/browser';
+import { ArduinoVariableResolver } from './arduino-variable-resolver';
+import { DebugSessionManager } from '@theia/debug/lib/browser/debug-session-manager';
+import { DebugFrontendApplicationContribution } from '@theia/debug/lib/browser/debug-frontend-application-contribution';
+import { DebugConfigurationManager } from '@theia/debug/lib/browser/debug-configuration-manager';
+import { ArduinoDebugConfigurationManager } from './arduino-debug-configuration-manager';
+import { ArduinoDebugFrontendApplicationContribution } from './arduino-debug-frontend-application-contribution';
+import { ArduinoDebugSessionManager } from './arduino-debug-session-manager';
+
+import '../../src/browser/style/index.css';
+
+export default new ContainerModule((bind, unbind, isBound, rebind) => {
+    bind(ArduinoVariableResolver).toSelf().inSingletonScope();
+    bind(VariableContribution).toService(ArduinoVariableResolver);
+    rebind(DebugSessionManager).to(ArduinoDebugSessionManager).inSingletonScope();
+    rebind(DebugConfigurationManager).to(ArduinoDebugConfigurationManager).inSingletonScope();
+    rebind(DebugFrontendApplicationContribution).to(ArduinoDebugFrontendApplicationContribution);
+});

arduino-debugger-extension/src/browser/arduino-debug-session-manager.ts

@@ -0,0 +1,14 @@
+import { DebugSessionManager } from "@theia/debug/lib/browser/debug-session-manager";
+import { DebugSessionOptions } from "@theia/debug/lib/browser/debug-session-options";
+
+export class ArduinoDebugSessionManager extends DebugSessionManager {
+
+    start(options: DebugSessionOptions) {
+        if (options.configuration.type === 'arduino' && this.sessions.find(s => s.configuration.type === 'arduino')) {
+            this.messageService.info('A debug session is already running. You must stop the running session before starting a new one.')
+            return Promise.resolve(undefined);
+        }
+        return super.start(options);
+    }
+
+}

arduino-debugger-extension/src/browser/arduino-variable-resolver.ts

@@ -0,0 +1,46 @@
+
+import { VariableContribution, VariableRegistry, Variable } from '@theia/variable-resolver/lib/browser';
+import { injectable, inject } from 'inversify';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { BoardsServiceClientImpl } from 'arduino-ide-extension/lib/browser/boards/boards-service-client-impl';
+
+@injectable()
+export class ArduinoVariableResolver implements VariableContribution {
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    @inject(MessageService)
+    protected readonly messageService: MessageService
+
+    registerVariables(variables: VariableRegistry): void {
+        variables.registerVariable(<Variable>{
+            name: 'fqbn',
+            description: 'Qualified name of the selected board',
+            resolve: this.resolveFqbn.bind(this),
+        });
+        variables.registerVariable({
+            name: 'port',
+            description: 'Selected upload port',
+            resolve: this.resolvePort.bind(this)
+        });
+    }
+
+    protected async resolveFqbn(): Promise<string | undefined> {
+        const { boardsConfig } = this.boardsServiceClient;
+        if (!boardsConfig || !boardsConfig.selectedBoard) {
+            this.messageService.error('No board selected. Please select a board for debugging.');
+            return undefined;
+        }
+        return boardsConfig.selectedBoard.fqbn;
+    }
+
+    protected async resolvePort(): Promise<string | undefined> {
+        const { boardsConfig } = this.boardsServiceClient;
+        if (!boardsConfig || !boardsConfig.selectedPort) {
+            return undefined;
+        }
+        return boardsConfig.selectedPort.address;
+    }
+
+}

arduino-debugger-extension/src/browser/style/debug-dark.svg

@@ -0,0 +1,4 @@
+<!--Copyright (c) Microsoft Corporation. All rights reserved.-->
+<!--Copyright (C) 2019 TypeFox and others.-->
+<!--Licensed under the MIT License. See License.txt in the project root for license information.-->
+<svg width="28" height="28" viewBox="0 0 28 28" fill="#F6F6F6" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M15.1673 18.0687V23.0247C15.1673 23.5637 15.2723 24.5 14.7315 24.5H12.8328V23.3327H14V19.6122L13.7988 19.4022C13.0604 20.0803 12.1008 20.4669 11.0986 20.49C10.0964 20.5132 9.11994 20.1714 8.351 19.5282C7 18.1737 7.13826 16.3327 8.60475 14H4.66726V15.1672H3.50001V13.2685C3.50001 12.7277 4.43626 12.8327 4.97526 12.8327H9.76326L15.1673 18.0687ZM11.6673 5.83275H10.5V4.66725H12.775C13.3123 4.66725 14 4.9245 14 5.4635V9.366L14.8593 10.3862C14.927 9.83979 15.1906 9.33644 15.6013 8.96958C16.0119 8.60271 16.5416 8.39723 17.0923 8.39125C17.2298 8.37945 17.3684 8.39492 17.5 8.43675V5.83275H18.6673V8.88825C18.703 8.99154 18.7618 9.08536 18.8391 9.16265C18.9164 9.23995 19.0102 9.29871 19.1135 9.3345H22.1673V10.5H19.5615C19.593 10.5 19.6105 10.675 19.6105 10.85C19.6058 11.4034 19.4011 11.9365 19.0341 12.3508C18.6671 12.7651 18.1626 13.0326 17.6138 13.104L18.634 14H22.5383C23.0773 14 23.3345 14.6807 23.3345 15.225V17.5H22.1673V16.3327H19.2273L11.6673 8.98275V5.83275ZM14 0C11.2311 0 8.52431 0.821086 6.22202 2.35943C3.91973 3.89776 2.12532 6.08426 1.06569 8.64243C0.00606593 11.2006 -0.271181 14.0155 0.269012 16.7313C0.809205 19.447 2.14258 21.9416 4.10051 23.8995C6.05845 25.8574 8.55301 27.1908 11.2687 27.731C13.9845 28.2712 16.7994 27.9939 19.3576 26.9343C21.9157 25.8747 24.1022 24.0803 25.6406 21.778C27.1789 19.4757 28 16.7689 28 14C28 10.287 26.525 6.72601 23.8995 4.1005C21.274 1.475 17.713 0 14 0V0ZM25.6673 14C25.6692 16.6908 24.7364 19.2988 23.0283 21.378L6.622 4.97175C8.33036 3.57269 10.4009 2.68755 12.5927 2.41935C14.7845 2.15115 17.0074 2.51091 19.0027 3.45676C20.998 4.40262 22.6836 5.89567 23.8635 7.76217C25.0433 9.62867 25.6689 11.7919 25.6673 14ZM2.33276 14C2.33066 11.3091 3.26351 8.70111 4.97176 6.622L21.378 23.03C19.6693 24.4284 17.5987 25.313 15.407 25.5807C13.2153 25.8485 10.9926 25.4884 8.99754 24.5425C7.00244 23.5965 5.31693 22.1036 4.13708 20.2373C2.95722 18.3709 2.33152 16.208 2.33276 14Z" fill="white"/></g><defs><clipPath id="clip0"><rect width="28" height="28" fill="#F6F6F6"/></clipPath></defs></svg>

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

@@ -0,0 +1,16 @@
+.arduino-start-debug-icon {
+    -webkit-mask: url('debug-dark.svg') 50%;
+    mask: url('debug-dark.svg') 50%;
+    -webkit-mask-size: 100%;
+    mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--theia-ui-button-font-color);
+}
+
+.arduino-start-debug {
+    border-radius: 12px;
+}

arduino-debugger-extension/src/node/arduino-debug-adapter-contribution.ts

@@ -0,0 +1,89 @@
+import * as path from 'path';
+import { injectable, inject } from 'inversify';
+import { DebugAdapterContribution, DebugAdapterExecutable } from '@theia/debug/lib/common/debug-model';
+import { DebugConfiguration } from '@theia/debug/lib/common/debug-configuration';
+import { IJSONSchema } from '@theia/core/lib/common/json-schema';
+import { ArduinoDaemonImpl } from 'arduino-ide-extension/lib/node/arduino-daemon-impl';
+
+@injectable()
+export class ArduinoDebugAdapterContribution implements DebugAdapterContribution {
+
+    readonly type = 'arduino';
+    readonly label = 'Arduino';
+    readonly languages = ['c', 'cpp', 'ino'];
+
+    @inject(ArduinoDaemonImpl) daemon: ArduinoDaemonImpl;
+
+    getSchemaAttributes(): IJSONSchema[] {
+        return [
+            {
+                'properties': {
+                    'sketch': {
+                        'type': 'string',
+                        'description': 'path to the sketch root ino file',
+                        'default': '${file}',
+                    },
+                    'pauseAtMain': {
+                        'description': 'If enabled the debugger will pause at the start of the main function.',
+                        'type': 'boolean',
+                        'default': false
+                    },
+                    'debugDebugAdapter': {
+                        'type': 'boolean',
+                        'description': 'Start the debug adapter in debug mode (with --inspect-brk)',
+                        'default': false
+                    },
+                }
+            }
+        ]
+    }
+
+    provideDebugAdapterExecutable(config: DebugConfiguration): DebugAdapterExecutable {
+        const debugAdapterMain = path.join(__dirname, 'debug-adapter', 'main');
+        if (config.debugDebugAdapter) {
+            return {
+                command: process.execPath,
+                args: ['--inspect-brk', debugAdapterMain],
+            }
+        }
+        return {
+            modulePath: debugAdapterMain,
+            args: [],
+        }
+    }
+
+    provideDebugConfigurations(): DebugConfiguration[] {
+        return [
+            <DebugConfiguration>{
+                name: this.label,
+                type: this.type,
+                request: 'launch'
+            }
+        ];
+    }
+
+    async resolveDebugConfiguration(config: DebugConfiguration): Promise<DebugConfiguration> {
+        const startFunction = config.pauseAtMain ? 'main' : 'setup';
+        const res: ActualDebugConfig = {
+            ...config,
+            arduinoCli: await this.daemon.getExecPath(),
+            fqbn: '${fqbn}',
+            uploadPort: '${port}',
+            initCommands: [
+                `-break-insert -t --function ${startFunction}`
+            ]
+        }
+        if (!res.sketch) {
+            res.sketch = '${file}';
+        }
+        return res;
+    }
+
+}
+
+interface ActualDebugConfig extends DebugConfiguration {
+    arduinoCli?: string;
+    sketch?: string;
+    fqbn?: string;
+    uploadPort?: string;
+}

arduino-debugger-extension/src/node/arduino-debug-backend-module.ts

@@ -0,0 +1,7 @@
+import { ContainerModule } from 'inversify';
+import { DebugAdapterContribution } from '@theia/debug/lib/common/debug-model';
+import { ArduinoDebugAdapterContribution } from './arduino-debug-adapter-contribution';
+
+export default new ContainerModule((bind, unbind, isBound, rebind) => {
+    bind(DebugAdapterContribution).to(ArduinoDebugAdapterContribution).inSingletonScope();
+});

arduino-debugger-extension/src/node/debug-adapter/arduino-debug-session.ts

@@ -0,0 +1,140 @@
+import { DebugProtocol } from 'vscode-debugprotocol';
+import { GDBDebugSession, FrameVariableReference } from 'cdt-gdb-adapter/dist/GDBDebugSession';
+import { GDBBackend } from 'cdt-gdb-adapter/dist/GDBBackend';
+import * as mi from 'cdt-gdb-adapter/dist/mi';
+import { ArduinoGDBBackend } from './arduino-gdb-backend';
+import { ArduinoVariableHandler } from './arduino-variable-handler';
+import { Scope, OutputEvent } from 'vscode-debugadapter';
+
+export interface ArduinoLaunchRequestArguments extends DebugProtocol.LaunchRequestArguments {
+    arduinoCli?: string;
+    sketch?: string;
+    fqbn?: string;
+    uploadPort?: string;
+}
+
+const GLOBAL_HANDLE_ID = 0xFE;
+const STATIC_HANDLES_START = 0x010000;
+const STATIC_HANDLES_FINISH = 0x01FFFF;
+
+export class ArduinoDebugSession extends GDBDebugSession {
+
+    private _variableHandler: ArduinoVariableHandler;
+
+    get arduinoBackend(): ArduinoGDBBackend {
+        return this.gdb as ArduinoGDBBackend;
+    }
+
+    protected get variableHandler() {
+        if (this._variableHandler) {
+            return this._variableHandler;
+        }
+        if (!this.gdb) {
+            throw new Error("GDB backend is not ready.");
+        }
+        const handler = new ArduinoVariableHandler(this, this.frameHandles, this.variableHandles);
+        this._variableHandler = handler;
+        return handler;
+    }
+
+    protected createBackend(): GDBBackend {
+        return new ArduinoGDBBackend();
+    }
+
+    protected async configurationDoneRequest(response: DebugProtocol.ConfigurationDoneResponse): Promise<void> {
+        try {
+            await this.gdb.sendCommand('-interpreter-exec console "monitor reset halt"')
+            await mi.sendExecContinue(this.gdb);
+            this.sendResponse(response);
+        } catch (err) {
+            this.sendErrorResponse(response, 100, err.message);
+        }
+    }
+
+    protected pauseRequest(response: DebugProtocol.PauseResponse, args: DebugProtocol.PauseArguments): Promise<void> {
+        if (process.platform === 'win32') {
+            const message = 'Pause is not supported on Windows. Please stop the debug session and set a breakpoint instead.';
+            this.sendEvent(new OutputEvent(message));
+            this.sendErrorResponse(response, 1, message);
+            return Promise.resolve();
+        }
+        return super.pauseRequest(response, args);
+    }
+
+    protected async disconnectRequest(response: DebugProtocol.DisconnectResponse): Promise<void> {
+        try {
+            if (this.isRunning) {
+                if (process.platform === 'win32') {
+                    // We cannot pause on Windows
+                    this.arduinoBackend.kill();
+                    this.sendResponse(response);
+                    return;
+                }
+                // Need to pause first
+                const waitPromise = new Promise(resolve => this.waitPaused = resolve);
+                this.gdb.pause();
+                await waitPromise;
+            }
+            await this.gdb.sendGDBExit();
+            this.sendResponse(response);
+        } catch (err) {
+            this.sendErrorResponse(response, 1, err.message);
+        }
+    }
+
+    protected scopesRequest(response: DebugProtocol.ScopesResponse, args: DebugProtocol.ScopesArguments): void {
+        try {
+            const frame: FrameVariableReference = {
+                type: 'frame',
+                frameHandle: args.frameId,
+            };
+            // const pins: ObjectVariableReference = {
+            //     type: "object",
+            //     varobjName: "__pins",
+            //     frameHandle: 42000,
+            // }
+
+            response.body = {
+                scopes: [
+                    // new Scope('Pins', this.variableHandles.create(pins), false),
+                    new Scope('Local', this.variableHandles.create(frame), false),
+                    new Scope('Global', GLOBAL_HANDLE_ID, false),
+                    // new Scope('Static', STATIC_HANDLES_START + parseInt(args.frameId as any, 10), false)
+                ],
+            };
+
+            this.sendResponse(response);
+        } catch (err) {
+            this.sendErrorResponse(response, 1, err.message);
+        }
+    }
+
+    protected async variablesRequest(response: DebugProtocol.VariablesResponse, args: DebugProtocol.VariablesArguments): Promise<void> {
+        try {
+            response.body = {
+                variables: [] as DebugProtocol.Variable[]
+            };
+            const ref = this.variableHandles.get(args.variablesReference);
+            if (args.variablesReference === GLOBAL_HANDLE_ID) {
+                // Use hardcoded global handle to load and store global variables
+                response.body.variables = await this.variableHandler.getGlobalVariables();
+            } else if (args.variablesReference >= STATIC_HANDLES_START && args.variablesReference <= STATIC_HANDLES_FINISH) {
+                // Use STATIC_HANDLES_START to shift the framehandles back
+                const frameHandle = args.variablesReference - STATIC_HANDLES_START;
+                response.body.variables = await this.variableHandler.getStaticVariables(frameHandle);
+            } else if (ref && ref.type === 'frame') {
+                // List variables for current frame
+                response.body.variables = await this.handleVariableRequestFrame(ref);
+            } else if (ref && ref.varobjName === '__pins') {
+                response.body.variables = await this.variableHandler.handlePinStatusRequest();
+            } else if (ref && ref.type === 'object') {
+                // List data under any variable
+                response.body.variables = await this.handleVariableRequestObject(ref);
+            }
+            this.sendResponse(response);
+        } catch (err) {
+            this.sendErrorResponse(response, 1, err.message);
+        }
+    }
+
+}

arduino-debugger-extension/src/node/debug-adapter/arduino-gdb-backend.ts

@@ -0,0 +1,72 @@
+import * as path from 'path';
+import * as fs from 'arduino-ide-extension/lib/node/fs-extra'
+import { spawn } from 'child_process';
+import { GDBBackend } from 'cdt-gdb-adapter/dist/GDBBackend';
+import { MIFrameInfo } from 'cdt-gdb-adapter/dist/mi';
+import { ArduinoLaunchRequestArguments } from './arduino-debug-session';
+import { ArduinoParser } from './arduino-parser';
+
+export class ArduinoGDBBackend extends GDBBackend {
+
+    constructor() {
+        super();
+        this.parser = new ArduinoParser(this);
+    }
+
+    spawn(requestArgs: ArduinoLaunchRequestArguments): Promise<void> {
+        if (!requestArgs.sketch) {
+            throw new Error('Missing argument: sketch');
+        }
+        if (!requestArgs.fqbn) {
+            throw new Error('Missing argument: fqbn')
+        }
+        const sketchFS = fs.statSync(requestArgs.sketch);
+        const sketchDir = sketchFS.isFile() ? path.dirname(requestArgs.sketch) : requestArgs.sketch;
+        const command = requestArgs.arduinoCli || 'arduino-cli';
+        const args = [
+            'debug',
+            '-p', requestArgs.uploadPort || 'none',
+            '-b', requestArgs.fqbn,
+            '--interpreter', 'mi2',
+            sketchDir
+        ];
+        const proc = spawn(command, args);
+        this.proc = proc;
+        this.out = proc.stdin;
+        return (this.parser as ArduinoParser).parseFull(proc);
+    }
+
+    sendFileExecAndSymbols(): Promise<void> {
+        // The program file is already sent by `arduino-cli`
+        return Promise.resolve();
+    }
+
+    sendExecInterrupt(threadId?: number) {
+        let command = '-exec-interrupt';
+        if (threadId) {
+            command += ` --thread ${threadId}`;
+        }
+        return this.sendCommand(command);
+    }
+
+    sendStackInfoFrame(threadId: number, frameId: number): Promise<{ frame: MIFrameInfo }> {
+        const command = `-stack-info-frame --thread ${threadId} --frame ${frameId}`;
+        return this.sendCommand(command);
+    }
+
+    sendTargetDetach(): Promise<void> {
+        return this.sendCommand('-target-detach');
+    }
+
+    kill(): void {
+        if (!this.proc) {
+            return;
+        }
+        if (process.platform === 'win32') {
+            spawn('taskkill', ['/pid', this.proc.pid.toString(), '/f', '/t']);
+        } else {
+            this.proc.kill('SIGKILL');
+        }
+    }
+
+}

arduino-debugger-extension/src/node/debug-adapter/arduino-parser.ts

@@ -0,0 +1,76 @@
+import { ChildProcessWithoutNullStreams } from 'child_process';
+import { Readable } from 'stream';
+import { MIParser } from "cdt-gdb-adapter/dist/MIParser";
+
+const LINE_REGEX = /(.*)(\r?\n)/;
+
+export class ArduinoParser extends MIParser {
+
+    protected rejectReady?: (error: Error) => void;
+
+    parseFull(proc: ChildProcessWithoutNullStreams): Promise<void> {
+        return new Promise((resolve, reject) => {
+            // Detect errors when the child process could not be spawned
+            proc.on('error', reject);
+
+            this.waitReady = () => {
+                this.rejectReady = undefined;
+                resolve();
+            }
+            this.rejectReady = (error: Error) => {
+                this.waitReady = undefined;
+                reject(error);
+            }
+            // Detect unexpected termination
+            proc.on('exit', () => {
+                if (this.rejectReady) {
+                    this.rejectReady(new Error('The gdb debugger terminated unexpectedly.'));
+                }
+            });
+            this.readInputStream(proc.stdout);
+            this.readErrorStream(proc.stderr);
+        });
+    }
+
+    private readInputStream(stream: Readable) {
+        let buff = '';
+        stream.on('data', chunk => {
+            buff += chunk.toString();
+            let regexArray = LINE_REGEX.exec(buff);
+            while (regexArray) {
+                const line = regexArray[1];
+                this.line = line;
+                this.pos = 0;
+                this.handleLine();
+                // Detect error emitted as log message
+                if (this.rejectReady && line.toLowerCase().startsWith('&"error')) {
+                    this.pos = 1;
+                    this.rejectReady(new Error(this.handleCString() || regexArray[1]));
+                    this.rejectReady = undefined;
+                }
+                buff = buff.substring(regexArray[1].length + regexArray[2].length);
+                regexArray = LINE_REGEX.exec(buff);
+            }
+        });
+    }
+
+    private readErrorStream(stream: Readable) {
+        let buff = '';
+        stream.on('data', chunk => {
+            buff += chunk.toString();
+            let regexArray = LINE_REGEX.exec(buff);
+            while (regexArray) {
+                const line = regexArray[1];
+                this.gdb.emit('consoleStreamOutput', line + '\n', 'stderr');
+                // Detect error emitted on the stderr stream
+                if (this.rejectReady && line.toLowerCase().startsWith('error')) {
+                    this.rejectReady(new Error(line));
+                    this.rejectReady = undefined;
+                }
+                buff = buff.substring(regexArray[1].length + regexArray[2].length);
+                regexArray = LINE_REGEX.exec(buff);
+            }
+        });
+    }
+
+}

arduino-debugger-extension/src/node/debug-adapter/arduino-variable-handler.ts

@@ -0,0 +1,115 @@
+import * as path from 'path';
+import { DebugProtocol } from "vscode-debugprotocol";
+import { Handles } from 'vscode-debugadapter/lib/handles';
+import { FrameReference, VariableReference } from "cdt-gdb-adapter/dist/GDBDebugSession";
+import { VarManager } from 'cdt-gdb-adapter/dist/varManager';
+import * as mi from 'cdt-gdb-adapter/dist/mi';
+import { ArduinoDebugSession } from "./arduino-debug-session";
+import { ArduinoGDBBackend } from './arduino-gdb-backend';
+
+export class ArduinoVariableHandler {
+
+    protected readonly gdb: ArduinoGDBBackend;
+    protected readonly varMgr: VarManager;
+
+    protected globalHandle: number;
+
+    constructor(protected readonly session: ArduinoDebugSession,
+        protected frameHandles: Handles<FrameReference>,
+        protected variableHandles: Handles<VariableReference>) {
+        this.gdb = session.arduinoBackend;
+        this.varMgr = new VarManager(this.gdb);
+    }
+
+    createGlobalHandle() {
+        this.globalHandle = this.frameHandles.create({
+            threadId: -1,
+            frameId: -1
+        });
+    }
+
+    /** TODO */
+    async getGlobalVariables(): Promise<DebugProtocol.Variable[]> {
+        throw new Error('Global variables are not supported yet.');
+        const frame = this.frameHandles.get(this.globalHandle);
+        const symbolInfo: any[] = [] // this.symbolTable.getGlobalVariables();
+        const variables: DebugProtocol.Variable[] = [];
+
+        for (const symbol of symbolInfo) {
+            const name = `global_var_${symbol.name}`;
+            const variable = await this.getVariables(frame, name, symbol.name, -1);
+            variables.push(variable);
+        }
+
+        return variables;
+    }
+
+    /** TODO */
+    async getStaticVariables(frameHandle: number): Promise<DebugProtocol.Variable[]> {
+        throw new Error('Static variables are not supported yet.');
+        const frame = this.frameHandles.get(frameHandle);
+        const result = await this.gdb.sendStackInfoFrame(frame.threadId, frame.frameId);
+        const file = path.normalize(result.frame.file || '');
+        const symbolInfo: any[] = [] // this.symbolTable.getStaticVariables(file);
+        const variables: DebugProtocol.Variable[] = [];
+
+        // Fetch stack depth to obtain frameId/threadId/depth tuple
+        const stackDepth = await mi.sendStackInfoDepth(this.gdb, { maxDepth: 100 });
+        const depth = parseInt(stackDepth.depth, 10);
+
+        for (const symbol of symbolInfo) {
+            const name = `${file}_static_var_${symbol.name}`;
+            const variable = await this.getVariables(frame, name, symbol.name, depth);
+            variables.push(variable);
+        }
+
+        return variables;
+    }
+
+    private async getVariables(frame: FrameReference, name: string, expression: string, depth: number): Promise<DebugProtocol.Variable> {
+        let global = this.varMgr.getVar(frame.frameId, frame.threadId, depth, name);
+
+        if (global) {
+            // Update value if it is already loaded
+            const vup = await mi.sendVarUpdate(this.gdb, { name });
+            const update = vup.changelist[0];
+            if (update && update.in_scope === 'true' && update.name === global.varname) {
+                global.value = update.value;
+            }
+        } else {
+            // create var in GDB and store it in the varMgr
+            const varCreateResponse = await mi.sendVarCreate(this.gdb, {
+                name,
+                frame: 'current',
+                expression,
+            });
+
+            global = this.varMgr.addVar(frame.frameId, frame.threadId, depth, name, true, false, varCreateResponse);
+        }
+
+        return {
+            name: expression,
+            value: (global.value === void 0) ? '<unknown>' : global.value,
+            type: global.type,
+            variablesReference: parseInt(global.numchild, 10) > 0
+                ? this.variableHandles.create({
+                    frameHandle: this.globalHandle,
+                    type: 'object',
+                    varobjName: global.varname,
+                })
+                : 0,
+        };
+    }
+
+    async handlePinStatusRequest(): Promise<DebugProtocol.Variable[]> {
+        const variables: DebugProtocol.Variable[] = [];
+        variables.push({
+            name: "D2",
+            type: "gpio",
+            value: "0x00",
+            variablesReference: 0
+        })
+        return variables;
+    }
+
+}

arduino-debugger-extension/src/node/debug-adapter/main.ts

@@ -0,0 +1,10 @@
+import * as process from 'process';
+import { logger } from 'vscode-debugadapter/lib/logger';
+import { ArduinoDebugSession } from './arduino-debug-session';
+import { DebugSession } from 'vscode-debugadapter';
+
+process.on('uncaughtException', (err: any) => {
+    logger.error(JSON.stringify(err));
+});
+
+DebugSession.run(ArduinoDebugSession);

arduino-debugger-extension/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "noImplicitAny": true,
+    "noEmitOnError": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "experimentalDecorators": true,
+    "downlevelIteration": true,
+    "emitDecoratorMetadata": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es6",
+    "outDir": "lib",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "jsx": "react",
+    "sourceMap": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src"
+  ],
+  "files": [
+    "../node_modules/@theia/monaco/src/typings/monaco/index.d.ts"
+  ]
+}

arduino-debugger-extension/tslint.json

@@ -0,0 +1,37 @@
+{
+  "rules": {
+    "class-name": true,
+    "comment-format": [true, "check-space"],
+    "curly": false,
+    "forin": false,
+    "indent": [true, "spaces"],
+    "max-line-length": [true, 180],
+    "no-trailing-whitespace": false,
+    "no-unused-expression": true,
+    "no-var-keyword": true,
+    "one-line": [true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "radix": true,
+    "trailing-comma": [false],
+    "triple-equals": [true, "allow-null-check"],
+    "typedef-whitespace": [true, {
+      "call-signature": "nospace",
+      "index-signature": "nospace",
+      "parameter": "nospace",
+      "property-declaration": "nospace",
+      "variable-declaration": "nospace"
+    }],
+    "variable-name": false,
+    "whitespace": [true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  }
+}

arduino-ide-electron/package.json

@@ -1,49 +0,0 @@
-{
-    "private": true,
-    "name": "arduino-ide-electron",
-    "version": "0.0.1",
-    "license": "MIT",
-    "dependencies": {
-        "@theia/core": "next",
-        "@theia/editor": "next",
-        "@theia/electron": "next",
-        "@theia/file-search": "next",
-        "@theia/filesystem": "next",
-        "@theia/languages": "next",
-        "@theia/messages": "next",
-        "@theia/monaco": "next",
-        "@theia/navigator": "next",
-        "@theia/preferences": "next",
-        "@theia/process": "next",
-        "@theia/terminal": "next",
-        "@theia/workspace": "next",
-        "@theia/textmate-grammars": "next",
-        "arduino-ide-extension": "0.0.1"
-    },
-    "devDependencies": {
-        "@theia/cli": "next",
-        "electron": "^4.2.0"
-    },
-    "scripts": {
-        "prepare": "theia build --mode development",
-        "start": "theia start --root-dir=../workspace",
-        "watch": "theia build --watch --mode development"
-    },
-    "theia": {
-        "target": "electron",
-        "frontend": {
-            "config": {
-                "applicationName": "Arduino-PoC",
-                "defaultTheme": "arduino-theme",
-                "preferences": {
-                    "editor.autoSave": "on"
-                }
-            }
-        }
-    },
-    "generator": {
-        "config": {
-            "preloadTemplate": "<div class='theia-preload' style='background-color: rgb(237, 241, 242);'></div>"
-        }
-    }
-}

arduino-ide-extension/README.md

@@ -0,0 +1,52 @@
+## Arduino IDE Extension
+
+Arduino Pro IDE is based on Theia, and most of its IDE features, UIs and customizations are implemented in this Theia extension.
+
+### IDE Services
+
+IDE services typically have a backend part in [src/node/](./src/node/) and a front-end part in [src/browser/](./src/browser/).
+
+#### Boards Service
+
+The Boards Service continuously checks the computer's ports, in order to detect when you connect or disconnect an Arduino board.
+
+The Boards Manager lists all the known board types, and allows downloading new cores to get additional board types.
+
+- [src/common/protocol/boards-service.ts](./src/common/protocol/boards-service.ts) implements the common classes and interfaces
+- [src/node/boards-service-impl.ts](./src/node/boards-service-impl.ts) implements the service backend:
+  - discovering ports & boards
+  - searching for compatible board types
+  - installing new board types
+- [src/browser/boards/boards-list-widget.ts](./src/browser/boards/boards-service-client-impl.ts) implements the Boards Manager front-end:
+  - browsing/searching available board types
+  - installing new board types
+
+#### Core Service
+
+The Core Service is responsible for building your sketches and uploading them to a board.
+
+- [src/common/protocol/core-service.ts](./src/common/protocol/core-service.ts) implements the common classes and interfaces
+- [src/node/core-service-impl.ts](./src/node/core-service-impl.ts) implements the service backend:
+  - compiling a sketch for a selected board type
+  - uploading a sketch to a connected board
+
+#### Monitor Service
+
+The Monitor Service allows getting information back from sketches running on your Arduino boards.
+
+- [src/common/protocol/monitor-service.ts](./src/common/protocol/monitor-service.ts) implements the common classes and interfaces
+- [src/node/monitor-service-impl.ts](./src/node/monitor-service-impl.ts) implements the service backend:
+  - connecting to / disconnecting from a board
+  - receiving and sending data
+- [src/browser/monitor/monitor-widget.tsx](./src/browser/monitor/monitor-widget.tsx) implements the serial monitor front-end:
+  - viewing the output from a connected board
+  - entering data to send to the board
+
+#### Config Service
+
+The Config Service knows about your system, like for example the default sketch locations.
+
+- [src/common/protocol/config-service.ts](./src/common/protocol/config-service.ts) implements the common classes and interfaces
+- [src/node/config-service-impl.ts](./src/node/config-service-impl.ts) implements the service backend:
+  - getting the `arduino-cli` version and configuration
+  - checking whether a file is in a data or sketch directory

arduino-ide-extension/data/cli/schema/arduino-cli.schema.json

@@ -0,0 +1,117 @@
+{
+  "$id": "http://arduino.cc/arduino-cli.json",
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "Arduino CLI Configuration",
+  "properties": {
+    "board_manager": {
+      "type": "object",
+      "description": "Board Manager Configuration",
+      "properties": {
+        "additional_urls": {
+          "type": "array",
+          "description": "If your board requires 3rd party core packages to work, you can list the URLs to additional package indexes in the Arduino CLI configuration file.",
+          "items": {
+            "type": "string",
+            "description": "URL pointing to the 3rd party core package index JSON.",
+            "pattern": "^(.*)$"
+          },
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
+    "daemon": {
+      "type": "object",
+      "description": "CLI Daemon Configuration",
+      "properties": {
+        "port": {
+          "type": [
+            "string",
+            "number"
+          ],
+          "description": "The CLI daemon port where the gRPC clients can connect to.",
+          "pattern": "^([0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$",
+          "additionalProperties": false
+        }
+      },
+      "additionalProperties": false
+    },
+    "directories": {
+      "type": "object",
+      "description": "Directories Configuration",
+      "properties": {
+        "data": {
+          "type": "string",
+          "description": "Path to the the data folder where core packages will be stored.",
+          "pattern": "^(.*)$"
+        },
+        "downloads": {
+          "type": "string",
+          "description": "Path to the staging folder.",
+          "pattern": "^(.*)$"
+        },
+        "user": {
+          "type": "string",
+          "description": "Path to the sketchbooks.",
+          "pattern": "^(.*)$"
+        }
+      },
+      "additionalProperties": false
+    },
+    "logging": {
+      "type": "object",
+      "description": "Logging Configuration",
+      "properties": {
+        "file": {
+          "type": "string",
+          "description": "Path to the file where logs will be written.",
+          "pattern": "^(.*)$"
+        },
+        "format": {
+          "type": "string",
+          "description": "The output format for the logs, can be 'text' or 'json'",
+          "enum": [
+            "text",
+            "json"
+          ]
+        },
+        "level": {
+          "type": "string",
+          "description": "Messages with this level and above will be logged.",
+          "enum": [
+            "trace",
+            "debug",
+            "info",
+            "warning",
+            "error",
+            "fatal",
+            "panic"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "telemetry": {
+      "type": "object",
+      "description": "Telemetry Configuration",
+      "properties": {
+        "addr": {
+          "type": "string",
+          "description": "Address to the telemetry endpoint. Must be a full address with host, address, and port. For instance, ':9090' represents 'localhost:9090'",
+          "pattern": "^(.*)$"
+        },
+        "enabled": {
+          "type": "boolean",
+          "description": "Whether the telemetry is enabled or not."
+        },
+        "additionalProperties": false
+      },
+      "additionalProperties": false
+    }
+  },
+  "// TODOs": [
+    "additionalProperties should be true. See the new telemetry entry"
+  ],
+  "additionalProperties": false
+}

arduino-ide-extension/package.json

@@ -1,52 +1,100 @@
 {
   "name": "arduino-ide-extension",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "An extension for Theia building the Arduino IDE",
   "license": "MIT",
-  "engines": {
-    "node": ">=10.10.0"
-  },
-  "dependencies": {
-    "@grpc/grpc-js": "^0.4.0",
-    "@theia/core": "next",
-    "@theia/editor": "next",
-    "@theia/filesystem": "next",
-    "@theia/languages": "next",
-    "@theia/markers": "next",
-    "@theia/monaco": "next",
-    "@theia/outline-view": "next",
-    "@theia/workspace": "next",
-    "@theia/navigator": "next",
-    "@theia/terminal": "next",
-    "@types/which": "^1.3.1",
-    "css-element-queries": "^1.2.0",
-    "p-queue": "^5.0.0",
-    "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",
-    "watch": "tsc -w"
+    "watch": "tsc -w",
+    "test": "mocha \"./lib/test/**/*.test.js\"",
+    "test:watch": "mocha --watch --watch-files lib \"./lib/test/**/*.test.js\""
+  },
+  "dependencies": {
+    "@grpc/grpc-js": "^1.1.1",
+    "@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",
+    "@theia/navigator": "next",
+    "@theia/outline-view": "next",
+    "@theia/preferences": "next",
+    "@theia/output": "next",
+    "@theia/search-in-workspace": "next",
+    "@theia/terminal": "next",
+    "@theia/workspace": "next",
+    "@types/dateformat": "^3.0.1",
+    "@types/deepmerge": "^2.2.0",
+    "@types/glob": "^5.0.35",
+    "@types/google-protobuf": "^3.7.2",
+    "@types/js-yaml": "^3.12.2",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/ncp": "^2.0.4",
+    "@types/ps-tree": "^1.1.0",
+    "@types/react-select": "^3.0.0",
+    "@types/sinon": "^7.5.2",
+    "@types/temp": "^0.8.34",
+    "@types/which": "^1.3.1",
+    "ajv": "^6.5.3",
+    "css-element-queries": "^1.2.0",
+    "dateformat": "^3.0.3",
+    "deepmerge": "^4.2.2",
+    "fuzzy": "^0.1.3",
+    "glob": "^7.1.6",
+    "google-protobuf": "^3.11.4",
+    "lodash.debounce": "^4.0.8",
+    "js-yaml": "^3.13.1",
+    "ncp": "^2.0.0",
+    "p-queue": "^5.0.0",
+    "ps-tree": "^1.2.0",
+    "react-select": "^3.0.4",
+    "semver": "^6.3.0",
+    "string-natural-compare": "^2.0.3",
+    "temp": "^0.9.1",
+    "tree-kill": "^1.2.1",
+    "upath": "^1.1.2",
+    "which": "^1.3.1"
   },
   "devDependencies": {
+    "@types/chai": "^4.2.7",
+    "@types/chai-string": "^1.4.2",
+    "@types/mocha": "^5.2.7",
+    "chai": "^4.2.0",
+    "chai-string": "^1.5.0",
     "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",
-    "ncp": "^2.0.0",
-    "rimraf": "^2.6.1",
+    "grpc_tools_node_protoc_ts": "^4.1.0",
+    "mocha": "^7.0.0",
+    "moment": "^2.24.0",
+    "protoc": "^1.0.4",
     "shelljs": "^0.8.3",
-    "tslint": "^5.5.0",
-    "typescript": "2.9.1",
+    "sinon": "^9.0.1",
     "uuid": "^3.2.1",
     "yargs": "^11.1.0"
   },
+  "optionalDependencies": {
+    "grpc-tools": "^1.9.0"
+  },
+  "mocha": {
+    "require": [
+      "reflect-metadata/Reflect"
+    ],
+    "reporter": "spec",
+    "colors": true,
+    "watch-extensions": "js",
+    "timeout": 10000
+  },
   "files": [
     "lib",
     "src",
@@ -55,12 +103,15 @@
   ],
   "theiaExtensions": [
     {
-      "backend": "lib/node/arduino-backend-module",
-      "frontend": "lib/browser/arduino-frontend-module"
+      "backend": "lib/node/arduino-ide-backend-module",
+      "frontend": "lib/browser/arduino-ide-frontend-module"
     },
     {
-      "frontend": "lib/browser/menu/browser-arduino-menu-module",
-      "frontendElectron": "lib/electron-browser/electron-arduino-menu-module"
+      "frontend": "lib/browser/theia/core/browser-menu-module",
+      "frontendElectron": "lib/electron-browser/theia/core/electron-menu-module"
+    },
+    {
+      "frontend": "lib/browser/boards/quick-open/boards-quick-open-module"
     }
   ]
-}
+}

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

@@ -1,41 +1,26 @@
 // @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 = '0.12.1'; // 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, or 'nightly-latest'. Defaults to ${DEFAULT_VERSION}.`
         })
         .option('force-download', {
             alias: 'fd',
@@ -49,32 +34,17 @@
     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 cli = path.join(build, `arduino-cli${platform === 'win32' ? '.exe' : ''}`);
 
     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 'arm': return 'Linux_ARMv7.tar.gz';
+                    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.');
+    const url = `https://downloads.arduino.cc/arduino-cli${version.startsWith('nightly-') ? '/nightly' : ''}/arduino-cli_${version}_${suffix}`;
+    downloader.downloadUnzipFile(url, cli, 'arduino-cli', force);
 
-    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.');
-    }
-
-})();
+})();

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 = '9.0.0';
+
+    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', '9.0.0'],
+            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 alsTarget = path.join(build, `arduino-language-server${platform === 'win32' ? '.exe' : ''}`);
+
+    let clangdTarget, alsSuffix, clangdSuffix;
+    switch (platform) {
+        case 'darwin':
+            clangdTarget = path.join(build, 'bin', 'clangd')
+            alsSuffix = 'Darwin_amd64.zip';
+            clangdSuffix = 'macos.zip';
+            break;
+        case 'linux':
+            clangdTarget = path.join(build, 'bin', 'clangd')
+            alsSuffix = 'Linux_amd64.zip';
+            clangdSuffix = 'linux.zip'
+            break;
+        case 'win32':
+            clangdTarget = path.join(build, 'clangd.exe')
+            alsSuffix = 'Windows_NT_amd64.zip';
+            clangdSuffix = 'windows.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.downloadUnzipAll(alsUrl, build, alsTarget, force);
+
+    const clangdUrl = `https://downloads.arduino.cc/arduino-language-server/clangd/clangd_${clangdVersion}_${clangdSuffix}`;
+    downloader.downloadUnzipAll(clangdUrl, build, clangdTarget, force);
+
+})();

arduino-ide-extension/scripts/downloader.js

@@ -0,0 +1,116 @@
+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;
+});
+
+/**
+ * @param url {string}        Download URL
+ * @param targetFile {string} Path to the file to copy from the decompressed archive
+ * @param filePrefix {string} Prefix of the file name found in the archive
+ * @param force {boolean}     Whether to download even if the target file exists
+ */
+exports.downloadUnzipFile = async (url, targetFile, filePrefix, force) => {
+    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);
+    }
+    shell.echo(`Done: ${targetFile}`);
+}
+
+/**
+ * @param url {string}        Download URL
+ * @param targetDir {string}  Directory into which to decompress the archive
+ * @param targetFile {string} Path to the main file expected after decompressing
+ * @param force {boolean}     Whether to download even if the target file exists
+ */
+exports.downloadUnzipAll = async (url, targetDir, targetFile, force) => {
+    if (fs.existsSync(targetFile) && !force) {
+        shell.echo(`Skipping download because file already exists: ${targetFile}`);
+        return;
+    }
+    if (!fs.existsSync(targetDir)) {
+        if (shell.mkdir('-p', targetDir).code !== 0) {
+            shell.echo('Could not create new directory.');
+            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, targetDir, {
+        plugins: [
+            unzip(),
+            untargz()
+        ]
+    });
+    if (files.length === 0) {
+        shell.echo('Error ocurred while decompressing the archive.');
+        shell.exit(1);
+    }
+    shell.echo('<<< Decompressing succeeded.');
+
+    if (!fs.existsSync(targetFile)) {
+        shell.echo(`Could not find file: ${targetFile}`);
+        shell.exit(1);
+    }
+    shell.echo(`Done: ${targetFile}`);
+}

arduino-ide-extension/scripts/generate-protocol.js

@@ -2,30 +2,15 @@
 
 (async () => {
 
-    const DEFAULT_VERSION = 'nightly'; // '0.3.7-alpha.preview';
-
     const os = require('os');
     const path = require('path');
+    const glob = require('glob');
     const { v4 } = require('uuid');
     const shell = require('shelljs');
+    const protoc = path.dirname(require('protoc/protoc'));
+    shell.env.PATH = `${shell.env.PATH}${path.delimiter}${protoc}`;
     shell.env.PATH = `${shell.env.PATH}${path.delimiter}${path.join(__dirname, '..', 'node_modules', '.bin')}`;
-    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. Specify either an existing version or use 'nightly'. Defaults to ${DEFAULT_VERSION}.`
-        })
-        .version(false).parse();
 
-    const version = yargs['cli-version'];
-    if (version !== 'nightly') {
-        shell.echo(`Only 'nightly' version is supported.`);
-        shell.exit(1);
-    }
     const repository = path.join(os.tmpdir(), `${v4()}-arduino-cli`);
     if (shell.mkdir('-p', repository).code !== 0) {
         shell.exit(1);
@@ -34,48 +19,63 @@
     if (shell.exec(`git clone https://github.com/arduino/arduino-cli.git ${repository}`).code !== 0) {
         shell.exit(1);
     }
-    if (version !== 'nightly') {
-        if (shell.exec(`git -C ${repository} checkout tags/${version} -b ${version}`).code !== 0) {
+
+    const { platform } = process;
+    const build = path.join(__dirname, '..', 'build');
+    const cli = path.join(build, `arduino-cli${platform === 'win32' ? '.exe' : ''}`);
+    const rawVersion = shell.exec(`${cli} version`).trim();
+    if (!rawVersion) {
+        shell.echo(`Could not retrieve the CLI version from ${cli}.`);
+        shell.exit(1);
+    }
+    const version = rawVersion.substring(rawVersion.lastIndexOf('Commit:') + 'Commit:'.length).trim();
+    if (version) {
+        if (shell.exec(`git -C ${repository} checkout ${version} -b ${version}`).code !== 0) {
             shell.exit(1);
         }
     }
-    shell.echo('Generating TS/JS API from:');
+
+    shell.echo('>>> Generating TS/JS API from:');
     if (shell.exec(`git -C ${repository} rev-parse --abbrev-ref HEAD`).code !== 0) {
         shell.exit(1);
     }
-    if (shell.exec(`git -C ${repository} rev-parse --short HEAD`).code !== 0) {
-        shell.exit(1);
-    }
-
-    const pluginExec = shell.which('grpc_tools_node_protoc_plugin');
-    if (!pluginExec || pluginExec.code !== 0) {
-        shell.exit(1);
-    }
-    const plugin = pluginExec.stdout.trim();
 
     const rpc = path.join(repository, 'rpc');
     const out = path.join(__dirname, '..', 'src', 'node', 'cli-protocol');
+    shell.mkdir('-p', out);
+
+    const protos = await new Promise(resolve =>
+        glob('**/*.proto', { cwd: rpc }, (error, matches) => {
+            if (error) {
+                shell.echo(error.stack);
+                resolve([]);
+                return;
+            }
+            resolve(matches.map(filename => path.join(rpc, filename)));
+        }));
+    if (!protos || protos.length === 0) {
+        shell.echo(`Could not find any .proto files under ${rpc}.`);
+        shell.exit(1);
+    }
+
     // Generate JS code from the `.proto` files.
     if (shell.exec(`grpc_tools_node_protoc \
 --js_out=import_style=commonjs,binary:${out} \
---grpc_out=${out} \
---plugin=protoc-gen-grpc=${plugin} \
+--grpc_out=generate_package_definition:${out} \
 -I ${rpc} \
-${path.join(rpc, '/**/*.proto')}`).code !== 0) {
+${protos.join(' ')}`).code !== 0) {
         shell.exit(1);
     }
 
     // Generate the `.d.ts` files for JS.
     if (shell.exec(`protoc \
---plugin=protoc-gen-ts=${path.resolve(__dirname, '..', 'node_modules', '.bin', 'protoc-gen-ts')} \
---ts_out=${out} \
+--plugin=protoc-gen-ts=${path.resolve(__dirname, '..', 'node_modules', '.bin', `protoc-gen-ts${platform === 'win32' ? '.cmd' : ''}`)} \
+--ts_out=generate_package_definition:${out} \
 -I ${rpc} \
-${path.join(rpc, '/**/*.proto')}`).code !== 0) {
+${protos.join(' ')}`).code !== 0) {
         shell.exit(1);
     }
 
-    const { patch } = require('./patch-grpc-js');
-    patch([out])
-    shell.echo('Done.');
+    shell.echo('<<< Generation was successful.');
 
-})();
+})();

arduino-ide-extension/scripts/patch-grpc-js.js

@@ -1,38 +0,0 @@
-// Use `@grpc/grpc-js` instead of `grpc` at runtime.
-// https://github.com/grpc/grpc-node/issues/624
-// https://github.com/grpc/grpc-node/issues/931
-
-const fs = require('fs');
-const path = require('path');
-
-module.exports.patch = function (roots = [path.join(__dirname, '..', 'src', 'node')]) {
-    console.info('🔧  <<< Patching code...');
-    patch(roots);
-    console.info('👌  <<< Done. The code has been patched.');
-};
-
-function patch(paths) {
-    for (const p of paths) {
-        const exist = fs.existsSync(p);
-        if (exist) {
-            const stat = fs.statSync(p);
-            if (stat.isDirectory()) {
-                console.info(`🔧  >>> Scanning code in ${p}...`);
-                patch(fs.readdirSync(p).map(name => path.join(p, name)));
-            } else {
-                let content = fs.readFileSync(p, { encoding: 'utf8' });
-                if (content.indexOf("require('grpc')") !== -1) {
-                    console.info(`Updated require('grpc') to require('@grpc/grpc-js') in ${p}.`);
-                    fs.writeFileSync(p, content.replace("require('grpc')", "require('@grpc/grpc-js')"));
-                }
-                content = fs.readFileSync(p, { encoding: 'utf8' });
-                if (content.indexOf('import * as grpc from "grpc"') !== -1) {
-                    console.info(`Updated import * as grpc from "grpc" to import * as grpc from "@grpc/grpc-js" in ${p}.`);
-                    fs.writeFileSync(p, content.replace('import * as grpc from "grpc"', 'import * as grpc from "@grpc/grpc-js"'));
-                }
-            }
-        } else {
-            console.warn(`${p} does not exist. Skipping.`);
-        }
-    }
-}

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

@@ -1,51 +1,30 @@
 import { Command } from '@theia/core/lib/common/command';
 
+/**
+ * @deprecated all these commands should go under contributions and have their command, menu, keybinding, and toolbar contributions.
+ */
 export namespace ArduinoCommands {
 
-    export const VERIFY: Command = {
-        id: 'arduino-verify',
-        label: 'Verify Sketch'
-    }
+    export const TOGGLE_COMPILE_FOR_DEBUG: Command = {
+        id: 'arduino-toggle-compile-for-debug'
+    };
 
-    export const UPLOAD: Command = {
-        id: 'arduino-upload',
-        label: 'Upload Sketch'
-    }
-
-    export const SHOW_OPEN_CONTEXT_MENU: Command = {
-        id: 'arduino-show-open-context-menu',
-        label: 'Open Sketch'
-    }
-
-    export const OPEN_FILE_NAVIGATOR: Command = {
-        id: 'arduino-open-file-navigator'
-    }
-
-    export const OPEN_SKETCH: Command = {
-        id: 'arduino-open-file'
-    }
-
-    export const SAVE_SKETCH: Command = {
-        id: 'arduino-save-file'
-    }
-
-    export const NEW_SKETCH: Command = {
-        id: "arduino-new-sketch",
-        label: 'New Sketch',
-        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"
-    }
+    /**
+     * Unlike `OPEN_SKETCH`, it opens all files from a sketch folder. (ino, cpp, etc...)
+     */
+    export const OPEN_SKETCH_FILES: Command = {
+        id: 'arduino-open-sketch-files'
+    };
 
     export const OPEN_BOARDS_DIALOG: Command = {
-        id: "arduino-open-boards-dialog"
-    }
+        id: 'arduino-open-boards-dialog'
+    };
+
+    export const TOGGLE_ADVANCED_MODE: Command = {
+        id: 'arduino-toggle-advanced-mode'
+    };
+    export const TOGGLE_ADVANCED_MODE_TOOLBAR: Command = {
+        id: 'arduino-toggle-advanced-mode-toolbar'
+    };
 
 }

arduino-ide-extension/src/browser/arduino-daemon-client-impl.ts

@@ -0,0 +1,53 @@
+import { injectable, inject } from 'inversify';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { Event, Emitter } from '@theia/core/lib/common/event';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { ArduinoDaemonClient } from '../common/protocol';
+
+@injectable()
+export class ArduinoDaemonClientImpl implements ArduinoDaemonClient {
+
+    @inject(ILogger)
+    protected readonly logger: ILogger;
+
+    @inject(MessageService)
+    protected readonly messageService: MessageService;
+
+    protected readonly onStartedEmitter = new Emitter<void>();
+    protected readonly onStoppedEmitter = new Emitter<void>();
+    protected _isRunning = false;
+
+    notifyStopped(): void {
+        if (this._isRunning) {
+            this._isRunning = false;
+            this.onStoppedEmitter.fire();
+            this.info('The CLI daemon process has stopped.');
+        }
+    }
+
+    notifyStarted(): void {
+        if (!this._isRunning) {
+            this._isRunning = true;
+            this.onStartedEmitter.fire();
+            this.info('The CLI daemon process has started.');
+        }
+    }
+
+    get onDaemonStarted(): Event<void> {
+        return this.onStartedEmitter.event;
+    }
+
+    get onDaemonStopped(): Event<void> {
+        return this.onStoppedEmitter.event;
+    }
+
+    get isRunning(): boolean {
+        return this._isRunning;
+    }
+
+    protected info(message: string): void {
+        this.messageService.info(message, { timeout: 3000 });
+        this.logger.info(message);
+    }
+
+}

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

@@ -1,78 +1,73 @@
-import * as React from 'react';
-import { injectable, inject, postConstruct } from 'inversify';
-import URI from '@theia/core/lib/common/uri';
-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 { MAIN_MENU_BAR, MenuContribution, MenuModelRegistry, SelectionService } from '@theia/core';
+import {
+    ContextMenuRenderer,
+    FrontendApplication, FrontendApplicationContribution,
+    OpenerService, StatusBar, StatusBarAlignment
+} from '@theia/core/lib/browser';
+import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
+import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
+import { CommonMenus } from '@theia/core/lib/browser/common-frontend-contribution';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import { BoardsService, Board } 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 { 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 { ArduinoToolbar } from './toolbar/arduino-toolbar';
-import { EditorManager, EditorMainMenu } from '@theia/editor/lib/browser';
-import { ContextMenuRenderer, OpenerService, Widget, StatusBar } 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';
-import { FileSystemCommands } from '@theia/filesystem/lib/browser/filesystem-frontend-contribution';
-import { FileDownloadCommands } from '@theia/filesystem/lib/browser/download/file-download-command-contribution';
+import { CommandContribution, CommandRegistry } from '@theia/core/lib/common/command';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import URI from '@theia/core/lib/common/uri';
+import { EditorMainMenu, EditorManager } from '@theia/editor/lib/browser';
+import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog';
+import { FileSystem } from '@theia/filesystem/lib/common';
+import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
 import { MonacoMenus } from '@theia/monaco/lib/browser/monaco-menu';
+import { FileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
+import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
+import { OutputContribution } from '@theia/output/lib/browser/output-contribution';
+import { ScmContribution } from '@theia/scm/lib/browser/scm-contribution';
+import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
 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 { inject, injectable, postConstruct } from 'inversify';
+import * as React from 'react';
+import { MainMenuManager } from '../common/main-menu-manager';
+import { BoardsService, BoardsServiceClient, CoreService, Port, SketchesService, ToolOutputServiceClient } from '../common/protocol';
+import { ArduinoDaemon } from '../common/protocol/arduino-daemon';
+import { ConfigService } from '../common/protocol/config-service';
+import { FileSystemExt } from '../common/protocol/filesystem-ext';
+import { ArduinoCommands } from './arduino-commands';
+import { BoardsConfig } from './boards/boards-config';
+import { BoardsConfigDialog } from './boards/boards-config-dialog';
+import { BoardsDataStore } from './boards/boards-data-store';
+import { BoardsServiceClientImpl } from './boards/boards-service-client-impl';
 import { BoardsToolBarItem } from './boards/boards-toolbar-item';
-
-export namespace ArduinoMenus {
-    export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
-    export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
-}
+import { EditorMode } from './editor-mode';
+import { ArduinoMenus } from './menu/arduino-menus';
+import { MonitorConnection } from './monitor/monitor-connection';
+import { MonitorViewContribution } from './monitor/monitor-view-contribution';
+import { WorkspaceService } from './theia/workspace/workspace-service';
+import { ArduinoToolbar } from './toolbar/arduino-toolbar';
 
 @injectable()
-export class ArduinoFrontendContribution implements TabBarToolbarContribution, CommandContribution, MenuContribution {
+export class ArduinoFrontendContribution implements FrontendApplicationContribution,
+    TabBarToolbarContribution, CommandContribution, MenuContribution, ColorContribution {
 
     @inject(MessageService)
     protected readonly messageService: MessageService;
 
     @inject(BoardsService)
-    protected readonly boardService: BoardsService;
+    protected readonly boardsService: BoardsService;
 
     @inject(CoreService)
     protected readonly coreService: CoreService;
 
-    @inject(WorkspaceServiceExt)
-    protected readonly workspaceServiceExt: WorkspaceServiceExt;
-
     @inject(ToolOutputServiceClient)
     protected readonly toolOutputServiceClient: ToolOutputServiceClient;
 
-    @inject(QuickPickService)
-    protected readonly quickPickService: QuickPickService;
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClientImpl: BoardsServiceClientImpl;
 
-    @inject(BoardsListWidgetFrontendContribution)
-    protected readonly boardsListWidgetFrontendContribution: BoardsListWidgetFrontendContribution;
-
-    @inject(BoardsNotificationService)
-    protected readonly boardsNotificationService: BoardsNotificationService;
+    // Unused but do not remove it. It's required by DI, otherwise `init` method is not called.
+    @inject(BoardsServiceClient)
+    protected readonly boardsServiceClient: BoardsServiceClient;
 
     @inject(SelectionService)
     protected readonly selectionService: SelectionService;
 
-    @inject(SketchFactory)
-    protected readonly sketchFactory: SketchFactory;
-
     @inject(EditorManager)
     protected readonly editorManager: EditorManager;
 
@@ -85,381 +80,268 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
     @inject(FileSystem)
     protected readonly fileSystem: FileSystem;
 
-    @inject(OpenerService)
-    protected readonly openerService: OpenerService;
-
-    @inject(WindowService)
-    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;
 
     @inject(CommandRegistry)
-    protected readonly commands: CommandRegistry;
+    protected readonly commandRegistry: CommandRegistry;
 
     @inject(StatusBar)
     protected readonly statusBar: StatusBar;
 
-    protected boardsToolbarItem: BoardsToolBarItem | null;
-    protected wsSketchCount: number = 0;
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
 
-    constructor(@inject(WorkspaceService) protected readonly workspaceService: WorkspaceService) {
-        this.workspaceService.onWorkspaceChanged(() => {
-            if (this.workspaceService.workspace) {
-                this.registerSketchesInMenu(this.menuRegistry);
-            }
-        })
-    }
+    @inject(MonitorConnection)
+    protected readonly monitorConnection: MonitorConnection;
+
+    @inject(FileNavigatorContribution)
+    protected readonly fileNavigatorContributions: FileNavigatorContribution;
+
+    @inject(OutputContribution)
+    protected readonly outputContribution: OutputContribution;
+
+    @inject(OutlineViewContribution)
+    protected readonly outlineContribution: OutlineViewContribution;
+
+    @inject(ProblemContribution)
+    protected readonly problemContribution: ProblemContribution;
+
+    @inject(ScmContribution)
+    protected readonly scmContribution: ScmContribution;
+
+    @inject(SearchInWorkspaceFrontendContribution)
+    protected readonly siwContribution: SearchInWorkspaceFrontendContribution;
+
+    @inject(EditorMode)
+    protected readonly editorMode: EditorMode;
+
+    @inject(ArduinoDaemon)
+    protected readonly daemon: ArduinoDaemon;
+
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
+
+    @inject(BoardsDataStore)
+    protected readonly boardsDataStore: BoardsDataStore;
+
+    @inject(MainMenuManager)
+    protected readonly mainMenuManager: MainMenuManager;
+
+    @inject(FileSystemExt)
+    protected readonly fileSystemExt: FileSystemExt;
 
     @postConstruct()
     protected async init(): Promise<void> {
-        // This is a hack. Otherwise, the backend services won't bind.
-        await this.workspaceServiceExt.roots();
+        if (!window.navigator.onLine) {
+            // tslint:disable-next-line:max-line-length
+            this.messageService.warn('You appear to be offline. Without an Internet connection, the Arduino CLI might not be able to download the required resources and could cause malfunction. Please connect to the Internet and restart the application.');
+        }
+        const updateStatusBar = ({ selectedBoard, selectedPort }: BoardsConfig.Config) => {
+            this.statusBar.setElement('arduino-selected-board', {
+                alignment: StatusBarAlignment.RIGHT,
+                text: selectedBoard ? `$(microchip) ${selectedBoard.name}` : '$(close) no board selected',
+                className: 'arduino-selected-board'
+            });
+            if (selectedBoard) {
+                this.statusBar.setElement('arduino-selected-port', {
+                    alignment: StatusBarAlignment.RIGHT,
+                    text: selectedPort ? `on ${Port.toString(selectedPort)}` : '[not connected]',
+                    className: 'arduino-selected-port'
+                });
+            }
+        }
+        this.boardsServiceClientImpl.onBoardsConfigChanged(updateStatusBar);
+        updateStatusBar(this.boardsServiceClientImpl.boardsConfig);
+    }
+
+    onStart(app: FrontendApplication): void {
+        // Initialize all `pro-mode` widgets. This is a NOOP if in normal mode.
+        for (const viewContribution of [
+            this.fileNavigatorContributions,
+            this.outputContribution,
+            this.outlineContribution,
+            this.problemContribution,
+            this.scmContribution,
+            this.siwContribution] as Array<FrontendApplicationContribution>) {
+            if (viewContribution.initializeLayout) {
+                viewContribution.initializeLayout(app);
+            }
+        }
     }
 
     registerToolbarItems(registry: TabBarToolbarRegistry): void {
         registry.registerItem({
-            id: ArduinoCommands.VERIFY.id,
-            command: ArduinoCommands.VERIFY.id,
-            tooltip: 'Verify',
-            text: '$(check)'
-        });
-        registry.registerItem({
-            id: ArduinoCommands.UPLOAD.id,
-            command: ArduinoCommands.UPLOAD.id,
-            tooltip: 'Upload',
-            text: '$(arrow-right)'
-        });
-        registry.registerItem({
-            id: ArduinoCommands.SHOW_OPEN_CONTEXT_MENU.id,
-            command: ArduinoCommands.SHOW_OPEN_CONTEXT_MENU.id,
-            tooltip: 'Open',
-            text: '$(arrow-up)'
-        });
-        registry.registerItem({
-            id: ArduinoCommands.SAVE_SKETCH.id,
-            command: ArduinoCommands.SAVE_SKETCH.id,
-            tooltip: 'Save',
-            text: '$(arrow-down)'
-        });
-        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)
-        })
+                commands={this.commandRegistry}
+                boardsServiceClient={this.boardsServiceClientImpl} />,
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            priority: 7
+        });
+        registry.registerItem({
+            id: 'toggle-serial-monitor',
+            command: MonitorViewContribution.TOGGLE_SERIAL_MONITOR_TOOLBAR,
+            tooltip: 'Serial Monitor'
+        });
+        registry.registerItem({
+            id: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+            command: ArduinoCommands.TOGGLE_ADVANCED_MODE_TOOLBAR.id,
+            tooltip: this.editorMode.proMode ? 'Switch to Classic Mode' : 'Switch to Advanced Mode',
+            text: this.editorMode.proMode ? '$(toggle-on)' : '$(toggle-off)'
+        });
     }
 
     registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(ArduinoCommands.VERIFY, {
-            isVisible: widget => this.isArduinoToolbar(widget),
-            isEnabled: widget => true,
-            execute: async () => {
-                const widget = this.getCurrentWidget();
-                if (widget instanceof EditorWidget) {
-                    await widget.saveable.save();
-                }
-
-                const uri = this.toUri(widget);
-                if (!uri) {
-                    return;
-                }
-
-                try {
-                    await this.coreService.compile({ uri: uri.toString() });
-                } catch (e) {
-                    await this.messageService.error(e.toString());
-                }
+        registry.registerCommand(ArduinoCommands.TOGGLE_COMPILE_FOR_DEBUG, {
+            execute: () => this.editorMode.toggleCompileForDebug(),
+            isToggled: () => this.editorMode.compileForDebug
+        });
+        registry.registerCommand(ArduinoCommands.OPEN_SKETCH_FILES, {
+            execute: async (uri: string) => {
+                this.openSketchFiles(uri);
             }
         });
-        registry.registerCommand(ArduinoCommands.UPLOAD, {
-            isVisible: widget => this.isArduinoToolbar(widget),
-            isEnabled: widget => true,
-            execute: async () => {
-                const widget = this.getCurrentWidget();
-                if (widget instanceof EditorWidget) {
-                    await widget.saveable.save();
-                }
-
-                const uri = this.toUri(widget);
-                if (!uri) {
-                    return;
-                }
-
-                try {
-                    await this.coreService.upload({ uri: uri.toString() });
-                } catch (e) {
-                    await this.messageService.error(e.toString());
-                }
-            }
-        });
-        registry.registerCommand(ArduinoCommands.SHOW_OPEN_CONTEXT_MENU, {
-            isVisible: widget => this.isArduinoToolbar(widget),
-            isEnabled: widget => this.isArduinoToolbar(widget),
-            execute: async (widget: Widget, target: EventTarget) => {
-                if (this.wsSketchCount) {
-                    const el = (target as HTMLElement).parentElement;
-                    if (el) {
-                        this.contextMenuRenderer.render(ArduinoToolbarContextMenu.OPEN_SKETCH_PATH, {
-                            x: el.getBoundingClientRect().left,
-                            y: el.getBoundingClientRect().top + el.offsetHeight
-                        });
-                    }
-                } else {
-                    this.commands.executeCommand(ArduinoCommands.OPEN_FILE_NAVIGATOR.id);
-                }
-            }
-        });
-        registry.registerCommand(ArduinoCommands.OPEN_FILE_NAVIGATOR, {
-            isEnabled: () => true,
-            execute: () => this.doOpenFile()
-        })
-        registry.registerCommand(ArduinoCommands.OPEN_SKETCH, {
-            isEnabled: () => true,
-            execute: async (sketch: Sketch) => {
-                this.openSketchFilesInNewWindow(sketch.uri);
-            }
-        })
-        registry.registerCommand(ArduinoCommands.SAVE_SKETCH, {
-            isEnabled: widget => this.isArduinoToolbar(widget),
-            isVisible: widget => this.isArduinoToolbar(widget),
-            execute: async (sketch: Sketch) => {
-                registry.executeCommand(CommonCommands.SAVE_ALL.id);
-            }
-        })
-        registry.registerCommand(ArduinoCommands.NEW_SKETCH, new WorkspaceRootUriAwareCommandHandler(this.workspaceService, this.selectionService, {
-            execute: async uri => {
-                try {
-                    // hack: sometimes we don't get the workspace root, but the currently active file: correct for that
-                    if (uri.path.ext !== "") {
-                        uri = uri.withPath(uri.path.dir.dir);
-                    }
-
-                    await this.sketchFactory.createNewSketch(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.boardsServiceClientImpl.boardsConfig = boardsConfig;
                 }
             }
-        })
+        });
+        registry.registerCommand(ArduinoCommands.TOGGLE_ADVANCED_MODE, {
+            isToggled: () => this.editorMode.proMode,
+            execute: () => this.editorMode.toggleProMode()
+        });
+        registry.registerCommand(ArduinoCommands.TOGGLE_ADVANCED_MODE_TOOLBAR, {
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right',
+            isToggled: () => this.editorMode.proMode,
+            execute: () => this.editorMode.toggleProMode()
+        });
     }
 
-    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);
-
-        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.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));
-
+        if (!this.editorMode.proMode) {
+            const menuId = (menuPath: string[]): string => {
+                const index = menuPath.length - 1;
+                const menuId = menuPath[index];
+                return menuId;
+            }
+            registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(MonacoMenus.SELECTION));
+            registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(EditorMainMenu.GO));
+            registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(TerminalMenus.TERMINAL));
+            registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(CommonMenus.VIEW));
+        }
         registry.registerSubmenu(ArduinoMenus.SKETCH, 'Sketch');
+        registry.registerSubmenu(ArduinoMenus.TOOLS, 'Tools');
         registry.registerMenuAction(ArduinoMenus.SKETCH, {
-            commandId: ArduinoCommands.VERIFY.id,
-            label: 'Verify/Compile',
+            commandId: ArduinoCommands.TOGGLE_COMPILE_FOR_DEBUG.id,
+            label: 'Optimize for Debugging',
             order: '1'
         });
-        registry.registerMenuAction(ArduinoMenus.SKETCH, {
-            commandId: ArduinoCommands.UPLOAD.id,
-            label: 'Upload',
-            order: '2'
+        registry.registerMenuAction(CommonMenus.HELP, {
+            commandId: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+            label: 'Advanced Mode'
         });
-        registry.registerMenuAction(ArduinoToolbarContextMenu.OPEN_GROUP, {
-            commandId: ArduinoCommands.OPEN_FILE_NAVIGATOR.id,
-            label: 'Open...'
-        });
-
-        registry.registerSubmenu(ArduinoMenus.TOOLS, 'Tools');
     }
 
-    protected getMenuId(menuPath: string[]): string {
-        const index = menuPath.length - 1;
-        const menuId = menuPath[index];
-        return menuId;
-    }
-
-    protected registerSketchesInMenu(registry: MenuModelRegistry) {
-        this.getWorkspaceSketches().then(sketches => {
-            this.wsSketchCount = sketches.length;
-            sketches.forEach(sketch => {
-                const command: Command = {
-                    id: 'openSketch' + sketch.name
-                }
-                this.commands.registerCommand(command, {
-                    execute: () => this.commands.executeCommand(ArduinoCommands.OPEN_SKETCH.id, sketch)
-                });
-
-                registry.registerMenuAction(ArduinoToolbarContextMenu.WS_SKETCHES_GROUP, {
-                    commandId: command.id,
-                    label: sketch.name
-                });
-            })
-        })
-    }
-
-    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);
-            for (const uri of uris) {
-                this.editorManager.open(new URI(uri));
+    protected async openSketchFiles(uri: string): Promise<void> {
+        try {
+            const sketch = await this.sketchService.loadSketch(uri);
+            const { mainFileUri, otherSketchFileUris, additionalFileUris } = sketch;
+            for (const uri of [mainFileUri, ...otherSketchFileUris, ...additionalFileUris]) {
+                await this.ensureOpened(uri);
             }
+            await this.ensureOpened(mainFileUri, true);
+        } catch (e) {
+            console.error(e);
+            const message = e instanceof Error ? e.message : JSON.stringify(e);
+            this.messageService.error(message);
         }
     }
 
-    /**
-     * Opens a file after prompting the `Open File` dialog. Resolves to `undefined`, if
-     *  - the workspace root is not set,
-     *  - the file to open does not exist, or
-     *  - it was not a file, but a directory.
-     *
-     * Otherwise, resolves to the URI of the file.
-     */
-    protected async doOpenFile(): Promise<URI | undefined> {
-        const props: OpenFileDialogProps = {
-            title: WorkspaceCommands.OPEN_FILE.dialogLabel,
-            canSelectFolders: false,
-            canSelectFiles: true
-        };
-        const [rootStat] = await this.workspaceService.roots;
-        const destinationFileUri = await this.fileDialogService.showOpenDialog(props, rootStat);
-        if (destinationFileUri) {
-            const destinationFile = await this.fileSystem.getFileStat(destinationFileUri.toString());
-            if (destinationFile && !destinationFile.isDirectory) {
-                const message = await this.validate(destinationFile);
-                if (!message) {
-                    await this.openSketchFilesInNewWindow(destinationFileUri.toString());
-                    return destinationFileUri;
-                } else {
-                    this.messageService.warn(message);
-                }
+    protected async ensureOpened(uri: string, forceOpen: boolean = false): Promise<any> {
+        const widget = this.editorManager.all.find(widget => widget.editor.uri.toString() === uri);
+        if (!widget || forceOpen) {
+            return this.editorManager.open(new URI(uri));
+        }
+    }
+
+    registerColors(colors: ColorRegistry): void {
+        colors.register(
+            {
+                id: 'arduino.branding.primary',
+                defaults: {
+                    dark: 'statusBar.background',
+                    light: 'statusBar.background'
+                },
+                description: 'The primary branding color, such as dialog titles, library, and board manager list labels.'
+            },
+            {
+                id: 'arduino.branding.secondary',
+                defaults: {
+                    dark: 'statusBar.background',
+                    light: 'statusBar.background'
+                },
+                description: 'Secondary branding color for list selections, dropdowns, and widget borders.'
+            },
+            {
+                id: 'arduino.foreground',
+                defaults: {
+                    dark: 'editorWidget.background',
+                    light: 'editorWidget.background',
+                    hc: 'editorWidget.background'
+                },
+                description: 'Color of the Arduino Pro IDE foreground which is used for dialogs, such as the Select Board dialog.'
+            },
+            {
+                id: 'arduino.toolbar.background',
+                defaults: {
+                    dark: 'button.background',
+                    light: 'button.background',
+                    hc: 'activityBar.inactiveForeground'
+                },
+                description: 'Background color of the toolbar items. Such as Upload, Verify, etc.'
+            },
+            {
+                id: 'arduino.toolbar.hoverBackground',
+                defaults: {
+                    dark: 'button.hoverBackground',
+                    light: 'button.hoverBackground',
+                    hc: 'activityBar.inactiveForeground'
+                },
+                description: 'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.'
+            },
+            {
+                id: 'arduino.output.foreground',
+                defaults: {
+                    dark: 'editor.foreground',
+                    light: 'editor.foreground',
+                    hc: 'editor.foreground'
+                },
+                description: 'Color of the text in the Output view.'
+            },
+            {
+                id: 'arduino.output.background',
+                defaults: {
+                    dark: 'editor.background',
+                    light: 'editor.background',
+                    hc: 'editor.background'
+                },
+                description: 'Background color of the Output view.'
             }
-        }
-        return undefined;
-    }
-
-    protected getCurrentWidget(): EditorWidget | undefined {
-        let widget = this.editorManager.currentEditor;
-        if (!widget) {
-            const visibleWidgets = this.editorManager.all.filter(w => w.isVisible);
-            if (visibleWidgets.length > 0) {
-                widget = visibleWidgets[0];
-            }
-        }
-        return widget;
-    }
-
-    /**
-     * Returns `undefined` if the `file` is valid. Otherwise, returns with the validation error message.
-     */
-    protected validate(file: FileStat): MaybePromise<string | undefined> {
-        const uri = new URI(file.uri);
-        const path = uri.path;
-        const { name, ext, dir } = path;
-        if (ext !== '.ino') {
-            return "Only sketches with '.ino' extension can be opened.";
-        }
-        if (name !== dir.name) {
-            return `The file "${name}${ext}" needs to be inside a sketch folder named "${name}".`;
-        }
-        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;
-        }
-        if (typeof arg === 'string') {
-            return new URI(arg);
-        }
-        if (arg instanceof EditorWidget) {
-            return arg.editor.uri;
-        }
-        return undefined;
+        );
     }
 
 }

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

@@ -1,161 +0,0 @@
-import '../../src/browser/style/index.css';
-import { ContainerModule, interfaces } from 'inversify';
-import { WidgetFactory } from '@theia/core/lib/browser/widget-manager';
-import { CommandContribution } from '@theia/core/lib/common/command';
-import { bindViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
-import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-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 { LibraryListWidget } from './library/library-list-widget';
-import { ArduinoFrontendContribution } 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 { 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';
-import { WorkspaceServiceExt, WorkspaceServiceExtPath } from './workspace-service-ext';
-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 { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
-import { AWorkspaceService } 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';
-import { SilentProblemContribution } from './customization/silent-problem-contribution';
-import { SilentNavigatorContribution } from './customization/silent-navigator-contribution';
-import { FileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
-import { ArduinoToolbarContribution } from './toolbar/arduino-toolbar-contribution';
-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 { MonacoStatusBarContribution } from '@theia/monaco/lib/browser/monaco-status-bar-contribution';
-import { SilentMonacoStatusBarContribution } from './customization/silent-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';
-const ElementQueries = require('css-element-queries/src/ElementQueries');
-
-export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
-    ElementQueries.listen();
-    ElementQueries.init();
-
-    // Commands and toolbar items
-    bind(ArduinoFrontendContribution).toSelf().inSingletonScope();
-    bind(CommandContribution).toService(ArduinoFrontendContribution);
-    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
-    bind(LanguageGrammarDefinitionContribution).to(ArduinoLanguageGrammarContribution).inSingletonScope();
-
-    // Library service
-    bind(LibraryService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, LibraryServicePath)).inSingletonScope();
-
-    // Library list widget
-    bind(LibraryListWidget).toSelf();
-    bindViewContribution(bind, LibraryListWidgetFrontendContribution);
-    bind(WidgetFactory).toDynamicValue(context => ({
-        id: LibraryListWidget.WIDGET_ID,
-        createWidget: () => context.container.get(LibraryListWidget)
-    }));
-    bind(FrontendApplicationContribution).toService(LibraryListWidgetFrontendContribution);
-
-    // 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();
-
-    // Boards service
-    bind(BoardsService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, BoardsServicePath)).inSingletonScope();
-
-    // Boards list widget
-    bind(BoardsListWidget).toSelf();
-    bindViewContribution(bind, BoardsListWidgetFrontendContribution);
-    bind(WidgetFactory).toDynamicValue(context => ({
-        id: BoardsListWidget.WIDGET_ID,
-        createWidget: () => context.container.get(BoardsListWidget)
-    }));
-    bind(FrontendApplicationContribution).toService(BoardsListWidgetFrontendContribution);
-
-    // Board select dialog
-    bind(SelectBoardDialogWidget).toSelf().inSingletonScope();
-    bind(SelectBoardDialog).toSelf().inSingletonScope();
-    bind(SelectBoardDialogProps).toConstantValue({
-        title: 'Select Board'
-    })
-
-    // Core service
-    bind(CoreService)
-        .toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, CoreServicePath))
-        .inSingletonScope();
-
-    // Tool output service client
-    bind(ToolOutputServiceClientImpl).toSelf().inSingletonScope();
-    bind(ToolOutputServiceClient).toDynamicValue(context => {
-        const client = context.container.get(ToolOutputServiceClientImpl);
-        WebSocketConnectionProvider.createProxy(context.container, ToolOutputService.SERVICE_PATH, client);
-        return client;
-    }).inSingletonScope();
-
-    // The workspace service extension
-    bind(WorkspaceServiceExt).to(WorkspaceServiceExtImpl).inSingletonScope().onActivation(({ container }, workspaceServiceExt) => {
-        WebSocketConnectionProvider.createProxy(container, WorkspaceServiceExtPath, workspaceServiceExt);
-        // Eagerly active the core, library, and boards services.
-        container.get(CoreService);
-        container.get(LibraryService);
-        container.get(BoardsService);
-        container.get(SketchesService);
-        return workspaceServiceExt;
-    });
-
-    bind(AWorkspaceService).toSelf().inSingletonScope();
-    rebind(WorkspaceService).to(AWorkspaceService).inSingletonScope();
-    bind(SketchFactory).toSelf().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();
-    unbind(FrontendApplication);
-    bind(FrontendApplication).to(CustomFrontendApplication).inSingletonScope();
-    unbind(EditorWidgetFactory);
-    bind(EditorWidgetFactory).to(CustomEditorWidgetFactory).inSingletonScope();
-});

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

@@ -0,0 +1,361 @@
+import '../../src/browser/style/index.css';
+import { ContainerModule } from 'inversify';
+import { WidgetFactory } from '@theia/core/lib/browser/widget-manager';
+import { CommandContribution } from '@theia/core/lib/common/command';
+import { bindViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
+import { TabBarToolbarContribution, TabBarToolbarFactory } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging/ws-connection-provider';
+import { FrontendApplicationContribution, FrontendApplication as TheiaFrontendApplication } 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 { ArduinoLanguageGrammarContribution } from './language/arduino-language-grammar-contribution';
+import { LibraryService, LibraryServicePath } from '../common/protocol/library-service';
+import { BoardsService, BoardsServicePath, BoardsServiceClient } from '../common/protocol/boards-service';
+import { SketchesService, SketchesServicePath } from '../common/protocol/sketches-service';
+import { SketchesServiceClientImpl } from '../common/protocol/sketches-service-client-impl';
+import { CoreService, CoreServicePath, CoreServiceClient } from '../common/protocol/core-service';
+import { BoardsListWidget } from './boards/boards-list-widget';
+import { BoardsListWidgetFrontendContribution } from './boards/boards-widget-frontend-contribution';
+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 { BoardsServiceClientImpl } from './boards/boards-service-client-impl';
+import { WorkspaceService as TheiaWorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
+import { WorkspaceService } from './theia/workspace/workspace-service';
+import { OutlineViewContribution as TheiaOutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
+import { OutlineViewContribution } from './theia/outline/outline-contribution';
+import { ProblemContribution as TheiaProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
+import { ProblemContribution } from './theia/markers/problem-contribution';
+import { FileNavigatorContribution } from './theia/navigator/navigator-contribution';
+import { FileNavigatorContribution as TheiaFileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
+import { ArduinoToolbarContribution } from './toolbar/arduino-toolbar-contribution';
+import { EditorContribution as TheiaEditorContribution } from '@theia/editor/lib/browser/editor-contribution';
+import { EditorContribution } from './theia/editor/editor-contribution';
+import { MonacoStatusBarContribution as TheiaMonacoStatusBarContribution } from '@theia/monaco/lib/browser/monaco-status-bar-contribution';
+import { MonacoStatusBarContribution } from './theia/monaco/monaco-status-bar-contribution';
+import {
+    ApplicationShell as TheiaApplicationShell,
+    ShellLayoutRestorer as TheiaShellLayoutRestorer,
+    CommonFrontendContribution as TheiaCommonFrontendContribution,
+    KeybindingRegistry as TheiaKeybindingRegistry
+} from '@theia/core/lib/browser';
+import { MenuContribution } from '@theia/core/lib/common/menu';
+import { ApplicationShell } from './theia/core/application-shell';
+import { FrontendApplication } from './theia/core/frontend-application';
+import { BoardsConfigDialog, BoardsConfigDialogProps } from './boards/boards-config-dialog';
+import { BoardsConfigDialogWidget } from './boards/boards-config-dialog-widget';
+import { ScmContribution as TheiaScmContribution } from '@theia/scm/lib/browser/scm-contribution';
+import { ScmContribution } from './theia/scm/scm-contribution';
+import { SearchInWorkspaceFrontendContribution as TheiaSearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
+import { SearchInWorkspaceFrontendContribution } from './theia/search-in-workspace/search-in-workspace-frontend-contribution';
+import { LibraryListWidgetFrontendContribution } from './library/library-widget-frontend-contribution';
+import { MonitorServiceClientImpl } from './monitor/monitor-service-client-impl';
+import { MonitorServicePath, MonitorService, MonitorServiceClient } from '../common/protocol/monitor-service';
+import { ConfigService, ConfigServicePath, ConfigServiceClient } 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 { TabBarDecoratorService as TheiaTabBarDecoratorService } from '@theia/core/lib/browser/shell/tab-bar-decorator';
+import { TabBarDecoratorService } from './theia/core/tab-bar-decorator';
+import { ProblemManager as TheiaProblemManager } from '@theia/markers/lib/browser';
+import { ProblemManager } from './theia/markers/problem-manager';
+import { BoardsAutoInstaller } from './boards/boards-auto-installer';
+import { AboutDialog as TheiaAboutDialog } from '@theia/core/lib/browser/about-dialog';
+import { AboutDialog } from './theia/core/about-dialog';
+import { ShellLayoutRestorer } from './theia/core/shell-layout-restorer';
+import { EditorMode } from './editor-mode';
+import { ListItemRenderer } from './widgets/component-list/list-item-renderer';
+import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
+import { MonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
+import { ArduinoDaemonClientImpl } from './arduino-daemon-client-impl';
+import { ArduinoDaemonClient, ArduinoDaemonPath, ArduinoDaemon } from '../common/protocol/arduino-daemon';
+import { EditorManager as TheiaEditorManager } from '@theia/editor/lib/browser';
+import { EditorManager } from './theia/editor/editor-manager';
+import { FrontendConnectionStatusService, ApplicationConnectionStatusContribution } from './theia/core/connection-status-service';
+import {
+    FrontendConnectionStatusService as TheiaFrontendConnectionStatusService,
+    ApplicationConnectionStatusContribution as TheiaApplicationConnectionStatusContribution
+} from '@theia/core/lib/browser/connection-status-service';
+import { ConfigServiceClientImpl } from './config-service-client-impl';
+import { CoreServiceClientImpl } from './core-service-client-impl';
+import { BoardsDataMenuUpdater } from './boards/boards-data-menu-updater';
+import { BoardsDataStore } from './boards/boards-data-store';
+import { ILogger } from '@theia/core';
+import { FileSystemExt, FileSystemExtPath } from '../common/protocol/filesystem-ext';
+import {
+    WorkspaceFrontendContribution as TheiaWorkspaceFrontendContribution,
+    FileMenuContribution as TheiaFileMenuContribution,
+    WorkspaceCommandContribution as TheiaWorkspaceCommandContribution
+} from '@theia/workspace/lib/browser';
+import { WorkspaceFrontendContribution, ArduinoFileMenuContribution } from './theia/workspace/workspace-frontend-contribution';
+import { Contribution } from './contributions/contribution';
+import { NewSketch } from './contributions/new-sketch';
+import { OpenSketch } from './contributions/open-sketch';
+import { CloseSketch } from './contributions/close-sketch';
+import { SaveAsSketch } from './contributions/save-as-sketch';
+import { SaveSketch } from './contributions/save-sketch';
+import { VerifySketch } from './contributions/verify-sketch';
+import { UploadSketch } from './contributions/upload-sketch';
+import { CommonFrontendContribution } from './theia/core/common-frontend-contribution';
+import { EditContributions } from './contributions/edit-contributions';
+import { OpenSketchExternal } from './contributions/open-sketch-external';
+import { PreferencesContribution as TheiaPreferencesContribution } from '@theia/preferences/lib/browser/preferences-contribution';
+import { PreferencesContribution } from './theia/preferences/preferences-contribution';
+import { QuitApp } from './contributions/quit-app';
+import { SketchControl } from './contributions/sketch-control';
+import { Settings } from './contributions/settings';
+import { KeybindingRegistry } from './theia/core/keybindings';
+import { WorkspaceCommandContribution } from './theia/workspace/workspace-commands';
+import { WorkspaceDeleteHandler as TheiaWorkspaceDeleteHandler } from '@theia/workspace/lib/browser/workspace-delete-handler';
+import { WorkspaceDeleteHandler } from './theia/workspace/workspace-delete-handler';
+import { TabBarToolbar } from './theia/core/tab-bar-toolbar';
+import { EditorWidgetFactory as TheiaEditorWidgetFactory } from '@theia/editor/lib/browser/editor-widget-factory';
+import { EditorWidgetFactory } from './theia/editor/editor-widget-factory';
+import { OutputWidget as TheiaOutputWidget } from '@theia/output/lib/browser/output-widget';
+import { OutputWidget } from './theia/output/output-widget';
+
+const ElementQueries = require('css-element-queries/src/ElementQueries');
+
+MonacoThemingService.register({
+    id: 'arduinoTheme',
+    label: 'Light (Arduino)',
+    uiTheme: 'vs',
+    json: require('../../src/browser/data/arduino.color-theme.json')
+});
+
+export default new ContainerModule((bind, unbind, isBound, rebind) => {
+    ElementQueries.listen();
+    ElementQueries.init();
+
+    // Commands and toolbar items
+    bind(ArduinoFrontendContribution).toSelf().inSingletonScope();
+    bind(CommandContribution).toService(ArduinoFrontendContribution);
+    bind(MenuContribution).toService(ArduinoFrontendContribution);
+    bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
+    bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
+    bind(ColorContribution).toService(ArduinoFrontendContribution);
+
+    bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
+
+    // `ino` TextMate grammar and language client
+    bind(LanguageGrammarDefinitionContribution).to(ArduinoLanguageGrammarContribution).inSingletonScope();
+    bind(LanguageClientContribution).to(ArduinoLanguageClientContribution).inSingletonScope();
+
+    // Renderer for both the library and the core widgets.
+    bind(ListItemRenderer).toSelf().inSingletonScope();
+
+    // Library service
+    bind(LibraryService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, LibraryServicePath)).inSingletonScope();
+    // Library list widget
+    bind(LibraryListWidget).toSelf();
+    bindViewContribution(bind, LibraryListWidgetFrontendContribution);
+    bind(WidgetFactory).toDynamicValue(context => ({
+        id: LibraryListWidget.WIDGET_ID,
+        createWidget: () => context.container.get(LibraryListWidget)
+    }));
+    bind(FrontendApplicationContribution).toService(LibraryListWidgetFrontendContribution);
+
+    // Sketch list service
+    bind(SketchesService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, SketchesServicePath)).inSingletonScope();
+    bind(SketchesServiceClientImpl).toSelf().inSingletonScope();
+
+    // Config service
+    bind(ConfigService).toDynamicValue(context => {
+        const connection = context.container.get(WebSocketConnectionProvider);
+        const client = context.container.get(ConfigServiceClientImpl);
+        return connection.createProxy(ConfigServicePath, client);
+    }).inSingletonScope();
+    bind(ConfigServiceClientImpl).toSelf().inSingletonScope();
+    bind(ConfigServiceClient).toDynamicValue(context => {
+        const client = context.container.get(ConfigServiceClientImpl);
+        WebSocketConnectionProvider.createProxy(context.container, ConfigServicePath, client);
+        return client;
+    }).inSingletonScope();
+
+    // Boards service
+    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(FrontendApplicationContribution).toService(BoardsServiceClientImpl);
+    bind(BoardsServiceClient).toDynamicValue(async context => {
+        const client = context.container.get(BoardsServiceClientImpl);
+        const service = context.container.get<BoardsService>(BoardsService);
+        await client.init(service);
+        WebSocketConnectionProvider.createProxy(context.container, BoardsServicePath, client);
+        return client;
+    }).inSingletonScope();
+
+    // To be able to track, and update the menu based on the core settings (aka. board details) of the currently selected board.
+    bind(FrontendApplicationContribution).to(BoardsDataMenuUpdater).inSingletonScope();
+    bind(BoardsDataStore).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(BoardsDataStore);
+    // Logger for the Arduino daemon
+    bind(ILogger).toDynamicValue(ctx => {
+        const parentLogger = ctx.container.get<ILogger>(ILogger);
+        return parentLogger.child('store');
+    }).inSingletonScope().whenTargetNamed('store');
+
+    // Boards auto-installer
+    bind(BoardsAutoInstaller).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(BoardsAutoInstaller);
+
+    // Boards list widget
+    bind(BoardsListWidget).toSelf();
+    bindViewContribution(bind, BoardsListWidgetFrontendContribution);
+    bind(WidgetFactory).toDynamicValue(context => ({
+        id: BoardsListWidget.WIDGET_ID,
+        createWidget: () => context.container.get(BoardsListWidget)
+    }));
+    bind(FrontendApplicationContribution).toService(BoardsListWidgetFrontendContribution);
+
+    // Board select dialog
+    bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
+    bind(BoardsConfigDialog).toSelf().inSingletonScope();
+    bind(BoardsConfigDialogProps).toConstantValue({
+        title: 'Select Board'
+    })
+
+    // Core service
+    bind(CoreService).toDynamicValue(context => {
+        const connection = context.container.get(WebSocketConnectionProvider);
+        const client = context.container.get(CoreServiceClientImpl);
+        return connection.createProxy(CoreServicePath, client);
+    }).inSingletonScope();
+    // Core service client to receive and delegate notifications when the index or the library index has been updated.
+    bind(CoreServiceClientImpl).toSelf().inSingletonScope();
+    bind(CoreServiceClient).toDynamicValue(context => {
+        const client = context.container.get(CoreServiceClientImpl);
+        WebSocketConnectionProvider.createProxy(context.container, CoreServicePath, client);
+        return client;
+    }).inSingletonScope();
+
+    // Tool output service client
+    bind(ToolOutputServiceClientImpl).toSelf().inSingletonScope();
+    bind(ToolOutputServiceClient).toDynamicValue(context => {
+        const client = context.container.get(ToolOutputServiceClientImpl);
+        WebSocketConnectionProvider.createProxy(context.container, ToolOutputService.SERVICE_PATH, client);
+        return client;
+    }).inSingletonScope();
+
+    // Serial monitor
+    bind(MonitorModel).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(MonitorModel);
+    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 serial 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();
+    // Serial 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(WorkspaceService).toSelf().inSingletonScope();
+    rebind(TheiaWorkspaceService).toService(WorkspaceService);
+
+    // Customizing default Theia layout based on the editor mode: `pro-mode` or `classic`.
+    bind(EditorMode).toSelf().inSingletonScope();
+    bind(FrontendApplicationContribution).toService(EditorMode);
+
+    // Layout and shell customizations.
+    rebind(TheiaOutlineViewContribution).to(OutlineViewContribution).inSingletonScope();
+    rebind(TheiaProblemContribution).to(ProblemContribution).inSingletonScope();
+    rebind(TheiaFileNavigatorContribution).to(FileNavigatorContribution).inSingletonScope();
+    rebind(TheiaEditorContribution).to(EditorContribution).inSingletonScope();
+    rebind(TheiaMonacoStatusBarContribution).to(MonacoStatusBarContribution).inSingletonScope();
+    rebind(TheiaApplicationShell).to(ApplicationShell).inSingletonScope();
+    rebind(TheiaScmContribution).to(ScmContribution).inSingletonScope();
+    rebind(TheiaSearchInWorkspaceFrontendContribution).to(SearchInWorkspaceFrontendContribution).inSingletonScope();
+    rebind(TheiaFrontendApplication).to(FrontendApplication).inSingletonScope();
+    rebind(TheiaWorkspaceFrontendContribution).to(WorkspaceFrontendContribution).inSingletonScope();
+    rebind(TheiaFileMenuContribution).to(ArduinoFileMenuContribution).inSingletonScope();
+    rebind(TheiaCommonFrontendContribution).to(CommonFrontendContribution).inSingletonScope();
+    rebind(TheiaPreferencesContribution).to(PreferencesContribution).inSingletonScope();
+    rebind(TheiaKeybindingRegistry).to(KeybindingRegistry).inSingletonScope();
+    rebind(TheiaWorkspaceCommandContribution).to(WorkspaceCommandContribution).inSingletonScope();
+    rebind(TheiaWorkspaceDeleteHandler).to(WorkspaceDeleteHandler).inSingletonScope();
+    rebind(TheiaEditorWidgetFactory).to(EditorWidgetFactory).inSingletonScope();
+    rebind(TabBarToolbarFactory).toFactory(({ container: parentContainer }) => () => {
+        const container = parentContainer.createChild();
+        container.bind(TabBarToolbar).toSelf().inSingletonScope();
+        return container.get(TabBarToolbar);
+    });
+    bind(OutputWidget).toSelf().inSingletonScope();
+    rebind(TheiaOutputWidget).toService(OutputWidget);
+
+    // Show a disconnected status bar, when the daemon is not available
+    bind(ApplicationConnectionStatusContribution).toSelf().inSingletonScope();
+    rebind(TheiaApplicationConnectionStatusContribution).toService(ApplicationConnectionStatusContribution);
+    bind(FrontendConnectionStatusService).toSelf().inSingletonScope();
+    rebind(TheiaFrontendConnectionStatusService).toService(FrontendConnectionStatusService);
+
+    // Editor customizations. Sets the editor to `readOnly` if under the data dir.
+    bind(EditorManager).toSelf().inSingletonScope();
+    rebind(TheiaEditorManager).toService(EditorManager);
+
+    // Decorator customizations
+    bind(TabBarDecoratorService).toSelf().inSingletonScope();
+    rebind(TheiaTabBarDecoratorService).toService(TabBarDecoratorService);
+
+    // Problem markers
+    bind(ProblemManager).toSelf().inSingletonScope();
+    rebind(TheiaProblemManager).toService(ProblemManager);
+
+    // About dialog to show the CLI version
+    bind(AboutDialog).toSelf().inSingletonScope();
+    rebind(TheiaAboutDialog).toService(AboutDialog);
+
+    // Customized layout restorer that can restore the state in async way: https://github.com/eclipse-theia/theia/issues/6579
+    bind(ShellLayoutRestorer).toSelf().inSingletonScope();
+    rebind(TheiaShellLayoutRestorer).toService(ShellLayoutRestorer);
+
+    // Arduino daemon client. Receives notifications from the backend if the CLI daemon process has been restarted.
+    bind(ArduinoDaemon).toDynamicValue(context => {
+        const connection = context.container.get(WebSocketConnectionProvider);
+        const client = context.container.get(ArduinoDaemonClientImpl);
+        return connection.createProxy(ArduinoDaemonPath, client);
+    }).inSingletonScope();
+    bind(ArduinoDaemonClientImpl).toSelf().inSingletonScope();
+    bind(ArduinoDaemonClient).toDynamicValue(context => {
+        const client = context.container.get(ArduinoDaemonClientImpl);
+        WebSocketConnectionProvider.createProxy(context.container, ArduinoDaemonPath, client);
+        return client;
+    }).inSingletonScope();
+
+    // File-system extension
+    bind(FileSystemExt).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, FileSystemExtPath)).inSingletonScope();
+
+    Contribution.configure(bind, NewSketch);
+    Contribution.configure(bind, OpenSketch);
+    Contribution.configure(bind, CloseSketch);
+    Contribution.configure(bind, SaveSketch);
+    Contribution.configure(bind, SaveAsSketch);
+    Contribution.configure(bind, VerifySketch);
+    Contribution.configure(bind, UploadSketch);
+    Contribution.configure(bind, OpenSketchExternal);
+    Contribution.configure(bind, EditContributions);
+    Contribution.configure(bind, QuitApp);
+    Contribution.configure(bind, SketchControl);
+    Contribution.configure(bind, Settings);
+});

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

@@ -1,27 +0,0 @@
-
-import { Theme } from '@theia/core/lib/browser/theming';
-import { MonacoThemeRegistry } from '@theia/monaco/lib/browser/textmate/monaco-theme-registry';
-
-const ARDUINO_CSS = require('../../src/browser/style/arduino.useable.css');
-const ARDUINO_JSON = MonacoThemeRegistry.SINGLETON.register(
-    require('../../src/browser/data/arduino.color-theme.json'), {}, 'arduino', 'vs').name!;
-
-export class ArduinoTheme {
-
-    static readonly arduino: Theme = {
-        id: 'arduino-theme',
-        label: 'Arduino Light Theme',
-        description: 'Arduino Light Theme',
-        editorTheme: ARDUINO_JSON,
-        activate() {
-            ARDUINO_CSS.use();
-        },
-        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 existing 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(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 +0,0 @@
-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";
-
-/**
- * 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 {
-
-    @inject(WorkspaceServer)
-    protected readonly workspaceServer: WorkspaceServer;
-
-    @inject(FileSystem)
-    protected readonly fileSystem: FileSystem;
-
-    @inject(SketchFactory)
-    protected readonly sketchFactory: SketchFactory;
-
-    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();
-        }
-
-        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;
-    }
-
-    protected async setWorkspace(workspaceStat: FileStat | undefined): Promise<void> {
-        await super.setWorkspace(workspaceStat);
-    }
-
-}

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,62 @@
+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 '../widgets/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(packages => {
+                const candidates = packages
+                    .filter(pkg => pkg.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?`, 'Install Manually', 'Yes').then(async answer => {
+                        if (answer === 'Yes') {
+                            const dialog = new InstallationProgressDialog(candidate.name, candidate.availableVersions[0]);
+                            dialog.open();
+                            try {
+                                await this.boardsService.install({ item: 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,64 @@
+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';
+import { CoreServiceClientImpl } from '../core-service-client-impl';
+import { ArduinoDaemonClientImpl } from '../arduino-daemon-client-impl';
+
+@injectable()
+export class BoardsConfigDialogWidget extends ReactWidget {
+
+    @inject(BoardsService)
+    protected readonly boardsService: BoardsService;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    @inject(CoreServiceClientImpl)
+    protected readonly coreServiceClient: CoreServiceClientImpl;
+
+    @inject(ArduinoDaemonClientImpl)
+    protected readonly daemonClient: ArduinoDaemonClientImpl;
+
+    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}
+                coreServiceClient={this.coreServiceClient}
+                daemonClient={this.daemonClient}
+                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,279 @@
+import * as React from 'react';
+import { DisposableCollection } from '@theia/core';
+import { BoardsService, Board, Port, AttachedBoardsChangeEvent } from '../../common/protocol/boards-service';
+import { BoardsServiceClientImpl } from './boards-service-client-impl';
+import { CoreServiceClientImpl } from '../core-service-client-impl';
+import { ArduinoDaemonClientImpl } from '../arduino-daemon-client-impl';
+
+export namespace BoardsConfig {
+
+    export interface Config {
+        selectedBoard?: Board;
+        selectedPort?: Port;
+    }
+
+    export interface Props {
+        readonly boardsService: BoardsService;
+        readonly boardsServiceClient: BoardsServiceClientImpl;
+        readonly coreServiceClient: CoreServiceClientImpl;
+        readonly daemonClient: ArduinoDaemonClientImpl;
+        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;
+        query: string;
+    }
+
+}
+
+export abstract class Item<T> extends React.Component<{
+    item: T,
+    label: string,
+    selected: boolean,
+    onClick: (item: T) => void,
+    missing?: boolean,
+    details?: string
+}> {
+
+    render(): React.ReactNode {
+        const { selected, label, missing, details } = 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}${!details ? '' : details}`}>
+            <div className='label'>
+                {label}
+            </div>
+            {!details ? '' : <div className='details'>{details}</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,
+            query: '',
+            ...boardsConfig
+        }
+    }
+
+    componentDidMount() {
+        this.updateBoards();
+        this.props.boardsService.getAvailablePorts().then(ports => this.updatePorts(ports));
+        const { boardsServiceClient, coreServiceClient, daemonClient } = this.props;
+        this.toDispose.pushAll([
+            boardsServiceClient.onAttachedBoardsChanged(event => this.updatePorts(event.newState.ports, AttachedBoardsChangeEvent.diff(event).detached.ports)),
+            boardsServiceClient.onBoardsConfigChanged(({ selectedBoard, selectedPort }) => {
+                this.setState({ selectedBoard, selectedPort }, () => this.fireConfigChanged());
+            }),
+            boardsServiceClient.onBoardsPackageInstalled(() => this.updateBoards(this.state.query)),
+            boardsServiceClient.onBoardsPackageUninstalled(() => this.updateBoards(this.state.query)),
+            coreServiceClient.onIndexUpdated(() => this.updateBoards(this.state.query)),
+            daemonClient.onDaemonStarted(() => this.updateBoards(this.state.query)),
+            daemonClient.onDaemonStopped(() => this.setState({ searchResults: [] }))
+        ]);
+    }
+
+    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.setState({ query });
+        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<Array<Board & { packageName: string }>> => {
+        return this.props.boardsServiceClient.searchBoards(options);
+    }
+
+    protected get availablePorts(): Promise<Port[]> {
+        return this.props.boardsService.getAvailablePorts();
+    }
+
+    protected queryPorts = async (availablePorts: Promise<Port[]> = this.availablePorts) => {
+        const ports = await availablePorts;
+        return { knownPorts: ports.sort(Port.compare) };
+    }
+
+    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 per core https://github.com/arduino/arduino-pro-ide/issues/262#issuecomment-661019560
+        // It is tricky when the core is not yet installed, no FQBNs are available.
+        const distinctBoards = new Map<string, Board.Detailed>();
+        const toKey = ({ name, packageName, fqbn }: Board.Detailed) => !!fqbn ? `${name}-${packageName}-${fqbn}` : `${name}-${packageName}`;
+        for (const board of Board.decorateBoards(selectedBoard, searchResults)) {
+            const key = toKey(board);
+            if (!distinctBoards.has(key)) {
+                distinctBoards.set(key, board);
+            }
+        }
+
+        return <React.Fragment>
+            <div className='search'>
+                <input type='search' className='theia-input' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
+                <i className='fa fa-search'></i>
+            </div>
+            <div className='boards list'>
+                {Array.from(distinctBoards.values()).map(board => <Item<Board & { packageName: string }>
+                    key={`${board.name}-${board.packageName}`}
+                    item={board}
+                    label={board.name}
+                    details={board.details}
+                    selected={board.selected}
+                    onClick={this.selectBoard}
+                    missing={board.missing}
+                />)}
+            </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 | Board): boolean {
+            const { selectedBoard, selectedPort } = config;
+            if (Board.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-data-menu-updater.ts

@@ -0,0 +1,117 @@
+import * as PQueue from 'p-queue';
+import { inject, injectable } from 'inversify';
+import { CommandRegistry } from '@theia/core/lib/common/command';
+import { MenuModelRegistry, MenuNode } from '@theia/core/lib/common/menu';
+import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
+import { BoardsServiceClientImpl } from './boards-service-client-impl';
+import { Board, ConfigOption, Programmer } from '../../common/protocol';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser';
+import { BoardsDataStore } from './boards-data-store';
+import { MainMenuManager } from '../../common/main-menu-manager';
+import { ArduinoMenus } from '../menu/arduino-menus';
+
+@injectable()
+export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
+
+    @inject(CommandRegistry)
+    protected readonly commandRegistry: CommandRegistry;
+
+    @inject(MenuModelRegistry)
+    protected readonly menuRegistry: MenuModelRegistry;
+
+    @inject(MainMenuManager)
+    protected readonly mainMenuManager: MainMenuManager;
+
+    @inject(BoardsDataStore)
+    protected readonly boardsDataStore: BoardsDataStore;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    protected readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
+    protected readonly toDisposeOnBoardChange = new DisposableCollection();
+
+    async onStart(): Promise<void> {
+        this.updateMenuActions(this.boardsServiceClient.boardsConfig.selectedBoard);
+        this.boardsDataStore.onChanged(() => this.updateMenuActions(this.boardsServiceClient.boardsConfig.selectedBoard));
+        this.boardsServiceClient.onBoardsConfigChanged(({ selectedBoard }) => this.updateMenuActions(selectedBoard));
+    }
+
+    protected async updateMenuActions(selectedBoard: Board | undefined): Promise<void> {
+        return this.queue.add(async () => {
+            this.toDisposeOnBoardChange.dispose();
+            this.mainMenuManager.update();
+            if (selectedBoard) {
+                const { fqbn } = selectedBoard;
+                if (fqbn) {
+                    const { configOptions, programmers, selectedProgrammer } = await this.boardsDataStore.getData(fqbn);
+                    if (configOptions.length) {
+                        const boardsConfigMenuPath = [...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP, 'z01_boardsConfig']; // `z_` is for ordering.
+                        for (const { label, option, values } of configOptions.sort(ConfigOption.LABEL_COMPARATOR)) {
+                            const menuPath = [...boardsConfigMenuPath, `${option}`];
+                            const commands = new Map<string, Disposable & { label: string }>()
+                            for (const value of values) {
+                                const id = `${fqbn}-${option}--${value.value}`;
+                                const command = { id };
+                                const selectedValue = value.value;
+                                const handler = {
+                                    execute: () => this.boardsDataStore.selectConfigOption({ fqbn, option, selectedValue }),
+                                    isToggled: () => value.selected
+                                };
+                                commands.set(id, Object.assign(this.commandRegistry.registerCommand(command, handler), { label: value.label }));
+                            }
+                            this.menuRegistry.registerSubmenu(menuPath, label);
+                            this.toDisposeOnBoardChange.pushAll([
+                                ...commands.values(),
+                                Disposable.create(() => this.unregisterSubmenu(menuPath)), // We cannot dispose submenu entries: https://github.com/eclipse-theia/theia/issues/7299
+                                ...Array.from(commands.keys()).map((commandId, i) => {
+                                    const { label } = commands.get(commandId)!;
+                                    this.menuRegistry.registerMenuAction(menuPath, { commandId, order: `${i}`, label });
+                                    return Disposable.create(() => this.menuRegistry.unregisterMenuAction(commandId));
+                                })
+                            ]);
+                        }
+                    }
+                    if (programmers.length) {
+                        const programmersMenuPath = [...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP, 'z02_programmers'];
+                        const label = selectedProgrammer ? `Programmer: "${selectedProgrammer.name}"` : 'Programmer'
+                        this.menuRegistry.registerSubmenu(programmersMenuPath, label);
+                        this.toDisposeOnBoardChange.push(Disposable.create(() => this.unregisterSubmenu(programmersMenuPath)));
+                        for (const programmer of programmers) {
+                            const { id, name } = programmer;
+                            const command = { id: `${fqbn}-programmer--${id}` };
+                            const handler = {
+                                execute: () => this.boardsDataStore.selectProgrammer({ fqbn, selectedProgrammer: programmer }),
+                                isToggled: () => Programmer.equals(programmer, selectedProgrammer)
+                            };
+                            this.menuRegistry.registerMenuAction(programmersMenuPath, { commandId: command.id, label: name });
+                            this.commandRegistry.registerCommand(command, handler);
+                            this.toDisposeOnBoardChange.pushAll([
+                                Disposable.create(() => this.commandRegistry.unregisterCommand(command)),
+                                Disposable.create(() => this.menuRegistry.unregisterMenuAction(command.id))
+                            ]);
+                        }
+                    }
+                    this.mainMenuManager.update();
+                }
+            }
+        });
+    }
+
+    protected unregisterSubmenu(menuPath: string[]): void {
+        if (menuPath.length < 2) {
+            throw new Error(`Expected at least two item as a menu-path. Got ${JSON.stringify(menuPath)} instead.`);
+        }
+        const toRemove = menuPath[menuPath.length - 1];
+        const parentMenuPath = menuPath.slice(0, menuPath.length - 1);
+        // This is unsafe. Calling `getMenu` with a non-existing menu-path will result in a new menu creation.
+        // https://github.com/eclipse-theia/theia/issues/7300
+        const parent = this.menuRegistry.getMenu(parentMenuPath);
+        const index = parent.children.findIndex(({ id }) => id === toRemove);
+        if (index === -1) {
+            throw new Error(`Could not find menu with menu-path: ${JSON.stringify(menuPath)}.`);
+        }
+        (parent.children as Array<MenuNode>).splice(index, 1);
+    }
+
+}

arduino-ide-extension/src/browser/boards/boards-data-store.ts

@@ -0,0 +1,200 @@
+import { injectable, inject, named } from 'inversify';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { deepClone } from '@theia/core/lib/common/objects';
+import { MaybePromise } from '@theia/core/lib/common/types';
+import { Event, Emitter } from '@theia/core/lib/common/event';
+import { FrontendApplicationContribution, LocalStorageService } from '@theia/core/lib/browser';
+import { notEmpty } from '../../common/utils';
+import { BoardsServiceClientImpl } from './boards-service-client-impl';
+import { BoardsService, ConfigOption, Installable, BoardDetails, Programmer } from '../../common/protocol';
+
+@injectable()
+export class BoardsDataStore implements FrontendApplicationContribution {
+
+    @inject(ILogger)
+    @named('store')
+    protected readonly logger: ILogger;
+
+    @inject(BoardsService)
+    protected readonly boardsService: BoardsService;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    @inject(LocalStorageService)
+    protected readonly storageService: LocalStorageService;
+
+    protected readonly onChangedEmitter = new Emitter<void>();
+
+    onStart(): void {
+        this.boardsServiceClient.onBoardsPackageInstalled(async ({ pkg }) => {
+            const { installedVersion: version } = pkg;
+            if (!version) {
+                return;
+            }
+            let shouldFireChanged = false;
+            for (const fqbn of pkg.boards.map(({ fqbn }) => fqbn).filter(notEmpty).filter(fqbn => !!fqbn)) {
+                const key = this.getStorageKey(fqbn, version);
+                let data = await this.storageService.getData<ConfigOption[] | undefined>(key);
+                if (!data || !data.length) {
+                    const details = await this.getBoardDetailsSafe(fqbn);
+                    if (details) {
+                        data = details.configOptions;
+                        if (data.length) {
+                            await this.storageService.setData(key, data);
+                            shouldFireChanged = true;
+                        }
+                    }
+                }
+            }
+            if (shouldFireChanged) {
+                this.fireChanged();
+            }
+        });
+    }
+
+    get onChanged(): Event<void> {
+        return this.onChangedEmitter.event;
+    }
+
+    async appendConfigToFqbn(
+        fqbn: string,
+        boardsPackageVersion: MaybePromise<Installable.Version | undefined> = this.getBoardsPackageVersion(fqbn)): Promise<string> {
+
+        const { configOptions } = await this.getData(fqbn, boardsPackageVersion);
+        return ConfigOption.decorate(fqbn, configOptions);
+    }
+
+    async getData(
+        fqbn: string,
+        boardsPackageVersion: MaybePromise<Installable.Version | undefined> = this.getBoardsPackageVersion(fqbn)): Promise<BoardsDataStore.Data> {
+
+        const version = await boardsPackageVersion;
+        if (!version) {
+            return BoardsDataStore.Data.EMPTY;
+        }
+        const key = this.getStorageKey(fqbn, version);
+        let data = await this.storageService.getData<BoardsDataStore.Data | undefined>(key, undefined);
+        if (data) {
+            if (data.programmers !== undefined) { // to be backward compatible. We did not save the `programmers` into the `localStorage`.
+                return data;
+            }
+        }
+
+        const boardDetails = await this.getBoardDetailsSafe(fqbn);
+        if (!boardDetails) {
+            return BoardsDataStore.Data.EMPTY;
+        }
+
+        data = { configOptions: boardDetails.configOptions, programmers: boardDetails.programmers };
+        await this.storageService.setData(key, data);
+        return data;
+    }
+
+    async selectProgrammer(
+        { fqbn, selectedProgrammer }: { fqbn: string, selectedProgrammer: Programmer },
+        boardsPackageVersion: MaybePromise<Installable.Version | undefined> = this.getBoardsPackageVersion(fqbn)): Promise<boolean> {
+
+        const data = deepClone(await this.getData(fqbn, boardsPackageVersion));
+        const { programmers } = data;
+        if (!programmers.find(p => Programmer.equals(selectedProgrammer, p))) {
+            return false;
+        }
+
+        const version = await boardsPackageVersion;
+        if (!version) {
+            return false;
+        }
+
+        await this.setData({ fqbn, data: { ...data, selectedProgrammer }, version });
+        this.fireChanged();
+        return true;
+    }
+
+    async selectConfigOption(
+        { fqbn, option, selectedValue }: { fqbn: string, option: string, selectedValue: string },
+        boardsPackageVersion: MaybePromise<Installable.Version | undefined> = this.getBoardsPackageVersion(fqbn)): Promise<boolean> {
+
+        const data = deepClone(await this.getData(fqbn, boardsPackageVersion));
+        const { configOptions } = data;
+        const configOption = configOptions.find(c => c.option === option);
+        if (!configOption) {
+            return false;
+        }
+        let updated = false;
+        for (const value of configOption.values) {
+            if (value.value === selectedValue) {
+                (value as any).selected = true;
+                updated = true;
+            } else {
+                (value as any).selected = false;
+            }
+        }
+        if (!updated) {
+            return false;
+        }
+        const version = await boardsPackageVersion;
+        if (!version) {
+            return false;
+        }
+
+        await this.setData({ fqbn, data, version });
+        this.fireChanged();
+        return true;
+    }
+
+    protected async setData(
+        { fqbn, data, version }: { fqbn: string, data: BoardsDataStore.Data, version: Installable.Version }): Promise<void> {
+
+        const key = this.getStorageKey(fqbn, version);
+        return this.storageService.setData(key, data);
+    }
+
+    protected getStorageKey(fqbn: string, version: Installable.Version): string {
+        return `.arduinoProIDE-configOptions-${version}-${fqbn}`;
+    }
+
+    protected async getBoardDetailsSafe(fqbn: string): Promise<BoardDetails | undefined> {
+        try {
+            const details = this.boardsService.getBoardDetails({ fqbn });
+            return details;
+        } catch (err) {
+            if (err instanceof Error && err.message.includes('loading board data') && err.message.includes('is not installed')) {
+                this.logger.warn(`The boards package is not installed for board with FQBN: ${fqbn}`);
+            } else {
+                this.logger.error(`An unexpected error occurred while retrieving the board details for ${fqbn}.`, err);
+            }
+            return undefined;
+        }
+    }
+
+    protected fireChanged(): void {
+        this.onChangedEmitter.fire();
+    }
+
+    protected async getBoardsPackageVersion(fqbn: string): Promise<Installable.Version | undefined> {
+        if (!fqbn) {
+            return undefined;
+        }
+        const boardsPackage = await this.boardsService.getContainerBoardPackage({ fqbn });
+        if (!boardsPackage) {
+            return undefined;
+        }
+        return boardsPackage.installedVersion;
+    }
+
+}
+
+export namespace BoardsDataStore {
+    export interface Data {
+        readonly configOptions: ConfigOption[];
+        readonly programmers: Programmer[];
+        readonly selectedProgrammer?: Programmer;
+    }
+    export namespace Data {
+        export const EMPTY: Data = {
+            configOptions: [],
+            programmers: []
+        };
+    }
+}

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

@@ -0,0 +1,27 @@
+import { inject, injectable } from 'inversify';
+import { BoardsPackage, BoardsService } from '../../common/protocol/boards-service';
+import { ListWidget } from '../widgets/component-list/list-widget';
+import { ListItemRenderer } from '../widgets/component-list/list-item-renderer';
+
+@injectable()
+export class BoardsListWidget extends ListWidget<BoardsPackage> {
+
+    static WIDGET_ID = 'boards-list-widget';
+    static WIDGET_LABEL = 'Boards Manager';
+
+    constructor(
+        @inject(BoardsService) protected service: BoardsService,
+        @inject(ListItemRenderer) protected itemRenderer: ListItemRenderer<BoardsPackage>) {
+
+        super({
+            id: BoardsListWidget.WIDGET_ID,
+            label: BoardsListWidget.WIDGET_LABEL,
+            iconClass: 'fa fa-microchip',
+            searchable: service,
+            installable: service,
+            itemLabel: (item: BoardsPackage) => 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,430 @@
+import { injectable, inject, optional } from 'inversify';
+import { Emitter } from '@theia/core/lib/common/event';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { StorageService } from '@theia/core/lib/browser/storage-service';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import { RecursiveRequired } from '../../common/types';
+import { BoardsServiceClient, AttachedBoardsChangeEvent, BoardInstalledEvent, Board, Port, BoardUninstalledEvent, BoardsService } from '../../common/protocol';
+import { BoardsConfig } from './boards-config';
+import { naturalCompare } from '../../common/utils';
+import { compareAnything } from '../theia/monaco/comparers';
+
+interface BoardMatch {
+    readonly board: Board & Readonly<{ packageName: string }>;
+    readonly matches: monaco.filters.IMatch[] | undefined;
+}
+
+@injectable()
+export class BoardsServiceClientImpl implements BoardsServiceClient, FrontendApplicationContribution {
+
+    @inject(ILogger)
+    protected logger: ILogger;
+
+    @optional()
+    @inject(MessageService)
+    protected messageService: MessageService;
+
+    @inject(StorageService)
+    protected storageService: StorageService;
+
+    protected readonly onBoardsPackageInstalledEmitter = new Emitter<BoardInstalledEvent>();
+    protected readonly onBoardsPackageUninstalledEmitter = new Emitter<BoardUninstalledEvent>();
+    protected readonly onAttachedBoardsChangedEmitter = new Emitter<AttachedBoardsChangeEvent>();
+    protected readonly onBoardsConfigChangedEmitter = new Emitter<BoardsConfig.Config>();
+    protected readonly onAvailableBoardsChangedEmitter = new Emitter<AvailableBoard[]>();
+
+    /**
+     * 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 = {};
+    protected _attachedBoards: Board[] = []; // This does not contain the `Unknown` boards. They're visible from the available ports only.
+    protected _availablePorts: Port[] = [];
+    protected _availableBoards: AvailableBoard[] = [];
+    protected boardsService: BoardsService;
+
+    /**
+     * Event when the state of the attached/detached boards has changed. For instance, the user have detached a physical board.
+     */
+    readonly onAttachedBoardsChanged = this.onAttachedBoardsChangedEmitter.event;
+    readonly onBoardsPackageInstalled = this.onBoardsPackageInstalledEmitter.event;
+    readonly onBoardsPackageUninstalled = this.onBoardsPackageUninstalledEmitter.event;
+    /**
+     * Unlike `onAttachedBoardsChanged` this even fires when the user modifies the selected board in the IDE.\
+     * This even also fires, when the boards package was not available for the currently selected board,
+     * and the user installs the board package. Note: installing a board package will set the `fqbn` of the
+     * currently selected board.\
+     * This even also emitted when the board package for the currently selected board was uninstalled.
+     */
+    readonly onBoardsConfigChanged = this.onBoardsConfigChangedEmitter.event;
+    readonly onAvailableBoardsChanged = this.onAvailableBoardsChangedEmitter.event;
+
+    async onStart(): Promise<void> {
+        return this.loadState();
+    }
+
+    /**
+     * When the FE connects to the BE, the BE stets the known boards and ports.\
+     * This is a DI workaround for not being able to inject the service into the client.
+     */
+    async init(boardsService: BoardsService): Promise<void> {
+        this.boardsService = boardsService;
+        const [attachedBoards, availablePorts] = await Promise.all([
+            this.boardsService.getAttachedBoards(),
+            this.boardsService.getAvailablePorts()
+        ]);
+        this._attachedBoards = attachedBoards;
+        this._availablePorts = availablePorts;
+        this.reconcileAvailableBoards().then(() => this.tryReconnect());
+    }
+
+    notifyAttachedBoardsChanged(event: AttachedBoardsChangeEvent): void {
+        this.logger.info('Attached boards and available ports changed: ', JSON.stringify(event));
+        this._attachedBoards = event.newState.boards;
+        this.onAttachedBoardsChangedEmitter.fire(event);
+        this._availablePorts = event.newState.ports;
+        this.reconcileAvailableBoards().then(() => this.tryReconnect());
+    }
+
+    protected async tryReconnect(): Promise<boolean> {
+        if (this.latestValidBoardsConfig && !this.canUploadTo(this.boardsConfig)) {
+            for (const board of this.availableBoards.filter(({ state }) => state !== AvailableBoard.State.incomplete)) {
+                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 this.availableBoards.filter(({ state }) => state !== AvailableBoard.State.incomplete)) {
+                if (this.latestValidBoardsConfig.selectedBoard.fqbn === board.fqbn
+                    && this.latestValidBoardsConfig.selectedBoard.name === board.name) {
+
+                    this.boardsConfig = {
+                        ...this.latestValidBoardsConfig,
+                        selectedPort: board.port
+                    };
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    notifyBoardInstalled(event: BoardInstalledEvent): void {
+        this.logger.info('Board installed: ', JSON.stringify(event));
+        this.onBoardsPackageInstalledEmitter.fire(event);
+        const { selectedBoard } = this.boardsConfig;
+        const { installedVersion, id } = event.pkg;
+        if (selectedBoard) {
+            const installedBoard = event.pkg.boards.find(({ name }) => name === selectedBoard.name);
+            if (installedBoard && (!selectedBoard.fqbn || selectedBoard.fqbn === installedBoard.fqbn)) {
+                this.logger.info(`Board package ${id}[${installedVersion}] was installed. Updating the FQBN of the currently selected ${selectedBoard.name} board. [FQBN: ${installedBoard.fqbn}]`);
+                this.boardsConfig = {
+                    ...this.boardsConfig,
+                    selectedBoard: installedBoard
+                };
+            }
+        }
+    }
+
+    notifyBoardUninstalled(event: BoardUninstalledEvent): void {
+        this.logger.info('Board uninstalled: ', JSON.stringify(event));
+        this.onBoardsPackageUninstalledEmitter.fire(event);
+        const { selectedBoard } = this.boardsConfig;
+        if (selectedBoard && selectedBoard.fqbn) {
+            const uninstalledBoard = event.pkg.boards.find(({ name }) => name === selectedBoard.name);
+            if (uninstalledBoard && uninstalledBoard.fqbn === selectedBoard.fqbn) {
+                this.logger.info(`Board package ${event.pkg.id} was uninstalled. Discarding the FQBN of the currently selected ${selectedBoard.name} board.`);
+                const selectedBoardWithoutFqbn = {
+                    name: selectedBoard.name
+                    // No FQBN
+                };
+                this.boardsConfig = {
+                    ...this.boardsConfig,
+                    selectedBoard: selectedBoardWithoutFqbn
+                };
+            }
+        }
+    }
+
+    set boardsConfig(config: BoardsConfig.Config) {
+        this.doSetBoardsConfig(config);
+        this.saveState().finally(() => this.reconcileAvailableBoards().finally(() => this.onBoardsConfigChangedEmitter.fire(this._boardsConfig)));
+    }
+
+    protected doSetBoardsConfig(config: BoardsConfig.Config): void {
+        this.logger.info('Board config changed: ', JSON.stringify(config));
+        this._boardsConfig = config;
+        if (this.canUploadTo(this._boardsConfig)) {
+            this.latestValidBoardsConfig = this._boardsConfig;
+        }
+    }
+
+    async searchBoards({ query, cores }: { query?: string, cores?: string[] }): Promise<Array<Board & { packageName: string }>> {
+        const boards = await this.boardsService.allBoards({});
+        const coresFilter = !!cores && cores.length
+            ? ((toFilter: { packageName: string }) => cores.some(core => core === toFilter.packageName))
+            : () => true;
+        if (!query) {
+            return boards.filter(coresFilter).sort(Board.compare);
+        }
+        const toMatch = ((toFilter: Board & { packageName: string }) => (({ board: toFilter, matches: monaco.filters.matchesFuzzy(query, toFilter.name, true) })));
+        const compareEntries = (left: BoardMatch, right: BoardMatch, lookFor: string) => {
+            const leftMatches = left.matches || [];
+            const rightMatches = right.matches || [];
+            if (leftMatches.length && !rightMatches.length) {
+                return -1;
+            }
+            if (!leftMatches.length && rightMatches.length) {
+                return 1;
+            }
+            if (leftMatches.length === 0 && rightMatches.length === 0) {
+                return 0;
+            }
+            const leftLabel = left.board.name.replace(/\r?\n/g, ' ');
+            const rightLabel = right.board.name.replace(/\r?\n/g, ' ');
+            return compareAnything(leftLabel, rightLabel, lookFor);
+        }
+        const normalizedQuery = query.toLowerCase();
+        return boards
+            .filter(coresFilter)
+            .map(toMatch)
+            .filter(({ matches }) => !!matches)
+            .sort((left, right) => compareEntries(left, right, normalizedQuery))
+            .map(({ board }) => board);
+    }
+
+    get boardsConfig(): BoardsConfig.Config {
+        return this._boardsConfig;
+    }
+
+    /**
+     * `true` if the `config.selectedBoard` is defined; hence can compile against the board. Otherwise, `false`.
+     */
+    canVerify(
+        config: BoardsConfig.Config | undefined = this.boardsConfig,
+        options: { silent: boolean } = { silent: true }): config is BoardsConfig.Config & { selectedBoard: Board } {
+
+        if (!config) {
+            return false;
+        }
+
+        if (!config.selectedBoard) {
+            if (!options.silent && this.messageService) {
+                this.messageService.warn('No boards selected.', { timeout: 3000 });
+            }
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * `true` if `canVerify`, the board has an FQBN and the `config.selectedPort` is also set, hence can upload to board. Otherwise, `false`.
+     */
+    canUploadTo(
+        config: BoardsConfig.Config | undefined = this.boardsConfig,
+        options: { silent: boolean } = { silent: true }): config is RecursiveRequired<BoardsConfig.Config> {
+
+        if (!this.canVerify(config, options)) {
+            return false;
+        }
+
+        const { name } = config.selectedBoard;
+        if (!config.selectedPort) {
+            if (!options.silent && this.messageService) {
+                this.messageService.warn(`No ports selected for board: '${name}'.`, { timeout: 3000 });
+            }
+            return false;
+        }
+
+        if (!config.selectedBoard.fqbn) {
+            if (!options.silent && this.messageService) {
+                this.messageService.warn(`The FQBN is not available for the selected board ${name}. Do you have the corresponding core installed?`, { timeout: 3000 });
+            }
+            return false;
+        }
+
+        return true;
+    }
+
+    get availableBoards(): AvailableBoard[] {
+        return this._availableBoards;
+    }
+
+    protected async reconcileAvailableBoards(): Promise<void> {
+        const attachedBoards = this._attachedBoards;
+        const availablePorts = this._availablePorts;
+        // Unset the port on the user's config, if it is not available anymore.
+        if (this.boardsConfig.selectedPort && !availablePorts.some(port => Port.sameAs(port, this.boardsConfig.selectedPort))) {
+            this.doSetBoardsConfig({ selectedBoard: this.boardsConfig.selectedBoard, selectedPort: undefined });
+            this.onBoardsConfigChangedEmitter.fire(this._boardsConfig);
+        }
+        const boardsConfig = this.boardsConfig;
+        const currentAvailableBoards = this._availableBoards;
+        const availableBoards: AvailableBoard[] = [];
+        const availableBoardPorts = availablePorts.filter(Port.isBoardPort);
+        const attachedSerialBoards = attachedBoards.filter(({ port }) => !!port);
+
+        for (const boardPort of availableBoardPorts) {
+            let state = AvailableBoard.State.incomplete; // Initial pessimism.
+            let board = attachedSerialBoards.find(({ port }) => Port.sameAs(boardPort, port));
+            if (board) {
+                state = AvailableBoard.State.recognized;
+            } else {
+                // If the selected board is not recognized because it is a 3rd party board: https://github.com/arduino/arduino-cli/issues/623
+                // We still want to show it without the red X in the boards toolbar: https://github.com/arduino/arduino-pro-ide/issues/198#issuecomment-599355836
+                const lastSelectedBoard = await this.getLastSelectedBoardOnPort(boardPort);
+                if (lastSelectedBoard) {
+                    board = {
+                        ...lastSelectedBoard,
+                        port: boardPort
+                    };
+                    state = AvailableBoard.State.guessed;
+                }
+            }
+            if (!board) {
+                availableBoards.push({ name: 'Unknown', port: boardPort, state });
+            } else {
+                const selected = BoardsConfig.Config.sameAs(boardsConfig, board);
+                availableBoards.push({ ...board, state, selected, port: boardPort });
+            }
+        }
+
+        if (boardsConfig.selectedBoard && !availableBoards.some(({ selected }) => selected)) {
+            availableBoards.push({
+                ...boardsConfig.selectedBoard,
+                port: boardsConfig.selectedPort,
+                selected: true,
+                state: AvailableBoard.State.incomplete
+            });
+        }
+
+        const sortedAvailableBoards = availableBoards.sort(AvailableBoard.compare);
+        let hasChanged = sortedAvailableBoards.length !== currentAvailableBoards.length;
+        for (let i = 0; !hasChanged && i < sortedAvailableBoards.length; i++) {
+            hasChanged = AvailableBoard.compare(sortedAvailableBoards[i], currentAvailableBoards[i]) !== 0;
+        }
+        if (hasChanged) {
+            this._availableBoards = sortedAvailableBoards;
+            this.onAvailableBoardsChangedEmitter.fire(this._availableBoards);
+        }
+    }
+
+    protected async getLastSelectedBoardOnPort(port: Port | string | undefined): Promise<Board | undefined> {
+        if (!port) {
+            return undefined;
+        }
+        const key = this.getLastSelectedBoardOnPortKey(port);
+        return this.storageService.getData<Board>(key);
+    }
+
+    protected async saveState(): Promise<void> {
+        // We save the port with the selected board name/FQBN, to be able to guess a better board name.
+        // Required when the attached board belongs to a 3rd party boards package, and neither the name, nor
+        // the FQBN can be retrieved with a `board list` command.
+        // https://github.com/arduino/arduino-cli/issues/623
+        const { selectedBoard, selectedPort } = this.boardsConfig;
+        if (selectedBoard && selectedPort) {
+            const key = this.getLastSelectedBoardOnPortKey(selectedPort);
+            await this.storageService.setData(key, selectedBoard);
+        }
+        await this.storageService.setData('latest-valid-boards-config', this.latestValidBoardsConfig);
+    }
+
+    protected getLastSelectedBoardOnPortKey(port: Port | string): string {
+        // TODO: we lose the port's `protocol` info (`serial`, `network`, etc.) here if the `port` is a `string`.
+        return `last-selected-board-on-port:${typeof port === 'string' ? port : Port.toString(port)}`;
+    }
+
+    protected async loadState(): Promise<void> {
+        const storedValidBoardsConfig = await this.storageService.getData<RecursiveRequired<BoardsConfig.Config>>('latest-valid-boards-config');
+        if (storedValidBoardsConfig) {
+            this.latestValidBoardsConfig = storedValidBoardsConfig;
+            if (this.canUploadTo(this.latestValidBoardsConfig)) {
+                this.boardsConfig = this.latestValidBoardsConfig;
+            }
+        }
+    }
+
+}
+
+/**
+ * Representation of a ready-to-use board, either the user has configured it or was automatically recognized by the CLI.
+ * An available board was not necessarily recognized by the CLI (e.g.: it is a 3rd party board) or correctly configured but ready for `verify`.
+ * If it has the selected board and a associated port, it can be used for `upload`. We render an available board for the user
+ * when it has the `port` set.
+ */
+export interface AvailableBoard extends Board {
+    readonly state: AvailableBoard.State;
+    readonly selected?: boolean;
+    readonly port?: Port;
+}
+
+export namespace AvailableBoard {
+
+    export enum State {
+        /**
+         * Retrieved from the CLI via the `board list` command.
+         */
+        'recognized',
+        /**
+         * Guessed the name/FQBN of the board from the available board ports (3rd party).
+         */
+        'guessed',
+        /**
+         * We do not know anything about this board, probably a 3rd party. The user has not selected a board for this port yet.
+         */
+        'incomplete'
+    }
+
+    export function is(board: any): board is AvailableBoard {
+        return Board.is(board) && 'state' in board;
+    }
+
+    export function hasPort(board: AvailableBoard): board is AvailableBoard & { port: Port } {
+        return !!board.port;
+    }
+
+    export const compare = (left: AvailableBoard, right: AvailableBoard) => {
+        if (left.selected && !right.selected) {
+            return -1;
+        }
+        if (right.selected && !left.selected) {
+            return 1;
+        }
+        let result = naturalCompare(left.name, right.name);
+        if (result !== 0) {
+            return result;
+        }
+        if (left.fqbn && right.fqbn) {
+            result = naturalCompare(left.fqbn, right.fqbn);
+            if (result !== 0) {
+                return result;
+            }
+        }
+        if (left.port && right.port) {
+            result = Port.compare(left.port, right.port);
+            if (result !== 0) {
+                return result;
+            }
+        }
+        if (!!left.selected && !right.selected) {
+            return -1;
+        }
+        if (!!right.selected && !left.selected) {
+            return 1;
+        }
+        return left.state - right.state;
+    }
+
+}

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

@@ -1,61 +1,38 @@
 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 } from '@theia/core/lib/common/command';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { Port } from '../../common/protocol';
+import { BoardsConfig } from './boards-config';
 import { ArduinoCommands } from '../arduino-commands';
-import ReactDOM = require('react-dom');
+import { BoardsServiceClientImpl, AvailableBoard } from './boards-service-client-impl';
 
-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: Array<AvailableBoard & { onClick: () => void, port: Port }>;
+        readonly openBoardsConfig: () => 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 +42,152 @@ 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 '';
         }
-    }
-}
-
-export namespace BoardsToolBarItem {
-    export interface Props {
-        readonly contextMenuRenderer: ContextMenuRenderer;
-        readonly boardsNotificationService: BoardsNotificationService;
-        readonly boardService: BoardsService;
-        readonly commands: CommandRegistry;
-        readonly statusBar: StatusBar;
+        return <div className='arduino-boards-dropdown-list'
+            style={{
+                position: 'absolute',
+                ...coords
+            }}>
+            {this.renderItem({
+                label: 'Select Other Board & Port',
+                onClick: () => this.props.openBoardsConfig()
+            })}
+            {items.map(({ name, port, selected, onClick }) => ({ label: `${name} at ${Port.toString(port)}`, selected, onClick })).map(this.renderItem)}
+        </div>
     }
 
-    export interface State {
-        selectedBoard?: Board;
-        selectedIsAttached: boolean;
-        boardItems: BoardsDropdownItem[];
-        isOpen: boolean;
+    protected renderItem({ label, selected, onClick }: { label: string, selected?: boolean, onClick: () => void }): React.ReactNode {
+        return <div key={label} className={`arduino-boards-dropdown-item ${selected ? 'selected' : ''}`} onClick={onClick}>
+            <div>
+                {label}
+            </div>
+            {selected ? <span className='fa fa-check' /> : ''}
+        </div>
     }
+
 }
 
 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);
 
+        const { availableBoards } = props.boardsServiceClient;
         this.state = {
-            selectedBoard: undefined,
-            selectedIsAttached: true,
-            boardItems: [],
-            isOpen: false
+            availableBoards,
+            coords: 'hidden'
         };
 
         document.addEventListener('click', () => {
-            this.setState({ isOpen: false });
+            this.setState({ coords: 'hidden' });
         });
     }
 
     componentDidMount() {
-        this.setAttachedBoards();
+        this.props.boardsServiceClient.onAvailableBoardsChanged(availableBoards => this.setState({ availableBoards }));
     }
 
-    setSelectedBoard(board: Board) {
-        if (this.attachedBoards && this.attachedBoards.length) {
-            this.setState({ selectedIsAttached: !!this.attachedBoards.find(attachedBoard => attachedBoard.name === board.name) });
-        }
-        this.setState({ selectedBoard: board });
+    componentWillUnmount(): void {
+        this.toDispose.dispose();
     }
 
-    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
+    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' });
             }
-            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)
-            });
-        });
-        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;
-    }
-
-    protected getPort(board: Board): string {
-        if (AttachedSerialBoard.is(board)) {
-            return board.port;
         }
-        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 { coords, availableBoards } = this.state;
+        const boardsConfig = this.props.boardsServiceClient.boardsConfig;
+        const title = BoardsConfig.Config.toString(boardsConfig, { default: 'no board selected' });
+        const decorator = (() => {
+            const selectedBoard = availableBoards.find(({ selected }) => selected);
+            if (!selectedBoard || !selectedBoard.port) {
+                return 'fa fa-times notAttached'
+            }
+            if (selectedBoard.state === AvailableBoard.State.guessed) {
+                return 'fa fa-exclamation-triangle guessed'
+            }
+            return ''
+        })();
+
         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={decorator} />
                         <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={availableBoards.filter(AvailableBoard.hasPort).map(board => ({
+                    ...board,
+                    onClick: () => {
+                        if (board.state === AvailableBoard.State.incomplete) {
+                            this.props.boardsServiceClient.boardsConfig = {
+                                selectedPort: board.port
+                            };
+                            this.openDialog();
+                        } else {
+                            this.props.boardsServiceClient.boardsConfig = {
+                                selectedBoard: board,
+                                selectedPort: board.port
+                            }
+                        }
+                    }
+                }))}
+                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' });
     };
-}
+
+}
+export namespace BoardsToolBarItem {
+
+    export interface Props {
+        readonly boardsServiceClient: BoardsServiceClientImpl;
+        readonly commands: CommandRegistry;
+    }
+
+    export interface State {
+        availableBoards: AvailableBoard[];
+        coords: BoardsDropDownListCoords | '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 { ArduinoMenus } from '../arduino-frontend-contribution';
+import { BoardsListWidget } from './boards-list-widget';
+import { BoardsPackage } from '../../common/protocol/boards-service';
+import { ListWidgetFrontendContribution } from '../widgets/component-list/list-widget-frontend-contribution';
+import { ArduinoMenus } from '../menu/arduino-menus';
 
 @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<BoardsPackage> {
 
     static readonly OPEN_MANAGER = `${BoardsListWidget.WIDGET_ID}:toggle`;
 
@@ -29,15 +19,20 @@ export class BoardsListWidgetFrontendContribution extends ListWidgetFrontendCont
                 rank: 600
             },
             toggleCommandId: BoardsListWidgetFrontendContribution.OPEN_MANAGER,
-            toggleKeybinding: 'ctrlcmd+shift+b'
+            toggleKeybinding: 'CtrlCmd+Shift+B'
         });
     }
 
+    async initializeLayout(): Promise<void> {
+        this.openView();
+    }
+
     registerMenus(menus: MenuModelRegistry): void {
         if (this.toggleCommand) {
-            menus.registerMenuAction(ArduinoMenus.TOOLS, {
+            menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
                 commandId: this.toggleCommand.id,
-                label: 'Boards Manager...'
+                label: 'Boards Manager...',
+                order: '4'
             });
         }
     }

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/quick-open/boards-quick-open-module.ts

@@ -0,0 +1,16 @@
+import { ContainerModule } from 'inversify';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { CommandContribution } from '@theia/core/lib/common/command';
+import { QuickOpenContribution } from '@theia/core/lib/browser/quick-open';
+import { KeybindingContribution } from '@theia/core/lib/browser/keybinding';
+import { BoardsQuickOpenService } from './boards-quick-open-service';
+
+export default new ContainerModule(bind => {
+    bind(BoardsQuickOpenService).toSelf().inSingletonScope();
+    bind(CommandContribution).toService(BoardsQuickOpenService);
+    bind(KeybindingContribution).toService(BoardsQuickOpenService);
+    bind(QuickOpenContribution).toService(BoardsQuickOpenService);
+    bind(ILogger).toDynamicValue(({ container }) => container.get<ILogger>(ILogger).child('boards-quick-open'))
+        .inSingletonScope()
+        .whenTargetNamed('boards-quick-open');
+});

arduino-ide-extension/src/browser/boards/quick-open/boards-quick-open-service.ts

@@ -0,0 +1,309 @@
+import * as fuzzy from 'fuzzy';
+import { inject, injectable, postConstruct, named } from 'inversify';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { CommandContribution, CommandRegistry, Command } from '@theia/core/lib/common/command';
+import { KeybindingContribution, KeybindingRegistry } from '@theia/core/lib/browser/keybinding';
+import { QuickOpenItem, QuickOpenModel, QuickOpenMode, QuickOpenGroupItem } from '@theia/core/lib/common/quick-open-model';
+import {
+    QuickOpenService,
+    QuickOpenHandler,
+    QuickOpenOptions,
+    QuickOpenItemOptions,
+    QuickOpenContribution,
+    QuickOpenActionProvider,
+    QuickOpenHandlerRegistry,
+    QuickOpenGroupItemOptions
+} from '@theia/core/lib/browser/quick-open';
+import { naturalCompare } from '../../../common/utils';
+import { BoardsService, Port, Board, ConfigOption, ConfigValue } from '../../../common/protocol';
+import { CoreServiceClientImpl } from '../../core-service-client-impl';
+import { BoardsDataStore } from '../boards-data-store';
+import { BoardsServiceClientImpl, AvailableBoard } from '../boards-service-client-impl';
+
+@injectable()
+export class BoardsQuickOpenService implements QuickOpenContribution, QuickOpenModel, QuickOpenHandler, CommandContribution, KeybindingContribution, Command {
+
+    readonly id = 'arduino-boards-quick-open';
+    readonly prefix = '|';
+    readonly description = 'Configure Available Boards';
+    readonly label: 'Configure Available Boards';
+
+    @inject(ILogger)
+    @named('boards-quick-open')
+    protected readonly logger: ILogger;
+
+    @inject(QuickOpenService)
+    protected readonly quickOpenService: QuickOpenService;
+
+    @inject(BoardsService)
+    protected readonly boardsService: BoardsService;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClient: BoardsServiceClientImpl;
+
+    @inject(BoardsDataStore)
+    protected readonly boardsDataStore: BoardsDataStore;
+
+    @inject(CoreServiceClientImpl)
+    protected coreServiceClient: CoreServiceClientImpl;
+
+    protected isOpen: boolean = false;
+    protected currentQuery: string = '';
+    // Attached boards plus the user's config.
+    protected availableBoards: AvailableBoard[] = [];
+    // Only for the `selected` one from the `availableBoards`. Note: the `port` of the `selected` is optional.
+    protected data: BoardsDataStore.Data = BoardsDataStore.Data.EMPTY;
+    protected allBoards: Board.Detailed[] = []
+    protected selectedBoard?: (AvailableBoard & { port: Port });
+
+    // `init` name is used by the `QuickOpenHandler`.
+    @postConstruct()
+    protected postConstruct(): void {
+        this.coreServiceClient.onIndexUpdated(() => this.update(this.availableBoards));
+        this.boardsServiceClient.onAvailableBoardsChanged(availableBoards => this.update(availableBoards));
+        this.update(this.boardsServiceClient.availableBoards);
+    }
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(this, { execute: () => this.open() });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({ command: this.id, keybinding: 'ctrlCmd+k ctrlCmd+b' });
+    }
+
+    registerQuickOpenHandlers(registry: QuickOpenHandlerRegistry): void {
+        registry.registerHandler(this);
+    }
+
+    getModel(): QuickOpenModel {
+        return this;
+    }
+
+    getOptions(): QuickOpenOptions {
+        let placeholder = '';
+        if (!this.selectedBoard) {
+            placeholder += 'No board selected.';
+        }
+        placeholder += 'Type to filter boards';
+        if (this.data.configOptions.length) {
+            placeholder += ' or use the ↓↑ keys to adjust the board settings...';
+        } else {
+            placeholder += '...';
+        }
+        return {
+            placeholder,
+            fuzzyMatchLabel: true,
+            onClose: () => this.isOpen = false
+        };
+    }
+
+    open(): void {
+        this.isOpen = true;
+        this.quickOpenService.open(this, this.getOptions());
+    }
+
+    onType(
+        lookFor: string,
+        acceptor: (items: QuickOpenItem<QuickOpenItemOptions>[], actionProvider?: QuickOpenActionProvider) => void): void {
+
+        this.currentQuery = lookFor;
+        const fuzzyFilter = this.fuzzyFilter(lookFor);
+        const availableBoards = this.availableBoards.filter(AvailableBoard.hasPort).filter(({ name }) => fuzzyFilter(name));
+        const toAccept: QuickOpenItem<QuickOpenItemOptions>[] = [];
+
+        // Show the selected attached in a different group.
+        if (this.selectedBoard && fuzzyFilter(this.selectedBoard.name)) {
+            toAccept.push(this.toQuickItem(this.selectedBoard, { groupLabel: 'Selected Board' }));
+        }
+
+        // Filter the selected from the attached ones.
+        toAccept.push(...availableBoards.filter(board => board !== this.selectedBoard).map((board, i) => {
+            let group: QuickOpenGroupItemOptions | undefined = undefined;
+            if (i === 0) {
+                // If no `selectedBoard`, then this item is the top one, no borders required.
+                group = { groupLabel: 'Attached Boards', showBorder: !!this.selectedBoard };
+            }
+            return this.toQuickItem(board, group);
+        }));
+
+        // Show the config only if the `input` is empty.
+        if (!lookFor.trim().length) {
+            toAccept.push(...this.data.configOptions.map((config, i) => {
+                let group: QuickOpenGroupItemOptions | undefined = undefined;
+                if (i === 0) {
+                    group = { groupLabel: 'Board Settings', showBorder: true };
+                }
+                return this.toQuickItem(config, group);
+            }));
+        } else {
+            toAccept.push(...this.allBoards.filter(({ name }) => fuzzyFilter(name)).map((board, i) => {
+                let group: QuickOpenGroupItemOptions | undefined = undefined;
+                if (i === 0) {
+                    group = { groupLabel: 'Boards', showBorder: true };
+                }
+                return this.toQuickItem(board, group);
+            }));
+        }
+
+        acceptor(toAccept);
+    }
+
+    private fuzzyFilter(lookFor: string): (inputString: string) => boolean {
+        const shouldFilter = !!lookFor.trim().length;
+        return (inputString: string) => shouldFilter ? fuzzy.test(lookFor.toLocaleLowerCase(), inputString.toLocaleLowerCase()) : true;
+    }
+
+    protected async update(availableBoards: AvailableBoard[]): Promise<void> {
+        // `selectedBoard` is not an attached board, we need to show the board settings for it (TODO: clarify!)
+        const selectedBoard = availableBoards.filter(AvailableBoard.hasPort).find(({ selected }) => selected);
+        const [data, boards] = await Promise.all([
+            selectedBoard && selectedBoard.fqbn ? this.boardsDataStore.getData(selectedBoard.fqbn) : Promise.resolve(BoardsDataStore.Data.EMPTY),
+            this.boardsService.allBoards({})
+        ]);
+        this.allBoards = Board.decorateBoards(selectedBoard, boards)
+            .filter(board => !availableBoards.some(availableBoard => Board.sameAs(availableBoard, board)));
+        this.availableBoards = availableBoards;
+        this.data = data;
+        this.selectedBoard = selectedBoard;
+
+        if (this.isOpen) {
+            // Hack, to update the state without closing and reopening the quick open widget.
+            (this.quickOpenService as any).onType(this.currentQuery);
+        }
+    }
+
+    protected toQuickItem(item: BoardsQuickOpenService.Item, group?: QuickOpenGroupItemOptions): QuickOpenItem<QuickOpenItemOptions> {
+        let options: QuickOpenItemOptions;
+        if (AvailableBoard.is(item)) {
+            const description = `on ${Port.toString(item.port)}`
+            options = {
+                label: `${item.name}`,
+                description,
+                descriptionHighlights: [
+                    {
+                        start: 0,
+                        end: description.length
+                    }
+                ],
+                run: this.toRun(() => this.boardsServiceClient.boardsConfig = ({ selectedBoard: item, selectedPort: item.port }))
+            };
+        } else if (ConfigOption.is(item)) {
+            const selected = item.values.find(({ selected }) => selected);
+            const value = selected ? selected.label : 'Not set';
+            const label = `${item.label}: ${value}`;
+            options = {
+                label,
+                // Intended to match the value part of a board setting.
+                // NOTE: this does not work, as `fuzzyMatchLabel: true` is set. Manual highlighting is ignored, apparently.
+                labelHighlights: [
+                    {
+                        start: label.length - value.length,
+                        end: label.length
+                    }
+                ],
+                run: (mode) => {
+                    if (mode === QuickOpenMode.OPEN) {
+                        this.setConfig(item);
+                        return false;
+                    }
+                    return true;
+                }
+            };
+            if (!selected) {
+                options.description = 'Not set';
+            };
+        } else {
+            options = {
+                label: `${item.name}`,
+                description: `${item.missing ? '' : `[installed with '${item.packageName}']`}`,
+                run: (mode) => {
+                    if (mode === QuickOpenMode.OPEN) {
+                        this.selectBoard(item);
+                        return false;
+                    }
+                    return true;
+                }
+            };
+        }
+        if (group) {
+            return new QuickOpenGroupItem<QuickOpenGroupItemOptions>({ ...options, ...group });
+        } else {
+            return new QuickOpenItem<QuickOpenItemOptions>(options);
+        }
+    }
+
+    protected toRun(run: (() => void)): ((mode: QuickOpenMode) => boolean) {
+        return (mode) => {
+            if (mode !== QuickOpenMode.OPEN) {
+                return false;
+            }
+            run();
+            return true;
+        };
+    }
+
+    protected async selectBoard(board: Board): Promise<void> {
+        const allPorts = this.availableBoards.filter(AvailableBoard.hasPort).map(({ port }) => port).sort(Port.compare);
+        const toItem = (port: Port) => new QuickOpenItem<QuickOpenItemOptions>({
+            label: Port.toString(port, { useLabel: true }),
+            run: this.toRun(() => {
+                this.boardsServiceClient.boardsConfig = {
+                    selectedBoard: board,
+                    selectedPort: port
+                };
+            })
+        });
+        const options = {
+            placeholder: `Select a port for '${board.name}'. Press 'Enter' to confirm or 'Escape' to cancel.`,
+            fuzzyMatchLabel: true
+        }
+        this.quickOpenService.open({
+            onType: (lookFor, acceptor) => {
+                const fuzzyFilter = this.fuzzyFilter(lookFor);
+                acceptor(allPorts.filter(({ address }) => fuzzyFilter(address)).map(toItem));
+            }
+        }, options);
+    }
+
+    protected async setConfig(config: ConfigOption): Promise<void> {
+        const toItem = (value: ConfigValue) => new QuickOpenItem<QuickOpenItemOptions>({
+            label: value.label,
+            iconClass: value.selected ? 'fa fa-check' : '',
+            run: this.toRun(() => {
+                if (!this.selectedBoard) {
+                    this.logger.warn(`Could not alter the boards settings. No board selected. ${JSON.stringify(config)}`);
+                    return;
+                }
+                if (!this.selectedBoard.fqbn) {
+                    this.logger.warn(`Could not alter the boards settings. The selected board does not have a FQBN. ${JSON.stringify(this.selectedBoard)}`);
+                    return;
+                }
+                const { fqbn } = this.selectedBoard;
+                this.boardsDataStore.selectConfigOption({
+                    fqbn,
+                    option: config.option,
+                    selectedValue: value.value
+                });
+            })
+        });
+        const options = {
+            placeholder: `Configure '${config.label}'. Press 'Enter' to confirm or 'Escape' to cancel.`,
+            fuzzyMatchLabel: true
+        }
+        this.quickOpenService.open({
+            onType: (lookFor, acceptor) => {
+                const fuzzyFilter = this.fuzzyFilter(lookFor);
+                acceptor(config.values
+                    .filter(({ label }) => fuzzyFilter(label))
+                    .sort((left, right) => naturalCompare(left.label, right.label))
+                    .map(toItem));
+            }
+        }, options);
+    }
+
+}
+
+export namespace BoardsQuickOpenService {
+    export type Item = AvailableBoard & { port: Port } | Board.Detailed | ConfigOption;
+}

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 +0,0 @@
-import * as React from 'react';
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
-import { ArduinoComponent } from '../../../common/protocol/arduino-component';
-
-export class ComponentListItem extends React.Component<ComponentListItem.Props> {
-
-    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> {
-        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>;
-    }
-
-}
-
-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';
-    }
-
-}

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

@@ -1,39 +0,0 @@
-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';
-
-export class ComponentList extends React.Component<ComponentList.Props> {
-
-    protected container?: HTMLElement;
-
-    render(): React.ReactNode {
-        return <div
-            className={'items-container'}
-            ref={element => this.container = element || undefined}>
-            {this.props.items.map(item => this.createItem(item))}
-        </div>;
-    }
-
-    componentDidMount(): void {
-        if (this.container && this.props.resolveContainer) {
-            this.props.resolveContainer(this.container);
-        }
-    }
-
-    protected createItem(item: ArduinoComponent): React.ReactNode {
-        return <ComponentListItem key={item.name} item={item} windowService={this.props.windowService} 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;
-    }
-
-}

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

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import { WindowService } from '@theia/core/lib/browser/window/window-service';
-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';
-
-export class FilterableListContainer extends React.Component<FilterableListContainer.Props, FilterableListContainer.State> {
-
-    constructor(props: Readonly<FilterableListContainer.Props>) {
-        super(props);
-        this.state = {
-            filterText: '',
-            items: []
-        };
-        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
-    }
-
-    componentWillMount(): void {
-        this.handleFilterTextChange('');
-    }
-
-    render(): React.ReactNode {
-        return <div className={'filterable-list-container'}>
-            {this.renderSearchFilter()}
-            {this.renderSearchBar()}
-            {this.renderComponentList()}
-        </div>
-    }
-
-    protected renderSearchFilter(): React.ReactNode {
-        return undefined;
-    }
-
-    protected renderSearchBar(): React.ReactNode {
-        return <SearchBar
-            resolveFocus={this.props.resolveFocus}
-            filterText={this.state.filterText}
-            onFilterTextChanged={this.handleFilterTextChange}
-        />
-    }
-
-    protected renderComponentList(): React.ReactNode {
-        return <ComponentList
-            items={this.state.items}
-            install={this.install.bind(this)}
-            windowService={this.props.windowService}
-            resolveContainer={this.props.resolveContainer}
-        />
-    }
-
-    private handleFilterTextChange(filterText: string): void {
-        const { props } = this.state;
-        this.props.service.search({ query: filterText, props }).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 async install(comp: ArduinoComponent): Promise<void> {
-        const dialog = new InstallationProgressDialog(comp.name);
-        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 });
-            this.setState({ items: this.sort(items) });
-        } finally {
-            dialog.close();
-        }
-    }
-
-}
-
-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 State {
-        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>;
-    }
-
-}
-

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

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

@@ -0,0 +1,52 @@
+import { injectable, inject } from 'inversify';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { Event, Emitter } from '@theia/core/lib/common/event';
+import { CommandService } from '@theia/core/lib/common/command';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { ConfigServiceClient, Config } from '../common/protocol';
+import { Settings } from './contributions/settings';
+
+@injectable()
+export class ConfigServiceClientImpl implements ConfigServiceClient {
+
+    @inject(CommandService)
+    protected readonly commandService: CommandService;
+
+    @inject(ILogger)
+    protected readonly logger: ILogger;
+
+    @inject(MessageService)
+    protected readonly messageService: MessageService;
+
+    protected readonly onConfigChangedEmitter = new Emitter<Config>();
+    protected invalidConfigPopup: Promise<void | 'No' | 'Yes' | undefined> | undefined;
+
+    notifyConfigChanged(config: Config): void {
+        this.invalidConfigPopup = undefined;
+        this.info(`The CLI configuration has been successfully reloaded.`);
+        this.onConfigChangedEmitter.fire(config);
+    }
+
+    notifyInvalidConfig(): void {
+        if (!this.invalidConfigPopup) {
+            this.invalidConfigPopup = this.messageService.error(`Your CLI configuration is invalid. Do you want to correct it now?`, 'No', 'Yes')
+                .then(answer => {
+                    if (answer === 'Yes') {
+                        this.commandService.executeCommand(Settings.Commands.OPEN_CLI_CONFIG.id)
+                    }
+                    this.invalidConfigPopup = undefined;
+                })
+
+        }
+    }
+
+    get onConfigChanged(): Event<Config> {
+        return this.onConfigChangedEmitter.event;
+    }
+
+    protected info(message: string): void {
+        this.messageService.info(message, { timeout: 3000 });
+        this.logger.info(message);
+    }
+
+}

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

@@ -0,0 +1,89 @@
+import { inject, injectable } from 'inversify';
+import { remote } from 'electron';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, URI } from './contribution';
+import { SaveAsSketch } from './save-as-sketch';
+import { EditorManager } from '@theia/editor/lib/browser';
+import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+
+@injectable()
+export class CloseSketch extends SketchContribution {
+
+    @inject(EditorManager)
+    protected readonly editorManager: EditorManager;
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(CloseSketch.Commands.CLOSE_SKETCH, {
+            execute: async () => {
+                const sketch = await this.sketchServiceClient.currentSketch();
+                if (!sketch) {
+                    return;
+                }
+                const isTemp = await this.sketchService.isTemp(sketch);
+                const uri = await this.sketchServiceClient.currentSketchFile();
+                if (!uri) {
+                    return;
+                }
+                if (isTemp && await this.wasTouched(uri)) {
+                    const { response } = await remote.dialog.showMessageBox({
+                        type: 'question',
+                        buttons: ["Don't Save", 'Cancel', 'Save'],
+                        message: 'Do you want to save changes to this sketch before closing?',
+                        detail: "If you don't save, your changes will be lost."
+                    });
+                    if (response === 1) { // Cancel
+                        return;
+                    }
+                    if (response === 2) { // Save
+                        const saved = await this.commandService.executeCommand(SaveAsSketch.Commands.SAVE_AS_SKETCH.id, { openAfterMove: false, execOnlyIfTemp: true });
+                        if (!saved) { // If it was not saved, do bail the close.
+                            return;
+                        }
+                    }
+                }
+                window.close();
+            }
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
+            commandId: CloseSketch.Commands.CLOSE_SKETCH.id,
+            label: 'Close',
+            order: '5'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: CloseSketch.Commands.CLOSE_SKETCH.id,
+            keybinding: 'CtrlCmd+W'
+        });
+    }
+
+    /**
+     * If the file was ever touched/modified. We get this based on the `version` of the monaco model.
+     */
+    protected async wasTouched(uri: string): Promise<boolean> {
+        const editorWidget = await this.editorManager.getByUri(new URI(uri));
+        if (editorWidget) {
+            const { editor } = editorWidget;
+            if (editor instanceof MonacoEditor) {
+                const versionId = editor.getControl().getModel()?.getVersionId();
+                if (Number.isInteger(versionId) && versionId! > 1) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+}
+
+export namespace CloseSketch {
+    export namespace Commands {
+        export const CLOSE_SKETCH: Command = {
+            id: 'arduino-close-sketch'
+        };
+    }
+}

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

@@ -0,0 +1,85 @@
+import { inject, injectable, interfaces } from 'inversify';
+import URI from '@theia/core/lib/common/uri';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { FileSystem } from '@theia/filesystem/lib/common';
+import { LabelProvider } from '@theia/core/lib/browser/label-provider';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
+import { open, OpenerService } from '@theia/core/lib/browser/opener-service';
+import { MenuModelRegistry, MenuContribution } from '@theia/core/lib/common/menu';
+import { KeybindingRegistry, KeybindingContribution } from '@theia/core/lib/browser/keybinding';
+import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { Command, CommandRegistry, CommandContribution, CommandService } from '@theia/core/lib/common/command';
+import { EditorMode } from '../editor-mode';
+import { SketchesServiceClientImpl } from '../../common/protocol/sketches-service-client-impl';
+import { SketchesService, ConfigService, FileSystemExt, Sketch } from '../../common/protocol';
+
+export { Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry, URI, Sketch, open };
+
+@injectable()
+export abstract class Contribution implements CommandContribution, MenuContribution, KeybindingContribution, TabBarToolbarContribution {
+
+    @inject(ILogger)
+    protected readonly logger: ILogger;
+
+    @inject(MessageService)
+    protected readonly messageService: MessageService;
+
+    @inject(CommandService)
+    protected readonly commandService: CommandService;
+
+    @inject(WorkspaceService)
+    protected readonly workspaceService: WorkspaceService;
+
+    @inject(EditorMode)
+    protected readonly editorMode: EditorMode;
+
+    @inject(LabelProvider)
+    protected readonly labelProvider: LabelProvider;
+
+    registerCommands(registry: CommandRegistry): void {
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+    }
+
+}
+
+@injectable()
+export abstract class SketchContribution extends Contribution {
+
+    @inject(FileSystem)
+    protected readonly fileSystem: FileSystem;
+
+    @inject(FileSystemExt)
+    protected readonly fileSystemExt: FileSystemExt;
+
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
+
+    @inject(SketchesService)
+    protected readonly sketchService: SketchesService;
+
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
+    @inject(SketchesServiceClientImpl)
+    protected readonly sketchServiceClient: SketchesServiceClientImpl;
+
+}
+
+export namespace Contribution {
+    export function configure<T>(bind: interfaces.Bind, serviceIdentifier: interfaces.ServiceIdentifier<T>): void {
+        bind(serviceIdentifier).toSelf().inSingletonScope();
+        bind(CommandContribution).toService(serviceIdentifier);
+        bind(MenuContribution).toService(serviceIdentifier);
+        bind(KeybindingContribution).toService(serviceIdentifier);
+        bind(TabBarToolbarContribution).toService(serviceIdentifier);
+    }
+}

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

@@ -0,0 +1,277 @@
+import { inject, injectable } from 'inversify';
+import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
+import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
+import { PreferenceService } from '@theia/core/lib/browser/preferences/preference-service';
+import { MonacoEditorService } from '@theia/monaco/lib/browser/monaco-editor-service';
+import { EDITOR_FONT_DEFAULTS } from '@theia/editor/lib/browser/editor-preferences';
+import { Contribution, Command, MenuModelRegistry, KeybindingRegistry, CommandRegistry } from './contribution';
+import { ArduinoMenus } from '../menu/arduino-menus';
+
+// TODO: [macOS]: to remove `Start Dictation...` and `Emoji & Symbol` see this thread: https://github.com/electron/electron/issues/8283#issuecomment-269522072
+// Depends on https://github.com/eclipse-theia/theia/pull/7964
+@injectable()
+export class EditContributions extends Contribution {
+
+    @inject(MonacoEditorService)
+    protected readonly codeEditorService: MonacoEditorService;
+
+    @inject(ClipboardService)
+    protected readonly clipboardService: ClipboardService;
+
+    @inject(PreferenceService)
+    protected readonly preferences: PreferenceService;
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(EditContributions.Commands.GO_TO_LINE, { execute: () => this.run('editor.action.gotoLine') });
+        registry.registerCommand(EditContributions.Commands.TOGGLE_COMMENT, { execute: () => this.run('editor.action.commentLine') });
+        registry.registerCommand(EditContributions.Commands.INDENT_LINES, { execute: () => this.run('editor.action.indentLines') });
+        registry.registerCommand(EditContributions.Commands.OUTDENT_LINES, { execute: () => this.run('editor.action.outdentLines') });
+        registry.registerCommand(EditContributions.Commands.FIND, { execute: () => this.run('actions.find') });
+        registry.registerCommand(EditContributions.Commands.FIND_NEXT, { execute: () => this.run('actions.findWithSelection') });
+        registry.registerCommand(EditContributions.Commands.FIND_PREVIOUS, { execute: () => this.run('editor.action.nextMatchFindAction') });
+        registry.registerCommand(EditContributions.Commands.USE_FOR_FIND, { execute: () => this.run('editor.action.previousSelectionMatchFindAction') });
+        registry.registerCommand(EditContributions.Commands.INCREASE_FONT_SIZE, {
+            execute: () => this.preferences.set('editor.fontSize', this.preferences.get('editor.fontSize', EDITOR_FONT_DEFAULTS.fontSize) + 1)
+        });
+        registry.registerCommand(EditContributions.Commands.DECREASE_FONT_SIZE, {
+            execute: () => this.preferences.set('editor.fontSize', this.preferences.get('editor.fontSize', EDITOR_FONT_DEFAULTS.fontSize) - 1)
+        });
+        /* Tools */registry.registerCommand(EditContributions.Commands.AUTO_FORMAT, { execute: () => this.run('editor.action.formatDocument') });
+        registry.registerCommand(EditContributions.Commands.COPY_FOR_FORUM, {
+            execute: async () => {
+                const value = await this.currentValue();
+                if (value !== undefined) {
+                    this.clipboardService.writeText(`[code]
+${value}
+[/code]`)
+                }
+            }
+        });
+        registry.registerCommand(EditContributions.Commands.COPY_FOR_GITHUB, {
+            execute: async () => {
+                const value = await this.currentValue();
+                if (value !== undefined) {
+                    this.clipboardService.writeText(`\`\`\`cpp
+${value}
+\`\`\``)
+                }
+            }
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+            commandId: CommonCommands.CUT.id,
+            order: '0'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+            commandId: CommonCommands.COPY.id,
+            order: '1'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+            commandId: EditContributions.Commands.COPY_FOR_FORUM.id,
+            label: 'Copy for Forum',
+            order: '2'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+            commandId: EditContributions.Commands.COPY_FOR_GITHUB.id,
+            label: 'Copy for GitHub',
+            order: '3'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+            commandId: CommonCommands.PASTE.id,
+            order: '4'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+            commandId: CommonCommands.SELECT_ALL.id,
+            order: '5'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+            commandId: EditContributions.Commands.GO_TO_LINE.id,
+            label: 'Go to Line...',
+            order: '6'
+        });
+
+        registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
+            commandId: EditContributions.Commands.TOGGLE_COMMENT.id,
+            label: 'Comment/Uncomment',
+            order: '0'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
+            commandId: EditContributions.Commands.INDENT_LINES.id,
+            label: 'Increase Indent',
+            order: '1'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
+            commandId: EditContributions.Commands.OUTDENT_LINES.id,
+            label: 'Decrease Indent',
+            order: '2'
+        });
+
+        registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
+            commandId: EditContributions.Commands.INCREASE_FONT_SIZE.id,
+            label: 'Increase Font Size',
+            order: '0'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
+            commandId: EditContributions.Commands.DECREASE_FONT_SIZE.id,
+            label: 'Decrease Font Size',
+            order: '1'
+        });
+
+        registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
+            commandId: EditContributions.Commands.FIND.id,
+            label: 'Find',
+            order: '0'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
+            commandId: EditContributions.Commands.FIND_NEXT.id,
+            label: 'Find Next',
+            order: '1'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
+            commandId: EditContributions.Commands.FIND_PREVIOUS.id,
+            label: 'Find Previous',
+            order: '2'
+        });
+        registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
+            commandId: EditContributions.Commands.USE_FOR_FIND.id,
+            label: 'Use Selection for Find', // XXX: The Java IDE uses `Use Selection For Find`.
+            order: '3'
+        });
+
+        // `Tools`
+        registry.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
+            commandId: EditContributions.Commands.AUTO_FORMAT.id,
+            label: 'Auto Format', // XXX: The Java IDE uses `Use Selection For Find`.
+            order: '0'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: EditContributions.Commands.COPY_FOR_FORUM.id,
+            keybinding: 'CtrlCmd+Shift+C',
+            when: 'editorFocus'
+        });
+        registry.registerKeybinding({
+            command: EditContributions.Commands.COPY_FOR_GITHUB.id,
+            keybinding: 'CtrlCmd+Alt+C',
+            when: 'editorFocus'
+        });
+        registry.registerKeybinding({
+            command: EditContributions.Commands.GO_TO_LINE.id,
+            keybinding: 'CtrlCmd+L',
+            when: 'editorFocus'
+        });
+
+        registry.registerKeybinding({
+            command: EditContributions.Commands.TOGGLE_COMMENT.id,
+            keybinding: 'CtrlCmd+/',
+            when: 'editorFocus'
+        });
+
+        registry.registerKeybinding({
+            command: EditContributions.Commands.INCREASE_FONT_SIZE.id,
+            keybinding: 'CtrlCmd+='
+        });
+        registry.registerKeybinding({
+            command: EditContributions.Commands.DECREASE_FONT_SIZE.id,
+            keybinding: 'CtrlCmd+-'
+        });
+
+        registry.registerKeybinding({
+            command: EditContributions.Commands.FIND.id,
+            keybinding: 'CtrlCmd+F'
+        });
+        registry.registerKeybinding({
+            command: EditContributions.Commands.FIND_NEXT.id,
+            keybinding: 'CtrlCmd+G'
+        });
+        registry.registerKeybinding({
+            command: EditContributions.Commands.FIND_PREVIOUS.id,
+            keybinding: 'CtrlCmd+Shift+G'
+        });
+        registry.registerKeybinding({
+            command: EditContributions.Commands.USE_FOR_FIND.id,
+            keybinding: 'CtrlCmd+E'
+        });
+
+        // `Tools`
+        registry.registerKeybinding({
+            command: EditContributions.Commands.AUTO_FORMAT.id,
+            keybinding: 'CtrlCmd+T'
+        });
+    }
+
+    protected async current(): Promise<monaco.editor.ICodeEditor | undefined> {
+        return this.codeEditorService.getFocusedCodeEditor() || this.codeEditorService.getActiveCodeEditor();
+    }
+
+    protected async currentValue(): Promise<string | undefined> {
+        const currentEditor = await this.current();
+        if (currentEditor) {
+            const selection = currentEditor.getSelection();
+            if (!selection || selection.isEmpty()) {
+                return currentEditor.getValue();
+            }
+            return currentEditor.getModel()?.getValueInRange(selection);
+        }
+        return undefined;
+    }
+
+    protected async run(commandId: string): Promise<any> {
+        const editor = await this.current();
+        if (editor) {
+            const action = editor.getAction(commandId);
+            if (action) {
+                return action.run();
+            }
+        }
+    }
+
+}
+
+export namespace EditContributions {
+    export namespace Commands {
+        export const COPY_FOR_FORUM: Command = {
+            id: 'arduino-copy-for-forum'
+        };
+        export const COPY_FOR_GITHUB: Command = {
+            id: 'arduino-copy-for-github'
+        };
+        export const GO_TO_LINE: Command = {
+            id: 'arduino-go-to-line'
+        };
+        export const TOGGLE_COMMENT: Command = {
+            id: 'arduino-toggle-comment'
+        };
+        export const INDENT_LINES: Command = {
+            id: 'arduino-indent-lines'
+        };
+        export const OUTDENT_LINES: Command = {
+            id: 'arduino-outdent-lines'
+        };
+        export const FIND: Command = {
+            id: 'arduino-find'
+        };
+        export const FIND_NEXT: Command = {
+            id: 'arduino-find-next'
+        };
+        export const FIND_PREVIOUS: Command = {
+            id: 'arduino-find-previous'
+        };
+        export const USE_FOR_FIND: Command = {
+            id: 'arduino-for-find'
+        };
+        export const INCREASE_FONT_SIZE: Command = {
+            id: 'arduino-increase-font-size'
+        };
+        export const DECREASE_FONT_SIZE: Command = {
+            id: 'arduino-decrease-font-size'
+        };
+        export const AUTO_FORMAT: Command = {
+            id: 'arduino-auto-format' // `Auto Format` should belong to `Tool`.
+        };
+    }
+}

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

@@ -0,0 +1,63 @@
+import { injectable } from 'inversify';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
+import { SketchContribution, URI, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry } from './contribution';
+
+@injectable()
+export class NewSketch extends SketchContribution {
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(NewSketch.Commands.NEW_SKETCH, {
+            execute: () => this.newSketch()
+        });
+        registry.registerCommand(NewSketch.Commands.NEW_SKETCH__TOOLBAR, {
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            execute: () => registry.executeCommand(NewSketch.Commands.NEW_SKETCH.id)
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
+            commandId: NewSketch.Commands.NEW_SKETCH.id,
+            label: 'New',
+            order: '0'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: NewSketch.Commands.NEW_SKETCH.id,
+            keybinding: 'CtrlCmd+N'
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: NewSketch.Commands.NEW_SKETCH__TOOLBAR.id,
+            command: NewSketch.Commands.NEW_SKETCH__TOOLBAR.id,
+            tooltip: 'New',
+            priority: 3
+        });
+    }
+
+    async newSketch(): Promise<void> {
+        try {
+            const sketch = await this.sketchService.createNewSketch();
+            this.workspaceService.open(new URI(sketch.uri));
+        } catch (e) {
+            await this.messageService.error(e.toString());
+        }
+    }
+
+}
+
+export namespace NewSketch {
+    export namespace Commands {
+        export const NEW_SKETCH: Command = {
+            id: 'arduino-new-sketch'
+        };
+        export const NEW_SKETCH__TOOLBAR: Command = {
+            id: 'arduino-new-sketch--toolbar'
+        };
+    }
+}

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

@@ -0,0 +1,51 @@
+import { injectable } from 'inversify';
+import { remote } from 'electron';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry } from './contribution';
+
+@injectable()
+export class OpenSketchExternal extends SketchContribution {
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(OpenSketchExternal.Commands.OPEN_EXTERNAL, {
+            execute: () => this.openExternal()
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.SKETCH__UTILS_GROUP, {
+            commandId: OpenSketchExternal.Commands.OPEN_EXTERNAL.id,
+            label: 'Show Sketch Folder',
+            order: '0'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: OpenSketchExternal.Commands.OPEN_EXTERNAL.id,
+            keybinding: 'CtrlCmd+Alt+K'
+        });
+    }
+
+    protected async openExternal(): Promise<void> {
+        const uri = await this.sketchServiceClient.currentSketchFile();
+        if (uri) {
+            const exists = this.fileSystem.exists(uri);
+            if (exists) {
+                const fsPath = await this.fileSystem.getFsPath(uri);
+                if (fsPath) {
+                    remote.shell.showItemInFolder(fsPath);
+                }
+            }
+        }
+    }
+
+}
+
+export namespace OpenSketchExternal {
+    export namespace Commands {
+        export const OPEN_EXTERNAL: Command = {
+            id: 'arduino-open-sketch-external'
+        };
+    }
+}

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

@@ -0,0 +1,163 @@
+import { inject, injectable } from 'inversify';
+import { remote } from 'electron';
+import { MaybePromise } from '@theia/core/lib/common/types';
+import { Widget, ContextMenuRenderer } from '@theia/core/lib/browser';
+import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
+import { SketchContribution, Sketch, URI, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry } from './contribution';
+
+@injectable()
+export class OpenSketch extends SketchContribution {
+
+    @inject(MenuModelRegistry)
+    protected readonly menuRegistry: MenuModelRegistry;
+
+    @inject(ContextMenuRenderer)
+    protected readonly contextMenuRenderer: ContextMenuRenderer;
+
+    protected readonly toDisposeBeforeCreateNewContextMenu = new DisposableCollection();
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(OpenSketch.Commands.OPEN_SKETCH, {
+            execute: arg => Sketch.is(arg) ? this.openSketch(arg) : this.openSketch()
+        });
+        registry.registerCommand(OpenSketch.Commands.OPEN_SKETCH__TOOLBAR, {
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            execute: async (_: Widget, target: EventTarget) => {
+                const sketches = await this.sketchService.getSketches();
+                if (!sketches.length) {
+                    this.openSketch();
+                } else {
+                    this.toDisposeBeforeCreateNewContextMenu.dispose();
+                    if (!(target instanceof HTMLElement)) {
+                        return;
+                    }
+                    const { parentElement } = target;
+                    if (!parentElement) {
+                        return;
+                    }
+
+                    this.menuRegistry.registerMenuAction(ArduinoMenus.OPEN_SKETCH__CONTEXT__OPEN_GROUP, {
+                        commandId: OpenSketch.Commands.OPEN_SKETCH.id,
+                        label: 'Open...'
+                    });
+                    this.toDisposeBeforeCreateNewContextMenu.push(Disposable.create(() => this.menuRegistry.unregisterMenuAction(OpenSketch.Commands.OPEN_SKETCH)));
+                    for (const sketch of sketches) {
+                        const command = { id: `arduino-open-sketch--${sketch.uri}` };
+                        const handler = { execute: () => this.openSketch(sketch) };
+                        this.toDisposeBeforeCreateNewContextMenu.push(registry.registerCommand(command, handler));
+                        this.menuRegistry.registerMenuAction(ArduinoMenus.OPEN_SKETCH__CONTEXT__RECENT_GROUP, {
+                            commandId: command.id,
+                            label: sketch.name
+                        });
+                        this.toDisposeBeforeCreateNewContextMenu.push(Disposable.create(() => this.menuRegistry.unregisterMenuAction(command)));
+                    }
+                    const options = {
+                        menuPath: ArduinoMenus.OPEN_SKETCH__CONTEXT,
+                        anchor: {
+                            x: parentElement.getBoundingClientRect().left,
+                            y: parentElement.getBoundingClientRect().top + parentElement.offsetHeight
+                        }
+                    }
+                    this.contextMenuRenderer.render(options);
+                }
+            }
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
+            commandId: OpenSketch.Commands.OPEN_SKETCH.id,
+            label: 'Open...',
+            order: '1'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: OpenSketch.Commands.OPEN_SKETCH.id,
+            keybinding: 'CtrlCmd+O'
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: OpenSketch.Commands.OPEN_SKETCH__TOOLBAR.id,
+            command: OpenSketch.Commands.OPEN_SKETCH__TOOLBAR.id,
+            tooltip: 'Open',
+            priority: 4
+        });
+    }
+
+    async openSketch(toOpen: MaybePromise<Sketch | undefined> = this.selectSketch()): Promise<void> {
+        const sketch = await toOpen;
+        if (sketch) {
+            this.workspaceService.open(new URI(sketch.uri));
+        }
+    }
+
+    protected async selectSketch(): Promise<Sketch | undefined> {
+        const config = await this.configService.getConfiguration();
+        const defaultPath = await this.fileSystem.getFsPath(config.sketchDirUri);
+        const { filePaths } = await remote.dialog.showOpenDialog({
+            defaultPath,
+            properties: ['createDirectory', 'openFile'],
+            filters: [
+                {
+                    name: 'Sketch',
+                    extensions: ['ino']
+                }
+            ]
+        });
+        if (!filePaths.length) {
+            return undefined;
+        }
+        if (filePaths.length > 1) {
+            this.logger.warn(`Multiple sketches were selected: ${filePaths}. Using the first one.`);
+        }
+        const sketchFilePath = filePaths[0];
+        const sketchFileUri = await this.fileSystemExt.getUri(sketchFilePath);
+        const sketch = await this.sketchService.getSketchFolder(sketchFileUri);
+        if (sketch) {
+            return sketch;
+        }
+        if (sketchFileUri.endsWith('.ino')) {
+            const name = new URI(sketchFileUri).path.name;
+            const nameWithExt = this.labelProvider.getName(new URI(sketchFileUri));
+            const { response } = await remote.dialog.showMessageBox({
+                title: 'Moving',
+                type: 'question',
+                buttons: ['Cancel', 'OK'],
+                message: `The file "${nameWithExt}" needs to be inside a sketch folder named as "${name}".\nCreate this folder, move the file, and continue?`
+            });
+            if (response === 1) { // OK
+                const newSketchUri = new URI(sketchFileUri).parent.resolve(name);
+                const exists = await this.fileSystem.exists(newSketchUri.toString());
+                if (exists) {
+                    await remote.dialog.showMessageBox({
+                        type: 'error',
+                        title: 'Error',
+                        message: `A folder named "${name}" already exists. Can't open sketch.`
+                    });
+                    return undefined;
+                }
+                await this.fileSystem.createFolder(newSketchUri.toString());
+                await this.fileSystem.move(sketchFileUri, newSketchUri.resolve(nameWithExt).toString());
+                return this.sketchService.getSketchFolder(newSketchUri.toString());
+            }
+        }
+    }
+
+}
+
+export namespace OpenSketch {
+    export namespace Commands {
+        export const OPEN_SKETCH: Command = {
+            id: 'arduino-open-sketch'
+        };
+        export const OPEN_SKETCH__TOOLBAR: Command = {
+            id: 'arduino-open-sketch--toolbar'
+        };
+    }
+}

arduino-ide-extension/src/browser/contributions/quit-app.ts

@@ -0,0 +1,46 @@
+import { injectable } from 'inversify';
+import { remote } from 'electron';
+import { isOSX } from '@theia/core/lib/common/os';
+import { Contribution, Command, MenuModelRegistry, KeybindingRegistry, CommandRegistry } from './contribution';
+import { ArduinoMenus } from '../menu/arduino-menus';
+
+@injectable()
+export class QuitApp extends Contribution {
+
+    registerCommands(registry: CommandRegistry): void {
+        if (!isOSX) {
+            registry.registerCommand(QuitApp.Commands.QUIT_APP, {
+                execute: () => remote.app.quit()
+            });
+        }
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        // On macOS we will get the `Quit ${YOUR_APP_NAME}` menu item natively, no need to duplicate it. 
+        if (!isOSX) {
+            registry.registerMenuAction(ArduinoMenus.FILE__QUIT_GROUP, {
+                commandId: QuitApp.Commands.QUIT_APP.id,
+                label: 'Quit',
+                order: '0'
+            });
+        }
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        if (!isOSX) {
+            registry.registerKeybinding({
+                command: QuitApp.Commands.QUIT_APP.id,
+                keybinding: 'CtrlCmd+Q'
+            });
+        }
+    }
+
+}
+
+export namespace QuitApp {
+    export namespace Commands {
+        export const QUIT_APP: Command = {
+            id: 'arduino-quit-app'
+        };
+    }
+}

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

@@ -0,0 +1,94 @@
+import { injectable } from 'inversify';
+import { remote } from 'electron';
+import * as dateFormat from 'dateformat';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { SketchContribution, URI, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry } from './contribution';
+
+@injectable()
+export class SaveAsSketch extends SketchContribution {
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(SaveAsSketch.Commands.SAVE_AS_SKETCH, {
+            execute: args => this.saveAs(args)
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
+            commandId: SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
+            label: 'Save As...',
+            order: '7'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
+            keybinding: 'CtrlCmd+Shift+S'
+        });
+    }
+
+    /**
+     * Resolves `true` if the sketch was successfully saved as something.
+     */
+    async saveAs({ execOnlyIfTemp, openAfterMove, wipeOriginal }: SaveAsSketch.Options = SaveAsSketch.Options.DEFAULT): Promise<boolean> {
+        const sketch = await this.sketchServiceClient.currentSketch();
+        if (!sketch) {
+            return false;
+        }
+
+        const isTemp = await this.sketchService.isTemp(sketch);
+        if (!isTemp && !!execOnlyIfTemp) {
+            return false;
+        }
+
+        // If target does not exist, propose a `directories.user`/${sketch.name} path
+        // If target exists, propose `directories.user`/${sketch.name}_copy_${yyyymmddHHMMss}
+        const sketchDirUri = new URI((await this.configService.getConfiguration()).sketchDirUri);
+        const exists = await this.fileSystem.exists(sketchDirUri.resolve(sketch.name).toString());
+        const defaultUri = exists
+            ? sketchDirUri.resolve(sketchDirUri.resolve(`${sketch.name}_copy_${dateFormat(new Date(), 'yyyymmddHHMMss')}`).toString())
+            : sketchDirUri.resolve(sketch.name);
+        const defaultPath = await this.fileSystem.getFsPath(defaultUri.toString())!;
+        const { filePath, canceled } = await remote.dialog.showSaveDialog({ title: 'Save sketch folder as...', defaultPath });
+        if (!filePath || canceled) {
+            return false;
+        }
+        const destinationUri = await this.fileSystemExt.getUri(filePath);
+        if (!destinationUri) {
+            return false;
+        }
+        const workspaceUri = await this.sketchService.copy(sketch, { destinationUri });
+        if (workspaceUri && openAfterMove) {
+            if (wipeOriginal) {
+                await this.fileSystem.delete(sketch.uri);
+            }
+            this.workspaceService.open(new URI(workspaceUri), { preserveWindow: true });
+        }
+        return !!workspaceUri;
+    }
+
+}
+
+export namespace SaveAsSketch {
+    export namespace Commands {
+        export const SAVE_AS_SKETCH: Command = {
+            id: 'arduino-save-as-sketch'
+        };
+    }
+    export interface Options {
+        readonly execOnlyIfTemp?: boolean;
+        readonly openAfterMove?: boolean;
+        /**
+         * Ignored if `openAfterMove` is `false`.
+         */
+        readonly wipeOriginal?: boolean;
+    }
+    export namespace Options {
+        export const DEFAULT: Options = {
+            execOnlyIfTemp: false,
+            openAfterMove: true,
+            wipeOriginal: false
+        };
+    }
+}

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

@@ -0,0 +1,59 @@
+import { injectable } from 'inversify';
+import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
+import { SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry } from './contribution';
+
+@injectable()
+export class SaveSketch extends SketchContribution {
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(SaveSketch.Commands.SAVE_SKETCH, {
+            execute: () => this.saveSketch()
+        });
+        registry.registerCommand(SaveSketch.Commands.SAVE_SKETCH__TOOLBAR, {
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            execute: () => registry.executeCommand(SaveSketch.Commands.SAVE_SKETCH.id)
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
+            commandId: SaveSketch.Commands.SAVE_SKETCH.id,
+            label: 'Save',
+            order: '6'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: SaveSketch.Commands.SAVE_SKETCH.id,
+            keybinding: 'CtrlCmd+S'
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: SaveSketch.Commands.SAVE_SKETCH__TOOLBAR.id,
+            command: SaveSketch.Commands.SAVE_SKETCH__TOOLBAR.id,
+            tooltip: 'Save',
+            priority: 5
+        });
+    }
+
+    async saveSketch(): Promise<void> {
+        return this.commandService.executeCommand(CommonCommands.SAVE_ALL.id);
+    }
+
+}
+
+export namespace SaveSketch {
+    export namespace Commands {
+        export const SAVE_SKETCH: Command = {
+            id: 'arduino-save-sketch'
+        };
+        export const SAVE_SKETCH__TOOLBAR: Command = {
+            id: 'arduino-save-sketch--toolbar'
+        };
+    }
+}

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

@@ -0,0 +1,38 @@
+import { injectable } from 'inversify';
+import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
+import { URI, Command, MenuModelRegistry, CommandRegistry, SketchContribution, open } from './contribution';
+import { ArduinoMenus } from '../menu/arduino-menus';
+
+@injectable()
+export class Settings extends SketchContribution {
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(Settings.Commands.OPEN_CLI_CONFIG, {
+            execute: () => this.configService.getCliConfigFileUri().then(uri => open(this.openerService, new URI(uri)))
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.FILE__SETTINGS_GROUP, {
+            commandId: CommonCommands.OPEN_PREFERENCES.id,
+            label: 'Preferences...',
+            order: '0'
+        });
+        registry.registerMenuAction(ArduinoMenus.FILE__SETTINGS_GROUP, {
+            commandId: Settings.Commands.OPEN_CLI_CONFIG.id,
+            label: 'Open CLI Configuration',
+            order: '1',
+        });
+    }
+
+}
+
+export namespace Settings {
+    export namespace Commands {
+        export const OPEN_CLI_CONFIG: Command = {
+            id: 'arduino-open-cli-config',
+            label: 'Open CLI Configuration',
+            category: 'Arduino'
+        }
+    }
+}

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

@@ -0,0 +1,129 @@
+import { inject, injectable } from 'inversify';
+import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
+import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
+import { WorkspaceCommands } from '@theia/workspace/lib/browser';
+import { ContextMenuRenderer } from '@theia/core/lib/browser/context-menu-renderer';
+import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
+import { URI, SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry, open } from './contribution';
+import { ArduinoMenus } from '../menu/arduino-menus';
+
+@injectable()
+export class SketchControl extends SketchContribution {
+
+    @inject(ApplicationShell)
+    protected readonly shell: ApplicationShell;
+
+    @inject(MenuModelRegistry)
+    protected readonly menuRegistry: MenuModelRegistry;
+
+    @inject(ContextMenuRenderer)
+    protected readonly contextMenuRenderer: ContextMenuRenderer;
+
+    protected readonly toDisposeBeforeCreateNewContextMenu = new DisposableCollection();
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR, {
+            isVisible: widget => this.shell.getWidgets('main').indexOf(widget) !== -1,
+            execute: async () => {
+                this.toDisposeBeforeCreateNewContextMenu.dispose();
+                const sketch = await this.sketchServiceClient.currentSketch();
+                if (!sketch) {
+                    return;
+                }
+
+                const target = document.getElementById(SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id);
+                if (!(target instanceof HTMLElement)) {
+                    return;
+                }
+                const { parentElement } = target;
+                if (!parentElement) {
+                    return;
+                }
+
+                const { mainFileUri, otherSketchFileUris, additionalFileUris } = await this.sketchService.loadSketch(sketch.uri);
+                const uris = [mainFileUri, ...otherSketchFileUris, ...additionalFileUris];
+                for (let i = 0; i < uris.length; i++) {
+                    const uri = new URI(uris[i]);
+                    const command = { id: `arduino-focus-file--${uri.toString()}` };
+                    const handler = { execute: () => open(this.openerService, uri) };
+                    this.toDisposeBeforeCreateNewContextMenu.push(registry.registerCommand(command, handler));
+                    this.menuRegistry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__RESOURCES_GROUP, {
+                        commandId: command.id,
+                        label: this.labelProvider.getName(uri),
+                        order: `${i}`
+                    });
+                    this.toDisposeBeforeCreateNewContextMenu.push(Disposable.create(() => this.menuRegistry.unregisterMenuAction(command)));
+                }
+                const options = {
+                    menuPath: ArduinoMenus.SKETCH_CONTROL__CONTEXT,
+                    anchor: {
+                        x: parentElement.getBoundingClientRect().left,
+                        y: parentElement.getBoundingClientRect().top + parentElement.offsetHeight
+                    }
+                }
+                this.contextMenuRenderer.render(options);
+            }
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP, {
+            commandId: WorkspaceCommands.NEW_FILE.id,
+            label: 'New Tab',
+            order: '0'
+        });
+        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP, {
+            commandId: WorkspaceCommands.FILE_RENAME.id,
+            label: 'Rename',
+            order: '1'
+        });
+        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP, {
+            commandId: WorkspaceCommands.FILE_DELETE.id, // TODO: customize delete. Wipe sketch if deleting main file. Close window.
+            label: 'Delete',
+            order: '2'
+        });
+
+        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP, {
+            commandId: CommonCommands.PREVIOUS_TAB.id,
+            label: 'Previous Tab',
+            order: '0'
+        });
+        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP, {
+            commandId: CommonCommands.NEXT_TAB.id,
+            label: 'Next Tab',
+            order: '0'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: WorkspaceCommands.NEW_FILE.id,
+            keybinding: 'CtrlCmd+Shift+N'
+        });
+        registry.registerKeybinding({
+            command: CommonCommands.PREVIOUS_TAB.id,
+            keybinding: 'CtrlCmd+Alt+Left' // TODO: check why electron does not show the keybindings in the UI.
+        });
+        registry.registerKeybinding({
+            command: CommonCommands.NEXT_TAB.id,
+            keybinding: 'CtrlCmd+Alt+Right'
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id,
+            command: SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id
+        });
+    }
+
+}
+
+export namespace SketchControl {
+    export namespace Commands {
+        export const OPEN_SKETCH_CONTROL__TOOLBAR: Command = {
+            id: 'arduino-open-sketch-control--toolbar',
+            iconClass: 'fa fa-caret-down'
+        };
+    }
+}

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

@@ -0,0 +1,159 @@
+import { inject, injectable } from 'inversify';
+import { OutputChannelManager } from '@theia/output/lib/common/output-channel';
+import { CoreService } from '../../common/protocol';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
+import { BoardsDataStore } from '../boards/boards-data-store';
+import { MonitorConnection } from '../monitor/monitor-connection';
+import { BoardsServiceClientImpl } from '../boards/boards-service-client-impl';
+import { SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry } from './contribution';
+
+@injectable()
+export class UploadSketch extends SketchContribution {
+
+    @inject(CoreService)
+    protected readonly coreService: CoreService;
+
+    @inject(MonitorConnection)
+    protected readonly monitorConnection: MonitorConnection;
+
+    @inject(BoardsDataStore)
+    protected readonly boardsDataStore: BoardsDataStore;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClientImpl: BoardsServiceClientImpl;
+
+    @inject(OutputChannelManager)
+    protected readonly outputChannelManager: OutputChannelManager;
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH, {
+            execute: () => this.uploadSketch()
+        });
+        registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER, {
+            execute: () => this.uploadSketch(true)
+        });
+        registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR, {
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            execute: () => registry.executeCommand(UploadSketch.Commands.UPLOAD_SKETCH.id)
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+            commandId: UploadSketch.Commands.UPLOAD_SKETCH.id,
+            label: 'Upload',
+            order: '0'
+        });
+        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+            commandId: UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER.id,
+            label: 'Upload Using Programmer',
+            order: '1'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: UploadSketch.Commands.UPLOAD_SKETCH.id,
+            keybinding: 'CtrlCmd+U'
+        });
+        registry.registerKeybinding({
+            command: UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER.id,
+            keybinding: 'CtrlCmd+Shift+U'
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR.id,
+            command: UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR.id,
+            tooltip: 'Upload',
+            priority: 1
+        });
+    }
+
+    async uploadSketch(usingProgrammer: boolean = false): Promise<void> {
+        const uri = await this.sketchServiceClient.currentSketchFile();
+        if (!uri) {
+            return;
+        }
+        const monitorConfig = this.monitorConnection.monitorConfig;
+        if (monitorConfig) {
+            await this.monitorConnection.disconnect();
+        }
+        try {
+            const { boardsConfig } = this.boardsServiceClientImpl;
+            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 the '${boardsConfig.selectedBoard.name}' board. Please install the core.`);
+            }
+
+            const [fqbn, { selectedProgrammer }] = await Promise.all([
+                this.boardsDataStore.appendConfigToFqbn(boardsConfig.selectedBoard.fqbn),
+                this.boardsDataStore.getData(boardsConfig.selectedBoard.fqbn)
+            ]);
+
+            let options: CoreService.Upload.Options | undefined = undefined;
+            const sketchUri = uri;
+            const optimizeForDebug = this.editorMode.compileForDebug;
+            const { selectedPort } = boardsConfig;
+
+            if (usingProgrammer) {
+                const programmer = selectedProgrammer;
+                if (!programmer) {
+                    throw new Error('Programmer is not selected. Please select a programmer.');
+                }
+                let port: undefined | string = undefined;
+                // If the port is set by the user, we pass it to the CLI as it might be required.
+                // If it is not set but the CLI requires it, we let the CLI to complain.
+                if (selectedPort) {
+                    port = selectedPort.address;
+                }
+                options = {
+                    sketchUri,
+                    fqbn,
+                    optimizeForDebug,
+                    programmer,
+                    port
+                };
+            } else {
+                if (!selectedPort) {
+                    throw new Error('No ports selected. Please select a port.');
+                }
+                const port = selectedPort.address;
+                options = {
+                    sketchUri,
+                    fqbn,
+                    optimizeForDebug,
+                    port
+                };
+            }
+            this.outputChannelManager.getChannel('Arduino: upload').clear();
+            await this.coreService.upload(options);
+            this.messageService.info('Done uploading.', { timeout: 1000 });
+        } catch (e) {
+            this.messageService.error(e.toString());
+        } finally {
+            if (monitorConfig) {
+                await this.monitorConnection.connect(monitorConfig);
+            }
+        }
+    }
+
+}
+
+export namespace UploadSketch {
+    export namespace Commands {
+        export const UPLOAD_SKETCH: Command = {
+            id: 'arduino-upload-sketch'
+        };
+        export const UPLOAD_SKETCH_USING_PROGRAMMER: Command = {
+            id: 'arduino-upload-sketch-using-programmer'
+        };
+        export const UPLOAD_SKETCH_TOOLBAR: Command = {
+            id: 'arduino-upload-sketch--toolbar'
+        };
+    }
+}

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

@@ -0,0 +1,96 @@
+import { inject, injectable } from 'inversify';
+import { OutputChannelManager } from '@theia/output/lib/common/output-channel';
+import { CoreService } from '../../common/protocol';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
+import { BoardsDataStore } from '../boards/boards-data-store';
+import { BoardsServiceClientImpl } from '../boards/boards-service-client-impl';
+import { SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry } from './contribution';
+
+@injectable()
+export class VerifySketch extends SketchContribution {
+
+    @inject(CoreService)
+    protected readonly coreService: CoreService;
+
+    @inject(BoardsDataStore)
+    protected readonly boardsDataStore: BoardsDataStore;
+
+    @inject(BoardsServiceClientImpl)
+    protected readonly boardsServiceClientImpl: BoardsServiceClientImpl;
+
+    @inject(OutputChannelManager)
+    protected readonly outputChannelManager: OutputChannelManager;
+
+    registerCommands(registry: CommandRegistry): void {
+        registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH, {
+            execute: () => this.verifySketch()
+        });
+        registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR, {
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
+            execute: () => registry.executeCommand(VerifySketch.Commands.VERIFY_SKETCH.id)
+        });
+    }
+
+    registerMenus(registry: MenuModelRegistry): void {
+        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+            commandId: VerifySketch.Commands.VERIFY_SKETCH.id,
+            label: 'Verify/Compile',
+            order: '2'
+        });
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: VerifySketch.Commands.VERIFY_SKETCH.id,
+            keybinding: 'CtrlCmd+R'
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR.id,
+            command: VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR.id,
+            tooltip: 'Verify',
+            priority: 0
+        });
+    }
+
+    async verifySketch(): Promise<void> {
+        const uri = await this.sketchServiceClient.currentSketchFile();
+        if (!uri) {
+            return;
+        }
+        try {
+            const { boardsConfig } = this.boardsServiceClientImpl;
+            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 the '${boardsConfig.selectedBoard.name}' board. Please install the core.`);
+            }
+            const fqbn = await this.boardsDataStore.appendConfigToFqbn(boardsConfig.selectedBoard.fqbn);
+            this.outputChannelManager.getChannel('Arduino: compile').clear();
+            await this.coreService.compile({
+                sketchUri: uri,
+                fqbn,
+                optimizeForDebug: this.editorMode.compileForDebug
+            });
+            this.messageService.info('Done compiling.', { timeout: 1000 });
+        } catch (e) {
+            this.messageService.error(e.toString());
+        }
+    }
+
+}
+
+export namespace VerifySketch {
+    export namespace Commands {
+        export const VERIFY_SKETCH: Command = {
+            id: 'arduino-verify-sketch'
+        };
+        export const VERIFY_SKETCH_TOOLBAR: Command = {
+            id: 'arduino-verify-sketch--toolbar'
+        };
+    }
+}

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

@@ -0,0 +1,36 @@
+import { injectable, inject } from 'inversify';
+import { Emitter, Event } from '@theia/core/lib/common/event';
+import { ILogger } from '@theia/core/lib/common/logger';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { LocalStorageService } from '@theia/core/lib/browser/storage-service';
+import { CoreServiceClient } from '../common/protocol';
+
+@injectable()
+export class CoreServiceClientImpl implements CoreServiceClient {
+
+    @inject(ILogger)
+    protected logger: ILogger;
+
+    @inject(MessageService)
+    protected messageService: MessageService;
+
+    @inject(LocalStorageService)
+    protected storageService: LocalStorageService;
+
+    protected readonly onIndexUpdatedEmitter = new Emitter<void>();
+
+    notifyIndexUpdated(): void {
+        this.info('Index has been updated.');
+        this.onIndexUpdatedEmitter.fire();
+    }
+
+    get onIndexUpdated(): Event<void> {
+        return this.onIndexUpdatedEmitter.event;
+    }
+
+    protected info(message: string): void {
+        this.messageService.info(message, { timeout: 3000 });
+        this.logger.info(message);
+    }
+
+}

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 +0,0 @@
-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 +0,0 @@
-/********************************************************************************
- * 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';
-
-@injectable()
-export class SilentOutlineViewContribution extends OutlineViewContribution {
-
-    async initializeLayout(): Promise<void> {
-        // await this.openView();
-    }
-}

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

@@ -1,10 +0,0 @@
-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 +0,0 @@
-import { injectable } from 'inversify';
-import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
-import { ProblemStat } from '@theia/markers/lib/browser/problem/problem-manager';
-
-@injectable()
-export class SilentProblemContribution extends ProblemContribution {
-
-    async initializeLayout(): Promise<void> {
-        // await this.openView();
-    }
-
-    protected setStatusBarElement(problemStat: ProblemStat) {
-        
-    }
-}

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

@@ -1,91 +1,117 @@
 {
-	"tokenColors": [
-		{
-			"settings": {
-				"foreground": "#434f54"
-			}
-		},
-		{
-			"name": "Comments",
-			"scope": "comment",
-			"settings": {
-				"foreground": "#95a5a6cc"
-			}
-		},
-		{
-			"name": "Keywords Attributes",
-			"scope": [
-				"storage",
-				"support",
-				"string.quoted.single.c"
-			],
-			"settings": {
-				"foreground": "#00979D"
-			}
-		},
-		{
-			"name": "literal",
-			"scope": [
-				"meta.function.c",
-				"entity.name.function",
-				"meta.function-call.c"
-			],
-			"settings": {
-				"foreground": "#D35400"
-			}
-		},
-		{
-			"name": "punctuation",
-			"scope": [
-				"punctuation.section",
-				"meta.function-call.c",
-				"meta.block.c",
-				"meta.function.c",
-				"entity.name.function.preprocessor.c",
-				"meta.preprocessor.macro.c"
-			],
-			"settings": {
-				"foreground": "#434f54"
-			}
-		},
-		{
-			"name": "strings",
-			"scope": [
-				"string.quoted.double"
-			],
-			"settings": {
-				"foreground": "#005C5F"
-			}
-		},
-		{
-			"name": "meta keywords",
-			"scope": [
-				"keyword.control",
-				"meta.preprocessor.c"
-			],
-			"settings": {
-				"foreground": "#728E00"
-			}
-		},
-		{
-			"name": "numeric preprocessor",
-			"scope": [
-				"meta.preprocessor.macro.c",
-				"constant.numeric.preprocessor.c",
-				"meta.preprocessor.c"
-			],
-			"settings": {
-				"foreground": "#434f54"
-			}
-		}
-	],
-	"colors": {
-		"editor.background": "#FFFFFF",
-		"editorCursor.foreground": "#434f54",
-		"editor.foreground": "#434f54",
-		"editorWhitespace.foreground": "#BFBFBF",
-		"editor.lineHighlightBackground": "#434f5410",
-		"editor.selectionBackground": "#ffcb00"
-	},
-	"name": "Arduino"
-}
+  "tokenColors": [
+    {
+      "settings": {
+        "foreground": "#434f54"
+      }
+    },
+    {
+      "name": "Comments",
+      "scope": "comment",
+      "settings": {
+        "foreground": "#95a5a6cc"
+      }
+    },
+    {
+      "name": "Keywords Attributes",
+      "scope": [
+        "storage",
+        "support",
+        "string.quoted.single.c"
+      ],
+      "settings": {
+        "foreground": "#00979D"
+      }
+    },
+    {
+      "name": "literal",
+      "scope": [
+        "meta.function.c",
+        "entity.name.function",
+        "meta.function-call.c"
+      ],
+      "settings": {
+        "foreground": "#D35400"
+      }
+    },
+    {
+      "name": "punctuation",
+      "scope": [
+        "punctuation.section",
+        "meta.function-call.c",
+        "meta.block.c",
+        "meta.function.c",
+        "entity.name.function.preprocessor.c",
+        "meta.preprocessor.macro.c"
+      ],
+      "settings": {
+        "foreground": "#434f54"
+      }
+    },
+    {
+      "name": "strings",
+      "scope": [
+        "string.quoted.double"
+      ],
+      "settings": {
+        "foreground": "#005C5F"
+      }
+    },
+    {
+      "name": "meta keywords",
+      "scope": [
+        "keyword.control",
+        "meta.preprocessor.c"
+      ],
+      "settings": {
+        "foreground": "#728E00"
+      }
+    },
+    {
+      "name": "numeric preprocessor",
+      "scope": [
+        "meta.preprocessor.macro.c",
+        "constant.numeric.preprocessor.c",
+        "meta.preprocessor.c"
+      ],
+      "settings": {
+        "foreground": "#434f54"
+      }
+    }
+  ],
+  "colors": {
+    "list.highlightForeground": "#006468",
+    "list.activeSelectionBackground": "#006468",
+    "editor.background": "#ffffff",
+    "editorCursor.foreground": "#434f54",
+    "editor.foreground": "#434f54",
+    "editorWhitespace.foreground": "#bfbfbf",
+    "editor.lineHighlightBackground": "#434f5410",
+    "editor.selectionBackground": "#ffcb00",
+    "focusBorder": "#4db7bb99",
+    "menubar.selectionBackground": "#ffffff",
+    "menubar.selectionForeground": "#212121",
+    "menu.selectionBackground": "#dae3e3",
+    "menu.selectionForeground": "#212121",
+    "editorGroupHeader.tabsBackground": "#f7f9f9",
+    "button.background": "#4db7bb",
+    "titleBar.activeBackground": "#006468",
+    "titleBar.activeForeground": "#ffffff",
+    "terminal.background": "#000000",
+    "terminal.foreground": "#e0e0e0",
+    "dropdown.border": "#ececec",
+    "dropdown.background": "#ececec",
+    "activityBar.background": "#ececec",
+    "activityBar.foreground": "#616161",
+    "statusBar.background": "#006468",
+    "secondaryButton.background": "#b5c8c9",
+    "secondaryButton.hoverBackground": "#dae3e3",
+    "arduino.branding.primary": "#00979d",
+    "arduino.branding.secondary": "#b5c8c9",
+    "arduino.foreground": "#edf1f1",
+    "arduino.output.foreground": "#FFFFFF",
+    "arduino.output.background": "#000000"
+  },
+  "type": "light",
+  "name": "Arduino"
+}

arduino-ide-extension/src/browser/editor-mode.ts

@@ -0,0 +1,73 @@
+import { injectable, inject } from 'inversify';
+import { ApplicationShell, FrontendApplicationContribution, FrontendApplication, Widget } from '@theia/core/lib/browser';
+import { EditorWidget } from '@theia/editor/lib/browser';
+import { OutputWidget } from '@theia/output/lib/browser/output-widget';
+import { MainMenuManager } from '../common/main-menu-manager';
+import { BoardsListWidget } from './boards/boards-list-widget';
+import { LibraryListWidget } from './library/library-list-widget';
+
+@injectable()
+export class EditorMode implements FrontendApplicationContribution {
+
+    @inject(MainMenuManager)
+    protected readonly mainMenuManager: MainMenuManager;
+
+    protected app: FrontendApplication;
+
+    onStart(app: FrontendApplication): void {
+        this.app = app;
+        if (this.proMode) {
+            // 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(EditorMode.PRO_MODE_KEY);
+        }
+    }
+
+    get proMode(): boolean {
+        const value = window.localStorage.getItem(EditorMode.PRO_MODE_KEY);
+        return value === 'true';
+    }
+
+    async toggleProMode(): Promise<void> {
+        const oldState = this.proMode;
+        const inAdvancedMode = !oldState;
+        window.localStorage.setItem(EditorMode.PRO_MODE_KEY, String(inAdvancedMode));
+        if (!inAdvancedMode) {
+            const { shell } = this.app;
+            // Close all widgets that are neither editor nor `Output` / `Boards Manager` / `Library Manager`.
+            for (const area of ['left', 'right', 'bottom', 'main'] as Array<ApplicationShell.Area>) {
+                shell.closeTabs(area, title => !this.isInSimpleMode(title.owner));
+            }
+        }
+        // `storeLayout` has a sync API but the implementation is async, we store the layout manually before we reload the page.
+        // See: https://github.com/eclipse-theia/theia/issues/6579
+        // XXX: hack instead of injecting the `ArduinoShellLayoutRestorer` we have to retrieve it from the application to avoid DI cycle.
+        const layoutRestorer = (this.app as any).layoutRestorer as { storeLayoutAsync(app: FrontendApplication): Promise<void> };
+        await layoutRestorer.storeLayoutAsync(this.app);
+        window.location.reload(true);
+    }
+
+    protected isInSimpleMode(widget: Widget): boolean {
+        return widget instanceof EditorWidget
+            || widget instanceof OutputWidget
+            || widget instanceof BoardsListWidget
+            || widget instanceof LibraryListWidget;
+    }
+
+    get compileForDebug(): boolean {
+        const value = window.localStorage.getItem(EditorMode.COMPILE_FOR_DEBUG_KEY);
+        return value === 'true';
+    }
+
+    async toggleCompileForDebug(): Promise<void> {
+        const oldState = this.compileForDebug;
+        const newState = !oldState;
+        window.localStorage.setItem(EditorMode.COMPILE_FOR_DEBUG_KEY, String(newState));
+        this.mainMenuManager.update();
+    }
+
+}
+
+export namespace EditorMode {
+    export const PRO_MODE_KEY = 'arduino-advanced-mode';
+    export const COMPILE_FOR_DEBUG_KEY = 'arduino-compile-for-debug';
+}

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-list-widget.ts

@@ -0,0 +1,27 @@
+import { inject, injectable } from 'inversify';
+import { Library, LibraryService } from '../../common/protocol/library-service';
+import { ListWidget } from '../widgets/component-list/list-widget';
+import { ListItemRenderer } from '../widgets/component-list/list-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(ListItemRenderer) protected itemRenderer: ListItemRenderer<Library>) {
+
+        super({
+            id: LibraryListWidget.WIDGET_ID,
+            label: LibraryListWidget.WIDGET_LABEL,
+            iconClass: 'library-tab-icon',
+            searchable: service,
+            installable: service,
+            itemLabel: (item: Library) => item.name,
+            itemRenderer
+        });
+    }
+
+}