Bug 858598 - Defect - Select popups near the bottom of the screen are unusable r=mbrubeck
authorRodrigo Silveira <rsilveira@mozilla.com>
Thu, 02 May 2013 11:50:49 -0700
changeset 141596 8dedab2c9c826249afe2d9cf2357684cadd344a5
parent 141595 fdc122c78f1d682aad9bb4def03a62d1b7c12ea5
child 141597 ebad4b72a6ea110261c5baa265e64d2e1efc5050
push id2579
push userakeybl@mozilla.com
push dateMon, 24 Jun 2013 18:52:47 +0000
treeherdermozilla-beta@b69b7de8a05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmbrubeck
bugs858598
milestone23.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 858598 - Defect - Select popups near the bottom of the screen are unusable r=mbrubeck
browser/metro/base/content/helperui/MenuUI.js
--- a/browser/metro/base/content/helperui/MenuUI.js
+++ b/browser/metro/base/content/helperui/MenuUI.js
@@ -383,16 +383,18 @@ MenuPopup.prototype = {
     window.removeEventListener("mousedown", this, true);
     Elements.stack.removeEventListener("PopupChanged", this, false);
 
     let self = this;
     this._panel.addEventListener("transitionend", function () {
       self._panel.removeEventListener("transitionend", arguments.callee);
       self._panel.removeAttribute("hiding");
       self._panel.hidden = true;
+      self._popup.style.maxWidth = "none";
+      self._popup.style.maxHeight = "none";
 
       let event = document.createEvent("Events");
       event.initEvent("popuphidden", true, false);
       document.dispatchEvent(event);
     });
 
     this._panel.setAttribute("hiding", "true");
     setTimeout(()=>this._panel.removeAttribute("showing"), 0);
@@ -427,39 +429,47 @@ MenuPopup.prototype = {
       aX -= width;
 
     if (aPositionOptions.bottomAligned)
       aY -= height;
 
     if (aPositionOptions.centerHorizontally)
       aX -= halfWidth;
 
-    if (aX < 0) {
-      aX = 0;
+    // Always leave some padding.
+    if (aX < kPositionPadding) {
+      aX = kPositionPadding;
     } else if (aX + width + kPositionPadding > screenWidth){
-      aX = screenWidth - width - kPositionPadding;
+      // Don't let the popup overflow to the right.
+      aX = Math.max(screenWidth - width - kPositionPadding, kPositionPadding);
     }
 
-    if (aY < 0 && aPositionOptions.moveBelowToFit) {
+    if (aY < kPositionPadding  && aPositionOptions.moveBelowToFit) {
       // show context menu below when it doesn't fit.
       aY = aPositionOptions.yPos;
-    } else if (aY < 0) {
-      aY = 0;
+    }
+
+    if (aY < kPositionPadding) {
+      aY = kPositionPadding;
+    } else if (aY + height + kPositionPadding > screenHeight){
+      aY = Math.max(screenHeight - height - kPositionPadding, kPositionPadding);
     }
 
     this._panel.left = aX;
     this._panel.top = aY;
 
-    if (!aPositionOptions.maxWidth) {
-      let excessY = (aY + height + kPositionPadding - screenHeight);
-      this._popup.style.maxHeight = (excessY > 0) ? (height - excessY) + "px" : "none";
+    if (!aPositionOptions.maxHeight) {
+      // Make sure it fits in the window.
+      let popupHeight = Math.min(aY + height + kPositionPadding, screenHeight - aY - kPositionPadding);
+      this._popup.style.maxHeight = popupHeight + "px";
     }
-    if (!aPositionOptions.maxHeight) {
-      let excessX = (aX + width + kPositionPadding - screenWidth);
-      this._popup.style.maxWidth = (excessX > 0) ? (width - excessX) + "px" : "none";
+
+    if (!aPositionOptions.maxWidth) {
+      let popupWidth = Math.min(aX + width + kPositionPadding, screenWidth - aX - kPositionPadding);
+      this._popup.style.maxWidth = popupWidth + "px";
     }
   },
 
   handleEvent: function handleEvent(aEvent) {
     switch (aEvent.type) {
       case "keypress":
         if (!this._wantTypeBehind) {
           // Hide the context menu so you can't type behind it.