Skip to content

GitLab

T
tangled
Commit 6d5a1711 authored by Steven Bennetts's avatar Steven Bennetts Committed by Commit Bot
Browse files
Options

CrOS: network_ui: Use cr.define for network_ui 

This includes the following chrome://network cleanup:
* Updates network_ui.js to use cr.define.
* Replaces local types OncMojo types.
* Cleans up html import order.
* Eliminates a duplicate string in network_ui.cc.

BUG=921726

Change-Id: Ibeb15047b4b0fd7fdfe2ab7fc05ba65dea2b9560
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2242532
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: default avatarAzeem Arshad <azeemarshad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#779522}
parent b3fa01a7
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 162 deletions
chrome/browser/resources/chromeos/network_ui/BUILD.gn
View file @ 6d5a1711
......@@ -18,6 +18,8 @@ js_library("network_ui") {
"//ui/webui/resources/cr_components/chromeos/network:onc_mojo",
"//ui/webui/resources/js:load_time_data",
"//ui/webui/resources/js:util",
"//ui/webui/resources/js/cr:ui",
"//ui/webui/resources/js/cr/ui:tabs",
]
externs_list = chrome_extension_public_externs +
[ "$externs_path/networking_private.js" ]
......
chrome/browser/resources/chromeos/network_ui/network_ui.css
View file @ 6d5a1711
......@@ -7,21 +7,8 @@ body {
flex-direction: column;
}
div {
margin: 10px 0;
}
#select-div {
display: flex;
height: 100px;
width: 500px;
}
.state-table {
border-collapse: collapse;
}
.state-table tr {
min-width: 800px;
}
......@@ -57,7 +44,3 @@ div {
height: 32px;
width: 32px;
}
network-select {
flex: 1;
}
chrome/browser/resources/chromeos/network_ui/network_ui.html
View file @ 6d5a1711
......@@ -3,127 +3,170 @@
<head>
<meta charset="utf-8">
<title id="network">$i18n{titleText}</title>
<title>$i18n{titleText}</title>
<link rel="stylesheet" href="chrome://resources/css/tabs.css">
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="chrome://network/network_ui.css">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/mojo_interface_provider.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_icon.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network/network_select.html">
<link rel="import" href="chrome://resources/cr_components/chromeos/network_health/network_health_summary.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/cr/ui.js"></script>
<script src="chrome://resources/js/cr/ui/tabs.js"></script>
<script src="chrome://resources/js/load_time_data.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="chrome://network/strings.js"></script>
<script src="chrome://network/network_ui.js"></script>
<style>
tabpanel > div {
margin-bottom: 10px;
}
#global-policy {
white-space: pre-wrap;
}
#cellular-error-text {
color: red;
}
#select-div {
display: flex;
height: 400px;
width: 500px;
}
network-select {
flex: 1;
}
</style>
</head>
<body>
<div>$i18n{autoRefreshText}</div>
<span>$i18nRaw{deviceLogLinkText}</span>
<div>
<h2>$i18n{cellularActivationLabel}</h2>
<cr-button class="action-button" id="cellular-activation-button">
$i18n{cellularActivationButtonText}
</cr-button>
<div id="cellular-error-text" hidden>$i18n{noCellularErrorText}</div>
</div>
<div>
<h2>$i18n{addNewWifiLabel}</h2>
<cr-button class="action-button" id="add-new-wifi-button">
$i18n{addNewWifiButtonText}
</cr-button>
</div>
<h2>$i18n{globalPolicyLabel}</h2>
<div id="global-policy"></div>
<div id="select-div">
<network-select></network-select>
</div>
<div>
<cr-button class="action-button" id="refresh">
$i18n{networkRefreshText}
</cr-button>
</div>
<h2>$i18n{networkHealthLabel}</h2>
<network-health-summary></network-health-summary>
<h2>$i18n{networkListsLabel}</h2>
<div>$i18n{clickToExpandText}</div>
<div>
<span>$i18n{propertyFormatText}</span>
<select id="get-property-format">
<option value="normal">$i18n{normalFormatOption}</option>
<option value="managed">$i18n{managedFormatOption}</option>
<option value="state">$i18n{stateFormatOption}</option>
<option value="shill">$i18n{shillFormatOption}</option>
</select>
</div>
<h3>$i18n{devicesLabel}</h3>
<table id="device-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>Type</td>
<td>State</td>
</tr>
</table>
<h3>$i18n{visibleNetworksLabel}</h3>
<table id="network-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Name</td>
<td>Type</td>
<td>State</td>
<td>Connect?</td>
<td>Error</td>
<td>Security</td>
<td>Tech</td>
<td>Activation</td>
<td>Roam</td>
<td>Frequency</td>
<td>Strength</td>
</tr>
</table>
<h3>$i18n{ethernetEapNetworkLabel}</h3>
<table id="ethernet-eap-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Name</td>
<td>Type</td>
<td>ONC Source</td>
</tr>
</table>
<h3>$i18n{favoriteNetworksLabel}</h3>
<table id="favorite-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Name</td>
<td>Type</td>
<td>ONC Source</td>
</tr>
</table>
<tabbox id="network-ui">
<tabs>
<tab>General</tab>
<tab>Network Health</tab>
<tab>Network Select</tab>
</tabs>
<tabpanels>
<tabpanel id="general">
<h2>$i18n{titleText}</h2>
<div>$i18n{autoRefreshText}</div>
<span>$i18nRaw{deviceLogLinkText}</span>
<div>
<h2>$i18n{cellularActivationLabel}</h2>
<cr-button class="action-button" id="cellular-activation-button">
$i18n{cellularActivationButtonText}
</cr-button>
<div id="cellular-error-text" hidden>$i18n{noCellularErrorText}</div>
</div>
<div>
<h2>$i18n{addNewWifiLabel}</h2>
<cr-button class="action-button" id="add-new-wifi-button">
$i18n{addNewWifiButtonText}
</cr-button>
</div>
<h2>$i18n{globalPolicyLabel}</h2>
<div id="global-policy"></div>
<div>
<cr-button class="action-button" id="refresh">
$i18n{networkRefreshText}
</cr-button>
</div>
<h2>$i18n{networkListsLabel}</h2>
<div>$i18n{clickToExpandText}</div>
<div>
<span>$i18n{propertyFormatText}</span>
<select id="get-property-format">
<option value="normal">$i18n{normalFormatOption}</option>
<option value="managed">$i18n{managedFormatOption}</option>
<option value="state">$i18n{stateFormatOption}</option>
<option value="shill">$i18n{shillFormatOption}</option>
</select>
</div>
<h3>$i18n{devicesLabel}</h3>
<table id="device-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>Type</td>
<td>State</td>
</tr>
</table>
<h3>$i18n{visibleNetworksLabel}</h3>
<table id="network-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Name</td>
<td>Type</td>
<td>State</td>
<td>Connect?</td>
<td>Error</td>
<td>Security</td>
<td>Tech</td>
<td>Activation</td>
<td>Roam</td>
<td>Frequency</td>
<td>Strength</td>
</tr>
</table>
<h3>$i18n{ethernetEapNetworkLabel}</h3>
<table id="ethernet-eap-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Name</td>
<td>Type</td>
<td>ONC Source</td>
</tr>
</table>
<h3>$i18n{favoriteNetworksLabel}</h3>
<table id="favorite-state-table" class="state-table">
<tr class="state-table-header">
<td></td>
<td></td>
<td>GUID</td>
<td>Name</td>
<td>Type</td>
<td>ONC Source</td>
</tr>
</table>
</tabpanel>
<tabpanel id="health">
<h2>$i18n{networkHealthLabel}</h2>
<network-health-summary></network-health-summary>
</tabpanel>
<tabpanel id="select">
<div id="select-div">
<network-select></network-select>
</div>
</tabpanel>
</tabpanels>
</tabbox>
<script src="network_ui.js"></script>
</body>
</html>
chrome/browser/resources/chromeos/network_ui/network_ui.js
View file @ 6d5a1711
......@@ -5,24 +5,15 @@
/**
* @fileoverview Builds UI elements shown in chrome://networks debugging page.
*/
const networkUI = {};
/** @typedef {chromeos.networkConfig.mojom.NetworkStateProperties} */
networkUI.NetworkStateProperties;
/** @typedef {chromeos.networkConfig.mojom.DeviceStateProperties} */
networkUI.DeviceStateProperties;
/**
* @typedef {networkUI.NetworkStateProperties|networkUI.DeviceStateProperties}
* @typedef {!OncMojo.DeviceStateProperties|!OncMojo.NetworkStateProperties}
*/
networkUI.StateProperties;
OncMojo.StateProperties;
const NetworkUI = (function() {
cr.define('network_ui', function() {
'use strict';
const mojom = chromeos.networkConfig.mojom;
// Properties to display in the network state table. Each entry can be either
// a single state field or an array of state fields. If more than one is
// specified then the first non empty value is used.
......@@ -41,7 +32,7 @@ const NetworkUI = (function() {
* This UI will use both the networkingPrivate extension API and the
* networkConfig mojo API until we provide all of the required functionality
* in networkConfig. TODO(stevenjb): Remove use of networkingPrivate api.
* @type {?mojom.CrosNetworkConfigRemote}
* @type {?chromeos.networkConfig.mojom.CrosNetworkConfigRemote}
*/
let networkConfig = null;
......@@ -86,7 +77,7 @@ const NetworkUI = (function() {
* nested property, e.g. 'WiFi.Security'. If any part of a nested key is
* missing, this will return undefined.
*
* @param {!networkUI.StateProperties} state
* @param {!OncMojo.StateProperties} state
* @param {string} key The ONC key for the property.
* @return {*} The value associated with the property or undefined if the
* key (any part of it) is not defined.
......@@ -107,7 +98,7 @@ const NetworkUI = (function() {
/**
* Creates a cell with a button for expanding a network state table row.
*
* @param {!networkUI.StateProperties} state
* @param {!OncMojo.StateProperties} state
* @return {!HTMLTableCellElement} The created td element that displays the
* given value.
*/
......@@ -127,7 +118,7 @@ const NetworkUI = (function() {
/**
* Creates a cell with an icon representing the network state.
*
* @param {!networkUI.StateProperties} state
* @param {!OncMojo.StateProperties} state
* @return {!HTMLTableCellElement} The created td element that displays the
* icon.
*/
......@@ -159,7 +150,7 @@ const NetworkUI = (function() {
* Creates a row in the network state table.
*
* @param {Array} stateFields The state fields to use for the row.
* @param {!networkUI.StateProperties} state
* @param {!OncMojo.StateProperties} state
* @return {!HTMLTableRowElement} The created tr element that contains the
* network state information.
*/
......@@ -192,7 +183,7 @@ const NetworkUI = (function() {
*
* @param {string} tablename The name of the table to be created.
* @param {!Array<string>} stateFields The list of fields for the table.
* @param {!Array<!networkUI.StateProperties>} states
* @param {!Array<!OncMojo.StateProperties>} states
*/
const createStateTable = function(tablename, stateFields, states) {
const table = $(tablename);
......@@ -226,7 +217,7 @@ const NetworkUI = (function() {
};
/**
* @param {!mojom.NetworkType} type
* @param {!chromeos.networkConfig.mojom.NetworkType} type
* @return {string} A valid HTMLElement id.
*/
const idFromType = function(type) {
......@@ -236,7 +227,7 @@ const NetworkUI = (function() {
/**
* This callback function is triggered when visible networks are received.
*
* @param {!Array<!networkUI.NetworkStateProperties>} states
* @param {!Array<!OncMojo.NetworkStateProperties>} states
*/
const onVisibleNetworksReceived = function(states) {
createStateTable('network-state-table', NETWORK_STATE_FIELDS, states);
......@@ -245,7 +236,7 @@ const NetworkUI = (function() {
/**
* This callback function is triggered when favorite networks are received.
*
* @param {!Array<!networkUI.NetworkStateProperties>} states
* @param {!Array<!OncMojo.NetworkStateProperties>} states
*/
const onFavoriteNetworksReceived = function(states) {
createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, states);
......@@ -254,7 +245,7 @@ const NetworkUI = (function() {
/**
* This callback function is triggered when device states are received.
*
* @param {!Array<!networkUI.DeviceStateProperties>} states
* @param {!Array<!OncMojo.DeviceStateProperties>} states
*/
const onDeviceStatesReceived = function(states) {
createStateTable('device-state-table', DEVICE_STATE_FIELDS, states);
......@@ -271,7 +262,7 @@ const NetworkUI = (function() {
* state information for a row.
*
* @param {!HTMLElement} btn The button that was clicked.
* @param {!networkUI.StateProperties} state
* @param {!OncMojo.StateProperties} state
*/
const toggleExpandRow = function(btn, state) {
const cell = btn.parentNode;
......@@ -289,7 +280,7 @@ const NetworkUI = (function() {
/**
* Creates the expanded row for displaying the complete state as JSON.
*
* @param {!networkUI.StateProperties} state
* @param {!OncMojo.StateProperties} state
* @param {!HTMLTableRowElement} baseRow The unexpanded row associated with
* the new row.
* @return {!HTMLTableRowElement} The created tr element for the expanded row.
......@@ -358,7 +349,7 @@ const NetworkUI = (function() {
/**
* Requests network details and calls showDetail with the result.
* @param {!networkUI.StateProperties} state
* @param {!OncMojo.StateProperties} state
* @param {string} selectedId
* @param {!HTMLTableCellElement} detailCell
*/
......@@ -374,7 +365,7 @@ const NetworkUI = (function() {
/**
* @param {!HTMLTableCellElement} detailCell
* @param {!networkUI.NetworkStateProperties|!networkUI.DeviceStateProperties|
* @param {!OncMojo.NetworkStateProperties|!OncMojo.DeviceStateProperties|
* !chromeos.networkConfig.mojom.ManagedProperties|
* !chrome.networkingPrivate.NetworkProperties} state
* @param {!Object=} error
......@@ -488,6 +479,7 @@ const NetworkUI = (function() {
* Requests an update of all network info.
*/
const requestNetworks = function() {
const mojom = chromeos.networkConfig.mojom;
networkConfig
.getNetworkStateList({
filter: mojom.FilterType.kVisible,
......@@ -563,7 +555,8 @@ const NetworkUI = (function() {
// Otherwise, connect.
networkConfig.startConnect(networkState.guid).then(response => {
if (response.result == mojom.StartConnectResult.kSuccess) {
if (response.result ==
chromeos.networkConfig.mojom.StartConnectResult.kSuccess) {
return;
}
console.error(
......@@ -573,10 +566,21 @@ const NetworkUI = (function() {
});
};
const selectTabFromHash = function() {
const selectedTab = window.location.hash.substring(1);
if (!selectedTab)
return;
const tabpanel = document.querySelector('tabpanels > #' + selectedTab);
if (tabpanel) {
tabpanel.selected = true;
}
};
/**
* Gets network information from WebUI and sets custom items.
*/
document.addEventListener('DOMContentLoaded', function() {
function onLoad() {
cr.ui.decorate('tabbox', cr.ui.TabBox);
const select = document.querySelector('network-select');
select.customItems = [
{customItemName: 'Add WiFi', polymerIcon: 'cr:add', customData: 'WiFi'},
......@@ -587,19 +591,28 @@ const NetworkUI = (function() {
$('add-new-wifi-button').onclick = showAddNewWifi;
$('refresh').onclick = requestNetworks;
$('get-property-format').onchange = requestNetworks;
document.addEventListener('custom-item-selected', function(event) {
chrome.send('addNetwork', [event.detail.customData]);
});
window.addEventListener('hashchange', function(event) {
selectTabFromHash();
});
selectTabFromHash();
init();
requestNetworks();
requestGlobalPolicy();
});
document.addEventListener('custom-item-selected', function(event) {
chrome.send('addNetwork', [event.detail.customData]);
});
}
return {
getShillNetworkPropertiesResult: getShillNetworkPropertiesResult,
getShillDevicePropertiesResult: getShillDevicePropertiesResult,
getShillEthernetEAPResult: getShillEthernetEAPResult,
openCellularActivationUiResult: openCellularActivationUiResult
openCellularActivationUiResult: openCellularActivationUiResult,
onLoad: onLoad
};
})();
});
document.addEventListener('DOMContentLoaded', network_ui.onLoad);
chrome/browser/ui/webui/chromeos/network_ui.cc
View file @ 6d5a1711
......@@ -173,7 +173,7 @@ class NetworkConfigMessageHandler : public content::WebUIMessageHandler {
AllowJavascript();
CallJavascriptFunction(
base::StringPrintf("NetworkUI.%sResult", kGetNetworkProperties),
base::StringPrintf("network_ui.%sResult", kGetNetworkProperties),
return_arg_list);
}
......@@ -210,7 +210,7 @@ class NetworkConfigMessageHandler : public content::WebUIMessageHandler {
AllowJavascript();
if (list.empty()) {
CallJavascriptFunction(
base::StringPrintf("NetworkUI.%sResult", kGetEthernetEAP));
base::StringPrintf("network_ui.%sResult", kGetEthernetEAP));
return;
}
const NetworkState* eap = list.front();
......@@ -219,7 +219,7 @@ class NetworkConfigMessageHandler : public content::WebUIMessageHandler {
properties.SetStringKey("name", eap->name());
properties.SetStringKey("type", eap->type());
CallJavascriptFunction(
base::StringPrintf("NetworkUI.%sResult", kGetEthernetEAP), properties);
base::StringPrintf("network_ui.%sResult", kGetEthernetEAP), properties);
}
void OpenCellularActivationUi(const base::ListValue* arg_list) {
......@@ -231,7 +231,7 @@ class NetworkConfigMessageHandler : public content::WebUIMessageHandler {
AllowJavascript();
CallJavascriptFunction(
base::StringPrintf("NetworkUI.%sResult", kOpenCellularActivationUi),
base::StringPrintf("network_ui.%sResult", kOpenCellularActivationUi),
base::Value(cellular_network != nullptr));
}
......@@ -273,7 +273,7 @@ class NetworkConfigMessageHandler : public content::WebUIMessageHandler {
AllowJavascript();
CallJavascriptFunction(
base::StringPrintf("NetworkUI.%sResult", kGetDeviceProperties),
base::StringPrintf("network_ui.%sResult", kGetDeviceProperties),
return_arg_list);
}
......@@ -293,7 +293,7 @@ class NetworkConfigMessageHandler : public content::WebUIMessageHandler {
AllowJavascript();
CallJavascriptFunction(
base::StringPrintf("NetworkUI.%sResult", function_name.c_str()),
base::StringPrintf("network_ui.%sResult", function_name.c_str()),
return_arg_list);
}
......@@ -315,8 +315,6 @@ void NetworkUI::GetLocalizedStrings(base::DictionaryValue* localized_strings) {
localized_strings->SetString("titleText",
l10n_util::GetStringUTF16(IDS_NETWORK_UI_TITLE));
localized_strings->SetString("titleText",
l10n_util::GetStringUTF16(IDS_NETWORK_UI_TITLE));
localized_strings->SetString(
"autoRefreshText",
l10n_util::GetStringUTF16(IDS_NETWORK_UI_AUTO_REFRESH));
......
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