Removed polymer & mirror from 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 035b0e889b7a8d5e19a7d85c4f40a24cccc13d7c..e1ce97796912aeaac511e338f43bc9dcb784bff6 100644
--- a/runtime/observatory/lib/src/elements/css/shared.css
+++ b/runtime/observatory/lib/src/elements/css/shared.css
@@ -527,25 +527,21 @@ allocation-profile .collection-item > button:hover {
 }
 
 /* class-ref */
-/* TODO(cbernaschina) fix class-ref-wrapped to class-ref when wrapper
-removed */
 
-class-ref-wrapped > a[href]:hover {
+class-ref > a[href]:hover {
     text-decoration: underline;
 }
-class-ref-wrapped > a[href] {
+class-ref > a[href] {
     color: #0489c3;
     text-decoration: none;
 }
 
 /* code-ref */
-/* TODO(cbernaschina) fix code-ref-wrapped to code-ref when wrapper
-removed */
 
-code-ref-wrapped > a[href]:hover {
+code-ref > a[href]:hover {
   text-decoration: underline;
 }
-code-ref-wrapped > a[href] {
+code-ref > a[href] {
   color: #0489c3;
   text-decoration: none;
 }
@@ -627,17 +623,15 @@ code-view .code-comment {
 }
 
 /* context-ref */
-/* TODO(cbernaschina) fix context-ref-wrapped to context-ref when wrapper
-removed */
 
-context-ref-wrapped > a[href]:hover {
+context-ref > a[href]:hover {
     text-decoration: underline;
 }
-context-ref-wrapped > a[href] {
+context-ref > a[href] {
     color: #0489c3;
     text-decoration: none;
 }
-context-ref-wrapped > a[href] * {
+context-ref > a[href] * {
     color: inherit;
 }
 
@@ -825,6 +819,17 @@ cpu-profile-virtual-tree .tree-item > .name {
   margin-left: 0.5em;
 }
 
+/* curly-block */
+
+curly-block span.curly-block {
+  color: #0489c3;
+  cursor: pointer;
+}
+curly-block span.curly-block.disabled {
+  color: white;
+  cursor: wait;
+}
+
 /* debugger-console */
 
 debugger-console {
@@ -1092,10 +1097,8 @@ debugger-stack .noStack.hidden {
 }
 
 /* error-ref */
-/* TODO(cbernaschina) fix error-ref-wrapped to error-ref when wrapper
-removed */
 
-error-ref-wrapped > pre {
+error-ref > pre {
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   padding-left: 10px;
@@ -1107,22 +1110,20 @@ error-ref-wrapped > pre {
 }
 
 /* eval-box */
-/* TODO(cbernaschina) fix eval-box-wrapped to error-ref when wrapper
-removed */
 
-eval-box-wrapped a[href]:hover {
+eval-box a[href]:hover {
     text-decoration: underline;
 }
-eval-box-wrapped a[href] {
+eval-box a[href] {
     color: #0489c3;
     text-decoration: none;
 }
-eval-box-wrapped .quicks > button:hover {
+eval-box .quicks > button:hover {
   background-color: transparent;
   border: none;
   text-decoration: underline;
 }
-eval-box-wrapped .quicks > button {
+eval-box .quicks > button {
   background-color: transparent;
   border: none;
   color: #0489c3;
@@ -1130,15 +1131,15 @@ eval-box-wrapped .quicks > button {
   margin-right: 1em;
   text-decoration: none;
 }
-eval-box-wrapped .emphasize {
+eval-box .emphasize {
   font-style: italic;
 }
-eval-box-wrapped .indent {
+eval-box .indent {
   margin-left: 1.5em;
   font: 400 14px 'Montserrat', sans-serif;
   line-height: 150%;
 }
-eval-box-wrapped .stackTraceBox {
+eval-box .stackTraceBox {
   margin-left: 1.5em;
   background-color: #f5f5f5;
   border: 1px solid #ccc;
@@ -1148,7 +1149,7 @@ eval-box-wrapped .stackTraceBox {
   white-space: pre;
   overflow-x: auto;
 }
-eval-box-wrapped .heading {
+eval-box .heading {
   line-height: 30px;
   position: relative;
   box-sizing: border-box;
@@ -1156,24 +1157,24 @@ eval-box-wrapped .heading {
   min-width: 450px;
   padding-right: 150px;
 }
-eval-box-wrapped .heading .textbox {
+eval-box .heading .textbox {
   width: 100%;
   min-width: 300px;
 }
-eval-box-wrapped .heading .buttons {
+eval-box .heading .buttons {
   position: absolute;
   top: 0;
   right: 0px;
 }
-eval-box-wrapped .heading .buttons button{
+eval-box .heading .buttons button{
   margin-right: 1em;
 }
-eval-box-wrapped.historyExpr,
-eval-box-wrapped .historyValue {
+eval-box.historyExpr,
+eval-box .historyValue {
   vertical-align: text-top;
   font: 400 14px 'Montserrat', sans-serif;
 }
-eval-box-wrapped .historyExpr button {
+eval-box .historyExpr button {
   display: block;
   color: black;
   border: none;
@@ -1183,18 +1184,18 @@ eval-box-wrapped .historyExpr button {
   cursor: pointer;
   white-space: pre-line;
 }
-eval-box-wrapped .historyExpr button:hover {
+eval-box .historyExpr button:hover {
   background-color: #fff3e3;
 }
-eval-box-wrapped .historyValue {
+eval-box .historyValue {
   display: block;
   padding: 6px 6px;
 }
-eval-box-wrapped .historyDelete button {
+eval-box .historyDelete button {
   border: none;
   background: none;
 }
-eval-box-wrapped .historyDelete button:hover {
+eval-box .historyDelete button:hover {
   color: #BB3311;
 }
 
@@ -1218,13 +1219,11 @@ flag-list .value {
 }
 
 /* function-ref */
-/* TODO(cbernaschina) fix function-ref-wrapped to function-ref when wrapper
-removed */
 
-function-ref-wrapped > a[href]:hover {
+function-ref > a[href]:hover {
   text-decoration: underline;
 }
-function-ref-wrapped > a[href] {
+function-ref > a[href] {
   color: #0489c3;
   text-decoration: none;
 }
@@ -1320,28 +1319,26 @@ inbound-reference .stackTraceBox {
 }
 
 /* instance-ref */
-/* TODO(cbernaschina) fix instance-ref-wrapped to instance-ref when wrapper
-removed */
 
-instance-ref-wrapped > a[href]:hover {
+instance-ref > a[href]:hover {
   text-decoration: underline;
 }
-instance-ref-wrapped > a[href] {
+instance-ref > a[href] {
   color: #0489c3;
   text-decoration: none;
 }
-instance-ref-wrapped > a[href] * {
+instance-ref > a[href] * {
   color: inherit;
 }
-instance-ref-wrapped .emphasize {
+instance-ref .emphasize {
   font-style: italic;
 }
-instance-ref-wrapped .indent {
+instance-ref .indent {
   margin-left: 1.5em;
   font: 400 14px 'Montserrat', sans-serif;
   line-height: 150%;
 }
-instance-ref-wrapped .stackTraceBox {
+instance-ref .stackTraceBox {
   margin-left: 1.5em;
   background-color: #f5f5f5;
   border: 1px solid #ccc;
@@ -1396,13 +1393,11 @@ isolate-reconnect div.doubleSpaced {
 }
 
 /* isolate-ref */
-/* TODO(cbernaschina) fix isolate-ref-wrapped to isolate-ref when wrapper
-removed */
 
-isolate-ref-wrapped > a[href]:hover {
+isolate-ref > a[href]:hover {
   text-decoration: underline;
 }
-isolate-ref-wrapped > a[href] {
+isolate-ref > a[href] {
   color: #0489c3;
   text-decoration: none;
 }
@@ -1445,13 +1440,11 @@ isolate-shared-summary .errorBox {
 }
 
 /* library-ref */
-/* TODO(cbernaschina) fix library-ref-wrapped to library-ref when wrapper
-removed */
 
-library-ref-wrapped > a[href]:hover {
+library-ref > a[href]:hover {
   text-decoration: underline;
 }
-library-ref-wrapped > a[href] {
+library-ref > a[href] {
   color: #0489c3;
   text-decoration: none;
 }
@@ -1515,17 +1508,15 @@ logging-list .SHOUT {
 }
 
 /* megamorphic-cache-ref */
-/* TODO(cbernaschina) fix megamorphic-cache-ref-wrapped to megamorphic-cache-ref
-when wrapper removed */
 
-megamorphic-cache-ref-wrapped > a[href]:hover {
+megamorphic-cache-ref > a[href]:hover {
     text-decoration: underline;
 }
-megamorphic-cache-ref-wrapped > a[href] {
+megamorphic-cache-ref > a[href] {
     color: #0489c3;
     text-decoration: none;
 }
-megamorphic-cache-ref-wrapped > a[href] * {
+megamorphic-cache-ref > a[href] * {
     color: inherit;
 }
 
@@ -1561,13 +1552,115 @@ metrics-page > div > .graph {
   padding-top: 300px;
 }
 
+/* nav-bar */
+
+nav.nav-bar {
+  line-height: normal;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+nav.nav-bar > ul {
+  display: inline-table;
+  position: relative;
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+  width: 100%;
+  z-index: 1000;
+  font: 400 16px 'Montserrat', sans-serif;
+  color: white;
+  background-color: #0489c3;
+}
+
+/* nav-menu */
+li.nav-menu:before {
+  display: inline-block;
+  content: '>';
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+nav.nav-bar > ul *:first-child li.nav-menu:before {
+  content: '';
+  margin-left: 0;
+  margin-right: 0;
+}
+li.nav-menu, .nav-menu_label {
+  display: inline-block;
+}
+.nav-menu_label > a {
+  display: inline-block;
+  padding: 12px 8px;
+  color: White;
+  text-decoration: none;
+}
+.nav-menu_label:hover > a {
+  background: #455;
+}
+.nav-menu_label > ul {
+  display: none;
+  position: absolute;
+  top: 98%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  z-index: 1000;
+  font: 400 16px 'Montserrat', sans-serif;
+  color: white;
+  background: #567;
+}
+.nav-menu_label > ul:after {
+  content: ""; clear: both; display: block;
+}
+.nav-menu_label:hover > ul {
+  display: block;
+}
+
+/* nav-menu-item */
+
+nav-menu-item li.nav-menu-item {
+  float: none;
+  border-top: 1px solid #677;
+  border-bottom: 1px solid #556; position: relative;
+}
+nav-menu-item li.nav-menu-item:hover {
+  background: #455;
+}
+nav-menu-item li.nav-menu-item > a {
+  display: block;
+  padding: 12px 12px;
+  color: white;
+  text-decoration: none;
+}
+nav-menu-item li.nav-menu-item > ul {
+  display: none;
+  position: absolute;
+  top:0;
+  left: 100%;
+  list-style: none;
+  padding: 0;
+  margin-left: 0;
+  width: auto;
+  z-index: 1000;
+  font: 400 16px 'Montserrat', sans-serif;
+  color: white;
+  background: #567;
+}
+nav-menu-item li.nav-menu-item > ul:after {
+  content: ""; clear: both; display: block;
+}
+nav-menu-item li.nav-menu-item:hover > ul {
+  display: block;
+}
+
 /* nav-notify */
-/* TODO(cbernaschina) fix nav-notify-wrapped to nav-notify when wrapper
-removed */
-nav-notify-wrapped > div {
+
+nav-notify > div {
   float: right;
 }
-nav-notify-wrapped > div > div {
+nav-notify > div > div {
   display: block;
   position: absolute;
   top: 98%;
@@ -1639,10 +1732,8 @@ nav-exception > div > button:hover, nav-event > div > button:hover {
 }
 
 /* nav-refresh */
-/* TODO(cbernaschina) fix nav-refresh-wrapped to nav-refresh when wrapper
-removed */
 
-nav-refresh-wrapped > li > button {
+nav-refresh > li > button {
   color: #000;
   margin: 3px;
   padding: 8px;
@@ -1651,27 +1742,25 @@ nav-refresh-wrapped > li > button {
   font-size: 13px;
   font: 400 'Montserrat', sans-serif;
 }
-nav-refresh-wrapped > li > button[disabled] {
+nav-refresh > li > button[disabled] {
   color: #aaa;
   cursor: wait;
 }
-nav-refresh-wrapped > li {
+nav-refresh > li {
   float: right;
   margin: 0;
 }
 
 /* object-common && class-instances */
-/* TODO(cbernaschina) fix object-common-wrapped to object-common when wrapper
-removed */
 
 class-instances button:hover,
-object-common-wrapped button:hover {
+object-common button:hover {
   background-color: transparent;
   border: none;
   text-decoration: underline;
 }
 class-instances button,
-object-common-wrapped button {
+object-common button {
   background-color: transparent;
   border: none;
   color: #0489c3;
@@ -1784,27 +1873,23 @@ ports-page .port-number {
 }
 
 /* script-ref */
-/* TODO(cbernaschina) fix script-ref-wrapped to script-ref when wrapper
-removed */
 
-script-ref-wrapped > a[href]:hover {
+script-ref > a[href]:hover {
     text-decoration: underline;
 }
 
-script-ref-wrapped > a[href] {
+script-ref > a[href] {
     color: #0489c3;
     text-decoration: none;
 }
 
 /* source-link */
-/* TODO(cbernaschina) fix source-link-wrapped to source-link when wrapper
-removed */
 
-source-link-wrapped > a[href]:hover {
+source-link > a[href]:hover {
     text-decoration: underline;
 }
 
-source-link-wrapped > a[href] {
+source-link > a[href] {
     color: #0489c3;
     text-decoration: none;
 }
@@ -1857,14 +1942,12 @@ sample-buffer-control .shadow {
 }
 
 /* script-inset */
-/* TODO(cbernaschina) fix script-inset-wrapped to script-inset when wrapper
-removed */
 
-script-inset-wrapped {
+script-inset {
   position: relative;
 }
-script-inset-wrapped button.refresh,
-script-inset-wrapped button.toggle-profile {
+script-inset button.refresh,
+script-inset button.toggle-profile {
   background-color: transparent;
   padding: 0;
   margin: 0;
@@ -1876,27 +1959,27 @@ script-inset-wrapped button.toggle-profile {
   line-height: 30px;
   font: 400 20px 'Montserrat', sans-serif;
 }
-script-inset-wrapped button.refresh {
+script-inset button.refresh {
   right: 5px;
   font-size: 25px;
 }
-script-inset-wrapped button.toggle-profile {
+script-inset button.toggle-profile {
   right: 30px;
   font-size: 20px;
 }
-script-inset-wrapped button.toggle-profile.enabled {
+script-inset button.toggle-profile.enabled {
   color: #BB3322;
 }
-script-inset-wrapped a {
+script-inset a {
   color: #0489c3;
   text-decoration: none;
 }
-script-inset-wrapped a:hover {
+script-inset a:hover {
   text-decoration: underline;
 }
-script-inset-wrapped .sourceInset {
+script-inset .sourceInset {
 }
-script-inset-wrapped .sourceTable {
+script-inset .sourceTable {
   position: relative;
   background-color: #f5f5f5;
   border: 1px solid #ccc;
@@ -1905,31 +1988,31 @@ script-inset-wrapped .sourceTable {
   box-sizing: border-box;
   overflow-x: scroll;
 }
-script-inset-wrapped .sourceRow {
+script-inset .sourceRow {
   display: flex;
   flex-direction: row;
   width: 100%;
 }
-script-inset-wrapped .sourceItem,
-script-inset-wrapped .sourceItemCurrent {
+script-inset .sourceItem,
+script-inset .sourceItemCurrent {
   vertical-align: top;
   font: 400 14px consolas, courier, monospace;
   line-height: 125%;
   white-space: pre;
   max-width: 0;
 }
-script-inset-wrapped .currentLine {
+script-inset .currentLine {
   background-color: #fff;
 }
-script-inset-wrapped .currentCol {
+script-inset .currentCol {
   background-color: #6cf;
 }
-script-inset-wrapped .hitsCurrent,
-script-inset-wrapped .hitsNone,
-script-inset-wrapped .hitsNotExecuted,
-script-inset-wrapped .hitsExecuted,
-script-inset-wrapped .hitsCompiled,
-script-inset-wrapped .hitsNotCompiled {
+script-inset .hitsCurrent,
+script-inset .hitsNone,
+script-inset .hitsNotExecuted,
+script-inset .hitsExecuted,
+script-inset .hitsCompiled,
+script-inset .hitsNotCompiled {
   display: table-cell;
   vertical-align: top;
   font: 400 14px consolas, courier, monospace;
@@ -1938,28 +2021,28 @@ script-inset-wrapped .hitsNotCompiled {
   text-align: right;
   color: #a8a8a8;
 }
-script-inset-wrapped .hitsCurrent {
+script-inset .hitsCurrent {
   background-color: #6cf;
   color: black;
 }
-script-inset-wrapped .hitsNotExecuted {
+script-inset .hitsNotExecuted {
   background-color: #faa;
 }
-script-inset-wrapped .hitsExecuted {
+script-inset .hitsExecuted {
   background-color: #aea;
 }
-script-inset-wrapped .hitsCompiled {
+script-inset .hitsCompiled {
   background-color: #e0e0e0;
 }
-script-inset-wrapped .hitsNotCompiled {
+script-inset .hitsNotCompiled {
   background-color: #f0c5c5;
 }
-script-inset-wrapped .noCopy {}
-script-inset-wrapped .emptyBreakpoint,
-script-inset-wrapped .possibleBreakpoint,
-script-inset-wrapped .busyBreakpoint,
-script-inset-wrapped .unresolvedBreakpoint,
-script-inset-wrapped .resolvedBreakpoint  {
+script-inset .noCopy {}
+script-inset .emptyBreakpoint,
+script-inset .possibleBreakpoint,
+script-inset .busyBreakpoint,
+script-inset .unresolvedBreakpoint,
+script-inset .resolvedBreakpoint  {
   display: table-cell;
   vertical-align: top;
   font: 400 14px consolas, courier, monospace;
@@ -1967,39 +2050,39 @@ script-inset-wrapped .resolvedBreakpoint  {
   text-align: center;
   cursor: pointer;
 }
-script-inset-wrapped .possibleBreakpoint {
+script-inset .possibleBreakpoint {
   color: #e0e0e0;
 }
-script-inset-wrapped .possibleBreakpoint:hover {
+script-inset .possibleBreakpoint:hover {
   color: white;
   background-color: #777;
 }
-script-inset-wrapped .busyBreakpoint {
+script-inset .busyBreakpoint {
   color: white;
   background-color: black;
   cursor: wait;
 }
-script-inset-wrapped .unresolvedBreakpoint {
+script-inset .unresolvedBreakpoint {
   color: white;
   background-color: #cac;
 }
-script-inset-wrapped .resolvedBreakpoint {
+script-inset .resolvedBreakpoint {
   color: white;
   background-color: #e66;
 }
-script-inset-wrapped .unresolvedBreakAnnotation {
+script-inset .unresolvedBreakAnnotation {
   color: white;
   background-color: #cac;
 }
-script-inset-wrapped .resolvedBreakAnnotation {
+script-inset .resolvedBreakAnnotation {
   color: white;
   background-color: #e66;
 }
-script-inset-wrapped .notSourceProfile,
-script-inset-wrapped .noProfile,
-script-inset-wrapped .coldProfile,
-script-inset-wrapped .mediumProfile,
-script-inset-wrapped .hotProfile {
+script-inset .notSourceProfile,
+script-inset .noProfile,
+script-inset .coldProfile,
+script-inset .mediumProfile,
+script-inset .hotProfile {
   display: table-cell;
   vertical-align: top;
   font: 400 14px consolas, courier, monospace;
@@ -2009,18 +2092,18 @@ script-inset-wrapped .hotProfile {
   margin-left: 5px;
   margin-right: 5px;
 }
-script-inset-wrapped .notSourceProfile {
+script-inset .notSourceProfile {
 }
-script-inset-wrapped .noProfile {
+script-inset .noProfile {
   background-color: #e0e0e0;
 }
-script-inset-wrapped .coldProfile {
+script-inset .coldProfile {
   background-color: #aea;
 }
-script-inset-wrapped .mediumProfile {
+script-inset .mediumProfile {
   background-color: #fe9;
 }
-script-inset-wrapped .hotProfile {
+script-inset .hotProfile {
   background-color: #faa;
 }