[cros] Hide user pods on Login screen while images are loading.

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 18 matching lines @@
   var WALLPAPER_LOAD_DELAY_MS = 500;
 
   /**
    * Wallpaper load delay in milliseconds. TODO(nkostylev): Tune this constant.
    * @type {number}
    * @const
    */
   var WALLPAPER_BOOT_LOAD_DELAY_MS = 500;
 
   /**
+   * Maximum time for which the pod row remains hidden until all user images
+   * have been loaded.
+   * @type {number}
+   * @const
+   */
+  var POD_ROW_IMAGES_LOAD_TIMEOUT_MS = 3000;
+
+  /**
    * Oauth token status. These must match UserManager::OAuthTokenStatus.
    * @enum {number}
    * @const
    */
   var OAuthTokenStatus = {
     UNKNOWN: 0,
     INVALID: 1,
     VALID: 2
   };
 
@@ skipping 575 matching lines @@
       this.focusedPod_ = undefined;
       this.activatedPod_ = undefined;
 
       // Populate the pod row.
       for (var i = 0; i < users.length; ++i) {
         this.addUserPod(users[i], animated);
       }
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         this.podsWithPendingImages_.push(pod);
       }
+      // Make sure we eventually show the pod row, even if some image is stuck.
+      setTimeout(function() {
+        $('pod-row').classList.remove('images-loading');

[ygorshenin1, 2012/08/14 14:39:27]

$('pod-row') -> this ?

[Ivan Korotkov, 2012/08/14 15:00:03]

It's not |this| in a timer callback and I guess saving |this| to a variable and
using it later isn't much better than using $*).

+      }, POD_ROW_IMAGES_LOAD_TIMEOUT_MS);
+
       this.focusPod(this.preselectedPod);
     },
 
     /**
      * 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) {
@@ skipping 238 matching lines @@
 
     /**
      * Called right before the pod row is shown.
      */
     handleBeforeShow: function() {
       for (var event in this.listeners_) {
         this.ownerDocument.addEventListener(
             event, this.listeners_[event][0], this.listeners_[event][1]);
       }
       $('login-header-bar').buttonsTabIndex = UserPodTabOrder.HEADER_BAR;
-      $('pod-row').updateTitles();
+      this.updateTitles();
     },
 
     /**
      * Called when the element is hidden.
      */
     handleHide: function() {
       for (var event in this.listeners_) {
         this.ownerDocument.removeEventListener(
             event, this.listeners_[event][0], this.listeners_[event][1]);
       }
       $('login-header-bar').buttonsTabIndex = 0;
-      $('pod-row').hideTitles();
+      this.hideTitles();
     },
 
     /**
      * Called when a pod's user image finishes loading.
      */
     handlePodImageLoad: function(pod) {
       var index = this.podsWithPendingImages_.indexOf(pod);
       if (index == -1) {
         return;
       }
 
       this.podsWithPendingImages_.splice(index, 1);
       if (this.podsWithPendingImages_.length == 0) {
+        this.classList.remove('images-loading');
         chrome.send('userImagesLoaded');
         // Report back user pods being painted.
         window.webkitRequestAnimationFrame(function() {
           chrome.send('loginVisible');
         });
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });