Refactor of Observatory virtual-collection

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 532 matching lines @@
   display: inline-block;
   width: 6em;
   text-align: right;
   padding-right: 0.5em;
   line-height: 20px;
   border-right: solid 1px #AAAAAA;
 }
 
 allocation-profile .collection-item .name {
   padding-left: 0.5em;
+  padding-right: 0.5em;
   display: inline-block;
 }
 
 allocation-profile .collection-item > button,
 allocation-profile .collection-item > button:active {
   background-color: transparent;
   color: #0489c3;
   border-style: none;
 }
 
@@ skipping 47 matching lines @@
   padding-right: 10%;
 }
 
 class-tree virtual-tree .class-tree-item {
   line-height: 25px;
   height: 25px;
 }
 
 class-tree virtual-tree .class-tree-item .name {
   margin-left: 0.5em;
+  margin-right: 0.5em;
 }
 
 /* code-view */
 
 code-view .table {
   table-layout: fixed;
 }
 
 code-view th:nth-of-type(1),
 code-view td:nth-of-type(1) {
@@ skipping 164 matching lines @@
   border-bottom: solid 1px #AAAAAA;
 }
 cpu-profile-table .function-item .inclusive,
 cpu-profile-table .function-item .exclusive {
   display: inline-block;
   width: 7em;
   text-align: right;
   padding-right: 0.5em;
   line-height: 20px;
 }
-cpu-profile-table .shifter .function-item .inclusive {
+cpu-profile-table .buffer .function-item .inclusive {
   background-color: #EEEEEE;
 }
-cpu-profile-table .shifter .function-item.selected .inclusive {
+cpu-profile-table .buffer .function-item.selected .inclusive {
   background-color: #51a3fb;
 }
-cpu-profile-table .shifter .function-item:hover .inclusive {
+cpu-profile-table .buffer .function-item:hover .inclusive {
   background-color: #afd5fd;
 }
 cpu-profile-table .header .function-item .inclusive {
   background-color: #DDDDDD;
 }
-cpu-profile-table .shifter .function-item.selected {
+cpu-profile-table .buffer .function-item.selected {
   background-color: #60abfb;
 }
-cpu-profile-table .shifter .function-item:hover {
+cpu-profile-table .buffer .function-item:hover {
   background-color: #d2e7fe;
 }
 cpu-profile-table .function-item .exclusive {
 }
 cpu-profile-table .function-item .name {
   padding-left: 0.5em;
+  padding-left: 0.5em;
 }
 cpu-profile-table .function-item > button,
 cpu-profile-table .function-item > button:active {
   background-color: transparent;
   color: #0489c3;
   border-style: none;
 }
 cpu-profile-table .function-item > button:hover {
   text-decoration: underline;
 }
@@ skipping 23 matching lines @@
   margin-right: 0.25em;
 }
 
 cpu-profile-virtual-tree .tree-item > .exclusive {
   margin-right: 1.5em;
 }
 
 cpu-profile-virtual-tree .tree-item > .name {
   display: inline;
   margin-left: 0.5em;
+  margin-right: 0.5em;
 }
 
 /* curly-block */
 
 curly-block span.curly-block {
   color: #0489c3;
   cursor: pointer;
 }
 curly-block span.curly-block.disabled {
   color: white;
@@ skipping 444 matching lines @@
   display: inline-block;
   text-align: right;
   width: 4em;
   margin-left: 0.25em;
   margin-right: 0.25em;
 }
 
 heap-snapshot .tree-item > .name {
   display: inline;
   margin-left: 0.5em;
+  margin-right: 0.5em;
 }
 
 
 /* icdata-ref */
 
 icdata-ref > a[href]:hover {
   text-decoration: underline;
 }
 icdata-ref > a[href] {
   color: #0489c3;
@@ skipping 381 matching lines @@
   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 {
   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 {
   background-color: transparent;
   color: #0489c3;
   border-style: none;
@@ skipping 308 matching lines @@
 persistent-handles-page {
   display: block;
   height: 100%;
 }
 persistent-handles-page .persistent-handles,
 persistent-handles-page .weak-persistent-handles {
   margin-top: -70px;
   padding-top: 70px;
   height: 50%;
 }
-persistent-handles-page virtual-collection {
-  overflow-y: scroll;
-}
 persistent-handles-page .weak-item,
 persistent-handles-page .collection-item {
   box-sizing: border-box;
   line-height: 20px;
   padding-left: 5%;
   padding-right: 5%;
 }
 persistent-handles-page .header {
   box-sizing: border-box;
   line-height: 20px;
@@ skipping 12 matching lines @@
   line-height: 20px;
 }
 persistent-handles-page .weak-item .peer {
   width: 11em;
   font-family: monospace;
 }
 persistent-handles-page .weak-item .object {
   text-align: left;
   width: 25em;
 }
-persistent-handles-page .shifter .weak-item:hover {
+persistent-handles-page .buffer .weak-item:hover {
   background-color: #d2e7fe;
 }
 persistent-handles-page .weak-item .finalizer {
   padding-left: 0.5em;
 }
 persistent-handles-page .weak-item > button,
 persistent-handles-page .weak-item > button:active {
   background-color: transparent;
   color: #0489c3;
   border-style: none;
@@ skipping 325 matching lines @@
   float: right;
   clear: both;
   display: block;
 }
 
 /* virtual-collection */
 
 virtual-collection {
   position: relative;
   display: block;
-  overflow-y: auto;
+  overflow-x: hidden;
   width: 100%;
   height: 100%;
 }
 
+virtual-collection .viewport {
+  position: absolute;
+  display: block;
+  overflow-y: auto;
+  overflow-x: auto;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;  
+}
+
 virtual-collection .header {
   background: white;
   position: relative;
   display: block;
-  min-width: 100%;
   z-index: +1;
 }
 
-virtual-collection .scroller {
+virtual-collection .spacer {
   overflow: hidden;
   background: transparent;
   display: inline-block;
   min-width: 100%;
 }
 
-virtual-collection .shifter {
+virtual-collection .buffer {
   background: transparent;
   position: relative;
   display: inline-block;
   min-width: 100%;
 }
 
 virtual-collection .header > div,
-virtual-collection .shifter > div {
+virtual-collection .buffer > div {
+  white-space: nowrap;
+}
+
+virtual-collection .header.attached > div,
+virtual-collection .buffer > div {
+  display: inline-block;
+}
+
+virtual-collection .buffer > div {
   min-width: 100%;
   white-space: nowrap;
 }
 
 /* virtual-tree */
 
 virtual-tree .expander {
   display: inline-block;
   text-align: center;
   font-weight: bold;
@@ skipping 67 matching lines @@
 
 vm-connect-target > button.delete-button:hover {
   background: #ff0000;
 }
 
 /* vm-connect */
 
 vm-connect ul {
   list-style-type: none;
 }