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..5e062f53b2d88ff0c748a4e705f6def6ad386a71 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,54 @@ cr.define('extensions', function() {
       extensionoptions.extension = extensionId;
       extensionoptions.autosize = 'on';
 
-      // TODO(ericzeng): Resize in a non-jarring way.
+      var headerStyle =

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

You might want to add a meta-comment here, like:

The extensionoptions content should be fitted to the title ... blah blah blah.

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

Done.

+          window.getComputedStyle($('extension-options-overlay-title'));
+      var headerHeight = parseInt(headerStyle.lineHeight) +
+                         parseInt(headerStyle.paddingTop) +
+                         parseInt(headerStyle.paddingBottom);

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

Can you get this from one of the other height properties, like offsetHeight or
whatever (I can't remember the difference between them all). But adding together
lineHeight+padding is a shame, and if you end up adding something like an
imagine into the title I think it'd break. Oh also if the font is larger than
the line height maybe?

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

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

You mention in the comment that you don't actually need this; what happens if
you leave it out?

(It also seems like it'd be safer to do before you fiddle with the
maxheight/minwidth, or am I missing the point?)

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

Oh, I tried removing it and it turns out that it looks better if I leave it
here. If I remove this feature, when you put the <extensionoptions> back into
the frame, you momentarily see the guest view shifted down and to the right so
that the top corner of the guest view positioned in the center of the screen,
before it gets correctly repositioned.

It doesn't really matter where this goes as long as it is before the element is
attached. All this does is block the <extensionoptions> from resizing itself
when sizechanged is fired. 

+
       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 a function of the pythagorean distance between old
+        // and the new size, so that the speed at which the overlay changes is
+        // constant for all sizes.

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

Nit: could you say like "0.25 means the popup resizes at a rate of Xms per 100
pixels", or something meaningful. As an explanation, and so that people know
what happens when you tweak it.

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

Done.

+        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();

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

Heh how did you figure out how to use animate... docs are very hard to find.

The reason I ask: is is possible that onfinish won't be called?

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

This was sufficient documentation for me to implement the feature:
http://updates.html5rocks.com/2014/05/Web-Animations---element-animate-is-now...

I don't know for sure if onfinish will be called, I just assumed that the docs
are right. But really, can we prove anything true objectively?

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

Specifically I was wondering about an onerror or oncancel or something, but it
doesn't look like it:

https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit...

the only event is finish.

(how's THAT for docs).

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

Hm, I can't actually open that link, do you have to have some permission to view
it?

+          $('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 = 'absolute';
+      $('extension-options-overlay-guest').style.left = '10000px';

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

This is to implement that off-screen resize?

You should probably use a fixed position here, not absolute. And much as 10000px
looks fine, I'd be more comfortable if you used the actual width (whatever the
correct value is which keeps it out of the way with scrolling and zooming and
whatnot).

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

Done.

 
+      $('extension-options-overlay-guest').appendChild(extensionoptions);
       $('extension-options-overlay-title').textContent = extensionName;
 
       this.setVisible_(true);