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..12c1714b79ebfc1ea06c148b5e83cd87de32294d 100644
--- a/chrome/browser/resources/extensions/extension_options_overlay.js
+++ b/chrome/browser/resources/extensions/extension_options_overlay.js
@@ -49,7 +49,7 @@ cr.define('extensions', function() {
       this.setVisible_(false);
       var extensionoptions = document.querySelector('extensionoptions');
       if (extensionoptions)
-        $('extension-options-overlay').removeChild(extensionoptions);
+        $('extension-options-overlay-guest').removeChild(extensionoptions);
     },
 
     /**
@@ -64,14 +64,60 @@ cr.define('extensions', function() {
       extensionoptions.extension = extensionId;
       extensionoptions.autosize = 'on';
 
-      // TODO(ericzeng): Resize in a non-jarring way.
+      // The <extensionoptions> content's size needs to be restricted to the
+      // bounds of the overlay window. The overlay gives a min width and
+      // max height, but the maxheight does not include our header height
+      // (title and close button), so we need to subtract that to get the
+      // max height for the extension options.
+      var headerStyle =
+          window.getComputedStyle($('extension-options-overlay-title'));
+      var headerHeight = parseInt(headerStyle.lineHeight) +

[not at google - send to devlin, 2014/08/20 20:08:57]

Remember to fix this; test by making the header style have a huge font size.
Does $('extension-options-overlay-title').offsetHeight work? Or maybe that
should be .scrollHeight. I can never remember.

[ericzeng, 2014/08/20 23:10:16]

offsetHeight works, thanks

+                         parseInt(headerStyle.paddingTop) +
+                         parseInt(headerStyle.paddingBottom);
+      var overlayMaxHeight =
+          parseInt($('extension-options-overlay').style.maxHeight);
+      extensionoptions.maxheight = overlayMaxHeight - headerHeight;
+
+      extensionoptions.minwidth =
+          parseInt(window.getComputedStyle($('extension-options-overlay'))
+              .minWidth);
+

[not at google - send to devlin, 2014/08/20 20:08:57]

Explain why you defer autosize.

[ericzeng, 2014/08/20 23:10:16]

Done, also moved it with the rest of the animation workaround code. 

+      extensionoptions.setDeferAutoSize(true);
+
       extensionoptions.onsizechanged = function(evt) {
-        $('extension-options-overlay').style.width = evt.width;
-        $('extension-options-overlay').style.height = evt.height;
+        var overlayStyle =
+            window.getComputedStyle($('extension-options-overlay'));
+        var oldWidth = parseInt(overlayStyle.width);
+        var oldHeight = parseInt(overlayStyle.height);
+
+        // animationTime is the amount of time in ms that will be used to resize
+        // the overlay. It is calculated by multiplying the pythagorean distance
+        // between old and the new size (in px) with a constant speed of
+        // 0.25 ms/px.
+        var animationTime = 0.25 * Math.sqrt(
+            Math.pow(evt.newWidth - oldWidth, 2) +
+            Math.pow(evt.newHeight - oldHeight, 2));
+
+        var player = $('extension-options-overlay').animate([
+          {width: oldWidth + 'px', height: oldHeight + 'px'},
+          {width: evt.newWidth + 'px', height: evt.newHeight + 'px'}
+        ], {
+          duration: animationTime,
+          delay: 0
+        });
+
+        player.onfinish = function(e) {
+          extensionoptions.resumeDeferredAutoSize();
+          $('extension-options-overlay-guest').style.position = 'static';
+          $('extension-options-overlay-guest').style.left = 'auto';
+        };
       }.bind(this);
 
-      $('extension-options-overlay').appendChild(extensionoptions);
+      $('extension-options-overlay-guest').style.position = 'fixed';
+      $('extension-options-overlay-guest').style.left =
+          window.outerWidth + 'px';
 
+      $('extension-options-overlay-guest').appendChild(extensionoptions);
       $('extension-options-overlay-title').textContent = extensionName;
 
       this.setVisible_(true);