| OLD | NEW |
|---|
| (Empty) |
| 1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | |
| 2 <link rel="import" href="action_link.html"> | |
| 3 <link rel="import" href="observatory_element.html"> | |
| 4 | |
| 5 <polymer-element name="nav-bar" extends="observatory-element"> | |
| 6 <template> | |
| 7 <link rel="stylesheet" href="css/shared.css"> | |
| 8 <style> | |
| 9 nav { | |
| 10 position: fixed; | |
| 11 width: 100%; | |
| 12 z-index: 1000; | |
| 13 } | |
| 14 nav ul { | |
| 15 display: inline-table; | |
| 16 position: relative; | |
| 17 list-style: none; | |
| 18 padding-left: 0; | |
| 19 margin-left: 0; | |
| 20 width: 100%; | |
| 21 z-index: 1000; | |
| 22 font: 400 16px 'Montserrat', sans-serif; | |
| 23 color: white; | |
| 24 background-color: #0489c3; | |
| 25 } | |
| 26 nav ul:after { | |
| 27 content: ""; clear: both; display: block; | |
| 28 } | |
| 29 .vertical-spacer { | |
| 30 height: 40px; | |
| 31 background-color: #0489c3; | |
| 32 } | |
| 33 </style> | |
| 34 <nav> | |
| 35 <ul> | |
| 36 <nav-notify events="{{ app.notifications }}"></nav-notify> | |
| 37 <content></content> | |
| 38 </ul> | |
| 39 </nav> | |
| 40 <div class="vertical-spacer"> | |
| 41 </div> | |
| 42 <template if="{{ pad }}"> | |
| 43 <br> | |
| 44 </template> | |
| 45 </template> | |
| 46 </polymer-element> | |
| 47 | |
| 48 <polymer-element name="nav-menu" extends="observatory-element"> | |
| 49 <template> | |
| 50 <style> | |
| 51 .menu, .spacer { | |
| 52 float: left; | |
| 53 } | |
| 54 .menu a, .spacer { | |
| 55 display: block; | |
| 56 padding: 12px 8px; | |
| 57 color: White; | |
| 58 text-decoration: none; | |
| 59 } | |
| 60 .menu:hover { | |
| 61 background: #455; | |
| 62 } | |
| 63 .menu ul { | |
| 64 display: none; | |
| 65 position: absolute; | |
| 66 top: 98%; | |
| 67 list-style: none; | |
| 68 margin: 0; | |
| 69 padding: 0; | |
| 70 width: auto; | |
| 71 z-index: 1000; | |
| 72 font: 400 16px 'Montserrat', sans-serif; | |
| 73 color: white; | |
| 74 background: #567; | |
| 75 } | |
| 76 .menu ul:after { | |
| 77 content: ""; clear: both; display: block; | |
| 78 } | |
| 79 .menu:hover > ul { | |
| 80 display: block; | |
| 81 } | |
| 82 </style> | |
| 83 | |
| 84 <li class="menu"> | |
| 85 <a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a> | |
| 86 <ul><content></content></ul> | |
| 87 </li> | |
| 88 <template if="{{ !last }}"> | |
| 89 <li class="spacer">></li> | |
| 90 </template> | |
| 91 | |
| 92 </template> | |
| 93 </polymer-element> | |
| 94 | |
| 95 <polymer-element name="nav-menu-item" extends="observatory-element"> | |
| 96 <template> | |
| 97 <style> | |
| 98 li { | |
| 99 float: none; | |
| 100 border-top: 1px solid #677; | |
| 101 border-bottom: 1px solid #556; position: relative; | |
| 102 } | |
| 103 li:hover { | |
| 104 background: #455; | |
| 105 } | |
| 106 li ul { | |
| 107 display: none; | |
| 108 position: absolute; | |
| 109 top:0; | |
| 110 left: 100%; | |
| 111 list-style: none; | |
| 112 padding: 0; | |
| 113 margin-left: 0; | |
| 114 width: auto; | |
| 115 z-index: 1000; | |
| 116 font: 400 16px 'Montserrat', sans-serif; | |
| 117 color: white; | |
| 118 background: #567; | |
| 119 } | |
| 120 li ul:after { | |
| 121 content: ""; clear: both; display: block; | |
| 122 } | |
| 123 li:hover > ul { | |
| 124 display: block; | |
| 125 } | |
| 126 li a { | |
| 127 display: block; | |
| 128 padding: 12px 12px; | |
| 129 color: white; | |
| 130 text-decoration: none; | |
| 131 } | |
| 132 </style> | |
| 133 <li><a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a> | |
| 134 <ul><content></content></ul> | |
| 135 </li> | |
| 136 </template> | |
| 137 </polymer-element> | |
| 138 | |
| 139 <polymer-element name="nav-refresh" extends="observatory-element"> | |
| 140 <template> | |
| 141 <style> | |
| 142 .active { | |
| 143 color: #aaa; | |
| 144 cursor: wait; | |
| 145 } | |
| 146 .idle { | |
| 147 color: #000; | |
| 148 } | |
| 149 li { | |
| 150 float: right; | |
| 151 margin: 0; | |
| 152 } | |
| 153 li button { | |
| 154 margin: 3px; | |
| 155 padding: 8px; | |
| 156 } | |
| 157 </style> | |
| 158 <li> | |
| 159 <template if="{{ active }}"> | |
| 160 <button class="active" on-click="{{ buttonClick }}">{{ label }}</button> | |
| 161 </template> | |
| 162 <template if="{{ !active }}"> | |
| 163 <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button> | |
| 164 </template> | |
| 165 </li> | |
| 166 </template> | |
| 167 </polymer-element> | |
| 168 | |
| 169 <polymer-element name="nav-control" extends="observatory-element"> | |
| 170 <template> | |
| 171 <style> | |
| 172 .black { | |
| 173 color: #000; | |
| 174 } | |
| 175 li { | |
| 176 float: right; | |
| 177 margin: 0; | |
| 178 } | |
| 179 button { | |
| 180 margin: 3px; | |
| 181 padding: 8px; | |
| 182 } | |
| 183 </style> | |
| 184 <!-- Disable until issues with history in Dartium are fixed | |
| 185 <li> | |
| 186 <button class="black" on-click="{{ back }}">◀</button> | |
| 187 <button class="black" on-click="{{ forward }}">▶</button> | |
| 188 </li> | |
| 189 --> | |
| 190 </template> | |
| 191 </polymer-element> | |
| 192 | |
| 193 <polymer-element name="top-nav-menu"> | |
| 194 <template> | |
| 195 <nav-menu link="/vm" anchor="Observatory" last="{{ last }}"> | |
| 196 <nav-menu-item link="/vm-connect/" anchor="Connect to a different VM"></na
v-menu-item> | |
| 197 <content></content> | |
| 198 </nav-menu> | |
| 199 </template> | |
| 200 </polymer-element> | |
| 201 | |
| 202 <polymer-element name="isolate-nav-menu" extends="observatory-element"> | |
| 203 <template> | |
| 204 <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last="
{{ last }}"> | |
| 205 <nav-menu-item link="{{ '/debugger' + isolate.link }}" | |
| 206 anchor="debugger"></nav-menu-item> | |
| 207 <nav-menu-item link="{{ isolate.relativeLink('profile') }}" | |
| 208 anchor="cpu profile"></nav-menu-item> | |
| 209 <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}" | |
| 210 anchor="allocation profile"></nav-menu-item> | |
| 211 <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}" | |
| 212 anchor="heap map"></nav-menu-item> | |
| 213 <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}" | |
| 214 anchor="breakpoints"></nav-menu-item> | |
| 215 <content></content> | |
| 216 </nav-menu> | |
| 217 </template> | |
| 218 </polymer-element> | |
| 219 | |
| 220 <polymer-element name="library-nav-menu" extends="observatory-element"> | |
| 221 <template> | |
| 222 <nav-menu link="{{ library.link }}" | |
| 223 anchor="{{ library.name }}" last="{{ last }}"> | |
| 224 <content></content> | |
| 225 </nav-menu> | |
| 226 </template> | |
| 227 </polymer-element> | |
| 228 | |
| 229 <polymer-element name="class-nav-menu" extends="observatory-element"> | |
| 230 <template> | |
| 231 <nav-menu link="{{ cls.link }}" | |
| 232 anchor="{{ cls.name }}" last="{{ last }}"> | |
| 233 <content></content> | |
| 234 </nav-menu> | |
| 235 </template> | |
| 236 </polymer-element> | |
| 237 | |
| 238 <polymer-element name="nav-notify" extends="observatory-element"> | |
| 239 <template> | |
| 240 <style> | |
| 241 .menu { | |
| 242 float: right; | |
| 243 } | |
| 244 .menu .list { | |
| 245 display: block; | |
| 246 position: absolute; | |
| 247 top: 98%; | |
| 248 right: 0; | |
| 249 margin: 0; | |
| 250 padding: 0; | |
| 251 width: auto; | |
| 252 z-index: 1000; | |
| 253 font: 400 12px 'Montserrat', sans-serif; | |
| 254 color: white; | |
| 255 background: none; | |
| 256 } | |
| 257 </style> | |
| 258 | |
| 259 <div class="menu"> | |
| 260 <div class="list"> | |
| 261 <template repeat="{{ event in events }}"> | |
| 262 <nav-notify-item events="{{ events }}" event="{{ event }}"> | |
| 263 </nav-notify-item> | |
| 264 </template> | |
| 265 </div> | |
| 266 </div> | |
| 267 </template> | |
| 268 </polymer-element> | |
| 269 | |
| 270 <polymer-element name="nav-notify-item" extends="observatory-element"> | |
| 271 <template> | |
| 272 <style> | |
| 273 .item { | |
| 274 position: relative; | |
| 275 padding: 16px; | |
| 276 margin-top: 10px; | |
| 277 margin-right: 10px; | |
| 278 padding-right: 25px; | |
| 279 width: 200px; | |
| 280 color: #ddd; | |
| 281 background: rgba(0,0,0,.6); | |
| 282 border: solid 2px white; | |
| 283 box-shadow: 0 0 5px black; | |
| 284 border-radius: 5px; | |
| 285 animation: fadein 1s; | |
| 286 } | |
| 287 | |
| 288 @keyframes fadein { | |
| 289 from { opacity: 0; } | |
| 290 to { opacity: 1; } | |
| 291 } | |
| 292 | |
| 293 a.link { | |
| 294 color: white; | |
| 295 text-decoration: none; | |
| 296 } | |
| 297 a.link:hover { | |
| 298 text-decoration: underline; | |
| 299 } | |
| 300 | |
| 301 a.boxclose { | |
| 302 position: absolute; | |
| 303 display: block; | |
| 304 top: 4px; | |
| 305 right: 4px; | |
| 306 height: 18px; | |
| 307 width: 18px; | |
| 308 line-height: 16px; | |
| 309 border-radius: 9px; | |
| 310 color: white; | |
| 311 font-size: 18px; | |
| 312 cursor: pointer; | |
| 313 text-align: center; | |
| 314 } | |
| 315 a.boxclose:hover { | |
| 316 background: rgba(255,255,255,0.5); | |
| 317 } | |
| 318 </style> | |
| 319 <template if="{{ event.eventType == 'IsolateInterrupted' || | |
| 320 event.eventType == 'BreakpointReached' || | |
| 321 event.eventType == 'ExceptionThrown' }}"> | |
| 322 <div class="item"> | |
| 323 Isolate | |
| 324 <a class="link" on-click="{{ goto }}" | |
| 325 _href="{{ event.isolate.link }}">{{ event.isolate.name }}</a> | |
| 326 is paused | |
| 327 <template if="{{ event.breakpoint != null }}"> | |
| 328 at breakpoint | |
| 329 </template> | |
| 330 <template if="{{ event.eventType == 'ExceptionThrown' }}"> | |
| 331 at exception | |
| 332 </template> | |
| 333 | |
| 334 <br><br> | |
| 335 <action-link callback="{{ resume }}" label="resume" color="white"> | |
| 336 </action-link> | |
| 337 <action-link callback="{{ stepInto }}" label="step" color="white"> | |
| 338 </action-link> | |
| 339 <action-link callback="{{ stepOver }}" label="step over" | |
| 340 color="white"></action-link> | |
| 341 <action-link callback="{{ stepOut }}" label="step out" | |
| 342 color="white"></action-link> | |
| 343 <a class="boxclose" on-click="{{ closeItem }}">×</a> | |
| 344 </div> | |
| 345 </template> | |
| 346 <template if="{{ event.eventType == 'VMDisconnected' }}"> | |
| 347 <div class="item"> | |
| 348 Disconnected from VM | |
| 349 <br><br> | |
| 350 <a class="boxclose" on-click="{{ closeItem }}">×</a> | |
| 351 </div> | |
| 352 </template> | |
| 353 </template> | |
| 354 </polymer-element> | |
| 355 | |
| 356 | |
| 357 <script type="application/dart" src="nav_bar.dart"></script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 837723004:
Build Observatory as part of runtime (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart