Add memory-dashboard page to Observatory

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 a499bce7eba3ecc7300f7202a3c47d937052d942..9f55dff9a4408371676d1397fdec49ed095e9a7c 100644
--- a/runtime/observatory/lib/src/elements/css/shared.css
+++ b/runtime/observatory/lib/src/elements/css/shared.css
@@ -327,6 +327,17 @@ select, button, input {
   border-width: 1px;
 }
 
+button.link {
+  background-color: transparent;
+  color: #0489c3;
+  border-style: none;
+  border-width: 0;
+}
+
+button.big {
+  font-size: 20px;
+}
+
 @-webkit-keyframes fadeIn {
   0%   { opacity: 0; }
   100% { opacity: 1; }
@@ -1569,6 +1580,22 @@ logging-list .SHOUT {
   background-color: #FFCDD2;
 }
 
+/* memory-graph */
+
+memory-graph .chart-legend-row,
+memory-graph .chart-legend-row div {
+  display: inline;
+}
+
+memory-graph .chart-legend-row div.chart-legend-color {
+  display: inline-block;
+  margin: auto 8px;
+}
+
+memory-graph .chart-legend-row:nth-child(2n) div.chart-legend-color {
+  display: none;
+}
+
 /* megamorphic-cache-ref */
 
 megamorphic-cache-ref > a[href]:hover {
@@ -1585,127 +1612,98 @@ megamorphic-ref .emphasize {
   font-style: italic;
 }
 
-/* allocation-profile */
-
-memory-dashboard .heap-space {
-  display: inline-block;
-  width: 50%;
-}
+/* memory-dashboard */
 
-memory-dashboard .heap-space.right,
-memory-dashboard .heap-space.right .memberList,
-memory-dashboard .heap-space.right .legend * {
-  direction: rtl;
+memory-dashboard {
+  display: block;
+  height: 100%;
+  margin-top: -30px;
 }
 
-memory-dashboard .compactable {
-  position: relative;
+memory-dashboard memory-graph {
+  height: 350px;
 }
 
-memory-dashboard .compact {
+memory-dashboard memory-profile {
   position: absolute;
-  bottom: 20px;
-  left: 50%;
-  width: 8em;
-  margin-left: -4em;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 340px;
 }
 
-memory-dashboard .heap-space.right * {
-  direction: ltr;
-  text-align: right;
-}
+/* metric-graph */
 
-memory-dashboard div.chart {
+metric-graph {
   display: block;
-  position: relative;
-  height: 150px;
 }
-memory-dashboard div.chart > div.host {
-  display: inline-block;
-  position: absolute;
-  bottom: 0px;
-  top: 0;
-}
-memory-dashboard div.chart > div.legend {
-  position: absolute;
-  width: 150px;
-  top: 25px;
-  bottom: 0;
-  overflow-y: auto;
-}
-memory-dashboard .heap-space.left div.host {
-  left: 200px;
-  width: 180px;
-}
-memory-dashboard .heap-space.right div.host {
-  right: 150px;
-  width: 180px;
-}
-memory-dashboard .heap-space.left div.legend {
-  left: 0;
-}
-memory-dashboard .heap-space.right div.legend {
-  right: 0;
+
+metric-graph .graph {
+  height: 100%;
+  margin-top: -30px;
+  padding: 20px;
+  padding-top: 60px;
 }
 
-memory-dashboard .collection {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 560px;
+metric-graph .graph > div {
+  height: 100%;
 }
 
-memory-dashboard .collection.expanded {
-  top: 160px;
+/* memory-profile */
+
+memory-profile .container {
+  padding-left: 5%;
+  padding-right: 5%;
 }
 
-memory-dashboard .collection-item {
+memory-profile .collection-item {
+  background-color: #FFFFFF;
   box-sizing: border-box;
   line-height: 20px;
-  margin-left: 5%;
-  margin-right: 5%;
 }
 
-memory-dashboard .header .collection-item:last-child {
+memory-profile .collection-item:hover {
+  background-color: #d2e7fe;
+}
+
+memory-profile .header .collection-item:hover {
+  background-color: #FFFFFF;
+}
+
+memory-profile .header .collection-item:last-child {
   margin-bottom: -3px;
   border-bottom: solid 1px #AAAAAA;
 }
 
-memory-dashboard .header .collection-item span {
+memory-profile .header .collection-item span {
   font-weight: bolder;
 }
 
-memory-dashboard .collection-item :nth-child(2n+2).group,
-memory-dashboard .collection-item :nth-child(4n+3).bytes,
-memory-dashboard .collection-item :nth-child(4n+3).instances,
-memory-dashboard .collection-item :nth-child(4n+4).bytes,
-memory-dashboard .collection-item :nth-child(4n+4).instances {
+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) {
   background-color: #EEEEEE;
 }
 
-memory-dashboard .collection-item:hover :nth-child(2n+2).group,
-memory-dashboard .collection-item:hover :nth-child(4n+3).bytes,
-memory-dashboard .collection-item:hover :nth-child(4n+3).instances,
-memory-dashboard .collection-item:hover :nth-child(4n+4).bytes,
-memory-dashboard .collection-item:hover :nth-child(4n+4).instances {
+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) {
   background-color: #afd5fd;
 }
 
-memory-dashboard .header .collection-item :nth-child(2n+2).group,
-memory-dashboard .header .collection-item :nth-child(4n+3).bytes,
-memory-dashboard .header .collection-item :nth-child(4n+3).instances,
-memory-dashboard .header .collection-item :nth-child(4n+4).bytes,
-memory-dashboard .header .collection-item :nth-child(4n+4).instances {
-  background-color: #DDDDDD;
+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) {
+  background-color: #FFFFFF;
 }
 
-memory-dashboard .scroller .collection-item:hover {
-  background-color: #d2e7fe;
+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) {
+  background-color: #DDDDDD;
 }
 
-memory-dashboard .collection-item .group {
-  background-color: white;
+memory-profile .collection-item .group {
   display: inline-block;
   width: 12em;
   text-align: right;
@@ -1714,8 +1712,7 @@ memory-dashboard .collection-item .group {
   border-right: solid 1px #AAAAAA;
 }
 
-memory-dashboard .collection-item .bytes {
-  background-color: white;
+memory-profile .collection-item .bytes {
   display: inline-block;
   width: 6em;
   text-align: right;
@@ -1723,8 +1720,7 @@ memory-dashboard .collection-item .bytes {
   padding-right: 0.5em;
 }
 
-memory-dashboard .collection-item .instances {
-  background-color: white;
+memory-profile .collection-item .instances {
   display: inline-block;
   width: 6em;
   text-align: right;
@@ -1733,42 +1729,27 @@ memory-dashboard .collection-item .instances {
   border-right: solid 1px #AAAAAA;
 }
 
-memory-dashboard .collection-item .name {
-  background-color: white;
+memory-profile .collection-item .name {
   padding-left: 0.5em;
+  display: inline-block;
 }
 
-memory-dashboard .collection-item > button,
-memory-dashboard .collection-item > button:active {
+memory-profile .collection-item > button,
+memory-profile .collection-item > button:active,
+memory-profile .collection-item .group button,
+memory-profile .collection-item .group button:active {
   background-color: transparent;
   color: #0489c3;
   border-style: none;
 }
 
-memory-dashboard .collection-item > button:hover {
+memory-profile .collection-item > button:hover,
+memory-profile .collection-item .group button:hover {
   text-decoration: underline;
 }
 
 /* metric-graph */
 
-metric-graph {
-  display: block;
-  height: 100%;
-}
-
-metric-graph .graph {
-  height: 100%;
-  margin-top: -30px;
-  padding: 20px;
-  padding-top: 60px;
-}
-
-metric-graph .graph > div {
-  height: 100%;
-}
-
-/* metric-graph */
-
 metrics-page > div {
   display: block;
   height: 100%;