Adds animation on a hovered directory/volume when dragging files in Files.app

To give more visible feedback, an animation has been added. The target directory blinks three times before it is opened. Along the way, now the directories which can't accept files are not openable.

TEST=Drag a file to some directory on a different volume.
BUG=137980


Review URL: https://chromiumcodereview.appspot.com/12677002

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

2 files changed, 71 insertions, 28 deletions

diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index c4d6c45..8a0fc40 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -684,6 +684,18 @@ body[type='full-page'] list .filename-label > :hover,
   text-decoration: underline;
 }
 
+.breadcrumb-path.accepts {
+  -webkit-animation: acceptsBlinkText 200ms linear 1s 3;
+}
+
+@-webkit-keyframes acceptsBlinkText {
+  0% {
+    color: white;
+  }
+  50% {
+  }
+}
+
 .img-container > img {
   -webkit-user-drag: none;
   position: absolute;
@@ -848,6 +860,20 @@ body[type='full-page'] .thumbnail-grid .thumbnail-bottom {
   border-color: transparent;
 }
 
+#roots-list > .accepts,
+#list-container list > .accepts,
+#list-container grid > .accepts {
+  -webkit-animation: acceptsBlink 200ms linear 1s 3;
+}
+
+@-webkit-keyframes acceptsBlink {
+  0% {
+    background-color: transparent;
+  }
+  50% {
+  }
+}
+
 .table-row-cell .filename-label,
 .thumbnail-item .filename-label,
 /* Show ellipsis in cells. The name column has different structure and overrides
diff --git a/chrome/browser/resources/file_manager/js/file_transfer_controller.js b/chrome/browser/resources/file_manager/js/file_transfer_controller.js
index 692ade9..e2bbb26 100644
--- a/chrome/browser/resources/file_manager/js/file_transfer_controller.js
+++ b/chrome/browser/resources/file_manager/js/file_transfer_controller.js
@@ -327,7 +327,7 @@ FileTransferController.prototype = {
   onDragEnd_: function(list, event) {
     var container = this.document_.querySelector('#drag-container');
     container.textContent = '';
-    this.setDropTarget_(null);
+    this.clearDropTarget_();
     delete window[DRAG_AND_DROP_GLOBAL_DATA];
   },
 
@@ -364,7 +364,7 @@ FileTransferController.prototype = {
       this.setDropTarget_(item, entry.isDirectory, event.dataTransfer,
           entry.fullPath);
     } else {
-      this.setDropTarget_(null);
+      this.clearDropTarget_();
     }
   },
 
@@ -397,7 +397,7 @@ FileTransferController.prototype = {
     // drop target. So event.target == this.lastEnteredTarget_
     // could only be if mouse goes out of listened element.
     if (event.target == this.lastEnteredTarget_) {
-      this.setDropTarget_(null);
+      this.clearDropTarget_();
       this.lastEnteredTarget_ = null;
     }
   },
@@ -418,44 +418,59 @@ FileTransferController.prototype = {
     event.preventDefault();
     this.paste(event.dataTransfer, destinationPath,
                this.selectDropEffect_(event, destinationPath));
-    this.setDropTarget_(null);
+    this.clearDropTarget_();
   },
 
   /**
+   * Sets the drop target.
    * @this {FileTransferController}
+   * @param {Element} domElement Target of the drop.
+   * @param {boolean} isDirectory If the target is a directory.
+   * @param {DataTransfer} dataTransfer Data transfer object.
+   * @param {string} destinationPath Destination path.
    */
-  setDropTarget_: function(domElement, isDirectory, opt_dataTransfer,
-                           opt_destinationPath) {
+  setDropTarget_: function(domElement, isDirectory, dataTransfer,
+                           destinationPath) {
     if (this.dropTarget_ == domElement)
       return;
 
     /** @type {string?} */
     this.destinationPath_ = null;
-    if (domElement) {
-      if (isDirectory &&
-          this.canPasteOrDrop_(opt_dataTransfer, opt_destinationPath)) {
-        domElement.classList.add('accepts');
-        this.destinationPath_ = opt_destinationPath;
-      }
-    }
-    if (this.dropTarget_ && this.dropTarget_.classList.contains('accepts')) {
-      var oldDropTarget = this.dropTarget_;
-      var self = this;
-      setTimeout(function() {
-        if (oldDropTarget != self.dropTarget_)
-          oldDropTarget.classList.remove('accepts');
-      }, 0);
+
+    // Add accept class if the domElement can accept the drag.
+    if (isDirectory &&
+        this.canPasteOrDrop_(dataTransfer, destinationPath)) {
+      domElement.classList.add('accepts');
+      this.destinationPath_ = destinationPath;
     }
+
+    // Remove the old drag target.
+    this.clearDropTarget_();
+
+    // Set the new drop target.
     this.dropTarget_ = domElement;
+
+    // Start timer changing the directory.
+    if (domElement && isDirectory && destinationPath &&
+        this.canPasteOrDrop_(dataTransfer, destinationPath)) {
+      this.navigateTimer_ = setTimeout(function() {
+        this.directoryModel_.changeDirectory(destinationPath);
+      }.bind(this), 2000);
+    }
+  },
+
+  /**
+   * Clears the drop target.
+   * @this {FileTransferController}
+   */
+  clearDropTarget_: function() {
+    if (this.dropTarget_ && this.dropTarget_.classList.contains('accepts'))
+      this.dropTarget_.classList.remove('accepts');
+    this.dropTarget_ = null;
     if (this.navigateTimer_ !== undefined) {
       clearTimeout(this.navigateTimer_);
       this.navigateTimer_ = undefined;
     }
-    if (domElement && isDirectory && opt_destinationPath) {
-      this.navigateTimer_ = setTimeout(function() {
-        this.directoryModel_.changeDirectory(opt_destinationPath);
-      }.bind(this), 2000);
-    }
   },
 
   /**
@@ -530,7 +545,7 @@ FileTransferController.prototype = {
 
   /**
    * @this {FileTransferController}
-   * @return {boolean}  Returns true if some files are selected and all the file
+   * @return {boolean} Returns true if some files are selected and all the file
    *     on drive is available to be cut. Otherwise, returns false.
    */
   canCutOrDrag_: function() {
@@ -571,8 +586,10 @@ FileTransferController.prototype = {
 
   /**
    * @this {FileTransferController}
-   * @return {boolean}  Returns true if {@code opt_destinationPath} is
-   *     available to be pasted to. Otherwise, returns false.
+   * @param {DataTransfer} dataTransfer Data transfer object.
+   * @param {string=} opt_destinationPath Destination path.
+   * @return {boolean}  Returns true if items stored in {@code dataTransfer} can
+   *     be pasted to {@code opt_destinationPath}. Otherwise, returns false.
    */
   canPasteOrDrop_: function(dataTransfer, opt_destinationPath) {
     var destinationPath = opt_destinationPath ||