Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(105)

Side by Side Diff: runtime/bin/vmservice/observatory/deployed/web/index.html

Issue 839543002: Revert "Build Observatory with runtime" (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!DOCTYPE html><html style="height: 100%"><head>
2 <meta charset="utf-8">
3 <title>Dart VM Observatory</title>
4 <script src="packages/web_components/webcomponents.min.js"></script>
5 <script src="packages/web_components/dart_support.js"></script>
6
7
8
9
10
11
12 </head>
13 <body style="height: 100%"><div hidden=""><style shim-shadowdom="">
14 /*******************************
15 Flex Layout
16 *******************************/
17
18 html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
19 display: -ms-flexbox;
20 display: -webkit-flex;
21 display: flex;
22 }
23
24 html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
25 display: -ms-inline-flexbox;
26 display: -webkit-inline-flex;
27 display: inline-flex;
28 }
29
30 html /deep/ [layout][horizontal] {
31 -ms-flex-direction: row;
32 -webkit-flex-direction: row;
33 flex-direction: row;
34 }
35
36 html /deep/ [layout][horizontal][reverse] {
37 -ms-flex-direction: row-reverse;
38 -webkit-flex-direction: row-reverse;
39 flex-direction: row-reverse;
40 }
41
42 html /deep/ [layout][vertical] {
43 -ms-flex-direction: column;
44 -webkit-flex-direction: column;
45 flex-direction: column;
46 }
47
48 html /deep/ [layout][vertical][reverse] {
49 -ms-flex-direction: column-reverse;
50 -webkit-flex-direction: column-reverse;
51 flex-direction: column-reverse;
52 }
53
54 html /deep/ [layout][wrap] {
55 -ms-flex-wrap: wrap;
56 -webkit-flex-wrap: wrap;
57 flex-wrap: wrap;
58 }
59
60 html /deep/ [layout][wrap-reverse] {
61 -ms-flex-wrap: wrap-reverse;
62 -webkit-flex-wrap: wrap-reverse;
63 flex-wrap: wrap-reverse;
64 }
65
66 html /deep/ [flex] {
67 -ms-flex: 1 1 0.000000001px;
68 -webkit-flex: 1;
69 flex: 1;
70 -webkit-flex-basis: 0.000000001px;
71 flex-basis: 0.000000001px;
72 }
73
74 html /deep/ [vertical][layout] > [flex][auto-vertical], html /deep/ [vertical][l ayout]::shadow [flex][auto-vertical] {
75 -ms-flex: 1 1 auto;
76 -webkit-flex-basis: auto;
77 flex-basis: auto;
78 }
79
80 html /deep/ [flex][auto] {
81 -ms-flex: 1 1 auto;
82 -webkit-flex-basis: auto;
83 flex-basis: auto;
84 }
85
86 html /deep/ [flex][none] {
87 -ms-flex: none;
88 -webkit-flex: none;
89 flex: none;
90 }
91
92 html /deep/ [flex][one] {
93 -ms-flex: 1;
94 -webkit-flex: 1;
95 flex: 1;
96 }
97
98 html /deep/ [flex][two] {
99 -ms-flex: 2;
100 -webkit-flex: 2;
101 flex: 2;
102 }
103
104 html /deep/ [flex][three] {
105 -ms-flex: 3;
106 -webkit-flex: 3;
107 flex: 3;
108 }
109
110 html /deep/ [flex][four] {
111 -ms-flex: 4;
112 -webkit-flex: 4;
113 flex: 4;
114 }
115
116 html /deep/ [flex][five] {
117 -ms-flex: 5;
118 -webkit-flex: 5;
119 flex: 5;
120 }
121
122 html /deep/ [flex][six] {
123 -ms-flex: 6;
124 -webkit-flex: 6;
125 flex: 6;
126 }
127
128 html /deep/ [flex][seven] {
129 -ms-flex: 7;
130 -webkit-flex: 7;
131 flex: 7;
132 }
133
134 html /deep/ [flex][eight] {
135 -ms-flex: 8;
136 -webkit-flex: 8;
137 flex: 8;
138 }
139
140 html /deep/ [flex][nine] {
141 -ms-flex: 9;
142 -webkit-flex: 9;
143 flex: 9;
144 }
145
146 html /deep/ [flex][ten] {
147 -ms-flex: 10;
148 -webkit-flex: 10;
149 flex: 10;
150 }
151
152 html /deep/ [flex][eleven] {
153 -ms-flex: 11;
154 -webkit-flex: 11;
155 flex: 11;
156 }
157
158 html /deep/ [flex][twelve] {
159 -ms-flex: 12;
160 -webkit-flex: 12;
161 flex: 12;
162 }
163
164 /* alignment in cross axis */
165
166 html /deep/ [layout][start] {
167 -ms-flex-align: start;
168 -webkit-align-items: flex-start;
169 align-items: flex-start;
170 }
171
172 html /deep/ [layout][center], html /deep/ [layout][center-center] {
173 -ms-flex-align: center;
174 -webkit-align-items: center;
175 align-items: center;
176 }
177
178 html /deep/ [layout][end] {
179 -ms-flex-align: end;
180 -webkit-align-items: flex-end;
181 align-items: flex-end;
182 }
183
184 /* alignment in main axis */
185
186 html /deep/ [layout][start-justified] {
187 -ms-flex-pack: start;
188 -webkit-justify-content: flex-start;
189 justify-content: flex-start;
190 }
191
192 html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {
193 -ms-flex-pack: center;
194 -webkit-justify-content: center;
195 justify-content: center;
196 }
197
198 html /deep/ [layout][end-justified] {
199 -ms-flex-pack: end;
200 -webkit-justify-content: flex-end;
201 justify-content: flex-end;
202 }
203
204 html /deep/ [layout][around-justified] {
205 -ms-flex-pack: distribute;
206 -webkit-justify-content: space-around;
207 justify-content: space-around;
208 }
209
210 html /deep/ [layout][justified] {
211 -ms-flex-pack: justify;
212 -webkit-justify-content: space-between;
213 justify-content: space-between;
214 }
215
216 /* self alignment */
217
218 html /deep/ [self-start] {
219 -ms-align-self: flex-start;
220 -webkit-align-self: flex-start;
221 align-self: flex-start;
222 }
223
224 html /deep/ [self-center] {
225 -ms-align-self: center;
226 -webkit-align-self: center;
227 align-self: center;
228 }
229
230 html /deep/ [self-end] {
231 -ms-align-self: flex-end;
232 -webkit-align-self: flex-end;
233 align-self: flex-end;
234 }
235
236 html /deep/ [self-stretch] {
237 -ms-align-self: stretch;
238 -webkit-align-self: stretch;
239 align-self: stretch;
240 }
241
242 /*******************************
243 Other Layout
244 *******************************/
245
246 html /deep/ [block] {
247 display: block;
248 }
249
250 /* ie support for hidden */
251 html /deep/ [hidden] {
252 display: none !important;
253 }
254
255 html /deep/ [relative] {
256 position: relative;
257 }
258
259 html /deep/ [fit] {
260 position: absolute;
261 top: 0;
262 right: 0;
263 bottom: 0;
264 left: 0;
265 }
266
267 body[fullbleed] {
268 margin: 0;
269 height: 100vh;
270 }
271
272 /*******************************
273 Other
274 *******************************/
275
276 html /deep/ [segment], html /deep/ segment {
277 display: block;
278 position: relative;
279 -webkit-box-sizing: border-box;
280 -ms-box-sizing: border-box;
281 box-sizing: border-box;
282 margin: 1em 0.5em;
283 padding: 1em;
284 background-color: white;
285 -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
286 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
287 border-radius: 5px 5px 5px 5px;
288 }
289
290 </style>
291
292 <script src="packages/polymer/src/js/polymer/polymer.min.js"></script>
293
294 <script>
295 // TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
296 // script tag is necessary to work around a bug in Chrome 36.
297 </script>
298
299 <!-- unminified for debugging:
300 <link rel="import" href="src/js/polymer/layout.html">
301 <script src="src/js/polymer/polymer.js"></script>
302 -->
303 <script type="text/javascript" src="https://www.google.com/jsapi"></script><link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css">
304
305
306
307 <polymer-element name="curly-block">
308 <template>
309 <style>
310 .idle {
311 display: inline-block;
312 color: #0489c3;
313 cursor: pointer;
314 }
315 .busy {
316 display: inline-block;
317 color: white;
318 cursor: wait;
319 }
320 </style>
321 <template if="{{ expanded }}">
322 <template if="{{ busy }}">
323 {<div class="busy">&nbsp;&nbsp;⊟&nbsp;&nbsp;</div>
324 <br>
325 <content></content>
326 }
327 </template>
328 <template if="{{ !busy }}">
329 {<a on-click="{{ toggleExpand }}"><div class="idle">&nbsp;&nbsp;⊟&nbsp;& nbsp;</div></a>
330 <br>
331 <content></content>
332 }
333 </template>
334 </template>
335
336 <template if="{{ !expanded }}">
337 <template if="{{ busy }}">
338 {<div class="busy">&nbsp;&nbsp;⊞&nbsp;&nbsp;</div>}
339 </template>
340 <template if="{{ !busy }}">
341 {<a on-click="{{ toggleExpand }}"><div class="idle">&nbsp;&nbsp;⊞&nbsp;& nbsp;</div></a>}
342 </template>
343 </template>
344 </template>
345 </polymer-element>
346
347
348
349
350
351 <polymer-element name="observatory-element">
352 </polymer-element>
353
354
355
356
357
358 <polymer-element name="service-ref" extends="observatory-element">
359 </polymer-element>
360
361 <polymer-element name="any-service-ref" extends="observatory-element">
362 </polymer-element>
363
364 <polymer-element name="object-ref" extends="service-ref">
365 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css">
366 <template if="{{ nameIsEmpty }}">
367 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.vmType }}</em></a>
368 </template>
369 <template if="{{ !nameIsEmpty }}">
370 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ name }}</em></a>
371 </template>
372 </template>
373 </polymer-element>
374
375
376
377 <polymer-element name="instance-ref" extends="service-ref">
378 <template>
379 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
380 <style>
381 .errorBox {
382 background-color: #f5f5f5;
383 border: 1px solid #ccc;
384 padding: 10px;
385 font-family: consolas, courier, monospace;
386 font-size: 1em;
387 line-height: 1.2em;
388 white-space: pre;
389 }
390 </style>
391 <span>
392 <template if="{{ ref.isSentinel }}">
393 <div title="{{ hoverText }}">{{ ref.valueAsString }}</div>
394 </template>
395
396 <template if="{{ ref.isBool || ref.isInt ||
397 ref.isDouble || ref.isNull }}">
398 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.valueAsString }}</a>
399 </template>
400
401 <template if="{{ ref.isString }}">
402 <a on-click="{{ goto }}" _href="{{ url }}">{{ asStringLiteral(ref.valueA sString, ref.valueAsStringIsTruncated) }}</a>
403 </template>
404
405
406 <template if="{{ ref.isAbstractType }}">
407 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
408 </template>
409
410 <template if="{{ ref.isClosure }}">
411 <a on-click="{{ goto }}" _href="{{ url }}">
412 <!-- TODO(turnidge): Switch this to fully-qualified function -->
413 {{ ref.closureFunc.name }}
414 </a>
415 </template>
416
417 <template if="{{ ref.isPlainInstance }}">
418 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> </a>
419 <curly-block callback="{{ expander() }}">
420 <div class="memberList">
421 <template repeat="{{ field in ref.fields }}">
422 <div class="memberItem">
423 <div class="memberName">
424 {{ field['decl'].name }}
425 </div>
426 <div class="memberValue">
427 <any-service-ref ref="{{ field['value'] }}"></any-service-ref>
428 </div>
429 </div>
430 </template>
431 </div>
432 </curly-block>
433 </template>
434
435 <template if="{{ ref.isList }}">
436 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> ({{ ref.length }})</a>
437 <curly-block callback="{{ expander() }}">
438 <div class="memberList">
439 <template repeat="{{ element in ref.elements }}">
440 <div class="memberItem">
441 <div class="memberName">[{{ element['index']}}]</div>
442 <div class="memberValue">
443 <any-service-ref ref="{{ element['value'] }}"></any-service-re f>
444 </div>
445 </div>
446 </template>
447 </div>
448 </curly-block>
449 </template>
450
451 <template if="{{ ref.isMirrorReference }}">
452 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> </a>
453 <curly-block callback="{{ expander() }}">
454 <div class="memberList">
455 <div class="memberItem">
456 <div class="memberName">referent</div>
457 <div class="memberValue">
458 <any-service-ref ref="{{ ref.referent }}"></any-service-ref>
459 </div>
460 </div>
461 </div>
462 </curly-block>
463 </template>
464
465 <template if="{{ ref.isWeakProperty }}">
466 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.clazz.name }}</em> </a>
467 <curly-block callback="{{ expander() }}">
468 <div class="memberList">
469 <div class="memberItem">
470 <div class="memberName">key</div>
471 <div class="memberValue">
472 <any-service-ref ref="{{ ref.key }}"></any-service-ref>
473 </div>
474 </div>
475 <div class="memberItem">
476 <div class="memberName">value</div>
477 <div class="memberValue">
478 <any-service-ref ref="{{ ref.value }}"></any-service-ref>
479 </div>
480 </div>
481 </div>
482 </curly-block>
483 </template>
484 </span>
485 </template>
486 </polymer-element>
487
488
489
490
491 <polymer-element name="action-link">
492 <template>
493 <style>
494 .idle {
495 color: #0489c3;
496 cursor: pointer;
497 text-decoration: none;
498 }
499 .idle:hover {
500 text-decoration: underline;
501 }
502 .busy {
503 color: #aaa;
504 cursor: wait;
505 text-decoration: none;
506 }
507 </style>
508
509 <template if="{{ busy }}">
510 <span class="busy">[{{ label }}]</span>
511 </template>
512 <template if="{{ !busy }}">
513 <template if="{{ color == null }}">
514 <span class="idle"><a on-click="{{ doAction }}">[{{ label }}]</a></span>
515 </template>
516 <template if="{{ color != null }}">
517 <span class="idle" style="color:{{ color }}"><a on-click="{{ doAction }} ">[{{ label }}]</a></span>
518 </template>
519 </template>
520 </template>
521 </polymer-element>
522
523
524
525
526
527
528
529
530 <polymer-element name="nav-bar" extends="observatory-element">
531 <template>
532 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
533 <style>
534 nav {
535 position: fixed;
536 width: 100%;
537 z-index: 1000;
538 }
539 nav ul {
540 display: inline-table;
541 position: relative;
542 list-style: none;
543 padding-left: 0;
544 margin-left: 0;
545 width: 100%;
546 z-index: 1000;
547 font: 400 16px 'Montserrat', sans-serif;
548 color: white;
549 background-color: #0489c3;
550 }
551 nav ul:after {
552 content: ""; clear: both; display: block;
553 }
554 .vertical-spacer {
555 height: 40px;
556 background-color: #0489c3;
557 }
558 </style>
559 <nav>
560 <ul>
561 <nav-notify events="{{ app.notifications }}"></nav-notify>
562 <content></content>
563 </ul>
564 </nav>
565 <div class="vertical-spacer">
566 </div>
567 <template if="{{ pad }}">
568 <br>
569 </template>
570 </template>
571 </polymer-element>
572
573 <polymer-element name="nav-menu" extends="observatory-element">
574 <template>
575 <style>
576 .menu, .spacer {
577 float: left;
578 }
579 .menu a, .spacer {
580 display: block;
581 padding: 12px 8px;
582 color: White;
583 text-decoration: none;
584 }
585 .menu:hover {
586 background: #455;
587 }
588 .menu ul {
589 display: none;
590 position: absolute;
591 top: 98%;
592 list-style: none;
593 margin: 0;
594 padding: 0;
595 width: auto;
596 z-index: 1000;
597 font: 400 16px 'Montserrat', sans-serif;
598 color: white;
599 background: #567;
600 }
601 .menu ul:after {
602 content: ""; clear: both; display: block;
603 }
604 .menu:hover > ul {
605 display: block;
606 }
607 </style>
608
609 <li class="menu">
610 <a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a>
611 <ul><content></content></ul>
612 </li>
613 <template if="{{ !last }}">
614 <li class="spacer">&gt;</li>
615 </template>
616
617 </template>
618 </polymer-element>
619
620 <polymer-element name="nav-menu-item" extends="observatory-element">
621 <template>
622 <style>
623 li {
624 float: none;
625 border-top: 1px solid #677;
626 border-bottom: 1px solid #556; position: relative;
627 }
628 li:hover {
629 background: #455;
630 }
631 li ul {
632 display: none;
633 position: absolute;
634 top:0;
635 left: 100%;
636 list-style: none;
637 padding: 0;
638 margin-left: 0;
639 width: auto;
640 z-index: 1000;
641 font: 400 16px 'Montserrat', sans-serif;
642 color: white;
643 background: #567;
644 }
645 li ul:after {
646 content: ""; clear: both; display: block;
647 }
648 li:hover > ul {
649 display: block;
650 }
651 li a {
652 display: block;
653 padding: 12px 12px;
654 color: white;
655 text-decoration: none;
656 }
657 </style>
658 <li><a on-click="{{ goto }}" _href="{{ gotoLink(link) }}">{{ anchor }}</a>
659 <ul><content></content></ul>
660 </li>
661 </template>
662 </polymer-element>
663
664 <polymer-element name="nav-refresh" extends="observatory-element">
665 <template>
666 <style>
667 .active {
668 color: #aaa;
669 cursor: wait;
670 }
671 .idle {
672 color: #000;
673 }
674 li {
675 float: right;
676 margin: 0;
677 }
678 li button {
679 margin: 3px;
680 padding: 8px;
681 }
682 </style>
683 <li>
684 <template if="{{ active }}">
685 <button class="active" on-click="{{ buttonClick }}">{{ label }}</button>
686 </template>
687 <template if="{{ !active }}">
688 <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button>
689 </template>
690 </li>
691 </template>
692 </polymer-element>
693
694 <polymer-element name="nav-control" extends="observatory-element">
695 <template>
696 <style>
697 .black {
698 color: #000;
699 }
700 li {
701 float: right;
702 margin: 0;
703 }
704 button {
705 margin: 3px;
706 padding: 8px;
707 }
708 </style>
709 <!-- Disable until issues with history in Dartium are fixed
710 <li>
711 <button class="black" on-click="{{ back }}">&#9664;</button>
712 <button class="black" on-click="{{ forward }}">&#9654;</button>
713 </li>
714 -->
715 </template>
716 </polymer-element>
717
718 <polymer-element name="top-nav-menu">
719 <template>
720 <nav-menu link="/vm" anchor="Observatory" last="{{ last }}">
721 <nav-menu-item link="/vm-connect/" anchor="Connect to a different VM"></na v-menu-item>
722 <content></content>
723 </nav-menu>
724 </template>
725 </polymer-element>
726
727 <polymer-element name="isolate-nav-menu" extends="observatory-element">
728 <template>
729 <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last=" {{ last }}">
730 <nav-menu-item link="{{ '/debugger' + isolate.link }}" anchor="debugger">< /nav-menu-item>
731 <nav-menu-item link="{{ isolate.relativeLink('profile') }}" anchor="cpu pr ofile"></nav-menu-item>
732 <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}" anch or="allocation profile"></nav-menu-item>
733 <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}" anchor="heap m ap"></nav-menu-item>
734 <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}" anch or="breakpoints"></nav-menu-item>
735 <content></content>
736 </nav-menu>
737 </template>
738 </polymer-element>
739
740 <polymer-element name="library-nav-menu" extends="observatory-element">
741 <template>
742 <nav-menu link="{{ library.link }}" anchor="{{ library.name }}" last="{{ las t }}">
743 <content></content>
744 </nav-menu>
745 </template>
746 </polymer-element>
747
748 <polymer-element name="class-nav-menu" extends="observatory-element">
749 <template>
750 <nav-menu link="{{ cls.link }}" anchor="{{ cls.name }}" last="{{ last }}">
751 <content></content>
752 </nav-menu>
753 </template>
754 </polymer-element>
755
756 <polymer-element name="nav-notify" extends="observatory-element">
757 <template>
758 <style>
759 .menu {
760 float: right;
761 }
762 .menu .list {
763 display: block;
764 position: absolute;
765 top: 98%;
766 right: 0;
767 margin: 0;
768 padding: 0;
769 width: auto;
770 z-index: 1000;
771 font: 400 12px 'Montserrat', sans-serif;
772 color: white;
773 background: none;
774 }
775 </style>
776
777 <div class="menu">
778 <div class="list">
779 <template repeat="{{ event in events }}">
780 <nav-notify-item events="{{ events }}" event="{{ event }}">
781 </nav-notify-item>
782 </template>
783 </div>
784 </div>
785 </template>
786 </polymer-element>
787
788 <polymer-element name="nav-notify-item" extends="observatory-element">
789 <template>
790 <style>
791 .item {
792 position: relative;
793 padding: 16px;
794 margin-top: 10px;
795 margin-right: 10px;
796 padding-right: 25px;
797 width: 200px;
798 color: #ddd;
799 background: rgba(0,0,0,.6);
800 border: solid 2px white;
801 box-shadow: 0 0 5px black;
802 border-radius: 5px;
803 animation: fadein 1s;
804 }
805
806 @keyframes fadein {
807 from { opacity: 0; }
808 to { opacity: 1; }
809 }
810
811 a.link {
812 color: white;
813 text-decoration: none;
814 }
815 a.link:hover {
816 text-decoration: underline;
817 }
818
819 a.boxclose {
820 position: absolute;
821 display: block;
822 top: 4px;
823 right: 4px;
824 height: 18px;
825 width: 18px;
826 line-height: 16px;
827 border-radius: 9px;
828 color: white;
829 font-size: 18px;
830 cursor: pointer;
831 text-align: center;
832 }
833 a.boxclose:hover {
834 background: rgba(255,255,255,0.5);
835 }
836 </style>
837 <template if="{{ event.eventType == 'IsolateInterrupted' ||
838 event.eventType == 'BreakpointReached' ||
839 event.eventType == 'ExceptionThrown' }}">
840 <div class="item">
841 Isolate
842 <a class="link" on-click="{{ goto }}" _href="{{ event.isolate.link }}">{ { event.isolate.name }}</a>
843 is paused
844 <template if="{{ event.breakpoint != null }}">
845 at breakpoint
846 </template>
847 <template if="{{ event.eventType == 'ExceptionThrown' }}">
848 at exception
849 </template>
850
851 <br><br>
852 <action-link callback="{{ resume }}" label="resume" color="white">
853 </action-link>
854 <action-link callback="{{ stepInto }}" label="step" color="white">
855 </action-link>
856 <action-link callback="{{ stepOver }}" label="step&nbsp;over" color="whi te"></action-link>
857 <action-link callback="{{ stepOut }}" label="step&nbsp;out" color="white "></action-link>
858 <a class="boxclose" on-click="{{ closeItem }}">×</a>
859 </div>
860 </template>
861 <template if="{{ event.eventType == 'VMDisconnected' }}">
862 <div class="item">
863 Disconnected from VM
864 <br><br>
865 <a class="boxclose" on-click="{{ closeItem }}">×</a>
866 </div>
867 </template>
868 </template>
869 </polymer-element>
870
871
872
873
874
875
876 <polymer-element name="breakpoint-list" extends="observatory-element">
877 <template>
878 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
879 <nav-bar>
880 <top-nav-menu></top-nav-menu>
881 <isolate-nav-menu isolate="{{ msg.isolate }}"></isolate-nav-menu>
882 <nav-menu link="{{ gotoLink(msg.isolate.relativeLink('debug/breakpoints')) }}" anchor="breakpoints" last="{{ true }}"></nav-menu>
883 <nav-refresh callback="{{ refresh }}"></nav-refresh>
884 <nav-control></nav-control>
885 </nav-bar>
886 <template if="{{ msg['breakpoints'].isEmpty }}">
887 <div>
888 <div>No breakpoints</div>
889 </div>
890 </template>
891 <template if="{{ msg['breakpoints'].isNotEmpty }}">
892 <ul class="list-group">
893 <template repeat="{{ bpt in msg['breakpoints'] }}">
894 <li class="list-group-item">
895 {{ bpt }}
896 </li>
897 </template>
898 </ul>
899 </template>
900 </template>
901 </polymer-element>
902
903
904
905
906
907
908 <polymer-element name="class-ref" extends="service-ref">
909 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css"><span><a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}</a></span></template>
910 </polymer-element>
911
912
913
914
915
916
917
918
919 <polymer-element name="class-tree" extends="observatory-element">
920 <template>
921 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
922 <style>
923 .table {
924 border-collapse: collapse!important;
925 width: 100%;
926 margin-bottom: 20px
927 }
928 .table thead > tr > th,
929 .table tbody > tr > th,
930 .table tfoot > tr > th,
931 .table thead > tr > td,
932 .table tbody > tr > td,
933 .table tfoot > tr > td {
934 padding: 8px;
935 vertical-align: top;
936 }
937 .table thead > tr > th {
938 vertical-align: bottom;
939 text-align: left;
940 border-bottom:2px solid #ddd;
941 }
942
943 tr:hover > td {
944 background-color: #FFF3E3;
945 }
946 .rowColor0 {
947 background-color: #FFE9CC;
948 }
949 .rowColor1 {
950 background-color: #FFDEB2;
951 }
952 .rowColor2 {
953 background-color: #FFD399;
954 }
955 .rowColor3 {
956 background-color: #FFC87F;
957 }
958 .rowColor4 {
959 background-color: #FFBD66;
960 }
961 .rowColor5 {
962 background-color: #FFB24C;
963 }
964 .rowColor6 {
965 background-color: #FFA733;
966 }
967 .rowColor7 {
968 background-color: #FF9C19;
969 }
970 .rowColor8 {
971 background-color: #FF9100;
972 }
973
974 .tooltip {
975 display: block;
976 position: absolute;
977 visibility: hidden;
978 opacity: 0;
979 transition: visibility 0s linear 0.5s;
980 transition: opacity .4s ease-in-out;
981 }
982
983 tr:hover .tooltip {
984 display: block;
985 position: absolute;
986 top: 100%;
987 right: 100%;
988 visibility: visible;
989 z-index: 999;
990 width: 400px;
991 color: #ffffff;
992 background-color: #0489c3;
993 border-top-right-radius: 8px;
994 border-top-left-radius: 8px;
995 border-bottom-right-radius: 8px;
996 border-bottom-left-radius: 8px;
997 transition: visibility 0s linear 0.5s;
998 transition: opacity .4s ease-in-out;
999 opacity: 1;
1000 }
1001
1002 .white {
1003 color: #ffffff;
1004 }
1005 </style>
1006 <nav-bar>
1007 <top-nav-menu last="{{ true }}"></top-nav-menu>
1008 <nav-control></nav-control>
1009 </nav-bar>
1010 <div class="content-centered">
1011 <h1>Class Hierarchy</h1>
1012 <table id="tableTree" class="table">
1013 <thead>
1014 <tr>
1015 <th>Class</th>
1016 </tr>
1017 </thead>
1018 <tbody>
1019 <tr template="" repeat="{{row in tree.rows }}">
1020 <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style= "{{ padding(row) }}">
1021 <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
1022 <class-ref ref="{{ row.cls }}"></class-ref>
1023 </td>
1024 </tr>
1025 </tbody>
1026 </table>
1027 </div>
1028 </template>
1029 </polymer-element>
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042 <polymer-element name="error-ref" extends="service-ref">
1043 <template>
1044 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1045 <style>
1046 .errorBox {
1047 background-color: #f5f5f5;
1048 border: 1px solid #ccc;
1049 padding: 10px;
1050 font-family: consolas, courier, monospace;
1051 font-size: 1em;
1052 line-height: 1.2em;
1053 white-space: pre;
1054 }
1055 </style>
1056 <span>
1057 <pre class="errorBox">{{ ref.kind }}: {{ ref.message }}</pre>
1058 </span>
1059 </template>
1060 </polymer-element>
1061
1062
1063
1064
1065 <polymer-element name="eval-box" extends="observatory-element">
1066 <template>
1067 <style>
1068 .textbox {
1069 flex-grow: 1;
1070 font: 400 16px 'Montserrat', sans-serif;
1071 }
1072 .bigtextbox {
1073 font: 400 16px 'Montserrat', sans-serif;
1074 }
1075 .button {
1076 font: 400 16px 'Montserrat', sans-serif;
1077 }
1078 .radios {
1079 display: inline;
1080 padding-right: 30px;
1081 }
1082 .radios label{
1083 padding-left: 10px;
1084 }
1085 .historyExpr, .historyValue {
1086 vertical-align: text-top;
1087 font: 400 14px 'Montserrat', sans-serif;
1088 }
1089 .historyExpr a {
1090 display: block;
1091 color: black;
1092 text-decoration: none;
1093 padding: 6px 6px;
1094 cursor: pointer;
1095 white-space: pre-line;
1096 }
1097 .historyExpr a:hover {
1098 background-color: #fff3e3;
1099 }
1100 .historyValue {
1101 display: block;
1102 padding: 6px 6px;
1103 }
1104 </style>
1105 <form style="display:flex; flex-direction:row; align-items:flex-end">
1106 <template if="{{ lineMode == '1-line' }}">
1107 <input class="textbox" type="text" value="{{ text }}">
1108 </template>
1109 <template if="{{ lineMode == 'N-line' }}">
1110 <textarea class="bigtextbox" rows="5" cols="80" value="{{ text }}"></tex tarea>
1111 </template>
1112
1113 <input class="button" type="submit" value="Evaluate" on-click="{{ eval }}" >
1114 <div class="radios" on-change="{{ updateLineMode }}">
1115 <label for="1-line">
1116 <input type="radio" name="lineMode" value="1-line" checked="">
1117 1-line
1118 </label>
1119 <label for="N-line">
1120 <input type="radio" name="lineMode" value="N-line">
1121 N-line
1122 </label>
1123 </div>
1124 </form>
1125
1126 <br>
1127 <template if="{{ results.isNotEmpty }}">
1128 <table>
1129 <tbody><tr template="" repeat="{{ result in results }}">
1130 <td class="historyExpr">
1131 <a class="expr" on-click="{{ selectExpr }}" expr="{{ result['expr'] }}">{{ result['expr'] }}</a>
1132 </td>
1133 <td class="historyValue">
1134 <template if="{{ result['value'] == null }}">
1135 <div style="color:#aaa;cursor:wait;">&lt;pending&gt;</div>
1136 </template>
1137 <template if="{{ result['value'] != null }}">
1138 <any-service-ref ref="{{ result['value'] }}"></any-service-ref>
1139 </template>
1140 </td>
1141 </tr>
1142 </tbody></table>
1143 </template>
1144 </template>
1145 </polymer-element>
1146
1147
1148
1149
1150
1151
1152
1153 <polymer-element name="eval-link">
1154 <template>
1155 <style>
1156 .idle {
1157 color: #0489c3;
1158 cursor: pointer;
1159 }
1160 .busy {
1161 color: #aaa;
1162 cursor: wait;
1163 }
1164 </style>
1165
1166 <template if="{{ busy }}">
1167 <span class="busy">{{ label }}</span>
1168 </template>
1169 <template if="{{ !busy }}">
1170 <span class="idle"><a on-click="{{ evalNow }}">{{ label }}</a></span>
1171 </template>
1172 <template if="{{ result != null }}">
1173 = <any-service-ref ref="{{ result }}"></any-service-ref>
1174 </template>
1175 </template>
1176 </polymer-element>
1177
1178
1179
1180
1181
1182
1183
1184
1185 <polymer-element name="field-ref" extends="service-ref">
1186 <template>
1187 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
1188 <span>
1189 <template if="{{ ref.isStatic] }}">static</template>
1190 <template if="{{ ref.isFinal }}">final</template>
1191 <template if="{{ ref.isConst }}">const</template>
1192 <template if="{{ (ref.declaredType.name == 'dynamic' &amp;&amp;
1193 !ref.isFinal &amp;&amp; !ref.isConst) }}">
1194 var
1195 </template>
1196 <template if="{{ (ref.declaredType.name != 'dynamic') }}">
1197 <instance-ref ref="{{ ref.declaredType }}"></instance-ref>
1198 </template>
1199 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}</a>
1200 </span>
1201 </template>
1202 </polymer-element>
1203
1204
1205
1206
1207
1208
1209
1210 <polymer-element name="function-ref" extends="service-ref">
1211 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css"><!-- These comments are here to allow newlines.
1212 --><template if="{{ ref.isDart }}"><!--
1213 --><template if="{{ qualified &amp;&amp; ref.parent == null &amp;&amp; re f.owningClass != null }}"><!--
1214 --><class-ref ref="{{ ref.owningClass] }}"></class-ref>.</template><!--
1215 --><template if="{{ qualified &amp;&amp; ref.parent != null }}"><!--
1216 --><function-ref ref="{{ ref.parent }}" qualified="{{ true }}">
1217 </function-ref>.<!--
1218 --></template><a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a><!--
1219 --></template><template if="{{ !ref.isDart }}"><span> {{ name }}</span></templ ate></template>
1220 </polymer-element>
1221
1222
1223
1224
1225
1226
1227 <polymer-element name="library-ref" extends="service-ref">
1228 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css">
1229 <template if="{{ nameIsEmpty }}">
1230 <a on-click="{{ goto }}" _href="{{ url }}">unnamed</a>
1231 </template>
1232 <template if="{{ !nameIsEmpty }}">
1233 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
1234 </template>
1235 </template>
1236 </polymer-element>
1237
1238
1239
1240
1241
1242
1243
1244 <polymer-element name="script-inset" extends="observatory-element">
1245 <template>
1246 <style>
1247 .sourceInset {
1248 }
1249 .sourceBox {
1250 background-color: #f5f5f5;
1251 border: 1px solid #ccc;
1252 padding: 10px;
1253 overflow-y: auto;
1254 }
1255 .sourceTable {
1256 display: table;
1257 }
1258 .sourceRow {
1259 display: table-row;
1260 }
1261 .sourceItem, .sourceItemCurrent {
1262 display: table-cell;
1263 vertical-align: top;
1264 font: 400 14px consolas, courier, monospace;
1265 line-height: 125%;
1266 white-space: pre;
1267 }
1268 .sourceItemCurrent {
1269 background-color: #6cf;
1270 }
1271 .hitsNone, .hitsNotExecuted, .hitsExecuted {
1272 min-width: 32px;
1273 text-align: right;
1274 }
1275 .hitsNotExecuted {
1276 background-color: #e66;
1277 }
1278 .hitsExecuted {
1279 background-color: #6d6;
1280 }
1281 </style>
1282 <div class="sourceInset">
1283 <content></content>
1284 <div class="sourceBox" style="max-height:{{height}}">
1285 <div class="sourceTable">
1286 <template if="{{ linesReady }}">
1287 <template repeat="{{ line in lines }}">
1288 <div class="sourceRow" id="{{ makeLineId(line.line) }}">
1289 <breakpoint-toggle line="{{ line }}"></breakpoint-toggle>
1290
1291 <div class="sourceItem">&nbsp;</div>
1292
1293 <template if="{{ line.hits == null ||
1294 line.hits < 0 }}">
1295 <div class="hitsNone">{{ line.line }}</div>
1296 </template>
1297 <template if="{{ line.hits == 0 }}">
1298 <div class="hitsNotExecuted">{{ line.line }}</div>
1299 </template>
1300 <template if="{{ line.hits > 0 }}">
1301 <div class="hitsExecuted">{{ line.line }}</div>
1302 </template>
1303
1304 <div class="sourceItem">&nbsp;</div>
1305
1306 <template if="{{ line.line == currentLine }}">
1307 <div class="sourceItemCurrent">{{line.text}}</div>
1308 </template>
1309 <template if="{{ line.line != currentLine }}">
1310 <div class="sourceItem">{{line.text}}</div>
1311 </template>
1312 </div>
1313 </template>
1314 </template>
1315
1316 <template if="{{ !linesReady }}">
1317 <div class="sourceRow">
1318 <div class="sourceItem">loading...</div>
1319 </div>
1320 </template>
1321 </div>
1322 </div>
1323 </div>
1324 </template>
1325 </polymer-element>
1326
1327 <polymer-element name="breakpoint-toggle" extends="observatory-element">
1328 <template>
1329 <style>
1330 .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpo int, .resolvedBreakpoint {
1331 display: table-cell;
1332 vertical-align: top;
1333 font: 400 14px consolas, courier, monospace;
1334 min-width: 1em;
1335 text-align: center;
1336 cursor: pointer;
1337 }
1338 .possibleBreakpoint {
1339 color: #e0e0e0;
1340 }
1341 .possibleBreakpoint:hover {
1342 color: white;
1343 background-color: #777;
1344 }
1345 .busyBreakpoint {
1346 color: white;
1347 background-color: black;
1348 cursor: wait;
1349 }
1350 .unresolvedBreakpoint {
1351 color: white;
1352 background-color: #cac;
1353 }
1354 .resolvedBreakpoint {
1355 color: white;
1356 background-color: #e66;
1357 }
1358 </style>
1359
1360 <template if="{{ line.possibleBpt &amp;&amp; busy}}">
1361 <div class="busyBreakpoint">B</div>
1362 </template>
1363
1364 <template if="{{ line.bpt == null &amp;&amp; !line.possibleBpt }}">
1365 <div class="emptyBreakpoint">&nbsp;</div>
1366 </template>
1367
1368 <template if="{{ line.bpt == null &amp;&amp; line.possibleBpt &amp;&amp; !bu sy}}">
1369 <div class="possibleBreakpoint">
1370 <a on-click="{{ toggleBreakpoint }}">B</a>
1371 </div>
1372 </template>
1373
1374 <template if="{{ line.bpt != null &amp;&amp; !line.bpt['resolved'] &amp;&amp ; !busy}}">
1375 <div class="unresolvedBreakpoint">
1376 <a on-click="{{ toggleBreakpoint }}">B</a>
1377 </div>
1378 </template>
1379
1380 <template if="{{ line.bpt != null &amp;&amp; line.bpt['resolved'] &amp;&amp; !busy}}">
1381 <div class="resolvedBreakpoint">
1382 <a on-click="{{ toggleBreakpoint }}">B</a>
1383 </div>
1384 </template>
1385
1386 </template>
1387 </polymer-element>
1388
1389
1390
1391
1392
1393
1394
1395 <polymer-element name="script-ref" extends="service-ref">
1396 <template>
1397 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
1398 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}< /a>
1399 </template>
1400 </polymer-element>
1401
1402
1403
1404
1405 <polymer-element name="class-view" extends="observatory-element">
1406 <template>
1407 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1408 <nav-bar>
1409 <top-nav-menu></top-nav-menu>
1410 <isolate-nav-menu isolate="{{ cls.isolate }}"></isolate-nav-menu>
1411 <library-nav-menu library="{{ cls.library }}"></library-nav-menu>
1412 <class-nav-menu cls="{{ cls }}" last="{{ true }}"></class-nav-menu>
1413 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
1414 <nav-refresh callback="{{ refresh }}"></nav-refresh>
1415 <nav-control></nav-control>
1416 </nav-bar>
1417
1418 <div class="content">
1419 <h1>
1420 <template if="{{ cls.isAbstract }}">
1421 abstract
1422 </template>
1423 <template if="{{ cls.isPatch }}">
1424 patch
1425 </template>
1426 class {{ cls.name }}
1427 </h1>
1428 <div class="memberList">
1429 <div class="memberItem">
1430 <div class="memberName">library</div>
1431 <div class="memberValue">
1432 <library-ref ref="{{ cls.library }}"></library-ref>
1433 </div>
1434 </div>
1435 <div class="memberItem">
1436 <div class="memberName">script</div>
1437 <div class="memberValue">
1438 <script-ref ref="{{ cls.script }}" pos="{{ cls.tokenPos }}">
1439 </script-ref>
1440 </div>
1441 </div>
1442
1443 <div class="memberItem">&nbsp;</div>
1444
1445 <template if="{{ cls.superclass != null }}">
1446 <div class="memberItem">
1447 <div class="memberName">extends</div>
1448 <div class="memberValue">
1449 <class-ref ref="{{ cls.superclass }}"></class-ref>
1450 </div>
1451 </div>
1452 </template>
1453 <template if="{{ cls.subclasses.length > 0 }}">
1454 <div class="memberItem">
1455 <div class="memberName">extended by</div>
1456 <div class="memberValue">
1457 <template repeat="{{ subclass in cls.subclasses }}">
1458 <class-ref ref="{{ subclass }}"></class-ref>
1459 </template>
1460 </div>
1461 </div>
1462 </template>
1463
1464 <div class="memberItem">&nbsp;</div>
1465
1466 <template if="{{ cls.interfaces.length > 0 }}">
1467 <div class="memberItem">
1468 <div class="memberName">implements</div>
1469 <div class="memberValue">
1470 <template repeat="{{ interface in cls.interfaces }}">
1471 <class-ref ref="{{ interface }}"></class-ref>
1472 </template>
1473 </div>
1474 </div>
1475 </template>
1476 <template if="{{ cls.name != cls.vmName }}">
1477 <div class="memberItem">
1478 <div class="memberName">vm name</div>
1479 <div class="memberValue">{{ cls.vmName }}</div>
1480 </div>
1481 </template>
1482 </div>
1483 </div>
1484
1485 <template if="{{ cls.error != null }}">
1486 <error-ref ref="{{ cls.error }}"></error-ref>
1487 </template>
1488
1489 <hr>
1490
1491 <div class="content">
1492 <template if="{{ cls.fields.isNotEmpty }}">
1493 fields ({{ cls.fields.length }})
1494 <curly-block expand="{{ cls.fields.length <= 8 }}">
1495 <div class="memberList">
1496 <template repeat="{{ field in cls.fields }}">
1497 <div class="memberItem">
1498 <div class="memberName">
1499 <field-ref ref="{{ field }}"></field-ref>
1500 </div>
1501 <div class="memberValue">
1502 <template if="{{ field.value != null }}">
1503 <any-service-ref ref="{{ field.value }}"></any-service-ref>
1504 </template>
1505 </div>
1506 </div>
1507 </template>
1508 </div>
1509 </curly-block><br><br>
1510 </template>
1511
1512 <template if="{{ cls.functions.isNotEmpty }}">
1513 functions ({{ cls.functions.length }})
1514 <curly-block expand="{{ cls.functions.length <= 8 }}">
1515 <div class="memberList">
1516 <template repeat="{{ function in cls.functions }}">
1517 <div class="memberItem">
1518 <div class="memberValue">
1519 <function-ref ref="{{ function }}" qualified="{{ false }}">
1520 </function-ref>
1521 </div>
1522 </div>
1523 </template>
1524 </div>
1525 </curly-block><br><br>
1526 </template>
1527
1528 <template if="{{ !cls.hasNoAllocations }}">
1529 instances
1530 <div class="memberItem">
1531 <div class="memberName">currently allocated</div>
1532 <div class="memberValue">
1533 count {{ cls.newSpace.current.instances + cls.oldSpace.current.ins tances }}
1534 (shallow size {{ cls.newSpace.current.bytes + cls.oldSpace.current .bytes | formatSize }})
1535 </div>
1536 </div>
1537 <div class="memberItem">
1538 <div class="memberName">strongly reachable</div>
1539 <div class="memberValue">
1540 <template if="{{ instances == null }}">
1541 <eval-link callback="{{ reachable }}" label="[find]" expr="100">
1542 </eval-link>
1543 </template>
1544 <template if="{{ instances != null }}">
1545 sample
1546 <any-service-ref ref="{{ instances['sample'] }}"></any-service-r ef>
1547 <template if="{{ instances['totalCount'] > instances['sampleCoun t'] }}">
1548 <eval-link callback="{{ reachable }}" label="[more]" expr="{{ instances['sampleCount'] * 2 }}">
1549 </eval-link>
1550 </template>
1551 of total {{ instances['totalCount'] }}
1552 </template>
1553 </div>
1554 </div>
1555 <div class="memberItem">
1556 <div class="memberName">retained size</div>
1557 <div class="memberValue">
1558 <template if="{{ retainedBytes == null }}">
1559 <eval-link callback="{{ retainedSize }}" label="[calculate]">
1560 </eval-link>
1561 </template>
1562 <template if="{{ retainedBytes != null }}">
1563 {{ retainedBytes | formatSize }}
1564 </template>
1565 </div>
1566 </div>
1567 </template>
1568 </div>
1569
1570 <hr>
1571
1572 <div class="content">
1573 <eval-box callback="{{ eval }}"></eval-box>
1574 </div>
1575
1576 <hr>
1577 <script-inset script="{{ cls.script }}" startpos="{{ cls.tokenPos }}" endpos ="{{ cls.endTokenPos }}">
1578 </script-inset>
1579
1580 <br><br><br><br>
1581 <br><br><br><br>
1582 </template>
1583 </polymer-element>
1584
1585
1586
1587
1588
1589
1590 <polymer-element name="code-ref" extends="service-ref">
1591 <template>
1592 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1593 <template if="{{ code.isDartCode }}">
1594 <template if="{{ code.isOptimized }}">
1595 <a on-click="{{ goto }}" _href="{{ url }}">*{{ name }}</a>
1596 </template>
1597 <template if="{{ !code.isOptimized }}">
1598 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
1599 </template>
1600 </template>
1601 <template if="{{ !code.isDartCode }}">
1602 <span>{{ name }}</span>
1603 </template>
1604 </template>
1605 </polymer-element>
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615 <polymer-element name="code-view" extends="observatory-element">
1616 <template>
1617 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1618 <style>
1619 div.flex-row:hover {
1620 background-color: #FFF3E3;
1621 }
1622
1623 .highlight {
1624 background-color: #FFF3E3;
1625 }
1626
1627 .tooltip {
1628 display: block;
1629 position: absolute;
1630 visibility: hidden;
1631 opacity: 0;
1632 transition: visibility 0s linear 0.5s;
1633 transition: opacity .4s ease-in-out;
1634 }
1635
1636 .flex-row:hover .tooltip {
1637 display: block;
1638 position: absolute;
1639 top: 100%;
1640 visibility: visible;
1641 z-index: 999;
1642 width: auto;
1643 min-width: 400px;
1644 color: #ffffff;
1645 background-color: #FFF3E3;
1646 border-bottom-right-radius: 8px;
1647 border-bottom-left-radius: 8px;
1648 transition: visibility 0s linear 0.5s;
1649 transition: opacity .4s ease-in-out;
1650 opacity: 1;
1651 }
1652
1653 .descriptor-address {
1654 color: #0489c3;
1655 }
1656
1657 .snippet {
1658 text-align: center;
1659 margin-left: 10px;
1660 margin-right: 10px;
1661 }
1662
1663 </style>
1664 <nav-bar>
1665 <top-nav-menu></top-nav-menu>
1666 <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu>
1667 <nav-menu link="{{ code.link }}" anchor="{{ code.name }}" last="{{ true }} "></nav-menu>
1668 <nav-refresh callback="{{ refresh }}"></nav-refresh>
1669 <nav-control></nav-control>
1670 </nav-bar>
1671 <div class="content">
1672 <template if="{{ code.isDartCode &amp;&amp; code.isOptimized }}">
1673 <h1>Optimized code for {{ code.name }}</h1>
1674 </template>
1675 <template if="{{ !(code.isDartCode &amp;&amp; code.isOptimized) }}">
1676 <h1>Code for {{ code.name }}</h1>
1677 </template>
1678 <div class="memberList">
1679 <div class="memberItem">
1680 <div class="memberName">Kind</div>
1681 <div class="memberValue">{{code.kind}}</div>
1682 </div>
1683 <template if="{{ code.isDartCode }}">
1684 <div class="memberItem">
1685 <div class="memberName">Optimized</div>
1686 <div class="memberValue">{{code.isOptimized}}</div>
1687 </div>
1688 </template>
1689 <div class="memberItem">
1690 <div class="memberName">Function</div>
1691 <div class="memberValue">
1692 <function-ref ref="{{code.function}}">
1693 </function-ref>
1694 </div>
1695 </div>
1696 <div class="memberItem">
1697 <div class="memberName">Inclusive</div>
1698 <div class="memberValue">{{ code.formattedInclusiveTicks }}</div>
1699 </div>
1700 <div class="memberItem">
1701 <div class="memberName">Exclusive</div>
1702 <div class="memberValue">{{ code.formattedExclusiveTicks }}</div>
1703 </div>
1704 <div class="memberItem">
1705 <div class="memberName">Constant object pool</div>
1706 <div class="memberValue">
1707 <any-service-ref ref="{{ code.objectPool }}"></any-service-ref>
1708 </div>
1709 </div>
1710 </div>
1711 </div>
1712 <hr>
1713 <div class="content">
1714 <template if="{{ code.hasDisassembly }}">
1715 <div class="flex-row">
1716 <div class="flex-item-fixed-2-12 memberHeader">Inclusive</div>
1717 <div class="flex-item-fixed-2-12 memberHeader">Exclusive</div>
1718 <div class="flex-item-fixed-2-12 memberHeader">Address</div>
1719 <div class="flex-item-fixed-6-12 memberHeader">Disassembly</div>
1720 </div>
1721 </template>
1722 <template repeat="{{ instruction in code.instructions }}">
1723 <div class="flex-row" on-mouseover="{{ mouseOver }}" on-mouseout="{{ mou seOut }}" data-jump-target="{{ instruction.jumpTarget.address }}" id="addr-{{ in struction.address }}" style="position: relative">
1724 <template if="{{ instruction.isComment }}">
1725 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Inclusive(code) }}</div>
1726 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Exclusive(code) }}</div>
1727 <div class="flex-item-fixed-8-12 monospace">{{ instruction.human }}< /div>
1728 </template>
1729 <template if="{{ !instruction.isComment }}">
1730 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Inclusive(code) }}</div>
1731 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Exclusive(code) }}</div>
1732 <template if="{{ instruction.hasDescriptors }}">
1733 <div class="flex-item-fixed-2-12 monospace descriptor-address">
1734 <div class="tooltip">
1735 <template repeat="{{ descriptor in instruction.descriptors }}" >
1736 <div class="memberList">
1737 <div class="memberItem">
1738 <div class="memberName">Kind</div>
1739 <div class="memberValue">{{ descriptor.kind }}</div>
1740 </div>
1741 <div class="memberItem">
1742 <div class="memberName">Deoptimization ID</div>
1743 <div class="memberValue">{{ descriptor.formattedDeoptId() }}</div>
1744 </div>
1745 <template if="{{ descriptor.script != null }}">
1746 <div class="memberItem">
1747 <div class="memberName">Script</div>
1748 <div class="memberValue"><script-ref ref="{{ descriptor .script }}" pos="{{ descriptor.tokenPos }}"></script-ref></div>
1749 </div>
1750 </template>
1751 </div>
1752 <template if="{{ descriptor.script != null }}">
1753 <div class="snippet monospace">
1754 <span>{{ descriptor.formattedLine }}</span>
1755 </div>
1756 </template>
1757 </template>
1758 </div>
1759 {{ instruction.formattedAddress() }}
1760 </div>
1761 </template>
1762 <template if="{{ !instruction.hasDescriptors }}">
1763 <div class="flex-item-fixed-2-12 monospace">
1764 {{ instruction.formattedAddress() }}
1765 </div>
1766 </template>
1767 <div class="flex-item-fixed-6-12 monospace">
1768 {{ instruction.human }}
1769 </div>
1770 </template>
1771 </div>
1772 </template>
1773 </div>
1774 </template>
1775 </polymer-element>
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787 <!-- TODO(turnidge): Use core-icon once core_elements work properly in
1788 devtools -->
1789 <polymer-element name="icon-expand-less" noscript="">
1790 <template>
1791 <svg width="24" height="24">
1792 <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "></polygon>
1793 </svg>
1794 </template>
1795 </polymer-element>
1796
1797 <polymer-element name="icon-expand-more" noscript="">
1798 <template>
1799 <svg width="24" height="24">
1800 <polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "></polygon>
1801 </svg>
1802 </template>
1803 </polymer-element>
1804
1805 <polymer-element name="debugger-page" extends="observatory-element">
1806 <template>
1807 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1808 <style>
1809 .container {
1810 height: 100%;
1811 display: flex;
1812 flex-direction: column;
1813 justify-content: space-between;
1814 }
1815 nav-bar {
1816 flex: 0 0 auto;
1817 }
1818 .stack {
1819 flex: 0 0 auto;
1820 overflow-y: auto;
1821 }
1822 core-splitter {
1823 flex: 0 0 auto;
1824 }
1825 .console {
1826 flex: 1 1 auto;
1827 overflow-y: auto;
1828 }
1829 .commandline {
1830 flex: 0 0 auto;
1831 }
1832 </style>
1833
1834 <div class="container">
1835 <nav-bar>
1836 <top-nav-menu last="{{ true }}"></top-nav-menu>
1837 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
1838 </isolate-nav-menu>
1839 <nav-control></nav-control>
1840 </nav-bar>
1841
1842 <div id="stack" class="stack">
1843 <debugger-stack isolate="{{ isolate }}"></debugger-stack>
1844 </div>
1845 <!--
1846 <core-splitter direction="up" allowOverflow=true></core-splitter>
1847 <div class="console">
1848 <debugger-console isolate="{{ isolate }}"></debugger-console>
1849 </div>
1850 <div class="commandline">
1851 <debugger-input isolate="{{ isolate }}"></debugger-input>
1852 </div>
1853 -->
1854 </div>
1855 </template>
1856 </polymer-element>
1857
1858 <polymer-element name="debugger-stack" extends="observatory-element">
1859 <template>
1860 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1861 <template if="{{ stack == null }}">
1862 Loading stack frames
1863 </template>
1864 <template if="{{ stack != null }}">
1865 <ul class="list-group">
1866 <template repeat="{{ frame in stack['members'] }}">
1867 <li class="list-group-item">
1868 <debugger-frame frame="{{ frame }}" expand="{{ frame['depth'] == act iveFrame }}">
1869 </debugger-frame>
1870 </li>
1871 </template>
1872 </ul>
1873 </template>
1874 </template>
1875 </polymer-element>
1876
1877
1878 <polymer-element name="debugger-frame" extends="observatory-element">
1879 <template>
1880 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1881 <style>
1882 .frameOuter {
1883 position: relative;
1884 padding: 5px;
1885 border: 1px solid white;
1886 }
1887 .frameOuter:hover {
1888 border: 1px solid #e0e0e0;
1889 }
1890 .shadow {
1891 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
1892 0 2px 5px 0 rgba(0, 0, 0, 0.26);
1893 }
1894 .frameSummaryText {
1895 display: inline-block;
1896 padding: 5px;
1897 }
1898 .frameId {
1899 display: inline-block;
1900 width: 60px;
1901 }
1902 .frameOuter .frameExpander {
1903 position: absolute;
1904 right: 5px;
1905 top: 5px;
1906 display: none;
1907 }
1908 .frameOuter:hover .frameExpander{
1909 display: inline-block;
1910 }
1911 .frameContractor {
1912 position: absolute;
1913 right: 5px;
1914 bottom: 5px;
1915 display: inline-block;
1916 }
1917 </style>
1918 <div id="frameOuter" class="frameOuter">
1919 <a on-click="{{ toggleExpand }}">
1920 <div class="frameSummary">
1921 <div class="frameSummaryText">
1922 <div class="frameId"><b>frame {{ frame['depth'] }}</b></div>
1923 <function-ref ref="{{ frame['function'] }}"></function-ref>
1924 ( <script-ref ref="{{ frame['script'] }}" pos="{{ frame['tokenPos'] }}">
1925 </script-ref> )
1926 </div>
1927 <template if="{{ !expanded }}">
1928 <div class="frameExpander">
1929 <icon-expand-more></icon-expand-more>
1930 </div>
1931 </template>
1932 </div>
1933 </a>
1934
1935 <template if="{{expanded}}">
1936 <div class="frameDetails">
1937 <div class="flex-row">
1938 <div class="flex-item-60-percent">
1939 <script-inset height="{{ scriptHeight }}" script="{{ frame['functi on'].script }}" startpos="{{ frame['function'].tokenPos }}" endpos="{{ frame['fu nction'].endTokenPos }}" currentpos="{{ frame['tokenPos'] }}">
1940 </script-inset>
1941 </div>
1942 <div class="flex-item-40-percent">
1943 <div style="padding:10px;" class="memberList">
1944 <template repeat="{{ v in frame['vars'] }}">
1945 <div class="memberItem">
1946 <div class="memberName">{{ v['name']}}</div>
1947 <div class="memberValue">
1948 <any-service-ref ref="{{ v['value'] }}">
1949 </any-service-ref>
1950 </div>
1951 </div>
1952 </template>
1953 </div>
1954 </div>
1955 </div>
1956 <!-- TODO(turnidge): Add eval box here? -->
1957 <div class="frameContractor">
1958 <template if="{{expanded}}">
1959 <a on-click="{{ toggleExpand }}">
1960 <icon-expand-less></icon-expand-less>
1961 </a>
1962 </template>
1963 </div>
1964 </div>
1965 </template>
1966 </div>
1967 </template>
1968 </polymer-element>
1969
1970 <polymer-element name="debugger-console" extends="observatory-element">
1971 <template>
1972 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1973 <style>
1974 .textBox {
1975 position: absolute;
1976 bottom: 0px;
1977 width: 100%;
1978 }
1979 </style>
1980 <div>
1981 Debugging console is not yet implemented.<br>
1982 </div>
1983 </template>
1984 </polymer-element>
1985
1986 <polymer-element name="debugger-input" extends="observatory-element">
1987 <template>
1988 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1989 <style>
1990 .textBox {
1991 font: 400 16px 'Montserrat', sans-serif;
1992 width: 100%;
1993 }
1994 </style>
1995 <input id="textBox" class="textBox" type="text" value="{{ text }}">
1996 </template>
1997 </polymer-element>
1998
1999
2000
2001
2002
2003
2004
2005 <polymer-element name="error-view" extends="observatory-element">
2006 <template>
2007 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2008 <nav-bar>
2009 <top-nav-menu last="{{ true }}"></top-nav-menu>
2010 <nav-control></nav-control>
2011 </nav-bar>
2012 <div class="content-centered">
2013 <h1>{{ error.kind }}</h1>
2014 <br>
2015 <div class="well">{{ error.message }}</div>
2016 </div>
2017 </template>
2018 </polymer-element>
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033 <polymer-element name="field-view" extends="observatory-element">
2034 <template>
2035 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2036 <nav-bar>
2037 <top-nav-menu></top-nav-menu>
2038 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu>
2039 <template if="{{ field.owner.type == 'Class' }}">
2040 <!-- TODO(turnidge): Add library nav menu here. -->
2041 <class-nav-menu cls="{{ field.owner }}"></class-nav-menu>
2042 </template>
2043 <template if="{{ field.owner.type == 'Library' }}">
2044 <library-nav-menu library="{{ field.owner }}"></library-nav-menu>
2045 </template>
2046 <nav-menu link="{{ field.link }}" anchor="{{ field.name }}" last="{{ true }}"></nav-menu>
2047 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2048 <nav-control></nav-control>
2049 </nav-bar>
2050
2051 <div class="content">
2052 <h1>
2053 <template if="{{ field.isStatic }}">static</template>
2054 <template if="{{ field.isFinal }}">final</template>
2055 <template if="{{ field.isConst }}">const</template>
2056 <template if="{{ (field.declaredType.name == 'dynamic' &amp;&amp;
2057 !field.isFinal &amp;&amp; !field.isConst) }}">
2058 var
2059 </template>
2060 <template if="{{ (field.declaredType.name != 'dynamic') }}">
2061 {{ field.declaredType.name }}
2062 </template>
2063 {{ field.name }}
2064 </h1>
2065 <div class="memberList">
2066 <div class="memberItem">
2067 <div class="memberName">owner</div>
2068 <div class="memberValue">
2069 <template if="{{ field.owner.type == 'Class' }}">
2070 <class-ref ref="{{ field.owner }}"></class-ref>
2071 </template>
2072 <template if="{{ field.owner.type != 'Class' }}">
2073 <library-ref ref="{{ field.owner }}"></library-ref>
2074 </template>
2075 </div>
2076 </div>
2077 <div class="memberItem">
2078 <div class="memberName">script</div>
2079 <div class="memberValue">
2080 <script-ref ref="{{ field.script }}"></script-ref>
2081 </div>
2082 </div>
2083 <template if="{{ !field.isStatic }}">
2084 <div class="memberItem" title="The types observed for this field at ru ntime. Fields that are observed to have a single type at runtime or to never be null may allow for additional optimization.">
2085 <div class="memberName">observed types</div>
2086 <div class="memberValue">
2087 <template if="{{ field.guardClass == 'dynamic' }}">
2088 various
2089 </template>
2090 <template if="{{ field.guardClass == 'unknown' }}">
2091 none
2092 </template>
2093 <template if="{{ field.guardClass != 'unknown' &amp;&amp;
2094 field.guardClass != 'dynamic' }}">
2095 <class-ref ref="{{ field.guardClass }}"></class-ref>
2096 <template if="{{ field.guardNullable }}">
2097 — null observed
2098 </template>
2099 <template if="{{ !field.guardNullable }}">
2100 — null not observed
2101 </template>
2102 </template>
2103 </div>
2104 </div>
2105 </template>
2106 <template if="{{ field.value != null }}">
2107 <div class="memberItem">
2108 <div class="memberName">static value</div>
2109 <div class="memberValue">
2110 <any-service-ref ref="{{ field.value }}"></any-service-ref>
2111 </div>
2112 </div>
2113 </template>
2114 </div>
2115 </div>
2116 </template>
2117 </polymer-element>
2118
2119
2120
2121
2122
2123
2124
2125 <polymer-element name="flag-list" extends="observatory-element">
2126 <template>
2127 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2128 <nav-bar>
2129 <top-nav-menu></top-nav-menu>
2130 <nav-menu link="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" la st="{{ true }}"></nav-menu>
2131 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2132 <nav-control></nav-control>
2133 </nav-bar>
2134
2135 <div class="content-centered">
2136 <template if="{{ flagList['modifiedFlags'].isNotEmpty }}">
2137 <h1>Modified Flags</h1>
2138 <br>
2139 <template repeat="{{ flag in flagList['modifiedFlags'] }}">
2140 <flag-item flag="{{ flag }}"></flag-item>
2141 <br>
2142 </template>
2143 <hr>
2144 </template>
2145
2146 <h1>Unmodified Flags</h1>
2147 <br>
2148 <template if="{{ flagList['unmodifiedFlags'].isEmpty }}">
2149 <em>None</em>
2150 </template>
2151 <template if="{{ flagList['unmodifiedFlags'].isNotEmpty }}">
2152 <template repeat="{{ flag in flagList['unmodifiedFlags'] }}">
2153 <flag-item flag="{{ flag }}"></flag-item>
2154 <br>
2155 </template>
2156 </template>
2157 </div>
2158
2159 </template>
2160 </polymer-element>
2161
2162 <polymer-element name="flag-item" extends="observatory-element">
2163 <template>
2164 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2165 <span style="color:#aaa">// {{ flag['comment'] }}</span>
2166 <div style="padding: 3px 0">
2167 <b>{{ flag['name'] }}</b>
2168 &nbsp;=&nbsp;
2169 {{ flag['valueAsString'] }}
2170 </div>
2171 </template>
2172 </polymer-element>
2173
2174
2175
2176
2177
2178
2179
2180
2181
2182
2183
2184
2185
2186
2187 <polymer-element name="function-view" extends="observatory-element">
2188 <template>
2189 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2190 <nav-bar>
2191 <top-nav-menu></top-nav-menu>
2192 <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>
2193 <template if="{{ function.owningClass != null }}">
2194 <!-- TODO(turnidge): Add library nav menu here. -->
2195 <class-nav-menu cls="{{ function.owningClass }}"></class-nav-menu>
2196 </template>
2197 <template if="{{ function.owningLibrary != null }}">
2198 <library-nav-menu library="{{ function.owningLibrary }}"></library-nav-m enu>
2199 </template>
2200 <nav-menu link="{{ function.link }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
2201 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
2202 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2203 <nav-control></nav-control>
2204 </nav-bar>
2205
2206 <div class="content">
2207 <h1>function {{ function.qualifiedName }}</h1>
2208
2209 <div class="memberList">
2210 <div class="memberItem">
2211 <div class="memberName">kind</div>
2212 <div class="memberValue">
2213 <template if="{{ function.isStatic }}">static</template>
2214 <template if="{{ function.isConst }}">const</template>
2215 {{ function.kind.toString() }}
2216 </div>
2217 </div>
2218 <template if="{{ function.parent != null }}">
2219 <div class="memberItem">
2220 <div class="memberName">parent function</div>
2221 <div class="memberValue">
2222 <function-ref ref="{{ function.parent }}"></function-ref>
2223 </div>
2224 </div>
2225 </template>
2226 <div class="memberItem">
2227 <div class="memberName">owner</div>
2228 <div class="memberValue">
2229 <template if="{{ function.owningClass != null }}">
2230 <class-ref ref="{{ function.owningClass }}"></class-ref>
2231 </template>
2232 <template if="{{ function.owningLibrary != null }}">
2233 <library-ref ref="{{ function.owningLibrary }}"></library-ref>
2234 </template>
2235 </div>
2236 </div>
2237 <div class="memberItem">
2238 <div class="memberName">script</div>
2239 <div class="memberValue">
2240 <script-ref ref="{{ function.script }}" pos="{{ function.tokenPos }} ">
2241 </script-ref>
2242 </div>
2243 </div>
2244
2245 <div class="memberItem">&nbsp;</div>
2246
2247 <template if="{{ function.code != null }}">
2248 <div class="memberItem">
2249 <div class="memberName">optimized code</div>
2250 <div class="memberValue">
2251 <code-ref ref="{{ function.code }}"></code-ref>
2252 </div>
2253 </div>
2254 </template>
2255 <template if="{{ function.unoptimizedCode != null }}">
2256 <div class="memberItem">
2257 <div class="memberName">unoptimized code</div>
2258 <div class="memberValue">
2259 <code-ref ref="{{ function.unoptimizedCode }}"></code-ref>
2260 </div>
2261 <div class="memberValue">
2262 <span title="This count is used to determine when a function wil l be optimized. It is a combination of call counts and other factors.">
2263 (usage count: {{ function.usageCounter }})
2264 </span>
2265 </div>
2266 </div>
2267 </template>
2268 <div class="memberItem">
2269 <div class="memberName">deoptimizations</div>
2270 <div class="memberValue">{{ function.deoptimizations }}</div>
2271 </div>
2272 <div class="memberItem">
2273 <div class="memberName">optimizable</div>
2274 <div class="memberValue">{{ function.isOptimizable }}</div>
2275 </div>
2276 <div class="memberItem">
2277 <div class="memberName">inlinable</div>
2278 <div class="memberValue">{{ function.isInlinable }}</div>
2279 </div>
2280 <template if="{{ function.name != function.vmName }}">
2281 <div class="memberItem">
2282 <div class="memberName">vm name</div>
2283 <div class="memberValue">{{ function.vmName }}</div>
2284 </div>
2285 </template>
2286 </div>
2287 </div>
2288
2289 <hr>
2290 <script-inset script="{{ function.script }}" startpos="{{ function.tokenPos }}" endpos="{{ function.endTokenPos }}">
2291 </script-inset>
2292
2293 <br>
2294 </template>
2295 </polymer-element>
2296
2297
2298
2299
2300
2301
2302
2303
2304 <polymer-element name="heap-map" extends="observatory-element">
2305 <template>
2306 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
2307 <style>
2308 .hover {
2309 position: fixed;
2310 z-index: 999;
2311 height: 16px;
2312 width: 100%;
2313 background: #ffffff;
2314 }
2315 .spacer {
2316 height: 16px;
2317 background-color: red;
2318 }
2319 </style>
2320 <nav-bar pad="{{ false }}">
2321 <top-nav-menu></top-nav-menu>
2322 <isolate-nav-menu isolate="{{ fragmentation.isolate }}"></isolate-nav-menu>
2323 <nav-menu link="{{ fragmentation.isolate.relativeLink('heapmap') }}" anchor= "heap map" last="{{ true }}"></nav-menu>
2324 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2325 <nav-control></nav-control>
2326 </nav-bar>
2327 <div class="hover">
2328 <p style="text-align:center">{{ status }}</p>
2329 </div>
2330 <div class="spacer">
2331 <!-- Make sure no data is covered by hover bar initially -->
2332 </div>
2333 <div class="flex-row">
2334 <canvas id="fragmentation" width="1px" height="1px"></canvas>
2335 </div>
2336 </template>
2337 </polymer-element>
2338
2339
2340
2341
2342
2343
2344
2345 <polymer-element name="io-view" extends="observatory-element">
2346 <template>
2347 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2348
2349 <nav-bar>
2350 <top-nav-menu last="{{ true }}"></top-nav-menu>
2351 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2352 <nav-control></nav-control>
2353 </nav-bar>
2354
2355 <div class="content">
2356 <h1>dart:io</h1>
2357
2358 <br>
2359
2360 <ul class="list-group">
2361 <li class="list-group-item">
2362 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /http/servers'))}}">HTTP Servers</a>
2363 </li>
2364 </ul>
2365
2366 <br>
2367
2368 <ul class="list-group">
2369 <li class="list-group-item">
2370 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /sockets'))}}">Sockets</a>
2371 </li>
2372 </ul>
2373
2374 <br>
2375
2376 <ul class="list-group">
2377 <li class="list-group-item">
2378 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /websockets'))}}">WebSockets</a>
2379 </li>
2380 </ul>
2381
2382 <br>
2383
2384 <ul class="list-group">
2385 <li class="list-group-item">
2386 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /file/randomaccessfiles'))}}">Random Access Files</a>
2387 </li>
2388 </ul>
2389
2390 <br>
2391
2392 <ul class="list-group">
2393 <li class="list-group-item">
2394 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /processes'))}}">Processes</a>
2395 </li>
2396 </ul>
2397
2398 </div>
2399 <br>
2400 <hr>
2401 </template>
2402 </polymer-element>
2403
2404 <polymer-element name="io-ref" extends="service-ref">
2405 <template>
2406 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2407 <template if="{{ ref.type == 'Socket' }}">
2408 <io-socket-ref ref="{{ ref }}"></io-socket-ref>
2409 </template>
2410 <template if="{{ ref.type == 'HttpServerConnection' }}">
2411 <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection -ref>
2412 </template>
2413 <template if="{{ ref.type == 'HttpServer' }}">
2414 <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>
2415 </template>
2416 <template if="{{ ref.type == 'WebSocket' }}">
2417 <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>
2418 </template>
2419 <template if="{{ ref.type == 'Process' }}">
2420 <io-process-ref ref="{{ ref }}"></io-process-ref>
2421 </template>
2422 </template>
2423 </polymer-element>
2424
2425 <polymer-element name="io-http-server-list-view" extends="observatory-element">
2426 <template>
2427 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2428
2429 <nav-bar>
2430 <top-nav-menu last="{{ true }}"></top-nav-menu>
2431 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2432 </nav-bar>
2433
2434 <div class="content">
2435 <h1>HttpServers</h1>
2436
2437 <br>
2438
2439 <ul class="list-group">
2440 <template repeat="{{ httpServer in list['members'] }}">
2441 <li class="list-group-item">
2442 <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
2443 </li>
2444 </template>
2445 </ul>
2446 </div>
2447 <br>
2448 <hr>
2449 </template>
2450 </polymer-element>
2451
2452 <polymer-element name="io-http-server-ref" extends="service-ref">
2453 <template>
2454 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2455 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2456 </template>
2457 </polymer-element>
2458
2459 <polymer-element name="io-http-server-view" extends="observatory-element">
2460 <template>
2461 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2462
2463 <nav-bar>
2464 <top-nav-menu last="{{ true }}"></top-nav-menu>
2465 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2466 </nav-bar>
2467
2468 <div class="content">
2469 <h1>HttpServer</h1>
2470
2471 <br>
2472
2473 <div class="memberList">
2474 <div class="memberItem">
2475 <div class="memberName">Socket</div>
2476 <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] } }"></io-socket-ref></div>
2477 </div>
2478 <div class="memberItem">
2479 <div class="memberName">Address</div>
2480 <div class="memberValue">{{ httpServer['address'] }}</div>
2481 </div>
2482 <div class="memberItem">
2483 <div class="memberName">Port</div>
2484 <div class="memberValue">{{ httpServer['port'] }}</div>
2485 </div>
2486 <div class="memberItem">
2487 <div class="memberName">Active connections</div>
2488 <ul class="list-group">
2489 <template repeat="{{ connection in httpServer['active'] }}">
2490 <li class="list-group-item">
2491 <io-http-server-connection-ref ref="{{ connection }}"></io-http- server-connection-ref>
2492 </li>
2493 </template>
2494 </ul>
2495 </div>
2496 <div class="memberItem">
2497 <div class="memberName">Idle connections</div>
2498 <ul class="list-group">
2499 <template repeat="{{ connection in httpServer['idle'] }}">
2500 <li class="list-group-item">
2501 <io-http-server-connection-ref ref="{{ connection }}"></io-http- server-connection-ref>
2502 </li>
2503 </template>
2504 </ul>
2505 </div>
2506 </div>
2507 </div>
2508 <br>
2509 <hr>
2510 </template>
2511 </polymer-element>
2512
2513 <polymer-element name="io-http-server-connection-ref" extends="service-ref">
2514 <template>
2515 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2516 <a _href="{{ url }}">{{ name }}</a>
2517 </template>
2518 </polymer-element>
2519
2520 <polymer-element name="io-http-server-connection-view" extends="observatory-elem ent">
2521 <template>
2522 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2523
2524 <nav-bar>
2525 <top-nav-menu last="{{ true }}"></top-nav-menu>
2526 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2527 </nav-bar>
2528
2529 <div class="content">
2530 <h1>HttpConnection</h1>
2531
2532 <br>
2533
2534 <div class="memberList">
2535 <div class="memberItem">
2536 <div class="memberName">Socket</div>
2537 <div class="memberValue"><io-socket-ref ref="{{ connection['socket'] } }"></io-socket-ref></div>
2538 </div>
2539 <div class="memberItem">
2540 <div class="memberName">State</div>
2541 <div class="memberValue">{{ connection['state'] }}</div>
2542 </div>
2543 <div class="memberItem">
2544 <div class="memberName">Server</div>
2545 <div class="memberValue"><io-http-server-ref ref="{{ connection['serve r'] }}"></io-http-server-ref></div>
2546 </div>
2547 </div>
2548 </div>
2549 <br>
2550 <hr>
2551 </template>
2552 </polymer-element>
2553
2554 <polymer-element name="io-socket-ref" extends="service-ref">
2555 <template>
2556 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2557 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2558 </template>
2559 </polymer-element>
2560
2561 <polymer-element name="io-socket-list-view" extends="observatory-element">
2562 <template>
2563 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2564
2565 <nav-bar>
2566 <top-nav-menu last="{{ true }}"></top-nav-menu>
2567 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2568 </nav-bar>
2569
2570 <div class="content">
2571 <h1>Sockets</h1>
2572
2573 <br>
2574
2575 <ul class="list-group">
2576 <template repeat="{{ socket in list['members'] }}">
2577 <li class="list-group-item">
2578 <io-socket-ref ref="{{ socket }}"></io-socket-ref>
2579 </li>
2580 </template>
2581 </ul>
2582 </div>
2583 <br>
2584 <hr>
2585 </template>
2586 </polymer-element>
2587
2588 <polymer-element name="io-socket-view" extends="observatory-element">
2589 <template>
2590 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2591
2592 <nav-bar>
2593 <top-nav-menu last="{{ true }}"></top-nav-menu>
2594 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2595 </nav-bar>
2596
2597 <div class="content">
2598 <!-- Pipe Socket -->
2599 <template if="{{ socket.isPipe }}">
2600 <h1>Pipe Socket</h1>
2601 <div class="memberList">
2602 <template if="{{ socket.socketOwner != null }}">
2603 <div class="memberItem">
2604 <div class="memberName">Owner</div>
2605 <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></ io-ref></div>
2606 </div>
2607 </template>
2608 <div class="memberItem">
2609 <div class="memberName">File descriptor</div>
2610 <div class="memberValue">{{ socket.fd }}</div>
2611 </div>
2612 <div class="memberItem">
2613 <div class="memberName">Read Closed</div>
2614 <div class="memberValue">{{ socket.readClosed }}</div>
2615 </div>
2616 <div class="memberItem">
2617 <div class="memberName">Write Closed</div>
2618 <div class="memberValue">{{ socket.writeClosed }}</div>
2619 </div>
2620 <div class="memberItem">
2621 <div class="memberName">Closing</div>
2622 <div class="memberValue">{{ socket.closing }}</div>
2623 </div>
2624 </div>
2625 </template>
2626 <!-- Network Socket -->
2627 <template if="{{ !socket.isPipe }}">
2628 <h1>Network Socket</h1>
2629 <div class="memberList">
2630 <template if="{{ socket.socketOwner != null }}">
2631 <div class="memberItem">
2632 <div class="memberName">Owner</div>
2633 <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></ io-ref></div>
2634 </div>
2635 </template>
2636 <div class="memberItem">
2637 <div class="memberName">Local Address</div>
2638 <div class="memberValue">{{ socket.localAddress }}</div>
2639 </div>
2640 <div class="memberItem">
2641 <div class="memberName">Local Port</div>
2642 <div class="memberValue">{{ socket.localPort }}</div>
2643 </div>
2644 <div class="memberItem">
2645 <div class="memberName">Remote Address</div>
2646 <div class="memberValue">{{ socket.remoteAddress }}</div>
2647 </div>
2648 <div class="memberItem">
2649 <div class="memberName">Remote Port</div>
2650 <div class="memberValue">{{ socket.remotePort }}</div>
2651 </div>
2652 <div class="memberItem">
2653 <div class="memberName">File descriptor</div>
2654 <div class="memberValue">{{ socket.fd }}</div>
2655 </div>
2656 <div class="memberItem">
2657 <div class="memberName">Read Closed</div>
2658 <div class="memberValue">{{ socket.readClosed }}</div>
2659 </div>
2660 <div class="memberItem">
2661 <div class="memberName">Write Closed</div>
2662 <div class="memberValue">{{ socket.writeClosed }}</div>
2663 </div>
2664 <div class="memberItem">
2665 <div class="memberName">Closing</div>
2666 <div class="memberValue">{{ socket.closing }}</div>
2667 </div>
2668 <div class="memberItem">
2669 <div class="memberName">Listening</div>
2670 <div class="memberValue">{{ socket.listening }}</div>
2671 </div>
2672 <div class="memberItem">
2673 <div class="memberName">Protocol</div>
2674 <div class="memberValue">{{ socket.protocol }}</div>
2675 </div>
2676 </div>
2677 </template>
2678 </div>
2679 <br>
2680 <hr>
2681 </template>
2682 </polymer-element>
2683
2684 <polymer-element name="io-web-socket-ref" extends="service-ref">
2685 <template>
2686 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2687 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2688 </template>
2689 </polymer-element>
2690
2691 <polymer-element name="io-web-socket-list-view" extends="observatory-element">
2692 <template>
2693 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2694
2695 <nav-bar>
2696 <top-nav-menu last="{{ true }}"></top-nav-menu>
2697 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2698 </nav-bar>
2699
2700 <div class="content">
2701 <h1>WebSockets</h1>
2702
2703 <br>
2704
2705 <ul class="list-group">
2706 <template repeat="{{ webSocket in list['members'] }}">
2707 <li class="list-group-item">
2708 <io-web-socket-ref ref="{{ webSocket }}"></io-web-socket-ref>
2709 </li>
2710 </template>
2711 </ul>
2712 </div>
2713 <br>
2714 <hr>
2715 </template>
2716 </polymer-element>
2717
2718 <polymer-element name="io-web-socket-view" extends="observatory-element">
2719 <template>
2720 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2721
2722 <nav-bar>
2723 <top-nav-menu last="{{ true }}"></top-nav-menu>
2724 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2725 </nav-bar>
2726
2727 <div class="content">
2728 <h1>WebSocket</h1>
2729
2730 <br>
2731
2732 <div class="memberList">
2733 <div class="memberItem">
2734 <div class="memberName">Socket</div>
2735 <div class="memberValue"><io-socket-ref ref="{{ webSocket['socket'] }} "></io-socket-ref></div>
2736 </div>
2737 </div>
2738 </div>
2739 <br>
2740 <hr>
2741 </template>
2742 </polymer-element>
2743
2744 <polymer-element name="io-random-access-file-ref" extends="service-ref">
2745 <template>
2746 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2747 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2748 </template>
2749 </polymer-element>
2750
2751 <polymer-element name="io-random-access-file-list-view" extends="observatory-ele ment">
2752 <template>
2753 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2754
2755 <nav-bar>
2756 <top-nav-menu last="{{ true }}"></top-nav-menu>
2757 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2758 </nav-bar>
2759
2760 <div class="content">
2761 <h1>Random Access Files</h1>
2762
2763 <br>
2764
2765 <ul class="list-group">
2766 <template repeat="{{ file in list['members'] }}">
2767 <li class="list-group-item">
2768 <io-random-access-file-ref ref="{{ file }}"></io-random-access-file- ref>
2769 </li>
2770 </template>
2771 </ul>
2772 </div>
2773 <br>
2774 <hr>
2775 </template>
2776 </polymer-element>
2777
2778 <polymer-element name="io-random-access-file-view" extends="observatory-element" >
2779 <template>
2780 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2781
2782 <nav-bar>
2783 <top-nav-menu last="{{ true }}"></top-nav-menu>
2784 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2785 </nav-bar>
2786
2787 <div class="content">
2788 <h1>Random Access File</h1>
2789
2790 <br>
2791
2792 <div class="memberList">
2793 <div class="memberItem">
2794 <div class="memberName">Path</div>
2795 <div class="memberValue">{{ file['name'] }}</div>
2796 </div>
2797 <div class="memberItem">
2798 <div class="memberName">Pending Operation</div>
2799 <div class="memberValue">{{ file['asyncDispatched'] }}</div>
2800 </div>
2801 <div class="memberItem">
2802 <div class="memberName">File Descriptor</div>
2803 <div class="memberValue">{{ file['fd'] }}</div>
2804 </div>
2805 </div>
2806 </div>
2807 <br>
2808 <hr>
2809 </template>
2810 </polymer-element>
2811
2812 <polymer-element name="io-process-list-view" extends="observatory-element">
2813 <template>
2814 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2815
2816 <nav-bar>
2817 <top-nav-menu last="{{ true }}"></top-nav-menu>
2818 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2819 </nav-bar>
2820
2821 <div class="content">
2822 <h1>Processes</h1>
2823
2824 <br>
2825
2826 <ul class="list-group">
2827 <template repeat="{{ process in list['members'] }}">
2828 <li class="list-group-item">
2829 <io-process-ref ref="{{ process }}"></io-process-ref>
2830 </li>
2831 </template>
2832 </ul>
2833 </div>
2834 <br>
2835 <hr>
2836 </template>
2837 </polymer-element>
2838
2839 <polymer-element name="io-process-ref" extends="service-ref">
2840 <template>
2841 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2842 <template if="{{ small }}">
2843 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2844 </template>
2845 <template if="{{ !small }}">
2846 <a on-click="{{ goto }}" _href="{{ url }}">({{ ref['pid'] }}) {{ name }} { { ref['arguments'] }}</a>
2847 </template>
2848 </template>
2849 </polymer-element>
2850
2851 <polymer-element name="io-process-view" extends="observatory-element">
2852 <template>
2853 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2854
2855 <nav-bar>
2856 <top-nav-menu last="{{ true }}"></top-nav-menu>
2857 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2858 </nav-bar>
2859
2860 <div class="content">
2861 <h1>Process</h1>
2862
2863 <br>
2864
2865 <div class="memberList">
2866 <div class="memberItem">
2867 <div class="memberName">Path</div>
2868 <div class="memberValue">{{ process['name'] }}</div>
2869 </div>
2870 <div class="memberItem">
2871 <div class="memberName">Pid</div>
2872 <div class="memberValue">{{ process['pid'] }}</div>
2873 </div>
2874 <div class="memberItem">
2875 <div class="memberName">Arguments</div>
2876 <div class="memberValue">{{ process['arguments'] }}</div>
2877 </div>
2878 <div class="memberItem">
2879 <div class="memberName">Started</div>
2880 <div class="memberValue">{{ process['started'] }}</div>
2881 </div>
2882 <div class="memberItem">
2883 <div class="memberName">Working Directory</div>
2884 <div class="memberValue">{{ process['workingDirectory'] }}</div>
2885 </div>
2886 <template if="{{ process['stdin'] != null }}">
2887 <div class="memberItem">
2888 <div class="memberName">stdin</div>
2889 <div class="memberValue">
2890 <io-socket-ref ref="{{ process['stdin'] }}"></io-socket-ref>
2891 </div>
2892 </div>
2893 </template>
2894 <template if="{{ process['stdout'] != null }}">
2895 <div class="memberItem">
2896 <div class="memberName">stdout</div>
2897 <div class="memberValue">
2898 <io-socket-ref ref="{{ process['stdout'] }}"></io-socket-ref>
2899 </div>
2900 </div>
2901 </template>
2902 <template if="{{ process['stderr'] != null }}">
2903 <div class="memberItem">
2904 <div class="memberName">stderr</div>
2905 <div class="memberValue">
2906 <io-socket-ref ref="{{ process['stderr'] }}"></io-socket-ref>
2907 </div>
2908 </div>
2909 </template>
2910 </div>
2911
2912 <br>
2913
2914 <h2>Environment</h2>
2915 <div class="well">
2916 <div class="monospace break-wrap">
2917 <template repeat="{{ variable in process['environment'] }}">
2918 {{ variable }}
2919 <br>
2920 </template>
2921 </div>
2922 </div>
2923 </div>
2924 <br>
2925 <hr>
2926 </template>
2927 </polymer-element>
2928
2929
2930
2931
2932
2933 <polymer-element name="isolate-ref" extends="service-ref">
2934 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/sha red.css">
2935 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
2936 </template>
2937 </polymer-element>
2938
2939
2940
2941
2942
2943
2944
2945
2946
2947
2948 <polymer-element name="isolate-summary" extends="observatory-element">
2949 <template>
2950 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2951 <div class="flex-row">
2952 <div class="flex-item-10-percent">
2953 <img src="packages/observatory/src/elements/img/isolate_icon.png">
2954 </div>
2955 <div class="flex-item-10-percent">
2956 <isolate-ref ref="{{ isolate }}"></isolate-ref>
2957 </div>
2958 <div class="flex-item-30-percent">
2959 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
2960 </div>
2961 <div class="flex-item-40-percent">
2962 <isolate-location isolate="{{ isolate }}"></isolate-location>
2963 </div>
2964 <div class="flex-item-10-percent">
2965 </div>
2966 </div>
2967
2968 <div class="flex-row">
2969 <div class="flex-item-20-percent"></div>
2970 <div class="flex-item-60-percent">
2971 <hr>
2972 </div>
2973 <div class="flex-item-20-percent"></div>
2974 </div>
2975
2976 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
2977
2978 </template>
2979 </polymer-element>
2980
2981 <polymer-element name="isolate-run-state" extends="observatory-element">
2982 <template>
2983 <template if="{{ isolate.pauseEvent != null }}">
2984 <strong>paused</strong>
2985 <action-link callback="{{ resume }}" label="resume"></action-link>
2986
2987 <action-link callback="{{ stepInto }}" label="step"></action-link>
2988 <action-link callback="{{ stepOver }}" label="step&nbsp;over"></action-lin k>
2989 <action-link callback="{{ stepOut }}" label="step&nbsp;out"></action-link>
2990 </template>
2991
2992 <template if="{{ isolate.running }}">
2993 <strong>running</strong>
2994 <action-link callback="{{ pause }}" label="pause"></action-link>
2995 </template>
2996
2997 <template if="{{ isolate.idle }}">
2998 <strong>idle</strong>
2999 <action-link callback="{{ pause }}" label="pause"></action-link>
3000 </template>
3001
3002 <template if="{{ isolate.loading }}">
3003 <strong>loading...</strong>
3004 </template>
3005 </template>
3006 </polymer-element>
3007
3008 <polymer-element name="isolate-location" extends="observatory-element">
3009 <template>
3010 <template if="{{ isolate.pauseEvent != null }}">
3011 <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}">
3012 at isolate start
3013 </template>
3014
3015 <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}">
3016 at isolate exit
3017 </template>
3018
3019 <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' ||
3020 isolate.pauseEvent.eventType == 'BreakpointReached' ||
3021 isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
3022 <template if="{{ isolate.pauseEvent.breakpoint != null }}">
3023 by breakpoint
3024 </template>
3025 <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
3026 by exception
3027 </template>
3028 at
3029 <function-ref ref="{{ isolate.topFrame['function'] }}">
3030 </function-ref>
3031 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
3032 </template>
3033 </template>
3034
3035 <template if="{{ isolate.running }}">
3036 at
3037 <function-ref ref="{{ isolate.topFrame['function'] }}">
3038 </function-ref>
3039 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFra me['tokenPos'] }}"></script-ref>)
3040 </template>
3041
3042 </template>
3043 </polymer-element>
3044
3045 <polymer-element name="isolate-shared-summary" extends="observatory-element">
3046 <template>
3047 <style>
3048 .errorBox {
3049 background-color: #f5f5f5;
3050 border: 1px solid #ccc;
3051 padding: 10px;
3052 font-family: consolas, courier, monospace;
3053 font-size: 1em;
3054 line-height: 1.2em;
3055 white-space: pre;
3056 }
3057 </style>
3058 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3059 <template if="{{ isolate.error != null }}">
3060 <div class="content-centered">
3061 <pre class="errorBox">{{ isolate.error.message }}</pre>
3062 <br>
3063 </div>
3064 </template>
3065 <div class="flex-row">
3066 <div class="flex-item-10-percent">
3067 </div>
3068 <div class="flex-item-40-percent">
3069 <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-count er-chart>
3070 </div>
3071 <div class="flex-item-40-percent">
3072 <div class="memberList">
3073 <div class="memberItem">
3074 <div class="memberName">new heap</div>
3075 <div class="memberValue">
3076 {{ isolate.newSpace.used | formatSize }}
3077 of
3078 {{ isolate.newSpace.capacity | formatSize }}
3079 </div>
3080 </div>
3081 <div class="memberItem">
3082 <div class="memberName">old heap</div>
3083 <div class="memberValue">
3084 {{ isolate.oldSpace.used | formatSize }}
3085 of
3086 {{ isolate.oldSpace.capacity | formatSize }}
3087 </div>
3088 </div>
3089 </div>
3090 <br>
3091 <div class="memberItem">
3092 <div class="memberValue">
3093 See <a on-click="{{ goto }}" _href="{{ gotoLink('/debugger' + isolat e.link) }}">debugger</a>
3094 </div>
3095 </div>
3096 <div class="memberItem">
3097 <div class="memberValue">
3098 See <a on-click="{{ goto }}" _href="{{ gotoLink('/class-tree' + isol ate.link) }}">class hierarchy</a>
3099 </div>
3100 </div>
3101 <div class="memberItem">
3102 <div class="memberValue">
3103 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('profile')) }}">cpu profile</a>
3104 </div>
3105 </div>
3106 <div class="memberItem">
3107 <div class="memberValue">
3108 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('allocationprofile')) }}">allocation profile</a>
3109 </div>
3110 </div>
3111 <div class="memberItem">
3112 <div class="memberValue">
3113 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('heapmap')) }}">heap map</a>
3114 </div>
3115 </div>
3116 <div class="memberItem">
3117 <div class="memberValue">
3118 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('metrics')) }}">metrics</a>
3119 </div>
3120 </div>
3121 <!-- Temporarily disabled until UI for dart:io is acceptable.
3122 <template if="{{ isolate.ioEnabled }}">
3123 <div class="memberItem">
3124 <div class="memberValue">
3125 See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLin k('io')) }}">dart:io</a>
3126 </div>
3127 </div>
3128 </template>
3129 -->
3130 </div>
3131 <div class="flex-item-10-percent">
3132 </div>
3133 </div>
3134 </template>
3135 </polymer-element>
3136
3137 <polymer-element name="isolate-counter-chart" extends="observatory-element">
3138 <template>
3139 <div id="counterPieChart" style="height: 200px"></div>
3140 </template>
3141 </polymer-element>
3142
3143
3144
3145
3146
3147
3148
3149
3150
3151
3152
3153
3154
3155
3156
3157 <polymer-element name="isolate-view" extends="observatory-element">
3158 <template>
3159 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3160 <style>
3161 .sourceInset {
3162 padding-left: 15%;
3163 padding-right: 15%;
3164 }
3165 .miniProfileChart {
3166 width: 80%;
3167 }
3168 </style>
3169
3170 <nav-bar>
3171 <top-nav-menu></top-nav-menu>
3172 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
3173 </isolate-nav-menu>
3174 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
3175 <nav-refresh callback="{{ refresh }}"></nav-refresh>
3176 <nav-control></nav-control>
3177 </nav-bar>
3178
3179 <div class="content">
3180 <h1>isolate '{{ isolate.name }}'</h1>
3181 </div>
3182
3183 <br>
3184 <div class="flex-row">
3185 <div class="flex-item-10-percent">
3186 </div>
3187 <div class="flex-item-30-percent">
3188 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
3189 </div>
3190 <div class="flex-item-50-percent">
3191 <isolate-location isolate="{{ isolate }}"></isolate-location>
3192 </div>
3193 <div class="flex-item-10-percent">
3194 </div>
3195 </div>
3196 <br>
3197
3198 <template if="{{ isolate.topFrame != null }}">
3199 <br>
3200 <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ iso late.topFrame['tokenPos'] }}" height="200px">
3201 </script-inset>
3202 </template>
3203
3204 <div class="flex-row">
3205 <div class="flex-item-20-percent"></div>
3206 <div class="flex-item-60-percent"><hr></div>
3207 <div class="flex-item-20-percent"></div>
3208 </div>
3209
3210 <br>
3211
3212 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
3213
3214 <div class="flex-row">
3215 <div class="flex-item-20-percent"></div>
3216 <div class="flex-item-60-percent"><hr></div>
3217 <div class="flex-item-20-percent"></div>
3218 </div>
3219
3220 <div class="content-centered">
3221 <div class="flex-row">
3222 <div class="flex-item-50-percent">
3223 <div class="memberList">
3224 <div class="memberItem">
3225 <div class="memberName">root library</div>
3226 <div class="memberValue">
3227 <library-ref ref="{{ isolate.rootLib }}"></library-ref>
3228 </div>
3229 </div>
3230 <div class="memberItem">
3231 <template if="{{ isolate.entry != null }}">
3232 <div class="memberName">entry</div>
3233 <div class="memberValue">
3234 <function-ref ref="{{ isolate.entry }}"></function-ref>
3235 </div>
3236 </template>
3237 </div>
3238 <div class="memberItem">
3239 <div class="memberName">isolate id</div>
3240 <div class="memberValue">{{ isolate.mainPort }}</div>
3241 </div>
3242 </div>
3243 </div>
3244 <div class="flex-item-50-percent">
3245 <div class="memberItem">
3246 <div class="memberValue">
3247 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLi nk('debug/breakpoints')) }}">breakpoints</a>
3248 </div>
3249 </div>
3250 </div>
3251 </div>
3252 </div>
3253
3254 <hr>
3255
3256 <div class="content">
3257 libraries ({{ isolate.libraries.length }})
3258 <curly-block expand="{{ isolate.libraries.length <= 8 }}">
3259 <div class="memberList">
3260 <template repeat="{{ lib in isolate.libraries }}">
3261 <div class="memberItem">
3262 <div class="memberName">
3263 <library-ref ref="{{ lib }}"></library-ref>
3264 </div>
3265 </div>
3266 </template>
3267 </div>
3268 </curly-block>
3269 </div>
3270
3271 <hr>
3272
3273 <div class="content">
3274 <div id="tagProfileChart" class="miniProfileChart" style="height: 600px">< /div>
3275 </div>
3276
3277 <hr>
3278
3279 <div class="content">
3280 <eval-box callback="{{ eval }}"></eval-box>
3281 </div>
3282 <br><br><br><br>
3283 <br><br><br><br>
3284 </template>
3285 </polymer-element>
3286
3287
3288
3289
3290
3291
3292
3293
3294
3295
3296
3297
3298
3299
3300
3301
3302
3303 <polymer-element name="inbound-reference" extends="service-ref">
3304 <template>
3305 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3306 <div>
3307 from <any-service-ref ref="{{ source }}"></any-service-ref>
3308 <template if="{{ slotIsArrayIndex }}">via [{{ slot }}]</template>
3309 <template if="{{ slotIsField }}">via <field-ref ref="{{ slot }}"></field-r ef></template>
3310
3311 <curly-block callback="{{ expander() }}">
3312 <div class="memberList">
3313 <div class="memberItem">
3314 <div class="memberName">
3315 <template repeat="{{ reference in inboundReferences] }}">
3316 <inbound-reference ref="{{ reference }}"></inbound-reference>
3317 </template>
3318 </div>
3319 </div>
3320 </div>
3321 </curly-block>
3322 </div>
3323 </template>
3324 </polymer-element>
3325
3326
3327
3328
3329
3330
3331
3332
3333
3334
3335
3336
3337
3338
3339
3340
3341
3342 <polymer-element name="object-common" extends="observatory-element">
3343 <template>
3344 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3345 <div class="memberList">
3346
3347 <div class="memberItem">
3348 <div class="memberName">class</div>
3349 <div class="memberValue">
3350 <class-ref ref="{{ object.clazz }}"></class-ref>
3351 </div>
3352 </div>
3353
3354 <template if="{{ object.size != null }}">
3355 <div class="memberItem" title="Space for this object in memory">
3356 <div class="memberName">size</div>
3357 <div class="memberValue">{{ object.size | formatSize }}</div>
3358 </div>
3359 </template>
3360
3361 <template if="{{ object.size == null }}">
3362 <div class="memberItem" title="Space for this object in memory">
3363 <div class="memberName">size</div>
3364 <div class="memberValue">0</div>
3365 </div>
3366 </template>
3367
3368 <div class="memberItem" title="Space that would be reclaimed if references to this object were replaced with null">
3369 <div class="memberName">retained size</div>
3370 <div class="memberValue">
3371 <template if="{{ retainedBytes == null }}">
3372 <eval-link callback="{{ retainedSize }}" label="[calculate]">
3373 </eval-link>
3374 </template>
3375 <template if="{{ retainedBytes != null }}">
3376 {{ retainedBytes | formatSize }}
3377 </template>
3378 </div>
3379 </div>
3380
3381 <div class="memberItem">
3382 <div class="memberName">retaining path</div>
3383 <div class="memberValue">
3384 <template if="{{ path == null }}">
3385 <eval-link callback="{{ retainingPath }}" label="[find]" expr="10">
3386 </eval-link>
3387 </template>
3388 <template if="{{ path != null }}">
3389 <template repeat="{{ element in path['elements'] }}">
3390 <div class="memberItem">
3391 <div class="memberName">[{{ element['index']}}]</div>
3392 <div class="memberValue">
3393 <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
3394 <template if="{{ element['parentField'] != null }}">
3395 in <field-ref ref="{{ element['parentField'] }}"></field-ref> of
3396 </template>
3397 <template if="{{ element['parentListIndex'] != null }}">
3398 in [{{ element['parentListIndex'] }}] of
3399 </template>
3400 </div>
3401 </div>
3402 </template>
3403 <template if="{{ path['length'] > path['elements'].length }}">
3404 showing {{ path['elements'].length }} of {{ path['length'] }}
3405 <eval-link callback="{{ retainingPath }}" label="[find more]" expr ="{{ path['elements'].length * 2 }}">
3406 </eval-link>
3407 </template>
3408 </template>
3409 </div>
3410 </div>
3411
3412 <div class="memberItem" title="Objects which directly reference this objec t">
3413 <div class="memberName">inbound references</div>
3414 <div class="memberValue">
3415 <template if="{{ inboundReferences == null }}">
3416 <eval-link callback="{{ fetchInboundReferences }}" label="[find]" ex pr="100">
3417 </eval-link>
3418 </template>
3419 <template if="{{ inboundReferences != null }}">
3420 <template repeat="{{ reference in inboundReferences['references'] }} ">
3421 <inbound-reference ref="{{ reference }}"></inbound-reference>
3422 </template>
3423 </template>
3424 </div>
3425 </div>
3426
3427 </div>
3428 </template>
3429 </polymer-element>
3430
3431
3432
3433
3434
3435
3436
3437
3438 <polymer-element name="context-ref" extends="service-ref">
3439 <template>
3440 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3441 <span>
3442 <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a>
3443 <curly-block callback="{{ expander() }}">
3444 <div class="memberList">
3445 <div class="memberItem">
3446 <div class="memberName">parent</div>
3447 <div class="memberValue">
3448 <any-service-ref ref="{{ ref.parentContext }}"></any-service-ref>
3449 </div>
3450 </div>
3451 <template repeat="{{ variable in ref.variables }}">
3452 <div class="memberItem">
3453 <div class="memberName">[{{ variable['index']}}]</div>
3454 <div class="memberValue">
3455 <any-service-ref ref="{{ variable['value'] }}"></any-service-ref >
3456 </div>
3457 </div>
3458 </template>
3459 </div>
3460 </curly-block>
3461 </span>
3462 </template>
3463 </polymer-element>
3464
3465
3466
3467
3468 <polymer-element name="instance-view" extends="observatory-element">
3469 <template>
3470 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3471 <nav-bar>
3472 <top-nav-menu></top-nav-menu>
3473 <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
3474 <!-- TODO(turnidge): Add library nav menu here. -->
3475 <class-nav-menu cls="{{ instance.clazz }}"></class-nav-menu>
3476 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
3477 <nav-refresh callback="{{ refresh }}"></nav-refresh>
3478 <nav-control></nav-control>
3479 </nav-bar>
3480
3481 <template if="{{ instance.isError }}">
3482 <error-view error_obj="{{ instance['error'] }}"></error-view>
3483 </template>
3484
3485 <template if="{{ !instance.isError }}">
3486 <div class="content">
3487 <template if="{{ instance.isAbstractType }}">
3488 <h1>type {{ instance.name }}</h1>
3489 </template>
3490 <template if="{{ !instance.isAbstractType }}">
3491 <h1>instance of {{ instance.clazz.name }}</h1>
3492 </template>
3493
3494 <object-common object="{{ instance }}"></object-common>
3495
3496 <div class="memberList">
3497 <div class="memberItem">&nbsp;</div>
3498
3499 <template if="{{ instance.valueAsString != null }}">
3500 <div class="memberItem">
3501 <div class="memberName">value</div>
3502 <div class="memberValue">{{ instance.valueAsString }}</div>
3503 </div>
3504 </template>
3505
3506 <template if="{{ instance.isString }}">
3507 <div class="memberItem">
3508 <div class="memberName">valueAsLiteral</div>
3509 <div class="memberValue"> {{ asStringLiteral(instance.valueAsStrin g, instance.valueAsStringIsTruncated) }}</div>
3510 </div>
3511 </template>
3512
3513 <template if="{{ instance.isMirrorReference }}">
3514 <div class="memberItem">
3515 <div class="memberName">referent</div>
3516 <div class="memberValue">
3517 <any-service-ref ref="{{ instance.referent }}">
3518 </any-service-ref>
3519 </div>
3520 </div>
3521 </template>
3522
3523 <template if="{{ instance.typeClass != null }}">
3524 <div class="memberItem">
3525 <div class="memberName">type class</div>
3526 <div class="memberValue">
3527 <class-ref ref="{{ instance.typeClass }}">
3528 </class-ref>
3529 </div>
3530 </div>
3531 </template>
3532
3533 <template if="{{ instance.isClosure }}">
3534 <div class="memberItem">
3535 <div class="memberName">closure function</div>
3536 <div class="memberValue">
3537 <function-ref ref="{{ instance.closureFunc }}">
3538 </function-ref>
3539 </div>
3540 </div>
3541 </template>
3542 <template if="{{ instance.isClosure }}">
3543 <div class="memberItem">
3544 <div class="memberName">closure context</div>
3545 <div class="memberValue">
3546 <any-service-ref ref="{{ instance.closureCtxt }}">
3547 </any-service-ref>
3548 </div>
3549 </div>
3550 </template>
3551
3552 <template if="{{ instance.isWeakProperty }}">
3553 <div class="memberItem">
3554 <div class="memberName">key</div>
3555 <div class="memberValue">
3556 <any-service-ref ref="{{ instance.key }}">
3557 </any-service-ref>
3558 </div>
3559 </div>
3560 <div class="memberItem">
3561 <div class="memberName">value</div>
3562 <div class="memberValue">
3563 <any-service-ref ref="{{ instance.value }}">
3564 </any-service-ref>
3565 </div>
3566 </div>
3567 </template>
3568
3569 <div class="memberItem">
3570 <div class="memberName">toString()</div>
3571 <div class="memberValue">
3572 <eval-link callback="{{ eval }}" expr="toString()"></eval-link>
3573 </div>
3574 </div>
3575 </div>
3576 </div>
3577
3578 <hr>
3579
3580 <div class="content">
3581 <template if="{{ instance.nativeFields.isNotEmpty }}">
3582 native fields ({{ instance.nativeFields.length }})
3583 <curly-block expand="{{ instance.nativeFields.length <= 8 }}">
3584 <div class="memberList">
3585 <template repeat="{{ field in instance.nativeFields }}">
3586 <div class="memberItem">
3587 <div class="memberName">[{{ field['index']}}]</div>
3588 <div class="memberValue">[{{ field['value']}}]</div>
3589 </div>
3590 </template>
3591 </div>
3592 </curly-block><br><br>
3593 </template>
3594
3595 <template if="{{ instance.fields.isNotEmpty }}">
3596 fields ({{ instance.fields.length }})
3597 <curly-block expand="{{ instance.fields.length <= 8 }}">
3598 <div class="memberList">
3599 <template repeat="{{ field in instance.fields }}">
3600 <div class="memberItem">
3601 <div class="memberName">
3602 <field-ref ref="{{ field['decl'] }}"></field-ref>
3603 </div>
3604 <div class="memberValue">
3605 <any-service-ref ref="{{ field.value }}"></any-service-ref>
3606 </div>
3607 </div>
3608 </template>
3609 </div>
3610 </curly-block><br><br>
3611 </template>
3612
3613 <template if="{{ instance.elements.isNotEmpty }}">
3614 elements ({{ instance.elements.length }})
3615 <curly-block expand="{{ instance.elements.length <= 8 }}">
3616 <div class="memberList">
3617 <template repeat="{{ element in instance.elements }}">
3618 <div class="memberItem">
3619 <div class="memberName">[{{ element['index']}}]</div>
3620 <div class="memberValue">
3621 <any-service-ref ref="{{ element['value'] }}"></any-service- ref>
3622 </div>
3623 </div>
3624 </template>
3625 </div>
3626 </curly-block><br><br>
3627 </template>
3628 </div>
3629
3630 <hr>
3631
3632 <div class="content">
3633 <eval-box callback="{{ eval }}"></eval-box>
3634 </div>
3635
3636 <br><br><br><br>
3637 <br><br><br><br>
3638
3639 </template>
3640 </template>
3641 </polymer-element>
3642
3643
3644
3645
3646
3647
3648 <polymer-element name="json-view" extends="observatory-element">
3649 <template>
3650 <nav-bar>
3651 <top-nav-menu last="{{ true }}"></top-nav-menu>
3652 </nav-bar>
3653 <pre>{{ mapAsString }}</pre>
3654 </template>
3655 </polymer-element>
3656
3657
3658
3659
3660
3661
3662
3663
3664
3665
3666
3667
3668
3669
3670
3671
3672 <polymer-element name="library-view" extends="observatory-element">
3673 <template>
3674 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3675
3676 <nav-bar>
3677 <top-nav-menu></top-nav-menu>
3678 <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
3679 <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav- menu>
3680 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
3681 <nav-refresh callback="{{ refresh }}"></nav-refresh>
3682 <nav-control></nav-control>
3683 </nav-bar>
3684
3685 <div class="content">
3686 <h1>
3687 <!-- TODO(turnidge): Handle unnamed libraries -->
3688 library {{ library.name }}
3689 </h1>
3690 <div class="memberList">
3691 <div class="memberItem">
3692 <div class="memberName">url</div>
3693 <div class="memberValue">{{ library.url }}</div>
3694 </div>
3695 <template if="{{ library.name != library.vmName }}">
3696 <div class="memberItem">
3697 <div class="memberName">vm name</div>
3698 <div class="memberValue">{{ library.vmName }}</div>
3699 </div>
3700 </template>
3701 </div>
3702 </div>
3703
3704 <hr>
3705
3706 <div class="content">
3707 <template if="{{ library.imports.isNotEmpty }}">
3708 imports ({{ library.imports.length }})
3709 <curly-block expand="{{ library.imports.length <= 8 }}">
3710 <div class="memberList">
3711 <template repeat="{{ imp in library.imports }}">
3712 <div class="memberItem">
3713 <div class="memberValue">
3714 <library-ref ref="{{ imp }}"></library-ref>
3715 </div>
3716 </div>
3717 </template>
3718 </div>
3719 </curly-block><br>
3720 <br>
3721 </template>
3722
3723 <template if="{{ library.scripts.isNotEmpty }}">
3724 scripts ({{ library.scripts.length }})
3725 <curly-block expand="{{ library.scripts.length <= 8 }}">
3726 <div class="memberList">
3727 <template repeat="{{ script in library.scripts }}">
3728 <div class="memberItem">
3729 <div class="memberValue">
3730 <script-ref ref="{{ script }}"></script-ref>
3731 </div>
3732 </div>
3733 </template>
3734 </div>
3735 </curly-block><br>
3736 <br>
3737 </template>
3738
3739 <template if="{{ library.classes.isNotEmpty }}">
3740 classes ({{ library.classes.length }})
3741 <curly-block expand="{{ library.classes.length <= 8 }}">
3742 <div class="memberList">
3743 <template repeat="{{ cls in library.classes }}">
3744 <div class="memberItem">
3745 <div class="memberValue">
3746 <class-ref ref="{{ cls }}"></class-ref>
3747 </div>
3748 </div>
3749 </template>
3750 </div>
3751 </curly-block><br>
3752 <br>
3753 </template>
3754
3755 <template if="{{ library.variables.isNotEmpty }}">
3756 variables ({{ library.variables.length }})
3757 <curly-block expand="{{ library.variables.length <= 8 }}">
3758 <div class="memberList">
3759 <template repeat="{{ field in library.variables }}">
3760 <div class="memberItem">
3761 <div class="memberName">
3762 <field-ref ref="{{ field }}"></field-ref>
3763 </div>
3764 <div class="memberValue">
3765 <template if="{{ field.value != null }}">
3766 <any-service-ref ref="{{ field.value }}"></any-service-ref>
3767 </template>
3768 </div>
3769 </div>
3770 </template>
3771 </div>
3772 </curly-block><br>
3773 <br>
3774 </template>
3775
3776 <template if="{{ library.functions.isNotEmpty }}">
3777 functions ({{ library.functions.length }})
3778 <curly-block expand="{{ library.functions.length <= 8 }}">
3779 <div class="memberList">
3780 <template repeat="{{ function in library.functions }}">
3781 <div class="memberItem">
3782 <div class="memberValue">
3783 <function-ref ref="{{ function }}"></function-ref>
3784 </div>
3785 </div>
3786 </template>
3787 </div>
3788 </curly-block><br>
3789 <br>
3790 </template>
3791 </div>
3792
3793 <hr>
3794
3795 <div class="content">
3796 <eval-box callback="{{ eval }}"></eval-box>
3797 </div>
3798 <br><br><br><br>
3799 <br><br><br><br>
3800 </template>
3801 </polymer-element>
3802
3803
3804
3805
3806
3807
3808
3809 <polymer-element name="metrics-page" extends="observatory-element">
3810 <template>
3811 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3812 <style>
3813 ul li:hover:not(.selected) {
3814 background-color: #FFF3E3;
3815 }
3816 .selected {
3817 background-color: #0489c3;
3818 }
3819 .graph {
3820 min-height: 600px;
3821 }
3822 </style>
3823 <nav-bar>
3824 <top-nav-menu last="{{ true }}"></top-nav-menu>
3825 <nav-refresh callback="{{ refresh }}"></nav-refresh>
3826 <nav-control></nav-control>
3827 </nav-bar>
3828 <div class="flex-row">
3829 <div class="flex-item-20-percent">
3830 <ul>
3831 <template repeat="{{ metric in isolate.dartMetrics.values }}">
3832 <template if="{{ metric == selectedMetric }}">
3833 <li class="selected">
3834 {{ metric.name }}
3835 </li>
3836 </template>
3837 <template if="{{ metric != selectedMetric }}">
3838 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
3839 {{ metric.name }}
3840 </li>
3841 </template>
3842 </template>
3843 <template repeat="{{ metric in isolate.vmMetrics.values }}">
3844 <template if="{{ metric == selectedMetric }}">
3845 <li class="selected">
3846 {{ metric.name }}
3847 </li>
3848 </template>
3849 <template if="{{ metric != selectedMetric }}">
3850 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
3851 {{ metric.name }}
3852 </li>
3853 </template>
3854 </template>
3855 </ul>
3856 </div>
3857 <div class="flex-item-80-percent">
3858 <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">
3859 </metrics-graph>
3860 <div>
3861 <metric-details page="{{ page }}" metric="{{ selectedMetric }}">
3862 </metric-details>
3863 </div>
3864 </div>
3865 </div>
3866 </template>
3867 </polymer-element>
3868
3869 <polymer-element name="metric-details" extends="observatory-element">
3870 <template>
3871 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3872 <div class="content-centered">
3873 <div class="memberList">
3874 <div class="memberItem">
3875 <div class="memberName">name</div>
3876 <div class="memberValue">{{ metric.name }}</div>
3877 </div>
3878 <div class="memberItem">
3879 <div class="memberName">description</div>
3880 <div class="memberValue">{{ metric.description }}</div>
3881 </div>
3882 <div class="memberItem">
3883 <div class="memberName">current value</div>
3884 <div class="memberValue">{{ metric.value }}</div>
3885 </div>
3886 <template if="{{ (metric != null) &amp;&amp; (metric.min != null) }}">
3887 <div class="memberItem">
3888 <div class="memberName">minimum</div>
3889 <div class="memberValue">{{ metric.min }}</div>
3890 </div>
3891 </template>
3892 <template if="{{ (metric != null) &amp;&amp; (metric.max != null) }}">
3893 <div class="memberItem">
3894 <div class="memberName">maximum</div>
3895 <div class="memberValue">{{ metric.max }}</div>
3896 </div>
3897 </template>
3898 <div class="memberItem">
3899 <div class="memberName">refresh rate</div>
3900 <div class="memberValue">
3901 <select id="refreshrate" on-change="{{ refreshRateChange }}">
3902 <!-- These must be kept in sync with POLL_PERIODS in MetricsPage
3903 in object.dart -->
3904 <option value="8000">Every eight seconds</option>
3905 <option value="4000">Every four seconds</option>
3906 <option value="2000">Every two seconds</option>
3907 <option value="1000">Once a second</option>
3908 <option value="100">Ten times per second</option>
3909 <option value="0" selected="selected">Never</option>
3910 </select>
3911 </div>
3912 </div>
3913 <div class="memberItem">
3914 <div class="memberName">sample buffer size</div>
3915 <div class="memberValue">
3916 <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
3917 <option value="10">10</option>
3918 <option value="100" selected="selected">100</option>
3919 <option value="1000">1000</option>
3920 </select>
3921 </div>
3922 </div>
3923 </div>
3924 </div>
3925 </template>
3926 </polymer-element>
3927
3928 <polymer-element name="metrics-graph" extends="observatory-element">
3929 <template>
3930 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3931 <style>
3932 .graph {
3933 min-height: 600px;
3934 }
3935 </style>
3936 <div id="graph" class="graph">
3937 </div>
3938 </template>
3939 </polymer-element>
3940
3941
3942
3943
3944
3945
3946
3947
3948
3949
3950
3951
3952
3953
3954
3955
3956
3957 <polymer-element name="object-view" extends="observatory-element">
3958 <template>
3959 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3960 <nav-bar>
3961 <top-nav-menu></top-nav-menu>
3962 <isolate-nav-menu isolate="{{ object.isolate }}"></isolate-nav-menu>
3963 <nav-menu link="." anchor="object" last="{{ true }}"></nav-menu>
3964 <nav-refresh callback="{{ refresh }}"></nav-refresh>
3965 <nav-control></nav-control>
3966 </nav-bar>
3967
3968 <div class="content">
3969 <object-common object="{{ object }}"></object-common>
3970 </div>
3971
3972 <hr>
3973 </template>
3974 </polymer-element>
3975
3976
3977
3978
3979
3980
3981
3982
3983
3984
3985
3986
3987
3988
3989
3990
3991
3992
3993
3994 <polymer-element name="context-view" extends="observatory-element">
3995 <template>
3996 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3997 <nav-bar>
3998 <top-nav-menu></top-nav-menu>
3999 <isolate-nav-menu isolate="{{ context.isolate }}"></isolate-nav-menu>
4000 <!-- TODO(turnidge): Add library nav menu here. -->
4001 <class-nav-menu cls="{{ context.clazz }}"></class-nav-menu>
4002 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
4003 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4004 <nav-control></nav-control>
4005 </nav-bar>
4006
4007 <template if="{{ !context.isError }}">
4008 <div class="content">
4009 <h1>instance of Context</h1>
4010
4011 <object-common object="{{ context }}"></object-common>
4012
4013 <div class="memberList">
4014 <div class="memberItem">&nbsp;</div>
4015
4016 <div class="memberItem">
4017 <div class="memberName">parent context</div>
4018 <div class="memberValue">
4019 <any-service-ref ref="{{ context.parentContext }}"></any-service-r ef>
4020 </div>
4021 </div>
4022 </div>
4023 </div>
4024
4025 <hr>
4026
4027 <div class="content">
4028 <template if="{{ context.variables.isNotEmpty }}">
4029 variables ({{ context.variables.length }})
4030 <curly-block expand="{{ context.variables.length <= 8 }}">
4031 <div class="memberList">
4032 <template repeat="{{ variable in context.variables }}">
4033 <div class="memberItem">
4034 <div class="memberName">[{{ variable['index']}}]</div>
4035 <div class="memberValue">
4036 <any-service-ref ref="{{ variable['value'] }}"></any-service -ref>
4037 </div>
4038 </div>
4039 </template>
4040 </div>
4041 </curly-block><br><br>
4042 </template>
4043 </div>
4044
4045 <br><br><br><br>
4046 <br><br><br><br>
4047
4048 </template>
4049 </template>
4050 </polymer-element>
4051
4052
4053
4054
4055
4056
4057
4058
4059
4060
4061
4062
4063 <polymer-element name="heap-profile" extends="observatory-element">
4064 <template>
4065 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
4066 <style>
4067 .table {
4068 border-collapse: collapse!important;
4069 margin-bottom: 20px
4070 table-layout: fixed;
4071 }
4072 .table td:nth-of-type(1) {
4073 width: 30%;
4074 }
4075 .th, .td {
4076 padding: 8px;
4077 vertical-align: top;
4078 }
4079 .table thead > tr > th {
4080 vertical-align: bottom;
4081 text-align: left;
4082 border-bottom:2px solid #ddd;
4083 }
4084 .spacer {
4085 width: 16px;
4086 }
4087 .left-border-spacer {
4088 width: 16px;
4089 border-left: 1px solid;
4090 }
4091 .clickable {
4092 color: #0489c3;
4093 text-decoration: none;
4094 cursor: pointer;
4095 }
4096 .clickable:hover {
4097 text-decoration: underline;
4098 cursor: pointer;
4099 }
4100 #classtable tr:hover > td {
4101 background-color: #F4C7C3;
4102 }
4103 .nav-option {
4104 color: white;
4105 float: right;
4106 margin: 3px;
4107 padding: 8px;
4108 }
4109 </style>
4110 <nav-bar>
4111 <top-nav-menu></top-nav-menu>
4112 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
4113 <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anc hor="allocation profile" last="{{ true }}"></nav-menu>
4114 <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></n av-refresh>
4115 <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>
4116 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4117 <div class="nav-option">
4118 <input type="checkbox" checked="{{ autoRefresh }}">Auto-refresh on GC
4119 </div>
4120 <nav-control></nav-control>
4121 </nav-bar>
4122 <div class="content">
4123 <h1>Allocation Profile</h1>
4124 <br>
4125 <div class="memberList">
4126 <div class="memberItem">
4127 <div class="memberName">last forced GC at</div>
4128 <div class="memberValue">{{ lastServiceGC }}</div>
4129 </div>
4130 <div class="memberItem">
4131 <div class="memberName">last accumulator reset at</div>
4132 <div class="memberValue">{{ lastAccumulatorReset }}</div>
4133 </div>
4134 </div>
4135 </div>
4136 <hr>
4137 <div class="content-centered-big">
4138 <div class="flex-row">
4139 <div id="newSpace" class="flex-item-50-percent">
4140 <h2>New Generation</h2>
4141 <br>
4142 <div class="memberList">
4143 <div class="memberItem">
4144 <div class="memberName">used</div>
4145 <div class="memberValue">
4146 {{ isolate.newSpace.used | formatSize }}
4147 of
4148 {{ isolate.newSpace.capacity | formatSize }}
4149 </div>
4150 </div>
4151 <div class="memberItem">
4152 <div class="memberName">external</div>
4153 <div class="memberValue">
4154 {{ isolate.newSpace.external | formatSize }}
4155 </div>
4156 </div>
4157 <div class="memberItem">
4158 <div class="memberName">collections</div>
4159 <div class="memberValue">{{ formattedCollections(true) }}</div>
4160 </div>
4161 <div class="memberItem">
4162 <div class="memberName">average collection time</div>
4163 <div class="memberValue">{{ formattedAverage(true) }}</div>
4164 </div>
4165 <div class="memberItem">
4166 <div class="memberName">cumulative collection time</div>
4167 <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</d iv>
4168 </div>
4169 <div class="memberItem">
4170 <div class="memberName">average time between collections</div>
4171 <div class="memberValue">{{ isolate.newSpace.averageCollectionPeriod InMillis.toStringAsFixed(2) }} ms</div>
4172 </div>
4173 </div>
4174 <div id="newPieChart" style="height: 300px"></div>
4175 </div>
4176 <div id="oldSpace" class="flex-item-50-percent">
4177 <h2>Old Generation</h2>
4178 <br>
4179 <div class="memberList">
4180 <div class="memberItem">
4181 <div class="memberName">used</div>
4182 <div class="memberValue">
4183 {{ isolate.oldSpace.used | formatSize }}
4184 of
4185 {{ isolate.oldSpace.capacity | formatSize }}
4186 </div>
4187 </div>
4188 <div class="memberItem">
4189 <div class="memberName">external</div>
4190 <div class="memberValue">
4191 {{ isolate.oldSpace.external | formatSize }}
4192 </div>
4193 </div>
4194 <div class="memberItem">
4195 <div class="memberName">collections</div>
4196 <div class="memberValue">{{ formattedCollections(false) }}</div>
4197 </div>
4198 <div class="memberItem">
4199 <div class="memberName">average collection time</div>
4200 <div class="memberValue">{{ formattedAverage(false) }}</div>
4201 </div>
4202 <div class="memberItem">
4203 <div class="memberName">cumulative collection time</div>
4204 <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</ div>
4205 </div>
4206 <div class="memberItem">
4207 <div class="memberName">average time between collections</div>
4208 <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriod InMillis.toStringAsFixed(2) }} ms</div>
4209 </div>
4210 </div>
4211 <div id="oldPieChart" style="height: 300px"></div>
4212 </div>
4213 </div>
4214 </div>
4215 <br>
4216 <hr>
4217 <div class="content-centered-big">
4218 <table id="classtable" class="flex-item-100-percent table">
4219 <thead id="classTableHead">
4220 <tr>
4221 <th on-click="{{changeSort}}" class="clickable" title="Class">{{ class Table.getColumnLabel(0) }}</th>
4222 <th class="spacer"></th>
4223 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(2) }}</th>
4224 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(3) }}</th>
4225 <th on-click="{{changeSort}}" class="clickable" title="New Current Siz e">{{ classTable.getColumnLabel(4) }}</th>
4226 <th on-click="{{changeSort}}" class="clickable" title="New Current Ins tances">{{ classTable.getColumnLabel(5) }}</th>
4227 <th class="spacer"></th>
4228 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(7) }}</th>
4229 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(8) }}</th>
4230 <th on-click="{{changeSort}}" class="clickable" title="Old Current Siz e">{{ classTable.getColumnLabel(9) }}</th>
4231 <th on-click="{{changeSort}}" class="clickable" title="Old Current Ins tances">{{ classTable.getColumnLabel(10) }}</th>
4232 </tr>
4233 </thead>
4234 <tbody id="classTableBody">
4235 </tbody>
4236 </table>
4237 <br><br><br>
4238 <br><br><br>
4239 </div>
4240 </template>
4241 </polymer-element>
4242
4243
4244
4245
4246
4247
4248
4249
4250
4251
4252
4253 <polymer-element name="sliding-checkbox">
4254 <template>
4255 <style>
4256 .switch {
4257 position: relative;
4258 width: 121px;
4259 -webkit-user-select: none;
4260 -moz-user-select: none;
4261 -ms-user-select: none;
4262 }
4263 .hide {
4264 display: none;
4265 }
4266 .label {
4267 display: block;
4268 overflow: hidden;
4269 cursor: pointer;
4270 border: 2px solid #999999;
4271 border-radius: 15px;
4272 }
4273 .content {
4274 width: 200%;
4275 margin-left: -100%;
4276 -moz-transition: margin 0.3s ease-in 0s;
4277 -webkit-transition: margin 0.3s ease-in 0s;
4278 -o-transition: margin 0.3s ease-in 0s;
4279 transition: margin 0.3s ease-in 0s;
4280 }
4281 .content:before, .content:after {
4282 float: left;
4283 width: 50%;
4284 height: 30px;
4285 padding: 0;
4286 line-height: 30px;
4287 color: white;
4288 font: 400 14px 'Montserrat', sans-serif;
4289 -moz-box-sizing: border-box;
4290 -webkit-box-sizing: border-box;
4291 box-sizing: border-box;
4292 }
4293 .content:before {
4294 content: {{ checkedText }};
4295 padding-left: 10px;
4296 background-color: #0489C3;
4297 }
4298 .content:after {
4299 content: {{ uncheckedText }};
4300 padding-right: 10px;
4301 background-color: #EEEEEE;
4302 color: #999999;
4303 text-align: right;
4304 }
4305 .dot {
4306 width: 14px;
4307 margin: 8px;
4308 background: #FFFFFF;
4309 border: 2px solid #999999;
4310 border-radius: 15px;
4311 position: absolute;
4312 top: 0;
4313 bottom: 0;
4314 right: 87px;
4315 -moz-transition: all 0.3s ease-in 0s;
4316 -webkit-transition: all 0.3s ease-in 0s;
4317 -o-transition: all 0.3s ease-in 0s;
4318 transition: all 0.3s ease-in 0s;
4319 }
4320 :checked + .label .content {
4321 margin-left: 0;
4322 }
4323 :checked + .label .dot {
4324 right: 0px;
4325 }
4326 </style>
4327 <div class="switch">
4328 <input type="checkbox" class="hide" id="slide-switch" on-change="{{ change }}">
4329 <label class="label" for="slide-switch">
4330 <div class="content"></div>
4331 <div class="dot"></div>
4332 </label>
4333 </div>
4334 </template>
4335 </polymer-element>
4336
4337
4338
4339 <polymer-element name="isolate-profile" extends="observatory-element">
4340 <template>
4341 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4342 <nav-bar>
4343 <top-nav-menu></top-nav-menu>
4344 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
4345 <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
4346 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4347 <nav-control></nav-control>
4348 </nav-bar>
4349 <style>
4350 .table {
4351 border-collapse: collapse!important;
4352 width: 100%;
4353 margin-bottom: 20px
4354 }
4355 .table thead > tr > th,
4356 .table tbody > tr > th,
4357 .table tfoot > tr > th,
4358 .table thead > tr > td,
4359 .table tbody > tr > td,
4360 .table tfoot > tr > td {
4361 padding: 8px;
4362 vertical-align: top;
4363 }
4364 .table thead > tr > th {
4365 vertical-align: bottom;
4366 text-align: left;
4367 border-bottom:2px solid #ddd;
4368 }
4369
4370 tr:hover > td {
4371 background-color: #FFF3E3;
4372 }
4373 .rowColor0 {
4374 background-color: #FFE9CC;
4375 }
4376 .rowColor1 {
4377 background-color: #FFDEB2;
4378 }
4379 .rowColor2 {
4380 background-color: #FFD399;
4381 }
4382 .rowColor3 {
4383 background-color: #FFC87F;
4384 }
4385 .rowColor4 {
4386 background-color: #FFBD66;
4387 }
4388 .rowColor5 {
4389 background-color: #FFB24C;
4390 }
4391 .rowColor6 {
4392 background-color: #FFA733;
4393 }
4394 .rowColor7 {
4395 background-color: #FF9C19;
4396 }
4397 .rowColor8 {
4398 background-color: #FF9100;
4399 }
4400
4401 .tooltip {
4402 display: block;
4403 position: absolute;
4404 visibility: hidden;
4405 opacity: 0;
4406 transition: visibility 0s linear 0.5s;
4407 transition: opacity .4s ease-in-out;
4408 }
4409
4410 tr:hover .tooltip {
4411 display: block;
4412 position: absolute;
4413 top: 100%;
4414 right: 100%;
4415 visibility: visible;
4416 z-index: 999;
4417 width: 400px;
4418 color: #ffffff;
4419 background-color: #0489c3;
4420 border-top-right-radius: 8px;
4421 border-top-left-radius: 8px;
4422 border-bottom-right-radius: 8px;
4423 border-bottom-left-radius: 8px;
4424 transition: visibility 0s linear 0.5s;
4425 transition: opacity .4s ease-in-out;
4426 opacity: 1;
4427 }
4428
4429 .white {
4430 color: #ffffff;
4431 }
4432
4433 </style>
4434 <div class="content">
4435 <h1>Sampled CPU profile</h1>
4436 <div class="memberList">
4437 <div class="memberItem">
4438 <div class="memberName">Timestamp</div>
4439 <div class="memberValue">{{ refreshTime }}</div>
4440 </div>
4441 <div class="memberItem">
4442 <div class="memberName">Time span</div>
4443 <div class="memberValue">{{ timeSpan }}</div>
4444 </div>
4445 <div class="memberItem">
4446 <div class="memberName">Sample count</div>
4447 <div class="memberValue">{{ sampleCount }}</div>
4448 </div>
4449 <div class="memberItem">
4450 <div class="memberName">Sample rate</div>
4451 <div class="memberValue">{{ sampleRate }} Hz</div>
4452 </div>
4453 <div class="memberItem">
4454 <div class="memberName">Sample depth</div>
4455 <div class="memberValue">{{ sampleDepth }} stack frames</div>
4456 </div>
4457 <div class="memberItem">
4458 <div class="memberName">Display cutoff</div>
4459 <div class="memberValue">{{ displayCutoff }}</div>
4460 </div>
4461 <div class="memberItem">
4462 <div class="memberName">Tags</div>
4463 <div class="memberValue">
4464 <select value="{{tagSelector}}">
4465 <option value="uv">User &gt; VM</option>
4466 <option value="u">User</option>
4467 <option value="vu">VM &gt; User</option>
4468 <option value="v">VM</option>
4469 <option value="hide">None</option>
4470 </select>
4471 </div>
4472 </div>
4473 </div>
4474 <hr>
4475 <table id="tableTree" class="table">
4476 <thead>
4477 <tr>
4478 <th>Method</th>
4479 <th>Self</th>
4480 </tr>
4481 </thead>
4482 <tbody>
4483 <tr template="" repeat="{{row in tree.rows }}" style="{{}}">
4484 <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style= "{{ padding(row) }}">
4485 <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
4486 <div style="position: relative;display: inline">
4487 {{row.columns[0]}}
4488 </div>
4489 <code-ref ref="{{ row.code }}"></code-ref>
4490 </td>
4491 <td class="{{ coloring(row) }}" style="position: relative">
4492 {{row.columns[1]}}
4493 <div class="tooltip">
4494 <div class="memberList">
4495 <div class="memberItem">
4496 <div class="memberName white">Kind</div>
4497 <div class="memberValue white">{{ row.tipKind }}</div>
4498 </div>
4499 <div class="memberItem">
4500 <div class="memberName white">Percent of Parent</div>
4501 <div class="memberValue white">{{ row.tipParent }}</div>
4502 </div>
4503 <div class="memberItem">
4504 <div class="memberName white">Sample Count</div>
4505 <div class="memberValue white">{{ row.tipTicks }} ({{ row.tip Exclusive }})</div>
4506 </div>
4507 <div class="memberItem">
4508 <div class="memberName white">Approximate Execution Time</div >
4509 <div class="memberValue white">{{ row.tipTime }}</div>
4510 </div>
4511 </div>
4512 </div>
4513 </td>
4514 </tr>
4515 </tbody>
4516 </table>
4517 </div>
4518 </template>
4519 </polymer-element>
4520
4521
4522
4523
4524
4525
4526
4527
4528
4529
4530 <polymer-element name="script-view" extends="observatory-element">
4531 <template>
4532 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
4533 <nav-bar>
4534 <top-nav-menu></top-nav-menu>
4535 <isolate-nav-menu isolate="{{ script.isolate }}">
4536 </isolate-nav-menu>
4537 <nav-menu link="{{ script.owningLibrary.link }}" anchor="{{ script.owningLib rary.name }}"></nav-menu>
4538 <nav-menu link="{{ script.link }}" anchor="{{ script.name }}" last="{{ true }}"></nav-menu>
4539 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav -refresh>
4540 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4541 <nav-control></nav-control>
4542 </nav-bar>
4543
4544 <template if="{{ args['pos'] == null }}">
4545 <script-inset id="scriptInset" script="{{ script }}">
4546 <h1>script {{ script.name }}</h1>
4547 </script-inset>
4548 </template>
4549
4550 <template if="{{ args['pos'] != null }}">
4551 <script-inset id="scriptInset" script="{{ script }}" currentpos="{{ args['po s'] | parseInt }}">
4552 <h1>script {{ script.name }}</h1>
4553 </script-inset>
4554 </template>
4555
4556 </template>
4557 </polymer-element>
4558
4559
4560
4561
4562
4563
4564
4565
4566
4567
4568
4569
4570
4571 <polymer-element name="vm-view" extends="observatory-element">
4572 <template>
4573 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4574
4575 <nav-bar>
4576 <top-nav-menu last="{{ true }}"></top-nav-menu>
4577 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4578 <nav-control></nav-control>
4579 </nav-bar>
4580
4581 <div class="content">
4582 <h1>VM</h1>
4583 <div class="memberList">
4584 <div class="memberItem">
4585 <div class="memberName">version</div>
4586 <div class="memberValue">{{ vm.version }}</div>
4587 </div>
4588 <div class="memberItem">
4589 <div class="memberName">uptime</div>
4590 <div class="memberValue">{{ vm.uptime | formatTime }}</div>
4591 </div>
4592 <div class="memberItem">
4593 <div class="memberName">type checks enabled</div>
4594 <div class="memberValue">{{ vm.typeChecksEnabled }}</div>
4595 </div>
4596 <div class="memberItem">
4597 <div class="memberName">asserts enabled</div>
4598 <div class="memberValue">{{ vm.assertsEnabled }}</div>
4599 </div>
4600 <div class="memberItem">
4601 <div class="memberName">pid</div>
4602 <div class="memberValue">{{ vm.pid }}</div>
4603 </div>
4604 <div class="memberItem">
4605 <div class="memberName">refreshed at</div>
4606 <div class="memberValue">{{ vm.lastUpdate }}</div>
4607 </div>
4608 <br>
4609 <div class="memberItem">
4610 <div class="memberValue">
4611 See <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">flags< /a>
4612 </div>
4613 </div>
4614 </div>
4615 </div>
4616
4617 <br>
4618 <hr>
4619
4620 <ul class="list-group">
4621 <template repeat="{{ isolate in vm.isolates }}">
4622 <li class="list-group-item">
4623 <isolate-summary isolate="{{ isolate }}"></isolate-summary>
4624 </li>
4625 <hr>
4626 </template>
4627 </ul>
4628 </template>
4629 </polymer-element>
4630
4631
4632 <polymer-element name="service-view" extends="observatory-element">
4633 <!-- This element explicitly manages the child elements to avoid setting
4634 an observable property on the old element to an invalid type. -->
4635 </polymer-element>
4636
4637 <polymer-element name="trace-view" extends="observatory-element">
4638 <template>
4639 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4640
4641 <template if="{{ tracer != null }}">
4642 <div class="memberList">
4643 <template repeat="{{ event in tracer.events }}">
4644 <div class="memberItem">
4645 <div class="memberSmall">
4646 {{ event.timeStamp }}
4647 </div>
4648 <div class="memberSmall">
4649 {{ event.message }}
4650 <template if="{{ event.map != null }}">
4651 <br>
4652 <map-viewer map="{{ event.map }}"></map-viewer>
4653 </template>
4654 </div>
4655 </div>
4656 </template>
4657 </div>
4658 <br>
4659 <br>
4660 <br>
4661 </template>
4662 </template>
4663 </polymer-element>
4664
4665 <polymer-element name="map-viewer" extends="observatory-element">
4666 <template>
4667 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4668
4669 <template if="{{ map.length > 0 }}">
4670 <curly-block callback="{{ expander() }}">
4671 <template if="{{ expand }}">
4672 <div class="memberList">
4673 <template repeat="{{ key in map.keys }}">
4674 <div class="memberItem">
4675 <div class="memberSmall">{{ key }}</div>
4676 <div class="memberSmall">:</div>
4677 <div class="memberSmall">
4678 <template if="{{ isMap(map[key]) }}">
4679 <map-viewer map="{{ map[key] }}"></map-viewer>
4680 </template>
4681 <template if="{{ isList(map[key]) }}">
4682 <list-viewer list="{{ map[key] }}"></list-viewer>
4683 </template>
4684 <template if="{{ !isMap(map[key]) &amp;&amp; !isList(map[key]) }}">
4685 {{ map[key] }}
4686 </template>
4687 </div>
4688 </div>
4689 </template>
4690 </div>
4691 </template>
4692 </curly-block>
4693 </template>
4694 </template>
4695 </polymer-element>
4696
4697 <polymer-element name="list-viewer" extends="observatory-element">
4698 <template>
4699 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4700
4701 <template if="{{ list.length > 0 }}">
4702 <curly-block callback="{{ expander() }}">
4703 <template if="{{ expand }}">
4704 <div class="memberList">
4705 <template repeat="{{ element in list }}">
4706 <div class="memberItem">
4707 <div class="memberSmall">
4708 <template if="{{ isMap(element) }}">
4709 <map-viewer map="{{ element }}"></map-viewer>
4710 </template>
4711 <template if="{{ isList(element) }}">
4712 <list-viewer list="{{ element }}"></list-viewer>
4713 </template>
4714 <template if="{{ !isMap(element) &amp;&amp; !isList(element) } }">
4715 {{ element }}
4716 </template>
4717 </div>
4718 </div>
4719 </template>
4720 </div>
4721 </template>
4722 </curly-block>
4723 </template>
4724 </template>
4725 </polymer-element>
4726
4727
4728
4729 <polymer-element name="observatory-application" extends="observatory-element">
4730 <!-- This element explicitly manages its child elements -->
4731 </polymer-element>
4732
4733
4734
4735
4736
4737
4738
4739
4740
4741
4742
4743 <polymer-element name="service-exception-view" extends="observatory-element">
4744 <template>
4745 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4746 <nav-bar>
4747 <top-nav-menu last="{{ true }}"></top-nav-menu>
4748 <nav-control></nav-control>
4749 </nav-bar>
4750 <div class="content-centered">
4751 <h1>{{ exception.kind }}</h1>
4752 <br>
4753 <div class="well">{{ exception.message }}</div>
4754 <template if="{{ exception.response != '' }}">
4755 <div class="well">{{ exception.response }}</div>
4756 </template>
4757 </div>
4758 </template>
4759 </polymer-element>
4760
4761
4762
4763
4764
4765
4766
4767 <polymer-element name="service-error-view" extends="observatory-element">
4768 <template>
4769 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4770 <nav-bar>
4771 <top-nav-menu last="{{ true }}"></top-nav-menu>
4772 <nav-control></nav-control>
4773 </nav-bar>
4774 <div class="content-centered">
4775 <h1>{{ error.kind }}</h1>
4776 <br>
4777 <div class="well">{{ error.message }}</div>
4778 </div>
4779 </template>
4780 </polymer-element>
4781
4782
4783
4784
4785
4786
4787
4788 <polymer-element name="vm-connect-target" extends="observatory-element">
4789 <template>
4790 <style>
4791 .delete-button {
4792 padding: 4px;
4793 background: transparent;
4794 border: none !important;
4795 }
4796 .delete-button:hover {
4797 background: #ff0000;
4798 }
4799 </style>
4800 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4801 <span>
4802 <template if="{{ isCurrentTarget }}">
4803 <a on-click="{{ connectToVm }}" _href="{{ gotoLink('/vm') }}">{{ target. name }} (Connected)</a>
4804 </template>
4805 <template if="{{ !isCurrentTarget }}">
4806 <a on-click="{{ connectToVm }}" _href="{{ gotoLink('/vm') }}">{{ target. name }}</a>
4807 </template>
4808 <template if="{{ !isChromeTarget }}">
4809 <button class="delete-button" on-click="{{ deleteVm }}">✖ Remove</button >
4810 </template>
4811 </span>
4812 </template>
4813 </polymer-element>
4814
4815 <polymer-element name="vm-connect" extends="observatory-element">
4816 <template>
4817 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4818 <style>
4819 .textbox {
4820 width: 20em;
4821 font: 400 16px 'Montserrat', sans-serif;
4822 }
4823 </style>
4824
4825 <nav-bar>
4826 <top-nav-menu last="{{ true }}"></top-nav-menu>
4827 <nav-control></nav-control>
4828 </nav-bar>
4829
4830 <div class="content-centered">
4831 <h1>Connect to a Dart VM</h1>
4832 <br>
4833 <hr>
4834 <div class="flex-row">
4835 <div class="flex-item-40-percent">
4836 <h2><img style="height: 48px" src="packages/observatory/src/elements/i mg/dart_icon.png">Standalone</h2>
4837 <br>
4838 <ul>
4839 <template repeat="{{ target in app.targets.history }}">
4840 <template if="{{ target.standalone }}">
4841 <li><vm-connect-target target="{{ target }}"></vm-connect-target ></li>
4842 </template>
4843 </template>
4844 </ul>
4845 <hr>
4846 <form autocomplete="on">
4847 <input class="textbox" placeholder="localhost:8181" type="text" valu e="{{ standaloneVmAddress }}">
4848 <input class="button" type="submit" value="Connect" on-click="{{ con nectStandalone }}">
4849 </form>
4850 <br>
4851 <pre class="well">Run Standalone with: '--observe'</pre>
4852 <hr>
4853 </div>
4854
4855 <div class="flex-item-20-percent"></div>
4856 <div class="flex-item-40-percent">
4857 <h2><img style="height: 48px" src="packages/observatory/src/elements/i mg/chromium_icon.png">Chromium</h2>
4858 <br>
4859 <ul>
4860 <template repeat="{{ target in chromeTargets }}">
4861 <li><vm-connect-target target="{{ target }}"></vm-connect-target>< /li>
4862 </template>
4863 </ul>
4864 <hr>
4865 <form autocomplete="on">
4866 <input class="textbox" placeholder="localhost:9222" type="text" valu e="{{ chromiumAddress }}">
4867 <input class="button" type="submit" value="Get Tabs" on-click="{{ ge tTabs }}">
4868 </form>
4869 <br>
4870 <pre class="well">Run Chromium with:
4871 '--remote-debugging-port=9222'</pre>
4872 <hr>
4873 </div>
4874 </div>
4875 </div>
4876 </template>
4877 </polymer-element>
4878
4879
4880
4881
4882
4883
4884 <polymer-element name="vm-ref" extends="service-ref">
4885 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css">
4886 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
4887 </template>
4888 </polymer-element>
4889
4890
4891
4892
4893 </div>
4894 <observatory-application></observatory-application>
4895
4896
4897 <script src="index.html_bootstrap.dart.js" async=""></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698