Move settings-section expand/collapse animations to settings-section

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;
-
 /**
  * Calls |readyTest| repeatedly until it returns true, then calls
  * |readyCallback|.
  * @param {function():boolean} readyTest
  * @param {!Function} readyCallback
  */
 function doWhenReady(readyTest, readyCallback) {
   // TODO(dschuyler): Determine whether this hack can be removed.
   // See also: https://github.com/Polymer/polymer/issues/3629
   var intervalId = setInterval(function() {
     if (readyTest()) {
       clearInterval(intervalId);
       readyCallback();
     }
   }, 10);
 }
 
 /**
  * Provides animations to expand and collapse individual sections in a page.
  * Expanded sections take up the full height of the container. At most one
  * section should be expanded at any given time.
  * @polymerBehavior Polymer.MainPageBehavior
  */
 var MainPageBehaviorImpl = {
-  /** @type {?Element} The scrolling container. */
+  /** @type {?HTMLElement} The scrolling container. */
   scroller: null,
 
   /** @override */
   attached: function() {
     if (this.domHost && this.domHost.parentNode.tagName == 'PAPER-HEADER-PANEL')
-      this.scroller = this.domHost.parentNode.$.mainContainer;
+      this.scroller = this.domHost.parentNode./* presubmit */$.mainContainer;

[Dan Beam, 2016/08/05 04:14:38]

scroller

[michaelpg, 2016/08/05 05:16:08]

Done (also in a standalone CL)

     else
       this.scroller = document.body; // Used in unit tests.
   },
 
   /**
    * Hides or unhides the sections not being expanded.
    * @param {string} sectionName The section to keep visible.
    * @param {boolean} hidden Whether the sections should be hidden.
    * @private
    */
@@ skipping 45 matching lines @@
     }
 
     this.startExpandSection_(section);
   },
 
   /**
    * Helper function to set up and start the expand animation.
    * @param {!SettingsSectionElement} section
    */
   startExpandSection_: function(section) {
-    if (section.classList.contains('expanded'))
+    if (!section.canAnimateExpand())
       return;
 
     // Freeze the scroller and save its position.
     this.listScrollTop_ = this.scroller.scrollTop;
 
     var scrollerWidth = this.scroller.clientWidth;
     this.scroller.style.overflow = 'hidden';
     // Adjust width to compensate for scroller.
     var scrollbarWidth = this.scroller.clientWidth - scrollerWidth;
     this.scroller.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
 
     // Freezes the section's height so its card can be removed from the flow.
-    this.freezeSection_(section);
+    section.freezeDimensions();

[Dan Beam, 2016/08/05 04:14:38]

setFrozen(true/false)?

[michaelpg, 2016/08/05 05:16:08]

Done.

 
     // Expand the section's card to fill the parent.
     var animationPromise = this.playExpandSection_(section);
 
     animationPromise.then(function() {
       this.scroller.scrollTop = 0;
       this.toggleOtherSectionsHidden_(section.section, true);
     }.bind(this), function() {
       // Animation was canceled; restore the section.
-      this.unfreezeSection_(section);
+      section.unfreezeDimensions();
     }.bind(this)).then(function() {
       this.scroller.style.overflow = '';
       this.scroller.style.width = '';
     }.bind(this));
   },
 
   /**
    * Animates the card in |section|, collapsing it back into its section.
    * @param {!SettingsSectionElement} section
    */
   collapseSection: function(section) {
     // If the section's card is still expanding, cancel the expand animation.
     if (section.classList.contains('expanding')) {
       if (this.animations['section']) {
         this.cancelAnimation('section');
       } else {
         // The animation must have finished but its promise hasn't finished
         // resolving; try again asynchronously.
         this.async(function() {
           this.collapseSection(section);
         });
       }
       return;
     }
 
-    if (!section.classList.contains('expanded'))
+    if (!section.canAnimateCollapse())
       return;
 
     this.toggleOtherSectionsHidden_(section.section, false);
 
     var scrollerWidth = this.scroller.clientWidth;
     this.scroller.style.overflow = 'hidden';
     // Adjust width to compensate for scroller.
     var scrollbarWidth = this.scroller.clientWidth - scrollerWidth;
     this.scroller.style.width = 'calc(100% - ' + scrollbarWidth + 'px)';
 
     this.playCollapseSection_(section).then(function() {
-      this.unfreezeSection_(section);
+      section.unfreezeDimensions();
       this.scroller.style.overflow = '';
       this.scroller.style.width = '';
       section.classList.remove('collapsing');
     }.bind(this));
   },
 
   /**
-   * Freezes a section's height so its card can be removed from the flow without
-   * affecting the layout of the surrounding sections.
-   * @param {!SettingsSectionElement} section
-   * @private
-   */
-  freezeSection_: function(section) {
-    var card = section.$.card;
-    section.style.height = section.clientHeight + 'px';
-
-    var cardHeight = card.offsetHeight;
-    var cardWidth = card.offsetWidth;
-    // If the section is not displayed yet (e.g., navigated directly to a
-    // sub-page), cardHeight and cardWidth are 0, so do not set the height or
-    // width explicitly.
-    // TODO(michaelpg): Improve this logic when refactoring
-    // settings-animated-pages.
-    if (cardHeight && cardWidth) {
-      // TODO(michaelpg): Temporary hack to store the height the section should
-      // collapse to when it closes.
-      card.origHeight_ = cardHeight;
-
-      card.style.height = cardHeight + 'px';
-      card.style.width = cardWidth + 'px';
-    } else {
-      // Set an invalid value so we don't try to use it later.
-      card.origHeight_ = NaN;
-    }
-
-    // Place the section's card at its current position but removed from the
-    // flow.
-    card.style.top = card.getBoundingClientRect().top + 'px';
-    section.classList.add('frozen');
-  },
-
-  /**
-   * After freezeSection_, restores the section to its normal height.
-   * @param {!SettingsSectionElement} section
-   * @private
-   */
-  unfreezeSection_: function(section) {
-    if (!section.classList.contains('frozen'))
-      return;
-    var card = section.$.card;
-    section.classList.remove('frozen');
-    card.style.top = '';
-    card.style.height = '';
-    card.style.width = '';
-    section.style.height = '';
-  },
-
-  /**
    * Expands the card in |section| to fill the page.
    * @param {!SettingsSectionElement} section
    * @return {!Promise}
    * @private
    */
   playExpandSection_: function(section) {
-    var card = section.$.card;
+    // We must be attached.
+    assert(this.scroller);
 
-    // The card should start at the top of the page.
-    var targetTop = this.scroller.getBoundingClientRect().top;
+    var promise;
+    var animationConfig = section.animateExpand(this.scroller);
+    if (animationConfig) {
+      promise = this.animateElement('section', animationConfig.card,
+          animationConfig.keyframes, animationConfig.options);
+    } else {
+      promise = Promise.resolve();
+    }
 
-    section.classList.add('expanding');
-
-    // Expand the card, using minHeight. (The card must span the container's
-    // client height, so it must be at least 100% in case the card is too short.
-    // If the card is already taller than the container's client height, we
-    // don't want to shrink the card to 100% or the content will overflow, so
-    // we can't use height, and animating height wouldn't look right anyway.)
-    var keyframes = [{
-      top: card.style.top,
-      minHeight: card.style.height,
-      easing: EASING_FUNCTION,
-    }, {
-      top: targetTop + 'px',
-      minHeight: 'calc(100% - ' + targetTop + 'px)',
-    }];
-    var options = /** @type {!KeyframeEffectOptions} */({
-      duration: EXPAND_DURATION
-    });
-    // TODO(michaelpg): Change elevation of sections.
-    var promise;
-    if (keyframes[0].top && keyframes[0].minHeight)
-      promise = this.animateElement('section', card, keyframes, options);
-    else
-      promise = Promise.resolve();
-
+    var finished;
     promise.then(function() {
-      section.classList.add('expanded');
-      card.style.top = '';
+      finished = true;
       this.style.margin = 'auto';
-      section.$.header.hidden = true;
-      section.style.height = '';
     }.bind(this), function() {
       // The animation was canceled; catch the error and continue.
+      finished = false;
     }).then(function() {
-      // Whether finished or canceled, clean up the animation.
-      section.classList.remove('expanding');
-      card.style.height = '';
-      card.style.width = '';
+      section.cleanUpAnimateExpand(finished);
     });
 
     return promise;
   },
 
   /**
    * Collapses the card in |section| back to its normal position.
    * @param {!SettingsSectionElement} section
    * @return {!Promise}
    * @private
    */
   playCollapseSection_: function(section) {
-    var card = section.$.card;
+    // We must be attached.
+    assert(this.scroller);
 
     this.style.margin = '';
-    section.$.header.hidden = false;
 
-    var startingTop = this.scroller.getBoundingClientRect().top;
+    var promise;
+    var animationConfig =
+        section.animateCollapse(this.scroller, this.listScrollTop_);
+    if (animationConfig) {
+      promise = this.animateElement('section', animationConfig.card,
+          animationConfig.keyframes, animationConfig.options);
+    } else {
+      promise = Promise.resolve();
+    }
 
-    var cardHeightStart = card.clientHeight;
-    var cardWidthStart = card.clientWidth;
-
-    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.
-    var headerStyle = getComputedStyle(section.$.header);
-    targetTop += section.$.header.offsetHeight +
-        parseInt(headerStyle.marginBottom, 10) +
-        parseInt(headerStyle.marginTop, 10);
-
-    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
-    });
-
-    card.style.width = cardWidthStart + 'px';
-    var promise = this.animateElement('section', card, keyframes, options);
     promise.then(function() {
-      card.style.width = '';
+      section.cleanUpAnimateCollapse(true);
+    }, function() {
+      section.cleanUpAnimateCollapse(false);
     });
     return promise;
   },
 };
 
 
 /** @polymerBehavior */
 var MainPageBehavior = [
   TransitionBehavior,
   MainPageBehaviorImpl
@@ skipping 73 matching lines @@
         this.$$('[section=' + section + ']'));
   },
 };
 
 
 /** @polymerBehavior */
 var RoutableBehavior = [
   MainPageBehavior,
   RoutableBehaviorImpl
 ];