NNTP: Make sure that the window tooltip is within the browser viewport.

BUG=18534

TEST=Open a new window. Open several tabs in this window and then close
the window. An item representing this window should be shown on the new
tab page. Hover this item (or tab to it). The tooltip should be
repositioned so that it is not clipped by the window viewport.


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

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

1 files changed, 18 insertions, 8 deletions

diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 6b205b9..1bae2c7 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -1217,25 +1217,35 @@ WindowTooltip.prototype = {
 
     processData('#window-tooltip', tabs);
     var rect = linkEl.getBoundingClientRect();
-    var bodyRect = document.body.getBoundingClientRect()
+    var bodyRect = document.body.getBoundingClientRect();
     var rtl = document.documentElement.dir == 'rtl';
 
     this.tooltipEl.style.display = 'block';
+    var tooltipRect = this.tooltipEl.getBoundingClientRect();
+    var x, y;
 
     // When focused show below, like a drop down menu.
     if (type == 'focus') {
-      this.tooltipEl.style.left = (rtl ?
+      x = rtl ?
           rect.left + bodyRect.left + rect.width - this.tooltipEl.offsetWidth :
-          rect.left + bodyRect.left) + 'px';
-      this.tooltipEl.style.top = rect.top + bodyRect.top + rect.height + 'px';
+          rect.left + bodyRect.left;
+      y = rect.top + bodyRect.top + rect.height;
     } else {
-      this.tooltipEl.style.left = bodyRect.left + (rtl ?
+      x = bodyRect.left + (rtl ?
           WindowTooltip.clientX - this.tooltipEl.offsetWidth :
-          WindowTooltip.clientX) + 'px';
+          WindowTooltip.clientX);
       // Offset like a tooltip
-      this.tooltipEl.style.top = 20 + WindowTooltip.clientY + bodyRect.top +
-                                 'px';
+      y = 20 + WindowTooltip.clientY + bodyRect.top;
     }
+
+    // We need to ensure that the tooltip is inside the window viewport.
+    x = Math.min(x, bodyRect.width - tooltipRect.width);
+    x = Math.max(x, 0);
+    y = Math.min(y, bodyRect.height - tooltipRect.height);
+    y = Math.max(y, 0);
+
+    this.tooltipEl.style.left = x + 'px';
+    this.tooltipEl.style.top = y + 'px';
   },
   handleMouseOut: function(e) {
     // Don't hide when move to another item in the link.