Added support for animated/nonanimated user image.

chrome/browser/resources/chromeos/login/user_pod_row.js

 // Copyright (c) 2012 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 User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 88 matching lines @@
         // in sign-in UI being shown.
         e.stopPropagation();
       });
       this.removeUserButtonElement.addEventListener('click',
           this.handleRemoveButtonClick_.bind(this));
       this.removeUserButtonElement.addEventListener('mouseout',
           this.handleRemoveButtonMouseOutOrBlur_.bind(this));
       // TODO(altimofeev): this will trigger when Gaia extension grabs focus.
       this.removeUserButtonElement.addEventListener('blur',
           this.handleRemoveButtonMouseOutOrBlur_.bind(this));
+
+      // |plainUserImage| and |animatedUserImage| are images for
+      // |non-animated and animated versions of user image. Used for
+      // |fast swapping between them (for instance, when user pod

[Ivan Korotkov, 2012/05/29 10:50:23]

Stray |

[Ivan Korotkov, 2012/05/29 10:50:23]

/swapping/switching/

[ygorshenin1, 2012/05/30 12:17:34]

Done.

+      // becomes active).
+      this.plainUserImage = new Image();
+      this.animatedUserImage = new Image();
+      // That flag is true, when we show animated (when possible)
+      // version of user image, and false otherwise.
+      this.userImageIsAnimated = false;
     },
 
     /**
      * Initializes the pod after its properties set and added to a pod row.
      */
     initialize: function() {
       // TODO(flackr): Get rid of multiple blur listeners. We should be able to
       // use a single focusout listener on the pod or entire row but this is not
       // being sent for some reason when you open the status area menus despite
       // blur being sent.
@@ skipping 15 matching lines @@
       this.imageElement.addEventListener('load',
           this.parentNode.handlePodImageLoad.bind(this.parentNode, this));
     },
 
     /**
      * Resets tab order for pod elements to its initial state.
      */
     resetTabOrder: function() {
       this.tabIndex = UserPodTabOrder.POD_INPUT;
       this.mainInput.tabIndex = -1;
+
+      if (!this.isGuest) {
+        this.userImageIsAnimated = false;
+        this.updateUserImage_();
+      }
     },
 
     /**
      * Handles keyup event on password input.
      * @param {Event} e Keyup Event object.
      * @private
      */
     handlePasswordKeyUp_: function(e) {
       this.passwordEmpty = !e.target.value;
     },
@@ skipping 185 matching lines @@
 
     /**
      * Whether the password field is empty.
      * @type {boolean}
      */
     set passwordEmpty(empty) {
       this.passwordElement.classList[empty ? 'add' : 'remove']('empty');
     },
 
     /**
+     * Changes user image to animated or non-animated image from
+     * internal buffers.
+     */
+    updateUserImage_: function() {
+      if (!this.isGuest) {

[Ivan Korotkov, 2012/05/29 10:50:23]

Let's remove this function and move the code to "set userImageIsAnimated"
instead.

[ygorshenin1, 2012/05/30 12:17:34]

In discussion for crbug.com/114083 it was decided to show only animated version
when it possible. So, all that code with image switching is useless now.

On 2012/05/29 10:50:23, Ivan Korotkov wrote:

+        this.imageElement.src = this.userImageIsAnimated ?
+          this.animatedUserImage.src : this.plainUserImage.src;
+      }
+    },
+
+    /**
      * Updates the image element of the user.
      */
     updateUserImage: function() {
-      this.imageElement.src = this.isGuest ?
-          'chrome://theme/IDR_LOGIN_GUEST' :
-          'chrome://userimage/' + this.user.username +
-              '?id=' + (new Date()).getTime();
+      if (this.isGuest) {
+        this.imageElement.src = 'chrome://theme/IDR_LOGIN_GUEST';
+      } else {
+        var src = 'chrome://userimage/' + this.user.username +
+          '?id=' + (new Date()).getTime();
+        this.plainUserImage.src = src;
+
+        src += '&animated=true';
+        this.animatedUserImage.src = src;
+
+        this.updateUserImage_();
+      }
     },
 
     /**
      * Focuses on input element.
      */
     focusInput: function() {
       if (!this.isGuest) {
         var needSignin = this.needGaiaSignin;
         this.signinButtonElement.hidden = !needSignin;
         this.passwordElement.hidden = needSignin;
+
+        if (!this.userImageIsAnimated) {
+          this.userImageIsAnimated = true;
+          this.updateUserImage_();
+        }
       }
       // Move tabIndex from the whole pod to the main input.
       this.tabIndex = -1;
       this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
       this.mainInput.focus();
     },
 
     /**
      * Activates the pod.
      * @return {boolean} True if activated successfully.
@@ skipping 491 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         chrome.send('userImagesLoaded');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });