Implement smoother autosizing of the extension options overlay

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': window.innerHeight,
   'maxwidth': window.innerWidth,
   'minheight': 32,
   'minwidth': 32
 };
 
 function ExtensionOptionsInternal(extensionoptionsNode) {
   privates(extensionoptionsNode).internal = this;
   this.extensionoptionsNode = extensionoptionsNode;
   this.viewInstanceId = IdGenerator.GetNextId();
 
+  this.autosizeDeferred = 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);
@@ skipping 90 matching lines @@
   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.onSizeChanged =
+    function(newWidth, newHeight, oldWidth, oldHeight) {
+  if (this.autosizeDeferred) {
+    this.deferredAutoSizeState = {
+      newWidth: newWidth,
+      newHeight: newHeight,
+      oldWidth: oldWidth,
+      oldHeight: oldHeight
+    };
+  } else {
+    this.resize(newWidth, newHeight, oldWidth, oldHeight);
+  }
 };
 
 ExtensionOptionsInternal.prototype.parseExtensionAttribute = function() {
   if (this.extensionoptionsNode.hasAttribute('extension')) {
     this.extensionId = this.extensionoptionsNode.getAttribute('extension');
     return true;
   }
   return false;
 };
 
+ExtensionOptionsInternal.prototype.resize =
+    function(newWidth, newHeight, oldWidth, oldHeight) {
+  this.browserPluginNode.style.width = newWidth + 'px';
+  this.browserPluginNode.style.height = newHeight + 'px';
+
+  // Do not allow the options page's dimensions to shrink so that the options
+  // page has a consistent UI. If the new size is larger than the minimum,
+  // make that the new minimum size.
+  if (newWidth > this.minwidth)
+    this.minwidth = newWidth;
+  if (newHeight > this.minheight)
+    this.minheight = newHeight;
+
+  GuestViewInternal.setAutoSize(this.instanceId, {
+    'enableAutoSize': this.extensionoptionsNode.hasAttribute('autosize'),
+    'min': {
+      'width': parseInt(this.minwidth || 0),
+      'height': parseInt(this.minheight || 0)
+    },
+    'max': {
+      'width': parseInt(this.maxwidth || 0),
+      'height': parseInt(this.maxheight || 0)
+    }
+  });
+};
+
 // Adds an 'on<event>' property on the view, which can be used to set/unset
 // an event handler.
 ExtensionOptionsInternal.prototype.setupEventProperty = function(eventName) {
   var propertyName = 'on' + eventName.toLowerCase();
   var extensionoptionsNode = this.extensionoptionsNode;
   Object.defineProperty(extensionoptionsNode, propertyName, {
     get: function() {
       return this.eventHandlers[propertyName];
     }.bind(this),
     set: function(value) {
@@ skipping 45 matching lines @@
 
 ExtensionOptionsInternal.prototype.resetSizeConstraintsIfInvalid = function () {
   if (this.minheight > this.maxheight || this.minheight < 0) {
     this.minheight = AUTO_SIZE_ATTRIBUTES.minheight;
     this.maxheight = AUTO_SIZE_ATTRIBUTES.maxheight;
   }
   if (this.minwidth > this.maxwidth || this.minwidth < 0) {
     this.minwidth = AUTO_SIZE_ATTRIBUTES.minwidth;
     this.maxwidth = AUTO_SIZE_ATTRIBUTES.maxwidth;
   }
-}
+};
+
+/**
+ * Toggles whether autosizing should be performed immediately or not.
+ * If set to true, sizechanged events will provide the preferred dimensions
+ * of the element, but will not resize it until resumeDeferredAutoSize is
+ * called. If set to false (the default setting), resizing will occur
+ * automatically.
+ */
+ExtensionOptionsInternal.prototype.shouldDeferAutoSize = function(value) {
+  if (!value)
+    resumeDeferredAutoSize();
+  this.autosizeDeferred = value;
+};
+
+/**
+ * If the shouldDeferAutoSize setting is true, resize the element to the most
+ * recent preferred dimensions provided by the browser plugin autosize.
+ */
+ExtensionOptionsInternal.prototype.resumeDeferredAutoSize = function() {

[not at google - send to devlin, 2014/08/20 02:07:15]

You could combine these into a method like setAutosize(true|false)?

Which makes me think: is this the same thing as webview's autosize property?
Just curious.

[ericzeng, 2014/08/20 02:23:30]

shouldDeferAutoSize(true|false) does what you describe, resumeDeferredAutoSize
just allows the most recent autosize dimensions be applied to the element. I
should probably write a clearer comment and give it a better name. 

I think webview's autosize is just a switch for all autosizing. If this switch
is flipped the autosize code is still being run, but I don't allow the DOM
elements to change in size, I just get the preferred size from the browser
plugin.

[not at google - send to devlin, 2014/08/20 02:29:34]

Ah.

In that case, s/shouldDeferAutosize/setDeferAutosize/.

and yes better comments would be nice.

[ericzeng, 2014/08/20 18:44:07]

Done.

+  if (this.autosizeDeferred) {
+    this.resize(this.deferredAutoSizeState.newWidth,
+                this.deferredAutoSizeState.newHeight,
+                this.deferredAutoSizeState.oldWidth,
+                this.deferredAutoSizeState.oldHeight);
+  }
+};
 
 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%';
   };
 
@@ skipping 18 matching lines @@
     new ExtensionOptionsInternal(this);
   };
 
   proto.attributeChangedCallback = function(name, oldValue, newValue) {
     var internal = privates(this).internal;
     if (!internal)
       return;
     internal.handleExtensionOptionsAttributeMutation(name, oldValue, newValue);
   };
 
+  var methods = [
+    'shouldDeferAutoSize',
+    'resumeDeferredAutoSize'
+  ];
+
+  // Forward proto.foo* method calls to ExtensionOptionsInternal.foo*.
+  for (var i = 0; methods[i]; ++i) {
+    var createHandler = function(m) {
+      return function(var_args) {
+        var internal = privates(this).internal;
+        return $Function.apply(internal[m], internal, arguments);
+      };
+    };
+    proto[methods[i]] = createHandler(methods[i]);
+  }
+
   window.ExtensionOptions =
       DocumentNatives.RegisterElement('extensionoptions', {prototype: proto});
 
   // Delete the callbacks so developers cannot call them and produce unexpected
   // 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);