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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 584293002: Begin implementing a debugger page in Observatory. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: gen js Created 6 years, 2 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
« no previous file with comments | « runtime/bin/vmservice/observatory/deployed/web/index.html_bootstrap.dart.js ('k') | runtime/bin/vmservice/observatory/deployed/web/index_devtools.html_bootstrap.dart.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html><html><head><script src="packages/web_components/dart_support.js" ></script> 1 <!DOCTYPE html><html style="height: 100%"><head><script src="packages/web_compon ents/dart_support.js"></script>
2 2
3 <title>Dart VM Observatory</title> 3 <title>Dart VM Observatory</title>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <script src="packages/web_components/platform.js"></script>
5 6
6 7
7 8
8
9 9
10 10
11 11
12 </head> 12 </head>
13 <body><script src="packages/web_components/platform.js"></script> 13 <body style="height:100%"><div hidden=""><style shim-shadowdom="">
14
15
16 <!-- unminified for debugging:
17 <link rel="import" href="src/js/polymer/layout.html">
18 <script src="src/js/polymer/polymer.concat.js"></script>
19 -->
20
21
22
23 <style shim-shadowdom="">
24 /******************************* 14 /*******************************
25 Flex Layout 15 Flex Layout
26 *******************************/ 16 *******************************/
27 17
28 html /deep/ [layout][horizontal], html /deep/ [layout][vertical] { 18 html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
29 display: -ms-flexbox; 19 display: -ms-flexbox;
30 display: -webkit-flex; 20 display: -webkit-flex;
31 display: flex; 21 display: flex;
32 } 22 }
33 23
(...skipping 256 matching lines...) Expand 10 before | Expand all | Expand 10 after
290 -ms-box-sizing: border-box; 280 -ms-box-sizing: border-box;
291 box-sizing: border-box; 281 box-sizing: border-box;
292 margin: 1em 0.5em; 282 margin: 1em 0.5em;
293 padding: 1em; 283 padding: 1em;
294 background-color: white; 284 background-color: white;
295 -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); 285 -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
296 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);
297 border-radius: 5px 5px 5px 5px; 287 border-radius: 5px 5px 5px 5px;
298 } 288 }
299 289
300 </style><script src="packages/polymer/src/js/polymer/polymer.js"></script><scrip t> 290 </style>
291
292 <script src="packages/polymer/src/js/polymer/polymer.js"></script>
293
294 <script>
301 // TODO(sigmund): remove this script tag (dartbug.com/19650). This empty 295 // TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
302 // script tag is necessary to work around a bug in Chrome 36. 296 // script tag is necessary to work around a bug in Chrome 36.
303 </script><script type="text/javascript" src="https://www.google.com/jsapi"></scr ipt><style> 297 </script>
304 /* Global styles */ 298
299 <!-- unminified for debugging:
300 <link rel="import" href="src/js/polymer/layout.html">
301 <script src="src/js/polymer/polymer.concat.js"></script>
302 -->
303 <script type="text/javascript" src="https://www.google.com/jsapi"></script><styl e>/* Global styles */
305 * { 304 * {
306 margin: 0; 305 margin: 0;
307 padding: 0; 306 padding: 0;
308 font: 400 14px 'Montserrat', sans-serif; 307 font: 400 14px 'Montserrat', sans-serif;
309 color: #333; 308 color: #333;
310 box-sizing: border-box; 309 box-sizing: border-box;
311 } 310 }
312 311
313 .content { 312 .content {
314 padding-left: 10%; 313 padding-left: 10%;
(...skipping 236 matching lines...) Expand 10 before | Expand all | Expand 10 after
551 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 550 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
552 } 551 }
553 552
554 .break-wrap { 553 .break-wrap {
555 word-wrap: break-word; 554 word-wrap: break-word;
556 } 555 }
557 </style> 556 </style>
558 557
559 558
560 559
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611 <polymer-element name="curly-block"> 560 <polymer-element name="curly-block">
612 <template> 561 <template>
613 <style> 562 <style>
614 .idle { 563 .idle {
615 display: inline-block; 564 display: inline-block;
616 color: #0489c3; 565 color: #0489c3;
617 cursor: pointer; 566 cursor: pointer;
618 } 567 }
619 .busy { 568 .busy {
620 display: inline-block; 569 display: inline-block;
(...skipping 23 matching lines...) Expand all
644 <template if="{{ !busy }}"> 593 <template if="{{ !busy }}">
645 {<a on-click="{{ toggleExpand }}"><div class="idle">&nbsp;&nbsp;⊞&nbsp;& nbsp;</div></a>} 594 {<a on-click="{{ toggleExpand }}"><div class="idle">&nbsp;&nbsp;⊞&nbsp;& nbsp;</div></a>}
646 </template> 595 </template>
647 </template> 596 </template>
648 </template> 597 </template>
649 </polymer-element> 598 </polymer-element>
650 599
651 600
652 601
653 602
603
654 <polymer-element name="observatory-element"> 604 <polymer-element name="observatory-element">
655 </polymer-element> 605 </polymer-element>
656 606
657 607
658 608
659 609
610
660 <polymer-element name="service-ref" extends="observatory-element"> 611 <polymer-element name="service-ref" extends="observatory-element">
661 </polymer-element> 612 </polymer-element>
662 613
663 <polymer-element name="any-service-ref" extends="observatory-element"> 614 <polymer-element name="any-service-ref" extends="observatory-element">
664 </polymer-element> 615 </polymer-element>
665 616
666 <polymer-element name="object-ref" extends="service-ref"> 617 <polymer-element name="object-ref" extends="service-ref">
667 <template><style> 618 <template><style>/* Global styles */
668 /* Global styles */
669 * { 619 * {
670 margin: 0; 620 margin: 0;
671 padding: 0; 621 padding: 0;
672 font: 400 14px 'Montserrat', sans-serif; 622 font: 400 14px 'Montserrat', sans-serif;
673 color: #333; 623 color: #333;
674 box-sizing: border-box; 624 box-sizing: border-box;
675 } 625 }
676 626
677 .content { 627 .content {
678 padding-left: 10%; 628 padding-left: 10%;
(...skipping 242 matching lines...) Expand 10 before | Expand all | Expand 10 after
921 </style> 871 </style>
922 <template if="{{ nameIsEmpty }}"> 872 <template if="{{ nameIsEmpty }}">
923 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.vmType }}</em></a> 873 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.vmType }}</em></a>
924 </template> 874 </template>
925 <template if="{{ !nameIsEmpty }}"> 875 <template if="{{ !nameIsEmpty }}">
926 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ name }}</em></a> 876 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ name }}</em></a>
927 </template> 877 </template>
928 </template> 878 </template>
929 </polymer-element> 879 </polymer-element>
930 880
881
882
931 <polymer-element name="instance-ref" extends="service-ref"> 883 <polymer-element name="instance-ref" extends="service-ref">
932 <template> 884 <template>
933 <style> 885 <style>/* Global styles */
934 /* Global styles */
935 * { 886 * {
936 margin: 0; 887 margin: 0;
937 padding: 0; 888 padding: 0;
938 font: 400 14px 'Montserrat', sans-serif; 889 font: 400 14px 'Montserrat', sans-serif;
939 color: #333; 890 color: #333;
940 box-sizing: border-box; 891 box-sizing: border-box;
941 } 892 }
942 893
943 .content { 894 .content {
944 padding-left: 10%; 895 padding-left: 10%;
(...skipping 342 matching lines...) Expand 10 before | Expand all | Expand 10 after
1287 </div> 1238 </div>
1288 </div> 1239 </div>
1289 </div> 1240 </div>
1290 </curly-block> 1241 </curly-block>
1291 </template> 1242 </template>
1292 </span> 1243 </span>
1293 </template> 1244 </template>
1294 </polymer-element> 1245 </polymer-element>
1295 1246
1296 1247
1248
1249
1297 <polymer-element name="action-link"> 1250 <polymer-element name="action-link">
1298 <template> 1251 <template>
1299 <style> 1252 <style>
1300 .idle { 1253 .idle {
1301 color: #0489c3; 1254 color: #0489c3;
1302 cursor: pointer; 1255 cursor: pointer;
1303 text-decoration: none; 1256 text-decoration: none;
1304 } 1257 }
1305 .idle:hover { 1258 .idle:hover {
1306 text-decoration: underline; 1259 text-decoration: underline;
(...skipping 19 matching lines...) Expand all
1326 </template> 1279 </template>
1327 </polymer-element> 1280 </polymer-element>
1328 1281
1329 1282
1330 1283
1331 1284
1332 1285
1333 1286
1334 1287
1335 1288
1336
1337
1338 <polymer-element name="nav-bar" extends="observatory-element"> 1289 <polymer-element name="nav-bar" extends="observatory-element">
1339 <template> 1290 <template>
1340 <style> 1291 <style>/* Global styles */
1341 /* Global styles */
1342 * { 1292 * {
1343 margin: 0; 1293 margin: 0;
1344 padding: 0; 1294 padding: 0;
1345 font: 400 14px 'Montserrat', sans-serif; 1295 font: 400 14px 'Montserrat', sans-serif;
1346 color: #333; 1296 color: #333;
1347 box-sizing: border-box; 1297 box-sizing: border-box;
1348 } 1298 }
1349 1299
1350 .content { 1300 .content {
1351 padding-left: 10%; 1301 padding-left: 10%;
(...skipping 430 matching lines...) Expand 10 before | Expand all | Expand 10 after
1782 <nav-menu link="/vm" anchor="Observatory" last="{{ last }}"> 1732 <nav-menu link="/vm" anchor="Observatory" last="{{ last }}">
1783 <nav-menu-item link="/vm-connect/" anchor="Connect to a different VM"></na v-menu-item> 1733 <nav-menu-item link="/vm-connect/" anchor="Connect to a different VM"></na v-menu-item>
1784 <content></content> 1734 <content></content>
1785 </nav-menu> 1735 </nav-menu>
1786 </template> 1736 </template>
1787 </polymer-element> 1737 </polymer-element>
1788 1738
1789 <polymer-element name="isolate-nav-menu" extends="observatory-element"> 1739 <polymer-element name="isolate-nav-menu" extends="observatory-element">
1790 <template> 1740 <template>
1791 <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last=" {{ last }}"> 1741 <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last=" {{ last }}">
1792 <nav-menu-item link="{{ isolate.relativeLink('stacktrace') }}" anchor="sta ck trace"></nav-menu-item> 1742 <nav-menu-item link="{{ '/debugger' + isolate.link }}" anchor="debugger">< /nav-menu-item>
1793 <nav-menu-item link="{{ isolate.relativeLink('profile') }}" anchor="cpu pr ofile"></nav-menu-item> 1743 <nav-menu-item link="{{ isolate.relativeLink('profile') }}" anchor="cpu pr ofile"></nav-menu-item>
1794 <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}" anch or="allocation profile"></nav-menu-item> 1744 <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}" anch or="allocation profile"></nav-menu-item>
1795 <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}" anchor="heap m ap"></nav-menu-item> 1745 <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}" anchor="heap m ap"></nav-menu-item>
1796 <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}" anch or="breakpoints"></nav-menu-item> 1746 <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}" anch or="breakpoints"></nav-menu-item>
1797 <content></content> 1747 <content></content>
1798 </nav-menu> 1748 </nav-menu>
1799 </template> 1749 </template>
1800 </polymer-element> 1750 </polymer-element>
1801 1751
1802 <polymer-element name="library-nav-menu" extends="observatory-element"> 1752 <polymer-element name="library-nav-menu" extends="observatory-element">
(...skipping 122 matching lines...) Expand 10 before | Expand all | Expand 10 after
1925 Disconnected from VM 1875 Disconnected from VM
1926 <br><br> 1876 <br><br>
1927 <a class="boxclose" on-click="{{ closeItem }}">×</a> 1877 <a class="boxclose" on-click="{{ closeItem }}">×</a>
1928 </div> 1878 </div>
1929 </template> 1879 </template>
1930 </template> 1880 </template>
1931 </polymer-element> 1881 </polymer-element>
1932 1882
1933 1883
1934 1884
1885
1886
1887
1935 <polymer-element name="breakpoint-list" extends="observatory-element"> 1888 <polymer-element name="breakpoint-list" extends="observatory-element">
1936 <template> 1889 <template>
1937 <style> 1890 <style>/* Global styles */
1938 /* Global styles */
1939 * { 1891 * {
1940 margin: 0; 1892 margin: 0;
1941 padding: 0; 1893 padding: 0;
1942 font: 400 14px 'Montserrat', sans-serif; 1894 font: 400 14px 'Montserrat', sans-serif;
1943 color: #333; 1895 color: #333;
1944 box-sizing: border-box; 1896 box-sizing: border-box;
1945 } 1897 }
1946 1898
1947 .content { 1899 .content {
1948 padding-left: 10%; 1900 padding-left: 10%;
(...skipping 261 matching lines...) Expand 10 before | Expand all | Expand 10 after
2210 </template> 2162 </template>
2211 </ul> 2163 </ul>
2212 </template> 2164 </template>
2213 </template> 2165 </template>
2214 </polymer-element> 2166 </polymer-element>
2215 2167
2216 2168
2217 2169
2218 2170
2219 2171
2172
2220 <polymer-element name="class-ref" extends="service-ref"> 2173 <polymer-element name="class-ref" extends="service-ref">
2221 <template><style> 2174 <template><style>/* Global styles */
2222 /* Global styles */
2223 * { 2175 * {
2224 margin: 0; 2176 margin: 0;
2225 padding: 0; 2177 padding: 0;
2226 font: 400 14px 'Montserrat', sans-serif; 2178 font: 400 14px 'Montserrat', sans-serif;
2227 color: #333; 2179 color: #333;
2228 box-sizing: border-box; 2180 box-sizing: border-box;
2229 } 2181 }
2230 2182
2231 .content { 2183 .content {
2232 padding-left: 10%; 2184 padding-left: 10%;
(...skipping 241 matching lines...) Expand 10 before | Expand all | Expand 10 after
2474 } 2426 }
2475 </style><span><a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}" >{{ name }}</a></span></template> 2427 </style><span><a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}" >{{ name }}</a></span></template>
2476 </polymer-element> 2428 </polymer-element>
2477 2429
2478 2430
2479 2431
2480 2432
2481 2433
2482 2434
2483 2435
2436
2484 <polymer-element name="class-tree" extends="observatory-element"> 2437 <polymer-element name="class-tree" extends="observatory-element">
2485 <template> 2438 <template>
2486 <style> 2439 <style>/* Global styles */
2487 /* Global styles */
2488 * { 2440 * {
2489 margin: 0; 2441 margin: 0;
2490 padding: 0; 2442 padding: 0;
2491 font: 400 14px 'Montserrat', sans-serif; 2443 font: 400 14px 'Montserrat', sans-serif;
2492 color: #333; 2444 color: #333;
2493 box-sizing: border-box; 2445 box-sizing: border-box;
2494 } 2446 }
2495 2447
2496 .content { 2448 .content {
2497 padding-left: 10%; 2449 padding-left: 10%;
(...skipping 353 matching lines...) Expand 10 before | Expand all | Expand 10 after
2851 2803
2852 2804
2853 2805
2854 2806
2855 2807
2856 2808
2857 2809
2858 2810
2859 2811
2860 2812
2861
2862
2863
2864
2865
2866
2867
2868
2869
2870
2871
2872
2873
2874 <polymer-element name="error-ref" extends="service-ref"> 2813 <polymer-element name="error-ref" extends="service-ref">
2875 <template> 2814 <template>
2876 <style> 2815 <style>/* Global styles */
2877 /* Global styles */
2878 * { 2816 * {
2879 margin: 0; 2817 margin: 0;
2880 padding: 0; 2818 padding: 0;
2881 font: 400 14px 'Montserrat', sans-serif; 2819 font: 400 14px 'Montserrat', sans-serif;
2882 color: #333; 2820 color: #333;
2883 box-sizing: border-box; 2821 box-sizing: border-box;
2884 } 2822 }
2885 2823
2886 .content { 2824 .content {
2887 padding-left: 10%; 2825 padding-left: 10%;
(...skipping 250 matching lines...) Expand 10 before | Expand all | Expand 10 after
3138 line-height: 1.2em; 3076 line-height: 1.2em;
3139 white-space: pre; 3077 white-space: pre;
3140 } 3078 }
3141 </style> 3079 </style>
3142 <span> 3080 <span>
3143 <pre class="errorBox">{{ ref.kind }}: {{ ref.message }}</pre> 3081 <pre class="errorBox">{{ ref.kind }}: {{ ref.message }}</pre>
3144 </span> 3082 </span>
3145 </template> 3083 </template>
3146 </polymer-element> 3084 </polymer-element>
3147 3085
3086
3087
3088
3148 <polymer-element name="eval-box" extends="observatory-element"> 3089 <polymer-element name="eval-box" extends="observatory-element">
3149 <template> 3090 <template>
3150 <style> 3091 <style>
3151 .textbox { 3092 .textbox {
3152 flex-grow: 1; 3093 flex-grow: 1;
3153 font: 400 16px 'Montserrat', sans-serif; 3094 font: 400 16px 'Montserrat', sans-serif;
3154 } 3095 }
3155 .bigtextbox { 3096 .bigtextbox {
3156 font: 400 16px 'Montserrat', sans-serif; 3097 font: 400 16px 'Montserrat', sans-serif;
3157 } 3098 }
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
3225 </tbody></table> 3166 </tbody></table>
3226 </template> 3167 </template>
3227 </template> 3168 </template>
3228 </polymer-element> 3169 </polymer-element>
3229 3170
3230 3171
3231 3172
3232 3173
3233 3174
3234 3175
3176
3235 <polymer-element name="eval-link"> 3177 <polymer-element name="eval-link">
3236 <template> 3178 <template>
3237 <style> 3179 <style>
3238 .idle { 3180 .idle {
3239 color: #0489c3; 3181 color: #0489c3;
3240 cursor: pointer; 3182 cursor: pointer;
3241 } 3183 }
3242 .busy { 3184 .busy {
3243 color: #aaa; 3185 color: #aaa;
3244 cursor: wait; 3186 cursor: wait;
(...skipping 11 matching lines...) Expand all
3256 </template> 3198 </template>
3257 </template> 3199 </template>
3258 </polymer-element> 3200 </polymer-element>
3259 3201
3260 3202
3261 3203
3262 3204
3263 3205
3264 3206
3265 3207
3208
3266 <polymer-element name="field-ref" extends="service-ref"> 3209 <polymer-element name="field-ref" extends="service-ref">
3267 <template> 3210 <template>
3268 <style> 3211 <style>/* Global styles */
3269 /* Global styles */
3270 * { 3212 * {
3271 margin: 0; 3213 margin: 0;
3272 padding: 0; 3214 padding: 0;
3273 font: 400 14px 'Montserrat', sans-serif; 3215 font: 400 14px 'Montserrat', sans-serif;
3274 color: #333; 3216 color: #333;
3275 box-sizing: border-box; 3217 box-sizing: border-box;
3276 } 3218 }
3277 3219
3278 .content { 3220 .content {
3279 padding-left: 10%; 3221 padding-left: 10%;
(...skipping 254 matching lines...) Expand 10 before | Expand all | Expand 10 after
3534 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}</a> 3476 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}</a>
3535 </span> 3477 </span>
3536 </template> 3478 </template>
3537 </polymer-element> 3479 </polymer-element>
3538 3480
3539 3481
3540 3482
3541 3483
3542 3484
3543 3485
3486
3544 <polymer-element name="function-ref" extends="service-ref"> 3487 <polymer-element name="function-ref" extends="service-ref">
3545 <template><style> 3488 <template><style>/* Global styles */
3546 /* Global styles */
3547 * { 3489 * {
3548 margin: 0; 3490 margin: 0;
3549 padding: 0; 3491 padding: 0;
3550 font: 400 14px 'Montserrat', sans-serif; 3492 font: 400 14px 'Montserrat', sans-serif;
3551 color: #333; 3493 color: #333;
3552 box-sizing: border-box; 3494 box-sizing: border-box;
3553 } 3495 }
3554 3496
3555 .content { 3497 .content {
3556 padding-left: 10%; 3498 padding-left: 10%;
(...skipping 246 matching lines...) Expand 10 before | Expand all | Expand 10 after
3803 --><template if="{{ qualified &amp;&amp; ref.parent != null }}"><!-- 3745 --><template if="{{ qualified &amp;&amp; ref.parent != null }}"><!--
3804 --><function-ref ref="{{ ref.parent }}" qualified="{{ true }}"> 3746 --><function-ref ref="{{ ref.parent }}" qualified="{{ true }}">
3805 </function-ref>.<!-- 3747 </function-ref>.<!--
3806 --></template><a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a><!-- 3748 --></template><a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a><!--
3807 --></template><template if="{{ !ref.isDart }}"><span> {{ name }}</span></templ ate></template> 3749 --></template><template if="{{ !ref.isDart }}"><span> {{ name }}</span></templ ate></template>
3808 </polymer-element> 3750 </polymer-element>
3809 3751
3810 3752
3811 3753
3812 3754
3755
3756
3813 <polymer-element name="library-ref" extends="service-ref"> 3757 <polymer-element name="library-ref" extends="service-ref">
3814 <template><style> 3758 <template><style>/* Global styles */
3815 /* Global styles */
3816 * { 3759 * {
3817 margin: 0; 3760 margin: 0;
3818 padding: 0; 3761 padding: 0;
3819 font: 400 14px 'Montserrat', sans-serif; 3762 font: 400 14px 'Montserrat', sans-serif;
3820 color: #333; 3763 color: #333;
3821 box-sizing: border-box; 3764 box-sizing: border-box;
3822 } 3765 }
3823 3766
3824 .content { 3767 .content {
3825 padding-left: 10%; 3768 padding-left: 10%;
(...skipping 245 matching lines...) Expand 10 before | Expand all | Expand 10 after
4071 </template> 4014 </template>
4072 <template if="{{ !nameIsEmpty }}"> 4015 <template if="{{ !nameIsEmpty }}">
4073 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a> 4016 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
4074 </template> 4017 </template>
4075 </template> 4018 </template>
4076 </polymer-element> 4019 </polymer-element>
4077 4020
4078 4021
4079 4022
4080 4023
4024
4025
4026
4081 <polymer-element name="script-inset" extends="observatory-element"> 4027 <polymer-element name="script-inset" extends="observatory-element">
4082 <template> 4028 <template>
4083 <style> 4029 <style>
4084 .sourceInset { 4030 .sourceInset {
4085 padding-left: 15%;
4086 padding-right: 15%;
4087 } 4031 }
4088 .sourceBox { 4032 .sourceBox {
4089 width: 100%;
4090 background-color: #f5f5f5; 4033 background-color: #f5f5f5;
4091 border: 1px solid #ccc; 4034 border: 1px solid #ccc;
4092 padding: 10px; 4035 padding: 10px;
4093 overflow-y: auto; 4036 overflow-y: auto;
4094 } 4037 }
4095 .sourceTable { 4038 .sourceTable {
4096 display: table; 4039 display: table;
4097 } 4040 }
4098 .sourceRow { 4041 .sourceRow {
4099 display: table-row; 4042 display: table-row;
(...skipping 14 matching lines...) Expand all
4114 } 4057 }
4115 .hitsNotExecuted { 4058 .hitsNotExecuted {
4116 background-color: #e66; 4059 background-color: #e66;
4117 } 4060 }
4118 .hitsExecuted { 4061 .hitsExecuted {
4119 background-color: #6d6; 4062 background-color: #6d6;
4120 } 4063 }
4121 </style> 4064 </style>
4122 <div class="sourceInset"> 4065 <div class="sourceInset">
4123 <content></content> 4066 <content></content>
4124 <div class="sourceBox" style="height:{{height}}"> 4067 <div class="sourceBox" style="max-height:{{height}}">
4125 <div class="sourceTable"> 4068 <div class="sourceTable">
4126 <template if="{{ linesReady }}"> 4069 <template if="{{ linesReady }}">
4127 <template repeat="{{ line in lines }}"> 4070 <template repeat="{{ line in lines }}">
4128 <div class="sourceRow" id="{{ makeLineId(line.line) }}"> 4071 <div class="sourceRow" id="{{ makeLineId(line.line) }}">
4129 <breakpoint-toggle line="{{ line }}"></breakpoint-toggle> 4072 <breakpoint-toggle line="{{ line }}"></breakpoint-toggle>
4130 4073
4131 <div class="sourceItem">&nbsp;</div> 4074 <div class="sourceItem">&nbsp;</div>
4132 4075
4133 <template if="{{ line.hits == null || 4076 <template if="{{ line.hits == null ||
4134 line.hits < 0 }}"> 4077 line.hits < 0 }}">
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after
4224 </template> 4167 </template>
4225 4168
4226 </template> 4169 </template>
4227 </polymer-element> 4170 </polymer-element>
4228 4171
4229 4172
4230 4173
4231 4174
4232 4175
4233 4176
4177
4234 <polymer-element name="script-ref" extends="service-ref"> 4178 <polymer-element name="script-ref" extends="service-ref">
4235 <template> 4179 <template>
4236 <style> 4180 <style>/* Global styles */
4237 /* Global styles */
4238 * { 4181 * {
4239 margin: 0; 4182 margin: 0;
4240 padding: 0; 4183 padding: 0;
4241 font: 400 14px 'Montserrat', sans-serif; 4184 font: 400 14px 'Montserrat', sans-serif;
4242 color: #333; 4185 color: #333;
4243 box-sizing: border-box; 4186 box-sizing: border-box;
4244 } 4187 }
4245 4188
4246 .content { 4189 .content {
4247 padding-left: 10%; 4190 padding-left: 10%;
(...skipping 238 matching lines...) Expand 10 before | Expand all | Expand 10 after
4486 4429
4487 .break-wrap { 4430 .break-wrap {
4488 word-wrap: break-word; 4431 word-wrap: break-word;
4489 } 4432 }
4490 </style> 4433 </style>
4491 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}< /a> 4434 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}< /a>
4492 </template> 4435 </template>
4493 </polymer-element> 4436 </polymer-element>
4494 4437
4495 4438
4439
4440
4496 <polymer-element name="class-view" extends="observatory-element"> 4441 <polymer-element name="class-view" extends="observatory-element">
4497 <template> 4442 <template>
4498 <style> 4443 <style>/* Global styles */
4499 /* Global styles */
4500 * { 4444 * {
4501 margin: 0; 4445 margin: 0;
4502 padding: 0; 4446 padding: 0;
4503 font: 400 14px 'Montserrat', sans-serif; 4447 font: 400 14px 'Montserrat', sans-serif;
4504 color: #333; 4448 color: #333;
4505 box-sizing: border-box; 4449 box-sizing: border-box;
4506 } 4450 }
4507 4451
4508 .content { 4452 .content {
4509 padding-left: 10%; 4453 padding-left: 10%;
(...skipping 414 matching lines...) Expand 10 before | Expand all | Expand 10 after
4924 4868
4925 <br><br><br><br> 4869 <br><br><br><br>
4926 <br><br><br><br> 4870 <br><br><br><br>
4927 </template> 4871 </template>
4928 </polymer-element> 4872 </polymer-element>
4929 4873
4930 4874
4931 4875
4932 4876
4933 4877
4878
4934 <polymer-element name="code-ref" extends="service-ref"> 4879 <polymer-element name="code-ref" extends="service-ref">
4935 <template> 4880 <template>
4936 <style> 4881 <style>/* Global styles */
4937 /* Global styles */
4938 * { 4882 * {
4939 margin: 0; 4883 margin: 0;
4940 padding: 0; 4884 padding: 0;
4941 font: 400 14px 'Montserrat', sans-serif; 4885 font: 400 14px 'Montserrat', sans-serif;
4942 color: #333; 4886 color: #333;
4943 box-sizing: border-box; 4887 box-sizing: border-box;
4944 } 4888 }
4945 4889
4946 .content { 4890 .content {
4947 padding-left: 10%; 4891 padding-left: 10%;
(...skipping 254 matching lines...) Expand 10 before | Expand all | Expand 10 after
5202 </template> 5146 </template>
5203 </polymer-element> 5147 </polymer-element>
5204 5148
5205 5149
5206 5150
5207 5151
5208 5152
5209 5153
5210 5154
5211 5155
5156
5212 <polymer-element name="code-view" extends="observatory-element"> 5157 <polymer-element name="code-view" extends="observatory-element">
5213 <template> 5158 <template>
5214 <style> 5159 <style>/* Global styles */
5215 /* Global styles */
5216 * { 5160 * {
5217 margin: 0; 5161 margin: 0;
5218 padding: 0; 5162 padding: 0;
5219 font: 400 14px 'Montserrat', sans-serif; 5163 font: 400 14px 'Montserrat', sans-serif;
5220 color: #333; 5164 color: #333;
5221 box-sizing: border-box; 5165 box-sizing: border-box;
5222 } 5166 }
5223 5167
5224 .content { 5168 .content {
5225 padding-left: 10%; 5169 padding-left: 10%;
(...skipping 397 matching lines...) Expand 10 before | Expand all | Expand 10 after
5623 </template> 5567 </template>
5624 </div> 5568 </div>
5625 </template> 5569 </template>
5626 </polymer-element> 5570 </polymer-element>
5627 5571
5628 5572
5629 5573
5630 5574
5631 5575
5632 5576
5633 <polymer-element name="error-view" extends="observatory-element"> 5577
5578
5579
5580
5581
5582 <!-- TODO(turnidge): Use core-icon once core_elements work properly in
5583 devtools -->
5584 <polymer-element name="icon-expand-less" noscript="">
5634 <template> 5585 <template>
5635 <style> 5586 <svg width="24" height="24">
5636 /* Global styles */ 5587 <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "></polygon>
5588 </svg>
5589 </template>
5590 </polymer-element>
5591
5592 <polymer-element name="icon-expand-more" noscript="">
5593 <template>
5594 <svg width="24" height="24">
5595 <polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "></polygon>
5596 </svg>
5597 </template>
5598 </polymer-element>
5599
5600 <polymer-element name="debugger-page" extends="observatory-element">
5601 <template>
5602 <style>/* Global styles */
5637 * { 5603 * {
5638 margin: 0; 5604 margin: 0;
5639 padding: 0; 5605 padding: 0;
5640 font: 400 14px 'Montserrat', sans-serif; 5606 font: 400 14px 'Montserrat', sans-serif;
5641 color: #333; 5607 color: #333;
5642 box-sizing: border-box; 5608 box-sizing: border-box;
5643 } 5609 }
5644 5610
5645 .content { 5611 .content {
5646 padding-left: 10%; 5612 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
5880 background-color: #f5f5f5; 5846 background-color: #f5f5f5;
5881 border: 1px solid #e3e3e3; 5847 border: 1px solid #e3e3e3;
5882 border-radius: 4px; 5848 border-radius: 4px;
5883 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 5849 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
5884 } 5850 }
5885 5851
5886 .break-wrap { 5852 .break-wrap {
5887 word-wrap: break-word; 5853 word-wrap: break-word;
5888 } 5854 }
5889 </style> 5855 </style>
5890 <nav-bar> 5856 <style>
5891 <top-nav-menu last="{{ true }}"></top-nav-menu> 5857 .container {
5892 <nav-control></nav-control> 5858 height: 100%;
5893 </nav-bar> 5859 display: flex;
5894 <div class="content-centered"> 5860 flex-direction: column;
5895 <h1>{{ error.kind }}</h1> 5861 justify-content: space-between;
5896 <br> 5862 }
5897 <div class="well">{{ error.message }}</div> 5863 nav-bar {
5864 flex: 0 0 auto;
5865 }
5866 .stack {
5867 flex: 0 0 auto;
5868 overflow-y: auto;
5869 }
5870 core-splitter {
5871 flex: 0 0 auto;
5872 }
5873 .console {
5874 flex: 1 1 auto;
5875 overflow-y: auto;
5876 }
5877 .commandline {
5878 flex: 0 0 auto;
5879 }
5880 </style>
5881
5882 <div class="container">
5883 <nav-bar>
5884 » <top-nav-menu last="{{ true }}"></top-nav-menu>
5885 » <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
5886 » </isolate-nav-menu>
5887 » <nav-control></nav-control>
5888 </nav-bar>
5889
5890 <div id="stack" class="stack">
5891 » <debugger-stack isolate="{{ isolate }}"></debugger-stack>
5892 </div>
5893 <!--
5894 <core-splitter direction="up" allowOverflow=true></core-splitter>
5895 <div class="console">
5896 » <debugger-console isolate="{{ isolate }}"></debugger-console>
5897 </div>
5898 <div class="commandline">
5899 » <debugger-input isolate="{{ isolate }}"></debugger-input>
5900 </div>
5901 -->
5898 </div> 5902 </div>
5899 </template> 5903 </template>
5900 </polymer-element> 5904 </polymer-element>
5901 5905
5902 5906 <polymer-element name="debugger-stack" extends="observatory-element">
5903
5904
5905
5906
5907
5908
5909
5910
5911 <polymer-element name="field-view" extends="observatory-element">
5912 <template> 5907 <template>
5913 <style> 5908 <style>/* Global styles */
5914 /* Global styles */
5915 * { 5909 * {
5916 margin: 0; 5910 margin: 0;
5917 padding: 0; 5911 padding: 0;
5918 font: 400 14px 'Montserrat', sans-serif; 5912 font: 400 14px 'Montserrat', sans-serif;
5919 color: #333; 5913 color: #333;
5920 box-sizing: border-box; 5914 box-sizing: border-box;
5921 } 5915 }
5922 5916
5923 .content { 5917 .content {
5924 padding-left: 10%; 5918 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
6158 background-color: #f5f5f5; 6152 background-color: #f5f5f5;
6159 border: 1px solid #e3e3e3; 6153 border: 1px solid #e3e3e3;
6160 border-radius: 4px; 6154 border-radius: 4px;
6161 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 6155 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6162 } 6156 }
6163 6157
6164 .break-wrap { 6158 .break-wrap {
6165 word-wrap: break-word; 6159 word-wrap: break-word;
6166 } 6160 }
6167 </style> 6161 </style>
6168 <nav-bar> 6162 <template if="{{ stack == null }}">
6169 <top-nav-menu></top-nav-menu> 6163 Loading stack frames
6170 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu> 6164 </template>
6171 <template if="{{ field.owner.type == 'Class' }}"> 6165 <template if="{{ stack != null }}">
6172 <!-- TODO(turnidge): Add library nav menu here. --> 6166 <ul class="list-group">
6173 <class-nav-menu cls="{{ field.owner }}"></class-nav-menu> 6167 <template repeat="{{ frame in stack['members'] }}">
6174 </template> 6168 <li class="list-group-item">
6175 <template if="{{ field.owner.type == 'Library' }}"> 6169 <debugger-frame frame="{{ frame }}" expand="{{ frame['depth'] == act iveFrame }}">
6176 <library-nav-menu library="{{ field.owner }}"></library-nav-menu> 6170 </debugger-frame>
6177 </template> 6171 </li>
6178 <nav-menu link="{{ field.link }}" anchor="{{ field.name }}" last="{{ true }}"></nav-menu>
6179 <nav-refresh callback="{{ refresh }}"></nav-refresh>
6180 <nav-control></nav-control>
6181 </nav-bar>
6182
6183 <div class="content">
6184 <h1>
6185 <template if="{{ field.isStatic }}">static</template>
6186 <template if="{{ field.isFinal }}">final</template>
6187 <template if="{{ field.isConst }}">const</template>
6188 <template if="{{ (field.declaredType.name == 'dynamic' &amp;&amp;
6189 !field.isFinal &amp;&amp; !field.isConst) }}">
6190 var
6191 </template> 6172 </template>
6192 <template if="{{ (field.declaredType.name != 'dynamic') }}"> 6173 </ul>
6193 {{ field.declaredType.name }} 6174 </template>
6194 </template>
6195 {{ field.name }}
6196 </h1>
6197 <div class="memberList">
6198 <div class="memberItem">
6199 <div class="memberName">owner</div>
6200 <div class="memberValue">
6201 <template if="{{ field.owner.type == 'Class' }}">
6202 <class-ref ref="{{ field.owner }}"></class-ref>
6203 </template>
6204 <template if="{{ field.owner.type != 'Class' }}">
6205 <library-ref ref="{{ field.owner }}"></library-ref>
6206 </template>
6207 </div>
6208 </div>
6209 <div class="memberItem">
6210 <div class="memberName">script</div>
6211 <div class="memberValue">
6212 <script-ref ref="{{ field.script }}"></script-ref>
6213 </div>
6214 </div>
6215 <template if="{{ !field.isStatic }}">
6216 <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.">
6217 <div class="memberName">observed types</div>
6218 <div class="memberValue">
6219 <template if="{{ field.guardClass == 'dynamic' }}">
6220 various
6221 </template>
6222 <template if="{{ field.guardClass == 'unknown' }}">
6223 none
6224 </template>
6225 <template if="{{ field.guardClass != 'unknown' &amp;&amp;
6226 field.guardClass != 'dynamic' }}">
6227 <class-ref ref="{{ field.guardClass }}"></class-ref>
6228 <template if="{{ field.guardNullable }}">
6229 — null observed
6230 </template>
6231 <template if="{{ !field.guardNullable }}">
6232 — null not observed
6233 </template>
6234 </template>
6235 </div>
6236 </div>
6237 </template>
6238 <template if="{{ field.value != null }}">
6239 <div class="memberItem">
6240 <div class="memberName">static value</div>
6241 <div class="memberValue">
6242 <any-service-ref ref="{{ field.value }}"></any-service-ref>
6243 </div>
6244 </div>
6245 </template>
6246 </div>
6247 </div>
6248 </template> 6175 </template>
6249 </polymer-element> 6176 </polymer-element>
6250 6177
6251 6178
6252 6179 <polymer-element name="debugger-frame" extends="observatory-element">
6253
6254
6255
6256
6257
6258
6259
6260
6261
6262
6263
6264 <polymer-element name="stack-frame" extends="observatory-element">
6265 <template> 6180 <template>
6266 <style> 6181 <style>/* Global styles */
6267 /* Global styles */
6268 * { 6182 * {
6269 margin: 0; 6183 margin: 0;
6270 padding: 0; 6184 padding: 0;
6271 font: 400 14px 'Montserrat', sans-serif; 6185 font: 400 14px 'Montserrat', sans-serif;
6272 color: #333; 6186 color: #333;
6273 box-sizing: border-box; 6187 box-sizing: border-box;
6274 } 6188 }
6275 6189
6276 .content { 6190 .content {
6277 padding-left: 10%; 6191 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
6511 background-color: #f5f5f5; 6425 background-color: #f5f5f5;
6512 border: 1px solid #e3e3e3; 6426 border: 1px solid #e3e3e3;
6513 border-radius: 4px; 6427 border-radius: 4px;
6514 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 6428 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6515 } 6429 }
6516 6430
6517 .break-wrap { 6431 .break-wrap {
6518 word-wrap: break-word; 6432 word-wrap: break-word;
6519 } 6433 }
6520 </style> 6434 </style>
6521 <div class="flex-row"> 6435 <style>
6522 <div class="flex-item-fixed-1-12"> 6436 .frameOuter {
6523 </div> 6437 position: relative;
6524 <div class="flex-item-fixed-1-12"> 6438 padding: 5px;
6525 #{{ frame['depth'] }} 6439 border: 1px solid white;
6526 </div> 6440 }
6527 <div class="flex-item-fixed-9-12"> 6441 .frameOuter:hover {
6528 <function-ref ref="{{ frame['function'] }}"></function-ref> 6442 border: 1px solid #e0e0e0;
6529 ( <script-ref ref="{{ frame['script'] }}" pos="{{ frame['tokenPos'] }} "> 6443 }
6530 </script-ref> ) 6444 .shadow {
6445 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
6446 0 2px 5px 0 rgba(0, 0, 0, 0.26);
6447 }
6448 .frameSummaryText {
6449 display: inline-block;
6450 padding: 5px;
6451 }
6452 .frameId {
6453 display: inline-block;
6454 width: 60px;
6455 }
6456 .frameOuter .frameExpander {
6457 position: absolute;
6458 right: 5px;
6459 top: 5px;
6460 display: none;
6461 }
6462 .frameOuter:hover .frameExpander{
6463 display: inline-block;
6464 }
6465 .frameContractor {
6466 position: absolute;
6467 right: 5px;
6468 bottom: 5px;
6469 display: inline-block;
6470 }
6471 </style>
6472 <div id="frameOuter" class="frameOuter">
6473 <a on-click="{{ toggleExpand }}">
6474 <div class="frameSummary">
6475 <div class="frameSummaryText">
6476 <div class="frameId"><b>frame {{ frame['depth'] }}</b></div>
6477 <function-ref ref="{{ frame['function'] }}"></function-ref>
6478 ( <script-ref ref="{{ frame['script'] }}" pos="{{ frame['tokenPos'] }}">
6479 </script-ref> )
6480 </div>
6481 <template if="{{ !expanded }}">
6482 <div class="frameExpander">
6483 <icon-expand-more></icon-expand-more>
6484 </div>
6485 </template>
6486 </div>
6487 </a>
6531 6488
6532 <curly-block> 6489 <template if="{{expanded}}">
6533 <div class="memberList"> 6490 <div class="frameDetails">
6534 <template repeat="{{ v in frame['vars'] }}"> 6491 <div class="flex-row">
6535 <div class="memberItem"> 6492 <div class="flex-item-60-percent">
6536 <div class="memberName">{{ v['name']}}</div> 6493 <script-inset height="{{ scriptHeight }}" script="{{ frame['functi on'].script }}" startpos="{{ frame['function'].tokenPos }}" endpos="{{ frame['fu nction'].endTokenPos }}" currentpos="{{ frame['tokenPos'] }}">
6537 <div class="memberValue"> 6494 </script-inset>
6538 <any-service-ref ref="{{ v['value'] }}"></any-service-ref> 6495 </div>
6496 <div class="flex-item-40-percent">
6497 <div style="padding:10px;" class="memberList">
6498 <template repeat="{{ v in frame['vars'] }}">
6499 <div class="memberItem">
6500 <div class="memberName">{{ v['name']}}</div>
6501 <div class="memberValue">
6502 <any-service-ref ref="{{ v['value'] }}">
6503 </any-service-ref>
6504 </div>
6539 </div> 6505 </div>
6540 </div> 6506 </template>
6541 </template> 6507 </div>
6542 </div> 6508 </div>
6543 </curly-block> 6509 </div>
6544 </div> 6510 <!-- TODO(turnidge): Add eval box here? -->
6545 <div class="flex-item-fixed-1-12"> 6511 <div class="frameContractor">
6546 </div> 6512 <template if="{{expanded}}">
6513 <a on-click="{{ toggleExpand }}">
6514 <icon-expand-less></icon-expand-less>
6515 </a>
6516 </template>
6517 </div>
6518 </div>
6519 </template>
6547 </div> 6520 </div>
6548 </template> 6521 </template>
6549 </polymer-element> 6522 </polymer-element>
6550 6523
6551 <polymer-element name="flag-list" extends="observatory-element"> 6524 <polymer-element name="debugger-console" extends="observatory-element">
6552 <template> 6525 <template>
6553 <style> 6526 <style>/* Global styles */
6554 /* Global styles */
6555 * { 6527 * {
6556 margin: 0; 6528 margin: 0;
6557 padding: 0; 6529 padding: 0;
6558 font: 400 14px 'Montserrat', sans-serif; 6530 font: 400 14px 'Montserrat', sans-serif;
6559 color: #333; 6531 color: #333;
6560 box-sizing: border-box; 6532 box-sizing: border-box;
6561 } 6533 }
6562 6534
6563 .content { 6535 .content {
6564 padding-left: 10%; 6536 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
6798 background-color: #f5f5f5; 6770 background-color: #f5f5f5;
6799 border: 1px solid #e3e3e3; 6771 border: 1px solid #e3e3e3;
6800 border-radius: 4px; 6772 border-radius: 4px;
6801 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 6773 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6802 } 6774 }
6803 6775
6804 .break-wrap { 6776 .break-wrap {
6805 word-wrap: break-word; 6777 word-wrap: break-word;
6806 } 6778 }
6807 </style> 6779 </style>
6808 <nav-bar> 6780 <style>
6809 <top-nav-menu></top-nav-menu> 6781 .textBox {
6810 <nav-menu link="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" la st="{{ true }}"></nav-menu> 6782 position: absolute;
6811 <nav-refresh callback="{{ refresh }}"></nav-refresh> 6783 bottom: 0px;
6812 <nav-control></nav-control> 6784 width: 100%;
6813 </nav-bar> 6785 }
6814 6786 </style>
6815 <div class="content-centered"> 6787 <div>
6816 <template if="{{ flagList['modifiedFlags'].isNotEmpty }}"> 6788 Debugging console is not yet implemented.<br>
6817 <h1>Modified Flags</h1>
6818 <br>
6819 <template repeat="{{ flag in flagList['modifiedFlags'] }}">
6820 <flag-item flag="{{ flag }}"></flag-item>
6821 <br>
6822 </template>
6823 <hr>
6824 </template>
6825
6826 <h1>Unmodified Flags</h1>
6827 <br>
6828 <template if="{{ flagList['unmodifiedFlags'].isEmpty }}">
6829 <em>None</em>
6830 </template>
6831 <template if="{{ flagList['unmodifiedFlags'].isNotEmpty }}">
6832 <template repeat="{{ flag in flagList['unmodifiedFlags'] }}">
6833 <flag-item flag="{{ flag }}"></flag-item>
6834 <br>
6835 </template>
6836 </template>
6837 </div> 6789 </div>
6838
6839 </template> 6790 </template>
6840 </polymer-element> 6791 </polymer-element>
6841 6792
6842 <polymer-element name="flag-item" extends="observatory-element"> 6793 <polymer-element name="debugger-input" extends="observatory-element">
6843 <template> 6794 <template>
6844 <style> 6795 <style>/* Global styles */
6845 /* Global styles */
6846 * { 6796 * {
6847 margin: 0; 6797 margin: 0;
6848 padding: 0; 6798 padding: 0;
6849 font: 400 14px 'Montserrat', sans-serif; 6799 font: 400 14px 'Montserrat', sans-serif;
6850 color: #333; 6800 color: #333;
6851 box-sizing: border-box; 6801 box-sizing: border-box;
6852 } 6802 }
6853 6803
6854 .content { 6804 .content {
6855 padding-left: 10%; 6805 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
7089 background-color: #f5f5f5; 7039 background-color: #f5f5f5;
7090 border: 1px solid #e3e3e3; 7040 border: 1px solid #e3e3e3;
7091 border-radius: 4px; 7041 border-radius: 4px;
7092 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 7042 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
7093 } 7043 }
7094 7044
7095 .break-wrap { 7045 .break-wrap {
7096 word-wrap: break-word; 7046 word-wrap: break-word;
7097 } 7047 }
7098 </style> 7048 </style>
7099 <span style="color:#aaa">// {{ flag['comment'] }}</span> 7049 <style>
7100 <div style="padding: 3px 0"> 7050 .textBox {
7101 <b>{{ flag['name'] }}</b> 7051 font: 400 16px 'Montserrat', sans-serif;
7102 &nbsp;=&nbsp; 7052 width: 100%;
7103 {{ flag['valueAsString'] }} 7053 }
7104 </div> 7054 </style>
7055 <input id="textBox" class="textBox" type="text" value="{{ text }}">
7105 </template> 7056 </template>
7106 </polymer-element> 7057 </polymer-element>
7107 7058
7108 7059
7109 7060
7110 7061
7111 7062
7112 7063
7113 7064
7114 7065 <polymer-element name="error-view" extends="observatory-element">
7115
7116
7117
7118
7119 <polymer-element name="function-view" extends="observatory-element">
7120 <template> 7066 <template>
7121 <style> 7067 <style>/* Global styles */
7122 /* Global styles */
7123 * { 7068 * {
7124 margin: 0; 7069 margin: 0;
7125 padding: 0; 7070 padding: 0;
7126 font: 400 14px 'Montserrat', sans-serif; 7071 font: 400 14px 'Montserrat', sans-serif;
7127 color: #333; 7072 color: #333;
7128 box-sizing: border-box; 7073 box-sizing: border-box;
7129 } 7074 }
7130 7075
7131 .content { 7076 .content {
7132 padding-left: 10%; 7077 padding-left: 10%;
(...skipping 234 matching lines...) Expand 10 before | Expand all | Expand 10 after
7367 border: 1px solid #e3e3e3; 7312 border: 1px solid #e3e3e3;
7368 border-radius: 4px; 7313 border-radius: 4px;
7369 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 7314 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
7370 } 7315 }
7371 7316
7372 .break-wrap { 7317 .break-wrap {
7373 word-wrap: break-word; 7318 word-wrap: break-word;
7374 } 7319 }
7375 </style> 7320 </style>
7376 <nav-bar> 7321 <nav-bar>
7377 <top-nav-menu></top-nav-menu> 7322 <top-nav-menu last="{{ true }}"></top-nav-menu>
7378 <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>
7379 <template if="{{ function.owningClass != null }}">
7380 <!-- TODO(turnidge): Add library nav menu here. -->
7381 <class-nav-menu cls="{{ function.owningClass }}"></class-nav-menu>
7382 </template>
7383 <template if="{{ function.owningLibrary != null }}">
7384 <library-nav-menu library="{{ function.owningLibrary }}"></library-nav-m enu>
7385 </template>
7386 <nav-menu link="{{ function.link }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
7387 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
7388 <nav-refresh callback="{{ refresh }}"></nav-refresh>
7389 <nav-control></nav-control> 7323 <nav-control></nav-control>
7390 </nav-bar> 7324 </nav-bar>
7391 7325 <div class="content-centered">
7392 <div class="content"> 7326 <h1>{{ error.kind }}</h1>
7393 <h1>function {{ function.qualifiedName }}</h1> 7327 <br>
7394 7328 <div class="well">{{ error.message }}</div>
7395 <div class="memberList">
7396 <div class="memberItem">
7397 <div class="memberName">kind</div>
7398 <div class="memberValue">
7399 <template if="{{ function.isStatic }}">static</template>
7400 <template if="{{ function.isConst }}">const</template>
7401 {{ function.kind.toString() }}
7402 </div>
7403 </div>
7404 <template if="{{ function.parent != null }}">
7405 <div class="memberItem">
7406 <div class="memberName">parent function</div>
7407 <div class="memberValue">
7408 <function-ref ref="{{ function.parent }}"></function-ref>
7409 </div>
7410 </div>
7411 </template>
7412 <div class="memberItem">
7413 <div class="memberName">owner</div>
7414 <div class="memberValue">
7415 <template if="{{ function.owningClass != null }}">
7416 <class-ref ref="{{ function.owningClass }}"></class-ref>
7417 </template>
7418 <template if="{{ function.owningLibrary != null }}">
7419 <library-ref ref="{{ function.owningLibrary }}"></library-ref>
7420 </template>
7421 </div>
7422 </div>
7423 <div class="memberItem">
7424 <div class="memberName">script</div>
7425 <div class="memberValue">
7426 <script-ref ref="{{ function.script }}" pos="{{ function.tokenPos }} ">
7427 </script-ref>
7428 </div>
7429 </div>
7430
7431 <div class="memberItem">&nbsp;</div>
7432
7433 <template if="{{ function.code != null }}">
7434 <div class="memberItem">
7435 <div class="memberName">optimized code</div>
7436 <div class="memberValue">
7437 <code-ref ref="{{ function.code }}"></code-ref>
7438 </div>
7439 </div>
7440 </template>
7441 <template if="{{ function.unoptimizedCode != null }}">
7442 <div class="memberItem">
7443 <div class="memberName">unoptimized code</div>
7444 <div class="memberValue">
7445 <code-ref ref="{{ function.unoptimizedCode }}"></code-ref>
7446 </div>
7447 <div class="memberValue">
7448 <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.">
7449 (usage count: {{ function.usageCounter }})
7450 </span>
7451 </div>
7452 </div>
7453 </template>
7454 <div class="memberItem">
7455 <div class="memberName">deoptimizations</div>
7456 <div class="memberValue">{{ function.deoptimizations }}</div>
7457 </div>
7458 <div class="memberItem">
7459 <div class="memberName">optimizable</div>
7460 <div class="memberValue">{{ function.isOptimizable }}</div>
7461 </div>
7462 <div class="memberItem">
7463 <div class="memberName">inlinable</div>
7464 <div class="memberValue">{{ function.isInlinable }}</div>
7465 </div>
7466 <template if="{{ function.name != function.vmName }}">
7467 <div class="memberItem">
7468 <div class="memberName">vm name</div>
7469 <div class="memberValue">{{ function.vmName }}</div>
7470 </div>
7471 </template>
7472 </div>
7473 </div> 7329 </div>
7474
7475 <hr>
7476 <script-inset script="{{ function.script }}" startpos="{{ function.tokenPos }}" endpos="{{ function.endTokenPos }}">
7477 </script-inset>
7478
7479 <br>
7480 </template> 7330 </template>
7481 </polymer-element> 7331 </polymer-element>
7482 7332
7483 7333
7484 7334
7335
7336
7337
7338
7339
7340
7485 7341
7486 7342
7487 7343
7488 7344
7489 <polymer-element name="heap-map" extends="observatory-element"> 7345
7490 <template> 7346 <polymer-element name="field-view" extends="observatory-element">
7491 <style> 7347 <template>
7492 /* Global styles */ 7348 <style>/* Global styles */
7493 * { 7349 * {
7494 margin: 0; 7350 margin: 0;
7495 padding: 0; 7351 padding: 0;
7496 font: 400 14px 'Montserrat', sans-serif; 7352 font: 400 14px 'Montserrat', sans-serif;
7497 color: #333; 7353 color: #333;
7498 box-sizing: border-box; 7354 box-sizing: border-box;
7499 } 7355 }
7500 7356
7501 .content { 7357 .content {
7502 padding-left: 10%; 7358 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
7736 background-color: #f5f5f5; 7592 background-color: #f5f5f5;
7737 border: 1px solid #e3e3e3; 7593 border: 1px solid #e3e3e3;
7738 border-radius: 4px; 7594 border-radius: 4px;
7739 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 7595 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
7740 } 7596 }
7741 7597
7742 .break-wrap { 7598 .break-wrap {
7743 word-wrap: break-word; 7599 word-wrap: break-word;
7744 } 7600 }
7745 </style> 7601 </style>
7746 <style> 7602 <nav-bar>
7747 .hover { 7603 <top-nav-menu></top-nav-menu>
7748 position: fixed; 7604 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu>
7749 z-index: 999; 7605 <template if="{{ field.owner.type == 'Class' }}">
7750 height: 16px; 7606 <!-- TODO(turnidge): Add library nav menu here. -->
7751 width: 100%; 7607 <class-nav-menu cls="{{ field.owner }}"></class-nav-menu>
7752 background: #ffffff; 7608 </template>
7753 } 7609 <template if="{{ field.owner.type == 'Library' }}">
7754 .spacer { 7610 <library-nav-menu library="{{ field.owner }}"></library-nav-menu>
7755 height: 16px; 7611 </template>
7756 background-color: red; 7612 <nav-menu link="{{ field.link }}" anchor="{{ field.name }}" last="{{ true }}"></nav-menu>
7757 } 7613 <nav-refresh callback="{{ refresh }}"></nav-refresh>
7758 </style> 7614 <nav-control></nav-control>
7759 <nav-bar pad="{{ false }}"> 7615 </nav-bar>
7760 <top-nav-menu></top-nav-menu> 7616
7761 <isolate-nav-menu isolate="{{ fragmentation.isolate }}"></isolate-nav-menu> 7617 <div class="content">
7762 <nav-menu link="{{ fragmentation.isolate.relativeLink('heapmap') }}" anchor= "heap map" last="{{ true }}"></nav-menu> 7618 <h1>
7763 <nav-refresh callback="{{ refresh }}"></nav-refresh> 7619 <template if="{{ field.isStatic }}">static</template>
7764 <nav-control></nav-control> 7620 <template if="{{ field.isFinal }}">final</template>
7765 </nav-bar> 7621 <template if="{{ field.isConst }}">const</template>
7766 <div class="hover"> 7622 <template if="{{ (field.declaredType.name == 'dynamic' &amp;&amp;
7767 <p style="text-align:center">{{ status }}</p> 7623 !field.isFinal &amp;&amp; !field.isConst) }}">
7768 </div> 7624 var
7769 <div class="spacer"> 7625 </template>
7770 <!-- Make sure no data is covered by hover bar initially --> 7626 <template if="{{ (field.declaredType.name != 'dynamic') }}">
7771 </div> 7627 {{ field.declaredType.name }}
7772 <div class="flex-row"> 7628 </template>
7773 <canvas id="fragmentation" width="1px" height="1px"></canvas> 7629 {{ field.name }}
7774 </div> 7630 </h1>
7775 </template> 7631 <div class="memberList">
7632 <div class="memberItem">
7633 <div class="memberName">owner</div>
7634 <div class="memberValue">
7635 <template if="{{ field.owner.type == 'Class' }}">
7636 <class-ref ref="{{ field.owner }}"></class-ref>
7637 </template>
7638 <template if="{{ field.owner.type != 'Class' }}">
7639 <library-ref ref="{{ field.owner }}"></library-ref>
7640 </template>
7641 </div>
7642 </div>
7643 <div class="memberItem">
7644 <div class="memberName">script</div>
7645 <div class="memberValue">
7646 <script-ref ref="{{ field.script }}"></script-ref>
7647 </div>
7648 </div>
7649 <template if="{{ !field.isStatic }}">
7650 <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.">
7651 <div class="memberName">observed types</div>
7652 <div class="memberValue">
7653 <template if="{{ field.guardClass == 'dynamic' }}">
7654 various
7655 </template>
7656 <template if="{{ field.guardClass == 'unknown' }}">
7657 none
7658 </template>
7659 <template if="{{ field.guardClass != 'unknown' &amp;&amp;
7660 field.guardClass != 'dynamic' }}">
7661 <class-ref ref="{{ field.guardClass }}"></class-ref>
7662 <template if="{{ field.guardNullable }}">
7663 — null observed
7664 </template>
7665 <template if="{{ !field.guardNullable }}">
7666 — null not observed
7667 </template>
7668 </template>
7669 </div>
7670 </div>
7671 </template>
7672 <template if="{{ field.value != null }}">
7673 <div class="memberItem">
7674 <div class="memberName">static value</div>
7675 <div class="memberValue">
7676 <any-service-ref ref="{{ field.value }}"></any-service-ref>
7677 </div>
7678 </div>
7679 </template>
7680 </div>
7681 </div>
7682 </template>
7776 </polymer-element> 7683 </polymer-element>
7777 7684
7778 7685
7779 7686
7780 7687
7781 7688
7782 7689
7783 <polymer-element name="io-view" extends="observatory-element"> 7690
7691 <polymer-element name="flag-list" extends="observatory-element">
7784 <template> 7692 <template>
7785 <style> 7693 <style>/* Global styles */
7786 /* Global styles */
7787 * { 7694 * {
7788 margin: 0; 7695 margin: 0;
7789 padding: 0; 7696 padding: 0;
7790 font: 400 14px 'Montserrat', sans-serif; 7697 font: 400 14px 'Montserrat', sans-serif;
7791 color: #333; 7698 color: #333;
7792 box-sizing: border-box; 7699 box-sizing: border-box;
7793 } 7700 }
7794 7701
7795 .content { 7702 .content {
7796 padding-left: 10%; 7703 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
8030 background-color: #f5f5f5; 7937 background-color: #f5f5f5;
8031 border: 1px solid #e3e3e3; 7938 border: 1px solid #e3e3e3;
8032 border-radius: 4px; 7939 border-radius: 4px;
8033 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 7940 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
8034 } 7941 }
8035 7942
8036 .break-wrap { 7943 .break-wrap {
8037 word-wrap: break-word; 7944 word-wrap: break-word;
8038 } 7945 }
8039 </style> 7946 </style>
8040
8041 <nav-bar> 7947 <nav-bar>
8042 <top-nav-menu last="{{ true }}"></top-nav-menu> 7948 <top-nav-menu></top-nav-menu>
7949 <nav-menu link="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" la st="{{ true }}"></nav-menu>
8043 <nav-refresh callback="{{ refresh }}"></nav-refresh> 7950 <nav-refresh callback="{{ refresh }}"></nav-refresh>
8044 <nav-control></nav-control> 7951 <nav-control></nav-control>
8045 </nav-bar> 7952 </nav-bar>
8046 7953
8047 <div class="content"> 7954 <div class="content-centered">
8048 <h1>dart:io</h1> 7955 <template if="{{ flagList['modifiedFlags'].isNotEmpty }}">
7956 <h1>Modified Flags</h1>
7957 <br>
7958 <template repeat="{{ flag in flagList['modifiedFlags'] }}">
7959 <flag-item flag="{{ flag }}"></flag-item>
7960 <br>
7961 </template>
7962 <hr>
7963 </template>
8049 7964
7965 <h1>Unmodified Flags</h1>
8050 <br> 7966 <br>
7967 <template if="{{ flagList['unmodifiedFlags'].isEmpty }}">
7968 <em>None</em>
7969 </template>
7970 <template if="{{ flagList['unmodifiedFlags'].isNotEmpty }}">
7971 <template repeat="{{ flag in flagList['unmodifiedFlags'] }}">
7972 <flag-item flag="{{ flag }}"></flag-item>
7973 <br>
7974 </template>
7975 </template>
7976 </div>
8051 7977
8052 <ul class="list-group">
8053 <li class="list-group-item">
8054 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /http/servers'))}}">HTTP Servers</a>
8055 </li>
8056 </ul>
8057
8058 <br>
8059
8060 <ul class="list-group">
8061 <li class="list-group-item">
8062 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /sockets'))}}">Sockets</a>
8063 </li>
8064 </ul>
8065
8066 <br>
8067
8068 <ul class="list-group">
8069 <li class="list-group-item">
8070 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /websockets'))}}">WebSockets</a>
8071 </li>
8072 </ul>
8073
8074 <br>
8075
8076 <ul class="list-group">
8077 <li class="list-group-item">
8078 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /file/randomaccessfiles'))}}">Random Access Files</a>
8079 </li>
8080 </ul>
8081
8082 <br>
8083
8084 <ul class="list-group">
8085 <li class="list-group-item">
8086 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /processes'))}}">Processes</a>
8087 </li>
8088 </ul>
8089
8090 </div>
8091 <br>
8092 <hr>
8093 </template> 7978 </template>
8094 </polymer-element> 7979 </polymer-element>
8095 7980
8096 <polymer-element name="io-ref" extends="service-ref"> 7981 <polymer-element name="flag-item" extends="observatory-element">
8097 <template> 7982 <template>
8098 <style> 7983 <style>/* Global styles */
8099 /* Global styles */
8100 * { 7984 * {
8101 margin: 0; 7985 margin: 0;
8102 padding: 0; 7986 padding: 0;
8103 font: 400 14px 'Montserrat', sans-serif; 7987 font: 400 14px 'Montserrat', sans-serif;
8104 color: #333; 7988 color: #333;
8105 box-sizing: border-box; 7989 box-sizing: border-box;
8106 } 7990 }
8107 7991
8108 .content { 7992 .content {
8109 padding-left: 10%; 7993 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
8343 background-color: #f5f5f5; 8227 background-color: #f5f5f5;
8344 border: 1px solid #e3e3e3; 8228 border: 1px solid #e3e3e3;
8345 border-radius: 4px; 8229 border-radius: 4px;
8346 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 8230 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
8347 } 8231 }
8348 8232
8349 .break-wrap { 8233 .break-wrap {
8350 word-wrap: break-word; 8234 word-wrap: break-word;
8351 } 8235 }
8352 </style> 8236 </style>
8353 <template if="{{ ref.type == 'Socket' }}"> 8237 <span style="color:#aaa">// {{ flag['comment'] }}</span>
8354 <io-socket-ref ref="{{ ref }}"></io-socket-ref> 8238 <div style="padding: 3px 0">
8355 </template> 8239 <b>{{ flag['name'] }}</b>
8356 <template if="{{ ref.type == 'HttpServerConnection' }}"> 8240 &nbsp;=&nbsp;
8357 <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection -ref> 8241 {{ flag['valueAsString'] }}
8358 </template> 8242 </div>
8359 <template if="{{ ref.type == 'HttpServer' }}">
8360 <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>
8361 </template>
8362 <template if="{{ ref.type == 'WebSocket' }}">
8363 <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>
8364 </template>
8365 <template if="{{ ref.type == 'Process' }}">
8366 <io-process-ref ref="{{ ref }}"></io-process-ref>
8367 </template>
8368 </template> 8243 </template>
8369 </polymer-element> 8244 </polymer-element>
8370 8245
8371 <polymer-element name="io-http-server-list-view" extends="observatory-element"> 8246
8247
8248
8249
8250
8251
8252
8253
8254
8255
8256
8257
8258
8259 <polymer-element name="function-view" extends="observatory-element">
8372 <template> 8260 <template>
8373 <style> 8261 <style>/* Global styles */
8374 /* Global styles */
8375 * { 8262 * {
8376 margin: 0; 8263 margin: 0;
8377 padding: 0; 8264 padding: 0;
8378 font: 400 14px 'Montserrat', sans-serif; 8265 font: 400 14px 'Montserrat', sans-serif;
8379 color: #333; 8266 color: #333;
8380 box-sizing: border-box; 8267 box-sizing: border-box;
8381 } 8268 }
8382 8269
8383 .content { 8270 .content {
8384 padding-left: 10%; 8271 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
8618 background-color: #f5f5f5; 8505 background-color: #f5f5f5;
8619 border: 1px solid #e3e3e3; 8506 border: 1px solid #e3e3e3;
8620 border-radius: 4px; 8507 border-radius: 4px;
8621 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 8508 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
8622 } 8509 }
8623 8510
8624 .break-wrap { 8511 .break-wrap {
8625 word-wrap: break-word; 8512 word-wrap: break-word;
8626 } 8513 }
8627 </style> 8514 </style>
8628
8629 <nav-bar> 8515 <nav-bar>
8630 <top-nav-menu last="{{ true }}"></top-nav-menu> 8516 <top-nav-menu></top-nav-menu>
8517 <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>
8518 <template if="{{ function.owningClass != null }}">
8519 <!-- TODO(turnidge): Add library nav menu here. -->
8520 <class-nav-menu cls="{{ function.owningClass }}"></class-nav-menu>
8521 </template>
8522 <template if="{{ function.owningLibrary != null }}">
8523 <library-nav-menu library="{{ function.owningLibrary }}"></library-nav-m enu>
8524 </template>
8525 <nav-menu link="{{ function.link }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
8526 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
8631 <nav-refresh callback="{{ refresh }}"></nav-refresh> 8527 <nav-refresh callback="{{ refresh }}"></nav-refresh>
8528 <nav-control></nav-control>
8632 </nav-bar> 8529 </nav-bar>
8633 8530
8634 <div class="content"> 8531 <div class="content">
8635 <h1>HttpServers</h1> 8532 <h1>function {{ function.qualifiedName }}</h1>
8636 8533
8637 <br> 8534 <div class="memberList">
8535 <div class="memberItem">
8536 <div class="memberName">kind</div>
8537 <div class="memberValue">
8538 <template if="{{ function.isStatic }}">static</template>
8539 <template if="{{ function.isConst }}">const</template>
8540 {{ function.kind.toString() }}
8541 </div>
8542 </div>
8543 <template if="{{ function.parent != null }}">
8544 <div class="memberItem">
8545 <div class="memberName">parent function</div>
8546 <div class="memberValue">
8547 <function-ref ref="{{ function.parent }}"></function-ref>
8548 </div>
8549 </div>
8550 </template>
8551 <div class="memberItem">
8552 <div class="memberName">owner</div>
8553 <div class="memberValue">
8554 <template if="{{ function.owningClass != null }}">
8555 <class-ref ref="{{ function.owningClass }}"></class-ref>
8556 </template>
8557 <template if="{{ function.owningLibrary != null }}">
8558 <library-ref ref="{{ function.owningLibrary }}"></library-ref>
8559 </template>
8560 </div>
8561 </div>
8562 <div class="memberItem">
8563 <div class="memberName">script</div>
8564 <div class="memberValue">
8565 <script-ref ref="{{ function.script }}" pos="{{ function.tokenPos }} ">
8566 </script-ref>
8567 </div>
8568 </div>
8638 8569
8639 <ul class="list-group"> 8570 <div class="memberItem">&nbsp;</div>
8640 <template repeat="{{ httpServer in list['members'] }}"> 8571
8641 <li class="list-group-item"> 8572 <template if="{{ function.code != null }}">
8642 <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref> 8573 <div class="memberItem">
8643 </li> 8574 <div class="memberName">optimized code</div>
8575 <div class="memberValue">
8576 <code-ref ref="{{ function.code }}"></code-ref>
8577 </div>
8578 </div>
8644 </template> 8579 </template>
8645 </ul> 8580 <template if="{{ function.unoptimizedCode != null }}">
8581 <div class="memberItem">
8582 <div class="memberName">unoptimized code</div>
8583 <div class="memberValue">
8584 <code-ref ref="{{ function.unoptimizedCode }}"></code-ref>
8585 </div>
8586 <div class="memberValue">
8587 <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.">
8588 (usage count: {{ function.usageCounter }})
8589 </span>
8590 </div>
8591 </div>
8592 </template>
8593 <div class="memberItem">
8594 <div class="memberName">deoptimizations</div>
8595 <div class="memberValue">{{ function.deoptimizations }}</div>
8596 </div>
8597 <div class="memberItem">
8598 <div class="memberName">optimizable</div>
8599 <div class="memberValue">{{ function.isOptimizable }}</div>
8600 </div>
8601 <div class="memberItem">
8602 <div class="memberName">inlinable</div>
8603 <div class="memberValue">{{ function.isInlinable }}</div>
8604 </div>
8605 <template if="{{ function.name != function.vmName }}">
8606 <div class="memberItem">
8607 <div class="memberName">vm name</div>
8608 <div class="memberValue">{{ function.vmName }}</div>
8609 </div>
8610 </template>
8611 </div>
8646 </div> 8612 </div>
8613
8614 <hr>
8615 <script-inset script="{{ function.script }}" startpos="{{ function.tokenPos }}" endpos="{{ function.endTokenPos }}">
8616 </script-inset>
8617
8647 <br> 8618 <br>
8648 <hr>
8649 </template> 8619 </template>
8650 </polymer-element> 8620 </polymer-element>
8651 8621
8652 <polymer-element name="io-http-server-ref" extends="service-ref"> 8622
8653 <template> 8623
8654 <style> 8624
8655 /* Global styles */ 8625
8626
8627
8628
8629 <polymer-element name="heap-map" extends="observatory-element">
8630 <template>
8631 <style>/* Global styles */
8656 * { 8632 * {
8657 margin: 0; 8633 margin: 0;
8658 padding: 0; 8634 padding: 0;
8659 font: 400 14px 'Montserrat', sans-serif; 8635 font: 400 14px 'Montserrat', sans-serif;
8660 color: #333; 8636 color: #333;
8661 box-sizing: border-box; 8637 box-sizing: border-box;
8662 } 8638 }
8663 8639
8664 .content { 8640 .content {
8665 padding-left: 10%; 8641 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
8899 background-color: #f5f5f5; 8875 background-color: #f5f5f5;
8900 border: 1px solid #e3e3e3; 8876 border: 1px solid #e3e3e3;
8901 border-radius: 4px; 8877 border-radius: 4px;
8902 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 8878 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
8903 } 8879 }
8904 8880
8905 .break-wrap { 8881 .break-wrap {
8906 word-wrap: break-word; 8882 word-wrap: break-word;
8907 } 8883 }
8908 </style> 8884 </style>
8909 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a> 8885 <style>
8910 </template> 8886 .hover {
8887 position: fixed;
8888 z-index: 999;
8889 height: 16px;
8890 width: 100%;
8891 background: #ffffff;
8892 }
8893 .spacer {
8894 height: 16px;
8895 background-color: red;
8896 }
8897 </style>
8898 <nav-bar pad="{{ false }}">
8899 <top-nav-menu></top-nav-menu>
8900 <isolate-nav-menu isolate="{{ fragmentation.isolate }}"></isolate-nav-menu>
8901 <nav-menu link="{{ fragmentation.isolate.relativeLink('heapmap') }}" anchor= "heap map" last="{{ true }}"></nav-menu>
8902 <nav-refresh callback="{{ refresh }}"></nav-refresh>
8903 <nav-control></nav-control>
8904 </nav-bar>
8905 <div class="hover">
8906 <p style="text-align:center">{{ status }}</p>
8907 </div>
8908 <div class="spacer">
8909 <!-- Make sure no data is covered by hover bar initially -->
8910 </div>
8911 <div class="flex-row">
8912 <canvas id="fragmentation" width="1px" height="1px"></canvas>
8913 </div>
8914 </template>
8911 </polymer-element> 8915 </polymer-element>
8912 8916
8913 <polymer-element name="io-http-server-view" extends="observatory-element"> 8917
8918
8919
8920
8921
8922
8923 <polymer-element name="io-view" extends="observatory-element">
8914 <template> 8924 <template>
8915 <style> 8925 <style>/* Global styles */
8916 /* Global styles */
8917 * { 8926 * {
8918 margin: 0; 8927 margin: 0;
8919 padding: 0; 8928 padding: 0;
8920 font: 400 14px 'Montserrat', sans-serif; 8929 font: 400 14px 'Montserrat', sans-serif;
8921 color: #333; 8930 color: #333;
8922 box-sizing: border-box; 8931 box-sizing: border-box;
8923 } 8932 }
8924 8933
8925 .content { 8934 .content {
8926 padding-left: 10%; 8935 padding-left: 10%;
(...skipping 237 matching lines...) Expand 10 before | Expand all | Expand 10 after
9164 } 9173 }
9165 9174
9166 .break-wrap { 9175 .break-wrap {
9167 word-wrap: break-word; 9176 word-wrap: break-word;
9168 } 9177 }
9169 </style> 9178 </style>
9170 9179
9171 <nav-bar> 9180 <nav-bar>
9172 <top-nav-menu last="{{ true }}"></top-nav-menu> 9181 <top-nav-menu last="{{ true }}"></top-nav-menu>
9173 <nav-refresh callback="{{ refresh }}"></nav-refresh> 9182 <nav-refresh callback="{{ refresh }}"></nav-refresh>
9183 <nav-control></nav-control>
9174 </nav-bar> 9184 </nav-bar>
9175 9185
9176 <div class="content"> 9186 <div class="content">
9177 <h1>HttpServer</h1> 9187 <h1>dart:io</h1>
9178 9188
9179 <br> 9189 <br>
9180 9190
9181 <div class="memberList"> 9191 <ul class="list-group">
9182 <div class="memberItem"> 9192 <li class="list-group-item">
9183 <div class="memberName">Socket</div> 9193 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /http/servers'))}}">HTTP Servers</a>
9184 <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] } }"></io-socket-ref></div> 9194 </li>
9185 </div> 9195 </ul>
9186 <div class="memberItem"> 9196
9187 <div class="memberName">Address</div> 9197 <br>
9188 <div class="memberValue">{{ httpServer['address'] }}</div> 9198
9189 </div> 9199 <ul class="list-group">
9190 <div class="memberItem"> 9200 <li class="list-group-item">
9191 <div class="memberName">Port</div> 9201 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /sockets'))}}">Sockets</a>
9192 <div class="memberValue">{{ httpServer['port'] }}</div> 9202 </li>
9193 </div> 9203 </ul>
9194 <div class="memberItem"> 9204
9195 <div class="memberName">Active connections</div> 9205 <br>
9196 <ul class="list-group"> 9206
9197 <template repeat="{{ connection in httpServer['active'] }}"> 9207 <ul class="list-group">
9198 <li class="list-group-item"> 9208 <li class="list-group-item">
9199 <io-http-server-connection-ref ref="{{ connection }}"></io-http- server-connection-ref> 9209 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /websockets'))}}">WebSockets</a>
9200 </li> 9210 </li>
9201 </template> 9211 </ul>
9202 </ul> 9212
9203 </div> 9213 <br>
9204 <div class="memberItem"> 9214
9205 <div class="memberName">Idle connections</div> 9215 <ul class="list-group">
9206 <ul class="list-group"> 9216 <li class="list-group-item">
9207 <template repeat="{{ connection in httpServer['idle'] }}"> 9217 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /file/randomaccessfiles'))}}">Random Access Files</a>
9208 <li class="list-group-item"> 9218 </li>
9209 <io-http-server-connection-ref ref="{{ connection }}"></io-http- server-connection-ref> 9219 </ul>
9210 </li> 9220
9211 </template> 9221 <br>
9212 </ul> 9222
9213 </div> 9223 <ul class="list-group">
9214 </div> 9224 <li class="list-group-item">
9225 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /processes'))}}">Processes</a>
9226 </li>
9227 </ul>
9228
9215 </div> 9229 </div>
9216 <br> 9230 <br>
9217 <hr> 9231 <hr>
9218 </template> 9232 </template>
9219 </polymer-element> 9233 </polymer-element>
9220 9234
9221 <polymer-element name="io-http-server-connection-ref" extends="service-ref"> 9235 <polymer-element name="io-ref" extends="service-ref">
9222 <template> 9236 <template>
9223 <style> 9237 <style>/* Global styles */
9224 /* Global styles */
9225 * { 9238 * {
9226 margin: 0; 9239 margin: 0;
9227 padding: 0; 9240 padding: 0;
9228 font: 400 14px 'Montserrat', sans-serif; 9241 font: 400 14px 'Montserrat', sans-serif;
9229 color: #333; 9242 color: #333;
9230 box-sizing: border-box; 9243 box-sizing: border-box;
9231 } 9244 }
9232 9245
9233 .content { 9246 .content {
9234 padding-left: 10%; 9247 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
9468 background-color: #f5f5f5; 9481 background-color: #f5f5f5;
9469 border: 1px solid #e3e3e3; 9482 border: 1px solid #e3e3e3;
9470 border-radius: 4px; 9483 border-radius: 4px;
9471 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 9484 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
9472 } 9485 }
9473 9486
9474 .break-wrap { 9487 .break-wrap {
9475 word-wrap: break-word; 9488 word-wrap: break-word;
9476 } 9489 }
9477 </style> 9490 </style>
9478 <a _href="{{ url }}">{{ name }}</a> 9491 <template if="{{ ref.type == 'Socket' }}">
9492 <io-socket-ref ref="{{ ref }}"></io-socket-ref>
9493 </template>
9494 <template if="{{ ref.type == 'HttpServerConnection' }}">
9495 <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection -ref>
9496 </template>
9497 <template if="{{ ref.type == 'HttpServer' }}">
9498 <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>
9499 </template>
9500 <template if="{{ ref.type == 'WebSocket' }}">
9501 <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>
9502 </template>
9503 <template if="{{ ref.type == 'Process' }}">
9504 <io-process-ref ref="{{ ref }}"></io-process-ref>
9505 </template>
9479 </template> 9506 </template>
9480 </polymer-element> 9507 </polymer-element>
9481 9508
9482 <polymer-element name="io-http-server-connection-view" extends="observatory-elem ent"> 9509 <polymer-element name="io-http-server-list-view" extends="observatory-element">
9483 <template> 9510 <template>
9484 <style> 9511 <style>/* Global styles */
9485 /* Global styles */
9486 * { 9512 * {
9487 margin: 0; 9513 margin: 0;
9488 padding: 0; 9514 padding: 0;
9489 font: 400 14px 'Montserrat', sans-serif; 9515 font: 400 14px 'Montserrat', sans-serif;
9490 color: #333; 9516 color: #333;
9491 box-sizing: border-box; 9517 box-sizing: border-box;
9492 } 9518 }
9493 9519
9494 .content { 9520 .content {
9495 padding-left: 10%; 9521 padding-left: 10%;
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after
9736 word-wrap: break-word; 9762 word-wrap: break-word;
9737 } 9763 }
9738 </style> 9764 </style>
9739 9765
9740 <nav-bar> 9766 <nav-bar>
9741 <top-nav-menu last="{{ true }}"></top-nav-menu> 9767 <top-nav-menu last="{{ true }}"></top-nav-menu>
9742 <nav-refresh callback="{{ refresh }}"></nav-refresh> 9768 <nav-refresh callback="{{ refresh }}"></nav-refresh>
9743 </nav-bar> 9769 </nav-bar>
9744 9770
9745 <div class="content"> 9771 <div class="content">
9746 <h1>HttpConnection</h1> 9772 <h1>HttpServers</h1>
9747 9773
9748 <br> 9774 <br>
9749 9775
9750 <div class="memberList"> 9776 <ul class="list-group">
9751 <div class="memberItem"> 9777 <template repeat="{{ httpServer in list['members'] }}">
9752 <div class="memberName">Socket</div> 9778 <li class="list-group-item">
9753 <div class="memberValue"><io-socket-ref ref="{{ connection['socket'] } }"></io-socket-ref></div> 9779 <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
9754 </div> 9780 </li>
9755 <div class="memberItem"> 9781 </template>
9756 <div class="memberName">State</div> 9782 </ul>
9757 <div class="memberValue">{{ connection['state'] }}</div>
9758 </div>
9759 <div class="memberItem">
9760 <div class="memberName">Server</div>
9761 <div class="memberValue"><io-http-server-ref ref="{{ connection['serve r'] }}"></io-http-server-ref></div>
9762 </div>
9763 </div>
9764 </div> 9783 </div>
9765 <br> 9784 <br>
9766 <hr> 9785 <hr>
9767 </template> 9786 </template>
9768 </polymer-element> 9787 </polymer-element>
9769 9788
9770 <polymer-element name="io-socket-ref" extends="service-ref"> 9789 <polymer-element name="io-http-server-ref" extends="service-ref">
9771 <template> 9790 <template>
9772 <style> 9791 <style>/* Global styles */
9773 /* Global styles */
9774 * { 9792 * {
9775 margin: 0; 9793 margin: 0;
9776 padding: 0; 9794 padding: 0;
9777 font: 400 14px 'Montserrat', sans-serif; 9795 font: 400 14px 'Montserrat', sans-serif;
9778 color: #333; 9796 color: #333;
9779 box-sizing: border-box; 9797 box-sizing: border-box;
9780 } 9798 }
9781 9799
9782 .content { 9800 .content {
9783 padding-left: 10%; 9801 padding-left: 10%;
(...skipping 237 matching lines...) Expand 10 before | Expand all | Expand 10 after
10021 } 10039 }
10022 10040
10023 .break-wrap { 10041 .break-wrap {
10024 word-wrap: break-word; 10042 word-wrap: break-word;
10025 } 10043 }
10026 </style> 10044 </style>
10027 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a> 10045 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
10028 </template> 10046 </template>
10029 </polymer-element> 10047 </polymer-element>
10030 10048
10031 <polymer-element name="io-socket-list-view" extends="observatory-element"> 10049 <polymer-element name="io-http-server-view" extends="observatory-element">
10032 <template> 10050 <template>
10033 <style> 10051 <style>/* Global styles */
10034 /* Global styles */
10035 * { 10052 * {
10036 margin: 0; 10053 margin: 0;
10037 padding: 0; 10054 padding: 0;
10038 font: 400 14px 'Montserrat', sans-serif; 10055 font: 400 14px 'Montserrat', sans-serif;
10039 color: #333; 10056 color: #333;
10040 box-sizing: border-box; 10057 box-sizing: border-box;
10041 } 10058 }
10042 10059
10043 .content { 10060 .content {
10044 padding-left: 10%; 10061 padding-left: 10%;
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after
10285 word-wrap: break-word; 10302 word-wrap: break-word;
10286 } 10303 }
10287 </style> 10304 </style>
10288 10305
10289 <nav-bar> 10306 <nav-bar>
10290 <top-nav-menu last="{{ true }}"></top-nav-menu> 10307 <top-nav-menu last="{{ true }}"></top-nav-menu>
10291 <nav-refresh callback="{{ refresh }}"></nav-refresh> 10308 <nav-refresh callback="{{ refresh }}"></nav-refresh>
10292 </nav-bar> 10309 </nav-bar>
10293 10310
10294 <div class="content"> 10311 <div class="content">
10295 <h1>Sockets</h1> 10312 <h1>HttpServer</h1>
10296 10313
10297 <br> 10314 <br>
10298 10315
10299 <ul class="list-group"> 10316 <div class="memberList">
10300 <template repeat="{{ socket in list['members'] }}"> 10317 <div class="memberItem">
10301 <li class="list-group-item"> 10318 <div class="memberName">Socket</div>
10302 <io-socket-ref ref="{{ socket }}"></io-socket-ref> 10319 <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] } }"></io-socket-ref></div>
10303 </li> 10320 </div>
10304 </template> 10321 <div class="memberItem">
10305 </ul> 10322 <div class="memberName">Address</div>
10323 <div class="memberValue">{{ httpServer['address'] }}</div>
10324 </div>
10325 <div class="memberItem">
10326 <div class="memberName">Port</div>
10327 <div class="memberValue">{{ httpServer['port'] }}</div>
10328 </div>
10329 <div class="memberItem">
10330 <div class="memberName">Active connections</div>
10331 <ul class="list-group">
10332 <template repeat="{{ connection in httpServer['active'] }}">
10333 <li class="list-group-item">
10334 <io-http-server-connection-ref ref="{{ connection }}"></io-http- server-connection-ref>
10335 </li>
10336 </template>
10337 </ul>
10338 </div>
10339 <div class="memberItem">
10340 <div class="memberName">Idle connections</div>
10341 <ul class="list-group">
10342 <template repeat="{{ connection in httpServer['idle'] }}">
10343 <li class="list-group-item">
10344 <io-http-server-connection-ref ref="{{ connection }}"></io-http- server-connection-ref>
10345 </li>
10346 </template>
10347 </ul>
10348 </div>
10349 </div>
10306 </div> 10350 </div>
10307 <br> 10351 <br>
10308 <hr> 10352 <hr>
10309 </template> 10353 </template>
10310 </polymer-element> 10354 </polymer-element>
10311 10355
10312 <polymer-element name="io-socket-view" extends="observatory-element"> 10356 <polymer-element name="io-http-server-connection-ref" extends="service-ref">
10313 <template> 10357 <template>
10314 <style> 10358 <style>/* Global styles */
10315 /* Global styles */
10316 * { 10359 * {
10317 margin: 0; 10360 margin: 0;
10318 padding: 0; 10361 padding: 0;
10319 font: 400 14px 'Montserrat', sans-serif; 10362 font: 400 14px 'Montserrat', sans-serif;
10320 color: #333; 10363 color: #333;
10321 box-sizing: border-box; 10364 box-sizing: border-box;
10322 } 10365 }
10323 10366
10324 .content { 10367 .content {
10325 padding-left: 10%; 10368 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
10559 background-color: #f5f5f5; 10602 background-color: #f5f5f5;
10560 border: 1px solid #e3e3e3; 10603 border: 1px solid #e3e3e3;
10561 border-radius: 4px; 10604 border-radius: 4px;
10562 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 10605 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
10563 } 10606 }
10564 10607
10565 .break-wrap { 10608 .break-wrap {
10566 word-wrap: break-word; 10609 word-wrap: break-word;
10567 } 10610 }
10568 </style> 10611 </style>
10569 10612 <a _href="{{ url }}">{{ name }}</a>
10570 <nav-bar>
10571 <top-nav-menu last="{{ true }}"></top-nav-menu>
10572 <nav-refresh callback="{{ refresh }}"></nav-refresh>
10573 </nav-bar>
10574
10575 <div class="content">
10576 <!-- Pipe Socket -->
10577 <template if="{{ socket.isPipe }}">
10578 <h1>Pipe Socket</h1>
10579 <div class="memberList">
10580 <template if="{{ socket.socketOwner != null }}">
10581 <div class="memberItem">
10582 <div class="memberName">Owner</div>
10583 <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></ io-ref></div>
10584 </div>
10585 </template>
10586 <div class="memberItem">
10587 <div class="memberName">File descriptor</div>
10588 <div class="memberValue">{{ socket.fd }}</div>
10589 </div>
10590 <div class="memberItem">
10591 <div class="memberName">Read Closed</div>
10592 <div class="memberValue">{{ socket.readClosed }}</div>
10593 </div>
10594 <div class="memberItem">
10595 <div class="memberName">Write Closed</div>
10596 <div class="memberValue">{{ socket.writeClosed }}</div>
10597 </div>
10598 <div class="memberItem">
10599 <div class="memberName">Closing</div>
10600 <div class="memberValue">{{ socket.closing }}</div>
10601 </div>
10602 </div>
10603 </template>
10604 <!-- Network Socket -->
10605 <template if="{{ !socket.isPipe }}">
10606 <h1>Network Socket</h1>
10607 <div class="memberList">
10608 <template if="{{ socket.socketOwner != null }}">
10609 <div class="memberItem">
10610 <div class="memberName">Owner</div>
10611 <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></ io-ref></div>
10612 </div>
10613 </template>
10614 <div class="memberItem">
10615 <div class="memberName">Local Address</div>
10616 <div class="memberValue">{{ socket.localAddress }}</div>
10617 </div>
10618 <div class="memberItem">
10619 <div class="memberName">Local Port</div>
10620 <div class="memberValue">{{ socket.localPort }}</div>
10621 </div>
10622 <div class="memberItem">
10623 <div class="memberName">Remote Address</div>
10624 <div class="memberValue">{{ socket.remoteAddress }}</div>
10625 </div>
10626 <div class="memberItem">
10627 <div class="memberName">Remote Port</div>
10628 <div class="memberValue">{{ socket.remotePort }}</div>
10629 </div>
10630 <div class="memberItem">
10631 <div class="memberName">File descriptor</div>
10632 <div class="memberValue">{{ socket.fd }}</div>
10633 </div>
10634 <div class="memberItem">
10635 <div class="memberName">Read Closed</div>
10636 <div class="memberValue">{{ socket.readClosed }}</div>
10637 </div>
10638 <div class="memberItem">
10639 <div class="memberName">Write Closed</div>
10640 <div class="memberValue">{{ socket.writeClosed }}</div>
10641 </div>
10642 <div class="memberItem">
10643 <div class="memberName">Closing</div>
10644 <div class="memberValue">{{ socket.closing }}</div>
10645 </div>
10646 <div class="memberItem">
10647 <div class="memberName">Listening</div>
10648 <div class="memberValue">{{ socket.listening }}</div>
10649 </div>
10650 <div class="memberItem">
10651 <div class="memberName">Protocol</div>
10652 <div class="memberValue">{{ socket.protocol }}</div>
10653 </div>
10654 </div>
10655 </template>
10656 </div>
10657 <br>
10658 <hr>
10659 </template> 10613 </template>
10660 </polymer-element> 10614 </polymer-element>
10661 10615
10662 <polymer-element name="io-web-socket-ref" extends="service-ref"> 10616 <polymer-element name="io-http-server-connection-view" extends="observatory-elem ent">
10663 <template> 10617 <template>
10664 <style> 10618 <style>/* Global styles */
10665 /* Global styles */
10666 * { 10619 * {
10667 margin: 0; 10620 margin: 0;
10668 padding: 0; 10621 padding: 0;
10669 font: 400 14px 'Montserrat', sans-serif; 10622 font: 400 14px 'Montserrat', sans-serif;
10670 color: #333; 10623 color: #333;
10671 box-sizing: border-box; 10624 box-sizing: border-box;
10672 } 10625 }
10673 10626
10674 .content { 10627 .content {
10675 padding-left: 10%; 10628 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
10909 background-color: #f5f5f5; 10862 background-color: #f5f5f5;
10910 border: 1px solid #e3e3e3; 10863 border: 1px solid #e3e3e3;
10911 border-radius: 4px; 10864 border-radius: 4px;
10912 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 10865 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
10913 } 10866 }
10914 10867
10915 .break-wrap { 10868 .break-wrap {
10916 word-wrap: break-word; 10869 word-wrap: break-word;
10917 } 10870 }
10918 </style> 10871 </style>
10919 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a> 10872
10873 <nav-bar>
10874 <top-nav-menu last="{{ true }}"></top-nav-menu>
10875 <nav-refresh callback="{{ refresh }}"></nav-refresh>
10876 </nav-bar>
10877
10878 <div class="content">
10879 <h1>HttpConnection</h1>
10880
10881 <br>
10882
10883 <div class="memberList">
10884 <div class="memberItem">
10885 <div class="memberName">Socket</div>
10886 <div class="memberValue"><io-socket-ref ref="{{ connection['socket'] } }"></io-socket-ref></div>
10887 </div>
10888 <div class="memberItem">
10889 <div class="memberName">State</div>
10890 <div class="memberValue">{{ connection['state'] }}</div>
10891 </div>
10892 <div class="memberItem">
10893 <div class="memberName">Server</div>
10894 <div class="memberValue"><io-http-server-ref ref="{{ connection['serve r'] }}"></io-http-server-ref></div>
10895 </div>
10896 </div>
10897 </div>
10898 <br>
10899 <hr>
10920 </template> 10900 </template>
10921 </polymer-element> 10901 </polymer-element>
10922 10902
10923 <polymer-element name="io-web-socket-list-view" extends="observatory-element"> 10903 <polymer-element name="io-socket-ref" extends="service-ref">
10924 <template> 10904 <template>
10925 <style> 10905 <style>/* Global styles */
10926 /* Global styles */
10927 * { 10906 * {
10928 margin: 0; 10907 margin: 0;
10929 padding: 0; 10908 padding: 0;
10930 font: 400 14px 'Montserrat', sans-serif; 10909 font: 400 14px 'Montserrat', sans-serif;
10931 color: #333; 10910 color: #333;
10932 box-sizing: border-box; 10911 box-sizing: border-box;
10933 } 10912 }
10934 10913
10935 .content { 10914 .content {
10936 padding-left: 10%; 10915 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
11170 background-color: #f5f5f5; 11149 background-color: #f5f5f5;
11171 border: 1px solid #e3e3e3; 11150 border: 1px solid #e3e3e3;
11172 border-radius: 4px; 11151 border-radius: 4px;
11173 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 11152 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
11174 } 11153 }
11175 11154
11176 .break-wrap { 11155 .break-wrap {
11177 word-wrap: break-word; 11156 word-wrap: break-word;
11178 } 11157 }
11179 </style> 11158 </style>
11180 11159 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
11181 <nav-bar>
11182 <top-nav-menu last="{{ true }}"></top-nav-menu>
11183 <nav-refresh callback="{{ refresh }}"></nav-refresh>
11184 </nav-bar>
11185
11186 <div class="content">
11187 <h1>WebSockets</h1>
11188
11189 <br>
11190
11191 <ul class="list-group">
11192 <template repeat="{{ webSocket in list['members'] }}">
11193 <li class="list-group-item">
11194 <io-web-socket-ref ref="{{ webSocket }}"></io-web-socket-ref>
11195 </li>
11196 </template>
11197 </ul>
11198 </div>
11199 <br>
11200 <hr>
11201 </template> 11160 </template>
11202 </polymer-element> 11161 </polymer-element>
11203 11162
11204 <polymer-element name="io-web-socket-view" extends="observatory-element"> 11163 <polymer-element name="io-socket-list-view" extends="observatory-element">
11205 <template> 11164 <template>
11206 <style> 11165 <style>/* Global styles */
11207 /* Global styles */
11208 * { 11166 * {
11209 margin: 0; 11167 margin: 0;
11210 padding: 0; 11168 padding: 0;
11211 font: 400 14px 'Montserrat', sans-serif; 11169 font: 400 14px 'Montserrat', sans-serif;
11212 color: #333; 11170 color: #333;
11213 box-sizing: border-box; 11171 box-sizing: border-box;
11214 } 11172 }
11215 11173
11216 .content { 11174 .content {
11217 padding-left: 10%; 11175 padding-left: 10%;
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after
11458 word-wrap: break-word; 11416 word-wrap: break-word;
11459 } 11417 }
11460 </style> 11418 </style>
11461 11419
11462 <nav-bar> 11420 <nav-bar>
11463 <top-nav-menu last="{{ true }}"></top-nav-menu> 11421 <top-nav-menu last="{{ true }}"></top-nav-menu>
11464 <nav-refresh callback="{{ refresh }}"></nav-refresh> 11422 <nav-refresh callback="{{ refresh }}"></nav-refresh>
11465 </nav-bar> 11423 </nav-bar>
11466 11424
11467 <div class="content"> 11425 <div class="content">
11468 <h1>WebSocket</h1> 11426 <h1>Sockets</h1>
11469 11427
11470 <br> 11428 <br>
11471 11429
11472 <div class="memberList"> 11430 <ul class="list-group">
11473 <div class="memberItem"> 11431 <template repeat="{{ socket in list['members'] }}">
11474 <div class="memberName">Socket</div> 11432 <li class="list-group-item">
11475 <div class="memberValue"><io-socket-ref ref="{{ webSocket['socket'] }} "></io-socket-ref></div> 11433 <io-socket-ref ref="{{ socket }}"></io-socket-ref>
11476 </div> 11434 </li>
11477 </div> 11435 </template>
11436 </ul>
11478 </div> 11437 </div>
11479 <br> 11438 <br>
11480 <hr> 11439 <hr>
11481 </template> 11440 </template>
11482 </polymer-element> 11441 </polymer-element>
11483 11442
11484 <polymer-element name="io-random-access-file-ref" extends="service-ref"> 11443 <polymer-element name="io-socket-view" extends="observatory-element">
11485 <template> 11444 <template>
11486 <style> 11445 <style>/* Global styles */
11487 /* Global styles */
11488 * { 11446 * {
11489 margin: 0; 11447 margin: 0;
11490 padding: 0; 11448 padding: 0;
11491 font: 400 14px 'Montserrat', sans-serif; 11449 font: 400 14px 'Montserrat', sans-serif;
11492 color: #333; 11450 color: #333;
11493 box-sizing: border-box; 11451 box-sizing: border-box;
11494 } 11452 }
11495 11453
11496 .content { 11454 .content {
11497 padding-left: 10%; 11455 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
11731 background-color: #f5f5f5; 11689 background-color: #f5f5f5;
11732 border: 1px solid #e3e3e3; 11690 border: 1px solid #e3e3e3;
11733 border-radius: 4px; 11691 border-radius: 4px;
11734 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 11692 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
11735 } 11693 }
11736 11694
11737 .break-wrap { 11695 .break-wrap {
11738 word-wrap: break-word; 11696 word-wrap: break-word;
11739 } 11697 }
11740 </style> 11698 </style>
11741 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a> 11699
11700 <nav-bar>
11701 <top-nav-menu last="{{ true }}"></top-nav-menu>
11702 <nav-refresh callback="{{ refresh }}"></nav-refresh>
11703 </nav-bar>
11704
11705 <div class="content">
11706 <!-- Pipe Socket -->
11707 <template if="{{ socket.isPipe }}">
11708 <h1>Pipe Socket</h1>
11709 <div class="memberList">
11710 <template if="{{ socket.socketOwner != null }}">
11711 <div class="memberItem">
11712 <div class="memberName">Owner</div>
11713 <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></ io-ref></div>
11714 </div>
11715 </template>
11716 <div class="memberItem">
11717 <div class="memberName">File descriptor</div>
11718 <div class="memberValue">{{ socket.fd }}</div>
11719 </div>
11720 <div class="memberItem">
11721 <div class="memberName">Read Closed</div>
11722 <div class="memberValue">{{ socket.readClosed }}</div>
11723 </div>
11724 <div class="memberItem">
11725 <div class="memberName">Write Closed</div>
11726 <div class="memberValue">{{ socket.writeClosed }}</div>
11727 </div>
11728 <div class="memberItem">
11729 <div class="memberName">Closing</div>
11730 <div class="memberValue">{{ socket.closing }}</div>
11731 </div>
11732 </div>
11733 </template>
11734 <!-- Network Socket -->
11735 <template if="{{ !socket.isPipe }}">
11736 <h1>Network Socket</h1>
11737 <div class="memberList">
11738 <template if="{{ socket.socketOwner != null }}">
11739 <div class="memberItem">
11740 <div class="memberName">Owner</div>
11741 <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></ io-ref></div>
11742 </div>
11743 </template>
11744 <div class="memberItem">
11745 <div class="memberName">Local Address</div>
11746 <div class="memberValue">{{ socket.localAddress }}</div>
11747 </div>
11748 <div class="memberItem">
11749 <div class="memberName">Local Port</div>
11750 <div class="memberValue">{{ socket.localPort }}</div>
11751 </div>
11752 <div class="memberItem">
11753 <div class="memberName">Remote Address</div>
11754 <div class="memberValue">{{ socket.remoteAddress }}</div>
11755 </div>
11756 <div class="memberItem">
11757 <div class="memberName">Remote Port</div>
11758 <div class="memberValue">{{ socket.remotePort }}</div>
11759 </div>
11760 <div class="memberItem">
11761 <div class="memberName">File descriptor</div>
11762 <div class="memberValue">{{ socket.fd }}</div>
11763 </div>
11764 <div class="memberItem">
11765 <div class="memberName">Read Closed</div>
11766 <div class="memberValue">{{ socket.readClosed }}</div>
11767 </div>
11768 <div class="memberItem">
11769 <div class="memberName">Write Closed</div>
11770 <div class="memberValue">{{ socket.writeClosed }}</div>
11771 </div>
11772 <div class="memberItem">
11773 <div class="memberName">Closing</div>
11774 <div class="memberValue">{{ socket.closing }}</div>
11775 </div>
11776 <div class="memberItem">
11777 <div class="memberName">Listening</div>
11778 <div class="memberValue">{{ socket.listening }}</div>
11779 </div>
11780 <div class="memberItem">
11781 <div class="memberName">Protocol</div>
11782 <div class="memberValue">{{ socket.protocol }}</div>
11783 </div>
11784 </div>
11785 </template>
11786 </div>
11787 <br>
11788 <hr>
11742 </template> 11789 </template>
11743 </polymer-element> 11790 </polymer-element>
11744 11791
11745 <polymer-element name="io-random-access-file-list-view" extends="observatory-ele ment"> 11792 <polymer-element name="io-web-socket-ref" extends="service-ref">
11746 <template> 11793 <template>
11747 <style> 11794 <style>/* Global styles */
11748 /* Global styles */
11749 * { 11795 * {
11750 margin: 0; 11796 margin: 0;
11751 padding: 0; 11797 padding: 0;
11752 font: 400 14px 'Montserrat', sans-serif; 11798 font: 400 14px 'Montserrat', sans-serif;
11753 color: #333; 11799 color: #333;
11754 box-sizing: border-box; 11800 box-sizing: border-box;
11755 } 11801 }
11756 11802
11757 .content { 11803 .content {
11758 padding-left: 10%; 11804 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
11992 background-color: #f5f5f5; 12038 background-color: #f5f5f5;
11993 border: 1px solid #e3e3e3; 12039 border: 1px solid #e3e3e3;
11994 border-radius: 4px; 12040 border-radius: 4px;
11995 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 12041 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
11996 } 12042 }
11997 12043
11998 .break-wrap { 12044 .break-wrap {
11999 word-wrap: break-word; 12045 word-wrap: break-word;
12000 } 12046 }
12001 </style> 12047 </style>
12002 12048 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
12003 <nav-bar>
12004 <top-nav-menu last="{{ true }}"></top-nav-menu>
12005 <nav-refresh callback="{{ refresh }}"></nav-refresh>
12006 </nav-bar>
12007
12008 <div class="content">
12009 <h1>Random Access Files</h1>
12010
12011 <br>
12012
12013 <ul class="list-group">
12014 <template repeat="{{ file in list['members'] }}">
12015 <li class="list-group-item">
12016 <io-random-access-file-ref ref="{{ file }}"></io-random-access-file- ref>
12017 </li>
12018 </template>
12019 </ul>
12020 </div>
12021 <br>
12022 <hr>
12023 </template> 12049 </template>
12024 </polymer-element> 12050 </polymer-element>
12025 12051
12026 <polymer-element name="io-random-access-file-view" extends="observatory-element" > 12052 <polymer-element name="io-web-socket-list-view" extends="observatory-element">
12027 <template> 12053 <template>
12028 <style> 12054 <style>/* Global styles */
12029 /* Global styles */
12030 * { 12055 * {
12031 margin: 0; 12056 margin: 0;
12032 padding: 0; 12057 padding: 0;
12033 font: 400 14px 'Montserrat', sans-serif; 12058 font: 400 14px 'Montserrat', sans-serif;
12034 color: #333; 12059 color: #333;
12035 box-sizing: border-box; 12060 box-sizing: border-box;
12036 } 12061 }
12037 12062
12038 .content { 12063 .content {
12039 padding-left: 10%; 12064 padding-left: 10%;
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after
12280 word-wrap: break-word; 12305 word-wrap: break-word;
12281 } 12306 }
12282 </style> 12307 </style>
12283 12308
12284 <nav-bar> 12309 <nav-bar>
12285 <top-nav-menu last="{{ true }}"></top-nav-menu> 12310 <top-nav-menu last="{{ true }}"></top-nav-menu>
12286 <nav-refresh callback="{{ refresh }}"></nav-refresh> 12311 <nav-refresh callback="{{ refresh }}"></nav-refresh>
12287 </nav-bar> 12312 </nav-bar>
12288 12313
12289 <div class="content"> 12314 <div class="content">
12290 <h1>Random Access File</h1> 12315 <h1>WebSockets</h1>
12291 12316
12292 <br> 12317 <br>
12293 12318
12294 <div class="memberList"> 12319 <ul class="list-group">
12295 <div class="memberItem"> 12320 <template repeat="{{ webSocket in list['members'] }}">
12296 <div class="memberName">Path</div> 12321 <li class="list-group-item">
12297 <div class="memberValue">{{ file['name'] }}</div> 12322 <io-web-socket-ref ref="{{ webSocket }}"></io-web-socket-ref>
12298 </div> 12323 </li>
12299 <div class="memberItem"> 12324 </template>
12300 <div class="memberName">Pending Operation</div> 12325 </ul>
12301 <div class="memberValue">{{ file['asyncDispatched'] }}</div>
12302 </div>
12303 <div class="memberItem">
12304 <div class="memberName">File Descriptor</div>
12305 <div class="memberValue">{{ file['fd'] }}</div>
12306 </div>
12307 </div>
12308 </div> 12326 </div>
12309 <br> 12327 <br>
12310 <hr> 12328 <hr>
12311 </template> 12329 </template>
12312 </polymer-element> 12330 </polymer-element>
12313 12331
12314 <polymer-element name="io-process-list-view" extends="observatory-element"> 12332 <polymer-element name="io-web-socket-view" extends="observatory-element">
12315 <template> 12333 <template>
12316 <style> 12334 <style>/* Global styles */
12317 /* Global styles */
12318 * { 12335 * {
12319 margin: 0; 12336 margin: 0;
12320 padding: 0; 12337 padding: 0;
12321 font: 400 14px 'Montserrat', sans-serif; 12338 font: 400 14px 'Montserrat', sans-serif;
12322 color: #333; 12339 color: #333;
12323 box-sizing: border-box; 12340 box-sizing: border-box;
12324 } 12341 }
12325 12342
12326 .content { 12343 .content {
12327 padding-left: 10%; 12344 padding-left: 10%;
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after
12568 word-wrap: break-word; 12585 word-wrap: break-word;
12569 } 12586 }
12570 </style> 12587 </style>
12571 12588
12572 <nav-bar> 12589 <nav-bar>
12573 <top-nav-menu last="{{ true }}"></top-nav-menu> 12590 <top-nav-menu last="{{ true }}"></top-nav-menu>
12574 <nav-refresh callback="{{ refresh }}"></nav-refresh> 12591 <nav-refresh callback="{{ refresh }}"></nav-refresh>
12575 </nav-bar> 12592 </nav-bar>
12576 12593
12577 <div class="content"> 12594 <div class="content">
12578 <h1>Processes</h1> 12595 <h1>WebSocket</h1>
12579 12596
12580 <br> 12597 <br>
12581 12598
12582 <ul class="list-group"> 12599 <div class="memberList">
12583 <template repeat="{{ process in list['members'] }}"> 12600 <div class="memberItem">
12584 <li class="list-group-item"> 12601 <div class="memberName">Socket</div>
12585 <io-process-ref ref="{{ process }}"></io-process-ref> 12602 <div class="memberValue"><io-socket-ref ref="{{ webSocket['socket'] }} "></io-socket-ref></div>
12586 </li> 12603 </div>
12587 </template> 12604 </div>
12588 </ul>
12589 </div> 12605 </div>
12590 <br> 12606 <br>
12591 <hr> 12607 <hr>
12592 </template> 12608 </template>
12593 </polymer-element> 12609 </polymer-element>
12594 12610
12595 <polymer-element name="io-process-ref" extends="service-ref"> 12611 <polymer-element name="io-random-access-file-ref" extends="service-ref">
12596 <template> 12612 <template>
12597 <style> 12613 <style>/* Global styles */
12598 /* Global styles */
12599 * { 12614 * {
12600 margin: 0; 12615 margin: 0;
12601 padding: 0; 12616 padding: 0;
12602 font: 400 14px 'Montserrat', sans-serif; 12617 font: 400 14px 'Montserrat', sans-serif;
12603 color: #333; 12618 color: #333;
12604 box-sizing: border-box; 12619 box-sizing: border-box;
12605 } 12620 }
12606 12621
12607 .content { 12622 .content {
12608 padding-left: 10%; 12623 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
12842 background-color: #f5f5f5; 12857 background-color: #f5f5f5;
12843 border: 1px solid #e3e3e3; 12858 border: 1px solid #e3e3e3;
12844 border-radius: 4px; 12859 border-radius: 4px;
12845 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 12860 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
12846 } 12861 }
12847 12862
12848 .break-wrap { 12863 .break-wrap {
12849 word-wrap: break-word; 12864 word-wrap: break-word;
12850 } 12865 }
12851 </style> 12866 </style>
12852 <template if="{{ small }}"> 12867 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
12853 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
12854 </template>
12855 <template if="{{ !small }}">
12856 <a on-click="{{ goto }}" _href="{{ url }}">({{ ref['pid'] }}) {{ name }} { { ref['arguments'] }}</a>
12857 </template>
12858 </template> 12868 </template>
12859 </polymer-element> 12869 </polymer-element>
12860 12870
12861 <polymer-element name="io-process-view" extends="observatory-element"> 12871 <polymer-element name="io-random-access-file-list-view" extends="observatory-ele ment">
12862 <template> 12872 <template>
12863 <style> 12873 <style>/* Global styles */
12864 /* Global styles */
12865 * { 12874 * {
12866 margin: 0; 12875 margin: 0;
12867 padding: 0; 12876 padding: 0;
12868 font: 400 14px 'Montserrat', sans-serif; 12877 font: 400 14px 'Montserrat', sans-serif;
12869 color: #333; 12878 color: #333;
12870 box-sizing: border-box; 12879 box-sizing: border-box;
12871 } 12880 }
12872 12881
12873 .content { 12882 .content {
12874 padding-left: 10%; 12883 padding-left: 10%;
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after
13115 word-wrap: break-word; 13124 word-wrap: break-word;
13116 } 13125 }
13117 </style> 13126 </style>
13118 13127
13119 <nav-bar> 13128 <nav-bar>
13120 <top-nav-menu last="{{ true }}"></top-nav-menu> 13129 <top-nav-menu last="{{ true }}"></top-nav-menu>
13121 <nav-refresh callback="{{ refresh }}"></nav-refresh> 13130 <nav-refresh callback="{{ refresh }}"></nav-refresh>
13122 </nav-bar> 13131 </nav-bar>
13123 13132
13124 <div class="content"> 13133 <div class="content">
13125 <h1>Process</h1> 13134 <h1>Random Access Files</h1>
13126 13135
13127 <br> 13136 <br>
13128 13137
13129 <div class="memberList"> 13138 <ul class="list-group">
13130 <div class="memberItem"> 13139 <template repeat="{{ file in list['members'] }}">
13131 <div class="memberName">Path</div> 13140 <li class="list-group-item">
13132 <div class="memberValue">{{ process['name'] }}</div> 13141 <io-random-access-file-ref ref="{{ file }}"></io-random-access-file- ref>
13133 </div> 13142 </li>
13134 <div class="memberItem">
13135 <div class="memberName">Pid</div>
13136 <div class="memberValue">{{ process['pid'] }}</div>
13137 </div>
13138 <div class="memberItem">
13139 <div class="memberName">Arguments</div>
13140 <div class="memberValue">{{ process['arguments'] }}</div>
13141 </div>
13142 <div class="memberItem">
13143 <div class="memberName">Started</div>
13144 <div class="memberValue">{{ process['started'] }}</div>
13145 </div>
13146 <div class="memberItem">
13147 <div class="memberName">Working Directory</div>
13148 <div class="memberValue">{{ process['workingDirectory'] }}</div>
13149 </div>
13150 <template if="{{ process['stdin'] != null }}">
13151 <div class="memberItem">
13152 <div class="memberName">stdin</div>
13153 <div class="memberValue">
13154 <io-socket-ref ref="{{ process['stdin'] }}"></io-socket-ref>
13155 </div>
13156 </div>
13157 </template> 13143 </template>
13158 <template if="{{ process['stdout'] != null }}"> 13144 </ul>
13159 <div class="memberItem">
13160 <div class="memberName">stdout</div>
13161 <div class="memberValue">
13162 <io-socket-ref ref="{{ process['stdout'] }}"></io-socket-ref>
13163 </div>
13164 </div>
13165 </template>
13166 <template if="{{ process['stderr'] != null }}">
13167 <div class="memberItem">
13168 <div class="memberName">stderr</div>
13169 <div class="memberValue">
13170 <io-socket-ref ref="{{ process['stderr'] }}"></io-socket-ref>
13171 </div>
13172 </div>
13173 </template>
13174 </div>
13175
13176 <br>
13177
13178 <h2>Environment</h2>
13179 <div class="well">
13180 <div class="monospace break-wrap">
13181 <template repeat="{{ variable in process['environment'] }}">
13182 {{ variable }}
13183 <br>
13184 </template>
13185 </div>
13186 </div>
13187 </div> 13145 </div>
13188 <br> 13146 <br>
13189 <hr> 13147 <hr>
13190 </template> 13148 </template>
13191 </polymer-element> 13149 </polymer-element>
13192 13150
13193 13151 <polymer-element name="io-random-access-file-view" extends="observatory-element" >
13194 13152 <template>
13195 13153 <style>/* Global styles */
13196 <polymer-element name="isolate-ref" extends="service-ref">
13197 <template><style>
13198 /* Global styles */
13199 * { 13154 * {
13200 margin: 0; 13155 margin: 0;
13201 padding: 0; 13156 padding: 0;
13202 font: 400 14px 'Montserrat', sans-serif; 13157 font: 400 14px 'Montserrat', sans-serif;
13203 color: #333; 13158 color: #333;
13204 box-sizing: border-box; 13159 box-sizing: border-box;
13205 } 13160 }
13206 13161
13207 .content { 13162 .content {
13208 padding-left: 10%; 13163 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
13442 background-color: #f5f5f5; 13397 background-color: #f5f5f5;
13443 border: 1px solid #e3e3e3; 13398 border: 1px solid #e3e3e3;
13444 border-radius: 4px; 13399 border-radius: 4px;
13445 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 13400 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
13446 } 13401 }
13447 13402
13448 .break-wrap { 13403 .break-wrap {
13449 word-wrap: break-word; 13404 word-wrap: break-word;
13450 } 13405 }
13451 </style> 13406 </style>
13452 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a> 13407
13453 </template> 13408 <nav-bar>
13409 <top-nav-menu last="{{ true }}"></top-nav-menu>
13410 <nav-refresh callback="{{ refresh }}"></nav-refresh>
13411 </nav-bar>
13412
13413 <div class="content">
13414 <h1>Random Access File</h1>
13415
13416 <br>
13417
13418 <div class="memberList">
13419 <div class="memberItem">
13420 <div class="memberName">Path</div>
13421 <div class="memberValue">{{ file['name'] }}</div>
13422 </div>
13423 <div class="memberItem">
13424 <div class="memberName">Pending Operation</div>
13425 <div class="memberValue">{{ file['asyncDispatched'] }}</div>
13426 </div>
13427 <div class="memberItem">
13428 <div class="memberName">File Descriptor</div>
13429 <div class="memberValue">{{ file['fd'] }}</div>
13430 </div>
13431 </div>
13432 </div>
13433 <br>
13434 <hr>
13435 </template>
13454 </polymer-element> 13436 </polymer-element>
13455 13437
13456 13438 <polymer-element name="io-process-list-view" extends="observatory-element">
13457
13458
13459
13460
13461
13462
13463
13464 <polymer-element name="isolate-summary" extends="observatory-element">
13465 <template> 13439 <template>
13466 <style> 13440 <style>/* Global styles */
13467 /* Global styles */
13468 * { 13441 * {
13469 margin: 0; 13442 margin: 0;
13470 padding: 0; 13443 padding: 0;
13471 font: 400 14px 'Montserrat', sans-serif; 13444 font: 400 14px 'Montserrat', sans-serif;
13472 color: #333; 13445 color: #333;
13473 box-sizing: border-box; 13446 box-sizing: border-box;
13474 } 13447 }
13475 13448
13476 .content { 13449 .content {
13477 padding-left: 10%; 13450 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
13711 background-color: #f5f5f5; 13684 background-color: #f5f5f5;
13712 border: 1px solid #e3e3e3; 13685 border: 1px solid #e3e3e3;
13713 border-radius: 4px; 13686 border-radius: 4px;
13714 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 13687 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
13715 } 13688 }
13716 13689
13717 .break-wrap { 13690 .break-wrap {
13718 word-wrap: break-word; 13691 word-wrap: break-word;
13719 } 13692 }
13720 </style> 13693 </style>
13721 <div class="flex-row"> 13694
13722 <div class="flex-item-10-percent"> 13695 <nav-bar>
13723 <img src="packages/observatory/src/elements/img/isolate_icon.png"> 13696 <top-nav-menu last="{{ true }}"></top-nav-menu>
13724 </div> 13697 <nav-refresh callback="{{ refresh }}"></nav-refresh>
13725 <div class="flex-item-10-percent"> 13698 </nav-bar>
13726 <isolate-ref ref="{{ isolate }}"></isolate-ref> 13699
13727 </div> 13700 <div class="content">
13728 <div class="flex-item-30-percent"> 13701 <h1>Processes</h1>
13729 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state> 13702
13730 </div> 13703 <br>
13731 <div class="flex-item-40-percent"> 13704
13732 <isolate-location isolate="{{ isolate }}"></isolate-location> 13705 <ul class="list-group">
13733 </div> 13706 <template repeat="{{ process in list['members'] }}">
13734 <div class="flex-item-10-percent"> 13707 <li class="list-group-item">
13735 </div> 13708 <io-process-ref ref="{{ process }}"></io-process-ref>
13709 </li>
13710 </template>
13711 </ul>
13736 </div> 13712 </div>
13737 13713 <br>
13738 <div class="flex-row"> 13714 <hr>
13739 <div class="flex-item-20-percent"></div>
13740 <div class="flex-item-60-percent">
13741 <hr>
13742 </div>
13743 <div class="flex-item-20-percent"></div>
13744 </div>
13745
13746 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
13747
13748 </template> 13715 </template>
13749 </polymer-element> 13716 </polymer-element>
13750 13717
13751 <polymer-element name="isolate-run-state" extends="observatory-element"> 13718 <polymer-element name="io-process-ref" extends="service-ref">
13752 <template> 13719 <template>
13753 <template if="{{ isolate.pauseEvent != null }}"> 13720 <style>/* Global styles */
13754 <strong>paused</strong>
13755 <action-link callback="{{ resume }}" label="resume"></action-link>
13756
13757 <action-link callback="{{ stepInto }}" label="step"></action-link>
13758 <action-link callback="{{ stepOver }}" label="step&nbsp;over"></action-lin k>
13759 <action-link callback="{{ stepOut }}" label="step&nbsp;out"></action-link>
13760 </template>
13761
13762 <template if="{{ isolate.running }}">
13763 <strong>running</strong>
13764 <action-link callback="{{ pause }}" label="pause"></action-link>
13765 </template>
13766
13767 <template if="{{ isolate.idle }}">
13768 <strong>idle</strong>
13769 <action-link callback="{{ pause }}" label="pause"></action-link>
13770 </template>
13771
13772 <template if="{{ isolate.loading }}">
13773 <strong>loading...</strong>
13774 </template>
13775 </template>
13776 </polymer-element>
13777
13778 <polymer-element name="isolate-location" extends="observatory-element">
13779 <template>
13780 <template if="{{ isolate.pauseEvent != null }}">
13781 <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}">
13782 at isolate start
13783 </template>
13784
13785 <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}">
13786 at isolate exit
13787 </template>
13788
13789 <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' ||
13790 isolate.pauseEvent.eventType == 'BreakpointReached' ||
13791 isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
13792 <template if="{{ isolate.pauseEvent.breakpoint != null }}">
13793 by breakpoint
13794 </template>
13795 <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
13796 by exception
13797 </template>
13798 at
13799 <function-ref ref="{{ isolate.topFrame['function'] }}">
13800 </function-ref>
13801 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
13802 </template>
13803 </template>
13804
13805 <template if="{{ isolate.running }}">
13806 at
13807 <function-ref ref="{{ isolate.topFrame['function'] }}">
13808 </function-ref>
13809 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFra me['tokenPos'] }}"></script-ref>)
13810 </template>
13811
13812 </template>
13813 </polymer-element>
13814
13815 <polymer-element name="isolate-shared-summary" extends="observatory-element">
13816 <template>
13817 <style>
13818 .errorBox {
13819 background-color: #f5f5f5;
13820 border: 1px solid #ccc;
13821 padding: 10px;
13822 font-family: consolas, courier, monospace;
13823 font-size: 1em;
13824 line-height: 1.2em;
13825 white-space: pre;
13826 }
13827 </style>
13828 <style>
13829 /* Global styles */
13830 * { 13721 * {
13831 margin: 0; 13722 margin: 0;
13832 padding: 0; 13723 padding: 0;
13833 font: 400 14px 'Montserrat', sans-serif; 13724 font: 400 14px 'Montserrat', sans-serif;
13834 color: #333; 13725 color: #333;
13835 box-sizing: border-box; 13726 box-sizing: border-box;
13836 } 13727 }
13837 13728
13838 .content { 13729 .content {
13839 padding-left: 10%; 13730 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
14073 background-color: #f5f5f5; 13964 background-color: #f5f5f5;
14074 border: 1px solid #e3e3e3; 13965 border: 1px solid #e3e3e3;
14075 border-radius: 4px; 13966 border-radius: 4px;
14076 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 13967 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
14077 } 13968 }
14078 13969
14079 .break-wrap { 13970 .break-wrap {
14080 word-wrap: break-word; 13971 word-wrap: break-word;
14081 } 13972 }
14082 </style> 13973 </style>
14083 <template if="{{ isolate.error != null }}"> 13974 <template if="{{ small }}">
14084 <div class="content-centered"> 13975 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
14085 <pre class="errorBox">{{ isolate.error.message }}</pre>
14086 <br>
14087 </div>
14088 </template> 13976 </template>
14089 <div class="flex-row"> 13977 <template if="{{ !small }}">
14090 <div class="flex-item-10-percent"> 13978 <a on-click="{{ goto }}" _href="{{ url }}">({{ ref['pid'] }}) {{ name }} { { ref['arguments'] }}</a>
14091 </div> 13979 </template>
14092 <div class="flex-item-40-percent">
14093 <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-count er-chart>
14094 </div>
14095 <div class="flex-item-40-percent">
14096 <div class="memberList">
14097 <div class="memberItem">
14098 <div class="memberName">new heap</div>
14099 <div class="memberValue">
14100 {{ isolate.newSpace.used | formatSize }}
14101 of
14102 {{ isolate.newSpace.capacity | formatSize }}
14103 </div>
14104 </div>
14105 <div class="memberItem">
14106 <div class="memberName">old heap</div>
14107 <div class="memberValue">
14108 {{ isolate.oldSpace.used | formatSize }}
14109 of
14110 {{ isolate.oldSpace.capacity | formatSize }}
14111 </div>
14112 </div>
14113 </div>
14114 <br>
14115 <div class="memberItem">
14116 <div class="memberValue">
14117 See <a on-click="{{ goto }}" _href="{{ gotoLink('/class-tree' + isol ate.link) }}">class hierarchy</a>
14118 </div>
14119 </div>
14120 <div class="memberItem">
14121 <div class="memberValue">
14122 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('stacktrace')) }}">stack trace</a>
14123 </div>
14124 </div>
14125 <div class="memberItem">
14126 <div class="memberValue">
14127 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('profile')) }}">cpu profile</a>
14128 </div>
14129 </div>
14130 <div class="memberItem">
14131 <div class="memberValue">
14132 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('allocationprofile')) }}">allocation profile</a>
14133 </div>
14134 </div>
14135 <div class="memberItem">
14136 <div class="memberValue">
14137 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('heapmap')) }}">heap map</a>
14138 </div>
14139 </div>
14140 <div class="memberItem">
14141 <div class="memberValue">
14142 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('metrics')) }}">metrics</a>
14143 </div>
14144 </div>
14145 <!-- Temporarily disabled until UI for dart:io is acceptable.
14146 <template if="{{ isolate.ioEnabled }}">
14147 <div class="memberItem">
14148 <div class="memberValue">
14149 See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLin k('io')) }}">dart:io</a>
14150 </div>
14151 </div>
14152 </template>
14153 -->
14154 </div>
14155 <div class="flex-item-10-percent">
14156 </div>
14157 </div>
14158 </template> 13980 </template>
14159 </polymer-element> 13981 </polymer-element>
14160 13982
14161 <polymer-element name="isolate-counter-chart" extends="observatory-element"> 13983 <polymer-element name="io-process-view" extends="observatory-element">
14162 <template> 13984 <template>
14163 <div id="counterPieChart" style="height: 200px"></div> 13985 <style>/* Global styles */
14164 </template>
14165 </polymer-element>
14166
14167
14168
14169
14170
14171
14172
14173
14174
14175
14176
14177
14178
14179
14180 <polymer-element name="isolate-view" extends="observatory-element">
14181 <template>
14182 <style>
14183 /* Global styles */
14184 * { 13986 * {
14185 margin: 0; 13987 margin: 0;
14186 padding: 0; 13988 padding: 0;
14187 font: 400 14px 'Montserrat', sans-serif; 13989 font: 400 14px 'Montserrat', sans-serif;
14188 color: #333; 13990 color: #333;
14189 box-sizing: border-box; 13991 box-sizing: border-box;
14190 } 13992 }
14191 13993
14192 .content { 13994 .content {
14193 padding-left: 10%; 13995 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
14427 background-color: #f5f5f5; 14229 background-color: #f5f5f5;
14428 border: 1px solid #e3e3e3; 14230 border: 1px solid #e3e3e3;
14429 border-radius: 4px; 14231 border-radius: 4px;
14430 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 14232 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
14431 } 14233 }
14432 14234
14433 .break-wrap { 14235 .break-wrap {
14434 word-wrap: break-word; 14236 word-wrap: break-word;
14435 } 14237 }
14436 </style> 14238 </style>
14437 <style>
14438 .sourceInset {
14439 padding-left: 15%;
14440 padding-right: 15%;
14441 }
14442 .miniProfileChart {
14443 width: 80%;
14444 }
14445 </style>
14446 14239
14447 <nav-bar> 14240 <nav-bar>
14448 <top-nav-menu></top-nav-menu> 14241 <top-nav-menu last="{{ true }}"></top-nav-menu>
14449 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
14450 </isolate-nav-menu>
14451 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
14452 <nav-refresh callback="{{ refresh }}"></nav-refresh> 14242 <nav-refresh callback="{{ refresh }}"></nav-refresh>
14453 <nav-control></nav-control>
14454 </nav-bar> 14243 </nav-bar>
14455 14244
14456 <div class="content"> 14245 <div class="content">
14457 <h1>isolate '{{ isolate.name }}'</h1> 14246 <h1>Process</h1>
14458 </div>
14459 14247
14460 <br> 14248 <br>
14461 <div class="flex-row"> 14249
14462 <div class="flex-item-10-percent"> 14250 <div class="memberList">
14251 <div class="memberItem">
14252 <div class="memberName">Path</div>
14253 <div class="memberValue">{{ process['name'] }}</div>
14254 </div>
14255 <div class="memberItem">
14256 <div class="memberName">Pid</div>
14257 <div class="memberValue">{{ process['pid'] }}</div>
14258 </div>
14259 <div class="memberItem">
14260 <div class="memberName">Arguments</div>
14261 <div class="memberValue">{{ process['arguments'] }}</div>
14262 </div>
14263 <div class="memberItem">
14264 <div class="memberName">Started</div>
14265 <div class="memberValue">{{ process['started'] }}</div>
14266 </div>
14267 <div class="memberItem">
14268 <div class="memberName">Working Directory</div>
14269 <div class="memberValue">{{ process['workingDirectory'] }}</div>
14270 </div>
14271 <template if="{{ process['stdin'] != null }}">
14272 <div class="memberItem">
14273 <div class="memberName">stdin</div>
14274 <div class="memberValue">
14275 <io-socket-ref ref="{{ process['stdin'] }}"></io-socket-ref>
14276 </div>
14277 </div>
14278 </template>
14279 <template if="{{ process['stdout'] != null }}">
14280 <div class="memberItem">
14281 <div class="memberName">stdout</div>
14282 <div class="memberValue">
14283 <io-socket-ref ref="{{ process['stdout'] }}"></io-socket-ref>
14284 </div>
14285 </div>
14286 </template>
14287 <template if="{{ process['stderr'] != null }}">
14288 <div class="memberItem">
14289 <div class="memberName">stderr</div>
14290 <div class="memberValue">
14291 <io-socket-ref ref="{{ process['stderr'] }}"></io-socket-ref>
14292 </div>
14293 </div>
14294 </template>
14463 </div> 14295 </div>
14464 <div class="flex-item-30-percent"> 14296
14465 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state> 14297 <br>
14466 </div> 14298
14467 <div class="flex-item-50-percent"> 14299 <h2>Environment</h2>
14468 <isolate-location isolate="{{ isolate }}"></isolate-location> 14300 <div class="well">
14469 </div> 14301 <div class="monospace break-wrap">
14470 <div class="flex-item-10-percent"> 14302 <template repeat="{{ variable in process['environment'] }}">
14303 {{ variable }}
14304 <br>
14305 </template>
14306 </div>
14471 </div> 14307 </div>
14472 </div> 14308 </div>
14473 <br> 14309 <br>
14474
14475 <template if="{{ isolate.topFrame != null }}">
14476 <br>
14477 <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ iso late.topFrame['tokenPos'] }}" height="200px">
14478 </script-inset>
14479 </template>
14480
14481 <div class="flex-row">
14482 <div class="flex-item-20-percent"></div>
14483 <div class="flex-item-60-percent"><hr></div>
14484 <div class="flex-item-20-percent"></div>
14485 </div>
14486
14487 <br>
14488
14489 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
14490
14491 <div class="flex-row">
14492 <div class="flex-item-20-percent"></div>
14493 <div class="flex-item-60-percent"><hr></div>
14494 <div class="flex-item-20-percent"></div>
14495 </div>
14496
14497 <div class="content-centered">
14498 <div class="flex-row">
14499 <div class="flex-item-50-percent">
14500 <div class="memberList">
14501 <div class="memberItem">
14502 <div class="memberName">root library</div>
14503 <div class="memberValue">
14504 <library-ref ref="{{ isolate.rootLib }}"></library-ref>
14505 </div>
14506 </div>
14507 <div class="memberItem">
14508 <template if="{{ isolate.entry != null }}">
14509 <div class="memberName">entry</div>
14510 <div class="memberValue">
14511 <function-ref ref="{{ isolate.entry }}"></function-ref>
14512 </div>
14513 </template>
14514 </div>
14515 <div class="memberItem">
14516 <div class="memberName">isolate id</div>
14517 <div class="memberValue">{{ isolate.mainPort }}</div>
14518 </div>
14519 </div>
14520 </div>
14521 <div class="flex-item-50-percent">
14522 <div class="memberItem">
14523 <div class="memberValue">
14524 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLi nk('debug/breakpoints')) }}">breakpoints</a>
14525 </div>
14526 </div>
14527 </div>
14528 </div>
14529 </div>
14530
14531 <hr> 14310 <hr>
14532
14533 <div class="content">
14534 libraries ({{ isolate.libraries.length }})
14535 <curly-block expand="{{ isolate.libraries.length <= 8 }}">
14536 <div class="memberList">
14537 <template repeat="{{ lib in isolate.libraries }}">
14538 <div class="memberItem">
14539 <div class="memberName">
14540 <library-ref ref="{{ lib }}"></library-ref>
14541 </div>
14542 </div>
14543 </template>
14544 </div>
14545 </curly-block>
14546 </div>
14547
14548 <hr>
14549
14550 <div class="content">
14551 <div id="tagProfileChart" class="miniProfileChart" style="height: 600px">< /div>
14552 </div>
14553
14554 <hr>
14555
14556 <div class="content">
14557 <eval-box callback="{{ eval }}"></eval-box>
14558 </div>
14559 <br><br><br><br>
14560 <br><br><br><br>
14561 </template> 14311 </template>
14562 </polymer-element> 14312 </polymer-element>
14563 14313
14564 14314
14565 14315
14566 14316
14567 14317
14568 14318 <polymer-element name="isolate-ref" extends="service-ref">
14569 14319 <template><style>/* Global styles */
14570
14571
14572
14573
14574
14575
14576
14577
14578
14579
14580
14581
14582
14583
14584
14585 <polymer-element name="inbound-reference" extends="service-ref">
14586 <template>
14587 <style>
14588 /* Global styles */
14589 * { 14320 * {
14590 margin: 0; 14321 margin: 0;
14591 padding: 0; 14322 padding: 0;
14592 font: 400 14px 'Montserrat', sans-serif; 14323 font: 400 14px 'Montserrat', sans-serif;
14593 color: #333; 14324 color: #333;
14594 box-sizing: border-box; 14325 box-sizing: border-box;
14595 } 14326 }
14596 14327
14597 .content { 14328 .content {
14598 padding-left: 10%; 14329 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
14832 background-color: #f5f5f5; 14563 background-color: #f5f5f5;
14833 border: 1px solid #e3e3e3; 14564 border: 1px solid #e3e3e3;
14834 border-radius: 4px; 14565 border-radius: 4px;
14835 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 14566 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
14836 } 14567 }
14837 14568
14838 .break-wrap { 14569 .break-wrap {
14839 word-wrap: break-word; 14570 word-wrap: break-word;
14840 } 14571 }
14841 </style> 14572 </style>
14842 <div> 14573 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
14843 from <any-service-ref ref="{{ source }}"></any-service-ref> 14574 </template>
14844 <template if="{{ slotIsArrayIndex }}">via [{{ slot }}]</template>
14845 <template if="{{ slotIsField }}">via <field-ref ref="{{ slot }}"></field-r ef></template>
14846
14847 <curly-block callback="{{ expander() }}">
14848 <div class="memberList">
14849 <div class="memberItem">
14850 <div class="memberName">
14851 <template repeat="{{ reference in inboundReferences] }}">
14852 <inbound-reference ref="{{ reference }}"></inbound-reference>
14853 </template>
14854 </div>
14855 </div>
14856 </div>
14857 </curly-block>
14858 </div>
14859 </template>
14860 </polymer-element> 14575 </polymer-element>
14861 14576
14862 14577
14863 14578
14864 14579
14865 14580
14866 14581
14867 14582
14868 14583
14869 14584
14870 14585
14871 14586 <polymer-element name="isolate-summary" extends="observatory-element">
14872
14873
14874 <polymer-element name="object-common" extends="observatory-element">
14875 <template> 14587 <template>
14876 <style> 14588 <style>/* Global styles */
14877 /* Global styles */
14878 * { 14589 * {
14879 margin: 0; 14590 margin: 0;
14880 padding: 0; 14591 padding: 0;
14881 font: 400 14px 'Montserrat', sans-serif; 14592 font: 400 14px 'Montserrat', sans-serif;
14882 color: #333; 14593 color: #333;
14883 box-sizing: border-box; 14594 box-sizing: border-box;
14884 } 14595 }
14885 14596
14886 .content { 14597 .content {
14887 padding-left: 10%; 14598 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
15121 background-color: #f5f5f5; 14832 background-color: #f5f5f5;
15122 border: 1px solid #e3e3e3; 14833 border: 1px solid #e3e3e3;
15123 border-radius: 4px; 14834 border-radius: 4px;
15124 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 14835 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
15125 } 14836 }
15126 14837
15127 .break-wrap { 14838 .break-wrap {
15128 word-wrap: break-word; 14839 word-wrap: break-word;
15129 } 14840 }
15130 </style> 14841 </style>
15131 <div class="memberList"> 14842 <div class="flex-row">
14843 <div class="flex-item-10-percent">
14844 <img src="packages/observatory/src/elements/img/isolate_icon.png">
14845 </div>
14846 <div class="flex-item-10-percent">
14847 <isolate-ref ref="{{ isolate }}"></isolate-ref>
14848 </div>
14849 <div class="flex-item-30-percent">
14850 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
14851 </div>
14852 <div class="flex-item-40-percent">
14853 <isolate-location isolate="{{ isolate }}"></isolate-location>
14854 </div>
14855 <div class="flex-item-10-percent">
14856 </div>
14857 </div>
15132 14858
15133 <div class="memberItem"> 14859 <div class="flex-row">
15134 <div class="memberName">class</div> 14860 <div class="flex-item-20-percent"></div>
15135 <div class="memberValue"> 14861 <div class="flex-item-60-percent">
15136 <class-ref ref="{{ object.clazz }}"></class-ref> 14862 <hr>
15137 </div>
15138 </div> 14863 </div>
14864 <div class="flex-item-20-percent"></div>
14865 </div>
15139 14866
15140 <template if="{{ object.size != null }}"> 14867 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
15141 <div class="memberItem" title="Space for this object in memory">
15142 <div class="memberName">size</div>
15143 <div class="memberValue">{{ object.size | formatSize }}</div>
15144 </div>
15145 </template>
15146 14868
15147 <template if="{{ object.size == null }}">
15148 <div class="memberItem" title="Space for this object in memory">
15149 <div class="memberName">size</div>
15150 <div class="memberValue">0</div>
15151 </div>
15152 </template>
15153
15154 <div class="memberItem" title="Space that would be reclaimed if references to this object were replaced with null">
15155 <div class="memberName">retained size</div>
15156 <div class="memberValue">
15157 <template if="{{ retainedBytes == null }}">
15158 <eval-link callback="{{ retainedSize }}" label="[calculate]">
15159 </eval-link>
15160 </template>
15161 <template if="{{ retainedBytes != null }}">
15162 {{ retainedBytes | formatSize }}
15163 </template>
15164 </div>
15165 </div>
15166
15167 <div class="memberItem">
15168 <div class="memberName">retaining path</div>
15169 <div class="memberValue">
15170 <template if="{{ path == null }}">
15171 <eval-link callback="{{ retainingPath }}" label="[find]" expr="10">
15172 </eval-link>
15173 </template>
15174 <template if="{{ path != null }}">
15175 <template repeat="{{ element in path['elements'] }}">
15176 <div class="memberItem">
15177 <div class="memberName">[{{ element['index']}}]</div>
15178 <div class="memberValue">
15179 <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
15180 <template if="{{ element['parentField'] != null }}">
15181 in <field-ref ref="{{ element['parentField'] }}"></field-ref> of
15182 </template>
15183 <template if="{{ element['parentListIndex'] != null }}">
15184 in [{{ element['parentListIndex'] }}] of
15185 </template>
15186 </div>
15187 </div>
15188 </template>
15189 <template if="{{ path['length'] > path['elements'].length }}">
15190 showing {{ path['elements'].length }} of {{ path['length'] }}
15191 <eval-link callback="{{ retainingPath }}" label="[find more]" expr ="{{ path['elements'].length * 2 }}">
15192 </eval-link>
15193 </template>
15194 </template>
15195 </div>
15196 </div>
15197
15198 <div class="memberItem" title="Objects which directly reference this objec t">
15199 <div class="memberName">inbound references</div>
15200 <div class="memberValue">
15201 <template if="{{ inboundReferences == null }}">
15202 <eval-link callback="{{ fetchInboundReferences }}" label="[find]" ex pr="100">
15203 </eval-link>
15204 </template>
15205 <template if="{{ inboundReferences != null }}">
15206 <template repeat="{{ reference in inboundReferences['references'] }} ">
15207 <inbound-reference ref="{{ reference }}"></inbound-reference>
15208 </template>
15209 </template>
15210 </div>
15211 </div>
15212
15213 </div>
15214 </template> 14869 </template>
15215 </polymer-element> 14870 </polymer-element>
15216 14871
14872 <polymer-element name="isolate-run-state" extends="observatory-element">
14873 <template>
14874 <template if="{{ isolate.pauseEvent != null }}">
14875 <strong>paused</strong>
14876 <action-link callback="{{ resume }}" label="resume"></action-link>
15217 14877
14878 <action-link callback="{{ stepInto }}" label="step"></action-link>
14879 <action-link callback="{{ stepOver }}" label="step&nbsp;over"></action-lin k>
14880 <action-link callback="{{ stepOut }}" label="step&nbsp;out"></action-link>
14881 </template>
15218 14882
14883 <template if="{{ isolate.running }}">
14884 <strong>running</strong>
14885 <action-link callback="{{ pause }}" label="pause"></action-link>
14886 </template>
15219 14887
14888 <template if="{{ isolate.idle }}">
14889 <strong>idle</strong>
14890 <action-link callback="{{ pause }}" label="pause"></action-link>
14891 </template>
15220 14892
14893 <template if="{{ isolate.loading }}">
14894 <strong>loading...</strong>
14895 </template>
14896 </template>
14897 </polymer-element>
15221 14898
14899 <polymer-element name="isolate-location" extends="observatory-element">
14900 <template>
14901 <template if="{{ isolate.pauseEvent != null }}">
14902 <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}">
14903 at isolate start
14904 </template>
15222 14905
15223 <polymer-element name="context-ref" extends="service-ref"> 14906 <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}">
14907 at isolate exit
14908 </template>
14909
14910 <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' ||
14911 isolate.pauseEvent.eventType == 'BreakpointReached' ||
14912 isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
14913 <template if="{{ isolate.pauseEvent.breakpoint != null }}">
14914 by breakpoint
14915 </template>
14916 <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
14917 by exception
14918 </template>
14919 at
14920 <function-ref ref="{{ isolate.topFrame['function'] }}">
14921 </function-ref>
14922 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
14923 </template>
14924 </template>
14925
14926 <template if="{{ isolate.running }}">
14927 at
14928 <function-ref ref="{{ isolate.topFrame['function'] }}">
14929 </function-ref>
14930 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFra me['tokenPos'] }}"></script-ref>)
14931 </template>
14932
14933 </template>
14934 </polymer-element>
14935
14936 <polymer-element name="isolate-shared-summary" extends="observatory-element">
15224 <template> 14937 <template>
15225 <style> 14938 <style>
15226 /* Global styles */ 14939 .errorBox {
14940 background-color: #f5f5f5;
14941 border: 1px solid #ccc;
14942 padding: 10px;
14943 font-family: consolas, courier, monospace;
14944 font-size: 1em;
14945 line-height: 1.2em;
14946 white-space: pre;
14947 }
14948 </style>
14949 <style>/* Global styles */
15227 * { 14950 * {
15228 margin: 0; 14951 margin: 0;
15229 padding: 0; 14952 padding: 0;
15230 font: 400 14px 'Montserrat', sans-serif; 14953 font: 400 14px 'Montserrat', sans-serif;
15231 color: #333; 14954 color: #333;
15232 box-sizing: border-box; 14955 box-sizing: border-box;
15233 } 14956 }
15234 14957
15235 .content { 14958 .content {
15236 padding-left: 10%; 14959 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
15470 background-color: #f5f5f5; 15193 background-color: #f5f5f5;
15471 border: 1px solid #e3e3e3; 15194 border: 1px solid #e3e3e3;
15472 border-radius: 4px; 15195 border-radius: 4px;
15473 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 15196 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
15474 } 15197 }
15475 15198
15476 .break-wrap { 15199 .break-wrap {
15477 word-wrap: break-word; 15200 word-wrap: break-word;
15478 } 15201 }
15479 </style> 15202 </style>
15480 <span> 15203 <template if="{{ isolate.error != null }}">
15481 <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a> 15204 <div class="content-centered">
15482 <curly-block callback="{{ expander() }}"> 15205 <pre class="errorBox">{{ isolate.error.message }}</pre>
15206 <br>
15207 </div>
15208 </template>
15209 <div class="flex-row">
15210 <div class="flex-item-10-percent">
15211 </div>
15212 <div class="flex-item-40-percent">
15213 <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-count er-chart>
15214 </div>
15215 <div class="flex-item-40-percent">
15483 <div class="memberList"> 15216 <div class="memberList">
15484 <div class="memberItem"> 15217 <div class="memberItem">
15485 <div class="memberName">parent</div> 15218 <div class="memberName">new heap</div>
15486 <div class="memberValue"> 15219 <div class="memberValue">
15487 <any-service-ref ref="{{ ref.parentContext }}"></any-service-ref> 15220 {{ isolate.newSpace.used | formatSize }}
15221 of
15222 {{ isolate.newSpace.capacity | formatSize }}
15488 </div> 15223 </div>
15489 </div> 15224 </div>
15490 <template repeat="{{ variable in ref.variables }}"> 15225 <div class="memberItem">
15491 <div class="memberItem"> 15226 <div class="memberName">old heap</div>
15492 <div class="memberName">[{{ variable['index']}}]</div> 15227 <div class="memberValue">
15493 <div class="memberValue"> 15228 {{ isolate.oldSpace.used | formatSize }}
15494 <any-service-ref ref="{{ variable['value'] }}"></any-service-ref > 15229 of
15495 </div> 15230 {{ isolate.oldSpace.capacity | formatSize }}
15496 </div> 15231 </div>
15497 </template> 15232 </div>
15498 </div> 15233 </div>
15499 </curly-block> 15234 <br>
15500 </span> 15235 <div class="memberItem">
15236 <div class="memberValue">
15237 See <a on-click="{{ goto }}" _href="{{ gotoLink('/debugger' + isolat e.link) }}">debugger</a>
15238 </div>
15239 </div>
15240 <div class="memberItem">
15241 <div class="memberValue">
15242 See <a on-click="{{ goto }}" _href="{{ gotoLink('/class-tree' + isol ate.link) }}">class hierarchy</a>
15243 </div>
15244 </div>
15245 <div class="memberItem">
15246 <div class="memberValue">
15247 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('profile')) }}">cpu profile</a>
15248 </div>
15249 </div>
15250 <div class="memberItem">
15251 <div class="memberValue">
15252 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('allocationprofile')) }}">allocation profile</a>
15253 </div>
15254 </div>
15255 <div class="memberItem">
15256 <div class="memberValue">
15257 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('heapmap')) }}">heap map</a>
15258 </div>
15259 </div>
15260 <div class="memberItem">
15261 <div class="memberValue">
15262 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('metrics')) }}">metrics</a>
15263 </div>
15264 </div>
15265 <!-- Temporarily disabled until UI for dart:io is acceptable.
15266 <template if="{{ isolate.ioEnabled }}">
15267 <div class="memberItem">
15268 <div class="memberValue">
15269 See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLin k('io')) }}">dart:io</a>
15270 </div>
15271 </div>
15272 </template>
15273 -->
15274 </div>
15275 <div class="flex-item-10-percent">
15276 </div>
15277 </div>
15278 </template>
15279 </polymer-element>
15280
15281 <polymer-element name="isolate-counter-chart" extends="observatory-element">
15282 <template>
15283 <div id="counterPieChart" style="height: 200px"></div>
15501 </template> 15284 </template>
15502 </polymer-element> 15285 </polymer-element>
15503 15286
15504 15287
15505 <polymer-element name="instance-view" extends="observatory-element"> 15288
15289
15290
15291
15292
15293
15294
15295
15296
15297
15298
15299
15300
15301 <polymer-element name="isolate-view" extends="observatory-element">
15506 <template> 15302 <template>
15507 <style> 15303 <style>/* Global styles */
15508 /* Global styles */
15509 * { 15304 * {
15510 margin: 0; 15305 margin: 0;
15511 padding: 0; 15306 padding: 0;
15512 font: 400 14px 'Montserrat', sans-serif; 15307 font: 400 14px 'Montserrat', sans-serif;
15513 color: #333; 15308 color: #333;
15514 box-sizing: border-box; 15309 box-sizing: border-box;
15515 } 15310 }
15516 15311
15517 .content { 15312 .content {
15518 padding-left: 10%; 15313 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
15752 background-color: #f5f5f5; 15547 background-color: #f5f5f5;
15753 border: 1px solid #e3e3e3; 15548 border: 1px solid #e3e3e3;
15754 border-radius: 4px; 15549 border-radius: 4px;
15755 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 15550 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
15756 } 15551 }
15757 15552
15758 .break-wrap { 15553 .break-wrap {
15759 word-wrap: break-word; 15554 word-wrap: break-word;
15760 } 15555 }
15761 </style> 15556 </style>
15557 <style>
15558 .sourceInset {
15559 padding-left: 15%;
15560 padding-right: 15%;
15561 }
15562 .miniProfileChart {
15563 width: 80%;
15564 }
15565 </style>
15566
15762 <nav-bar> 15567 <nav-bar>
15763 <top-nav-menu></top-nav-menu> 15568 <top-nav-menu></top-nav-menu>
15764 <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu> 15569 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
15765 <!-- TODO(turnidge): Add library nav menu here. --> 15570 </isolate-nav-menu>
15766 <class-nav-menu cls="{{ instance.clazz }}"></class-nav-menu> 15571 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
15767 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
15768 <nav-refresh callback="{{ refresh }}"></nav-refresh> 15572 <nav-refresh callback="{{ refresh }}"></nav-refresh>
15769 <nav-control></nav-control> 15573 <nav-control></nav-control>
15770 </nav-bar> 15574 </nav-bar>
15771 15575
15772 <template if="{{ instance.isError }}"> 15576 <div class="content">
15773 <error-view error_obj="{{ instance['error'] }}"></error-view> 15577 <h1>isolate '{{ isolate.name }}'</h1>
15578 </div>
15579
15580 <br>
15581 <div class="flex-row">
15582 <div class="flex-item-10-percent">
15583 </div>
15584 <div class="flex-item-30-percent">
15585 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
15586 </div>
15587 <div class="flex-item-50-percent">
15588 <isolate-location isolate="{{ isolate }}"></isolate-location>
15589 </div>
15590 <div class="flex-item-10-percent">
15591 </div>
15592 </div>
15593 <br>
15594
15595 <template if="{{ isolate.topFrame != null }}">
15596 <br>
15597 <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ iso late.topFrame['tokenPos'] }}" height="200px">
15598 </script-inset>
15774 </template> 15599 </template>
15775 15600
15776 <template if="{{ !instance.isError }}"> 15601 <div class="flex-row">
15777 <div class="content"> 15602 <div class="flex-item-20-percent"></div>
15778 <template if="{{ instance.isAbstractType }}"> 15603 <div class="flex-item-60-percent"><hr></div>
15779 <h1>type {{ instance.name }}</h1> 15604 <div class="flex-item-20-percent"></div>
15780 </template> 15605 </div>
15781 <template if="{{ !instance.isAbstractType }}">
15782 <h1>instance of {{ instance.clazz.name }}</h1>
15783 </template>
15784 15606
15785 <object-common object="{{ instance }}"></object-common> 15607 <br>
15786 15608
15787 <div class="memberList"> 15609 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
15788 <div class="memberItem">&nbsp;</div>
15789 15610
15790 <template if="{{ instance.valueAsString != null }}"> 15611 <div class="flex-row">
15612 <div class="flex-item-20-percent"></div>
15613 <div class="flex-item-60-percent"><hr></div>
15614 <div class="flex-item-20-percent"></div>
15615 </div>
15616
15617 <div class="content-centered">
15618 <div class="flex-row">
15619 <div class="flex-item-50-percent">
15620 <div class="memberList">
15791 <div class="memberItem"> 15621 <div class="memberItem">
15792 <div class="memberName">value</div> 15622 <div class="memberName">root library</div>
15793 <div class="memberValue">{{ instance.valueAsString }}</div>
15794 </div>
15795 </template>
15796
15797 <template if="{{ instance.isString }}">
15798 <div class="memberItem">
15799 <div class="memberName">valueAsLiteral</div>
15800 <div class="memberValue"> {{ asStringLiteral(instance.valueAsStrin g, instance.valueAsStringIsTruncated) }}</div>
15801 </div>
15802 </template>
15803
15804 <template if="{{ instance.isMirrorReference }}">
15805 <div class="memberItem">
15806 <div class="memberName">referent</div>
15807 <div class="memberValue"> 15623 <div class="memberValue">
15808 <any-service-ref ref="{{ instance.referent }}"> 15624 <library-ref ref="{{ isolate.rootLib }}"></library-ref>
15809 </any-service-ref>
15810 </div>
15811 </div>
15812 </template>
15813
15814 <template if="{{ instance.typeClass != null }}">
15815 <div class="memberItem">
15816 <div class="memberName">type class</div>
15817 <div class="memberValue">
15818 <class-ref ref="{{ instance.typeClass }}">
15819 </class-ref>
15820 </div>
15821 </div>
15822 </template>
15823
15824 <template if="{{ instance.isClosure }}">
15825 <div class="memberItem">
15826 <div class="memberName">closure function</div>
15827 <div class="memberValue">
15828 <function-ref ref="{{ instance.closureFunc }}">
15829 </function-ref>
15830 </div>
15831 </div>
15832 </template>
15833 <template if="{{ instance.isClosure }}">
15834 <div class="memberItem">
15835 <div class="memberName">closure context</div>
15836 <div class="memberValue">
15837 <any-service-ref ref="{{ instance.closureCtxt }}">
15838 </any-service-ref>
15839 </div>
15840 </div>
15841 </template>
15842
15843 <template if="{{ instance.isWeakProperty }}">
15844 <div class="memberItem">
15845 <div class="memberName">key</div>
15846 <div class="memberValue">
15847 <any-service-ref ref="{{ instance.key }}">
15848 </any-service-ref>
15849 </div> 15625 </div>
15850 </div> 15626 </div>
15851 <div class="memberItem"> 15627 <div class="memberItem">
15852 <div class="memberName">value</div> 15628 <template if="{{ isolate.entry != null }}">
15853 <div class="memberValue"> 15629 <div class="memberName">entry</div>
15854 <any-service-ref ref="{{ instance.value }}"> 15630 <div class="memberValue">
15855 </any-service-ref> 15631 <function-ref ref="{{ isolate.entry }}"></function-ref>
15856 </div> 15632 </div>
15633 </template>
15857 </div> 15634 </div>
15858 </template> 15635 <div class="memberItem">
15859 15636 <div class="memberName">isolate id</div>
15637 <div class="memberValue">{{ isolate.mainPort }}</div>
15638 </div>
15639 </div>
15640 </div>
15641 <div class="flex-item-50-percent">
15860 <div class="memberItem"> 15642 <div class="memberItem">
15861 <div class="memberName">toString()</div>
15862 <div class="memberValue"> 15643 <div class="memberValue">
15863 <eval-link callback="{{ eval }}" expr="toString()"></eval-link> 15644 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLi nk('debug/breakpoints')) }}">breakpoints</a>
15864 </div> 15645 </div>
15865 </div> 15646 </div>
15866 </div> 15647 </div>
15867 </div> 15648 </div>
15649 </div>
15868 15650
15869 <hr> 15651 <hr>
15870 15652
15871 <div class="content"> 15653 <div class="content">
15872 <template if="{{ instance.nativeFields.isNotEmpty }}"> 15654 libraries ({{ isolate.libraries.length }})
15873 native fields ({{ instance.nativeFields.length }}) 15655 <curly-block expand="{{ isolate.libraries.length <= 8 }}">
15874 <curly-block expand="{{ instance.nativeFields.length <= 8 }}"> 15656 <div class="memberList">
15875 <div class="memberList"> 15657 <template repeat="{{ lib in isolate.libraries }}">
15876 <template repeat="{{ field in instance.nativeFields }}"> 15658 <div class="memberItem">
15877 <div class="memberItem"> 15659 <div class="memberName">
15878 <div class="memberName">[{{ field['index']}}]</div> 15660 <library-ref ref="{{ lib }}"></library-ref>
15879 <div class="memberValue">[{{ field['value']}}]</div> 15661 </div>
15880 </div>
15881 </template>
15882 </div> 15662 </div>
15883 </curly-block><br><br> 15663 </template>
15884 </template> 15664 </div>
15665 </curly-block>
15666 </div>
15885 15667
15886 <template if="{{ instance.fields.isNotEmpty }}"> 15668 <hr>
15887 fields ({{ instance.fields.length }})
15888 <curly-block expand="{{ instance.fields.length <= 8 }}">
15889 <div class="memberList">
15890 <template repeat="{{ field in instance.fields }}">
15891 <div class="memberItem">
15892 <div class="memberName">
15893 <field-ref ref="{{ field['decl'] }}"></field-ref>
15894 </div>
15895 <div class="memberValue">
15896 <any-service-ref ref="{{ field.value }}"></any-service-ref>
15897 </div>
15898 </div>
15899 </template>
15900 </div>
15901 </curly-block><br><br>
15902 </template>
15903 15669
15904 <template if="{{ instance.elements.isNotEmpty }}"> 15670 <div class="content">
15905 elements ({{ instance.elements.length }}) 15671 <div id="tagProfileChart" class="miniProfileChart" style="height: 600px">< /div>
15906 <curly-block expand="{{ instance.elements.length <= 8 }}"> 15672 </div>
15907 <div class="memberList">
15908 <template repeat="{{ element in instance.elements }}">
15909 <div class="memberItem">
15910 <div class="memberName">[{{ element['index']}}]</div>
15911 <div class="memberValue">
15912 <any-service-ref ref="{{ element['value'] }}"></any-service- ref>
15913 </div>
15914 </div>
15915 </template>
15916 </div>
15917 </curly-block><br><br>
15918 </template>
15919 </div>
15920 15673
15921 <hr> 15674 <hr>
15922 15675
15923 <div class="content"> 15676 <div class="content">
15924 <eval-box callback="{{ eval }}"></eval-box> 15677 <eval-box callback="{{ eval }}"></eval-box>
15925 </div> 15678 </div>
15926 15679 <br><br><br><br>
15927 <br><br><br><br> 15680 <br><br><br><br>
15928 <br><br><br><br>
15929
15930 </template>
15931 </template> 15681 </template>
15932 </polymer-element> 15682 </polymer-element>
15933 15683
15934 15684
15935 15685
15936 15686
15937 15687
15938 <polymer-element name="json-view" extends="observatory-element">
15939 <template>
15940 <nav-bar>
15941 <top-nav-menu last="{{ true }}"></top-nav-menu>
15942 </nav-bar>
15943 <pre>{{ mapAsString }}</pre>
15944 </template>
15945 </polymer-element>
15946
15947
15948
15949 15688
15950 15689
15690
15951 15691
15952 15692
15953 15693
15954 15694
15955 15695
15956 15696
15957 15697
15958 15698
15959 15699
15960 <polymer-element name="library-view" extends="observatory-element"> 15700 <polymer-element name="inbound-reference" extends="service-ref">
15961 <template> 15701 <template>
15962 <style> 15702 <style>/* Global styles */
15963 /* Global styles */
15964 * { 15703 * {
15965 margin: 0; 15704 margin: 0;
15966 padding: 0; 15705 padding: 0;
15967 font: 400 14px 'Montserrat', sans-serif; 15706 font: 400 14px 'Montserrat', sans-serif;
15968 color: #333; 15707 color: #333;
15969 box-sizing: border-box; 15708 box-sizing: border-box;
15970 } 15709 }
15971 15710
15972 .content { 15711 .content {
15973 padding-left: 10%; 15712 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
16207 background-color: #f5f5f5; 15946 background-color: #f5f5f5;
16208 border: 1px solid #e3e3e3; 15947 border: 1px solid #e3e3e3;
16209 border-radius: 4px; 15948 border-radius: 4px;
16210 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 15949 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
16211 } 15950 }
16212 15951
16213 .break-wrap { 15952 .break-wrap {
16214 word-wrap: break-word; 15953 word-wrap: break-word;
16215 } 15954 }
16216 </style> 15955 </style>
15956 <div>
15957 from <any-service-ref ref="{{ source }}"></any-service-ref>
15958 <template if="{{ slotIsArrayIndex }}">via [{{ slot }}]</template>
15959 <template if="{{ slotIsField }}">via <field-ref ref="{{ slot }}"></field-r ef></template>
16217 15960
16218 <nav-bar> 15961 <curly-block callback="{{ expander() }}">
16219 <top-nav-menu></top-nav-menu> 15962 <div class="memberList">
16220 <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu> 15963 <div class="memberItem">
16221 <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav- menu> 15964 <div class="memberName">
16222 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh> 15965 <template repeat="{{ reference in inboundReferences] }}">
16223 <nav-refresh callback="{{ refresh }}"></nav-refresh> 15966 <inbound-reference ref="{{ reference }}"></inbound-reference>
16224 <nav-control></nav-control> 15967 </template>
16225 </nav-bar> 15968 </div>
16226 15969 </div>
16227 <div class="content">
16228 <h1>
16229 <!-- TODO(turnidge): Handle unnamed libraries -->
16230 library {{ library.name }}
16231 </h1>
16232 <div class="memberList">
16233 <div class="memberItem">
16234 <div class="memberName">url</div>
16235 <div class="memberValue">{{ library.url }}</div>
16236 </div> 15970 </div>
16237 <template if="{{ library.name != library.vmName }}"> 15971 </curly-block>
16238 <div class="memberItem">
16239 <div class="memberName">vm name</div>
16240 <div class="memberValue">{{ library.vmName }}</div>
16241 </div>
16242 </template>
16243 </div>
16244 </div> 15972 </div>
16245
16246 <hr>
16247
16248 <div class="content">
16249 <template if="{{ library.imports.isNotEmpty }}">
16250 imports ({{ library.imports.length }})
16251 <curly-block expand="{{ library.imports.length <= 8 }}">
16252 <div class="memberList">
16253 <template repeat="{{ imp in library.imports }}">
16254 <div class="memberItem">
16255 <div class="memberValue">
16256 <library-ref ref="{{ imp }}"></library-ref>
16257 </div>
16258 </div>
16259 </template>
16260 </div>
16261 </curly-block><br>
16262 <br>
16263 </template>
16264
16265 <template if="{{ library.scripts.isNotEmpty }}">
16266 scripts ({{ library.scripts.length }})
16267 <curly-block expand="{{ library.scripts.length <= 8 }}">
16268 <div class="memberList">
16269 <template repeat="{{ script in library.scripts }}">
16270 <div class="memberItem">
16271 <div class="memberValue">
16272 <script-ref ref="{{ script }}"></script-ref>
16273 </div>
16274 </div>
16275 </template>
16276 </div>
16277 </curly-block><br>
16278 <br>
16279 </template>
16280
16281 <template if="{{ library.classes.isNotEmpty }}">
16282 classes ({{ library.classes.length }})
16283 <curly-block expand="{{ library.classes.length <= 8 }}">
16284 <div class="memberList">
16285 <template repeat="{{ cls in library.classes }}">
16286 <div class="memberItem">
16287 <div class="memberValue">
16288 <class-ref ref="{{ cls }}"></class-ref>
16289 </div>
16290 </div>
16291 </template>
16292 </div>
16293 </curly-block><br>
16294 <br>
16295 </template>
16296
16297 <template if="{{ library.variables.isNotEmpty }}">
16298 variables ({{ library.variables.length }})
16299 <curly-block expand="{{ library.variables.length <= 8 }}">
16300 <div class="memberList">
16301 <template repeat="{{ field in library.variables }}">
16302 <div class="memberItem">
16303 <div class="memberName">
16304 <field-ref ref="{{ field }}"></field-ref>
16305 </div>
16306 <div class="memberValue">
16307 <template if="{{ field.value != null }}">
16308 <any-service-ref ref="{{ field.value }}"></any-service-ref>
16309 </template>
16310 </div>
16311 </div>
16312 </template>
16313 </div>
16314 </curly-block><br>
16315 <br>
16316 </template>
16317
16318 <template if="{{ library.functions.isNotEmpty }}">
16319 functions ({{ library.functions.length }})
16320 <curly-block expand="{{ library.functions.length <= 8 }}">
16321 <div class="memberList">
16322 <template repeat="{{ function in library.functions }}">
16323 <div class="memberItem">
16324 <div class="memberValue">
16325 <function-ref ref="{{ function }}"></function-ref>
16326 </div>
16327 </div>
16328 </template>
16329 </div>
16330 </curly-block><br>
16331 <br>
16332 </template>
16333 </div>
16334
16335 <hr>
16336
16337 <div class="content">
16338 <eval-box callback="{{ eval }}"></eval-box>
16339 </div>
16340 <br><br><br><br>
16341 <br><br><br><br>
16342 </template> 15973 </template>
16343 </polymer-element> 15974 </polymer-element>
16344 15975
16345 15976
16346 15977
16347 15978
16348 15979
16349 15980
16350 <polymer-element name="metrics-page" extends="observatory-element"> 15981
15982
15983
15984
15985
15986
15987
15988
15989
15990
15991
15992 <polymer-element name="object-common" extends="observatory-element">
16351 <template> 15993 <template>
16352 <style> 15994 <style>/* Global styles */
16353 /* Global styles */
16354 * { 15995 * {
16355 margin: 0; 15996 margin: 0;
16356 padding: 0; 15997 padding: 0;
16357 font: 400 14px 'Montserrat', sans-serif; 15998 font: 400 14px 'Montserrat', sans-serif;
16358 color: #333; 15999 color: #333;
16359 box-sizing: border-box; 16000 box-sizing: border-box;
16360 } 16001 }
16361 16002
16362 .content { 16003 .content {
16363 padding-left: 10%; 16004 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
16597 background-color: #f5f5f5; 16238 background-color: #f5f5f5;
16598 border: 1px solid #e3e3e3; 16239 border: 1px solid #e3e3e3;
16599 border-radius: 4px; 16240 border-radius: 4px;
16600 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 16241 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
16601 } 16242 }
16602 16243
16603 .break-wrap { 16244 .break-wrap {
16604 word-wrap: break-word; 16245 word-wrap: break-word;
16605 } 16246 }
16606 </style> 16247 </style>
16607 <style> 16248 <div class="memberList">
16608 ul li:hover:not(.selected) { 16249
16609 background-color: #FFF3E3; 16250 <div class="memberItem">
16610 } 16251 <div class="memberName">class</div>
16611 .selected { 16252 <div class="memberValue">
16612 background-color: #0489c3; 16253 <class-ref ref="{{ object.clazz }}"></class-ref>
16613 } 16254 </div>
16614 .graph { 16255 </div>
16615 min-height: 600px; 16256
16616 } 16257 <template if="{{ object.size != null }}">
16617 </style> 16258 <div class="memberItem" title="Space for this object in memory">
16618 <nav-bar> 16259 <div class="memberName">size</div>
16619 <top-nav-menu last="{{ true }}"></top-nav-menu> 16260 <div class="memberValue">{{ object.size | formatSize }}</div>
16620 <nav-refresh callback="{{ refresh }}"></nav-refresh> 16261 </div>
16621 <nav-control></nav-control> 16262 </template>
16622 </nav-bar> 16263
16623 <div class="flex-row"> 16264 <template if="{{ object.size == null }}">
16624 <div class="flex-item-20-percent"> 16265 <div class="memberItem" title="Space for this object in memory">
16625 <ul> 16266 <div class="memberName">size</div>
16626 <template repeat="{{ metric in isolate.dartMetrics.values }}"> 16267 <div class="memberValue">0</div>
16627 <template if="{{ metric == selectedMetric }}"> 16268 </div>
16628 <li class="selected"> 16269 </template>
16629 {{ metric.name }} 16270
16630 </li> 16271 <div class="memberItem" title="Space that would be reclaimed if references to this object were replaced with null">
16272 <div class="memberName">retained size</div>
16273 <div class="memberValue">
16274 <template if="{{ retainedBytes == null }}">
16275 <eval-link callback="{{ retainedSize }}" label="[calculate]">
16276 </eval-link>
16277 </template>
16278 <template if="{{ retainedBytes != null }}">
16279 {{ retainedBytes | formatSize }}
16280 </template>
16281 </div>
16282 </div>
16283
16284 <div class="memberItem">
16285 <div class="memberName">retaining path</div>
16286 <div class="memberValue">
16287 <template if="{{ path == null }}">
16288 <eval-link callback="{{ retainingPath }}" label="[find]" expr="10">
16289 </eval-link>
16290 </template>
16291 <template if="{{ path != null }}">
16292 <template repeat="{{ element in path['elements'] }}">
16293 <div class="memberItem">
16294 <div class="memberName">[{{ element['index']}}]</div>
16295 <div class="memberValue">
16296 <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
16297 <template if="{{ element['parentField'] != null }}">
16298 in <field-ref ref="{{ element['parentField'] }}"></field-ref> of
16299 </template>
16300 <template if="{{ element['parentListIndex'] != null }}">
16301 in [{{ element['parentListIndex'] }}] of
16302 </template>
16303 </div>
16304 </div>
16631 </template> 16305 </template>
16632 <template if="{{ metric != selectedMetric }}"> 16306 <template if="{{ path['length'] > path['elements'].length }}">
16633 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}"> 16307 showing {{ path['elements'].length }} of {{ path['length'] }}
16634 {{ metric.name }} 16308 <eval-link callback="{{ retainingPath }}" label="[find more]" expr ="{{ path['elements'].length * 2 }}">
16635 </li> 16309 </eval-link>
16636 </template> 16310 </template>
16637 </template> 16311 </template>
16638 <template repeat="{{ metric in isolate.vmMetrics.values }}"> 16312 </div>
16639 <template if="{{ metric == selectedMetric }}"> 16313 </div>
16640 <li class="selected"> 16314
16641 {{ metric.name }} 16315 <div class="memberItem" title="Objects which directly reference this objec t">
16642 </li> 16316 <div class="memberName">inbound references</div>
16643 </template> 16317 <div class="memberValue">
16644 <template if="{{ metric != selectedMetric }}"> 16318 <template if="{{ inboundReferences == null }}">
16645 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}"> 16319 <eval-link callback="{{ fetchInboundReferences }}" label="[find]" ex pr="100">
16646 {{ metric.name }} 16320 </eval-link>
16647 </li> 16321 </template>
16322 <template if="{{ inboundReferences != null }}">
16323 <template repeat="{{ reference in inboundReferences['references'] }} ">
16324 <inbound-reference ref="{{ reference }}"></inbound-reference>
16648 </template> 16325 </template>
16649 </template> 16326 </template>
16650 </ul>
16651 </div>
16652 <div class="flex-item-80-percent">
16653 <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">
16654 </metrics-graph>
16655 <div>
16656 <metric-details page="{{ page }}" metric="{{ selectedMetric }}">
16657 </metric-details>
16658 </div> 16327 </div>
16659 </div> 16328 </div>
16660 </div> 16329
16330 </div>
16661 </template> 16331 </template>
16662 </polymer-element> 16332 </polymer-element>
16663 16333
16664 <polymer-element name="metric-details" extends="observatory-element"> 16334
16335
16336
16337
16338
16339
16340
16341 <polymer-element name="context-ref" extends="service-ref">
16665 <template> 16342 <template>
16666 <style> 16343 <style>/* Global styles */
16667 /* Global styles */
16668 * { 16344 * {
16669 margin: 0; 16345 margin: 0;
16670 padding: 0; 16346 padding: 0;
16671 font: 400 14px 'Montserrat', sans-serif; 16347 font: 400 14px 'Montserrat', sans-serif;
16672 color: #333; 16348 color: #333;
16673 box-sizing: border-box; 16349 box-sizing: border-box;
16674 } 16350 }
16675 16351
16676 .content { 16352 .content {
16677 padding-left: 10%; 16353 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
16911 background-color: #f5f5f5; 16587 background-color: #f5f5f5;
16912 border: 1px solid #e3e3e3; 16588 border: 1px solid #e3e3e3;
16913 border-radius: 4px; 16589 border-radius: 4px;
16914 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 16590 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
16915 } 16591 }
16916 16592
16917 .break-wrap { 16593 .break-wrap {
16918 word-wrap: break-word; 16594 word-wrap: break-word;
16919 } 16595 }
16920 </style> 16596 </style>
16921 <div class="content-centered"> 16597 <span>
16922 <div class="memberList"> 16598 <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a>
16923 <div class="memberItem"> 16599 <curly-block callback="{{ expander() }}">
16924 <div class="memberName">name</div> 16600 <div class="memberList">
16925 <div class="memberValue">{{ metric.name }}</div> 16601 <div class="memberItem">
16602 <div class="memberName">parent</div>
16603 <div class="memberValue">
16604 <any-service-ref ref="{{ ref.parentContext }}"></any-service-ref>
16605 </div>
16606 </div>
16607 <template repeat="{{ variable in ref.variables }}">
16608 <div class="memberItem">
16609 <div class="memberName">[{{ variable['index']}}]</div>
16610 <div class="memberValue">
16611 <any-service-ref ref="{{ variable['value'] }}"></any-service-ref >
16612 </div>
16613 </div>
16614 </template>
16926 </div> 16615 </div>
16927 <div class="memberItem"> 16616 </curly-block>
16928 <div class="memberName">description</div> 16617 </span>
16929 <div class="memberValue">{{ metric.description }}</div>
16930 </div>
16931 <div class="memberItem">
16932 <div class="memberName">current value</div>
16933 <div class="memberValue">{{ metric.value }}</div>
16934 </div>
16935 <template if="{{ (metric != null) &amp;&amp; (metric.min != null) }}">
16936 <div class="memberItem">
16937 <div class="memberName">minimum</div>
16938 <div class="memberValue">{{ metric.min }}</div>
16939 </div>
16940 </template>
16941 <template if="{{ (metric != null) &amp;&amp; (metric.max != null) }}">
16942 <div class="memberItem">
16943 <div class="memberName">maximum</div>
16944 <div class="memberValue">{{ metric.max }}</div>
16945 </div>
16946 </template>
16947 <div class="memberItem">
16948 <div class="memberName">refresh rate</div>
16949 <div class="memberValue">
16950 <select id="refreshrate" on-change="{{ refreshRateChange }}">
16951 <!-- These must be kept in sync with POLL_PERIODS in MetricsPage
16952 in object.dart -->
16953 <option value="8000">Every eight seconds</option>
16954 <option value="4000">Every four seconds</option>
16955 <option value="2000">Every two seconds</option>
16956 <option value="1000">Once a second</option>
16957 <option value="100">Ten times per second</option>
16958 <option value="0" selected="selected">Never</option>
16959 </select>
16960 </div>
16961 </div>
16962 <div class="memberItem">
16963 <div class="memberName">sample buffer size</div>
16964 <div class="memberValue">
16965 <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
16966 <option value="10">10</option>
16967 <option value="100" selected="selected">100</option>
16968 <option value="1000">1000</option>
16969 </select>
16970 </div>
16971 </div>
16972 </div>
16973 </div>
16974 </template> 16618 </template>
16975 </polymer-element> 16619 </polymer-element>
16976 16620
16977 <polymer-element name="metrics-graph" extends="observatory-element"> 16621
16622
16623
16624 <polymer-element name="instance-view" extends="observatory-element">
16978 <template> 16625 <template>
16979 <style> 16626 <style>/* Global styles */
16980 /* Global styles */
16981 * { 16627 * {
16982 margin: 0; 16628 margin: 0;
16983 padding: 0; 16629 padding: 0;
16984 font: 400 14px 'Montserrat', sans-serif; 16630 font: 400 14px 'Montserrat', sans-serif;
16985 color: #333; 16631 color: #333;
16986 box-sizing: border-box; 16632 box-sizing: border-box;
16987 } 16633 }
16988 16634
16989 .content { 16635 .content {
16990 padding-left: 10%; 16636 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
17224 background-color: #f5f5f5; 16870 background-color: #f5f5f5;
17225 border: 1px solid #e3e3e3; 16871 border: 1px solid #e3e3e3;
17226 border-radius: 4px; 16872 border-radius: 4px;
17227 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 16873 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
17228 } 16874 }
17229 16875
17230 .break-wrap { 16876 .break-wrap {
17231 word-wrap: break-word; 16877 word-wrap: break-word;
17232 } 16878 }
17233 </style> 16879 </style>
17234 <style> 16880 <nav-bar>
17235 .graph { 16881 <top-nav-menu></top-nav-menu>
17236 min-height: 600px; 16882 <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
17237 } 16883 <!-- TODO(turnidge): Add library nav menu here. -->
17238 </style> 16884 <class-nav-menu cls="{{ instance.clazz }}"></class-nav-menu>
17239 <div id="graph" class="graph"> 16885 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
17240 </div> 16886 <nav-refresh callback="{{ refresh }}"></nav-refresh>
16887 <nav-control></nav-control>
16888 </nav-bar>
16889
16890 <template if="{{ instance.isError }}">
16891 <error-view error_obj="{{ instance['error'] }}"></error-view>
16892 </template>
16893
16894 <template if="{{ !instance.isError }}">
16895 <div class="content">
16896 <template if="{{ instance.isAbstractType }}">
16897 <h1>type {{ instance.name }}</h1>
16898 </template>
16899 <template if="{{ !instance.isAbstractType }}">
16900 <h1>instance of {{ instance.clazz.name }}</h1>
16901 </template>
16902
16903 <object-common object="{{ instance }}"></object-common>
16904
16905 <div class="memberList">
16906 <div class="memberItem">&nbsp;</div>
16907
16908 <template if="{{ instance.valueAsString != null }}">
16909 <div class="memberItem">
16910 <div class="memberName">value</div>
16911 <div class="memberValue">{{ instance.valueAsString }}</div>
16912 </div>
16913 </template>
16914
16915 <template if="{{ instance.isString }}">
16916 <div class="memberItem">
16917 <div class="memberName">valueAsLiteral</div>
16918 <div class="memberValue"> {{ asStringLiteral(instance.valueAsStrin g, instance.valueAsStringIsTruncated) }}</div>
16919 </div>
16920 </template>
16921
16922 <template if="{{ instance.isMirrorReference }}">
16923 <div class="memberItem">
16924 <div class="memberName">referent</div>
16925 <div class="memberValue">
16926 <any-service-ref ref="{{ instance.referent }}">
16927 </any-service-ref>
16928 </div>
16929 </div>
16930 </template>
16931
16932 <template if="{{ instance.typeClass != null }}">
16933 <div class="memberItem">
16934 <div class="memberName">type class</div>
16935 <div class="memberValue">
16936 <class-ref ref="{{ instance.typeClass }}">
16937 </class-ref>
16938 </div>
16939 </div>
16940 </template>
16941
16942 <template if="{{ instance.isClosure }}">
16943 <div class="memberItem">
16944 <div class="memberName">closure function</div>
16945 <div class="memberValue">
16946 <function-ref ref="{{ instance.closureFunc }}">
16947 </function-ref>
16948 </div>
16949 </div>
16950 </template>
16951 <template if="{{ instance.isClosure }}">
16952 <div class="memberItem">
16953 <div class="memberName">closure context</div>
16954 <div class="memberValue">
16955 <any-service-ref ref="{{ instance.closureCtxt }}">
16956 </any-service-ref>
16957 </div>
16958 </div>
16959 </template>
16960
16961 <template if="{{ instance.isWeakProperty }}">
16962 <div class="memberItem">
16963 <div class="memberName">key</div>
16964 <div class="memberValue">
16965 <any-service-ref ref="{{ instance.key }}">
16966 </any-service-ref>
16967 </div>
16968 </div>
16969 <div class="memberItem">
16970 <div class="memberName">value</div>
16971 <div class="memberValue">
16972 <any-service-ref ref="{{ instance.value }}">
16973 </any-service-ref>
16974 </div>
16975 </div>
16976 </template>
16977
16978 <div class="memberItem">
16979 <div class="memberName">toString()</div>
16980 <div class="memberValue">
16981 <eval-link callback="{{ eval }}" expr="toString()"></eval-link>
16982 </div>
16983 </div>
16984 </div>
16985 </div>
16986
16987 <hr>
16988
16989 <div class="content">
16990 <template if="{{ instance.nativeFields.isNotEmpty }}">
16991 native fields ({{ instance.nativeFields.length }})
16992 <curly-block expand="{{ instance.nativeFields.length <= 8 }}">
16993 <div class="memberList">
16994 <template repeat="{{ field in instance.nativeFields }}">
16995 <div class="memberItem">
16996 <div class="memberName">[{{ field['index']}}]</div>
16997 <div class="memberValue">[{{ field['value']}}]</div>
16998 </div>
16999 </template>
17000 </div>
17001 </curly-block><br><br>
17002 </template>
17003
17004 <template if="{{ instance.fields.isNotEmpty }}">
17005 fields ({{ instance.fields.length }})
17006 <curly-block expand="{{ instance.fields.length <= 8 }}">
17007 <div class="memberList">
17008 <template repeat="{{ field in instance.fields }}">
17009 <div class="memberItem">
17010 <div class="memberName">
17011 <field-ref ref="{{ field['decl'] }}"></field-ref>
17012 </div>
17013 <div class="memberValue">
17014 <any-service-ref ref="{{ field.value }}"></any-service-ref>
17015 </div>
17016 </div>
17017 </template>
17018 </div>
17019 </curly-block><br><br>
17020 </template>
17021
17022 <template if="{{ instance.elements.isNotEmpty }}">
17023 elements ({{ instance.elements.length }})
17024 <curly-block expand="{{ instance.elements.length <= 8 }}">
17025 <div class="memberList">
17026 <template repeat="{{ element in instance.elements }}">
17027 <div class="memberItem">
17028 <div class="memberName">[{{ element['index']}}]</div>
17029 <div class="memberValue">
17030 <any-service-ref ref="{{ element['value'] }}"></any-service- ref>
17031 </div>
17032 </div>
17033 </template>
17034 </div>
17035 </curly-block><br><br>
17036 </template>
17037 </div>
17038
17039 <hr>
17040
17041 <div class="content">
17042 <eval-box callback="{{ eval }}"></eval-box>
17043 </div>
17044
17045 <br><br><br><br>
17046 <br><br><br><br>
17047
17048 </template>
17241 </template> 17049 </template>
17242 </polymer-element> 17050 </polymer-element>
17243 17051
17052
17053
17054
17055
17056
17057 <polymer-element name="json-view" extends="observatory-element">
17058 <template>
17059 <nav-bar>
17060 <top-nav-menu last="{{ true }}"></top-nav-menu>
17061 </nav-bar>
17062 <pre>{{ mapAsString }}</pre>
17063 </template>
17064 </polymer-element>
17065
17244 17066
17245 17067
17246 17068
17247 17069
17248 17070
17249 17071
17250 17072
17251 17073
17252 17074
17253 17075
17254 17076
17255 17077
17256 17078
17257 <polymer-element name="object-view" extends="observatory-element"> 17079
17080
17081 <polymer-element name="library-view" extends="observatory-element">
17258 <template> 17082 <template>
17259 <style> 17083 <style>/* Global styles */
17260 /* Global styles */
17261 * { 17084 * {
17262 margin: 0; 17085 margin: 0;
17263 padding: 0; 17086 padding: 0;
17264 font: 400 14px 'Montserrat', sans-serif; 17087 font: 400 14px 'Montserrat', sans-serif;
17265 color: #333; 17088 color: #333;
17266 box-sizing: border-box; 17089 box-sizing: border-box;
17267 } 17090 }
17268 17091
17269 .content { 17092 .content {
17270 padding-left: 10%; 17093 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
17504 background-color: #f5f5f5; 17327 background-color: #f5f5f5;
17505 border: 1px solid #e3e3e3; 17328 border: 1px solid #e3e3e3;
17506 border-radius: 4px; 17329 border-radius: 4px;
17507 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 17330 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
17508 } 17331 }
17509 17332
17510 .break-wrap { 17333 .break-wrap {
17511 word-wrap: break-word; 17334 word-wrap: break-word;
17512 } 17335 }
17513 </style> 17336 </style>
17337
17514 <nav-bar> 17338 <nav-bar>
17515 <top-nav-menu></top-nav-menu> 17339 <top-nav-menu></top-nav-menu>
17516 <isolate-nav-menu isolate="{{ object.isolate }}"></isolate-nav-menu> 17340 <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
17517 <nav-menu link="." anchor="object" last="{{ true }}"></nav-menu> 17341 <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav- menu>
17342 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
17518 <nav-refresh callback="{{ refresh }}"></nav-refresh> 17343 <nav-refresh callback="{{ refresh }}"></nav-refresh>
17519 <nav-control></nav-control> 17344 <nav-control></nav-control>
17520 </nav-bar> 17345 </nav-bar>
17521 17346
17522 <div class="content"> 17347 <div class="content">
17523 <object-common object="{{ object }}"></object-common> 17348 <h1>
17349 <!-- TODO(turnidge): Handle unnamed libraries -->
17350 library {{ library.name }}
17351 </h1>
17352 <div class="memberList">
17353 <div class="memberItem">
17354 <div class="memberName">url</div>
17355 <div class="memberValue">{{ library.url }}</div>
17356 </div>
17357 <template if="{{ library.name != library.vmName }}">
17358 <div class="memberItem">
17359 <div class="memberName">vm name</div>
17360 <div class="memberValue">{{ library.vmName }}</div>
17361 </div>
17362 </template>
17363 </div>
17524 </div> 17364 </div>
17525 17365
17526 <hr> 17366 <hr>
17367
17368 <div class="content">
17369 <template if="{{ library.imports.isNotEmpty }}">
17370 imports ({{ library.imports.length }})
17371 <curly-block expand="{{ library.imports.length <= 8 }}">
17372 <div class="memberList">
17373 <template repeat="{{ imp in library.imports }}">
17374 <div class="memberItem">
17375 <div class="memberValue">
17376 <library-ref ref="{{ imp }}"></library-ref>
17377 </div>
17378 </div>
17379 </template>
17380 </div>
17381 </curly-block><br>
17382 <br>
17383 </template>
17384
17385 <template if="{{ library.scripts.isNotEmpty }}">
17386 scripts ({{ library.scripts.length }})
17387 <curly-block expand="{{ library.scripts.length <= 8 }}">
17388 <div class="memberList">
17389 <template repeat="{{ script in library.scripts }}">
17390 <div class="memberItem">
17391 <div class="memberValue">
17392 <script-ref ref="{{ script }}"></script-ref>
17393 </div>
17394 </div>
17395 </template>
17396 </div>
17397 </curly-block><br>
17398 <br>
17399 </template>
17400
17401 <template if="{{ library.classes.isNotEmpty }}">
17402 classes ({{ library.classes.length }})
17403 <curly-block expand="{{ library.classes.length <= 8 }}">
17404 <div class="memberList">
17405 <template repeat="{{ cls in library.classes }}">
17406 <div class="memberItem">
17407 <div class="memberValue">
17408 <class-ref ref="{{ cls }}"></class-ref>
17409 </div>
17410 </div>
17411 </template>
17412 </div>
17413 </curly-block><br>
17414 <br>
17415 </template>
17416
17417 <template if="{{ library.variables.isNotEmpty }}">
17418 variables ({{ library.variables.length }})
17419 <curly-block expand="{{ library.variables.length <= 8 }}">
17420 <div class="memberList">
17421 <template repeat="{{ field in library.variables }}">
17422 <div class="memberItem">
17423 <div class="memberName">
17424 <field-ref ref="{{ field }}"></field-ref>
17425 </div>
17426 <div class="memberValue">
17427 <template if="{{ field.value != null }}">
17428 <any-service-ref ref="{{ field.value }}"></any-service-ref>
17429 </template>
17430 </div>
17431 </div>
17432 </template>
17433 </div>
17434 </curly-block><br>
17435 <br>
17436 </template>
17437
17438 <template if="{{ library.functions.isNotEmpty }}">
17439 functions ({{ library.functions.length }})
17440 <curly-block expand="{{ library.functions.length <= 8 }}">
17441 <div class="memberList">
17442 <template repeat="{{ function in library.functions }}">
17443 <div class="memberItem">
17444 <div class="memberValue">
17445 <function-ref ref="{{ function }}"></function-ref>
17446 </div>
17447 </div>
17448 </template>
17449 </div>
17450 </curly-block><br>
17451 <br>
17452 </template>
17453 </div>
17454
17455 <hr>
17456
17457 <div class="content">
17458 <eval-box callback="{{ eval }}"></eval-box>
17459 </div>
17460 <br><br><br><br>
17461 <br><br><br><br>
17527 </template> 17462 </template>
17528 </polymer-element> 17463 </polymer-element>
17529 17464
17530 17465
17531 17466
17532
17533
17534
17535
17536
17537
17538
17539
17540
17541
17542
17543
17544
17545
17546
17547
17548
17549
17550
17551
17552
17553
17554
17555
17556
17557 17467
17558 17468
17559 17469
17560 17470
17561 <polymer-element name="context-view" extends="observatory-element"> 17471 <polymer-element name="metrics-page" extends="observatory-element">
17562 <template> 17472 <template>
17563 <style> 17473 <style>/* Global styles */
17564 /* Global styles */
17565 * { 17474 * {
17566 margin: 0; 17475 margin: 0;
17567 padding: 0; 17476 padding: 0;
17568 font: 400 14px 'Montserrat', sans-serif; 17477 font: 400 14px 'Montserrat', sans-serif;
17569 color: #333; 17478 color: #333;
17570 box-sizing: border-box; 17479 box-sizing: border-box;
17571 } 17480 }
17572 17481
17573 .content { 17482 .content {
17574 padding-left: 10%; 17483 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
17808 background-color: #f5f5f5; 17717 background-color: #f5f5f5;
17809 border: 1px solid #e3e3e3; 17718 border: 1px solid #e3e3e3;
17810 border-radius: 4px; 17719 border-radius: 4px;
17811 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 17720 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
17812 } 17721 }
17813 17722
17814 .break-wrap { 17723 .break-wrap {
17815 word-wrap: break-word; 17724 word-wrap: break-word;
17816 } 17725 }
17817 </style> 17726 </style>
17727 <style>
17728 ul li:hover:not(.selected) {
17729 background-color: #FFF3E3;
17730 }
17731 .selected {
17732 background-color: #0489c3;
17733 }
17734 .graph {
17735 min-height: 600px;
17736 }
17737 </style>
17818 <nav-bar> 17738 <nav-bar>
17819 <top-nav-menu></top-nav-menu> 17739 <top-nav-menu last="{{ true }}"></top-nav-menu>
17820 <isolate-nav-menu isolate="{{ context.isolate }}"></isolate-nav-menu>
17821 <!-- TODO(turnidge): Add library nav menu here. -->
17822 <class-nav-menu cls="{{ context.clazz }}"></class-nav-menu>
17823 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
17824 <nav-refresh callback="{{ refresh }}"></nav-refresh> 17740 <nav-refresh callback="{{ refresh }}"></nav-refresh>
17825 <nav-control></nav-control> 17741 <nav-control></nav-control>
17826 </nav-bar> 17742 </nav-bar>
17827 17743 <div class="flex-row">
17828 <template if="{{ !context.isError }}"> 17744 <div class="flex-item-20-percent">
17829 <div class="content"> 17745 <ul>
17830 <h1>instance of Context</h1> 17746 <template repeat="{{ metric in isolate.dartMetrics.values }}">
17831 17747 <template if="{{ metric == selectedMetric }}">
17832 <object-common object="{{ context }}"></object-common> 17748 <li class="selected">
17833 17749 {{ metric.name }}
17834 <div class="memberList"> 17750 </li>
17835 <div class="memberItem">&nbsp;</div> 17751 </template>
17836 17752 <template if="{{ metric != selectedMetric }}">
17837 <div class="memberItem"> 17753 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
17838 <div class="memberName">parent context</div> 17754 {{ metric.name }}
17839 <div class="memberValue"> 17755 </li>
17840 <any-service-ref ref="{{ context.parentContext }}"></any-service-r ef> 17756 </template>
17841 </div> 17757 </template>
17842 </div> 17758 <template repeat="{{ metric in isolate.vmMetrics.values }}">
17759 <template if="{{ metric == selectedMetric }}">
17760 <li class="selected">
17761 {{ metric.name }}
17762 </li>
17763 </template>
17764 <template if="{{ metric != selectedMetric }}">
17765 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
17766 {{ metric.name }}
17767 </li>
17768 </template>
17769 </template>
17770 </ul>
17771 </div>
17772 <div class="flex-item-80-percent">
17773 <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">
17774 </metrics-graph>
17775 <div>
17776 <metric-details page="{{ page }}" metric="{{ selectedMetric }}">
17777 </metric-details>
17843 </div> 17778 </div>
17844 </div> 17779 </div>
17845 17780 </div>
17846 <hr>
17847
17848 <div class="content">
17849 <template if="{{ context.variables.isNotEmpty }}">
17850 variables ({{ context.variables.length }})
17851 <curly-block expand="{{ context.variables.length <= 8 }}">
17852 <div class="memberList">
17853 <template repeat="{{ variable in context.variables }}">
17854 <div class="memberItem">
17855 <div class="memberName">[{{ variable['index']}}]</div>
17856 <div class="memberValue">
17857 <any-service-ref ref="{{ variable['value'] }}"></any-service -ref>
17858 </div>
17859 </div>
17860 </template>
17861 </div>
17862 </curly-block><br><br>
17863 </template>
17864 </div>
17865
17866 <br><br><br><br>
17867 <br><br><br><br>
17868
17869 </template>
17870 </template> 17781 </template>
17871 </polymer-element> 17782 </polymer-element>
17872 17783
17873 17784 <polymer-element name="metric-details" extends="observatory-element">
17874 17785 <template>
17875 17786 <style>/* Global styles */
17876
17877
17878
17879 <polymer-element name="heap-profile" extends="observatory-element">
17880 <template>
17881 <style>
17882 /* Global styles */
17883 * { 17787 * {
17884 margin: 0; 17788 margin: 0;
17885 padding: 0; 17789 padding: 0;
17886 font: 400 14px 'Montserrat', sans-serif; 17790 font: 400 14px 'Montserrat', sans-serif;
17887 color: #333; 17791 color: #333;
17888 box-sizing: border-box; 17792 box-sizing: border-box;
17889 } 17793 }
17890 17794
17891 .content { 17795 .content {
17892 padding-left: 10%; 17796 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
18126 background-color: #f5f5f5; 18030 background-color: #f5f5f5;
18127 border: 1px solid #e3e3e3; 18031 border: 1px solid #e3e3e3;
18128 border-radius: 4px; 18032 border-radius: 4px;
18129 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 18033 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
18130 } 18034 }
18131 18035
18132 .break-wrap { 18036 .break-wrap {
18133 word-wrap: break-word; 18037 word-wrap: break-word;
18134 } 18038 }
18135 </style> 18039 </style>
18136 <style> 18040 <div class="content-centered">
18137 .table { 18041 <div class="memberList">
18138 border-collapse: collapse!important; 18042 <div class="memberItem">
18139 margin-bottom: 20px 18043 <div class="memberName">name</div>
18140 table-layout: fixed; 18044 <div class="memberValue">{{ metric.name }}</div>
18141 } 18045 </div>
18142 .table td:nth-of-type(1) { 18046 <div class="memberItem">
18143 width: 30%; 18047 <div class="memberName">description</div>
18144 } 18048 <div class="memberValue">{{ metric.description }}</div>
18145 .th, .td { 18049 </div>
18146 padding: 8px; 18050 <div class="memberItem">
18147 vertical-align: top; 18051 <div class="memberName">current value</div>
18148 } 18052 <div class="memberValue">{{ metric.value }}</div>
18149 .table thead > tr > th { 18053 </div>
18150 vertical-align: bottom; 18054 <template if="{{ (metric != null) &amp;&amp; (metric.min != null) }}">
18151 text-align: left;
18152 border-bottom:2px solid #ddd;
18153 }
18154 .spacer {
18155 width: 16px;
18156 }
18157 .left-border-spacer {
18158 width: 16px;
18159 border-left: 1px solid;
18160 }
18161 .clickable {
18162 color: #0489c3;
18163 text-decoration: none;
18164 cursor: pointer;
18165 }
18166 .clickable:hover {
18167 text-decoration: underline;
18168 cursor: pointer;
18169 }
18170 #classtable tr:hover > td {
18171 background-color: #F4C7C3;
18172 }
18173 </style>
18174 <nav-bar>
18175 <top-nav-menu></top-nav-menu>
18176 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
18177 <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anc hor="allocation profile" last="{{ true }}"></nav-menu>
18178 <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></n av-refresh>
18179 <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>
18180 <nav-refresh callback="{{ refresh }}"></nav-refresh>
18181 <nav-control></nav-control>
18182 </nav-bar>
18183 <div class="content">
18184 <h1>Allocation Profile</h1>
18185 <br>
18186 <div class="memberList">
18187 <div class="memberItem">
18188 <div class="memberName">last forced GC at</div>
18189 <div class="memberValue">{{ lastServiceGC }}</div>
18190 </div>
18191 <div class="memberItem">
18192 <div class="memberName">last accumulator reset at</div>
18193 <div class="memberValue">{{ lastAccumulatorReset }}</div>
18194 </div>
18195 </div>
18196 </div>
18197 <hr>
18198 <div class="content-centered-big">
18199 <div class="flex-row">
18200 <div id="newSpace" class="flex-item-50-percent">
18201 <h2>New Generation</h2>
18202 <br>
18203 <div class="memberList">
18204 <div class="memberItem"> 18055 <div class="memberItem">
18205 <div class="memberName">used</div> 18056 <div class="memberName">minimum</div>
18206 <div class="memberValue"> 18057 <div class="memberValue">{{ metric.min }}</div>
18207 {{ isolate.newSpace.used | formatSize }}
18208 of
18209 {{ isolate.newSpace.capacity | formatSize }}
18210 </div>
18211 </div> 18058 </div>
18059 </template>
18060 <template if="{{ (metric != null) &amp;&amp; (metric.max != null) }}">
18212 <div class="memberItem"> 18061 <div class="memberItem">
18213 <div class="memberName">external</div> 18062 <div class="memberName">maximum</div>
18214 <div class="memberValue"> 18063 <div class="memberValue">{{ metric.max }}</div>
18215 {{ isolate.newSpace.external | formatSize }}
18216 </div>
18217 </div> 18064 </div>
18218 <div class="memberItem"> 18065 </template>
18219 <div class="memberName">collections</div> 18066 <div class="memberItem">
18220 <div class="memberValue">{{ formattedCollections(true) }}</div> 18067 <div class="memberName">refresh rate</div>
18221 </div> 18068 <div class="memberValue">
18222 <div class="memberItem"> 18069 <select id="refreshrate" on-change="{{ refreshRateChange }}">
18223 <div class="memberName">average collection time</div> 18070 <!-- These must be kept in sync with POLL_PERIODS in MetricsPage
18224 <div class="memberValue">{{ formattedAverage(true) }}</div> 18071 in object.dart -->
18225 </div> 18072 <option value="8000">Every eight seconds</option>
18226 <div class="memberItem"> 18073 <option value="4000">Every four seconds</option>
18227 <div class="memberName">cumulative collection time</div> 18074 <option value="2000">Every two seconds</option>
18228 <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</d iv> 18075 <option value="1000">Once a second</option>
18229 </div> 18076 <option value="100">Ten times per second</option>
18230 <div class="memberItem"> 18077 <option value="0" selected="selected">Never</option>
18231 <div class="memberName">average time between collections</div> 18078 </select>
18232 <div class="memberValue">{{ isolate.newSpace.averageCollectionPeriod InMillis.toStringAsFixed(2) }} ms</div>
18233 </div> 18079 </div>
18234 </div> 18080 </div>
18235 <div id="newPieChart" style="height: 300px"></div> 18081 <div class="memberItem">
18236 </div> 18082 <div class="memberName">sample buffer size</div>
18237 <div id="oldSpace" class="flex-item-50-percent"> 18083 <div class="memberValue">
18238 <h2>Old Generation</h2> 18084 <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
18239 <br> 18085 <option value="10">10</option>
18240 <div class="memberList"> 18086 <option value="100" selected="selected">100</option>
18241 <div class="memberItem"> 18087 <option value="1000">1000</option>
18242 <div class="memberName">used</div> 18088 </select>
18243 <div class="memberValue">
18244 {{ isolate.oldSpace.used | formatSize }}
18245 of
18246 {{ isolate.oldSpace.capacity | formatSize }}
18247 </div>
18248 </div>
18249 <div class="memberItem">
18250 <div class="memberName">external</div>
18251 <div class="memberValue">
18252 {{ isolate.oldSpace.external | formatSize }}
18253 </div>
18254 </div>
18255 <div class="memberItem">
18256 <div class="memberName">collections</div>
18257 <div class="memberValue">{{ formattedCollections(false) }}</div>
18258 </div>
18259 <div class="memberItem">
18260 <div class="memberName">average collection time</div>
18261 <div class="memberValue">{{ formattedAverage(false) }}</div>
18262 </div>
18263 <div class="memberItem">
18264 <div class="memberName">cumulative collection time</div>
18265 <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</ div>
18266 </div>
18267 <div class="memberItem">
18268 <div class="memberName">average time between collections</div>
18269 <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriod InMillis.toStringAsFixed(2) }} ms</div>
18270 </div> 18089 </div>
18271 </div> 18090 </div>
18272 <div id="oldPieChart" style="height: 300px"></div>
18273 </div> 18091 </div>
18274 </div> 18092 </div>
18275 </div>
18276 <br>
18277 <hr>
18278 <div class="content-centered-big">
18279 <table id="classtable" class="flex-item-100-percent table">
18280 <thead id="classTableHead">
18281 <tr>
18282 <th on-click="{{changeSort}}" class="clickable" title="Class">{{ class Table.getColumnLabel(0) }}</th>
18283 <th class="spacer"></th>
18284 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(2) }}</th>
18285 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(3) }}</th>
18286 <th on-click="{{changeSort}}" class="clickable" title="New Current Siz e">{{ classTable.getColumnLabel(4) }}</th>
18287 <th on-click="{{changeSort}}" class="clickable" title="New Current Ins tances">{{ classTable.getColumnLabel(5) }}</th>
18288 <th class="spacer"></th>
18289 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(7) }}</th>
18290 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(8) }}</th>
18291 <th on-click="{{changeSort}}" class="clickable" title="Old Current Siz e">{{ classTable.getColumnLabel(9) }}</th>
18292 <th on-click="{{changeSort}}" class="clickable" title="Old Current Ins tances">{{ classTable.getColumnLabel(10) }}</th>
18293 </tr>
18294 </thead>
18295 <tbody id="classTableBody">
18296 </tbody>
18297 </table>
18298 <br><br><br>
18299 <br><br><br>
18300 </div>
18301 </template>
18302 </polymer-element>
18303
18304
18305
18306
18307
18308
18309
18310
18311
18312
18313 <polymer-element name="sliding-checkbox">
18314 <template>
18315 <style>
18316 .switch {
18317 position: relative;
18318 width: 121px;
18319 -webkit-user-select: none;
18320 -moz-user-select: none;
18321 -ms-user-select: none;
18322 }
18323 .hide {
18324 display: none;
18325 }
18326 .label {
18327 display: block;
18328 overflow: hidden;
18329 cursor: pointer;
18330 border: 2px solid #999999;
18331 border-radius: 15px;
18332 }
18333 .content {
18334 width: 200%;
18335 margin-left: -100%;
18336 -moz-transition: margin 0.3s ease-in 0s;
18337 -webkit-transition: margin 0.3s ease-in 0s;
18338 -o-transition: margin 0.3s ease-in 0s;
18339 transition: margin 0.3s ease-in 0s;
18340 }
18341 .content:before, .content:after {
18342 float: left;
18343 width: 50%;
18344 height: 30px;
18345 padding: 0;
18346 line-height: 30px;
18347 color: white;
18348 font: 400 14px 'Montserrat', sans-serif;
18349 -moz-box-sizing: border-box;
18350 -webkit-box-sizing: border-box;
18351 box-sizing: border-box;
18352 }
18353 .content:before {
18354 content: {{ checkedText }};
18355 padding-left: 10px;
18356 background-color: #0489C3;
18357 }
18358 .content:after {
18359 content: {{ uncheckedText }};
18360 padding-right: 10px;
18361 background-color: #EEEEEE;
18362 color: #999999;
18363 text-align: right;
18364 }
18365 .dot {
18366 width: 14px;
18367 margin: 8px;
18368 background: #FFFFFF;
18369 border: 2px solid #999999;
18370 border-radius: 15px;
18371 position: absolute;
18372 top: 0;
18373 bottom: 0;
18374 right: 87px;
18375 -moz-transition: all 0.3s ease-in 0s;
18376 -webkit-transition: all 0.3s ease-in 0s;
18377 -o-transition: all 0.3s ease-in 0s;
18378 transition: all 0.3s ease-in 0s;
18379 }
18380 :checked + .label .content {
18381 margin-left: 0;
18382 }
18383 :checked + .label .dot {
18384 right: 0px;
18385 }
18386 </style>
18387 <div class="switch">
18388 <input type="checkbox" class="hide" id="slide-switch" on-change="{{ change }}">
18389 <label class="label" for="slide-switch">
18390 <div class="content"></div>
18391 <div class="dot"></div>
18392 </label>
18393 </div>
18394 </template> 18093 </template>
18395 </polymer-element> 18094 </polymer-element>
18396 18095
18397 <polymer-element name="isolate-profile" extends="observatory-element"> 18096 <polymer-element name="metrics-graph" extends="observatory-element">
18398 <template> 18097 <template>
18399 <style> 18098 <style>/* Global styles */
18400 /* Global styles */
18401 * { 18099 * {
18402 margin: 0; 18100 margin: 0;
18403 padding: 0; 18101 padding: 0;
18102 font: 400 14px 'Montserrat', sans-serif;
18103 color: #333;
18104 box-sizing: border-box;
18105 }
18106
18107 .content {
18108 padding-left: 10%;
18109 font: 400 14px 'Montserrat', sans-serif;
18110 }
18111
18112 .content-centered {
18113 padding-left: 10%;
18114 padding-right: 10%;
18115 font: 400 14px 'Montserrat', sans-serif;
18116 }
18117
18118 .content-centered-big {
18119 padding-left: 5%;
18120 padding-right: 5%;
18121 font: 400 14px 'Montserrat', sans-serif;
18122 }
18123
18124 h1 {
18125 font: 400 18px 'Montserrat', sans-serif;
18126 }
18127
18128 .memberList {
18129 display: table;
18130 }
18131
18132 .memberItem {
18133 display: table-row;
18134 }
18135
18136 .memberName, .memberValue {
18137 display: table-cell;
18138 vertical-align: top;
18139 padding: 3px 0 3px 1em;
18140 font: 400 14px 'Montserrat', sans-serif;
18141 }
18142
18143 .memberSmall {
18144 display: table-cell;
18145 vertical-align: top;
18146 padding: 3px 0 3px 1em;
18147 font: 400 12px 'Montserrat', sans-serif;
18148 }
18149
18150 .monospace {
18151 font-family: consolas, courier, monospace;
18152 font-size: 1em;
18153 line-height: 1.2em;
18154 white-space: nowrap;
18155 }
18156
18157 a {
18158 color: #0489c3;
18159 text-decoration: none;
18160 }
18161
18162 a:hover {
18163 text-decoration: underline;
18164 }
18165
18166 em {
18167 color: inherit;
18168 font-style: italic;
18169 }
18170
18171 b {
18172 color: inherit;
18173 font-weight: bold;
18174 }
18175
18176 hr {
18177 margin-top: 20px;
18178 margin-bottom: 20px;
18179 border: 0;
18180 border-top: 1px solid #eee;
18181 height: 0;
18182 box-sizing: content-box;
18183 }
18184
18185 .list-group {
18186 padding-left: 0;
18187 margin-bottom: 20px;
18188 }
18189
18190 .list-group-item {
18191 position: relative;
18192 display: block;
18193 padding: 10px 15px;
18194 margin-bottom: -1px;
18195 background-color: #fff;
18196 }
18197
18198 .list-group-item:first-child {
18199 /* rounded top corners */
18200 border-top-right-radius:4px;
18201 border-top-left-radius:4px;
18202 }
18203
18204 .list-group-item:last-child {
18205 margin-bottom: 0;
18206 /* rounded bottom corners */
18207 border-bottom-right-radius: 4px;
18208 border-bottom-left-radius:4px;
18209 }
18210
18211 /* Flex row container */
18212 .flex-row {
18213 display: flex;
18214 flex-direction: row;
18215 }
18216
18217 /* Flex column container */
18218 .flex-column {
18219 display: flex;
18220 flex-direction: column;
18221 }
18222
18223 .flex-item-fit {
18224 flex-grow: 1;
18225 flex-shrink: 1;
18226 flex-basis: auto;
18227 }
18228
18229 .flex-item-no-shrink {
18230 flex-grow: 0;
18231 flex-shrink: 0;
18232 flex-basis: auto;
18233 }
18234
18235 .flex-item-fill {
18236 flex-grow: 0;
18237 flex-shrink: 1; /* shrink when pressured */
18238 flex-basis: 100%; /* try and take 100% */
18239 }
18240
18241 .flex-item-fixed-1-12 {
18242 flex-grow: 0;
18243 flex-shrink: 0;
18244 flex-basis: 8.3%;
18245 }
18246
18247 .flex-item-fixed-2-12 {
18248 flex-grow: 0;
18249 flex-shrink: 0;
18250 flex-basis: 16.6%;
18251 }
18252
18253 .flex-item-fixed-4-12 {
18254 flex-grow: 0;
18255 flex-shrink: 0;
18256 flex-basis: 33.3333%;
18257 }
18258
18259 .flex-item-fixed-6-12, .flex-item-50-percent {
18260 flex-grow: 0;
18261 flex-shrink: 0;
18262 flex-basis: 50%;
18263 }
18264
18265 .flex-item-fixed-8-12 {
18266 flex-grow: 0;
18267 flex-shrink: 0;
18268 flex-basis: 66.6666%;
18269 }
18270
18271 .flex-item-fixed-9-12 {
18272 flex-grow: 0;
18273 flex-shrink: 0;
18274 flex-basis: 75%;
18275 }
18276
18277
18278 .flex-item-fixed-12-12 {
18279 flex-grow: 0;
18280 flex-shrink: 0;
18281 flex-basis: 100%;
18282 }
18283
18284 .flex-item-10-percent {
18285 flex-grow: 0;
18286 flex-shrink: 0;
18287 flex-basis: 10%;
18288 }
18289
18290 .flex-item-15-percent {
18291 flex-grow: 0;
18292 flex-shrink: 0;
18293 flex-basis: 15%;
18294 }
18295
18296 .flex-item-20-percent {
18297 flex-grow: 0;
18298 flex-shrink: 0;
18299 flex-basis: 20%;
18300 }
18301
18302 .flex-item-30-percent {
18303 flex-grow: 0;
18304 flex-shrink: 0;
18305 flex-basis: 30%;
18306 }
18307
18308 .flex-item-40-percent {
18309 flex-grow: 0;
18310 flex-shrink: 0;
18311 flex-basis: 40%;
18312 }
18313
18314 .flex-item-50-percent {
18315 flex-grow: 0;
18316 flex-shrink: 0;
18317 flex-basis: 50%;
18318 }
18319
18320 .flex-item-60-percent {
18321 flex-grow: 0;
18322 flex-shrink: 0;
18323 flex-basis: 60%;
18324 }
18325
18326 .flex-item-70-percent {
18327 flex-grow: 0;
18328 flex-shrink: 0;
18329 flex-basis: 70%;
18330 }
18331
18332 .flex-item-80-percent {
18333 flex-grow: 0;
18334 flex-shrink: 0;
18335 flex-basis: 80%;
18336 }
18337
18338 .well {
18339 min-height: 20px;
18340 padding: 19px;
18341 margin-bottom: 20px;
18342 background-color: #f5f5f5;
18343 border: 1px solid #e3e3e3;
18344 border-radius: 4px;
18345 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
18346 }
18347
18348 .break-wrap {
18349 word-wrap: break-word;
18350 }
18351 </style>
18352 <style>
18353 .graph {
18354 min-height: 600px;
18355 }
18356 </style>
18357 <div id="graph" class="graph">
18358 </div>
18359 </template>
18360 </polymer-element>
18361
18362
18363
18364
18365
18366
18367
18368
18369
18370
18371
18372
18373
18374
18375
18376
18377
18378 <polymer-element name="object-view" extends="observatory-element">
18379 <template>
18380 <style>/* Global styles */
18381 * {
18382 margin: 0;
18383 padding: 0;
18384 font: 400 14px 'Montserrat', sans-serif;
18385 color: #333;
18386 box-sizing: border-box;
18387 }
18388
18389 .content {
18390 padding-left: 10%;
18391 font: 400 14px 'Montserrat', sans-serif;
18392 }
18393
18394 .content-centered {
18395 padding-left: 10%;
18396 padding-right: 10%;
18397 font: 400 14px 'Montserrat', sans-serif;
18398 }
18399
18400 .content-centered-big {
18401 padding-left: 5%;
18402 padding-right: 5%;
18403 font: 400 14px 'Montserrat', sans-serif;
18404 }
18405
18406 h1 {
18407 font: 400 18px 'Montserrat', sans-serif;
18408 }
18409
18410 .memberList {
18411 display: table;
18412 }
18413
18414 .memberItem {
18415 display: table-row;
18416 }
18417
18418 .memberName, .memberValue {
18419 display: table-cell;
18420 vertical-align: top;
18421 padding: 3px 0 3px 1em;
18422 font: 400 14px 'Montserrat', sans-serif;
18423 }
18424
18425 .memberSmall {
18426 display: table-cell;
18427 vertical-align: top;
18428 padding: 3px 0 3px 1em;
18429 font: 400 12px 'Montserrat', sans-serif;
18430 }
18431
18432 .monospace {
18433 font-family: consolas, courier, monospace;
18434 font-size: 1em;
18435 line-height: 1.2em;
18436 white-space: nowrap;
18437 }
18438
18439 a {
18440 color: #0489c3;
18441 text-decoration: none;
18442 }
18443
18444 a:hover {
18445 text-decoration: underline;
18446 }
18447
18448 em {
18449 color: inherit;
18450 font-style: italic;
18451 }
18452
18453 b {
18454 color: inherit;
18455 font-weight: bold;
18456 }
18457
18458 hr {
18459 margin-top: 20px;
18460 margin-bottom: 20px;
18461 border: 0;
18462 border-top: 1px solid #eee;
18463 height: 0;
18464 box-sizing: content-box;
18465 }
18466
18467 .list-group {
18468 padding-left: 0;
18469 margin-bottom: 20px;
18470 }
18471
18472 .list-group-item {
18473 position: relative;
18474 display: block;
18475 padding: 10px 15px;
18476 margin-bottom: -1px;
18477 background-color: #fff;
18478 }
18479
18480 .list-group-item:first-child {
18481 /* rounded top corners */
18482 border-top-right-radius:4px;
18483 border-top-left-radius:4px;
18484 }
18485
18486 .list-group-item:last-child {
18487 margin-bottom: 0;
18488 /* rounded bottom corners */
18489 border-bottom-right-radius: 4px;
18490 border-bottom-left-radius:4px;
18491 }
18492
18493 /* Flex row container */
18494 .flex-row {
18495 display: flex;
18496 flex-direction: row;
18497 }
18498
18499 /* Flex column container */
18500 .flex-column {
18501 display: flex;
18502 flex-direction: column;
18503 }
18504
18505 .flex-item-fit {
18506 flex-grow: 1;
18507 flex-shrink: 1;
18508 flex-basis: auto;
18509 }
18510
18511 .flex-item-no-shrink {
18512 flex-grow: 0;
18513 flex-shrink: 0;
18514 flex-basis: auto;
18515 }
18516
18517 .flex-item-fill {
18518 flex-grow: 0;
18519 flex-shrink: 1; /* shrink when pressured */
18520 flex-basis: 100%; /* try and take 100% */
18521 }
18522
18523 .flex-item-fixed-1-12 {
18524 flex-grow: 0;
18525 flex-shrink: 0;
18526 flex-basis: 8.3%;
18527 }
18528
18529 .flex-item-fixed-2-12 {
18530 flex-grow: 0;
18531 flex-shrink: 0;
18532 flex-basis: 16.6%;
18533 }
18534
18535 .flex-item-fixed-4-12 {
18536 flex-grow: 0;
18537 flex-shrink: 0;
18538 flex-basis: 33.3333%;
18539 }
18540
18541 .flex-item-fixed-6-12, .flex-item-50-percent {
18542 flex-grow: 0;
18543 flex-shrink: 0;
18544 flex-basis: 50%;
18545 }
18546
18547 .flex-item-fixed-8-12 {
18548 flex-grow: 0;
18549 flex-shrink: 0;
18550 flex-basis: 66.6666%;
18551 }
18552
18553 .flex-item-fixed-9-12 {
18554 flex-grow: 0;
18555 flex-shrink: 0;
18556 flex-basis: 75%;
18557 }
18558
18559
18560 .flex-item-fixed-12-12 {
18561 flex-grow: 0;
18562 flex-shrink: 0;
18563 flex-basis: 100%;
18564 }
18565
18566 .flex-item-10-percent {
18567 flex-grow: 0;
18568 flex-shrink: 0;
18569 flex-basis: 10%;
18570 }
18571
18572 .flex-item-15-percent {
18573 flex-grow: 0;
18574 flex-shrink: 0;
18575 flex-basis: 15%;
18576 }
18577
18578 .flex-item-20-percent {
18579 flex-grow: 0;
18580 flex-shrink: 0;
18581 flex-basis: 20%;
18582 }
18583
18584 .flex-item-30-percent {
18585 flex-grow: 0;
18586 flex-shrink: 0;
18587 flex-basis: 30%;
18588 }
18589
18590 .flex-item-40-percent {
18591 flex-grow: 0;
18592 flex-shrink: 0;
18593 flex-basis: 40%;
18594 }
18595
18596 .flex-item-50-percent {
18597 flex-grow: 0;
18598 flex-shrink: 0;
18599 flex-basis: 50%;
18600 }
18601
18602 .flex-item-60-percent {
18603 flex-grow: 0;
18604 flex-shrink: 0;
18605 flex-basis: 60%;
18606 }
18607
18608 .flex-item-70-percent {
18609 flex-grow: 0;
18610 flex-shrink: 0;
18611 flex-basis: 70%;
18612 }
18613
18614 .flex-item-80-percent {
18615 flex-grow: 0;
18616 flex-shrink: 0;
18617 flex-basis: 80%;
18618 }
18619
18620 .well {
18621 min-height: 20px;
18622 padding: 19px;
18623 margin-bottom: 20px;
18624 background-color: #f5f5f5;
18625 border: 1px solid #e3e3e3;
18626 border-radius: 4px;
18627 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
18628 }
18629
18630 .break-wrap {
18631 word-wrap: break-word;
18632 }
18633 </style>
18634 <nav-bar>
18635 <top-nav-menu></top-nav-menu>
18636 <isolate-nav-menu isolate="{{ object.isolate }}"></isolate-nav-menu>
18637 <nav-menu link="." anchor="object" last="{{ true }}"></nav-menu>
18638 <nav-refresh callback="{{ refresh }}"></nav-refresh>
18639 <nav-control></nav-control>
18640 </nav-bar>
18641
18642 <div class="content">
18643 <object-common object="{{ object }}"></object-common>
18644 </div>
18645
18646 <hr>
18647 </template>
18648 </polymer-element>
18649
18650
18651
18652
18653
18654
18655
18656
18657
18658
18659
18660
18661
18662
18663
18664
18665
18666
18667
18668 <polymer-element name="context-view" extends="observatory-element">
18669 <template>
18670 <style>/* Global styles */
18671 * {
18672 margin: 0;
18673 padding: 0;
18674 font: 400 14px 'Montserrat', sans-serif;
18675 color: #333;
18676 box-sizing: border-box;
18677 }
18678
18679 .content {
18680 padding-left: 10%;
18681 font: 400 14px 'Montserrat', sans-serif;
18682 }
18683
18684 .content-centered {
18685 padding-left: 10%;
18686 padding-right: 10%;
18687 font: 400 14px 'Montserrat', sans-serif;
18688 }
18689
18690 .content-centered-big {
18691 padding-left: 5%;
18692 padding-right: 5%;
18693 font: 400 14px 'Montserrat', sans-serif;
18694 }
18695
18696 h1 {
18697 font: 400 18px 'Montserrat', sans-serif;
18698 }
18699
18700 .memberList {
18701 display: table;
18702 }
18703
18704 .memberItem {
18705 display: table-row;
18706 }
18707
18708 .memberName, .memberValue {
18709 display: table-cell;
18710 vertical-align: top;
18711 padding: 3px 0 3px 1em;
18712 font: 400 14px 'Montserrat', sans-serif;
18713 }
18714
18715 .memberSmall {
18716 display: table-cell;
18717 vertical-align: top;
18718 padding: 3px 0 3px 1em;
18719 font: 400 12px 'Montserrat', sans-serif;
18720 }
18721
18722 .monospace {
18723 font-family: consolas, courier, monospace;
18724 font-size: 1em;
18725 line-height: 1.2em;
18726 white-space: nowrap;
18727 }
18728
18729 a {
18730 color: #0489c3;
18731 text-decoration: none;
18732 }
18733
18734 a:hover {
18735 text-decoration: underline;
18736 }
18737
18738 em {
18739 color: inherit;
18740 font-style: italic;
18741 }
18742
18743 b {
18744 color: inherit;
18745 font-weight: bold;
18746 }
18747
18748 hr {
18749 margin-top: 20px;
18750 margin-bottom: 20px;
18751 border: 0;
18752 border-top: 1px solid #eee;
18753 height: 0;
18754 box-sizing: content-box;
18755 }
18756
18757 .list-group {
18758 padding-left: 0;
18759 margin-bottom: 20px;
18760 }
18761
18762 .list-group-item {
18763 position: relative;
18764 display: block;
18765 padding: 10px 15px;
18766 margin-bottom: -1px;
18767 background-color: #fff;
18768 }
18769
18770 .list-group-item:first-child {
18771 /* rounded top corners */
18772 border-top-right-radius:4px;
18773 border-top-left-radius:4px;
18774 }
18775
18776 .list-group-item:last-child {
18777 margin-bottom: 0;
18778 /* rounded bottom corners */
18779 border-bottom-right-radius: 4px;
18780 border-bottom-left-radius:4px;
18781 }
18782
18783 /* Flex row container */
18784 .flex-row {
18785 display: flex;
18786 flex-direction: row;
18787 }
18788
18789 /* Flex column container */
18790 .flex-column {
18791 display: flex;
18792 flex-direction: column;
18793 }
18794
18795 .flex-item-fit {
18796 flex-grow: 1;
18797 flex-shrink: 1;
18798 flex-basis: auto;
18799 }
18800
18801 .flex-item-no-shrink {
18802 flex-grow: 0;
18803 flex-shrink: 0;
18804 flex-basis: auto;
18805 }
18806
18807 .flex-item-fill {
18808 flex-grow: 0;
18809 flex-shrink: 1; /* shrink when pressured */
18810 flex-basis: 100%; /* try and take 100% */
18811 }
18812
18813 .flex-item-fixed-1-12 {
18814 flex-grow: 0;
18815 flex-shrink: 0;
18816 flex-basis: 8.3%;
18817 }
18818
18819 .flex-item-fixed-2-12 {
18820 flex-grow: 0;
18821 flex-shrink: 0;
18822 flex-basis: 16.6%;
18823 }
18824
18825 .flex-item-fixed-4-12 {
18826 flex-grow: 0;
18827 flex-shrink: 0;
18828 flex-basis: 33.3333%;
18829 }
18830
18831 .flex-item-fixed-6-12, .flex-item-50-percent {
18832 flex-grow: 0;
18833 flex-shrink: 0;
18834 flex-basis: 50%;
18835 }
18836
18837 .flex-item-fixed-8-12 {
18838 flex-grow: 0;
18839 flex-shrink: 0;
18840 flex-basis: 66.6666%;
18841 }
18842
18843 .flex-item-fixed-9-12 {
18844 flex-grow: 0;
18845 flex-shrink: 0;
18846 flex-basis: 75%;
18847 }
18848
18849
18850 .flex-item-fixed-12-12 {
18851 flex-grow: 0;
18852 flex-shrink: 0;
18853 flex-basis: 100%;
18854 }
18855
18856 .flex-item-10-percent {
18857 flex-grow: 0;
18858 flex-shrink: 0;
18859 flex-basis: 10%;
18860 }
18861
18862 .flex-item-15-percent {
18863 flex-grow: 0;
18864 flex-shrink: 0;
18865 flex-basis: 15%;
18866 }
18867
18868 .flex-item-20-percent {
18869 flex-grow: 0;
18870 flex-shrink: 0;
18871 flex-basis: 20%;
18872 }
18873
18874 .flex-item-30-percent {
18875 flex-grow: 0;
18876 flex-shrink: 0;
18877 flex-basis: 30%;
18878 }
18879
18880 .flex-item-40-percent {
18881 flex-grow: 0;
18882 flex-shrink: 0;
18883 flex-basis: 40%;
18884 }
18885
18886 .flex-item-50-percent {
18887 flex-grow: 0;
18888 flex-shrink: 0;
18889 flex-basis: 50%;
18890 }
18891
18892 .flex-item-60-percent {
18893 flex-grow: 0;
18894 flex-shrink: 0;
18895 flex-basis: 60%;
18896 }
18897
18898 .flex-item-70-percent {
18899 flex-grow: 0;
18900 flex-shrink: 0;
18901 flex-basis: 70%;
18902 }
18903
18904 .flex-item-80-percent {
18905 flex-grow: 0;
18906 flex-shrink: 0;
18907 flex-basis: 80%;
18908 }
18909
18910 .well {
18911 min-height: 20px;
18912 padding: 19px;
18913 margin-bottom: 20px;
18914 background-color: #f5f5f5;
18915 border: 1px solid #e3e3e3;
18916 border-radius: 4px;
18917 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
18918 }
18919
18920 .break-wrap {
18921 word-wrap: break-word;
18922 }
18923 </style>
18924 <nav-bar>
18925 <top-nav-menu></top-nav-menu>
18926 <isolate-nav-menu isolate="{{ context.isolate }}"></isolate-nav-menu>
18927 <!-- TODO(turnidge): Add library nav menu here. -->
18928 <class-nav-menu cls="{{ context.clazz }}"></class-nav-menu>
18929 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
18930 <nav-refresh callback="{{ refresh }}"></nav-refresh>
18931 <nav-control></nav-control>
18932 </nav-bar>
18933
18934 <template if="{{ !context.isError }}">
18935 <div class="content">
18936 <h1>instance of Context</h1>
18937
18938 <object-common object="{{ context }}"></object-common>
18939
18940 <div class="memberList">
18941 <div class="memberItem">&nbsp;</div>
18942
18943 <div class="memberItem">
18944 <div class="memberName">parent context</div>
18945 <div class="memberValue">
18946 <any-service-ref ref="{{ context.parentContext }}"></any-service-r ef>
18947 </div>
18948 </div>
18949 </div>
18950 </div>
18951
18952 <hr>
18953
18954 <div class="content">
18955 <template if="{{ context.variables.isNotEmpty }}">
18956 variables ({{ context.variables.length }})
18957 <curly-block expand="{{ context.variables.length <= 8 }}">
18958 <div class="memberList">
18959 <template repeat="{{ variable in context.variables }}">
18960 <div class="memberItem">
18961 <div class="memberName">[{{ variable['index']}}]</div>
18962 <div class="memberValue">
18963 <any-service-ref ref="{{ variable['value'] }}"></any-service -ref>
18964 </div>
18965 </div>
18966 </template>
18967 </div>
18968 </curly-block><br><br>
18969 </template>
18970 </div>
18971
18972 <br><br><br><br>
18973 <br><br><br><br>
18974
18975 </template>
18976 </template>
18977 </polymer-element>
18978
18979
18980
18981
18982
18983
18984
18985
18986
18987
18988
18989
18990 <polymer-element name="heap-profile" extends="observatory-element">
18991 <template>
18992 <style>/* Global styles */
18993 * {
18994 margin: 0;
18995 padding: 0;
18404 font: 400 14px 'Montserrat', sans-serif; 18996 font: 400 14px 'Montserrat', sans-serif;
18405 color: #333; 18997 color: #333;
18406 box-sizing: border-box; 18998 box-sizing: border-box;
18407 } 18999 }
18408 19000
18409 .content { 19001 .content {
18410 padding-left: 10%; 19002 padding-left: 10%;
18411 font: 400 14px 'Montserrat', sans-serif; 19003 font: 400 14px 'Montserrat', sans-serif;
18412 } 19004 }
18413 19005
(...skipping 230 matching lines...) Expand 10 before | Expand all | Expand 10 after
18644 background-color: #f5f5f5; 19236 background-color: #f5f5f5;
18645 border: 1px solid #e3e3e3; 19237 border: 1px solid #e3e3e3;
18646 border-radius: 4px; 19238 border-radius: 4px;
18647 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 19239 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
18648 } 19240 }
18649 19241
18650 .break-wrap { 19242 .break-wrap {
18651 word-wrap: break-word; 19243 word-wrap: break-word;
18652 } 19244 }
18653 </style> 19245 </style>
18654 <nav-bar> 19246 <style>
18655 <top-nav-menu></top-nav-menu> 19247 .table {
18656 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> 19248 border-collapse: collapse!important;
18657 <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu> 19249 margin-bottom: 20px
18658 <nav-refresh callback="{{ refresh }}"></nav-refresh> 19250 table-layout: fixed;
18659 <nav-control></nav-control> 19251 }
18660 </nav-bar> 19252 .table td:nth-of-type(1) {
19253 width: 30%;
19254 }
19255 .th, .td {
19256 padding: 8px;
19257 vertical-align: top;
19258 }
19259 .table thead > tr > th {
19260 vertical-align: bottom;
19261 text-align: left;
19262 border-bottom:2px solid #ddd;
19263 }
19264 .spacer {
19265 width: 16px;
19266 }
19267 .left-border-spacer {
19268 width: 16px;
19269 border-left: 1px solid;
19270 }
19271 .clickable {
19272 color: #0489c3;
19273 text-decoration: none;
19274 cursor: pointer;
19275 }
19276 .clickable:hover {
19277 text-decoration: underline;
19278 cursor: pointer;
19279 }
19280 #classtable tr:hover > td {
19281 background-color: #F4C7C3;
19282 }
19283 </style>
19284 <nav-bar>
19285 <top-nav-menu></top-nav-menu>
19286 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
19287 <nav-menu link="{{ profile.isolate.relativeLink('allocationprofile') }}" anc hor="allocation profile" last="{{ true }}"></nav-menu>
19288 <nav-refresh callback="{{ resetAccumulator }}" label="Reset Accumulator"></n av-refresh>
19289 <nav-refresh callback="{{ refreshGC }}" label="GC"></nav-refresh>
19290 <nav-refresh callback="{{ refresh }}"></nav-refresh>
19291 <nav-control></nav-control>
19292 </nav-bar>
19293 <div class="content">
19294 <h1>Allocation Profile</h1>
19295 <br>
19296 <div class="memberList">
19297 <div class="memberItem">
19298 <div class="memberName">last forced GC at</div>
19299 <div class="memberValue">{{ lastServiceGC }}</div>
19300 </div>
19301 <div class="memberItem">
19302 <div class="memberName">last accumulator reset at</div>
19303 <div class="memberValue">{{ lastAccumulatorReset }}</div>
19304 </div>
19305 </div>
19306 </div>
19307 <hr>
19308 <div class="content-centered-big">
19309 <div class="flex-row">
19310 <div id="newSpace" class="flex-item-50-percent">
19311 <h2>New Generation</h2>
19312 <br>
19313 <div class="memberList">
19314 <div class="memberItem">
19315 <div class="memberName">used</div>
19316 <div class="memberValue">
19317 {{ isolate.newSpace.used | formatSize }}
19318 of
19319 {{ isolate.newSpace.capacity | formatSize }}
19320 </div>
19321 </div>
19322 <div class="memberItem">
19323 <div class="memberName">external</div>
19324 <div class="memberValue">
19325 {{ isolate.newSpace.external | formatSize }}
19326 </div>
19327 </div>
19328 <div class="memberItem">
19329 <div class="memberName">collections</div>
19330 <div class="memberValue">{{ formattedCollections(true) }}</div>
19331 </div>
19332 <div class="memberItem">
19333 <div class="memberName">average collection time</div>
19334 <div class="memberValue">{{ formattedAverage(true) }}</div>
19335 </div>
19336 <div class="memberItem">
19337 <div class="memberName">cumulative collection time</div>
19338 <div class="memberValue">{{ formattedTotalCollectionTime(true) }}</d iv>
19339 </div>
19340 <div class="memberItem">
19341 <div class="memberName">average time between collections</div>
19342 <div class="memberValue">{{ isolate.newSpace.averageCollectionPeriod InMillis.toStringAsFixed(2) }} ms</div>
19343 </div>
19344 </div>
19345 <div id="newPieChart" style="height: 300px"></div>
19346 </div>
19347 <div id="oldSpace" class="flex-item-50-percent">
19348 <h2>Old Generation</h2>
19349 <br>
19350 <div class="memberList">
19351 <div class="memberItem">
19352 <div class="memberName">used</div>
19353 <div class="memberValue">
19354 {{ isolate.oldSpace.used | formatSize }}
19355 of
19356 {{ isolate.oldSpace.capacity | formatSize }}
19357 </div>
19358 </div>
19359 <div class="memberItem">
19360 <div class="memberName">external</div>
19361 <div class="memberValue">
19362 {{ isolate.oldSpace.external | formatSize }}
19363 </div>
19364 </div>
19365 <div class="memberItem">
19366 <div class="memberName">collections</div>
19367 <div class="memberValue">{{ formattedCollections(false) }}</div>
19368 </div>
19369 <div class="memberItem">
19370 <div class="memberName">average collection time</div>
19371 <div class="memberValue">{{ formattedAverage(false) }}</div>
19372 </div>
19373 <div class="memberItem">
19374 <div class="memberName">cumulative collection time</div>
19375 <div class="memberValue">{{ formattedTotalCollectionTime(false) }}</ div>
19376 </div>
19377 <div class="memberItem">
19378 <div class="memberName">average time between collections</div>
19379 <div class="memberValue">{{ isolate.oldSpace.averageCollectionPeriod InMillis.toStringAsFixed(2) }} ms</div>
19380 </div>
19381 </div>
19382 <div id="oldPieChart" style="height: 300px"></div>
19383 </div>
19384 </div>
19385 </div>
19386 <br>
19387 <hr>
19388 <div class="content-centered-big">
19389 <table id="classtable" class="flex-item-100-percent table">
19390 <thead id="classTableHead">
19391 <tr>
19392 <th on-click="{{changeSort}}" class="clickable" title="Class">{{ class Table.getColumnLabel(0) }}</th>
19393 <th class="spacer"></th>
19394 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Size">{{ classTable.getColumnLabel(2) }}</th>
19395 <th on-click="{{changeSort}}" class="clickable" title="New Accumulated Instances">{{ classTable.getColumnLabel(3) }}</th>
19396 <th on-click="{{changeSort}}" class="clickable" title="New Current Siz e">{{ classTable.getColumnLabel(4) }}</th>
19397 <th on-click="{{changeSort}}" class="clickable" title="New Current Ins tances">{{ classTable.getColumnLabel(5) }}</th>
19398 <th class="spacer"></th>
19399 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Size">{{ classTable.getColumnLabel(7) }}</th>
19400 <th on-click="{{changeSort}}" class="clickable" title="Old Accumulated Instances">{{ classTable.getColumnLabel(8) }}</th>
19401 <th on-click="{{changeSort}}" class="clickable" title="Old Current Siz e">{{ classTable.getColumnLabel(9) }}</th>
19402 <th on-click="{{changeSort}}" class="clickable" title="Old Current Ins tances">{{ classTable.getColumnLabel(10) }}</th>
19403 </tr>
19404 </thead>
19405 <tbody id="classTableBody">
19406 </tbody>
19407 </table>
19408 <br><br><br>
19409 <br><br><br>
19410 </div>
19411 </template>
19412 </polymer-element>
19413
19414
19415
19416
19417
19418
19419
19420
19421
19422
19423 <polymer-element name="sliding-checkbox">
19424 <template>
18661 <style> 19425 <style>
18662 .table { 19426 .switch {
18663 border-collapse: collapse!important; 19427 position: relative;
18664 width: 100%; 19428 width: 121px;
18665 margin-bottom: 20px 19429 -webkit-user-select: none;
18666 } 19430 -moz-user-select: none;
18667 .table thead > tr > th, 19431 -ms-user-select: none;
18668 .table tbody > tr > th, 19432 }
18669 .table tfoot > tr > th, 19433 .hide {
18670 .table thead > tr > td, 19434 display: none;
18671 .table tbody > tr > td, 19435 }
18672 .table tfoot > tr > td { 19436 .label {
18673 padding: 8px;
18674 vertical-align: top;
18675 }
18676 .table thead > tr > th {
18677 vertical-align: bottom;
18678 text-align: left;
18679 border-bottom:2px solid #ddd;
18680 }
18681
18682 tr:hover > td {
18683 background-color: #FFF3E3;
18684 }
18685 .rowColor0 {
18686 background-color: #FFE9CC;
18687 }
18688 .rowColor1 {
18689 background-color: #FFDEB2;
18690 }
18691 .rowColor2 {
18692 background-color: #FFD399;
18693 }
18694 .rowColor3 {
18695 background-color: #FFC87F;
18696 }
18697 .rowColor4 {
18698 background-color: #FFBD66;
18699 }
18700 .rowColor5 {
18701 background-color: #FFB24C;
18702 }
18703 .rowColor6 {
18704 background-color: #FFA733;
18705 }
18706 .rowColor7 {
18707 background-color: #FF9C19;
18708 }
18709 .rowColor8 {
18710 background-color: #FF9100;
18711 }
18712
18713 .tooltip {
18714 display: block; 19437 display: block;
19438 overflow: hidden;
19439 cursor: pointer;
19440 border: 2px solid #999999;
19441 border-radius: 15px;
19442 }
19443 .content {
19444 width: 200%;
19445 margin-left: -100%;
19446 -moz-transition: margin 0.3s ease-in 0s;
19447 -webkit-transition: margin 0.3s ease-in 0s;
19448 -o-transition: margin 0.3s ease-in 0s;
19449 transition: margin 0.3s ease-in 0s;
19450 }
19451 .content:before, .content:after {
19452 float: left;
19453 width: 50%;
19454 height: 30px;
19455 padding: 0;
19456 line-height: 30px;
19457 color: white;
19458 font: 400 14px 'Montserrat', sans-serif;
19459 -moz-box-sizing: border-box;
19460 -webkit-box-sizing: border-box;
19461 box-sizing: border-box;
19462 }
19463 .content:before {
19464 content: {{ checkedText }};
19465 padding-left: 10px;
19466 background-color: #0489C3;
19467 }
19468 .content:after {
19469 content: {{ uncheckedText }};
19470 padding-right: 10px;
19471 background-color: #EEEEEE;
19472 color: #999999;
19473 text-align: right;
19474 }
19475 .dot {
19476 width: 14px;
19477 margin: 8px;
19478 background: #FFFFFF;
19479 border: 2px solid #999999;
19480 border-radius: 15px;
18715 position: absolute; 19481 position: absolute;
18716 visibility: hidden; 19482 top: 0;
18717 opacity: 0; 19483 bottom: 0;
18718 transition: visibility 0s linear 0.5s; 19484 right: 87px;
18719 transition: opacity .4s ease-in-out; 19485 -moz-transition: all 0.3s ease-in 0s;
18720 } 19486 -webkit-transition: all 0.3s ease-in 0s;
18721 19487 -o-transition: all 0.3s ease-in 0s;
18722 tr:hover .tooltip { 19488 transition: all 0.3s ease-in 0s;
18723 display: block; 19489 }
18724 position: absolute; 19490 :checked + .label .content {
18725 top: 100%; 19491 margin-left: 0;
18726 right: 100%; 19492 }
18727 visibility: visible; 19493 :checked + .label .dot {
18728 z-index: 999; 19494 right: 0px;
18729 width: 400px; 19495 }
18730 color: #ffffff;
18731 background-color: #0489c3;
18732 border-top-right-radius: 8px;
18733 border-top-left-radius: 8px;
18734 border-bottom-right-radius: 8px;
18735 border-bottom-left-radius: 8px;
18736 transition: visibility 0s linear 0.5s;
18737 transition: opacity .4s ease-in-out;
18738 opacity: 1;
18739 }
18740
18741 .white {
18742 color: #ffffff;
18743 }
18744
18745 </style> 19496 </style>
18746 <div class="content"> 19497 <div class="switch">
18747 <h1>Sampled CPU profile</h1> 19498 <input type="checkbox" class="hide" id="slide-switch" on-change="{{ change }}">
18748 <div class="memberList"> 19499 <label class="label" for="slide-switch">
18749 <div class="memberItem"> 19500 <div class="content"></div>
18750 <div class="memberName">Timestamp</div> 19501 <div class="dot"></div>
18751 <div class="memberValue">{{ refreshTime }}</div> 19502 </label>
18752 </div>
18753 <div class="memberItem">
18754 <div class="memberName">Time span</div>
18755 <div class="memberValue">{{ timeSpan }}</div>
18756 </div>
18757 <div class="memberItem">
18758 <div class="memberName">Sample count</div>
18759 <div class="memberValue">{{ sampleCount }}</div>
18760 </div>
18761 <div class="memberItem">
18762 <div class="memberName">Sample rate</div>
18763 <div class="memberValue">{{ sampleRate }} Hz</div>
18764 </div>
18765 <div class="memberItem">
18766 <div class="memberName">Sample depth</div>
18767 <div class="memberValue">{{ sampleDepth }} stack frames</div>
18768 </div>
18769 <div class="memberItem">
18770 <div class="memberName">Display cutoff</div>
18771 <div class="memberValue">{{ displayCutoff }}</div>
18772 </div>
18773 <div class="memberItem">
18774 <div class="memberName">Tags</div>
18775 <div class="memberValue">
18776 <select value="{{tagSelector}}">
18777 <option value="uv">User &gt; VM</option>
18778 <option value="u">User</option>
18779 <option value="vu">VM &gt; User</option>
18780 <option value="v">VM</option>
18781 <option value="hide">None</option>
18782 </select>
18783 </div>
18784 </div>
18785 </div>
18786 <hr>
18787 <table id="tableTree" class="table">
18788 <thead>
18789 <tr>
18790 <th>Method</th>
18791 <th>Self</th>
18792 </tr>
18793 </thead>
18794 <tbody>
18795 <tr template="" repeat="{{row in tree.rows }}" style="{{}}">
18796 <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style= "{{ padding(row) }}">
18797 <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
18798 <div style="position: relative;display: inline">
18799 {{row.columns[0]}}
18800 </div>
18801 <code-ref ref="{{ row.code }}"></code-ref>
18802 </td>
18803 <td class="{{ coloring(row) }}" style="position: relative">
18804 {{row.columns[1]}}
18805 <div class="tooltip">
18806 <div class="memberList">
18807 <div class="memberItem">
18808 <div class="memberName white">Kind</div>
18809 <div class="memberValue white">{{ row.tipKind }}</div>
18810 </div>
18811 <div class="memberItem">
18812 <div class="memberName white">Percent of Parent</div>
18813 <div class="memberValue white">{{ row.tipParent }}</div>
18814 </div>
18815 <div class="memberItem">
18816 <div class="memberName white">Sample Count</div>
18817 <div class="memberValue white">{{ row.tipTicks }} ({{ row.tip Exclusive }})</div>
18818 </div>
18819 <div class="memberItem">
18820 <div class="memberName white">Approximate Execution Time</div >
18821 <div class="memberValue white">{{ row.tipTime }}</div>
18822 </div>
18823 </div>
18824 </div>
18825 </td>
18826 </tr>
18827 </tbody>
18828 </table>
18829 </div> 19503 </div>
18830 </template> 19504 </template>
18831 </polymer-element> 19505 </polymer-element>
18832 19506
18833 19507
18834 19508
18835 19509 <polymer-element name="isolate-profile" extends="observatory-element">
18836 19510 <template>
18837 19511 <style>/* Global styles */
18838
18839 <polymer-element name="script-view" extends="observatory-element">
18840 <template>
18841 <style>
18842 /* Global styles */
18843 * { 19512 * {
18844 margin: 0; 19513 margin: 0;
18845 padding: 0; 19514 padding: 0;
18846 font: 400 14px 'Montserrat', sans-serif; 19515 font: 400 14px 'Montserrat', sans-serif;
18847 color: #333; 19516 color: #333;
18848 box-sizing: border-box; 19517 box-sizing: border-box;
18849 } 19518 }
18850 19519
18851 .content { 19520 .content {
18852 padding-left: 10%; 19521 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
19086 background-color: #f5f5f5; 19755 background-color: #f5f5f5;
19087 border: 1px solid #e3e3e3; 19756 border: 1px solid #e3e3e3;
19088 border-radius: 4px; 19757 border-radius: 4px;
19089 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 19758 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
19090 } 19759 }
19091 19760
19092 .break-wrap { 19761 .break-wrap {
19093 word-wrap: break-word; 19762 word-wrap: break-word;
19094 } 19763 }
19095 </style> 19764 </style>
19096 <nav-bar> 19765 <nav-bar>
19097 <top-nav-menu></top-nav-menu> 19766 <top-nav-menu></top-nav-menu>
19098 <isolate-nav-menu isolate="{{ script.isolate }}"> 19767 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
19099 </isolate-nav-menu> 19768 <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
19100 <nav-menu link="{{ script.owningLibrary.link }}" anchor="{{ script.owningLib rary.name }}"></nav-menu> 19769 <nav-refresh callback="{{ refresh }}"></nav-refresh>
19101 <nav-menu link="{{ script.link }}" anchor="{{ script.name }}" last="{{ true }}"></nav-menu> 19770 <nav-control></nav-control>
19102 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav -refresh> 19771 </nav-bar>
19103 <nav-refresh callback="{{ refresh }}"></nav-refresh> 19772 <style>
19104 <nav-control></nav-control> 19773 .table {
19105 </nav-bar> 19774 border-collapse: collapse!important;
19106 19775 width: 100%;
19107 <template if="{{ args['pos'] == null }}"> 19776 margin-bottom: 20px
19108 <script-inset id="scriptInset" script="{{ script }}"> 19777 }
19109 <h1>script {{ script.name }}</h1> 19778 .table thead > tr > th,
19110 </script-inset> 19779 .table tbody > tr > th,
19780 .table tfoot > tr > th,
19781 .table thead > tr > td,
19782 .table tbody > tr > td,
19783 .table tfoot > tr > td {
19784 padding: 8px;
19785 vertical-align: top;
19786 }
19787 .table thead > tr > th {
19788 vertical-align: bottom;
19789 text-align: left;
19790 border-bottom:2px solid #ddd;
19791 }
19792
19793 tr:hover > td {
19794 background-color: #FFF3E3;
19795 }
19796 .rowColor0 {
19797 background-color: #FFE9CC;
19798 }
19799 .rowColor1 {
19800 background-color: #FFDEB2;
19801 }
19802 .rowColor2 {
19803 background-color: #FFD399;
19804 }
19805 .rowColor3 {
19806 background-color: #FFC87F;
19807 }
19808 .rowColor4 {
19809 background-color: #FFBD66;
19810 }
19811 .rowColor5 {
19812 background-color: #FFB24C;
19813 }
19814 .rowColor6 {
19815 background-color: #FFA733;
19816 }
19817 .rowColor7 {
19818 background-color: #FF9C19;
19819 }
19820 .rowColor8 {
19821 background-color: #FF9100;
19822 }
19823
19824 .tooltip {
19825 display: block;
19826 position: absolute;
19827 visibility: hidden;
19828 opacity: 0;
19829 transition: visibility 0s linear 0.5s;
19830 transition: opacity .4s ease-in-out;
19831 }
19832
19833 tr:hover .tooltip {
19834 display: block;
19835 position: absolute;
19836 top: 100%;
19837 right: 100%;
19838 visibility: visible;
19839 z-index: 999;
19840 width: 400px;
19841 color: #ffffff;
19842 background-color: #0489c3;
19843 border-top-right-radius: 8px;
19844 border-top-left-radius: 8px;
19845 border-bottom-right-radius: 8px;
19846 border-bottom-left-radius: 8px;
19847 transition: visibility 0s linear 0.5s;
19848 transition: opacity .4s ease-in-out;
19849 opacity: 1;
19850 }
19851
19852 .white {
19853 color: #ffffff;
19854 }
19855
19856 </style>
19857 <div class="content">
19858 <h1>Sampled CPU profile</h1>
19859 <div class="memberList">
19860 <div class="memberItem">
19861 <div class="memberName">Timestamp</div>
19862 <div class="memberValue">{{ refreshTime }}</div>
19863 </div>
19864 <div class="memberItem">
19865 <div class="memberName">Time span</div>
19866 <div class="memberValue">{{ timeSpan }}</div>
19867 </div>
19868 <div class="memberItem">
19869 <div class="memberName">Sample count</div>
19870 <div class="memberValue">{{ sampleCount }}</div>
19871 </div>
19872 <div class="memberItem">
19873 <div class="memberName">Sample rate</div>
19874 <div class="memberValue">{{ sampleRate }} Hz</div>
19875 </div>
19876 <div class="memberItem">
19877 <div class="memberName">Sample depth</div>
19878 <div class="memberValue">{{ sampleDepth }} stack frames</div>
19879 </div>
19880 <div class="memberItem">
19881 <div class="memberName">Display cutoff</div>
19882 <div class="memberValue">{{ displayCutoff }}</div>
19883 </div>
19884 <div class="memberItem">
19885 <div class="memberName">Tags</div>
19886 <div class="memberValue">
19887 <select value="{{tagSelector}}">
19888 <option value="uv">User &gt; VM</option>
19889 <option value="u">User</option>
19890 <option value="vu">VM &gt; User</option>
19891 <option value="v">VM</option>
19892 <option value="hide">None</option>
19893 </select>
19894 </div>
19895 </div>
19896 </div>
19897 <hr>
19898 <table id="tableTree" class="table">
19899 <thead>
19900 <tr>
19901 <th>Method</th>
19902 <th>Self</th>
19903 </tr>
19904 </thead>
19905 <tbody>
19906 <tr template="" repeat="{{row in tree.rows }}" style="{{}}">
19907 <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style= "{{ padding(row) }}">
19908 <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
19909 <div style="position: relative;display: inline">
19910 {{row.columns[0]}}
19911 </div>
19912 <code-ref ref="{{ row.code }}"></code-ref>
19913 </td>
19914 <td class="{{ coloring(row) }}" style="position: relative">
19915 {{row.columns[1]}}
19916 <div class="tooltip">
19917 <div class="memberList">
19918 <div class="memberItem">
19919 <div class="memberName white">Kind</div>
19920 <div class="memberValue white">{{ row.tipKind }}</div>
19921 </div>
19922 <div class="memberItem">
19923 <div class="memberName white">Percent of Parent</div>
19924 <div class="memberValue white">{{ row.tipParent }}</div>
19925 </div>
19926 <div class="memberItem">
19927 <div class="memberName white">Sample Count</div>
19928 <div class="memberValue white">{{ row.tipTicks }} ({{ row.tip Exclusive }})</div>
19929 </div>
19930 <div class="memberItem">
19931 <div class="memberName white">Approximate Execution Time</div >
19932 <div class="memberValue white">{{ row.tipTime }}</div>
19933 </div>
19934 </div>
19935 </div>
19936 </td>
19937 </tr>
19938 </tbody>
19939 </table>
19940 </div>
19111 </template> 19941 </template>
19112
19113 <template if="{{ args['pos'] != null }}">
19114 <script-inset id="scriptInset" script="{{ script }}" currentpos="{{ args['po s'] | parseInt }}">
19115 <h1>script {{ script.name }}</h1>
19116 </script-inset>
19117 </template>
19118
19119 </template>
19120 </polymer-element> 19942 </polymer-element>
19121 19943
19122 19944
19123 19945
19946
19947
19124 19948
19125 19949
19126 19950
19127 19951
19128 <polymer-element name="stack-trace" extends="observatory-element"> 19952
19129 <template> 19953 <polymer-element name="script-view" extends="observatory-element">
19130 <style> 19954 <template>
19131 /* Global styles */ 19955 <style>/* Global styles */
19132 * { 19956 * {
19133 margin: 0; 19957 margin: 0;
19134 padding: 0; 19958 padding: 0;
19135 font: 400 14px 'Montserrat', sans-serif; 19959 font: 400 14px 'Montserrat', sans-serif;
19136 color: #333; 19960 color: #333;
19137 box-sizing: border-box; 19961 box-sizing: border-box;
19138 } 19962 }
19139 19963
19140 .content { 19964 .content {
19141 padding-left: 10%; 19965 padding-left: 10%;
(...skipping 233 matching lines...) Expand 10 before | Expand all | Expand 10 after
19375 background-color: #f5f5f5; 20199 background-color: #f5f5f5;
19376 border: 1px solid #e3e3e3; 20200 border: 1px solid #e3e3e3;
19377 border-radius: 4px; 20201 border-radius: 4px;
19378 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); 20202 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
19379 } 20203 }
19380 20204
19381 .break-wrap { 20205 .break-wrap {
19382 word-wrap: break-word; 20206 word-wrap: break-word;
19383 } 20207 }
19384 </style> 20208 </style>
19385 <nav-bar> 20209 <nav-bar>
19386 <top-nav-menu></top-nav-menu> 20210 <top-nav-menu></top-nav-menu>
19387 <isolate-nav-menu isolate="{{ trace.isolate }}"></isolate-nav-menu> 20211 <isolate-nav-menu isolate="{{ script.isolate }}">
19388 <nav-menu link="{{ trace.isolate.relativeLink('stacktrace') }}" anchor="st ack trace" last="{{ true }}"></nav-menu> 20212 </isolate-nav-menu>
19389 <nav-refresh callback="{{ refresh }}"></nav-refresh> 20213 <nav-menu link="{{ script.owningLibrary.link }}" anchor="{{ script.owningLib rary.name }}"></nav-menu>
19390 <nav-control></nav-control> 20214 <nav-menu link="{{ script.link }}" anchor="{{ script.name }}" last="{{ true }}"></nav-menu>
19391 </nav-bar> 20215 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav -refresh>
19392 <template if="{{ trace['members'].isEmpty }}"> 20216 <nav-refresh callback="{{ refresh }}"></nav-refresh>
19393 <div class="content"> 20217 <nav-control></nav-control>
19394 <em>No stack</em> 20218 </nav-bar>
19395 </div> 20219
19396 </template> 20220 <template if="{{ args['pos'] == null }}">
19397 <template if="{{ trace['members'].isNotEmpty }}"> 20221 <script-inset id="scriptInset" script="{{ script }}">
19398 <ul class="list-group"> 20222 <h1>script {{ script.name }}</h1>
19399 <template repeat="{{ frame in trace['members'] }}"> 20223 </script-inset>
19400 <li class="list-group-item">
19401 <stack-frame frame="{{ frame }}"></stack-frame>
19402 </li>
19403 </template>
19404 </ul>
19405 </template>
19406 </template> 20224 </template>
20225
20226 <template if="{{ args['pos'] != null }}">
20227 <script-inset id="scriptInset" script="{{ script }}" currentpos="{{ args['po s'] | parseInt }}">
20228 <h1>script {{ script.name }}</h1>
20229 </script-inset>
20230 </template>
20231
20232 </template>
19407 </polymer-element> 20233 </polymer-element>
19408 20234
19409 20235
19410 20236
19411 20237
19412 20238
19413 20239
19414 20240
19415 20241
19416 20242
19417 20243
19418 20244
19419 20245
20246
19420 <polymer-element name="vm-view" extends="observatory-element"> 20247 <polymer-element name="vm-view" extends="observatory-element">
19421 <template> 20248 <template>
19422 <style> 20249 <style>/* Global styles */
19423 /* Global styles */
19424 * { 20250 * {
19425 margin: 0; 20251 margin: 0;
19426 padding: 0; 20252 padding: 0;
19427 font: 400 14px 'Montserrat', sans-serif; 20253 font: 400 14px 'Montserrat', sans-serif;
19428 color: #333; 20254 color: #333;
19429 box-sizing: border-box; 20255 box-sizing: border-box;
19430 } 20256 }
19431 20257
19432 .content { 20258 .content {
19433 padding-left: 10%; 20259 padding-left: 10%;
(...skipping 290 matching lines...) Expand 10 before | Expand all | Expand 10 after
19724 <template repeat="{{ isolate in vm.isolates }}"> 20550 <template repeat="{{ isolate in vm.isolates }}">
19725 <li class="list-group-item"> 20551 <li class="list-group-item">
19726 <isolate-summary isolate="{{ isolate }}"></isolate-summary> 20552 <isolate-summary isolate="{{ isolate }}"></isolate-summary>
19727 </li> 20553 </li>
19728 <hr> 20554 <hr>
19729 </template> 20555 </template>
19730 </ul> 20556 </ul>
19731 </template> 20557 </template>
19732 </polymer-element> 20558 </polymer-element>
19733 20559
20560
19734 <polymer-element name="service-view" extends="observatory-element"> 20561 <polymer-element name="service-view" extends="observatory-element">
19735 <!-- This element explicitly manages the child elements to avoid setting 20562 <!-- This element explicitly manages the child elements to avoid setting
19736 an observable property on the old element to an invalid type. --> 20563 an observable property on the old element to an invalid type. -->
19737 </polymer-element> 20564 </polymer-element>
19738 20565
19739 <polymer-element name="trace-view" extends="observatory-element"> 20566 <polymer-element name="trace-view" extends="observatory-element">
19740 <template> 20567 <template>
19741 <style> 20568 <style>/* Global styles */
19742 /* Global styles */
19743 * { 20569 * {
19744 margin: 0; 20570 margin: 0;
19745 padding: 0; 20571 padding: 0;
19746 font: 400 14px 'Montserrat', sans-serif; 20572 font: 400 14px 'Montserrat', sans-serif;
19747 color: #333; 20573 color: #333;
19748 box-sizing: border-box; 20574 box-sizing: border-box;
19749 } 20575 }
19750 20576
19751 .content { 20577 .content {
19752 padding-left: 10%; 20578 padding-left: 10%;
(...skipping 260 matching lines...) Expand 10 before | Expand all | Expand 10 after
20013 </div> 20839 </div>
20014 <br> 20840 <br>
20015 <br> 20841 <br>
20016 <br> 20842 <br>
20017 </template> 20843 </template>
20018 </template> 20844 </template>
20019 </polymer-element> 20845 </polymer-element>
20020 20846
20021 <polymer-element name="map-viewer" extends="observatory-element"> 20847 <polymer-element name="map-viewer" extends="observatory-element">
20022 <template> 20848 <template>
20023 <style> 20849 <style>/* Global styles */
20024 /* Global styles */
20025 * { 20850 * {
20026 margin: 0; 20851 margin: 0;
20027 padding: 0; 20852 padding: 0;
20028 font: 400 14px 'Montserrat', sans-serif; 20853 font: 400 14px 'Montserrat', sans-serif;
20029 color: #333; 20854 color: #333;
20030 box-sizing: border-box; 20855 box-sizing: border-box;
20031 } 20856 }
20032 20857
20033 .content { 20858 .content {
20034 padding-left: 10%; 20859 padding-left: 10%;
(...skipping 264 matching lines...) Expand 10 before | Expand all | Expand 10 after
20299 </template> 21124 </template>
20300 </div> 21125 </div>
20301 </template> 21126 </template>
20302 </curly-block> 21127 </curly-block>
20303 </template> 21128 </template>
20304 </template> 21129 </template>
20305 </polymer-element> 21130 </polymer-element>
20306 21131
20307 <polymer-element name="list-viewer" extends="observatory-element"> 21132 <polymer-element name="list-viewer" extends="observatory-element">
20308 <template> 21133 <template>
20309 <style> 21134 <style>/* Global styles */
20310 /* Global styles */
20311 * { 21135 * {
20312 margin: 0; 21136 margin: 0;
20313 padding: 0; 21137 padding: 0;
20314 font: 400 14px 'Montserrat', sans-serif; 21138 font: 400 14px 'Montserrat', sans-serif;
20315 color: #333; 21139 color: #333;
20316 box-sizing: border-box; 21140 box-sizing: border-box;
20317 } 21141 }
20318 21142
20319 .content { 21143 .content {
20320 padding-left: 10%; 21144 padding-left: 10%;
(...skipping 261 matching lines...) Expand 10 before | Expand all | Expand 10 after
20582 </div> 21406 </div>
20583 </template> 21407 </template>
20584 </div> 21408 </div>
20585 </template> 21409 </template>
20586 </curly-block> 21410 </curly-block>
20587 </template> 21411 </template>
20588 </template> 21412 </template>
20589 </polymer-element> 21413 </polymer-element>
20590 21414
20591 21415
21416
20592 <polymer-element name="observatory-application" extends="observatory-element"> 21417 <polymer-element name="observatory-application" extends="observatory-element">
20593 <!-- This element explicitly manages its child elements --> 21418 <!-- This element explicitly manages its child elements -->
20594 </polymer-element> 21419 </polymer-element>
20595 21420
20596 21421
20597 21422
20598 21423
20599 21424
21425
21426
21427
21428
21429
21430
20600 <polymer-element name="service-exception-view" extends="observatory-element"> 21431 <polymer-element name="service-exception-view" extends="observatory-element">
20601 <template> 21432 <template>
20602 <style> 21433 <style>/* Global styles */
20603 /* Global styles */
20604 * { 21434 * {
20605 margin: 0; 21435 margin: 0;
20606 padding: 0; 21436 padding: 0;
20607 font: 400 14px 'Montserrat', sans-serif; 21437 font: 400 14px 'Montserrat', sans-serif;
20608 color: #333; 21438 color: #333;
20609 box-sizing: border-box; 21439 box-sizing: border-box;
20610 } 21440 }
20611 21441
20612 .content { 21442 .content {
20613 padding-left: 10%; 21443 padding-left: 10%;
(...skipping 253 matching lines...) Expand 10 before | Expand all | Expand 10 after
20867 </template> 21697 </template>
20868 </div> 21698 </div>
20869 </template> 21699 </template>
20870 </polymer-element> 21700 </polymer-element>
20871 21701
20872 21702
20873 21703
20874 21704
20875 21705
20876 21706
21707
20877 <polymer-element name="service-error-view" extends="observatory-element"> 21708 <polymer-element name="service-error-view" extends="observatory-element">
20878 <template> 21709 <template>
20879 <style> 21710 <style>/* Global styles */
20880 /* Global styles */
20881 * { 21711 * {
20882 margin: 0; 21712 margin: 0;
20883 padding: 0; 21713 padding: 0;
20884 font: 400 14px 'Montserrat', sans-serif; 21714 font: 400 14px 'Montserrat', sans-serif;
20885 color: #333; 21715 color: #333;
20886 box-sizing: border-box; 21716 box-sizing: border-box;
20887 } 21717 }
20888 21718
20889 .content { 21719 .content {
20890 padding-left: 10%; 21720 padding-left: 10%;
(...skipping 249 matching lines...) Expand 10 before | Expand all | Expand 10 after
21140 <br> 21970 <br>
21141 <div class="well">{{ error.message }}</div> 21971 <div class="well">{{ error.message }}</div>
21142 </div> 21972 </div>
21143 </template> 21973 </template>
21144 </polymer-element> 21974 </polymer-element>
21145 21975
21146 21976
21147 21977
21148 21978
21149 21979
21980
21981
21150 <polymer-element name="vm-connect-target" extends="observatory-element"> 21982 <polymer-element name="vm-connect-target" extends="observatory-element">
21151 <template> 21983 <template>
21152 <style> 21984 <style>
21153 .delete-button { 21985 .delete-button {
21154 padding: 4px; 21986 padding: 4px;
21155 background: transparent; 21987 background: transparent;
21156 border: none !important; 21988 border: none !important;
21157 } 21989 }
21158 .delete-button:hover { 21990 .delete-button:hover {
21159 background: #ff0000; 21991 background: #ff0000;
21160 } 21992 }
21161 </style> 21993 </style>
21162 <style> 21994 <style>/* Global styles */
21163 /* Global styles */
21164 * { 21995 * {
21165 margin: 0; 21996 margin: 0;
21166 padding: 0; 21997 padding: 0;
21167 font: 400 14px 'Montserrat', sans-serif; 21998 font: 400 14px 'Montserrat', sans-serif;
21168 color: #333; 21999 color: #333;
21169 box-sizing: border-box; 22000 box-sizing: border-box;
21170 } 22001 }
21171 22002
21172 .content { 22003 .content {
21173 padding-left: 10%; 22004 padding-left: 10%;
(...skipping 249 matching lines...) Expand 10 before | Expand all | Expand 10 after
21423 </template> 22254 </template>
21424 <template if="{{ !isChromeTarget }}"> 22255 <template if="{{ !isChromeTarget }}">
21425 <button class="delete-button" on-click="{{ deleteVm }}">✖ Remove</button > 22256 <button class="delete-button" on-click="{{ deleteVm }}">✖ Remove</button >
21426 </template> 22257 </template>
21427 </span> 22258 </span>
21428 </template> 22259 </template>
21429 </polymer-element> 22260 </polymer-element>
21430 22261
21431 <polymer-element name="vm-connect" extends="observatory-element"> 22262 <polymer-element name="vm-connect" extends="observatory-element">
21432 <template> 22263 <template>
21433 <style> 22264 <style>/* Global styles */
21434 /* Global styles */
21435 * { 22265 * {
21436 margin: 0; 22266 margin: 0;
21437 padding: 0; 22267 padding: 0;
21438 font: 400 14px 'Montserrat', sans-serif; 22268 font: 400 14px 'Montserrat', sans-serif;
21439 color: #333; 22269 color: #333;
21440 box-sizing: border-box; 22270 box-sizing: border-box;
21441 } 22271 }
21442 22272
21443 .content { 22273 .content {
21444 padding-left: 10%; 22274 padding-left: 10%;
(...skipping 298 matching lines...) Expand 10 before | Expand all | Expand 10 after
21743 </div> 22573 </div>
21744 </div> 22574 </div>
21745 </div> 22575 </div>
21746 </template> 22576 </template>
21747 </polymer-element> 22577 </polymer-element>
21748 22578
21749 22579
21750 22580
21751 22581
21752 22582
22583
21753 <polymer-element name="vm-ref" extends="service-ref"> 22584 <polymer-element name="vm-ref" extends="service-ref">
21754 <template><style> 22585 <template><style>/* Global styles */
21755 /* Global styles */
21756 * { 22586 * {
21757 margin: 0; 22587 margin: 0;
21758 padding: 0; 22588 padding: 0;
21759 font: 400 14px 'Montserrat', sans-serif; 22589 font: 400 14px 'Montserrat', sans-serif;
21760 color: #333; 22590 color: #333;
21761 box-sizing: border-box; 22591 box-sizing: border-box;
21762 } 22592 }
21763 22593
21764 .content { 22594 .content {
21765 padding-left: 10%; 22595 padding-left: 10%;
(...skipping 239 matching lines...) Expand 10 before | Expand all | Expand 10 after
22005 .break-wrap { 22835 .break-wrap {
22006 word-wrap: break-word; 22836 word-wrap: break-word;
22007 } 22837 }
22008 </style> 22838 </style>
22009 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a> 22839 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
22010 </template> 22840 </template>
22011 </polymer-element> 22841 </polymer-element>
22012 22842
22013 22843
22014 22844
22845
22846 </div>
22015 <observatory-application devtools="true"></observatory-application> 22847 <observatory-application devtools="true"></observatory-application>
22016 22848
22849
22017 <script src="index_devtools.html_bootstrap.dart.js" async=""></script></body></h tml> 22850 <script src="index_devtools.html_bootstrap.dart.js" async=""></script></body></h tml>
OLDNEW
« no previous file with comments | « runtime/bin/vmservice/observatory/deployed/web/index.html_bootstrap.dart.js ('k') | runtime/bin/vmservice/observatory/deployed/web/index_devtools.html_bootstrap.dart.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698