Fix misplacement of signin overlay and critical update message banner

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 10 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 PUBLIC_EXPANDED_HEIGHT = 324;
   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;
   var PUBLIC_SESSION_ICON_WIDTH = 12;
 
   /**
    * 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;
 
@@ skipping 614 matching lines @@
     },
 
     /**
      * Returns whether the user pod to which the custom icon belongs is focused.
      * @return {boolean}
      * @private
      */
     isParentPodFocused_: function() {
       if ($('account-picker').hidden)
         return false;
-      var parentPod = this.parentNode;
-      while (parentPod && !parentPod.classList.contains('pod'))
-        parentPod = parentPod.parentNode;
+      var parentPod = this.getParentPod_();
       return parentPod && parentPod.parentNode.isFocused(parentPod);
     },
 
     /**
      * Depending on {@code this.tooltipState_}, it updates tooltip visibility
      * and text.
      * @private
      */
     updateTooltip_: function() {
-      if (this.hidden || !this.isParentPodFocused_())
+      if (this.hidden || !this.getParentPod_() ||
+          this.getParentPod_().getPodStyle() != UserPod.Style.LARGE ||
+          !this.isParentPodFocused_())

[jdufault, 2017/06/15 19:04:09]

multi-line if means that the body needs braces ({})

[Wenzhao (Colin) Zang, 2017/06/15 21:40:47]

Done. Sorry I missed that in the style guide.

FYI the try bots all succeed for dry run.

         return;
 
       if (!this.tooltipState_.active() || !this.tooltipState_.text) {
         this.hideTooltip_();
         return;
       }
 
       // Show the tooltip bubble.
       var bubbleContent = document.createElement('div');
       bubbleContent.textContent = this.tooltipState_.text;
 
       /** @const */ var BUBBLE_OFFSET = CUSTOM_ICON_CONTAINER_SIZE / 2;
       // TODO(tengs): Introduce a special reauth state for the account picker,
       // instead of showing the tooltip bubble here (crbug.com/409427).
       /** @const */ var BUBBLE_PADDING = 8 + (this.iconId_ ? 0 : 23);
       $('bubble').showContentForElement(this,
                                         cr.ui.Bubble.Attachment.LEFT,
                                         bubbleContent,
                                         BUBBLE_OFFSET,
                                         BUBBLE_PADDING);
     },
 
     /**
      * Hides the tooltip.
      * @private
      */
     hideTooltip_: function() {
       $('bubble').hideForElement(this);
+    },
+
+    /**
+     * Gets the parent pod (may be null) of this custom icon.
+     * @return {HTMLDivElement}
+     */
+    getParentPod_: function() {
+      var parentPod = this.parentNode;
+      while (parentPod && !parentPod.classList.contains('pod'))
+        parentPod = parentPod.parentNode;
+      return parentPod;
     }
   };
 
   /**
    * Unique salt added to user image URLs to prevent caching. Dictionary with
    * user names as keys.
    * @type {Object}
    */
   UserPod.userImageSalt_ = {};
 
@@ skipping 1517 matching lines @@
       this.parentNode.handlePublicPodExpansion(this, expanded);
     },
 
     get advanced() {
       return this.classList.contains('advanced');
     },
 
     /** @override */
     get mainInput() {
       if (this.expanded)
-        return this.enterButtonElement;
+        return this.querySelector('.monitoring-learn-more');
       else
         return this.nameElement;
     },
 
     /** @override */
     decorate: function() {
       UserPod.prototype.decorate.call(this);
 
       this.classList.add('public-account');
 
@@ skipping 35 matching lines @@
       var languageAndInputIcon =
           this.querySelector('.language-and-input-dropdown');
       languageAndInputIcon.addEventListener(
           'click', this.transitionToAdvanced_.bind(this));
 
       var monitoringLearnMore = this.querySelector('.monitoring-learn-more');
       monitoringLearnMore.tabIndex = UserPodTabOrder.POD_INPUT;
       monitoringLearnMore.addEventListener(
           'click', this.onMonitoringLearnMoreClicked_.bind(this));
 
+      this.enterButtonElement.tabIndex = UserPodTabOrder.POD_INPUT;
       this.enterButtonElement.addEventListener('click', (function(e) {
         this.enterButtonElement.disabled = true;
         var locale = this.querySelector('.language-select').value;
         var keyboardSelect = this.querySelector('.keyboard-select');
         // The contents of |keyboardSelect| is updated asynchronously. If its
         // locale does not match |locale|, it has not updated yet and the
         // currently selected keyboard layout may not be applicable to |locale|.
         // Do not return any keyboard layout in this case and let the backend
         // choose a suitable layout.
         var keyboardLayout =
@@ skipping 1574 matching lines @@
               pod.nameElement.offsetWidth + actionBoxButton.offsetWidth);
           actionBoxMenu.style.right = 'auto';
           actionBoxMenu.style.top = cr.ui.toCssPx(0);
         } else {
           actionBoxMenu.style.left = cr.ui.toCssPx(
               pod.nameElement.offsetWidth + actionBoxButton.style.marginLeft);
           actionBoxMenu.style.right = 'auto';
           actionBoxMenu.style.top =
               cr.ui.toCssPx(actionBoxButton.offsetHeight + MENU_TOP_PADDING);
         }
+        // Update password container width based on the visibility of the
+        // custom icon container.
+        pod.querySelector('.password-container')
+            .classList.toggle(
+                'custom-icon-shown', !pod.customIconElement.hidden);
         // Add ripple animation.
         var actionBoxRippleEffect =
             pod.querySelector('.action-box-button.ripple-circle');
         actionBoxRippleEffect.style.left = cr.ui.toCssPx(
             pod.nameElement.offsetWidth + actionBoxButton.style.marginLeft);
         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');
         bannerContainer.style.top = cr.ui.toCssPx(this.mainPod_.top / 2);
         if (this.pods.length <= POD_ROW_LIMIT) {
-          bannerContainer.style.left =
-              cr.ui.toCssPx((this.screenSize.width - BANNER_MESSAGE_WIDTH) / 2);
+          bannerContainer.style.left = cr.ui.toCssPx(
+              (this.screenSize.width - bannerContainer.offsetWidth) / 2);
         }
         else {
-          var leftPadding =
-              this.mainPod_.left - (BANNER_MESSAGE_WIDTH - CROS_POD_WIDTH) / 2;
+          var leftPadding = this.mainPod_.left -
+              (bannerContainer.offsetWidth - CROS_POD_WIDTH) / 2;
           bannerContainer.style.left = cr.ui.toCssPx(Math.max(leftPadding, 0));
         }
       }
     },
 
     /**
      * Handles required UI changes when a public session pod toggles the
      * expanded state.
      * @param {UserPod} pod Public session pod.
      * @param {boolean} expanded Whether the pod is expanded or not.
@@ skipping 647 matching lines @@
       if (pod && pod.multiProfilesPolicyApplied) {
         pod.userTypeBubbleElement.classList.remove('bubble-shown');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });