Implement autosizing for <extensionoptions>

chrome/renderer/resources/extensions/extension_options.js

Index: chrome/renderer/resources/extensions/extension_options.js
diff --git a/chrome/renderer/resources/extensions/extension_options.js b/chrome/renderer/resources/extensions/extension_options.js
index cc42d7fb4b156bcff285dafd53e8e03a7e999bbb..ebaea9936e2bb5a1f9d98da6318b0063fb2746a8 100644
--- a/chrome/renderer/resources/extensions/extension_options.js
+++ b/chrome/renderer/resources/extensions/extension_options.js
@@ -9,6 +9,14 @@ var GuestViewInternal =
     require('binding').Binding.create('guestViewInternal').generate();
 var IdGenerator = requireNative('id_generator');
 
+var EXTENSION_OPTIONS_ATTRIBUTES = {
+  'autosize': 'on',
+  'maxheight': 600,
+  'maxwidth': 800,
+  'minheight': 32,
+  'minwidth': 80
+};
+
 function ExtensionOptionsInternal(extensionoptionsNode) {
   privates(extensionoptionsNode).internal = this;
   this.extensionoptionsNode = extensionoptionsNode;
@@ -35,6 +43,30 @@ ExtensionOptionsInternal.prototype.attachWindow = function(instanceId) {
 ExtensionOptionsInternal.prototype.createBrowserPluginNode = function() {
   var browserPluginNode = new ExtensionOptionsInternal.BrowserPlugin();
   privates(browserPluginNode).internal = this;
+
+  for (var attributeName in EXTENSION_OPTIONS_ATTRIBUTES) {
+    if (!EXTENSION_OPTIONS_ATTRIBUTES.hasOwnProperty(attributeName)) {
+      continue;
+    }

[not at google - send to devlin, 2014/07/31 00:26:06]

better than using "var .. in" and then checking hasOwnProperty is to use
Object.keys(..).forEach.

better still is using utils.forEach:

https://code.google.com/p/chromium/codesearch#chromium/src/extensions/rendere...

like

var utils = require('utils');
...
utils.forEach(EXTENSION_OPTIONS_ATTRIBUTES, function(name, defaultValue) {
  ...
});

[ericzeng, 2014/07/31 18:29:57]

Done.

+
+    if (this.extensionoptionsNode.hasAttribute(attributeName)) {
+      browserPluginNode.setAttribute(
+          attributeName, this.extensionoptionsNode.getAttribute(attributeName));
+    } else {
+      browserPluginNode.setAttribute(
+          attributeName, EXTENSION_OPTIONS_ATTRIBUTES.attributeName);

[not at google - send to devlin, 2014/07/31 00:26:06]

(you'd need EXTENSION_OPTIONS_ATTRIBUTES[attributeName] here...)

[ericzeng, 2014/07/31 18:29:57]

Done.

+    }
+  }
+
+  $Array.forEach(EXTENSION_OPTIONS_ATTRIBUTES, function(attributeName) {

[not at google - send to devlin, 2014/07/31 00:26:06]

does $Array.forEach work on objects like this?

[ericzeng, 2014/07/31 18:29:57]

I forgot to delete this block of code, the loop above has the same functionality
(and more). But it looks like $Array.forEach does work. Which should I use?

[not at google - send to devlin, 2014/07/31 19:46:47]

forEach doesn't work for objects, and EXTENSION_OPTIONS_ATTRIBUTES is an object.

+    // Only copy attributes that have been assigned values, rather than copying
+    // a series of undefined attributes to BrowserPlugin.
+    if (this.extensionoptionsNode.hasAttribute(attributeName)) {
+      browserPluginNode.setAttribute(
+          attributeName, this.extensionoptionsNode.getAttribute(attributeName));
+    }
+  }, this);
+
   return browserPluginNode;
 };
 
@@ -62,8 +94,6 @@ ExtensionOptionsInternal.prototype.dispatchEvent =
 
 ExtensionOptionsInternal.prototype.handleExtensionOptionsAttributeMutation =
     function(name, oldValue, newValue) {
-  if (name != 'extension')
-    return;
   // We treat null attribute (attribute removed) and the empty string as
   // one case.
   oldValue = oldValue || '';
@@ -71,13 +101,22 @@ ExtensionOptionsInternal.prototype.handleExtensionOptionsAttributeMutation =
 
   if (oldValue === newValue)
     return;
-  this.extensionId = newValue;
 
-  // Create new guest view if one hasn't been created for this element.
-  if (!this.instanceId && this.parseExtensionAttribute())
-    this.init();
-  // TODO(ericzeng): Implement navigation to another guest view if we want
-  // that functionality.
+  if (name == 'extension') {
+    this.extensionId = newValue;
+    // Create new guest view if one hasn't been created for this element.
+    if (!this.instanceId && this.parseExtensionAttribute())
+      this.init();
+    // TODO(ericzeng): Implement navigation to another guest view if we want
+    // that functionality.
+    return;
+  }
+
+  if (this.browserPluginNode.hasOwnProperty(name)) {
+    this.browserPluginNode[name] = newValue;
+  } else {
+    this.browserPluginNode.setAttribute(name, newValue);
+  }
 };
 
 ExtensionOptionsInternal.prototype.init = function() {
@@ -91,6 +130,11 @@ ExtensionOptionsInternal.prototype.init = function() {
   this.createGuest();
 };
 
+ExtensionOptionsInternal.prototype.onSizeChanged = function(width, height) {
+  this.browserPluginNode.style.width = width + 'px';
+  this.browserPluginNode.style.height = height + 'px';
+};
+
 ExtensionOptionsInternal.prototype.parseExtensionAttribute = function() {
   if (this.extensionoptionsNode.hasAttribute('extension')) {
     var extensionId = this.extensionoptionsNode.getAttribute('extension');
@@ -127,8 +171,28 @@ ExtensionOptionsInternal.prototype.setupEventProperty = function(eventName) {
 };
 
 ExtensionOptionsInternal.prototype.setupNodeProperties = function() {
+  $Array.forEach(EXTENSION_OPTIONS_ATTRIBUTES, function(attributeName) {

[not at google - send to devlin, 2014/07/31 00:26:06]

likewise

+    Object.defineProperty(this.extensionoptionsNode, attributeName, {
+      get: function() {
+        if (this.browserPluginNode.hasOwnProperty(attributeName))
+          return this.browserPluginNode[attributeName];
+        return this.browserPluginNode.getAttribute(attributeName);
+      },
+      set: function(value) {
+        if (this.browserPluginNode.hasOwnProperty(attributeName)) {
+          // Give the BrowserPlugin first stab at the attribute so that it can
+          // throw an exception if there is a problem. This attribute will then
+          // be propagated back to the <extensionoptions>.
+          this.browserPluginNode[attributeName] = value;
+        } else {
+          this.browserPluginNode.setAttribute(attributeName, value);
+        }
+      },
+      enumerable: true
+    });
+  }, this);
+
   var self = this;
-  this.extensionId = this.extensionoptionsNode.getAttribute('extension');
   Object.defineProperty(this.extensionoptionsNode, 'extension', {
     get: function() {
       return self.extensionId;