Bug 712581 - Display the property details in the debugger using transitions; r=past

browser/themes/gnomestripe/devtools/debugger.css

@@ -247,6 +247,29 @@ a {
   -moz-appearance: treetwistyopen;
 }
 
+/**
+ * Animations
+ */
+
+.details[open] {
+  -moz-animation-duration: 0.25s;
+  -moz-animation-name: showblock;
+}
+
+@-moz-keyframes showblock {
+  from {
+    opacity: 0;
+    -moz-transform-origin: top;
+    -moz-transform: scaleY(0);
+  }
+
+  to {
+    opacity: 1;
+    -moz-transform-origin: top;
+    -moz-transform: scaleY(1);
+  }
+}
+
 /**
  * Display helpers
  */

browser/themes/pinstripe/devtools/debugger.css

@@ -245,6 +245,29 @@ a {
   -moz-appearance: treetwistyopen;
 }
 
+/**
+ * Animations
+ */
+
+.details[open] {
+  -moz-animation-duration: 0.25s;
+  -moz-animation-name: showblock;
+}
+
+@-moz-keyframes showblock {
+  from {
+    opacity: 0;
+    -moz-transform-origin: top;
+    -moz-transform: scaleY(0);
+  }
+
+  to {
+    opacity: 1;
+    -moz-transform-origin: top;
+    -moz-transform: scaleY(1);
+  }
+}
+
 /**
  * Display helpers
  */

browser/themes/winstripe/devtools/debugger.css

@@ -249,6 +249,29 @@ a {
   background-image: url("chrome://global/skin/tree/twisty-open.png");
 }
 
+/**
+ * Animations
+ */
+
+.details[open] {
+  -moz-animation-duration: 0.25s;
+  -moz-animation-name: showblock;
+}
+
+@-moz-keyframes showblock {
+  from {
+    opacity: 0;
+    -moz-transform-origin: top;
+    -moz-transform: scaleY(0);
+  }
+
+  to {
+    opacity: 1;
+    -moz-transform-origin: top;
+    -moz-transform: scaleY(1);
+  }
+}
+
 /**
  * Display helpers
  */