Settings page sliding transition

chrome/browser/resources/options/browser_options.js

 // Copyright (c) 2012 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('options', function() {
   var OptionsPage = options.OptionsPage;
   var ArrayDataModel = cr.ui.ArrayDataModel;
   var RepeatingButton = cr.ui.RepeatingButton;
   var HotwordSearchSettingIndicator = options.HotwordSearchSettingIndicator;
 
@@ skipping 653 matching lines @@
      * @private
      */
     animatedSectionHeightChange_: function(section, container, showing) {
       // If the section is already animating, dispatch a synthetic transition
       // end event as the upcoming code will cancel the current one.
       if (section.classList.contains('sliding'))
         cr.dispatchSimpleEvent(section, 'webkitTransitionEnd');
 
       this.addTransitionEndListener_(section);
 
-      section.hidden = false;
       section.style.height = (showing ? 0 : container.offsetHeight) + 'px';
-      section.classList.add('sliding');
+      window.requestAnimationFrame(function() {

[Dan Beam, 2014/07/15 23:04:15]

please handle the case where a user toggles the checkbox fast enough that the
code inside rAF() doesn't have time to run yet (like the old code)

[michaelpg, 2014/07/15 23:18:32]

will do. Does this make sense to you otherwise? I don't grok the renderer + DOM
well enough to prove that this works or that the old way doesn't work, but it
works for me empirically.

[michaelpg, 2014/08/22 22:17:58]

The current implementation has another bug. If you deselect "Show home button",
and then select it right before the home page section finishes its upward slide,
the home page section isn't shown. (If you then deselect "Show home button"
again, the section will suddenly appear at full height and slide back up.)

Here's how this happens:
* uncheck the checkbox:
* * set style.height to container.offsetHeight (15px)
* * schedule the timeout
* timeout fires: set style.height to 0
* animation is ongoing...
* check the checkbox
* * set style.height to 0
* * schedule the timeout
* animation ends! section.hidden = true;
* timeout fires: set style.height to container.offsetHeight (0, because the
section is hidden -- uh-oh!)


I also don't like that we dispatch a fake webkitTransitionEnd event if the
section is currently animating, because that has the jarring effect of popping
the section all the way in or out before animating it again.

+        section.hidden = false;
+        section.classList.add('sliding');
 
-      if (this.sectionHeightChangeTimeout_ !== null)
-        clearTimeout(this.sectionHeightChangeTimeout_);
-
-      this.sectionHeightChangeTimeout_ = setTimeout(function() {
-        section.style.height = (showing ? container.offsetHeight : 0) + 'px';
-        this.sectionHeightChangeTimeout_ = null;
+        window.requestAnimationFrame(function() {
+          section.style.height = (showing ? container.offsetHeight : 0) + 'px';
+        });
       });
     },
 
     /**
      * Shows the given section.
      * @param {HTMLElement} section The section to be shown.
      * @param {HTMLElement} container The container for the section. Must be
      *     inside of |section|.
      * @param {boolean} animate Indicate if the expansion should be animated.
      * @private
@@ skipping 1185 matching lines @@
       $('consumer-management-unenroll').hidden = !isEnrolled;
       ConsumerManagementOverlay.setEnrollmentStatus(isEnrolled);
     };
   }
 
   // Export
   return {
     BrowserOptions: BrowserOptions
   };
 });