Implement autosizing for <extensionoptions>

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 EXTENSION_OPTIONS_ATTRIBUTE_MAXHEIGHT = 'maxheight';

[not at google - send to devlin, 2014/07/30 17:44:57]

just inline each of these?

+var EXTENSION_OPTIONS_ATTRIBUTE_MAXWIDTH = 'maxwidth';
+var EXTENSION_OPTIONS_ATTRIBUTE_MINHEIGHT = 'minheight';
+var EXTENSION_OPTIONS_ATTRIBUTE_MINWIDTH = 'minwidth';
+
+var EXTENSION_OPTIONS_ATTRIBUTES = [
+  EXTENSION_OPTIONS_ATTRIBUTE_MAXHEIGHT,

[not at google - send to devlin, 2014/07/30 17:44:57]

can this be a map of name --> default value (potentially null)? then you could
use that below rather than the special logic you apply to
autosize/minwidth/minheight.

[ericzeng, 2014/07/30 23:29:26]

Done.

+  EXTENSION_OPTIONS_ATTRIBUTE_MAXWIDTH,
+  EXTENSION_OPTIONS_ATTRIBUTE_MINHEIGHT,
+  EXTENSION_OPTIONS_ATTRIBUTE_MINWIDTH
+];
+
 function ExtensionOptionsInternal(extensionoptionsNode) {
   privates(extensionoptionsNode).internal = this;
   this.extensionoptionsNode = extensionoptionsNode;
   this.viewInstanceId = IdGenerator.GetNextId();
 
   // on* Event handlers.
   this.eventHandlers = {};
   new ExtensionOptionsEvents(this, this.viewInstanceId);
 
   this.setupNodeProperties();
 
   if (this.parseExtensionAttribute())
     this.init();
 };
 
 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();
+  browserPluginNode.setAttribute('autosize', 'on');
+  browserPluginNode.setAttribute('minwidth', 80);
+  browserPluginNode.setAttribute('minheight', 30);
   privates(browserPluginNode).internal = this;
+
+  $Array.forEach(EXTENSION_OPTIONS_ATTRIBUTES, function(attributeName) {
+    // 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));

[not at google - send to devlin, 2014/07/30 17:44:57]

indentation += 2

[ericzeng, 2014/07/30 23:29:26]

Done.

+    }
+  }, this);
+
   return browserPluginNode;
 };
 
 ExtensionOptionsInternal.prototype.createGuest = function() {
   var params = {
     'extensionId': this.extensionId,
   };
   var self = this;
   GuestViewInternal.createGuest(
       'extensionoptions',
       params,
       function(instanceId) {
         if (instanceId == 0) {
           self.initCalled = false;
         } else {
           self.attachWindow(instanceId);
         }
       });
 };
 
 ExtensionOptionsInternal.prototype.dispatchEvent =
     function(extensionOptionsEvent) {
   return this.extensionoptionsNode.dispatchEvent(extensionOptionsEvent);
 };
 
 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 || '';
   newValue = newValue || '';
 
   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() {
   if (this.initCalled)
     return;
 
   this.initCalled = true;
   this.browserPluginNode = this.createBrowserPluginNode();
   var shadowRoot = this.extensionoptionsNode.createShadowRoot();
   shadowRoot.appendChild(this.browserPluginNode);
   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');
     // Only allow extensions to embed their own options page (if it has one).
     if (chrome.runtime.id == extensionId &&
         chrome.runtime.getManifest().hasOwnProperty('options_page')) {
       this.extensionId  = extensionId;
       return true;
     }
   }
@@ skipping 16 matching lines @@
             eventName, self.eventHandlers[propertyName]);
       self.eventHandlers[propertyName] = value;
       if (value)
         extensionoptionsNode.addEventListener(eventName, value);
     },
     enumerable: true
   });
 };
 
 ExtensionOptionsInternal.prototype.setupNodeProperties = function() {
+  $Array.forEach(EXTENSION_OPTIONS_ATTRIBUTES, function(attributeName) {
+    Object.defineProperty(this.extensionoptionsNode, attributeName, {
+      get: function() {
+        if (this.browserPluginNode.hasOwnProperty(attributeName)) {
+          return this.browserPluginNode[attributeName];
+        } else {

[not at google - send to devlin, 2014/07/30 17:44:57]

no else after return.

[ericzeng, 2014/07/30 23:29:26]

Done.

+          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;
     },
     set: function(value) {
       self.extensionoptionsNode.setAttribute('extension', value);

[not at google - send to devlin, 2014/07/30 17:44:57]

why this second case? seems like if 'extension' were in
EXTENSION_OPTIONS_ATTRIBUTES this would be covered.

[ericzeng, 2014/07/30 23:29:26]

If an attribute is in EXTENSION_OPTIONS_ATTRIBUTES the attribute is propagated
to the browser plugin. I was thinking that |extension| shouldn't be included
since the browser plugin doesn't use that attribute. 

     },
     enumerable: true
   });
 };
 
 function registerBrowserPluginElement() {
   var proto = Object.create(HTMLObjectElement.prototype);
 
   proto.createdCallback = function() {
     this.setAttribute('type', 'application/browser-plugin');
@@ skipping 42 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);