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 8d86f54d9a8c515674c8786a35fbd128fbe2e6d1..f54e45458d67825c18739af2c7432025dff75253 100644
--- a/chrome/browser/resources/chromeos/network_ui/network_ui.js
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.js
@@ -55,6 +55,22 @@ var NetworkUI = (function() {
   };
 
   /**
+   * 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.
@@ -79,6 +95,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 = '';
@@ -122,6 +139,22 @@ var NetworkUI = (function() {
    *     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);
   };