New kiosk UI: handle edge cases

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 1158 matching lines @@
     // Activated pod, i.e. the pod of current login attempt.
     activatedPod_: undefined,
 
     // Pod that was most recently focused, if any.
     lastFocusedPod_: undefined,
 
     // Pods whose initial images haven't been loaded yet.
     podsWithPendingImages_: [],
 
     // Whether pod creation is animated.
-    user_add_is_animated_: false,
+    userAddIsAnimated_: false,
+
+    // Whether pod placement has been postponed.
+    podPlacementPostponed_: false,
 
     // Array of apps that are shown in addition to other user pods.
     apps_: [],
 
     // Array of users that are shown (public/supervised/regular).
     users_: [],
 
     /** @override */
     decorate: function() {
       // Event listeners that are installed for the time period during which
@@ skipping 175 matching lines @@
       }
     },
 
     /**
      * Populates pod row with given existing users and start init animation.
      * @param {array} users Array of existing user emails.
      * @param {boolean} animated Whether to use init animation.
      */
     loadPods: function(users, animated) {
       this.users_ = users;
-      this.user_add_is_animated_ = animated;
+      this.userAddIsAnimated_ = animated;
 
       this.rebuildPods();
     },
 
     /**
      * Rebuilds pod row using users_ and apps_ that were previously set or
      * updated.
      */
     rebuildPods: function() {
+      var emptyPodRow = this.pods.length == 0;
+
       // Clear existing pods.
       this.innerHTML = '';
       this.focusedPod_ = undefined;
       this.activatedPod_ = undefined;
       this.lastFocusedPod_ = undefined;
 
       // Switch off animation
       Oobe.getInstance().toggleClass('flying-pods', false);
 
       // Populate the pod row.
       for (var i = 0; i < this.users_.length; ++i)
-        this.addUserPod(this.users_[i], this.user_add_is_animated_);
+        this.addUserPod(this.users_[i], this.userAddIsAnimated_);
 
       for (var i = 0, pod; pod = this.pods[i]; ++i)
         this.podsWithPendingImages_.push(pod);
 
       // TODO(nkostylev): Edge case handling when kiosk apps are not fitting.
       for (var i = 0; i < this.apps_.length; ++i)
-        this.addUserPod(this.apps_[i], this.user_add_is_animated_);
+        this.addUserPod(this.apps_[i], this.userAddIsAnimated_);
 
       // Make sure we eventually show the pod row, even if some image is stuck.
       setTimeout(function() {
         $('pod-row').classList.remove('images-loading');
       }, POD_ROW_IMAGES_LOAD_TIMEOUT_MS);
 
-      this.placePods_();
+      if ($('login-header-bar').signinUIState ==
+              SIGNIN_UI_STATE.ACCOUNT_PICKER) {
+        this.placePods_();
 
-      // Without timeout changes in pods positions will be animated even though
-      // it happened when 'flying-pods' class was disabled.
-      setTimeout(function() {
-        Oobe.getInstance().toggleClass('flying-pods', true);
-      }, 0);
+        // Without timeout changes in pods positions will be animated even
+        // though it happened when 'flying-pods' class was disabled.
+        setTimeout(function() {
+          Oobe.getInstance().toggleClass('flying-pods', true);
+        }, 0);
 
-      this.focusPod(this.preselectedPod);
+        this.focusPod(this.preselectedPod);
+      } else {
+        this.podPlacementPostponed_ = true;
+
+        // Update [Cancel] button state.
+        if ($('login-header-bar').signinUIState ==
+                SIGNIN_UI_STATE.GAIA_SIGNIN &&
+            emptyPodRow &&
+            this.pods.length > 0) {
+          login.GaiaSigninScreen.updateCancelButtonState();
+        }
+      }
     },
 
     /**
      * Adds given apps to the pod row.
      * @param {array} apps Array of apps.
      */
     setApps: function(apps) {
       this.apps_ = apps;
       this.rebuildPods();
       chrome.send('kioskAppsLoaded');
@@ skipping 502 matching lines @@
     /**
      * Called right before the pod row is shown.
      */
     handleBeforeShow: function() {
       Oobe.getInstance().toggleClass('flying-pods', false);
       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;
+
+      if (this.podPlacementPostponed_) {
+        this.podPlacementPostponed_ = false;
+        this.placePods_();
+        this.focusPod(this.preselectedPod);
+      }
     },
 
     /**
      * 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]);
       }
@@ skipping 13 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });