Display extension options in a WebUI overlay instead of in a new tab

chrome/browser/resources/extensions/extension_options_overlay.js

Index: chrome/browser/resources/extensions/extension_options_overlay.js
diff --git a/chrome/browser/resources/extensions/extension_options_overlay.js b/chrome/browser/resources/extensions/extension_options_overlay.js
new file mode 100644
index 0000000000000000000000000000000000000000..8cc768a104d5a2c1a913829c5f44a3e95b71d277
--- /dev/null
+++ b/chrome/browser/resources/extensions/extension_options_overlay.js
@@ -0,0 +1,102 @@
+// Copyright 2014 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.
+
+cr.define('extensions', function() {
+  'use strict';
+
+  /**
+   * The ExtensionOptionsOverlay will show an extension's options page using
+   * an <extensionoptions> element.
+   * @constructor
+   */
+  function ExtensionOptionsOverlay() {}
+
+  cr.addSingletonGetter(ExtensionOptionsOverlay);
+
+  ExtensionOptionsOverlay.prototype = {
+    /**
+     * The extension whose options are being displayed
+     * @type {string}
+     * @private
+     */
+    extensionId_: undefined,
+
+    /**
+     * Initialize the page.
+     * @param {function(HTMLDivElement)} showOverlay The function to show or
+     *     hide the ExtensionOptionsOverlay; this should take a single parameter
+     *     which is either the overlay Div if the overlay should be displayed,
+     *     or null if the overlay should be hidden.
+     */
+    initializePage: function(showOverlay) {
+      var overlay = $('overlay');
+      cr.ui.overlay.setupOverlay(overlay);
+      cr.ui.overlay.globalInitialization();
+      overlay.addEventListener('cancelOverlay', this.handleDismiss_.bind(this));
+
+     /**
+      * The element of the full overlay.
+      * @type {HTMLDivElement}
+      * @private
+      */
+      this.overlayDiv_ = $('extension-options-overlay');
+
+      /**
+       * The function to show or hide the ExtensionOptionsOverlay.
+       * @type {function}
+       * @param {boolean} isVisible Whether the overlay should be visible.
+       */
+      this.setVisible = function(isVisible) {
+        showOverlay(isVisible ? this.overlayDiv_ : null);
+      };
+    },
+
+    /**
+     * Handles a click on the close button.
+     * @param {Event} e The click event.
+     * @private
+     */
+    handleDismiss_: function(event) {
+      this.setVisible(false);
+      if (!this.extensionId_)

[not at google - send to devlin, 2014/08/14 18:19:30]

Actually: do you need |extensionId_| at all? It seems like you could replace
this check by seeing if the querySelector() call found anything.

The only other reference is in setExtensionAndShowOverlay, but that's where it's
passed in.

[ericzeng, 2014/08/14 18:41:17]

Yeah it doesn't need to be there. I only need it to create the
<extensionoptions> element. 

+        return;
+      var extensionoptions = document.querySelector('extensionoptions');
+      this.overlayDiv_.removeChild(extensionoptions);
+      this.extensionId_ = undefined;
+    },
+
+    /**
+     * Associate an extension with the overlay and display it.
+     * @param {string} extensionId The id of the extension whose options page
+     *     should be displayed in the overlay.
+     * @param {string} extensionName The name of the extension, which is used
+     *     as the header of the overlay.
+     */
+    setExtensionAndShowOverlay: function(extensionId, extensionName) {
+      this.extensionId_ = extensionId;
+      var extensionoptions = new ExtensionOptions();
+      extensionoptions.extension = this.extensionId_;
+      extensionoptions.autosize = 'on';
+
+      // TODO(ericzeng): Resize in a non-jarring way.
+      extensionoptions.onsizechanged = function(evt) {
+        this.overlayDiv_.style.width = evt.width;
+        this.overlayDiv_.style.height = evt.height;
+      }.bind(this);
+
+      this.overlayDiv_.appendChild(extensionoptions);
+
+      document.querySelector(
+          '#extension-options-overlay .extension-options-overlay-title')
+          .textContent = extensionName;
+
+      this.setVisible(true);
+    }
+  };
+
+  // Export
+  return {
+    ExtensionOptionsOverlay: ExtensionOptionsOverlay
+  };
+});