ChromeOS: update alignment of user POD error bubble.

ui/login/account_picker/screen_account_picker.js

Index: ui/login/account_picker/screen_account_picker.js
diff --git a/ui/login/account_picker/screen_account_picker.js b/ui/login/account_picker/screen_account_picker.js
index b70d43e440d1dde35048862979fbf1b9a82a59c2..7cac00bc3a4131a61cced2d65def37864f3e96ef 100644
--- a/ui/login/account_picker/screen_account_picker.js
+++ b/ui/login/account_picker/screen_account_picker.js
@@ -14,6 +14,13 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() {
    */
   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',
@@ -179,47 +186,77 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() {
         }
         // 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);
-        }
       }
     },