cr-network-icon: Animate connecting using .svg

ui/webui/resources/cr_elements/network/cr_network_icon.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 Polymer element for rendering network icons based on ONC
  * state properties.
  */
 
 Polymer({
@@ skipping 16 matching lines @@
     isListItem: {
       type: Boolean,
       value: false,
     },
   },
 
   /**
    * @return {string} The name of the svg icon image to show.
    * @private
    */
-  getIcon_: function() {
+  getIconClass_: function() {
     if (!this.networkState)
       return '';
-    let showDisconnected =
-        !this.isListItem && (!this.networkState.ConnectionState ||
-                             this.networkState.ConnectionState ==
-                                 CrOnc.ConnectionState.NOT_CONNECTED);
+    var type = this.networkState.Type;
+    if (type == CrOnc.Type.ETHERNET)
+      return 'ethernet';
+    if (type == CrOnc.Type.VPN)
+      return 'vpn';
 
-    switch (this.networkState.Type) {
-      case CrOnc.Type.ETHERNET: {
-        return 'network:settings-ethernet';
-      }
-      case CrOnc.Type.VPN: {
-        return 'network:vpn-key';
-      }
-      case CrOnc.Type.CELLULAR: {
-        let strength =
-            showDisconnected ? 0 : CrOnc.getSignalStrength(this.networkState);
-        let index = this.strengthToIndex_(strength);
-        return 'network:signal-cellular-' + index.toString(10) + '-bar';
-      }
-      case CrOnc.Type.WI_FI:
-      case CrOnc.Type.WI_MAX: {
-        if (showDisconnected)
-          return 'network:signal-wifi-off';
-        let strength = CrOnc.getSignalStrength(this.networkState);
-        let index = this.strengthToIndex_(strength);
-        return 'network:signal-wifi-' + index.toString(10) + '-bar';
-      }
-      default:
-        assertNotReached();
+    var prefix = type == CrOnc.Type.CELLULAR ? 'cellular-' : 'wifi-';
+    var connectionState = this.networkState.ConnectionState;
+    if (connectionState == CrOnc.ConnectionState.CONNECTING)
+      return prefix + 'connecting';
+    var strength;
+    if (!this.isListItem &&
+        (!connectionState ||
+         connectionState == CrOnc.ConnectionState.NOT_CONNECTED)) {
+      if (type != CrOnc.Type.CELLULAR)
+        return prefix + 'off';
+      strength = 0;
+    } else {
+      strength = CrOnc.getSignalStrength(this.networkState);
     }
-    return '';
+    return prefix + this.strengthToIndex_(strength).toString(10);
   },
 
   /**
    * @param {number} strength The signal strength from [0 - 100].
    * @return {number} An index from 0-4 corresponding to |strength|.
    * @private
    */
   strengthToIndex_: function(strength) {
     if (strength == 0)
       return 0;
@@ skipping 66 matching lines @@
     let networkState = this.networkState;
     if (!this.networkState)
       return false;
     if (networkState.Type == CrOnc.Type.WI_FI && networkState.WiFi) {
       let security = networkState.WiFi.Security;
       return !!security && security != 'None';
     }
     return false;
   },
 });