Asynchronously load wallpapers when user pod is selected.

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() {
-  // Pod width. 170px Pod + 10px padding + 10px margin on both sides.
-  const POD_WIDTH = 170 + 2 * (10 + 10);
+  /**
+   * Pod width. 170px Pod + 10px padding + 10px margin on both sides.
+   * @type {number}
+   * @const
+   */
+  var POD_WIDTH = 170 + 2 * (10 + 10);
+
+  /**
+   * Wallpaper load delay in milliseconds.
+   * @type {number}
+   * @const
+   */
+  var WALLPAPER_LOAD_DELAY_MS = 800;
 
   /**
    * Oauth token status. These must match UserManager::OAuthTokenStatus.
    * @enum {number}
+   * @const
    */
-  const OAuthTokenStatus = {
+  var OAuthTokenStatus = {
     UNKNOWN: 0,
     INVALID: 1,
     VALID: 2
   };
 
   /**
    * Tab order for user pods.  Update these when adding new controls.
    * @enum {number}
+   * @const
    */
-  const UserPodTabOrder = {
+  var UserPodTabOrder = {
     POD_INPUT: 1,    // Password input fields (and whole pods themselves).
     HEADER_BAR: 2,   // Buttons on the header bar (Shutdown, Add User).
     REMOVE_USER: 3   // Remove ('X') buttons.
   };
 
   // Focus and tab order are organized as follows:
   //
   // (1) all user pods have tab index 1 so they are traversed first;
   // (2) when a user pod is activated, its tab index is set to -1 and its
   //     main input field gets focus and tab index 1;
@@ skipping 34 matching lines @@
       // Mousedown has to be used instead of click to be able to prevent 'focus'
       // event later.
       this.addEventListener('mousedown',
           this.handleMouseDown_.bind(this));
 
       this.enterButtonElement.addEventListener('click',
           this.activate.bind(this));
       this.signinButtonElement.addEventListener('click',
           this.activate.bind(this));
 
-      this.removeUserButtonElement.addEventListener('mousedown', function (e) {
+      this.removeUserButtonElement.addEventListener('mousedown', function(e) {
         // Prevent default so that we don't trigger a 'focus' event.
         e.preventDefault();
         // Prevent the 'mousedown' event for the whole pod, which could result
         // in sign-in UI being shown.
         e.stopPropagation();
       });
       this.removeUserButtonElement.addEventListener('click',
           this.handleRemoveButtonClick_.bind(this));
       this.removeUserButtonElement.addEventListener('mouseout',
           this.handleRemoveButtonMouseOutOrBlur_.bind(this));
@@ skipping 352 matching lines @@
    * Creates a new pod row element.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var PodRow = cr.ui.define('podrow');
 
   PodRow.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     // Focused pod.
-    focusedPod_ : undefined,
+    focusedPod_: undefined,
 
     // Activated pod, i.e. the pod of current login attempt.
     activatedPod_: undefined,
 
+    // When moving through users quickly at login screen, set a timeout to
+    // prevent loading intermediate wallpapers.
+    loadWallpaperTimeout_: null,
+
     // Pods whose initial images haven't been loaded yet.
     podsWithPendingImages_: [],
 
     /** @inheritDoc */
     decorate: function() {
       this.style.left = 0;
 
       // Event listeners that are installed for the time period during which
       // the element is visible.
       this.listeners_ = {
@@ skipping 22 matching lines @@
         if (pod.user.username == username)
           return pod;
       }
       return null;
     },
 
     /**
      * True if the the pod row is disabled (handles no user interaction).
      * @type {boolean}
      */
-    disabled_ : false,
+    disabled_: false,
     get disabled() {
       return this.disabled_;
     },
     set disabled(value) {
       this.disabled_ = value;
       var controls = this.querySelectorAll('button,input');
       for (var i = 0, control; control = controls[i]; ++i) {
         control.disabled = value;
       }
     },
@@ skipping 112 matching lines @@
     /**
      * Focuses a given user pod or clear focus when given null.
      * @param {UserPod=} podToFocus User pod to focus (undefined clears focus).
      * @param {boolean=} opt_force If true, forces focus update even when
      *     podToFocus is already focused.
      */
     focusPod: function(podToFocus, opt_force) {
       if (this.focusedPod_ == podToFocus && !opt_force)
         return;
 
+      clearTimeout(this.loadWallpaperTimeout_);
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         pod.activeRemoveButton = false;
         if (pod != podToFocus) {
           pod.classList.remove('focused');
           pod.classList.remove('faded');
           pod.reset(false);
         }
       }
 
       this.focusedPod_ = podToFocus;
       if (podToFocus) {
         podToFocus.classList.remove('faded');
         podToFocus.classList.add('focused');
         podToFocus.reset(true);  // Reset and give focus.
         this.scrollPodIntoView(podToFocus);
+        this.loadWallpaperTimeout_ = window.setTimeout(function() {
+          chrome.send('userSelectedDelayed', [podToFocus.user.username]);
+        }, WALLPAPER_LOAD_DELAY_MS);
       }
     },
 
     /**
      * Returns the currently activated pod.
      * @type {UserPod}
      */
     get activatedPod() {
       return this.activatedPod_;
     },
@@ skipping 29 matching lines @@
      * @param {string} email Email for signin UI.
      */
     showSigninUI: function(email) {
       this.disabled = true;
       Oobe.showSigninUI(email);
     },
 
     /**
      * Updates current image of a user.
      * @param {string} username User for which to update the image.
-     * @public
      */
     updateUserImage: function(username) {
       var pod = this.getPodWithUsername_(username);
       if (pod)
         pod.updateUserImage();
     },
 
     /**
     * Resets OAuth token status (invalidates it).
     * @param {string} username User for which to reset the status.
-    * @public
     */
     resetUserOAuthTokenStatus: function(username) {
       var pod = this.getPodWithUsername_(username);
       if (pod) {
         pod.user.oauthTokenStatus = OAuthTokenStatus.INVALID;
         pod.update();
       } else {
         console.log('Failed to update Gaia state for: ' + username);
       }
     },
@@ skipping 45 matching lines @@
      * @param {Event} e Blur Event object.
      */
     handleBlur: function(e) {
       // Clear focus when the pod input is blurred.
       this.focusPod();
     },
 
     /**
      * Handler of keydown event.
      * @param {Event} e KeyDown Event object.
-     * @public
      */
     handleKeyDown: function(e) {
       if (this.disabled)
         return;
       var editing = e.target.tagName == 'INPUT' && e.target.value;
       switch (e.keyIdentifier) {
         case 'Left':
           if (!editing) {
             if (this.focusedPod_ && this.focusedPod_.previousElementSibling)
               this.focusPod(this.focusedPod_.previousElementSibling);
@@ skipping 60 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         chrome.send('userImagesLoaded');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });