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

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

 // Copyright 2015 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.
 
 /**
  * @fileoverview ONC network configuration support class. Wraps a dictionary
  * object containing ONC managed or unmanaged dictionaries. Also provides
  * special accessors for ONC properties. See cr-onc-types for ONC types,
  * e.g. CrOnc.NetworkConfigType. Used by consumers of the
  * chrome.networkingPrivate API. See components/onc/docs/onc_spec.html.
  */
 Polymer('cr-onc-data', {
   publish: {
     /**
      * ONC configuration property dictionary, e.g. the result of a
      * chrome.networkingPrivate.getProperties() call.
      *
      * @attribute data
      * @type CrOnc.NetworkConfigType
      * @default null
      */
     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;
     if (type == 'WiFi')
       strength = this.data.WiFi ? this.data.WiFi.SignalStrength : 0;
     else if (type == 'Cellular')
       strength = this.data.Cellular ? this.data.Cellular.SignalStrength : 0;
     else if (type == 'WiMAX')
       strength = this.data.WiMAX ? this.data.WiMAX.SignalStrength : 0;
     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;
   }
 });