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

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="../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>
 
 // Used for observing function of the backend datasource for this page by
 // tests.
 var webui_responded_ = false;
 
 cr.define('extensions', function() {
   var ExtensionsList = options.ExtensionsList;
@@ skipping 31 matching lines @@
           this.handleDevControlsTransitionEnd_.bind(this));
 
       // Set up the three dev mode buttons (load unpacked, pack and update).
       $('load-unpacked').addEventListener('click',
           this.handleLoadUnpackedExtension_.bind(this));
       $('pack-extension').addEventListener('click',
           this.handlePackExtension_.bind(this));
       $('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.
      * @private
      */
     handleLoadUnpackedExtension_: function(e) {
       chrome.send('extensionSettingsLoadUnpackedExtension');
 
       // TODO(jhawkins): Refactor metrics support out of options and use it
       // in extensions.html.
@@ skipping 41 matching lines @@
     /**
      * Called when a transition has ended for #dev-controls.
      * @param {Event} e webkitTransitionEnd event.
      * @private
      */
     handleDevControlsTransitionEnd_: function(e) {
       if (e.propertyName == 'height' &&
           !$('extension-settings').classList.contains('dev-mode')) {
         $('dev-controls').hidden = true;
       }
-    },
+    }
   };
 
   /**
    * Called by the dom_ui_ to re-populate the page with data representing
    * the current state of installed extensions.
    */
   ExtensionSettings.returnExtensionsData = function(extensionsData) {
     // We can get called many times in short order, thus we need to
     // be careful to remove the 'finished loading' timeout.
     if (this.loadingTimeout_)
@@ skipping 110 matching lines @@
   return {
     ExtensionSettings: ExtensionSettings
   };
 });
 
 var ExtensionSettings = extensions.ExtensionSettings;
 
 window.addEventListener('load', function(e) {
   ExtensionSettings.getInstance().initialize();
 });