[dragdrop] Style directory tree items for files-ng drag drop

Style directory tree drop target (tree-items) for files-ng. If they can
accept a drop, they should have gray background (same as :hover color).
If they cannot accept, they deny the drop and they should have a pinky-
red background (G Red 50).

Add CSS style for these cases (accepts and denies). Update the transfer
controller code to add or remove classes .accepts and .denies as needed
to accept or deny a drop.

Note the files-ng design does not say what to do when the active folder
(drawn blue) cannot accept a drop, so my decision was to turn it pinky-
red too. Similarly, what to do if it can accept a drop was unspecified,
so my decided to turn it gray (same as the :hover color). This way, all
directory tree-items have the same drag-drop effect color regardless of
whether a tree-item is the active folder or not.

Bug: 1002394
Change-Id: I4ee09697e0910d56239fd56ff4760352cb9290f6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2262380
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#781857}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -323,6 +323,14 @@ html.pointer-active #directory-tree :not(:active) {
   cursor: default;
 }
 
+html.drag-drop-active #directory-tree .tree-item.denies > .tree-row > .file-row {
+  background-color: var(--google-red-50);
+}
+
+html.drag-drop-active #directory-tree .tree-item.accepts > .tree-row > .file-row {
+  background-color: var(--google-grey-100);
+}
+
 html.focus-outline-visible #directory-tree:focus .tree-row[selected] > .file-row {
   border: 1px solid var(--google-blue-600);
 }
@@ -3651,4 +3659,4 @@ files-toast {
 cr-input:not(:defined),
 files-tooltip:not(:defined) {
   display: none;
-}
\ No newline at end of file
+}

ui/file_manager/file_manager/foreground/js/file_transfer_controller.js

@@ -194,7 +194,6 @@ class FileTransferController {
     chrome.fileManagerPrivate.enableExternalFileScheme();
   }
 
-
   /**
    * @param {!cr.ui.List} list Items in the list will be draggable.
    * @private
@@ -870,10 +869,12 @@ class FileTransferController {
    */
   onDragEnterFileList_(list, event) {
     event.preventDefault();  // Required to prevent the cursor flicker.
+
     this.lastEnteredTarget_ = event.target;
     let item = list.getListItemAncestor(
         /** @type {HTMLElement} */ (event.target));
     item = item && list.isItem(item) ? item : null;
+
     if (item === this.dropTarget_) {
       return;
     }
@@ -893,6 +894,7 @@ class FileTransferController {
    */
   onDragEnterTree_(tree, event) {
     event.preventDefault();  // Required to prevent the cursor flicker.
+
     this.lastEnteredTarget_ = event.target;
     let item = event.target;
     while (item && !(item instanceof cr.ui.TreeItem)) {
@@ -993,6 +995,10 @@ class FileTransferController {
       return;
     }
 
+    // Set classes assuming domElement won't accept this drop.
+    domElement.classList.remove('accepts');
+    domElement.classList.add('denies');
+
     // Disallow dropping a folder on itself.
     assert(destinationEntry.isDirectory);
     const entries = this.selectionHandler_.selection.entries;
@@ -1002,8 +1008,12 @@ class FileTransferController {
       }
     }
 
-    // Add accept class if the domElement can accept the drag.
-    domElement.classList.add('accepts');
+    // Add accept class if the domElement can accept this drop.
+    if (this.canPasteOrDrop_(clipboardData, destinationEntry)) {
+      domElement.classList.remove('denies');
+      domElement.classList.add('accepts');
+    }
+
     this.destinationEntry_ = destinationEntry;
 
     // Change directory immediately for crostini, otherwise start timer.
@@ -1040,12 +1050,14 @@ class FileTransferController {
    * @private
    */
   clearDropTarget_() {
-    if (this.dropTarget_ && this.dropTarget_.classList.contains('accepts')) {
-      this.dropTarget_.classList.remove('accepts');
+    if (this.dropTarget_) {
+      this.dropTarget_.classList.remove('accepts', 'denies');
     }
+
     this.dropTarget_ = null;
     this.destinationEntry_ = null;
-    if (this.navigateTimer_ !== undefined) {
+
+    if (this.navigateTimer_) {
       clearTimeout(this.navigateTimer_);
       this.navigateTimer_ = 0;
     }