Skip to content

GitLab

T
tangled
Commit 3ef656f9 authored by Steven Bennetts's avatar Steven Bennetts Committed by Commit Bot
Browse files
Options

Improve chrome://device-log UI 

This improves the chrome://device-log UI as follows:
* Log level is a dropdown instead of separate checkboxes
* Type checkboxes are on a separate row with a 'clear' button

Bug: 1054951
Change-Id: Ie0694dfab61045d10b6d9d32b698d62a1d3950b7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2068877Reviewed-by: default avatarJames Vecore <vecore@google.com>
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744729}
parent d19c1568
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 51 deletions
chrome/app/generated_resources.grd
View file @ 3ef656f9
......@@ -9529,28 +9529,31 @@ Please help our engineers fix this problem. Tell us what happened right before y
<message name="IDS_DEVICE_AUTO_REFRESH" desc="Instructions for how to auto-refresh the page">
Add a query param in URL to auto-refresh the page: chrome://device-log/?refresh=&lt;sec&gt;
</message>
<message name="IDS_DEVICE_LOG_REFRESH" desc="Button to refresh device log">
<message name="IDS_DEVICE_LOG_REFRESH" desc="Button to refresh device log entries">
Refresh
</message>
<message name="IDS_DEVICE_LOG_CLEAR" desc="Button to clear device log">
<message name="IDS_DEVICE_LOG_CLEAR" desc="Button to clear device log entries">
Clear
</message>
<message name="IDS_DEVICE_LOG_CLEAR_TYPES" desc="Button to clear device type checkboxes">
Clear Types
</message>
<message name="IDS_DEVICE_LOG_NO_ENTRIES" desc="Text shown when device log is empty">
No log entries
</message>
<message name="IDS_DEVICE_LOG_LEVEL_SHOW" desc="'Show' label before logging level checkboxes">
Show:
<message name="IDS_DEVICE_LOG_LEVEL_LABEL" desc="Label for the logging level select dropdown">
Log Level:
</message>
<message name="IDS_DEVICE_LOG_LEVEL_ERROR" desc="Error logging level checkbox">
<message name="IDS_DEVICE_LOG_LEVEL_ERROR" desc="Error logging level label">
Error
</message>
<message name="IDS_DEVICE_LOG_LEVEL_USER" desc="User logging level checkbox">
<message name="IDS_DEVICE_LOG_LEVEL_USER" desc="User logging level label">
User
</message>
<message name="IDS_DEVICE_LOG_LEVEL_EVENT" desc="Event logging level checkbox">
<message name="IDS_DEVICE_LOG_LEVEL_EVENT" desc="Event logging level label">
Event
</message>
<message name="IDS_DEVICE_LOG_LEVEL_DEBUG" desc="Debug logging level checkbox">
<message name="IDS_DEVICE_LOG_LEVEL_DEBUG" desc="Debug logging level label">
Debug
</message>
<message name="IDS_DEVICE_LOG_TYPE_LOGIN" desc="Checkbox to enable showing events of type LOGIN">
......
chrome/browser/resources/device_log_ui/device_log_ui.css
View file @ 3ef656f9
......@@ -13,16 +13,16 @@ body {
margin: 0;
}
#header {
div {
margin: 5px;
}
/* Checkboxes */
#log-checkbox-container {
margin: 5px;
button {
margin-inline-end: 5px;
}
/* Header */
#log-checkbox-container button {
margin-inline-end: 8px;
}
......@@ -31,24 +31,23 @@ body {
vertical-align: middle;
}
#log-checkbox-show {
font-weight: bold;
}
#log-checkbox-container input {
margin-bottom: 1px;
vertical-align: middle;
}
#log-level-select {
padding: 0 5px;
}
/* Log */
#log-container {
border: 1px solid rgb(220, 220, 220);
flex: 1 1 100%;
font-size: 12px;
margin: 5px;
overflow: auto;
padding: 10px;
padding: 5px;
}
#log-container p {
......
chrome/browser/resources/device_log_ui/device_log_ui.html
View file @ 3ef656f9
......@@ -12,28 +12,30 @@
</head>
<body>
<div id="header">
<p>$i18n{autoRefreshText}</p>
<span>$i18n{autoRefreshText}</span>
</div>
<div id="log-checkbox-container">
<div>
<button id="log-refresh">$i18n{logRefreshText}</button>
<button id="log-clear">$i18n{logClearText}</button>
<label id="log-checkbox-show">$i18n{logLevelShowText}</label>
<label>
<input id="log-level-error" type="checkbox">
<span>$i18n{logLevelErrorText}</span>
</label>
<label>
<input id="log-level-user" type="checkbox">
<span>$i18n{logLevelUserText}</span>
</label>
<span>$i18n{logLevelLabel}</span>
<select id="log-level-select">
<option value="Error">$i18n{logLevelErrorText}</option>
<option value="User">$i18n{logLevelUserText}</option>
<option value="Event">$i18n{logLevelEventText}</option>
<option value="Debug">$i18n{logLevelDebugText}</option>
</select>
<label>
<input id="log-level-event" type="checkbox">
<span>$i18n{logLevelEventText}</span>
<input id="log-fileinfo" type="checkbox">
<span>$i18n{logLevelFileinfoText}</span>
</label>
<label>
<input id="log-level-debug" type="checkbox">
<span>$i18n{logLevelDebugText}</span>
<input id="log-timedetail" type="checkbox">
<span>$i18n{logLevelTimeDetailText}</span>
</label>
</div>
<div id="log-checkbox-container">
<button id="log-clear-types">$i18n{logClearTypesText}</button>
<label>
<input id="log-type-login" type="checkbox">
<span>$i18n{logTypeLoginText}</span>
......@@ -66,14 +68,6 @@
<input id="log-type-fido" type="checkbox">
<span>$i18n{logTypeFidoText}</span>
</label>
<label>
<input id="log-fileinfo" type="checkbox">
<span>$i18n{logLevelFileinfoText}</span>
</label>
<label>
<input id="log-timedetail" type="checkbox">
<span>$i18n{logLevelTimeDetailText}</span>
</label>
</div>
<div id="log-container"></div>
</body>
......
chrome/browser/resources/device_log_ui/device_log_ui.js
View file @ 3ef656f9
......@@ -5,6 +5,9 @@
const DeviceLogUI = (function() {
'use strict';
// List of log levels in priority order.
const logLevels = ['Debug', 'Event', 'User', 'Error'];
/**
* Creates a tag for the log level.
*
......@@ -43,8 +46,9 @@ const DeviceLogUI = (function() {
*/
const createLogEntryText = function(logEntry) {
const level = logEntry['level'];
const levelCheckbox = 'log-level-' + level.toLowerCase();
if ($(levelCheckbox) && !$(levelCheckbox).checked) {
const levelIndex = logLevels.indexOf(level);
const levelSelectIndex = logLevels.indexOf($('log-level-select').value);
if (levelIndex < levelSelectIndex) {
return null;
}
......@@ -120,6 +124,14 @@ const DeviceLogUI = (function() {
requestLog();
};
const clearLogTypes = function() {
const checkboxes = document.querySelectorAll(
'#log-checkbox-container input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; ++i) {
checkboxes[i].checked = false;
}
};
/**
* Sets refresh rate if the interval is found in the url.
*/
......@@ -134,24 +146,26 @@ const DeviceLogUI = (function() {
* Gets log information from WebUI.
*/
document.addEventListener('DOMContentLoaded', function() {
// Show all levels except 'debug' by default.
$('log-level-error').checked = true;
$('log-level-user').checked = true;
$('log-level-event').checked = true;
$('log-level-debug').checked = false;
// Show all levels except 'Debug' by default.
$('log-level-select').value = 'Event';
$('log-level-select').onchange = requestLog;
// Show all types by default.
let checkboxes = document.querySelectorAll(
'#log-checkbox-container input[type="checkbox"][id*="log-type"]');
'#log-checkbox-container input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; ++i) {
checkboxes[i].checked = true;
}
$('log-fileinfo').checked = false;
$('log-fileinfo').onclick = requestLog;
$('log-timedetail').checked = false;
$('log-timedetail').onclick = requestLog;
$('log-refresh').onclick = requestLog;
$('log-clear').onclick = clearLog;
$('log-clear-types').onclick = clearLogTypes;
checkboxes = document.querySelectorAll(
'#log-checkbox-container input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; ++i) {
......
chrome/browser/ui/webui/device_log_ui.cc
View file @ 3ef656f9
......@@ -72,8 +72,9 @@ DeviceLogUI::DeviceLogUI(content::WebUI* web_ui)
{"autoRefreshText", IDS_DEVICE_AUTO_REFRESH},
{"logRefreshText", IDS_DEVICE_LOG_REFRESH},
{"logClearText", IDS_DEVICE_LOG_CLEAR},
{"logClearTypesText", IDS_DEVICE_LOG_CLEAR_TYPES},
{"logNoEntriesText", IDS_DEVICE_LOG_NO_ENTRIES},
{"logLevelShowText", IDS_DEVICE_LOG_LEVEL_SHOW},
{"logLevelLabel", IDS_DEVICE_LOG_LEVEL_LABEL},
{"logLevelErrorText", IDS_DEVICE_LOG_LEVEL_ERROR},
{"logLevelUserText", IDS_DEVICE_LOG_LEVEL_USER},
{"logLevelEventText", IDS_DEVICE_LOG_LEVEL_EVENT},
......
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