Replace chrome://network implementation with networkConfig API

chrome/browser/resources/chromeos/network_ui/network_ui.js

Index: chrome/browser/resources/chromeos/network_ui/network_ui.js
diff --git a/chrome/browser/resources/chromeos/network.js b/chrome/browser/resources/chromeos/network_ui/network_ui.js
similarity index 65%
rename from chrome/browser/resources/chromeos/network.js
rename to chrome/browser/resources/chromeos/network_ui/network_ui.js
index 4f952bc1d55c77d75aae979282600fd17d9bf715..60d979c95e83e583cd3ae7d072c8c7199e659686 100644
--- a/chrome/browser/resources/chromeos/network.js
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.js
@@ -2,20 +2,35 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var NetworkUI = function() {
+var NetworkUI = (function() {
+  'use strict';
+
   // 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.
   var NETWORK_STATE_FIELDS = [
-    'Name', 'Type', 'State', 'Profile', 'Connectable',
-    'Error', 'Security',
-    ['Cellular.NetworkTechnology', 'EAP.EAP'],
-    'Cellular.ActivationState', 'Cellular.RoamingState',
-    'Cellular.OutOfCredits', 'Strength'
+    networkConfig.Service.ServicePath,

[pneubeck (no reviews), 2014/05/02 09:43:46]

optional:

var Service = networkConfig.Service
... Service.ServicePath ...

[stevenjb, 2014/05/02 22:07:38]

Done.

+    networkConfig.Service.GUID,
+    networkConfig.Service.Name,
+    networkConfig.Service.Type,
+    networkConfig.Service.ConnectionState,
+    networkConfig.Service.ErrorState,
+    networkConfig.Service.WiFi.Security,
+    [networkConfig.Service.Cellular.NetworkTechnology,
+     networkConfig.Service.EAP.EAP],
+    networkConfig.Service.Cellular.ActivationState,
+    networkConfig.Service.Cellular.RoamingState,
+    networkConfig.Service.Cellular.OutOfCredits,
+    networkConfig.Service.WiFi.SignalStrength
   ];
 
   var FAVORITE_STATE_FIELDS = [
-    'Name', 'Type', 'Profile', 'onc_source'
+    networkConfig.Service.ServicePath,
+    networkConfig.Service.GUID,
+    networkConfig.Service.Name,
+    networkConfig.Service.Type,
+    networkConfig.Service.Profile,
+    networkConfig.Service.OncSource
   ];
 
   var LOG_LEVEL_CLASSNAME = {
@@ -100,12 +115,12 @@ var NetworkUI = function() {
    * @param {dictionary} state Property values for the network or favorite.
    * @return {DOMElement} The created td element that displays the given value.
    */
-  var createStateTableExpandButton = function(state) {
+  var createStateTableExpandButton = function(guid) {
     var cell = document.createElement('td');
     cell.className = 'state-table-expand-button-cell';
     var button = document.createElement('button');
     button.addEventListener('click', function(event) {
-      toggleExpandRow(event.target, state);
+      toggleExpandRow(event.target, guid);
     });
     button.className = 'state-table-expand-button';
     cell.appendChild(button);
@@ -128,25 +143,31 @@ var NetworkUI = function() {
    * Create a row in the network state table.
    *
    * @param {string} stateFields The state fields to use for the row.
-   * @param {string} path The network or favorite path.
    * @param {dictionary} state Property values for the network or favorite.
    * @return {DOMElement} The created tr element that contains the network
    *     state information.
    */
-  var createStateTableRow = function(stateFields, path, state) {
+  var createStateTableRow = function(stateFields, state) {
     var row = document.createElement('tr');
     row.className = 'state-table-row';
-    row.appendChild(createStateTableExpandButton(state));
-    row.appendChild(createStateTableCell(path));
-    var guid = state['GUID'];
-    if (guid)
-      guid = guid.slice(1, 9);
-    row.appendChild(createStateTableCell(guid));
+    var guid = state[networkConfig.Service.GUID];

[pneubeck (no reviews), 2014/05/02 09:43:46]

state.GUID

[stevenjb, 2014/05/02 22:07:38]

Right, so, my intention here was to generate a runtime error if I used a
property that doesn't exist, but I realize now that as written it won't, since
JS will happily return undefined for state[undefined]. I changed these to use a
helper method which logs an error if an undefined property is passed to it.

+    if (!guid)
+      guid = state[networkConfig.Service.ServicePath];

[pneubeck (no reviews), 2014/05/02 09:43:46]

state.ServicePath

[stevenjb, 2014/05/02 22:07:38]

ditto

+    row.appendChild(createStateTableExpandButton(guid));
     for (var i = 0; i < stateFields.length; ++i) {
       var field = stateFields[i];
       var value = '';
       if (typeof field == 'string') {
-        value = state[field];
+        var dot = field.indexOf('.');

[pneubeck (no reviews), 2014/05/02 09:43:46]

this doesn't work for arbitrarily nested fields.

Please move the part 161 - 170 to a helper function 'getPropertyValue' (or
getONCProperty...)

I have the impression, that the network API should even return not only
dictionaries, but objects which have this 'getValue(selector)' as a method and
the selectors should be members of the API like networkConfig.Service.
The advantage will be, that we can have the following semantics:

state.getValue(NetworkConfiguration.WiFi.Security)
 ===
state.getValue(NetworkConfiguration.WiFi).getValue(NetworkConfiguration.WiFi.Security)
 ===
state.WiFi.getValue(NetworkConfiguration.WiFi.Security)
 ===
state.WiFi.Security

I.e., we can reuse global selectors for local accesses.
The way you implement is, is adding a (private) member 'selector' to each
dictionary that contains its own selector (path from root to this dictionary),
then:

getValue(selector) {
  if (!this.selector isPrefixOf selector)
     throw exception
  remove this.selector.length keys from selector
  var cur = this
  for ( index i over selector )
    cur = cur[selector[i]]
  return cur
}

[stevenjb, 2014/05/02 22:07:38]

I added a helper to networkConfig.
I don't think we need to support arbitrarily nested fields, at least not until
we have any. I'm sure what you wrote would work, but it seems more complicated
than strictly necessary here, at least so far.

+        if (dot > 0) {
+          var field1 = field.substring(0, dot);
+          var field2 = field.substring(dot + 1);
+          var fieldobj = state[field1];
+          if (fieldobj)
+            value = fieldobj[field2];
+        } else {
+          value = state[field];
+        }
       } else {
         for (var j = 0; j < field.length; ++j) {
           value = state[field[j]];

[pneubeck (no reviews), 2014/05/02 09:43:46]

should use the helper function

[stevenjb, 2014/05/02 22:07:38]

Done.

@@ -154,6 +175,8 @@ var NetworkUI = function() {
             break;
         }
       }
+      if (field == networkConfig.Service.GUID)
+        value = value.slice(1, 9);
       row.appendChild(createStateTableCell(value));
     }
     return row;
@@ -171,22 +194,37 @@ var NetworkUI = function() {
     var oldRows = table.querySelectorAll('.state-table-row');
     for (var i = 0; i < oldRows.length; ++i)
       table.removeChild(oldRows[i]);
-    for (var path in states)
-      table.appendChild(createStateTableRow(stateFields, path, states[path]));
+    for (var s in states)

[pneubeck (no reviews), 2014/05/02 09:43:46]

arrays should be traversed by index or with the forEach method

e.g.
http://stackoverflow.com/questions/500504/why-is-using-for-in-with-array-iter...

[stevenjb, 2014/05/02 22:07:38]

Done.

+      table.appendChild(createStateTableRow(stateFields, states[s]));
   };
 
   /**
-   * This callback function is triggered when the data is received.
+   * This callback function is triggered when the network log is received.
    *
-   * @param {dictionary} data A dictionary that contains network state
-   *     information.
+   * @param {dictionary} data A JSON structure of event log entries.
    */
-  var onNetworkInfoReceived = function(data) {
-    createEventLog(JSON.parse(data.networkEventLog));
-    createStateTable(
-        'network-state-table', NETWORK_STATE_FIELDS, data.networkStates);
-    createStateTable(
-        'favorite-state-table', FAVORITE_STATE_FIELDS, data.favoriteStates);
+  var getNetworkLogCallback = function(data) {
+    createEventLog(JSON.parse(data));
+  };
+
+  /**
+   * This callback function is triggered when visible networks are received.
+   *
+   * @param {dictionary} data A list of network state information for each
+   *     visible network.
+   */
+  var onVisibleNetworksReceived = function(data) {
+    createStateTable('network-state-table', NETWORK_STATE_FIELDS, data[0]);

[pneubeck (no reviews), 2014/05/02 09:43:46]

data[0] -> data
(note that onFavoriteNetworksReceived was different)

[stevenjb, 2014/05/02 22:07:38]

'data' works with the change to using 'apply' in network_config. Done.

+  };
+
+  /**
+   * This callback function is triggered when favorite networks are received.
+   *
+   * @param {dictionary} data A list of network state information for each
+   *     favorite network.
+   */
+  var onFavoriteNetworksReceived = function(data) {
+    createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, data);
   };
 
   /**
@@ -196,7 +234,7 @@ var NetworkUI = function() {
    * @param {DOMElement} btn The button that was clicked.
    * @param {dictionary} state Property values for the network or favorite.
    */
-  var toggleExpandRow = function(btn, state) {
+  var toggleExpandRow = function(btn, guid) {
     var cell = btn.parentNode;
     var row = cell.parentNode;
     if (btn.classList.contains('state-table-expand-button-expanded')) {
@@ -204,7 +242,7 @@ var NetworkUI = function() {
       row.parentNode.removeChild(row.nextSibling);
     } else {
       btn.classList.add('state-table-expand-button-expanded');
-      var expandedRow = createExpandedRow(state, row);
+      var expandedRow = createExpandedRow(guid, row);
       row.parentNode.insertBefore(expandedRow, row.nextSibling);
     }
   };
@@ -216,7 +254,7 @@ var NetworkUI = function() {
    * @param {DOMElement} baseRow The unexpanded row associated with the new row.
    * @return {DOMElement} The created tr element for the expanded row.
    */
-  var createExpandedRow = function(state, baseRow) {
+  var createExpandedRow = function(guid, baseRow) {
     var expandedRow = document.createElement('tr');
     expandedRow.className = 'state-table-row';
     var emptyCell = document.createElement('td');
@@ -225,16 +263,28 @@ var NetworkUI = function() {
     var detailCell = document.createElement('td');
     detailCell.className = 'state-table-expanded-cell';
     detailCell.colSpan = baseRow.childNodes.length - 1;
-    detailCell.innerHTML = JSON.stringify(state, null, '\t');
     expandedRow.appendChild(detailCell);
+    networkConfig.getProperties(guid, function(arg_list) {

[pneubeck (no reviews), 2014/05/02 09:43:46]

function(arg_list) -> function(state)

[stevenjb, 2014/05/02 22:07:38]

ditto

+      var state = arg_list[0];

[pneubeck (no reviews), 2014/05/02 09:43:46]

remove

[stevenjb, 2014/05/02 22:07:38]

Done.

+      detailCell.innerHTML = JSON.stringify(state, null, '\t');
+    });
     return expandedRow;
   };
 
   /**
-   * Sends a refresh request.
+   * Requests a network log update.
+   */
+  var requestLog = function() {
+    chrome.send('NetworkUI.getNetworkLog');
+  };
+
+  /**
+   * Requests an update of all network info.
    */
-  var sendRefresh = function() {
-    chrome.send('requestNetworkInfo');
+  var requestNetworks = function() {
+    networkConfig.getVisibleNetworks(networkConfig.Type.All,
+                                     onVisibleNetworksReceived);
+    // TODO(stevenjb): Request favorites.
   };
 
   /**
@@ -243,31 +293,32 @@ var NetworkUI = function() {
   var setRefresh = function() {
     var interval = parseQueryParams(window.location)['refresh'];
     if (interval && interval != '')
-      setInterval(sendRefresh, parseInt(interval) * 1000);
+      setInterval(requestNetworks, parseInt(interval) * 1000);
   };
 
   /**
    * Get network information from WebUI.
    */
   document.addEventListener('DOMContentLoaded', function() {
-    $('log-refresh').onclick = sendRefresh;
+    $('log-refresh').onclick = requestLog;
     $('log-error').checked = true;
-    $('log-error').onclick = sendRefresh;
+    $('log-error').onclick = requestLog;
     $('log-user').checked = true;
-    $('log-user').onclick = sendRefresh;
+    $('log-user').onclick = requestLog;
     $('log-event').checked = true;
-    $('log-event').onclick = sendRefresh;
+    $('log-event').onclick = requestLog;
     $('log-debug').checked = false;
-    $('log-debug').onclick = sendRefresh;
+    $('log-debug').onclick = requestLog;
     $('log-fileinfo').checked = false;
-    $('log-fileinfo').onclick = sendRefresh;
+    $('log-fileinfo').onclick = requestLog;
     $('log-timedetail').checked = false;
-    $('log-timedetail').onclick = sendRefresh;
+    $('log-timedetail').onclick = requestLog;
     setRefresh();
-    sendRefresh();
+    requestLog();
+    requestNetworks();
   });
 
   return {
-    onNetworkInfoReceived: onNetworkInfoReceived
+    getNetworkLogCallback: getNetworkLogCallback
   };
-}();
+})();