Fix misplacement of PIN keyboard and sign-in banner for new login screen

ui/login/account_picker/md_user_pod_row.js

 // Copyright 2014 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 11 matching lines @@
   var CROS_SMALL_POD_HEIGHT = 74;
   var CROS_EXTRA_SMALL_POD_HEIGHT = 60;
   var DESKTOP_POD_HEIGHT = 226;
   var MD_DESKTOP_POD_HEIGHT = 200;
   var POD_ROW_PADDING = 10;
   var DESKTOP_ROW_PADDING = 32;
   var CUSTOM_ICON_CONTAINER_SIZE = 40;
   var CROS_PIN_POD_HEIGHT = 417;
   var SCROLL_MASK_HEIGHT = 112;
   var BANNER_MESSAGE_WIDTH = 520;
+  var CROS_POD_HEIGHT_WITH_PIN = 618;
 
   /**
    * The maximum number of users that each pod placement method can handle.
    */
   var POD_ROW_LIMIT = 2;
   var LANDSCAPE_MODE_LIMIT = 6;
   var PORTRAIT_MODE_LIMIT = 9;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
@@ skipping 1236 matching lines @@
         return;
 
       // Do not show pin if virtual keyboard is there.
       if (visible && Oobe.getInstance().virtualKeyboardShown)
         return;
 
       // Do not show pin keyboard if the pod does not have pin enabled.
       if (visible && !this.pinEnabled)
         return;
 
+      // Do not show pin keyboard if the pod is not in large style.
+      if (visible && this.getPodStyle() != UserPod.Style.LARGE)
+        return;
+
       var elements = this.getElementsByClassName('pin-tag');
       for (var i = 0; i < elements.length; ++i)
         this.updatePinClass_(elements[i], visible);
       this.updatePinClass_(this, visible);
 
       // Set the focus to the input element after showing/hiding pin keyboard.
       this.mainInput.focus();
 
       // Change the password placeholder based on pin keyboard visibility.
       this.passwordElement.placeholder = loadTimeData.getString(visible ?
           'pinKeyboardPlaceholderPinPassword' : 'passwordHint');
 
+      // Adjust the vertical position based on the pin keyboard visibility.
+      var podHeight = visible ? CROS_POD_HEIGHT_WITH_PIN : CROS_POD_HEIGHT;
+      this.top = ($('pod-row').screenSize.height - podHeight) / 2;
+
       chrome.send('setForceDisableVirtualKeyboard', [visible]);
     },
 
     isPinShown: function() {
       return this.classList.contains('pin-enabled');
     },
 
     setUserPodIconType: function(userTypeClass) {
       this.userTypeIconAreaElement.classList.add(userTypeClass);
       // TODO(wzang): Evaluate all icon types other than supervised user and
@@ skipping 2162 matching lines @@
       // Appends all pods to their proper parents. Small pods have parent other
       // than the pod row. The pods were all initialized with the pow row as a
       // temporary parent, which is intended to ensure that all event listeners
       // work properly. If the main pod already exists, it means we are in the
       // process of resizing the window, then there is no need to change parents
       // of any pod.
       if (!this.mainPod_) {
         this.mainPod_ = this.preselectedPod;
         this.appendPodsToParents_();
       }
-      this.restoreInitialStates_();
-      this.hideEmptyArea_();
-      // Clear error bubbles whenever pod placement is happening, i.e., after
-      // orientation change, showing or hiding virtual keyboard, and user
-      // removal.
-      Oobe.clearErrors();
+      this.handleBeforePodPlacement_();
 
       if (this.isScreenShrinked_()) {
         // When virtual keyboard is shown, the account picker should occupy
         // all the remaining screen. Screen size was already updated to exclude
         // the virtual keyboard.
         this.parentNode.setPreferredSize(
             this.screenSize.width, this.screenSize.height);
       } else {
         // Make sure not to block the header bar when virtual keyboard is absent.
         this.parentNode.setPreferredSize(
           Oobe.getInstance().clientAreaSize.width,
           Oobe.getInstance().clientAreaSize.height);
       }
 
       if (pods.length == 1) {
         this.placeSinglePod_();
       } else if (pods.length == POD_ROW_LIMIT) {
         this.placePodsOnPodRow_();
       } else {
         this.placePodsOnContainer_();
       }
       Oobe.getInstance().updateScreenSize(this.parentNode);
-      this.updatePodNameArea_();
+      this.handleAfterPodPlacement_();
     },
 
     /**
      * Appends pods to proper parents. Called each time before pod placement.
      * @private
      */
     appendPodsToParents_: function() {
       var pods = this.pods;
       // Pod count may have changed, so the placement method may change
       // accordingly. Therefore, always remove all pods from their current
@@ skipping 247 matching lines @@
       lastPod.style.paddingBottom = cr.ui.toCssPx(actualTopPadding);
     },
 
     /**
      * Called each time before pod placement to ensure we start with the
      * initial state, which is ready to place only one user pod. The styles
      * of elements necessary for other placement methods must be set
      * explicitly each time.
      * @private
      */
-    restoreInitialStates_: function() {
+    handleBeforePodPlacement_: function() {
       this.smallPodsContainer.hidden = true;
       document.querySelector('.small-pod-container-mask').hidden = true;
       document.querySelector('.small-pod-container-mask.rotate').hidden = true;
       this.smallPodsContainer.classList.remove('scroll');
       var pods = this.pods;
       for (var pod of pods) {
         // There is a chance that one of the pods has a bottom padding, so
         // reset all of them to be safe. This is because if the pod was at
         // the last position in the scrollable container, a bottom padding
         // was added to ensure a symmetric layout.
         pod.style.paddingBottom = cr.ui.toCssPx(0);
         // Remove the switch animation that might be added earlier.
         pod.imageElement.classList.remove('switch-image-animation');
         pod.smallPodImageElement.classList.remove('switch-image-animation');
       }
+      this.hideEmptyArea_();
+      // Clear error bubbles whenever pod placement is happening, i.e., after
+      // orientation change, showing or hiding virtual keyboard, and user
+      // removal.
+      Oobe.clearErrors();
     },
 
     /**
      * Checks if the screen is in portrait mode.
      * @return {boolean} True if in portrait mode.
      */
     isPortraitMode_: function() {
       return this.screenSize.width < this.screenSize.height;
     },
 
@@ skipping 23 matching lines @@
       bottomMask.hidden = false;
       bottomMask.style.left = this.smallPodsContainer.style.left;
       bottomMask.style.width = this.smallPodsContainer.style.width;
       // The bottom mask should overlap with the header bar, and its z-index
       // is chosen to ensure it does not block users from using the header bar.
       bottomMask.style.top =
           cr.ui.toCssPx(this.screenSize.height - SCROLL_MASK_HEIGHT);
     },
 
     /**
-     * Makes sure that:
-     * 1) User name on each large pod is centered.
-     * 2) Extra long names don't exceed maximum pod width.
-     * 3) Action box menus are either left-aligned or right-aligned with
-     * the drop down button.
+     * Called after pod placement and before showing the pod row. Updates
+     * elements whose style may depend on the pod placement outcome.
      * @private
      */
-    updatePodNameArea_: function() {
+    handleAfterPodPlacement_: function() {
       var pods = this.pods;
       for (var pod of pods) {
         if (pods.length > POD_ROW_LIMIT && pod != this.mainPod_)
           continue;
+        // Make sure that user name on each large pod is centered and extra
+        // long names don't exceed maximum pod width.
         var nameArea = pod.querySelector('.name-container');
         var leftMargin = (CROS_POD_WIDTH - pod.nameElement.offsetWidth) / 2;
         if (leftMargin > 0)
           nameArea.style.left = cr.ui.toCssPx(leftMargin);
         else {
           pod.nameElement.style.width = cr.ui.toCssPx(CROS_POD_WIDTH);
           nameArea.style.left = cr.ui.toCssPx(0);
         }
         // Update action box menu position to ensure it doesn't overlap with
         // elements outside the pod.
@@ skipping 11 matching lines @@
           actionBoxMenu.style.left = cr.ui.toCssPx(
               pod.nameElement.offsetWidth + actionBoxButton.style.marginLeft);
           actionBoxMenu.style.right = 'auto';
         }
         // Add ripple animation.
         var actionBoxRippleEffect =
             pod.querySelector('.action-box-button.ripple-circle');
         actionBoxRippleEffect.style.left = actionBoxMenu.style.left;
         actionBoxRippleEffect.style.top =
             cr.ui.toCssPx(actionBoxButton.style.marginTop);
+        // Adjust the vertical position of the pod if pin keyboard is shown.
+        if (pod.isPinShown() && !this.isScreenShrinked_())
+          pod.top = (this.screenSize.height - CROS_POD_HEIGHT_WITH_PIN) / 2;
+      }
+      // Update the position of the sign-in banner if it's shown.
+      if ($('signin-banner').textContent.length != 0) {
+        var bannerContainer = $('signin-banner-container1');
+        var BANNER_TOP_PADDING = this.isScreenShrinked_() ? 0 : 38;
+        bannerContainer.style.top = cr.ui.toCssPx(
+            this.mainPod_.top + CROS_POD_HEIGHT + BANNER_TOP_PADDING);
+        if (this.pods.length <= POD_ROW_LIMIT) {
+          bannerContainer.style.left =
+              cr.ui.toCssPx((this.screenSize.width - BANNER_MESSAGE_WIDTH) / 2);
+        }
+        else {
+          var leftPadding =
+              this.mainPod_.left - (BANNER_MESSAGE_WIDTH - CROS_POD_WIDTH) / 2;
+          bannerContainer.style.left = cr.ui.toCssPx(Math.max(leftPadding, 0));
+        }
       }
     },
 
     /**
      * Called when a small or extra small pod is clicked to trigger the switch
      * with the main pod.
      */
     switchMainPod: function(pod) {
       if (this.disabled) {
         console.error('Cannot change main pod while sign-in UI is disabled.');
@@ skipping 39 matching lines @@
       // of being appended as the last child, in order to maintain the 'Tab'
       // order.
       parent.insertBefore(this.mainPod_, children[insert]);
       this.mainPod_.left = left;
       this.mainPod_.top = top;
       this.mainPod_.style.paddingBottom = paddingBottom;
       this.mainPod_ = pod;
       // The new main pod should already be focused but we need a focus update
       // in order to focus on the input box.
       this.focusPod(this.mainPod_, true /* force */);
-      this.updatePodNameArea_();
+      this.handleAfterPodPlacement_();
     },
 
     /**
      * Returns dimensions of screen including the header bar.
      * @type {Object}
      */
     get screenSize() {
       var container = $('scroll-container');
       return {width: container.offsetWidth, height: container.offsetHeight};
     },
 
     /**
      * Displays a banner containing |message|. If the banner is already present
      * this function updates the message in the banner.
+     * The positioning of the banner is handled by handleAfterPodPlacement_()
+     * becuase it dynamically depends on the pod positions.
      * @param {string} message Text to be displayed or empty to hide the banner.
      */
     showBannerMessage: function(message) {
       var banner = $('signin-banner');
       banner.textContent = message;
       banner.classList.toggle('message-set', !!message);
-      var bannerContainer = $('signin-banner-container1');
-      var BANNER_TOP_PADDING = this.isScreenShrinked_() ? 0 : 38;
-      bannerContainer.style.top = cr.ui.toCssPx(
-          this.mainPod_.top + CROS_POD_HEIGHT + BANNER_TOP_PADDING);
-      if (this.pods.length <= POD_ROW_LIMIT)
-        bannerContainer.style.left =
-            cr.ui.toCssPx((this.screenSize.width - BANNER_MESSAGE_WIDTH) / 2);
-      else {
-        var leftPadding =
-            this.mainPod_.left - (BANNER_MESSAGE_WIDTH - CROS_POD_WIDTH) / 2;
-        bannerContainer.style.left = cr.ui.toCssPx(Math.max(leftPadding, 0));
-      }
     },
 
     /**
      * Whether the pod is currently focused.
      * @param {UserPod} pod Pod to check for focus.
      * @return {boolean} Pod focus status.
      */
     isFocused: function(pod) {
       return this.focusedPod_ == pod;
     },
@@ skipping 453 matching lines @@
             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.maybePreselectPod();
       }
 
-      this.updatePodNameArea_();
+      this.handleAfterPodPlacement_();
     },
 
     /**
      * 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 27 matching lines @@
       if (pod && pod.multiProfilesPolicyApplied) {
         pod.userTypeBubbleElement.classList.remove('bubble-shown');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });