Add custom Polymer network icon element

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_ui/network_ui.js b/chrome/browser/resources/chromeos/network_ui/network_ui.js
index d03b71f052d0acd737f456a6f03ac33de89d6001..63df907f2b153e4af24d92cc48dda1a066edc75a 100644
--- a/chrome/browser/resources/chromeos/network_ui/network_ui.js
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.js
@@ -36,28 +36,41 @@ var NetworkUI = (function() {
   ];
 
   /**
-   * Returns the property associated with a key (which may reference a
-   * sub-object).
+   * Returns a cr-onc-data Polymer element to connect to cr-network-icon
+   * elements.
    *
-   * @param {Object} properties The object containing the network properties.
+   * @param {CrOnc.NetworkConfigType} networkState The network state properties.
+   * @return {Element} A cr-onc-data Element.
+   */
+  var createNetworkState = function(networkState) {
+    var oncData =
+          /** @type {Element} */ (document.createElement('cr-onc-data'));

[michaelpg, 2015/02/10 08:11:24]

nit: 4 spaces

[stevenjb, 2015/02/11 00:16:11]

Done.

+    oncData.data = networkState;
+    return oncData;
+  };
+
+  /**
+   * Returns the ONC data property for networkState associated with a key. Used
+   * to access properties in networkState by name.
+   *
+   * @param {CrOnc.NetworkConfigType} networkState The network state properties.
    * @param {string} key The ONC key for the property. May refer to a nested
    *     propety, e.g. 'WiFi.Security'.
    * @return {*} The value associated with the property.
    */
-  var getValueFromProperties = function(properties, key) {
-    if (!key) {
-      console.error('Empty key');
-      return undefined;
-    }
+  var getOncProperty = function(networkState, key) {
+    var dict = /** @type {!Object} */ (networkState);

[michaelpg, 2015/02/10 08:11:24]

no parens needed here

[stevenjb, 2015/02/11 00:16:11]

Hmm, other existing similar examples introduced by Jeremy all use () when
casting to a type, e.g. line 84.

[michaelpg, 2015/02/11 00:47:28]

Parens are needed by closure when using a compound expression like "x.y" or "new
A". I'll defer to Jeremy on whether we want to be consistent everywhere or stick
with normal JS when we can.

[James Hawkins, 2015/02/11 00:48:33]

This is a cast, so the parens are required by the compiler.

     var dot = key.indexOf('.');
-    if (dot > 0) {
+    while (dot > 0) {
       var key1 = key.substring(0, dot);
       var key2 = key.substring(dot + 1);
-      var subobject = properties[key1];
-      if (subobject)
-        return getValueFromProperties(subobject, key2);
+      dict = dict[key1];
+      if (!dict)
+        return undefined;
+      key = key2;
+      dot = key.indexOf('.');
     }
-    return properties[key];
+    return dict[key];
   };
 
   /**
@@ -81,6 +94,22 @@ var NetworkUI = (function() {
   };
 
   /**
+   * Creates a cell with an icon representing the network state.
+   *
+   * @param {CrOnc.NetworkConfigType} networkState The network state properties.
+   * @return {HTMLElement} The created td element that displays the icon.

[michaelpg, 2015/02/10 08:11:24]

nit: you could use HTMLTableCellElement

[stevenjb, 2015/02/11 00:16:11]

I copied the example Jeremy did. Jeremy, thoughts?

[Jeremy Klein, 2015/02/11 00:31:30]

Michael's suggestion is more specific so I like it. However, it's not necessary
since we aren't using any td-specific properties. Either way +1 to changing it
to the more specific type.

+   */
+  var createStateTableIcon = function(networkState) {
+    var cell = /** @type {!HTMLElement} */ (document.createElement('td'));
+    cell.className = 'state-table-icon-cell';
+    var icon = document.createElement('cr-network-icon');
+    icon.isListItem = true;
+    icon.networkState = createNetworkState(networkState);
+    cell.appendChild(icon);
+    return cell;
+  };
+
+  /**
    * Creates a cell in network state table.
    *
    * @param {string} value Content in the cell.
@@ -97,30 +126,33 @@ var NetworkUI = (function() {
    * Creates a row in the network state table.
    *
    * @param {Array} stateFields The state fields to use for the row.
-   * @param {Object} state Property values for the network or favorite.
+   * @param {CrOnc.NetworkConfigType} networkState The network state properties.
    * @return {!HTMLElement} The created tr element that contains the network

[michaelpg, 2015/02/10 08:11:25]

same nit for HTMLTableRowElement

[stevenjb, 2015/02/11 00:16:11]

Acknowledged.

    *     state information.
    */
-  var createStateTableRow = function(stateFields, state) {
+  var createStateTableRow = function(stateFields, networkState) {
     var row = /** @type {!HTMLElement} */ (document.createElement('tr'));
     row.className = 'state-table-row';
-    var guid = state['GUID'];
+    var guid = networkState.GUID;
     row.appendChild(createStateTableExpandButton(guid));
+    row.appendChild(createStateTableIcon(networkState));
     for (var i = 0; i < stateFields.length; ++i) {
       var field = stateFields[i];
-      var value = '';
+      var value;
       if (typeof field == 'string') {
-        value = getValueFromProperties(state, field);
+        value = getOncProperty(networkState, field);
       } else {
         for (var j = 0; j < field.length; ++j) {
-          value = getValueFromProperties(state, field[j]);
-          if (value)
+          value = getOncProperty(networkState, field[j]);
+          if (value != undefined)
             break;
         }
       }
+      var stringValue =
+          (value != undefined) ? /** @type {string} */ (value) : '';
       if (field == 'GUID')
-        value = value.slice(0, 8);
-      row.appendChild(createStateTableCell(/** @type {string} */ (value)));
+        stringValue = stringValue.slice(0, 8);
+      row.appendChild(createStateTableCell(stringValue));
     }
     return row;
   };
@@ -138,7 +170,8 @@ var NetworkUI = (function() {
     for (var i = 0; i < oldRows.length; ++i)
       table.removeChild(oldRows[i]);
     states.forEach(function(state) {
-      table.appendChild(createStateTableRow(stateFields, state));
+      table.appendChild(createStateTableRow(
+          stateFields, /** @type {CrOnc.NetworkConfigType} */ (state)));
     });
   };
 
@@ -149,6 +182,22 @@ var NetworkUI = (function() {
    *     visible network.
    */
   var onVisibleNetworksReceived = function(states) {
+    /** @type {CrOnc.NetworkConfigType} */ var defaultState;
+    if (states.length > 0)
+        defaultState = /** @type {CrOnc.NetworkConfigType} */ (states[0]);
+    if (defaultState && defaultState.Type != 'VPN') {
+      $('default-network-text').textContent =
+          loadTimeData.getStringF('defaultNetworkText',
+                                  defaultState.Name,
+                                  defaultState.ConnectionState);
+      $('default-network-icon').networkState = createNetworkState(defaultState);
+    } else {
+      $('default-network-text').textContent =
+          loadTimeData.getString('noNetworkText');
+      // Show the disconnected wifi icon if there are no networks.
+      $('default-network-icon').networkType = 'WiFi';
+    }
+
     createStateTable('network-state-table', NETWORK_STATE_FIELDS, states);
   };