Converted Observatory cpu-profile element

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 1519a1bb6a01df0d62598686551043b7973e2827..14d6d8e61a4879e137c28841616997555efccb4c 100644
--- a/runtime/observatory/lib/src/elements/css/shared.css
+++ b/runtime/observatory/lib/src/elements/css/shared.css
@@ -61,12 +61,12 @@ h1 {
   white-space: nowrap;
 }
 
-a {
+a[href] {
   color: #0489c3;
   text-decoration: none;
 }
 
-a:hover {
+a[href]:hover {
   text-decoration: underline;
 }
 
@@ -400,6 +400,42 @@ isolate-ref-wrapped > a[href] {
   text-decoration: none;
 }
 
+/* cpu-profile */
+
+cpu-profile {
+  position: relative;
+  display: block;
+  height: 100%;
+}
+
+cpu-profile > cpu-profile-virtual-tree {
+  position: absolute;
+  height: auto;
+  top: 320px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+/* cpu-profile-virtual-tree */
+
+cpu-profile-virtual-tree {
+  display: block;
+  height: 600px;
+}
+
+cpu-profile-virtual-tree .coldProfile {
+  background-color: #aea;
+}
+
+cpu-profile-virtual-tree .mediumProfile {
+  background-color: #fe9;
+}
+
+cpu-profile-virtual-tree .hotProfile {
+  background-color: #faa;
+}
+
 /* nav-notify */
 /* TODO(cbernaschina) fix nav-notify-ref-wrapped to nav-notify-ref when wrapper
 removed */
@@ -523,6 +559,47 @@ source-link-wrapped > a[href] {
 }
 
 
+/* observatory-application */
+
+observatory-application {
+  display: block;
+  height: 100%;
+}
+
+observatory-application > div {
+  display: block;
+  height: 100%;
+}
+
+/* sample-buffer-control */
+
+sample-buffer-control .statusMessage {
+  font-size: 150%;
+  font-weight: bold;
+}
+
+sample-buffer-control .statusBox {
+  height: 100%;
+  padding: 1em;
+}
+
+sample-buffer-control .center {
+  align-items: center;
+  justify-content: center;
+}
+
+sample-buffer-control .notice {
+  background-color: #fcf8e3;
+}
+
+sample-buffer-control .red {
+  background-color: #f2dede;
+}
+
+sample-buffer-control .shadow {
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
+              0 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
 
 /* view-footer */
 
@@ -569,6 +646,92 @@ virtual-collection .shifter > * {
   top: -25%;
 }
 
+.tmp-collection-item {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+.tmp-collection-item.coldProfile {
+  background-color: #aea;
+}
+.tmp-collection-item.mediumProfile {
+  background-color: #fe9;
+}
+.tmp-collection-item.hotProfile {
+  background-color: #faa;
+}
+
+.tmp-collection-item > .inclusive,
+.tmp-collection-item > .exclusive,
+.tmp-collection-item > .percentage {
+  display: inline-block;
+  text-align: right;
+  width: 4em;
+  margin-left: 0.25em;
+  margin-right: 0.25em;
+}
+
+.tmp-collection-item > .exclusive {
+  margin-right: 1.5em;
+}
+
+.tmp-collection-item > .expander {
+  display: inline-block;
+  text-align: center;
+  font-weight: bold;
+  font-size: 18px;
+  width: 19px;
+}
+
+.tmp-collection-item > .lines,
+.tmp-collection-item > .lines > span {
+  display: inline-block;
+  height: 30px;
+  line-height: 30px;
+}
+
+.tmp-collection-item > .lines:before,
+.tmp-collection-item > .lines > span:before {
+  display: inline-block;
+  content: '';
+}
+
+.tmp-collection-item > .lines > span {
+  width: 3px;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.tmp-collection-item > .lines > span:nth-child(5n) {
+  background-color: #673AB7;
+}
+
+.tmp-collection-item > .lines > span:nth-child(5n+1) {
+  background-color: #F44336;
+}
+
+.tmp-collection-item > .lines > span:nth-child(5n+2) {
+  background-color: #4CAF50;
+}
+
+.tmp-collection-item > .lines > span:nth-child(5n+3) {
+  background-color: #3F51B5;
+}
+
+.tmp-collection-item > .lines > span:nth-child(5n+4) {
+  background-color: #FF9800;
+}
+
+.tmp-collection-item > .name {
+  display: inline;
+  margin-left: 0.5em;
+}
+
 /* vm-connect-target */
 
 vm-connect-target > button.delete-button {