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..45815b8f8a1371ca98e4931e57fe4042be2c4385 100644
--- a/chrome/browser/resources/chromeos/network_ui/network_ui.js
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.js
@@ -36,39 +36,71 @@ var NetworkUI = (function() {
   ];
 
   /**
-   * Returns the property associated with a key (which may reference a
-   * sub-object).
+   * Creates and returns a typed cr-onc-data Polymer element for connecting to
+   * cr-network-icon elements. Sets the data property of the element to |state|.
    *
-   * @param {Object} properties The object containing the network properties.
+   * @param {!CrOnc.NetworkConfigType} state The network state properties.
+   * @return {!CrOncDataElement} A cr-onc-data element.
+   */
+  var createNetworkState = function(state) {
+    var oncData = /** @type {!CrOncDataElement} */ (
+        document.createElement('cr-onc-data'));
+    oncData.data = state;
+    return oncData;
+  };
+
+  /**
+   * Creates and returns a typed HTMLTableCellElement.
+   *
+   * @return {!HTMLTableCellElement} A new td element.
+   */
+  var createTableCellElement = function() {
+    return /** @type {!HTMLTableCellElement} */ (document.createElement('td'));
+  };
+
+  /**
+   * Creates and returns a typed HTMLTableRowElement.
+   *
+   * @return {!HTMLTableRowElement} A net tr element.

[michaelpg, 2015/02/20 10:00:17]

s/net/new/

[stevenjb, 2015/02/23 19:23:07]

Done.

+   */
+  var createTableRowElement = function() {
+    return /** @type {!HTMLTableRowElement} */ (document.createElement('tr'));
+  };
+
+  /**
+   * 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
+   *     property dictionary.
    * @param {string} key The ONC key for the property. May refer to a nested
-   *     propety, e.g. 'WiFi.Security'.
+   *     property, 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);
     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];
   };
 
   /**
    * Creates a cell with a button for expanding a network state table row.
    *
    * @param {string} guid The GUID identifying the network.
-   * @return {!HTMLElement} The created td element that displays the given
-   *     value.
+   * @return {!HTMLTableCellElement} The created td element that displays the
+   *     given value.
    */
   var createStateTableExpandButton = function(guid) {
-    var cell = /** @type {!HTMLElement} */ (document.createElement('td'));
+    var cell = createTableCellElement();
     cell.className = 'state-table-expand-button-cell';
     var button = document.createElement('button');
     button.addEventListener('click', function(event) {
@@ -81,14 +113,32 @@ var NetworkUI = (function() {
   };
 
   /**
+   * Creates a cell with an icon representing the network state.
+   *
+   * @param {CrOnc.NetworkConfigType} networkState The network state properties.
+   * @return {!HTMLTableCellElement} The created td element that displays the
+   *     icon.
+   */
+  var createStateTableIcon = function(networkState) {
+    var cell = createTableCellElement();
+    cell.className = 'state-table-icon-cell';
+    var icon = /** @type {!CrNetworkIconElement} */ (
+        document.createElement('cr-network-icon'));
+    icon.isListItem = true;
+    icon.networkState = createNetworkState(networkState);
+    cell.appendChild(icon);
+    return cell;
+  };
+
+  /**
    * Creates a cell in network state table.

[michaelpg, 2015/02/20 10:00:17]

"in the"

[stevenjb, 2015/02/23 19:23:08]

Done.

    *
    * @param {string} value Content in the cell.
-   * @return {!HTMLElement} The created td element that displays the given
-   *     value.
+   * @return {!HTMLTableCellElement} The created td element that displays the
+   *     given value.
    */
   var createStateTableCell = function(value) {
-    var cell = /** @type {!HTMLElement} */ (document.createElement('td'));
+    var cell = createTableCellElement();
     cell.textContent = value || '';
     return cell;
   };
@@ -97,30 +147,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.
-   * @return {!HTMLElement} The created tr element that contains the network
-   *     state information.
+   * @param {CrOnc.NetworkConfigType} networkState The network state properties.
+   * @return {!HTMLTableRowElement} The created tr element that contains the
+   *     network state information.
    */
-  var createStateTableRow = function(stateFields, state) {
-    var row = /** @type {!HTMLElement} */ (document.createElement('tr'));
+  var createStateTableRow = function(stateFields, networkState) {
+    var row = createTableRowElement();
     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)

[Dan Beam, 2015/02/20 01:02:42]

why != undefined?

[stevenjb, 2015/02/20 02:22:47]

'' or 0 are valid values, but getOncProperty returns undefined if the entry
doesn't exist.

FWIW, for settings we will be using well defined, typed objects, but this
(debugging) code (currently) just uses chrome 'Value' like dictionary objects.

             break;
         }
       }
+      var stringValue =

[Dan Beam, 2015/02/20 01:02:42]

  value = value || '';

OR
 
  var stringValue = value || '';

[stevenjb, 2015/02/20 02:22:47]

I think I am incorrectly forcing this to a string; changed the expected type
instead.

+          (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,25 +191,43 @@ 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)));

[Dan Beam, 2015/02/20 01:02:42]

nit: no space between cast, i.e.

  /** cast */(obj)

not sure why other parts of network_ui.js does this (i think rest of chrome
doesn't)

[stevenjb, 2015/02/20 02:22:47]

Done throughout.

     });
   };
 
   /**
    * This callback function is triggered when visible networks are received.
    *
-   * @param {Array} states A list of network state information for each
-   *     visible network.
+   * @param {!Array<!Object>} states A list of network state information for
+   *     each visible network.
    */
   var onVisibleNetworksReceived = function(states) {
+    /** @type {CrOnc.NetworkConfigType} */ var defaultState;
+    if (states.length > 0)
+        defaultState = /** @type {!CrOnc.NetworkConfigType} */ (states[0]);

[Dan Beam, 2015/02/20 01:02:42]

wrong indent

[stevenjb, 2015/02/20 02:22:47]

Done.

+    var icon = /** @type {CrNetworkIconElement} */ ($('default-network-icon'));
+    if (defaultState && defaultState.Type != 'VPN') {
+      $('default-network-text').textContent =
+          loadTimeData.getStringF('defaultNetworkText',
+                                  defaultState.Name,
+                                  defaultState.ConnectionState);
+      icon.networkState = createNetworkState(defaultState);
+    } else {
+      $('default-network-text').textContent =
+          loadTimeData.getString('noNetworkText');
+      // Show the disconnected wifi icon if there are no networks.
+      icon.networkType = 'WiFi';
+    }
+
     createStateTable('network-state-table', NETWORK_STATE_FIELDS, states);
   };
 
   /**
    * This callback function is triggered when favorite networks are received.
    *
-   * @param {!Array} states A list of network state information for each
-   *     favorite network.
+   * @param {!Array<!Object>} states A list of network state information for
+   *     each favorite network.
    */
   var onFavoriteNetworksReceived = function(states) {
     createStateTable('favorite-state-table', FAVORITE_STATE_FIELDS, states);
@@ -171,7 +242,7 @@ var NetworkUI = (function() {
    */
   var toggleExpandRow = function(btn, guid) {
     var cell = btn.parentNode;
-    var row = /** @type {!HTMLElement} */ (cell.parentNode);
+    var row = /** @type {!HTMLTableRowElement} */ (cell.parentNode);
     if (btn.textContent == '-') {
       btn.textContent = '+';
       row.parentNode.removeChild(row.nextSibling);
@@ -186,18 +257,17 @@ var NetworkUI = (function() {
    * Creates the expanded row for displaying the complete state as JSON.
    *
    * @param {string} guid The GUID identifying the network.
-   * @param {!HTMLElement} baseRow The unexpanded row associated with the new
-   *     row.
-   * @return {!HTMLElement} The created tr element for the expanded row.
+   * @param {!HTMLTableRowElement} baseRow The unexpanded row associated with
+   *     the new row.
+   * @return {!HTMLTableRowElement} The created tr element for the expanded row.
    */
   var createExpandedRow = function(guid, baseRow) {
-    var expandedRow = /** @type {!HTMLElement} */ (
-      document.createElement('tr'));
+    var expandedRow = createTableRowElement();
     expandedRow.className = 'state-table-row';
-    var emptyCell = document.createElement('td');
+    var emptyCell = createTableCellElement();
     emptyCell.style.border = 'none';
     expandedRow.appendChild(emptyCell);
-    var detailCell = document.createElement('td');
+    var detailCell = createTableCellElement();
     detailCell.id = guid;
     detailCell.className = 'state-table-expanded-cell';
     detailCell.colSpan = baseRow.childNodes.length - 1;