| 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 notifications="{{ app.notifications }}" | |
| 37 notifyOnPause="{{ notifyOnPause }}"></nav-notify> | |
| 38 <content></content> | |
| 39 </ul> | |
| 40 </nav> | |
| 41 <div class="vertical-spacer"> | |
| 42 </div> | |
| 43 <template if="{{ pad }}"> | |
| 44 <br> | |
| 45 </template> | |
| 46 </template> | |
| 47 </polymer-element> | |
| 48 | |
| 49 <polymer-element name="nav-menu" extends="observatory-element"> | |
| 50 <template> | |
| 51 <style> | |
| 52 .menu, .spacer { | |
| 53 float: left; | |
| 54 } | |
| 55 .menu a, .spacer { | |
| 56 display: block; | |
| 57 padding: 12px 8px; | |
| 58 color: White; | |
| 59 text-decoration: none; | |
| 60 } | |
| 61 .menu:hover { | |
| 62 background: #455; | |
| 63 } | |
| 64 .menu ul { | |
| 65 display: none; | |
| 66 position: absolute; | |
| 67 top: 98%; | |
| 68 list-style: none; | |
| 69 margin: 0; | |
| 70 padding: 0; | |
| 71 width: auto; | |
| 72 z-index: 1000; | |
| 73 font: 400 16px 'Montserrat', sans-serif; | |
| 74 color: white; | |
| 75 background: #567; | |
| 76 } | |
| 77 .menu ul:after { | |
| 78 content: ""; clear: both; display: block; | |
| 79 } | |
| 80 .menu:hover > ul { | |
| 81 display: block; | |
| 82 } | |
| 83 </style> | |
| 84 | |
| 85 <li class="menu"> | |
| 86 <a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a> | |
| 87 <ul><content></content></ul> | |
| 88 </li> | |
| 89 <template if="{{ !last }}"> | |
| 90 <li class="spacer">></li> | |
| 91 </template> | |
| 92 | |
| 93 </template> | |
| 94 </polymer-element> | |
| 95 | |
| 96 <polymer-element name="nav-menu-item" extends="observatory-element"> | |
| 97 <template> | |
| 98 <style> | |
| 99 li { | |
| 100 float: none; | |
| 101 border-top: 1px solid #677; | |
| 102 border-bottom: 1px solid #556; position: relative; | |
| 103 } | |
| 104 li:hover { | |
| 105 background: #455; | |
| 106 } | |
| 107 li ul { | |
| 108 display: none; | |
| 109 position: absolute; | |
| 110 top:0; | |
| 111 left: 100%; | |
| 112 list-style: none; | |
| 113 padding: 0; | |
| 114 margin-left: 0; | |
| 115 width: auto; | |
| 116 z-index: 1000; | |
| 117 font: 400 16px 'Montserrat', sans-serif; | |
| 118 color: white; | |
| 119 background: #567; | |
| 120 } | |
| 121 li ul:after { | |
| 122 content: ""; clear: both; display: block; | |
| 123 } | |
| 124 li:hover > ul { | |
| 125 display: block; | |
| 126 } | |
| 127 li a { | |
| 128 display: block; | |
| 129 padding: 12px 12px; | |
| 130 color: white; | |
| 131 text-decoration: none; | |
| 132 } | |
| 133 </style> | |
| 134 <li><a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a> | |
| 135 <ul><content></content></ul> | |
| 136 </li> | |
| 137 </template> | |
| 138 </polymer-element> | |
| 139 | |
| 140 <polymer-element name="nav-refresh" extends="observatory-element"> | |
| 141 <template> | |
| 142 <style> | |
| 143 .active { | |
| 144 color: #aaa; | |
| 145 cursor: wait; | |
| 146 } | |
| 147 .idle { | |
| 148 color: #000; | |
| 149 } | |
| 150 li { | |
| 151 float: right; | |
| 152 margin: 0; | |
| 153 } | |
| 154 li button { | |
| 155 margin: 3px; | |
| 156 padding: 8px; | |
| 157 } | |
| 158 </style> | |
| 159 <li> | |
| 160 <template if="{{ active }}"> | |
| 161 <button class="active" on-click="{{ buttonClick }}">{{ label }}</button> | |
| 162 </template> | |
| 163 <template if="{{ !active }}"> | |
| 164 <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button> | |
| 165 </template> | |
| 166 </li> | |
| 167 </template> | |
| 168 </polymer-element> | |
| 169 | |
| 170 <polymer-element name="top-nav-menu"> | |
| 171 <template> | |
| 172 <nav-menu link="/vm" anchor="Observatory" last="{{ last }}"> | |
| 173 <nav-menu-item link="/vm-connect" anchor="Connect to a VM"></nav-menu-item
> | |
| 174 <content></content> | |
| 175 </nav-menu> | |
| 176 </template> | |
| 177 </polymer-element> | |
| 178 | |
| 179 <polymer-element name="vm-nav-menu"> | |
| 180 <template> | |
| 181 <nav-menu link="/vm" anchor="{{ nameAndAddress(vm.name, vm.target) }}" last=
"{{ last }}"> | |
| 182 <template repeat="{{ isolate in vm.isolates }}"> | |
| 183 <nav-menu-item link="{{ makeLink('/inspect', isolate) }}" | |
| 184 anchor="{{ isolate.name }}"></nav-menu-item> | |
| 185 </template> | |
| 186 <content></content> | |
| 187 </nav-menu> | |
| 188 </template> | |
| 189 </polymer-element> | |
| 190 | |
| 191 <polymer-element name="isolate-nav-menu" extends="observatory-element"> | |
| 192 <template> | |
| 193 <nav-menu link="{{ makeLink('/inspect', isolate) }}" anchor="{{ isolate.name
}}" last="{{ last }}"> | |
| 194 <nav-menu-item link="{{ makeLink('/debugger', isolate) }}" | |
| 195 anchor="debugger"></nav-menu-item> | |
| 196 <nav-menu-item link="{{ makeLink('/class-tree', isolate) }}" | |
| 197 anchor="class hierarchy"></nav-menu-item> | |
| 198 <nav-menu-item link="{{ makeLink('/profiler', isolate) }}" | |
| 199 anchor="cpu profile"></nav-menu-item> | |
| 200 <nav-menu-item link="{{ makeLink('/profiler-table', isolate) }}" | |
| 201 anchor="cpu profile (table)"></nav-menu-item> | |
| 202 <nav-menu-item link="{{ makeLink('/allocation-profiler', isolate) }}" | |
| 203 anchor="allocation profile"></nav-menu-item> | |
| 204 <nav-menu-item link="{{ makeLink('/heap-map', isolate) }}" | |
| 205 anchor="heap map"></nav-menu-item> | |
| 206 <nav-menu-item link="{{ makeLink('/metrics', isolate) }}" | |
| 207 anchor="metrics"></nav-menu-item> | |
| 208 <nav-menu-item link="{{ makeLink('/heap-snapshot', isolate) }}" | |
| 209 anchor="heap snapshot"></nav-menu-item> | |
| 210 <nav-menu-item link="{{ makeLink('/persistent-handles', isolate) }}" | |
| 211 anchor="persistent handles"></nav-menu-item> | |
| 212 <nav-menu-item link="{{ makeLink('/ports', isolate) }}" | |
| 213 anchor="ports"></nav-menu-item> | |
| 214 <nav-menu-item link="{{ makeLink('/logging', isolate) }}" | |
| 215 anchor="logging"></nav-menu-item> | |
| 216 <content></content> | |
| 217 </nav-menu> | |
| 218 </template> | |
| 219 </polymer-element> | |
| 220 | |
| 221 <polymer-element name="library-nav-menu" extends="observatory-element"> | |
| 222 <template> | |
| 223 <nav-menu link="{{ makeLink('/inspect', library) }}" | |
| 224 anchor="{{ library.name }}" last="{{ last }}"> | |
| 225 <content></content> | |
| 226 </nav-menu> | |
| 227 </template> | |
| 228 </polymer-element> | |
| 229 | |
| 230 <polymer-element name="class-nav-menu" extends="observatory-element"> | |
| 231 <template> | |
| 232 <nav-menu link="{{ makeLink('/inspect', cls) }}" | |
| 233 anchor="{{ cls.name }}" last="{{ last }}"> | |
| 234 <content></content> | |
| 235 </nav-menu> | |
| 236 </template> | |
| 237 </polymer-element> | |
| 238 | |
| 239 <polymer-element name="nav-notify" extends="observatory-element"> | |
| 240 <template> | |
| 241 <style> | |
| 242 .menu { | |
| 243 float: right; | |
| 244 } | |
| 245 .menu .list { | |
| 246 display: block; | |
| 247 position: absolute; | |
| 248 top: 98%; | |
| 249 right: 0; | |
| 250 margin: 0; | |
| 251 padding: 0; | |
| 252 width: auto; | |
| 253 z-index: 1000; | |
| 254 font: 400 12px 'Montserrat', sans-serif; | |
| 255 color: white; | |
| 256 background: none; | |
| 257 } | |
| 258 </style> | |
| 259 | |
| 260 <div class="menu"> | |
| 261 <div class="list"> | |
| 262 <template repeat="{{ notification in notifications }}"> | |
| 263 <template if="{{ notification.event != null }}"> | |
| 264 <nav-notify-event notifications="{{ notifications }}" | |
| 265 notification="{{ notification }}" | |
| 266 event="{{ notification.event }}" | |
| 267 notifyOnPause="{{ notifyOnPause }}"> | |
| 268 </nav-notify-event> | |
| 269 </template> | |
| 270 <template if="{{ notification.exception != null }}"> | |
| 271 <nav-notify-exception notifications="{{ notifications }}" | |
| 272 notification="{{ notification }}" | |
| 273 exception="{{ notification.exception }}" | |
| 274 stacktrace="{{ notification.stacktrace }}"> | |
| 275 </nav-notify-exception> | |
| 276 </template> | |
| 277 </template> | |
| 278 </div> | |
| 279 </div> | |
| 280 </template> | |
| 281 </polymer-element> | |
| 282 | |
| 283 <polymer-element name="nav-notify-event" extends="observatory-element"> | |
| 284 <template> | |
| 285 <style> | |
| 286 .item { | |
| 287 position: relative; | |
| 288 padding: 16px; | |
| 289 margin-top: 10px; | |
| 290 margin-right: 10px; | |
| 291 padding-right: 25px; | |
| 292 width: 250px; | |
| 293 color: #ddd; | |
| 294 background: rgba(0,0,0,.6); | |
| 295 border: solid 2px white; | |
| 296 box-shadow: 0 0 5px black; | |
| 297 border-radius: 5px; | |
| 298 animation: fadein 1s; | |
| 299 } | |
| 300 | |
| 301 .wide-item { | |
| 302 width: 50vw; | |
| 303 } | |
| 304 | |
| 305 @keyframes fadein { | |
| 306 from { opacity: 0; } | |
| 307 to { opacity: 1; } | |
| 308 } | |
| 309 | |
| 310 a.link { | |
| 311 color: white; | |
| 312 text-decoration: none; | |
| 313 } | |
| 314 a.link:hover { | |
| 315 text-decoration: underline; | |
| 316 } | |
| 317 | |
| 318 a.boxclose { | |
| 319 position: absolute; | |
| 320 display: block; | |
| 321 top: 4px; | |
| 322 right: 4px; | |
| 323 height: 18px; | |
| 324 width: 18px; | |
| 325 line-height: 16px; | |
| 326 border-radius: 9px; | |
| 327 color: white; | |
| 328 font-size: 18px; | |
| 329 cursor: pointer; | |
| 330 text-align: center; | |
| 331 } | |
| 332 a.boxclose:hover { | |
| 333 background: rgba(255,255,255,0.5); | |
| 334 } | |
| 335 .error { | |
| 336 white-space: pre; | |
| 337 } | |
| 338 </style> | |
| 339 <template if="{{ event != null }}"> | |
| 340 <template if="{{ notifyOnPause && event.isPauseEvent }}"> | |
| 341 <div class="item"> | |
| 342 Isolate | |
| 343 <a class="link" on-click="{{ goto }}" | |
| 344 _href="{{ gotoLink('/inspect', event.isolate) }}">{{ event.isolate.
name }}</a> | |
| 345 is paused | |
| 346 <template if="{{ event.kind == 'PauseStart' }}"> | |
| 347 at isolate start | |
| 348 </template> | |
| 349 <template if="{{ event.kind == 'PauseExit' }}"> | |
| 350 at isolate exit | |
| 351 </template> | |
| 352 <template if="{{ event.breakpoint != null }}"> | |
| 353 at breakpoint {{ event.breakpoint.number }} | |
| 354 </template> | |
| 355 <template if="{{ event.kind == 'PauseException' }}"> | |
| 356 due to exception | |
| 357 </template> | |
| 358 | |
| 359 <br><br> | |
| 360 [<a class="link" on-click="{{ goto }}" | |
| 361 _href="{{ gotoLink('/debugger', event.isolate) }}">debug</a>] | |
| 362 | |
| 363 <a class="boxclose" on-click="{{ closeItem }}">×</a> | |
| 364 </div> | |
| 365 </template> | |
| 366 <template if="{{ event.kind == 'ConnectionClosed' }}"> | |
| 367 <div class="item"> | |
| 368 Disconnected from VM: {{ event.reason }} | |
| 369 <br><br> | |
| 370 [<a class="link" on-click="{{ goto }}" | |
| 371 _href="{{ gotoLink('/vm-connect') }}">Connect to a VM</a>] | |
| 372 <a class="boxclose" on-click="{{ closeItem }}">×</a> | |
| 373 </div> | |
| 374 </template> | |
| 375 <template if="{{ event.kind == 'Inspect' }}"> | |
| 376 <div class="item"> | |
| 377 Inspect <any-service-ref ref="{{ event.inspectee }}"></any-service-ref
> | |
| 378 <br><br> | |
| 379 <a class="boxclose" on-click="{{ closeItem }}">×</a> | |
| 380 </div> | |
| 381 </template> | |
| 382 <template if="{{ event.kind == 'IsolateReload' }}"> | |
| 383 <div class="wide-item item"> | |
| 384 Isolate reload | |
| 385 <template if="{{ event.reloadError != null }}"> | |
| 386 failed: | |
| 387 <br> | |
| 388 <br> | |
| 389 <div class="indent error">{{ event.reloadError.message.toString() }}
</div><br> | |
| 390 </template> | |
| 391 <template if="{{ event.reloadError == null }}"> | |
| 392 succeeded | |
| 393 </template> | |
| 394 <a class="boxclose" on-click="{{ closeItem }}">×</a> | |
| 395 </div> | |
| 396 </template> | |
| 397 </template> | |
| 398 </template> | |
| 399 </polymer-element> | |
| 400 | |
| 401 | |
| 402 <polymer-element name="nav-notify-exception" extends="observatory-element"> | |
| 403 <template> | |
| 404 <style> | |
| 405 .item { | |
| 406 position: relative; | |
| 407 padding: 16px; | |
| 408 margin-top: 10px; | |
| 409 margin-right: 10px; | |
| 410 padding-right: 25px; | |
| 411 width: 500px; | |
| 412 color: #ddd; | |
| 413 background: rgba(0,0,0,.6); | |
| 414 border: solid 2px white; | |
| 415 box-shadow: 0 0 5px black; | |
| 416 border-radius: 5px; | |
| 417 animation: fadein 1s; | |
| 418 } | |
| 419 | |
| 420 @keyframes fadein { | |
| 421 from { opacity: 0; } | |
| 422 to { opacity: 1; } | |
| 423 } | |
| 424 | |
| 425 a.link { | |
| 426 color: white; | |
| 427 text-decoration: none; | |
| 428 } | |
| 429 a.link:hover { | |
| 430 text-decoration: underline; | |
| 431 } | |
| 432 .indent { | |
| 433 margin-left:20px; | |
| 434 } | |
| 435 | |
| 436 a.boxclose { | |
| 437 position: absolute; | |
| 438 display: block; | |
| 439 top: 4px; | |
| 440 right: 4px; | |
| 441 height: 18px; | |
| 442 width: 18px; | |
| 443 line-height: 16px; | |
| 444 border-radius: 9px; | |
| 445 color: white; | |
| 446 font-size: 18px; | |
| 447 cursor: pointer; | |
| 448 text-align: center; | |
| 449 } | |
| 450 a.boxclose:hover { | |
| 451 background: rgba(255,255,255,0.5); | |
| 452 } | |
| 453 .stacktrace { | |
| 454 white-space: pre | |
| 455 } | |
| 456 </style> | |
| 457 <template if="{{ isUnexpectedError }}"> | |
| 458 <!-- TODO(turnidge): Add a file-a-bug link to this notification --> | |
| 459 <div class="item"> | |
| 460 Unexpected exception:<br><br> | |
| 461 <div class="indent">{{ exception.toString() }}</div><br> | |
| 462 <template if="{{ stacktrace != null }}"> | |
| 463 Stacktrace:<br><br> | |
| 464 <div class="indent stacktrace">{{ stacktrace.toString() }}</div> | |
| 465 <br> | |
| 466 </template> | |
| 467 [<a class="link" on-click="{{ goto }}" | |
| 468 _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>] | |
| 469 <a class="boxclose" on-click="{{ closeItem }}">×</a> | |
| 470 </div> | |
| 471 </template> | |
| 472 <template if="{{ isNetworkError }}"> | |
| 473 <div class="item"> | |
| 474 The request cannot be completed because the VM is currently | |
| 475 disconnected. | |
| 476 <br><br> | |
| 477 [<a class="link" on-click="{{ goto }}" | |
| 478 _href="{{ gotoLink('vm-connect') }}">Connect to a different VM</a>] | |
| 479 <a class="boxclose" on-click="{{ closeItem }}">×</a> | |
| 480 </div> | |
| 481 </template> | |
| 482 </template> | |
| 483 </polymer-element> | |
| 484 | |
| 485 | |
| 486 <script type="application/dart" src="nav_bar.dart"></script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2119733003:
Wrapping leaf nodes in non polymer elements (Closed)
Base URL: git@github.com:dart-lang/sdk.git@master