Migrate chrome://usb-internals/ to Mojo JS modules

Bug: 1004256
Change-Id: Ibdb339fb95c71028050ffaed42156cca45485370
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2513687
Commit-Queue: Ken Rockot <rockot@google.com>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Reilly Grant <reillyg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#824226}

chrome/browser/BUILD.gn

@@ -6310,10 +6310,11 @@ grit("resources") {
   deps = [
     ":chrome_internal_resources_gen",
     "//chrome/browser/resources/browser_switch:web_components",
-    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_js",
+    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_webui_js",
     "//device/bluetooth/public/mojom:deprecated_experimental_interfaces_js",
     "//device/bluetooth/public/mojom:mojom_js",
-    "//services/device//public/mojom:usb_test_js",
+    "//services/device/public/mojom:usb_test_webui_js",
+    "//services/device/public/mojom:usb_webui_js",
     "//url/mojom:url_mojom_gurl_js",
     "//url/mojom:url_mojom_origin_js",
   ]

chrome/browser/browser_resources.grd

@@ -213,11 +213,11 @@
         <include name="IDR_SIGNIN_REAUTH_IMAGES_ACCOUNT_PASSWORDS_REAUTH_ILLUSTRATION_SVG" file="resources\signin\signin_reauth\images\account_passwords_reauth_illustration.svg" type="BINDATA" />
         <include name="IDR_SIGNIN_REAUTH_IMAGES_ACCOUNT_PASSWORDS_REAUTH_ILLUSTRATION_DARK_SVG" file="resources\signin\signin_reauth\images\account_passwords_reauth_illustration_dark.svg" type="BINDATA" />
       </if>
-      <include name="IDR_USB_ENUMERATION_OPTIONS_MOJOM_LITE_JS" file="${root_gen_dir}\services\device\public\mojom\usb_enumeration_options.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
-      <include name="IDR_USB_DEVICE_MANAGER_CLIENT_MOJOM_LITE_JS" file="${root_gen_dir}\services\device\public\mojom\usb_manager_client.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
-      <include name="IDR_USB_DEVICE_MANAGER_MOJOM_LITE_JS" file="${root_gen_dir}\services\device\public\mojom\usb_manager.mojom-lite.js" use_base_dir="false" type="BINDATA" />
-      <include name="IDR_USB_DEVICE_MANAGER_TEST_MOJOM_LITE_JS" file="${root_gen_dir}\services\device\public\mojom\usb_manager_test.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
-      <include name="IDR_USB_DEVICE_MOJOM_LITE_JS" file="${root_gen_dir}\services\device\public\mojom\usb_device.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
+      <include name="IDR_USB_ENUMERATION_OPTIONS_MOJOM_WEBUI_JS" file="${root_gen_dir}\mojom-webui\services\device\public\mojom\usb_enumeration_options.mojom-webui.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
+      <include name="IDR_USB_DEVICE_MANAGER_CLIENT_MOJOM_WEBUI_JS" file="${root_gen_dir}\mojom-webui\services\device\public\mojom\usb_manager_client.mojom-webui.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
+      <include name="IDR_USB_DEVICE_MANAGER_MOJOM_WEBUI_JS" file="${root_gen_dir}\mojom-webui\services\device\public\mojom\usb_manager.mojom-webui.js" use_base_dir="false" type="BINDATA" />
+      <include name="IDR_USB_DEVICE_MANAGER_TEST_MOJOM_WEBUI_JS" file="${root_gen_dir}\mojom-webui\services\device\public\mojom\usb_manager_test.mojom-webui.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
+      <include name="IDR_USB_DEVICE_MOJOM_WEBUI_JS" file="${root_gen_dir}\mojom-webui\services\device\public\mojom\usb_device.mojom-webui.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
       <include name="IDR_WEB_FOOTER_EXPERIMENT_HTML" file="resources\web_footer_experiment\index.html" type="BINDATA" />
       <include name="IDR_WEBSTORE_MANIFEST" file="resources\webstore_app\manifest.json" type="BINDATA" />
       <include name="IDR_CRYPTOTOKEN_MANIFEST" file="resources\cryptotoken\manifest.json" type="BINDATA" />

chrome/browser/resources/usb_internals/BUILD.gn

@@ -8,6 +8,15 @@ import("//tools/polymer/html_to_js.gni")
 
 js_type_check("closure_compile") {
   uses_js_modules = true
+  closure_flags = default_closure_args + mojom_js_args + [
+                    "js_module_root=" + rebase_path(".", root_build_dir),
+                    "js_module_root=" + rebase_path(
+                            "$root_gen_dir/mojom-webui/chrome/browser/ui/webui/usb_internals",
+                            root_build_dir),
+                    "js_module_root=" + rebase_path(
+                            "$root_gen_dir/mojom-webui/services/device/public/mojom",
+                            root_build_dir),
+                  ]
   deps = [
     ":app",
     ":descriptor_panel",
@@ -18,7 +27,7 @@ js_type_check("closure_compile") {
 js_library("app") {
   deps = [
     ":devices_page",
-    ":mojo",
+    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_webui_js",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:cr.m",
     "//ui/webui/resources/js/cr/ui:tabs.m",
@@ -28,7 +37,7 @@ js_library("app") {
 js_library("devices_page") {
   deps = [
     ":descriptor_panel",
-    ":mojo",
+    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_webui_js",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:cr.m",
     "//ui/webui/resources/js:util.m",
@@ -39,7 +48,7 @@ js_library("devices_page") {
 
 js_library("descriptor_panel") {
   deps = [
-    ":mojo",
+    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_webui_js",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:util.m",
     "//ui/webui/resources/js/cr:ui.m",
@@ -47,10 +56,6 @@ js_library("descriptor_panel") {
   ]
 }
 
-js_library("mojo") {
-  deps = [ "//chrome/browser/ui/webui/usb_internals:mojo_bindings_js_library_for_compile" ]
-}
-
 grit("resources") {
   source = "resources.grd"
   outputs = [
@@ -66,7 +71,7 @@ grit("resources") {
   ]
   deps = [
     ":web_components",
-    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_js",
+    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_webui_js",
   ]
 }
 

chrome/browser/resources/usb_internals/app.js

@@ -5,13 +5,15 @@
 /**
  * Javascript for usb_internals.html, served from chrome://usb-internals/.
  */
-import './mojo.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {decorate} from 'chrome://resources/js/cr/ui.m.js';
 import {TabBox} from 'chrome://resources/js/cr/ui/tabs.m.js';
 
 import {DevicesPage} from './devices_page.js';
+import {UsbInternalsPageHandler} from './usb_internals.mojom-webui.js';
+import {UsbDeviceManagerRemote} from './usb_manager.mojom-webui.js';
+import {UsbDeviceManagerTestRemote} from './usb_manager_test.mojom-webui.js';
 
 window.setupFn = window.setupFn || function() {
   return Promise.resolve();
@@ -44,20 +46,20 @@ class UsbInternalsAppElement extends HTMLElement {
     // actions after the page is loaded but before any script is run.
     await window.setupFn();
 
-    const pageHandler = mojom.UsbInternalsPageHandler.getRemote();
+    const pageHandler = UsbInternalsPageHandler.getRemote();
 
     // Connection to the UsbInternalsPageHandler instance running in the
     // browser process.
-    /** @type {device.mojom.UsbDeviceManagerRemote} */
-    const usbManager = new device.mojom.UsbDeviceManagerRemote;
+    /** @type {UsbDeviceManagerRemote} */
+    const usbManager = new UsbDeviceManagerRemote;
     await pageHandler.bindUsbDeviceManagerInterface(
         usbManager.$.bindNewPipeAndPassReceiver());
 
     /** @private {!DevicesPage} */
     this.devicesPage_ = new DevicesPage(usbManager, assert(this.shadowRoot));
 
-    /** @private {device.mojom.UsbDeviceManagerTestRemote} */
-    this.usbManagerTest_ = new device.mojom.UsbDeviceManagerTestRemote;
+    /** @private {UsbDeviceManagerTestRemote} */
+    this.usbManagerTest_ = new UsbDeviceManagerTestRemote;
     await pageHandler.bindTestInterface(
         this.usbManagerTest_.$.bindNewPipeAndPassReceiver());
 

chrome/browser/resources/usb_internals/descriptor_panel.js

@@ -6,13 +6,14 @@
  * Javascript for DescriptorPanel UI, served from
  *     chrome://usb-internals/.
  */
-import './mojo.js';
 
 import {assert, assertInstanceof} from 'chrome://resources/js/assert.m.js';
 import {decorate} from 'chrome://resources/js/cr/ui.m.js';
 import {Tree, TreeItem} from 'chrome://resources/js/cr/ui/tree.m.js';
 import {queryRequiredElement} from 'chrome://resources/js/util.m.js';
 
+import {UsbControlTransferParams, UsbControlTransferRecipient, UsbControlTransferType, UsbDeviceInterface, UsbTransferStatus} from './usb_device.mojom-webui.js';
+
 const INPUT_TYPE_DECIMAL_WITH_DROPDOWN = 0;
 const INPUT_TYPE_HEX_BYTE = 1;
 
@@ -116,11 +117,11 @@ const MS_OS_20_PLATFORM_CAPABILITY_UUID = [
 
 export class DescriptorPanel {
   /**
-   * @param {!device.mojom.UsbDeviceInterface} usbDeviceProxy
+   * @param {!UsbDeviceInterface} usbDeviceProxy
    * @param {!HTMLElement} rootElement
    */
   constructor(usbDeviceProxy, rootElement) {
-    /** @type {!device.mojom.UsbDeviceInterface} */
+    /** @type {!UsbDeviceInterface} */
     this.usbDeviceProxy_ = usbDeviceProxy;
 
     /** @type {!HTMLElement} */
@@ -462,10 +463,10 @@ export class DescriptorPanel {
    * Gets device descriptor of current device, and display it.
    */
   async getDeviceDescriptor() {
-    /** @type {!device.mojom.UsbControlTransferParams} */
+    /** @type {!UsbControlTransferParams} */
     const usbControlTransferParams = {
-      type: device.mojom.UsbControlTransferType.STANDARD,
-      recipient: device.mojom.UsbControlTransferRecipient.DEVICE,
+      type: UsbControlTransferType.STANDARD,
+      recipient: UsbControlTransferRecipient.DEVICE,
       request: GET_DESCRIPTOR_REQUEST,
       value: DEVICE_DESCRIPTOR_TYPE << 8,
       index: 0,
@@ -587,10 +588,10 @@ export class DescriptorPanel {
    * Gets configuration descriptor of current device, and display it.
    */
   async getConfigurationDescriptor() {
-    /** @type {!device.mojom.UsbControlTransferParams} */
+    /** @type {!UsbControlTransferParams} */
     const usbControlTransferParams = {
-      type: device.mojom.UsbControlTransferType.STANDARD,
-      recipient: device.mojom.UsbControlTransferRecipient.DEVICE,
+      type: UsbControlTransferType.STANDARD,
+      recipient: UsbControlTransferRecipient.DEVICE,
       request: GET_DESCRIPTOR_REQUEST,
       value: CONFIGURATION_DESCRIPTOR_TYPE << 8,
       index: 0,
@@ -866,10 +867,10 @@ export class DescriptorPanel {
    * @return {!Promise<!Array<number>>}
    */
   async getAllLanguageCodes() {
-    /** @type {!device.mojom.UsbControlTransferParams} */
+    /** @type {!UsbControlTransferParams} */
     const usbControlTransferParams = {
-      type: device.mojom.UsbControlTransferType.STANDARD,
-      recipient: device.mojom.UsbControlTransferRecipient.DEVICE,
+      type: UsbControlTransferType.STANDARD,
+      recipient: UsbControlTransferRecipient.DEVICE,
       request: GET_DESCRIPTOR_REQUEST,
       value: STRING_DESCRIPTOR_TYPE << 8,
       index: 0,
@@ -930,10 +931,10 @@ export class DescriptorPanel {
    */
   async getStringDescriptorForLanguageCode_(
       index, languageCode, treeItem = undefined) {
-    /** @type {!device.mojom.UsbControlTransferParams} */
+    /** @type {!UsbControlTransferParams} */
     const usbControlTransferParams = {
-      type: device.mojom.UsbControlTransferType.STANDARD,
-      recipient: device.mojom.UsbControlTransferRecipient.DEVICE,
+      type: UsbControlTransferType.STANDARD,
+      recipient: UsbControlTransferRecipient.DEVICE,
       request: GET_DESCRIPTOR_REQUEST,
       index: languageCode,
       value: (STRING_DESCRIPTOR_TYPE << 8) | index,
@@ -1088,10 +1089,10 @@ export class DescriptorPanel {
    * descriptor, and display it.
    */
   async getBosDescriptor() {
-    /** @type {!device.mojom.UsbControlTransferParams} */
+    /** @type {!UsbControlTransferParams} */
     const usbControlTransferParams = {
-      type: device.mojom.UsbControlTransferType.STANDARD,
-      recipient: device.mojom.UsbControlTransferRecipient.DEVICE,
+      type: UsbControlTransferType.STANDARD,
+      recipient: UsbControlTransferRecipient.DEVICE,
       request: GET_DESCRIPTOR_REQUEST,
       value: BOS_DESCRIPTOR_TYPE << 8,
       index: 0,
@@ -1450,12 +1451,12 @@ export class DescriptorPanel {
     const vendorCode = rawData[offset + WEB_USB_VENDOR_CODE_OFFSET];
     const urlIndex = rawData[offset + WEB_USB_URL_DESCRIPTOR_INDEX_OFFSET];
 
-    /** @type {!device.mojom.UsbControlTransferParams} */
+    /** @type {!UsbControlTransferParams} */
     const usbControlTransferParams = {
-      recipient: device.mojom.UsbControlTransferRecipient.DEVICE,
+      recipient: UsbControlTransferRecipient.DEVICE,
       // These constants are defined by the WebUSB specification:
       // http://wicg.github.io/webusb/
-      type: device.mojom.UsbControlTransferType.VENDOR,
+      type: UsbControlTransferType.VENDOR,
       request: vendorCode,
       value: urlIndex,
       index: GET_URL_REQUEST,
@@ -1512,12 +1513,12 @@ export class DescriptorPanel {
    * @private
    */
   async getMsOs20DescriptorSet_(vendorCode, msOs20DescriptorSetLength) {
-    /** @type {!device.mojom.UsbControlTransferParams} */
+    /** @type {!UsbControlTransferParams} */
     const usbControlTransferParams = {
-      recipient: device.mojom.UsbControlTransferRecipient.DEVICE,
+      recipient: UsbControlTransferRecipient.DEVICE,
       // These constants are defined by Microsoft OS 2.0 Descriptors
       // Specification (July, 2018).
-      type: device.mojom.UsbControlTransferType.VENDOR,
+      type: UsbControlTransferType.VENDOR,
       request: vendorCode,
       value: 0,
       index: MS_OS_20_DESCRIPTOR_INDEX,
@@ -1554,12 +1555,12 @@ export class DescriptorPanel {
    * @private
    */
   async sendMsOs20DescriptorSetAltEnumCommand_(vendorCode, altEnumCode) {
-    /** @type {!device.mojom.UsbControlTransferParams} */
+    /** @type {!UsbControlTransferParams} */
     const usbControlTransferParams = {
-      recipient: device.mojom.UsbControlTransferRecipient.DEVICE,
+      recipient: UsbControlTransferRecipient.DEVICE,
       // These constants are defined by Microsoft OS 2.0 Descriptors
       // Specification (July, 2018).
-      type: device.mojom.UsbControlTransferType.VENDOR,
+      type: UsbControlTransferType.VENDOR,
       request: vendorCode,
       value: altEnumCode,
       index: MS_OS_20_SET_ALT_ENUMERATION,
@@ -2304,7 +2305,7 @@ export class DescriptorPanel {
 
   /**
    * Gets response of the given request.
-   * @param {!device.mojom.UsbControlTransferParams} usbControlTransferParams
+   * @param {!UsbControlTransferParams} usbControlTransferParams
    * @param {number} length
    * @param {string} direction
    * @private
@@ -2433,18 +2434,17 @@ export class DescriptorPanel {
         const dataLength = getRequestLength(row, i);
 
         if (this.checkEnumParamValid_(
-                type, 'Transfer Type', device.mojom.UsbControlTransferType) &&
+                type, 'Transfer Type', UsbControlTransferType) &&
             this.checkEnumParamValid_(
-                recipient, 'Transfer Recipient',
-                device.mojom.UsbControlTransferRecipient) &&
+                recipient, 'Transfer Recipient', UsbControlTransferRecipient) &&
             this.checkParamValid_(request, 'Transfer Request', 0, 255) &&
             this.checkParamValid_(value, 'wValue', 0, 65535) &&
             this.checkParamValid_(index, 'wIndex', 0, 65535) &&
             this.checkParamValid_(dataLength, 'Length', 0, 65535)) {
-          /** @type {!device.mojom.UsbControlTransferParams} */
+          /** @type {!UsbControlTransferParams} */
           const usbControlTransferParams = {
-            type: device.mojom.UsbControlTransferType[type],
-            recipient: device.mojom.UsbControlTransferRecipient[recipient],
+            type: UsbControlTransferType[type],
+            recipient: UsbControlTransferRecipient[recipient],
             request,
             value,
             index,
@@ -2890,30 +2890,30 @@ function renderRawDataBytes(rawDataByteElement, rawData) {
 function checkTransferSuccess(status, defaultMessage, rootElement) {
   let failReason = '';
   switch (status) {
-    case device.mojom.UsbTransferStatus.COMPLETED:
+    case UsbTransferStatus.COMPLETED:
       return;
-    case device.mojom.UsbTransferStatus.SHORT_PACKET:
+    case UsbTransferStatus.SHORT_PACKET:
       showError('Descriptor is too short.', rootElement);
       return;
-    case device.mojom.UsbTransferStatus.BABBLE:
+    case UsbTransferStatus.BABBLE:
       showError('Descriptor is too long.', rootElement);
       return;
-    case device.mojom.UsbTransferStatus.TRANSFER_ERROR:
+    case UsbTransferStatus.TRANSFER_ERROR:
       failReason = 'Transfer Error';
       break;
-    case device.mojom.UsbTransferStatus.TIMEOUT:
+    case UsbTransferStatus.TIMEOUT:
       failReason = 'Timeout';
       break;
-    case device.mojom.UsbTransferStatus.CANCELLED:
+    case UsbTransferStatus.CANCELLED:
       failReason = 'Transfer was cancelled';
       break;
-    case device.mojom.UsbTransferStatus.STALLED:
+    case UsbTransferStatus.STALLED:
       failReason = 'Transfer Error';
       break;
-    case device.mojom.UsbTransferStatus.DISCONNECT:
+    case UsbTransferStatus.DISCONNECT:
       failReason = 'Transfer stalled';
       break;
-    case device.mojom.UsbTransferStatus.PERMISSION_DENIED:
+    case UsbTransferStatus.PERMISSION_DENIED:
       failReason = 'Permission denied';
       break;
   }

chrome/browser/resources/usb_internals/devices_page.js

@@ -7,28 +7,28 @@
  *     chrome://usb-internals/.
  */
 
-import './mojo.js';
-
 import {assertInstanceof} from 'chrome://resources/js/assert.m.js';
 import {decorate} from 'chrome://resources/js/cr/ui.m.js';
 import {Tab, TabPanel} from 'chrome://resources/js/cr/ui/tabs.m.js';
 import {Tree, TreeItem} from 'chrome://resources/js/cr/ui/tree.m.js';
 import {queryRequiredElement} from 'chrome://resources/js/util.m.js';
+import {String16} from 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-webui.js';
 
 import {DescriptorPanel} from './descriptor_panel.js';
 
-const UsbDeviceRemote = device.mojom.UsbDeviceRemote;
+import {UsbAlternateInterfaceInfo, UsbConfigurationInfo, UsbDeviceInfo, UsbDeviceRemote, UsbEndpointInfo, UsbInterfaceInfo, UsbTransferDirection, UsbTransferType} from './usb_device.mojom-webui.js';
+import {UsbDeviceManagerRemote} from './usb_manager.mojom-webui.js';
 
 /**
  * Page that contains a tab header and a tab panel displaying devices table.
  */
 export class DevicesPage {
   /**
-   * @param {!device.mojom.UsbDeviceManagerRemote} usbManager
+   * @param {!UsbDeviceManagerRemote} usbManager
    * @param {!ShadowRoot} root
    */
   constructor(usbManager, root) {
-    /** @private {!device.mojom.UsbDeviceManagerRemote} */
+    /** @private {!UsbDeviceManagerRemote} */
     this.usbManager_ = usbManager;
     this.root = root;
     this.renderDeviceList_();
@@ -41,7 +41,7 @@ export class DevicesPage {
   async renderDeviceList_() {
     const response = await this.usbManager_.getDevices(null);
 
-    /** @type {!Array<!device.mojom.UsbDeviceInfo>} */
+    /** @type {!Array<!UsbDeviceInfo>} */
     const devices = response.results;
 
     const tableBody = this.root.querySelector('#device-list');
@@ -83,7 +83,7 @@ export class DevicesPage {
 
   /**
    * Switches to the device's tab, creating one if necessary.
-   * @param {!device.mojom.UsbDeviceInfo} device
+   * @param {!UsbDeviceInfo} device
    * @private
    */
   switchToTab_(device) {
@@ -102,8 +102,8 @@ export class DevicesPage {
  */
 class DevicePage {
   /**
-   * @param {!device.mojom.UsbDeviceManagerRemote} usbManager
-   * @param {!device.mojom.UsbDeviceInfo} device
+   * @param {!UsbDeviceManagerRemote} usbManager
+   * @param {!UsbDeviceInfo} device
    * @param {!ShadowRoot} root
    */
   constructor(usbManager, device, root) {
@@ -114,7 +114,7 @@ class DevicePage {
 
   /**
    * Renders a tab to display a tree view showing device's detail information.
-   * @param {!device.mojom.UsbDeviceInfo} device
+   * @param {!UsbDeviceInfo} device
    * @private
    */
   renderTab_(device) {
@@ -198,7 +198,7 @@ class DevicePage {
 
 /**
  * Renders a tree to display the device's detail information.
- * @param {!device.mojom.UsbDeviceInfo} device
+ * @param {!UsbDeviceInfo} device
  * @param {!Tree} root
  */
 function renderDeviceTree(device, root) {
@@ -254,7 +254,7 @@ function renderDeviceTree(device, root) {
 
 /**
  * Renders a tree item to display the device's configuration information.
- * @param {!Array<!device.mojom.UsbConfigurationInfo>} configurationsArray
+ * @param {!Array<!UsbConfigurationInfo>} configurationsArray
  * @param {!Tree} root
  */
 function renderConfigurationTreeItem(configurationsArray, root) {
@@ -276,7 +276,7 @@ function renderConfigurationTreeItem(configurationsArray, root) {
 
 /**
  * Renders a tree item to display the device's interface information.
- * @param {!Array<!device.mojom.UsbInterfaceInfo>} interfacesArray
+ * @param {!Array<!UsbInterfaceInfo>} interfacesArray
  * @param {!TreeItem} root
  */
 function renderInterfacesTreeItem(interfacesArray, root) {
@@ -294,7 +294,7 @@ function renderInterfacesTreeItem(interfacesArray, root) {
 /**
  * Renders a tree item to display the device's alternate interfaces
  * information.
- * @param {!Array<!device.mojom.UsbAlternateInterfaceInfo>} alternatesArray
+ * @param {!Array<!UsbAlternateInterfaceInfo>} alternatesArray
  * @param {!TreeItem} root
  */
 function renderAlternatesTreeItem(alternatesArray, root) {
@@ -324,7 +324,7 @@ function renderAlternatesTreeItem(alternatesArray, root) {
 
 /**
  * Renders a tree item to display the device's endpoints information.
- * @param {!Array<!device.mojom.UsbEndpointInfo>} endpointsArray
+ * @param {!Array<!UsbEndpointInfo>} endpointsArray
  * @param {!TreeItem} root
  */
 function renderEndpointsTreeItem(endpointsArray, root) {
@@ -334,10 +334,10 @@ function renderEndpointsTreeItem(endpointsArray, root) {
     itemLabel += endpoint.endpointNumber;
 
     switch (endpoint.direction) {
-      case device.mojom.UsbTransferDirection.INBOUND:
+      case UsbTransferDirection.INBOUND:
         itemLabel += ' (INBOUND)';
         break;
-      case device.mojom.UsbTransferDirection.OUTBOUND:
+      case UsbTransferDirection.OUTBOUND:
         itemLabel += ' (OUTBOUND)';
         break;
     }
@@ -346,16 +346,16 @@ function renderEndpointsTreeItem(endpointsArray, root) {
 
     let usbTransferType = '';
     switch (endpoint.type) {
-      case device.mojom.UsbTransferType.CONTROL:
+      case UsbTransferType.CONTROL:
         usbTransferType = 'CONTROL';
         break;
-      case device.mojom.UsbTransferType.ISOCHRONOUS:
+      case UsbTransferType.ISOCHRONOUS:
         usbTransferType = 'ISOCHRONOUS';
         break;
-      case device.mojom.UsbTransferType.BULK:
+      case UsbTransferType.BULK:
         usbTransferType = 'BULK';
         break;
-      case device.mojom.UsbTransferType.INTERRUPT:
+      case UsbTransferType.INTERRUPT:
         usbTransferType = 'INTERRUPT';
         break;
     }
@@ -372,7 +372,7 @@ function renderEndpointsTreeItem(endpointsArray, root) {
  * Initialize a descriptor panel.
  * @param {!HTMLElement} tabPanel
  * @param {string} panelType
- * @param {!device.mojom.UsbDeviceRemote} usbDevice
+ * @param {!UsbDeviceRemote} usbDevice
  * @param {string} guid
  * @return {!DescriptorPanel}
  */
@@ -417,7 +417,7 @@ function initialInspectorPanel(tabPanel, panelType, usbDevice, guid) {
 
 /**
  * Parses utf16 coded string.
- * @param {!mojoBase.mojom.String16} arr
+ * @param {!String16} arr
  * @return {string}
  */
 function decodeString16(arr) {

chrome/browser/resources/usb_internals/mojo.js

-// Copyright 2020 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-// TODO(crbug.com/1004256): Use proper Mojo JS modules instead.
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/big_buffer.mojom-lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/file.mojom-lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-lite.js';
-import 'chrome://resources/mojo/url/mojom/url.mojom-lite.js';
-import './usb_device.mojom-lite.js';
-import './usb_manager_client.mojom-lite.js';
-import './usb_enumeration_options.mojom-lite.js';
-import './usb_manager.mojom-lite.js';
-import './usb_manager_test.mojom-lite.js';
-import './usb_internals.mojom-lite.js';

chrome/browser/resources/usb_internals/resources.grd

@@ -26,12 +26,9 @@
       <include name="IDR_USB_INTERNALS_HTML"
                file="usb_internals.html"
                type="BINDATA" />
-      <include name="IDR_USB_INTERNALS_MOJO_JS"
-               file="mojo.js"
-               type="BINDATA" />
-      <include name="IDR_USB_INTERNALS_MOJOM_LITE_JS"
-               file="${root_gen_dir}\chrome\browser\ui\webui\usb_internals\usb_internals.mojom-lite.js"
-               resource_path="usb_internals.mojom-lite.js"
+      <include name="IDR_USB_INTERNALS_MOJOM_WEBUI_JS"
+               file="${root_gen_dir}\mojom-webui\chrome\browser\ui\webui\usb_internals\usb_internals.mojom-webui.js"
+               resource_path="usb_internals.mojom-webui.js"
                use_base_dir="false"
                type="BINDATA" />
       <include name="IDR_USB_INTERNALS_APP_JS"

chrome/browser/ui/webui/usb_internals/BUILD.gn

@@ -11,4 +11,6 @@ mojom("mojo_bindings") {
     "//services/device/public/mojom:usb",
     "//services/device/public/mojom:usb_test",
   ]
+
+  webui_module_path = "/"
 }

chrome/browser/ui/webui/usb_internals/usb_internals_ui.cc

@@ -21,14 +21,14 @@ UsbInternalsUI::UsbInternalsUI(content::WebUI* web_ui)
       content::WebUIDataSource::Create(chrome::kChromeUIUsbInternalsHost);
 
   static constexpr webui::ResourcePath kPaths[] = {
-      {"usb_device.mojom-lite.js", IDR_USB_DEVICE_MOJOM_LITE_JS},
-      {"usb_enumeration_options.mojom-lite.js",
-       IDR_USB_ENUMERATION_OPTIONS_MOJOM_LITE_JS},
-      {"usb_manager.mojom-lite.js", IDR_USB_DEVICE_MANAGER_MOJOM_LITE_JS},
-      {"usb_manager_client.mojom-lite.js",
-       IDR_USB_DEVICE_MANAGER_CLIENT_MOJOM_LITE_JS},
-      {"usb_manager_test.mojom-lite.js",
-       IDR_USB_DEVICE_MANAGER_TEST_MOJOM_LITE_JS},
+      {"usb_device.mojom-webui.js", IDR_USB_DEVICE_MOJOM_WEBUI_JS},
+      {"usb_enumeration_options.mojom-webui.js",
+       IDR_USB_ENUMERATION_OPTIONS_MOJOM_WEBUI_JS},
+      {"usb_manager.mojom-webui.js", IDR_USB_DEVICE_MANAGER_MOJOM_WEBUI_JS},
+      {"usb_manager_client.mojom-webui.js",
+       IDR_USB_DEVICE_MANAGER_CLIENT_MOJOM_WEBUI_JS},
+      {"usb_manager_test.mojom-webui.js",
+       IDR_USB_DEVICE_MANAGER_TEST_MOJOM_WEBUI_JS},
   };
   webui::AddResourcePathsBulk(source, kPaths);
 

chrome/test/data/webui/BUILD.gn

@@ -360,7 +360,6 @@ if (include_js_tests) {
       "media/media_history_webui_browsertest.js",
       "new_tab_page/new_tab_page_browsertest.js",
       "read_later/read_later_browsertest.js",
-      "usb_internals_browsertest.js",
     ]
 
     deps = [ "//chrome/browser/ui" ]
@@ -388,6 +387,7 @@ if (include_js_tests) {
     sources = [
       "downloads/downloads_browsertest.js",
       "engagement/site_engagement_browsertest.js",
+      "usb_internals_browsertest.js",
     ]
     if (is_win || is_mac || is_linux || is_chromeos) {
       sources += [ "discards/discards_browsertest.js" ]

chrome/test/data/webui/usb_internals_test.js

@@ -2,13 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://usb-internals/mojo.js';
 import 'chrome://usb-internals/app.js';
 
+import 'chrome://test/mojo_webui_test_support.js';
+
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js';
+import {String16} from 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-webui.js';
 import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
+import {UsbControlTransferParams, UsbControlTransferRecipient, UsbControlTransferType, UsbDeviceCallbackRouter, UsbDeviceRemote, UsbOpenDeviceError, UsbTransferStatus} from 'chrome://usb-internals/usb_device.mojom-webui.js';
+import {UsbInternalsPageHandler, UsbInternalsPageHandlerReceiver, UsbInternalsPageHandlerRemote} from 'chrome://usb-internals/usb_internals.mojom-webui.js';
+import {UsbDeviceManagerReceiver, UsbDeviceManagerRemote} from 'chrome://usb-internals/usb_manager.mojom-webui.js';
 
-/** @implements {mojom.UsbInternalsPageHandlerRemote} */
+/** @implements {UsbInternalsPageHandlerRemote} */
 class FakePageHandlerRemote extends TestBrowserProxy {
   constructor(handle) {
     super([
@@ -16,7 +21,7 @@ class FakePageHandlerRemote extends TestBrowserProxy {
       'bindTestInterface',
     ]);
 
-    this.receiver_ = new mojom.UsbInternalsPageHandlerReceiver(this);
+    this.receiver_ = new UsbInternalsPageHandlerReceiver(this);
     this.receiver_.$.bindHandle(handle);
   }
 
@@ -32,7 +37,7 @@ class FakePageHandlerRemote extends TestBrowserProxy {
   }
 }
 
-/** @implements {device.mojom.UsbDeviceManagerRemote} */
+/** @implements {UsbDeviceManagerRemote} */
 class FakeDeviceManagerRemote extends TestBrowserProxy {
   constructor(pendingReceiver) {
     super([
@@ -45,7 +50,7 @@ class FakeDeviceManagerRemote extends TestBrowserProxy {
       'setClient',
     ]);
 
-    this.receiver_ = new device.mojom.UsbDeviceManagerReceiver(this);
+    this.receiver_ = new UsbDeviceManagerReceiver(this);
     this.receiver_.$.bindHandle(pendingReceiver.handle);
 
     this.devices = [];
@@ -88,7 +93,7 @@ class FakeDeviceManagerRemote extends TestBrowserProxy {
   async setClient() {}
 }
 
-/** @implements {device.mojom.UsbDeviceRemote} */
+/** @implements {UsbDeviceRemote} */
 class FakeUsbDeviceRemote extends TestBrowserProxy {
   constructor() {
     super([
@@ -102,9 +107,9 @@ class FakeUsbDeviceRemote extends TestBrowserProxy {
     // device.mojom.UsbDevice defines lots of methods we don't care to mock
     // here. UsbDeviceCallbackRouter callback silently discards messages
     // that have no listeners.
-    this.router = new device.mojom.UsbDeviceCallbackRouter;
+    this.router = new UsbDeviceCallbackRouter;
     this.router.open.addListener(async () => {
-      return {error: device.mojom.UsbOpenDeviceError.OK};
+      return {error: UsbOpenDeviceError.OK};
     });
     this.router.controlTransferIn.addListener(
         (params, length, timeout) =>
@@ -117,7 +122,7 @@ class FakeUsbDeviceRemote extends TestBrowserProxy {
         this.responses.get(usbControlTransferParamsToString(params));
     if (!response) {
       return {
-        status: device.mojom.UsbTransferStatus.TRANSFER_ERROR,
+        status: UsbTransferStatus.TRANSFER_ERROR,
         data: [],
       };
     }
@@ -127,7 +132,7 @@ class FakeUsbDeviceRemote extends TestBrowserProxy {
 
   /**
    * Set a response for a given request.
-   * @param {!device.mojom.UsbControlTransferParams} params
+   * @param {!UsbControlTransferParams} params
    * @param {!Object} response
    */
   setResponse(params, response) {
@@ -140,8 +145,8 @@ class FakeUsbDeviceRemote extends TestBrowserProxy {
    */
   setDeviceDescriptor(response) {
     const params = {};
-    params.type = device.mojom.UsbControlTransferType.STANDARD;
-    params.recipient = device.mojom.UsbControlTransferRecipient.DEVICE;
+    params.type = UsbControlTransferType.STANDARD;
+    params.recipient = UsbControlTransferRecipient.DEVICE;
     params.request = 6;
     params.index = 0;
     params.value = (1 << 8);
@@ -185,7 +190,7 @@ function fakeDeviceInfo(num) {
 function createDeviceWithValidDeviceDescriptor() {
   const deviceRemote = new FakeUsbDeviceRemote();
   deviceRemote.setDeviceDescriptor({
-    status: device.mojom.UsbTransferStatus.COMPLETED,
+    status: UsbTransferStatus.COMPLETED,
     data: [
       0x12, 0x01, 0x00, 0x02, 0x00, 0x00, 0x00, 0x40, 0x50, 0x10, 0xEF, 0x17,
       0x21, 0x03, 0x01, 0x02, 0x00, 0x01
@@ -200,7 +205,7 @@ function createDeviceWithValidDeviceDescriptor() {
 function createDeviceWithShortDeviceDescriptor() {
   const deviceRemote = new FakeUsbDeviceRemote();
   deviceRemote.setDeviceDescriptor({
-    status: device.mojom.UsbTransferStatus.SHORT_PACKET,
+    status: UsbTransferStatus.SHORT_PACKET,
     data: [0x12, 0x01, 0x00, 0x02, 0x00, 0x00, 0x00, 0x40, 0x50],
   });
   return deviceRemote;
@@ -209,7 +214,7 @@ function createDeviceWithShortDeviceDescriptor() {
 /**
  * Converts an ECMAScript string to an instance of mojo_base.mojom.String16.
  * @param {string} string
- * @return {!object}
+ * @return {!String16}
  */
 function stringToMojoString16(string) {
   return {data: Array.from(string, c => c.charCodeAt(0))};
@@ -218,7 +223,7 @@ function stringToMojoString16(string) {
 /**
  * Stringify a UsbControlTransferParams type object to be the key of
  * response map.
- * @param {!device.mojom.UsbControlTransferParams} params
+ * @param {!UsbControlTransferParams} params
  * @return {string}
  */
 function usbControlTransferParamsToString(params) {
@@ -245,8 +250,8 @@ window.deviceDescriptorCompleteFn = () => {
 };
 
 window.setupFn = () => {
-  const pageHandlerInterceptor = new MojoInterfaceInterceptor(
-      mojom.UsbInternalsPageHandler.$interfaceName);
+  const pageHandlerInterceptor =
+      new MojoInterfaceInterceptor(UsbInternalsPageHandler.$interfaceName);
   pageHandlerInterceptor.oninterfacerequest = (e) => {
     pageHandler = new FakePageHandlerRemote(e.handle);
     setupResolver.resolve();

mojo/public/js/mojo_bindings_resources.grd

@@ -45,15 +45,15 @@
           use_base_dir="false"
           resource_path="mojo/mojo/public/mojom/base/big_buffer.mojom-lite.js"
           type="BINDATA" />
-      <include name="IDR_MOJO_FILE_MOJOM_HTML"
-          file="${root_gen_dir}/mojo/public/mojom/base/file.mojom.html"
+      <include name="IDR_MOJO_BIG_BUFFER_MOJOM_WEBUI_JS"
+          file="${root_gen_dir}/mojom-webui/mojo/public/mojom/base/big_buffer.mojom-webui.js"
           use_base_dir="false"
-          resource_path="mojo/mojo/public/mojom/base/file.mojom.html"
+          resource_path="mojo/mojo/public/mojom/base/big_buffer.mojom-webui.js"
           type="BINDATA" />
-      <include name="IDR_MOJO_FILE_MOJOM_LITE_JS"
-          file="${root_gen_dir}/mojo/public/mojom/base/file.mojom-lite.js"
+      <include name="IDR_MOJO_FILE_MOJOM_WEBUI_JS"
+          file="${root_gen_dir}/mojom-webui/mojo/public/mojom/base/file.mojom-webui.js"
           use_base_dir="false"
-          resource_path="mojo/mojo/public/mojom/base/file.mojom-lite.js"
+          resource_path="mojo/mojo/public/mojom/base/file.mojom-webui.js"
           type="BINDATA" />
       <include name="IDR_MOJO_STRING16_MOJOM_HTML"
           file="${root_gen_dir}/mojo/public/mojom/base/string16.mojom.html"
@@ -65,6 +65,11 @@
           use_base_dir="false"
           resource_path="mojo/mojo/public/mojom/base/string16.mojom-lite.js"
           type="BINDATA" />
+      <include name="IDR_MOJO_STRING16_MOJOM_WEBUI_JS"
+          file="${root_gen_dir}/mojom-webui/mojo/public/mojom/base/string16.mojom-webui.js"
+          use_base_dir="false"
+          resource_path="mojo/mojo/public/mojom/base/string16.mojom-webui.js"
+          type="BINDATA" />
       <include name="IDR_MOJO_TEXT_DIRECTION_MOJOM_HTML"
           file="${root_gen_dir}/mojo/public/mojom/base/text_direction.mojom.html"
           use_base_dir="false"

services/device/public/mojom/BUILD.gn

@@ -178,11 +178,13 @@ mojom("usb") {
     "//third_party/blink/renderer/modules/webusb",
     "//chrome/browser/ui/webui/usb_internals:mojo_bindings_blink",
   ]
+
+  webui_module_path = "/"
 }
 
 mojom("usb_test") {
   generate_java = true
   sources = [ "usb_manager_test.mojom" ]
-
   public_deps = [ "//url/mojom:url_mojom_gurl" ]
+  webui_module_path = "/"
 }