Devtools: Replace split widget rAF animation with web animation

Source/devtools/front_end/ui/SplitWidget.js

Index: Source/devtools/front_end/ui/SplitWidget.js
diff --git a/Source/devtools/front_end/ui/SplitWidget.js b/Source/devtools/front_end/ui/SplitWidget.js
index 592e2a1227e47dd1c39aa0fc2c032daf8c9cc28a..11e5e2f0f981ba8066232c7ab7d3fd53453676e4 100644
--- a/Source/devtools/front_end/ui/SplitWidget.js
+++ b/Source/devtools/front_end/ui/SplitWidget.js
@@ -508,7 +508,6 @@ WebInspector.SplitWidget.prototype = {
      */
     _animate: function(reverse, callback)
     {
-        var animationTime = 50;
         this._animationCallback = callback;
 
         var animatedMarginPropertyName;
@@ -520,50 +519,12 @@ WebInspector.SplitWidget.prototype = {
         var marginFrom = reverse ? "0" : "-" + WebInspector.zoomManager.dipToCSS(this._sidebarSizeDIP) + "px";
         var marginTo = reverse ? "-" + WebInspector.zoomManager.dipToCSS(this._sidebarSizeDIP) + "px" : "0";
 
-        // This order of things is important.
-        // 1. Resize main element early and force layout.
-        this.contentElement.style.setProperty(animatedMarginPropertyName, marginFrom);
-        if (!reverse) {
-            suppressUnused(this._mainElement.offsetWidth);
-            suppressUnused(this._sidebarElement.offsetWidth);
-        }
-
-        // 2. Issue onresize to the sidebar element, its size won't change.
-        if (!reverse)
-            this._sidebarWidget.doResize();
-
-        // 3. Configure and run animation
-        this.contentElement.style.setProperty("transition", animatedMarginPropertyName + " " + animationTime + "ms linear");
-
-        var boundAnimationFrame;
-        var startTime;
-        /**
-         * @this {WebInspector.SplitWidget}
-         */
-        function animationFrame()
-        {
-            delete this._animationFrameHandle;
-
-            if (!startTime) {
-                // Kick animation on first frame.
-                this.contentElement.style.setProperty(animatedMarginPropertyName, marginTo);
-                startTime = window.performance.now();
-            } else if (window.performance.now() < startTime + animationTime) {
-                // Process regular animation frame.
-                if (this._mainWidget)
-                    this._mainWidget.doResize();

[pfeldman, 2015/05/26 06:01:14]

It might be important to make this call.

[samli, 2015/05/26 07:22:43]

Done.

-            } else {
-                // Complete animation.
-                this._cancelAnimation();
-                if (this._mainWidget)
-                    this._mainWidget.doResize();

[pfeldman, 2015/05/26 06:01:14]

It is definitely important to make this call.

[samli, 2015/05/26 07:22:43]

In some cases, this is handled in the callback(). Even without any of these
calls, the viewport resized correctly when the animation finished.
Not all animate calls have a callback though.

-                this.dispatchEventToListeners(WebInspector.SplitWidget.Events.SidebarSizeChanged, this.sidebarSize());
-                return;
-            }
-            this._animationFrameHandle = this.contentElement.window().requestAnimationFrame(boundAnimationFrame);
-        }
-        boundAnimationFrame = animationFrame.bind(this);
-        this._animationFrameHandle = this.contentElement.window().requestAnimationFrame(boundAnimationFrame);
+        this.contentElement.style.setProperty(animatedMarginPropertyName, marginTo);
+        var keyframes = [{}, {}];
+        keyframes[0][animatedMarginPropertyName] = marginFrom;
+        keyframes[1][animatedMarginPropertyName] = marginTo;
+        var player = this.contentElement.animate(keyframes, { duration: 150, easing: "cubic-bezier(0, 0, 0.2, 1)" });
+        player.onfinish = this._cancelAnimation.bind(this);
     },
 
     _cancelAnimation: function()
@@ -574,10 +535,6 @@ WebInspector.SplitWidget.prototype = {
         this.contentElement.style.removeProperty("margin-left");
         this.contentElement.style.removeProperty("transition");
 
-        if (this._animationFrameHandle) {
-            this.contentElement.window().cancelAnimationFrame(this._animationFrameHandle);
-            delete this._animationFrameHandle;
-        }
         if (this._animationCallback) {
             this._animationCallback();
             delete this._animationCallback;