ChromeOS: update alignment of user POD error bubble.

ui/login/account_picker/screen_account_picker.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 Account picker screen implementation.
  */
 
 login.createScreen('AccountPickerScreen', 'account-picker', function() {
   /**
    * Maximum number of offline login failures before online login.
    * @type {number}
    * @const
    */
   var MAX_LOGIN_ATTEMPTS_IN_POD = 3;
 
+  /**
+   * Distance between error bubble and user POD.
+   * @type {number}
+   * @const
+   */
+   var BUBBLE_POD_OFFSET = 4;
+
   return {
     EXTERNAL_API: [
       'loadUsers',
       'runAppForTesting',
       'setApps',
       'setShouldShowApps',
       'showAppError',
       'updateUserImage',
       'setCapsLockState',
       'forceLockedUserPodFocus',
@@ skipping 145 matching lines @@
         chrome.send('maxIncorrectPasswordAttempts',
             [activatedPod.user.emailAddress]);
         activatedPod.showSigninUI();
       } else {
         if (loginAttempts == 1) {
           chrome.send('firstIncorrectPasswordAttempt',
               [activatedPod.user.emailAddress]);
         }
         // Update the pod row display if incorrect password.
         $('pod-row').setFocusedPodErrorDisplay(true);
-        // We want bubble's arrow to point to the first letter of input.
-        /** @const */ var BUBBLE_OFFSET = 7;
-        /** @const */ var BUBBLE_PADDING = 4;
 
-        // Anchor the bubble to the pod instead of the input if the pin keyboard
-        // is showing to avoid covering parts of the pin keyboard.
+        /** @const */ var BUBBLE_OFFSET = 25;
+        // -8 = 4(BUBBLE_POD_OFFSET) - 2(bubble margin)
+        //      - 10(internal bubble adjustment)
+        var bubblePositioningPadding = -8;
+
         var bubbleAnchor;
-        if (activatedPod.pinContainer)
+        var attachment;
+        if (activatedPod.pinContainer) {
+          // Anchor the bubble to the input field.
+          bubbleAnchor = (
+              activatedPod.getElementsByClassName('auth-container'))[0];
+          if (!bubbleAnchor) {
+            console.error('auth-container not found!');
+            bubbleAnchor = activatedPod.mainInput;
+          }
+          attachment = cr.ui.Bubble.Attachment.RIGHT;
+        } else {
+          // Anchor the bubble to the pod instead of the input.
           bubbleAnchor = activatedPod;
-        else
-          bubbleAnchor = activatedPod.mainInput;
+          attachment = cr.ui.Bubble.Attachment.BOTTOM;
+        }
 
-        // We want the bubble to point to where the input is after it is done
-        // transitioning.
-        var showBottomCallback = function() {
+        var bubble = $('bubble');
+
+        // Cannot use cr.ui.LoginUITools.get* on bubble until it is attached to
+        // the element. getMaxHeight/Width rely on the correct up/left element
+        // side positioning that doesn't happen until bubble is attached.
+        var maxHeight =
+            cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping(bubbleAnchor)
+          - bubbleAnchor.offsetHeight - BUBBLE_POD_OFFSET;
+        var maxWidth = cr.ui.LoginUITools.getMaxWidthToFit(bubbleAnchor)
+          - bubbleAnchor.offsetWidth - BUBBLE_POD_OFFSET;
+
+        // Change bubble visibility temporary to calculate height.
+        var bubbleVisibility = bubble.style.visibility;
+        bubble.style.visibility = 'hidden';
+        bubble.hidden = false;
+        // Now we need the bubble to have the new content before calculating
+        // size.
+        bubble.replaceContent(error);
+        // Get bubble size.
+        var bubbleOffsetHeight = parseInt(bubble.offsetHeight);
+        var bubbleOffsetWidth = parseInt(bubble.offsetWidth);
+        // Restore attributes.
+        bubble.style.visibility = bubbleVisibility;
+        bubble.hidden = true;
+
+        if (attachment == cr.ui.Bubble.Attachment.BOTTOM) {
+          // Move error bubble if it overlaps the shelf.
+          if (maxHeight < bubbleOffsetHeight)
+            attachment = cr.ui.Bubble.Attachment.TOP;
+        } else {
+          // Move error bubble if it doesn't fit screen.
+          if (maxWidth < bubbleOffsetWidth) {
+            bubblePositioningPadding = 2;
+            attachment = cr.ui.Bubble.Attachment.LEFT;
+          }
+        }
+        var showBubbleCallback = function() {
           activatedPod.removeEventListener("webkitTransitionEnd",
-              showBottomCallback);
+              showBubbleCallback);
           $('bubble').showContentForElement(bubbleAnchor,
-                                            cr.ui.Bubble.Attachment.BOTTOM,
+                                            attachment,
                                             error,
-                                            BUBBLE_OFFSET, BUBBLE_PADDING);
+                                            BUBBLE_OFFSET,
+                                            bubblePositioningPadding, true);
         };
         activatedPod.addEventListener("webkitTransitionEnd",
-            showBottomCallback);
+                                      showBubbleCallback);
         ensureTransitionEndEvent(activatedPod);
-
-        // Move error bubble up if it overlaps the shelf.
-        var maxHeight =
-            cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping($('bubble'));
-        if (maxHeight < $('bubble').offsetHeight) {
-          var showTopCallback = function() {
-            activatedPod.removeEventListener("webkitTransitionEnd",
-                showTopCallback);
-            $('bubble').showContentForElement(bubbleAnchor,
-                                              cr.ui.Bubble.Attachment.TOP,
-                                              error,
-                                              BUBBLE_OFFSET, BUBBLE_PADDING);
-          };
-          activatedPod.addEventListener("webkitTransitionEnd", showTopCallback);
-          ensureTransitionEndEvent(activatedPod);
-        }
       }
     },
 
     /**
      * Loads the PIN keyboard if any of the users can login with a PIN. Disables
      * the PIN keyboard for users who are not allowed to use PIN unlock.
      * @param {array} users Array of user instances.
      */
     initializePinKeyboardStateForUsers_: function(users) {
       for (var i = 0; i < users.length; ++i) {
@@ skipping 195 matching lines @@
      * @param {string} userID The user ID of the public session
      * @param {string} locale The locale to which this list of keyboard layouts
      *     applies
      * @param {!Object} list List of available keyboard layouts
      */
     setPublicSessionKeyboardLayouts: function(userID, locale, list) {
       $('pod-row').setPublicSessionKeyboardLayouts(userID, locale, list);
     }
   };
 });