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..dc87b39dea8b5b6252b001e1eff16d1bda380b14 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,9 @@
 (function() {
 /**
  * @typedef {{
- *   showDisconnected: boolean,
  *   iconType: string,
- *   connected: boolean,
- *   secure: boolean,
+ *   showBadges: boolean,
+ *   showConnectionState: boolean,
  *   strength: number
  * }}
  */
@@ -85,10 +84,9 @@ Polymer('cr-network-icon', {
   /** @override */
   attached: function() {
     var params = /** @type {IconParams} */ {
-      connected: false,
       iconType: 'ethernet',
-      secure: false,
-      showDisconnected: true,
+      showBadges: false,
+      showConnectionState: false,
       strength: 0,
     };
     this.setIcon_(params);
@@ -101,11 +99,9 @@ Polymer('cr-network-icon', {
   networkStateChanged: function() {
     var 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',
-      showDisconnected: !this.isListItem,
+      showBadges: true,
+      showConnectionState: this.isListItem,
       strength: this.networkState.getStrength(),
     };
     this.setIcon_(params);
@@ -117,10 +113,9 @@ Polymer('cr-network-icon', {
    */
   networkTypeChanged: function() {
     var params = /** @type {IconParams} */ {
-      connected: false,
       iconType: getIconTypeFromNetworkType(this.networkType),
-      secure: false,
-      showDisconnected: true,
+      showBadges: false,
+      showConnectionState: false,
       strength: 0,
     };
     this.setIcon_(params);
@@ -133,26 +128,76 @@ Polymer('cr-network-icon', {
    */
   setIcon_: function(params) {
     var icon = this.$.icon;
+    var networkState = this.networkState;
     if (params.iconType)
       icon.src = RESOURCE_IMAGE_BASE + params.iconType + RESOURCE_IMAGE_EXT;
 
-    var multiLevel, strength;
-    if (params.iconType == 'wifi' || params.iconType == 'mobile') {
+    var multiLevel = false, connecting = false, strength = -1;

[James Hawkins, 2015/02/27 19:46:05]

Optional nit: I'd break this up, as it's easy to miss the names and types of the
two other variables.

[stevenjb, 2015/02/27 22:14:05]

Done.

+    if (networkState && params.showConnectionState &&
+        (params.iconType == 'wifi' || params.iconType == 'mobile')) {
       multiLevel = true;
-      strength = (params.showDisconnected && !params.connected) ?
-          -1 : params.strength;
-    } else {
-      multiLevel = false;
-      strength = -1;
+      if (networkState.connecting()) {
+        strength = 0;
+        connecting = true;
+      } else {
+        strength = params.strength;
+      }
     }
     icon.classList.toggle('multi-level', multiLevel);
+    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);
 
-    this.$.secure.hidden = !params.secure;
+    var technology = '', roaming = false, secure = false;

[James Hawkins, 2015/02/27 19:46:05]

Optional nit: Consider breaking up.

[stevenjb, 2015/02/27 22:14:05]

Done.

+    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.$.technology.hidden = !technology;

[michaelpg, 2015/02/27 20:38:41]

We probably should set ".hidden = false" in a 'load' event handler instead, so
we don't show a broken image.

[stevenjb, 2015/02/27 22:14:06]

Wouldn't that be an issue with all images?

[michaelpg, 2015/02/28 00:17:05]

No I'm just confused. This shows a *blank* image, not a broken image, while the
image is loading, which i think is fine.

+    if (technology) {
+      this.$.technology.src =
+        RESOURCE_IMAGE_BASE + 'badge_' + technology + RESOURCE_IMAGE_EXT;

[michaelpg, 2015/02/27 20:38:41]

4 spaces

[stevenjb, 2015/02/27 22:14:06]

Done.

+    }
+    this.$.roaming.hidden = !roaming;
+    this.$.secure.hidden = !secure;
   },
 });
 })();