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

ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js

Index: ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
index 4f6c4d5f8b75a5c7192154375e95e07c0797fed7..3821d475dea2c7dafdd3fba587d34ed40e343290 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
+++ b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
@@ -10,10 +10,8 @@
 (function() {
 /**
  * @typedef {{
+ *   showBadges: boolean,
  *   showDisconnected: boolean,
- *   iconType: string,
- *   connected: boolean,
- *   secure: boolean,
  *   strength: number
  * }}
  */
@@ -51,6 +49,18 @@ function getIconTypeFromNetworkType(networkType) {
  * @element cr-network-icon
  */
 Polymer('cr-network-icon', {
+  // The icon type to use for the base image of the icon.

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

Need real jsDocs on these.

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

Doh. Done... I think I just need @type for these?

+  iconType: 'ethernet',
+
+  // Set to true to show a badge for roaming networks.
+  roaming: false,
+
+  // Set to true to show a badge for secure networks.
+  secure: false,
+
+  // Set to the name of a technology to show show a badge.
+  technology: '',
+
   publish: {
     /**
      * If set, the ONC data properties will be used to display the icon.
@@ -85,9 +95,7 @@ Polymer('cr-network-icon', {
   /** @override */
   attached: function() {
     var params = /** @type {IconParams} */ {
-      connected: false,
-      iconType: 'ethernet',
-      secure: false,
+      showBadges: false,
       showDisconnected: true,
       strength: 0,
     };
@@ -99,12 +107,9 @@ Polymer('cr-network-icon', {
    * network state.
    */
   networkStateChanged: function() {
-    var iconType = getIconTypeFromNetworkType(this.networkState.data.Type);
+    this.iconType = getIconTypeFromNetworkType(this.networkState.data.Type);
     var params = /** @type {IconParams} */ {
-      connected: this.networkState.data.ConnectionState == 'Connected',
-      iconType: iconType,
-      secure: iconType == 'wifi' &&
-          this.networkState.getWiFiSecurity() != 'None',
+      showBadges: true,
       showDisconnected: !this.isListItem,
       strength: this.networkState.getStrength(),
     };
@@ -116,10 +121,9 @@ Polymer('cr-network-icon', {
    * of network, showing a disconnected icon where appropriate and no badges.
    */
   networkTypeChanged: function() {
+    this.iconType = getIconTypeFromNetworkType(this.networkType);
     var params = /** @type {IconParams} */ {
-      connected: false,
-      iconType: getIconTypeFromNetworkType(this.networkType),
-      secure: false,
+      showBadges: false,
       showDisconnected: true,
       strength: 0,
     };
@@ -127,32 +131,125 @@ Polymer('cr-network-icon', {
   },
 
   /**
+   * Returns the url for an image based on identifier |id|.
+   * @param {string} src The identifier describing the image.
+   * @return {string} The url to use for the image 'src' property.
+   */
+  toImageSrc: function(id) {
+    return id ? RESOURCE_IMAGE_BASE + id + RESOURCE_IMAGE_EXT : '';
+  },
+
+  /**
+   * Returns the url for a badge image based on identifier |id|.
+   * @param {string} id The identifier describing the badge.
+   * @return {string} The url to use for the badge image 'src' property.
+   */
+  toBadgeImageSrc: function(id) {
+    return id ? this.toImageSrc('badge_' + id) : '';
+  },
+
+  /**
    * Sets the icon and badge based on the current state and |strength|.
    * @param {!IconParams} params The set of params describing the icon.
    * @private
    */
   setIcon_: function(params) {
     var icon = this.$.icon;
-    if (params.iconType)
-      icon.src = RESOURCE_IMAGE_BASE + params.iconType + RESOURCE_IMAGE_EXT;
-
-    var multiLevel, strength;
-    if (params.iconType == 'wifi' || params.iconType == 'mobile') {
-      multiLevel = true;
-      strength = (params.showDisconnected && !params.connected) ?
-          -1 : params.strength;
+
+    var multiLevel = (this.iconType == 'wifi' || this.iconType == 'mobile');
+
+    if (this.networkState && multiLevel) {
+      this.setMultiLevelIcon_(params);
     } else {
-      multiLevel = false;
-      strength = -1;
+      icon.className = multiLevel ? 'multi-level level0' : '';
+    }
+
+    this.setIconBadges_(params);
+  },
+
+  /**
+   * Sets the icon strength and connecting properties. |this.networkState| is
+   * expected to be specified.
+   * @param {!IconParams} params The set of params describing the icon.
+   * @private
+   */
+  setMultiLevelIcon_: function(params) {
+    // Set the strength or connecting properties.
+    var networkState = this.networkState;
+
+    var connecting = false;
+    var strength = -1;
+    if (networkState.connecting()) {
+      strength = 0;
+      connecting = true;
+    } else if (networkState.connected() || !params.showDisconnected) {
+      strength = params.strength;
     }
-    icon.classList.toggle('multi-level', multiLevel);
+
+    var icon = this.$.icon;
+    icon.classList.toggle('multi-level', true);
+    icon.classList.toggle('connecting', connecting);
     icon.classList.toggle('level0', strength < 0);
     icon.classList.toggle('level1', strength >= 0 && strength <= 25);
     icon.classList.toggle('level2', strength > 25 && strength <= 50);
     icon.classList.toggle('level3', strength > 50 && strength <= 75);
     icon.classList.toggle('level4', strength > 75);
+  },
+
+  /**
+   * Sets the icon badge visibility.
+   * @param {!IconParams} params The set of params describing the icon.
+   * @private
+   */
+  setIconBadges_: function(params) {
+    var networkState = this.networkState;
+
+    var technology = '';
+    var roaming = false;
+    var secure = false;
+
+    var type =
+        (params.showBadges && networkState) ? networkState.data.Type : '';
+    if (type == CrOnc.Type.WIFI) {
+      secure = networkState.getWiFiSecurity() != 'None';
+    } else if (type == CrOnc.Type.WIMAX) {
+      technology = '4g';
+    } else if (type == CrOnc.Type.CELLULAR) {
+      var oncTechnology = networkState.getCellularTechnology();
+      switch (oncTechnology) {
+        case CrOnc.NetworkTechnology.EDGE:
+          technology = 'edge';
+          break;
+        case CrOnc.NetworkTechnology.EVDO:
+          technology = 'evdo';
+          break;
+        case CrOnc.NetworkTechnology.GPRS:
+        case CrOnc.NetworkTechnology.GSM:
+          technology = 'gsm';
+          break;
+        case CrOnc.NetworkTechnology.HSPA:
+          technology = 'hspa';
+          break;
+        case CrOnc.NetworkTechnology.HSPA_PLUS:
+          technology = 'hspa_plus';
+          break;
+        case CrOnc.NetworkTechnology.LTE:
+          technology = 'lte';
+          break;
+        case CrOnc.NetworkTechnology.LTE_ADVANCED:
+          technology = 'lte_advanced';
+          break;
+        case CrOnc.NetworkTechnology.UMTS:
+          technology = '3g';
+          break;
+      }
+      roaming =
+          networkState.getCellularRoamingState() == CrOnc.RoamingState.ROAMING;
+    }
 
-    this.$.secure.hidden = !params.secure;
+    this.technology = technology;

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

nit: Why not just set these inline instead of using the temporary vars?

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

I didn't want to toggle properties back and forth (since each will fire a change
event), but I think it is cleaner to specify all three properties in each if
clause anyway so did that instead.

+    this.roaming = roaming;
+    this.secure = secure;
   },
 });
 })();