Adds functionality to pack an extension / app from the app.

chrome/browser/resources/apps_debugger/js/items.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.
 
 var ItemsList = appsDevtool.ItemsList;
 
 // The list of all apps & extensions.
 var completeList = [];
 
 // The list of all apps.
@@ skipping 99 matching lines @@
 AppsDevTool.prototype = {
   __proto__: HTMLDivElement.prototype,
 
   /**
    * Perform initial setup.
    */
   initialize: function() {
     // Set up the three buttons (load unpacked, pack and update).
     $('load-unpacked').addEventListener('click',
         this.handleLoadUnpackedItem_.bind(this));
+    $('pack-item').addEventListener('click',
+        this.handlePackItem_.bind(this));
     $('update-items-now').addEventListener('click',
         this.handleUpdateItemNow_.bind(this));
 
+    var packItemOverlay = appsDevtool.PackItemOverlay.getInstance();
+      packItemOverlay.initializePage();
+
   },
 
-  /**
-   * Handles the Load Unpacked Extension button.
-   * @param {!Event} e Change event.
+  /** Handles the Load Unpacked Extension button.
+   * @param {Event} e Change event.
    * @private
    */
   handleLoadUnpackedItem_: function(e) {
     chrome.developerPrivate.loadUnpacked(function(success) {
       loadItemsInfo();
     });
   },
 
+  /** Handles the Pack Extension button.
+   * @param {Event} e Change event.
+   * @private
+   */
+  handlePackItem_: function(e) {
+    AppsDevTool.showOverlay($('packItemOverlay'));
+  },
+
   /**
    * Handles the Update Extension Now Button.
    * @param {Event} e Change event.
    * @private
    */
   handleUpdateItemNow_: function(e) {
     chrome.developerPrivate.autoUpdate(function(response) {});
   },
 };
 
 /**
  * Returns the current overlay or null if one does not exist.
  * @return {Element} The overlay element.
  */
 AppsDevTool.getCurrentOverlay = function() {
-  return this.ownerDocument.querySelector('#overlay .page.showing');
+  return document.querySelector('#overlay .page.showing');
 };
 
 /**
- * Shows |node|. If there's another overlay showing, hide it.
+ * Sets the given overlay to show. This hides whatever overlay is currently
+ * showing, if any.
  * @param {HTMLElement} node The overlay page to show. If falsey, all overlays
- *     are hidden.
+ * are hidden.
  */
 AppsDevTool.showOverlay = function(node) {
   var currentlyShowingOverlay = AppsDevTool.getCurrentOverlay();
   if (currentlyShowingOverlay)
     currentlyShowingOverlay.classList.remove('showing');
   if (node)
     node.classList.add('showing');
   overlay.hidden = !node;
   uber.invokeMethodOnParent(node ? 'beginInterceptingEvents' :
                                    'stopInterceptingEvents');
 };