| <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 events="{{ app.notifications }}"></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="nav-control" extends="observatory-element"> |
| <template> |
| <style> |
| .black { |
| color: #000; |
| } |
| li { |
| float: right; |
| margin: 0; |
| } |
| button { |
| margin: 3px; |
| padding: 8px; |
| } |
| </style> |
| <!-- Disable until issues with history in Dartium are fixed |
| <li> |
| <button class="black" on-click="{{ back }}">◀</button> |
| <button class="black" on-click="{{ forward }}">▶</button> |
| </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 different VM"></nav-menu-item> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="isolate-nav-menu" extends="observatory-element"> |
| <template> |
| <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last="{{ last }}"> |
| <nav-menu-item link="{{ '/debugger' + isolate.link }}" |
| anchor="debugger"></nav-menu-item> |
| <nav-menu-item link="{{ isolate.relativeLink('profile') }}" |
| anchor="cpu profile"></nav-menu-item> |
| <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}" |
| anchor="allocation profile"></nav-menu-item> |
| <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}" |
| anchor="heap map"></nav-menu-item> |
| <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}" |
| anchor="breakpoints"></nav-menu-item> |
| <content></content> |
| </nav-menu> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="library-nav-menu" extends="observatory-element"> |
| <template> |
| <nav-menu link="{{ library.link }}" |
| 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="{{ cls.link }}" |
| 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="{{ event in events }}"> |
| <nav-notify-item events="{{ events }}" event="{{ event }}"> |
| </nav-notify-item> |
| </template> |
| </div> |
| </div> |
| </template> |
| </polymer-element> |
| |
| <polymer-element name="nav-notify-item" extends="observatory-element"> |
| <template> |
| <style> |
| .item { |
| position: relative; |
| padding: 16px; |
| margin-top: 10px; |
| margin-right: 10px; |
| padding-right: 25px; |
| width: 200px; |
| 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.eventType == 'IsolateInterrupted' || |
| event.eventType == 'BreakpointReached' || |
| event.eventType == 'ExceptionThrown' }}"> |
| <div class="item"> |
| Isolate |
| <a class="link" on-click="{{ goto }}" |
| _href="{{ event.isolate.link }}">{{ event.isolate.name }}</a> |
| is paused |
| <template if="{{ event.breakpoint != null }}"> |
| at breakpoint |
| </template> |
| <template if="{{ event.eventType == 'ExceptionThrown' }}"> |
| at exception |
| </template> |
| |
| <br><br> |
| <action-link callback="{{ resume }}" label="resume" color="white"> |
| </action-link> |
| <action-link callback="{{ stepInto }}" label="step" color="white"> |
| </action-link> |
| <action-link callback="{{ stepOver }}" label="step over" |
| color="white"></action-link> |
| <action-link callback="{{ stepOut }}" label="step out" |
| color="white"></action-link> |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| <template if="{{ event.eventType == 'VMDisconnected' }}"> |
| <div class="item"> |
| Disconnected from VM |
| <br><br> |
| <a class="boxclose" on-click="{{ closeItem }}">×</a> |
| </div> |
| </template> |
| </template> |
| </polymer-element> |
| |
| |
| <script type="application/dart" src="nav_bar.dart"></script> |