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;
 
+  // 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
    */
   function ExtensionSettings() {}
 
   cr.addSingletonGetter(ExtensionSettings);
 
   ExtensionSettings.prototype = {
     __proto__: HTMLDivElement.prototype,
@@ skipping 20 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') {

[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();
     },
 
     /**
      * Handles the Load Unpacked Extension button.
      * @param {Event} e Change event.
      * @private
      */
     handleLoadUnpackedExtension_: function(e) {
@@ skipping 176 matching lines @@
   return {
     ExtensionSettings: ExtensionSettings
   };
 });
 
 var ExtensionSettings = extensions.ExtensionSettings;
 
 window.addEventListener('load', function(e) {
   ExtensionSettings.getInstance().initialize();
 });