Animate the status area and tip balloons in the Web Inspector
with CSS animations.
* page/inspector/NetworkPanel.js:
* page/inspector/inspector.css:
* page/inspector/inspector.js:
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@27935
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
+2007-11-20 Timothy Hatcher <timothy@apple.com>
+
+ Reviewed by Mark Rowe.
+
+ Animate the status area and tip balloons in the Web Inspector
+ with CSS animations.
+
+ * page/inspector/NetworkPanel.js:
+ * page/inspector/inspector.css:
+ * page/inspector/inspector.js:
+
2007-11-20 Kevin Ollivier <kevino@theolliviers.com>
wx build fix for Windows. Don't use WebCore/move-js-headers.sh as
this.tipBalloonContentElement.textContent = tipText;
}
- this.tipBalloonElement.removeStyleClass("hidden");
- WebInspector.animateStyle([{element: this.tipBalloonElement, start: {left: 160, opacity: 0}, end: {left: 145, opacity: 1}}], 250);
- } else {
- var element = this.tipBalloonElement;
- WebInspector.animateStyle([{element: this.tipBalloonElement, start: {left: 145, opacity: 1}, end: {left: 160, opacity: 0}}], 250, function() { element.addStyleClass("hidden") });
- }
+ this.tipBalloonElement.addStyleClass("visible");
+ } else
+ this.tipBalloonElement.removeStyleClass("visible");
}
}
-webkit-box-sizing: border-box;
list-style: none;
font-size: 11px;
+ -webkit-transition: bottom 250ms ease-in-out;
+}
+
+#status.visible {
+ bottom: 21px;
}
#status li {
-webkit-box-sizing: border-box;
list-style: none;
font-size: 11px;
+ -webkit-transition: bottom 250ms ease-in-out;
+}
+
+#list.status-visible {
+ bottom: 99px;
}
#list > li {
.tip-balloon {
position: absolute;
- left: 145px;
+ left: 160px;
top: -5px;
z-index: 1000;
border-width: 51px 15px 18px 37px;
-webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
width: 265px;
+ opacity: 0;
+ -webkit-transition: left 250ms ease-in-out, opacity 250ms ease-in-out;
+}
+
+.tip-balloon.visible {
+ left: 145px;
+ opacity: 1;
}
.tip-balloon.bottom {
if (x) {
statusButton.addStyleClass("hide");
- WebInspector.animateStyle([{element: list, end: {bottom: 99}}, {element: status, end: {bottom: 21}}], 250);
+ list.addStyleClass("status-visible");
+ status.addStyleClass("visible");
} else {
statusButton.removeStyleClass("hide");
- WebInspector.animateStyle([{element: list, end: {bottom: 21}}, {element: status, end: {bottom: -57}}], 250);
+ list.removeStyleClass("status-visible");
+ status.removeStyleClass("visible");
}
},