chore: Updated to the next version after release.

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

.eslintrc.js

@@ -15,10 +15,7 @@ module.exports = {
         '.browser_modules/*',
         'docs/*',
         'scripts/*',
-        'electron-app/lib/*',
-        'electron-app/src-gen/*',
-        'electron-app/gen-webpack*.js',
-        '!electron-app/webpack.config.js',
+        'electron-app/*',
         'plugins/*',
         'arduino-ide-extension/src/node/cli-protocol',
     ],

.github/workflows/build.yml

@@ -1,11 +1,9 @@
 name: Arduino IDE
 
 on:
-  create:
   push:
     branches:
       - main
-      - '[0-9]+.[0-9]+.x'
     paths-ignore:
       - '.github/**'
       - '!.github/workflows/build.yml'
@@ -36,34 +34,8 @@ env:
   CHANGELOG_ARTIFACTS: changelog
 
 jobs:
-  run-determination:
-    runs-on: ubuntu-latest
-    outputs:
-      result: ${{ steps.determination.outputs.result }}
-    permissions: {}
-    steps:
-      - name: Determine if the rest of the workflow should run
-        id: determination
-        run: |
-          RELEASE_BRANCH_REGEX="refs/heads/[0-9]+.[0-9]+.x"
-          # The `create` event trigger doesn't support `branches` filters, so it's necessary to use Bash instead.
-          if [[
-            "${{ github.event_name }}" != "create" ||
-            "${{ github.ref }}" =~ $RELEASE_BRANCH_REGEX
-          ]]; then
-            # Run the other jobs.
-            RESULT="true"
-          else
-            # There is no need to run the other jobs.
-            RESULT="false"
-          fi
-
-          echo "result=$RESULT" >> $GITHUB_OUTPUT
-
   build:
     name: build (${{ matrix.config.os }})
-    needs: run-determination
-    if: needs.run-determination.outputs.result == 'true'
     strategy:
       matrix:
         config:
@@ -85,12 +57,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Install Node.js 16.14
+      - name: Install Node.js 16.x
         uses: actions/setup-node@v3
         with:
-          node-version: '16.14'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
-          cache: 'yarn'
 
       - name: Install Python 3.x
         uses: actions/setup-python@v4
@@ -134,24 +105,15 @@ jobs:
           if [ "${{ runner.OS }}" = "Windows" ]; then
             npm config set msvs_version 2017 --global
           fi
-
           npx node-gyp install
-          yarn install --immutable
-
-          yarn --cwd arduino-ide-extension build
-          yarn test
-          yarn --cwd arduino-ide-extension test:slow
-          yarn --cwd arduino-ide-extension lint
-
-          yarn --cwd electron-app rebuild
-          yarn --cwd electron-app build
-          yarn --cwd electron-app package
+          yarn --cwd ./electron/packager/
+          yarn --cwd ./electron/packager/ package
 
       - name: Upload [GitHub Actions]
         uses: actions/upload-artifact@v3
         with:
           name: ${{ env.JOB_TRANSFER_ARTIFACT }}
-          path: electron-app/dist/build-artifacts
+          path: electron/build/dist/build-artifacts/
 
   artifacts:
     name: ${{ matrix.artifact.name }} artifact
@@ -274,7 +236,7 @@ jobs:
           echo "TAG_NAME=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
 
       - name: Publish Release [GitHub]
-        uses: svenstaro/upload-release-action@2.7.0
+        uses: svenstaro/upload-release-action@2.5.0
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           release_name: ${{ steps.tag_name.outputs.TAG_NAME }}

.github/workflows/check-certificates.yml

@@ -3,7 +3,6 @@ name: Check Certificates
 
 # See: https://docs.github.com/en/actions/reference/events-that-trigger-workflows
 on:
-  create:
   push:
     paths:
       - '.github/workflows/check-certificates.ya?ml'
@@ -21,49 +20,12 @@ env:
   EXPIRATION_WARNING_PERIOD: 30
 
 jobs:
-  run-determination:
-    runs-on: ubuntu-latest
-    outputs:
-      result: ${{ steps.determination.outputs.result }}
-    steps:
-      - name: Determine if the rest of the workflow should run
-        id: determination
-        run: |
-          RELEASE_BRANCH_REGEX="refs/heads/[0-9]+.[0-9]+.x"
-          REPO_SLUG="arduino/arduino-ide"
-          if [[
-            (
-              # Only run on branch creation when it is a release branch.
-              # The `create` event trigger doesn't support `branches` filters, so it's necessary to use Bash instead.
-              "${{ github.event_name }}" != "create" ||
-              "${{ github.ref }}" =~ $RELEASE_BRANCH_REGEX
-            ) &&
-            (
-              # Only run when the workflow will have access to the certificate secrets.
-              # This could be done via a GitHub Actions workflow conditional, but makes more sense to do it here as well.
-              (
-                "${{ github.event_name }}" != "pull_request" &&
-                "${{ github.repository }}" == "$REPO_SLUG"
-              ) ||
-              (
-                "${{ github.event_name }}" == "pull_request" &&
-                "${{ github.event.pull_request.head.repo.full_name }}" == "$REPO_SLUG"
-              )
-            )
-          ]]; then
-            # Run the other jobs.
-            RESULT="true"
-          else
-            # There is no need to run the other jobs.
-            RESULT="false"
-          fi
-
-          echo "result=$RESULT" >> $GITHUB_OUTPUT
-
   check-certificates:
     name: ${{ matrix.certificate.identifier }}
-    needs: run-determination
-    if: needs.run-determination.outputs.result == 'true'
+    # Only run when the workflow will have access to the certificate secrets.
+    if: >
+      (github.event_name != 'pull_request' && github.repository == 'arduino/arduino-ide') ||
+      (github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == 'arduino/arduino-ide')
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false

.github/workflows/check-i18n-task.yml

@@ -6,7 +6,6 @@ env:
 
 # See: https://docs.github.com/en/actions/reference/events-that-trigger-workflows
 on:
-  create:
   push:
     paths:
       - '.github/workflows/check-i18n-task.ya?ml'
@@ -23,47 +22,18 @@ on:
   repository_dispatch:
 
 jobs:
-  run-determination:
-    runs-on: ubuntu-latest
-    outputs:
-      result: ${{ steps.determination.outputs.result }}
-    permissions: {}
-    steps:
-      - name: Determine if the rest of the workflow should run
-        id: determination
-        run: |
-          RELEASE_BRANCH_REGEX="refs/heads/[0-9]+.[0-9]+.x"
-          TAG_REGEX="refs/tags/.*"
-          # The `create` event trigger doesn't support `branches` filters, so it's necessary to use Bash instead.
-          if [[
-            ("${{ github.event_name }}" != "create" ||
-            "${{ github.ref }}" =~ $RELEASE_BRANCH_REGEX) &&
-            ! "${{ github.ref }}" =~ $TAG_REGEX
-          ]]; then
-            # Run the other jobs.
-            RESULT="true"
-          else
-            # There is no need to run the other jobs.
-            RESULT="false"
-          fi
-
-          echo "result=$RESULT" >> $GITHUB_OUTPUT
-
   check:
-    needs: run-determination
-    if: needs.run-determination.outputs.result == 'true'
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Install Node.js 16.14
+      - name: Install Node.js 16.x
         uses: actions/setup-node@v3
         with:
-          node-version: '16.14'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
-          cache: 'yarn'
 
       - name: Install Go
         uses: actions/setup-go@v4
@@ -77,7 +47,7 @@ jobs:
           version: 3.x
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

.github/workflows/i18n-nightly-push.yml

@@ -16,12 +16,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Install Node.js 16.14
+      - name: Install Node.js 16.x
         uses: actions/setup-node@v3
         with:
-          node-version: '16.14'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
-          cache: 'yarn'
 
       - name: Install Go
         uses: actions/setup-go@v4
@@ -35,7 +34,7 @@ jobs:
           version: 3.x
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn
 
       - name: Run i18n:push script
         run: yarn run i18n:push

.github/workflows/i18n-weekly-pull.yml

@@ -16,12 +16,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Install Node.js 16.14
+      - name: Install Node.js 16.x
         uses: actions/setup-node@v3
         with:
-          node-version: '16.14'
+          node-version: '16.x'
           registry-url: 'https://registry.npmjs.org'
-          cache: 'yarn'
 
       - name: Install Go
         uses: actions/setup-go@v4
@@ -35,7 +34,7 @@ jobs:
           version: 3.x
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn
 
       - name: Run i18n:pull script
         run: yarn run i18n:pull

.github/workflows/themes-weekly-pull.yml

@@ -23,7 +23,6 @@ jobs:
         with:
           node-version: ${{ env.NODE_VERSION }}
           registry-url: 'https://registry.npmjs.org'
-          cache: 'yarn'
 
       - name: Install Go
         uses: actions/setup-go@v4
@@ -37,7 +36,7 @@ jobs:
           version: 3.x
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: yarn
 
       - name: Run themes:pull script
         run: yarn run themes:pull

.gitignore

@@ -1,22 +1,25 @@
 node_modules/
+# .node_modules is a hack for the electron builder.
+.node_modules/
 lib/
 downloads/
-resources/
+build/
 arduino-ide-extension/Examples/
+!electron/build/
 src-gen/
+webpack.config.js
 gen-webpack.config.js
-gen-webpack.node.config.js
 .DS_Store
 # switching from `electron` to `browser` in dev mode.
 .browser_modules
 yarn*.log
 # For the VS Code extensions used by Theia.
-electron-app/plugins
+plugins
 # the tokens folder for the themes
 scripts/themes/tokens
+# environment variables
+.env
 # content trace files for electron
 electron-app/traces
 # any Arduino LS generated log files
 inols*.log
-# The electron-builder output.
-electron-app/dist

.vscode/launch.json

@@ -4,55 +4,20 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "App",
-      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
+      "name": "App (Electron) [Dev]",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
       "windows": {
-        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd",
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
       },
       "cwd": "${workspaceFolder}/electron-app",
       "args": [
         ".",
         "--log-level=debug",
         "--hostname=localhost",
-        "--app-project-path=${workspaceFolder}/electron-app",
+        "--app-project-path=${workspaceRoot}/electron-app",
         "--remote-debugging-port=9222",
         "--no-app-auto-install",
-        "--plugins=local-dir:./plugins",
-        "--hosted-plugin-inspect=9339",
-        "--no-ping-timeout",
-      ],
-      "env": {
-        "NODE_ENV": "development"
-      },
-      "sourceMaps": true,
-      "outFiles": [
-        "${workspaceFolder}/electron-app/lib/backend/electron-main.js",
-        "${workspaceFolder}/electron-app/lib/backend/main.js",
-        "${workspaceFolder}/electron-app/lib/**/*.js",
-        "${workspaceFolder}/arduino-ide-extension/lib/**/*.js",
-        "${workspaceFolder}/node_modules/@theia/**/*.js"
-      ],
-      "smartStep": true,
-      "internalConsoleOptions": "openOnSessionStart",
-      "outputCapture": "std"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "App [Dev]",
-      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
-      "windows": {
-        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd",
-      },
-      "cwd": "${workspaceFolder}/electron-app",
-      "args": [
-        ".",
-        "--log-level=debug",
-        "--hostname=localhost",
-        "--app-project-path=${workspaceFolder}/electron-app",
-        "--remote-debugging-port=9222",
-        "--no-app-auto-install",
-        "--plugins=local-dir:./plugins",
+        "--plugins=local-dir:../plugins",
         "--hosted-plugin-inspect=9339",
         "--content-trace",
         "--open-devtools",
@@ -63,11 +28,46 @@
       },
       "sourceMaps": true,
       "outFiles": [
-        "${workspaceFolder}/electron-app/lib/backend/electron-main.js",
-        "${workspaceFolder}/electron-app/lib/backend/main.js",
-        "${workspaceFolder}/electron-app/lib/**/*.js",
-        "${workspaceFolder}/arduino-ide-extension/lib/**/*.js",
-        "${workspaceFolder}/node_modules/@theia/**/*.js"
+        "${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",
+        "${workspaceRoot}/node_modules/@theia/**/*.js"
+      ],
+      "smartStep": true,
+      "internalConsoleOptions": "openOnSessionStart",
+      "outputCapture": "std"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "App (Electron)",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
+      },
+      "cwd": "${workspaceFolder}/electron-app",
+      "args": [
+        ".",
+        "--log-level=debug",
+        "--hostname=localhost",
+        "--app-project-path=${workspaceRoot}/electron-app",
+        "--remote-debugging-port=9222",
+        "--no-app-auto-install",
+        "--plugins=local-dir:../plugins",
+        "--hosted-plugin-inspect=9339",
+        "--no-ping-timeout",
+      ],
+      "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",
+        "${workspaceRoot}/node_modules/@theia/**/*.js"
       ],
       "smartStep": true,
       "internalConsoleOptions": "openOnSessionStart",
@@ -84,7 +84,7 @@
       "type": "node",
       "request": "launch",
       "name": "Run Test [current]",
-      "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
       "args": [
         "--require",
         "reflect-metadata/Reflect",
@@ -94,16 +94,8 @@
         "--colors",
         "**/${fileBasenameNoExtension}.js"
       ],
-      "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",
-        "${workspaceRoot}/node_modules/@theia/**/*.js"
-      ],
       "env": {
-        "TS_NODE_PROJECT": "${workspaceFolder}/tsconfig.json",
-        "IDE2_TEST": "true"
+        "TS_NODE_PROJECT": "${workspaceRoot}/tsconfig.json"
       },
       "sourceMaps": true,
       "smartStep": true,
@@ -116,12 +108,19 @@
       "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"
+    }
   ],
   "compounds": [
     {
       "name": "Launch Electron Backend & Frontend",
       "configurations": [
-        "App",
+        "App (Electron)",
         "Attach to Electron Frontend"
       ]
     }

.vscode/tasks.json

@@ -2,7 +2,7 @@
   "version": "2.0.0",
   "tasks": [
     {
-      "label": "Rebuild App",
+      "label": "Arduino IDE - Rebuild Electron App",
       "type": "shell",
       "command": "yarn rebuild:browser && yarn rebuild:electron",
       "group": "build",
@@ -13,7 +13,7 @@
       }
     },
     {
-      "label": "Watch Extension",
+      "label": "Arduino IDE - Watch IDE Extension",
       "type": "shell",
       "command": "yarn --cwd ./arduino-ide-extension watch",
       "group": "build",
@@ -24,7 +24,7 @@
       }
     },
     {
-      "label": "Watch App",
+      "label": "Arduino IDE - Watch Electron App",
       "type": "shell",
       "command": "yarn --cwd ./electron-app watch",
       "group": "build",
@@ -35,11 +35,11 @@
       }
     },
     {
-      "label": "Watch All",
+      "label": "Arduino IDE - Watch All [Electron]",
       "type": "shell",
       "dependsOn": [
-        "Watch Extension",
-        "Watch App"
+        "Arduino IDE - Watch IDE Extension",
+        "Arduino IDE - Watch Electron App"
       ]
     }
   ]

arduino-ide-extension/package.json

@@ -1,73 +1,74 @@
 {
   "name": "arduino-ide-extension",
-  "version": "2.2.0",
+  "version": "2.1.1",
   "description": "An extension for Theia building the Arduino IDE",
   "license": "AGPL-3.0-or-later",
   "scripts": {
-    "prepare": "yarn download-cli && yarn download-fwuploader && yarn download-ls && yarn copy-i18n && yarn download-examples",
+    "prepare": "yarn download-cli && yarn download-fwuploader && yarn download-ls && yarn copy-i18n && yarn clean && yarn download-examples && yarn build && yarn test",
     "clean": "rimraf lib",
     "compose-changelog": "node ./scripts/compose-changelog.js",
     "download-cli": "node ./scripts/download-cli.js",
     "download-fwuploader": "node ./scripts/download-fwuploader.js",
-    "copy-i18n": "ncp ../i18n ./src/node/resources/i18n",
+    "copy-i18n": "npx ncp ../i18n ./build/i18n",
     "download-ls": "node ./scripts/download-ls.js",
     "download-examples": "node ./scripts/download-examples.js",
     "generate-protocol": "node ./scripts/generate-protocol.js",
     "lint": "eslint",
-    "prebuild": "rimraf lib",
-    "build": "tsc",
-    "build:dev": "yarn build",
-    "postbuild": "ncp ./src/node/cli-protocol/ ./lib/node/cli-protocol/",
+    "build": "tsc && ncp ./src/node/cli-protocol/ ./lib/node/cli-protocol/ && yarn lint",
     "watch": "tsc -w",
-    "test": "cross-env IDE2_TEST=true mocha \"./lib/test/**/*.test.js\"",
-    "test:slow": "cross-env IDE2_TEST=true mocha \"./lib/test/**/*.slow-test.js\" --slow 5000"
+    "test": "mocha \"./lib/test/**/*.test.js\"",
+    "test:slow": "mocha \"./lib/test/**/*.slow-test.js\" --slow 5000",
+    "test:watch": "mocha --watch --watch-files lib \"./lib/test/**/*.test.js\""
   },
   "dependencies": {
-    "@grpc/grpc-js": "^1.8.14",
-    "@theia/application-package": "1.39.0",
-    "@theia/core": "1.39.0",
-    "@theia/debug": "1.39.0",
-    "@theia/editor": "1.39.0",
-    "@theia/electron": "1.39.0",
-    "@theia/filesystem": "1.39.0",
-    "@theia/keymaps": "1.39.0",
-    "@theia/markers": "1.39.0",
-    "@theia/messages": "1.39.0",
-    "@theia/monaco": "1.39.0",
-    "@theia/monaco-editor-core": "1.72.3",
-    "@theia/navigator": "1.39.0",
-    "@theia/outline-view": "1.39.0",
-    "@theia/output": "1.39.0",
-    "@theia/plugin-ext": "1.39.0",
-    "@theia/preferences": "1.39.0",
-    "@theia/scm": "1.39.0",
-    "@theia/search-in-workspace": "1.39.0",
-    "@theia/terminal": "1.39.0",
-    "@theia/typehierarchy": "1.39.0",
-    "@theia/workspace": "1.39.0",
+    "@grpc/grpc-js": "^1.6.7",
+    "@theia/application-package": "1.31.1",
+    "@theia/core": "1.31.1",
+    "@theia/debug": "1.31.1",
+    "@theia/editor": "1.31.1",
+    "@theia/electron": "1.31.1",
+    "@theia/filesystem": "1.31.1",
+    "@theia/keymaps": "1.31.1",
+    "@theia/markers": "1.31.1",
+    "@theia/messages": "1.31.1",
+    "@theia/monaco": "1.31.1",
+    "@theia/monaco-editor-core": "1.67.2",
+    "@theia/navigator": "1.31.1",
+    "@theia/outline-view": "1.31.1",
+    "@theia/output": "1.31.1",
+    "@theia/plugin-ext": "1.31.1",
+    "@theia/preferences": "1.31.1",
+    "@theia/scm": "1.31.1",
+    "@theia/search-in-workspace": "1.31.1",
+    "@theia/terminal": "1.31.1",
+    "@theia/typehierarchy": "1.31.1",
+    "@theia/workspace": "1.31.1",
     "@tippyjs/react": "^4.2.5",
     "@types/auth0-js": "^9.14.0",
     "@types/btoa": "^1.2.3",
     "@types/dateformat": "^3.0.1",
+    "@types/deepmerge": "^2.2.0",
+    "@types/glob": "^7.2.0",
     "@types/google-protobuf": "^3.7.2",
     "@types/js-yaml": "^3.12.2",
-    "@types/jsdom": "^21.1.1",
+    "@types/keytar": "^4.4.0",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node-fetch": "^2.5.7",
     "@types/p-queue": "^2.3.1",
     "@types/ps-tree": "^1.1.0",
     "@types/react-tabs": "^2.3.2",
     "@types/temp": "^0.8.34",
+    "@types/which": "^1.3.1",
+    "@vscode/debugprotocol": "^1.51.0",
     "arduino-serial-plotter-webapp": "0.2.0",
     "async-mutex": "^0.3.0",
     "auth0-js": "^9.14.0",
     "btoa": "^1.2.1",
     "classnames": "^2.3.1",
-    "cpy": "^10.0.0",
+    "cpy": "^8.1.2",
     "cross-fetch": "^3.1.5",
     "dateformat": "^3.0.3",
-    "deepmerge": "^4.2.2",
-    "drivelist": "^9.2.4",
+    "deepmerge": "2.0.1",
     "electron-updater": "^4.6.5",
     "fast-json-stable-stringify": "^2.1.0",
     "fast-safe-stringify": "^2.1.1",
@@ -75,9 +76,8 @@
     "glob": "^7.1.6",
     "google-protobuf": "^3.20.1",
     "hash.js": "^1.1.7",
-    "is-online": "^10.0.0",
+    "is-online": "^9.0.1",
     "js-yaml": "^3.13.1",
-    "jsdom": "^21.1.1",
     "jsonc-parser": "^2.2.0",
     "just-diff": "^5.1.1",
     "jwt-decode": "^3.1.2",
@@ -85,11 +85,9 @@
     "lodash.debounce": "^4.0.8",
     "minimatch": "^3.1.2",
     "node-fetch": "^2.6.1",
-    "node-log-rotate": "^0.1.5",
     "open": "^8.0.6",
     "p-debounce": "^2.1.0",
     "p-queue": "^2.4.2",
-    "process": "^0.11.10",
     "ps-tree": "^1.2.0",
     "query-string": "^7.0.1",
     "react-disable": "^0.1.1",
@@ -103,34 +101,33 @@
     "temp": "^0.9.1",
     "temp-dir": "^2.0.0",
     "tree-kill": "^1.2.1",
-    "util": "^0.12.5",
-    "vscode-arduino-api": "^0.1.2"
+    "which": "^1.3.1"
   },
   "devDependencies": {
     "@octokit/rest": "^18.12.0",
     "@types/chai": "^4.2.7",
+    "@types/chai-string": "^1.4.2",
     "@types/mocha": "^5.2.7",
     "@types/react-window": "^1.8.5",
-    "@xhmikosr/downloader": "^13.0.1",
     "chai": "^4.2.0",
-    "cross-env": "^7.0.3",
+    "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_node_protoc_ts": "^4.1.0",
     "mocha": "^7.0.0",
     "mockdate": "^3.0.5",
     "moment": "^2.24.0",
     "ncp": "^2.0.0",
-    "rimraf": "^2.6.1",
+    "protoc": "^1.0.4",
     "shelljs": "^0.8.3",
     "uuid": "^3.2.1",
     "yargs": "^11.1.0"
   },
   "optionalDependencies": {
-    "grpc-tools": "^1.9.0",
-    "protoc": "^1.0.4"
+    "grpc-tools": "^1.9.0"
   },
   "mocha": {
     "require": [
@@ -150,9 +147,6 @@
     "examples"
   ],
   "theiaExtensions": [
-    {
-      "preload": "lib/electron-browser/preload"
-    },
     {
       "backend": "lib/node/arduino-ide-backend-module",
       "frontend": "lib/browser/arduino-ide-frontend-module"
@@ -163,25 +157,22 @@
     {
       "frontendElectron": "lib/electron-browser/theia/core/electron-window-module"
     },
-    {
-      "frontendElectron": "lib/electron-browser/electron-arduino-module"
-    },
     {
       "electronMain": "lib/electron-main/arduino-electron-main-module"
     }
   ],
   "arduino": {
-    "arduino-cli": {
-      "version": "0.34.0"
+    "cli": {
+      "version": "0.32.3"
     },
-    "arduino-fwuploader": {
-      "version": "2.4.0"
-    },
-    "arduino-language-server": {
-      "version": "0.7.4"
+    "fwuploader": {
+      "version": "2.2.2"
     },
     "clangd": {
       "version": "14.0.0"
+    },
+    "languageServer": {
+      "version": "0.7.4"
     }
   }
 }

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

@@ -19,7 +19,7 @@
       return undefined;
     }
 
-    const cli = arduino['arduino-cli'];
+    const { cli } = arduino;
     if (!cli) {
       return undefined;
     }
@@ -34,15 +34,9 @@
   }
 
   const { platform, arch } = process;
-  const resourcesFolder = path.join(
-    __dirname,
-    '..',
-    'src',
-    'node',
-    'resources'
-  );
+  const buildFolder = path.join(__dirname, '..', 'build');
   const cliName = `arduino-cli${platform === 'win32' ? '.exe' : ''}`;
-  const destinationPath = path.join(resourcesFolder, cliName);
+  const destinationPath = path.join(buildFolder, cliName);
 
   if (typeof version === 'string') {
     const suffix = (() => {

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

@@ -4,45 +4,33 @@
 const version = '1.10.0';
 
 (async () => {
-  const os = require('node:os');
-  const { existsSync, promises: fs } = require('node:fs');
-  const path = require('node:path');
+  const os = require('os');
+  const { promises: fs } = require('fs');
+  const path = require('path');
   const shell = require('shelljs');
   const { v4 } = require('uuid');
-  const { exec } = require('./utils');
-
-  const destination = path.join(
-    __dirname,
-    '..',
-    'src',
-    'node',
-    'resources',
-    'Examples'
-  );
-  if (existsSync(destination)) {
-    shell.echo(
-      `Skipping Git checkout of the examples because the repository already exists: ${destination}`
-    );
-    return;
-  }
 
   const repository = path.join(os.tmpdir(), `${v4()}-arduino-examples`);
   if (shell.mkdir('-p', repository).code !== 0) {
     shell.exit(1);
   }
 
-  exec(
-    'git',
-    ['clone', 'https://github.com/arduino/arduino-examples.git', repository],
-    shell
-  );
+  if (
+    shell.exec(
+      `git clone https://github.com/arduino/arduino-examples.git ${repository}`
+    ).code !== 0
+  ) {
+    shell.exit(1);
+  }
 
-  exec(
-    'git',
-    ['-C', repository, 'checkout', `tags/${version}`, '-b', version],
-    shell
-  );
+  if (
+    shell.exec(`git -C ${repository} checkout tags/${version} -b ${version}`)
+      .code !== 0
+  ) {
+    shell.exit(1);
+  }
 
+  const destination = path.join(__dirname, '..', 'Examples');
   shell.mkdir('-p', destination);
   shell.cp('-fR', path.join(repository, 'examples', '*'), destination);
 

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

@@ -1,11 +1,12 @@
 // @ts-check
 
 (async () => {
-  const path = require('node:path');
+  const fs = require('fs');
+  const path = require('path');
+  const temp = require('temp');
   const shell = require('shelljs');
   const semver = require('semver');
   const downloader = require('./downloader');
-  const { taskBuildFromGit } = require('./utils');
 
   const version = (() => {
     const pkg = require(path.join(__dirname, '..', 'package.json'));
@@ -18,7 +19,7 @@
       return undefined;
     }
 
-    const fwuploader = arduino['arduino-fwuploader'];
+    const { fwuploader } = arduino;
     if (!fwuploader) {
       return undefined;
     }
@@ -35,17 +36,11 @@
   }
 
   const { platform, arch } = process;
-  const resourcesFolder = path.join(
-    __dirname,
-    '..',
-    'src',
-    'node',
-    'resources'
-  );
+  const buildFolder = path.join(__dirname, '..', 'build');
   const fwuploderName = `arduino-fwuploader${
     platform === 'win32' ? '.exe' : ''
   }`;
-  const destinationPath = path.join(resourcesFolder, fwuploderName);
+  const destinationPath = path.join(buildFolder, fwuploderName);
 
   if (typeof version === 'string') {
     const suffix = (() => {
@@ -91,6 +86,81 @@
       shell.exit(1);
     }
   } else {
-    taskBuildFromGit(version, destinationPath, 'Firmware Uploader');
+    // We assume an object with `owner`, `repo`, commitish?` properties.
+    const { owner, repo, commitish } = version;
+    if (!owner) {
+      shell.echo(`Could not retrieve 'owner' from ${JSON.stringify(version)}`);
+      shell.exit(1);
+    }
+    if (!repo) {
+      shell.echo(`Could not retrieve 'repo' from ${JSON.stringify(version)}`);
+      shell.exit(1);
+    }
+    const url = `https://github.com/${owner}/${repo}.git`;
+    shell.echo(
+      `Building Firmware Uploader from ${url}. Commitish: ${
+        commitish ? commitish : 'HEAD'
+      }`
+    );
+
+    if (fs.existsSync(destinationPath)) {
+      shell.echo(
+        `Skipping the Firmware Uploader build because it already exists: ${destinationPath}`
+      );
+      return;
+    }
+
+    if (shell.mkdir('-p', buildFolder).code !== 0) {
+      shell.echo('Could not create build folder.');
+      shell.exit(1);
+    }
+
+    const tempRepoPath = temp.mkdirSync();
+    shell.echo(`>>> Cloning Firmware Uploader source to ${tempRepoPath}...`);
+    if (shell.exec(`git clone ${url} ${tempRepoPath}`).code !== 0) {
+      shell.exit(1);
+    }
+    shell.echo('<<< Cloned Firmware Uploader repo.');
+
+    if (commitish) {
+      shell.echo(`>>> Checking out ${commitish}...`);
+      if (
+        shell.exec(`git -C ${tempRepoPath} checkout ${commitish}`).code !== 0
+      ) {
+        shell.exit(1);
+      }
+      shell.echo(`<<< Checked out ${commitish}.`);
+    }
+
+    shell.echo(`>>> Building the Firmware Uploader...`);
+    if (shell.exec('go build', { cwd: tempRepoPath }).code !== 0) {
+      shell.exit(1);
+    }
+    shell.echo('<<< Firmware Uploader build done.');
+
+    if (!fs.existsSync(path.join(tempRepoPath, fwuploderName))) {
+      shell.echo(
+        `Could not find the Firmware Uploader at ${path.join(
+          tempRepoPath,
+          fwuploderName
+        )}.`
+      );
+      shell.exit(1);
+    }
+
+    const builtFwUploaderPath = path.join(tempRepoPath, fwuploderName);
+    shell.echo(
+      `>>> Copying Firmware Uploader from ${builtFwUploaderPath} to ${destinationPath}...`
+    );
+    if (shell.cp(builtFwUploaderPath, destinationPath).code !== 0) {
+      shell.exit(1);
+    }
+    shell.echo(`<<< Copied the Firmware Uploader.`);
+
+    shell.echo('<<< Verifying Firmware Uploader...');
+    if (!fs.existsSync(destinationPath)) {
+      shell.exit(1);
+    }
+    shell.echo('>>> Verified Firmware Uploader.');
   }
 })();

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

@@ -16,8 +16,7 @@
     const { arduino } = pkg;
     if (!arduino) return [undefined, undefined];
 
-    const { clangd } = arduino;
-    const languageServer = arduino['arduino-language-server'];
+    const { languageServer, clangd } = arduino;
     if (!languageServer) return [undefined, undefined];
     if (!clangd) return [undefined, undefined];
 
@@ -63,50 +62,35 @@
   const force = yargs['force-download'];
   const { platform, arch } = process;
   const platformArch = platform + '-' + arch;
-  const resourcesFolder = path.join(
-    __dirname,
-    '..',
-    'src',
-    'node',
-    'resources'
-  );
+  const build = path.join(__dirname, '..', 'build');
   const lsExecutablePath = path.join(
-    resourcesFolder,
+    build,
     `arduino-language-server${platform === 'win32' ? '.exe' : ''}`
   );
   let clangdExecutablePath, clangFormatExecutablePath, lsSuffix, clangdSuffix;
 
   switch (platformArch) {
     case 'darwin-x64':
-      clangdExecutablePath = path.join(resourcesFolder, 'clangd');
-      clangFormatExecutablePath = path.join(resourcesFolder, 'clang-format');
+      clangdExecutablePath = path.join(build, 'clangd');
+      clangFormatExecutablePath = path.join(build, 'clang-format');
       lsSuffix = 'macOS_64bit.tar.gz';
       clangdSuffix = 'macOS_64bit';
       break;
     case 'darwin-arm64':
-      clangdExecutablePath = path.join(resourcesFolder, 'clangd');
-      clangFormatExecutablePath = path.join(resourcesFolder, 'clang-format');
+      clangdExecutablePath = path.join(build, 'clangd');
+      clangFormatExecutablePath = path.join(build, 'clang-format');
       lsSuffix = 'macOS_ARM64.tar.gz';
       clangdSuffix = 'macOS_ARM64';
       break;
     case 'linux-x64':
-      clangdExecutablePath = path.join(resourcesFolder, 'clangd');
-      clangFormatExecutablePath = path.join(resourcesFolder, 'clang-format');
+      clangdExecutablePath = path.join(build, 'clangd');
+      clangFormatExecutablePath = path.join(build, 'clang-format');
       lsSuffix = 'Linux_64bit.tar.gz';
       clangdSuffix = 'Linux_64bit';
       break;
-    case 'linux-arm64':
-      clangdExecutablePath = path.join(resourcesFolder, 'clangd');
-      clangFormatExecutablePath = path.join(resourcesFolder, 'clang-format');
-      lsSuffix = 'Linux_ARM64.tar.gz';
-      clangdSuffix = 'Linux_ARM64';
-      break;
     case 'win32-x64':
-      clangdExecutablePath = path.join(resourcesFolder, 'clangd.exe');
-      clangFormatExecutablePath = path.join(
-        resourcesFolder,
-        'clang-format.exe'
-      );
+      clangdExecutablePath = path.join(build, 'clangd.exe');
+      clangFormatExecutablePath = path.join(build, 'clang-format.exe');
       lsSuffix = 'Windows_64bit.zip';
       clangdSuffix = 'Windows_64bit';
       break;
@@ -126,31 +110,20 @@
         ? 'nightly/arduino-language-server'
         : 'arduino-language-server_' + lsVersion
     }_${lsSuffix}`;
-    downloader.downloadUnzipAll(
-      lsUrl,
-      resourcesFolder,
-      lsExecutablePath,
-      force
-    );
+    downloader.downloadUnzipAll(lsUrl, build, lsExecutablePath, force);
   } else {
     goBuildFromGit(lsVersion, lsExecutablePath, 'language-server');
   }
 
   const clangdUrl = `https://downloads.arduino.cc/tools/clangd_${clangdVersion}_${clangdSuffix}.tar.bz2`;
-  downloader.downloadUnzipAll(
-    clangdUrl,
-    resourcesFolder,
-    clangdExecutablePath,
-    force,
-    {
+  downloader.downloadUnzipAll(clangdUrl, build, clangdExecutablePath, force, {
     strip: 1,
-    }
-  ); // `strip`: the new clangd (12.x) is zipped into a folder, so we have to strip the outmost folder.
+  }); // `strip`: the new clangd (12.x) is zipped into a folder, so we have to strip the outmost folder.
 
   const clangdFormatUrl = `https://downloads.arduino.cc/tools/clang-format_${clangdVersion}_${clangdSuffix}.tar.bz2`;
   downloader.downloadUnzipAll(
     clangdFormatUrl,
-    resourcesFolder,
+    build,
     clangFormatExecutablePath,
     force,
     {

arduino-ide-extension/scripts/downloader.js

@@ -1,6 +1,7 @@
 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');
@@ -46,7 +47,6 @@ exports.downloadUnzipFile = async (
   }
 
   shell.echo(`>>> Downloading from '${url}'...`);
-  const { default: download } = await import('@xhmikosr/downloader');
   const data = await download(url);
   shell.echo(`<<< Download succeeded.`);
 
@@ -107,7 +107,6 @@ exports.downloadUnzipAll = async (
   }
 
   shell.echo(`>>> Downloading from '${url}'...`);
-  const { default: download } = await import('@xhmikosr/downloader');
   const data = await download(url);
   shell.echo(`<<< Download succeeded.`);
 

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

@@ -1,13 +1,15 @@
 // @ts-check
 
 (async () => {
-  const os = require('node:os');
-  const path = require('node:path');
-  const { exec } = require('./utils');
+
+    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 repository = path.join(os.tmpdir(), `${v4()}-arduino-cli`);
     if (shell.mkdir('-p', repository).code !== 0) {
@@ -21,28 +23,23 @@
             shell.exit(1);
         }
 
-    const defaultVersion = {
-      owner: 'arduino',
-      repo: 'arduino-cli',
-      commitish: undefined,
-    };
         const { arduino } = pkg;
         if (!arduino) {
-      return defaultVersion;
+            return { owner: 'arduino', repo: 'arduino-cli' };
         }
 
-    const cli = arduino['arduino-cli'];
+        const { cli } = arduino;
         if (!cli) {
-      return defaultVersion;
+            return { owner: 'arduino', repo: 'arduino-cli' };
         }
 
         const { version } = cli;
         if (!version) {
-      return defaultVersion;
+            return { owner: 'arduino', repo: 'arduino-cli' };
         }
 
         if (typeof version === 'string') {
-      return defaultVersion;
+            return { owner: 'arduino', repo: 'arduino-cli' };
         }
 
         // We assume an object with `owner`, `repo`, commitish?` properties.
@@ -61,22 +58,15 @@
 
     const url = `https://github.com/${owner}/${repo}.git`;
     shell.echo(`>>> Cloning repository from '${url}'...`);
-  exec('git', ['clone', url, repository], shell);
+    if (shell.exec(`git clone ${url} ${repository}`).code !== 0) {
+        shell.exit(1);
+    }
     shell.echo(`<<< Repository cloned.`);
 
     const { platform } = process;
-  const resourcesFolder = path.join(
-    __dirname,
-    '..',
-    'src',
-    'node',
-    'resources'
-  );
-  const cli = path.join(
-    resourcesFolder,
-    `arduino-cli${platform === 'win32' ? '.exe' : ''}`
-  );
-  const versionJson = exec(cli, ['version', '--format', 'json'], shell).trim();
+    const build = path.join(__dirname, '..', 'build');
+    const cli = path.join(build, `arduino-cli${platform === 'win32' ? '.exe' : ''}`);
+    const versionJson = shell.exec(`${cli} version --format json`).trim();
     if (!versionJson) {
         shell.echo(`Could not retrieve the CLI version from ${cli}.`);
         shell.exit(1);
@@ -97,94 +87,70 @@
     */
     const versionObject = JSON.parse(versionJson);
     const version = versionObject.VersionString;
-  if (
-    version &&
-    !version.startsWith('nightly-') &&
-    version !== '0.0.0-git' &&
-    version !== 'git-snapshot'
-  ) {
+    if (version && !version.startsWith('nightly-') && version !== '0.0.0-git' && version !== 'git-snapshot') {
         shell.echo(`>>> Checking out tagged version: '${version}'...`);
-    exec('git', ['-C', repository, 'fetch', '--all', '--tags'], shell);
-    exec(
-      'git',
-      ['-C', repository, 'checkout', `tags/${version}`, '-b', version],
-      shell
-    );
-    shell.echo(`<<< Checked out tagged version: '${version}'.`);
+        shell.exec(`git -C ${repository} fetch --all --tags`);
+        if (shell.exec(`git -C ${repository} checkout tags/${version} -b ${version}`).code !== 0) {
+            shell.exit(1);
+        }
+        shell.echo(`<<< Checked out tagged version: '${commitish}'.`);
     } else if (commitish) {
-    shell.echo(
-      `>>> Checking out commitish from 'package.json': '${commitish}'...`
-    );
-    exec('git', ['-C', repository, 'checkout', commitish], shell);
-    shell.echo(
-      `<<< Checked out commitish from 'package.json': '${commitish}'.`
-    );
+        shell.echo(`>>> Checking out commitish from 'package.json': '${commitish}'...`);
+        if (shell.exec(`git -C ${repository} checkout ${commitish}`).code !== 0) {
+            shell.exit(1);
+        }
+        shell.echo(`<<< Checked out commitish from 'package.json': '${commitish}'.`);
     } else if (versionObject.Commit) {
-    shell.echo(
-      `>>> Checking out commitish from the CLI: '${versionObject.Commit}'...`
-    );
-    exec('git', ['-C', repository, 'checkout', versionObject.Commit], shell);
-    shell.echo(
-      `<<< Checked out commitish from the CLI: '${versionObject.Commit}'.`
-    );
+        shell.echo(`>>> Checking out commitish from the CLI: '${versionObject.Commit}'...`);
+        if (shell.exec(`git -C ${repository} checkout ${versionObject.Commit}`).code !== 0) {
+            shell.exit(1);
+        }
+        shell.echo(`<<< Checked out commitish from the CLI: '${versionObject.Commit}'.`);
     } else {
         shell.echo(`WARN: no 'git checkout'. Generating from the HEAD revision.`);
     }
 
     shell.echo('>>> Generating TS/JS API from:');
-  exec('git', ['-C', repository, 'rev-parse', '--abbrev-ref', 'HEAD'], shell);
+    if (shell.exec(`git -C ${repository} rev-parse --abbrev-ref HEAD`).code !== 0) {
+        shell.exit(1);
+    }
 
     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) =>
+    const protos = await new Promise(resolve =>
         glob('**/*.proto', { cwd: rpc }, (error, matches) => {
             if (error) {
-        shell.echo(error.stack ?? error.message);
+                shell.echo(error.stack);
                 resolve([]);
                 return;
             }
-      resolve(matches.map((filename) => path.join(rpc, filename)));
-    })
-  );
+            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.
-
-  exec(
-    'grpc_tools_node_protoc',
-    [
-      `--js_out=import_style=commonjs,binary:${out}`,
-      `--grpc_out=generate_package_definition:${out}`,
-      '-I',
-      rpc,
-      ...protos,
-    ],
-    shell
-  );
+    if (shell.exec(`grpc_tools_node_protoc \
+--js_out=import_style=commonjs,binary:${out} \
+--grpc_out=generate_package_definition:${out} \
+-I ${rpc} \
+${protos.join(' ')}`).code !== 0) {
+        shell.exit(1);
+    }
 
     // Generate the `.d.ts` files for JS.
-  exec(
-    path.join(protoc, `protoc${platform === 'win32' ? '.exe' : ''}`),
-    [
-      `--plugin=protoc-gen-ts=${path.resolve(
-        __dirname,
-        '..',
-        'node_modules',
-        '.bin',
-        `protoc-gen-ts${platform === 'win32' ? '.cmd' : ''}`
-      )}`,
-      `--ts_out=generate_package_definition:${out}`,
-      '-I',
-      rpc,
-      ...protos,
-    ],
-    shell
-  );
+    if (shell.exec(`protoc \
+--plugin=protoc-gen-ts=${path.resolve(__dirname, '..', 'node_modules', '.bin', `protoc-gen-ts${platform === 'win32' ? '.cmd' : ''}`)} \
+--ts_out=generate_package_definition:${out} \
+-I ${rpc} \
+${protos.join(' ')}`).code !== 0) {
+        shell.exit(1);
+    }
 
     shell.echo('<<< Generation was successful.');
+
 })();

arduino-ide-extension/scripts/utils.js

@@ -1,31 +1,3 @@
-// @ts-check
-
-const exec = (
-  /** @type {string} */ command,
-  /** @type {readonly string[]} */ args,
-  /** @type {import('shelljs')|undefined}*/ shell = undefined,
-  /** @type {import('node:child_process').ExecFileSyncOptionsWithStringEncoding|undefined} */ options = undefined
-) => {
-  try {
-    const stdout = require('node:child_process').execFileSync(
-      command,
-      args,
-      options ? options : { encoding: 'utf8' }
-    );
-    if (shell) {
-      shell.echo(stdout.trim());
-    }
-    return stdout;
-  } catch (err) {
-    if (shell) {
-      shell.echo(err instanceof Error ? err.message : String(err));
-      shell.exit(1);
-    }
-    throw err;
-  }
-};
-exports.exec = exec;
-
 /**
  * Clones something from GitHub and builds it with [`Task`](https://taskfile.dev/).
  *
@@ -49,15 +21,11 @@ exports.goBuildFromGit = (version, destinationPath, taskName) => {
 };
 
 /**
- * The `command` must be either `'go'` or `'task'`.
- * @param {string} command
- * @param {{ owner: any; repo: any; commitish: any; }} version
- * @param {string} destinationPath
- * @param {string} taskName
+ * The `command` is either `go` or `task`.
  */
 function buildFromGit(command, version, destinationPath, taskName) {
-  const fs = require('node:fs');
-  const path = require('node:path');
+  const fs = require('fs');
+  const path = require('path');
   const temp = require('temp');
   const shell = require('shelljs');
 
@@ -90,33 +58,31 @@ function buildFromGit(command, version, destinationPath, taskName) {
     return;
   }
 
-  const resourcesFolder = path.join(
-    __dirname,
-    '..',
-    'src',
-    'node',
-    'resources'
-  );
-  if (shell.mkdir('-p', resourcesFolder).code !== 0) {
-    shell.echo('Could not create resources folder.');
+  const buildFolder = path.join(__dirname, '..', 'build');
+  if (shell.mkdir('-p', buildFolder).code !== 0) {
+    shell.echo('Could not create build folder.');
     shell.exit(1);
   }
 
   const tempRepoPath = temp.mkdirSync();
   shell.echo(`>>> Cloning ${taskName} source to ${tempRepoPath}...`);
-  exec('git', ['clone', url, tempRepoPath], shell);
+  if (shell.exec(`git clone ${url} ${tempRepoPath}`).code !== 0) {
+    shell.exit(1);
+  }
   shell.echo(`<<< Cloned ${taskName} repo.`);
 
   if (commitish) {
     shell.echo(`>>> Checking out ${commitish}...`);
-    exec('git', ['-C', tempRepoPath, 'checkout', commitish], shell);
+    if (shell.exec(`git -C ${tempRepoPath} checkout ${commitish}`).code !== 0) {
+      shell.exit(1);
+    }
     shell.echo(`<<< Checked out ${commitish}.`);
   }
 
-  exec('git', ['-C', tempRepoPath, 'rev-parse', '--short', 'HEAD'], shell);
-
   shell.echo(`>>> Building the ${taskName}...`);
-  exec(command, ['build'], shell, { cwd: tempRepoPath, encoding: 'utf8' });
+  if (shell.exec(`${command} build`, { cwd: tempRepoPath }).code !== 0) {
+    shell.exit(1);
+  }
   shell.echo(`<<< Done ${taskName} build.`);
 
   const binName = path.basename(destinationPath);

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

@@ -1,16 +0,0 @@
-import type { Disposable } from '@theia/core/lib/common/disposable';
-import type { AppInfo } from '../electron-common/electron-arduino';
-import type { StartupTasks } from '../electron-common/startup-task';
-import type { Sketch } from './contributions/contribution';
-
-export type { AppInfo };
-
-export const AppService = Symbol('AppService');
-export interface AppService {
-  quit(): void;
-  info(): Promise<AppInfo>;
-  registerStartupTasksHandler(
-    handler: (tasks: StartupTasks) => void
-  ): Disposable;
-  scheduleDeletion(sketch: Sketch): void; // TODO: find a better place
-}

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

@@ -1,47 +1,41 @@
-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 { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
-import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
-import {
-  TabBarToolbarContribution,
-  TabBarToolbarRegistry,
-} from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import {
-  ColorTheme,
-  CssStyleCollector,
-  StylingParticipant,
-} from '@theia/core/lib/browser/styling-service';
-import {
-  CommandContribution,
-  CommandRegistry,
-} from '@theia/core/lib/common/command';
-import {
-  MAIN_MENU_BAR,
-  MenuContribution,
-  MenuModelRegistry,
-} from '@theia/core/lib/common/menu';
-import { MessageService } from '@theia/core/lib/common/message-service';
-import { nls } from '@theia/core/lib/common/nls';
-import { isHighContrast } from '@theia/core/lib/common/theme';
-import { ElectronWindowPreferences } from '@theia/core/lib/electron-browser/window/electron-window-preferences';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import {
   inject,
   injectable,
   postConstruct,
 } from '@theia/core/shared/inversify';
-import React from '@theia/core/shared/react';
-import { EditorCommands } from '@theia/editor/lib/browser/editor-command';
-import { EditorMainMenu } from '@theia/editor/lib/browser/editor-menu';
+import * as React from '@theia/core/shared/react';
+import {
+  MAIN_MENU_BAR,
+  MenuContribution,
+  MenuModelRegistry,
+} from '@theia/core';
+import { FrontendApplicationContribution } 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 { nls } from '@theia/core/lib/common';
+import {
+  CommandContribution,
+  CommandRegistry,
+} from '@theia/core/lib/common/command';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import { EditorCommands, EditorMainMenu } from '@theia/editor/lib/browser';
 import { MonacoMenus } from '@theia/monaco/lib/browser/monaco-menu';
 import { FileNavigatorCommands } from '@theia/navigator/lib/browser/navigator-contribution';
 import { TerminalMenus } from '@theia/terminal/lib/browser/terminal-frontend-contribution';
+import { ElectronWindowPreferences } from '@theia/core/lib/electron-browser/window/electron-window-preferences';
 import { BoardsServiceProvider } from './boards/boards-service-provider';
 import { BoardsToolBarItem } from './boards/boards-toolbar-item';
 import { ArduinoMenus } from './menu/arduino-menus';
 import { MonitorViewContribution } from './serial/monitor/monitor-view-contribution';
-import { SerialPlotterContribution } from './serial/plotter/plotter-frontend-contribution';
 import { ArduinoToolbar } from './toolbar/arduino-toolbar';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
+import { SerialPlotterContribution } from './serial/plotter/plotter-frontend-contribution';
 
 @injectable()
 export class ArduinoFrontendContribution
@@ -50,8 +44,7 @@ export class ArduinoFrontendContribution
     TabBarToolbarContribution,
     CommandContribution,
     MenuContribution,
-    ColorContribution,
-    StylingParticipant
+    ColorContribution
 {
   @inject(MessageService)
   private readonly messageService: MessageService;
@@ -69,7 +62,7 @@ export class ArduinoFrontendContribution
   private readonly appStateService: FrontendApplicationStateService;
 
   @postConstruct()
-  protected init(): void {
+  protected async init(): Promise<void> {
     if (!window.navigator.onLine) {
       // tslint:disable-next-line:max-line-length
       this.messageService.warn(
@@ -87,7 +80,8 @@ export class ArduinoFrontendContribution
         switch (event.preferenceName) {
           case 'window.zoomLevel':
             if (typeof event.newValue === 'number') {
-              window.electronTheiaCore.setZoomLevel(event.newValue || 0);
+              const webContents = remote.getCurrentWebContents();
+              webContents.setZoomLevel(event.newValue || 0);
             }
             break;
         }
@@ -95,9 +89,10 @@ export class ArduinoFrontendContribution
     });
     this.appStateService.reachedState('ready').then(() =>
       this.electronWindowPreferences.ready.then(() => {
+        const webContents = remote.getCurrentWebContents();
         const zoomLevel =
           this.electronWindowPreferences.get('window.zoomLevel');
-        window.electronTheiaCore.setZoomLevel(zoomLevel);
+        webContents.setZoomLevel(zoomLevel);
       })
     );
   }
@@ -173,8 +168,7 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'button.background',
           light: 'button.background',
-          hcDark: 'activityBar.inactiveForeground',
-          hcLight: 'activityBar.inactiveForeground',
+          hc: 'activityBar.inactiveForeground',
         },
         description:
           'Background color of the toolbar items. Such as Upload, Verify, etc.',
@@ -184,8 +178,7 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'button.hoverBackground',
           light: 'button.hoverBackground',
-          hcDark: 'button.background',
-          hcLight: 'button.background',
+          hc: 'button.background',
         },
         description:
           'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.',
@@ -195,8 +188,7 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'secondaryButton.foreground',
           light: 'button.foreground',
-          hcDark: 'activityBar.inactiveForeground',
-          hcLight: 'activityBar.inactiveForeground',
+          hc: 'activityBar.inactiveForeground',
         },
         description:
           'Foreground color of the toolbar items. Such as Serial Monitor and Serial Plotter',
@@ -206,8 +198,7 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'secondaryButton.hoverBackground',
           light: 'button.hoverBackground',
-          hcDark: 'textLink.foreground',
-          hcLight: 'textLink.foreground',
+          hc: 'textLink.foreground',
         },
         description:
           'Background color of the toolbar items when hovering over them, such as "Serial Monitor" and "Serial Plotter"',
@@ -217,8 +208,7 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'editor.selectionBackground',
           light: 'editor.selectionBackground',
-          hcDark: 'textPreformat.foreground',
-          hcLight: 'textPreformat.foreground',
+          hc: 'textPreformat.foreground',
         },
         description:
           'Toggle color of the toolbar items when they are currently toggled (the command is in progress)',
@@ -228,38 +218,37 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'dropdown.border',
           light: 'dropdown.border',
-          hcDark: 'dropdown.border',
-          hcLight: 'dropdown.border',
+          hc: 'dropdown.border',
         },
         description: 'Border color of the Board Selector.',
       },
+
       {
         id: 'arduino.toolbar.dropdown.borderActive',
         defaults: {
           dark: 'focusBorder',
           light: 'focusBorder',
-          hcDark: 'focusBorder',
-          hcLight: 'focusBorder',
+          hc: 'focusBorder',
         },
         description: "Border color of the Board Selector when it's active",
       },
+
       {
         id: 'arduino.toolbar.dropdown.background',
         defaults: {
           dark: 'tab.unfocusedActiveBackground',
           light: 'dropdown.background',
-          hcDark: 'dropdown.background',
-          hcLight: 'dropdown.background',
+          hc: 'dropdown.background',
         },
         description: 'Background color of the Board Selector.',
       },
+
       {
         id: 'arduino.toolbar.dropdown.label',
         defaults: {
           dark: 'dropdown.foreground',
           light: 'dropdown.foreground',
-          hcDark: 'dropdown.foreground',
-          hcLight: 'dropdown.foreground',
+          hc: 'dropdown.foreground',
         },
         description: 'Font color of the Board Selector.',
       },
@@ -268,8 +257,7 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'list.activeSelectionIconForeground',
           light: 'list.activeSelectionIconForeground',
-          hcDark: 'list.activeSelectionIconForeground',
-          hcLight: 'list.activeSelectionIconForeground',
+          hc: 'list.activeSelectionIconForeground',
         },
         description:
           'Color of the selected protocol icon in the Board Selector.',
@@ -279,8 +267,7 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'list.hoverBackground',
           light: 'list.hoverBackground',
-          hcDark: 'list.hoverBackground',
-          hcLight: 'list.hoverBackground',
+          hc: 'list.hoverBackground',
         },
         description: 'Background color on hover of the Board Selector options.',
       },
@@ -289,191 +276,11 @@ export class ArduinoFrontendContribution
         defaults: {
           dark: 'list.activeSelectionBackground',
           light: 'list.activeSelectionBackground',
-          hcDark: 'list.activeSelectionBackground',
-          hcLight: 'list.activeSelectionBackground',
+          hc: 'list.activeSelectionBackground',
         },
         description:
           'Background color of the selected board in the Board Selector.',
       }
     );
   }
-
-  registerThemeStyle(theme: ColorTheme, collector: CssStyleCollector): void {
-    const warningForeground = theme.getColor('warningForeground');
-    const warningBackground = theme.getColor('warningBackground');
-    const focusBorder = theme.getColor('focusBorder');
-    const contrastBorder = theme.getColor('contrastBorder');
-    const notificationsBackground = theme.getColor('notifications.background');
-    const buttonBorder = theme.getColor('button.border');
-    const buttonBackground = theme.getColor('button.background') || 'none';
-    const dropdownBackground = theme.getColor('dropdown.background');
-    const arduinoToolbarButtonBackground = theme.getColor(
-      'arduino.toolbar.button.background'
-    );
-    if (isHighContrast(theme.type)) {
-      // toolbar items
-      collector.addRule(`
-        .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div.toggle-serial-monitor,
-        .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div.toggle-serial-plotter {
-          background: transparent;
-        }
-      `);
-      if (contrastBorder) {
-        collector.addRule(`
-          .quick-input-widget {
-            outline: 1px solid ${contrastBorder};
-            outline-offset: -1px;
-          }
-        `);
-      }
-      if (focusBorder) {
-        // customized react-select widget
-        collector.addRule(`
-          .arduino-select__option--is-selected {
-            outline: 1px solid ${focusBorder};
-          }
-        `);
-        collector.addRule(`
-          .arduino-select__option--is-focused {
-            outline: 1px dashed ${focusBorder};
-          }
-        `);
-        // boards selector dropdown
-        collector.addRule(`
-          #select-board-dialog .selectBoardContainer .list .item:hover {
-            outline: 1px dashed ${focusBorder};
-          }
-        `);
-        // button hover
-        collector.addRule(`
-          .theia-button:hover,
-          button.theia-button:hover {
-            outline: 1px dashed ${focusBorder};
-          }
-        `);
-        collector.addRule(`
-          .theia-button {
-            border: 1px solid ${focusBorder};
-          }
-        `);
-        collector.addRule(`
-          .component-list-item .header .installed-version:hover:before {
-            background-color: transparent;
-            outline: 1px dashed ${focusBorder};
-          }
-        `);
-        // tree node
-        collector.addRule(`
-          .theia-TreeNode:hover {
-            outline: 1px dashed ${focusBorder};
-          }
-        `);
-        collector.addRule(`
-          .quick-input-list .monaco-list-row.focused,
-          .theia-Tree .theia-TreeNode.theia-mod-selected {
-            outline: 1px dotted ${focusBorder};
-          }
-        `);
-        collector.addRule(`
-          div#select-board-dialog .selectBoardContainer .list .item.selected,
-          .theia-Tree:focus .theia-TreeNode.theia-mod-selected,
-          .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
-            outline: 1px solid ${focusBorder};
-          }
-        `);
-        // quick input
-        collector.addRule(`
-          .quick-input-list .monaco-list-row:hover {
-            outline: 1px dashed ${focusBorder};
-          }
-        `);
-        // editor tab-bar
-        collector.addRule(`
-          .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:hover {
-            outline: 1px dashed ${focusBorder};
-          }
-        `);
-        collector.addRule(`
-          #theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
-            outline: 1px dashed ${focusBorder};
-            outline-offset: -4px;
-          }
-        `);
-        collector.addRule(`
-          #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
-            outline: 1px solid ${focusBorder};
-            outline-offset: -4px;
-          }
-        `);
-        // boards selector dropdown
-        collector.addRule(`
-          .arduino-boards-dropdown-item:hover {
-            outline: 1px dashed ${focusBorder};
-            outline-offset: -2px;
-          }
-        `);
-        if (notificationsBackground) {
-          // notification
-          collector.addRule(`
-            .theia-notification-list-item:hover:not(:focus) {
-              background-color: ${notificationsBackground};
-              outline: 1px dashed ${focusBorder};
-              outline-offset: -2px;
-            }
-          `);
-        }
-        if (arduinoToolbarButtonBackground) {
-          // toolbar item
-          collector.addRule(`
-            .item.arduino-tool-item.toggled .arduino-upload-sketch--toolbar,
-            .item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar {
-              background-color: ${arduinoToolbarButtonBackground} !important;
-              outline: 1px solid ${focusBorder};
-            }
-          `);
-          collector.addRule(`
-            .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div {
-              background: ${arduinoToolbarButtonBackground};
-              outline: 1px dashed ${focusBorder};
-            }
-          `);
-        }
-      }
-      if (dropdownBackground) {
-        // boards selector dropdown
-        collector.addRule(`
-          .arduino-boards-dropdown-item:hover {
-            background: ${dropdownBackground};
-          }
-        `);
-      }
-      if (warningForeground && warningBackground) {
-        // <input> widget with inverted foreground and background colors
-        collector.addRule(`
-          .theia-input.warning:focus,
-          .theia-input.warning::placeholder,
-          .theia-input.warning {
-            color: ${warningBackground};
-            background-color: ${warningForeground};
-          }
-        `);
-      }
-      if (buttonBorder) {
-        collector.addRule(`
-          button.theia-button,
-          button.theia-button.secondary,
-          .component-list-item .theia-button.secondary.no-border,
-          .component-list-item .theia-button.secondary.no-border:hover {
-            border: 1px solid ${buttonBorder};
-          }
-        `);
-        collector.addRule(`
-          .component-list-item .header .installed-version:before {
-            color: ${buttonBackground};
-            border: 1px solid ${buttonBorder};
-          }
-        `);
-      }
-    }
-  }
 }

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

@@ -1,5 +1,5 @@
 import '../../src/browser/style/index.css';
-import { ContainerModule } from '@theia/core/shared/inversify';
+import { Container, ContainerModule } from '@theia/core/shared/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';
@@ -27,10 +27,7 @@ import { SketchesServiceClientImpl } from './sketches-service-client-impl';
 import { CoreService, CoreServicePath } from '../common/protocol/core-service';
 import { BoardsListWidget } from './boards/boards-list-widget';
 import { BoardsListWidgetFrontendContribution } from './boards/boards-widget-frontend-contribution';
-import {
-  BoardListDumper,
-  BoardsServiceProvider,
-} from './boards/boards-service-provider';
+import { BoardsServiceProvider } from './boards/boards-service-provider';
 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';
@@ -64,6 +61,7 @@ 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';
@@ -102,7 +100,7 @@ import {
   FrontendConnectionStatusService as TheiaFrontendConnectionStatusService,
   ApplicationConnectionStatusContribution as TheiaApplicationConnectionStatusContribution,
 } from '@theia/core/lib/browser/connection-status-service';
-import { BoardsDataMenuUpdater } from './contributions/boards-data-menu-updater';
+import { BoardsDataMenuUpdater } from './boards/boards-data-menu-updater';
 import { BoardsDataStore } from './boards/boards-data-store';
 import { ILogger } from '@theia/core/lib/common/logger';
 import { bindContributionProvider } from '@theia/core/lib/common/contribution-provider';
@@ -210,6 +208,7 @@ import {
   MonacoEditorFactory,
   MonacoEditorProvider as TheiaMonacoEditorProvider,
 } from '@theia/monaco/lib/browser/monaco-editor-provider';
+import { StorageWrapper } from './storage-wrapper';
 import { NotificationManager } from './theia/messages/notifications-manager';
 import { NotificationManager as TheiaNotificationManager } from '@theia/messages/lib/browser/notifications-manager';
 import { NotificationsRenderer as TheiaNotificationsRenderer } from '@theia/messages/lib/browser/notifications-renderer';
@@ -296,7 +295,7 @@ import { CoreErrorHandler } from './contributions/core-error-handler';
 import { CompilerErrors } from './contributions/compiler-errors';
 import { WidgetManager } from './theia/core/widget-manager';
 import { WidgetManager as TheiaWidgetManager } from '@theia/core/lib/browser/widget-manager';
-import { StartupTasksExecutor } from './contributions/startup-tasks-executor';
+import { StartupTasks } from './contributions/startup-task';
 import { IndexesUpdateProgress } from './contributions/indexes-update-progress';
 import { Daemon } from './contributions/daemon';
 import { FirstStartupInstaller } from './contributions/first-startup-installer';
@@ -342,6 +341,16 @@ import { TypeHierarchyContribution } from './theia/typehierarchy/type-hierarchy-
 import { TypeHierarchyContribution as TheiaTypeHierarchyContribution } from '@theia/typehierarchy/lib/browser/typehierarchy-contribution';
 import { DefaultDebugSessionFactory } from './theia/debug/debug-session-contribution';
 import { DebugSessionFactory } from '@theia/debug/lib/browser/debug-session-contribution';
+import { DebugToolbar } from './theia/debug/debug-toolbar-widget';
+import { DebugToolBar as TheiaDebugToolbar } from '@theia/debug/lib/browser/view/debug-toolbar-widget';
+import { PluginMenuCommandAdapter } from './theia/plugin-ext/plugin-menu-command-adapter';
+import { PluginMenuCommandAdapter as TheiaPluginMenuCommandAdapter } from '@theia/plugin-ext/lib/main/browser/menus/plugin-menu-command-adapter';
+import { DebugSessionManager } from './theia/debug/debug-session-manager';
+import { DebugSessionManager as TheiaDebugSessionManager } from '@theia/debug/lib/browser/debug-session-manager';
+import { DebugWidget } from '@theia/debug/lib/browser/view/debug-widget';
+import { DebugViewModel } from '@theia/debug/lib/browser/view/debug-view-model';
+import { DebugSessionWidget } from '@theia/debug/lib/browser/view/debug-session-widget';
+import { DebugConfigurationWidget } from '@theia/debug/lib/browser/view/debug-configuration-widget';
 import { ConfigServiceClient } from './config/config-service-client';
 import { ValidateSketch } from './contributions/validate-sketch';
 import { RenameCloudSketch } from './contributions/rename-cloud-sketch';
@@ -352,32 +361,15 @@ import { SidebarBottomMenuWidget as TheiaSidebarBottomMenuWidget } from '@theia/
 import { CreateCloudCopy } from './contributions/create-cloud-copy';
 import { FileResourceResolver } from './theia/filesystem/file-resource';
 import { FileResourceResolver as TheiaFileResourceResolver } from '@theia/filesystem/lib/browser/file-resource';
-import { StylingParticipant } from '@theia/core/lib/browser/styling-service';
-import { MonacoEditorMenuContribution } from './theia/monaco/monaco-menu';
-import { MonacoEditorMenuContribution as TheiaMonacoEditorMenuContribution } from '@theia/monaco/lib/browser/monaco-menu';
-import { UpdateArduinoState } from './contributions/update-arduino-state';
-import { TerminalFrontendContribution } from './theia/terminal/terminal-frontend-contribution';
-import { TerminalFrontendContribution as TheiaTerminalFrontendContribution } from '@theia/terminal/lib/browser/terminal-frontend-contribution';
-
-// Hack to fix copy/cut/paste issue after electron version update in Theia.
-// https://github.com/eclipse-theia/theia/issues/12487
-import('@theia/core/lib/browser/common-frontend-contribution.js').then(
-  (theiaCommonContribution) => {
-    theiaCommonContribution['supportCopy'] = true;
-    theiaCommonContribution['supportCut'] = true;
-    theiaCommonContribution['supportPaste'] = true;
-  }
-);
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
-  // Commands, colors, theme adjustments, and toolbar items
+  // 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(StylingParticipant).toService(ArduinoFrontendContribution);
 
   bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
   bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
@@ -446,9 +438,11 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(BoardsServiceProvider).toSelf().inSingletonScope();
   bind(FrontendApplicationContribution).toService(BoardsServiceProvider);
   bind(CommandContribution).toService(BoardsServiceProvider);
-  bind(BoardListDumper).toSelf().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
@@ -477,6 +471,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(OpenHandler).toService(BoardsListWidgetFrontendContribution);
 
   // Board select dialog
+  bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
   bind(BoardsConfigDialog).toSelf().inSingletonScope();
   bind(BoardsConfigDialogProps).toConstantValue({
     title: nls.localize(
@@ -727,7 +722,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   Contribution.configure(bind, PlotterFrontendContribution);
   Contribution.configure(bind, Format);
   Contribution.configure(bind, CompilerErrors);
-  Contribution.configure(bind, StartupTasksExecutor);
+  Contribution.configure(bind, StartupTasks);
   Contribution.configure(bind, IndexesUpdateProgress);
   Contribution.configure(bind, Daemon);
   Contribution.configure(bind, FirstStartupInstaller);
@@ -748,8 +743,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   Contribution.configure(bind, Account);
   Contribution.configure(bind, CloudSketchbookContribution);
   Contribution.configure(bind, CreateCloudCopy);
-  Contribution.configure(bind, UpdateArduinoState);
-  Contribution.configure(bind, BoardsDataMenuUpdater);
 
   bindContributionProvider(bind, StartupTaskProvider);
   bind(StartupTaskProvider).toService(BoardsServiceProvider); // to reuse the boards config in another window
@@ -878,6 +871,9 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     ),
   });
 
+  bind(StorageWrapper).toSelf().inSingletonScope();
+  bind(CommandContribution).toService(StorageWrapper);
+
   bind(NotificationManager).toSelf().inSingletonScope();
   rebind(TheiaNotificationManager).toService(NotificationManager);
   bind(NotificationsRenderer).toSelf().inSingletonScope();
@@ -986,7 +982,9 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   // workaround for themes cannot be removed after registration
   // https://github.com/eclipse-theia/theia/issues/11151
   bind(CleanupObsoleteThemes).toSelf().inSingletonScope();
-  bind(FrontendApplicationContribution).toService(CleanupObsoleteThemes);
+  bind(FrontendApplicationContribution).toService(
+    CleanupObsoleteThemes
+  );
   bind(ThemesRegistrationSummary).toSelf().inSingletonScope();
   bind(MonacoThemeRegistry).toSelf().inSingletonScope();
   rebind(TheiaMonacoThemeRegistry).toService(MonacoThemeRegistry);
@@ -1000,8 +998,37 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(TypeHierarchyContribution).toSelf().inSingletonScope();
   rebind(TheiaTypeHierarchyContribution).toService(TypeHierarchyContribution);
 
+  // patched the debugger for `cortex-debug@1.5.1`
+  // https://github.com/eclipse-theia/theia/issues/11871
+  // https://github.com/eclipse-theia/theia/issues/11879
+  // https://github.com/eclipse-theia/theia/issues/11880
+  // https://github.com/eclipse-theia/theia/issues/11885
+  // https://github.com/eclipse-theia/theia/issues/11886
+  // https://github.com/eclipse-theia/theia/issues/11916
+  // based on: https://github.com/eclipse-theia/theia/compare/master...kittaakos:theia:%2311871
   bind(DefaultDebugSessionFactory).toSelf().inSingletonScope();
   rebind(DebugSessionFactory).toService(DefaultDebugSessionFactory);
+  bind(DebugSessionManager).toSelf().inSingletonScope();
+  rebind(TheiaDebugSessionManager).toService(DebugSessionManager);
+  bind(DebugToolbar).toSelf().inSingletonScope();
+  rebind(TheiaDebugToolbar).toService(DebugToolbar);
+  bind(PluginMenuCommandAdapter).toSelf().inSingletonScope();
+  rebind(TheiaPluginMenuCommandAdapter).toService(PluginMenuCommandAdapter);
+  bind(WidgetFactory)
+    .toDynamicValue(({ container }) => ({
+      id: DebugWidget.ID,
+      createWidget: () => {
+        const child = new Container({ defaultScope: 'Singleton' });
+        child.parent = container;
+        child.bind(DebugViewModel).toSelf();
+        child.bind(DebugToolbar).toSelf(); // patched toolbar
+        child.bind(DebugSessionWidget).toSelf();
+        child.bind(DebugConfigurationWidget).toSelf();
+        child.bind(DebugWidget).toSelf();
+        return child.get(DebugWidget);
+      },
+    }))
+    .inSingletonScope();
 
   bind(SidebarBottomMenuWidget).toSelf();
   rebind(TheiaSidebarBottomMenuWidget).toService(SidebarBottomMenuWidget);
@@ -1016,18 +1043,4 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   // https://github.com/arduino/arduino-ide/issues/437
   bind(FileResourceResolver).toSelf().inSingletonScope();
   rebind(TheiaFileResourceResolver).toService(FileResourceResolver);
-
-  // Full control over the editor context menu to filter undesired menu items contributed by Theia.
-  // https://github.com/arduino/arduino-ide/issues/1394
-  // https://github.com/arduino/arduino-ide/pull/2027#pullrequestreview-1414246614
-  bind(MonacoEditorMenuContribution).toSelf().inSingletonScope();
-  rebind(TheiaMonacoEditorMenuContribution).toService(
-    MonacoEditorMenuContribution
-  );
-
-  // Patch terminal issues.
-  bind(TerminalFrontendContribution).toSelf().inSingletonScope();
-  rebind(TheiaTerminalFrontendContribution).toService(
-    TerminalFrontendContribution
-  );
 });

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

@@ -1,15 +1,12 @@
-import {
-  PreferenceContribution,
-  PreferenceProxy,
-  PreferenceSchema,
-  PreferenceService,
-  createPreferenceProxy,
-} from '@theia/core/lib/browser/preferences';
-import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
-import { nls } from '@theia/core/lib/common/nls';
-import { PreferenceSchemaProperty } from '@theia/core/lib/common/preferences/preference-schema';
 import { interfaces } from '@theia/core/shared/inversify';
-import { serialMonitorWidgetLabel } from '../common/nls';
+import {
+  createPreferenceProxy,
+  PreferenceProxy,
+  PreferenceService,
+  PreferenceContribution,
+  PreferenceSchema,
+} from '@theia/core/lib/browser/preferences';
+import { nls } from '@theia/core/lib/common';
 import { CompilerWarningLiterals, CompilerWarnings } from '../common/protocol';
 
 export enum UpdateChannel {
@@ -34,7 +31,7 @@ export const ErrorRevealStrategyLiterals = [
    */
   'centerIfOutsideViewport',
 ] as const;
-export type ErrorRevealStrategy = (typeof ErrorRevealStrategyLiterals)[number];
+export type ErrorRevealStrategy = typeof ErrorRevealStrategyLiterals[number];
 export namespace ErrorRevealStrategy {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
   export function is(arg: any): arg is ErrorRevealStrategy {
@@ -43,24 +40,9 @@ export namespace ErrorRevealStrategy {
   export const Default: ErrorRevealStrategy = 'centerIfOutsideViewport';
 }
 
-export type MonitorWidgetDockPanel = Extract<
-  ApplicationShell.Area,
-  'bottom' | 'right'
->;
-export const defaultMonitorWidgetDockPanel: MonitorWidgetDockPanel = 'bottom';
-export function isMonitorWidgetDockPanel(
-  arg: unknown
-): arg is MonitorWidgetDockPanel {
-  return arg === 'bottom' || arg === 'right';
-}
-
-type StrictPreferenceSchemaProperties<T extends object> = {
-  [p in keyof T]: PreferenceSchemaProperty;
-};
-type ArduinoPreferenceSchemaProperties =
-  StrictPreferenceSchemaProperties<ArduinoConfiguration> & { 'arduino.window.zoomLevel': PreferenceSchemaProperty };
-
-const properties: ArduinoPreferenceSchemaProperties = {
+export const ArduinoConfigSchema: PreferenceSchema = {
+  type: 'object',
+  properties: {
     'arduino.language.log': {
       type: 'boolean',
       description: nls.localize(
@@ -276,22 +258,8 @@ const properties: ArduinoPreferenceSchemaProperties = {
       ),
       default: undefined,
     },
-  'arduino.monitor.dockPanel': {
-    type: 'string',
-    enum: ['bottom', 'right'],
-    markdownDescription: nls.localize(
-      'arduino/preferences/monitor/dockPanel',
-      'The area of the application shell where the _{0}_ widget will reside. It is either "bottom" or "right". It defaults to "{1}".',
-      serialMonitorWidgetLabel,
-      defaultMonitorWidgetDockPanel
-    ),
-    default: defaultMonitorWidgetDockPanel,
   },
 };
-export const ArduinoConfigSchema: PreferenceSchema = {
-  type: 'object',
-  properties,
-};
 
 export interface ArduinoConfiguration {
   'arduino.language.log': boolean;
@@ -320,7 +288,6 @@ export interface ArduinoConfiguration {
   'arduino.cli.daemon.debug': boolean;
   'arduino.sketch.inoBlueprint': string;
   'arduino.checkForUpdates': boolean;
-  'arduino.monitor.dockPanel': MonitorWidgetDockPanel;
 }
 
 export const ArduinoPreferences = Symbol('ArduinoPreferences');

arduino-ide-extension/src/browser/auth/authentication-client-service.ts

@@ -9,13 +9,13 @@ import {
   CommandContribution,
 } from '@theia/core/lib/common/command';
 import {
-  AuthOptions,
   AuthenticationService,
   AuthenticationServiceClient,
   AuthenticationSession,
-  authServerPort,
 } from '../../common/protocol/authentication-service';
 import { CloudUserCommands } from './cloud-user-commands';
+import { serverPort } from '../../node/auth/authentication-server';
+import { AuthOptions } from '../../node/auth/types';
 import { ArduinoPreferences } from '../arduino-preferences';
 
 @injectable()
@@ -61,7 +61,7 @@ export class AuthenticationClientService
 
   setOptions(): Promise<void> {
     return this.service.setOptions({
-      redirectUri: `http://localhost:${authServerPort}/callback`,
+      redirectUri: `http://localhost:${serverPort}/callback`,
       responseType: 'code',
       clientID: this.arduinoPreferences['arduino.auth.clientID'],
       domain: this.arduinoPreferences['arduino.auth.domain'],

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

@@ -1,201 +1,243 @@
-import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
-import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { injectable, inject } from '@theia/core/shared/inversify';
 import { MessageService } from '@theia/core/lib/common/message-service';
-import { MessageType } from '@theia/core/lib/common/message-service-protocol';
-import { nls } from '@theia/core/lib/common/nls';
-import { notEmpty } from '@theia/core/lib/common/objects';
-import { inject, injectable } from '@theia/core/shared/inversify';
-import { NotificationManager } from '@theia/messages/lib/browser/notifications-manager';
-import { InstallManually } from '../../common/nls';
-import { Installable, ResponseServiceClient } from '../../common/protocol';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
 import {
-  BoardIdentifier,
-  BoardsPackage,
   BoardsService,
-  createPlatformIdentifier,
-  isBoardIdentifierChangeEvent,
-  PlatformIdentifier,
-  platformIdentifierEquals,
-  serializePlatformIdentifier,
+  BoardsPackage,
+  Board,
+  Port,
 } from '../../common/protocol/boards-service';
-import { NotificationCenter } from '../notification-center';
 import { BoardsServiceProvider } from './boards-service-provider';
+import { Installable, ResponseServiceClient } from '../../common/protocol';
 import { BoardsListWidgetFrontendContribution } from './boards-widget-frontend-contribution';
+import { nls } from '@theia/core/lib/common';
+import { NotificationCenter } from '../notification-center';
+import { InstallManually } from '../../common/nls';
+
+interface AutoInstallPromptAction {
+  // isAcceptance, whether or not the action indicates acceptance of auto-install proposal
+  isAcceptance?: boolean;
+  key: string;
+  handler: (...args: unknown[]) => unknown;
+}
+
+type AutoInstallPromptActions = AutoInstallPromptAction[];
 
 /**
- * Listens on `BoardsConfigChangeEvent`s, if a board is selected which does not
+ * 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.
  */
+
+// * Cases in which we do not show the auto-install prompt:
+// 1. When a related platform is already installed
+// 2. When a prompt is already showing in the UI
+// 3. When a board is unplugged
 @injectable()
 export class BoardsAutoInstaller implements FrontendApplicationContribution {
   @inject(NotificationCenter)
   private readonly notificationCenter: NotificationCenter;
+
   @inject(MessageService)
-  private readonly messageService: MessageService;
-  @inject(NotificationManager)
-  private readonly notificationManager: NotificationManager;
+  protected readonly messageService: MessageService;
+
   @inject(BoardsService)
-  private readonly boardsService: BoardsService;
+  protected readonly boardsService: BoardsService;
+
   @inject(BoardsServiceProvider)
-  private readonly boardsServiceProvider: BoardsServiceProvider;
+  protected readonly boardsServiceClient: BoardsServiceProvider;
+
   @inject(ResponseServiceClient)
-  private readonly responseService: ResponseServiceClient;
+  protected readonly responseService: ResponseServiceClient;
+
   @inject(BoardsListWidgetFrontendContribution)
-  private readonly boardsManagerWidgetContribution: BoardsListWidgetFrontendContribution;
+  protected readonly boardsManagerFrontendContribution: BoardsListWidgetFrontendContribution;
 
   // Workaround for https://github.com/eclipse-theia/theia/issues/9349
-  private readonly installNotificationInfos: Readonly<{
-    boardName: string;
-    platformId: string;
-    notificationId: string;
-  }>[] = [];
-  private readonly toDispose = new DisposableCollection();
+  protected notifications: Board[] = [];
+
+  // * "refusal" meaning a "prompt action" not accepting the auto-install offer ("X" or "install manually")
+  // we can use "portSelectedOnLastRefusal" to deduce when a board is unplugged after a user has "refused"
+  // an auto-install prompt. Important to know as we do not want "an unplug" to trigger a "refused" prompt
+  // showing again
+  private portSelectedOnLastRefusal: Port | undefined;
+  private lastRefusedPackageId: string | undefined;
 
   onStart(): void {
-    this.toDispose.pushAll([
-      this.boardsServiceProvider.onBoardsConfigDidChange((event) => {
-        if (isBoardIdentifierChangeEvent(event)) {
-          this.ensureCoreExists(event.selectedBoard);
+    const setEventListeners = () => {
+      this.boardsServiceClient.onBoardsConfigChanged((config) => {
+        const { selectedBoard, selectedPort } = config;
+
+        const boardWasUnplugged =
+          !selectedPort && this.portSelectedOnLastRefusal;
+
+        this.clearLastRefusedPromptInfo();
+
+        if (
+          boardWasUnplugged ||
+          !selectedBoard ||
+          this.promptAlreadyShowingForBoard(selectedBoard)
+        ) {
+          return;
         }
-      }),
-      this.notificationCenter.onPlatformDidInstall((event) =>
-        this.clearAllNotificationForPlatform(event.item.id)
-      ),
-    ]);
-    this.boardsServiceProvider.ready.then(() => {
-      const { selectedBoard } = this.boardsServiceProvider.boardsConfig;
-      this.ensureCoreExists(selectedBoard);
+
+        this.ensureCoreExists(selectedBoard, selectedPort);
+      });
+
+      // we "clearRefusedPackageInfo" if a "refused" package is eventually
+      // installed, though this is not strictly necessary. It's more of a
+      // cleanup, to ensure the related variables are representative of
+      // current state.
+      this.notificationCenter.onPlatformDidInstall((installed) => {
+        if (this.lastRefusedPackageId === installed.item.id) {
+          this.clearLastRefusedPromptInfo();
+        }
+      });
+    };
+
+    // we should invoke this.ensureCoreExists only once we're sure
+    // everything has been reconciled
+    this.boardsServiceClient.reconciled.then(() => {
+      const { selectedBoard, selectedPort } =
+        this.boardsServiceClient.boardsConfig;
+
+      if (selectedBoard) {
+        this.ensureCoreExists(selectedBoard, selectedPort);
+      }
+
+      setEventListeners();
     });
   }
 
-  private async findPlatformToInstall(
-    selectedBoard: BoardIdentifier
-  ): Promise<BoardsPackage | undefined> {
-    const platformId = await this.findPlatformIdToInstall(selectedBoard);
-    if (!platformId) {
-      return undefined;
+  private removeNotificationByBoard(selectedBoard: Board): void {
+    const index = this.notifications.findIndex((notification) =>
+      Board.sameAs(notification, selectedBoard)
+    );
+    if (index !== -1) {
+      this.notifications.splice(index, 1);
     }
-    const id = serializePlatformIdentifier(platformId);
-    const platform = await this.boardsService.getBoardPackage({ id });
-    if (!platform) {
-      console.warn(`Could not resolve platform for ID: ${id}`);
-      return undefined;
-    }
-    if (platform.installedVersion) {
-      return undefined;
-    }
-    return platform;
   }
 
-  private async findPlatformIdToInstall(
-    selectedBoard: BoardIdentifier
-  ): Promise<PlatformIdentifier | undefined> {
-    const selectedBoardPlatformId = createPlatformIdentifier(selectedBoard);
-    // The board is installed or the FQBN is available from the `board list watch` for Arduino boards. The latter might change!
-    if (selectedBoardPlatformId) {
-      const installedPlatforms =
-        await this.boardsService.getInstalledPlatforms();
-      const installedPlatformIds = installedPlatforms
-        .map((platform) => createPlatformIdentifier(platform.id))
-        .filter(notEmpty);
-      if (
-        installedPlatformIds.every(
-          (installedPlatformId) =>
-            !platformIdentifierEquals(
-              installedPlatformId,
-              selectedBoardPlatformId
-            )
-        )
-      ) {
-        return selectedBoardPlatformId;
+  private clearLastRefusedPromptInfo(): void {
+    this.lastRefusedPackageId = undefined;
+    this.portSelectedOnLastRefusal = undefined;
   }
+
+  private setLastRefusedPromptInfo(
+    packageId: string,
+    selectedPort?: Port
+  ): void {
+    this.lastRefusedPackageId = packageId;
+    this.portSelectedOnLastRefusal = selectedPort;
+  }
+
+  private promptAlreadyShowingForBoard(board: Board): boolean {
+    return Boolean(
+      this.notifications.find((notification) =>
+        Board.sameAs(notification, board)
+      )
+    );
+  }
+
+  protected ensureCoreExists(selectedBoard: Board, selectedPort?: Port): void {
+    this.notifications.push(selectedBoard);
+    this.boardsService.search({}).then((packages) => {
+      const candidate = this.getInstallCandidate(packages, selectedBoard);
+
+      if (candidate) {
+        this.showAutoInstallPrompt(candidate, selectedBoard, selectedPort);
       } else {
-      // IDE2 knows that selected board is not installed. Look for board `name` match in not yet installed platforms.
-      // The order should be correct when there is a board name collision (e.g. Arduino Nano RP2040 from Arduino Mbed OS Nano Boards, [DEPRECATED] Arduino Mbed OS Nano Boards). The CLI boosts the platforms, so picking the first name match should be fine.
-      const platforms = await this.boardsService.search({});
-      for (const platform of platforms) {
-        // Ignore installed platforms
-        if (platform.installedVersion) {
-          continue;
+        this.removeNotificationByBoard(selectedBoard);
       }
-        if (
-          platform.boards.some((board) => board.name === selectedBoard.name)
-        ) {
-          const platformId = createPlatformIdentifier(platform.id);
-          if (platformId) {
-            return platformId;
-          }
-        }
-      }
-    }
-    return undefined;
+    });
   }
 
-  private async ensureCoreExists(
-    selectedBoard: BoardIdentifier | undefined
-  ): Promise<void> {
-    if (!selectedBoard) {
-      return;
-    }
-    const candidate = await this.findPlatformToInstall(selectedBoard);
-    if (!candidate) {
-      return;
-    }
-    const platformIdToInstall = candidate.id;
-    const selectedBoardName = selectedBoard.name;
-    if (
-      this.installNotificationInfos.some(
-        ({ boardName, platformId }) =>
-          platformIdToInstall === platformId && selectedBoardName === boardName
-      )
-    ) {
-      // Already has a notification for the board with the same platform. Nothing to do.
-      return;
-    }
-    this.clearAllNotificationForPlatform(platformIdToInstall);
+  private getInstallCandidate(
+    packages: BoardsPackage[],
+    selectedBoard: Board
+  ): BoardsPackage | undefined {
+    // filter packagesForBoard selecting matches from the cli (installed packages)
+    // and matches based on the board name
+    // NOTE: this ensures the Deprecated & new packages are all in the array
+    // so that we can check if any of the valid packages is already installed
+    const packagesForBoard = packages.filter(
+      (pkg) =>
+        BoardsPackage.contains(selectedBoard, pkg) ||
+        pkg.boards.some((board) => board.name === selectedBoard.name)
+    );
 
+    // check if one of the packages for the board is already installed. if so, no hint
+    if (packagesForBoard.some(({ installedVersion }) => !!installedVersion)) {
+      return;
+    }
+
+    // filter the installable (not installed) packages,
+    // CLI returns the packages already sorted with the deprecated ones at the end of the list
+    // in order to ensure the new ones are preferred
+    const candidates = packagesForBoard.filter(
+      ({ installedVersion }) => !installedVersion
+    );
+
+    return candidates[0];
+  }
+
+  private showAutoInstallPrompt(
+    candidate: BoardsPackage,
+    selectedBoard: Board,
+    selectedPort?: Port
+  ): void {
+    const candidateName = candidate.name;
     const version = candidate.availableVersions[0]
       ? `[v ${candidate.availableVersions[0]}]`
       : '';
-    const yes = nls.localize('vscode/extensionsUtils/yes', 'Yes');
-    const message = nls.localize(
-      'arduino/board/installNow',
-      'The "{0} {1}" core has to be installed for the currently selected "{2}" board. Do you want to install it now?',
-      candidate.name,
+
+    const info = this.generatePromptInfoText(
+      candidateName,
       version,
       selectedBoard.name
     );
-    const notificationId = this.notificationId(message, InstallManually, yes);
-    this.installNotificationInfos.push({
-      boardName: selectedBoardName,
-      platformId: platformIdToInstall,
-      notificationId,
-    });
-    const answer = await this.messageService.info(
-      message,
-      InstallManually,
-      yes
-    );
-    if (answer) {
-      const index = this.installNotificationInfos.findIndex(
-        ({ boardName, platformId }) =>
-          platformIdToInstall === platformId && selectedBoardName === boardName
-      );
-      if (index !== -1) {
-        this.installNotificationInfos.splice(index, 1);
+
+    const actions = this.createPromptActions(candidate);
+
+    const onRefuse = () => {
+      this.setLastRefusedPromptInfo(candidate.id, selectedPort);
+    };
+    const handleAction = this.createOnAnswerHandler(actions, onRefuse);
+
+    const onAnswer = (answer: string) => {
+      this.removeNotificationByBoard(selectedBoard);
+
+      handleAction(answer);
+    };
+
+    this.messageService
+      .info(info, ...actions.map((action) => action.key))
+      .then(onAnswer);
   }
-      if (answer === yes) {
-        await Installable.installWithProgress({
-          installable: this.boardsService,
-          item: candidate,
-          messageService: this.messageService,
-          responseService: this.responseService,
-          version: candidate.availableVersions[0],
-        });
-        return;
+
+  private generatePromptInfoText(
+    candidateName: string,
+    version: string,
+    boardName: string
+  ): string {
+    return nls.localize(
+      'arduino/board/installNow',
+      'The "{0} {1}" core has to be installed for the currently selected "{2}" board. Do you want to install it now?',
+      candidateName,
+      version,
+      boardName
+    );
   }
-      if (answer === InstallManually) {
-        this.boardsManagerWidgetContribution
+
+  private createPromptActions(
+    candidate: BoardsPackage
+  ): AutoInstallPromptActions {
+    const yes = nls.localize('vscode/extensionsUtils/yes', 'Yes');
+
+    const actions: AutoInstallPromptActions = [
+      {
+        key: InstallManually,
+        handler: () => {
+          this.boardsManagerFrontendContribution
             .openView({ reveal: true })
             .then((widget) =>
               widget.refresh({
@@ -203,27 +245,37 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
                 type: 'All',
               })
             );
-      }
-    }
-  }
-
-  private clearAllNotificationForPlatform(predicatePlatformId: string): void {
-    // Discard all install notifications for the same platform.
-    const notificationsLength = this.installNotificationInfos.length;
-    for (let i = notificationsLength - 1; i >= 0; i--) {
-      const { notificationId, platformId } = this.installNotificationInfos[i];
-      if (platformId === predicatePlatformId) {
-        this.installNotificationInfos.splice(i, 1);
-        this.notificationManager.clear(notificationId);
-      }
-    }
-  }
-
-  private notificationId(message: string, ...actions: string[]): string {
-    return this.notificationManager['getMessageId']({
-      text: message,
-      actions,
-      type: MessageType.Info,
+        },
+      },
+      {
+        isAcceptance: true,
+        key: yes,
+        handler: () => {
+          return Installable.installWithProgress({
+            installable: this.boardsService,
+            item: candidate,
+            messageService: this.messageService,
+            responseService: this.responseService,
+            version: candidate.availableVersions[0],
           });
+        },
+      },
+    ];
+
+    return actions;
+  }
+
+  private createOnAnswerHandler(
+    actions: AutoInstallPromptActions,
+    onRefuse?: () => void
+  ): (answer: string) => void {
+    return (answer) => {
+      const actionToHandle = actions.find((action) => action.key === answer);
+      actionToHandle?.handler();
+
+      if (!actionToHandle?.isAcceptance && onRefuse) {
+        onRefuse();
+      }
+    };
   }
 }

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

@@ -1,328 +0,0 @@
-import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import { Event } from '@theia/core/lib/common/event';
-import { FrontendApplicationState } from '@theia/core/lib/common/frontend-application-state';
-import { nls } from '@theia/core/lib/common/nls';
-import React from '@theia/core/shared/react';
-import { EditBoardsConfigActionParams } from '../../common/protocol/board-list';
-import {
-  Board,
-  BoardIdentifier,
-  BoardWithPackage,
-  DetectedPort,
-  findMatchingPortIndex,
-  Port,
-  PortIdentifier,
-} from '../../common/protocol/boards-service';
-import type { Defined } from '../../common/types';
-import { NotificationCenter } from '../notification-center';
-import { BoardsConfigDialogState } from './boards-config-dialog';
-
-namespace BoardsConfigComponent {
-  export interface Props {
-    /**
-     * This is not the real config, it's only living in the dialog. Users can change it without update and can cancel any modifications.
-     */
-    readonly boardsConfig: BoardsConfigDialogState;
-    readonly searchSet: BoardIdentifier[] | undefined;
-    readonly notificationCenter: NotificationCenter;
-    readonly appState: FrontendApplicationState;
-    readonly onFocusNodeSet: (element: HTMLElement | undefined) => void;
-    readonly onFilteredTextDidChangeEvent: Event<
-      Defined<EditBoardsConfigActionParams['query']>
-    >;
-    readonly onAppStateDidChange: Event<FrontendApplicationState>;
-    readonly onBoardSelected: (board: BoardIdentifier) => void;
-    readonly onPortSelected: (port: PortIdentifier) => void;
-    readonly searchBoards: (query?: {
-      query?: string;
-    }) => Promise<BoardWithPackage[]>;
-    readonly ports: (
-      predicate?: (port: DetectedPort) => boolean
-    ) => readonly DetectedPort[];
-  }
-
-  export interface State {
-    searchResults: Array<BoardWithPackage>;
-    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;
-}> {
-  override 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>
-    );
-  }
-
-  private readonly onClick = () => {
-    this.props.onClick(this.props.item);
-  };
-}
-
-export class BoardsConfigComponent extends React.Component<
-  BoardsConfigComponent.Props,
-  BoardsConfigComponent.State
-> {
-  private readonly toDispose: DisposableCollection;
-
-  constructor(props: BoardsConfigComponent.Props) {
-    super(props);
-    this.state = {
-      searchResults: [],
-      showAllPorts: false,
-      query: '',
-    };
-    this.toDispose = new DisposableCollection();
-  }
-
-  override componentDidMount(): void {
-    this.toDispose.pushAll([
-      this.props.onAppStateDidChange(async (state) => {
-        if (state === 'ready') {
-          const searchResults = await this.queryBoards({});
-          this.setState({ searchResults });
-        }
-      }),
-      this.props.notificationCenter.onPlatformDidInstall(() =>
-        this.updateBoards(this.state.query)
-      ),
-      this.props.notificationCenter.onPlatformDidUninstall(() =>
-        this.updateBoards(this.state.query)
-      ),
-      this.props.notificationCenter.onIndexUpdateDidComplete(() =>
-        this.updateBoards(this.state.query)
-      ),
-      this.props.notificationCenter.onDaemonDidStart(() =>
-        this.updateBoards(this.state.query)
-      ),
-      this.props.notificationCenter.onDaemonDidStop(() =>
-        this.setState({ searchResults: [] })
-      ),
-      this.props.onFilteredTextDidChangeEvent((query) => {
-        if (typeof query === 'string') {
-          this.setState({ query }, () => this.updateBoards(this.state.query));
-        }
-      }),
-    ]);
-  }
-
-  override componentWillUnmount(): void {
-    this.toDispose.dispose();
-  }
-
-  private readonly updateBoards = (
-    eventOrQuery: React.ChangeEvent<HTMLInputElement> | string = ''
-  ) => {
-    const query =
-      typeof eventOrQuery === 'string'
-        ? eventOrQuery
-        : eventOrQuery.target.value.toLowerCase();
-    this.setState({ query });
-    this.queryBoards({ query }).then((searchResults) =>
-      this.setState({ searchResults })
-    );
-  };
-
-  private readonly queryBoards = async (
-    options: { query?: string } = {}
-  ): Promise<Array<BoardWithPackage>> => {
-    const result = await this.props.searchBoards(options);
-    const { searchSet } = this.props;
-    if (searchSet) {
-      return result.filter((board) =>
-        searchSet.some(
-          (restriction) =>
-            restriction.fqbn === board.fqbn || restriction.name === board.fqbn
-        )
-      );
-    }
-    return result;
-  };
-
-  private readonly toggleFilterPorts = () => {
-    this.setState({ showAllPorts: !this.state.showAllPorts });
-  };
-
-  private readonly selectPort = (selectedPort: PortIdentifier) => {
-    this.props.onPortSelected(selectedPort);
-  };
-
-  private readonly selectBoard = (selectedBoard: BoardWithPackage) => {
-    this.props.onBoardSelected(selectedBoard);
-  };
-
-  private readonly focusNodeSet = (element: HTMLElement | null) => {
-    this.props.onFocusNodeSet(element || undefined);
-  };
-
-  override render(): React.ReactNode {
-    return (
-      <>
-        {this.renderContainer(
-          nls.localize('arduino/board/boards', 'boards'),
-          this.renderBoards.bind(this)
-        )}
-        {this.renderContainer(
-          nls.localize('arduino/board/ports', 'ports'),
-          this.renderPorts.bind(this),
-          this.renderPortsFooter.bind(this)
-        )}
-      </>
-    );
-  }
-
-  private 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>
-    );
-  }
-
-  private renderBoards(): React.ReactNode {
-    const { boardsConfig } = this.props;
-    const { searchResults, query } = 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(
-      boardsConfig.selectedBoard,
-      searchResults
-    )) {
-      const key = toKey(board);
-      if (!distinctBoards.has(key)) {
-        distinctBoards.set(key, board);
-      }
-    }
-
-    const boardsList = Array.from(distinctBoards.values()).map((board) => (
-      <Item<BoardWithPackage>
-        key={toKey(board)}
-        item={board}
-        label={board.name}
-        details={board.details}
-        selected={board.selected}
-        onClick={this.selectBoard}
-        missing={board.missing}
-      />
-    ));
-
-    return (
-      <React.Fragment>
-        <div className="search">
-          <input
-            type="search"
-            value={query}
-            className="theia-input"
-            placeholder={nls.localize(
-              'arduino/board/searchBoard',
-              'Search board'
-            )}
-            onChange={this.updateBoards}
-            ref={this.focusNodeSet}
-          />
-          <i className="fa fa-search"></i>
-        </div>
-        {boardsList.length > 0 ? (
-          <div className="boards list">{boardsList}</div>
-        ) : (
-          <div className="no-result">
-            {nls.localize(
-              'arduino/board/noBoardsFound',
-              'No boards found for "{0}"',
-              query
-            )}
-          </div>
-        )}
-      </React.Fragment>
-    );
-  }
-
-  private renderPorts(): React.ReactNode {
-    const predicate = this.state.showAllPorts ? undefined : Port.isVisiblePort;
-    const detectedPorts = this.props.ports(predicate);
-    const matchingIndex = findMatchingPortIndex(
-      this.props.boardsConfig.selectedPort,
-      detectedPorts
-    );
-    return !detectedPorts.length ? (
-      <div className="no-result">
-        {nls.localize('arduino/board/noPortsDiscovered', 'No ports discovered')}
-      </div>
-    ) : (
-      <div className="ports list">
-        {detectedPorts.map((detectedPort, index) => (
-          <Item<Port>
-            key={`${Port.keyOf(detectedPort.port)}`}
-            item={detectedPort.port}
-            label={Port.toString(detectedPort.port)}
-            selected={index === matchingIndex}
-            onClick={this.selectPort}
-          />
-        ))}
-      </div>
-    );
-  }
-
-  private renderPortsFooter(): React.ReactNode {
-    return (
-      <div className="noselect">
-        <label
-          title={nls.localize(
-            'arduino/board/showAllAvailablePorts',
-            'Shows all available ports when enabled'
-          )}
-        >
-          <input
-            type="checkbox"
-            defaultChecked={this.state.showAllPorts}
-            onChange={this.toggleFilterPorts}
-          />
-          <span>
-            {nls.localize('arduino/board/showAllPorts', 'Show all ports')}
-          </span>
-        </label>
-      </div>
-    );
-  }
-}

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

@@ -0,0 +1,71 @@
+import * as React from '@theia/core/shared/react';
+import { injectable, inject } from '@theia/core/shared/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 { BoardsServiceProvider } from './boards-service-provider';
+import { NotificationCenter } from '../notification-center';
+
+@injectable()
+export class BoardsConfigDialogWidget extends ReactWidget {
+  @inject(BoardsService)
+  protected readonly boardsService: BoardsService;
+
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
+
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
+
+  protected readonly onFilterTextDidChangeEmitter = new Emitter<string>();
+  protected readonly onBoardConfigChangedEmitter =
+    new Emitter<BoardsConfig.Config>();
+  readonly onBoardConfigChanged = this.onBoardConfigChangedEmitter.event;
+
+  protected focusNode: HTMLElement | undefined;
+
+  constructor() {
+    super();
+    this.id = 'select-board-dialog';
+    this.toDispose.pushAll([
+      this.onBoardConfigChangedEmitter,
+      this.onFilterTextDidChangeEmitter,
+    ]);
+  }
+
+  search(query: string): void {
+    this.onFilterTextDidChangeEmitter.fire(query);
+  }
+
+  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
+          boardsServiceProvider={this.boardsServiceClient}
+          notificationCenter={this.notificationCenter}
+          onConfigChange={this.fireConfigChanged}
+          onFocusNodeSet={this.setFocusNode}
+          onFilteredTextDidChangeEvent={this.onFilterTextDidChangeEmitter.event}
+          onAppStateDidChange={this.notificationCenter.onAppStateDidChange}
+        />
+      </div>
+    );
+  }
+
+  protected override 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,142 @@
+import {
+  injectable,
+  inject,
+  postConstruct,
+} from '@theia/core/shared/inversify';
+import { Message } from '@theia/core/shared/@phosphor/messaging';
+import { DialogProps, Widget, DialogError } from '@theia/core/lib/browser';
+import { AbstractDialog } from '../theia/dialogs/dialogs';
+import { BoardsConfig } from './boards-config';
+import { BoardsService } from '../../common/protocol/boards-service';
+import { BoardsServiceProvider } from './boards-service-provider';
+import { BoardsConfigDialogWidget } from './boards-config-dialog-widget';
+import { nls } from '@theia/core/lib/common';
+
+@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(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
+
+  protected config: BoardsConfig.Config = {};
+
+  constructor(
+    @inject(BoardsConfigDialogProps)
+    protected override readonly props: BoardsConfigDialogProps
+  ) {
+    super({ ...props, maxWidth: 500 });
+
+    this.node.id = 'select-board-dialog-container';
+    this.contentNode.classList.add('select-board-dialog');
+    this.contentNode.appendChild(this.createDescription());
+
+    this.appendCloseButton(
+      nls.localize('vscode/issueMainService/cancel', 'Cancel')
+    );
+    this.appendAcceptButton(nls.localize('vscode/issueMainService/ok', 'OK'));
+  }
+
+  @postConstruct()
+  protected init(): void {
+    this.toDispose.push(
+      this.boardsServiceClient.onBoardsConfigChanged((config) => {
+        this.config = config;
+        this.update();
+      })
+    );
+  }
+
+  /**
+   * Pass in an empty string if you want to reset the search term. Using `undefined` has no effect.
+   */
+  override async open(
+    query: string | undefined = undefined
+  ): Promise<BoardsConfig.Config | undefined> {
+    if (typeof query === 'string') {
+      this.widget.search(query);
+    }
+    return super.open();
+  }
+
+  protected createDescription(): HTMLElement {
+    const head = document.createElement('div');
+    head.classList.add('head');
+
+    const text = document.createElement('div');
+    text.classList.add('text');
+    head.appendChild(text);
+
+    for (const paragraph of [
+      nls.localize(
+        'arduino/board/configDialog1',
+        'Select both a Board and a Port if you want to upload a sketch.'
+      ),
+      nls.localize(
+        'arduino/board/configDialog2',
+        'If you only select a Board you will be able to compile, but not to upload your sketch.'
+      ),
+    ]) {
+      const p = document.createElement('div');
+      p.textContent = paragraph;
+      text.appendChild(p);
+    }
+
+    return head;
+  }
+
+  protected override 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 override onUpdateRequest(msg: Message): void {
+    super.onUpdateRequest(msg);
+    this.widget.update();
+  }
+
+  protected override onActivateRequest(msg: Message): void {
+    super.onActivateRequest(msg);
+    this.widget.activate();
+  }
+
+  protected override handleEnter(event: KeyboardEvent): boolean | void {
+    if (event.target instanceof HTMLTextAreaElement) {
+      return false;
+    }
+  }
+
+  protected override isValid(value: BoardsConfig.Config): DialogError {
+    if (!value.selectedBoard) {
+      if (value.selectedPort) {
+        return nls.localize(
+          'arduino/board/pleasePickBoard',
+          '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-dialog.tsx

@@ -1,202 +0,0 @@
-import { DialogError, DialogProps } from '@theia/core/lib/browser/dialogs';
-import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
-import { Emitter } from '@theia/core/lib/common/event';
-import { nls } from '@theia/core/lib/common/nls';
-import { deepClone } from '@theia/core/lib/common/objects';
-import type { Message } from '@theia/core/shared/@phosphor/messaging';
-import {
-  inject,
-  injectable,
-  postConstruct,
-} from '@theia/core/shared/inversify';
-import React from '@theia/core/shared/react';
-import type { ReactNode } from '@theia/core/shared/react/index';
-import { EditBoardsConfigActionParams } from '../../common/protocol/board-list';
-import {
-  BoardIdentifier,
-  BoardsConfig,
-  BoardWithPackage,
-  DetectedPort,
-  emptyBoardsConfig,
-  PortIdentifier,
-} from '../../common/protocol/boards-service';
-import type { Defined } from '../../common/types';
-import { NotificationCenter } from '../notification-center';
-import { ReactDialog } from '../theia/dialogs/dialogs';
-import { BoardsConfigComponent } from './boards-config-component';
-import { BoardsServiceProvider } from './boards-service-provider';
-
-@injectable()
-export class BoardsConfigDialogProps extends DialogProps {}
-
-export type BoardsConfigDialogState = Omit<BoardsConfig, 'selectedBoard'> & {
-  selectedBoard: BoardsConfig['selectedBoard'] | BoardWithPackage;
-};
-
-@injectable()
-export class BoardsConfigDialog extends ReactDialog<BoardsConfigDialogState> {
-  @inject(BoardsServiceProvider)
-  private readonly boardsServiceProvider: BoardsServiceProvider;
-  @inject(NotificationCenter)
-  private readonly notificationCenter: NotificationCenter;
-  @inject(FrontendApplicationStateService)
-  private readonly appStateService: FrontendApplicationStateService;
-
-  private readonly onFilterTextDidChangeEmitter: Emitter<
-    Defined<EditBoardsConfigActionParams['query']>
-  >;
-  private readonly onBoardSelected = (board: BoardWithPackage): void => {
-    this._boardsConfig.selectedBoard = board;
-    this.update();
-  };
-  private readonly onPortSelected = (port: PortIdentifier): void => {
-    this._boardsConfig.selectedPort = port;
-    this.update();
-  };
-  private readonly setFocusNode = (element: HTMLElement | undefined): void => {
-    this.focusNode = element;
-  };
-  private readonly searchBoards = (options: {
-    query?: string;
-  }): Promise<BoardWithPackage[]> => {
-    return this.boardsServiceProvider.searchBoards(options);
-  };
-  private readonly ports = (
-    predicate?: (port: DetectedPort) => boolean
-  ): readonly DetectedPort[] => {
-    return this.boardsServiceProvider.boardList.ports(predicate);
-  };
-  private _boardsConfig: BoardsConfigDialogState;
-  /**
-   * When the dialog's boards result set is limited to a subset of boards when searching, this field is set.
-   */
-  private _searchSet: BoardIdentifier[] | undefined;
-  private focusNode: HTMLElement | undefined;
-
-  constructor(
-    @inject(BoardsConfigDialogProps)
-    protected override readonly props: BoardsConfigDialogProps
-  ) {
-    super({ ...props, maxWidth: 500 });
-    this.node.id = 'select-board-dialog-container';
-    this.contentNode.classList.add('select-board-dialog');
-    this.appendCloseButton(
-      nls.localize('vscode/issueMainService/cancel', 'Cancel')
-    );
-    this.appendAcceptButton(nls.localize('vscode/issueMainService/ok', 'OK'));
-    this._boardsConfig = emptyBoardsConfig();
-    this.onFilterTextDidChangeEmitter = new Emitter();
-  }
-
-  @postConstruct()
-  protected init(): void {
-    this.boardsServiceProvider.onBoardListDidChange(() => {
-      this._boardsConfig = deepClone(this.boardsServiceProvider.boardsConfig);
-      this.update();
-    });
-    this._boardsConfig = deepClone(this.boardsServiceProvider.boardsConfig);
-  }
-
-  override async open(
-    params?: EditBoardsConfigActionParams
-  ): Promise<BoardsConfig | undefined> {
-    this._searchSet = undefined;
-    this._boardsConfig.selectedBoard =
-      this.boardsServiceProvider.boardsConfig.selectedBoard;
-    this._boardsConfig.selectedPort =
-      this.boardsServiceProvider.boardsConfig.selectedPort;
-    if (params) {
-      if (typeof params.query === 'string') {
-        this.onFilterTextDidChangeEmitter.fire(params.query);
-      }
-      if (params.portToSelect) {
-        this._boardsConfig.selectedPort = params.portToSelect;
-      }
-      if (params.boardToSelect) {
-        this._boardsConfig.selectedBoard = params.boardToSelect;
-      }
-      if (params.searchSet) {
-        this._searchSet = params.searchSet.slice();
-      }
-    }
-    return super.open();
-  }
-
-  protected override onAfterAttach(msg: Message): void {
-    super.onAfterAttach(msg);
-    this.update();
-  }
-
-  protected override render(): ReactNode {
-    return (
-      <>
-        <div className="head">
-          <div className="text">
-            <div>
-              {nls.localize(
-                'arduino/board/configDialog1',
-                'Select both a Board and a Port if you want to upload a sketch.'
-              )}
-            </div>
-            <div>
-              {nls.localize(
-                'arduino/board/configDialog2',
-                'If you only select a Board you will be able to compile, but not to upload your sketch.'
-              )}
-            </div>
-          </div>
-        </div>
-        <div id="select-board-dialog" className="p-Widget ps">
-          <div className="selectBoardContainer">
-            <BoardsConfigComponent
-              boardsConfig={this._boardsConfig}
-              searchSet={this._searchSet}
-              onBoardSelected={this.onBoardSelected}
-              onPortSelected={this.onPortSelected}
-              notificationCenter={this.notificationCenter}
-              onFocusNodeSet={this.setFocusNode}
-              onFilteredTextDidChangeEvent={
-                this.onFilterTextDidChangeEmitter.event
-              }
-              appState={this.appStateService.state}
-              onAppStateDidChange={this.notificationCenter.onAppStateDidChange}
-              searchBoards={this.searchBoards}
-              ports={this.ports}
-            />
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  protected override onActivateRequest(msg: Message): void {
-    super.onActivateRequest(msg);
-    if (this.focusNode instanceof HTMLInputElement) {
-      this.focusNode.select();
-    }
-    (this.focusNode || this.node).focus();
-  }
-
-  protected override handleEnter(event: KeyboardEvent): boolean | void {
-    if (event.target instanceof HTMLTextAreaElement) {
-      return false;
-    }
-  }
-
-  protected override isValid(value: BoardsConfig): DialogError {
-    if (!value.selectedBoard) {
-      if (value.selectedPort) {
-        return nls.localize(
-          'arduino/board/pleasePickBoard',
-          'Please pick a board connected to the port you have selected.'
-        );
-      }
-      return false;
-    }
-    return '';
-  }
-
-  get value(): BoardsConfigDialogState {
-    return this._boardsConfig;
-  }
-}

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

@@ -0,0 +1,432 @@
+import * as React from '@theia/core/shared/react';
+import { Event } from '@theia/core/lib/common/event';
+import { notEmpty } from '@theia/core/lib/common/objects';
+import { MaybePromise } from '@theia/core/lib/common/types';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import {
+  Board,
+  Port,
+  BoardConfig as ProtocolBoardConfig,
+  BoardWithPackage,
+} from '../../common/protocol/boards-service';
+import { NotificationCenter } from '../notification-center';
+import {
+  AvailableBoard,
+  BoardsServiceProvider,
+} from './boards-service-provider';
+import { naturalCompare } from '../../common/utils';
+import { nls } from '@theia/core/lib/common';
+import { FrontendApplicationState } from '@theia/core/lib/common/frontend-application-state';
+
+export namespace BoardsConfig {
+  export type Config = ProtocolBoardConfig;
+
+  export interface Props {
+    readonly boardsServiceProvider: BoardsServiceProvider;
+    readonly notificationCenter: NotificationCenter;
+    readonly onConfigChange: (config: Config) => void;
+    readonly onFocusNodeSet: (element: HTMLElement | undefined) => void;
+    readonly onFilteredTextDidChangeEvent: Event<string>;
+    readonly onAppStateDidChange: Event<FrontendApplicationState>;
+  }
+
+  export interface State extends Config {
+    searchResults: Array<BoardWithPackage>;
+    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;
+}> {
+  override 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.boardsServiceProvider;
+    this.state = {
+      searchResults: [],
+      knownPorts: [],
+      showAllPorts: false,
+      query: '',
+      ...boardsConfig,
+    };
+  }
+
+  override componentDidMount(): void {
+    this.toDispose.pushAll([
+      this.props.onAppStateDidChange((state) => {
+        if (state === 'ready') {
+          this.updateBoards();
+          this.updatePorts(
+            this.props.boardsServiceProvider.availableBoards
+              .map(({ port }) => port)
+              .filter(notEmpty)
+          );
+        }
+      }),
+      this.props.boardsServiceProvider.onAvailablePortsChanged(
+        ({ newState, oldState }) => {
+          const removedPorts = oldState.filter(
+            (oldPort) =>
+              !newState.find((newPort) => Port.sameAs(newPort, oldPort))
+          );
+          this.updatePorts(newState, removedPorts);
+        }
+      ),
+      this.props.boardsServiceProvider.onBoardsConfigChanged(
+        ({ selectedBoard, selectedPort }) => {
+          this.setState({ selectedBoard, selectedPort }, () =>
+            this.fireConfigChanged()
+          );
+        }
+      ),
+      this.props.notificationCenter.onPlatformDidInstall(() =>
+        this.updateBoards(this.state.query)
+      ),
+      this.props.notificationCenter.onPlatformDidUninstall(() =>
+        this.updateBoards(this.state.query)
+      ),
+      this.props.notificationCenter.onIndexUpdateDidComplete(() =>
+        this.updateBoards(this.state.query)
+      ),
+      this.props.notificationCenter.onDaemonDidStart(() =>
+        this.updateBoards(this.state.query)
+      ),
+      this.props.notificationCenter.onDaemonDidStop(() =>
+        this.setState({ searchResults: [] })
+      ),
+      this.props.onFilteredTextDidChangeEvent((query) =>
+        this.setState({ query }, () => this.updateBoards(this.state.query))
+      ),
+    ]);
+  }
+
+  override componentWillUnmount(): void {
+    this.toDispose.dispose();
+  }
+
+  protected fireConfigChanged(): void {
+    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();
+    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.sameAs(port, selectedPort))) {
+        selectedPort = undefined;
+      }
+      this.setState({ knownPorts, selectedPort }, () =>
+        this.fireConfigChanged()
+      );
+    });
+  };
+
+  protected queryBoards = (
+    options: { query?: string } = {}
+  ): Promise<Array<BoardWithPackage>> => {
+    return this.props.boardsServiceProvider.searchBoards(options);
+  };
+
+  protected get availablePorts(): MaybePromise<Port[]> {
+    return this.props.boardsServiceProvider.availableBoards
+      .map(({ port }) => port)
+      .filter(notEmpty);
+  }
+
+  protected get availableBoards(): AvailableBoard[] {
+    return this.props.boardsServiceProvider.availableBoards;
+  }
+
+  protected queryPorts = async (
+    availablePorts: MaybePromise<Port[]> = this.availablePorts
+  ) => {
+    // Available ports must be sorted in this order:
+    // 1. Serial with recognized boards
+    // 2. Serial with guessed boards
+    // 3. Serial with incomplete boards
+    // 4. Network with recognized boards
+    // 5. Other protocols with recognized boards
+    const ports = (await availablePorts).sort((left: Port, right: Port) => {
+      if (left.protocol === 'serial' && right.protocol !== 'serial') {
+        return -1;
+      } else if (left.protocol !== 'serial' && right.protocol === 'serial') {
+        return 1;
+      } else if (left.protocol === 'network' && right.protocol !== 'network') {
+        return -1;
+      } else if (left.protocol !== 'network' && right.protocol === 'network') {
+        return 1;
+      } else if (left.protocol === right.protocol) {
+        // We show ports, including those that have guessed
+        // or unrecognized boards, so we must sort those too.
+        const leftBoard = this.availableBoards.find(
+          (board) => board.port === left
+        );
+        const rightBoard = this.availableBoards.find(
+          (board) => board.port === right
+        );
+        if (leftBoard && !rightBoard) {
+          return -1;
+        } else if (!leftBoard && rightBoard) {
+          return 1;
+        } else if (leftBoard?.state! < rightBoard?.state!) {
+          return -1;
+        } else if (leftBoard?.state! > rightBoard?.state!) {
+          return 1;
+        }
+      }
+      return naturalCompare(left.address, right.address);
+    });
+    return { knownPorts: ports };
+  };
+
+  protected toggleFilterPorts = () => {
+    this.setState({ showAllPorts: !this.state.showAllPorts });
+  };
+
+  protected selectPort = (selectedPort: Port | undefined) => {
+    this.setState({ selectedPort }, () => this.fireConfigChanged());
+  };
+
+  protected selectBoard = (selectedBoard: BoardWithPackage | undefined) => {
+    this.setState({ selectedBoard }, () => this.fireConfigChanged());
+  };
+
+  protected focusNodeSet = (element: HTMLElement | null) => {
+    this.props.onFocusNodeSet(element || undefined);
+  };
+
+  override render(): React.ReactNode {
+    return (
+      <>
+        {this.renderContainer(
+          nls.localize('arduino/board/boards', 'boards'),
+          this.renderBoards.bind(this)
+        )}
+        {this.renderContainer(
+          nls.localize('arduino/board/ports', 'ports'),
+          this.renderPorts.bind(this),
+          this.renderPortsFooter.bind(this)
+        )}
+      </>
+    );
+  }
+
+  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, query } = 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);
+      }
+    }
+
+    const boardsList = Array.from(distinctBoards.values()).map((board) => (
+      <Item<BoardWithPackage>
+        key={toKey(board)}
+        item={board}
+        label={board.name}
+        details={board.details}
+        selected={board.selected}
+        onClick={this.selectBoard}
+        missing={board.missing}
+      />
+    ));
+
+    return (
+      <React.Fragment>
+        <div className="search">
+          <input
+            type="search"
+            value={query}
+            className="theia-input"
+            placeholder={nls.localize(
+              'arduino/board/searchBoard',
+              'Search board'
+            )}
+            onChange={this.updateBoards}
+            ref={this.focusNodeSet}
+          />
+          <i className="fa fa-search"></i>
+        </div>
+        {boardsList.length > 0 ? (
+          <div className="boards list">{boardsList}</div>
+        ) : (
+          <div className="no-result">
+            {nls.localize(
+              'arduino/board/noBoardsFound',
+              'No boards found for "{0}"',
+              query
+            )}
+          </div>
+        )}
+      </React.Fragment>
+    );
+  }
+
+  protected renderPorts(): React.ReactNode {
+    let ports = [] as Port[];
+    if (this.state.showAllPorts) {
+      ports = this.state.knownPorts;
+    } else {
+      ports = this.state.knownPorts.filter(
+        Port.visiblePorts(this.availableBoards)
+      );
+    }
+    return !ports.length ? (
+      <div className="no-result">
+        {nls.localize('arduino/board/noPortsDiscovered', 'No ports discovered')}
+      </div>
+    ) : (
+      <div className="ports list">
+        {ports.map((port) => (
+          <Item<Port>
+            key={`${Port.keyOf(port)}`}
+            item={port}
+            label={Port.toString(port)}
+            selected={Port.sameAs(this.state.selectedPort, port)}
+            onClick={this.selectPort}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  protected renderPortsFooter(): React.ReactNode {
+    return (
+      <div className="noselect">
+        <label
+          title={nls.localize(
+            'arduino/board/showAllAvailablePorts',
+            'Shows all available ports when enabled'
+          )}
+        >
+          <input
+            type="checkbox"
+            defaultChecked={this.state.showAllPorts}
+            onChange={this.toggleFilterPorts}
+          />
+          <span>
+            {nls.localize('arduino/board/showAllPorts', '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.address}` : ''}`;
+    }
+  }
+}

arduino-ide-extension/src/browser/boards/boards-data-menu-updater.ts

@@ -1,66 +1,67 @@
+import * as PQueue from 'p-queue';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { CommandRegistry } from '@theia/core/lib/common/command';
+import { MenuModelRegistry } from '@theia/core/lib/common/menu';
 import {
   Disposable,
   DisposableCollection,
 } from '@theia/core/lib/common/disposable';
-import { nls } from '@theia/core/lib/common/nls';
-import { inject, injectable } from '@theia/core/shared/inversify';
-import PQueue from 'p-queue';
-import {
-  BoardIdentifier,
-  ConfigOption,
-  isBoardIdentifierChangeEvent,
-  Programmer,
-} from '../../common/protocol';
-import { BoardsDataStore } from '../boards/boards-data-store';
-import { BoardsServiceProvider } from '../boards/boards-service-provider';
+import { BoardsServiceProvider } from './boards-service-provider';
+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, unregisterSubmenu } from '../menu/arduino-menus';
-import {
-  CommandRegistry,
-  Contribution,
-  MenuModelRegistry,
-} from './contribution';
+import { nls } from '@theia/core/lib/common';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 
 @injectable()
-export class BoardsDataMenuUpdater extends Contribution {
+export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
   @inject(CommandRegistry)
-  private readonly commandRegistry: CommandRegistry;
+  protected readonly commandRegistry: CommandRegistry;
+
   @inject(MenuModelRegistry)
-  private readonly menuRegistry: MenuModelRegistry;
+  protected readonly menuRegistry: MenuModelRegistry;
+
+  @inject(MainMenuManager)
+  protected readonly mainMenuManager: MainMenuManager;
+
   @inject(BoardsDataStore)
-  private readonly boardsDataStore: BoardsDataStore;
+  protected readonly boardsDataStore: BoardsDataStore;
+
   @inject(BoardsServiceProvider)
-  private readonly boardsServiceProvider: BoardsServiceProvider;
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
-  private readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
-  private readonly toDisposeOnBoardChange = new DisposableCollection();
+  @inject(FrontendApplicationStateService)
+  private readonly appStateService: FrontendApplicationStateService;
 
-  override onStart(): void {
+  protected readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
+  protected readonly toDisposeOnBoardChange = new DisposableCollection();
+
+  async onStart(): Promise<void> {
+    this.appStateService
+      .reachedState('ready')
+      .then(() =>
+        this.updateMenuActions(
+          this.boardsServiceClient.boardsConfig.selectedBoard
+        )
+      );
     this.boardsDataStore.onChanged(() =>
       this.updateMenuActions(
-        this.boardsServiceProvider.boardsConfig.selectedBoard
+        this.boardsServiceClient.boardsConfig.selectedBoard
       )
     );
-    this.boardsServiceProvider.onBoardsConfigDidChange((event) => {
-      if (isBoardIdentifierChangeEvent(event)) {
-        this.updateMenuActions(event.selectedBoard);
-      }
-    });
-  }
-
-  override onReady(): void {
-    this.boardsServiceProvider.ready.then(() =>
-      this.updateMenuActions(
-        this.boardsServiceProvider.boardsConfig.selectedBoard
-      )
+    this.boardsServiceClient.onBoardsConfigChanged(({ selectedBoard }) =>
+      this.updateMenuActions(selectedBoard)
     );
   }
 
-  private async updateMenuActions(
-    selectedBoard: BoardIdentifier | undefined
+  protected async updateMenuActions(
+    selectedBoard: Board | undefined
   ): Promise<void> {
     return this.queue.add(async () => {
       this.toDisposeOnBoardChange.dispose();
-      this.menuManager.update();
+      this.mainMenuManager.update();
       if (selectedBoard) {
         const { fqbn } = selectedBoard;
         if (fqbn) {
@@ -171,7 +172,7 @@ export class BoardsDataMenuUpdater extends Contribution {
               ]);
             }
           }
-          this.menuManager.update();
+          this.mainMenuManager.update();
         }
       }
     });

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

@@ -1,36 +1,38 @@
-import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
-import { LocalStorageService } from '@theia/core/lib/browser/storage-service';
-import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import { Emitter, Event } from '@theia/core/lib/common/event';
+import { injectable, inject, named } from '@theia/core/shared/inversify';
 import { ILogger } from '@theia/core/lib/common/logger';
 import { deepClone } from '@theia/core/lib/common/objects';
-import { inject, injectable, named } from '@theia/core/shared/inversify';
+import { Event, Emitter } from '@theia/core/lib/common/event';
+import {
+  FrontendApplicationContribution,
+  LocalStorageService,
+} from '@theia/core/lib/browser';
+import { notEmpty } from '../../common/utils';
 import {
-  BoardDetails,
   BoardsService,
   ConfigOption,
+  BoardDetails,
   Programmer,
 } from '../../common/protocol';
-import { notEmpty } from '../../common/utils';
 import { NotificationCenter } from '../notification-center';
 
 @injectable()
 export class BoardsDataStore implements FrontendApplicationContribution {
   @inject(ILogger)
   @named('store')
-  private readonly logger: ILogger;
-  @inject(BoardsService)
-  private readonly boardsService: BoardsService;
-  @inject(NotificationCenter)
-  private readonly notificationCenter: NotificationCenter;
-  @inject(LocalStorageService)
-  private readonly storageService: LocalStorageService;
+  protected readonly logger: ILogger;
 
-  private readonly onChangedEmitter = new Emitter<string[]>();
-  private readonly toDispose = new DisposableCollection(this.onChangedEmitter);
+  @inject(BoardsService)
+  protected readonly boardsService: BoardsService;
+
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
+
+  @inject(LocalStorageService)
+  protected readonly storageService: LocalStorageService;
+
+  protected readonly onChangedEmitter = new Emitter<string[]>();
 
   onStart(): void {
-    this.toDispose.push(
     this.notificationCenter.onPlatformDidInstall(async ({ item }) => {
       const dataDidChangePerFqbn: string[] = [];
       for (const fqbn of item.boards
@@ -38,7 +40,9 @@ export class BoardsDataStore implements FrontendApplicationContribution {
         .filter(notEmpty)
         .filter((fqbn) => !!fqbn)) {
         const key = this.getStorageKey(fqbn);
-          let data = await this.storageService.getData<ConfigOption[]>(key);
+        let data = await this.storageService.getData<
+          ConfigOption[] | undefined
+        >(key);
         if (!data || !data.length) {
           const details = await this.getBoardDetailsSafe(fqbn);
           if (details) {
@@ -53,12 +57,7 @@ export class BoardsDataStore implements FrontendApplicationContribution {
       if (dataDidChangePerFqbn.length) {
         this.fireChanged(...dataDidChangePerFqbn);
       }
-      })
-    );
-  }
-
-  onStop(): void {
-    this.toDispose.dispose();
+    });
   }
 
   get onChanged(): Event<string[]> {
@@ -66,7 +65,7 @@ export class BoardsDataStore implements FrontendApplicationContribution {
   }
 
   async appendConfigToFqbn(
-    fqbn: string | undefined
+    fqbn: string | undefined,
   ): Promise<string | undefined> {
     if (!fqbn) {
       return undefined;
@@ -101,13 +100,12 @@ export class BoardsDataStore implements FrontendApplicationContribution {
     return data;
   }
 
-  async selectProgrammer({
+  async selectProgrammer(
+    {
       fqbn,
       selectedProgrammer,
-  }: {
-    fqbn: string;
-    selectedProgrammer: Programmer;
-  }): Promise<boolean> {
+    }: { fqbn: string; selectedProgrammer: Programmer },
+  ): Promise<boolean> {
     const data = deepClone(await this.getData(fqbn));
     const { programmers } = data;
     if (!programmers.find((p) => Programmer.equals(selectedProgrammer, p))) {
@@ -122,15 +120,13 @@ export class BoardsDataStore implements FrontendApplicationContribution {
     return true;
   }
 
-  async selectConfigOption({
+  async selectConfigOption(
+    {
       fqbn,
       option,
       selectedValue,
-  }: {
-    fqbn: string;
-    option: string;
-    selectedValue: string;
-  }): Promise<boolean> {
+    }: { fqbn: string; option: string; selectedValue: string }
+  ): Promise<boolean> {
     const data = deepClone(await this.getData(fqbn));
     const { configOptions } = data;
     const configOption = configOptions.find((c) => c.option === option);

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

@@ -1,21 +1,16 @@
-import { TabBarToolbar } from '@theia/core/lib/browser/shell/tab-bar-toolbar/tab-bar-toolbar';
-import { codicon } from '@theia/core/lib/browser/widgets/widget';
+import * as React from '@theia/core/shared/react';
+import * as ReactDOM from '@theia/core/shared/react-dom';
 import { CommandRegistry } from '@theia/core/lib/common/command';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { Port } from '../../common/protocol';
+import { OpenBoardsConfig } from '../contributions/open-boards-config';
 import {
-  Disposable,
-  DisposableCollection,
-} from '@theia/core/lib/common/disposable';
-import { nls } from '@theia/core/lib/common/nls';
-import React from '@theia/core/shared/react';
-import ReactDOM from '@theia/core/shared/react-dom';
-import classNames from 'classnames';
-import { boardIdentifierLabel, Port } from '../../common/protocol';
-import { BoardListItemUI } from '../../common/protocol/board-list';
-import { assertUnreachable } from '../../common/utils';
-import type {
-  BoardListUI,
   BoardsServiceProvider,
+  AvailableBoard,
 } from './boards-service-provider';
+import { nls } from '@theia/core/lib/common';
+import classNames from 'classnames';
+import { BoardsConfig } from './boards-config';
 
 export interface BoardsDropDownListCoords {
   readonly top: number;
@@ -27,18 +22,18 @@ export interface BoardsDropDownListCoords {
 export namespace BoardsDropDown {
   export interface Props {
     readonly coords: BoardsDropDownListCoords | 'hidden';
-    readonly boardList: BoardListUI;
+    readonly items: Array<AvailableBoard & { onClick: () => void; port: Port }>;
     readonly openBoardsConfig: () => void;
-    readonly hide: () => void;
   }
 }
 
-export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
-  private dropdownElement: HTMLElement;
+export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
+  protected dropdownElement: HTMLElement;
   private listRef: React.RefObject<HTMLDivElement>;
 
   constructor(props: BoardsDropDown.Props) {
     super(props);
+
     this.listRef = React.createRef();
     let list = document.getElementById('boards-dropdown-container');
     if (!list) {
@@ -56,14 +51,11 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
   }
 
   override render(): React.ReactNode {
-    return ReactDOM.createPortal(
-      this.renderBoardListItems(),
-      this.dropdownElement
-    );
+    return ReactDOM.createPortal(this.renderNode(), this.dropdownElement);
   }
 
-  private renderBoardListItems(): React.ReactNode {
-    const { coords, boardList } = this.props;
+  protected renderNode(): React.ReactNode {
+    const { coords, items } = this.props;
     if (coords === 'hidden') {
       return '';
     }
@@ -82,12 +74,14 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
         tabIndex={0}
       >
         <div className="arduino-boards-dropdown-list--items-container">
-          {boardList.items.map((item, index) =>
-            this.renderBoardListItem({
-              item,
-              selected: index === boardList.selectedIndex,
-            })
-          )}
+          {items
+            .map(({ name, port, selected, onClick }) => ({
+              boardLabel: name,
+              port,
+              selected,
+              onClick,
+            }))
+            .map(this.renderItem)}
         </div>
         <div
           key={footerLabel}
@@ -101,43 +95,31 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
     );
   }
 
-  private readonly onDefaultAction = (item: BoardListItemUI): unknown => {
-    const { boardList, hide } = this.props;
-    const { type, params } = item.defaultAction;
-    hide();
-    switch (type) {
-      case 'select-boards-config': {
-        return boardList.select(params);
-      }
-      case 'edit-boards-config': {
-        return boardList.edit(params);
-      }
-      default:
-        return assertUnreachable(type);
+  protected renderItem({
+    boardLabel,
+    port,
+    selected,
+    onClick,
+  }: {
+    boardLabel: string;
+    port: Port;
+    selected?: boolean;
+    onClick: () => void;
+  }): React.ReactNode {
+    const protocolIcon = iconNameFromProtocol(port.protocol);
+    const onKeyUp = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        onClick();
       }
     };
 
-  private renderBoardListItem({
-    item,
-    selected,
-  }: {
-    item: BoardListItemUI;
-    selected: boolean;
-  }): React.ReactNode {
-    const { boardLabel, portLabel, portProtocol, tooltip } = item.labels;
-    const port = item.port;
-    const onKeyUp = (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        this.onDefaultAction(item);
-      }
-    };
     return (
       <div
-        key={`board-item--${Port.keyOf(port)}`}
+        key={`board-item--${boardLabel}-${port.address}`}
         className={classNames('arduino-boards-dropdown-item', {
           'arduino-boards-dropdown-item--selected': selected,
         })}
-        onClick={() => this.onDefaultAction(item)}
+        onClick={onClick}
         onKeyUp={onKeyUp}
         tabIndex={0}
       >
@@ -145,81 +127,21 @@ export class BoardListDropDown extends React.Component<BoardsDropDown.Props> {
           className={classNames(
             'arduino-boards-dropdown-item--protocol',
             'fa',
-            iconNameFromProtocol(portProtocol)
+            protocolIcon
           )}
         />
-        <div className="arduino-boards-dropdown-item--label" title={tooltip}>
-          <div className="arduino-boards-dropdown-item--board-header">
+        <div
+          className="arduino-boards-dropdown-item--label"
+          title={`${boardLabel}\n${port.address}`}
+        >
           <div className="arduino-boards-dropdown-item--board-label noWrapInfo noselect">
             {boardLabel}
           </div>
-          </div>
           <div className="arduino-boards-dropdown-item--port-label noWrapInfo noselect">
-            {portLabel}
+            {port.addressLabel}
           </div>
         </div>
-        {this.renderActions(item)}
-      </div>
-    );
-  }
-
-  private renderActions(item: BoardListItemUI): React.ReactNode {
-    const { boardList, hide } = this.props;
-    const { revert, edit } = item.otherActions;
-    if (!edit && !revert) {
-      return undefined;
-    }
-    const handleOnClick = (
-      event: React.MouseEvent<HTMLElement, MouseEvent>,
-      callback: () => void
-    ) => {
-      event.preventDefault();
-      event.stopPropagation();
-      hide();
-      callback();
-    };
-    return (
-      <div className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR}>
-        {edit && (
-          <div
-            className={`${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} enabled`}
-          >
-            {
-              <div
-                id="edit"
-                className={codicon('pencil', true)}
-                title={nls.localize(
-                  'arduino/board/editBoardsConfig',
-                  'Edit Board and Port...'
-                )}
-                onClick={(event) =>
-                  handleOnClick(event, () => boardList.edit(edit.params))
-                }
-              />
-            }
-          </div>
-        )}
-        {revert && (
-          <div
-            className={`${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} enabled`}
-          >
-            {
-              <div
-                id="revert"
-                className={codicon('discard', true)}
-                title={nls.localize(
-                  'arduino/board/revertBoardsConfig',
-                  "Use '{0}' discovered on '{1}'",
-                  boardIdentifierLabel(revert.params.selectedBoard),
-                  item.labels.portLabel
-                )}
-                onClick={(event) =>
-                  handleOnClick(event, () => boardList.select(revert.params))
-                }
-              />
-            }
-          </div>
-        )}
+        {selected ? <div className="fa fa-check" /> : ''}
       </div>
     );
   }
@@ -231,27 +153,26 @@ export class BoardsToolBarItem extends React.Component<
 > {
   static TOOLBAR_ID: 'boards-toolbar';
 
-  private readonly toDispose: DisposableCollection;
+  protected readonly toDispose: DisposableCollection =
+    new DisposableCollection();
 
   constructor(props: BoardsToolBarItem.Props) {
     super(props);
-    const { boardList } = props.boardsServiceProvider;
+
+    const { availableBoards } = props.boardsServiceProvider;
     this.state = {
-      boardList,
+      availableBoards,
       coords: 'hidden',
     };
-    const listener = () => this.setState({ coords: 'hidden' });
-    document.addEventListener('click', listener);
-    this.toDispose = new DisposableCollection(
-      Disposable.create(() => document.removeEventListener('click', listener))
-    );
+
+    document.addEventListener('click', () => {
+      this.setState({ coords: 'hidden' });
+    });
   }
 
   override componentDidMount(): void {
-    this.toDispose.push(
-      this.props.boardsServiceProvider.onBoardListDidChange((boardList) =>
-        this.setState({ boardList })
-      )
+    this.props.boardsServiceProvider.onAvailableBoardsChanged(
+      (availableBoards) => this.setState({ availableBoards })
     );
   }
 
@@ -259,7 +180,7 @@ export class BoardsToolBarItem extends React.Component<
     this.toDispose.dispose();
   }
 
-  private readonly show = (event: React.MouseEvent<HTMLElement>): void => {
+  protected readonly show = (event: React.MouseEvent<HTMLElement>): void => {
     const { currentTarget: element } = event;
     if (element instanceof HTMLElement) {
       if (this.state.coords === 'hidden') {
@@ -280,26 +201,31 @@ export class BoardsToolBarItem extends React.Component<
     event.nativeEvent.stopImmediatePropagation();
   };
 
-  private readonly hide = () => {
-    this.setState({ coords: 'hidden' });
-  };
-
   override render(): React.ReactNode {
-    const { coords, boardList } = this.state;
-    const { boardLabel, selected, portProtocol, tooltip } = boardList.labels;
-    const protocolIcon = portProtocol
-      ? iconNameFromProtocol(portProtocol)
+    const { coords, availableBoards } = this.state;
+    const { selectedBoard, selectedPort } =
+      this.props.boardsServiceProvider.boardsConfig;
+
+    const boardLabel =
+      selectedBoard?.name ||
+      nls.localize('arduino/board/selectBoard', 'Select Board');
+    const selectedPortLabel = portLabel(selectedPort?.address);
+
+    const isConnected = Boolean(selectedBoard && selectedPort);
+    const protocolIcon = isConnected
+      ? iconNameFromProtocol(selectedPort?.protocol || '')
       : null;
     const protocolIconClassNames = classNames(
       'arduino-boards-toolbar-item--protocol',
       'fa',
       protocolIcon
     );
+
     return (
       <React.Fragment>
         <div
           className="arduino-boards-toolbar-item-container"
-          title={tooltip}
+          title={selectedPortLabel}
           onClick={this.show}
         >
           {protocolIcon && <div className={protocolIconClassNames} />}
@@ -308,22 +234,57 @@ export class BoardsToolBarItem extends React.Component<
               'arduino-boards-toolbar-item--label',
               'noWrapInfo',
               'noselect',
-              { 'arduino-boards-toolbar-item--label-connected': selected }
+              { 'arduino-boards-toolbar-item--label-connected': isConnected }
             )}
           >
             {boardLabel}
           </div>
           <div className="fa fa-caret-down caret" />
         </div>
-        <BoardListDropDown
+        <BoardsDropDown
           coords={coords}
-          boardList={boardList}
-          openBoardsConfig={() => boardList.edit({ query: '' })}
-          hide={this.hide}
-        />
+          items={availableBoards
+            .filter(AvailableBoard.hasPort)
+            .map((board) => ({
+              ...board,
+              onClick: () => {
+                if (!board.fqbn) {
+                  const previousBoardConfig =
+                    this.props.boardsServiceProvider.boardsConfig;
+                  this.props.boardsServiceProvider.boardsConfig = {
+                    selectedPort: board.port,
+                  };
+                  this.openDialog(previousBoardConfig);
+                } else {
+                  this.props.boardsServiceProvider.boardsConfig = {
+                    selectedBoard: board,
+                    selectedPort: board.port,
+                  };
+                }
+                this.setState({ coords: 'hidden' });
+              },
+            }))}
+          openBoardsConfig={this.openDialog}
+        ></BoardsDropDown>
       </React.Fragment>
     );
   }
+
+  protected openDialog = async (
+    previousBoardConfig?: BoardsConfig.Config
+  ): Promise<void> => {
+    const selectedBoardConfig =
+      await this.props.commands.executeCommand<BoardsConfig.Config>(
+        OpenBoardsConfig.Commands.OPEN_DIALOG.id
+      );
+    if (
+      previousBoardConfig &&
+      (!selectedBoardConfig?.selectedPort ||
+        !selectedBoardConfig?.selectedBoard)
+    ) {
+      this.props.boardsServiceProvider.boardsConfig = previousBoardConfig;
+    }
+  };
 }
 export namespace BoardsToolBarItem {
   export interface Props {
@@ -332,7 +293,7 @@ export namespace BoardsToolBarItem {
   }
 
   export interface State {
-    boardList: BoardListUI;
+    availableBoards: AvailableBoard[];
     coords: BoardsDropDownListCoords | 'hidden';
   }
 }
@@ -343,10 +304,19 @@ function iconNameFromProtocol(protocol: string): string {
       return 'fa-arduino-technology-usb';
     case 'network':
       return 'fa-arduino-technology-connection';
-    // it is fine to assign dedicated icons to the protocols used by the official boards,
-    // but other than that it is best to avoid implementing any special handling
-    // for specific protocols in the IDE codebase.
+    /* 
+      Bluetooth ports are not listed yet from the CLI;
+      Not sure about the naming ('bluetooth'); make sure it's correct before uncommenting the following lines
+    */
+    // case 'bluetooth':
+    //   return 'fa-arduino-technology-bluetooth';
     default:
       return 'fa-arduino-technology-3dimensionscube';
   }
 }
+
+function portLabel(portName?: string): string {
+  return portName
+    ? nls.localize('arduino/board/portLabel', 'Port: {0}', portName)
+    : nls.localize('arduino/board/disconnected', 'Disconnected');
+}

arduino-ide-extension/src/browser/components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 
 export type ProgressBarProps = {
   percent?: number;

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

@@ -1,24 +1,26 @@
+import { inject, injectable } from '@theia/core/shared/inversify';
+import * as moment from 'moment';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import { isOSX, isWindows } from '@theia/core/lib/common/os';
 import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
-import { nls } from '@theia/core/lib/common/nls';
-import { isOSX, isWindows } from '@theia/core/lib/common/os';
-import { inject, injectable } from '@theia/core/shared/inversify';
-import moment from 'moment';
-import { AppService } from '../app-service';
-import { ArduinoMenus } from '../menu/arduino-menus';
 import {
-  Command,
-  CommandRegistry,
   Contribution,
+  Command,
   MenuModelRegistry,
+  CommandRegistry,
 } from './contribution';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { ConfigService } from '../../common/protocol';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class About extends Contribution {
   @inject(ClipboardService)
-  private readonly clipboardService: ClipboardService;
-  @inject(AppService)
-  private readonly appService: AppService;
+  protected readonly clipboardService: ClipboardService;
+
+  @inject(ConfigService)
+  protected readonly configService: ConfigService;
 
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(About.Commands.ABOUT_APP, {
@@ -38,18 +40,17 @@ export class About extends Contribution {
     });
   }
 
-  private async showAbout(): Promise<void> {
-    const appInfo = await this.appService.info();
-    const { appVersion, cliVersion, buildDate } = appInfo;
-
+  async showAbout(): Promise<void> {
+    const version = await this.configService.getVersion();
+    const buildDate = this.buildDate;
     const detail = (showAll: boolean) =>
       nls.localize(
         'arduino/about/detail',
         'Version: {0}\nDate: {1}{2}\nCLI Version: {3}\n\n{4}',
-        appVersion,
+        remote.app.getVersion(),
         buildDate ? buildDate : nls.localize('', 'dev build'),
         buildDate && showAll ? ` (${this.ago(buildDate)})` : '',
-        cliVersion,
+        version,
         nls.localize(
           'arduino/about/copyright',
           'Copyright © {0} Arduino SA',
@@ -59,7 +60,9 @@ export class About extends Contribution {
     const ok = nls.localize('vscode/issueMainService/ok', 'OK');
     const copy = nls.localize('vscode/textInputActions/copy', 'Copy');
     const buttons = !isWindows && !isOSX ? [copy, ok] : [ok, copy];
-    const { response } = await this.dialogService.showMessageBox({
+    const { response } = await remote.dialog.showMessageBox(
+      remote.getCurrentWindow(),
+      {
         message: `${this.applicationName}`,
         title: `${this.applicationName}`,
         type: 'info',
@@ -68,18 +71,23 @@ export class About extends Contribution {
         noLink: true,
         defaultId: buttons.indexOf(ok),
         cancelId: buttons.indexOf(ok),
-    });
+      }
+    );
 
     if (buttons[response] === copy) {
       await this.clipboardService.writeText(detail(false).trim());
     }
   }
 
-  private get applicationName(): string {
+  protected get applicationName(): string {
     return FrontendApplicationConfigProvider.get().applicationName;
   }
 
-  private ago(isoTime: string): string {
+  protected get buildDate(): string | undefined {
+    return FrontendApplicationConfigProvider.get().buildDate;
+  }
+
+  protected ago(isoTime: string): string {
     const now = moment(Date.now());
     const other = moment(isoTime);
     let result = now.diff(other, 'minute');

arduino-ide-extension/src/browser/contributions/add-file.ts

@@ -1,21 +1,22 @@
-import { nls } from '@theia/core/lib/common/nls';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { FileDialogService } from '@theia/filesystem/lib/browser';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { CurrentSketch } from '../sketches-service-client-impl';
 import {
+  SketchContribution,
   Command,
   CommandRegistry,
   MenuModelRegistry,
-  Sketch,
-  SketchContribution,
   URI,
+  Sketch,
 } from './contribution';
+import { FileDialogService } from '@theia/filesystem/lib/browser';
+import { nls } from '@theia/core/lib/common';
+import { CurrentSketch } from '../sketches-service-client-impl';
 
 @injectable()
 export class AddFile extends SketchContribution {
   @inject(FileDialogService)
-  private readonly fileDialogService: FileDialogService; // TODO: use dialogService
+  private readonly fileDialogService: FileDialogService;
 
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(AddFile.Commands.ADD_FILE, {
@@ -49,7 +50,7 @@ export class AddFile extends SketchContribution {
     const { uri: targetUri, filename } = this.resolveTarget(sketch, toAddUri);
     const exists = await this.fileService.exists(targetUri);
     if (exists) {
-      const { response } = await this.dialogService.showMessageBox({
+      const { response } = await remote.dialog.showMessageBox({
         type: 'question',
         title: nls.localize('arduino/contributions/replaceTitle', 'Replace'),
         buttons: [

arduino-ide-extension/src/browser/contributions/add-zip-library.ts

@@ -1,4 +1,5 @@
 import { inject, injectable } from '@theia/core/shared/inversify';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import URI from '@theia/core/lib/common/uri';
 import { ConfirmDialog } from '@theia/core/lib/browser/dialogs';
 import { ArduinoMenus } from '../menu/arduino-menus';
@@ -41,7 +42,9 @@ export class AddZipLibrary extends SketchContribution {
   private async addZipLibrary(): Promise<void> {
     const homeUri = await this.envVariableServer.getHomeDirUri();
     const defaultPath = await this.fileService.fsPath(new URI(homeUri));
-    const { canceled, filePaths } = await this.dialogService.showOpenDialog({
+    const { canceled, filePaths } = await remote.dialog.showOpenDialog(
+      remote.getCurrentWindow(),
+      {
         title: nls.localize(
           'arduino/selectZip',
           "Select a zip file containing the library you'd like to add"
@@ -54,7 +57,8 @@ export class AddZipLibrary extends SketchContribution {
             extensions: ['zip'],
           },
         ],
-    });
+      }
+    );
     if (!canceled && filePaths.length) {
       const zipUri = await this.fileSystemExt.getUri(filePaths[0]);
       try {

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

@@ -1,5 +1,6 @@
 import { injectable } from '@theia/core/shared/inversify';
-import dateFormat from 'dateformat';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import * as dateFormat from 'dateformat';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import {
   SketchContribution,
@@ -38,13 +39,16 @@ export class ArchiveSketch extends SketchContribution {
     const defaultContainerUri = await this.defaultUri();
     const defaultUri = defaultContainerUri.resolve(archiveBasename);
     const defaultPath = await this.fileService.fsPath(defaultUri);
-    const { filePath, canceled } = await this.dialogService.showSaveDialog({
+    const { filePath, canceled } = await remote.dialog.showSaveDialog(
+      remote.getCurrentWindow(),
+      {
         title: nls.localize(
           'arduino/sketch/saveSketchAs',
           'Save sketch folder as...'
         ),
         defaultPath,
-    });
+      }
+    );
     if (!filePath || canceled) {
       return;
     }

arduino-ide-extension/src/browser/contributions/board-selection.ts

@@ -1,58 +1,58 @@
-import {
-  Disposable,
-  DisposableCollection,
-} from '@theia/core/lib/common/disposable';
-import { MenuModelRegistry } from '@theia/core/lib/common/menu/menu-model-registry';
-import type { MenuPath } from '@theia/core/lib/common/menu/menu-types';
-import { nls } from '@theia/core/lib/common/nls';
-import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { MainMenuManager } from '../../common/main-menu-manager';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import { MenuModelRegistry } from '@theia/core/lib/common/menu';
 import {
-  BoardsService,
-  BoardWithPackage,
-  createPlatformIdentifier,
-  getBoardInfo,
-  InstalledBoardWithPackage,
-  platformIdentifierEquals,
-  Port,
-  serializePlatformIdentifier,
-} from '../../common/protocol';
-import type { BoardList } from '../../common/protocol/board-list';
+  DisposableCollection,
+  Disposable,
+} from '@theia/core/lib/common/disposable';
+import { BoardsConfig } from '../boards/boards-config';
+import { MainMenuManager } from '../../common/main-menu-manager';
 import { BoardsListWidget } from '../boards/boards-list-widget';
+import { NotificationCenter } from '../notification-center';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import {
   ArduinoMenus,
   PlaceholderMenuNode,
   unregisterSubmenu,
 } from '../menu/arduino-menus';
-import { NotificationCenter } from '../notification-center';
-import { Command, CommandRegistry, SketchContribution } from './contribution';
+import {
+  BoardsService,
+  InstalledBoardWithPackage,
+  AvailablePorts,
+  Port,
+  getBoardInfo,
+} from '../../common/protocol';
+import { SketchContribution, Command, CommandRegistry } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardSelection extends SketchContribution {
   @inject(CommandRegistry)
-  private readonly commandRegistry: CommandRegistry;
-  @inject(MainMenuManager)
-  private readonly mainMenuManager: MainMenuManager;
-  @inject(MenuModelRegistry)
-  private readonly menuModelRegistry: MenuModelRegistry;
-  @inject(NotificationCenter)
-  private readonly notificationCenter: NotificationCenter;
-  @inject(BoardsService)
-  private readonly boardsService: BoardsService;
-  @inject(BoardsServiceProvider)
-  private readonly boardsServiceProvider: BoardsServiceProvider;
+  protected readonly commandRegistry: CommandRegistry;
 
-  private readonly toDisposeBeforeMenuRebuild = new DisposableCollection();
-  // do not query installed platforms on every change
-  private _installedBoards: Deferred<InstalledBoardWithPackage[]> | undefined;
+  @inject(MainMenuManager)
+  protected readonly mainMenuManager: MainMenuManager;
+
+  @inject(MenuModelRegistry)
+  protected readonly menuModelRegistry: MenuModelRegistry;
+
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
+
+  @inject(BoardsService)
+  protected readonly boardsService: BoardsService;
+
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceProvider: BoardsServiceProvider;
+
+  protected readonly toDisposeBeforeMenuRebuild = new DisposableCollection();
 
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(BoardSelection.Commands.GET_BOARD_INFO, {
       execute: async () => {
         const boardInfo = await getBoardInfo(
-          this.boardsServiceProvider.boardList
+          this.boardsServiceProvider.boardsConfig.selectedPort,
+          this.boardsService.getState()
         );
         if (typeof boardInfo === 'string') {
           this.messageService.info(boardInfo);
@@ -65,7 +65,7 @@ VID: ${VID}
 PID: ${PID}
 SN: ${SN}
 `.trim();
-        await this.dialogService.showMessageBox({
+        await remote.dialog.showMessageBox(remote.getCurrentWindow(), {
           message: nls.localize('arduino/board/boardInfo', 'Board Info'),
           title: nls.localize('arduino/board/boardInfo', 'Board Info'),
           type: 'info',
@@ -77,35 +77,34 @@ SN: ${SN}
   }
 
   override onStart(): void {
-    this.notificationCenter.onPlatformDidInstall(() => this.updateMenus(true));
-    this.notificationCenter.onPlatformDidUninstall(() =>
-      this.updateMenus(true)
+    this.notificationCenter.onPlatformDidInstall(() => this.updateMenus());
+    this.notificationCenter.onPlatformDidUninstall(() => this.updateMenus());
+    this.boardsServiceProvider.onBoardsConfigChanged(() => this.updateMenus());
+    this.boardsServiceProvider.onAvailableBoardsChanged(() =>
+      this.updateMenus()
+    );
+    this.boardsServiceProvider.onAvailablePortsChanged(() =>
+      this.updateMenus()
     );
-    this.boardsServiceProvider.onBoardListDidChange(() => this.updateMenus());
   }
 
   override async onReady(): Promise<void> {
     this.updateMenus();
   }
 
-  private async updateMenus(discardCache = false): Promise<void> {
-    if (discardCache) {
-      this._installedBoards?.reject();
-      this._installedBoards = undefined;
-    }
-    if (!this._installedBoards) {
-      this._installedBoards = new Deferred();
-      this.installedBoards().then((installedBoards) =>
-        this._installedBoards?.resolve(installedBoards)
-      );
-    }
-    const installedBoards = await this._installedBoards.promise;
-    this.rebuildMenus(installedBoards, this.boardsServiceProvider.boardList);
+  protected async updateMenus(): Promise<void> {
+    const [installedBoards, availablePorts, config] = await Promise.all([
+      this.installedBoards(),
+      this.boardsService.getState(),
+      this.boardsServiceProvider.boardsConfig,
+    ]);
+    this.rebuildMenus(installedBoards, availablePorts, config);
   }
 
-  private rebuildMenus(
+  protected rebuildMenus(
     installedBoards: InstalledBoardWithPackage[],
-    boardList: BoardList
+    availablePorts: AvailablePorts,
+    config: BoardsConfig.Config
   ): void {
     this.toDisposeBeforeMenuRebuild.dispose();
 
@@ -114,8 +113,7 @@ SN: ${SN}
       ...ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP,
       '1_boards',
     ];
-    const { selectedBoard, selectedPort } = boardList.boardsConfig;
-    const boardsSubmenuLabel = selectedBoard?.name;
+    const boardsSubmenuLabel = config.selectedBoard?.name;
     // Note: The submenu order starts from `100` because `Auto Format`, `Serial Monitor`, etc starts from `0` index.
     // The board specific items, and the rest, have order with `z`. We needed something between `0` and `z` with natural-order.
     this.menuModelRegistry.registerSubmenu(
@@ -135,7 +133,7 @@ SN: ${SN}
 
     // Ports submenu
     const portsSubmenuPath = ArduinoMenus.TOOLS__PORTS_SUBMENU;
-    const portsSubmenuLabel = selectedPort?.address;
+    const portsSubmenuLabel = config.selectedPort?.address;
     this.menuModelRegistry.registerSubmenu(
       portsSubmenuPath,
       nls.localize(
@@ -174,85 +172,45 @@ SN: ${SN}
       label: `${BoardsListWidget.WIDGET_LABEL}...`,
     });
 
-    const selectedBoardPlatformId = selectedBoard
-      ? createPlatformIdentifier(selectedBoard)
-      : undefined;
-
-    // Keys are the vendor IDs
-    type BoardsPerVendor = Record<string, BoardWithPackage[]>;
-    // Group boards by their platform names. The keys are the platform names as menu labels.
-    // If there is a platform name (menu label) collision, refine the menu label with the vendor ID.
-    const groupedBoards = new Map<string, BoardsPerVendor>();
-    for (const board of installedBoards) {
-      const { packageId, packageName } = board;
-      const { vendorId } = packageId;
-      let boardsPerPackageName = groupedBoards.get(packageName);
-      if (!boardsPerPackageName) {
-        boardsPerPackageName = {} as BoardsPerVendor;
-        groupedBoards.set(packageName, boardsPerPackageName);
-      }
-      let boardPerVendor: BoardWithPackage[] | undefined =
-        boardsPerPackageName[vendorId];
-      if (!boardPerVendor) {
-        boardPerVendor = [];
-        boardsPerPackageName[vendorId] = boardPerVendor;
-      }
-      boardPerVendor.push(board);
-    }
-
     // Installed boards
-    Array.from(groupedBoards.entries()).forEach(
-      ([packageName, boardsPerPackage]) => {
-        const useVendorSuffix = Object.keys(boardsPerPackage).length > 1;
-        Object.entries(boardsPerPackage).forEach(([vendorId, boards]) => {
-          let platformMenuPath: MenuPath | undefined = undefined;
-          boards.forEach((board, index) => {
-            const { packageId, fqbn, name, manuallyInstalled } = board;
-            // create the platform submenu once.
-            // creating and registering the same submenu twice in Theia is a noop, though.
-            if (!platformMenuPath) {
-              let packageLabel =
+    installedBoards.forEach((board, index) => {
+      const { packageId, packageName, fqbn, name, manuallyInstalled } = board;
+
+      const packageLabel =
         packageName +
         `${
           manuallyInstalled
-                    ? nls.localize(
-                        'arduino/board/inSketchbook',
-                        ' (in Sketchbook)'
-                      )
+            ? nls.localize('arduino/board/inSketchbook', ' (in Sketchbook)')
             : ''
         }`;
-              if (
-                selectedBoardPlatformId &&
-                platformIdentifierEquals(packageId, selectedBoardPlatformId)
-              ) {
-                packageLabel = `● ${packageLabel}`;
-              }
-              if (useVendorSuffix) {
-                packageLabel += ` (${vendorId})`;
-              }
       // Platform submenu
-              platformMenuPath = [
-                ...boardsPackagesGroup,
-                serializePlatformIdentifier(packageId),
-              ];
-              this.menuModelRegistry.registerSubmenu(
-                platformMenuPath,
-                packageLabel,
-                {
+      const platformMenuPath = [...boardsPackagesGroup, packageId];
+      // Note: Registering the same submenu twice is a noop. No need to group the boards per platform.
+      this.menuModelRegistry.registerSubmenu(platformMenuPath, packageLabel, {
         order: packageName.toLowerCase(),
-                }
-              );
-            }
+      });
 
       const id = `arduino-select-board--${fqbn}`;
       const command = { id };
       const handler = {
-              execute: () =>
-                this.boardsServiceProvider.updateConfig({
-                  name: name,
-                  fqbn: fqbn,
-                }),
-              isToggled: () => fqbn === selectedBoard?.fqbn,
+        execute: () => {
+          if (
+            fqbn !== this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn
+          ) {
+            this.boardsServiceProvider.boardsConfig = {
+              selectedBoard: {
+                name,
+                fqbn,
+                port: this.boardsServiceProvider.boardsConfig.selectedBoard
+                  ?.port, // TODO: verify!
+              },
+              selectedPort:
+                this.boardsServiceProvider.boardsConfig.selectedPort,
+            };
+          }
+        },
+        isToggled: () =>
+          fqbn === this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn,
       };
 
       // Board menu
@@ -263,27 +221,20 @@ SN: ${SN}
       };
       this.commandRegistry.registerCommand(command, handler);
       this.toDisposeBeforeMenuRebuild.push(
-              Disposable.create(() =>
-                this.commandRegistry.unregisterCommand(command)
-              )
-            );
-            this.menuModelRegistry.registerMenuAction(
-              platformMenuPath,
-              menuAction
+        Disposable.create(() => this.commandRegistry.unregisterCommand(command))
       );
+      this.menuModelRegistry.registerMenuAction(platformMenuPath, menuAction);
       // Note: we do not dispose the menu actions individually. Calling `unregisterSubmenu` on the parent will wipe the children menu nodes recursively.
     });
-        });
-      }
-    );
 
-    // Detected ports
+    // Installed ports
     const registerPorts = (
       protocol: string,
-      ports: ReturnType<BoardList['ports']>,
-      protocolOrder: number
+      protocolOrder: number,
+      ports: AvailablePorts
     ) => {
-      if (!ports.length) {
+      const portIDs = Object.keys(ports);
+      if (!portIDs.length) {
         return;
       }
 
@@ -308,26 +259,46 @@ SN: ${SN}
         )
       );
 
-      for (let i = 0; i < ports.length; i++) {
-        const { port, boards } = ports[i];
-        const portKey = Port.keyOf(port);
+      // First we show addresses with recognized boards connected,
+      // then all the rest.
+      const sortedIDs = Object.keys(ports).sort(
+        (left: string, right: string): number => {
+          const [, leftBoards] = ports[left];
+          const [, rightBoards] = ports[right];
+          return rightBoards.length - leftBoards.length;
+        }
+      );
+
+      for (let i = 0; i < sortedIDs.length; i++) {
+        const portID = sortedIDs[i];
+        const [port, boards] = ports[portID];
         let label = `${port.addressLabel}`;
-        if (boards?.length) {
+        if (boards.length) {
           const boardsList = boards.map((board) => board.name).join(', ');
           label = `${label} (${boardsList})`;
         }
-        const id = `arduino-select-port--${portKey}`;
+        const id = `arduino-select-port--${portID}`;
         const command = { id };
         const handler = {
           execute: () => {
-            this.boardsServiceProvider.updateConfig({
-              protocol: port.protocol,
-              address: port.address,
-            });
-          },
-          isToggled: () => {
-            return i === ports.matchingIndex;
+            if (
+              !Port.sameAs(
+                port,
+                this.boardsServiceProvider.boardsConfig.selectedPort
+              )
+            ) {
+              this.boardsServiceProvider.boardsConfig = {
+                selectedBoard:
+                  this.boardsServiceProvider.boardsConfig.selectedBoard,
+                selectedPort: port,
+              };
+            }
           },
+          isToggled: () =>
+            Port.sameAs(
+              port,
+              this.boardsServiceProvider.boardsConfig.selectedPort
+            ),
         };
         const menuAction = {
           commandId: id,
@@ -344,12 +315,22 @@ SN: ${SN}
       }
     };
 
-    const groupedPorts = boardList.portsGroupedByProtocol();
+    const grouped = AvailablePorts.groupByProtocol(availablePorts);
     let protocolOrder = 100;
-    Object.entries(groupedPorts).forEach(([protocol, ports]) => {
-      registerPorts(protocol, ports, protocolOrder);
-      protocolOrder += 100;
+    // We first show serial and network ports, then all the rest
+    ['serial', 'network'].forEach((protocol) => {
+      const ports = grouped.get(protocol);
+      if (ports) {
+        registerPorts(protocol, protocolOrder, ports);
+        grouped.delete(protocol);
+        protocolOrder = protocolOrder + 100;
+      }
     });
+    grouped.forEach((ports, protocol) => {
+      registerPorts(protocol, protocolOrder, ports);
+      protocolOrder = protocolOrder + 100;
+    });
+
     this.mainMenuManager.update();
   }
 

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

@@ -1,26 +1,26 @@
-import { Dialog } from '@theia/core/lib/browser/dialogs';
+import { injectable } from '@theia/core/shared/inversify';
+import { toArray } from '@theia/core/shared/@phosphor/algorithm';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+import type { MaybePromise } from '@theia/core/lib/common/types';
 import type {
   FrontendApplication,
   OnWillStopAction,
 } from '@theia/core/lib/browser/frontend-application';
-import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
 import { nls } from '@theia/core/lib/common/nls';
-import type { MaybePromise } from '@theia/core/lib/common/types';
-import { toArray } from '@theia/core/shared/@phosphor/algorithm';
-import { inject, injectable } from '@theia/core/shared/inversify';
-import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { CurrentSketch } from '../sketches-service-client-impl';
-import { WindowServiceExt } from '../theia/core/window-service-ext';
 import {
+  SketchContribution,
   Command,
   CommandRegistry,
-  KeybindingRegistry,
   MenuModelRegistry,
+  KeybindingRegistry,
   Sketch,
-  SketchContribution,
   URI,
 } from './contribution';
+import { Dialog } from '@theia/core/lib/browser/dialogs';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import { SaveAsSketch } from './save-as-sketch';
 
 /**
@@ -28,9 +28,6 @@ import { SaveAsSketch } from './save-as-sketch';
  */
 @injectable()
 export class Close extends SketchContribution {
-  @inject(WindowServiceExt)
-  private readonly windowServiceExt: WindowServiceExt;
-
   private shell: ApplicationShell | undefined;
 
   override onStart(app: FrontendApplication): MaybePromise<void> {
@@ -59,7 +56,7 @@ export class Close extends SketchContribution {
             }
           }
         }
-        return this.windowServiceExt.close();
+        return remote.getCurrentWindow().close();
       },
     });
   }
@@ -153,7 +150,9 @@ export class Close extends SketchContribution {
   }
 
   private async prompt(isTemp: boolean): Promise<Prompt> {
-    const { response } = await this.dialogService.showMessageBox({
+    const { response } = await remote.dialog.showMessageBox(
+      remote.getCurrentWindow(),
+      {
         message: nls.localize(
           'arduino/sketch/saveSketch',
           'Save your sketch to open it again later.'
@@ -169,7 +168,8 @@ export class Close extends SketchContribution {
           nls.localizeByDefault(isTemp ? 'Save As...' : 'Save'),
         ],
         defaultId: 2, // `Save`/`Save As...` button index is the default.
-    });
+      }
+    );
     switch (response) {
       case 0:
         return Prompt.DoNotSave;

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

@@ -67,8 +67,6 @@ import { WorkspaceService } from '../theia/workspace/workspace-service';
 import { MainMenuManager } from '../../common/main-menu-manager';
 import { ConfigServiceClient } from '../config/config-service-client';
 import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
-import { DialogService } from '../dialog-service';
-import { ApplicationConnectionStatusContribution } from '../theia/core/connection-status-service';
 
 export {
   Command,
@@ -117,9 +115,6 @@ export abstract class Contribution
   @inject(MainMenuManager)
   protected readonly menuManager: MainMenuManager;
 
-  @inject(DialogService)
-  protected readonly dialogService: DialogService;
-
   @postConstruct()
   protected init(): void {
     this.appStateService.reachedState('ready').then(() => this.onReady());
@@ -173,9 +168,6 @@ export abstract class SketchContribution extends Contribution {
   @inject(EnvVariablesServer)
   protected readonly envVariableServer: EnvVariablesServer;
 
-  @inject(ApplicationConnectionStatusContribution)
-  protected readonly connectionStatusService: ApplicationConnectionStatusContribution;
-
   protected async sourceOverride(): Promise<Record<string, string>> {
     const override: Record<string, string> = {};
     const sketch = await this.sketchServiceClient.currentSketch();

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

@@ -5,10 +5,8 @@ import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
 import { NotificationCenter } from '../notification-center';
 import {
   Board,
-  BoardIdentifier,
   BoardsService,
   ExecutableService,
-  isBoardIdentifierChangeEvent,
   Sketch,
 } from '../../common/protocol';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
@@ -90,11 +88,9 @@ export class Debug extends SketchContribution {
             : Debug.Commands.START_DEBUGGING.label
         }`)
     );
-    this.boardsServiceProvider.onBoardsConfigDidChange((event) => {
-      if (isBoardIdentifierChangeEvent(event)) {
-        this.refreshState(event.selectedBoard);
-      }
-    });
+    this.boardsServiceProvider.onBoardsConfigChanged(({ selectedBoard }) =>
+      this.refreshState(selectedBoard)
+    );
     this.notificationCenter.onPlatformDidInstall(() => this.refreshState());
     this.notificationCenter.onPlatformDidUninstall(() => this.refreshState());
   }
@@ -173,7 +169,7 @@ export class Debug extends SketchContribution {
   }
 
   private async startDebug(
-    board: BoardIdentifier | undefined = this.boardsServiceProvider.boardsConfig
+    board: Board | undefined = this.boardsServiceProvider.boardsConfig
       .selectedBoard
   ): Promise<void> {
     if (!board) {

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

@@ -1,3 +1,5 @@
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import { ipcRenderer } from '@theia/core/electron-shared/electron';
 import { Dialog } from '@theia/core/lib/browser/dialogs';
 import { NavigatableWidget } from '@theia/core/lib/browser/navigatable-types';
 import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
@@ -8,11 +10,11 @@ import URI from '@theia/core/lib/common/uri';
 import type { Widget } from '@theia/core/shared/@phosphor/widgets';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { SketchesError } from '../../common/protocol';
+import { SCHEDULE_DELETION_SIGNAL } from '../../electron-common/electron-messages';
 import { Sketch } from '../contributions/contribution';
 import { isNotFound } from '../create/typings';
 import { Command, CommandRegistry } from './contribution';
 import { CloudSketchContribution } from './cloud-contribution';
-import { AppService } from '../app-service';
 
 export interface DeleteSketchParams {
   /**
@@ -36,8 +38,6 @@ export class DeleteSketch extends CloudSketchContribution {
   private readonly shell: ApplicationShell;
   @inject(WindowService)
   private readonly windowService: WindowService;
-  @inject(AppService)
-  private readonly appService: AppService;
 
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(DeleteSketch.Commands.DELETE_SKETCH, {
@@ -66,7 +66,7 @@ export class DeleteSketch extends CloudSketchContribution {
     }
     const cloudUri = this.createFeatures.cloudUri(sketch);
     if (willNavigateAway !== 'force') {
-      const { response } = await this.dialogService.showMessageBox({
+      const { response } = await remote.dialog.showMessageBox({
         title: nls.localizeByDefault('Delete'),
         type: 'question',
         buttons: [Dialog.CANCEL, Dialog.OK],
@@ -120,7 +120,7 @@ export class DeleteSketch extends CloudSketchContribution {
   }
 
   private scheduleDeletion(sketch: Sketch): void {
-    this.appService.scheduleDeletion(sketch);
+    ipcRenderer.send(SCHEDULE_DELETION_SIGNAL, sketch);
   }
 
   private async loadSketch(uri: string): Promise<Sketch | undefined> {

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

@@ -1,7 +1,11 @@
-import PQueue from 'p-queue';
+import * as PQueue from 'p-queue';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { CommandHandler, CommandService } from '@theia/core/lib/common/command';
-import { MenuPath, SubMenuOptions } from '@theia/core/lib/common/menu';
+import {
+  MenuPath,
+  CompositeMenuNode,
+  SubMenuOptions,
+} from '@theia/core/lib/common/menu';
 import {
   Disposable,
   DisposableCollection,
@@ -28,8 +32,6 @@ import {
   CoreService,
   SketchesService,
   Sketch,
-  isBoardIdentifierChangeEvent,
-  BoardIdentifier,
 } from '../../common/protocol';
 import { nls } from '@theia/core/lib/common/nls';
 import { unregisterSubmenu } from '../menu/arduino-menus';
@@ -110,7 +112,7 @@ export abstract class Examples extends SketchContribution {
   protected readonly coreService: CoreService;
 
   @inject(BoardsServiceProvider)
-  protected readonly boardsServiceProvider: BoardsServiceProvider;
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
   @inject(NotificationCenter)
   protected readonly notificationCenter: NotificationCenter;
@@ -119,14 +121,12 @@ export abstract class Examples extends SketchContribution {
 
   protected override init(): void {
     super.init();
-    this.boardsServiceProvider.onBoardsConfigDidChange((event) => {
-      if (isBoardIdentifierChangeEvent(event)) {
-        this.handleBoardChanged(event.selectedBoard);
-      }
-    });
+    this.boardsServiceClient.onBoardsConfigChanged(({ selectedBoard }) =>
+      this.handleBoardChanged(selectedBoard)
+    );
     this.notificationCenter.onDidReinitialize(() =>
       this.update({
-        board: this.boardsServiceProvider.boardsConfig.selectedBoard,
+        board: this.boardsServiceClient.boardsConfig.selectedBoard,
         // No force refresh. The core client was already refreshed.
       })
     );
@@ -138,11 +138,24 @@ export abstract class Examples extends SketchContribution {
   }
 
   protected abstract update(options?: {
-    board?: BoardIdentifier | undefined;
+    board?: Board | undefined;
     forceRefresh?: boolean;
   }): void;
 
   override registerMenus(registry: MenuModelRegistry): void {
+    try {
+      // This is a hack the ensures the desired menu ordering! We cannot use https://github.com/eclipse-theia/theia/pull/8377 due to ATL-222.
+      const index = ArduinoMenus.FILE__EXAMPLES_SUBMENU.length - 1;
+      const menuId = ArduinoMenus.FILE__EXAMPLES_SUBMENU[index];
+      const groupPath =
+        index === 0 ? [] : ArduinoMenus.FILE__EXAMPLES_SUBMENU.slice(0, index);
+      const parent: CompositeMenuNode = (registry as any).findGroup(groupPath);
+      const examples = new CompositeMenuNode(menuId, '', { order: '4' });
+      parent.addNode(examples);
+    } catch (e) {
+      console.error(e);
+      console.warn('Could not patch menu ordering.');
+    }
     // Registering the same submenu multiple times has no side-effect.
     // TODO: unregister submenu? https://github.com/eclipse-theia/theia/issues/7300
     registry.registerSubmenu(
@@ -229,7 +242,7 @@ export abstract class Examples extends SketchContribution {
   protected createHandler(uri: string): CommandHandler {
     const forceUpdate = () =>
       this.update({
-        board: this.boardsServiceProvider.boardsConfig.selectedBoard,
+        board: this.boardsServiceClient.boardsConfig.selectedBoard,
         forceRefresh: true,
       });
     return {
@@ -310,7 +323,7 @@ export class LibraryExamples extends Examples {
 
   protected override async update(
     options: { board?: Board; forceRefresh?: boolean } = {
-      board: this.boardsServiceProvider.boardsConfig.selectedBoard,
+      board: this.boardsServiceClient.boardsConfig.selectedBoard,
     }
   ): Promise<void> {
     const { board, forceRefresh } = options;

arduino-ide-extension/src/browser/contributions/include-library.ts

@@ -1,4 +1,4 @@
-import PQueue from 'p-queue';
+import * as PQueue from 'p-queue';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
@@ -37,7 +37,7 @@ export class IncludeLibrary extends SketchContribution {
   protected readonly notificationCenter: NotificationCenter;
 
   @inject(BoardsServiceProvider)
-  protected readonly boardsServiceProvider: BoardsServiceProvider;
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
   @inject(LibraryService)
   protected readonly libraryService: LibraryService;
@@ -46,7 +46,7 @@ export class IncludeLibrary extends SketchContribution {
   protected readonly toDispose = new DisposableCollection();
 
   override onStart(): void {
-    this.boardsServiceProvider.onBoardsConfigDidChange(() =>
+    this.boardsServiceClient.onBoardsConfigChanged(() =>
       this.updateMenuActions()
     );
     this.notificationCenter.onLibraryDidInstall(() => this.updateMenuActions());
@@ -98,7 +98,7 @@ export class IncludeLibrary extends SketchContribution {
       this.toDispose.dispose();
       this.mainMenuManager.update();
       const libraries: LibraryPackage[] = [];
-      const fqbn = this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn;
+      const fqbn = this.boardsServiceClient.boardsConfig.selectedBoard?.fqbn;
       // Show all libraries, when no board is selected.
       // Otherwise, show libraries only for the selected board.
       libraries.push(...(await this.libraryService.list({ fqbn })));

arduino-ide-extension/src/browser/contributions/ino-language.ts

@@ -1,19 +1,15 @@
-import {
-  Disposable,
-  DisposableCollection,
-} from '@theia/core/lib/common/disposable';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { Mutex } from 'async-mutex';
 import {
   ArduinoDaemon,
   assertSanitizedFqbn,
-  BoardIdentifier,
   BoardsService,
   ExecutableService,
-  isBoardIdentifierChangeEvent,
   sanitizeFqbn,
 } from '../../common/protocol';
 import { CurrentSketch } from '../sketches-service-client-impl';
+import { BoardsConfig } from '../boards/boards-config';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import { HostedPluginEvents } from '../hosted-plugin-events';
 import { NotificationCenter } from '../notification-center';
@@ -49,7 +45,7 @@ export class InoLanguage extends SketchContribution {
 
   override onReady(): void {
     const start = (
-      selectedBoard: BoardIdentifier | undefined,
+      { selectedBoard }: BoardsConfig.Config,
       forceStart = false
     ) => {
       if (selectedBoard) {
@@ -60,16 +56,12 @@ export class InoLanguage extends SketchContribution {
       }
     };
     const forceRestart = () => {
-      start(this.boardsServiceProvider.boardsConfig.selectedBoard, true);
+      start(this.boardsServiceProvider.boardsConfig, true);
     };
     this.toDispose.pushAll([
-      this.boardsServiceProvider.onBoardsConfigDidChange((event) => {
-        if (isBoardIdentifierChangeEvent(event)) {
-          start(event.selectedBoard);
-        }
-      }),
+      this.boardsServiceProvider.onBoardsConfigChanged(start),
       this.hostedPluginEvents.onPluginsDidStart(() =>
-        start(this.boardsServiceProvider.boardsConfig.selectedBoard)
+        start(this.boardsServiceProvider.boardsConfig)
       ),
       this.hostedPluginEvents.onPluginsWillUnload(
         () => (this.languageServerFqbn = undefined)
@@ -106,14 +98,12 @@ export class InoLanguage extends SketchContribution {
             matchingFqbn &&
             boardsConfig.selectedBoard?.fqbn === matchingFqbn
           ) {
-            start(boardsConfig.selectedBoard);
+            start(boardsConfig);
           }
         }
       }),
     ]);
-    this.boardsServiceProvider.ready.then(() =>
-      start(this.boardsServiceProvider.boardsConfig.selectedBoard)
-    );
+    start(this.boardsServiceProvider.boardsConfig);
   }
 
   onStop(): void {
@@ -130,7 +120,6 @@ export class InoLanguage extends SketchContribution {
       return;
     }
     const release = await this.languageServerStartMutex.acquire();
-    const toDisposeOnRelease = new DisposableCollection();
     try {
       await this.hostedPluginEvents.didStart;
       const details = await this.boardsService.getBoardDetails({ fqbn });
@@ -190,13 +179,12 @@ export class InoLanguage extends SketchContribution {
       ]);
 
       this.languageServerFqbn = await Promise.race([
-        new Promise<undefined>((_, reject) => {
-          const timer = setTimeout(
+        new Promise<undefined>((_, reject) =>
+          setTimeout(
             () => reject(new Error(`Timeout after ${20_000} ms.`)),
             20_000
-          );
-          toDisposeOnRelease.push(Disposable.create(() => clearTimeout(timer)));
-        }),
+          )
+        ),
         this.commandService.executeCommand<string>(
           'arduino.languageserver.start',
           {
@@ -218,7 +206,6 @@ export class InoLanguage extends SketchContribution {
       console.log(`Failed to start language server. Original FQBN: ${fqbn}`, e);
       this.languageServerFqbn = undefined;
     } finally {
-      toDisposeOnRelease.dispose();
       release();
     }
   }

arduino-ide-extension/src/browser/contributions/interface-scale.ts

@@ -8,7 +8,7 @@ import {
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { CommandRegistry, MaybePromise, nls } from '@theia/core/lib/common';
 import { Settings } from '../dialogs/settings/settings';
-import debounce from 'lodash.debounce';
+import debounce = require('lodash.debounce');
 
 @injectable()
 export class InterfaceScale extends Contribution {

arduino-ide-extension/src/browser/contributions/open-boards-config.ts

@@ -1,18 +1,25 @@
-import type { Command, CommandRegistry } from '@theia/core/lib/common/command';
+import { CommandRegistry } from '@theia/core';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import type { EditBoardsConfigActionParams } from '../../common/protocol/board-list';
 import { BoardsConfigDialog } from '../boards/boards-config-dialog';
-import { Contribution } from './contribution';
+import { BoardsServiceProvider } from '../boards/boards-service-provider';
+import { Contribution, Command } from './contribution';
 
 @injectable()
 export class OpenBoardsConfig extends Contribution {
+  @inject(BoardsServiceProvider)
+  private readonly boardsServiceProvider: BoardsServiceProvider;
+
   @inject(BoardsConfigDialog)
   private readonly boardsConfigDialog: BoardsConfigDialog;
 
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(OpenBoardsConfig.Commands.OPEN_DIALOG, {
-      execute: async (params?: EditBoardsConfigActionParams) =>
-        this.boardsConfigDialog.open(params),
+      execute: async (query?: string | undefined) => {
+        const boardsConfig = await this.boardsConfigDialog.open(query);
+        if (boardsConfig) {
+          return (this.boardsServiceProvider.boardsConfig = boardsConfig);
+        }
+      },
     });
   }
 }

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

@@ -1,4 +1,5 @@
 import { injectable } from '@theia/core/shared/inversify';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import URI from '@theia/core/lib/common/uri';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import {
@@ -8,7 +9,7 @@ import {
   MenuModelRegistry,
   KeybindingRegistry,
 } from './contribution';
-import { nls } from '@theia/core/lib/common/nls';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class OpenSketchExternal extends SketchContribution {
@@ -40,7 +41,7 @@ export class OpenSketchExternal extends SketchContribution {
       if (exists) {
         const fsPath = await this.fileService.fsPath(new URI(uri));
         if (fsPath) {
-          window.electronTheiaCore.showItemInFolder(fsPath);
+          remote.shell.showItemInFolder(fsPath);
         }
       }
     }

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

@@ -118,7 +118,6 @@ export class OpenSketchFiles extends SketchContribution {
       fileService: this.fileService,
       sketchesService: this.sketchesService,
       labelProvider: this.labelProvider,
-      dialogService: this.dialogService,
     });
     if (movedSketch) {
       this.workspaceService.open(new URI(movedSketch.uri), {

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

@@ -1,3 +1,4 @@
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { nls } from '@theia/core/lib/common/nls';
 import { injectable } from '@theia/core/shared/inversify';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
@@ -17,7 +18,6 @@ import {
   SketchContribution,
   URI,
 } from './contribution';
-import { DialogService } from '../dialog-service';
 
 export type SketchLocation = string | URI | SketchRef;
 export namespace SketchLocation {
@@ -83,7 +83,9 @@ export class OpenSketch extends SketchContribution {
 
   private async selectSketch(): Promise<Sketch | undefined> {
     const defaultPath = await this.defaultPath();
-    const { filePaths } = await this.dialogService.showOpenDialog({
+    const { filePaths } = await remote.dialog.showOpenDialog(
+      remote.getCurrentWindow(),
+      {
         defaultPath,
         properties: ['createDirectory', 'openFile'],
         filters: [
@@ -92,7 +94,8 @@ export class OpenSketch extends SketchContribution {
             extensions: ['ino', 'pde'],
           },
         ],
-    });
+      }
+    );
     if (!filePaths.length) {
       return undefined;
     }
@@ -112,7 +115,6 @@ export class OpenSketch extends SketchContribution {
         fileService: this.fileService,
         sketchesService: this.sketchesService,
         labelProvider: this.labelProvider,
-        dialogService: this.dialogService,
       });
     }
   }
@@ -132,16 +134,14 @@ export async function promptMoveSketch(
     fileService: FileService;
     sketchesService: SketchesService;
     labelProvider: LabelProvider;
-    dialogService: DialogService;
   }
 ): Promise<Sketch | undefined> {
-  const { fileService, sketchesService, labelProvider, dialogService } =
-    options;
+  const { fileService, sketchesService, labelProvider } = options;
   const uri =
     sketchFileUri instanceof URI ? sketchFileUri : new URI(sketchFileUri);
   const name = uri.path.name;
   const nameWithExt = labelProvider.getName(uri);
-  const { response } = await dialogService.showMessageBox({
+  const { response } = await remote.dialog.showMessageBox({
     title: nls.localize('arduino/sketch/moving', 'Moving'),
     type: 'question',
     buttons: [
@@ -160,7 +160,7 @@ export async function promptMoveSketch(
     const newSketchUri = uri.parent.resolve(name);
     const exists = await fileService.exists(newSketchUri);
     if (exists) {
-      await dialogService.showMessageBox({
+      await remote.dialog.showMessageBox({
         type: 'error',
         title: nls.localize('vscode/dialog/dialogErrorMessage', 'Error'),
         message: nls.localize(

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

@@ -1,4 +1,5 @@
-import { inject, injectable } from '@theia/core/shared/inversify';
+import { injectable } from '@theia/core/shared/inversify';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { isOSX } from '@theia/core/lib/common/os';
 import {
   Contribution,
@@ -8,18 +9,14 @@ import {
   CommandRegistry,
 } from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { nls } from '@theia/core/lib/common/nls';
-import { AppService } from '../app-service';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class QuitApp extends Contribution {
-  @inject(AppService)
-  private readonly appService: AppService;
-
   override registerCommands(registry: CommandRegistry): void {
     if (!isOSX) {
       registry.registerCommand(QuitApp.Commands.QUIT_APP, {
-        execute: () => this.appService.quit(),
+        execute: () => remote.app.quit(),
       });
     }
   }

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

@@ -1,3 +1,4 @@
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { Dialog } from '@theia/core/lib/browser/dialogs';
 import { NavigatableWidget } from '@theia/core/lib/browser/navigatable';
 import { Saveable } from '@theia/core/lib/browser/saveable';
@@ -7,7 +8,7 @@ import { nls } from '@theia/core/lib/common/nls';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
 import { WorkspaceInput } from '@theia/workspace/lib/browser/workspace-service';
-import { StartupTasks } from '../../electron-common/startup-task';
+import { StartupTask } from '../../electron-common/startup-task';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { CurrentSketch } from '../sketches-service-client-impl';
 import { CloudSketchContribution } from './cloud-contribution';
@@ -24,7 +25,6 @@ import {
   RenameCloudSketch,
   RenameCloudSketchParams,
 } from './rename-cloud-sketch';
-import { assertConnectedToBackend } from './save-sketch';
 
 @injectable()
 export class SaveAsSketch extends CloudSketchContribution {
@@ -65,10 +65,6 @@ export class SaveAsSketch extends CloudSketchContribution {
       markAsRecentlyOpened,
     }: SaveAsSketch.Options = SaveAsSketch.Options.DEFAULT
   ): Promise<boolean> {
-    assertConnectedToBackend({
-      connectionStatusService: this.connectionStatusService,
-      messageService: this.messageService,
-    });
     const sketch = await this.sketchServiceClient.currentSketch();
     if (!CurrentSketch.isValid(sketch)) {
       return false;
@@ -99,7 +95,7 @@ export class SaveAsSketch extends CloudSketchContribution {
     if (markAsRecentlyOpened) {
       this.sketchesService.markAsRecentlyOpened(newWorkspaceUri);
     }
-    const options: WorkspaceInput & StartupTasks = {
+    const options: WorkspaceInput & StartupTask.Owner = {
       preserveWindow: true,
       tasks: [],
     };
@@ -169,13 +165,16 @@ export class SaveAsSketch extends CloudSketchContribution {
   ): Promise<string | undefined> {
     let sketchFolderDestinationUri: string | undefined;
     while (!sketchFolderDestinationUri) {
-      const { filePath } = await this.dialogService.showSaveDialog({
+      const { filePath } = await remote.dialog.showSaveDialog(
+        remote.getCurrentWindow(),
+        {
           title: nls.localize(
             'arduino/sketch/saveFolderAs',
             'Save sketch folder as...'
           ),
           defaultPath,
-      });
+        }
+      );
       if (!filePath) {
         return undefined;
       }
@@ -226,10 +225,13 @@ ${dialogContent.details}
 
 ${dialogContent.question}`.trim();
         defaultPath = filePath;
-        const { response } = await this.dialogService.showMessageBox({
+        const { response } = await remote.dialog.showMessageBox(
+          remote.getCurrentWindow(),
+          {
             message,
             buttons: [Dialog.CANCEL, Dialog.YES],
-        });
+          }
+        );
         // cancel
         if (response === 0) {
           return undefined;

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

@@ -1,18 +1,16 @@
-import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
-import { MessageService } from '@theia/core/lib/common/message-service';
-import { nls } from '@theia/core/lib/common/nls';
 import { injectable } from '@theia/core/shared/inversify';
+import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { CurrentSketch } from '../sketches-service-client-impl';
-import { ApplicationConnectionStatusContribution } from '../theia/core/connection-status-service';
+import { SaveAsSketch } from './save-as-sketch';
 import {
+  SketchContribution,
   Command,
   CommandRegistry,
-  KeybindingRegistry,
   MenuModelRegistry,
-  SketchContribution,
+  KeybindingRegistry,
 } from './contribution';
-import { SaveAsSketch } from './save-as-sketch';
+import { nls } from '@theia/core/lib/common';
+import { CurrentSketch } from '../sketches-service-client-impl';
 
 @injectable()
 export class SaveSketch extends SketchContribution {
@@ -38,10 +36,6 @@ export class SaveSketch extends SketchContribution {
   }
 
   async saveSketch(): Promise<void> {
-    assertConnectedToBackend({
-      connectionStatusService: this.connectionStatusService,
-      messageService: this.messageService,
-    });
     const sketch = await this.sketchServiceClient.currentSketch();
     if (!CurrentSketch.isValid(sketch)) {
       return;
@@ -69,18 +63,3 @@ export namespace SaveSketch {
     };
   }
 }
-
-// https://github.com/arduino/arduino-ide/issues/2081
-export function assertConnectedToBackend(param: {
-  connectionStatusService: ApplicationConnectionStatusContribution;
-  messageService: MessageService;
-}): void {
-  if (param.connectionStatusService.offlineStatus === 'backend') {
-    const message = nls.localize(
-      'theia/core/couldNotSave',
-      'Could not save the sketch. Please copy your unsaved work into your favorite text editor, and restart the IDE.'
-    );
-    param.messageService.error(message);
-    throw new Error(message);
-  }
-}

arduino-ide-extension/src/browser/contributions/selected-board.ts

@@ -4,10 +4,7 @@ import {
 } from '@theia/core/lib/browser/status-bar/status-bar';
 import { nls } from '@theia/core/lib/common/nls';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import type {
-  BoardList,
-  BoardListItem,
-} from '../../common/protocol/board-list';
+import { BoardsConfig } from '../boards/boards-config';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import { Contribution } from './contribution';
 
@@ -15,21 +12,21 @@ import { Contribution } from './contribution';
 export class SelectedBoard extends Contribution {
   @inject(StatusBar)
   private readonly statusBar: StatusBar;
+
   @inject(BoardsServiceProvider)
   private readonly boardsServiceProvider: BoardsServiceProvider;
 
   override onStart(): void {
-    this.boardsServiceProvider.onBoardListDidChange(() =>
-      this.update(this.boardsServiceProvider.boardList)
+    this.boardsServiceProvider.onBoardsConfigChanged((config) =>
+      this.update(config)
     );
   }
 
   override onReady(): void {
-    this.update(this.boardsServiceProvider.boardList);
+    this.update(this.boardsServiceProvider.boardsConfig);
   }
 
-  private update(boardList: BoardList): void {
-    const { selectedBoard, selectedPort } = boardList.boardsConfig;
+  private update({ selectedBoard, selectedPort }: BoardsConfig.Config): void {
     this.statusBar.setElement('arduino-selected-board', {
       alignment: StatusBarAlignment.RIGHT,
       text: selectedBoard
@@ -41,30 +38,17 @@ export class SelectedBoard extends Contribution {
       className: 'arduino-selected-board',
     });
     if (selectedBoard) {
-      const notConnectedLabel = nls.localize(
-        'arduino/common/notConnected',
-        '[not connected]'
-      );
-      let portLabel = notConnectedLabel;
-      if (selectedPort) {
-        portLabel = nls.localize(
+      this.statusBar.setElement('arduino-selected-port', {
+        alignment: StatusBarAlignment.RIGHT,
+        text: selectedPort
+          ? nls.localize(
               'arduino/common/selectedOn',
               'on {0}',
               selectedPort.address
-        );
-        const selectedItem: BoardListItem | undefined =
-          boardList.items[boardList.selectedIndex];
-        if (!selectedItem) {
-          portLabel += ` ${notConnectedLabel}`; // append ` [not connected]` when the port is selected but it's not detected by the CLI
-        }
-      }
-      this.statusBar.setElement('arduino-selected-port', {
-        alignment: StatusBarAlignment.RIGHT,
-        text: portLabel,
+            )
+          : nls.localize('arduino/common/notConnected', '[not connected]'),
         className: 'arduino-selected-port',
       });
-    } else {
-      this.statusBar.removeElement('arduino-selected-port');
     }
   }
 }

arduino-ide-extension/src/browser/contributions/startup-task.ts

@@ -0,0 +1,52 @@
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import type { IpcRendererEvent } from '@theia/core/electron-shared/electron';
+import { ipcRenderer } from '@theia/core/electron-shared/electron';
+import { injectable } from '@theia/core/shared/inversify';
+import { StartupTask } from '../../electron-common/startup-task';
+import { Contribution } from './contribution';
+
+@injectable()
+export class StartupTasks extends Contribution {
+  override onReady(): void {
+    ipcRenderer.once(
+      StartupTask.Messaging.STARTUP_TASKS_SIGNAL,
+      (_: IpcRendererEvent, args: unknown) => {
+        console.debug(
+          `Received the startup tasks from the electron main process. Args: ${JSON.stringify(
+            args
+          )}`
+        );
+        if (!StartupTask.has(args)) {
+          console.warn(`Could not detect 'tasks' from the signal. Skipping.`);
+          return;
+        }
+        const tasks = args.tasks;
+        if (tasks.length) {
+          console.log(`Executing startup tasks:`);
+          tasks.forEach(({ command, args = [] }) => {
+            console.log(
+              ` - '${command}' ${
+                args.length ? `, args: ${JSON.stringify(args)}` : ''
+              }`
+            );
+            this.commandService
+              .executeCommand(command, ...args)
+              .catch((err) =>
+                console.error(
+                  `Error occurred when executing the startup task '${command}'${
+                    args?.length ? ` with args: '${JSON.stringify(args)}` : ''
+                  }.`,
+                  err
+                )
+              );
+          });
+        }
+      }
+    );
+    const { id } = remote.getCurrentWindow();
+    console.debug(
+      `Signalling app ready event to the electron main process. Sender ID: ${id}.`
+    );
+    ipcRenderer.send(StartupTask.Messaging.APP_READY_SIGNAL(id));
+  }
+}

arduino-ide-extension/src/browser/contributions/startup-tasks-executor.ts

@@ -1,65 +0,0 @@
-import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import {
-  inject,
-  injectable,
-  postConstruct,
-} from '@theia/core/shared/inversify';
-import {
-  hasStartupTasks,
-  StartupTasks,
-} from '../../electron-common/startup-task';
-import { AppService } from '../app-service';
-import { Contribution } from './contribution';
-
-@injectable()
-export class StartupTasksExecutor extends Contribution {
-  @inject(AppService)
-  private readonly appService: AppService;
-
-  private readonly toDispose = new DisposableCollection();
-
-  @postConstruct()
-  protected override init(): void {
-    super.init();
-    this.toDispose.push(
-      this.appService.registerStartupTasksHandler((tasks) =>
-        this.handleStartupTasks(tasks)
-      )
-    );
-  }
-
-  onStop(): void {
-    this.toDispose.dispose();
-  }
-
-  private async handleStartupTasks(tasks: StartupTasks): Promise<void> {
-    console.debug(
-      `Received the startup tasks from the electron main process. Args: ${JSON.stringify(
-        tasks
-      )}`
-    );
-    if (!hasStartupTasks(tasks)) {
-      console.warn(`Could not detect 'tasks' from the signal. Skipping.`);
-      return;
-    }
-    await this.appStateService.reachedState('ready');
-    console.log(`Executing startup tasks:`);
-    tasks.tasks.forEach(({ command, args = [] }) => {
-      console.log(
-        ` - '${command}' ${
-          args.length ? `, args: ${JSON.stringify(args)}` : ''
-        }`
-      );
-      this.commandService
-        .executeCommand(command, ...args)
-        .catch((err) =>
-          console.error(
-            `Error occurred when executing the startup task '${command}'${
-              args?.length ? ` with args: '${JSON.stringify(args)}` : ''
-            }.`,
-            err
-          )
-        );
-    });
-  }
-}

arduino-ide-extension/src/browser/contributions/update-arduino-state.ts

@@ -1,176 +0,0 @@
-import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import URI from '@theia/core/lib/common/uri';
-import { inject, injectable } from '@theia/core/shared/inversify';
-import { HostedPluginSupport } from '@theia/plugin-ext/lib/hosted/browser/hosted-plugin';
-import type { ArduinoState } from 'vscode-arduino-api';
-import {
-  BoardsService,
-  CompileSummary,
-  isCompileSummary,
-  BoardsConfig,
-  PortIdentifier,
-  resolveDetectedPort,
-} from '../../common/protocol';
-import {
-  toApiBoardDetails,
-  toApiCompileSummary,
-  toApiPort,
-} from '../../common/protocol/arduino-context-mapper';
-import { BoardsDataStore } from '../boards/boards-data-store';
-import { BoardsServiceProvider } from '../boards/boards-service-provider';
-import { CurrentSketch } from '../sketches-service-client-impl';
-import { SketchContribution } from './contribution';
-
-interface UpdateStateParams<T extends ArduinoState> {
-  readonly key: keyof T;
-  readonly value: T[keyof T];
-}
-
-/**
- * Contribution for updating the Arduino state, such as the FQBN, selected port, and sketch path changes via commands, so other VS Code extensions can access it.
- * See [`vscode-arduino-api`](https://github.com/dankeboy36/vscode-arduino-api#api) for more details.
- */
-@injectable()
-export class UpdateArduinoState extends SketchContribution {
-  @inject(BoardsService)
-  private readonly boardsService: BoardsService;
-  @inject(BoardsServiceProvider)
-  private readonly boardsServiceProvider: BoardsServiceProvider;
-  @inject(BoardsDataStore)
-  private readonly boardsDataStore: BoardsDataStore;
-  @inject(HostedPluginSupport)
-  private readonly hostedPluginSupport: HostedPluginSupport;
-
-  private readonly toDispose = new DisposableCollection();
-
-  override onStart(): void {
-    this.toDispose.pushAll([
-      this.boardsServiceProvider.onBoardsConfigDidChange(() =>
-        this.updateBoardsConfig(this.boardsServiceProvider.boardsConfig)
-      ),
-      this.sketchServiceClient.onCurrentSketchDidChange((sketch) =>
-        this.updateSketchPath(sketch)
-      ),
-      this.configService.onDidChangeDataDirUri((dataDirUri) =>
-        this.updateDataDirPath(dataDirUri)
-      ),
-      this.configService.onDidChangeSketchDirUri((userDirUri) =>
-        this.updateUserDirPath(userDirUri)
-      ),
-      this.commandService.onDidExecuteCommand(({ commandId, args }) => {
-        if (
-          commandId === 'arduino.languageserver.notifyBuildDidComplete' &&
-          isCompileSummary(args[0])
-        ) {
-          this.updateCompileSummary(args[0]);
-        }
-      }),
-      this.boardsDataStore.onChanged((fqbn) => {
-        const selectedFqbn =
-          this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn;
-        if (selectedFqbn && fqbn.includes(selectedFqbn)) {
-          this.updateBoardDetails(selectedFqbn);
-        }
-      }),
-    ]);
-  }
-
-  override onReady(): void {
-    this.updateBoardsConfig(this.boardsServiceProvider.boardsConfig); // TODO: verify!
-    this.updateSketchPath(this.sketchServiceClient.tryGetCurrentSketch());
-    this.updateUserDirPath(this.configService.tryGetSketchDirUri());
-    this.updateDataDirPath(this.configService.tryGetDataDirUri());
-  }
-
-  onStop(): void {
-    this.toDispose.dispose();
-  }
-
-  private async updateSketchPath(
-    sketch: CurrentSketch | undefined
-  ): Promise<void> {
-    const sketchPath = CurrentSketch.isValid(sketch)
-      ? new URI(sketch.uri).path.fsPath()
-      : undefined;
-    return this.updateState({ key: 'sketchPath', value: sketchPath });
-  }
-
-  private async updateCompileSummary(
-    compileSummary: CompileSummary
-  ): Promise<void> {
-    const apiCompileSummary = toApiCompileSummary(compileSummary);
-    return this.updateState({
-      key: 'compileSummary',
-      value: apiCompileSummary,
-    });
-  }
-
-  private async updateBoardsConfig(boardsConfig: BoardsConfig): Promise<void> {
-    const fqbn = boardsConfig.selectedBoard?.fqbn;
-    const port = boardsConfig.selectedPort;
-    await this.updateFqbn(fqbn);
-    await this.updateBoardDetails(fqbn);
-    await this.updatePort(port);
-  }
-
-  private async updateFqbn(fqbn: string | undefined): Promise<void> {
-    await this.updateState({ key: 'fqbn', value: fqbn });
-  }
-
-  private async updateBoardDetails(fqbn: string | undefined): Promise<void> {
-    const unset = () =>
-      this.updateState({ key: 'boardDetails', value: undefined });
-    if (!fqbn) {
-      return unset();
-    }
-    const [details, persistedData] = await Promise.all([
-      this.boardsService.getBoardDetails({ fqbn }),
-      this.boardsDataStore.getData(fqbn),
-    ]);
-    if (!details) {
-      return unset();
-    }
-    const apiBoardDetails = toApiBoardDetails({
-      ...details,
-      configOptions:
-        BoardsDataStore.Data.EMPTY === persistedData
-          ? details.configOptions
-          : persistedData.configOptions.slice(),
-    });
-    return this.updateState({
-      key: 'boardDetails',
-      value: apiBoardDetails,
-    });
-  }
-
-  private async updatePort(port: PortIdentifier | undefined): Promise<void> {
-    const resolvedPort =
-      port &&
-      resolveDetectedPort(port, this.boardsServiceProvider.detectedPorts);
-    const apiPort = resolvedPort && toApiPort(resolvedPort);
-    return this.updateState({ key: 'port', value: apiPort });
-  }
-
-  private async updateUserDirPath(userDirUri: URI | undefined): Promise<void> {
-    const userDirPath = userDirUri?.path.fsPath();
-    return this.updateState({
-      key: 'userDirPath',
-      value: userDirPath,
-    });
-  }
-
-  private async updateDataDirPath(dataDirUri: URI | undefined): Promise<void> {
-    const dataDirPath = dataDirUri?.path.fsPath();
-    return this.updateState({
-      key: 'dataDirPath',
-      value: dataDirPath,
-    });
-  }
-
-  private async updateState<T extends ArduinoState>(
-    params: UpdateStateParams<T>
-  ): Promise<void> {
-    await this.hostedPluginSupport.didStart;
-    return this.commandService.executeCommand('arduinoAPI.updateState', params);
-  }
-}

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

@@ -16,10 +16,7 @@ import {
   arduinoCert,
   certificateList,
 } from '../dialogs/certificate-uploader/utils';
-import {
-  ArduinoFirmwareUploader,
-  UploadCertificateParams,
-} from '../../common/protocol/arduino-firmware-uploader';
+import { ArduinoFirmwareUploader } from '../../common/protocol/arduino-firmware-uploader';
 import { nls } from '@theia/core/lib/common';
 
 @injectable()
@@ -77,8 +74,12 @@ export class UploadCertificate extends Contribution {
     });
 
     registry.registerCommand(UploadCertificate.Commands.UPLOAD_CERT, {
-      execute: async (params: UploadCertificateParams) => {
-        return this.arduinoFirmwareUploader.uploadCertificates(params);
+      execute: async ({ fqbn, address, urls }) => {
+        return this.arduinoFirmwareUploader.uploadCertificates(
+          `-b ${fqbn} -a ${address} ${urls
+            .map((url: string) => `-u ${url}`)
+            .join(' ')}`
+        );
       },
     });
 

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

@@ -47,7 +47,7 @@ export namespace UploadFirmware {
       id: 'arduino-upload-firmware-open',
       label: nls.localize(
         'arduino/firmware/updater',
-        'Firmware Updater'
+        'WiFi101 / WiFiNINA Firmware Updater'
       ),
       category: 'Arduino',
     };

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

@@ -1,30 +1,30 @@
-import { Emitter } from '@theia/core/lib/common/event';
-import { nls } from '@theia/core/lib/common/nls';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { CoreService, sanitizeFqbn } from '../../common/protocol';
+import { Emitter } from '@theia/core/lib/common/event';
+import { CoreService, Port, sanitizeFqbn } from '../../common/protocol';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { CurrentSketch } from '../sketches-service-client-impl';
 import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
 import {
   Command,
   CommandRegistry,
-  CoreServiceContribution,
-  KeybindingRegistry,
   MenuModelRegistry,
+  KeybindingRegistry,
   TabBarToolbarRegistry,
+  CoreServiceContribution,
 } from './contribution';
-import { UserFields } from './user-fields';
+import { deepClone, nls } from '@theia/core/lib/common';
+import { CurrentSketch } from '../sketches-service-client-impl';
 import type { VerifySketchParams } from './verify-sketch';
+import { UserFields } from './user-fields';
 
 @injectable()
 export class UploadSketch extends CoreServiceContribution {
-  @inject(UserFields)
-  private readonly userFields: UserFields;
-
   private readonly onDidChangeEmitter = new Emitter<void>();
   private readonly onDidChange = this.onDidChangeEmitter.event;
   private uploadInProgress = false;
 
+  @inject(UserFields)
+  private readonly userFields: UserFields;
+
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH, {
       execute: async () => {
@@ -107,6 +107,7 @@ export class UploadSketch extends CoreServiceContribution {
       // uploadInProgress will be set to false whether the upload fails or not
       this.uploadInProgress = true;
       this.menuManager.update();
+      this.boardsServiceProvider.snapshotBoardDiscoveryOnUpload();
       this.onDidChangeEmitter.fire();
       this.clearVisibleNotification();
 
@@ -134,14 +135,12 @@ export class UploadSketch extends CoreServiceContribution {
         return;
       }
 
-      const uploadResponse = await this.doWithProgress({
+      await this.doWithProgress({
         progressText: nls.localize('arduino/sketch/uploading', 'Uploading...'),
         task: (progressId, coreService) =>
           coreService.upload({ ...uploadOptions, progressId }),
         keepOutput: true,
       });
-      // the port update is NOOP if nothing has changed
-      this.boardsServiceProvider.updateConfig(uploadResponse.portAfterUpload);
 
       this.messageService.info(
         nls.localize('arduino/sketch/doneUploading', 'Done uploading.'),
@@ -151,10 +150,9 @@ export class UploadSketch extends CoreServiceContribution {
       this.userFields.notifyFailedWithError(e);
       this.handleError(e);
     } finally {
-      // TODO: here comes the port change if happened during the upload
-      // https://github.com/arduino/arduino-cli/issues/2245
       this.uploadInProgress = false;
       this.menuManager.update();
+      this.boardsServiceProvider.attemptPostUploadAutoSelect();
       this.onDidChangeEmitter.fire();
     }
   }
@@ -176,7 +174,7 @@ export class UploadSketch extends CoreServiceContribution {
         this.preferences.get('arduino.upload.verify'),
         this.preferences.get('arduino.upload.verbose'),
       ]);
-    const port = boardsConfig.selectedPort;
+    const port = this.maybeUpdatePortProperties(boardsConfig.selectedPort);
     return {
       sketch,
       fqbn,
@@ -187,6 +185,28 @@ export class UploadSketch extends CoreServiceContribution {
       userFields,
     };
   }
+
+  /**
+   * This is a hack to ensure that the port object has the `properties` when uploading.(https://github.com/arduino/arduino-ide/issues/740)
+   * This method works around a bug when restoring a `port` persisted by an older version of IDE2. See the bug [here](https://github.com/arduino/arduino-ide/pull/1335#issuecomment-1224355236).
+   *
+   * Before the upload, this method checks the available ports and makes sure that the `properties` of an available port, and the port selected by the user have the same `properties`.
+   * This method does not update any state (for example, the `BoardsConfig.Config`) but uses the correct `properties` for the `upload`.
+   */
+  private maybeUpdatePortProperties(port: Port | undefined): Port | undefined {
+    if (port) {
+      const key = Port.keyOf(port);
+      for (const candidate of this.boardsServiceProvider.availablePorts) {
+        if (key === Port.keyOf(candidate) && candidate.properties) {
+          return {
+            ...port,
+            properties: deepClone(candidate.properties),
+          };
+        }
+      }
+    }
+    return port;
+  }
 }
 
 export namespace UploadSketch {

arduino-ide-extension/src/browser/contributions/user-fields.ts

@@ -21,7 +21,7 @@ export class UserFields extends Contribution {
 
   protected override init(): void {
     super.init();
-    this.boardsServiceProvider.onBoardsConfigDidChange(async () => {
+    this.boardsServiceProvider.onBoardsConfigChanged(async () => {
       const userFields =
         await this.boardsServiceProvider.selectedBoardUserFields();
       this.boardRequiresUserFields = userFields.length > 0;
@@ -43,7 +43,10 @@ export class UserFields extends Contribution {
     if (!fqbn) {
       return undefined;
     }
-    const address = boardsConfig.selectedPort?.address || '';
+    const address =
+      boardsConfig.selectedBoard?.port?.address ||
+      boardsConfig.selectedPort?.address ||
+      '';
     return fqbn + '|' + address;
   }
 

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

@@ -1,3 +1,4 @@
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { Dialog } from '@theia/core/lib/browser/dialogs';
 import { nls } from '@theia/core/lib/common/nls';
 import { Deferred, waitForEvent } from '@theia/core/lib/common/promise-util';
@@ -179,12 +180,15 @@ export class ValidateSketch extends CloudSketchContribution {
     message: string,
     buttons: string[] = [Dialog.CANCEL, Dialog.OK]
   ): Promise<boolean> {
-    const { response } = await this.dialogService.showMessageBox({
+    const { response } = await remote.dialog.showMessageBox(
+      remote.getCurrentWindow(),
+      {
         title,
         message,
         type: 'warning',
         buttons,
-    });
+      }
+    );
     // cancel
     if (response === 0) {
       return false;

arduino-ide-extension/src/browser/create/create-api.ts

@@ -86,25 +86,26 @@ export class CreateApi {
     url.searchParams.set('user_id', 'me');
     url.searchParams.set('limit', limit.toString());
     const headers = await this.headers();
-    const allSketches: Create.Sketch[] = [];
+    const result: { sketches: Create.Sketch[] } = { sketches: [] };
+
+    let partialSketches: Create.Sketch[] = [];
     let currentOffset = 0;
-    while (true) {
+    do {
       url.searchParams.set('offset', currentOffset.toString());
-      const { sketches } = await this.run<{ sketches: Create.Sketch[] }>(url, {
+      partialSketches = (
+        await this.run<{ sketches: Create.Sketch[] }>(url, {
           method: 'GET',
           headers,
-      });
-      allSketches.push(...sketches);
-      if (sketches.length < limit) {
-        break;
+        })
+      ).sketches;
+      if (partialSketches.length !== 0) {
+        result.sketches = result.sketches.concat(partialSketches);
       }
-      currentOffset += limit;
-      // The create API doc show that there is `next` and `prev` pages, but it does not work
-      // https://api2.arduino.cc/create/docs#!/sketches95v2/sketches_v2_search
-      // IF sketchCount mod limit === 0, an extra fetch must happen to detect the end of the pagination.
-    }
-    allSketches.forEach((sketch) => this.sketchCache.addSketch(sketch));
-    return allSketches;
+      currentOffset = currentOffset + limit;
+    } while (partialSketches.length !== 0);
+
+    result.sketches.forEach((sketch) => this.sketchCache.addSketch(sketch));
+    return result.sketches;
   }
 
   async createSketch(
@@ -512,7 +513,7 @@ export class CreateApi {
     const result = await resultProvider(response);
     const parseEnd = performance.now();
     console.debug(
-      `HTTP ${fetchCount} ${method}${url} [fetch: ${(
+      `HTTP ${fetchCount} ${method} ${url} [fetch: ${(
         fetchEnd - fetchStart
       ).toFixed(2)} ms, parse: ${(parseEnd - parseStart).toFixed(
         2

arduino-ide-extension/src/browser/create/create-features.ts

@@ -4,14 +4,10 @@ import { Emitter, Event } from '@theia/core/lib/common/event';
 import URI from '@theia/core/lib/common/uri';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { Sketch } from '../../common/protocol';
-import { AuthenticationSession } from '../../common/protocol/authentication-service';
+import { AuthenticationSession } from '../../node/auth/types';
 import { ArduinoPreferences } from '../arduino-preferences';
 import { AuthenticationClientService } from '../auth/authentication-client-service';
 import { LocalCacheFsProvider } from '../local-cache/local-cache-fs-provider';
-import {
-  ARDUINO_CLOUD_FOLDER,
-  REMOTE_SKETCHBOOK_FOLDER,
-} from '../utils/constants';
 import { CreateUri } from './create-uri';
 
 export type CloudSketchState = 'push' | 'pull';
@@ -132,8 +128,8 @@ export class CreateFeatures implements FrontendApplicationContribution {
       return undefined;
     }
     return dataDirUri
-      .resolve(REMOTE_SKETCHBOOK_FOLDER)
-      .resolve(ARDUINO_CLOUD_FOLDER)
+      .resolve('RemoteSketchbook')
+      .resolve('ArduinoCloud')
       .isEqualOrParent(new URI(sketch.uri));
   }
 

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

@@ -1,15 +0,0 @@
-import type {
-  MessageBoxOptions,
-  MessageBoxReturnValue,
-  OpenDialogOptions,
-  OpenDialogReturnValue,
-  SaveDialogOptions,
-  SaveDialogReturnValue,
-} from '../electron-common/electron-arduino';
-
-export const DialogService = Symbol('DialogService');
-export interface DialogService {
-  showMessageBox(options: MessageBoxOptions): Promise<MessageBoxReturnValue>;
-  showOpenDialog(options: OpenDialogOptions): Promise<OpenDialogReturnValue>;
-  showSaveDialog(options: SaveDialogOptions): Promise<SaveDialogReturnValue>;
-}

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-add-new.tsx

@@ -1,5 +1,5 @@
 import { nls } from '@theia/core/lib/common';
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 
 export const CertificateAddComponent = ({
   addCertificate,

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-list.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 
 export const CertificateListComponent = ({
   certificates,

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx

@@ -1,27 +1,20 @@
-import { nls } from '@theia/core/lib/common/nls';
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import Tippy from '@tippyjs/react';
-import type { BoardList } from '../../../common/protocol/board-list';
-import {
-  boardIdentifierEquals,
-  portIdentifierEquals,
-} from '../../../common/protocol/boards-service';
-import { CertificateAddComponent } from './certificate-add-new';
+import { AvailableBoard } from '../../boards/boards-service-provider';
 import { CertificateListComponent } from './certificate-list';
-import {
-  BoardOptionValue,
-  SelectBoardComponent,
-} from './select-board-components';
+import { SelectBoardComponent } from './select-board-components';
+import { CertificateAddComponent } from './certificate-add-new';
+import { nls } from '@theia/core/lib/common';
 
 export const CertificateUploaderComponent = ({
-  boardList,
+  availableBoards,
   certificates,
   addCertificate,
   updatableFqbns,
   uploadCertificates,
   openContextMenu,
 }: {
-  boardList: BoardList;
+  availableBoards: AvailableBoard[];
   certificates: string[];
   addCertificate: (cert: string) => void;
   updatableFqbns: string[];
@@ -40,15 +33,11 @@ export const CertificateUploaderComponent = ({
 
   const [selectedCerts, setSelectedCerts] = React.useState<string[]>([]);
 
-  const [selectedItem, setSelectedItem] =
-    React.useState<BoardOptionValue | null>(null);
+  const [selectedBoard, setSelectedBoard] =
+    React.useState<AvailableBoard | null>(null);
 
   const installCertificates = async () => {
-    if (!selectedItem) {
-      return;
-    }
-    const board = selectedItem.board;
-    if (!board.fqbn) {
+    if (!selectedBoard || !selectedBoard.fqbn || !selectedBoard.port) {
       return;
     }
 
@@ -56,8 +45,8 @@ export const CertificateUploaderComponent = ({
 
     try {
       await uploadCertificates(
-        board.fqbn,
-        selectedItem.port.address,
+        selectedBoard.fqbn,
+        selectedBoard.port.address,
         selectedCerts
       );
       setInstallFeedback('ok');
@@ -66,25 +55,17 @@ export const CertificateUploaderComponent = ({
     }
   };
 
-  const onItemSelect = React.useCallback(
-    (item: BoardOptionValue | null) => {
-      if (!item) {
-        return;
-      }
-      const board = item.board;
-      const port = item.port;
-      const selectedBoard = selectedItem?.board;
-      const selectedPort = selectedItem?.port;
+  const onBoardSelect = React.useCallback(
+    (board: AvailableBoard) => {
+      const newFqbn = (board && board.fqbn) || null;
+      const prevFqbn = (selectedBoard && selectedBoard.fqbn) || null;
 
-      if (
-        !boardIdentifierEquals(board, selectedBoard) ||
-        !portIdentifierEquals(port, selectedPort)
-      ) {
+      if (newFqbn !== prevFqbn) {
         setInstallFeedback(null);
-        setSelectedItem(item);
+        setSelectedBoard(board);
       }
     },
-    [selectedItem]
+    [selectedBoard]
   );
 
   return (
@@ -144,10 +125,10 @@ export const CertificateUploaderComponent = ({
         <div className="dialogRow">
           <div className="fl1">
             <SelectBoardComponent
-              boardList={boardList}
+              availableBoards={availableBoards}
               updatableFqbns={updatableFqbns}
-              onItemSelect={onItemSelect}
-              selectedItem={selectedItem}
+              onBoardSelect={onBoardSelect}
+              selectedBoard={selectedBoard}
               busy={installFeedback === 'installing'}
             />
           </div>
@@ -186,7 +167,7 @@ export const CertificateUploaderComponent = ({
             type="button"
             className="theia-button primary install-cert-btn"
             onClick={installCertificates}
-            disabled={selectedCerts.length === 0 || !selectedItem}
+            disabled={selectedCerts.length === 0 || !selectedBoard}
           >
             {nls.localize('arduino/certificate/upload', 'Upload')}
           </button>

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-dialog.tsx

@@ -1,51 +1,62 @@
-import { DialogProps } from '@theia/core/lib/browser/dialogs';
-import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
-import {
-  PreferenceScope,
-  PreferenceService,
-} from '@theia/core/lib/browser/preferences/preference-service';
-import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
-import { CommandRegistry } from '@theia/core/lib/common/command';
-import { nls } from '@theia/core/lib/common/nls';
-import type { Message } from '@theia/core/shared/@phosphor/messaging';
-import { Widget } from '@theia/core/shared/@phosphor/widgets';
+import * as React from '@theia/core/shared/react';
 import {
   inject,
   injectable,
   postConstruct,
 } from '@theia/core/shared/inversify';
-import React from '@theia/core/shared/react';
-import { ArduinoFirmwareUploader } from '../../../common/protocol/arduino-firmware-uploader';
-import { createBoardList } from '../../../common/protocol/board-list';
-import { ArduinoPreferences } from '../../arduino-preferences';
-import { BoardsServiceProvider } from '../../boards/boards-service-provider';
+import { DialogProps } from '@theia/core/lib/browser/dialogs';
 import { AbstractDialog } from '../../theia/dialogs/dialogs';
+import { Widget } from '@theia/core/shared/@phosphor/widgets';
+import { Message } from '@theia/core/shared/@phosphor/messaging';
+import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
+import {
+  AvailableBoard,
+  BoardsServiceProvider,
+} from '../../boards/boards-service-provider';
 import { CertificateUploaderComponent } from './certificate-uploader-component';
+import { ArduinoPreferences } from '../../arduino-preferences';
+import {
+  PreferenceScope,
+  PreferenceService,
+} from '@theia/core/lib/browser/preferences/preference-service';
+import { CommandRegistry } from '@theia/core/lib/common/command';
 import { certificateList, sanifyCertString } from './utils';
+import { ArduinoFirmwareUploader } from '../../../common/protocol/arduino-firmware-uploader';
+import { nls } from '@theia/core/lib/common';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 
 @injectable()
 export class UploadCertificateDialogWidget extends ReactWidget {
   @inject(BoardsServiceProvider)
-  private readonly boardsServiceProvider: BoardsServiceProvider;
+  protected readonly boardsServiceClient: BoardsServiceProvider;
+
   @inject(ArduinoPreferences)
-  private readonly arduinoPreferences: ArduinoPreferences;
+  protected readonly arduinoPreferences: ArduinoPreferences;
+
   @inject(PreferenceService)
-  private readonly preferenceService: PreferenceService;
+  protected readonly preferenceService: PreferenceService;
+
   @inject(CommandRegistry)
-  private readonly commandRegistry: CommandRegistry;
+  protected readonly commandRegistry: CommandRegistry;
+
   @inject(ArduinoFirmwareUploader)
-  private readonly arduinoFirmwareUploader: ArduinoFirmwareUploader;
+  protected readonly arduinoFirmwareUploader: ArduinoFirmwareUploader;
+
   @inject(FrontendApplicationStateService)
   private readonly appStateService: FrontendApplicationStateService;
 
-  private certificates: string[] = [];
-  private updatableFqbns: string[] = [];
-  private boardList = createBoardList({});
+  protected certificates: string[] = [];
+  protected updatableFqbns: string[] = [];
+  protected availableBoards: AvailableBoard[] = [];
 
-  busyCallback = (busy: boolean) => {
+  public busyCallback = (busy: boolean) => {
     return;
   };
 
+  constructor() {
+    super();
+  }
+
   @postConstruct()
   protected init(): void {
     this.arduinoPreferences.ready.then(() => {
@@ -70,8 +81,8 @@ export class UploadCertificateDialogWidget extends ReactWidget {
       })
     );
 
-    this.boardsServiceProvider.onBoardListDidChange((boardList) => {
-      this.boardList = boardList;
+    this.boardsServiceClient.onAvailableBoardsChanged((availableBoards) => {
+      this.availableBoards = availableBoards;
       this.update();
     });
   }
@@ -115,7 +126,7 @@ export class UploadCertificateDialogWidget extends ReactWidget {
   protected render(): React.ReactNode {
     return (
       <CertificateUploaderComponent
-        boardList={this.boardList}
+        availableBoards={this.availableBoards}
         certificates={this.certificates}
         updatableFqbns={this.updatableFqbns}
         addCertificate={this.addCertificate.bind(this)}
@@ -132,7 +143,7 @@ export class UploadCertificateDialogProps extends DialogProps {}
 @injectable()
 export class UploadCertificateDialog extends AbstractDialog<void> {
   @inject(UploadCertificateDialogWidget)
-  private readonly widget: UploadCertificateDialogWidget;
+  protected readonly widget: UploadCertificateDialogWidget;
 
   private busy = false;
 

arduino-ide-extension/src/browser/dialogs/certificate-uploader/select-board-components.tsx

@@ -1,36 +1,37 @@
 import { nls } from '@theia/core/lib/common';
-import React from '@theia/core/shared/react';
-import type {
-  BoardList,
-  BoardListItemWithBoard,
-} from '../../../common/protocol/board-list';
+import * as React from '@theia/core/shared/react';
+import { AvailableBoard } from '../../boards/boards-service-provider';
 import { ArduinoSelect } from '../../widgets/arduino-select';
 
-export type BoardOptionValue = BoardListItemWithBoard;
-type BoardOption = { value: BoardOptionValue | undefined; label: string };
+type BoardOption = { value: string; label: string };
 
 export const SelectBoardComponent = ({
-  boardList,
+  availableBoards,
   updatableFqbns,
-  onItemSelect,
-  selectedItem,
+  onBoardSelect,
+  selectedBoard,
   busy,
 }: {
-  boardList: BoardList;
+  availableBoards: AvailableBoard[];
   updatableFqbns: string[];
-  onItemSelect: (item: BoardOptionValue | null) => void;
-  selectedItem: BoardOptionValue | null;
+  onBoardSelect: (board: AvailableBoard | null) => void;
+  selectedBoard: AvailableBoard | null;
   busy: boolean;
 }): React.ReactElement => {
   const [selectOptions, setSelectOptions] = React.useState<BoardOption[]>([]);
 
-  const [selectItemPlaceholder, setSelectBoardPlaceholder] = React.useState('');
+  const [selectBoardPlaceholder, setSelectBoardPlaceholder] =
+    React.useState('');
 
   const selectOption = React.useCallback(
-    (boardOpt: BoardOption | null) => {
-      onItemSelect(boardOpt?.value ?? null);
+    (boardOpt: BoardOption) => {
+      onBoardSelect(
+        (boardOpt &&
+          availableBoards.find((board) => board.fqbn === boardOpt.value)) ||
+          null
+      );
     },
-    [onItemSelect]
+    [availableBoards, onBoardSelect]
   );
 
   React.useEffect(() => {
@@ -43,28 +44,26 @@ export const SelectBoardComponent = ({
       'arduino/certificate/selectBoard',
       'Select a board...'
     );
-    const updatableBoards = boardList.boards.filter((item) => {
-      const fqbn = item.board.fqbn;
-      return fqbn && updatableFqbns.includes(fqbn);
-    });
     let selBoard = -1;
-
-    const boardOptions: BoardOption[] = updatableBoards.map((item, i) => {
-      if (selectedItem === item) {
+    const updatableBoards = availableBoards.filter(
+      (board) => board.port && board.fqbn && updatableFqbns.includes(board.fqbn)
+    );
+    const boardsList: BoardOption[] = updatableBoards.map((board, i) => {
+      if (board.selected) {
         selBoard = i;
       }
       return {
         label: nls.localize(
           'arduino/certificate/boardAtPort',
           '{0} at {1}',
-          item.board.name,
-          item.port.address ?? ''
+          board.name,
+          board.port?.address ?? ''
         ),
-        value: item,
+        value: board.fqbn || '',
       };
     });
 
-    if (boardOptions.length === 0) {
+    if (boardsList.length === 0) {
       placeholderTxt = nls.localize(
         'arduino/certificate/noSupportedBoardConnected',
         'No supported board connected'
@@ -72,29 +71,32 @@ export const SelectBoardComponent = ({
     }
 
     setSelectBoardPlaceholder(placeholderTxt);
-    setSelectOptions(boardOptions);
+    setSelectOptions(boardsList);
 
-    if (selectedItem) {
-      selBoard = updatableBoards.indexOf(selectedItem);
+    if (selectedBoard) {
+      selBoard = boardsList
+        .map((boardOpt) => boardOpt.value)
+        .indexOf(selectedBoard.fqbn || '');
     }
 
-    selectOption(boardOptions[selBoard] || null);
-  }, [busy, boardList, selectOption, updatableFqbns, selectedItem]);
+    selectOption(boardsList[selBoard] || null);
+  }, [busy, availableBoards, selectOption, updatableFqbns, selectedBoard]);
+
   return (
     <ArduinoSelect
       id="board-select"
       menuPosition="fixed"
       isDisabled={selectOptions.length === 0 || busy}
-      placeholder={selectItemPlaceholder}
+      placeholder={selectBoardPlaceholder}
       options={selectOptions}
       value={
-        (selectedItem && {
-          value: selectedItem,
+        (selectedBoard && {
+          value: selectedBoard.fqbn,
           label: nls.localize(
             'arduino/certificate/boardAtPort',
             '{0} at {1}',
-            selectedItem.board.name,
-            selectedItem.port.address ?? ''
+            selectedBoard.name,
+            selectedBoard.port?.address ?? ''
           ),
         }) ||
         null

arduino-ide-extension/src/browser/dialogs/cloud-share-sketch-dialog.tsx

@@ -1,14 +1,12 @@
-import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
-import { DialogProps } from '@theia/core/lib/browser/dialogs';
-import { TreeNode } from '@theia/core/lib/browser/tree/tree';
-import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
-import { nls } from '@theia/core/lib/common/nls';
-import { MaybePromise } from '@theia/core/lib/common/types';
-import { Message } from '@theia/core/shared/@phosphor/messaging';
+import * as React from '@theia/core/shared/react';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import { Widget } from '@theia/core/shared/@phosphor/widgets';
-import React from '@theia/core/shared/react';
-import { CreateApi } from '../create/create-api';
+import { Message } from '@theia/core/shared/@phosphor/messaging';
+import { clipboard } from '@theia/core/electron-shared/@electron/remote';
+import { ReactWidget, DialogProps } from '@theia/core/lib/browser';
 import { AbstractDialog } from '../theia/dialogs/dialogs';
+import { CreateApi } from '../create/create-api';
+import { nls } from '@theia/core/lib/common';
 
 const RadioButton = (props: {
   id: string;
@@ -37,18 +35,15 @@ export const ShareSketchComponent = ({
   treeNode,
   createApi,
   domain = 'https://create.arduino.cc',
-  writeClipboard,
 }: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   treeNode: any;
   createApi: CreateApi;
   domain?: string;
-  writeClipboard: (text: string) => MaybePromise<void>;
 }): React.ReactElement => {
-  const [loading, setLoading] = React.useState<boolean>(false);
+  const [loading, setloading] = React.useState<boolean>(false);
 
   const radioChangeHandler = async (event: React.BaseSyntheticEvent) => {
-    setLoading(true);
+    setloading(true);
     const sketch = await createApi.editSketch({
       id: treeNode.sketchId,
       params: {
@@ -57,7 +52,7 @@ export const ShareSketchComponent = ({
     });
     // setPublicVisibility(sketch.is_public);
     treeNode.isPublic = sketch.is_public;
-    setLoading(false);
+    setloading(false);
   };
 
   const sketchLink = `${domain}/editor/_/${treeNode.sketchId}/preview`;
@@ -105,7 +100,7 @@ export const ShareSketchComponent = ({
               className="theia-input"
             />
             <button
-              onClick={() => writeClipboard(sketchLink)}
+              onClick={() => clipboard.writeText(sketchLink)}
               value="copy"
               className="theia-button secondary"
             >
@@ -126,52 +121,44 @@ export const ShareSketchComponent = ({
   );
 };
 
+@injectable()
 export class ShareSketchWidget extends ReactWidget {
-  private readonly writeClipboard = (text: string) =>
-    this.clipboardService.writeText(text);
-
-  constructor(
-    private treeNode: TreeNode,
-    private createApi: CreateApi,
-    private clipboardService: ClipboardService
-  ) {
+  constructor(private treeNode: any, private createApi: CreateApi) {
     super();
   }
 
-  protected override render(): React.ReactNode {
+  protected render(): React.ReactNode {
     return (
       <ShareSketchComponent
         treeNode={this.treeNode}
         createApi={this.createApi}
-        writeClipboard={this.writeClipboard}
       />
     );
   }
 }
 
+@injectable()
 export class ShareSketchDialogProps extends DialogProps {
-  readonly node: TreeNode;
+  readonly node: any;
   readonly createApi: CreateApi;
-  readonly clipboardService: ClipboardService;
 }
 
+@injectable()
 export class ShareSketchDialog extends AbstractDialog<void> {
   protected widget: ShareSketchWidget;
 
-  constructor(protected override readonly props: ShareSketchDialogProps) {
+  constructor(
+    @inject(ShareSketchDialogProps)
+    protected override readonly props: ShareSketchDialogProps
+  ) {
     super({ title: props.title });
     this.contentNode.classList.add('arduino-share-sketch-dialog');
-    this.widget = new ShareSketchWidget(
-      props.node,
-      props.createApi,
-      props.clipboardService
-    );
+    this.widget = new ShareSketchWidget(props.node, props.createApi);
   }
 
-  override get value(): void {
+  get value(): void {
     return;
   }
-
   protected override onAfterAttach(msg: Message): void {
     if (this.widget.isAttached) {
       Widget.detach(this.widget);

arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-component.tsx

@@ -1,31 +1,24 @@
 import { nls } from '@theia/core/lib/common';
-import React from '@theia/core/shared/react';
-import {
-  boardIdentifierEquals,
-  Port,
-  portIdentifierEquals,
-} from '../../../common/protocol';
+import * as React from '@theia/core/shared/react';
+import { Port } from '../../../common/protocol';
 import {
   ArduinoFirmwareUploader,
   FirmwareInfo,
 } from '../../../common/protocol/arduino-firmware-uploader';
-import type {
-  BoardList,
-  BoardListItemWithBoard,
-} from '../../../common/protocol/board-list';
+import { AvailableBoard } from '../../boards/boards-service-provider';
 import { ArduinoSelect } from '../../widgets/arduino-select';
 import { SelectBoardComponent } from '../certificate-uploader/select-board-components';
 
 type FirmwareOption = { value: string; label: string };
 
 export const FirmwareUploaderComponent = ({
-  boardList,
+  availableBoards,
   firmwareUploader,
   updatableFqbns,
   flashFirmware,
   isOpen,
 }: {
-  boardList: BoardList;
+  availableBoards: AvailableBoard[];
   firmwareUploader: ArduinoFirmwareUploader;
   updatableFqbns: string[];
   flashFirmware: (firmware: FirmwareInfo, port: Port) => Promise<any>;
@@ -38,8 +31,8 @@ export const FirmwareUploaderComponent = ({
     'ok' | 'fail' | 'installing' | null
   >(null);
 
-  const [selectedItem, setSelectedItem] =
-    React.useState<BoardListItemWithBoard | null>(null);
+  const [selectedBoard, setSelectedBoard] =
+    React.useState<AvailableBoard | null>(null);
 
   const [availableFirmwares, setAvailableFirmwares] = React.useState<
     FirmwareInfo[]
@@ -57,14 +50,13 @@ export const FirmwareUploaderComponent = ({
   const fetchFirmwares = React.useCallback(async () => {
     setInstallFeedback(null);
     setFirmwaresFetching(true);
-    if (!selectedItem) {
+    if (!selectedBoard) {
       return;
     }
 
     // fetch the firmwares for the selected board
-    const board = selectedItem.board;
     const firmwaresForFqbn = await firmwareUploader.availableFirmwares(
-      board.fqbn || ''
+      selectedBoard.fqbn || ''
     );
     setAvailableFirmwares(firmwaresForFqbn);
 
@@ -77,7 +69,7 @@ export const FirmwareUploaderComponent = ({
 
     if (firmwaresForFqbn.length > 0) setSelectedFirmware(firmwaresOpts[0]);
     setFirmwaresFetching(false);
-  }, [firmwareUploader, selectedItem]);
+  }, [firmwareUploader, selectedBoard]);
 
   const installFirmware = React.useCallback(async () => {
     setInstallFeedback('installing');
@@ -86,41 +78,30 @@ export const FirmwareUploaderComponent = ({
       (firmware) => firmware.firmware_version === selectedFirmware?.value
     );
 
-    const selectedBoard = selectedItem?.board;
-    const selectedPort = selectedItem?.port;
     try {
       const installStatus =
-        firmwareToFlash &&
-        selectedBoard &&
-        selectedPort &&
-        (await flashFirmware(firmwareToFlash, selectedPort));
+        !!firmwareToFlash &&
+        !!selectedBoard?.port &&
+        (await flashFirmware(firmwareToFlash, selectedBoard?.port));
 
       setInstallFeedback((installStatus && 'ok') || 'fail');
     } catch {
       setInstallFeedback('fail');
     }
-  }, [selectedItem, selectedFirmware, availableFirmwares, flashFirmware]);
+  }, [firmwareUploader, selectedBoard, selectedFirmware, availableFirmwares]);
 
-  const onItemSelect = React.useCallback(
-    (item: BoardListItemWithBoard | null) => {
-      if (!item) {
-        return;
-      }
-      const board = item.board;
-      const port = item.port;
-      const selectedBoard = selectedItem?.board;
-      const selectedPort = selectedItem?.port;
+  const onBoardSelect = React.useCallback(
+    (board: AvailableBoard) => {
+      const newFqbn = (board && board.fqbn) || null;
+      const prevFqbn = (selectedBoard && selectedBoard.fqbn) || null;
 
-      if (
-        !boardIdentifierEquals(board, selectedBoard) ||
-        !portIdentifierEquals(port, selectedPort)
-      ) {
+      if (newFqbn !== prevFqbn) {
         setInstallFeedback(null);
         setAvailableFirmwares([]);
-        setSelectedItem(item);
+        setSelectedBoard(board);
       }
     },
-    [selectedItem]
+    [selectedBoard]
   );
 
   return (
@@ -134,10 +115,10 @@ export const FirmwareUploaderComponent = ({
         <div className="dialogRow">
           <div className="fl1">
             <SelectBoardComponent
-              boardList={boardList}
+              availableBoards={availableBoards}
               updatableFqbns={updatableFqbns}
-              onItemSelect={onItemSelect}
-              selectedItem={selectedItem}
+              onBoardSelect={onBoardSelect}
+              selectedBoard={selectedBoard}
               busy={installFeedback === 'installing'}
             />
           </div>
@@ -145,7 +126,7 @@ export const FirmwareUploaderComponent = ({
             type="button"
             className="theia-button secondary"
             disabled={
-              selectedItem === null ||
+              selectedBoard === null ||
               firmwaresFetching ||
               installFeedback === 'installing'
             }
@@ -169,14 +150,14 @@ export const FirmwareUploaderComponent = ({
                 id="firmware-select"
                 menuPosition="fixed"
                 isDisabled={
-                  !selectedItem ||
+                  !selectedBoard ||
                   firmwaresFetching ||
                   installFeedback === 'installing'
                 }
                 options={firmwareOptions}
                 value={selectedFirmware}
                 tabSelectsValue={false}
-                onChange={(value: FirmwareOption | null) => {
+                onChange={(value) => {
                   if (value) {
                     setInstallFeedback(null);
                     setSelectedFirmware(value);

arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-dialog.tsx

@@ -1,21 +1,24 @@
-import { DialogProps } from '@theia/core/lib/browser/dialogs';
-import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
-import type { Message } from '@theia/core/shared/@phosphor/messaging';
+import * as React from '@theia/core/shared/react';
 import {
   inject,
   injectable,
   postConstruct,
 } from '@theia/core/shared/inversify';
-import React from '@theia/core/shared/react';
+import { DialogProps } from '@theia/core/lib/browser/dialogs';
+import { ReactDialog } from '../../theia/dialogs/dialogs';
+import { Message } from '@theia/core/shared/@phosphor/messaging';
+import {
+  AvailableBoard,
+  BoardsServiceProvider,
+} from '../../boards/boards-service-provider';
 import {
   ArduinoFirmwareUploader,
   FirmwareInfo,
 } from '../../../common/protocol/arduino-firmware-uploader';
-import type { Port } from '../../../common/protocol/boards-service';
-import { BoardsServiceProvider } from '../../boards/boards-service-provider';
-import { UploadFirmware } from '../../contributions/upload-firmware';
-import { ReactDialog } from '../../theia/dialogs/dialogs';
 import { FirmwareUploaderComponent } from './firmware-uploader-component';
+import { UploadFirmware } from '../../contributions/upload-firmware';
+import { Port } from '../../../common/protocol';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 
 @injectable()
 export class UploadFirmwareDialogProps extends DialogProps {}
@@ -23,13 +26,14 @@ export class UploadFirmwareDialogProps extends DialogProps {}
 @injectable()
 export class UploadFirmwareDialog extends ReactDialog<void> {
   @inject(BoardsServiceProvider)
-  private readonly boardsServiceProvider: BoardsServiceProvider;
+  private readonly boardsServiceClient: BoardsServiceProvider;
   @inject(ArduinoFirmwareUploader)
   private readonly arduinoFirmwareUploader: ArduinoFirmwareUploader;
   @inject(FrontendApplicationStateService)
-  private readonly appStateService: FrontendApplicationStateService;
+  private readonly appStatusService: FrontendApplicationStateService;
 
   private updatableFqbns: string[] = [];
+  private availableBoards: AvailableBoard[] = [];
   private isOpen = new Object();
   private busy = false;
 
@@ -45,12 +49,16 @@ export class UploadFirmwareDialog extends ReactDialog<void> {
 
   @postConstruct()
   protected init(): void {
-    this.appStateService.reachedState('ready').then(async () => {
+    this.appStatusService.reachedState('ready').then(async () => {
       const fqbns = await this.arduinoFirmwareUploader.updatableBoards();
       this.updatableFqbns = fqbns;
       this.update();
     });
-    this.boardsServiceProvider.onBoardListDidChange(() => this.update());
+
+    this.boardsServiceClient.onAvailableBoardsChanged((availableBoards) => {
+      this.availableBoards = availableBoards;
+      this.update();
+    });
   }
 
   get value(): void {
@@ -62,7 +70,7 @@ export class UploadFirmwareDialog extends ReactDialog<void> {
       <div>
         <form>
           <FirmwareUploaderComponent
-            boardList={this.boardsServiceProvider.boardList}
+            availableBoards={this.availableBoards}
             firmwareUploader={this.arduinoFirmwareUploader}
             flashFirmware={this.flashFirmware.bind(this)}
             updatableFqbns={this.updatableFqbns}

arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx

@@ -1,15 +1,10 @@
-import { nls } from '@theia/core/lib/common/nls';
-import React from '@theia/core/shared/react';
-// @ts-expect-error see https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1319854183
-import type { Options } from 'react-markdown';
+import { nls } from '@theia/core/lib/common';
+import { shell } from '@theia/core/electron-shared/@electron/remote';
+import * as React from '@theia/core/shared/react';
+import ReactMarkdown from 'react-markdown';
 import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
 import ProgressBar from '../../components/ProgressBar';
 
-const ReactMarkdown = React.lazy<React.ComponentType<Options>>(
-  // @ts-expect-error see above
-  () => import('react-markdown')
-);
-
 export interface UpdateProgress {
   progressInfo?: ProgressInfo | undefined;
   downloadFinished?: boolean;
@@ -20,7 +15,6 @@ export interface UpdateProgress {
 export interface IDEUpdaterComponentProps {
   updateInfo: UpdateInfo;
   updateProgress: UpdateProgress;
-  openExternal: (url: string) => undefined;
 }
 
 export const IDEUpdaterComponent = ({
@@ -31,7 +25,6 @@ export const IDEUpdaterComponent = ({
     progressInfo,
     error,
   },
-  openExternal,
 }: IDEUpdaterComponentProps): React.ReactElement => {
   const { version, releaseNotes } = updateInfo;
   const [changelog, setChangelog] = React.useState<string>('');
@@ -102,17 +95,13 @@ export const IDEUpdaterComponent = ({
         {changelog && (
           <div className="dialogRow changelog-container">
             <div className="changelog">
-              <React.Suspense
-                fallback={
-                  <div className="fallback">
-                    <div className="spinner" />
-                  </div>
-                }
-              >
               <ReactMarkdown
                 components={{
                   a: ({ href, children, ...props }) => (
-                      <a onClick={() => href && openExternal(href)} {...props}>
+                    <a
+                      onClick={() => href && shell.openExternal(href)}
+                      {...props}
+                    >
                       {children}
                     </a>
                   ),
@@ -120,7 +109,6 @@ export const IDEUpdaterComponent = ({
               >
                 {changelog}
               </ReactMarkdown>
-              </React.Suspense>
             </div>
           </div>
         )}

arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-dialog.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import {
   inject,
   injectable,
@@ -18,6 +18,8 @@ import {
 import { LocalStorageService } from '@theia/core/lib/browser';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
 
+const DOWNLOAD_PAGE_URL = 'https://www.arduino.cc/en/software';
+
 @injectable()
 export class IDEUpdaterDialogProps extends DialogProps {}
 
@@ -74,15 +76,11 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
         <IDEUpdaterComponent
           updateInfo={this.updateInfo}
           updateProgress={this.updateProgress}
-          openExternal={this.openExternal}
         />
       )
     );
   }
 
-  private readonly openExternal = (url: string) =>
-    this.windowService.openNewWindow(url, { external: true });
-
   get value(): UpdateInfo | undefined {
     return this.updateInfo;
   }
@@ -166,7 +164,7 @@ export class IDEUpdaterDialog extends ReactDialog<UpdateInfo | undefined> {
   }
 
   private openDownloadPage(): void {
-    this.openExternal('https://www.arduino.cc/en/software');
+    this.windowService.openNewWindow(DOWNLOAD_PAGE_URL, { external: true });
     this.close();
   }
 

arduino-ide-extension/src/browser/dialogs/settings/settings-component.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import 'react-tabs/style/react-tabs.css';
 import { Disable } from 'react-disable';

arduino-ide-extension/src/browser/dialogs/settings/settings-dialog.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import {
   injectable,
   inject,

arduino-ide-extension/src/browser/dialogs/settings/settings-step-input.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import classnames from 'classnames';
 
 interface SettingsStepInputProps {

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

@@ -117,7 +117,7 @@ export class SettingsService {
   protected _settings: Settings;
 
   @postConstruct()
-  protected init(): void {
+  protected async init(): Promise<void> {
     this.appStateService.reachedState('ready').then(async () => {
       const settings = await this.loadSettings();
       this._settings = deepClone(settings);

arduino-ide-extension/src/browser/dialogs/user-fields/user-fields-component.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import { BoardUserField } from '../../../common/protocol';
 import { nls } from '@theia/core/lib/common';
 

arduino-ide-extension/src/browser/dialogs/user-fields/user-fields-dialog.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { DialogProps } from '@theia/core/lib/browser/dialogs';
 import { Message } from '@theia/core/shared/@phosphor/messaging';

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

@@ -20,7 +20,7 @@ import { Installable } from '../../common/protocol';
 import { ListItemRenderer } from '../widgets/component-list/list-item-renderer';
 import { nls } from '@theia/core/lib/common';
 import { LibraryFilterRenderer } from '../widgets/component-list/filter-renderer';
-import { findChildTheiaButton, splitByBoldTag } from '../utils/dom';
+import { findChildTheiaButton } from '../utils/dom';
 
 @injectable()
 export class LibraryListWidget extends ListWidget<
@@ -81,7 +81,7 @@ export class LibraryListWidget extends ListWidget<
     let installDependencies: boolean | undefined = undefined;
     if (dependencies.length) {
       const message = document.createElement('div');
-      const textContent =
+      message.innerHTML =
         dependencies.length === 1
           ? nls.localize(
               'arduino/library/needsOneDependency',
@@ -95,22 +95,6 @@ export class LibraryListWidget extends ListWidget<
               item.name,
               version
             );
-      const segments = splitByBoldTag(textContent);
-      if (!segments) {
-        message.textContent = textContent;
-      } else {
-        segments.map((segment) => {
-          const span = document.createElement('span');
-          if (typeof segment === 'string') {
-            span.textContent = segment;
-          } else {
-            const bold = document.createElement('b');
-            bold.textContent = segment.textContent;
-            span.appendChild(bold);
-          }
-          message.appendChild(span);
-        });
-      }
       const listContainer = document.createElement('div');
       listContainer.style.maxHeight = '300px';
       listContainer.style.overflowY = 'auto';

arduino-ide-extension/src/browser/local-cache/local-cache-fs-provider.ts

@@ -16,10 +16,6 @@ import {
 import { AuthenticationClientService } from '../auth/authentication-client-service';
 import { AuthenticationSession } from '../../common/protocol/authentication-service';
 import { ConfigService } from '../../common/protocol';
-import {
-  ARDUINO_CLOUD_FOLDER,
-  REMOTE_SKETCHBOOK_FOLDER,
-} from '../utils/constants';
 
 export namespace LocalCacheUri {
   export const scheme = 'arduino-local-cache';
@@ -111,7 +107,7 @@ export class LocalCacheFsProvider
       return;
     }
     this._localCacheRoot = localCacheUri;
-    for (const segment of [REMOTE_SKETCHBOOK_FOLDER, ARDUINO_CLOUD_FOLDER]) {
+    for (const segment of ['RemoteSketchbook', 'ArduinoCloud']) {
       this._localCacheRoot = this._localCacheRoot.resolve(segment);
       await fileService.createFolder(this._localCacheRoot);
     }

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

@@ -1,25 +1,25 @@
-import { ApplicationError } from '@theia/core/lib/common/application-error';
-import { Disposable } from '@theia/core/lib/common/disposable';
-import { Emitter } from '@theia/core/lib/common/event';
-import { MessageService } from '@theia/core/lib/common/message-service';
-import { MessageType } from '@theia/core/lib/common/message-service-protocol';
-import { nls } from '@theia/core/lib/common/nls';
+import {
+  ApplicationError,
+  Disposable,
+  Emitter,
+  MessageService,
+  nls,
+} from '@theia/core';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { NotificationManager } from '@theia/messages/lib/browser/notifications-manager';
-import { BoardIdentifier, PortIdentifier } from '../common/protocol';
-import {
-  BoardListItem,
-  boardListItemEquals,
-  getInferredBoardOrBoard,
-} from '../common/protocol/board-list';
+import { MessageType } from '@theia/core/lib/common/message-service-protocol';
+import { Board, Port } from '../common/protocol';
 import {
   Monitor,
   MonitorManagerProxyClient,
   MonitorManagerProxyFactory,
-  MonitorSettings,
-  PluggableMonitorSettings,
 } from '../common/protocol/monitor-service';
+import {
+  PluggableMonitorSettings,
+  MonitorSettings,
+} from '../node/monitor-settings/monitor-settings-provider';
+import { BoardsConfig } from './boards/boards-config';
 import { BoardsServiceProvider } from './boards/boards-service-provider';
 
 @injectable()
@@ -57,8 +57,8 @@ export class MonitorManagerProxyClientImpl
   // frontend and backend.
   private webSocket?: WebSocket;
   private wsPort?: number;
-  private lastConnectedBoard: BoardListItem | undefined;
-  private onBoardListDidChange: Disposable | undefined;
+  private lastConnectedBoard: BoardsConfig.Config;
+  private onBoardsConfigChanged: Disposable | undefined;
 
   getWebSocketPort(): number | undefined {
     return this.wsPort;
@@ -112,8 +112,8 @@ export class MonitorManagerProxyClientImpl
     if (!this.webSocket) {
       return;
     }
-    this.onBoardListDidChange?.dispose();
-    this.onBoardListDidChange = undefined;
+    this.onBoardsConfigChanged?.dispose();
+    this.onBoardsConfigChanged = undefined;
     try {
       this.webSocket.close();
       this.webSocket = undefined;
@@ -136,52 +136,51 @@ export class MonitorManagerProxyClientImpl
   }
 
   async startMonitor(settings?: PluggableMonitorSettings): Promise<void> {
-    const { boardList } = this.boardsServiceProvider;
-    this.lastConnectedBoard = boardList.items[boardList.selectedIndex];
-    if (!this.onBoardListDidChange) {
-      this.onBoardListDidChange =
-        this.boardsServiceProvider.onBoardListDidChange(
-          async (newBoardList) => {
-            const currentConnectedBoard =
-              newBoardList.items[newBoardList.selectedIndex];
-            if (!currentConnectedBoard) {
-              return;
-            }
+    await this.boardsServiceProvider.reconciled;
+    this.lastConnectedBoard = {
+      selectedBoard: this.boardsServiceProvider.boardsConfig.selectedBoard,
+      selectedPort: this.boardsServiceProvider.boardsConfig.selectedPort,
+    };
 
+    if (!this.onBoardsConfigChanged) {
+      this.onBoardsConfigChanged =
+        this.boardsServiceProvider.onBoardsConfigChanged(
+          async ({ selectedBoard, selectedPort }) => {
             if (
-              !this.lastConnectedBoard ||
-              boardListItemEquals(
-                currentConnectedBoard,
-                this.lastConnectedBoard
+              typeof selectedBoard === 'undefined' ||
+              typeof selectedPort === 'undefined'
             )
+              return;
+
+            // a board is plugged and it's different from the old connected board
+            if (
+              selectedBoard?.fqbn !==
+                this.lastConnectedBoard?.selectedBoard?.fqbn ||
+              Port.keyOf(selectedPort) !==
+                (this.lastConnectedBoard.selectedPort
+                  ? Port.keyOf(this.lastConnectedBoard.selectedPort)
+                  : undefined)
             ) {
+              this.lastConnectedBoard = {
+                selectedBoard: selectedBoard,
+                selectedPort: selectedPort,
+              };
+              this.onMonitorShouldResetEmitter.fire();
+            } else {
               // a board is plugged and it's the same as prev, rerun "this.startMonitor" to
               // recreate the listener callback
               this.startMonitor();
-            } else {
-              // a board is plugged and it's different from the old connected board
-              this.lastConnectedBoard = currentConnectedBoard;
-              this.onMonitorShouldResetEmitter.fire();
             }
           }
         );
     }
 
-    if (!this.lastConnectedBoard) {
-      return;
-    }
-
-    const board = getInferredBoardOrBoard(this.lastConnectedBoard);
-    if (!board) {
-      return;
-    }
+    const { selectedBoard, selectedPort } =
+      this.boardsServiceProvider.boardsConfig;
+    if (!selectedBoard || !selectedBoard.fqbn || !selectedPort) return;
     try {
       this.clearVisibleNotification();
-      await this.server().startMonitor(
-        board,
-        this.lastConnectedBoard.port,
-        settings
-      );
+      await this.server().startMonitor(selectedBoard, selectedPort, settings);
     } catch (err) {
       const message = ApplicationError.is(err) ? err.message : String(err);
       this.previousNotificationId = this.notificationId(message);
@@ -189,10 +188,7 @@ export class MonitorManagerProxyClientImpl
     }
   }
 
-  getCurrentSettings(
-    board: BoardIdentifier,
-    port: PortIdentifier
-  ): Promise<MonitorSettings> {
+  getCurrentSettings(board: Board, port: Port): Promise<MonitorSettings> {
     return this.server().getCurrentSettings(board, port);
   }
 

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

@@ -10,10 +10,10 @@ import {
   monitorConnectionStatusEquals,
   MonitorEOL,
   MonitorManagerProxyClient,
-  MonitorSettings,
   MonitorState,
 } from '../common/protocol';
 import { isNullOrUndefined } from '../common/utils';
+import { MonitorSettings } from '../node/monitor-settings/monitor-settings-provider';
 
 @injectable()
 export class MonitorModel implements FrontendApplicationContribution {

arduino-ide-extension/src/browser/notification-center.ts

@@ -14,13 +14,13 @@ import {
   NotificationServiceClient,
   NotificationServiceServer,
 } from '../common/protocol/notification-service';
-import type {
+import {
+  AttachedBoardsChangeEvent,
   BoardsPackage,
   LibraryPackage,
   ConfigState,
   Sketch,
   ProgressMessage,
-  DetectedPorts,
 } from '../common/protocol';
 import {
   FrontendApplicationStateService,
@@ -61,9 +61,8 @@ export class NotificationCenter
   private readonly libraryDidUninstallEmitter = new Emitter<{
     item: LibraryPackage;
   }>();
-  private readonly detectedPortsDidChangeEmitter = new Emitter<{
-    detectedPorts: DetectedPorts;
-  }>();
+  private readonly attachedBoardsDidChangeEmitter =
+    new Emitter<AttachedBoardsChangeEvent>();
   private readonly recentSketchesChangedEmitter = new Emitter<{
     sketches: Sketch[];
   }>();
@@ -83,7 +82,7 @@ export class NotificationCenter
     this.platformDidUninstallEmitter,
     this.libraryDidInstallEmitter,
     this.libraryDidUninstallEmitter,
-    this.detectedPortsDidChangeEmitter
+    this.attachedBoardsDidChangeEmitter
   );
 
   readonly onDidReinitialize = this.didReinitializeEmitter.event;
@@ -98,7 +97,8 @@ export class NotificationCenter
   readonly onPlatformDidUninstall = this.platformDidUninstallEmitter.event;
   readonly onLibraryDidInstall = this.libraryDidInstallEmitter.event;
   readonly onLibraryDidUninstall = this.libraryDidUninstallEmitter.event;
-  readonly onDetectedPortsDidChange = this.detectedPortsDidChangeEmitter.event;
+  readonly onAttachedBoardsDidChange =
+    this.attachedBoardsDidChangeEmitter.event;
   readonly onRecentSketchesDidChange = this.recentSketchesChangedEmitter.event;
   readonly onAppStateDidChange = this.onAppStateDidChangeEmitter.event;
 
@@ -166,8 +166,8 @@ export class NotificationCenter
     this.libraryDidUninstallEmitter.fire(event);
   }
 
-  notifyDetectedPortsDidChange(event: { detectedPorts: DetectedPorts }): void {
-    this.detectedPortsDidChangeEmitter.fire(event);
+  notifyAttachedBoardsDidChange(event: AttachedBoardsChangeEvent): void {
+    this.attachedBoardsDidChangeEmitter.fire(event);
   }
 
   notifyRecentSketchesDidChange(event: { sketches: Sketch[] }): void {

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

@@ -1,14 +1,6 @@
-import React from '@theia/core/shared/react';
-import {
-  injectable,
-  inject,
-  postConstruct,
-} from '@theia/core/shared/inversify';
-import {
-  AbstractViewContribution,
-  ApplicationShell,
-  codicon,
-} from '@theia/core/lib/browser';
+import * as React from '@theia/core/shared/react';
+import { injectable, inject } from '@theia/core/shared/inversify';
+import { AbstractViewContribution, codicon } from '@theia/core/lib/browser';
 import { MonitorWidget } from './monitor-widget';
 import { MenuModelRegistry, Command, CommandRegistry } from '@theia/core';
 import {
@@ -21,12 +13,6 @@ import { nls } from '@theia/core/lib/common';
 import { Event } from '@theia/core/lib/common/event';
 import { MonitorModel } from '../../monitor-model';
 import { MonitorManagerProxyClient } from '../../../common/protocol';
-import {
-  ArduinoPreferences,
-  defaultMonitorWidgetDockPanel,
-  isMonitorWidgetDockPanel,
-} from '../../arduino-preferences';
-import { serialMonitorWidgetLabel } from '../../../common/nls';
 
 export namespace SerialMonitor {
   export namespace Commands {
@@ -65,64 +51,30 @@ export class MonitorViewContribution
     MonitorWidget.ID + ':toggle-toolbar';
   static readonly RESET_SERIAL_MONITOR = MonitorWidget.ID + ':reset';
 
+  constructor(
     @inject(MonitorModel)
-  private readonly model: MonitorModel;
+    protected readonly model: MonitorModel,
+
     @inject(MonitorManagerProxyClient)
-  private readonly monitorManagerProxy: MonitorManagerProxyClient;
-  @inject(ArduinoPreferences)
-  private readonly arduinoPreferences: ArduinoPreferences;
-
-  private _panel: ApplicationShell.Area;
-
-  constructor() {
+    protected readonly monitorManagerProxy: MonitorManagerProxyClient
+  ) {
     super({
       widgetId: MonitorWidget.ID,
-      widgetName: serialMonitorWidgetLabel,
+      widgetName: MonitorWidget.LABEL,
       defaultWidgetOptions: {
-        area: defaultMonitorWidgetDockPanel,
+        area: 'bottom',
       },
       toggleCommandId: MonitorViewContribution.TOGGLE_SERIAL_MONITOR,
       toggleKeybinding: 'CtrlCmd+Shift+M',
     });
-    this._panel = defaultMonitorWidgetDockPanel;
-  }
-
-  @postConstruct()
-  protected init(): void {
-    this._panel =
-      this.arduinoPreferences['arduino.monitor.dockPanel'] ??
-      defaultMonitorWidgetDockPanel;
     this.monitorManagerProxy.onMonitorShouldReset(() => this.reset());
-    this.arduinoPreferences.onPreferenceChanged((event) => {
-      if (
-        event.preferenceName === 'arduino.monitor.dockPanel' &&
-        isMonitorWidgetDockPanel(event.newValue) &&
-        event.newValue !== this._panel
-      ) {
-        this._panel = event.newValue;
-        const widget = this.tryGetWidget();
-        // reopen at the new position if opened
-        if (widget) {
-          widget.close();
-          this.openView({ activate: true, reveal: true });
-        }
-      }
-    });
-  }
-
-  override get defaultViewOptions(): ApplicationShell.WidgetOptions {
-    const viewOptions = super.defaultViewOptions;
-    return {
-      ...viewOptions,
-      area: this._panel,
-    };
   }
 
   override registerMenus(menus: MenuModelRegistry): void {
     if (this.toggleCommand) {
       menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
         commandId: this.toggleCommand.id,
-        label: serialMonitorWidgetLabel,
+        label: MonitorWidget.LABEL,
         order: '5',
       });
     }

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

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import {
   injectable,
   inject,
@@ -23,14 +23,17 @@ import { nls } from '@theia/core/lib/common';
 import {
   MonitorEOL,
   MonitorManagerProxyClient,
-  MonitorSettings,
 } from '../../../common/protocol';
 import { MonitorModel } from '../../monitor-model';
+import { MonitorSettings } from '../../../node/monitor-settings/monitor-settings-provider';
 import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
-import { serialMonitorWidgetLabel } from '../../../common/nls';
 
 @injectable()
 export class MonitorWidget extends ReactWidget {
+  static readonly LABEL = nls.localize(
+    'arduino/common/serialMonitor',
+    'Serial Monitor'
+  );
   static readonly ID = 'serial-monitor';
 
   protected settings: MonitorSettings = {};
@@ -62,7 +65,7 @@ export class MonitorWidget extends ReactWidget {
   constructor() {
     super();
     this.id = MonitorWidget.ID;
-    this.title.label = serialMonitorWidgetLabel;
+    this.title.label = MonitorWidget.LABEL;
     this.title.iconClass = 'monitor-tab-icon';
     this.title.closable = true;
     this.scrollOptions = undefined;
@@ -173,6 +176,7 @@ export class MonitorWidget extends ReactWidget {
 
   private async startMonitor(): Promise<void> {
     await this.appStateService.reachedState('ready');
+    await this.boardsServiceProvider.reconciled;
     await this.syncSettings();
     await this.monitorManagerProxy.startMonitor();
   }

arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-input.tsx

@@ -1,4 +1,4 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import { Key, KeyCode } from '@theia/core/lib/browser/keys';
 import { Board } from '../../../common/protocol/boards-service';
 import { DisposableCollection, nls } from '@theia/core/lib/common';

arduino-ide-extension/src/browser/serial/monitor/serial-monitor-send-output.tsx

@@ -1,8 +1,8 @@
-import React from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
 import { Event } from '@theia/core/lib/common/event';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { areEqual, FixedSizeList as List } from 'react-window';
-import dateFormat from 'dateformat';
+import dateFormat = require('dateformat');
 import { messagesToLines, truncateLines } from './monitor-utils';
 import { MonitorManagerProxyClient } from '../../../common/protocol';
 import { MonitorModel } from '../../monitor-model';

arduino-ide-extension/src/browser/serial/plotter/plotter-frontend-contribution.ts

@@ -1,16 +1,26 @@
-import { Endpoint } from '@theia/core/lib/browser/endpoint';
 import { ThemeService } from '@theia/core/lib/browser/theming';
-import { Command, CommandRegistry } from '@theia/core/lib/common/command';
-import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import type { MenuModelRegistry } from '@theia/core/lib/common/menu';
-import { nls } from '@theia/core/lib/common/nls';
-import { inject, injectable } from '@theia/core/shared/inversify';
-import queryString from 'query-string';
-import { MonitorManagerProxyClient } from '../../../common/protocol';
-import { Contribution } from '../../contributions/contribution';
+import { injectable, inject } from '@theia/core/shared/inversify';
+import {
+  Command,
+  CommandRegistry,
+  MaybePromise,
+  MenuModelRegistry,
+} from '@theia/core';
 import { ArduinoMenus } from '../../menu/arduino-menus';
+import { Contribution } from '../../contributions/contribution';
+import { Endpoint, FrontendApplication } from '@theia/core/lib/browser';
+import { ipcRenderer } from '@theia/electron/shared/electron';
+import { MonitorManagerProxyClient } from '../../../common/protocol';
+import { BoardsServiceProvider } from '../../boards/boards-service-provider';
 import { MonitorModel } from '../../monitor-model';
 import { ArduinoToolbar } from '../../toolbar/arduino-toolbar';
+import {
+  CLOSE_PLOTTER_WINDOW,
+  SHOW_PLOTTER_WINDOW,
+} from '../../../common/ipc-communication';
+import { nls } from '@theia/core/lib/common/nls';
+
+const queryString = require('query-string');
 
 export namespace SerialPlotterContribution {
   export namespace Commands {
@@ -34,31 +44,38 @@ export namespace SerialPlotterContribution {
 
 @injectable()
 export class PlotterFrontendContribution extends Contribution {
-  private readonly endpointUrl = new Endpoint({ path: '/plotter' })
-    .getRestUrl()
-    .toString();
-  private readonly toDispose = new DisposableCollection();
-  private _plotterUrl: string | undefined;
+  protected window: Window | null;
+  protected url: string;
+  protected wsPort: number;
 
   @inject(MonitorModel)
-  private readonly model: MonitorModel;
-  @inject(ThemeService)
-  private readonly themeService: ThemeService;
-  @inject(MonitorManagerProxyClient)
-  private readonly monitorManagerProxy: MonitorManagerProxyClient;
+  protected readonly model: MonitorModel;
 
-  override onStart(): void {
-    this.toDispose.push(
-      window.electronArduino.registerPlotterWindowCloseHandler(() => {
-        this._plotterUrl = undefined;
-      })
-    );
+  @inject(ThemeService)
+  protected readonly themeService: ThemeService;
+
+  @inject(MonitorManagerProxyClient)
+  protected readonly monitorManagerProxy: MonitorManagerProxyClient;
+
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceProvider: BoardsServiceProvider;
+
+  override onStart(app: FrontendApplication): MaybePromise<void> {
+    this.url = new Endpoint({ path: '/plotter' }).getRestUrl().toString();
+
+    ipcRenderer.on(CLOSE_PLOTTER_WINDOW, async () => {
+      if (!!this.window) {
+        this.window = null;
+      }
+    });
     this.monitorManagerProxy.onMonitorShouldReset(() => this.reset());
+
+    return super.onStart(app);
   }
 
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(SerialPlotterContribution.Commands.OPEN, {
-      execute: () => this.startPlotter(),
+      execute: this.startPlotter.bind(this),
     });
     registry.registerCommand(SerialPlotterContribution.Commands.RESET, {
       execute: () => this.reset(),
@@ -68,7 +85,7 @@ export class PlotterFrontendContribution extends Contribution {
       {
         isVisible: (widget) =>
           ArduinoToolbar.is(widget) && widget.side === 'right',
-        execute: () => this.startPlotter(),
+        execute: this.startPlotter.bind(this),
       }
     );
   }
@@ -81,13 +98,10 @@ export class PlotterFrontendContribution extends Contribution {
     });
   }
 
-  private async startPlotter(forceReload = false): Promise<void> {
+  async startPlotter(): Promise<void> {
     await this.monitorManagerProxy.startMonitor();
-    if (this._plotterUrl) {
-      window.electronArduino.showPlotterWindow({
-        url: this._plotterUrl,
-        forceReload,
-      });
+    if (!!this.window) {
+      ipcRenderer.send(SHOW_PLOTTER_WINDOW);
       return;
     }
     const wsPort = this.monitorManagerProxy.getWebSocketPort();
@@ -103,30 +117,26 @@ export class PlotterFrontendContribution extends Contribution {
     }
   }
 
-  private open(wsPort: number): void {
+  protected async open(wsPort: number): Promise<void> {
     const initConfig = {
-      darkTheme: this.isDarkTheme,
+      darkTheme: this.themeService.getCurrentTheme().type === 'dark',
       wsPort,
       serialPort: this.model.serialPort,
     };
-    this._plotterUrl = queryString.stringifyUrl(
+    const urlWithParams = queryString.stringifyUrl(
       {
-        url: this.endpointUrl,
+        url: this.url,
         query: initConfig,
       },
       { arrayFormat: 'comma' }
     );
-    window.electronArduino.showPlotterWindow({ url: this._plotterUrl });
+    this.window = window.open(urlWithParams, 'serialPlotter');
   }
 
-  private get isDarkTheme(): boolean {
-    const themeType = this.themeService.getCurrentTheme().type;
-    return themeType === 'dark' || themeType === 'hc';
-  }
-
-  private async reset(): Promise<void> {
-    if (this._plotterUrl) {
-      await this.startPlotter(true);
+  protected async reset(): Promise<void> {
+    if (!!this.window) {
+      this.window.close();
+      await this.startPlotter();
     }
   }
 }

arduino-ide-extension/src/browser/storage-wrapper.ts

@@ -0,0 +1,37 @@
+import { injectable, inject } from '@theia/core/shared/inversify';
+import { StorageService } from '@theia/core/lib/browser/storage-service';
+import {
+  Command,
+  CommandContribution,
+  CommandRegistry,
+} from '@theia/core/lib/common/command';
+
+/**
+ * This is a workaround to break cycles in the dependency injection. Provides commands for `setData` and `getData`.
+ */
+@injectable()
+export class StorageWrapper implements CommandContribution {
+  @inject(StorageService)
+  protected storageService: StorageService;
+
+  registerCommands(commands: CommandRegistry): void {
+    commands.registerCommand(StorageWrapper.Commands.GET_DATA, {
+      execute: (key: string, defaultValue?: any) =>
+        this.storageService.getData(key, defaultValue),
+    });
+    commands.registerCommand(StorageWrapper.Commands.SET_DATA, {
+      execute: (key: string, value: any) =>
+        this.storageService.setData(key, value),
+    });
+  }
+}
+export namespace StorageWrapper {
+  export namespace Commands {
+    export const SET_DATA: Command = {
+      id: 'arduino-store-wrapper-set',
+    };
+    export const GET_DATA: Command = {
+      id: 'arduino-store-wrapper-get',
+    };
+  }
+}

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

@@ -49,3 +49,14 @@
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }
+
+
+/* High Contrast Theme rules */
+/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
+.hc-black.hc-theia.theia-hc .arduino-select__option--is-selected {
+    outline: 1px solid var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .arduino-select__option--is-focused {
+    outline: 1px dashed var(--theia-focusBorder);
+}

arduino-ide-extension/src/browser/style/boards-config-dialog.css

@@ -179,12 +179,13 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   font-size: 16px;
 }
 
-.arduino-boards-toolbar-item--protocol,
+.arduino-boards-toolbar-item--protocol ,
 .arduino-boards-dropdown-item--protocol {
   color: var(--theia-arduino-toolbar-dropdown-label);
 }
 
-.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item {
+.arduino-boards-toolbar-item-container
+  .arduino-boards-toolbar-item {
   display: flex;
   align-items: baseline;
   width: 100%;
@@ -195,10 +196,7 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
 }
 
 .arduino-boards-toolbar-item--label-connected {
-  font-family: 'Open Sans Bold';
-  font-style: normal;
   font-weight: 700;
-  font-size: 14px;
 }
 
 .arduino-boards-toolbar-item-container .caret {
@@ -210,10 +208,6 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   margin: -1px;
   z-index: 1;
   border: 1px solid var(--theia-arduino-toolbar-dropdown-border);
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
 }
 
 .arduino-boards-dropdown-list:focus {
@@ -236,47 +230,20 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   cursor: default;
   display: flex;
   font-size: var(--theia-ui-font-size1);
+  gap: 10px;
   justify-content: space-between;
   padding: 10px;
 }
 
-.arduino-boards-dropdown-item--board-header {
-  display: flex;
-  align-items: center;
-}
-
 .arduino-boards-dropdown-item--label {
   overflow: hidden;
   flex: 1;
 }
 
-/* Redefine default codicon size https://github.com/microsoft/vscode/commit/38cd0a377b7abef34fb07fe770fc633e68819ba6 */
-.arduino-boards-dropdown-item .codicon[class*='codicon-'] {
-  font-size: 14px;
-}
-
-.arduino-boards-dropdown-item .p-TabBar-toolbar {
-  padding: 0px;
-  margin: 0px;
-  flex-direction: column;
-}
-
-.arduino-boards-dropdown-item .p-TabBar-toolbar .item {
-  margin: 0px;
-}
-
-.arduino-boards-dropdown-item .p-TabBar-toolbar .item .action-label {
-  padding: 0px;
-}
-
 .arduino-boards-dropdown-item--board-label {
   font-size: 14px;
 }
 
-.arduino-boards-dropdown-item .arduino-boards-dropdown-item--protocol {
-  margin-right: 10px;
-}
-
 .arduino-boards-dropdown-item--port-label {
   font-size: 12px;
 }
@@ -300,11 +267,25 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   color: var(--theia-arduino-toolbar-dropdown-iconSelected);
 }
 
+.arduino-boards-dropdown-item .fa-check {
+  align-self: center;
+}
+
 .arduino-board-dropdown-footer {
   color: var(--theia-secondaryButton-foreground);
   border-top: 1px solid var(--theia-dropdown-border);
 }
 
+/* High Contrast Theme rules */
+/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
+.hc-black.hc-theia.theia-hc #select-board-dialog .selectBoardContainer .list .item:hover {
+  outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc div#select-board-dialog .selectBoardContainer .list .item.selected {
+  outline: 1px solid var(--theia-focusBorder);
+}
+
 @media only screen and (max-height: 400px) {
   div.dialogContent.select-board-dialog > div.head {
     display: none;

arduino-ide-extension/src/browser/style/ide-updater-dialog.css

@@ -41,17 +41,6 @@
   overflow: auto;
   padding: 0 12px;
   cursor: text;
-  width: 100%;
-}
-
-.ide-updater-dialog .changelog .fallback {
-  min-height: 180px;
-  width: 100%;
-  display: flex;
-}
-
-.ide-updater-dialog .changelog .fallback .spinner {
-  align-self: center;
 }
 
 .dialogContent.ide-updater-dialog
@@ -115,10 +104,3 @@
   margin-left: 79px;
   margin-right: auto;
 }
-
-/* https://github.com/arduino/arduino-ide/pull/2027#issuecomment-1533174638 */
-/* https://github.com/eclipse-theia/theia/commit/1b5ff9ee459df14cedc0e8266dd02dae93fcd1bf#diff-d8d45a890507a01141c010ad4a6891edf2ae727cfa6dfe604cebbd667812cccbR68 */
-/* Use normal whitespace handling for the changelog content in the update dialog. */
-.p-Widget.dialogOverlay .dialogContent.ide-updater-dialog {
-  white-space: normal;
-}

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

@@ -54,6 +54,12 @@ body.theia-dark {
   background-color: var(--theia-warningBackground);
 }
 
+.hc-black.hc-theia.theia-hc .theia-input.warning,
+.hc-black.hc-theia.theia-hc .theia-input.warning::placeholder {
+  color: var(--theia-warningBackground);
+  background-color: var(--theia-warningForeground);
+}
+
 .theia-input.error:focus {
   outline-width: 1px;
   outline-style: solid;
@@ -164,6 +170,25 @@ button.theia-button.message-box-dialog-button {
   font-size: 14px;
 }
 
+/* High Contrast Theme rules */
+/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
+.hc-black.hc-theia.theia-hc button.theia-button:hover, 
+.hc-black.hc-theia.theia-hc .theia-button:hover {
+  outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc button.theia-button,
+.hc-black.hc-theia.theia-hc .theia-button,
+.hc-black.hc-theia.theia-hc button.theia-button.secondary {
+  border: 1px solid var(--theia-button-border);
+}
+
+.hc-black.hc-theia.theia-hc .theia-notification-list-item:hover:not(:focus) {
+  background-color: var(--theia-notifications-background);
+  outline: 1px dashed var(--theia-focusBorder);
+  outline-offset: -2px;
+}
+
 .debug-toolbar .debug-action>div {
   font-family: var(--theia-ui-font-family);
   font-size: var(--theia-ui-font-size0);

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

@@ -219,3 +219,15 @@ div.filterable-list-container > div > div > div > div:nth-child(1) > div.separat
     width: 65px;
     min-width: 65px;
 }
+
+/* High Contrast Theme rules */
+/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
+.hc-black.hc-theia.theia-hc .component-list-item .header .installed-version:hover:before {
+    background-color: transparent;
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .component-list-item .header .installed-version:before {
+    color: var(--theia-button-background);
+    border: 1px solid var(--theia-button-border);
+}

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

@@ -137,6 +137,24 @@
     color: var(--theia-titleBar-activeForeground);
 }
 
+.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+}
+
+.arduino-toggle-advanced-mode-icon {
+    mask: none;
+    -webkit-mask: none;
+    background: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--theia-titleBar-activeBackground);
+}
+
 .arduino-open-boards-control-icon {
     mask: none;
     -webkit-mask: none;
@@ -184,6 +202,61 @@
     background-color: var(--theia-terminal-background);
 }
 
+
+/* High Contrast Theme rules */
+/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
+.hc-black.hc-theia.theia-hc .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div {
+    background: var(--theia-arduino-toolbar-button-background);
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div.toggle-serial-plotter,
+.hc-black.hc-theia.theia-hc .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div.toggle-serial-monitor {
+    background: transparent;
+}
+
+.hc-black.hc-theia.theia-hc .item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar,
+.hc-black.hc-theia.theia-hc .item.arduino-tool-item.toggled .arduino-upload-sketch--toolbar {
+    background-color: var(--theia-arduino-toolbar-button-background) !important;
+    outline: 1px solid var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .arduino-boards-dropdown-item:hover {
+    background: var(--theia-dropdown-background);
+}
+
+.hc-black.hc-theia.theia-hc .arduino-boards-dropdown-item:hover {
+    outline: 1px dashed var(--theia-focusBorder);
+    outline-offset: -2px;
+}
+
+.hc-black.hc-theia.theia-hc #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
+    outline: 1px solid var(--theia-focusBorder);
+    outline-offset: -4px;
+}
+
+.hc-black.hc-theia.theia-hc #theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
+    outline: 1px dashed var(--theia-focusBorder);
+    outline-offset: -4px;
+}
+
+.hc-black.hc-theia.theia-hc .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:hover {
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .quick-input-list .monaco-list-row.focused {
+    outline: 1px dotted var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .quick-input-list .monaco-list-row:hover {
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .quick-input-widget {
+    outline: 1px solid var(--theia-contrastBorder);
+    outline-offset: -1px;
+}
+
 .monaco-hover .hover-row.markdown-hover:first-child p {
     margin-top: 8px;
 }

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

@@ -20,7 +20,7 @@
 
 .serial-monitor .head {
     display: flex;
-    padding: 0px 5px 5px 5px;
+    padding: 0px 5px 5px 0px;
     height: 27px;
     background-color: var(--theia-activityBar-background);
 }