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 289 matching lines @@
 .shadow {
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
               0 2px 5px 0 rgba(0, 0, 0, 0.26);
 }
 
 input.textbox {
   width: 20em;
   font: 400 16px 'Montserrat', sans-serif;
 }
 
+select, button, input {
+  border-radius: 0px;
+  border-style: solid;
+  border-width: 1px;
+}
+
 @-webkit-keyframes fadeIn {
   0%   { opacity: 0; }
   100% { opacity: 1; }
 }
 
 @-moz-keyframes fadeIn {
   0%   { opacity: 0; }
   100% { opacity: 1; }
 }
 
@@ skipping 89 matching lines @@
   line-height: 25px;
   height: 25px;
   padding-left: 10%;
   padding-right: 10%;
 }
 
 class-tree virtual-tree .class-tree-item .name {
   margin-left: 0.5em;
 }
 
+/* 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 .tree-item {
+  line-height: 30px;
+  height: 30px;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+cpu-profile-virtual-tree .tree-item > .inclusive,
+cpu-profile-virtual-tree .tree-item > .exclusive,
+cpu-profile-virtual-tree .tree-item > .percentage {
+  display: inline-block;
+  text-align: right;
+  width: 4em;
+  margin-left: 0.25em;
+  margin-right: 0.25em;
+}
+
+cpu-profile-virtual-tree .tree-item > .exclusive {
+  margin-right: 1.5em;
+}
+
+cpu-profile-virtual-tree .tree-item > .name {
+  display: inline;
+  margin-left: 0.5em;
+}
+
 /* error-ref */
 /* TODO(cbernaschina) fix error-ref-wrapped to error-ref when wrapper
 removed */
 
 error-ref-wrapped > pre {
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   padding: 10px;
   font-family: consolas, courier, monospace;
   font-size: 1em;
@@ skipping 247 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 40 matching lines @@
 }
 
 /* virtual-tree */
 
 virtual-tree .expander {
   display: inline-block;
   text-align: center;
   font-weight: bold;
   font-size: 18px;
   width: 19px;
+  border: none;
+  background-color: transparent;
+}
+
+virtual-tree .expander:focus {
+  outline: none;
 }
 
 virtual-tree .lines,
 virtual-tree .lines > span {
   display: inline-block;
   vertical-align: top;
   height: 100%;
   line-height: 100%;
 }
 
@@ skipping 40 matching lines @@
 
 vm-connect-target > button.delete-button:hover {
   background: #ff0000;
 }
 
 /* vm-connect */
 
 vm-connect ul {
   list-style-type: none;
 }