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:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@27935 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 44aa83d5cfb7f6debcbcf9d1c8ca8456fa80ed53..22e2f1739e3a25a4e7a1a8792f5a5c96684b8bcf 100644 (file)
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,14 @@
+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

diff --git a/WebCore/page/inspector/NetworkPanel.js b/WebCore/page/inspector/NetworkPanel.js
index 63419f05d519b4abd35cf36e768552e589d848e0..b4b126b50f559605e2e801ed4c18e47a91ebad40 100644 (file)
--- a/WebCore/page/inspector/NetworkPanel.js
+++ b/WebCore/page/inspector/NetworkPanel.js
@@ -698,12 +698,9 @@ WebInspector.NetworkTimelineEntry.prototype = {
                 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");
     }
 }
 

diff --git a/WebCore/page/inspector/inspector.css b/WebCore/page/inspector/inspector.css
index c43776d5fc119b4b80c539b1554ea525738da25a..c8331a7327ddb61ce7bf72fc27ab93fd105ebc66 100644 (file)
--- a/WebCore/page/inspector/inspector.css
+++ b/WebCore/page/inspector/inspector.css
@@ -390,6 +390,11 @@ body.attached #attachToggle:active {
     -webkit-box-sizing: border-box;
     list-style: none;
     font-size: 11px;
+    -webkit-transition: bottom 250ms ease-in-out;
+}
+
+#status.visible {
+    bottom: 21px;
 }
 
 #status li {
@@ -468,6 +473,11 @@ body.attached #attachToggle:active {
     -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 {
@@ -1936,12 +1946,19 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
 
 .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 {

diff --git a/WebCore/page/inspector/inspector.js b/WebCore/page/inspector/inspector.js
index 64c05f1e1f2bb21c199089fe2e03404adf36da8a..22fac9e436a59dd938e8aa5a2e995df4222ed575 100644 (file)
--- a/WebCore/page/inspector/inspector.js
+++ b/WebCore/page/inspector/inspector.js
@@ -166,10 +166,12 @@ var WebInspector = {
 
         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");
         }
     },