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 = {
+

[Dan Beam, 2014/08/18 17:31:32]

nit: remove \n

[ericzeng, 2014/08/18 18:00:25]

Done.

+    /**
+     * The function that shows the given element in the overlay.
+     * @type {function}

[Dan Beam, 2014/08/18 17:31:32]

Function

[ericzeng, 2014/08/18 18:00:25]

Done.

+     * @param {HTMLElement} The element to show in the overlay.
+     * @private
+     */
+    showOverlay_: 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));
+      this.showOverlay_ = showOverlay;

[Dan Beam, 2014/08/18 17:31:32]

nit: sprinkle some \n in here

[ericzeng, 2014/08/18 18:00:25]

Done.

+
+     /**
+      * The element of the full overlay.
+      * @type {HTMLDivElement}
+      * @private
+      */
+      this.overlayDiv_ = $('extension-options-overlay');

[Dan Beam, 2014/08/18 17:31:32]

why not just $('extension-options-overlay') whenever you need a reference?

[ericzeng, 2014/08/18 18:00:25]

I used the extension error overlay as a reference while writing this file. It
used the overlay div field, but looks like I don't really need to have it.

+    },
+
+    /**
+     * 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);
+
+      $('extension-options-overlay-title').textContent = extensionName;
+
+      this.setVisible_(true);
+    },
+
+    /**
+     * Toggles the visibility of the ExtensionOptionsOverlay.
+     * @param {boolean} isVisible Whether the overlay should be visible.
+     * @private
+     */
+    setVisible_: function(isVisible) {
+      this.showOverlay_(isVisible ? this.overlayDiv_ : null);
+    }
+  };
+
+  // Export
+  return {
+    ExtensionOptionsOverlay: ExtensionOptionsOverlay
+  };
+});