diff options
Diffstat (limited to 'chromium/chrome/browser/resources/chromeos/network_ui')
4 files changed, 254 insertions, 211 deletions
diff --git a/chromium/chrome/browser/resources/chromeos/network_ui/compiled_resources.gyp b/chromium/chrome/browser/resources/chromeos/network_ui/compiled_resources.gyp new file mode 100644 index 00000000000..ead34ba25d9 --- /dev/null +++ b/chromium/chrome/browser/resources/chromeos/network_ui/compiled_resources.gyp @@ -0,0 +1,24 @@ +# Copyright 2015 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. +{ + 'targets': [ + { + 'target_name': 'network_ui', + + 'variables': { + 'depends': [ + '../../../../../ui/webui/resources/cr_elements/cr_onc/cr_onc_types.js', + '../../../../../ui/webui/resources/js/compiled_resources.gyp:util', + '../../../../../ui/webui/resources/js/compiled_resources.gyp:load_time_data', + ], + 'externs': [ + '../../../../../ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon_externs.js', + '../../../../../ui/webui/resources/cr_elements/cr_onc/cr_onc_data_externs.js', + '../../../../../third_party/closure_compiler/externs/chrome_extensions.js' + ], + }, + 'includes': ['../../../../../third_party/closure_compiler/compile_js.gypi'], + }, + ], +} diff --git a/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.css b/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.css index 305897709ee..c3fbf873664 100644 --- a/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.css +++ b/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.css @@ -1,35 +1,40 @@ -/* - * Copyright 2013 The Chromium Authors. All rights reserved. +/* Copyright 2013 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. - */ + * found in the LICENSE file. */ -#log-level-container { +paper-button[raised].colored { + background: rgb(66, 133, 244); + color: white; +} + +#header { margin: 5px; } -#log-level-container label { - vertical-align: middle; +#header a { + padding: 0 4px; } -#log-level-container input { - margin-bottom: 1px; - vertical-align: middle; +#header cr-network-icon { + height: 40px; + width: 40px; } -#network-log-container { - border: 1px solid rgb(220, 220, 220); - font-size: 12px; - height: 350px; - overflow: scroll; - padding: 10px; - width: 100%; +#default-network { + align-items: center; + display: flex; + flex-direction: row; + padding: 4px; +} + +#default-network-text { + -webkit-padding-start: 8px; + font-size: 14px; + font-weight: bold; } -#network-log-container p { - font-family: monospace; - line-height: 20px; - margin: 2px; +#refresh { + margin: 4px; } .state-table { @@ -63,23 +68,9 @@ white-space: pre-wrap; } -.network-level-tag { - -webkit-margin-end: 5px; - border: 1px solid; - border-radius: 2px; - padding: 0 4px; -} - -.network-log-level-event { - color: orange; -} - -.network-log-level-error { - color: red; -} - -.network-log-level-debug { - color: blue; +.state-table cr-network-icon { + height: 25px; + width: 25px; } #advanced-options { diff --git a/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.html b/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.html index 699978dc0c0..6b512f98b24 100644 --- a/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.html +++ b/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.html @@ -1,48 +1,53 @@ -<!DOCTYPE HTML> -<html i18n-values="dir:textdirection;"> +<!doctype html> +<html i18n-values="dir:textdirection;lang:language"> + <head> <meta charset="utf-8"> <title id="network" i18n-content="titleText"></title> + <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_elements/cr_network_icon/cr_network_icon.html"> + <link rel="import" href="chrome://resources/cr_elements/cr_onc/cr_onc_data.html"> + <link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html"> + <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_config.js"></script> <script src="chrome://network/network_ui.js"></script> </head> -<body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> - <p i18n-content="autoRefreshText"></p> - <h3>Event Log (Newest first):</h3> - <div id="log-level-container"> - <button id="log-refresh" i18n-content="logRefreshText"></button> - <label i18n-content="logLevelShowText"></label> - <input id="log-error" type="checkbox"> - <label for="log-error" i18n-content="logLevelErrorText"></label> - <input id="log-user" type="checkbox"> - <label for="log-user" i18n-content="logLevelUserText"></label> - <input id="log-event" type="checkbox"> - <label for="log-event" i18n-content="logLevelEventText"></label> - <input id="log-debug" type="checkbox"> - <label for="log-debug" i18n-content="logLevelDebugText"></label> - <input id="log-fileinfo" type="checkbox"> - <label for="log-fileinfo" i18n-content="logLevelFileinfoText"></label> - <input id="log-timedetail" type="checkbox"> - <label for="log-timedetail" i18n-content="logLevelTimeDetailText"></label> + +<body> + <div id="header"> + <p i18n-content="autoRefreshText"></p> + <span i18n-values=".innerHTML:deviceLogLinkText"></span> + <div id="advanced-options"> + <span i18n-content="clickToExpandText"></span> + <span i18n-content="propertyFormatText"></span> + <select id="get-property-format"> + <option value="normal" i18n-content="normalFormatOption"></option> + <option value="managed" i18n-content="managedFormatOption"></option> + <option value="state" i18n-content="stateFormatOption"></option> + <option value="shill" i18n-content="shillFormatOption"></option> + </select> + </div> + + <div id="default-network"> + <cr-network-icon id="default-network-icon"></cr-network-icon> + <span id="default-network-text"></span> + </div> + + <div> + <paper-button raised class="colored" id="refresh" + i18n-content="networkRefreshText"> + </paper-button> + </div> </div> - <div id="network-log-container"> - </div> - <div id="advanced-options"> - <span>Click '+' to get network properties of type: </span> - <select id="get-network-type"> - <option id="normal" selected>ONC</option> - <option id="managed">Managed ONC</option> - <option id="shill">Shill</option> - </select> - </div> - <h3>Visible Networks: </h3> + + <h3 i18n-content="visibleNetworksLabel"></h3> <table id="network-state-table" class="state-table"> <tr class="state-table-header"> <td></td> + <td></td> <td>GUID</td> <td>Path</td> <td>Name</td> @@ -54,14 +59,15 @@ <td>Tech</td> <td>Activation</td> <td>Roam</td> - <td>OOC</td> <td>Strength</td> </tr> </table> - <h3>Favorites: </h3> + + <h3 i18n-content="favoriteNetworksLabel"></h3> <table id="favorite-state-table" class="state-table"> <tr class="state-table-header"> <td></td> + <td></td> <td>GUID</td> <td>Path</td> <td>Name</td> @@ -71,6 +77,7 @@ <td>ONC Source</td> </tr> </table> - <script src="chrome://resources/js/i18n_template2.js"></script> + + <script src="chrome://resources/js/i18n_template.js"></script> </body> </html> diff --git a/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.js b/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.js index 34e95729eff..8fcf934222c 100644 --- a/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.js +++ b/chromium/chrome/browser/resources/chromeos/network_ui/network_ui.js @@ -21,7 +21,6 @@ var NetworkUI = (function() { 'EAP.EAP'], 'Cellular.ActivationState', 'Cellular.RoamingState', - 'Cellular.OutOfCredits', 'WiFi.SignalStrength' ]; @@ -32,97 +31,64 @@ var NetworkUI = (function() { 'Type', 'profile_path', 'visible', - 'onc_source' + 'Source' ]; - var LOG_LEVEL_CLASSNAME = { - 'Error': 'network-log-level-error', - 'User': 'network-log-level-user', - 'Event': 'network-log-level-event', - 'Debug': 'network-log-level-debug' - }; - - var LOG_LEVEL_CHECKBOX = { - 'Error': 'log-error', - 'User': 'log-user', - 'Event': 'log-event', - 'Debug': 'log-debug' - }; - /** - * Create a tag of log level. + * Creates and returns a typed HTMLTableCellElement. * - * @param {string} level A string that represents log level. - * @return {DOMElement} The created span element. + * @return {!HTMLTableCellElement} A new td element. */ - var createLevelTag = function(level) { - var tag = document.createElement('span'); - tag.className = 'network-level-tag'; - tag.textContent = level; - tag.classList.add(LOG_LEVEL_CLASSNAME[level]); - return tag; + var createTableCellElement = function() { + return /** @type {!HTMLTableCellElement} */(document.createElement('td')); }; /** - * Creates an element that contains the time, the event, the level and - * the description of the given log entry. + * Creates and returns a typed HTMLTableRowElement. * - * @param {Object} logEntry An object that represents a single line of log. - * @return {DOMElement} The created p element that represents the log entry. + * @return {!HTMLTableRowElement} A new tr element. */ - var createLogEntryText = function(logEntry) { - var level = logEntry['level']; - if (!$(LOG_LEVEL_CHECKBOX[level]).checked) - return null; - var res = document.createElement('p'); - var textWrapper = document.createElement('span'); - var fileinfo = ''; - if ($('log-fileinfo').checked) - fileinfo = logEntry['file']; - var timestamp = ''; - if ($('log-timedetail').checked) - timestamp = logEntry['timestamp']; - else - timestamp = logEntry['timestampshort']; - textWrapper.textContent = loadTimeData.getStringF( - 'logEntryFormat', - timestamp, - fileinfo, - logEntry['event'], - logEntry['description']); - res.appendChild(createLevelTag(level)); - res.appendChild(textWrapper); - return res; + var createTableRowElement = function() { + return /** @type {!HTMLTableRowElement} */(document.createElement('tr')); }; /** - * Create event log entries. + * Returns the ONC data property for networkState associated with a key. Used + * to access properties in the networkState by |key| which may may refer to a + * nested property, e.g. 'WiFi.Security'. If any part of a nested key is + * missing, this will return undefined. * - * @param {Array.<string>} logEntries A array of strings that each string - * represents a log event in JSON format. + * @param {!chrome.networkingPrivate.NetworkStateProperties} networkState The + * network state property dictionary. + * @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. */ - var createEventLog = function(logEntries) { - var container = $('network-log-container'); - container.textContent = ''; - for (var i = 0; i < logEntries.length; ++i) { - var entry = createLogEntryText(JSON.parse(logEntries[i])); - if (entry) - container.appendChild(entry); + var getOncProperty = function(networkState, key) { + var dict = /** @type {!Object} */(networkState); + var keys = key.split('.'); + while (keys.length > 1) { + var k = keys.shift(); + dict = dict[k]; + if (!dict || typeof dict != 'object') + return undefined; } + return dict[keys.shift()]; }; /** - * Create a cell with a button for expanding a network state table row. + * Creates a cell with a button for expanding a network state table row. * * @param {string} guid The GUID identifying the network. - * @return {DOMElement} The created td element that displays the given value. + * @return {!HTMLTableCellElement} The created td element that displays the + * given value. */ var createStateTableExpandButton = function(guid) { - var cell = document.createElement('td'); + var cell = createTableCellElement(); cell.className = 'state-table-expand-button-cell'; var button = document.createElement('button'); button.addEventListener('click', function(event) { - toggleExpandRow(event.target, guid); + toggleExpandRow(/** @type {!HTMLElement} */(event.target), guid); }); button.className = 'state-table-expand-button'; button.textContent = '+'; @@ -131,39 +97,61 @@ var NetworkUI = (function() { }; /** - * Create a cell in network state table. + * Creates a cell with an icon representing the network state. * - * @param {string} value Content in the cell. - * @return {DOMElement} The created td element that displays the given value. + * @param {!chrome.networkingPrivate.NetworkStateProperties} networkState The + * network state properties. + * @return {!HTMLTableCellElement} The created td element that displays the + * icon. + */ + var createStateTableIcon = function(networkState) { + var cell = createTableCellElement(); + cell.className = 'state-table-icon-cell'; + var icon = /** @type {!CrNetworkIconElement} */( + document.createElement('cr-network-icon')); + icon.isListItem = true; + icon.networkState = CrOncDataElement.create(networkState); + cell.appendChild(icon); + return cell; + }; + + /** + * Creates a cell in the network state table. + * + * @param {*} value Content in the cell. + * @return {!HTMLTableCellElement} The created td element that displays the + * given value. */ var createStateTableCell = function(value) { - var cell = document.createElement('td'); + var cell = createTableCellElement(); cell.textContent = value || ''; return cell; }; /** - * Create a row in the network state table. + * Creates a row in the network state table. * * @param {Array} stateFields The state fields to use for the row. - * @param {Object} state Property values for the network or favorite. - * @return {DOMElement} The created tr element that contains the network - * state information. + * @param {!chrome.networkingPrivate.NetworkStateProperties} networkState The + * network state properties. + * @return {!HTMLTableRowElement} The created tr element that contains the + * network state information. */ - var createStateTableRow = function(stateFields, state) { - var row = document.createElement('tr'); + var createStateTableRow = function(stateFields, networkState) { + var row = createTableRowElement(); row.className = 'state-table-row'; - var guid = state.GUID; + var guid = networkState.GUID; row.appendChild(createStateTableExpandButton(guid)); + row.appendChild(createStateTableIcon(networkState)); for (var i = 0; i < stateFields.length; ++i) { var field = stateFields[i]; - var value = ''; + var value; if (typeof field == 'string') { - value = networkConfig.getValueFromProperties(state, field); + value = getOncProperty(networkState, field); } else { for (var j = 0; j < field.length; ++j) { - value = networkConfig.getValueFromProperties(state, field[j]); - if (value) + value = getOncProperty(networkState, field[j]); + if (value != undefined) break; } } @@ -175,11 +163,12 @@ var NetworkUI = (function() { }; /** - * Create table for networks or favorites. + * Creates a table for networks or favorites. * * @param {string} tablename The name of the table to be created. - * @param {Array} stateFields The list of fields for the table. - * @param {Array} states An array of network or favorite states. + * @param {!Array<string>} stateFields The list of fields for the table. + * @param {!Array<!chrome.networkingPrivate.NetworkStateProperties>} states + * An array of network or favorite states. */ var createStateTable = function(tablename, stateFields, states) { var table = $(tablename); @@ -192,44 +181,63 @@ var NetworkUI = (function() { }; /** - * This callback function is triggered when the network log is received. + * Returns a valid HTMLElement id from |guid|. * - * @param {Object} data A JSON structure of event log entries. + * @param {string} guid A GUID which may start with a digit. + * @return {string} A valid HTMLElement id. */ - var getNetworkLogCallback = function(data) { - createEventLog(JSON.parse(data)); + var idFromGuid = function(guid) { + return '_' + guid.replace(/[{}]/g, ''); }; /** * This callback function is triggered when visible networks are received. * - * @param {Array} data A list of network state information for each - * visible network. + * @param {!Array<!chrome.networkingPrivate.NetworkStateProperties>} states + * A list of network state information for each visible network. */ var onVisibleNetworksReceived = function(states) { + /** @type {chrome.networkingPrivate.NetworkStateProperties} */ var + defaultState; + if (states.length > 0) + defaultState = states[0]; + var icon = /** @type {CrNetworkIconElement} */($('default-network-icon')); + if (defaultState && defaultState.Type != CrOnc.Type.VPN) { + $('default-network-text').textContent = + loadTimeData.getStringF('defaultNetworkText', + defaultState.Name, + defaultState.ConnectionState); + icon.networkState = CrOncDataElement.create(defaultState); + } else { + $('default-network-text').textContent = + loadTimeData.getString('noNetworkText'); + // Show the disconnected wifi icon if there are no networks. + icon.networkType = CrOnc.Type.WIFI; + } + createStateTable('network-state-table', NETWORK_STATE_FIELDS, states); }; /** * This callback function is triggered when favorite networks are received. * - * @param {Object} data A list of network state information for each - * favorite network. + * @param {!Array<!chrome.networkingPrivate.NetworkStateProperties>} states + * A list of network state information for each favorite network. */ var onFavoriteNetworksReceived = function(states) { createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, states); }; /** - * Toggle the button state and add or remove a row displaying the complete + * Toggles the button state and add or remove a row displaying the complete * state information for a row. * - * @param {DOMElement} btn The button that was clicked. + * @param {!HTMLElement} btn The button that was clicked. * @param {string} guid GUID identifying the network. */ var toggleExpandRow = function(btn, guid) { var cell = btn.parentNode; - var row = cell.parentNode; + var row = /** @type {!HTMLTableRowElement} */(cell.parentNode); if (btn.textContent == '-') { btn.textContent = '+'; row.parentNode.removeChild(row.nextSibling); @@ -243,54 +251,80 @@ var NetworkUI = (function() { /** * Creates the expanded row for displaying the complete state as JSON. * - * @param {Object} state Property values for the network or favorite. - * @param {DOMElement} baseRow The unexpanded row associated with the new row. - * @return {DOMElement} The created tr element for the expanded row. + * @param {string} guid The GUID identifying the network. + * @param {!HTMLTableRowElement} baseRow The unexpanded row associated with + * the new row. + * @return {!HTMLTableRowElement} The created tr element for the expanded row. */ var createExpandedRow = function(guid, baseRow) { - var expandedRow = document.createElement('tr'); + var expandedRow = createTableRowElement(); expandedRow.className = 'state-table-row'; - var emptyCell = document.createElement('td'); + var emptyCell = createTableCellElement(); emptyCell.style.border = 'none'; expandedRow.appendChild(emptyCell); - var detailCell = document.createElement('td'); + var detailCell = createTableCellElement(); + detailCell.id = idFromGuid(guid); detailCell.className = 'state-table-expanded-cell'; detailCell.colSpan = baseRow.childNodes.length - 1; expandedRow.appendChild(detailCell); - var showDetail = function(state) { - if (networkConfig.lastError) - detailCell.textContent = networkConfig.lastError; + var showDetail = function(state, error) { + if (error && error.message) + detailCell.textContent = error.message; else detailCell.textContent = JSON.stringify(state, null, '\t'); }; - var selected = $('get-network-type').selectedIndex; - var selectedId = $('get-network-type').options[selected].id; - if (selectedId == 'shill') - networkConfig.getShillProperties(guid, showDetail); - else if (selectedId == 'managed') - networkConfig.getManagedProperties(guid, showDetail); - else - networkConfig.getProperties(guid, showDetail); + var selected = $('get-property-format').selectedIndex; + var selectedId = $('get-property-format').options[selected].value; + if (selectedId == 'shill') { + chrome.send('getShillProperties', [guid]); + } else if (selectedId == 'state') { + chrome.networkingPrivate.getState(guid, function(properties) { + showDetail(properties, chrome.runtime.lastError); }); + } else if (selectedId == 'managed') { + chrome.networkingPrivate.getManagedProperties(guid, function(properties) { + showDetail(properties, chrome.runtime.lastError); }); + } else { + chrome.networkingPrivate.getProperties(guid, function(properties) { + showDetail(properties, chrome.runtime.lastError); }); + } return expandedRow; }; /** - * Requests a network log update. + * Callback invoked by Chrome after a getShillProperties call. + * + * @param {Array} args The requested Shill properties. Will contain + * just the 'GUID' and 'ShillError' properties if the call failed. */ - var requestLog = function() { - chrome.send('NetworkUI.getNetworkLog'); + var getShillPropertiesResult = function(args) { + var properties = args.shift(); + var guid = properties['GUID']; + if (!guid) { + console.error('No GUID in getShillPropertiesResult'); + return; + } + + var detailCell = document.querySelector('td#' + idFromGuid(guid)); + if (!detailCell) { + console.error('No cell for GUID: ' + guid); + return; + } + + if (properties['ShillError']) + detailCell.textContent = properties['ShillError']; + else + detailCell.textContent = JSON.stringify(properties, null, '\t'); + }; /** * Requests an update of all network info. */ var requestNetworks = function() { - networkConfig.getNetworks( - { 'type': 'All', 'visible': true }, - onVisibleNetworksReceived); - networkConfig.getNetworks( - { 'type': 'All', 'configured': true }, - onFavoriteNetworksReceived); + chrome.networkingPrivate.getNetworks( + {'networkType': 'All', 'visible': true}, onVisibleNetworksReceived); + chrome.networkingPrivate.getNetworks( + {'networkType': 'All', 'configured': true}, onFavoriteNetworksReceived); }; /** @@ -299,32 +333,19 @@ var NetworkUI = (function() { var setRefresh = function() { var interval = parseQueryParams(window.location)['refresh']; if (interval && interval != '') - setInterval(requestNetworks, parseInt(interval) * 1000); + setInterval(requestNetworks, parseInt(interval, 10) * 1000); }; /** - * Get network information from WebUI. + * Gets network information from WebUI. */ document.addEventListener('DOMContentLoaded', function() { - $('log-refresh').onclick = requestLog; - $('log-error').checked = true; - $('log-error').onclick = requestLog; - $('log-user').checked = true; - $('log-user').onclick = requestLog; - $('log-event').checked = true; - $('log-event').onclick = requestLog; - $('log-debug').checked = false; - $('log-debug').onclick = requestLog; - $('log-fileinfo').checked = false; - $('log-fileinfo').onclick = requestLog; - $('log-timedetail').checked = false; - $('log-timedetail').onclick = requestLog; + $('refresh').onclick = requestNetworks; setRefresh(); - requestLog(); requestNetworks(); }); return { - getNetworkLogCallback: getNetworkLogCallback + getShillPropertiesResult: getShillPropertiesResult }; })(); |