MD Settings: Fix minor vertical jumps in animations

chrome/browser/resources/settings/settings_page/main_page_behavior.js

 // Copyright 2016 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.
 
 // Fast out, slow in.
 var EASING_FUNCTION = 'cubic-bezier(0.4, 0, 0.2, 1)';
 var EXPAND_DURATION = 350;
 
 /**
  * Provides animations to expand and collapse individual sections in a page.
@@ skipping 246 matching lines @@
   },
 
   /**
    * Collapses the card in |section| back to its normal position.
    * @param {!SettingsSectionElement} section
    * @return {!Promise}
    * @private
    */
   playCollapseSection_: function(section) {
     var card = section.$.card;
-    var cardStyle = getComputedStyle(card);
 
     this.style.margin = '';
     section.$.header.hidden = false;
 
     var startingTop = this.parentElement.getBoundingClientRect().top;
 
     var cardHeightStart = card.clientHeight;
 
     section.classList.add('collapsing');
     section.classList.remove('expanding', 'expanded');
 
     // If we navigated here directly, we don't know the original height of the
     // section, so we skip the animation.
     // TODO(michaelpg): remove this condition once sliding is implemented.
     if (isNaN(card.origHeight_))
       return Promise.resolve();
 
     // Restore the section to its proper height to make room for the card.
     section.style.height = section.clientHeight + card.origHeight_ + 'px';
 
     // TODO(michaelpg): this should be in collapseSection(), but we need to wait
     // until the full page height is available (setting the section height).
     this.scroller.scrollTop = this.listScrollTop_;
 
     // The card is unpositioned, so use its position as the ending state,
     // but account for scroll.
     var targetTop = card.getBoundingClientRect().top - this.scroller.scrollTop;
 
+    // Account for the section header.
+    targetTop += section.$.header.offsetHeight +
+        parseInt(getComputedStyle(section.$.header).marginBottom) +

[dpapad, 2016/05/09 23:35:53]

Let's pass 10 as the 2nd parameter of parseInt(), as suggested by the
documentation at
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Obje...,
(see "Always specify this parameter" bold text).

[michaelpg, 2016/05/10 00:36:18]

Done.

+        parseInt(getComputedStyle(section.$.header).marginTop);

[dpapad, 2016/05/09 23:35:53]

Guessing that getComputedStyles() calls are simply reading cached values (it is
not entirely clear from documentation)? If not, let's call it only once instead.

[michaelpg, 2016/05/10 00:36:18]

Done (i thought so but i can't verify it)

+
     var keyframes = [{
       top: startingTop + 'px',
       minHeight: cardHeightStart + 'px',
       easing: EASING_FUNCTION,
     }, {
       top: targetTop + 'px',
       minHeight: card.origHeight_ + 'px',
     }];
     var options = /** @type {!KeyframeEffectOptions} */({
       duration: EXPAND_DURATION
     });
     var promise = this.animateElement('section', card, keyframes, options);
     return promise;

[dpapad, 2016/05/09 23:35:53]

Nit: Inline unnecessary local var.

return this.animateElement('section', card, keyframes, options);

[michaelpg, 2016/05/10 00:36:18]

Done.

   },
 };
 
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   TransitionBehavior,
   MainPageBehaviorImpl
 ];
 
@@ skipping 73 matching lines @@
         this.$$('[section=' + section + ']'));
   },
 };
 
 
 /** @polymerBehavior */
 var RoutableBehavior = [
   MainPageBehavior,
   RoutableBehaviorImpl
 ];