| 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 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 57 if (subobject) | 57 if (subobject) |
| 58 return getValueFromProperties(subobject, key2); | 58 return getValueFromProperties(subobject, key2); |
| 59 } | 59 } |
| 60 return properties[key]; | 60 return properties[key]; |
| 61 }; | 61 }; |
| 62 | 62 |
| 63 /** | 63 /** |
| 64 * Creates a cell with a button for expanding a network state table row. | 64 * Creates a cell with a button for expanding a network state table row. |
| 65 * | 65 * |
| 66 * @param {string} guid The GUID identifying the network. | 66 * @param {string} guid The GUID identifying the network. |
| 67 * @return {DOMElement} The created td element that displays the given value. | 67 * @return {!HTMLElement} The created td element that displays the given |
| 68 * value. |
| 68 */ | 69 */ |
| 69 var createStateTableExpandButton = function(guid) { | 70 var createStateTableExpandButton = function(guid) { |
| 70 var cell = document.createElement('td'); | 71 var cell = /** @type {!HTMLElement} */ (document.createElement('td')); |
| 71 cell.className = 'state-table-expand-button-cell'; | 72 cell.className = 'state-table-expand-button-cell'; |
| 72 var button = document.createElement('button'); | 73 var button = document.createElement('button'); |
| 73 button.addEventListener('click', function(event) { | 74 button.addEventListener('click', function(event) { |
| 74 toggleExpandRow(event.target, guid); | 75 toggleExpandRow(/** @type {!HTMLElement} */ (event.target), guid); |
| 75 }); | 76 }); |
| 76 button.className = 'state-table-expand-button'; | 77 button.className = 'state-table-expand-button'; |
| 77 button.textContent = '+'; | 78 button.textContent = '+'; |
| 78 cell.appendChild(button); | 79 cell.appendChild(button); |
| 79 return cell; | 80 return cell; |
| 80 }; | 81 }; |
| 81 | 82 |
| 82 /** | 83 /** |
| 83 * Creates a cell in network state table. | 84 * Creates a cell in network state table. |
| 84 * | 85 * |
| 85 * @param {string} value Content in the cell. | 86 * @param {string} value Content in the cell. |
| 86 * @return {DOMElement} The created td element that displays the given value. | 87 * @return {!HTMLElement} The created td element that displays the given |
| 88 * value. |
| 87 */ | 89 */ |
| 88 var createStateTableCell = function(value) { | 90 var createStateTableCell = function(value) { |
| 89 var cell = document.createElement('td'); | 91 var cell = /** @type {!HTMLElement} */ (document.createElement('td')); |
| 90 cell.textContent = value || ''; | 92 cell.textContent = value || ''; |
| 91 return cell; | 93 return cell; |
| 92 }; | 94 }; |
| 93 | 95 |
| 94 /** | 96 /** |
| 95 * Creates a row in the network state table. | 97 * Creates a row in the network state table. |
| 96 * | 98 * |
| 97 * @param {Array} stateFields The state fields to use for the row. | 99 * @param {Array} stateFields The state fields to use for the row. |
| 98 * @param {Object} state Property values for the network or favorite. | 100 * @param {Object} state Property values for the network or favorite. |
| 99 * @return {DOMElement} The created tr element that contains the network | 101 * @return {!HTMLElement} The created tr element that contains the network |
| 100 * state information. | 102 * state information. |
| 101 */ | 103 */ |
| 102 var createStateTableRow = function(stateFields, state) { | 104 var createStateTableRow = function(stateFields, state) { |
| 103 var row = document.createElement('tr'); | 105 var row = /** @type {!HTMLElement} */ (document.createElement('tr')); |
| 104 row.className = 'state-table-row'; | 106 row.className = 'state-table-row'; |
| 105 var guid = state.GUID; | 107 var guid = state['GUID']; |
| 106 row.appendChild(createStateTableExpandButton(guid)); | 108 row.appendChild(createStateTableExpandButton(guid)); |
| 107 for (var i = 0; i < stateFields.length; ++i) { | 109 for (var i = 0; i < stateFields.length; ++i) { |
| 108 var field = stateFields[i]; | 110 var field = stateFields[i]; |
| 109 var value = ''; | 111 var value = ''; |
| 110 if (typeof field == 'string') { | 112 if (typeof field == 'string') { |
| 111 value = getValueFromProperties(state, field); | 113 value = getValueFromProperties(state, field); |
| 112 } else { | 114 } else { |
| 113 for (var j = 0; j < field.length; ++j) { | 115 for (var j = 0; j < field.length; ++j) { |
| 114 value = getValueFromProperties(state, field[j]); | 116 value = getValueFromProperties(state, field[j]); |
| 115 if (value) | 117 if (value) |
| 116 break; | 118 break; |
| 117 } | 119 } |
| 118 } | 120 } |
| 119 if (field == 'GUID') | 121 if (field == 'GUID') |
| 120 value = value.slice(0, 8); | 122 value = value.slice(0, 8); |
| 121 row.appendChild(createStateTableCell(value)); | 123 row.appendChild(createStateTableCell(/** @type {string} */ (value))); |
| 122 } | 124 } |
| 123 return row; | 125 return row; |
| 124 }; | 126 }; |
| 125 | 127 |
| 126 /** | 128 /** |
| 127 * Creates a table for networks or favorites. | 129 * Creates a table for networks or favorites. |
| 128 * | 130 * |
| 129 * @param {string} tablename The name of the table to be created. | 131 * @param {string} tablename The name of the table to be created. |
| 130 * @param {Array} stateFields The list of fields for the table. | 132 * @param {Array} stateFields The list of fields for the table. |
| 131 * @param {Array} states An array of network or favorite states. | 133 * @param {Array} states An array of network or favorite states. |
| 132 */ | 134 */ |
| 133 var createStateTable = function(tablename, stateFields, states) { | 135 var createStateTable = function(tablename, stateFields, states) { |
| 134 var table = $(tablename); | 136 var table = $(tablename); |
| 135 var oldRows = table.querySelectorAll('.state-table-row'); | 137 var oldRows = table.querySelectorAll('.state-table-row'); |
| 136 for (var i = 0; i < oldRows.length; ++i) | 138 for (var i = 0; i < oldRows.length; ++i) |
| 137 table.removeChild(oldRows[i]); | 139 table.removeChild(oldRows[i]); |
| 138 states.forEach(function(state) { | 140 states.forEach(function(state) { |
| 139 table.appendChild(createStateTableRow(stateFields, state)); | 141 table.appendChild(createStateTableRow(stateFields, state)); |
| 140 }); | 142 }); |
| 141 }; | 143 }; |
| 142 | 144 |
| 143 /** | 145 /** |
| 144 * This callback function is triggered when visible networks are received. | 146 * This callback function is triggered when visible networks are received. |
| 145 * | 147 * |
| 146 * @param {Array} data A list of network state information for each | 148 * @param {Array} states A list of network state information for each |
| 147 * visible network. | 149 * visible network. |
| 148 */ | 150 */ |
| 149 var onVisibleNetworksReceived = function(states) { | 151 var onVisibleNetworksReceived = function(states) { |
| 150 createStateTable('network-state-table', NETWORK_STATE_FIELDS, states); | 152 createStateTable('network-state-table', NETWORK_STATE_FIELDS, states); |
| 151 }; | 153 }; |
| 152 | 154 |
| 153 /** | 155 /** |
| 154 * This callback function is triggered when favorite networks are received. | 156 * This callback function is triggered when favorite networks are received. |
| 155 * | 157 * |
| 156 * @param {Object} data A list of network state information for each | 158 * @param {!Array} states A list of network state information for each |
| 157 * favorite network. | 159 * favorite network. |
| 158 */ | 160 */ |
| 159 var onFavoriteNetworksReceived = function(states) { | 161 var onFavoriteNetworksReceived = function(states) { |
| 160 createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, states); | 162 createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, states); |
| 161 }; | 163 }; |
| 162 | 164 |
| 163 /** | 165 /** |
| 164 * Toggles the button state and add or remove a row displaying the complete | 166 * Toggles the button state and add or remove a row displaying the complete |
| 165 * state information for a row. | 167 * state information for a row. |
| 166 * | 168 * |
| 167 * @param {DOMElement} btn The button that was clicked. | 169 * @param {!HTMLElement} btn The button that was clicked. |
| 168 * @param {string} guid GUID identifying the network. | 170 * @param {string} guid GUID identifying the network. |
| 169 */ | 171 */ |
| 170 var toggleExpandRow = function(btn, guid) { | 172 var toggleExpandRow = function(btn, guid) { |
| 171 var cell = btn.parentNode; | 173 var cell = btn.parentNode; |
| 172 var row = cell.parentNode; | 174 var row = /** @type {!HTMLElement} */ (cell.parentNode); |
| 173 if (btn.textContent == '-') { | 175 if (btn.textContent == '-') { |
| 174 btn.textContent = '+'; | 176 btn.textContent = '+'; |
| 175 row.parentNode.removeChild(row.nextSibling); | 177 row.parentNode.removeChild(row.nextSibling); |
| 176 } else { | 178 } else { |
| 177 btn.textContent = '-'; | 179 btn.textContent = '-'; |
| 178 var expandedRow = createExpandedRow(guid, row); | 180 var expandedRow = createExpandedRow(guid, row); |
| 179 row.parentNode.insertBefore(expandedRow, row.nextSibling); | 181 row.parentNode.insertBefore(expandedRow, row.nextSibling); |
| 180 } | 182 } |
| 181 }; | 183 }; |
| 182 | 184 |
| 183 /** | 185 /** |
| 184 * Creates the expanded row for displaying the complete state as JSON. | 186 * Creates the expanded row for displaying the complete state as JSON. |
| 185 * | 187 * |
| 186 * @param {Object} state Property values for the network or favorite. | 188 * @param {string} guid The GUID identifying the network. |
| 187 * @param {DOMElement} baseRow The unexpanded row associated with the new row. | 189 * @param {!HTMLElement} baseRow The unexpanded row associated with the new |
| 188 * @return {DOMElement} The created tr element for the expanded row. | 190 * row. |
| 191 * @return {!HTMLElement} The created tr element for the expanded row. |
| 189 */ | 192 */ |
| 190 var createExpandedRow = function(guid, baseRow) { | 193 var createExpandedRow = function(guid, baseRow) { |
| 191 var expandedRow = document.createElement('tr'); | 194 var expandedRow = /** @type {!HTMLElement} */ ( |
| 195 document.createElement('tr')); |
| 192 expandedRow.className = 'state-table-row'; | 196 expandedRow.className = 'state-table-row'; |
| 193 var emptyCell = document.createElement('td'); | 197 var emptyCell = document.createElement('td'); |
| 194 emptyCell.style.border = 'none'; | 198 emptyCell.style.border = 'none'; |
| 195 expandedRow.appendChild(emptyCell); | 199 expandedRow.appendChild(emptyCell); |
| 196 var detailCell = document.createElement('td'); | 200 var detailCell = document.createElement('td'); |
| 197 detailCell.id = guid; | 201 detailCell.id = guid; |
| 198 detailCell.className = 'state-table-expanded-cell'; | 202 detailCell.className = 'state-table-expanded-cell'; |
| 199 detailCell.colSpan = baseRow.childNodes.length - 1; | 203 detailCell.colSpan = baseRow.childNodes.length - 1; |
| 200 expandedRow.appendChild(detailCell); | 204 expandedRow.appendChild(detailCell); |
| 201 var showDetail = function(state, error) { | 205 var showDetail = function(state, error) { |
| (...skipping 12 matching lines...) Expand all Loading... |
| 214 } else { | 218 } else { |
| 215 chrome.networkingPrivate.getProperties(guid, function(properties) { | 219 chrome.networkingPrivate.getProperties(guid, function(properties) { |
| 216 showDetail(properties, chrome.runtime.lastError); }); | 220 showDetail(properties, chrome.runtime.lastError); }); |
| 217 } | 221 } |
| 218 return expandedRow; | 222 return expandedRow; |
| 219 }; | 223 }; |
| 220 | 224 |
| 221 /** | 225 /** |
| 222 * Callback invoked by Chrome after a getShillProperties call. | 226 * Callback invoked by Chrome after a getShillProperties call. |
| 223 * | 227 * |
| 224 * @param {Object} properties The requested Shill properties. Will contain | 228 * @param {Array} args The requested Shill properties. Will contain |
| 225 * just the 'GUID' and 'ShillError' properties if the call failed. | 229 * just the 'GUID' and 'ShillError' properties if the call failed. |
| 226 */ | 230 */ |
| 227 var getShillPropertiesResult = function(args) { | 231 var getShillPropertiesResult = function(args) { |
| 228 var properties = args.shift(); | 232 var properties = args.shift(); |
| 229 var guid = properties['GUID']; | 233 var guid = properties['GUID']; |
| 230 if (!guid) { | 234 if (!guid) { |
| 231 console.error('No GUID in getShillPropertiesResult'); | 235 console.error('No GUID in getShillPropertiesResult'); |
| 232 return; | 236 return; |
| 233 } | 237 } |
| 234 | 238 |
| (...skipping 19 matching lines...) Expand all Loading... |
| 254 chrome.networkingPrivate.getNetworks( | 258 chrome.networkingPrivate.getNetworks( |
| 255 {'networkType': 'All', 'configured': true}, onFavoriteNetworksReceived); | 259 {'networkType': 'All', 'configured': true}, onFavoriteNetworksReceived); |
| 256 }; | 260 }; |
| 257 | 261 |
| 258 /** | 262 /** |
| 259 * Sets refresh rate if the interval is found in the url. | 263 * Sets refresh rate if the interval is found in the url. |
| 260 */ | 264 */ |
| 261 var setRefresh = function() { | 265 var setRefresh = function() { |
| 262 var interval = parseQueryParams(window.location)['refresh']; | 266 var interval = parseQueryParams(window.location)['refresh']; |
| 263 if (interval && interval != '') | 267 if (interval && interval != '') |
| 264 setInterval(requestNetworks, parseInt(interval) * 1000); | 268 setInterval(requestNetworks, parseInt(interval, 10) * 1000); |
| 265 }; | 269 }; |
| 266 | 270 |
| 267 /** | 271 /** |
| 268 * Gets network information from WebUI. | 272 * Gets network information from WebUI. |
| 269 */ | 273 */ |
| 270 document.addEventListener('DOMContentLoaded', function() { | 274 document.addEventListener('DOMContentLoaded', function() { |
| 271 $('refresh').onclick = requestNetworks; | 275 $('refresh').onclick = requestNetworks; |
| 272 setRefresh(); | 276 setRefresh(); |
| 273 requestNetworks(); | 277 requestNetworks(); |
| 274 }); | 278 }); |
| 275 | 279 |
| 276 return { | 280 return { |
| 277 getShillPropertiesResult: getShillPropertiesResult | 281 getShillPropertiesResult: getShillPropertiesResult |
| 278 }; | 282 }; |
| 279 })(); | 283 })(); |
| OLD | NEW |