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..0ca03ad39e1bca43211ce96cbd3707dd57d3b304 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>
@@ -13,6 +14,47 @@ var webui_responded_ = false;
 cr.define('extensions', function() {
   var ExtensionsList = options.ExtensionsList;
 
+  // Implements the DragWrapper handler interface.
+  var dragWrapperHandler = {
+    shouldAcceptDrag: function(e) {
+      // 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

[Evan Stade, 2012/05/02 22:03:09]

no, you can't access the file names themselves, but you can still determine
whether there are files available (I've just verified this works in practice and
not just in spec). Better to limit the drag effect to file drags only.

[Aaron Boodman, 2012/05/04 02:22:10]

Okie doke.

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

[Evan Stade, 2012/05/02 22:03:09]

this is only a problem because you're toggling between display: none and
display: block. (recently display:none things don't like transitioning,
annoyingly)

This also happens to be pretty jarring because it moves everything immediately
rather than smoothly. You will notice that the developer mode controls are
smooth. I think we should emulate this. Only you don't have to worry about
hiding because there's nothing focusable in the drag area (we only have to
display:none the drag controls because they could otherwise be tabbed to).

[Aaron Boodman, 2012/05/04 02:22:10]

With the new design this comment is no longer applicable.

+      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) {
+      // Only process files that look like extensions. Other files should
+      // navigate the browser normally.
+      if (!e.dataTransfer.files.length ||
+          !/\.crx$/.test(e.dataTransfer.files[0].name)) {
+        return;
+      }
+
+      if (e.srcElement.id == 'install-drop-target')
+        chrome.send('installDroppedFile');
+
+      e.preventDefault();
+    }
+  };
+
   /**
    * ExtensionSettings class
    * @class
@@ -53,6 +95,11 @@ cr.define('extensions', function() {
       $('update-extensions-now').addEventListener('click',
           this.handleUpdateExtensionNow_.bind(this));
 
+      if (document.body.getAttribute('offStoreInstallEnabled') == 'false') {

[Evan Stade, 2012/05/02 22:03:09]

this also doesn't work for some reason (didn't bother to debug it). You should
use loadTimeData.getBoolean() instead of setting an attribute on the body
element since you don't access it in css either way.

[Aaron Boodman, 2012/05/04 02:22:10]

Done.

+        this.dragWrapper_ =
+            new cr.ui.DragWrapper(document.body, dragWrapperHandler);
+      }
+
       var packExtensionOverlay = extensions.PackExtensionOverlay.getInstance();
       packExtensionOverlay.initializePage();
     },