Implement <extensionoptions> deferred attach logic

chrome/renderer/resources/extensions/extension_options.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.
 
 var DocumentNatives = requireNative('document_natives');
 var ExtensionOptionsEvents =
     require('extensionOptionsEvents').ExtensionOptionsEvents;
 var GuestViewInternal =
     require('binding').Binding.create('guestViewInternal').generate();
 var IdGenerator = requireNative('id_generator');
@@ skipping 17 matching lines @@
   this.autosizeDeferred = false;
 
   // on* Event handlers.
   this.eventHandlers = {};
 
   // setupEventProperty is normally called in extension_options_events.js to
   // register events, but the createfailed event is registered here because
   // the event is fired from here instead of through
   // extension_options_events.js.
   this.setupEventProperty('createfailed');
-
   new ExtensionOptionsEvents(this, this.viewInstanceId);
 
   this.setupNodeProperties();
 
-  if (this.parseExtensionAttribute())
-    this.init();
+  this.parseExtensionAttribute();
+
+  // Once the browser plugin has been created, the guest view will be created
+  // and attached. See handleBrowserPluginAttributeMutation().
+  this.browserPluginNode = this.createBrowserPluginNode();
+  var shadowRoot = this.extensionoptionsNode.createShadowRoot();
+  shadowRoot.appendChild(this.browserPluginNode);
 };
 
-ExtensionOptionsInternal.prototype.attachWindow = function(guestInstanceId) {
-  this.guestInstanceId = guestInstanceId;
-  var params = {
-    'autosize': this.autosize,
-    'instanceId': this.viewInstanceId,
-    'maxheight': parseInt(this.maxheight || 0),
-    'maxwidth': parseInt(this.maxwidth || 0),
-    'minheight': parseInt(this.minheight || 0),
-    'minwidth': parseInt(this.minwidth || 0)
-  };
+ExtensionOptionsInternal.prototype.attachWindow = function() {
   return guestViewInternalNatives.AttachGuest(
-      parseInt(this.browserPluginNode.getAttribute('internalinstanceid')),
-      guestInstanceId,
-      params);
+      this.internalInstanceId,
+      this.guestInstanceId,
+      {
+        'autosize': this.autosize,
+        'instanceId': this.viewInstanceId,
+        'maxheight': parseInt(this.maxheight || 0),
+        'maxwidth': parseInt(this.maxwidth || 0),
+        'minheight': parseInt(this.minheight || 0),
+        'minwidth': parseInt(this.minwidth || 0)
+      });
 };
 
 ExtensionOptionsInternal.prototype.createBrowserPluginNode = function() {
   var browserPluginNode = new ExtensionOptionsInternal.BrowserPlugin();
   privates(browserPluginNode).internal = this;
   return browserPluginNode;
 };
 
 ExtensionOptionsInternal.prototype.createGuest = function() {
   var params = {
     'extensionId': this.extensionId,
   };
   GuestViewInternal.createGuest(
       'extensionoptions',
       params,
       function(guestInstanceId) {
         if (guestInstanceId == 0) {
           // Fire a createfailed event here rather than in ExtensionOptionsGuest
           // because the guest will not be created, and cannot fire an event.
           this.initCalled = false;
           var createFailedEvent = new Event('createfailed', { bubbles: true });
           this.dispatchEvent(createFailedEvent);
         } else {
-          this.attachWindow(guestInstanceId);
+          this.guestInstanceId = guestInstanceId;
+          this.attachWindow();
         }
       }.bind(this));
 };
 
 ExtensionOptionsInternal.prototype.dispatchEvent =
     function(extensionOptionsEvent) {
   return this.extensionoptionsNode.dispatchEvent(extensionOptionsEvent);
 };
 
 ExtensionOptionsInternal.prototype.handleExtensionOptionsAttributeMutation =
     function(name, oldValue, newValue) {
   // We treat null attribute (attribute removed) and the empty string as
   // one case.
   oldValue = oldValue || '';
   newValue = newValue || '';
 
   if (oldValue === newValue)
     return;
 
-  if (name == 'extension') {
+  if (name == 'extension' && !oldValue && newValue) {
     this.extensionId = newValue;
-    // Create new guest view if one hasn't been created for this element.
-    if (!this.guestInstanceId && this.parseExtensionAttribute())
-      this.init();
+    // If the browser plugin is not ready then don't create the guest until
+    // it is ready (in handleBrowserPluginAttributeMutation).
+    if (!this.internalInstanceId)
+      return;
+
+    // If a guest view does not exist then create one.
+    if (!this.guestInstanceId) {
+      this.createGuest();
+      return;
+    }
     // TODO(ericzeng): Implement navigation to another guest view if we want
     // that functionality.
   } else if (AUTO_SIZE_ATTRIBUTES.hasOwnProperty(name) > -1) {
     this[name] = newValue;
     this.resetSizeConstraintsIfInvalid();
 
     if (!this.guestInstanceId)
       return;
 
     GuestViewInternal.setAutoSize(this.guestInstanceId, {
       'enableAutoSize': this.extensionoptionsNode.hasAttribute('autosize'),
       'min': {
         'width': parseInt(this.minwidth || 0),
         'height': parseInt(this.minheight || 0)
       },
       'max': {
         'width': parseInt(this.maxwidth || 0),
         'height': parseInt(this.maxheight || 0)
       }
     });
   }
 };
 
-ExtensionOptionsInternal.prototype.init = function() {
-  if (this.initCalled)
-    return;
+ExtensionOptionsInternal.prototype.handleBrowserPluginAttributeMutation =
+    function(name, oldValue, newValue) {
+  if (name == 'internalinstanceid' && !oldValue && !!newValue) {
+    this.internalInstanceId = parseInt(newValue);
+    this.browserPluginNode.removeAttribute('internalinstanceid');
+    if (this.extensionId)
+      this.createGuest();
 
-  this.initCalled = true;
-  this.browserPluginNode = this.createBrowserPluginNode();
-  var shadowRoot = this.extensionoptionsNode.createShadowRoot();
-  shadowRoot.appendChild(this.browserPluginNode);
-  this.createGuest();
+  }
 };
 
 ExtensionOptionsInternal.prototype.onSizeChanged =
     function(newWidth, newHeight, oldWidth, oldHeight) {
   if (this.autosizeDeferred) {
     this.deferredAutoSizeState = {
       newWidth: newWidth,
       newHeight: newHeight,
       oldWidth: oldWidth,
       oldHeight: oldHeight
@@ skipping 134 matching lines @@
 
 function registerBrowserPluginElement() {
   var proto = Object.create(HTMLObjectElement.prototype);
 
   proto.createdCallback = function() {
     this.setAttribute('type', 'application/browser-plugin');
     this.style.width = '100%';
     this.style.height = '100%';
   };
 
+  proto.attributeChangedCallback = function(name, oldValue, newValue) {
+    var internal = privates(this).internal;
+    if (!internal) {
+      return;
+    }
+    internal.handleBrowserPluginAttributeMutation(name, oldValue, newValue);
+  };
+
   proto.attachedCallback = function() {
     // Load the plugin immediately.
     var unused = this.nonExistentAttribute;
   };
 
   ExtensionOptionsInternal.BrowserPlugin =
       DocumentNatives.RegisterElement('extensionoptionsplugin',
-                                       {extends: 'object', prototype: proto});
+                                      {extends: 'object', prototype: proto});
   delete proto.createdCallback;
   delete proto.attachedCallback;
   delete proto.detachedCallback;
   delete proto.attributeChangedCallback;
 }
 
 function registerExtensionOptionsElement() {
   var proto = Object.create(HTMLElement.prototype);
 
   proto.createdCallback = function() {
@@ skipping 36 matching lines @@
 
 var useCapture = true;
 window.addEventListener('readystatechange', function listener(event) {
   if (document.readyState == 'loading')
     return;
 
   registerBrowserPluginElement();
   registerExtensionOptionsElement();
   window.removeEventListener(event.type, listener, useCapture);
 }, useCapture);