WebUI: Animate connecting network svg icons

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 10 matching lines @@
 
     /**
      * If true, the icon is part of a list of networks and may be displayed
      * differently, e.g. the disconnected image will never be shown for
      * list items.
      */
     isListItem: {
       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_();
   },
 
   /**
    * @return {string} The name of the svg icon image to show.
    * @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);
+    var type = networkState.Type;
+    if (type == CrOnc.Type.ETHERNET)
+      return 'network:settings-ethernet';
+    if (type == CrOnc.Type.VPN)
+      return 'network:vpn-key';
 
-    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 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 '';
   },
 
   /**
    * @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;
     return Math.min(Math.trunc((strength - 1) / 25) + 1, 4);
   },
 
   /**
+   * 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
    */
   showTechnology_: function() {
     return this.getTechnology_() != '';
   },
 
   /**
    * @return {string}
    * @private
@@ skipping 52 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;
   },
 });