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');
 var utils = require('utils');
 
 // Mapping of the autosize attribute names to default values
 var AUTO_SIZE_ATTRIBUTES = {
   'autosize': 'on',
   'maxheight': 600,
   'maxwidth': 800,
   'minheight': 32,
   'minwidth': 80
 };
 
 function ExtensionOptionsInternal(extensionoptionsNode) {
   privates(extensionoptionsNode).internal = this;
   this.extensionoptionsNode = extensionoptionsNode;
   this.viewInstanceId = IdGenerator.GetNextId();
 
+  // Flag that is set when attempting the attach the guest view, but <object>
+  // bindings are not available. When the bindings become available, the
+  // attaching will resume.
+  this.deferredAttachState = 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();
 };
 
 ExtensionOptionsInternal.prototype.attachWindow = function(instanceId) {
   this.instanceId = instanceId;
-  var params = {
+  if (!this.hasBindings()) {
+    this.deferredAttachState = true;
+    return false;
+  }
+
+  var params = this.buildAttachParams();
+  return this.browserPluginNode['-internal-attach'](instanceId, params);
+};
+
+ExtensionOptionsInternal.prototype.buildAttachParams = function() {
+  return {
     '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)
-  }
-  return this.browserPluginNode['-internal-attach'](instanceId, params);
-};
+  };
+}
 
 ExtensionOptionsInternal.prototype.createBrowserPluginNode = function() {
   var browserPluginNode = new ExtensionOptionsInternal.BrowserPlugin();
   privates(browserPluginNode).internal = this;
   return browserPluginNode;
 };
 
 ExtensionOptionsInternal.prototype.createGuest = function() {
   var params = {
     'extensionId': this.extensionId,
@@ skipping 50 matching lines @@
         'height': parseInt(this.minheight || 0)
       },
       'max': {
         'width': parseInt(this.maxwidth || 0),
         'height': parseInt(this.maxheight || 0)
       }
     });
   }
 };
 
+ExtensionOptionsInternal.prototype.handleBrowserPluginAttributeMutation =
+    function(name, oldValue, newValue) {
+  if (name == 'internalbindings' && !oldValue && newValue) {

[not at google - send to devlin, 2014/08/12 19:58:29]

I guess that 'internalbindings' is some magical thing?

[Fady Samuel, 2014/08/12 21:36:39]

internalbindings is a browserplugin attribute that gets added when BrowserPlugin
is created.

+    this.browserPluginNode.removeAttribute('internalbindings');
+
+    if (this.deferredAttachState) {
+      // A setTimeout is necessary for the binding to be initialized properly.
+      window.setTimeout(function() {
+        if (this.hasBindings()) {
+          var params = this.buildAttachParams();
+          this.browserPluginNode['-internal-attach'](this.instanceId, params);
+          this.deferredAttachState = false;
+        } else {
+        }

[not at google - send to devlin, 2014/08/12 19:58:29]

Empty else block?

+      }.bind(this), 0);
+    }
+    return;
+  }
+};
+
+// Returns true if Browser Plugin bindings is available.
+// Bindings are unavailable if <object> is not in the render tree.
+ExtensionOptionsInternal.prototype.hasBindings = function() {
+  return 'function' == typeof this.browserPluginNode['-internal-attach'];

[not at google - send to devlin, 2014/08/12 19:58:29]

No yoda condition preferably.

Though I find this hasBindings() method kind of weird. It's only used in places
where -internal-attach is referenced right afterwards. Either check for
-internal-attach explicitly at the call sites, or have a
"getBrowserPluginBindings" method which returns null if they don't exist (or...
if it's not a function, I suppose).

And *really* this should be a method like initializeBindingsIfReady() which does
all this stuff by itself.

I guess webview is already like this, though, and I don't really want to touch
that.

[ericzeng, 2014/08/12 21:53:33]

I'm not very happy with the whole flow of the script at this point, here's a
refactor with intializeBindingsIfReady(). Although it looks like this will be
moot because of Fady's browser plugin refactor. 

+};
+
 ExtensionOptionsInternal.prototype.init = function() {
   if (this.initCalled)
     return;
 
   this.initCalled = true;
   this.browserPluginNode = this.createBrowserPluginNode();
   var shadowRoot = this.extensionoptionsNode.createShadowRoot();
   shadowRoot.appendChild(this.browserPluginNode);
   this.createGuest();
 };
@@ skipping 80 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 20 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);