[VSC-1478] Disable cmds for Codespaces and redirect Flash monitor to Web extension

[brianignacio5]

… web extension

Description

Add UIKind.Web validation for Codespaces to disable commands not available in Browser or Codespaces and redirect Flash and monitor commands to ESP-IDF Web extension

Type of change

• New feature (non-breaking change which adds functionality)

Steps to test this pull request

Open VSCode Extension codespace test in Codespaces. Uninstall the ESP-IDF extension that was pre installed. Load this PR vsix installer into the current Codespaces directory and install vsix from there to Codespaces (install from local doesn't work for me).

1. Click on ESP-IDF: Flash your project or Flash icon from status bar, the extension will call the ESP-IDF Web extension flash command. Same for ESP-IDF: Monitor your device to call web extension monitor command.
2. Click on any commands that should work in browser like ESP-IDF: Build, flash and monitor. You should receive a notification error message that command is not available in Web.
3. Observe results.

• Expected behaviour:

• Expected output:

How has this been tested?

Manual testing using steps above.

Test Configuration:

• ESP-IDF Version: 5.3
• OS (Windows,Linux and macOS): Codespaces

Checklist

• PR Self Reviewed
• Applied Code formatting
• Added Documentation
• Added Unit Test
• Verified on all platforms - Windows,Linux and macOS

[github-actions]

Download the artifacts for this pull request:

• esp-idf-extension.vsix.zip
  Espressif docs preview

[brianignacio5]

PTAL @radurentea @Fabricio-ESP

[Fabricio-ESP]

Tested on Windows and Linux.
The icons for the web extension replaces the icons from the IDF extension on the status bar. The commands are successfully forwarded to the web extension. Unsupported commands properly shows pop up information message that the command is not supported.

On Windows it is still not possible to flash the device. The extension does not properly resolve the path for the build artifacts, showing the error:

This works as expected on Ubuntu, so a limitation on Windows on how to resolve the workspace page.

Adding this to the .vscode/settings.json allows successfully flashing of the device.

"idf.buildPath" : "/workspaces/vscode-extension-codespace-test/build"

[radurentea]

I have tested on Mac, but I was not able to flash the project because I was not able to select a serial port.

Steps to reproduce:

1. I've uninstalled the extension that came with the codespace and installed from local (I've also tried it with first uploading the .vsix file inside the codespace)
2. Select esp32h2 as device

• The flash, select a serial port icons and other are not visible in the status bar
  

I will try again tomorrow, maybe I've misconfigured something or I've left the codespace sit in my tab for too long before testing.

[Fabricio-ESP]

@radurentea Did you install the web extension in the browser? When I open the codespace in the browser, along with installing the vsix I need to select "install in the browser" in the web extension.

Oh Oh, note, @brianignacio5 the bot did not update the artifact in the PR after your last commit, we need to download the artifact directly from the CI action: https://github.com/espressif/vscode-esp-idf-extension/actions/runs/11303927905?pr=1297

[radurentea]

Thank you @Fabricio-ESP, I've made it work, the problem I think it was a combination of bad .vsix and probably I did not press the "install in the browser" for the web extension.

I've tested on Mac. The commands work as expected, but it seems the serial port has some strange behavior:

It doesn't appear in the status bar, until I flash or monitor the device

It seems that for each run of flashing or monitoring, we spawn the "serial port" status item
This is a screenshot after flashing and monitoring.

If I continue to use the commands mentioned, new "serial port" status item will appear.

[brianignacio5]

@radurentea Did you install the web extension in the browser? When I open the codespace in the browser, along with installing the vsix I need to select "install in the browser" in the web extension.

Oh Oh, note, @brianignacio5 the bot did not update the artifact in the PR after your last commit, we need to download the artifact directly from the CI action: https://github.com/espressif/vscode-esp-idf-extension/actions/runs/11303927905?pr=1297

PR Comment bug fix #1328

It doesn't appear in the status bar, until I flash or monitor the device

Could you describe the steps to reproduce this behavior ? Which commands did you use ?

Both of these issues seems to be IDF Web extension related. Are the functionality in this PR (redirects commands to IDF Web extension command) work ? If that is the case we should proceed with review.

Regarding IDF Web extension, I'll create an issue in the repository and add a fix there. Testing, unfortunately can't be done in Codespaces as far as I know. Need to test locally as described in IDF Web extension readme.

[radurentea]

Hi @brianignacio5, @Fabricio-ESP,

I agree that we can move forwards with the PR, since it's not related to the changes.

Steps to reproduce the issues with multiple serial ports items in the status bar (I used Mac M1 with Sequoia 15.0.1):

1. Have board connected to the computer (in my case esp32h2 connected via UART port)
2. Use the example codespace (Serial port is visible)
3. Uninstall ESP-IDF
4. Drag .vsix file (https://github.com/espressif/vscode-esp-idf-extension/actions/runs/11303927905?pr=1297) into the files of the project
5. Install extension using .vsix file (after installation of the extension, serial port is not visible in the status bar)
6. Install ESP-IDF Web by using "install in the browser"
7. Trying to use command palette and using "Select port" web-ide command does not work, only after a refresh of the web page
8. Serial port status bar icon appears after using the "Select port" web-ide command
9. If I flash the device using the status bar icon an extra serial port status bar item appears (so I will have 2 at this step)
10. I've tried using the web-ide flash command from command palette to see if another serial port appears and it does (currently 3 serial ports items in the status bar)
11. same behaviour of extra serial port status bar items appearing for monitor command as well

[Fabricio-ESP]

@brianignacio5
Should we create a ticket to investigate the serial port entries from the web extension? If you create such ticket, please add reference here. Thanks.

[brianignacio5]

espressif/vscode-esp-idf-web-extension#9 @Fabricio-ESP

[radurentea]

LGTM