Modified: trunk/Source/WebCore/ChangeLog (146325 => 146326)
--- trunk/Source/WebCore/ChangeLog 2013-03-20 11:30:13 UTC (rev 146325)
+++ trunk/Source/WebCore/ChangeLog 2013-03-20 11:31:48 UTC (rev 146326)
@@ -1,3 +1,27 @@
+2013-03-20 Dmitry Zvorygin <zvory...@chromium.org>
+
+ Web Inspector: Switch Drawer animation from _javascript_ to CSS transitions.
+ https://bugs.webkit.org/show_bug.cgi?id=112586
+
+ This is prerequisite to make Drawer work in overlay mode.
+
+ Reviewed by Vsevolod Vlasov.
+
+ * inspector/front-end/Drawer.js:
+ (WebInspector.Drawer):
+ (WebInspector.Drawer.prototype.show):
+ (WebInspector.Drawer.prototype.hide.this.animationFinished):
+ (WebInspector.Drawer.prototype.hide):
+ (WebInspector.Drawer.prototype.immediatelyFinishAnimation):
+ (WebInspector.Drawer.prototype._getAnimationStyles):
+ * inspector/front-end/UIUtils.js:
+ * inspector/front-end/inspector.css:
+ (.animate-slow *):
+ (.animate #main):
+ (.animate #floating-status-bar-container):
+ (.animate #drawer):
+ (.animate #bottom-status-bar-container > *):
+
2013-03-19 Eugene Klyuchnikov <eus...@chromium.org>
Web Inspector: [DataGrid] Refactorings.
Modified: trunk/Source/WebCore/inspector/front-end/Drawer.js (146325 => 146326)
--- trunk/Source/WebCore/inspector/front-end/Drawer.js 2013-03-20 11:30:13 UTC (rev 146325)
+++ trunk/Source/WebCore/inspector/front-end/Drawer.js 2013-03-20 11:31:48 UTC (rev 146326)
@@ -45,6 +45,7 @@
this._drawerContentsElement.className = "drawer-contents";
this.element.appendChild(this._drawerContentsElement);
this._viewStatusBar = document.createElement("div");
+ this._viewStatusBar.addEventListener("webkitTransitionEnd", this.immediatelyFinishAnimation.bind(this), false);
this._bottomStatusBar = document.getElementById("bottom-status-bar-container");
}
@@ -94,24 +95,30 @@
return;
var height = this._constrainHeight(this._savedHeight || this.element.offsetHeight);
- var animations = [
- {element: this.element, end: {height: height}},
- {element: this._mainElement, end: {bottom: height}},
- {element: this._floatingStatusBarContainer, start: {"padding-left": this._bottomStatusBar.offsetLeft}, end: {"padding-left": 0}},
- {element: this._viewStatusBar, start: {opacity: 0}, end: {opacity: 1}}
- ];
+ this._floatingStatusBarContainer.style.paddingLeft = this._bottomStatusBar.offsetLeft + "px";
+
+ this._getAnimationStyles(animationType).forEach(document.body.addStyleClass, document.body);
+
function animationFinished()
{
WebInspector.inspectorView.currentPanel().doResize();
if (this._view && this._view.afterShow)
this._view.afterShow();
- delete this._currentAnimation;
}
- this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(animationType), animationFinished.bind(this));
+ this._animationFinished = animationFinished.bind(this);
+
+ // Assert that transition will be done and we receive transitionEnd event
+ console.assert(this._viewStatusBar.style.opacity != 1);
+
if (animationType === WebInspector.Drawer.AnimationType.Immediately)
- this._currentAnimation.forceComplete();
+ this.immediatelyFinishAnimation();
+
+ this.element.style.height = height + "px";
+ this._mainElement.style.bottom = height + "px";
+ this._floatingStatusBarContainer.style.paddingLeft = 0;
+ this._viewStatusBar.style.opacity = 1;
},
hide: function(animationType)
@@ -130,12 +137,7 @@
WebInspector.inspectorView.currentPanel().statusBarResized();
document.body.addStyleClass("drawer-visible");
- var animations = [
- {element: this._mainElement, end: {bottom: 0}},
- {element: this.element, end: {height: 0}},
- {element: this._floatingStatusBarContainer, start: {"padding-left": 0}, end: {"padding-left": this._bottomStatusBar.offsetLeft} },
- {element: this._viewStatusBar, start: {opacity: 1}, end: {opacity: 0}}
- ];
+ this._getAnimationStyles(animationType).forEach(document.body.addStyleClass, document.body);
function animationFinished()
{
@@ -146,12 +148,20 @@
this._bottomStatusBar.appendChild(document.getElementById("panel-status-bar"));
this._drawerContentsElement.removeChildren();
document.body.removeStyleClass("drawer-visible");
- delete this._currentAnimation;
}
- this._currentAnimation = WebInspector.animateStyle(animations, this._animationDuration(animationType), animationFinished.bind(this));
+ this._animationFinished = animationFinished.bind(this);
+
+ // Assert that transition will be done and we receive transitionEnd event
+ console.assert(this._viewStatusBar.style.opacity != 0);
+
if (animationType === WebInspector.Drawer.AnimationType.Immediately)
- this._currentAnimation.forceComplete();
+ this.immediatelyFinishAnimation();
+
+ this.element.style.height = 0;
+ this._mainElement.style.bottom = 0;
+ this._floatingStatusBarContainer.style.paddingLeft = this._bottomStatusBar.offsetLeft + "px";
+ this._viewStatusBar.style.opacity = 0;
},
resize: function()
@@ -168,19 +178,23 @@
immediatelyFinishAnimation: function()
{
- if (this._currentAnimation)
- this._currentAnimation.forceComplete();
+ document.body.removeStyleClass("animate");
+ document.body.removeStyleClass("animate-slow");
+ if (this._animationFinished) {
+ this._animationFinished();
+ delete this._animationFinished;
+ }
},
- _animationDuration: function(animationType)
+ _getAnimationStyles: function(animationType)
{
switch (animationType) {
case WebInspector.Drawer.AnimationType.Slow:
- return 2000;
+ return ["animate", "animate-slow"];
case WebInspector.Drawer.AnimationType.Normal:
- return 250;
+ return ["animate"];
default:
- return 0;
+ return [];
}
},
Modified: trunk/Source/WebCore/inspector/front-end/UIUtils.js (146325 => 146326)
--- trunk/Source/WebCore/inspector/front-end/UIUtils.js 2013-03-20 11:30:13 UTC (rev 146325)
+++ trunk/Source/WebCore/inspector/front-end/UIUtils.js 2013-03-20 11:31:48 UTC (rev 146326)
@@ -150,111 +150,6 @@
}
}
-WebInspector.animateStyle = function(animations, duration, callback)
-{
- var interval;
- var complete = 0;
- var hasCompleted = false;
-
- const intervalDuration = (1000 / 30); // 30 frames per second.
- const animationsLength = animations.length;
- const propertyUnit = {opacity: ""};
- const defaultUnit = "px";
-
- function cubicInOut(t, b, c, d)
- {
- if ((t/=d/2) < 1) return c/2*t*t*t + b;
- return c/2*((t-=2)*t*t + 2) + b;
- }
-
- // Pre-process animations.
- for (var i = 0; i < animationsLength; ++i) {
- var animation = animations[i];
- var element = null, start = null, end = null, key = null;
- for (key in animation) {
- if (key === "element")
- element = animation[key];
- else if (key === "start")
- start = animation[key];
- else if (key === "end")
- end = animation[key];
- }
-
- if (!element || !end)
- continue;
-
- if (!start) {
- var computedStyle = element.ownerDocument.defaultView.getComputedStyle(element);
- start = {};
- for (key in end)
- start[key] = parseInt(computedStyle.getPropertyValue(key), 10);
- animation.start = start;
- } else
- for (key in start)
- element.style.setProperty(key, start[key] + (key in propertyUnit ? propertyUnit[key] : defaultUnit));
- }
-
- function animateLoop()
- {
- if (hasCompleted)
- return;
-
- // Advance forward.
- complete += intervalDuration;
- var next = complete + intervalDuration;
-
- // Make style changes.
- for (var i = 0; i < animationsLength; ++i) {
- var animation = animations[i];
- var element = animation.element;
- var start = animation.start;
- var end = animation.end;
- if (!element || !end)
- continue;
-
- var style = element.style;
- for (key in end) {
- var endValue = end[key];
- if (next < duration) {
- var startValue = start[key];
- var newValue = cubicInOut(complete, startValue, endValue - startValue, duration);
- style.setProperty(key, newValue + (key in propertyUnit ? propertyUnit[key] : defaultUnit));
- } else
- style.setProperty(key, endValue + (key in propertyUnit ? propertyUnit[key] : defaultUnit));
- }
- }
-
- // End condition.
- if (complete >= duration) {
- hasCompleted = true;
- clearInterval(interval);
- if (callback)
- callback();
- }
- }
-
- function forceComplete()
- {
- if (hasCompleted)
- return;
-
- complete = duration;
- animateLoop();
- }
-
- function cancel()
- {
- hasCompleted = true;
- clearInterval(interval);
- }
-
- interval = setInterval(animateLoop, intervalDuration);
- return {
- cancel: cancel,
- forceComplete: forceComplete
- };
-}
-
WebInspector.isBeingEdited = function(element)
{
if (element.hasStyleClass("text-prompt") || element.nodeName === "INPUT")
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (146325 => 146326)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2013-03-20 11:30:13 UTC (rev 146325)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2013-03-20 11:31:48 UTC (rev 146326)
@@ -598,6 +598,14 @@
background-color: white;
}
+.animate-slow * {
+ -webkit-transition-duration: 2.5s !important;
+}
+
+.animate #main {
+ -webkit-transition: bottom 250ms linear;
+}
+
body.show-toolbar-icons #main {
top: 56px;
}
@@ -666,6 +674,10 @@
height: 24px;
}
+.animate #floating-status-bar-container {
+ -webkit-transition: padding 250ms linear;
+}
+
body.drawer-visible #floating-status-bar-container {
display: -webkit-flex;
}
@@ -910,6 +922,10 @@
background-color: white;
}
+.animate #drawer {
+ -webkit-transition: height 250ms linear;
+}
+
#drawer-contents {
position: absolute;
top: 0;
@@ -2522,6 +2538,10 @@
overflow: hidden;
}
+.animate #bottom-status-bar-container > * {
+ -webkit-transition: opacity 250ms linear;
+}
+
.search-status-bar-item {
display: inline-block;
cursor: pointer;
