Skip to content

GitLab

T
tangled
Commit bf4b8ba2 authored by Nancy Li's avatar Nancy Li Committed by Commit Bot
Browse files
Options

[USB Internals WebUI] Code cleanup for devicePage 

Added a new function to initialize a descriptor panel, which includes
create a new panel object and binding click actions.

Changed unnecessary id attribute to class.

Bug: 928923
Change-Id: Ic352befdc512738bad5928485e3c4c048e09f263
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1639739Reviewed-by: default avatarReilly Grant <reillyg@chromium.org>
Commit-Queue: Nancy Li <nancyly@google.com>
Cr-Commit-Position: refs/heads/master@{#666186}
parent b8cef37c
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 140 deletions
chrome/browser/resources/usb_internals/descriptor_panel.js
View file @ bf4b8ba2
...@@ -112,22 +112,23 @@ cr.define('descriptor_panel', function() { ...@@ -112,22 +112,23 @@ cr.define('descriptor_panel', function() {
/** /**
* @param {!device.mojom.UsbDeviceInterface} usbDeviceProxy * @param {!device.mojom.UsbDeviceInterface} usbDeviceProxy
* @param {!HTMLElement} rootElement * @param {!HTMLElement} rootElement
* @param {DescriptorPanel=} stringDescriptorPanel
*/ */
constructor( constructor(usbDeviceProxy, rootElement) {
usbDeviceProxy, rootElement, stringDescriptorPanel = undefined) {
/** @private {!device.mojom.UsbDeviceInterface} */ /** @private {!device.mojom.UsbDeviceInterface} */
this.usbDeviceProxy_ = usbDeviceProxy; this.usbDeviceProxy_ = usbDeviceProxy;
/** @private {!HTMLElement} */ /** @private {!HTMLElement} */
this.rootElement_ = rootElement; this.rootElement_ = rootElement;
}
this.clearView(); /**
* Adds the reference of the string descriptor panel of the device for
if (stringDescriptorPanel) { * string descriptor functionality.
/** @private {!DescriptorPanel} */ * @param {!DescriptorPanel} stringDescriptorPanel
this.stringDescriptorPanel_ = stringDescriptorPanel; */
} setStringDescriptorPanel(stringDescriptorPanel) {
/** @private {!DescriptorPanel} */
this.stringDescriptorPanel_ = stringDescriptorPanel;
} }
/** /**
...@@ -144,10 +145,10 @@ cr.define('descriptor_panel', function() { ...@@ -144,10 +145,10 @@ cr.define('descriptor_panel', function() {
/** @private {!HTMLElement} */ /** @private {!HTMLElement} */
const rawDataTreeRoot = const rawDataTreeRoot =
descriptorPanelClone.querySelector('#raw-data-tree-view'); descriptorPanelClone.querySelector('.raw-data-tree-view');
/** @private {!HTMLElement} */ /** @private {!HTMLElement} */
const rawDataByteElement = const rawDataByteElement =
descriptorPanelClone.querySelector('#raw-data-byte-view'); descriptorPanelClone.querySelector('.raw-data-byte-view');
cr.ui.decorate(rawDataTreeRoot, cr.ui.Tree); cr.ui.decorate(rawDataTreeRoot, cr.ui.Tree);
rawDataTreeRoot.detail = {payload: {}, children: {}}; rawDataTreeRoot.detail = {payload: {}, children: {}};
...@@ -2929,7 +2930,7 @@ cr.define('descriptor_panel', function() { ...@@ -2929,7 +2930,7 @@ cr.define('descriptor_panel', function() {
el.addEventListener('click', (event) => { el.addEventListener('click', (event) => {
if (event.target.className != 'expand-icon') { if (event.target.className != 'expand-icon') {
// Clears all the selected elements before select another. // Clears all the selected elements before select another.
rawDataByteElement.querySelectorAll('#raw-data-byte-view span') rawDataByteElement.querySelectorAll('.raw-data-byte-view span')
.forEach((el) => el.classList.remove('selected-field')); .forEach((el) => el.classList.remove('selected-field'));
rawDataByteElement rawDataByteElement
......
chrome/browser/resources/usb_internals/devices_page.js
View file @ bf4b8ba2
...@@ -124,14 +124,15 @@ cr.define('devices_page', function() { ...@@ -124,14 +124,15 @@ cr.define('devices_page', function() {
cr.ui.decorate('tab', cr.ui.Tab); cr.ui.decorate('tab', cr.ui.Tab);
const tabPanels = document.querySelector('tabpanels'); const tabPanels = document.querySelector('tabpanels');
const tabPanelTemplate = document.querySelector('#tabpanel-template'); const tabPanelTemplate =
document.querySelector('#device-tabpanel-template');
const tabPanelClone = document.importNode(tabPanelTemplate.content, true); const tabPanelClone = document.importNode(tabPanelTemplate.content, true);
/** /**
* Root of the WebContents tree of current device. * Root of the WebContents tree of current device.
* @type {?cr.ui.Tree} * @type {?cr.ui.Tree}
*/ */
const treeViewRoot = tabPanelClone.querySelector('#tree-view'); const treeViewRoot = tabPanelClone.querySelector('.tree-view');
cr.ui.decorate(treeViewRoot, cr.ui.Tree); cr.ui.decorate(treeViewRoot, cr.ui.Tree);
treeViewRoot.detail = {payload: {}, children: {}}; treeViewRoot.detail = {payload: {}, children: {}};
// Clear the tree first before populating it with the new content. // Clear the tree first before populating it with the new content.
...@@ -148,95 +149,28 @@ cr.define('devices_page', function() { ...@@ -148,95 +149,28 @@ cr.define('devices_page', function() {
/** /**
* Initializes all the descriptor panels. * Initializes all the descriptor panels.
* @param {!HTMLElement} tabPanel * @param {!HTMLElement} tabPanel
* @param {number} guid * @param {string} guid
* @private * @private
*/ */
async initializeDescriptorPanels_(tabPanel, guid) { async initializeDescriptorPanels_(tabPanel, guid) {
const usbDeviceProxy = new UsbDeviceProxy; const usbDeviceProxy = new UsbDeviceProxy;
await this.usbManager_.getDevice(guid, usbDeviceProxy.$.createRequest()); await this.usbManager_.getDevice(guid, usbDeviceProxy.$.createRequest());
const getStringDescriptorButton = const deviceDescriptorPanel = initialInspectorPanel(
tabPanel.querySelector('#string-descriptor-button'); tabPanel, 'device-descriptor', usbDeviceProxy, guid);
const stringDescriptorElement =
tabPanel.querySelector('.string-descriptor-panel'); const configurationDescriptorPanel = initialInspectorPanel(
const stringDescriptorPanel = new descriptor_panel.DescriptorPanel( tabPanel, 'configuration-descriptor', usbDeviceProxy, guid);
usbDeviceProxy, stringDescriptorElement);
stringDescriptorPanel.initialStringDescriptorPanel(guid); const stringDescriptorPanel = initialInspectorPanel(
getStringDescriptorButton.addEventListener('click', () => { tabPanel, 'string-descriptor', usbDeviceProxy, guid);
stringDescriptorElement.hidden = !stringDescriptorElement.hidden; deviceDescriptorPanel.setStringDescriptorPanel(stringDescriptorPanel);
configurationDescriptorPanel.setStringDescriptorPanel(
// Clear the panel before rendering new data.
stringDescriptorPanel.clearView();
if (!stringDescriptorElement.hidden) {
stringDescriptorPanel.getAllLanguageCodes();
}
});
const getDeviceDescriptorButton =
tabPanel.querySelector('#device-descriptor-button');
const deviceDescriptorElement =
tabPanel.querySelector('.device-descriptor-panel');
const deviceDescriptorPanel = new descriptor_panel.DescriptorPanel(
usbDeviceProxy, deviceDescriptorElement, stringDescriptorPanel);
getDeviceDescriptorButton.addEventListener('click', () => {
deviceDescriptorElement.hidden = !deviceDescriptorElement.hidden;
// Clear the panel before rendering new data.
deviceDescriptorPanel.clearView();
if (!deviceDescriptorElement.hidden) {
deviceDescriptorPanel.renderDeviceDescriptor();
}
});
const getConfigurationDescriptorButton =
tabPanel.querySelector('#configuration-descriptor-button');
const configurationDescriptorElement =
tabPanel.querySelector('.configuration-descriptor-panel');
const configurationDescriptorPanel = new descriptor_panel.DescriptorPanel(
usbDeviceProxy, configurationDescriptorElement,
stringDescriptorPanel); stringDescriptorPanel);
getConfigurationDescriptorButton.addEventListener('click', () => {
configurationDescriptorElement.hidden =
!configurationDescriptorElement.hidden;
// Clear the panel before rendering new data. initialInspectorPanel(tabPanel, 'bos-descriptor', usbDeviceProxy, guid);
configurationDescriptorPanel.clearView();
if (!configurationDescriptorElement.hidden) { initialInspectorPanel(tabPanel, 'testing-tool', usbDeviceProxy, guid);
configurationDescriptorPanel.renderConfigurationDescriptor();
}
});
const getBosDescriptorButton =
tabPanel.querySelector('#bos-descriptor-button');
const bosDescriptorElement =
tabPanel.querySelector('.bos-descriptor-panel');
const bosDescriptorPanel = new descriptor_panel.DescriptorPanel(
usbDeviceProxy, bosDescriptorElement);
getBosDescriptorButton.addEventListener('click', () => {
bosDescriptorElement.hidden = !bosDescriptorElement.hidden;
// Clear the panel before rendering new data.
bosDescriptorPanel.clearView();
if (!bosDescriptorElement.hidden) {
bosDescriptorPanel.renderBosDescriptor();
}
});
const testingToolPanelButton =
tabPanel.querySelector('#testing-tool-button');
const testingToolElement = tabPanel.querySelector('.testing-tool-panel');
const testingToolPanel = new descriptor_panel.DescriptorPanel(
usbDeviceProxy, testingToolElement);
testingToolPanel.initialTestingToolPanel();
testingToolPanelButton.addEventListener('click', () => {
testingToolElement.hidden = !testingToolElement.hidden;
// Clear the panel before rendering new data.
testingToolPanel.clearView();
});
// window.deviceTabInitializedFn() provides a hook for the test suite to // window.deviceTabInitializedFn() provides a hook for the test suite to
// perform test actions after the device tab query descriptors actions are // perform test actions after the device tab query descriptors actions are
...@@ -418,6 +352,53 @@ cr.define('devices_page', function() { ...@@ -418,6 +352,53 @@ cr.define('devices_page', function() {
} }
} }
/**
* Initialize a descriptor panel.
* @param {!HTMLElement} tabPanel
* @param {string} panelType
* @param {!device.mojom.UsbDeviceInterface} usbDeviceProxy
* @param {string} guid
* @return {!descriptor_panel.DescriptorPanel}
*/
function initialInspectorPanel(tabPanel, panelType, usbDeviceProxy, guid) {
const button = tabPanel.querySelector(`.${panelType}-button`);
const displayElement = tabPanel.querySelector(`.${panelType}-panel`);
const descriptorPanel =
new descriptor_panel.DescriptorPanel(usbDeviceProxy, displayElement);
switch (panelType) {
case 'string-descriptor':
descriptorPanel.initialStringDescriptorPanel(guid);
break;
case 'testing-tool':
descriptorPanel.initialTestingToolPanel();
break;
}
button.addEventListener('click', () => {
displayElement.hidden = !displayElement.hidden;
// Clear the panel before rendering new data.
descriptorPanel.clearView();
if (!displayElement.hidden) {
switch (panelType) {
case 'device-descriptor':
descriptorPanel.renderDeviceDescriptor();
break;
case 'configuration-descriptor':
descriptorPanel.renderConfigurationDescriptor();
break;
case 'string-descriptor':
descriptorPanel.getAllLanguageCodes();
break;
case 'bos-descriptor':
descriptorPanel.renderBosDescriptor();
break;
}
}
});
return descriptorPanel;
}
/** /**
* Parses utf16 coded string. * Parses utf16 coded string.
* @param {!mojoBase.mojom.String16} arr * @param {!mojoBase.mojom.String16} arr
......
chrome/browser/resources/usb_internals/usb_internals.css
View file @ bf4b8ba2
...@@ -69,58 +69,58 @@ descriptorpaneltitle { ...@@ -69,58 +69,58 @@ descriptorpaneltitle {
margin-inline-start: 8px; margin-inline-start: 8px;
} }
#raw-data-byte-view, .raw-data-byte-view,
#raw-data-tree-view { .raw-data-tree-view {
flex: 1 0; flex: 1 0;
} }
#raw-data-byte-view { .raw-data-byte-view {
font-size: 14px; font-size: 14px;
line-height: 250%; line-height: 250%;
white-space: pre; white-space: pre;
} }
#raw-data-byte-view div { .raw-data-byte-view div {
position: sticky; position: sticky;
/* height of <tabs> and button */ /* height of <tabs> and button */
top: 41px; top: 41px;
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
#raw-data-byte-view div span:nth-child(16n)::after { .raw-data-byte-view div span:nth-child(16n)::after {
content: '\A'; content: '\A';
} }
} }
@media screen and (min-width: 600px) and (max-width: 1199px) { @media screen and (min-width: 600px) and (max-width: 1199px) {
#raw-data-byte-view div span:nth-child(8n)::after { .raw-data-byte-view div span:nth-child(8n)::after {
content: '\A'; content: '\A';
} }
} }
@media screen and (min-width: 300px) and (max-width: 599px) { @media screen and (min-width: 300px) and (max-width: 599px) {
#raw-data-byte-view div span:nth-child(4n)::after { .raw-data-byte-view div span:nth-child(4n)::after {
content: '\A'; content: '\A';
} }
} }
@media screen and (min-width: 150px) and (max-width: 299px) { @media screen and (min-width: 150px) and (max-width: 299px) {
#raw-data-byte-view div span:nth-child(2n)::after { .raw-data-byte-view div span:nth-child(2n)::after {
content: '\A'; content: '\A';
} }
} }
#raw-data-byte-view div span { .raw-data-byte-view div span {
font-family: monospace; font-family: monospace;
padding-inline-end: .5em; padding-inline-end: .5em;
padding-inline-start: .5em; padding-inline-start: .5em;
} }
#raw-data-byte-view .selected-field { .raw-data-byte-view .selected-field {
background: red; background: red;
} }
#raw-data-byte-view .hovered-field { .raw-data-byte-view .hovered-field {
background: yellow; background: yellow;
} }
......
chrome/browser/resources/usb_internals/usb_internals.html
View file @ bf4b8ba2
...@@ -135,21 +135,21 @@ ...@@ -135,21 +135,21 @@
<tab></tab> <tab></tab>
</template> </template>
<template id="tabpanel-template"> <template id="device-tabpanel-template">
<tabpanel> <tabpanel>
<tree id="tree-view"></tree> <tree class="tree-view"></tree>
<div class="descriptor-button"> <div class="descriptor-button">
<button id="device-descriptor-button">Get Device Descriptor</button> <button class="device-descriptor-button">Get Device Descriptor</button>
</div> </div>
<div class="device-descriptor-panel" hidden></div> <div class="device-descriptor-panel" hidden></div>
<div class="descriptor-button"> <div class="descriptor-button">
<button id="configuration-descriptor-button"> <button class="configuration-descriptor-button">
Get Configuration Descriptor Get Configuration Descriptor
</button> </button>
</div> </div>
<div class="configuration-descriptor-panel" hidden></div> <div class="configuration-descriptor-panel" hidden></div>
<div class="descriptor-button"> <div class="descriptor-button">
<button id="string-descriptor-button">Get String Descriptor</button> <button class="string-descriptor-button">Get String Descriptor</button>
</div> </div>
<div class="string-descriptor-panel" hidden> <div class="string-descriptor-panel" hidden>
String Descriptor Index: String Descriptor Index:
...@@ -161,13 +161,13 @@ ...@@ -161,13 +161,13 @@
<button>GET</button> <button>GET</button>
</div> </div>
<div class="descriptor-button"> <div class="descriptor-button">
<button id="bos-descriptor-button"> <button class="bos-descriptor-button">
Get WebUSB & Microsoft OS 2.0 Descriptors Get WebUSB & Microsoft OS 2.0 Descriptors
</button> </button>
</div> </div>
<div class="bos-descriptor-panel" hidden></div> <div class="bos-descriptor-panel" hidden></div>
<div class="descriptor-button"> <div class="descriptor-button">
<button id="testing-tool-button">Testing Tool Panel</button> <button class="testing-tool-button">Testing Tool Panel</button>
</div> </div>
<div class="testing-tool-panel" hidden> <div class="testing-tool-panel" hidden>
<select id="input-type"> <select id="input-type">
...@@ -205,33 +205,23 @@ ...@@ -205,33 +205,23 @@
<option label="Other" value="OTHER"></option> <option label="Other" value="OTHER"></option>
</select> </select>
</td> </td>
<td><input id="query-request" type="number" value="0"></td> <td><input id="query-request" type="number" placeholder="0"></td>
<td><input id="query-value" type="number" value="0"></td> <td><input id="query-value" type="number" placeholder="0"></td>
<td><input id="query-index" type="number" value="0"></td> <td><input id="query-index" type="number" placeholder="0"></td>
<td><input id="query-length" type="number" value="0"></td> <td><input id="query-length" type="number" placeholder="0"></td>
<td><button>Send</button></td> <td><button>Send</button></td>
</tr> </tr>
<tr hidden> <tr hidden>
<td> <td>0x<input id="query-request-type" placeholder="00"></td>
0x<input id="query-request-type" type="number" placeholder="00"> <td>0x<input id="query-request" placeholder="00"></td>
</td> <td>0x<input id="query-value" placeholder="0000"></td>
<td> <td>0x<input id="query-index" placeholder="0000"></td>
0x<input id="query-request" type="number" placeholder="00"> <td>0x<input id="query-length" placeholder="0000"></td>
</td>
<td>
0x<input id="query-value" type="number" placeholder="0000">
</td>
<td>
0x<input id="query-index" type="number" placeholder="0000">
</td>
<td>
0x<input id="query-length" type="number" placeholder="0000">
</td>
<td><button>Send</button></td> <td><button>Send</button></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div id='data-input-area'> <div id="data-input-area">
Data (in Hex): Data (in Hex):
<textarea cols="31"></textarea> <textarea cols="31"></textarea>
</div> </div>
...@@ -241,8 +231,8 @@ ...@@ -241,8 +231,8 @@
<template id="descriptor-panel-template"> <template id="descriptor-panel-template">
<descriptorpanel> <descriptorpanel>
<tree id="raw-data-tree-view"></tree> <tree class="raw-data-tree-view"></tree>
<div id="raw-data-byte-view"></div> <div class="raw-data-byte-view"></div>
</descriptorpanel> </descriptorpanel>
</template> </template>
......
chrome/test/data/webui/usb_internals_browsertest.js
View file @ bf4b8ba2
...@@ -391,7 +391,7 @@ TEST_F('UsbInternalsTest', 'WebUICorrectValueRenderTest', function() { ...@@ -391,7 +391,7 @@ TEST_F('UsbInternalsTest', 'WebUICorrectValueRenderTest', function() {
// The tab panel of the first device is opened in previous test as the // The tab panel of the first device is opened in previous test as the
// third tab panel. This device has correct device descriptor. // third tab panel. This device has correct device descriptor.
const deviceTab = document.querySelectorAll('tabpanel')[2]; const deviceTab = document.querySelectorAll('tabpanel')[2];
deviceTab.querySelector('#device-descriptor-button').click(); deviceTab.querySelector('.device-descriptor-button').click();
await deviceDescriptorRenderPromise; await deviceDescriptorRenderPromise;
const panel = deviceTab.querySelector('.device-descriptor-panel'); const panel = deviceTab.querySelector('.device-descriptor-panel');
...@@ -418,11 +418,11 @@ TEST_F('UsbInternalsTest', 'WebUICorrectValueRenderTest', function() { ...@@ -418,11 +418,11 @@ TEST_F('UsbInternalsTest', 'WebUICorrectValueRenderTest', function() {
expectEquals('Product String Index: 2GET', treeItems[11].textContent); expectEquals('Product String Index: 2GET', treeItems[11].textContent);
expectEquals('Serial Number Index: 0', treeItems[12].textContent); expectEquals('Serial Number Index: 0', treeItems[12].textContent);
expectEquals('Number of Configurations: 1', treeItems[13].textContent); expectEquals('Number of Configurations: 1', treeItems[13].textContent);
const byteElements = panel.querySelectorAll('#raw-data-byte-view span'); const byteElements = panel.querySelectorAll('.raw-data-byte-view span');
expectEquals(18, byteElements.length); expectEquals(18, byteElements.length);
expectEquals( expectEquals(
'12010002000000405010EF17210301020001', '12010002000000405010EF17210301020001',
panel.querySelector('#raw-data-byte-view').textContent); panel.querySelector('.raw-data-byte-view').textContent);
// Click a single byte tree item (Length) and check that both the item // Click a single byte tree item (Length) and check that both the item
// and the related byte are highlighted. // and the related byte are highlighted.
...@@ -493,7 +493,7 @@ TEST_F('UsbInternalsTest', 'WebUIIncorrectValueRenderTest', function() { ...@@ -493,7 +493,7 @@ TEST_F('UsbInternalsTest', 'WebUIIncorrectValueRenderTest', function() {
const deviceTab = document.querySelectorAll('tabpanel')[2]; const deviceTab = document.querySelectorAll('tabpanel')[2];
await deviceTabInitializedPromise; await deviceTabInitializedPromise;
deviceTab.querySelector('#device-descriptor-button').click(); deviceTab.querySelector('.device-descriptor-button').click();
await deviceDescriptorRenderPromise; await deviceDescriptorRenderPromise;
const panel = deviceTab.querySelector('.device-descriptor-panel'); const panel = deviceTab.querySelector('.device-descriptor-panel');
...@@ -516,11 +516,11 @@ TEST_F('UsbInternalsTest', 'WebUIIncorrectValueRenderTest', function() { ...@@ -516,11 +516,11 @@ TEST_F('UsbInternalsTest', 'WebUIIncorrectValueRenderTest', function() {
expectEquals( expectEquals(
'Control Pipe Maximum Packet Size: 64', treeItems[6].textContent); 'Control Pipe Maximum Packet Size: 64', treeItems[6].textContent);
const byteElements = panel.querySelectorAll('#raw-data-byte-view span'); const byteElements = panel.querySelectorAll('.raw-data-byte-view span');
expectEquals(9, byteElements.length); expectEquals(9, byteElements.length);
expectEquals( expectEquals(
'120100020000004050', '120100020000004050',
panel.querySelector('#raw-data-byte-view').textContent); panel.querySelector('.raw-data-byte-view').textContent);
// Click a single byte tree item (Length) and check that both the item // Click a single byte tree item (Length) and check that both the item
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment