Support badges and connecting animation in cr-network-icon element

ui/webui/resources/cr_elements/cr_onc/cr_onc_data.js

Index: ui/webui/resources/cr_elements/cr_onc/cr_onc_data.js
diff --git a/ui/webui/resources/cr_elements/cr_onc/cr_onc_data.js b/ui/webui/resources/cr_elements/cr_onc/cr_onc_data.js
index 4bca1d248b62abf898e2c237b8b1237cd4a04c36..01b0f550536ff01d672ee0c8411f78fe364cf9b2 100644
--- a/ui/webui/resources/cr_elements/cr_onc/cr_onc_data.js
+++ b/ui/webui/resources/cr_elements/cr_onc/cr_onc_data.js
@@ -22,13 +22,22 @@ Polymer('cr-onc-data', {
     data: null,
   },
 
+  /** @override */
   created: function() {
     this.data = /** @type {CrOnc.NetworkConfigType} */({});
   },
 
-  /**
-   * @return {number} The signal strength of the network.
-   */
+  /** @return {boolean} True if the network is connected. */
+  connected: function() {

[Jeremy Klein, 2015/03/03 00:41:08]

Another totally optional alternative polymer tip:

You can make this and connecting computed properties:

https://www.polymer-project.org/docs/polymer/polymer.html#computed-properties

so that you could bind directly to them in clients if you want.

[stevenjb, 2015/03/03 01:07:08]

Interesting thought. When looking at Expressions for cr-network-icon, I decided
I wasn't a huge fan of the computed {} section in Polymer, since it is embedding
logic in a string. Using Expressions in HTML makes sense to me, but here I think
I prefer straight JS. We'll see, maybe I will warm up to the idea.

[Jeremy Klein, 2015/03/03 01:26:20]

I see what you mean about the string, but computed properties are entirely in
JS, not in the HTML. So this would look like:

computed: {
  connected: 'data.ConnectionState == Cr.Onc.ConnectionState.CONNECTED',
  connecting: 'data.ConnectionState == Cr.Onc.ConnectionState.CONNECTING',
}

and then you'd include these properties in the publish block if you want and you
could bind to them in clients:

<cr-network-icon class="{{ {connecting: data.connected, connected:
data.connecting} | tokenList}}"></cr-network-icon>

Just a thought. Not super important.

+    return this.data.ConnectionState == CrOnc.ConnectionState.CONNECTED;
+  },
+
+  /** @return {boolean} True if the network is connecting. */
+  connecting: function() {
+    return this.data.ConnectionState == CrOnc.ConnectionState.CONNECTING;
+  },
+
+  /** @return {number} The signal strength of the network. */
   getStrength: function() {
     var type = this.data.Type;
     var strength = 0;
@@ -41,12 +50,21 @@ Polymer('cr-onc-data', {
     return strength;
   },
 
-  /**
-   * Returns the WiFi security type. Undefined or empty defaults to 'None'.
-   * @return {string} The WiFi security type.
-   */
+  /** @return {CrOnc.Security} The ONC security type. */
   getWiFiSecurity: function() {
     return (this.data.WiFi && this.data.WiFi.Security) ?
-        this.data.WiFi.Security : 'None';
+        this.data.WiFi.Security : CrOnc.Security.NONE;
+  },
+
+  /** @return {CrOnc.RoamingState} The ONC roaming state. */
+  getCellularRoamingState: function() {
+    return (this.data.Cellular && this.data.Cellular.RoamingState) ?
+        this.data.Cellular.RoamingState : CrOnc.RoamingState.UNKNOWN;
+  },
+
+  /** @return {CrOnc.NetworkTechnology} The ONC network technology. */
+  getCellularTechnology: function() {
+    return (this.data.Cellular && this.data.Cellular.NetworkTechnology) ?
+        this.data.Cellular.NetworkTechnology : CrOnc.NetworkTechnology.UNKNOWN;
   }
 });