Add memory-dashboard page to Observatory

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 309 matching lines @@
   width: 20em;
   font: 400 16px 'Montserrat', sans-serif;
 }
 
 select, button, input {
   border-radius: 0px;
   border-style: solid;
   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; }
 }
 
 @-moz-keyframes fadeIn {
   0%   { opacity: 0; }
   100% { opacity: 1; }
 }
 
@@ skipping 1222 matching lines @@
 logging-list .WARNING {
   background-color: #FFE0B2;
 }
 logging-list .SEVERE {
   background-color: #FFCCBC;
 }
 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 {
     text-decoration: underline;
 }
 megamorphic-cache-ref > a[href] {
     color: #0489c3;
     text-decoration: none;
 }
 megamorphic-cache-ref > a[href] * {
     color: inherit;
 }
 megamorphic-ref .emphasize {
   font-style: italic;
 }
 
-/* allocation-profile */
+/* memory-dashboard */
 
-memory-dashboard .heap-space {
-  display: inline-block;
-  width: 50%;
+memory-dashboard {
+  display: block;
+  height: 100%;
+  margin-top: -30px;
 }
 
-memory-dashboard .heap-space.right,
-memory-dashboard .heap-space.right .memberList,
-memory-dashboard .heap-space.right .legend * {
-  direction: rtl;
+memory-dashboard memory-graph {
+  height: 350px;
 }
 
-memory-dashboard .compactable {
-  position: relative;
-}
-
-memory-dashboard .compact {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  width: 8em;
-  margin-left: -4em;
-}
-
-memory-dashboard .heap-space.right * {
-  direction: ltr;
-  text-align: right;
-}
-
-memory-dashboard div.chart {
-  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;
-}
-
-memory-dashboard .collection {
+memory-dashboard memory-profile {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  top: 560px;
+  top: 340px;
 }
 
-memory-dashboard .collection.expanded {
-  top: 160px;
+/* metric-graph */
+
+metric-graph {
+  display: block;
 }
 
-memory-dashboard .collection-item {
+metric-graph .graph {
+  height: 100%;
+  margin-top: -30px;
+  padding: 20px;
+  padding-top: 60px;
+}
+
+metric-graph .graph > div {
+  height: 100%;
+}
+
+/* memory-profile */
+
+memory-profile .container {
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+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 {
+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-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 .scroller .collection-item:hover {
-  background-color: #d2e7fe;
-}
-
-memory-dashboard .collection-item .group {
-  background-color: white;
+memory-profile .collection-item .group {
   display: inline-block;
   width: 12em;
   text-align: right;
   padding-right: 0.5em;
   line-height: 20px;
   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;
   line-height: 20px;
   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;
   padding-right: 0.5em;
   line-height: 20px;
   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%;
 }
 
 metrics-page > div > .graph {
   display: block;
   height: 100%;
   margin-top: -300px;
   padding-top: 300px;
@@ skipping 786 matching lines @@
 
 vm-connect-target > button.delete-button:hover {
   background: #ff0000;
 }
 
 /* vm-connect */
 
 vm-connect ul {
   list-style-type: none;
 }