[NTP] Tweak app drag and drop.

1. Map the free space on the last row of the app launcher to the last valid app position.
2. Transition the app opacity smoothly.
3. Fix JS errors when starting drag from certain areas.
4. Make sure drag and drop works when the window / apps section is scrolled.

BUG=53977
TEST=none.

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

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

chrome/browser/resources/ntp/apps.css

@@ -93,11 +93,10 @@ html.apps-promo-visible #apps-content {
 
 .app.dragging {
   opacity: .7;
-  z-index: 2;
 }
 
 #apps-content[launcher-animations=true] .app {
-  -webkit-transition: top .2s, left .2s, right .2s;
+  -webkit-transition: top .2s, left .2s, right .2s, opacity .2s;
 }
 
 @-webkit-keyframes bounce {

chrome/browser/resources/ntp/apps.js

@@ -367,7 +367,7 @@ var apps = (function() {
       var item = findAncestorByClass(e.target, 'app');
 
       // You can't drag the web store launcher.
-      if (item.classList.contains('web-store-entry'))
+      if (item && item.classList.contains('web-store-entry'))
         return null;
 
       return item;
@@ -410,18 +410,24 @@ var apps = (function() {
     },
 
     getIndexAt_: function(coordinates) {
-      var x = coordinates.x;
-      var y = coordinates.y;
-
       var w = this.dimensions.width;
       var h = this.dimensions.height;
 
       var availableWidth = this.dragContainer.offsetWidth;
 
-      var row = Math.floor(y / h);
-      var col = Math.floor(x / w);
+      var row = Math.floor(coordinates.y / h);
+      var col = Math.floor(coordinates.x / w);
       var index = Math.floor(availableWidth / w) * row + col;
 
+      var appCount = this.data.length;
+      var cols = MAX_APPS_PER_ROW[layoutMode];
+      var rows = Math.ceil(appCount / cols);
+
+      // Rather than making the free space on the last row invalid, we
+      // map it to the last valid position.
+      if (index >= appCount && index < cols * rows)
+        return appCount-1;
+
       return index;
     },
 

chrome/browser/resources/ntp/drag_drop_controller.js

@@ -55,8 +55,8 @@ DragAndDropController.prototype = {
   getCoordinates_: function(e) {
     var rect = this.delegate_.dragContainer.getBoundingClientRect();
     var coordinates = {
-      x: e.clientX + window.scrollX - rect.left,
-      y: e.clientY + window.scrollY - rect.top
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
     };
 
     // If we're in an RTL language, reflect the coordinates so the delegate
@@ -71,8 +71,10 @@ DragAndDropController.prototype = {
   // starting drag and drop.
   handleMouseDown_: function(e) {
     var item = this.delegate_.getItem(e);
-    if (!item)
+    if (!item) {
+      e.preventDefault();
       return;
+    }
 
     this.startX_ = item.offsetLeft;
     this.startY_ = item.offsetTop;
@@ -96,6 +98,7 @@ DragAndDropController.prototype = {
     // url-list. Instead, we just rely on the dragging of link behavior.
     this.delegate_.dragItem = item;
     item.classList.add('dragging');
+    item.style.zIndex = 2;
 
     e.dataTransfer.effectAllowed = 'copyLinkMove';
   },
@@ -127,9 +130,10 @@ DragAndDropController.prototype = {
 
     this.delegate_.dragItem = null;
     this.delegate_.saveDrag();
+    dragItem.classList.remove('dragging');
 
     setTimeout(function() {
-      dragItem.classList.remove('dragging');
+      dragItem.style.zIndex = 0;
     }, this.delegate_.transitionsDuration + 10);
   },