Introduce heap snapshot into Memory Dashboard

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 1611 matching lines @@
 
 memory-dashboard memory-graph {
   height: 350px;
 }
 
 memory-dashboard memory-profile {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  top: 340px;
+  top: 300px;
+}
+
+memory-dashboard memory-profile memory-allocations {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 40px;
+}
+
+memory-dashboard memory-profile memory-snapshot {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 40px;
 }
 
 /* metric-graph */
 
 metric-graph {
   display: block;
 }
 
 metric-graph .graph {
   height: 100%;
   margin-top: -30px;
   padding: 20px;
   padding-top: 60px;
 }
 
 metric-graph .graph > div {
   height: 100%;
 }
 
-/* memory-profile */
+/* memory-allocations */
 
-memory-profile .container {
+memory-allocations .container {
   padding-left: 5%;
   padding-right: 5%;
 }
 
-memory-profile .collection-item {
+memory-allocations .collection-item {
   background-color: #FFFFFF;
   box-sizing: border-box;
   line-height: 20px;
 }
 
-memory-profile .collection-item:hover {
+memory-allocations .collection-item:hover {
   background-color: #d2e7fe;
 }
 
-memory-profile .header .collection-item:hover {
+memory-allocations .header .collection-item:hover {
   background-color: #FFFFFF;
 }
 
-memory-profile .header .collection-item:last-child {
+memory-allocations .header .collection-item:last-child {
   margin-bottom: -3px;
   border-bottom: solid 1px #AAAAAA;
 }
 
-memory-profile .header .collection-item span {
+memory-allocations .header .collection-item span {
   font-weight: bolder;
 }
 
-memory-profile .collection-item :nth-child(2n+2).group,
-memory-profile .collection-item :nth-child(4n+3),
-memory-profile .collection-item :nth-child(4n+4) {
+memory-allocations .collection-item :nth-child(2n+2).group,
+memory-allocations .collection-item :nth-child(4n+3),
+memory-allocations .collection-item :nth-child(4n+4) {
   background-color: #EEEEEE;
 }
 
-memory-profile .collection-item:hover :nth-child(2n+2).group,
-memory-profile .collection-item:hover :nth-child(4n+3),
-memory-profile .collection-item:hover :nth-child(4n+4) {
+memory-allocations .collection-item:hover :nth-child(2n+2).group,
+memory-allocations .collection-item:hover :nth-child(4n+3),
+memory-allocations .collection-item:hover :nth-child(4n+4) {
   background-color: #afd5fd;
 }
 
-memory-profile .header .collection-item :nth-child(2n+1).group,
-memory-profile .header .collection-item :nth-child(4n+1),
-memory-profile .header .collection-item :nth-child(4n+2) {
+memory-allocations .header .collection-item :nth-child(2n+1).group,
+memory-allocations .header .collection-item :nth-child(4n+1),
+memory-allocations .header .collection-item :nth-child(4n+2) {
   background-color: #FFFFFF;
 }
 
-memory-profile .header .collection-item :nth-child(2n+2).group,
-memory-profile .header .collection-item :nth-child(4n+3),
-memory-profile .header .collection-item :nth-child(4n+4) {
+memory-allocations .header .collection-item :nth-child(2n+2).group,
+memory-allocations .header .collection-item :nth-child(4n+3),
+memory-allocations .header .collection-item :nth-child(4n+4) {
   background-color: #DDDDDD;
 }
 
-memory-profile .collection-item .group {
+memory-allocations .collection-item .group {
   display: inline-block;
   width: 12em;
   text-align: right;
   padding-right: 0.5em;
   line-height: 20px;
   border-right: solid 1px #AAAAAA;
 }
 
-memory-profile .collection-item .bytes {
+memory-allocations .collection-item .bytes {
   display: inline-block;
   width: 6em;
   text-align: right;
   line-height: 20px;
   padding-right: 0.5em;
 }
 
-memory-profile .collection-item .instances {
+memory-allocations .collection-item .instances {
   display: inline-block;
   width: 6em;
   text-align: right;
   padding-right: 0.5em;
   line-height: 20px;
   border-right: solid 1px #AAAAAA;
 }
 
-memory-profile .collection-item .name {
+memory-allocations .collection-item .name {
   padding-left: 0.5em;
   display: inline-block;
 }
 
-memory-profile .collection-item > button,
-memory-profile .collection-item > button:active,
-memory-profile .collection-item .group button,
-memory-profile .collection-item .group button:active {
+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;
   color: #0489c3;
   border-style: none;
 }
 
-memory-profile .collection-item > button:hover,
-memory-profile .collection-item .group button:hover {
+memory-allocations .collection-item > button:hover,
+memory-allocations .collection-item .group button:hover {
   text-decoration: underline;
 }
 
+/* memory-profile */
+
+memory-profile .tab_button {
+  float: right;
+  padding: 10px 5px;
+  margin: 0px 1px;
+}
+
+/* memory-snapshot */
+
+memory-snapshot .statusMessage {
+  font-size: 150%;
+  font-weight: bold;
+}
+memory-snapshot .statusBox {
+  height: 100%;
+  padding: 1em;
+}
+memory-snapshot .explanation {
+  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  max-height: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+memory-snapshot virtual-tree {
+  position: absolute;
+  height: auto;
+  top: 50px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+memory-snapshot .tree-item {
+  box-sizing: border-box;
+  line-height: 30px;
+  height: 30px;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+memory-snapshot .tree-item > .size,
+memory-snapshot .tree-item > .percentage {
+  display: inline-block;
+  text-align: right;
+  width: 4em;
+  margin-left: 0.25em;
+  margin-right: 0.25em;
+}
+
+memory-snapshot .tree-item > .name {
+  display: inline;
+  margin-left: 0.5em;
+}
+
 /* metric-graph */
 
 metrics-page > div {
   display: block;
   height: 100%;
 }
 
 metrics-page > div > .graph {
   display: block;
   height: 100%;
@@ skipping 788 matching lines @@
 
 vm-connect-target > button.delete-button:hover {
   background: #ff0000;
 }
 
 /* vm-connect */
 
 vm-connect ul {
   list-style-type: none;
 }