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');
@@ skipping 116 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) {
+  // When this method is called, the sizechanged event on the external
+  // ExtensionOptions object is fired at the same time. This timeout allows
+  // the embedder WebUI overlay to perform resizing animations before the
+  // guest view resizes.
+  var animationTime = 0.25 * Math.sqrt(

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

Why is there animation code inside the extension_options.js tag implementation?

[ericzeng, 2014/08/19 18:20:13]

I need a way to delay <extensionoptions> from autosizing until the animation is
done. I can calculate the animation delay here, or I could make it so that
<extensionoptions> doesn't really 'auto' size, it would just fire the
sizechanged event with its preferred size and have its container resize it at
its leisure. 

[not at google - send to devlin, 2014/08/19 19:27:18]

Ah I see. It's still unfortunately specific to be doing this (and seems flaky).
Could you provide an API for pinning resize or something? You pin, do the
animation on the browse, then unpin?

+      Math.pow(newWidth - oldWidth, 2) +
+      Math.pow(newHeight - oldHeight, 2));
+  setTimeout(function() {
+    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)
+      }
+    });
+  }.bind(this), animationTime);
 };
 
 ExtensionOptionsInternal.prototype.parseExtensionAttribute = function() {
   if (this.extensionoptionsNode.hasAttribute('extension')) {
     this.extensionId = this.extensionoptionsNode.getAttribute('extension');
     return true;
   }
   return false;
 };
 
@@ skipping 114 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);