A11y options list and remove supervised user menu are moved up in case of shelf-overlapping. Network list gets scrollbar in that case.

Also remove supervised user button aligned.

BUG=382851

Review URL: https://codereview.chromium.org/399613002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@287801 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 76 insertions, 1 deletions

diff --git a/ui/login/account_picker/screen_account_picker.js b/ui/login/account_picker/screen_account_picker.js
index c03184b..d4af56b 100644
--- a/ui/login/account_picker/screen_account_picker.js
+++ b/ui/login/account_picker/screen_account_picker.js
@@ -158,6 +158,15 @@ login.createScreen('AccountPickerScreen', 'account-picker', function() {
                                           cr.ui.Bubble.Attachment.BOTTOM,
                                           error,
                                           BUBBLE_OFFSET, BUBBLE_PADDING);
+        // Move error bubble up if it overlaps the shelf.
+        var maxHeight =
+            cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping($('bubble'));
+        if (maxHeight < $('bubble').offsetHeight) {
+          $('bubble').showContentForElement(activatedPod.mainInput,
+                                            cr.ui.Bubble.Attachment.TOP,
+                                            error,
+                                            BUBBLE_OFFSET, BUBBLE_PADDING);
+        }
       }
     },
 
diff --git a/ui/login/account_picker/user_pod_row.css b/ui/login/account_picker/user_pod_row.css
index d304c31..651c605 100644
--- a/ui/login/account_picker/user_pod_row.css
+++ b/ui/login/account_picker/user_pod_row.css
@@ -326,10 +326,21 @@ html[dir=rtl] .user-type-icon-area {
   font-size: 13px;
   position: absolute;
   right: 5px;
-  top: 18px;
   width: 220px;
 }
 
+.action-box-area.active ~ .action-box-menu:not(.menu-moved-up) {
+  top: 18px;
+}
+
+.action-box-area.active ~ .action-box-menu.menu-moved-up {
+  bottom: 210px;
+}
+
+.action-box-area.menu-moved-up {
+  -webkit-transform: rotate(180deg);
+}
+
 html[dir=rtl] .action-box-area.active ~ .action-box-menu {
   left: 5px;
   right: auto;
diff --git a/ui/login/account_picker/user_pod_row.js b/ui/login/account_picker/user_pod_row.js
index 21f20e9..194a3c6 100644
--- a/ui/login/account_picker/user_pod_row.js
+++ b/ui/login/account_picker/user_pod_row.js
@@ -367,6 +367,14 @@ cr.define('login', function() {
     },
 
     /**
+     * Gets action box menu.
+     * @type {!HTMLInputElement}
+     */
+    get actionBoxMenu() {
+      return this.querySelector('.action-box-menu');
+    },
+
+    /**
      * Gets action box menu title, user name item.
      * @type {!HTMLInputElement}
      */
@@ -575,6 +583,8 @@ cr.define('login', function() {
         this.actionBoxAreaElement.classList.add('active');
       } else {
         this.actionBoxAreaElement.classList.remove('active');
+        this.actionBoxAreaElement.classList.remove('menu-moved-up');
+        this.actionBoxMenu.classList.remove('menu-moved-up');
       }
     },
 
@@ -716,6 +726,17 @@ cr.define('login', function() {
           error,
           this.signinButtonElement.offsetWidth / 2,
           4);
+      // Move warning bubble up if it overlaps the shelf.
+      var maxHeight =
+          cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping($('bubble'));
+      if (maxHeight < $('bubble').offsetHeight) {
+        $('bubble').showContentForElement(
+            this.signinButtonElement,
+            cr.ui.Bubble.Attachment.BOTTOM,
+            error,
+            this.signinButtonElement.offsetWidth / 2,
+            4);
+      }
     },
 
     /**
@@ -825,6 +846,16 @@ cr.define('login', function() {
       this.actionBoxMenuRemoveElement.hidden = true;
       this.actionBoxRemoveUserWarningElement.hidden = false;
       this.actionBoxRemoveUserWarningButtonElement.focus();
+
+      // Move up the menu if it overlaps shelf.
+      var maxHeight = cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping(
+          this.actionBoxMenu);
+      var actualHeight = parseInt(
+          window.getComputedStyle(this.actionBoxMenu).height);
+      if (maxHeight < actualHeight) {
+        this.actionBoxMenu.classList.add('menu-moved-up');
+        this.actionBoxAreaElement.classList.add('menu-moved-up');
+      }
     },
 
     /**
diff --git a/ui/login/login_ui_tools.js b/ui/login/login_ui_tools.js
new file mode 100644
index 0000000..1daf685
--- /dev/null
+++ b/ui/login/login_ui_tools.js
@@ -0,0 +1,24 @@
+// 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 JS helpers used on login.
+ */
+
+cr.define('cr.ui.LoginUITools', function() {
+  return {
+    /**
+     * Computes max-height for an element so that it doesn't overlap shelf.
+     * @param {element} DOM element
+     */
+    getMaxHeightBeforeShelfOverlapping : function(element) {
+      var maxAllowedHeight =
+          $('outer-container').offsetHeight -
+          element.getBoundingClientRect().top -
+          parseInt(window.getComputedStyle(element).marginTop) -
+          parseInt(window.getComputedStyle(element).marginBottom);
+      return maxAllowedHeight;
+    }
+  }
+});