Settings page sliding transition

chrome/browser/resources/options/browser_options.js

Index: chrome/browser/resources/options/browser_options.js
diff --git a/chrome/browser/resources/options/browser_options.js b/chrome/browser/resources/options/browser_options.js
index dfad54a0e068866fcbe4036ba0de35db5def7799..6362355d5a3f09e42b11879c6db3133b754516ee 100644
--- a/chrome/browser/resources/options/browser_options.js
+++ b/chrome/browser/resources/options/browser_options.js
@@ -671,16 +671,14 @@ cr.define('options', function() {
 
       this.addTransitionEndListener_(section);
 
-      section.hidden = false;
       section.style.height = (showing ? 0 : container.offsetHeight) + 'px';
-      section.classList.add('sliding');
-
-      if (this.sectionHeightChangeTimeout_ !== null)
-        clearTimeout(this.sectionHeightChangeTimeout_);
+      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');
 
-      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';
+        });
       });
     },