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

chrome/browser/resources/file_manager/js/file_transfer_controller.js

Index: chrome/browser/resources/file_manager/js/file_transfer_controller.js
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 5e9be1ec7d96853cae60139c605690021fe907b1..66c59524bc457b1c4a0b9ee86791b23886f738e9 100644
--- a/chrome/browser/resources/file_manager/js/file_transfer_controller.js
+++ b/chrome/browser/resources/file_manager/js/file_transfer_controller.js
@@ -326,7 +326,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];
   },
 
@@ -363,7 +363,7 @@ FileTransferController.prototype = {
       this.setDropTarget_(item, entry.isDirectory, event.dataTransfer,
           entry.fullPath);
     } else {
-      this.setDropTarget_(null);
+      this.clearDropTarget_();
     }
   },
 
@@ -396,7 +396,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;
     }
   },
@@ -417,44 +417,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);
-    }
   },
 
   /**
@@ -529,7 +544,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() {
@@ -570,8 +585,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 ||