Migrate chrome://usb-internals to use JS modules.

Bug: 1028829,1139849
Change-Id: I1ce5bdbd9e48004cec66f60cf952b0d95207c3d1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2480262
Commit-Queue: dpapad <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819789}

chrome/browser/resources/usb_internals/BUILD.gn

@@ -7,6 +7,7 @@ import("//tools/grit/grit_rule.gni")
 import("//tools/polymer/html_to_js.gni")
 
 js_type_check("closure_compile") {
+  uses_js_modules = true
   deps = [
     ":app",
     ":descriptor_panel",
@@ -17,35 +18,45 @@ js_type_check("closure_compile") {
 js_library("app") {
   deps = [
     ":devices_page",
-    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_js_library_for_compile",
-    "//ui/webui/resources/js:assert",
-    "//ui/webui/resources/js:cr",
-    "//ui/webui/resources/js:util",
-    "//ui/webui/resources/js/cr/ui:tabs",
-    "//ui/webui/resources/js/cr/ui:tree",
+    ":mojo",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr/ui:tabs.m",
   ]
 }
 
 js_library("devices_page") {
   deps = [
     ":descriptor_panel",
-    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_js_library_for_compile",
-    "//ui/webui/resources/js:assert",
-    "//ui/webui/resources/js:cr",
+    ":mojo",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:util.m",
+    "//ui/webui/resources/js/cr/ui:tabs.m",
+    "//ui/webui/resources/js/cr/ui:tree.m",
   ]
 }
 
 js_library("descriptor_panel") {
   deps = [
-    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_js_library_for_compile",
-    "//ui/webui/resources/js:cr",
+    ":mojo",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:util.m",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:tree.m",
   ]
 }
 
+js_library("mojo") {
+  deps = [ "//chrome/browser/ui/webui/usb_internals:mojo_bindings_js_library_for_compile" ]
+}
+
 grit("resources") {
   source = "resources.grd"
   outputs = [
     "grit/usb_internals_resources.h",
+    "grit/usb_internals_resources_map.cc",
+    "grit/usb_internals_resources_map.h",
     "usb_internals_resources.pak",
   ]
   output_dir = "$root_gen_dir/chrome"

chrome/browser/resources/usb_internals/app.js

@@ -5,6 +5,13 @@
 /**
  * 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';
 
 window.setupFn = window.setupFn || function() {
   return Promise.resolve();
@@ -46,9 +53,8 @@ window.setupFn = window.setupFn || function() {
       await pageHandler.bindUsbDeviceManagerInterface(
           usbManager.$.bindNewPipeAndPassReceiver());
 
-      /** @private {devices_page.DevicesPage} */
-      this.devicesPage_ = new devices_page.DevicesPage(
-          usbManager, assert(this.shadowRoot));
+      /** @private {!DevicesPage} */
+      this.devicesPage_ = new DevicesPage(usbManager, assert(this.shadowRoot));
 
       /** @private {device.mojom.UsbDeviceManagerTestRemote} */
       this.usbManagerTest_ = new device.mojom.UsbDeviceManagerTestRemote;
@@ -60,7 +66,7 @@ window.setupFn = window.setupFn || function() {
       });
       this.refreshTestDeviceList();
 
-      cr.ui.decorate(assert(this.$('tabbox')), cr.ui.TabBox);
+      decorate(assert(this.$('tabbox')), TabBox);
     }
 
     async refreshTestDeviceList() {

chrome/browser/resources/usb_internals/devices_page.js

@@ -7,13 +7,22 @@
  *     chrome://usb-internals/.
  */
 
-cr.define('devices_page', function() {
+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 {DescriptorPanel} from './descriptor_panel.js';
+
   const UsbDeviceRemote = device.mojom.UsbDeviceRemote;
 
   /**
    * Page that contains a tab header and a tab panel displaying devices table.
    */
-  class DevicesPage {
+  export class DevicesPage {
     /**
      * @param {!device.mojom.UsbDeviceManagerRemote} usbManager
      * @param {!ShadowRoot} root
@@ -126,7 +135,7 @@ cr.define('devices_page', function() {
       tab.id = device.guid;
 
       tabs.appendChild(tabClone);
-      cr.ui.decorate(tab, cr.ui.Tab);
+      decorate(tab, Tab);
 
       const tabPanels = queryRequiredElement('tabpanels', this.root);
       const tabPanelTemplate =
@@ -139,7 +148,7 @@ cr.define('devices_page', function() {
        */
       const treeViewRoot = assertInstanceof(
           tabPanelClone.querySelector('.tree-view'), HTMLElement);
-      cr.ui.decorate(treeViewRoot, cr.ui.Tree);
+      decorate(treeViewRoot, Tree);
       treeViewRoot.detail = {payload: {}, children: {}};
       // Clear the tree first before populating it with the new content.
       treeViewRoot.innerText = '';
@@ -150,7 +159,7 @@ cr.define('devices_page', function() {
       this.initializeDescriptorPanels_(tabPanel, device.guid);
 
       tabPanels.appendChild(tabPanelClone);
-      cr.ui.decorate(tabPanel, cr.ui.TabPanel);
+      decorate(tabPanel, TabPanel);
     }
 
     /**
@@ -190,7 +199,7 @@ cr.define('devices_page', function() {
   /**
    * Renders a tree to display the device's detail information.
    * @param {!device.mojom.UsbDeviceInfo} device
-   * @param {!cr.ui.Tree} root
+   * @param {!Tree} root
    */
   function renderDeviceTree(device, root) {
     root.add(customTreeItem(`USB Version: ${device.usbVersionMajor}.${
@@ -247,7 +256,7 @@ cr.define('devices_page', function() {
   /**
    * Renders a tree item to display the device's configuration information.
    * @param {!Array<!device.mojom.UsbConfigurationInfo>} configurationsArray
-   * @param {!cr.ui.Tree} root
+   * @param {!Tree} root
    */
   function renderConfigurationTreeItem(configurationsArray, root) {
     for (const configuration of configurationsArray) {
@@ -269,7 +278,7 @@ cr.define('devices_page', function() {
   /**
    * Renders a tree item to display the device's interface information.
    * @param {!Array<!device.mojom.UsbInterfaceInfo>} interfacesArray
-   * @param {!cr.ui.TreeItem} root
+   * @param {!TreeItem} root
    */
   function renderInterfacesTreeItem(interfacesArray, root) {
     for (const currentInterface of interfacesArray) {
@@ -287,7 +296,7 @@ cr.define('devices_page', function() {
    * Renders a tree item to display the device's alternate interfaces
    * information.
    * @param {!Array<!device.mojom.UsbAlternateInterfaceInfo>} alternatesArray
-   * @param {!cr.ui.TreeItem} root
+   * @param {!TreeItem} root
    */
   function renderAlternatesTreeItem(alternatesArray, root) {
     for (const alternate of alternatesArray) {
@@ -317,7 +326,7 @@ cr.define('devices_page', function() {
   /**
    * Renders a tree item to display the device's endpoints information.
    * @param {!Array<!device.mojom.UsbEndpointInfo>} endpointsArray
-   * @param {!cr.ui.TreeItem} root
+   * @param {!TreeItem} root
    */
   function renderEndpointsTreeItem(endpointsArray, root) {
     for (const endpoint of endpointsArray) {
@@ -366,13 +375,13 @@ cr.define('devices_page', function() {
    * @param {string} panelType
    * @param {!device.mojom.UsbDeviceRemote} usbDevice
    * @param {string} guid
-   * @return {!descriptor_panel.DescriptorPanel}
+   * @return {!DescriptorPanel}
    */
   function initialInspectorPanel(tabPanel, panelType, usbDevice, guid) {
     const button = queryRequiredElement(`.${panelType}-button`, tabPanel);
     const displayElement =
         queryRequiredElement(`.${panelType}-panel`, tabPanel);
-    const descriptorPanel = new descriptor_panel.DescriptorPanel(
+    const descriptorPanel = new DescriptorPanel(
         usbDevice, /** @type {!HTMLElement} */ (displayElement));
     switch (panelType) {
       case 'string-descriptor':
@@ -429,21 +438,16 @@ cr.define('devices_page', function() {
   /**
    * Renders a customized TreeItem with the given content and class name.
    * @param {string} itemLabel
-   * @return {!cr.ui.TreeItem}
+   * @return {!TreeItem}
    * @private
    */
   function customTreeItem(itemLabel) {
-    return new cr.ui.TreeItem({
+    return new TreeItem({
       label: itemLabel,
       icon: '',
     });
   }
 
-  return {
-    DevicesPage,
-  };
-});
-
 window.deviceListCompleteFn = window.deviceListCompleteFn || function() {};
 
 window.deviceTabInitializedFn = window.deviceTabInitializedFn || function() {};

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

@@ -6,6 +6,10 @@
     <output filename="grit/usb_internals_resources.h" type="rc_header">
       <emit emit_type='prepend'></emit>
     </output>
+    <output filename="grit/usb_internals_resources_map.cc"
+            type="resource_file_map_source" />
+    <output filename="grit/usb_internals_resources_map.h"
+           type="resource_map_header" />
     <output filename="usb_internals_resources.pak" type="data_package" />
   </outputs>
   <release seq="1">
@@ -21,15 +25,18 @@
                type="BINDATA" />
       <include name="IDR_USB_INTERNALS_HTML"
                file="usb_internals.html"
-               flattenhtml="true"
-               allowexternalscript="true"
+               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"
                use_base_dir="false"
                type="BINDATA" />
       <include name="IDR_USB_INTERNALS_APP_JS"
                file="${root_gen_dir}\chrome\browser\resources\usb_internals\app.js"
+               resource_path="app.js"
                use_base_dir="false"
                type="BINDATA" />
     </includes>

chrome/browser/resources/usb_internals/usb_internals.html

@@ -5,35 +5,11 @@
   <meta charset="utf-8">
   <title>USB Internals</title>
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
-
-  <script src="chrome://resources/js/assert.js"></script>
-  <script src="chrome://resources/js/cr.js"></script>
-  <script src="chrome://resources/js/promise_resolver.js"></script>
-  <script src="chrome://resources/js/cr/ui.js"></script>
-  <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
-  <script src="chrome://resources/js/cr/ui/tabs.js"></script>
-  <script src="chrome://resources/js/cr/ui/tree.js"></script>
-  <script src="chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js"></script>
-  <script src="chrome://resources/js/util.js"></script>
-  <script src="chrome://resources/mojo/mojo/public/mojom/base/big_buffer.mojom-lite.js"></script>
-  <script src="chrome://resources/mojo/mojo/public/mojom/base/file.mojom-lite.js"></script>
-  <script src="chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-lite.js"></script>
-  <script src="chrome://resources/mojo/url/mojom/url.mojom-lite.js"></script>
-
-  <script src="usb_device.mojom-lite.js"></script>
-  <script src="usb_manager_client.mojom-lite.js"></script>
-  <script src="usb_enumeration_options.mojom-lite.js"></script>
-  <script src="usb_manager.mojom-lite.js"></script>
-  <script src="usb_manager_test.mojom-lite.js"></script>
-  <script src="usb_internals.mojom-lite.js"></script>
-
-  <script src="descriptor_panel.js"></script>
-  <script src="devices_page.js"></script>
 </head>
 
 <body>
   <usb-internals-app></usb-internals-app>
-  <script src="app.js"></script>
+  <script type="module" src="app.js"></script>
 </body>
 
 </html>

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

@@ -11,6 +11,7 @@
 #include "chrome/common/url_constants.h"
 #include "chrome/grit/browser_resources.h"
 #include "chrome/grit/usb_internals_resources.h"
+#include "chrome/grit/usb_internals_resources_map.h"
 #include "content/public/browser/web_ui_data_source.h"
 
 UsbInternalsUI::UsbInternalsUI(content::WebUI* web_ui)
@@ -20,11 +21,6 @@ UsbInternalsUI::UsbInternalsUI(content::WebUI* web_ui)
       content::WebUIDataSource::Create(chrome::kChromeUIUsbInternalsHost);
 
   static constexpr webui::ResourcePath kPaths[] = {
-      {"app.js", IDR_USB_INTERNALS_APP_JS},
-      {"usb_internals.css", IDR_USB_INTERNALS_CSS},
-      {"usb_internals.mojom-lite.js", IDR_USB_INTERNALS_MOJOM_LITE_JS},
-      {"descriptor_panel.js", IDR_USB_INTERNALS_DESCRIPTOR_PANEL_JS},
-      {"devices_page.js", IDR_USB_INTERNALS_DEVICES_PAGE_JS},
       {"usb_device.mojom-lite.js", IDR_USB_DEVICE_MOJOM_LITE_JS},
       {"usb_enumeration_options.mojom-lite.js",
        IDR_USB_ENUMERATION_OPTIONS_MOJOM_LITE_JS},
@@ -36,8 +32,10 @@ UsbInternalsUI::UsbInternalsUI(content::WebUI* web_ui)
   };
   webui::AddResourcePathsBulk(source, kPaths);
 
-  source->SetDefaultResource(IDR_USB_INTERNALS_HTML);
-  source->DisableTrustedTypesCSP();
+  webui::SetupWebUIDataSource(
+      source,
+      base::make_span(kUsbInternalsResources, kUsbInternalsResourcesSize), "",
+      IDR_USB_INTERNALS_HTML);
 
   content::WebUIDataSource::Add(Profile::FromWebUI(web_ui), source);
 }

chrome/test/data/webui/usb_internals_browsertest.js

@@ -18,7 +18,8 @@ UsbInternalsTest.prototype = {
   __proto__: testing.Test.prototype,
 
   /** @override */
-  browsePreload: 'chrome://usb-internals',
+  browsePreload:
+      'chrome://usb-internals/test_loader.html?module=usb_internals_test.js',
 
   /** @override */
   isAsync: true,
@@ -27,9 +28,6 @@ UsbInternalsTest.prototype = {
   extraLibraries: [
     '//third_party/mocha/mocha.js',
     '//chrome/test/data/webui/mocha_adapter.js',
-    '//ui/webui/resources/js/promise_resolver.js',
-    '//chrome/test/data/webui/test_browser_proxy.js',
-    '//chrome/test/data/webui/usb_internals_test.js',
   ],
 };
 

chrome/test/data/webui/usb_internals_test.js

@@ -2,6 +2,12 @@
 // 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 {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js';
+import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
+
 /** @implements {mojom.UsbInternalsPageHandlerRemote} */
 class FakePageHandlerRemote extends TestBrowserProxy {
   constructor(handle) {
@@ -243,10 +249,10 @@ window.setupFn = () => {
       mojom.UsbInternalsPageHandler.$interfaceName);
   pageHandlerInterceptor.oninterfacerequest = (e) => {
     pageHandler = new FakePageHandlerRemote(e.handle);
+    setupResolver.resolve();
   };
   pageHandlerInterceptor.start();
 
-  setupResolver.resolve();
   return Promise.resolve();
 };
 
@@ -254,16 +260,15 @@ window.setupFn = () => {
 suite('UsbInternalsUITest', function() {
   let app = null;
 
-  suiteSetup(function() {
-    app = document.querySelector('usb-internals-app');
+  suiteSetup(async function() {
+    document.body.innerHTML = '';
+    app = document.createElement('usb-internals-app');
+    document.body.appendChild(app);
 
     // Before tests are run, make sure setup completes.
-    return setupResolver.promise.then(function() {
-      return Promise.all([
-        pageHandler.whenCalled('bindUsbDeviceManagerInterface'),
-        pageHandler.deviceManager.whenCalled('getDevices'),
-      ]);
-    });
+    await setupResolver.promise;
+    await pageHandler.whenCalled('bindUsbDeviceManagerInterface');
+    await pageHandler.deviceManager.whenCalled('getDevices');
   });
 
   teardown(function() {