Improve Web Serial API support (#558)

Improved support for Web Serial API.

* Now the interaction between the client library (e.g. the Arduino `arduino-chromeos-uploader` library) has been simplified.

* Added a parameter to pass dialog customization to the web serial api uploader library

* Removed `connectToSerialDevice` function from the Web Serial API daemon.

* Added  functionality to write on the serial port

* Added file name to the uploading process. The file name is used in log messages

Author: csarnataro

CHANGELOG.md

@@ -1,7 +1,23 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
-## [2.10.0] - 2022-09-08
+## [2.11.0] - 2022-09-27
+The main goal of this release is to improve support for the Web Serial API on ChromeOS.
+Other platforms should not be affected.
+
+### Changed
+- When using Web Serial API, the interactions between the client library
+  (as an example, the Arduino `arduino-chromeos-uploader` libray) has been simplified.
+- A new parameter `dialogCustomizations` has been added to the upload functionality. It's used
+  to provide custom confirmation dialogs when using the Web Serial API.
+  It has no effect with other daemons.
+
+### Removed
+- `cdcReset` functionality, now it's embedded in the `upload` functionality
+  in the Web Serial daemon.
+### Changed
+
+## [2.10.1] - 2022-09-08
 
 ### Changed
 - Fixed a bug released in 2.9.1 caused by the wrong assumption that the build filename is always at the end of the command line. This fix makes the library backward compatible with older ESP boards.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "arduino-create-agent-js-client",
-  "version": "2.10.1",
+  "version": "2.11.0-beta.1",
   "description": "JS module providing discovery of the Arduino Create Plugin and communication with it",
   "main": "lib/index.js",
   "module": "es/index.js",

src/chrome-app-daemon.js

@@ -237,7 +237,7 @@ export default class ChromeAppDaemon extends Daemon {
    */
   _upload(uploadPayload, uploadCommandInfo) {
     const {
-      board, port, commandline, data
+      board, port, commandline, data, filename
     } = uploadPayload;
     const extrafiles = uploadCommandInfo && uploadCommandInfo.files && Array.isArray(uploadCommandInfo.files) ? uploadCommandInfo.files : [];
     try {
@@ -250,6 +250,7 @@ export default class ChromeAppDaemon extends Daemon {
             commandline,
             data,
             token: token.token,
+            filename,
             extrafiles
           }
         });

src/daemon.js

@@ -115,8 +115,12 @@ export default class Daemon {
    * @param {string} sketchName
    * @param {Object} compilationResult
    * @param {boolean} verbose
+   * @param {any[]} dialogCustomizations Optional - Used in Web Serial API to customize the permission dialogs.
+   *        It's an array because the Web Serial API library can use more than one dialog, e.g. one to
+   *        ask permission and one to give instruction to save an UF2 file.
+   *        It's called 'customizations' because the library already provides a basic non-styled dialog.
    */
-  uploadSerial(target, sketchName, compilationResult, verbose = true) {
+  uploadSerial(target, sketchName, compilationResult, verbose = true, dialogCustomizations) {
     this.uploadingPort = target.port;
     this.uploading.next({ status: this.UPLOAD_IN_PROGRESS, msg: 'Upload started' });
     this.serialDevicesBeforeUpload = this.devicesList.getValue().serial;
@@ -142,7 +146,8 @@ export default class Daemon {
           commandline: uploadCommandInfo.commandline,
           filename: `${sketchName}.${ext}`,
           hex: data, // For desktop agent
-          data // For chromeOS plugin, consider to align this
+          data, // For chromeOS plugin, consider to align this
+          dialogCustomizations // used only in Web Serial API uploader
         };
 
         this.uploadingDone.subscribe(() => {

src/web-serial-daemon.js

@@ -68,23 +68,6 @@ export default class WebSerialDaemon extends Daemon {
   }
 
   connectToChannel() {
-    this.channel.onMessage(message => {
-      if (message.version) {
-        this.agentInfo = message.version;
-        this.agentFound.next(true);
-        this.channelOpen.next(true);
-      }
-      else {
-        this.appMessages.next(message);
-      }
-    });
-    this.channel.onDisconnect(() => {
-      this.channelOpen.next(false);
-      this.agentFound.next(false);
-    });
-  }
-
-  _appConnect() {
     this.channel.onMessage(message => {
       if (message.version) {
         this.agentInfo = {
@@ -190,6 +173,21 @@ export default class WebSerialDaemon extends Daemon {
     }
   }
 
+  /**
+   * Send the 'writePort' message to the serial port
+   * @param {string} port the port name
+   * @param {string} message the text to be sent to serial
+   */
+  writeSerial(port, message) {
+    this.channel.postMessage({
+      command: 'writePort',
+      data: {
+        name: port,
+        data: message
+      }
+    });
+  }
+
   /**
    * Request serial port open
    * @param {string} port the port name
@@ -247,23 +245,12 @@ export default class WebSerialDaemon extends Daemon {
     });
   }
 
-  cdcReset({ fqbn, port }) {
-    this.uploading.next({ status: this.UPLOAD_IN_PROGRESS, msg: 'CDC reset started' });
-    this.channel.postMessage({
-      command: 'cdcReset',
-      data: {
-        fqbn,
-        port
-      }
-    });
-  }
-
-  connectToSerialDevice({ fqbn }) {
-    this.uploading.next({ status: this.UPLOAD_IN_PROGRESS, msg: 'Board selection started' });
+  connectToSerialDevice({ from, dialogCustomization }) {
     this.channel.postMessage({
       command: 'connectToSerial',
       data: {
-        fqbn
+        from,
+        dialogCustomization
       }
     });
   }
@@ -274,9 +261,11 @@ export default class WebSerialDaemon extends Daemon {
    */
   _upload(uploadPayload, uploadCommandInfo) {
     const {
-      board, port, commandline, data, pid, vid
+      board, port, commandline, data, pid, vid, filename, dialogCustomizations
     } = uploadPayload;
+
     const extrafiles = uploadCommandInfo && uploadCommandInfo.files && Array.isArray(uploadCommandInfo.files) ? uploadCommandInfo.files : [];
+
     try {
       window.oauth.getAccessToken().then(token => {
         this.channel.postMessage({
@@ -289,7 +278,9 @@ export default class WebSerialDaemon extends Daemon {
             token: token.token,
             extrafiles,
             pid,
-            vid
+            vid,
+            filename,
+            dialogCustomizations
           }
         });
       });