Restyle Observatory Memory Dashboard buttons

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

 /* Global styles */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
   padding-top: 56px;
   color: #333;
@@ skipping 1607 matching lines @@
 }
 
 /* memory-dashboard */
 
 memory-dashboard {
   display: block;
   height: 100%;
   margin-top: -30px;
 }
 
+memory-dashboard button:disabled,
+memory-dashboard button:disabled:hover {
+  text-decoration: none;
+  background-color: #eee;
+  background-image: linear-gradient(#eee, #eee);
+  border: 1px solid #eee;
+  border-radius: 2px;
+  cursor: default;
+}
+
+
+memory-dashboard button,
+memory-dashboard button:active {
+  text-decoration: none;
+  background-color: #ddd;
+  background-image: linear-gradient(#eee, #ddd);
+  border: 1px solid #d5d5d5;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+memory-dashboard button:hover {
+  text-decoration: none;
+  background-color: #ccc;
+  background-image: linear-gradient(#ddd, #ccc);
+  border-color: #c7c7c7;
+}
+
 memory-dashboard memory-graph {
   height: 350px;
 }
 
 memory-dashboard memory-profile {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 300px;
@@ skipping 115 matching lines @@
 memory-allocations .collection-item .name {
   padding-left: 0.5em;
   padding-right: 0.5em;
   display: inline-block;
 }
 
 memory-allocations .collection-item > button,
 memory-allocations .collection-item > button:active,
 memory-allocations .collection-item .group button,
 memory-allocations .collection-item .group button:active {
-  background-color: transparent;
+  background: transparent;
   color: #0489c3;
-  border-style: none;
+  border: 0px none;
+  border-radius: 0px;
+  padding: 0;
 }
 
 memory-allocations .collection-item > button:hover,
 memory-allocations .collection-item .group button:hover {
   text-decoration: underline;
+  border-radius: 0px;
 }
 
 /* memory-profile */
 
-memory-profile .tab_button {
-  float: right;
-  padding: 10px 5px;
+memory-profile .header_button {
+  padding: 3px 5px;
   margin: 0px 1px;
 }
 
+memory-profile .tab_buttons {
+  float: right;
+}
+
+memory-profile .tab_buttons button {
+  padding: 10px 5px;
+}
+
+memory-profile .tab_buttons button:not(:first-child) {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+memory-profile .tab_buttons button:not(:last-child) {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
 /* memory-snapshot */
 
 memory-snapshot .statusMessage {
   font-size: 150%;
   font-weight: bold;
 }
 memory-snapshot .statusBox {
   height: 100%;
   padding: 1em;
 }
@@ skipping 730 matching lines @@
 }
 
 virtual-collection .viewport {
   position: absolute;
   display: block;
   overflow-y: auto;
   overflow-x: auto;
   top: 0;
   bottom: 0;
   right: 0;
-  left: 0;  
+  left: 0;
 }
 
 virtual-collection .header {
   background: white;
   position: relative;
   display: block;
   z-index: +1;
 }
 
 virtual-collection .spacer {
@@ skipping 20 matching lines @@
   display: inline-block;
 }
 
 virtual-collection .buffer > div {
   min-width: 100%;
   white-space: nowrap;
 }
 
 /* virtual-tree */
 
-virtual-tree .expander {
+virtual-tree .expander,
+virtual-tree .expander:hover,
+virtual-tree .expander:active {
   display: inline-block;
   text-align: center;
   font-weight: bold;
   font-size: 18px;
   width: 19px;
-  border: none;
-  background-color: transparent;
+  border: 0px none;
+  background: transparent;
+  padding: 0;
 }
 
 virtual-tree .expander:focus {
   outline: none;
 }
 
 virtual-tree .lines,
 virtual-tree .lines > span {
   display: inline-block;
   vertical-align: top;
@@ skipping 53 matching lines @@
 
 vm-connect-target > button.delete-button:hover {
   background: #ff0000;
 }
 
 /* vm-connect */
 
 vm-connect ul {
   list-style-type: none;
 }