Converted Observatory cpu-profile element

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;
 }
 
 body {
@@ skipping 43 matching lines @@
   font: 400 12px 'Montserrat', sans-serif;
 }
 
 .monospace {
   font-family: consolas, courier, monospace;
   font-size: 1em;
   line-height: 1.2em;
   white-space: nowrap;
 }
 
-a {
+a[href] {
   color: #0489c3;
   text-decoration: none;
 }
 
-a:hover {
+a[href]:hover {
   text-decoration: underline;
 }
 
 em {
   color: inherit;
   font-style: italic;
 }
 
 b {
   color: inherit;
@@ skipping 313 matching lines @@
 removed */
 
 isolate-ref-wrapped > a[href]:hover {
   text-decoration: underline;
 }
 isolate-ref-wrapped > a[href] {
   color: #0489c3;
   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 */
 nav-notify-wrapped > div {
   float: right;
 }
 nav-notify-wrapped > div > div {
   display: block;
   position: absolute;
   top: 98%;
@@ skipping 103 matching lines @@
 source-link-wrapped > a[href]:hover {
     text-decoration: underline;
 }
 
 source-link-wrapped > a[href] {
     color: #0489c3;
     text-decoration: none;
 }
 
 
+/* 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 */
 
 view-footer {
   padding: 1em;
   padding-top: 10.3em;
   float: right;
   align-content: right;
 }
 
@@ skipping 26 matching lines @@
   top: 0;
   left: 0;
   right: 0;
 }
 
 virtual-collection .shifter > * {
   position: relative;
   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 {
   margin-left: 0.28em;
   padding: 4px;
   background: transparent;
   border: none !important;
 }
 
 vm-connect-target > button.delete-button:hover {
   background: #ff0000;
 }