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() {
   /**
@@ skipping 161 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 - 2(bubble margin) - 10 (internal bubble adjustment)
+        var bubblePositioningPadding = -8;
+
         var bubbleAnchor;
-        if (activatedPod.pinContainer)
+        var position;
+        if (activatedPod.pinContainer) {
+          // Anchor the bubble to the input field.
+          var elements = activatedPod.getElementsByClassName('auth-container');
+          if (elements.length == 1) {
+            bubbleAnchor = elements[0];
+          } else {
+            console.error('auth-container not found');
+            bubbleAnchor = activatedPod.mainInput;
+          }
+          position = cr.ui.Bubble.Attachment.RIGHT;
+        } else {
+          // Anchor the bubble to the pod instead of the input.
           bubbleAnchor = activatedPod;
-        else
-          bubbleAnchor = activatedPod.mainInput;
+          position = 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.
+        // 4 = bubble distance from element
+        var maxHeight =
+            cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping(bubbleAnchor)
+          - bubbleAnchor.offsetHeight - 4;
+        var maxWidth = cr.ui.LoginUITools.getMaxWidthToFit(bubbleAnchor)
+          - bubbleAnchor.offsetWidth - 4;
+
+        // Change bubble visibility temporary to calculate height.
+        var bubbleClassListHasFaded = bubble.classList.contains('bubble');
+        var bubbleVisibility = bubble.style.visibility;
+        var bubbleDisplay = bubble.style.display;

[xiyuan, 2016/11/02 16:17:21]

I don't think bubble changes (or should change) its visibility and display so
caching and restoring these two are not necessary.

[Alexander Alekseev, 2016/11/03 01:27:43]

Done.

+        var bubbleHidden = bubble.hidden;
+        bubble.style.visibility = 'hidden';
+        bubble.style.display = 'block';
+        bubble.classList.remove('faded');

[xiyuan, 2016/11/02 16:17:21]

"faded" controls the opacity and should not affect the layout. Could you try to
see if we get the correct offsetWidth/offsetHeight without removing it?

[Alexander Alekseev, 2016/11/03 01:27:43]

Done.

+        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.style.display = bubbleDisplay;
+        bubble.hidden = bubbleHidden;
+        if (bubbleClassListHasFaded)
+          bubble.classList.add('faded');
+
+        if (position == cr.ui.Bubble.Attachment.BOTTOM) {
+          // Move error bubble if it overlaps the shelf.
+          if (maxHeight < bubbleOffsetHeight)
+            position = cr.ui.Bubble.Attachment.TOP;
+        } else {
+          // Move error bubble if it doesn't fit screen.
+          if (maxWidth < bubbleOffsetWidth) {
+            bubblePositioningPadding = 2;
+            position = cr.ui.Bubble.Attachment.LEFT;
+          }
+        }

[xiyuan, 2016/11/02 16:17:21]

The code block to calculate size and choose the arrow position should be part of
bubble. How about move it to showContentForElement in bubble.js ?

[Alexander Alekseev, 2016/11/03 01:27:43]

Leaving it here as we decided that implementing asymmetric offsets in bubble.js
is unreasonable.

+        var showBubbleCallback = function() {
           activatedPod.removeEventListener("webkitTransitionEnd",
-              showBottomCallback);
+              showBubbleCallback);
           $('bubble').showContentForElement(bubbleAnchor,
-                                            cr.ui.Bubble.Attachment.BOTTOM,
+                                            position,
                                             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);
     }
   };
 });