Replace chrome://network implementation with networkConfig API

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

 // 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.
 
-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 = {
     'Error': 'network-log-level-error',
     'User': 'network-log-level-user',
     'Event': 'network-log-level-event',
     'Debug': 'network-log-level-debug'
   };
 
   var LOG_LEVEL_CHECKBOX = {
@@ skipping 64 matching lines @@
         container.appendChild(entry);
     }
   };
 
   /**
    * Create a cell with a button for expanding a network state table row.
    *
    * @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);
     return cell;
   };
 
   /**
    * Create a cell in network state table.
    *
    * @param {string} value Content in the cell.
    * @return {DOMElement} The created td element that displays the given value.
    */
   var createStateTableCell = function(value) {
     var cell = document.createElement('td');
     cell.textContent = value || '';
     return cell;
   };
 
   /**
    * 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.

           if (value)
             break;
         }
       }
+      if (field == networkConfig.Service.GUID)
+        value = value.slice(1, 9);
       row.appendChild(createStateTableCell(value));
     }
     return row;
   };
 
   /**
    * Create table for networks or favorites.
    *
    * @param {string} tablename The name of the table to be created.
    * @param {Array.<Object>} stateFields The list of fields for the table.
    * @param {Array.<Object>} states An array of network or favorite states.
    */
   var createStateTable = function(tablename, stateFields, states) {
     var table = $(tablename);
     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);
+  };
+
+  /**
    * Toggle 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 {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')) {
       btn.classList.remove('state-table-expand-button-expanded');
       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);
     }
   };
 
   /**
    * Creates the expanded row for displaying the complete state as JSON.
    *
    * @param {dictionary} 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.
    */
-  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');
     emptyCell.style.border = 'none';
     expandedRow.appendChild(emptyCell);
     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 sendRefresh = function() {
-    chrome.send('requestNetworkInfo');
+  var requestLog = function() {
+    chrome.send('NetworkUI.getNetworkLog');
   };
 
   /**
+   * Requests an update of all network info.
+   */
+  var requestNetworks = function() {
+    networkConfig.getVisibleNetworks(networkConfig.Type.All,
+                                     onVisibleNetworksReceived);
+    // TODO(stevenjb): Request favorites.
+  };
+
+  /**
    * Sets refresh rate if the interval is found in the url.
    */
   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
   };
-}();
+})();