Devtools: Replace split widget rAF animation with web animation

Source/devtools/front_end/ui/SplitWidget.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  * 1. Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *
@@ skipping 490 matching lines @@
             this.dispatchEventToListeners(WebInspector.SplitWidget.Events.SidebarSizeChanged, this.sidebarSize());
         }
     },
 
     /**
      * @param {boolean} reverse
      * @param {function()=} callback
      */
     _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;
         if (this._isVertical)
             animatedMarginPropertyName = this._secondIsSidebar ? "margin-right" : "margin-left";
         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);
-        }
+        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);
 
-        // 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");
-
-        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()
     {
         this.contentElement.style.removeProperty("margin-top");
         this.contentElement.style.removeProperty("margin-right");
         this.contentElement.style.removeProperty("margin-bottom");
         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());
     },
 
     /**
      * @param {number} sidebarSize
      * @param {boolean=} userAction
      * @return {number}
      */
     _applyConstraints: function(sidebarSize, userAction)
     {
         var totalSize = this._totalSizeDIP();
@@ skipping 295 matching lines @@
         this._showHideSidebarButton.classList.toggle("toggled-hide", !sidebarHidden);
         this._showHideSidebarButton.classList.toggle("top-sidebar-show-hide-button", !this.isVertical() && !this.isSidebarSecond());
         this._showHideSidebarButton.classList.toggle("right-sidebar-show-hide-button", this.isVertical() && this.isSidebarSecond());
         this._showHideSidebarButton.classList.toggle("bottom-sidebar-show-hide-button", !this.isVertical() && this.isSidebarSecond());
         this._showHideSidebarButton.classList.toggle("left-sidebar-show-hide-button", this.isVertical() && !this.isSidebarSecond());
         this._showHideSidebarButton.title = sidebarHidden ? WebInspector.UIString("Show %s", this._showHideSidebarButtonTitle) : WebInspector.UIString("Hide %s", this._showHideSidebarButtonTitle);
     },
 
     __proto__: WebInspector.Widget.prototype
 }