1 // Copyright 2013 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file.
5 var NetworkUI = function() {
6 // Properties to display in the network state table
7 var NETWORK_STATE_FIELDS = [
8 'Name', 'Type', 'State', 'Profile', 'Connectable',
9 'Error', 'Address', 'Security', 'Cellular.NetworkTechnology',
10 'Cellular.ActivationState', 'Cellular.RoamingState',
11 'Cellular.OutOfCredits', 'Strength'
14 var LOG_LEVEL_CLASSNAME = {
15 'Error': 'network-log-level-error',
16 'User': 'network-log-level-user',
17 'Event': 'network-log-level-event',
18 'Debug': 'network-log-level-debug'
21 var LOG_LEVEL_CHECKBOX = {
29 * Create a tag of log level.
31 * @param {string} level A string that represents log level.
32 * @return {DOMElement} The created span element.
34 var createLevelTag = function(level) {
35 var tag = document.createElement('span');
36 tag.className = 'network-level-tag';
37 tag.textContent = level;
38 tag.classList.add(LOG_LEVEL_CLASSNAME[level]);
43 * Creates an element that contains the time, the event, the level and
44 * the description of the given log entry.
46 * @param {Object} logEntry An object that represents a single line of log.
47 * @return {DOMElement} The created p element that represents the log entry.
49 var createLogEntryText = function(logEntry) {
50 var level = logEntry['level'];
51 if (!$(LOG_LEVEL_CHECKBOX[level]).checked)
53 var res = document.createElement('p');
54 var textWrapper = document.createElement('span');
56 if ($('log-fileinfo').checked)
57 fileinfo = logEntry['file'];
58 textWrapper.textContent = loadTimeData.getStringF(
60 logEntry['timestamp'],
63 logEntry['description']);
64 res.appendChild(createLevelTag(level));
65 res.appendChild(textWrapper);
70 * Create event log entries.
72 * @param {Array.<string>} logEntries A array of strings that each string
73 * represents a log event in JSON format.
75 var createEventLog = function(logEntries) {
76 var container = $('network-log-container');
77 container.textContent = '';
78 for (var i = 0; i < logEntries.length; ++i) {
79 var entry = createLogEntryText(JSON.parse(logEntries[i]));
81 container.appendChild(entry);
86 * Create a cell in network state table.
88 * @param {string} value Content in the cell.
89 * @return {DOMElement} The created td element that displays the given value.
91 var createStatusTableCell = function(value) {
92 var col = document.createElement('td');
93 col.textContent = value || '';
98 * Create a row in the network state table.
100 * @param {string} path The network path.
101 * @param {dictionary} status Properties of the network.
102 * @return {DOMElement} The created tr element that contains the network
105 var createStatusTableRow = function(path, status) {
106 var row = document.createElement('tr');
107 row.className = 'network-status-table-row';
108 row.appendChild(createStatusTableCell(path));
109 row.appendChild(createStatusTableCell(status['GUID'].slice(1, 9)));
110 for (var i = 0; i < NETWORK_STATE_FIELDS.length; ++i) {
111 row.appendChild(createStatusTableCell(status[NETWORK_STATE_FIELDS[i]]));
117 * Create network state table.
119 * @param {Array.<Object>} networkStatuses An array of network states.
121 var createNetworkTable = function(networkStatuses) {
122 var table = $('network-status-table');
123 var oldRows = table.querySelectorAll('.network-status-table-row');
124 for (var i = 0; i < oldRows.length; ++i)
125 table.removeChild(oldRows[i]);
126 for (var path in networkStatuses)
128 createStatusTableRow(path, networkStatuses[path]));
132 * This callback function is triggered when the data is received.
134 * @param {dictionary} data A dictionary that contains network state
137 var onNetworkInfoReceived = function(data) {
138 createEventLog(JSON.parse(data.networkEventLog));
139 createNetworkTable(data.networkState);
143 * Sends a refresh request.
145 var sendRefresh = function() {
146 chrome.send('requestNetworkInfo');
150 * Sets refresh rate if the interval is found in the url.
152 var setRefresh = function() {
153 var interval = parseQueryParams(window.location)['refresh'];
154 if (interval && interval != '')
155 setInterval(sendRefresh, parseInt(interval) * 1000);
159 * Get network information from WebUI.
161 document.addEventListener('DOMContentLoaded', function() {
162 $('log-refresh').onclick = sendRefresh;
163 $('log-error').checked = true;
164 $('log-error').onclick = sendRefresh;
165 $('log-user').checked = true;
166 $('log-user').onclick = sendRefresh;
167 $('log-event').checked = true;
168 $('log-event').onclick = sendRefresh;
169 $('log-debug').checked = false;
170 $('log-debug').onclick = sendRefresh;
171 $('log-fileinfo').checked = false;
172 $('log-fileinfo').onclick = sendRefresh;
178 onNetworkInfoReceived: onNetworkInfoReceived