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..479937350ddb031f92ec82917a7b8e385eb6bea9 100644
--- a/Source/devtools/front_end/ui/SplitWidget.js
+++ b/Source/devtools/front_end/ui/SplitWidget.js
@@ -508,7 +508,17 @@ WebInspector.SplitWidget.prototype = {
      */
     _animate: function(reverse, callback)
     {
-        var animationTime = 50;
+        /**
+         * @param {number} timeStamp
+         * @this {!WebInspector.SplitWidget}
+         */
+        function animationFrame(timeStamp)
+        {
+            this._mainWidget.doResize();
+            if (player.playState !== "finished")
+                this.contentElement.window().requestAnimationFrame(animationFrame.bind(this));
+        }
+
         this._animationCallback = callback;
 
         var animatedMarginPropertyName;
@@ -517,53 +527,19 @@ WebInspector.SplitWidget.prototype = {
         else
             animatedMarginPropertyName = this._secondIsSidebar ? "margin-bottom" : "margin-top";
 
-        var marginFrom = reverse ? "0" : "-" + WebInspector.zoomManager.dipToCSS(this._sidebarSizeDIP) + "px";
-        var marginTo = reverse ? "-" + WebInspector.zoomManager.dipToCSS(this._sidebarSizeDIP) + "px" : "0";
+        var sidebarSize = this._sidebarSizeDIP !== -1 ? this._sidebarSizeDIP : 0
+        var marginFrom = reverse ? "0" : "-" + WebInspector.zoomManager.dipToCSS(sidebarSize) + "px";
+        var marginTo = reverse ? "-" + WebInspector.zoomManager.dipToCSS(sidebarSize) + "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();

[dgozman, 2015/05/28 11:43:53]

This seems valuable.

-
-        // 3. Configure and run animation
-        this.contentElement.style.setProperty("transition", animatedMarginPropertyName + " " + animationTime + "ms linear");
+        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);
 
-        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();
-            } else {
-                // Complete animation.
-                this._cancelAnimation();
-                if (this._mainWidget)
-                    this._mainWidget.doResize();
-                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);
+        if (this._mainWidget)
+            this.contentElement.window().requestAnimationFrame(animationFrame.bind(this));
     },
 
     _cancelAnimation: function()
@@ -574,14 +550,15 @@ 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;
         }
+
+        if (this._mainWidget)
+            this._mainWidget.doResize();

[dgozman, 2015/05/28 11:43:53]

This causes a lot of extra resizes, since |_cancelAnimation| is called from
multiple places. Same goes for the event.

+
+        this.dispatchEventToListeners(WebInspector.SplitWidget.Events.SidebarSizeChanged, this.sidebarSize());
     },
 
     /**