Handle closing web contents in ExtensionOptionsGuest

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.
@@ skipping 29 matching lines @@
       this.showOverlay_ = showOverlay;
     },
 
     /**
      * 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');

[Fady Samuel, 2014/08/20 14:53:55]

This is weird to me. What if you have more than one extensionoptions on a page?

[not at google - send to devlin, 2014/08/20 14:56:48]

That's a good point. Should we be doing this querySelector-ing on the overlay,
not the document?

[ericzeng, 2014/08/20 17:26:00]

I actually have a div that I should have nested the <extensionoptions> under.

       if (extensionoptions)
         $('extension-options-overlay').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';
 
+      extensionoptions.onclose = function() {
+        this.handleDismiss_();

[Fady Samuel, 2014/08/20 14:53:55]

The intent here is to remove the extensionoptions element when window.close is
called from the guest?

[ericzeng, 2014/08/20 17:26:00]

The higher level intent is to close the entire overlay when window.close is
called from the guest. Imagine if an extension options page in a tab had a
'save' button that saves the settings and then calls window.close() to close
itself. I want the same behavior for the overlay - when the extension options
page wants to close itself, its <extensionoptions> is removed and the overlay
closed. 

+      }.bind(this);
+
       // TODO(ericzeng): Resize in a non-jarring way.
       extensionoptions.onsizechanged = function(evt) {
         $('extension-options-overlay').style.width = evt.width;
         $('extension-options-overlay').style.height = evt.height;
       }.bind(this);
 
       $('extension-options-overlay').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 ? $('extension-options-overlay') : null);
     }
   };
 
   // Export
   return {
     ExtensionOptionsOverlay: ExtensionOptionsOverlay
   };
 });