[dragdrop] Add global drag-drop-active class

When a drag drop operation is active over FilesApp, add a global class
.drag-drop-active to the root element.

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

ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js

@@ -443,6 +443,21 @@ class FileManagerUI {
         rootElement.classList.toggle('pointer-active', /down$/.test(e.type));
       }, true);
     });
+
+    // Add global drag-drop-active handler.
+    let activeDropTarget = null;
+    ['dragenter', 'dragleave', 'drop'].forEach((eventType) => {
+      document.addEventListener(eventType, (event) => {
+        const dragDropActive = 'drag-drop-active';
+        if (event.type === 'dragenter') {
+          rootElement.classList.add(dragDropActive);
+          activeDropTarget = event.target;
+        } else if (activeDropTarget === event.target) {
+          rootElement.classList.remove(dragDropActive);
+          activeDropTarget = null;
+        }
+      });
+    });
   }
 
   /**