Introduce heap snapshot into Memory Dashboard

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 69589b44ab787e0d0100df9d39d1865d41fda3b5..cb7f703d7054b090effcf745036c799ec15c11ae 100644
--- a/runtime/observatory/lib/src/elements/css/shared.css
+++ b/runtime/observatory/lib/src/elements/css/shared.css
@@ -1634,7 +1634,23 @@ memory-dashboard memory-profile {
   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 */
@@ -1654,61 +1670,61 @@ 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;
@@ -1717,7 +1733,7 @@ memory-profile .collection-item .group {
   border-right: solid 1px #AAAAAA;
 }
 
-memory-profile .collection-item .bytes {
+memory-allocations .collection-item .bytes {
   display: inline-block;
   width: 6em;
   text-align: right;
@@ -1725,7 +1741,7 @@ memory-profile .collection-item .bytes {
   padding-right: 0.5em;
 }
 
-memory-profile .collection-item .instances {
+memory-allocations .collection-item .instances {
   display: inline-block;
   width: 6em;
   text-align: right;
@@ -1734,26 +1750,82 @@ memory-profile .collection-item .instances {
   border-right: solid 1px #AAAAAA;
 }
 
-memory-profile .collection-item .name {
+memory-allocations .collection-item .name {
   padding-left: 0.5em;
   padding-right: 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 {