CPU profile displayed in three tables with a tree

runtime/observatory/lib/src/elements/css/shared.css

Index: runtime/observatory/lib/src/elements/css/shared.css
diff --git a/runtime/observatory/lib/src/elements/css/shared.css b/runtime/observatory/lib/src/elements/css/shared.css
index 1659ce922d56784ca03b6bc8775ccdc20f2c4f98..adc1ca4436e34ee2701d4f51f60f6669c8221ed3 100644
--- a/runtime/observatory/lib/src/elements/css/shared.css
+++ b/runtime/observatory/lib/src/elements/css/shared.css
@@ -190,6 +190,7 @@ hr {
 }
 
 .flex-item-10-percent {
+  display: flex;

[turnidge, 2015/04/07 21:24:31]

Is this change needed?

[Cutch, 2015/04/14 21:45:15]

Done.

   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 10%;
@@ -219,6 +220,13 @@ hr {
   flex-basis: 40%;
 }
 
+.flex-item-45-percent {
+  display: flex;

[turnidge, 2015/04/07 21:24:31]

Here too.

[Cutch, 2015/04/14 21:45:15]

Done.

+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 45%;
+}
+
 .flex-item-50-percent {
   flex-grow: 0;
   flex-shrink: 0;
@@ -243,6 +251,12 @@ hr {
   flex-basis: 80%;
 }
 
+.flex-item-90-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 90%;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;
@@ -267,7 +281,7 @@ body.busy, body.busy * {
 
 .shadow {
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
-  0 2px 5px 0 rgba(0, 0, 0, 0.26);
+              0 2px 5px 0 rgba(0, 0, 0, 0.26);
 }
 
 @-webkit-keyframes fadeIn {
@@ -284,3 +298,45 @@ body.busy, body.busy * {
   0%   { opacity: 0; }
   100% { opacity: 1; }
 }
+
+@-webkit-keyframes shake {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%, 30%, 50%, 70%, 90% {
+    -webkit-transform: translate3d(-10px, 0, 0);
+    -ms-transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  20%, 40%, 60%, 80% {
+    -webkit-transform: translate3d(10px, 0, 0);
+    -ms-transform: translate3d(10px, 0, 0);
+    transform: translate3d(10px, 0, 0);
+  }
+}
+
+.shake {
+  animation: shake 0.5s;
+  -webkit-animation: shake 0.5s;
+}