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

chrome/browser/resources/extensions/extension_options_overlay.js

+// 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 = {
+    /**
+     * 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);
+      var extensionoptions = document.querySelector('extensionoptions');
+      if (extensionoptions)
+        this.overlayDiv_.removeChild(extensionoptions);
+    },
+
+    /**
+     * 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) {
+      var extensionoptions = new ExtensionOptions();
+      extensionoptions.extension = 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
+  };
+});