Fixed resizing animation for extension options.

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 593407387c92883cf9af1c2aded9f72705745f02..c48f4172afe5b8891664bda221ac9aa078dcffd5 100644
--- a/chrome/browser/resources/extensions/extension_options_overlay.js
+++ b/chrome/browser/resources/extensions/extension_options_overlay.js
@@ -106,7 +106,7 @@ cr.define('extensions', function() {
       // 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);
 
@@ -125,16 +125,19 @@ cr.define('extensions', function() {
        * @param {{width: number, height: number}} evt
        */
       extensionoptions.onpreferredsizechanged = function(evt) {
-        var oldWidth = parseInt(overlayStyle.width, 10);
-        var oldHeight = parseInt(overlayStyle.height, 10);
+        // |overlayStyle.height| includes the header height, so it needs to be
+        // subtracted to get the true old preferred height.
+        var oldGuestWidth = parseInt(overlayStyle.width, 10);
+        var oldGuestHeight =
+            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);
+        var newGuestWidth = Math.max(evt.width + 2, minWidth);
+        var newGuestHeight = Math.min(evt.height + 2, maxHeight);
 
         // animationTime is the amount of time in ms that will be used to resize
         // the overlay. It is calculated by multiplying the pythagorean distance
@@ -142,15 +145,19 @@ cr.define('extensions', function() {
         // 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));
+            0.25 * Math.sqrt(Math.pow(newGuestWidth - oldGuestWidth, 2) +
+                             Math.pow(newGuestHeight - oldGuestHeight, 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: oldGuestWidth + 'px',

[not at google - send to devlin, 2015/03/18 21:47:39]

I still think it's weird that the overlay is being animated using the
overlayGuest's dimensions (as we chatted about) rather than its own. I'd rather
rephrase this in terms of the overlay's dimensions i.e. use
oldOverlayWidth/oldOverlayHeight, and the only slightly surprising behavior
(requiring a comment) would be on line 174 where you e.g. subtract
overlayHeader.offsetHeight from newOverlayHeight.

[paulmeyer, 2015/03/18 22:18:25]

Okay, done. The other place I thought a comment was warranted is when the header
height is added to the new overlay height.

+           height: (oldGuestHeight + overlayHeader.offsetHeight) + 'px'},
+          {width: newGuestWidth + 'px',
+           height: (newGuestHeight + overlayHeader.offsetHeight) + 'px'}
         ], {
           duration: animationTime,
           delay: 0
@@ -164,8 +171,8 @@ cr.define('extensions', function() {
           // of the overlay.
           overlayGuest.style.position = '';
           overlayGuest.style.left = '';
-          overlayGuest.style.width = newWidth + 'px';
-          overlayGuest.style.height = newHeight + 'px';
+          overlayGuest.style.width = newGuestWidth + 'px';
+          overlayGuest.style.height = newGuestHeight + 'px';
 
           if (shownCallback) {
             shownCallback();