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 31 matching lines @@
 
     /**
      * Handles a click on the close button.
      * @param {Event} e The click event.
      * @private
      */
     handleDismiss_: function(event) {
       this.setVisible_(false);
       var extensionoptions = document.querySelector('extensionoptions');
       if (extensionoptions)
-        $('extension-options-overlay').removeChild(extensionoptions);
+        $('extension-options-overlay-guest').removeChild(extensionoptions);
     },
 
     /**
      * Associate an extension with the overlay and display it.
      * @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.
+      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);
     },
 
     /**
      * 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
   };
 });