ignore workspace root check in changelog workflow (#960)

* Allow to close files in certain folders

* Only direct children are sketch files

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,72 @@
+name: Bug report
+description: Report a problem with the code or documentation in this repository.
+labels:
+  - "type: imperfection"
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the problem
+    validations:
+      required: true
+  - type: textarea
+    id: reproduce
+    attributes:
+      label: To reproduce
+      description: Provide the specific set of steps we can follow to reproduce the problem.
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      description: What would you expect to happen after following those instructions?
+    validations:
+      required: true
+  - type: input
+    id: project-version
+    attributes:
+      label: Arduino IDE version
+      description: |
+        Which version of the Arduino IDE are you using?
+        See **Help > About Arduino IDE** in the Arduino IDE menus (**Arduino IDE > About Arduino IDE** on macOS).
+        This should be the latest [nightly build](https://github.com/arduino/arduino-ide#nightly-builds).
+    validations:
+      required: true
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating system
+      description: Which operating system are you using on your computer?
+      options:
+        - Windows
+        - Linux
+        - macOS
+    validations:
+      required: true
+  - type: input
+    id: os-version
+    attributes:
+      label: Operating system version
+      description: Which version of the operating system are you using on your computer?
+    validations:
+      required: true
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any additional information here.
+    validations:
+      required: false
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Issue checklist
+      description: Please double-check that you have done each of the following things before submitting the issue.
+      options:
+        - label: I searched for previous reports in [the issue tracker](https://github.com/arduino/arduino-ide/issues?q=)
+          required: true
+        - label: I verified the problem still occurs when using the latest [nightly build](https://github.com/arduino/arduino-ide#nightly-builds)
+          required: true
+        - label: My report contains all necessary details
+          required: true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,32 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: 'type: imperfection'
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. Windows]
- - Version: [e.g. 2.0.0]
-
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,13 @@
+# Source:
+# https://github.com/arduino/tooling-project-assets/blob/main/issue-templates/template-choosers/general/config.yml
+blank_issues_enabled: false
+contact_links:
+  - name: Learn about using this project
+    url: https://github.com/arduino/arduino-ide#readme
+    about: Detailed usage documentation is available here.
+  - name: Support request
+    url: https://forum.arduino.cc/
+    about: We can help you out on the Arduino Forum!
+  - name: Discuss development work on the project
+    url: https://groups.google.com/a/arduino.cc/g/developers
+    about: Arduino Developers Mailing List

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,67 @@
+name: Feature request
+description: Suggest an enhancement to this project.
+labels:
+  - "type: enhancement"
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the request
+    validations:
+      required: true
+  - type: textarea
+    id: current
+    attributes:
+      label: Describe the current behavior
+      description: |
+        What is the current behavior of the Arduino IDE in relation to your request?
+        How can we reproduce that behavior?
+    validations:
+      required: true
+  - type: input
+    id: project-version
+    attributes:
+      label: Arduino IDE version
+      description: |
+        Which version of the Arduino IDE are you using?
+        See **Help > About Arduino IDE** in the Arduino IDE menus (**Arduino IDE > About Arduino IDE** on macOS).
+        This should be the latest [nightly build](https://github.com/arduino/arduino-ide#nightly-builds).
+    validations:
+      required: true
+  - type: dropdown
+    id: os
+    attributes:
+      label: Operating system
+      description: Which operating system are you using on your computer?
+      options:
+        - Windows
+        - Linux
+        - macOS
+    validations:
+      required: true
+  - type: input
+    id: os-version
+    attributes:
+      label: Operating system version
+      description: Which version of the operating system are you using on your computer?
+    validations:
+      required: true
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any additional information here.
+    validations:
+      required: false
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Issue checklist
+      description: Please double-check that you have done each of the following things before submitting the issue.
+      options:
+        - label: I searched for previous requests in [the issue tracker](https://github.com/arduino/arduino-ide/issues?q=)
+          required: true
+        - label: I verified the feature was still missing when using the latest [nightly build](https://github.com/arduino/arduino-ide#nightly-builds)
+          required: true
+        - label: My request contains all necessary details
+          required: true

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: 'type: enhancement'
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,15 @@
+### Motivation
+<!-- Why this pull request? -->
+
+### Change description
+<!-- What does your code do? -->
+
+### Other information
+<!-- Any additional information that could help the review process -->
+
+### Reviewer checklist
+
+* [ ] PR addresses a single concern.
+* [ ] The PR has no duplicates (please search among the [Pull Requests](https://github.com/arduino/arduino-ide/pulls) before creating one)
+* [ ] PR title and description are properly filled.
+* [ ] Docs have been added / updated (for bug fixes / features)

.github/workflows/build.yml

@@ -15,15 +15,15 @@ on:
 
 env:
   JOB_TRANSFER_ARTIFACT: build-artifacts
+  CHANGELOG_ARTIFACTS: changelog
 
 jobs:
-
   build:
     if: github.repository == 'arduino/arduino-ide'
     strategy:
       matrix:
         config:
-          - os: windows-latest
+          - os: windows-2019
           - os: ubuntu-18.04 # https://github.com/arduino/arduino-ide/issues/259
           - os: macos-latest
     runs-on: ${{ matrix.config.os }}
@@ -33,16 +33,16 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Install Node.js 12.x
+      - name: Install Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: '12.14.1'
+          node-version: '14.x'
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Install Python 2.7
+      - name: Install Python 3.x
         uses: actions/setup-python@v2
         with:
-          python-version: '2.7'
+          python-version: '3.x'
 
       - name: Package
         shell: bash
@@ -50,35 +50,36 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           AC_USERNAME: ${{ secrets.AC_USERNAME }}
           AC_PASSWORD: ${{ secrets.AC_PASSWORD }}
+          AC_TEAM_ID: ${{ secrets.AC_TEAM_ID }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           IS_NIGHTLY: ${{ github.event_name == 'schedule' || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main') }}
           IS_RELEASE: ${{ startsWith(github.ref, 'refs/tags/') }}
           IS_FORK: ${{ github.event.pull_request.head.repo.fork == true }}
         run: |
-            # See: https://www.electron.build/code-signing
-            if [ $IS_FORK = true ]; then
-              echo "Skipping the app signing: building from a fork."
-            else
-              if [ "${{ runner.OS }}" = "macOS" ]; then
-                export CSC_LINK="${{ runner.temp }}/signing_certificate.p12"
-                # APPLE_SIGNING_CERTIFICATE_P12 secret was produced by following the procedure from:
-                # https://www.kencochrane.com/2020/08/01/build-and-sign-golang-binaries-for-macos-with-github-actions/#exporting-the-developer-certificate
-                echo "${{ secrets.APPLE_SIGNING_CERTIFICATE_P12 }}" | base64 --decode > "$CSC_LINK"
+          # See: https://www.electron.build/code-signing
+          if [ $IS_FORK = true ]; then
+            echo "Skipping the app signing: building from a fork."
+          else
+            if [ "${{ runner.OS }}" = "macOS" ]; then
+              export CSC_LINK="${{ runner.temp }}/signing_certificate.p12"
+              # APPLE_SIGNING_CERTIFICATE_P12 secret was produced by following the procedure from:
+              # https://www.kencochrane.com/2020/08/01/build-and-sign-golang-binaries-for-macos-with-github-actions/#exporting-the-developer-certificate
+              echo "${{ secrets.APPLE_SIGNING_CERTIFICATE_P12 }}" | base64 --decode > "$CSC_LINK"
 
-                export CSC_KEY_PASSWORD="${{ secrets.KEYCHAIN_PASSWORD }}"
+              export CSC_KEY_PASSWORD="${{ secrets.KEYCHAIN_PASSWORD }}"
 
-              elif [ "${{ runner.OS }}" = "Windows" ]; then
-                export CSC_LINK="${{ runner.temp }}/signing_certificate.pfx"
-                npm config set msvs_version 2017 --global
-                echo "${{ secrets.WINDOWS_SIGNING_CERTIFICATE_PFX }}" | base64 --decode > "$CSC_LINK"
+            elif [ "${{ runner.OS }}" = "Windows" ]; then
+              export CSC_LINK="${{ runner.temp }}/signing_certificate.pfx"
+              npm config set msvs_version 2017 --global
+              echo "${{ secrets.WINDOWS_SIGNING_CERTIFICATE_PFX }}" | base64 --decode > "$CSC_LINK"
 
-                export CSC_KEY_PASSWORD="${{ secrets.WINDOWS_SIGNING_CERTIFICATE_PASSWORD }}"
-              fi
+              export CSC_KEY_PASSWORD="${{ secrets.WINDOWS_SIGNING_CERTIFICATE_PASSWORD }}"
             fi
+          fi
 
-            yarn --cwd ./electron/packager/
-            yarn --cwd ./electron/packager/ package
+          yarn --cwd ./electron/packager/
+          yarn --cwd ./electron/packager/ package
 
       - name: Upload [GitHub Actions]
         uses: actions/upload-artifact@v2
@@ -95,15 +96,19 @@ jobs:
     strategy:
       matrix:
         artifact:
-          - path: "*Linux_64bit.zip"
-            name: Linux_X86-64
-          - path: "*macOS_64bit.dmg"
-            name: macOS
-          - path: "*Windows_64bit.exe"
+          - path: '*Linux_64bit.zip'
+            name: Linux_X86-64_zip
+          - path: '*Linux_64bit.AppImage'
+            name: Linux_X86-64_app_image
+          - path: '*macOS_64bit.dmg'
+            name: macOS_dmg
+          - path: '*macOS_64bit.zip'
+            name: macOS_zip
+          - path: '*Windows_64bit.exe'
             name: Windows_X86-64_interactive_installer
-          - path: "*Windows_64bit.msi"
+          - path: '*Windows_64bit.msi'
             name: Windows_X86-64_MSI
-          - path: "*Windows_64bit.zip"
+          - path: '*Windows_64bit.zip'
             name: Windows_X86-64_zip
 
     steps:
@@ -112,7 +117,7 @@ jobs:
         with:
           name: ${{ env.JOB_TRANSFER_ARTIFACT }}
           path: ${{ env.JOB_TRANSFER_ARTIFACT }}
-      
+
       - name: Upload tester build artifact
         uses: actions/upload-artifact@v2
         with:
@@ -135,24 +140,24 @@ jobs:
         env:
           IS_RELEASE: ${{ startsWith(github.ref, 'refs/tags/') }}
         run: |
-            export LATEST_TAG=$(git describe --abbrev=0)
-            export GIT_LOG=$(git log --pretty=" - %s [%h]" $LATEST_TAG..HEAD | sed 's/ *$//g')
-            if [ "$IS_RELEASE" = true ]; then
-              export BODY=$(echo -e "$GIT_LOG")
-            else 
-              export LATEST_TAG_WITH_LINK=$(echo "[$LATEST_TAG](https://github.com/arduino/arduino-ide/releases/tag/$LATEST_TAG)")
-              if [ -z "$GIT_LOG" ]; then
-                  export BODY="There were no changes since version $LATEST_TAG_WITH_LINK."
-              else
-                  export BODY=$(echo -e "Changes since version $LATEST_TAG_WITH_LINK:\n$GIT_LOG")
-              fi
+          export LATEST_TAG=$(git describe --abbrev=0)
+          export GIT_LOG=$(git log --pretty=" - %s [%h]" $LATEST_TAG..HEAD | sed 's/ *$//g')
+          if [ "$IS_RELEASE" = true ]; then
+            export BODY=$(echo -e "$GIT_LOG")
+          else
+            export LATEST_TAG_WITH_LINK=$(echo "[$LATEST_TAG](https://github.com/arduino/arduino-ide/releases/tag/$LATEST_TAG)")
+            if [ -z "$GIT_LOG" ]; then
+                export BODY="There were no changes since version $LATEST_TAG_WITH_LINK."
+            else
+                export BODY=$(echo -e "Changes since version $LATEST_TAG_WITH_LINK:\n$GIT_LOG")
             fi
-            echo -e "$BODY"
-            OUTPUT_SAFE_BODY="${BODY//'%'/'%25'}"
-            OUTPUT_SAFE_BODY="${OUTPUT_SAFE_BODY//$'\n'/'%0A'}"
-            OUTPUT_SAFE_BODY="${OUTPUT_SAFE_BODY//$'\r'/'%0D'}"
-            echo "::set-output name=BODY::$OUTPUT_SAFE_BODY"
-            echo "$BODY" > CHANGELOG.txt
+          fi
+          echo -e "$BODY"
+          OUTPUT_SAFE_BODY="${BODY//'%'/'%25'}"
+          OUTPUT_SAFE_BODY="${OUTPUT_SAFE_BODY//$'\n'/'%0A'}"
+          OUTPUT_SAFE_BODY="${OUTPUT_SAFE_BODY//$'\r'/'%0D'}"
+          echo "::set-output name=BODY::$OUTPUT_SAFE_BODY"
+          echo "$BODY" > CHANGELOG.txt
 
       - name: Upload Changelog [GitHub Actions]
         if: github.event_name == 'schedule' || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main')
@@ -175,9 +180,9 @@ jobs:
       - name: Publish Nightly [S3]
         uses: docker://plugins/s3
         env:
-          PLUGIN_SOURCE: "${{ env.JOB_TRANSFER_ARTIFACT }}/*"
-          PLUGIN_STRIP_PREFIX: "${{ env.JOB_TRANSFER_ARTIFACT }}/"
-          PLUGIN_TARGET: "/arduino-ide/nightly"
+          PLUGIN_SOURCE: '${{ env.JOB_TRANSFER_ARTIFACT }}/*'
+          PLUGIN_STRIP_PREFIX: '${{ env.JOB_TRANSFER_ARTIFACT }}/'
+          PLUGIN_TARGET: '/arduino-ide/nightly'
           PLUGIN_BUCKET: ${{ secrets.DOWNLOADS_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
@@ -211,9 +216,9 @@ jobs:
       - name: Publish Release [S3]
         uses: docker://plugins/s3
         env:
-          PLUGIN_SOURCE: "${{ env.JOB_TRANSFER_ARTIFACT }}/*"
-          PLUGIN_STRIP_PREFIX: "${{ env.JOB_TRANSFER_ARTIFACT }}/"
-          PLUGIN_TARGET: "/arduino-ide"
+          PLUGIN_SOURCE: '${{ env.JOB_TRANSFER_ARTIFACT }}/*'
+          PLUGIN_STRIP_PREFIX: '${{ env.JOB_TRANSFER_ARTIFACT }}/'
+          PLUGIN_TARGET: '/arduino-ide'
           PLUGIN_BUCKET: ${{ secrets.DOWNLOADS_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

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

@@ -0,0 +1,38 @@
+name: Check Internationalization
+
+# See: https://docs.github.com/en/actions/reference/events-that-trigger-workflows
+on:
+  push:
+    paths:
+      - '.github/workflows/check-i18n-task.ya?ml'
+      - '**/package.json'
+      - '**.ts'
+      - 'i18n/**'
+  pull_request:
+    paths:
+      - '.github/workflows/check-i18n-task.ya?ml'
+      - '**/package.json'
+      - '**.ts'
+      - 'i18n/**'
+  workflow_dispatch:
+  repository_dispatch:
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Check for errors
+        run: yarn i18n:check

.github/workflows/compose-full-changelog.yaml

@@ -0,0 +1,55 @@
+name: Compose full changelog
+
+on:
+  release:
+    types:
+      - edited
+
+env:
+  CHANGELOG_ARTIFACTS: changelog
+  # See: https://github.com/actions/setup-node/#readme
+  NODE_VERSION: 14.x
+
+jobs:
+  create-changelog:
+    if: github.repository == 'arduino/arduino-ide'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Get Tag
+        id: tag_name
+        run: |
+          echo ::set-output name=TAG_NAME::${GITHUB_REF#refs/tags/}
+
+      - name: Create full changelog
+        id: full-changelog
+        run: |
+          yarn add @octokit/rest --ignore-workspace-root-check
+          mkdir "${{ github.workspace }}/${{ env.CHANGELOG_ARTIFACTS }}"
+
+          # Get the changelog file name to build
+          CHANGELOG_FILE_NAME="${{ steps.tag_name.outputs.TAG_NAME }}-$(date +%s).md"
+
+          # Create manifest file pointing to latest changelog file name
+          echo "$CHANGELOG_FILE_NAME" >> "${{ github.workspace }}/${{ env.CHANGELOG_ARTIFACTS }}/latest.txt"
+
+          # Compose changelog
+          yarn run compose-changelog "${{ github.workspace }}/${{ env.CHANGELOG_ARTIFACTS }}/$CHANGELOG_FILE_NAME"
+
+      - name: Publish Changelog [S3]
+        uses: docker://plugins/s3
+        env:
+          PLUGIN_SOURCE: '${{ env.CHANGELOG_ARTIFACTS }}/*'
+          PLUGIN_STRIP_PREFIX: '${{ env.CHANGELOG_ARTIFACTS }}/'
+          PLUGIN_TARGET: '/arduino-ide/changelog'
+          PLUGIN_BUCKET: ${{ secrets.DOWNLOADS_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

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

@@ -0,0 +1,30 @@
+name: i18n-nightly-push
+
+on:
+  schedule:
+    # run every day at 1AM
+    - cron: '0 1 * * *'
+
+jobs:
+  push-to-transifex:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run i18n:push script
+        run: yarn run i18n:push
+        env:
+          TRANSIFEX_ORGANIZATION: ${{ secrets.TRANSIFEX_ORGANIZATION }}
+          TRANSIFEX_PROJECT: ${{ secrets.TRANSIFEX_PROJECT }}
+          TRANSIFEX_RESOURCE: ${{ secrets.TRANSIFEX_RESOURCE }}
+          TRANSIFEX_API_KEY: ${{ secrets.TRANSIFEX_API_KEY }}

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

@@ -0,0 +1,38 @@
+name: i18n-weekly-pull
+
+on:
+  schedule:
+    # run every monday at 2AM
+    - cron: '0 2 * * 1'
+
+jobs:
+  pull-from-transifex:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install Node.js 14.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run i18n:pull script
+        run: yarn run i18n:pull
+        env:
+          TRANSIFEX_ORGANIZATION: ${{ secrets.TRANSIFEX_ORGANIZATION }}
+          TRANSIFEX_PROJECT: ${{ secrets.TRANSIFEX_PROJECT }}
+          TRANSIFEX_RESOURCE: ${{ secrets.TRANSIFEX_RESOURCE }}
+          TRANSIFEX_API_KEY: ${{ secrets.TRANSIFEX_API_KEY }}
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          commit-message: Updated translation files
+          title: Update translation files
+          branch: i18n/translations-update
+          author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/sync-labels.yml

@@ -31,7 +31,7 @@ jobs:
 
       - name: Download JSON schema for labels configuration file
         id: download-schema
-        uses: carlosperate/download-file-action@v1.0.3
+        uses: carlosperate/download-file-action@v1
         with:
           file-url: https://raw.githubusercontent.com/arduino/tooling-project-assets/main/workflow-templates/assets/sync-labels/arduino-tooling-gh-label-configuration-schema.json
           location: ${{ runner.temp }}/label-configuration-schema
@@ -66,7 +66,7 @@ jobs:
 
     steps:
       - name: Download
-        uses: carlosperate/download-file-action@v1.0.3
+        uses: carlosperate/download-file-action@v1
         with:
           file-url: https://raw.githubusercontent.com/arduino/tooling-project-assets/main/workflow-templates/assets/sync-labels/${{ matrix.filename }}
 
@@ -92,8 +92,14 @@ jobs:
       - name: Determine whether to dry run
         id: dry-run
         if: >
-          github.event == 'pull_request' ||
-          github.ref != format('refs/heads/{0}', github.event.repository.default_branch)
+          github.event_name == 'pull_request' ||
+          (
+            (
+              github.event_name == 'push' ||
+              github.event_name == 'workflow_dispatch'
+            ) &&
+            github.ref != format('refs/heads/{0}', github.event.repository.default_branch)
+          )
         run: |
           # Use of this flag in the github-label-sync command will cause it to only check the validity of the
           # configuration.

.vscode/launch.json

@@ -8,10 +8,6 @@
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
       "windows": {
         "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
-        "env": {
-          "NODE_ENV": "development",
-          "NODE_PRESERVE_SYMLINKS": "1"
-        }
       },
       "cwd": "${workspaceFolder}/electron-app",
       "protocol": "inspector",
@@ -41,6 +37,13 @@
       "internalConsoleOptions": "openOnSessionStart",
       "outputCapture": "std"
     },
+    {
+      "type": "chrome",
+      "request": "attach",
+      "name": "Attach to Electron Frontend",
+      "port": 9222,
+      "webRoot": "${workspaceFolder}/electron-app"
+    },
     {
       "type": "node",
       "request": "launch",
@@ -108,5 +111,14 @@
       "program": "${workspaceRoot}/electron/packager/index.js",
       "cwd": "${workspaceFolder}/electron/packager"
     }
+  ],
+  "compounds": [
+    {
+      "name": "Launch Electron Backend & Frontend",
+      "configurations": [
+        "App (Electron)",
+        "Attach to Electron Frontend"
+      ]
+    }
   ]
 }

BUILDING.md

@@ -40,22 +40,38 @@ The _frontend_ is running as an Electron renderer process and can invoke service
 ## Build from source
 
 If you’re familiar with TypeScript, the [Theia IDE](https://theia-ide.org/), and if you want to contribute to the
-project, you should be able to build the Arduino IDE locally. Please refer to the [Theia IDE prerequisites](https://github.com/theia-ide/theia/blob/master/doc/) documentation for the setup instructions.
+project, you should be able to build the Arduino IDE locally.
+Please refer to the [Theia IDE prerequisites](https://github.com/theia-ide/theia/blob/master/doc/) documentation for the setup instructions.
+> **Note**: Node.js 14 must be used instead of the version 12 recommended at the link above.
 
-### Build
-```sh
-yarn
-```
+Once you have all the tools installed, you can build the editor following these steps
 
-### Rebuild the native dependencies
-```sh
-yarn rebuild:electron
-```
+1. Install the dependencies and build
+    ```sh
+    yarn
+    ```
 
-### Start
-```sh
-yarn start
-```
+2. Rebuild the dependencies
+    ```sh
+    yarn rebuild:browser
+    ```
+
+3. Rebuild the electron dependencies
+    ```sh
+    yarn rebuild:electron
+    ```
+
+4. Start the application
+    ```sh
+    yarn start
+    ```
+
+### Notes for Windows contributors
+Windows requires the Microsoft Visual C++ (MSVC) compiler toolset to be installed on your development machine.
+
+In case it's not already present, it can be downloaded from the "**Tools for Visual Studio 20XX**" section of the Visual Studio [downloads page](https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-studio-2022) via the "**Build Tools for Visual Studio 20XX**" (e.g., "**Build Tools for Visual Studio 2022**") download link.
+
+Select "**Desktop development with C++**" from the "**Workloads**" tab during the installation procedure.
 
 ### CI
 
@@ -73,6 +89,7 @@ This project is built on [GitHub Actions](https://github.com/arduino/arduino-ide
     git push origin 1.2.3
    ```
 
+
 ## Notes for macOS contributors
 Beginning in macOS 10.14.5, the software [must be notarized to run](https://developer.apple.com/documentation/xcode/notarizing_macos_software_before_distribution). The signing and notarization processes for the Arduino IDE are managed by our Continuous Integration (CI) workflows, implemented with GitHub Actions. On every push and pull request, the Arduino IDE is built and saved to a workflow artifact. These artifacts can be used by contributors and beta testers who don't want to set up a build system locally.
 For security reasons, signing and notarization are disabled for workflow runs for pull requests from forks of this repository. This means that macOS will block you from running those artifacts.
@@ -117,7 +134,7 @@ git add . \
 git tag -a 0.2.0 -m "0.2.0" \
 && git push origin 0.2.0
 ```
- - The release build starts automatically and uploads the artifacts with the changelog to the  [release page](https://github.com/arduino/arduino-ide/releases).
+ - The release build starts automatically and uploads the artifacts with the changelog to the [release page](https://github.com/arduino/arduino-ide/releases).
  - If you do not want to release the `EXE` and `MSI` installers, wipe them manually.
  - If you do not like the generated changelog, modify it and update the GH release.
 

README.md

@@ -15,29 +15,31 @@ The Arduino IDE 2.x is a major rewrite, sharing no code with the IDE 1.x. It is
 ## Download
 
 You can download the latest version from the [software download page on the Arduino website](https://www.arduino.cc/en/software#experimental-software).
+
 ### Nightly builds
 
 These builds are generated every day at 03:00 GMT from the `main` branch and
 should be considered unstable:
 
-Platform  | 32 bit                   | 64 bit                                                                                                 |
---------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
-Linux     |                          | [Nightly Linux 64 bit]                                                                                 |
-Linux ARM | [🚧 Work in progress...] | [🚧 Work in progress...]                                                                              |
-Windows   |                          | [Nightly Windows 64 bit installer]<br />[Nightly Windows 64 bit MSI]<br />[Nightly Windows 64 bit ZIP] |
-macOS     |                          | [Nightly macOS 64 bit]                                                                                 |
+| Platform  | 32 bit                   | 64 bit                                                                                                 |
+| --------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
+| Linux     |                          | [Nightly Linux AppImage 64 bit]<br />[Nightly Linux ZIP file 64 bit]                                   |
+| Linux ARM | [🚧 Work in progress...] | [🚧 Work in progress...]                                                                               |
+| Windows   |                          | [Nightly Windows 64 bit installer]<br />[Nightly Windows 64 bit MSI]<br />[Nightly Windows 64 bit ZIP] |
+| macOS     |                          | [Nightly macOS 64 bit]                                                                                 |
 
-[🚧 Work in progress...]: https://github.com/arduino/arduino-ide/issues/107
-[Nightly Linux 64 bit]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Linux_64bit.zip
-[Nightly Windows 64 bit installer]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Windows_64bit.exe
-[Nightly Windows 64 bit MSI]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Windows_64bit.msi
-[Nightly Windows 64 bit ZIP]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Windows_64bit.zip
-[Nightly macOS 64 bit]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_macOS_64bit.dmg
+[🚧 work in progress...]: https://github.com/arduino/arduino-ide/issues/107
+[nightly linux appimage 64 bit]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Linux_64bit.AppImage
+[nightly linux zip file 64 bit]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Linux_64bit.zip
+[nightly windows 64 bit installer]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Windows_64bit.exe
+[nightly windows 64 bit msi]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Windows_64bit.msi
+[nightly windows 64 bit zip]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Windows_64bit.zip
+[nightly macos 64 bit]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_macOS_64bit.dmg
 
 > These links return an HTTP `302: Found` response, redirecting to latest
-  generated builds by replacing `latest` with the latest available build
-  date, using the format YYYYMMDD (i.e for 2019/Aug/06 `latest` is
-  replaced with `20190806`)
+> generated builds by replacing `latest` with the latest available build
+> date, using the format YYYYMMDD (i.e for 2019/Aug/06 `latest` is
+> replaced with `20190806`)
 
 ## Support
 
@@ -47,8 +49,8 @@ If you need assistance, see the [Help Center](https://support.arduino.cc/hc/en-u
 
 If you want to report an issue, you can submit it to the [issue tracker](https://github.com/arduino/arduino-ide/issues) of this repository. A few rules apply:
 
-* Before posting, please check if the same problem has been already reported by someone else to avoid duplicates.
-* Remember to include as much detail as you can about your hardware set-up, code and steps for reproducing the issue. Make sure you're using an original Arduino board.
+- Before posting, please check if the same problem has been already reported by someone else to avoid duplicates.
+- Remember to include as much detail as you can about your hardware set-up, code and steps for reproducing the issue. Make sure you're using an original Arduino board.
 
 ### Security
 
@@ -64,10 +66,13 @@ Contributions are very welcome! You can browse the list of open issues to see wh
 
 This repository contains the main code, but two more repositories are included during the build process:
 
-* [vscode-arduino-tools](https://github.com/arduino/vscode-arduino-tools): provides support for the language server and the debugger
-* [arduino-language-server](https://github.com/arduino/arduino-language-server): provides the language server that parses Arduino code
+- [vscode-arduino-tools](https://github.com/arduino/vscode-arduino-tools): provides support for the language server and the debugger
+- [arduino-language-server](https://github.com/arduino/arduino-language-server): provides the language server that parses Arduino code
 
 See the [BUILDING.md](BUILDING.md) for a technical overview of the application and instructions for building the code.
+
+You can help with the translation of the Arduino IDE to your language here: [Arduino IDE on Transifex](https://www.transifex.com/arduino-1/ide2/dashboard/).
+
 ## Donations
 
 This open source code was written by the Arduino team and is maintained on a daily basis with the help of the community. We invest a considerable amount of time in development, testing and optimization. Please consider [donating](https://www.arduino.cc/en/donate/) or [sponsoring](https://github.com/sponsors/arduino) to support our work, as well as [buying original Arduino boards](https://store.arduino.cc/) which is the best way to make sure our effort can continue in the long term.

arduino-ide-extension/README.md

@@ -30,17 +30,20 @@ The Core Service is responsible for building your sketches and uploading them to
   - compiling a sketch for a selected board type
   - uploading a sketch to a connected board
 
-#### Monitor Service
+#### Serial Service
 
-The Monitor Service allows getting information back from sketches running on your Arduino boards.
+The Serial Service allows getting information back from sketches running on your Arduino boards.
 
-- [src/common/protocol/monitor-service.ts](./src/common/protocol/monitor-service.ts) implements the common classes and interfaces
-- [src/node/monitor/monitor-service-impl.ts](./src/node/monitor/monitor-service-impl.ts) implements the service backend:
+- [src/common/protocol/serial-service.ts](./src/common/protocol/serial-service.ts) implements the common classes and interfaces
+- [src/node/serial/serial-service-impl.ts](./src/node/serial/serial-service-impl.ts) implements the service backend:
   - connecting to / disconnecting from a board
   - receiving and sending data
-- [src/browser/monitor/monitor-widget.tsx](./src/browser/monitor/monitor-widget.tsx) implements the serial monitor front-end:
+- [src/browser/serial/serial-connection-manager.ts](./src/browser/serial/serial-connection-manager.ts) handles the serial connection in the frontend
+- [src/browser/serial/monitor/monitor-widget.tsx](./src/browser/serial/monitor/monitor-widget.tsx) implements the serial monitor front-end:
   - viewing the output from a connected board
   - entering data to send to the board
+- [src/browser/serial/plotter/plotter-frontend-contribution.ts](./src/browser/serial/plotter/plotter-frontend-contribution.ts) implements the serial plotter front-end:
+  - opening a new window running the [Serial Plotter Web App](https://github.com/arduino/arduino-serial-plotter-webapp)
 
 #### Config Service
 

arduino-ide-extension/package.json

@@ -1,13 +1,16 @@
 {
   "name": "arduino-ide-extension",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-rc6",
   "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 clean && yarn download-examples && yarn build && yarn test",
+    "prepare": "yarn download-cli && yarn download-fwuploader && yarn download-ls && yarn copy-serial-plotter && 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-serial-plotter": "npx ncp ../node_modules/arduino-serial-plotter-webapp ./build/arduino-serial-plotter-webapp",
+    "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",
@@ -19,22 +22,23 @@
   },
   "dependencies": {
     "@grpc/grpc-js": "^1.3.7",
-    "@theia/application-package": "1.18.0",
-    "@theia/core": "1.18.0",
-    "@theia/editor": "1.18.0",
-		"@theia/editor-preview": "1.18.0",
-    "@theia/filesystem": "1.18.0",
-    "@theia/git": "1.18.0",
-    "@theia/keymaps": "1.18.0",
-    "@theia/markers": "1.18.0",
-    "@theia/monaco": "1.18.0",
-    "@theia/navigator": "1.18.0",
-    "@theia/outline-view": "1.18.0",
-    "@theia/output": "1.18.0",
-    "@theia/preferences": "1.18.0",
-    "@theia/search-in-workspace": "1.18.0",
-    "@theia/terminal": "1.18.0",
-    "@theia/workspace": "1.18.0",
+    "@theia/application-package": "1.22.1",
+    "@theia/core": "1.22.1",
+    "@theia/editor": "1.22.1",
+    "@theia/editor-preview": "1.22.1",
+    "@theia/electron": "1.22.1",
+    "@theia/filesystem": "1.22.1",
+    "@theia/git": "1.22.1",
+    "@theia/keymaps": "1.22.1",
+    "@theia/markers": "1.22.1",
+    "@theia/monaco": "1.22.1",
+    "@theia/navigator": "1.22.1",
+    "@theia/outline-view": "1.22.1",
+    "@theia/output": "1.22.1",
+    "@theia/preferences": "1.22.1",
+    "@theia/search-in-workspace": "1.22.1",
+    "@theia/terminal": "1.22.1",
+    "@theia/workspace": "1.22.1",
     "@tippyjs/react": "^4.2.5",
     "@types/atob": "^2.1.2",
     "@types/auth0-js": "^9.14.0",
@@ -51,10 +55,10 @@
     "@types/ps-tree": "^1.1.0",
     "@types/react-select": "^3.0.0",
     "@types/react-tabs": "^2.3.2",
-    "@types/sinon": "^7.5.2",
     "@types/temp": "^0.8.34",
     "@types/which": "^1.3.1",
     "ajv": "^6.5.3",
+    "arduino-serial-plotter-webapp": "0.0.17",
     "async-mutex": "^0.3.0",
     "atob": "^2.1.2",
     "auth0-js": "^9.14.0",
@@ -62,6 +66,7 @@
     "css-element-queries": "^1.2.0",
     "dateformat": "^3.0.3",
     "deepmerge": "2.0.1",
+    "electron-updater": "^4.6.5",
     "fuzzy": "^0.1.3",
     "glob": "^7.1.6",
     "google-protobuf": "^3.11.4",
@@ -77,7 +82,9 @@
     "open": "^8.0.6",
     "p-queue": "^5.0.0",
     "ps-tree": "^1.2.0",
+    "query-string": "^7.0.1",
     "react-disable": "^0.1.0",
+    "react-markdown": "^8.0.0",
     "react-select": "^3.0.4",
     "react-tabs": "^3.1.2",
     "react-window": "^1.8.6",
@@ -90,10 +97,13 @@
     "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",
+    "@types/sinon": "^10.0.6",
+    "@types/sinon-chai": "^3.2.6",
     "chai": "^4.2.0",
     "chai-string": "^1.5.0",
     "decompress": "^4.2.0",
@@ -106,7 +116,8 @@
     "moment": "^2.24.0",
     "protoc": "^1.0.4",
     "shelljs": "^0.8.3",
-    "sinon": "^9.0.1",
+    "sinon": "^12.0.1",
+    "sinon-chai": "^3.7.0",
     "typemoq": "^2.1.0",
     "uuid": "^3.2.1",
     "yargs": "^11.1.0"
@@ -146,10 +157,16 @@
   ],
   "arduino": {
     "cli": {
-      "version": "0.19.1"
+      "version": "0.21.0"
     },
     "fwuploader": {
       "version": "2.0.0"
+    },
+    "clangd": {
+      "version": "13.0.0"
+    },
+    "languageServer": {
+      "version": "0.6.0"
     }
   }
 }

arduino-ide-extension/scripts/compose-changelog.js

@@ -0,0 +1,116 @@
+// @ts-check
+
+(async () => {
+  const { Octokit } = require('@octokit/rest');
+  const fs = require('fs');
+  const path = require('path');
+
+  const octokit = new Octokit({
+    userAgent: 'Arduino IDE compose-changelog.js',
+  });
+
+  const response = await octokit.rest.repos
+    .listReleases({
+      owner: 'arduino',
+      repo: 'arduino-ide',
+    })
+    .catch((err) => {
+      console.error(err);
+      process.exit(1);
+    });
+
+  const releases = response.data;
+
+  let fullChangelog = releases.reduce((acc, item, index) => {
+    // Process each line separately
+    const body = item.body.split('\n').map(processLine).join('\n');
+    // item.name is the name of the release changelog
+    return (
+      acc +
+      `## ${item.name}\n\n${body}${
+        index !== releases.length - 1 ? '\n\n---\n\n' : '\n'
+      }`
+    );
+  }, '');
+
+  const args = process.argv.slice(2);
+  if (args.length == 0) {
+    console.error('Missing argument to destination file');
+    process.exit(1);
+  }
+  const changelogFile = path.resolve(args[0]);
+
+  await fs.writeFile(
+    changelogFile,
+    fullChangelog,
+    {
+      flag: 'w+',
+    },
+    (err) => {
+      if (err) {
+        console.error(err);
+        process.exit(1);
+      }
+      console.log('Changelog written to', changelogFile);
+    }
+  );
+})();
+
+// processLine applies different substitutions to line string.
+// We're assuming that there are no more than one substitution
+// per line to be applied.
+const processLine = (line) => {
+  // Check if a link with one of the following format exists:
+  // * [#123](https://github.com/arduino/arduino-ide/pull/123)
+  // * [#123](https://github.com/arduino/arduino-ide/issues/123)
+  // * [#123](https://github.com/arduino/arduino-ide/pull/123/)
+  // * [#123](https://github.com/arduino/arduino-ide/issues/123/)
+  // If it does return the line as is.
+  let r =
+    /(\(|\[)#\d+(\)|\])(\(|\[)https:\/\/github\.com\/arduino\/arduino-ide\/(pull|issues)\/(\d+)\/?(\)|\])/gm;
+  if (r.test(line)) {
+    return line;
+  }
+
+  // Check if a issue or PR link with the following format exists:
+  // * #123
+  // If it does it's changed to:
+  // * [#123](https://github.com/arduino/arduino-ide/pull/123)
+  r = /(?<![\w\d\/_]{1})#((\d)+)(?![\w\d\/_]{1})/gm;
+  if (r.test(line)) {
+    return line.replace(
+      r,
+      `[#$1](https://github.com/arduino/arduino-ide/pull/$1)`
+    );
+  }
+
+  // Check if a link with one of the following format exists:
+  // * https://github.com/arduino/arduino-ide/pull/123
+  // * https://github.com/arduino/arduino-ide/issues/123
+  // * https://github.com/arduino/arduino-ide/pull/123/
+  // * https://github.com/arduino/arduino-ide/issues/123/
+  // If it does it's changed respectively to:
+  // * [#123](https://github.com/arduino/arduino-ide/pull/123)
+  // * [#123](https://github.com/arduino/arduino-ide/issues/123)
+  // * [#123](https://github.com/arduino/arduino-ide/pull/123/)
+  // * [#123](https://github.com/arduino/arduino-ide/issues/123/)
+  r =
+    /(https:\/\/github\.com\/arduino\/arduino-ide\/(pull|issues)\/(\d+)\/?)/gm;
+  if (r.test(line)) {
+    return line.replace(r, `[#$3]($1)`);
+  }
+
+  // Check if a link with the following format exists:
+  // * https://github.com/arduino/arduino-ide/compare/2.0.0-rc2...2.0.0-rc3
+  // * https://github.com/arduino/arduino-ide/compare/2.0.0-rc2...2.0.0-rc3/
+  // If it does it's changed to:
+  // * [`2.0.0-rc2...2.0.0-rc3`](https://github.com/arduino/arduino-ide/compare/2.0.0-rc2...2.0.0-rc3)
+  r =
+    /(https:\/\/github\.com\/arduino\/arduino-ide\/compare\/([^\/]*))\/?\s?/gm;
+  if (r.test(line)) {
+    return line.replace(r, '[`$2`]($1)');
+  }
+
+  // If nothing matches just return the line as is
+  return line;
+};

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

@@ -4,69 +4,103 @@
 // - https://downloads.arduino.cc/arduino-language-server/clangd/clangd_${VERSION}_${SUFFIX}
 
 (() => {
+  const path = require('path');
+  const shell = require('shelljs');
+  const downloader = require('./downloader');
 
-    const DEFAULT_ALS_VERSION = 'nightly';
-    const DEFAULT_CLANGD_VERSION = 'snapshot_20210124';
+  const [DEFAULT_ALS_VERSION, DEFAULT_CLANGD_VERSION] = (() => {
+    const pkg = require(path.join(__dirname, '..', 'package.json'));
+    if (!pkg) return undefined;
 
-    const path = require('path');
-    const shell = require('shelljs');
-    const downloader = require('./downloader');
+    const { arduino } = pkg;
+    if (!arduino) return undefined;
 
-    const yargs = require('yargs')
-        .option('ls-version', {
-            alias: 'lv',
-            default: DEFAULT_ALS_VERSION,
-            choices: ['nightly'],
-            describe: `The version of the 'arduino-language-server' to download. Defaults to ${DEFAULT_ALS_VERSION}.`
-        })
-        .option('clangd-version', {
-            alias: 'cv',
-            default: DEFAULT_CLANGD_VERSION,
-            choices: ['snapshot_20210124'],
-            describe: `The version of 'clangd' to download. Defaults to ${DEFAULT_CLANGD_VERSION}.`
-        })
-        .option('force-download', {
-            alias: 'fd',
-            default: false,
-            describe: `If set, this script force downloads the 'arduino-language-server' even if it already exists on the file system.`
-        })
-        .version(false).parse();
+    const { languageServer, clangd } = arduino;
+    if (!languageServer) return undefined;
+    if (!clangd) return undefined;
 
-    const alsVersion = yargs['ls-version'];
-    const clangdVersion = yargs['clangd-version']
-    const force = yargs['force-download'];
-    const { platform, arch } = process;
+    return [languageServer.version, clangd.version];
+  })();
 
-    const build = path.join(__dirname, '..', 'build');
-    const lsExecutablePath = path.join(build, `arduino-language-server${platform === 'win32' ? '.exe' : ''}`);
+  if (!DEFAULT_ALS_VERSION) {
+    shell.echo(
+      `Could not retrieve Arduino Language Server version info from the 'package.json'.`
+    );
+    shell.exit(1);
+  }
 
-    let clangdExecutablePath, lsSuffix, clangdPrefix;
-    switch (platform) {
-        case 'darwin':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd')
-            lsSuffix = 'macOS_amd64.zip';
-            clangdPrefix = 'mac';
-            break;
-        case 'linux':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd')
-            lsSuffix = 'Linux_amd64.zip';
-            clangdPrefix = 'linux'
-            break;
-        case 'win32':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd.exe')
-            lsSuffix = 'Windows_amd64.zip';
-            clangdPrefix = 'windows';
-            break;
-    }
-    if (!lsSuffix) {
-        shell.echo(`The arduino-language-server is not available for ${platform} ${arch}.`);
-        shell.exit(1);
-    }
+  if (!DEFAULT_CLANGD_VERSION) {
+    shell.echo(
+      `Could not retrieve clangd version info from the 'package.json'.`
+    );
+    shell.exit(1);
+  }
 
-    const alsUrl = `https://downloads.arduino.cc/arduino-language-server/${alsVersion === 'nightly' ? 'nightly/arduino-language-server' : 'arduino-language-server_' + alsVersion}_${lsSuffix}`;
-    downloader.downloadUnzipAll(alsUrl, build, lsExecutablePath, force);
+  const yargs = require('yargs')
+    .option('ls-version', {
+      alias: 'lv',
+      default: DEFAULT_ALS_VERSION,
+      describe: `The version of the 'arduino-language-server' to download. Defaults to ${DEFAULT_ALS_VERSION}.`,
+    })
+    .option('clangd-version', {
+      alias: 'cv',
+      default: DEFAULT_CLANGD_VERSION,
+      choices: [DEFAULT_CLANGD_VERSION, 'snapshot_20210124'],
+      describe: `The version of 'clangd' to download. Defaults to ${DEFAULT_CLANGD_VERSION}.`,
+    })
+    .option('force-download', {
+      alias: 'fd',
+      default: false,
+      describe: `If set, this script force downloads the 'arduino-language-server' even if it already exists on the file system.`,
+    })
+    .version(false)
+    .parse();
 
-    const clangdUrl = `https://downloads.arduino.cc/arduino-language-server/clangd/clangd-${clangdPrefix}-${clangdVersion}.zip`;
-    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 alsVersion = yargs['ls-version'];
+  const clangdVersion = yargs['clangd-version'];
+  const force = yargs['force-download'];
+  const { platform, arch } = process;
+  const platformArch = platform + '-' + arch;
+  const build = path.join(__dirname, '..', 'build');
+  const lsExecutablePath = path.join(
+    build,
+    `arduino-language-server${platform === 'win32' ? '.exe' : ''}`
+  );
+  let clangdExecutablePath, lsSuffix, clangdSuffix;
 
+  switch (platformArch) {
+    case 'darwin-x64':
+      clangdExecutablePath = path.join(build, 'clangd');
+      lsSuffix = 'macOS_64bit.tar.gz';
+      clangdSuffix = 'macOS_64bit';
+      break;
+    case 'linux-x64':
+      clangdExecutablePath = path.join(build, 'clangd');
+      lsSuffix = 'Linux_64bit.tar.gz';
+      clangdSuffix = 'Linux_64bit';
+      break;
+    case 'win32-x64':
+      clangdExecutablePath = path.join(build, 'clangd.exe');
+      lsSuffix = 'Windows_64bit.zip';
+      clangdSuffix = 'Windows_64bit';
+      break;
+  }
+  if (!lsSuffix || !clangdSuffix) {
+    shell.echo(
+      `The arduino-language-server is not available for ${platform} ${arch}.`
+    );
+    shell.exit(1);
+  }
+
+  const alsUrl = `https://downloads.arduino.cc/arduino-language-server/${
+    alsVersion === 'nightly'
+      ? 'nightly/arduino-language-server'
+      : 'arduino-language-server_' + alsVersion
+  }_${lsSuffix}`;
+  downloader.downloadUnzipAll(alsUrl, build, lsExecutablePath, force);
+
+  const clangdUrl = `https://downloads.arduino.cc/tools/clangd_${clangdVersion}_${clangdSuffix}.tar.bz2`;
+  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.
 })();

arduino-ide-extension/scripts/downloader.js

@@ -5,16 +5,17 @@ const download = require('download');
 const decompress = require('decompress');
 const unzip = require('decompress-unzip');
 const untargz = require('decompress-targz');
+const untarbz2 = require('decompress-tarbz2');
 
 process.on('unhandledRejection', (reason, _) => {
-    shell.echo(String(reason));
-    shell.exit(1);
-    throw reason;
+  shell.echo(String(reason));
+  shell.exit(1);
+  throw reason;
 });
-process.on('uncaughtException', error => {
-    shell.echo(String(error));
-    shell.exit(1);
-    throw error;
+process.on('uncaughtException', (error) => {
+  shell.echo(String(error));
+  shell.exit(1);
+  throw error;
 });
 
 /**
@@ -23,55 +24,62 @@ process.on('uncaughtException', error => {
  * @param filePrefix {string} Prefix of the file name found in the archive
  * @param force {boolean}     Whether to download even if the target file exists. `false` by default.
  */
-exports.downloadUnzipFile = async (url, targetFile, filePrefix, force = false) => {
-    if (fs.existsSync(targetFile) && !force) {
-        shell.echo(`Skipping download because file already exists: ${targetFile}`);
-        return;
-    }
-    if (!fs.existsSync(path.dirname(targetFile))) {
-        if (shell.mkdir('-p', path.dirname(targetFile)).code !== 0) {
-            shell.echo('Could not create new directory.');
-            shell.exit(1);
-        }
+exports.downloadUnzipFile = async (
+  url,
+  targetFile,
+  filePrefix,
+  force = false
+) => {
+  if (fs.existsSync(targetFile) && !force) {
+    shell.echo(`Skipping download because file already exists: ${targetFile}`);
+    return;
+  }
+  if (!fs.existsSync(path.dirname(targetFile))) {
+    if (shell.mkdir('-p', path.dirname(targetFile)).code !== 0) {
+      shell.echo('Could not create new directory.');
+      shell.exit(1);
     }
+  }
 
-    const downloads = path.join(__dirname, '..', 'downloads');
-    if (shell.rm('-rf', targetFile, downloads).code !== 0) {
-        shell.exit(1);
-    }
+  const downloads = path.join(__dirname, '..', 'downloads');
+  if (shell.rm('-rf', targetFile, downloads).code !== 0) {
+    shell.exit(1);
+  }
 
-    shell.echo(`>>> Downloading from '${url}'...`);
-    const data = await download(url);
-    shell.echo(`<<< Download succeeded.`);
+  shell.echo(`>>> Downloading from '${url}'...`);
+  const data = await download(url);
+  shell.echo(`<<< Download succeeded.`);
 
-    shell.echo('>>> Decompressing...');
-    const files = await decompress(data, downloads, {
-        plugins: [
-            unzip(),
-            untargz()
-        ]
-    });
-    if (files.length === 0) {
-        shell.echo('Error ocurred while decompressing the archive.');
-        shell.exit(1);
-    }
-    const fileIndex = files.findIndex(f => f.path.startsWith(filePrefix));
-    if (fileIndex === -1) {
-        shell.echo(`The downloaded artifact does not contain any file with prefix ${filePrefix}.`);
-        shell.exit(1);
-    }
-    shell.echo('<<< Decompressing succeeded.');
+  shell.echo('>>> Decompressing...');
+  const files = await decompress(data, downloads, {
+    plugins: [unzip(), untargz(), untarbz2()],
+  });
+  if (files.length === 0) {
+    shell.echo('Error ocurred while decompressing the archive.');
+    shell.exit(1);
+  }
+  const fileIndex = files.findIndex((f) => f.path.startsWith(filePrefix));
+  if (fileIndex === -1) {
+    shell.echo(
+      `The downloaded artifact does not contain any file with prefix ${filePrefix}.`
+    );
+    shell.exit(1);
+  }
+  shell.echo('<<< Decompressing succeeded.');
 
-    if (shell.mv('-f', path.join(downloads, files[fileIndex].path), targetFile).code !== 0) {
-        shell.echo(`Could not move file to target path: ${targetFile}`);
-        shell.exit(1);
-    }
-    if (!fs.existsSync(targetFile)) {
-        shell.echo(`Could not find file: ${targetFile}`);
-        shell.exit(1);
-    }
-    shell.echo(`Done: ${targetFile}`);
-}
+  if (
+    shell.mv('-f', path.join(downloads, files[fileIndex].path), targetFile)
+      .code !== 0
+  ) {
+    shell.echo(`Could not move file to target path: ${targetFile}`);
+    shell.exit(1);
+  }
+  if (!fs.existsSync(targetFile)) {
+    shell.echo(`Could not find file: ${targetFile}`);
+    shell.exit(1);
+  }
+  shell.echo(`Done: ${targetFile}`);
+};
 
 /**
  * @param url {string}        Download URL
@@ -79,42 +87,45 @@ exports.downloadUnzipFile = async (url, targetFile, filePrefix, force = false) =
  * @param targetFile {string} Path to the main file expected after decompressing
  * @param force {boolean}     Whether to download even if the target file exists
  */
-exports.downloadUnzipAll = async (url, targetDir, targetFile, force, decompressOptions = undefined) => {
-    if (fs.existsSync(targetFile) && !force) {
-        shell.echo(`Skipping download because file already exists: ${targetFile}`);
-        return;
-    }
-    if (!fs.existsSync(targetDir)) {
-        if (shell.mkdir('-p', targetDir).code !== 0) {
-            shell.echo('Could not create new directory.');
-            shell.exit(1);
-        }
+exports.downloadUnzipAll = async (
+  url,
+  targetDir,
+  targetFile,
+  force,
+  decompressOptions = undefined
+) => {
+  if (fs.existsSync(targetFile) && !force) {
+    shell.echo(`Skipping download because file already exists: ${targetFile}`);
+    return;
+  }
+  if (!fs.existsSync(targetDir)) {
+    if (shell.mkdir('-p', targetDir).code !== 0) {
+      shell.echo('Could not create new directory.');
+      shell.exit(1);
     }
+  }
 
-    shell.echo(`>>> Downloading from '${url}'...`);
-    const data = await download(url);
-    shell.echo(`<<< Download succeeded.`);
+  shell.echo(`>>> Downloading from '${url}'...`);
+  const data = await download(url);
+  shell.echo(`<<< Download succeeded.`);
 
-    shell.echo('>>> Decompressing...');
-    let options = {
-        plugins: [
-            unzip(),
-            untargz()
-        ]
-    };
-    if (decompressOptions) {
-        options = Object.assign(options, decompressOptions)
-    }
-    const files = await decompress(data, targetDir, options);
-    if (files.length === 0) {
-        shell.echo('Error ocurred while decompressing the archive.');
-        shell.exit(1);
-    }
-    shell.echo('<<< Decompressing succeeded.');
+  shell.echo('>>> Decompressing...');
+  let options = {
+    plugins: [unzip(), untargz(), untarbz2()],
+  };
+  if (decompressOptions) {
+    options = Object.assign(options, decompressOptions);
+  }
+  const files = await decompress(data, targetDir, options);
+  if (files.length === 0) {
+    shell.echo('Error ocurred while decompressing the archive.');
+    shell.exit(1);
+  }
+  shell.echo('<<< Decompressing succeeded.');
 
-    if (!fs.existsSync(targetFile)) {
-        shell.echo(`Could not find file: ${targetFile}`);
-        shell.exit(1);
-    }
-    shell.echo(`Done: ${targetFile}`);
-}
+  if (!fs.existsSync(targetFile)) {
+    shell.echo(`Could not find file: ${targetFile}`);
+    shell.exit(1);
+  }
+  shell.echo(`Done: ${targetFile}`);
+};

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

@@ -1,21 +1,30 @@
+import { inject, injectable, postConstruct } from 'inversify';
+import * as React from 'react';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
+import {
+  BoardsService,
+  SketchesService,
+  ExecutableService,
+  Sketch,
+  LibraryService,
+} from '../common/protocol';
 import { Mutex } from 'async-mutex';
 import {
   MAIN_MENU_BAR,
   MenuContribution,
   MenuModelRegistry,
-  SelectionService,
   ILogger,
   DisposableCollection,
 } from '@theia/core';
 import {
-  ContextMenuRenderer,
   FrontendApplication,
   FrontendApplicationContribution,
   LocalStorageService,
-  OpenerService,
+  SaveableWidget,
   StatusBar,
   StatusBarAlignment,
 } from '@theia/core/lib/browser';
+import { nls } from '@theia/core/lib/common';
 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';
@@ -30,57 +39,43 @@ import {
 import { MessageService } from '@theia/core/lib/common/message-service';
 import URI from '@theia/core/lib/common/uri';
 import {
+  EditorCommands,
   EditorMainMenu,
   EditorManager,
   EditorOpenerOptions,
 } from '@theia/editor/lib/browser';
-import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog';
 import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
 import { MonacoMenus } from '@theia/monaco/lib/browser/monaco-menu';
-import { FileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
+import { FileNavigatorCommands, FileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
 import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
 import { OutputContribution } from '@theia/output/lib/browser/output-contribution';
 import { ScmContribution } from '@theia/scm/lib/browser/scm-contribution';
 import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
 import { TerminalMenus } from '@theia/terminal/lib/browser/terminal-frontend-contribution';
-import { inject, injectable, postConstruct } from 'inversify';
-import * as React from 'react';
-import { remote } from 'electron';
-import { MainMenuManager } from '../common/main-menu-manager';
-import {
-  BoardsService,
-  CoreService,
-  Port,
-  SketchesService,
-  ExecutableService,
-  Sketch,
-} from '../common/protocol';
-import { ArduinoDaemon } from '../common/protocol/arduino-daemon';
+import { HostedPluginSupport } from '@theia/plugin-ext/lib/hosted/browser/hosted-plugin';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { FileChangeType } from '@theia/filesystem/lib/browser';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 import { ConfigService } from '../common/protocol/config-service';
-import { FileSystemExt } from '../common/protocol/filesystem-ext';
 import { ArduinoCommands } from './arduino-commands';
 import { BoardsConfig } from './boards/boards-config';
 import { BoardsConfigDialog } from './boards/boards-config-dialog';
-import { BoardsDataStore } from './boards/boards-data-store';
 import { BoardsServiceProvider } from './boards/boards-service-provider';
 import { BoardsToolBarItem } from './boards/boards-toolbar-item';
 import { EditorMode } from './editor-mode';
 import { ArduinoMenus } from './menu/arduino-menus';
-import { MonitorConnection } from './monitor/monitor-connection';
-import { MonitorViewContribution } from './monitor/monitor-view-contribution';
-import { WorkspaceService } from './theia/workspace/workspace-service';
+import { MonitorViewContribution } from './serial/monitor/monitor-view-contribution';
 import { ArduinoToolbar } from './toolbar/arduino-toolbar';
-import { HostedPluginSupport } from '@theia/plugin-ext/lib/hosted/browser/hosted-plugin';
-import { FileService } from '@theia/filesystem/lib/browser/file-service';
-import { ResponseService } from '../common/protocol/response-service';
 import { ArduinoPreferences } from './arduino-preferences';
 import { SketchesServiceClientImpl } from '../common/protocol/sketches-service-client-impl';
 import { SaveAsSketch } from './contributions/save-as-sketch';
-import { FileChangeType } from '@theia/filesystem/lib/browser';
-import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 import { SketchbookWidgetContribution } from './widgets/sketchbook/sketchbook-widget-contribution';
+import { IDEUpdaterDialog } from './dialogs/ide-updater/ide-updater-dialog';
+import { IDEUpdater } from '../common/protocol/ide-updater';
+import { FileSystemFrontendContribution } from '@theia/filesystem/lib/browser/filesystem-frontend-contribution';
 
-const INIT_AVR_PACKAGES = 'initializedAvrPackages';
+const INIT_LIBS_AND_PACKAGES = 'initializedLibsAndPackages';
+export const SKIP_IDE_VERSION = 'skipIDEVersion';
 
 @injectable()
 export class ArduinoFrontendContribution
@@ -89,8 +84,7 @@ export class ArduinoFrontendContribution
     TabBarToolbarContribution,
     CommandContribution,
     MenuContribution,
-    ColorContribution
-{
+    ColorContribution {
   @inject(ILogger)
   protected logger: ILogger;
 
@@ -100,24 +94,15 @@ export class ArduinoFrontendContribution
   @inject(BoardsService)
   protected readonly boardsService: BoardsService;
 
-  @inject(CoreService)
-  protected readonly coreService: CoreService;
+  @inject(LibraryService)
+  protected readonly libraryService: LibraryService;
 
   @inject(BoardsServiceProvider)
   protected readonly boardsServiceClientImpl: BoardsServiceProvider;
 
-  @inject(SelectionService)
-  protected readonly selectionService: SelectionService;
-
   @inject(EditorManager)
   protected readonly editorManager: EditorManager;
 
-  @inject(ContextMenuRenderer)
-  protected readonly contextMenuRenderer: ContextMenuRenderer;
-
-  @inject(FileDialogService)
-  protected readonly fileDialogService: FileDialogService;
-
   @inject(FileService)
   protected readonly fileService: FileService;
 
@@ -127,21 +112,12 @@ export class ArduinoFrontendContribution
   @inject(BoardsConfigDialog)
   protected readonly boardsConfigDialog: BoardsConfigDialog;
 
-  @inject(MenuModelRegistry)
-  protected readonly menuRegistry: MenuModelRegistry;
-
   @inject(CommandRegistry)
   protected readonly commandRegistry: CommandRegistry;
 
   @inject(StatusBar)
   protected readonly statusBar: StatusBar;
 
-  @inject(WorkspaceService)
-  protected readonly workspaceService: WorkspaceService;
-
-  @inject(MonitorConnection)
-  protected readonly monitorConnection: MonitorConnection;
-
   @inject(FileNavigatorContribution)
   protected readonly fileNavigatorContributions: FileNavigatorContribution;
 
@@ -166,45 +142,35 @@ export class ArduinoFrontendContribution
   @inject(EditorMode)
   protected readonly editorMode: EditorMode;
 
-  @inject(ArduinoDaemon)
-  protected readonly daemon: ArduinoDaemon;
-
-  @inject(OpenerService)
-  protected readonly openerService: OpenerService;
-
   @inject(ConfigService)
   protected readonly configService: ConfigService;
 
-  @inject(BoardsDataStore)
-  protected readonly boardsDataStore: BoardsDataStore;
-
-  @inject(MainMenuManager)
-  protected readonly mainMenuManager: MainMenuManager;
-
-  @inject(FileSystemExt)
-  protected readonly fileSystemExt: FileSystemExt;
-
   @inject(HostedPluginSupport)
   protected hostedPluginSupport: HostedPluginSupport;
 
   @inject(ExecutableService)
   protected executableService: ExecutableService;
 
-  @inject(ResponseService)
-  protected readonly responseService: ResponseService;
-
   @inject(ArduinoPreferences)
   protected readonly arduinoPreferences: ArduinoPreferences;
 
   @inject(SketchesServiceClientImpl)
   protected readonly sketchServiceClient: SketchesServiceClientImpl;
 
-  @inject(FrontendApplicationStateService)
   protected readonly appStateService: FrontendApplicationStateService;
 
   @inject(LocalStorageService)
   protected readonly localStorageService: LocalStorageService;
 
+  @inject(FileSystemFrontendContribution)
+  protected readonly fileSystemFrontendContribution: FileSystemFrontendContribution;
+
+  @inject(IDEUpdater)
+  protected readonly updater: IDEUpdater;
+
+  @inject(IDEUpdaterDialog)
+  protected readonly updaterDialog: IDEUpdaterDialog;
+
   protected invalidConfigPopup:
     | Promise<void | 'No' | 'Yes' | undefined>
     | undefined;
@@ -212,20 +178,34 @@ export class ArduinoFrontendContribution
 
   @postConstruct()
   protected async init(): Promise<void> {
-    const notFirstStartup = await this.localStorageService.getData(
-      INIT_AVR_PACKAGES
-    );
-    if (!notFirstStartup) {
-      await this.localStorageService.setData(INIT_AVR_PACKAGES, true);
+    const isFirstStartup = !(await this.localStorageService.getData(
+      INIT_LIBS_AND_PACKAGES
+    ));
+    if (isFirstStartup) {
+      await this.localStorageService.setData(INIT_LIBS_AND_PACKAGES, true);
       const avrPackage = await this.boardsService.getBoardPackage({
         id: 'arduino:avr',
       });
-      avrPackage && (await this.boardsService.install({ item: avrPackage }));
+      const builtInLibrary = (
+        await this.libraryService.search({
+          query: 'Arduino_BuiltIn',
+        })
+      )[0];
+
+      !!avrPackage && (await this.boardsService.install({ item: avrPackage }));
+      !!builtInLibrary &&
+        (await this.libraryService.install({
+          item: builtInLibrary,
+          installDependencies: true,
+        }));
     }
     if (!window.navigator.onLine) {
       // tslint:disable-next-line:max-line-length
       this.messageService.warn(
-        'You appear to be offline. Without an Internet connection, the Arduino CLI might not be able to download the required resources and could cause malfunction. Please connect to the Internet and restart the application.'
+        nls.localize(
+          'arduino/common/offlineIndicator',
+          'You appear to be offline. Without an Internet connection, the Arduino CLI might not be able to download the required resources and could cause malfunction. Please connect to the Internet and restart the application.'
+        )
       );
     }
     const updateStatusBar = ({
@@ -236,15 +216,22 @@ export class ArduinoFrontendContribution
         alignment: StatusBarAlignment.RIGHT,
         text: selectedBoard
           ? `$(microchip) ${selectedBoard.name}`
-          : '$(close) no board selected',
+          : `$(close) ${nls.localize(
+              'arduino/common/noBoardSelected',
+              'No board selected'
+            )}`,
         className: 'arduino-selected-board',
       });
       if (selectedBoard) {
         this.statusBar.setElement('arduino-selected-port', {
           alignment: StatusBarAlignment.RIGHT,
           text: selectedPort
-            ? `on ${Port.toString(selectedPort)}`
-            : '[not connected]',
+            ? nls.localize(
+                'arduino/common/selectedOn',
+                'on {0}',
+                selectedPort.address
+              )
+            : nls.localize('arduino/common/notConnected', '[not connected]'),
           className: 'arduino-selected-port',
         });
       }
@@ -278,7 +265,7 @@ export class ArduinoFrontendContribution
     });
   }
 
-  onStart(app: FrontendApplication): void {
+  async onStart(app: FrontendApplication): Promise<void> {
     // Initialize all `pro-mode` widgets. This is a NOOP if in normal mode.
     for (const viewContribution of [
       this.fileNavigatorContributions,
@@ -293,6 +280,31 @@ export class ArduinoFrontendContribution
         viewContribution.initializeLayout(app);
       }
     }
+
+    this.updater
+      .init(
+        this.arduinoPreferences.get('arduino.ide.updateChannel'),
+        this.arduinoPreferences.get('arduino.ide.updateBaseUrl')
+      )
+      .then(() => this.updater.checkForUpdates(true))
+      .then(async (updateInfo) => {
+        if (!updateInfo) return;
+        const versionToSkip = await this.localStorageService.getData<string>(
+          SKIP_IDE_VERSION
+        );
+        if (versionToSkip === updateInfo.version) return;
+        this.updaterDialog.open(updateInfo);
+      })
+      .catch((e) => {
+        this.messageService.error(
+          nls.localize(
+            'arduino/ide-updater/errorCheckingForUpdates',
+            'Error while checking for Arduino IDE updates.\n{0}',
+            e.message
+          )
+        );
+      });
+
     const start = async ({ selectedBoard }: BoardsConfig.Config) => {
       if (selectedBoard) {
         const { name, fqbn } = selectedBoard;
@@ -303,11 +315,25 @@ export class ArduinoFrontendContribution
     };
     this.boardsServiceClientImpl.onBoardsConfigChanged(start);
     this.arduinoPreferences.onPreferenceChanged((event) => {
-      if (
-        event.preferenceName === 'arduino.language.log' &&
-        event.newValue !== event.oldValue
-      ) {
-        start(this.boardsServiceClientImpl.boardsConfig);
+      if (event.newValue !== event.oldValue) {
+        switch (event.preferenceName) {
+          case 'arduino.language.log':
+            start(this.boardsServiceClientImpl.boardsConfig);
+            break;
+          case 'arduino.window.zoomLevel':
+            if (typeof event.newValue === 'number') {
+              const webContents = remote.getCurrentWebContents();
+              webContents.setZoomLevel(event.newValue || 0);
+            }
+            break;
+          case 'arduino.ide.updateChannel':
+          case 'arduino.ide.updateBaseUrl':
+            this.updater.init(
+              this.arduinoPreferences.get('arduino.ide.updateChannel'),
+              this.arduinoPreferences.get('arduino.ide.updateBaseUrl')
+            );
+            break;
+        }
       }
     });
     this.arduinoPreferences.ready.then(() => {
@@ -315,17 +341,19 @@ export class ArduinoFrontendContribution
       const zoomLevel = this.arduinoPreferences.get('arduino.window.zoomLevel');
       webContents.setZoomLevel(zoomLevel);
     });
-    this.arduinoPreferences.onPreferenceChanged((event) => {
-      if (
-        event.preferenceName === 'arduino.window.zoomLevel' &&
-        typeof event.newValue === 'number' &&
-        event.newValue !== event.oldValue
-      ) {
-        const webContents = remote.getCurrentWebContents();
-        webContents.setZoomLevel(event.newValue || 0);
+
+    app.shell.leftPanelHandler.removeBottomMenu('settings-menu');
+
+    this.fileSystemFrontendContribution.onDidChangeEditorFile(e => {
+      if (e.type === FileChangeType.DELETED) {
+        const editorWidget = e.editor;
+        if (SaveableWidget.is(editorWidget)) {
+          editorWidget.closeWithoutSaving();
+        } else {
+          editorWidget.close();
+        }
       }
     });
-    app.shell.leftPanelHandler.removeBottomMenu('settings-menu');
   }
 
   onStop(): void {
@@ -381,15 +409,14 @@ export class ArduinoFrontendContribution
           );
         }
       }
-      const { clangdUri, cliUri, lsUri } = await this.executableService.list();
-      const [clangdPath, cliPath, lsPath, cliConfigPath] = await Promise.all([
+      const { clangdUri, lsUri } = await this.executableService.list();
+      const [clangdPath, lsPath] = await Promise.all([
         this.fileService.fsPath(new URI(clangdUri)),
-        this.fileService.fsPath(new URI(cliUri)),
         this.fileService.fsPath(new URI(lsUri)),
-        this.fileService.fsPath(
-          new URI(await this.configService.getCliConfigFileUri())
-        ),
       ]);
+
+      const config = await this.configService.getConfiguration();
+
       this.languageServerFqbn = await Promise.race([
         new Promise<undefined>((_, reject) =>
           setTimeout(
@@ -401,10 +428,10 @@ export class ArduinoFrontendContribution
           'arduino.languageserver.start',
           {
             lsPath,
-            cliPath,
+            cliDaemonAddr: `localhost:${config.daemon.port}`, // TODO: verify if this port is coming from the BE
             clangdPath,
             log: currentSketchPath ? currentSketchPath : log,
-            cliConfigPath,
+            cliDaemonInstance: '1',
             board: {
               fqbn,
               name: name ? `"${name}"` : undefined,
@@ -437,7 +464,7 @@ export class ArduinoFrontendContribution
     registry.registerItem({
       id: 'toggle-serial-monitor',
       command: MonitorViewContribution.TOGGLE_SERIAL_MONITOR_TOOLBAR,
-      tooltip: 'Serial Monitor',
+      tooltip: nls.localize('arduino/common/serialMonitor', 'Serial Monitor'),
     });
   }
 
@@ -459,6 +486,18 @@ export class ArduinoFrontendContribution
         }
       },
     });
+
+    for (const command of [
+      EditorCommands.SPLIT_EDITOR_DOWN,
+      EditorCommands.SPLIT_EDITOR_LEFT,
+      EditorCommands.SPLIT_EDITOR_RIGHT,
+      EditorCommands.SPLIT_EDITOR_UP,
+      EditorCommands.SPLIT_EDITOR_VERTICAL,
+      EditorCommands.SPLIT_EDITOR_HORIZONTAL,
+      FileNavigatorCommands.REVEAL_IN_NAVIGATOR
+    ]) {
+      registry.unregisterCommand(command);
+    }
   }
 
   registerMenus(registry: MenuModelRegistry) {
@@ -472,12 +511,21 @@ export class ArduinoFrontendContribution
     registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(TerminalMenus.TERMINAL));
     registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(CommonMenus.VIEW));
 
-    registry.registerSubmenu(ArduinoMenus.SKETCH, 'Sketch');
-    registry.registerSubmenu(ArduinoMenus.TOOLS, 'Tools');
+    registry.registerSubmenu(
+      ArduinoMenus.SKETCH,
+      nls.localize('arduino/menu/sketch', 'Sketch')
+    );
+    registry.registerSubmenu(
+      ArduinoMenus.TOOLS,
+      nls.localize('arduino/menu/tools', 'Tools')
+    );
     registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
       commandId: ArduinoCommands.TOGGLE_COMPILE_FOR_DEBUG.id,
-      label: 'Optimize for Debugging',
-      order: '4',
+      label: nls.localize(
+        'arduino/debug/optimizeForDebugging',
+        'Optimize for Debugging'
+      ),
+      order: '5',
     });
   }
 
@@ -488,13 +536,17 @@ export class ArduinoFrontendContribution
       for (const uri of [mainFileUri, ...rootFolderFileUris]) {
         await this.ensureOpened(uri);
       }
-      await this.ensureOpened(mainFileUri, true);
       if (mainFileUri.endsWith('.pde')) {
-        const message = `The '${sketch.name}' still uses the old \`.pde\` format. Do you want to switch to the new \`.ino\` extension?`;
+        const message = nls.localize(
+          'arduino/common/oldFormat',
+          "The '{0}' still uses the old `.pde` format. Do you want to switch to the new `.ino` extension?",
+          sketch.name
+        );
+        const yes = nls.localize('vscode/extensionsUtils/yes', 'Yes');
         this.messageService
-          .info(message, 'Later', 'Yes')
+          .info(message, nls.localize('arduino/common/later', 'Later'), yes)
           .then(async (answer) => {
-            if (answer === 'Yes') {
+            if (answer === yes) {
               this.commandRegistry.executeCommand(
                 SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
                 {

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

@@ -69,20 +69,20 @@ import { ScmContribution } from './theia/scm/scm-contribution';
 import { SearchInWorkspaceFrontendContribution as TheiaSearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
 import { SearchInWorkspaceFrontendContribution } from './theia/search-in-workspace/search-in-workspace-frontend-contribution';
 import { LibraryListWidgetFrontendContribution } from './library/library-widget-frontend-contribution';
-import { MonitorServiceClientImpl } from './monitor/monitor-service-client-impl';
+import { SerialServiceClientImpl } from './serial/serial-service-client-impl';
 import {
-  MonitorServicePath,
-  MonitorService,
-  MonitorServiceClient,
-} from '../common/protocol/monitor-service';
+  SerialServicePath,
+  SerialService,
+  SerialServiceClient,
+} from '../common/protocol/serial-service';
 import {
   ConfigService,
   ConfigServicePath,
 } from '../common/protocol/config-service';
-import { MonitorWidget } from './monitor/monitor-widget';
-import { MonitorViewContribution } from './monitor/monitor-view-contribution';
-import { MonitorConnection } from './monitor/monitor-connection';
-import { MonitorModel } from './monitor/monitor-model';
+import { MonitorWidget } from './serial/monitor/monitor-widget';
+import { MonitorViewContribution } from './serial/monitor/monitor-view-contribution';
+import { SerialConnectionManager } from './serial/serial-connection-manager';
+import { SerialModel } from './serial/serial-model';
 import { TabBarDecoratorService as TheiaTabBarDecoratorService } from '@theia/core/lib/browser/shell/tab-bar-decorator';
 import { TabBarDecoratorService } from './theia/core/tab-bar-decorator';
 import { ProblemManager as TheiaProblemManager } from '@theia/markers/lib/browser';
@@ -154,7 +154,7 @@ import {
 } from '../common/protocol/examples-service';
 import { BuiltInExamples, LibraryExamples } from './contributions/examples';
 import { IncludeLibrary } from './contributions/include-library';
-import { OutputChannelManager as TheiaOutputChannelManager } from '@theia/output/lib/common/output-channel';
+import { OutputChannelManager as TheiaOutputChannelManager } from '@theia/output/lib/browser/output-channel';
 import { OutputChannelManager } from './theia/output/output-channel';
 import {
   OutputChannelRegistryMainImpl as TheiaOutputChannelRegistryMainImpl,
@@ -190,12 +190,12 @@ import { BoardSelection } from './contributions/board-selection';
 import { OpenRecentSketch } from './contributions/open-recent-sketch';
 import { Help } from './contributions/help';
 import { bindArduinoPreferences } from './arduino-preferences';
+import { SettingsService } from './dialogs/settings/settings';
 import {
-  SettingsService,
   SettingsDialog,
   SettingsWidget,
   SettingsDialogProps,
-} from './settings';
+} from './dialogs/settings/settings-dialog';
 import { AddFile } from './contributions/add-file';
 import { ArchiveSketch } from './contributions/archive-sketch';
 import { OutputToolbarContribution as TheiaOutputToolbarContribution } from '@theia/output/lib/browser/output-toolbar-contribution';
@@ -207,6 +207,8 @@ import { DebugConfigurationManager } from './theia/debug/debug-configuration-man
 import { DebugConfigurationManager as TheiaDebugConfigurationManager } from '@theia/debug/lib/browser/debug-configuration-manager';
 import { SearchInWorkspaceWidget as TheiaSearchInWorkspaceWidget } from '@theia/search-in-workspace/lib/browser/search-in-workspace-widget';
 import { SearchInWorkspaceWidget } from './theia/search-in-workspace/search-in-workspace-widget';
+import { SearchInWorkspaceFactory as TheiaSearchInWorkspaceFactory } from '@theia/search-in-workspace/lib/browser/search-in-workspace-factory';
+import { SearchInWorkspaceFactory } from './theia/search-in-workspace/search-in-workspace-factory';
 import { SearchInWorkspaceResultTreeWidget as TheiaSearchInWorkspaceResultTreeWidget } from '@theia/search-in-workspace/lib/browser/search-in-workspace-result-tree-widget';
 import { SearchInWorkspaceResultTreeWidget } from './theia/search-in-workspace/search-in-workspace-result-tree-widget';
 import { MonacoEditorProvider } from './theia/monaco/monaco-editor-provider';
@@ -253,6 +255,26 @@ import {
   UploadCertificateDialogProps,
   UploadCertificateDialogWidget,
 } from './dialogs/certificate-uploader/certificate-uploader-dialog';
+import { PlotterFrontendContribution } from './serial/plotter/plotter-frontend-contribution';
+import {
+  UserFieldsDialog,
+  UserFieldsDialogProps,
+  UserFieldsDialogWidget,
+} from './dialogs/user-fields/user-fields-dialog';
+import { nls } from '@theia/core/lib/common';
+import { IDEUpdaterCommands } from './ide-updater/ide-updater-commands';
+import {
+  IDEUpdater,
+  IDEUpdaterClient,
+  IDEUpdaterPath,
+} from '../common/protocol/ide-updater';
+import { IDEUpdaterClientImpl } from './ide-updater/ide-updater-client-impl';
+import {
+  IDEUpdaterDialog,
+  IDEUpdaterDialogProps,
+  IDEUpdaterDialogWidget,
+} from './dialogs/ide-updater/ide-updater-dialog';
+import { ElectronIpcConnectionProvider } from '@theia/core/lib/electron-browser/messaging/electron-ipc-connection-provider';
 
 const ElementQueries = require('css-element-queries/src/ElementQueries');
 
@@ -371,7 +393,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
   bind(BoardsConfigDialog).toSelf().inSingletonScope();
   bind(BoardsConfigDialogProps).toConstantValue({
-    title: 'Select Board',
+    title: nls.localize('arduino/common/selectBoard', 'Select Board'),
   });
 
   // Core service
@@ -385,8 +407,8 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     .inSingletonScope();
 
   // Serial monitor
-  bind(MonitorModel).toSelf().inSingletonScope();
-  bind(FrontendApplicationContribution).toService(MonitorModel);
+  bind(SerialModel).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(SerialModel);
   bind(MonitorWidget).toSelf();
   bindViewContribution(bind, MonitorViewContribution);
   bind(TabBarToolbarContribution).toService(MonitorViewContribution);
@@ -394,18 +416,20 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     id: MonitorWidget.ID,
     createWidget: () => context.container.get(MonitorWidget),
   }));
-  // Frontend binding for the serial monitor service
-  bind(MonitorService)
+  // Frontend binding for the serial service
+  bind(SerialService)
     .toDynamicValue((context) => {
       const connection = context.container.get(WebSocketConnectionProvider);
-      const client =
-        context.container.get<MonitorServiceClient>(MonitorServiceClient);
-      return connection.createProxy(MonitorServicePath, client);
+      const client = context.container.get<SerialServiceClient>(
+        SerialServiceClient
+      );
+      return connection.createProxy(SerialServicePath, client);
     })
     .inSingletonScope();
-  bind(MonitorConnection).toSelf().inSingletonScope();
-  // Serial monitor service client to receive and delegate notifications from the backend.
-  bind(MonitorServiceClient).to(MonitorServiceClientImpl).inSingletonScope();
+  bind(SerialConnectionManager).toSelf().inSingletonScope();
+
+  // Serial service client to receive and delegate notifications from the backend.
+  bind(SerialServiceClient).to(SerialServiceClientImpl).inSingletonScope();
 
   bind(WorkspaceService).toSelf().inSingletonScope();
   rebind(TheiaWorkspaceService).toService(WorkspaceService);
@@ -462,12 +486,11 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     .inSingletonScope();
   rebind(TheiaEditorWidgetFactory).to(EditorWidgetFactory).inSingletonScope();
   rebind(TabBarToolbarFactory).toFactory(
-    ({ container: parentContainer }) =>
-      () => {
-        const container = parentContainer.createChild();
-        container.bind(TabBarToolbar).toSelf().inSingletonScope();
-        return container.get(TabBarToolbar);
-      }
+    ({ container: parentContainer }) => () => {
+      const container = parentContainer.createChild();
+      container.bind(TabBarToolbar).toSelf().inSingletonScope();
+      return container.get(TabBarToolbar);
+    }
   );
   bind(OutputWidget).toSelf().inSingletonScope();
   rebind(TheiaOutputWidget).toService(OutputWidget);
@@ -484,6 +507,12 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
   bind(SearchInWorkspaceWidget).toSelf();
   rebind(TheiaSearchInWorkspaceWidget).toService(SearchInWorkspaceWidget);
+
+  // replace search icon
+  rebind(TheiaSearchInWorkspaceFactory)
+    .to(SearchInWorkspaceFactory)
+    .inSingletonScope();
+
   rebind(TheiaSearchInWorkspaceResultTreeWidget).toDynamicValue(
     ({ container }) => {
       const childContainer = createTreeContainer(container);
@@ -596,6 +625,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   Contribution.configure(bind, AddFile);
   Contribution.configure(bind, ArchiveSketch);
   Contribution.configure(bind, AddZipLibrary);
+  Contribution.configure(bind, PlotterFrontendContribution);
 
   bind(ResponseServiceImpl)
     .toSelf()
@@ -625,13 +655,15 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
   // Enable the dirty indicator on uncloseable widgets.
   rebind(TabBarRendererFactory).toFactory((context) => () => {
-    const contextMenuRenderer =
-      context.container.get<ContextMenuRenderer>(ContextMenuRenderer);
+    const contextMenuRenderer = context.container.get<ContextMenuRenderer>(
+      ContextMenuRenderer
+    );
     const decoratorService = context.container.get<TabBarDecoratorService>(
       TabBarDecoratorService
     );
-    const iconThemeService =
-      context.container.get<IconThemeService>(IconThemeService);
+    const iconThemeService = context.container.get<IconThemeService>(
+      IconThemeService
+    );
     return new TabBarRenderer(
       contextMenuRenderer,
       decoratorService,
@@ -669,7 +701,10 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(SettingsWidget).toSelf().inSingletonScope();
   bind(SettingsDialog).toSelf().inSingletonScope();
   bind(SettingsDialogProps).toConstantValue({
-    title: 'Preferences',
+    title: nls.localize(
+      'vscode/preferences.contribution/preferences',
+      'Preferences'
+    ),
   });
 
   bind(StorageWrapper).toSelf().inSingletonScope();
@@ -735,4 +770,33 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(UploadCertificateDialogProps).toConstantValue({
     title: 'UploadCertificate',
   });
+
+  bind(IDEUpdaterDialogWidget).toSelf().inSingletonScope();
+  bind(IDEUpdaterDialog).toSelf().inSingletonScope();
+  bind(IDEUpdaterDialogProps).toConstantValue({
+    title: 'IDEUpdater',
+  });
+
+  bind(UserFieldsDialogWidget).toSelf().inSingletonScope();
+  bind(UserFieldsDialog).toSelf().inSingletonScope();
+  bind(UserFieldsDialogProps).toConstantValue({
+    title: 'UserFields',
+  });
+
+  bind(IDEUpdaterCommands).toSelf().inSingletonScope();
+  bind(CommandContribution).toService(IDEUpdaterCommands);
+
+  // Frontend binding for the IDE Updater service
+  bind(IDEUpdaterClientImpl).toSelf().inSingletonScope();
+  bind(IDEUpdaterClient).toService(IDEUpdaterClientImpl);
+  bind(IDEUpdater)
+    .toDynamicValue((context) => {
+      const client = context.container.get(IDEUpdaterClientImpl);
+      return ElectronIpcConnectionProvider.createProxy(
+        context.container,
+        IDEUpdaterPath,
+        client
+      );
+    })
+    .inSingletonScope();
 });

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

@@ -6,31 +6,47 @@ import {
   PreferenceContribution,
   PreferenceSchema,
 } from '@theia/core/lib/browser/preferences';
+import { nls } from '@theia/core/lib/common';
 import { CompilerWarningLiterals, CompilerWarnings } from '../common/protocol';
 
+export enum UpdateChannel {
+  Stable = 'stable',
+  Nightly = 'nightly',
+}
+
 export const ArduinoConfigSchema: PreferenceSchema = {
   type: 'object',
   properties: {
     'arduino.language.log': {
       type: 'boolean',
-      description:
-        "True if the Arduino Language Server should generate log files into the sketch folder. Otherwise, false. It's false by default.",
+      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.compile.verbose': {
       type: 'boolean',
-      description: 'True for verbose compile output. False by default',
+      description: nls.localize(
+        'arduino/preferences/compile.verbose',
+        'True for verbose compile output. False by default'
+      ),
       default: false,
     },
     'arduino.compile.warnings': {
       enum: [...CompilerWarningLiterals],
-      description:
-        "Tells gcc which warning level to use. It's 'None' by default",
+      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: 'True for verbose upload output. False by default.',
+      description: nls.localize(
+        'arduino/preferences/upload.verbose',
+        'True for verbose upload output. False by default.'
+      ),
       default: false,
     },
     'arduino.upload.verify': {
@@ -39,81 +55,123 @@ export const ArduinoConfigSchema: PreferenceSchema = {
     },
     'arduino.window.autoScale': {
       type: 'boolean',
-      description:
-        'True if the user interface automatically scales with the font size.',
+      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:
-        'Adjust the zoom level of the window. The original size is 0 and each increment above (e.g. 1) or below (e.g. -1) represents zooming 20% larger or smaller. You can also enter decimals to adjust the zoom level with a finer granularity.',
+      description: nls.localize(
+        'arduino/preferences/window.zoomLevel',
+        'Adjust the zoom level of the window. The original size is 0 and each increment above (e.g. 1) or below (e.g. -1) represents zooming 20% larger or smaller. You can also enter decimals to adjust the zoom level with a finer granularity.'
+      ),
       default: 0,
     },
-    'arduino.ide.autoUpdate': {
-      type: 'boolean',
-      description:
-        'True to enable automatic update checks. The IDE will check for updates automatically and periodically.',
-      default: true,
+    '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: 'List of certificates that can be uploaded to boards',
+      description: nls.localize(
+        'arduino/preferences/board.certificates',
+        'List of certificates that can be uploaded to boards'
+      ),
       default: '',
     },
     'arduino.sketchbook.showAllFiles': {
       type: 'boolean',
-      description:
-        'True to show all sketch files inside the sketch. It is false by default.',
+      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:
-        'True if the sketch sync functions are enabled. Defaults to true.',
+      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:
-        'True if users should be warned before pulling a cloud sketch. Defaults to true.',
+      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:
-        'True if users should be warned before pushing a cloud sketch. Defaults to true.',
+      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:
-        'True if users should be warned before pushing a public sketch to the cloud. Defaults to true.',
+      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.sketchSyncEnpoint': {
       type: 'string',
-      description:
-        'The endpoint used to push and pull sketches from a backend. By default it points to Arduino Cloud API.',
+      description: nls.localize(
+        'arduino/preferences/cloud.sketchSyncEnpoint',
+        '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: 'The OAuth2 client ID.',
+      description: nls.localize(
+        'arduino/preferences/auth.clientID',
+        'The OAuth2 client ID.'
+      ),
       default: 'C34Ya6ex77jTNxyKWj01lCe1vAHIaPIo',
     },
     'arduino.auth.domain': {
       type: 'string',
-      description: 'The OAuth2 domain.',
+      description: nls.localize(
+        'arduino/preferences/auth.domain',
+        'The OAuth2 domain.'
+      ),
       default: 'login.arduino.cc',
     },
     'arduino.auth.audience': {
       type: 'string',
-      description: 'The 0Auth2 audience.',
+      description: nls.localize(
+        'arduino/preferences/auth.audience',
+        'The OAuth2 audience.'
+      ),
       default: 'https://api.arduino.cc',
     },
     'arduino.auth.registerUri': {
       type: 'string',
-      description: 'The URI used to register a new user.',
+      description: nls.localize(
+        'arduino/preferences/auth.registerUri',
+        'The URI used to register a new user.'
+      ),
       default: 'https://auth.arduino.cc/login#/register',
     },
   },
@@ -127,7 +185,8 @@ export interface ArduinoConfiguration {
   'arduino.upload.verify': boolean;
   'arduino.window.autoScale': boolean;
   'arduino.window.zoomLevel': number;
-  'arduino.ide.autoUpdate': boolean;
+  'arduino.ide.updateChannel': UpdateChannel;
+  'arduino.ide.updateBaseUrl': string;
   'arduino.board.certificates': string;
   'arduino.sketchbook.showAllFiles': boolean;
   'arduino.cloud.enabled': boolean;
@@ -144,16 +203,10 @@ export interface ArduinoConfiguration {
 export const ArduinoPreferences = Symbol('ArduinoPreferences');
 export type ArduinoPreferences = PreferenceProxy<ArduinoConfiguration>;
 
-export function createArduinoPreferences(
-  preferences: PreferenceService
-): ArduinoPreferences {
-  return createPreferenceProxy(preferences, ArduinoConfigSchema);
-}
-
 export function bindArduinoPreferences(bind: interfaces.Bind): void {
   bind(ArduinoPreferences).toDynamicValue((ctx) => {
     const preferences = ctx.container.get<PreferenceService>(PreferenceService);
-    return createArduinoPreferences(preferences);
+    return createPreferenceProxy(preferences, ArduinoConfigSchema);
   });
   bind(PreferenceContribution).toConstantValue({
     schema: ArduinoConfigSchema,

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

@@ -1,5 +1,4 @@
-import { toUnix } from 'upath';
-import URI from '@theia/core/lib/common/uri';
+import { URI } from '@theia/core/shared/vscode-uri';
 import { isWindows } from '@theia/core/lib/common/os';
 import { notEmpty } from '@theia/core/lib/common/objects';
 import { MaybePromise } from '@theia/core/lib/common/types';
@@ -61,12 +60,8 @@ export class ArduinoWorkspaceRootResolver {
   // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L423
   protected hashToUri(hash: string | undefined): string | undefined {
     if (hash && hash.length > 1 && hash.startsWith('#')) {
-      const path = hash.slice(1); // Trim the leading `#`.
-      return new URI(
-        toUnix(path.slice(isWindows && hash.startsWith('/') ? 1 : 0))
-      )
-        .withScheme('file')
-        .toString();
+      const path = decodeURI(hash.slice(1)).replace(/\\/g, '/'); // Trim the leading `#`, decode the URI and replace Windows separators
+      return URI.file(path.slice(isWindows && hash.startsWith('/') ? 1 : 0)).toString();
     }
     return undefined;
   }

arduino-ide-extension/src/browser/auth/cloud-user-commands.ts

@@ -1,15 +1,21 @@
 import { Command } from '@theia/core/lib/common/command';
 
 export namespace CloudUserCommands {
-  export const LOGIN: Command = {
-    id: 'arduino-cloud--login',
-    label: 'Sign in',
-  };
+  export const LOGIN = Command.toLocalizedCommand(
+    {
+      id: 'arduino-cloud--login',
+      label: 'Sign in',
+    },
+    'arduino/cloud/signIn'
+  );
 
-  export const LOGOUT: Command = {
-    id: 'arduino-cloud--logout',
-    label: 'Sign Out',
-  };
+  export const LOGOUT = Command.toLocalizedCommand(
+    {
+      id: 'arduino-cloud--logout',
+      label: 'Sign Out',
+    },
+    'arduino/cloud/signOut'
+  );
 
   export const OPEN_PROFILE_CONTEXT_MENU: Command = {
     id: 'arduino-cloud-sketchbook--open-profile-menu',

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

@@ -10,6 +10,7 @@ import { BoardsServiceProvider } from './boards-service-provider';
 import { BoardsConfig } from './boards-config';
 import { Installable, ResponseServiceArduino } from '../../common/protocol';
 import { BoardsListWidgetFrontendContribution } from './boards-widget-frontend-contribution';
+import { nls } from '@theia/core/lib/common';
 
 /**
  * Listens on `BoardsConfig.Config` changes, if a board is selected which does not
@@ -81,12 +82,23 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
           const version = candidate.availableVersions[0]
             ? `[v ${candidate.availableVersions[0]}]`
             : '';
+          const yes = nls.localize('vscode/extensionsUtils/yes', 'Yes');
+          const manualInstall = nls.localize(
+            'arduino/board/installManually',
+            'Install Manually'
+          );
           // tslint:disable-next-line:max-line-length
           this.messageService
             .info(
-              `The \`"${candidate.name} ${version}"\` core has to be installed for the currently selected \`"${selectedBoard.name}"\` board. Do you want to install it now?`,
-              'Install Manually',
-              'Yes'
+              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,
+                version,
+                selectedBoard.name
+              ),
+              manualInstall,
+              yes
             )
             .then(async (answer) => {
               const index = this.notifications.findIndex((board) =>
@@ -95,7 +107,7 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
               if (index !== -1) {
                 this.notifications.splice(index, 1);
               }
-              if (answer === 'Yes') {
+              if (answer === yes) {
                 await Installable.installWithProgress({
                   installable: this.boardsService,
                   item: candidate,
@@ -105,7 +117,7 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
                 });
                 return;
               }
-              if (answer === 'Install Manually') {
+              if (answer === manualInstall) {
                 this.boardsManagerFrontendContribution
                   .openView({ reveal: true })
                   .then((widget) =>

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

@@ -6,6 +6,7 @@ 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 {}
@@ -32,8 +33,10 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
     this.contentNode.classList.add('select-board-dialog');
     this.contentNode.appendChild(this.createDescription());
 
-    this.appendCloseButton('CANCEL');
-    this.appendAcceptButton('OK');
+    this.appendCloseButton(
+      nls.localize('vscode/issueMainService/cancel', 'Cancel')
+    );
+    this.appendAcceptButton(nls.localize('vscode/issueMainService/ok', 'OK'));
   }
 
   @postConstruct()
@@ -63,7 +66,10 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
     head.classList.add('head');
 
     const title = document.createElement('div');
-    title.textContent = 'Select Other Board & Port';
+    title.textContent = nls.localize(
+      'arduino/board/configDialogTitle',
+      'Select Other Board & Port'
+    );
     title.classList.add('title');
     head.appendChild(title);
 
@@ -72,8 +78,14 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
     head.appendChild(text);
 
     for (const paragraph of [
-      'Select both a Board and a Port if you want to upload a sketch.',
-      'If you only select a Board you will be able just to compile, but not to upload your sketch.',
+      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;
@@ -117,7 +129,10 @@ export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
   protected isValid(value: BoardsConfig.Config): DialogError {
     if (!value.selectedBoard) {
       if (value.selectedPort) {
-        return 'Please pick a board connected to the port you have selected.';
+        return nls.localize(
+          'arduino/board/pleasePickBoard',
+          'Please pick a board connected to the port you have selected.'
+        );
       }
       return false;
     }

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

@@ -10,7 +10,12 @@ import {
   BoardWithPackage,
 } from '../../common/protocol/boards-service';
 import { NotificationCenter } from '../notification-center';
-import { BoardsServiceProvider } from './boards-service-provider';
+import {
+  AvailableBoard,
+  BoardsServiceProvider,
+} from './boards-service-provider';
+import { naturalCompare } from '../../common/utils';
+import { nls } from '@theia/core/lib/common';
 
 export namespace BoardsConfig {
   export interface Config {
@@ -162,7 +167,7 @@ export class BoardsConfig extends React.Component<
     this.queryPorts(Promise.resolve(ports)).then(({ knownPorts }) => {
       let { selectedPort } = this.state;
       // If the currently selected port is not available anymore, unset the selected port.
-      if (removedPorts.some((port) => Port.equals(port, selectedPort))) {
+      if (removedPorts.some((port) => Port.sameAs(port, selectedPort))) {
         selectedPort = undefined;
       }
       this.setState({ knownPorts, selectedPort }, () =>
@@ -183,11 +188,50 @@ export class BoardsConfig extends React.Component<
       .filter(notEmpty);
   }
 
+  protected get availableBoards(): AvailableBoard[] {
+    return this.props.boardsServiceProvider.availableBoards;
+  }
+
   protected queryPorts = async (
     availablePorts: MaybePromise<Port[]> = this.availablePorts
   ) => {
-    const ports = await availablePorts;
-    return { knownPorts: ports.sort(Port.compare) };
+    // 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 = () => {
@@ -265,7 +309,7 @@ export class BoardsConfig extends React.Component<
         <div className="boards list">
           {Array.from(distinctBoards.values()).map((board) => (
             <Item<BoardWithPackage>
-              key={`${board.name}-${board.packageName}`}
+              key={toKey(board)}
               item={board}
               label={board.name}
               details={board.details}
@@ -280,18 +324,34 @@ export class BoardsConfig extends React.Component<
   }
 
   protected renderPorts(): React.ReactNode {
-    const filter = this.state.showAllPorts ? () => true : Port.isBoardPort;
-    const ports = this.state.knownPorts.filter(filter);
+    let ports = [] as Port[];
+    if (this.state.showAllPorts) {
+      ports = this.state.knownPorts;
+    } else {
+      ports = this.state.knownPorts.filter((port) => {
+        if (port.protocol === 'serial') {
+          return true;
+        }
+        // All other ports with different protocol are
+        // only shown if there is a recognized board
+        // connected
+        for (const board of this.availableBoards) {
+          if (board.port?.address === port.address) {
+            return true;
+          }
+        }
+      });
+    }
     return !ports.length ? (
       <div className="loading noselect">No ports discovered</div>
     ) : (
       <div className="ports list">
         {ports.map((port) => (
           <Item<Port>
-            key={Port.toString(port)}
+            key={`${port.id}`}
             item={port}
             label={Port.toString(port)}
-            selected={Port.equals(this.state.selectedPort, port)}
+            selected={Port.sameAs(this.state.selectedPort, port)}
             onClick={this.selectPort}
           />
         ))}
@@ -302,7 +362,12 @@ export class BoardsConfig extends React.Component<
   protected renderPortsFooter(): React.ReactNode {
     return (
       <div className="noselect">
-        <label title="Shows all available ports when enabled">
+        <label
+          title={nls.localize(
+            'arduino/board/showAllAvailablePorts',
+            'Shows all available ports when enabled'
+          )}
+        >
           <input
             type="checkbox"
             defaultChecked={this.state.showAllPorts}
@@ -345,7 +410,7 @@ export namespace BoardsConfig {
         return options.default;
       }
       const { name } = selectedBoard;
-      return `${name}${port ? ' at ' + Port.toString(port) : ''}`;
+      return `${name}${port ? ` at ${port.address}` : ''}`;
     }
 
     export function setConfig(

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

@@ -12,6 +12,7 @@ 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 { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
@@ -115,9 +116,13 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
               ...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP,
               'z02_programmers',
             ];
+            const programmerNls = nls.localize(
+              'arduino/board/programmer',
+              'Programmer'
+            );
             const label = selectedProgrammer
-              ? `Programmer: "${selectedProgrammer.name}"`
-              : 'Programmer';
+              ? `${programmerNls}: "${selectedProgrammer.name}"`
+              : programmerNls;
             this.menuRegistry.registerSubmenu(programmersMenuPath, label);
             this.toDisposeOnBoardChange.push(
               Disposable.create(() =>

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

@@ -1,7 +1,6 @@
 import { injectable, inject, named } from 'inversify';
 import { ILogger } from '@theia/core/lib/common/logger';
 import { deepClone } from '@theia/core/lib/common/objects';
-import { MaybePromise } from '@theia/core/lib/common/types';
 import { Event, Emitter } from '@theia/core/lib/common/event';
 import {
   FrontendApplicationContribution,
@@ -11,7 +10,6 @@ import { notEmpty } from '../../common/utils';
 import {
   BoardsService,
   ConfigOption,
-  Installable,
   BoardDetails,
   Programmer,
 } from '../../common/protocol';
@@ -36,16 +34,12 @@ export class BoardsDataStore implements FrontendApplicationContribution {
 
   onStart(): void {
     this.notificationCenter.onPlatformInstalled(async ({ item }) => {
-      const { installedVersion: version } = item;
-      if (!version) {
-        return;
-      }
       let shouldFireChanged = false;
       for (const fqbn of item.boards
         .map(({ fqbn }) => fqbn)
         .filter(notEmpty)
         .filter((fqbn) => !!fqbn)) {
-        const key = this.getStorageKey(fqbn, version);
+        const key = this.getStorageKey(fqbn);
         let data = await this.storageService.getData<
           ConfigOption[] | undefined
         >(key);
@@ -72,33 +66,20 @@ export class BoardsDataStore implements FrontendApplicationContribution {
 
   async appendConfigToFqbn(
     fqbn: string | undefined,
-    boardsPackageVersion: MaybePromise<
-      Installable.Version | undefined
-    > = this.getBoardsPackageVersion(fqbn)
   ): Promise<string | undefined> {
     if (!fqbn) {
       return undefined;
     }
-
-    const { configOptions } = await this.getData(fqbn, boardsPackageVersion);
+    const { configOptions } = await this.getData(fqbn);
     return ConfigOption.decorate(fqbn, configOptions);
   }
 
-  async getData(
-    fqbn: string | undefined,
-    boardsPackageVersion: MaybePromise<
-      Installable.Version | undefined
-    > = this.getBoardsPackageVersion(fqbn)
-  ): Promise<BoardsDataStore.Data> {
+  async getData(fqbn: string | undefined): Promise<BoardsDataStore.Data> {
     if (!fqbn) {
       return BoardsDataStore.Data.EMPTY;
     }
 
-    const version = await boardsPackageVersion;
-    if (!version) {
-      return BoardsDataStore.Data.EMPTY;
-    }
-    const key = this.getStorageKey(fqbn, version);
+    const key = this.getStorageKey(fqbn);
     let data = await this.storageService.getData<
       BoardsDataStore.Data | undefined
     >(key, undefined);
@@ -124,25 +105,16 @@ export class BoardsDataStore implements FrontendApplicationContribution {
       fqbn,
       selectedProgrammer,
     }: { fqbn: string; selectedProgrammer: Programmer },
-    boardsPackageVersion: MaybePromise<
-      Installable.Version | undefined
-    > = this.getBoardsPackageVersion(fqbn)
   ): Promise<boolean> {
-    const data = deepClone(await this.getData(fqbn, boardsPackageVersion));
+    const data = deepClone(await this.getData(fqbn));
     const { programmers } = data;
     if (!programmers.find((p) => Programmer.equals(selectedProgrammer, p))) {
       return false;
     }
 
-    const version = await boardsPackageVersion;
-    if (!version) {
-      return false;
-    }
-
     await this.setData({
       fqbn,
       data: { ...data, selectedProgrammer },
-      version,
     });
     this.fireChanged();
     return true;
@@ -153,12 +125,9 @@ export class BoardsDataStore implements FrontendApplicationContribution {
       fqbn,
       option,
       selectedValue,
-    }: { fqbn: string; option: string; selectedValue: string },
-    boardsPackageVersion: MaybePromise<
-      Installable.Version | undefined
-    > = this.getBoardsPackageVersion(fqbn)
+    }: { fqbn: string; option: string; selectedValue: string }
   ): Promise<boolean> {
-    const data = deepClone(await this.getData(fqbn, boardsPackageVersion));
+    const data = deepClone(await this.getData(fqbn));
     const { configOptions } = data;
     const configOption = configOptions.find((c) => c.option === option);
     if (!configOption) {
@@ -176,12 +145,7 @@ export class BoardsDataStore implements FrontendApplicationContribution {
     if (!updated) {
       return false;
     }
-    const version = await boardsPackageVersion;
-    if (!version) {
-      return false;
-    }
-
-    await this.setData({ fqbn, data, version });
+    await this.setData({ fqbn, data });
     this.fireChanged();
     return true;
   }
@@ -189,18 +153,16 @@ export class BoardsDataStore implements FrontendApplicationContribution {
   protected async setData({
     fqbn,
     data,
-    version,
   }: {
     fqbn: string;
     data: BoardsDataStore.Data;
-    version: Installable.Version;
   }): Promise<void> {
-    const key = this.getStorageKey(fqbn, version);
+    const key = this.getStorageKey(fqbn);
     return this.storageService.setData(key, data);
   }
 
-  protected getStorageKey(fqbn: string, version: Installable.Version): string {
-    return `.arduinoIDE-configOptions-${version}-${fqbn}`;
+  protected getStorageKey(fqbn: string): string {
+    return `.arduinoIDE-configOptions-${fqbn}`;
   }
 
   protected async getBoardDetailsSafe(
@@ -231,21 +193,6 @@ export class BoardsDataStore implements FrontendApplicationContribution {
   protected fireChanged(): void {
     this.onChangedEmitter.fire();
   }
-
-  protected async getBoardsPackageVersion(
-    fqbn: string | undefined
-  ): Promise<Installable.Version | undefined> {
-    if (!fqbn) {
-      return undefined;
-    }
-    const boardsPackage = await this.boardsService.getContainerBoardPackage({
-      fqbn,
-    });
-    if (!boardsPackage) {
-      return undefined;
-    }
-    return boardsPackage.installedVersion;
-  }
 }
 
 export namespace BoardsDataStore {

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

@@ -5,11 +5,12 @@ import {
 } from '../../common/protocol/boards-service';
 import { ListWidget } from '../widgets/component-list/list-widget';
 import { ListItemRenderer } from '../widgets/component-list/list-item-renderer';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardsListWidget extends ListWidget<BoardsPackage> {
   static WIDGET_ID = 'boards-list-widget';
-  static WIDGET_LABEL = 'Boards Manager';
+  static WIDGET_LABEL = nls.localize('arduino/boardsManager', 'Boards Manager');
 
   constructor(
     @inject(BoardsService) protected service: BoardsService,
@@ -52,7 +53,12 @@ export class BoardsListWidget extends ListWidget<BoardsPackage> {
   }): Promise<void> {
     await super.install({ item, progressId, version });
     this.messageService.info(
-      `Successfully installed platform ${item.name}:${version}`,
+      nls.localize(
+        'arduino/board/succesfullyInstalledPlatform',
+        'Successfully installed platform {0}:{1}',
+        item.name,
+        version
+      ),
       { timeout: 3000 }
     );
   }
@@ -66,7 +72,12 @@ export class BoardsListWidget extends ListWidget<BoardsPackage> {
   }): Promise<void> {
     await super.uninstall({ item, progressId });
     this.messageService.info(
-      `Successfully uninstalled platform ${item.name}:${item.installedVersion}`,
+      nls.localize(
+        'arduino/board/succesfullyUninstalledPlatform',
+        'Successfully uninstalled platform {0}:{1}',
+        item.name,
+        item.installedVersion!
+      ),
       { timeout: 3000 }
     );
   }

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

@@ -12,12 +12,14 @@ import {
   BoardsPackage,
   AttachedBoardsChangeEvent,
   BoardWithPackage,
+  BoardUserField,
 } from '../../common/protocol';
 import { BoardsConfig } from './boards-config';
 import { naturalCompare } from '../../common/utils';
 import { NotificationCenter } from '../notification-center';
 import { ArduinoCommands } from '../arduino-commands';
 import { StorageWrapper } from '../storage-wrapper';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardsServiceProvider implements FrontendApplicationContribution {
@@ -41,6 +43,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
   protected readonly onAvailableBoardsChangedEmitter = new Emitter<
     AvailableBoard[]
   >();
+  protected readonly onAvailablePortsChangedEmitter = new Emitter<Port[]>();
 
   /**
    * Used for the auto-reconnecting. Sometimes, the attached board gets disconnected after uploading something to it.
@@ -63,11 +66,12 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
    * This even also fires, when the boards package was not available for the currently selected board,
    * and the user installs the board package. Note: installing a board package will set the `fqbn` of the
    * currently selected board.\
-   * This even also emitted when the board package for the currently selected board was uninstalled.
+   * This event is also emitted when the board package for the currently selected board was uninstalled.
    */
   readonly onBoardsConfigChanged = this.onBoardsConfigChangedEmitter.event;
   readonly onAvailableBoardsChanged =
     this.onAvailableBoardsChangedEmitter.event;
+  readonly onAvailablePortsChanged = this.onAvailablePortsChangedEmitter.event;
 
   onStart(): void {
     this.notificationCenter.onAttachedBoardsChanged(
@@ -87,6 +91,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     ]).then(([attachedBoards, availablePorts]) => {
       this._attachedBoards = attachedBoards;
       this._availablePorts = availablePorts;
+      this.onAvailablePortsChangedEmitter.fire(this._availablePorts);
       this.reconcileAvailableBoards().then(() => this.tryReconnect());
     });
   }
@@ -101,6 +106,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     }
     this._attachedBoards = event.newState.boards;
     this._availablePorts = event.newState.ports;
+    this.onAvailablePortsChangedEmitter.fire(this._availablePorts);
     this.reconcileAvailableBoards().then(() => this.tryReconnect());
   }
 
@@ -134,14 +140,20 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
         selectedBoard.packageId === event.item.id &&
         !installedBoard
       ) {
+        const yes = nls.localize('vscode/extensionsUtils/yes', 'Yes');
         this.messageService
           .warn(
-            `Could not find previously selected board '${selectedBoard.name}' in installed platform '${event.item.name}'. Please manually reselect the board you want to use. Do you want to reselect it now?`,
-            'Reselect later',
-            'Yes'
+            nls.localize(
+              'arduino/board/couldNotFindPreviouslySelected',
+              "Could not find previously selected board '{0}' in installed platform '{1}'. Please manually reselect the board you want to use. Do you want to reselect it now?",
+              selectedBoard.name,
+              event.item.name
+            ),
+            nls.localize('arduino/board/reselectLater', 'Reselect later'),
+            yes
           )
           .then(async (answer) => {
-            if (answer === 'Yes') {
+            if (answer === yes) {
               this.commandService.executeCommand(
                 ArduinoCommands.OPEN_BOARDS_DIALOG.id,
                 selectedBoard.name
@@ -173,8 +185,8 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
         const selectedAvailableBoard = AvailableBoard.is(selectedBoard)
           ? selectedBoard
           : this._availableBoards.find((availableBoard) =>
-              Board.sameAs(availableBoard, selectedBoard)
-            );
+            Board.sameAs(availableBoard, selectedBoard)
+          );
         if (
           selectedAvailableBoard &&
           selectedAvailableBoard.selected &&
@@ -218,7 +230,8 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
       )) {
         if (
           this.latestValidBoardsConfig.selectedBoard.fqbn === board.fqbn &&
-          this.latestValidBoardsConfig.selectedBoard.name === board.name
+          this.latestValidBoardsConfig.selectedBoard.name === board.name &&
+          this.latestValidBoardsConfig.selectedPort.protocol === board.port?.protocol
         ) {
           this.boardsConfig = {
             ...this.latestValidBoardsConfig,
@@ -232,7 +245,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
   }
 
   set boardsConfig(config: BoardsConfig.Config) {
-    this.doSetBoardsConfig(config);
+    this.setBoardsConfig(config);
     this.saveState().finally(() =>
       this.reconcileAvailableBoards().finally(() =>
         this.onBoardsConfigChangedEmitter.fire(this._boardsConfig)
@@ -244,7 +257,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     return this._boardsConfig;
   }
 
-  protected doSetBoardsConfig(config: BoardsConfig.Config): void {
+  protected setBoardsConfig(config: BoardsConfig.Config): void {
     this.logger.info('Board config changed: ', JSON.stringify(config));
     this._boardsConfig = config;
     this.latestBoardsConfig = this._boardsConfig;
@@ -264,6 +277,18 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     return boards;
   }
 
+  async selectedBoardUserFields(): Promise<BoardUserField[]> {
+    if (!this._boardsConfig.selectedBoard || !this._boardsConfig.selectedPort) {
+      return [];
+    }
+    const fqbn = this._boardsConfig.selectedBoard.fqbn;
+    if (!fqbn) {
+      return [];
+    }
+    const protocol = this._boardsConfig.selectedPort.protocol;
+    return await this.boardsService.getBoardUserFields({ fqbn, protocol });
+  }
+
   /**
    * `true` if the `config.selectedBoard` is defined; hence can compile against the board. Otherwise, `false`.
    */
@@ -277,9 +302,12 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
 
     if (!config.selectedBoard) {
       if (!options.silent) {
-        this.messageService.warn('No boards selected.', {
-          timeout: 3000,
-        });
+        this.messageService.warn(
+          nls.localize('arduino/board/noneSelected', 'No boards selected.'),
+          {
+            timeout: 3000,
+          }
+        );
       }
       return false;
     }
@@ -301,9 +329,16 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     const { name } = config.selectedBoard;
     if (!config.selectedPort) {
       if (!options.silent) {
-        this.messageService.warn(`No ports selected for board: '${name}'.`, {
-          timeout: 3000,
-        });
+        this.messageService.warn(
+          nls.localize(
+            'arduino/board/noPortsSelected',
+            "No ports selected for board: '{0}'.",
+            name
+          ),
+          {
+            timeout: 3000,
+          }
+        );
       }
       return false;
     }
@@ -311,7 +346,11 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     if (!config.selectedBoard.fqbn) {
       if (!options.silent) {
         this.messageService.warn(
-          `The FQBN is not available for the selected board ${name}. Do you have the corresponding core installed?`,
+          nls.localize(
+            'arduino/board/noFQBN',
+            'The FQBN is not available for the selected board "{0}". Do you have the corresponding core installed?',
+            name
+          ),
           { timeout: 3000 }
         );
       }
@@ -332,19 +371,19 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     const find = (needle: Board & { port: Port }, haystack: AvailableBoard[]) =>
       haystack.find(
         (board) =>
-          Board.equals(needle, board) && Port.equals(needle.port, board.port)
+          Board.equals(needle, board) && Port.sameAs(needle.port, board.port)
       );
     const timeoutTask =
       !!timeout && timeout > 0
         ? new Promise<void>((_, reject) =>
-            setTimeout(
-              () => reject(new Error(`Timeout after ${timeout} ms.`)),
-              timeout
-            )
+          setTimeout(
+            () => reject(new Error(`Timeout after ${timeout} ms.`)),
+            timeout
           )
+        )
         : new Promise<void>(() => {
-            /* never */
-          });
+          /* never */
+        });
     const waitUntilTask = new Promise<void>((resolve) => {
       let candidate = find(what, this.availableBoards);
       if (candidate) {
@@ -363,7 +402,6 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
   }
 
   protected async reconcileAvailableBoards(): Promise<void> {
-    const attachedBoards = this._attachedBoards;
     const availablePorts = this._availablePorts;
     // Unset the port on the user's config, if it is not available anymore.
     if (
@@ -372,7 +410,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
         Port.sameAs(port, this.boardsConfig.selectedPort)
       )
     ) {
-      this.doSetBoardsConfig({
+      this.setBoardsConfig({
         selectedBoard: this.boardsConfig.selectedBoard,
         selectedPort: undefined,
       });
@@ -381,51 +419,73 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     const boardsConfig = this.boardsConfig;
     const currentAvailableBoards = this._availableBoards;
     const availableBoards: AvailableBoard[] = [];
-    const availableBoardPorts = availablePorts.filter(Port.isBoardPort);
-    const attachedSerialBoards = attachedBoards.filter(({ port }) => !!port);
+    const attachedBoards = this._attachedBoards.filter(({ port }) => !!port);
+    const availableBoardPorts = availablePorts.filter((port) => {
+      if (port.protocol === 'serial') {
+        // We always show all serial ports, even if there
+        // is no recognized board connected to it
+        return true;
+      }
 
-    for (const boardPort of availableBoardPorts) {
-      let state = AvailableBoard.State.incomplete; // Initial pessimism.
-      let board = attachedSerialBoards.find(({ port }) =>
-        Port.sameAs(boardPort, port)
-      );
-      if (board) {
-        state = AvailableBoard.State.recognized;
-      } else {
-        // If the selected board is not recognized because it is a 3rd party board: https://github.com/arduino/arduino-cli/issues/623
-        // We still want to show it without the red X in the boards toolbar: https://github.com/arduino/arduino-pro-ide/issues/198#issuecomment-599355836
-        const lastSelectedBoard = await this.getLastSelectedBoardOnPort(
-          boardPort
-        );
-        if (lastSelectedBoard) {
-          board = {
-            ...lastSelectedBoard,
-            port: boardPort,
-          };
-          state = AvailableBoard.State.guessed;
+      // All other ports with different protocol are
+      // only shown if there is a recognized board
+      // connected
+      for (const board of attachedBoards) {
+        if (board.port?.address === port.address) {
+          return true;
         }
       }
-      if (!board) {
-        availableBoards.push({
-          name: 'Unknown',
-          port: boardPort,
-          state,
-        });
-      } else {
-        const selected = BoardsConfig.Config.sameAs(boardsConfig, board);
-        availableBoards.push({
+      return false;
+    });
+
+    for (const boardPort of availableBoardPorts) {
+      const board = attachedBoards.find(({ port }) =>
+        Port.sameAs(boardPort, port)
+      );
+      const lastSelectedBoard = await this.getLastSelectedBoardOnPort(
+        boardPort
+      );
+
+      let availableBoard = {} as AvailableBoard;
+      if (board) {
+        availableBoard = {
           ...board,
-          state,
-          selected,
+          state: AvailableBoard.State.recognized,
+          selected: BoardsConfig.Config.sameAs(boardsConfig, board),
           port: boardPort,
-        });
+        };
+      } else if (lastSelectedBoard) {
+        // If the selected board is not recognized because it is a 3rd party board: https://github.com/arduino/arduino-cli/issues/623
+        // We still want to show it without the red X in the boards toolbar: https://github.com/arduino/arduino-pro-ide/issues/198#issuecomment-599355836
+        availableBoard = {
+          ...lastSelectedBoard,
+          state: AvailableBoard.State.guessed,
+          selected: BoardsConfig.Config.sameAs(boardsConfig, lastSelectedBoard),
+          port: boardPort,
+        };
+      } else {
+        availableBoard = {
+          name: nls.localize('arduino/common/unknown', 'Unknown'),
+          port: boardPort,
+          state: AvailableBoard.State.incomplete,
+        };
       }
+      availableBoards.push(availableBoard);
     }
 
     if (
       boardsConfig.selectedBoard &&
       !availableBoards.some(({ selected }) => selected)
     ) {
+      // If the selected board has the same port of an unknown board
+      // that is already in availableBoards we might get a duplicate port.
+      // So we remove the one already in the array and add the selected one.
+      const found = availableBoards.findIndex(
+        (board) => board.port?.address === boardsConfig.selectedPort?.address
+      );
+      if (found >= 0) {
+        availableBoards.splice(found, 1);
+      }
       availableBoards.push({
         ...boardsConfig.selectedBoard,
         port: boardsConfig.selectedPort,
@@ -434,28 +494,24 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
       });
     }
 
-    const sortedAvailableBoards = availableBoards.sort(AvailableBoard.compare);
-    let hasChanged =
-      sortedAvailableBoards.length !== currentAvailableBoards.length;
-    for (let i = 0; !hasChanged && i < sortedAvailableBoards.length; i++) {
+    availableBoards.sort(AvailableBoard.compare);
+
+    let hasChanged = availableBoards.length !== currentAvailableBoards.length;
+    for (let i = 0; !hasChanged && i < availableBoards.length; i++) {
+      const [left, right] = [availableBoards[i], currentAvailableBoards[i]];
       hasChanged =
-        AvailableBoard.compare(
-          sortedAvailableBoards[i],
-          currentAvailableBoards[i]
-        ) !== 0;
+        !!AvailableBoard.compare(left, right) ||
+        left.selected !== right.selected;
     }
     if (hasChanged) {
-      this._availableBoards = sortedAvailableBoards;
+      this._availableBoards = availableBoards;
       this.onAvailableBoardsChangedEmitter.fire(this._availableBoards);
     }
   }
 
   protected async getLastSelectedBoardOnPort(
-    port: Port | string | undefined
+    port: Port
   ): Promise<Board | undefined> {
-    if (!port) {
-      return undefined;
-    }
     const key = this.getLastSelectedBoardOnPortKey(port);
     return this.getData<Board>(key);
   }
@@ -478,9 +534,8 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
 
   protected getLastSelectedBoardOnPortKey(port: Port | string): string {
     // TODO: we lose the port's `protocol` info (`serial`, `network`, etc.) here if the `port` is a `string`.
-    return `last-selected-board-on-port:${
-      typeof port === 'string' ? port : Port.toString(port)
-    }`;
+    return `last-selected-board-on-port:${typeof port === 'string' ? port : port.address
+      }`;
   }
 
   protected async loadState(): Promise<void> {
@@ -564,35 +619,39 @@ export namespace AvailableBoard {
     return !!board.port;
   }
 
+  // Available boards 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
   export const compare = (left: AvailableBoard, right: AvailableBoard) => {
-    if (left.selected && !right.selected) {
+    if (left.port?.protocol === 'serial' && right.port?.protocol !== 'serial') {
       return -1;
-    }
-    if (right.selected && !left.selected) {
+    } else if (
+      left.port?.protocol !== 'serial' &&
+      right.port?.protocol === 'serial'
+    ) {
       return 1;
-    }
-    let result = naturalCompare(left.name, right.name);
-    if (result !== 0) {
-      return result;
-    }
-    if (left.fqbn && right.fqbn) {
-      result = naturalCompare(left.fqbn, right.fqbn);
-      if (result !== 0) {
-        return result;
+    } else if (
+      left.port?.protocol === 'network' &&
+      right.port?.protocol !== 'network'
+    ) {
+      return -1;
+    } else if (
+      left.port?.protocol !== 'network' &&
+      right.port?.protocol === 'network'
+    ) {
+      return 1;
+    } else if (left.port?.protocol === right.port?.protocol) {
+      // We show all ports, including those that have guessed
+      // or unrecognized boards, so we must sort those too.
+      if (left.state < right.state) {
+        return -1;
+      } else if (left.state > right.state) {
+        return 1;
       }
     }
-    if (left.port && right.port) {
-      result = Port.compare(left.port, right.port);
-      if (result !== 0) {
-        return result;
-      }
-    }
-    if (!!left.selected && !right.selected) {
-      return -1;
-    }
-    if (!!right.selected && !left.selected) {
-      return 1;
-    }
-    return left.state - right.state;
+    return naturalCompare(left.port?.address!, right.port?.address!);
   };
 }

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

@@ -9,6 +9,7 @@ import {
   BoardsServiceProvider,
   AvailableBoard,
 } from './boards-service-provider';
+import { nls } from '@theia/core/lib/common';
 
 export interface BoardsDropDownListCoords {
   readonly top: number;
@@ -49,6 +50,10 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
     if (coords === 'hidden') {
       return '';
     }
+    const footerLabel = nls.localize(
+      'arduino/board/openBoardsConfig',
+      'Select other board and port…'
+    );
     return (
       <div
         className="arduino-boards-dropdown-list"
@@ -57,17 +62,25 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
           ...coords,
         }}
       >
-        {this.renderItem({
-          label: 'Select Other Board & Port',
-          onClick: () => this.props.openBoardsConfig(),
-        })}
         {items
           .map(({ name, port, selected, onClick }) => ({
-            label: `${name} at ${Port.toString(port)}`,
+            label: nls.localize(
+              'arduino/board/boardListItem',
+              '{0} at {1}',
+              name,
+              Port.toString(port)
+            ),
             selected,
             onClick,
           }))
           .map(this.renderItem)}
+        <div
+          key={footerLabel}
+          className="arduino-boards-dropdown-item arduino-board-dropdown-footer"
+          onClick={() => this.props.openBoardsConfig()}
+        >
+          <div>{footerLabel}</div>
+        </div>
       </div>
     );
   }
@@ -152,7 +165,10 @@ export class BoardsToolBarItem extends React.Component<
     const { coords, availableBoards } = this.state;
     const boardsConfig = this.props.boardsServiceClient.boardsConfig;
     const title = BoardsConfig.Config.toString(boardsConfig, {
-      default: 'no board selected',
+      default: nls.localize(
+        'arduino/common/noBoardSelected',
+        'No board selected'
+      ),
     });
     const decorator = (() => {
       const selectedBoard = availableBoards.find(({ selected }) => selected);

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+export type ProgressBarProps = {
+  percent?: number;
+  showPercentage?: boolean;
+};
+
+export default function ProgressBar({
+  percent = 0,
+  showPercentage = false,
+}: ProgressBarProps): React.ReactElement {
+  const roundedPercent = Math.round(percent);
+  return (
+    <div className="progress-bar">
+      <div className="progress-bar--outer">
+        <div
+          className="progress-bar--inner"
+          style={{ width: `${roundedPercent}%` }}
+        />
+      </div>
+      {showPercentage && (
+        <div className="progress-bar--percentage">
+          <div className="progress-bar--percentage-text">{roundedPercent}%</div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { inject, injectable } from 'inversify';
 import * as moment from 'moment';
-import { remote } from 'electron';
+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';
@@ -12,6 +12,7 @@ import {
 } 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 {
@@ -30,7 +31,11 @@ export class About extends Contribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.HELP__ABOUT_GROUP, {
       commandId: About.Commands.ABOUT_APP.id,
-      label: `About ${this.applicationName}`,
+      label: nls.localize(
+        'arduino/about/label',
+        'About {0}',
+        this.applicationName
+      ),
       order: '0',
     });
   }
@@ -42,16 +47,24 @@ export class About extends Contribution {
       status: cliStatus,
     } = await this.configService.getVersion();
     const buildDate = this.buildDate;
-    const detail = (showAll: boolean) => `Version: ${remote.app.getVersion()}
-Date: ${buildDate ? buildDate : 'dev build'}${
-      buildDate && showAll ? ` (${this.ago(buildDate)})` : ''
-    }
-CLI Version: ${version}${cliStatus ? ` ${cliStatus}` : ''} [${commit}]
-
-${showAll ? `Copyright © ${new Date().getFullYear()} Arduino SA` : ''}
-`;
-    const ok = 'OK';
-    const copy = 'Copy';
+    const detail = (showAll: boolean) =>
+      nls.localize(
+        'arduino/about/detail',
+        'Version: {0}\nDate: {1}{2}\nCLI Version: {3}{4} [{5}]\n\n{6}',
+        remote.app.getVersion(),
+        buildDate ? buildDate : nls.localize('', 'dev build'),
+        buildDate && showAll ? ` (${this.ago(buildDate)})` : '',
+        version,
+        cliStatus ? ` ${cliStatus}` : '',
+        commit,
+        nls.localize(
+          'arduino/about/copyright',
+          'Copyright © {0} Arduino SA',
+          new Date().getFullYear().toString()
+        )
+      );
+    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 remote.dialog.showMessageBox(
       remote.getCurrentWindow(),
@@ -85,26 +98,86 @@ ${showAll ? `Copyright © ${new Date().getFullYear()} Arduino SA` : ''}
     const other = moment(isoTime);
     let result = now.diff(other, 'minute');
     if (result < 60) {
-      return result === 1 ? `${result} minute ago` : `${result} minute ago`;
+      return result === 1
+        ? nls.localize(
+            'vscode/date/date.fromNow.minutes.singular.ago',
+            '{0} minute ago',
+            result.toString()
+          )
+        : nls.localize(
+            'vscode/date/date.fromNow.minutes.plural.ago',
+            '{0} minutes ago',
+            result.toString()
+          );
     }
     result = now.diff(other, 'hour');
     if (result < 25) {
-      return result === 1 ? `${result} hour ago` : `${result} hours ago`;
+      return result === 1
+        ? nls.localize(
+            'vscode/date/date.fromNow.hours.singular.ago',
+            '{0} hour ago',
+            result.toString()
+          )
+        : nls.localize(
+            'vscode/date/date.fromNow.hours.plural.ago',
+            '{0} hours ago',
+            result.toString()
+          );
     }
     result = now.diff(other, 'day');
     if (result < 8) {
-      return result === 1 ? `${result} day ago` : `${result} days ago`;
+      return result === 1
+        ? nls.localize(
+            'vscode/date/date.fromNow.days.singular.ago',
+            '{0} day ago',
+            result.toString()
+          )
+        : nls.localize(
+            'vscode/date/date.fromNow.days.plural.ago',
+            '{0} days ago',
+            result.toString()
+          );
     }
     result = now.diff(other, 'week');
     if (result < 5) {
-      return result === 1 ? `${result} week ago` : `${result} weeks ago`;
+      return result === 1
+        ? nls.localize(
+            'vscode/date/date.fromNow.weeks.singular.ago',
+            '{0} week ago',
+            result.toString()
+          )
+        : nls.localize(
+            'vscode/date/date.fromNow.weeks.plural.ago',
+            '{0} weeks ago',
+            result.toString()
+          );
     }
     result = now.diff(other, 'month');
     if (result < 13) {
-      return result === 1 ? `${result} month ago` : `${result} months ago`;
+      return result === 1
+        ? nls.localize(
+            'vscode/date/date.fromNow.months.singular.ago',
+            '{0} month ago',
+            result.toString()
+          )
+        : nls.localize(
+            'vscode/date/date.fromNow.months.plural.ago',
+            '{0} months ago',
+            result.toString()
+          );
     }
     result = now.diff(other, 'year');
-    return result === 1 ? `${result} year ago` : `${result} years ago`;
+    return result === 1
+      ? nls.localize(
+          'vscode/date/date.fromNow.years.singular.ago',
+          '{0} year ago',
+          result.toString()
+        )
+      : nls.localize(
+          'vscode/date/date.fromNow.years.plural.ago',
+          '{0} years ago',
+          result.toString()
+        );
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { inject, injectable } from 'inversify';
-import { remote } from 'electron';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import {
   SketchContribution,
@@ -9,6 +9,7 @@ import {
   URI,
 } from './contribution';
 import { FileDialogService } from '@theia/filesystem/lib/browser';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class AddFile extends SketchContribution {
@@ -24,7 +25,7 @@ export class AddFile extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.SKETCH__UTILS_GROUP, {
       commandId: AddFile.Commands.ADD_FILE.id,
-      label: 'Add File...',
+      label: nls.localize('arduino/contributions/addFile', 'Add File') + '...',
       order: '2',
     });
   }
@@ -35,7 +36,7 @@ export class AddFile extends SketchContribution {
       return;
     }
     const toAddUri = await this.fileDialogService.showOpenDialog({
-      title: 'Add File',
+      title: nls.localize('arduino/contributions/addFile', 'Add File'),
       canSelectFiles: true,
       canSelectFolders: false,
       canSelectMany: false,
@@ -50,9 +51,16 @@ export class AddFile extends SketchContribution {
     if (exists) {
       const { response } = await remote.dialog.showMessageBox({
         type: 'question',
-        title: 'Replace',
-        buttons: ['Cancel', 'OK'],
-        message: `Replace the existing version of ${filename}?`,
+        title: nls.localize('arduino/contributions/replaceTitle', 'Replace'),
+        buttons: [
+          nls.localize('vscode/issueMainService/cancel', 'Cancel'),
+          nls.localize('vscode/issueMainService/ok', 'OK'),
+        ],
+        message: nls.localize(
+          'arduino/replaceMsg',
+          'Replace the existing version of {0}?',
+          filename
+        ),
       });
       if (response === 0) {
         // Cancel
@@ -60,9 +68,15 @@ export class AddFile extends SketchContribution {
       }
     }
     await this.fileService.copy(toAddUri, targetUri, { overwrite: true });
-    this.messageService.info('One file added to the sketch.', {
-      timeout: 2000,
-    });
+    this.messageService.info(
+      nls.localize(
+        'arduino/contributions/fileAdded',
+        'One file added to the sketch.'
+      ),
+      {
+        timeout: 2000,
+      }
+    );
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { inject, injectable } from 'inversify';
-import { remote } from 'electron';
+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 { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
@@ -15,6 +15,7 @@ import {
   CommandRegistry,
   MenuModelRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class AddZipLibrary extends SketchContribution {
@@ -38,13 +39,9 @@ export class AddZipLibrary extends SketchContribution {
       ...ArduinoMenus.SKETCH__UTILS_GROUP,
       '0_include',
     ];
-    // TODO: do we need it? calling `registerSubmenu` multiple times is noop, so it does not hurt.
-    registry.registerSubmenu(includeLibMenuPath, 'Include Library', {
-      order: '1',
-    });
     registry.registerMenuAction([...includeLibMenuPath, '1_install'], {
       commandId: AddZipLibrary.Commands.ADD_ZIP_LIBRARY.id,
-      label: 'Add .ZIP Library...',
+      label: nls.localize('arduino/library/addZip', 'Add .ZIP Library...'),
       order: '1',
     });
   }
@@ -53,12 +50,15 @@ export class AddZipLibrary extends SketchContribution {
     const homeUri = await this.envVariableServer.getHomeDirUri();
     const defaultPath = await this.fileService.fsPath(new URI(homeUri));
     const { canceled, filePaths } = await remote.dialog.showOpenDialog({
-      title: "Select a zip file containing the library you'd like to add",
+      title: nls.localize(
+        'arduino/selectZip',
+        "Select a zip file containing the library you'd like to add"
+      ),
       defaultPath,
       properties: ['openFile'],
       filters: [
         {
-          name: 'Library',
+          name: nls.localize('arduino/library/zipLibrary', 'Library'),
           extensions: ['zip'],
         },
       ],
@@ -71,9 +71,12 @@ export class AddZipLibrary extends SketchContribution {
         if (error instanceof AlreadyInstalledError) {
           const result = await new ConfirmDialog({
             msg: error.message,
-            title: 'Do you want to overwrite the existing library?',
-            ok: 'Yes',
-            cancel: 'No',
+            title: nls.localize(
+              'arduino/library/overwriteExistingLibrary',
+              'Do you want to overwrite the existing library?'
+            ),
+            ok: nls.localize('vscode/extensionsUtils/yes', 'Yes'),
+            cancel: nls.localize('vscode/extensionsUtils/no', 'No'),
           }).open();
           if (result) {
             await this.doInstall(zipUri, true);
@@ -87,14 +90,18 @@ export class AddZipLibrary extends SketchContribution {
     try {
       await Installable.doWithProgress({
         messageService: this.messageService,
-        progressText: `Processing ${new URI(zipUri).path.base}`,
+        progressText:
+          nls.localize('arduino/common/processing', 'Processing') +
+          ` ${new URI(zipUri).path.base}`,
         responseService: this.responseService,
         run: () => this.libraryService.installZip({ zipUri, overwrite }),
       });
       this.messageService.info(
-        `Successfully installed library from ${
+        nls.localize(
+          'arduino/library/successfullyInstalledZipLibrary',
+          'Successfully installed library from {0} archive',
           new URI(zipUri).path.base
-        } archive`,
+        ),
         { timeout: 3000 }
       );
     } catch (error) {
@@ -104,12 +111,19 @@ export class AddZipLibrary extends SketchContribution {
           const name = match[1].trim();
           if (name) {
             throw new AlreadyInstalledError(
-              `A library folder named ${name} already exists. Do you want to overwrite it?`,
+              nls.localize(
+                'arduino/library/namedLibraryAlreadyExists',
+                'A library folder named {0} already exists. Do you want to overwrite it?',
+                name
+              ),
               name
             );
           } else {
             throw new AlreadyInstalledError(
-              'A library already exists. Do you want to overwrite it?'
+              nls.localize(
+                'arduino/library/libraryAlreadyExists',
+                'A library already exists. Do you want to overwrite it?'
+              )
             );
           }
         }

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

@@ -1,5 +1,5 @@
 import { injectable } from 'inversify';
-import { remote } from 'electron';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import * as dateFormat from 'dateformat';
 import URI from '@theia/core/lib/common/uri';
 import { ArduinoMenus } from '../menu/arduino-menus';
@@ -9,6 +9,7 @@ import {
   CommandRegistry,
   MenuModelRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class ArchiveSketch extends SketchContribution {
@@ -21,7 +22,7 @@ export class ArchiveSketch extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
       commandId: ArchiveSketch.Commands.ARCHIVE_SKETCH.id,
-      label: 'Archive Sketch',
+      label: nls.localize('arduino/sketch/archiveSketch', 'Archive Sketch'),
       order: '1',
     });
   }
@@ -42,7 +43,10 @@ export class ArchiveSketch extends SketchContribution {
       new URI(config.sketchDirUri).resolve(archiveBasename)
     );
     const { filePath, canceled } = await remote.dialog.showSaveDialog({
-      title: 'Save sketch folder as...',
+      title: nls.localize(
+        'arduino/sketch/saveSketchAs',
+        'Save sketch folder as...'
+      ),
       defaultPath,
     });
     if (!filePath || canceled) {
@@ -53,9 +57,16 @@ export class ArchiveSketch extends SketchContribution {
       return;
     }
     await this.sketchService.archive(sketch, destinationUri.toString());
-    this.messageService.info(`Created archive '${archiveBasename}'.`, {
-      timeout: 2000,
-    });
+    this.messageService.info(
+      nls.localize(
+        'arduino/sketch/createdArchive',
+        "Created archive '{0}'.",
+        archiveBasename
+      ),
+      {
+        timeout: 2000,
+      }
+    );
   }
 }
 

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

@@ -1,5 +1,5 @@
 import { inject, injectable } from 'inversify';
-import { remote } from 'electron';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { MenuModelRegistry } from '@theia/core/lib/common/menu';
 import {
   DisposableCollection,
@@ -23,6 +23,7 @@ import {
   Port,
 } from '../../common/protocol';
 import { SketchContribution, Command, CommandRegistry } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardSelection extends SketchContribution {
@@ -53,19 +54,29 @@ export class BoardSelection extends SketchContribution {
           this.boardsServiceProvider.boardsConfig;
         if (!selectedBoard) {
           this.messageService.info(
-            'Please select a board to obtain board info.'
+            nls.localize(
+              'arduino/board/selectBoardForInfo',
+              'Please select a board to obtain board info.'
+            )
           );
           return;
         }
         if (!selectedBoard.fqbn) {
           this.messageService.info(
-            `The platform for the selected '${selectedBoard.name}' board is not installed.`
+            nls.localize(
+              'arduino/board/platformMissing',
+              "The platform for the selected '{0}' board is not installed.",
+              selectedBoard.name
+            )
           );
           return;
         }
         if (!selectedPort) {
           this.messageService.info(
-            'Please select a port to obtain board info.'
+            nls.localize(
+              'arduino/board/selectPortForInfo',
+              'Please select a port to obtain board info.'
+            )
           );
           return;
         }
@@ -78,11 +89,11 @@ export class BoardSelection extends SketchContribution {
 VID: ${VID}
 PID: ${PID}`;
           await remote.dialog.showMessageBox(remote.getCurrentWindow(), {
-            message: 'Board Info',
-            title: 'Board Info',
+            message: nls.localize('arduino/board/boardInfo', 'Board Info'),
+            title: nls.localize('arduino/board/boardInfo', 'Board Info'),
             type: 'info',
             detail,
-            buttons: ['OK'],
+            buttons: [nls.localize('vscode/issueMainService/ok', 'OK')],
           });
         }
       },
@@ -99,6 +110,9 @@ PID: ${PID}`;
     this.boardsServiceProvider.onAvailableBoardsChanged(
       this.updateMenus.bind(this)
     );
+    this.boardsServiceProvider.onAvailablePortsChanged(
+      this.updateMenus.bind(this)
+    );
   }
 
   protected async updateMenus(): Promise<void> {
@@ -127,7 +141,11 @@ PID: ${PID}`;
     // The board specific items, and the rest, have order with `z`. We needed something between `0` and `z` with natural-order.
     this.menuModelRegistry.registerSubmenu(
       boardsSubmenuPath,
-      `Board${!!boardsSubmenuLabel ? `: "${boardsSubmenuLabel}"` : ''}`,
+      nls.localize(
+        'arduino/board/board',
+        'Board{0}',
+        !!boardsSubmenuLabel ? `: "${boardsSubmenuLabel}"` : ''
+      ),
       { order: '100' }
     );
     this.toDisposeBeforeMenuRebuild.push(
@@ -144,7 +162,11 @@ PID: ${PID}`;
     const portsSubmenuLabel = config.selectedPort?.address;
     this.menuModelRegistry.registerSubmenu(
       portsSubmenuPath,
-      `Port${!!portsSubmenuLabel ? `: "${portsSubmenuLabel}"` : ''}`,
+      nls.localize(
+        'arduino/board/port',
+        'Port{0}',
+        portsSubmenuLabel ? `: "${portsSubmenuLabel}"` : ''
+      ),
       { order: '101' }
     );
     this.toDisposeBeforeMenuRebuild.push(
@@ -155,7 +177,7 @@ PID: ${PID}`;
 
     const getBoardInfo = {
       commandId: BoardSelection.Commands.GET_BOARD_INFO.id,
-      label: 'Get Board Info',
+      label: nls.localize('arduino/board/getBoardInfo', 'Get Board Info'),
       order: '103',
     };
     this.menuModelRegistry.registerMenuAction(
@@ -173,7 +195,7 @@ PID: ${PID}`;
 
     this.menuModelRegistry.registerMenuAction(boardsManagerGroup, {
       commandId: `${BoardsListWidget.WIDGET_ID}:toggle`,
-      label: 'Boards Manager...',
+      label: `${BoardsListWidget.WIDGET_LABEL}...`,
     });
 
     // Installed boards
@@ -181,7 +203,11 @@ PID: ${PID}`;
       const { packageId, packageName, fqbn, name, manuallyInstalled } = board;
 
       const packageLabel =
-        packageName + `${manuallyInstalled ? ' (in Sketchbook)' : ''}`;
+        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.
@@ -223,19 +249,25 @@ PID: ${PID}`;
     }
 
     // Installed ports
-    const registerPorts = (ports: AvailablePorts) => {
-      const addresses = Object.keys(ports);
-      if (!addresses.length) {
+    const registerPorts = (
+      protocol: string,
+      protocolOrder: number,
+      ports: AvailablePorts
+    ) => {
+      const portIDs = Object.keys(ports);
+      if (!portIDs.length) {
         return;
       }
 
       // Register placeholder for protocol
-      const [port] = ports[addresses[0]];
-      const protocol = port.protocol;
-      const menuPath = [...portsSubmenuPath, protocol];
+      const menuPath = [
+        ...portsSubmenuPath,
+        `${protocolOrder.toString()}_${protocol}`,
+      ];
       const placeholder = new PlaceholderMenuNode(
         menuPath,
-        `${firstToUpperCase(port.protocol)} ports`
+        `${firstToUpperCase(protocol)} ports`,
+        { order: protocolOrder.toString() }
       );
       this.menuModelRegistry.registerMenuNode(menuPath, placeholder);
       this.toDisposeBeforeMenuRebuild.push(
@@ -244,63 +276,75 @@ PID: ${PID}`;
         )
       );
 
-      for (const address of addresses) {
-        if (!!ports[address]) {
-          const [port, boards] = ports[address];
-          if (!boards.length) {
-            boards.push({
-              name: '',
-            });
-          }
-          for (const { name, fqbn } of boards) {
-            const id = `arduino-select-port--${address}${
-              fqbn ? `--${fqbn}` : ''
-            }`;
-            const command = { id };
-            const handler = {
-              execute: () => {
-                if (
-                  !Port.equals(
-                    port,
-                    this.boardsServiceProvider.boardsConfig.selectedPort
-                  )
-                ) {
-                  this.boardsServiceProvider.boardsConfig = {
-                    selectedBoard:
-                      this.boardsServiceProvider.boardsConfig.selectedBoard,
-                    selectedPort: port,
-                  };
-                }
-              },
-              isToggled: () =>
-                Port.equals(
-                  port,
-                  this.boardsServiceProvider.boardsConfig.selectedPort
-                ),
-            };
-            const label = `${address}${name ? ` (${name})` : ''}`;
-            const menuAction = {
-              commandId: id,
-              label,
-              order: `1${label}`, // `1` comes after the placeholder which has order `0`
-            };
-            this.commandRegistry.registerCommand(command, handler);
-            this.toDisposeBeforeMenuRebuild.push(
-              Disposable.create(() =>
-                this.commandRegistry.unregisterCommand(command)
-              )
-            );
-            this.menuModelRegistry.registerMenuAction(menuPath, menuAction);
-          }
+      // 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.address}`;
+        if (boards.length) {
+          const boardsList = boards.map((board) => board.name).join(', ');
+          label = `${label} (${boardsList})`;
         }
+        const id = `arduino-select-port--${portID}`;
+        const command = { id };
+        const handler = {
+          execute: () => {
+            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,
+          label,
+          order: `${protocolOrder + i + 1}`,
+        };
+        this.commandRegistry.registerCommand(command, handler);
+        this.toDisposeBeforeMenuRebuild.push(
+          Disposable.create(() =>
+            this.commandRegistry.unregisterCommand(command)
+          )
+        );
+        this.menuModelRegistry.registerMenuAction(menuPath, menuAction);
       }
     };
 
-    const { serial, network, unknown } =
-      AvailablePorts.groupByProtocol(availablePorts);
-    registerPorts(serial);
-    registerPorts(network);
-    registerPorts(unknown);
+    const grouped = AvailablePorts.byProtocol(availablePorts);
+    let 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/burn-bootloader.ts

@@ -1,9 +1,9 @@
 import { inject, injectable } from 'inversify';
-import { OutputChannelManager } from '@theia/output/lib/common/output-channel';
+import { OutputChannelManager } from '@theia/output/lib/browser/output-channel';
 import { CoreService } from '../../common/protocol';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { BoardsDataStore } from '../boards/boards-data-store';
-import { MonitorConnection } from '../monitor/monitor-connection';
+import { SerialConnectionManager } from '../serial/serial-connection-manager';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import {
   SketchContribution,
@@ -11,14 +11,15 @@ import {
   CommandRegistry,
   MenuModelRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BurnBootloader extends SketchContribution {
   @inject(CoreService)
   protected readonly coreService: CoreService;
 
-  @inject(MonitorConnection)
-  protected readonly monitorConnection: MonitorConnection;
+  @inject(SerialConnectionManager)
+  protected readonly serialConnection: SerialConnectionManager;
 
   @inject(BoardsDataStore)
   protected readonly boardsDataStore: BoardsDataStore;
@@ -38,16 +39,15 @@ export class BurnBootloader extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP, {
       commandId: BurnBootloader.Commands.BURN_BOOTLOADER.id,
-      label: 'Burn Bootloader',
+      label: nls.localize(
+        'arduino/bootloader/burnBootloader',
+        'Burn Bootloader'
+      ),
       order: 'z99',
     });
   }
 
   async burnBootloader(): Promise<void> {
-    const monitorConfig = this.monitorConnection.monitorConfig;
-    if (monitorConfig) {
-      await this.monitorConnection.disconnect();
-    }
     try {
       const { boardsConfig } = this.boardsServiceClientImpl;
       const port = boardsConfig.selectedPort;
@@ -68,15 +68,25 @@ export class BurnBootloader extends SketchContribution {
         verify,
         verbose,
       });
-      this.messageService.info('Done burning bootloader.', {
-        timeout: 3000,
-      });
+      this.messageService.info(
+        nls.localize(
+          'arduino/bootloader/doneBurningBootloader',
+          'Done burning bootloader.'
+        ),
+        {
+          timeout: 3000,
+        }
+      );
     } catch (e) {
-      this.messageService.error(e.toString());
-    } finally {
-      if (monitorConfig) {
-        await this.monitorConnection.connect(monitorConfig);
+      let errorMessage = "";
+      if (typeof e === "string") {
+        errorMessage = e;
+      } else {
+        errorMessage = e.toString();
       }
+      this.messageService.error(errorMessage);
+    } finally {
+      await this.serialConnection.reconnectAfterUpload();
     }
   }
 }

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

@@ -1,6 +1,6 @@
 import { inject, injectable } from 'inversify';
 import { toArray } from '@phosphor/algorithm';
-import { remote } from 'electron';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
 import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
@@ -15,6 +15,7 @@ import {
   KeybindingRegistry,
   URI,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 /**
  * Closes the `current` closeable editor, or any closeable current widget from the main area, or the current sketch window.
@@ -64,10 +65,25 @@ export class Close extends SketchContribution {
         if (isTemp && (await this.wasTouched(uri))) {
           const { response } = await remote.dialog.showMessageBox({
             type: 'question',
-            buttons: ["Don't Save", 'Cancel', 'Save'],
-            message:
-              'Do you want to save changes to this sketch before closing?',
-            detail: "If you don't save, your changes will be lost.",
+            buttons: [
+              nls.localize(
+                'vscode/abstractTaskService/saveBeforeRun.dontSave',
+                "Don't Save"
+              ),
+              nls.localize('vscode/issueMainService/cancel', 'Cancel'),
+              nls.localize(
+                'vscode/abstractTaskService/saveBeforeRun.save',
+                'Save'
+              ),
+            ],
+            message: nls.localize(
+              'arduino/common/saveChangesToSketch',
+              'Do you want to save changes to this sketch before closing?'
+            ),
+            detail: nls.localize(
+              'arduino/common/loseChanges',
+              "If you don't save, your changes will be lost."
+            ),
           });
           if (response === 1) {
             // Cancel
@@ -93,7 +109,7 @@ export class Close extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
       commandId: Close.Commands.CLOSE.id,
-      label: 'Close',
+      label: nls.localize('vscode/editor.contribution/close', 'Close'),
       order: '5',
     });
   }

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

@@ -9,7 +9,7 @@ import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
 import { MessageService } from '@theia/core/lib/common/message-service';
 import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
 import { open, OpenerService } from '@theia/core/lib/browser/opener-service';
-import { OutputChannelManager } from '@theia/output/lib/common/output-channel';
+import { OutputChannelManager } from '@theia/output/lib/browser/output-channel';
 import {
   MenuModelRegistry,
   MenuContribution,
@@ -33,7 +33,7 @@ import {
   CommandService,
 } from '@theia/core/lib/common/command';
 import { EditorMode } from '../editor-mode';
-import { SettingsService } from '../settings';
+import { SettingsService } from '../dialogs/settings/settings';
 import { SketchesServiceClientImpl } from '../../common/protocol/sketches-service-client-impl';
 import {
   SketchesService,

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

@@ -12,6 +12,7 @@ import {
   SketchContribution,
   TabBarToolbarRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class Debug extends SketchContribution {
@@ -33,7 +34,10 @@ export class Debug extends SketchContribution {
   /**
    * If `undefined`, debugging is enabled. Otherwise, the reason why it's disabled.
    */
-  protected _disabledMessages?: string = 'No board selected'; // Initial pessimism.
+  protected _disabledMessages?: string = nls.localize(
+    'arduino/common/noBoardSelected',
+    'No board selected'
+  ); // Initial pessimism.
   protected disabledMessageDidChangeEmitter = new Emitter<string | undefined>();
   protected onDisabledMessageDidChange =
     this.disabledMessageDidChangeEmitter.event;
@@ -51,8 +55,12 @@ export class Debug extends SketchContribution {
     command: Debug.Commands.START_DEBUGGING.id,
     tooltip: `${
       this.disabledMessage
-        ? `Debug - ${this.disabledMessage}`
-        : 'Start Debugging'
+        ? nls.localize(
+            'arduino/debug/debugWithMessage',
+            'Debug - {0}',
+            this.disabledMessage
+          )
+        : Debug.Commands.START_DEBUGGING.label
     }`,
     priority: 3,
     onDidChange: this.onDisabledMessageDidChange as Event<void>,
@@ -63,8 +71,12 @@ export class Debug extends SketchContribution {
       () =>
         (this.debugToolbarItem.tooltip = `${
           this.disabledMessage
-            ? `Debug - ${this.disabledMessage}`
-            : 'Start Debugging'
+            ? nls.localize(
+                'arduino/debug/debugWithMessage',
+                'Debug - {0}',
+                this.disabledMessage
+              )
+            : Debug.Commands.START_DEBUGGING.label
         }`)
     );
     const refreshState = async (
@@ -72,22 +84,37 @@ export class Debug extends SketchContribution {
         .selectedBoard
     ) => {
       if (!board) {
-        this.disabledMessage = 'No board selected';
+        this.disabledMessage = nls.localize(
+          'arduino/common/noBoardSelected',
+          'No board selected'
+        );
         return;
       }
       const fqbn = board.fqbn;
       if (!fqbn) {
-        this.disabledMessage = `Platform is not installed for '${board.name}'`;
+        this.disabledMessage = nls.localize(
+          'arduino/debug/noPlatformInstalledFor',
+          "Platform is not installed for '{0}'",
+          board.name
+        );
         return;
       }
       const details = await this.boardService.getBoardDetails({ fqbn });
       if (!details) {
-        this.disabledMessage = `Platform is not installed for '${board.name}'`;
+        this.disabledMessage = nls.localize(
+          'arduino/debug/noPlatformInstalledFor',
+          "Platform is not installed for '{0}'",
+          board.name
+        );
         return;
       }
       const { debuggingSupported } = details;
       if (!debuggingSupported) {
-        this.disabledMessage = `Debugging is not supported by '${board.name}'`;
+        this.disabledMessage = nls.localize(
+          'arduino/debug/debuggingNotSupported',
+          "Debugging is not supported by '{0}'",
+          board.name
+        );
       } else {
         this.disabledMessage = undefined;
       }
@@ -155,10 +182,13 @@ export class Debug extends SketchContribution {
 
 export namespace Debug {
   export namespace Commands {
-    export const START_DEBUGGING: Command = {
-      id: 'arduino-start-debug',
-      label: 'Start Debugging',
-      category: 'Arduino',
-    };
+    export const START_DEBUGGING = Command.toLocalizedCommand(
+      {
+        id: 'arduino-start-debug',
+        label: 'Start Debugging',
+        category: 'Arduino',
+      },
+      'vscode/debug.contribution/startDebuggingHelp'
+    );
   }
 }

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

@@ -11,6 +11,7 @@ import {
   CommandRegistry,
 } from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
+import { nls } from '@theia/core/lib/common';
 
 // TODO: [macOS]: to remove `Start Dictation...` and `Emoji & Symbol` see this thread: https://github.com/electron/electron/issues/8283#issuecomment-269522072
 // Depends on https://github.com/eclipse-theia/theia/pull/7964
@@ -42,10 +43,10 @@ export class EditContributions extends Contribution {
       execute: () => this.run('actions.find'),
     });
     registry.registerCommand(EditContributions.Commands.FIND_NEXT, {
-      execute: () => this.run('actions.findWithSelection'),
+      execute: () => this.run('editor.action.nextMatchFindAction'),
     });
     registry.registerCommand(EditContributions.Commands.FIND_PREVIOUS, {
-      execute: () => this.run('editor.action.nextMatchFindAction'),
+      execute: () => this.run('editor.action.previousMatchFindAction'),
     });
     registry.registerCommand(EditContributions.Commands.USE_FOR_FIND, {
       execute: () => this.run('editor.action.previousSelectionMatchFindAction'),
@@ -101,7 +102,10 @@ ${value}
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
       commandId: EditContributions.Commands.COPY_FOR_FORUM.id,
-      label: 'Copy for Forum (Markdown)',
+      label: nls.localize(
+        'arduino/editor/copyForForum',
+        'Copy for Forum (Markdown)'
+      ),
       order: '2',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
@@ -114,62 +118,83 @@ ${value}
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
       commandId: EditContributions.Commands.GO_TO_LINE.id,
-      label: 'Go to Line...',
+      label: nls.localize(
+        'vscode/standaloneStrings/gotoLineActionLabel',
+        'Go to Line...'
+      ),
       order: '5',
     });
 
     registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
       commandId: EditContributions.Commands.TOGGLE_COMMENT.id,
-      label: 'Comment/Uncomment',
+      label: nls.localize(
+        'arduino/editor/commentUncomment',
+        'Comment/Uncomment'
+      ),
       order: '0',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
       commandId: EditContributions.Commands.INDENT_LINES.id,
-      label: 'Increase Indent',
+      label: nls.localize('arduino/editor/increaseIndent', 'Increase Indent'),
       order: '1',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
       commandId: EditContributions.Commands.OUTDENT_LINES.id,
-      label: 'Decrease Indent',
+      label: nls.localize('arduino/editor/decreaseIndent', 'Decrease Indent'),
       order: '2',
     });
 
     registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
       commandId: EditContributions.Commands.INCREASE_FONT_SIZE.id,
-      label: 'Increase Font Size',
+      label: nls.localize(
+        'arduino/editor/increaseFontSize',
+        'Increase Font Size'
+      ),
       order: '0',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
       commandId: EditContributions.Commands.DECREASE_FONT_SIZE.id,
-      label: 'Decrease Font Size',
+      label: nls.localize(
+        'arduino/editor/decreaseFontSize',
+        'Decrease Font Size'
+      ),
       order: '1',
     });
 
     registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
       commandId: EditContributions.Commands.FIND.id,
-      label: 'Find',
+      label: nls.localize('vscode/findController/startFindAction', 'Find'),
       order: '0',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
       commandId: EditContributions.Commands.FIND_NEXT.id,
-      label: 'Find Next',
+      label: nls.localize(
+        'vscode/findController/findNextMatchAction',
+        'Find Next'
+      ),
       order: '1',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
       commandId: EditContributions.Commands.FIND_PREVIOUS.id,
-      label: 'Find Previous',
+      label: nls.localize(
+        'vscode/findController/findPreviousMatchAction',
+        'Find Previous'
+      ),
       order: '2',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
       commandId: EditContributions.Commands.USE_FOR_FIND.id,
-      label: 'Use Selection for Find', // XXX: The Java IDE uses `Use Selection For Find`.
+      label: nls.localize(
+        'vscode/findController/startFindWithSelectionAction',
+        'Use Selection for Find'
+      ), // XXX: The Java IDE uses `Use Selection For Find`.
       order: '3',
     });
 
     // `Tools`
     registry.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
       commandId: EditContributions.Commands.AUTO_FORMAT.id,
-      label: 'Auto Format', // XXX: The Java IDE uses `Use Selection For Find`.
+      label: nls.localize('arduino/editor/autoFormat', 'Auto Format'), // XXX: The Java IDE uses `Use Selection For Find`.
       order: '0',
     });
   }

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

@@ -22,6 +22,7 @@ import {
 } from './contribution';
 import { NotificationCenter } from '../notification-center';
 import { Board, Sketch, SketchContainer } from '../../common/protocol';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export abstract class Examples extends SketchContribution {
@@ -69,9 +70,13 @@ export abstract class Examples extends SketchContribution {
     }
     // Registering the same submenu multiple times has no side-effect.
     // TODO: unregister submenu? https://github.com/eclipse-theia/theia/issues/7300
-    registry.registerSubmenu(ArduinoMenus.FILE__EXAMPLES_SUBMENU, 'Examples', {
-      order: '4',
-    });
+    registry.registerSubmenu(
+      ArduinoMenus.FILE__EXAMPLES_SUBMENU,
+      nls.localize('arduino/examples/menu', 'Examples'),
+      {
+        order: '4',
+      }
+    );
   }
 
   registerRecursively(
@@ -166,11 +171,19 @@ export class BuiltInExamples extends Examples {
       sketchContainers = await this.examplesService.builtIns();
     } catch (e) {
       console.error('Could not initialize built-in examples.', e);
-      this.messageService.error('Could not initialize built-in examples.');
+      this.messageService.error(
+        nls.localize(
+          'arduino/examples/couldNotInitializeExamples',
+          'Could not initialize built-in examples.'
+        )
+      );
       return;
     }
     this.toDispose.dispose();
-    for (const container of ['Built-in examples', ...sketchContainers]) {
+    for (const container of [
+      nls.localize('arduino/examples/builtInExamples', 'Built-in examples'),
+      ...sketchContainers,
+    ]) {
       this.registerRecursively(
         container,
         ArduinoMenus.EXAMPLES__BUILT_IN_GROUP,
@@ -211,13 +224,22 @@ export class LibraryExamples extends Examples {
         fqbn,
       });
       if (user.length) {
-        (user as any).unshift('Examples from Custom Libraries');
+        (user as any).unshift(
+          nls.localize(
+            'arduino/examples/customLibrary',
+            'Examples from Custom Libraries'
+          )
+        );
       }
       if (name && fqbn && current.length) {
-        (current as any).unshift(`Examples for ${name}`);
+        (current as any).unshift(
+          nls.localize('arduino/examples/for', 'Examples for {0}', name)
+        );
       }
       if (any.length) {
-        (any as any).unshift('Examples for any board');
+        (any as any).unshift(
+          nls.localize('arduino/examples/forAny', 'Examples for any board')
+        );
       }
       for (const container of user) {
         this.registerRecursively(

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

@@ -12,6 +12,9 @@ import {
   CommandRegistry,
   KeybindingRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
+import { IDEUpdaterCommands } from '../ide-updater/ide-updater-commands';
+import { ElectronCommands } from '@theia/core/lib/electron-browser/menu/electron-menu-contribution';
 
 @injectable()
 export class Help extends Contribution {
@@ -61,8 +64,8 @@ export class Help extends Contribution {
         }
         if (!searchFor) {
           searchFor = await this.quickInputService.input({
-            prompt: 'Search on Arduino.cc',
-            placeHolder: 'Type a keyword',
+            prompt: nls.localize('arduino/help/search', 'Search on Arduino.cc'),
+            placeHolder: nls.localize('arduino/help/keyword', 'Type a keyword'),
           });
         }
         if (searchFor) {
@@ -82,9 +85,17 @@ export class Help extends Contribution {
       Help.Commands.VISIT_ARDUINO,
       createOpenHandler('https://www.arduino.cc/')
     );
+    registry.registerCommand(
+      Help.Commands.PRIVACY_POLICY,
+      createOpenHandler('https://www.arduino.cc/en/privacy-policy')
+    );
   }
 
   registerMenus(registry: MenuModelRegistry): void {
+    registry.unregisterMenuAction({
+      commandId: ElectronCommands.TOGGLE_DEVELOPER_TOOLS.id,
+    });
+
     registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
       commandId: Help.Commands.GETTING_STARTED.id,
       order: '0',
@@ -114,6 +125,14 @@ export class Help extends Contribution {
       commandId: Help.Commands.VISIT_ARDUINO.id,
       order: '6',
     });
+    registry.registerMenuAction(ArduinoMenus.HELP__FIND_GROUP, {
+      commandId: Help.Commands.PRIVACY_POLICY.id,
+      order: '7',
+    });
+    registry.registerMenuAction(ArduinoMenus.HELP__FIND_GROUP, {
+      commandId: IDEUpdaterCommands.CHECK_FOR_UPDATES.id,
+      order: '8',
+    });
   }
 
   registerKeybindings(registry: KeybindingRegistry): void {
@@ -128,37 +147,42 @@ export namespace Help {
   export namespace Commands {
     export const GETTING_STARTED: Command = {
       id: 'arduino-getting-started',
-      label: 'Getting Started',
+      label: nls.localize('arduino/help/gettingStarted', 'Getting Started'),
       category: 'Arduino',
     };
     export const ENVIRONMENT: Command = {
       id: 'arduino-environment',
-      label: 'Environment',
+      label: nls.localize('arduino/help/environment', 'Environment'),
       category: 'Arduino',
     };
     export const TROUBLESHOOTING: Command = {
       id: 'arduino-troubleshooting',
-      label: 'Troubleshooting',
+      label: nls.localize('arduino/help/troubleshooting', 'Troubleshooting'),
       category: 'Arduino',
     };
     export const REFERENCE: Command = {
       id: 'arduino-reference',
-      label: 'Reference',
+      label: nls.localize('arduino/help/reference', 'Reference'),
       category: 'Arduino',
     };
     export const FIND_IN_REFERENCE: Command = {
       id: 'arduino-find-in-reference',
-      label: 'Find in Reference',
+      label: nls.localize('arduino/help/findInReference', 'Find in Reference'),
       category: 'Arduino',
     };
     export const FAQ: Command = {
       id: 'arduino-faq',
-      label: 'Frequently Asked Questions',
+      label: nls.localize('arduino/help/faq', 'Frequently Asked Questions'),
       category: 'Arduino',
     };
     export const VISIT_ARDUINO: Command = {
       id: 'arduino-visit-arduino',
-      label: 'Visit Arduino.cc',
+      label: nls.localize('arduino/help/visit', 'Visit Arduino.cc'),
+      category: 'Arduino',
+    };
+    export const PRIVACY_POLICY: Command = {
+      id: 'arduino-privacy-policy',
+      label: nls.localize('arduino/help/privacyPolicy', 'Privacy Policy'),
       category: 'Arduino',
     };
   }

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

@@ -15,6 +15,7 @@ import { LibraryListWidget } from '../library/library-list-widget';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import { SketchContribution, Command, CommandRegistry } from './contribution';
 import { NotificationCenter } from '../notification-center';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class IncludeLibrary extends SketchContribution {
@@ -59,13 +60,20 @@ export class IncludeLibrary extends SketchContribution {
       ...ArduinoMenus.SKETCH__UTILS_GROUP,
       '0_include',
     ];
-    registry.registerSubmenu(includeLibMenuPath, 'Include Library', {
-      order: '1',
-    });
+    registry.registerSubmenu(
+      includeLibMenuPath,
+      nls.localize('arduino/library/include', 'Include Library'),
+      {
+        order: '1',
+      }
+    );
     // `Manage Libraries...` group.
     registry.registerMenuAction([...includeLibMenuPath, '0_manage'], {
       commandId: `${LibraryListWidget.WIDGET_ID}:toggle`,
-      label: 'Manage Libraries...',
+      label: nls.localize(
+        'arduino/library/manageLibraries',
+        'Manage Libraries...'
+      ),
     });
   }
 
@@ -101,10 +109,17 @@ export class IncludeLibrary extends SketchContribution {
       const userMenuPath = [...includeLibMenuPath, '3_contributed'];
       const { user, rest } = LibraryPackage.groupByLocation(libraries);
       if (rest.length) {
-        (rest as any).unshift('Arduino libraries');
+        (rest as any).unshift(
+          nls.localize('arduino/library/arduinoLibraries', 'Arduino libraries')
+        );
       }
       if (user.length) {
-        (user as any).unshift('Contributed libraries');
+        (user as any).unshift(
+          nls.localize(
+            'arduino/library/contributedLibraries',
+            'Contributed libraries'
+          )
+        );
       }
 
       for (const library of user) {

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

@@ -1,3 +1,4 @@
+import { nls } from '@theia/core/lib/common';
 import { injectable } from 'inversify';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
@@ -27,7 +28,7 @@ export class NewSketch extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
       commandId: NewSketch.Commands.NEW_SKETCH.id,
-      label: 'New',
+      label: nls.localize('arduino/sketch/new', 'New'),
       order: '0',
     });
   }
@@ -43,7 +44,7 @@ export class NewSketch extends SketchContribution {
     registry.registerItem({
       id: NewSketch.Commands.NEW_SKETCH__TOOLBAR.id,
       command: NewSketch.Commands.NEW_SKETCH__TOOLBAR.id,
-      tooltip: 'New',
+      tooltip: nls.localize('arduino/sketch/new', 'New'),
       priority: 3,
     });
   }

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

@@ -14,6 +14,7 @@ import { ArduinoMenus } from '../menu/arduino-menus';
 import { MainMenuManager } from '../../common/main-menu-manager';
 import { OpenSketch } from './open-sketch';
 import { NotificationCenter } from '../notification-center';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class OpenRecentSketch extends SketchContribution {
@@ -48,7 +49,7 @@ export class OpenRecentSketch extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerSubmenu(
       ArduinoMenus.FILE__OPEN_RECENT_SUBMENU,
-      'Open Recent',
+      nls.localize('arduino/sketch/openRecent', 'Open Recent'),
       { order: '2' }
     );
   }

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

@@ -1,5 +1,5 @@
 import { injectable } from 'inversify';
-import { remote } from 'electron';
+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 {
@@ -9,6 +9,7 @@ import {
   MenuModelRegistry,
   KeybindingRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class OpenSketchExternal extends SketchContribution {
@@ -21,7 +22,7 @@ export class OpenSketchExternal extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.SKETCH__UTILS_GROUP, {
       commandId: OpenSketchExternal.Commands.OPEN_EXTERNAL.id,
-      label: 'Show Sketch Folder',
+      label: nls.localize('arduino/sketch/showFolder', 'Show Sketch Folder'),
       order: '0',
     });
   }
@@ -36,7 +37,7 @@ export class OpenSketchExternal extends SketchContribution {
   protected async openExternal(): Promise<void> {
     const uri = await this.sketchServiceClient.currentSketchFile();
     if (uri) {
-      const exists = this.fileService.exists(new URI(uri));
+      const exists = await this.fileService.exists(new URI(uri));
       if (exists) {
         const fsPath = await this.fileService.fsPath(new URI(uri));
         if (fsPath) {

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

@@ -1,5 +1,5 @@
 import { inject, injectable } from 'inversify';
-import { remote } from 'electron';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { MaybePromise } from '@theia/core/lib/common/types';
 import { Widget, ContextMenuRenderer } from '@theia/core/lib/browser';
 import {
@@ -22,6 +22,7 @@ import { ExamplesService } from '../../common/protocol/examples-service';
 import { BuiltInExamples } from './examples';
 import { Sketchbook } from './sketchbook';
 import { SketchContainer } from '../../common/protocol';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class OpenSketch extends SketchContribution {
@@ -70,7 +71,10 @@ export class OpenSketch extends SketchContribution {
             ArduinoMenus.OPEN_SKETCH__CONTEXT__OPEN_GROUP,
             {
               commandId: OpenSketch.Commands.OPEN_SKETCH.id,
-              label: 'Open...',
+              label: nls.localize(
+                'vscode/workspaceActions/openFileFolder',
+                'Open...'
+              ),
             }
           );
           this.toDispose.push(
@@ -115,7 +119,7 @@ export class OpenSketch extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
       commandId: OpenSketch.Commands.OPEN_SKETCH.id,
-      label: 'Open...',
+      label: nls.localize('vscode/workspaceActions/openFileFolder', 'Open...'),
       order: '1',
     });
   }
@@ -131,7 +135,7 @@ export class OpenSketch extends SketchContribution {
     registry.registerItem({
       id: OpenSketch.Commands.OPEN_SKETCH__TOOLBAR.id,
       command: OpenSketch.Commands.OPEN_SKETCH__TOOLBAR.id,
-      tooltip: 'Open',
+      tooltip: nls.localize('vscode/dialogMainService/open', 'Open'),
       priority: 4,
     });
   }
@@ -155,7 +159,7 @@ export class OpenSketch extends SketchContribution {
       properties: ['createDirectory', 'openFile'],
       filters: [
         {
-          name: 'Sketch',
+          name: nls.localize('arduino/sketch/sketch', 'Sketch'),
           extensions: ['ino', 'pde'],
         },
       ],
@@ -178,10 +182,18 @@ export class OpenSketch extends SketchContribution {
       const name = new URI(sketchFileUri).path.name;
       const nameWithExt = this.labelProvider.getName(new URI(sketchFileUri));
       const { response } = await remote.dialog.showMessageBox({
-        title: 'Moving',
+        title: nls.localize('arduino/sketch/moving', 'Moving'),
         type: 'question',
-        buttons: ['Cancel', 'OK'],
-        message: `The file "${nameWithExt}" needs to be inside a sketch folder named as "${name}".\nCreate this folder, move the file, and continue?`,
+        buttons: [
+          nls.localize('vscode/issueMainService/cancel', 'Cancel'),
+          nls.localize('vscode/issueMainService/ok', 'OK'),
+        ],
+        message: nls.localize(
+          'arduino/sketch/movingMsg',
+          'The file "{0}" needs to be inside a sketch folder named "{1}".\nCreate this folder, move the file, and continue?',
+          nameWithExt,
+          name
+        ),
       });
       if (response === 1) {
         // OK
@@ -190,8 +202,12 @@ export class OpenSketch extends SketchContribution {
         if (exists) {
           await remote.dialog.showMessageBox({
             type: 'error',
-            title: 'Error',
-            message: `A folder named "${name}" already exists. Can't open sketch.`,
+            title: nls.localize('vscode/dialog/dialogErrorMessage', 'Error'),
+            message: nls.localize(
+              'arduino/sketch/cantOpen',
+              'A folder named "{0}" already exists. Can\'t open sketch.',
+              name
+            ),
           });
           return undefined;
         }

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

@@ -1,5 +1,5 @@
 import { injectable } from 'inversify';
-import { remote } from 'electron';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import { isOSX } from '@theia/core/lib/common/os';
 import {
   Contribution,
@@ -9,6 +9,7 @@ import {
   CommandRegistry,
 } from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class QuitApp extends Contribution {
@@ -25,7 +26,7 @@ export class QuitApp extends Contribution {
     if (!isOSX) {
       registry.registerMenuAction(ArduinoMenus.FILE__QUIT_GROUP, {
         commandId: QuitApp.Commands.QUIT_APP.id,
-        label: 'Quit',
+        label: nls.localize('vscode/bulkEditService/quit', 'Quit'),
         order: '0',
       });
     }

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

@@ -1,5 +1,5 @@
 import { injectable } from 'inversify';
-import { remote } from 'electron';
+import * as remote from '@theia/core/electron-shared/@electron/remote';
 import * as dateFormat from 'dateformat';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import {
@@ -10,6 +10,7 @@ import {
   MenuModelRegistry,
   KeybindingRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class SaveAsSketch extends SketchContribution {
@@ -22,7 +23,7 @@ export class SaveAsSketch extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
       commandId: SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
-      label: 'Save As...',
+      label: nls.localize('vscode/fileCommands/saveAs', 'Save As...'),
       order: '7',
     });
   }
@@ -73,7 +74,10 @@ export class SaveAsSketch extends SketchContribution {
       : sketchDirUri.resolve(sketch.name);
     const defaultPath = await this.fileService.fsPath(defaultUri);
     const { filePath, canceled } = await remote.dialog.showSaveDialog({
-      title: 'Save sketch folder as...',
+      title: nls.localize(
+        'arduino/sketch/saveFolderAs',
+        'Save sketch folder as...'
+      ),
       defaultPath,
     });
     if (!filePath || canceled) {

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

@@ -2,6 +2,7 @@ import { injectable } from 'inversify';
 import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
+import { SaveAsSketch } from './save-as-sketch';
 import {
   SketchContribution,
   Command,
@@ -10,6 +11,7 @@ import {
   KeybindingRegistry,
   TabBarToolbarRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class SaveSketch extends SketchContribution {
@@ -28,7 +30,7 @@ export class SaveSketch extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
       commandId: SaveSketch.Commands.SAVE_SKETCH.id,
-      label: 'Save',
+      label: nls.localize('vscode/fileCommands/save', 'Save'),
       order: '6',
     });
   }
@@ -44,12 +46,28 @@ export class SaveSketch extends SketchContribution {
     registry.registerItem({
       id: SaveSketch.Commands.SAVE_SKETCH__TOOLBAR.id,
       command: SaveSketch.Commands.SAVE_SKETCH__TOOLBAR.id,
-      tooltip: 'Save',
+      tooltip: nls.localize('vscode/fileCommands/save', 'Save'),
       priority: 5,
     });
   }
 
   async saveSketch(): Promise<void> {
+    const sketch = await this.sketchServiceClient.currentSketch();
+    if (!sketch) {
+      return;
+    }
+    const isTemp = await this.sketchService.isTemp(sketch);
+    if (isTemp) {
+      return this.commandService.executeCommand(
+        SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
+        {
+          execOnlyIfTemp: false,
+          openAfterMove: true,
+          wipeOriginal: true,
+        }
+      );
+    }
+
     return this.commandService.executeCommand(CommonCommands.SAVE_ALL.id);
   }
 }

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

@@ -7,7 +7,9 @@ import {
   KeybindingRegistry,
 } from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { Settings as Preferences, SettingsDialog } from '../settings';
+import { Settings as Preferences } from '../dialogs/settings/settings';
+import { SettingsDialog } from '../dialogs/settings/settings-dialog';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class Settings extends SketchContribution {
@@ -40,7 +42,11 @@ export class Settings extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__PREFERENCES_GROUP, {
       commandId: Settings.Commands.OPEN.id,
-      label: 'Preferences...',
+      label:
+        nls.localize(
+          'vscode/preferences.contribution/preferences',
+          'Preferences'
+        ) + '...',
       order: '0',
     });
     registry.registerSubmenu(ArduinoMenus.FILE__ADVANCED_SUBMENU, 'Advanced');
@@ -58,7 +64,11 @@ export namespace Settings {
   export namespace Commands {
     export const OPEN: Command = {
       id: 'arduino-settings-open',
-      label: 'Open Preferences...',
+      label:
+        nls.localize(
+          'vscode/preferences.contribution/openSettings2',
+          'Open Preferences'
+        ) + '...',
       category: 'Arduino',
     };
   }

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

@@ -21,6 +21,7 @@ import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
 import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
 import { SketchesServiceClientImpl } from '../../common/protocol/sketches-service-client-impl';
 import { LocalCacheFsProvider } from '../local-cache/local-cache-fs-provider';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class SketchControl extends SketchContribution {
@@ -93,7 +94,7 @@ export class SketchControl extends SketchContribution {
               ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
               {
                 commandId: WorkspaceCommands.FILE_RENAME.id,
-                label: 'Rename',
+                label: nls.localize('vscode/fileActions/rename', 'Rename'),
                 order: '1',
               }
             );
@@ -107,7 +108,7 @@ export class SketchControl extends SketchContribution {
           } else {
             const renamePlaceholder = new PlaceholderMenuNode(
               ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
-              'Rename'
+              nls.localize('vscode/fileActions/rename', 'Rename')
             );
             this.menuRegistry.registerMenuNode(
               ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
@@ -130,7 +131,7 @@ export class SketchControl extends SketchContribution {
               ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
               {
                 commandId: WorkspaceCommands.FILE_DELETE.id, // TODO: customize delete. Wipe sketch if deleting main file. Close window.
-                label: 'Delete',
+                label: nls.localize('vscode/fileActions/delete', 'Delete'),
                 order: '2',
               }
             );
@@ -144,7 +145,7 @@ export class SketchControl extends SketchContribution {
           } else {
             const deletePlaceholder = new PlaceholderMenuNode(
               ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
-              'Delete'
+              nls.localize('vscode/fileActions/delete', 'Delete')
             );
             this.menuRegistry.registerMenuNode(
               ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
@@ -204,7 +205,7 @@ export class SketchControl extends SketchContribution {
       ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
       {
         commandId: WorkspaceCommands.NEW_FILE.id,
-        label: 'New Tab',
+        label: nls.localize('vscode/menubar/mNewTab', 'New Tab'),
         order: '0',
       }
     );
@@ -213,7 +214,7 @@ export class SketchControl extends SketchContribution {
       ArduinoMenus.SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP,
       {
         commandId: CommonCommands.PREVIOUS_TAB.id,
-        label: 'Previous Tab',
+        label: nls.localize('vscode/menubar/mShowPreviousTab', 'Previous Tab'),
         order: '0',
       }
     );
@@ -221,7 +222,7 @@ export class SketchControl extends SketchContribution {
       ArduinoMenus.SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP,
       {
         commandId: CommonCommands.NEXT_TAB.id,
-        label: 'Next Tab',
+        label: nls.localize('vscode/menubar/mShowNextTab', 'Next Tab'),
         order: '0',
       }
     );

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

@@ -7,6 +7,7 @@ import { NotificationCenter } from '../notification-center';
 import { Examples } from './examples';
 import { SketchContainer } from '../../common/protocol';
 import { OpenSketch } from './open-sketch';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class Sketchbook extends Examples {
@@ -38,7 +39,7 @@ export class Sketchbook extends Examples {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerSubmenu(
       ArduinoMenus.FILE__SKETCHBOOK_SUBMENU,
-      'Sketchbook',
+      nls.localize('arduino/sketch/sketchbook', 'Sketchbook'),
       { order: '3' }
     );
   }

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

@@ -18,6 +18,7 @@ import {
   certificateList,
 } from '../dialogs/certificate-uploader/utils';
 import { ArduinoFirmwareUploader } from '../../common/protocol/arduino-firmware-uploader';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class UploadCertificate extends Contribution {
@@ -111,25 +112,28 @@ export namespace UploadCertificate {
   export namespace Commands {
     export const OPEN: Command = {
       id: 'arduino-upload-certificate-open',
-      label: 'Upload SSL Root Certificates',
+      label: nls.localize(
+        'arduino/certificate/uploadRootCertificates',
+        'Upload SSL Root Certificates'
+      ),
       category: 'Arduino',
     };
 
     export const OPEN_CERT_CONTEXT: Command = {
       id: 'arduino-certificate-open-context',
-      label: 'Open context',
+      label: nls.localize('arduino/certificate/openContext', 'Open context'),
       category: 'Arduino',
     };
 
     export const REMOVE_CERT: Command = {
       id: 'arduino-certificate-remove',
-      label: 'Remove',
+      label: nls.localize('arduino/certificate/remove', 'Remove'),
       category: 'Arduino',
     };
 
     export const UPLOAD_CERT: Command = {
       id: 'arduino-certificate-upload',
-      label: 'Upload',
+      label: nls.localize('arduino/certificate/upload', 'Upload'),
       category: 'Arduino',
     };
   }

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

@@ -7,6 +7,7 @@ import {
 } from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { UploadFirmwareDialog } from '../dialogs/firmware-uploader/firmware-uploader-dialog';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class UploadFirmware extends Contribution {
@@ -42,7 +43,10 @@ export namespace UploadFirmware {
   export namespace Commands {
     export const OPEN: Command = {
       id: 'arduino-upload-firmware-open',
-      label: 'WiFi101 /  WiFiNINA Firmware Updater',
+      label: nls.localize(
+        'arduino/firmware/updater',
+        'WiFi101 / WiFiNINA Firmware Updater'
+      ),
       category: 'Arduino',
     };
   }

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

@@ -1,10 +1,10 @@
-import { inject, injectable } from 'inversify';
+import { inject, injectable, postConstruct } from 'inversify';
 import { Emitter } from '@theia/core/lib/common/event';
-import { CoreService } from '../../common/protocol';
-import { ArduinoMenus } from '../menu/arduino-menus';
+import { BoardUserField, CoreService } from '../../common/protocol';
+import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
 import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
 import { BoardsDataStore } from '../boards/boards-data-store';
-import { MonitorConnection } from '../monitor/monitor-connection';
+import { SerialConnectionManager } from '../serial/serial-connection-manager';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 import {
   SketchContribution,
@@ -14,14 +14,19 @@ import {
   KeybindingRegistry,
   TabBarToolbarRegistry,
 } from './contribution';
+import { UserFieldsDialog } from '../dialogs/user-fields/user-fields-dialog';
+import { DisposableCollection, nls } from '@theia/core/lib/common';
 
 @injectable()
 export class UploadSketch extends SketchContribution {
   @inject(CoreService)
   protected readonly coreService: CoreService;
 
-  @inject(MonitorConnection)
-  protected readonly monitorConnection: MonitorConnection;
+  @inject(SerialConnectionManager)
+  protected readonly serialConnection: SerialConnectionManager;
+
+  @inject(MenuModelRegistry)
+  protected readonly menuRegistry: MenuModelRegistry;
 
   @inject(BoardsDataStore)
   protected readonly boardsDataStore: BoardsDataStore;
@@ -29,16 +34,89 @@ export class UploadSketch extends SketchContribution {
   @inject(BoardsServiceProvider)
   protected readonly boardsServiceClientImpl: BoardsServiceProvider;
 
+  @inject(UserFieldsDialog)
+  protected readonly userFieldsDialog: UserFieldsDialog;
+
+  protected cachedUserFields: Map<string, BoardUserField[]> = new Map();
+
   protected readonly onDidChangeEmitter = new Emitter<Readonly<void>>();
   readonly onDidChange = this.onDidChangeEmitter.event;
 
   protected uploadInProgress = false;
+  protected boardRequiresUserFields = false;
+
+  protected readonly menuActionsDisposables = new DisposableCollection();
+
+  @postConstruct()
+  protected init(): void {
+    this.boardsServiceClientImpl.onBoardsConfigChanged(async () => {
+      const userFields =
+        await this.boardsServiceClientImpl.selectedBoardUserFields();
+      this.boardRequiresUserFields = userFields.length > 0;
+      this.registerMenus(this.menuRegistry);
+    });
+  }
+
+  private selectedFqbnAddress(): string {
+    const { boardsConfig } = this.boardsServiceClientImpl;
+    const fqbn = boardsConfig.selectedBoard?.fqbn;
+    if (!fqbn) {
+      return '';
+    }
+    const address =
+      boardsConfig.selectedBoard?.port?.address ||
+      boardsConfig.selectedPort?.address;
+    if (!address) {
+      return '';
+    }
+    return fqbn + '|' + address;
+  }
 
   registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH, {
-      execute: () => this.uploadSketch(),
+      execute: async () => {
+        const key = this.selectedFqbnAddress();
+        if (!key) {
+          return;
+        }
+        if (this.boardRequiresUserFields && !this.cachedUserFields.has(key)) {
+          // Deep clone the array of board fields to avoid editing the cached ones
+          this.userFieldsDialog.value = (
+            await this.boardsServiceClientImpl.selectedBoardUserFields()
+          ).map((f) => ({ ...f }));
+          const result = await this.userFieldsDialog.open();
+          if (!result) {
+            return;
+          }
+          this.cachedUserFields.set(key, result);
+        }
+        this.uploadSketch();
+      },
       isEnabled: () => !this.uploadInProgress,
     });
+    registry.registerCommand(UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION, {
+      execute: async () => {
+        const key = this.selectedFqbnAddress();
+        if (!key) {
+          return;
+        }
+
+        const cached = this.cachedUserFields.get(key);
+        // Deep clone the array of board fields to avoid editing the cached ones
+        this.userFieldsDialog.value = (
+          cached ??
+          (await this.boardsServiceClientImpl.selectedBoardUserFields())
+        ).map((f) => ({ ...f }));
+
+        const result = await this.userFieldsDialog.open();
+        if (!result) {
+          return;
+        }
+        this.cachedUserFields.set(key, result);
+        this.uploadSketch();
+      },
+      isEnabled: () => !this.uploadInProgress && this.boardRequiresUserFields,
+    });
     registry.registerCommand(
       UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER,
       {
@@ -57,16 +135,46 @@ export class UploadSketch extends SketchContribution {
   }
 
   registerMenus(registry: MenuModelRegistry): void {
-    registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
-      commandId: UploadSketch.Commands.UPLOAD_SKETCH.id,
-      label: 'Upload',
-      order: '1',
-    });
-    registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
-      commandId: UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER.id,
-      label: 'Upload Using Programmer',
-      order: '2',
-    });
+    this.menuActionsDisposables.dispose();
+
+    this.menuActionsDisposables.push(
+      registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+        commandId: UploadSketch.Commands.UPLOAD_SKETCH.id,
+        label: nls.localize('arduino/sketch/upload', 'Upload'),
+        order: '1',
+      })
+    );
+    if (this.boardRequiresUserFields) {
+      this.menuActionsDisposables.push(
+        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+          commandId: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.id,
+          label: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label,
+          order: '2',
+        })
+      );
+    } else {
+      this.menuActionsDisposables.push(
+        registry.registerMenuNode(
+          ArduinoMenus.SKETCH__MAIN_GROUP,
+          new PlaceholderMenuNode(
+            ArduinoMenus.SKETCH__MAIN_GROUP,
+            // commandId: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.id,
+            UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label!,
+            { order: '2' }
+          )
+        )
+      );
+    }
+    this.menuActionsDisposables.push(
+      registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+        commandId: UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER.id,
+        label: nls.localize(
+          'arduino/sketch/uploadUsingProgrammer',
+          'Upload Using Programmer'
+        ),
+        order: '3',
+      })
+    );
   }
 
   registerKeybindings(registry: KeybindingRegistry): void {
@@ -84,7 +192,7 @@ export class UploadSketch extends SketchContribution {
     registry.registerItem({
       id: UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR.id,
       command: UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR.id,
-      tooltip: 'Upload',
+      tooltip: nls.localize('arduino/sketch/upload', 'Upload'),
       priority: 1,
       onDidChange: this.onDidChange,
     });
@@ -104,15 +212,7 @@ export class UploadSketch extends SketchContribution {
     if (!sketch) {
       return;
     }
-    let shouldAutoConnect = false;
-    const monitorConfig = this.monitorConnection.monitorConfig;
-    if (monitorConfig) {
-      await this.monitorConnection.disconnect();
-      if (this.monitorConnection.autoConnect) {
-        shouldAutoConnect = true;
-      }
-      this.monitorConnection.autoConnect = false;
-    }
+
     try {
       const { boardsConfig } = this.boardsServiceClientImpl;
       const [fqbn, { selectedProgrammer }, verify, verbose, sourceOverride] =
@@ -131,6 +231,17 @@ export class UploadSketch extends SketchContribution {
       const optimizeForDebug = this.editorMode.compileForDebug;
       const { selectedPort } = boardsConfig;
       const port = selectedPort;
+      const userFields =
+        this.cachedUserFields.get(this.selectedFqbnAddress()) ?? [];
+      if (userFields.length === 0 && this.boardRequiresUserFields) {
+        this.messageService.error(
+          nls.localize(
+            'arduino/sketch/userFieldsNotFoundError',
+            "Can't find user fields for connected board"
+          )
+        );
+        return;
+      }
 
       if (usingProgrammer) {
         const programmer = selectedProgrammer;
@@ -143,6 +254,7 @@ export class UploadSketch extends SketchContribution {
           verbose,
           verify,
           sourceOverride,
+          userFields,
         };
       } else {
         options = {
@@ -153,6 +265,7 @@ export class UploadSketch extends SketchContribution {
           verbose,
           verify,
           sourceOverride,
+          userFields,
         };
       }
       this.outputChannelManager.getChannel('Arduino').clear();
@@ -161,32 +274,23 @@ export class UploadSketch extends SketchContribution {
       } else {
         await this.coreService.upload(options);
       }
-      this.messageService.info('Done uploading.', { timeout: 3000 });
+      this.messageService.info(
+        nls.localize('arduino/sketch/doneUploading', 'Done uploading.'),
+        { timeout: 3000 }
+      );
     } catch (e) {
-      this.messageService.error(e.toString());
+      let errorMessage = '';
+      if (typeof e === 'string') {
+        errorMessage = e;
+      } else {
+        errorMessage = e.toString();
+      }
+      this.messageService.error(errorMessage);
     } finally {
       this.uploadInProgress = false;
       this.onDidChangeEmitter.fire();
 
-      if (monitorConfig) {
-        const { board, port } = monitorConfig;
-        try {
-          await this.boardsServiceClientImpl.waitUntilAvailable(
-            Object.assign(board, { port }),
-            10_000
-          );
-          if (shouldAutoConnect) {
-            // Enabling auto-connect will trigger a connect.
-            this.monitorConnection.autoConnect = true;
-          } else {
-            await this.monitorConnection.connect(monitorConfig);
-          }
-        } catch (waitError) {
-          this.messageService.error(
-            `Could not reconnect to serial monitor. ${waitError.toString()}`
-          );
-        }
-      }
+      setTimeout(() => this.serialConnection.reconnectAfterUpload(), 5000);
     }
   }
 }
@@ -196,6 +300,14 @@ export namespace UploadSketch {
     export const UPLOAD_SKETCH: Command = {
       id: 'arduino-upload-sketch',
     };
+    export const UPLOAD_WITH_CONFIGURATION: Command = {
+      id: 'arduino-upload-with-configuration-sketch',
+      label: nls.localize(
+        'arduino/sketch/configureAndUpload',
+        'Configure And Upload'
+      ),
+      category: 'Arduino',
+    };
     export const UPLOAD_SKETCH_USING_PROGRAMMER: Command = {
       id: 'arduino-upload-sketch-using-programmer',
     };

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

@@ -13,6 +13,7 @@ import {
   KeybindingRegistry,
   TabBarToolbarRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class VerifySketch extends SketchContribution {
@@ -52,13 +53,16 @@ export class VerifySketch extends SketchContribution {
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
       commandId: VerifySketch.Commands.VERIFY_SKETCH.id,
-      label: 'Verify/Compile',
+      label: nls.localize('arduino/sketch/verifyOrCompile', 'Verify/Compile'),
       order: '0',
     });
     registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
       commandId: VerifySketch.Commands.EXPORT_BINARIES.id,
-      label: 'Export Compiled Binary',
-      order: '3',
+      label: nls.localize(
+        'arduino/sketch/exportBinary',
+        'Export Compiled Binary'
+      ),
+      order: '4',
     });
   }
 
@@ -77,7 +81,7 @@ export class VerifySketch extends SketchContribution {
     registry.registerItem({
       id: VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR.id,
       command: VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR.id,
-      tooltip: 'Verify',
+      tooltip: nls.localize('arduino/sketch/verify', 'Verify'),
       priority: 0,
       onDidChange: this.onDidChange,
     });
@@ -118,9 +122,18 @@ export class VerifySketch extends SketchContribution {
         sourceOverride,
         compilerWarnings,
       });
-      this.messageService.info('Done compiling.', { timeout: 3000 });
+      this.messageService.info(
+        nls.localize('arduino/sketch/doneCompiling', 'Done compiling.'),
+        { timeout: 3000 }
+      );
     } catch (e) {
-      this.messageService.error(e.toString());
+      let errorMessage = "";
+      if (typeof e === "string") {
+        errorMessage = e;
+      } else {
+        errorMessage = e.toString();
+      }
+      this.messageService.error(errorMessage);
     } finally {
       this.verifyInProgress = false;
       this.onDidChangeEmitter.fire();

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

@@ -15,6 +15,47 @@ export namespace ResponseResultProvider {
   export const JSON: ResponseResultProvider = (response) => response.json();
 }
 
+export function Utf8ArrayToStr(array: Uint8Array): string {
+  let out, i, c;
+  let char2, char3;
+
+  out = '';
+  const len = array.length;
+  i = 0;
+  while (i < len) {
+    c = array[i++];
+    switch (c >> 4) {
+      case 0:
+      case 1:
+      case 2:
+      case 3:
+      case 4:
+      case 5:
+      case 6:
+      case 7:
+        // 0xxxxxxx
+        out += String.fromCharCode(c);
+        break;
+      case 12:
+      case 13:
+        // 110x xxxx   10xx xxxx
+        char2 = array[i++];
+        out += String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));
+        break;
+      case 14:
+        // 1110 xxxx  10xx xxxx  10xx xxxx
+        char2 = array[i++];
+        char3 = array[i++];
+        out += String.fromCharCode(
+          ((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0)
+        );
+        break;
+    }
+  }
+
+  return out;
+}
+
 type ResourceType = 'f' | 'd';
 
 @injectable()
@@ -59,14 +100,29 @@ export class CreateApi {
     return result;
   }
 
-  async sketches(): Promise<Create.Sketch[]> {
+  async sketches(limit = 50): Promise<Create.Sketch[]> {
     const url = new URL(`${this.domain()}/sketches`);
     url.searchParams.set('user_id', 'me');
+    url.searchParams.set('limit', limit.toString());
     const headers = await this.headers();
-    const result = await this.run<{ sketches: Create.Sketch[] }>(url, {
-      method: 'GET',
-      headers,
-    });
+    const result: { sketches: Create.Sketch[] } = { sketches: [] };
+
+    let partialSketches: Create.Sketch[] = [];
+    let currentOffset = 0;
+    do {
+      url.searchParams.set('offset', currentOffset.toString());
+      partialSketches = (
+        await this.run<{ sketches: Create.Sketch[] }>(url, {
+          method: 'GET',
+          headers,
+        })
+      ).sketches;
+      if (partialSketches.length != 0) {
+        result.sketches = result.sketches.concat(partialSketches);
+      }
+      currentOffset = currentOffset + limit;
+    } while (partialSketches.length != 0);
+
     result.sketches.forEach((sketch) => this.sketchCache.addSketch(sketch));
     return result.sketches;
   }
@@ -275,9 +331,7 @@ export class CreateApi {
 
         // parse the secret file
         const secrets = (
-          typeof content === 'string'
-            ? content
-            : new TextDecoder().decode(content)
+          typeof content === 'string' ? content : Utf8ArrayToStr(content)
         )
           .split(/\r?\n/)
           .reduce((prev, curr) => {
@@ -341,7 +395,7 @@ export class CreateApi {
     const headers = await this.headers();
 
     let data: string =
-      typeof content === 'string' ? content : new TextDecoder().decode(content);
+      typeof content === 'string' ? content : Utf8ArrayToStr(content);
     data = await this.toggleSecretsInclude(posixPath, data, 'remove');
 
     const payload = { data: btoa(data) };

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

@@ -1,3 +1,4 @@
+import { nls } from '@theia/core/lib/common';
 import * as React from 'react';
 
 export const CertificateAddComponent = ({
@@ -22,10 +23,18 @@ export const CertificateAddComponent = ({
       }}
     >
       <label>
-        <div>Add URL to fetch SSL certificate</div>
+        <div>
+          {nls.localize(
+            'arduino/certificate/addURL',
+            'Add URL to fetch SSL certificate'
+          )}
+        </div>
         <input
           className="theia-input"
-          placeholder="Enter URL"
+          placeholder={nls.localize(
+            'arduino/certificate/enterURL',
+            'Enter URL'
+          )}
           type="text"
           name="add"
           onChange={handleChange}

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

@@ -4,6 +4,7 @@ import { AvailableBoard } from '../../boards/boards-service-provider';
 import { CertificateListComponent } from './certificate-list';
 import { SelectBoardComponent } from './select-board-components';
 import { CertificateAddComponent } from './certificate-add-new';
+import { nls } from '@theia/core/lib/common';
 
 export const CertificateUploaderComponent = ({
   availableBoards,
@@ -71,7 +72,12 @@ export const CertificateUploaderComponent = ({
     <>
       <div className="dialogSection">
         <div className="dialogRow">
-          <strong className="fl1">1. Select certificate to upload</strong>
+          <strong className="fl1">
+            {nls.localize(
+              'arduino/certificate/selectCertificateToUpload',
+              '1. Select certificate to upload'
+            )}
+          </strong>
           <Tippy
             content={
               <CertificateAddComponent
@@ -93,7 +99,8 @@ export const CertificateUploaderComponent = ({
                 showAdd ? setShowAdd(false) : setShowAdd(true);
               }}
             >
-              Add New <span className="fa fa-caret-down caret"></span>
+              {nls.localize('arduino/certificate/addNew', 'Add New')}{' '}
+              <span className="fa fa-caret-down caret"></span>
             </button>
           </Tippy>
         </div>
@@ -108,7 +115,12 @@ export const CertificateUploaderComponent = ({
       </div>
       <div className="dialogSection">
         <div className="dialogRow">
-          <strong>2. Select destination board and upload certificate</strong>
+          <strong>
+            {nls.localize(
+              'arduino/certificate/selectDestinationBoardToUpload',
+              '2. Select destination board and upload certificate'
+            )}
+          </strong>
         </div>
         <div className="dialogRow">
           <div className="fl1">
@@ -126,19 +138,28 @@ export const CertificateUploaderComponent = ({
             {installFeedback === 'installing' && (
               <div className="success">
                 <div className="spinner" />
-                Uploading certificates.
+                {nls.localize(
+                  'arduino/certificate/uploadingCertificates',
+                  'Uploading certificates.'
+                )}
               </div>
             )}
             {installFeedback === 'ok' && (
               <div className="success">
                 <i className="fa fa-info status-icon" />
-                Cetificates uploaded.
+                {nls.localize(
+                  'arduino/certificate/certificatesUploaded',
+                  'Certificates uploaded.'
+                )}
               </div>
             )}
             {installFeedback === 'fail' && (
               <div className="warn">
                 <i className="fa fa-exclamation status-icon" />
-                Upload failed. Please try again.
+                {nls.localize(
+                  'arduino/certificate/uploadFailed',
+                  'Upload failed. Please try again.'
+                )}
               </div>
             )}
           </div>
@@ -148,7 +169,7 @@ export const CertificateUploaderComponent = ({
             onClick={installCertificates}
             disabled={selectedCerts.length === 0 || !selectedBoard}
           >
-            Upload
+            {nls.localize('arduino/certificate/upload', 'Upload')}
           </button>
         </div>
       </div>

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

@@ -18,6 +18,7 @@ import {
 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';
 
 @injectable()
 export class UploadCertificateDialogWidget extends ReactWidget {
@@ -140,7 +141,12 @@ export class UploadCertificateDialog extends AbstractDialog<void> {
     @inject(UploadCertificateDialogProps)
     protected readonly props: UploadCertificateDialogProps
   ) {
-    super({ title: 'Upload SSL Root Certificates' });
+    super({
+      title: nls.localize(
+        'arduino/certificate/uploadRootCertificates',
+        'Upload SSL Root Certificates'
+      ),
+    });
     this.contentNode.classList.add('certificate-uploader-dialog');
     this.acceptButton = undefined;
   }

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

@@ -1,3 +1,4 @@
+import { nls } from '@theia/core/lib/common';
 import * as React from 'react';
 import { AvailableBoard } from '../../boards/boards-service-provider';
 import { ArduinoSelect } from '../../widgets/arduino-select';
@@ -39,7 +40,10 @@ export const SelectBoardComponent = ({
       return;
     }
 
-    let placeholderTxt = 'Select a board...';
+    let placeholderTxt = nls.localize(
+      'arduino/certificate/selectBoard',
+      'Select a board...'
+    );
     let selBoard = -1;
     const updatableBoards = availableBoards.filter(
       (board) => board.port && board.fqbn && updatableFqbns.includes(board.fqbn)
@@ -49,13 +53,21 @@ export const SelectBoardComponent = ({
         selBoard = i;
       }
       return {
-        label: `${board.name} at ${board.port?.address}`,
+        label: nls.localize(
+          'arduino/certificate/boardAtPort',
+          '{0} at {1}',
+          board.name,
+          board.port?.address ?? ''
+        ),
         value: board.fqbn || '',
       };
     });
 
     if (boardsList.length === 0) {
-      placeholderTxt = 'No supported board connected';
+      placeholderTxt = nls.localize(
+        'arduino/certificate/noSupportedBoardConnected',
+        'No supported board connected'
+      );
     }
 
     setSelectBoardPlaceholder(placeholderTxt);
@@ -80,7 +92,12 @@ export const SelectBoardComponent = ({
       value={
         (selectedBoard && {
           value: selectedBoard.fqbn,
-          label: `${selectedBoard.name} at ${selectedBoard.port?.address}`,
+          label: nls.localize(
+            'arduino/certificate/boardAtPort',
+            '{0} at {1}',
+            selectedBoard.name,
+            selectedBoard.port?.address ?? ''
+          ),
         }) ||
         null
       }

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

@@ -6,6 +6,7 @@ import { clipboard } from 'electron';
 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;
@@ -59,12 +60,20 @@ export const ShareSketchComponent = ({
 
   return (
     <div id="widget-container arduino-sharesketch-dialog">
-      <p>Choose visibility of your Sketch:</p>
+      <p>
+        {nls.localize(
+          'arduino/cloud/chooseSketchVisibility',
+          'Choose visibility of your Sketch:'
+        )}
+      </p>
       <RadioButton
         changed={radioChangeHandler}
         id="1"
         isSelected={treeNode.isPublic === false}
-        label="Private. Only you can view the Sketch."
+        label={nls.localize(
+          'arduino/cloud/privateVisibility',
+          'Private. Only you can view the Sketch.'
+        )}
         value="private"
         isDisabled={loading}
       />
@@ -72,14 +81,17 @@ export const ShareSketchComponent = ({
         changed={radioChangeHandler}
         id="2"
         isSelected={treeNode.isPublic === true}
-        label="Public. Anyone with the link can view the Sketch."
+        label={nls.localize(
+          'arduino/cloud/publicVisibility',
+          'Public. Anyone with the link can view the Sketch.'
+        )}
         value="public"
         isDisabled={loading}
       />
 
       {treeNode.isPublic && (
         <div>
-          <p>Link:</p>
+          <p>{nls.localize('arduino/cloud/link', 'Link:')}</p>
           <div className="sketch-link">
             <input
               type="text"
@@ -92,10 +104,10 @@ export const ShareSketchComponent = ({
               value="copy"
               className="theia-button secondary"
             >
-              Copy
+              {nls.localize('vscode/textInputActions/copy', 'Copy')}
             </button>
           </div>
-          <p>Embed:</p>
+          <p>{nls.localize('arduino/cloud/embed', 'Embed:')}</p>
           <div className="sketch-link-embed">
             <textarea
               readOnly

arduino-ide-extension/src/browser/dialogs/do-not-ask-again-dialog.ts

@@ -6,6 +6,7 @@ import {
   ConfirmDialogProps,
   DialogError,
 } from '@theia/core/lib/browser/dialogs';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class DoNotAskAgainDialogProps extends ConfirmDialogProps {
@@ -31,7 +32,10 @@ export class DoNotAskAgainConfirmDialog extends ConfirmDialog {
     const doNotAskAgainLabel = document.createElement('label');
     doNotAskAgainLabel.classList.add('flex-line');
     doNotAskAgainNode.appendChild(doNotAskAgainLabel);
-    doNotAskAgainLabel.textContent = "Don't ask again";
+    doNotAskAgainLabel.textContent = nls.localize(
+      'arduino/dialog/dontAskAgain',
+      "Don't ask again"
+    );
     this.doNotAskAgainCheckbox = document.createElement('input');
     this.doNotAskAgainCheckbox.setAttribute('align-self', 'center');
     doNotAskAgainLabel.appendChild(this.doNotAskAgainCheckbox);

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

@@ -1,3 +1,4 @@
+import { nls } from '@theia/core/lib/common';
 import * as React from 'react';
 import {
   ArduinoFirmwareUploader,
@@ -106,7 +107,9 @@ export const FirmwareUploaderComponent = ({
     <>
       <div className="dialogSection">
         <div className="dialogRow">
-          <label htmlFor="board-select">Select board</label>
+          <label htmlFor="board-select">
+            {nls.localize('arduino/firmware/selectBoard', 'Select Board')}
+          </label>
         </div>
         <div className="dialogRow">
           <div className="fl1">
@@ -128,7 +131,7 @@ export const FirmwareUploaderComponent = ({
             }
             onClick={fetchFirmwares}
           >
-            Check Updates
+            {nls.localize('arduino/firmware/checkUpdates', 'Check Updates')}
           </button>
         </div>
       </div>
@@ -137,7 +140,10 @@ export const FirmwareUploaderComponent = ({
           <div className="dialogSection">
             <div className="dialogRow">
               <label htmlFor="firmware-select" className="fl1">
-                Select firmware version
+                {nls.localize(
+                  'arduino/firmware/selectVersion',
+                  'Select firmware version'
+                )}
               </label>
               <ArduinoSelect
                 id="firmware-select"
@@ -167,7 +173,7 @@ export const FirmwareUploaderComponent = ({
                 }
                 onClick={installFirmware}
               >
-                Install
+                {nls.localize('arduino/firmware/install', 'Install')}
               </button>
             </div>
           </div>
@@ -175,25 +181,37 @@ export const FirmwareUploaderComponent = ({
             {installFeedback === null && (
               <div className="dialogRow warn">
                 <i className="fa fa-exclamation status-icon" />
-                Installation will overwrite the Sketch on the board.
+                {nls.localize(
+                  'arduino/firmware/overwriteSketch',
+                  'Installation will overwrite the Sketch on the board.'
+                )}
               </div>
             )}
             {installFeedback === 'installing' && (
               <div className="dialogRow success">
                 <div className="spinner" />
-                Installing firmware.
+                {nls.localize(
+                  'arduino/firmware/installingFirmware',
+                  'Installing firmware.'
+                )}
               </div>
             )}
             {installFeedback === 'ok' && (
               <div className="dialogRow success">
                 <i className="fa fa-info status-icon" />
-                Firmware succesfully installed.
+                {nls.localize(
+                  'arduino/firmware/successfullyInstalled',
+                  'Firmware successfully installed.'
+                )}
               </div>
             )}
             {installFeedback === 'fail' && (
               <div className="dialogRow warn">
                 <i className="fa fa-exclamation status-icon" />
-                Installation failed. Please try again.
+                {nls.localize(
+                  'arduino/firmware/failedInstall',
+                  'Installation failed. Please try again.'
+                )}
               </div>
             )}
           </div>

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

@@ -0,0 +1,210 @@
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { nls } from '@theia/core/lib/common';
+import { shell } from 'electron';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import ReactMarkdown from 'react-markdown';
+import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
+import ProgressBar from '../../components/ProgressBar';
+
+export type IDEUpdaterComponentProps = {
+  updateInfo: UpdateInfo;
+  windowService: WindowService;
+  downloadFinished?: boolean;
+  downloadStarted?: boolean;
+  progress?: ProgressInfo;
+  error?: Error;
+  onDownload: () => void;
+  onClose: () => void;
+  onSkipVersion: () => void;
+  onCloseAndInstall: () => void;
+};
+
+export const IDEUpdaterComponent = ({
+  updateInfo: { version, releaseNotes },
+  downloadStarted = false,
+  downloadFinished = false,
+  windowService,
+  progress,
+  error,
+  onDownload,
+  onClose,
+  onSkipVersion,
+  onCloseAndInstall,
+}: IDEUpdaterComponentProps): React.ReactElement => {
+  const changelogDivRef = React.useRef() as React.MutableRefObject<
+    HTMLDivElement
+  >;
+  React.useEffect(() => {
+    if (!!releaseNotes) {
+      let changelog: string;
+      if (typeof releaseNotes === 'string') changelog = releaseNotes;
+      else
+        changelog = releaseNotes.reduce((acc, item) => {
+          return item.note ? (acc += `${item.note}\n\n`) : acc;
+        }, '');
+      ReactDOM.render(
+        <ReactMarkdown
+          components={{
+            a: ({ href, children, ...props }) => (
+              <a onClick={() => href && shell.openExternal(href)} {...props}>
+                {children}
+              </a>
+            ),
+          }}
+        >
+          {changelog}
+        </ReactMarkdown>,
+        changelogDivRef.current
+      );
+    }
+  }, [releaseNotes]);
+  const closeButton = (
+    <button onClick={onClose} type="button" className="theia-button secondary">
+      {nls.localize('arduino/ide-updater/notNowButton', 'Not now')}
+    </button>
+  );
+
+  const DownloadCompleted: () => React.ReactElement = () => (
+    <div className="ide-updater-dialog--downloaded">
+      <div>
+        {nls.localize(
+          'arduino/ide-updater/versionDownloaded',
+          'Arduino IDE {0} has been downloaded.',
+          version
+        )}
+      </div>
+      <div>
+        {nls.localize(
+          'arduino/ide-updater/closeToInstallNotice',
+          'Close the software and install the update on your machine.'
+        )}
+      </div>
+      <div className="buttons-container">
+        {closeButton}
+        <button
+          onClick={onCloseAndInstall}
+          type="button"
+          className="theia-button close-and-install"
+        >
+          {nls.localize(
+            'arduino/ide-updater/closeAndInstallButton',
+            'Close and Install'
+          )}
+        </button>
+      </div>
+    </div>
+  );
+
+  const DownloadStarted: () => React.ReactElement = () => (
+    <div className="ide-updater-dialog--downloading">
+      <div>
+        {nls.localize(
+          'arduino/ide-updater/downloadingNotice',
+          'Downloading the latest version of the Arduino IDE.'
+        )}
+      </div>
+      <ProgressBar percent={progress?.percent} showPercentage />
+    </div>
+  );
+
+  const PreDownload: () => React.ReactElement = () => (
+    <div className="ide-updater-dialog--pre-download">
+      <div className="ide-updater-dialog--logo-container">
+        <div className="ide-updater-dialog--logo"></div>
+      </div>
+      <div className="ide-updater-dialog--new-version-text dialogSection">
+        <div className="dialogRow">
+          <div className="bold">
+            {nls.localize(
+              'arduino/ide-updater/updateAvailable',
+              'Update Available'
+            )}
+          </div>
+        </div>
+        <div className="dialogRow">
+          {nls.localize(
+            'arduino/ide-updater/newVersionAvailable',
+            'A new version of Arduino IDE ({0}) is available for download.',
+            version
+          )}
+        </div>
+        {releaseNotes && (
+          <div className="dialogRow">
+            <div className="changelog-container" ref={changelogDivRef} />
+          </div>
+        )}
+        <div className="buttons-container">
+          <button
+            onClick={onSkipVersion}
+            type="button"
+            className="theia-button secondary skip-version"
+          >
+            {nls.localize(
+              'arduino/ide-updater/skipVersionButton',
+              'Skip Version'
+            )}
+          </button>
+          <div className="push"></div>
+          {closeButton}
+          <button
+            onClick={onDownload}
+            type="button"
+            className="theia-button primary"
+          >
+            {nls.localize('arduino/ide-updater/downloadButton', 'Download')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  const onGoToDownloadClick = (
+    event: React.SyntheticEvent<HTMLAnchorElement, Event>
+  ) => {
+    const { target } = event.nativeEvent;
+    if (target instanceof HTMLAnchorElement) {
+      event.nativeEvent.preventDefault();
+      windowService.openNewWindow(target.href, { external: true });
+      onClose();
+    }
+  };
+
+  const GoToDownloadPage: () => React.ReactElement = () => (
+    <div className="ide-updater-dialog--go-to-download-page">
+      <div>
+        {nls.localize(
+          'arduino/ide-updater/goToDownloadPage',
+          "An update for the Arduino IDE is available, but we're not able to download and install it automatically. Please go to the download page and download the latest version from there."
+        )}
+      </div>
+      <div className="buttons-container">
+        {closeButton}
+        <a
+          className="theia-button primary"
+          href="https://www.arduino.cc/en/software#experimental-software"
+          onClick={onGoToDownloadClick}
+        >
+          {nls.localize(
+            'arduino/ide-updater/goToDownloadButton',
+            'Go To Download'
+          )}
+        </a>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="ide-updater-dialog--content">
+      {!!error ? (
+        <GoToDownloadPage />
+      ) : downloadFinished ? (
+        <DownloadCompleted />
+      ) : downloadStarted ? (
+        <DownloadStarted />
+      ) : (
+        <PreDownload />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,173 @@
+import * as React from 'react';
+import { inject, injectable } from 'inversify';
+import { DialogProps } from '@theia/core/lib/browser/dialogs';
+import { AbstractDialog } from '../../theia/dialogs/dialogs';
+import { Widget } from '@phosphor/widgets';
+import { Message } from '@phosphor/messaging';
+import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
+import { nls } from '@theia/core';
+import { IDEUpdaterComponent } from './ide-updater-component';
+
+import {
+  IDEUpdater,
+  IDEUpdaterClient,
+  ProgressInfo,
+  UpdateInfo,
+} from '../../../common/protocol/ide-updater';
+import { LocalStorageService } from '@theia/core/lib/browser';
+import { SKIP_IDE_VERSION } from '../../arduino-frontend-contribution';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+
+@injectable()
+export class IDEUpdaterDialogWidget extends ReactWidget {
+  protected isOpen = new Object();
+  updateInfo: UpdateInfo;
+  progressInfo: ProgressInfo | undefined;
+  error: Error | undefined;
+  downloadFinished: boolean;
+  downloadStarted: boolean;
+  onClose: () => void;
+
+  @inject(IDEUpdater)
+  protected readonly updater: IDEUpdater;
+
+  @inject(IDEUpdaterClient)
+  protected readonly updaterClient: IDEUpdaterClient;
+
+  @inject(LocalStorageService)
+  protected readonly localStorageService: LocalStorageService;
+
+  @inject(WindowService)
+  protected windowService: WindowService;
+
+  init(updateInfo: UpdateInfo, onClose: () => void): void {
+    this.updateInfo = updateInfo;
+    this.progressInfo = undefined;
+    this.error = undefined;
+    this.downloadStarted = false;
+    this.downloadFinished = false;
+    this.onClose = onClose;
+
+    this.updaterClient.onError((e) => {
+      this.error = e;
+      this.update();
+    });
+    this.updaterClient.onDownloadProgressChanged((e) => {
+      this.progressInfo = e;
+      this.update();
+    });
+    this.updaterClient.onDownloadFinished((e) => {
+      this.downloadFinished = true;
+      this.update();
+    });
+  }
+
+  async onSkipVersion(): Promise<void> {
+    this.localStorageService.setData<string>(
+      SKIP_IDE_VERSION,
+      this.updateInfo.version
+    );
+    this.close();
+  }
+
+  close(): void {
+    super.close();
+    this.onClose();
+  }
+
+  onDispose(): void {
+    if (this.downloadStarted && !this.downloadFinished)
+      this.updater.stopDownload();
+  }
+
+  async onDownload(): Promise<void> {
+    this.progressInfo = undefined;
+    this.downloadStarted = true;
+    this.error = undefined;
+    this.updater.downloadUpdate();
+    this.update();
+  }
+
+  onCloseAndInstall(): void {
+    this.updater.quitAndInstall();
+  }
+
+  protected render(): React.ReactNode {
+    return !!this.updateInfo ? (
+      <form>
+        <IDEUpdaterComponent
+          updateInfo={this.updateInfo}
+          windowService={this.windowService}
+          downloadStarted={this.downloadStarted}
+          downloadFinished={this.downloadFinished}
+          progress={this.progressInfo}
+          error={this.error}
+          onClose={this.close.bind(this)}
+          onSkipVersion={this.onSkipVersion.bind(this)}
+          onDownload={this.onDownload.bind(this)}
+          onCloseAndInstall={this.onCloseAndInstall.bind(this)}
+        />
+      </form>
+    ) : null;
+  }
+}
+
+@injectable()
+export class IDEUpdaterDialogProps extends DialogProps {}
+
+@injectable()
+export class IDEUpdaterDialog extends AbstractDialog<UpdateInfo> {
+  @inject(IDEUpdaterDialogWidget)
+  protected readonly widget: IDEUpdaterDialogWidget;
+
+  constructor(
+    @inject(IDEUpdaterDialogProps)
+    protected readonly props: IDEUpdaterDialogProps
+  ) {
+    super({
+      title: nls.localize(
+        'arduino/ide-updater/ideUpdaterDialog',
+        'Software Update'
+      ),
+    });
+    this.contentNode.classList.add('ide-updater-dialog');
+    this.acceptButton = undefined;
+  }
+
+  get value(): UpdateInfo {
+    return this.widget.updateInfo;
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    if (this.widget.isAttached) {
+      Widget.detach(this.widget);
+    }
+    Widget.attach(this.widget, this.contentNode);
+    super.onAfterAttach(msg);
+    this.update();
+  }
+
+  async open(
+    data: UpdateInfo | undefined = undefined
+  ): Promise<UpdateInfo | undefined> {
+    if (data && data.version) {
+      this.widget.init(data, this.close.bind(this));
+      return super.open();
+    }
+  }
+
+  protected onUpdateRequest(msg: Message): void {
+    super.onUpdateRequest(msg);
+    this.widget.update();
+  }
+
+  protected onActivateRequest(msg: Message): void {
+    super.onActivateRequest(msg);
+    this.widget.activate();
+  }
+
+  close(): void {
+    this.widget.dispose();
+    super.close();
+  }
+}

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

@@ -0,0 +1,760 @@
+import * as React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { Disable } from 'react-disable';
+import { deepClone } from '@theia/core/lib/common/objects';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { ThemeService } from '@theia/core/lib/browser/theming';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog/file-dialog-service';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import {
+  AdditionalUrls,
+  CompilerWarningLiterals,
+  Network,
+  ProxySettings,
+} from '../../../common/protocol';
+import { nls } from '@theia/core/lib/common';
+import { Settings, SettingsService } from './settings';
+import { AdditionalUrlsDialog } from './settings-dialog';
+import { AsyncLocalizationProvider } from '@theia/core/lib/common/i18n/localization';
+
+export class SettingsComponent extends React.Component<
+  SettingsComponent.Props,
+  SettingsComponent.State
+> {
+  readonly toDispose = new DisposableCollection();
+
+  constructor(props: SettingsComponent.Props) {
+    super(props);
+  }
+
+  componentDidUpdate(
+    _: SettingsComponent.Props,
+    prevState: SettingsComponent.State
+  ): void {
+    if (
+      this.state &&
+      prevState &&
+      JSON.stringify(SettingsComponent.State.toSettings(this.state)) !==
+        JSON.stringify(SettingsComponent.State.toSettings(prevState))
+    ) {
+      this.props.settingsService.update(
+        SettingsComponent.State.toSettings(this.state),
+        true
+      );
+    }
+  }
+
+  componentDidMount(): void {
+    this.props.settingsService
+      .settings()
+      .then((settings) =>
+        this.setState(SettingsComponent.State.fromSettings(settings))
+      );
+    this.toDispose.pushAll([
+      this.props.settingsService.onDidChange((settings) =>
+        this.setState((prevState) => ({
+          ...SettingsComponent.State.merge(prevState, settings),
+        }))
+      ),
+      this.props.settingsService.onDidReset((settings) =>
+        this.setState(SettingsComponent.State.fromSettings(settings))
+      ),
+    ]);
+  }
+
+  componentWillUnmount(): void {
+    this.toDispose.dispose();
+  }
+
+  render(): React.ReactNode {
+    if (!this.state) {
+      return <div />;
+    }
+    return (
+      <Tabs>
+        <TabList>
+          <Tab>{nls.localize('vscode/settingsTree/settings', 'Settings')}</Tab>
+          <Tab>{nls.localize('arduino/preferences/network', 'Network')}</Tab>
+        </TabList>
+        <TabPanel>{this.renderSettings()}</TabPanel>
+        <TabPanel>{this.renderNetwork()}</TabPanel>
+      </Tabs>
+    );
+  }
+
+  protected renderSettings(): React.ReactNode {
+    return (
+      <div className="content noselect">
+        {nls.localize(
+          'arduino/preferences/sketchbook.location',
+          'Sketchbook location'
+        ) + ':'}
+        <div className="flex-line">
+          <input
+            className="theia-input stretch"
+            type="text"
+            value={this.state.sketchbookPath}
+            onChange={this.sketchpathDidChange}
+          />
+          <button
+            className="theia-button shrink"
+            onClick={this.browseSketchbookDidClick}
+          >
+            {nls.localize('arduino/preferences/browse', 'Browse')}
+          </button>
+        </div>
+        <label className="flex-line">
+          <input
+            type="checkbox"
+            checked={this.state.sketchbookShowAllFiles === true}
+            onChange={this.sketchbookShowAllFilesDidChange}
+          />
+          {nls.localize(
+            'arduino/preferences/files.inside.sketches',
+            'Show files inside Sketches'
+          )}
+        </label>
+        <div className="flex-line">
+          <div className="column">
+            <div className="flex-line">
+              {nls.localize(
+                'arduino/preferences/editorFontSize',
+                'Editor font size'
+              ) + ':'}
+            </div>
+            <div className="flex-line">
+              {nls.localize(
+                'arduino/preferences/interfaceScale',
+                'Interface scale'
+              ) + ':'}
+            </div>
+            <div className="flex-line">
+              {nls.localize(
+                'vscode/themes.contribution/selectTheme.label',
+                'Theme'
+              ) + ':'}
+            </div>
+            <div className="flex-line">
+              {nls.localize(
+                'vscode/editorStatus/status.editor.mode',
+                'Language'
+              ) + ':'}
+            </div>
+            <div className="flex-line">
+              {nls.localize(
+                'arduino/preferences/showVerbose',
+                'Show verbose output during'
+              )}
+            </div>
+            <div className="flex-line">
+              {nls.localize(
+                'arduino/preferences/compilerWarnings',
+                'Compiler warnings'
+              )}
+            </div>
+          </div>
+          <div className="column">
+            <div className="flex-line">
+              <input
+                className="theia-input small"
+                type="number"
+                step={1}
+                pattern="[0-9]+"
+                onKeyDown={this.numbersOnlyKeyDown}
+                value={this.state.editorFontSize}
+                onChange={this.editorFontSizeDidChange}
+              />
+            </div>
+            <div className="flex-line">
+              <label className="flex-line">
+                <input
+                  type="checkbox"
+                  checked={this.state.autoScaleInterface}
+                  onChange={this.autoScaleInterfaceDidChange}
+                />
+                {nls.localize('arduino/preferences/automatic', 'Automatic')}
+              </label>
+              <input
+                className="theia-input small with-margin"
+                type="number"
+                step={20}
+                pattern="[0-9]+"
+                onKeyDown={this.noopKeyDown}
+                value={100 + this.state.interfaceScale * 20}
+                onChange={this.interfaceScaleDidChange}
+              />
+              %
+            </div>
+            <div className="flex-line">
+              <select
+                className="theia-select"
+                value={
+                  ThemeService.get()
+                    .getThemes()
+                    .find(({ id }) => id === this.state.themeId)?.label ||
+                  nls.localize('arduino/common/unknown', 'Unknown')
+                }
+                onChange={this.themeDidChange}
+              >
+                {ThemeService.get()
+                  .getThemes()
+                  .map(({ id, label }) => (
+                    <option key={id} value={label}>
+                      {label}
+                    </option>
+                  ))}
+              </select>
+            </div>
+            <div className="flex-line">
+              <select
+                className="theia-select"
+                value={this.state.currentLanguage}
+                onChange={this.languageDidChange}
+              >
+                {this.state.languages.map((label) => (
+                  <option key={label} value={label}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+              <span style={{ marginLeft: '5px' }}>
+                (
+                {nls.localize(
+                  'vscode/extensionsActions/reloadRequired',
+                  'Reload required'
+                )}
+                )
+              </span>
+            </div>
+            <div className="flex-line">
+              <label className="flex-line">
+                <input
+                  type="checkbox"
+                  checked={this.state.verboseOnCompile}
+                  onChange={this.verboseOnCompileDidChange}
+                />
+                {nls.localize('arduino/preferences/compile', 'compile')}
+              </label>
+              <label className="flex-line">
+                <input
+                  type="checkbox"
+                  checked={this.state.verboseOnUpload}
+                  onChange={this.verboseOnUploadDidChange}
+                />
+                {nls.localize('arduino/preferences/upload', 'upload')}
+              </label>
+            </div>
+            <div className="flex-line">
+              <select
+                className="theia-select"
+                value={this.state.compilerWarnings}
+                onChange={this.compilerWarningsDidChange}
+              >
+                {CompilerWarningLiterals.map((value) => (
+                  <option key={value} value={value}>
+                    {value}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </div>
+        <label className="flex-line">
+          <input
+            type="checkbox"
+            checked={this.state.verifyAfterUpload}
+            onChange={this.verifyAfterUploadDidChange}
+          />
+          {nls.localize(
+            'arduino/preferences/verifyAfterUpload',
+            'Verify code after upload'
+          )}
+        </label>
+        <label className="flex-line">
+          <input
+            type="checkbox"
+            checked={this.state.autoSave === 'on'}
+            onChange={this.autoSaveDidChange}
+          />
+          {nls.localize(
+            'vscode/fileActions.contribution/miAutoSave',
+            'Auto save'
+          )}
+        </label>
+        <label className="flex-line">
+          <input
+            type="checkbox"
+            checked={this.state.quickSuggestions.other === true}
+            onChange={this.quickSuggestionsOtherDidChange}
+          />
+          {nls.localize(
+            'arduino/preferences/editorQuickSuggestions',
+            'Editor Quick Suggestions'
+          )}
+        </label>
+        <div className="flex-line">
+          {nls.localize(
+            'arduino/preferences/additionalManagerURLs',
+            'Additional boards manager URLs'
+          ) + ':'}
+          <input
+            className="theia-input stretch with-margin"
+            type="text"
+            value={this.state.rawAdditionalUrlsValue}
+            onChange={this.rawAdditionalUrlsValueDidChange}
+          />
+          <i
+            className="fa fa-window-restore theia-button shrink"
+            onClick={this.editAdditionalUrlDidClick}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  protected renderNetwork(): React.ReactNode {
+    return (
+      <div className="content noselect">
+        <form>
+          <label className="flex-line">
+            <input
+              type="radio"
+              checked={this.state.network === 'none'}
+              onChange={this.noProxyDidChange}
+            />
+            {nls.localize('arduino/preferences/noProxy', 'No proxy')}
+          </label>
+          <label className="flex-line">
+            <input
+              type="radio"
+              checked={this.state.network !== 'none'}
+              onChange={this.manualProxyDidChange}
+            />
+            {nls.localize(
+              'arduino/preferences/manualProxy',
+              'Manual proxy configuration'
+            )}
+          </label>
+        </form>
+        {this.renderProxySettings()}
+      </div>
+    );
+  }
+
+  protected renderProxySettings(): React.ReactNode {
+    const disabled = this.state.network === 'none';
+    return (
+      <Disable disabled={disabled}>
+        <div className="proxy-settings" aria-disabled={disabled}>
+          <form className="flex-line">
+            <input
+              type="radio"
+              checked={
+                this.state.network === 'none'
+                  ? true
+                  : this.state.network.protocol === 'http'
+              }
+              onChange={this.httpProtocolDidChange}
+            />
+            HTTP
+            <label className="flex-line">
+              <input
+                type="radio"
+                checked={
+                  this.state.network === 'none'
+                    ? false
+                    : this.state.network.protocol !== 'http'
+                }
+                onChange={this.socksProtocolDidChange}
+              />
+              SOCKS
+            </label>
+          </form>
+          <div className="flex-line proxy-settings">
+            <div className="column">
+              <div className="flex-line">Host name:</div>
+              <div className="flex-line">Port number:</div>
+              <div className="flex-line">Username:</div>
+              <div className="flex-line">Password:</div>
+            </div>
+            <div className="column stretch">
+              <div className="flex-line">
+                <input
+                  className="theia-input stretch with-margin"
+                  type="text"
+                  value={
+                    this.state.network === 'none'
+                      ? ''
+                      : this.state.network.hostname
+                  }
+                  onChange={this.hostnameDidChange}
+                />
+              </div>
+              <div className="flex-line">
+                <input
+                  className="theia-input small with-margin"
+                  type="number"
+                  pattern="[0-9]"
+                  value={
+                    this.state.network === 'none' ? '' : this.state.network.port
+                  }
+                  onKeyDown={this.numbersOnlyKeyDown}
+                  onChange={this.portDidChange}
+                />
+              </div>
+              <div className="flex-line">
+                <input
+                  className="theia-input stretch with-margin"
+                  type="text"
+                  value={
+                    this.state.network === 'none'
+                      ? ''
+                      : this.state.network.username
+                  }
+                  onChange={this.usernameDidChange}
+                />
+              </div>
+              <div className="flex-line">
+                <input
+                  className="theia-input stretch with-margin"
+                  type="password"
+                  value={
+                    this.state.network === 'none'
+                      ? ''
+                      : this.state.network.password
+                  }
+                  onChange={this.passwordDidChange}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Disable>
+    );
+  }
+
+  private isControlKey(event: React.KeyboardEvent<HTMLInputElement>): boolean {
+    return (
+      !!event.key &&
+      ['tab', 'delete', 'backspace', 'arrowleft', 'arrowright'].some(
+        (key) => event.key.toLocaleLowerCase() === key
+      )
+    );
+  }
+
+  protected noopKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ): void => {
+    if (this.isControlKey(event)) {
+      return;
+    }
+    event.nativeEvent.preventDefault();
+    event.nativeEvent.returnValue = false;
+  };
+
+  protected numbersOnlyKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ): void => {
+    if (this.isControlKey(event)) {
+      return;
+    }
+    const key = Number(event.key);
+    if (isNaN(key) || event.key === null || event.key === ' ') {
+      event.nativeEvent.preventDefault();
+      event.nativeEvent.returnValue = false;
+      return;
+    }
+  };
+
+  protected browseSketchbookDidClick = async (): Promise<void> => {
+    const uri = await this.props.fileDialogService.showOpenDialog({
+      title: nls.localize(
+        'arduino/preferences/newSketchbookLocation',
+        'Select new sketchbook location'
+      ),
+      openLabel: nls.localize('arduino/preferences/choose', 'Choose'),
+      canSelectFiles: false,
+      canSelectMany: false,
+      canSelectFolders: true,
+    });
+    if (uri) {
+      const sketchbookPath = await this.props.fileService.fsPath(uri);
+      this.setState({ sketchbookPath });
+    }
+  };
+
+  protected editAdditionalUrlDidClick = async (): Promise<void> => {
+    const additionalUrls = await new AdditionalUrlsDialog(
+      AdditionalUrls.parse(this.state.rawAdditionalUrlsValue, ','),
+      this.props.windowService
+    ).open();
+    if (additionalUrls) {
+      this.setState({
+        rawAdditionalUrlsValue: AdditionalUrls.stringify(additionalUrls),
+      });
+    }
+  };
+
+  protected editorFontSizeDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    const { value } = event.target;
+    if (value) {
+      this.setState({ editorFontSize: parseInt(value, 10) });
+    }
+  };
+
+  protected rawAdditionalUrlsValueDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.setState({
+      rawAdditionalUrlsValue: event.target.value,
+    });
+  };
+
+  protected autoScaleInterfaceDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.setState({ autoScaleInterface: event.target.checked });
+  };
+
+  protected interfaceScaleDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    const { value } = event.target;
+    const percentage = parseInt(value, 10);
+    if (isNaN(percentage)) {
+      return;
+    }
+    const interfaceScale = (percentage - 100) / 20;
+    if (!isNaN(interfaceScale)) {
+      this.setState({ interfaceScale });
+    }
+  };
+
+  protected verifyAfterUploadDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.setState({ verifyAfterUpload: event.target.checked });
+  };
+
+  protected sketchbookShowAllFilesDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.setState({ sketchbookShowAllFiles: event.target.checked });
+  };
+
+  protected autoSaveDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.setState({ autoSave: event.target.checked ? 'on' : 'off' });
+  };
+
+  protected quickSuggestionsOtherDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    // need to persist react events through lifecycle https://reactjs.org/docs/events.html#event-pooling
+    const newVal = event.target.checked ? true : false;
+
+    this.setState((prevState) => {
+      return {
+        quickSuggestions: {
+          ...prevState.quickSuggestions,
+          other: newVal,
+        },
+      };
+    });
+  };
+
+  protected themeDidChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ): void => {
+    const { selectedIndex } = event.target.options;
+    const theme = ThemeService.get().getThemes()[selectedIndex];
+    if (theme) {
+      this.setState({ themeId: theme.id });
+    }
+  };
+
+  protected languageDidChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ): void => {
+    const selectedLanguage = event.target.value;
+    this.setState({ currentLanguage: selectedLanguage });
+  };
+
+  protected compilerWarningsDidChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ): void => {
+    const { selectedIndex } = event.target.options;
+    const compilerWarnings = CompilerWarningLiterals[selectedIndex];
+    if (compilerWarnings) {
+      this.setState({ compilerWarnings });
+    }
+  };
+
+  protected verboseOnCompileDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.setState({ verboseOnCompile: event.target.checked });
+  };
+
+  protected verboseOnUploadDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    this.setState({ verboseOnUpload: event.target.checked });
+  };
+
+  protected sketchpathDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    const sketchbookPath = event.target.value;
+    if (sketchbookPath) {
+      this.setState({ sketchbookPath });
+    }
+  };
+
+  protected noProxyDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (event.target.checked) {
+      this.setState({ network: 'none' });
+    } else {
+      this.setState({ network: Network.Default() });
+    }
+  };
+
+  protected manualProxyDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (event.target.checked) {
+      this.setState({ network: Network.Default() });
+    } else {
+      this.setState({ network: 'none' });
+    }
+  };
+
+  protected httpProtocolDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.protocol = event.target.checked ? 'http' : 'socks';
+      this.setState({ network });
+    }
+  };
+
+  protected socksProtocolDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.protocol = event.target.checked ? 'socks' : 'http';
+      this.setState({ network });
+    }
+  };
+
+  protected hostnameDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.hostname = event.target.value;
+      this.setState({ network });
+    }
+  };
+
+  protected portDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.port = event.target.value;
+      this.setState({ network });
+    }
+  };
+
+  protected usernameDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.username = event.target.value;
+      this.setState({ network });
+    }
+  };
+
+  protected passwordDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.password = event.target.value;
+      this.setState({ network });
+    }
+  };
+
+  private get cloneProxySettings(): ProxySettings {
+    const { network } = this.state;
+    if (network === 'none') {
+      throw new Error('Must be called when proxy is enabled.');
+    }
+    const copyNetwork = deepClone(network);
+    return copyNetwork;
+  }
+}
+export namespace SettingsComponent {
+  export interface Props {
+    readonly settingsService: SettingsService;
+    readonly fileService: FileService;
+    readonly fileDialogService: FileDialogService;
+    readonly windowService: WindowService;
+    readonly localizationProvider: AsyncLocalizationProvider;
+  }
+  export type State = Settings & {
+    rawAdditionalUrlsValue: string;
+  };
+  export namespace State {
+    export function fromSettings(settings: Settings): State {
+      return {
+        ...settings,
+        rawAdditionalUrlsValue: AdditionalUrls.stringify(
+          settings.additionalUrls
+        ),
+      };
+    }
+    export function toSettings(state: State): Settings {
+      const parsedAdditionalUrls = AdditionalUrls.parse(
+        state.rawAdditionalUrlsValue,
+        ','
+      );
+      return {
+        ...state,
+        additionalUrls: AdditionalUrls.sameAs(
+          state.additionalUrls,
+          parsedAdditionalUrls
+        )
+          ? state.additionalUrls
+          : parsedAdditionalUrls,
+      };
+    }
+    export function merge(prevState: State, settings: Settings): State {
+      const prevAdditionalUrls = AdditionalUrls.parse(
+        prevState.rawAdditionalUrlsValue,
+        ','
+      );
+      return {
+        ...settings,
+        rawAdditionalUrlsValue: prevState.rawAdditionalUrlsValue,
+        additionalUrls: AdditionalUrls.sameAs(
+          prevAdditionalUrls,
+          settings.additionalUrls
+        )
+          ? prevAdditionalUrls
+          : settings.additionalUrls,
+      };
+    }
+  }
+}

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

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { injectable, inject, postConstruct } from 'inversify';
+import { Widget } from '@phosphor/widgets';
+import { Message } from '@phosphor/messaging';
+import { DialogError, ReactWidget } from '@theia/core/lib/browser';
+import { AbstractDialog, DialogProps } from '@theia/core/lib/browser';
+import { Settings, SettingsService } from './settings';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog/file-dialog-service';
+import { nls } from '@theia/core/lib/common';
+import { SettingsComponent } from './settings-component';
+import { AsyncLocalizationProvider } from '@theia/core/lib/common/i18n/localization';
+import { AdditionalUrls } from '../../../common/protocol';
+
+@injectable()
+export class SettingsWidget extends ReactWidget {
+  @inject(SettingsService)
+  protected readonly settingsService: SettingsService;
+
+  @inject(FileService)
+  protected readonly fileService: FileService;
+
+  @inject(FileDialogService)
+  protected readonly fileDialogService: FileDialogService;
+
+  @inject(WindowService)
+  protected readonly windowService: WindowService;
+
+  @inject(AsyncLocalizationProvider)
+  protected readonly localizationProvider: AsyncLocalizationProvider;
+
+  protected render(): React.ReactNode {
+    return (
+      <SettingsComponent
+        settingsService={this.settingsService}
+        fileService={this.fileService}
+        fileDialogService={this.fileDialogService}
+        windowService={this.windowService}
+        localizationProvider={this.localizationProvider}
+      />
+    );
+  }
+}
+
+@injectable()
+export class SettingsDialogProps extends DialogProps {}
+
+@injectable()
+export class SettingsDialog extends AbstractDialog<Promise<Settings>> {
+  @inject(SettingsService)
+  protected readonly settingsService: SettingsService;
+
+  @inject(SettingsWidget)
+  protected readonly widget: SettingsWidget;
+
+  constructor(
+    @inject(SettingsDialogProps)
+    protected readonly props: SettingsDialogProps
+  ) {
+    super(props);
+    this.contentNode.classList.add('arduino-settings-dialog');
+    this.appendCloseButton(
+      nls.localize('vscode/issueMainService/cancel', 'Cancel')
+    );
+    this.appendAcceptButton(nls.localize('vscode/issueMainService/ok', 'OK'));
+  }
+
+  @postConstruct()
+  protected init(): void {
+    this.toDispose.push(
+      this.settingsService.onDidChange(this.validate.bind(this))
+    );
+  }
+
+  protected async isValid(settings: Promise<Settings>): Promise<DialogError> {
+    const result = await this.settingsService.validate(settings);
+    if (typeof result === 'string') {
+      return result;
+    }
+    return '';
+  }
+
+  get value(): Promise<Settings> {
+    return this.settingsService.settings();
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    if (this.widget.isAttached) {
+      Widget.detach(this.widget);
+    }
+    Widget.attach(this.widget, this.contentNode);
+    this.toDisposeOnDetach.push(
+      this.settingsService.onDidChange(() => this.update())
+    );
+    super.onAfterAttach(msg);
+    this.update();
+  }
+
+  protected onUpdateRequest(msg: Message): void {
+    super.onUpdateRequest(msg);
+    this.widget.update();
+  }
+
+  protected onActivateRequest(msg: Message): void {
+    super.onActivateRequest(msg);
+
+    // calling settingsService.reset() in order to reload the settings from the preferenceService
+    // and update the UI including changes triggered from the command palette
+    this.settingsService.reset();
+
+    this.widget.activate();
+  }
+}
+
+export class AdditionalUrlsDialog extends AbstractDialog<string[]> {
+  protected readonly textArea: HTMLTextAreaElement;
+
+  constructor(urls: string[], windowService: WindowService) {
+    super({
+      title: nls.localize(
+        'arduino/preferences/additionalManagerURLs',
+        'Additional Boards Manager URLs'
+      ),
+    });
+
+    this.contentNode.classList.add('additional-urls-dialog');
+
+    const description = document.createElement('div');
+    description.textContent = nls.localize(
+      'arduino/preferences/enterAdditionalURLs',
+      'Enter additional URLs, one for each row'
+    );
+    description.style.marginBottom = '5px';
+    this.contentNode.appendChild(description);
+
+    this.textArea = document.createElement('textarea');
+    this.textArea.className = 'theia-input';
+    this.textArea.setAttribute('style', 'flex: 0;');
+    this.textArea.value = urls
+      .filter((url) => url.trim())
+      .filter((url) => !!url)
+      .join('\n');
+    this.textArea.wrap = 'soft';
+    this.textArea.cols = 90;
+    this.textArea.rows = 5;
+    this.contentNode.appendChild(this.textArea);
+
+    const anchor = document.createElement('div');
+    anchor.classList.add('link');
+    anchor.textContent = nls.localize(
+      'arduino/preferences/unofficialBoardSupport',
+      'Click for a list of unofficial board support URLs'
+    );
+    anchor.style.marginTop = '5px';
+    anchor.style.cursor = 'pointer';
+    this.addEventListener(anchor, 'click', () =>
+      windowService.openNewWindow(
+        'https://github.com/arduino/Arduino/wiki/Unofficial-list-of-3rd-party-boards-support-urls',
+        { external: true }
+      )
+    );
+    this.contentNode.appendChild(anchor);
+
+    this.appendAcceptButton(nls.localize('vscode/issueMainService/ok', 'OK'));
+    this.appendCloseButton(
+      nls.localize('vscode/issueMainService/cancel', 'Cancel')
+    );
+  }
+
+  get value(): string[] {
+    return AdditionalUrls.parse(this.textArea.value, 'newline');
+  }
+
+  protected onAfterAttach(message: Message): void {
+    super.onAfterAttach(message);
+    this.addUpdateListener(this.textArea, 'input');
+  }
+
+  protected onActivateRequest(message: Message): void {
+    super.onActivateRequest(message);
+    this.textArea.focus();
+  }
+
+  protected handleEnter(event: KeyboardEvent): boolean | void {
+    if (event.target instanceof HTMLInputElement) {
+      return super.handleEnter(event);
+    }
+    return false;
+  }
+}

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

@@ -0,0 +1,294 @@
+import { injectable, inject, postConstruct } from 'inversify';
+import URI from '@theia/core/lib/common/uri';
+import { Emitter } from '@theia/core/lib/common/event';
+import { Deferred, timeout } from '@theia/core/lib/common/promise-util';
+import { deepClone } from '@theia/core/lib/common/objects';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { ThemeService } from '@theia/core/lib/browser/theming';
+import { MaybePromise } from '@theia/core/lib/common/types';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
+import { PreferenceService, PreferenceScope } from '@theia/core/lib/browser';
+import {
+  AdditionalUrls,
+  CompilerWarnings,
+  ConfigService,
+  FileSystemExt,
+  Network,
+} from '../../../common/protocol';
+import { CommandService, nls } from '@theia/core/lib/common';
+import { AsyncLocalizationProvider } from '@theia/core/lib/common/i18n/localization';
+import { ElectronCommands } from '@theia/core/lib/electron-browser/menu/electron-menu-contribution';
+
+export const EDITOR_SETTING = 'editor';
+export const FONT_SIZE_SETTING = `${EDITOR_SETTING}.fontSize`;
+export const AUTO_SAVE_SETTING = `${EDITOR_SETTING}.autoSave`;
+export const QUICK_SUGGESTIONS_SETTING = `${EDITOR_SETTING}.quickSuggestions`;
+export const ARDUINO_SETTING = 'arduino';
+export const WINDOW_SETTING = `${ARDUINO_SETTING}.window`;
+export const COMPILE_SETTING = `${ARDUINO_SETTING}.compile`;
+export const UPLOAD_SETTING = `${ARDUINO_SETTING}.upload`;
+export const SKETCHBOOK_SETTING = `${ARDUINO_SETTING}.sketchbook`;
+export const AUTO_SCALE_SETTING = `${WINDOW_SETTING}.autoScale`;
+export const ZOOM_LEVEL_SETTING = `${WINDOW_SETTING}.zoomLevel`;
+export const COMPILE_VERBOSE_SETTING = `${COMPILE_SETTING}.verbose`;
+export const COMPILE_WARNINGS_SETTING = `${COMPILE_SETTING}.warnings`;
+export const UPLOAD_VERBOSE_SETTING = `${UPLOAD_SETTING}.verbose`;
+export const UPLOAD_VERIFY_SETTING = `${UPLOAD_SETTING}.verify`;
+export const SHOW_ALL_FILES_SETTING = `${SKETCHBOOK_SETTING}.showAllFiles`;
+
+export interface Settings {
+  editorFontSize: number; // `editor.fontSize`
+  themeId: string; // `workbench.colorTheme`
+  autoSave: 'on' | 'off'; // `editor.autoSave`
+  quickSuggestions: Record<'other' | 'comments' | 'strings', boolean>; // `editor.quickSuggestions`
+
+  languages: string[]; // `languages from the plugins`
+  currentLanguage: string;
+
+  autoScaleInterface: boolean; // `arduino.window.autoScale`
+  interfaceScale: number; // `arduino.window.zoomLevel` https://github.com/eclipse-theia/theia/issues/8751
+  verboseOnCompile: boolean; // `arduino.compile.verbose`
+  compilerWarnings: CompilerWarnings; // `arduino.compile.warnings`
+  verboseOnUpload: boolean; // `arduino.upload.verbose`
+  verifyAfterUpload: boolean; // `arduino.upload.verify`
+  sketchbookShowAllFiles: boolean; // `arduino.sketchbook.showAllFiles`
+
+  sketchbookPath: string; // CLI
+  additionalUrls: AdditionalUrls; // CLI
+  network: Network; // CLI
+}
+export namespace Settings {
+  export function belongsToCli<K extends keyof Settings>(key: K): boolean {
+    return key === 'sketchbookPath' || key === 'additionalUrls';
+  }
+}
+
+@injectable()
+export class SettingsService {
+  @inject(FileService)
+  protected readonly fileService: FileService;
+
+  @inject(FileSystemExt)
+  protected readonly fileSystemExt: FileSystemExt;
+
+  @inject(ConfigService)
+  protected readonly configService: ConfigService;
+
+  @inject(PreferenceService)
+  protected readonly preferenceService: PreferenceService;
+
+  @inject(FrontendApplicationStateService)
+  protected readonly appStateService: FrontendApplicationStateService;
+
+  @inject(AsyncLocalizationProvider)
+  protected readonly localizationProvider: AsyncLocalizationProvider;
+
+  @inject(CommandService)
+  protected commandService: CommandService;
+
+  protected readonly onDidChangeEmitter = new Emitter<Readonly<Settings>>();
+  readonly onDidChange = this.onDidChangeEmitter.event;
+  protected readonly onDidResetEmitter = new Emitter<Readonly<Settings>>();
+  readonly onDidReset = this.onDidResetEmitter.event;
+
+  protected ready = new Deferred<void>();
+  protected _settings: Settings;
+
+  @postConstruct()
+  protected async init(): Promise<void> {
+    const settings = await this.loadSettings();
+    this._settings = deepClone(settings);
+    this.ready.resolve();
+  }
+
+  protected async loadSettings(): Promise<Settings> {
+    await this.preferenceService.ready;
+    const [
+      languages,
+      currentLanguage,
+      editorFontSize,
+      themeId,
+      autoSave,
+      quickSuggestions,
+      autoScaleInterface,
+      interfaceScale,
+      verboseOnCompile,
+      compilerWarnings,
+      verboseOnUpload,
+      verifyAfterUpload,
+      sketchbookShowAllFiles,
+      cliConfig,
+    ] = await Promise.all([
+      ['en', ...(await this.localizationProvider.getAvailableLanguages())],
+      this.localizationProvider.getCurrentLanguage(),
+      this.preferenceService.get<number>(FONT_SIZE_SETTING, 12),
+      this.preferenceService.get<string>(
+        'workbench.colorTheme',
+        'arduino-theme'
+      ),
+      this.preferenceService.get<'on' | 'off'>(AUTO_SAVE_SETTING, 'on'),
+      this.preferenceService.get<
+        Record<'other' | 'comments' | 'strings', boolean>
+      >(QUICK_SUGGESTIONS_SETTING, {
+        other: false,
+        comments: false,
+        strings: false,
+      }),
+      this.preferenceService.get<boolean>(AUTO_SCALE_SETTING, true),
+      this.preferenceService.get<number>(ZOOM_LEVEL_SETTING, 0),
+      this.preferenceService.get<boolean>(COMPILE_VERBOSE_SETTING, true),
+      this.preferenceService.get<any>(COMPILE_WARNINGS_SETTING, 'None'),
+      this.preferenceService.get<boolean>(UPLOAD_VERBOSE_SETTING, true),
+      this.preferenceService.get<boolean>(UPLOAD_VERIFY_SETTING, true),
+      this.preferenceService.get<boolean>(SHOW_ALL_FILES_SETTING, false),
+      this.configService.getConfiguration(),
+    ]);
+    const { additionalUrls, sketchDirUri, network } = cliConfig;
+    const sketchbookPath = await this.fileService.fsPath(new URI(sketchDirUri));
+    return {
+      editorFontSize,
+      themeId,
+      languages,
+      currentLanguage,
+      autoSave,
+      quickSuggestions,
+      autoScaleInterface,
+      interfaceScale,
+      verboseOnCompile,
+      compilerWarnings,
+      verboseOnUpload,
+      verifyAfterUpload,
+      sketchbookShowAllFiles,
+      additionalUrls,
+      sketchbookPath,
+      network,
+    };
+  }
+
+  async settings(): Promise<Settings> {
+    await this.ready.promise;
+    return this._settings;
+  }
+
+  async update(settings: Settings, fireDidChange = false): Promise<void> {
+    await this.ready.promise;
+    for (const key of Object.keys(settings)) {
+      if (key in this._settings) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this._settings as any)[key] = (settings as any)[key];
+      }
+    }
+    if (fireDidChange) {
+      this.onDidChangeEmitter.fire(this._settings);
+    }
+  }
+
+  async reset(): Promise<void> {
+    const settings = await this.loadSettings();
+    await this.update(settings, false);
+    this.onDidResetEmitter.fire(this._settings);
+  }
+
+  async validate(
+    settings: MaybePromise<Settings> = this.settings()
+  ): Promise<string | true> {
+    try {
+      const { sketchbookPath, editorFontSize, themeId } = await settings;
+      const sketchbookDir = await this.fileSystemExt.getUri(sketchbookPath);
+      if (!(await this.fileService.exists(new URI(sketchbookDir)))) {
+        return nls.localize(
+          'arduino/preferences/invalid.sketchbook.location',
+          'Invalid sketchbook location: {0}',
+          sketchbookPath
+        );
+      }
+      if (editorFontSize <= 0) {
+        return nls.localize(
+          'arduino/preferences/invalid.editorFontSize',
+          'Invalid editor font size. It must be a positive integer.'
+        );
+      }
+      if (
+        !ThemeService.get()
+          .getThemes()
+          .find(({ id }) => id === themeId)
+      ) {
+        return nls.localize(
+          'arduino/preferences/invalid.theme',
+          'Invalid theme.'
+        );
+      }
+      return true;
+    } catch (err) {
+      if (err instanceof Error) {
+        return err.message;
+      }
+      return String(err);
+    }
+  }
+
+  private async savePreference(name: string, value: unknown): Promise<void> {
+    await this.preferenceService.set(name, value, PreferenceScope.User);
+    await timeout(5);
+  }
+
+  async save(): Promise<string | true> {
+    await this.ready.promise;
+    const {
+      currentLanguage,
+      editorFontSize,
+      themeId,
+      autoSave,
+      quickSuggestions,
+      autoScaleInterface,
+      interfaceScale,
+      verboseOnCompile,
+      compilerWarnings,
+      verboseOnUpload,
+      verifyAfterUpload,
+      sketchbookPath,
+      additionalUrls,
+      network,
+      sketchbookShowAllFiles,
+    } = this._settings;
+    const [config, sketchDirUri] = await Promise.all([
+      this.configService.getConfiguration(),
+      this.fileSystemExt.getUri(sketchbookPath),
+    ]);
+    (config as any).additionalUrls = additionalUrls;
+    (config as any).sketchDirUri = sketchDirUri;
+    (config as any).network = network;
+    (config as any).locale = currentLanguage;
+
+    await this.savePreference('editor.fontSize', editorFontSize);
+    await this.savePreference('workbench.colorTheme', themeId);
+    await this.savePreference('editor.autoSave', autoSave);
+    await this.savePreference('editor.quickSuggestions', quickSuggestions);
+    await this.savePreference(AUTO_SCALE_SETTING, autoScaleInterface);
+    await this.savePreference(ZOOM_LEVEL_SETTING, interfaceScale);
+    await this.savePreference(ZOOM_LEVEL_SETTING, interfaceScale);
+    await this.savePreference(COMPILE_VERBOSE_SETTING, verboseOnCompile);
+    await this.savePreference(COMPILE_WARNINGS_SETTING, compilerWarnings);
+    await this.savePreference(UPLOAD_VERBOSE_SETTING, verboseOnUpload);
+    await this.savePreference(UPLOAD_VERIFY_SETTING, verifyAfterUpload);
+    await this.savePreference(SHOW_ALL_FILES_SETTING, sketchbookShowAllFiles);
+    await this.configService.setConfiguration(config);
+    this.onDidChangeEmitter.fire(this._settings);
+
+    // after saving all the settings, if we need to change the language we need to perform a reload
+    // Only reload if the language differs from the current locale. `nls.locale === undefined` signals english as well
+    if (
+      currentLanguage !== (await this.localizationProvider.getCurrentLanguage())
+    ) {
+      await this.localizationProvider.setCurrentLanguage(currentLanguage);
+      if (currentLanguage === 'en') {
+        window.localStorage.removeItem(nls.localeId);
+      } else {
+        window.localStorage.setItem(nls.localeId, currentLanguage);
+      }
+      this.commandService.executeCommand(ElectronCommands.RELOAD.id);
+    }
+
+    return true;
+  }
+}

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { BoardUserField } from '../../../common/protocol';
+import { nls } from '@theia/core/lib/common';
+
+export const UserFieldsComponent = ({
+  initialBoardUserFields,
+  updateUserFields,
+  cancel,
+  accept,
+}: {
+  initialBoardUserFields: BoardUserField[];
+  updateUserFields: (userFields: BoardUserField[]) => void;
+  cancel: () => void;
+  accept: () => Promise<void>;
+}): React.ReactElement => {
+  const [boardUserFields, setBoardUserFields] = React.useState<
+    BoardUserField[]
+  >(initialBoardUserFields);
+
+  const [uploadButtonDisabled, setUploadButtonDisabled] =
+    React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    setBoardUserFields(initialBoardUserFields);
+  }, [initialBoardUserFields]);
+
+  const updateUserField =
+    (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newBoardUserFields = [...boardUserFields];
+      newBoardUserFields[index].value = e.target.value;
+      setBoardUserFields(newBoardUserFields);
+    };
+
+  const allFieldsHaveValues = (userFields: BoardUserField[]): boolean => {
+    return (
+      userFields &&
+      userFields.length > 0 &&
+      userFields
+        .map<boolean>((field: BoardUserField): boolean => {
+          return field.value.length > 0;
+        })
+        .reduce((previous: boolean, current: boolean): boolean => {
+          return previous && current;
+        })
+    );
+  };
+
+  React.useEffect(() => {
+    updateUserFields(boardUserFields);
+    setUploadButtonDisabled(!allFieldsHaveValues(boardUserFields));
+  }, [boardUserFields]);
+
+  return (
+    <div>
+      <div className="user-fields-container">
+        <div className="user-fields-list">
+          {boardUserFields.map((field, index) => {
+            return (
+              <div className="dialogSection" key={index}>
+                <div className="dialogRow">
+                  <label className="field-label">{field.label}</label>
+                </div>
+                <div className="dialogRow">
+                  <input
+                    type={field.secret ? 'password' : 'text'}
+                    value={field.value}
+                    className="theia-input"
+                    placeholder={'Enter ' + field.label}
+                    onChange={updateUserField(index)}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className="dialogSection">
+        <div className="dialogRow button-container">
+          <button
+            type="button"
+            className="theia-button secondary install-cert-btn"
+            onClick={cancel}
+          >
+            {nls.localize('arduino/userFields/cancel', 'Cancel')}
+          </button>
+          <button
+            type="button"
+            className="theia-button primary install-cert-btn"
+            disabled={uploadButtonDisabled}
+            onClick={accept}
+          >
+            {nls.localize('arduino/userFields/upload', 'Upload')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { inject, injectable } from 'inversify';
+import {
+  AbstractDialog,
+  DialogProps,
+  ReactWidget,
+} from '@theia/core/lib/browser';
+import { Widget } from '@phosphor/widgets';
+import { Message } from '@phosphor/messaging';
+import { UploadSketch } from '../../contributions/upload-sketch';
+import { UserFieldsComponent } from './user-fields-component';
+import { BoardUserField } from '../../../common/protocol';
+
+@injectable()
+export class UserFieldsDialogWidget extends ReactWidget {
+  protected _currentUserFields: BoardUserField[] = [];
+
+  constructor(private cancel: () => void, private accept: () => Promise<void>) {
+    super();
+  }
+
+  set currentUserFields(userFields: BoardUserField[]) {
+    this.setUserFields(userFields);
+  }
+
+  get currentUserFields(): BoardUserField[] {
+    return this._currentUserFields;
+  }
+
+  resetUserFieldsValue(): void {
+    this._currentUserFields = this._currentUserFields.map((field) => {
+      field.value = '';
+      return field;
+    });
+  }
+
+  protected setUserFields(userFields: BoardUserField[]): void {
+    this._currentUserFields = userFields;
+  }
+
+  protected render(): React.ReactNode {
+    return (
+      <form>
+        <UserFieldsComponent
+          initialBoardUserFields={this._currentUserFields}
+          updateUserFields={this.setUserFields.bind(this)}
+          cancel={this.cancel}
+          accept={this.accept}
+        />
+      </form>
+    );
+  }
+}
+
+@injectable()
+export class UserFieldsDialogProps extends DialogProps {}
+
+@injectable()
+export class UserFieldsDialog extends AbstractDialog<BoardUserField[]> {
+  protected readonly widget: UserFieldsDialogWidget;
+
+  constructor(
+    @inject(UserFieldsDialogProps)
+    protected readonly props: UserFieldsDialogProps
+  ) {
+    super({
+      title: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label || '',
+    });
+    this.titleNode.classList.add('user-fields-dialog-title');
+    this.contentNode.classList.add('user-fields-dialog-content');
+    this.acceptButton = undefined;
+    this.widget = new UserFieldsDialogWidget(
+      this.close.bind(this),
+      this.accept.bind(this)
+    );
+  }
+
+  set value(userFields: BoardUserField[]) {
+    this.widget.currentUserFields = userFields;
+  }
+
+  get value(): BoardUserField[] {
+    return this.widget.currentUserFields;
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    if (this.widget.isAttached) {
+      Widget.detach(this.widget);
+    }
+    Widget.attach(this.widget, this.contentNode);
+    super.onAfterAttach(msg);
+    this.update();
+  }
+
+  protected onUpdateRequest(msg: Message): void {
+    super.onUpdateRequest(msg);
+    this.widget.update();
+  }
+
+  protected onActivateRequest(msg: Message): void {
+    super.onActivateRequest(msg);
+    this.widget.activate();
+  }
+
+  protected async accept(): Promise<void> {
+    // If the user presses enter and at least
+    // a field is empty don't accept the input
+    for (const field of this.value) {
+      if (field.value.length === 0) {
+        return;
+      }
+    }
+    return super.accept();
+  }
+
+  close(): void {
+    this.widget.resetUserFieldsValue();
+    this.widget.close();
+    super.close();
+  }
+}

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

@@ -0,0 +1,40 @@
+import { Emitter } from '@theia/core';
+import { injectable } from '@theia/core/shared/inversify';
+import { UpdateInfo, ProgressInfo } from 'electron-updater';
+import { IDEUpdaterClient } from '../../common/protocol/ide-updater';
+
+@injectable()
+export class IDEUpdaterClientImpl implements IDEUpdaterClient {
+  protected readonly onErrorEmitter = new Emitter<Error>();
+  protected readonly onCheckingForUpdateEmitter = new Emitter<void>();
+  protected readonly onUpdateAvailableEmitter = new Emitter<UpdateInfo>();
+  protected readonly onUpdateNotAvailableEmitter = new Emitter<UpdateInfo>();
+  protected readonly onDownloadProgressEmitter = new Emitter<ProgressInfo>();
+  protected readonly onDownloadFinishedEmitter = new Emitter<UpdateInfo>();
+
+  readonly onError = this.onErrorEmitter.event;
+  readonly onCheckingForUpdate = this.onCheckingForUpdateEmitter.event;
+  readonly onUpdateAvailable = this.onUpdateAvailableEmitter.event;
+  readonly onUpdateNotAvailable = this.onUpdateNotAvailableEmitter.event;
+  readonly onDownloadProgressChanged = this.onDownloadProgressEmitter.event;
+  readonly onDownloadFinished = this.onDownloadFinishedEmitter.event;
+
+  notifyError(message: Error): void {
+    this.onErrorEmitter.fire(message);
+  }
+  notifyCheckingForUpdate(message: void): void {
+    this.onCheckingForUpdateEmitter.fire(message);
+  }
+  notifyUpdateAvailable(message: UpdateInfo): void {
+    this.onUpdateAvailableEmitter.fire(message);
+  }
+  notifyUpdateNotAvailable(message: UpdateInfo): void {
+    this.onUpdateNotAvailableEmitter.fire(message);
+  }
+  notifyDownloadProgressChanged(message: ProgressInfo): void {
+    this.onDownloadProgressEmitter.fire(message);
+  }
+  notifyDownloadFinished(message: UpdateInfo): void {
+    this.onDownloadFinishedEmitter.fire(message);
+  }
+}

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

@@ -0,0 +1,60 @@
+import {
+  Command,
+  CommandContribution,
+  CommandRegistry,
+  MessageService,
+  nls,
+} from '@theia/core';
+import { injectable, inject } from 'inversify';
+import { IDEUpdater, UpdateInfo } from '../../common/protocol/ide-updater';
+import { IDEUpdaterDialog } from '../dialogs/ide-updater/ide-updater-dialog';
+
+@injectable()
+export class IDEUpdaterCommands implements CommandContribution {
+  constructor(
+    @inject(IDEUpdater)
+    private readonly updater: IDEUpdater,
+    @inject(MessageService)
+    protected readonly messageService: MessageService,
+    @inject(IDEUpdaterDialog)
+    protected readonly updaterDialog: IDEUpdaterDialog
+  ) {}
+
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(IDEUpdaterCommands.CHECK_FOR_UPDATES, {
+      execute: this.checkForUpdates.bind(this),
+    });
+  }
+
+  async checkForUpdates(initialCheck?: boolean): Promise<UpdateInfo | void> {
+    try {
+      const updateInfo = await this.updater.checkForUpdates(initialCheck);
+      if (!!updateInfo) {
+        this.updaterDialog.open(updateInfo);
+      } else {
+        this.messageService.info(
+          nls.localize(
+            'arduino/ide-updater/noUpdatesAvailable',
+            'There are no recent updates available for the Arduino IDE'
+          )
+        );
+      }
+      return updateInfo;
+    } catch (e) {
+      this.messageService.error(
+        nls.localize(
+          'arduino/ide-updater/errorCheckingForUpdates',
+          'Error while checking for Arduino IDE updates.\n{0}',
+          e.message
+        )
+      );
+    }
+  }
+}
+export namespace IDEUpdaterCommands {
+  export const CHECK_FOR_UPDATES: Command = {
+    id: 'arduino-ide-check-for-updates',
+    category: 'Arduino',
+    label: 'Check for Arduino IDE updates',
+  };
+}

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

@@ -10,11 +10,15 @@ import {
 import { ListWidget } from '../widgets/component-list/list-widget';
 import { Installable } from '../../common/protocol';
 import { ListItemRenderer } from '../widgets/component-list/list-item-renderer';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class LibraryListWidget extends ListWidget<LibraryPackage> {
   static WIDGET_ID = 'library-list-widget';
-  static WIDGET_LABEL = 'Library Manager';
+  static WIDGET_LABEL = nls.localize(
+    'arduino/library/title',
+    'Library Manager'
+  );
 
   constructor(
     @inject(LibraryService) protected service: LibraryService,
@@ -61,11 +65,20 @@ export class LibraryListWidget extends ListWidget<LibraryPackage> {
     let installDependencies: boolean | undefined = undefined;
     if (dependencies.length) {
       const message = document.createElement('div');
-      message.innerHTML = `The library <b>${item.name}:${version}</b> needs ${
+      message.innerHTML =
         dependencies.length === 1
-          ? 'another dependency'
-          : 'some other dependencies'
-      } currently not installed:`;
+          ? nls.localize(
+              'arduino/library/needsOneDependency',
+              'The library <b>{0}:{1}</b> needs another dependency currently not installed:',
+              item.name,
+              version
+            )
+          : nls.localize(
+              'arduino/library/needsMultipleDependencies',
+              'The library <b>{0}:{1}</b> needs some other dependencies currently not installed:',
+              item.name,
+              version
+            );
       const listContainer = document.createElement('div');
       listContainer.style.maxHeight = '300px';
       listContainer.style.overflowY = 'auto';
@@ -80,16 +93,34 @@ export class LibraryListWidget extends ListWidget<LibraryPackage> {
       listContainer.appendChild(list);
       message.appendChild(listContainer);
       const question = document.createElement('div');
-      question.textContent = `Would you like to install ${
+      question.textContent =
         dependencies.length === 1
-          ? 'the missing dependency'
-          : 'all the missing dependencies'
-      }?`;
+          ? nls.localize(
+              'arduino/library/installOneMissingDependency',
+              'Would you like to install the missing dependency?'
+            )
+          : nls.localize(
+              'arduino/library/installMissingDependencies',
+              'Would you like to install all the missing dependencies?'
+            );
       message.appendChild(question);
       const result = await new MessageBoxDialog({
-        title: `Dependencies for library ${item.name}:${version}`,
+        title: nls.localize(
+          'arduino/library/dependenciesForLibrary',
+          'Dependencies for library {0}:{1}',
+          item.name,
+          version
+        ),
         message,
-        buttons: ['Install all', `Install ${item.name} only`, 'Cancel'],
+        buttons: [
+          nls.localize('arduino/library/installAll', 'Install all'),
+          nls.localize(
+            'arduino/library/installOnly',
+            'Install {0} only',
+            item.name
+          ),
+          nls.localize('vscode/issueMainService/cancel', 'Cancel'),
+        ],
         maxWidth: 740, // Aligned with `settings-dialog.css`.
       }).open();
 
@@ -116,7 +147,12 @@ export class LibraryListWidget extends ListWidget<LibraryPackage> {
         installDependencies,
       });
       this.messageService.info(
-        `Successfully installed library ${item.name}:${version}`,
+        nls.localize(
+          'arduino/library/installedSuccessfully',
+          'Successfully installed library {0}:{1}',
+          item.name,
+          version
+        ),
         { timeout: 3000 }
       );
     }
@@ -131,7 +167,12 @@ export class LibraryListWidget extends ListWidget<LibraryPackage> {
   }): Promise<void> {
     await super.uninstall({ item, progressId });
     this.messageService.info(
-      `Successfully uninstalled library ${item.name}:${item.installedVersion}`,
+      nls.localize(
+        'arduino/library/uninstalledSuccessfully',
+        'Successfully uninstalled library {0}:{1}',
+        item.name,
+        item.installedVersion!
+      ),
       { timeout: 3000 }
     );
   }
@@ -143,7 +184,9 @@ class MessageBoxDialog extends AbstractDialog<MessageBoxDialog.Result> {
   constructor(protected readonly options: MessageBoxDialog.Options) {
     super(options);
     this.contentNode.appendChild(this.createMessageNode(this.options.message));
-    (options.buttons || ['OK']).forEach((text, index) => {
+    (
+      options.buttons || [nls.localize('vscode/issueMainService/ok', 'OK')]
+    ).forEach((text, index) => {
       const button = this.createButton(text);
       button.classList.add(index === 0 ? 'main' : 'secondary');
       this.controlPanel.appendChild(button);

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

@@ -4,6 +4,7 @@ import { AbstractViewContribution } from '@theia/core/lib/browser/shell/view-con
 import { MenuModelRegistry } from '@theia/core';
 import { LibraryListWidget } from './library-list-widget';
 import { ArduinoMenus } from '../menu/arduino-menus';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class LibraryListWidgetFrontendContribution
@@ -31,7 +32,10 @@ export class LibraryListWidgetFrontendContribution
     if (this.toggleCommand) {
       menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
         commandId: this.toggleCommand.id,
-        label: 'Manage Libraries...',
+        label: nls.localize(
+          'arduino/library/manageLibraries',
+          'Manage Libraries...'
+        ),
         order: '3',
       });
     }

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

@@ -86,7 +86,7 @@ export namespace ArduinoMenus {
 
   // -- Tools
   export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
-  // `Auto Format`, `Archive Sketch`, `Manage Libraries...`, `Serial Monitor`
+  // `Auto Format`, `Archive Sketch`, `Manage Libraries...`, `Serial Monitor`, Serial Plotter
   export const TOOLS__MAIN_GROUP = [...TOOLS, '0_main'];
   // `WiFi101 /  WiFiNINA Firmware Updater`
   export const TOOLS__FIRMWARE_UPLOADER_GROUP = [

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

@@ -1,359 +0,0 @@
-import { injectable, inject, postConstruct } from 'inversify';
-import { deepClone } from '@theia/core/lib/common/objects';
-import { Emitter, Event } from '@theia/core/lib/common/event';
-import { MessageService } from '@theia/core/lib/common/message-service';
-import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
-import {
-  MonitorService,
-  MonitorConfig,
-  MonitorError,
-  Status,
-  MonitorServiceClient,
-} from '../../common/protocol/monitor-service';
-import { BoardsServiceProvider } from '../boards/boards-service-provider';
-import {
-  Port,
-  Board,
-  BoardsService,
-  AttachedBoardsChangeEvent,
-} from '../../common/protocol/boards-service';
-import { BoardsConfig } from '../boards/boards-config';
-import { MonitorModel } from './monitor-model';
-import { NotificationCenter } from '../notification-center';
-
-@injectable()
-export class MonitorConnection {
-  @inject(MonitorModel)
-  protected readonly monitorModel: MonitorModel;
-
-  @inject(MonitorService)
-  protected readonly monitorService: MonitorService;
-
-  @inject(MonitorServiceClient)
-  protected readonly monitorServiceClient: MonitorServiceClient;
-
-  @inject(BoardsService)
-  protected readonly boardsService: BoardsService;
-
-  @inject(BoardsServiceProvider)
-  protected readonly boardsServiceProvider: BoardsServiceProvider;
-
-  @inject(NotificationCenter)
-  protected readonly notificationCenter: NotificationCenter;
-
-  @inject(MessageService)
-  protected messageService: MessageService;
-
-  @inject(FrontendApplicationStateService)
-  protected readonly applicationState: FrontendApplicationStateService;
-
-  protected state: MonitorConnection.State | undefined;
-  /**
-   * Note: The idea is to toggle this property from the UI (`Monitor` view)
-   * and the boards config and the boards attachment/detachment logic can be at on place, here.
-   */
-  protected _autoConnect = false;
-  protected readonly onConnectionChangedEmitter = new Emitter<
-    MonitorConnection.State | undefined
-  >();
-  /**
-   * This emitter forwards all read events **iff** the connection is established.
-   */
-  protected readonly onReadEmitter = new Emitter<{ messages: string[] }>();
-
-  /**
-   * Array for storing previous monitor errors received from the server, and based on the number of elements in this array,
-   * we adjust the reconnection delay.
-   * Super naive way: we wait `array.length * 1000` ms. Once we hit 10 errors, we do not try to reconnect and clean the array.
-   */
-  protected monitorErrors: MonitorError[] = [];
-  protected reconnectTimeout?: number;
-
-  @postConstruct()
-  protected init(): void {
-    this.monitorServiceClient.onMessage(this.handleMessage.bind(this));
-    this.monitorServiceClient.onError(this.handleError.bind(this));
-    this.boardsServiceProvider.onBoardsConfigChanged(
-      this.handleBoardConfigChange.bind(this)
-    );
-    this.notificationCenter.onAttachedBoardsChanged(
-      this.handleAttachedBoardsChanged.bind(this)
-    );
-
-    // Handles the `baudRate` changes by reconnecting if required.
-    this.monitorModel.onChange(({ property }) => {
-      if (property === 'baudRate' && this.autoConnect && this.connected) {
-        const { boardsConfig } = this.boardsServiceProvider;
-        this.handleBoardConfigChange(boardsConfig);
-      }
-    });
-  }
-
-  async handleMessage(port: string): Promise<void> {
-    const w = new WebSocket(`ws://localhost:${port}`);
-    w.onmessage = (res) => {
-      const messages = JSON.parse(res.data);
-      this.onReadEmitter.fire({ messages });
-    };
-  }
-
-  get connected(): boolean {
-    return !!this.state;
-  }
-
-  get monitorConfig(): MonitorConfig | undefined {
-    return this.state ? this.state.config : undefined;
-  }
-
-  get autoConnect(): boolean {
-    return this._autoConnect;
-  }
-
-  set autoConnect(value: boolean) {
-    const oldValue = this._autoConnect;
-    this._autoConnect = value;
-    // When we enable the auto-connect, we have to connect
-    if (!oldValue && value) {
-      // We have to make sure the previous boards config has been restored.
-      // Otherwise, we might start the auto-connection without configured boards.
-      this.applicationState.reachedState('started_contributions').then(() => {
-        const { boardsConfig } = this.boardsServiceProvider;
-        this.handleBoardConfigChange(boardsConfig);
-      });
-    } else if (oldValue && !value) {
-      if (this.reconnectTimeout !== undefined) {
-        window.clearTimeout(this.reconnectTimeout);
-        this.monitorErrors.length = 0;
-      }
-    }
-  }
-
-  handleError(error: MonitorError): void {
-    let shouldReconnect = false;
-    if (this.state) {
-      const { code, config } = error;
-      const { board, port } = config;
-      const options = { timeout: 3000 };
-      switch (code) {
-        case MonitorError.ErrorCodes.CLIENT_CANCEL: {
-          console.debug(
-            `Connection was canceled by client: ${MonitorConnection.State.toString(
-              this.state
-            )}.`
-          );
-          break;
-        }
-        case MonitorError.ErrorCodes.DEVICE_BUSY: {
-          this.messageService.warn(
-            `Connection failed. Serial port is busy: ${Port.toString(port)}.`,
-            options
-          );
-          shouldReconnect = this.autoConnect;
-          this.monitorErrors.push(error);
-          break;
-        }
-        case MonitorError.ErrorCodes.DEVICE_NOT_CONFIGURED: {
-          this.messageService.info(
-            `Disconnected ${Board.toString(board, {
-              useFqbn: false,
-            })} from ${Port.toString(port)}.`,
-            options
-          );
-          break;
-        }
-        case undefined: {
-          this.messageService.error(
-            `Unexpected error. Reconnecting ${Board.toString(
-              board
-            )} on port ${Port.toString(port)}.`,
-            options
-          );
-          console.error(JSON.stringify(error));
-          shouldReconnect = this.connected && this.autoConnect;
-          break;
-        }
-      }
-      const oldState = this.state;
-      this.state = undefined;
-      this.onConnectionChangedEmitter.fire(this.state);
-      if (shouldReconnect) {
-        if (this.monitorErrors.length >= 10) {
-          this.messageService.warn(
-            `Failed to reconnect ${Board.toString(board, {
-              useFqbn: false,
-            })} to the the serial-monitor after 10 consecutive attempts. The ${Port.toString(
-              port
-            )} serial port is busy. after 10 consecutive attempts.`
-          );
-          this.monitorErrors.length = 0;
-        } else {
-          const attempts = this.monitorErrors.length || 1;
-          if (this.reconnectTimeout !== undefined) {
-            // Clear the previous timer.
-            window.clearTimeout(this.reconnectTimeout);
-          }
-          const timeout = attempts * 1000;
-          this.messageService.warn(
-            `Reconnecting ${Board.toString(board, {
-              useFqbn: false,
-            })} to ${Port.toString(port)} in ${attempts} seconds...`,
-            { timeout }
-          );
-          this.reconnectTimeout = window.setTimeout(
-            () => this.connect(oldState.config),
-            timeout
-          );
-        }
-      }
-    }
-  }
-
-  handleAttachedBoardsChanged(event: AttachedBoardsChangeEvent): void {
-    if (this.autoConnect && this.connected) {
-      const { boardsConfig } = this.boardsServiceProvider;
-      if (
-        this.boardsServiceProvider.canUploadTo(boardsConfig, {
-          silent: false,
-        })
-      ) {
-        const { attached } = AttachedBoardsChangeEvent.diff(event);
-        if (
-          attached.boards.some(
-            (board) =>
-              !!board.port && BoardsConfig.Config.sameAs(boardsConfig, board)
-          )
-        ) {
-          const { selectedBoard: board, selectedPort: port } = boardsConfig;
-          const { baudRate } = this.monitorModel;
-          this.disconnect().then(() => this.connect({ board, port, baudRate }));
-        }
-      }
-    }
-  }
-
-  async connect(config: MonitorConfig): Promise<Status> {
-    if (this.connected) {
-      const disconnectStatus = await this.disconnect();
-      if (!Status.isOK(disconnectStatus)) {
-        return disconnectStatus;
-      }
-    }
-    console.info(
-      `>>> Creating serial monitor connection for ${Board.toString(
-        config.board
-      )} on port ${Port.toString(config.port)}...`
-    );
-    const connectStatus = await this.monitorService.connect(config);
-    if (Status.isOK(connectStatus)) {
-      this.state = { config };
-      console.info(
-        `<<< Serial monitor connection created for ${Board.toString(
-          config.board,
-          { useFqbn: false }
-        )} on port ${Port.toString(config.port)}.`
-      );
-    }
-    this.onConnectionChangedEmitter.fire(this.state);
-    return Status.isOK(connectStatus);
-  }
-
-  async disconnect(): Promise<Status> {
-    if (!this.connected) {
-      return Status.OK;
-    }
-    const stateCopy = deepClone(this.state);
-    if (!stateCopy) {
-      return Status.OK;
-    }
-    console.log('>>> Disposing existing monitor connection...');
-    const status = await this.monitorService.disconnect();
-    if (Status.isOK(status)) {
-      console.log(
-        `<<< Disposed connection. Was: ${MonitorConnection.State.toString(
-          stateCopy
-        )}`
-      );
-    } else {
-      console.warn(
-        `<<< Could not dispose connection. Activate connection: ${MonitorConnection.State.toString(
-          stateCopy
-        )}`
-      );
-    }
-    this.state = undefined;
-    this.onConnectionChangedEmitter.fire(this.state);
-    return status;
-  }
-
-  /**
-   * Sends the data to the connected serial monitor.
-   * The desired EOL is appended to `data`, you do not have to add it.
-   * It is a NOOP if connected.
-   */
-  async send(data: string): Promise<Status> {
-    if (!this.connected) {
-      return Status.NOT_CONNECTED;
-    }
-    return new Promise<Status>((resolve) => {
-      this.monitorService
-        .send(data + this.monitorModel.lineEnding)
-        .then(() => resolve(Status.OK));
-    });
-  }
-
-  get onConnectionChanged(): Event<MonitorConnection.State | undefined> {
-    return this.onConnectionChangedEmitter.event;
-  }
-
-  get onRead(): Event<{ messages: string[] }> {
-    return this.onReadEmitter.event;
-  }
-
-  protected async handleBoardConfigChange(
-    boardsConfig: BoardsConfig.Config
-  ): Promise<void> {
-    if (this.autoConnect) {
-      if (
-        this.boardsServiceProvider.canUploadTo(boardsConfig, {
-          silent: false,
-        })
-      ) {
-        // Instead of calling `getAttachedBoards` and filtering for `AttachedSerialBoard` we have to check the available ports.
-        // The connected board might be unknown. See: https://github.com/arduino/arduino-pro-ide/issues/127#issuecomment-563251881
-        this.boardsService.getAvailablePorts().then((ports) => {
-          if (
-            ports.some((port) => Port.equals(port, boardsConfig.selectedPort))
-          ) {
-            new Promise<void>((resolve) => {
-              // First, disconnect if connected.
-              if (this.connected) {
-                this.disconnect().then(() => resolve());
-                return;
-              }
-              resolve();
-            }).then(() => {
-              // Then (re-)connect.
-              const { selectedBoard: board, selectedPort: port } = boardsConfig;
-              const { baudRate } = this.monitorModel;
-              this.connect({ board, port, baudRate });
-            });
-          }
-        });
-      }
-    }
-  }
-}
-
-export namespace MonitorConnection {
-  export interface State {
-    readonly config: MonitorConfig;
-  }
-
-  export namespace State {
-    export function toString(state: State): string {
-      const { config } = state;
-      const { board, port } = config;
-      return `${Board.toString(board)} ${Port.toString(port)}`;
-    }
-  }
-}

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

@@ -1,23 +0,0 @@
-import { injectable } from 'inversify';
-import { Emitter } from '@theia/core/lib/common/event';
-import {
-  MonitorServiceClient,
-  MonitorError,
-} from '../../common/protocol/monitor-service';
-
-@injectable()
-export class MonitorServiceClientImpl implements MonitorServiceClient {
-  protected readonly onErrorEmitter = new Emitter<MonitorError>();
-  readonly onError = this.onErrorEmitter.event;
-
-  protected readonly onMessageEmitter = new Emitter<string>();
-  readonly onMessage = this.onMessageEmitter.event;
-
-  notifyError(error: MonitorError): void {
-    this.onErrorEmitter.fire(error);
-  }
-
-  notifyMessage(message: string): void {
-    this.onMessageEmitter.fire(message);
-  }
-}

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

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import { Key, KeyCode } from '@theia/core/lib/browser/keys';
-import { Board, Port } from '../../common/protocol/boards-service';
-import { MonitorConfig } from '../../common/protocol/monitor-service';
-import { isOSX } from '@theia/core/lib/common/os';
-
-export namespace SerialMonitorSendInput {
-  export interface Props {
-    readonly monitorConfig?: MonitorConfig;
-    readonly onSend: (text: string) => void;
-    readonly resolveFocus: (element: HTMLElement | undefined) => void;
-  }
-  export interface State {
-    text: string;
-  }
-}
-
-export class SerialMonitorSendInput extends React.Component<
-  SerialMonitorSendInput.Props,
-  SerialMonitorSendInput.State
-> {
-  constructor(props: Readonly<SerialMonitorSendInput.Props>) {
-    super(props);
-    this.state = { text: '' };
-    this.onChange = this.onChange.bind(this);
-    this.onSend = this.onSend.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-  }
-
-  render(): React.ReactNode {
-    return (
-      <input
-        ref={this.setRef}
-        type="text"
-        className={`theia-input ${this.props.monitorConfig ? '' : 'warning'}`}
-        placeholder={this.placeholder}
-        value={this.state.text}
-        onChange={this.onChange}
-        onKeyDown={this.onKeyDown}
-      />
-    );
-  }
-
-  protected get placeholder(): string {
-    const { monitorConfig } = this.props;
-    if (!monitorConfig) {
-      return 'Not connected. Select a board and a port to connect automatically.';
-    }
-    const { board, port } = monitorConfig;
-    return `Message (${
-      isOSX ? '⌘' : 'Ctrl'
-    }+Enter to send message to '${Board.toString(board, {
-      useFqbn: false,
-    })}' on '${Port.toString(port)}')`;
-  }
-
-  protected setRef = (element: HTMLElement | null) => {
-    if (this.props.resolveFocus) {
-      this.props.resolveFocus(element || undefined);
-    }
-  };
-
-  protected onChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    this.setState({ text: event.target.value });
-  }
-
-  protected onSend(): void {
-    this.props.onSend(this.state.text);
-    this.setState({ text: '' });
-  }
-
-  protected onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
-    const keyCode = KeyCode.createKeyCode(event.nativeEvent);
-    if (keyCode) {
-      const { key, meta, ctrl } = keyCode;
-      if (key === Key.ENTER && ((isOSX && meta) || (!isOSX && ctrl))) {
-        this.onSend();
-      }
-    }
-  }
-}

arduino-ide-extension/src/browser/response-service-impl.ts

@@ -1,7 +1,7 @@
 import { inject, injectable } from 'inversify';
 import { Emitter } from '@theia/core/lib/common/event';
 import { OutputContribution } from '@theia/output/lib/browser/output-contribution';
-import { OutputChannelManager } from '@theia/output/lib/common/output-channel';
+import { OutputChannelManager } from '@theia/output/lib/browser/output-channel';
 import {
   OutputMessage,
   ProgressMessage,

arduino-ide-extension/src/browser/serial/monitor/monitor-utils.ts

@@ -9,6 +9,7 @@ export function messagesToLines(
   const linesToAdd: Line[] = prevLines.length
     ? [prevLines[prevLines.length - 1]]
     : [{ message: '', lineLen: 0 }];
+  if (!(Symbol.iterator in Object(messages))) return [prevLines, charCount];
 
   for (const message of messages) {
     const messageLen = message.length;

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

@@ -1,31 +1,41 @@
 import * as React from 'react';
 import { injectable, inject } from 'inversify';
-import { AbstractViewContribution } from '@theia/core/lib/browser';
+import { AbstractViewContribution, codicon } from '@theia/core/lib/browser';
 import { MonitorWidget } from './monitor-widget';
 import { MenuModelRegistry, Command, CommandRegistry } from '@theia/core';
 import {
   TabBarToolbarContribution,
   TabBarToolbarRegistry,
 } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
-import { MonitorModel } from './monitor-model';
-import { ArduinoMenus } from '../menu/arduino-menus';
+import { ArduinoToolbar } from '../../toolbar/arduino-toolbar';
+import { SerialModel } from '../serial-model';
+import { ArduinoMenus } from '../../menu/arduino-menus';
+import { nls } from '@theia/core/lib/common';
 
 export namespace SerialMonitor {
   export namespace Commands {
-    export const AUTOSCROLL: Command = {
-      id: 'serial-monitor-autoscroll',
-      label: 'Autoscroll',
-    };
-    export const TIMESTAMP: Command = {
-      id: 'serial-monitor-timestamp',
-      label: 'Timestamp',
-    };
-    export const CLEAR_OUTPUT: Command = {
-      id: 'serial-monitor-clear-output',
-      label: 'Clear Output',
-      iconClass: 'clear-all',
-    };
+    export const AUTOSCROLL = Command.toLocalizedCommand(
+      {
+        id: 'serial-monitor-autoscroll',
+        label: 'Autoscroll',
+      },
+      'arduino/serial/autoscroll'
+    );
+    export const TIMESTAMP = Command.toLocalizedCommand(
+      {
+        id: 'serial-monitor-timestamp',
+        label: 'Timestamp',
+      },
+      'arduino/serial/timestamp'
+    );
+    export const CLEAR_OUTPUT = Command.toLocalizedCommand(
+      {
+        id: 'serial-monitor-clear-output',
+        label: 'Clear Output',
+        iconClass: codicon('clear-all'),
+      },
+      'vscode/output.contribution/clearOutput.label'
+    );
   }
 }
 
@@ -38,12 +48,12 @@ export class MonitorViewContribution
   static readonly TOGGLE_SERIAL_MONITOR_TOOLBAR =
     MonitorWidget.ID + ':toggle-toolbar';
 
-  @inject(MonitorModel) protected readonly model: MonitorModel;
+  @inject(SerialModel) protected readonly model: SerialModel;
 
   constructor() {
     super({
       widgetId: MonitorWidget.ID,
-      widgetName: 'Serial Monitor',
+      widgetName: MonitorWidget.LABEL,
       defaultWidgetOptions: {
         area: 'bottom',
       },
@@ -56,7 +66,7 @@ export class MonitorViewContribution
     if (this.toggleCommand) {
       menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
         commandId: this.toggleCommand.id,
-        label: 'Serial Monitor',
+        label: MonitorWidget.LABEL,
         order: '5',
       });
     }
@@ -78,7 +88,10 @@ export class MonitorViewContribution
     registry.registerItem({
       id: SerialMonitor.Commands.CLEAR_OUTPUT.id,
       command: SerialMonitor.Commands.CLEAR_OUTPUT.id,
-      tooltip: 'Clear Output',
+      tooltip: nls.localize(
+        'vscode/output.contribution/clearOutput.label',
+        'Clear Output'
+      ),
     });
   }
 
@@ -120,7 +133,10 @@ export class MonitorViewContribution
     return (
       <React.Fragment key="autoscroll-toolbar-item">
         <div
-          title="Toggle Autoscroll"
+          title={nls.localize(
+            'vscode/output.contribution/toggleAutoScroll',
+            'Toggle Autoscroll'
+          )}
           className={`item enabled fa fa-angle-double-down arduino-monitor ${
             this.model.autoscroll ? 'toggled' : ''
           }`}
@@ -139,7 +155,10 @@ export class MonitorViewContribution
     return (
       <React.Fragment key="line-ending-toolbar-item">
         <div
-          title="Toggle Timestamp"
+          title={nls.localize(
+            'arduino/serial/toggleTimestamp',
+            'Toggle Timestamp'
+          )}
           className={`item enabled fa fa-clock-o arduino-monitor ${
             this.model.timestamp ? 'toggled' : ''
           }`}

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

@@ -9,22 +9,31 @@ import {
   Widget,
   MessageLoop,
 } from '@theia/core/lib/browser/widgets';
-import { MonitorConfig } from '../../common/protocol/monitor-service';
-import { ArduinoSelect } from '../widgets/arduino-select';
-import { MonitorModel } from './monitor-model';
-import { MonitorConnection } from './monitor-connection';
+import { SerialConfig } from '../../../common/protocol/serial-service';
+import { ArduinoSelect } from '../../widgets/arduino-select';
+import { SerialModel } from '../serial-model';
+import { SerialConnectionManager } from '../serial-connection-manager';
 import { SerialMonitorSendInput } from './serial-monitor-send-input';
 import { SerialMonitorOutput } from './serial-monitor-send-output';
+import { BoardsServiceProvider } from '../../boards/boards-service-provider';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class MonitorWidget extends ReactWidget {
+  static readonly LABEL = nls.localize(
+    'arduino/common/serialMonitor',
+    'Serial Monitor'
+  );
   static readonly ID = 'serial-monitor';
 
-  @inject(MonitorModel)
-  protected readonly monitorModel: MonitorModel;
+  @inject(SerialModel)
+  protected readonly serialModel: SerialModel;
 
-  @inject(MonitorConnection)
-  protected readonly monitorConnection: MonitorConnection;
+  @inject(SerialConnectionManager)
+  protected readonly serialConnection: SerialConnectionManager;
+
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceProvider: BoardsServiceProvider;
 
   protected widgetHeight: number;
 
@@ -42,18 +51,13 @@ export class MonitorWidget extends ReactWidget {
   constructor() {
     super();
     this.id = MonitorWidget.ID;
-    this.title.label = 'Serial Monitor';
+    this.title.label = MonitorWidget.LABEL;
     this.title.iconClass = 'monitor-tab-icon';
     this.title.closable = true;
     this.scrollOptions = undefined;
     this.toDispose.push(this.clearOutputEmitter);
     this.toDispose.push(
-      Disposable.create(() => {
-        this.monitorConnection.autoConnect = false;
-        if (this.monitorConnection.connected) {
-          this.monitorConnection.disconnect();
-        }
-      })
+      Disposable.create(() => this.serialConnection.closeWStoBE())
     );
   }
 
@@ -61,8 +65,9 @@ export class MonitorWidget extends ReactWidget {
   protected init(): void {
     this.update();
     this.toDispose.push(
-      this.monitorConnection.onConnectionChanged(() => this.clearConsole())
+      this.serialConnection.onConnectionChanged(() => this.clearConsole())
     );
+    this.toDispose.push(this.serialModel.onChange(() => this.update()));
   }
 
   clearConsole(): void {
@@ -76,7 +81,7 @@ export class MonitorWidget extends ReactWidget {
 
   protected onAfterAttach(msg: Message): void {
     super.onAfterAttach(msg);
-    this.monitorConnection.autoConnect = true;
+    this.serialConnection.openWSToBE();
   }
 
   onCloseRequest(msg: Message): void {
@@ -114,32 +119,35 @@ export class MonitorWidget extends ReactWidget {
   };
 
   protected get lineEndings(): OptionsType<
-    SerialMonitorOutput.SelectOption<MonitorModel.EOL>
+    SerialMonitorOutput.SelectOption<SerialModel.EOL>
   > {
     return [
       {
-        label: 'No Line Ending',
+        label: nls.localize('arduino/serial/noLineEndings', 'No Line Ending'),
         value: '',
       },
       {
-        label: 'New Line',
+        label: nls.localize('arduino/serial/newLine', 'New Line'),
         value: '\n',
       },
       {
-        label: 'Carriage Return',
+        label: nls.localize('arduino/serial/carriageReturn', 'Carriage Return'),
         value: '\r',
       },
       {
-        label: 'Both NL & CR',
+        label: nls.localize(
+          'arduino/serial/newLineCarriageReturn',
+          'Both NL & CR'
+        ),
         value: '\r\n',
       },
     ];
   }
 
   protected get baudRates(): OptionsType<
-    SerialMonitorOutput.SelectOption<MonitorConfig.BaudRate>
+    SerialMonitorOutput.SelectOption<SerialConfig.BaudRate>
   > {
-    const baudRates: Array<MonitorConfig.BaudRate> = [
+    const baudRates: Array<SerialConfig.BaudRate> = [
       300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200,
     ];
     return baudRates.map((baudRate) => ({
@@ -151,17 +159,17 @@ export class MonitorWidget extends ReactWidget {
   protected render(): React.ReactNode {
     const { baudRates, lineEndings } = this;
     const lineEnding =
-      lineEndings.find((item) => item.value === this.monitorModel.lineEnding) ||
+      lineEndings.find((item) => item.value === this.serialModel.lineEnding) ||
       lineEndings[1]; // Defaults to `\n`.
     const baudRate =
-      baudRates.find((item) => item.value === this.monitorModel.baudRate) ||
+      baudRates.find((item) => item.value === this.serialModel.baudRate) ||
       baudRates[4]; // Defaults to `9600`.
     return (
       <div className="serial-monitor">
         <div className="head">
           <div className="send">
             <SerialMonitorSendInput
-              monitorConfig={this.monitorConnection.monitorConfig}
+              serialConnection={this.serialConnection}
               resolveFocus={this.onFocusResolved}
               onSend={this.onSend}
             />
@@ -171,7 +179,7 @@ export class MonitorWidget extends ReactWidget {
               <ArduinoSelect
                 maxMenuHeight={this.widgetHeight - 40}
                 options={lineEndings}
-                defaultValue={lineEnding}
+                value={lineEnding}
                 onChange={this.onChangeLineEnding}
               />
             </div>
@@ -180,7 +188,7 @@ export class MonitorWidget extends ReactWidget {
                 className="select"
                 maxMenuHeight={this.widgetHeight - 40}
                 options={baudRates}
-                defaultValue={baudRate}
+                value={baudRate}
                 onChange={this.onChangeBaudRate}
               />
             </div>
@@ -188,8 +196,8 @@ export class MonitorWidget extends ReactWidget {
         </div>
         <div className="body">
           <SerialMonitorOutput
-            monitorModel={this.monitorModel}
-            monitorConnection={this.monitorConnection}
+            serialModel={this.serialModel}
+            serialConnection={this.serialConnection}
             clearConsoleEvent={this.clearOutputEmitter.event}
             height={Math.floor(this.widgetHeight - 50)}
           />
@@ -200,18 +208,18 @@ export class MonitorWidget extends ReactWidget {
 
   protected readonly onSend = (value: string) => this.doSend(value);
   protected async doSend(value: string): Promise<void> {
-    this.monitorConnection.send(value);
+    this.serialConnection.send(value);
   }
 
   protected readonly onChangeLineEnding = (
-    option: SerialMonitorOutput.SelectOption<MonitorModel.EOL>
+    option: SerialMonitorOutput.SelectOption<SerialModel.EOL>
   ) => {
-    this.monitorModel.lineEnding = option.value;
+    this.serialModel.lineEnding = option.value;
   };
 
   protected readonly onChangeBaudRate = (
-    option: SerialMonitorOutput.SelectOption<MonitorConfig.BaudRate>
+    option: SerialMonitorOutput.SelectOption<SerialConfig.BaudRate>
   ) => {
-    this.monitorModel.baudRate = option.value;
+    this.serialModel.baudRate = option.value;
   };
 }

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

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Key, KeyCode } from '@theia/core/lib/browser/keys';
+import { Board } from '../../../common/protocol/boards-service';
+import { isOSX } from '@theia/core/lib/common/os';
+import { DisposableCollection, nls } from '@theia/core/lib/common';
+import { SerialConnectionManager } from '../serial-connection-manager';
+import { SerialPlotter } from '../plotter/protocol';
+
+export namespace SerialMonitorSendInput {
+  export interface Props {
+    readonly serialConnection: SerialConnectionManager;
+    readonly onSend: (text: string) => void;
+    readonly resolveFocus: (element: HTMLElement | undefined) => void;
+  }
+  export interface State {
+    text: string;
+    connected: boolean;
+  }
+}
+
+export class SerialMonitorSendInput extends React.Component<
+  SerialMonitorSendInput.Props,
+  SerialMonitorSendInput.State
+> {
+  protected toDisposeBeforeUnmount = new DisposableCollection();
+
+  constructor(props: Readonly<SerialMonitorSendInput.Props>) {
+    super(props);
+    this.state = { text: '', connected: false };
+    this.onChange = this.onChange.bind(this);
+    this.onSend = this.onSend.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  componentDidMount(): void {
+    this.props.serialConnection.isBESerialConnected().then((connected) => {
+      this.setState({ connected });
+    });
+
+    this.toDisposeBeforeUnmount.pushAll([
+      this.props.serialConnection.onRead(({ messages }) => {
+        if (
+          messages.command ===
+            SerialPlotter.Protocol.Command.MIDDLEWARE_CONFIG_CHANGED &&
+          'connected' in messages.data
+        ) {
+          this.setState({ connected: messages.data.connected });
+        }
+      }),
+    ]);
+  }
+
+  componentWillUnmount(): void {
+    // TODO: "Your preferred browser's local storage is almost full." Discard `content` before saving layout?
+    this.toDisposeBeforeUnmount.dispose();
+  }
+
+  render(): React.ReactNode {
+    return (
+      <input
+        ref={this.setRef}
+        type="text"
+        className={`theia-input ${this.state.connected ? '' : 'warning'}`}
+        placeholder={this.placeholder}
+        value={this.state.text}
+        onChange={this.onChange}
+        onKeyDown={this.onKeyDown}
+      />
+    );
+  }
+
+  protected get placeholder(): string {
+    const serialConfig = this.props.serialConnection.getConfig();
+    if (!this.state.connected || !serialConfig) {
+      return nls.localize(
+        'arduino/serial/notConnected',
+        'Not connected. Select a board and a port to connect automatically.'
+      );
+    }
+    const { board, port } = serialConfig;
+    return nls.localize(
+      'arduino/serial/message',
+      "Message ({0} + Enter to send message to '{1}' on '{2}')",
+      isOSX ? '⌘' : nls.localize('vscode/keybindingLabels/ctrlKey', 'Ctrl'),
+      board
+        ? Board.toString(board, {
+            useFqbn: false,
+          })
+        : 'unknown',
+      port ? port.address : 'unknown'
+    );
+  }
+
+  protected setRef = (element: HTMLElement | null) => {
+    if (this.props.resolveFocus) {
+      this.props.resolveFocus(element || undefined);
+    }
+  };
+
+  protected onChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    this.setState({ text: event.target.value });
+  }
+
+  protected onSend(): void {
+    this.props.onSend(this.state.text);
+    this.setState({ text: '' });
+  }
+
+  protected onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
+    const keyCode = KeyCode.createKeyCode(event.nativeEvent);
+    if (keyCode) {
+      const { key, meta, ctrl } = keyCode;
+      if (key === Key.ENTER && ((isOSX && meta) || (!isOSX && ctrl))) {
+        this.onSend();
+      }
+    }
+  }
+}

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

@@ -2,8 +2,8 @@ import * as React from '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 { MonitorModel } from './monitor-model';
-import { MonitorConnection } from './monitor-connection';
+import { SerialModel } from '../serial-model';
+import { SerialConnectionManager } from '../serial-connection-manager';
 import dateFormat = require('dateformat');
 import { messagesToLines, truncateLines } from './monitor-utils';
 
@@ -24,7 +24,7 @@ export class SerialMonitorOutput extends React.Component<
     this.listRef = React.createRef();
     this.state = {
       lines: [],
-      timestamp: this.props.monitorModel.timestamp,
+      timestamp: this.props.serialModel.timestamp,
       charCount: 0,
     };
   }
@@ -43,6 +43,7 @@ export class SerialMonitorOutput extends React.Component<
         itemCount={this.state.lines.length}
         itemSize={18}
         width={'100%'}
+        style={{ whiteSpace: 'nowrap' }}
         ref={this.listRef}
       >
         {Row}
@@ -57,7 +58,7 @@ export class SerialMonitorOutput extends React.Component<
   componentDidMount(): void {
     this.scrollToBottom();
     this.toDisposeBeforeUnmount.pushAll([
-      this.props.monitorConnection.onRead(({ messages }) => {
+      this.props.serialConnection.onRead(({ messages }) => {
         const [newLines, totalCharCount] = messagesToLines(
           messages,
           this.state.lines,
@@ -71,10 +72,12 @@ export class SerialMonitorOutput extends React.Component<
         });
         this.scrollToBottom();
       }),
-      this.props.clearConsoleEvent(() => this.setState({ lines: [] })),
-      this.props.monitorModel.onChange(({ property }) => {
+      this.props.clearConsoleEvent(() =>
+        this.setState({ lines: [], charCount: 0 })
+      ),
+      this.props.serialModel.onChange(({ property }) => {
         if (property === 'timestamp') {
-          const { timestamp } = this.props.monitorModel;
+          const { timestamp } = this.props.serialModel;
           this.setState({ timestamp });
         }
         if (property === 'autoscroll') {
@@ -90,7 +93,7 @@ export class SerialMonitorOutput extends React.Component<
   }
 
   scrollToBottom = ((): void => {
-    if (this.listRef.current && this.props.monitorModel.autoscroll) {
+    if (this.listRef.current && this.props.serialModel.autoscroll) {
       this.listRef.current.scrollToItem(this.state.lines.length, 'end');
     }
   }).bind(this);
@@ -112,8 +115,10 @@ const _Row = ({
   return (
     (data.lines[index].lineLen && (
       <div style={style}>
-        {timestamp}
-        {data.lines[index].message}
+        <pre>
+          {timestamp}
+          {data.lines[index].message}
+        </pre>
       </div>
     )) ||
     null
@@ -123,8 +128,8 @@ const Row = React.memo(_Row, areEqual);
 
 export namespace SerialMonitorOutput {
   export interface Props {
-    readonly monitorModel: MonitorModel;
-    readonly monitorConnection: MonitorConnection;
+    readonly serialModel: SerialModel;
+    readonly serialConnection: SerialConnectionManager;
     readonly clearConsoleEvent: Event<void>;
     readonly height: number;
   }

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

@@ -0,0 +1,106 @@
+import { ThemeService } from '@theia/core/lib/browser/theming';
+import { injectable, inject } from 'inversify';
+import {
+  Command,
+  CommandRegistry,
+  MaybePromise,
+  MenuModelRegistry,
+} from '@theia/core';
+import { SerialModel } from '../serial-model';
+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 { SerialConfig } from '../../../common/protocol';
+import { SerialConnectionManager } from '../serial-connection-manager';
+import { SerialPlotter } from './protocol';
+import { BoardsServiceProvider } from '../../boards/boards-service-provider';
+const queryString = require('query-string');
+
+export namespace SerialPlotterContribution {
+  export namespace Commands {
+    export const OPEN: Command = {
+      id: 'serial-plotter-open',
+      label: 'Serial Plotter',
+      category: 'Arduino',
+    };
+  }
+}
+
+@injectable()
+export class PlotterFrontendContribution extends Contribution {
+  protected window: Window | null;
+  protected url: string;
+  protected wsPort: number;
+
+  @inject(SerialModel)
+  protected readonly model: SerialModel;
+
+  @inject(ThemeService)
+  protected readonly themeService: ThemeService;
+
+  @inject(SerialConnectionManager)
+  protected readonly serialConnection: SerialConnectionManager;
+
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceProvider: BoardsServiceProvider;
+
+  onStart(app: FrontendApplication): MaybePromise<void> {
+    this.url = new Endpoint({ path: '/plotter' }).getRestUrl().toString();
+
+    ipcRenderer.on('CLOSE_CHILD_WINDOW', async () => {
+      if (!!this.window) {
+        this.window = null;
+      }
+    });
+    return super.onStart(app);
+  }
+
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(SerialPlotterContribution.Commands.OPEN, {
+      execute: this.connect.bind(this),
+    });
+  }
+
+  registerMenus(menus: MenuModelRegistry): void {
+    menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
+      commandId: SerialPlotterContribution.Commands.OPEN.id,
+      label: SerialPlotterContribution.Commands.OPEN.label,
+      order: '7',
+    });
+  }
+
+  async connect(): Promise<void> {
+    if (!!this.window) {
+      this.window.focus();
+      return;
+    }
+    const wsPort = this.serialConnection.getWsPort();
+    if (wsPort) {
+      this.open(wsPort);
+    } else {
+      this.messageService.error(`Couldn't open serial plotter`);
+    }
+  }
+
+  protected async open(wsPort: number): Promise<void> {
+    const initConfig: Partial<SerialPlotter.Config> = {
+      baudrates: SerialConfig.BaudRates.map((b) => b),
+      currentBaudrate: this.model.baudRate,
+      currentLineEnding: this.model.lineEnding,
+      darkTheme: this.themeService.getCurrentTheme().type === 'dark',
+      wsPort,
+      interpolate: this.model.interpolate,
+      connected: await this.serialConnection.isBESerialConnected(),
+      serialPort: this.boardsServiceProvider.boardsConfig.selectedPort?.address,
+    };
+    const urlWithParams = queryString.stringifyUrl(
+      {
+        url: this.url,
+        query: initConfig,
+      },
+      { arrayFormat: 'comma' }
+    );
+    this.window = window.open(urlWithParams, 'serialPlotter');
+  }
+}

arduino-ide-extension/src/browser/serial/plotter/protocol.ts

@@ -0,0 +1,26 @@
+export namespace SerialPlotter {
+  export type Config = {
+    currentBaudrate: number;
+    baudrates: number[];
+    currentLineEnding: string;
+    darkTheme: boolean;
+    wsPort: number;
+    interpolate: boolean;
+    serialPort: string;
+    connected: boolean;
+    generate?: boolean;
+  };
+  export namespace Protocol {
+    export enum Command {
+      PLOTTER_SET_BAUDRATE = 'PLOTTER_SET_BAUDRATE',
+      PLOTTER_SET_LINE_ENDING = 'PLOTTER_SET_LINE_ENDING',
+      PLOTTER_SET_INTERPOLATE = 'PLOTTER_SET_INTERPOLATE',
+      PLOTTER_SEND_MESSAGE = 'PLOTTER_SEND_MESSAGE',
+      MIDDLEWARE_CONFIG_CHANGED = 'MIDDLEWARE_CONFIG_CHANGED',
+    }
+    export type Message = {
+      command: SerialPlotter.Protocol.Command;
+      data?: any;
+    };
+  }
+}

arduino-ide-extension/src/browser/serial/serial-connection-manager.ts

@@ -0,0 +1,360 @@
+import { injectable, inject } from 'inversify';
+import { Emitter, Event } from '@theia/core/lib/common/event';
+import { MessageService } from '@theia/core/lib/common/message-service';
+import {
+  SerialService,
+  SerialConfig,
+  SerialError,
+  Status,
+  SerialServiceClient,
+} from '../../common/protocol/serial-service';
+import { BoardsServiceProvider } from '../boards/boards-service-provider';
+import {
+  Board,
+  BoardsService,
+} from '../../common/protocol/boards-service';
+import { BoardsConfig } from '../boards/boards-config';
+import { SerialModel } from './serial-model';
+import { ThemeService } from '@theia/core/lib/browser/theming';
+import { CoreService } from '../../common/protocol';
+import { nls } from '@theia/core/lib/common/nls';
+
+@injectable()
+export class SerialConnectionManager {
+  protected config: Partial<SerialConfig> = {
+    board: undefined,
+    port: undefined,
+    baudRate: undefined,
+  };
+
+  protected readonly onConnectionChangedEmitter = new Emitter<boolean>();
+
+  /**
+   * This emitter forwards all read events **if** the connection is established.
+   */
+  protected readonly onReadEmitter = new Emitter<{ messages: string[] }>();
+
+  /**
+   * Array for storing previous serial errors received from the server, and based on the number of elements in this array,
+   * we adjust the reconnection delay.
+   * Super naive way: we wait `array.length * 1000` ms. Once we hit 10 errors, we do not try to reconnect and clean the array.
+   */
+  protected serialErrors: SerialError[] = [];
+  protected reconnectTimeout?: number;
+
+  /**
+   * When the websocket server is up on the backend, we save the port here, so that the client knows how to connect to it
+   * */
+  protected wsPort?: number;
+  protected webSocket?: WebSocket;
+
+  constructor(
+    @inject(SerialModel) protected readonly serialModel: SerialModel,
+    @inject(SerialService) protected readonly serialService: SerialService,
+    @inject(SerialServiceClient)
+    protected readonly serialServiceClient: SerialServiceClient,
+    @inject(BoardsService) protected readonly boardsService: BoardsService,
+    @inject(BoardsServiceProvider)
+    protected readonly boardsServiceProvider: BoardsServiceProvider,
+    @inject(MessageService) protected messageService: MessageService,
+    @inject(ThemeService) protected readonly themeService: ThemeService,
+    @inject(CoreService) protected readonly core: CoreService,
+    @inject(BoardsServiceProvider)
+    protected readonly boardsServiceClientImpl: BoardsServiceProvider
+  ) {
+    this.serialServiceClient.onWebSocketChanged(
+      this.handleWebSocketChanged.bind(this)
+    );
+    this.serialServiceClient.onBaudRateChanged((baudRate) => {
+      if (this.serialModel.baudRate !== baudRate) {
+        this.serialModel.baudRate = baudRate;
+      }
+    });
+    this.serialServiceClient.onLineEndingChanged((lineending) => {
+      if (this.serialModel.lineEnding !== lineending) {
+        this.serialModel.lineEnding = lineending;
+      }
+    });
+    this.serialServiceClient.onInterpolateChanged((interpolate) => {
+      if (this.serialModel.interpolate !== interpolate) {
+        this.serialModel.interpolate = interpolate;
+      }
+    });
+
+    this.serialServiceClient.onError(this.handleError.bind(this));
+    this.boardsServiceProvider.onBoardsConfigChanged(
+      this.handleBoardConfigChange.bind(this)
+    );
+
+    // Handles the `baudRate` changes by reconnecting if required.
+    this.serialModel.onChange(async ({ property }) => {
+      if (
+        property === 'baudRate' &&
+        (await this.serialService.isSerialPortOpen())
+      ) {
+        const { boardsConfig } = this.boardsServiceProvider;
+        this.handleBoardConfigChange(boardsConfig);
+      }
+
+      // update the current values in the backend and propagate to websocket clients
+      this.serialService.updateWsConfigParam({
+        ...(property === 'lineEnding' && {
+          currentLineEnding: this.serialModel.lineEnding,
+        }),
+        ...(property === 'interpolate' && {
+          interpolate: this.serialModel.interpolate,
+        }),
+      });
+    });
+
+    this.themeService.onDidColorThemeChange((theme) => {
+      this.serialService.updateWsConfigParam({
+        darkTheme: theme.newTheme.type === 'dark',
+      });
+    });
+  }
+
+  /**
+   * Updated the config in the BE passing only the properties that has changed.
+   * BE will create a new connection if needed.
+   *
+   * @param newConfig the porperties of the config that has changed
+   */
+  async setConfig(newConfig: Partial<SerialConfig>): Promise<void> {
+    let configHasChanged = false;
+    Object.keys(this.config).forEach((key: keyof SerialConfig) => {
+      if (newConfig[key] !== this.config[key]) {
+        configHasChanged = true;
+        this.config = { ...this.config, [key]: newConfig[key] };
+      }
+    });
+
+    if (configHasChanged) {
+      this.serialService.updateWsConfigParam({
+        currentBaudrate: this.config.baudRate,
+        serialPort: this.config.port?.address,
+      });
+
+      if (isSerialConfig(this.config)) {
+        this.serialService.setSerialConfig(this.config);
+      }
+    }
+  }
+
+  getConfig(): Partial<SerialConfig> {
+    return this.config;
+  }
+
+  getWsPort(): number | undefined {
+    return this.wsPort;
+  }
+
+  protected handleWebSocketChanged(wsPort: number): void {
+    this.wsPort = wsPort;
+  }
+
+  get serialConfig(): SerialConfig | undefined {
+    return isSerialConfig(this.config)
+      ? (this.config as SerialConfig)
+      : undefined;
+  }
+
+  async isBESerialConnected(): Promise<boolean> {
+    return await this.serialService.isSerialPortOpen();
+  }
+
+  openWSToBE(): void {
+    if (!isSerialConfig(this.config)) {
+      this.messageService.error(
+        `Please select a board and a port to open the serial connection.`
+      );
+    }
+
+    if (!this.webSocket && this.wsPort) {
+      try {
+        this.webSocket = new WebSocket(`ws://localhost:${this.wsPort}`);
+        this.webSocket.onmessage = (res) => {
+          const messages = JSON.parse(res.data);
+          this.onReadEmitter.fire({ messages });
+        };
+      } catch {
+        this.messageService.error(`Unable to connect to websocket`);
+      }
+    }
+  }
+
+  closeWStoBE(): void {
+    if (this.webSocket) {
+      try {
+        this.webSocket.close();
+        this.webSocket = undefined;
+      } catch {
+        this.messageService.error(`Unable to close websocket`);
+      }
+    }
+  }
+
+  /**
+   * Handles error on the SerialServiceClient and try to reconnect, eventually
+   */
+  async handleError(error: SerialError): Promise<void> {
+    if (!(await this.serialService.isSerialPortOpen())) return;
+    const { code, config } = error;
+    const { board, port } = config;
+    const options = { timeout: 3000 };
+    switch (code) {
+      case SerialError.ErrorCodes.CLIENT_CANCEL: {
+        console.debug(
+          `Serial connection was canceled by client: ${Serial.Config.toString(
+            this.config
+          )}.`
+        );
+        break;
+      }
+      case SerialError.ErrorCodes.DEVICE_BUSY: {
+        this.messageService.warn(
+          nls.localize(
+            'arduino/serial/connectionBusy',
+            'Connection failed. Serial port is busy: {0}',
+            port.address
+          ),
+          options
+        );
+        this.serialErrors.push(error);
+        break;
+      }
+      case SerialError.ErrorCodes.DEVICE_NOT_CONFIGURED: {
+        this.messageService.info(
+          nls.localize(
+            'arduino/serial/disconnected',
+            'Disconnected {0} from {1}.',
+            Board.toString(board, {
+              useFqbn: false,
+            }),
+            port.address
+          ),
+          options
+        );
+        break;
+      }
+      case undefined: {
+        this.messageService.error(
+          nls.localize(
+            'arduino/serial/unexpectedError',
+            'Unexpected error. Reconnecting {0} on port {1}.',
+            Board.toString(board),
+            port.address
+          ),
+          options
+        );
+        console.error(JSON.stringify(error));
+        break;
+      }
+    }
+
+    if ((await this.serialService.clientsAttached()) > 0) {
+      if (this.serialErrors.length >= 10) {
+        this.messageService.warn(
+          nls.localize(
+            'arduino/serial/failedReconnect',
+            'Failed to reconnect {0} to serial port after 10 consecutive attempts. The {1} serial port is busy.',
+            Board.toString(board, {
+              useFqbn: false,
+            }),
+            port.address
+          )
+        );
+        this.serialErrors.length = 0;
+      } else {
+        const attempts = this.serialErrors.length || 1;
+        if (this.reconnectTimeout !== undefined) {
+          // Clear the previous timer.
+          window.clearTimeout(this.reconnectTimeout);
+        }
+        const timeout = attempts * 1000;
+        this.messageService.warn(
+          nls.localize(
+            'arduino/serial/reconnect',
+            'Reconnecting {0} to {1} in {2} seconds...',
+            Board.toString(board, {
+              useFqbn: false,
+            }),
+            port.address,
+            attempts.toString()
+          )
+        );
+        this.reconnectTimeout = window.setTimeout(
+          () => this.reconnectAfterUpload(),
+          timeout
+        );
+      }
+    }
+  }
+
+  async reconnectAfterUpload(): Promise<void> {
+    try {
+      if (isSerialConfig(this.config)) {
+        await this.boardsServiceClientImpl.waitUntilAvailable(
+          Object.assign(this.config.board, { port: this.config.port }),
+          10_000
+        );
+        this.serialService.connectSerialIfRequired();
+      }
+    } catch (waitError) {
+      this.messageService.error(
+        nls.localize(
+          'arduino/sketch/couldNotConnectToSerial',
+          'Could not reconnect to serial port. {0}',
+          waitError.toString()
+        )
+      );
+    }
+  }
+
+  /**
+   * Sends the data to the connected serial port.
+   * The desired EOL is appended to `data`, you do not have to add it.
+   * It is a NOOP if connected.
+   */
+  async send(data: string): Promise<Status> {
+    if (!(await this.serialService.isSerialPortOpen())) {
+      return Status.NOT_CONNECTED;
+    }
+    return new Promise<Status>((resolve) => {
+      this.serialService
+        .sendMessageToSerial(data + this.serialModel.lineEnding)
+        .then(() => resolve(Status.OK));
+    });
+  }
+
+  get onConnectionChanged(): Event<boolean> {
+    return this.onConnectionChangedEmitter.event;
+  }
+
+  get onRead(): Event<{ messages: any }> {
+    return this.onReadEmitter.event;
+  }
+
+  protected async handleBoardConfigChange(
+    boardsConfig: BoardsConfig.Config
+  ): Promise<void> {
+    const { selectedBoard: board, selectedPort: port } = boardsConfig;
+    const { baudRate } = this.serialModel;
+    const newConfig: Partial<SerialConfig> = { board, port, baudRate };
+    this.setConfig(newConfig);
+  }
+}
+
+export namespace Serial {
+  export namespace Config {
+    export function toString(config: Partial<SerialConfig>): string {
+      if (!isSerialConfig(config)) return '';
+      const { board, port } = config;
+      return `${Board.toString(board)} ${port.address}`;
+    }
+  }
+}
+
+function isSerialConfig(config: Partial<SerialConfig>): config is SerialConfig {
+  return !!config.board && !!config.baudRate && !!config.port;
+}

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

@@ -1,6 +1,6 @@
 import { injectable, inject } from 'inversify';
 import { Emitter, Event } from '@theia/core/lib/common/event';
-import { MonitorConfig } from '../../common/protocol/monitor-service';
+import { SerialConfig } from '../../common/protocol';
 import {
   FrontendApplicationContribution,
   LocalStorageService,
@@ -8,8 +8,8 @@ import {
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
 
 @injectable()
-export class MonitorModel implements FrontendApplicationContribution {
-  protected static STORAGE_ID = 'arduino-monitor-model';
+export class SerialModel implements FrontendApplicationContribution {
+  protected static STORAGE_ID = 'arduino-serial-model';
 
   @inject(LocalStorageService)
   protected readonly localStorageService: LocalStorageService;
@@ -18,26 +18,28 @@ export class MonitorModel implements FrontendApplicationContribution {
   protected readonly boardsServiceClient: BoardsServiceProvider;
 
   protected readonly onChangeEmitter: Emitter<
-    MonitorModel.State.Change<keyof MonitorModel.State>
+    SerialModel.State.Change<keyof SerialModel.State>
   >;
   protected _autoscroll: boolean;
   protected _timestamp: boolean;
-  protected _baudRate: MonitorConfig.BaudRate;
-  protected _lineEnding: MonitorModel.EOL;
+  protected _baudRate: SerialConfig.BaudRate;
+  protected _lineEnding: SerialModel.EOL;
+  protected _interpolate: boolean;
 
   constructor() {
     this._autoscroll = true;
     this._timestamp = false;
-    this._baudRate = MonitorConfig.BaudRate.DEFAULT;
-    this._lineEnding = MonitorModel.EOL.DEFAULT;
+    this._baudRate = SerialConfig.BaudRate.DEFAULT;
+    this._lineEnding = SerialModel.EOL.DEFAULT;
+    this._interpolate = false;
     this.onChangeEmitter = new Emitter<
-      MonitorModel.State.Change<keyof MonitorModel.State>
+      SerialModel.State.Change<keyof SerialModel.State>
     >();
   }
 
   onStart(): void {
     this.localStorageService
-      .getData<MonitorModel.State>(MonitorModel.STORAGE_ID)
+      .getData<SerialModel.State>(SerialModel.STORAGE_ID)
       .then((state) => {
         if (state) {
           this.restoreState(state);
@@ -45,7 +47,7 @@ export class MonitorModel implements FrontendApplicationContribution {
       });
   }
 
-  get onChange(): Event<MonitorModel.State.Change<keyof MonitorModel.State>> {
+  get onChange(): Event<SerialModel.State.Change<keyof SerialModel.State>> {
     return this.onChangeEmitter.event;
   }
 
@@ -78,11 +80,11 @@ export class MonitorModel implements FrontendApplicationContribution {
     );
   }
 
-  get baudRate(): MonitorConfig.BaudRate {
+  get baudRate(): SerialConfig.BaudRate {
     return this._baudRate;
   }
 
-  set baudRate(baudRate: MonitorConfig.BaudRate) {
+  set baudRate(baudRate: SerialConfig.BaudRate) {
     this._baudRate = baudRate;
     this.storeState().then(() =>
       this.onChangeEmitter.fire({
@@ -92,11 +94,11 @@ export class MonitorModel implements FrontendApplicationContribution {
     );
   }
 
-  get lineEnding(): MonitorModel.EOL {
+  get lineEnding(): SerialModel.EOL {
     return this._lineEnding;
   }
 
-  set lineEnding(lineEnding: MonitorModel.EOL) {
+  set lineEnding(lineEnding: SerialModel.EOL) {
     this._lineEnding = lineEnding;
     this.storeState().then(() =>
       this.onChangeEmitter.fire({
@@ -106,29 +108,46 @@ export class MonitorModel implements FrontendApplicationContribution {
     );
   }
 
-  protected restoreState(state: MonitorModel.State): void {
+  get interpolate(): boolean {
+    return this._interpolate;
+  }
+
+  set interpolate(i: boolean) {
+    this._interpolate = i;
+    this.storeState().then(() =>
+      this.onChangeEmitter.fire({
+        property: 'interpolate',
+        value: this._interpolate,
+      })
+    );
+  }
+
+  protected restoreState(state: SerialModel.State): void {
     this._autoscroll = state.autoscroll;
     this._timestamp = state.timestamp;
     this._baudRate = state.baudRate;
     this._lineEnding = state.lineEnding;
+    this._interpolate = state.interpolate;
   }
 
   protected async storeState(): Promise<void> {
-    return this.localStorageService.setData(MonitorModel.STORAGE_ID, {
+    return this.localStorageService.setData(SerialModel.STORAGE_ID, {
       autoscroll: this._autoscroll,
       timestamp: this._timestamp,
       baudRate: this._baudRate,
       lineEnding: this._lineEnding,
+      interpolate: this._interpolate,
     });
   }
 }
 
-export namespace MonitorModel {
+export namespace SerialModel {
   export interface State {
     autoscroll: boolean;
     timestamp: boolean;
-    baudRate: MonitorConfig.BaudRate;
+    baudRate: SerialConfig.BaudRate;
     lineEnding: EOL;
+    interpolate: boolean;
   }
   export namespace State {
     export interface Change<K extends keyof State> {

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

@@ -0,0 +1,48 @@
+import { injectable } from 'inversify';
+import { Emitter } from '@theia/core/lib/common/event';
+import {
+  SerialServiceClient,
+  SerialError,
+  SerialConfig,
+} from '../../common/protocol/serial-service';
+import { SerialModel } from './serial-model';
+
+@injectable()
+export class SerialServiceClientImpl implements SerialServiceClient {
+  protected readonly onErrorEmitter = new Emitter<SerialError>();
+  readonly onError = this.onErrorEmitter.event;
+
+  protected readonly onWebSocketChangedEmitter = new Emitter<number>();
+  readonly onWebSocketChanged = this.onWebSocketChangedEmitter.event;
+
+  protected readonly onBaudRateChangedEmitter =
+    new Emitter<SerialConfig.BaudRate>();
+  readonly onBaudRateChanged = this.onBaudRateChangedEmitter.event;
+
+  protected readonly onLineEndingChangedEmitter =
+    new Emitter<SerialModel.EOL>();
+  readonly onLineEndingChanged = this.onLineEndingChangedEmitter.event;
+
+  protected readonly onInterpolateChangedEmitter = new Emitter<boolean>();
+  readonly onInterpolateChanged = this.onInterpolateChangedEmitter.event;
+
+  notifyError(error: SerialError): void {
+    this.onErrorEmitter.fire(error);
+  }
+
+  notifyWebSocketChanged(message: number): void {
+    this.onWebSocketChangedEmitter.fire(message);
+  }
+
+  notifyBaudRateChanged(message: SerialConfig.BaudRate): void {
+    this.onBaudRateChangedEmitter.fire(message);
+  }
+
+  notifyLineEndingChanged(message: SerialModel.EOL): void {
+    this.onLineEndingChangedEmitter.fire(message);
+  }
+
+  notifyInterpolateChanged(message: boolean): void {
+    this.onInterpolateChangedEmitter.fire(message);
+  }
+}

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

@@ -1,224 +1,237 @@
 div#select-board-dialog {
-    margin: 5px;
+  margin: 5px;
 }
 
 div#select-board-dialog .selectBoardContainer .body {
-    display: flex;
-    overflow: hidden;
+  display: flex;
+  overflow: hidden;
 }
 
 .select-board-dialog .head {
-    margin: 5px;
+  margin: 5px;
 }
 
 div.dialogContent.select-board-dialog > div.head .title {
-    font-weight: 400;
-    letter-spacing: .02em;
-    font-size: 1.2em;
-    color: var(--theia-arduino-branding-primary);
-    margin-bottom: 10px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  font-size: 1.2em;
+  color: var(--theia-arduino-branding-primary);
+  margin-bottom: 10px;
 }
 
 div#select-board-dialog .selectBoardContainer .body .list .item.selected {
-    background: var(--theia-secondaryButton-hoverBackground);
+  background: var(--theia-secondaryButton-hoverBackground);
 }
 
 div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
-    color: var(--theia-arduino-branding-primary);
+  color: var(--theia-arduino-branding-primary);
 }
 
 #select-board-dialog .selectBoardContainer .search,
 #select-board-dialog .selectBoardContainer .search input,
 #select-board-dialog .selectBoardContainer .list,
 #select-board-dialog .selectBoardContainer .list {
-    background: var(--theia-editor-background);
+  background: var(--theia-editor-background);
 }
 
 #select-board-dialog .selectBoardContainer .body .search input {
-    border: none;
-    width: 100%;
-    height: auto;
-    max-height: 37px;
-    padding: 10px 5px 10px 10px;
-    margin: 0;
-    vertical-align: top;
-    display: flex;
-    color: var(--theia-editor-foreground);
+  border: none;
+  width: 100%;
+  height: auto;
+  max-height: 37px;
+  padding: 10px 5px 10px 10px;
+  margin: 0;
+  vertical-align: top;
+  display: flex;
+  color: var(--theia-editor-foreground);
 }
 
 #select-board-dialog .selectBoardContainer .body .search input:focus {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 #select-board-dialog .selectBoardContainer .body .container {
-    flex: 1;
-    padding: 0px 10px 0px 0px;
-    min-width: 240px;
-    max-width: 240px;
+  flex: 1;
+  padding: 0px 10px 0px 0px;
+  min-width: 240px;
+  max-width: 240px;
 }
 
 #select-board-dialog .selectBoardContainer .body .left.container .content {
-    margin: 0 5px 0 0;
+  margin: 0 5px 0 0;
 }
 
 #select-board-dialog .selectBoardContainer .body .right.container .content {
-    margin: 0 0 0 5px;
+  margin: 0 0 0 5px;
 }
 
 #select-board-dialog .selectBoardContainer .body .container .content .title {
-    color: #7f8c8d;
-    padding: 0px 0px 10px 0px;
-    text-transform: uppercase;
+  color: #7f8c8d;
+  padding: 0px 0px 10px 0px;
+  text-transform: uppercase;
 }
 
 #select-board-dialog .selectBoardContainer .body .container .content .footer {
-    padding: 10px 5px 10px 0px;
+  padding: 10px 5px 10px 0px;
 }
 
 #select-board-dialog .selectBoardContainer .body .container .content .loading {
-    font-size: var(--theia-ui-font-size1);
-    color: var(--theia-arduino-branding-secondary);
-    padding: 10px 5px 10px 10px;
-    text-transform: uppercase;
-    /* The max, min-height comes from `.body .list` 200px + 47px top padding - 2 * 10px top padding */
-    max-height: 227px;
-    min-height: 227px;
+  font-size: var(--theia-ui-font-size1);
+  color: var(--theia-arduino-branding-secondary);
+  padding: 10px 5px 10px 10px;
+  text-transform: uppercase;
+  /* The max, min-height comes from `.body .list` 200px + 47px top padding - 2 * 10px top padding */
+  max-height: 227px;
+  min-height: 227px;
 }
 
 #select-board-dialog .selectBoardContainer .body .list .item {
-    padding: 10px 5px 10px 10px;
-    display: flex;
-    justify-content: end;
-    white-space: nowrap;
-    overflow-x: hidden;
+  padding: 10px 5px 10px 10px;
+  display: flex;
+  justify-content: end;
+  white-space: nowrap;
+  overflow-x: hidden;
 }
 
 #select-board-dialog .selectBoardContainer .body .list .item .selected-icon {
-    margin-left: auto;
+  margin-left: auto;
 }
 
 #select-board-dialog .selectBoardContainer .body .list .item .details {
-    font-size: var(--theia-ui-font-size1);
-    opacity: var(--theia-mod-disabled-opacity);
-    width: 155px; /* used heuristics for the calculation */
-    white-space: pre;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  font-size: var(--theia-ui-font-size1);
+  opacity: var(--theia-mod-disabled-opacity);
+  width: 155px; /* used heuristics for the calculation */
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #select-board-dialog .selectBoardContainer .body .list .item.missing {
-    opacity: var(--theia-mod-disabled-opacity);
+  opacity: var(--theia-mod-disabled-opacity);
 }
 
 #select-board-dialog .selectBoardContainer .body .list .item:hover {
-    background: var(--theia-secondaryButton-hoverBackground);
+  background: var(--theia-secondaryButton-hoverBackground);
 }
 
 #select-board-dialog .selectBoardContainer .body .list .label {
-    max-width: 215px;
-    width: 215px;
-    white-space: pre;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  max-width: 215px;
+  width: 215px;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #select-board-dialog .selectBoardContainer .body .list {
-    max-height: 200px;
-    min-height: 200px;
-    overflow-y: auto;
+  max-height: 200px;
+  min-height: 200px;
+  overflow-y: auto;
 }
 
 #select-board-dialog .selectBoardContainer .body .ports.list {
-    margin: 47px 0px 0px 0px /* 47 is 37 as input height for the `Boards`, plus 10 margin bottom. */
+  margin: 47px 0px 0px 0px; /* 47 is 37 as input height for the `Boards`, plus 10 margin bottom. */
 }
 
 #select-board-dialog .selectBoardContainer .body .search {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    padding-right: 5px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  padding-right: 5px;
 }
 
 .p-Widget.dialogOverlay .dialogContent.select-board-dialog {
-    width: 500px;
+  width: 500px;
 }
 .arduino-boards-toolbar-item-container {
-    margin-left: 3px;
+  margin-left: 3px;
 }
 
-.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container {
-    display: flex;
-    align-items: baseline;
-    width: 100%;
+.arduino-boards-toolbar-item-container
+  .arduino-boards-toolbar-item
+  .inner-container {
+  display: flex;
+  align-items: baseline;
+  width: 100%;
 }
 
-.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .notAttached {
-    width: 10px;
-    height: 10px;
-    color: red;
-    margin: 0 5px;
+.arduino-boards-toolbar-item-container
+  .arduino-boards-toolbar-item
+  .inner-container
+  .notAttached {
+  width: 10px;
+  height: 10px;
+  color: red;
+  margin: 0 5px;
 }
 
-.arduino-boards-toolbar-item-container .arduino-boards-toolbar-item .inner-container .guessed {
-    width: 10px;
-    height: 10px;
-    color: var(--theia-warningBackground);
-    margin: 0 5px;
+.arduino-boards-toolbar-item-container
+  .arduino-boards-toolbar-item
+  .inner-container
+  .guessed {
+  width: 10px;
+  height: 10px;
+  color: var(--theia-warningBackground);
+  margin: 0 5px;
 }
 
 .arduino-boards-toolbar-item-container {
-    display: flex;
-    align-items: center;
-    width: 220px;
+  display: flex;
+  align-items: center;
+  width: 220px;
 }
 
 .arduino-boards-toolbar-item .label {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    margin: 0 5px;
-    width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: 0 5px;
+  width: 100%;
 }
 
 .arduino-boards-toolbar-item .caret {
-    width: 10px;
-    margin-right: 5px;
+  width: 10px;
+  margin-right: 5px;
 }
 
 .arduino-boards-toolbar-item {
-    background: var(--theia-tab-unfocusedActiveBackground);
-    color: var(--theia-foreground);
-    height: 22px;
-    display: flex;
-    width: 100%;
-    overflow: hidden;
-    margin: 0px 3px 0px 3px;
-    border: 1px solid var(--theia-dropdown-border);
+  background: var(--theia-tab-unfocusedActiveBackground);
+  color: var(--theia-foreground);
+  height: 22px;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  margin: 0px 3px 0px 3px;
+  border: 1px solid var(--theia-dropdown-border);
 }
 
 .arduino-boards-dropdown-list {
-    border: 3px solid var(--theia-activityBar-background);
-    margin: -1px;
-    z-index: 1;
-    border: 1px solid var(--theia-dropdown-border);
+  border: 3px solid var(--theia-activityBar-background);
+  margin: -1px;
+  z-index: 1;
+  border: 1px solid var(--theia-dropdown-border);
 }
 
 .arduino-boards-dropdown-item {
-    font-size: var(--theia-ui-font-size1);
-    display: flex;
-    padding: 10px;
-    cursor: pointer;
-    color: var(--theia-foreground);
-    background: var(--theia-tab-unfocusedActiveBackground);
-    border: 1px solid var(--theia-tab-unfocusedActiveBackground);
+  font-size: var(--theia-ui-font-size1);
+  display: flex;
+  padding: 10px;
+  cursor: pointer;
+  color: var(--theia-foreground);
+  background: var(--theia-tab-unfocusedActiveBackground);
+  border: 1px solid var(--theia-tab-unfocusedActiveBackground);
 }
 
 .arduino-boards-dropdown-item .fa-check {
-    color: var(--theia-arduino-branding-primary);
-    align-self: center;
+  color: var(--theia-arduino-branding-primary);
+  align-self: center;
 }
 
 .arduino-boards-dropdown-item.selected,
 .arduino-boards-dropdown-item:hover {
-    border: 1px solid var(--theia-focusBorder);
+  border: 1px solid var(--theia-focusBorder);
+}
+
+.arduino-board-dropdown-footer {
+  color: var(--theia-arduino-branding-primary);
+  border-top: 1px solid var(--theia-dropdown-border);
 }

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

@@ -0,0 +1,78 @@
+.ide-updater-dialog {
+  width: 546px;
+}
+
+.ide-updater-dialog .bold {
+  font-weight: bold;
+}
+
+.ide-updater-dialog--pre-download {
+  display: flex;
+}
+
+.ide-updater-dialog--logo-container {
+  margin-right: 28px;
+}
+
+.ide-updater-dialog--logo {
+  background: url('./ide-logo.png') round;
+  width: 52px;
+  height: 52px;
+}
+
+.dialogContent.ide-updater-dialog
+  .ide-updater-dialog--content
+  .ide-updater-dialog--new-version-text.dialogSection {
+  margin-top: 0;
+}
+
+.ide-updater-dialog .changelog-container {
+  background: white;
+  border: 1px solid #dae3e3;
+  border-radius: 2px;
+  font-size: 12px;
+  height: 180px;
+  overflow: auto;
+  padding: 0 12px;
+  cursor: text;
+}
+
+.ide-updater-dialog .changelog-container a {
+  color: #018184;
+}
+
+.ide-updater-dialog .changelog-container a:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.ide-updater-dialog .changelog-container code {
+  background: #ecf1f1;
+  border-radius: 2px;
+  padding: 0 2px;
+}
+
+.ide-updater-dialog .changelog-container a code {
+  color: #018184;
+}
+
+.ide-updater-dialog .buttons-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 28px;
+}
+
+.ide-updater-dialog .buttons-container a.theia-button {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ide-updater-dialog .buttons-container a.theia-button:hover {
+  color: var(--theia-button-foreground);
+}
+
+.ide-updater-dialog .buttons-container .push {
+  margin-right: auto;
+}

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

@@ -9,95 +9,102 @@
 @import './editor.css';
 @import './settings-dialog.css';
 @import './firmware-uploader-dialog.css';
+@import './ide-updater-dialog.css';
 @import './certificate-uploader-dialog.css';
+@import './user-fields-dialog.css';
 @import './debug.css';
 @import './sketchbook.css';
 @import './cloud-sketchbook.css';
 @import './fonts.css';
 @import './custom-codicon.css';
+@import './progress-bar.css';
 
 .theia-input.warning:focus {
-    outline-width: 1px;
-    outline-style: solid;
-    outline-offset: -1px;
-    opacity: 1 !important;
-    color: var(--theia-warningForeground);
-    background-color: var(--theia-warningBackground);
+  outline-width: 1px;
+  outline-style: solid;
+  outline-offset: -1px;
+  opacity: 1 !important;
+  color: var(--theia-warningForeground);
+  background-color: var(--theia-warningBackground);
 }
 
 .theia-input.warning {
-    background-color: var(--theia-warningBackground);
+  background-color: var(--theia-warningBackground);
 }
 
-.theia-input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: var(--theia-warningForeground);
-    background-color: var(--theia-warningBackground);
-    opacity: 1; /* Firefox */
+.theia-input.warning::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: var(--theia-warningForeground);
+  background-color: var(--theia-warningBackground);
+  opacity: 1; /* Firefox */
 }
 
-.theia-input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: var(--theia-warningForeground);
-    background-color: var(--theia-warningBackground);
+.theia-input.warning:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: var(--theia-warningForeground);
+  background-color: var(--theia-warningBackground);
 }
 
-.theia-input.warning::-ms-input-placeholder { /* Microsoft Edge */
-    color: var(--theia-warningForeground);
-    background-color: var(--theia-warningBackground);
+.theia-input.warning::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: var(--theia-warningForeground);
+  background-color: var(--theia-warningBackground);
 }
 
-/* Makes the sidepanel a bit wider when opening the widget */ 
+/* Makes the sidepanel a bit wider when opening the widget */
 .p-DockPanel-widget {
-    min-width: 200px;
-    min-height: 200px;
+  min-width: 200px;
+  min-height: 200px;
 }
 
 /* Overrule the default Theia CSS button styles. */
 button.theia-button,
 .theia-button {
-    border: 1px solid var(--theia-dropdown-border);
+  border: 1px solid var(--theia-dropdown-border);
 }
 
 button.theia-button:hover,
 .theia-button:hover {
-    border: 1px solid var(--theia-focusBorder);
+  border: 1px solid var(--theia-focusBorder);
 }
 
 button.theia-button {
-    height: 31px;
+  height: 31px;
 }
 
 button.theia-button.secondary {
-    background-color: var(--theia-secondaryButton-background);
-    color: var(--theia-secondaryButton-foreground);
+  background-color: var(--theia-secondaryButton-background);
+  color: var(--theia-secondaryButton-foreground);
 }
 
 button.theia-button.main {
-    color: var(--theia-button-foreground);
+  color: var(--theia-button-foreground);
 }
 
 /* To make the progress-bar slightly thicker, and use the color from the status bar */
 .theia-progress-bar-container {
-    width: 100%;
-    height: 4px;
+  width: 100%;
+  height: 4px;
 }
 
 .theia-progress-bar {
-    height: 4px;
-    width: 3%;
-    animation: progress-animation 1.3s 0s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
+  height: 4px;
+  width: 3%;
+  animation: progress-animation 1.3s 0s infinite
+    cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .theia-notification-item-progressbar {
-    height: 4px;
-    width: 66%;
+  height: 4px;
+  width: 66%;
 }
 
 .flex-line {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 
 .fa-reload {
-    font-size: 14px;
-}
+  font-size: 14px;
+}