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 17 matching lines @@
   var FAVORITE_STATE_FIELDS = [
     'GUID',
     'service_path',
     'Name',
     'Type',
     'profile_path',
     'visible',
     'onc_source'
   ];
 
+  var CreateNetworkState = function(networkState) {
+    var oncData =
+        /** @type {cr-onc-data} */ document.createElement('cr-onc-data');

[James Hawkins, 2015/02/06 21:37:37]

/** @type {..} */ (...);

Missing parens.

[Jeremy Klein, 2015/02/09 18:16:30]

This should be either a CrOncDataElement or just HTMLElement. The problem,
however, is that there is no extern generation in Chrome for CrOncDataElement.
This presents a bit of a problem in compiling this file and all future files
with our Polymer elements. Once my compiler pass is done, it won't be a problem,
but what we do until then is up in the air. I see a few options:

1) Don't compile any of this stuff yet and just write it as a CrOncDataElement
type.
2) Access all of the properties of oncData with brackets for the time-being.
3) Declare or generate our own externs for our elements (could be a bit
tedious).
4) Write our polymer elements in a compilable (but ugly) format and then switch
it all over once the compile pass is ready.

Honestly, I don't love any of these options, but I'm sort of leaning for option
3. I don't have strong feelings here though so I'd like to know everyone's
opinion.

[stevenjb, 2015/02/10 00:22:04]

I don't really understand (3), and I'm not sure where CrOncDataElement would
come from; I'd rather not type it as something that doesn't currently exist.

Is (1) using Element a reasonable short term option? i.e. just type this as
Element for now?

[Jeremy Klein, 2015/02/10 00:31:09]

That's fine, but keep in mind that all properties and functions that you
reference on oncData which are not on the Element type will break the compile
and need to be updated once we use the proper type and compile. It makes me
nervous to go down this route because it will require a lot of manual updating
here when we start to compile.

[stevenjb, 2015/02/10 03:21:14]

If we have a solution I am happy to implement it, it is just not clear to me
what that is :)

+    oncData.data = networkState;
+    return oncData;
+  };
+
   /**
    * Returns the property associated with a key (which may reference a
    * sub-object).
    *
    * @param {Object} properties The object containing the network 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 dot = key.indexOf('.');
     if (dot > 0) {
       var key1 = key.substring(0, dot);
       var key2 = key.substring(dot + 1);
       var subobject = properties[key1];
       if (subobject)
         return getValueFromProperties(subobject, key2);
     }
     return properties[key];
   };
 
   /**
    * Creates a cell with a button for expanding a network state table row.
    *
    * @param {string} guid The GUID identifying the network.
-   * @return {DOMElement} The created td element that displays the given value.
+   * @return {HTMLElement} The created td element that displays the given value.
    */
   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, 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 {Object} state Property values for the network.

[James Hawkins, 2015/02/06 21:37:36]

Can we provide a well-named typedef for state instead of just an untyped record
object?

[stevenjb, 2015/02/10 00:22:04]

After discussing this offline, I think we can cast the results from the
networkingPrivate callbacks and correctly type everything from that point on, so
yes.

+   * @return {HTMLElement} The created td element that displays the icon.
+   */
+  var createStateTableIcon = function(state) {
+    var cell = document.createElement('td');
+    cell.className = 'state-table-icon-cell';
+    var icon = document.createElement('cr-network-icon');
+    icon.isListItem = true;
+    icon.networkState = CreateNetworkState(state);
+    cell.appendChild(icon);
+    return cell;
+  };
+
+  /**
    * Creates a cell in network state table.
    *
    * @param {string} value Content in the cell.
-   * @return {DOMElement} The created td element that displays the given value.
+   * @return {HTMLElement} The created td element that displays the given value.
    */
   var createStateTableCell = function(value) {
     var cell = document.createElement('td');
     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 {DOMElement} The created tr element that contains the network
+   * @return {HTMLElement} The created tr element that contains the network
    *     state information.
    */
   var createStateTableRow = function(stateFields, state) {
     var row = document.createElement('tr');
     row.className = 'state-table-row';
     var guid = state.GUID;
     row.appendChild(createStateTableExpandButton(guid));
+    row.appendChild(createStateTableIcon(state));
     for (var i = 0; i < stateFields.length; ++i) {
       var field = stateFields[i];
       var value = '';
       if (typeof field == 'string') {
         value = getValueFromProperties(state, field);
       } else {
         for (var j = 0; j < field.length; ++j) {
           value = getValueFromProperties(state, field[j]);
           if (value)
             break;
@@ skipping 23 matching lines @@
     });
   };
 
   /**
    * This callback function is triggered when visible networks are received.
    *
    * @param {Array} data A list of network state information for each
    *     visible network.
    */
   var onVisibleNetworksReceived = function(states) {
+    var defaultState;
+    if (states.length > 0)
+        defaultState = 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);
   };
 
   /**
    * This callback function is triggered when favorite networks are received.
    *
    * @param {Object} data 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 {DOMElement} btn The button that was clicked.
+   * @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 = 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 {Object} 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.
+   * @param {HTMLElement} baseRow The unexpanded row above the new row.
+   * @return {HTMLElement} The created tr element for the expanded row.
    */
   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.id = guid;
     detailCell.className = 'state-table-expanded-cell';
@@ skipping 71 matching lines @@
   document.addEventListener('DOMContentLoaded', function() {
     $('refresh').onclick = requestNetworks;
     setRefresh();
     requestNetworks();
   });
 
   return {
     getShillPropertiesResult: getShillPropertiesResult
   };
 })();