Version 2.0.0-rc2

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve
 title: ''
-labels: 'type: bug'
+labels: 'type: imperfection'
 assignees: ''
 
 ---

.github/label-configuration-files/labels.yml

@@ -0,0 +1,24 @@
+# Used by the "Sync Labels" workflow
+# See: https://github.com/Financial-Times/github-label-sync#label-config-file
+
+- name: "topic: accessibility"
+  color: "00ffff"
+  description: Enabling the use of the software by everyone
+- name: "topic: CLI"
+  color: "00ffff"
+  description: Related to Arduino CLI
+- name: "topic: debugger"
+  color: "00ffff"
+  description: Related to the integrated debugger
+- name: "topic: language server"
+  color: "00ffff"
+  description: Related to the Arduino Language Server
+- name: "topic: serial monitor"
+  color: "00ffff"
+  description: Related to the Serial Monitor
+- name: "topic: theia"
+  color: "00ffff"
+  description: Related to the Theia IDE framework
+- name: "topic: theme"
+  color: "00ffff"
+  description: Related to GUI theming

.github/tools/fetch_athena_stats.py

@@ -0,0 +1,131 @@
+import boto3
+import semver
+import os
+import logging
+import uuid
+import time
+
+
+# logging.basicConfig(stream=sys.stdout, level=logging.DEBUG)
+log = logging.getLogger()
+logging.getLogger("boto3").setLevel(logging.CRITICAL)
+logging.getLogger("botocore").setLevel(logging.CRITICAL)
+logging.getLogger("urllib3").setLevel(logging.CRITICAL)
+
+
+def execute(client, statement, dest_s3_output_location):
+    log.info("execute query: {} dumping in {}".format(statement, dest_s3_output_location))
+    result = client.start_query_execution(
+        QueryString=statement,
+        ClientRequestToken=str(uuid.uuid4()),
+        ResultConfiguration={
+            "OutputLocation": dest_s3_output_location,
+        },
+    )
+    execution_id = result["QueryExecutionId"]
+    log.info("wait for query {} completion".format(execution_id))
+    wait_for_query_execution_completion(client, execution_id)
+    log.info("operation successful")
+    return execution_id
+
+
+def wait_for_query_execution_completion(client, query_execution_id):
+    query_ended = False
+    while not query_ended:
+        query_execution = client.get_query_execution(QueryExecutionId=query_execution_id)
+        state = query_execution["QueryExecution"]["Status"]["State"]
+        if state == "SUCCEEDED":
+            query_ended = True
+        elif state in ["FAILED", "CANCELLED"]:
+            raise BaseException(
+                "query failed or canceled: {}".format(query_execution["QueryExecution"]["Status"]["StateChangeReason"])
+            )
+        else:
+            time.sleep(1)
+
+
+def valid(key):
+    split = key.split("_")
+    if len(split) < 1:
+        return False
+    try:
+        semver.parse(split[0])
+    except ValueError:
+        return False
+    return True
+
+
+def get_results(client, execution_id):
+    results_paginator = client.get_paginator("get_query_results")
+    results_iter = results_paginator.paginate(QueryExecutionId=execution_id, PaginationConfig={"PageSize": 1000})
+    res = {}
+    for results_page in results_iter:
+        for row in results_page["ResultSet"]["Rows"][1:]:
+            # Loop through the JSON objects
+            key = row["Data"][0]["VarCharValue"]
+            if valid(key):
+                res[key] = row["Data"][1]["VarCharValue"]
+
+    return res
+
+
+def convert_data(data):
+    result = []
+    for key, value in data.items():
+        # 0.18.0_macOS_64bit.tar.gz
+        split_key = key.split("_")
+        if len(split_key) != 3:
+            continue
+        (version, os_version, arch) = split_key
+        arch_split = arch.split(".")
+        if len(arch_split) < 1:
+            continue
+        arch = arch_split[0]
+        if len(arch) > 10:
+            # This can't be an architecture really.
+            # It's an ugly solution but works for now so deal with it.
+            continue
+        repo = os.environ["GITHUB_REPOSITORY"].split("/")[1]
+        result.append(
+            {
+                "type": "gauge",
+                "name": "arduino.downloads.total",
+                "value": value,
+                "host": os.environ["GITHUB_REPOSITORY"],
+                "tags": [
+                    f"version:{version}",
+                    f"os:{os_version}",
+                    f"arch:{arch}",
+                    "cdn:downloads.arduino.cc",
+                    f"project:{repo}",
+                ],
+            }
+        )
+
+    return result
+
+
+if __name__ == "__main__":
+    DEST_S3_OUTPUT = os.environ["AWS_ATHENA_OUTPUT_LOCATION"]
+    AWS_ATHENA_SOURCE_TABLE = os.environ["AWS_ATHENA_SOURCE_TABLE"]
+
+    session = boto3.session.Session(region_name="us-east-1")
+    athena_client = session.client("athena")
+
+    # Load all partitions before querying downloads
+    execute(athena_client, f"MSCK REPAIR TABLE {AWS_ATHENA_SOURCE_TABLE};", DEST_S3_OUTPUT)
+
+    query = f"""SELECT replace(json_extract_scalar(url_decode(url_decode(querystring)),
+'$.data.url'), 'https://downloads.arduino.cc/arduino-ide/arduino-ide_', '')
+AS flavor, count(json_extract(url_decode(url_decode(querystring)),'$')) AS gauge
+FROM {AWS_ATHENA_SOURCE_TABLE}
+WHERE json_extract_scalar(url_decode(url_decode(querystring)),'$.data.url')
+LIKE 'https://downloads.arduino.cc/arduino-ide/arduino-ide_%'
+AND json_extract_scalar(url_decode(url_decode(querystring)),'$.data.url')
+NOT LIKE '%latest%' -- exclude latest redirect
+group by 1 ;"""
+    exec_id = execute(athena_client, query, DEST_S3_OUTPUT)
+    results = get_results(athena_client, exec_id)
+    result_json = convert_data(results)
+
+    print(f"::set-output name=result::{result_json}")

.github/workflows/arduino-stats.yaml

@@ -0,0 +1,57 @@
+name: arduino-stats
+
+on:
+  schedule:
+    # run every day at 07:00 AM, 03:00 PM and 11:00 PM
+    - cron: "0 7,15,23 * * *"
+  workflow_dispatch:
+  repository_dispatch:
+
+jobs:
+  push-stats:
+    # This workflow is only of value to the arduino/arduino-ide repository and
+    # would always fail in forks
+    if: github.repository == 'arduino/arduino-ide'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-python@v2
+        with:
+          python-version: '3.x'
+
+      - name: Fetch downloads count form Arduino CDN using AWS Athena
+        id: fetch
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.STATS_AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.STATS_AWS_SECRET_ACCESS_KEY }}
+          AWS_ATHENA_SOURCE_TABLE: ${{ secrets.STATS_AWS_ATHENA_SOURCE_TABLE }}
+          AWS_ATHENA_OUTPUT_LOCATION: ${{ secrets.STATS_AWS_ATHENA_OUTPUT_LOCATION }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+        run: |
+          pip install boto3 semver
+          python .github/tools/fetch_athena_stats.py
+
+      - name: Send metrics
+        uses: masci/datadog@v1
+        with:
+          api-key: ${{ secrets.DD_API_KEY }}
+          # Metrics input expects YAML but JSON will work just right.
+          metrics: ${{steps.fetch.outputs.result}}
+
+      - name: Report failure
+        if: failure()
+        uses: masci/datadog@v1
+        with:
+          api-key: ${{ secrets.DD_API_KEY }}
+          events: |
+            - title: "Arduino IDE stats failing"
+              text: "Stats collection failed"
+              alert_type: "error"
+              host: ${{ github.repository }}
+              tags:
+                - "project:arduino-ide"
+                - "cdn:downloads.arduino.cc"
+                - "workflow:${{ github.workflow }}"

.github/workflows/build.yml

@@ -70,6 +70,7 @@ jobs:
 
               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 }}"

.github/workflows/check-certificates.yml

@@ -1,35 +1,41 @@
-name: Check for issues with signing certificates
+# Source: https://github.com/arduino/tooling-project-assets/blob/main/workflow-templates/check-certificates.md
+name: Check Certificates
 
+# See: https://docs.github.com/en/actions/reference/events-that-trigger-workflows
 on:
+  push:
+    paths:
+      - '.github/workflows/check-certificates.ya?ml'
+  pull_request:
+    paths:
+      - '.github/workflows/check-certificates.ya?ml'
   schedule:
-    # run every 10 hours
-    - cron: "0 */10 * * *"
-  # workflow_dispatch event allows the workflow to be triggered manually.
-  # This could be used to run an immediate check after updating certificate secrets.
-  # See: https://docs.github.com/en/actions/reference/events-that-trigger-workflows#workflow_dispatch
+    # Run every 10 hours.
+    - cron: '0 */10 * * *'
   workflow_dispatch:
+  repository_dispatch:
 
 env:
-  # Begin notifications when there are less than this many days remaining before expiration
+  # Begin notifications when there are less than this many days remaining before expiration.
   EXPIRATION_WARNING_PERIOD: 30
 
 jobs:
   check-certificates:
+    name: ${{ matrix.certificate.identifier }}
     # Only run when the workflow will have access to the certificate secrets.
     if: >
       (github.event_name != 'pull_request' && github.repository == 'arduino/arduino-ide') ||
       (github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == 'arduino/arduino-ide')
-    
     runs-on: ubuntu-latest
-
     strategy:
       fail-fast: false
 
       matrix:
         certificate:
-          - identifier: macOS signing certificate # Text used to identify the certificate in notifications
-            certificate-secret: APPLE_SIGNING_CERTIFICATE_P12  # The name of the secret that contains the certificate
-            password-secret: KEYCHAIN_PASSWORD  # The name of the secret that contains the certificate password
+          # Additional certificate definitions can be added to this list.
+          - identifier: macOS signing certificate # Text used to identify certificate in notifications.
+            certificate-secret: APPLE_SIGNING_CERTIFICATE_P12 # Name of the secret that contains the certificate.
+            password-secret: KEYCHAIN_PASSWORD # Name of the secret that contains the certificate password.
           - identifier: Windows signing certificate
             certificate-secret: WINDOWS_SIGNING_CERTIFICATE_PFX
             password-secret: WINDOWS_SIGNING_CERTIFICATE_PASSWORD
@@ -37,7 +43,7 @@ jobs:
     steps:
       - name: Set certificate path environment variable
         run: |
-          # See: https://docs.github.com/en/free-pro-team@latest/actions/reference/workflow-commands-for-github-actions#setting-an-environment-variable
+          # See: https://docs.github.com/en/actions/reference/workflow-commands-for-github-actions#setting-an-environment-variable
           echo "CERTIFICATE_PATH=${{ runner.temp }}/certificate.p12" >> "$GITHUB_ENV"
 
       - name: Decode certificate
@@ -59,18 +65,17 @@ jobs:
             exit 1
           )
 
-      # See: https://github.com/rtCamp/action-slack-notify
       - name: Slack notification of certificate verification failure
         if: failure()
-        uses: rtCamp/action-slack-notify@v2.1.0
         env:
-          SLACK_WEBHOOK: ${{ secrets.TEAM_TOOLING_CHANNEL_SLACK_WEBHOOK }}
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
           SLACK_MESSAGE: |
             :warning::warning::warning::warning:
             WARNING: ${{ github.repository }} ${{ matrix.certificate.identifier }} verification failed!!!
             :warning::warning::warning::warning:
           SLACK_COLOR: danger
           MSG_MINIMAL: true
+        uses: rtCamp/action-slack-notify@v2
 
       - name: Get days remaining before certificate expiration date
         env:
@@ -99,7 +104,7 @@ jobs:
 
           DAYS_BEFORE_EXPIRATION="$((($(date --utc --date="$EXPIRATION_DATE" +%s) - $(date --utc +%s)) / 60 / 60 / 24))"
 
-          # Display the expiration information in the log
+          # Display the expiration information in the log.
           echo "Certificate expiration date: $EXPIRATION_DATE"
           echo "Days remaining before expiration: $DAYS_BEFORE_EXPIRATION"
 
@@ -114,14 +119,14 @@ jobs:
           fi
 
       - name: Slack notification of pending certificate expiration
-        # Don't send spurious expiration notification if verification fails
+        # Don't send spurious expiration notification if verification fails.
         if: failure() && steps.check-expiration.outcome == 'failure'
-        uses: rtCamp/action-slack-notify@v2.1.0
         env:
-          SLACK_WEBHOOK: ${{ secrets.TEAM_TOOLING_CHANNEL_SLACK_WEBHOOK }}
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
           SLACK_MESSAGE: |
             :warning::warning::warning::warning:
             WARNING: ${{ github.repository }} ${{ matrix.certificate.identifier }} will expire in ${{ steps.get-days-before-expiration.outputs.days }} days!!!
             :warning::warning::warning::warning:
           SLACK_COLOR: danger
           MSG_MINIMAL: true
+        uses: rtCamp/action-slack-notify@v2

.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 12.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12.14.1'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Check for errors
+        run: yarn i18n:check

.github/workflows/github-stats.yaml

@@ -0,0 +1,96 @@
+name: github-stats
+
+on:
+  schedule:
+    # run every 30 minutes
+    - cron: "*/30 * * * *"
+  workflow_dispatch:
+  repository_dispatch:
+
+jobs:
+  push-stats:
+    # This workflow is only of value to the arduino/arduino-ide repository and
+    # would always fail in forks
+    if: github.repository == 'arduino/arduino-ide'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Fetch downloads count
+        id: fetch
+        uses: actions/github-script@v4
+        with:
+          github-token: ${{github.token}}
+          script: |
+            let metrics = []
+
+            // Get a list of releases
+            const opts = github.repos.listReleases.endpoint.merge({
+              ...context.repo
+            })
+            const releases = await github.paginate(opts)
+
+            // Get download stats for every release
+            for (const rel of releases) {
+              // Names for assets are like `arduino-ide_2.0.0-beta.12_Linux_64bit.zip`,
+              // we'll use this later to split the asset file name more easily
+              const baseName = `arduino-ide_${rel.name}_`
+
+              // Get a list of assets for this release
+              const opts = github.repos.listReleaseAssets.endpoint.merge({
+                ...context.repo,
+                release_id: rel.id
+              })
+              const assets = await github.paginate(opts)
+
+              for (const asset of assets) {
+                // Ignore files that are not arduino-ide packages
+                if (!asset.name.startsWith(baseName)) {
+                  continue
+                }
+
+                // Strip the base and remove file extension to get `Linux_32bit`
+                systemArch = asset.name.replace(baseName, "").split(".")[0].split("_")
+
+                // Add a metric object to the list of gathered metrics
+                metrics.push({
+                  "type": "gauge",
+                  "name": "arduino.downloads.total",
+                  "value": asset.download_count,
+                  "host": "${{ github.repository }}",
+                  "tags": [
+                    `version:${rel.name}`,
+                    `os:${systemArch[0]}`,
+                    `arch:${systemArch[1]}`,
+                    "cdn:github.com",
+                    "project:arduino-ide"
+                  ]
+                })
+              }
+            }
+
+            // The action will put whatever we return from this function in
+            // `outputs.result`, JSON encoded. So we just return the array
+            // of objects and GitHub will do the rest.
+            return metrics
+
+      - name: Send metrics
+        uses: masci/datadog@v1
+        with:
+          api-key: ${{ secrets.DD_API_KEY }}
+          # Metrics input expects YAML but JSON will work just right.
+          metrics: ${{steps.fetch.outputs.result}}
+
+      - name: Report failure
+        if: failure()
+        uses: masci/datadog@v1
+        with:
+          api-key: ${{ secrets.DD_API_KEY }}
+          events: |
+            - title: "Arduino IDE stats failing"
+              text: "Stats collection failed"
+              alert_type: "error"
+              host: ${{ github.repository }}
+              tags:
+                - "project:arduino-ide"
+                - "cdn:github.com"
+                - "workflow:${{ github.workflow }}"

.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 12.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12.14.1'
+          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 12.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12.14.1'
+          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

@@ -0,0 +1,139 @@
+# Source: https://github.com/arduino/tooling-project-assets/blob/main/workflow-templates/sync-labels.md
+name: Sync Labels
+
+# See: https://docs.github.com/en/actions/reference/events-that-trigger-workflows
+on:
+  push:
+    paths:
+      - ".github/workflows/sync-labels.ya?ml"
+      - ".github/label-configuration-files/*.ya?ml"
+  pull_request:
+    paths:
+      - ".github/workflows/sync-labels.ya?ml"
+      - ".github/label-configuration-files/*.ya?ml"
+  schedule:
+    # Run daily at 8 AM UTC to sync with changes to shared label configurations.
+    - cron: "0 8 * * *"
+  workflow_dispatch:
+  repository_dispatch:
+
+env:
+  CONFIGURATIONS_FOLDER: .github/label-configuration-files
+  CONFIGURATIONS_ARTIFACT: label-configuration-files
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Download JSON schema for labels configuration file
+        id: download-schema
+        uses: carlosperate/download-file-action@v1.0.3
+        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
+
+      - name: Install JSON schema validator
+        run: |
+          sudo npm install \
+            --global \
+            ajv-cli \
+            ajv-formats
+
+      - name: Validate local labels configuration
+        run: |
+          # See: https://github.com/ajv-validator/ajv-cli#readme
+          ajv validate \
+            --all-errors \
+            -c ajv-formats \
+            -s "${{ steps.download-schema.outputs.file-path }}" \
+            -d "${{ env.CONFIGURATIONS_FOLDER }}/*.{yml,yaml}"
+
+  download:
+    needs: check
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        filename:
+          # Filenames of the shared configurations to apply to the repository in addition to the local configuration.
+          # https://github.com/arduino/tooling-project-assets/blob/main/workflow-templates/assets/sync-labels
+          - universal.yml
+          - tooling.yml
+
+    steps:
+      - name: Download
+        uses: carlosperate/download-file-action@v1.0.3
+        with:
+          file-url: https://raw.githubusercontent.com/arduino/tooling-project-assets/main/workflow-templates/assets/sync-labels/${{ matrix.filename }}
+
+      - name: Pass configuration files to next job via workflow artifact
+        uses: actions/upload-artifact@v2
+        with:
+          path: |
+            *.yaml
+            *.yml
+          if-no-files-found: error
+          name: ${{ env.CONFIGURATIONS_ARTIFACT }}
+
+  sync:
+    needs: download
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Set environment variables
+        run: |
+          # See: https://docs.github.com/en/actions/reference/workflow-commands-for-github-actions#setting-an-environment-variable
+          echo "MERGED_CONFIGURATION_PATH=${{ runner.temp }}/labels.yml" >> "$GITHUB_ENV"
+
+      - name: Determine whether to dry run
+        id: dry-run
+        if: >
+          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.
+          echo "::set-output name=flag::--dry-run"
+
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Download configuration files artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: ${{ env.CONFIGURATIONS_ARTIFACT }}
+          path: ${{ env.CONFIGURATIONS_FOLDER }}
+
+      - name: Remove unneeded artifact
+        uses: geekyeggo/delete-artifact@v1
+        with:
+          name: ${{ env.CONFIGURATIONS_ARTIFACT }}
+
+      - name: Merge label configuration files
+        run: |
+          # Merge all configuration files
+          shopt -s extglob
+          cat "${{ env.CONFIGURATIONS_FOLDER }}"/*.@(yml|yaml) > "${{ env.MERGED_CONFIGURATION_PATH }}"
+
+      - name: Install github-label-sync
+        run: sudo npm install --global github-label-sync
+
+      - name: Sync labels
+        env:
+          GITHUB_ACCESS_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          # See: https://github.com/Financial-Times/github-label-sync
+          github-label-sync \
+            --labels "${{ env.MERGED_CONFIGURATION_PATH }}" \
+            ${{ steps.dry-run.outputs.flag }} \
+            ${{ github.repository }}

.gitignore

@@ -7,7 +7,8 @@ build/
 Examples/
 !electron/build/
 src-gen/
-*webpack.config.js
+!webpack.config.js
+gen-webpack.config.js
 .DS_Store
 # switching from `electron` to `browser` in dev mode.
 .browser_modules

.prettierrc

@@ -1,13 +1,6 @@
 {
 	"singleQuote": true,
-	"tabWidth": 4,
+	"tabWidth": 2,
 	"useTabs": false,
-	"overrides": [
-		{
-			"files": "*.{json,yml}",
-			"options": {
-				"tabWidth": 2
-			}
-		}
-	]
+	"printWidth": 80
 }

.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",
@@ -23,7 +19,8 @@
         "--app-project-path=${workspaceRoot}/electron-app",
         "--remote-debugging-port=9222",
         "--no-app-auto-install",
-        "--plugins=local-dir:../plugins"
+        "--plugins=local-dir:../plugins",
+        "--hosted-plugin-inspect=9339"
       ],
       "env": {
         "NODE_ENV": "development"
@@ -33,7 +30,8 @@
         "${workspaceRoot}/electron-app/src-gen/backend/*.js",
         "${workspaceRoot}/electron-app/src-gen/frontend/*.js",
         "${workspaceRoot}/electron-app/lib/**/*.js",
-        "${workspaceRoot}/arduino-ide-extension/lib/**/*.js"
+        "${workspaceRoot}/arduino-ide-extension/lib/**/*.js",
+        "${workspaceRoot}/node_modules/@theia/**/*.js"
       ],
       "smartStep": true,
       "internalConsoleOptions": "openOnSessionStart",
@@ -79,6 +77,8 @@
       "args": [
         "--require",
         "reflect-metadata/Reflect",
+        "--require",
+        "ignore-styles",
         "--no-timeouts",
         "--colors",
         "**/${fileBasenameNoExtension}.js"

BUILDING.md

@@ -14,7 +14,7 @@ The _Electron main_ process is responsible for:
  - managing the application lifecycle via listeners, and
  - creating and managing the web pages for the app.
 
-In Electron, the process that runs the main entry JavaScript file is called the main process. The _Electron main_ process can display a GUI by creating web pages. An Electron app always has exactly on main process.
+In Electron, the process that runs the main entry JavaScript file is called the main process. The _Electron main_ process can display a GUI by creating web pages. An Electron app always has exactly one main process.
 
 By default, whenever the _Electron main_ process creates a web page, it will instantiate a new `BrowserWindow` instance. Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process. Each `BrowserWindow` instance runs the web page in its own renderer process. When a `BrowserWindow` instance is destroyed, the corresponding renderer process is also terminated. The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.<sup>[[1]]</sup>
 

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-service-impl.ts](./src/node/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
 
@@ -58,3 +61,13 @@ The Config Service knows about your system, like for example the default sketch
 #### Rebuild gRPC protocol interfaces
   - Some CLI updates can bring changes to the gRPC interfaces, as the API might change. gRPC interfaces can be updated running the command
     `yarn --cwd arduino-ide-extension generate-protocol`
+
+### Customize Icons
+ArduinoIde uses a customized version of FontAwesome.
+In order to update/replace icons follow the following steps:
+  - import the file `arduino-icons.json` in [Icomoon](https://icomoon.io/app/#/projects)
+  - load it
+  - edit the icons as needed
+  - !! download the **new** `arduino-icons.json` file and put it in this repo
+  - Click on "Generate Font" in Icomoon, then download
+  - place the updated fonts in the `src/style/fonts` directory

arduino-ide-extension/package.json

@@ -1,12 +1,14 @@
 {
   "name": "arduino-ide-extension",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-rc2",
   "description": "An extension for Theia building the Arduino IDE",
   "license": "AGPL-3.0-or-later",
   "scripts": {
-    "prepare": "yarn download-cli && yarn download-ls && yarn clean && yarn download-examples && yarn build",
+    "prepare": "yarn download-cli && yarn download-fwuploader && yarn download-ls && yarn copy-serial-plotter && yarn clean && yarn download-examples && yarn build && yarn test",
     "clean": "rimraf lib",
     "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",
     "download-ls": "node ./scripts/download-ls.js",
     "download-examples": "node ./scripts/download-examples.js",
     "generate-protocol": "node ./scripts/generate-protocol.js",
@@ -17,22 +19,24 @@
     "test:watch": "mocha --watch --watch-files lib \"./lib/test/**/*.test.js\""
   },
   "dependencies": {
-    "@grpc/grpc-js": "^1.1.1",
-    "@theia/application-package": "next",
-    "@theia/core": "next",
-    "@theia/editor": "next",
-    "@theia/filesystem": "next",
-    "@theia/git": "next",
-    "@theia/keymaps": "next",
-    "@theia/markers": "next",
-    "@theia/monaco": "next",
-    "@theia/navigator": "next",
-    "@theia/outline-view": "next",
-    "@theia/preferences": "next",
-    "@theia/output": "next",
-    "@theia/search-in-workspace": "next",
-    "@theia/terminal": "next",
-    "@theia/workspace": "next",
+    "@grpc/grpc-js": "^1.3.7",
+    "@theia/application-package": "1.19.0",
+    "@theia/core": "1.19.0",
+    "@theia/editor": "1.19.0",
+    "@theia/editor-preview": "1.19.0",
+    "@theia/filesystem": "1.19.0",
+    "@theia/git": "1.19.0",
+    "@theia/keymaps": "1.19.0",
+    "@theia/markers": "1.19.0",
+    "@theia/monaco": "1.19.0",
+    "@theia/navigator": "1.19.0",
+    "@theia/outline-view": "1.19.0",
+    "@theia/output": "1.19.0",
+    "@theia/preferences": "1.19.0",
+    "@theia/search-in-workspace": "1.19.0",
+    "@theia/terminal": "1.19.0",
+    "@theia/workspace": "1.19.0",
+    "@tippyjs/react": "^4.2.5",
     "@types/atob": "^2.1.2",
     "@types/auth0-js": "^9.14.0",
     "@types/btoa": "^1.2.3",
@@ -48,10 +52,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.15",
     "async-mutex": "^0.3.0",
     "atob": "^2.1.2",
     "auth0-js": "^9.14.0",
@@ -62,6 +66,7 @@
     "fuzzy": "^0.1.3",
     "glob": "^7.1.6",
     "google-protobuf": "^3.11.4",
+    "grpc": "^1.24.11",
     "hash.js": "^1.1.7",
     "is-valid-path": "^0.1.1",
     "js-yaml": "^3.13.1",
@@ -73,20 +78,26 @@
     "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-select": "^3.0.4",
     "react-tabs": "^3.1.2",
+    "react-window": "^1.8.6",
     "semver": "^7.3.2",
     "string-natural-compare": "^2.0.3",
     "temp": "^0.9.1",
     "tree-kill": "^1.2.1",
     "upath": "^1.1.2",
+    "url": "^0.11.0",
     "which": "^1.3.1"
   },
   "devDependencies": {
     "@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",
@@ -95,10 +106,13 @@
     "download": "^7.1.0",
     "grpc_tools_node_protoc_ts": "^4.1.0",
     "mocha": "^7.0.0",
+    "mockdate": "^3.0.5",
     "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"
   },
@@ -107,7 +121,8 @@
   },
   "mocha": {
     "require": [
-      "reflect-metadata/Reflect"
+      "reflect-metadata/Reflect",
+      "ignore-styles"
     ],
     "reporter": "spec",
     "colors": true,
@@ -136,7 +151,10 @@
   ],
   "arduino": {
     "cli": {
-      "version": "0.18.3"
+      "version": "0.20.2"
+    },
+    "fwuploader": {
+      "version": "2.0.0"
     }
   }
 }

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

@@ -0,0 +1,166 @@
+// @ts-check
+
+(async () => {
+  const fs = require('fs');
+  const path = require('path');
+  const temp = require('temp');
+  const shell = require('shelljs');
+  const semver = require('semver');
+  const downloader = require('./downloader');
+
+  const version = (() => {
+    const pkg = require(path.join(__dirname, '..', 'package.json'));
+    if (!pkg) {
+      return undefined;
+    }
+
+    const { arduino } = pkg;
+    if (!arduino) {
+      return undefined;
+    }
+
+    const { fwuploader } = arduino;
+    if (!fwuploader) {
+      return undefined;
+    }
+
+    const { version } = fwuploader;
+    return version;
+  })();
+
+  if (!version) {
+    shell.echo(
+      `Could not retrieve Firmware Uploader version info from the 'package.json'.`
+    );
+    shell.exit(1);
+  }
+
+  const { platform, arch } = process;
+  const buildFolder = path.join(__dirname, '..', 'build');
+  const fwuploderName = `arduino-fwuploader${
+    platform === 'win32' ? '.exe' : ''
+  }`;
+  const destinationPath = path.join(buildFolder, fwuploderName);
+
+  if (typeof version === 'string') {
+    const suffix = (() => {
+      switch (platform) {
+        case 'darwin':
+          return 'macOS_64bit.tar.gz';
+        case 'win32':
+          return 'Windows_64bit.zip';
+        case 'linux': {
+          switch (arch) {
+            case 'arm':
+              return 'Linux_ARMv7.tar.gz';
+            case 'arm64':
+              return 'Linux_ARM64.tar.gz';
+            case 'x64':
+              return 'Linux_64bit.tar.gz';
+            default:
+              return undefined;
+          }
+        }
+        default:
+          return undefined;
+      }
+    })();
+    if (!suffix) {
+      shell.echo(
+        `The Firmware Uploader is not available for ${platform} ${arch}.`
+      );
+      shell.exit(1);
+    }
+    if (semver.valid(version)) {
+      const url = `https://downloads.arduino.cc/arduino-fwuploader/arduino-fwuploader_${version}_${suffix}`;
+      shell.echo(
+        `📦  Identified released version of the Firmware Uploader. Downloading version ${version} from '${url}'`
+      );
+      await downloader.downloadUnzipFile(
+        url,
+        destinationPath,
+        'arduino-fwuploader'
+      );
+    } else {
+      shell.echo(`🔥  Could not interpret 'version': ${version}`);
+      shell.exit(1);
+    }
+  } else {
+    // We assume an object with `owner`, `repo`, commitish?` properties.
+    const { owner, repo, commitish } = version;
+    if (!owner) {
+      shell.echo(`Could not retrieve 'owner' from ${JSON.stringify(version)}`);
+      shell.exit(1);
+    }
+    if (!repo) {
+      shell.echo(`Could not retrieve 'repo' from ${JSON.stringify(version)}`);
+      shell.exit(1);
+    }
+    const url = `https://github.com/${owner}/${repo}.git`;
+    shell.echo(
+      `Building Firmware Uploader from ${url}. Commitish: ${
+        commitish ? commitish : 'HEAD'
+      }`
+    );
+
+    if (fs.existsSync(destinationPath)) {
+      shell.echo(
+        `Skipping the Firmware Uploader build because it already exists: ${destinationPath}`
+      );
+      return;
+    }
+
+    if (shell.mkdir('-p', buildFolder).code !== 0) {
+      shell.echo('Could not create build folder.');
+      shell.exit(1);
+    }
+
+    const tempRepoPath = temp.mkdirSync();
+    shell.echo(`>>> Cloning Firmware Uploader source to ${tempRepoPath}...`);
+    if (shell.exec(`git clone ${url} ${tempRepoPath}`).code !== 0) {
+      shell.exit(1);
+    }
+    shell.echo('<<< Cloned Firmware Uploader repo.');
+
+    if (commitish) {
+      shell.echo(`>>> Checking out ${commitish}...`);
+      if (
+        shell.exec(`git -C ${tempRepoPath} checkout ${commitish}`).code !== 0
+      ) {
+        shell.exit(1);
+      }
+      shell.echo(`<<< Checked out ${commitish}.`);
+    }
+
+    shell.echo(`>>> Building the Firmware Uploader...`);
+    if (shell.exec('go build', { cwd: tempRepoPath }).code !== 0) {
+      shell.exit(1);
+    }
+    shell.echo('<<< Firmware Uploader build done.');
+
+    if (!fs.existsSync(path.join(tempRepoPath, fwuploderName))) {
+      shell.echo(
+        `Could not find the Firmware Uploader at ${path.join(
+          tempRepoPath,
+          fwuploderName
+        )}.`
+      );
+      shell.exit(1);
+    }
+
+    const builtFwUploaderPath = path.join(tempRepoPath, fwuploderName);
+    shell.echo(
+      `>>> Copying Firmware Uploader from ${builtFwUploaderPath} to ${destinationPath}...`
+    );
+    if (shell.cp(builtFwUploaderPath, destinationPath).code !== 0) {
+      shell.exit(1);
+    }
+    shell.echo(`<<< Copied the Firmware Uploader.`);
+
+    shell.echo('<<< Verifying Firmware Uploader...');
+    if (!fs.existsSync(destinationPath)) {
+      shell.exit(1);
+    }
+    shell.echo('>>> Verified Firmware Uploader.');
+  }
+})();

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

@@ -4,8 +4,7 @@
 // - https://downloads.arduino.cc/arduino-language-server/clangd/clangd_${VERSION}_${SUFFIX}
 
 (() => {
-
-    const DEFAULT_ALS_VERSION = 'nightly';
+  const DEFAULT_ALS_VERSION = '0.5.0';
   const DEFAULT_CLANGD_VERSION = 'snapshot_20210124';
 
   const path = require('path');
@@ -16,57 +15,67 @@
     .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}.`
+      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}.`
+      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.`
+      describe: `If set, this script force downloads the 'arduino-language-server' even if it already exists on the file system.`,
     })
-        .version(false).parse();
+    .version(false)
+    .parse();
 
   const alsVersion = yargs['ls-version'];
-    const clangdVersion = yargs['clangd-version']
+  const clangdVersion = yargs['clangd-version'];
   const force = yargs['force-download'];
   const { platform, arch } = process;
 
   const build = path.join(__dirname, '..', 'build');
-    const lsExecutablePath = path.join(build, `arduino-language-server${platform === 'win32' ? '.exe' : ''}`);
+  const lsExecutablePath = path.join(
+    build,
+    `arduino-language-server${platform === 'win32' ? '.exe' : ''}`
+  );
 
   let clangdExecutablePath, lsSuffix, clangdPrefix;
   switch (platform) {
     case 'darwin':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd')
-            lsSuffix = 'macOS_amd64.zip';
+      clangdExecutablePath = path.join(build, 'bin', 'clangd');
+      lsSuffix = 'macOS_64bit.tar.gz';
       clangdPrefix = 'mac';
       break;
     case 'linux':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd')
-            lsSuffix = 'Linux_amd64.zip';
-            clangdPrefix = 'linux'
+      clangdExecutablePath = path.join(build, 'bin', 'clangd');
+      lsSuffix = 'Linux_64bit.tar.gz';
+      clangdPrefix = 'linux';
       break;
     case 'win32':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd.exe')
-            lsSuffix = 'Windows_amd64.zip';
+      clangdExecutablePath = path.join(build, 'bin', 'clangd.exe');
+      lsSuffix = 'Windows_64bit.zip';
       clangdPrefix = 'windows';
       break;
   }
   if (!lsSuffix) {
-        shell.echo(`The arduino-language-server is not available for ${platform} ${arch}.`);
+    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}`;
+  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/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.
-
+  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/src/browser/arduino-frontend-contribution.tsx

@@ -1,19 +1,48 @@
-import { Mutex } from 'async-mutex';
-import { MAIN_MENU_BAR, MenuContribution, MenuModelRegistry, SelectionService, ILogger, DisposableCollection } from '@theia/core';
+import { inject, injectable, postConstruct } from 'inversify';
+import * as React from 'react';
+import { remote } from 'electron';
 import {
-    ContextMenuRenderer,
-    FrontendApplication, FrontendApplicationContribution,
-    OpenerService, StatusBar, StatusBarAlignment
+  BoardsService,
+  Port,
+  SketchesService,
+  ExecutableService,
+  Sketch,
+  LibraryService,
+} from '../common/protocol';
+import { Mutex } from 'async-mutex';
+import {
+  MAIN_MENU_BAR,
+  MenuContribution,
+  MenuModelRegistry,
+  ILogger,
+  DisposableCollection,
+} from '@theia/core';
+import {
+  FrontendApplication,
+  FrontendApplicationContribution,
+  LocalStorageService,
+  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';
-import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import { CommandContribution, CommandRegistry } from '@theia/core/lib/common/command';
+import {
+  TabBarToolbarContribution,
+  TabBarToolbarRegistry,
+} from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import {
+  CommandContribution,
+  CommandRegistry,
+} from '@theia/core/lib/common/command';
 import { MessageService } from '@theia/core/lib/common/message-service';
 import URI from '@theia/core/lib/common/uri';
-import { EditorMainMenu, EditorManager, EditorOpenerOptions } from '@theia/editor/lib/browser';
-import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog';
+import {
+  EditorMainMenu,
+  EditorManager,
+  EditorOpenerOptions,
+} from '@theia/editor/lib/browser';
 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';
@@ -22,40 +51,36 @@ import { OutputContribution } from '@theia/output/lib/browser/output-contributio
 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';
 
-@injectable()
-export class ArduinoFrontendContribution implements FrontendApplicationContribution,
-    TabBarToolbarContribution, CommandContribution, MenuContribution, ColorContribution {
+const INIT_LIBS_AND_PACKAGES = 'initializedLibsAndPackages';
 
+@injectable()
+export class ArduinoFrontendContribution
+  implements
+    FrontendApplicationContribution,
+    TabBarToolbarContribution,
+    CommandContribution,
+    MenuContribution,
+    ColorContribution
+{
   @inject(ILogger)
   protected logger: ILogger;
 
@@ -65,24 +90,15 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
   @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;
 
@@ -92,21 +108,12 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
   @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;
 
@@ -131,84 +138,118 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
   @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;
 
-    protected invalidConfigPopup: Promise<void | 'No' | 'Yes' | undefined> | undefined;
+  @inject(LocalStorageService)
+  protected readonly localStorageService: LocalStorageService;
+
+  protected invalidConfigPopup:
+    | Promise<void | 'No' | 'Yes' | undefined>
+    | undefined;
   protected toDisposeOnStop = new DisposableCollection();
 
   @postConstruct()
   protected async init(): Promise<void> {
+    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',
+      });
+      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.');
+      this.messageService.warn(
+        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 = ({ selectedBoard, selectedPort }: BoardsConfig.Config) => {
+    const updateStatusBar = ({
+      selectedBoard,
+      selectedPort,
+    }: BoardsConfig.Config) => {
       this.statusBar.setElement('arduino-selected-board', {
         alignment: StatusBarAlignment.RIGHT,
-                text: selectedBoard ? `$(microchip) ${selectedBoard.name}` : '$(close) no board selected',
-                className: 'arduino-selected-board'
+        text: selectedBoard
+          ? `$(microchip) ${selectedBoard.name}`
+          : `$(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]',
-                    className: 'arduino-selected-port'
+          text: selectedPort
+            ? nls.localize(
+                'arduino/common/selectedOn',
+                'on {0}',
+                Port.toString(selectedPort)
+              )
+            : nls.localize('arduino/common/notConnected', '[not connected]'),
+          className: 'arduino-selected-port',
         });
       }
-        }
+    };
     this.boardsServiceClientImpl.onBoardsConfigChanged(updateStatusBar);
     updateStatusBar(this.boardsServiceClientImpl.boardsConfig);
     this.appStateService.reachedState('ready').then(async () => {
       const sketch = await this.sketchServiceClient.currentSketch();
-            if (sketch && (!await this.sketchService.isTemp(sketch))) {
+      if (sketch && !(await this.sketchService.isTemp(sketch))) {
         this.toDisposeOnStop.push(this.fileService.watch(new URI(sketch.uri)));
-                this.toDisposeOnStop.push(this.fileService.onDidFilesChange(async event => {
+        this.toDisposeOnStop.push(
+          this.fileService.onDidFilesChange(async (event) => {
             for (const { type, resource } of event.changes) {
-                        if (type === FileChangeType.ADDED && resource.parent.toString() === sketch.uri) {
-                            const reloadedSketch = await this.sketchService.loadSketch(sketch.uri)
+              if (
+                type === FileChangeType.ADDED &&
+                resource.parent.toString() === sketch.uri
+              ) {
+                const reloadedSketch = await this.sketchService.loadSketch(
+                  sketch.uri
+                );
                 if (Sketch.isInSketch(resource, reloadedSketch)) {
-                                this.ensureOpened(resource.toString(), true, { mode: 'open' });
+                  this.ensureOpened(resource.toString(), true, {
+                    mode: 'open',
+                  });
                 }
               }
             }
-                }));
+          })
+        );
       }
     });
-
   }
 
   onStart(app: FrontendApplication): void {
@@ -220,7 +261,8 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
       this.problemContribution,
       this.scmContribution,
       this.siwContribution,
-            this.sketchbookWidgetContribution] as Array<FrontendApplicationContribution>) {
+      this.sketchbookWidgetContribution,
+    ] as Array<FrontendApplicationContribution>) {
       if (viewContribution.initializeLayout) {
         viewContribution.initializeLayout(app);
       }
@@ -234,8 +276,11 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
       }
     };
     this.boardsServiceClientImpl.onBoardsConfigChanged(start);
-        this.arduinoPreferences.onPreferenceChanged(event => {
-            if (event.preferenceName === 'arduino.language.log' && event.newValue !== event.oldValue) {
+    this.arduinoPreferences.onPreferenceChanged((event) => {
+      if (
+        event.preferenceName === 'arduino.language.log' &&
+        event.newValue !== event.oldValue
+      ) {
         start(this.boardsServiceClientImpl.boardsConfig);
       }
     });
@@ -244,13 +289,17 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
       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) {
+    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.removeMenu('settings-menu');
+    app.shell.leftPanelHandler.removeBottomMenu('settings-menu');
   }
 
   onStop(): void {
@@ -259,21 +308,33 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
 
   protected languageServerFqbn?: string;
   protected languageServerStartMutex = new Mutex();
-    protected async startLanguageServer(fqbn: string, name: string | undefined): Promise<void> {
+  protected async startLanguageServer(
+    fqbn: string,
+    name: string | undefined
+  ): Promise<void> {
     const release = await this.languageServerStartMutex.acquire();
     try {
       await this.hostedPluginSupport.didStart;
       const details = await this.boardsService.getBoardDetails({ fqbn });
       if (!details) {
         // Core is not installed for the selected board.
-                console.info(`Could not start language server for ${fqbn}. The core is not installed for the board.`);
+        console.info(
+          `Could not start language server for ${fqbn}. The core is not installed for the board.`
+        );
         if (this.languageServerFqbn) {
           try {
-                        await this.commandRegistry.executeCommand('arduino.languageserver.stop');
-                        console.info(`Stopped language server process for ${this.languageServerFqbn}.`);
+            await this.commandRegistry.executeCommand(
+              'arduino.languageserver.stop'
+            );
+            console.info(
+              `Stopped language server process for ${this.languageServerFqbn}.`
+            );
             this.languageServerFqbn = undefined;
           } catch (e) {
-                        console.error(`Failed to start language server process for ${this.languageServerFqbn}`, e);
+            console.error(
+              `Failed to start language server process for ${this.languageServerFqbn}`,
+              e
+            );
             throw e;
           }
         }
@@ -289,29 +350,40 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
       if (log) {
         const currentSketch = await this.sketchServiceClient.currentSketch();
         if (currentSketch) {
-                    currentSketchPath = await this.fileService.fsPath(new URI(currentSketch.uri));
+          currentSketchPath = await this.fileService.fsPath(
+            new URI(currentSketch.uri)
+          );
         }
       }
-            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(() => reject(new Error(`Timeout after ${20_000} ms.`)), 20_000)),
-                this.commandRegistry.executeCommand<string>('arduino.languageserver.start', {
+        new Promise<undefined>((_, reject) =>
+          setTimeout(
+            () => reject(new Error(`Timeout after ${20_000} ms.`)),
+            20_000
+          )
+        ),
+        this.commandRegistry.executeCommand<string>(
+          '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
+              name: name ? `"${name}"` : undefined,
+            },
           }
-                })
+        ),
       ]);
     } catch (e) {
       console.log(`Failed to start language server for ${fqbn}`, e);
@@ -324,29 +396,33 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
   registerToolbarItems(registry: TabBarToolbarRegistry): void {
     registry.registerItem({
       id: BoardsToolBarItem.TOOLBAR_ID,
-            render: () => <BoardsToolBarItem
-                key='boardsToolbarItem'
+      render: () => (
+        <BoardsToolBarItem
+          key="boardsToolbarItem"
           commands={this.commandRegistry}
-                boardsServiceClient={this.boardsServiceClientImpl} />,
-            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
-            priority: 7
+          boardsServiceClient={this.boardsServiceClientImpl}
+        />
+      ),
+      isVisible: (widget) =>
+        ArduinoToolbar.is(widget) && widget.side === 'left',
+      priority: 7,
     });
     registry.registerItem({
       id: 'toggle-serial-monitor',
       command: MonitorViewContribution.TOGGLE_SERIAL_MONITOR_TOOLBAR,
-            tooltip: 'Serial Monitor'
+      tooltip: nls.localize('arduino/common/serialMonitor', 'Serial Monitor'),
     });
   }
 
   registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(ArduinoCommands.TOGGLE_COMPILE_FOR_DEBUG, {
       execute: () => this.editorMode.toggleCompileForDebug(),
-            isToggled: () => this.editorMode.compileForDebug
+      isToggled: () => this.editorMode.compileForDebug,
     });
     registry.registerCommand(ArduinoCommands.OPEN_SKETCH_FILES, {
       execute: async (uri: URI) => {
         this.openSketchFiles(uri);
-            }
+      },
     });
     registry.registerCommand(ArduinoCommands.OPEN_BOARDS_DIALOG, {
       execute: async (query?: string | undefined) => {
@@ -354,7 +430,7 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
         if (boardsConfig) {
           this.boardsServiceClientImpl.boardsConfig = boardsConfig;
         }
-            }
+      },
     });
   }
 
@@ -363,18 +439,27 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
       const index = menuPath.length - 1;
       const menuId = menuPath[index];
       return menuId;
-        }
+    };
     registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(MonacoMenus.SELECTION));
     registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(EditorMainMenu.GO));
     registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(TerminalMenus.TERMINAL));
     registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(CommonMenus.VIEW));
 
-        registry.registerSubmenu(ArduinoMenus.SKETCH, 'Sketch');
-        registry.registerSubmenu(ArduinoMenus.TOOLS, 'Tools');
+    registry.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',
     });
   }
 
@@ -385,12 +470,25 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
       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?`;
-                this.messageService.info(message, 'Later', 'Yes').then(async answer => {
-                    if (answer === 'Yes') {
-                        this.commandRegistry.executeCommand(SaveAsSketch.Commands.SAVE_AS_SKETCH.id, { execOnlyIfTemp: false, openAfterMove: true, wipeOriginal: false });
+        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, nls.localize('arduino/common/later', 'Later'), yes)
+          .then(async (answer) => {
+            if (answer === yes) {
+              this.commandRegistry.executeCommand(
+                SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
+                {
+                  execOnlyIfTemp: false,
+                  openAfterMove: true,
+                  wipeOriginal: false,
+                }
+              );
             }
           });
       }
@@ -401,8 +499,14 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
     }
   }
 
-    protected async ensureOpened(uri: string, forceOpen = false, options?: EditorOpenerOptions | undefined): Promise<any> {
-        const widget = this.editorManager.all.find(widget => widget.editor.uri.toString() === uri);
+  protected async ensureOpened(
+    uri: string,
+    forceOpen = false,
+    options?: EditorOpenerOptions | undefined
+  ): Promise<any> {
+    const widget = this.editorManager.all.find(
+      (widget) => widget.editor.uri.toString() === uri
+    );
     if (!widget || forceOpen) {
       return this.editorManager.open(new URI(uri), options);
     }
@@ -414,73 +518,78 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
         id: 'arduino.branding.primary',
         defaults: {
           dark: 'statusBar.background',
-                    light: 'statusBar.background'
+          light: 'statusBar.background',
         },
-                description: 'The primary branding color, such as dialog titles, library, and board manager list labels.'
+        description:
+          'The primary branding color, such as dialog titles, library, and board manager list labels.',
       },
       {
         id: 'arduino.branding.secondary',
         defaults: {
           dark: 'statusBar.background',
-                    light: 'statusBar.background'
+          light: 'statusBar.background',
         },
-                description: 'Secondary branding color for list selections, dropdowns, and widget borders.'
+        description:
+          'Secondary branding color for list selections, dropdowns, and widget borders.',
       },
       {
         id: 'arduino.foreground',
         defaults: {
           dark: 'editorWidget.background',
           light: 'editorWidget.background',
-                    hc: 'editorWidget.background'
+          hc: 'editorWidget.background',
         },
-                description: 'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.'
+        description:
+          'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.',
       },
       {
         id: 'arduino.toolbar.background',
         defaults: {
           dark: 'button.background',
           light: 'button.background',
-                    hc: 'activityBar.inactiveForeground'
+          hc: 'activityBar.inactiveForeground',
         },
-                description: 'Background color of the toolbar items. Such as Upload, Verify, etc.'
+        description:
+          'Background color of the toolbar items. Such as Upload, Verify, etc.',
       },
       {
         id: 'arduino.toolbar.hoverBackground',
         defaults: {
           dark: 'button.hoverBackground',
           light: 'button.foreground',
-                    hc: 'textLink.foreground'
+          hc: 'textLink.foreground',
         },
-                description: 'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.'
+        description:
+          'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.',
       },
       {
         id: 'arduino.toolbar.toggleBackground',
         defaults: {
           dark: 'editor.selectionBackground',
           light: 'editor.selectionBackground',
-                    hc: 'textPreformat.foreground'
+          hc: 'textPreformat.foreground',
         },
-                description: 'Toggle color of the toolbar items when they are currently toggled (the command is in progress)'
+        description:
+          'Toggle color of the toolbar items when they are currently toggled (the command is in progress)',
       },
       {
         id: 'arduino.output.foreground',
         defaults: {
           dark: 'editor.foreground',
           light: 'editor.foreground',
-                    hc: 'editor.foreground'
+          hc: 'editor.foreground',
         },
-                description: 'Color of the text in the Output view.'
+        description: 'Color of the text in the Output view.',
       },
       {
         id: 'arduino.output.background',
         defaults: {
           dark: 'editor.background',
           light: 'editor.background',
-                    hc: 'editor.background'
+          hc: 'editor.background',
         },
-                description: 'Background color of the Output view.'
+        description: 'Background color of the Output view.',
       }
     );
   }
-
 }

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

@@ -42,8 +42,8 @@ import { FileNavigatorContribution as TheiaFileNavigatorContribution } from '@th
 import { KeymapsFrontendContribution } from './theia/keymaps/keymaps-frontend-contribution';
 import { KeymapsFrontendContribution as TheiaKeymapsFrontendContribution } from '@theia/keymaps/lib/browser/keymaps-frontend-contribution';
 import { ArduinoToolbarContribution } from './toolbar/arduino-toolbar-contribution';
-import { EditorContribution as TheiaEditorContribution } from '@theia/editor/lib/browser/editor-contribution';
-import { EditorContribution } from './theia/editor/editor-contribution';
+import { EditorPreviewContribution as TheiaEditorPreviewContribution } from '@theia/editor-preview/lib/browser/editor-preview-contribution';
+import { EditorPreviewContribution } from './theia/editor/editor-contribution';
 import { MonacoStatusBarContribution as TheiaMonacoStatusBarContribution } from '@theia/monaco/lib/browser/monaco-status-bar-contribution';
 import { MonacoStatusBarContribution } from './theia/monaco/monaco-status-bar-contribution';
 import {
@@ -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,
@@ -165,8 +165,9 @@ import { MonacoTextModelService as TheiaMonacoTextModelService } from '@theia/mo
 import { MonacoTextModelService } from './theia/monaco/monaco-text-model-service';
 import { ResponseServiceImpl } from './response-service-impl';
 import {
-    ResponseServicePath,
   ResponseService,
+  ResponseServiceArduino,
+  ResponseServicePath,
 } from '../common/protocol/response-service';
 import { NotificationCenter } from './notification-center';
 import {
@@ -189,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';
@@ -206,12 +207,12 @@ 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';
 import { MonacoEditorProvider as TheiaMonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
-import { DebugEditorModel } from './theia/debug/debug-editor-model';
-import { DebugEditorModelFactory } from '@theia/debug/lib/browser/editor/debug-editor-model';
 import { StorageWrapper } from './storage-wrapper';
 import { NotificationManager } from './theia/messages/notifications-manager';
 import { NotificationManager as TheiaNotificationManager } from '@theia/messages/lib/browser/notifications-manager';
@@ -223,7 +224,7 @@ import { CloudSketchbookWidget } from './widgets/cloud-sketchbook/cloud-sketchbo
 import { CloudSketchbookTreeWidget } from './widgets/cloud-sketchbook/cloud-sketchbook-tree-widget';
 import { createCloudSketchbookTreeWidget } from './widgets/cloud-sketchbook/cloud-sketchbook-tree-container';
 import { CreateApi } from './create/create-api';
-import { ShareSketchDialog } from './dialogs.ts/cloud-share-sketch-dialog';
+import { ShareSketchDialog } from './dialogs/cloud-share-sketch-dialog';
 import { AuthenticationClientService } from './auth/authentication-client-service';
 import {
   AuthenticationService,
@@ -236,6 +237,31 @@ import { CloudSketchbookCompositeWidget } from './widgets/cloud-sketchbook/cloud
 import { SketchbookWidget } from './widgets/sketchbook/sketchbook-widget';
 import { SketchbookTreeWidget } from './widgets/sketchbook/sketchbook-tree-widget';
 import { createSketchbookTreeWidget } from './widgets/sketchbook/sketchbook-tree-container';
+import { SketchCache } from './widgets/cloud-sketchbook/cloud-sketch-cache';
+import { UploadFirmware } from './contributions/upload-firmware';
+import {
+  UploadFirmwareDialog,
+  UploadFirmwareDialogProps,
+  UploadFirmwareDialogWidget,
+} from './dialogs/firmware-uploader/firmware-uploader-dialog';
+
+import { UploadCertificate } from './contributions/upload-certificate';
+import {
+  ArduinoFirmwareUploader,
+  ArduinoFirmwareUploaderPath,
+} from '../common/protocol/arduino-firmware-uploader';
+import {
+  UploadCertificateDialog,
+  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';
 
 const ElementQueries = require('css-element-queries/src/ElementQueries');
 
@@ -255,9 +281,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(CommandContribution).toService(ArduinoFrontendContribution);
   bind(MenuContribution).toService(ArduinoFrontendContribution);
   bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
-    bind(FrontendApplicationContribution).toService(
-        ArduinoFrontendContribution
-    );
+  bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
   bind(ColorContribution).toService(ArduinoFrontendContribution);
 
   bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
@@ -356,7 +380,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
@@ -370,8 +394,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);
@@ -379,30 +403,19 @@ 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(MonitorServiceClientImpl);
-            return connection.createProxy(MonitorServicePath, client);
-        })
-        .inSingletonScope();
-    bind(MonitorConnection).toSelf().inSingletonScope();
-    // Serial monitor service client to receive and delegate notifications from the backend.
-    bind(MonitorServiceClientImpl).toSelf().inSingletonScope();
-    bind(MonitorServiceClient)
-        .toDynamicValue((context) => {
-            const client = context.container.get(MonitorServiceClientImpl);
-            WebSocketConnectionProvider.createProxy(
-                context.container,
-                MonitorServicePath,
-                client
-            );
-            return client;
+      const connection = context.container.get(WebSocketConnectionProvider);
+      const client =
+        context.container.get<SerialServiceClient>(SerialServiceClient);
+      return connection.createProxy(SerialServicePath, client);
     })
     .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);
@@ -426,7 +439,9 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   rebind(TheiaKeymapsFrontendContribution)
     .to(KeymapsFrontendContribution)
     .inSingletonScope();
-    rebind(TheiaEditorContribution).to(EditorContribution).inSingletonScope();
+  rebind(TheiaEditorPreviewContribution)
+    .to(EditorPreviewContribution)
+    .inSingletonScope();
   rebind(TheiaMonacoStatusBarContribution)
     .to(MonacoStatusBarContribution)
     .inSingletonScope();
@@ -479,6 +494,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);
@@ -525,6 +546,15 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     )
     .inSingletonScope();
 
+  bind(ArduinoFirmwareUploader)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        ArduinoFirmwareUploaderPath
+      )
+    )
+    .inSingletonScope();
+
   // File-system extension
   bind(FileSystemExt)
     .toDynamicValue((context) =>
@@ -574,12 +604,15 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   Contribution.configure(bind, About);
   Contribution.configure(bind, Debug);
   Contribution.configure(bind, Sketchbook);
+  Contribution.configure(bind, UploadFirmware);
+  Contribution.configure(bind, UploadCertificate);
   Contribution.configure(bind, BoardSelection);
   Contribution.configure(bind, OpenRecentSketch);
   Contribution.configure(bind, Help);
   Contribution.configure(bind, AddFile);
   Contribution.configure(bind, ArchiveSketch);
   Contribution.configure(bind, AddZipLibrary);
+  Contribution.configure(bind, PlotterFrontendContribution);
 
   bind(ResponseServiceImpl)
     .toSelf()
@@ -592,7 +625,9 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
       );
       return responseService;
     });
+
   bind(ResponseService).toService(ResponseServiceImpl);
+  bind(ResponseServiceArduino).toService(ResponseServiceImpl);
 
   bind(NotificationCenter).toSelf().inSingletonScope();
   bind(FrontendApplicationContribution).toService(NotificationCenter);
@@ -642,17 +677,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(DebugConfigurationManager).toSelf().inSingletonScope();
   rebind(TheiaDebugConfigurationManager).toService(DebugConfigurationManager);
 
-    // Patch for the debug hover: https://github.com/eclipse-theia/theia/pull/9256/
-    rebind(DebugEditorModelFactory)
-        .toDynamicValue(
-            ({ container }) =>
-                <DebugEditorModelFactory>(
-                    ((editor) =>
-                        DebugEditorModel.createModel(container, editor))
-                )
-        )
-        .inSingletonScope();
-
   // Preferences
   bindArduinoPreferences(bind);
 
@@ -662,7 +686,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();
@@ -679,9 +706,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     createSketchbookTreeWidget(container)
   );
   bindViewContribution(bind, SketchbookWidgetContribution);
-    bind(FrontendApplicationContribution).toService(
-        SketchbookWidgetContribution
-    );
+  bind(FrontendApplicationContribution).toService(SketchbookWidgetContribution);
   bind(WidgetFactory).toDynamicValue(({ container }) => ({
     id: 'arduino-sketchbook-widget',
     createWidget: () => container.get(SketchbookWidget),
@@ -693,12 +718,12 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     createCloudSketchbookTreeWidget(container)
   );
   bind(CreateApi).toSelf().inSingletonScope();
+  bind(SketchCache).toSelf().inSingletonScope();
+
   bind(ShareSketchDialog).toSelf().inSingletonScope();
   bind(AuthenticationClientService).toSelf().inSingletonScope();
   bind(CommandContribution).toService(AuthenticationClientService);
-    bind(FrontendApplicationContribution).toService(
-        AuthenticationClientService
-    );
+  bind(FrontendApplicationContribution).toService(AuthenticationClientService);
   bind(AuthenticationService)
     .toDynamicValue((context) =>
       WebSocketConnectionProvider.createProxy(
@@ -719,4 +744,21 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     id: 'cloud-sketchbook-composite-widget',
     createWidget: () => ctx.container.get(CloudSketchbookCompositeWidget),
   }));
+
+  bind(UploadFirmwareDialogWidget).toSelf().inSingletonScope();
+  bind(UploadFirmwareDialog).toSelf().inSingletonScope();
+  bind(UploadFirmwareDialogProps).toConstantValue({
+    title: 'UploadFirmware',
+  });
+  bind(UploadCertificateDialogWidget).toSelf().inSingletonScope();
+  bind(UploadCertificateDialog).toSelf().inSingletonScope();
+  bind(UploadCertificateDialogProps).toConstantValue({
+    title: 'UploadCertificate',
+  });
+
+  bind(UserFieldsDialogWidget).toSelf().inSingletonScope();
+  bind(UserFieldsDialog).toSelf().inSingletonScope();
+  bind(UserFieldsDialogProps).toConstantValue({
+    title: 'UserFields',
+  });
 });

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

@@ -6,6 +6,7 @@ import {
   PreferenceContribution,
   PreferenceSchema,
 } from '@theia/core/lib/browser/preferences';
+import { nls } from '@theia/core/lib/common';
 import { CompilerWarningLiterals, CompilerWarnings } from '../common/protocol';
 
 export const ArduinoConfigSchema: PreferenceSchema = {
@@ -13,24 +14,34 @@ export const ArduinoConfigSchema: PreferenceSchema = {
   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,76 +50,114 @@ 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.',
+      description: nls.localize(
+        'arduino/preferences/ide.autoUpdate',
+        'True to enable automatic update checks. The IDE will check for updates automatically and periodically.'
+      ),
       default: true,
     },
+    'arduino.board.certificates': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/board.certificates',
+        'List of certificates that can be uploaded to boards'
+      ),
+      default: '',
+    },
     'arduino.sketchbook.showAllFiles': {
       type: 'boolean',
-            description:
-                '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',
     },
   },
@@ -123,6 +172,7 @@ export interface ArduinoConfiguration {
   'arduino.window.autoScale': boolean;
   'arduino.window.zoomLevel': number;
   'arduino.ide.autoUpdate': boolean;
+  'arduino.board.certificates': string;
   'arduino.sketchbook.showAllFiles': boolean;
   'arduino.cloud.enabled': boolean;
   'arduino.cloud.pull.warn': boolean;
@@ -146,8 +196,7 @@ export function createArduinoPreferences(
 
 export function bindArduinoPreferences(bind: interfaces.Bind): void {
   bind(ArduinoPreferences).toDynamicValue((ctx) => {
-        const preferences =
-            ctx.container.get<PreferenceService>(PreferenceService);
+    const preferences = ctx.container.get<PreferenceService>(PreferenceService);
     return createArduinoPreferences(preferences);
   });
   bind(PreferenceContribution).toConstantValue({

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 = {
+  export const LOGIN = Command.toLocalizedCommand(
+    {
       id: 'arduino-cloud--login',
       label: 'Sign in',
-    };
+    },
+    'arduino/cloud/signIn'
+  );
 
-    export const LOGOUT: Command = {
+  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

@@ -7,10 +7,10 @@ import {
   Board,
 } from '../../common/protocol/boards-service';
 import { BoardsServiceProvider } from './boards-service-provider';
-import { BoardsListWidgetFrontendContribution } from './boards-widget-frontend-contribution';
 import { BoardsConfig } from './boards-config';
-import { Installable } from '../../common/protocol';
-import { ResponseServiceImpl } from '../response-service-impl';
+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
@@ -27,8 +27,8 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
   @inject(BoardsServiceProvider)
   protected readonly boardsServiceClient: BoardsServiceProvider;
 
-    @inject(ResponseServiceImpl)
-    protected readonly responseService: ResponseServiceImpl;
+  @inject(ResponseServiceArduino)
+  protected readonly responseService: ResponseServiceArduino;
 
   @inject(BoardsListWidgetFrontendContribution)
   protected readonly boardsManagerFrontendContribution: BoardsListWidgetFrontendContribution;
@@ -44,12 +44,11 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
   }
 
   protected ensureCoreExists(config: BoardsConfig.Config): void {
-        const { selectedBoard } = config;
+    const { selectedBoard, selectedPort } = config;
     if (
       selectedBoard &&
-            !this.notifications.find((board) =>
-                Board.sameAs(board, selectedBoard)
-            )
+      selectedPort &&
+      !this.notifications.find((board) => Board.sameAs(board, selectedBoard))
     ) {
       this.notifications.push(selectedBoard);
       this.boardsService.search({}).then((packages) => {
@@ -60,16 +59,12 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
         const packagesForBoard = packages.filter(
           (pkg) =>
             BoardsPackage.contains(selectedBoard, pkg) ||
-                        pkg.boards.some(
-                            (board) => board.name === selectedBoard.name
-                        )
+            pkg.boards.some((board) => board.name === selectedBoard.name)
         );
 
         // check if one of the packages for the board is already installed. if so, no hint
         if (
-                    packagesForBoard.some(
-                        ({ installedVersion }) => !!installedVersion
-                    )
+          packagesForBoard.some(({ installedVersion }) => !!installedVersion)
         ) {
           return;
         }
@@ -87,21 +82,32 @@ 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) => Board.sameAs(board, selectedBoard)
+              const index = this.notifications.findIndex((board) =>
+                Board.sameAs(board, selectedBoard)
               );
               if (index !== -1) {
                 this.notifications.splice(index, 1);
               }
-                            if (answer === 'Yes') {
+              if (answer === yes) {
                 await Installable.installWithProgress({
                   installable: this.boardsService,
                   item: candidate,
@@ -111,13 +117,11 @@ export class BoardsAutoInstaller implements FrontendApplicationContribution {
                 });
                 return;
               }
-                            if (answer) {
+              if (answer === manualInstall) {
                 this.boardsManagerFrontendContribution
                   .openView({ reveal: true })
                   .then((widget) =>
-                                        widget.refresh(
-                                            candidate.name.toLocaleLowerCase()
-                                        )
+                    widget.refresh(candidate.name.toLocaleLowerCase())
                   );
               }
             });

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

@@ -54,9 +54,7 @@ export class BoardsConfigDialogWidget extends ReactWidget {
           notificationCenter={this.notificationCenter}
           onConfigChange={this.fireConfigChanged}
           onFocusNodeSet={this.setFocusNode}
-                    onFilteredTextDidChangeEvent={
-                        this.onFilterTextDidChangeEmitter.event
-                    }
+          onFilteredTextDidChangeEvent={this.onFilterTextDidChangeEmitter.event}
         />
       </div>
     );

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

@@ -1,15 +1,12 @@
 import { injectable, inject, postConstruct } from 'inversify';
 import { Message } from '@phosphor/messaging';
-import {
-    AbstractDialog,
-    DialogProps,
-    Widget,
-    DialogError,
-} from '@theia/core/lib/browser';
+import { DialogProps, Widget, DialogError } from '@theia/core/lib/browser';
+import { AbstractDialog } from '../theia/dialogs/dialogs';
 import { BoardsConfig } from './boards-config';
 import { BoardsService } from '../../common/protocol/boards-service';
 import { BoardsServiceProvider } from './boards-service-provider';
 import { BoardsConfigDialogWidget } from './boards-config-dialog-widget';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardsConfigDialogProps extends DialogProps {}
@@ -36,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()
@@ -67,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);
 
@@ -76,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 just to compile, but not to upload your sketch.'
+      ),
     ]) {
       const p = document.createElement('div');
       p.textContent = paragraph;
@@ -121,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 {
@@ -131,9 +136,7 @@ export class BoardsConfig extends React.Component<
         this.setState({ searchResults: [] })
       ),
       this.props.onFilteredTextDidChangeEvent((query) =>
-                this.setState({ query }, () =>
-                    this.updateBoards(this.state.query)
-                )
+        this.setState({ query }, () => this.updateBoards(this.state.query))
       ),
     ]);
   }
@@ -185,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) =>
+          Port.sameAs(board.port, left)
+        );
+        const rightBoard = this.availableBoards.find((board) =>
+          Port.sameAs(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 = () => {
@@ -231,9 +273,7 @@ export class BoardsConfig extends React.Component<
         <div className="content">
           <div className="title">{title}</div>
           {contentRenderer()}
-                    <div className="footer">
-                        {footerRenderer ? footerRenderer() : ''}
-                    </div>
+          <div className="footer">{footerRenderer ? footerRenderer() : ''}</div>
         </div>
       </div>
     );
@@ -245,13 +285,8 @@ export class BoardsConfig extends React.Component<
     // It is tricky when the core is not yet installed, no FQBNs are available.
     const distinctBoards = new Map<string, Board.Detailed>();
     const toKey = ({ name, packageName, fqbn }: Board.Detailed) =>
-            !!fqbn
-                ? `${name}-${packageName}-${fqbn}`
-                : `${name}-${packageName}`;
-        for (const board of Board.decorateBoards(
-            selectedBoard,
-            searchResults
-        )) {
+      !!fqbn ? `${name}-${packageName}-${fqbn}` : `${name}-${packageName}`;
+    for (const board of Board.decorateBoards(selectedBoard, searchResults)) {
       const key = toKey(board);
       if (!distinctBoards.has(key)) {
         distinctBoards.set(key, board);
@@ -274,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}
@@ -289,8 +324,24 @@ 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>
     ) : (
@@ -311,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}
@@ -380,10 +436,7 @@ export namespace BoardsConfig {
           }
         : undefined;
       const jsonConfig = JSON.stringify({ selectedBoard, selectedPort });
-            copy.searchParams.set(
-                'boards-config',
-                encodeURIComponent(jsonConfig)
-            );
+      copy.searchParams.set('boards-config', encodeURIComponent(jsonConfig));
       return copy;
     }
 

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 {
@@ -34,9 +35,7 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
   protected readonly toDisposeOnBoardChange = new DisposableCollection();
 
   async onStart(): Promise<void> {
-        this.updateMenuActions(
-            this.boardsServiceClient.boardsConfig.selectedBoard
-        );
+    this.updateMenuActions(this.boardsServiceClient.boardsConfig.selectedBoard);
     this.boardsDataStore.onChanged(() =>
       this.updateMenuActions(
         this.boardsServiceClient.boardsConfig.selectedBoard
@@ -63,17 +62,10 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
               ...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP,
               'z01_boardsConfig',
             ]; // `z_` is for ordering.
-                        for (const {
-                            label,
-                            option,
-                            values,
-                        } of configOptions.sort(
+            for (const { label, option, values } of configOptions.sort(
               ConfigOption.LABEL_COMPARATOR
             )) {
-                            const menuPath = [
-                                ...boardsConfigMenuPath,
-                                `${option}`,
-                            ];
+              const menuPath = [...boardsConfigMenuPath, `${option}`];
               const commands = new Map<
                 string,
                 Disposable & { label: string }
@@ -84,18 +76,17 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
                 const selectedValue = value.value;
                 const handler = {
                   execute: () =>
-                                        this.boardsDataStore.selectConfigOption(
-                                            { fqbn, option, selectedValue }
-                                        ),
+                    this.boardsDataStore.selectConfigOption({
+                      fqbn,
+                      option,
+                      selectedValue,
+                    }),
                   isToggled: () => value.selected,
                 };
                 commands.set(
                   id,
                   Object.assign(
-                                        this.commandRegistry.registerCommand(
-                                            command,
-                                            handler
-                                        ),
+                    this.commandRegistry.registerCommand(command, handler),
                     { label: value.label }
                   )
                 );
@@ -104,26 +95,19 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
               this.toDisposeOnBoardChange.pushAll([
                 ...commands.values(),
                 Disposable.create(() =>
-                                    unregisterSubmenu(
-                                        menuPath,
-                                        this.menuRegistry
-                                    )
+                  unregisterSubmenu(menuPath, this.menuRegistry)
                 ),
-                                ...Array.from(commands.keys()).map(
-                                    (commandId, i) => {
-                                        const { label } =
-                                            commands.get(commandId)!;
-                                        this.menuRegistry.registerMenuAction(
-                                            menuPath,
-                                            { commandId, order: `${i}`, label }
-                                        );
+                ...Array.from(commands.keys()).map((commandId, i) => {
+                  const { label } = commands.get(commandId)!;
+                  this.menuRegistry.registerMenuAction(menuPath, {
+                    commandId,
+                    order: `${i}`,
+                    label,
+                  });
                   return Disposable.create(() =>
-                                            this.menuRegistry.unregisterMenuAction(
-                                                commandId
-                                            )
+                    this.menuRegistry.unregisterMenuAction(commandId)
                   );
-                                    }
-                                ),
+                }),
               ]);
             }
           }
@@ -132,19 +116,17 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
               ...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP,
               'z02_programmers',
             ];
-                        const label = selectedProgrammer
-                            ? `Programmer: "${selectedProgrammer.name}"`
-                            : 'Programmer';
-                        this.menuRegistry.registerSubmenu(
-                            programmersMenuPath,
-                            label
+            const programmerNls = nls.localize(
+              'arduino/board/programmer',
+              'Programmer'
             );
+            const label = selectedProgrammer
+              ? `${programmerNls}: "${selectedProgrammer.name}"`
+              : programmerNls;
+            this.menuRegistry.registerSubmenu(programmersMenuPath, label);
             this.toDisposeOnBoardChange.push(
               Disposable.create(() =>
-                                unregisterSubmenu(
-                                    programmersMenuPath,
-                                    this.menuRegistry
-                                )
+                unregisterSubmenu(programmersMenuPath, this.menuRegistry)
               )
             );
             for (const programmer of programmers) {
@@ -157,29 +139,19 @@ export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
                     selectedProgrammer: programmer,
                   }),
                 isToggled: () =>
-                                    Programmer.equals(
-                                        programmer,
-                                        selectedProgrammer
-                                    ),
+                  Programmer.equals(programmer, selectedProgrammer),
               };
-                            this.menuRegistry.registerMenuAction(
-                                programmersMenuPath,
-                                { commandId: command.id, label: name }
-                            );
-                            this.commandRegistry.registerCommand(
-                                command,
-                                handler
-                            );
+              this.menuRegistry.registerMenuAction(programmersMenuPath, {
+                commandId: command.id,
+                label: name,
+              });
+              this.commandRegistry.registerCommand(command, handler);
               this.toDisposeOnBoardChange.pushAll([
                 Disposable.create(() =>
-                                    this.commandRegistry.unregisterCommand(
-                                        command
-                                    )
+                  this.commandRegistry.unregisterCommand(command)
                 ),
                 Disposable.create(() =>
-                                    this.menuRegistry.unregisterMenuAction(
-                                        command.id
-                                    )
+                  this.menuRegistry.unregisterMenuAction(command.id)
                 ),
               ]);
             }

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

@@ -80,10 +80,7 @@ export class BoardsDataStore implements FrontendApplicationContribution {
       return undefined;
     }
 
-        const { configOptions } = await this.getData(
-            fqbn,
-            boardsPackageVersion
-        );
+    const { configOptions } = await this.getData(fqbn, boardsPackageVersion);
     return ConfigOption.decorate(fqbn, configOptions);
   }
 
@@ -133,9 +130,7 @@ export class BoardsDataStore implements FrontendApplicationContribution {
   ): Promise<boolean> {
     const data = deepClone(await this.getData(fqbn, boardsPackageVersion));
     const { programmers } = data;
-        if (
-            !programmers.find((p) => Programmer.equals(selectedProgrammer, p))
-        ) {
+    if (!programmers.find((p) => Programmer.equals(selectedProgrammer, p))) {
       return false;
     }
 
@@ -204,10 +199,7 @@ export class BoardsDataStore implements FrontendApplicationContribution {
     return this.storageService.setData(key, data);
   }
 
-    protected getStorageKey(
-        fqbn: string,
-        version: Installable.Version
-    ): string {
+  protected getStorageKey(fqbn: string, version: Installable.Version): string {
     return `.arduinoIDE-configOptions-${version}-${fqbn}`;
   }
 
@@ -246,9 +238,9 @@ export class BoardsDataStore implements FrontendApplicationContribution {
     if (!fqbn) {
       return undefined;
     }
-        const boardsPackage = await this.boardsService.getContainerBoardPackage(
-            { fqbn }
-        );
+    const boardsPackage = await this.boardsService.getContainerBoardPackage({
+      fqbn,
+    });
     if (!boardsPackage) {
       return undefined;
     }

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,
@@ -19,7 +20,7 @@ export class BoardsListWidget extends ListWidget<BoardsPackage> {
     super({
       id: BoardsListWidget.WIDGET_ID,
       label: BoardsListWidget.WIDGET_LABEL,
-            iconClass: 'fa fa-microchip',
+      iconClass: 'fa fa-arduino-boards',
       searchable: service,
       installable: service,
       itemLabel: (item: BoardsPackage) => item.name,
@@ -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());
   }
 
@@ -114,8 +120,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
       );
       if (
         installedBoard &&
-                (!selectedBoard.fqbn ||
-                    selectedBoard.fqbn === installedBoard.fqbn)
+        (!selectedBoard.fqbn || selectedBoard.fqbn === installedBoard.fqbn)
       ) {
         this.logger.info(
           `Board package ${id}[${installedVersion}] was installed. Updating the FQBN of the currently selected ${selectedBoard.name} board. [FQBN: ${installedBoard.fqbn}]`
@@ -135,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
@@ -165,10 +176,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
       const uninstalledBoard = event.item.boards.find(
         ({ name }) => name === selectedBoard.name
       );
-            if (
-                uninstalledBoard &&
-                uninstalledBoard.fqbn === selectedBoard.fqbn
-            ) {
+      if (uninstalledBoard && uninstalledBoard.fqbn === selectedBoard.fqbn) {
         // We should not unset the FQBN, if the selected board is an attached, recognized board.
         // Attach Uno and install AVR, select Uno. Uninstall the AVR core while Uno is selected. We do not want to discard the FQBN of the Uno board.
         // Dev note: We cannot assume the `selectedBoard` is a type of `AvailableBoard`.
@@ -182,8 +190,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
         if (
           selectedAvailableBoard &&
           selectedAvailableBoard.selected &&
-                    selectedAvailableBoard.state ===
-                        AvailableBoard.State.recognized
+          selectedAvailableBoard.state === AvailableBoard.State.recognized
         ) {
           return;
         }
@@ -203,22 +210,14 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
   }
 
   protected async tryReconnect(): Promise<boolean> {
-        if (
-            this.latestValidBoardsConfig &&
-            !this.canUploadTo(this.boardsConfig)
-        ) {
+    if (this.latestValidBoardsConfig && !this.canUploadTo(this.boardsConfig)) {
       for (const board of this.availableBoards.filter(
         ({ state }) => state !== AvailableBoard.State.incomplete
       )) {
         if (
-                    this.latestValidBoardsConfig.selectedBoard.fqbn ===
-                        board.fqbn &&
-                    this.latestValidBoardsConfig.selectedBoard.name ===
-                        board.name &&
-                    Port.sameAs(
-                        this.latestValidBoardsConfig.selectedPort,
-                        board.port
-                    )
+          this.latestValidBoardsConfig.selectedBoard.fqbn === board.fqbn &&
+          this.latestValidBoardsConfig.selectedBoard.name === board.name &&
+          Port.sameAs(this.latestValidBoardsConfig.selectedPort, board.port)
         ) {
           this.boardsConfig = this.latestValidBoardsConfig;
           return true;
@@ -230,10 +229,8 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
         ({ state }) => state !== AvailableBoard.State.incomplete
       )) {
         if (
-                    this.latestValidBoardsConfig.selectedBoard.fqbn ===
-                        board.fqbn &&
-                    this.latestValidBoardsConfig.selectedBoard.name ===
-                        board.name
+          this.latestValidBoardsConfig.selectedBoard.fqbn === board.fqbn &&
+          this.latestValidBoardsConfig.selectedBoard.name === board.name
         ) {
           this.boardsConfig = {
             ...this.latestValidBoardsConfig,
@@ -279,6 +276,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`.
    */
@@ -292,9 +301,12 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
 
     if (!config.selectedBoard) {
       if (!options.silent) {
-                this.messageService.warn('No boards selected.', {
+        this.messageService.warn(
+          nls.localize('arduino/board/noneSelected', 'No boards selected.'),
+          {
             timeout: 3000,
-                });
+          }
+        );
       }
       return false;
     }
@@ -317,8 +329,14 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     if (!config.selectedPort) {
       if (!options.silent) {
         this.messageService.warn(
-                    `No ports selected for board: '${name}'.`,
-                    { timeout: 3000 }
+          nls.localize(
+            'arduino/board/noPortsSelected',
+            "No ports selected for board: '{0}'.",
+            name
+          ),
+          {
+            timeout: 3000,
+          }
         );
       }
       return false;
@@ -327,7 +345,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 }
         );
       }
@@ -345,21 +367,16 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     what: Board & { port: Port },
     timeout?: number
   ): Promise<void> {
-        const find = (
-            needle: Board & { port: Port },
-            haystack: AvailableBoard[]
-        ) =>
+    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.equals(needle.port, board.port)
       );
     const timeoutTask =
       !!timeout && timeout > 0
         ? new Promise<void>((_, reject) =>
             setTimeout(
-                          () =>
-                              reject(new Error(`Timeout after ${timeout} ms.`)),
+              () => reject(new Error(`Timeout after ${timeout} ms.`)),
               timeout
             )
           )
@@ -372,21 +389,18 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
         resolve();
         return;
       }
-            const disposable = this.onAvailableBoardsChanged(
-                (availableBoards) => {
+      const disposable = this.onAvailableBoardsChanged((availableBoards) => {
         candidate = find(what, availableBoards);
         if (candidate) {
           disposable.dispose();
           resolve();
         }
-                }
-            );
+      });
     });
     return await Promise.race([waitUntilTask, timeoutTask]);
   }
 
   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 (
@@ -404,56 +418,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;
+      }
+
+      // 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;
+        }
+      }
+      return false;
+    });
 
     for (const boardPort of availableBoardPorts) {
-            let state = AvailableBoard.State.incomplete; // Initial pessimism.
-            let board = attachedSerialBoards.find(({ port }) =>
+      const board = attachedBoards.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,
+
+      let availableBoard = {} as AvailableBoard;
+      if (board) {
+        availableBoard = {
+          ...board,
+          state: AvailableBoard.State.recognized,
+          selected: BoardsConfig.Config.sameAs(boardsConfig, board),
           port: boardPort,
         };
-                    state = AvailableBoard.State.guessed;
-                }
-            }
-            if (!board) {
-                availableBoards.push({
-                    name: 'Unknown',
+      } 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,
-                    state,
-                });
+        };
       } else {
-                const selected = BoardsConfig.Config.sameAs(
-                    boardsConfig,
-                    board
-                );
-                availableBoards.push({
-                    ...board,
-                    state,
-                    selected,
+        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,
@@ -462,30 +493,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);
   }
@@ -501,10 +526,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
       await this.setData(key, selectedBoard);
     }
     await Promise.all([
-            this.setData(
-                'latest-valid-boards-config',
-                this.latestValidBoardsConfig
-            ),
+      this.setData('latest-valid-boards-config', this.latestValidBoardsConfig),
       this.setData('latest-boards-config', this.latestBoardsConfig),
     ]);
   }
@@ -597,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;
+    } 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;
       }
-        let result = naturalCompare(left.name, right.name);
-        if (result !== 0) {
-            return result;
     }
-        if (left.fqbn && right.fqbn) {
-            result = naturalCompare(left.fqbn, right.fqbn);
-            if (result !== 0) {
-                return result;
-            }
-        }
-        if (left.port && right.port) {
-            result = Port.compare(left.port, right.port);
-            if (result !== 0) {
-                return result;
-            }
-        }
-        if (!!left.selected && !right.selected) {
-            return -1;
-        }
-        if (!!right.selected && !left.selected) {
-            return 1;
-        }
-        return left.state - right.state;
+    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;
@@ -20,9 +21,7 @@ export interface BoardsDropDownListCoords {
 export namespace BoardsDropDown {
   export interface Props {
     readonly coords: BoardsDropDownListCoords | 'hidden';
-        readonly items: Array<
-            AvailableBoard & { onClick: () => void; port: Port }
-        >;
+    readonly items: Array<AvailableBoard & { onClick: () => void; port: Port }>;
     readonly openBoardsConfig: () => void;
   }
 }
@@ -51,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"
@@ -59,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>
     );
   }
@@ -86,9 +97,7 @@ export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
     return (
       <div
         key={label}
-                className={`arduino-boards-dropdown-item ${
-                    selected ? 'selected' : ''
-                }`}
+        className={`arduino-boards-dropdown-item ${selected ? 'selected' : ''}`}
         onClick={onClick}
       >
         <div>{label}</div>
@@ -122,8 +131,8 @@ export class BoardsToolBarItem extends React.Component<
   }
 
   componentDidMount() {
-        this.props.boardsServiceClient.onAvailableBoardsChanged(
-            (availableBoards) => this.setState({ availableBoards })
+    this.props.boardsServiceClient.onAvailableBoardsChanged((availableBoards) =>
+      this.setState({ availableBoards })
     );
   }
 
@@ -156,12 +165,13 @@ 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
-            );
+      const selectedBoard = availableBoards.find(({ selected }) => selected);
       if (!selectedBoard || !selectedBoard.port) {
         return 'fa fa-times notAttached';
       }
@@ -178,9 +188,7 @@ export class BoardsToolBarItem extends React.Component<
             <div className="inner-container" onClick={this.show}>
               <span className={decorator} />
               <div className="label noWrapInfo">
-                                <div className="noWrapInfo noselect">
-                                    {title}
-                                </div>
+                <div className="noWrapInfo noselect">{title}</div>
               </div>
               <span className="fa fa-caret-down caret" />
             </div>
@@ -193,18 +201,13 @@ export class BoardsToolBarItem extends React.Component<
             .map((board) => ({
               ...board,
               onClick: () => {
-                                if (
-                                    board.state ===
-                                    AvailableBoard.State.incomplete
-                                ) {
-                                    this.props.boardsServiceClient.boardsConfig =
-                                        {
+                if (board.state === AvailableBoard.State.incomplete) {
+                  this.props.boardsServiceClient.boardsConfig = {
                     selectedPort: board.port,
                   };
                   this.openDialog();
                 } else {
-                                    this.props.boardsServiceClient.boardsConfig =
-                                        {
+                  this.props.boardsServiceClient.boardsConfig = {
                     selectedBoard: board,
                     selectedPort: board.port,
                   };
@@ -218,9 +221,7 @@ export class BoardsToolBarItem extends React.Component<
   }
 
   protected openDialog = () => {
-        this.props.commands.executeCommand(
-            ArduinoCommands.OPEN_BOARDS_DIALOG.id
-        );
+    this.props.commands.executeCommand(ArduinoCommands.OPEN_BOARDS_DIALOG.id);
     this.setState({ coords: 'hidden' });
   };
 }

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

@@ -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,18 +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(),
@@ -88,29 +99,85 @@ ${showAll ? `Copyright © ${new Date().getFullYear()} Arduino SA` : ''}
     let result = now.diff(other, 'minute');
     if (result < 60) {
       return result === 1
-                ? `${result} minute ago`
-                : `${result} minute ago`;
+        ? 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`;
+        ? 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

@@ -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.', {
+    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

@@ -4,22 +4,26 @@ 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';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { ResponseServiceImpl } from '../response-service-impl';
-import { Installable, LibraryService } from '../../common/protocol';
+import {
+  Installable,
+  LibraryService,
+  ResponseServiceArduino,
+} from '../../common/protocol';
 import {
   SketchContribution,
   Command,
   CommandRegistry,
   MenuModelRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class AddZipLibrary extends SketchContribution {
   @inject(EnvVariablesServer)
   protected readonly envVariableServer: EnvVariablesServer;
 
-    @inject(ResponseServiceImpl)
-    protected readonly responseService: ResponseServiceImpl;
+  @inject(ResponseServiceArduino)
+  protected readonly responseService: ResponseServiceArduino;
 
   @inject(LibraryService)
   protected readonly libraryService: LibraryService;
@@ -41,7 +45,7 @@ export class AddZipLibrary extends SketchContribution {
     });
     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',
     });
   }
@@ -50,12 +54,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'],
         },
       ],
@@ -68,9 +75,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);
@@ -80,39 +90,44 @@ export class AddZipLibrary extends SketchContribution {
     }
   }
 
-    private async doInstall(
-        zipUri: string,
-        overwrite?: boolean
-    ): Promise<void> {
+  private async doInstall(zipUri: string, overwrite?: boolean): Promise<void> {
     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 }),
+        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) {
       if (error instanceof Error) {
-                const match = error.message.match(
-                    /library (.*?) already installed/
-                );
+        const match = error.message.match(/library (.*?) already installed/);
         if (match && match.length >= 2) {
           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(
+              nls.localize(
+                'arduino/library/libraryAlreadyExists',
                 'A library already exists. Do you want to overwrite it?'
+              )
             );
           }
         }

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

@@ -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}'.`, {
+    this.messageService.info(
+      nls.localize(
+        'arduino/sketch/createdArchive',
+        "Created archive '{0}'.",
+        archiveBasename
+      ),
+      {
         timeout: 2000,
-        });
+      }
+    );
   }
 }
 

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

@@ -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(
+            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(
+            nls.localize(
+              'arduino/board/selectPortForInfo',
               'Please select a port to obtain board info.'
+            )
           );
           return;
         }
@@ -77,16 +88,13 @@ export class BoardSelection extends SketchContribution {
           const detail = `BN: ${selectedBoard.name}
 VID: ${VID}
 PID: ${PID}`;
-                    await remote.dialog.showMessageBox(
-                        remote.getCurrentWindow(),
-                        {
-                            message: 'Board Info',
-                            title: 'Board Info',
+          await remote.dialog.showMessageBox(remote.getCurrentWindow(), {
+            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')],
+          });
         }
       },
     });
@@ -94,18 +102,17 @@ PID: ${PID}`;
 
   onStart(): void {
     this.updateMenus();
-        this.notificationCenter.onPlatformInstalled(
-            this.updateMenus.bind(this)
-        );
-        this.notificationCenter.onPlatformUninstalled(
-            this.updateMenus.bind(this)
-        );
+    this.notificationCenter.onPlatformInstalled(this.updateMenus.bind(this));
+    this.notificationCenter.onPlatformUninstalled(this.updateMenus.bind(this));
     this.boardsServiceProvider.onBoardsConfigChanged(
       this.updateMenus.bind(this)
     );
     this.boardsServiceProvider.onAvailableBoardsChanged(
       this.updateMenus.bind(this)
     );
+    this.boardsServiceProvider.onAvailablePortsChanged(
+      this.updateMenus.bind(this)
+    );
   }
 
   protected async updateMenus(): Promise<void> {
@@ -134,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(
@@ -151,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(
@@ -162,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(
@@ -180,77 +195,80 @@ PID: ${PID}`;
 
     this.menuModelRegistry.registerMenuAction(boardsManagerGroup, {
       commandId: `${BoardsListWidget.WIDGET_ID}:toggle`,
-            label: 'Boards Manager...',
+      label: `${BoardsListWidget.WIDGET_LABEL}...`,
     });
 
     // Installed boards
     for (const board of installedBoards) {
-            const { packageId, packageName, fqbn, name } = board;
+      const { packageId, packageName, fqbn, name, manuallyInstalled } = board;
 
+      const packageLabel =
+        packageName +
+        `${
+          manuallyInstalled
+            ? nls.localize('arduino/board/inSketchbook', ' (in Sketchbook)')
+            : ''
+        }`;
       // Platform submenu
       const platformMenuPath = [...boardsPackagesGroup, packageId];
       // Note: Registering the same submenu twice is a noop. No need to group the boards per platform.
-            this.menuModelRegistry.registerSubmenu(
-                platformMenuPath,
-                packageName
-            );
+      this.menuModelRegistry.registerSubmenu(platformMenuPath, packageLabel, {
+        order: packageName.toLowerCase(),
+      });
 
       const id = `arduino-select-board--${fqbn}`;
       const command = { id };
       const handler = {
         execute: () => {
           if (
-                        fqbn !==
-                        this.boardsServiceProvider.boardsConfig.selectedBoard
-                            ?.fqbn
+            fqbn !== this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn
           ) {
             this.boardsServiceProvider.boardsConfig = {
               selectedBoard: {
                 name,
                 fqbn,
-                                port: this.boardsServiceProvider.boardsConfig
-                                    .selectedBoard?.port, // TODO: verify!
+                port: this.boardsServiceProvider.boardsConfig.selectedBoard
+                  ?.port, // TODO: verify!
               },
               selectedPort:
-                                this.boardsServiceProvider.boardsConfig
-                                    .selectedPort,
+                this.boardsServiceProvider.boardsConfig.selectedPort,
             };
           }
         },
         isToggled: () =>
-                    fqbn ===
-                    this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn,
+          fqbn === this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn,
       };
 
       // Board menu
       const menuAction = { commandId: id, label: name };
       this.commandRegistry.registerCommand(command, handler);
       this.toDisposeBeforeMenuRebuild.push(
-                Disposable.create(() =>
-                    this.commandRegistry.unregisterCommand(command)
-                )
-            );
-            this.menuModelRegistry.registerMenuAction(
-                platformMenuPath,
-                menuAction
+        Disposable.create(() => this.commandRegistry.unregisterCommand(command))
       );
+      this.menuModelRegistry.registerMenuAction(platformMenuPath, menuAction);
       // Note: we do not dispose the menu actions individually. Calling `unregisterSubmenu` on the parent will wipe the children menu nodes recursively.
     }
 
     // Installed ports
-        const registerPorts = (ports: AvailablePorts) => {
+    const registerPorts = (
+      protocol: string,
+      protocolOrder: number,
+      ports: AvailablePorts
+    ) => {
       const addresses = Object.keys(ports);
       if (!addresses.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(
@@ -259,32 +277,36 @@ PID: ${PID}`;
         )
       );
 
-            for (const address of addresses) {
-                if (!!ports[address]) {
-                    const [port, boards] = ports[address];
-                    if (!boards.length) {
-                        boards.push({
-                            name: '',
+      // First we show addresses with recognized boards connected,
+      // then all the rest.
+      const sortedAddresses = Object.keys(ports);
+      sortedAddresses.sort((left: string, right: string): number => {
+        const [, leftBoards] = ports[left];
+        const [, rightBoards] = ports[right];
+        return rightBoards.length - leftBoards.length;
       });
+
+      for (let i = 0; i < sortedAddresses.length; i++) {
+        const address = sortedAddresses[i];
+        const [port, boards] = ports[address];
+        let label = `${address}`;
+        if (boards.length) {
+          const boardsList = boards.map((board) => board.name).join(', ');
+          label = `${label} (${boardsList})`;
         }
-                    for (const { name, fqbn } of boards) {
-                        const id = `arduino-select-port--${address}${
-                            fqbn ? `--${fqbn}` : ''
-                        }`;
+        const id = `arduino-select-port--${address}`;
         const command = { id };
         const handler = {
           execute: () => {
             if (
               !Port.equals(
                 port,
-                                        this.boardsServiceProvider.boardsConfig
-                                            .selectedPort
+                this.boardsServiceProvider.boardsConfig.selectedPort
               )
             ) {
               this.boardsServiceProvider.boardsConfig = {
                 selectedBoard:
-                                            this.boardsServiceProvider
-                                                .boardsConfig.selectedBoard,
+                  this.boardsServiceProvider.boardsConfig.selectedBoard,
                 selectedPort: port,
               };
             }
@@ -292,15 +314,13 @@ PID: ${PID}`;
           isToggled: () =>
             Port.equals(
               port,
-                                    this.boardsServiceProvider.boardsConfig
-                                        .selectedPort
+              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`
+          order: `${protocolOrder + i + 1}`,
         };
         this.commandRegistry.registerCommand(command, handler);
         this.toDisposeBeforeMenuRebuild.push(
@@ -308,20 +328,25 @@ PID: ${PID}`;
             this.commandRegistry.unregisterCommand(command)
           )
         );
-                        this.menuModelRegistry.registerMenuAction(
-                            menuPath,
-                            menuAction
-                        );
-                    }
-                }
+        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,27 +39,24 @@ 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?.address;
+      const port = boardsConfig.selectedPort;
       const [fqbn, { selectedProgrammer: programmer }, verify, verbose] =
         await Promise.all([
           this.boardsDataStore.appendConfigToFqbn(
             boardsConfig.selectedBoard?.fqbn
           ),
-                    this.boardsDataStore.getData(
-                        boardsConfig.selectedBoard?.fqbn
-                    ),
+          this.boardsDataStore.getData(boardsConfig.selectedBoard?.fqbn),
           this.preferences.get('arduino.upload.verify'),
           this.preferences.get('arduino.upload.verbose'),
         ]);
@@ -70,15 +68,25 @@ export class BurnBootloader extends SketchContribution {
         verify,
         verbose,
       });
-            this.messageService.info('Done burning bootloader.', {
+      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);
         }
+      );
+    } catch (e) {
+      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

@@ -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.
@@ -46,10 +47,7 @@ export class Close extends SketchContribution {
           const currentWidgetInMain = toArray(
             this.shell.mainPanel.widgets()
           ).find((widget) => widget === currentWidget);
-                    if (
-                        currentWidgetInMain &&
-                        currentWidgetInMain.title.closable
-                    ) {
+          if (currentWidgetInMain && currentWidgetInMain.title.closable) {
             return currentWidgetInMain.close();
           }
         }
@@ -67,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
@@ -96,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',
     });
   }
@@ -116,10 +129,7 @@ export class Close extends SketchContribution {
     if (editorWidget) {
       const { editor } = editorWidget;
       if (editor instanceof MonacoEditor) {
-                const versionId = editor
-                    .getControl()
-                    .getModel()
-                    ?.getVersionId();
+        const versionId = editor.getControl().getModel()?.getVersionId();
         if (Number.isInteger(versionId) && versionId! > 1) {
           return true;
         }

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,
@@ -130,10 +130,7 @@ export abstract class SketchContribution extends Contribution {
     if (sketch) {
       for (const editor of this.editorManager.all) {
         const uri = editor.editor.uri;
-                if (
-                    Saveable.isDirty(editor) &&
-                    Sketch.isInSketch(uri, sketch)
-                ) {
+        if (Saveable.isDirty(editor) && Sketch.isInSketch(uri, sketch)) {
           override[uri.toString()] = editor.editor.document.getText();
         }
       }

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,10 +34,11 @@ 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 disabledMessageDidChangeEmitter = new Emitter<
-        string | undefined
-    >();
+  protected _disabledMessages?: string = nls.localize(
+    'arduino/common/noBoardSelected',
+    'No board selected'
+  ); // Initial pessimism.
+  protected disabledMessageDidChangeEmitter = new Emitter<string | undefined>();
   protected onDisabledMessageDidChange =
     this.disabledMessageDidChangeEmitter.event;
 
@@ -53,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>,
@@ -65,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 (
@@ -74,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;
       }
@@ -151,19 +176,19 @@ export class Debug extends SketchContribution {
       sketchPath,
       configPath,
     };
-        return this.commandService.executeCommand(
-            'arduino.debug.start',
-            config
-        );
+    return this.commandService.executeCommand('arduino.debug.start', config);
   }
 }
 
 export namespace Debug {
   export namespace Commands {
-        export const START_DEBUGGING: Command = {
+    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
@@ -48,12 +49,9 @@ export class EditContributions extends Contribution {
       execute: () => this.run('editor.action.nextMatchFindAction'),
     });
     registry.registerCommand(EditContributions.Commands.USE_FOR_FIND, {
-            execute: () =>
-                this.run('editor.action.previousSelectionMatchFindAction'),
+      execute: () => this.run('editor.action.previousSelectionMatchFindAction'),
     });
-        registry.registerCommand(
-            EditContributions.Commands.INCREASE_FONT_SIZE,
-            {
+    registry.registerCommand(EditContributions.Commands.INCREASE_FONT_SIZE, {
       execute: async () => {
         const settings = await this.settingsService.settings();
         if (settings.autoScaleInterface) {
@@ -64,11 +62,8 @@ export class EditContributions extends Contribution {
         await this.settingsService.update(settings);
         await this.settingsService.save();
       },
-            }
-        );
-        registry.registerCommand(
-            EditContributions.Commands.DECREASE_FONT_SIZE,
-            {
+    });
+    registry.registerCommand(EditContributions.Commands.DECREASE_FONT_SIZE, {
       execute: async () => {
         const settings = await this.settingsService.settings();
         if (settings.autoScaleInterface) {
@@ -79,23 +74,12 @@ export class EditContributions extends Contribution {
         await this.settingsService.update(settings);
         await this.settingsService.save();
       },
-            }
-        );
+    });
     /* Tools */ registry.registerCommand(
       EditContributions.Commands.AUTO_FORMAT,
       { execute: () => this.run('editor.action.formatDocument') }
     );
     registry.registerCommand(EditContributions.Commands.COPY_FOR_FORUM, {
-            execute: async () => {
-                const value = await this.currentValue();
-                if (value !== undefined) {
-                    this.clipboardService.writeText(`[code]
-${value}
-[/code]`);
-                }
-            },
-        });
-        registry.registerCommand(EditContributions.Commands.COPY_FOR_GITHUB, {
       execute: async () => {
         const value = await this.currentValue();
         if (value !== undefined) {
@@ -118,80 +102,99 @@ ${value}
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
       commandId: EditContributions.Commands.COPY_FOR_FORUM.id,
-            label: 'Copy for Forum',
+      label: nls.localize(
+        'arduino/editor/copyForForum',
+        'Copy for Forum (Markdown)'
+      ),
       order: '2',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.COPY_FOR_GITHUB.id,
-            label: 'Copy for GitHub',
+      commandId: CommonCommands.PASTE.id,
       order: '3',
     });
     registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: CommonCommands.PASTE.id,
+      commandId: CommonCommands.SELECT_ALL.id,
       order: '4',
     });
-        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: CommonCommands.SELECT_ALL.id,
-            order: '5',
-        });
     registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
       commandId: EditContributions.Commands.GO_TO_LINE.id,
-            label: 'Go to Line...',
-            order: '6',
+      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',
     });
   }
@@ -202,11 +205,6 @@ ${value}
       keybinding: 'CtrlCmd+Shift+C',
       when: 'editorFocus',
     });
-        registry.registerKeybinding({
-            command: EditContributions.Commands.COPY_FOR_GITHUB.id,
-            keybinding: 'CtrlCmd+Alt+C',
-            when: 'editorFocus',
-        });
     registry.registerKeybinding({
       command: EditContributions.Commands.GO_TO_LINE.id,
       keybinding: 'CtrlCmd+L',
@@ -287,9 +285,6 @@ export namespace EditContributions {
     export const COPY_FOR_FORUM: Command = {
       id: 'arduino-copy-for-forum',
     };
-        export const COPY_FOR_GITHUB: Command = {
-            id: 'arduino-copy-for-github',
-        };
     export const GO_TO_LINE: Command = {
       id: 'arduino-go-to-line',
     };

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 {
@@ -59,12 +60,8 @@ export abstract class Examples extends SketchContribution {
       const index = ArduinoMenus.FILE__EXAMPLES_SUBMENU.length - 1;
       const menuId = ArduinoMenus.FILE__EXAMPLES_SUBMENU[index];
       const groupPath =
-                index === 0
-                    ? []
-                    : ArduinoMenus.FILE__EXAMPLES_SUBMENU.slice(0, index);
-            const parent: CompositeMenuNode = (registry as any).findGroup(
-                groupPath
-            );
+        index === 0 ? [] : ArduinoMenus.FILE__EXAMPLES_SUBMENU.slice(0, index);
+      const parent: CompositeMenuNode = (registry as any).findGroup(groupPath);
       const examples = new CompositeMenuNode(menuId, '', { order: '4' });
       parent.addNode(examples);
     } catch (e) {
@@ -75,8 +72,10 @@ export abstract class Examples extends SketchContribution {
     // TODO: unregister submenu? https://github.com/eclipse-theia/theia/issues/7300
     registry.registerSubmenu(
       ArduinoMenus.FILE__EXAMPLES_SUBMENU,
-            'Examples',
-            { order: '4' }
+      nls.localize('arduino/examples/menu', 'Examples'),
+      {
+        order: '4',
+      }
     );
   }
 
@@ -108,11 +107,7 @@ export abstract class Examples extends SketchContribution {
       if (SketchContainer.is(sketchContainerOrPlaceholder)) {
         const { label } = sketchContainerOrPlaceholder;
         submenuPath = [...menuPath, label];
-                this.menuRegistry.registerSubmenu(
-                    submenuPath,
-                    label,
-                    subMenuOptions
-                );
+        this.menuRegistry.registerSubmenu(submenuPath, label, subMenuOptions);
         sketches.push(...sketchContainerOrPlaceholder.sketches);
         children.push(...sketchContainerOrPlaceholder.children);
       } else {
@@ -177,12 +172,18 @@ export class BuiltInExamples extends Examples {
     } catch (e) {
       console.error('Could not initialize built-in examples.', e);
       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,
@@ -219,17 +220,26 @@ export class LibraryExamples extends Examples {
       const fqbn = board?.fqbn;
       const name = board?.name;
       // Shows all examples when no board is selected, or the platform of the currently selected board is not installed.
-            const { user, current, any } = await this.examplesService.installed(
-                { fqbn }
-            );
+      const { user, current, any } = await this.examplesService.installed({
+        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

@@ -3,8 +3,8 @@ import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { EditorManager } from '@theia/editor/lib/browser/editor-manager';
 import { WindowService } from '@theia/core/lib/browser/window/window-service';
 import { CommandHandler } from '@theia/core/lib/common/command';
-import { QuickInputService } from '@theia/core/lib/browser/quick-open/quick-input-service';
 import { ArduinoMenus } from '../menu/arduino-menus';
+import { QuickInputService } from '@theia/core/lib/browser/quick-input/quick-input-service';
 import {
   Contribution,
   Command,
@@ -12,6 +12,7 @@ import {
   CommandRegistry,
   KeybindingRegistry,
 } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class Help extends Contribution {
@@ -51,25 +52,18 @@ export class Help extends Contribution {
       execute: async () => {
         let searchFor: string | undefined = undefined;
         const { currentEditor } = this.editorManager;
-                if (
-                    currentEditor &&
-                    currentEditor.editor instanceof MonacoEditor
-                ) {
+        if (currentEditor && currentEditor.editor instanceof MonacoEditor) {
           const codeEditor = currentEditor.editor.getControl();
           const selection = codeEditor.getSelection();
           const model = codeEditor.getModel();
-                    if (
-                        model &&
-                        selection &&
-                        !monaco.Range.isEmpty(selection)
-                    ) {
+          if (model && selection && !monaco.Range.isEmpty(selection)) {
             searchFor = model.getValueInRange(selection);
           }
         }
         if (!searchFor) {
-                    searchFor = await this.quickInputService.open({
-                        prompt: 'Search on Arduino.cc',
-                        placeHolder: 'Type a keyword',
+          searchFor = await this.quickInputService.input({
+            prompt: nls.localize('arduino/help/search', 'Search on Arduino.cc'),
+            placeHolder: nls.localize('arduino/help/keyword', 'Type a keyword'),
           });
         }
         if (searchFor) {
@@ -135,37 +129,37 @@ 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',
     };
   }

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 {
@@ -47,9 +48,7 @@ export class IncludeLibrary extends SketchContribution {
     this.boardsServiceClient.onBoardsConfigChanged(() =>
       this.updateMenuActions()
     );
-        this.notificationCenter.onLibraryInstalled(() =>
-            this.updateMenuActions()
-        );
+    this.notificationCenter.onLibraryInstalled(() => this.updateMenuActions());
     this.notificationCenter.onLibraryUninstalled(() =>
       this.updateMenuActions()
     );
@@ -61,13 +60,20 @@ export class IncludeLibrary extends SketchContribution {
       ...ArduinoMenus.SKETCH__UTILS_GROUP,
       '0_include',
     ];
-        registry.registerSubmenu(includeLibMenuPath, 'Include Library', {
+    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...'
+      ),
     });
   }
 
@@ -86,8 +92,7 @@ export class IncludeLibrary extends SketchContribution {
       this.toDispose.dispose();
       this.mainMenuManager.update();
       const libraries: LibraryPackage[] = [];
-            const fqbn =
-                this.boardsServiceClient.boardsConfig.selectedBoard?.fqbn;
+      const fqbn = this.boardsServiceClient.boardsConfig.selectedBoard?.fqbn;
       // Show all libraries, when no board is selected.
       // Otherwise, show libraries only for the selected board.
       libraries.push(...(await this.libraryService.list({ fqbn })));
@@ -104,21 +109,24 @@ 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) {
-                this.toDispose.push(
-                    this.registerLibrary(library, userMenuPath)
-                );
+        this.toDispose.push(this.registerLibrary(library, userMenuPath));
       }
       for (const library of rest) {
-                this.toDispose.push(
-                    this.registerLibrary(library, packageMenuPath)
-                );
+        this.toDispose.push(this.registerLibrary(library, packageMenuPath));
       }
 
       this.mainMenuManager.update();
@@ -169,18 +177,14 @@ export class IncludeLibrary extends SketchContribution {
     const editor = this.editorManager.currentEditor?.editor;
     if (editor instanceof MonacoEditor) {
       if (
-                sketch.additionalFileUris.some(
-                    (uri) => uri === editor.uri.toString()
-                )
+        sketch.additionalFileUris.some((uri) => uri === editor.uri.toString())
       ) {
         codeEditor = editor.getControl();
       }
     }
 
     if (!codeEditor) {
-            const widget = await this.editorManager.open(
-                new URI(sketch.mainFileUri)
-            );
+      const widget = await this.editorManager.open(new URI(sketch.mainFileUri));
       if (widget.editor instanceof MonacoEditor) {
         codeEditor = widget.editor.getControl();
       }

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';
@@ -20,15 +21,14 @@ export class NewSketch extends SketchContribution {
     registry.registerCommand(NewSketch.Commands.NEW_SKETCH__TOOLBAR, {
       isVisible: (widget) =>
         ArduinoToolbar.is(widget) && widget.side === 'left',
-            execute: () =>
-                registry.executeCommand(NewSketch.Commands.NEW_SKETCH.id),
+      execute: () => registry.executeCommand(NewSketch.Commands.NEW_SKETCH.id),
     });
   }
 
   registerMenus(registry: MenuModelRegistry): void {
     registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
       commandId: NewSketch.Commands.NEW_SKETCH.id,
-            label: 'New',
+      label: nls.localize('arduino/sketch/new', 'New'),
       order: '0',
     });
   }
@@ -44,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

@@ -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

@@ -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(
@@ -86,8 +90,7 @@ export class OpenSketch extends SketchContribution {
             this.toDispose
           );
           try {
-                        const containers =
-                            await this.examplesService.builtIns();
+            const containers = await this.examplesService.builtIns();
             for (const container of containers) {
               this.builtInExamples.registerRecursively(
                 container,
@@ -96,10 +99,7 @@ export class OpenSketch extends SketchContribution {
               );
             }
           } catch (e) {
-                        console.error(
-                            'Error when collecting built-in examples.',
-                            e
-                        );
+            console.error('Error when collecting built-in examples.', e);
           }
           const options = {
             menuPath: ArduinoMenus.OPEN_SKETCH__CONTEXT,
@@ -119,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',
     });
   }
@@ -135,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,
     });
   }
@@ -159,7 +159,7 @@ export class OpenSketch extends SketchContribution {
       properties: ['createDirectory', 'openFile'],
       filters: [
         {
-                    name: 'Sketch',
+          name: nls.localize('arduino/sketch/sketch', 'Sketch'),
           extensions: ['ino', 'pde'],
         },
       ],
@@ -180,26 +180,34 @@ export class OpenSketch extends SketchContribution {
     }
     if (Sketch.isSketchFile(sketchFileUri)) {
       const name = new URI(sketchFileUri).path.name;
-            const nameWithExt = this.labelProvider.getName(
-                new URI(sketchFileUri)
-            );
+      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 as "{1}".\nCreate this folder, move the file, and continue?',
+          nameWithExt,
+          name
+        ),
       });
       if (response === 1) {
         // OK
-                const newSketchUri = new URI(sketchFileUri).parent.resolve(
-                    name
-                );
+        const newSketchUri = new URI(sketchFileUri).parent.resolve(name);
         const exists = await this.fileService.exists(newSketchUri);
         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;
         }
@@ -208,9 +216,7 @@ export class OpenSketch extends SketchContribution {
           new URI(sketchFileUri),
           new URI(newSketchUri.resolve(nameWithExt).toString())
         );
-                return this.sketchService.getSketchFolder(
-                    newSketchUri.toString()
-                );
+        return this.sketchService.getSketchFolder(newSketchUri.toString());
       }
     }
   }

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

@@ -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

@@ -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',
     });
   }
@@ -66,17 +67,17 @@ export class SaveAsSketch extends SketchContribution {
       ? sketchDirUri.resolve(
           sketchDirUri
             .resolve(
-                          `${sketch.name}_copy_${dateFormat(
-                              new Date(),
-                              'yyyymmddHHMMss'
-                          )}`
+              `${sketch.name}_copy_${dateFormat(new Date(), 'yyyymmddHHMMss')}`
             )
             .toString()
         )
       : 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,13 +42,14 @@ 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'
-        );
+    registry.registerSubmenu(ArduinoMenus.FILE__ADVANCED_SUBMENU, 'Advanced');
   }
 
   registerKeybindings(registry: KeybindingRegistry): void {
@@ -61,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 {
@@ -53,8 +54,7 @@ export class SketchControl extends SketchContribution {
           this.shell.getWidgets('main').indexOf(widget) !== -1,
         execute: async () => {
           this.toDisposeBeforeCreateNewContextMenu.dispose();
-                    const sketch =
-                        await this.sketchServiceClient.currentSketch();
+          const sketch = await this.sketchServiceClient.currentSketch();
           if (!sketch) {
             return;
           }
@@ -79,8 +79,7 @@ export class SketchControl extends SketchContribution {
           const parentsketchUri = this.editorManager.currentEditor
             ?.getResourceUri()
             ?.toString();
-                    const parentsketch =
-                        await this.sketchService.getSketchFolder(
+          const parentsketch = await this.sketchService.getSketchFolder(
             parentsketchUri || ''
           );
 
@@ -89,13 +88,13 @@ export class SketchControl extends SketchContribution {
             currentSketch &&
             parentsketch &&
             parentsketch.uri === currentSketch.uri &&
-                        (await this.allowRename(parentsketch.uri))
+            this.allowRename(parentsketch.uri)
           ) {
             this.menuRegistry.registerMenuAction(
               ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
               {
                 commandId: WorkspaceCommands.FILE_RENAME.id,
-                                label: 'Rename',
+                label: nls.localize('vscode/fileActions/rename', 'Rename'),
                 order: '1',
               }
             );
@@ -109,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,
@@ -117,9 +116,7 @@ export class SketchControl extends SketchContribution {
             );
             this.toDisposeBeforeCreateNewContextMenu.push(
               Disposable.create(() =>
-                                this.menuRegistry.unregisterMenuNode(
-                                    renamePlaceholder.id
-                                )
+                this.menuRegistry.unregisterMenuNode(renamePlaceholder.id)
               )
             );
           }
@@ -128,13 +125,13 @@ export class SketchControl extends SketchContribution {
             currentSketch &&
             parentsketch &&
             parentsketch.uri === currentSketch.uri &&
-                        (await this.allowDelete(parentsketch.uri))
+            this.allowDelete(parentsketch.uri)
           ) {
             this.menuRegistry.registerMenuAction(
               ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
               {
                 commandId: WorkspaceCommands.FILE_DELETE.id, // TODO: customize delete. Wipe sketch if deleting main file. Close window.
-                                label: 'Delete',
+                label: nls.localize('vscode/fileActions/delete', 'Delete'),
                 order: '2',
               }
             );
@@ -148,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,
@@ -156,9 +153,7 @@ export class SketchControl extends SketchContribution {
             );
             this.toDisposeBeforeCreateNewContextMenu.push(
               Disposable.create(() =>
-                                this.menuRegistry.unregisterMenuNode(
-                                    deletePlaceholder.id
-                                )
+                this.menuRegistry.unregisterMenuNode(deletePlaceholder.id)
               )
             );
           }
@@ -210,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',
       }
     );
@@ -219,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',
       }
     );
@@ -227,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',
       }
     );
@@ -255,20 +250,24 @@ export class SketchControl extends SketchContribution {
     });
   }
 
-    protected async isCloudSketch(uri: string) {
+  protected isCloudSketch(uri: string): boolean {
+    try {
       const cloudCacheLocation = this.localCacheFsProvider.from(new URI(uri));
 
       if (cloudCacheLocation) {
         return true;
       }
       return false;
+    } catch {
+      return false;
+    }
   }
 
-    protected async allowRename(uri: string) {
+  protected allowRename(uri: string): boolean {
     return !this.isCloudSketch(uri);
   }
 
-    protected async allowDelete(uri: string) {
+  protected allowDelete(uri: string): boolean {
     return !this.isCloudSketch(uri);
   }
 }

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

@@ -0,0 +1,140 @@
+import { inject, injectable } from 'inversify';
+import {
+  Command,
+  MenuModelRegistry,
+  CommandRegistry,
+  Contribution,
+} from './contribution';
+import { ArduinoMenus } from '../menu/arduino-menus';
+import { UploadCertificateDialog } from '../dialogs/certificate-uploader/certificate-uploader-dialog';
+import { ContextMenuRenderer } from '@theia/core/lib/browser/context-menu-renderer';
+import {
+  PreferenceScope,
+  PreferenceService,
+} from '@theia/core/lib/browser/preferences/preference-service';
+import { ArduinoPreferences } from '../arduino-preferences';
+import {
+  arduinoCert,
+  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 {
+  @inject(UploadCertificateDialog)
+  protected readonly dialog: UploadCertificateDialog;
+
+  @inject(ContextMenuRenderer)
+  protected readonly contextMenuRenderer: ContextMenuRenderer;
+
+  @inject(PreferenceService)
+  protected readonly preferenceService: PreferenceService;
+
+  @inject(ArduinoPreferences)
+  protected readonly arduinoPreferences: ArduinoPreferences;
+
+  @inject(ArduinoFirmwareUploader)
+  protected readonly arduinoFirmwareUploader: ArduinoFirmwareUploader;
+
+  protected dialogOpened = false;
+
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(UploadCertificate.Commands.OPEN, {
+      execute: async () => {
+        try {
+          this.dialogOpened = true;
+          await this.dialog.open();
+        } finally {
+          this.dialogOpened = false;
+        }
+      },
+      isEnabled: () => !this.dialogOpened,
+    });
+
+    registry.registerCommand(UploadCertificate.Commands.REMOVE_CERT, {
+      execute: async (certToRemove) => {
+        const certs = this.arduinoPreferences.get('arduino.board.certificates');
+
+        this.preferenceService.set(
+          'arduino.board.certificates',
+          certificateList(certs)
+            .filter((c) => c !== certToRemove)
+            .join(','),
+          PreferenceScope.User
+        );
+      },
+      isEnabled: (certToRemove) => certToRemove !== arduinoCert,
+    });
+
+    registry.registerCommand(UploadCertificate.Commands.UPLOAD_CERT, {
+      execute: async ({ fqbn, address, urls }) => {
+        return this.arduinoFirmwareUploader.uploadCertificates(
+          `-b ${fqbn} -a ${address} ${urls
+            .map((url: string) => `-u ${url}`)
+            .join(' ')}`
+        );
+      },
+      isEnabled: () => true,
+    });
+
+    registry.registerCommand(UploadCertificate.Commands.OPEN_CERT_CONTEXT, {
+      execute: async (args: any) => {
+        this.contextMenuRenderer.render({
+          menuPath: ArduinoMenus.ROOT_CERTIFICATES__CONTEXT,
+          anchor: {
+            x: args.x,
+            y: args.y,
+          },
+          args: [args.cert],
+        });
+      },
+      isEnabled: () => true,
+    });
+  }
+
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.TOOLS__FIRMWARE_UPLOADER_GROUP, {
+      commandId: UploadCertificate.Commands.OPEN.id,
+      label: UploadCertificate.Commands.OPEN.label,
+      order: '1',
+    });
+
+    registry.registerMenuAction(ArduinoMenus.ROOT_CERTIFICATES__CONTEXT, {
+      commandId: UploadCertificate.Commands.REMOVE_CERT.id,
+      label: UploadCertificate.Commands.REMOVE_CERT.label,
+      order: '1',
+    });
+  }
+}
+
+export namespace UploadCertificate {
+  export namespace Commands {
+    export const OPEN: Command = {
+      id: 'arduino-upload-certificate-open',
+      label: nls.localize(
+        'arduino/certificate/uploadRootCertificates',
+        'Upload SSL Root Certificates'
+      ),
+      category: 'Arduino',
+    };
+
+    export const OPEN_CERT_CONTEXT: Command = {
+      id: 'arduino-certificate-open-context',
+      label: nls.localize('arduino/certificate/openContext', 'Open context'),
+      category: 'Arduino',
+    };
+
+    export const REMOVE_CERT: Command = {
+      id: 'arduino-certificate-remove',
+      label: nls.localize('arduino/certificate/remove', 'Remove'),
+      category: 'Arduino',
+    };
+
+    export const UPLOAD_CERT: Command = {
+      id: 'arduino-certificate-upload',
+      label: nls.localize('arduino/certificate/upload', 'Upload'),
+      category: 'Arduino',
+    };
+  }
+}

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

@@ -0,0 +1,53 @@
+import { inject, injectable } from 'inversify';
+import {
+  Command,
+  MenuModelRegistry,
+  CommandRegistry,
+  Contribution,
+} 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 {
+  @inject(UploadFirmwareDialog)
+  protected readonly dialog: UploadFirmwareDialog;
+
+  protected dialogOpened = false;
+
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(UploadFirmware.Commands.OPEN, {
+      execute: async () => {
+        try {
+          this.dialogOpened = true;
+          await this.dialog.open();
+        } finally {
+          this.dialogOpened = false;
+        }
+      },
+      isEnabled: () => !this.dialogOpened,
+    });
+  }
+
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.TOOLS__FIRMWARE_UPLOADER_GROUP, {
+      commandId: UploadFirmware.Commands.OPEN.id,
+      label: UploadFirmware.Commands.OPEN.label,
+      order: '0',
+    });
+  }
+}
+
+export namespace UploadFirmware {
+  export namespace Commands {
+    export const OPEN: Command = {
+      id: 'arduino-upload-firmware-open',
+      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 {
+    this.menuActionsDisposables.dispose();
+
+    this.menuActionsDisposables.push(
       registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
         commandId: UploadSketch.Commands.UPLOAD_SKETCH.id,
-            label: 'Upload',
+        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: 'Upload Using Programmer',
-            order: '2',
-        });
+        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,24 +212,11 @@ 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,
-            ] = await Promise.all([
+      const [fqbn, { selectedProgrammer }, verify, verbose, sourceOverride] =
+        await Promise.all([
           this.boardsDataStore.appendConfigToFqbn(
             boardsConfig.selectedBoard?.fqbn
           ),
@@ -135,7 +230,18 @@ export class UploadSketch extends SketchContribution {
       const sketchUri = sketch.uri;
       const optimizeForDebug = this.editorMode.compileForDebug;
       const { selectedPort } = boardsConfig;
-            const port = selectedPort?.address;
+      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;
@@ -148,6 +254,7 @@ export class UploadSketch extends SketchContribution {
           verbose,
           verify,
           sourceOverride,
+          userFields,
         };
       } else {
         options = {
@@ -158,6 +265,7 @@ export class UploadSketch extends SketchContribution {
           verbose,
           verify,
           sourceOverride,
+          userFields,
         };
       }
       this.outputChannelManager.getChannel('Arduino').clear();
@@ -166,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);
     }
   }
 }
@@ -201,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,
     });
@@ -107,9 +111,7 @@ export class VerifySketch extends SketchContribution {
         this.sourceOverride(),
       ]);
       const verbose = this.preferences.get('arduino.compile.verbose');
-            const compilerWarnings = this.preferences.get(
-                'arduino.compile.warnings'
-            );
+      const compilerWarnings = this.preferences.get('arduino.compile.warnings');
       this.outputChannelManager.getChannel('Arduino').clear();
       await this.coreService.compile({
         sketchUri: sketch.uri,
@@ -120,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

@@ -1,8 +1,10 @@
-import { injectable } from 'inversify';
+import { injectable, inject } from 'inversify';
 import * as createPaths from './create-paths';
-import { posix, splitSketchPath } from './create-paths';
+import { posix } from './create-paths';
 import { AuthenticationClientService } from '../auth/authentication-client-service';
 import { ArduinoPreferences } from '../arduino-preferences';
+import { SketchCache } from '../widgets/cloud-sketchbook/cloud-sketch-cache';
+import { Create, CreateError } from './typings';
 
 export interface ResponseResultProvider {
   (response: Response): Promise<any>;
@@ -15,10 +17,11 @@ export namespace ResponseResultProvider {
 
 type ResourceType = 'f' | 'd';
 
-export let sketchCache: Create.Sketch[] = [];
-
 @injectable()
 export class CreateApi {
+  @inject(SketchCache)
+  protected sketchCache: SketchCache;
+
   protected authenticationService: AuthenticationClientService;
   protected arduinoPreferences: ArduinoPreferences;
 
@@ -32,45 +35,20 @@ export class CreateApi {
     return this;
   }
 
-    async findSketchByPath(
-        path: string,
-        trustCache = true
-    ): Promise<Create.Sketch | undefined> {
-        const skatches = sketchCache;
-        const sketch = skatches.find((sketch) => {
-            const [, spath] = splitSketchPath(sketch.path);
-            return path === spath;
-        });
-        if (trustCache) {
-            return Promise.resolve(sketch);
-        }
-        return await this.sketch({ id: sketch?.id });
-    }
-
   getSketchSecretStat(sketch: Create.Sketch): Create.Resource {
     return {
       href: `${sketch.href}${posix.sep}${Create.arduino_secrets_file}`,
       modified_at: sketch.modified_at,
+      created_at: sketch.created_at,
       name: `${Create.arduino_secrets_file}`,
       path: `${sketch.path}${posix.sep}${Create.arduino_secrets_file}`,
       mimetype: 'text/x-c++src; charset=utf-8',
       type: 'file',
-            sketchId: sketch.id,
     };
   }
 
-    async sketch(opt: {
-        id?: string;
-        path?: string;
-    }): Promise<Create.Sketch | undefined> {
-        let url;
-        if (opt.id) {
-            url = new URL(`${this.domain()}/sketches/byID/${opt.id}`);
-        } else if (opt.path) {
-            url = new URL(`${this.domain()}/sketches/byPath${opt.path}`);
-        } else {
-            return;
-        }
+  async sketch(id: string): Promise<Create.Sketch> {
+    const url = new URL(`${this.domain()}/sketches/byID/${id}`);
 
     url.searchParams.set('user_id', 'me');
     const headers = await this.headers();
@@ -89,7 +67,7 @@ export class CreateApi {
       method: 'GET',
       headers,
     });
-        sketchCache = result.sketches;
+    result.sketches.forEach((sketch) => this.sketchCache.addSketch(sketch));
     return result.sketches;
   }
 
@@ -115,7 +93,11 @@ export class CreateApi {
 
   async readDirectory(
     posixPath: string,
-        options: { recursive?: boolean; match?: string; secrets?: boolean } = {}
+    options: {
+      recursive?: boolean;
+      match?: string;
+      skipSketchCache?: boolean;
+    } = {}
   ): Promise<Create.Resource[]> {
     const url = new URL(
       `${this.domain()}/files/d/$HOME/sketches_v2${posixPath}`
@@ -128,61 +110,29 @@ export class CreateApi {
     }
     const headers = await this.headers();
 
-        const sketchProm = options.secrets
-            ? this.sketches()
-            : Promise.resolve(sketchCache);
+    const cachedSketch = this.sketchCache.getSketch(posixPath);
+
+    const sketchPromise = options.skipSketchCache
+      ? (cachedSketch && this.sketch(cachedSketch.id)) || Promise.resolve(null)
+      : Promise.resolve(this.sketchCache.getSketch(posixPath));
 
     return Promise.all([
+      sketchPromise,
       this.run<Create.RawResource[]>(url, {
         method: 'GET',
         headers,
       }),
-            sketchProm,
     ])
-            .then(async ([result, sketches]) => {
-                if (options.secrets) {
-                    // for every sketch with secrets, create a fake arduino_secrets.h
-                    result.forEach(async (res) => {
-                        if (res.type !== 'sketch') {
-                            return;
-                        }
-
-                        const [, spath] = createPaths.splitSketchPath(res.path);
-                        const sketch = await this.findSketchByPath(spath);
-                        if (
-                            sketch &&
-                            sketch.secrets &&
-                            sketch.secrets.length > 0
-                        ) {
-                            result.push(this.getSketchSecretStat(sketch));
-                        }
-                    });
-
-                    if (posixPath !== posix.sep) {
-                        const sketch = await this.findSketchByPath(posixPath);
-                        if (
-                            sketch &&
-                            sketch.secrets &&
-                            sketch.secrets.length > 0
-                        ) {
+      .then(async ([sketch, result]) => {
+        if (posixPath.length && posixPath !== posix.sep) {
+          if (sketch && sketch.secrets && sketch.secrets.length > 0) {
             result.push(this.getSketchSecretStat(sketch));
           }
         }
-                }
-                const sketchesMap: Record<string, Create.Sketch> =
-                    sketches.reduce((prev, curr) => {
-                        return { ...prev, [curr.path]: curr };
-                    }, {});
 
-                // add the sketch id and isPublic to the resource
-                return result.map((resource) => {
-                    return {
-                        ...resource,
-                        sketchId: sketchesMap[resource.path]?.id || '',
-                        isPublic:
-                            sketchesMap[resource.path]?.is_public || false,
-                    };
-                });
+        return result.filter(
+          (res) => !Create.do_not_sync_files.includes(res.name)
+        );
       })
       .catch((reason) => {
         if (reason?.status === 404) return [] as Create.Resource[];
@@ -214,32 +164,79 @@ export class CreateApi {
 
     let resources;
     if (basename === Create.arduino_secrets_file) {
-            const sketch = await this.findSketchByPath(parentPosixPath);
+      const sketch = this.sketchCache.getSketch(parentPosixPath);
       resources = sketch ? [this.getSketchSecretStat(sketch)] : [];
     } else {
       resources = await this.readDirectory(parentPosixPath, {
         match: basename,
       });
     }
-
-        resources.sort((left, right) => left.path.length - right.path.length);
-        const resource = resources.find(({ name }) => name === basename);
+    const resource = resources.find(
+      ({ path }) => createPaths.splitSketchPath(path)[1] === posixPath
+    );
     if (!resource) {
       throw new CreateError(`Not found: ${posixPath}.`, 404);
     }
     return resource;
   }
 
+  private async toggleSecretsInclude(
+    path: string,
+    data: string,
+    mode: 'add' | 'remove'
+  ) {
+    const includeString = `#include "${Create.arduino_secrets_file}"`;
+    const includeRegexp = new RegExp(includeString + '\\s*', 'g');
+
+    const basename = createPaths.basename(path);
+    if (mode === 'add') {
+      const doesIncludeSecrets = includeRegexp.test(data);
+
+      if (doesIncludeSecrets) {
+        return data;
+      }
+
+      const sketch = this.sketchCache.getSketch(createPaths.parentPosix(path));
+
+      if (
+        sketch &&
+        (sketch.name + '.ino' === basename ||
+          sketch.name + '.pde' === basename) &&
+        sketch.secrets &&
+        sketch.secrets.length > 0
+      ) {
+        return includeString + '\n' + data;
+      }
+    } else if (mode === 'remove') {
+      return data.replace(includeRegexp, '');
+    }
+    return data;
+  }
+
   async readFile(posixPath: string): Promise<string> {
     const basename = createPaths.basename(posixPath);
 
     if (basename === Create.arduino_secrets_file) {
       const parentPosixPath = createPaths.parentPosix(posixPath);
-            const sketch = await this.findSketchByPath(parentPosixPath, false);
+
+      //retrieve the sketch id from the cache
+      const cacheSketch = this.sketchCache.getSketch(parentPosixPath);
+      if (!cacheSketch) {
+        throw new Error(`Unable to find sketch ${parentPosixPath} in cache`);
+      }
+
+      // get a fresh copy of the sketch in order to guarantee fresh secrets
+      const sketch = await this.sketch(cacheSketch.id);
+      if (!sketch) {
+        throw new Error(
+          `Unable to get a fresh copy of the sketch ${cacheSketch.id}`
+        );
+      }
+      this.sketchCache.addSketch(sketch);
 
       let file = '';
       if (sketch && sketch.secrets) {
-                for (const item of sketch?.secrets) {
+        for (const item of sketch.secrets) {
           file += `#define ${item.name} "${item.value}"\r\n`;
         }
       }
@@ -250,12 +247,15 @@ export class CreateApi {
       `${this.domain()}/files/f/$HOME/sketches_v2${posixPath}`
     );
     const headers = await this.headers();
-        const result = await this.run<{ data: string }>(url, {
+    const result = await this.run<{ data: string; path: string }>(url, {
       method: 'GET',
       headers,
     });
-        const { data } = result;
-        return atob(data);
+    let { data } = result;
+
+    // add includes to main arduino file
+    data = await this.toggleSecretsInclude(posixPath, atob(data), 'add');
+    return data;
   }
 
   async writeFile(
@@ -266,7 +266,9 @@ export class CreateApi {
 
     if (basename === Create.arduino_secrets_file) {
       const parentPosixPath = createPaths.parentPosix(posixPath);
-            const sketch = await this.findSketchByPath(parentPosixPath);
+
+      const sketch = this.sketchCache.getSketch(parentPosixPath);
+
       if (sketch) {
         const url = new URL(`${this.domain()}/sketches/${sketch.id}`);
         const headers = await this.headers();
@@ -286,21 +288,18 @@ export class CreateApi {
             }
             const regexp = /(\S*)\s+([\S\s]*)/g;
             const tokens = regexp.exec(secret) || [];
-                        const name =
-                            tokens[1].length > 0 ? `SECRET_${tokens[1]}` : '';
+            const name = tokens[1].length > 0 ? `SECRET_${tokens[1]}` : '';
 
             let value = '';
             if (tokens[2].length > 0) {
               value = JSON.parse(
                 JSON.stringify(
-                                    tokens[2]
-                                        .replace(/^['"]?/g, '')
-                                        .replace(/['"]?$/g, '')
+                  tokens[2].replace(/^['"]?/g, '').replace(/['"]?$/g, '')
                 )
               );
             }
 
-                        if (name.length === 0 || value.length === 0) {
+            if (name.length === 0) {
               return prev;
             }
 
@@ -313,9 +312,10 @@ export class CreateApi {
           secrets: { data: secrets },
         };
 
-                // replace the sketch in the cache, so other calls will not overwrite each other
-                sketchCache = sketchCache.filter((skt) => skt.id !== sketch.id);
-                sketchCache.push({ ...sketch, secrets });
+        // replace the sketch in the cache with the one we are pushing
+        // TODO: we should do a get after the POST, in order to be sure the cache
+        // is updated the most recent metadata
+        this.sketchCache.addSketch(sketch);
 
         const init = {
           method: 'POST',
@@ -327,16 +327,24 @@ export class CreateApi {
       return;
     }
 
+    // do not upload "do_not_sync" files/directoris and their descendants
+    const segments = posixPath.split(posix.sep) || [];
+    if (
+      segments.some((segment) => Create.do_not_sync_files.includes(segment))
+    ) {
+      return;
+    }
+
     const url = new URL(
       `${this.domain()}/files/f/$HOME/sketches_v2${posixPath}`
     );
     const headers = await this.headers();
-        const data = btoa(
-            typeof content === 'string'
-                ? content
-                : new TextDecoder().decode(content)
-        );
-        const payload = { data };
+
+    let data: string =
+      typeof content === 'string' ? content : new TextDecoder().decode(content);
+    data = await this.toggleSecretsInclude(posixPath, data, 'remove');
+
+    const payload = { data: btoa(data) };
     const init = {
       method: 'POST',
       body: JSON.stringify(payload),
@@ -445,8 +453,7 @@ export class CreateApi {
   }
 
   private domain(apiVersion = 'v2'): string {
-        const endpoint =
-            this.arduinoPreferences['arduino.cloud.sketchSyncEnpoint'];
+    const endpoint = this.arduinoPreferences['arduino.cloud.sketchSyncEnpoint'];
     return `${endpoint}/${apiVersion}`;
   }
 
@@ -470,75 +477,3 @@ void loop() {
 
 `;
 }
-
-export namespace Create {
-    export interface Sketch {
-        readonly name: string;
-        readonly path: string;
-        readonly modified_at: string;
-        readonly created_at: string;
-
-        readonly secrets?: { name: string; value: string }[];
-
-        readonly id: string;
-        readonly is_public: boolean;
-        // readonly board_fqbn: '',
-        // readonly board_name: '',
-        // readonly board_type: 'serial' | 'network' | 'cloud' | '',
-        readonly href?: string;
-        readonly libraries: string[];
-        // readonly tutorials: string[] | null;
-        // readonly types: string[] | null;
-        // readonly user_id: string;
-    }
-
-    export type ResourceType = 'sketch' | 'folder' | 'file';
-    export const arduino_secrets_file = 'arduino_secrets.h';
-    export interface Resource {
-        readonly name: string;
-        /**
-         * Note: this path is **not** the POSIX path we use. It has the leading segments with the `user_id`.
-         */
-        readonly path: string;
-        readonly type: ResourceType;
-        readonly sketchId: string;
-        readonly modified_at: string; // As an ISO-8601 formatted string: `YYYY-MM-DDTHH:mm:ss.sssZ`
-        readonly children?: number; // For 'sketch' and 'folder' types.
-        readonly size?: number; // For 'sketch' type only.
-        readonly isPublic?: boolean; // For 'sketch' type only.
-
-        readonly mimetype?: string; // For 'file' type.
-        readonly href?: string;
-    }
-    export namespace Resource {
-        export function is(arg: any): arg is Resource {
-            return (
-                !!arg &&
-                'name' in arg &&
-                typeof arg['name'] === 'string' &&
-                'path' in arg &&
-                typeof arg['path'] === 'string' &&
-                'type' in arg &&
-                typeof arg['type'] === 'string' &&
-                'modified_at' in arg &&
-                typeof arg['modified_at'] === 'string' &&
-                (arg['type'] === 'sketch' ||
-                    arg['type'] === 'folder' ||
-                    arg['type'] === 'file')
-            );
-        }
-    }
-
-    export type RawResource = Omit<Resource, 'sketchId' | 'isPublic'>;
-}
-
-export class CreateError extends Error {
-    constructor(
-        message: string,
-        readonly status: number,
-        readonly details?: string
-    ) {
-        super(message);
-        Object.setPrototypeOf(this, CreateError.prototype);
-    }
-}

arduino-ide-extension/src/browser/create/create-fs-provider.ts

@@ -24,12 +24,11 @@ import {
   FileServiceContribution,
 } from '@theia/filesystem/lib/browser/file-service';
 import { AuthenticationClientService } from '../auth/authentication-client-service';
-import { Create, CreateApi } from './create-api';
+import { CreateApi } from './create-api';
 import { CreateUri } from './create-uri';
 import { SketchesService } from '../../common/protocol';
 import { ArduinoPreferences } from '../arduino-preferences';
-
-export const REMOTE_ONLY_FILES = ['sketch.json'];
+import { Create } from './typings';
 
 @injectable()
 export class CreateFsProvider
@@ -106,19 +105,12 @@ export class CreateFsProvider
 
   async readdir(uri: URI): Promise<[string, FileType][]> {
     const resources = await this.getCreateApi.readDirectory(
-            uri.path.toString(),
-            {
-                secrets: true,
-            }
+      uri.path.toString()
     );
-        return resources
-            .filter((res) => !REMOTE_ONLY_FILES.includes(res.name))
-            .map(({ name, type }) => [name, this.toFileType(type)]);
+    return resources.map(({ name, type }) => [name, this.toFileType(type)]);
   }
 
   async delete(uri: URI, opts: FileDeleteOptions): Promise<void> {
-        return;
-
     if (!opts.recursive) {
       throw new Error(
         'Arduino Create file-system provider does not support non-recursive deletion.'
@@ -142,9 +134,7 @@ export class CreateFsProvider
       }
       default: {
         throw new FileSystemProviderError(
-                    `Unexpected file type '${
-                        stat.type
-                    }' for resource: ${uri.toString()}`,
+          `Unexpected file type '${stat.type}' for resource: ${uri.toString()}`,
           FileSystemProviderErrorCode.Unknown
         );
       }

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

@@ -1,7 +1,7 @@
 import { URI as Uri } from 'vscode-uri';
 import URI from '@theia/core/lib/common/uri';
-import { Create } from './create-api';
 import { toPosixPath, parentPosix, posix } from './create-paths';
+import { Create } from './typings';
 
 export namespace CreateUri {
   export const scheme = 'arduino-create';
@@ -12,9 +12,7 @@ export namespace CreateUri {
       typeof posixPathOrResource === 'string'
         ? posixPathOrResource
         : toPosixPath(posixPathOrResource.path);
-        return new URI(
-            Uri.parse(posixPath).with({ scheme, authority: 'create' })
-        );
+    return new URI(Uri.parse(posixPath).with({ scheme, authority: 'create' }));
   }
 
   export function is(uri: URI): boolean {

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

@@ -0,0 +1,73 @@
+export namespace Create {
+  export interface Sketch {
+    readonly name: string;
+    readonly path: string;
+    readonly modified_at: string;
+    readonly created_at: string;
+
+    readonly secrets?: { name: string; value: string }[];
+
+    readonly id: string;
+    readonly is_public: boolean;
+    readonly board_fqbn: '';
+    readonly board_name: '';
+    readonly board_type: 'serial' | 'network' | 'cloud' | '';
+    readonly href?: string;
+    readonly libraries: string[];
+    readonly tutorials: string[] | null;
+    readonly types: string[] | null;
+    readonly user_id: string;
+  }
+
+  export type ResourceType = 'sketch' | 'folder' | 'file';
+  export const arduino_secrets_file = 'arduino_secrets.h';
+  export const do_not_sync_files = ['.theia', 'sketch.json'];
+  export interface Resource {
+    readonly name: string;
+    /**
+     * Note: this path is **not** the POSIX path we use. It has the leading segments with the `user_id`.
+     */
+    readonly path: string;
+    readonly type: ResourceType;
+    readonly sketchId?: string;
+    readonly modified_at: string; // As an ISO-8601 formatted string: `YYYY-MM-DDTHH:mm:ss.sssZ`
+    readonly created_at: string; // As an ISO-8601 formatted string: `YYYY-MM-DDTHH:mm:ss.sssZ`
+    readonly children?: number; // For 'sketch' and 'folder' types.
+    readonly size?: number; // For 'sketch' type only.
+    readonly isPublic?: boolean; // For 'sketch' type only.
+
+    readonly mimetype?: string; // For 'file' type.
+    readonly href?: string;
+  }
+  export namespace Resource {
+    export function is(arg: any): arg is Resource {
+      return (
+        !!arg &&
+        'name' in arg &&
+        typeof arg['name'] === 'string' &&
+        'path' in arg &&
+        typeof arg['path'] === 'string' &&
+        'type' in arg &&
+        typeof arg['type'] === 'string' &&
+        'modified_at' in arg &&
+        typeof arg['modified_at'] === 'string' &&
+        (arg['type'] === 'sketch' ||
+          arg['type'] === 'folder' ||
+          arg['type'] === 'file')
+      );
+    }
+  }
+
+  export type RawResource = Omit<Resource, 'sketchId' | 'isPublic'>;
+}
+
+export class CreateError extends Error {
+  constructor(
+    message: string,
+    readonly status: number,
+    readonly details?: string
+  ) {
+    super(message);
+    Object.setPrototypeOf(this, CreateError.prototype);
+  }
+}

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

@@ -97,6 +97,7 @@
     "editorWhitespace.foreground": "#bfbfbf",
     "editor.lineHighlightBackground": "#434f5410",
     "editor.selectionBackground": "#ffcb00",
+    "editorWidget.background": "#F7F9F9",
     "focusBorder": "#7fcbcd99",
     "menubar.selectionBackground": "#ffffff",
     "menubar.selectionForeground": "#212121",

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

@@ -1,175 +0,0 @@
-import * as React from 'react';
-import { inject, injectable } from 'inversify';
-import { Widget } from '@phosphor/widgets';
-import { Message } from '@phosphor/messaging';
-import { clipboard } from 'electron';
-import {
-    AbstractDialog,
-    ReactWidget,
-    DialogProps,
-} from '@theia/core/lib/browser';
-import { CreateApi } from '../create/create-api';
-
-const RadioButton = (props: {
-    id: string;
-    changed: (evt: React.BaseSyntheticEvent) => void;
-    value: string;
-    isSelected: boolean;
-    isDisabled: boolean;
-    label: string;
-}) => {
-    return (
-        <p className="RadioButton">
-            <input
-                id={props.id}
-                onChange={props.changed}
-                value={props.value}
-                type="radio"
-                checked={props.isSelected}
-                disabled={props.isDisabled}
-            />
-            <label htmlFor={props.id}>{props.label}</label>
-        </p>
-    );
-};
-
-export const ShareSketchComponent = ({
-    treeNode,
-    createApi,
-    domain = 'https://create.arduino.cc',
-}: {
-    treeNode: any;
-    createApi: CreateApi;
-    domain?: string;
-}): React.ReactElement => {
-    // const [publicVisibility, setPublicVisibility] = React.useState<boolean>(
-    //     treeNode.isPublic
-    // );
-
-    const [loading, setloading] = React.useState<boolean>(false);
-
-    const radioChangeHandler = async (event: React.BaseSyntheticEvent) => {
-        setloading(true);
-        const sketch = await createApi.editSketch({
-            id: treeNode.sketchId,
-            params: {
-                is_public: event.target.value === 'private' ? false : true,
-            },
-        });
-        // setPublicVisibility(sketch.is_public);
-        treeNode.isPublic = sketch.is_public;
-        setloading(false);
-    };
-
-    const sketchLink = `${domain}/editor/_/${treeNode.sketchId}/preview`;
-    const embedLink = `<iframe src="${sketchLink}?embed" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>`;
-
-    return (
-        <div id="widget-container arduino-sharesketch-dialog">
-            <p>Choose visibility of your Sketch:</p>
-            <RadioButton
-                changed={radioChangeHandler}
-                id="1"
-                isSelected={treeNode.isPublic === false}
-                label="Private. Only you can view the Sketch."
-                value="private"
-                isDisabled={loading}
-            />
-            <RadioButton
-                changed={radioChangeHandler}
-                id="2"
-                isSelected={treeNode.isPublic === true}
-                label="Public. Anyone with the link can view the Sketch."
-                value="public"
-                isDisabled={loading}
-            />
-
-            {treeNode.isPublic && (
-                <div>
-                    <p>Link:</p>
-                    <div className="sketch-link">
-                        <input
-                            type="text"
-                            readOnly
-                            value={sketchLink}
-                            className="theia-input"
-                        />
-                        <button
-                            onClick={() => clipboard.writeText(sketchLink)}
-                            value="copy"
-                            className="theia-button secondary"
-                        >
-                            Copy
-                        </button>
-                    </div>
-                    <p>Embed:</p>
-                    <div className="sketch-link-embed">
-                        <textarea
-                            readOnly
-                            value={embedLink}
-                            className="theia-input stretch"
-                        />
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
-
-@injectable()
-export class ShareSketchWidget extends ReactWidget {
-    constructor(private treeNode: any, private createApi: CreateApi) {
-        super();
-    }
-
-    protected render(): React.ReactNode {
-        return (
-            <ShareSketchComponent
-                treeNode={this.treeNode}
-                createApi={this.createApi}
-            />
-        );
-    }
-}
-
-@injectable()
-export class ShareSketchDialogProps extends DialogProps {
-    readonly node: any;
-    readonly createApi: CreateApi;
-}
-
-@injectable()
-export class ShareSketchDialog extends AbstractDialog<void> {
-    protected widget: ShareSketchWidget;
-
-    constructor(
-        @inject(ShareSketchDialogProps)
-        protected readonly props: ShareSketchDialogProps
-    ) {
-        super({ title: props.title });
-        this.contentNode.classList.add('arduino-share-sketch-dialog');
-        this.widget = new ShareSketchWidget(props.node, props.createApi);
-    }
-
-    get value(): void {
-        return;
-    }
-    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();
-    }
-}

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

@@ -1,69 +0,0 @@
-import { inject, injectable } from 'inversify';
-import { Widget } from '@phosphor/widgets';
-import { CancellationTokenSource } from '@theia/core/lib/common/cancellation';
-import {
-    ConfirmDialog,
-    ConfirmDialogProps,
-    DialogError,
-} from '@theia/core/lib/browser/dialogs';
-
-@injectable()
-export class DoNotAskAgainConfirmDialogProps extends ConfirmDialogProps {
-    readonly onAccept: () => Promise<void>;
-}
-
-@injectable()
-export class DoNotAskAgainConfirmDialog extends ConfirmDialog {
-    protected readonly doNotAskAgainCheckbox: HTMLInputElement;
-
-    constructor(
-        @inject(DoNotAskAgainConfirmDialogProps)
-        protected readonly props: DoNotAskAgainConfirmDialogProps
-    ) {
-        super(props);
-        this.controlPanel.removeChild(this.errorMessageNode);
-        const doNotAskAgainNode = document.createElement('div');
-        doNotAskAgainNode.setAttribute('style', 'flex: 2');
-        this.controlPanel.insertBefore(
-            doNotAskAgainNode,
-            this.controlPanel.firstChild
-        );
-        const doNotAskAgainLabel = document.createElement('label');
-        doNotAskAgainLabel.classList.add('flex-line');
-        doNotAskAgainNode.appendChild(doNotAskAgainLabel);
-        doNotAskAgainLabel.textContent = "Don't ask again";
-        this.doNotAskAgainCheckbox = document.createElement('input');
-        this.doNotAskAgainCheckbox.setAttribute('align-self', 'center');
-        doNotAskAgainLabel.appendChild(this.doNotAskAgainCheckbox);
-        this.doNotAskAgainCheckbox.type = 'checkbox';
-    }
-
-    protected async accept(): Promise<void> {
-        if (!this.resolve) {
-            return;
-        }
-        this.acceptCancellationSource.cancel();
-        this.acceptCancellationSource = new CancellationTokenSource();
-        const token = this.acceptCancellationSource.token;
-        const value = this.value;
-        const error = await this.isValid(value, 'open');
-        if (token.isCancellationRequested) {
-            return;
-        }
-        if (!DialogError.getResult(error)) {
-            this.setErrorMessage(error);
-        } else {
-            if (this.doNotAskAgainCheckbox.checked) {
-                await this.props.onAccept();
-            }
-            this.resolve(value);
-            Widget.detach(this);
-        }
-    }
-
-    protected setErrorMessage(error: DialogError): void {
-        if (this.acceptButton) {
-            this.acceptButton.disabled = !DialogError.getResult(error);
-        }
-    }
-}

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

@@ -0,0 +1,46 @@
+import { nls } from '@theia/core/lib/common';
+import * as React from 'react';
+
+export const CertificateAddComponent = ({
+  addCertificate,
+}: {
+  addCertificate: (cert: string) => void;
+}): React.ReactElement => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = React.useCallback((event) => {
+    setValue(event.target.value);
+  }, []);
+
+  return (
+    <form
+      className="certificate-add"
+      onSubmit={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        addCertificate(value);
+        setValue('');
+      }}
+    >
+      <label>
+        <div>
+          {nls.localize(
+            'arduino/certificate/addURL',
+            'Add URL to fetch SSL certificate'
+          )}
+        </div>
+        <input
+          className="theia-input"
+          placeholder={nls.localize(
+            'arduino/certificate/enterURL',
+            'Enter URL'
+          )}
+          type="text"
+          name="add"
+          onChange={handleChange}
+          value={value}
+        />
+      </label>
+    </form>
+  );
+};

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+export const CertificateListComponent = ({
+  certificates,
+  selectedCerts,
+  setSelectedCerts,
+  openContextMenu,
+}: {
+  certificates: string[];
+  selectedCerts: string[];
+  setSelectedCerts: React.Dispatch<React.SetStateAction<string[]>>;
+  openContextMenu: (x: number, y: number, cert: string) => void;
+}): React.ReactElement => {
+  const handleOnChange = (event: any) => {
+    const target = event.target;
+
+    const newSelectedCerts = selectedCerts.filter(
+      (cert) => cert !== target.name
+    );
+
+    if (target.checked) {
+      newSelectedCerts.push(target.name);
+    }
+
+    setSelectedCerts(newSelectedCerts);
+  };
+
+  const handleContextMenu = (event: React.MouseEvent, cert: string) => {
+    openContextMenu(event.clientX, event.clientY, cert);
+  };
+
+  return (
+    <div className="certificate-list">
+      {certificates.map((certificate, i) => (
+        <label
+          key={i}
+          className="certificate-row"
+          onContextMenu={(e) => handleContextMenu(e, certificate)}
+        >
+          <span className="fl1">{certificate}</span>
+          <input
+            type="checkbox"
+            name={certificate}
+            checked={selectedCerts.includes(certificate)}
+            onChange={handleOnChange}
+          />
+        </label>
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import Tippy from '@tippyjs/react';
+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,
+  certificates,
+  addCertificate,
+  updatableFqbns,
+  uploadCertificates,
+  openContextMenu,
+}: {
+  availableBoards: AvailableBoard[];
+  certificates: string[];
+  addCertificate: (cert: string) => void;
+  updatableFqbns: string[];
+  uploadCertificates: (
+    fqbn: string,
+    address: string,
+    urls: string[]
+  ) => Promise<any>;
+  openContextMenu: (x: number, y: number, cert: string) => void;
+}): React.ReactElement => {
+  const [installFeedback, setInstallFeedback] = React.useState<
+    'ok' | 'fail' | 'installing' | null
+  >(null);
+
+  const [showAdd, setShowAdd] = React.useState(false);
+
+  const [selectedCerts, setSelectedCerts] = React.useState<string[]>([]);
+
+  const [selectedBoard, setSelectedBoard] =
+    React.useState<AvailableBoard | null>(null);
+
+  const installCertificates = async () => {
+    if (!selectedBoard || !selectedBoard.fqbn || !selectedBoard.port) {
+      return;
+    }
+
+    setInstallFeedback('installing');
+
+    try {
+      await uploadCertificates(
+        selectedBoard.fqbn,
+        selectedBoard.port.address,
+        selectedCerts
+      );
+      setInstallFeedback('ok');
+    } catch {
+      setInstallFeedback('fail');
+    }
+  };
+
+  const onBoardSelect = React.useCallback(
+    (board: AvailableBoard) => {
+      const newFqbn = (board && board.fqbn) || null;
+      const prevFqbn = (selectedBoard && selectedBoard.fqbn) || null;
+
+      if (newFqbn !== prevFqbn) {
+        setInstallFeedback(null);
+        setSelectedBoard(board);
+      }
+    },
+    [selectedBoard]
+  );
+
+  return (
+    <>
+      <div className="dialogSection">
+        <div className="dialogRow">
+          <strong className="fl1">
+            {nls.localize(
+              'arduino/certificate/selectCertificateToUpload',
+              '1. Select certificate to upload'
+            )}
+          </strong>
+          <Tippy
+            content={
+              <CertificateAddComponent
+                addCertificate={(cert) => {
+                  addCertificate(cert);
+                  setShowAdd(false);
+                }}
+              />
+            }
+            placement="bottom-end"
+            onClickOutside={() => setShowAdd(false)}
+            visible={showAdd}
+            interactive={true}
+          >
+            <button
+              type="button"
+              className="theia-button primary add-cert-btn"
+              onClick={() => {
+                showAdd ? setShowAdd(false) : setShowAdd(true);
+              }}
+            >
+              {nls.localize('arduino/certificate/addNew', 'Add New')}{' '}
+              <span className="fa fa-caret-down caret"></span>
+            </button>
+          </Tippy>
+        </div>
+        <div className="dialogRow">
+          <CertificateListComponent
+            certificates={certificates}
+            selectedCerts={selectedCerts}
+            setSelectedCerts={setSelectedCerts}
+            openContextMenu={openContextMenu}
+          />
+        </div>
+      </div>
+      <div className="dialogSection">
+        <div className="dialogRow">
+          <strong>
+            {nls.localize(
+              'arduino/certificate/selectDestinationBoardToUpload',
+              '2. Select destination board and upload certificate'
+            )}
+          </strong>
+        </div>
+        <div className="dialogRow">
+          <div className="fl1">
+            <SelectBoardComponent
+              availableBoards={availableBoards}
+              updatableFqbns={updatableFqbns}
+              onBoardSelect={onBoardSelect}
+              selectedBoard={selectedBoard}
+              busy={installFeedback === 'installing'}
+            />
+          </div>
+        </div>
+        <div className="dialogRow">
+          <div className="upload-status">
+            {installFeedback === 'installing' && (
+              <div className="success">
+                <div className="spinner" />
+                {nls.localize(
+                  'arduino/certificate/uploadingCertificates',
+                  'Uploading certificates.'
+                )}
+              </div>
+            )}
+            {installFeedback === 'ok' && (
+              <div className="success">
+                <i className="fa fa-info status-icon" />
+                {nls.localize(
+                  'arduino/certificate/certificatesUploaded',
+                  'Certificates uploaded.'
+                )}
+              </div>
+            )}
+            {installFeedback === 'fail' && (
+              <div className="warn">
+                <i className="fa fa-exclamation status-icon" />
+                {nls.localize(
+                  'arduino/certificate/uploadFailed',
+                  'Upload failed. Please try again.'
+                )}
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            className="theia-button primary install-cert-btn"
+            onClick={installCertificates}
+            disabled={selectedCerts.length === 0 || !selectedBoard}
+          >
+            {nls.localize('arduino/certificate/upload', 'Upload')}
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { inject, injectable, postConstruct } 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 {
+  AvailableBoard,
+  BoardsServiceProvider,
+} from '../../boards/boards-service-provider';
+import { CertificateUploaderComponent } from './certificate-uploader-component';
+import { ArduinoPreferences } from '../../arduino-preferences';
+import {
+  PreferenceScope,
+  PreferenceService,
+} from '@theia/core/lib/browser/preferences/preference-service';
+import { CommandRegistry } from '@theia/core/lib/common/command';
+import { certificateList, sanifyCertString } from './utils';
+import { ArduinoFirmwareUploader } from '../../../common/protocol/arduino-firmware-uploader';
+import { nls } from '@theia/core/lib/common';
+
+@injectable()
+export class UploadCertificateDialogWidget extends ReactWidget {
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
+
+  @inject(ArduinoPreferences)
+  protected readonly arduinoPreferences: ArduinoPreferences;
+
+  @inject(PreferenceService)
+  protected readonly preferenceService: PreferenceService;
+
+  @inject(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
+
+  @inject(ArduinoFirmwareUploader)
+  protected readonly arduinoFirmwareUploader: ArduinoFirmwareUploader;
+
+  protected certificates: string[] = [];
+  protected updatableFqbns: string[] = [];
+  protected availableBoards: AvailableBoard[] = [];
+
+  public busyCallback = (busy: boolean) => {
+    return;
+  };
+
+  constructor() {
+    super();
+  }
+
+  @postConstruct()
+  protected init(): void {
+    this.arduinoPreferences.ready.then(() => {
+      this.certificates = certificateList(
+        this.arduinoPreferences.get('arduino.board.certificates')
+      );
+    });
+    this.arduinoPreferences.onPreferenceChanged((event) => {
+      if (
+        event.preferenceName === 'arduino.board.certificates' &&
+        event.newValue !== event.oldValue
+      ) {
+        this.certificates = certificateList(event.newValue);
+        this.update();
+      }
+    });
+
+    this.arduinoFirmwareUploader.updatableBoards().then((fqbns) => {
+      this.updatableFqbns = fqbns;
+      this.update();
+    });
+
+    this.boardsServiceClient.onAvailableBoardsChanged((availableBoards) => {
+      this.availableBoards = availableBoards;
+      this.update();
+    });
+  }
+
+  private addCertificate(certificate: string) {
+    const certString = sanifyCertString(certificate);
+
+    if (certString.length > 0) {
+      this.certificates.push(sanifyCertString(certificate));
+    }
+
+    this.preferenceService.set(
+      'arduino.board.certificates',
+      this.certificates.join(','),
+      PreferenceScope.User
+    );
+  }
+
+  protected openContextMenu(x: number, y: number, cert: string): void {
+    this.commandRegistry.executeCommand(
+      'arduino-certificate-open-context',
+      Object.assign({}, { x, y, cert })
+    );
+  }
+
+  protected uploadCertificates(
+    fqbn: string,
+    address: string,
+    urls: string[]
+  ): Promise<any> {
+    this.busyCallback(true);
+    return this.commandRegistry
+      .executeCommand('arduino-certificate-upload', {
+        fqbn,
+        address,
+        urls,
+      })
+      .finally(() => this.busyCallback(false));
+  }
+
+  protected render(): React.ReactNode {
+    return (
+      <CertificateUploaderComponent
+        availableBoards={this.availableBoards}
+        certificates={this.certificates}
+        updatableFqbns={this.updatableFqbns}
+        addCertificate={this.addCertificate.bind(this)}
+        uploadCertificates={this.uploadCertificates.bind(this)}
+        openContextMenu={this.openContextMenu.bind(this)}
+      />
+    );
+  }
+}
+
+@injectable()
+export class UploadCertificateDialogProps extends DialogProps {}
+
+@injectable()
+export class UploadCertificateDialog extends AbstractDialog<void> {
+  @inject(UploadCertificateDialogWidget)
+  protected readonly widget: UploadCertificateDialogWidget;
+
+  private busy = false;
+
+  constructor(
+    @inject(UploadCertificateDialogProps)
+    protected readonly props: UploadCertificateDialogProps
+  ) {
+    super({
+      title: nls.localize(
+        'arduino/certificate/uploadRootCertificates',
+        'Upload SSL Root Certificates'
+      ),
+    });
+    this.contentNode.classList.add('certificate-uploader-dialog');
+    this.acceptButton = undefined;
+  }
+
+  get value(): void {
+    return;
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    if (this.widget.isAttached) {
+      Widget.detach(this.widget);
+    }
+    Widget.attach(this.widget, this.contentNode);
+    this.widget.busyCallback = this.busyCallback.bind(this);
+    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 handleEnter(event: KeyboardEvent): boolean | void {
+    return false;
+  }
+
+  close(): void {
+    if (this.busy) {
+      return;
+    }
+    super.close();
+  }
+
+  busyCallback(busy: boolean): void {
+    this.busy = busy;
+    if (busy) {
+      this.closeCrossNode.classList.add('disabled');
+    } else {
+      this.closeCrossNode.classList.remove('disabled');
+    }
+  }
+}

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

@@ -0,0 +1,108 @@
+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';
+
+type BoardOption = { value: string; label: string };
+
+export const SelectBoardComponent = ({
+  availableBoards,
+  updatableFqbns,
+  onBoardSelect,
+  selectedBoard,
+  busy,
+}: {
+  availableBoards: AvailableBoard[];
+  updatableFqbns: string[];
+  onBoardSelect: (board: AvailableBoard | null) => void;
+  selectedBoard: AvailableBoard | null;
+  busy: boolean;
+}): React.ReactElement => {
+  const [selectOptions, setSelectOptions] = React.useState<BoardOption[]>([]);
+
+  const [selectBoardPlaceholder, setSelectBoardPlaceholder] =
+    React.useState('');
+
+  const selectOption = React.useCallback(
+    (boardOpt: BoardOption) => {
+      onBoardSelect(
+        (boardOpt &&
+          availableBoards.find((board) => board.fqbn === boardOpt.value)) ||
+          null
+      );
+    },
+    [availableBoards, onBoardSelect]
+  );
+
+  React.useEffect(() => {
+    // if there is activity going on, skip updating the boards (avoid flickering)
+    if (busy) {
+      return;
+    }
+
+    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)
+    );
+    const boardsList: BoardOption[] = updatableBoards.map((board, i) => {
+      if (board.selected) {
+        selBoard = i;
+      }
+      return {
+        label: nls.localize(
+          'arduino/certificate/boardAtPort',
+          '{0} at {1}',
+          board.name,
+          board.port?.address ?? ''
+        ),
+        value: board.fqbn || '',
+      };
+    });
+
+    if (boardsList.length === 0) {
+      placeholderTxt = nls.localize(
+        'arduino/certificate/noSupportedBoardConnected',
+        'No supported board connected'
+      );
+    }
+
+    setSelectBoardPlaceholder(placeholderTxt);
+    setSelectOptions(boardsList);
+
+    if (selectedBoard) {
+      selBoard = boardsList
+        .map((boardOpt) => boardOpt.value)
+        .indexOf(selectedBoard.fqbn || '');
+    }
+
+    selectOption(boardsList[selBoard] || null);
+  }, [busy, availableBoards, selectOption, updatableFqbns, selectedBoard]);
+
+  return (
+    <ArduinoSelect
+      id="board-select"
+      menuPosition="fixed"
+      isDisabled={selectOptions.length === 0 || busy}
+      placeholder={selectBoardPlaceholder}
+      options={selectOptions}
+      value={
+        (selectedBoard && {
+          value: selectedBoard.fqbn,
+          label: nls.localize(
+            'arduino/certificate/boardAtPort',
+            '{0} at {1}',
+            selectedBoard.name,
+            selectedBoard.port?.address ?? ''
+          ),
+        }) ||
+        null
+      }
+      tabSelectsValue={false}
+      onChange={selectOption}
+    />
+  );
+};

arduino-ide-extension/src/browser/dialogs/certificate-uploader/utils.ts

@@ -0,0 +1,38 @@
+export const arduinoCert = 'arduino.cc:443';
+
+export function sanifyCertString(cert: string): string {
+  const regex = /^(?:.*:\/\/)*(\S+\.+[^:]*):*(\d*)*$/gm;
+
+  const m = regex.exec(cert);
+
+  if (!m) {
+    return '';
+  }
+
+  const domain = m[1] || '';
+  const port = m[2] || '443';
+
+  if (domain.length === 0 || port.length === 0) {
+    return '';
+  }
+
+  return `${domain}:${port}`;
+}
+
+export function certificateList(certificates: string): string[] {
+  let certs = certificates
+    .split(',')
+    .map((cert) => sanifyCertString(cert.trim()))
+    .filter((cert) => {
+      // remove empty certificates
+      if (!cert || cert.length === 0) {
+        return false;
+      }
+      return true;
+    });
+
+  // add arduino certificate at the top of the list
+  certs = certs.filter((cert) => cert !== arduinoCert);
+  certs.unshift(arduinoCert);
+  return certs;
+}

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

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { inject, injectable } from 'inversify';
+import { Widget } from '@phosphor/widgets';
+import { Message } from '@phosphor/messaging';
+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;
+  changed: (evt: React.BaseSyntheticEvent) => void;
+  value: string;
+  isSelected: boolean;
+  isDisabled: boolean;
+  label: string;
+}) => {
+  return (
+    <p className="RadioButton">
+      <input
+        id={props.id}
+        onChange={props.changed}
+        value={props.value}
+        type="radio"
+        checked={props.isSelected}
+        disabled={props.isDisabled}
+      />
+      <label htmlFor={props.id}>{props.label}</label>
+    </p>
+  );
+};
+
+export const ShareSketchComponent = ({
+  treeNode,
+  createApi,
+  domain = 'https://create.arduino.cc',
+}: {
+  treeNode: any;
+  createApi: CreateApi;
+  domain?: string;
+}): React.ReactElement => {
+  const [loading, setloading] = React.useState<boolean>(false);
+
+  const radioChangeHandler = async (event: React.BaseSyntheticEvent) => {
+    setloading(true);
+    const sketch = await createApi.editSketch({
+      id: treeNode.sketchId,
+      params: {
+        is_public: event.target.value === 'private' ? false : true,
+      },
+    });
+    // setPublicVisibility(sketch.is_public);
+    treeNode.isPublic = sketch.is_public;
+    setloading(false);
+  };
+
+  const sketchLink = `${domain}/editor/_/${treeNode.sketchId}/preview`;
+  const embedLink = `<iframe src="${sketchLink}?embed" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>`;
+
+  return (
+    <div id="widget-container arduino-sharesketch-dialog">
+      <p>
+        {nls.localize(
+          'arduino/cloud/chooseSketchVisibility',
+          'Choose visibility of your Sketch:'
+        )}
+      </p>
+      <RadioButton
+        changed={radioChangeHandler}
+        id="1"
+        isSelected={treeNode.isPublic === false}
+        label={nls.localize(
+          'arduino/cloud/privateVisibility',
+          'Private. Only you can view the Sketch.'
+        )}
+        value="private"
+        isDisabled={loading}
+      />
+      <RadioButton
+        changed={radioChangeHandler}
+        id="2"
+        isSelected={treeNode.isPublic === true}
+        label={nls.localize(
+          'arduino/cloud/publicVisibility',
+          'Public. Anyone with the link can view the Sketch.'
+        )}
+        value="public"
+        isDisabled={loading}
+      />
+
+      {treeNode.isPublic && (
+        <div>
+          <p>{nls.localize('arduino/cloud/link', 'Link:')}</p>
+          <div className="sketch-link">
+            <input
+              type="text"
+              readOnly
+              value={sketchLink}
+              className="theia-input"
+            />
+            <button
+              onClick={() => clipboard.writeText(sketchLink)}
+              value="copy"
+              className="theia-button secondary"
+            >
+              {nls.localize('vscode/textInputActions/copy', 'Copy')}
+            </button>
+          </div>
+          <p>{nls.localize('arduino/cloud/embed', 'Embed:')}</p>
+          <div className="sketch-link-embed">
+            <textarea
+              readOnly
+              value={embedLink}
+              className="theia-input stretch"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+@injectable()
+export class ShareSketchWidget extends ReactWidget {
+  constructor(private treeNode: any, private createApi: CreateApi) {
+    super();
+  }
+
+  protected render(): React.ReactNode {
+    return (
+      <ShareSketchComponent
+        treeNode={this.treeNode}
+        createApi={this.createApi}
+      />
+    );
+  }
+}
+
+@injectable()
+export class ShareSketchDialogProps extends DialogProps {
+  readonly node: any;
+  readonly createApi: CreateApi;
+}
+
+@injectable()
+export class ShareSketchDialog extends AbstractDialog<void> {
+  protected widget: ShareSketchWidget;
+
+  constructor(
+    @inject(ShareSketchDialogProps)
+    protected readonly props: ShareSketchDialogProps
+  ) {
+    super({ title: props.title });
+    this.contentNode.classList.add('arduino-share-sketch-dialog');
+    this.widget = new ShareSketchWidget(props.node, props.createApi);
+  }
+
+  get value(): void {
+    return;
+  }
+  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();
+  }
+}

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

@@ -0,0 +1,73 @@
+import { inject, injectable } from 'inversify';
+import { Widget } from '@phosphor/widgets';
+import { CancellationTokenSource } from '@theia/core/lib/common/cancellation';
+import {
+  ConfirmDialog,
+  ConfirmDialogProps,
+  DialogError,
+} from '@theia/core/lib/browser/dialogs';
+import { nls } from '@theia/core/lib/common';
+
+@injectable()
+export class DoNotAskAgainDialogProps extends ConfirmDialogProps {
+  readonly onAccept: () => Promise<void>;
+}
+
+@injectable()
+export class DoNotAskAgainConfirmDialog extends ConfirmDialog {
+  protected readonly doNotAskAgainCheckbox: HTMLInputElement;
+
+  constructor(
+    @inject(DoNotAskAgainDialogProps)
+    protected readonly props: DoNotAskAgainDialogProps
+  ) {
+    super(props);
+    this.controlPanel.removeChild(this.errorMessageNode);
+    const doNotAskAgainNode = document.createElement('div');
+    doNotAskAgainNode.setAttribute('style', 'flex: 2');
+    this.controlPanel.insertBefore(
+      doNotAskAgainNode,
+      this.controlPanel.firstChild
+    );
+    const doNotAskAgainLabel = document.createElement('label');
+    doNotAskAgainLabel.classList.add('flex-line');
+    doNotAskAgainNode.appendChild(doNotAskAgainLabel);
+    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);
+    this.doNotAskAgainCheckbox.type = 'checkbox';
+  }
+
+  protected async accept(): Promise<void> {
+    if (!this.resolve) {
+      return;
+    }
+    this.acceptCancellationSource.cancel();
+    this.acceptCancellationSource = new CancellationTokenSource();
+    const token = this.acceptCancellationSource.token;
+    const value = this.value;
+    const error = await this.isValid(value, 'open');
+    if (token.isCancellationRequested) {
+      return;
+    }
+    if (!DialogError.getResult(error)) {
+      this.setErrorMessage(error);
+    } else {
+      if (this.doNotAskAgainCheckbox.checked) {
+        await this.props.onAccept();
+      }
+      this.resolve(value);
+      Widget.detach(this);
+    }
+  }
+
+  protected setErrorMessage(error: DialogError): void {
+    if (this.acceptButton) {
+      this.acceptButton.disabled = !DialogError.getResult(error);
+    }
+  }
+}

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

@@ -0,0 +1,222 @@
+import { nls } from '@theia/core/lib/common';
+import * as React from 'react';
+import {
+  ArduinoFirmwareUploader,
+  FirmwareInfo,
+} from '../../../common/protocol/arduino-firmware-uploader';
+import { AvailableBoard } from '../../boards/boards-service-provider';
+import { ArduinoSelect } from '../../widgets/arduino-select';
+import { SelectBoardComponent } from '../certificate-uploader/select-board-components';
+
+type FirmwareOption = { value: string; label: string };
+
+export const FirmwareUploaderComponent = ({
+  availableBoards,
+  firmwareUploader,
+  updatableFqbns,
+  flashFirmware,
+  isOpen,
+}: {
+  availableBoards: AvailableBoard[];
+  firmwareUploader: ArduinoFirmwareUploader;
+  updatableFqbns: string[];
+  flashFirmware: (firmware: FirmwareInfo, port: string) => Promise<any>;
+  isOpen: any;
+}): React.ReactElement => {
+  // boolean states for buttons
+  const [firmwaresFetching, setFirmwaresFetching] = React.useState(false);
+
+  const [installFeedback, setInstallFeedback] = React.useState<
+    'ok' | 'fail' | 'installing' | null
+  >(null);
+
+  const [selectedBoard, setSelectedBoard] =
+    React.useState<AvailableBoard | null>(null);
+
+  const [availableFirmwares, setAvailableFirmwares] = React.useState<
+    FirmwareInfo[]
+  >([]);
+  React.useEffect(() => {
+    setAvailableFirmwares([]);
+  }, [isOpen]);
+  const [selectedFirmware, setSelectedFirmware] =
+    React.useState<FirmwareOption | null>(null);
+
+  const [firmwareOptions, setFirmwareOptions] = React.useState<
+    FirmwareOption[]
+  >([]);
+
+  const fetchFirmwares = React.useCallback(async () => {
+    setInstallFeedback(null);
+    setFirmwaresFetching(true);
+    if (!selectedBoard) {
+      return;
+    }
+
+    // fetch the firmwares for the selected board
+    const firmwaresForFqbn = await firmwareUploader.availableFirmwares(
+      selectedBoard.fqbn || ''
+    );
+    setAvailableFirmwares(firmwaresForFqbn);
+
+    const firmwaresOpts = firmwaresForFqbn.map((f) => ({
+      label: f.firmware_version,
+      value: f.firmware_version,
+    }));
+
+    setFirmwareOptions(firmwaresOpts);
+
+    if (firmwaresForFqbn.length > 0) setSelectedFirmware(firmwaresOpts[0]);
+    setFirmwaresFetching(false);
+  }, [firmwareUploader, selectedBoard]);
+
+  const installFirmware = React.useCallback(async () => {
+    setInstallFeedback('installing');
+
+    const firmwareToFlash = availableFirmwares.find(
+      (firmware) => firmware.firmware_version === selectedFirmware?.value
+    );
+
+    try {
+      const installStatus =
+        !!firmwareToFlash &&
+        !!selectedBoard?.port &&
+        (await flashFirmware(firmwareToFlash, selectedBoard?.port.address));
+
+      setInstallFeedback((installStatus && 'ok') || 'fail');
+    } catch {
+      setInstallFeedback('fail');
+    }
+  }, [firmwareUploader, selectedBoard, selectedFirmware, availableFirmwares]);
+
+  const onBoardSelect = React.useCallback(
+    (board: AvailableBoard) => {
+      const newFqbn = (board && board.fqbn) || null;
+      const prevFqbn = (selectedBoard && selectedBoard.fqbn) || null;
+
+      if (newFqbn !== prevFqbn) {
+        setInstallFeedback(null);
+        setAvailableFirmwares([]);
+        setSelectedBoard(board);
+      }
+    },
+    [selectedBoard]
+  );
+
+  return (
+    <>
+      <div className="dialogSection">
+        <div className="dialogRow">
+          <label htmlFor="board-select">
+            {nls.localize('arduino/firmware/selectBoard', 'Select Board')}
+          </label>
+        </div>
+        <div className="dialogRow">
+          <div className="fl1">
+            <SelectBoardComponent
+              availableBoards={availableBoards}
+              updatableFqbns={updatableFqbns}
+              onBoardSelect={onBoardSelect}
+              selectedBoard={selectedBoard}
+              busy={installFeedback === 'installing'}
+            />
+          </div>
+          <button
+            type="button"
+            className="theia-button secondary"
+            disabled={
+              selectedBoard === null ||
+              firmwaresFetching ||
+              installFeedback === 'installing'
+            }
+            onClick={fetchFirmwares}
+          >
+            {nls.localize('arduino/firmware/checkUpdates', 'Check Updates')}
+          </button>
+        </div>
+      </div>
+      {availableFirmwares.length > 0 && (
+        <>
+          <div className="dialogSection">
+            <div className="dialogRow">
+              <label htmlFor="firmware-select" className="fl1">
+                {nls.localize(
+                  'arduino/firmware/selectVersion',
+                  'Select firmware version'
+                )}
+              </label>
+              <ArduinoSelect
+                id="firmware-select"
+                menuPosition="fixed"
+                isDisabled={
+                  !selectedBoard ||
+                  firmwaresFetching ||
+                  installFeedback === 'installing'
+                }
+                options={firmwareOptions}
+                value={selectedFirmware}
+                tabSelectsValue={false}
+                onChange={(value) => {
+                  if (value) {
+                    setInstallFeedback(null);
+                    setSelectedFirmware(value);
+                  }
+                }}
+              />
+              <button
+                type="button"
+                className="theia-button primary"
+                disabled={
+                  selectedFirmware === null ||
+                  firmwaresFetching ||
+                  installFeedback === 'installing'
+                }
+                onClick={installFirmware}
+              >
+                {nls.localize('arduino/firmware/install', 'Install')}
+              </button>
+            </div>
+          </div>
+          <div className="dialogSection">
+            {installFeedback === null && (
+              <div className="dialogRow warn">
+                <i className="fa fa-exclamation status-icon" />
+                {nls.localize(
+                  'arduino/firmware/overwriteSketch',
+                  'Installation will overwrite the Sketch on the board.'
+                )}
+              </div>
+            )}
+            {installFeedback === 'installing' && (
+              <div className="dialogRow success">
+                <div className="spinner" />
+                {nls.localize(
+                  'arduino/firmware/installingFirmware',
+                  'Installing firmware.'
+                )}
+              </div>
+            )}
+            {installFeedback === 'ok' && (
+              <div className="dialogRow success">
+                <i className="fa fa-info status-icon" />
+                {nls.localize(
+                  'arduino/firmware/successfullyInstalled',
+                  'Firmware succesfully installed.'
+                )}
+              </div>
+            )}
+            {installFeedback === 'fail' && (
+              <div className="dialogRow warn">
+                <i className="fa fa-exclamation status-icon" />
+                {nls.localize(
+                  'arduino/firmware/failedInstall',
+                  'Installation failed. Please try again.'
+                )}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { inject, injectable, postConstruct } 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 {
+  AvailableBoard,
+  BoardsServiceProvider,
+} from '../../boards/boards-service-provider';
+import {
+  ArduinoFirmwareUploader,
+  FirmwareInfo,
+} from '../../../common/protocol/arduino-firmware-uploader';
+import { FirmwareUploaderComponent } from './firmware-uploader-component';
+import { UploadFirmware } from '../../contributions/upload-firmware';
+
+@injectable()
+export class UploadFirmwareDialogWidget extends ReactWidget {
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
+
+  @inject(ArduinoFirmwareUploader)
+  protected readonly arduinoFirmwareUploader: ArduinoFirmwareUploader;
+
+  protected updatableFqbns: string[] = [];
+  protected availableBoards: AvailableBoard[] = [];
+  protected isOpen = new Object();
+
+  public busyCallback = (busy: boolean) => {
+    return;
+  };
+
+  constructor() {
+    super();
+  }
+
+  @postConstruct()
+  protected init(): void {
+    this.arduinoFirmwareUploader.updatableBoards().then((fqbns) => {
+      this.updatableFqbns = fqbns;
+      this.update();
+    });
+
+    this.boardsServiceClient.onAvailableBoardsChanged((availableBoards) => {
+      this.availableBoards = availableBoards;
+      this.update();
+    });
+  }
+
+  protected flashFirmware(firmware: FirmwareInfo, port: string): Promise<any> {
+    this.busyCallback(true);
+    return this.arduinoFirmwareUploader
+      .flash(firmware, port)
+      .finally(() => this.busyCallback(false));
+  }
+
+  onCloseRequest(msg: Message): void {
+    super.onCloseRequest(msg);
+    this.isOpen = new Object();
+  }
+
+  protected render(): React.ReactNode {
+    return (
+      <form>
+        <FirmwareUploaderComponent
+          availableBoards={this.availableBoards}
+          firmwareUploader={this.arduinoFirmwareUploader}
+          flashFirmware={this.flashFirmware.bind(this)}
+          updatableFqbns={this.updatableFqbns}
+          isOpen={this.isOpen}
+        />
+      </form>
+    );
+  }
+}
+
+@injectable()
+export class UploadFirmwareDialogProps extends DialogProps {}
+
+@injectable()
+export class UploadFirmwareDialog extends AbstractDialog<void> {
+  @inject(UploadFirmwareDialogWidget)
+  protected readonly widget: UploadFirmwareDialogWidget;
+
+  private busy = false;
+
+  constructor(
+    @inject(UploadFirmwareDialogProps)
+    protected readonly props: UploadFirmwareDialogProps
+  ) {
+    super({ title: UploadFirmware.Commands.OPEN.label || '' });
+    this.contentNode.classList.add('firmware-uploader-dialog');
+    this.acceptButton = undefined;
+  }
+
+  get value(): void {
+    return;
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    if (this.widget.isAttached) {
+      Widget.detach(this.widget);
+    }
+    Widget.attach(this.widget, this.contentNode);
+    this.widget.busyCallback = this.busyCallback.bind(this);
+    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 handleEnter(event: KeyboardEvent): boolean | void {
+    return false;
+  }
+
+  close(): void {
+    if (this.busy) {
+      return;
+    }
+    this.widget.close();
+    super.close();
+  }
+
+  busyCallback(busy: boolean): void {
+    this.busy = busy;
+    if (busy) {
+      this.closeCrossNode.classList.add('disabled');
+    } else {
+      this.closeCrossNode.classList.remove('disabled');
+    }
+  }
+}

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

@@ -0,0 +1,713 @@
+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 {
+  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(this.state) !== JSON.stringify(prevState)
+    ) {
+      this.props.settingsService.update(this.state, true);
+    }
+  }
+
+  componentDidMount(): void {
+    this.props.settingsService
+      .settings()
+      .then((settings) => this.setState(settings));
+    this.toDispose.push(
+      this.props.settingsService.onDidChange((settings) =>
+        this.setState(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.checkForUpdates}
+            onChange={this.checkForUpdatesDidChange}
+            disabled={true}
+          />
+          {nls.localize(
+            'arduino/preferences/checkForUpdates',
+            'Check for updates on startup'
+          )}
+        </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.additionalUrls.join(',')}
+            onChange={this.additionalUrlsDidChange}
+          />
+          <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>) => {
+    if (this.isControlKey(event)) {
+      return;
+    }
+    event.nativeEvent.preventDefault();
+    event.nativeEvent.returnValue = false;
+  };
+
+  protected numbersOnlyKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    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 () => {
+    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 () => {
+    const additionalUrls = await new AdditionalUrlsDialog(
+      this.state.additionalUrls,
+      this.props.windowService
+    ).open();
+    if (additionalUrls) {
+      this.setState({ additionalUrls });
+    }
+  };
+
+  protected editorFontSizeDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    if (value) {
+      this.setState({ editorFontSize: parseInt(value, 10) });
+    }
+  };
+
+  protected additionalUrlsDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    this.setState({
+      additionalUrls: event.target.value.split(',').map((url) => url.trim()),
+    });
+  };
+
+  protected autoScaleInterfaceDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    this.setState({ autoScaleInterface: event.target.checked });
+  };
+
+  protected interfaceScaleDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    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>
+  ) => {
+    this.setState({ verifyAfterUpload: event.target.checked });
+  };
+
+  protected checkForUpdatesDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    this.setState({ checkForUpdates: event.target.checked });
+  };
+
+  protected sketchbookShowAllFilesDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    this.setState({ sketchbookShowAllFiles: event.target.checked });
+  };
+
+  protected autoSaveDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    this.setState({ autoSave: event.target.checked ? 'on' : 'off' });
+  };
+
+  protected quickSuggestionsOtherDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    // 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>) => {
+    const { selectedIndex } = event.target.options;
+    const theme = ThemeService.get().getThemes()[selectedIndex];
+    if (theme) {
+      this.setState({ themeId: theme.id });
+    }
+  };
+
+  protected languageDidChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const selectedLanguage = event.target.value;
+    this.setState({ currentLanguage: selectedLanguage });
+  };
+
+  protected compilerWarningsDidChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const { selectedIndex } = event.target.options;
+    const compilerWarnings = CompilerWarningLiterals[selectedIndex];
+    if (compilerWarnings) {
+      this.setState({ compilerWarnings });
+    }
+  };
+
+  protected verboseOnCompileDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    this.setState({ verboseOnCompile: event.target.checked });
+  };
+
+  protected verboseOnUploadDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    this.setState({ verboseOnUpload: event.target.checked });
+  };
+
+  protected sketchpathDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const sketchbookPath = event.target.value;
+    if (sketchbookPath) {
+      this.setState({ sketchbookPath });
+    }
+  };
+
+  protected noProxyDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      this.setState({ network: 'none' });
+    } else {
+      this.setState({ network: Network.Default() });
+    }
+  };
+
+  protected manualProxyDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (event.target.checked) {
+      this.setState({ network: Network.Default() });
+    } else {
+      this.setState({ network: 'none' });
+    }
+  };
+
+  protected httpProtocolDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    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>
+  ) => {
+    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>
+  ) => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.hostname = event.target.value;
+      this.setState({ network });
+    }
+  };
+
+  protected portDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.port = event.target.value;
+      this.setState({ network });
+    }
+  };
+
+  protected usernameDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (this.state.network !== 'none') {
+      const network = this.cloneProxySettings;
+      network.username = event.target.value;
+      this.setState({ network });
+    }
+  };
+
+  protected passwordDidChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    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 & { languages: string[] };
+}

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

@@ -0,0 +1,193 @@
+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';
+
+@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) {
+    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 triggerd 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 this.textArea.value
+      .split('\n')
+      .map((url) => url.trim())
+      .filter((url) => !!url);
+  }
+
+  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,325 @@
+import { injectable, inject, postConstruct } from 'inversify';
+import URI from '@theia/core/lib/common/uri';
+import { Emitter } from '@theia/core/lib/common/event';
+import { Deferred } 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 { Index } from '../../../common/types';
+import {
+  CompilerWarnings,
+  ConfigService,
+  FileSystemExt,
+  Network,
+} from '../../../common/protocol';
+import { nls } from '@theia/core/lib/common';
+import { AsyncLocalizationProvider } from '@theia/core/lib/common/i18n/localization';
+
+const EDITOR_SETTING = 'editor';
+const FONT_SIZE_SETTING = `${EDITOR_SETTING}.fontSize`;
+const AUTO_SAVE_SETTING = `${EDITOR_SETTING}.autoSave`;
+const QUICK_SUGGESTIONS_SETTING = `${EDITOR_SETTING}.quickSuggestions`;
+const ARDUINO_SETTING = 'arduino';
+const WINDOW_SETTING = `${ARDUINO_SETTING}.window`;
+// const IDE_SETTING = `${ARDUINO_SETTING}.ide`;
+const COMPILE_SETTING = `${ARDUINO_SETTING}.compile`;
+const UPLOAD_SETTING = `${ARDUINO_SETTING}.upload`;
+const SKETCHBOOK_SETTING = `${ARDUINO_SETTING}.sketchbook`;
+const AUTO_SCALE_SETTING = `${WINDOW_SETTING}.autoScale`;
+const ZOOM_LEVEL_SETTING = `${WINDOW_SETTING}.zoomLevel`;
+// const AUTO_UPDATE_SETTING = `${IDE_SETTING}.autoUpdate`;
+const COMPILE_VERBOSE_SETTING = `${COMPILE_SETTING}.verbose`;
+const COMPILE_WARNINGS_SETTING = `${COMPILE_SETTING}.warnings`;
+const UPLOAD_VERBOSE_SETTING = `${UPLOAD_SETTING}.verbose`;
+const UPLOAD_VERIFY_SETTING = `${UPLOAD_SETTING}.verify`;
+const SHOW_ALL_FILES_SETTING = `${SKETCHBOOK_SETTING}.showAllFiles`;
+
+export interface Settings extends Index {
+  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
+  checkForUpdates?: boolean; // `arduino.ide.autoUpdate`
+  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: string[]; // 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;
+
+  protected readonly onDidChangeEmitter = new Emitter<Readonly<Settings>>();
+  readonly onDidChange = this.onDidChangeEmitter.event;
+
+  protected ready = new Deferred<void>();
+  protected _settings: Settings;
+
+  @postConstruct()
+  protected async init(): Promise<void> {
+    await this.appStateService.reachedState('ready'); // Hack for https://github.com/eclipse-theia/theia/issues/8993
+    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,
+      // checkForUpdates,
+      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<string>(AUTO_UPDATE_SETTING, true),
+      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,
+      // checkForUpdates,
+      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)) {
+      this._settings[key] = settings[key];
+    }
+    if (fireDidChange) {
+      this.onDidChangeEmitter.fire(this._settings);
+    }
+  }
+
+  async reset(): Promise<void> {
+    const settings = await this.loadSettings();
+    return this.update(settings, true);
+  }
+
+  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);
+    }
+  }
+
+  async save(): Promise<string | true> {
+    await this.ready.promise;
+    const {
+      currentLanguage,
+      editorFontSize,
+      themeId,
+      autoSave,
+      quickSuggestions,
+      autoScaleInterface,
+      interfaceScale,
+      // checkForUpdates,
+      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 Promise.all([
+      this.preferenceService.set(
+        'editor.fontSize',
+        editorFontSize,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        'workbench.colorTheme',
+        themeId,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        'editor.autoSave',
+        autoSave,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        'editor.quickSuggestions',
+        quickSuggestions,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        AUTO_SCALE_SETTING,
+        autoScaleInterface,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        ZOOM_LEVEL_SETTING,
+        interfaceScale,
+        PreferenceScope.User
+      ),
+      // this.preferenceService.set(AUTO_UPDATE_SETTING, checkForUpdates, PreferenceScope.User),
+      this.preferenceService.set(
+        COMPILE_VERBOSE_SETTING,
+        verboseOnCompile,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        COMPILE_WARNINGS_SETTING,
+        compilerWarnings,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        UPLOAD_VERBOSE_SETTING,
+        verboseOnUpload,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        UPLOAD_VERIFY_SETTING,
+        verifyAfterUpload,
+        PreferenceScope.User
+      ),
+      this.preferenceService.set(
+        SHOW_ALL_FILES_SETTING,
+        sketchbookShowAllFiles,
+        PreferenceScope.User
+      ),
+      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
+    if (currentLanguage !== nls.locale) {
+      window.localStorage.setItem(nls.localeId, currentLanguage);
+      window.location.reload();
+    }
+
+    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/editor-mode.ts

@@ -17,9 +17,7 @@ export class EditorMode implements FrontendApplicationContribution {
   }
 
   get compileForDebug(): boolean {
-        const value = window.localStorage.getItem(
-            EditorMode.COMPILE_FOR_DEBUG_KEY
-        );
+    const value = window.localStorage.getItem(EditorMode.COMPILE_FOR_DEBUG_KEY);
     return value === 'true';
   }
 

arduino-ide-extension/src/browser/icons/debug-dark.svg

@@ -1,4 +1,7 @@
 <!--Copyright (c) Microsoft Corporation. All rights reserved.-->
 <!--Copyright (C) 2019 TypeFox and others.-->
 <!--Licensed under the MIT License. See License.txt in the project root for license information.-->
-<svg width="28" height="28" viewBox="0 0 28 28" fill="#F6F6F6" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M15.1673 18.0687V23.0247C15.1673 23.5637 15.2723 24.5 14.7315 24.5H12.8328V23.3327H14V19.6122L13.7988 19.4022C13.0604 20.0803 12.1008 20.4669 11.0986 20.49C10.0964 20.5132 9.11994 20.1714 8.351 19.5282C7 18.1737 7.13826 16.3327 8.60475 14H4.66726V15.1672H3.50001V13.2685C3.50001 12.7277 4.43626 12.8327 4.97526 12.8327H9.76326L15.1673 18.0687ZM11.6673 5.83275H10.5V4.66725H12.775C13.3123 4.66725 14 4.9245 14 5.4635V9.366L14.8593 10.3862C14.927 9.83979 15.1906 9.33644 15.6013 8.96958C16.0119 8.60271 16.5416 8.39723 17.0923 8.39125C17.2298 8.37945 17.3684 8.39492 17.5 8.43675V5.83275H18.6673V8.88825C18.703 8.99154 18.7618 9.08536 18.8391 9.16265C18.9164 9.23995 19.0102 9.29871 19.1135 9.3345H22.1673V10.5H19.5615C19.593 10.5 19.6105 10.675 19.6105 10.85C19.6058 11.4034 19.4011 11.9365 19.0341 12.3508C18.6671 12.7651 18.1626 13.0326 17.6138 13.104L18.634 14H22.5383C23.0773 14 23.3345 14.6807 23.3345 15.225V17.5H22.1673V16.3327H19.2273L11.6673 8.98275V5.83275ZM14 0C11.2311 0 8.52431 0.821086 6.22202 2.35943C3.91973 3.89776 2.12532 6.08426 1.06569 8.64243C0.00606593 11.2006 -0.271181 14.0155 0.269012 16.7313C0.809205 19.447 2.14258 21.9416 4.10051 23.8995C6.05845 25.8574 8.55301 27.1908 11.2687 27.731C13.9845 28.2712 16.7994 27.9939 19.3576 26.9343C21.9157 25.8747 24.1022 24.0803 25.6406 21.778C27.1789 19.4757 28 16.7689 28 14C28 10.287 26.525 6.72601 23.8995 4.1005C21.274 1.475 17.713 0 14 0V0ZM25.6673 14C25.6692 16.6908 24.7364 19.2988 23.0283 21.378L6.622 4.97175C8.33036 3.57269 10.4009 2.68755 12.5927 2.41935C14.7845 2.15115 17.0074 2.51091 19.0027 3.45676C20.998 4.40262 22.6836 5.89567 23.8635 7.76217C25.0433 9.62867 25.6689 11.7919 25.6673 14ZM2.33276 14C2.33066 11.3091 3.26351 8.70111 4.97176 6.622L21.378 23.03C19.6693 24.4284 17.5987 25.313 15.407 25.5807C13.2153 25.8485 10.9926 25.4884 8.99754 24.5425C7.00244 23.5965 5.31693 22.1036 4.13708 20.2373C2.95722 18.3709 2.33152 16.208 2.33276 14Z" fill="white"/></g><defs><clipPath id="clip0"><rect width="28" height="28" fill="#F6F6F6"/></clipPath></defs></svg>
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6259 14.2462C13.4329 14.2464 13.2452 14.1827 13.0922 14.0652C12.9391 13.9476 12.8292 13.7827 12.7796 13.5962C12.73 13.4097 12.7434 13.212 12.8178 13.034C12.8922 12.8559 13.0234 12.7074 13.1909 12.6116L19.7355 8.87405L9.25 2.88232V9.25C9.25 9.48206 9.15781 9.70462 8.99372 9.86872C8.82962 10.0328 8.60706 10.125 8.375 10.125C8.14294 10.125 7.92038 10.0328 7.75628 9.86872C7.59219 9.70462 7.5 9.48206 7.5 9.25V1.375C7.49991 1.22171 7.54012 1.07108 7.61658 0.938223C7.69304 0.805362 7.80308 0.694931 7.93567 0.617993C8.06825 0.541055 8.21873 0.500314 8.37202 0.499851C8.52531 0.499389 8.67603 0.539221 8.80908 0.615357L21.9341 8.11438C22.068 8.19089 22.1793 8.30145 22.2568 8.43486C22.3342 8.56826 22.375 8.71977 22.375 8.87402C22.375 9.02827 22.3342 9.17978 22.2568 9.31319C22.1793 9.4466 22.068 9.55716 21.9341 9.63367L14.0591 14.1309C13.9273 14.2066 13.7779 14.2464 13.6259 14.2462Z" fill="#BDC7C7"/>
+<path d="M11 17.125C11.2321 17.125 11.4546 17.0328 11.6187 16.8687C11.7828 16.7046 11.875 16.4821 11.875 16.25C11.875 16.0179 11.7828 15.7954 11.6187 15.6313C11.4546 15.4672 11.2321 15.375 11 15.375H10.0724C10.0297 15.0014 9.95355 14.6325 9.84495 14.2725L10.7462 13.3712C10.8278 13.2897 10.8925 13.1928 10.9367 13.0862C10.9808 12.9796 11.0035 12.8654 11.0035 12.75C11.0035 12.6346 10.9808 12.5204 10.9367 12.4138C10.8925 12.3072 10.8278 12.2104 10.7462 12.1288C10.6646 12.0472 10.5678 11.9825 10.4612 11.9383C10.3546 11.8942 10.2404 11.8714 10.125 11.8714C10.0096 11.8714 9.89537 11.8942 9.78878 11.9383C9.68219 11.9825 9.58533 12.0472 9.50375 12.1288L9.04 12.5925C8.72733 12.1175 8.30488 11.7248 7.80837 11.4477C7.31186 11.1705 6.75589 11.0169 6.1875 11C5.6191 11.0169 5.06314 11.1705 4.56663 11.4477C4.07011 11.7249 3.64766 12.1176 3.335 12.5926L2.87125 12.1288C2.70649 11.964 2.48303 11.8715 2.25002 11.8715C2.01701 11.8715 1.79355 11.964 1.62878 12.1288C1.46401 12.2935 1.37145 12.517 1.37144 12.75C1.37144 12.983 1.46399 13.2065 1.62875 13.3712L2.53 14.2725C2.4214 14.6325 2.34526 15.0014 2.3025 15.375H1.375C1.14294 15.375 0.920376 15.4672 0.756282 15.6313C0.592187 15.7954 0.5 16.0179 0.5 16.25C0.5 16.4821 0.592187 16.7046 0.756282 16.8687C0.920376 17.0328 1.14294 17.125 1.375 17.125H2.30255C2.34532 17.4986 2.42145 17.8675 2.53005 18.2275L2.5038 18.2538L1.6288 19.1288C1.46485 19.2939 1.37285 19.5172 1.37285 19.75C1.37285 19.9827 1.46485 20.206 1.6288 20.3712C1.79466 20.5338 2.01771 20.625 2.25002 20.625C2.48233 20.625 2.70537 20.5338 2.87123 20.3712L3.33498 19.9074C3.64765 20.3824 4.0701 20.7751 4.56661 21.0523C5.06313 21.3295 5.6191 21.4831 6.1875 21.5C6.7559 21.4831 7.31186 21.3295 7.80837 21.0523C8.30489 20.7751 8.72734 20.3824 9.04 19.9074L9.50375 20.3712C9.66961 20.5339 9.89265 20.625 10.125 20.625C10.3573 20.625 10.5803 20.5339 10.7462 20.3712C10.9101 20.206 11.0021 19.9827 11.0021 19.75C11.0021 19.5172 10.9101 19.2939 10.7462 19.1288L9.87118 18.2538L9.84493 18.2275C9.95353 17.8675 10.0297 17.4986 10.0724 17.125L11 17.125ZM6.1875 12.75C6.98367 12.75 7.68375 13.4588 8.06875 14.5H4.30625C4.69125 13.4588 5.39133 12.75 6.1875 12.75ZM6.1875 19.75C4.9975 19.75 4 18.1487 4 16.25H8.375C8.375 18.1487 7.3775 19.75 6.1875 19.75Z" fill="#BDC7C7"/>
+</svg>

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

@@ -1,7 +1,8 @@
 import { injectable, postConstruct, inject } from 'inversify';
 import { Message } from '@phosphor/messaging';
 import { addEventListener } from '@theia/core/lib/browser/widgets/widget';
-import { AbstractDialog, DialogProps } from '@theia/core/lib/browser/dialogs';
+import { DialogProps } from '@theia/core/lib/browser/dialogs';
+import { AbstractDialog } from '../theia/dialogs/dialogs';
 import {
   LibraryPackage,
   LibraryService,
@@ -9,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,
@@ -23,7 +28,7 @@ export class LibraryListWidget extends ListWidget<LibraryPackage> {
     super({
       id: LibraryListWidget.WIDGET_ID,
       label: LibraryListWidget.WIDGET_LABEL,
-            iconClass: 'library-tab-icon',
+      iconClass: 'fa fa-arduino-library',
       searchable: service,
       installable: service,
       itemLabel: (item: LibraryPackage) => item.name,
@@ -36,9 +41,7 @@ export class LibraryListWidget extends ListWidget<LibraryPackage> {
   protected init(): void {
     super.init();
     this.toDispose.pushAll([
-            this.notificationCenter.onLibraryInstalled(() =>
-                this.refresh(undefined)
-            ),
+      this.notificationCenter.onLibraryInstalled(() => this.refresh(undefined)),
       this.notificationCenter.onLibraryUninstalled(() =>
         this.refresh(undefined)
       ),
@@ -62,13 +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';
@@ -83,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();
 
@@ -119,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 }
       );
     }
@@ -134,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 }
     );
   }
@@ -145,10 +183,10 @@ 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) => {
+    this.contentNode.appendChild(this.createMessageNode(this.options.message));
+    (
+      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/local-cache/local-cache-fs-provider.ts

@@ -26,9 +26,7 @@ export namespace LocalCacheUri {
 
 @injectable()
 export class LocalCacheFsProvider
-    implements
-        FileServiceContribution,
-        DelegatingFileSystemProvider.URIConverter
+  implements FileServiceContribution, DelegatingFileSystemProvider.URIConverter
 {
   @inject(ConfigService)
   protected readonly configService: ConfigService;
@@ -48,10 +46,7 @@ export class LocalCacheFsProvider
           (async () => {
             this.init(fileService);
             const provider = await this.createProvider(fileService);
-                        fileService.registerProvider(
-                            LocalCacheUri.scheme,
-                            provider
-                        );
+            fileService.registerProvider(LocalCacheUri.scheme, provider);
           })()
         );
       }
@@ -108,7 +103,7 @@ export class LocalCacheFsProvider
     });
   }
 
-    private get currentUserUri(): URI {
+  public get currentUserUri(): URI {
     const { session } = this.authenticationService;
     if (!session) {
       throw new FileSystemProviderError(
@@ -135,15 +130,13 @@ export class LocalCacheFsProvider
       }
       const toDispose = new DisposableCollection();
       toDispose.push(
-                this.authenticationService.onSessionDidChange(
-                    async (session) => {
+        this.authenticationService.onSessionDidChange(async (session) => {
           if (session) {
             await this.ensureExists(session, fileService);
             toDispose.dispose();
             resolve(session);
           }
-                    }
-                )
+        })
       );
     });
   }

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

@@ -86,8 +86,13 @@ export namespace ArduinoMenus {
 
   // -- Tools
   export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
-    // `Auto Format`, `Library Manager...`, `Boards Manager...`
+  // `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 = [
+    ...TOOLS,
+    '1_firmware_uploader',
+  ];
   // `Board`, `Port`, and `Get Board Info`.
   export const TOOLS__BOARD_SELECTION_GROUP = [...TOOLS, '2_board_selection'];
   // Core settings, such as `Processor` and `Programmers` for the board and `Burn Bootloader`
@@ -143,6 +148,11 @@ export namespace ArduinoMenus {
     ...SKETCH_CONTROL__CONTEXT,
     '2_resources',
   ];
+
+  // -- ROOT SSL CERTIFICATES
+  export const ROOT_CERTIFICATES__CONTEXT = [
+    'arduino-root-certificates--context',
+  ];
 }
 
 /**

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

@@ -1,365 +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,
-} from '../../common/protocol/monitor-service';
-import { BoardsServiceProvider } from '../boards/boards-service-provider';
-import {
-    Port,
-    Board,
-    BoardsService,
-    AttachedBoardsChangeEvent,
-} from '../../common/protocol/boards-service';
-import { MonitorServiceClientImpl } from './monitor-service-client-impl';
-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(MonitorServiceClientImpl)
-    protected readonly monitorServiceClient: MonitorServiceClientImpl;
-
-    @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<{ message: 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.onError(async (error) => {
-            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
-                        );
-                    }
-                }
-            }
-        });
-        this.boardsServiceProvider.onBoardsConfigChanged(
-            this.handleBoardConfigChange.bind(this)
-        );
-        this.notificationCenter.onAttachedBoardsChanged((event) => {
-            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 })
-                        );
-                    }
-                }
-            }
-        });
-        // 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);
-            }
-        });
-    }
-
-    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;
-            }
-        }
-    }
-
-    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)) {
-            const requestMessage = () => {
-                this.monitorService.request().then(({ message }) => {
-                    if (this.connected) {
-                        this.onReadEmitter.fire({ message });
-                        requestMessage();
-                    }
-                });
-            };
-            requestMessage();
-            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<{ message: 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-model.ts

@@ -1,144 +0,0 @@
-import { injectable, inject } from 'inversify';
-import { Emitter, Event } from '@theia/core/lib/common/event';
-import { MonitorConfig } from '../../common/protocol/monitor-service';
-import {
-    FrontendApplicationContribution,
-    LocalStorageService,
-} from '@theia/core/lib/browser';
-import { BoardsServiceProvider } from '../boards/boards-service-provider';
-
-@injectable()
-export class MonitorModel implements FrontendApplicationContribution {
-    protected static STORAGE_ID = 'arduino-monitor-model';
-
-    @inject(LocalStorageService)
-    protected readonly localStorageService: LocalStorageService;
-
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClient: BoardsServiceProvider;
-
-    protected readonly onChangeEmitter: Emitter<
-        MonitorModel.State.Change<keyof MonitorModel.State>
-    >;
-    protected _autoscroll: boolean;
-    protected _timestamp: boolean;
-    protected _baudRate: MonitorConfig.BaudRate;
-    protected _lineEnding: MonitorModel.EOL;
-
-    constructor() {
-        this._autoscroll = true;
-        this._timestamp = false;
-        this._baudRate = MonitorConfig.BaudRate.DEFAULT;
-        this._lineEnding = MonitorModel.EOL.DEFAULT;
-        this.onChangeEmitter = new Emitter<
-            MonitorModel.State.Change<keyof MonitorModel.State>
-        >();
-    }
-
-    onStart(): void {
-        this.localStorageService
-            .getData<MonitorModel.State>(MonitorModel.STORAGE_ID)
-            .then((state) => {
-                if (state) {
-                    this.restoreState(state);
-                }
-            });
-    }
-
-    get onChange(): Event<MonitorModel.State.Change<keyof MonitorModel.State>> {
-        return this.onChangeEmitter.event;
-    }
-
-    get autoscroll(): boolean {
-        return this._autoscroll;
-    }
-
-    toggleAutoscroll(): void {
-        this._autoscroll = !this._autoscroll;
-        this.storeState();
-        this.storeState().then(() =>
-            this.onChangeEmitter.fire({
-                property: 'autoscroll',
-                value: this._autoscroll,
-            })
-        );
-    }
-
-    get timestamp(): boolean {
-        return this._timestamp;
-    }
-
-    toggleTimestamp(): void {
-        this._timestamp = !this._timestamp;
-        this.storeState().then(() =>
-            this.onChangeEmitter.fire({
-                property: 'timestamp',
-                value: this._timestamp,
-            })
-        );
-    }
-
-    get baudRate(): MonitorConfig.BaudRate {
-        return this._baudRate;
-    }
-
-    set baudRate(baudRate: MonitorConfig.BaudRate) {
-        this._baudRate = baudRate;
-        this.storeState().then(() =>
-            this.onChangeEmitter.fire({
-                property: 'baudRate',
-                value: this._baudRate,
-            })
-        );
-    }
-
-    get lineEnding(): MonitorModel.EOL {
-        return this._lineEnding;
-    }
-
-    set lineEnding(lineEnding: MonitorModel.EOL) {
-        this._lineEnding = lineEnding;
-        this.storeState().then(() =>
-            this.onChangeEmitter.fire({
-                property: 'lineEnding',
-                value: this._lineEnding,
-            })
-        );
-    }
-
-    protected restoreState(state: MonitorModel.State): void {
-        this._autoscroll = state.autoscroll;
-        this._timestamp = state.timestamp;
-        this._baudRate = state.baudRate;
-        this._lineEnding = state.lineEnding;
-    }
-
-    protected async storeState(): Promise<void> {
-        return this.localStorageService.setData(MonitorModel.STORAGE_ID, {
-            autoscroll: this._autoscroll,
-            timestamp: this._timestamp,
-            baudRate: this._baudRate,
-            lineEnding: this._lineEnding,
-        });
-    }
-}
-
-export namespace MonitorModel {
-    export interface State {
-        autoscroll: boolean;
-        timestamp: boolean;
-        baudRate: MonitorConfig.BaudRate;
-        lineEnding: EOL;
-    }
-    export namespace State {
-        export interface Change<K extends keyof State> {
-            readonly property: K;
-            readonly value: State[K];
-        }
-    }
-
-    export type EOL = '' | '\n' | '\r' | '\r\n';
-    export namespace EOL {
-        export const DEFAULT: EOL = '\n';
-    }
-}

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

@@ -1,16 +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;
-
-    notifyError(error: MonitorError): void {
-        this.onErrorEmitter.fire(error);
-    }
-}

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

@@ -1,156 +0,0 @@
-import * as React from 'react';
-import { injectable, inject } from 'inversify';
-import { AbstractViewContribution } from '@theia/core/lib/browser';
-import { MonitorWidget } from './monitor-widget';
-import { MenuModelRegistry, Command, CommandRegistry } from '@theia/core';
-import {
-    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';
-
-export namespace SerialMonitor {
-    export namespace Commands {
-        export const AUTOSCROLL: Command = {
-            id: 'serial-monitor-autoscroll',
-            label: 'Autoscroll',
-        };
-        export const TIMESTAMP: Command = {
-            id: 'serial-monitor-timestamp',
-            label: 'Timestamp',
-        };
-        export const CLEAR_OUTPUT: Command = {
-            id: 'serial-monitor-clear-output',
-            label: 'Clear Output',
-            iconClass: 'clear-all',
-        };
-    }
-}
-
-@injectable()
-export class MonitorViewContribution
-    extends AbstractViewContribution<MonitorWidget>
-    implements TabBarToolbarContribution
-{
-    static readonly TOGGLE_SERIAL_MONITOR = MonitorWidget.ID + ':toggle';
-    static readonly TOGGLE_SERIAL_MONITOR_TOOLBAR =
-        MonitorWidget.ID + ':toggle-toolbar';
-
-    @inject(MonitorModel) protected readonly model: MonitorModel;
-
-    constructor() {
-        super({
-            widgetId: MonitorWidget.ID,
-            widgetName: 'Serial Monitor',
-            defaultWidgetOptions: {
-                area: 'bottom',
-            },
-            toggleCommandId: MonitorViewContribution.TOGGLE_SERIAL_MONITOR,
-            toggleKeybinding: 'CtrlCmd+Shift+M',
-        });
-    }
-
-    registerMenus(menus: MenuModelRegistry): void {
-        if (this.toggleCommand) {
-            menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
-                commandId: this.toggleCommand.id,
-                label: 'Serial Monitor',
-                order: '5',
-            });
-        }
-    }
-
-    registerToolbarItems(registry: TabBarToolbarRegistry): void {
-        registry.registerItem({
-            id: 'monitor-autoscroll',
-            render: () => this.renderAutoScrollButton(),
-            isVisible: (widget) => widget instanceof MonitorWidget,
-            onDidChange: this.model.onChange as any, // XXX: it's a hack. See: https://github.com/eclipse-theia/theia/pull/6696/
-        });
-        registry.registerItem({
-            id: 'monitor-timestamp',
-            render: () => this.renderTimestampButton(),
-            isVisible: (widget) => widget instanceof MonitorWidget,
-            onDidChange: this.model.onChange as any, // XXX: it's a hack. See: https://github.com/eclipse-theia/theia/pull/6696/
-        });
-        registry.registerItem({
-            id: SerialMonitor.Commands.CLEAR_OUTPUT.id,
-            command: SerialMonitor.Commands.CLEAR_OUTPUT.id,
-            tooltip: 'Clear Output',
-        });
-    }
-
-    registerCommands(commands: CommandRegistry): void {
-        commands.registerCommand(SerialMonitor.Commands.CLEAR_OUTPUT, {
-            isEnabled: (widget) => widget instanceof MonitorWidget,
-            isVisible: (widget) => widget instanceof MonitorWidget,
-            execute: (widget) => {
-                if (widget instanceof MonitorWidget) {
-                    widget.clearConsole();
-                }
-            },
-        });
-        if (this.toggleCommand) {
-            commands.registerCommand(this.toggleCommand, {
-                execute: () => this.toggle(),
-            });
-            commands.registerCommand(
-                { id: MonitorViewContribution.TOGGLE_SERIAL_MONITOR_TOOLBAR },
-                {
-                    isVisible: (widget) =>
-                        ArduinoToolbar.is(widget) && widget.side === 'right',
-                    execute: () => this.toggle(),
-                }
-            );
-        }
-    }
-
-    protected async toggle(): Promise<void> {
-        const widget = this.tryGetWidget();
-        if (widget) {
-            widget.dispose();
-        } else {
-            await this.openView({ activate: true, reveal: true });
-        }
-    }
-
-    protected renderAutoScrollButton(): React.ReactNode {
-        return (
-            <React.Fragment key="autoscroll-toolbar-item">
-                <div
-                    title="Toggle Autoscroll"
-                    className={`item enabled fa fa-angle-double-down arduino-monitor ${
-                        this.model.autoscroll ? 'toggled' : ''
-                    }`}
-                    onClick={this.toggleAutoScroll}
-                ></div>
-            </React.Fragment>
-        );
-    }
-
-    protected readonly toggleAutoScroll = () => this.doToggleAutoScroll();
-    protected async doToggleAutoScroll(): Promise<void> {
-        this.model.toggleAutoscroll();
-    }
-
-    protected renderTimestampButton(): React.ReactNode {
-        return (
-            <React.Fragment key="line-ending-toolbar-item">
-                <div
-                    title="Toggle Timestamp"
-                    className={`item enabled fa fa-clock-o arduino-monitor ${
-                        this.model.timestamp ? 'toggled' : ''
-                    }`}
-                    onClick={this.toggleTimestamp}
-                ></div>
-            </React.Fragment>
-        );
-    }
-
-    protected readonly toggleTimestamp = () => this.doToggleTimestamp();
-    protected async doToggleTimestamp(): Promise<void> {
-        this.model.toggleTimestamp();
-    }
-}

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

@@ -1,402 +0,0 @@
-import * as React from 'react';
-import * as dateFormat from 'dateformat';
-import { postConstruct, injectable, inject } from 'inversify';
-import { OptionsType } from 'react-select/src/types';
-import { isOSX } from '@theia/core/lib/common/os';
-import { Event, Emitter } from '@theia/core/lib/common/event';
-import { Key, KeyCode } from '@theia/core/lib/browser/keys';
-import {
-    DisposableCollection,
-    Disposable,
-} from '@theia/core/lib/common/disposable';
-import {
-    ReactWidget,
-    Message,
-    Widget,
-    MessageLoop,
-} from '@theia/core/lib/browser/widgets';
-import { Board, Port } from '../../common/protocol/boards-service';
-import { MonitorConfig } from '../../common/protocol/monitor-service';
-import { ArduinoSelect } from '../widgets/arduino-select';
-import { MonitorModel } from './monitor-model';
-import { MonitorConnection } from './monitor-connection';
-import { MonitorServiceClientImpl } from './monitor-service-client-impl';
-
-@injectable()
-export class MonitorWidget extends ReactWidget {
-    static readonly ID = 'serial-monitor';
-
-    @inject(MonitorModel)
-    protected readonly monitorModel: MonitorModel;
-
-    @inject(MonitorConnection)
-    protected readonly monitorConnection: MonitorConnection;
-
-    @inject(MonitorServiceClientImpl)
-    protected readonly monitorServiceClient: MonitorServiceClientImpl;
-
-    protected widgetHeight: number;
-
-    /**
-     * Do not touch or use it. It is for setting the focus on the `input` after the widget activation.
-     */
-    protected focusNode: HTMLElement | undefined;
-    /**
-     * Guard against re-rendering the view after the close was requested.
-     * See: https://github.com/eclipse-theia/theia/issues/6704
-     */
-    protected closing = false;
-    protected readonly clearOutputEmitter = new Emitter<void>();
-
-    constructor() {
-        super();
-        this.id = MonitorWidget.ID;
-        this.title.label = 'Serial Monitor';
-        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();
-                }
-            })
-        );
-    }
-
-    @postConstruct()
-    protected init(): void {
-        this.update();
-        this.toDispose.push(
-            this.monitorConnection.onConnectionChanged(() =>
-                this.clearConsole()
-            )
-        );
-    }
-
-    clearConsole(): void {
-        this.clearOutputEmitter.fire(undefined);
-        this.update();
-    }
-
-    dispose(): void {
-        super.dispose();
-    }
-
-    protected onAfterAttach(msg: Message): void {
-        super.onAfterAttach(msg);
-        this.monitorConnection.autoConnect = true;
-    }
-
-    onCloseRequest(msg: Message): void {
-        this.closing = true;
-        super.onCloseRequest(msg);
-    }
-
-    protected onUpdateRequest(msg: Message): void {
-        // TODO: `this.isAttached`
-        // See: https://github.com/eclipse-theia/theia/issues/6704#issuecomment-562574713
-        if (!this.closing && this.isAttached) {
-            super.onUpdateRequest(msg);
-        }
-    }
-
-    protected onResize(msg: Widget.ResizeMessage): void {
-        super.onResize(msg);
-        this.widgetHeight = msg.height;
-        this.update();
-    }
-
-    protected onActivateRequest(msg: Message): void {
-        super.onActivateRequest(msg);
-        (this.focusNode || this.node).focus();
-    }
-
-    protected onFocusResolved = (element: HTMLElement | undefined) => {
-        if (this.closing || !this.isAttached) {
-            return;
-        }
-        this.focusNode = element;
-        requestAnimationFrame(() =>
-            MessageLoop.sendMessage(this, Widget.Msg.ActivateRequest)
-        );
-    };
-
-    protected get lineEndings(): OptionsType<SelectOption<MonitorModel.EOL>> {
-        return [
-            {
-                label: 'No Line Ending',
-                value: '',
-            },
-            {
-                label: 'New Line',
-                value: '\n',
-            },
-            {
-                label: 'Carriage Return',
-                value: '\r',
-            },
-            {
-                label: 'Both NL & CR',
-                value: '\r\n',
-            },
-        ];
-    }
-
-    protected get baudRates(): OptionsType<
-        SelectOption<MonitorConfig.BaudRate>
-    > {
-        const baudRates: Array<MonitorConfig.BaudRate> = [
-            300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200,
-        ];
-        return baudRates.map((baudRate) => ({
-            label: baudRate + ' baud',
-            value: baudRate,
-        }));
-    }
-
-    protected render(): React.ReactNode {
-        const { baudRates, lineEndings } = this;
-        const lineEnding =
-            lineEndings.find(
-                (item) => item.value === this.monitorModel.lineEnding
-            ) || lineEndings[1]; // Defaults to `\n`.
-        const baudRate =
-            baudRates.find(
-                (item) => item.value === this.monitorModel.baudRate
-            ) || baudRates[4]; // Defaults to `9600`.
-        return (
-            <div className="serial-monitor">
-                <div className="head">
-                    <div className="send">
-                        <SerialMonitorSendInput
-                            monitorConfig={this.monitorConnection.monitorConfig}
-                            resolveFocus={this.onFocusResolved}
-                            onSend={this.onSend}
-                        />
-                    </div>
-                    <div className="config">
-                        <div className="select">
-                            <ArduinoSelect
-                                maxMenuHeight={this.widgetHeight - 40}
-                                options={lineEndings}
-                                defaultValue={lineEnding}
-                                onChange={this.onChangeLineEnding}
-                            />
-                        </div>
-                        <div className="select">
-                            <ArduinoSelect
-                                className="select"
-                                maxMenuHeight={this.widgetHeight - 40}
-                                options={baudRates}
-                                defaultValue={baudRate}
-                                onChange={this.onChangeBaudRate}
-                            />
-                        </div>
-                    </div>
-                </div>
-                <div className="body">
-                    <SerialMonitorOutput
-                        monitorModel={this.monitorModel}
-                        monitorConnection={this.monitorConnection}
-                        clearConsoleEvent={this.clearOutputEmitter.event}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    protected readonly onSend = (value: string) => this.doSend(value);
-    protected async doSend(value: string): Promise<void> {
-        this.monitorConnection.send(value);
-    }
-
-    protected readonly onChangeLineEnding = (
-        option: SelectOption<MonitorModel.EOL>
-    ) => {
-        this.monitorModel.lineEnding = option.value;
-    };
-
-    protected readonly onChangeBaudRate = (
-        option: SelectOption<MonitorConfig.BaudRate>
-    ) => {
-        this.monitorModel.baudRate = option.value;
-    };
-}
-
-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();
-            }
-        }
-    }
-}
-
-export namespace SerialMonitorOutput {
-    export interface Props {
-        readonly monitorModel: MonitorModel;
-        readonly monitorConnection: MonitorConnection;
-        readonly clearConsoleEvent: Event<void>;
-    }
-    export interface State {
-        content: string;
-        timestamp: boolean;
-    }
-}
-
-export class SerialMonitorOutput extends React.Component<
-    SerialMonitorOutput.Props,
-    SerialMonitorOutput.State
-> {
-    /**
-     * Do not touch it. It is used to be able to "follow" the serial monitor log.
-     */
-    protected anchor: HTMLElement | null;
-    protected toDisposeBeforeUnmount = new DisposableCollection();
-
-    constructor(props: Readonly<SerialMonitorOutput.Props>) {
-        super(props);
-        this.state = {
-            content: '',
-            timestamp: this.props.monitorModel.timestamp,
-        };
-    }
-
-    render(): React.ReactNode {
-        return (
-            <React.Fragment>
-                <div style={{ whiteSpace: 'pre', fontFamily: 'monospace' }}>
-                    {this.state.content}
-                </div>
-                <div
-                    style={{ float: 'left', clear: 'both' }}
-                    ref={(element) => {
-                        this.anchor = element;
-                    }}
-                />
-            </React.Fragment>
-        );
-    }
-
-    componentDidMount(): void {
-        this.scrollToBottom();
-        this.toDisposeBeforeUnmount.pushAll([
-            this.props.monitorConnection.onRead(({ message }) => {
-                const rawLines = message.split('\n');
-                const lines: string[] = [];
-                const timestamp = () =>
-                    this.state.timestamp
-                        ? `${dateFormat(new Date(), 'H:M:ss.l')} -> `
-                        : '';
-                for (let i = 0; i < rawLines.length; i++) {
-                    if (i === 0 && this.state.content.length !== 0) {
-                        lines.push(rawLines[i]);
-                    } else {
-                        lines.push(timestamp() + rawLines[i]);
-                    }
-                }
-                const content = this.state.content + lines.join('\n');
-                this.setState({ content });
-            }),
-            this.props.clearConsoleEvent(() => this.setState({ content: '' })),
-            this.props.monitorModel.onChange(({ property }) => {
-                if (property === 'timestamp') {
-                    const { timestamp } = this.props.monitorModel;
-                    this.setState({ timestamp });
-                }
-            }),
-        ]);
-    }
-
-    componentDidUpdate(): void {
-        this.scrollToBottom();
-    }
-
-    componentWillUnmount(): void {
-        // TODO: "Your preferred browser's local storage is almost full." Discard `content` before saving layout?
-        this.toDisposeBeforeUnmount.dispose();
-    }
-
-    protected scrollToBottom(): void {
-        if (this.props.monitorModel.autoscroll && this.anchor) {
-            this.anchor.scrollIntoView();
-        }
-    }
-}
-
-export interface SelectOption<T> {
-    readonly label: string;
-    readonly value: T;
-}

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

@@ -1,25 +1,29 @@
 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 {
-    ResponseService,
   OutputMessage,
   ProgressMessage,
+  ResponseServiceArduino,
 } from '../common/protocol/response-service';
 
 @injectable()
-export class ResponseServiceImpl implements ResponseService {
+export class ResponseServiceImpl implements ResponseServiceArduino {
   @inject(OutputContribution)
   protected outputContribution: OutputContribution;
 
   @inject(OutputChannelManager)
   protected outputChannelManager: OutputChannelManager;
 
-    protected readonly progressDidChangeEmitter =
-        new Emitter<ProgressMessage>();
+  protected readonly progressDidChangeEmitter = new Emitter<ProgressMessage>();
+
   readonly onProgressDidChange = this.progressDidChangeEmitter.event;
 
+  clearArduinoChannel(): void {
+    this.outputChannelManager.getChannel('Arduino').clear();
+  }
+
   appendToOutput(message: OutputMessage): void {
     const { chunk } = message;
     const channel = this.outputChannelManager.getChannel('Arduino');
@@ -27,10 +31,6 @@ export class ResponseServiceImpl implements ResponseService {
     channel.append(chunk);
   }
 
-    clearArduinoChannel(): void {
-        this.outputChannelManager.getChannel('Arduino').clear();
-    }
-
   reportProgress(progress: ProgressMessage): void {
     this.progressDidChangeEmitter.fire(progress);
   }

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

@@ -0,0 +1,69 @@
+import { Line, SerialMonitorOutput } from './serial-monitor-send-output';
+
+export function messagesToLines(
+  messages: string[],
+  prevLines: Line[] = [],
+  charCount = 0,
+  separator = '\n'
+): [Line[], number] {
+  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;
+    charCount += messageLen;
+    const lastLine = linesToAdd[linesToAdd.length - 1];
+
+    // if the previous messages ends with "separator" add a new line
+    if (lastLine.message.charAt(lastLine.message.length - 1) === separator) {
+      linesToAdd.push({
+        message,
+        timestamp: new Date(),
+        lineLen: messageLen,
+      });
+    } else {
+      // concatenate to the last line
+      linesToAdd[linesToAdd.length - 1].message += message;
+      linesToAdd[linesToAdd.length - 1].lineLen += messageLen;
+      if (!linesToAdd[linesToAdd.length - 1].timestamp) {
+        linesToAdd[linesToAdd.length - 1].timestamp = new Date();
+      }
+    }
+  }
+
+  prevLines.splice(prevLines.length - 1, 1, ...linesToAdd);
+  return [prevLines, charCount];
+}
+
+export function truncateLines(
+  lines: Line[],
+  charCount: number,
+  maxCharacters: number = SerialMonitorOutput.MAX_CHARACTERS
+): [Line[], number] {
+  let charsToDelete = charCount - maxCharacters;
+  let lineIndex = 0;
+  while (charsToDelete > 0 || lineIndex > 0) {
+    const firstLineLength = lines[lineIndex]?.lineLen;
+
+    if (charsToDelete >= firstLineLength) {
+      // every time a full line to delete is found, move the index.
+      lineIndex++;
+      charsToDelete -= firstLineLength;
+      charCount -= firstLineLength;
+      continue;
+    }
+
+    // delete all previous lines
+    lines.splice(0, lineIndex);
+    lineIndex = 0;
+
+    const newFirstLine = lines[0]?.message?.substring(charsToDelete);
+    const deletedCharsCount = firstLineLength - newFirstLine.length;
+    charCount -= deletedCharsCount;
+    charsToDelete -= deletedCharsCount;
+    lines[0].message = newFirstLine;
+  }
+  return [lines, charCount];
+}

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

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import { injectable, inject } from 'inversify';
+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 { 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.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'
+    );
+  }
+}
+
+@injectable()
+export class MonitorViewContribution
+  extends AbstractViewContribution<MonitorWidget>
+  implements TabBarToolbarContribution
+{
+  static readonly TOGGLE_SERIAL_MONITOR = MonitorWidget.ID + ':toggle';
+  static readonly TOGGLE_SERIAL_MONITOR_TOOLBAR =
+    MonitorWidget.ID + ':toggle-toolbar';
+
+  @inject(SerialModel) protected readonly model: SerialModel;
+
+  constructor() {
+    super({
+      widgetId: MonitorWidget.ID,
+      widgetName: MonitorWidget.LABEL,
+      defaultWidgetOptions: {
+        area: 'bottom',
+      },
+      toggleCommandId: MonitorViewContribution.TOGGLE_SERIAL_MONITOR,
+      toggleKeybinding: 'CtrlCmd+Shift+M',
+    });
+  }
+
+  registerMenus(menus: MenuModelRegistry): void {
+    if (this.toggleCommand) {
+      menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
+        commandId: this.toggleCommand.id,
+        label: MonitorWidget.LABEL,
+        order: '5',
+      });
+    }
+  }
+
+  registerToolbarItems(registry: TabBarToolbarRegistry): void {
+    registry.registerItem({
+      id: 'monitor-autoscroll',
+      render: () => this.renderAutoScrollButton(),
+      isVisible: (widget) => widget instanceof MonitorWidget,
+      onDidChange: this.model.onChange as any, // XXX: it's a hack. See: https://github.com/eclipse-theia/theia/pull/6696/
+    });
+    registry.registerItem({
+      id: 'monitor-timestamp',
+      render: () => this.renderTimestampButton(),
+      isVisible: (widget) => widget instanceof MonitorWidget,
+      onDidChange: this.model.onChange as any, // XXX: it's a hack. See: https://github.com/eclipse-theia/theia/pull/6696/
+    });
+    registry.registerItem({
+      id: SerialMonitor.Commands.CLEAR_OUTPUT.id,
+      command: SerialMonitor.Commands.CLEAR_OUTPUT.id,
+      tooltip: nls.localize(
+        'vscode/output.contribution/clearOutput.label',
+        'Clear Output'
+      ),
+    });
+  }
+
+  registerCommands(commands: CommandRegistry): void {
+    commands.registerCommand(SerialMonitor.Commands.CLEAR_OUTPUT, {
+      isEnabled: (widget) => widget instanceof MonitorWidget,
+      isVisible: (widget) => widget instanceof MonitorWidget,
+      execute: (widget) => {
+        if (widget instanceof MonitorWidget) {
+          widget.clearConsole();
+        }
+      },
+    });
+    if (this.toggleCommand) {
+      commands.registerCommand(this.toggleCommand, {
+        execute: () => this.toggle(),
+      });
+      commands.registerCommand(
+        { id: MonitorViewContribution.TOGGLE_SERIAL_MONITOR_TOOLBAR },
+        {
+          isVisible: (widget) =>
+            ArduinoToolbar.is(widget) && widget.side === 'right',
+          execute: () => this.toggle(),
+        }
+      );
+    }
+  }
+
+  protected async toggle(): Promise<void> {
+    const widget = this.tryGetWidget();
+    if (widget) {
+      widget.dispose();
+    } else {
+      await this.openView({ activate: true, reveal: true });
+    }
+  }
+
+  protected renderAutoScrollButton(): React.ReactNode {
+    return (
+      <React.Fragment key="autoscroll-toolbar-item">
+        <div
+          title={nls.localize(
+            'vscode/output.contribution/toggleAutoScroll',
+            'Toggle Autoscroll'
+          )}
+          className={`item enabled fa fa-angle-double-down arduino-monitor ${
+            this.model.autoscroll ? 'toggled' : ''
+          }`}
+          onClick={this.toggleAutoScroll}
+        ></div>
+      </React.Fragment>
+    );
+  }
+
+  protected readonly toggleAutoScroll = () => this.doToggleAutoScroll();
+  protected async doToggleAutoScroll(): Promise<void> {
+    this.model.toggleAutoscroll();
+  }
+
+  protected renderTimestampButton(): React.ReactNode {
+    return (
+      <React.Fragment key="line-ending-toolbar-item">
+        <div
+          title={nls.localize(
+            'arduino/serial/toggleTimestamp',
+            'Toggle Timestamp'
+          )}
+          className={`item enabled fa fa-clock-o arduino-monitor ${
+            this.model.timestamp ? 'toggled' : ''
+          }`}
+          onClick={this.toggleTimestamp}
+        ></div>
+      </React.Fragment>
+    );
+  }
+
+  protected readonly toggleTimestamp = () => this.doToggleTimestamp();
+  protected async doToggleTimestamp(): Promise<void> {
+    this.model.toggleTimestamp();
+  }
+}

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

@@ -0,0 +1,225 @@
+import * as React from 'react';
+import { postConstruct, injectable, inject } from 'inversify';
+import { OptionsType } from 'react-select/src/types';
+import { Emitter } from '@theia/core/lib/common/event';
+import { Disposable } from '@theia/core/lib/common/disposable';
+import {
+  ReactWidget,
+  Message,
+  Widget,
+  MessageLoop,
+} from '@theia/core/lib/browser/widgets';
+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(SerialModel)
+  protected readonly serialModel: SerialModel;
+
+  @inject(SerialConnectionManager)
+  protected readonly serialConnection: SerialConnectionManager;
+
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceProvider: BoardsServiceProvider;
+
+  protected widgetHeight: number;
+
+  /**
+   * Do not touch or use it. It is for setting the focus on the `input` after the widget activation.
+   */
+  protected focusNode: HTMLElement | undefined;
+  /**
+   * Guard against re-rendering the view after the close was requested.
+   * See: https://github.com/eclipse-theia/theia/issues/6704
+   */
+  protected closing = false;
+  protected readonly clearOutputEmitter = new Emitter<void>();
+
+  constructor() {
+    super();
+    this.id = MonitorWidget.ID;
+    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.serialConnection.closeWStoBE())
+    );
+  }
+
+  @postConstruct()
+  protected init(): void {
+    this.update();
+    this.toDispose.push(
+      this.serialConnection.onConnectionChanged(() => this.clearConsole())
+    );
+    this.toDispose.push(this.serialModel.onChange(() => this.update()));
+  }
+
+  clearConsole(): void {
+    this.clearOutputEmitter.fire(undefined);
+    this.update();
+  }
+
+  dispose(): void {
+    super.dispose();
+  }
+
+  protected onAfterAttach(msg: Message): void {
+    super.onAfterAttach(msg);
+    this.serialConnection.openWSToBE();
+  }
+
+  onCloseRequest(msg: Message): void {
+    this.closing = true;
+    super.onCloseRequest(msg);
+  }
+
+  protected onUpdateRequest(msg: Message): void {
+    // TODO: `this.isAttached`
+    // See: https://github.com/eclipse-theia/theia/issues/6704#issuecomment-562574713
+    if (!this.closing && this.isAttached) {
+      super.onUpdateRequest(msg);
+    }
+  }
+
+  protected onResize(msg: Widget.ResizeMessage): void {
+    super.onResize(msg);
+    this.widgetHeight = msg.height;
+    this.update();
+  }
+
+  protected onActivateRequest(msg: Message): void {
+    super.onActivateRequest(msg);
+    (this.focusNode || this.node).focus();
+  }
+
+  protected onFocusResolved = (element: HTMLElement | undefined) => {
+    if (this.closing || !this.isAttached) {
+      return;
+    }
+    this.focusNode = element;
+    requestAnimationFrame(() =>
+      MessageLoop.sendMessage(this, Widget.Msg.ActivateRequest)
+    );
+  };
+
+  protected get lineEndings(): OptionsType<
+    SerialMonitorOutput.SelectOption<SerialModel.EOL>
+  > {
+    return [
+      {
+        label: nls.localize('arduino/serial/noLineEndings', 'No Line Ending'),
+        value: '',
+      },
+      {
+        label: nls.localize('arduino/serial/newLine', 'New Line'),
+        value: '\n',
+      },
+      {
+        label: nls.localize('arduino/serial/carriageReturn', 'Carriage Return'),
+        value: '\r',
+      },
+      {
+        label: nls.localize(
+          'arduino/serial/newLineCarriageReturn',
+          'Both NL & CR'
+        ),
+        value: '\r\n',
+      },
+    ];
+  }
+
+  protected get baudRates(): OptionsType<
+    SerialMonitorOutput.SelectOption<SerialConfig.BaudRate>
+  > {
+    const baudRates: Array<SerialConfig.BaudRate> = [
+      300, 1200, 2400, 4800, 9600, 19200, 38400, 57600, 115200,
+    ];
+    return baudRates.map((baudRate) => ({
+      label: baudRate + ' baud',
+      value: baudRate,
+    }));
+  }
+
+  protected render(): React.ReactNode {
+    const { baudRates, lineEndings } = this;
+    const lineEnding =
+      lineEndings.find((item) => item.value === this.serialModel.lineEnding) ||
+      lineEndings[1]; // Defaults to `\n`.
+    const 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
+              serialConnection={this.serialConnection}
+              resolveFocus={this.onFocusResolved}
+              onSend={this.onSend}
+            />
+          </div>
+          <div className="config">
+            <div className="select">
+              <ArduinoSelect
+                maxMenuHeight={this.widgetHeight - 40}
+                options={lineEndings}
+                value={lineEnding}
+                onChange={this.onChangeLineEnding}
+              />
+            </div>
+            <div className="select">
+              <ArduinoSelect
+                className="select"
+                maxMenuHeight={this.widgetHeight - 40}
+                options={baudRates}
+                value={baudRate}
+                onChange={this.onChangeBaudRate}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="body">
+          <SerialMonitorOutput
+            serialModel={this.serialModel}
+            serialConnection={this.serialConnection}
+            clearConsoleEvent={this.clearOutputEmitter.event}
+            height={Math.floor(this.widgetHeight - 50)}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  protected readonly onSend = (value: string) => this.doSend(value);
+  protected async doSend(value: string): Promise<void> {
+    this.serialConnection.send(value);
+  }
+
+  protected readonly onChangeLineEnding = (
+    option: SerialMonitorOutput.SelectOption<SerialModel.EOL>
+  ) => {
+    this.serialModel.lineEnding = option.value;
+  };
+
+  protected readonly onChangeBaudRate = (
+    option: SerialMonitorOutput.SelectOption<SerialConfig.BaudRate>
+  ) => {
+    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, Port } 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.toString(port) : '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

@@ -0,0 +1,146 @@
+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 { SerialModel } from '../serial-model';
+import { SerialConnectionManager } from '../serial-connection-manager';
+import dateFormat = require('dateformat');
+import { messagesToLines, truncateLines } from './monitor-utils';
+
+export type Line = { message: string; timestamp?: Date; lineLen: number };
+
+export class SerialMonitorOutput extends React.Component<
+  SerialMonitorOutput.Props,
+  SerialMonitorOutput.State
+> {
+  /**
+   * Do not touch it. It is used to be able to "follow" the serial monitor log.
+   */
+  protected toDisposeBeforeUnmount = new DisposableCollection();
+  private listRef: React.RefObject<any>;
+
+  constructor(props: Readonly<SerialMonitorOutput.Props>) {
+    super(props);
+    this.listRef = React.createRef();
+    this.state = {
+      lines: [],
+      timestamp: this.props.serialModel.timestamp,
+      charCount: 0,
+    };
+  }
+
+  render(): React.ReactNode {
+    return (
+      <List
+        className="serial-monitor-messages"
+        height={this.props.height}
+        itemData={
+          {
+            lines: this.state.lines,
+            timestamp: this.state.timestamp,
+          } as any
+        }
+        itemCount={this.state.lines.length}
+        itemSize={18}
+        width={'100%'}
+        ref={this.listRef}
+      >
+        {Row}
+      </List>
+    );
+  }
+
+  shouldComponentUpdate(): boolean {
+    return true;
+  }
+
+  componentDidMount(): void {
+    this.scrollToBottom();
+    this.toDisposeBeforeUnmount.pushAll([
+      this.props.serialConnection.onRead(({ messages }) => {
+        const [newLines, totalCharCount] = messagesToLines(
+          messages,
+          this.state.lines,
+          this.state.charCount
+        );
+        const [lines, charCount] = truncateLines(newLines, totalCharCount);
+
+        this.setState({
+          lines,
+          charCount,
+        });
+        this.scrollToBottom();
+      }),
+      this.props.clearConsoleEvent(() =>
+        this.setState({ lines: [], charCount: 0 })
+      ),
+      this.props.serialModel.onChange(({ property }) => {
+        if (property === 'timestamp') {
+          const { timestamp } = this.props.serialModel;
+          this.setState({ timestamp });
+        }
+        if (property === 'autoscroll') {
+          this.scrollToBottom();
+        }
+      }),
+    ]);
+  }
+
+  componentWillUnmount(): void {
+    // TODO: "Your preferred browser's local storage is almost full." Discard `content` before saving layout?
+    this.toDisposeBeforeUnmount.dispose();
+  }
+
+  scrollToBottom = ((): void => {
+    if (this.listRef.current && this.props.serialModel.autoscroll) {
+      this.listRef.current.scrollToItem(this.state.lines.length, 'end');
+    }
+  }).bind(this);
+}
+
+const _Row = ({
+  index,
+  style,
+  data,
+}: {
+  index: number;
+  style: any;
+  data: { lines: Line[]; timestamp: boolean };
+}) => {
+  const timestamp =
+    (data.timestamp &&
+      `${dateFormat(data.lines[index].timestamp, 'H:M:ss.l')} -> `) ||
+    '';
+  return (
+    (data.lines[index].lineLen && (
+      <div style={style}>
+        {timestamp}
+        {data.lines[index].message}
+      </div>
+    )) ||
+    null
+  );
+};
+const Row = React.memo(_Row, areEqual);
+
+export namespace SerialMonitorOutput {
+  export interface Props {
+    readonly serialModel: SerialModel;
+    readonly serialConnection: SerialConnectionManager;
+    readonly clearConsoleEvent: Event<void>;
+    readonly height: number;
+  }
+
+  export interface State {
+    lines: Line[];
+    timestamp: boolean;
+    charCount: number;
+  }
+
+  export interface SelectOption<T> {
+    readonly label: string;
+    readonly value: T;
+  }
+
+  export const MAX_CHARACTERS = 1_000_000;
+}

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/core/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');
+  }
+}