Implement smoother autosizing of the extension options overlay

chrome/browser/resources/extensions/extension_options_overlay.js

Index: chrome/browser/resources/extensions/extension_options_overlay.js
diff --git a/chrome/browser/resources/extensions/extension_options_overlay.js b/chrome/browser/resources/extensions/extension_options_overlay.js
index 899098d625ec446767be32d832602b97367fd582..b08ec9b942f4a3f4887208d20dc8d53bff78e2a9 100644
--- a/chrome/browser/resources/extensions/extension_options_overlay.js
+++ b/chrome/browser/resources/extensions/extension_options_overlay.js
@@ -64,14 +64,26 @@ cr.define('extensions', function() {
       extensionoptions.extension = extensionId;
       extensionoptions.autosize = 'on';
 
-      // TODO(ericzeng): Resize in a non-jarring way.
+      // maxheight is the overlay window's max height minus the header's height

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

Nit: end comment in a period. If it fits on 80 characters (not sure whether it's
79 or 80 there). If not, I wouldn't add a period either.

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

Done.

+      extensionoptions.maxheight =
+          parseInt($('extension-options-overlay').style.maxHeight) - 42;

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

42...?

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

Fixed

+      extensionoptions.minwidth = 400;

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

400...?

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

Fixed

+
       extensionoptions.onsizechanged = function(evt) {
-        $('extension-options-overlay').style.width = evt.width;
-        $('extension-options-overlay').style.height = evt.height;
+        var animationTime = 0.25 * Math.sqrt(

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

Maybe you want to explain this formula :)

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

Done.

+            Math.pow(evt.newWidth - evt.oldWidth, 2) +
+            Math.pow(evt.newHeight - evt.oldHeight, 2));
+
+        $('extension-options-overlay').animate([
+          {width: evt.oldWidth + 'px', height: evt.oldHeight + 'px'},
+          {width: evt.newWidth + 'px', height: evt.newHeight + 'px'}
+        ], {
+          duration: animationTime,
+          delay: 0
+        });
       }.bind(this);
 
       $('extension-options-overlay').appendChild(extensionoptions);
-
       $('extension-options-overlay-title').textContent = extensionName;
 
       this.setVisible_(true);