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
Show 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>
<tabbox>
<tabs>
<tab>Test Devices</tab>
</tabs>
<tabpanels>
<tabpanel>
<!-- Test Devices -->
<h2>Test Devices</h2>
<p> <p>
<table class="styled-table"> <table class="styled-table">
<thead> <thead>
...@@ -26,9 +42,18 @@ ...@@ -26,9 +42,18 @@
</thead> </thead>
<tbody id="test-device-list"> <tbody id="test-device-list">
</tbody> </tbody>
<template id="test-device-row">
<tr>
<td></td>
<td></td>
<td></td>
<td><button>Remove</button></td>
</tr>
</template>
</table> </table>
</p> </p>
<div class="page-section"> <div class="page-section">
<strong>Add a test device:</strong> <strong>Add a test device:</strong>
<form id="add-test-device-form" action=""> <form id="add-test-device-form" action="">
...@@ -39,7 +64,8 @@ ...@@ -39,7 +64,8 @@
</p> </p>
<p> <p>
<label> <label>
Serial number: <input id="test-device-serial" type="text" size="40"> Serial number:
<input id="test-device-serial" type="text" size="40">
</label> </label>
</p> </p>
<p> <p>
...@@ -48,8 +74,15 @@ ...@@ -48,8 +74,15 @@
<input id="test-device-landing-page" type="text" size="40"> <input id="test-device-landing-page" type="text" size="40">
</label> </label>
</p> </p>
<button type="submit">Add</button> <span id="add-test-device-result"></span> <button type="submit">Add</button>
<span id="add-test-device-result"></span>
</form> </form>
</div> </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);
this.usbManagerTest = new device.mojom.UsbDeviceManagerTestPtr;
pageHandler.bindTestInterface(mojo.makeRequest(this.usbManagerTest));
cr.ui.decorate('tabbox', cr.ui.TabBox);
$('add-test-device-form').addEventListener('submit', (event) => {
this.addTestDevice(event);
});
this.refreshDeviceList();
}
async refreshDeviceList() {
const response = await this.usbManagerTest.getTestDevices();
function refreshDeviceList() {
usbManagerTest.getTestDevices().then(function(response) {
const tableBody = $('test-device-list'); const tableBody = $('test-device-list');
tableBody.innerHTML = ''; tableBody.innerHTML = '';
const rowTemplate = document.querySelector('#test-device-row');
const td = rowTemplate.content.querySelectorAll('td');
for (const device of response.devices) { for (const device of response.devices) {
const row = document.createElement('tr'); td[0].textContent = device.name;
const name = document.createElement('td'); td[1].textContent = device.serialNumber;
const serialNumber = document.createElement('td'); td[2].textContent = device.landingPage.url;
const landingPage = document.createElement('td');
const remove = document.createElement('td'); const clone = document.importNode(rowTemplate.content, true);
const removeButton = document.createElement('button');
name.textContent = device.name; const removeButton = clone.querySelector('button');
serialNumber.textContent = device.serialNumber; removeButton.addEventListener('click', async () => {
landingPage.textContent = device.landingPage.url; await this.usbManagerTest.removeDeviceForTesting(device.guid);
removeButton.addEventListener('click', async function() { this.refreshDeviceList();
await usbManagerTest.removeDeviceForTesting(device.guid);
refreshDeviceList();
}); });
removeButton.textContent = 'Remove';
row.appendChild(name); tableBody.appendChild(clone);
row.appendChild(serialNumber);
row.appendChild(landingPage);
remove.appendChild(removeButton);
row.appendChild(remove);
tableBody.appendChild(row);
} }
}); }
}
async addTestDevice(event) {
event.preventDefault();
function addTestDevice(event) { const response = await this.usbManagerTest.addDeviceForTesting(
usbManagerTest
.addDeviceForTesting(
$('test-device-name').value, $('test-device-serial').value, $('test-device-name').value, $('test-device-serial').value,
$('test-device-landing-page').value) $('test-device-landing-page').value);
.then(function(response) {
if (response.success) { if (response.success) {
refreshDeviceList(); this.refreshDeviceList();
} }
$('add-test-device-result').textContent = response.message; $('add-test-device-result').textContent = response.message;
$('add-test-device-result').className = $('add-test-device-result').className =
response.success ? 'action-success' : 'action-failure'; response.success ? 'action-success' : 'action-failure';
}); }
event.preventDefault(); }
}
document.addEventListener('DOMContentLoaded', function() {
const pageHandler = new mojom.UsbInternalsPageHandlerPtr;
Mojo.bindInterface(
mojom.UsbInternalsPageHandler.name, mojo.makeRequest(pageHandler).handle);
usbManagerTest = new device.mojom.UsbDeviceManagerTestPtr; return {
pageHandler.bindTestInterface(mojo.makeRequest(usbManagerTest)); UsbInternals,
};
});
$('add-test-device-form').addEventListener('submit', addTestDevice); document.addEventListener('DOMContentLoaded', () => {
refreshDeviceList(); 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