WebUI: Animate connecting network svg icons

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

Index: ui/webui/resources/cr_elements/network/cr_network_icon.js
diff --git a/ui/webui/resources/cr_elements/network/cr_network_icon.js b/ui/webui/resources/cr_elements/network/cr_network_icon.js
index 4ab986e2ac236bd3690a4e446a72fe0ec22b024b..e4a90c0a7edc4155cbbb90b00099a0f452aef5dd 100644
--- a/ui/webui/resources/cr_elements/network/cr_network_icon.js
+++ b/ui/webui/resources/cr_elements/network/cr_network_icon.js
@@ -28,6 +28,24 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /**
+     * Animation frame, updated while the icon is in a connecting state.
+     * Exposed to the DOM to trigger getIcon_ calls when it changes.
+     * @private
+     */
+    animationFrame_: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  /** @private {?number} */
+  animationId_: null,
+
+  /** @override */
+  detached: function() {
+    this.resetAnimation_();
   },
 
   /**
@@ -35,37 +53,36 @@ Polymer({
    * @private
    */
   getIcon_: function() {
-    if (!this.networkState)
+    var networkState = this.networkState;
+    if (!networkState)
       return '';
-    let showDisconnected =
-        !this.isListItem && (!this.networkState.ConnectionState ||
-                             this.networkState.ConnectionState ==
-                                 CrOnc.ConnectionState.NOT_CONNECTED);
-
-    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 type = networkState.Type;
+    if (type == CrOnc.Type.ETHERNET)
+      return 'network:settings-ethernet';
+    if (type == CrOnc.Type.VPN)
+      return 'network:vpn-key';
+
+    var connectionState = networkState.ConnectionState;
+    var showDisconnected = !this.isListItem &&
+        (!connectionState ||
+         connectionState == CrOnc.ConnectionState.NOT_CONNECTED);
+    var index = 0;
+    if (connectionState == CrOnc.ConnectionState.CONNECTING) {
+      index = this.getAnimationIndex_();
+    } else {
+      this.resetAnimation_();
+      if (!showDisconnected)
+        index = this.strengthToIndex_(CrOnc.getSignalStrength(networkState));
     }
+
+    if (type == CrOnc.Type.CELLULAR) {
+      return 'network:signal-cellular-' + index.toString(10) + '-bar';
+    } else if (type == CrOnc.Type.WI_FI || type == CrOnc.Type.WI_MAX) {
+      if (showDisconnected)
+        return 'network:signal-wifi-off';
+      return 'network:signal-wifi-' + index.toString(10) + '-bar';
+    }
+    assertNotReached();
     return '';
   },
 
@@ -81,6 +98,35 @@ Polymer({
   },
 
   /**
+   * Returns an index from 0-4 for animating a connecting wireless icon.
+   * The index will cycle from 0 -> 4 then from 4 -> 0.
+   * @return {number}
+   * @private
+   */
+  getAnimationIndex_() {
+    if (this.animationId_ == null) {
+      /** const */ var INTERVAL_MS = 750 / 4;  // Matches network_icon.cc.
+      this.animationFrame_ = 0;
+      this.animationId_ = window.setInterval(function() {
+        this.animationFrame_ =
+            (this.animationFrame_ >= 9) ? 0 : this.animationFrame_ + 1;
+      }.bind(this), INTERVAL_MS);
+    }
+    if (this.animationFrame_ > 4)
+      return 9 - this.animationFrame_;
+    return this.animationFrame_;
+  },
+
+  /** @private */
+  resetAnimation_() {
+    this.animationFrame_ = 0;
+    if (this.animationId_ != null) {
+      window.clearInterval(this.animationId_);
+      this.animationId_ = null;
+    }
+  },
+
+  /**
    * @return {boolean}
    * @private
    */