Skip to content

GitLab

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

Add tabs to USB internals page. 

This change lays a foundation for adding additional functionality to this
page by adding a router for subpanals and a navigation bar (tabs) listing
the one (current) feature.

Bug: 928923
Change-Id: Ia29c27dbf9e8edbf56a84d81818c7ce20ed698d7
Reviewed-on: https://chromium-review.googlesource.com/c/1455268
Commit-Queue: Nancy Li <nancyly@google.com>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: default avatarcalamity <calamity@chromium.org>
Reviewed-by: default avatarReilly Grant <reillyg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#632044}
parent 16536d8d
Hide whitespace changes
Inline Side-by-side
Showing with 163 additions and 99 deletions
chrome/browser/resources/usb_internals/BUILD.gn 0 → 100644
View file @ 9a9a1c48
# 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.
import("//third_party/closure_compiler/compile_js.gni")
js_type_check("closure_compile") {
deps = [
":usb_internals",
]
}
js_library("usb_internals") {
sources = [
"usb_internals.js",
]
deps = [
"//chrome/browser/ui/webui/usb_internals:mojo_bindings_js_externs",
"//ui/webui/resources/js:cr",
"//ui/webui/resources/js:util",
"//ui/webui/resources/js/cr/ui:tabs",
]
}
chrome/browser/resources/usb_internals/usb_internals.css
View file @ 9a9a1c48
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
* found in the LICENSE file. * found in the LICENSE file.
*/ */
/* Devices Tab */
table.styled-table { table.styled-table {
border-collapse: collapse; border-collapse: collapse;
} }
...@@ -11,12 +12,12 @@ table.styled-table, ...@@ -11,12 +12,12 @@ table.styled-table,
.styled-table th, .styled-table th,
.styled-table td { .styled-table td {
border: 1px solid #777; border: 1px solid #777;
padding-left: 4px; padding-inline-end: 4px;
padding-right: 4px; padding-inline-start: 4px;
} }
.styled-table th { .styled-table th {
text-align: left; text-align: start;
} }
.page-section { .page-section {
......
chrome/browser/resources/usb_internals/usb_internals.html
View file @ 9a9a1c48
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>USB Internals</title> <title>USB Internals</title>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="chrome://resources/css/tabs.css">
<link rel="stylesheet" href="usb_internals.css"> <link rel="stylesheet" href="usb_internals.css">
<script src="chrome://resources/js/assert.js"></script>
<script src="chrome://resources/js/cr.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/mojo_bindings.js"></script> <script src="chrome://resources/js/mojo_bindings.js"></script>
<script src="chrome://resources/js/util.js"></script> <script src="chrome://resources/js/util.js"></script>
<script src="device/usb/public/mojom/device_manager_test.mojom.js"></script> <script src="device/usb/public/mojom/device_manager_test.mojom.js"></script>
<script src="chrome/browser/ui/webui/usb_internals/usb_internals.mojom.js"> <script src="chrome/browser/ui/webui/usb_internals/usb_internals.mojom.js">
</script> </script>
<script src="usb_internals.js"></script>
</head> </head>
<body> <body>
<p> <tabbox>
<table class="styled-table"> <tabs>
<thead> <tab>Test Devices</tab>
<tr> </tabs>
<th>Name</th> <tabpanels>
<th>Serial number</th> <tabpanel>
<th>Landing page</th> <!-- Test Devices -->
<th> <h2>Test Devices</h2>
</tr> <p>
</thead> <table class="styled-table">
<tbody id="test-device-list"> <thead>
</tbody> <tr>
</table> <th>Name</th>
</p> <th>Serial number</th>
<th>Landing page</th>
<th>
</tr>
</thead>
<tbody id="test-device-list">
</tbody>
<div class="page-section"> <template id="test-device-row">
<strong>Add a test device:</strong> <tr>
<form id="add-test-device-form" action=""> <td></td>
<p> <td></td>
<label> <td></td>
Name: <input id="test-device-name" type="text" size="40"> <td><button>Remove</button></td>
</label> </tr>
</p> </template>
<p>
<label> </table>
Serial number: <input id="test-device-serial" type="text" size="40"> </p>
</label> <div class="page-section">
</p> <strong>Add a test device:</strong>
<p> <form id="add-test-device-form" action="">
<label> <p>
Landing page: <label>
<input id="test-device-landing-page" type="text" size="40"> Name: <input id="test-device-name" type="text" size="40">
</label> </label>
</p> </p>
<button type="submit">Add</button> <span id="add-test-device-result"></span> <p>
</form> <label>
</div> Serial number:
<input id="test-device-serial" type="text" size="40">
</label>
</p>
<p>
<label>
Landing page:
<input id="test-device-landing-page" type="text" size="40">
</label>
</p>
<button type="submit">Add</button>
<span id="add-test-device-result"></span>
</form>
</div>
</tabpanel>
</tabpanels>
</tabbox>
<script src="usb_internals.js"></script>
</body> </body>
</html>
</html>
\ No newline at end of file
chrome/browser/resources/usb_internals/usb_internals.js
View file @ 9a9a1c48
...@@ -5,67 +5,75 @@ ...@@ -5,67 +5,75 @@
/** /**
* Javascript for usb_internals.html, served from chrome://usb-internals/. * Javascript for usb_internals.html, served from chrome://usb-internals/.
*/ */
cr.define('usb_internals', function() {
class UsbInternals {
constructor() {
// Connection to the UsbInternalsPageHandler instance running in the
// browser process.
this.usbManagerTest = null;
(function() { const pageHandler = new mojom.UsbInternalsPageHandlerPtr;
// Connection to the UsbInternalsPageHandler instance running in the browser Mojo.bindInterface(
// process. mojom.UsbInternalsPageHandler.name,
let usbManagerTest = null; mojo.makeRequest(pageHandler).handle);
function refreshDeviceList() { this.usbManagerTest = new device.mojom.UsbDeviceManagerTestPtr;
usbManagerTest.getTestDevices().then(function(response) { pageHandler.bindTestInterface(mojo.makeRequest(this.usbManagerTest));
const tableBody = $('test-device-list');
tableBody.innerHTML = ''; cr.ui.decorate('tabbox', cr.ui.TabBox);
for (const device of response.devices) { $('add-test-device-form').addEventListener('submit', (event) => {
const row = document.createElement('tr'); this.addTestDevice(event);
const name = document.createElement('td');
const serialNumber = document.createElement('td');
const landingPage = document.createElement('td');
const remove = document.createElement('td');
const removeButton = document.createElement('button');
name.textContent = device.name;
serialNumber.textContent = device.serialNumber;
landingPage.textContent = device.landingPage.url;
removeButton.addEventListener('click', async function() {
await usbManagerTest.removeDeviceForTesting(device.guid);
refreshDeviceList();
}); });
removeButton.textContent = 'Remove'; this.refreshDeviceList();
row.appendChild(name);
row.appendChild(serialNumber);
row.appendChild(landingPage);
remove.appendChild(removeButton);
row.appendChild(remove);
tableBody.appendChild(row);
} }
});
}
function addTestDevice(event) { async refreshDeviceList() {
usbManagerTest const response = await this.usbManagerTest.getTestDevices();
.addDeviceForTesting(
$('test-device-name').value, $('test-device-serial').value,
$('test-device-landing-page').value)
.then(function(response) {
if (response.success) {
refreshDeviceList();
}
$('add-test-device-result').textContent = response.message;
$('add-test-device-result').className =
response.success ? 'action-success' : 'action-failure';
});
event.preventDefault();
}
document.addEventListener('DOMContentLoaded', function() { const tableBody = $('test-device-list');
const pageHandler = new mojom.UsbInternalsPageHandlerPtr; tableBody.innerHTML = '';
Mojo.bindInterface(
mojom.UsbInternalsPageHandler.name, mojo.makeRequest(pageHandler).handle);
usbManagerTest = new device.mojom.UsbDeviceManagerTestPtr; const rowTemplate = document.querySelector('#test-device-row');
pageHandler.bindTestInterface(mojo.makeRequest(usbManagerTest)); const td = rowTemplate.content.querySelectorAll('td');
$('add-test-device-form').addEventListener('submit', addTestDevice); for (const device of response.devices) {
refreshDeviceList(); td[0].textContent = device.name;
td[1].textContent = device.serialNumber;
td[2].textContent = device.landingPage.url;
const clone = document.importNode(rowTemplate.content, true);
const removeButton = clone.querySelector('button');
removeButton.addEventListener('click', async () => {
await this.usbManagerTest.removeDeviceForTesting(device.guid);
this.refreshDeviceList();
});
tableBody.appendChild(clone);
}
}
async addTestDevice(event) {
event.preventDefault();
const response = await this.usbManagerTest.addDeviceForTesting(
$('test-device-name').value, $('test-device-serial').value,
$('test-device-landing-page').value);
if (response.success) {
this.refreshDeviceList();
}
$('add-test-device-result').textContent = response.message;
$('add-test-device-result').className =
response.success ? 'action-success' : 'action-failure';
}
}
return {
UsbInternals,
};
}); });
})();
document.addEventListener('DOMContentLoaded', () => {
new usb_internals.UsbInternals();
});
\ No newline at end of file
chrome/browser/ui/webui/usb_internals/usb_internals_ui.cc
View file @ 9a9a1c48
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
#include "chrome/browser/ui/webui/usb_internals/usb_internals_ui.h" #include "chrome/browser/ui/webui/usb_internals/usb_internals_ui.h"
#include <utility>
#include "base/bind.h" #include "base/bind.h"
#include "chrome/browser/profiles/profile.h" #include "chrome/browser/profiles/profile.h"
#include "chrome/browser/ui/webui/usb_internals/usb_internals_page_handler.h" #include "chrome/browser/ui/webui/usb_internals/usb_internals_page_handler.h"
......
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