Fixed resizing animation for extension options.

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 88 matching lines @@
       this.setVisible_(true);
 
       var extensionoptions = new window.ExtensionOptions();
       extensionoptions.extension = extensionId;
 
       // The <extensionoptions> content's size needs to be restricted to the
       // bounds of the overlay window. The overlay gives a minWidth and
       // maxHeight, but the maxHeight does not include our header height (title
       // and close button), so we need to subtract that to get the maxHeight
       // for the extension options.
-      var maxHeight = parseInt(overlay.style.maxHeight, 10) -
+      var maxHeight = parseInt(overlayStyle.maxHeight, 10) -
                       overlayHeader.offsetHeight;
       var minWidth = parseInt(overlayStyle.minWidth, 10);
 
       extensionoptions.onclose = function() {
         cr.dispatchSimpleEvent($('overlay'), 'cancelOverlay');
       }.bind(this);
 
       // Track the current animation (used to grow/shrink the overlay content),
       // if any. Preferred size changes can fire more rapidly than the
       // animation speed, and multiple animations running at the same time has
       // undesirable effects.
       var animation = null;
 
       /**
        * Resize the overlay if the <extensionoptions> changes preferred size.
        * @param {{width: number, height: number}} evt
        */
       extensionoptions.onpreferredsizechanged = function(evt) {
+        // |overlayStyle.height| includes the header height, so it needs to be
+        // subtracted to get the true old preferred height.
         var oldWidth = parseInt(overlayStyle.width, 10);
-        var oldHeight = parseInt(overlayStyle.height, 10);
+        var oldHeight =
+            parseInt(overlayStyle.height, 10) - overlayHeader.offsetHeight;
         // The overlay must be slightly larger than the extension options to
         // avoid creating scrollbars.
         // TODO(paulmeyer): This shouldn't be necessary, but the preferred size
         // (coming from Blink) seems to be too small for some zoom levels. The
         // 2-pixel addition should be removed once this problem is investigated
         // and corrected.
         var newWidth = Math.max(evt.width + 2, minWidth);
         var newHeight = Math.min(evt.height + 2, maxHeight);

[not at google - send to devlin, 2015/03/18 20:59:15]

Actually - should we be adding overlayHeader.width/height to these, rather than
any of the other changes? It seems fine that we're animating the overlay from
the old height to the new height. The problem is that the new width/height
doesn't take into account the header.

(and deleting the +2, that weird resize bug is still there!)

[paulmeyer, 2015/03/18 21:41:46]

Yes, adding the header height to the newheight could work too, but it would then
need to be subtracted again later. It's about the same amount of changes, except
I think it might make slightly more sense for the old and new sizes to just be
the guest sizes, since that's what the preferred size is for.

The +2 will be addressed in a separate patch.

 
         // 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 loading = document.documentElement.classList.contains('loading');
         var animationTime = loading ? 0 :
             0.25 * Math.sqrt(Math.pow(newWidth - oldWidth, 2) +
                              Math.pow(newHeight - oldHeight, 2));
 
         if (animation)
           animation.cancel();
 
+        // The header height must be added to the (old and new) preferred
+        // heights to get the full overlay heights.
         animation = overlay.animate([
-          {width: oldWidth + 'px', height: oldHeight + 'px'},
-          {width: newWidth + 'px', height: newHeight + 'px'}
+          {width: oldWidth + 'px',
+           height: (oldHeight + overlayHeader.offsetHeight) + 'px'},
+          {width: newWidth + 'px',
+           height: (newHeight + overlayHeader.offsetHeight) + 'px'}
         ], {
           duration: animationTime,
           delay: 0
         });
 
         animation.onfinish = function(e) {
           animation = null;
 
           // The <extensionoptions> element is ready to place back in the
           // overlay. Make sure that it's sized to take up the full width/height
@@ skipping 35 matching lines @@
           /** @type {HTMLDivElement} */($('extension-options-overlay')) :
           null);
     }
   };
 
   // Export
   return {
     ExtensionOptionsOverlay: ExtensionOptionsOverlay
   };
 });