Add custom Polymer network icon element

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() {
   '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.
@@ skipping 18 matching lines @@
     'GUID',
     'service_path',
     'Name',
     'Type',
     'profile_path',
     'visible',
     'onc_source'
   ];
 
   /**
-   * 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) {
       toggleExpandRow(/** @type {!HTMLElement} */ (event.target), guid);
     });
     button.className = 'state-table-expand-button';
     button.textContent = '+';
     cell.appendChild(button);
     return cell;
   };
 
   /**
+   * 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;
   };
 
   /**
    * 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;
   };
 
   /**
    * Creates a table for networks or favorites.
    *
    * @param {string} tablename The name of the table to be created.
    * @param {Array} stateFields The list of fields for the table.
    * @param {Array} 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]);
     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);
   };
 
   /**
    * Toggles the button state and add or remove a row displaying the complete
    * state information for a row.
    *
    * @param {!HTMLElement} btn The button that was clicked.
    * @param {string} guid GUID identifying the network.
    */
   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);
     } else {
       btn.textContent = '-';
       var expandedRow = createExpandedRow(guid, row);
       row.parentNode.insertBefore(expandedRow, row.nextSibling);
     }
   };
 
   /**
    * 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;
     expandedRow.appendChild(detailCell);
     var showDetail = function(state, error) {
       if (error && error.message)
         detailCell.textContent = error.message;
       else
         detailCell.textContent = JSON.stringify(state, null, '\t');
     };
@@ skipping 63 matching lines @@
   document.addEventListener('DOMContentLoaded', function() {
     $('refresh').onclick = requestNetworks;
     setRefresh();
     requestNetworks();
   });
 
   return {
     getShillPropertiesResult: getShillPropertiesResult
   };
 })();