A11y options list and remove supervised user menu are moved up in case of...

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

chrome/browser/resources/chromeos/login/login_common.js

@@ -29,6 +29,7 @@
 <include src="screen_wrong_hwid.js">
 <include src="screen_confirm_password.js">
 <include src="screen_fatal_error.js">
+<include src="../../../../../ui/login/login_ui_tools.js">
 <include src="../../../../../ui/login/account_picker/user_pod_row.js">
 <include src="../../../../../ui/login/resource_loader.js">
 

chrome/browser/resources/chromeos/login/network_dropdown.js

@@ -173,6 +173,11 @@ cr.define('cr.ui', function() {
         this.createItem_(this.container, item);
       }
       this.container.selectItem(this.container.firstItem, false);
+
+      var maxHeight = cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping(
+          this.container);
+      if (maxHeight < this.container.offsetHeight)
+        this.container.style.maxHeight = maxHeight + 'px';
     },
 
     /**

chrome/browser/resources/chromeos/login/oobe.js

@@ -146,6 +146,15 @@ cr.define('cr.ui.Oobe', function() {
       $('accessibility-menu').showForElement(e.target,
                                              cr.ui.Bubble.Attachment.BOTTOM,
                                              BUBBLE_OFFSET, BUBBLE_PADDING);
+
+      var maxHeight = cr.ui.LoginUITools.getMaxHeightBeforeShelfOverlapping(
+          $('accessibility-menu'));
+      if (maxHeight < $('accessibility-menu').offsetHeight) {
+        $('accessibility-menu').showForElement(e.target,
+                                               cr.ui.Bubble.Attachment.TOP,
+                                               BUBBLE_OFFSET, BUBBLE_PADDING);
+      }
+
       $('accessibility-menu').firstBubbleElement = $('spoken-feedback');
       $('accessibility-menu').lastBubbleElement = $('close-accessibility-menu');
       if (Oobe.getInstance().currentScreen &&

chrome/browser/resources/user_manager/user_manager.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 <include src="../../../../ui/login/screen.js">
 <include src="../../../../ui/login/bubble.js">
+<include src="../../../../ui/login/login_ui_tools.js">
 <include src="../../../../ui/login/display_manager.js">
 <include src="control_bar.js">
 <include src="../../../../ui/login/account_picker/screen_account_picker.js">

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);
+        }
       }
     },
 

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;

ui/login/account_picker/user_pod_row.js

@@ -366,6 +366,14 @@ cr.define('login', function() {
       return this.querySelector('.user-type-bubble');
     },
 
+    /**
+     * 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');
+      }
     },
 
     /**

ui/login/login_ui_tools.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 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;
+    }
+  }
+});