Initial implementation of the <extensionoptions> GuestView tag

chrome/renderer/resources/extensions/extension_options.js

+// Copyright (c) 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 GuestViewInternal =
+    require('binding').Binding.create('guestViewInternal').generate();
+var IdGenerator = requireNative('id_generator');
+
+function ExtensionOptionsInternal(extensionoptionsNode) {
+  privates(extensionoptionsNode).internal = this;
+  this.extensionoptionsNode = extensionoptionsNode;
+
+  this.browserPluginNode = this.createBrowserPluginNode();
+  var shadowRoot = this.extensionoptionsNode.createShadowRoot();
+  shadowRoot.appendChild(this.browserPluginNode);
+  this.viewInstanceId = IdGenerator.GetNextId();
+
+  if (parseExtensionAttribute()) {
+    this.allocateInstanceId();
+  }
+}
+
+ExtensionOptionsInternal.prototype.createBrowserPluginNode = function() {
+  var browserPluginNode = new ExtensionOptionsInternal.BrowserPlugin();
+  privates(browserPluginNode).internal = this;
+  return browserPluginNode;
+}
+
+ExtensionOptionsInternal.prototype.parseExtensionAttribute = function() {
+  if (this.extensionoptionsNode.hasAttribute('extension')) {
+    this.extension = this.extensionoptionsNode.getAttribute('extension');
+    return true;
+  }
+  return false;
+}
+
+ExtensionOptionsInternal.prototype.allocateInstanceId = function() {
+  var params = {
+    'extensionId': this.extension,
+  };
+  var self = this;
+  GuestViewInternal.createGuest(
+      'extensionoptions',
+      params,
+      function(instanceId) {
+        self.instanceId = instanceId;
+      });
+};
+
+function registerBrowserPluginElement() {

[not at google - send to devlin, 2014/07/08 19:17:25]

fady is there some reuse we can do with appview, perhaps pull something into
GuestViewInternal? shame to be repeating ourselves here.

[Fady Samuel, 2014/07/08 19:23:57]

Perhaps. It's not yet clear how much code reuse there will actually be here. 

+  var proto = Object.create(HTMLObjectElement.prototype);
+
+  proto.createdCallback = function() {
+    this.setAttribute('type', 'application/browser-plugin');
+    this.style.width = '100%';
+    this.style.height = '100%';
+  };
+
+  proto.attachedCallback = function() {
+    // Load the plugin immediately.
+    var unused = this.nonExistentAttribute;

[not at google - send to devlin, 2014/07/08 19:17:25]

how does this imply loading the plugin automatically?

[Fady Samuel, 2014/07/08 19:23:57]

I don't actually know. This was added by Dominic Cooney or some other custom
elements engineer.

+  };
+
+  ExtensionOptionsInternal.BrowserPlugin =

[not at google - send to devlin, 2014/07/08 19:17:25]

why do you need to assign this?

[Fady Samuel, 2014/07/08 19:23:57]

So we can easily create this type of BrowserPlugin. This isn't strictly
necessary. As long as is="extensionoptionsplugin" is set, it'll get all the
behaviors we want.

[not at google - send to devlin, 2014/07/08 19:41:16]

I see. yeah that would be better, or we can just save it to a variable within
this file, no need to assign it to ExtensionOptionsInternal.

+      DocumentNatives.RegisterElement("extensionoptionsplugin",
+                                       {extends: 'object', prototype: proto});
+  delete proto.createdCallback;
+  delete proto.attachedCallback;
+}
+
+function registerExtensionOptionsElement() {
+  var proto = Object.create(HTMLElement.prototype);
+
+  proto.createdCallback = function() {
+    new ExtensionOptionsInternal(this);
+  }

[not at google - send to devlin, 2014/07/08 19:41:16]

semicolon

+
+  // Forward proto.foo* method calls to ExtensionOptionsInternal.foo*.
+  for (var i = 0; methods[i]; ++i) {

[not at google - send to devlin, 2014/07/08 19:41:16]

where is |methods| defined?

[Fady Samuel, 2014/07/10 15:32:48]

This code doesn't apply yet. Delete this entire block.

+    var createHandler = function(m) {
+      return function(var_args) {
+        var internal = privates(this).internal;

[not at google - send to devlin, 2014/07/08 19:41:16]

I'd rather we be explicit rather than using "internal" everywhere, and besides
which, keep "privates" calls to within the object to which it's private.

so, add a method like ExtensionOptionsInternal.FromElement or something, which
does the privates(this).internal functionality.

+        return $Function.apply(internal[m], internal, arguments);
+      };
+    };
+    proto[methods[i]] = createHandler(methods[i]);
+  }
+
+  window.ExtensionOptions =
+     DocumentNatives.RegisterElement('extensionoptions', {prototype: proto});

[not at google - send to devlin, 2014/07/08 19:17:25]

why do you need to assign this to window?

[Fady Samuel, 2014/07/08 19:23:57]

This permits the following:

var eo = new ExtensionOptions(); Do we care in this case?

[not at google - send to devlin, 2014/07/08 19:41:16]

ah right. can you do the same thing with
document.createElement('extensionoptions')? I forget the subtleties of custom
elements. I remember there being a case where that doesn't work, and me being
surprised that it didn't.

[Fady Samuel, 2014/07/10 15:32:48]

document.createElement also works.

+
+  // Delete the callbacks so developers cannot call them and produce unexpected
+  // behavior.

[not at google - send to devlin, 2014/07/08 19:17:25]

is this standard custom element practice?

[Fady Samuel, 2014/07/08 19:23:57]

Yes, we should delete all callbacks. See web_view.js

+  delete proto.createdCallback;
+}
+
+var useCapture = true;
+window.addEventListener('readystatechange', function listener(event) {
+  if (document.readyState == 'loading')
+    return;
+
+  registerBrowserPluginElement();
+  registerExtensionOptionsElement();
+  window.removeEventListener(event.type, listener, useCapture);
+}, useCapture);