Initial implementation of the <extensionoptions> GuestView tag

chrome/renderer/resources/extensions/extension_options.js

+// Copyright (c) 2014 The Chromium Authors. All rights reserved.

[Devlin, 2014/07/15 18:07:35]

no (c)

[ericzeng, 2014/07/15 20:23:55]

Done.

+// 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;
+
+  if (this.parseExtensionAttribute()) {
+    this.browserPluginNode = this.createBrowserPluginNode();
+    var shadowRoot = this.extensionoptionsNode.createShadowRoot();
+    shadowRoot.appendChild(this.browserPluginNode);
+    this.viewInstanceId = IdGenerator.GetNextId();
+    this.createGuest();
+  }
+};
+
+ExtensionOptionsInternal.prototype.attachWindow = function(instanceId) {
+  this.instanceId = instanceId;
+  var params = {
+    'instanceId': this.viewInstanceId,
+  }
+  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,
+  };
+  var self = this;
+  GuestViewInternal.createGuest(
+      'extensionoptions',
+      params,
+      function(instanceId) {
+        self.instanceId = instanceId;
+        self.attachWindow(instanceId);
+      });

[Devlin, 2014/07/15 18:07:35]

I find it cleaner to do .bind(this) and use |this| rather than do the self =
this trick.

[ericzeng, 2014/07/16 01:52:01]

Won't change for consistency with webview and appview

+};
+
+ExtensionOptionsInternal.prototype.handleExtensionOptionsAttributeMutation =
+    function(name, oldValue, newValue) {
+  if (name == 'extension') {

[Devlin, 2014/07/15 18:07:36]

hmm... how about:
if (name != 'extension)
  return;
?

[ericzeng, 2014/07/15 20:23:55]

Done.

+    // We treat null attribute (attribute removed) and the empty string as
+    // one case.
+    oldValue = oldValue || '';
+    newValue = newValue || '';
+
+    if (oldValue === newValue) {

[Devlin, 2014/07/15 18:07:36]

nit: no brackets around single-line ifs.

[ericzeng, 2014/07/15 20:23:55]

Done.

+      return;
+    }
+    this.extensionId = newValue;
+
+    // Create new guest view if one hasn't been created for this element
+    if (!this.instanceId) {

[Devlin, 2014/07/15 18:07:36]

why separate ifs?
if (!this.instanceId && this.parseExtensionAttribute()) {
}

[ericzeng, 2014/07/15 20:23:55]

Done.

+      if (this.parseExtensionAttribute()) {
+        this.browserPluginNode = this.createBrowserPluginNode();

[Devlin, 2014/07/15 18:07:36]

factor so this and line 14-20 share code.

[ericzeng, 2014/07/15 20:23:55]

Done.

+        var shadowRoot = this.extensionoptionsNode.createShadowRoot();
+        shadowRoot.appendChild(this.browserPluginNode);
+        this.viewInstanceId = IdGenerator.GetNextId();
+        this.createGuest();
+      }
+    }
+    // TODO(ericzeng): Implement navigation to another guest view if we want
+    // that functionality

[Devlin, 2014/07/15 18:07:36]

nit: add a period.

[ericzeng, 2014/07/15 20:23:55]

Done.

+  }
+};
+
+ExtensionOptionsInternal.prototype.parseExtensionAttribute = function() {
+  if (this.extensionoptionsNode.hasAttribute('extension')) {
+    var extensionId = this.extensionoptionsNode.getAttribute('extension');
+    // Only allow extensions to embed their own options page

[Devlin, 2014/07/15 18:07:36]

nit: add a period.

[ericzeng, 2014/07/15 20:23:55]

Done.

+    if (chrome.runtime.id == extensionId) {
+      this.extensionId  = extensionId;
+      return true;
+    }
+  }
+  return false;
+};
+
+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.attachedCallback = function() {
+    // Load the plugin immediately.
+    var unused = this.nonExistentAttribute;
+  };
+
+  ExtensionOptionsInternal.BrowserPlugin =
+      DocumentNatives.RegisterElement("extensionoptionsplugin",
+                                       {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() {
+    new ExtensionOptionsInternal(this);
+  };
+
+  proto.attributeChangedCallback = function(name, oldValue, newValue) {
+  var internal = privates(this).internal;
+    if (!internal) {

[Devlin, 2014/07/15 18:07:36]

nit: no brackets.

[ericzeng, 2014/07/15 20:23:55]

Done.

+      return;
+    }
+    internal.handleExtensionOptionsAttributeMutation(name, oldValue, newValue);
+  };
+
+  window.ExtensionOptions =
+     DocumentNatives.RegisterElement('extensionoptions', {prototype: proto});
+
+  // Delete the callbacks so developers cannot call them and produce unexpected

[Devlin, 2014/07/15 18:07:36]

duplicate comment on 108.

[ericzeng, 2014/07/16 01:52:01]

Done.

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