Desktop support for USB, HID and Serial device access

[thegecko]

This is a new feature to add USB, HID and Serial device access to the desktop by extending the existing WebUSB, WebHID and WebSerial functionality already offered in the web version #152310.

Since Electron version 25, Web-* device access has been possible using the functionality described here: https://www.electronjs.org/docs/latest/tutorial/devices

This ability is awesome because it allows access to functionality in Chrome already shipped as part of VS Code and means extension developers no longer have to include external packages such as node-usb or SerialPort. In many cases this approach should be more stable and reliable, too (e.g. chrome uses winusb for device access over libusb as used in node-usb).

To implement this addition, I've wired up a QuickPick dropdown for the user to choose the requested device leveraging Electron's APIs. Unfortunately the cleanest way I've been able to find to communicate between the electron-main and browser process is via the globals API. Happy to hear of a better way.

USB Selector:

Serial Selector:

HID Selector:

Please note: As this utilises the existing features in chrome, obtaining a concrete device after authorising it is only possible in the desktop web extension host. Therefore this feature is only available to pure web extensions (those without a main entrypoint in package.json).

Notes on creating an extension to test this

To test this, create a VS Code Web Extension. This will create an extension which runs in the browser extensionHost, the only host which can see the browser navigator object.

Ensure there is only a browser entrypoint. Including a main entrypoint will run the extension on the local extensionHost.

Ensure there is no extensionKind specified. the UI extensionKind leads to errors with commands not being found.

In the VS Code extension, call one of the existing experimental commands for requesting device access:

• workbench.experimental.requestUsbDevice
• workbench.experimental.requestSerialPort
• workbench.experimental.requestHidDevice

This returns a string ID for the device (and authorizes the device for use).

Use this ID to then lookup the concrete device you want to use in the the relevant navigator object:

• navigator.usb.getDevices()
• navigator.hid.getDevices()
• navigator.serial.getPorts()

[thegecko]

Anything required to progress this PR?

[bpasero]

Is there an associated issue with sufficient upvotes and motion to justify this change? And an explainer about the scenarios this would enable?

[thegecko]

Is there an associated issue with sufficient upvotes and motion to justify this change? And an explainer about the scenarios this would enable?

Issue raised here: #236450

[bpasero]

There are many conflicts in this PR btw.

[thegecko]

There are many conflicts in this PR btw.

TBF, there weren't conflicts when I opened it a year ago and I got tired of keeping it up to date with no feedback.

If there is interest in this feature I'll revisit the PR.

[thegecko]

There are many conflicts in this PR btw.

Resolved

[thegecko]

The electron events (select-usb-device, select-hid-device, select-serial-port) which handle calls to the navigator device requests need to be wired into a UI for selection.

As these run in different parts of VS Code, I've had to implement an IPC channel to send a device list for rendering and return a selected item. There isn't an existing pattern to do this, so advice on my proposal would be appreciated.