Removed polymer & mirror from 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 509 matching lines @@
   background-color: transparent;
   color: #0489c3;
   border-style: none;
 }
 
 allocation-profile .collection-item > button:hover {
   text-decoration: underline;
 }
 
 /* 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;
 }
 
 /* class-tree */
 
 class-tree {
   position: relative;
   display: block;
   height: 100%;
@@ skipping 61 matching lines @@
 code-view tr:hover > td {
   background-color: #F4C7C3;
 }
 
 code-view .code-comment {
   color: grey;
   font-style: italic;
 }
 
 /* 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;
 }
 
 /* cpu-profile */
 
 cpu-profile {
   position: relative;
   display: block;
   height: 100%;
 }
@@ skipping 167 matching lines @@
 
 cpu-profile-virtual-tree .tree-item > .exclusive {
   margin-right: 1.5em;
 }
 
 cpu-profile-virtual-tree .tree-item > .name {
   display: inline;
   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 {
   display: block;
   margin: 0px 20px 10px 20px;
 }
 debugger-console .normal {
   font: normal 14px consolas, courier, monospace;
   white-space: pre;
   line-height: 125%;
@@ skipping 247 matching lines @@
   line-height: 125%;
 }
 
 debugger-stack .sampledMessage.hidden,
 debugger-stack .noMessages.hidden,
 debugger-stack .noStack.hidden {
   display: none;
 }
 
 /* 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;
   padding-right: 10px;
   font-family: consolas, courier, monospace;
   font-size: 1em;
   line-height: 1.2em;
   white-space: 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;
   padding: 0;
   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;
   padding: 10px;
   font-family: consolas, courier, monospace;
   font-size: 12px;
   white-space: pre;
   overflow-x: auto;
 }
-eval-box-wrapped .heading {
+eval-box .heading {
   line-height: 30px;
   position: relative;
   box-sizing: border-box;
   width: 100%;
   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;
   background: none;
   text-decoration: none;
   padding: 6px 6px;
   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;
 }
 
 /* flag-list */
 
 flag-list .comment {
   color: #aaa;
 }
 
 flag-list .flag {
   padding: 3px 0;
 }
 
 flag-list .name {
   font-weight: bold;
   margin-right: 0.7em;
 }
 
 flag-list .value {
   margin-left: 0.7em;
 }
 
 /* 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;
 }
 
 /* heap-snapshot */
 
 heap-snapshot .statusMessage {
   font-size: 150%;
   font-weight: bold;
 }
@@ skipping 75 matching lines @@
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   padding: 10px;
   font-family: consolas, courier, monospace;
   font-size: 12px;
   white-space: pre;
   overflow-x: auto;
 }
 
 /* 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;
   padding: 10px;
   font-family: consolas, courier, monospace;
   font-size: 12px;
   white-space: pre;
   overflow-x: auto;
 }
 
@@ skipping 34 matching lines @@
   text-decoration: underline;
 }
 
 /* isolate-reconnect */
 
 isolate-reconnect div.doubleSpaced {
   line-height: 2em;
 }
 
 /* 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;
 }
 
 /* isolate-run-state */
 
 isolate-run-state > span {
   font-weight: bold;
 }
 
@@ skipping 22 matching lines @@
   background-color: #f5f5f5;
   border: 1px solid #ccc;
   padding: 2em;
   font-family: consolas, courier, monospace;
   font-size: 1em;
   line-height: 1.2em;
   white-space: pre;
 }
 
 /* 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;
 }
 
 .nav-option {
   float: right;
   margin: 3px;
   padding: 8px;
 }
 
@@ skipping 43 matching lines @@
   background-color: #FFE0B2;
 }
 logging-list .SEVERE {
   background-color: #FFCCBC;
 }
 logging-list .SHOUT {
   background-color: #FFCDD2;
 }
 
 /* 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;
 }
 
 /* metric-graph */
 
 metric-graph {
   display: block;
   height: 100%;
 }
 
@@ skipping 15 matching lines @@
   height: 100%;
 }
 
 metrics-page > div > .graph {
   display: block;
   height: 100%;
   margin-top: -300px;
   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: 1em;
+  margin-right: 1em;
+}
+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%;
   right: 0;
   margin: 0;
   padding: 0;
   width: auto;
   z-index: 1000;
   background: none;
 }
@@ skipping 51 matching lines @@
   font-size: 18px;
   cursor: pointer;
   text-align: center;
 }
 
 nav-exception > div > button:hover, nav-event > div > button:hover {
   background: rgba(255,255,255,0.5);
 }
 
 /* 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;
   border-width: 2px;
   line-height: 13px;
   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;
   padding: 0;
   margin: -8px 4px;
   font-size: 20px;
   text-decoration: none;
 }
 
 /* object-pool-ref */
@@ skipping 92 matching lines @@
   text-decoration: underline;
 }
 
 /* ports-page */
 
 ports-page .port-number {
   font-weight: bold;
 }
 
 /* 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;
 }
 
 
 /* observatory-application */
 
 observatory-application {
   display: block;
   height: 100%;
@@ skipping 32 matching lines @@
 sample-buffer-control .red {
   background-color: #f2dede;
 }
 
 sample-buffer-control .shadow {
   box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
               0 2px 5px 0 rgba(0, 0, 0, 0.26);
 }
 
 /* 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;
   border: none;
   position: absolute;
   display: inline-block;
   top: 5px;
   color: #888888;
   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;
   padding: 10px;
   width: 100%;
   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;
   margin-left: 5px;
   margin-right: 5px;
   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;
   width: 1em;
   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;
   width: 4em;
   text-align: right;
   cursor: pointer;
   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;
 }
 
 /* stack-trace-tree-config */
 
 stack-trace-tree-config {
   white-space: nowrap;
 }
 
 /* timeline-page */
@@ skipping 153 matching lines @@
 
 vm-connect-target > button.delete-button:hover {
   background: #ff0000;
 }
 
 /* vm-connect */
 
 vm-connect ul {
   list-style-type: none;
 }