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,41 +34,15 @@ 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:
           - os: windows-2019
             certificate-secret: WINDOWS_SIGNING_CERTIFICATE_PFX # Name of the secret that contains the certificate.
             certificate-password-secret: WINDOWS_SIGNING_CERTIFICATE_PASSWORD # Name of the secret that contains the certificate password.
-            certificate-extension: pfx # File extension for the certificate.
+            certificate-extension: pfx  # File extension for the certificate.
           - os: ubuntu-20.04
           - os: macos-latest
             # APPLE_SIGNING_CERTIFICATE_P12 secret was produced by following the procedure from:
@@ -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,
-    {
-      strip: 1,
-    }
-  ); // `strip`: the new clangd (12.x) is zipped into a folder, so we have to strip the outmost folder.
+  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.
 
   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,190 +1,156 @@
 // @ts-check
 
 (async () => {
-  const os = require('node:os');
-  const path = require('node:path');
-  const { exec } = require('./utils');
-  const glob = require('glob');
-  const { v4 } = require('uuid');
-  const shell = require('shelljs');
-  const protoc = path.dirname(require('protoc/protoc'));
 
-  const repository = path.join(os.tmpdir(), `${v4()}-arduino-cli`);
-  if (shell.mkdir('-p', repository).code !== 0) {
-    shell.exit(1);
-  }
+    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 { owner, repo, commitish } = (() => {
-    const pkg = require(path.join(__dirname, '..', 'package.json'));
-    if (!pkg) {
-      shell.echo(`Could not parse the 'package.json'.`);
-      shell.exit(1);
+    const repository = path.join(os.tmpdir(), `${v4()}-arduino-cli`);
+    if (shell.mkdir('-p', repository).code !== 0) {
+        shell.exit(1);
     }
 
-    const defaultVersion = {
-      owner: 'arduino',
-      repo: 'arduino-cli',
-      commitish: undefined,
-    };
-    const { arduino } = pkg;
-    if (!arduino) {
-      return defaultVersion;
+    const { owner, repo, commitish } = (() => {
+        const pkg = require(path.join(__dirname, '..', 'package.json'));
+        if (!pkg) {
+            shell.echo(`Could not parse the 'package.json'.`);
+            shell.exit(1);
+        }
+
+        const { arduino } = pkg;
+        if (!arduino) {
+            return { owner: 'arduino', repo: 'arduino-cli' };
+        }
+
+        const { cli } = arduino;
+        if (!cli) {
+            return { owner: 'arduino', repo: 'arduino-cli' };
+        }
+
+        const { version } = cli;
+        if (!version) {
+            return { owner: 'arduino', repo: 'arduino-cli' };
+        }
+
+        if (typeof version === 'string') {
+            return { owner: 'arduino', repo: 'arduino-cli' };
+        }
+
+        // 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);
+        }
+
+        return { owner, repo, commitish };
+    })();
+
+    const url = `https://github.com/${owner}/${repo}.git`;
+    shell.echo(`>>> Cloning repository from '${url}'...`);
+    if (shell.exec(`git clone ${url} ${repository}`).code !== 0) {
+        shell.exit(1);
+    }
+    shell.echo(`<<< Repository cloned.`);
+
+    const { platform } = process;
+    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);
+    }
+    // As of today (28.01.2021), the `VersionString` can be one of the followings:
+    //  - `nightly-YYYYMMDD` stands for the nightly build, we use the , the `commitish` from the `package.json` to check out the code.
+    //  - `0.0.0-git` for local builds, we use the `commitish` from the `package.json` to check out the code and generate the APIs.
+    //  - `git-snapshot` for local build executed via `task build`. We do not do this.
+    //  - rest, we assume it is a valid semver and has the corresponding tagged code, we use the tag to generate the APIs from the `proto` files.
+    /*
+    {
+      "Application": "arduino-cli",
+      "VersionString": "nightly-20210126",
+      "Commit": "079bb6c6",
+      "Status": "alpha",
+      "Date": "2021-01-26T01:46:31Z"
+    }
+    */
+    const versionObject = JSON.parse(versionJson);
+    const version = versionObject.VersionString;
+    if (version && !version.startsWith('nightly-') && version !== '0.0.0-git' && version !== 'git-snapshot') {
+        shell.echo(`>>> Checking 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}'...`);
+        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}'...`);
+        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.`);
     }
 
-    const cli = arduino['arduino-cli'];
-    if (!cli) {
-      return defaultVersion;
+    shell.echo('>>> Generating TS/JS API from:');
+    if (shell.exec(`git -C ${repository} rev-parse --abbrev-ref HEAD`).code !== 0) {
+        shell.exit(1);
     }
 
-    const { version } = cli;
-    if (!version) {
-      return defaultVersion;
+    const rpc = path.join(repository, 'rpc');
+    const out = path.join(__dirname, '..', 'src', 'node', 'cli-protocol');
+    shell.mkdir('-p', out);
+
+    const protos = await new Promise(resolve =>
+        glob('**/*.proto', { cwd: rpc }, (error, matches) => {
+            if (error) {
+                shell.echo(error.stack);
+                resolve([]);
+                return;
+            }
+            resolve(matches.map(filename => path.join(rpc, filename)));
+        }));
+    if (!protos || protos.length === 0) {
+        shell.echo(`Could not find any .proto files under ${rpc}.`);
+        shell.exit(1);
     }
 
-    if (typeof version === 'string') {
-      return defaultVersion;
+    // Generate JS code from the `.proto` files.
+    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);
     }
 
-    // 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);
+    // Generate the `.d.ts` files for JS.
+    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);
     }
 
-    return { owner, repo, commitish };
-  })();
+    shell.echo('<<< Generation was successful.');
 
-  const url = `https://github.com/${owner}/${repo}.git`;
-  shell.echo(`>>> Cloning repository from '${url}'...`);
-  exec('git', ['clone', url, repository], shell);
-  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();
-  if (!versionJson) {
-    shell.echo(`Could not retrieve the CLI version from ${cli}.`);
-    shell.exit(1);
-  }
-  // As of today (28.01.2021), the `VersionString` can be one of the followings:
-  //  - `nightly-YYYYMMDD` stands for the nightly build, we use the , the `commitish` from the `package.json` to check out the code.
-  //  - `0.0.0-git` for local builds, we use the `commitish` from the `package.json` to check out the code and generate the APIs.
-  //  - `git-snapshot` for local build executed via `task build`. We do not do this.
-  //  - rest, we assume it is a valid semver and has the corresponding tagged code, we use the tag to generate the APIs from the `proto` files.
-  /*
-      {
-        "Application": "arduino-cli",
-        "VersionString": "nightly-20210126",
-        "Commit": "079bb6c6",
-        "Status": "alpha",
-        "Date": "2021-01-26T01:46:31Z"
-      }
-      */
-  const versionObject = JSON.parse(versionJson);
-  const version = versionObject.VersionString;
-  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}'.`);
-  } 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}'.`
-    );
-  } 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}'.`
-    );
-  } 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);
-
-  const rpc = path.join(repository, 'rpc');
-  const out = path.join(__dirname, '..', 'src', 'node', 'cli-protocol');
-  shell.mkdir('-p', out);
-
-  const protos = await new Promise((resolve) =>
-    glob('**/*.proto', { cwd: rpc }, (error, matches) => {
-      if (error) {
-        shell.echo(error.stack ?? error.message);
-        resolve([]);
-        return;
-      }
-      resolve(matches.map((filename) => path.join(rpc, filename)));
-    })
-  );
-  if (!protos || protos.length === 0) {
-    shell.echo(`Could not find any .proto files under ${rpc}.`);
-    shell.exit(1);
-  }
-
-  // Generate JS code from the `.proto` files.
-
-  exec(
-    'grpc_tools_node_protoc',
-    [
-      `--js_out=import_style=commonjs,binary:${out}`,
-      `--grpc_out=generate_package_definition:${out}`,
-      '-I',
-      rpc,
-      ...protos,
-    ],
-    shell
-  );
-
-  // 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
-  );
-
-  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,254 +40,225 @@ 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 = {
-  'arduino.language.log': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/language.log',
-      "True if the Arduino Language Server should generate log files into the sketch folder. Otherwise, false. It's false by default."
-    ),
-    default: false,
-  },
-  'arduino.language.realTimeDiagnostics': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/language.realTimeDiagnostics',
-      "If true, the language server provides real-time diagnostics when typing in the editor. It's false by default."
-    ),
-    default: false,
-  },
-  'arduino.compile.verbose': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/compile.verbose',
-      'True for verbose compile output. False by default'
-    ),
-    default: false,
-  },
-  'arduino.compile.experimental': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/compile.experimental',
-      'True if the IDE should handle multiple compiler errors. False by default'
-    ),
-    default: false,
-  },
-  'arduino.compile.revealRange': {
-    enum: [...ErrorRevealStrategyLiterals],
-    description: nls.localize(
-      'arduino/preferences/compile.revealRange',
-      "Adjusts how compiler errors are revealed in the editor after a failed verify/upload. Possible values: 'auto': Scroll vertically as necessary and reveal a line. 'center': Scroll vertically as necessary and reveal a line centered vertically. 'top': Scroll vertically as necessary and reveal a line close to the top of the viewport, optimized for viewing a code definition. 'centerIfOutsideViewport': Scroll vertically as necessary and reveal a line centered vertically only if it lies outside the viewport. The default value is '{0}'.",
-      ErrorRevealStrategy.Default
-    ),
-    default: ErrorRevealStrategy.Default,
-  },
-  'arduino.compile.warnings': {
-    enum: [...CompilerWarningLiterals],
-    description: nls.localize(
-      'arduino/preferences/compile.warnings',
-      "Tells gcc which warning level to use. It's 'None' by default"
-    ),
-    default: 'None',
-  },
-  'arduino.upload.verbose': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/upload.verbose',
-      'True for verbose upload output. False by default.'
-    ),
-    default: false,
-  },
-  'arduino.upload.verify': {
-    type: 'boolean',
-    default: false,
-  },
-  'arduino.window.autoScale': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/window.autoScale',
-      'True if the user interface automatically scales with the font size.'
-    ),
-    default: true,
-  },
-  'arduino.window.zoomLevel': {
-    type: 'number',
-    description: '',
-    default: 0,
-    deprecationMessage: nls.localize(
-      'arduino/preferences/window.zoomLevel/deprecationMessage',
-      "Deprecated. Use 'window.zoomLevel' instead."
-    ),
-  },
-  'arduino.ide.updateChannel': {
-    type: 'string',
-    enum: Object.values(UpdateChannel) as UpdateChannel[],
-    default: UpdateChannel.Stable,
-    description: nls.localize(
-      'arduino/preferences/ide.updateChannel',
-      "Release channel to get updated from. 'stable' is the stable release, 'nightly' is the latest development build."
-    ),
-  },
-  'arduino.ide.updateBaseUrl': {
-    type: 'string',
-    default: 'https://downloads.arduino.cc/arduino-ide',
-    description: nls.localize(
-      'arduino/preferences/ide.updateBaseUrl',
-      "The base URL where to download updates from. Defaults to 'https://downloads.arduino.cc/arduino-ide'"
-    ),
-  },
-  'arduino.board.certificates': {
-    type: 'string',
-    description: nls.localize(
-      'arduino/preferences/board.certificates',
-      'List of certificates that can be uploaded to boards'
-    ),
-    default: '',
-  },
-  'arduino.sketchbook.showAllFiles': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/sketchbook.showAllFiles',
-      'True to show all sketch files inside the sketch. It is false by default.'
-    ),
-    default: false,
-  },
-  'arduino.cloud.enabled': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/cloud.enabled',
-      'True if the sketch sync functions are enabled. Defaults to true.'
-    ),
-    default: true,
-  },
-  'arduino.cloud.pull.warn': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/cloud.pull.warn',
-      'True if users should be warned before pulling a cloud sketch. Defaults to true.'
-    ),
-    default: true,
-  },
-  'arduino.cloud.push.warn': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/cloud.push.warn',
-      'True if users should be warned before pushing a cloud sketch. Defaults to true.'
-    ),
-    default: true,
-  },
-  'arduino.cloud.pushpublic.warn': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/cloud.pushpublic.warn',
-      'True if users should be warned before pushing a public sketch to the cloud. Defaults to true.'
-    ),
-    default: true,
-  },
-  'arduino.cloud.sketchSyncEndpoint': {
-    type: 'string',
-    description: nls.localize(
-      'arduino/preferences/cloud.sketchSyncEndpoint',
-      'The endpoint used to push and pull sketches from a backend. By default it points to Arduino Cloud API.'
-    ),
-    default: 'https://api2.arduino.cc/create',
-  },
-  'arduino.auth.clientID': {
-    type: 'string',
-    description: nls.localize(
-      'arduino/preferences/auth.clientID',
-      'The OAuth2 client ID.'
-    ),
-    default: 'C34Ya6ex77jTNxyKWj01lCe1vAHIaPIo',
-  },
-  'arduino.auth.domain': {
-    type: 'string',
-    description: nls.localize(
-      'arduino/preferences/auth.domain',
-      'The OAuth2 domain.'
-    ),
-    default: 'login.arduino.cc',
-  },
-  'arduino.auth.audience': {
-    type: 'string',
-    description: nls.localize(
-      'arduino/preferences/auth.audience',
-      'The OAuth2 audience.'
-    ),
-    default: 'https://api.arduino.cc',
-  },
-  'arduino.auth.registerUri': {
-    type: 'string',
-    description: nls.localize(
-      'arduino/preferences/auth.registerUri',
-      'The URI used to register a new user.'
-    ),
-    default: 'https://auth.arduino.cc/login#/register',
-  },
-  'arduino.survey.notification': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/survey.notification',
-      'True if users should be notified if a survey is available. True by default.'
-    ),
-    default: true,
-  },
-  'arduino.cli.daemon.debug': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/cli.daemonDebug',
-      "Enable debug logging of the gRPC calls to the Arduino CLI. A restart of the IDE is needed for this setting to take effect. It's false by default."
-    ),
-    default: false,
-  },
-  'arduino.checkForUpdates': {
-    type: 'boolean',
-    description: nls.localize(
-      'arduino/preferences/checkForUpdate',
-      "Receive notifications of available updates for the IDE, boards, and libraries. Requires an IDE restart after change. It's true by default."
-    ),
-    default: true,
-  },
-  'arduino.sketch.inoBlueprint': {
-    type: 'string',
-    markdownDescription: nls.localize(
-      'arduino/preferences/sketch/inoBlueprint',
-      'Absolute filesystem path to the default `.ino` blueprint file. If specified, the content of the blueprint file will be used for every new sketch created by the IDE. The sketches will be generated with the default Arduino content if not specified. Unaccessible blueprint files are ignored. **A restart of the IDE is needed** for this setting to take effect.'
-    ),
-    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,
+  properties: {
+    'arduino.language.log': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/language.log',
+        "True if the Arduino Language Server should generate log files into the sketch folder. Otherwise, false. It's false by default."
+      ),
+      default: false,
+    },
+    'arduino.language.realTimeDiagnostics': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/language.realTimeDiagnostics',
+        "If true, the language server provides real-time diagnostics when typing in the editor. It's false by default."
+      ),
+      default: false,
+    },
+    'arduino.compile.verbose': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/compile.verbose',
+        'True for verbose compile output. False by default'
+      ),
+      default: false,
+    },
+    'arduino.compile.experimental': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/compile.experimental',
+        'True if the IDE should handle multiple compiler errors. False by default'
+      ),
+      default: false,
+    },
+    'arduino.compile.revealRange': {
+      enum: [...ErrorRevealStrategyLiterals],
+      description: nls.localize(
+        'arduino/preferences/compile.revealRange',
+        "Adjusts how compiler errors are revealed in the editor after a failed verify/upload. Possible values: 'auto': Scroll vertically as necessary and reveal a line. 'center': Scroll vertically as necessary and reveal a line centered vertically. 'top': Scroll vertically as necessary and reveal a line close to the top of the viewport, optimized for viewing a code definition. 'centerIfOutsideViewport': Scroll vertically as necessary and reveal a line centered vertically only if it lies outside the viewport. The default value is '{0}'.",
+        ErrorRevealStrategy.Default
+      ),
+      default: ErrorRevealStrategy.Default,
+    },
+    'arduino.compile.warnings': {
+      enum: [...CompilerWarningLiterals],
+      description: nls.localize(
+        'arduino/preferences/compile.warnings',
+        "Tells gcc which warning level to use. It's 'None' by default"
+      ),
+      default: 'None',
+    },
+    'arduino.upload.verbose': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/upload.verbose',
+        'True for verbose upload output. False by default.'
+      ),
+      default: false,
+    },
+    'arduino.upload.verify': {
+      type: 'boolean',
+      default: false,
+    },
+    'arduino.window.autoScale': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/window.autoScale',
+        'True if the user interface automatically scales with the font size.'
+      ),
+      default: true,
+    },
+    'arduino.window.zoomLevel': {
+      type: 'number',
+      description: '',
+      default: 0,
+      deprecationMessage: nls.localize(
+        'arduino/preferences/window.zoomLevel/deprecationMessage',
+        "Deprecated. Use 'window.zoomLevel' instead."
+      ),
+    },
+    'arduino.ide.updateChannel': {
+      type: 'string',
+      enum: Object.values(UpdateChannel) as UpdateChannel[],
+      default: UpdateChannel.Stable,
+      description: nls.localize(
+        'arduino/preferences/ide.updateChannel',
+        "Release channel to get updated from. 'stable' is the stable release, 'nightly' is the latest development build."
+      ),
+    },
+    'arduino.ide.updateBaseUrl': {
+      type: 'string',
+      default: 'https://downloads.arduino.cc/arduino-ide',
+      description: nls.localize(
+        'arduino/preferences/ide.updateBaseUrl',
+        "The base URL where to download updates from. Defaults to 'https://downloads.arduino.cc/arduino-ide'"
+      ),
+    },
+    'arduino.board.certificates': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/board.certificates',
+        'List of certificates that can be uploaded to boards'
+      ),
+      default: '',
+    },
+    'arduino.sketchbook.showAllFiles': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/sketchbook.showAllFiles',
+        'True to show all sketch files inside the sketch. It is false by default.'
+      ),
+      default: false,
+    },
+    'arduino.cloud.enabled': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cloud.enabled',
+        'True if the sketch sync functions are enabled. Defaults to true.'
+      ),
+      default: true,
+    },
+    'arduino.cloud.pull.warn': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cloud.pull.warn',
+        'True if users should be warned before pulling a cloud sketch. Defaults to true.'
+      ),
+      default: true,
+    },
+    'arduino.cloud.push.warn': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cloud.push.warn',
+        'True if users should be warned before pushing a cloud sketch. Defaults to true.'
+      ),
+      default: true,
+    },
+    'arduino.cloud.pushpublic.warn': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cloud.pushpublic.warn',
+        'True if users should be warned before pushing a public sketch to the cloud. Defaults to true.'
+      ),
+      default: true,
+    },
+    'arduino.cloud.sketchSyncEndpoint': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/cloud.sketchSyncEndpoint',
+        'The endpoint used to push and pull sketches from a backend. By default it points to Arduino Cloud API.'
+      ),
+      default: 'https://api2.arduino.cc/create',
+    },
+    'arduino.auth.clientID': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/auth.clientID',
+        'The OAuth2 client ID.'
+      ),
+      default: 'C34Ya6ex77jTNxyKWj01lCe1vAHIaPIo',
+    },
+    'arduino.auth.domain': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/auth.domain',
+        'The OAuth2 domain.'
+      ),
+      default: 'login.arduino.cc',
+    },
+    'arduino.auth.audience': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/auth.audience',
+        'The OAuth2 audience.'
+      ),
+      default: 'https://api.arduino.cc',
+    },
+    'arduino.auth.registerUri': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/auth.registerUri',
+        'The URI used to register a new user.'
+      ),
+      default: 'https://auth.arduino.cc/login#/register',
+    },
+    'arduino.survey.notification': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/survey.notification',
+        'True if users should be notified if a survey is available. True by default.'
+      ),
+      default: true,
+    },
+    'arduino.cli.daemon.debug': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cli.daemonDebug',
+        "Enable debug logging of the gRPC calls to the Arduino CLI. A restart of the IDE is needed for this setting to take effect. It's false by default."
+      ),
+      default: false,
+    },
+    'arduino.checkForUpdates': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/checkForUpdate',
+        "Receive notifications of available updates for the IDE, boards, and libraries. Requires an IDE restart after change. It's true by default."
+      ),
+      default: true,
+    },
+    'arduino.sketch.inoBlueprint': {
+      type: 'string',
+      markdownDescription: nls.localize(
+        'arduino/preferences/sketch/inoBlueprint',
+        'Absolute filesystem path to the default `.ino` blueprint file. If specified, the content of the blueprint file will be used for every new sketch created by the IDE. The sketches will be generated with the default Arduino content if not specified. Unaccessible blueprint files are ignored. **A restart of the IDE is needed** for this setting to take effect.'
+      ),
+      default: undefined,
+    },
+  },
 };
 
 export interface ArduinoConfiguration {
@@ -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,229 +1,281 @@
-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;
-      }
-    } 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;
-        }
-        if (
-          platform.boards.some((board) => board.name === selectedBoard.name)
-        ) {
-          const platformId = createPlatformIdentifier(platform.id);
-          if (platformId) {
-            return platformId;
-          }
-        }
-      }
-    }
-    return undefined;
+  private clearLastRefusedPromptInfo(): void {
+    this.lastRefusedPackageId = undefined;
+    this.portSelectedOnLastRefusal = 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
+  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)
       )
-    ) {
-      // Already has a notification for the board with the same platform. Nothing to do.
+    );
+  }
+
+  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 {
+        this.removeNotificationByBoard(selectedBoard);
+      }
+    });
+  }
+
+  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;
     }
-    this.clearAllNotificationForPlatform(platformIdToInstall);
 
+    // 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
+
+    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);
+  }
+
+  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) {
-      const index = this.installNotificationInfos.findIndex(
-        ({ boardName, platformId }) =>
-          platformIdToInstall === platformId && selectedBoardName === boardName
-      );
-      if (index !== -1) {
-        this.installNotificationInfos.splice(index, 1);
-      }
-      if (answer === yes) {
-        await Installable.installWithProgress({
-          installable: this.boardsService,
-          item: candidate,
-          messageService: this.messageService,
-          responseService: this.responseService,
-          version: candidate.availableVersions[0],
-        });
-        return;
-      }
-      if (answer === InstallManually) {
-        this.boardsManagerWidgetContribution
-          .openView({ reveal: true })
-          .then((widget) =>
-            widget.refresh({
-              query: candidate.name.toLocaleLowerCase(),
-              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 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({
+                query: candidate.name.toLocaleLowerCase(),
+                type: 'All',
+              })
+            );
+        },
+      },
+      {
+        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 notificationId(message: string, ...actions: string[]): string {
-    return this.notificationManager['getMessageId']({
-      text: message,
-      actions,
-      type: MessageType.Info,
-    });
+  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,64 +1,63 @@
-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
-          .map(({ fqbn }) => fqbn)
-          .filter(notEmpty)
-          .filter((fqbn) => !!fqbn)) {
-          const key = this.getStorageKey(fqbn);
-          let data = await this.storageService.getData<ConfigOption[]>(key);
-          if (!data || !data.length) {
-            const details = await this.getBoardDetailsSafe(fqbn);
-            if (details) {
-              data = details.configOptions;
-              if (data.length) {
-                await this.storageService.setData(key, data);
-                dataDidChangePerFqbn.push(fqbn);
-              }
+    this.notificationCenter.onPlatformDidInstall(async ({ item }) => {
+      const dataDidChangePerFqbn: string[] = [];
+      for (const fqbn of item.boards
+        .map(({ fqbn }) => fqbn)
+        .filter(notEmpty)
+        .filter((fqbn) => !!fqbn)) {
+        const key = this.getStorageKey(fqbn);
+        let data = await this.storageService.getData<
+          ConfigOption[] | undefined
+        >(key);
+        if (!data || !data.length) {
+          const details = await this.getBoardDetailsSafe(fqbn);
+          if (details) {
+            data = details.configOptions;
+            if (data.length) {
+              await this.storageService.setData(key, data);
+              dataDidChangePerFqbn.push(fqbn);
             }
           }
         }
-        if (dataDidChangePerFqbn.length) {
-          this.fireChanged(...dataDidChangePerFqbn);
-        }
-      })
-    );
-  }
-
-  onStop(): void {
-    this.toDispose.dispose();
+      }
+      if (dataDidChangePerFqbn.length) {
+        this.fireChanged(...dataDidChangePerFqbn);
+      }
+    });
   }
 
   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({
-    fqbn,
-    selectedProgrammer,
-  }: {
-    fqbn: string;
-    selectedProgrammer: Programmer;
-  }): Promise<boolean> {
+  async selectProgrammer(
+    {
+      fqbn,
+      selectedProgrammer,
+    }: { 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({
-    fqbn,
-    option,
-    selectedValue,
-  }: {
-    fqbn: string;
-    option: string;
-    selectedValue: string;
-  }): Promise<boolean> {
+  async selectConfigOption(
+    {
+      fqbn,
+      option,
+      selectedValue,
+    }: { 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);
-    }
-  };
-
-  private renderBoardListItem({
-    item,
+  protected renderItem({
+    boardLabel,
+    port,
     selected,
+    onClick,
   }: {
-    item: BoardListItemUI;
-    selected: boolean;
+    boardLabel: string;
+    port: Port;
+    selected?: boolean;
+    onClick: () => void;
   }): React.ReactNode {
-    const { boardLabel, portLabel, portProtocol, tooltip } = item.labels;
-    const port = item.port;
+    const protocolIcon = iconNameFromProtocol(port.protocol);
     const onKeyUp = (e: React.KeyboardEvent) => {
       if (e.key === 'Enter') {
-        this.onDefaultAction(item);
+        onClick();
       }
     };
+
     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--board-label noWrapInfo noselect">
-              {boardLabel}
-            </div>
+        <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 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,27 +60,34 @@ 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({
-      message: `${this.applicationName}`,
-      title: `${this.applicationName}`,
-      type: 'info',
-      detail: detail(true),
-      buttons,
-      noLink: true,
-      defaultId: buttons.indexOf(ok),
-      cancelId: buttons.indexOf(ok),
-    });
+    const { response } = await remote.dialog.showMessageBox(
+      remote.getCurrentWindow(),
+      {
+        message: `${this.applicationName}`,
+        title: `${this.applicationName}`,
+        type: 'info',
+        detail: detail(true),
+        buttons,
+        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,20 +42,23 @@ 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({
-      title: nls.localize(
-        'arduino/selectZip',
-        "Select a zip file containing the library you'd like to add"
-      ),
-      defaultPath,
-      properties: ['openFile'],
-      filters: [
-        {
-          name: nls.localize('arduino/library/zipLibrary', 'Library'),
-          extensions: ['zip'],
-        },
-      ],
-    });
+    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"
+        ),
+        defaultPath,
+        properties: ['openFile'],
+        filters: [
+          {
+            name: nls.localize('arduino/library/zipLibrary', 'Library'),
+            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({
-      title: nls.localize(
-        'arduino/sketch/saveSketchAs',
-        'Save sketch folder as...'
-      ),
-      defaultPath,
-    });
+    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,116 +172,69 @@ 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 =
-                packageName +
-                `${
-                  manuallyInstalled
-                    ? 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,
-                {
-                  order: packageName.toLowerCase(),
-                }
-              );
-            }
+    installedBoards.forEach((board, index) => {
+      const { packageId, packageName, fqbn, name, manuallyInstalled } = board;
 
-            const id = `arduino-select-board--${fqbn}`;
-            const command = { id };
-            const handler = {
-              execute: () =>
-                this.boardsServiceProvider.updateConfig({
-                  name: name,
-                  fqbn: fqbn,
-                }),
-              isToggled: () => fqbn === selectedBoard?.fqbn,
+      const packageLabel =
+        packageName +
+        `${
+          manuallyInstalled
+            ? nls.localize('arduino/board/inSketchbook', ' (in Sketchbook)')
+            : ''
+        }`;
+      // Platform submenu
+      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: () => {
+          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
-            const menuAction = {
-              commandId: id,
-              label: name,
-              order: String(index).padStart(4), // pads with leading zeros for alphanumeric sort where order is 1, 2, 11, and NOT 1, 11, 2
-            };
-            this.commandRegistry.registerCommand(command, handler);
-            this.toDisposeBeforeMenuRebuild.push(
-              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.
-          });
-        });
-      }
-    );
+      // Board menu
+      const menuAction = {
+        commandId: id,
+        label: name,
+        order: String(index).padStart(4), // pads with leading zeros for alphanumeric sort where order is 1, 2, 11, and NOT 1, 11, 2
+      };
+      this.commandRegistry.registerCommand(command, handler);
+      this.toDisposeBeforeMenuRebuild.push(
+        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,23 +150,26 @@ export class Close extends SketchContribution {
   }
 
   private async prompt(isTemp: boolean): Promise<Prompt> {
-    const { response } = await this.dialogService.showMessageBox({
-      message: nls.localize(
-        'arduino/sketch/saveSketch',
-        'Save your sketch to open it again later.'
-      ),
-      title: nls.localize(
-        'theia/core/quitTitle',
-        'Are you sure you want to quit?'
-      ),
-      type: 'question',
-      buttons: [
-        nls.localizeByDefault("Don't Save"),
-        Dialog.CANCEL,
-        nls.localizeByDefault(isTemp ? 'Save As...' : 'Save'),
-      ],
-      defaultId: 2, // `Save`/`Save As...` button index is the default.
-    });
+    const { response } = await remote.dialog.showMessageBox(
+      remote.getCurrentWindow(),
+      {
+        message: nls.localize(
+          'arduino/sketch/saveSketch',
+          'Save your sketch to open it again later.'
+        ),
+        title: nls.localize(
+          'theia/core/quitTitle',
+          'Are you sure you want to quit?'
+        ),
+        type: 'question',
+        buttons: [
+          nls.localizeByDefault("Don't Save"),
+          Dialog.CANCEL,
+          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,16 +83,19 @@ export class OpenSketch extends SketchContribution {
 
   private async selectSketch(): Promise<Sketch | undefined> {
     const defaultPath = await this.defaultPath();
-    const { filePaths } = await this.dialogService.showOpenDialog({
-      defaultPath,
-      properties: ['createDirectory', 'openFile'],
-      filters: [
-        {
-          name: nls.localize('arduino/sketch/sketch', 'Sketch'),
-          extensions: ['ino', 'pde'],
-        },
-      ],
-    });
+    const { filePaths } = await remote.dialog.showOpenDialog(
+      remote.getCurrentWindow(),
+      {
+        defaultPath,
+        properties: ['createDirectory', 'openFile'],
+        filters: [
+          {
+            name: nls.localize('arduino/sketch/sketch', 'Sketch'),
+            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({
-        title: nls.localize(
-          'arduino/sketch/saveFolderAs',
-          'Save sketch folder as...'
-        ),
-        defaultPath,
-      });
+      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({
-          message,
-          buttons: [Dialog.CANCEL, Dialog.YES],
-        });
+        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(
-          '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,
+        text: selectedPort
+          ? nls.localize(
+              'arduino/common/selectedOn',
+              'on {0}',
+              selectedPort.address
+            )
+          : 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({
-      title,
-      message,
-      type: 'warning',
-      buttons,
-    });
+    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, {
-        method: 'GET',
-        headers,
-      });
-      allSketches.push(...sketches);
-      if (sketches.length < limit) {
-        break;
+      partialSketches = (
+        await this.run<{ sketches: Create.Sketch[] }>(url, {
+          method: 'GET',
+          headers,
+        })
+      ).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,25 +95,20 @@ 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 && shell.openExternal(href)}
+                      {...props}
+                    >
+                      {children}
+                    </a>
+                  ),
+                }}
               >
-                <ReactMarkdown
-                  components={{
-                    a: ({ href, children, ...props }) => (
-                      <a onClick={() => href && openExternal(href)} {...props}>
-                        {children}
-                      </a>
-                    ),
-                  }}
-                >
-                  {changelog}
-                </ReactMarkdown>
-              </React.Suspense>
+                {changelog}
+              </ReactMarkdown>
             </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';
 
-  @inject(MonitorModel)
-  private readonly model: MonitorModel;
-  @inject(MonitorManagerProxyClient)
-  private readonly monitorManagerProxy: MonitorManagerProxyClient;
-  @inject(ArduinoPreferences)
-  private readonly arduinoPreferences: ArduinoPreferences;
+  constructor(
+    @inject(MonitorModel)
+    protected readonly model: MonitorModel,
 
-  private _panel: ApplicationShell.Area;
-
-  constructor() {
+    @inject(MonitorManagerProxyClient)
+    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

@@ -172,19 +172,20 @@ div#select-board-dialog .selectBoardContainer .list .item.selected i {
   width: 210px;
 }
 
-.arduino-boards-toolbar-item--protocol,
+.arduino-boards-toolbar-item--protocol, 
 .arduino-boards-dropdown-item--protocol {
   align-items: center;
   display: flex;
   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);
 }