NNTP: Limit the dragged item to the viewport boundaries.

BUG=16361, 15099

TEST=Drag the thumbnails on the new tab page and make sure that the
visual representation is never clipped. Also make sure that no new
scrollbars show up due to dragging.

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

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

1 files changed, 17 insertions, 2 deletions

diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index d82976a..6b205b9 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -1477,12 +1477,27 @@ var dnd = {
   },
 
   handleDrag: function(e) {
+    // Moves the drag item making sure that it is not displayed outside the
+    // browser viewport.
     var item = mostVisited.getItem(e.target);
     var rect = document.querySelector('#most-visited').getBoundingClientRect();
     item.style.pointerEvents = 'none';
 
-    item.style.left = this.startX + e.screenX - this.startScreenX + 'px';
-    item.style.top = this.startY + e.screenY - this.startScreenY + 'px';
+    var x = this.startX + e.screenX - this.startScreenX;
+    var y = this.startY + e.screenY - this.startScreenY;
+
+    // The position of the item is relative to #most-visited so we need to
+    // subtract that when calculating the allowed position.
+    x = Math.max(x, -rect.left);
+    x = Math.min(x, document.body.clientWidth - rect.left - item.offsetWidth -
+                 2);
+    // The shadow is 2px
+    y = Math.max(-rect.top, y);
+    y = Math.min(y, document.body.clientHeight - rect.top - item.offsetHeight -
+                 2);
+
+    item.style.left = x + 'px';
+    item.style.top = y + 'px';
   },
 
   // We listen to mousedown to get the relative position of the cursor for dnd.