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 @@
* found in the LICENSE file.
*/
/* Devices Tab */
table.styled-table {
border-collapse: collapse;
}
......@@ -11,12 +12,12 @@ table.styled-table,
.styled-table th,
.styled-table td {
border: 1px solid #777;
padding-left: 4px;
padding-right: 4px;
padding-inline-end: 4px;
padding-inline-start: 4px;
}
.styled-table th {
text-align: left;
text-align: start;
}
.page-section {
......
chrome/browser/resources/usb_internals/usb_internals.html
View file @ 9a9a1c48
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>USB Internals</title>
<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">
<script src="chrome://resources/js/assert.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/util.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>
<script src="usb_internals.js"></script>
</head>
<body>
<tabbox>
<tabs>
<tab>Test Devices</tab>
</tabs>
<tabpanels>
<tabpanel>
<!-- Test Devices -->
<h2>Test Devices</h2>
<p>
<table class="styled-table">
<thead>
......@@ -26,9 +42,18 @@
</thead>
<tbody id="test-device-list">
</tbody>
<template id="test-device-row">
<tr>
<td></td>
<td></td>
<td></td>
<td><button>Remove</button></td>
</tr>
</template>
</table>
</p>
<div class="page-section">
<strong>Add a test device:</strong>
<form id="add-test-device-form" action="">
......@@ -39,7 +64,8 @@
</p>
<p>
<label>
Serial number: <input id="test-device-serial" type="text" size="40">
Serial number:
<input id="test-device-serial" type="text" size="40">
</label>
</p>
<p>
......@@ -48,8 +74,15 @@
<input id="test-device-landing-page" type="text" size="40">
</label>
</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>
</div>
</tabpanel>
</tabpanels>
</tabbox>
<script src="usb_internals.js"></script>
</body>
</html>
\ No newline at end of file
chrome/browser/resources/usb_internals/usb_internals.js
View file @ 9a9a1c48
......@@ -5,67 +5,75 @@
/**
* 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() {
// Connection to the UsbInternalsPageHandler instance running in the browser
// process.
let usbManagerTest = null;
const pageHandler = new mojom.UsbInternalsPageHandlerPtr;
Mojo.bindInterface(
mojom.UsbInternalsPageHandler.name,
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');
tableBody.innerHTML = '';
const rowTemplate = document.querySelector('#test-device-row');
const td = rowTemplate.content.querySelectorAll('td');
for (const device of response.devices) {
const row = document.createElement('tr');
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();
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();
});
removeButton.textContent = 'Remove';
row.appendChild(name);
row.appendChild(serialNumber);
row.appendChild(landingPage);
remove.appendChild(removeButton);
row.appendChild(remove);
tableBody.appendChild(row);
tableBody.appendChild(clone);
}
});
}
}
async addTestDevice(event) {
event.preventDefault();
function addTestDevice(event) {
usbManagerTest
.addDeviceForTesting(
const response = await this.usbManagerTest.addDeviceForTesting(
$('test-device-name').value, $('test-device-serial').value,
$('test-device-landing-page').value)
.then(function(response) {
$('test-device-landing-page').value);
if (response.success) {
refreshDeviceList();
this.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 pageHandler = new mojom.UsbInternalsPageHandlerPtr;
Mojo.bindInterface(
mojom.UsbInternalsPageHandler.name, mojo.makeRequest(pageHandler).handle);
}
}
usbManagerTest = new device.mojom.UsbDeviceManagerTestPtr;
pageHandler.bindTestInterface(mojo.makeRequest(usbManagerTest));
return {
UsbInternals,
};
});
$('add-test-device-form').addEventListener('submit', addTestDevice);
refreshDeviceList();
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 @@
#include "chrome/browser/ui/webui/usb_internals/usb_internals_ui.h"
#include <utility>
#include "base/bind.h"
#include "chrome/browser/profiles/profile.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