[USB Internals WebUI] Add string descriptor display functions

Gets and displays string descriptor in both tree view and byte view.
Adds a button near to the string descriptor index fields to get the
string descriptor of this field. And adds input element and button to
end of page for querying string descriptor manually.


Bug: 928923
Change-Id: Ib4f7be251fcb9532e75b1adf9a31d37b22cb5029
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1534629
Commit-Queue: Nancy Li <nancyly@google.com>
Reviewed-by: Matt Reynolds <mattreynolds@chromium.org>
Reviewed-by: Reilly Grant <reillyg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#650411}

chrome/browser/resources/usb_internals/devices_page.js

@@ -76,8 +76,7 @@ cr.define('devices_page', function() {
       const tabId = device.guid;
 
       if (null == $(tabId)) {
-        const devicePage = new DevicePage(this.usbManager_);
-        devicePage.renderTab(device);
+        const devicePage = new DevicePage(this.usbManager_, device);
       }
       $(tabId).selected = true;
     }
@@ -90,15 +89,13 @@ cr.define('devices_page', function() {
   class DevicePage {
     /**
      * @param {!device.mojom.UsbDeviceManagerProxy} usbManager
+     * @param {!device.mojom.UsbDeviceInfo} device
      */
-    constructor(usbManager) {
+    constructor(usbManager, device) {
       /** @private {device.mojom.UsbDeviceManagerProxy} */
       this.usbManager_ = usbManager;
 
-      /** @private {boolean} */
-      this.showDeviceDescriptor_ = false;
-      /** @private {boolean} */
-      this.showConfigurationDescriptor_ = false;
+      this.renderTab(device);
     }
 
     /**
@@ -144,20 +141,37 @@ cr.define('devices_page', function() {
       const usbDeviceProxy = new UsbDeviceProxy;
       this.usbManager_.getDevice(device.guid, usbDeviceProxy.$.createRequest());
 
+      const getStringDescriptorButton =
+          tabPanelClone.querySelector('#string-descriptor-button');
+      const stringDescriptorElement =
+          tabPanelClone.querySelector('.string-descriptor-panel');
+      const stringDescriptorPanel = new descriptor_panel.DescriptorPanel(
+          usbDeviceProxy, stringDescriptorElement);
+      stringDescriptorPanel.initialStringDescriptorPanel(tab.id);
+      getStringDescriptorButton.addEventListener('click', () => {
+        stringDescriptorElement.hidden = !stringDescriptorElement.hidden;
+
+        // Clear the panel before rendering new data.
+        stringDescriptorPanel.clearView();
+
+        if (!stringDescriptorElement.hidden) {
+          stringDescriptorPanel.getAllLanguageCodes();
+        }
+      });
+
       const getDeviceDescriptorButton =
           tabPanelClone.querySelector('#device-descriptor-button');
       const deviceDescriptorElement =
           tabPanelClone.querySelector('.device-descriptor-panel');
-
       const deviceDescriptorPanel = new descriptor_panel.DescriptorPanel(
-          usbDeviceProxy, deviceDescriptorElement);
+          usbDeviceProxy, deviceDescriptorElement, stringDescriptorPanel);
       getDeviceDescriptorButton.addEventListener('click', () => {
-        this.showDeviceDescriptor_ = !this.showDeviceDescriptor_;
+        deviceDescriptorElement.hidden = !deviceDescriptorElement.hidden;
 
         // Clear the panel before rendering new data.
         deviceDescriptorPanel.clearView();
 
-        if (this.showDeviceDescriptor_) {
+        if (!deviceDescriptorElement.hidden) {
           deviceDescriptorPanel.renderDeviceDescriptor();
         }
       });
@@ -167,14 +181,16 @@ cr.define('devices_page', function() {
       const configurationDescriptorElement =
           tabPanelClone.querySelector('.configuration-descriptor-panel');
       const configurationDescriptorPanel = new descriptor_panel.DescriptorPanel(
-          usbDeviceProxy, configurationDescriptorElement);
+          usbDeviceProxy, configurationDescriptorElement,
+          stringDescriptorPanel);
       getConfigurationDescriptorButton.addEventListener('click', () => {
-        this.showConfigurationDescriptor_ = !this.showConfigurationDescriptor_;
+        configurationDescriptorElement.hidden =
+            !configurationDescriptorElement.hidden;
 
         // Clear the panel before rendering new data.
         configurationDescriptorPanel.clearView();
 
-        if (this.showConfigurationDescriptor_) {
+        if (!configurationDescriptorElement.hidden) {
           configurationDescriptorPanel.renderConfigurationDescriptor();
         }
       });

chrome/browser/resources/usb_internals/usb_internals.css

@@ -3,6 +3,13 @@
  * found in the LICENSE file.
  */
 
+ tabs {
+   position: sticky;
+   top: 0;
+   /* selected treeItem is 2 */
+   z-index: 3;
+ }
+
 /* Devices Tab */
 table.styled-table {
   border-collapse: collapse;
@@ -38,58 +45,76 @@ table.styled-table,
   width: 100%;
 }
 
+.descriptor-button {
+  position: sticky;
+  /* height of <tabs> */
+  top: 20px;
+  /* selected treeItem is 2 */
+  z-index: 3;
+}
+
 /* descriptor panel */
-.device-descriptor-panel,
-.configuration-descriptor-panel {
+.descriptor-panel {
   display: flex;
-  overflow: auto;
+  overflow: visible;
+}
+
+.string-descriptor-panel input {
+  margin-inline-end: 16px;
+  margin-inline-start: 8px;
 }
 
-#raw-data,
+#raw-data-byte-view,
 #raw-data-tree-view {
   flex: 1 0;
 }
 
-#raw-data {
+#raw-data-byte-view {
   font-size: 14px;
   line-height: 250%;
   white-space: pre;
 }
 
+#raw-data-byte-view div {
+  position: sticky;
+  /* height of <tabs> and button */
+  top: 41px;
+}
+
 @media screen and (min-width: 1200px) {
-  #raw-data span:nth-child(16n)::after {
+  #raw-data-byte-view div span:nth-child(16n)::after {
     content: '\A';
   }
 }
 
 @media screen and (min-width: 600px) and (max-width: 1199px) {
-  #raw-data span:nth-child(8n)::after {
+  #raw-data-byte-view div span:nth-child(8n)::after {
     content: '\A';
   }
 }
 
 @media screen and (min-width: 300px) and (max-width: 599px) {
-  #raw-data span:nth-child(4n)::after {
+  #raw-data-byte-view div span:nth-child(4n)::after {
     content: '\A';
   }
 }
 
 @media screen and (min-width: 150px) and (max-width: 299px) {
-  #raw-data span:nth-child(2n)::after {
+  #raw-data-byte-view div span:nth-child(2n)::after {
     content: '\A';
   }
 }
 
-#raw-data span {
+#raw-data-byte-view div span {
   padding-inline-end: .5em;
   padding-inline-start: .5em;
 }
 
-#raw-data .selected-field {
+#raw-data-byte-view .selected-field {
   background: red;
 }
 
-#raw-data .hovered-field {
+#raw-data-byte-view .hovered-field {
   background: yellow;
 }
 
@@ -99,6 +124,10 @@ table.styled-table,
   z-index: 1;
 }
 
+.tree-row button {
+  margin-inline-start: 16px;
+}
+
 error {
   color: red;
   display: block;

chrome/browser/resources/usb_internals/usb_internals.html

@@ -141,25 +141,47 @@
       <div class="descriptor-button">
         <button id="device-descriptor-button">Get Device Descriptor</button>
       </div>
-      <div class="device-descriptor-panel"></div>
+      <div class="device-descriptor-panel" hidden></div>
       <div class="descriptor-button">
         <button id="configuration-descriptor-button">
           Get Configuration Descriptor
         </button>
       </div>
-      <div class="configuration-descriptor-panel"></div>
+      <div class="configuration-descriptor-panel" hidden></div>
+      <div class="descriptor-button">
+        <button id="string-descriptor-button">Get String Descriptor</button>
+      </div>
+      <div class="string-descriptor-panel" hidden>
+        String Descriptor Index: 
+        <input id="index-input" type="number" min="1" list="indexes">
+        <datalist id="indexes"></datalist>
+        Language Code: 
+        <input id="language-code-input" list="languages">
+        <datalist id="languages"></datalist>
+        <button>GET</button>
+      </div>
     </tabpanel>
   </template>
 
   <template id="descriptor-panel-template">
-    <tree id="raw-data-tree-view"></tree>
-    <div id="raw-data"></div>
+    <div class="descriptor-panel">
+      <tree id="raw-data-tree-view"></tree>
+      <div id="raw-data-byte-view"></div>
+    </div>
   </template>
 
-  <template id="raw-data-byte">
+  <template id="raw-data-byte-container-template">
+    <div></div>>
+  </template>
+
+  <template id="raw-data-byte-template">
     <span></span>
   </template>
 
+  <template id="raw-data-tree-button">
+    <button>GET</button>
+  </template>
+
   <template id="error">
     <error></error>
   </template>