Bookmarks: Be a bit more cautios when positioning a menu to prevent it from being displayed outside the viewport.

BUG=None
TEST=Open bookmark manager. Make the window pretty small. The context menu should not be cut of unless the window is smaller than the menu.

Review URL: http://codereview.chromium.org/3008003

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

2 files changed, 40 insertions, 15 deletions

diff --git a/chrome/browser/resources/shared/js/cr/ui/context_menu_handler.js b/chrome/browser/resources/shared/js/cr/ui/context_menu_handler.js
index f033a80..50eb64a 100644
--- a/chrome/browser/resources/shared/js/cr/ui/context_menu_handler.js
+++ b/chrome/browser/resources/shared/js/cr/ui/context_menu_handler.js
@@ -34,9 +34,11 @@ cr.define('cr.ui', function() {
 
       menu.style.display = 'block';
       // when the menu is shown we steal all keyboard events.
-      menu.ownerDocument.addEventListener('keydown', this, true);
-      menu.ownerDocument.addEventListener('mousedown', this, true);
-      menu.ownerDocument.addEventListener('blur', this, true);
+      var doc = menu.ownerDocument;
+      doc.addEventListener('keydown', this, true);
+      doc.addEventListener('mousedown', this, true);
+      doc.addEventListener('blur', this, true);
+      doc.defaultView.addEventListener('resize', this);
       menu.addEventListener('activate', this);
       this.positionMenu_(e, menu);
     },
@@ -50,9 +52,11 @@ cr.define('cr.ui', function() {
         return;
 
       menu.style.display = 'none';
-      menu.ownerDocument.removeEventListener('keydown', this, true);
-      menu.ownerDocument.removeEventListener('mousedown', this, true);
-      menu.ownerDocument.removeEventListener('blur', this, true);
+      var doc = menu.ownerDocument;
+      doc.removeEventListener('keydown', this, true);
+      doc.removeEventListener('mousedown', this, true);
+      doc.removeEventListener('blur', this, true);
+      doc.defaultView.removeEventListener('resize', this);
       menu.removeEventListener('activate', this);
       menu.selectedIndex = -1;
       this.menu_ = null;
@@ -137,6 +141,7 @@ cr.define('cr.ui', function() {
 
         case 'activate':
         case 'blur':
+        case 'resize':
           this.hideMenu();
           break;
 
diff --git a/chrome/browser/resources/shared/js/cr/ui/position_util.js b/chrome/browser/resources/shared/js/cr/ui/position_util.js
index bc96f49..85e86b2 100644
--- a/chrome/browser/resources/shared/js/cr/ui/position_util.js
+++ b/chrome/browser/resources/shared/js/cr/ui/position_util.js
@@ -21,7 +21,7 @@ cr.define('cr.ui', function() {
    */
   const AnchorType = {
     /**
-     * The popop's right edge is aligned with the left edge of the anchor.
+     * The popup's right edge is aligned with the left edge of the anchor.
      * The popup's top edge is aligned with the top edge of the anchor's top
      * edge.
      */
@@ -73,20 +73,28 @@ cr.define('cr.ui', function() {
     // Flip type based on available size
     switch (type) {
       case AnchorType.BELOW:
-        if (anchorRect.bottom + popupRect.height > availRect.height)
+        if (anchorRect.bottom + popupRect.height > availRect.height &&
+            popupRect.height <= anchorRect.top) {
           type = AnchorType.ABOVE;
+        }
         break;
       case AnchorType.ABOVE:
-        if (popupRect.height > anchorRect.top)
+        if (popupRect.height > anchorRect.top &&
+            anchorRect.bottom + popupRect.height <= availRect.height) {
           type = AnchorType.BELOW;
+        }
         break;
       case AnchorType.AFTER:
-        if (anchorRect.right + popupRect.width > availRect.width)
+        if (anchorRect.right + popupRect.width > availRect.width &&
+            popupRect.width <= anchorRect.left) {
           type = AnchorType.BEFORE;
+        }
         break;
       case AnchorType.BEFORE:
-        if (popupRect.width > anchorRect.left)
+        if (popupRect.width > anchorRect.left &&
+            anchorRect.right + popupRect.width <= availRect.width) {
           type = AnchorType.AFTER;
+        }
         break;
     }
     // flipping done
@@ -98,16 +106,28 @@ cr.define('cr.ui', function() {
     // Primary direction
     switch (type) {
       case AnchorType.BELOW:
-        style.top = anchorRect.bottom + 'px';
+        if (anchorRect.bottom + popupRect.height <= availRect.height)
+          style.top = anchorRect.bottom + 'px';
+        else
+          style.bottom = '0';
         break;
       case AnchorType.ABOVE:
-        style.bottom = availRect.height - anchorRect.top + 'px';
+        if (availRect.height - anchorRect.top >= 0)
+          style.bottom = availRect.height - anchorRect.top + 'px';
+        else
+          style.top = '0';
         break;
       case AnchorType.AFTER:
-        style.left = anchorRect.right + 'px';
+        if (anchorRect.right + popupRect.width <= availRect.width)
+          style.left = anchorRect.right + 'px';
+        else
+          style.right = '0';
         break;
       case AnchorType.BEFORE:
-        style.right = availRect.width - anchorRect.left + 'px';
+        if (availRect.width - anchorRect.left >= 0)
+          style.right = availRect.width - anchorRect.left + 'px';
+        else
+          style.left = '0';
         break;
     }