| OLD | NEW |
| 1 // Copyright 2013 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 var NetworkUI = (function() { | 5 var NetworkUI = (function() { |
| 6 'use strict'; | 6 'use strict'; |
| 7 | 7 |
| 8 // Properties to display in the network state table. Each entry can be either | 8 // Properties to display in the network state table. Each entry can be either |
| 9 // a single state field or an array of state fields. If more than one is | 9 // a single state field or an array of state fields. If more than one is |
| 10 // specified then the first non empty value is used. | 10 // specified then the first non empty value is used. |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 52 var createTableRowElement = function() { | 52 var createTableRowElement = function() { |
| 53 return /** @type {!HTMLTableRowElement} */(document.createElement('tr')); | 53 return /** @type {!HTMLTableRowElement} */(document.createElement('tr')); |
| 54 }; | 54 }; |
| 55 | 55 |
| 56 /** | 56 /** |
| 57 * Returns the ONC data property for networkState associated with a key. Used | 57 * Returns the ONC data property for networkState associated with a key. Used |
| 58 * to access properties in the networkState by |key| which may may refer to a | 58 * to access properties in the networkState by |key| which may may refer to a |
| 59 * nested property, e.g. 'WiFi.Security'. If any part of a nested key is | 59 * nested property, e.g. 'WiFi.Security'. If any part of a nested key is |
| 60 * missing, this will return undefined. | 60 * missing, this will return undefined. |
| 61 * | 61 * |
| 62 * @param {!CrOnc.NetworkConfigType} networkState The network state | 62 * @param {!chrome.networkingPrivate.NetworkStateProperties} networkState The |
| 63 * property dictionary. | 63 * network state property dictionary. |
| 64 * @param {string} key The ONC key for the property. | 64 * @param {string} key The ONC key for the property. |
| 65 * @return {*} The value associated with the property or undefined if the | 65 * @return {*} The value associated with the property or undefined if the |
| 66 * key (any part of it) is not defined. | 66 * key (any part of it) is not defined. |
| 67 */ | 67 */ |
| 68 var getOncProperty = function(networkState, key) { | 68 var getOncProperty = function(networkState, key) { |
| 69 var dict = /** @type {!Object} */(networkState); | 69 var dict = /** @type {!Object} */(networkState); |
| 70 var keys = key.split('.'); | 70 var keys = key.split('.'); |
| 71 while (keys.length > 1) { | 71 while (keys.length > 1) { |
| 72 var k = keys.shift(); | 72 var k = keys.shift(); |
| 73 dict = dict[k]; | 73 dict = dict[k]; |
| (...skipping 19 matching lines...) Expand all Loading... |
| 93 }); | 93 }); |
| 94 button.className = 'state-table-expand-button'; | 94 button.className = 'state-table-expand-button'; |
| 95 button.textContent = '+'; | 95 button.textContent = '+'; |
| 96 cell.appendChild(button); | 96 cell.appendChild(button); |
| 97 return cell; | 97 return cell; |
| 98 }; | 98 }; |
| 99 | 99 |
| 100 /** | 100 /** |
| 101 * Creates a cell with an icon representing the network state. | 101 * Creates a cell with an icon representing the network state. |
| 102 * | 102 * |
| 103 * @param {CrOnc.NetworkConfigType} networkState The network state properties. | 103 * @param {!chrome.networkingPrivate.NetworkStateProperties} networkState The |
| 104 * network state properties. |
| 104 * @return {!HTMLTableCellElement} The created td element that displays the | 105 * @return {!HTMLTableCellElement} The created td element that displays the |
| 105 * icon. | 106 * icon. |
| 106 */ | 107 */ |
| 107 var createStateTableIcon = function(networkState) { | 108 var createStateTableIcon = function(networkState) { |
| 108 var cell = createTableCellElement(); | 109 var cell = createTableCellElement(); |
| 109 cell.className = 'state-table-icon-cell'; | 110 cell.className = 'state-table-icon-cell'; |
| 110 var icon = /** @type {!CrNetworkIconElement} */( | 111 var icon = /** @type {!CrNetworkIconElement} */( |
| 111 document.createElement('cr-network-icon')); | 112 document.createElement('cr-network-icon')); |
| 112 icon.isListItem = true; | 113 icon.isListItem = true; |
| 113 icon.networkState = CrOncDataElement.create(networkState); | 114 icon.networkState = CrOncDataElement.create(networkState); |
| (...skipping 11 matching lines...) Expand all Loading... |
| 125 var createStateTableCell = function(value) { | 126 var createStateTableCell = function(value) { |
| 126 var cell = createTableCellElement(); | 127 var cell = createTableCellElement(); |
| 127 cell.textContent = value || ''; | 128 cell.textContent = value || ''; |
| 128 return cell; | 129 return cell; |
| 129 }; | 130 }; |
| 130 | 131 |
| 131 /** | 132 /** |
| 132 * Creates a row in the network state table. | 133 * Creates a row in the network state table. |
| 133 * | 134 * |
| 134 * @param {Array} stateFields The state fields to use for the row. | 135 * @param {Array} stateFields The state fields to use for the row. |
| 135 * @param {CrOnc.NetworkConfigType} networkState The network state properties. | 136 * @param {!chrome.networkingPrivate.NetworkStateProperties} networkState The |
| 137 * network state properties. |
| 136 * @return {!HTMLTableRowElement} The created tr element that contains the | 138 * @return {!HTMLTableRowElement} The created tr element that contains the |
| 137 * network state information. | 139 * network state information. |
| 138 */ | 140 */ |
| 139 var createStateTableRow = function(stateFields, networkState) { | 141 var createStateTableRow = function(stateFields, networkState) { |
| 140 var row = createTableRowElement(); | 142 var row = createTableRowElement(); |
| 141 row.className = 'state-table-row'; | 143 row.className = 'state-table-row'; |
| 142 var guid = networkState.GUID; | 144 var guid = networkState.GUID; |
| 143 row.appendChild(createStateTableExpandButton(guid)); | 145 row.appendChild(createStateTableExpandButton(guid)); |
| 144 row.appendChild(createStateTableIcon(networkState)); | 146 row.appendChild(createStateTableIcon(networkState)); |
| 145 for (var i = 0; i < stateFields.length; ++i) { | 147 for (var i = 0; i < stateFields.length; ++i) { |
| (...skipping 12 matching lines...) Expand all Loading... |
| 158 value = value.slice(0, 8); | 160 value = value.slice(0, 8); |
| 159 row.appendChild(createStateTableCell(value)); | 161 row.appendChild(createStateTableCell(value)); |
| 160 } | 162 } |
| 161 return row; | 163 return row; |
| 162 }; | 164 }; |
| 163 | 165 |
| 164 /** | 166 /** |
| 165 * Creates a table for networks or favorites. | 167 * Creates a table for networks or favorites. |
| 166 * | 168 * |
| 167 * @param {string} tablename The name of the table to be created. | 169 * @param {string} tablename The name of the table to be created. |
| 168 * @param {Array} stateFields The list of fields for the table. | 170 * @param {!Array<string>} stateFields The list of fields for the table. |
| 169 * @param {Array} states An array of network or favorite states. | 171 * @param {!Array<!chrome.networkingPrivate.NetworkStateProperties>} states |
| 172 * An array of network or favorite states. |
| 170 */ | 173 */ |
| 171 var createStateTable = function(tablename, stateFields, states) { | 174 var createStateTable = function(tablename, stateFields, states) { |
| 172 var table = $(tablename); | 175 var table = $(tablename); |
| 173 var oldRows = table.querySelectorAll('.state-table-row'); | 176 var oldRows = table.querySelectorAll('.state-table-row'); |
| 174 for (var i = 0; i < oldRows.length; ++i) | 177 for (var i = 0; i < oldRows.length; ++i) |
| 175 table.removeChild(oldRows[i]); | 178 table.removeChild(oldRows[i]); |
| 176 states.forEach(function(state) { | 179 states.forEach(function(state) { |
| 177 table.appendChild(createStateTableRow( | 180 table.appendChild(createStateTableRow(stateFields, state)); |
| 178 stateFields, /** @type {!CrOnc.NetworkConfigType} */(state))); | |
| 179 }); | 181 }); |
| 180 }; | 182 }; |
| 181 | 183 |
| 182 /** | 184 /** |
| 183 * Returns a valid HTMLElement id from |guid|. | 185 * Returns a valid HTMLElement id from |guid|. |
| 184 * | 186 * |
| 185 * @param {string} guid A GUID which may start with a digit. | 187 * @param {string} guid A GUID which may start with a digit. |
| 186 * @return {string} A valid HTMLElement id. | 188 * @return {string} A valid HTMLElement id. |
| 187 */ | 189 */ |
| 188 var idFromGuid = function(guid) { | 190 var idFromGuid = function(guid) { |
| 189 return '_' + guid.replace(/[{}]/g, ''); | 191 return '_' + guid.replace(/[{}]/g, ''); |
| 190 }; | 192 }; |
| 191 | 193 |
| 192 /** | 194 /** |
| 193 * This callback function is triggered when visible networks are received. | 195 * This callback function is triggered when visible networks are received. |
| 194 * | 196 * |
| 195 * @param {!Array<!Object>} states A list of network state information for | 197 * @param {!Array<!chrome.networkingPrivate.NetworkStateProperties>} states |
| 196 * each visible network. | 198 * A list of network state information for each visible network. |
| 197 */ | 199 */ |
| 198 var onVisibleNetworksReceived = function(states) { | 200 var onVisibleNetworksReceived = function(states) { |
| 199 /** @type {CrOnc.NetworkConfigType} */ var defaultState; | 201 /** @type {chrome.networkingPrivate.NetworkStateProperties} */ var |
| 202 defaultState; |
| 200 if (states.length > 0) | 203 if (states.length > 0) |
| 201 defaultState = /** @type {!CrOnc.NetworkConfigType} */(states[0]); | 204 defaultState = states[0]; |
| 202 var icon = /** @type {CrNetworkIconElement} */($('default-network-icon')); | 205 var icon = /** @type {CrNetworkIconElement} */($('default-network-icon')); |
| 203 if (defaultState && defaultState.Type != 'VPN') { | 206 if (defaultState && |
| 207 defaultState.Type != chrome.networkingPrivate.NetworkType.VPN) { |
| 204 $('default-network-text').textContent = | 208 $('default-network-text').textContent = |
| 205 loadTimeData.getStringF('defaultNetworkText', | 209 loadTimeData.getStringF('defaultNetworkText', |
| 206 defaultState.Name, | 210 defaultState.Name, |
| 207 defaultState.ConnectionState); | 211 defaultState.ConnectionState); |
| 208 icon.networkState = CrOncDataElement.create(defaultState); | 212 icon.networkState = CrOncDataElement.create(defaultState); |
| 209 } else { | 213 } else { |
| 210 $('default-network-text').textContent = | 214 $('default-network-text').textContent = |
| 211 loadTimeData.getString('noNetworkText'); | 215 loadTimeData.getString('noNetworkText'); |
| 212 // Show the disconnected wifi icon if there are no networks. | 216 // Show the disconnected wifi icon if there are no networks. |
| 213 icon.networkType = CrOnc.Type.WIFI; | 217 icon.networkType = chrome.networkingPrivate.NetworkType.WiFi; |
| 214 } | 218 } |
| 215 | 219 |
| 216 createStateTable('network-state-table', NETWORK_STATE_FIELDS, states); | 220 createStateTable('network-state-table', NETWORK_STATE_FIELDS, states); |
| 217 }; | 221 }; |
| 218 | 222 |
| 219 /** | 223 /** |
| 220 * This callback function is triggered when favorite networks are received. | 224 * This callback function is triggered when favorite networks are received. |
| 221 * | 225 * |
| 222 * @param {!Array<!Object>} states A list of network state information for | 226 * @param {!Array<!chrome.networkingPrivate.NetworkStateProperties>} states |
| 223 * each favorite network. | 227 * A list of network state information for each favorite network. |
| 224 */ | 228 */ |
| 225 var onFavoriteNetworksReceived = function(states) { | 229 var onFavoriteNetworksReceived = function(states) { |
| 226 createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, states); | 230 createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, states); |
| 227 }; | 231 }; |
| 228 | 232 |
| 229 /** | 233 /** |
| 230 * Toggles the button state and add or remove a row displaying the complete | 234 * Toggles the button state and add or remove a row displaying the complete |
| 231 * state information for a row. | 235 * state information for a row. |
| 232 * | 236 * |
| 233 * @param {!HTMLElement} btn The button that was clicked. | 237 * @param {!HTMLElement} btn The button that was clicked. |
| (...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 340 document.addEventListener('DOMContentLoaded', function() { | 344 document.addEventListener('DOMContentLoaded', function() { |
| 341 $('refresh').onclick = requestNetworks; | 345 $('refresh').onclick = requestNetworks; |
| 342 setRefresh(); | 346 setRefresh(); |
| 343 requestNetworks(); | 347 requestNetworks(); |
| 344 }); | 348 }); |
| 345 | 349 |
| 346 return { | 350 return { |
| 347 getShillPropertiesResult: getShillPropertiesResult | 351 getShillPropertiesResult: getShillPropertiesResult |
| 348 }; | 352 }; |
| 349 })(); | 353 })(); |
| OLD | NEW |