[WebUI] ClosureCompile cr.ui.DragWrapper, create a real handler class

chrome/browser/resources/extensions/extensions.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 <include src="../../../../ui/webui/resources/js/cr/ui/focus_row.js">
 <include src="../../../../ui/webui/resources/js/cr/ui/focus_grid.js">
 <include src="../uber/uber_utils.js">
+<include src="drag_and_drop_handler.js">
 <include src="extension_code.js">
 <include src="extension_commands_overlay.js">
 <include src="extension_error_overlay.js">
 <include src="extension_focus_manager.js">
 <include src="focus_row.js">
 <include src="extension_list.js">
 <include src="pack_extension_overlay.js">
 <include src="extension_loader.js">
 <include src="extension_options_overlay.js">
 
 <if expr="chromeos">
 <include src="chromeos/kiosk_apps.js">
 </if>
 
 // Used for observing function of the backend datasource for this page by
 // tests.
 var webuiResponded = false;
 
 cr.define('extensions', function() {
   var ExtensionList = extensions.ExtensionList;
 
-  // Implements the DragWrapper handler interface.
-  var dragWrapperHandler = {
-    /** @override */
-    shouldAcceptDrag: function(e) {
-      // External Extension installation can be disabled globally, e.g. while a
-      // different overlay is already showing.
-      if (!ExtensionSettings.getInstance().dragEnabled_)
-        return false;
-
-      // We can't access filenames during the 'dragenter' event, so we have to
-      // wait until 'drop' to decide whether to do something with the file or
-      // not.
-      // See: http://www.w3.org/TR/2011/WD-html5-20110113/dnd.html#concept-dnd-p
-      return (e.dataTransfer.types &&
-              e.dataTransfer.types.indexOf('Files') > -1);
-    },
-    /** @override */
-    doDragEnter: function() {
-      chrome.send('startDrag');
-      ExtensionSettings.showOverlay($('drop-target-overlay'));
-    },
-    /** @override */
-    doDragLeave: function() {
-      this.hideDropTargetOverlay_();
-      chrome.send('stopDrag');
-    },
-    /** @override */
-    doDragOver: function(e) {
-      e.preventDefault();
-    },
-    /** @override */
-    doDrop: function(e) {
-      this.hideDropTargetOverlay_();
-      if (e.dataTransfer.files.length != 1)
-        return;
-
-      var toSend = null;
-      // Files lack a check if they're a directory, but we can find out through
-      // its item entry.
-      for (var i = 0; i < e.dataTransfer.items.length; ++i) {
-        if (e.dataTransfer.items[i].kind == 'file' &&
-            e.dataTransfer.items[i].webkitGetAsEntry().isDirectory) {
-          toSend = 'installDroppedDirectory';
-          break;
-        }
-      }
-      // Only process files that look like extensions. Other files should
-      // navigate the browser normally.
-      if (!toSend &&
-          /\.(crx|user\.js|zip)$/i.test(e.dataTransfer.files[0].name)) {
-        toSend = 'installDroppedFile';
-      }
-
-      if (toSend) {
-        e.preventDefault();
-        chrome.send(toSend);
-      }
-    },
-
-    /**
-     * Hide the current overlay if it is the drop target overlay.
-     * @private
-     */
-    hideDropTargetOverlay_: function() {
-      var currentOverlay = ExtensionSettings.getCurrentOverlay();
-      if (currentOverlay && currentOverlay.id === 'drop-target-overlay')
-        ExtensionSettings.showOverlay(null);
-    }
-  };
-
   /**
    * ExtensionSettings class
    * @class
    * @constructor
    * @implements {extensions.ExtensionListDelegate}
    */
   function ExtensionSettings() {}
 
   cr.addSingletonGetter(ExtensionSettings);
 
@@ skipping 66 matching lines @@
         chrome.send('metricsHandler:recordAction',
                     ['Options_LoadUnpackedExtension']);
         extensionLoader.loadUnpacked();
       });
       $('pack-extension').addEventListener('click',
           this.handlePackExtension_.bind(this));
       $('update-extensions-now').addEventListener('click',
           this.handleUpdateExtensionNow_.bind(this));
 
       if (!loadTimeData.getBoolean('offStoreInstallEnabled')) {
-        this.dragWrapper_ = new cr.ui.DragWrapper(document.documentElement,
-                                                  dragWrapperHandler);
-        this.dragEnabled_ = true;
+        var dragTarget = document.documentElement;

[Dan Beam, 2016/07/21 02:29:12]

why not just pass |this| as the event target instead?

[Devlin, 2016/07/21 18:11:30]

Because line 41, declaring that this inherits HTMLDivElement, is a blatant lie. 
This is not a div element.  It's no where in the DOM.  It will never receive
events.  (Weird?  Yes.  But I'm not gonna bother changing this in the old
extensions page.)

So in lieu of this, I've removed line 41.

+        /** @private {extensions.DragAndDropHandler} */
+        this.dragWrapperHandler_ =
+            new extensions.DragAndDropHandler(true, dragTarget);
+        dragTarget.addEventListener('extension-drag-started', function() {
+          ExtensionSettings.showOverlay($('drop-target-overlay'));
+        });
+        dragTarget.addEventListener('extension-drag-ended', function() {
+          var overlay = ExtensionSettings.getCurrentOverlay();
+          if (overlay && overlay.id === 'drop-target-overlay')
+            ExtensionSettings.showOverlay(null);
+        });
+        this.dragWrapper_ =
+            new cr.ui.DragWrapper(dragTarget, this.dragWrapperHandler_);
       }
 
       extensions.PackExtensionOverlay.getInstance().initializePage();
 
       // Hook up the configure commands link to the overlay.
       var link = document.querySelector('.extension-commands-config');
       link.addEventListener('click',
           this.handleExtensionCommandsConfig_.bind(this));
 
       // Initialize the Commands overlay.
@@ skipping 223 matching lines @@
 
     $('overlay').hidden = !node;
 
     if (node)
       ExtensionSettings.focusOverlay();
 
     // If drag-drop for external Extension installation is available, enable
     // drag-drop when there is any overlay showing other than the usual overlay
     // shown when drag-drop is started.
     var settings = ExtensionSettings.getInstance();
-    if (settings.dragWrapper_)
-      settings.dragEnabled_ = !node || node == $('drop-target-overlay');
+    if (settings.dragWrapper_) {
+      assert(settings.dragWrapperHandler_).dragEnabled =
+          !node || node == $('drop-target-overlay');
+    }
 
     uber.invokeMethodOnParent(node ? 'beginInterceptingEvents' :
                                      'stopInterceptingEvents');
   };
 
   ExtensionSettings.focusOverlay = function() {
     var currentlyShowingOverlay = ExtensionSettings.getCurrentOverlay();
     assert(currentlyShowingOverlay);
 
     if (cr.ui.FocusOutlineManager.forDocument(document).visible)
@@ skipping 40 matching lines @@
 
   // Export
   return {
     ExtensionSettings: ExtensionSettings
   };
 });
 
 window.addEventListener('load', function(e) {
   extensions.ExtensionSettings.getInstance().initialize();
 });