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 37 matching lines @@
     button.addEventListener('click', function(event) {
       toggleExpandRow(event.target, guid);
     });
     button.className = 'state-table-expand-button';
     button.textContent = '+';
     cell.appendChild(button);
     return cell;
   };
 
   /**
+   * Create a cell with an icon representing the network state.
+   *
+   * @param {Object} state Property values for the network.
+   * @return {DOMElement} The created td element that displays the icon.

[michaelpg, 2015/02/05 06:45:51]

This should be HTMLElement, right? But the rest of the page uses DOMElement so,
meh.

[Jeremy Klein, 2015/02/05 18:45:56]

Nice catch, Michael. Is DOMElement a real type? I've never seen that before.
Michael, I think you're right about these really being HTMLElements or Elements.

document.createElement('div') instanceof HTMLElement;

and

document.createElement('div') instanceof Element;

return true, but

document.createElement('div') instanceof DOMElement;

Throws "Uncaught ReferenceError: DOMElement is not defined". I'm pretty
surprised the compiler has let us do this here. dbeam@, do you know anything
about this from the compiler's side?

See
https://github.com/google/closure-compiler/blob/5746469cebffcaa1c284ae1806ee0...

[Dan Beam, 2015/02/05 18:54:14]

nothing here is compiled.  DOMElement is a ruse.

[stevenjb, 2015/02/05 22:41:32]

No idea where DOMElement came from, I suspect it was copied from somewhere, but
there aren't a lot of instances in the code, so I replaced them all here with
HTMLElement.

+   */
+  var createStateTableIcon = function(state) {
+    var cell = document.createElement('td');
+    cell.className = 'state-table-icon-cell';
+    var icon = document.createElement('cr-network-icon');
+    icon.$.listItem = true;

[michaelpg, 2015/02/05 06:45:51]

See my other comment, shouldn't this just be "icon.listItem"?

[stevenjb, 2015/02/05 22:41:33]

I'm not sure where I got the notion of using .$. for published parameters.
Changed.

+    icon.setNetworkState(state);
+    cell.appendChild(icon);
+    return cell;
+  };
+
+  /**
    * Create a cell in network state table.
    *
    * @param {string} value Content in the cell.
    * @return {DOMElement} The created td element that displays the given value.
    */
   var createStateTableCell = function(value) {
     var cell = document.createElement('td');
     cell.textContent = value || '';
     return cell;
   };
 
   /**
    * Create 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
    *     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 = networkConfig.getValueFromProperties(state, field);
       } else {
         for (var j = 0; j < field.length; ++j) {
           value = networkConfig.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)

[michaelpg, 2015/02/05 06:45:51]

just "var defaultState = states[0]". if statement isn't necessary:
* defaultState === undefined
* states[0] === undefined if states.length === 0

[stevenjb, 2015/02/05 22:41:33]

Discussed offline, both are fine, but the intent of this is arguably more clear,
so will stick with it as-is.

+        defaultState = states[0];
+    if (defaultState && defaultState['Type'] != 'VPN') {
+      $('default-network-text').textContent =
+          loadTimeData.getStringF('defaultNetworkText',
+                                  defaultState['Name'],
+                                  defaultState['ConnectionState']);
+      $('default-network-icon').setNetworkState(defaultState);
+    } else {
+      $('default-network-text').textContent =
+          loadTimeData.getString('noNetworkText');
+      // Show the disconnected wifi icon if there are no networks.
+      $('default-network-icon').setNetworkType('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) {
@@ skipping 79 matching lines @@
    * Get network information from WebUI.
    */
   document.addEventListener('DOMContentLoaded', function() {
     $('refresh').onclick = requestNetworks;
     setRefresh();
     requestNetworks();
   });
 
   return {};
 })();