| <link rel="import" href="../../../../packages/polymer/polymer.html"> |
| <link rel="import" href="action_link.html"> |
| <link rel="import" href="observatory_element.html"> |
| |
| <polymer-element name="nav-bar" extends="observatory-element"> |
| <template> |
| <link rel="stylesheet" href="css/shared.css"> |
| <style> |
| nav { |
| position: fixed; |
| width: 100%; |
| z-index: 1000; |
| } |
| nav ul { |
| display: inline-table; |
| position: relative; |
| list-style: none; |
| padding-left: 0; |
| margin-left: 0; |
| width: 100%; |
| z-index: 1000; |
| font: 400 16px 'Montserrat', sans-serif; |
| color: white; |
| background-color: #0489c3; |
| } |
| nav ul:after { |
| content: ""; clear: both; display: block; |
| } |
| .vertical-spacer { |
| height: 40px; |
| background-color: #0489c3; |
| } |
| </style> |
| <nav> |
| <ul> |
| <nav-notify notifications="{{ app.notifications }}" |
| notifyOnPause="{{ notifyOnPause }}"></nav-notify> |
| <content></content> |
| </ul> |
| </nav> |
| <div class="vertical-spacer"> |
| </div> |
| <template if="{{ pad }}"> |
| <br> |
| </template> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-menu" extends="observatory-element"> |
| <template> |
| <style> |
| .menu, .spacer { |
| float: left; |
| } |
| .menu a, .spacer { |
| display: block; |
| padding: 12px 8px; |
| color: White; |
| text-decoration: none; |
| } |
| .menu:hover { |
| background: #455; |
| } |
| .menu 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; |
| } |
| .menu ul:after { |
| content: ""; clear: both; display: block; |
| } |
| .menu:hover > ul { |
| display: block; |
| } |
| </style> |
| |
| <li class="menu"> |
| <a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a> |
| <ul><content></content></ul> |
| </li> |
| <template if="{{ !last }}"> |
| <li class="spacer">></li> |
| </template> |
| |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-menu-item" extends="observatory-element"> |
| <template> |
| <style> |
| li { |
| float: none; |
| border-top: 1px solid #677; |
| border-bottom: 1px solid #556; position: relative; |
| } |
| li:hover { |
| background: #455; |
| } |
| li 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; |
| } |
| li ul:after { |
| content: ""; clear: both; display: block; |
| } |
| li:hover > ul { |
| display: block; |
| } |
| li a { |
| display: block; |
| padding: 12px 12px; |
| color: white; |
| text-decoration: none; |
| } |
| </style> |
| <li><a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a> |
| <ul><content></content></ul> |
| </li> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-refresh" extends="observatory-element"> |
| <template> |
| <style> |
| .active { |
| color: #aaa; |
| cursor: wait; |
| } |
| .idle { |
| color: #000; |
| } |
| li { |
| float: right; |
| margin: 0; |
| } |
| li button { |
| margin: 3px; |
| padding: 8px; |
| } |
| </style> |
| <li> |
| <template if="{{ active }}"> |
| <button class="active" on-click="{{ buttonClick }}">{{ label }}</button> |
| </template> |
| <template if="{{ !active }}"> |
| <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button> |
| </template> |
| </li> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="top-nav-menu"> |
| <template> |
| <nav-menu link="/vm" anchor="Observatory" last="{{ last }}"> |
| <nav-menu-item link="/vm-connect" anchor="Connect to a VM"></nav-menu-item> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="vm-nav-menu"> |
| <template> |
| <nav-menu link="/vm" anchor="{{ vm.target.name }}" last="{{ last }}"> |
| <template repeat="{{ isolate in vm.isolates }}"> |
| <nav-menu-item link="{{ makeLink('/inspect', isolate) }}" |
| anchor="{{ isolate.name }}"></nav-menu-item> |
| </template> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="isolate-nav-menu" extends="observatory-element"> |
| <template> |
| <nav-menu link="{{ makeLink('/inspect', isolate) }}" anchor="{{ isolate.name }}" last="{{ last }}"> |
| <nav-menu-item link="{{ makeLink('/debugger', isolate) }}" |
| anchor="debugger"></nav-menu-item> |
| <nav-menu-item link="{{ makeLink('/profiler', isolate) }}" |
| anchor="cpu profile"></nav-menu-item> |
| <nav-menu-item link="{{ makeLink('/allocation-profiler', isolate) }}" |
| anchor="allocation profile"></nav-menu-item> |
| <nav-menu-item link="{{ makeLink('/heap-map', isolate) }}" |
| anchor="heap map"></nav-menu-item> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="library-nav-menu" extends="observatory-element"> |
| <template> |
| <nav-menu link="{{ makeLink('/inspect', library) }}" |
| anchor="{{ library.name }}" last="{{ last }}"> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="class-nav-menu" extends="observatory-element"> |
| <template> |
| <nav-menu link="{{ makeLink('/inspect', cls) }}" |
| anchor="{{ cls.name }}" last="{{ last }}"> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-notify" extends="observatory-element"> |
| <template> |
| <style> |
| .menu { |
| float: right; |
| } |
| .menu .list { |
| display: block; |
| position: absolute; |
| top: 98%; |
| right: 0; |
| margin: 0; |
| padding: 0; |
| width: auto; |
| z-index: 1000; |
| font: 400 12px 'Montserrat', sans-serif; |
| color: white; |
| background: none; |
| } |
| </style> |
| |
| <div class="menu"> |
| <div class="list"> |
| <template repeat="{{ notification in notifications }}"> |
| <template if="{{ notification.event != null }}"> |
| <nav-notify-event notifications="{{ notifications }}" |
| notification="{{ notification }}" |
| event="{{ notification.event }}" |
| notifyOnPause="{{ notifyOnPause }}"> |
| </nav-notify-event> |
| </template> |
| <template if="{{ notification.exception != null }}"> |
| <nav-notify-exception notifications="{{ notifications }}" |
| notification="{{ notification }}" |
| exception="{{ notification.exception }}" |
| stacktrace="{{ notification.stacktrace }}"> |
| </nav-notify-exception> |
| </template> |
| </template> |
| </div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-notify-event" extends="observatory-element"> |
| <template> |
| <style> |
| .item { |
| position: relative; |
| padding: 16px; |
| margin-top: 10px; |
| margin-right: 10px; |
| padding-right: 25px; |
| width: 250px; |
| color: #ddd; |
| background: rgba(0,0,0,.6); |
| border: solid 2px white; |
| box-shadow: 0 0 5px black; |
| border-radius: 5px; |
| animation: fadein 1s; |
| } |
| |
| @keyframes fadein { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| a.link { |
| color: white; |
| text-decoration: none; |
| } |
| a.link:hover { |
| text-decoration: underline; |
| } |
| |
| a.boxclose { |
| position: absolute; |
| display: block; |
| top: 4px; |
| right: 4px; |
| height: 18px; |
| width: 18px; |
| line-height: 16px; |
| border-radius: 9px; |
| color: white; |
| font-size: 18px; |
| cursor: pointer; |
| text-align: center; |
| } |
| a.boxclose:hover { |
| background: rgba(255,255,255,0.5); |
| } |
| </style> |
| <template if="{{ event != null }}"> |
| <template if="{{ notifyOnPause && event.isPauseEvent }}"> |
| <div class="item"> |
| Isolate |
| <a class="link" on-click="{{ goto }}" |
| _href="{{ gotoLink('/inspect', event.isolate) }}">{{ event.isolate.name }}</a> |
| is paused |
| <template if="{{ event.kind == 'PauseStart' }}"> |
| at isolate start |
| </template> |
| <template if="{{ event.kind == 'PauseExit' }}"> |
| at isolate exit |
| </template> |
| <template if="{{ event.breakpoint != null }}"> |
| at breakpoint {{ event.breakpoint.number }} |
| </template> |
| <template if="{{ event.kind == 'PauseException' }}"> |
| due to exception |
| </template> |
| |
| <br><br> |
| [<a class="link" on-click="{{ goto }}" |
| _href="{{ gotoLink('/debugger', event.isolate) }}">debug</a>] |
| |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| <template if="{{ event.kind == 'ConnectionClosed' }}"> |
| <div class="item"> |
| Disconnected from VM: {{ event.reason }} |
| <br><br> |
| [<a class="link" on-click="{{ goto }}" |
| _href="{{ gotoLink('/vm-connect') }}">Connect to a VM</a>] |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| <template if="{{ event.kind == 'Inspect' }}"> |
| <div class="item"> |
| Inspect <any-service-ref ref="{{ event.inspectee }}"></any-service-ref> |
| <br><br> |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| <polymer-element name="nav-notify-exception" extends="observatory-element"> |
| <template> |
| <style> |
| .item { |
| position: relative; |
| padding: 16px; |
| margin-top: 10px; |
| margin-right: 10px; |
| padding-right: 25px; |
| width: 250px; |
| color: #ddd; |
| background: rgba(0,0,0,.6); |
| border: solid 2px white; |
| box-shadow: 0 0 5px black; |
| border-radius: 5px; |
| animation: fadein 1s; |
| } |
| |
| @keyframes fadein { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| a.link { |
| color: white; |
| text-decoration: none; |
| } |
| a.link:hover { |
| text-decoration: underline; |
| } |
| .indent { |
| margin-left:20px; |
| } |
| |
| a.boxclose { |
| position: absolute; |
| display: block; |
| top: 4px; |
| right: 4px; |
| height: 18px; |
| width: 18px; |
| line-height: 16px; |
| border-radius: 9px; |
| color: white; |
| font-size: 18px; |
| cursor: pointer; |
| text-align: center; |
| } |
| a.boxclose:hover { |
| background: rgba(255,255,255,0.5); |
| } |
| </style> |
| <template if="{{ isUnexpectedError }}"> |
| <!-- TODO(turnidge): Add a file-a-bug link to this notification --> |
| <div class="item"> |
| Unexpected exception:<br><br> |
| <div class="indent">{{ exception.toString() }}</div><br> |
| <template if="{{ stacktrace != null }}"> |
| Stacktrace:<br><br> |
| <div class="indent">{{ stacktrace.toString() }}</div> |
| <br> |
| </template> |
| [<a class="link" on-click="{{ goto }}" |
| _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>] |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| <template if="{{ isNetworkError }}"> |
| <div class="item"> |
| The request cannot be completed because the VM is currently |
| disconnected. |
| <br><br> |
| [<a class="link" on-click="{{ goto }}" |
| _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>] |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| <script type="application/dart" src="nav_bar.dart"></script> |