Update version to 2.0.0-rc1

* Update Theia to 1.19.0

* update CLI to 0.20.0-rc3

* Add language selector to settings

* updated language server and vscode-arduino-tools

* update Language Server flags

* get cli port from config

* force native menu on windows

* pinned Language Server to rc2

* fix search icon

* update CLI version

.eslintrc.js

@@ -0,0 +1,65 @@
+module.exports = {
+    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: 'module', // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true, // Allows for the parsing of JSX
+        },
+    },
+    ignorePatterns: [
+        'node_modules/*',
+        '**/node_modules/*',
+        '.node_modules/*',
+        '.github/*',
+        '.browser_modules/*',
+        'docs/*',
+        'scripts/*',
+        'electron/*',
+        'electron-app/*',
+        'browser-app/*',
+        'plugins/*',
+        'arduino-ide-extension/src/node/cli-protocol',
+    ],
+    settings: {
+        react: {
+            version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
+        },
+    },
+    extends: [
+        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+        'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
+        'plugin:react-hooks/recommended', // Uses recommended rules from react hooks
+        'plugin:prettier/recommended',
+        'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    ],
+    plugins: ['prettier', 'unused-imports'],
+    rules: {
+        '@typescript-eslint/no-unused-expressions': 'off',
+        '@typescript-eslint/no-namespace': 'off',
+        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-empty-function': 'warn',
+        '@typescript-eslint/no-empty-interface': 'warn',
+        'no-unused-vars': 'off',
+        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-vars': [
+            'warn',
+            {
+                vars: 'all',
+                varsIgnorePattern: '^_',
+                args: 'after-used',
+                argsIgnorePattern: '^_',
+            },
+        ],
+        'react/display-name': 'warn',
+        eqeqeq: ['error', 'smart'],
+        'guard-for-in': 'off',
+        'id-blacklist': 'off',
+        'id-match': 'off',
+        'no-underscore-dangle': 'off',
+        'no-unused-expressions': 'off',
+        'no-var': 'error',
+        radix: 'error',
+        'prettier/prettier': 'warn',
+    },
+};

.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

@@ -13,14 +13,18 @@ on:
   schedule:
     - cron: '0 3 * * *' # run every day at 3AM (https://docs.github.com/en/actions/reference/events-that-trigger-workflows#scheduled-events-schedule)
 
+env:
+  JOB_TRANSFER_ARTIFACT: build-artifacts
+
 jobs:
 
   build:
+    if: github.repository == 'arduino/arduino-ide'
     strategy:
       matrix:
         config:
           - os: windows-latest
-          - os: ubuntu-latest
+          - os: ubuntu-18.04 # https://github.com/arduino/arduino-ide/issues/259
           - os: macos-latest
     runs-on: ${{ matrix.config.os }}
     timeout-minutes: 90
@@ -50,21 +54,27 @@ jobs:
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           IS_NIGHTLY: ${{ github.event_name == 'schedule' || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main') }}
           IS_RELEASE: ${{ startsWith(github.ref, 'refs/tags/') }}
+          IS_FORK: ${{ github.event.pull_request.head.repo.fork == true }}
         run: |
             # See: https://www.electron.build/code-signing
-            if [ "${{ runner.OS }}" = "macOS" ]; then
-              export CSC_LINK="${{ runner.temp }}/signing_certificate.p12"
-              # APPLE_SIGNING_CERTIFICATE_P12 secret was produced by following the procedure from:
-              # https://www.kencochrane.com/2020/08/01/build-and-sign-golang-binaries-for-macos-with-github-actions/#exporting-the-developer-certificate
-              echo "${{ secrets.APPLE_SIGNING_CERTIFICATE_P12 }}" | base64 --decode > "$CSC_LINK"
+            if [ $IS_FORK = true ]; then
+              echo "Skipping the app signing: building from a fork."
+            else
+              if [ "${{ runner.OS }}" = "macOS" ]; then
+                export CSC_LINK="${{ runner.temp }}/signing_certificate.p12"
+                # APPLE_SIGNING_CERTIFICATE_P12 secret was produced by following the procedure from:
+                # https://www.kencochrane.com/2020/08/01/build-and-sign-golang-binaries-for-macos-with-github-actions/#exporting-the-developer-certificate
+                echo "${{ secrets.APPLE_SIGNING_CERTIFICATE_P12 }}" | base64 --decode > "$CSC_LINK"
 
-              export CSC_KEY_PASSWORD="${{ secrets.KEYCHAIN_PASSWORD }}"
+                export CSC_KEY_PASSWORD="${{ secrets.KEYCHAIN_PASSWORD }}"
 
-            elif [ "${{ runner.OS }}" = "Windows" ]; then
-              export CSC_LINK="${{ runner.temp }}/signing_certificate.pfx"
-              echo "${{ secrets.WINDOWS_SIGNING_CERTIFICATE_PFX }}" | base64 --decode > "$CSC_LINK"
+              elif [ "${{ runner.OS }}" = "Windows" ]; then
+                export CSC_LINK="${{ runner.temp }}/signing_certificate.pfx"
+                npm config set msvs_version 2017 --global
+                echo "${{ secrets.WINDOWS_SIGNING_CERTIFICATE_PFX }}" | base64 --decode > "$CSC_LINK"
 
-              export CSC_KEY_PASSWORD="${{ secrets.WINDOWS_SIGNING_CERTIFICATE_PASSWORD }}"
+                export CSC_KEY_PASSWORD="${{ secrets.WINDOWS_SIGNING_CERTIFICATE_PASSWORD }}"
+              fi
             fi
 
             yarn --cwd ./electron/packager/
@@ -73,9 +83,42 @@ jobs:
       - name: Upload [GitHub Actions]
         uses: actions/upload-artifact@v2
         with:
-          name: build-artifacts
+          name: ${{ env.JOB_TRANSFER_ARTIFACT }}
           path: electron/build/dist/build-artifacts/
 
+  artifacts:
+    name: ${{ matrix.artifact.name }} artifact
+    needs: build
+    if: always() && needs.build.result != 'skipped'
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        artifact:
+          - path: "*Linux_64bit.zip"
+            name: Linux_X86-64
+          - path: "*macOS_64bit.dmg"
+            name: macOS
+          - path: "*Windows_64bit.exe"
+            name: Windows_X86-64_interactive_installer
+          - path: "*Windows_64bit.msi"
+            name: Windows_X86-64_MSI
+          - path: "*Windows_64bit.zip"
+            name: Windows_X86-64_zip
+
+    steps:
+      - name: Download job transfer artifact
+        uses: actions/download-artifact@v2
+        with:
+          name: ${{ env.JOB_TRANSFER_ARTIFACT }}
+          path: ${{ env.JOB_TRANSFER_ARTIFACT }}
+      
+      - name: Upload tester build artifact
+        uses: actions/upload-artifact@v2
+        with:
+          name: ${{ matrix.artifact.name }}
+          path: ${{ env.JOB_TRANSFER_ARTIFACT }}/${{ matrix.artifact.path }}
+
   changelog:
     needs: build
     runs-on: ubuntu-latest
@@ -115,25 +158,25 @@ jobs:
         if: github.event_name == 'schedule' || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main')
         uses: actions/upload-artifact@v2
         with:
-          name: build-artifacts
+          name: ${{ env.JOB_TRANSFER_ARTIFACT }}
           path: CHANGELOG.txt
 
   publish:
     needs: changelog
-    if: github.event_name == 'schedule' || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main')
+    if: github.repository == 'arduino/arduino-ide' && (github.event_name == 'schedule' || (github.event_name == 'workflow_dispatch' && github.ref == 'refs/heads/main'))
     runs-on: ubuntu-latest
     steps:
       - name: Download [GitHub Actions]
         uses: actions/download-artifact@v2
         with:
-          name: build-artifacts
-          path: build-artifacts
+          name: ${{ env.JOB_TRANSFER_ARTIFACT }}
+          path: ${{ env.JOB_TRANSFER_ARTIFACT }}
 
       - name: Publish Nightly [S3]
         uses: docker://plugins/s3
         env:
-          PLUGIN_SOURCE: "build-artifacts/*"
-          PLUGIN_STRIP_PREFIX: "build-artifacts/"
+          PLUGIN_SOURCE: "${{ env.JOB_TRANSFER_ARTIFACT }}/*"
+          PLUGIN_STRIP_PREFIX: "${{ env.JOB_TRANSFER_ARTIFACT }}/"
           PLUGIN_TARGET: "/arduino-ide/nightly"
           PLUGIN_BUCKET: ${{ secrets.DOWNLOADS_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -141,14 +184,14 @@ jobs:
 
   release:
     needs: changelog
-    if: startsWith(github.ref, 'refs/tags/')
+    if: github.repository == 'arduino/arduino-ide' && startsWith(github.ref, 'refs/tags/')
     runs-on: ubuntu-latest
     steps:
       - name: Download [GitHub Actions]
         uses: actions/download-artifact@v2
         with:
-          name: build-artifacts
-          path: build-artifacts
+          name: ${{ env.JOB_TRANSFER_ARTIFACT }}
+          path: ${{ env.JOB_TRANSFER_ARTIFACT }}
 
       - name: Get Tag
         id: tag_name
@@ -160,7 +203,7 @@ jobs:
         with:
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           release_name: ${{ steps.tag_name.outputs.TAG_NAME }}
-          file: build-artifacts/*
+          file: ${{ env.JOB_TRANSFER_ARTIFACT }}/*
           tag: ${{ github.ref }}
           file_glob: true
           body: ${{ needs.changelog.outputs.BODY }}
@@ -168,9 +211,25 @@ jobs:
       - name: Publish Release [S3]
         uses: docker://plugins/s3
         env:
-          PLUGIN_SOURCE: "build-artifacts/*"
-          PLUGIN_STRIP_PREFIX: "build-artifacts/"
+          PLUGIN_SOURCE: "${{ env.JOB_TRANSFER_ARTIFACT }}/*"
+          PLUGIN_STRIP_PREFIX: "${{ env.JOB_TRANSFER_ARTIFACT }}/"
           PLUGIN_TARGET: "/arduino-ide"
           PLUGIN_BUCKET: ${{ secrets.DOWNLOADS_BUCKET }}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+  clean:
+    # This job must run after all jobs that use the transfer artifact.
+    needs:
+      - build
+      - publish
+      - release
+      - artifacts
+    if: always() && needs.build.result != 'skipped'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Remove unneeded job transfer artifact
+        uses: geekyeggo/delete-artifact@v1
+        with:
+          name: ${{ env.JOB_TRANSFER_ARTIFACT }}

.github/workflows/check-certificates.yml

@@ -1,30 +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
@@ -32,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
@@ -54,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:
@@ -94,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"
 
@@ -109,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

@@ -0,0 +1,6 @@
+{
+	"singleQuote": true,
+	"tabWidth": 2,
+	"useTabs": false,
+	"printWidth": 80
+}

.vscode/launch.json

@@ -1,22 +1,6 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
-    {
-      "type": "node",
-      "request": "attach",
-      "name": "Attach by Process ID",
-      "processId": "${command:PickProcess}"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Electron Packager",
-      "program": "${workspaceRoot}/electron/packager/index.js",
-      "cwd": "${workspaceFolder}/electron/packager"
-    },
     {
       "type": "node",
       "request": "launch",
@@ -29,15 +13,18 @@
           "NODE_PRESERVE_SYMLINKS": "1"
         }
       },
-      "program": "${workspaceRoot}/electron-app/src-gen/frontend/electron-main.js",
+      "cwd": "${workspaceFolder}/electron-app",
       "protocol": "inspector",
       "args": [
+        ".",
         "--log-level=debug",
         "--hostname=localhost",
         "--no-cluster",
+        "--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"
@@ -47,7 +34,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",
@@ -93,6 +81,8 @@
       "args": [
         "--require",
         "reflect-metadata/Reflect",
+        "--require",
+        "ignore-styles",
         "--no-timeouts",
         "--colors",
         "**/${fileBasenameNoExtension}.js"
@@ -104,6 +94,19 @@
       "smartStep": true,
       "internalConsoleOptions": "openOnSessionStart",
       "outputCapture": "std"
+    },
+    {
+      "type": "node",
+      "request": "attach",
+      "name": "Attach by Process ID",
+      "processId": "${command:PickProcess}"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Electron Packager",
+      "program": "${workspaceRoot}/electron/packager/index.js",
+      "cwd": "${workspaceFolder}/electron/packager"
     }
   ]
 }

.vscode/settings.json

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

.vscode/tasks.json

@@ -1,6 +1,4 @@
 {
-  // See https://go.microsoft.com/fwlink/?LinkId=733558
-  // for the documentation about the tasks.json format
   "version": "2.0.0",
   "tasks": [
     {
@@ -35,7 +33,7 @@
         "panel": "new",
         "clear": false
       }
-    }
+    },
     {
       "label": "Arduino IDE - Watch Browser App",
       "type": "shell",

BUILDING.md

@@ -0,0 +1,136 @@
+# Development
+
+This page includes technical documentation for developers who want to build the IDE locally and contribute to the project.
+
+## Architecture overview
+
+The IDE consists of three major parts:
+ - the _Electron main_ process,
+ - the _backend_, and 
+ - the _frontend_.
+
+The _Electron main_ process is responsible for:
+ - creating the application,
+ - managing the application lifecycle via listeners, and
+ - creating and managing the web pages for the app.
+
+In Electron, the process that runs the main entry JavaScript file is called the main process. The _Electron main_ process can display a GUI by creating web pages. An Electron app always has exactly 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>
+
+In normal browsers, web pages usually run in a sandboxed environment, and accessing native resources are disallowed. However, Electron has the power to use Node.js APIs in the web pages allowing lower-level OS interactions. Due to security reasons, accessing native resources is an undesired behavior in the IDE. So by convention, we do not use Node.js APIs. (Note: the Node.js integration is [not yet disabled](https://github.com/eclipse-theia/theia/issues/2018) although it is not used). In the IDE, only the _backend_ allows OS interaction.
+
+The _backend_ process is responsible for:
+ - providing access to the filesystem,
+ - communicating with the [Arduino CLI](https://github.com/arduino/arduino-cli) via gRPC,
+ - running your terminal,
+ - exposing additional RESTful APIs,
+ - performing the Git commands in the local repositories,
+ - hosting and running any VS Code extensions, or
+ - executing VS Code tasks<sup>[[2]]</sup>.
+
+The _Electron main_ process spawns the _backend_ process. There is always exactly one _backend_ process. However, due to performance considerations, the _backend_ spawns several sub-processes for the filesystem watching, Git repository discovery, etc. The communication between the _backend_ process and its sub-processes is established via IPC. Besides spawning sub-processes, the _backend_ will start an HTTP server on a random available port, and serves the web application as static content. When the sub-processes are up and running, and the HTTP server is also listening, the _backend_ process sends the HTTP server port to the _Electron main_ process via IPC. The _Electron main_ process will load the _backend_'s endpoint in the `BrowserWindow`.
+
+The _frontend_ is running as an Electron renderer process and can invoke services implemented on the _backend_. The communication between the _backend_ and the _frontend_ is done via JSON-RPC over a websocket connection. This means, the services running in the _frontend_ are all proxies, and will ask the corresponding service implementation on the _backend_.
+
+[1]: https://www.electronjs.org/docs/tutorial/application-architecture#differences-between-main-process-and-renderer-process
+[2]: https://code.visualstudio.com/Docs/editor/tasks
+
+
+## Build from source
+
+If you’re familiar with TypeScript, the [Theia IDE](https://theia-ide.org/), and if you want to contribute to the
+project, you should be able to build the Arduino IDE locally. Please refer to the [Theia IDE prerequisites](https://github.com/theia-ide/theia/blob/master/doc/) documentation for the setup instructions.
+
+### Build
+```sh
+yarn
+```
+
+### Rebuild the native dependencies
+```sh
+yarn rebuild:electron
+```
+
+### Start
+```sh
+yarn start
+```
+
+### CI
+
+This project is built on [GitHub Actions](https://github.com/arduino/arduino-ide/actions).
+
+ - _Snapshot_ builds run when changes are pushed to the `main` branch, or when a PR is created against the `main` branch. For the sake of the review and verification process, the build artifacts for each operating system can be downloaded from the GitHub Actions page.
+ - _Nightly_ builds run every day at 03:00 GMT from the `main` branch.
+ - _Release_ builds run when a new tag is pushed to the remote. The tag must follow the [semver](https://semver.org/). For instance, `1.2.3` is a correct tag, but `v2.3.4` won't work. Steps to trigger a new release build:
+   - Create a local tag:
+    ```sh
+    git tag -a 1.2.3 -m "Creating a new tag for the `1.2.3` release."
+    ```
+   - Push it to the remote:
+   ```sh
+    git push origin 1.2.3
+   ```
+
+## Notes for macOS contributors
+Beginning in macOS 10.14.5, the software [must be notarized to run](https://developer.apple.com/documentation/xcode/notarizing_macos_software_before_distribution). The signing and notarization processes for the Arduino IDE are managed by our Continuous Integration (CI) workflows, implemented with GitHub Actions. On every push and pull request, the Arduino IDE is built and saved to a workflow artifact. These artifacts can be used by contributors and beta testers who don't want to set up a build system locally.
+For security reasons, signing and notarization are disabled for workflow runs for pull requests from forks of this repository. This means that macOS will block you from running those artifacts.
+Due to this limitation, Mac users have two options for testing contributions from forks:
+
+### The Safe approach (recommended)
+
+Follow [the instructions above](#build-from-source) to create the build environment locally, then build the code you want to test.
+
+### The Risky approach
+
+*Please note that this approach is risky as you are lowering the security on your system, therefore we strongly discourage you from following it.*
+1. Use [this guide](https://help.apple.com/xcode/mac/10.2/index.html?localePath=en.lproj#/dev9b7736b0e), in order to disable Gatekeeper (at your own risk!).
+1. Download the unsigned artifact provided by the CI workflow run related to the Pull Request at each push.
+1. Re-enable Gatekeeper after tests are done, following the guide linked above.
+
+### Creating a release
+
+You will not need to create a new release yourself as the Arduino team takes care of this on a regular basis, but we are documenting the process here. Let's assume the current version is `0.1.3` and you want to release `0.2.0`.
+
+ - Make sure the `main` state represents what you want to release and you're on `main`.
+ - Prepare a release-candidate build on a branch:
+```bash
+git branch 0.2.0-rc \
+&& git checkout 0.2.0-rc
+```
+ - Bump up the version number. It must be a valid [semver](https://semver.org/) and must be greater than the current one:
+```bash
+yarn update:version 0.2.0
+```
+ - This should generate multiple outgoing changes with the version update.
+ - Commit your changes and push to the remote:
+```bash
+git add . \
+&& git commit -s -m "Updated versions to 0.2.0" \
+&& git push
+```
+ - Create the GH PR the workflow starts automatically.
+ - Once you're happy with the RC, merge the changes to the `main`.
+ - Create a tag and push it:
+```bash
+git tag -a 0.2.0 -m "0.2.0" \
+&& git push origin 0.2.0
+```
+ - The release build starts automatically and uploads the artifacts with the changelog to the  [release page](https://github.com/arduino/arduino-ide/releases).
+ - If you do not want to release the `EXE` and `MSI` installers, wipe them manually.
+ - If you do not like the generated changelog, modify it and update the GH release.
+
+## FAQ
+
+* *Can I manually change the version of the [`arduino-cli`](https://github.com/arduino/arduino-cli/) used by the IDE?*
+
+    Yes. It is possible but not recommended. The CLI exposes a set of functionality via [gRPC](https://github.com/arduino/arduino-cli/tree/master/rpc) and the IDE uses this API to communicate with the CLI. Before we build a new version of IDE, we pin a specific version of CLI and use the corresponding `proto` files to generate TypeScript modules for gRPC. This means, a particular version of IDE is compliant only with the pinned version of CLI. Mismatching IDE and CLI versions might not be able to communicate with each other. This could cause unpredictable IDE behavior.
+
+* *I have understood that not all versions of the CLI are compatible with my version of IDE but how can I manually update the `arduino-cli` inside the IDE?*
+
+    [Get](https://arduino.github.io/arduino-cli/installation) the desired version of `arduino-cli` for your platform and manually replace the one inside the IDE. The CLI can be found inside the IDE at:
+    - Windows: `C:\path\to\Arduino IDE\resources\app\node_modules\arduino-ide-extension\build\arduino-cli.exe`,
+    - macOS: `/path/to/Arduino IDE.app/Contents/Resources/app/node_modules/arduino-ide-extension/build/arduino-cli`, and
+    - Linux: `/path/to/Arduino IDE/resources/app/node_modules/arduino-ide-extension/build/arduino-cli`.
+

Dockerfile

@@ -1,19 +0,0 @@
-FROM gitpod/workspace-full-vnc
-
-USER root
-RUN apt-get update -q --fix-missing && \
-    apt-get install -y -q software-properties-common && \
-    apt-get install -y -q --no-install-recommends \
-    build-essential \
-    libssl-dev \
-    golang-go \
-    libxkbfile-dev \
-    libnss3-dev
-
-RUN set -ex && \
-    tmpdir=$(mktemp -d) && \
-    curl -L -o $tmpdir/protoc.zip https://github.com/protocolbuffers/protobuf/releases/download/v3.6.1/protoc-3.6.1-linux-x86_64.zip && \
-    mkdir -p /usr/lib/protoc && cd /usr/lib/protoc && unzip $tmpdir/protoc.zip && \
-    chmod -R 755 /usr/lib/protoc/include/google && \
-    ln -s /usr/lib/protoc/bin/* /usr/bin && \
-    rm $tmpdir/protoc.zip

README.md

@@ -1,36 +1,24 @@
-# Arduino IDE
+<img src="https://content.arduino.cc/website/Arduino_logo_teal.svg" height="100" align="right" />
+
+# Arduino IDE 2.x (beta)
 
 [![Arduino IDE](https://github.com/arduino/arduino-ide/workflows/Arduino%20IDE/badge.svg)](https://github.com/arduino/arduino-ide/actions?query=workflow%3A%22Arduino+IDE%22)
 
-### Download
+This repository contains the source code of the Arduino IDE 2.x, which is currently in beta stage. If you're looking for the stable IDE, go to the repository of the 1.x version at https://github.com/arduino/Arduino.
 
-You can download the latest version of the Arduino IDE application for the supported platforms from the [GitHub release page](https://github.com/arduino/arduino-ide/releases) or following the links in the following table.
+The Arduino IDE 2.x is a major rewrite, sharing no code with the IDE 1.x. It is based on the [Theia IDE](https://theia-ide.org/) framework and built with [Electron](https://www.electronjs.org/). The backend operations such as compilation and uploading are offloaded to an [arduino-cli](https://github.com/arduino/arduino-cli) instance running in daemon mode. This new IDE was developed with the goal of preserving the same interface and user experience of the previous major version in order to provide a frictionless upgrade.
 
-#### Latest version
+> ⚠️ This is **beta** software. Help us test it!
 
-Platform  | 32 bit                   | 64 bit                                                                         |
---------- | ------------------------ | ------------------------------------------------------------------------------ |
-Linux     |                          | [Linux 64 bit]                                                                 |
-Linux ARM | [🚧 Work in progress...] | [🚧 Work in progress...]                                                      |
-Windows   |                          | [Windows 64 bit installer]<br />[Windows 64 bit MSI]<br />[Windows 64 bit ZIP] |
-macOS     |                          | [macOS 64 bit]                                                                 |
+![](static/screenshot.png)
 
-[🚧 Work in progress...]: https://github.com/arduino/arduino-ide/issues/287
-[Linux 64 bit]: https://downloads.arduino.cc/arduino-ide/arduino-ide_latest_Linux_64bit.zip
-[Windows 64 bit installer]: https://downloads.arduino.cc/arduino-ide/arduino-ide_latest_Windows_64bit.exe
-[Windows 64 bit MSI]: https://downloads.arduino.cc/arduino-ide/arduino-ide_latest_Windows_64bit.msi
-[Windows 64 bit ZIP]: https://downloads.arduino.cc/arduino-ide/arduino-ide_latest_Windows_64bit.zip
-[macOS 64 bit]: https://downloads.arduino.cc/arduino-ide/arduino-ide_latest_macOS_64bit.dmg
+## Download
 
-#### Previous versions
-
-These are available from the [GitHub releases page](https://github.com/arduino/arduino-ide/releases).
-
-#### Nightly builds
+You can download the latest version from the [software download page on the Arduino website](https://www.arduino.cc/en/software#experimental-software).
+### Nightly builds
 
 These builds are generated every day at 03:00 GMT from the `main` branch and
-should be considered unstable. In order to get the latest nightly build
-available for the supported platform, use the following links:
+should be considered unstable:
 
 Platform  | 32 bit                   | 64 bit                                                                                                 |
 --------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
@@ -39,7 +27,7 @@ Linux ARM | [🚧 Work in progress...] | [🚧 Work in progress...]
 Windows   |                          | [Nightly Windows 64 bit installer]<br />[Nightly Windows 64 bit MSI]<br />[Nightly Windows 64 bit ZIP] |
 macOS     |                          | [Nightly macOS 64 bit]                                                                                 |
 
-[🚧 Work in progress...]: https://github.com/arduino/arduino-ide/issues/287
+[🚧 Work in progress...]: https://github.com/arduino/arduino-ide/issues/107
 [Nightly Linux 64 bit]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Linux_64bit.zip
 [Nightly Windows 64 bit installer]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Windows_64bit.exe
 [Nightly Windows 64 bit MSI]: https://downloads.arduino.cc/arduino-ide/nightly/arduino-ide_nightly-latest_Windows_64bit.msi
@@ -49,117 +37,41 @@ macOS     |                          | [Nightly macOS 64 bit]
 > These links return an HTTP `302: Found` response, redirecting to latest
   generated builds by replacing `latest` with the latest available build
   date, using the format YYYYMMDD (i.e for 2019/Aug/06 `latest` is
-  replaced with `20190806` )
+  replaced with `20190806`)
 
-### Build from source
+## Support
 
-If you’re familiar with TypeScript, the [Theia IDE](https://theia-ide.org/), and if you want to contribute to the
-project, you should be able to build the Arduino IDE locally. Please refer to the [Theia IDE prerequisites](https://github.com/theia-ide/theia/blob/master/doc/) documentation for the setup instructions.
+If you need assistance, see the [Help Center](https://support.arduino.cc/hc/en-us/categories/360002212660-Software-and-Downloads) and browse the [forum](https://forum.arduino.cc/index.php?board=150.0).
 
-### Build
-```sh
-yarn
-```
+## Bugs & Issues
 
-### Rebuild the native dependencies
-```sh
-yarn rebuild:electron
-```
+If you want to report an issue, you can submit it to the [issue tracker](https://github.com/arduino/arduino-ide/issues) of this repository. A few rules apply:
 
-### Start
-```sh
-yarn start
-```
+* Before posting, please check if the same problem has been already reported by someone else to avoid duplicates.
+* Remember to include as much detail as you can about your hardware set-up, code and steps for reproducing the issue. Make sure you're using an original Arduino board.
 
-### CI
+### Security
 
-This project is built on [GitHub Actions](https://github.com/bcmi-labs/arduino-editor/actions?query=workflow%3A%22Arduino+Pro+IDE%22).
+If you think you found a vulnerability or other security-related bug in this project, please read our
+[security policy](https://github.com/arduino/arduino-ide/security/policy) and report the bug to our Security Team 🛡️
+Thank you!
 
- - _Snapshot_ builds run when changes are pushed to the `main` branch, or when a PR is created against the `main` branch. For the sake of the review and verification process, the build artifacts can be downloaded from the GitHub Actions page. Note: [due to a limitation](https://github.com/actions/upload-artifact/issues/80#issuecomment-630030144) with the GH Actions UI, you cannot download a particular build, but you have to get all together inside the `build-artifacts.zip`.
- - _Nightly_ builds run every day at 03:00 GMT from the `main` branch.
- - _Release_ builds run when a new tag is pushed to the remote. The tag must follow the [semver](https://semver.org/). For instance, `1.2.3` is a correct tag, but `v2.3.4` won't work. Steps to trigger a new release build:
-   - Create a local tag:
-    ```sh
-    git tag -a 1.2.3 -m "Creating a new tag for the `1.2.3` release."
-    ```
-   - Push it to the remote:
-   ```sh
-    git push origin 1.2.3
-   ```
+e-mail contact: security@arduino.cc
 
-### Creating a GH release
-This section guides you through how to create a new release. Let's assume the current version is `0.1.3` and you want to release `0.2.0`.
+## Contributions and development
 
- - Make sure the `main` state represents what you want to release and you're on `main`.
- - Prepare a release-candidate build on a branch:
-```bash
-git branch 0.2.0-rc \
-&& git checkout 0.2.0-rc
-```
- - Bump up the version number. It must be a valid [semver](https://semver.org/) and must be greater than the current one:
-```bash
-yarn update:version 0.2.0
-```
- - This should generate multiple outgoing changes with the version update.
- - Commit your changes and push to the remote:
-```bash
-git add . \
-&& git commit -s -m "Updated versions to 0.2.0" \
-&& git push
-```
- - Create the GH PR the workflow starts automatically.
- - Once you're happy with the RC, merge the changes to the `main`.
- - Create a tag and push it:
-```bash
-git tag -a 0.2.0 -m "0.2.0" \
-&& git push origin 0.2.0
-```
- - The release build starts automatically and uploads the artifacts with the changelog to the Pro IDE [release page](https://github.com/arduino/arduino-ide/releases).
- - If you do not want to release the `EXE` and `MSI` installers, wipe them manually.
- - If you do not like the generated changelog, modify it and update the GH release.
+Contributions are very welcome! You can browse the list of open issues to see what's needed and then you can submit your code using a Pull Request. Please provide detailed descriptions. We also appreciate any help in testing issues and patches contributed by other users.
 
+This repository contains the main code, but two more repositories are included during the build process:
 
-### FAQ
+* [vscode-arduino-tools](https://github.com/arduino/vscode-arduino-tools): provides support for the language server and the debugger
+* [arduino-language-server](https://github.com/arduino/arduino-language-server): provides the language server that parses Arduino code
 
- - Q: Can I manually change the version of the [`arduino-cli`](https://github.com/arduino/arduino-cli/) used by the IDE?
- - A: Yes. It is possible but not recommended. The CLI exposes a set of functionality via [gRPC](https://github.com/arduino/arduino-cli/tree/master/rpc) and the IDE uses this API to communicate with the CLI. Before we build a new version of IDE, we pin a specific version of CLI and use the corresponding `proto` files to generate TypeScript modules for gRPC. This means, a particular version of IDE is compliant only with the pinned version of CLI. Mismatching IDE and CLI versions might not be able to communicate with each other. This could cause unpredictable IDE behavior.
+See the [BUILDING.md](BUILDING.md) for a technical overview of the application and instructions for building the code.
+## Donations
 
- - Q: I have understood that not all versions of the CLI is compatible with my version of IDE but how can I manually update the `arduino-cli` inside the IDE?
- - A: [Get](https://arduino.github.io/arduino-cli/installation) the desired version of `arduino-cli` for your platform and manually replace the one inside the IDE. The CLI can be found inside the IDE at:
-   - Windows: `C:\path\to\Arduino IDE\resources\app\node_modules\arduino-ide-extension\build\arduino-cli.exe`,
-   - macOS: `/path/to/Arduino IDE.app/Contents/Resources/app/node_modules/arduino-ide-extension/build/arduino-cli`, and
-   - Linux: `/path/to/Arduino IDE/resources/app/node_modules/arduino-ide-extension/build/arduino-cli`.
+This open source code was written by the Arduino team and is maintained on a daily basis with the help of the community. We invest a considerable amount of time in development, testing and optimization. Please consider [donating](https://www.arduino.cc/en/donate/) or [sponsoring](https://github.com/sponsors/arduino) to support our work, as well as [buying original Arduino boards](https://store.arduino.cc/) which is the best way to make sure our effort can continue in the long term.
 
-### Architecture overview
+## License
 
-The Pro IDE consists of three major parts:
- - the _Electron main_ process,
- - the _backend_, and 
- - the _frontend_.
-
-The _Electron main_ process is responsible for:
- - creating the application,
- - managing the application lifecycle via listeners, and
- - creating and managing the web pages for the app.
-
-In Electron, the process that runs the main entry JavaScript file is called the main process. The _Electron main_ process can display a GUI by creating web pages. An Electron app always has exactly on main process.
-
-By default, whenever the _Electron main_ process creates a web page, it will instantiate a new `BrowserWindow` instance. Since Electron uses Chromium for displaying web pages, Chromium's multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process. Each `BrowserWindow` instance runs the web page in its own renderer process. When a `BrowserWindow` instance is destroyed, the corresponding renderer process is also terminated. The main process manages all web pages and their corresponding renderer processes. Each renderer process is isolated and only cares about the web page running in it.<sup>[[1]]</sup>
-
-In normal browsers, web pages usually run in a sandboxed environment, and accessing native resources are disallowed. However, Electron has the power to use Node.js APIs in the web pages allowing lower-level OS interactions. Due to security reasons, accessing native resources is an undesired behavior in the Pro IDE. So by convention, we do not use Node.js APIs. (Note: the Node.js integration is [not yet disabled](https://github.com/eclipse-theia/theia/issues/2018) although it is not used). In the Pro IDE, only the _backend_ allows OS interaction.
-
-The _backend_ process is responsible for:
- - providing access to the filesystem,
- - communicating with the Arduino CLI via gRPC,
- - running your terminal,
- - exposing additional RESTful APIs,
- - performing the Git commands in the local repositories,
- - hosting and running any VS Code extensions, or
- - executing VS Code tasks<sup>[[2]]</sup>.
-
-The _Electron main_ process spawns the _backend_ process. There is always exactly one _backend_ process. However, due to performance considerations, the _backend_ spawns several sub-processes for the filesystem watching, Git repository discovery, etc. The communication between the _backend_ process and its sub-processes is established via IPC. Besides spawning sub-processes, the _backend_ will start an HTTP server on a random available port, and serves the web application as static content. When the sub-processes are up and running, and the HTTP server is also listening, the _backend_ process sends the HTTP server port to the _Electron main_ process via IPC. The _Electron main_ process will load the _backend_'s endpoint in the `BrowserWindow`.
-
-The _frontend_ is running as an Electron renderer process and can invoke services implemented on the _backend_. The communication between the _backend_ and the _frontend_ is done via JSON-RPC over a websocket connection. This means, the services running in the _frontend_ are all proxies, and will ask the corresponding service implementation on the _backend_.
-
-[1]: https://www.electronjs.org/docs/tutorial/application-architecture#differences-between-main-process-and-renderer-process
-[2]: https://code.visualstudio.com/Docs/editor/tasks
+The code contained in this repository and the executable distributions are licensed under the terms of the GNU AGPLv3. The executable distributions contain third-party code licensed under other compatible licenses such as GPLv2, MIT and BSD-3. If you have questions about licensing please contact us at [license@arduino.cc](mailto:license@arduino.cc).

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
 
@@ -54,3 +57,17 @@ The Config Service knows about your system, like for example the default sketch
 ### `"arduino"` configuration in the `package.json`:
  - `"cli"`:
    - `"version"` type `string` | `{ owner: string, repo: string, commitish?: string }`: if the type is a `string` and is a valid semver, it will get the corresponding [released](https://github.com/arduino/arduino-cli/releases) CLI. If the type is `string` and is a [date in `YYYYMMDD`](https://arduino.github.io/arduino-cli/latest/installation/#nightly-builds) format, it will get a nightly CLI. If the type is an object, a CLI, build from the sources in the `owner/repo` will be used. If `commitish` is not defined, the HEAD of the default branch will be used. In any other cases an error is thrown.
+
+#### 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,44 +1,55 @@
 {
   "name": "arduino-ide-extension",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-rc1",
   "description": "An extension for Theia building the Arduino IDE",
-  "license": "MIT",
+  "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",
-    "lint": "tslint -c ./tslint.json --project ./tsconfig.json",
+    "lint": "eslint",
     "build": "tsc && ncp ./src/node/cli-protocol/ ./lib/node/cli-protocol/ && yarn lint",
     "watch": "tsc -w",
     "test": "mocha \"./lib/test/**/*.test.js\"",
     "test:watch": "mocha --watch --watch-files lib \"./lib/test/**/*.test.js\""
   },
   "dependencies": {
-    "@grpc/grpc-js": "^1.1.1",
-    "@theia/application-package": "next",
-    "@theia/core": "next",
-    "@theia/editor": "next",
-    "@theia/filesystem": "next",
-    "@theia/git": "next",
-    "@theia/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",
+    "arduino-serial-plotter-webapp": "0.0.15",   
+    "@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",
     "@types/dateformat": "^3.0.1",
     "@types/deepmerge": "^2.2.0",
     "@types/glob": "^5.0.35",
     "@types/google-protobuf": "^3.7.2",
     "@types/js-yaml": "^3.12.2",
+    "@types/keytar": "^4.4.0",
     "@types/lodash.debounce": "^4.0.6",
     "@types/ncp": "^2.0.4",
+    "@types/node-fetch": "^2.5.7",
     "@types/ps-tree": "^1.1.0",
     "@types/react-select": "^3.0.0",
     "@types/react-tabs": "^2.3.2",
@@ -47,31 +58,45 @@
     "@types/which": "^1.3.1",
     "ajv": "^6.5.3",
     "async-mutex": "^0.3.0",
+    "atob": "^2.1.2",
+    "auth0-js": "^9.14.0",
+    "btoa": "^1.2.1",
     "css-element-queries": "^1.2.0",
     "dateformat": "^3.0.3",
-    "deepmerge": "^4.2.2",
+    "deepmerge": "2.0.1",
     "fuzzy": "^0.1.3",
     "glob": "^7.1.6",
     "google-protobuf": "^3.11.4",
-    "lodash.debounce": "^4.0.8",
+    "grpc": "^1.24.11",
+    "hash.js": "^1.1.7",
+    "is-valid-path": "^0.1.1",
     "js-yaml": "^3.13.1",
+    "jwt-decode": "^3.1.2",
+    "keytar": "7.2.0",
+    "lodash.debounce": "^4.0.8",
     "ncp": "^2.0.0",
+    "node-fetch": "^2.6.1",
+    "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",
     "chai": "^4.2.0",
     "chai-string": "^1.5.0",
     "decompress": "^4.2.0",
@@ -80,10 +105,12 @@
     "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",
+    "typemoq": "^2.1.0",
     "uuid": "^3.2.1",
     "yargs": "^11.1.0"
   },
@@ -92,7 +119,8 @@
   },
   "mocha": {
     "require": [
-      "reflect-metadata/Reflect"
+      "reflect-metadata/Reflect",
+      "ignore-styles"
     ],
     "reporter": "spec",
     "colors": true,
@@ -115,16 +143,16 @@
       "frontend": "lib/browser/theia/core/browser-menu-module",
       "frontendElectron": "lib/electron-browser/theia/core/electron-menu-module"
     },
-    {
-      "frontend": "lib/browser/boards/quick-open/boards-quick-open-module"
-    },
     {
       "electronMain": "lib/electron-main/arduino-electron-main-module"
     }
   ],
   "arduino": {
     "cli": {
-      "version": "0.16.1"
+      "version": "0.20.1"
+    },
+    "fwuploader": {
+      "version": "2.0.0"
     }
   }
 }

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

@@ -1,7 +1,7 @@
 // @ts-check
 
 // The version to use.
-const version = '1.9.0';
+const version = '1.9.1';
 
 (async () => {
 

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,69 +4,78 @@
 // - https://downloads.arduino.cc/arduino-language-server/clangd/clangd_${VERSION}_${SUFFIX}
 
 (() => {
+  const DEFAULT_ALS_VERSION = '0.5.0-rc2';
+  const DEFAULT_CLANGD_VERSION = 'snapshot_20210124';
 
-    const DEFAULT_ALS_VERSION = 'nightly';
-    const DEFAULT_CLANGD_VERSION = 'snapshot_20210124';
+  const path = require('path');
+  const shell = require('shelljs');
+  const downloader = require('./downloader');
 
-    const path = require('path');
-    const shell = require('shelljs');
-    const downloader = require('./downloader');
+  const yargs = require('yargs')
+    .option('ls-version', {
+      alias: 'lv',
+      default: DEFAULT_ALS_VERSION,
+      describe: `The version of the 'arduino-language-server' to download. Defaults to ${DEFAULT_ALS_VERSION}.`,
+    })
+    .option('clangd-version', {
+      alias: 'cv',
+      default: DEFAULT_CLANGD_VERSION,
+      choices: ['snapshot_20210124'],
+      describe: `The version of 'clangd' to download. Defaults to ${DEFAULT_CLANGD_VERSION}.`,
+    })
+    .option('force-download', {
+      alias: 'fd',
+      default: false,
+      describe: `If set, this script force downloads the 'arduino-language-server' even if it already exists on the file system.`,
+    })
+    .version(false)
+    .parse();
 
-    const yargs = require('yargs')
-        .option('ls-version', {
-            alias: 'lv',
-            default: DEFAULT_ALS_VERSION,
-            choices: ['nightly'],
-            describe: `The version of the 'arduino-language-server' to download. Defaults to ${DEFAULT_ALS_VERSION}.`
-        })
-        .option('clangd-version', {
-            alias: 'cv',
-            default: DEFAULT_CLANGD_VERSION,
-            choices: ['snapshot_20210124'],
-            describe: `The version of 'clangd' to download. Defaults to ${DEFAULT_CLANGD_VERSION}.`
-        })
-        .option('force-download', {
-            alias: 'fd',
-            default: false,
-            describe: `If set, this script force downloads the 'arduino-language-server' even if it already exists on the file system.`
-        })
-        .version(false).parse();
+  const alsVersion = yargs['ls-version'];
+  const clangdVersion = yargs['clangd-version'];
+  const force = yargs['force-download'];
+  const { platform, arch } = process;
 
-    const alsVersion = yargs['ls-version'];
-    const clangdVersion = yargs['clangd-version']
-    const force = yargs['force-download'];
-    const { platform, arch } = process;
+  const build = path.join(__dirname, '..', 'build');
+  const lsExecutablePath = path.join(
+    build,
+    `arduino-language-server${platform === 'win32' ? '.exe' : ''}`
+  );
 
-    const build = path.join(__dirname, '..', 'build');
-    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_64bit.tar.gz';
+      clangdPrefix = 'mac';
+      break;
+    case '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_64bit.zip';
+      clangdPrefix = 'windows';
+      break;
+  }
+  if (!lsSuffix) {
+    shell.echo(
+      `The arduino-language-server is not available for ${platform} ${arch}.`
+    );
+    shell.exit(1);
+  }
 
-    let clangdExecutablePath, lsSuffix, clangdPrefix;
-    switch (platform) {
-        case 'darwin':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd')
-            lsSuffix = 'macOS_amd64.zip';
-            clangdPrefix = 'mac';
-            break;
-        case 'linux':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd')
-            lsSuffix = 'Linux_amd64.zip';
-            clangdPrefix = 'linux'
-            break;
-        case 'win32':
-            clangdExecutablePath = path.join(build, 'bin', 'clangd.exe')
-            lsSuffix = 'Windows_amd64.zip';
-            clangdPrefix = 'windows';
-            break;
-    }
-    if (!lsSuffix) {
-        shell.echo(`The arduino-language-server is not available for ${platform} ${arch}.`);
-        shell.exit(1);
-    }
-
-    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.
+  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.
 })();

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

@@ -4,20 +4,18 @@ import { Command } from '@theia/core/lib/common/command';
  * @deprecated all these commands should go under contributions and have their command, menu, keybinding, and toolbar contributions.
  */
 export namespace ArduinoCommands {
+  export const TOGGLE_COMPILE_FOR_DEBUG: Command = {
+    id: 'arduino-toggle-compile-for-debug',
+  };
 
-    export const TOGGLE_COMPILE_FOR_DEBUG: Command = {
-        id: 'arduino-toggle-compile-for-debug'
-    };
-
-    /**
-     * Unlike `OPEN_SKETCH`, it opens all files from a sketch folder. (ino, cpp, etc...)
-     */
-    export const OPEN_SKETCH_FILES: Command = {
-        id: 'arduino-open-sketch-files'
-    };
-
-    export const OPEN_BOARDS_DIALOG: Command = {
-        id: 'arduino-open-boards-dialog'
-    };
+  /**
+   * Unlike `OPEN_SKETCH`, it opens all files from a sketch folder. (ino, cpp, etc...)
+   */
+  export const OPEN_SKETCH_FILES: Command = {
+    id: 'arduino-open-sketch-files',
+  };
 
+  export const OPEN_BOARDS_DIALOG: Command = {
+    id: 'arduino-open-boards-dialog',
+  };
 }

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

@@ -1,19 +1,47 @@
-import { Mutex } from 'async-mutex';
-import { MAIN_MENU_BAR, MenuContribution, MenuModelRegistry, SelectionService, ILogger } 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,
+} 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 } 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,421 +50,531 @@ 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 } 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 { OutputService } from '../common/protocol/output-service';
 import { ArduinoPreferences } from './arduino-preferences';
 import { SketchesServiceClientImpl } from '../common/protocol/sketches-service-client-impl';
 import { SaveAsSketch } from './contributions/save-as-sketch';
+import { SketchbookWidgetContribution } from './widgets/sketchbook/sketchbook-widget-contribution';
+
+const INIT_AVR_PACKAGES = 'initializedAvrPackages';
 
 @injectable()
-export class ArduinoFrontendContribution implements FrontendApplicationContribution,
-    TabBarToolbarContribution, CommandContribution, MenuContribution, ColorContribution {
+export class ArduinoFrontendContribution
+  implements
+    FrontendApplicationContribution,
+    TabBarToolbarContribution,
+    CommandContribution,
+    MenuContribution,
+    ColorContribution
+{
+  @inject(ILogger)
+  protected logger: ILogger;
 
-    @inject(ILogger)
-    protected logger: ILogger;
+  @inject(MessageService)
+  protected readonly messageService: MessageService;
 
-    @inject(MessageService)
-    protected readonly messageService: MessageService;
+  @inject(BoardsService)
+  protected readonly boardsService: BoardsService;
 
-    @inject(BoardsService)
-    protected readonly boardsService: BoardsService;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClientImpl: BoardsServiceProvider;
 
-    @inject(CoreService)
-    protected readonly coreService: CoreService;
+  @inject(EditorManager)
+  protected readonly editorManager: EditorManager;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClientImpl: BoardsServiceProvider;
+  @inject(FileService)
+  protected readonly fileService: FileService;
 
-    @inject(SelectionService)
-    protected readonly selectionService: SelectionService;
+  @inject(SketchesService)
+  protected readonly sketchService: SketchesService;
 
-    @inject(EditorManager)
-    protected readonly editorManager: EditorManager;
+  @inject(BoardsConfigDialog)
+  protected readonly boardsConfigDialog: BoardsConfigDialog;
 
-    @inject(ContextMenuRenderer)
-    protected readonly contextMenuRenderer: ContextMenuRenderer;
+  @inject(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
 
-    @inject(FileDialogService)
-    protected readonly fileDialogService: FileDialogService;
+  @inject(StatusBar)
+  protected readonly statusBar: StatusBar;
 
-    @inject(FileService)
-    protected readonly fileSystem: FileService;
+  @inject(FileNavigatorContribution)
+  protected readonly fileNavigatorContributions: FileNavigatorContribution;
 
-    @inject(SketchesService)
-    protected readonly sketchService: SketchesService;
+  @inject(OutputContribution)
+  protected readonly outputContribution: OutputContribution;
 
-    @inject(BoardsConfigDialog)
-    protected readonly boardsConfigDialog: BoardsConfigDialog;
+  @inject(OutlineViewContribution)
+  protected readonly outlineContribution: OutlineViewContribution;
 
-    @inject(MenuModelRegistry)
-    protected readonly menuRegistry: MenuModelRegistry;
+  @inject(ProblemContribution)
+  protected readonly problemContribution: ProblemContribution;
 
-    @inject(CommandRegistry)
-    protected readonly commandRegistry: CommandRegistry;
+  @inject(ScmContribution)
+  protected readonly scmContribution: ScmContribution;
 
-    @inject(StatusBar)
-    protected readonly statusBar: StatusBar;
+  @inject(SearchInWorkspaceFrontendContribution)
+  protected readonly siwContribution: SearchInWorkspaceFrontendContribution;
 
-    @inject(WorkspaceService)
-    protected readonly workspaceService: WorkspaceService;
+  @inject(SketchbookWidgetContribution)
+  protected readonly sketchbookWidgetContribution: SketchbookWidgetContribution;
 
-    @inject(MonitorConnection)
-    protected readonly monitorConnection: MonitorConnection;
+  @inject(EditorMode)
+  protected readonly editorMode: EditorMode;
 
-    @inject(FileNavigatorContribution)
-    protected readonly fileNavigatorContributions: FileNavigatorContribution;
+  @inject(ConfigService)
+  protected readonly configService: ConfigService;
 
-    @inject(OutputContribution)
-    protected readonly outputContribution: OutputContribution;
+  @inject(HostedPluginSupport)
+  protected hostedPluginSupport: HostedPluginSupport;
 
-    @inject(OutlineViewContribution)
-    protected readonly outlineContribution: OutlineViewContribution;
+  @inject(ExecutableService)
+  protected executableService: ExecutableService;
 
-    @inject(ProblemContribution)
-    protected readonly problemContribution: ProblemContribution;
+  @inject(ArduinoPreferences)
+  protected readonly arduinoPreferences: ArduinoPreferences;
 
-    @inject(ScmContribution)
-    protected readonly scmContribution: ScmContribution;
+  @inject(SketchesServiceClientImpl)
+  protected readonly sketchServiceClient: SketchesServiceClientImpl;
 
-    @inject(SearchInWorkspaceFrontendContribution)
-    protected readonly siwContribution: SearchInWorkspaceFrontendContribution;
+  protected readonly appStateService: FrontendApplicationStateService;
 
-    @inject(EditorMode)
-    protected readonly editorMode: EditorMode;
+  @inject(LocalStorageService)
+  protected readonly localStorageService: LocalStorageService;
 
-    @inject(ArduinoDaemon)
-    protected readonly daemon: ArduinoDaemon;
+  protected invalidConfigPopup:
+    | Promise<void | 'No' | 'Yes' | undefined>
+    | undefined;
+  protected toDisposeOnStop = new DisposableCollection();
 
-    @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(OutputService)
-    protected readonly outputService: OutputService;
-
-    @inject(ArduinoPreferences)
-    protected readonly arduinoPreferences: ArduinoPreferences;
-
-    @inject(SketchesServiceClientImpl)
-    protected readonly sketchServiceClient: SketchesServiceClientImpl;
-
-    protected invalidConfigPopup: Promise<void | 'No' | 'Yes' | undefined> | undefined;
-
-    @postConstruct()
-    protected async init(): Promise<void> {
-        if (!window.navigator.onLine) {
-            // tslint:disable-next-line:max-line-length
-            this.messageService.warn('You appear to be offline. Without an Internet connection, the Arduino CLI might not be able to download the required resources and could cause malfunction. Please connect to the Internet and restart the application.');
-        }
-        const updateStatusBar = ({ selectedBoard, selectedPort }: BoardsConfig.Config) => {
-            this.statusBar.setElement('arduino-selected-board', {
-                alignment: StatusBarAlignment.RIGHT,
-                text: selectedBoard ? `$(microchip) ${selectedBoard.name}` : '$(close) no board selected',
-                className: 'arduino-selected-board'
-            });
-            if (selectedBoard) {
-                this.statusBar.setElement('arduino-selected-port', {
-                    alignment: StatusBarAlignment.RIGHT,
-                    text: selectedPort ? `on ${Port.toString(selectedPort)}` : '[not connected]',
-                    className: 'arduino-selected-port'
-                });
-            }
-        }
-        this.boardsServiceClientImpl.onBoardsConfigChanged(updateStatusBar);
-        updateStatusBar(this.boardsServiceClientImpl.boardsConfig);
+  @postConstruct()
+  protected async init(): Promise<void> {
+    const notFirstStartup = await this.localStorageService.getData(
+      INIT_AVR_PACKAGES
+    );
+    if (!notFirstStartup) {
+      await this.localStorageService.setData(INIT_AVR_PACKAGES, true);
+      const avrPackage = await this.boardsService.getBoardPackage({
+        id: 'arduino:avr',
+      });
+      avrPackage && (await this.boardsService.install({ item: avrPackage }));
     }
-
-    onStart(app: FrontendApplication): void {
-        // Initialize all `pro-mode` widgets. This is a NOOP if in normal mode.
-        for (const viewContribution of [
-            this.fileNavigatorContributions,
-            this.outputContribution,
-            this.outlineContribution,
-            this.problemContribution,
-            this.scmContribution,
-            this.siwContribution] as Array<FrontendApplicationContribution>) {
-            if (viewContribution.initializeLayout) {
-                viewContribution.initializeLayout(app);
-            }
-        }
-        const start = async ({ selectedBoard }: BoardsConfig.Config) => {
-            if (selectedBoard) {
-                const { name, fqbn } = selectedBoard;
-                if (fqbn) {
-                    this.startLanguageServer(fqbn, name);
+    if (!window.navigator.onLine) {
+      // tslint:disable-next-line:max-line-length
+      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) => {
+      this.statusBar.setElement('arduino-selected-board', {
+        alignment: StatusBarAlignment.RIGHT,
+        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
+            ? 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))) {
+        this.toDisposeOnStop.push(this.fileService.watch(new URI(sketch.uri)));
+        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 (Sketch.isInSketch(resource, reloadedSketch)) {
+                  this.ensureOpened(resource.toString(), true, {
+                    mode: 'open',
+                  });
                 }
+              }
             }
-        };
-        this.boardsServiceClientImpl.onBoardsConfigChanged(start);
-        this.arduinoPreferences.onPreferenceChanged(event => {
-            if (event.preferenceName === 'arduino.language.log' && event.newValue !== event.oldValue) {
-                start(this.boardsServiceClientImpl.boardsConfig);
-            }
-        });
-        this.arduinoPreferences.ready.then(() => {
-            const webContents = remote.getCurrentWebContents();
-            const zoomLevel = this.arduinoPreferences.get('arduino.window.zoomLevel');
-            webContents.setZoomLevel(zoomLevel);
-        });
-        this.arduinoPreferences.onPreferenceChanged(event => {
-            if (event.preferenceName === 'arduino.window.zoomLevel' && typeof event.newValue === 'number' && event.newValue !== event.oldValue) {
-                const webContents = remote.getCurrentWebContents();
-                webContents.setZoomLevel(event.newValue || 0);
-            }
-        });
-    }
-
-    protected languageServerFqbn?: string;
-    protected languageServerStartMutex = new Mutex();
-    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.`);
-                if (this.languageServerFqbn) {
-                    try {
-                        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);
-                        throw e;
-                    }
-                }
-                return;
-            }
-            if (fqbn === this.languageServerFqbn) {
-                // NOOP
-                return;
-            }
-            this.logger.info(`Starting language server: ${fqbn}`);
-            const log = this.arduinoPreferences.get('arduino.language.log');
-            let currentSketchPath: string | undefined = undefined;
-            if (log) {
-                const currentSketch = await this.sketchServiceClient.currentSketch();
-                if (currentSketch) {
-                    currentSketchPath = await this.fileSystem.fsPath(new URI(currentSketch.uri));
-                }
-            }
-            const { clangdUri, cliUri, lsUri } = await this.executableService.list();
-            const [clangdPath, cliPath, lsPath] = await Promise.all([
-                this.fileSystem.fsPath(new URI(clangdUri)),
-                this.fileSystem.fsPath(new URI(cliUri)),
-                this.fileSystem.fsPath(new URI(lsUri)),
-            ]);
-            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', {
-                    lsPath,
-                    cliPath,
-                    clangdPath,
-                    log: currentSketchPath ? currentSketchPath : log,
-                    board: {
-                        fqbn,
-                        name: name ? `"${name}"` : undefined
-                    }
-                })
-            ]);
-        } catch (e) {
-            console.log(`Failed to start language server for ${fqbn}`, e);
-            this.languageServerFqbn = undefined;
-        } finally {
-            release();
-        }
-    }
-
-    registerToolbarItems(registry: TabBarToolbarRegistry): void {
-        registry.registerItem({
-            id: BoardsToolBarItem.TOOLBAR_ID,
-            render: () => <BoardsToolBarItem
-                key='boardsToolbarItem'
-                commands={this.commandRegistry}
-                boardsServiceClient={this.boardsServiceClientImpl} />,
-            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
-            priority: 7
-        });
-        registry.registerItem({
-            id: 'toggle-serial-monitor',
-            command: MonitorViewContribution.TOGGLE_SERIAL_MONITOR_TOOLBAR,
-            tooltip: 'Serial Monitor'
-        });
-    }
-
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(ArduinoCommands.TOGGLE_COMPILE_FOR_DEBUG, {
-            execute: () => this.editorMode.toggleCompileForDebug(),
-            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) => {
-                const boardsConfig = await this.boardsConfigDialog.open(query);
-                if (boardsConfig) {
-                    this.boardsServiceClientImpl.boardsConfig = boardsConfig;
-                }
-            }
-        });
-    }
-
-    registerMenus(registry: MenuModelRegistry) {
-        const menuId = (menuPath: string[]): string => {
-            const index = menuPath.length - 1;
-            const menuId = menuPath[index];
-            return menuId;
-        }
-        registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(MonacoMenus.SELECTION));
-        registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(EditorMainMenu.GO));
-        registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(TerminalMenus.TERMINAL));
-        registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(CommonMenus.VIEW));
-
-        registry.registerSubmenu(ArduinoMenus.SKETCH, 'Sketch');
-        registry.registerSubmenu(ArduinoMenus.TOOLS, 'Tools');
-        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
-            commandId: ArduinoCommands.TOGGLE_COMPILE_FOR_DEBUG.id,
-            label: 'Optimize for Debugging',
-            order: '4'
-        });
-    }
-
-    protected async openSketchFiles(uri: URI): Promise<void> {
-        try {
-            const sketch = await this.sketchService.loadSketch(uri.toString());
-            const { mainFileUri, rootFolderFileUris } = sketch;
-            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 });
-                    }
-                });
-            }
-        } catch (e) {
-            console.error(e);
-            const message = e instanceof Error ? e.message : JSON.stringify(e);
-            this.messageService.error(message);
-        }
-    }
-
-    protected async ensureOpened(uri: string, forceOpen: boolean = false): Promise<any> {
-        const widget = this.editorManager.all.find(widget => widget.editor.uri.toString() === uri);
-        if (!widget || forceOpen) {
-            return this.editorManager.open(new URI(uri));
-        }
-    }
-
-    registerColors(colors: ColorRegistry): void {
-        colors.register(
-            {
-                id: 'arduino.branding.primary',
-                defaults: {
-                    dark: 'statusBar.background',
-                    light: 'statusBar.background'
-                },
-                description: 'The primary branding color, such as dialog titles, library, and board manager list labels.'
-            },
-            {
-                id: 'arduino.branding.secondary',
-                defaults: {
-                    dark: 'statusBar.background',
-                    light: 'statusBar.background'
-                },
-                description: 'Secondary branding color for list selections, dropdowns, and widget borders.'
-            },
-            {
-                id: 'arduino.foreground',
-                defaults: {
-                    dark: 'editorWidget.background',
-                    light: 'editorWidget.background',
-                    hc: 'editorWidget.background'
-                },
-                description: 'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.'
-            },
-            {
-                id: 'arduino.toolbar.background',
-                defaults: {
-                    dark: 'button.background',
-                    light: 'button.background',
-                    hc: 'activityBar.inactiveForeground'
-                },
-                description: 'Background color of the toolbar items. Such as Upload, Verify, etc.'
-            },
-            {
-                id: 'arduino.toolbar.hoverBackground',
-                defaults: {
-                    dark: 'button.hoverBackground',
-                    light: 'button.hoverBackground',
-                    hc: 'activityBar.inactiveForeground'
-                },
-                description: 'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.'
-            },
-            {
-                id: 'arduino.output.foreground',
-                defaults: {
-                    dark: 'editor.foreground',
-                    light: 'editor.foreground',
-                    hc: 'editor.foreground'
-                },
-                description: 'Color of the text in the Output view.'
-            },
-            {
-                id: 'arduino.output.background',
-                defaults: {
-                    dark: 'editor.background',
-                    light: 'editor.background',
-                    hc: 'editor.background'
-                },
-                description: 'Background color of the Output view.'
-            }
+          })
         );
-    }
+      }
+    });
+  }
 
+  onStart(app: FrontendApplication): void {
+    // Initialize all `pro-mode` widgets. This is a NOOP if in normal mode.
+    for (const viewContribution of [
+      this.fileNavigatorContributions,
+      this.outputContribution,
+      this.outlineContribution,
+      this.problemContribution,
+      this.scmContribution,
+      this.siwContribution,
+      this.sketchbookWidgetContribution,
+    ] as Array<FrontendApplicationContribution>) {
+      if (viewContribution.initializeLayout) {
+        viewContribution.initializeLayout(app);
+      }
+    }
+    const start = async ({ selectedBoard }: BoardsConfig.Config) => {
+      if (selectedBoard) {
+        const { name, fqbn } = selectedBoard;
+        if (fqbn) {
+          this.startLanguageServer(fqbn, name);
+        }
+      }
+    };
+    this.boardsServiceClientImpl.onBoardsConfigChanged(start);
+    this.arduinoPreferences.onPreferenceChanged((event) => {
+      if (
+        event.preferenceName === 'arduino.language.log' &&
+        event.newValue !== event.oldValue
+      ) {
+        start(this.boardsServiceClientImpl.boardsConfig);
+      }
+    });
+    this.arduinoPreferences.ready.then(() => {
+      const webContents = remote.getCurrentWebContents();
+      const zoomLevel = this.arduinoPreferences.get('arduino.window.zoomLevel');
+      webContents.setZoomLevel(zoomLevel);
+    });
+    this.arduinoPreferences.onPreferenceChanged((event) => {
+      if (
+        event.preferenceName === 'arduino.window.zoomLevel' &&
+        typeof event.newValue === 'number' &&
+        event.newValue !== event.oldValue
+      ) {
+        const webContents = remote.getCurrentWebContents();
+        webContents.setZoomLevel(event.newValue || 0);
+      }
+    });
+    app.shell.leftPanelHandler.removeBottomMenu('settings-menu');
+  }
+
+  onStop(): void {
+    this.toDisposeOnStop.dispose();
+  }
+
+  protected languageServerFqbn?: string;
+  protected languageServerStartMutex = new Mutex();
+  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.`
+        );
+        if (this.languageServerFqbn) {
+          try {
+            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
+            );
+            throw e;
+          }
+        }
+        return;
+      }
+      if (fqbn === this.languageServerFqbn) {
+        // NOOP
+        return;
+      }
+      this.logger.info(`Starting language server: ${fqbn}`);
+      const log = this.arduinoPreferences.get('arduino.language.log');
+      let currentSketchPath: string | undefined = undefined;
+      if (log) {
+        const currentSketch = await this.sketchServiceClient.currentSketch();
+        if (currentSketch) {
+          currentSketchPath = await this.fileService.fsPath(
+            new URI(currentSketch.uri)
+          );
+        }
+      }
+      const { clangdUri, lsUri } = await this.executableService.list();
+      const [clangdPath, lsPath] = await Promise.all([
+        this.fileService.fsPath(new URI(clangdUri)),
+        this.fileService.fsPath(new URI(lsUri)),
+      ]);
+
+      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',
+          {
+            lsPath,
+            cliDaemonAddr: `localhost:${config.daemon.port}`,
+            clangdPath,
+            log: currentSketchPath ? currentSketchPath : log,
+            cliDaemonInstance: '1',
+            board: {
+              fqbn,
+              name: name ? `"${name}"` : undefined,
+            },
+          }
+        ),
+      ]);
+    } catch (e) {
+      console.log(`Failed to start language server for ${fqbn}`, e);
+      this.languageServerFqbn = undefined;
+    } finally {
+      release();
+    }
+  }
+
+  registerToolbarItems(registry: TabBarToolbarRegistry): void {
+    registry.registerItem({
+      id: BoardsToolBarItem.TOOLBAR_ID,
+      render: () => (
+        <BoardsToolBarItem
+          key="boardsToolbarItem"
+          commands={this.commandRegistry}
+          boardsServiceClient={this.boardsServiceClientImpl}
+        />
+      ),
+      isVisible: (widget) =>
+        ArduinoToolbar.is(widget) && widget.side === 'left',
+      priority: 7,
+    });
+    registry.registerItem({
+      id: 'toggle-serial-monitor',
+      command: MonitorViewContribution.TOGGLE_SERIAL_MONITOR_TOOLBAR,
+      tooltip: 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,
+    });
+    registry.registerCommand(ArduinoCommands.OPEN_SKETCH_FILES, {
+      execute: async (uri: URI) => {
+        this.openSketchFiles(uri);
+      },
+    });
+    registry.registerCommand(ArduinoCommands.OPEN_BOARDS_DIALOG, {
+      execute: async (query?: string | undefined) => {
+        const boardsConfig = await this.boardsConfigDialog.open(query);
+        if (boardsConfig) {
+          this.boardsServiceClientImpl.boardsConfig = boardsConfig;
+        }
+      },
+    });
+  }
+
+  registerMenus(registry: MenuModelRegistry) {
+    const menuId = (menuPath: string[]): string => {
+      const index = menuPath.length - 1;
+      const menuId = menuPath[index];
+      return menuId;
+    };
+    registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(MonacoMenus.SELECTION));
+    registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(EditorMainMenu.GO));
+    registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(TerminalMenus.TERMINAL));
+    registry.getMenu(MAIN_MENU_BAR).removeNode(menuId(CommonMenus.VIEW));
+
+    registry.registerSubmenu(
+      ArduinoMenus.SKETCH,
+      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: nls.localize(
+        'arduino/debug/optimizeForDebugging',
+        'Optimize for Debugging'
+      ),
+      order: '5',
+    });
+  }
+
+  protected async openSketchFiles(uri: URI): Promise<void> {
+    try {
+      const sketch = await this.sketchService.loadSketch(uri.toString());
+      const { mainFileUri, rootFolderFileUris } = sketch;
+      for (const uri of [mainFileUri, ...rootFolderFileUris]) {
+        await this.ensureOpened(uri);
+      }
+      if (mainFileUri.endsWith('.pde')) {
+        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,
+                }
+              );
+            }
+          });
+      }
+    } catch (e) {
+      console.error(e);
+      const message = e instanceof Error ? e.message : JSON.stringify(e);
+      this.messageService.error(message);
+    }
+  }
+
+  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);
+    }
+  }
+
+  registerColors(colors: ColorRegistry): void {
+    colors.register(
+      {
+        id: 'arduino.branding.primary',
+        defaults: {
+          dark: 'statusBar.background',
+          light: 'statusBar.background',
+        },
+        description:
+          'The primary branding color, such as dialog titles, library, and board manager list labels.',
+      },
+      {
+        id: 'arduino.branding.secondary',
+        defaults: {
+          dark: 'statusBar.background',
+          light: 'statusBar.background',
+        },
+        description:
+          'Secondary branding color for list selections, dropdowns, and widget borders.',
+      },
+      {
+        id: 'arduino.foreground',
+        defaults: {
+          dark: 'editorWidget.background',
+          light: 'editorWidget.background',
+          hc: 'editorWidget.background',
+        },
+        description:
+          'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.',
+      },
+      {
+        id: 'arduino.toolbar.background',
+        defaults: {
+          dark: 'button.background',
+          light: 'button.background',
+          hc: 'activityBar.inactiveForeground',
+        },
+        description:
+          'Background color of the toolbar items. Such as Upload, Verify, etc.',
+      },
+      {
+        id: 'arduino.toolbar.hoverBackground',
+        defaults: {
+          dark: 'button.hoverBackground',
+          light: 'button.foreground',
+          hc: 'textLink.foreground',
+        },
+        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',
+        },
+        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',
+        },
+        description: 'Color of the text in the Output view.',
+      },
+      {
+        id: 'arduino.output.background',
+        defaults: {
+          dark: 'editor.background',
+          light: 'editor.background',
+          hc: 'editor.background',
+        },
+        description: 'Background color of the Output view.',
+      }
+    );
+  }
 }

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

@@ -3,14 +3,29 @@ import { ContainerModule } from 'inversify';
 import { WidgetFactory } from '@theia/core/lib/browser/widget-manager';
 import { CommandContribution } from '@theia/core/lib/common/command';
 import { bindViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
-import { TabBarToolbarContribution, TabBarToolbarFactory } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import {
+  TabBarToolbarContribution,
+  TabBarToolbarFactory,
+} from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging/ws-connection-provider';
-import { FrontendApplicationContribution, FrontendApplication as TheiaFrontendApplication } from '@theia/core/lib/browser/frontend-application'
+import {
+  FrontendApplicationContribution,
+  FrontendApplication as TheiaFrontendApplication,
+} from '@theia/core/lib/browser/frontend-application';
 import { LibraryListWidget } from './library/library-list-widget';
 import { ArduinoFrontendContribution } from './arduino-frontend-contribution';
-import { LibraryService, LibraryServicePath } from '../common/protocol/library-service';
-import { BoardsService, BoardsServicePath } from '../common/protocol/boards-service';
-import { SketchesService, SketchesServicePath } from '../common/protocol/sketches-service';
+import {
+  LibraryService,
+  LibraryServicePath,
+} from '../common/protocol/library-service';
+import {
+  BoardsService,
+  BoardsServicePath,
+} from '../common/protocol/boards-service';
+import {
+  SketchesService,
+  SketchesServicePath,
+} from '../common/protocol/sketches-service';
 import { SketchesServiceClientImpl } from '../common/protocol/sketches-service-client-impl';
 import { CoreService, CoreServicePath } from '../common/protocol/core-service';
 import { BoardsListWidget } from './boards/boards-list-widget';
@@ -24,36 +39,50 @@ import { ProblemContribution as TheiaProblemContribution } from '@theia/markers/
 import { ProblemContribution } from './theia/markers/problem-contribution';
 import { FileNavigatorContribution } from './theia/navigator/navigator-contribution';
 import { FileNavigatorContribution as TheiaFileNavigatorContribution } from '@theia/navigator/lib/browser/navigator-contribution';
+import { 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 {
-    ApplicationShell as TheiaApplicationShell,
-    ShellLayoutRestorer as TheiaShellLayoutRestorer,
-    CommonFrontendContribution as TheiaCommonFrontendContribution,
-    KeybindingRegistry as TheiaKeybindingRegistry,
-    TabBarRendererFactory,
-    ContextMenuRenderer
+  ApplicationShell as TheiaApplicationShell,
+  ShellLayoutRestorer as TheiaShellLayoutRestorer,
+  CommonFrontendContribution as TheiaCommonFrontendContribution,
+  KeybindingRegistry as TheiaKeybindingRegistry,
+  TabBarRendererFactory,
+  ContextMenuRenderer,
+  createTreeContainer,
+  TreeWidget,
 } from '@theia/core/lib/browser';
 import { MenuContribution } from '@theia/core/lib/common/menu';
 import { ApplicationShell } from './theia/core/application-shell';
 import { FrontendApplication } from './theia/core/frontend-application';
-import { BoardsConfigDialog, BoardsConfigDialogProps } from './boards/boards-config-dialog';
+import {
+  BoardsConfigDialog,
+  BoardsConfigDialogProps,
+} from './boards/boards-config-dialog';
 import { BoardsConfigDialogWidget } from './boards/boards-config-dialog-widget';
 import { ScmContribution as TheiaScmContribution } from '@theia/scm/lib/browser/scm-contribution';
 import { ScmContribution } from './theia/scm/scm-contribution';
 import { SearchInWorkspaceFrontendContribution as TheiaSearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
 import { SearchInWorkspaceFrontendContribution } from './theia/search-in-workspace/search-in-workspace-frontend-contribution';
 import { LibraryListWidgetFrontendContribution } from './library/library-widget-frontend-contribution';
-import { MonitorServiceClientImpl } from './monitor/monitor-service-client-impl';
-import { MonitorServicePath, MonitorService, MonitorServiceClient } from '../common/protocol/monitor-service';
-import { ConfigService, ConfigServicePath } 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 { SerialServiceClientImpl } from './serial/serial-service-client-impl';
+import {
+  SerialServicePath,
+  SerialService,
+  SerialServiceClient,
+} from '../common/protocol/serial-service';
+import {
+  ConfigService,
+  ConfigServicePath,
+} from '../common/protocol/config-service';
+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';
@@ -64,24 +93,35 @@ import { EditorMode } from './editor-mode';
 import { ListItemRenderer } from './widgets/component-list/list-item-renderer';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 import { MonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
-import { ArduinoDaemonPath, ArduinoDaemon } from '../common/protocol/arduino-daemon';
-import { EditorManager as TheiaEditorManager, EditorCommandContribution as TheiaEditorCommandContribution } from '@theia/editor/lib/browser';
-import { EditorManager } from './theia/editor/editor-manager';
-import { FrontendConnectionStatusService, ApplicationConnectionStatusContribution } from './theia/core/connection-status-service';
 import {
-    FrontendConnectionStatusService as TheiaFrontendConnectionStatusService,
-    ApplicationConnectionStatusContribution as TheiaApplicationConnectionStatusContribution
+  ArduinoDaemonPath,
+  ArduinoDaemon,
+} from '../common/protocol/arduino-daemon';
+import { EditorCommandContribution as TheiaEditorCommandContribution } from '@theia/editor/lib/browser';
+import {
+  FrontendConnectionStatusService,
+  ApplicationConnectionStatusContribution,
+} from './theia/core/connection-status-service';
+import {
+  FrontendConnectionStatusService as TheiaFrontendConnectionStatusService,
+  ApplicationConnectionStatusContribution as TheiaApplicationConnectionStatusContribution,
 } from '@theia/core/lib/browser/connection-status-service';
 import { BoardsDataMenuUpdater } from './boards/boards-data-menu-updater';
 import { BoardsDataStore } from './boards/boards-data-store';
 import { ILogger } from '@theia/core';
-import { FileSystemExt, FileSystemExtPath } from '../common/protocol/filesystem-ext';
 import {
-    WorkspaceFrontendContribution as TheiaWorkspaceFrontendContribution,
-    FileMenuContribution as TheiaFileMenuContribution,
-    WorkspaceCommandContribution as TheiaWorkspaceCommandContribution
+  FileSystemExt,
+  FileSystemExtPath,
+} from '../common/protocol/filesystem-ext';
+import {
+  WorkspaceFrontendContribution as TheiaWorkspaceFrontendContribution,
+  FileMenuContribution as TheiaFileMenuContribution,
+  WorkspaceCommandContribution as TheiaWorkspaceCommandContribution,
 } from '@theia/workspace/lib/browser';
-import { WorkspaceFrontendContribution, ArduinoFileMenuContribution } from './theia/workspace/workspace-frontend-contribution';
+import {
+  WorkspaceFrontendContribution,
+  ArduinoFileMenuContribution,
+} from './theia/workspace/workspace-frontend-contribution';
 import { Contribution } from './contributions/contribution';
 import { NewSketch } from './contributions/new-sketch';
 import { OpenSketch } from './contributions/open-sketch';
@@ -108,19 +148,32 @@ import { EditorWidgetFactory } from './theia/editor/editor-widget-factory';
 import { OutputWidget as TheiaOutputWidget } from '@theia/output/lib/browser/output-widget';
 import { OutputWidget } from './theia/output/output-widget';
 import { BurnBootloader } from './contributions/burn-bootloader';
-import { ExamplesServicePath, ExamplesService } from '../common/protocol/examples-service';
+import {
+  ExamplesServicePath,
+  ExamplesService,
+} 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, OutputChannelRegistryMainImpl } from './theia/plugin-ext/output-channel-registry-main';
+import {
+  OutputChannelRegistryMainImpl as TheiaOutputChannelRegistryMainImpl,
+  OutputChannelRegistryMainImpl,
+} from './theia/plugin-ext/output-channel-registry-main';
 import { ExecutableService, ExecutableServicePath } from '../common/protocol';
 import { MonacoTextModelService as TheiaMonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
 import { MonacoTextModelService } from './theia/monaco/monaco-text-model-service';
-import { OutputServiceImpl } from './output-service-impl';
-import { OutputServicePath, OutputService } from '../common/protocol/output-service';
+import { ResponseServiceImpl } from './response-service-impl';
+import {
+  ResponseService,
+  ResponseServiceArduino,
+  ResponseServicePath,
+} from '../common/protocol/response-service';
 import { NotificationCenter } from './notification-center';
-import { NotificationServicePath, NotificationServiceServer } from '../common/protocol';
+import {
+  NotificationServicePath,
+  NotificationServiceServer,
+} from '../common/protocol';
 import { About } from './contributions/about';
 import { IconThemeService } from '@theia/core/lib/browser/icon-theme-service';
 import { TabBarRenderer } from './theia/core/tab-bars';
@@ -136,270 +189,576 @@ import { DebugFrontendApplicationContribution as TheiaDebugFrontendApplicationCo
 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, SettingsDialog, SettingsWidget, SettingsDialogProps } from './settings';
+import { bindArduinoPreferences } from './arduino-preferences';
+import { SettingsService } from './dialogs/settings/settings';
+import {
+  SettingsDialog,
+  SettingsWidget,
+  SettingsDialogProps,
+} 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';
 import { OutputToolbarContribution } from './theia/output/output-toolbar-contribution';
 import { AddZipLibrary } from './contributions/add-zip-library';
+import { WorkspaceVariableContribution as TheiaWorkspaceVariableContribution } from '@theia/workspace/lib/browser/workspace-variable-contribution';
+import { WorkspaceVariableContribution } from './theia/workspace/workspace-variable-contribution';
+import { DebugConfigurationManager } from './theia/debug/debug-configuration-manager';
+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 { StorageWrapper } from './storage-wrapper';
+import { NotificationManager } from './theia/messages/notifications-manager';
+import { NotificationManager as TheiaNotificationManager } from '@theia/messages/lib/browser/notifications-manager';
+import { NotificationsRenderer as TheiaNotificationsRenderer } from '@theia/messages/lib/browser/notifications-renderer';
+import { NotificationsRenderer } from './theia/messages/notifications-renderer';
+import { SketchbookWidgetContribution } from './widgets/sketchbook/sketchbook-widget-contribution';
+import { LocalCacheFsProvider } from './local-cache/local-cache-fs-provider';
+import { CloudSketchbookWidget } from './widgets/cloud-sketchbook/cloud-sketchbook-widget';
+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/cloud-share-sketch-dialog';
+import { AuthenticationClientService } from './auth/authentication-client-service';
+import {
+  AuthenticationService,
+  AuthenticationServicePath,
+} from '../common/protocol/authentication-service';
+import { CreateFsProvider } from './create/create-fs-provider';
+import { FileServiceContribution } from '@theia/filesystem/lib/browser/file-service';
+import { CloudSketchbookContribution } from './widgets/cloud-sketchbook/cloud-sketchbook-contributions';
+import { CloudSketchbookCompositeWidget } from './widgets/cloud-sketchbook/cloud-sketchbook-composite-widget';
+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');
 
 MonacoThemingService.register({
-    id: 'arduino-theme',
-    label: 'Light (Arduino)',
-    uiTheme: 'vs',
-    json: require('../../src/browser/data/arduino.color-theme.json')
+  id: 'arduino-theme',
+  label: 'Light (Arduino)',
+  uiTheme: 'vs',
+  json: require('../../src/browser/data/arduino.color-theme.json'),
 });
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
-    ElementQueries.listen();
-    ElementQueries.init();
+  ElementQueries.listen();
+  ElementQueries.init();
 
-    // Commands and toolbar items
-    bind(ArduinoFrontendContribution).toSelf().inSingletonScope();
-    bind(CommandContribution).toService(ArduinoFrontendContribution);
-    bind(MenuContribution).toService(ArduinoFrontendContribution);
-    bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
-    bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
-    bind(ColorContribution).toService(ArduinoFrontendContribution);
+  // Commands and toolbar items
+  bind(ArduinoFrontendContribution).toSelf().inSingletonScope();
+  bind(CommandContribution).toService(ArduinoFrontendContribution);
+  bind(MenuContribution).toService(ArduinoFrontendContribution);
+  bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
+  bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
+  bind(ColorContribution).toService(ArduinoFrontendContribution);
 
-    bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
+  bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
 
-    // Renderer for both the library and the core widgets.
-    bind(ListItemRenderer).toSelf().inSingletonScope();
+  // Renderer for both the library and the core widgets.
+  bind(ListItemRenderer).toSelf().inSingletonScope();
 
-    // Library service
-    bind(LibraryService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, LibraryServicePath)).inSingletonScope();
+  // Library service
+  bind(LibraryService)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        LibraryServicePath
+      )
+    )
+    .inSingletonScope();
 
-    // Library list widget
-    bind(LibraryListWidget).toSelf();
-    bindViewContribution(bind, LibraryListWidgetFrontendContribution);
-    bind(WidgetFactory).toDynamicValue(context => ({
-        id: LibraryListWidget.WIDGET_ID,
-        createWidget: () => context.container.get(LibraryListWidget)
-    }));
-    bind(FrontendApplicationContribution).toService(LibraryListWidgetFrontendContribution);
+  // Library list widget
+  bind(LibraryListWidget).toSelf();
+  bindViewContribution(bind, LibraryListWidgetFrontendContribution);
+  bind(WidgetFactory).toDynamicValue((context) => ({
+    id: LibraryListWidget.WIDGET_ID,
+    createWidget: () => context.container.get(LibraryListWidget),
+  }));
+  bind(FrontendApplicationContribution).toService(
+    LibraryListWidgetFrontendContribution
+  );
 
-    // Sketch list service
-    bind(SketchesService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, SketchesServicePath)).inSingletonScope();
-    bind(SketchesServiceClientImpl).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(SketchesServiceClientImpl);
+  // Sketch list service
+  bind(SketchesService)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        SketchesServicePath
+      )
+    )
+    .inSingletonScope();
+  bind(SketchesServiceClientImpl).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(SketchesServiceClientImpl);
 
-    // Config service
-    bind(ConfigService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, ConfigServicePath)).inSingletonScope();
+  // Config service
+  bind(ConfigService)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        ConfigServicePath
+      )
+    )
+    .inSingletonScope();
 
-    // Boards service
-    bind(BoardsService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, BoardsServicePath)).inSingletonScope();
-    // Boards service client to receive and delegate notifications from the backend.
-    bind(BoardsServiceProvider).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(BoardsServiceProvider);
+  // Boards service
+  bind(BoardsService)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        BoardsServicePath
+      )
+    )
+    .inSingletonScope();
+  // Boards service client to receive and delegate notifications from the backend.
+  bind(BoardsServiceProvider).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(BoardsServiceProvider);
 
-    // To be able to track, and update the menu based on the core settings (aka. board details) of the currently selected board.
-    bind(FrontendApplicationContribution).to(BoardsDataMenuUpdater).inSingletonScope();
-    bind(BoardsDataStore).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(BoardsDataStore);
-    // Logger for the Arduino daemon
-    bind(ILogger).toDynamicValue(ctx => {
-        const parentLogger = ctx.container.get<ILogger>(ILogger);
-        return parentLogger.child('store');
-    }).inSingletonScope().whenTargetNamed('store');
-
-    // Boards auto-installer
-    bind(BoardsAutoInstaller).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(BoardsAutoInstaller);
-
-    // Boards list widget
-    bind(BoardsListWidget).toSelf();
-    bindViewContribution(bind, BoardsListWidgetFrontendContribution);
-    bind(WidgetFactory).toDynamicValue(context => ({
-        id: BoardsListWidget.WIDGET_ID,
-        createWidget: () => context.container.get(BoardsListWidget)
-    }));
-    bind(FrontendApplicationContribution).toService(BoardsListWidgetFrontendContribution);
-
-    // Board select dialog
-    bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
-    bind(BoardsConfigDialog).toSelf().inSingletonScope();
-    bind(BoardsConfigDialogProps).toConstantValue({
-        title: 'Select Board'
+  // To be able to track, and update the menu based on the core settings (aka. board details) of the currently selected board.
+  bind(FrontendApplicationContribution)
+    .to(BoardsDataMenuUpdater)
+    .inSingletonScope();
+  bind(BoardsDataStore).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(BoardsDataStore);
+  // Logger for the Arduino daemon
+  bind(ILogger)
+    .toDynamicValue((ctx) => {
+      const parentLogger = ctx.container.get<ILogger>(ILogger);
+      return parentLogger.child('store');
     })
+    .inSingletonScope()
+    .whenTargetNamed('store');
 
-    // Core service
-    bind(CoreService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, CoreServicePath)).inSingletonScope();
+  // Boards auto-installer
+  bind(BoardsAutoInstaller).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(BoardsAutoInstaller);
 
-    // Serial monitor
-    bind(MonitorModel).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(MonitorModel);
-    bind(MonitorWidget).toSelf();
-    bindViewContribution(bind, MonitorViewContribution);
-    bind(TabBarToolbarContribution).toService(MonitorViewContribution);
-    bind(WidgetFactory).toDynamicValue(context => ({
-        id: MonitorWidget.ID,
-        createWidget: () => context.container.get(MonitorWidget)
-    }));
-    // Frontend binding for the serial monitor service
-    bind(MonitorService).toDynamicValue(context => {
-        const connection = context.container.get(WebSocketConnectionProvider);
-        const client = context.container.get(MonitorServiceClientImpl);
-        return connection.createProxy(MonitorServicePath, client);
-    }).inSingletonScope();
-    bind(MonitorConnection).toSelf().inSingletonScope();
-    // Serial monitor service client to receive and delegate notifications from the backend.
-    bind(MonitorServiceClientImpl).toSelf().inSingletonScope();
-    bind(MonitorServiceClient).toDynamicValue(context => {
-        const client = context.container.get(MonitorServiceClientImpl);
-        WebSocketConnectionProvider.createProxy(context.container, MonitorServicePath, client);
-        return client;
-    }).inSingletonScope();
+  // Boards list widget
+  bind(BoardsListWidget).toSelf();
+  bindViewContribution(bind, BoardsListWidgetFrontendContribution);
+  bind(WidgetFactory).toDynamicValue((context) => ({
+    id: BoardsListWidget.WIDGET_ID,
+    createWidget: () => context.container.get(BoardsListWidget),
+  }));
+  bind(FrontendApplicationContribution).toService(
+    BoardsListWidgetFrontendContribution
+  );
 
-    bind(WorkspaceService).toSelf().inSingletonScope();
-    rebind(TheiaWorkspaceService).toService(WorkspaceService);
+  // Board select dialog
+  bind(BoardsConfigDialogWidget).toSelf().inSingletonScope();
+  bind(BoardsConfigDialog).toSelf().inSingletonScope();
+  bind(BoardsConfigDialogProps).toConstantValue({
+    title: nls.localize('arduino/common/selectBoard', 'Select Board'),
+  });
 
-    // Customizing default Theia layout based on the editor mode: `pro-mode` or `classic`.
-    bind(EditorMode).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(EditorMode);
+  // Core service
+  bind(CoreService)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        CoreServicePath
+      )
+    )
+    .inSingletonScope();
 
-    // Layout and shell customizations.
-    rebind(TheiaOutlineViewContribution).to(OutlineViewContribution).inSingletonScope();
-    rebind(TheiaProblemContribution).to(ProblemContribution).inSingletonScope();
-    rebind(TheiaFileNavigatorContribution).to(FileNavigatorContribution).inSingletonScope();
-    rebind(TheiaEditorContribution).to(EditorContribution).inSingletonScope();
-    rebind(TheiaMonacoStatusBarContribution).to(MonacoStatusBarContribution).inSingletonScope();
-    rebind(TheiaApplicationShell).to(ApplicationShell).inSingletonScope();
-    rebind(TheiaScmContribution).to(ScmContribution).inSingletonScope();
-    rebind(TheiaSearchInWorkspaceFrontendContribution).to(SearchInWorkspaceFrontendContribution).inSingletonScope();
-    rebind(TheiaFrontendApplication).to(FrontendApplication).inSingletonScope();
-    rebind(TheiaWorkspaceFrontendContribution).to(WorkspaceFrontendContribution).inSingletonScope();
-    rebind(TheiaFileMenuContribution).to(ArduinoFileMenuContribution).inSingletonScope();
-    rebind(TheiaCommonFrontendContribution).to(CommonFrontendContribution).inSingletonScope();
-    rebind(TheiaPreferencesContribution).to(PreferencesContribution).inSingletonScope();
-    rebind(TheiaKeybindingRegistry).to(KeybindingRegistry).inSingletonScope();
-    rebind(TheiaWorkspaceCommandContribution).to(WorkspaceCommandContribution).inSingletonScope();
-    rebind(TheiaWorkspaceDeleteHandler).to(WorkspaceDeleteHandler).inSingletonScope();
-    rebind(TheiaEditorWidgetFactory).to(EditorWidgetFactory).inSingletonScope();
-    rebind(TabBarToolbarFactory).toFactory(({ container: parentContainer }) => () => {
+  // Serial monitor
+  bind(SerialModel).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(SerialModel);
+  bind(MonitorWidget).toSelf();
+  bindViewContribution(bind, MonitorViewContribution);
+  bind(TabBarToolbarContribution).toService(MonitorViewContribution);
+  bind(WidgetFactory).toDynamicValue((context) => ({
+    id: MonitorWidget.ID,
+    createWidget: () => context.container.get(MonitorWidget),
+  }));
+  // Frontend binding for the serial service
+  bind(SerialService)
+    .toDynamicValue((context) => {
+      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);
+  bind(WorkspaceVariableContribution).toSelf().inSingletonScope();
+  rebind(TheiaWorkspaceVariableContribution).toService(
+    WorkspaceVariableContribution
+  );
+
+  // Customizing default Theia layout based on the editor mode: `pro-mode` or `classic`.
+  bind(EditorMode).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(EditorMode);
+
+  // Layout and shell customizations.
+  rebind(TheiaOutlineViewContribution)
+    .to(OutlineViewContribution)
+    .inSingletonScope();
+  rebind(TheiaProblemContribution).to(ProblemContribution).inSingletonScope();
+  rebind(TheiaFileNavigatorContribution)
+    .to(FileNavigatorContribution)
+    .inSingletonScope();
+  rebind(TheiaKeymapsFrontendContribution)
+    .to(KeymapsFrontendContribution)
+    .inSingletonScope();
+  rebind(TheiaEditorPreviewContribution)
+    .to(EditorPreviewContribution)
+    .inSingletonScope();
+  rebind(TheiaMonacoStatusBarContribution)
+    .to(MonacoStatusBarContribution)
+    .inSingletonScope();
+  rebind(TheiaApplicationShell).to(ApplicationShell).inSingletonScope();
+  rebind(TheiaScmContribution).to(ScmContribution).inSingletonScope();
+  rebind(TheiaSearchInWorkspaceFrontendContribution)
+    .to(SearchInWorkspaceFrontendContribution)
+    .inSingletonScope();
+  rebind(TheiaFrontendApplication).to(FrontendApplication).inSingletonScope();
+  rebind(TheiaWorkspaceFrontendContribution)
+    .to(WorkspaceFrontendContribution)
+    .inSingletonScope();
+  rebind(TheiaFileMenuContribution)
+    .to(ArduinoFileMenuContribution)
+    .inSingletonScope();
+  rebind(TheiaCommonFrontendContribution)
+    .to(CommonFrontendContribution)
+    .inSingletonScope();
+  rebind(TheiaPreferencesContribution)
+    .to(PreferencesContribution)
+    .inSingletonScope();
+  rebind(TheiaKeybindingRegistry).to(KeybindingRegistry).inSingletonScope();
+  rebind(TheiaWorkspaceCommandContribution)
+    .to(WorkspaceCommandContribution)
+    .inSingletonScope();
+  rebind(TheiaWorkspaceDeleteHandler)
+    .to(WorkspaceDeleteHandler)
+    .inSingletonScope();
+  rebind(TheiaEditorWidgetFactory).to(EditorWidgetFactory).inSingletonScope();
+  rebind(TabBarToolbarFactory).toFactory(
+    ({ container: parentContainer }) =>
+      () => {
         const container = parentContainer.createChild();
         container.bind(TabBarToolbar).toSelf().inSingletonScope();
         return container.get(TabBarToolbar);
-    });
-    bind(OutputWidget).toSelf().inSingletonScope();
-    rebind(TheiaOutputWidget).toService(OutputWidget);
-    bind(OutputChannelManager).toSelf().inSingletonScope();
-    rebind(TheiaOutputChannelManager).toService(OutputChannelManager);
-    bind(OutputChannelRegistryMainImpl).toSelf().inTransientScope();
-    rebind(TheiaOutputChannelRegistryMainImpl).toService(OutputChannelRegistryMainImpl);
-    bind(MonacoTextModelService).toSelf().inSingletonScope();
-    rebind(TheiaMonacoTextModelService).toService(MonacoTextModelService);
+      }
+  );
+  bind(OutputWidget).toSelf().inSingletonScope();
+  rebind(TheiaOutputWidget).toService(OutputWidget);
+  bind(OutputChannelManager).toSelf().inSingletonScope();
+  rebind(TheiaOutputChannelManager).toService(OutputChannelManager);
+  bind(OutputChannelRegistryMainImpl).toSelf().inTransientScope();
+  rebind(TheiaOutputChannelRegistryMainImpl).toService(
+    OutputChannelRegistryMainImpl
+  );
+  bind(MonacoTextModelService).toSelf().inSingletonScope();
+  rebind(TheiaMonacoTextModelService).toService(MonacoTextModelService);
+  bind(MonacoEditorProvider).toSelf().inSingletonScope();
+  rebind(TheiaMonacoEditorProvider).toService(MonacoEditorProvider);
 
-    // Show a disconnected status bar, when the daemon is not available
-    bind(ApplicationConnectionStatusContribution).toSelf().inSingletonScope();
-    rebind(TheiaApplicationConnectionStatusContribution).toService(ApplicationConnectionStatusContribution);
-    bind(FrontendConnectionStatusService).toSelf().inSingletonScope();
-    rebind(TheiaFrontendConnectionStatusService).toService(FrontendConnectionStatusService);
+  bind(SearchInWorkspaceWidget).toSelf();
+  rebind(TheiaSearchInWorkspaceWidget).toService(SearchInWorkspaceWidget);
 
-    // Editor customizations. Sets the editor to `readOnly` if under the data dir.
-    bind(EditorManager).toSelf().inSingletonScope();
-    rebind(TheiaEditorManager).toService(EditorManager);
+  // replace search icon
+  rebind(TheiaSearchInWorkspaceFactory)
+    .to(SearchInWorkspaceFactory)
+    .inSingletonScope();
 
-    // Decorator customizations
-    bind(TabBarDecoratorService).toSelf().inSingletonScope();
-    rebind(TheiaTabBarDecoratorService).toService(TabBarDecoratorService);
+  rebind(TheiaSearchInWorkspaceResultTreeWidget).toDynamicValue(
+    ({ container }) => {
+      const childContainer = createTreeContainer(container);
+      childContainer.bind(SearchInWorkspaceResultTreeWidget).toSelf();
+      childContainer
+        .rebind(TreeWidget)
+        .toService(SearchInWorkspaceResultTreeWidget);
+      return childContainer.get(SearchInWorkspaceResultTreeWidget);
+    }
+  );
 
-    // Problem markers
-    bind(ProblemManager).toSelf().inSingletonScope();
-    rebind(TheiaProblemManager).toService(ProblemManager);
+  // Show a disconnected status bar, when the daemon is not available
+  bind(ApplicationConnectionStatusContribution).toSelf().inSingletonScope();
+  rebind(TheiaApplicationConnectionStatusContribution).toService(
+    ApplicationConnectionStatusContribution
+  );
+  bind(FrontendConnectionStatusService).toSelf().inSingletonScope();
+  rebind(TheiaFrontendConnectionStatusService).toService(
+    FrontendConnectionStatusService
+  );
 
-    // Customized layout restorer that can restore the state in async way: https://github.com/eclipse-theia/theia/issues/6579
-    bind(ShellLayoutRestorer).toSelf().inSingletonScope();
-    rebind(TheiaShellLayoutRestorer).toService(ShellLayoutRestorer);
+  // Decorator customizations
+  bind(TabBarDecoratorService).toSelf().inSingletonScope();
+  rebind(TheiaTabBarDecoratorService).toService(TabBarDecoratorService);
 
-    // No dropdown for the _Output_ view.
-    bind(OutputToolbarContribution).toSelf().inSingletonScope();
-    rebind(TheiaOutputToolbarContribution).toService(OutputToolbarContribution);
+  // Problem markers
+  bind(ProblemManager).toSelf().inSingletonScope();
+  rebind(TheiaProblemManager).toService(ProblemManager);
 
-    bind(ArduinoDaemon).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, ArduinoDaemonPath)).inSingletonScope();
+  // Customized layout restorer that can restore the state in async way: https://github.com/eclipse-theia/theia/issues/6579
+  bind(ShellLayoutRestorer).toSelf().inSingletonScope();
+  rebind(TheiaShellLayoutRestorer).toService(ShellLayoutRestorer);
 
-    // File-system extension
-    bind(FileSystemExt).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, FileSystemExtPath)).inSingletonScope();
+  // No dropdown for the _Output_ view.
+  bind(OutputToolbarContribution).toSelf().inSingletonScope();
+  rebind(TheiaOutputToolbarContribution).toService(OutputToolbarContribution);
 
-    // Examples service@
-    bind(ExamplesService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, ExamplesServicePath)).inSingletonScope();
+  bind(ArduinoDaemon)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        ArduinoDaemonPath
+      )
+    )
+    .inSingletonScope();
 
-    // Executable URIs known by the backend
-    bind(ExecutableService).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, ExecutableServicePath)).inSingletonScope();
+  bind(ArduinoFirmwareUploader)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        ArduinoFirmwareUploaderPath
+      )
+    )
+    .inSingletonScope();
 
-    Contribution.configure(bind, NewSketch);
-    Contribution.configure(bind, OpenSketch);
-    Contribution.configure(bind, Close);
-    Contribution.configure(bind, SaveSketch);
-    Contribution.configure(bind, SaveAsSketch);
-    Contribution.configure(bind, VerifySketch);
-    Contribution.configure(bind, UploadSketch);
-    Contribution.configure(bind, OpenSketchExternal);
-    Contribution.configure(bind, EditContributions);
-    Contribution.configure(bind, QuitApp);
-    Contribution.configure(bind, SketchControl);
-    Contribution.configure(bind, Settings);
-    Contribution.configure(bind, BurnBootloader);
-    Contribution.configure(bind, BuiltInExamples);
-    Contribution.configure(bind, LibraryExamples);
-    Contribution.configure(bind, IncludeLibrary);
-    Contribution.configure(bind, About);
-    Contribution.configure(bind, Debug);
-    Contribution.configure(bind, Sketchbook);
-    Contribution.configure(bind, BoardSelection);
-    Contribution.configure(bind, OpenRecentSketch);
-    Contribution.configure(bind, Help);
-    Contribution.configure(bind, AddFile);
-    Contribution.configure(bind, ArchiveSketch);
-    Contribution.configure(bind, AddZipLibrary);
+  // File-system extension
+  bind(FileSystemExt)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        FileSystemExtPath
+      )
+    )
+    .inSingletonScope();
 
-    bind(OutputServiceImpl).toSelf().inSingletonScope().onActivation(({ container }, outputService) => {
-        WebSocketConnectionProvider.createProxy(container, OutputServicePath, outputService);
-        return outputService;
-    });
-    bind(OutputService).toService(OutputServiceImpl);
+  // Examples service@
+  bind(ExamplesService)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        ExamplesServicePath
+      )
+    )
+    .inSingletonScope();
 
-    bind(NotificationCenter).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(NotificationCenter);
-    bind(NotificationServiceServer).toDynamicValue(context => WebSocketConnectionProvider.createProxy(context.container, NotificationServicePath)).inSingletonScope();
+  // Executable URIs known by the backend
+  bind(ExecutableService)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        ExecutableServicePath
+      )
+    )
+    .inSingletonScope();
 
-    // Enable the dirty indicator on uncloseable widgets.
-    rebind(TabBarRendererFactory).toFactory(context => () => {
-        const contextMenuRenderer = context.container.get<ContextMenuRenderer>(ContextMenuRenderer);
-        const decoratorService = context.container.get<TabBarDecoratorService>(TabBarDecoratorService);
-        const iconThemeService = context.container.get<IconThemeService>(IconThemeService);
-        return new TabBarRenderer(contextMenuRenderer, decoratorService, iconThemeService);
+  Contribution.configure(bind, NewSketch);
+  Contribution.configure(bind, OpenSketch);
+  Contribution.configure(bind, Close);
+  Contribution.configure(bind, SaveSketch);
+  Contribution.configure(bind, SaveAsSketch);
+  Contribution.configure(bind, VerifySketch);
+  Contribution.configure(bind, UploadSketch);
+  Contribution.configure(bind, OpenSketchExternal);
+  Contribution.configure(bind, EditContributions);
+  Contribution.configure(bind, QuitApp);
+  Contribution.configure(bind, SketchControl);
+  Contribution.configure(bind, Settings);
+  Contribution.configure(bind, BurnBootloader);
+  Contribution.configure(bind, BuiltInExamples);
+  Contribution.configure(bind, LibraryExamples);
+  Contribution.configure(bind, IncludeLibrary);
+  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()
+    .inSingletonScope()
+    .onActivation(({ container }, responseService) => {
+      WebSocketConnectionProvider.createProxy(
+        container,
+        ResponseServicePath,
+        responseService
+      );
+      return responseService;
     });
 
-    // Workaround for https://github.com/eclipse-theia/theia/issues/8722
-    // Do not trigger a save on IDE startup if `"editor.autoSave": "on"` was set as a preference.
-    bind(EditorCommandContribution).toSelf().inSingletonScope();
-    rebind(TheiaEditorCommandContribution).toService(EditorCommandContribution);
+  bind(ResponseService).toService(ResponseServiceImpl);
+  bind(ResponseServiceArduino).toService(ResponseServiceImpl);
 
-    // Silent the badge decoration in the Explorer view.
-    bind(NavigatorTabBarDecorator).toSelf().inSingletonScope();
-    rebind(TheiaNavigatorTabBarDecorator).toService(NavigatorTabBarDecorator);
+  bind(NotificationCenter).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(NotificationCenter);
+  bind(NotificationServiceServer)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        NotificationServicePath
+      )
+    )
+    .inSingletonScope();
 
-    // To avoid running `Save All` when there are no dirty editors before starting the debug session.
-    bind(DebugSessionManager).toSelf().inSingletonScope();
-    rebind(TheiaDebugSessionManager).toService(DebugSessionManager);
-    // To remove the `Run` menu item from the application menu.
-    bind(DebugFrontendApplicationContribution).toSelf().inSingletonScope();
-    rebind(TheiaDebugFrontendApplicationContribution).toService(DebugFrontendApplicationContribution);
+  // Enable the dirty indicator on uncloseable widgets.
+  rebind(TabBarRendererFactory).toFactory((context) => () => {
+    const contextMenuRenderer =
+      context.container.get<ContextMenuRenderer>(ContextMenuRenderer);
+    const decoratorService = context.container.get<TabBarDecoratorService>(
+      TabBarDecoratorService
+    );
+    const iconThemeService =
+      context.container.get<IconThemeService>(IconThemeService);
+    return new TabBarRenderer(
+      contextMenuRenderer,
+      decoratorService,
+      iconThemeService
+    );
+  });
 
-    // Preferences
-    bindArduinoPreferences(bind);
+  // Workaround for https://github.com/eclipse-theia/theia/issues/8722
+  // Do not trigger a save on IDE startup if `"editor.autoSave": "on"` was set as a preference.
+  bind(EditorCommandContribution).toSelf().inSingletonScope();
+  rebind(TheiaEditorCommandContribution).toService(EditorCommandContribution);
 
-    // Settings wrapper for the preferences and the CLI config.
-    bind(SettingsService).toSelf().inSingletonScope();
-    // Settings dialog and widget
-    bind(SettingsWidget).toSelf().inSingletonScope();
-    bind(SettingsDialog).toSelf().inSingletonScope();
-    bind(SettingsDialogProps).toConstantValue({
-        title: 'Preferences'
-    });
+  // Silent the badge decoration in the Explorer view.
+  bind(NavigatorTabBarDecorator).toSelf().inSingletonScope();
+  rebind(TheiaNavigatorTabBarDecorator).toService(NavigatorTabBarDecorator);
+
+  // To avoid running `Save All` when there are no dirty editors before starting the debug session.
+  bind(DebugSessionManager).toSelf().inSingletonScope();
+  rebind(TheiaDebugSessionManager).toService(DebugSessionManager);
+  // To remove the `Run` menu item from the application menu.
+  bind(DebugFrontendApplicationContribution).toSelf().inSingletonScope();
+  rebind(TheiaDebugFrontendApplicationContribution).toService(
+    DebugFrontendApplicationContribution
+  );
+  // To be able to use a `launch.json` from outside of the workspace.
+  bind(DebugConfigurationManager).toSelf().inSingletonScope();
+  rebind(TheiaDebugConfigurationManager).toService(DebugConfigurationManager);
+
+  // Preferences
+  bindArduinoPreferences(bind);
+
+  // Settings wrapper for the preferences and the CLI config.
+  bind(SettingsService).toSelf().inSingletonScope();
+  // Settings dialog and widget
+  bind(SettingsWidget).toSelf().inSingletonScope();
+  bind(SettingsDialog).toSelf().inSingletonScope();
+  bind(SettingsDialogProps).toConstantValue({
+    title: nls.localize(
+      'vscode/preferences.contribution/preferences',
+      'Preferences'
+    ),
+  });
+
+  bind(StorageWrapper).toSelf().inSingletonScope();
+  bind(CommandContribution).toService(StorageWrapper);
+
+  bind(NotificationManager).toSelf().inSingletonScope();
+  rebind(TheiaNotificationManager).toService(NotificationManager);
+  bind(NotificationsRenderer).toSelf().inSingletonScope();
+  rebind(TheiaNotificationsRenderer).toService(NotificationsRenderer);
+
+  // UI for the Sketchbook
+  bind(SketchbookWidget).toSelf();
+  bind(SketchbookTreeWidget).toDynamicValue(({ container }) =>
+    createSketchbookTreeWidget(container)
+  );
+  bindViewContribution(bind, SketchbookWidgetContribution);
+  bind(FrontendApplicationContribution).toService(SketchbookWidgetContribution);
+  bind(WidgetFactory).toDynamicValue(({ container }) => ({
+    id: 'arduino-sketchbook-widget',
+    createWidget: () => container.get(SketchbookWidget),
+  }));
+
+  bind(CloudSketchbookWidget).toSelf();
+  rebind(SketchbookWidget).toService(CloudSketchbookWidget);
+  bind(CloudSketchbookTreeWidget).toDynamicValue(({ container }) =>
+    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(AuthenticationService)
+    .toDynamicValue((context) =>
+      WebSocketConnectionProvider.createProxy(
+        context.container,
+        AuthenticationServicePath
+      )
+    )
+    .inSingletonScope();
+  bind(CreateFsProvider).toSelf().inSingletonScope();
+  bind(FrontendApplicationContribution).toService(CreateFsProvider);
+  bind(FileServiceContribution).toService(CreateFsProvider);
+  bind(CloudSketchbookContribution).toSelf().inSingletonScope();
+  bind(CommandContribution).toService(CloudSketchbookContribution);
+  bind(LocalCacheFsProvider).toSelf().inSingletonScope();
+  bind(FileServiceContribution).toService(LocalCacheFsProvider);
+  bind(CloudSketchbookCompositeWidget).toSelf();
+  bind<WidgetFactory>(WidgetFactory).toDynamicValue((ctx) => ({
+    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

@@ -1,74 +1,205 @@
 import { interfaces } from 'inversify';
-import { createPreferenceProxy, PreferenceProxy, PreferenceService, PreferenceContribution, PreferenceSchema } from '@theia/core/lib/browser/preferences';
+import {
+  createPreferenceProxy,
+  PreferenceProxy,
+  PreferenceService,
+  PreferenceContribution,
+  PreferenceSchema,
+} from '@theia/core/lib/browser/preferences';
+import { nls } from '@theia/core/lib/common';
 import { CompilerWarningLiterals, CompilerWarnings } from '../common/protocol';
 
 export const ArduinoConfigSchema: PreferenceSchema = {
-    'type': 'object',
-    'properties': {
-        'arduino.language.log': {
-            'type': 'boolean',
-            'description': "True if the Arduino Language Server should generate log files into the sketch folder. Otherwise, false. It's false by default.",
-            'default': false
-        },
-        'arduino.compile.verbose': {
-            'type': 'boolean',
-            'description': '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",
-            'default': 'None'
-        },
-        'arduino.upload.verbose': {
-            'type': 'boolean',
-            'description': 'True for verbose upload output. False by default.',
-            'default': false
-        },
-        'arduino.upload.verify': {
-            'type': 'boolean',
-            'default': false
-        },
-        'arduino.window.autoScale': {
-            'type': 'boolean',
-            'description': '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.',
-            'default': 0
-        },
-        'arduino.ide.autoUpdate': {
-            'type': 'boolean',
-            'description': 'True to enable automatic update checks. The IDE will check for updates automatically and periodically.',
-            'default': true
-        }
-    }
+  type: 'object',
+  properties: {
+    'arduino.language.log': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/language.log',
+        "True if the Arduino Language Server should generate log files into the sketch folder. Otherwise, false. It's false by default."
+      ),
+      default: false,
+    },
+    'arduino.compile.verbose': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/compile.verbose',
+        'True for verbose compile output. False by default'
+      ),
+      default: false,
+    },
+    'arduino.compile.warnings': {
+      enum: [...CompilerWarningLiterals],
+      description: nls.localize(
+        'arduino/preferences/compile.warnings',
+        "Tells gcc which warning level to use. It's 'None' by default"
+      ),
+      default: 'None',
+    },
+    'arduino.upload.verbose': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/upload.verbose',
+        'True for verbose upload output. False by default.'
+      ),
+      default: false,
+    },
+    'arduino.upload.verify': {
+      type: 'boolean',
+      default: false,
+    },
+    'arduino.window.autoScale': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/window.autoScale',
+        'True if the user interface automatically scales with the font size.'
+      ),
+      default: true,
+    },
+    'arduino.window.zoomLevel': {
+      type: 'number',
+      description: 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: 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: nls.localize(
+        'arduino/preferences/sketchbook.showAllFiles',
+        'True to show all sketch files inside the sketch. It is false by default.'
+      ),
+      default: false,
+    },
+    'arduino.cloud.enabled': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cloud.enabled',
+        'True if the sketch sync functions are enabled. Defaults to true.'
+      ),
+      default: true,
+    },
+    'arduino.cloud.pull.warn': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cloud.pull.warn',
+        'True if users should be warned before pulling a cloud sketch. Defaults to true.'
+      ),
+      default: true,
+    },
+    'arduino.cloud.push.warn': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cloud.push.warn',
+        'True if users should be warned before pushing a cloud sketch. Defaults to true.'
+      ),
+      default: true,
+    },
+    'arduino.cloud.pushpublic.warn': {
+      type: 'boolean',
+      description: nls.localize(
+        'arduino/preferences/cloud.pushpublic.warn',
+        'True if users should be warned before pushing a public sketch to the cloud. Defaults to true.'
+      ),
+      default: true,
+    },
+    'arduino.cloud.sketchSyncEnpoint': {
+      type: 'string',
+      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: nls.localize(
+        'arduino/preferences/auth.clientID',
+        'The OAuth2 client ID.'
+      ),
+      default: 'C34Ya6ex77jTNxyKWj01lCe1vAHIaPIo',
+    },
+    'arduino.auth.domain': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/auth.domain',
+        'The OAuth2 domain.'
+      ),
+      default: 'login.arduino.cc',
+    },
+    'arduino.auth.audience': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/auth.audience',
+        'The OAuth2 audience.'
+      ),
+      default: 'https://api.arduino.cc',
+    },
+    'arduino.auth.registerUri': {
+      type: 'string',
+      description: nls.localize(
+        'arduino/preferences/auth.registerUri',
+        'The URI used to register a new user.'
+      ),
+      default: 'https://auth.arduino.cc/login#/register',
+    },
+  },
 };
 
 export interface ArduinoConfiguration {
-    'arduino.language.log': boolean;
-    'arduino.compile.verbose': boolean;
-    'arduino.compile.warnings': CompilerWarnings;
-    'arduino.upload.verbose': boolean;
-    'arduino.upload.verify': boolean;
-    'arduino.window.autoScale': boolean;
-    'arduino.window.zoomLevel': number;
-    'arduino.ide.autoUpdate': boolean;
+  'arduino.language.log': boolean;
+  'arduino.compile.verbose': boolean;
+  'arduino.compile.warnings': CompilerWarnings;
+  'arduino.upload.verbose': boolean;
+  'arduino.upload.verify': boolean;
+  '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;
+  'arduino.cloud.push.warn': boolean;
+  'arduino.cloud.pushpublic.warn': boolean;
+  'arduino.cloud.sketchSyncEnpoint': string;
+  'arduino.auth.clientID': string;
+  'arduino.auth.domain': string;
+  'arduino.auth.audience': string;
+  'arduino.auth.registerUri': string;
 }
 
 export const ArduinoPreferences = Symbol('ArduinoPreferences');
 export type ArduinoPreferences = PreferenceProxy<ArduinoConfiguration>;
 
-export function createArduinoPreferences(preferences: PreferenceService): ArduinoPreferences {
-    return createPreferenceProxy(preferences, ArduinoConfigSchema);
+export function createArduinoPreferences(
+  preferences: PreferenceService
+): ArduinoPreferences {
+  return createPreferenceProxy(preferences, ArduinoConfigSchema);
 }
 
 export function bindArduinoPreferences(bind: interfaces.Bind): void {
-    bind(ArduinoPreferences).toDynamicValue(ctx => {
-        const preferences = ctx.container.get<PreferenceService>(PreferenceService);
-        return createArduinoPreferences(preferences);
-    });
-    bind(PreferenceContribution).toConstantValue({ schema: ArduinoConfigSchema });
+  bind(ArduinoPreferences).toDynamicValue((ctx) => {
+    const preferences = ctx.container.get<PreferenceService>(PreferenceService);
+    return createArduinoPreferences(preferences);
+  });
+  bind(PreferenceContribution).toConstantValue({
+    schema: ArduinoConfigSchema,
+  });
 }

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

@@ -7,7 +7,7 @@ import { MaybePromise } from '@theia/core/lib/common/types';
 /**
  * Class for determining the default workspace location from the
  * `location.hash`, the historical workspace locations, and recent sketch files.
- * 
+ *
  * The following logic is used for determining the default workspace location:
  * - `hash` points to an existing location?
  *  - Yes
@@ -20,49 +20,54 @@ import { MaybePromise } from '@theia/core/lib/common/types';
  *   - `try open recent workspace roots`, then `try open last modified sketches`, finally `create new sketch`.
  */
 namespace ArduinoWorkspaceRootResolver {
-    export interface InitOptions {
-        readonly isValid: (uri: string) => MaybePromise<boolean>;
-    }
-    export interface ResolveOptions {
-        readonly hash?: string
-        readonly recentWorkspaces: string[];
-        // Gathered from the default sketch folder. The default sketch folder is defined by the CLI.
-        readonly recentSketches: string[];
-    }
+  export interface InitOptions {
+    readonly isValid: (uri: string) => MaybePromise<boolean>;
+  }
+  export interface ResolveOptions {
+    readonly hash?: string;
+    readonly recentWorkspaces: string[];
+    // Gathered from the default sketch folder. The default sketch folder is defined by the CLI.
+    readonly recentSketches: string[];
+  }
 }
 export class ArduinoWorkspaceRootResolver {
+  constructor(protected options: ArduinoWorkspaceRootResolver.InitOptions) {}
 
-    constructor(protected options: ArduinoWorkspaceRootResolver.InitOptions) {
+  async resolve(
+    options: ArduinoWorkspaceRootResolver.ResolveOptions
+  ): Promise<{ uri: string } | undefined> {
+    const { hash, recentWorkspaces, recentSketches } = options;
+    for (const uri of [
+      this.hashToUri(hash),
+      ...recentWorkspaces,
+      ...recentSketches,
+    ].filter(notEmpty)) {
+      const valid = await this.isValid(uri);
+      if (valid) {
+        return { uri };
+      }
     }
+    return undefined;
+  }
 
-    async resolve(options: ArduinoWorkspaceRootResolver.ResolveOptions): Promise<{ uri: string } | undefined> {
-        const { hash, recentWorkspaces, recentSketches } = options;
-        for (const uri of [this.hashToUri(hash), ...recentWorkspaces, ...recentSketches].filter(notEmpty)) {
-            const valid = await this.isValid(uri);
-            if (valid) {
-                return { uri };
-            }
-        }
-        return undefined;
+  protected isValid(uri: string): MaybePromise<boolean> {
+    return this.options.isValid(uri);
+  }
+
+  // Note: here, the `hash` was defined as new `URI(yourValidFsPath).path` so we have to map it to a valid FS path first.
+  // This is important for Windows only and a NOOP on POSIX.
+  // Note: we set the `new URI(myValidUri).path.toString()` as the `hash`. See:
+  // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L143 and
+  // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L423
+  protected hashToUri(hash: string | undefined): string | undefined {
+    if (hash && hash.length > 1 && hash.startsWith('#')) {
+      const path = hash.slice(1); // Trim the leading `#`.
+      return new URI(
+        toUnix(path.slice(isWindows && hash.startsWith('/') ? 1 : 0))
+      )
+        .withScheme('file')
+        .toString();
     }
-
-    protected isValid(uri: string): MaybePromise<boolean> {
-        return this.options.isValid(uri);
-    }
-
-    // Note: here, the `hash` was defined as new `URI(yourValidFsPath).path` so we have to map it to a valid FS path first.
-    // This is important for Windows only and a NOOP on POSIX.
-    // Note: we set the `new URI(myValidUri).path.toString()` as the `hash`. See:
-    // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L143 and
-    // - https://github.com/eclipse-theia/theia/blob/8196e9dcf9c8de8ea0910efeb5334a974f426966/packages/workspace/src/browser/workspace-service.ts#L423
-    protected hashToUri(hash: string | undefined): string | undefined {
-        if (hash
-            && hash.length > 1
-            && hash.startsWith('#')) {
-            const path = hash.slice(1); // Trim the leading `#`.
-            return new URI(toUnix(path.slice(isWindows && hash.startsWith('/') ? 1 : 0))).withScheme('file').toString();
-        }
-        return undefined;
-    }
-
+    return undefined;
+  }
 }

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

@@ -0,0 +1,93 @@
+import { inject, injectable } from 'inversify';
+import { Emitter } from '@theia/core/lib/common/event';
+import { JsonRpcProxy } from '@theia/core/lib/common/messaging/proxy-factory';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import {
+  CommandRegistry,
+  CommandContribution,
+} from '@theia/core/lib/common/command';
+import {
+  AuthenticationService,
+  AuthenticationServiceClient,
+  AuthenticationSession,
+} from '../../common/protocol/authentication-service';
+import { CloudUserCommands } from './cloud-user-commands';
+import { serverPort } from '../../node/auth/authentication-server';
+import { AuthOptions } from '../../node/auth/types';
+import { ArduinoPreferences } from '../arduino-preferences';
+
+@injectable()
+export class AuthenticationClientService
+  implements
+    FrontendApplicationContribution,
+    CommandContribution,
+    AuthenticationServiceClient
+{
+  @inject(AuthenticationService)
+  protected readonly service: JsonRpcProxy<AuthenticationService>;
+
+  @inject(WindowService)
+  protected readonly windowService: WindowService;
+
+  @inject(ArduinoPreferences)
+  protected readonly arduinoPreferences: ArduinoPreferences;
+
+  protected authOptions: AuthOptions;
+  protected _session: AuthenticationSession | undefined;
+  protected readonly toDispose = new DisposableCollection();
+  protected readonly onSessionDidChangeEmitter = new Emitter<
+    AuthenticationSession | undefined
+  >();
+
+  readonly onSessionDidChange = this.onSessionDidChangeEmitter.event;
+
+  onStart(): void {
+    this.toDispose.push(this.onSessionDidChangeEmitter);
+    this.service.setClient(this);
+    this.service
+      .session()
+      .then((session) => this.notifySessionDidChange(session));
+    this.setOptions();
+    this.arduinoPreferences.onPreferenceChanged((event) => {
+      if (event.preferenceName.startsWith('arduino.auth.')) {
+        this.setOptions();
+      }
+    });
+  }
+
+  setOptions(): void {
+    this.service.setOptions({
+      redirectUri: `http://localhost:${serverPort}/callback`,
+      responseType: 'code',
+      clientID: this.arduinoPreferences['arduino.auth.clientID'],
+      domain: this.arduinoPreferences['arduino.auth.domain'],
+      audience: this.arduinoPreferences['arduino.auth.audience'],
+      registerUri: this.arduinoPreferences['arduino.auth.registerUri'],
+      scopes: ['openid', 'profile', 'email', 'offline_access'],
+    });
+  }
+
+  protected updateSession(session?: AuthenticationSession | undefined) {
+    this._session = session;
+    this.onSessionDidChangeEmitter.fire(this._session);
+  }
+
+  get session(): AuthenticationSession | undefined {
+    return this._session;
+  }
+
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(CloudUserCommands.LOGIN, {
+      execute: () => this.service.login(),
+    });
+    registry.registerCommand(CloudUserCommands.LOGOUT, {
+      execute: () => this.service.logout(),
+    });
+  }
+
+  notifySessionDidChange(session: AuthenticationSession | undefined): void {
+    this.updateSession(session);
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Command } from '@theia/core/lib/common/command';
+
+export namespace CloudUserCommands {
+  export const LOGIN = Command.toLocalizedCommand(
+    {
+      id: 'arduino-cloud--login',
+      label: 'Sign in',
+    },
+    'arduino/cloud/signIn'
+  );
+
+  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',
+    label: 'Contextual menu',
+  };
+}

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

@@ -1,11 +1,16 @@
 import { injectable, inject } from 'inversify';
 import { MessageService } from '@theia/core/lib/common/message-service';
 import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
-import { BoardsService, BoardsPackage } from '../../common/protocol/boards-service';
+import {
+  BoardsService,
+  BoardsPackage,
+  Board,
+} from '../../common/protocol/boards-service';
 import { BoardsServiceProvider } from './boards-service-provider';
-import { BoardsListWidgetFrontendContribution } from './boards-widget-frontend-contribution';
-import { InstallationProgressDialog } from '../widgets/progress-dialog';
 import { BoardsConfig } from './boards-config';
+import { Installable, ResponseServiceArduino } from '../../common/protocol';
+import { BoardsListWidgetFrontendContribution } from './boards-widget-frontend-contribution';
+import { nls } from '@theia/core/lib/common';
 
 /**
  * Listens on `BoardsConfig.Config` changes, if a board is selected which does not
@@ -13,50 +18,115 @@ import { BoardsConfig } from './boards-config';
  */
 @injectable()
 export class BoardsAutoInstaller implements FrontendApplicationContribution {
+  @inject(MessageService)
+  protected readonly messageService: MessageService;
 
-    @inject(MessageService)
-    protected readonly messageService: MessageService;
+  @inject(BoardsService)
+  protected readonly boardsService: BoardsService;
 
-    @inject(BoardsService)
-    protected readonly boardsService: BoardsService;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClient: BoardsServiceProvider;
+  @inject(ResponseServiceArduino)
+  protected readonly responseService: ResponseServiceArduino;
 
-    @inject(BoardsListWidgetFrontendContribution)
-    protected readonly boardsManagerFrontendContribution: BoardsListWidgetFrontendContribution;
+  @inject(BoardsListWidgetFrontendContribution)
+  protected readonly boardsManagerFrontendContribution: BoardsListWidgetFrontendContribution;
 
-    onStart(): void {
-        this.boardsServiceClient.onBoardsConfigChanged(this.ensureCoreExists.bind(this));
-        this.ensureCoreExists(this.boardsServiceClient.boardsConfig);
-    }
+  // Workaround for https://github.com/eclipse-theia/theia/issues/9349
+  protected notifications: Board[] = [];
 
-    protected ensureCoreExists(config: BoardsConfig.Config): void {
-        const { selectedBoard } = config;
-        if (selectedBoard) {
-            this.boardsService.search({}).then(packages => {
-                const candidates = packages
-                    .filter(pkg => BoardsPackage.contains(selectedBoard, pkg))
-                    .filter(({ installable, installedVersion }) => installable && !installedVersion);
-                for (const candidate of candidates) {
-                    // tslint:disable-next-line:max-line-length
-                    this.messageService.info(`The \`"${candidate.name}"\` core has to be installed for the currently selected \`"${selectedBoard.name}"\` board. Do you want to install it now?`, 'Install Manually', 'Yes').then(async answer => {
-                        if (answer === 'Yes') {
-                            const dialog = new InstallationProgressDialog(candidate.name, candidate.availableVersions[0]);
-                            dialog.open();
-                            try {
-                                await this.boardsService.install({ item: candidate });
-                            } finally {
-                                dialog.close();
-                            }
-                        }
-                        if (answer) {
-                            this.boardsManagerFrontendContribution.openView({ reveal: true }).then(widget => widget.refresh(candidate.name.toLocaleLowerCase()));
-                        }
-                    });
-                }
-            })
+  onStart(): void {
+    this.boardsServiceClient.onBoardsConfigChanged(
+      this.ensureCoreExists.bind(this)
+    );
+    this.ensureCoreExists(this.boardsServiceClient.boardsConfig);
+  }
+
+  protected ensureCoreExists(config: BoardsConfig.Config): void {
+    const { selectedBoard, selectedPort } = config;
+    if (
+      selectedBoard &&
+      selectedPort &&
+      !this.notifications.find((board) => Board.sameAs(board, selectedBoard))
+    ) {
+      this.notifications.push(selectedBoard);
+      this.boardsService.search({}).then((packages) => {
+        // filter packagesForBoard selecting matches from the cli (installed packages)
+        // and matches based on the board name
+        // NOTE: this ensures the Deprecated & new packages are all in the array
+        // so that we can check if any of the valid packages is already installed
+        const packagesForBoard = packages.filter(
+          (pkg) =>
+            BoardsPackage.contains(selectedBoard, pkg) ||
+            pkg.boards.some((board) => board.name === selectedBoard.name)
+        );
+
+        // check if one of the packages for the board is already installed. if so, no hint
+        if (
+          packagesForBoard.some(({ installedVersion }) => !!installedVersion)
+        ) {
+          return;
         }
-    }
 
+        // filter the installable (not installed) packages,
+        // CLI returns the packages already sorted with the deprecated ones at the end of the list
+        // in order to ensure the new ones are preferred
+        const candidates = packagesForBoard.filter(
+          ({ installable, installedVersion }) =>
+            installable && !installedVersion
+        );
+
+        const candidate = candidates[0];
+        if (candidate) {
+          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(
+              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)
+              );
+              if (index !== -1) {
+                this.notifications.splice(index, 1);
+              }
+              if (answer === yes) {
+                await Installable.installWithProgress({
+                  installable: this.boardsService,
+                  item: candidate,
+                  messageService: this.messageService,
+                  responseService: this.responseService,
+                  version: candidate.availableVersions[0],
+                });
+                return;
+              }
+              if (answer === manualInstall) {
+                this.boardsManagerFrontendContribution
+                  .openView({ reveal: true })
+                  .then((widget) =>
+                    widget.refresh(candidate.name.toLocaleLowerCase())
+                  );
+              }
+            });
+        }
+      });
+    }
+  }
 }

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

@@ -9,60 +9,62 @@ import { NotificationCenter } from '../notification-center';
 
 @injectable()
 export class BoardsConfigDialogWidget extends ReactWidget {
+  @inject(BoardsService)
+  protected readonly boardsService: BoardsService;
 
-    @inject(BoardsService)
-    protected readonly boardsService: BoardsService;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClient: BoardsServiceProvider;
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
 
-    @inject(NotificationCenter)
-    protected readonly notificationCenter: NotificationCenter;
+  protected readonly onFilterTextDidChangeEmitter = new Emitter<string>();
+  protected readonly onBoardConfigChangedEmitter =
+    new Emitter<BoardsConfig.Config>();
+  readonly onBoardConfigChanged = this.onBoardConfigChangedEmitter.event;
 
-    protected readonly onFilterTextDidChangeEmitter = new Emitter<string>();
-    protected readonly onBoardConfigChangedEmitter = new Emitter<BoardsConfig.Config>();
-    readonly onBoardConfigChanged = this.onBoardConfigChangedEmitter.event;
+  protected focusNode: HTMLElement | undefined;
 
-    protected focusNode: HTMLElement | undefined;
+  constructor() {
+    super();
+    this.id = 'select-board-dialog';
+    this.toDispose.pushAll([
+      this.onBoardConfigChangedEmitter,
+      this.onFilterTextDidChangeEmitter,
+    ]);
+  }
 
-    constructor() {
-        super();
-        this.id = 'select-board-dialog';
-        this.toDispose.pushAll([
-            this.onBoardConfigChangedEmitter,
-            this.onFilterTextDidChangeEmitter
-        ]);
+  search(query: string): void {
+    this.onFilterTextDidChangeEmitter.fire(query);
+  }
+
+  protected fireConfigChanged = (config: BoardsConfig.Config) => {
+    this.onBoardConfigChangedEmitter.fire(config);
+  };
+
+  protected setFocusNode = (element: HTMLElement | undefined) => {
+    this.focusNode = element;
+  };
+
+  protected render(): React.ReactNode {
+    return (
+      <div className="selectBoardContainer">
+        <BoardsConfig
+          boardsServiceProvider={this.boardsServiceClient}
+          notificationCenter={this.notificationCenter}
+          onConfigChange={this.fireConfigChanged}
+          onFocusNodeSet={this.setFocusNode}
+          onFilteredTextDidChangeEvent={this.onFilterTextDidChangeEmitter.event}
+        />
+      </div>
+    );
+  }
+
+  protected onActivateRequest(msg: Message): void {
+    super.onActivateRequest(msg);
+    if (this.focusNode instanceof HTMLInputElement) {
+      this.focusNode.select();
     }
-
-    search(query: string): void {
-        this.onFilterTextDidChangeEmitter.fire(query);
-    }
-
-    protected fireConfigChanged = (config: BoardsConfig.Config) => {
-        this.onBoardConfigChangedEmitter.fire(config);
-    }
-
-    protected setFocusNode = (element: HTMLElement | undefined) => {
-        this.focusNode = element;
-    }
-
-    protected render(): React.ReactNode {
-        return <div className='selectBoardContainer'>
-            <BoardsConfig
-                boardsServiceProvider={this.boardsServiceClient}
-                notificationCenter={this.notificationCenter}
-                onConfigChange={this.fireConfigChanged}
-                onFocusNodeSet={this.setFocusNode}
-                onFilteredTextDidChangeEvent={this.onFilterTextDidChangeEmitter.event} />
-        </div>;
-    }
-
-    protected onActivateRequest(msg: Message): void {
-        super.onActivateRequest(msg);
-        if (this.focusNode instanceof HTMLInputElement) {
-            this.focusNode.select();
-        }
-        (this.focusNode || this.node).focus();
-    }
-
+    (this.focusNode || this.node).focus();
+  }
 }

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

@@ -1,123 +1,145 @@
 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 {
-}
+export class BoardsConfigDialogProps extends DialogProps {}
 
 @injectable()
 export class BoardsConfigDialog extends AbstractDialog<BoardsConfig.Config> {
+  @inject(BoardsConfigDialogWidget)
+  protected readonly widget: BoardsConfigDialogWidget;
 
-    @inject(BoardsConfigDialogWidget)
-    protected readonly widget: BoardsConfigDialogWidget;
+  @inject(BoardsService)
+  protected readonly boardService: BoardsService;
 
-    @inject(BoardsService)
-    protected readonly boardService: BoardsService;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClient: BoardsServiceProvider;
+  protected config: BoardsConfig.Config = {};
 
-    protected config: BoardsConfig.Config = {};
+  constructor(
+    @inject(BoardsConfigDialogProps)
+    protected readonly props: BoardsConfigDialogProps
+  ) {
+    super(props);
 
-    constructor(@inject(BoardsConfigDialogProps) protected readonly props: BoardsConfigDialogProps) {
-        super(props);
+    this.contentNode.classList.add('select-board-dialog');
+    this.contentNode.appendChild(this.createDescription());
 
-        this.contentNode.classList.add('select-board-dialog');
-        this.contentNode.appendChild(this.createDescription());
+    this.appendCloseButton(
+      nls.localize('vscode/issueMainService/cancel', 'Cancel')
+    );
+    this.appendAcceptButton(nls.localize('vscode/issueMainService/ok', 'OK'));
+  }
 
-        this.appendCloseButton('CANCEL');
-        this.appendAcceptButton('OK');
-    }
-
-    @postConstruct()
-    protected init(): void {
-        this.toDispose.push(this.boardsServiceClient.onBoardsConfigChanged(config => {
-            this.config = config;
-            this.update();
-        }));
-    }
-
-    /**
-     * Pass in an empty string if you want to reset the search term. Using `undefined` has no effect.
-     */
-    async open(query: string | undefined = undefined): Promise<BoardsConfig.Config | undefined> {
-        if (typeof query === 'string') {
-            this.widget.search(query);
-        }
-        return super.open();
-    }
-
-    protected createDescription(): HTMLElement {
-        const head = document.createElement('div');
-        head.classList.add('head');
-
-        const title = document.createElement('div');
-        title.textContent = 'Select Other Board & Port';
-        title.classList.add('title');
-        head.appendChild(title);
-
-        const text = document.createElement('div');
-        text.classList.add('text');
-        head.appendChild(text);
-
-        for (const paragraph of [
-            'Select both a Board and a Port if you want to upload a sketch.',
-            'If you only select a Board you will be able just to compile, but not to upload your sketch.'
-        ]) {
-            const p = document.createElement('p');
-            p.textContent = paragraph;
-            text.appendChild(p);
-        }
-
-        return head;
-    }
-
-    protected onAfterAttach(msg: Message): void {
-        if (this.widget.isAttached) {
-            Widget.detach(this.widget);
-        }
-        Widget.attach(this.widget, this.contentNode);
-        this.toDisposeOnDetach.push(this.widget.onBoardConfigChanged(config => {
-            this.config = config;
-            this.update();
-        }));
-        super.onAfterAttach(msg);
+  @postConstruct()
+  protected init(): void {
+    this.toDispose.push(
+      this.boardsServiceClient.onBoardsConfigChanged((config) => {
+        this.config = config;
         this.update();
+      })
+    );
+  }
+
+  /**
+   * Pass in an empty string if you want to reset the search term. Using `undefined` has no effect.
+   */
+  async open(
+    query: string | undefined = undefined
+  ): Promise<BoardsConfig.Config | undefined> {
+    if (typeof query === 'string') {
+      this.widget.search(query);
+    }
+    return super.open();
+  }
+
+  protected createDescription(): HTMLElement {
+    const head = document.createElement('div');
+    head.classList.add('head');
+
+    const title = document.createElement('div');
+    title.textContent = nls.localize(
+      'arduino/board/configDialogTitle',
+      'Select Other Board & Port'
+    );
+    title.classList.add('title');
+    head.appendChild(title);
+
+    const text = document.createElement('div');
+    text.classList.add('text');
+    head.appendChild(text);
+
+    for (const paragraph of [
+      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;
+      text.appendChild(p);
     }
 
-    protected onUpdateRequest(msg: Message) {
-        super.onUpdateRequest(msg);
-        this.widget.update();
-    }
+    return head;
+  }
 
-    protected onActivateRequest(msg: Message): void {
-        super.onActivateRequest(msg);
-        this.widget.activate();
+  protected onAfterAttach(msg: Message): void {
+    if (this.widget.isAttached) {
+      Widget.detach(this.widget);
     }
+    Widget.attach(this.widget, this.contentNode);
+    this.toDisposeOnDetach.push(
+      this.widget.onBoardConfigChanged((config) => {
+        this.config = config;
+        this.update();
+      })
+    );
+    super.onAfterAttach(msg);
+    this.update();
+  }
 
-    protected handleEnter(event: KeyboardEvent): boolean | void {
-        if (event.target instanceof HTMLTextAreaElement) {
-            return false;
-        }
+  protected onUpdateRequest(msg: Message) {
+    super.onUpdateRequest(msg);
+    this.widget.update();
+  }
+
+  protected onActivateRequest(msg: Message): void {
+    super.onActivateRequest(msg);
+    this.widget.activate();
+  }
+
+  protected handleEnter(event: KeyboardEvent): boolean | void {
+    if (event.target instanceof HTMLTextAreaElement) {
+      return false;
     }
+  }
 
-    protected isValid(value: BoardsConfig.Config): DialogError {
-        if (!value.selectedBoard) {
-            if (value.selectedPort) {
-                return 'Please pick a board connected to the port you have selected.';
-            }
-            return false;
-        }
-        return '';
-    }
-
-    get value(): BoardsConfig.Config {
-        return this.config;
+  protected isValid(value: BoardsConfig.Config): DialogError {
+    if (!value.selectedBoard) {
+      if (value.selectedPort) {
+        return nls.localize(
+          'arduino/board/pleasePickBoard',
+          'Please pick a board connected to the port you have selected.'
+        );
+      }
+      return false;
     }
+    return '';
+  }
 
+  get value(): BoardsConfig.Config {
+    return this.config;
+  }
 }

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

@@ -3,284 +3,462 @@ import { Event } from '@theia/core/lib/common/event';
 import { notEmpty } from '@theia/core/lib/common/objects';
 import { MaybePromise } from '@theia/core/lib/common/types';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import { Board, Port, AttachedBoardsChangeEvent, BoardWithPackage } from '../../common/protocol/boards-service';
+import {
+  Board,
+  Port,
+  AttachedBoardsChangeEvent,
+  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 {
+    selectedBoard?: Board;
+    selectedPort?: Port;
+  }
 
-    export interface Config {
-        selectedBoard?: Board;
-        selectedPort?: Port;
-    }
-
-    export interface Props {
-        readonly boardsServiceProvider: BoardsServiceProvider;
-        readonly notificationCenter: NotificationCenter;
-        readonly onConfigChange: (config: Config) => void;
-        readonly onFocusNodeSet: (element: HTMLElement | undefined) => void;
-        readonly onFilteredTextDidChangeEvent: Event<string>;
-    }
-
-    export interface State extends Config {
-        searchResults: Array<BoardWithPackage>;
-        knownPorts: Port[];
-        showAllPorts: boolean;
-        query: string;
-    }
+  export interface Props {
+    readonly boardsServiceProvider: BoardsServiceProvider;
+    readonly notificationCenter: NotificationCenter;
+    readonly onConfigChange: (config: Config) => void;
+    readonly onFocusNodeSet: (element: HTMLElement | undefined) => void;
+    readonly onFilteredTextDidChangeEvent: Event<string>;
+  }
 
+  export interface State extends Config {
+    searchResults: Array<BoardWithPackage>;
+    knownPorts: Port[];
+    showAllPorts: boolean;
+    query: string;
+  }
 }
 
 export abstract class Item<T> extends React.Component<{
-    item: T,
-    label: string,
-    selected: boolean,
-    onClick: (item: T) => void,
-    missing?: boolean,
-    details?: string
+  item: T;
+  label: string;
+  selected: boolean;
+  onClick: (item: T) => void;
+  missing?: boolean;
+  details?: string;
 }> {
-
-    render(): React.ReactNode {
-        const { selected, label, missing, details } = this.props;
-        const classNames = ['item'];
-        if (selected) {
-            classNames.push('selected');
-        }
-        if (missing === true) {
-            classNames.push('missing')
-        }
-        return <div onClick={this.onClick} className={classNames.join(' ')} title={`${label}${!details ? '' : details}`}>
-            <div className='label'>
-                {label}
-            </div>
-            {!details ? '' : <div className='details'>{details}</div>}
-            {!selected ? '' : <div className='selected-icon'><i className='fa fa-check' /></div>}
-        </div>;
+  render(): React.ReactNode {
+    const { selected, label, missing, details } = this.props;
+    const classNames = ['item'];
+    if (selected) {
+      classNames.push('selected');
     }
-
-    protected onClick = () => {
-        this.props.onClick(this.props.item);
+    if (missing === true) {
+      classNames.push('missing');
     }
+    return (
+      <div
+        onClick={this.onClick}
+        className={classNames.join(' ')}
+        title={`${label}${!details ? '' : details}`}
+      >
+        <div className="label">{label}</div>
+        {!details ? '' : <div className="details">{details}</div>}
+        {!selected ? (
+          ''
+        ) : (
+          <div className="selected-icon">
+            <i className="fa fa-check" />
+          </div>
+        )}
+      </div>
+    );
+  }
 
+  protected onClick = () => {
+    this.props.onClick(this.props.item);
+  };
 }
 
-export class BoardsConfig extends React.Component<BoardsConfig.Props, BoardsConfig.State> {
+export class BoardsConfig extends React.Component<
+  BoardsConfig.Props,
+  BoardsConfig.State
+> {
+  protected toDispose = new DisposableCollection();
 
-    protected toDispose = new DisposableCollection();
+  constructor(props: BoardsConfig.Props) {
+    super(props);
 
-    constructor(props: BoardsConfig.Props) {
-        super(props);
+    const { boardsConfig } = props.boardsServiceProvider;
+    this.state = {
+      searchResults: [],
+      knownPorts: [],
+      showAllPorts: false,
+      query: '',
+      ...boardsConfig,
+    };
+  }
 
-        const { boardsConfig } = props.boardsServiceProvider;
-        this.state = {
-            searchResults: [],
-            knownPorts: [],
-            showAllPorts: false,
-            query: '',
-            ...boardsConfig
+  componentDidMount() {
+    this.updateBoards();
+    this.updatePorts(
+      this.props.boardsServiceProvider.availableBoards
+        .map(({ port }) => port)
+        .filter(notEmpty)
+    );
+    this.toDispose.pushAll([
+      this.props.notificationCenter.onAttachedBoardsChanged((event) =>
+        this.updatePorts(
+          event.newState.ports,
+          AttachedBoardsChangeEvent.diff(event).detached.ports
+        )
+      ),
+      this.props.boardsServiceProvider.onBoardsConfigChanged(
+        ({ selectedBoard, selectedPort }) => {
+          this.setState({ selectedBoard, selectedPort }, () =>
+            this.fireConfigChanged()
+          );
         }
-    }
+      ),
+      this.props.notificationCenter.onPlatformInstalled(() =>
+        this.updateBoards(this.state.query)
+      ),
+      this.props.notificationCenter.onPlatformUninstalled(() =>
+        this.updateBoards(this.state.query)
+      ),
+      this.props.notificationCenter.onIndexUpdated(() =>
+        this.updateBoards(this.state.query)
+      ),
+      this.props.notificationCenter.onDaemonStarted(() =>
+        this.updateBoards(this.state.query)
+      ),
+      this.props.notificationCenter.onDaemonStopped(() =>
+        this.setState({ searchResults: [] })
+      ),
+      this.props.onFilteredTextDidChangeEvent((query) =>
+        this.setState({ query }, () => this.updateBoards(this.state.query))
+      ),
+    ]);
+  }
 
-    componentDidMount() {
-        this.updateBoards();
-        this.updatePorts(this.props.boardsServiceProvider.availableBoards.map(({ port }) => port).filter(notEmpty));
-        this.toDispose.pushAll([
-            this.props.notificationCenter.onAttachedBoardsChanged(event => this.updatePorts(event.newState.ports, AttachedBoardsChangeEvent.diff(event).detached.ports)),
-            this.props.boardsServiceProvider.onBoardsConfigChanged(({ selectedBoard, selectedPort }) => {
-                this.setState({ selectedBoard, selectedPort }, () => this.fireConfigChanged());
-            }),
-            this.props.notificationCenter.onPlatformInstalled(() => this.updateBoards(this.state.query)),
-            this.props.notificationCenter.onPlatformUninstalled(() => this.updateBoards(this.state.query)),
-            this.props.notificationCenter.onIndexUpdated(() => this.updateBoards(this.state.query)),
-            this.props.notificationCenter.onDaemonStarted(() => this.updateBoards(this.state.query)),
-            this.props.notificationCenter.onDaemonStopped(() => this.setState({ searchResults: [] })),
-            this.props.onFilteredTextDidChangeEvent(query => this.setState({ query }, () => this.updateBoards(this.state.query)))
-        ]);
-    }
+  componentWillUnmount(): void {
+    this.toDispose.dispose();
+  }
 
-    componentWillUnmount(): void {
-        this.toDispose.dispose();
-    }
+  protected fireConfigChanged() {
+    const { selectedBoard, selectedPort } = this.state;
+    this.props.onConfigChange({ selectedBoard, selectedPort });
+  }
 
-    protected fireConfigChanged() {
-        const { selectedBoard, selectedPort } = this.state;
-        this.props.onConfigChange({ selectedBoard, selectedPort });
-    }
+  protected updateBoards = (
+    eventOrQuery: React.ChangeEvent<HTMLInputElement> | string = ''
+  ) => {
+    const query =
+      typeof eventOrQuery === 'string'
+        ? eventOrQuery
+        : eventOrQuery.target.value.toLowerCase();
+    this.setState({ query });
+    this.queryBoards({ query }).then((searchResults) =>
+      this.setState({ searchResults })
+    );
+  };
 
-    protected updateBoards = (eventOrQuery: React.ChangeEvent<HTMLInputElement> | string = '') => {
-        const query = typeof eventOrQuery === 'string'
-            ? eventOrQuery
-            : eventOrQuery.target.value.toLowerCase();
-        this.setState({ query });
-        this.queryBoards({ query }).then(searchResults => this.setState({ searchResults }));
-    }
+  protected updatePorts = (ports: Port[] = [], removedPorts: Port[] = []) => {
+    this.queryPorts(Promise.resolve(ports)).then(({ knownPorts }) => {
+      let { selectedPort } = this.state;
+      // If the currently selected port is not available anymore, unset the selected port.
+      if (removedPorts.some((port) => Port.equals(port, selectedPort))) {
+        selectedPort = undefined;
+      }
+      this.setState({ knownPorts, selectedPort }, () =>
+        this.fireConfigChanged()
+      );
+    });
+  };
 
-    protected updatePorts = (ports: Port[] = [], removedPorts: Port[] = []) => {
-        this.queryPorts(Promise.resolve(ports)).then(({ knownPorts }) => {
-            let { selectedPort } = this.state;
-            // If the currently selected port is not available anymore, unset the selected port.
-            if (removedPorts.some(port => Port.equals(port, selectedPort))) {
-                selectedPort = undefined;
-            }
-            this.setState({ knownPorts, selectedPort }, () => this.fireConfigChanged());
-        });
-    }
+  protected queryBoards = (
+    options: { query?: string } = {}
+  ): Promise<Array<BoardWithPackage>> => {
+    return this.props.boardsServiceProvider.searchBoards(options);
+  };
 
-    protected queryBoards = (options: { query?: string } = {}): Promise<Array<BoardWithPackage>> => {
-        return this.props.boardsServiceProvider.searchBoards(options);
-    }
+  protected get availablePorts(): MaybePromise<Port[]> {
+    return this.props.boardsServiceProvider.availableBoards
+      .map(({ port }) => port)
+      .filter(notEmpty);
+  }
 
-    protected get availablePorts(): MaybePromise<Port[]> {
-        return this.props.boardsServiceProvider.availableBoards.map(({ port }) => port).filter(notEmpty);
-    }
+  protected get availableBoards(): AvailableBoard[] {
+    return this.props.boardsServiceProvider.availableBoards;
+  }
 
-    protected queryPorts = async (availablePorts: MaybePromise<Port[]> = this.availablePorts) => {
-        const ports = await availablePorts;
-        return { knownPorts: ports.sort(Port.compare) };
-    }
-
-    protected toggleFilterPorts = () => {
-        this.setState({ showAllPorts: !this.state.showAllPorts });
-    }
-
-    protected selectPort = (selectedPort: Port | undefined) => {
-        this.setState({ selectedPort }, () => this.fireConfigChanged());
-    }
-
-    protected selectBoard = (selectedBoard: BoardWithPackage | undefined) => {
-        this.setState({ selectedBoard }, () => this.fireConfigChanged());
-    }
-
-    protected focusNodeSet = (element: HTMLElement | null) => {
-        this.props.onFocusNodeSet(element || undefined);
-    }
-
-    render(): React.ReactNode {
-        return <div className='body'>
-            {this.renderContainer('boards', this.renderBoards.bind(this))}
-            {this.renderContainer('ports', this.renderPorts.bind(this), this.renderPortsFooter.bind(this))}
-        </div>;
-    }
-
-    protected renderContainer(title: string, contentRenderer: () => React.ReactNode, footerRenderer?: () => React.ReactNode): React.ReactNode {
-        return <div className='container'>
-            <div className='content'>
-                <div className='title'>
-                    {title}
-                </div>
-                {contentRenderer()}
-                <div className='footer'>
-                    {(footerRenderer ? footerRenderer() : '')}
-                </div>
-            </div>
-        </div>;
-    }
-
-    protected renderBoards(): React.ReactNode {
-        const { selectedBoard, searchResults, query } = this.state;
-        // Board names are not unique per core https://github.com/arduino/arduino-pro-ide/issues/262#issuecomment-661019560
-        // It is tricky when the core is not yet installed, no FQBNs are available.
-        const distinctBoards = new Map<string, Board.Detailed>();
-        const toKey = ({ name, packageName, fqbn }: Board.Detailed) => !!fqbn ? `${name}-${packageName}-${fqbn}` : `${name}-${packageName}`;
-        for (const board of Board.decorateBoards(selectedBoard, searchResults)) {
-            const key = toKey(board);
-            if (!distinctBoards.has(key)) {
-                distinctBoards.set(key, board);
-            }
+  protected queryPorts = async (
+    availablePorts: MaybePromise<Port[]> = this.availablePorts
+  ) => {
+    // Available ports must be sorted in this order:
+    // 1. Serial with recognized boards
+    // 2. Serial with guessed boards
+    // 3. Serial with incomplete boards
+    // 4. Network with recognized boards
+    // 5. Other protocols with recognized boards
+    const ports = (await availablePorts).sort((left: Port, right: Port) => {
+      if (left.protocol === 'serial' && right.protocol !== 'serial') {
+        return -1;
+      } else if (left.protocol !== 'serial' && right.protocol === 'serial') {
+        return 1;
+      } else if (left.protocol === 'network' && right.protocol !== 'network') {
+        return -1;
+      } else if (left.protocol !== 'network' && right.protocol === 'network') {
+        return 1;
+      } else if (left.protocol === right.protocol) {
+        // We show ports, including those that have guessed
+        // or unrecognized boards, so we must sort those too.
+        const leftBoard = this.availableBoards.find((board) =>
+          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 };
+  };
 
-        return <React.Fragment>
-            <div className='search'>
-                <input
-                    type='search'
-                    value={query}
-                    className='theia-input'
-                    placeholder='SEARCH BOARD'
-                    onChange={this.updateBoards}
-                    ref={this.focusNodeSet}
-                />
-                <i className='fa fa-search'></i>
-            </div>
-            <div className='boards list'>
-                {Array.from(distinctBoards.values()).map(board => <Item<BoardWithPackage>
-                    key={`${board.name}-${board.packageName}`}
-                    item={board}
-                    label={board.name}
-                    details={board.details}
-                    selected={board.selected}
-                    onClick={this.selectBoard}
-                    missing={board.missing}
-                />)}
-            </div>
-        </React.Fragment>;
+  protected toggleFilterPorts = () => {
+    this.setState({ showAllPorts: !this.state.showAllPorts });
+  };
+
+  protected selectPort = (selectedPort: Port | undefined) => {
+    this.setState({ selectedPort }, () => this.fireConfigChanged());
+  };
+
+  protected selectBoard = (selectedBoard: BoardWithPackage | undefined) => {
+    this.setState({ selectedBoard }, () => this.fireConfigChanged());
+  };
+
+  protected focusNodeSet = (element: HTMLElement | null) => {
+    this.props.onFocusNodeSet(element || undefined);
+  };
+
+  render(): React.ReactNode {
+    return (
+      <div className="body">
+        {this.renderContainer('boards', this.renderBoards.bind(this))}
+        {this.renderContainer(
+          'ports',
+          this.renderPorts.bind(this),
+          this.renderPortsFooter.bind(this)
+        )}
+      </div>
+    );
+  }
+
+  protected renderContainer(
+    title: string,
+    contentRenderer: () => React.ReactNode,
+    footerRenderer?: () => React.ReactNode
+  ): React.ReactNode {
+    return (
+      <div className="container">
+        <div className="content">
+          <div className="title">{title}</div>
+          {contentRenderer()}
+          <div className="footer">{footerRenderer ? footerRenderer() : ''}</div>
+        </div>
+      </div>
+    );
+  }
+
+  protected renderBoards(): React.ReactNode {
+    const { selectedBoard, searchResults, query } = this.state;
+    // Board names are not unique per core https://github.com/arduino/arduino-pro-ide/issues/262#issuecomment-661019560
+    // It is tricky when the core is not yet installed, no FQBNs are available.
+    const distinctBoards = new Map<string, Board.Detailed>();
+    const toKey = ({ name, packageName, fqbn }: Board.Detailed) =>
+      !!fqbn ? `${name}-${packageName}-${fqbn}` : `${name}-${packageName}`;
+    for (const board of Board.decorateBoards(selectedBoard, searchResults)) {
+      const key = toKey(board);
+      if (!distinctBoards.has(key)) {
+        distinctBoards.set(key, board);
+      }
     }
 
-    protected renderPorts(): React.ReactNode {
-        const filter = this.state.showAllPorts ? () => true : Port.isBoardPort;
-        const ports = this.state.knownPorts.filter(filter);
-        return !ports.length ?
-            (
-                <div className='loading noselect'>
-                    No ports discovered
-                </div>
-            ) :
-            (
-                <div className='ports list'>
-                    {ports.map(port => <Item<Port>
-                        key={Port.toString(port)}
-                        item={port}
-                        label={Port.toString(port)}
-                        selected={Port.equals(this.state.selectedPort, port)}
-                        onClick={this.selectPort}
-                    />)}
-                </div>
-            );
-    }
+    return (
+      <React.Fragment>
+        <div className="search">
+          <input
+            type="search"
+            value={query}
+            className="theia-input"
+            placeholder="SEARCH BOARD"
+            onChange={this.updateBoards}
+            ref={this.focusNodeSet}
+          />
+          <i className="fa fa-search"></i>
+        </div>
+        <div className="boards list">
+          {Array.from(distinctBoards.values()).map((board) => (
+            <Item<BoardWithPackage>
+              key={toKey(board)}
+              item={board}
+              label={board.name}
+              details={board.details}
+              selected={board.selected}
+              onClick={this.selectBoard}
+              missing={board.missing}
+            />
+          ))}
+        </div>
+      </React.Fragment>
+    );
+  }
 
-    protected renderPortsFooter(): React.ReactNode {
-        return <div className='noselect'>
-            <label
-                title='Shows all available ports when enabled'>
-                <input
-                    type='checkbox'
-                    defaultChecked={this.state.showAllPorts}
-                    onChange={this.toggleFilterPorts}
-                />
-                <span>Show all ports</span>
-            </label>
-        </div>;
+  protected renderPorts(): React.ReactNode {
+    let ports = [] as Port[];
+    if (this.state.showAllPorts) {
+      ports = this.state.knownPorts;
+    } else {
+      ports = this.state.knownPorts.filter((port) => {
+        if (port.protocol === 'serial') {
+          return true;
+        }
+        // All other ports with different protocol are
+        // only shown if there is a recognized board
+        // connected
+        for (const board of this.availableBoards) {
+          if (board.port?.address === port.address) {
+            return true;
+          }
+        }
+      });
     }
+    return !ports.length ? (
+      <div className="loading noselect">No ports discovered</div>
+    ) : (
+      <div className="ports list">
+        {ports.map((port) => (
+          <Item<Port>
+            key={Port.toString(port)}
+            item={port}
+            label={Port.toString(port)}
+            selected={Port.equals(this.state.selectedPort, port)}
+            onClick={this.selectPort}
+          />
+        ))}
+      </div>
+    );
+  }
 
+  protected renderPortsFooter(): React.ReactNode {
+    return (
+      <div className="noselect">
+        <label
+          title={nls.localize(
+            'arduino/board/showAllAvailablePorts',
+            'Shows all available ports when enabled'
+          )}
+        >
+          <input
+            type="checkbox"
+            defaultChecked={this.state.showAllPorts}
+            onChange={this.toggleFilterPorts}
+          />
+          <span>Show all ports</span>
+        </label>
+      </div>
+    );
+  }
 }
 
 export namespace BoardsConfig {
-
-    export namespace Config {
-
-        export function sameAs(config: Config, other: Config | Board): boolean {
-            const { selectedBoard, selectedPort } = config;
-            if (Board.is(other)) {
-                return !!selectedBoard
-                    && Board.equals(other, selectedBoard)
-                    && Port.sameAs(selectedPort, other.port);
-            }
-            return sameAs(config, other);
-        }
-
-        export function equals(left: Config, right: Config): boolean {
-            return left.selectedBoard === right.selectedBoard
-                && left.selectedPort === right.selectedPort;
-        }
-
-        export function toString(config: Config, options: { default: string } = { default: '' }): string {
-            const { selectedBoard, selectedPort: port } = config;
-            if (!selectedBoard) {
-                return options.default;
-            }
-            const { name } = selectedBoard;
-            return `${name}${port ? ' at ' + Port.toString(port) : ''}`;
-        }
-
+  export namespace Config {
+    export function sameAs(config: Config, other: Config | Board): boolean {
+      const { selectedBoard, selectedPort } = config;
+      if (Board.is(other)) {
+        return (
+          !!selectedBoard &&
+          Board.equals(other, selectedBoard) &&
+          Port.sameAs(selectedPort, other.port)
+        );
+      }
+      return sameAs(config, other);
     }
 
+    export function equals(left: Config, right: Config): boolean {
+      return (
+        left.selectedBoard === right.selectedBoard &&
+        left.selectedPort === right.selectedPort
+      );
+    }
+
+    export function toString(
+      config: Config,
+      options: { default: string } = { default: '' }
+    ): string {
+      const { selectedBoard, selectedPort: port } = config;
+      if (!selectedBoard) {
+        return options.default;
+      }
+      const { name } = selectedBoard;
+      return `${name}${port ? ' at ' + Port.toString(port) : ''}`;
+    }
+
+    export function setConfig(
+      config: Config | undefined,
+      urlToAttachTo: URL
+    ): URL {
+      const copy = new URL(urlToAttachTo.toString());
+      if (!config) {
+        copy.searchParams.delete('boards-config');
+        return copy;
+      }
+
+      const selectedBoard = config.selectedBoard
+        ? {
+            name: config.selectedBoard.name,
+            fqbn: config.selectedBoard.fqbn,
+          }
+        : undefined;
+      const selectedPort = config.selectedPort
+        ? {
+            protocol: config.selectedPort.protocol,
+            address: config.selectedPort.address,
+          }
+        : undefined;
+      const jsonConfig = JSON.stringify({ selectedBoard, selectedPort });
+      copy.searchParams.set('boards-config', encodeURIComponent(jsonConfig));
+      return copy;
+    }
+
+    export function getConfig(url: URL): Config | undefined {
+      const encoded = url.searchParams.get('boards-config');
+      if (!encoded) {
+        return undefined;
+      }
+      try {
+        const raw = decodeURIComponent(encoded);
+        const candidate = JSON.parse(raw);
+        if (typeof candidate === 'object') {
+          return candidate;
+        }
+        console.warn(
+          `Expected candidate to be an object. It was ${typeof candidate}. URL was: ${url}`
+        );
+        return undefined;
+      } catch (e) {
+        console.log(`Could not get board config from URL: ${url}.`, e);
+        return undefined;
+      }
+    }
+  }
 }

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

@@ -2,100 +2,163 @@ import * as PQueue from 'p-queue';
 import { inject, injectable } from 'inversify';
 import { CommandRegistry } from '@theia/core/lib/common/command';
 import { MenuModelRegistry } from '@theia/core/lib/common/menu';
-import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
 import { BoardsServiceProvider } from './boards-service-provider';
 import { Board, ConfigOption, Programmer } from '../../common/protocol';
 import { FrontendApplicationContribution } from '@theia/core/lib/browser';
 import { BoardsDataStore } from './boards-data-store';
 import { MainMenuManager } from '../../common/main-menu-manager';
 import { ArduinoMenus, unregisterSubmenu } from '../menu/arduino-menus';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardsDataMenuUpdater implements FrontendApplicationContribution {
+  @inject(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
 
-    @inject(CommandRegistry)
-    protected readonly commandRegistry: CommandRegistry;
+  @inject(MenuModelRegistry)
+  protected readonly menuRegistry: MenuModelRegistry;
 
-    @inject(MenuModelRegistry)
-    protected readonly menuRegistry: MenuModelRegistry;
+  @inject(MainMenuManager)
+  protected readonly mainMenuManager: MainMenuManager;
 
-    @inject(MainMenuManager)
-    protected readonly mainMenuManager: MainMenuManager;
+  @inject(BoardsDataStore)
+  protected readonly boardsDataStore: BoardsDataStore;
 
-    @inject(BoardsDataStore)
-    protected readonly boardsDataStore: BoardsDataStore;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClient: BoardsServiceProvider;
+  protected readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
+  protected readonly toDisposeOnBoardChange = new DisposableCollection();
 
-    protected readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
-    protected readonly toDisposeOnBoardChange = new DisposableCollection();
+  async onStart(): Promise<void> {
+    this.updateMenuActions(this.boardsServiceClient.boardsConfig.selectedBoard);
+    this.boardsDataStore.onChanged(() =>
+      this.updateMenuActions(
+        this.boardsServiceClient.boardsConfig.selectedBoard
+      )
+    );
+    this.boardsServiceClient.onBoardsConfigChanged(({ selectedBoard }) =>
+      this.updateMenuActions(selectedBoard)
+    );
+  }
 
-    async onStart(): Promise<void> {
-        this.updateMenuActions(this.boardsServiceClient.boardsConfig.selectedBoard);
-        this.boardsDataStore.onChanged(() => this.updateMenuActions(this.boardsServiceClient.boardsConfig.selectedBoard));
-        this.boardsServiceClient.onBoardsConfigChanged(({ selectedBoard }) => this.updateMenuActions(selectedBoard));
-    }
-
-    protected async updateMenuActions(selectedBoard: Board | undefined): Promise<void> {
-        return this.queue.add(async () => {
-            this.toDisposeOnBoardChange.dispose();
-            this.mainMenuManager.update();
-            if (selectedBoard) {
-                const { fqbn } = selectedBoard;
-                if (fqbn) {
-                    const { configOptions, programmers, selectedProgrammer } = await this.boardsDataStore.getData(fqbn);
-                    if (configOptions.length) {
-                        const boardsConfigMenuPath = [...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP, 'z01_boardsConfig']; // `z_` is for ordering.
-                        for (const { label, option, values } of configOptions.sort(ConfigOption.LABEL_COMPARATOR)) {
-                            const menuPath = [...boardsConfigMenuPath, `${option}`];
-                            const commands = new Map<string, Disposable & { label: string }>()
-                            for (const value of values) {
-                                const id = `${fqbn}-${option}--${value.value}`;
-                                const command = { id };
-                                const selectedValue = value.value;
-                                const handler = {
-                                    execute: () => this.boardsDataStore.selectConfigOption({ fqbn, option, selectedValue }),
-                                    isToggled: () => value.selected
-                                };
-                                commands.set(id, Object.assign(this.commandRegistry.registerCommand(command, handler), { label: value.label }));
-                            }
-                            this.menuRegistry.registerSubmenu(menuPath, label);
-                            this.toDisposeOnBoardChange.pushAll([
-                                ...commands.values(),
-                                Disposable.create(() => unregisterSubmenu(menuPath, this.menuRegistry)),
-                                ...Array.from(commands.keys()).map((commandId, i) => {
-                                    const { label } = commands.get(commandId)!;
-                                    this.menuRegistry.registerMenuAction(menuPath, { commandId, order: `${i}`, label });
-                                    return Disposable.create(() => this.menuRegistry.unregisterMenuAction(commandId));
-                                })
-                            ]);
-                        }
-                    }
-                    if (programmers.length) {
-                        const programmersMenuPath = [...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP, 'z02_programmers'];
-                        const label = selectedProgrammer ? `Programmer: "${selectedProgrammer.name}"` : 'Programmer'
-                        this.menuRegistry.registerSubmenu(programmersMenuPath, label);
-                        this.toDisposeOnBoardChange.push(Disposable.create(() => unregisterSubmenu(programmersMenuPath, this.menuRegistry)));
-                        for (const programmer of programmers) {
-                            const { id, name } = programmer;
-                            const command = { id: `${fqbn}-programmer--${id}` };
-                            const handler = {
-                                execute: () => this.boardsDataStore.selectProgrammer({ fqbn, selectedProgrammer: programmer }),
-                                isToggled: () => Programmer.equals(programmer, selectedProgrammer)
-                            };
-                            this.menuRegistry.registerMenuAction(programmersMenuPath, { commandId: command.id, label: name });
-                            this.commandRegistry.registerCommand(command, handler);
-                            this.toDisposeOnBoardChange.pushAll([
-                                Disposable.create(() => this.commandRegistry.unregisterCommand(command)),
-                                Disposable.create(() => this.menuRegistry.unregisterMenuAction(command.id))
-                            ]);
-                        }
-                    }
-                    this.mainMenuManager.update();
-                }
+  protected async updateMenuActions(
+    selectedBoard: Board | undefined
+  ): Promise<void> {
+    return this.queue.add(async () => {
+      this.toDisposeOnBoardChange.dispose();
+      this.mainMenuManager.update();
+      if (selectedBoard) {
+        const { fqbn } = selectedBoard;
+        if (fqbn) {
+          const { configOptions, programmers, selectedProgrammer } =
+            await this.boardsDataStore.getData(fqbn);
+          if (configOptions.length) {
+            const boardsConfigMenuPath = [
+              ...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP,
+              'z01_boardsConfig',
+            ]; // `z_` is for ordering.
+            for (const { label, option, values } of configOptions.sort(
+              ConfigOption.LABEL_COMPARATOR
+            )) {
+              const menuPath = [...boardsConfigMenuPath, `${option}`];
+              const commands = new Map<
+                string,
+                Disposable & { label: string }
+              >();
+              for (const value of values) {
+                const id = `${fqbn}-${option}--${value.value}`;
+                const command = { id };
+                const selectedValue = value.value;
+                const handler = {
+                  execute: () =>
+                    this.boardsDataStore.selectConfigOption({
+                      fqbn,
+                      option,
+                      selectedValue,
+                    }),
+                  isToggled: () => value.selected,
+                };
+                commands.set(
+                  id,
+                  Object.assign(
+                    this.commandRegistry.registerCommand(command, handler),
+                    { label: value.label }
+                  )
+                );
+              }
+              this.menuRegistry.registerSubmenu(menuPath, label);
+              this.toDisposeOnBoardChange.pushAll([
+                ...commands.values(),
+                Disposable.create(() =>
+                  unregisterSubmenu(menuPath, this.menuRegistry)
+                ),
+                ...Array.from(commands.keys()).map((commandId, i) => {
+                  const { label } = commands.get(commandId)!;
+                  this.menuRegistry.registerMenuAction(menuPath, {
+                    commandId,
+                    order: `${i}`,
+                    label,
+                  });
+                  return Disposable.create(() =>
+                    this.menuRegistry.unregisterMenuAction(commandId)
+                  );
+                }),
+              ]);
             }
-        });
-    }
-
+          }
+          if (programmers.length) {
+            const programmersMenuPath = [
+              ...ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP,
+              'z02_programmers',
+            ];
+            const 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)
+              )
+            );
+            for (const programmer of programmers) {
+              const { id, name } = programmer;
+              const command = { id: `${fqbn}-programmer--${id}` };
+              const handler = {
+                execute: () =>
+                  this.boardsDataStore.selectProgrammer({
+                    fqbn,
+                    selectedProgrammer: programmer,
+                  }),
+                isToggled: () =>
+                  Programmer.equals(programmer, selectedProgrammer),
+              };
+              this.menuRegistry.registerMenuAction(programmersMenuPath, {
+                commandId: command.id,
+                label: name,
+              });
+              this.commandRegistry.registerCommand(command, handler);
+              this.toDisposeOnBoardChange.pushAll([
+                Disposable.create(() =>
+                  this.commandRegistry.unregisterCommand(command)
+                ),
+                Disposable.create(() =>
+                  this.menuRegistry.unregisterMenuAction(command.id)
+                ),
+              ]);
+            }
+          }
+          this.mainMenuManager.update();
+        }
+      }
+    });
+  }
 }

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

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

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

@@ -1,36 +1,84 @@
 import { inject, injectable, postConstruct } from 'inversify';
-import { BoardsPackage, BoardsService } from '../../common/protocol/boards-service';
+import {
+  BoardsPackage,
+  BoardsService,
+} from '../../common/protocol/boards-service';
 import { ListWidget } from '../widgets/component-list/list-widget';
 import { ListItemRenderer } from '../widgets/component-list/list-item-renderer';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardsListWidget extends ListWidget<BoardsPackage> {
+  static WIDGET_ID = 'boards-list-widget';
+  static WIDGET_LABEL = nls.localize('arduino/boardsManager', 'Boards Manager');
 
-    static WIDGET_ID = 'boards-list-widget';
-    static WIDGET_LABEL = 'Boards Manager';
+  constructor(
+    @inject(BoardsService) protected service: BoardsService,
+    @inject(ListItemRenderer)
+    protected itemRenderer: ListItemRenderer<BoardsPackage>
+  ) {
+    super({
+      id: BoardsListWidget.WIDGET_ID,
+      label: BoardsListWidget.WIDGET_LABEL,
+      iconClass: 'fa fa-arduino-boards',
+      searchable: service,
+      installable: service,
+      itemLabel: (item: BoardsPackage) => item.name,
+      itemDeprecated: (item: BoardsPackage) => item.deprecated,
+      itemRenderer,
+    });
+  }
 
-    constructor(
-        @inject(BoardsService) protected service: BoardsService,
-        @inject(ListItemRenderer) protected itemRenderer: ListItemRenderer<BoardsPackage>) {
+  @postConstruct()
+  protected init(): void {
+    super.init();
+    this.toDispose.pushAll([
+      this.notificationCenter.onPlatformInstalled(() =>
+        this.refresh(undefined)
+      ),
+      this.notificationCenter.onPlatformUninstalled(() =>
+        this.refresh(undefined)
+      ),
+    ]);
+  }
 
-        super({
-            id: BoardsListWidget.WIDGET_ID,
-            label: BoardsListWidget.WIDGET_LABEL,
-            iconClass: 'fa fa-microchip',
-            searchable: service,
-            installable: service,
-            itemLabel: (item: BoardsPackage) => item.name,
-            itemRenderer
-        });
-    }
-
-    @postConstruct()
-    protected init(): void {
-        super.init();
-        this.toDispose.pushAll([
-            this.notificationCenter.onPlatformInstalled(() => this.refresh(undefined)),
-            this.notificationCenter.onPlatformUninstalled(() => this.refresh(undefined)),
-        ]);
-    }
+  protected async install({
+    item,
+    progressId,
+    version,
+  }: {
+    item: BoardsPackage;
+    progressId: string;
+    version: string;
+  }): Promise<void> {
+    await super.install({ item, progressId, version });
+    this.messageService.info(
+      nls.localize(
+        'arduino/board/succesfullyInstalledPlatform',
+        'Successfully installed platform {0}:{1}',
+        item.name,
+        version
+      ),
+      { timeout: 3000 }
+    );
+  }
 
+  protected async uninstall({
+    item,
+    progressId,
+  }: {
+    item: BoardsPackage;
+    progressId: string;
+  }): Promise<void> {
+    await super.uninstall({ item, progressId });
+    this.messageService.info(
+      nls.localize(
+        'arduino/board/succesfullyUninstalledPlatform',
+        'Successfully uninstalled platform {0}:{1}',
+        item.name,
+        item.installedVersion!
+      ),
+      { timeout: 3000 }
+    );
+  }
 }

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

@@ -5,189 +5,234 @@ import { DisposableCollection } from '@theia/core/lib/common/disposable';
 import { Port } from '../../common/protocol';
 import { BoardsConfig } from './boards-config';
 import { ArduinoCommands } from '../arduino-commands';
-import { BoardsServiceProvider, AvailableBoard } from './boards-service-provider';
+import {
+  BoardsServiceProvider,
+  AvailableBoard,
+} from './boards-service-provider';
+import { nls } from '@theia/core/lib/common';
 
 export interface BoardsDropDownListCoords {
-    readonly top: number;
-    readonly left: number;
-    readonly width: number;
-    readonly paddingTop: number;
+  readonly top: number;
+  readonly left: number;
+  readonly width: number;
+  readonly paddingTop: number;
 }
 
 export namespace BoardsDropDown {
-    export interface Props {
-        readonly coords: BoardsDropDownListCoords | 'hidden';
-        readonly items: Array<AvailableBoard & { onClick: () => void, port: Port }>;
-        readonly openBoardsConfig: () => void;
-    }
+  export interface Props {
+    readonly coords: BoardsDropDownListCoords | 'hidden';
+    readonly items: Array<AvailableBoard & { onClick: () => void; port: Port }>;
+    readonly openBoardsConfig: () => void;
+  }
 }
 
 export class BoardsDropDown extends React.Component<BoardsDropDown.Props> {
+  protected dropdownElement: HTMLElement;
 
-    protected dropdownElement: HTMLElement;
+  constructor(props: BoardsDropDown.Props) {
+    super(props);
 
-    constructor(props: BoardsDropDown.Props) {
-        super(props);
-
-        let list = document.getElementById('boards-dropdown-container');
-        if (!list) {
-            list = document.createElement('div');
-            list.id = 'boards-dropdown-container';
-            document.body.appendChild(list);
-            this.dropdownElement = list;
-        }
+    let list = document.getElementById('boards-dropdown-container');
+    if (!list) {
+      list = document.createElement('div');
+      list.id = 'boards-dropdown-container';
+      document.body.appendChild(list);
+      this.dropdownElement = list;
     }
+  }
 
-    render(): React.ReactNode {
-        return ReactDOM.createPortal(this.renderNode(), this.dropdownElement);
+  render(): React.ReactNode {
+    return ReactDOM.createPortal(this.renderNode(), this.dropdownElement);
+  }
+
+  protected renderNode(): React.ReactNode {
+    const { coords, items } = this.props;
+    if (coords === 'hidden') {
+      return '';
     }
-
-    protected renderNode(): React.ReactNode {
-        const { coords, items } = this.props;
-        if (coords === 'hidden') {
-            return '';
-        }
-        return <div className='arduino-boards-dropdown-list'
-            style={{
-                position: 'absolute',
-                ...coords
-            }}>
-            {this.renderItem({
-                label: 'Select Other Board & Port',
-                onClick: () => this.props.openBoardsConfig()
-            })}
-            {items.map(({ name, port, selected, onClick }) => ({ label: `${name} at ${Port.toString(port)}`, selected, onClick })).map(this.renderItem)}
+    const footerLabel = nls.localize(
+      'arduino/board/openBoardsConfig',
+      'Select other board and port…'
+    );
+    return (
+      <div
+        className="arduino-boards-dropdown-list"
+        style={{
+          position: 'absolute',
+          ...coords,
+        }}
+      >
+        {items
+          .map(({ name, port, selected, onClick }) => ({
+            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>
-    }
-
-    protected renderItem({ label, selected, onClick }: { label: string, selected?: boolean, onClick: () => void }): React.ReactNode {
-        return <div key={label} className={`arduino-boards-dropdown-item ${selected ? 'selected' : ''}`} onClick={onClick}>
-            <div>
-                {label}
-            </div>
-            {selected ? <span className='fa fa-check' /> : ''}
-        </div>
-    }
+      </div>
+    );
+  }
 
+  protected renderItem({
+    label,
+    selected,
+    onClick,
+  }: {
+    label: string;
+    selected?: boolean;
+    onClick: () => void;
+  }): React.ReactNode {
+    return (
+      <div
+        key={label}
+        className={`arduino-boards-dropdown-item ${selected ? 'selected' : ''}`}
+        onClick={onClick}
+      >
+        <div>{label}</div>
+        {selected ? <span className="fa fa-check" /> : ''}
+      </div>
+    );
+  }
 }
 
-export class BoardsToolBarItem extends React.Component<BoardsToolBarItem.Props, BoardsToolBarItem.State> {
+export class BoardsToolBarItem extends React.Component<
+  BoardsToolBarItem.Props,
+  BoardsToolBarItem.State
+> {
+  static TOOLBAR_ID: 'boards-toolbar';
 
-    static TOOLBAR_ID: 'boards-toolbar';
+  protected readonly toDispose: DisposableCollection =
+    new DisposableCollection();
 
-    protected readonly toDispose: DisposableCollection = new DisposableCollection();
+  constructor(props: BoardsToolBarItem.Props) {
+    super(props);
 
-    constructor(props: BoardsToolBarItem.Props) {
-        super(props);
+    const { availableBoards } = props.boardsServiceClient;
+    this.state = {
+      availableBoards,
+      coords: 'hidden',
+    };
 
-        const { availableBoards } = props.boardsServiceClient;
-        this.state = {
-            availableBoards,
-            coords: 'hidden'
-        };
+    document.addEventListener('click', () => {
+      this.setState({ coords: 'hidden' });
+    });
+  }
 
-        document.addEventListener('click', () => {
-            this.setState({ coords: 'hidden' });
+  componentDidMount() {
+    this.props.boardsServiceClient.onAvailableBoardsChanged((availableBoards) =>
+      this.setState({ availableBoards })
+    );
+  }
+
+  componentWillUnmount(): void {
+    this.toDispose.dispose();
+  }
+
+  protected readonly show = (event: React.MouseEvent<HTMLElement>) => {
+    const { currentTarget: element } = event;
+    if (element instanceof HTMLElement) {
+      if (this.state.coords === 'hidden') {
+        const rect = element.getBoundingClientRect();
+        this.setState({
+          coords: {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            paddingTop: rect.height,
+          },
         });
-    }
-
-    componentDidMount() {
-        this.props.boardsServiceClient.onAvailableBoardsChanged(availableBoards => this.setState({ availableBoards }));
-    }
-
-    componentWillUnmount(): void {
-        this.toDispose.dispose();
-    }
-
-    protected readonly show = (event: React.MouseEvent<HTMLElement>) => {
-        const { currentTarget: element } = event;
-        if (element instanceof HTMLElement) {
-            if (this.state.coords === 'hidden') {
-                const rect = element.getBoundingClientRect();
-                this.setState({
-                    coords: {
-                        top: rect.top,
-                        left: rect.left,
-                        width: rect.width,
-                        paddingTop: rect.height
-                    }
-                });
-            } else {
-                this.setState({ coords: 'hidden' });
-            }
-        }
-        event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
-    };
-
-    render(): React.ReactNode {
-        const { coords, availableBoards } = this.state;
-        const boardsConfig = this.props.boardsServiceClient.boardsConfig;
-        const title = BoardsConfig.Config.toString(boardsConfig, { default: 'no board selected' });
-        const decorator = (() => {
-            const selectedBoard = availableBoards.find(({ selected }) => selected);
-            if (!selectedBoard || !selectedBoard.port) {
-                return 'fa fa-times notAttached'
-            }
-            if (selectedBoard.state === AvailableBoard.State.guessed) {
-                return 'fa fa-exclamation-triangle guessed'
-            }
-            return ''
-        })();
-
-        return <React.Fragment>
-            <div className='arduino-boards-toolbar-item-container'>
-                <div className='arduino-boards-toolbar-item' title={title}>
-                    <div className='inner-container' onClick={this.show}>
-                        <span className={decorator} />
-                        <div className='label noWrapInfo'>
-                            <div className='noWrapInfo noselect'>
-                                {title}
-                            </div>
-                        </div>
-                        <span className='fa fa-caret-down caret' />
-                    </div>
-                </div>
-            </div>
-            <BoardsDropDown
-                coords={coords}
-                items={availableBoards.filter(AvailableBoard.hasPort).map(board => ({
-                    ...board,
-                    onClick: () => {
-                        if (board.state === AvailableBoard.State.incomplete) {
-                            this.props.boardsServiceClient.boardsConfig = {
-                                selectedPort: board.port
-                            };
-                            this.openDialog();
-                        } else {
-                            this.props.boardsServiceClient.boardsConfig = {
-                                selectedBoard: board,
-                                selectedPort: board.port
-                            }
-                        }
-                    }
-                }))}
-                openBoardsConfig={this.openDialog}>
-            </BoardsDropDown>
-        </React.Fragment>;
-    }
-
-    protected openDialog = () => {
-        this.props.commands.executeCommand(ArduinoCommands.OPEN_BOARDS_DIALOG.id);
+      } else {
         this.setState({ coords: 'hidden' });
-    };
+      }
+    }
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+  };
 
+  render(): React.ReactNode {
+    const { coords, availableBoards } = this.state;
+    const boardsConfig = this.props.boardsServiceClient.boardsConfig;
+    const title = BoardsConfig.Config.toString(boardsConfig, {
+      default: nls.localize(
+        'arduino/common/noBoardSelected',
+        'No board selected'
+      ),
+    });
+    const decorator = (() => {
+      const selectedBoard = availableBoards.find(({ selected }) => selected);
+      if (!selectedBoard || !selectedBoard.port) {
+        return 'fa fa-times notAttached';
+      }
+      if (selectedBoard.state === AvailableBoard.State.guessed) {
+        return 'fa fa-exclamation-triangle guessed';
+      }
+      return '';
+    })();
+
+    return (
+      <React.Fragment>
+        <div className="arduino-boards-toolbar-item-container">
+          <div className="arduino-boards-toolbar-item" title={title}>
+            <div className="inner-container" onClick={this.show}>
+              <span className={decorator} />
+              <div className="label noWrapInfo">
+                <div className="noWrapInfo noselect">{title}</div>
+              </div>
+              <span className="fa fa-caret-down caret" />
+            </div>
+          </div>
+        </div>
+        <BoardsDropDown
+          coords={coords}
+          items={availableBoards
+            .filter(AvailableBoard.hasPort)
+            .map((board) => ({
+              ...board,
+              onClick: () => {
+                if (board.state === AvailableBoard.State.incomplete) {
+                  this.props.boardsServiceClient.boardsConfig = {
+                    selectedPort: board.port,
+                  };
+                  this.openDialog();
+                } else {
+                  this.props.boardsServiceClient.boardsConfig = {
+                    selectedBoard: board,
+                    selectedPort: board.port,
+                  };
+                }
+              },
+            }))}
+          openBoardsConfig={this.openDialog}
+        ></BoardsDropDown>
+      </React.Fragment>
+    );
+  }
+
+  protected openDialog = () => {
+    this.props.commands.executeCommand(ArduinoCommands.OPEN_BOARDS_DIALOG.id);
+    this.setState({ coords: 'hidden' });
+  };
 }
 export namespace BoardsToolBarItem {
+  export interface Props {
+    readonly boardsServiceClient: BoardsServiceProvider;
+    readonly commands: CommandRegistry;
+  }
 
-    export interface Props {
-        readonly boardsServiceClient: BoardsServiceProvider;
-        readonly commands: CommandRegistry;
-    }
-
-    export interface State {
-        availableBoards: AvailableBoard[];
-        coords: BoardsDropDownListCoords | 'hidden';
-    }
-
+  export interface State {
+    availableBoards: AvailableBoard[];
+    coords: BoardsDropDownListCoords | 'hidden';
+  }
 }

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

@@ -5,22 +5,20 @@ import { ListWidgetFrontendContribution } from '../widgets/component-list/list-w
 
 @injectable()
 export class BoardsListWidgetFrontendContribution extends ListWidgetFrontendContribution<BoardsPackage> {
+  constructor() {
+    super({
+      widgetId: BoardsListWidget.WIDGET_ID,
+      widgetName: BoardsListWidget.WIDGET_LABEL,
+      defaultWidgetOptions: {
+        area: 'left',
+        rank: 2,
+      },
+      toggleCommandId: `${BoardsListWidget.WIDGET_ID}:toggle`,
+      toggleKeybinding: 'CtrlCmd+Shift+B',
+    });
+  }
 
-    constructor() {
-        super({
-            widgetId: BoardsListWidget.WIDGET_ID,
-            widgetName: BoardsListWidget.WIDGET_LABEL,
-            defaultWidgetOptions: {
-                area: 'left',
-                rank: 600
-            },
-            toggleCommandId: `${BoardsListWidget.WIDGET_ID}:toggle`,
-            toggleKeybinding: 'CtrlCmd+Shift+B'
-        });
-    }
-
-    async initializeLayout(): Promise<void> {
-        this.openView();
-    }
-
+  async initializeLayout(): Promise<void> {
+    this.openView();
+  }
 }

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

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

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

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

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

@@ -4,102 +4,187 @@ import { remote } from 'electron';
 import { isOSX, isWindows } from '@theia/core/lib/common/os';
 import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { FrontendApplicationConfigProvider } from '@theia/core/lib/browser/frontend-application-config-provider';
-import { Contribution, Command, MenuModelRegistry, CommandRegistry } from './contribution';
+import {
+  Contribution,
+  Command,
+  MenuModelRegistry,
+  CommandRegistry,
+} from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { ConfigService } from '../../common/protocol';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class About extends Contribution {
+  @inject(ClipboardService)
+  protected readonly clipboardService: ClipboardService;
 
-    @inject(ClipboardService)
-    protected readonly clipboardService: ClipboardService;
+  @inject(ConfigService)
+  protected readonly configService: ConfigService;
 
-    @inject(ConfigService)
-    protected readonly configService: ConfigService;
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(About.Commands.ABOUT_APP, {
+      execute: () => this.showAbout(),
+    });
+  }
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(About.Commands.ABOUT_APP, {
-            execute: () => this.showAbout()
-        });
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.HELP__ABOUT_GROUP, {
+      commandId: About.Commands.ABOUT_APP.id,
+      label: nls.localize(
+        'arduino/about/label',
+        'About {0}',
+        this.applicationName
+      ),
+      order: '0',
+    });
+  }
+
+  async showAbout(): Promise<void> {
+    const {
+      version,
+      commit,
+      status: cliStatus,
+    } = await this.configService.getVersion();
+    const buildDate = this.buildDate;
+    const detail = (showAll: boolean) =>
+      nls.localize(
+        'arduino/about/detail',
+        'Version: {0}\nDate: {1}{2}\nCLI Version: {3}{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(),
+      {
+        message: `${this.applicationName}`,
+        title: `${this.applicationName}`,
+        type: 'info',
+        detail: detail(true),
+        buttons,
+        noLink: true,
+        defaultId: buttons.indexOf(ok),
+        cancelId: buttons.indexOf(ok),
+      }
+    );
+
+    if (buttons[response] === copy) {
+      await this.clipboardService.writeText(detail(false).trim());
     }
+  }
 
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.HELP__ABOUT_GROUP, {
-            commandId: About.Commands.ABOUT_APP.id,
-            label: `About ${this.applicationName}`,
-            order: '0'
-        });
+  protected get applicationName(): string {
+    return FrontendApplicationConfigProvider.get().applicationName;
+  }
+
+  protected get buildDate(): string | undefined {
+    return FrontendApplicationConfigProvider.get().buildDate;
+  }
+
+  protected ago(isoTime: string): string {
+    const now = moment(Date.now());
+    const other = moment(isoTime);
+    let result = now.diff(other, 'minute');
+    if (result < 60) {
+      return result === 1
+        ? nls.localize(
+            'vscode/date/date.fromNow.minutes.singular.ago',
+            '{0} minute ago',
+            result.toString()
+          )
+        : nls.localize(
+            'vscode/date/date.fromNow.minutes.plural.ago',
+            '{0} minutes ago',
+            result.toString()
+          );
     }
-
-    async showAbout(): Promise<void> {
-        const { version, commit, 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 buttons = !isWindows && !isOSX ? [copy, ok] : [ok, copy];
-        const { response } = await remote.dialog.showMessageBox(remote.getCurrentWindow(), {
-            message: `${this.applicationName}`,
-            title: `${this.applicationName}`,
-            type: 'info',
-            detail: detail(true),
-            buttons,
-            noLink: true,
-            defaultId: buttons.indexOf(ok),
-            cancelId: buttons.indexOf(ok)
-        });
-
-        if (buttons[response] === copy) {
-            await this.clipboardService.writeText(detail(false).trim());
-        }
+    result = now.diff(other, 'hour');
+    if (result < 25) {
+      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()
+          );
     }
-
-    protected get applicationName(): string {
-        return FrontendApplicationConfigProvider.get().applicationName;
+    result = now.diff(other, 'day');
+    if (result < 8) {
+      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()
+          );
     }
-
-    protected get buildDate(): string | undefined {
-        return FrontendApplicationConfigProvider.get().buildDate;
+    result = now.diff(other, 'week');
+    if (result < 5) {
+      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()
+          );
     }
-
-    protected ago(isoTime: string): string {
-        const now = moment(Date.now());
-        const other = moment(isoTime);
-        let result = now.diff(other, 'minute');
-        if (result < 60) {
-            return result === 1 ? `${result} minute ago` : `${result} minute ago`;
-        }
-        result = now.diff(other, 'hour');
-        if (result < 25) {
-            return result === 1 ? `${result} hour ago` : `${result} hours ago`;
-        }
-        result = now.diff(other, 'day');
-        if (result < 8) {
-            return result === 1 ? `${result} day ago` : `${result} days ago`;
-        }
-        result = now.diff(other, 'week');
-        if (result < 5) {
-            return result === 1 ? `${result} week ago` : `${result} weeks ago`;
-        }
-        result = now.diff(other, 'month');
-        if (result < 13) {
-            return result === 1 ? `${result} month ago` : `${result} months ago`;
-        }
-        result = now.diff(other, 'year');
-        return result === 1 ? `${result} year ago` : `${result} years ago`;
+    result = now.diff(other, 'month');
+    if (result < 13) {
+      return result === 1
+        ? nls.localize(
+            'vscode/date/date.fromNow.months.singular.ago',
+            '{0} month ago',
+            result.toString()
+          )
+        : nls.localize(
+            'vscode/date/date.fromNow.months.plural.ago',
+            '{0} months ago',
+            result.toString()
+          );
     }
-
+    result = now.diff(other, 'year');
+    return result === 1
+      ? 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()
+        );
+  }
 }
 
 export namespace About {
-    export namespace Commands {
-        export const ABOUT_APP: Command = {
-            id: 'arduino-about'
-        };
-    }
+  export namespace Commands {
+    export const ABOUT_APP: Command = {
+      id: 'arduino-about',
+    };
+  }
 }

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

@@ -1,68 +1,89 @@
 import { inject, injectable } from 'inversify';
 import { remote } from 'electron';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { SketchContribution, Command, CommandRegistry, MenuModelRegistry, URI } from './contribution';
+import {
+  SketchContribution,
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+  URI,
+} from './contribution';
 import { FileDialogService } from '@theia/filesystem/lib/browser';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class AddFile extends SketchContribution {
+  @inject(FileDialogService)
+  protected readonly fileDialogService: FileDialogService;
 
-    @inject(FileDialogService)
-    protected readonly fileDialogService: FileDialogService;
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(AddFile.Commands.ADD_FILE, {
+      execute: () => this.addFile(),
+    });
+  }
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(AddFile.Commands.ADD_FILE, {
-            execute: () => this.addFile()
-        });
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.SKETCH__UTILS_GROUP, {
+      commandId: AddFile.Commands.ADD_FILE.id,
+      label: nls.localize('arduino/contributions/addFile', 'Add File') + '...',
+      order: '2',
+    });
+  }
+
+  protected async addFile(): Promise<void> {
+    const sketch = await this.sketchServiceClient.currentSketch();
+    if (!sketch) {
+      return;
     }
-
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.SKETCH__UTILS_GROUP, {
-            commandId: AddFile.Commands.ADD_FILE.id,
-            label: 'Add File...',
-            order: '2'
-        });
+    const toAddUri = await this.fileDialogService.showOpenDialog({
+      title: nls.localize('arduino/contributions/addFile', 'Add File'),
+      canSelectFiles: true,
+      canSelectFolders: false,
+      canSelectMany: false,
+    });
+    if (!toAddUri) {
+      return;
     }
-
-    protected async addFile(): Promise<void> {
-        const sketch = await this.sketchServiceClient.currentSketch();
-        if (!sketch) {
-            return;
-        }
-        const toAddUri = await this.fileDialogService.showOpenDialog({
-            title: 'Add File',
-            canSelectFiles: true,
-            canSelectFolders: false,
-            canSelectMany: false
-        });
-        if (!toAddUri) {
-            return;
-        }
-        const sketchUri = new URI(sketch.uri);
-        const filename = toAddUri.path.base;
-        const targetUri = sketchUri.resolve('data').resolve(filename);
-        const exists = await this.fileService.exists(targetUri);
-        if (exists) {
-            const { response } = await remote.dialog.showMessageBox({
-                type: 'question',
-                title: 'Replace',
-                buttons: ['Cancel', 'OK'],
-                message: `Replace the existing version of ${filename}?`
-            });
-            if (response === 0) { // Cancel
-                return;
-            }
-        }
-        await this.fileService.copy(toAddUri, targetUri, { overwrite: true });
-        this.messageService.info('One file added to the sketch.', { timeout: 2000 });
+    const sketchUri = new URI(sketch.uri);
+    const filename = toAddUri.path.base;
+    const targetUri = sketchUri.resolve('data').resolve(filename);
+    const exists = await this.fileService.exists(targetUri);
+    if (exists) {
+      const { response } = await remote.dialog.showMessageBox({
+        type: 'question',
+        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
+        return;
+      }
     }
-
+    await this.fileService.copy(toAddUri, targetUri, { overwrite: true });
+    this.messageService.info(
+      nls.localize(
+        'arduino/contributions/fileAdded',
+        'One file added to the sketch.'
+      ),
+      {
+        timeout: 2000,
+      }
+    );
+  }
 }
 
 export namespace AddFile {
-    export namespace Commands {
-        export const ADD_FILE: Command = {
-            id: 'arduino-add-file'
-        };
-    }
+  export namespace Commands {
+    export const ADD_FILE: Command = {
+      id: 'arduino-add-file',
+    };
+  }
 }

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

@@ -1,73 +1,154 @@
 import { inject, injectable } from 'inversify';
 import { remote } from 'electron';
-import { ArduinoMenus } from '../menu/arduino-menus';
-import { SketchContribution, Command, CommandRegistry, MenuModelRegistry } from './contribution';
-import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
 import URI from '@theia/core/lib/common/uri';
-import { InstallationProgressDialog } from '../widgets/progress-dialog';
-import { LibraryService } from '../../common/protocol';
+import { ConfirmDialog } from '@theia/core/lib/browser/dialogs';
+import { EnvVariablesServer } from '@theia/core/lib/common/env-variables';
+import { ArduinoMenus } from '../menu/arduino-menus';
+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(EnvVariablesServer)
-    protected readonly envVariableServer: EnvVariablesServer;
+  @inject(ResponseServiceArduino)
+  protected readonly responseService: ResponseServiceArduino;
 
-    @inject(LibraryService)
-    protected readonly libraryService: LibraryService;
+  @inject(LibraryService)
+  protected readonly libraryService: LibraryService;
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(AddZipLibrary.Commands.ADD_ZIP_LIBRARY, {
-            execute: () => this.addZipLibrary()
-        });
-    }
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(AddZipLibrary.Commands.ADD_ZIP_LIBRARY, {
+      execute: () => this.addZipLibrary(),
+    });
+  }
 
-    registerMenus(registry: MenuModelRegistry): void {
-        const includeLibMenuPath = [...ArduinoMenus.SKETCH__UTILS_GROUP, '0_include'];
-        // TODO: do we need it? calling `registerSubmenu` multiple times is noop, so it does not hurt.
-        registry.registerSubmenu(includeLibMenuPath, 'Include Library', { order: '1' });
-        registry.registerMenuAction([...includeLibMenuPath, '1_install'], {
-            commandId: AddZipLibrary.Commands.ADD_ZIP_LIBRARY.id,
-            label: 'Add .ZIP Library...',
-            order: '1'
-        });
-    }
+  registerMenus(registry: MenuModelRegistry): void {
+    const includeLibMenuPath = [
+      ...ArduinoMenus.SKETCH__UTILS_GROUP,
+      '0_include',
+    ];
+    // TODO: do we need it? calling `registerSubmenu` multiple times is noop, so it does not hurt.
+    registry.registerSubmenu(includeLibMenuPath, 'Include Library', {
+      order: '1',
+    });
+    registry.registerMenuAction([...includeLibMenuPath, '1_install'], {
+      commandId: AddZipLibrary.Commands.ADD_ZIP_LIBRARY.id,
+      label: nls.localize('arduino/library/addZip', 'Add .ZIP Library...'),
+      order: '1',
+    });
+  }
 
-    async addZipLibrary(): Promise<void> {
-        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",
-            defaultPath,
-            properties: ['openFile'],
-            filters: [
-                {
-                    name: 'Library',
-                    extensions: ['zip']
-                }
-            ]
-        });
-        if (!canceled && filePaths.length) {
-            const zipUri = await this.fileSystemExt.getUri(filePaths[0]);
-            const dialog = new InstallationProgressDialog('Installing library', 'zip');
-            try {
-                this.outputChannelManager.getChannel('Arduino').clear();
-                dialog.open();
-                await this.libraryService.installZip({ zipUri });
-            } catch (e) {
-                this.messageService.error(e.toString());
-            } finally {
-                dialog.close();
-            }
+  async addZipLibrary(): Promise<void> {
+    const homeUri = await this.envVariableServer.getHomeDirUri();
+    const defaultPath = await this.fileService.fsPath(new URI(homeUri));
+    const { canceled, filePaths } = await remote.dialog.showOpenDialog({
+      title: nls.localize(
+        'arduino/selectZip',
+        "Select a zip file containing the library you'd like to add"
+      ),
+      defaultPath,
+      properties: ['openFile'],
+      filters: [
+        {
+          name: nls.localize('arduino/library/zipLibrary', 'Library'),
+          extensions: ['zip'],
+        },
+      ],
+    });
+    if (!canceled && filePaths.length) {
+      const zipUri = await this.fileSystemExt.getUri(filePaths[0]);
+      try {
+        await this.doInstall(zipUri);
+      } catch (error) {
+        if (error instanceof AlreadyInstalledError) {
+          const result = await new ConfirmDialog({
+            msg: error.message,
+            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);
+          }
         }
+      }
     }
+  }
 
+  private async doInstall(zipUri: string, overwrite?: boolean): Promise<void> {
+    try {
+      await Installable.doWithProgress({
+        messageService: this.messageService,
+        progressText:
+          nls.localize('arduino/common/processing', 'Processing') +
+          ` ${new URI(zipUri).path.base}`,
+        responseService: this.responseService,
+        run: () => this.libraryService.installZip({ zipUri, overwrite }),
+      });
+      this.messageService.info(
+        nls.localize(
+          'arduino/library/successfullyInstalledZipLibrary',
+          'Successfully installed library from {0} archive',
+          new URI(zipUri).path.base
+        ),
+        { timeout: 3000 }
+      );
+    } catch (error) {
+      if (error instanceof Error) {
+        const match = error.message.match(/library (.*?) already installed/);
+        if (match && match.length >= 2) {
+          const name = match[1].trim();
+          if (name) {
+            throw new AlreadyInstalledError(
+              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?'
+              )
+            );
+          }
+        }
+      }
+      this.messageService.error(error.toString());
+      throw error;
+    }
+  }
+}
+
+class AlreadyInstalledError extends Error {
+  constructor(message: string, readonly libraryName?: string) {
+    super(message);
+    Object.setPrototypeOf(this, AlreadyInstalledError.prototype);
+  }
 }
 
 export namespace AddZipLibrary {
-    export namespace Commands {
-        export const ADD_ZIP_LIBRARY: Command = {
-            id: 'arduino-add-zip-library'
-        };
-    }
+  export namespace Commands {
+    export const ADD_ZIP_LIBRARY: Command = {
+      id: 'arduino-add-zip-library',
+    };
+  }
 }

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

@@ -3,53 +3,77 @@ import { remote } from 'electron';
 import * as dateFormat from 'dateformat';
 import URI from '@theia/core/lib/common/uri';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { SketchContribution, Command, CommandRegistry, MenuModelRegistry } from './contribution';
+import {
+  SketchContribution,
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+} from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class ArchiveSketch extends SketchContribution {
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(ArchiveSketch.Commands.ARCHIVE_SKETCH, {
+      execute: () => this.archiveSketch(),
+    });
+  }
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(ArchiveSketch.Commands.ARCHIVE_SKETCH, {
-            execute: () => this.archiveSketch()
-        });
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
+      commandId: ArchiveSketch.Commands.ARCHIVE_SKETCH.id,
+      label: nls.localize('arduino/sketch/archiveSketch', 'Archive Sketch'),
+      order: '1',
+    });
+  }
+
+  protected async archiveSketch(): Promise<void> {
+    const [sketch, config] = await Promise.all([
+      this.sketchServiceClient.currentSketch(),
+      this.configService.getConfiguration(),
+    ]);
+    if (!sketch) {
+      return;
     }
-
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
-            commandId: ArchiveSketch.Commands.ARCHIVE_SKETCH.id,
-            label: 'Archive Sketch',
-            order: '1'
-        });
+    const archiveBasename = `${sketch.name}-${dateFormat(
+      new Date(),
+      'yymmdd'
+    )}a.zip`;
+    const defaultPath = await this.fileService.fsPath(
+      new URI(config.sketchDirUri).resolve(archiveBasename)
+    );
+    const { filePath, canceled } = await remote.dialog.showSaveDialog({
+      title: nls.localize(
+        'arduino/sketch/saveSketchAs',
+        'Save sketch folder as...'
+      ),
+      defaultPath,
+    });
+    if (!filePath || canceled) {
+      return;
     }
-
-    protected async archiveSketch(): Promise<void> {
-        const [sketch, config] = await Promise.all([
-            this.sketchServiceClient.currentSketch(),
-            this.configService.getConfiguration()
-        ]);
-        if (!sketch) {
-            return;
-        }
-        const archiveBasename = `${sketch.name}-${dateFormat(new Date(), 'yymmdd')}a.zip`;
-        const defaultPath = await this.fileService.fsPath(new URI(config.sketchDirUri).resolve(archiveBasename));
-        const { filePath, canceled } = await remote.dialog.showSaveDialog({ title: 'Save sketch folder as...', defaultPath });
-        if (!filePath || canceled) {
-            return;
-        }
-        const destinationUri = await this.fileSystemExt.getUri(filePath);
-        if (!destinationUri) {
-            return;
-        }
-        await this.sketchService.archive(sketch, destinationUri.toString());
-        this.messageService.info(`Created archive '${archiveBasename}'.`, { timeout: 2000 });
+    const destinationUri = await this.fileSystemExt.getUri(filePath);
+    if (!destinationUri) {
+      return;
     }
-
+    await this.sketchService.archive(sketch, destinationUri.toString());
+    this.messageService.info(
+      nls.localize(
+        'arduino/sketch/createdArchive',
+        "Created archive '{0}'.",
+        archiveBasename
+      ),
+      {
+        timeout: 2000,
+      }
+    );
+  }
 }
 
 export namespace ArchiveSketch {
-    export namespace Commands {
-        export const ARCHIVE_SKETCH: Command = {
-            id: 'arduino-archive-sketch'
-        };
-    }
+  export namespace Commands {
+    export const ARCHIVE_SKETCH: Command = {
+      id: 'arduino-archive-sketch',
+    };
+  }
 }

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

@@ -1,222 +1,363 @@
 import { inject, injectable } from 'inversify';
 import { remote } from 'electron';
 import { MenuModelRegistry } from '@theia/core/lib/common/menu';
-import { DisposableCollection, Disposable } from '@theia/core/lib/common/disposable';
+import {
+  DisposableCollection,
+  Disposable,
+} from '@theia/core/lib/common/disposable';
 import { firstToUpperCase } from '../../common/utils';
 import { BoardsConfig } from '../boards/boards-config';
 import { MainMenuManager } from '../../common/main-menu-manager';
 import { BoardsListWidget } from '../boards/boards-list-widget';
 import { NotificationCenter } from '../notification-center';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
-import { ArduinoMenus, PlaceholderMenuNode, unregisterSubmenu } from '../menu/arduino-menus';
-import { BoardsService, InstalledBoardWithPackage, AvailablePorts, Port } from '../../common/protocol';
+import {
+  ArduinoMenus,
+  PlaceholderMenuNode,
+  unregisterSubmenu,
+} from '../menu/arduino-menus';
+import {
+  BoardsService,
+  InstalledBoardWithPackage,
+  AvailablePorts,
+  Port,
+} from '../../common/protocol';
 import { SketchContribution, Command, CommandRegistry } from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BoardSelection extends SketchContribution {
+  @inject(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
 
-    @inject(CommandRegistry)
-    protected readonly commandRegistry: CommandRegistry;
+  @inject(MainMenuManager)
+  protected readonly mainMenuManager: MainMenuManager;
 
-    @inject(MainMenuManager)
-    protected readonly mainMenuManager: MainMenuManager;
+  @inject(MenuModelRegistry)
+  protected readonly menuModelRegistry: MenuModelRegistry;
 
-    @inject(MenuModelRegistry)
-    protected readonly menuModelRegistry: MenuModelRegistry;
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
 
-    @inject(NotificationCenter)
-    protected readonly notificationCenter: NotificationCenter;
+  @inject(BoardsService)
+  protected readonly boardsService: BoardsService;
 
-    @inject(BoardsService)
-    protected readonly boardsService: BoardsService;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceProvider: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceProvider: BoardsServiceProvider;
+  protected readonly toDisposeBeforeMenuRebuild = new DisposableCollection();
 
-    protected readonly toDisposeBeforeMenuRebuild = new DisposableCollection();
-
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(BoardSelection.Commands.GET_BOARD_INFO, {
-            execute: async () => {
-                const { selectedBoard, selectedPort } = this.boardsServiceProvider.boardsConfig;
-                if (!selectedBoard) {
-                    this.messageService.info('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.`);
-                    return;
-                }
-                if (!selectedPort) {
-                    this.messageService.info('Please select a port to obtain board info.');
-                    return;
-                }
-                const boardDetails = await this.boardsService.getBoardDetails({ fqbn: selectedBoard.fqbn });
-                if (boardDetails) {
-                    const { VID, PID } = boardDetails;
-                    const detail = `BN: ${selectedBoard.name}
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(BoardSelection.Commands.GET_BOARD_INFO, {
+      execute: async () => {
+        const { selectedBoard, selectedPort } =
+          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(
+            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;
+        }
+        const boardDetails = await this.boardsService.getBoardDetails({
+          fqbn: selectedBoard.fqbn,
+        });
+        if (boardDetails) {
+          const { VID, PID } = boardDetails;
+          const detail = `BN: ${selectedBoard.name}
 VID: ${VID}
 PID: ${PID}`;
-                    await remote.dialog.showMessageBox(remote.getCurrentWindow(), {
-                        message: 'Board Info',
-                        title: 'Board Info',
-                        type: 'info',
-                        detail,
-                        buttons: ['OK']
-                    });
-                }
-            }
-        });
-    }
+          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: [nls.localize('vscode/issueMainService/ok', 'OK')],
+          });
+        }
+      },
+    });
+  }
 
-    onStart(): void {
-        this.updateMenus();
-        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));
-    }
+  onStart(): void {
+    this.updateMenus();
+    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> {
-        const [installedBoards, availablePorts, config] = await Promise.all([
-            this.installedBoards(),
-            this.boardsService.getState(),
-            this.boardsServiceProvider.boardsConfig
-        ]);
-        this.rebuildMenus(installedBoards, availablePorts, config);
-    }
+  protected async updateMenus(): Promise<void> {
+    const [installedBoards, availablePorts, config] = await Promise.all([
+      this.installedBoards(),
+      this.boardsService.getState(),
+      this.boardsServiceProvider.boardsConfig,
+    ]);
+    this.rebuildMenus(installedBoards, availablePorts, config);
+  }
 
-    protected rebuildMenus(installedBoards: InstalledBoardWithPackage[], availablePorts: AvailablePorts, config: BoardsConfig.Config): void {
-        this.toDisposeBeforeMenuRebuild.dispose();
+  protected rebuildMenus(
+    installedBoards: InstalledBoardWithPackage[],
+    availablePorts: AvailablePorts,
+    config: BoardsConfig.Config
+  ): void {
+    this.toDisposeBeforeMenuRebuild.dispose();
 
-        // Boards submenu
-        const boardsSubmenuPath = [...ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP, '1_boards'];
-        const boardsSubmenuLabel = config.selectedBoard?.name;
-        // Note: The submenu order starts from `100` because `Auto Format`, `Serial Monitor`, etc starts from `0` index.
-        // The board specific items, and the rest, have order with `z`. We needed something between `0` and `z` with natural-order.
-        this.menuModelRegistry.registerSubmenu(boardsSubmenuPath, `Board${!!boardsSubmenuLabel ? `: "${boardsSubmenuLabel}"` : ''}`, { order: '100' });
-        this.toDisposeBeforeMenuRebuild.push(Disposable.create(() => unregisterSubmenu(boardsSubmenuPath, this.menuModelRegistry)));
+    // Boards submenu
+    const boardsSubmenuPath = [
+      ...ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP,
+      '1_boards',
+    ];
+    const boardsSubmenuLabel = config.selectedBoard?.name;
+    // Note: The submenu order starts from `100` because `Auto Format`, `Serial Monitor`, etc starts from `0` index.
+    // The board specific items, and the rest, have order with `z`. We needed something between `0` and `z` with natural-order.
+    this.menuModelRegistry.registerSubmenu(
+      boardsSubmenuPath,
+      nls.localize(
+        'arduino/board/board',
+        'Board{0}',
+        !!boardsSubmenuLabel ? `: "${boardsSubmenuLabel}"` : ''
+      ),
+      { order: '100' }
+    );
+    this.toDisposeBeforeMenuRebuild.push(
+      Disposable.create(() =>
+        unregisterSubmenu(boardsSubmenuPath, this.menuModelRegistry)
+      )
+    );
 
-        // Ports submenu
-        const portsSubmenuPath = [...ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP, '2_ports'];
-        const portsSubmenuLabel = config.selectedPort?.address;
-        this.menuModelRegistry.registerSubmenu(portsSubmenuPath, `Port${!!portsSubmenuLabel ? `: "${portsSubmenuLabel}"` : ''}`, { order: '101' });
-        this.toDisposeBeforeMenuRebuild.push(Disposable.create(() => unregisterSubmenu(portsSubmenuPath, this.menuModelRegistry)));
+    // Ports submenu
+    const portsSubmenuPath = [
+      ...ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP,
+      '2_ports',
+    ];
+    const portsSubmenuLabel = config.selectedPort?.address;
+    this.menuModelRegistry.registerSubmenu(
+      portsSubmenuPath,
+      nls.localize(
+        'arduino/board/port',
+        'Port{0}',
+        portsSubmenuLabel ? `: "${portsSubmenuLabel}"` : ''
+      ),
+      { order: '101' }
+    );
+    this.toDisposeBeforeMenuRebuild.push(
+      Disposable.create(() =>
+        unregisterSubmenu(portsSubmenuPath, this.menuModelRegistry)
+      )
+    );
 
-        const getBoardInfo = { commandId: BoardSelection.Commands.GET_BOARD_INFO.id, label: 'Get Board Info', order: '103' };
-        this.menuModelRegistry.registerMenuAction(ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP, getBoardInfo);
-        this.toDisposeBeforeMenuRebuild.push(Disposable.create(() => this.menuModelRegistry.unregisterMenuAction(getBoardInfo)));
+    const getBoardInfo = {
+      commandId: BoardSelection.Commands.GET_BOARD_INFO.id,
+      label: nls.localize('arduino/board/getBoardInfo', 'Get Board Info'),
+      order: '103',
+    };
+    this.menuModelRegistry.registerMenuAction(
+      ArduinoMenus.TOOLS__BOARD_SELECTION_GROUP,
+      getBoardInfo
+    );
+    this.toDisposeBeforeMenuRebuild.push(
+      Disposable.create(() =>
+        this.menuModelRegistry.unregisterMenuAction(getBoardInfo)
+      )
+    );
 
-        const boardsManagerGroup = [...boardsSubmenuPath, '0_manager'];
-        const boardsPackagesGroup = [...boardsSubmenuPath, '1_packages'];
+    const boardsManagerGroup = [...boardsSubmenuPath, '0_manager'];
+    const boardsPackagesGroup = [...boardsSubmenuPath, '1_packages'];
 
-        this.menuModelRegistry.registerMenuAction(boardsManagerGroup, {
-            commandId: `${BoardsListWidget.WIDGET_ID}:toggle`,
-            label: 'Boards Manager...'
-        });
+    this.menuModelRegistry.registerMenuAction(boardsManagerGroup, {
+      commandId: `${BoardsListWidget.WIDGET_ID}:toggle`,
+      label: `${BoardsListWidget.WIDGET_LABEL}...`,
+    });
 
-        // Installed boards
-        for (const board of installedBoards) {
-            const { packageId, packageName, fqbn, name } = board;
+    // Installed boards
+    for (const board of installedBoards) {
+      const { packageId, packageName, fqbn, name, manuallyInstalled } = board;
 
-            // 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);
+      const packageLabel =
+        packageName +
+        `${
+          manuallyInstalled
+            ? nls.localize('arduino/board/inSketchbook', ' (in Sketchbook)')
+            : ''
+        }`;
+      // Platform submenu
+      const platformMenuPath = [...boardsPackagesGroup, packageId];
+      // Note: Registering the same submenu twice is a noop. No need to group the boards per platform.
+      this.menuModelRegistry.registerSubmenu(platformMenuPath, packageLabel, {
+        order: packageName.toLowerCase(),
+      });
 
-            const id = `arduino-select-board--${fqbn}`;
-            const command = { id };
-            const handler = {
-                execute: () => {
-                    if (fqbn !== this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn) {
-                        this.boardsServiceProvider.boardsConfig = {
-                            selectedBoard: {
-                                name,
-                                fqbn,
-                                port: this.boardsServiceProvider.boardsConfig.selectedBoard?.port // TODO: verify!
-                            },
-                            selectedPort: this.boardsServiceProvider.boardsConfig.selectedPort
-                        }
-                    }
-                },
-                isToggled: () => fqbn === this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn
+      const id = `arduino-select-board--${fqbn}`;
+      const command = { id };
+      const handler = {
+        execute: () => {
+          if (
+            fqbn !== this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn
+          ) {
+            this.boardsServiceProvider.boardsConfig = {
+              selectedBoard: {
+                name,
+                fqbn,
+                port: this.boardsServiceProvider.boardsConfig.selectedBoard
+                  ?.port, // TODO: verify!
+              },
+              selectedPort:
+                this.boardsServiceProvider.boardsConfig.selectedPort,
             };
+          }
+        },
+        isToggled: () =>
+          fqbn === this.boardsServiceProvider.boardsConfig.selectedBoard?.fqbn,
+      };
 
-            // Board menu
-            const menuAction = { commandId: id, label: name };
-            this.commandRegistry.registerCommand(command, handler);
-            this.toDisposeBeforeMenuRebuild.push(Disposable.create(() => this.commandRegistry.unregisterCommand(command)));
-            this.menuModelRegistry.registerMenuAction(platformMenuPath, menuAction);
-            // Note: we do not dispose the menu actions individually. Calling `unregisterSubmenu` on the parent will wipe the children menu nodes recursively.
-        }
-
-        // Installed ports
-        const registerPorts = (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 placeholder = new PlaceholderMenuNode(menuPath, `${firstToUpperCase(port.protocol)} ports`);
-            this.menuModelRegistry.registerMenuNode(menuPath, placeholder);
-            this.toDisposeBeforeMenuRebuild.push(Disposable.create(() => this.menuModelRegistry.unregisterMenuNode(placeholder.id)));
-
-            for (const address of addresses) {
-                if (!!ports[address]) {
-                    const [port, boards] = ports[address];
-                    if (!boards.length) {
-                        boards.push({
-                            name: ''
-                        });
-                    }
-                    for (const { name, fqbn } of boards) {
-                        const id = `arduino-select-port--${address}${fqbn ? `--${fqbn}` : ''}`;
-                        const command = { id };
-                        const handler = {
-                            execute: () => {
-                                if (!Port.equals(port, this.boardsServiceProvider.boardsConfig.selectedPort)) {
-                                    this.boardsServiceProvider.boardsConfig = {
-                                        selectedBoard: this.boardsServiceProvider.boardsConfig.selectedBoard,
-                                        selectedPort: port
-                                    }
-                                }
-                            },
-                            isToggled: () => Port.equals(port, this.boardsServiceProvider.boardsConfig.selectedPort)
-                        };
-                        const label = `${address}${name ? ` (${name})` : ''}`;
-                        const menuAction = {
-                            commandId: id,
-                            label,
-                            order: `1${label}` // `1` comes after the placeholder which has order `0`
-                        };
-                        this.commandRegistry.registerCommand(command, handler);
-                        this.toDisposeBeforeMenuRebuild.push(Disposable.create(() => this.commandRegistry.unregisterCommand(command)));
-                        this.menuModelRegistry.registerMenuAction(menuPath, menuAction);
-                    }
-                }
-            }
-        }
-
-        const { serial, network, unknown } = AvailablePorts.groupByProtocol(availablePorts);
-        registerPorts(serial);
-        registerPorts(network);
-        registerPorts(unknown);
-
-        this.mainMenuManager.update();
+      // 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);
+      // Note: we do not dispose the menu actions individually. Calling `unregisterSubmenu` on the parent will wipe the children menu nodes recursively.
     }
 
-    protected async installedBoards(): Promise<InstalledBoardWithPackage[]> {
-        const allBoards = await this.boardsService.allBoards({});
-        return allBoards.filter(InstalledBoardWithPackage.is);
-    }
+    // Installed ports
+    const registerPorts = (
+      protocol: string,
+      protocolOrder: number,
+      ports: AvailablePorts
+    ) => {
+      const addresses = Object.keys(ports);
+      if (!addresses.length) {
+        return;
+      }
 
+      // Register placeholder for protocol
+      const menuPath = [
+        ...portsSubmenuPath,
+        `${protocolOrder.toString()}_${protocol}`,
+      ];
+      const placeholder = new PlaceholderMenuNode(
+        menuPath,
+        `${firstToUpperCase(protocol)} ports`,
+        { order: protocolOrder.toString() }
+      );
+      this.menuModelRegistry.registerMenuNode(menuPath, placeholder);
+      this.toDisposeBeforeMenuRebuild.push(
+        Disposable.create(() =>
+          this.menuModelRegistry.unregisterMenuNode(placeholder.id)
+        )
+      );
+
+      // 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})`;
+        }
+        const id = `arduino-select-port--${address}`;
+        const command = { id };
+        const handler = {
+          execute: () => {
+            if (
+              !Port.equals(
+                port,
+                this.boardsServiceProvider.boardsConfig.selectedPort
+              )
+            ) {
+              this.boardsServiceProvider.boardsConfig = {
+                selectedBoard:
+                  this.boardsServiceProvider.boardsConfig.selectedBoard,
+                selectedPort: port,
+              };
+            }
+          },
+          isToggled: () =>
+            Port.equals(
+              port,
+              this.boardsServiceProvider.boardsConfig.selectedPort
+            ),
+        };
+        const menuAction = {
+          commandId: id,
+          label,
+          order: `${protocolOrder + i + 1}`,
+        };
+        this.commandRegistry.registerCommand(command, handler);
+        this.toDisposeBeforeMenuRebuild.push(
+          Disposable.create(() =>
+            this.commandRegistry.unregisterCommand(command)
+          )
+        );
+        this.menuModelRegistry.registerMenuAction(menuPath, menuAction);
+      }
+    };
+
+    const 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();
+  }
+
+  protected async installedBoards(): Promise<InstalledBoardWithPackage[]> {
+    const allBoards = await this.boardsService.searchBoards({});
+    return allBoards.filter(InstalledBoardWithPackage.is);
+  }
 }
 export namespace BoardSelection {
-    export namespace Commands {
-        export const GET_BOARD_INFO: Command = { id: 'arduino-get-board-info' };
-    }
+  export namespace Commands {
+    export const GET_BOARD_INFO: Command = { id: 'arduino-get-board-info' };
+  }
 }

arduino-ide-extension/src/browser/contributions/burn-bootloader.ts

@@ -1,82 +1,97 @@
 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, Command, CommandRegistry, MenuModelRegistry } from './contribution';
+import {
+  SketchContribution,
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+} from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class BurnBootloader extends SketchContribution {
+  @inject(CoreService)
+  protected readonly coreService: CoreService;
 
-    @inject(CoreService)
-    protected readonly coreService: CoreService;
+  @inject(SerialConnectionManager)
+  protected readonly serialConnection: SerialConnectionManager;
 
-    @inject(MonitorConnection)
-    protected readonly monitorConnection: MonitorConnection;
+  @inject(BoardsDataStore)
+  protected readonly boardsDataStore: BoardsDataStore;
 
-    @inject(BoardsDataStore)
-    protected readonly boardsDataStore: BoardsDataStore;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClientImpl: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClientImpl: BoardsServiceProvider;
+  @inject(OutputChannelManager)
+  protected readonly outputChannelManager: OutputChannelManager;
 
-    @inject(OutputChannelManager)
-    protected readonly outputChannelManager: OutputChannelManager;
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(BurnBootloader.Commands.BURN_BOOTLOADER, {
+      execute: () => this.burnBootloader(),
+    });
+  }
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(BurnBootloader.Commands.BURN_BOOTLOADER, {
-            execute: () => this.burnBootloader()
-        });
-    }
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP, {
+      commandId: BurnBootloader.Commands.BURN_BOOTLOADER.id,
+      label: nls.localize(
+        'arduino/bootloader/burnBootloader',
+        'Burn Bootloader'
+      ),
+      order: 'z99',
+    });
+  }
 
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.TOOLS__BOARD_SETTINGS_GROUP, {
-            commandId: BurnBootloader.Commands.BURN_BOOTLOADER.id,
-            label: '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 [fqbn, { selectedProgrammer: programmer }, verify, verbose] = await Promise.all([
-                this.boardsDataStore.appendConfigToFqbn(boardsConfig.selectedBoard?.fqbn),
-                this.boardsDataStore.getData(boardsConfig.selectedBoard?.fqbn),
-                this.preferences.get('arduino.upload.verify'),
-                this.preferences.get('arduino.upload.verbose')
-            ]);
-            this.outputChannelManager.getChannel('Arduino').clear();
-            await this.coreService.burnBootloader({
-                fqbn,
-                programmer,
-                port,
-                verify,
-                verbose
-            });
-            this.messageService.info('Done burning bootloader.', { timeout: 1000 });
-        } catch (e) {
-            this.messageService.error(e.toString());
-        } finally {
-            if (monitorConfig) {
-                await this.monitorConnection.connect(monitorConfig);
-            }
+  async burnBootloader(): Promise<void> {
+    await this.serialConnection.disconnect();
+    try {
+      const { boardsConfig } = this.boardsServiceClientImpl;
+      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.preferences.get('arduino.upload.verify'),
+          this.preferences.get('arduino.upload.verbose'),
+        ]);
+      this.outputChannelManager.getChannel('Arduino').clear();
+      await this.coreService.burnBootloader({
+        fqbn,
+        programmer,
+        port,
+        verify,
+        verbose,
+      });
+      this.messageService.info(
+        nls.localize(
+          'arduino/bootloader/doneBurningBootloader',
+          'Done burning bootloader.'
+        ),
+        {
+          timeout: 3000,
         }
+      );
+    } catch (e) {
+      this.messageService.error(e.toString());
+    } finally {
+      if (this.serialConnection.isSerialOpen()) {
+        await this.serialConnection.connect();
+      }
     }
-
+  }
 }
 
 export namespace BurnBootloader {
-    export namespace Commands {
-        export const BURN_BOOTLOADER: Command = {
-            id: 'arduino-burn-bootloader'
-        };
-    }
+  export namespace Commands {
+    export const BURN_BOOTLOADER: Command = {
+      id: 'arduino-burn-bootloader',
+    };
+  }
 }

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

@@ -7,113 +7,142 @@ import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shel
 import { FrontendApplication } from '@theia/core/lib/browser/frontend-application';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { SaveAsSketch } from './save-as-sketch';
-import { SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, URI } from './contribution';
+import {
+  SketchContribution,
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+  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.
  */
 @injectable()
 export class Close extends SketchContribution {
+  @inject(EditorManager)
+  protected readonly editorManager: EditorManager;
 
-    @inject(EditorManager)
-    protected readonly editorManager: EditorManager;
+  protected shell: ApplicationShell;
 
-    protected shell: ApplicationShell;
+  onStart(app: FrontendApplication): void {
+    this.shell = app.shell;
+  }
 
-    onStart(app: FrontendApplication): void {
-        this.shell = app.shell;
-    }
-
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(Close.Commands.CLOSE, {
-            execute: async () => {
-
-                // Close current editor if closeable.
-                const { currentEditor } = this.editorManager;
-                if (currentEditor && currentEditor.title.closable) {
-                    currentEditor.close();
-                    return;
-                }
-
-                // Close current widget from the main area if possible.
-                const { currentWidget } = this.shell;
-                if (currentWidget) {
-                    const currentWidgetInMain = toArray(this.shell.mainPanel.widgets()).find(widget => widget === currentWidget);
-                    if (currentWidgetInMain && currentWidgetInMain.title.closable) {
-                        return currentWidgetInMain.close();
-                    }
-                }
-
-                // Close the sketch (window).
-                const sketch = await this.sketchServiceClient.currentSketch();
-                if (!sketch) {
-                    return;
-                }
-                const isTemp = await this.sketchService.isTemp(sketch);
-                const uri = await this.sketchServiceClient.currentSketchFile();
-                if (!uri) {
-                    return;
-                }
-                if (isTemp && await this.wasTouched(uri)) {
-                    const { response } = await remote.dialog.showMessageBox({
-                        type: 'question',
-                        buttons: ["Don't Save", 'Cancel', 'Save'],
-                        message: 'Do you want to save changes to this sketch before closing?',
-                        detail: "If you don't save, your changes will be lost."
-                    });
-                    if (response === 1) { // Cancel
-                        return;
-                    }
-                    if (response === 2) { // Save
-                        const saved = await this.commandService.executeCommand(SaveAsSketch.Commands.SAVE_AS_SKETCH.id, { openAfterMove: false, execOnlyIfTemp: true });
-                        if (!saved) { // If it was not saved, do bail the close.
-                            return;
-                        }
-                    }
-                }
-                window.close();
-            }
-        });
-    }
-
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
-            commandId: Close.Commands.CLOSE.id,
-            label: 'Close',
-            order: '5'
-        });
-    }
-
-    registerKeybindings(registry: KeybindingRegistry): void {
-        registry.registerKeybinding({
-            command: Close.Commands.CLOSE.id,
-            keybinding: 'CtrlCmd+W'
-        });
-    }
-
-    /**
-     * If the file was ever touched/modified. We get this based on the `version` of the monaco model.
-     */
-    protected async wasTouched(uri: string): Promise<boolean> {
-        const editorWidget = await this.editorManager.getByUri(new URI(uri));
-        if (editorWidget) {
-            const { editor } = editorWidget;
-            if (editor instanceof MonacoEditor) {
-                const versionId = editor.getControl().getModel()?.getVersionId();
-                if (Number.isInteger(versionId) && versionId! > 1) {
-                    return true;
-                }
-            }
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(Close.Commands.CLOSE, {
+      execute: async () => {
+        // Close current editor if closeable.
+        const { currentEditor } = this.editorManager;
+        if (currentEditor && currentEditor.title.closable) {
+          currentEditor.close();
+          return;
         }
-        return false;
-    }
 
+        // Close current widget from the main area if possible.
+        const { currentWidget } = this.shell;
+        if (currentWidget) {
+          const currentWidgetInMain = toArray(
+            this.shell.mainPanel.widgets()
+          ).find((widget) => widget === currentWidget);
+          if (currentWidgetInMain && currentWidgetInMain.title.closable) {
+            return currentWidgetInMain.close();
+          }
+        }
+
+        // Close the sketch (window).
+        const sketch = await this.sketchServiceClient.currentSketch();
+        if (!sketch) {
+          return;
+        }
+        const isTemp = await this.sketchService.isTemp(sketch);
+        const uri = await this.sketchServiceClient.currentSketchFile();
+        if (!uri) {
+          return;
+        }
+        if (isTemp && (await this.wasTouched(uri))) {
+          const { response } = await remote.dialog.showMessageBox({
+            type: 'question',
+            buttons: [
+              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
+            return;
+          }
+          if (response === 2) {
+            // Save
+            const saved = await this.commandService.executeCommand(
+              SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
+              { openAfterMove: false, execOnlyIfTemp: true }
+            );
+            if (!saved) {
+              // If it was not saved, do bail the close.
+              return;
+            }
+          }
+        }
+        window.close();
+      },
+    });
+  }
+
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
+      commandId: Close.Commands.CLOSE.id,
+      label: nls.localize('vscode/editor.contribution/close', 'Close'),
+      order: '5',
+    });
+  }
+
+  registerKeybindings(registry: KeybindingRegistry): void {
+    registry.registerKeybinding({
+      command: Close.Commands.CLOSE.id,
+      keybinding: 'CtrlCmd+W',
+    });
+  }
+
+  /**
+   * If the file was ever touched/modified. We get this based on the `version` of the monaco model.
+   */
+  protected async wasTouched(uri: string): Promise<boolean> {
+    const editorWidget = await this.editorManager.getByUri(new URI(uri));
+    if (editorWidget) {
+      const { editor } = editorWidget;
+      if (editor instanceof MonacoEditor) {
+        const versionId = editor.getControl().getModel()?.getVersionId();
+        if (Number.isInteger(versionId) && versionId! > 1) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
 }
 
 export namespace Close {
-    export namespace Commands {
-        export const CLOSE: Command = {
-            id: 'arduino-close'
-        };
-    }
+  export namespace Commands {
+    export const CLOSE: Command = {
+      id: 'arduino-close',
+    };
+  }
 }

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

@@ -9,114 +9,146 @@ 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 { MenuModelRegistry, MenuContribution } from '@theia/core/lib/common/menu';
-import { KeybindingRegistry, KeybindingContribution } from '@theia/core/lib/browser/keybinding';
-import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser/frontend-application';
-import { Command, CommandRegistry, CommandContribution, CommandService } from '@theia/core/lib/common/command';
+import { OutputChannelManager } from '@theia/output/lib/browser/output-channel';
+import {
+  MenuModelRegistry,
+  MenuContribution,
+} from '@theia/core/lib/common/menu';
+import {
+  KeybindingRegistry,
+  KeybindingContribution,
+} from '@theia/core/lib/browser/keybinding';
+import {
+  TabBarToolbarContribution,
+  TabBarToolbarRegistry,
+} from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import {
+  FrontendApplicationContribution,
+  FrontendApplication,
+} from '@theia/core/lib/browser/frontend-application';
+import {
+  Command,
+  CommandRegistry,
+  CommandContribution,
+  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, ConfigService, FileSystemExt, Sketch } from '../../common/protocol';
+import {
+  SketchesService,
+  ConfigService,
+  FileSystemExt,
+  Sketch,
+} from '../../common/protocol';
 import { ArduinoPreferences } from '../arduino-preferences';
 
-export { Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry, URI, Sketch, open };
+export {
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+  KeybindingRegistry,
+  TabBarToolbarRegistry,
+  URI,
+  Sketch,
+  open,
+};
 
 @injectable()
-export abstract class Contribution implements CommandContribution, MenuContribution, KeybindingContribution, TabBarToolbarContribution, FrontendApplicationContribution {
+export abstract class Contribution
+  implements
+    CommandContribution,
+    MenuContribution,
+    KeybindingContribution,
+    TabBarToolbarContribution,
+    FrontendApplicationContribution
+{
+  @inject(ILogger)
+  protected readonly logger: ILogger;
 
-    @inject(ILogger)
-    protected readonly logger: ILogger;
+  @inject(MessageService)
+  protected readonly messageService: MessageService;
 
-    @inject(MessageService)
-    protected readonly messageService: MessageService;
+  @inject(CommandService)
+  protected readonly commandService: CommandService;
 
-    @inject(CommandService)
-    protected readonly commandService: CommandService;
+  @inject(WorkspaceService)
+  protected readonly workspaceService: WorkspaceService;
 
-    @inject(WorkspaceService)
-    protected readonly workspaceService: WorkspaceService;
+  @inject(EditorMode)
+  protected readonly editorMode: EditorMode;
 
-    @inject(EditorMode)
-    protected readonly editorMode: EditorMode;
+  @inject(LabelProvider)
+  protected readonly labelProvider: LabelProvider;
 
-    @inject(LabelProvider)
-    protected readonly labelProvider: LabelProvider;
+  @inject(SettingsService)
+  protected readonly settingsService: SettingsService;
 
-    @inject(SettingsService)
-    protected readonly settingsService: SettingsService;
+  onStart(app: FrontendApplication): MaybePromise<void> {}
 
-    onStart(app: FrontendApplication): MaybePromise<void> {
-    }
+  registerCommands(registry: CommandRegistry): void {}
 
-    registerCommands(registry: CommandRegistry): void {
-    }
+  registerMenus(registry: MenuModelRegistry): void {}
 
-    registerMenus(registry: MenuModelRegistry): void {
-    }
-
-    registerKeybindings(registry: KeybindingRegistry): void {
-    }
-
-    registerToolbarItems(registry: TabBarToolbarRegistry): void {
-    }
+  registerKeybindings(registry: KeybindingRegistry): void {}
 
+  registerToolbarItems(registry: TabBarToolbarRegistry): void {}
 }
 
 @injectable()
 export abstract class SketchContribution extends Contribution {
+  @inject(FileService)
+  protected readonly fileService: FileService;
 
-    @inject(FileService)
-    protected readonly fileService: FileService;
+  @inject(FileSystemExt)
+  protected readonly fileSystemExt: FileSystemExt;
 
-    @inject(FileSystemExt)
-    protected readonly fileSystemExt: FileSystemExt;
+  @inject(ConfigService)
+  protected readonly configService: ConfigService;
 
-    @inject(ConfigService)
-    protected readonly configService: ConfigService;
+  @inject(SketchesService)
+  protected readonly sketchService: SketchesService;
 
-    @inject(SketchesService)
-    protected readonly sketchService: SketchesService;
+  @inject(OpenerService)
+  protected readonly openerService: OpenerService;
 
-    @inject(OpenerService)
-    protected readonly openerService: OpenerService;
+  @inject(SketchesServiceClientImpl)
+  protected readonly sketchServiceClient: SketchesServiceClientImpl;
 
-    @inject(SketchesServiceClientImpl)
-    protected readonly sketchServiceClient: SketchesServiceClientImpl;
+  @inject(ArduinoPreferences)
+  protected readonly preferences: ArduinoPreferences;
 
-    @inject(ArduinoPreferences)
-    protected readonly preferences: ArduinoPreferences;
+  @inject(EditorManager)
+  protected readonly editorManager: EditorManager;
 
-    @inject(EditorManager)
-    protected readonly editorManager: EditorManager;
+  @inject(OutputChannelManager)
+  protected readonly outputChannelManager: OutputChannelManager;
 
-    @inject(OutputChannelManager)
-    protected readonly outputChannelManager: OutputChannelManager;
-
-    protected async sourceOverride(): Promise<Record<string, string>> {
-        const override: Record<string, string> = {};
-        const sketch = await this.sketchServiceClient.currentSketch();
-        if (sketch) {
-            for (const editor of this.editorManager.all) {
-                const uri = editor.editor.uri;
-                if (Saveable.isDirty(editor) && Sketch.isInSketch(uri, sketch)) {
-                    override[uri.toString()] = editor.editor.document.getText();
-                }
-            }
+  protected async sourceOverride(): Promise<Record<string, string>> {
+    const override: Record<string, string> = {};
+    const sketch = await this.sketchServiceClient.currentSketch();
+    if (sketch) {
+      for (const editor of this.editorManager.all) {
+        const uri = editor.editor.uri;
+        if (Saveable.isDirty(editor) && Sketch.isInSketch(uri, sketch)) {
+          override[uri.toString()] = editor.editor.document.getText();
         }
-        return override;
+      }
     }
-
+    return override;
+  }
 }
 
 export namespace Contribution {
-    export function configure<T>(bind: interfaces.Bind, serviceIdentifier: typeof Contribution): void {
-        bind(serviceIdentifier).toSelf().inSingletonScope();
-        bind(CommandContribution).toService(serviceIdentifier);
-        bind(MenuContribution).toService(serviceIdentifier);
-        bind(KeybindingContribution).toService(serviceIdentifier);
-        bind(TabBarToolbarContribution).toService(serviceIdentifier);
-        bind(FrontendApplicationContribution).toService(serviceIdentifier);
-    }
+  export function configure<T>(
+    bind: interfaces.Bind,
+    serviceIdentifier: typeof Contribution
+  ): void {
+    bind(serviceIdentifier).toSelf().inSingletonScope();
+    bind(CommandContribution).toService(serviceIdentifier);
+    bind(MenuContribution).toService(serviceIdentifier);
+    bind(KeybindingContribution).toService(serviceIdentifier);
+    bind(TabBarToolbarContribution).toService(serviceIdentifier);
+    bind(FrontendApplicationContribution).toService(serviceIdentifier);
+  }
 }

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

@@ -5,130 +5,190 @@ import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
 import { NotificationCenter } from '../notification-center';
 import { Board, BoardsService, ExecutableService } from '../../common/protocol';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
-import { URI, Command, CommandRegistry, SketchContribution, TabBarToolbarRegistry } from './contribution';
+import {
+  URI,
+  Command,
+  CommandRegistry,
+  SketchContribution,
+  TabBarToolbarRegistry,
+} from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class Debug extends SketchContribution {
+  @inject(HostedPluginSupport)
+  protected hostedPluginSupport: HostedPluginSupport;
 
-    @inject(HostedPluginSupport)
-    protected hostedPluginSupport: HostedPluginSupport;
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
 
-    @inject(NotificationCenter)
-    protected readonly notificationCenter: NotificationCenter;
+  @inject(ExecutableService)
+  protected readonly executableService: ExecutableService;
 
-    @inject(ExecutableService)
-    protected readonly executableService: ExecutableService;
+  @inject(BoardsService)
+  protected readonly boardService: BoardsService;
 
-    @inject(BoardsService)
-    protected readonly boardService: BoardsService;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceProvider: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceProvider: BoardsServiceProvider;
+  /**
+   * If `undefined`, debugging is enabled. Otherwise, the reason why it's disabled.
+   */
+  protected _disabledMessages?: string = nls.localize(
+    'arduino/common/noBoardSelected',
+    'No board selected'
+  ); // Initial pessimism.
+  protected disabledMessageDidChangeEmitter = new Emitter<string | undefined>();
+  protected onDisabledMessageDidChange =
+    this.disabledMessageDidChangeEmitter.event;
 
-    /**
-     * 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 onDisabledMessageDidChange = this.disabledMessageDidChangeEmitter.event;
+  protected get disabledMessage(): string | undefined {
+    return this._disabledMessages;
+  }
+  protected set disabledMessage(message: string | undefined) {
+    this._disabledMessages = message;
+    this.disabledMessageDidChangeEmitter.fire(this._disabledMessages);
+  }
 
-    protected get disabledMessage(): string | undefined {
-        return this._disabledMessages;
-    }
-    protected set disabledMessage(message: string | undefined) {
-        this._disabledMessages = message;
-        this.disabledMessageDidChangeEmitter.fire(this._disabledMessages);
-    }
+  protected readonly debugToolbarItem = {
+    id: Debug.Commands.START_DEBUGGING.id,
+    command: Debug.Commands.START_DEBUGGING.id,
+    tooltip: `${
+      this.disabledMessage
+        ? nls.localize(
+            'arduino/debug/debugWithMessage',
+            'Debug - {0}',
+            this.disabledMessage
+          )
+        : Debug.Commands.START_DEBUGGING.label
+    }`,
+    priority: 3,
+    onDidChange: this.onDisabledMessageDidChange as Event<void>,
+  };
 
-    protected readonly debugToolbarItem = {
-        id: Debug.Commands.START_DEBUGGING.id,
-        command: Debug.Commands.START_DEBUGGING.id,
-        tooltip: `${this.disabledMessage ? `Debug - ${this.disabledMessage}` : 'Start Debugging'}`,
-        priority: 3,
-        onDidChange: this.onDisabledMessageDidChange as Event<void>
+  onStart(): void {
+    this.onDisabledMessageDidChange(
+      () =>
+        (this.debugToolbarItem.tooltip = `${
+          this.disabledMessage
+            ? nls.localize(
+                'arduino/debug/debugWithMessage',
+                'Debug - {0}',
+                this.disabledMessage
+              )
+            : Debug.Commands.START_DEBUGGING.label
+        }`)
+    );
+    const refreshState = async (
+      board: Board | undefined = this.boardsServiceProvider.boardsConfig
+        .selectedBoard
+    ) => {
+      if (!board) {
+        this.disabledMessage = nls.localize(
+          'arduino/common/noBoardSelected',
+          'No board selected'
+        );
+        return;
+      }
+      const fqbn = board.fqbn;
+      if (!fqbn) {
+        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 = nls.localize(
+          'arduino/debug/noPlatformInstalledFor',
+          "Platform is not installed for '{0}'",
+          board.name
+        );
+        return;
+      }
+      const { debuggingSupported } = details;
+      if (!debuggingSupported) {
+        this.disabledMessage = nls.localize(
+          'arduino/debug/debuggingNotSupported',
+          "Debugging is not supported by '{0}'",
+          board.name
+        );
+      } else {
+        this.disabledMessage = undefined;
+      }
     };
+    this.boardsServiceProvider.onBoardsConfigChanged(({ selectedBoard }) =>
+      refreshState(selectedBoard)
+    );
+    this.notificationCenter.onPlatformInstalled(() => refreshState());
+    this.notificationCenter.onPlatformUninstalled(() => refreshState());
+    refreshState();
+  }
 
-    onStart(): void {
-        this.onDisabledMessageDidChange(() => this.debugToolbarItem.tooltip = `${this.disabledMessage ? `Debug - ${this.disabledMessage}` : 'Start Debugging'}`);
-        const refreshState = async (board: Board | undefined = this.boardsServiceProvider.boardsConfig.selectedBoard) => {
-            if (!board) {
-                this.disabledMessage = 'No board selected';
-                return;
-            }
-            const fqbn = board.fqbn;
-            if (!fqbn) {
-                this.disabledMessage = `Platform is not installed for '${board.name}'`;
-                return;
-            }
-            const details = await this.boardService.getBoardDetails({ fqbn });
-            if (!details) {
-                this.disabledMessage = `Platform is not installed for '${board.name}'`;
-                return;
-            }
-            const { debuggingSupported } = details;
-            if (!debuggingSupported) {
-                this.disabledMessage = `Debugging is not supported by '${board.name}'`;
-            } else {
-                this.disabledMessage = undefined;
-            }
-        }
-        this.boardsServiceProvider.onBoardsConfigChanged(({ selectedBoard }) => refreshState(selectedBoard));
-        this.notificationCenter.onPlatformInstalled(() => refreshState());
-        this.notificationCenter.onPlatformUninstalled(() => refreshState());
-        refreshState();
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(Debug.Commands.START_DEBUGGING, {
+      execute: () => this.startDebug(),
+      isVisible: (widget) =>
+        ArduinoToolbar.is(widget) && widget.side === 'left',
+      isEnabled: () => !this.disabledMessage,
+    });
+  }
+
+  registerToolbarItems(registry: TabBarToolbarRegistry): void {
+    registry.registerItem(this.debugToolbarItem);
+  }
+
+  protected async startDebug(
+    board: Board | undefined = this.boardsServiceProvider.boardsConfig
+      .selectedBoard
+  ): Promise<void> {
+    if (!board) {
+      return;
     }
-
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(Debug.Commands.START_DEBUGGING, {
-            execute: () => this.startDebug(),
-            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
-            isEnabled: () => !this.disabledMessage
-        });
+    const { name, fqbn } = board;
+    if (!fqbn) {
+      return;
     }
-
-    registerToolbarItems(registry: TabBarToolbarRegistry): void {
-        registry.registerItem(this.debugToolbarItem);
+    await this.hostedPluginSupport.didStart;
+    const [sketch, executables] = await Promise.all([
+      this.sketchServiceClient.currentSketch(),
+      this.executableService.list(),
+    ]);
+    if (!sketch) {
+      return;
     }
-
-    protected async startDebug(board: Board | undefined = this.boardsServiceProvider.boardsConfig.selectedBoard): Promise<void> {
-        if (!board) {
-            return;
-        }
-        const { name, fqbn } = board;
-        if (!fqbn) {
-            return;
-        }
-        await this.hostedPluginSupport.didStart;
-        const [sketch, executables] = await Promise.all([
-            this.sketchServiceClient.currentSketch(),
-            this.executableService.list()
-        ]);
-        if (!sketch) {
-            return;
-        }
-        const [cliPath, sketchPath] = await Promise.all([
-            this.fileService.fsPath(new URI(executables.cliUri)),
-            this.fileService.fsPath(new URI(sketch.uri))
-        ])
-        const config = {
-            cliPath,
-            board: {
-                fqbn,
-                name
-            },
-            sketchPath
-        };
-        return this.commandService.executeCommand('arduino.debug.start', config);
-    }
-
+    const ideTempFolderUri = await this.sketchService.getIdeTempFolderUri(
+      sketch
+    );
+    const [cliPath, sketchPath, configPath] = await Promise.all([
+      this.fileService.fsPath(new URI(executables.cliUri)),
+      this.fileService.fsPath(new URI(sketch.uri)),
+      this.fileService.fsPath(new URI(ideTempFolderUri)),
+    ]);
+    const config = {
+      cliPath,
+      board: {
+        fqbn,
+        name,
+      },
+      sketchPath,
+      configPath,
+    };
+    return this.commandService.executeCommand('arduino.debug.start', config);
+  }
 }
 
 export namespace Debug {
-    export namespace Commands {
-        export const START_DEBUGGING: Command = {
-            id: 'arduino-start-debug',
-            label: 'Start Debugging',
-            category: 'Arduino'
-        }
-    }
+  export namespace Commands {
+    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

@@ -3,292 +3,320 @@ import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribu
 import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { PreferenceService } from '@theia/core/lib/browser/preferences/preference-service';
 import { MonacoEditorService } from '@theia/monaco/lib/browser/monaco-editor-service';
-import { Contribution, Command, MenuModelRegistry, KeybindingRegistry, CommandRegistry } from './contribution';
+import {
+  Contribution,
+  Command,
+  MenuModelRegistry,
+  KeybindingRegistry,
+  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
 @injectable()
 export class EditContributions extends Contribution {
+  @inject(MonacoEditorService)
+  protected readonly codeEditorService: MonacoEditorService;
 
-    @inject(MonacoEditorService)
-    protected readonly codeEditorService: MonacoEditorService;
+  @inject(ClipboardService)
+  protected readonly clipboardService: ClipboardService;
 
-    @inject(ClipboardService)
-    protected readonly clipboardService: ClipboardService;
+  @inject(PreferenceService)
+  protected readonly preferences: PreferenceService;
 
-    @inject(PreferenceService)
-    protected readonly preferences: PreferenceService;
-
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(EditContributions.Commands.GO_TO_LINE, { execute: () => this.run('editor.action.gotoLine') });
-        registry.registerCommand(EditContributions.Commands.TOGGLE_COMMENT, { execute: () => this.run('editor.action.commentLine') });
-        registry.registerCommand(EditContributions.Commands.INDENT_LINES, { execute: () => this.run('editor.action.indentLines') });
-        registry.registerCommand(EditContributions.Commands.OUTDENT_LINES, { execute: () => this.run('editor.action.outdentLines') });
-        registry.registerCommand(EditContributions.Commands.FIND, { execute: () => this.run('actions.find') });
-        registry.registerCommand(EditContributions.Commands.FIND_NEXT, { execute: () => this.run('actions.findWithSelection') });
-        registry.registerCommand(EditContributions.Commands.FIND_PREVIOUS, { execute: () => this.run('editor.action.nextMatchFindAction') });
-        registry.registerCommand(EditContributions.Commands.USE_FOR_FIND, { execute: () => this.run('editor.action.previousSelectionMatchFindAction') });
-        registry.registerCommand(EditContributions.Commands.INCREASE_FONT_SIZE, {
-            execute: async () => {
-                const settings = await this.settingsService.settings();
-                if (settings.autoScaleInterface) {
-                    settings.interfaceScale = settings.interfaceScale + 1;
-                } else {
-                    settings.editorFontSize = settings.editorFontSize + 1;
-                }
-                await this.settingsService.update(settings);
-                await this.settingsService.save();
-            }
-        });
-        registry.registerCommand(EditContributions.Commands.DECREASE_FONT_SIZE, {
-            execute: async () => {
-                const settings = await this.settingsService.settings();
-                if (settings.autoScaleInterface) {
-                    settings.interfaceScale = settings.interfaceScale - 1;
-                } else {
-                    settings.editorFontSize = settings.editorFontSize - 1;
-                }
-                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) {
-                    this.clipboardService.writeText(`\`\`\`cpp
-${value}
-\`\`\``)
-                }
-            }
-        });
-    }
-
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: CommonCommands.CUT.id,
-            order: '0'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: CommonCommands.COPY.id,
-            order: '1'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.COPY_FOR_FORUM.id,
-            label: 'Copy for Forum',
-            order: '2'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.COPY_FOR_GITHUB.id,
-            label: 'Copy for GitHub',
-            order: '3'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: CommonCommands.PASTE.id,
-            order: '4'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: CommonCommands.SELECT_ALL.id,
-            order: '5'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.GO_TO_LINE.id,
-            label: 'Go to Line...',
-            order: '6'
-        });
-
-        registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.TOGGLE_COMMENT.id,
-            label: 'Comment/Uncomment',
-            order: '0'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.INDENT_LINES.id,
-            label: 'Increase Indent',
-            order: '1'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.OUTDENT_LINES.id,
-            label: 'Decrease Indent',
-            order: '2'
-        });
-
-        registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.INCREASE_FONT_SIZE.id,
-            label: 'Increase Font Size',
-            order: '0'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__FONT_CONTROL_GROUP, {
-            commandId: EditContributions.Commands.DECREASE_FONT_SIZE.id,
-            label: 'Decrease Font Size',
-            order: '1'
-        });
-
-        registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
-            commandId: EditContributions.Commands.FIND.id,
-            label: 'Find',
-            order: '0'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
-            commandId: EditContributions.Commands.FIND_NEXT.id,
-            label: 'Find Next',
-            order: '1'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
-            commandId: EditContributions.Commands.FIND_PREVIOUS.id,
-            label: 'Find Previous',
-            order: '2'
-        });
-        registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
-            commandId: EditContributions.Commands.USE_FOR_FIND.id,
-            label: 'Use Selection for Find', // XXX: The Java IDE uses `Use Selection For Find`.
-            order: '3'
-        });
-
-        // `Tools`
-        registry.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
-            commandId: EditContributions.Commands.AUTO_FORMAT.id,
-            label: 'Auto Format', // XXX: The Java IDE uses `Use Selection For Find`.
-            order: '0'
-        });
-    }
-
-    registerKeybindings(registry: KeybindingRegistry): void {
-        registry.registerKeybinding({
-            command: EditContributions.Commands.COPY_FOR_FORUM.id,
-            keybinding: 'CtrlCmd+Shift+C',
-            when: 'editorFocus'
-        });
-        registry.registerKeybinding({
-            command: EditContributions.Commands.COPY_FOR_GITHUB.id,
-            keybinding: 'CtrlCmd+Alt+C',
-            when: 'editorFocus'
-        });
-        registry.registerKeybinding({
-            command: EditContributions.Commands.GO_TO_LINE.id,
-            keybinding: 'CtrlCmd+L',
-            when: 'editorFocus'
-        });
-
-        registry.registerKeybinding({
-            command: EditContributions.Commands.TOGGLE_COMMENT.id,
-            keybinding: 'CtrlCmd+/',
-            when: 'editorFocus'
-        });
-
-        registry.registerKeybinding({
-            command: EditContributions.Commands.INCREASE_FONT_SIZE.id,
-            keybinding: 'CtrlCmd+='
-        });
-        registry.registerKeybinding({
-            command: EditContributions.Commands.DECREASE_FONT_SIZE.id,
-            keybinding: 'CtrlCmd+-'
-        });
-
-        registry.registerKeybinding({
-            command: EditContributions.Commands.FIND.id,
-            keybinding: 'CtrlCmd+F'
-        });
-        registry.registerKeybinding({
-            command: EditContributions.Commands.FIND_NEXT.id,
-            keybinding: 'CtrlCmd+G'
-        });
-        registry.registerKeybinding({
-            command: EditContributions.Commands.FIND_PREVIOUS.id,
-            keybinding: 'CtrlCmd+Shift+G'
-        });
-        registry.registerKeybinding({
-            command: EditContributions.Commands.USE_FOR_FIND.id,
-            keybinding: 'CtrlCmd+E'
-        });
-
-        // `Tools`
-        registry.registerKeybinding({
-            command: EditContributions.Commands.AUTO_FORMAT.id,
-            keybinding: 'CtrlCmd+T'
-        });
-    }
-
-    protected async current(): Promise<monaco.editor.ICodeEditor | undefined> {
-        return this.codeEditorService.getFocusedCodeEditor() || this.codeEditorService.getActiveCodeEditor();
-    }
-
-    protected async currentValue(): Promise<string | undefined> {
-        const currentEditor = await this.current();
-        if (currentEditor) {
-            const selection = currentEditor.getSelection();
-            if (!selection || selection.isEmpty()) {
-                return currentEditor.getValue();
-            }
-            return currentEditor.getModel()?.getValueInRange(selection);
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(EditContributions.Commands.GO_TO_LINE, {
+      execute: () => this.run('editor.action.gotoLine'),
+    });
+    registry.registerCommand(EditContributions.Commands.TOGGLE_COMMENT, {
+      execute: () => this.run('editor.action.commentLine'),
+    });
+    registry.registerCommand(EditContributions.Commands.INDENT_LINES, {
+      execute: () => this.run('editor.action.indentLines'),
+    });
+    registry.registerCommand(EditContributions.Commands.OUTDENT_LINES, {
+      execute: () => this.run('editor.action.outdentLines'),
+    });
+    registry.registerCommand(EditContributions.Commands.FIND, {
+      execute: () => this.run('actions.find'),
+    });
+    registry.registerCommand(EditContributions.Commands.FIND_NEXT, {
+      execute: () => this.run('actions.findWithSelection'),
+    });
+    registry.registerCommand(EditContributions.Commands.FIND_PREVIOUS, {
+      execute: () => this.run('editor.action.nextMatchFindAction'),
+    });
+    registry.registerCommand(EditContributions.Commands.USE_FOR_FIND, {
+      execute: () => this.run('editor.action.previousSelectionMatchFindAction'),
+    });
+    registry.registerCommand(EditContributions.Commands.INCREASE_FONT_SIZE, {
+      execute: async () => {
+        const settings = await this.settingsService.settings();
+        if (settings.autoScaleInterface) {
+          settings.interfaceScale = settings.interfaceScale + 1;
+        } else {
+          settings.editorFontSize = settings.editorFontSize + 1;
         }
-        return undefined;
-    }
-
-    protected async run(commandId: string): Promise<any> {
-        const editor = await this.current();
-        if (editor) {
-            const action = editor.getAction(commandId);
-            if (action) {
-                return action.run();
-            }
+        await this.settingsService.update(settings);
+        await this.settingsService.save();
+      },
+    });
+    registry.registerCommand(EditContributions.Commands.DECREASE_FONT_SIZE, {
+      execute: async () => {
+        const settings = await this.settingsService.settings();
+        if (settings.autoScaleInterface) {
+          settings.interfaceScale = settings.interfaceScale - 1;
+        } else {
+          settings.editorFontSize = settings.editorFontSize - 1;
         }
-    }
+        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(`\`\`\`cpp
+${value}
+\`\`\``);
+        }
+      },
+    });
+  }
 
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+      commandId: CommonCommands.CUT.id,
+      order: '0',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+      commandId: CommonCommands.COPY.id,
+      order: '1',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+      commandId: EditContributions.Commands.COPY_FOR_FORUM.id,
+      label: nls.localize(
+        'arduino/editor/copyForForum',
+        'Copy for Forum (Markdown)'
+      ),
+      order: '2',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+      commandId: CommonCommands.PASTE.id,
+      order: '3',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+      commandId: CommonCommands.SELECT_ALL.id,
+      order: '4',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__TEXT_CONTROL_GROUP, {
+      commandId: EditContributions.Commands.GO_TO_LINE.id,
+      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: nls.localize(
+        'arduino/editor/commentUncomment',
+        'Comment/Uncomment'
+      ),
+      order: '0',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
+      commandId: EditContributions.Commands.INDENT_LINES.id,
+      label: nls.localize('arduino/editor/increaseIndent', 'Increase Indent'),
+      order: '1',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__CODE_CONTROL_GROUP, {
+      commandId: EditContributions.Commands.OUTDENT_LINES.id,
+      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: 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: nls.localize(
+        'arduino/editor/decreaseFontSize',
+        'Decrease Font Size'
+      ),
+      order: '1',
+    });
+
+    registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
+      commandId: EditContributions.Commands.FIND.id,
+      label: nls.localize('vscode/findController/startFindAction', 'Find'),
+      order: '0',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
+      commandId: EditContributions.Commands.FIND_NEXT.id,
+      label: nls.localize(
+        'vscode/findController/findNextMatchAction',
+        'Find Next'
+      ),
+      order: '1',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
+      commandId: EditContributions.Commands.FIND_PREVIOUS.id,
+      label: nls.localize(
+        'vscode/findController/findPreviousMatchAction',
+        'Find Previous'
+      ),
+      order: '2',
+    });
+    registry.registerMenuAction(ArduinoMenus.EDIT__FIND_GROUP, {
+      commandId: EditContributions.Commands.USE_FOR_FIND.id,
+      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: nls.localize('arduino/editor/autoFormat', 'Auto Format'), // XXX: The Java IDE uses `Use Selection For Find`.
+      order: '0',
+    });
+  }
+
+  registerKeybindings(registry: KeybindingRegistry): void {
+    registry.registerKeybinding({
+      command: EditContributions.Commands.COPY_FOR_FORUM.id,
+      keybinding: 'CtrlCmd+Shift+C',
+      when: 'editorFocus',
+    });
+    registry.registerKeybinding({
+      command: EditContributions.Commands.GO_TO_LINE.id,
+      keybinding: 'CtrlCmd+L',
+      when: 'editorFocus',
+    });
+
+    registry.registerKeybinding({
+      command: EditContributions.Commands.TOGGLE_COMMENT.id,
+      keybinding: 'CtrlCmd+/',
+      when: 'editorFocus',
+    });
+
+    registry.registerKeybinding({
+      command: EditContributions.Commands.INCREASE_FONT_SIZE.id,
+      keybinding: 'CtrlCmd+=',
+    });
+    registry.registerKeybinding({
+      command: EditContributions.Commands.DECREASE_FONT_SIZE.id,
+      keybinding: 'CtrlCmd+-',
+    });
+
+    registry.registerKeybinding({
+      command: EditContributions.Commands.FIND.id,
+      keybinding: 'CtrlCmd+F',
+    });
+    registry.registerKeybinding({
+      command: EditContributions.Commands.FIND_NEXT.id,
+      keybinding: 'CtrlCmd+G',
+    });
+    registry.registerKeybinding({
+      command: EditContributions.Commands.FIND_PREVIOUS.id,
+      keybinding: 'CtrlCmd+Shift+G',
+    });
+    registry.registerKeybinding({
+      command: EditContributions.Commands.USE_FOR_FIND.id,
+      keybinding: 'CtrlCmd+E',
+    });
+
+    // `Tools`
+    registry.registerKeybinding({
+      command: EditContributions.Commands.AUTO_FORMAT.id,
+      keybinding: 'CtrlCmd+T',
+    });
+  }
+
+  protected async current(): Promise<monaco.editor.ICodeEditor | undefined> {
+    return (
+      this.codeEditorService.getFocusedCodeEditor() ||
+      this.codeEditorService.getActiveCodeEditor()
+    );
+  }
+
+  protected async currentValue(): Promise<string | undefined> {
+    const currentEditor = await this.current();
+    if (currentEditor) {
+      const selection = currentEditor.getSelection();
+      if (!selection || selection.isEmpty()) {
+        return currentEditor.getValue();
+      }
+      return currentEditor.getModel()?.getValueInRange(selection);
+    }
+    return undefined;
+  }
+
+  protected async run(commandId: string): Promise<any> {
+    const editor = await this.current();
+    if (editor) {
+      const action = editor.getAction(commandId);
+      if (action) {
+        return action.run();
+      }
+    }
+  }
 }
 
 export namespace EditContributions {
-    export namespace Commands {
-        export const COPY_FOR_FORUM: Command = {
-            id: 'arduino-copy-for-forum'
-        };
-        export const COPY_FOR_GITHUB: Command = {
-            id: 'arduino-copy-for-github'
-        };
-        export const GO_TO_LINE: Command = {
-            id: 'arduino-go-to-line'
-        };
-        export const TOGGLE_COMMENT: Command = {
-            id: 'arduino-toggle-comment'
-        };
-        export const INDENT_LINES: Command = {
-            id: 'arduino-indent-lines'
-        };
-        export const OUTDENT_LINES: Command = {
-            id: 'arduino-outdent-lines'
-        };
-        export const FIND: Command = {
-            id: 'arduino-find'
-        };
-        export const FIND_NEXT: Command = {
-            id: 'arduino-find-next'
-        };
-        export const FIND_PREVIOUS: Command = {
-            id: 'arduino-find-previous'
-        };
-        export const USE_FOR_FIND: Command = {
-            id: 'arduino-for-find'
-        };
-        export const INCREASE_FONT_SIZE: Command = {
-            id: 'arduino-increase-font-size'
-        };
-        export const DECREASE_FONT_SIZE: Command = {
-            id: 'arduino-decrease-font-size'
-        };
-        export const AUTO_FORMAT: Command = {
-            id: 'arduino-auto-format' // `Auto Format` should belong to `Tool`.
-        };
-    }
+  export namespace Commands {
+    export const COPY_FOR_FORUM: Command = {
+      id: 'arduino-copy-for-forum',
+    };
+    export const GO_TO_LINE: Command = {
+      id: 'arduino-go-to-line',
+    };
+    export const TOGGLE_COMMENT: Command = {
+      id: 'arduino-toggle-comment',
+    };
+    export const INDENT_LINES: Command = {
+      id: 'arduino-indent-lines',
+    };
+    export const OUTDENT_LINES: Command = {
+      id: 'arduino-outdent-lines',
+    };
+    export const FIND: Command = {
+      id: 'arduino-find',
+    };
+    export const FIND_NEXT: Command = {
+      id: 'arduino-find-next',
+    };
+    export const FIND_PREVIOUS: Command = {
+      id: 'arduino-find-previous',
+    };
+    export const USE_FOR_FIND: Command = {
+      id: 'arduino-for-find',
+    };
+    export const INCREASE_FONT_SIZE: Command = {
+      id: 'arduino-increase-font-size',
+    };
+    export const DECREASE_FONT_SIZE: Command = {
+      id: 'arduino-decrease-font-size',
+    };
+    export const AUTO_FORMAT: Command = {
+      id: 'arduino-auto-format', // `Auto Format` should belong to `Tool`.
+    };
+  }
 }

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

@@ -1,169 +1,268 @@
 import * as PQueue from 'p-queue';
 import { inject, injectable, postConstruct } from 'inversify';
-import { MenuPath, CompositeMenuNode } from '@theia/core/lib/common/menu';
-import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
+import { CommandHandler } from '@theia/core/lib/common/command';
+import {
+  MenuPath,
+  CompositeMenuNode,
+  SubMenuOptions,
+} from '@theia/core/lib/common/menu';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
 import { OpenSketch } from './open-sketch';
 import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
 import { MainMenuManager } from '../../common/main-menu-manager';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
-import { ExamplesService, ExampleContainer } from '../../common/protocol/examples-service';
-import { SketchContribution, CommandRegistry, MenuModelRegistry } from './contribution';
+import { ExamplesService } from '../../common/protocol/examples-service';
+import {
+  SketchContribution,
+  CommandRegistry,
+  MenuModelRegistry,
+} from './contribution';
 import { NotificationCenter } from '../notification-center';
-import { Board } from '../../common/protocol';
+import { Board, Sketch, SketchContainer } from '../../common/protocol';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export abstract class Examples extends SketchContribution {
+  @inject(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
 
-    @inject(CommandRegistry)
-    protected readonly commandRegistry: CommandRegistry;
+  @inject(MenuModelRegistry)
+  protected readonly menuRegistry: MenuModelRegistry;
 
-    @inject(MenuModelRegistry)
-    protected readonly menuRegistry: MenuModelRegistry;
+  @inject(MainMenuManager)
+  protected readonly menuManager: MainMenuManager;
 
-    @inject(MainMenuManager)
-    protected readonly menuManager: MainMenuManager;
+  @inject(ExamplesService)
+  protected readonly examplesService: ExamplesService;
 
-    @inject(ExamplesService)
-    protected readonly examplesService: ExamplesService;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClient: BoardsServiceProvider;
+  protected readonly toDispose = new DisposableCollection();
 
-    protected readonly toDispose = new DisposableCollection();
+  @postConstruct()
+  init(): void {
+    this.boardsServiceClient.onBoardsConfigChanged(({ selectedBoard }) =>
+      this.handleBoardChanged(selectedBoard)
+    );
+  }
 
-    @postConstruct()
-    init(): void {
-        this.boardsServiceClient.onBoardsConfigChanged(({ selectedBoard }) => this.handleBoardChanged(selectedBoard));
+  protected handleBoardChanged(board: Board | undefined): void {
+    // NOOP
+  }
+
+  registerMenus(registry: MenuModelRegistry): void {
+    try {
+      // This is a hack the ensures the desired menu ordering! We cannot use https://github.com/eclipse-theia/theia/pull/8377 due to ATL-222.
+      const index = ArduinoMenus.FILE__EXAMPLES_SUBMENU.length - 1;
+      const menuId = ArduinoMenus.FILE__EXAMPLES_SUBMENU[index];
+      const groupPath =
+        index === 0 ? [] : ArduinoMenus.FILE__EXAMPLES_SUBMENU.slice(0, index);
+      const parent: CompositeMenuNode = (registry as any).findGroup(groupPath);
+      const examples = new CompositeMenuNode(menuId, '', { order: '4' });
+      parent.addNode(examples);
+    } catch (e) {
+      console.error(e);
+      console.warn('Could not patch menu ordering.');
     }
+    // Registering the same submenu multiple times has no side-effect.
+    // TODO: unregister submenu? https://github.com/eclipse-theia/theia/issues/7300
+    registry.registerSubmenu(
+      ArduinoMenus.FILE__EXAMPLES_SUBMENU,
+      nls.localize('arduino/examples/menu', 'Examples'),
+      {
+        order: '4',
+      }
+    );
+  }
 
-    protected handleBoardChanged(board: Board | undefined): void {
-        // NOOP
-    }
+  registerRecursively(
+    sketchContainerOrPlaceholder:
+      | SketchContainer
+      | (Sketch | SketchContainer)[]
+      | string,
+    menuPath: MenuPath,
+    pushToDispose: DisposableCollection = new DisposableCollection(),
+    subMenuOptions?: SubMenuOptions | undefined
+  ): void {
+    if (typeof sketchContainerOrPlaceholder === 'string') {
+      const placeholder = new PlaceholderMenuNode(
+        menuPath,
+        sketchContainerOrPlaceholder
+      );
+      this.menuRegistry.registerMenuNode(menuPath, placeholder);
+      pushToDispose.push(
+        Disposable.create(() =>
+          this.menuRegistry.unregisterMenuNode(placeholder.id)
+        )
+      );
+    } else {
+      const sketches: Sketch[] = [];
+      const children: SketchContainer[] = [];
+      let submenuPath = menuPath;
 
-    registerMenus(registry: MenuModelRegistry): void {
-        try {
-            // This is a hack the ensures the desired menu ordering! We cannot use https://github.com/eclipse-theia/theia/pull/8377 due to ATL-222.
-            const index = ArduinoMenus.FILE__EXAMPLES_SUBMENU.length - 1;
-            const menuId = ArduinoMenus.FILE__EXAMPLES_SUBMENU[index];
-            const groupPath = index === 0 ? [] : ArduinoMenus.FILE__EXAMPLES_SUBMENU.slice(0, index);
-            const parent: CompositeMenuNode = (registry as any).findGroup(groupPath);
-            const examples = new CompositeMenuNode(menuId, '', { order: '4' });
-            parent.addNode(examples);
-        } catch (e) {
-            console.error(e);
-            console.warn('Could not patch menu ordering.');
-        }
-        // Registering the same submenu multiple times has no side-effect.
-        // TODO: unregister submenu? https://github.com/eclipse-theia/theia/issues/7300
-        registry.registerSubmenu(ArduinoMenus.FILE__EXAMPLES_SUBMENU, 'Examples', { order: '4' });
-    }
-
-    registerRecursively(
-        exampleContainerOrPlaceholder: ExampleContainer | string,
-        menuPath: MenuPath,
-        pushToDispose: DisposableCollection = new DisposableCollection()): void {
-
-        if (typeof exampleContainerOrPlaceholder === 'string') {
-            const placeholder = new PlaceholderMenuNode(menuPath, exampleContainerOrPlaceholder);
-            this.menuRegistry.registerMenuNode(menuPath, placeholder);
-            pushToDispose.push(Disposable.create(() => this.menuRegistry.unregisterMenuNode(placeholder.id)));
-        } else {
-            const { label, sketches, children } = exampleContainerOrPlaceholder;
-            const submenuPath = [...menuPath, label];
-            this.menuRegistry.registerSubmenu(submenuPath, label);
-            children.forEach(child => this.registerRecursively(child, submenuPath, pushToDispose));
-            for (const sketch of sketches) {
-                const { uri } = sketch;
-                const commandId = `arduino-open-example-${submenuPath.join(':')}--${uri}`;
-                const command = { id: commandId };
-                const handler = {
-                    execute: async () => {
-                        const sketch = await this.sketchService.cloneExample(uri);
-                        this.commandService.executeCommand(OpenSketch.Commands.OPEN_SKETCH.id, sketch);
-                    }
-                };
-                pushToDispose.push(this.commandRegistry.registerCommand(command, handler));
-                this.menuRegistry.registerMenuAction(submenuPath, { commandId, label: sketch.name });
-                pushToDispose.push(Disposable.create(() => this.menuRegistry.unregisterMenuAction(command)));
-            }
+      if (SketchContainer.is(sketchContainerOrPlaceholder)) {
+        const { label } = sketchContainerOrPlaceholder;
+        submenuPath = [...menuPath, label];
+        this.menuRegistry.registerSubmenu(submenuPath, label, subMenuOptions);
+        sketches.push(...sketchContainerOrPlaceholder.sketches);
+        children.push(...sketchContainerOrPlaceholder.children);
+      } else {
+        for (const sketchOrContainer of sketchContainerOrPlaceholder) {
+          if (SketchContainer.is(sketchOrContainer)) {
+            children.push(sketchOrContainer);
+          } else {
+            sketches.push(sketchOrContainer);
+          }
         }
+      }
+      children.forEach((child) =>
+        this.registerRecursively(child, submenuPath, pushToDispose)
+      );
+      for (const sketch of sketches) {
+        const { uri } = sketch;
+        const commandId = `arduino-open-example-${submenuPath.join(
+          ':'
+        )}--${uri}`;
+        const command = { id: commandId };
+        const handler = this.createHandler(uri);
+        pushToDispose.push(
+          this.commandRegistry.registerCommand(command, handler)
+        );
+        this.menuRegistry.registerMenuAction(submenuPath, {
+          commandId,
+          label: sketch.name,
+          order: sketch.name.toLocaleLowerCase(),
+        });
+        pushToDispose.push(
+          Disposable.create(() =>
+            this.menuRegistry.unregisterMenuAction(command)
+          )
+        );
+      }
     }
+  }
 
+  protected createHandler(uri: string): CommandHandler {
+    return {
+      execute: async () => {
+        const sketch = await this.sketchService.cloneExample(uri);
+        return this.commandService.executeCommand(
+          OpenSketch.Commands.OPEN_SKETCH.id,
+          sketch
+        );
+      },
+    };
+  }
 }
 
 @injectable()
 export class BuiltInExamples extends Examples {
+  onStart(): void {
+    this.register(); // no `await`
+  }
 
-    onStart(): void {
-        this.register(); // no `await`
+  protected async register(): Promise<void> {
+    let sketchContainers: SketchContainer[] | undefined;
+    try {
+      sketchContainers = await this.examplesService.builtIns();
+    } 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;
     }
-
-    protected async register() {
-        let exampleContainers: ExampleContainer[] | undefined;
-        try {
-            exampleContainers = await this.examplesService.builtIns();
-        } catch (e) {
-            console.error('Could not initialize built-in examples.', e);
-            this.messageService.error('Could not initialize built-in examples.');
-            return;
-        }
-        this.toDispose.dispose();
-        for (const container of ['Built-in examples', ...exampleContainers]) {
-            this.registerRecursively(container, ArduinoMenus.EXAMPLES__BUILT_IN_GROUP, this.toDispose);
-        }
-        this.menuManager.update();
-        // TODO: remove
-        console.log(typeof this.menuRegistry);
+    this.toDispose.dispose();
+    for (const container of [
+      nls.localize('arduino/examples/builtInExamples', 'Built-in examples'),
+      ...sketchContainers,
+    ]) {
+      this.registerRecursively(
+        container,
+        ArduinoMenus.EXAMPLES__BUILT_IN_GROUP,
+        this.toDispose
+      );
     }
-
+    this.menuManager.update();
+  }
 }
 
 @injectable()
 export class LibraryExamples extends Examples {
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
 
-    @inject(NotificationCenter)
-    protected readonly notificationCenter: NotificationCenter;
+  protected readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
 
-    protected readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
+  onStart(): void {
+    this.register(); // no `await`
+    this.notificationCenter.onLibraryInstalled(() => this.register());
+    this.notificationCenter.onLibraryUninstalled(() => this.register());
+  }
 
-    onStart(): void {
-        this.register(); // no `await`
-        this.notificationCenter.onLibraryInstalled(() => this.register());
-        this.notificationCenter.onLibraryUninstalled(() => this.register());
-    }
-
-    protected handleBoardChanged(board: Board | undefined): void {
-        this.register(board);
-    }
-
-    protected async register(board: Board | undefined = this.boardsServiceClient.boardsConfig.selectedBoard) {
-        return this.queue.add(async () => {
-            this.toDispose.dispose();
-            if (!board || !board.fqbn) {
-                return;
-            }
-            const { fqbn, name } = board;
-            const { user, current, any } = await this.examplesService.installed({ fqbn });
-            if (user.length) {
-                (user as any).unshift('Examples from Custom Libraries');
-            }
-            if (current.length) {
-                (current as any).unshift(`Examples for ${name}`);
-            }
-            if (any.length) {
-                (any as any).unshift('Examples for any board');
-            }
-            for (const container of user) {
-                this.registerRecursively(container, ArduinoMenus.EXAMPLES__USER_LIBS_GROUP, this.toDispose);
-            }
-            for (const container of current) {
-                this.registerRecursively(container, ArduinoMenus.EXAMPLES__CURRENT_BOARD_GROUP, this.toDispose);
-            }
-            for (const container of any) {
-                this.registerRecursively(container, ArduinoMenus.EXAMPLES__ANY_BOARD_GROUP, this.toDispose);
-            }
-            this.menuManager.update();
-        });
-    }
+  protected handleBoardChanged(board: Board | undefined): void {
+    this.register(board);
+  }
 
+  protected async register(
+    board: Board | undefined = this.boardsServiceClient.boardsConfig
+      .selectedBoard
+  ): Promise<void> {
+    return this.queue.add(async () => {
+      this.toDispose.dispose();
+      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,
+      });
+      if (user.length) {
+        (user as any).unshift(
+          nls.localize(
+            'arduino/examples/customLibrary',
+            'Examples from Custom Libraries'
+          )
+        );
+      }
+      if (name && fqbn && current.length) {
+        (current as any).unshift(
+          nls.localize('arduino/examples/for', 'Examples for {0}', name)
+        );
+      }
+      if (any.length) {
+        (any as any).unshift(
+          nls.localize('arduino/examples/forAny', 'Examples for any board')
+        );
+      }
+      for (const container of user) {
+        this.registerRecursively(
+          container,
+          ArduinoMenus.EXAMPLES__USER_LIBS_GROUP,
+          this.toDispose
+        );
+      }
+      for (const container of current) {
+        this.registerRecursively(
+          container,
+          ArduinoMenus.EXAMPLES__CURRENT_BOARD_GROUP,
+          this.toDispose
+        );
+      }
+      for (const container of any) {
+        this.registerRecursively(
+          container,
+          ArduinoMenus.EXAMPLES__ANY_BOARD_GROUP,
+          this.toDispose
+        );
+      }
+      this.menuManager.update();
+    });
+  }
 }

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

@@ -3,135 +3,164 @@ 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 { Contribution, Command, MenuModelRegistry, CommandRegistry, KeybindingRegistry } from './contribution';
+import { QuickInputService } from '@theia/core/lib/browser/quick-input/quick-input-service';
+import {
+  Contribution,
+  Command,
+  MenuModelRegistry,
+  CommandRegistry,
+  KeybindingRegistry,
+} from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class Help extends Contribution {
+  @inject(EditorManager)
+  protected readonly editorManager: EditorManager;
 
-    @inject(EditorManager)
-    protected readonly editorManager: EditorManager;
+  @inject(WindowService)
+  protected readonly windowService: WindowService;
 
-    @inject(WindowService)
-    protected readonly windowService: WindowService;
+  @inject(QuickInputService)
+  protected readonly quickInputService: QuickInputService;
 
-    @inject(QuickInputService)
-    protected readonly quickInputService: QuickInputService;
+  registerCommands(registry: CommandRegistry): void {
+    const open = (url: string) =>
+      this.windowService.openNewWindow(url, { external: true });
+    const createOpenHandler = (url: string) =>
+      <CommandHandler>{
+        execute: () => open(url),
+      };
+    registry.registerCommand(
+      Help.Commands.GETTING_STARTED,
+      createOpenHandler('https://www.arduino.cc/en/Guide')
+    );
+    registry.registerCommand(
+      Help.Commands.ENVIRONMENT,
+      createOpenHandler('https://www.arduino.cc/en/Guide/Environment')
+    );
+    registry.registerCommand(
+      Help.Commands.TROUBLESHOOTING,
+      createOpenHandler('https://support.arduino.cc/hc/en-us')
+    );
+    registry.registerCommand(
+      Help.Commands.REFERENCE,
+      createOpenHandler('https://www.arduino.cc/reference/en/')
+    );
+    registry.registerCommand(Help.Commands.FIND_IN_REFERENCE, {
+      execute: async () => {
+        let searchFor: string | undefined = undefined;
+        const { currentEditor } = this.editorManager;
+        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)) {
+            searchFor = model.getValueInRange(selection);
+          }
+        }
+        if (!searchFor) {
+          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) {
+          return open(
+            `https://www.arduino.cc/search?q=${encodeURIComponent(
+              searchFor
+            )}&tab=reference`
+          );
+        }
+      },
+    });
+    registry.registerCommand(
+      Help.Commands.FAQ,
+      createOpenHandler('https://support.arduino.cc/hc/en-us')
+    );
+    registry.registerCommand(
+      Help.Commands.VISIT_ARDUINO,
+      createOpenHandler('https://www.arduino.cc/')
+    );
+  }
 
-    registerCommands(registry: CommandRegistry): void {
-        const open = (url: string) => this.windowService.openNewWindow(url, { external: true });
-        const createOpenHandler = (url: string) => <CommandHandler>{
-            execute: () => open(url)
-        };
-        registry.registerCommand(Help.Commands.GETTING_STARTED, createOpenHandler('https://www.arduino.cc/en/Guide'));
-        registry.registerCommand(Help.Commands.ENVIRONMENT, createOpenHandler('https://www.arduino.cc/en/Guide/Environment'));
-        registry.registerCommand(Help.Commands.TROUBLESHOOTING, createOpenHandler('https://support.arduino.cc/hc/en-us'));
-        registry.registerCommand(Help.Commands.REFERENCE, createOpenHandler('https://www.arduino.cc/reference/en/'));
-        registry.registerCommand(Help.Commands.FIND_IN_REFERENCE, {
-            execute: async () => {
-                let searchFor: string | undefined = undefined;
-                const { currentEditor } = this.editorManager;
-                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)) {
-                        searchFor = model.getValueInRange(selection);
-                    }
-                }
-                if (!searchFor) {
-                    searchFor = await this.quickInputService.open({
-                        prompt: 'Search on Arduino.cc',
-                        placeHolder: 'Type a keyword'
-                    });
-                }
-                if (searchFor) {
-                    return open(`https://www.arduino.cc/search?q=${encodeURIComponent(searchFor)}&tab=reference`);
-                }
-            }
-        });
-        registry.registerCommand(Help.Commands.FAQ, createOpenHandler('https://support.arduino.cc/hc/en-us'));
-        registry.registerCommand(Help.Commands.VISIT_ARDUINO, createOpenHandler('https://www.arduino.cc/'));
-    }
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
+      commandId: Help.Commands.GETTING_STARTED.id,
+      order: '0',
+    });
+    registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
+      commandId: Help.Commands.ENVIRONMENT.id,
+      order: '1',
+    });
+    registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
+      commandId: Help.Commands.TROUBLESHOOTING.id,
+      order: '2',
+    });
+    registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
+      commandId: Help.Commands.REFERENCE.id,
+      order: '3',
+    });
 
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
-            commandId: Help.Commands.GETTING_STARTED.id,
-            order: '0'
-        });
-        registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
-            commandId: Help.Commands.ENVIRONMENT.id,
-            order: '1'
-        });
-        registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
-            commandId: Help.Commands.TROUBLESHOOTING.id,
-            order: '2'
-        });
-        registry.registerMenuAction(ArduinoMenus.HELP__MAIN_GROUP, {
-            commandId: Help.Commands.REFERENCE.id,
-            order: '3'
-        });
-
-        registry.registerMenuAction(ArduinoMenus.HELP__FIND_GROUP, {
-            commandId: Help.Commands.FIND_IN_REFERENCE.id,
-            order: '4'
-        });
-        registry.registerMenuAction(ArduinoMenus.HELP__FIND_GROUP, {
-            commandId: Help.Commands.FAQ.id,
-            order: '5'
-        });
-        registry.registerMenuAction(ArduinoMenus.HELP__FIND_GROUP, {
-            commandId: Help.Commands.VISIT_ARDUINO.id,
-            order: '6'
-        });
-    }
-
-    registerKeybindings(registry: KeybindingRegistry): void {
-        registry.registerKeybinding({
-            command: Help.Commands.FIND_IN_REFERENCE.id,
-            keybinding: 'CtrlCmd+Shift+F'
-        });
-    }
+    registry.registerMenuAction(ArduinoMenus.HELP__FIND_GROUP, {
+      commandId: Help.Commands.FIND_IN_REFERENCE.id,
+      order: '4',
+    });
+    registry.registerMenuAction(ArduinoMenus.HELP__FIND_GROUP, {
+      commandId: Help.Commands.FAQ.id,
+      order: '5',
+    });
+    registry.registerMenuAction(ArduinoMenus.HELP__FIND_GROUP, {
+      commandId: Help.Commands.VISIT_ARDUINO.id,
+      order: '6',
+    });
+  }
 
+  registerKeybindings(registry: KeybindingRegistry): void {
+    registry.registerKeybinding({
+      command: Help.Commands.FIND_IN_REFERENCE.id,
+      keybinding: 'CtrlCmd+Shift+F',
+    });
+  }
 }
 
 export namespace Help {
-    export namespace Commands {
-        export const GETTING_STARTED: Command = {
-            id: 'arduino-getting-started',
-            label: 'Getting Started',
-            category: 'Arduino'
-        };
-        export const ENVIRONMENT: Command = {
-            id: 'arduino-environment',
-            label: 'Environment',
-            category: 'Arduino'
-        };
-        export const TROUBLESHOOTING: Command = {
-            id: 'arduino-troubleshooting',
-            label: 'Troubleshooting',
-            category: 'Arduino'
-        };
-        export const REFERENCE: Command = {
-            id: 'arduino-reference',
-            label: 'Reference',
-            category: 'Arduino'
-        };
-        export const FIND_IN_REFERENCE: Command = {
-            id: 'arduino-find-in-reference',
-            label: 'Find in Reference',
-            category: 'Arduino'
-        };
-        export const FAQ: Command = {
-            id: 'arduino-faq',
-            label: 'Frequently Asked Questions',
-            category: 'Arduino'
-        };
-        export const VISIT_ARDUINO: Command = {
-            id: 'arduino-visit-arduino',
-            label: 'Visit Arduino.cc',
-            category: 'Arduino'
-        };
-    }
+  export namespace Commands {
+    export const GETTING_STARTED: Command = {
+      id: 'arduino-getting-started',
+      label: nls.localize('arduino/help/gettingStarted', 'Getting Started'),
+      category: 'Arduino',
+    };
+    export const ENVIRONMENT: Command = {
+      id: 'arduino-environment',
+      label: nls.localize('arduino/help/environment', 'Environment'),
+      category: 'Arduino',
+    };
+    export const TROUBLESHOOTING: Command = {
+      id: 'arduino-troubleshooting',
+      label: nls.localize('arduino/help/troubleshooting', 'Troubleshooting'),
+      category: 'Arduino',
+    };
+    export const REFERENCE: Command = {
+      id: 'arduino-reference',
+      label: nls.localize('arduino/help/reference', 'Reference'),
+      category: 'Arduino',
+    };
+    export const FIND_IN_REFERENCE: Command = {
+      id: 'arduino-find-in-reference',
+      label: nls.localize('arduino/help/findInReference', 'Find in Reference'),
+      category: 'Arduino',
+    };
+    export const FAQ: Command = {
+      id: 'arduino-faq',
+      label: nls.localize('arduino/help/faq', 'Frequently Asked Questions'),
+      category: 'Arduino',
+    };
+    export const VISIT_ARDUINO: Command = {
+      id: 'arduino-visit-arduino',
+      label: nls.localize('arduino/help/visit', 'Visit Arduino.cc'),
+      category: 'Arduino',
+    };
+  }
 }

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

@@ -4,7 +4,10 @@ import URI from '@theia/core/lib/common/uri';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { EditorManager } from '@theia/editor/lib/browser';
 import { MenuModelRegistry, MenuPath } from '@theia/core/lib/common/menu';
-import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
 import { ArduinoMenus, PlaceholderMenuNode } from '../menu/arduino-menus';
 import { LibraryPackage, LibraryService } from '../../common/protocol';
 import { MainMenuManager } from '../../common/main-menu-manager';
@@ -12,166 +15,216 @@ 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 {
+  @inject(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
 
-    @inject(CommandRegistry)
-    protected readonly commandRegistry: CommandRegistry;
+  @inject(MenuModelRegistry)
+  protected readonly menuRegistry: MenuModelRegistry;
 
-    @inject(MenuModelRegistry)
-    protected readonly menuRegistry: MenuModelRegistry;
+  @inject(MainMenuManager)
+  protected readonly mainMenuManager: MainMenuManager;
 
-    @inject(MainMenuManager)
-    protected readonly mainMenuManager: MainMenuManager;
+  @inject(EditorManager)
+  protected readonly editorManager: EditorManager;
 
-    @inject(EditorManager)
-    protected readonly editorManager: EditorManager;
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
 
-    @inject(NotificationCenter)
-    protected readonly notificationCenter: NotificationCenter;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClient: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClient: BoardsServiceProvider;
+  @inject(LibraryService)
+  protected readonly libraryService: LibraryService;
 
-    @inject(LibraryService)
-    protected readonly libraryService: LibraryService;
+  protected readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
+  protected readonly toDispose = new DisposableCollection();
 
-    protected readonly queue = new PQueue({ autoStart: true, concurrency: 1 });
-    protected readonly toDispose = new DisposableCollection();
+  onStart(): void {
+    this.updateMenuActions();
+    this.boardsServiceClient.onBoardsConfigChanged(() =>
+      this.updateMenuActions()
+    );
+    this.notificationCenter.onLibraryInstalled(() => this.updateMenuActions());
+    this.notificationCenter.onLibraryUninstalled(() =>
+      this.updateMenuActions()
+    );
+  }
 
-    onStart(): void {
-        this.updateMenuActions();
-        this.boardsServiceClient.onBoardsConfigChanged(() => this.updateMenuActions())
-        this.notificationCenter.onLibraryInstalled(() => this.updateMenuActions());
-        this.notificationCenter.onLibraryUninstalled(() => this.updateMenuActions());
-    }
+  registerMenus(registry: MenuModelRegistry): void {
+    // `Include Library` submenu
+    const includeLibMenuPath = [
+      ...ArduinoMenus.SKETCH__UTILS_GROUP,
+      '0_include',
+    ];
+    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: nls.localize(
+        'arduino/library/manageLibraries',
+        'Manage Libraries...'
+      ),
+    });
+  }
 
-    registerMenus(registry: MenuModelRegistry): void {
-        // `Include Library` submenu
-        const includeLibMenuPath = [...ArduinoMenus.SKETCH__UTILS_GROUP, '0_include'];
-        registry.registerSubmenu(includeLibMenuPath, 'Include Library', { order: '1' });
-        // `Manage Libraries...` group.
-        registry.registerMenuAction([...includeLibMenuPath, '0_manage'], {
-            commandId: `${LibraryListWidget.WIDGET_ID}:toggle`,
-            label: 'Manage Libraries...'
-        });
-    }
-
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(IncludeLibrary.Commands.INCLUDE_LIBRARY, {
-            execute: async arg => {
-                if (LibraryPackage.is(arg)) {
-                    this.includeLibrary(arg);
-                }
-            }
-        });
-    }
-
-    protected async updateMenuActions(): Promise<void> {
-        return this.queue.add(async () => {
-            this.toDispose.dispose();
-            this.mainMenuManager.update();
-            const libraries: LibraryPackage[] = []
-            const fqbn = this.boardsServiceClient.boardsConfig.selectedBoard?.fqbn;
-            // Do not show board specific examples, when no board is selected.
-            if (fqbn) {
-                libraries.push(...await this.libraryService.list({ fqbn }));
-            }
-
-            const includeLibMenuPath = [...ArduinoMenus.SKETCH__UTILS_GROUP, '0_include'];
-            // `Add .ZIP Library...`
-            // TODO: implement it
-
-            // `Arduino libraries`
-            const packageMenuPath = [...includeLibMenuPath, '2_arduino'];
-            const userMenuPath = [...includeLibMenuPath, '3_contributed'];
-            const { user, rest } = LibraryPackage.groupByLocation(libraries);
-            if (rest.length) {
-                (rest as any).unshift('Arduino libraries');
-            }
-            if (user.length) {
-                (user as any).unshift('Contributed libraries');
-            }
-
-            for (const library of user) {
-                this.toDispose.push(this.registerLibrary(library, userMenuPath));
-            }
-            for (const library of rest) {
-                this.toDispose.push(this.registerLibrary(library, packageMenuPath));
-            }
-
-            this.mainMenuManager.update();
-        });
-    }
-
-    protected registerLibrary(libraryOrPlaceholder: LibraryPackage | string, menuPath: MenuPath): Disposable {
-        if (typeof libraryOrPlaceholder === 'string') {
-            const placeholder = new PlaceholderMenuNode(menuPath, libraryOrPlaceholder);
-            this.menuRegistry.registerMenuNode(menuPath, placeholder);
-            return Disposable.create(() => this.menuRegistry.unregisterMenuNode(placeholder.id));
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(IncludeLibrary.Commands.INCLUDE_LIBRARY, {
+      execute: async (arg) => {
+        if (LibraryPackage.is(arg)) {
+          this.includeLibrary(arg);
         }
-        const commandId = `arduino-include-library--${libraryOrPlaceholder.name}:${libraryOrPlaceholder.author}`;
-        const command = { id: commandId };
-        const handler = { execute: () => this.commandRegistry.executeCommand(IncludeLibrary.Commands.INCLUDE_LIBRARY.id, libraryOrPlaceholder) };
-        const menuAction = { commandId, label: libraryOrPlaceholder.name };
-        this.menuRegistry.registerMenuAction(menuPath, menuAction);
-        return new DisposableCollection(
-            this.commandRegistry.registerCommand(command, handler),
-            Disposable.create(() => this.menuRegistry.unregisterMenuAction(menuAction)),
+      },
+    });
+  }
+
+  protected async updateMenuActions(): Promise<void> {
+    return this.queue.add(async () => {
+      this.toDispose.dispose();
+      this.mainMenuManager.update();
+      const libraries: LibraryPackage[] = [];
+      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 })));
+
+      const includeLibMenuPath = [
+        ...ArduinoMenus.SKETCH__UTILS_GROUP,
+        '0_include',
+      ];
+      // `Add .ZIP Library...`
+      // TODO: implement it
+
+      // `Arduino libraries`
+      const packageMenuPath = [...includeLibMenuPath, '2_arduino'];
+      const userMenuPath = [...includeLibMenuPath, '3_contributed'];
+      const { user, rest } = LibraryPackage.groupByLocation(libraries);
+      if (rest.length) {
+        (rest as any).unshift(
+          nls.localize('arduino/library/arduinoLibraries', 'Arduino libraries')
         );
+      }
+      if (user.length) {
+        (user as any).unshift(
+          nls.localize(
+            'arduino/library/contributedLibraries',
+            'Contributed libraries'
+          )
+        );
+      }
+
+      for (const library of user) {
+        this.toDispose.push(this.registerLibrary(library, userMenuPath));
+      }
+      for (const library of rest) {
+        this.toDispose.push(this.registerLibrary(library, packageMenuPath));
+      }
+
+      this.mainMenuManager.update();
+    });
+  }
+
+  protected registerLibrary(
+    libraryOrPlaceholder: LibraryPackage | string,
+    menuPath: MenuPath
+  ): Disposable {
+    if (typeof libraryOrPlaceholder === 'string') {
+      const placeholder = new PlaceholderMenuNode(
+        menuPath,
+        libraryOrPlaceholder
+      );
+      this.menuRegistry.registerMenuNode(menuPath, placeholder);
+      return Disposable.create(() =>
+        this.menuRegistry.unregisterMenuNode(placeholder.id)
+      );
+    }
+    const commandId = `arduino-include-library--${libraryOrPlaceholder.name}:${libraryOrPlaceholder.author}`;
+    const command = { id: commandId };
+    const handler = {
+      execute: () =>
+        this.commandRegistry.executeCommand(
+          IncludeLibrary.Commands.INCLUDE_LIBRARY.id,
+          libraryOrPlaceholder
+        ),
+    };
+    const menuAction = { commandId, label: libraryOrPlaceholder.name };
+    this.menuRegistry.registerMenuAction(menuPath, menuAction);
+    return new DisposableCollection(
+      this.commandRegistry.registerCommand(command, handler),
+      Disposable.create(() =>
+        this.menuRegistry.unregisterMenuAction(menuAction)
+      )
+    );
+  }
+
+  protected async includeLibrary(library: LibraryPackage): Promise<void> {
+    const sketch = await this.sketchServiceClient.currentSketch();
+    if (!sketch) {
+      return;
+    }
+    // If the current editor is one of the additional files from the sketch, we use that.
+    // Otherwise, we pick the editor of the main sketch file.
+    let codeEditor: monaco.editor.IStandaloneCodeEditor | undefined;
+    const editor = this.editorManager.currentEditor?.editor;
+    if (editor instanceof MonacoEditor) {
+      if (
+        sketch.additionalFileUris.some((uri) => uri === editor.uri.toString())
+      ) {
+        codeEditor = editor.getControl();
+      }
     }
 
-    protected async includeLibrary(library: LibraryPackage): Promise<void> {
-        const sketch = await this.sketchServiceClient.currentSketch();
-        if (!sketch) {
-            return;
-        }
-        // If the current editor is one of the additional files from the sketch, we use that.
-        // Otherwise, we pick the editor of the main sketch file.
-        let codeEditor: monaco.editor.IStandaloneCodeEditor | undefined;
-        const editor = this.editorManager.currentEditor?.editor;
-        if (editor instanceof MonacoEditor) {
-            if (sketch.additionalFileUris.some(uri => uri === editor.uri.toString())) {
-                codeEditor = editor.getControl();
-            }
-        }
-
-        if (!codeEditor) {
-            const widget = await this.editorManager.open(new URI(sketch.mainFileUri));
-            if (widget.editor instanceof MonacoEditor) {
-                codeEditor = widget.editor.getControl();
-            }
-        }
-
-        if (!codeEditor) {
-            return;
-        }
-
-        const textModel = codeEditor.getModel();
-        if (!textModel) {
-            return;
-        }
-        const cursorState = codeEditor.getSelections() || [];
-        const eol = textModel.getEOL();
-        const includes = library.includes.slice();
-        includes.push(''); // For the trailing new line.
-        const text = includes.map(include => include ? `#include <${include}>` : eol).join(eol);
-        textModel.pushStackElement(); // Start a fresh operation.
-        textModel.pushEditOperations(cursorState, [{
-            range: new monaco.Range(1, 1, 1, 1),
-            text,
-            forceMoveMarkers: true
-        }], () => cursorState);
-        textModel.pushStackElement(); // Make it undoable.
+    if (!codeEditor) {
+      const widget = await this.editorManager.open(new URI(sketch.mainFileUri));
+      if (widget.editor instanceof MonacoEditor) {
+        codeEditor = widget.editor.getControl();
+      }
     }
 
+    if (!codeEditor) {
+      return;
+    }
+
+    const textModel = codeEditor.getModel();
+    if (!textModel) {
+      return;
+    }
+    const cursorState = codeEditor.getSelections() || [];
+    const eol = textModel.getEOL();
+    const includes = library.includes.slice();
+    includes.push(''); // For the trailing new line.
+    const text = includes
+      .map((include) => (include ? `#include <${include}>` : eol))
+      .join(eol);
+    textModel.pushStackElement(); // Start a fresh operation.
+    textModel.pushEditOperations(
+      cursorState,
+      [
+        {
+          range: new monaco.Range(1, 1, 1, 1),
+          text,
+          forceMoveMarkers: true,
+        },
+      ],
+      () => cursorState
+    );
+    textModel.pushStackElement(); // Make it undoable.
+  }
 }
 
 export namespace IncludeLibrary {
-    export namespace Commands {
-        export const INCLUDE_LIBRARY: Command = {
-            id: 'arduino-include-library'
-        };
-    }
+  export namespace Commands {
+    export const INCLUDE_LIBRARY: Command = {
+      id: 'arduino-include-library',
+    };
+  }
 }

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

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

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

@@ -1,62 +1,95 @@
 import { inject, injectable } from 'inversify';
 import { WorkspaceServer } from '@theia/workspace/lib/common/workspace-protocol';
-import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
-import { SketchContribution, CommandRegistry, MenuModelRegistry, Sketch } from './contribution';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
+import {
+  SketchContribution,
+  CommandRegistry,
+  MenuModelRegistry,
+  Sketch,
+} from './contribution';
 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 {
+  @inject(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
 
-    @inject(CommandRegistry)
-    protected readonly commandRegistry: CommandRegistry;
+  @inject(MenuModelRegistry)
+  protected readonly menuRegistry: MenuModelRegistry;
 
-    @inject(MenuModelRegistry)
-    protected readonly menuRegistry: MenuModelRegistry;
+  @inject(MainMenuManager)
+  protected readonly mainMenuManager: MainMenuManager;
 
-    @inject(MainMenuManager)
-    protected readonly mainMenuManager: MainMenuManager;
+  @inject(WorkspaceServer)
+  protected readonly workspaceServer: WorkspaceServer;
 
-    @inject(WorkspaceServer)
-    protected readonly workspaceServer: WorkspaceServer;
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
 
-    @inject(NotificationCenter)
-    protected readonly notificationCenter: NotificationCenter;
+  protected toDisposeBeforeRegister = new Map<string, DisposableCollection>();
 
-    protected toDisposeBeforeRegister = new Map<string, DisposableCollection>();
+  onStart(): void {
+    const refreshMenu = (sketches: Sketch[]) => {
+      this.register(sketches);
+      this.mainMenuManager.update();
+    };
+    this.notificationCenter.onRecentSketchesChanged(({ sketches }) =>
+      refreshMenu(sketches)
+    );
+    this.sketchService.recentlyOpenedSketches().then(refreshMenu);
+  }
 
-    onStart(): void {
-        const refreshMenu = (sketches: Sketch[]) => {
-            this.register(sketches);
-            this.mainMenuManager.update();
-        };
-        this.notificationCenter.onRecentSketchesChanged(({ sketches }) => refreshMenu(sketches));
-        this.sketchService.recentlyOpenedSketches().then(refreshMenu);
-    }
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerSubmenu(
+      ArduinoMenus.FILE__OPEN_RECENT_SUBMENU,
+      nls.localize('arduino/sketch/openRecent', 'Open Recent'),
+      { order: '2' }
+    );
+  }
 
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerSubmenu(ArduinoMenus.FILE__OPEN_RECENT_SUBMENU, 'Open Recent', { order: '2' });
-    }
-
-    protected register(sketches: Sketch[]): void {
-        let order = 0;
-        for (const sketch of sketches) {
-            const { uri } = sketch;
-            const toDispose = this.toDisposeBeforeRegister.get(uri);
-            if (toDispose) {
-                toDispose.dispose();
-            }
-            const command = { id: `arduino-open-recent--${uri}` };
-            const handler = { execute: () => this.commandRegistry.executeCommand(OpenSketch.Commands.OPEN_SKETCH.id, sketch) };
-            this.commandRegistry.registerCommand(command, handler);
-            this.menuRegistry.registerMenuAction(ArduinoMenus.FILE__OPEN_RECENT_SUBMENU, { commandId: command.id, label: sketch.name, order: String(order) });
-            this.toDisposeBeforeRegister.set(sketch.uri, new DisposableCollection(
-                Disposable.create(() => this.commandRegistry.unregisterCommand(command)),
-                Disposable.create(() => this.menuRegistry.unregisterMenuAction(command))
-            ));
+  protected register(sketches: Sketch[]): void {
+    const order = 0;
+    for (const sketch of sketches) {
+      const { uri } = sketch;
+      const toDispose = this.toDisposeBeforeRegister.get(uri);
+      if (toDispose) {
+        toDispose.dispose();
+      }
+      const command = { id: `arduino-open-recent--${uri}` };
+      const handler = {
+        execute: () =>
+          this.commandRegistry.executeCommand(
+            OpenSketch.Commands.OPEN_SKETCH.id,
+            sketch
+          ),
+      };
+      this.commandRegistry.registerCommand(command, handler);
+      this.menuRegistry.registerMenuAction(
+        ArduinoMenus.FILE__OPEN_RECENT_SUBMENU,
+        {
+          commandId: command.id,
+          label: sketch.name,
+          order: String(order),
         }
+      );
+      this.toDisposeBeforeRegister.set(
+        sketch.uri,
+        new DisposableCollection(
+          Disposable.create(() =>
+            this.commandRegistry.unregisterCommand(command)
+          ),
+          Disposable.create(() =>
+            this.menuRegistry.unregisterMenuAction(command)
+          )
+        )
+      );
     }
-
+  }
 }

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

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

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

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

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

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

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

@@ -2,95 +2,131 @@ import { injectable } from 'inversify';
 import { remote } from 'electron';
 import * as dateFormat from 'dateformat';
 import { ArduinoMenus } from '../menu/arduino-menus';
-import { SketchContribution, URI, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry } from './contribution';
+import {
+  SketchContribution,
+  URI,
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+  KeybindingRegistry,
+} from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class SaveAsSketch extends SketchContribution {
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(SaveAsSketch.Commands.SAVE_AS_SKETCH, {
+      execute: (args) => this.saveAs(args),
+    });
+  }
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(SaveAsSketch.Commands.SAVE_AS_SKETCH, {
-            execute: args => this.saveAs(args)
-        });
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
+      commandId: SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
+      label: nls.localize('vscode/fileCommands/saveAs', 'Save As...'),
+      order: '7',
+    });
+  }
+
+  registerKeybindings(registry: KeybindingRegistry): void {
+    registry.registerKeybinding({
+      command: SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
+      keybinding: 'CtrlCmd+Shift+S',
+    });
+  }
+
+  /**
+   * Resolves `true` if the sketch was successfully saved as something.
+   */
+  async saveAs(
+    {
+      execOnlyIfTemp,
+      openAfterMove,
+      wipeOriginal,
+    }: SaveAsSketch.Options = SaveAsSketch.Options.DEFAULT
+  ): Promise<boolean> {
+    const sketch = await this.sketchServiceClient.currentSketch();
+    if (!sketch) {
+      return false;
     }
 
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.FILE__SKETCH_GROUP, {
-            commandId: SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
-            label: 'Save As...',
-            order: '7'
-        });
+    const isTemp = await this.sketchService.isTemp(sketch);
+    if (!isTemp && !!execOnlyIfTemp) {
+      return false;
     }
 
-    registerKeybindings(registry: KeybindingRegistry): void {
-        registry.registerKeybinding({
-            command: SaveAsSketch.Commands.SAVE_AS_SKETCH.id,
-            keybinding: 'CtrlCmd+Shift+S'
-        });
+    // If target does not exist, propose a `directories.user`/${sketch.name} path
+    // If target exists, propose `directories.user`/${sketch.name}_copy_${yyyymmddHHMMss}
+    const sketchDirUri = new URI(
+      (await this.configService.getConfiguration()).sketchDirUri
+    );
+    const exists = await this.fileService.exists(
+      sketchDirUri.resolve(sketch.name)
+    );
+    const defaultUri = exists
+      ? sketchDirUri.resolve(
+          sketchDirUri
+            .resolve(
+              `${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: nls.localize(
+        'arduino/sketch/saveFolderAs',
+        'Save sketch folder as...'
+      ),
+      defaultPath,
+    });
+    if (!filePath || canceled) {
+      return false;
     }
-
-    /**
-     * Resolves `true` if the sketch was successfully saved as something.
-     */
-    async saveAs({ execOnlyIfTemp, openAfterMove, wipeOriginal }: SaveAsSketch.Options = SaveAsSketch.Options.DEFAULT): Promise<boolean> {
-        const sketch = await this.sketchServiceClient.currentSketch();
-        if (!sketch) {
-            return false;
-        }
-
-        const isTemp = await this.sketchService.isTemp(sketch);
-        if (!isTemp && !!execOnlyIfTemp) {
-            return false;
-        }
-
-        // If target does not exist, propose a `directories.user`/${sketch.name} path
-        // If target exists, propose `directories.user`/${sketch.name}_copy_${yyyymmddHHMMss}
-        const sketchDirUri = new URI((await this.configService.getConfiguration()).sketchDirUri);
-        const exists = await this.fileService.exists(sketchDirUri.resolve(sketch.name));
-        const defaultUri = exists
-            ? sketchDirUri.resolve(sketchDirUri.resolve(`${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...', defaultPath });
-        if (!filePath || canceled) {
-            return false;
-        }
-        const destinationUri = await this.fileSystemExt.getUri(filePath);
-        if (!destinationUri) {
-            return false;
-        }
-        const workspaceUri = await this.sketchService.copy(sketch, { destinationUri });
-        if (workspaceUri && openAfterMove) {
-            if (wipeOriginal || (openAfterMove && execOnlyIfTemp)) {
-                try {
-                    await this.fileService.delete(new URI(sketch.uri), { recursive: true });
-                } catch { /* NOOP: from time to time, it's not possible to wipe the old resource from the temp dir on Windows */ }
-            }
-            this.workspaceService.open(new URI(workspaceUri), { preserveWindow: true });
-        }
-        return !!workspaceUri;
+    const destinationUri = await this.fileSystemExt.getUri(filePath);
+    if (!destinationUri) {
+      return false;
     }
-
+    const workspaceUri = await this.sketchService.copy(sketch, {
+      destinationUri,
+    });
+    if (workspaceUri && openAfterMove) {
+      if (wipeOriginal || (openAfterMove && execOnlyIfTemp)) {
+        try {
+          await this.fileService.delete(new URI(sketch.uri), {
+            recursive: true,
+          });
+        } catch {
+          /* NOOP: from time to time, it's not possible to wipe the old resource from the temp dir on Windows */
+        }
+      }
+      this.workspaceService.open(new URI(workspaceUri), {
+        preserveWindow: true,
+      });
+    }
+    return !!workspaceUri;
+  }
 }
 
 export namespace SaveAsSketch {
-    export namespace Commands {
-        export const SAVE_AS_SKETCH: Command = {
-            id: 'arduino-save-as-sketch'
-        };
-    }
-    export interface Options {
-        readonly execOnlyIfTemp?: boolean;
-        readonly openAfterMove?: boolean;
-        /**
-         * Ignored if `openAfterMove` is `false`.
-         */
-        readonly wipeOriginal?: boolean;
-    }
-    export namespace Options {
-        export const DEFAULT: Options = {
-            execOnlyIfTemp: false,
-            openAfterMove: true,
-            wipeOriginal: false
-        };
-    }
+  export namespace Commands {
+    export const SAVE_AS_SKETCH: Command = {
+      id: 'arduino-save-as-sketch',
+    };
+  }
+  export interface Options {
+    readonly execOnlyIfTemp?: boolean;
+    readonly openAfterMove?: boolean;
+    /**
+     * Ignored if `openAfterMove` is `false`.
+     */
+    readonly wipeOriginal?: boolean;
+  }
+  export namespace Options {
+    export const DEFAULT: Options = {
+      execOnlyIfTemp: false,
+      openAfterMove: true,
+      wipeOriginal: false,
+    };
+  }
 }

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

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

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

@@ -1,60 +1,75 @@
 import { inject, injectable } from 'inversify';
-import { Command, MenuModelRegistry, CommandRegistry, SketchContribution, KeybindingRegistry } from './contribution';
+import {
+  Command,
+  MenuModelRegistry,
+  CommandRegistry,
+  SketchContribution,
+  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 {
+  @inject(SettingsDialog)
+  protected readonly settingsDialog: SettingsDialog;
 
-    @inject(SettingsDialog)
-    protected readonly settingsDialog: SettingsDialog;
+  protected settingsOpened = false;
 
-    protected settingsOpened = false;
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(Settings.Commands.OPEN, {
+      execute: async () => {
+        let settings: Preferences | undefined = undefined;
+        try {
+          this.settingsOpened = true;
+          settings = await this.settingsDialog.open();
+        } finally {
+          this.settingsOpened = false;
+        }
+        if (settings) {
+          await this.settingsService.update(settings);
+          await this.settingsService.save();
+        } else {
+          await this.settingsService.reset();
+        }
+      },
+      isEnabled: () => !this.settingsOpened,
+    });
+  }
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(Settings.Commands.OPEN, {
-            execute: async () => {
-                let settings: Preferences | undefined = undefined;
-                try {
-                    this.settingsOpened = true;
-                    settings = await this.settingsDialog.open();
-                } finally {
-                    this.settingsOpened = false;
-                }
-                if (settings) {
-                    await this.settingsService.update(settings);
-                    await this.settingsService.save();
-                } else {
-                    await this.settingsService.reset();
-                }
-            },
-            isEnabled: () => !this.settingsOpened
-        });
-    }
-
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.FILE__SETTINGS_GROUP, {
-            commandId: Settings.Commands.OPEN.id,
-            label: 'Preferences...',
-            order: '0'
-        });
-    }
-
-    registerKeybindings(registry: KeybindingRegistry): void {
-        registry.registerKeybinding({
-            command: Settings.Commands.OPEN.id,
-            keybinding: 'CtrlCmd+,',
-        });
-    }
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.FILE__PREFERENCES_GROUP, {
+      commandId: Settings.Commands.OPEN.id,
+      label:
+        nls.localize(
+          'vscode/preferences.contribution/preferences',
+          'Preferences'
+        ) + '...',
+      order: '0',
+    });
+    registry.registerSubmenu(ArduinoMenus.FILE__ADVANCED_SUBMENU, 'Advanced');
+  }
 
+  registerKeybindings(registry: KeybindingRegistry): void {
+    registry.registerKeybinding({
+      command: Settings.Commands.OPEN.id,
+      keybinding: 'CtrlCmd+,',
+    });
+  }
 }
 
 export namespace Settings {
-    export namespace Commands {
-        export const OPEN: Command = {
-            id: 'arduino-settings-open',
-            label: 'Open Preferences...',
-            category: 'Arduino'
-        }
-    }
+  export namespace Commands {
+    export const OPEN: Command = {
+      id: 'arduino-settings-open',
+      label:
+        nls.localize(
+          'vscode/preferences.contribution/openSettings2',
+          'Open Preferences'
+        ) + '...',
+      category: 'Arduino',
+    };
+  }
 }

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

@@ -3,127 +3,280 @@ import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribu
 import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
 import { WorkspaceCommands } from '@theia/workspace/lib/browser';
 import { ContextMenuRenderer } from '@theia/core/lib/browser/context-menu-renderer';
-import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
-import { URI, SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry, open } from './contribution';
-import { ArduinoMenus } from '../menu/arduino-menus';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
+import {
+  URI,
+  SketchContribution,
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+  KeybindingRegistry,
+  TabBarToolbarRegistry,
+  open,
+} from './contribution';
+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 {
+  @inject(ApplicationShell)
+  protected readonly shell: ApplicationShell;
 
-    @inject(ApplicationShell)
-    protected readonly shell: ApplicationShell;
+  @inject(MenuModelRegistry)
+  protected readonly menuRegistry: MenuModelRegistry;
 
-    @inject(MenuModelRegistry)
-    protected readonly menuRegistry: MenuModelRegistry;
+  @inject(ContextMenuRenderer)
+  protected readonly contextMenuRenderer: ContextMenuRenderer;
 
-    @inject(ContextMenuRenderer)
-    protected readonly contextMenuRenderer: ContextMenuRenderer;
+  @inject(EditorManager)
+  protected readonly editorManager: EditorManager;
 
-    protected readonly toDisposeBeforeCreateNewContextMenu = new DisposableCollection();
+  @inject(SketchesServiceClientImpl)
+  protected readonly sketchesServiceClient: SketchesServiceClientImpl;
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR, {
-            isVisible: widget => this.shell.getWidgets('main').indexOf(widget) !== -1,
-            execute: async () => {
-                this.toDisposeBeforeCreateNewContextMenu.dispose();
-                const sketch = await this.sketchServiceClient.currentSketch();
-                if (!sketch) {
-                    return;
-                }
+  @inject(LocalCacheFsProvider)
+  protected readonly localCacheFsProvider: LocalCacheFsProvider;
 
-                const target = document.getElementById(SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id);
-                if (!(target instanceof HTMLElement)) {
-                    return;
-                }
-                const { parentElement } = target;
-                if (!parentElement) {
-                    return;
-                }
+  protected readonly toDisposeBeforeCreateNewContextMenu =
+    new DisposableCollection();
 
-                const { mainFileUri, rootFolderFileUris } = await this.sketchService.loadSketch(sketch.uri);
-                const uris = [mainFileUri, ...rootFolderFileUris];
-                for (let i = 0; i < uris.length; i++) {
-                    const uri = new URI(uris[i]);
-                    const command = { id: `arduino-focus-file--${uri.toString()}` };
-                    const handler = { execute: () => open(this.openerService, uri) };
-                    this.toDisposeBeforeCreateNewContextMenu.push(registry.registerCommand(command, handler));
-                    this.menuRegistry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__RESOURCES_GROUP, {
-                        commandId: command.id,
-                        label: this.labelProvider.getName(uri),
-                        order: `${i}`
-                    });
-                    this.toDisposeBeforeCreateNewContextMenu.push(Disposable.create(() => this.menuRegistry.unregisterMenuAction(command)));
-                }
-                const options = {
-                    menuPath: ArduinoMenus.SKETCH_CONTROL__CONTEXT,
-                    anchor: {
-                        x: parentElement.getBoundingClientRect().left,
-                        y: parentElement.getBoundingClientRect().top + parentElement.offsetHeight
-                    }
-                }
-                this.contextMenuRenderer.render(options);
-            }
-        });
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(
+      SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR,
+      {
+        isVisible: (widget) =>
+          this.shell.getWidgets('main').indexOf(widget) !== -1,
+        execute: async () => {
+          this.toDisposeBeforeCreateNewContextMenu.dispose();
+          const sketch = await this.sketchServiceClient.currentSketch();
+          if (!sketch) {
+            return;
+          }
+
+          const target = document.getElementById(
+            SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id
+          );
+          if (!(target instanceof HTMLElement)) {
+            return;
+          }
+          const { parentElement } = target;
+          if (!parentElement) {
+            return;
+          }
+
+          const { mainFileUri, rootFolderFileUris } =
+            await this.sketchService.loadSketch(sketch.uri);
+          const uris = [mainFileUri, ...rootFolderFileUris];
+
+          const currentSketch =
+            await this.sketchesServiceClient.currentSketch();
+          const parentsketchUri = this.editorManager.currentEditor
+            ?.getResourceUri()
+            ?.toString();
+          const parentsketch = await this.sketchService.getSketchFolder(
+            parentsketchUri || ''
+          );
+
+          // if the current file is in the current opened sketch, show extra menus
+          if (
+            currentSketch &&
+            parentsketch &&
+            parentsketch.uri === currentSketch.uri &&
+            this.allowRename(parentsketch.uri)
+          ) {
+            this.menuRegistry.registerMenuAction(
+              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
+              {
+                commandId: WorkspaceCommands.FILE_RENAME.id,
+                label: nls.localize('vscode/fileActions/rename', 'Rename'),
+                order: '1',
+              }
+            );
+            this.toDisposeBeforeCreateNewContextMenu.push(
+              Disposable.create(() =>
+                this.menuRegistry.unregisterMenuAction(
+                  WorkspaceCommands.FILE_RENAME
+                )
+              )
+            );
+          } else {
+            const renamePlaceholder = new PlaceholderMenuNode(
+              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
+              nls.localize('vscode/fileActions/rename', 'Rename')
+            );
+            this.menuRegistry.registerMenuNode(
+              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
+              renamePlaceholder
+            );
+            this.toDisposeBeforeCreateNewContextMenu.push(
+              Disposable.create(() =>
+                this.menuRegistry.unregisterMenuNode(renamePlaceholder.id)
+              )
+            );
+          }
+
+          if (
+            currentSketch &&
+            parentsketch &&
+            parentsketch.uri === currentSketch.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: nls.localize('vscode/fileActions/delete', 'Delete'),
+                order: '2',
+              }
+            );
+            this.toDisposeBeforeCreateNewContextMenu.push(
+              Disposable.create(() =>
+                this.menuRegistry.unregisterMenuAction(
+                  WorkspaceCommands.FILE_DELETE
+                )
+              )
+            );
+          } else {
+            const deletePlaceholder = new PlaceholderMenuNode(
+              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
+              nls.localize('vscode/fileActions/delete', 'Delete')
+            );
+            this.menuRegistry.registerMenuNode(
+              ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
+              deletePlaceholder
+            );
+            this.toDisposeBeforeCreateNewContextMenu.push(
+              Disposable.create(() =>
+                this.menuRegistry.unregisterMenuNode(deletePlaceholder.id)
+              )
+            );
+          }
+
+          for (let i = 0; i < uris.length; i++) {
+            const uri = new URI(uris[i]);
+
+            // focus on the opened sketch
+            const command = {
+              id: `arduino-focus-file--${uri.toString()}`,
+            };
+            const handler = {
+              execute: () => open(this.openerService, uri),
+            };
+            this.toDisposeBeforeCreateNewContextMenu.push(
+              registry.registerCommand(command, handler)
+            );
+            this.menuRegistry.registerMenuAction(
+              ArduinoMenus.SKETCH_CONTROL__CONTEXT__RESOURCES_GROUP,
+              {
+                commandId: command.id,
+                label: this.labelProvider.getName(uri),
+                order: `${i}`,
+              }
+            );
+            this.toDisposeBeforeCreateNewContextMenu.push(
+              Disposable.create(() =>
+                this.menuRegistry.unregisterMenuAction(command)
+              )
+            );
+          }
+          const options = {
+            menuPath: ArduinoMenus.SKETCH_CONTROL__CONTEXT,
+            anchor: {
+              x: parentElement.getBoundingClientRect().left,
+              y:
+                parentElement.getBoundingClientRect().top +
+                parentElement.offsetHeight,
+            },
+          };
+          this.contextMenuRenderer.render(options);
+        },
+      }
+    );
+  }
+
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(
+      ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP,
+      {
+        commandId: WorkspaceCommands.NEW_FILE.id,
+        label: nls.localize('vscode/menubar/mNewTab', 'New Tab'),
+        order: '0',
+      }
+    );
+
+    registry.registerMenuAction(
+      ArduinoMenus.SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP,
+      {
+        commandId: CommonCommands.PREVIOUS_TAB.id,
+        label: nls.localize('vscode/menubar/mShowPreviousTab', 'Previous Tab'),
+        order: '0',
+      }
+    );
+    registry.registerMenuAction(
+      ArduinoMenus.SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP,
+      {
+        commandId: CommonCommands.NEXT_TAB.id,
+        label: nls.localize('vscode/menubar/mShowNextTab', 'Next Tab'),
+        order: '0',
+      }
+    );
+  }
+
+  registerKeybindings(registry: KeybindingRegistry): void {
+    registry.registerKeybinding({
+      command: WorkspaceCommands.NEW_FILE.id,
+      keybinding: 'CtrlCmd+Shift+N',
+    });
+    registry.registerKeybinding({
+      command: CommonCommands.PREVIOUS_TAB.id,
+      keybinding: 'CtrlCmd+Alt+Left', // TODO: check why electron does not show the keybindings in the UI.
+    });
+    registry.registerKeybinding({
+      command: CommonCommands.NEXT_TAB.id,
+      keybinding: 'CtrlCmd+Alt+Right',
+    });
+  }
+
+  registerToolbarItems(registry: TabBarToolbarRegistry): void {
+    registry.registerItem({
+      id: SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id,
+      command: SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id,
+    });
+  }
+
+  protected isCloudSketch(uri: string): boolean {
+    try {
+      const cloudCacheLocation = this.localCacheFsProvider.from(new URI(uri));
+
+      if (cloudCacheLocation) {
+        return true;
+      }
+      return false;
+    } catch {
+      return false;
     }
+  }
 
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP, {
-            commandId: WorkspaceCommands.NEW_FILE.id,
-            label: 'New Tab',
-            order: '0'
-        });
-        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP, {
-            commandId: WorkspaceCommands.FILE_RENAME.id,
-            label: 'Rename',
-            order: '1'
-        });
-        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__MAIN_GROUP, {
-            commandId: WorkspaceCommands.FILE_DELETE.id, // TODO: customize delete. Wipe sketch if deleting main file. Close window.
-            label: 'Delete',
-            order: '2'
-        });
-
-        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP, {
-            commandId: CommonCommands.PREVIOUS_TAB.id,
-            label: 'Previous Tab',
-            order: '0'
-        });
-        registry.registerMenuAction(ArduinoMenus.SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP, {
-            commandId: CommonCommands.NEXT_TAB.id,
-            label: 'Next Tab',
-            order: '0'
-        });
-    }
-
-    registerKeybindings(registry: KeybindingRegistry): void {
-        registry.registerKeybinding({
-            command: WorkspaceCommands.NEW_FILE.id,
-            keybinding: 'CtrlCmd+Shift+N'
-        });
-        registry.registerKeybinding({
-            command: CommonCommands.PREVIOUS_TAB.id,
-            keybinding: 'CtrlCmd+Alt+Left' // TODO: check why electron does not show the keybindings in the UI.
-        });
-        registry.registerKeybinding({
-            command: CommonCommands.NEXT_TAB.id,
-            keybinding: 'CtrlCmd+Alt+Right'
-        });
-    }
-
-    registerToolbarItems(registry: TabBarToolbarRegistry): void {
-        registry.registerItem({
-            id: SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id,
-            command: SketchControl.Commands.OPEN_SKETCH_CONTROL__TOOLBAR.id
-        });
-    }
+  protected allowRename(uri: string): boolean {
+    return !this.isCloudSketch(uri);
+  }
 
+  protected allowDelete(uri: string): boolean {
+    return !this.isCloudSketch(uri);
+  }
 }
 
 export namespace SketchControl {
-    export namespace Commands {
-        export const OPEN_SKETCH_CONTROL__TOOLBAR: Command = {
-            id: 'arduino-open-sketch-control--toolbar',
-            iconClass: 'fa fa-caret-down'
-        };
-    }
+  export namespace Commands {
+    export const OPEN_SKETCH_CONTROL__TOOLBAR: Command = {
+      id: 'arduino-open-sketch-control--toolbar',
+      iconClass: 'fa fa-caret-down',
+    };
+  }
 }

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

@@ -1,69 +1,67 @@
 import { inject, injectable } from 'inversify';
-import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
-import { SketchContribution, CommandRegistry, MenuModelRegistry, Sketch } from './contribution';
+import { CommandHandler } from '@theia/core/lib/common/command';
+import { CommandRegistry, MenuModelRegistry } from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { MainMenuManager } from '../../common/main-menu-manager';
 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 SketchContribution {
+export class Sketchbook extends Examples {
+  @inject(CommandRegistry)
+  protected readonly commandRegistry: CommandRegistry;
 
-    @inject(CommandRegistry)
-    protected readonly commandRegistry: CommandRegistry;
+  @inject(MenuModelRegistry)
+  protected readonly menuRegistry: MenuModelRegistry;
 
-    @inject(MenuModelRegistry)
-    protected readonly menuRegistry: MenuModelRegistry;
+  @inject(MainMenuManager)
+  protected readonly mainMenuManager: MainMenuManager;
 
-    @inject(MainMenuManager)
-    protected readonly mainMenuManager: MainMenuManager;
+  @inject(NotificationCenter)
+  protected readonly notificationCenter: NotificationCenter;
 
-    @inject(NotificationCenter)
-    protected readonly notificationCenter: NotificationCenter;
+  onStart(): void {
+    this.sketchService.getSketches({}).then((container) => {
+      this.register(container);
+      this.mainMenuManager.update();
+    });
+    this.sketchServiceClient.onSketchbookDidChange(() => {
+      this.sketchService.getSketches({}).then((container) => {
+        this.register(container);
+        this.mainMenuManager.update();
+      });
+    });
+  }
 
-    protected toDisposePerSketch = new Map<string, DisposableCollection>();
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerSubmenu(
+      ArduinoMenus.FILE__SKETCHBOOK_SUBMENU,
+      nls.localize('arduino/sketch/sketchbook', 'Sketchbook'),
+      { order: '3' }
+    );
+  }
 
-    onStart(): void {
-        this.sketchService.getSketches().then(sketches => {
-            this.register(sketches);
-            this.mainMenuManager.update();
-        });
-        this.sketchServiceClient.onSketchbookDidChange(({ created, removed }) => {
-            this.unregister(removed);
-            this.register(created);
-            this.mainMenuManager.update();
-        });
-    }
-
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerSubmenu(ArduinoMenus.FILE__SKETCHBOOK_SUBMENU, 'Sketchbook', { order: '3' });
-    }
-
-    protected register(sketches: Sketch[]): void {
-        for (const sketch of sketches) {
-            const { uri } = sketch;
-            const toDispose = this.toDisposePerSketch.get(uri);
-            if (toDispose) {
-                toDispose.dispose();
-            }
-            const command = { id: `arduino-sketchbook-open--${uri}` };
-            const handler = { execute: () => this.commandRegistry.executeCommand(OpenSketch.Commands.OPEN_SKETCH.id, sketch) };
-            this.commandRegistry.registerCommand(command, handler);
-            this.menuRegistry.registerMenuAction(ArduinoMenus.FILE__SKETCHBOOK_SUBMENU, { commandId: command.id, label: sketch.name });
-            this.toDisposePerSketch.set(sketch.uri, new DisposableCollection(
-                Disposable.create(() => this.commandRegistry.unregisterCommand(command)),
-                Disposable.create(() => this.menuRegistry.unregisterMenuAction(command))
-            ));
-        }
-    }
-
-    protected unregister(sketches: Sketch[]): void {
-        for (const { uri } of sketches) {
-            const toDispose = this.toDisposePerSketch.get(uri);
-            if (toDispose) {
-                toDispose.dispose();
-            }
-        }
-    }
+  protected register(container: SketchContainer): void {
+    this.toDispose.dispose();
+    this.registerRecursively(
+      [...container.children, ...container.sketches],
+      ArduinoMenus.FILE__SKETCHBOOK_SUBMENU,
+      this.toDispose
+    );
+  }
 
+  protected createHandler(uri: string): CommandHandler {
+    return {
+      execute: async () => {
+        const sketch = await this.sketchService.loadSketch(uri);
+        return this.commandService.executeCommand(
+          OpenSketch.Commands.OPEN_SKETCH.id,
+          sketch
+        );
+      },
+    };
+  }
 }

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,165 +1,330 @@
-import { inject, injectable } from 'inversify';
-import { CoreService } from '../../common/protocol';
-import { ArduinoMenus } from '../menu/arduino-menus';
+import { inject, injectable, postConstruct } from 'inversify';
+import { Emitter } from '@theia/core/lib/common/event';
+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, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry } from './contribution';
+import {
+  SketchContribution,
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+  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(CoreService)
-    protected readonly coreService: CoreService;
+  @inject(SerialConnectionManager)
+  protected readonly serialConnection: SerialConnectionManager;
 
-    @inject(MonitorConnection)
-    protected readonly monitorConnection: MonitorConnection;
+  @inject(MenuModelRegistry)
+  protected readonly menuRegistry: MenuModelRegistry;
 
-    @inject(BoardsDataStore)
-    protected readonly boardsDataStore: BoardsDataStore;
+  @inject(BoardsDataStore)
+  protected readonly boardsDataStore: BoardsDataStore;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClientImpl: BoardsServiceProvider;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClientImpl: BoardsServiceProvider;
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH, {
-            execute: () => this.uploadSketch()
-        });
-        registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER, {
-            execute: () => this.uploadSketch(true)
-        });
-        registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR, {
-            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
-            execute: () => registry.executeCommand(UploadSketch.Commands.UPLOAD_SKETCH.id)
-        });
+  @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 '';
     }
-
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
-            commandId: UploadSketch.Commands.UPLOAD_SKETCH.id,
-            label: 'Upload',
-            order: '1'
-        });
-        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
-            commandId: UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER.id,
-            label: 'Upload Using Programmer',
-            order: '2'
-        });
+    const address = boardsConfig.selectedBoard?.port?.address;
+    if (!address) {
+      return '';
     }
+    return fqbn + '|' + address;
+  }
 
-    registerKeybindings(registry: KeybindingRegistry): void {
-        registry.registerKeybinding({
-            command: UploadSketch.Commands.UPLOAD_SKETCH.id,
-            keybinding: 'CtrlCmd+U'
-        });
-        registry.registerKeybinding({
-            command: UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER.id,
-            keybinding: 'CtrlCmd+Shift+U'
-        });
-    }
-
-    registerToolbarItems(registry: TabBarToolbarRegistry): void {
-        registry.registerItem({
-            id: UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR.id,
-            command: UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR.id,
-            tooltip: 'Upload',
-            priority: 1
-        });
-    }
-
-    async uploadSketch(usingProgrammer: boolean = false): Promise<void> {
-        const sketch = await this.sketchServiceClient.currentSketch();
-        if (!sketch) {
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH, {
+      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);
         }
-        let shouldAutoConnect = false;
-        const monitorConfig = this.monitorConnection.monitorConfig;
-        if (monitorConfig) {
-            await this.monitorConnection.disconnect();
-            if (this.monitorConnection.autoConnect) {
-                shouldAutoConnect = true;
-            }
-            this.monitorConnection.autoConnect = false;
+        this.uploadSketch();
+      },
+      isEnabled: () => !this.uploadInProgress,
+    });
+    registry.registerCommand(UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION, {
+      execute: async () => {
+        const key = this.selectedFqbnAddress();
+        if (!key) {
+          return;
         }
-        try {
-            const { boardsConfig } = this.boardsServiceClientImpl;
-            const [fqbn, { selectedProgrammer }, verify, verbose, sourceOverride] = await Promise.all([
-                this.boardsDataStore.appendConfigToFqbn(boardsConfig.selectedBoard?.fqbn),
-                this.boardsDataStore.getData(boardsConfig.selectedBoard?.fqbn),
-                this.preferences.get('arduino.upload.verify'),
-                this.preferences.get('arduino.upload.verbose'),
-                this.sourceOverride()
-            ]);
 
-            let options: CoreService.Upload.Options | undefined = undefined;
-            const sketchUri = sketch.uri;
-            const optimizeForDebug = this.editorMode.compileForDebug;
-            const { selectedPort } = boardsConfig;
-            const port = selectedPort?.address;
+        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 }));
 
-            if (usingProgrammer) {
-                const programmer = selectedProgrammer;
-                options = {
-                    sketchUri,
-                    fqbn,
-                    optimizeForDebug,
-                    programmer,
-                    port,
-                    verbose,
-                    verify,
-                    sourceOverride
-                };
-            } else {
-                options = {
-                    sketchUri,
-                    fqbn,
-                    optimizeForDebug,
-                    port,
-                    verbose,
-                    verify,
-                    sourceOverride
-                };
-            }
-            this.outputChannelManager.getChannel('Arduino').clear();
-            if (usingProgrammer) {
-                await this.coreService.uploadUsingProgrammer(options);
-            } else {
-                await this.coreService.upload(options);
-            }
-            this.messageService.info('Done uploading.', { timeout: 1000 });
-        } catch (e) {
-            this.messageService.error(e.toString());
-        } finally {
-            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()}`);
-                }
-            }
+        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,
+      {
+        execute: () => this.uploadSketch(true),
+        isEnabled: () => !this.uploadInProgress,
+      }
+    );
+    registry.registerCommand(UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR, {
+      isVisible: (widget) =>
+        ArduinoToolbar.is(widget) && widget.side === 'left',
+      isEnabled: () => !this.uploadInProgress,
+      isToggled: () => this.uploadInProgress,
+      execute: () =>
+        registry.executeCommand(UploadSketch.Commands.UPLOAD_SKETCH.id),
+    });
+  }
+
+  registerMenus(registry: MenuModelRegistry): void {
+    this.menuActionsDisposables.dispose();
+
+    this.menuActionsDisposables.push(
+      registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+        commandId: UploadSketch.Commands.UPLOAD_SKETCH.id,
+        label: nls.localize('arduino/sketch/upload', 'Upload'),
+        order: '1',
+      })
+    );
+    if (this.boardRequiresUserFields) {
+      this.menuActionsDisposables.push(
+        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+          commandId: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.id,
+          label: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label,
+          order: '2',
+        })
+      );
+    } else {
+      this.menuActionsDisposables.push(
+        registry.registerMenuNode(
+          ArduinoMenus.SKETCH__MAIN_GROUP,
+          new PlaceholderMenuNode(
+            ArduinoMenus.SKETCH__MAIN_GROUP,
+            // commandId: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.id,
+            UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label!,
+            { order: '2' }
+          )
+        )
+      );
+    }
+    this.menuActionsDisposables.push(
+      registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+        commandId: UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER.id,
+        label: nls.localize(
+          'arduino/sketch/uploadUsingProgrammer',
+          'Upload Using Programmer'
+        ),
+        order: '3',
+      })
+    );
+  }
+
+  registerKeybindings(registry: KeybindingRegistry): void {
+    registry.registerKeybinding({
+      command: UploadSketch.Commands.UPLOAD_SKETCH.id,
+      keybinding: 'CtrlCmd+U',
+    });
+    registry.registerKeybinding({
+      command: UploadSketch.Commands.UPLOAD_SKETCH_USING_PROGRAMMER.id,
+      keybinding: 'CtrlCmd+Shift+U',
+    });
+  }
+
+  registerToolbarItems(registry: TabBarToolbarRegistry): void {
+    registry.registerItem({
+      id: UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR.id,
+      command: UploadSketch.Commands.UPLOAD_SKETCH_TOOLBAR.id,
+      tooltip: nls.localize('arduino/sketch/upload', 'Upload'),
+      priority: 1,
+      onDidChange: this.onDidChange,
+    });
+  }
+
+  async uploadSketch(usingProgrammer = false): Promise<void> {
+    // even with buttons disabled, better to double check if an upload is already in progress
+    if (this.uploadInProgress) {
+      return;
     }
 
+    // toggle the toolbar button and menu item state.
+    // uploadInProgress will be set to false whether the upload fails or not
+    this.uploadInProgress = true;
+    this.onDidChangeEmitter.fire();
+    const sketch = await this.sketchServiceClient.currentSketch();
+    if (!sketch) {
+      return;
+    }
+    await this.serialConnection.disconnect();
+    try {
+      const { boardsConfig } = this.boardsServiceClientImpl;
+      const [fqbn, { selectedProgrammer }, verify, verbose, sourceOverride] =
+        await Promise.all([
+          this.boardsDataStore.appendConfigToFqbn(
+            boardsConfig.selectedBoard?.fqbn
+          ),
+          this.boardsDataStore.getData(boardsConfig.selectedBoard?.fqbn),
+          this.preferences.get('arduino.upload.verify'),
+          this.preferences.get('arduino.upload.verbose'),
+          this.sourceOverride(),
+        ]);
+
+      let options: CoreService.Upload.Options | undefined = undefined;
+      const sketchUri = sketch.uri;
+      const optimizeForDebug = this.editorMode.compileForDebug;
+      const { selectedPort } = boardsConfig;
+      const port = selectedPort;
+      const userFields =
+        this.cachedUserFields.get(this.selectedFqbnAddress()) ?? [];
+      if (userFields.length === 0 && this.boardRequiresUserFields) {
+        this.messageService.error(
+          nls.localize(
+            'arduino/sketch/userFieldsNotFoundError',
+            "Can't find user fields for connected board"
+          )
+        );
+        return;
+      }
+
+      if (usingProgrammer) {
+        const programmer = selectedProgrammer;
+        options = {
+          sketchUri,
+          fqbn,
+          optimizeForDebug,
+          programmer,
+          port,
+          verbose,
+          verify,
+          sourceOverride,
+          userFields,
+        };
+      } else {
+        options = {
+          sketchUri,
+          fqbn,
+          optimizeForDebug,
+          port,
+          verbose,
+          verify,
+          sourceOverride,
+          userFields,
+        };
+      }
+      this.outputChannelManager.getChannel('Arduino').clear();
+      if (usingProgrammer) {
+        await this.coreService.uploadUsingProgrammer(options);
+      } else {
+        await this.coreService.upload(options);
+      }
+      this.messageService.info(
+        nls.localize('arduino/sketch/doneUploading', 'Done uploading.'),
+        { timeout: 3000 }
+      );
+    } catch (e) {
+      this.messageService.error(e.toString());
+    } finally {
+      this.uploadInProgress = false;
+      this.onDidChangeEmitter.fire();
+
+      if (
+        this.serialConnection.isSerialOpen() &&
+        this.serialConnection.serialConfig
+      ) {
+        const { board, port } = this.serialConnection.serialConfig;
+        try {
+          await this.boardsServiceClientImpl.waitUntilAvailable(
+            Object.assign(board, { port }),
+            10_000
+          );
+          await this.serialConnection.connect();
+        } catch (waitError) {
+          this.messageService.error(
+            nls.localize(
+              'arduino/sketch/couldNotConnectToSerial',
+              'Could not reconnect to serial port. {0}',
+              waitError.toString()
+            )
+          );
+        }
+      }
+    }
+  }
 }
 
 export namespace UploadSketch {
-    export namespace Commands {
-        export const UPLOAD_SKETCH: Command = {
-            id: 'arduino-upload-sketch'
-        };
-        export const UPLOAD_SKETCH_USING_PROGRAMMER: Command = {
-            id: 'arduino-upload-sketch-using-programmer'
-        };
-        export const UPLOAD_SKETCH_TOOLBAR: Command = {
-            id: 'arduino-upload-sketch--toolbar'
-        };
-    }
+  export namespace Commands {
+    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',
+    };
+    export const UPLOAD_SKETCH_TOOLBAR: Command = {
+      id: 'arduino-upload-sketch--toolbar',
+    };
+  }
 }

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

@@ -1,110 +1,150 @@
 import { inject, injectable } from 'inversify';
+import { Emitter } from '@theia/core/lib/common/event';
 import { CoreService } from '../../common/protocol';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import { ArduinoToolbar } from '../toolbar/arduino-toolbar';
 import { BoardsDataStore } from '../boards/boards-data-store';
 import { BoardsServiceProvider } from '../boards/boards-service-provider';
-import { SketchContribution, Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry } from './contribution';
+import {
+  SketchContribution,
+  Command,
+  CommandRegistry,
+  MenuModelRegistry,
+  KeybindingRegistry,
+  TabBarToolbarRegistry,
+} from './contribution';
+import { nls } from '@theia/core/lib/common';
 
 @injectable()
 export class VerifySketch extends SketchContribution {
+  @inject(CoreService)
+  protected readonly coreService: CoreService;
 
-    @inject(CoreService)
-    protected readonly coreService: CoreService;
+  @inject(BoardsDataStore)
+  protected readonly boardsDataStore: BoardsDataStore;
 
-    @inject(BoardsDataStore)
-    protected readonly boardsDataStore: BoardsDataStore;
+  @inject(BoardsServiceProvider)
+  protected readonly boardsServiceClientImpl: BoardsServiceProvider;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceClientImpl: BoardsServiceProvider;
+  protected readonly onDidChangeEmitter = new Emitter<Readonly<void>>();
+  readonly onDidChange = this.onDidChangeEmitter.event;
 
-    registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH, {
-            execute: () => this.verifySketch()
-        });
-        registry.registerCommand(VerifySketch.Commands.EXPORT_BINARIES, {
-            execute: () => this.verifySketch(true)
-        });
-        registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR, {
-            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'left',
-            execute: () => registry.executeCommand(VerifySketch.Commands.VERIFY_SKETCH.id)
-        });
+  protected verifyInProgress = false;
+
+  registerCommands(registry: CommandRegistry): void {
+    registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH, {
+      execute: () => this.verifySketch(),
+      isEnabled: () => !this.verifyInProgress,
+    });
+    registry.registerCommand(VerifySketch.Commands.EXPORT_BINARIES, {
+      execute: () => this.verifySketch(true),
+      isEnabled: () => !this.verifyInProgress,
+    });
+    registry.registerCommand(VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR, {
+      isVisible: (widget) =>
+        ArduinoToolbar.is(widget) && widget.side === 'left',
+      isEnabled: () => !this.verifyInProgress,
+      isToggled: () => this.verifyInProgress,
+      execute: () =>
+        registry.executeCommand(VerifySketch.Commands.VERIFY_SKETCH.id),
+    });
+  }
+
+  registerMenus(registry: MenuModelRegistry): void {
+    registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+      commandId: VerifySketch.Commands.VERIFY_SKETCH.id,
+      label: nls.localize('arduino/sketch/verifyOrCompile', 'Verify/Compile'),
+      order: '0',
+    });
+    registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
+      commandId: VerifySketch.Commands.EXPORT_BINARIES.id,
+      label: nls.localize(
+        'arduino/sketch/exportBinary',
+        'Export Compiled Binary'
+      ),
+      order: '4',
+    });
+  }
+
+  registerKeybindings(registry: KeybindingRegistry): void {
+    registry.registerKeybinding({
+      command: VerifySketch.Commands.VERIFY_SKETCH.id,
+      keybinding: 'CtrlCmd+R',
+    });
+    registry.registerKeybinding({
+      command: VerifySketch.Commands.EXPORT_BINARIES.id,
+      keybinding: 'CtrlCmd+Alt+S',
+    });
+  }
+
+  registerToolbarItems(registry: TabBarToolbarRegistry): void {
+    registry.registerItem({
+      id: VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR.id,
+      command: VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR.id,
+      tooltip: nls.localize('arduino/sketch/verify', 'Verify'),
+      priority: 0,
+      onDidChange: this.onDidChange,
+    });
+  }
+
+  async verifySketch(exportBinaries?: boolean): Promise<void> {
+    // even with buttons disabled, better to double check if a verify is already in progress
+    if (this.verifyInProgress) {
+      return;
     }
 
-    registerMenus(registry: MenuModelRegistry): void {
-        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
-            commandId: VerifySketch.Commands.VERIFY_SKETCH.id,
-            label: 'Verify/Compile',
-            order: '0'
-        });
-        registry.registerMenuAction(ArduinoMenus.SKETCH__MAIN_GROUP, {
-            commandId: VerifySketch.Commands.EXPORT_BINARIES.id,
-            label: 'Export compiled Binary',
-            order: '3'
-        });
-    }
+    // toggle the toolbar button and menu item state.
+    // verifyInProgress will be set to false whether the compilation fails or not
+    this.verifyInProgress = true;
+    this.onDidChangeEmitter.fire();
+    const sketch = await this.sketchServiceClient.currentSketch();
 
-    registerKeybindings(registry: KeybindingRegistry): void {
-        registry.registerKeybinding({
-            command: VerifySketch.Commands.VERIFY_SKETCH.id,
-            keybinding: 'CtrlCmd+R'
-        });
-        registry.registerKeybinding({
-            command: VerifySketch.Commands.EXPORT_BINARIES.id,
-            keybinding: 'CtrlCmd+Alt+S'
-        });
+    if (!sketch) {
+      return;
     }
-
-    registerToolbarItems(registry: TabBarToolbarRegistry): void {
-        registry.registerItem({
-            id: VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR.id,
-            command: VerifySketch.Commands.VERIFY_SKETCH_TOOLBAR.id,
-            tooltip: 'Verify',
-            priority: 0
-        });
+    try {
+      const { boardsConfig } = this.boardsServiceClientImpl;
+      const [fqbn, sourceOverride] = await Promise.all([
+        this.boardsDataStore.appendConfigToFqbn(
+          boardsConfig.selectedBoard?.fqbn
+        ),
+        this.sourceOverride(),
+      ]);
+      const verbose = this.preferences.get('arduino.compile.verbose');
+      const compilerWarnings = this.preferences.get('arduino.compile.warnings');
+      this.outputChannelManager.getChannel('Arduino').clear();
+      await this.coreService.compile({
+        sketchUri: sketch.uri,
+        fqbn,
+        optimizeForDebug: this.editorMode.compileForDebug,
+        verbose,
+        exportBinaries,
+        sourceOverride,
+        compilerWarnings,
+      });
+      this.messageService.info(
+        nls.localize('arduino/sketch/doneCompiling', 'Done compiling.'),
+        { timeout: 3000 }
+      );
+    } catch (e) {
+      this.messageService.error(e.toString());
+    } finally {
+      this.verifyInProgress = false;
+      this.onDidChangeEmitter.fire();
     }
-
-    async verifySketch(exportBinaries?: boolean): Promise<void> {
-        const sketch = await this.sketchServiceClient.currentSketch();
-        if (!sketch) {
-            return;
-        }
-        try {
-            const { boardsConfig } = this.boardsServiceClientImpl;
-            const [fqbn, sourceOverride] = await Promise.all([
-                this.boardsDataStore.appendConfigToFqbn(boardsConfig.selectedBoard?.fqbn),
-                this.sourceOverride()
-            ]);
-            const verbose = this.preferences.get('arduino.compile.verbose');
-            const compilerWarnings = this.preferences.get('arduino.compile.warnings');
-            this.outputChannelManager.getChannel('Arduino').clear();
-            await this.coreService.compile({
-                sketchUri: sketch.uri,
-                fqbn,
-                optimizeForDebug: this.editorMode.compileForDebug,
-                verbose,
-                exportBinaries,
-                sourceOverride,
-                compilerWarnings
-            });
-            this.messageService.info('Done compiling.', { timeout: 1000 });
-        } catch (e) {
-            this.messageService.error(e.toString());
-        }
-    }
-
+  }
 }
 
 export namespace VerifySketch {
-    export namespace Commands {
-        export const VERIFY_SKETCH: Command = {
-            id: 'arduino-verify-sketch'
-        };
-        export const EXPORT_BINARIES: Command = {
-            id: 'arduino-export-binaries'
-        };
-        export const VERIFY_SKETCH_TOOLBAR: Command = {
-            id: 'arduino-verify-sketch--toolbar'
-        };
-    }
+  export namespace Commands {
+    export const VERIFY_SKETCH: Command = {
+      id: 'arduino-verify-sketch',
+    };
+    export const EXPORT_BINARIES: Command = {
+      id: 'arduino-export-binaries',
+    };
+    export const VERIFY_SKETCH_TOOLBAR: Command = {
+      id: 'arduino-verify-sketch--toolbar',
+    };
+  }
 }

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

@@ -0,0 +1,479 @@
+import { injectable, inject } from 'inversify';
+import * as createPaths 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>;
+}
+export namespace ResponseResultProvider {
+  export const NOOP: ResponseResultProvider = async () => undefined;
+  export const TEXT: ResponseResultProvider = (response) => response.text();
+  export const JSON: ResponseResultProvider = (response) => response.json();
+}
+
+type ResourceType = 'f' | 'd';
+
+@injectable()
+export class CreateApi {
+  @inject(SketchCache)
+  protected sketchCache: SketchCache;
+
+  protected authenticationService: AuthenticationClientService;
+  protected arduinoPreferences: ArduinoPreferences;
+
+  public init(
+    authenticationService: AuthenticationClientService,
+    arduinoPreferences: ArduinoPreferences
+  ): CreateApi {
+    this.authenticationService = authenticationService;
+    this.arduinoPreferences = arduinoPreferences;
+
+    return this;
+  }
+
+  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',
+    };
+  }
+
+  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();
+    const result = await this.run<Create.Sketch>(url, {
+      method: 'GET',
+      headers,
+    });
+    return result;
+  }
+
+  async sketches(): Promise<Create.Sketch[]> {
+    const url = new URL(`${this.domain()}/sketches`);
+    url.searchParams.set('user_id', 'me');
+    const headers = await this.headers();
+    const result = await this.run<{ sketches: Create.Sketch[] }>(url, {
+      method: 'GET',
+      headers,
+    });
+    result.sketches.forEach((sketch) => this.sketchCache.addSketch(sketch));
+    return result.sketches;
+  }
+
+  async createSketch(
+    posixPath: string,
+    content: string = CreateApi.defaultInoContent
+  ): Promise<Create.Sketch> {
+    const url = new URL(`${this.domain()}/sketches`);
+    const headers = await this.headers();
+    const payload = {
+      ino: btoa(content),
+      path: posixPath,
+      user_id: 'me',
+    };
+    const init = {
+      method: 'PUT',
+      body: JSON.stringify(payload),
+      headers,
+    };
+    const result = await this.run<Create.Sketch>(url, init);
+    return result;
+  }
+
+  async readDirectory(
+    posixPath: string,
+    options: {
+      recursive?: boolean;
+      match?: string;
+      skipSketchCache?: boolean;
+    } = {}
+  ): Promise<Create.Resource[]> {
+    const url = new URL(
+      `${this.domain()}/files/d/$HOME/sketches_v2${posixPath}`
+    );
+    if (options.recursive) {
+      url.searchParams.set('deep', 'true');
+    }
+    if (options.match) {
+      url.searchParams.set('name_like', options.match);
+    }
+    const headers = await this.headers();
+
+    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,
+      }),
+    ])
+      .then(async ([sketch, result]) => {
+        if (posixPath.length && posixPath !== posix.sep) {
+          if (sketch && sketch.secrets && sketch.secrets.length > 0) {
+            result.push(this.getSketchSecretStat(sketch));
+          }
+        }
+
+        return result.filter(
+          (res) => !Create.do_not_sync_files.includes(res.name)
+        );
+      })
+      .catch((reason) => {
+        if (reason?.status === 404) return [] as Create.Resource[];
+        else throw reason;
+      });
+  }
+
+  async createDirectory(posixPath: string): Promise<void> {
+    const url = new URL(
+      `${this.domain()}/files/d/$HOME/sketches_v2${posixPath}`
+    );
+    const headers = await this.headers();
+    await this.run(url, {
+      method: 'POST',
+      headers,
+    });
+  }
+
+  async stat(posixPath: string): Promise<Create.Resource> {
+    // The root is a directory read.
+    if (posixPath === '/') {
+      throw new Error('Stating the root is not supported');
+    }
+    // The RESTful API has different endpoints for files and directories.
+    // The RESTful API does not provide specific error codes, only HTP 500.
+    // We query the parent directory and look for the file with the last segment.
+    const parentPosixPath = createPaths.parentPosix(posixPath);
+    const basename = createPaths.basename(posixPath);
+
+    let resources;
+    if (basename === Create.arduino_secrets_file) {
+      const sketch = this.sketchCache.getSketch(parentPosixPath);
+      resources = sketch ? [this.getSketchSecretStat(sketch)] : [];
+    } else {
+      resources = await this.readDirectory(parentPosixPath, {
+        match: 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);
+
+      //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) {
+          file += `#define ${item.name} "${item.value}"\r\n`;
+        }
+      }
+      return file;
+    }
+
+    const url = new URL(
+      `${this.domain()}/files/f/$HOME/sketches_v2${posixPath}`
+    );
+    const headers = await this.headers();
+    const result = await this.run<{ data: string; path: string }>(url, {
+      method: 'GET',
+      headers,
+    });
+    let { data } = result;
+
+    // add includes to main arduino file
+    data = await this.toggleSecretsInclude(posixPath, atob(data), 'add');
+    return data;
+  }
+
+  async writeFile(
+    posixPath: string,
+    content: string | Uint8Array
+  ): Promise<void> {
+    const basename = createPaths.basename(posixPath);
+
+    if (basename === Create.arduino_secrets_file) {
+      const parentPosixPath = createPaths.parentPosix(posixPath);
+
+      const sketch = this.sketchCache.getSketch(parentPosixPath);
+
+      if (sketch) {
+        const url = new URL(`${this.domain()}/sketches/${sketch.id}`);
+        const headers = await this.headers();
+
+        // parse the secret file
+        const secrets = (
+          typeof content === 'string'
+            ? content
+            : new TextDecoder().decode(content)
+        )
+          .split(/\r?\n/)
+          .reduce((prev, curr) => {
+            // check if the line contains a secret
+            const secret = curr.split('SECRET_')[1] || null;
+            if (!secret) {
+              return prev;
+            }
+            const regexp = /(\S*)\s+([\S\s]*)/g;
+            const tokens = regexp.exec(secret) || [];
+            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, '')
+                )
+              );
+            }
+
+            if (name.length === 0) {
+              return prev;
+            }
+
+            return [...prev, { name, value }];
+          }, []);
+
+        const payload = {
+          id: sketch.id,
+          libraries: sketch.libraries,
+          secrets: { data: 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',
+          body: JSON.stringify(payload),
+          headers,
+        };
+        await this.run(url, init);
+      }
+      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();
+
+    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),
+      headers,
+    };
+    await this.run(url, init);
+  }
+
+  async deleteFile(posixPath: string): Promise<void> {
+    await this.delete(posixPath, 'f');
+  }
+
+  async deleteDirectory(posixPath: string): Promise<void> {
+    await this.delete(posixPath, 'd');
+  }
+
+  private async delete(posixPath: string, type: ResourceType): Promise<void> {
+    const url = new URL(
+      `${this.domain()}/files/${type}/$HOME/sketches_v2${posixPath}`
+    );
+    const headers = await this.headers();
+    await this.run(url, {
+      method: 'DELETE',
+      headers,
+    });
+  }
+
+  async rename(fromPosixPath: string, toPosixPath: string): Promise<void> {
+    const url = new URL(`${this.domain('v3')}/files/mv`);
+    const headers = await this.headers();
+    const payload = {
+      from: `$HOME/sketches_v2${fromPosixPath}`,
+      to: `$HOME/sketches_v2${toPosixPath}`,
+    };
+    const init = {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers,
+    };
+    await this.run(url, init, ResponseResultProvider.NOOP);
+  }
+
+  async editSketch({
+    id,
+    params,
+  }: {
+    id: string;
+    params: Record<string, unknown>;
+  }): Promise<Create.Sketch> {
+    const url = new URL(`${this.domain()}/sketches/${id}`);
+
+    const headers = await this.headers();
+    const result = await this.run<Create.Sketch>(url, {
+      method: 'POST',
+      body: JSON.stringify({ id, ...params }),
+      headers,
+    });
+    return result;
+  }
+
+  async copy(fromPosixPath: string, toPosixPath: string): Promise<void> {
+    const payload = {
+      from: `$HOME/sketches_v2${fromPosixPath}`,
+      to: `$HOME/sketches_v2${toPosixPath}`,
+    };
+    const url = new URL(`${this.domain('v3')}/files/cp`);
+    const headers = await this.headers();
+    const init = {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers,
+    };
+    await this.run(url, init, ResponseResultProvider.NOOP);
+  }
+
+  private async run<T>(
+    requestInfo: RequestInfo | URL,
+    init: RequestInit | undefined,
+    resultProvider: ResponseResultProvider = ResponseResultProvider.JSON
+  ): Promise<T> {
+    const response = await fetch(
+      requestInfo instanceof URL ? requestInfo.toString() : requestInfo,
+      init
+    );
+    if (!response.ok) {
+      let details: string | undefined = undefined;
+      try {
+        details = await response.json();
+      } catch (e) {
+        console.error('Cloud not get the error details.', e);
+      }
+      const { statusText, status } = response;
+      throw new CreateError(statusText, status, details);
+    }
+    const result = await resultProvider(response);
+    return result;
+  }
+
+  private async headers(): Promise<Record<string, string>> {
+    const token = await this.token();
+    return {
+      'content-type': 'application/json',
+      accept: 'application/json',
+      authorization: `Bearer ${token}`,
+    };
+  }
+
+  private domain(apiVersion = 'v2'): string {
+    const endpoint = this.arduinoPreferences['arduino.cloud.sketchSyncEnpoint'];
+    return `${endpoint}/${apiVersion}`;
+  }
+
+  private async token(): Promise<string> {
+    return this.authenticationService.session?.accessToken || '';
+  }
+}
+
+export namespace CreateApi {
+  export const defaultInoContent = `/*
+
+*/
+
+void setup() {
+  
+}
+
+void loop() {
+  
+}
+
+`;
+}

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

@@ -0,0 +1,198 @@
+import { inject, injectable } from 'inversify';
+import URI from '@theia/core/lib/common/uri';
+import { Event } from '@theia/core/lib/common/event';
+import {
+  Disposable,
+  DisposableCollection,
+} from '@theia/core/lib/common/disposable';
+import { FrontendApplicationContribution } from '@theia/core/lib/browser/frontend-application';
+import {
+  Stat,
+  FileType,
+  FileChange,
+  FileWriteOptions,
+  FileDeleteOptions,
+  FileOverwriteOptions,
+  FileSystemProvider,
+  FileSystemProviderError,
+  FileSystemProviderErrorCode,
+  FileSystemProviderCapabilities,
+  WatchOptions,
+} from '@theia/filesystem/lib/common/files';
+import {
+  FileService,
+  FileServiceContribution,
+} from '@theia/filesystem/lib/browser/file-service';
+import { AuthenticationClientService } from '../auth/authentication-client-service';
+import { CreateApi } from './create-api';
+import { CreateUri } from './create-uri';
+import { SketchesService } from '../../common/protocol';
+import { ArduinoPreferences } from '../arduino-preferences';
+import { Create } from './typings';
+
+@injectable()
+export class CreateFsProvider
+  implements
+    FileSystemProvider,
+    FrontendApplicationContribution,
+    FileServiceContribution
+{
+  @inject(AuthenticationClientService)
+  protected readonly authenticationService: AuthenticationClientService;
+
+  @inject(CreateApi)
+  protected readonly createApi: CreateApi;
+
+  @inject(SketchesService)
+  protected readonly sketchesService: SketchesService;
+
+  @inject(ArduinoPreferences)
+  protected readonly arduinoPreferences: ArduinoPreferences;
+
+  protected readonly toDispose = new DisposableCollection();
+
+  readonly onFileWatchError: Event<void> = Event.None;
+  readonly onDidChangeFile: Event<readonly FileChange[]> = Event.None;
+  readonly onDidChangeCapabilities: Event<void> = Event.None;
+  readonly capabilities: FileSystemProviderCapabilities =
+    FileSystemProviderCapabilities.FileReadWrite |
+    FileSystemProviderCapabilities.PathCaseSensitive |
+    FileSystemProviderCapabilities.Access;
+
+  onStop(): void {
+    this.toDispose.dispose();
+  }
+
+  registerFileSystemProviders(service: FileService): void {
+    service.onWillActivateFileSystemProvider((event) => {
+      if (event.scheme === CreateUri.scheme) {
+        event.waitUntil(
+          (async () => {
+            service.registerProvider(CreateUri.scheme, this);
+          })()
+        );
+      }
+    });
+  }
+
+  watch(uri: URI, opts: WatchOptions): Disposable {
+    return Disposable.NULL;
+  }
+
+  async stat(uri: URI): Promise<Stat> {
+    if (CreateUri.equals(CreateUri.root, uri)) {
+      this.getCreateApi; // This will throw when not logged in.
+      return {
+        type: FileType.Directory,
+        ctime: 0,
+        mtime: 0,
+        size: 0,
+      };
+    }
+    const resource = await this.getCreateApi.stat(uri.path.toString());
+    const mtime = Date.parse(resource.modified_at);
+    return {
+      type: this.toFileType(resource.type),
+      ctime: mtime,
+      mtime,
+      size: 0,
+    };
+  }
+
+  async mkdir(uri: URI): Promise<void> {
+    await this.getCreateApi.createDirectory(uri.path.toString());
+  }
+
+  async readdir(uri: URI): Promise<[string, FileType][]> {
+    const resources = await this.getCreateApi.readDirectory(
+      uri.path.toString()
+    );
+    return resources.map(({ name, type }) => [name, this.toFileType(type)]);
+  }
+
+  async delete(uri: URI, opts: FileDeleteOptions): Promise<void> {
+    if (!opts.recursive) {
+      throw new Error(
+        'Arduino Create file-system provider does not support non-recursive deletion.'
+      );
+    }
+    const stat = await this.stat(uri);
+    if (!stat) {
+      throw new FileSystemProviderError(
+        'File not found.',
+        FileSystemProviderErrorCode.FileNotFound
+      );
+    }
+    switch (stat.type) {
+      case FileType.Directory: {
+        await this.getCreateApi.deleteDirectory(uri.path.toString());
+        break;
+      }
+      case FileType.File: {
+        await this.getCreateApi.deleteFile(uri.path.toString());
+        break;
+      }
+      default: {
+        throw new FileSystemProviderError(
+          `Unexpected file type '${stat.type}' for resource: ${uri.toString()}`,
+          FileSystemProviderErrorCode.Unknown
+        );
+      }
+    }
+  }
+
+  async rename(
+    oldUri: URI,
+    newUri: URI,
+    options: FileOverwriteOptions
+  ): Promise<void> {
+    await this.getCreateApi.rename(
+      oldUri.path.toString(),
+      newUri.path.toString()
+    );
+  }
+
+  async readFile(uri: URI): Promise<Uint8Array> {
+    const content = await this.getCreateApi.readFile(uri.path.toString());
+    return new TextEncoder().encode(content);
+  }
+
+  async writeFile(
+    uri: URI,
+    content: Uint8Array,
+    options: FileWriteOptions
+  ): Promise<void> {
+    await this.getCreateApi.writeFile(uri.path.toString(), content);
+  }
+
+  async access(uri: URI, mode?: number): Promise<void> {
+    this.getCreateApi; // Will throw if not logged in.
+  }
+
+  public toFileType(type: Create.ResourceType): FileType {
+    switch (type) {
+      case 'file':
+        return FileType.File;
+      case 'sketch':
+      case 'folder':
+        return FileType.Directory;
+      default:
+        return FileType.Unknown;
+    }
+  }
+
+  private get getCreateApi(): CreateApi {
+    const { session } = this.authenticationService;
+    if (!session) {
+      throw new FileSystemProviderError(
+        'Not logged in.',
+        FileSystemProviderErrorCode.NoPermissions
+      );
+    }
+
+    return this.createApi.init(
+      this.authenticationService,
+      this.arduinoPreferences
+    );
+  }
+}

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

@@ -0,0 +1,59 @@
+export const posix = { sep: '/' };
+
+// TODO: poor man's `path.join(path, '..')` in the browser.
+export function parentPosix(path: string): string {
+  const segments = path.split(posix.sep) || [];
+  segments.pop();
+  let modified = segments.join(posix.sep);
+  if (path.charAt(path.length - 1) === posix.sep) {
+    modified += posix.sep;
+  }
+  return modified;
+}
+
+export function basename(path: string): string {
+  const segments = path.split(posix.sep) || [];
+  return segments.pop()!;
+}
+
+export function posixSegments(posixPath: string): string[] {
+  return posixPath.split(posix.sep).filter((segment) => !!segment);
+}
+
+/**
+ * Splits the `raw` path into two segments, a root that contains user information and the relevant POSIX path. \
+ * For examples:
+ * ```
+ * `29ad0829759028dde9b877343fa3b0e1:testrest/sketches_v2/xxx_folder/xxx_sub_folder/sketch_in_folder/sketch_in_folder.ino`
+ * ```
+ * will be:
+ * ```
+ * ['29ad0829759028dde9b877343fa3b0e1:testrest/sketches_v2', '/xxx_folder/xxx_sub_folder/sketch_in_folder/sketch_in_folder.ino']
+ * ```
+ */
+export function splitSketchPath(
+  raw: string,
+  sep = '/sketches_v2/'
+): [string, string] {
+  if (!sep) {
+    throw new Error('Invalid separator. Cannot be zero length.');
+  }
+  const index = raw.indexOf(sep);
+  if (index === -1) {
+    throw new Error(`Invalid path pattern. Raw path was '${raw}'.`);
+  }
+  const createRoot = raw.substring(0, index + sep.length - 1); // TODO: validate the `createRoot` format.
+  const posixPath = raw.substr(index + sep.length - 1);
+  if (!posixPath) {
+    throw new Error(`Could not extract POSIX path from '${raw}'.`);
+  }
+  return [createRoot, posixPath];
+}
+
+export function toPosixPath(raw: string): string {
+  if (raw === posix.sep) {
+    return posix.sep; // Handles the root resource case.
+  }
+  const [, posixPath] = splitSketchPath(raw);
+  return posixPath;
+}

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

@@ -0,0 +1,37 @@
+import { URI as Uri } from 'vscode-uri';
+import URI from '@theia/core/lib/common/uri';
+import { toPosixPath, parentPosix, posix } from './create-paths';
+import { Create } from './typings';
+
+export namespace CreateUri {
+  export const scheme = 'arduino-create';
+  export const root = toUri(posix.sep);
+
+  export function toUri(posixPathOrResource: string | Create.Resource): URI {
+    const posixPath =
+      typeof posixPathOrResource === 'string'
+        ? posixPathOrResource
+        : toPosixPath(posixPathOrResource.path);
+    return new URI(Uri.parse(posixPath).with({ scheme, authority: 'create' }));
+  }
+
+  export function is(uri: URI): boolean {
+    return uri.scheme === scheme;
+  }
+
+  export function equals(left: URI, right: URI): boolean {
+    return is(left) && is(right) && left.toString() === right.toString();
+  }
+
+  export function parent(uri: URI): URI {
+    if (!is(uri)) {
+      throw new Error(
+        `Invalid URI scheme. Expected '${scheme}' got '${uri.scheme}' instead.`
+      );
+    }
+    if (equals(uri, root)) {
+      return uri;
+    }
+    return toUri(parentPosix(uri.path.toString()));
+  }
+}

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

@@ -28,7 +28,8 @@
       "scope": [
         "meta.function.c",
         "entity.name.function",
-        "meta.function-call.c"
+        "meta.function-call.c",
+        "variable.other"
       ],
       "settings": {
         "foreground": "#D35400"
@@ -42,16 +43,19 @@
         "meta.block.c",
         "meta.function.c",
         "entity.name.function.preprocessor.c",
-        "meta.preprocessor.macro.c"
+        "meta.preprocessor.macro.c",
+        "variable",
+        "variable.name"
       ],
       "settings": {
         "foreground": "#434f54"
       }
     },
     {
-      "name": "strings",
+      "name": "constants",
       "scope": [
-        "string.quoted.double"
+        "string.quoted.double",
+        "constant"
       ],
       "settings": {
         "foreground": "#005C5F"
@@ -81,13 +85,19 @@
   ],
   "colors": {
     "list.highlightForeground": "#005c5f",
-    "list.activeSelectionBackground": "#005c5f",
+    "list.activeSelectionForeground": "#424242",
+    "list.activeSelectionBackground": "#DAE3E3",
+    "list.inactiveSelectionForeground": "#424242",
+    "list.inactiveSelectionBackground": "#DAE3E3",
+    "list.hoverBackground": "#ECF1F1",
+    "progressBar.background": "#005c5f",
     "editor.background": "#ffffff",
     "editorCursor.foreground": "#434f54",
     "editor.foreground": "#434f54",
     "editorWhitespace.foreground": "#bfbfbf",
     "editor.lineHighlightBackground": "#434f5410",
     "editor.selectionBackground": "#ffcb00",
+    "editorWidget.background": "#F7F9F9",
     "focusBorder": "#7fcbcd99",
     "menubar.selectionBackground": "#ffffff",
     "menubar.selectionForeground": "#212121",
@@ -105,6 +115,7 @@
     "activityBar.foreground": "#616161",
     "statusBar.background": "#005c5f",
     "secondaryButton.background": "#b5c8c9",
+    "secondaryButton.foreground": "#ececec",
     "secondaryButton.hoverBackground": "#dae3e3",
     "arduino.branding.primary": "#00979d",
     "arduino.branding.secondary": "#b5c8c9",

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

@@ -1,33 +1,37 @@
 import { injectable, inject } from 'inversify';
-import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser';
+import {
+  FrontendApplicationContribution,
+  FrontendApplication,
+} from '@theia/core/lib/browser';
 import { MainMenuManager } from '../common/main-menu-manager';
 
 @injectable()
 export class EditorMode implements FrontendApplicationContribution {
+  @inject(MainMenuManager)
+  protected readonly mainMenuManager: MainMenuManager;
 
-    @inject(MainMenuManager)
-    protected readonly mainMenuManager: MainMenuManager;
+  protected app: FrontendApplication;
 
-    protected app: FrontendApplication;
+  onStart(app: FrontendApplication): void {
+    this.app = app;
+  }
 
-    onStart(app: FrontendApplication): void {
-        this.app = app;
-    }
-
-    get compileForDebug(): boolean {
-        const value = window.localStorage.getItem(EditorMode.COMPILE_FOR_DEBUG_KEY);
-        return value === 'true';
-    }
-
-    async toggleCompileForDebug(): Promise<void> {
-        const oldState = this.compileForDebug;
-        const newState = !oldState;
-        window.localStorage.setItem(EditorMode.COMPILE_FOR_DEBUG_KEY, String(newState));
-        this.mainMenuManager.update();
-    }
+  get compileForDebug(): boolean {
+    const value = window.localStorage.getItem(EditorMode.COMPILE_FOR_DEBUG_KEY);
+    return value === 'true';
+  }
 
+  async toggleCompileForDebug(): Promise<void> {
+    const oldState = this.compileForDebug;
+    const newState = !oldState;
+    window.localStorage.setItem(
+      EditorMode.COMPILE_FOR_DEBUG_KEY,
+      String(newState)
+    );
+    this.mainMenuManager.update();
+  }
 }
 
 export namespace EditorMode {
-    export const COMPILE_FOR_DEBUG_KEY = 'arduino-compile-for-debug';
+  export const COMPILE_FOR_DEBUG_KEY = 'arduino-compile-for-debug';
 }

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,149 +1,239 @@
 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 { LibraryPackage, LibraryService } from '../../common/protocol/library-service';
+import { DialogProps } from '@theia/core/lib/browser/dialogs';
+import { AbstractDialog } from '../theia/dialogs/dialogs';
+import {
+  LibraryPackage,
+  LibraryService,
+} from '../../common/protocol/library-service';
 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 = nls.localize(
+    'arduino/library/title',
+    'Library Manager'
+  );
 
-    static WIDGET_ID = 'library-list-widget';
-    static WIDGET_LABEL = 'Library Manager';
+  constructor(
+    @inject(LibraryService) protected service: LibraryService,
+    @inject(ListItemRenderer)
+    protected itemRenderer: ListItemRenderer<LibraryPackage>
+  ) {
+    super({
+      id: LibraryListWidget.WIDGET_ID,
+      label: LibraryListWidget.WIDGET_LABEL,
+      iconClass: 'fa fa-arduino-library',
+      searchable: service,
+      installable: service,
+      itemLabel: (item: LibraryPackage) => item.name,
+      itemDeprecated: (item: LibraryPackage) => item.deprecated,
+      itemRenderer,
+    });
+  }
 
-    constructor(
-        @inject(LibraryService) protected service: LibraryService,
-        @inject(ListItemRenderer) protected itemRenderer: ListItemRenderer<LibraryPackage>) {
+  @postConstruct()
+  protected init(): void {
+    super.init();
+    this.toDispose.pushAll([
+      this.notificationCenter.onLibraryInstalled(() => this.refresh(undefined)),
+      this.notificationCenter.onLibraryUninstalled(() =>
+        this.refresh(undefined)
+      ),
+    ]);
+  }
 
-        super({
-            id: LibraryListWidget.WIDGET_ID,
-            label: LibraryListWidget.WIDGET_LABEL,
-            iconClass: 'library-tab-icon',
-            searchable: service,
-            installable: service,
-            itemLabel: (item: LibraryPackage) => item.name,
-            itemRenderer
-        });
-    }
+  protected async install({
+    item,
+    progressId,
+    version,
+  }: {
+    item: LibraryPackage;
+    progressId: string;
+    version: Installable.Version;
+  }): Promise<void> {
+    const dependencies = await this.service.listDependencies({
+      item,
+      version,
+      filterSelf: true,
+    });
+    let installDependencies: boolean | undefined = undefined;
+    if (dependencies.length) {
+      const message = document.createElement('div');
+      message.innerHTML =
+        dependencies.length === 1
+          ? 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';
+      const list = document.createElement('ul');
+      list.style.listStyleType = 'none';
+      for (const { name } of dependencies) {
+        const listItem = document.createElement('li');
+        listItem.textContent = ` - ${name}`;
+        listItem.style.fontWeight = 'bold';
+        list.appendChild(listItem);
+      }
+      listContainer.appendChild(list);
+      message.appendChild(listContainer);
+      const question = document.createElement('div');
+      question.textContent =
+        dependencies.length === 1
+          ? 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: nls.localize(
+          'arduino/library/dependenciesForLibrary',
+          'Dependencies for library {0}:{1}',
+          item.name,
+          version
+        ),
+        message,
+        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();
 
-    @postConstruct()
-    protected init(): void {
-        super.init();
-        this.toDispose.pushAll([
-            this.notificationCenter.onLibraryInstalled(() => this.refresh(undefined)),
-            this.notificationCenter.onLibraryUninstalled(() => this.refresh(undefined)),
-        ]);
-    }
-
-    protected async install({ item, version }: { item: LibraryPackage, version: Installable.Version }): Promise<void> {
-        const dependencies = await this.service.listDependencies({ item, version, filterSelf: true });
-        let installDependencies: boolean | undefined = undefined;
-        if (dependencies.length) {
-            const message = document.createElement('div');
-            message.innerHTML = `The library <b>${item.name}:${version}</b> needs ${dependencies.length === 1 ? 'another dependency' : 'some other dependencies'} currently not installed:`;
-            const listContainer = document.createElement('div');
-            listContainer.style.maxHeight = '300px';
-            listContainer.style.overflowY = 'auto';
-            const list = document.createElement('ul');
-            list.style.listStyleType = 'none';
-            for (const { name } of dependencies) {
-                const listItem = document.createElement('li');
-                listItem.textContent = ` - ${name}`;
-                listItem.style.fontWeight = 'bold';
-                list.appendChild(listItem);
-            }
-            listContainer.appendChild(list);
-            message.appendChild(listContainer);
-            const question = document.createElement('div');
-            question.textContent = `Would you like to install ${dependencies.length === 1 ? 'the missing dependency' : 'all the missing dependencies'}?`;
-            message.appendChild(question);
-            const result = await new MessageBoxDialog({
-                title: `Dependencies for library ${item.name}:${version}`,
-                message,
-                buttons: [
-                    'Install all',
-                    `Install ${item.name} only`,
-                    'Cancel'
-                ],
-                maxWidth: 740 // Aligned with `settings-dialog.css`.
-            }).open();
-
-            if (result) {
-                const { response } = result;
-                if (response === 0) { // All
-                    installDependencies = true;
-                } else if (response === 1) { // Current only
-                    installDependencies = false;
-                }
-            }
-        } else {
-            // The lib does not have any dependencies.
-            installDependencies = false;
-        }
-
-        if (typeof installDependencies === 'boolean') {
-            return this.service.install({ item, version, installDependencies });
+      if (result) {
+        const { response } = result;
+        if (response === 0) {
+          // All
+          installDependencies = true;
+        } else if (response === 1) {
+          // Current only
+          installDependencies = false;
         }
+      }
+    } else {
+      // The lib does not have any dependencies.
+      installDependencies = false;
     }
 
+    if (typeof installDependencies === 'boolean') {
+      await this.service.install({
+        item,
+        version,
+        progressId,
+        installDependencies,
+      });
+      this.messageService.info(
+        nls.localize(
+          'arduino/library/installedSuccessfully',
+          'Successfully installed library {0}:{1}',
+          item.name,
+          version
+        ),
+        { timeout: 3000 }
+      );
+    }
+  }
+
+  protected async uninstall({
+    item,
+    progressId,
+  }: {
+    item: LibraryPackage;
+    progressId: string;
+  }): Promise<void> {
+    await super.uninstall({ item, progressId });
+    this.messageService.info(
+      nls.localize(
+        'arduino/library/uninstalledSuccessfully',
+        'Successfully uninstalled library {0}:{1}',
+        item.name,
+        item.installedVersion!
+      ),
+      { timeout: 3000 }
+    );
+  }
 }
 
 class MessageBoxDialog extends AbstractDialog<MessageBoxDialog.Result> {
+  protected response: number;
 
-    protected response: number;
+  constructor(protected readonly options: MessageBoxDialog.Options) {
+    super(options);
+    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);
+      this.toDisposeOnDetach.push(
+        addEventListener(button, 'click', () => {
+          this.response = index;
+          this.accept();
+        })
+      );
+    });
+  }
 
-    constructor(protected readonly options: MessageBoxDialog.Options) {
-        super(options);
-        this.contentNode.appendChild(this.createMessageNode(this.options.message));
-        (options.buttons || ['OK']).forEach((text, index) => {
-            const button = this.createButton(text);
-            button.classList.add(index === 0 ? 'main' : 'secondary');
-            this.controlPanel.appendChild(button);
-            this.toDisposeOnDetach.push(addEventListener(button, 'click', () => {
-                this.response = index;
-                this.accept();
-            }));
-        });
-    }
-
-    protected onCloseRequest(message: Message): void {
-        super.onCloseRequest(message);
-        this.accept();
-    }
-
-    get value(): MessageBoxDialog.Result {
-        return { response: this.response };
-    }
-
-    protected createMessageNode(message: string | HTMLElement): HTMLElement {
-        if (typeof message === 'string') {
-            const messageNode = document.createElement('div');
-            messageNode.textContent = message;
-            return messageNode;
-        }
-        return message;
-    }
-
-    protected handleEnter(event: KeyboardEvent): boolean | void {
-        this.response = 0;
-        super.handleEnter(event);
+  protected onCloseRequest(message: Message): void {
+    super.onCloseRequest(message);
+    this.accept();
+  }
+
+  get value(): MessageBoxDialog.Result {
+    return { response: this.response };
+  }
+
+  protected createMessageNode(message: string | HTMLElement): HTMLElement {
+    if (typeof message === 'string') {
+      const messageNode = document.createElement('div');
+      messageNode.textContent = message;
+      return messageNode;
     }
+    return message;
+  }
 
+  protected handleEnter(event: KeyboardEvent): boolean | void {
+    this.response = 0;
+    super.handleEnter(event);
+  }
 }
 export namespace MessageBoxDialog {
-    export interface Options extends DialogProps {
-        /**
-         * When empty, `['OK']` will be inferred.
-         */
-        buttons?: string[];
-        message: string | HTMLElement;
-    }
-    export interface Result {
-        /**
-         * The index of `buttons` that was clicked.
-         */
-        readonly response: number;
-    }
+  export interface Options extends DialogProps {
+    /**
+     * When empty, `['OK']` will be inferred.
+     */
+    buttons?: string[];
+    message: string | HTMLElement;
+  }
+  export interface Result {
+    /**
+     * The index of `buttons` that was clicked.
+     */
+    readonly response: number;
+  }
 }

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

@@ -4,35 +4,40 @@ 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 extends AbstractViewContribution<LibraryListWidget> implements FrontendApplicationContribution {
+export class LibraryListWidgetFrontendContribution
+  extends AbstractViewContribution<LibraryListWidget>
+  implements FrontendApplicationContribution
+{
+  constructor() {
+    super({
+      widgetId: LibraryListWidget.WIDGET_ID,
+      widgetName: LibraryListWidget.WIDGET_LABEL,
+      defaultWidgetOptions: {
+        area: 'left',
+        rank: 3,
+      },
+      toggleCommandId: `${LibraryListWidget.WIDGET_ID}:toggle`,
+      toggleKeybinding: 'CtrlCmd+Shift+I',
+    });
+  }
 
-    constructor() {
-        super({
-            widgetId: LibraryListWidget.WIDGET_ID,
-            widgetName: LibraryListWidget.WIDGET_LABEL,
-            defaultWidgetOptions: {
-                area: 'left',
-                rank: 700
-            },
-            toggleCommandId: `${LibraryListWidget.WIDGET_ID}:toggle`,
-            toggleKeybinding: 'CtrlCmd+Shift+I'
-        });
+  async initializeLayout(): Promise<void> {
+    this.openView();
+  }
+
+  registerMenus(menus: MenuModelRegistry): void {
+    if (this.toggleCommand) {
+      menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
+        commandId: this.toggleCommand.id,
+        label: nls.localize(
+          'arduino/library/manageLibraries',
+          'Manage Libraries...'
+        ),
+        order: '3',
+      });
     }
-
-    async initializeLayout(): Promise<void> {
-        this.openView();
-    }
-
-    registerMenus(menus: MenuModelRegistry): void {
-        if (this.toggleCommand) {
-            menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
-                commandId: this.toggleCommand.id,
-                label: 'Manage Libraries...',
-                order: '3'
-            });
-        }
-    }
-
+  }
 }

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

@@ -0,0 +1,160 @@
+import { inject, injectable } from 'inversify';
+import { URI as Uri } from 'vscode-uri';
+import URI from '@theia/core/lib/common/uri';
+import { Deferred } from '@theia/core/lib/common/promise-util';
+import {
+  FileSystemProvider,
+  FileSystemProviderError,
+  FileSystemProviderErrorCode,
+} from '@theia/filesystem/lib/common/files';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { DelegatingFileSystemProvider } from '@theia/filesystem/lib/common/delegating-file-system-provider';
+import {
+  FileService,
+  FileServiceContribution,
+} from '@theia/filesystem/lib/browser/file-service';
+import { AuthenticationClientService } from '../auth/authentication-client-service';
+import { AuthenticationSession } from '../../common/protocol/authentication-service';
+import { ConfigService } from '../../common/protocol';
+
+export namespace LocalCacheUri {
+  export const scheme = 'arduino-local-cache';
+  export const root = new URI(
+    Uri.parse('/').with({ scheme, authority: 'create' })
+  );
+}
+
+@injectable()
+export class LocalCacheFsProvider
+  implements FileServiceContribution, DelegatingFileSystemProvider.URIConverter
+{
+  @inject(ConfigService)
+  protected readonly configService: ConfigService;
+
+  @inject(AuthenticationClientService)
+  protected readonly authenticationService: AuthenticationClientService;
+
+  // TODO: do we need this? Cannot we `await` on the `init` call from `registerFileSystemProviders`?
+  readonly ready = new Deferred<void>();
+
+  private _localCacheRoot: URI;
+
+  registerFileSystemProviders(fileService: FileService): void {
+    fileService.onWillActivateFileSystemProvider(async (event) => {
+      if (event.scheme === LocalCacheUri.scheme) {
+        event.waitUntil(
+          (async () => {
+            this.init(fileService);
+            const provider = await this.createProvider(fileService);
+            fileService.registerProvider(LocalCacheUri.scheme, provider);
+          })()
+        );
+      }
+    });
+  }
+
+  to(resource: URI): URI | undefined {
+    const relativePath = LocalCacheUri.root.relative(resource);
+    if (relativePath) {
+      return this.currentUserUri.resolve(relativePath).normalizePath();
+    }
+    return undefined;
+  }
+
+  from(resource: URI): URI | undefined {
+    const relativePath = this.currentUserUri.relative(resource);
+    if (relativePath) {
+      return LocalCacheUri.root.resolve(relativePath);
+    }
+    return undefined;
+  }
+
+  protected async createProvider(
+    fileService: FileService
+  ): Promise<FileSystemProvider> {
+    const delegate = await fileService.activateProvider('file');
+    await this.ready.promise;
+    return new DelegatingFileSystemProvider(
+      delegate,
+      {
+        uriConverter: this,
+      },
+      new DisposableCollection(
+        delegate.watch(this.localCacheRoot, {
+          excludes: [],
+          recursive: true,
+        })
+      )
+    );
+  }
+
+  protected async init(fileService: FileService): Promise<void> {
+    const config = await this.configService.getConfiguration();
+    this._localCacheRoot = new URI(config.dataDirUri);
+    for (const segment of ['RemoteSketchbook', 'ArduinoCloud']) {
+      this._localCacheRoot = this._localCacheRoot.resolve(segment);
+      await fileService.createFolder(this._localCacheRoot);
+    }
+    this.session(fileService).then(() => this.ready.resolve());
+    this.authenticationService.onSessionDidChange(async (session) => {
+      if (session) {
+        await this.ensureExists(session, fileService);
+      }
+    });
+  }
+
+  public get currentUserUri(): URI {
+    const { session } = this.authenticationService;
+    if (!session) {
+      throw new FileSystemProviderError(
+        'Not logged in.',
+        FileSystemProviderErrorCode.NoPermissions
+      );
+    }
+    return this.toUri(session);
+  }
+
+  private get localCacheRoot(): URI {
+    return this._localCacheRoot;
+  }
+
+  private async session(
+    fileService: FileService
+  ): Promise<AuthenticationSession> {
+    return new Promise<AuthenticationSession>(async (resolve) => {
+      const { session } = this.authenticationService;
+      if (session) {
+        await this.ensureExists(session, fileService);
+        resolve(session);
+        return;
+      }
+      const toDispose = new DisposableCollection();
+      toDispose.push(
+        this.authenticationService.onSessionDidChange(async (session) => {
+          if (session) {
+            await this.ensureExists(session, fileService);
+            toDispose.dispose();
+            resolve(session);
+          }
+        })
+      );
+    });
+  }
+
+  private async ensureExists(
+    session: AuthenticationSession,
+    fileService: FileService
+  ): Promise<URI> {
+    const uri = this.toUri(session);
+    const exists = await fileService.exists(uri);
+    if (!exists) {
+      await fileService.createFolder(uri);
+    }
+    return uri;
+  }
+
+  private toUri(session: AuthenticationSession): URI {
+    // Hack: instead of getting the UUID only, we get `auth0|UUID` after the authentication. `|` cannot be part of filesystem path or filename.
+    return this._localCacheRoot.resolve(session.id.split('|')[1]);
+  }
+}

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

@@ -1,122 +1,208 @@
 import { isOSX } from '@theia/core/lib/common/os';
 import { CommonMenus } from '@theia/core/lib/browser/common-frontend-contribution';
-import { MAIN_MENU_BAR, MenuModelRegistry, MenuNode, MenuPath, SubMenuOptions } from '@theia/core/lib/common/menu';
+import {
+  MAIN_MENU_BAR,
+  MenuModelRegistry,
+  MenuNode,
+  MenuPath,
+  SubMenuOptions,
+} from '@theia/core/lib/common/menu';
 
 export namespace ArduinoMenus {
+  // Main menu
+  // -- File
+  export const FILE__SKETCH_GROUP = [...CommonMenus.FILE, '0_sketch'];
+  export const FILE__PRINT_GROUP = [...CommonMenus.FILE, '1_print'];
+  // XXX: on macOS, the "Preferences" and "Advanced" group is not under `File`
+  // The empty path ensures no top level menu is created for the preferences, even if they contains sub menus
+  export const FILE__PREFERENCES_GROUP = [
+    ...(isOSX ? [''] : CommonMenus.FILE),
+    '2_preferences',
+  ];
+  export const FILE__ADVANCED_GROUP = [
+    ...(isOSX ? [''] : CommonMenus.FILE),
+    '3_advanced',
+  ];
+  export const FILE__ADVANCED_SUBMENU = [
+    ...FILE__ADVANCED_GROUP,
+    '0_advanced_sub',
+  ];
 
-    // Main menu
-    // -- File
-    export const FILE__SKETCH_GROUP = [...CommonMenus.FILE, '0_sketch'];
-    export const FILE__PRINT_GROUP = [...CommonMenus.FILE, '1_print'];
-    // XXX: on macOS, the settings group is not under `File`
-    export const FILE__SETTINGS_GROUP = [...(isOSX ? MAIN_MENU_BAR : CommonMenus.FILE), '2_settings'];
-    export const FILE__QUIT_GROUP = [...CommonMenus.FILE, '3_quit'];
+  export const FILE__QUIT_GROUP = [...CommonMenus.FILE, '3_quit'];
 
-    // -- File / Open Recent
-    export const FILE__OPEN_RECENT_SUBMENU = [...FILE__SKETCH_GROUP, '0_open_recent'];
+  // -- File / Open Recent
+  export const FILE__OPEN_RECENT_SUBMENU = [
+    ...FILE__SKETCH_GROUP,
+    '0_open_recent',
+  ];
 
-    // -- File / Sketchbook
-    export const FILE__SKETCHBOOK_SUBMENU = [...FILE__SKETCH_GROUP, '1_sketchbook'];
+  // -- File / Sketchbook
+  export const FILE__SKETCHBOOK_SUBMENU = [
+    ...FILE__SKETCH_GROUP,
+    '1_sketchbook',
+  ];
 
-    // -- File / Examples
-    export const FILE__EXAMPLES_SUBMENU = [...FILE__SKETCH_GROUP, '2_examples'];
-    export const EXAMPLES__BUILT_IN_GROUP = [...FILE__EXAMPLES_SUBMENU, '0_built_ins'];
-    export const EXAMPLES__ANY_BOARD_GROUP = [...FILE__EXAMPLES_SUBMENU, '1_any_board'];
-    export const EXAMPLES__CURRENT_BOARD_GROUP = [...FILE__EXAMPLES_SUBMENU, '2_current_board'];
-    export const EXAMPLES__USER_LIBS_GROUP = [...FILE__EXAMPLES_SUBMENU, '3_user_libs'];
+  // -- File / Examples
+  export const FILE__EXAMPLES_SUBMENU = [...FILE__SKETCH_GROUP, '2_examples'];
+  export const EXAMPLES__BUILT_IN_GROUP = [
+    ...FILE__EXAMPLES_SUBMENU,
+    '0_built_ins',
+  ];
+  export const EXAMPLES__ANY_BOARD_GROUP = [
+    ...FILE__EXAMPLES_SUBMENU,
+    '1_any_board',
+  ];
+  export const EXAMPLES__CURRENT_BOARD_GROUP = [
+    ...FILE__EXAMPLES_SUBMENU,
+    '2_current_board',
+  ];
+  export const EXAMPLES__USER_LIBS_GROUP = [
+    ...FILE__EXAMPLES_SUBMENU,
+    '3_user_libs',
+  ];
 
-    // -- Edit
-    // `Copy`, `Copy to Forum`, `Paste`, etc.
-    // Note: `1_undo` is the first group from Theia, we start with `2`
-    export const EDIT__TEXT_CONTROL_GROUP = [...CommonMenus.EDIT, '2_text_control'];
-    // `Comment/Uncomment`, etc.
-    export const EDIT__CODE_CONTROL_GROUP = [...CommonMenus.EDIT, '3_code_control'];
-    export const EDIT__FONT_CONTROL_GROUP = [...CommonMenus.EDIT, '4_font_control'];
-    export const EDIT__FIND_GROUP = [...CommonMenus.EDIT, '5_find'];
+  // -- Edit
+  // `Copy`, `Copy to Forum`, `Paste`, etc.
+  // Note: `1_undo` is the first group from Theia, we start with `2`
+  export const EDIT__TEXT_CONTROL_GROUP = [
+    ...CommonMenus.EDIT,
+    '2_text_control',
+  ];
+  // `Comment/Uncomment`, etc.
+  export const EDIT__CODE_CONTROL_GROUP = [
+    ...CommonMenus.EDIT,
+    '3_code_control',
+  ];
+  export const EDIT__FONT_CONTROL_GROUP = [
+    ...CommonMenus.EDIT,
+    '4_font_control',
+  ];
+  export const EDIT__FIND_GROUP = [...CommonMenus.EDIT, '5_find'];
 
-    // -- Sketch
-    export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
-    export const SKETCH__MAIN_GROUP = [...SKETCH, '0_main'];
-    export const SKETCH__UTILS_GROUP = [...SKETCH, '1_utils'];
+  // -- Sketch
+  export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
+  export const SKETCH__MAIN_GROUP = [...SKETCH, '0_main'];
+  export const SKETCH__UTILS_GROUP = [...SKETCH, '1_utils'];
 
-    // -- Tools
-    export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
-    // `Auto Format`, `Library Manager...`, `Boards Manager...`
-    export const TOOLS__MAIN_GROUP = [...TOOLS, '0_main'];
-    // `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`
-    export const TOOLS__BOARD_SETTINGS_GROUP = [...TOOLS, '3_board_settings'];
+  // -- Tools
+  export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
+  // `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`
+  export const TOOLS__BOARD_SETTINGS_GROUP = [...TOOLS, '3_board_settings'];
 
-    // -- Help
-    // `Getting Started`, `Environment`, `Troubleshooting`, etc.
-    export const HELP__MAIN_GROUP = [...CommonMenus.HELP, '0_main'];
-    // `Find in reference`, `FAQ`, etc.
-    export const HELP__FIND_GROUP = [...CommonMenus.HELP, '1_find'];
-    // `Advanced Mode`.
-    // XXX: this will be removed.
-    export const HELP__CONTROL_GROUP = [...CommonMenus.HELP, '2_control'];
-    // `About` group
-    // XXX: on macOS, the about group is not under `Help`
-    export const HELP__ABOUT_GROUP = [...(isOSX ? MAIN_MENU_BAR : CommonMenus.HELP), '999_about'];
+  // -- Help
+  // `Getting Started`, `Environment`, `Troubleshooting`, etc.
+  export const HELP__MAIN_GROUP = [...CommonMenus.HELP, '0_main'];
+  // `Find in reference`, `FAQ`, etc.
+  export const HELP__FIND_GROUP = [...CommonMenus.HELP, '1_find'];
+  // `Advanced Mode`.
+  // XXX: this will be removed.
+  export const HELP__CONTROL_GROUP = [...CommonMenus.HELP, '2_control'];
+  // `About` group
+  // XXX: on macOS, the about group is not under `Help`
+  export const HELP__ABOUT_GROUP = [
+    ...(isOSX ? MAIN_MENU_BAR : CommonMenus.HELP),
+    '999_about',
+  ];
 
-    // ------------
+  // ------------
 
-    // Context menus
-    // -- Open
-    export const OPEN_SKETCH__CONTEXT = ['arduino-open-sketch--context'];
-    export const OPEN_SKETCH__CONTEXT__OPEN_GROUP = [...OPEN_SKETCH__CONTEXT, '0_open'];
-    export const OPEN_SKETCH__CONTEXT__RECENT_GROUP = [...OPEN_SKETCH__CONTEXT, '1_recent'];
-    export const OPEN_SKETCH__CONTEXT__EXAMPLES_GROUP = [...OPEN_SKETCH__CONTEXT, '2_examples'];
+  // Context menus
+  // -- Open
+  export const OPEN_SKETCH__CONTEXT = ['arduino-open-sketch--context'];
+  export const OPEN_SKETCH__CONTEXT__OPEN_GROUP = [
+    ...OPEN_SKETCH__CONTEXT,
+    '0_open',
+  ];
+  export const OPEN_SKETCH__CONTEXT__RECENT_GROUP = [
+    ...OPEN_SKETCH__CONTEXT,
+    '1_recent',
+  ];
+  export const OPEN_SKETCH__CONTEXT__EXAMPLES_GROUP = [
+    ...OPEN_SKETCH__CONTEXT,
+    '2_examples',
+  ];
 
-    // -- Sketch control
-    export const SKETCH_CONTROL__CONTEXT = ['arduino-sketch-control--context'];
-    // `New Tab`, `Rename`, `Delete`
-    export const SKETCH_CONTROL__CONTEXT__MAIN_GROUP = [...SKETCH_CONTROL__CONTEXT, '0_main'];
-    // `Previous Tab`, `Next Tab`
-    export const SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP = [...SKETCH_CONTROL__CONTEXT, '1_navigation'];
-    // Sketch files opened in editors
-    export const SKETCH_CONTROL__CONTEXT__RESOURCES_GROUP = [...SKETCH_CONTROL__CONTEXT, '2_resources'];
+  // -- Sketch control
+  export const SKETCH_CONTROL__CONTEXT = ['arduino-sketch-control--context'];
+  // `New Tab`, `Rename`, `Delete`
+  export const SKETCH_CONTROL__CONTEXT__MAIN_GROUP = [
+    ...SKETCH_CONTROL__CONTEXT,
+    '0_main',
+  ];
+  // `Previous Tab`, `Next Tab`
+  export const SKETCH_CONTROL__CONTEXT__NAVIGATION_GROUP = [
+    ...SKETCH_CONTROL__CONTEXT,
+    '1_navigation',
+  ];
+  // Sketch files opened in editors
+  export const SKETCH_CONTROL__CONTEXT__RESOURCES_GROUP = [
+    ...SKETCH_CONTROL__CONTEXT,
+    '2_resources',
+  ];
 
+  // -- ROOT SSL CERTIFICATES
+  export const ROOT_CERTIFICATES__CONTEXT = [
+    'arduino-root-certificates--context',
+  ];
 }
 
 /**
  * This is a hack. It removes a submenu with all its children if any.
  * Theia cannot dispose submenu entries with a proper API: https://github.com/eclipse-theia/theia/issues/7299
  */
-export function unregisterSubmenu(menuPath: string[], menuRegistry: MenuModelRegistry): void {
-    if (menuPath.length < 2) {
-        throw new Error(`Expected at least two item as a menu-path. Got ${JSON.stringify(menuPath)} instead.`);
-    }
-    const toRemove = menuPath[menuPath.length - 1];
-    const parentMenuPath = menuPath.slice(0, menuPath.length - 1);
-    // This is unsafe. Calling `getMenu` with a non-existing menu-path will result in a new menu creation.
-    // https://github.com/eclipse-theia/theia/issues/7300
-    const parent = menuRegistry.getMenu(parentMenuPath);
-    const index = parent.children.findIndex(({ id }) => id === toRemove);
-    if (index === -1) {
-        throw new Error(`Could not find menu with menu-path: ${JSON.stringify(menuPath)}.`);
-    }
-    (parent.children as Array<MenuNode>).splice(index, 1);
+export function unregisterSubmenu(
+  menuPath: string[],
+  menuRegistry: MenuModelRegistry
+): void {
+  if (menuPath.length < 2) {
+    throw new Error(
+      `Expected at least two item as a menu-path. Got ${JSON.stringify(
+        menuPath
+      )} instead.`
+    );
+  }
+  const toRemove = menuPath[menuPath.length - 1];
+  const parentMenuPath = menuPath.slice(0, menuPath.length - 1);
+  // This is unsafe. Calling `getMenu` with a non-existing menu-path will result in a new menu creation.
+  // https://github.com/eclipse-theia/theia/issues/7300
+  const parent = menuRegistry.getMenu(parentMenuPath);
+  const index = parent.children.findIndex(({ id }) => id === toRemove);
+  if (index === -1) {
+    throw new Error(
+      `Could not find menu with menu-path: ${JSON.stringify(menuPath)}.`
+    );
+  }
+  (parent.children as Array<MenuNode>).splice(index, 1);
 }
 
 /**
  * Special menu node that is not backed by any commands and is always disabled.
  */
 export class PlaceholderMenuNode implements MenuNode {
+  constructor(
+    protected readonly menuPath: MenuPath,
+    readonly label: string,
+    protected options: SubMenuOptions = { order: '0' }
+  ) {}
 
-    constructor(protected readonly menuPath: MenuPath, readonly label: string, protected options: SubMenuOptions = { order: '0' }) { }
+  get icon(): string | undefined {
+    return this.options?.iconClass;
+  }
 
-    get icon(): string | undefined {
-        return this.options?.iconClass;
-    }
-
-    get sortString(): string {
-        return this.options?.order || this.label;
-    }
-
-    get id(): string {
-        return [...this.menuPath, 'placeholder'].join('-');
-    }
+  get sortString(): string {
+    return this.options?.order || this.label;
+  }
 
+  get id(): string {
+    return [...this.menuPath, 'placeholder'].join('-');
+  }
 }

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

@@ -1,277 +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: boolean = 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)}`;
-        }
-    }
-
-}