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).
+   * 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} 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'));

[Jeremy Klein, 2015/02/13 19:56:41]

nit: !CrOncDataElement

[stevenjb, 2015/02/13 21:12:58]

Done.

+    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.
+   */
+  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 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);
     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} */ (

[Jeremy Klein, 2015/02/13 19:56:40]

!CrNetworkIconElement

[stevenjb, 2015/02/13 21:12:58]

Done.

+        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.
-   * @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)
             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;
   };
 
   /**
    * 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)));
     });
   };
 
   /**
    * 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

[Jeremy Klein, 2015/02/13 19:56:41]

Is this !Array<!CrOnc.NetworkConfigType>?

[stevenjb, 2015/02/13 21:12:58]

Not currently. This is a callback from a networkingPrivate method that returns
an array of objects which we will then cast as NetworkConfigType. They may
actually contain additional elements. The distinction is kind of subtle, and at
some point we may want to define these types in networkingPrivate, but I think
this is a reasonable intermediate step.

Changed both of these to !Array<!Object>.

+   *     each visible network.
    */
   var onVisibleNetworksReceived = function(states) {
+    /** @type {CrOnc.NetworkConfigType} */ var defaultState;
+    if (states.length > 0)
+        defaultState = /** @type {CrOnc.NetworkConfigType} */ (states[0]);
+    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

[Jeremy Klein, 2015/02/13 19:56:41]

nit: no '.' needed. Should this just be !Array<!CrOnc.NetworkConfigType>?

[stevenjb, 2015/02/13 21:12:58]

Acknowledged.

+   *     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
   };
 })();