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 54ef7f3489539e3daa104db4b28f87fc39f63910..86681fed9abab7a38db6a61ebc2038e548e80dbc 100644
--- a/chrome/browser/resources/chromeos/network_ui/network_ui.js
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.js
@@ -35,6 +35,13 @@ var NetworkUI = (function() {
     '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).
@@ -64,7 +71,7 @@ var NetworkUI = (function() {
    * 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');
@@ -80,10 +87,26 @@ var NetworkUI = (function() {
   };
 
   /**
+   * 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');
@@ -96,7 +119,7 @@ var NetworkUI = (function() {
    *
    * @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) {
@@ -104,6 +127,7 @@ var NetworkUI = (function() {
     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 = '';
@@ -147,6 +171,22 @@ var NetworkUI = (function() {
    *     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);
   };
 
@@ -164,7 +204,7 @@ var NetworkUI = (function() {
    * 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) {
@@ -184,8 +224,8 @@ var NetworkUI = (function() {
    * 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');