Add a first-class off-store install UI to chrome://extensions/.

chrome/browser/resources/extensions/extensions.js

Index: chrome/browser/resources/extensions/extensions.js
diff --git a/chrome/browser/resources/extensions/extensions.js b/chrome/browser/resources/extensions/extensions.js
index 51f7c80e6ec25f0561af9cc5da90dd9d92df4527..55528be4c35354a7599372b29fb8c8cbb701dca5 100644
--- a/chrome/browser/resources/extensions/extensions.js
+++ b/chrome/browser/resources/extensions/extensions.js
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+<include src="../shared/js/cr/ui/drag_wrapper.js"></include>
 <include src="../uber/uber_utils.js"></include>
 <include src="extension_list.js"></include>
 <include src="pack_extension_overlay.js"></include>
@@ -53,10 +54,41 @@ cr.define('extensions', function() {
       $('update-extensions-now').addEventListener('click',
           this.handleUpdateExtensionNow_.bind(this));
 
+      if (document.body.getAttribute('offstoreinstallenabled') == 'false')
+        this.dragWrapper_ = new cr.ui.DragWrapper(document.body, this);
+
       var packExtensionOverlay = extensions.PackExtensionOverlay.getInstance();
       packExtensionOverlay.initializePage();
     },
 
+    shouldAcceptDrag: function() {

[James Hawkins, 2012/05/01 23:13:36]

nit: Document these methods.

[Evan Stade, 2012/05/01 23:43:07]

@inheritDoc is enough

[Aaron Boodman, 2012/05/02 00:41:36]

To make this more clear, I've extracted the handler out into its own helper
object. With this, I don't think it is worthwhile to comment on each method.

+      // It would be nice to only say yes in the case of files ending in '.crx',
+      // but the event always says there are no files at this point.

[Evan Stade, 2012/05/01 23:43:07]

what types are available in dataTransfer? it should be fully populated by this
point. dataTransfer.files may not be implemented in webkit, but you can probably
get at the path as a file URL (and check if it ends in crx)

[Aaron Boodman, 2012/05/02 00:41:36]

Negative. The DataTransfer object is in 'protected mode' at this point and its
contents cannot be accessed:

http://developers.whatwg.org/dnd.html#concept-dnd-p

Added comment.

+      return true;
+    },
+    doDragEnter: function() {
+      chrome.send('startDrag');
+      var dropTarget = $('install-drop-target');

[Evan Stade, 2012/05/01 23:43:07]

what I had intended was

body.drag-target #install-drop-target {
  opacity: 1;
}

[Aaron Boodman, 2012/05/02 00:41:36]

I did that for display. I need to delay the assignment of opacity in order to
get the transition effect (unless you know of another way).

+      dropTarget.style.opacity = 0;
+      window.setTimeout(function() {
+        dropTarget.style.opacity = 1;
+      }, 0);
+    },
+    doDragLeave: function() {
+      chrome.send('stopDrag');
+    },
+    doDragOver: function(e) {
+      if (e.target.id == 'install-drop-target')
+        e.target.classList.add('active');
+      else
+        $('install-drop-target').classList.remove('active');
+    },
+    doDrop: function(e) {
+      if (e.srcElement.id == 'install-drop-target')
+        chrome.send('installDroppedFile');
+      e.preventDefault();

[Evan Stade, 2012/05/01 23:43:07]

this breaks the case where you drag a URL to the page (which should navigate)

[Aaron Boodman, 2012/05/02 00:41:36]

Hm, I am not sure it makes sense for navigation to happen when we are showing
the drag effect for all drags, but I've added it anyway because I like you.

+    },
+
     /**
      * Handles the Load Unpacked Extension button.
      * @param {Event} e Change event.
@@ -118,7 +150,7 @@ cr.define('extensions', function() {
           !$('extension-settings').classList.contains('dev-mode')) {
         $('dev-controls').hidden = true;
       }
-    },
+    }
   };
 
   /**