Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(37)

Side by Side Diff: Source/devtools/front_end/ui/SplitWidget.js

Issue 1156953002: Devtools: Replace split widget rAF animation with web animation (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2012 Google Inc. All rights reserved. 2 * Copyright (C) 2012 Google Inc. All rights reserved.
3 * 3 *
4 * Redistribution and use in source and binary forms, with or without 4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are 5 * modification, are permitted provided that the following conditions are
6 * met: 6 * met:
7 * 7 *
8 * 1. Redistributions of source code must retain the above copyright 8 * 1. Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer. 9 * notice, this list of conditions and the following disclaimer.
10 * 10 *
(...skipping 490 matching lines...) Expand 10 before | Expand all | Expand 10 after
501 this.dispatchEventToListeners(WebInspector.SplitWidget.Events.Sideba rSizeChanged, this.sidebarSize()); 501 this.dispatchEventToListeners(WebInspector.SplitWidget.Events.Sideba rSizeChanged, this.sidebarSize());
502 } 502 }
503 }, 503 },
504 504
505 /** 505 /**
506 * @param {boolean} reverse 506 * @param {boolean} reverse
507 * @param {function()=} callback 507 * @param {function()=} callback
508 */ 508 */
509 _animate: function(reverse, callback) 509 _animate: function(reverse, callback)
510 { 510 {
511 var animationTime = 50; 511 /**
512 * @param {number} timeStamp
513 * @this {!WebInspector.SplitWidget}
514 */
515 function animationFrame(timeStamp)
516 {
517 if (player.playState !== "finished") {
518 this._mainWidget.doResize();
519 this.contentElement.window().requestAnimationFrame(animationFram e.bind(this));
520 }
521 }
522
523 /**
524 * @this {!WebInspector.SplitWidget}
525 */
526 function animationFinished()
527 {
528 this._cancelAnimation();
529 if (this._mainWidget)
530 this._mainWidget.doResize();
531 this.dispatchEventToListeners(WebInspector.SplitWidget.Events.Sideba rSizeChanged, this.sidebarSize());
532 }
533
512 this._animationCallback = callback; 534 this._animationCallback = callback;
513 535
514 var animatedMarginPropertyName; 536 var animatedMarginPropertyName;
515 if (this._isVertical) 537 if (this._isVertical)
516 animatedMarginPropertyName = this._secondIsSidebar ? "margin-right" : "margin-left"; 538 animatedMarginPropertyName = this._secondIsSidebar ? "margin-right" : "margin-left";
517 else 539 else
518 animatedMarginPropertyName = this._secondIsSidebar ? "margin-bottom" : "margin-top"; 540 animatedMarginPropertyName = this._secondIsSidebar ? "margin-bottom" : "margin-top";
519 541
520 var marginFrom = reverse ? "0" : "-" + WebInspector.zoomManager.dipToCSS (this._sidebarSizeDIP) + "px"; 542 var sidebarSize = this._sidebarSizeDIP !== -1 ? this._sidebarSizeDIP : 0
521 var marginTo = reverse ? "-" + WebInspector.zoomManager.dipToCSS(this._s idebarSizeDIP) + "px" : "0"; 543 var marginFrom = reverse ? "0" : "-" + WebInspector.zoomManager.dipToCSS (sidebarSize) + "px";
544 var marginTo = reverse ? "-" + WebInspector.zoomManager.dipToCSS(sidebar Size) + "px" : "0";
522 545
523 // This order of things is important. 546 this.contentElement.style.setProperty(animatedMarginPropertyName, margin To);
524 // 1. Resize main element early and force layout.
525 this.contentElement.style.setProperty(animatedMarginPropertyName, margin From);
526 if (!reverse) {
527 suppressUnused(this._mainElement.offsetWidth);
528 suppressUnused(this._sidebarElement.offsetWidth);
529 }
530
531 // 2. Issue onresize to the sidebar element, its size won't change.
532 if (!reverse) 547 if (!reverse)
533 this._sidebarWidget.doResize(); 548 this._sidebarWidget.doResize();
549 var keyframes = [{}, {}];
550 keyframes[0][animatedMarginPropertyName] = marginFrom;
551 keyframes[1][animatedMarginPropertyName] = marginTo;
552 var player = this.contentElement.animate(keyframes, { duration: 150, eas ing: "cubic-bezier(0, 0, 0.2, 1)" });
553 player.onfinish = animationFinished.bind(this);
534 554
535 // 3. Configure and run animation 555 if (this._mainWidget)
536 this.contentElement.style.setProperty("transition", animatedMarginProper tyName + " " + animationTime + "ms linear"); 556 this.contentElement.window().requestAnimationFrame(animationFrame.bi nd(this));
537
538 var boundAnimationFrame;
539 var startTime;
540 /**
541 * @this {WebInspector.SplitWidget}
542 */
543 function animationFrame()
544 {
545 delete this._animationFrameHandle;
546
547 if (!startTime) {
548 // Kick animation on first frame.
549 this.contentElement.style.setProperty(animatedMarginPropertyName , marginTo);
550 startTime = window.performance.now();
551 } else if (window.performance.now() < startTime + animationTime) {
552 // Process regular animation frame.
553 if (this._mainWidget)
554 this._mainWidget.doResize();
555 } else {
556 // Complete animation.
557 this._cancelAnimation();
558 if (this._mainWidget)
559 this._mainWidget.doResize();
560 this.dispatchEventToListeners(WebInspector.SplitWidget.Events.Si debarSizeChanged, this.sidebarSize());
561 return;
562 }
563 this._animationFrameHandle = this.contentElement.window().requestAni mationFrame(boundAnimationFrame);
564 }
565 boundAnimationFrame = animationFrame.bind(this);
566 this._animationFrameHandle = this.contentElement.window().requestAnimati onFrame(boundAnimationFrame);
567 }, 557 },
568 558
569 _cancelAnimation: function() 559 _cancelAnimation: function()
570 { 560 {
571 this.contentElement.style.removeProperty("margin-top"); 561 this.contentElement.style.removeProperty("margin-top");
572 this.contentElement.style.removeProperty("margin-right"); 562 this.contentElement.style.removeProperty("margin-right");
573 this.contentElement.style.removeProperty("margin-bottom"); 563 this.contentElement.style.removeProperty("margin-bottom");
574 this.contentElement.style.removeProperty("margin-left"); 564 this.contentElement.style.removeProperty("margin-left");
575 this.contentElement.style.removeProperty("transition"); 565 this.contentElement.style.removeProperty("transition");
576 566
577 if (this._animationFrameHandle) {
578 this.contentElement.window().cancelAnimationFrame(this._animationFra meHandle);
579 delete this._animationFrameHandle;
580 }
581 if (this._animationCallback) { 567 if (this._animationCallback) {
582 this._animationCallback(); 568 this._animationCallback();
583 delete this._animationCallback; 569 delete this._animationCallback;
584 } 570 }
585 }, 571 },
586 572
587 /** 573 /**
588 * @param {number} sidebarSize 574 * @param {number} sidebarSize
589 * @param {boolean=} userAction 575 * @param {boolean=} userAction
590 * @return {number} 576 * @return {number}
(...skipping 299 matching lines...) Expand 10 before | Expand all | Expand 10 after
890 this._showHideSidebarButton.classList.toggle("toggled-hide", !sidebarHid den); 876 this._showHideSidebarButton.classList.toggle("toggled-hide", !sidebarHid den);
891 this._showHideSidebarButton.classList.toggle("top-sidebar-show-hide-butt on", !this.isVertical() && !this.isSidebarSecond()); 877 this._showHideSidebarButton.classList.toggle("top-sidebar-show-hide-butt on", !this.isVertical() && !this.isSidebarSecond());
892 this._showHideSidebarButton.classList.toggle("right-sidebar-show-hide-bu tton", this.isVertical() && this.isSidebarSecond()); 878 this._showHideSidebarButton.classList.toggle("right-sidebar-show-hide-bu tton", this.isVertical() && this.isSidebarSecond());
893 this._showHideSidebarButton.classList.toggle("bottom-sidebar-show-hide-b utton", !this.isVertical() && this.isSidebarSecond()); 879 this._showHideSidebarButton.classList.toggle("bottom-sidebar-show-hide-b utton", !this.isVertical() && this.isSidebarSecond());
894 this._showHideSidebarButton.classList.toggle("left-sidebar-show-hide-but ton", this.isVertical() && !this.isSidebarSecond()); 880 this._showHideSidebarButton.classList.toggle("left-sidebar-show-hide-but ton", this.isVertical() && !this.isSidebarSecond());
895 this._showHideSidebarButton.title = sidebarHidden ? WebInspector.UIStrin g("Show %s", this._showHideSidebarButtonTitle) : WebInspector.UIString("Hide %s" , this._showHideSidebarButtonTitle); 881 this._showHideSidebarButton.title = sidebarHidden ? WebInspector.UIStrin g("Show %s", this._showHideSidebarButtonTitle) : WebInspector.UIString("Hide %s" , this._showHideSidebarButtonTitle);
896 }, 882 },
897 883
898 __proto__: WebInspector.Widget.prototype 884 __proto__: WebInspector.Widget.prototype
899 } 885 }
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698