Implement smoother autosizing of the extension options overlay

chrome/browser/resources/extensions/extension_options_overlay.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.
 
 cr.define('extensions', function() {
   'use strict';
 
   /**
    * The ExtensionOptionsOverlay will show an extension's options page using
    * an <extensionoptions> element.
@@ skipping 46 matching lines @@
      * @param {string} extensionId The id of the extension whose options page
      *     should be displayed in the overlay.
      * @param {string} extensionName The name of the extension, which is used
      *     as the header of the overlay.
      */
     setExtensionAndShowOverlay: function(extensionId, extensionName) {
       var extensionoptions = new ExtensionOptions();
       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);
     },
 
     /**
      * Toggles the visibility of the ExtensionOptionsOverlay.
      * @param {boolean} isVisible Whether the overlay should be visible.
      * @private
      */
     setVisible_: function(isVisible) {
       this.showOverlay_(isVisible ? $('extension-options-overlay') : null);
     }
   };
 
   // Export
   return {
     ExtensionOptionsOverlay: ExtensionOptionsOverlay
   };
 });