Add 'Devices' tab to chrome://usb-internals

This change added 'Device' tab to the chrome://usb-internals page, and
can display all the real devices that connected to the machine.

Bug: 928923
Change-Id: Ie1f3c2dcea69dabdfb43ea5dbe1ae516573cd694
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1473710
Commit-Queue: Nancy Li <nancyly@google.com>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Ken Buchanan <kenrb@chromium.org>
Reviewed-by: Reilly Grant <reillyg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638712}

chrome/browser/browser_resources.grd

@@ -482,11 +482,16 @@
       <include name="IDR_SIGNIN_EMAIL_CONFIRMATION_JS" file="resources\signin\signin_email_confirmation\signin_email_confirmation.js" type="BINDATA" />
       <include name="IDR_SIGNIN_ERROR_HTML" file="resources\signin\signin_error\signin_error.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
       <include name="IDR_SIGNIN_ERROR_JS" file="resources\signin\signin_error\signin_error.js" type="BINDATA" />
+      <include name="IDR_USB_DEVICE_ENUMERATION_OPTIONS_MOJOM_LITE_JS" file="${root_gen_dir}\device\usb\public\mojom\device_enumeration_options.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
+      <include name="IDR_USB_DEVICE_MANAGER_CLIENT_MOJOM_LITE_JS" file="${root_gen_dir}\device\usb\public\mojom\device_manager_client.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
+      <include name="IDR_USB_DEVICE_MANAGER_MOJOM_LITE_JS" file="${root_gen_dir}\device\usb\public\mojom\device_manager.mojom-lite.js" use_base_dir="false" type="BINDATA" compress="gzip" />
+      <include name="IDR_USB_DEVICE_MANAGER_TEST_MOJOM_LITE_JS" file="${root_gen_dir}\device\usb\public\mojom\device_manager_test.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
+      <include name="IDR_USB_DEVICE_MOJOM_LITE_JS" file="${root_gen_dir}\device\usb\public\mojom\device.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
       <include name="IDR_USB_INTERNALS_CSS" file="resources\usb_internals\usb_internals.css" type="BINDATA" compress="gzip" />
+      <include name="IDR_USB_INTERNALS_DEVICES_PAGE_JS" file="resources\usb_internals\devices_page.js" type="BINDATA" compress="gzip" />
       <include name="IDR_USB_INTERNALS_HTML" file="resources\usb_internals\usb_internals.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
       <include name="IDR_USB_INTERNALS_JS" file="resources\usb_internals\usb_internals.js" type="BINDATA" compress="gzip" />
-      <include name="IDR_USB_INTERNALS_MOJO_JS" file="${root_gen_dir}\chrome\browser\ui\webui\usb_internals\usb_internals.mojom-lite.js" use_base_dir="false" type="BINDATA" compress="gzip" />
-      <include name="IDR_USB_DEVICE_MANAGER_TEST_MOJO_JS" file="${root_gen_dir}\device\usb\public\mojom\device_manager_test.mojom-lite.js" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
+      <include name="IDR_USB_INTERNALS_MOJOM_LITE_JS" file="${root_gen_dir}\chrome\browser\ui\webui\usb_internals\usb_internals.mojom-lite.js" use_base_dir="false" type="BINDATA" compress="gzip" />
       <include name="IDR_WEBRTC_LOGS_HTML" file="resources\media\webrtc_logs.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
       <include name="IDR_WEBRTC_LOGS_JS" file="resources\media\webrtc_logs.js" type="BINDATA" />
       <include name="IDR_WEBSTORE_MANIFEST" file="resources\webstore_app\manifest.json" type="BINDATA" />

chrome/browser/resources/usb_internals/BUILD.gn

@@ -6,19 +6,20 @@ import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
   deps = [
+    ":device_page",
     ":usb_internals",
   ]
 }
 
 js_library("usb_internals") {
-  sources = [
-    "usb_internals.js",
-  ]
-
   deps = [
+    ":device_page"
     "//chrome/browser/ui/webui/usb_internals:mojo_bindings_js_library_for_compile",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js:util",
     "//ui/webui/resources/js/cr/ui:tabs",
   ]
 }
+
+js_library("devices_page") {
+}

chrome/browser/resources/usb_internals/devices_page.js

+// Copyright 2019 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.
+
+/**
+ * Javascript for DevicesPage, served from
+ *     chrome://usb-internals/.
+ */
+
+cr.define('devices_page', function() {
+  /**
+   * Sets the device collection for the page's device table.
+   * @param {!Array<!device.mojom.UsbDeviceInfo>} devices
+   */
+  function setDevices(devices) {
+    const tableBody = $('device-list');
+    tableBody.innerHTML = '';
+
+    const rowTemplate = document.querySelector('#device-row');
+
+    for (const device of devices) {
+      const clone = document.importNode(rowTemplate.content, true);
+
+      const td = clone.querySelectorAll('td');
+
+      td[0].textContent = device.busNumber;
+      td[1].textContent = device.portNumber;
+      td[2].textContent = toHex(device.vendorId);
+      td[3].textContent = toHex(device.productId);
+      if (device.manufacturerName) {
+        td[4].textContent = decodeString16(device.manufacturerName.data);
+      }
+      if (device.productName) {
+        td[5].textContent = decodeString16(device.productName.data);
+      }
+      if (device.serialNumber) {
+        td[6].textContent = decodeString16(device.serialNumber.data);
+      }
+
+      tableBody.appendChild(clone);
+    }
+  }
+
+  /**
+   * Parses utf16 coded string.
+   * @param {!mojoBase.mojom.String16} arr
+   * @return {string}
+   */
+  function decodeString16(arr) {
+    return arr.map(ch => String.fromCodePoint(ch)).join('');
+  }
+
+  /**
+   * Parses the decimal number to hex format.
+   * @param {number} num
+   * @return {string}
+   */
+  function toHex(num) {
+    return '0x' + num.toString(16).padStart(4, '0').slice(-4).toUpperCase();
+  }
+
+  return {
+    setDevices: setDevices,
+  };
+});

chrome/browser/resources/usb_internals/usb_internals.html

@@ -16,18 +16,26 @@
   <script src="chrome://resources/js/cr/ui/tabs.js"></script>
   <script src="chrome://resources/js/mojo_bindings_lite.js"></script>
   <script src="chrome://resources/js/util.js"></script>
-  <script src="url/mojom/url.mojom-lite.js"></script>
-  <script src="device/usb/public/mojom/device_manager_test.mojom-lite.js">
-  </script>
-  <script
-    src="chrome/browser/ui/webui/usb_internals/usb_internals.mojom-lite.js">
-  </script>
+  <script src="chrome://resources/js/big_buffer.mojom-lite.js"></script>
+  <script src="chrome://resources/js/file.mojom-lite.js"></script>
+  <script src="chrome://resources/js/string16.mojom-lite.js"></script>
+
+  <script src="url.mojom-lite.js"></script>
+  <script src="device.mojom-lite.js"></script>
+  <script src="device_manager_client.mojom-lite.js"></script>
+  <script src="device_enumeration_options.mojom-lite.js"></script>
+  <script src="device_manager.mojom-lite.js"></script>
+  <script src="device_manager_test.mojom-lite.js"></script>
+  <script src="usb_internals.mojom-lite.js"></script>
+
+  <script src="devices_page.js"></script>
 </head>
 
 <body>
   <tabbox>
     <tabs>
       <tab>Test Devices</tab>
+      <tab>Devices</tab>
     </tabs>
     <tabpanels>
       <tabpanel>
@@ -82,6 +90,40 @@
           </form>
         </div>
       </tabpanel>
+
+      <tabpanel>
+        <!-- Devices -->
+        <h2>Devices</h2>
+        <table class="styled-table">
+          <thead>
+            <tr>
+              <th>Bus Number</th>
+              <th>Port Number</th>
+              <th>Vendor Id</th>
+              <th>Product Id</th>
+              <th>Manufacturer Name</th>
+              <th>Product Name</th>
+              <th>Serial Number</th>
+              <th>
+            </tr>
+          </thead>
+          <tbody id="device-list"></tbody>
+
+          <template id="device-row">
+            <tr>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td><button>Inspect</button></td>
+            </tr>
+          </template>
+
+        </table>
+      </tabpanel>
     </tabpanels>
   </tabbox>
 

chrome/browser/resources/usb_internals/usb_internals.js

@@ -8,23 +8,36 @@
 cr.define('usb_internals', function() {
   class UsbInternals {
     constructor() {
+      const pageHandler = mojom.UsbInternalsPageHandler.getProxy();
+
       // Connection to the UsbInternalsPageHandler instance running in the
       // browser process.
-      this.usbManagerTest = null;
+      /** @private {device.mojom.UsbDeviceManagerProxy} */
+      this.usbManager_ = new device.mojom.UsbDeviceManagerProxy;
+      pageHandler.bindUsbDeviceManagerInterface(
+          this.usbManager_.$.createRequest());
 
-      const pageHandler = mojom.UsbInternalsPageHandler.getProxy();
-      this.usbManagerTest = new device.mojom.UsbDeviceManagerTestProxy;
-      pageHandler.bindTestInterface(this.usbManagerTest.$.createRequest());
+      /** @private {device.mojom.UsbDeviceManagerTestProxy} */
+      this.usbManagerTest_ = new device.mojom.UsbDeviceManagerTestProxy;
+      pageHandler.bindTestInterface(this.usbManagerTest_.$.createRequest());
 
       cr.ui.decorate('tabbox', cr.ui.TabBox);
+
+      this.refreshDeviceList();
+
       $('add-test-device-form').addEventListener('submit', (event) => {
         this.addTestDevice(event);
       });
-      this.refreshDeviceList();
+      this.refreshTestDeviceList();
     }
 
     async refreshDeviceList() {
-      const response = await this.usbManagerTest.getTestDevices();
+      const response = await this.usbManager_.getDevices();
+      devices_page.setDevices(response.results);
+    }
+
+    async refreshTestDeviceList() {
+      const response = await this.usbManagerTest_.getTestDevices();
 
       const tableBody = $('test-device-list');
       tableBody.innerHTML = '';
@@ -41,8 +54,8 @@ cr.define('usb_internals', function() {
 
         const removeButton = clone.querySelector('button');
         removeButton.addEventListener('click', async () => {
-          await this.usbManagerTest.removeDeviceForTesting(device.guid);
-          this.refreshDeviceList();
+          await this.usbManagerTest_.removeDeviceForTesting(device.guid);
+          this.refreshTestDeviceList();
         });
 
         tableBody.appendChild(clone);
@@ -52,11 +65,11 @@ cr.define('usb_internals', function() {
     async addTestDevice(event) {
       event.preventDefault();
 
-      const response = await this.usbManagerTest.addDeviceForTesting(
+      const response = await this.usbManagerTest_.addDeviceForTesting(
           $('test-device-name').value, $('test-device-serial').value,
           $('test-device-landing-page').value);
       if (response.success) {
-        this.refreshDeviceList();
+        this.refreshTestDeviceList();
       }
 
       $('add-test-device-result').textContent = response.message;
@@ -72,4 +85,4 @@ cr.define('usb_internals', function() {
 
 document.addEventListener('DOMContentLoaded', () => {
   new usb_internals.UsbInternals();
-});
+});
\ No newline at end of file

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

@@ -10,6 +10,7 @@ mojom("mojo_bindings") {
   ]
 
   deps = [
+    "//device/usb/public/mojom:mojom",
     "//device/usb/public/mojom:test",
   ]
 }

chrome/browser/ui/webui/usb_internals/usb_internals.mojom

@@ -4,9 +4,13 @@
 
 module mojom;
 
+import "device/usb/public/mojom/device_manager.mojom";
 import "device/usb/public/mojom/device_manager_test.mojom";
 
 interface UsbInternalsPageHandler {
+  // Bind the UsbDeviceManager interface to get all devices that connected.
+  BindUsbDeviceManagerInterface(device.mojom.UsbDeviceManager& request);
+
   // Simulate the connection of a new device with the given properties.
   BindTestInterface(device.mojom.UsbDeviceManagerTest& request);
 };

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

@@ -23,3 +23,11 @@ void UsbInternalsPageHandler::BindTestInterface(
       ->GetConnector()
       ->BindInterface(device::mojom::kServiceName, std::move(request));
 }
+
+void UsbInternalsPageHandler::BindUsbDeviceManagerInterface(
+    device::mojom::UsbDeviceManagerRequest request) {
+  // Forward the request to the DeviceService.
+  content::ServiceManagerConnection::GetForProcess()
+      ->GetConnector()
+      ->BindInterface(device::mojom::kServiceName, std::move(request));
+}

chrome/browser/ui/webui/usb_internals/usb_internals_page_handler.h

@@ -7,6 +7,7 @@
 
 #include "base/macros.h"
 #include "chrome/browser/ui/webui/usb_internals/usb_internals.mojom.h"
+#include "device/usb/public/mojom/device_manager.mojom.h"
 #include "device/usb/public/mojom/device_manager_test.mojom.h"
 #include "mojo/public/cpp/bindings/binding.h"
 
@@ -16,7 +17,9 @@ class UsbInternalsPageHandler : public mojom::UsbInternalsPageHandler {
       mojom::UsbInternalsPageHandlerRequest request);
   ~UsbInternalsPageHandler() override;
 
-  // mojom::UsbInternalsPageHandler overrides:
+  void BindUsbDeviceManagerInterface(
+      device::mojom::UsbDeviceManagerRequest request) override;
+
   void BindTestInterface(
       device::mojom::UsbDeviceManagerTestRequest request) override;
 

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

@@ -16,15 +16,23 @@ UsbInternalsUI::UsbInternalsUI(content::WebUI* web_ui)
   // Set up the chrome://usb-internals source.
   content::WebUIDataSource* source =
       content::WebUIDataSource::Create(chrome::kChromeUIUsbInternalsHost);
+
   source->AddResourcePath("usb_internals.css", IDR_USB_INTERNALS_CSS);
   source->AddResourcePath("usb_internals.js", IDR_USB_INTERNALS_JS);
-  source->AddResourcePath(
-      "device/usb/public/mojom/device_manager_test.mojom-lite.js",
-      IDR_USB_DEVICE_MANAGER_TEST_MOJO_JS);
-  source->AddResourcePath(
-      "chrome/browser/ui/webui/usb_internals/usb_internals.mojom-lite.js",
-      IDR_USB_INTERNALS_MOJO_JS);
-  source->AddResourcePath("url/mojom/url.mojom-lite.js", IDR_URL_MOJOM_LITE_JS);
+  source->AddResourcePath("usb_internals.mojom-lite.js",
+                          IDR_USB_INTERNALS_MOJOM_LITE_JS);
+  source->AddResourcePath("devices_page.js", IDR_USB_INTERNALS_DEVICES_PAGE_JS);
+  source->AddResourcePath("device.mojom-lite.js", IDR_USB_DEVICE_MOJOM_LITE_JS);
+  source->AddResourcePath("device_enumeration_options.mojom-lite.js",
+                          IDR_USB_DEVICE_ENUMERATION_OPTIONS_MOJOM_LITE_JS);
+  source->AddResourcePath("device_manager.mojom-lite.js",
+                          IDR_USB_DEVICE_MANAGER_MOJOM_LITE_JS);
+  source->AddResourcePath("device_manager_client.mojom-lite.js",
+                          IDR_USB_DEVICE_MANAGER_CLIENT_MOJOM_LITE_JS);
+  source->AddResourcePath("device_manager_test.mojom-lite.js",
+                          IDR_USB_DEVICE_MANAGER_TEST_MOJOM_LITE_JS);
+  source->AddResourcePath("url.mojom-lite.js", IDR_URL_MOJOM_LITE_JS);
+
   source->SetDefaultResource(IDR_USB_INTERNALS_HTML);
   source->UseGzip();
 

device/usb/public/mojom/BUILD.gn

@@ -34,6 +34,7 @@ mojom("mojom") {
     "//components/arc/common:common_blink",
     "//third_party/blink/public/mojom/usb:usb_blink",
     "//third_party/blink/renderer/modules/webusb",
+    "//chrome/browser/ui/webui/usb_internals:mojo_bindings_blink",
   ]
 }