CPU profile displayed in three tables with a tree

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

 /* Global styles */
 * {
   margin: 0;
   padding: 0;
   font: 400 14px 'Montserrat', sans-serif;
   color: #333;
   box-sizing: border-box;
 }
 
 .content {
@@ skipping 172 matching lines @@
 }
 
 
 .flex-item-fixed-12-12 {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 100%;
 }
 
 .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%;
 }
 
 .flex-item-15-percent {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 15%;
 }
 
 .flex-item-20-percent {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 20%;
 }
 
 .flex-item-30-percent {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 30%;
 }
 
 .flex-item-40-percent {
   flex-grow: 0;
   flex-shrink: 0;
   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;
   flex-basis: 50%;
 }
 
 .flex-item-60-percent {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 60%;
 }
 
 .flex-item-70-percent {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 70%;
 }
 
 .flex-item-80-percent {
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: 80%;
 }
 
+.flex-item-90-percent {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 90%;
+}
+
 .well {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
   background-color: #f5f5f5;
   border: 1px solid #e3e3e3;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
 }
 
 .break-wrap {
   word-wrap: break-word;
 }
 
 body.busy, body.busy * {
   cursor: progress !important;
 }
 
 .pointer {
   cursor: pointer;
 }
 
 .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 {
   0%   { opacity: 0; }
   100% { opacity: 1; }
 }
 
 @-moz-keyframes fadeIn {
   0%   { opacity: 0; }
   100% { opacity: 1; }
 }
 
 @keyframes fadeIn {
   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;
+}