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

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

Issue 745423003: Upgrade Observatory to latest SDK (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 <!DOCTYPE html><html style="height: 100%"><head><script src="packages/web_compon ents/dart_support.js"></script> 1 <!DOCTYPE html><html style="height: 100%"><head>
2
3 <title>Dart VM Observatory</title> 2 <title>Dart VM Observatory</title>
4 <meta charset="utf-8"> 3 <meta charset="utf-8">
5 <script src="packages/web_components/platform.js"></script> 4 <script src="packages/web_components/platform.js"></script>
5 <script src="packages/web_components/dart_support.js"></script>
6 6
7 7
8 8
9 9
10 10
11 11
12 </head> 12 </head>
13 <body style="height:100%"><div hidden=""><style shim-shadowdom=""> 13 <body style="height:100%"><div hidden=""><style shim-shadowdom="">
14 /******************************* 14 /*******************************
15 Flex Layout 15 Flex Layout
(...skipping 277 matching lines...) Expand 10 before | Expand all | Expand 10 after
293 293
294 <script> 294 <script>
295 // TODO(sigmund): remove this script tag (dartbug.com/19650). This empty 295 // TODO(sigmund): remove this script tag (dartbug.com/19650). This empty
296 // script tag is necessary to work around a bug in Chrome 36. 296 // script tag is necessary to work around a bug in Chrome 36.
297 </script> 297 </script>
298 298
299 <!-- unminified for debugging: 299 <!-- unminified for debugging:
300 <link rel="import" href="src/js/polymer/layout.html"> 300 <link rel="import" href="src/js/polymer/layout.html">
301 <script src="src/js/polymer/polymer.concat.js"></script> 301 <script src="src/js/polymer/polymer.concat.js"></script>
302 --> 302 -->
303 <script type="text/javascript" src="https://www.google.com/jsapi"></script><styl e>/* Global styles */ 303 <script type="text/javascript" src="https://www.google.com/jsapi"></script><link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css">
304 * {
305 margin: 0;
306 padding: 0;
307 font: 400 14px 'Montserrat', sans-serif;
308 color: #333;
309 box-sizing: border-box;
310 }
311
312 .content {
313 padding-left: 10%;
314 font: 400 14px 'Montserrat', sans-serif;
315 }
316
317 .content-centered {
318 padding-left: 10%;
319 padding-right: 10%;
320 font: 400 14px 'Montserrat', sans-serif;
321 }
322
323 .content-centered-big {
324 padding-left: 5%;
325 padding-right: 5%;
326 font: 400 14px 'Montserrat', sans-serif;
327 }
328
329 h1 {
330 font: 400 18px 'Montserrat', sans-serif;
331 }
332
333 .memberList {
334 display: table;
335 }
336
337 .memberItem {
338 display: table-row;
339 }
340
341 .memberName, .memberValue {
342 display: table-cell;
343 vertical-align: top;
344 padding: 3px 0 3px 1em;
345 font: 400 14px 'Montserrat', sans-serif;
346 }
347
348 .memberSmall {
349 display: table-cell;
350 vertical-align: top;
351 padding: 3px 0 3px 1em;
352 font: 400 12px 'Montserrat', sans-serif;
353 }
354
355 .monospace {
356 font-family: consolas, courier, monospace;
357 font-size: 1em;
358 line-height: 1.2em;
359 white-space: nowrap;
360 }
361
362 a {
363 color: #0489c3;
364 text-decoration: none;
365 }
366
367 a:hover {
368 text-decoration: underline;
369 }
370
371 em {
372 color: inherit;
373 font-style: italic;
374 }
375
376 b {
377 color: inherit;
378 font-weight: bold;
379 }
380
381 hr {
382 margin-top: 20px;
383 margin-bottom: 20px;
384 border: 0;
385 border-top: 1px solid #eee;
386 height: 0;
387 box-sizing: content-box;
388 }
389
390 .list-group {
391 padding-left: 0;
392 margin-bottom: 20px;
393 }
394
395 .list-group-item {
396 position: relative;
397 display: block;
398 padding: 10px 15px;
399 margin-bottom: -1px;
400 background-color: #fff;
401 }
402
403 .list-group-item:first-child {
404 /* rounded top corners */
405 border-top-right-radius:4px;
406 border-top-left-radius:4px;
407 }
408
409 .list-group-item:last-child {
410 margin-bottom: 0;
411 /* rounded bottom corners */
412 border-bottom-right-radius: 4px;
413 border-bottom-left-radius:4px;
414 }
415
416 /* Flex row container */
417 .flex-row {
418 display: flex;
419 flex-direction: row;
420 }
421
422 /* Flex column container */
423 .flex-column {
424 display: flex;
425 flex-direction: column;
426 }
427
428 .flex-item-fit {
429 flex-grow: 1;
430 flex-shrink: 1;
431 flex-basis: auto;
432 }
433
434 .flex-item-no-shrink {
435 flex-grow: 0;
436 flex-shrink: 0;
437 flex-basis: auto;
438 }
439
440 .flex-item-fill {
441 flex-grow: 0;
442 flex-shrink: 1; /* shrink when pressured */
443 flex-basis: 100%; /* try and take 100% */
444 }
445
446 .flex-item-fixed-1-12 {
447 flex-grow: 0;
448 flex-shrink: 0;
449 flex-basis: 8.3%;
450 }
451
452 .flex-item-fixed-2-12 {
453 flex-grow: 0;
454 flex-shrink: 0;
455 flex-basis: 16.6%;
456 }
457
458 .flex-item-fixed-4-12 {
459 flex-grow: 0;
460 flex-shrink: 0;
461 flex-basis: 33.3333%;
462 }
463
464 .flex-item-fixed-6-12, .flex-item-50-percent {
465 flex-grow: 0;
466 flex-shrink: 0;
467 flex-basis: 50%;
468 }
469
470 .flex-item-fixed-8-12 {
471 flex-grow: 0;
472 flex-shrink: 0;
473 flex-basis: 66.6666%;
474 }
475
476 .flex-item-fixed-9-12 {
477 flex-grow: 0;
478 flex-shrink: 0;
479 flex-basis: 75%;
480 }
481
482
483 .flex-item-fixed-12-12 {
484 flex-grow: 0;
485 flex-shrink: 0;
486 flex-basis: 100%;
487 }
488
489 .flex-item-10-percent {
490 flex-grow: 0;
491 flex-shrink: 0;
492 flex-basis: 10%;
493 }
494
495 .flex-item-15-percent {
496 flex-grow: 0;
497 flex-shrink: 0;
498 flex-basis: 15%;
499 }
500
501 .flex-item-20-percent {
502 flex-grow: 0;
503 flex-shrink: 0;
504 flex-basis: 20%;
505 }
506
507 .flex-item-30-percent {
508 flex-grow: 0;
509 flex-shrink: 0;
510 flex-basis: 30%;
511 }
512
513 .flex-item-40-percent {
514 flex-grow: 0;
515 flex-shrink: 0;
516 flex-basis: 40%;
517 }
518
519 .flex-item-50-percent {
520 flex-grow: 0;
521 flex-shrink: 0;
522 flex-basis: 50%;
523 }
524
525 .flex-item-60-percent {
526 flex-grow: 0;
527 flex-shrink: 0;
528 flex-basis: 60%;
529 }
530
531 .flex-item-70-percent {
532 flex-grow: 0;
533 flex-shrink: 0;
534 flex-basis: 70%;
535 }
536
537 .flex-item-80-percent {
538 flex-grow: 0;
539 flex-shrink: 0;
540 flex-basis: 80%;
541 }
542
543 .well {
544 min-height: 20px;
545 padding: 19px;
546 margin-bottom: 20px;
547 background-color: #f5f5f5;
548 border: 1px solid #e3e3e3;
549 border-radius: 4px;
550 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
551 }
552
553 .break-wrap {
554 word-wrap: break-word;
555 }
556 </style>
557 304
558 305
559 306
560 <polymer-element name="curly-block"> 307 <polymer-element name="curly-block">
561 <template> 308 <template>
562 <style> 309 <style>
563 .idle { 310 .idle {
564 display: inline-block; 311 display: inline-block;
565 color: #0489c3; 312 color: #0489c3;
566 cursor: pointer; 313 cursor: pointer;
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after
608 355
609 356
610 357
611 <polymer-element name="service-ref" extends="observatory-element"> 358 <polymer-element name="service-ref" extends="observatory-element">
612 </polymer-element> 359 </polymer-element>
613 360
614 <polymer-element name="any-service-ref" extends="observatory-element"> 361 <polymer-element name="any-service-ref" extends="observatory-element">
615 </polymer-element> 362 </polymer-element>
616 363
617 <polymer-element name="object-ref" extends="service-ref"> 364 <polymer-element name="object-ref" extends="service-ref">
618 <template><style>/* Global styles */ 365 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css">
619 * {
620 margin: 0;
621 padding: 0;
622 font: 400 14px 'Montserrat', sans-serif;
623 color: #333;
624 box-sizing: border-box;
625 }
626
627 .content {
628 padding-left: 10%;
629 font: 400 14px 'Montserrat', sans-serif;
630 }
631
632 .content-centered {
633 padding-left: 10%;
634 padding-right: 10%;
635 font: 400 14px 'Montserrat', sans-serif;
636 }
637
638 .content-centered-big {
639 padding-left: 5%;
640 padding-right: 5%;
641 font: 400 14px 'Montserrat', sans-serif;
642 }
643
644 h1 {
645 font: 400 18px 'Montserrat', sans-serif;
646 }
647
648 .memberList {
649 display: table;
650 }
651
652 .memberItem {
653 display: table-row;
654 }
655
656 .memberName, .memberValue {
657 display: table-cell;
658 vertical-align: top;
659 padding: 3px 0 3px 1em;
660 font: 400 14px 'Montserrat', sans-serif;
661 }
662
663 .memberSmall {
664 display: table-cell;
665 vertical-align: top;
666 padding: 3px 0 3px 1em;
667 font: 400 12px 'Montserrat', sans-serif;
668 }
669
670 .monospace {
671 font-family: consolas, courier, monospace;
672 font-size: 1em;
673 line-height: 1.2em;
674 white-space: nowrap;
675 }
676
677 a {
678 color: #0489c3;
679 text-decoration: none;
680 }
681
682 a:hover {
683 text-decoration: underline;
684 }
685
686 em {
687 color: inherit;
688 font-style: italic;
689 }
690
691 b {
692 color: inherit;
693 font-weight: bold;
694 }
695
696 hr {
697 margin-top: 20px;
698 margin-bottom: 20px;
699 border: 0;
700 border-top: 1px solid #eee;
701 height: 0;
702 box-sizing: content-box;
703 }
704
705 .list-group {
706 padding-left: 0;
707 margin-bottom: 20px;
708 }
709
710 .list-group-item {
711 position: relative;
712 display: block;
713 padding: 10px 15px;
714 margin-bottom: -1px;
715 background-color: #fff;
716 }
717
718 .list-group-item:first-child {
719 /* rounded top corners */
720 border-top-right-radius:4px;
721 border-top-left-radius:4px;
722 }
723
724 .list-group-item:last-child {
725 margin-bottom: 0;
726 /* rounded bottom corners */
727 border-bottom-right-radius: 4px;
728 border-bottom-left-radius:4px;
729 }
730
731 /* Flex row container */
732 .flex-row {
733 display: flex;
734 flex-direction: row;
735 }
736
737 /* Flex column container */
738 .flex-column {
739 display: flex;
740 flex-direction: column;
741 }
742
743 .flex-item-fit {
744 flex-grow: 1;
745 flex-shrink: 1;
746 flex-basis: auto;
747 }
748
749 .flex-item-no-shrink {
750 flex-grow: 0;
751 flex-shrink: 0;
752 flex-basis: auto;
753 }
754
755 .flex-item-fill {
756 flex-grow: 0;
757 flex-shrink: 1; /* shrink when pressured */
758 flex-basis: 100%; /* try and take 100% */
759 }
760
761 .flex-item-fixed-1-12 {
762 flex-grow: 0;
763 flex-shrink: 0;
764 flex-basis: 8.3%;
765 }
766
767 .flex-item-fixed-2-12 {
768 flex-grow: 0;
769 flex-shrink: 0;
770 flex-basis: 16.6%;
771 }
772
773 .flex-item-fixed-4-12 {
774 flex-grow: 0;
775 flex-shrink: 0;
776 flex-basis: 33.3333%;
777 }
778
779 .flex-item-fixed-6-12, .flex-item-50-percent {
780 flex-grow: 0;
781 flex-shrink: 0;
782 flex-basis: 50%;
783 }
784
785 .flex-item-fixed-8-12 {
786 flex-grow: 0;
787 flex-shrink: 0;
788 flex-basis: 66.6666%;
789 }
790
791 .flex-item-fixed-9-12 {
792 flex-grow: 0;
793 flex-shrink: 0;
794 flex-basis: 75%;
795 }
796
797
798 .flex-item-fixed-12-12 {
799 flex-grow: 0;
800 flex-shrink: 0;
801 flex-basis: 100%;
802 }
803
804 .flex-item-10-percent {
805 flex-grow: 0;
806 flex-shrink: 0;
807 flex-basis: 10%;
808 }
809
810 .flex-item-15-percent {
811 flex-grow: 0;
812 flex-shrink: 0;
813 flex-basis: 15%;
814 }
815
816 .flex-item-20-percent {
817 flex-grow: 0;
818 flex-shrink: 0;
819 flex-basis: 20%;
820 }
821
822 .flex-item-30-percent {
823 flex-grow: 0;
824 flex-shrink: 0;
825 flex-basis: 30%;
826 }
827
828 .flex-item-40-percent {
829 flex-grow: 0;
830 flex-shrink: 0;
831 flex-basis: 40%;
832 }
833
834 .flex-item-50-percent {
835 flex-grow: 0;
836 flex-shrink: 0;
837 flex-basis: 50%;
838 }
839
840 .flex-item-60-percent {
841 flex-grow: 0;
842 flex-shrink: 0;
843 flex-basis: 60%;
844 }
845
846 .flex-item-70-percent {
847 flex-grow: 0;
848 flex-shrink: 0;
849 flex-basis: 70%;
850 }
851
852 .flex-item-80-percent {
853 flex-grow: 0;
854 flex-shrink: 0;
855 flex-basis: 80%;
856 }
857
858 .well {
859 min-height: 20px;
860 padding: 19px;
861 margin-bottom: 20px;
862 background-color: #f5f5f5;
863 border: 1px solid #e3e3e3;
864 border-radius: 4px;
865 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
866 }
867
868 .break-wrap {
869 word-wrap: break-word;
870 }
871 </style>
872 <template if="{{ nameIsEmpty }}"> 366 <template if="{{ nameIsEmpty }}">
873 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.vmType }}</em></a> 367 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ ref.vmType }}</em></a>
874 </template> 368 </template>
875 <template if="{{ !nameIsEmpty }}"> 369 <template if="{{ !nameIsEmpty }}">
876 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ name }}</em></a> 370 <a on-click="{{ goto }}" _href="{{ url }}"><em>{{ name }}</em></a>
877 </template> 371 </template>
878 </template> 372 </template>
879 </polymer-element> 373 </polymer-element>
880 374
881 375
882 376
883 <polymer-element name="instance-ref" extends="service-ref"> 377 <polymer-element name="instance-ref" extends="service-ref">
884 <template> 378 <template>
885 <style>/* Global styles */ 379 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
886 * {
887 margin: 0;
888 padding: 0;
889 font: 400 14px 'Montserrat', sans-serif;
890 color: #333;
891 box-sizing: border-box;
892 }
893
894 .content {
895 padding-left: 10%;
896 font: 400 14px 'Montserrat', sans-serif;
897 }
898
899 .content-centered {
900 padding-left: 10%;
901 padding-right: 10%;
902 font: 400 14px 'Montserrat', sans-serif;
903 }
904
905 .content-centered-big {
906 padding-left: 5%;
907 padding-right: 5%;
908 font: 400 14px 'Montserrat', sans-serif;
909 }
910
911 h1 {
912 font: 400 18px 'Montserrat', sans-serif;
913 }
914
915 .memberList {
916 display: table;
917 }
918
919 .memberItem {
920 display: table-row;
921 }
922
923 .memberName, .memberValue {
924 display: table-cell;
925 vertical-align: top;
926 padding: 3px 0 3px 1em;
927 font: 400 14px 'Montserrat', sans-serif;
928 }
929
930 .memberSmall {
931 display: table-cell;
932 vertical-align: top;
933 padding: 3px 0 3px 1em;
934 font: 400 12px 'Montserrat', sans-serif;
935 }
936
937 .monospace {
938 font-family: consolas, courier, monospace;
939 font-size: 1em;
940 line-height: 1.2em;
941 white-space: nowrap;
942 }
943
944 a {
945 color: #0489c3;
946 text-decoration: none;
947 }
948
949 a:hover {
950 text-decoration: underline;
951 }
952
953 em {
954 color: inherit;
955 font-style: italic;
956 }
957
958 b {
959 color: inherit;
960 font-weight: bold;
961 }
962
963 hr {
964 margin-top: 20px;
965 margin-bottom: 20px;
966 border: 0;
967 border-top: 1px solid #eee;
968 height: 0;
969 box-sizing: content-box;
970 }
971
972 .list-group {
973 padding-left: 0;
974 margin-bottom: 20px;
975 }
976
977 .list-group-item {
978 position: relative;
979 display: block;
980 padding: 10px 15px;
981 margin-bottom: -1px;
982 background-color: #fff;
983 }
984
985 .list-group-item:first-child {
986 /* rounded top corners */
987 border-top-right-radius:4px;
988 border-top-left-radius:4px;
989 }
990
991 .list-group-item:last-child {
992 margin-bottom: 0;
993 /* rounded bottom corners */
994 border-bottom-right-radius: 4px;
995 border-bottom-left-radius:4px;
996 }
997
998 /* Flex row container */
999 .flex-row {
1000 display: flex;
1001 flex-direction: row;
1002 }
1003
1004 /* Flex column container */
1005 .flex-column {
1006 display: flex;
1007 flex-direction: column;
1008 }
1009
1010 .flex-item-fit {
1011 flex-grow: 1;
1012 flex-shrink: 1;
1013 flex-basis: auto;
1014 }
1015
1016 .flex-item-no-shrink {
1017 flex-grow: 0;
1018 flex-shrink: 0;
1019 flex-basis: auto;
1020 }
1021
1022 .flex-item-fill {
1023 flex-grow: 0;
1024 flex-shrink: 1; /* shrink when pressured */
1025 flex-basis: 100%; /* try and take 100% */
1026 }
1027
1028 .flex-item-fixed-1-12 {
1029 flex-grow: 0;
1030 flex-shrink: 0;
1031 flex-basis: 8.3%;
1032 }
1033
1034 .flex-item-fixed-2-12 {
1035 flex-grow: 0;
1036 flex-shrink: 0;
1037 flex-basis: 16.6%;
1038 }
1039
1040 .flex-item-fixed-4-12 {
1041 flex-grow: 0;
1042 flex-shrink: 0;
1043 flex-basis: 33.3333%;
1044 }
1045
1046 .flex-item-fixed-6-12, .flex-item-50-percent {
1047 flex-grow: 0;
1048 flex-shrink: 0;
1049 flex-basis: 50%;
1050 }
1051
1052 .flex-item-fixed-8-12 {
1053 flex-grow: 0;
1054 flex-shrink: 0;
1055 flex-basis: 66.6666%;
1056 }
1057
1058 .flex-item-fixed-9-12 {
1059 flex-grow: 0;
1060 flex-shrink: 0;
1061 flex-basis: 75%;
1062 }
1063
1064
1065 .flex-item-fixed-12-12 {
1066 flex-grow: 0;
1067 flex-shrink: 0;
1068 flex-basis: 100%;
1069 }
1070
1071 .flex-item-10-percent {
1072 flex-grow: 0;
1073 flex-shrink: 0;
1074 flex-basis: 10%;
1075 }
1076
1077 .flex-item-15-percent {
1078 flex-grow: 0;
1079 flex-shrink: 0;
1080 flex-basis: 15%;
1081 }
1082
1083 .flex-item-20-percent {
1084 flex-grow: 0;
1085 flex-shrink: 0;
1086 flex-basis: 20%;
1087 }
1088
1089 .flex-item-30-percent {
1090 flex-grow: 0;
1091 flex-shrink: 0;
1092 flex-basis: 30%;
1093 }
1094
1095 .flex-item-40-percent {
1096 flex-grow: 0;
1097 flex-shrink: 0;
1098 flex-basis: 40%;
1099 }
1100
1101 .flex-item-50-percent {
1102 flex-grow: 0;
1103 flex-shrink: 0;
1104 flex-basis: 50%;
1105 }
1106
1107 .flex-item-60-percent {
1108 flex-grow: 0;
1109 flex-shrink: 0;
1110 flex-basis: 60%;
1111 }
1112
1113 .flex-item-70-percent {
1114 flex-grow: 0;
1115 flex-shrink: 0;
1116 flex-basis: 70%;
1117 }
1118
1119 .flex-item-80-percent {
1120 flex-grow: 0;
1121 flex-shrink: 0;
1122 flex-basis: 80%;
1123 }
1124
1125 .well {
1126 min-height: 20px;
1127 padding: 19px;
1128 margin-bottom: 20px;
1129 background-color: #f5f5f5;
1130 border: 1px solid #e3e3e3;
1131 border-radius: 4px;
1132 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
1133 }
1134
1135 .break-wrap {
1136 word-wrap: break-word;
1137 }
1138 </style>
1139 <style> 380 <style>
1140 .errorBox { 381 .errorBox {
1141 background-color: #f5f5f5; 382 background-color: #f5f5f5;
1142 border: 1px solid #ccc; 383 border: 1px solid #ccc;
1143 padding: 10px; 384 padding: 10px;
1144 font-family: consolas, courier, monospace; 385 font-family: consolas, courier, monospace;
1145 font-size: 1em; 386 font-size: 1em;
1146 line-height: 1.2em; 387 line-height: 1.2em;
1147 white-space: pre; 388 white-space: pre;
1148 } 389 }
(...skipping 132 matching lines...) Expand 10 before | Expand all | Expand 10 after
1281 522
1282 523
1283 524
1284 525
1285 526
1286 527
1287 528
1288 529
1289 <polymer-element name="nav-bar" extends="observatory-element"> 530 <polymer-element name="nav-bar" extends="observatory-element">
1290 <template> 531 <template>
1291 <style>/* Global styles */ 532 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1292 * {
1293 margin: 0;
1294 padding: 0;
1295 font: 400 14px 'Montserrat', sans-serif;
1296 color: #333;
1297 box-sizing: border-box;
1298 }
1299
1300 .content {
1301 padding-left: 10%;
1302 font: 400 14px 'Montserrat', sans-serif;
1303 }
1304
1305 .content-centered {
1306 padding-left: 10%;
1307 padding-right: 10%;
1308 font: 400 14px 'Montserrat', sans-serif;
1309 }
1310
1311 .content-centered-big {
1312 padding-left: 5%;
1313 padding-right: 5%;
1314 font: 400 14px 'Montserrat', sans-serif;
1315 }
1316
1317 h1 {
1318 font: 400 18px 'Montserrat', sans-serif;
1319 }
1320
1321 .memberList {
1322 display: table;
1323 }
1324
1325 .memberItem {
1326 display: table-row;
1327 }
1328
1329 .memberName, .memberValue {
1330 display: table-cell;
1331 vertical-align: top;
1332 padding: 3px 0 3px 1em;
1333 font: 400 14px 'Montserrat', sans-serif;
1334 }
1335
1336 .memberSmall {
1337 display: table-cell;
1338 vertical-align: top;
1339 padding: 3px 0 3px 1em;
1340 font: 400 12px 'Montserrat', sans-serif;
1341 }
1342
1343 .monospace {
1344 font-family: consolas, courier, monospace;
1345 font-size: 1em;
1346 line-height: 1.2em;
1347 white-space: nowrap;
1348 }
1349
1350 a {
1351 color: #0489c3;
1352 text-decoration: none;
1353 }
1354
1355 a:hover {
1356 text-decoration: underline;
1357 }
1358
1359 em {
1360 color: inherit;
1361 font-style: italic;
1362 }
1363
1364 b {
1365 color: inherit;
1366 font-weight: bold;
1367 }
1368
1369 hr {
1370 margin-top: 20px;
1371 margin-bottom: 20px;
1372 border: 0;
1373 border-top: 1px solid #eee;
1374 height: 0;
1375 box-sizing: content-box;
1376 }
1377
1378 .list-group {
1379 padding-left: 0;
1380 margin-bottom: 20px;
1381 }
1382
1383 .list-group-item {
1384 position: relative;
1385 display: block;
1386 padding: 10px 15px;
1387 margin-bottom: -1px;
1388 background-color: #fff;
1389 }
1390
1391 .list-group-item:first-child {
1392 /* rounded top corners */
1393 border-top-right-radius:4px;
1394 border-top-left-radius:4px;
1395 }
1396
1397 .list-group-item:last-child {
1398 margin-bottom: 0;
1399 /* rounded bottom corners */
1400 border-bottom-right-radius: 4px;
1401 border-bottom-left-radius:4px;
1402 }
1403
1404 /* Flex row container */
1405 .flex-row {
1406 display: flex;
1407 flex-direction: row;
1408 }
1409
1410 /* Flex column container */
1411 .flex-column {
1412 display: flex;
1413 flex-direction: column;
1414 }
1415
1416 .flex-item-fit {
1417 flex-grow: 1;
1418 flex-shrink: 1;
1419 flex-basis: auto;
1420 }
1421
1422 .flex-item-no-shrink {
1423 flex-grow: 0;
1424 flex-shrink: 0;
1425 flex-basis: auto;
1426 }
1427
1428 .flex-item-fill {
1429 flex-grow: 0;
1430 flex-shrink: 1; /* shrink when pressured */
1431 flex-basis: 100%; /* try and take 100% */
1432 }
1433
1434 .flex-item-fixed-1-12 {
1435 flex-grow: 0;
1436 flex-shrink: 0;
1437 flex-basis: 8.3%;
1438 }
1439
1440 .flex-item-fixed-2-12 {
1441 flex-grow: 0;
1442 flex-shrink: 0;
1443 flex-basis: 16.6%;
1444 }
1445
1446 .flex-item-fixed-4-12 {
1447 flex-grow: 0;
1448 flex-shrink: 0;
1449 flex-basis: 33.3333%;
1450 }
1451
1452 .flex-item-fixed-6-12, .flex-item-50-percent {
1453 flex-grow: 0;
1454 flex-shrink: 0;
1455 flex-basis: 50%;
1456 }
1457
1458 .flex-item-fixed-8-12 {
1459 flex-grow: 0;
1460 flex-shrink: 0;
1461 flex-basis: 66.6666%;
1462 }
1463
1464 .flex-item-fixed-9-12 {
1465 flex-grow: 0;
1466 flex-shrink: 0;
1467 flex-basis: 75%;
1468 }
1469
1470
1471 .flex-item-fixed-12-12 {
1472 flex-grow: 0;
1473 flex-shrink: 0;
1474 flex-basis: 100%;
1475 }
1476
1477 .flex-item-10-percent {
1478 flex-grow: 0;
1479 flex-shrink: 0;
1480 flex-basis: 10%;
1481 }
1482
1483 .flex-item-15-percent {
1484 flex-grow: 0;
1485 flex-shrink: 0;
1486 flex-basis: 15%;
1487 }
1488
1489 .flex-item-20-percent {
1490 flex-grow: 0;
1491 flex-shrink: 0;
1492 flex-basis: 20%;
1493 }
1494
1495 .flex-item-30-percent {
1496 flex-grow: 0;
1497 flex-shrink: 0;
1498 flex-basis: 30%;
1499 }
1500
1501 .flex-item-40-percent {
1502 flex-grow: 0;
1503 flex-shrink: 0;
1504 flex-basis: 40%;
1505 }
1506
1507 .flex-item-50-percent {
1508 flex-grow: 0;
1509 flex-shrink: 0;
1510 flex-basis: 50%;
1511 }
1512
1513 .flex-item-60-percent {
1514 flex-grow: 0;
1515 flex-shrink: 0;
1516 flex-basis: 60%;
1517 }
1518
1519 .flex-item-70-percent {
1520 flex-grow: 0;
1521 flex-shrink: 0;
1522 flex-basis: 70%;
1523 }
1524
1525 .flex-item-80-percent {
1526 flex-grow: 0;
1527 flex-shrink: 0;
1528 flex-basis: 80%;
1529 }
1530
1531 .well {
1532 min-height: 20px;
1533 padding: 19px;
1534 margin-bottom: 20px;
1535 background-color: #f5f5f5;
1536 border: 1px solid #e3e3e3;
1537 border-radius: 4px;
1538 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
1539 }
1540
1541 .break-wrap {
1542 word-wrap: break-word;
1543 }
1544 </style>
1545 <style> 533 <style>
1546 nav { 534 nav {
1547 position: fixed; 535 position: fixed;
1548 width: 100%; 536 width: 100%;
1549 z-index: 1000; 537 z-index: 1000;
1550 } 538 }
1551 nav ul { 539 nav ul {
1552 display: inline-table; 540 display: inline-table;
1553 position: relative; 541 position: relative;
1554 list-style: none; 542 list-style: none;
(...skipping 325 matching lines...) Expand 10 before | Expand all | Expand 10 after
1880 </template> 868 </template>
1881 </polymer-element> 869 </polymer-element>
1882 870
1883 871
1884 872
1885 873
1886 874
1887 875
1888 <polymer-element name="breakpoint-list" extends="observatory-element"> 876 <polymer-element name="breakpoint-list" extends="observatory-element">
1889 <template> 877 <template>
1890 <style>/* Global styles */ 878 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1891 * {
1892 margin: 0;
1893 padding: 0;
1894 font: 400 14px 'Montserrat', sans-serif;
1895 color: #333;
1896 box-sizing: border-box;
1897 }
1898
1899 .content {
1900 padding-left: 10%;
1901 font: 400 14px 'Montserrat', sans-serif;
1902 }
1903
1904 .content-centered {
1905 padding-left: 10%;
1906 padding-right: 10%;
1907 font: 400 14px 'Montserrat', sans-serif;
1908 }
1909
1910 .content-centered-big {
1911 padding-left: 5%;
1912 padding-right: 5%;
1913 font: 400 14px 'Montserrat', sans-serif;
1914 }
1915
1916 h1 {
1917 font: 400 18px 'Montserrat', sans-serif;
1918 }
1919
1920 .memberList {
1921 display: table;
1922 }
1923
1924 .memberItem {
1925 display: table-row;
1926 }
1927
1928 .memberName, .memberValue {
1929 display: table-cell;
1930 vertical-align: top;
1931 padding: 3px 0 3px 1em;
1932 font: 400 14px 'Montserrat', sans-serif;
1933 }
1934
1935 .memberSmall {
1936 display: table-cell;
1937 vertical-align: top;
1938 padding: 3px 0 3px 1em;
1939 font: 400 12px 'Montserrat', sans-serif;
1940 }
1941
1942 .monospace {
1943 font-family: consolas, courier, monospace;
1944 font-size: 1em;
1945 line-height: 1.2em;
1946 white-space: nowrap;
1947 }
1948
1949 a {
1950 color: #0489c3;
1951 text-decoration: none;
1952 }
1953
1954 a:hover {
1955 text-decoration: underline;
1956 }
1957
1958 em {
1959 color: inherit;
1960 font-style: italic;
1961 }
1962
1963 b {
1964 color: inherit;
1965 font-weight: bold;
1966 }
1967
1968 hr {
1969 margin-top: 20px;
1970 margin-bottom: 20px;
1971 border: 0;
1972 border-top: 1px solid #eee;
1973 height: 0;
1974 box-sizing: content-box;
1975 }
1976
1977 .list-group {
1978 padding-left: 0;
1979 margin-bottom: 20px;
1980 }
1981
1982 .list-group-item {
1983 position: relative;
1984 display: block;
1985 padding: 10px 15px;
1986 margin-bottom: -1px;
1987 background-color: #fff;
1988 }
1989
1990 .list-group-item:first-child {
1991 /* rounded top corners */
1992 border-top-right-radius:4px;
1993 border-top-left-radius:4px;
1994 }
1995
1996 .list-group-item:last-child {
1997 margin-bottom: 0;
1998 /* rounded bottom corners */
1999 border-bottom-right-radius: 4px;
2000 border-bottom-left-radius:4px;
2001 }
2002
2003 /* Flex row container */
2004 .flex-row {
2005 display: flex;
2006 flex-direction: row;
2007 }
2008
2009 /* Flex column container */
2010 .flex-column {
2011 display: flex;
2012 flex-direction: column;
2013 }
2014
2015 .flex-item-fit {
2016 flex-grow: 1;
2017 flex-shrink: 1;
2018 flex-basis: auto;
2019 }
2020
2021 .flex-item-no-shrink {
2022 flex-grow: 0;
2023 flex-shrink: 0;
2024 flex-basis: auto;
2025 }
2026
2027 .flex-item-fill {
2028 flex-grow: 0;
2029 flex-shrink: 1; /* shrink when pressured */
2030 flex-basis: 100%; /* try and take 100% */
2031 }
2032
2033 .flex-item-fixed-1-12 {
2034 flex-grow: 0;
2035 flex-shrink: 0;
2036 flex-basis: 8.3%;
2037 }
2038
2039 .flex-item-fixed-2-12 {
2040 flex-grow: 0;
2041 flex-shrink: 0;
2042 flex-basis: 16.6%;
2043 }
2044
2045 .flex-item-fixed-4-12 {
2046 flex-grow: 0;
2047 flex-shrink: 0;
2048 flex-basis: 33.3333%;
2049 }
2050
2051 .flex-item-fixed-6-12, .flex-item-50-percent {
2052 flex-grow: 0;
2053 flex-shrink: 0;
2054 flex-basis: 50%;
2055 }
2056
2057 .flex-item-fixed-8-12 {
2058 flex-grow: 0;
2059 flex-shrink: 0;
2060 flex-basis: 66.6666%;
2061 }
2062
2063 .flex-item-fixed-9-12 {
2064 flex-grow: 0;
2065 flex-shrink: 0;
2066 flex-basis: 75%;
2067 }
2068
2069
2070 .flex-item-fixed-12-12 {
2071 flex-grow: 0;
2072 flex-shrink: 0;
2073 flex-basis: 100%;
2074 }
2075
2076 .flex-item-10-percent {
2077 flex-grow: 0;
2078 flex-shrink: 0;
2079 flex-basis: 10%;
2080 }
2081
2082 .flex-item-15-percent {
2083 flex-grow: 0;
2084 flex-shrink: 0;
2085 flex-basis: 15%;
2086 }
2087
2088 .flex-item-20-percent {
2089 flex-grow: 0;
2090 flex-shrink: 0;
2091 flex-basis: 20%;
2092 }
2093
2094 .flex-item-30-percent {
2095 flex-grow: 0;
2096 flex-shrink: 0;
2097 flex-basis: 30%;
2098 }
2099
2100 .flex-item-40-percent {
2101 flex-grow: 0;
2102 flex-shrink: 0;
2103 flex-basis: 40%;
2104 }
2105
2106 .flex-item-50-percent {
2107 flex-grow: 0;
2108 flex-shrink: 0;
2109 flex-basis: 50%;
2110 }
2111
2112 .flex-item-60-percent {
2113 flex-grow: 0;
2114 flex-shrink: 0;
2115 flex-basis: 60%;
2116 }
2117
2118 .flex-item-70-percent {
2119 flex-grow: 0;
2120 flex-shrink: 0;
2121 flex-basis: 70%;
2122 }
2123
2124 .flex-item-80-percent {
2125 flex-grow: 0;
2126 flex-shrink: 0;
2127 flex-basis: 80%;
2128 }
2129
2130 .well {
2131 min-height: 20px;
2132 padding: 19px;
2133 margin-bottom: 20px;
2134 background-color: #f5f5f5;
2135 border: 1px solid #e3e3e3;
2136 border-radius: 4px;
2137 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
2138 }
2139
2140 .break-wrap {
2141 word-wrap: break-word;
2142 }
2143 </style>
2144 <nav-bar> 879 <nav-bar>
2145 <top-nav-menu></top-nav-menu> 880 <top-nav-menu></top-nav-menu>
2146 <isolate-nav-menu isolate="{{ msg.isolate }}"></isolate-nav-menu> 881 <isolate-nav-menu isolate="{{ msg.isolate }}"></isolate-nav-menu>
2147 <nav-menu link="{{ gotoLink(msg.isolate.relativeLink('debug/breakpoints')) }}" anchor="breakpoints" last="{{ true }}"></nav-menu> 882 <nav-menu link="{{ gotoLink(msg.isolate.relativeLink('debug/breakpoints')) }}" anchor="breakpoints" last="{{ true }}"></nav-menu>
2148 <nav-refresh callback="{{ refresh }}"></nav-refresh> 883 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2149 <nav-control></nav-control> 884 <nav-control></nav-control>
2150 </nav-bar> 885 </nav-bar>
2151 <template if="{{ msg['breakpoints'].isEmpty }}"> 886 <template if="{{ msg['breakpoints'].isEmpty }}">
2152 <div> 887 <div>
2153 <div>No breakpoints</div> 888 <div>No breakpoints</div>
2154 </div> 889 </div>
2155 </template> 890 </template>
2156 <template if="{{ msg['breakpoints'].isNotEmpty }}"> 891 <template if="{{ msg['breakpoints'].isNotEmpty }}">
2157 <ul class="list-group"> 892 <ul class="list-group">
2158 <template repeat="{{ bpt in msg['breakpoints'] }}"> 893 <template repeat="{{ bpt in msg['breakpoints'] }}">
2159 <li class="list-group-item"> 894 <li class="list-group-item">
2160 {{ bpt }} 895 {{ bpt }}
2161 </li> 896 </li>
2162 </template> 897 </template>
2163 </ul> 898 </ul>
2164 </template> 899 </template>
2165 </template> 900 </template>
2166 </polymer-element> 901 </polymer-element>
902
903
904
905
906
907
908 <polymer-element name="class-ref" extends="service-ref">
909 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css"><span><a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}</a></span></template>
910 </polymer-element>
911
912
913
914
915
916
917
918
919 <polymer-element name="class-tree" extends="observatory-element">
920 <template>
921 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
922 <style>
923 .table {
924 border-collapse: collapse!important;
925 width: 100%;
926 margin-bottom: 20px
927 }
928 .table thead > tr > th,
929 .table tbody > tr > th,
930 .table tfoot > tr > th,
931 .table thead > tr > td,
932 .table tbody > tr > td,
933 .table tfoot > tr > td {
934 padding: 8px;
935 vertical-align: top;
936 }
937 .table thead > tr > th {
938 vertical-align: bottom;
939 text-align: left;
940 border-bottom:2px solid #ddd;
941 }
942
943 tr:hover > td {
944 background-color: #FFF3E3;
945 }
946 .rowColor0 {
947 background-color: #FFE9CC;
948 }
949 .rowColor1 {
950 background-color: #FFDEB2;
951 }
952 .rowColor2 {
953 background-color: #FFD399;
954 }
955 .rowColor3 {
956 background-color: #FFC87F;
957 }
958 .rowColor4 {
959 background-color: #FFBD66;
960 }
961 .rowColor5 {
962 background-color: #FFB24C;
963 }
964 .rowColor6 {
965 background-color: #FFA733;
966 }
967 .rowColor7 {
968 background-color: #FF9C19;
969 }
970 .rowColor8 {
971 background-color: #FF9100;
972 }
973
974 .tooltip {
975 display: block;
976 position: absolute;
977 visibility: hidden;
978 opacity: 0;
979 transition: visibility 0s linear 0.5s;
980 transition: opacity .4s ease-in-out;
981 }
982
983 tr:hover .tooltip {
984 display: block;
985 position: absolute;
986 top: 100%;
987 right: 100%;
988 visibility: visible;
989 z-index: 999;
990 width: 400px;
991 color: #ffffff;
992 background-color: #0489c3;
993 border-top-right-radius: 8px;
994 border-top-left-radius: 8px;
995 border-bottom-right-radius: 8px;
996 border-bottom-left-radius: 8px;
997 transition: visibility 0s linear 0.5s;
998 transition: opacity .4s ease-in-out;
999 opacity: 1;
1000 }
1001
1002 .white {
1003 color: #ffffff;
1004 }
1005 </style>
1006 <nav-bar>
1007 <top-nav-menu last="{{ true }}"></top-nav-menu>
1008 <nav-control></nav-control>
1009 </nav-bar>
1010 <div class="content-centered">
1011 <h1>Class Hierarchy</h1>
1012 <table id="tableTree" class="table">
1013 <thead>
1014 <tr>
1015 <th>Class</th>
1016 </tr>
1017 </thead>
1018 <tbody>
1019 <tr template="" repeat="{{row in tree.rows }}">
1020 <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style= "{{ padding(row) }}">
1021 <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
1022 <class-ref ref="{{ row.cls }}"></class-ref>
1023 </td>
1024 </tr>
1025 </tbody>
1026 </table>
1027 </div>
1028 </template>
1029 </polymer-element>
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042 <polymer-element name="error-ref" extends="service-ref">
1043 <template>
1044 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1045 <style>
1046 .errorBox {
1047 background-color: #f5f5f5;
1048 border: 1px solid #ccc;
1049 padding: 10px;
1050 font-family: consolas, courier, monospace;
1051 font-size: 1em;
1052 line-height: 1.2em;
1053 white-space: pre;
1054 }
1055 </style>
1056 <span>
1057 <pre class="errorBox">{{ ref.kind }}: {{ ref.message }}</pre>
1058 </span>
1059 </template>
1060 </polymer-element>
1061
1062
1063
1064
1065 <polymer-element name="eval-box" extends="observatory-element">
1066 <template>
1067 <style>
1068 .textbox {
1069 flex-grow: 1;
1070 font: 400 16px 'Montserrat', sans-serif;
1071 }
1072 .bigtextbox {
1073 font: 400 16px 'Montserrat', sans-serif;
1074 }
1075 .button {
1076 font: 400 16px 'Montserrat', sans-serif;
1077 }
1078 .radios {
1079 display: inline;
1080 padding-right: 30px;
1081 }
1082 .radios label{
1083 padding-left: 10px;
1084 }
1085 .historyExpr, .historyValue {
1086 vertical-align: text-top;
1087 font: 400 14px 'Montserrat', sans-serif;
1088 }
1089 .historyExpr a {
1090 display: block;
1091 color: black;
1092 text-decoration: none;
1093 padding: 6px 6px;
1094 cursor: pointer;
1095 white-space: pre-line;
1096 }
1097 .historyExpr a:hover {
1098 background-color: #fff3e3;
1099 }
1100 .historyValue {
1101 display: block;
1102 padding: 6px 6px;
1103 }
1104 </style>
1105 <form style="display:flex; flex-direction:row; align-items:flex-end">
1106 <template if="{{ lineMode == '1-line' }}">
1107 <input class="textbox" type="text" value="{{ text }}">
1108 </template>
1109 <template if="{{ lineMode == 'N-line' }}">
1110 <textarea class="bigtextbox" rows="5" cols="80" value="{{ text }}"></tex tarea>
1111 </template>
1112
1113 <input class="button" type="submit" value="Evaluate" on-click="{{ eval }}" >
1114 <div class="radios" on-change="{{ updateLineMode }}">
1115 <label for="1-line">
1116 <input type="radio" name="lineMode" value="1-line" checked="">
1117 1-line
1118 </label>
1119 <label for="N-line">
1120 <input type="radio" name="lineMode" value="N-line">
1121 N-line
1122 </label>
1123 </div>
1124 </form>
1125
1126 <br>
1127 <template if="{{ results.isNotEmpty }}">
1128 <table>
1129 <tbody><tr template="" repeat="{{ result in results }}">
1130 <td class="historyExpr">
1131 <a class="expr" on-click="{{ selectExpr }}" expr="{{ result['expr'] }}">{{ result['expr'] }}</a>
1132 </td>
1133 <td class="historyValue">
1134 <template if="{{ result['value'] == null }}">
1135 <div style="color:#aaa;cursor:wait;">&lt;pending&gt;</div>
1136 </template>
1137 <template if="{{ result['value'] != null }}">
1138 <any-service-ref ref="{{ result['value'] }}"></any-service-ref>
1139 </template>
1140 </td>
1141 </tr>
1142 </tbody></table>
1143 </template>
1144 </template>
1145 </polymer-element>
1146
1147
1148
1149
1150
1151
1152
1153 <polymer-element name="eval-link">
1154 <template>
1155 <style>
1156 .idle {
1157 color: #0489c3;
1158 cursor: pointer;
1159 }
1160 .busy {
1161 color: #aaa;
1162 cursor: wait;
1163 }
1164 </style>
1165
1166 <template if="{{ busy }}">
1167 <span class="busy">{{ label }}</span>
1168 </template>
1169 <template if="{{ !busy }}">
1170 <span class="idle"><a on-click="{{ evalNow }}">{{ label }}</a></span>
1171 </template>
1172 <template if="{{ result != null }}">
1173 = <any-service-ref ref="{{ result }}"></any-service-ref>
1174 </template>
1175 </template>
1176 </polymer-element>
2167 1177
2168 1178
2169 1179
2170 1180
2171 1181
2172 1182
2173 <polymer-element name="class-ref" extends="service-ref"> 1183
2174 <template><style>/* Global styles */ 1184
2175 * { 1185 <polymer-element name="field-ref" extends="service-ref">
2176 margin: 0; 1186 <template>
2177 padding: 0; 1187 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
2178 font: 400 14px 'Montserrat', sans-serif; 1188 <span>
2179 color: #333; 1189 <template if="{{ ref.isStatic] }}">static</template>
2180 box-sizing: border-box; 1190 <template if="{{ ref.isFinal }}">final</template>
2181 } 1191 <template if="{{ ref.isConst }}">const</template>
2182 1192 <template if="{{ (ref.declaredType.name == 'dynamic' &amp;&amp;
2183 .content { 1193 !ref.isFinal &amp;&amp; !ref.isConst) }}">
2184 padding-left: 10%; 1194 var
2185 font: 400 14px 'Montserrat', sans-serif; 1195 </template>
2186 } 1196 <template if="{{ (ref.declaredType.name != 'dynamic') }}">
2187 1197 <instance-ref ref="{{ ref.declaredType }}"></instance-ref>
2188 .content-centered { 1198 </template>
2189 padding-left: 10%; 1199 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}</a>
2190 padding-right: 10%; 1200 </span>
2191 font: 400 14px 'Montserrat', sans-serif; 1201 </template>
2192 } 1202 </polymer-element>
2193 1203
2194 .content-centered-big { 1204
2195 padding-left: 5%; 1205
2196 padding-right: 5%; 1206
2197 font: 400 14px 'Montserrat', sans-serif; 1207
2198 } 1208
2199 1209
2200 h1 { 1210 <polymer-element name="function-ref" extends="service-ref">
2201 font: 400 18px 'Montserrat', sans-serif; 1211 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css"><!-- These comments are here to allow newlines.
2202 } 1212 --><template if="{{ ref.isDart }}"><!--
2203 1213 --><template if="{{ qualified &amp;&amp; ref.parent == null &amp;&amp; re f.owningClass != null }}"><!--
2204 .memberList { 1214 --><class-ref ref="{{ ref.owningClass] }}"></class-ref>.</template><!--
2205 display: table; 1215 --><template if="{{ qualified &amp;&amp; ref.parent != null }}"><!--
2206 } 1216 --><function-ref ref="{{ ref.parent }}" qualified="{{ true }}">
2207 1217 </function-ref>.<!--
2208 .memberItem { 1218 --></template><a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a><!--
2209 display: table-row; 1219 --></template><template if="{{ !ref.isDart }}"><span> {{ name }}</span></templ ate></template>
2210 } 1220 </polymer-element>
2211 1221
2212 .memberName, .memberValue { 1222
2213 display: table-cell; 1223
2214 vertical-align: top; 1224
2215 padding: 3px 0 3px 1em; 1225
2216 font: 400 14px 'Montserrat', sans-serif; 1226
2217 } 1227 <polymer-element name="library-ref" extends="service-ref">
2218 1228 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css">
2219 .memberSmall { 1229 <template if="{{ nameIsEmpty }}">
2220 display: table-cell; 1230 <a on-click="{{ goto }}" _href="{{ url }}">unnamed</a>
2221 vertical-align: top; 1231 </template>
2222 padding: 3px 0 3px 1em; 1232 <template if="{{ !nameIsEmpty }}">
2223 font: 400 12px 'Montserrat', sans-serif; 1233 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2224 } 1234 </template>
2225 1235 </template>
2226 .monospace { 1236 </polymer-element>
2227 font-family: consolas, courier, monospace; 1237
2228 font-size: 1em; 1238
2229 line-height: 1.2em; 1239
2230 white-space: nowrap; 1240
2231 } 1241
2232 1242
2233 a { 1243
2234 color: #0489c3; 1244 <polymer-element name="script-inset" extends="observatory-element">
2235 text-decoration: none; 1245 <template>
2236 }
2237
2238 a:hover {
2239 text-decoration: underline;
2240 }
2241
2242 em {
2243 color: inherit;
2244 font-style: italic;
2245 }
2246
2247 b {
2248 color: inherit;
2249 font-weight: bold;
2250 }
2251
2252 hr {
2253 margin-top: 20px;
2254 margin-bottom: 20px;
2255 border: 0;
2256 border-top: 1px solid #eee;
2257 height: 0;
2258 box-sizing: content-box;
2259 }
2260
2261 .list-group {
2262 padding-left: 0;
2263 margin-bottom: 20px;
2264 }
2265
2266 .list-group-item {
2267 position: relative;
2268 display: block;
2269 padding: 10px 15px;
2270 margin-bottom: -1px;
2271 background-color: #fff;
2272 }
2273
2274 .list-group-item:first-child {
2275 /* rounded top corners */
2276 border-top-right-radius:4px;
2277 border-top-left-radius:4px;
2278 }
2279
2280 .list-group-item:last-child {
2281 margin-bottom: 0;
2282 /* rounded bottom corners */
2283 border-bottom-right-radius: 4px;
2284 border-bottom-left-radius:4px;
2285 }
2286
2287 /* Flex row container */
2288 .flex-row {
2289 display: flex;
2290 flex-direction: row;
2291 }
2292
2293 /* Flex column container */
2294 .flex-column {
2295 display: flex;
2296 flex-direction: column;
2297 }
2298
2299 .flex-item-fit {
2300 flex-grow: 1;
2301 flex-shrink: 1;
2302 flex-basis: auto;
2303 }
2304
2305 .flex-item-no-shrink {
2306 flex-grow: 0;
2307 flex-shrink: 0;
2308 flex-basis: auto;
2309 }
2310
2311 .flex-item-fill {
2312 flex-grow: 0;
2313 flex-shrink: 1; /* shrink when pressured */
2314 flex-basis: 100%; /* try and take 100% */
2315 }
2316
2317 .flex-item-fixed-1-12 {
2318 flex-grow: 0;
2319 flex-shrink: 0;
2320 flex-basis: 8.3%;
2321 }
2322
2323 .flex-item-fixed-2-12 {
2324 flex-grow: 0;
2325 flex-shrink: 0;
2326 flex-basis: 16.6%;
2327 }
2328
2329 .flex-item-fixed-4-12 {
2330 flex-grow: 0;
2331 flex-shrink: 0;
2332 flex-basis: 33.3333%;
2333 }
2334
2335 .flex-item-fixed-6-12, .flex-item-50-percent {
2336 flex-grow: 0;
2337 flex-shrink: 0;
2338 flex-basis: 50%;
2339 }
2340
2341 .flex-item-fixed-8-12 {
2342 flex-grow: 0;
2343 flex-shrink: 0;
2344 flex-basis: 66.6666%;
2345 }
2346
2347 .flex-item-fixed-9-12 {
2348 flex-grow: 0;
2349 flex-shrink: 0;
2350 flex-basis: 75%;
2351 }
2352
2353
2354 .flex-item-fixed-12-12 {
2355 flex-grow: 0;
2356 flex-shrink: 0;
2357 flex-basis: 100%;
2358 }
2359
2360 .flex-item-10-percent {
2361 flex-grow: 0;
2362 flex-shrink: 0;
2363 flex-basis: 10%;
2364 }
2365
2366 .flex-item-15-percent {
2367 flex-grow: 0;
2368 flex-shrink: 0;
2369 flex-basis: 15%;
2370 }
2371
2372 .flex-item-20-percent {
2373 flex-grow: 0;
2374 flex-shrink: 0;
2375 flex-basis: 20%;
2376 }
2377
2378 .flex-item-30-percent {
2379 flex-grow: 0;
2380 flex-shrink: 0;
2381 flex-basis: 30%;
2382 }
2383
2384 .flex-item-40-percent {
2385 flex-grow: 0;
2386 flex-shrink: 0;
2387 flex-basis: 40%;
2388 }
2389
2390 .flex-item-50-percent {
2391 flex-grow: 0;
2392 flex-shrink: 0;
2393 flex-basis: 50%;
2394 }
2395
2396 .flex-item-60-percent {
2397 flex-grow: 0;
2398 flex-shrink: 0;
2399 flex-basis: 60%;
2400 }
2401
2402 .flex-item-70-percent {
2403 flex-grow: 0;
2404 flex-shrink: 0;
2405 flex-basis: 70%;
2406 }
2407
2408 .flex-item-80-percent {
2409 flex-grow: 0;
2410 flex-shrink: 0;
2411 flex-basis: 80%;
2412 }
2413
2414 .well {
2415 min-height: 20px;
2416 padding: 19px;
2417 margin-bottom: 20px;
2418 background-color: #f5f5f5;
2419 border: 1px solid #e3e3e3;
2420 border-radius: 4px;
2421 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
2422 }
2423
2424 .break-wrap {
2425 word-wrap: break-word;
2426 }
2427 </style><span><a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}" >{{ name }}</a></span></template>
2428 </polymer-element>
2429
2430
2431
2432
2433
2434
2435
2436
2437 <polymer-element name="class-tree" extends="observatory-element">
2438 <template>
2439 <style>/* Global styles */
2440 * {
2441 margin: 0;
2442 padding: 0;
2443 font: 400 14px 'Montserrat', sans-serif;
2444 color: #333;
2445 box-sizing: border-box;
2446 }
2447
2448 .content {
2449 padding-left: 10%;
2450 font: 400 14px 'Montserrat', sans-serif;
2451 }
2452
2453 .content-centered {
2454 padding-left: 10%;
2455 padding-right: 10%;
2456 font: 400 14px 'Montserrat', sans-serif;
2457 }
2458
2459 .content-centered-big {
2460 padding-left: 5%;
2461 padding-right: 5%;
2462 font: 400 14px 'Montserrat', sans-serif;
2463 }
2464
2465 h1 {
2466 font: 400 18px 'Montserrat', sans-serif;
2467 }
2468
2469 .memberList {
2470 display: table;
2471 }
2472
2473 .memberItem {
2474 display: table-row;
2475 }
2476
2477 .memberName, .memberValue {
2478 display: table-cell;
2479 vertical-align: top;
2480 padding: 3px 0 3px 1em;
2481 font: 400 14px 'Montserrat', sans-serif;
2482 }
2483
2484 .memberSmall {
2485 display: table-cell;
2486 vertical-align: top;
2487 padding: 3px 0 3px 1em;
2488 font: 400 12px 'Montserrat', sans-serif;
2489 }
2490
2491 .monospace {
2492 font-family: consolas, courier, monospace;
2493 font-size: 1em;
2494 line-height: 1.2em;
2495 white-space: nowrap;
2496 }
2497
2498 a {
2499 color: #0489c3;
2500 text-decoration: none;
2501 }
2502
2503 a:hover {
2504 text-decoration: underline;
2505 }
2506
2507 em {
2508 color: inherit;
2509 font-style: italic;
2510 }
2511
2512 b {
2513 color: inherit;
2514 font-weight: bold;
2515 }
2516
2517 hr {
2518 margin-top: 20px;
2519 margin-bottom: 20px;
2520 border: 0;
2521 border-top: 1px solid #eee;
2522 height: 0;
2523 box-sizing: content-box;
2524 }
2525
2526 .list-group {
2527 padding-left: 0;
2528 margin-bottom: 20px;
2529 }
2530
2531 .list-group-item {
2532 position: relative;
2533 display: block;
2534 padding: 10px 15px;
2535 margin-bottom: -1px;
2536 background-color: #fff;
2537 }
2538
2539 .list-group-item:first-child {
2540 /* rounded top corners */
2541 border-top-right-radius:4px;
2542 border-top-left-radius:4px;
2543 }
2544
2545 .list-group-item:last-child {
2546 margin-bottom: 0;
2547 /* rounded bottom corners */
2548 border-bottom-right-radius: 4px;
2549 border-bottom-left-radius:4px;
2550 }
2551
2552 /* Flex row container */
2553 .flex-row {
2554 display: flex;
2555 flex-direction: row;
2556 }
2557
2558 /* Flex column container */
2559 .flex-column {
2560 display: flex;
2561 flex-direction: column;
2562 }
2563
2564 .flex-item-fit {
2565 flex-grow: 1;
2566 flex-shrink: 1;
2567 flex-basis: auto;
2568 }
2569
2570 .flex-item-no-shrink {
2571 flex-grow: 0;
2572 flex-shrink: 0;
2573 flex-basis: auto;
2574 }
2575
2576 .flex-item-fill {
2577 flex-grow: 0;
2578 flex-shrink: 1; /* shrink when pressured */
2579 flex-basis: 100%; /* try and take 100% */
2580 }
2581
2582 .flex-item-fixed-1-12 {
2583 flex-grow: 0;
2584 flex-shrink: 0;
2585 flex-basis: 8.3%;
2586 }
2587
2588 .flex-item-fixed-2-12 {
2589 flex-grow: 0;
2590 flex-shrink: 0;
2591 flex-basis: 16.6%;
2592 }
2593
2594 .flex-item-fixed-4-12 {
2595 flex-grow: 0;
2596 flex-shrink: 0;
2597 flex-basis: 33.3333%;
2598 }
2599
2600 .flex-item-fixed-6-12, .flex-item-50-percent {
2601 flex-grow: 0;
2602 flex-shrink: 0;
2603 flex-basis: 50%;
2604 }
2605
2606 .flex-item-fixed-8-12 {
2607 flex-grow: 0;
2608 flex-shrink: 0;
2609 flex-basis: 66.6666%;
2610 }
2611
2612 .flex-item-fixed-9-12 {
2613 flex-grow: 0;
2614 flex-shrink: 0;
2615 flex-basis: 75%;
2616 }
2617
2618
2619 .flex-item-fixed-12-12 {
2620 flex-grow: 0;
2621 flex-shrink: 0;
2622 flex-basis: 100%;
2623 }
2624
2625 .flex-item-10-percent {
2626 flex-grow: 0;
2627 flex-shrink: 0;
2628 flex-basis: 10%;
2629 }
2630
2631 .flex-item-15-percent {
2632 flex-grow: 0;
2633 flex-shrink: 0;
2634 flex-basis: 15%;
2635 }
2636
2637 .flex-item-20-percent {
2638 flex-grow: 0;
2639 flex-shrink: 0;
2640 flex-basis: 20%;
2641 }
2642
2643 .flex-item-30-percent {
2644 flex-grow: 0;
2645 flex-shrink: 0;
2646 flex-basis: 30%;
2647 }
2648
2649 .flex-item-40-percent {
2650 flex-grow: 0;
2651 flex-shrink: 0;
2652 flex-basis: 40%;
2653 }
2654
2655 .flex-item-50-percent {
2656 flex-grow: 0;
2657 flex-shrink: 0;
2658 flex-basis: 50%;
2659 }
2660
2661 .flex-item-60-percent {
2662 flex-grow: 0;
2663 flex-shrink: 0;
2664 flex-basis: 60%;
2665 }
2666
2667 .flex-item-70-percent {
2668 flex-grow: 0;
2669 flex-shrink: 0;
2670 flex-basis: 70%;
2671 }
2672
2673 .flex-item-80-percent {
2674 flex-grow: 0;
2675 flex-shrink: 0;
2676 flex-basis: 80%;
2677 }
2678
2679 .well {
2680 min-height: 20px;
2681 padding: 19px;
2682 margin-bottom: 20px;
2683 background-color: #f5f5f5;
2684 border: 1px solid #e3e3e3;
2685 border-radius: 4px;
2686 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
2687 }
2688
2689 .break-wrap {
2690 word-wrap: break-word;
2691 }
2692 </style>
2693 <style> 1246 <style>
2694 .table { 1247 .sourceInset {
2695 border-collapse: collapse!important; 1248 }
2696 width: 100%; 1249 .sourceBox {
2697 margin-bottom: 20px 1250 background-color: #f5f5f5;
2698 } 1251 border: 1px solid #ccc;
2699 .table thead > tr > th, 1252 padding: 10px;
2700 .table tbody > tr > th, 1253 overflow-y: auto;
2701 .table tfoot > tr > th, 1254 }
2702 .table thead > tr > td, 1255 .sourceTable {
2703 .table tbody > tr > td, 1256 display: table;
2704 .table tfoot > tr > td { 1257 }
2705 padding: 8px; 1258 .sourceRow {
1259 display: table-row;
1260 }
1261 .sourceItem, .sourceItemCurrent {
1262 display: table-cell;
2706 vertical-align: top; 1263 vertical-align: top;
2707 } 1264 font: 400 14px consolas, courier, monospace;
2708 .table thead > tr > th { 1265 line-height: 125%;
2709 vertical-align: bottom; 1266 white-space: pre;
2710 text-align: left; 1267 }
2711 border-bottom:2px solid #ddd; 1268 .sourceItemCurrent {
2712 } 1269 background-color: #6cf;
2713 1270 }
2714 tr:hover > td { 1271 .hitsNone, .hitsNotExecuted, .hitsExecuted {
1272 min-width: 32px;
1273 text-align: right;
1274 }
1275 .hitsNotExecuted {
1276 background-color: #e66;
1277 }
1278 .hitsExecuted {
1279 background-color: #6d6;
1280 }
1281 </style>
1282 <div class="sourceInset">
1283 <content></content>
1284 <div class="sourceBox" style="max-height:{{height}}">
1285 <div class="sourceTable">
1286 <template if="{{ linesReady }}">
1287 <template repeat="{{ line in lines }}">
1288 <div class="sourceRow" id="{{ makeLineId(line.line) }}">
1289 <breakpoint-toggle line="{{ line }}"></breakpoint-toggle>
1290
1291 <div class="sourceItem">&nbsp;</div>
1292
1293 <template if="{{ line.hits == null ||
1294 line.hits < 0 }}">
1295 <div class="hitsNone">{{ line.line }}</div>
1296 </template>
1297 <template if="{{ line.hits == 0 }}">
1298 <div class="hitsNotExecuted">{{ line.line }}</div>
1299 </template>
1300 <template if="{{ line.hits > 0 }}">
1301 <div class="hitsExecuted">{{ line.line }}</div>
1302 </template>
1303
1304 <div class="sourceItem">&nbsp;</div>
1305
1306 <template if="{{ line.line == currentLine }}">
1307 <div class="sourceItemCurrent">{{line.text}}</div>
1308 </template>
1309 <template if="{{ line.line != currentLine }}">
1310 <div class="sourceItem">{{line.text}}</div>
1311 </template>
1312 </div>
1313 </template>
1314 </template>
1315
1316 <template if="{{ !linesReady }}">
1317 <div class="sourceRow">
1318 <div class="sourceItem">loading...</div>
1319 </div>
1320 </template>
1321 </div>
1322 </div>
1323 </div>
1324 </template>
1325 </polymer-element>
1326
1327 <polymer-element name="breakpoint-toggle" extends="observatory-element">
1328 <template>
1329 <style>
1330 .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpo int, .resolvedBreakpoint {
1331 display: table-cell;
1332 vertical-align: top;
1333 font: 400 14px consolas, courier, monospace;
1334 min-width: 1em;
1335 text-align: center;
1336 cursor: pointer;
1337 }
1338 .possibleBreakpoint {
1339 color: #e0e0e0;
1340 }
1341 .possibleBreakpoint:hover {
1342 color: white;
1343 background-color: #777;
1344 }
1345 .busyBreakpoint {
1346 color: white;
1347 background-color: black;
1348 cursor: wait;
1349 }
1350 .unresolvedBreakpoint {
1351 color: white;
1352 background-color: #cac;
1353 }
1354 .resolvedBreakpoint {
1355 color: white;
1356 background-color: #e66;
1357 }
1358 </style>
1359
1360 <template if="{{ line.possibleBpt &amp;&amp; busy}}">
1361 <div class="busyBreakpoint">B</div>
1362 </template>
1363
1364 <template if="{{ line.bpt == null &amp;&amp; !line.possibleBpt }}">
1365 <div class="emptyBreakpoint">&nbsp;</div>
1366 </template>
1367
1368 <template if="{{ line.bpt == null &amp;&amp; line.possibleBpt &amp;&amp; !bu sy}}">
1369 <div class="possibleBreakpoint">
1370 <a on-click="{{ toggleBreakpoint }}">B</a>
1371 </div>
1372 </template>
1373
1374 <template if="{{ line.bpt != null &amp;&amp; !line.bpt['resolved'] &amp;&amp ; !busy}}">
1375 <div class="unresolvedBreakpoint">
1376 <a on-click="{{ toggleBreakpoint }}">B</a>
1377 </div>
1378 </template>
1379
1380 <template if="{{ line.bpt != null &amp;&amp; line.bpt['resolved'] &amp;&amp; !busy}}">
1381 <div class="resolvedBreakpoint">
1382 <a on-click="{{ toggleBreakpoint }}">B</a>
1383 </div>
1384 </template>
1385
1386 </template>
1387 </polymer-element>
1388
1389
1390
1391
1392
1393
1394
1395 <polymer-element name="script-ref" extends="service-ref">
1396 <template>
1397 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
1398 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}< /a>
1399 </template>
1400 </polymer-element>
1401
1402
1403
1404
1405 <polymer-element name="class-view" extends="observatory-element">
1406 <template>
1407 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1408 <nav-bar>
1409 <top-nav-menu></top-nav-menu>
1410 <isolate-nav-menu isolate="{{ cls.isolate }}"></isolate-nav-menu>
1411 <library-nav-menu library="{{ cls.library }}"></library-nav-menu>
1412 <class-nav-menu cls="{{ cls }}" last="{{ true }}"></class-nav-menu>
1413 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
1414 <nav-refresh callback="{{ refresh }}"></nav-refresh>
1415 <nav-control></nav-control>
1416 </nav-bar>
1417
1418 <div class="content">
1419 <h1>
1420 <template if="{{ cls.isAbstract }}">
1421 abstract
1422 </template>
1423 <template if="{{ cls.isPatch }}">
1424 patch
1425 </template>
1426 class {{ cls.name }}
1427 </h1>
1428 <div class="memberList">
1429 <div class="memberItem">
1430 <div class="memberName">library</div>
1431 <div class="memberValue">
1432 <library-ref ref="{{ cls.library }}"></library-ref>
1433 </div>
1434 </div>
1435 <div class="memberItem">
1436 <div class="memberName">script</div>
1437 <div class="memberValue">
1438 <script-ref ref="{{ cls.script }}" pos="{{ cls.tokenPos }}">
1439 </script-ref>
1440 </div>
1441 </div>
1442
1443 <div class="memberItem">&nbsp;</div>
1444
1445 <template if="{{ cls.superclass != null }}">
1446 <div class="memberItem">
1447 <div class="memberName">extends</div>
1448 <div class="memberValue">
1449 <class-ref ref="{{ cls.superclass }}"></class-ref>
1450 </div>
1451 </div>
1452 </template>
1453 <template if="{{ cls.subclasses.length > 0 }}">
1454 <div class="memberItem">
1455 <div class="memberName">extended by</div>
1456 <div class="memberValue">
1457 <template repeat="{{ subclass in cls.subclasses }}">
1458 <class-ref ref="{{ subclass }}"></class-ref>
1459 </template>
1460 </div>
1461 </div>
1462 </template>
1463
1464 <div class="memberItem">&nbsp;</div>
1465
1466 <template if="{{ cls.interfaces.length > 0 }}">
1467 <div class="memberItem">
1468 <div class="memberName">implements</div>
1469 <div class="memberValue">
1470 <template repeat="{{ interface in cls.interfaces }}">
1471 <class-ref ref="{{ interface }}"></class-ref>
1472 </template>
1473 </div>
1474 </div>
1475 </template>
1476 <template if="{{ cls.name != cls.vmName }}">
1477 <div class="memberItem">
1478 <div class="memberName">vm name</div>
1479 <div class="memberValue">{{ cls.vmName }}</div>
1480 </div>
1481 </template>
1482 </div>
1483 </div>
1484
1485 <template if="{{ cls.error != null }}">
1486 <error-ref ref="{{ cls.error }}"></error-ref>
1487 </template>
1488
1489 <hr>
1490
1491 <div class="content">
1492 <template if="{{ cls.fields.isNotEmpty }}">
1493 fields ({{ cls.fields.length }})
1494 <curly-block expand="{{ cls.fields.length <= 8 }}">
1495 <div class="memberList">
1496 <template repeat="{{ field in cls.fields }}">
1497 <div class="memberItem">
1498 <div class="memberName">
1499 <field-ref ref="{{ field }}"></field-ref>
1500 </div>
1501 <div class="memberValue">
1502 <template if="{{ field.value != null }}">
1503 <any-service-ref ref="{{ field.value }}"></any-service-ref>
1504 </template>
1505 </div>
1506 </div>
1507 </template>
1508 </div>
1509 </curly-block><br><br>
1510 </template>
1511
1512 <template if="{{ cls.functions.isNotEmpty }}">
1513 functions ({{ cls.functions.length }})
1514 <curly-block expand="{{ cls.functions.length <= 8 }}">
1515 <div class="memberList">
1516 <template repeat="{{ function in cls.functions }}">
1517 <div class="memberItem">
1518 <div class="memberValue">
1519 <function-ref ref="{{ function }}" qualified="{{ false }}">
1520 </function-ref>
1521 </div>
1522 </div>
1523 </template>
1524 </div>
1525 </curly-block><br><br>
1526 </template>
1527
1528 <template if="{{ !cls.hasNoAllocations }}">
1529 instances
1530 <div class="memberItem">
1531 <div class="memberName">currently allocated</div>
1532 <div class="memberValue">
1533 count {{ cls.newSpace.current.instances + cls.oldSpace.current.ins tances }}
1534 (shallow size {{ cls.newSpace.current.bytes + cls.oldSpace.current .bytes | formatSize }})
1535 </div>
1536 </div>
1537 <div class="memberItem">
1538 <div class="memberName">strongly reachable</div>
1539 <div class="memberValue">
1540 <template if="{{ instances == null }}">
1541 <eval-link callback="{{ reachable }}" label="[find]" expr="100">
1542 </eval-link>
1543 </template>
1544 <template if="{{ instances != null }}">
1545 sample
1546 <any-service-ref ref="{{ instances['sample'] }}"></any-service-r ef>
1547 <template if="{{ instances['totalCount'] > instances['sampleCoun t'] }}">
1548 <eval-link callback="{{ reachable }}" label="[more]" expr="{{ instances['sampleCount'] * 2 }}">
1549 </eval-link>
1550 </template>
1551 of total {{ instances['totalCount'] }}
1552 </template>
1553 </div>
1554 </div>
1555 <div class="memberItem">
1556 <div class="memberName">retained size</div>
1557 <div class="memberValue">
1558 <template if="{{ retainedBytes == null }}">
1559 <eval-link callback="{{ retainedSize }}" label="[calculate]">
1560 </eval-link>
1561 </template>
1562 <template if="{{ retainedBytes != null }}">
1563 {{ retainedBytes | formatSize }}
1564 </template>
1565 </div>
1566 </div>
1567 </template>
1568 </div>
1569
1570 <hr>
1571
1572 <div class="content">
1573 <eval-box callback="{{ eval }}"></eval-box>
1574 </div>
1575
1576 <hr>
1577 <script-inset script="{{ cls.script }}" startpos="{{ cls.tokenPos }}" endpos ="{{ cls.endTokenPos }}">
1578 </script-inset>
1579
1580 <br><br><br><br>
1581 <br><br><br><br>
1582 </template>
1583 </polymer-element>
1584
1585
1586
1587
1588
1589
1590 <polymer-element name="code-ref" extends="service-ref">
1591 <template>
1592 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1593 <template if="{{ code.isDartCode }}">
1594 <template if="{{ code.isOptimized }}">
1595 <a on-click="{{ goto }}" _href="{{ url }}">*{{ name }}</a>
1596 </template>
1597 <template if="{{ !code.isOptimized }}">
1598 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
1599 </template>
1600 </template>
1601 <template if="{{ !code.isDartCode }}">
1602 <span>{{ name }}</span>
1603 </template>
1604 </template>
1605 </polymer-element>
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615 <polymer-element name="code-view" extends="observatory-element">
1616 <template>
1617 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1618 <style>
1619 div.flex-row:hover {
2715 background-color: #FFF3E3; 1620 background-color: #FFF3E3;
2716 } 1621 }
2717 .rowColor0 { 1622
2718 background-color: #FFE9CC; 1623 .highlight {
2719 } 1624 background-color: #FFF3E3;
2720 .rowColor1 {
2721 background-color: #FFDEB2;
2722 }
2723 .rowColor2 {
2724 background-color: #FFD399;
2725 }
2726 .rowColor3 {
2727 background-color: #FFC87F;
2728 }
2729 .rowColor4 {
2730 background-color: #FFBD66;
2731 }
2732 .rowColor5 {
2733 background-color: #FFB24C;
2734 }
2735 .rowColor6 {
2736 background-color: #FFA733;
2737 }
2738 .rowColor7 {
2739 background-color: #FF9C19;
2740 }
2741 .rowColor8 {
2742 background-color: #FF9100;
2743 } 1625 }
2744 1626
2745 .tooltip { 1627 .tooltip {
2746 display: block; 1628 display: block;
2747 position: absolute; 1629 position: absolute;
2748 visibility: hidden; 1630 visibility: hidden;
2749 opacity: 0; 1631 opacity: 0;
2750 transition: visibility 0s linear 0.5s; 1632 transition: visibility 0s linear 0.5s;
2751 transition: opacity .4s ease-in-out; 1633 transition: opacity .4s ease-in-out;
2752 } 1634 }
2753 1635
2754 tr:hover .tooltip { 1636 .flex-row:hover .tooltip {
2755 display: block; 1637 display: block;
2756 position: absolute; 1638 position: absolute;
2757 top: 100%; 1639 top: 100%;
2758 right: 100%;
2759 visibility: visible; 1640 visibility: visible;
2760 z-index: 999; 1641 z-index: 999;
2761 width: 400px; 1642 width: auto;
1643 min-width: 400px;
2762 color: #ffffff; 1644 color: #ffffff;
2763 background-color: #0489c3; 1645 background-color: #FFF3E3;
2764 border-top-right-radius: 8px;
2765 border-top-left-radius: 8px;
2766 border-bottom-right-radius: 8px; 1646 border-bottom-right-radius: 8px;
2767 border-bottom-left-radius: 8px; 1647 border-bottom-left-radius: 8px;
2768 transition: visibility 0s linear 0.5s; 1648 transition: visibility 0s linear 0.5s;
2769 transition: opacity .4s ease-in-out; 1649 transition: opacity .4s ease-in-out;
2770 opacity: 1; 1650 opacity: 1;
2771 } 1651 }
2772 1652
2773 .white { 1653 .descriptor-address {
2774 color: #ffffff; 1654 color: #0489c3;
2775 } 1655 }
1656
1657 .snippet {
1658 text-align: center;
1659 margin-left: 10px;
1660 margin-right: 10px;
1661 }
1662
2776 </style> 1663 </style>
2777 <nav-bar> 1664 <nav-bar>
2778 <top-nav-menu last="{{ true }}"></top-nav-menu> 1665 <top-nav-menu></top-nav-menu>
1666 <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu>
1667 <nav-menu link="{{ code.link }}" anchor="{{ code.name }}" last="{{ true }} "></nav-menu>
1668 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2779 <nav-control></nav-control> 1669 <nav-control></nav-control>
2780 </nav-bar> 1670 </nav-bar>
2781 <div class="content-centered"> 1671 <div class="content">
2782 <h1>Class Hierarchy</h1> 1672 <template if="{{ code.isDartCode &amp;&amp; code.isOptimized }}">
2783 <table id="tableTree" class="table"> 1673 <h1>Optimized code for {{ code.name }}</h1>
2784 <thead> 1674 </template>
2785 <tr> 1675 <template if="{{ !(code.isDartCode &amp;&amp; code.isOptimized) }}">
2786 <th>Class</th> 1676 <h1>Code for {{ code.name }}</h1>
2787 </tr> 1677 </template>
2788 </thead> 1678 <div class="memberList">
2789 <tbody> 1679 <div class="memberItem">
2790 <tr template="" repeat="{{row in tree.rows }}"> 1680 <div class="memberName">Kind</div>
2791 <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style= "{{ padding(row) }}"> 1681 <div class="memberValue">{{code.kind}}</div>
2792 <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span> 1682 </div>
2793 <class-ref ref="{{ row.cls }}"></class-ref> 1683 <template if="{{ code.isDartCode }}">
2794 </td> 1684 <div class="memberItem">
2795 </tr> 1685 <div class="memberName">Optimized</div>
2796 </tbody> 1686 <div class="memberValue">{{code.isOptimized}}</div>
2797 </table> 1687 </div>
1688 </template>
1689 <div class="memberItem">
1690 <div class="memberName">Function</div>
1691 <div class="memberValue">
1692 <function-ref ref="{{code.function}}">
1693 </function-ref>
1694 </div>
1695 </div>
1696 <div class="memberItem">
1697 <div class="memberName">Inclusive</div>
1698 <div class="memberValue">{{ code.formattedInclusiveTicks }}</div>
1699 </div>
1700 <div class="memberItem">
1701 <div class="memberName">Exclusive</div>
1702 <div class="memberValue">{{ code.formattedExclusiveTicks }}</div>
1703 </div>
1704 <div class="memberItem">
1705 <div class="memberName">Constant object pool</div>
1706 <div class="memberValue">
1707 <any-service-ref ref="{{ code.objectPool }}"></any-service-ref>
1708 </div>
1709 </div>
1710 </div>
1711 </div>
1712 <hr>
1713 <div class="content">
1714 <template if="{{ code.hasDisassembly }}">
1715 <div class="flex-row">
1716 <div class="flex-item-fixed-2-12 memberHeader">Inclusive</div>
1717 <div class="flex-item-fixed-2-12 memberHeader">Exclusive</div>
1718 <div class="flex-item-fixed-2-12 memberHeader">Address</div>
1719 <div class="flex-item-fixed-6-12 memberHeader">Disassembly</div>
1720 </div>
1721 </template>
1722 <template repeat="{{ instruction in code.instructions }}">
1723 <div class="flex-row" on-mouseover="{{ mouseOver }}" on-mouseout="{{ mou seOut }}" data-jump-target="{{ instruction.jumpTarget.address }}" id="addr-{{ in struction.address }}" style="position: relative">
1724 <template if="{{ instruction.isComment }}">
1725 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Inclusive(code) }}</div>
1726 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Exclusive(code) }}</div>
1727 <div class="flex-item-fixed-8-12 monospace">{{ instruction.human }}< /div>
1728 </template>
1729 <template if="{{ !instruction.isComment }}">
1730 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Inclusive(code) }}</div>
1731 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Exclusive(code) }}</div>
1732 <template if="{{ instruction.hasDescriptors }}">
1733 <div class="flex-item-fixed-2-12 monospace descriptor-address">
1734 <div class="tooltip">
1735 <template repeat="{{ descriptor in instruction.descriptors }}" >
1736 <div class="memberList">
1737 <div class="memberItem">
1738 <div class="memberName">Kind</div>
1739 <div class="memberValue">{{ descriptor.kind }}</div>
1740 </div>
1741 <div class="memberItem">
1742 <div class="memberName">Deoptimization ID</div>
1743 <div class="memberValue">{{ descriptor.formattedDeoptId() }}</div>
1744 </div>
1745 <template if="{{ descriptor.script != null }}">
1746 <div class="memberItem">
1747 <div class="memberName">Script</div>
1748 <div class="memberValue"><script-ref ref="{{ descriptor .script }}" pos="{{ descriptor.tokenPos }}"></script-ref></div>
1749 </div>
1750 </template>
1751 </div>
1752 <template if="{{ descriptor.script != null }}">
1753 <div class="snippet monospace">
1754 <span>{{ descriptor.formattedLine }}</span>
1755 </div>
1756 </template>
1757 </template>
1758 </div>
1759 {{ instruction.formattedAddress() }}
1760 </div>
1761 </template>
1762 <template if="{{ !instruction.hasDescriptors }}">
1763 <div class="flex-item-fixed-2-12 monospace">
1764 {{ instruction.formattedAddress() }}
1765 </div>
1766 </template>
1767 <div class="flex-item-fixed-6-12 monospace">
1768 {{ instruction.human }}
1769 </div>
1770 </template>
1771 </div>
1772 </template>
2798 </div> 1773 </div>
2799 </template> 1774 </template>
2800 </polymer-element> 1775 </polymer-element>
2801 1776
2802 1777
2803 1778
2804 1779
2805 1780
2806 1781
2807 1782
2808 1783
2809 1784
2810 1785
2811 1786
2812 1787 <!-- TODO(turnidge): Use core-icon once core_elements work properly in
2813 <polymer-element name="error-ref" extends="service-ref"> 1788 devtools -->
2814 <template> 1789 <polymer-element name="icon-expand-less" noscript="">
2815 <style>/* Global styles */ 1790 <template>
2816 * { 1791 <svg width="24" height="24">
2817 margin: 0; 1792 <polygon points="12,8 6,14 7.4,15.4 12,10.8 16.6,15.4 18,14 "></polygon>
2818 padding: 0; 1793 </svg>
2819 font: 400 14px 'Montserrat', sans-serif; 1794 </template>
2820 color: #333; 1795 </polymer-element>
2821 box-sizing: border-box; 1796
2822 } 1797 <polymer-element name="icon-expand-more" noscript="">
2823 1798 <template>
2824 .content { 1799 <svg width="24" height="24">
2825 padding-left: 10%; 1800 <polygon points="16.6,8.6 12,13.2 7.4,8.6 6,10 12,16 18,10 "></polygon>
2826 font: 400 14px 'Montserrat', sans-serif; 1801 </svg>
2827 } 1802 </template>
2828 1803 </polymer-element>
2829 .content-centered { 1804
2830 padding-left: 10%; 1805 <polymer-element name="debugger-page" extends="observatory-element">
2831 padding-right: 10%; 1806 <template>
2832 font: 400 14px 'Montserrat', sans-serif; 1807 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2833 }
2834
2835 .content-centered-big {
2836 padding-left: 5%;
2837 padding-right: 5%;
2838 font: 400 14px 'Montserrat', sans-serif;
2839 }
2840
2841 h1 {
2842 font: 400 18px 'Montserrat', sans-serif;
2843 }
2844
2845 .memberList {
2846 display: table;
2847 }
2848
2849 .memberItem {
2850 display: table-row;
2851 }
2852
2853 .memberName, .memberValue {
2854 display: table-cell;
2855 vertical-align: top;
2856 padding: 3px 0 3px 1em;
2857 font: 400 14px 'Montserrat', sans-serif;
2858 }
2859
2860 .memberSmall {
2861 display: table-cell;
2862 vertical-align: top;
2863 padding: 3px 0 3px 1em;
2864 font: 400 12px 'Montserrat', sans-serif;
2865 }
2866
2867 .monospace {
2868 font-family: consolas, courier, monospace;
2869 font-size: 1em;
2870 line-height: 1.2em;
2871 white-space: nowrap;
2872 }
2873
2874 a {
2875 color: #0489c3;
2876 text-decoration: none;
2877 }
2878
2879 a:hover {
2880 text-decoration: underline;
2881 }
2882
2883 em {
2884 color: inherit;
2885 font-style: italic;
2886 }
2887
2888 b {
2889 color: inherit;
2890 font-weight: bold;
2891 }
2892
2893 hr {
2894 margin-top: 20px;
2895 margin-bottom: 20px;
2896 border: 0;
2897 border-top: 1px solid #eee;
2898 height: 0;
2899 box-sizing: content-box;
2900 }
2901
2902 .list-group {
2903 padding-left: 0;
2904 margin-bottom: 20px;
2905 }
2906
2907 .list-group-item {
2908 position: relative;
2909 display: block;
2910 padding: 10px 15px;
2911 margin-bottom: -1px;
2912 background-color: #fff;
2913 }
2914
2915 .list-group-item:first-child {
2916 /* rounded top corners */
2917 border-top-right-radius:4px;
2918 border-top-left-radius:4px;
2919 }
2920
2921 .list-group-item:last-child {
2922 margin-bottom: 0;
2923 /* rounded bottom corners */
2924 border-bottom-right-radius: 4px;
2925 border-bottom-left-radius:4px;
2926 }
2927
2928 /* Flex row container */
2929 .flex-row {
2930 display: flex;
2931 flex-direction: row;
2932 }
2933
2934 /* Flex column container */
2935 .flex-column {
2936 display: flex;
2937 flex-direction: column;
2938 }
2939
2940 .flex-item-fit {
2941 flex-grow: 1;
2942 flex-shrink: 1;
2943 flex-basis: auto;
2944 }
2945
2946 .flex-item-no-shrink {
2947 flex-grow: 0;
2948 flex-shrink: 0;
2949 flex-basis: auto;
2950 }
2951
2952 .flex-item-fill {
2953 flex-grow: 0;
2954 flex-shrink: 1; /* shrink when pressured */
2955 flex-basis: 100%; /* try and take 100% */
2956 }
2957
2958 .flex-item-fixed-1-12 {
2959 flex-grow: 0;
2960 flex-shrink: 0;
2961 flex-basis: 8.3%;
2962 }
2963
2964 .flex-item-fixed-2-12 {
2965 flex-grow: 0;
2966 flex-shrink: 0;
2967 flex-basis: 16.6%;
2968 }
2969
2970 .flex-item-fixed-4-12 {
2971 flex-grow: 0;
2972 flex-shrink: 0;
2973 flex-basis: 33.3333%;
2974 }
2975
2976 .flex-item-fixed-6-12, .flex-item-50-percent {
2977 flex-grow: 0;
2978 flex-shrink: 0;
2979 flex-basis: 50%;
2980 }
2981
2982 .flex-item-fixed-8-12 {
2983 flex-grow: 0;
2984 flex-shrink: 0;
2985 flex-basis: 66.6666%;
2986 }
2987
2988 .flex-item-fixed-9-12 {
2989 flex-grow: 0;
2990 flex-shrink: 0;
2991 flex-basis: 75%;
2992 }
2993
2994
2995 .flex-item-fixed-12-12 {
2996 flex-grow: 0;
2997 flex-shrink: 0;
2998 flex-basis: 100%;
2999 }
3000
3001 .flex-item-10-percent {
3002 flex-grow: 0;
3003 flex-shrink: 0;
3004 flex-basis: 10%;
3005 }
3006
3007 .flex-item-15-percent {
3008 flex-grow: 0;
3009 flex-shrink: 0;
3010 flex-basis: 15%;
3011 }
3012
3013 .flex-item-20-percent {
3014 flex-grow: 0;
3015 flex-shrink: 0;
3016 flex-basis: 20%;
3017 }
3018
3019 .flex-item-30-percent {
3020 flex-grow: 0;
3021 flex-shrink: 0;
3022 flex-basis: 30%;
3023 }
3024
3025 .flex-item-40-percent {
3026 flex-grow: 0;
3027 flex-shrink: 0;
3028 flex-basis: 40%;
3029 }
3030
3031 .flex-item-50-percent {
3032 flex-grow: 0;
3033 flex-shrink: 0;
3034 flex-basis: 50%;
3035 }
3036
3037 .flex-item-60-percent {
3038 flex-grow: 0;
3039 flex-shrink: 0;
3040 flex-basis: 60%;
3041 }
3042
3043 .flex-item-70-percent {
3044 flex-grow: 0;
3045 flex-shrink: 0;
3046 flex-basis: 70%;
3047 }
3048
3049 .flex-item-80-percent {
3050 flex-grow: 0;
3051 flex-shrink: 0;
3052 flex-basis: 80%;
3053 }
3054
3055 .well {
3056 min-height: 20px;
3057 padding: 19px;
3058 margin-bottom: 20px;
3059 background-color: #f5f5f5;
3060 border: 1px solid #e3e3e3;
3061 border-radius: 4px;
3062 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
3063 }
3064
3065 .break-wrap {
3066 word-wrap: break-word;
3067 }
3068 </style>
3069 <style> 1808 <style>
3070 .errorBox { 1809 .container {
3071 background-color: #f5f5f5; 1810 height: 100%;
3072 border: 1px solid #ccc; 1811 display: flex;
3073 padding: 10px; 1812 flex-direction: column;
3074 font-family: consolas, courier, monospace; 1813 justify-content: space-between;
3075 font-size: 1em; 1814 }
3076 line-height: 1.2em; 1815 nav-bar {
3077 white-space: pre; 1816 flex: 0 0 auto;
1817 }
1818 .stack {
1819 flex: 0 0 auto;
1820 overflow-y: auto;
1821 }
1822 core-splitter {
1823 flex: 0 0 auto;
1824 }
1825 .console {
1826 flex: 1 1 auto;
1827 overflow-y: auto;
1828 }
1829 .commandline {
1830 flex: 0 0 auto;
3078 } 1831 }
3079 </style> 1832 </style>
3080 <span> 1833
3081 <pre class="errorBox">{{ ref.kind }}: {{ ref.message }}</pre> 1834 <div class="container">
3082 </span> 1835 <nav-bar>
3083 </template> 1836 » <top-nav-menu last="{{ true }}"></top-nav-menu>
3084 </polymer-element> 1837 » <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
3085 1838 » </isolate-nav-menu>
3086 1839 » <nav-control></nav-control>
3087 1840 </nav-bar>
3088 1841
3089 <polymer-element name="eval-box" extends="observatory-element"> 1842 <div id="stack" class="stack">
3090 <template> 1843 » <debugger-stack isolate="{{ isolate }}"></debugger-stack>
1844 </div>
1845 <!--
1846 <core-splitter direction="up" allowOverflow=true></core-splitter>
1847 <div class="console">
1848 » <debugger-console isolate="{{ isolate }}"></debugger-console>
1849 </div>
1850 <div class="commandline">
1851 » <debugger-input isolate="{{ isolate }}"></debugger-input>
1852 </div>
1853 -->
1854 </div>
1855 </template>
1856 </polymer-element>
1857
1858 <polymer-element name="debugger-stack" extends="observatory-element">
1859 <template>
1860 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1861 <template if="{{ stack == null }}">
1862 Loading stack frames
1863 </template>
1864 <template if="{{ stack != null }}">
1865 <ul class="list-group">
1866 <template repeat="{{ frame in stack['members'] }}">
1867 <li class="list-group-item">
1868 <debugger-frame frame="{{ frame }}" expand="{{ frame['depth'] == act iveFrame }}">
1869 </debugger-frame>
1870 </li>
1871 </template>
1872 </ul>
1873 </template>
1874 </template>
1875 </polymer-element>
1876
1877
1878 <polymer-element name="debugger-frame" extends="observatory-element">
1879 <template>
1880 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3091 <style> 1881 <style>
3092 .textbox { 1882 .frameOuter {
3093 flex-grow: 1; 1883 position: relative;
1884 padding: 5px;
1885 border: 1px solid white;
1886 }
1887 .frameOuter:hover {
1888 border: 1px solid #e0e0e0;
1889 }
1890 .shadow {
1891 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16),
1892 0 2px 5px 0 rgba(0, 0, 0, 0.26);
1893 }
1894 .frameSummaryText {
1895 display: inline-block;
1896 padding: 5px;
1897 }
1898 .frameId {
1899 display: inline-block;
1900 width: 60px;
1901 }
1902 .frameOuter .frameExpander {
1903 position: absolute;
1904 right: 5px;
1905 top: 5px;
1906 display: none;
1907 }
1908 .frameOuter:hover .frameExpander{
1909 display: inline-block;
1910 }
1911 .frameContractor {
1912 position: absolute;
1913 right: 5px;
1914 bottom: 5px;
1915 display: inline-block;
1916 }
1917 </style>
1918 <div id="frameOuter" class="frameOuter">
1919 <a on-click="{{ toggleExpand }}">
1920 <div class="frameSummary">
1921 <div class="frameSummaryText">
1922 <div class="frameId"><b>frame {{ frame['depth'] }}</b></div>
1923 <function-ref ref="{{ frame['function'] }}"></function-ref>
1924 ( <script-ref ref="{{ frame['script'] }}" pos="{{ frame['tokenPos'] }}">
1925 </script-ref> )
1926 </div>
1927 <template if="{{ !expanded }}">
1928 <div class="frameExpander">
1929 <icon-expand-more></icon-expand-more>
1930 </div>
1931 </template>
1932 </div>
1933 </a>
1934
1935 <template if="{{expanded}}">
1936 <div class="frameDetails">
1937 <div class="flex-row">
1938 <div class="flex-item-60-percent">
1939 <script-inset height="{{ scriptHeight }}" script="{{ frame['functi on'].script }}" startpos="{{ frame['function'].tokenPos }}" endpos="{{ frame['fu nction'].endTokenPos }}" currentpos="{{ frame['tokenPos'] }}">
1940 </script-inset>
1941 </div>
1942 <div class="flex-item-40-percent">
1943 <div style="padding:10px;" class="memberList">
1944 <template repeat="{{ v in frame['vars'] }}">
1945 <div class="memberItem">
1946 <div class="memberName">{{ v['name']}}</div>
1947 <div class="memberValue">
1948 <any-service-ref ref="{{ v['value'] }}">
1949 </any-service-ref>
1950 </div>
1951 </div>
1952 </template>
1953 </div>
1954 </div>
1955 </div>
1956 <!-- TODO(turnidge): Add eval box here? -->
1957 <div class="frameContractor">
1958 <template if="{{expanded}}">
1959 <a on-click="{{ toggleExpand }}">
1960 <icon-expand-less></icon-expand-less>
1961 </a>
1962 </template>
1963 </div>
1964 </div>
1965 </template>
1966 </div>
1967 </template>
1968 </polymer-element>
1969
1970 <polymer-element name="debugger-console" extends="observatory-element">
1971 <template>
1972 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1973 <style>
1974 .textBox {
1975 position: absolute;
1976 bottom: 0px;
1977 width: 100%;
1978 }
1979 </style>
1980 <div>
1981 Debugging console is not yet implemented.<br>
1982 </div>
1983 </template>
1984 </polymer-element>
1985
1986 <polymer-element name="debugger-input" extends="observatory-element">
1987 <template>
1988 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
1989 <style>
1990 .textBox {
3094 font: 400 16px 'Montserrat', sans-serif; 1991 font: 400 16px 'Montserrat', sans-serif;
3095 } 1992 width: 100%;
3096 .bigtextbox {
3097 font: 400 16px 'Montserrat', sans-serif;
3098 }
3099 .button {
3100 font: 400 16px 'Montserrat', sans-serif;
3101 }
3102 .radios {
3103 display: inline;
3104 padding-right: 30px;
3105 }
3106 .radios label{
3107 padding-left: 10px;
3108 }
3109 .historyExpr, .historyValue {
3110 vertical-align: text-top;
3111 font: 400 14px 'Montserrat', sans-serif;
3112 }
3113 .historyExpr a {
3114 display: block;
3115 color: black;
3116 text-decoration: none;
3117 padding: 6px 6px;
3118 cursor: pointer;
3119 white-space: pre-line;
3120 }
3121 .historyExpr a:hover {
3122 background-color: #fff3e3;
3123 }
3124 .historyValue {
3125 display: block;
3126 padding: 6px 6px;
3127 } 1993 }
3128 </style> 1994 </style>
3129 <form style="display:flex; flex-direction:row; align-items:flex-end"> 1995 <input id="textBox" class="textBox" type="text" value="{{ text }}">
3130 <template if="{{ lineMode == '1-line' }}"> 1996 </template>
3131 <input class="textbox" type="text" value="{{ text }}"> 1997 </polymer-element>
1998
1999
2000
2001
2002
2003
2004
2005 <polymer-element name="error-view" extends="observatory-element">
2006 <template>
2007 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2008 <nav-bar>
2009 <top-nav-menu last="{{ true }}"></top-nav-menu>
2010 <nav-control></nav-control>
2011 </nav-bar>
2012 <div class="content-centered">
2013 <h1>{{ error.kind }}</h1>
2014 <br>
2015 <div class="well">{{ error.message }}</div>
2016 </div>
2017 </template>
2018 </polymer-element>
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033 <polymer-element name="field-view" extends="observatory-element">
2034 <template>
2035 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2036 <nav-bar>
2037 <top-nav-menu></top-nav-menu>
2038 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu>
2039 <template if="{{ field.owner.type == 'Class' }}">
2040 <!-- TODO(turnidge): Add library nav menu here. -->
2041 <class-nav-menu cls="{{ field.owner }}"></class-nav-menu>
3132 </template> 2042 </template>
3133 <template if="{{ lineMode == 'N-line' }}"> 2043 <template if="{{ field.owner.type == 'Library' }}">
3134 <textarea class="bigtextbox" rows="5" cols="80" value="{{ text }}"></tex tarea> 2044 <library-nav-menu library="{{ field.owner }}"></library-nav-menu>
3135 </template> 2045 </template>
3136 2046 <nav-menu link="{{ field.link }}" anchor="{{ field.name }}" last="{{ true }}"></nav-menu>
3137 <input class="button" type="submit" value="Evaluate" on-click="{{ eval }}" > 2047 <nav-refresh callback="{{ refresh }}"></nav-refresh>
3138 <div class="radios" on-change="{{ updateLineMode }}"> 2048 <nav-control></nav-control>
3139 <label for="1-line"> 2049 </nav-bar>
3140 <input type="radio" name="lineMode" value="1-line" checked=""> 2050
3141 1-line 2051 <div class="content">
3142 </label> 2052 <h1>
3143 <label for="N-line"> 2053 <template if="{{ field.isStatic }}">static</template>
3144 <input type="radio" name="lineMode" value="N-line"> 2054 <template if="{{ field.isFinal }}">final</template>
3145 N-line 2055 <template if="{{ field.isConst }}">const</template>
3146 </label> 2056 <template if="{{ (field.declaredType.name == 'dynamic' &amp;&amp;
2057 !field.isFinal &amp;&amp; !field.isConst) }}">
2058 var
2059 </template>
2060 <template if="{{ (field.declaredType.name != 'dynamic') }}">
2061 {{ field.declaredType.name }}
2062 </template>
2063 {{ field.name }}
2064 </h1>
2065 <div class="memberList">
2066 <div class="memberItem">
2067 <div class="memberName">owner</div>
2068 <div class="memberValue">
2069 <template if="{{ field.owner.type == 'Class' }}">
2070 <class-ref ref="{{ field.owner }}"></class-ref>
2071 </template>
2072 <template if="{{ field.owner.type != 'Class' }}">
2073 <library-ref ref="{{ field.owner }}"></library-ref>
2074 </template>
2075 </div>
2076 </div>
2077 <div class="memberItem">
2078 <div class="memberName">script</div>
2079 <div class="memberValue">
2080 <script-ref ref="{{ field.script }}"></script-ref>
2081 </div>
2082 </div>
2083 <template if="{{ !field.isStatic }}">
2084 <div class="memberItem" title="The types observed for this field at ru ntime. Fields that are observed to have a single type at runtime or to never be null may allow for additional optimization.">
2085 <div class="memberName">observed types</div>
2086 <div class="memberValue">
2087 <template if="{{ field.guardClass == 'dynamic' }}">
2088 various
2089 </template>
2090 <template if="{{ field.guardClass == 'unknown' }}">
2091 none
2092 </template>
2093 <template if="{{ field.guardClass != 'unknown' &amp;&amp;
2094 field.guardClass != 'dynamic' }}">
2095 <class-ref ref="{{ field.guardClass }}"></class-ref>
2096 <template if="{{ field.guardNullable }}">
2097 — null observed
2098 </template>
2099 <template if="{{ !field.guardNullable }}">
2100 — null not observed
2101 </template>
2102 </template>
2103 </div>
2104 </div>
2105 </template>
2106 <template if="{{ field.value != null }}">
2107 <div class="memberItem">
2108 <div class="memberName">static value</div>
2109 <div class="memberValue">
2110 <any-service-ref ref="{{ field.value }}"></any-service-ref>
2111 </div>
2112 </div>
2113 </template>
3147 </div> 2114 </div>
3148 </form> 2115 </div>
3149 2116 </template>
3150 <br> 2117 </polymer-element>
3151 <template if="{{ results.isNotEmpty }}"> 2118
3152 <table>
3153 <tbody><tr template="" repeat="{{ result in results }}">
3154 <td class="historyExpr">
3155 <a class="expr" on-click="{{ selectExpr }}" expr="{{ result['expr'] }}">{{ result['expr'] }}</a>
3156 </td>
3157 <td class="historyValue">
3158 <template if="{{ result['value'] == null }}">
3159 <div style="color:#aaa;cursor:wait;">&lt;pending&gt;</div>
3160 </template>
3161 <template if="{{ result['value'] != null }}">
3162 <any-service-ref ref="{{ result['value'] }}"></any-service-ref>
3163 </template>
3164 </td>
3165 </tr>
3166 </tbody></table>
3167 </template>
3168 </template>
3169 </polymer-element>
3170
3171 2119
3172 2120
3173 2121
3174 2122
3175 2123
3176 2124
3177 <polymer-element name="eval-link"> 2125 <polymer-element name="flag-list" extends="observatory-element">
2126 <template>
2127 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2128 <nav-bar>
2129 <top-nav-menu></top-nav-menu>
2130 <nav-menu link="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" la st="{{ true }}"></nav-menu>
2131 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2132 <nav-control></nav-control>
2133 </nav-bar>
2134
2135 <div class="content-centered">
2136 <template if="{{ flagList['modifiedFlags'].isNotEmpty }}">
2137 <h1>Modified Flags</h1>
2138 <br>
2139 <template repeat="{{ flag in flagList['modifiedFlags'] }}">
2140 <flag-item flag="{{ flag }}"></flag-item>
2141 <br>
2142 </template>
2143 <hr>
2144 </template>
2145
2146 <h1>Unmodified Flags</h1>
2147 <br>
2148 <template if="{{ flagList['unmodifiedFlags'].isEmpty }}">
2149 <em>None</em>
2150 </template>
2151 <template if="{{ flagList['unmodifiedFlags'].isNotEmpty }}">
2152 <template repeat="{{ flag in flagList['unmodifiedFlags'] }}">
2153 <flag-item flag="{{ flag }}"></flag-item>
2154 <br>
2155 </template>
2156 </template>
2157 </div>
2158
2159 </template>
2160 </polymer-element>
2161
2162 <polymer-element name="flag-item" extends="observatory-element">
2163 <template>
2164 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2165 <span style="color:#aaa">// {{ flag['comment'] }}</span>
2166 <div style="padding: 3px 0">
2167 <b>{{ flag['name'] }}</b>
2168 &nbsp;=&nbsp;
2169 {{ flag['valueAsString'] }}
2170 </div>
2171 </template>
2172 </polymer-element>
2173
2174
2175
2176
2177
2178
2179
2180
2181
2182
2183
2184
2185
2186
2187 <polymer-element name="function-view" extends="observatory-element">
2188 <template>
2189 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2190 <nav-bar>
2191 <top-nav-menu></top-nav-menu>
2192 <isolate-nav-menu isolate="{{ function.isolate }}"></isolate-nav-menu>
2193 <template if="{{ function.owningClass != null }}">
2194 <!-- TODO(turnidge): Add library nav menu here. -->
2195 <class-nav-menu cls="{{ function.owningClass }}"></class-nav-menu>
2196 </template>
2197 <template if="{{ function.owningLibrary != null }}">
2198 <library-nav-menu library="{{ function.owningLibrary }}"></library-nav-m enu>
2199 </template>
2200 <nav-menu link="{{ function.link }}" anchor="{{ function.name }}" last="{{ true }}"></nav-menu>
2201 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
2202 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2203 <nav-control></nav-control>
2204 </nav-bar>
2205
2206 <div class="content">
2207 <h1>function {{ function.qualifiedName }}</h1>
2208
2209 <div class="memberList">
2210 <div class="memberItem">
2211 <div class="memberName">kind</div>
2212 <div class="memberValue">
2213 <template if="{{ function.isStatic }}">static</template>
2214 <template if="{{ function.isConst }}">const</template>
2215 {{ function.kind.toString() }}
2216 </div>
2217 </div>
2218 <template if="{{ function.parent != null }}">
2219 <div class="memberItem">
2220 <div class="memberName">parent function</div>
2221 <div class="memberValue">
2222 <function-ref ref="{{ function.parent }}"></function-ref>
2223 </div>
2224 </div>
2225 </template>
2226 <div class="memberItem">
2227 <div class="memberName">owner</div>
2228 <div class="memberValue">
2229 <template if="{{ function.owningClass != null }}">
2230 <class-ref ref="{{ function.owningClass }}"></class-ref>
2231 </template>
2232 <template if="{{ function.owningLibrary != null }}">
2233 <library-ref ref="{{ function.owningLibrary }}"></library-ref>
2234 </template>
2235 </div>
2236 </div>
2237 <div class="memberItem">
2238 <div class="memberName">script</div>
2239 <div class="memberValue">
2240 <script-ref ref="{{ function.script }}" pos="{{ function.tokenPos }} ">
2241 </script-ref>
2242 </div>
2243 </div>
2244
2245 <div class="memberItem">&nbsp;</div>
2246
2247 <template if="{{ function.code != null }}">
2248 <div class="memberItem">
2249 <div class="memberName">optimized code</div>
2250 <div class="memberValue">
2251 <code-ref ref="{{ function.code }}"></code-ref>
2252 </div>
2253 </div>
2254 </template>
2255 <template if="{{ function.unoptimizedCode != null }}">
2256 <div class="memberItem">
2257 <div class="memberName">unoptimized code</div>
2258 <div class="memberValue">
2259 <code-ref ref="{{ function.unoptimizedCode }}"></code-ref>
2260 </div>
2261 <div class="memberValue">
2262 <span title="This count is used to determine when a function wil l be optimized. It is a combination of call counts and other factors.">
2263 (usage count: {{ function.usageCounter }})
2264 </span>
2265 </div>
2266 </div>
2267 </template>
2268 <div class="memberItem">
2269 <div class="memberName">deoptimizations</div>
2270 <div class="memberValue">{{ function.deoptimizations }}</div>
2271 </div>
2272 <div class="memberItem">
2273 <div class="memberName">optimizable</div>
2274 <div class="memberValue">{{ function.isOptimizable }}</div>
2275 </div>
2276 <div class="memberItem">
2277 <div class="memberName">inlinable</div>
2278 <div class="memberValue">{{ function.isInlinable }}</div>
2279 </div>
2280 <template if="{{ function.name != function.vmName }}">
2281 <div class="memberItem">
2282 <div class="memberName">vm name</div>
2283 <div class="memberValue">{{ function.vmName }}</div>
2284 </div>
2285 </template>
2286 </div>
2287 </div>
2288
2289 <hr>
2290 <script-inset script="{{ function.script }}" startpos="{{ function.tokenPos }}" endpos="{{ function.endTokenPos }}">
2291 </script-inset>
2292
2293 <br>
2294 </template>
2295 </polymer-element>
2296
2297
2298
2299
2300
2301
2302
2303
2304 <polymer-element name="heap-map" extends="observatory-element">
2305 <template>
2306 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
2307 <style>
2308 .hover {
2309 position: fixed;
2310 z-index: 999;
2311 height: 16px;
2312 width: 100%;
2313 background: #ffffff;
2314 }
2315 .spacer {
2316 height: 16px;
2317 background-color: red;
2318 }
2319 </style>
2320 <nav-bar pad="{{ false }}">
2321 <top-nav-menu></top-nav-menu>
2322 <isolate-nav-menu isolate="{{ fragmentation.isolate }}"></isolate-nav-menu>
2323 <nav-menu link="{{ fragmentation.isolate.relativeLink('heapmap') }}" anchor= "heap map" last="{{ true }}"></nav-menu>
2324 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2325 <nav-control></nav-control>
2326 </nav-bar>
2327 <div class="hover">
2328 <p style="text-align:center">{{ status }}</p>
2329 </div>
2330 <div class="spacer">
2331 <!-- Make sure no data is covered by hover bar initially -->
2332 </div>
2333 <div class="flex-row">
2334 <canvas id="fragmentation" width="1px" height="1px"></canvas>
2335 </div>
2336 </template>
2337 </polymer-element>
2338
2339
2340
2341
2342
2343
2344
2345 <polymer-element name="io-view" extends="observatory-element">
2346 <template>
2347 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2348
2349 <nav-bar>
2350 <top-nav-menu last="{{ true }}"></top-nav-menu>
2351 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2352 <nav-control></nav-control>
2353 </nav-bar>
2354
2355 <div class="content">
2356 <h1>dart:io</h1>
2357
2358 <br>
2359
2360 <ul class="list-group">
2361 <li class="list-group-item">
2362 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /http/servers'))}}">HTTP Servers</a>
2363 </li>
2364 </ul>
2365
2366 <br>
2367
2368 <ul class="list-group">
2369 <li class="list-group-item">
2370 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /sockets'))}}">Sockets</a>
2371 </li>
2372 </ul>
2373
2374 <br>
2375
2376 <ul class="list-group">
2377 <li class="list-group-item">
2378 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /websockets'))}}">WebSockets</a>
2379 </li>
2380 </ul>
2381
2382 <br>
2383
2384 <ul class="list-group">
2385 <li class="list-group-item">
2386 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /file/randomaccessfiles'))}}">Random Access Files</a>
2387 </li>
2388 </ul>
2389
2390 <br>
2391
2392 <ul class="list-group">
2393 <li class="list-group-item">
2394 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /processes'))}}">Processes</a>
2395 </li>
2396 </ul>
2397
2398 </div>
2399 <br>
2400 <hr>
2401 </template>
2402 </polymer-element>
2403
2404 <polymer-element name="io-ref" extends="service-ref">
2405 <template>
2406 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2407 <template if="{{ ref.type == 'Socket' }}">
2408 <io-socket-ref ref="{{ ref }}"></io-socket-ref>
2409 </template>
2410 <template if="{{ ref.type == 'HttpServerConnection' }}">
2411 <io-http-server-connection-ref ref="{{ ref }}"></io-http-server-connection -ref>
2412 </template>
2413 <template if="{{ ref.type == 'HttpServer' }}">
2414 <io-http-server-ref ref="{{ ref }}"></io-http-server-ref>
2415 </template>
2416 <template if="{{ ref.type == 'WebSocket' }}">
2417 <io-web-socket-ref ref="{{ ref }}"></io-web-socket-ref>
2418 </template>
2419 <template if="{{ ref.type == 'Process' }}">
2420 <io-process-ref ref="{{ ref }}"></io-process-ref>
2421 </template>
2422 </template>
2423 </polymer-element>
2424
2425 <polymer-element name="io-http-server-list-view" extends="observatory-element">
2426 <template>
2427 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2428
2429 <nav-bar>
2430 <top-nav-menu last="{{ true }}"></top-nav-menu>
2431 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2432 </nav-bar>
2433
2434 <div class="content">
2435 <h1>HttpServers</h1>
2436
2437 <br>
2438
2439 <ul class="list-group">
2440 <template repeat="{{ httpServer in list['members'] }}">
2441 <li class="list-group-item">
2442 <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
2443 </li>
2444 </template>
2445 </ul>
2446 </div>
2447 <br>
2448 <hr>
2449 </template>
2450 </polymer-element>
2451
2452 <polymer-element name="io-http-server-ref" extends="service-ref">
2453 <template>
2454 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2455 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2456 </template>
2457 </polymer-element>
2458
2459 <polymer-element name="io-http-server-view" extends="observatory-element">
2460 <template>
2461 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2462
2463 <nav-bar>
2464 <top-nav-menu last="{{ true }}"></top-nav-menu>
2465 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2466 </nav-bar>
2467
2468 <div class="content">
2469 <h1>HttpServer</h1>
2470
2471 <br>
2472
2473 <div class="memberList">
2474 <div class="memberItem">
2475 <div class="memberName">Socket</div>
2476 <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] } }"></io-socket-ref></div>
2477 </div>
2478 <div class="memberItem">
2479 <div class="memberName">Address</div>
2480 <div class="memberValue">{{ httpServer['address'] }}</div>
2481 </div>
2482 <div class="memberItem">
2483 <div class="memberName">Port</div>
2484 <div class="memberValue">{{ httpServer['port'] }}</div>
2485 </div>
2486 <div class="memberItem">
2487 <div class="memberName">Active connections</div>
2488 <ul class="list-group">
2489 <template repeat="{{ connection in httpServer['active'] }}">
2490 <li class="list-group-item">
2491 <io-http-server-connection-ref ref="{{ connection }}"></io-http- server-connection-ref>
2492 </li>
2493 </template>
2494 </ul>
2495 </div>
2496 <div class="memberItem">
2497 <div class="memberName">Idle connections</div>
2498 <ul class="list-group">
2499 <template repeat="{{ connection in httpServer['idle'] }}">
2500 <li class="list-group-item">
2501 <io-http-server-connection-ref ref="{{ connection }}"></io-http- server-connection-ref>
2502 </li>
2503 </template>
2504 </ul>
2505 </div>
2506 </div>
2507 </div>
2508 <br>
2509 <hr>
2510 </template>
2511 </polymer-element>
2512
2513 <polymer-element name="io-http-server-connection-ref" extends="service-ref">
2514 <template>
2515 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2516 <a _href="{{ url }}">{{ name }}</a>
2517 </template>
2518 </polymer-element>
2519
2520 <polymer-element name="io-http-server-connection-view" extends="observatory-elem ent">
2521 <template>
2522 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2523
2524 <nav-bar>
2525 <top-nav-menu last="{{ true }}"></top-nav-menu>
2526 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2527 </nav-bar>
2528
2529 <div class="content">
2530 <h1>HttpConnection</h1>
2531
2532 <br>
2533
2534 <div class="memberList">
2535 <div class="memberItem">
2536 <div class="memberName">Socket</div>
2537 <div class="memberValue"><io-socket-ref ref="{{ connection['socket'] } }"></io-socket-ref></div>
2538 </div>
2539 <div class="memberItem">
2540 <div class="memberName">State</div>
2541 <div class="memberValue">{{ connection['state'] }}</div>
2542 </div>
2543 <div class="memberItem">
2544 <div class="memberName">Server</div>
2545 <div class="memberValue"><io-http-server-ref ref="{{ connection['serve r'] }}"></io-http-server-ref></div>
2546 </div>
2547 </div>
2548 </div>
2549 <br>
2550 <hr>
2551 </template>
2552 </polymer-element>
2553
2554 <polymer-element name="io-socket-ref" extends="service-ref">
2555 <template>
2556 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2557 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2558 </template>
2559 </polymer-element>
2560
2561 <polymer-element name="io-socket-list-view" extends="observatory-element">
2562 <template>
2563 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2564
2565 <nav-bar>
2566 <top-nav-menu last="{{ true }}"></top-nav-menu>
2567 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2568 </nav-bar>
2569
2570 <div class="content">
2571 <h1>Sockets</h1>
2572
2573 <br>
2574
2575 <ul class="list-group">
2576 <template repeat="{{ socket in list['members'] }}">
2577 <li class="list-group-item">
2578 <io-socket-ref ref="{{ socket }}"></io-socket-ref>
2579 </li>
2580 </template>
2581 </ul>
2582 </div>
2583 <br>
2584 <hr>
2585 </template>
2586 </polymer-element>
2587
2588 <polymer-element name="io-socket-view" extends="observatory-element">
2589 <template>
2590 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2591
2592 <nav-bar>
2593 <top-nav-menu last="{{ true }}"></top-nav-menu>
2594 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2595 </nav-bar>
2596
2597 <div class="content">
2598 <!-- Pipe Socket -->
2599 <template if="{{ socket.isPipe }}">
2600 <h1>Pipe Socket</h1>
2601 <div class="memberList">
2602 <template if="{{ socket.socketOwner != null }}">
2603 <div class="memberItem">
2604 <div class="memberName">Owner</div>
2605 <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></ io-ref></div>
2606 </div>
2607 </template>
2608 <div class="memberItem">
2609 <div class="memberName">File descriptor</div>
2610 <div class="memberValue">{{ socket.fd }}</div>
2611 </div>
2612 <div class="memberItem">
2613 <div class="memberName">Read Closed</div>
2614 <div class="memberValue">{{ socket.readClosed }}</div>
2615 </div>
2616 <div class="memberItem">
2617 <div class="memberName">Write Closed</div>
2618 <div class="memberValue">{{ socket.writeClosed }}</div>
2619 </div>
2620 <div class="memberItem">
2621 <div class="memberName">Closing</div>
2622 <div class="memberValue">{{ socket.closing }}</div>
2623 </div>
2624 </div>
2625 </template>
2626 <!-- Network Socket -->
2627 <template if="{{ !socket.isPipe }}">
2628 <h1>Network Socket</h1>
2629 <div class="memberList">
2630 <template if="{{ socket.socketOwner != null }}">
2631 <div class="memberItem">
2632 <div class="memberName">Owner</div>
2633 <div class="memberValue"><io-ref ref="{{ socket.socketOwner }}"></ io-ref></div>
2634 </div>
2635 </template>
2636 <div class="memberItem">
2637 <div class="memberName">Local Address</div>
2638 <div class="memberValue">{{ socket.localAddress }}</div>
2639 </div>
2640 <div class="memberItem">
2641 <div class="memberName">Local Port</div>
2642 <div class="memberValue">{{ socket.localPort }}</div>
2643 </div>
2644 <div class="memberItem">
2645 <div class="memberName">Remote Address</div>
2646 <div class="memberValue">{{ socket.remoteAddress }}</div>
2647 </div>
2648 <div class="memberItem">
2649 <div class="memberName">Remote Port</div>
2650 <div class="memberValue">{{ socket.remotePort }}</div>
2651 </div>
2652 <div class="memberItem">
2653 <div class="memberName">File descriptor</div>
2654 <div class="memberValue">{{ socket.fd }}</div>
2655 </div>
2656 <div class="memberItem">
2657 <div class="memberName">Read Closed</div>
2658 <div class="memberValue">{{ socket.readClosed }}</div>
2659 </div>
2660 <div class="memberItem">
2661 <div class="memberName">Write Closed</div>
2662 <div class="memberValue">{{ socket.writeClosed }}</div>
2663 </div>
2664 <div class="memberItem">
2665 <div class="memberName">Closing</div>
2666 <div class="memberValue">{{ socket.closing }}</div>
2667 </div>
2668 <div class="memberItem">
2669 <div class="memberName">Listening</div>
2670 <div class="memberValue">{{ socket.listening }}</div>
2671 </div>
2672 <div class="memberItem">
2673 <div class="memberName">Protocol</div>
2674 <div class="memberValue">{{ socket.protocol }}</div>
2675 </div>
2676 </div>
2677 </template>
2678 </div>
2679 <br>
2680 <hr>
2681 </template>
2682 </polymer-element>
2683
2684 <polymer-element name="io-web-socket-ref" extends="service-ref">
2685 <template>
2686 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2687 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2688 </template>
2689 </polymer-element>
2690
2691 <polymer-element name="io-web-socket-list-view" extends="observatory-element">
2692 <template>
2693 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2694
2695 <nav-bar>
2696 <top-nav-menu last="{{ true }}"></top-nav-menu>
2697 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2698 </nav-bar>
2699
2700 <div class="content">
2701 <h1>WebSockets</h1>
2702
2703 <br>
2704
2705 <ul class="list-group">
2706 <template repeat="{{ webSocket in list['members'] }}">
2707 <li class="list-group-item">
2708 <io-web-socket-ref ref="{{ webSocket }}"></io-web-socket-ref>
2709 </li>
2710 </template>
2711 </ul>
2712 </div>
2713 <br>
2714 <hr>
2715 </template>
2716 </polymer-element>
2717
2718 <polymer-element name="io-web-socket-view" extends="observatory-element">
2719 <template>
2720 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2721
2722 <nav-bar>
2723 <top-nav-menu last="{{ true }}"></top-nav-menu>
2724 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2725 </nav-bar>
2726
2727 <div class="content">
2728 <h1>WebSocket</h1>
2729
2730 <br>
2731
2732 <div class="memberList">
2733 <div class="memberItem">
2734 <div class="memberName">Socket</div>
2735 <div class="memberValue"><io-socket-ref ref="{{ webSocket['socket'] }} "></io-socket-ref></div>
2736 </div>
2737 </div>
2738 </div>
2739 <br>
2740 <hr>
2741 </template>
2742 </polymer-element>
2743
2744 <polymer-element name="io-random-access-file-ref" extends="service-ref">
2745 <template>
2746 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2747 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2748 </template>
2749 </polymer-element>
2750
2751 <polymer-element name="io-random-access-file-list-view" extends="observatory-ele ment">
2752 <template>
2753 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2754
2755 <nav-bar>
2756 <top-nav-menu last="{{ true }}"></top-nav-menu>
2757 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2758 </nav-bar>
2759
2760 <div class="content">
2761 <h1>Random Access Files</h1>
2762
2763 <br>
2764
2765 <ul class="list-group">
2766 <template repeat="{{ file in list['members'] }}">
2767 <li class="list-group-item">
2768 <io-random-access-file-ref ref="{{ file }}"></io-random-access-file- ref>
2769 </li>
2770 </template>
2771 </ul>
2772 </div>
2773 <br>
2774 <hr>
2775 </template>
2776 </polymer-element>
2777
2778 <polymer-element name="io-random-access-file-view" extends="observatory-element" >
2779 <template>
2780 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2781
2782 <nav-bar>
2783 <top-nav-menu last="{{ true }}"></top-nav-menu>
2784 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2785 </nav-bar>
2786
2787 <div class="content">
2788 <h1>Random Access File</h1>
2789
2790 <br>
2791
2792 <div class="memberList">
2793 <div class="memberItem">
2794 <div class="memberName">Path</div>
2795 <div class="memberValue">{{ file['name'] }}</div>
2796 </div>
2797 <div class="memberItem">
2798 <div class="memberName">Pending Operation</div>
2799 <div class="memberValue">{{ file['asyncDispatched'] }}</div>
2800 </div>
2801 <div class="memberItem">
2802 <div class="memberName">File Descriptor</div>
2803 <div class="memberValue">{{ file['fd'] }}</div>
2804 </div>
2805 </div>
2806 </div>
2807 <br>
2808 <hr>
2809 </template>
2810 </polymer-element>
2811
2812 <polymer-element name="io-process-list-view" extends="observatory-element">
2813 <template>
2814 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2815
2816 <nav-bar>
2817 <top-nav-menu last="{{ true }}"></top-nav-menu>
2818 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2819 </nav-bar>
2820
2821 <div class="content">
2822 <h1>Processes</h1>
2823
2824 <br>
2825
2826 <ul class="list-group">
2827 <template repeat="{{ process in list['members'] }}">
2828 <li class="list-group-item">
2829 <io-process-ref ref="{{ process }}"></io-process-ref>
2830 </li>
2831 </template>
2832 </ul>
2833 </div>
2834 <br>
2835 <hr>
2836 </template>
2837 </polymer-element>
2838
2839 <polymer-element name="io-process-ref" extends="service-ref">
2840 <template>
2841 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2842 <template if="{{ small }}">
2843 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
2844 </template>
2845 <template if="{{ !small }}">
2846 <a on-click="{{ goto }}" _href="{{ url }}">({{ ref['pid'] }}) {{ name }} { { ref['arguments'] }}</a>
2847 </template>
2848 </template>
2849 </polymer-element>
2850
2851 <polymer-element name="io-process-view" extends="observatory-element">
2852 <template>
2853 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2854
2855 <nav-bar>
2856 <top-nav-menu last="{{ true }}"></top-nav-menu>
2857 <nav-refresh callback="{{ refresh }}"></nav-refresh>
2858 </nav-bar>
2859
2860 <div class="content">
2861 <h1>Process</h1>
2862
2863 <br>
2864
2865 <div class="memberList">
2866 <div class="memberItem">
2867 <div class="memberName">Path</div>
2868 <div class="memberValue">{{ process['name'] }}</div>
2869 </div>
2870 <div class="memberItem">
2871 <div class="memberName">Pid</div>
2872 <div class="memberValue">{{ process['pid'] }}</div>
2873 </div>
2874 <div class="memberItem">
2875 <div class="memberName">Arguments</div>
2876 <div class="memberValue">{{ process['arguments'] }}</div>
2877 </div>
2878 <div class="memberItem">
2879 <div class="memberName">Started</div>
2880 <div class="memberValue">{{ process['started'] }}</div>
2881 </div>
2882 <div class="memberItem">
2883 <div class="memberName">Working Directory</div>
2884 <div class="memberValue">{{ process['workingDirectory'] }}</div>
2885 </div>
2886 <template if="{{ process['stdin'] != null }}">
2887 <div class="memberItem">
2888 <div class="memberName">stdin</div>
2889 <div class="memberValue">
2890 <io-socket-ref ref="{{ process['stdin'] }}"></io-socket-ref>
2891 </div>
2892 </div>
2893 </template>
2894 <template if="{{ process['stdout'] != null }}">
2895 <div class="memberItem">
2896 <div class="memberName">stdout</div>
2897 <div class="memberValue">
2898 <io-socket-ref ref="{{ process['stdout'] }}"></io-socket-ref>
2899 </div>
2900 </div>
2901 </template>
2902 <template if="{{ process['stderr'] != null }}">
2903 <div class="memberItem">
2904 <div class="memberName">stderr</div>
2905 <div class="memberValue">
2906 <io-socket-ref ref="{{ process['stderr'] }}"></io-socket-ref>
2907 </div>
2908 </div>
2909 </template>
2910 </div>
2911
2912 <br>
2913
2914 <h2>Environment</h2>
2915 <div class="well">
2916 <div class="monospace break-wrap">
2917 <template repeat="{{ variable in process['environment'] }}">
2918 {{ variable }}
2919 <br>
2920 </template>
2921 </div>
2922 </div>
2923 </div>
2924 <br>
2925 <hr>
2926 </template>
2927 </polymer-element>
2928
2929
2930
2931
2932
2933 <polymer-element name="isolate-ref" extends="service-ref">
2934 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/sha red.css">
2935 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
2936 </template>
2937 </polymer-element>
2938
2939
2940
2941
2942
2943
2944
2945
2946
2947
2948 <polymer-element name="isolate-summary" extends="observatory-element">
2949 <template>
2950 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
2951 <div class="flex-row">
2952 <div class="flex-item-10-percent">
2953 <img src="packages/observatory/src/elements/img/isolate_icon.png">
2954 </div>
2955 <div class="flex-item-10-percent">
2956 <isolate-ref ref="{{ isolate }}"></isolate-ref>
2957 </div>
2958 <div class="flex-item-30-percent">
2959 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
2960 </div>
2961 <div class="flex-item-40-percent">
2962 <isolate-location isolate="{{ isolate }}"></isolate-location>
2963 </div>
2964 <div class="flex-item-10-percent">
2965 </div>
2966 </div>
2967
2968 <div class="flex-row">
2969 <div class="flex-item-20-percent"></div>
2970 <div class="flex-item-60-percent">
2971 <hr>
2972 </div>
2973 <div class="flex-item-20-percent"></div>
2974 </div>
2975
2976 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
2977
2978 </template>
2979 </polymer-element>
2980
2981 <polymer-element name="isolate-run-state" extends="observatory-element">
2982 <template>
2983 <template if="{{ isolate.pauseEvent != null }}">
2984 <strong>paused</strong>
2985 <action-link callback="{{ resume }}" label="resume"></action-link>
2986
2987 <action-link callback="{{ stepInto }}" label="step"></action-link>
2988 <action-link callback="{{ stepOver }}" label="step&nbsp;over"></action-lin k>
2989 <action-link callback="{{ stepOut }}" label="step&nbsp;out"></action-link>
2990 </template>
2991
2992 <template if="{{ isolate.running }}">
2993 <strong>running</strong>
2994 <action-link callback="{{ pause }}" label="pause"></action-link>
2995 </template>
2996
2997 <template if="{{ isolate.idle }}">
2998 <strong>idle</strong>
2999 <action-link callback="{{ pause }}" label="pause"></action-link>
3000 </template>
3001
3002 <template if="{{ isolate.loading }}">
3003 <strong>loading...</strong>
3004 </template>
3005 </template>
3006 </polymer-element>
3007
3008 <polymer-element name="isolate-location" extends="observatory-element">
3009 <template>
3010 <template if="{{ isolate.pauseEvent != null }}">
3011 <template if="{{ isolate.pauseEvent.eventType == 'IsolateCreated' }}">
3012 at isolate start
3013 </template>
3014
3015 <template if="{{ isolate.pauseEvent.eventType == 'IsolateShutdown' }}">
3016 at isolate exit
3017 </template>
3018
3019 <template if="{{ isolate.pauseEvent.eventType == 'IsolateInterrupted' ||
3020 isolate.pauseEvent.eventType == 'BreakpointReached' ||
3021 isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
3022 <template if="{{ isolate.pauseEvent.breakpoint != null }}">
3023 by breakpoint
3024 </template>
3025 <template if="{{ isolate.pauseEvent.eventType == 'ExceptionThrown' }}">
3026 by exception
3027 </template>
3028 at
3029 <function-ref ref="{{ isolate.topFrame['function'] }}">
3030 </function-ref>
3031 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topF rame['tokenPos'] }}"></script-ref>)
3032 </template>
3033 </template>
3034
3035 <template if="{{ isolate.running }}">
3036 at
3037 <function-ref ref="{{ isolate.topFrame['function'] }}">
3038 </function-ref>
3039 (<script-ref ref="{{ isolate.topFrame['script'] }}" pos="{{ isolate.topFra me['tokenPos'] }}"></script-ref>)
3040 </template>
3041
3042 </template>
3043 </polymer-element>
3044
3045 <polymer-element name="isolate-shared-summary" extends="observatory-element">
3178 <template> 3046 <template>
3179 <style> 3047 <style>
3180 .idle { 3048 .errorBox {
3181 color: #0489c3;
3182 cursor: pointer;
3183 }
3184 .busy {
3185 color: #aaa;
3186 cursor: wait;
3187 }
3188 </style>
3189
3190 <template if="{{ busy }}">
3191 <span class="busy">{{ label }}</span>
3192 </template>
3193 <template if="{{ !busy }}">
3194 <span class="idle"><a on-click="{{ evalNow }}">{{ label }}</a></span>
3195 </template>
3196 <template if="{{ result != null }}">
3197 = <any-service-ref ref="{{ result }}"></any-service-ref>
3198 </template>
3199 </template>
3200 </polymer-element>
3201
3202
3203
3204
3205
3206
3207
3208
3209 <polymer-element name="field-ref" extends="service-ref">
3210 <template>
3211 <style>/* Global styles */
3212 * {
3213 margin: 0;
3214 padding: 0;
3215 font: 400 14px 'Montserrat', sans-serif;
3216 color: #333;
3217 box-sizing: border-box;
3218 }
3219
3220 .content {
3221 padding-left: 10%;
3222 font: 400 14px 'Montserrat', sans-serif;
3223 }
3224
3225 .content-centered {
3226 padding-left: 10%;
3227 padding-right: 10%;
3228 font: 400 14px 'Montserrat', sans-serif;
3229 }
3230
3231 .content-centered-big {
3232 padding-left: 5%;
3233 padding-right: 5%;
3234 font: 400 14px 'Montserrat', sans-serif;
3235 }
3236
3237 h1 {
3238 font: 400 18px 'Montserrat', sans-serif;
3239 }
3240
3241 .memberList {
3242 display: table;
3243 }
3244
3245 .memberItem {
3246 display: table-row;
3247 }
3248
3249 .memberName, .memberValue {
3250 display: table-cell;
3251 vertical-align: top;
3252 padding: 3px 0 3px 1em;
3253 font: 400 14px 'Montserrat', sans-serif;
3254 }
3255
3256 .memberSmall {
3257 display: table-cell;
3258 vertical-align: top;
3259 padding: 3px 0 3px 1em;
3260 font: 400 12px 'Montserrat', sans-serif;
3261 }
3262
3263 .monospace {
3264 font-family: consolas, courier, monospace;
3265 font-size: 1em;
3266 line-height: 1.2em;
3267 white-space: nowrap;
3268 }
3269
3270 a {
3271 color: #0489c3;
3272 text-decoration: none;
3273 }
3274
3275 a:hover {
3276 text-decoration: underline;
3277 }
3278
3279 em {
3280 color: inherit;
3281 font-style: italic;
3282 }
3283
3284 b {
3285 color: inherit;
3286 font-weight: bold;
3287 }
3288
3289 hr {
3290 margin-top: 20px;
3291 margin-bottom: 20px;
3292 border: 0;
3293 border-top: 1px solid #eee;
3294 height: 0;
3295 box-sizing: content-box;
3296 }
3297
3298 .list-group {
3299 padding-left: 0;
3300 margin-bottom: 20px;
3301 }
3302
3303 .list-group-item {
3304 position: relative;
3305 display: block;
3306 padding: 10px 15px;
3307 margin-bottom: -1px;
3308 background-color: #fff;
3309 }
3310
3311 .list-group-item:first-child {
3312 /* rounded top corners */
3313 border-top-right-radius:4px;
3314 border-top-left-radius:4px;
3315 }
3316
3317 .list-group-item:last-child {
3318 margin-bottom: 0;
3319 /* rounded bottom corners */
3320 border-bottom-right-radius: 4px;
3321 border-bottom-left-radius:4px;
3322 }
3323
3324 /* Flex row container */
3325 .flex-row {
3326 display: flex;
3327 flex-direction: row;
3328 }
3329
3330 /* Flex column container */
3331 .flex-column {
3332 display: flex;
3333 flex-direction: column;
3334 }
3335
3336 .flex-item-fit {
3337 flex-grow: 1;
3338 flex-shrink: 1;
3339 flex-basis: auto;
3340 }
3341
3342 .flex-item-no-shrink {
3343 flex-grow: 0;
3344 flex-shrink: 0;
3345 flex-basis: auto;
3346 }
3347
3348 .flex-item-fill {
3349 flex-grow: 0;
3350 flex-shrink: 1; /* shrink when pressured */
3351 flex-basis: 100%; /* try and take 100% */
3352 }
3353
3354 .flex-item-fixed-1-12 {
3355 flex-grow: 0;
3356 flex-shrink: 0;
3357 flex-basis: 8.3%;
3358 }
3359
3360 .flex-item-fixed-2-12 {
3361 flex-grow: 0;
3362 flex-shrink: 0;
3363 flex-basis: 16.6%;
3364 }
3365
3366 .flex-item-fixed-4-12 {
3367 flex-grow: 0;
3368 flex-shrink: 0;
3369 flex-basis: 33.3333%;
3370 }
3371
3372 .flex-item-fixed-6-12, .flex-item-50-percent {
3373 flex-grow: 0;
3374 flex-shrink: 0;
3375 flex-basis: 50%;
3376 }
3377
3378 .flex-item-fixed-8-12 {
3379 flex-grow: 0;
3380 flex-shrink: 0;
3381 flex-basis: 66.6666%;
3382 }
3383
3384 .flex-item-fixed-9-12 {
3385 flex-grow: 0;
3386 flex-shrink: 0;
3387 flex-basis: 75%;
3388 }
3389
3390
3391 .flex-item-fixed-12-12 {
3392 flex-grow: 0;
3393 flex-shrink: 0;
3394 flex-basis: 100%;
3395 }
3396
3397 .flex-item-10-percent {
3398 flex-grow: 0;
3399 flex-shrink: 0;
3400 flex-basis: 10%;
3401 }
3402
3403 .flex-item-15-percent {
3404 flex-grow: 0;
3405 flex-shrink: 0;
3406 flex-basis: 15%;
3407 }
3408
3409 .flex-item-20-percent {
3410 flex-grow: 0;
3411 flex-shrink: 0;
3412 flex-basis: 20%;
3413 }
3414
3415 .flex-item-30-percent {
3416 flex-grow: 0;
3417 flex-shrink: 0;
3418 flex-basis: 30%;
3419 }
3420
3421 .flex-item-40-percent {
3422 flex-grow: 0;
3423 flex-shrink: 0;
3424 flex-basis: 40%;
3425 }
3426
3427 .flex-item-50-percent {
3428 flex-grow: 0;
3429 flex-shrink: 0;
3430 flex-basis: 50%;
3431 }
3432
3433 .flex-item-60-percent {
3434 flex-grow: 0;
3435 flex-shrink: 0;
3436 flex-basis: 60%;
3437 }
3438
3439 .flex-item-70-percent {
3440 flex-grow: 0;
3441 flex-shrink: 0;
3442 flex-basis: 70%;
3443 }
3444
3445 .flex-item-80-percent {
3446 flex-grow: 0;
3447 flex-shrink: 0;
3448 flex-basis: 80%;
3449 }
3450
3451 .well {
3452 min-height: 20px;
3453 padding: 19px;
3454 margin-bottom: 20px;
3455 background-color: #f5f5f5;
3456 border: 1px solid #e3e3e3;
3457 border-radius: 4px;
3458 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
3459 }
3460
3461 .break-wrap {
3462 word-wrap: break-word;
3463 }
3464 </style>
3465 <span>
3466 <template if="{{ ref.isStatic] }}">static</template>
3467 <template if="{{ ref.isFinal }}">final</template>
3468 <template if="{{ ref.isConst }}">const</template>
3469 <template if="{{ (ref.declaredType.name == 'dynamic' &amp;&amp;
3470 !ref.isFinal &amp;&amp; !ref.isConst) }}">
3471 var
3472 </template>
3473 <template if="{{ (ref.declaredType.name != 'dynamic') }}">
3474 <instance-ref ref="{{ ref.declaredType }}"></instance-ref>
3475 </template>
3476 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}</a>
3477 </span>
3478 </template>
3479 </polymer-element>
3480
3481
3482
3483
3484
3485
3486
3487 <polymer-element name="function-ref" extends="service-ref">
3488 <template><style>/* Global styles */
3489 * {
3490 margin: 0;
3491 padding: 0;
3492 font: 400 14px 'Montserrat', sans-serif;
3493 color: #333;
3494 box-sizing: border-box;
3495 }
3496
3497 .content {
3498 padding-left: 10%;
3499 font: 400 14px 'Montserrat', sans-serif;
3500 }
3501
3502 .content-centered {
3503 padding-left: 10%;
3504 padding-right: 10%;
3505 font: 400 14px 'Montserrat', sans-serif;
3506 }
3507
3508 .content-centered-big {
3509 padding-left: 5%;
3510 padding-right: 5%;
3511 font: 400 14px 'Montserrat', sans-serif;
3512 }
3513
3514 h1 {
3515 font: 400 18px 'Montserrat', sans-serif;
3516 }
3517
3518 .memberList {
3519 display: table;
3520 }
3521
3522 .memberItem {
3523 display: table-row;
3524 }
3525
3526 .memberName, .memberValue {
3527 display: table-cell;
3528 vertical-align: top;
3529 padding: 3px 0 3px 1em;
3530 font: 400 14px 'Montserrat', sans-serif;
3531 }
3532
3533 .memberSmall {
3534 display: table-cell;
3535 vertical-align: top;
3536 padding: 3px 0 3px 1em;
3537 font: 400 12px 'Montserrat', sans-serif;
3538 }
3539
3540 .monospace {
3541 font-family: consolas, courier, monospace;
3542 font-size: 1em;
3543 line-height: 1.2em;
3544 white-space: nowrap;
3545 }
3546
3547 a {
3548 color: #0489c3;
3549 text-decoration: none;
3550 }
3551
3552 a:hover {
3553 text-decoration: underline;
3554 }
3555
3556 em {
3557 color: inherit;
3558 font-style: italic;
3559 }
3560
3561 b {
3562 color: inherit;
3563 font-weight: bold;
3564 }
3565
3566 hr {
3567 margin-top: 20px;
3568 margin-bottom: 20px;
3569 border: 0;
3570 border-top: 1px solid #eee;
3571 height: 0;
3572 box-sizing: content-box;
3573 }
3574
3575 .list-group {
3576 padding-left: 0;
3577 margin-bottom: 20px;
3578 }
3579
3580 .list-group-item {
3581 position: relative;
3582 display: block;
3583 padding: 10px 15px;
3584 margin-bottom: -1px;
3585 background-color: #fff;
3586 }
3587
3588 .list-group-item:first-child {
3589 /* rounded top corners */
3590 border-top-right-radius:4px;
3591 border-top-left-radius:4px;
3592 }
3593
3594 .list-group-item:last-child {
3595 margin-bottom: 0;
3596 /* rounded bottom corners */
3597 border-bottom-right-radius: 4px;
3598 border-bottom-left-radius:4px;
3599 }
3600
3601 /* Flex row container */
3602 .flex-row {
3603 display: flex;
3604 flex-direction: row;
3605 }
3606
3607 /* Flex column container */
3608 .flex-column {
3609 display: flex;
3610 flex-direction: column;
3611 }
3612
3613 .flex-item-fit {
3614 flex-grow: 1;
3615 flex-shrink: 1;
3616 flex-basis: auto;
3617 }
3618
3619 .flex-item-no-shrink {
3620 flex-grow: 0;
3621 flex-shrink: 0;
3622 flex-basis: auto;
3623 }
3624
3625 .flex-item-fill {
3626 flex-grow: 0;
3627 flex-shrink: 1; /* shrink when pressured */
3628 flex-basis: 100%; /* try and take 100% */
3629 }
3630
3631 .flex-item-fixed-1-12 {
3632 flex-grow: 0;
3633 flex-shrink: 0;
3634 flex-basis: 8.3%;
3635 }
3636
3637 .flex-item-fixed-2-12 {
3638 flex-grow: 0;
3639 flex-shrink: 0;
3640 flex-basis: 16.6%;
3641 }
3642
3643 .flex-item-fixed-4-12 {
3644 flex-grow: 0;
3645 flex-shrink: 0;
3646 flex-basis: 33.3333%;
3647 }
3648
3649 .flex-item-fixed-6-12, .flex-item-50-percent {
3650 flex-grow: 0;
3651 flex-shrink: 0;
3652 flex-basis: 50%;
3653 }
3654
3655 .flex-item-fixed-8-12 {
3656 flex-grow: 0;
3657 flex-shrink: 0;
3658 flex-basis: 66.6666%;
3659 }
3660
3661 .flex-item-fixed-9-12 {
3662 flex-grow: 0;
3663 flex-shrink: 0;
3664 flex-basis: 75%;
3665 }
3666
3667
3668 .flex-item-fixed-12-12 {
3669 flex-grow: 0;
3670 flex-shrink: 0;
3671 flex-basis: 100%;
3672 }
3673
3674 .flex-item-10-percent {
3675 flex-grow: 0;
3676 flex-shrink: 0;
3677 flex-basis: 10%;
3678 }
3679
3680 .flex-item-15-percent {
3681 flex-grow: 0;
3682 flex-shrink: 0;
3683 flex-basis: 15%;
3684 }
3685
3686 .flex-item-20-percent {
3687 flex-grow: 0;
3688 flex-shrink: 0;
3689 flex-basis: 20%;
3690 }
3691
3692 .flex-item-30-percent {
3693 flex-grow: 0;
3694 flex-shrink: 0;
3695 flex-basis: 30%;
3696 }
3697
3698 .flex-item-40-percent {
3699 flex-grow: 0;
3700 flex-shrink: 0;
3701 flex-basis: 40%;
3702 }
3703
3704 .flex-item-50-percent {
3705 flex-grow: 0;
3706 flex-shrink: 0;
3707 flex-basis: 50%;
3708 }
3709
3710 .flex-item-60-percent {
3711 flex-grow: 0;
3712 flex-shrink: 0;
3713 flex-basis: 60%;
3714 }
3715
3716 .flex-item-70-percent {
3717 flex-grow: 0;
3718 flex-shrink: 0;
3719 flex-basis: 70%;
3720 }
3721
3722 .flex-item-80-percent {
3723 flex-grow: 0;
3724 flex-shrink: 0;
3725 flex-basis: 80%;
3726 }
3727
3728 .well {
3729 min-height: 20px;
3730 padding: 19px;
3731 margin-bottom: 20px;
3732 background-color: #f5f5f5;
3733 border: 1px solid #e3e3e3;
3734 border-radius: 4px;
3735 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
3736 }
3737
3738 .break-wrap {
3739 word-wrap: break-word;
3740 }
3741 </style><!-- These comments are here to allow newlines.
3742 --><template if="{{ ref.isDart }}"><!--
3743 --><template if="{{ qualified &amp;&amp; ref.parent == null &amp;&amp; re f.owningClass != null }}"><!--
3744 --><class-ref ref="{{ ref.owningClass] }}"></class-ref>.</template><!--
3745 --><template if="{{ qualified &amp;&amp; ref.parent != null }}"><!--
3746 --><function-ref ref="{{ ref.parent }}" qualified="{{ true }}">
3747 </function-ref>.<!--
3748 --></template><a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a><!--
3749 --></template><template if="{{ !ref.isDart }}"><span> {{ name }}</span></templ ate></template>
3750 </polymer-element>
3751
3752
3753
3754
3755
3756
3757 <polymer-element name="library-ref" extends="service-ref">
3758 <template><style>/* Global styles */
3759 * {
3760 margin: 0;
3761 padding: 0;
3762 font: 400 14px 'Montserrat', sans-serif;
3763 color: #333;
3764 box-sizing: border-box;
3765 }
3766
3767 .content {
3768 padding-left: 10%;
3769 font: 400 14px 'Montserrat', sans-serif;
3770 }
3771
3772 .content-centered {
3773 padding-left: 10%;
3774 padding-right: 10%;
3775 font: 400 14px 'Montserrat', sans-serif;
3776 }
3777
3778 .content-centered-big {
3779 padding-left: 5%;
3780 padding-right: 5%;
3781 font: 400 14px 'Montserrat', sans-serif;
3782 }
3783
3784 h1 {
3785 font: 400 18px 'Montserrat', sans-serif;
3786 }
3787
3788 .memberList {
3789 display: table;
3790 }
3791
3792 .memberItem {
3793 display: table-row;
3794 }
3795
3796 .memberName, .memberValue {
3797 display: table-cell;
3798 vertical-align: top;
3799 padding: 3px 0 3px 1em;
3800 font: 400 14px 'Montserrat', sans-serif;
3801 }
3802
3803 .memberSmall {
3804 display: table-cell;
3805 vertical-align: top;
3806 padding: 3px 0 3px 1em;
3807 font: 400 12px 'Montserrat', sans-serif;
3808 }
3809
3810 .monospace {
3811 font-family: consolas, courier, monospace;
3812 font-size: 1em;
3813 line-height: 1.2em;
3814 white-space: nowrap;
3815 }
3816
3817 a {
3818 color: #0489c3;
3819 text-decoration: none;
3820 }
3821
3822 a:hover {
3823 text-decoration: underline;
3824 }
3825
3826 em {
3827 color: inherit;
3828 font-style: italic;
3829 }
3830
3831 b {
3832 color: inherit;
3833 font-weight: bold;
3834 }
3835
3836 hr {
3837 margin-top: 20px;
3838 margin-bottom: 20px;
3839 border: 0;
3840 border-top: 1px solid #eee;
3841 height: 0;
3842 box-sizing: content-box;
3843 }
3844
3845 .list-group {
3846 padding-left: 0;
3847 margin-bottom: 20px;
3848 }
3849
3850 .list-group-item {
3851 position: relative;
3852 display: block;
3853 padding: 10px 15px;
3854 margin-bottom: -1px;
3855 background-color: #fff;
3856 }
3857
3858 .list-group-item:first-child {
3859 /* rounded top corners */
3860 border-top-right-radius:4px;
3861 border-top-left-radius:4px;
3862 }
3863
3864 .list-group-item:last-child {
3865 margin-bottom: 0;
3866 /* rounded bottom corners */
3867 border-bottom-right-radius: 4px;
3868 border-bottom-left-radius:4px;
3869 }
3870
3871 /* Flex row container */
3872 .flex-row {
3873 display: flex;
3874 flex-direction: row;
3875 }
3876
3877 /* Flex column container */
3878 .flex-column {
3879 display: flex;
3880 flex-direction: column;
3881 }
3882
3883 .flex-item-fit {
3884 flex-grow: 1;
3885 flex-shrink: 1;
3886 flex-basis: auto;
3887 }
3888
3889 .flex-item-no-shrink {
3890 flex-grow: 0;
3891 flex-shrink: 0;
3892 flex-basis: auto;
3893 }
3894
3895 .flex-item-fill {
3896 flex-grow: 0;
3897 flex-shrink: 1; /* shrink when pressured */
3898 flex-basis: 100%; /* try and take 100% */
3899 }
3900
3901 .flex-item-fixed-1-12 {
3902 flex-grow: 0;
3903 flex-shrink: 0;
3904 flex-basis: 8.3%;
3905 }
3906
3907 .flex-item-fixed-2-12 {
3908 flex-grow: 0;
3909 flex-shrink: 0;
3910 flex-basis: 16.6%;
3911 }
3912
3913 .flex-item-fixed-4-12 {
3914 flex-grow: 0;
3915 flex-shrink: 0;
3916 flex-basis: 33.3333%;
3917 }
3918
3919 .flex-item-fixed-6-12, .flex-item-50-percent {
3920 flex-grow: 0;
3921 flex-shrink: 0;
3922 flex-basis: 50%;
3923 }
3924
3925 .flex-item-fixed-8-12 {
3926 flex-grow: 0;
3927 flex-shrink: 0;
3928 flex-basis: 66.6666%;
3929 }
3930
3931 .flex-item-fixed-9-12 {
3932 flex-grow: 0;
3933 flex-shrink: 0;
3934 flex-basis: 75%;
3935 }
3936
3937
3938 .flex-item-fixed-12-12 {
3939 flex-grow: 0;
3940 flex-shrink: 0;
3941 flex-basis: 100%;
3942 }
3943
3944 .flex-item-10-percent {
3945 flex-grow: 0;
3946 flex-shrink: 0;
3947 flex-basis: 10%;
3948 }
3949
3950 .flex-item-15-percent {
3951 flex-grow: 0;
3952 flex-shrink: 0;
3953 flex-basis: 15%;
3954 }
3955
3956 .flex-item-20-percent {
3957 flex-grow: 0;
3958 flex-shrink: 0;
3959 flex-basis: 20%;
3960 }
3961
3962 .flex-item-30-percent {
3963 flex-grow: 0;
3964 flex-shrink: 0;
3965 flex-basis: 30%;
3966 }
3967
3968 .flex-item-40-percent {
3969 flex-grow: 0;
3970 flex-shrink: 0;
3971 flex-basis: 40%;
3972 }
3973
3974 .flex-item-50-percent {
3975 flex-grow: 0;
3976 flex-shrink: 0;
3977 flex-basis: 50%;
3978 }
3979
3980 .flex-item-60-percent {
3981 flex-grow: 0;
3982 flex-shrink: 0;
3983 flex-basis: 60%;
3984 }
3985
3986 .flex-item-70-percent {
3987 flex-grow: 0;
3988 flex-shrink: 0;
3989 flex-basis: 70%;
3990 }
3991
3992 .flex-item-80-percent {
3993 flex-grow: 0;
3994 flex-shrink: 0;
3995 flex-basis: 80%;
3996 }
3997
3998 .well {
3999 min-height: 20px;
4000 padding: 19px;
4001 margin-bottom: 20px;
4002 background-color: #f5f5f5;
4003 border: 1px solid #e3e3e3;
4004 border-radius: 4px;
4005 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
4006 }
4007
4008 .break-wrap {
4009 word-wrap: break-word;
4010 }
4011 </style>
4012 <template if="{{ nameIsEmpty }}">
4013 <a on-click="{{ goto }}" _href="{{ url }}">unnamed</a>
4014 </template>
4015 <template if="{{ !nameIsEmpty }}">
4016 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
4017 </template>
4018 </template>
4019 </polymer-element>
4020
4021
4022
4023
4024
4025
4026
4027 <polymer-element name="script-inset" extends="observatory-element">
4028 <template>
4029 <style>
4030 .sourceInset {
4031 }
4032 .sourceBox {
4033 background-color: #f5f5f5; 3049 background-color: #f5f5f5;
4034 border: 1px solid #ccc; 3050 border: 1px solid #ccc;
4035 padding: 10px; 3051 padding: 10px;
4036 overflow-y: auto; 3052 font-family: consolas, courier, monospace;
4037 } 3053 font-size: 1em;
4038 .sourceTable { 3054 line-height: 1.2em;
4039 display: table;
4040 }
4041 .sourceRow {
4042 display: table-row;
4043 }
4044 .sourceItem, .sourceItemCurrent {
4045 display: table-cell;
4046 vertical-align: top;
4047 font: 400 14px consolas, courier, monospace;
4048 line-height: 125%;
4049 white-space: pre; 3055 white-space: pre;
4050 } 3056 }
4051 .sourceItemCurrent {
4052 background-color: #6cf;
4053 }
4054 .hitsNone, .hitsNotExecuted, .hitsExecuted {
4055 min-width: 32px;
4056 text-align: right;
4057 }
4058 .hitsNotExecuted {
4059 background-color: #e66;
4060 }
4061 .hitsExecuted {
4062 background-color: #6d6;
4063 }
4064 </style> 3057 </style>
4065 <div class="sourceInset"> 3058 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4066 <content></content> 3059 <template if="{{ isolate.error != null }}">
4067 <div class="sourceBox" style="max-height:{{height}}"> 3060 <div class="content-centered">
4068 <div class="sourceTable"> 3061 <pre class="errorBox">{{ isolate.error.message }}</pre>
4069 <template if="{{ linesReady }}"> 3062 <br>
4070 <template repeat="{{ line in lines }}"> 3063 </div>
4071 <div class="sourceRow" id="{{ makeLineId(line.line) }}"> 3064 </template>
4072 <breakpoint-toggle line="{{ line }}"></breakpoint-toggle> 3065 <div class="flex-row">
4073 3066 <div class="flex-item-10-percent">
4074 <div class="sourceItem">&nbsp;</div> 3067 </div>
4075 3068 <div class="flex-item-40-percent">
4076 <template if="{{ line.hits == null || 3069 <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-count er-chart>
4077 line.hits < 0 }}"> 3070 </div>
4078 <div class="hitsNone">{{ line.line }}</div> 3071 <div class="flex-item-40-percent">
4079 </template> 3072 <div class="memberList">
4080 <template if="{{ line.hits == 0 }}"> 3073 <div class="memberItem">
4081 <div class="hitsNotExecuted">{{ line.line }}</div> 3074 <div class="memberName">new heap</div>
4082 </template> 3075 <div class="memberValue">
4083 <template if="{{ line.hits > 0 }}"> 3076 {{ isolate.newSpace.used | formatSize }}
4084 <div class="hitsExecuted">{{ line.line }}</div> 3077 of
4085 </template> 3078 {{ isolate.newSpace.capacity | formatSize }}
4086
4087 <div class="sourceItem">&nbsp;</div>
4088
4089 <template if="{{ line.line == currentLine }}">
4090 <div class="sourceItemCurrent">{{line.text}}</div>
4091 </template>
4092 <template if="{{ line.line != currentLine }}">
4093 <div class="sourceItem">{{line.text}}</div>
4094 </template>
4095 </div>
4096 </template>
4097 </template>
4098
4099 <template if="{{ !linesReady }}">
4100 <div class="sourceRow">
4101 <div class="sourceItem">loading...</div>
4102 </div> 3079 </div>
4103 </template> 3080 </div>
4104 </div> 3081 <div class="memberItem">
4105 </div> 3082 <div class="memberName">old heap</div>
4106 </div> 3083 <div class="memberValue">
4107 </template> 3084 {{ isolate.oldSpace.used | formatSize }}
4108 </polymer-element> 3085 of
4109 3086 {{ isolate.oldSpace.capacity | formatSize }}
4110 <polymer-element name="breakpoint-toggle" extends="observatory-element"> 3087 </div>
4111 <template> 3088 </div>
4112 <style> 3089 </div>
4113 .emptyBreakpoint, .possibleBreakpoint, .busyBreakpoint, .unresolvedBreakpo int, .resolvedBreakpoint { 3090 <br>
4114 display: table-cell; 3091 <div class="memberItem">
4115 vertical-align: top; 3092 <div class="memberValue">
4116 font: 400 14px consolas, courier, monospace; 3093 See <a on-click="{{ goto }}" _href="{{ gotoLink('/debugger' + isolat e.link) }}">debugger</a>
4117 min-width: 1em; 3094 </div>
4118 text-align: center; 3095 </div>
4119 cursor: pointer; 3096 <div class="memberItem">
4120 } 3097 <div class="memberValue">
4121 .possibleBreakpoint { 3098 See <a on-click="{{ goto }}" _href="{{ gotoLink('/class-tree' + isol ate.link) }}">class hierarchy</a>
4122 color: #e0e0e0; 3099 </div>
4123 } 3100 </div>
4124 .possibleBreakpoint:hover { 3101 <div class="memberItem">
4125 color: white; 3102 <div class="memberValue">
4126 background-color: #777; 3103 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('profile')) }}">cpu profile</a>
4127 } 3104 </div>
4128 .busyBreakpoint { 3105 </div>
4129 color: white; 3106 <div class="memberItem">
4130 background-color: black; 3107 <div class="memberValue">
4131 cursor: wait; 3108 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('allocationprofile')) }}">allocation profile</a>
4132 } 3109 </div>
4133 .unresolvedBreakpoint { 3110 </div>
4134 color: white; 3111 <div class="memberItem">
4135 background-color: #cac; 3112 <div class="memberValue">
4136 } 3113 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('heapmap')) }}">heap map</a>
4137 .resolvedBreakpoint { 3114 </div>
4138 color: white; 3115 </div>
4139 background-color: #e66; 3116 <div class="memberItem">
4140 } 3117 <div class="memberValue">
4141 </style> 3118 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLink ('metrics')) }}">metrics</a>
4142 3119 </div>
4143 <template if="{{ line.possibleBpt &amp;&amp; busy}}"> 3120 </div>
4144 <div class="busyBreakpoint">B</div> 3121 <!-- Temporarily disabled until UI for dart:io is acceptable.
4145 </template> 3122 <template if="{{ isolate.ioEnabled }}">
4146 3123 <div class="memberItem">
4147 <template if="{{ line.bpt == null &amp;&amp; !line.possibleBpt }}"> 3124 <div class="memberValue">
4148 <div class="emptyBreakpoint">&nbsp;</div> 3125 See <a on-click="{{ goto }}" href="{{ gotoLink(isolate.relativeLin k('io')) }}">dart:io</a>
4149 </template> 3126 </div>
4150 3127 </div>
4151 <template if="{{ line.bpt == null &amp;&amp; line.possibleBpt &amp;&amp; !bu sy}}"> 3128 </template>
4152 <div class="possibleBreakpoint"> 3129 -->
4153 <a on-click="{{ toggleBreakpoint }}">B</a> 3130 </div>
4154 </div> 3131 <div class="flex-item-10-percent">
4155 </template> 3132 </div>
4156 3133 </div>
4157 <template if="{{ line.bpt != null &amp;&amp; !line.bpt['resolved'] &amp;&amp ; !busy}}"> 3134 </template>
4158 <div class="unresolvedBreakpoint"> 3135 </polymer-element>
4159 <a on-click="{{ toggleBreakpoint }}">B</a> 3136
4160 </div> 3137 <polymer-element name="isolate-counter-chart" extends="observatory-element">
4161 </template> 3138 <template>
4162 3139 <div id="counterPieChart" style="height: 200px"></div>
4163 <template if="{{ line.bpt != null &amp;&amp; line.bpt['resolved'] &amp;&amp; !busy}}"> 3140 </template>
4164 <div class="resolvedBreakpoint"> 3141 </polymer-element>
4165 <a on-click="{{ toggleBreakpoint }}">B</a> 3142
4166 </div>
4167 </template>
4168
4169 </template>
4170 </polymer-element>
4171
4172 3143
4173 3144
4174 3145
4175 3146
4176 3147
4177 3148
4178 <polymer-element name="script-ref" extends="service-ref"> 3149
4179 <template> 3150
4180 <style>/* Global styles */ 3151
4181 * { 3152
4182 margin: 0; 3153
4183 padding: 0; 3154
4184 font: 400 14px 'Montserrat', sans-serif; 3155
4185 color: #333; 3156
4186 box-sizing: border-box; 3157 <polymer-element name="isolate-view" extends="observatory-element">
4187 }
4188
4189 .content {
4190 padding-left: 10%;
4191 font: 400 14px 'Montserrat', sans-serif;
4192 }
4193
4194 .content-centered {
4195 padding-left: 10%;
4196 padding-right: 10%;
4197 font: 400 14px 'Montserrat', sans-serif;
4198 }
4199
4200 .content-centered-big {
4201 padding-left: 5%;
4202 padding-right: 5%;
4203 font: 400 14px 'Montserrat', sans-serif;
4204 }
4205
4206 h1 {
4207 font: 400 18px 'Montserrat', sans-serif;
4208 }
4209
4210 .memberList {
4211 display: table;
4212 }
4213
4214 .memberItem {
4215 display: table-row;
4216 }
4217
4218 .memberName, .memberValue {
4219 display: table-cell;
4220 vertical-align: top;
4221 padding: 3px 0 3px 1em;
4222 font: 400 14px 'Montserrat', sans-serif;
4223 }
4224
4225 .memberSmall {
4226 display: table-cell;
4227 vertical-align: top;
4228 padding: 3px 0 3px 1em;
4229 font: 400 12px 'Montserrat', sans-serif;
4230 }
4231
4232 .monospace {
4233 font-family: consolas, courier, monospace;
4234 font-size: 1em;
4235 line-height: 1.2em;
4236 white-space: nowrap;
4237 }
4238
4239 a {
4240 color: #0489c3;
4241 text-decoration: none;
4242 }
4243
4244 a:hover {
4245 text-decoration: underline;
4246 }
4247
4248 em {
4249 color: inherit;
4250 font-style: italic;
4251 }
4252
4253 b {
4254 color: inherit;
4255 font-weight: bold;
4256 }
4257
4258 hr {
4259 margin-top: 20px;
4260 margin-bottom: 20px;
4261 border: 0;
4262 border-top: 1px solid #eee;
4263 height: 0;
4264 box-sizing: content-box;
4265 }
4266
4267 .list-group {
4268 padding-left: 0;
4269 margin-bottom: 20px;
4270 }
4271
4272 .list-group-item {
4273 position: relative;
4274 display: block;
4275 padding: 10px 15px;
4276 margin-bottom: -1px;
4277 background-color: #fff;
4278 }
4279
4280 .list-group-item:first-child {
4281 /* rounded top corners */
4282 border-top-right-radius:4px;
4283 border-top-left-radius:4px;
4284 }
4285
4286 .list-group-item:last-child {
4287 margin-bottom: 0;
4288 /* rounded bottom corners */
4289 border-bottom-right-radius: 4px;
4290 border-bottom-left-radius:4px;
4291 }
4292
4293 /* Flex row container */
4294 .flex-row {
4295 display: flex;
4296 flex-direction: row;
4297 }
4298
4299 /* Flex column container */
4300 .flex-column {
4301 display: flex;
4302 flex-direction: column;
4303 }
4304
4305 .flex-item-fit {
4306 flex-grow: 1;
4307 flex-shrink: 1;
4308 flex-basis: auto;
4309 }
4310
4311 .flex-item-no-shrink {
4312 flex-grow: 0;
4313 flex-shrink: 0;
4314 flex-basis: auto;
4315 }
4316
4317 .flex-item-fill {
4318 flex-grow: 0;
4319 flex-shrink: 1; /* shrink when pressured */
4320 flex-basis: 100%; /* try and take 100% */
4321 }
4322
4323 .flex-item-fixed-1-12 {
4324 flex-grow: 0;
4325 flex-shrink: 0;
4326 flex-basis: 8.3%;
4327 }
4328
4329 .flex-item-fixed-2-12 {
4330 flex-grow: 0;
4331 flex-shrink: 0;
4332 flex-basis: 16.6%;
4333 }
4334
4335 .flex-item-fixed-4-12 {
4336 flex-grow: 0;
4337 flex-shrink: 0;
4338 flex-basis: 33.3333%;
4339 }
4340
4341 .flex-item-fixed-6-12, .flex-item-50-percent {
4342 flex-grow: 0;
4343 flex-shrink: 0;
4344 flex-basis: 50%;
4345 }
4346
4347 .flex-item-fixed-8-12 {
4348 flex-grow: 0;
4349 flex-shrink: 0;
4350 flex-basis: 66.6666%;
4351 }
4352
4353 .flex-item-fixed-9-12 {
4354 flex-grow: 0;
4355 flex-shrink: 0;
4356 flex-basis: 75%;
4357 }
4358
4359
4360 .flex-item-fixed-12-12 {
4361 flex-grow: 0;
4362 flex-shrink: 0;
4363 flex-basis: 100%;
4364 }
4365
4366 .flex-item-10-percent {
4367 flex-grow: 0;
4368 flex-shrink: 0;
4369 flex-basis: 10%;
4370 }
4371
4372 .flex-item-15-percent {
4373 flex-grow: 0;
4374 flex-shrink: 0;
4375 flex-basis: 15%;
4376 }
4377
4378 .flex-item-20-percent {
4379 flex-grow: 0;
4380 flex-shrink: 0;
4381 flex-basis: 20%;
4382 }
4383
4384 .flex-item-30-percent {
4385 flex-grow: 0;
4386 flex-shrink: 0;
4387 flex-basis: 30%;
4388 }
4389
4390 .flex-item-40-percent {
4391 flex-grow: 0;
4392 flex-shrink: 0;
4393 flex-basis: 40%;
4394 }
4395
4396 .flex-item-50-percent {
4397 flex-grow: 0;
4398 flex-shrink: 0;
4399 flex-basis: 50%;
4400 }
4401
4402 .flex-item-60-percent {
4403 flex-grow: 0;
4404 flex-shrink: 0;
4405 flex-basis: 60%;
4406 }
4407
4408 .flex-item-70-percent {
4409 flex-grow: 0;
4410 flex-shrink: 0;
4411 flex-basis: 70%;
4412 }
4413
4414 .flex-item-80-percent {
4415 flex-grow: 0;
4416 flex-shrink: 0;
4417 flex-basis: 80%;
4418 }
4419
4420 .well {
4421 min-height: 20px;
4422 padding: 19px;
4423 margin-bottom: 20px;
4424 background-color: #f5f5f5;
4425 border: 1px solid #e3e3e3;
4426 border-radius: 4px;
4427 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
4428 }
4429
4430 .break-wrap {
4431 word-wrap: break-word;
4432 }
4433 </style>
4434 <a on-click="{{ goto }}" title="{{ hoverText }}" _href="{{ url }}">{{ name }}< /a>
4435 </template>
4436 </polymer-element>
4437
4438
4439
4440
4441 <polymer-element name="class-view" extends="observatory-element">
4442 <template> 3158 <template>
4443 <style>/* Global styles */ 3159 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4444 * { 3160 <style>
4445 margin: 0; 3161 .sourceInset {
4446 padding: 0; 3162 padding-left: 15%;
4447 font: 400 14px 'Montserrat', sans-serif; 3163 padding-right: 15%;
4448 color: #333; 3164 }
4449 box-sizing: border-box; 3165 .miniProfileChart {
4450 } 3166 width: 80%;
4451 3167 }
4452 .content { 3168 </style>
4453 padding-left: 10%; 3169
4454 font: 400 14px 'Montserrat', sans-serif;
4455 }
4456
4457 .content-centered {
4458 padding-left: 10%;
4459 padding-right: 10%;
4460 font: 400 14px 'Montserrat', sans-serif;
4461 }
4462
4463 .content-centered-big {
4464 padding-left: 5%;
4465 padding-right: 5%;
4466 font: 400 14px 'Montserrat', sans-serif;
4467 }
4468
4469 h1 {
4470 font: 400 18px 'Montserrat', sans-serif;
4471 }
4472
4473 .memberList {
4474 display: table;
4475 }
4476
4477 .memberItem {
4478 display: table-row;
4479 }
4480
4481 .memberName, .memberValue {
4482 display: table-cell;
4483 vertical-align: top;
4484 padding: 3px 0 3px 1em;
4485 font: 400 14px 'Montserrat', sans-serif;
4486 }
4487
4488 .memberSmall {
4489 display: table-cell;
4490 vertical-align: top;
4491 padding: 3px 0 3px 1em;
4492 font: 400 12px 'Montserrat', sans-serif;
4493 }
4494
4495 .monospace {
4496 font-family: consolas, courier, monospace;
4497 font-size: 1em;
4498 line-height: 1.2em;
4499 white-space: nowrap;
4500 }
4501
4502 a {
4503 color: #0489c3;
4504 text-decoration: none;
4505 }
4506
4507 a:hover {
4508 text-decoration: underline;
4509 }
4510
4511 em {
4512 color: inherit;
4513 font-style: italic;
4514 }
4515
4516 b {
4517 color: inherit;
4518 font-weight: bold;
4519 }
4520
4521 hr {
4522 margin-top: 20px;
4523 margin-bottom: 20px;
4524 border: 0;
4525 border-top: 1px solid #eee;
4526 height: 0;
4527 box-sizing: content-box;
4528 }
4529
4530 .list-group {
4531 padding-left: 0;
4532 margin-bottom: 20px;
4533 }
4534
4535 .list-group-item {
4536 position: relative;
4537 display: block;
4538 padding: 10px 15px;
4539 margin-bottom: -1px;
4540 background-color: #fff;
4541 }
4542
4543 .list-group-item:first-child {
4544 /* rounded top corners */
4545 border-top-right-radius:4px;
4546 border-top-left-radius:4px;
4547 }
4548
4549 .list-group-item:last-child {
4550 margin-bottom: 0;
4551 /* rounded bottom corners */
4552 border-bottom-right-radius: 4px;
4553 border-bottom-left-radius:4px;
4554 }
4555
4556 /* Flex row container */
4557 .flex-row {
4558 display: flex;
4559 flex-direction: row;
4560 }
4561
4562 /* Flex column container */
4563 .flex-column {
4564 display: flex;
4565 flex-direction: column;
4566 }
4567
4568 .flex-item-fit {
4569 flex-grow: 1;
4570 flex-shrink: 1;
4571 flex-basis: auto;
4572 }
4573
4574 .flex-item-no-shrink {
4575 flex-grow: 0;
4576 flex-shrink: 0;
4577 flex-basis: auto;
4578 }
4579
4580 .flex-item-fill {
4581 flex-grow: 0;
4582 flex-shrink: 1; /* shrink when pressured */
4583 flex-basis: 100%; /* try and take 100% */
4584 }
4585
4586 .flex-item-fixed-1-12 {
4587 flex-grow: 0;
4588 flex-shrink: 0;
4589 flex-basis: 8.3%;
4590 }
4591
4592 .flex-item-fixed-2-12 {
4593 flex-grow: 0;
4594 flex-shrink: 0;
4595 flex-basis: 16.6%;
4596 }
4597
4598 .flex-item-fixed-4-12 {
4599 flex-grow: 0;
4600 flex-shrink: 0;
4601 flex-basis: 33.3333%;
4602 }
4603
4604 .flex-item-fixed-6-12, .flex-item-50-percent {
4605 flex-grow: 0;
4606 flex-shrink: 0;
4607 flex-basis: 50%;
4608 }
4609
4610 .flex-item-fixed-8-12 {
4611 flex-grow: 0;
4612 flex-shrink: 0;
4613 flex-basis: 66.6666%;
4614 }
4615
4616 .flex-item-fixed-9-12 {
4617 flex-grow: 0;
4618 flex-shrink: 0;
4619 flex-basis: 75%;
4620 }
4621
4622
4623 .flex-item-fixed-12-12 {
4624 flex-grow: 0;
4625 flex-shrink: 0;
4626 flex-basis: 100%;
4627 }
4628
4629 .flex-item-10-percent {
4630 flex-grow: 0;
4631 flex-shrink: 0;
4632 flex-basis: 10%;
4633 }
4634
4635 .flex-item-15-percent {
4636 flex-grow: 0;
4637 flex-shrink: 0;
4638 flex-basis: 15%;
4639 }
4640
4641 .flex-item-20-percent {
4642 flex-grow: 0;
4643 flex-shrink: 0;
4644 flex-basis: 20%;
4645 }
4646
4647 .flex-item-30-percent {
4648 flex-grow: 0;
4649 flex-shrink: 0;
4650 flex-basis: 30%;
4651 }
4652
4653 .flex-item-40-percent {
4654 flex-grow: 0;
4655 flex-shrink: 0;
4656 flex-basis: 40%;
4657 }
4658
4659 .flex-item-50-percent {
4660 flex-grow: 0;
4661 flex-shrink: 0;
4662 flex-basis: 50%;
4663 }
4664
4665 .flex-item-60-percent {
4666 flex-grow: 0;
4667 flex-shrink: 0;
4668 flex-basis: 60%;
4669 }
4670
4671 .flex-item-70-percent {
4672 flex-grow: 0;
4673 flex-shrink: 0;
4674 flex-basis: 70%;
4675 }
4676
4677 .flex-item-80-percent {
4678 flex-grow: 0;
4679 flex-shrink: 0;
4680 flex-basis: 80%;
4681 }
4682
4683 .well {
4684 min-height: 20px;
4685 padding: 19px;
4686 margin-bottom: 20px;
4687 background-color: #f5f5f5;
4688 border: 1px solid #e3e3e3;
4689 border-radius: 4px;
4690 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
4691 }
4692
4693 .break-wrap {
4694 word-wrap: break-word;
4695 }
4696 </style>
4697 <nav-bar> 3170 <nav-bar>
4698 <top-nav-menu></top-nav-menu> 3171 <top-nav-menu></top-nav-menu>
4699 <isolate-nav-menu isolate="{{ cls.isolate }}"></isolate-nav-menu> 3172 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
4700 <library-nav-menu library="{{ cls.library }}"></library-nav-menu> 3173 </isolate-nav-menu>
4701 <class-nav-menu cls="{{ cls }}" last="{{ true }}"></class-nav-menu>
4702 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh> 3174 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
4703 <nav-refresh callback="{{ refresh }}"></nav-refresh> 3175 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4704 <nav-control></nav-control> 3176 <nav-control></nav-control>
4705 </nav-bar> 3177 </nav-bar>
4706 3178
4707 <div class="content"> 3179 <div class="content">
4708 <h1> 3180 <h1>isolate '{{ isolate.name }}'</h1>
4709 <template if="{{ cls.isAbstract }}"> 3181 </div>
4710 abstract 3182
4711 </template> 3183 <br>
4712 <template if="{{ cls.isPatch }}"> 3184 <div class="flex-row">
4713 patch 3185 <div class="flex-item-10-percent">
4714 </template> 3186 </div>
4715 class {{ cls.name }} 3187 <div class="flex-item-30-percent">
4716 </h1> 3188 <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
4717 <div class="memberList"> 3189 </div>
4718 <div class="memberItem"> 3190 <div class="flex-item-50-percent">
4719 <div class="memberName">library</div> 3191 <isolate-location isolate="{{ isolate }}"></isolate-location>
4720 <div class="memberValue"> 3192 </div>
4721 <library-ref ref="{{ cls.library }}"></library-ref> 3193 <div class="flex-item-10-percent">
3194 </div>
3195 </div>
3196 <br>
3197
3198 <template if="{{ isolate.topFrame != null }}">
3199 <br>
3200 <script-inset script="{{ isolate.topFrame['script'] }}" currentpos="{{ iso late.topFrame['tokenPos'] }}" height="200px">
3201 </script-inset>
3202 </template>
3203
3204 <div class="flex-row">
3205 <div class="flex-item-20-percent"></div>
3206 <div class="flex-item-60-percent"><hr></div>
3207 <div class="flex-item-20-percent"></div>
3208 </div>
3209
3210 <br>
3211
3212 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
3213
3214 <div class="flex-row">
3215 <div class="flex-item-20-percent"></div>
3216 <div class="flex-item-60-percent"><hr></div>
3217 <div class="flex-item-20-percent"></div>
3218 </div>
3219
3220 <div class="content-centered">
3221 <div class="flex-row">
3222 <div class="flex-item-50-percent">
3223 <div class="memberList">
3224 <div class="memberItem">
3225 <div class="memberName">root library</div>
3226 <div class="memberValue">
3227 <library-ref ref="{{ isolate.rootLib }}"></library-ref>
3228 </div>
3229 </div>
3230 <div class="memberItem">
3231 <template if="{{ isolate.entry != null }}">
3232 <div class="memberName">entry</div>
3233 <div class="memberValue">
3234 <function-ref ref="{{ isolate.entry }}"></function-ref>
3235 </div>
3236 </template>
3237 </div>
3238 <div class="memberItem">
3239 <div class="memberName">isolate id</div>
3240 <div class="memberValue">{{ isolate.mainPort }}</div>
3241 </div>
4722 </div> 3242 </div>
4723 </div> 3243 </div>
4724 <div class="memberItem"> 3244 <div class="flex-item-50-percent">
4725 <div class="memberName">script</div> 3245 <div class="memberItem">
4726 <div class="memberValue"> 3246 <div class="memberValue">
4727 <script-ref ref="{{ cls.script }}" pos="{{ cls.tokenPos }}"> 3247 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLi nk('debug/breakpoints')) }}">breakpoints</a>
4728 </script-ref> 3248 </div>
4729 </div> 3249 </div>
4730 </div> 3250 </div>
4731 3251 </div>
4732 <div class="memberItem">&nbsp;</div> 3252 </div>
4733
4734 <template if="{{ cls.superclass != null }}">
4735 <div class="memberItem">
4736 <div class="memberName">extends</div>
4737 <div class="memberValue">
4738 <class-ref ref="{{ cls.superclass }}"></class-ref>
4739 </div>
4740 </div>
4741 </template>
4742 <template if="{{ cls.subclasses.length > 0 }}">
4743 <div class="memberItem">
4744 <div class="memberName">extended by</div>
4745 <div class="memberValue">
4746 <template repeat="{{ subclass in cls.subclasses }}">
4747 <class-ref ref="{{ subclass }}"></class-ref>
4748 </template>
4749 </div>
4750 </div>
4751 </template>
4752
4753 <div class="memberItem">&nbsp;</div>
4754
4755 <template if="{{ cls.interfaces.length > 0 }}">
4756 <div class="memberItem">
4757 <div class="memberName">implements</div>
4758 <div class="memberValue">
4759 <template repeat="{{ interface in cls.interfaces }}">
4760 <class-ref ref="{{ interface }}"></class-ref>
4761 </template>
4762 </div>
4763 </div>
4764 </template>
4765 <template if="{{ cls.name != cls.vmName }}">
4766 <div class="memberItem">
4767 <div class="memberName">vm name</div>
4768 <div class="memberValue">{{ cls.vmName }}</div>
4769 </div>
4770 </template>
4771 </div>
4772 </div>
4773
4774 <template if="{{ cls.error != null }}">
4775 <error-ref ref="{{ cls.error }}"></error-ref>
4776 </template>
4777 3253
4778 <hr> 3254 <hr>
4779 3255
4780 <div class="content"> 3256 <div class="content">
4781 <template if="{{ cls.fields.isNotEmpty }}"> 3257 libraries ({{ isolate.libraries.length }})
4782 fields ({{ cls.fields.length }}) 3258 <curly-block expand="{{ isolate.libraries.length <= 8 }}">
4783 <curly-block expand="{{ cls.fields.length <= 8 }}"> 3259 <div class="memberList">
4784 <div class="memberList"> 3260 <template repeat="{{ lib in isolate.libraries }}">
4785 <template repeat="{{ field in cls.fields }}"> 3261 <div class="memberItem">
4786 <div class="memberItem"> 3262 <div class="memberName">
4787 <div class="memberName"> 3263 <library-ref ref="{{ lib }}"></library-ref>
4788 <field-ref ref="{{ field }}"></field-ref> 3264 </div>
4789 </div> 3265 </div>
4790 <div class="memberValue"> 3266 </template>
4791 <template if="{{ field.value != null }}"> 3267 </div>
4792 <any-service-ref ref="{{ field.value }}"></any-service-ref> 3268 </curly-block>
4793 </template> 3269 </div>
4794 </div> 3270
4795 </div> 3271 <hr>
4796 </template> 3272
4797 </div> 3273 <div class="content">
4798 </curly-block><br><br> 3274 <div id="tagProfileChart" class="miniProfileChart" style="height: 600px">< /div>
4799 </template>
4800
4801 <template if="{{ cls.functions.isNotEmpty }}">
4802 functions ({{ cls.functions.length }})
4803 <curly-block expand="{{ cls.functions.length <= 8 }}">
4804 <div class="memberList">
4805 <template repeat="{{ function in cls.functions }}">
4806 <div class="memberItem">
4807 <div class="memberValue">
4808 <function-ref ref="{{ function }}" qualified="{{ false }}">
4809 </function-ref>
4810 </div>
4811 </div>
4812 </template>
4813 </div>
4814 </curly-block><br><br>
4815 </template>
4816
4817 <template if="{{ !cls.hasNoAllocations }}">
4818 instances
4819 <div class="memberItem">
4820 <div class="memberName">currently allocated</div>
4821 <div class="memberValue">
4822 count {{ cls.newSpace.current.instances + cls.oldSpace.current.ins tances }}
4823 (shallow size {{ cls.newSpace.current.bytes + cls.oldSpace.current .bytes | formatSize }})
4824 </div>
4825 </div>
4826 <div class="memberItem">
4827 <div class="memberName">strongly reachable</div>
4828 <div class="memberValue">
4829 <template if="{{ instances == null }}">
4830 <eval-link callback="{{ reachable }}" label="[find]" expr="100">
4831 </eval-link>
4832 </template>
4833 <template if="{{ instances != null }}">
4834 sample
4835 <any-service-ref ref="{{ instances['sample'] }}"></any-service-r ef>
4836 <template if="{{ instances['totalCount'] > instances['sampleCoun t'] }}">
4837 <eval-link callback="{{ reachable }}" label="[more]" expr="{{ instances['sampleCount'] * 2 }}">
4838 </eval-link>
4839 </template>
4840 of total {{ instances['totalCount'] }}
4841 </template>
4842 </div>
4843 </div>
4844 <div class="memberItem">
4845 <div class="memberName">retained size</div>
4846 <div class="memberValue">
4847 <template if="{{ retainedBytes == null }}">
4848 <eval-link callback="{{ retainedSize }}" label="[calculate]">
4849 </eval-link>
4850 </template>
4851 <template if="{{ retainedBytes != null }}">
4852 {{ retainedBytes | formatSize }}
4853 </template>
4854 </div>
4855 </div>
4856 </template>
4857 </div> 3275 </div>
4858 3276
4859 <hr> 3277 <hr>
4860 3278
4861 <div class="content"> 3279 <div class="content">
4862 <eval-box callback="{{ eval }}"></eval-box> 3280 <eval-box callback="{{ eval }}"></eval-box>
4863 </div> 3281 </div>
4864
4865 <hr>
4866 <script-inset script="{{ cls.script }}" startpos="{{ cls.tokenPos }}" endpos ="{{ cls.endTokenPos }}">
4867 </script-inset>
4868
4869 <br><br><br><br> 3282 <br><br><br><br>
4870 <br><br><br><br> 3283 <br><br><br><br>
4871 </template> 3284 </template>
4872 </polymer-element> 3285 </polymer-element>
4873 3286
3287
3288
3289
3290
3291
3292
3293
3294
3295
3296
3297
3298
3299
3300
3301
3302
3303 <polymer-element name="inbound-reference" extends="service-ref">
3304 <template>
3305 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3306 <div>
3307 from <any-service-ref ref="{{ source }}"></any-service-ref>
3308 <template if="{{ slotIsArrayIndex }}">via [{{ slot }}]</template>
3309 <template if="{{ slotIsField }}">via <field-ref ref="{{ slot }}"></field-r ef></template>
3310
3311 <curly-block callback="{{ expander() }}">
3312 <div class="memberList">
3313 <div class="memberItem">
3314 <div class="memberName">
3315 <template repeat="{{ reference in inboundReferences] }}">
3316 <inbound-reference ref="{{ reference }}"></inbound-reference>
3317 </template>
3318 </div>
3319 </div>
3320 </div>
3321 </curly-block>
3322 </div>
3323 </template>
3324 </polymer-element>
3325
3326
3327
3328
3329
3330
3331
3332
3333
3334
3335
3336
3337
3338
3339
3340
3341
3342 <polymer-element name="object-common" extends="observatory-element">
3343 <template>
3344 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3345 <div class="memberList">
3346
3347 <div class="memberItem">
3348 <div class="memberName">class</div>
3349 <div class="memberValue">
3350 <class-ref ref="{{ object.clazz }}"></class-ref>
3351 </div>
3352 </div>
3353
3354 <template if="{{ object.size != null }}">
3355 <div class="memberItem" title="Space for this object in memory">
3356 <div class="memberName">size</div>
3357 <div class="memberValue">{{ object.size | formatSize }}</div>
3358 </div>
3359 </template>
3360
3361 <template if="{{ object.size == null }}">
3362 <div class="memberItem" title="Space for this object in memory">
3363 <div class="memberName">size</div>
3364 <div class="memberValue">0</div>
3365 </div>
3366 </template>
3367
3368 <div class="memberItem" title="Space that would be reclaimed if references to this object were replaced with null">
3369 <div class="memberName">retained size</div>
3370 <div class="memberValue">
3371 <template if="{{ retainedBytes == null }}">
3372 <eval-link callback="{{ retainedSize }}" label="[calculate]">
3373 </eval-link>
3374 </template>
3375 <template if="{{ retainedBytes != null }}">
3376 {{ retainedBytes | formatSize }}
3377 </template>
3378 </div>
3379 </div>
3380
3381 <div class="memberItem">
3382 <div class="memberName">retaining path</div>
3383 <div class="memberValue">
3384 <template if="{{ path == null }}">
3385 <eval-link callback="{{ retainingPath }}" label="[find]" expr="10">
3386 </eval-link>
3387 </template>
3388 <template if="{{ path != null }}">
3389 <template repeat="{{ element in path['elements'] }}">
3390 <div class="memberItem">
3391 <div class="memberName">[{{ element['index']}}]</div>
3392 <div class="memberValue">
3393 <any-service-ref ref="{{ element['value'] }}"></any-service-ref>
3394 <template if="{{ element['parentField'] != null }}">
3395 in <field-ref ref="{{ element['parentField'] }}"></field-ref> of
3396 </template>
3397 <template if="{{ element['parentListIndex'] != null }}">
3398 in [{{ element['parentListIndex'] }}] of
3399 </template>
3400 </div>
3401 </div>
3402 </template>
3403 <template if="{{ path['length'] > path['elements'].length }}">
3404 showing {{ path['elements'].length }} of {{ path['length'] }}
3405 <eval-link callback="{{ retainingPath }}" label="[find more]" expr ="{{ path['elements'].length * 2 }}">
3406 </eval-link>
3407 </template>
3408 </template>
3409 </div>
3410 </div>
3411
3412 <div class="memberItem" title="Objects which directly reference this objec t">
3413 <div class="memberName">inbound references</div>
3414 <div class="memberValue">
3415 <template if="{{ inboundReferences == null }}">
3416 <eval-link callback="{{ fetchInboundReferences }}" label="[find]" ex pr="100">
3417 </eval-link>
3418 </template>
3419 <template if="{{ inboundReferences != null }}">
3420 <template repeat="{{ reference in inboundReferences['references'] }} ">
3421 <inbound-reference ref="{{ reference }}"></inbound-reference>
3422 </template>
3423 </template>
3424 </div>
3425 </div>
3426
3427 </div>
3428 </template>
3429 </polymer-element>
3430
3431
3432
3433
3434
3435
3436
3437
3438 <polymer-element name="context-ref" extends="service-ref">
3439 <template>
3440 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3441 <span>
3442 <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a>
3443 <curly-block callback="{{ expander() }}">
3444 <div class="memberList">
3445 <div class="memberItem">
3446 <div class="memberName">parent</div>
3447 <div class="memberValue">
3448 <any-service-ref ref="{{ ref.parentContext }}"></any-service-ref>
3449 </div>
3450 </div>
3451 <template repeat="{{ variable in ref.variables }}">
3452 <div class="memberItem">
3453 <div class="memberName">[{{ variable['index']}}]</div>
3454 <div class="memberValue">
3455 <any-service-ref ref="{{ variable['value'] }}"></any-service-ref >
3456 </div>
3457 </div>
3458 </template>
3459 </div>
3460 </curly-block>
3461 </span>
3462 </template>
3463 </polymer-element>
3464
3465
3466
3467
3468 <polymer-element name="instance-view" extends="observatory-element">
3469 <template>
3470 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3471 <nav-bar>
3472 <top-nav-menu></top-nav-menu>
3473 <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
3474 <!-- TODO(turnidge): Add library nav menu here. -->
3475 <class-nav-menu cls="{{ instance.clazz }}"></class-nav-menu>
3476 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
3477 <nav-refresh callback="{{ refresh }}"></nav-refresh>
3478 <nav-control></nav-control>
3479 </nav-bar>
3480
3481 <template if="{{ instance.isError }}">
3482 <error-view error_obj="{{ instance['error'] }}"></error-view>
3483 </template>
3484
3485 <template if="{{ !instance.isError }}">
3486 <div class="content">
3487 <template if="{{ instance.isAbstractType }}">
3488 <h1>type {{ instance.name }}</h1>
3489 </template>
3490 <template if="{{ !instance.isAbstractType }}">
3491 <h1>instance of {{ instance.clazz.name }}</h1>
3492 </template>
3493
3494 <object-common object="{{ instance }}"></object-common>
3495
3496 <div class="memberList">
3497 <div class="memberItem">&nbsp;</div>
3498
3499 <template if="{{ instance.valueAsString != null }}">
3500 <div class="memberItem">
3501 <div class="memberName">value</div>
3502 <div class="memberValue">{{ instance.valueAsString }}</div>
3503 </div>
3504 </template>
3505
3506 <template if="{{ instance.isString }}">
3507 <div class="memberItem">
3508 <div class="memberName">valueAsLiteral</div>
3509 <div class="memberValue"> {{ asStringLiteral(instance.valueAsStrin g, instance.valueAsStringIsTruncated) }}</div>
3510 </div>
3511 </template>
3512
3513 <template if="{{ instance.isMirrorReference }}">
3514 <div class="memberItem">
3515 <div class="memberName">referent</div>
3516 <div class="memberValue">
3517 <any-service-ref ref="{{ instance.referent }}">
3518 </any-service-ref>
3519 </div>
3520 </div>
3521 </template>
3522
3523 <template if="{{ instance.typeClass != null }}">
3524 <div class="memberItem">
3525 <div class="memberName">type class</div>
3526 <div class="memberValue">
3527 <class-ref ref="{{ instance.typeClass }}">
3528 </class-ref>
3529 </div>
3530 </div>
3531 </template>
3532
3533 <template if="{{ instance.isClosure }}">
3534 <div class="memberItem">
3535 <div class="memberName">closure function</div>
3536 <div class="memberValue">
3537 <function-ref ref="{{ instance.closureFunc }}">
3538 </function-ref>
3539 </div>
3540 </div>
3541 </template>
3542 <template if="{{ instance.isClosure }}">
3543 <div class="memberItem">
3544 <div class="memberName">closure context</div>
3545 <div class="memberValue">
3546 <any-service-ref ref="{{ instance.closureCtxt }}">
3547 </any-service-ref>
3548 </div>
3549 </div>
3550 </template>
3551
3552 <template if="{{ instance.isWeakProperty }}">
3553 <div class="memberItem">
3554 <div class="memberName">key</div>
3555 <div class="memberValue">
3556 <any-service-ref ref="{{ instance.key }}">
3557 </any-service-ref>
3558 </div>
3559 </div>
3560 <div class="memberItem">
3561 <div class="memberName">value</div>
3562 <div class="memberValue">
3563 <any-service-ref ref="{{ instance.value }}">
3564 </any-service-ref>
3565 </div>
3566 </div>
3567 </template>
3568
3569 <div class="memberItem">
3570 <div class="memberName">toString()</div>
3571 <div class="memberValue">
3572 <eval-link callback="{{ eval }}" expr="toString()"></eval-link>
3573 </div>
3574 </div>
3575 </div>
3576 </div>
3577
3578 <hr>
3579
3580 <div class="content">
3581 <template if="{{ instance.nativeFields.isNotEmpty }}">
3582 native fields ({{ instance.nativeFields.length }})
3583 <curly-block expand="{{ instance.nativeFields.length <= 8 }}">
3584 <div class="memberList">
3585 <template repeat="{{ field in instance.nativeFields }}">
3586 <div class="memberItem">
3587 <div class="memberName">[{{ field['index']}}]</div>
3588 <div class="memberValue">[{{ field['value']}}]</div>
3589 </div>
3590 </template>
3591 </div>
3592 </curly-block><br><br>
3593 </template>
3594
3595 <template if="{{ instance.fields.isNotEmpty }}">
3596 fields ({{ instance.fields.length }})
3597 <curly-block expand="{{ instance.fields.length <= 8 }}">
3598 <div class="memberList">
3599 <template repeat="{{ field in instance.fields }}">
3600 <div class="memberItem">
3601 <div class="memberName">
3602 <field-ref ref="{{ field['decl'] }}"></field-ref>
3603 </div>
3604 <div class="memberValue">
3605 <any-service-ref ref="{{ field.value }}"></any-service-ref>
3606 </div>
3607 </div>
3608 </template>
3609 </div>
3610 </curly-block><br><br>
3611 </template>
3612
3613 <template if="{{ instance.elements.isNotEmpty }}">
3614 elements ({{ instance.elements.length }})
3615 <curly-block expand="{{ instance.elements.length <= 8 }}">
3616 <div class="memberList">
3617 <template repeat="{{ element in instance.elements }}">
3618 <div class="memberItem">
3619 <div class="memberName">[{{ element['index']}}]</div>
3620 <div class="memberValue">
3621 <any-service-ref ref="{{ element['value'] }}"></any-service- ref>
3622 </div>
3623 </div>
3624 </template>
3625 </div>
3626 </curly-block><br><br>
3627 </template>
3628 </div>
3629
3630 <hr>
3631
3632 <div class="content">
3633 <eval-box callback="{{ eval }}"></eval-box>
3634 </div>
3635
3636 <br><br><br><br>
3637 <br><br><br><br>
3638
3639 </template>
3640 </template>
3641 </polymer-element>
3642
4874 3643
4875 3644
4876 3645
4877 3646
4878 3647
4879 <polymer-element name="code-ref" extends="service-ref"> 3648 <polymer-element name="json-view" extends="observatory-element">
4880 <template> 3649 <template>
4881 <style>/* Global styles */ 3650 <nav-bar>
4882 * { 3651 <top-nav-menu last="{{ true }}"></top-nav-menu>
4883 margin: 0; 3652 </nav-bar>
4884 padding: 0; 3653 <pre>{{ mapAsString }}</pre>
4885 font: 400 14px 'Montserrat', sans-serif; 3654 </template>
4886 color: #333; 3655 </polymer-element>
4887 box-sizing: border-box; 3656
4888 } 3657
4889 3658
4890 .content { 3659
4891 padding-left: 10%; 3660
4892 font: 400 14px 'Montserrat', sans-serif; 3661
4893 } 3662
4894 3663
4895 .content-centered { 3664
4896 padding-left: 10%; 3665
4897 padding-right: 10%; 3666
4898 font: 400 14px 'Montserrat', sans-serif; 3667
4899 } 3668
4900 3669
4901 .content-centered-big { 3670
4902 padding-left: 5%; 3671
4903 padding-right: 5%; 3672 <polymer-element name="library-view" extends="observatory-element">
4904 font: 400 14px 'Montserrat', sans-serif; 3673 <template>
4905 } 3674 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4906 3675
4907 h1 { 3676 <nav-bar>
4908 font: 400 18px 'Montserrat', sans-serif; 3677 <top-nav-menu></top-nav-menu>
4909 } 3678 <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
4910 3679 <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav- menu>
4911 .memberList { 3680 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
4912 display: table; 3681 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4913 } 3682 <nav-control></nav-control>
4914 3683 </nav-bar>
4915 .memberItem { 3684
4916 display: table-row; 3685 <div class="content">
4917 } 3686 <h1>
4918 3687 <!-- TODO(turnidge): Handle unnamed libraries -->
4919 .memberName, .memberValue { 3688 library {{ library.name }}
4920 display: table-cell; 3689 </h1>
4921 vertical-align: top; 3690 <div class="memberList">
4922 padding: 3px 0 3px 1em; 3691 <div class="memberItem">
4923 font: 400 14px 'Montserrat', sans-serif; 3692 <div class="memberName">url</div>
4924 } 3693 <div class="memberValue">{{ library.url }}</div>
4925 3694 </div>
4926 .memberSmall { 3695 <template if="{{ library.name != library.vmName }}">
4927 display: table-cell; 3696 <div class="memberItem">
4928 vertical-align: top; 3697 <div class="memberName">vm name</div>
4929 padding: 3px 0 3px 1em; 3698 <div class="memberValue">{{ library.vmName }}</div>
4930 font: 400 12px 'Montserrat', sans-serif; 3699 </div>
4931 }
4932
4933 .monospace {
4934 font-family: consolas, courier, monospace;
4935 font-size: 1em;
4936 line-height: 1.2em;
4937 white-space: nowrap;
4938 }
4939
4940 a {
4941 color: #0489c3;
4942 text-decoration: none;
4943 }
4944
4945 a:hover {
4946 text-decoration: underline;
4947 }
4948
4949 em {
4950 color: inherit;
4951 font-style: italic;
4952 }
4953
4954 b {
4955 color: inherit;
4956 font-weight: bold;
4957 }
4958
4959 hr {
4960 margin-top: 20px;
4961 margin-bottom: 20px;
4962 border: 0;
4963 border-top: 1px solid #eee;
4964 height: 0;
4965 box-sizing: content-box;
4966 }
4967
4968 .list-group {
4969 padding-left: 0;
4970 margin-bottom: 20px;
4971 }
4972
4973 .list-group-item {
4974 position: relative;
4975 display: block;
4976 padding: 10px 15px;
4977 margin-bottom: -1px;
4978 background-color: #fff;
4979 }
4980
4981 .list-group-item:first-child {
4982 /* rounded top corners */
4983 border-top-right-radius:4px;
4984 border-top-left-radius:4px;
4985 }
4986
4987 .list-group-item:last-child {
4988 margin-bottom: 0;
4989 /* rounded bottom corners */
4990 border-bottom-right-radius: 4px;
4991 border-bottom-left-radius:4px;
4992 }
4993
4994 /* Flex row container */
4995 .flex-row {
4996 display: flex;
4997 flex-direction: row;
4998 }
4999
5000 /* Flex column container */
5001 .flex-column {
5002 display: flex;
5003 flex-direction: column;
5004 }
5005
5006 .flex-item-fit {
5007 flex-grow: 1;
5008 flex-shrink: 1;
5009 flex-basis: auto;
5010 }
5011
5012 .flex-item-no-shrink {
5013 flex-grow: 0;
5014 flex-shrink: 0;
5015 flex-basis: auto;
5016 }
5017
5018 .flex-item-fill {
5019 flex-grow: 0;
5020 flex-shrink: 1; /* shrink when pressured */
5021 flex-basis: 100%; /* try and take 100% */
5022 }
5023
5024 .flex-item-fixed-1-12 {
5025 flex-grow: 0;
5026 flex-shrink: 0;
5027 flex-basis: 8.3%;
5028 }
5029
5030 .flex-item-fixed-2-12 {
5031 flex-grow: 0;
5032 flex-shrink: 0;
5033 flex-basis: 16.6%;
5034 }
5035
5036 .flex-item-fixed-4-12 {
5037 flex-grow: 0;
5038 flex-shrink: 0;
5039 flex-basis: 33.3333%;
5040 }
5041
5042 .flex-item-fixed-6-12, .flex-item-50-percent {
5043 flex-grow: 0;
5044 flex-shrink: 0;
5045 flex-basis: 50%;
5046 }
5047
5048 .flex-item-fixed-8-12 {
5049 flex-grow: 0;
5050 flex-shrink: 0;
5051 flex-basis: 66.6666%;
5052 }
5053
5054 .flex-item-fixed-9-12 {
5055 flex-grow: 0;
5056 flex-shrink: 0;
5057 flex-basis: 75%;
5058 }
5059
5060
5061 .flex-item-fixed-12-12 {
5062 flex-grow: 0;
5063 flex-shrink: 0;
5064 flex-basis: 100%;
5065 }
5066
5067 .flex-item-10-percent {
5068 flex-grow: 0;
5069 flex-shrink: 0;
5070 flex-basis: 10%;
5071 }
5072
5073 .flex-item-15-percent {
5074 flex-grow: 0;
5075 flex-shrink: 0;
5076 flex-basis: 15%;
5077 }
5078
5079 .flex-item-20-percent {
5080 flex-grow: 0;
5081 flex-shrink: 0;
5082 flex-basis: 20%;
5083 }
5084
5085 .flex-item-30-percent {
5086 flex-grow: 0;
5087 flex-shrink: 0;
5088 flex-basis: 30%;
5089 }
5090
5091 .flex-item-40-percent {
5092 flex-grow: 0;
5093 flex-shrink: 0;
5094 flex-basis: 40%;
5095 }
5096
5097 .flex-item-50-percent {
5098 flex-grow: 0;
5099 flex-shrink: 0;
5100 flex-basis: 50%;
5101 }
5102
5103 .flex-item-60-percent {
5104 flex-grow: 0;
5105 flex-shrink: 0;
5106 flex-basis: 60%;
5107 }
5108
5109 .flex-item-70-percent {
5110 flex-grow: 0;
5111 flex-shrink: 0;
5112 flex-basis: 70%;
5113 }
5114
5115 .flex-item-80-percent {
5116 flex-grow: 0;
5117 flex-shrink: 0;
5118 flex-basis: 80%;
5119 }
5120
5121 .well {
5122 min-height: 20px;
5123 padding: 19px;
5124 margin-bottom: 20px;
5125 background-color: #f5f5f5;
5126 border: 1px solid #e3e3e3;
5127 border-radius: 4px;
5128 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
5129 }
5130
5131 .break-wrap {
5132 word-wrap: break-word;
5133 }
5134 </style>
5135 <template if="{{ code.isDartCode }}">
5136 <template if="{{ code.isOptimized }}">
5137 <a on-click="{{ goto }}" _href="{{ url }}">*{{ name }}</a>
5138 </template> 3700 </template>
5139 <template if="{{ !code.isOptimized }}"> 3701 </div>
5140 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a> 3702 </div>
3703
3704 <hr>
3705
3706 <div class="content">
3707 <template if="{{ library.imports.isNotEmpty }}">
3708 imports ({{ library.imports.length }})
3709 <curly-block expand="{{ library.imports.length <= 8 }}">
3710 <div class="memberList">
3711 <template repeat="{{ imp in library.imports }}">
3712 <div class="memberItem">
3713 <div class="memberValue">
3714 <library-ref ref="{{ imp }}"></library-ref>
3715 </div>
3716 </div>
3717 </template>
3718 </div>
3719 </curly-block><br>
3720 <br>
3721 </template>
3722
3723 <template if="{{ library.scripts.isNotEmpty }}">
3724 scripts ({{ library.scripts.length }})
3725 <curly-block expand="{{ library.scripts.length <= 8 }}">
3726 <div class="memberList">
3727 <template repeat="{{ script in library.scripts }}">
3728 <div class="memberItem">
3729 <div class="memberValue">
3730 <script-ref ref="{{ script }}"></script-ref>
3731 </div>
3732 </div>
3733 </template>
3734 </div>
3735 </curly-block><br>
3736 <br>
3737 </template>
3738
3739 <template if="{{ library.classes.isNotEmpty }}">
3740 classes ({{ library.classes.length }})
3741 <curly-block expand="{{ library.classes.length <= 8 }}">
3742 <div class="memberList">
3743 <template repeat="{{ cls in library.classes }}">
3744 <div class="memberItem">
3745 <div class="memberValue">
3746 <class-ref ref="{{ cls }}"></class-ref>
3747 </div>
3748 </div>
3749 </template>
3750 </div>
3751 </curly-block><br>
3752 <br>
3753 </template>
3754
3755 <template if="{{ library.variables.isNotEmpty }}">
3756 variables ({{ library.variables.length }})
3757 <curly-block expand="{{ library.variables.length <= 8 }}">
3758 <div class="memberList">
3759 <template repeat="{{ field in library.variables }}">
3760 <div class="memberItem">
3761 <div class="memberName">
3762 <field-ref ref="{{ field }}"></field-ref>
3763 </div>
3764 <div class="memberValue">
3765 <template if="{{ field.value != null }}">
3766 <any-service-ref ref="{{ field.value }}"></any-service-ref>
3767 </template>
3768 </div>
3769 </div>
3770 </template>
3771 </div>
3772 </curly-block><br>
3773 <br>
3774 </template>
3775
3776 <template if="{{ library.functions.isNotEmpty }}">
3777 functions ({{ library.functions.length }})
3778 <curly-block expand="{{ library.functions.length <= 8 }}">
3779 <div class="memberList">
3780 <template repeat="{{ function in library.functions }}">
3781 <div class="memberItem">
3782 <div class="memberValue">
3783 <function-ref ref="{{ function }}"></function-ref>
3784 </div>
3785 </div>
3786 </template>
3787 </div>
3788 </curly-block><br>
3789 <br>
3790 </template>
3791 </div>
3792
3793 <hr>
3794
3795 <div class="content">
3796 <eval-box callback="{{ eval }}"></eval-box>
3797 </div>
3798 <br><br><br><br>
3799 <br><br><br><br>
3800 </template>
3801 </polymer-element>
3802
3803
3804
3805
3806
3807
3808
3809 <polymer-element name="metrics-page" extends="observatory-element">
3810 <template>
3811 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3812 <style>
3813 ul li:hover:not(.selected) {
3814 background-color: #FFF3E3;
3815 }
3816 .selected {
3817 background-color: #0489c3;
3818 }
3819 .graph {
3820 min-height: 600px;
3821 }
3822 </style>
3823 <nav-bar>
3824 <top-nav-menu last="{{ true }}"></top-nav-menu>
3825 <nav-refresh callback="{{ refresh }}"></nav-refresh>
3826 <nav-control></nav-control>
3827 </nav-bar>
3828 <div class="flex-row">
3829 <div class="flex-item-20-percent">
3830 <ul>
3831 <template repeat="{{ metric in isolate.dartMetrics.values }}">
3832 <template if="{{ metric == selectedMetric }}">
3833 <li class="selected">
3834 {{ metric.name }}
3835 </li>
3836 </template>
3837 <template if="{{ metric != selectedMetric }}">
3838 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
3839 {{ metric.name }}
3840 </li>
3841 </template>
3842 </template>
3843 <template repeat="{{ metric in isolate.vmMetrics.values }}">
3844 <template if="{{ metric == selectedMetric }}">
3845 <li class="selected">
3846 {{ metric.name }}
3847 </li>
3848 </template>
3849 <template if="{{ metric != selectedMetric }}">
3850 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
3851 {{ metric.name }}
3852 </li>
3853 </template>
3854 </template>
3855 </ul>
3856 </div>
3857 <div class="flex-item-80-percent">
3858 <metrics-graph isolate="{{ isolate }}" metric="{{ selectedMetric }}">
3859 </metrics-graph>
3860 <div>
3861 <metric-details page="{{ page }}" metric="{{ selectedMetric }}">
3862 </metric-details>
3863 </div>
3864 </div>
3865 </div>
3866 </template>
3867 </polymer-element>
3868
3869 <polymer-element name="metric-details" extends="observatory-element">
3870 <template>
3871 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3872 <div class="content-centered">
3873 <div class="memberList">
3874 <div class="memberItem">
3875 <div class="memberName">name</div>
3876 <div class="memberValue">{{ metric.name }}</div>
3877 </div>
3878 <div class="memberItem">
3879 <div class="memberName">description</div>
3880 <div class="memberValue">{{ metric.description }}</div>
3881 </div>
3882 <div class="memberItem">
3883 <div class="memberName">current value</div>
3884 <div class="memberValue">{{ metric.value }}</div>
3885 </div>
3886 <template if="{{ (metric != null) &amp;&amp; (metric.min != null) }}">
3887 <div class="memberItem">
3888 <div class="memberName">minimum</div>
3889 <div class="memberValue">{{ metric.min }}</div>
3890 </div>
5141 </template> 3891 </template>
5142 </template> 3892 <template if="{{ (metric != null) &amp;&amp; (metric.max != null) }}">
5143 <template if="{{ !code.isDartCode }}"> 3893 <div class="memberItem">
5144 <span>{{ name }}</span> 3894 <div class="memberName">maximum</div>
5145 </template> 3895 <div class="memberValue">{{ metric.max }}</div>
5146 </template> 3896 </div>
5147 </polymer-element> 3897 </template>
5148 3898 <div class="memberItem">
5149 3899 <div class="memberName">refresh rate</div>
5150 3900 <div class="memberValue">
5151 3901 <select id="refreshrate" on-change="{{ refreshRateChange }}">
3902 <!-- These must be kept in sync with POLL_PERIODS in MetricsPage
3903 in object.dart -->
3904 <option value="8000">Every eight seconds</option>
3905 <option value="4000">Every four seconds</option>
3906 <option value="2000">Every two seconds</option>
3907 <option value="1000">Once a second</option>
3908 <option value="100">Ten times per second</option>
3909 <option value="0" selected="selected">Never</option>
3910 </select>
3911 </div>
3912 </div>
3913 <div class="memberItem">
3914 <div class="memberName">sample buffer size</div>
3915 <div class="memberValue">
3916 <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
3917 <option value="10">10</option>
3918 <option value="100" selected="selected">100</option>
3919 <option value="1000">1000</option>
3920 </select>
3921 </div>
3922 </div>
3923 </div>
3924 </div>
3925 </template>
3926 </polymer-element>
3927
3928 <polymer-element name="metrics-graph" extends="observatory-element">
3929 <template>
3930 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3931 <style>
3932 .graph {
3933 min-height: 600px;
3934 }
3935 </style>
3936 <div id="graph" class="graph">
3937 </div>
3938 </template>
3939 </polymer-element>
3940
3941
3942
5152 3943
5153 3944
5154 3945
5155 3946
5156 3947
5157 <polymer-element name="code-view" extends="observatory-element">
5158 <template>
5159 <style>/* Global styles */
5160 * {
5161 margin: 0;
5162 padding: 0;
5163 font: 400 14px 'Montserrat', sans-serif;
5164 color: #333;
5165 box-sizing: border-box;
5166 }
5167
5168 .content {
5169 padding-left: 10%;
5170 font: 400 14px 'Montserrat', sans-serif;
5171 }
5172
5173 .content-centered {
5174 padding-left: 10%;
5175 padding-right: 10%;
5176 font: 400 14px 'Montserrat', sans-serif;
5177 }
5178
5179 .content-centered-big {
5180 padding-left: 5%;
5181 padding-right: 5%;
5182 font: 400 14px 'Montserrat', sans-serif;
5183 }
5184
5185 h1 {
5186 font: 400 18px 'Montserrat', sans-serif;
5187 }
5188
5189 .memberList {
5190 display: table;
5191 }
5192
5193 .memberItem {
5194 display: table-row;
5195 }
5196
5197 .memberName, .memberValue {
5198 display: table-cell;
5199 vertical-align: top;
5200 padding: 3px 0 3px 1em;
5201 font: 400 14px 'Montserrat', sans-serif;
5202 }
5203
5204 .memberSmall {
5205 display: table-cell;
5206 vertical-align: top;
5207 padding: 3px 0 3px 1em;
5208 font: 400 12px 'Montserrat', sans-serif;
5209 }
5210
5211 .monospace {
5212 font-family: consolas, courier, monospace;
5213 font-size: 1em;
5214 line-height: 1.2em;
5215 white-space: nowrap;
5216 }
5217
5218 a {
5219 color: #0489c3;
5220 text-decoration: none;
5221 }
5222
5223 a:hover {
5224 text-decoration: underline;
5225 }
5226
5227 em {
5228 color: inherit;
5229 font-style: italic;
5230 }
5231
5232 b {
5233 color: inherit;
5234 font-weight: bold;
5235 }
5236
5237 hr {
5238 margin-top: 20px;
5239 margin-bottom: 20px;
5240 border: 0;
5241 border-top: 1px solid #eee;
5242 height: 0;
5243 box-sizing: content-box;
5244 }
5245
5246 .list-group {
5247 padding-left: 0;
5248 margin-bottom: 20px;
5249 }
5250
5251 .list-group-item {
5252 position: relative;
5253 display: block;
5254 padding: 10px 15px;
5255 margin-bottom: -1px;
5256 background-color: #fff;
5257 }
5258
5259 .list-group-item:first-child {
5260 /* rounded top corners */
5261 border-top-right-radius:4px;
5262 border-top-left-radius:4px;
5263 }
5264
5265 .list-group-item:last-child {
5266 margin-bottom: 0;
5267 /* rounded bottom corners */
5268 border-bottom-right-radius: 4px;
5269 border-bottom-left-radius:4px;
5270 }
5271
5272 /* Flex row container */
5273 .flex-row {
5274 display: flex;
5275 flex-direction: row;
5276 }
5277
5278 /* Flex column container */
5279 .flex-column {
5280 display: flex;
5281 flex-direction: column;
5282 }
5283
5284 .flex-item-fit {
5285 flex-grow: 1;
5286 flex-shrink: 1;
5287 flex-basis: auto;
5288 }
5289
5290 .flex-item-no-shrink {
5291 flex-grow: 0;
5292 flex-shrink: 0;
5293 flex-basis: auto;
5294 }
5295
5296 .flex-item-fill {
5297 flex-grow: 0;
5298 flex-shrink: 1; /* shrink when pressured */
5299 flex-basis: 100%; /* try and take 100% */
5300 }
5301
5302 .flex-item-fixed-1-12 {
5303 flex-grow: 0;
5304 flex-shrink: 0;
5305 flex-basis: 8.3%;
5306 }
5307
5308 .flex-item-fixed-2-12 {
5309 flex-grow: 0;
5310 flex-shrink: 0;
5311 flex-basis: 16.6%;
5312 }
5313
5314 .flex-item-fixed-4-12 {
5315 flex-grow: 0;
5316 flex-shrink: 0;
5317 flex-basis: 33.3333%;
5318 }
5319
5320 .flex-item-fixed-6-12, .flex-item-50-percent {
5321 flex-grow: 0;
5322 flex-shrink: 0;
5323 flex-basis: 50%;
5324 }
5325
5326 .flex-item-fixed-8-12 {
5327 flex-grow: 0;
5328 flex-shrink: 0;
5329 flex-basis: 66.6666%;
5330 }
5331
5332 .flex-item-fixed-9-12 {
5333 flex-grow: 0;
5334 flex-shrink: 0;
5335 flex-basis: 75%;
5336 }
5337 3948
5338 3949
5339 .flex-item-fixed-12-12 {
5340 flex-grow: 0;
5341 flex-shrink: 0;
5342 flex-basis: 100%;
5343 }
5344 3950
5345 .flex-item-10-percent {
5346 flex-grow: 0;
5347 flex-shrink: 0;
5348 flex-basis: 10%;
5349 }
5350 3951
5351 .flex-item-15-percent {
5352 flex-grow: 0;
5353 flex-shrink: 0;
5354 flex-basis: 15%;
5355 }
5356 3952
5357 .flex-item-20-percent {
5358 flex-grow: 0;
5359 flex-shrink: 0;
5360 flex-basis: 20%;
5361 }
5362 3953
5363 .flex-item-30-percent {
5364 flex-grow: 0;
5365 flex-shrink: 0;
5366 flex-basis: 30%;
5367 }
5368 3954
5369 .flex-item-40-percent {
5370 flex-grow: 0;
5371 flex-shrink: 0;
5372 flex-basis: 40%;
5373 }
5374 3955
5375 .flex-item-50-percent {
5376 flex-grow: 0;
5377 flex-shrink: 0;
5378 flex-basis: 50%;
5379 }
5380 3956
5381 .flex-item-60-percent { 3957 <polymer-element name="object-view" extends="observatory-element">
5382 flex-grow: 0; 3958 <template>
5383 flex-shrink: 0; 3959 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
5384 flex-basis: 60%;
5385 }
5386
5387 .flex-item-70-percent {
5388 flex-grow: 0;
5389 flex-shrink: 0;
5390 flex-basis: 70%;
5391 }
5392
5393 .flex-item-80-percent {
5394 flex-grow: 0;
5395 flex-shrink: 0;
5396 flex-basis: 80%;
5397 }
5398
5399 .well {
5400 min-height: 20px;
5401 padding: 19px;
5402 margin-bottom: 20px;
5403 background-color: #f5f5f5;
5404 border: 1px solid #e3e3e3;
5405 border-radius: 4px;
5406 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
5407 }
5408
5409 .break-wrap {
5410 word-wrap: break-word;
5411 }
5412 </style>
5413 <style>
5414 div.flex-row:hover {
5415 background-color: #FFF3E3;
5416 }
5417
5418 .highlight {
5419 background-color: #FFF3E3;
5420 }
5421
5422 .tooltip {
5423 display: block;
5424 position: absolute;
5425 visibility: hidden;
5426 opacity: 0;
5427 transition: visibility 0s linear 0.5s;
5428 transition: opacity .4s ease-in-out;
5429 }
5430
5431 .flex-row:hover .tooltip {
5432 display: block;
5433 position: absolute;
5434 top: 100%;
5435 visibility: visible;
5436 z-index: 999;
5437 width: auto;
5438 min-width: 400px;
5439 color: #ffffff;
5440 background-color: #FFF3E3;
5441 border-bottom-right-radius: 8px;
5442 border-bottom-left-radius: 8px;
5443 transition: visibility 0s linear 0.5s;
5444 transition: opacity .4s ease-in-out;
5445 opacity: 1;
5446 }
5447
5448 .descriptor-address {
5449 color: #0489c3;
5450 }
5451
5452 .snippet {
5453 text-align: center;
5454 margin-left: 10px;
5455 margin-right: 10px;
5456 }
5457
5458 </style>
5459 <nav-bar> 3960 <nav-bar>
5460 <top-nav-menu></top-nav-menu> 3961 <top-nav-menu></top-nav-menu>
5461 <isolate-nav-menu isolate="{{ code.isolate }}"></isolate-nav-menu> 3962 <isolate-nav-menu isolate="{{ object.isolate }}"></isolate-nav-menu>
5462 <nav-menu link="{{ code.link }}" anchor="{{ code.name }}" last="{{ true }} "></nav-menu> 3963 <nav-menu link="." anchor="object" last="{{ true }}"></nav-menu>
5463 <nav-refresh callback="{{ refresh }}"></nav-refresh> 3964 <nav-refresh callback="{{ refresh }}"></nav-refresh>
5464 <nav-control></nav-control> 3965 <nav-control></nav-control>
5465 </nav-bar> 3966 </nav-bar>
3967
5466 <div class="content"> 3968 <div class="content">
5467 <template if="{{ code.isDartCode &amp;&amp; code.isOptimized }}"> 3969 <object-common object="{{ object }}"></object-common>
5468 <h1>Optimized code for {{ code.name }}</h1> 3970 </div>
5469 </template> 3971
5470 <template if="{{ !(code.isDartCode &amp;&amp; code.isOptimized) }}"> 3972 <hr>
5471 <h1>Code for {{ code.name }}</h1> 3973 </template>
5472 </template> 3974 </polymer-element>
5473 <div class="memberList"> 3975
5474 <div class="memberItem"> 3976
5475 <div class="memberName">Kind</div> 3977
5476 <div class="memberValue">{{code.kind}}</div> 3978
5477 </div> 3979
5478 <template if="{{ code.isDartCode }}"> 3980
3981
3982
3983
3984
3985
3986
3987
3988
3989
3990
3991
3992
3993
3994 <polymer-element name="context-view" extends="observatory-element">
3995 <template>
3996 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
3997 <nav-bar>
3998 <top-nav-menu></top-nav-menu>
3999 <isolate-nav-menu isolate="{{ context.isolate }}"></isolate-nav-menu>
4000 <!-- TODO(turnidge): Add library nav menu here. -->
4001 <class-nav-menu cls="{{ context.clazz }}"></class-nav-menu>
4002 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
4003 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4004 <nav-control></nav-control>
4005 </nav-bar>
4006
4007 <template if="{{ !context.isError }}">
4008 <div class="content">
4009 <h1>instance of Context</h1>
4010
4011 <object-common object="{{ context }}"></object-common>
4012
4013 <div class="memberList">
4014 <div class="memberItem">&nbsp;</div>
4015
5479 <div class="memberItem"> 4016 <div class="memberItem">
5480 <div class="memberName">Optimized</div> 4017 <div class="memberName">parent context</div>
5481 <div class="memberValue">{{code.isOptimized}}</div> 4018 <div class="memberValue">
5482 </div> 4019 <any-service-ref ref="{{ context.parentContext }}"></any-service-r ef>
5483 </template> 4020 </div>
5484 <div class="memberItem">
5485 <div class="memberName">Function</div>
5486 <div class="memberValue">
5487 <function-ref ref="{{code.function}}">
5488 </function-ref>
5489 </div>
5490 </div>
5491 <div class="memberItem">
5492 <div class="memberName">Inclusive</div>
5493 <div class="memberValue">{{ code.formattedInclusiveTicks }}</div>
5494 </div>
5495 <div class="memberItem">
5496 <div class="memberName">Exclusive</div>
5497 <div class="memberValue">{{ code.formattedExclusiveTicks }}</div>
5498 </div>
5499 <div class="memberItem">
5500 <div class="memberName">Constant object pool</div>
5501 <div class="memberValue">
5502 <any-service-ref ref="{{ code.objectPool }}"></any-service-ref>
5503 </div> 4021 </div>
5504 </div> 4022 </div>
5505 </div> 4023 </div>
5506 </div> 4024
5507 <hr> 4025 <hr>
5508 <div class="content"> 4026
5509 <template if="{{ code.hasDisassembly }}"> 4027 <div class="content">
5510 <div class="flex-row"> 4028 <template if="{{ context.variables.isNotEmpty }}">
5511 <div class="flex-item-fixed-2-12 memberHeader">Inclusive</div> 4029 variables ({{ context.variables.length }})
5512 <div class="flex-item-fixed-2-12 memberHeader">Exclusive</div> 4030 <curly-block expand="{{ context.variables.length <= 8 }}">
5513 <div class="flex-item-fixed-2-12 memberHeader">Address</div> 4031 <div class="memberList">
5514 <div class="flex-item-fixed-6-12 memberHeader">Disassembly</div> 4032 <template repeat="{{ variable in context.variables }}">
5515 </div> 4033 <div class="memberItem">
5516 </template> 4034 <div class="memberName">[{{ variable['index']}}]</div>
5517 <template repeat="{{ instruction in code.instructions }}"> 4035 <div class="memberValue">
5518 <div class="flex-row" on-mouseover="{{ mouseOver }}" on-mouseout="{{ mou seOut }}" data-jump-target="{{ instruction.jumpTarget.address }}" id="addr-{{ in struction.address }}" style="position: relative"> 4036 <any-service-ref ref="{{ variable['value'] }}"></any-service -ref>
5519 <template if="{{ instruction.isComment }}"> 4037 </div>
5520 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Inclusive(code) }}</div>
5521 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Exclusive(code) }}</div>
5522 <div class="flex-item-fixed-8-12 monospace">{{ instruction.human }}< /div>
5523 </template>
5524 <template if="{{ !instruction.isComment }}">
5525 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Inclusive(code) }}</div>
5526 <div class="flex-item-fixed-2-12 monospace">{{ instruction.formatted Exclusive(code) }}</div>
5527 <template if="{{ instruction.hasDescriptors }}">
5528 <div class="flex-item-fixed-2-12 monospace descriptor-address">
5529 <div class="tooltip">
5530 <template repeat="{{ descriptor in instruction.descriptors }}" >
5531 <div class="memberList">
5532 <div class="memberItem">
5533 <div class="memberName">Kind</div>
5534 <div class="memberValue">{{ descriptor.kind }}</div>
5535 </div>
5536 <div class="memberItem">
5537 <div class="memberName">Deoptimization ID</div>
5538 <div class="memberValue">{{ descriptor.formattedDeoptId() }}</div>
5539 </div>
5540 <template if="{{ descriptor.script != null }}">
5541 <div class="memberItem">
5542 <div class="memberName">Script</div>
5543 <div class="memberValue"><script-ref ref="{{ descriptor .script }}" pos="{{ descriptor.tokenPos }}"></script-ref></div>
5544 </div>
5545 </template>
5546 </div>
5547 <template if="{{ descriptor.script != null }}">
5548 <div class="snippet monospace">
5549 <span>{{ descriptor.formattedLine }}</span>
5550 </div>
5551 </template>
5552 </template>
5553 </div> 4038 </div>
5554 {{ instruction.formattedAddress() }} 4039 </template>
5555 </div>
5556 </template>
5557 <template if="{{ !instruction.hasDescriptors }}">
5558 <div class="flex-item-fixed-2-12 monospace">
5559 {{ instruction.formattedAddress() }}
5560 </div>
5561 </template>
5562 <div class="flex-item-fixed-6-12 monospace">
5563 {{ instruction.human }}
5564 </div> 4040 </div>
5565 </template> 4041 </curly-block><br><br>
5566 </div> 4042 </template>
5567 </template> 4043 </div>
5568 </div> 4044
4045 <br><br><br><br>
4046 <br><br><br><br>
4047
4048 </template>
5569 </template> 4049 </template>
5570 </polymer-element> 4050 </polymer-element>
5571 4051
5572 4052
5573 4053
5574 4054
5575 4055
5576 4056
5577 4057
5578 4058
5579 4059
5580 4060
5581 4061
5582 <!-- TODO(turnidge): Use core-icon once core_elements work properly in
5583 devtools -->
5584 <polymer-element name="icon-expand-less" noscript="">
5585 <template>
5586 <svg width="24" height="24">
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 */
5603 * {
5604 margin: 0;
5605 padding: 0;
5606 font: 400 14px 'Montserrat', sans-serif;
5607 color: #333;
5608 box-sizing: border-box;
5609 }
5610
5611 .content {
5612 padding-left: 10%;
5613 font: 400 14px 'Montserrat', sans-serif;
5614 }
5615
5616 .content-centered {
5617 padding-left: 10%;
5618 padding-right: 10%;
5619 font: 400 14px 'Montserrat', sans-serif;
5620 }
5621
5622 .content-centered-big {
5623 padding-left: 5%;
5624 padding-right: 5%;
5625 font: 400 14px 'Montserrat', sans-serif;
5626 }
5627
5628 h1 {
5629 font: 400 18px 'Montserrat', sans-serif;
5630 }
5631
5632 .memberList {
5633 display: table;
5634 }
5635
5636 .memberItem {
5637 display: table-row;
5638 }
5639
5640 .memberName, .memberValue {
5641 display: table-cell;
5642 vertical-align: top;
5643 padding: 3px 0 3px 1em;
5644 font: 400 14px 'Montserrat', sans-serif;
5645 }
5646
5647 .memberSmall {
5648 display: table-cell;
5649 vertical-align: top;
5650 padding: 3px 0 3px 1em;
5651 font: 400 12px 'Montserrat', sans-serif;
5652 }
5653
5654 .monospace {
5655 font-family: consolas, courier, monospace;
5656 font-size: 1em;
5657 line-height: 1.2em;
5658 white-space: nowrap;
5659 }
5660
5661 a {
5662 color: #0489c3;
5663 text-decoration: none;
5664 }
5665
5666 a:hover {
5667 text-decoration: underline;
5668 }
5669
5670 em {
5671 color: inherit;
5672 font-style: italic;
5673 }
5674
5675 b {
5676 color: inherit;
5677 font-weight: bold;
5678 }
5679
5680 hr {
5681 margin-top: 20px;
5682 margin-bottom: 20px;
5683 border: 0;
5684 border-top: 1px solid #eee;
5685 height: 0;
5686 box-sizing: content-box;
5687 }
5688
5689 .list-group {
5690 padding-left: 0;
5691 margin-bottom: 20px;
5692 }
5693
5694 .list-group-item {
5695 position: relative;
5696 display: block;
5697 padding: 10px 15px;
5698 margin-bottom: -1px;
5699 background-color: #fff;
5700 }
5701
5702 .list-group-item:first-child {
5703 /* rounded top corners */
5704 border-top-right-radius:4px;
5705 border-top-left-radius:4px;
5706 }
5707
5708 .list-group-item:last-child {
5709 margin-bottom: 0;
5710 /* rounded bottom corners */
5711 border-bottom-right-radius: 4px;
5712 border-bottom-left-radius:4px;
5713 }
5714
5715 /* Flex row container */
5716 .flex-row {
5717 display: flex;
5718 flex-direction: row;
5719 }
5720
5721 /* Flex column container */
5722 .flex-column {
5723 display: flex;
5724 flex-direction: column;
5725 }
5726
5727 .flex-item-fit {
5728 flex-grow: 1;
5729 flex-shrink: 1;
5730 flex-basis: auto;
5731 }
5732
5733 .flex-item-no-shrink {
5734 flex-grow: 0;
5735 flex-shrink: 0;
5736 flex-basis: auto;
5737 }
5738
5739 .flex-item-fill {
5740 flex-grow: 0;
5741 flex-shrink: 1; /* shrink when pressured */
5742 flex-basis: 100%; /* try and take 100% */
5743 }
5744
5745 .flex-item-fixed-1-12 {
5746 flex-grow: 0;
5747 flex-shrink: 0;
5748 flex-basis: 8.3%;
5749 }
5750
5751 .flex-item-fixed-2-12 {
5752 flex-grow: 0;
5753 flex-shrink: 0;
5754 flex-basis: 16.6%;
5755 }
5756
5757 .flex-item-fixed-4-12 {
5758 flex-grow: 0;
5759 flex-shrink: 0;
5760 flex-basis: 33.3333%;
5761 }
5762
5763 .flex-item-fixed-6-12, .flex-item-50-percent {
5764 flex-grow: 0;
5765 flex-shrink: 0;
5766 flex-basis: 50%;
5767 }
5768
5769 .flex-item-fixed-8-12 {
5770 flex-grow: 0;
5771 flex-shrink: 0;
5772 flex-basis: 66.6666%;
5773 }
5774
5775 .flex-item-fixed-9-12 {
5776 flex-grow: 0;
5777 flex-shrink: 0;
5778 flex-basis: 75%;
5779 }
5780
5781
5782 .flex-item-fixed-12-12 {
5783 flex-grow: 0;
5784 flex-shrink: 0;
5785 flex-basis: 100%;
5786 }
5787
5788 .flex-item-10-percent {
5789 flex-grow: 0;
5790 flex-shrink: 0;
5791 flex-basis: 10%;
5792 }
5793
5794 .flex-item-15-percent {
5795 flex-grow: 0;
5796 flex-shrink: 0;
5797 flex-basis: 15%;
5798 }
5799
5800 .flex-item-20-percent {
5801 flex-grow: 0;
5802 flex-shrink: 0;
5803 flex-basis: 20%;
5804 }
5805
5806 .flex-item-30-percent {
5807 flex-grow: 0;
5808 flex-shrink: 0;
5809 flex-basis: 30%;
5810 }
5811
5812 .flex-item-40-percent {
5813 flex-grow: 0;
5814 flex-shrink: 0;
5815 flex-basis: 40%;
5816 }
5817
5818 .flex-item-50-percent {
5819 flex-grow: 0;
5820 flex-shrink: 0;
5821 flex-basis: 50%;
5822 }
5823
5824 .flex-item-60-percent {
5825 flex-grow: 0;
5826 flex-shrink: 0;
5827 flex-basis: 60%;
5828 }
5829
5830 .flex-item-70-percent {
5831 flex-grow: 0;
5832 flex-shrink: 0;
5833 flex-basis: 70%;
5834 }
5835
5836 .flex-item-80-percent {
5837 flex-grow: 0;
5838 flex-shrink: 0;
5839 flex-basis: 80%;
5840 }
5841
5842 .well {
5843 min-height: 20px;
5844 padding: 19px;
5845 margin-bottom: 20px;
5846 background-color: #f5f5f5;
5847 border: 1px solid #e3e3e3;
5848 border-radius: 4px;
5849 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
5850 }
5851
5852 .break-wrap {
5853 word-wrap: break-word;
5854 }
5855 </style>
5856 <style>
5857 .container {
5858 height: 100%;
5859 display: flex;
5860 flex-direction: column;
5861 justify-content: space-between;
5862 }
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 -->
5902 </div>
5903 </template>
5904 </polymer-element>
5905
5906 <polymer-element name="debugger-stack" extends="observatory-element">
5907 <template>
5908 <style>/* Global styles */
5909 * {
5910 margin: 0;
5911 padding: 0;
5912 font: 400 14px 'Montserrat', sans-serif;
5913 color: #333;
5914 box-sizing: border-box;
5915 }
5916
5917 .content {
5918 padding-left: 10%;
5919 font: 400 14px 'Montserrat', sans-serif;
5920 }
5921
5922 .content-centered {
5923 padding-left: 10%;
5924 padding-right: 10%;
5925 font: 400 14px 'Montserrat', sans-serif;
5926 }
5927
5928 .content-centered-big {
5929 padding-left: 5%;
5930 padding-right: 5%;
5931 font: 400 14px 'Montserrat', sans-serif;
5932 }
5933
5934 h1 {
5935 font: 400 18px 'Montserrat', sans-serif;
5936 }
5937
5938 .memberList {
5939 display: table;
5940 }
5941
5942 .memberItem {
5943 display: table-row;
5944 }
5945
5946 .memberName, .memberValue {
5947 display: table-cell;
5948 vertical-align: top;
5949 padding: 3px 0 3px 1em;
5950 font: 400 14px 'Montserrat', sans-serif;
5951 }
5952
5953 .memberSmall {
5954 display: table-cell;
5955 vertical-align: top;
5956 padding: 3px 0 3px 1em;
5957 font: 400 12px 'Montserrat', sans-serif;
5958 }
5959
5960 .monospace {
5961 font-family: consolas, courier, monospace;
5962 font-size: 1em;
5963 line-height: 1.2em;
5964 white-space: nowrap;
5965 }
5966
5967 a {
5968 color: #0489c3;
5969 text-decoration: none;
5970 }
5971
5972 a:hover {
5973 text-decoration: underline;
5974 }
5975
5976 em {
5977 color: inherit;
5978 font-style: italic;
5979 }
5980
5981 b {
5982 color: inherit;
5983 font-weight: bold;
5984 }
5985
5986 hr {
5987 margin-top: 20px;
5988 margin-bottom: 20px;
5989 border: 0;
5990 border-top: 1px solid #eee;
5991 height: 0;
5992 box-sizing: content-box;
5993 }
5994
5995 .list-group {
5996 padding-left: 0;
5997 margin-bottom: 20px;
5998 }
5999
6000 .list-group-item {
6001 position: relative;
6002 display: block;
6003 padding: 10px 15px;
6004 margin-bottom: -1px;
6005 background-color: #fff;
6006 }
6007
6008 .list-group-item:first-child {
6009 /* rounded top corners */
6010 border-top-right-radius:4px;
6011 border-top-left-radius:4px;
6012 }
6013
6014 .list-group-item:last-child {
6015 margin-bottom: 0;
6016 /* rounded bottom corners */
6017 border-bottom-right-radius: 4px;
6018 border-bottom-left-radius:4px;
6019 }
6020
6021 /* Flex row container */
6022 .flex-row {
6023 display: flex;
6024 flex-direction: row;
6025 }
6026
6027 /* Flex column container */
6028 .flex-column {
6029 display: flex;
6030 flex-direction: column;
6031 }
6032
6033 .flex-item-fit {
6034 flex-grow: 1;
6035 flex-shrink: 1;
6036 flex-basis: auto;
6037 }
6038
6039 .flex-item-no-shrink {
6040 flex-grow: 0;
6041 flex-shrink: 0;
6042 flex-basis: auto;
6043 }
6044
6045 .flex-item-fill {
6046 flex-grow: 0;
6047 flex-shrink: 1; /* shrink when pressured */
6048 flex-basis: 100%; /* try and take 100% */
6049 }
6050
6051 .flex-item-fixed-1-12 {
6052 flex-grow: 0;
6053 flex-shrink: 0;
6054 flex-basis: 8.3%;
6055 }
6056
6057 .flex-item-fixed-2-12 {
6058 flex-grow: 0;
6059 flex-shrink: 0;
6060 flex-basis: 16.6%;
6061 }
6062
6063 .flex-item-fixed-4-12 {
6064 flex-grow: 0;
6065 flex-shrink: 0;
6066 flex-basis: 33.3333%;
6067 }
6068
6069 .flex-item-fixed-6-12, .flex-item-50-percent {
6070 flex-grow: 0;
6071 flex-shrink: 0;
6072 flex-basis: 50%;
6073 }
6074
6075 .flex-item-fixed-8-12 {
6076 flex-grow: 0;
6077 flex-shrink: 0;
6078 flex-basis: 66.6666%;
6079 }
6080
6081 .flex-item-fixed-9-12 {
6082 flex-grow: 0;
6083 flex-shrink: 0;
6084 flex-basis: 75%;
6085 }
6086
6087
6088 .flex-item-fixed-12-12 {
6089 flex-grow: 0;
6090 flex-shrink: 0;
6091 flex-basis: 100%;
6092 }
6093
6094 .flex-item-10-percent {
6095 flex-grow: 0;
6096 flex-shrink: 0;
6097 flex-basis: 10%;
6098 }
6099
6100 .flex-item-15-percent {
6101 flex-grow: 0;
6102 flex-shrink: 0;
6103 flex-basis: 15%;
6104 }
6105
6106 .flex-item-20-percent {
6107 flex-grow: 0;
6108 flex-shrink: 0;
6109 flex-basis: 20%;
6110 }
6111
6112 .flex-item-30-percent {
6113 flex-grow: 0;
6114 flex-shrink: 0;
6115 flex-basis: 30%;
6116 }
6117
6118 .flex-item-40-percent {
6119 flex-grow: 0;
6120 flex-shrink: 0;
6121 flex-basis: 40%;
6122 }
6123
6124 .flex-item-50-percent {
6125 flex-grow: 0;
6126 flex-shrink: 0;
6127 flex-basis: 50%;
6128 }
6129
6130 .flex-item-60-percent {
6131 flex-grow: 0;
6132 flex-shrink: 0;
6133 flex-basis: 60%;
6134 }
6135
6136 .flex-item-70-percent {
6137 flex-grow: 0;
6138 flex-shrink: 0;
6139 flex-basis: 70%;
6140 }
6141
6142 .flex-item-80-percent {
6143 flex-grow: 0;
6144 flex-shrink: 0;
6145 flex-basis: 80%;
6146 }
6147
6148 .well {
6149 min-height: 20px;
6150 padding: 19px;
6151 margin-bottom: 20px;
6152 background-color: #f5f5f5;
6153 border: 1px solid #e3e3e3;
6154 border-radius: 4px;
6155 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6156 }
6157
6158 .break-wrap {
6159 word-wrap: break-word;
6160 }
6161 </style>
6162 <template if="{{ stack == null }}">
6163 Loading stack frames
6164 </template>
6165 <template if="{{ stack != null }}">
6166 <ul class="list-group">
6167 <template repeat="{{ frame in stack['members'] }}">
6168 <li class="list-group-item">
6169 <debugger-frame frame="{{ frame }}" expand="{{ frame['depth'] == act iveFrame }}">
6170 </debugger-frame>
6171 </li>
6172 </template>
6173 </ul>
6174 </template>
6175 </template>
6176 </polymer-element>
6177
6178
6179 <polymer-element name="debugger-frame" extends="observatory-element">
6180 <template>
6181 <style>/* Global styles */
6182 * {
6183 margin: 0;
6184 padding: 0;
6185 font: 400 14px 'Montserrat', sans-serif;
6186 color: #333;
6187 box-sizing: border-box;
6188 }
6189
6190 .content {
6191 padding-left: 10%;
6192 font: 400 14px 'Montserrat', sans-serif;
6193 }
6194
6195 .content-centered {
6196 padding-left: 10%;
6197 padding-right: 10%;
6198 font: 400 14px 'Montserrat', sans-serif;
6199 }
6200
6201 .content-centered-big {
6202 padding-left: 5%;
6203 padding-right: 5%;
6204 font: 400 14px 'Montserrat', sans-serif;
6205 }
6206
6207 h1 {
6208 font: 400 18px 'Montserrat', sans-serif;
6209 }
6210
6211 .memberList {
6212 display: table;
6213 }
6214
6215 .memberItem {
6216 display: table-row;
6217 }
6218
6219 .memberName, .memberValue {
6220 display: table-cell;
6221 vertical-align: top;
6222 padding: 3px 0 3px 1em;
6223 font: 400 14px 'Montserrat', sans-serif;
6224 }
6225
6226 .memberSmall {
6227 display: table-cell;
6228 vertical-align: top;
6229 padding: 3px 0 3px 1em;
6230 font: 400 12px 'Montserrat', sans-serif;
6231 }
6232
6233 .monospace {
6234 font-family: consolas, courier, monospace;
6235 font-size: 1em;
6236 line-height: 1.2em;
6237 white-space: nowrap;
6238 }
6239
6240 a {
6241 color: #0489c3;
6242 text-decoration: none;
6243 }
6244
6245 a:hover {
6246 text-decoration: underline;
6247 }
6248
6249 em {
6250 color: inherit;
6251 font-style: italic;
6252 }
6253
6254 b {
6255 color: inherit;
6256 font-weight: bold;
6257 }
6258
6259 hr {
6260 margin-top: 20px;
6261 margin-bottom: 20px;
6262 border: 0;
6263 border-top: 1px solid #eee;
6264 height: 0;
6265 box-sizing: content-box;
6266 }
6267
6268 .list-group {
6269 padding-left: 0;
6270 margin-bottom: 20px;
6271 }
6272
6273 .list-group-item {
6274 position: relative;
6275 display: block;
6276 padding: 10px 15px;
6277 margin-bottom: -1px;
6278 background-color: #fff;
6279 }
6280
6281 .list-group-item:first-child {
6282 /* rounded top corners */
6283 border-top-right-radius:4px;
6284 border-top-left-radius:4px;
6285 }
6286
6287 .list-group-item:last-child {
6288 margin-bottom: 0;
6289 /* rounded bottom corners */
6290 border-bottom-right-radius: 4px;
6291 border-bottom-left-radius:4px;
6292 }
6293
6294 /* Flex row container */
6295 .flex-row {
6296 display: flex;
6297 flex-direction: row;
6298 }
6299
6300 /* Flex column container */
6301 .flex-column {
6302 display: flex;
6303 flex-direction: column;
6304 }
6305
6306 .flex-item-fit {
6307 flex-grow: 1;
6308 flex-shrink: 1;
6309 flex-basis: auto;
6310 }
6311
6312 .flex-item-no-shrink {
6313 flex-grow: 0;
6314 flex-shrink: 0;
6315 flex-basis: auto;
6316 }
6317
6318 .flex-item-fill {
6319 flex-grow: 0;
6320 flex-shrink: 1; /* shrink when pressured */
6321 flex-basis: 100%; /* try and take 100% */
6322 }
6323
6324 .flex-item-fixed-1-12 {
6325 flex-grow: 0;
6326 flex-shrink: 0;
6327 flex-basis: 8.3%;
6328 }
6329
6330 .flex-item-fixed-2-12 {
6331 flex-grow: 0;
6332 flex-shrink: 0;
6333 flex-basis: 16.6%;
6334 }
6335
6336 .flex-item-fixed-4-12 {
6337 flex-grow: 0;
6338 flex-shrink: 0;
6339 flex-basis: 33.3333%;
6340 }
6341
6342 .flex-item-fixed-6-12, .flex-item-50-percent {
6343 flex-grow: 0;
6344 flex-shrink: 0;
6345 flex-basis: 50%;
6346 }
6347
6348 .flex-item-fixed-8-12 {
6349 flex-grow: 0;
6350 flex-shrink: 0;
6351 flex-basis: 66.6666%;
6352 }
6353
6354 .flex-item-fixed-9-12 {
6355 flex-grow: 0;
6356 flex-shrink: 0;
6357 flex-basis: 75%;
6358 }
6359
6360
6361 .flex-item-fixed-12-12 {
6362 flex-grow: 0;
6363 flex-shrink: 0;
6364 flex-basis: 100%;
6365 }
6366
6367 .flex-item-10-percent {
6368 flex-grow: 0;
6369 flex-shrink: 0;
6370 flex-basis: 10%;
6371 }
6372
6373 .flex-item-15-percent {
6374 flex-grow: 0;
6375 flex-shrink: 0;
6376 flex-basis: 15%;
6377 }
6378
6379 .flex-item-20-percent {
6380 flex-grow: 0;
6381 flex-shrink: 0;
6382 flex-basis: 20%;
6383 }
6384
6385 .flex-item-30-percent {
6386 flex-grow: 0;
6387 flex-shrink: 0;
6388 flex-basis: 30%;
6389 }
6390
6391 .flex-item-40-percent {
6392 flex-grow: 0;
6393 flex-shrink: 0;
6394 flex-basis: 40%;
6395 }
6396
6397 .flex-item-50-percent {
6398 flex-grow: 0;
6399 flex-shrink: 0;
6400 flex-basis: 50%;
6401 }
6402
6403 .flex-item-60-percent {
6404 flex-grow: 0;
6405 flex-shrink: 0;
6406 flex-basis: 60%;
6407 }
6408
6409 .flex-item-70-percent {
6410 flex-grow: 0;
6411 flex-shrink: 0;
6412 flex-basis: 70%;
6413 }
6414
6415 .flex-item-80-percent {
6416 flex-grow: 0;
6417 flex-shrink: 0;
6418 flex-basis: 80%;
6419 }
6420
6421 .well {
6422 min-height: 20px;
6423 padding: 19px;
6424 margin-bottom: 20px;
6425 background-color: #f5f5f5;
6426 border: 1px solid #e3e3e3;
6427 border-radius: 4px;
6428 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6429 }
6430
6431 .break-wrap {
6432 word-wrap: break-word;
6433 }
6434 </style>
6435 <style>
6436 .frameOuter {
6437 position: relative;
6438 padding: 5px;
6439 border: 1px solid white;
6440 }
6441 .frameOuter:hover {
6442 border: 1px solid #e0e0e0;
6443 }
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>
6488
6489 <template if="{{expanded}}">
6490 <div class="frameDetails">
6491 <div class="flex-row">
6492 <div class="flex-item-60-percent">
6493 <script-inset height="{{ scriptHeight }}" script="{{ frame['functi on'].script }}" startpos="{{ frame['function'].tokenPos }}" endpos="{{ frame['fu nction'].endTokenPos }}" currentpos="{{ frame['tokenPos'] }}">
6494 </script-inset>
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>
6505 </div>
6506 </template>
6507 </div>
6508 </div>
6509 </div>
6510 <!-- TODO(turnidge): Add eval box here? -->
6511 <div class="frameContractor">
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>
6520 </div>
6521 </template>
6522 </polymer-element>
6523
6524 <polymer-element name="debugger-console" extends="observatory-element">
6525 <template>
6526 <style>/* Global styles */
6527 * {
6528 margin: 0;
6529 padding: 0;
6530 font: 400 14px 'Montserrat', sans-serif;
6531 color: #333;
6532 box-sizing: border-box;
6533 }
6534
6535 .content {
6536 padding-left: 10%;
6537 font: 400 14px 'Montserrat', sans-serif;
6538 }
6539
6540 .content-centered {
6541 padding-left: 10%;
6542 padding-right: 10%;
6543 font: 400 14px 'Montserrat', sans-serif;
6544 }
6545
6546 .content-centered-big {
6547 padding-left: 5%;
6548 padding-right: 5%;
6549 font: 400 14px 'Montserrat', sans-serif;
6550 }
6551
6552 h1 {
6553 font: 400 18px 'Montserrat', sans-serif;
6554 }
6555
6556 .memberList {
6557 display: table;
6558 }
6559
6560 .memberItem {
6561 display: table-row;
6562 }
6563
6564 .memberName, .memberValue {
6565 display: table-cell;
6566 vertical-align: top;
6567 padding: 3px 0 3px 1em;
6568 font: 400 14px 'Montserrat', sans-serif;
6569 }
6570
6571 .memberSmall {
6572 display: table-cell;
6573 vertical-align: top;
6574 padding: 3px 0 3px 1em;
6575 font: 400 12px 'Montserrat', sans-serif;
6576 }
6577
6578 .monospace {
6579 font-family: consolas, courier, monospace;
6580 font-size: 1em;
6581 line-height: 1.2em;
6582 white-space: nowrap;
6583 }
6584
6585 a {
6586 color: #0489c3;
6587 text-decoration: none;
6588 }
6589
6590 a:hover {
6591 text-decoration: underline;
6592 }
6593
6594 em {
6595 color: inherit;
6596 font-style: italic;
6597 }
6598
6599 b {
6600 color: inherit;
6601 font-weight: bold;
6602 }
6603
6604 hr {
6605 margin-top: 20px;
6606 margin-bottom: 20px;
6607 border: 0;
6608 border-top: 1px solid #eee;
6609 height: 0;
6610 box-sizing: content-box;
6611 }
6612
6613 .list-group {
6614 padding-left: 0;
6615 margin-bottom: 20px;
6616 }
6617
6618 .list-group-item {
6619 position: relative;
6620 display: block;
6621 padding: 10px 15px;
6622 margin-bottom: -1px;
6623 background-color: #fff;
6624 }
6625
6626 .list-group-item:first-child {
6627 /* rounded top corners */
6628 border-top-right-radius:4px;
6629 border-top-left-radius:4px;
6630 }
6631
6632 .list-group-item:last-child {
6633 margin-bottom: 0;
6634 /* rounded bottom corners */
6635 border-bottom-right-radius: 4px;
6636 border-bottom-left-radius:4px;
6637 }
6638
6639 /* Flex row container */
6640 .flex-row {
6641 display: flex;
6642 flex-direction: row;
6643 }
6644
6645 /* Flex column container */
6646 .flex-column {
6647 display: flex;
6648 flex-direction: column;
6649 }
6650
6651 .flex-item-fit {
6652 flex-grow: 1;
6653 flex-shrink: 1;
6654 flex-basis: auto;
6655 }
6656
6657 .flex-item-no-shrink {
6658 flex-grow: 0;
6659 flex-shrink: 0;
6660 flex-basis: auto;
6661 }
6662
6663 .flex-item-fill {
6664 flex-grow: 0;
6665 flex-shrink: 1; /* shrink when pressured */
6666 flex-basis: 100%; /* try and take 100% */
6667 }
6668
6669 .flex-item-fixed-1-12 {
6670 flex-grow: 0;
6671 flex-shrink: 0;
6672 flex-basis: 8.3%;
6673 }
6674
6675 .flex-item-fixed-2-12 {
6676 flex-grow: 0;
6677 flex-shrink: 0;
6678 flex-basis: 16.6%;
6679 }
6680
6681 .flex-item-fixed-4-12 {
6682 flex-grow: 0;
6683 flex-shrink: 0;
6684 flex-basis: 33.3333%;
6685 }
6686
6687 .flex-item-fixed-6-12, .flex-item-50-percent {
6688 flex-grow: 0;
6689 flex-shrink: 0;
6690 flex-basis: 50%;
6691 }
6692
6693 .flex-item-fixed-8-12 {
6694 flex-grow: 0;
6695 flex-shrink: 0;
6696 flex-basis: 66.6666%;
6697 }
6698
6699 .flex-item-fixed-9-12 {
6700 flex-grow: 0;
6701 flex-shrink: 0;
6702 flex-basis: 75%;
6703 }
6704
6705
6706 .flex-item-fixed-12-12 {
6707 flex-grow: 0;
6708 flex-shrink: 0;
6709 flex-basis: 100%;
6710 }
6711
6712 .flex-item-10-percent {
6713 flex-grow: 0;
6714 flex-shrink: 0;
6715 flex-basis: 10%;
6716 }
6717
6718 .flex-item-15-percent {
6719 flex-grow: 0;
6720 flex-shrink: 0;
6721 flex-basis: 15%;
6722 }
6723
6724 .flex-item-20-percent {
6725 flex-grow: 0;
6726 flex-shrink: 0;
6727 flex-basis: 20%;
6728 }
6729
6730 .flex-item-30-percent {
6731 flex-grow: 0;
6732 flex-shrink: 0;
6733 flex-basis: 30%;
6734 }
6735
6736 .flex-item-40-percent {
6737 flex-grow: 0;
6738 flex-shrink: 0;
6739 flex-basis: 40%;
6740 }
6741
6742 .flex-item-50-percent {
6743 flex-grow: 0;
6744 flex-shrink: 0;
6745 flex-basis: 50%;
6746 }
6747
6748 .flex-item-60-percent {
6749 flex-grow: 0;
6750 flex-shrink: 0;
6751 flex-basis: 60%;
6752 }
6753
6754 .flex-item-70-percent {
6755 flex-grow: 0;
6756 flex-shrink: 0;
6757 flex-basis: 70%;
6758 }
6759
6760 .flex-item-80-percent {
6761 flex-grow: 0;
6762 flex-shrink: 0;
6763 flex-basis: 80%;
6764 }
6765
6766 .well {
6767 min-height: 20px;
6768 padding: 19px;
6769 margin-bottom: 20px;
6770 background-color: #f5f5f5;
6771 border: 1px solid #e3e3e3;
6772 border-radius: 4px;
6773 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
6774 }
6775
6776 .break-wrap {
6777 word-wrap: break-word;
6778 }
6779 </style>
6780 <style>
6781 .textBox {
6782 position: absolute;
6783 bottom: 0px;
6784 width: 100%;
6785 }
6786 </style>
6787 <div>
6788 Debugging console is not yet implemented.<br>
6789 </div>
6790 </template>
6791 </polymer-element>
6792
6793 <polymer-element name="debugger-input" extends="observatory-element">
6794 <template>
6795 <style>/* Global styles */
6796 * {
6797 margin: 0;
6798 padding: 0;
6799 font: 400 14px 'Montserrat', sans-serif;
6800 color: #333;
6801 box-sizing: border-box;
6802 }
6803
6804 .content {
6805 padding-left: 10%;
6806 font: 400 14px 'Montserrat', sans-serif;
6807 }
6808
6809 .content-centered {
6810 padding-left: 10%;
6811 padding-right: 10%;
6812 font: 400 14px 'Montserrat', sans-serif;
6813 }
6814
6815 .content-centered-big {
6816 padding-left: 5%;
6817 padding-right: 5%;
6818 font: 400 14px 'Montserrat', sans-serif;
6819 }
6820
6821 h1 {
6822 font: 400 18px 'Montserrat', sans-serif;
6823 }
6824
6825 .memberList {
6826 display: table;
6827 }
6828
6829 .memberItem {
6830 display: table-row;
6831 }
6832
6833 .memberName, .memberValue {
6834 display: table-cell;
6835 vertical-align: top;
6836 padding: 3px 0 3px 1em;
6837 font: 400 14px 'Montserrat', sans-serif;
6838 }
6839
6840 .memberSmall {
6841 display: table-cell;
6842 vertical-align: top;
6843 padding: 3px 0 3px 1em;
6844 font: 400 12px 'Montserrat', sans-serif;
6845 }
6846
6847 .monospace {
6848 font-family: consolas, courier, monospace;
6849 font-size: 1em;
6850 line-height: 1.2em;
6851 white-space: nowrap;
6852 }
6853
6854 a {
6855 color: #0489c3;
6856 text-decoration: none;
6857 }
6858
6859 a:hover {
6860 text-decoration: underline;
6861 }
6862
6863 em {
6864 color: inherit;
6865 font-style: italic;
6866 }
6867
6868 b {
6869 color: inherit;
6870 font-weight: bold;
6871 }
6872
6873 hr {
6874 margin-top: 20px;
6875 margin-bottom: 20px;
6876 border: 0;
6877 border-top: 1px solid #eee;
6878 height: 0;
6879 box-sizing: content-box;
6880 }
6881
6882 .list-group {
6883 padding-left: 0;
6884 margin-bottom: 20px;
6885 }
6886
6887 .list-group-item {
6888 position: relative;
6889 display: block;
6890 padding: 10px 15px;
6891 margin-bottom: -1px;
6892 background-color: #fff;
6893 }
6894
6895 .list-group-item:first-child {
6896 /* rounded top corners */
6897 border-top-right-radius:4px;
6898 border-top-left-radius:4px;
6899 }
6900
6901 .list-group-item:last-child {
6902 margin-bottom: 0;
6903 /* rounded bottom corners */
6904 border-bottom-right-radius: 4px;
6905 border-bottom-left-radius:4px;
6906 }
6907
6908 /* Flex row container */
6909 .flex-row {
6910 display: flex;
6911 flex-direction: row;
6912 }
6913
6914 /* Flex column container */
6915 .flex-column {
6916 display: flex;
6917 flex-direction: column;
6918 }
6919
6920 .flex-item-fit {
6921 flex-grow: 1;
6922 flex-shrink: 1;
6923 flex-basis: auto;
6924 }
6925
6926 .flex-item-no-shrink {
6927 flex-grow: 0;
6928 flex-shrink: 0;
6929 flex-basis: auto;
6930 }
6931
6932 .flex-item-fill {
6933 flex-grow: 0;
6934 flex-shrink: 1; /* shrink when pressured */
6935 flex-basis: 100%; /* try and take 100% */
6936 }
6937
6938 .flex-item-fixed-1-12 {
6939 flex-grow: 0;
6940 flex-shrink: 0;
6941 flex-basis: 8.3%;
6942 }
6943
6944 .flex-item-fixed-2-12 {
6945 flex-grow: 0;
6946 flex-shrink: 0;
6947 flex-basis: 16.6%;
6948 }
6949
6950 .flex-item-fixed-4-12 {
6951 flex-grow: 0;
6952 flex-shrink: 0;
6953 flex-basis: 33.3333%;
6954 }
6955
6956 .flex-item-fixed-6-12, .flex-item-50-percent {
6957 flex-grow: 0;
6958 flex-shrink: 0;
6959 flex-basis: 50%;
6960 }
6961
6962 .flex-item-fixed-8-12 {
6963 flex-grow: 0;
6964 flex-shrink: 0;
6965 flex-basis: 66.6666%;
6966 }
6967
6968 .flex-item-fixed-9-12 {
6969 flex-grow: 0;
6970 flex-shrink: 0;
6971 flex-basis: 75%;
6972 }
6973
6974
6975 .flex-item-fixed-12-12 {
6976 flex-grow: 0;
6977 flex-shrink: 0;
6978 flex-basis: 100%;
6979 }
6980
6981 .flex-item-10-percent {
6982 flex-grow: 0;
6983 flex-shrink: 0;
6984 flex-basis: 10%;
6985 }
6986
6987 .flex-item-15-percent {
6988 flex-grow: 0;
6989 flex-shrink: 0;
6990 flex-basis: 15%;
6991 }
6992
6993 .flex-item-20-percent {
6994 flex-grow: 0;
6995 flex-shrink: 0;
6996 flex-basis: 20%;
6997 }
6998
6999 .flex-item-30-percent {
7000 flex-grow: 0;
7001 flex-shrink: 0;
7002 flex-basis: 30%;
7003 }
7004
7005 .flex-item-40-percent {
7006 flex-grow: 0;
7007 flex-shrink: 0;
7008 flex-basis: 40%;
7009 }
7010
7011 .flex-item-50-percent {
7012 flex-grow: 0;
7013 flex-shrink: 0;
7014 flex-basis: 50%;
7015 }
7016
7017 .flex-item-60-percent {
7018 flex-grow: 0;
7019 flex-shrink: 0;
7020 flex-basis: 60%;
7021 }
7022
7023 .flex-item-70-percent {
7024 flex-grow: 0;
7025 flex-shrink: 0;
7026 flex-basis: 70%;
7027 }
7028
7029 .flex-item-80-percent {
7030 flex-grow: 0;
7031 flex-shrink: 0;
7032 flex-basis: 80%;
7033 }
7034
7035 .well {
7036 min-height: 20px;
7037 padding: 19px;
7038 margin-bottom: 20px;
7039 background-color: #f5f5f5;
7040 border: 1px solid #e3e3e3;
7041 border-radius: 4px;
7042 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
7043 }
7044
7045 .break-wrap {
7046 word-wrap: break-word;
7047 }
7048 </style>
7049 <style>
7050 .textBox {
7051 font: 400 16px 'Montserrat', sans-serif;
7052 width: 100%;
7053 }
7054 </style>
7055 <input id="textBox" class="textBox" type="text" value="{{ text }}">
7056 </template>
7057 </polymer-element>
7058
7059
7060
7061
7062
7063
7064
7065 <polymer-element name="error-view" extends="observatory-element">
7066 <template>
7067 <style>/* Global styles */
7068 * {
7069 margin: 0;
7070 padding: 0;
7071 font: 400 14px 'Montserrat', sans-serif;
7072 color: #333;
7073 box-sizing: border-box;
7074 }
7075
7076 .content {
7077 padding-left: 10%;
7078 font: 400 14px 'Montserrat', sans-serif;
7079 }
7080
7081 .content-centered {
7082 padding-left: 10%;
7083 padding-right: 10%;
7084 font: 400 14px 'Montserrat', sans-serif;
7085 }
7086
7087 .content-centered-big {
7088 padding-left: 5%;
7089 padding-right: 5%;
7090 font: 400 14px 'Montserrat', sans-serif;
7091 }
7092
7093 h1 {
7094 font: 400 18px 'Montserrat', sans-serif;
7095 }
7096
7097 .memberList {
7098 display: table;
7099 }
7100
7101 .memberItem {
7102 display: table-row;
7103 }
7104
7105 .memberName, .memberValue {
7106 display: table-cell;
7107 vertical-align: top;
7108 padding: 3px 0 3px 1em;
7109 font: 400 14px 'Montserrat', sans-serif;
7110 }
7111
7112 .memberSmall {
7113 display: table-cell;
7114 vertical-align: top;
7115 padding: 3px 0 3px 1em;
7116 font: 400 12px 'Montserrat', sans-serif;
7117 }
7118
7119 .monospace {
7120 font-family: consolas, courier, monospace;
7121 font-size: 1em;
7122 line-height: 1.2em;
7123 white-space: nowrap;
7124 }
7125
7126 a {
7127 color: #0489c3;
7128 text-decoration: none;
7129 }
7130
7131 a:hover {
7132 text-decoration: underline;
7133 }
7134
7135 em {
7136 color: inherit;
7137 font-style: italic;
7138 }
7139
7140 b {
7141 color: inherit;
7142 font-weight: bold;
7143 }
7144
7145 hr {
7146 margin-top: 20px;
7147 margin-bottom: 20px;
7148 border: 0;
7149 border-top: 1px solid #eee;
7150 height: 0;
7151 box-sizing: content-box;
7152 }
7153
7154 .list-group {
7155 padding-left: 0;
7156 margin-bottom: 20px;
7157 }
7158
7159 .list-group-item {
7160 position: relative;
7161 display: block;
7162 padding: 10px 15px;
7163 margin-bottom: -1px;
7164 background-color: #fff;
7165 }
7166
7167 .list-group-item:first-child {
7168 /* rounded top corners */
7169 border-top-right-radius:4px;
7170 border-top-left-radius:4px;
7171 }
7172
7173 .list-group-item:last-child {
7174 margin-bottom: 0;
7175 /* rounded bottom corners */
7176 border-bottom-right-radius: 4px;
7177 border-bottom-left-radius:4px;
7178 }
7179
7180 /* Flex row container */
7181 .flex-row {
7182 display: flex;
7183 flex-direction: row;
7184 }
7185
7186 /* Flex column container */
7187 .flex-column {
7188 display: flex;
7189 flex-direction: column;
7190 }
7191
7192 .flex-item-fit {
7193 flex-grow: 1;
7194 flex-shrink: 1;
7195 flex-basis: auto;
7196 }
7197
7198 .flex-item-no-shrink {
7199 flex-grow: 0;
7200 flex-shrink: 0;
7201 flex-basis: auto;
7202 }
7203
7204 .flex-item-fill {
7205 flex-grow: 0;
7206 flex-shrink: 1; /* shrink when pressured */
7207 flex-basis: 100%; /* try and take 100% */
7208 }
7209
7210 .flex-item-fixed-1-12 {
7211 flex-grow: 0;
7212 flex-shrink: 0;
7213 flex-basis: 8.3%;
7214 }
7215
7216 .flex-item-fixed-2-12 {
7217 flex-grow: 0;
7218 flex-shrink: 0;
7219 flex-basis: 16.6%;
7220 }
7221
7222 .flex-item-fixed-4-12 {
7223 flex-grow: 0;
7224 flex-shrink: 0;
7225 flex-basis: 33.3333%;
7226 }
7227
7228 .flex-item-fixed-6-12, .flex-item-50-percent {
7229 flex-grow: 0;
7230 flex-shrink: 0;
7231 flex-basis: 50%;
7232 }
7233
7234 .flex-item-fixed-8-12 {
7235 flex-grow: 0;
7236 flex-shrink: 0;
7237 flex-basis: 66.6666%;
7238 }
7239
7240 .flex-item-fixed-9-12 {
7241 flex-grow: 0;
7242 flex-shrink: 0;
7243 flex-basis: 75%;
7244 }
7245
7246
7247 .flex-item-fixed-12-12 {
7248 flex-grow: 0;
7249 flex-shrink: 0;
7250 flex-basis: 100%;
7251 }
7252
7253 .flex-item-10-percent {
7254 flex-grow: 0;
7255 flex-shrink: 0;
7256 flex-basis: 10%;
7257 }
7258
7259 .flex-item-15-percent {
7260 flex-grow: 0;
7261 flex-shrink: 0;
7262 flex-basis: 15%;
7263 }
7264
7265 .flex-item-20-percent {
7266 flex-grow: 0;
7267 flex-shrink: 0;
7268 flex-basis: 20%;
7269 }
7270
7271 .flex-item-30-percent {
7272 flex-grow: 0;
7273 flex-shrink: 0;
7274 flex-basis: 30%;
7275 }
7276
7277 .flex-item-40-percent {
7278 flex-grow: 0;
7279 flex-shrink: 0;
7280 flex-basis: 40%;
7281 }
7282
7283 .flex-item-50-percent {
7284 flex-grow: 0;
7285 flex-shrink: 0;
7286 flex-basis: 50%;
7287 }
7288
7289 .flex-item-60-percent {
7290 flex-grow: 0;
7291 flex-shrink: 0;
7292 flex-basis: 60%;
7293 }
7294
7295 .flex-item-70-percent {
7296 flex-grow: 0;
7297 flex-shrink: 0;
7298 flex-basis: 70%;
7299 }
7300
7301 .flex-item-80-percent {
7302 flex-grow: 0;
7303 flex-shrink: 0;
7304 flex-basis: 80%;
7305 }
7306
7307 .well {
7308 min-height: 20px;
7309 padding: 19px;
7310 margin-bottom: 20px;
7311 background-color: #f5f5f5;
7312 border: 1px solid #e3e3e3;
7313 border-radius: 4px;
7314 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
7315 }
7316
7317 .break-wrap {
7318 word-wrap: break-word;
7319 }
7320 </style>
7321 <nav-bar>
7322 <top-nav-menu last="{{ true }}"></top-nav-menu>
7323 <nav-control></nav-control>
7324 </nav-bar>
7325 <div class="content-centered">
7326 <h1>{{ error.kind }}</h1>
7327 <br>
7328 <div class="well">{{ error.message }}</div>
7329 </div>
7330 </template>
7331 </polymer-element>
7332
7333
7334
7335
7336
7337
7338
7339
7340
7341
7342
7343
7344
7345
7346 <polymer-element name="field-view" extends="observatory-element">
7347 <template>
7348 <style>/* Global styles */
7349 * {
7350 margin: 0;
7351 padding: 0;
7352 font: 400 14px 'Montserrat', sans-serif;
7353 color: #333;
7354 box-sizing: border-box;
7355 }
7356
7357 .content {
7358 padding-left: 10%;
7359 font: 400 14px 'Montserrat', sans-serif;
7360 }
7361
7362 .content-centered {
7363 padding-left: 10%;
7364 padding-right: 10%;
7365 font: 400 14px 'Montserrat', sans-serif;
7366 }
7367
7368 .content-centered-big {
7369 padding-left: 5%;
7370 padding-right: 5%;
7371 font: 400 14px 'Montserrat', sans-serif;
7372 }
7373
7374 h1 {
7375 font: 400 18px 'Montserrat', sans-serif;
7376 }
7377
7378 .memberList {
7379 display: table;
7380 }
7381
7382 .memberItem {
7383 display: table-row;
7384 }
7385
7386 .memberName, .memberValue {
7387 display: table-cell;
7388 vertical-align: top;
7389 padding: 3px 0 3px 1em;
7390 font: 400 14px 'Montserrat', sans-serif;
7391 }
7392
7393 .memberSmall {
7394 display: table-cell;
7395 vertical-align: top;
7396 padding: 3px 0 3px 1em;
7397 font: 400 12px 'Montserrat', sans-serif;
7398 }
7399
7400 .monospace {
7401 font-family: consolas, courier, monospace;
7402 font-size: 1em;
7403 line-height: 1.2em;
7404 white-space: nowrap;
7405 }
7406
7407 a {
7408 color: #0489c3;
7409 text-decoration: none;
7410 }
7411
7412 a:hover {
7413 text-decoration: underline;
7414 }
7415
7416 em {
7417 color: inherit;
7418 font-style: italic;
7419 }
7420
7421 b {
7422 color: inherit;
7423 font-weight: bold;
7424 }
7425
7426 hr {
7427 margin-top: 20px;
7428 margin-bottom: 20px;
7429 border: 0;
7430 border-top: 1px solid #eee;
7431 height: 0;
7432 box-sizing: content-box;
7433 }
7434
7435 .list-group {
7436 padding-left: 0;
7437 margin-bottom: 20px;
7438 }
7439
7440 .list-group-item {
7441 position: relative;
7442 display: block;
7443 padding: 10px 15px;
7444 margin-bottom: -1px;
7445 background-color: #fff;
7446 }
7447
7448 .list-group-item:first-child {
7449 /* rounded top corners */
7450 border-top-right-radius:4px;
7451 border-top-left-radius:4px;
7452 }
7453
7454 .list-group-item:last-child {
7455 margin-bottom: 0;
7456 /* rounded bottom corners */
7457 border-bottom-right-radius: 4px;
7458 border-bottom-left-radius:4px;
7459 }
7460
7461 /* Flex row container */
7462 .flex-row {
7463 display: flex;
7464 flex-direction: row;
7465 }
7466
7467 /* Flex column container */
7468 .flex-column {
7469 display: flex;
7470 flex-direction: column;
7471 }
7472
7473 .flex-item-fit {
7474 flex-grow: 1;
7475 flex-shrink: 1;
7476 flex-basis: auto;
7477 }
7478
7479 .flex-item-no-shrink {
7480 flex-grow: 0;
7481 flex-shrink: 0;
7482 flex-basis: auto;
7483 }
7484
7485 .flex-item-fill {
7486 flex-grow: 0;
7487 flex-shrink: 1; /* shrink when pressured */
7488 flex-basis: 100%; /* try and take 100% */
7489 }
7490
7491 .flex-item-fixed-1-12 {
7492 flex-grow: 0;
7493 flex-shrink: 0;
7494 flex-basis: 8.3%;
7495 }
7496
7497 .flex-item-fixed-2-12 {
7498 flex-grow: 0;
7499 flex-shrink: 0;
7500 flex-basis: 16.6%;
7501 }
7502
7503 .flex-item-fixed-4-12 {
7504 flex-grow: 0;
7505 flex-shrink: 0;
7506 flex-basis: 33.3333%;
7507 }
7508
7509 .flex-item-fixed-6-12, .flex-item-50-percent {
7510 flex-grow: 0;
7511 flex-shrink: 0;
7512 flex-basis: 50%;
7513 }
7514
7515 .flex-item-fixed-8-12 {
7516 flex-grow: 0;
7517 flex-shrink: 0;
7518 flex-basis: 66.6666%;
7519 }
7520
7521 .flex-item-fixed-9-12 {
7522 flex-grow: 0;
7523 flex-shrink: 0;
7524 flex-basis: 75%;
7525 }
7526
7527
7528 .flex-item-fixed-12-12 {
7529 flex-grow: 0;
7530 flex-shrink: 0;
7531 flex-basis: 100%;
7532 }
7533
7534 .flex-item-10-percent {
7535 flex-grow: 0;
7536 flex-shrink: 0;
7537 flex-basis: 10%;
7538 }
7539
7540 .flex-item-15-percent {
7541 flex-grow: 0;
7542 flex-shrink: 0;
7543 flex-basis: 15%;
7544 }
7545
7546 .flex-item-20-percent {
7547 flex-grow: 0;
7548 flex-shrink: 0;
7549 flex-basis: 20%;
7550 }
7551
7552 .flex-item-30-percent {
7553 flex-grow: 0;
7554 flex-shrink: 0;
7555 flex-basis: 30%;
7556 }
7557
7558 .flex-item-40-percent {
7559 flex-grow: 0;
7560 flex-shrink: 0;
7561 flex-basis: 40%;
7562 }
7563
7564 .flex-item-50-percent {
7565 flex-grow: 0;
7566 flex-shrink: 0;
7567 flex-basis: 50%;
7568 }
7569
7570 .flex-item-60-percent {
7571 flex-grow: 0;
7572 flex-shrink: 0;
7573 flex-basis: 60%;
7574 }
7575
7576 .flex-item-70-percent {
7577 flex-grow: 0;
7578 flex-shrink: 0;
7579 flex-basis: 70%;
7580 }
7581
7582 .flex-item-80-percent {
7583 flex-grow: 0;
7584 flex-shrink: 0;
7585 flex-basis: 80%;
7586 }
7587
7588 .well {
7589 min-height: 20px;
7590 padding: 19px;
7591 margin-bottom: 20px;
7592 background-color: #f5f5f5;
7593 border: 1px solid #e3e3e3;
7594 border-radius: 4px;
7595 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
7596 }
7597
7598 .break-wrap {
7599 word-wrap: break-word;
7600 }
7601 </style>
7602 <nav-bar>
7603 <top-nav-menu></top-nav-menu>
7604 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu>
7605 <template if="{{ field.owner.type == 'Class' }}">
7606 <!-- TODO(turnidge): Add library nav menu here. -->
7607 <class-nav-menu cls="{{ field.owner }}"></class-nav-menu>
7608 </template>
7609 <template if="{{ field.owner.type == 'Library' }}">
7610 <library-nav-menu library="{{ field.owner }}"></library-nav-menu>
7611 </template>
7612 <nav-menu link="{{ field.link }}" anchor="{{ field.name }}" last="{{ true }}"></nav-menu>
7613 <nav-refresh callback="{{ refresh }}"></nav-refresh>
7614 <nav-control></nav-control>
7615 </nav-bar>
7616
7617 <div class="content">
7618 <h1>
7619 <template if="{{ field.isStatic }}">static</template>
7620 <template if="{{ field.isFinal }}">final</template>
7621 <template if="{{ field.isConst }}">const</template>
7622 <template if="{{ (field.declaredType.name == 'dynamic' &amp;&amp;
7623 !field.isFinal &amp;&amp; !field.isConst) }}">
7624 var
7625 </template>
7626 <template if="{{ (field.declaredType.name != 'dynamic') }}">
7627 {{ field.declaredType.name }}
7628 </template>
7629 {{ field.name }}
7630 </h1>
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>
7683 </polymer-element>
7684
7685
7686
7687
7688
7689
7690
7691 <polymer-element name="flag-list" extends="observatory-element">
7692 <template>
7693 <style>/* Global styles */
7694 * {
7695 margin: 0;
7696 padding: 0;
7697 font: 400 14px 'Montserrat', sans-serif;
7698 color: #333;
7699 box-sizing: border-box;
7700 }
7701
7702 .content {
7703 padding-left: 10%;
7704 font: 400 14px 'Montserrat', sans-serif;
7705 }
7706
7707 .content-centered {
7708 padding-left: 10%;
7709 padding-right: 10%;
7710 font: 400 14px 'Montserrat', sans-serif;
7711 }
7712
7713 .content-centered-big {
7714 padding-left: 5%;
7715 padding-right: 5%;
7716 font: 400 14px 'Montserrat', sans-serif;
7717 }
7718
7719 h1 {
7720 font: 400 18px 'Montserrat', sans-serif;
7721 }
7722
7723 .memberList {
7724 display: table;
7725 }
7726
7727 .memberItem {
7728 display: table-row;
7729 }
7730
7731 .memberName, .memberValue {
7732 display: table-cell;
7733 vertical-align: top;
7734 padding: 3px 0 3px 1em;
7735 font: 400 14px 'Montserrat', sans-serif;
7736 }
7737
7738 .memberSmall {
7739 display: table-cell;
7740 vertical-align: top;
7741 padding: 3px 0 3px 1em;
7742 font: 400 12px 'Montserrat', sans-serif;
7743 }
7744
7745 .monospace {
7746 font-family: consolas, courier, monospace;
7747 font-size: 1em;
7748 line-height: 1.2em;
7749 white-space: nowrap;
7750 }
7751
7752 a {
7753 color: #0489c3;
7754 text-decoration: none;
7755 }
7756
7757 a:hover {
7758 text-decoration: underline;
7759 }
7760
7761 em {
7762 color: inherit;
7763 font-style: italic;
7764 }
7765
7766 b {
7767 color: inherit;
7768 font-weight: bold;
7769 }
7770
7771 hr {
7772 margin-top: 20px;
7773 margin-bottom: 20px;
7774 border: 0;
7775 border-top: 1px solid #eee;
7776 height: 0;
7777 box-sizing: content-box;
7778 }
7779
7780 .list-group {
7781 padding-left: 0;
7782 margin-bottom: 20px;
7783 }
7784
7785 .list-group-item {
7786 position: relative;
7787 display: block;
7788 padding: 10px 15px;
7789 margin-bottom: -1px;
7790 background-color: #fff;
7791 }
7792
7793 .list-group-item:first-child {
7794 /* rounded top corners */
7795 border-top-right-radius:4px;
7796 border-top-left-radius:4px;
7797 }
7798
7799 .list-group-item:last-child {
7800 margin-bottom: 0;
7801 /* rounded bottom corners */
7802 border-bottom-right-radius: 4px;
7803 border-bottom-left-radius:4px;
7804 }
7805
7806 /* Flex row container */
7807 .flex-row {
7808 display: flex;
7809 flex-direction: row;
7810 }
7811
7812 /* Flex column container */
7813 .flex-column {
7814 display: flex;
7815 flex-direction: column;
7816 }
7817
7818 .flex-item-fit {
7819 flex-grow: 1;
7820 flex-shrink: 1;
7821 flex-basis: auto;
7822 }
7823
7824 .flex-item-no-shrink {
7825 flex-grow: 0;
7826 flex-shrink: 0;
7827 flex-basis: auto;
7828 }
7829
7830 .flex-item-fill {
7831 flex-grow: 0;
7832 flex-shrink: 1; /* shrink when pressured */
7833 flex-basis: 100%; /* try and take 100% */
7834 }
7835
7836 .flex-item-fixed-1-12 {
7837 flex-grow: 0;
7838 flex-shrink: 0;
7839 flex-basis: 8.3%;
7840 }
7841
7842 .flex-item-fixed-2-12 {
7843 flex-grow: 0;
7844 flex-shrink: 0;
7845 flex-basis: 16.6%;
7846 }
7847
7848 .flex-item-fixed-4-12 {
7849 flex-grow: 0;
7850 flex-shrink: 0;
7851 flex-basis: 33.3333%;
7852 }
7853
7854 .flex-item-fixed-6-12, .flex-item-50-percent {
7855 flex-grow: 0;
7856 flex-shrink: 0;
7857 flex-basis: 50%;
7858 }
7859
7860 .flex-item-fixed-8-12 {
7861 flex-grow: 0;
7862 flex-shrink: 0;
7863 flex-basis: 66.6666%;
7864 }
7865
7866 .flex-item-fixed-9-12 {
7867 flex-grow: 0;
7868 flex-shrink: 0;
7869 flex-basis: 75%;
7870 }
7871
7872
7873 .flex-item-fixed-12-12 {
7874 flex-grow: 0;
7875 flex-shrink: 0;
7876 flex-basis: 100%;
7877 }
7878
7879 .flex-item-10-percent {
7880 flex-grow: 0;
7881 flex-shrink: 0;
7882 flex-basis: 10%;
7883 }
7884
7885 .flex-item-15-percent {
7886 flex-grow: 0;
7887 flex-shrink: 0;
7888 flex-basis: 15%;
7889 }
7890
7891 .flex-item-20-percent {
7892 flex-grow: 0;
7893 flex-shrink: 0;
7894 flex-basis: 20%;
7895 }
7896
7897 .flex-item-30-percent {
7898 flex-grow: 0;
7899 flex-shrink: 0;
7900 flex-basis: 30%;
7901 }
7902
7903 .flex-item-40-percent {
7904 flex-grow: 0;
7905 flex-shrink: 0;
7906 flex-basis: 40%;
7907 }
7908
7909 .flex-item-50-percent {
7910 flex-grow: 0;
7911 flex-shrink: 0;
7912 flex-basis: 50%;
7913 }
7914
7915 .flex-item-60-percent {
7916 flex-grow: 0;
7917 flex-shrink: 0;
7918 flex-basis: 60%;
7919 }
7920
7921 .flex-item-70-percent {
7922 flex-grow: 0;
7923 flex-shrink: 0;
7924 flex-basis: 70%;
7925 }
7926
7927 .flex-item-80-percent {
7928 flex-grow: 0;
7929 flex-shrink: 0;
7930 flex-basis: 80%;
7931 }
7932
7933 .well {
7934 min-height: 20px;
7935 padding: 19px;
7936 margin-bottom: 20px;
7937 background-color: #f5f5f5;
7938 border: 1px solid #e3e3e3;
7939 border-radius: 4px;
7940 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
7941 }
7942
7943 .break-wrap {
7944 word-wrap: break-word;
7945 }
7946 </style>
7947 <nav-bar>
7948 <top-nav-menu></top-nav-menu>
7949 <nav-menu link="{{ flagList.vm.relativeLink('flags') }}" anchor="flags" la st="{{ true }}"></nav-menu>
7950 <nav-refresh callback="{{ refresh }}"></nav-refresh>
7951 <nav-control></nav-control>
7952 </nav-bar>
7953
7954 <div class="content-centered">
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>
7964
7965 <h1>Unmodified Flags</h1>
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>
7977
7978 </template>
7979 </polymer-element>
7980
7981 <polymer-element name="flag-item" extends="observatory-element">
7982 <template>
7983 <style>/* Global styles */
7984 * {
7985 margin: 0;
7986 padding: 0;
7987 font: 400 14px 'Montserrat', sans-serif;
7988 color: #333;
7989 box-sizing: border-box;
7990 }
7991
7992 .content {
7993 padding-left: 10%;
7994 font: 400 14px 'Montserrat', sans-serif;
7995 }
7996
7997 .content-centered {
7998 padding-left: 10%;
7999 padding-right: 10%;
8000 font: 400 14px 'Montserrat', sans-serif;
8001 }
8002
8003 .content-centered-big {
8004 padding-left: 5%;
8005 padding-right: 5%;
8006 font: 400 14px 'Montserrat', sans-serif;
8007 }
8008
8009 h1 {
8010 font: 400 18px 'Montserrat', sans-serif;
8011 }
8012
8013 .memberList {
8014 display: table;
8015 }
8016
8017 .memberItem {
8018 display: table-row;
8019 }
8020
8021 .memberName, .memberValue {
8022 display: table-cell;
8023 vertical-align: top;
8024 padding: 3px 0 3px 1em;
8025 font: 400 14px 'Montserrat', sans-serif;
8026 }
8027
8028 .memberSmall {
8029 display: table-cell;
8030 vertical-align: top;
8031 padding: 3px 0 3px 1em;
8032 font: 400 12px 'Montserrat', sans-serif;
8033 }
8034
8035 .monospace {
8036 font-family: consolas, courier, monospace;
8037 font-size: 1em;
8038 line-height: 1.2em;
8039 white-space: nowrap;
8040 }
8041
8042 a {
8043 color: #0489c3;
8044 text-decoration: none;
8045 }
8046
8047 a:hover {
8048 text-decoration: underline;
8049 }
8050
8051 em {
8052 color: inherit;
8053 font-style: italic;
8054 }
8055
8056 b {
8057 color: inherit;
8058 font-weight: bold;
8059 }
8060
8061 hr {
8062 margin-top: 20px;
8063 margin-bottom: 20px;
8064 border: 0;
8065 border-top: 1px solid #eee;
8066 height: 0;
8067 box-sizing: content-box;
8068 }
8069
8070 .list-group {
8071 padding-left: 0;
8072 margin-bottom: 20px;
8073 }
8074
8075 .list-group-item {
8076 position: relative;
8077 display: block;
8078 padding: 10px 15px;
8079 margin-bottom: -1px;
8080 background-color: #fff;
8081 }
8082
8083 .list-group-item:first-child {
8084 /* rounded top corners */
8085 border-top-right-radius:4px;
8086 border-top-left-radius:4px;
8087 }
8088
8089 .list-group-item:last-child {
8090 margin-bottom: 0;
8091 /* rounded bottom corners */
8092 border-bottom-right-radius: 4px;
8093 border-bottom-left-radius:4px;
8094 }
8095
8096 /* Flex row container */
8097 .flex-row {
8098 display: flex;
8099 flex-direction: row;
8100 }
8101
8102 /* Flex column container */
8103 .flex-column {
8104 display: flex;
8105 flex-direction: column;
8106 }
8107
8108 .flex-item-fit {
8109 flex-grow: 1;
8110 flex-shrink: 1;
8111 flex-basis: auto;
8112 }
8113
8114 .flex-item-no-shrink {
8115 flex-grow: 0;
8116 flex-shrink: 0;
8117 flex-basis: auto;
8118 }
8119
8120 .flex-item-fill {
8121 flex-grow: 0;
8122 flex-shrink: 1; /* shrink when pressured */
8123 flex-basis: 100%; /* try and take 100% */
8124 }
8125
8126 .flex-item-fixed-1-12 {
8127 flex-grow: 0;
8128 flex-shrink: 0;
8129 flex-basis: 8.3%;
8130 }
8131
8132 .flex-item-fixed-2-12 {
8133 flex-grow: 0;
8134 flex-shrink: 0;
8135 flex-basis: 16.6%;
8136 }
8137
8138 .flex-item-fixed-4-12 {
8139 flex-grow: 0;
8140 flex-shrink: 0;
8141 flex-basis: 33.3333%;
8142 }
8143
8144 .flex-item-fixed-6-12, .flex-item-50-percent {
8145 flex-grow: 0;
8146 flex-shrink: 0;
8147 flex-basis: 50%;
8148 }
8149
8150 .flex-item-fixed-8-12 {
8151 flex-grow: 0;
8152 flex-shrink: 0;
8153 flex-basis: 66.6666%;
8154 }
8155
8156 .flex-item-fixed-9-12 {
8157 flex-grow: 0;
8158 flex-shrink: 0;
8159 flex-basis: 75%;
8160 }
8161
8162
8163 .flex-item-fixed-12-12 {
8164 flex-grow: 0;
8165 flex-shrink: 0;
8166 flex-basis: 100%;
8167 }
8168
8169 .flex-item-10-percent {
8170 flex-grow: 0;
8171 flex-shrink: 0;
8172 flex-basis: 10%;
8173 }
8174
8175 .flex-item-15-percent {
8176 flex-grow: 0;
8177 flex-shrink: 0;
8178 flex-basis: 15%;
8179 }
8180
8181 .flex-item-20-percent {
8182 flex-grow: 0;
8183 flex-shrink: 0;
8184 flex-basis: 20%;
8185 }
8186
8187 .flex-item-30-percent {
8188 flex-grow: 0;
8189 flex-shrink: 0;
8190 flex-basis: 30%;
8191 }
8192
8193 .flex-item-40-percent {
8194 flex-grow: 0;
8195 flex-shrink: 0;
8196 flex-basis: 40%;
8197 }
8198
8199 .flex-item-50-percent {
8200 flex-grow: 0;
8201 flex-shrink: 0;
8202 flex-basis: 50%;
8203 }
8204
8205 .flex-item-60-percent {
8206 flex-grow: 0;
8207 flex-shrink: 0;
8208 flex-basis: 60%;
8209 }
8210
8211 .flex-item-70-percent {
8212 flex-grow: 0;
8213 flex-shrink: 0;
8214 flex-basis: 70%;
8215 }
8216
8217 .flex-item-80-percent {
8218 flex-grow: 0;
8219 flex-shrink: 0;
8220 flex-basis: 80%;
8221 }
8222
8223 .well {
8224 min-height: 20px;
8225 padding: 19px;
8226 margin-bottom: 20px;
8227 background-color: #f5f5f5;
8228 border: 1px solid #e3e3e3;
8229 border-radius: 4px;
8230 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
8231 }
8232
8233 .break-wrap {
8234 word-wrap: break-word;
8235 }
8236 </style>
8237 <span style="color:#aaa">// {{ flag['comment'] }}</span>
8238 <div style="padding: 3px 0">
8239 <b>{{ flag['name'] }}</b>
8240 &nbsp;=&nbsp;
8241 {{ flag['valueAsString'] }}
8242 </div>
8243 </template>
8244 </polymer-element>
8245
8246
8247
8248
8249
8250
8251
8252
8253
8254
8255
8256
8257
8258
8259 <polymer-element name="function-view" extends="observatory-element">
8260 <template>
8261 <style>/* Global styles */
8262 * {
8263 margin: 0;
8264 padding: 0;
8265 font: 400 14px 'Montserrat', sans-serif;
8266 color: #333;
8267 box-sizing: border-box;
8268 }
8269
8270 .content {
8271 padding-left: 10%;
8272 font: 400 14px 'Montserrat', sans-serif;
8273 }
8274
8275 .content-centered {
8276 padding-left: 10%;
8277 padding-right: 10%;
8278 font: 400 14px 'Montserrat', sans-serif;
8279 }
8280
8281 .content-centered-big {
8282 padding-left: 5%;
8283 padding-right: 5%;
8284 font: 400 14px 'Montserrat', sans-serif;
8285 }
8286
8287 h1 {
8288 font: 400 18px 'Montserrat', sans-serif;
8289 }
8290
8291 .memberList {
8292 display: table;
8293 }
8294
8295 .memberItem {
8296 display: table-row;
8297 }
8298
8299 .memberName, .memberValue {
8300 display: table-cell;
8301 vertical-align: top;
8302 padding: 3px 0 3px 1em;
8303 font: 400 14px 'Montserrat', sans-serif;
8304 }
8305
8306 .memberSmall {
8307 display: table-cell;
8308 vertical-align: top;
8309 padding: 3px 0 3px 1em;
8310 font: 400 12px 'Montserrat', sans-serif;
8311 }
8312
8313 .monospace {
8314 font-family: consolas, courier, monospace;
8315 font-size: 1em;
8316 line-height: 1.2em;
8317 white-space: nowrap;
8318 }
8319
8320 a {
8321 color: #0489c3;
8322 text-decoration: none;
8323 }
8324
8325 a:hover {
8326 text-decoration: underline;
8327 }
8328
8329 em {
8330 color: inherit;
8331 font-style: italic;
8332 }
8333
8334 b {
8335 color: inherit;
8336 font-weight: bold;
8337 }
8338
8339 hr {
8340 margin-top: 20px;
8341 margin-bottom: 20px;
8342 border: 0;
8343 border-top: 1px solid #eee;
8344 height: 0;
8345 box-sizing: content-box;
8346 }
8347
8348 .list-group {
8349 padding-left: 0;
8350 margin-bottom: 20px;
8351 }
8352
8353 .list-group-item {
8354 position: relative;
8355 display: block;
8356 padding: 10px 15px;
8357 margin-bottom: -1px;
8358 background-color: #fff;
8359 }
8360
8361 .list-group-item:first-child {
8362 /* rounded top corners */
8363 border-top-right-radius:4px;
8364 border-top-left-radius:4px;
8365 }
8366
8367 .list-group-item:last-child {
8368 margin-bottom: 0;
8369 /* rounded bottom corners */
8370 border-bottom-right-radius: 4px;
8371 border-bottom-left-radius:4px;
8372 }
8373
8374 /* Flex row container */
8375 .flex-row {
8376 display: flex;
8377 flex-direction: row;
8378 }
8379
8380 /* Flex column container */
8381 .flex-column {
8382 display: flex;
8383 flex-direction: column;
8384 }
8385
8386 .flex-item-fit {
8387 flex-grow: 1;
8388 flex-shrink: 1;
8389 flex-basis: auto;
8390 }
8391
8392 .flex-item-no-shrink {
8393 flex-grow: 0;
8394 flex-shrink: 0;
8395 flex-basis: auto;
8396 }
8397
8398 .flex-item-fill {
8399 flex-grow: 0;
8400 flex-shrink: 1; /* shrink when pressured */
8401 flex-basis: 100%; /* try and take 100% */
8402 }
8403
8404 .flex-item-fixed-1-12 {
8405 flex-grow: 0;
8406 flex-shrink: 0;
8407 flex-basis: 8.3%;
8408 }
8409
8410 .flex-item-fixed-2-12 {
8411 flex-grow: 0;
8412 flex-shrink: 0;
8413 flex-basis: 16.6%;
8414 }
8415
8416 .flex-item-fixed-4-12 {
8417 flex-grow: 0;
8418 flex-shrink: 0;
8419 flex-basis: 33.3333%;
8420 }
8421
8422 .flex-item-fixed-6-12, .flex-item-50-percent {
8423 flex-grow: 0;
8424 flex-shrink: 0;
8425 flex-basis: 50%;
8426 }
8427
8428 .flex-item-fixed-8-12 {
8429 flex-grow: 0;
8430 flex-shrink: 0;
8431 flex-basis: 66.6666%;
8432 }
8433
8434 .flex-item-fixed-9-12 {
8435 flex-grow: 0;
8436 flex-shrink: 0;
8437 flex-basis: 75%;
8438 }
8439
8440
8441 .flex-item-fixed-12-12 {
8442 flex-grow: 0;
8443 flex-shrink: 0;
8444 flex-basis: 100%;
8445 }
8446
8447 .flex-item-10-percent {
8448 flex-grow: 0;
8449 flex-shrink: 0;
8450 flex-basis: 10%;
8451 }
8452
8453 .flex-item-15-percent {
8454 flex-grow: 0;
8455 flex-shrink: 0;
8456 flex-basis: 15%;
8457 }
8458
8459 .flex-item-20-percent {
8460 flex-grow: 0;
8461 flex-shrink: 0;
8462 flex-basis: 20%;
8463 }
8464
8465 .flex-item-30-percent {
8466 flex-grow: 0;
8467 flex-shrink: 0;
8468 flex-basis: 30%;
8469 }
8470
8471 .flex-item-40-percent {
8472 flex-grow: 0;
8473 flex-shrink: 0;
8474 flex-basis: 40%;
8475 }
8476
8477 .flex-item-50-percent {
8478 flex-grow: 0;
8479 flex-shrink: 0;
8480 flex-basis: 50%;
8481 }
8482
8483 .flex-item-60-percent {
8484 flex-grow: 0;
8485 flex-shrink: 0;
8486 flex-basis: 60%;
8487 }
8488
8489 .flex-item-70-percent {
8490 flex-grow: 0;
8491 flex-shrink: 0;
8492 flex-basis: 70%;
8493 }
8494
8495 .flex-item-80-percent {
8496 flex-grow: 0;
8497 flex-shrink: 0;
8498 flex-basis: 80%;
8499 }
8500
8501 .well {
8502 min-height: 20px;
8503 padding: 19px;
8504 margin-bottom: 20px;
8505 background-color: #f5f5f5;
8506 border: 1px solid #e3e3e3;
8507 border-radius: 4px;
8508 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
8509 }
8510
8511 .break-wrap {
8512 word-wrap: break-word;
8513 }
8514 </style>
8515 <nav-bar>
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>
8527 <nav-refresh callback="{{ refresh }}"></nav-refresh>
8528 <nav-control></nav-control>
8529 </nav-bar>
8530
8531 <div class="content">
8532 <h1>function {{ function.qualifiedName }}</h1>
8533
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>
8569
8570 <div class="memberItem">&nbsp;</div>
8571
8572 <template if="{{ function.code != null }}">
8573 <div class="memberItem">
8574 <div class="memberName">optimized code</div>
8575 <div class="memberValue">
8576 <code-ref ref="{{ function.code }}"></code-ref>
8577 </div>
8578 </div>
8579 </template>
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>
8612 </div>
8613
8614 <hr>
8615 <script-inset script="{{ function.script }}" startpos="{{ function.tokenPos }}" endpos="{{ function.endTokenPos }}">
8616 </script-inset>
8617
8618 <br>
8619 </template>
8620 </polymer-element>
8621
8622
8623
8624
8625
8626
8627
8628
8629 <polymer-element name="heap-map" extends="observatory-element">
8630 <template>
8631 <style>/* Global styles */
8632 * {
8633 margin: 0;
8634 padding: 0;
8635 font: 400 14px 'Montserrat', sans-serif;
8636 color: #333;
8637 box-sizing: border-box;
8638 }
8639
8640 .content {
8641 padding-left: 10%;
8642 font: 400 14px 'Montserrat', sans-serif;
8643 }
8644
8645 .content-centered {
8646 padding-left: 10%;
8647 padding-right: 10%;
8648 font: 400 14px 'Montserrat', sans-serif;
8649 }
8650
8651 .content-centered-big {
8652 padding-left: 5%;
8653 padding-right: 5%;
8654 font: 400 14px 'Montserrat', sans-serif;
8655 }
8656
8657 h1 {
8658 font: 400 18px 'Montserrat', sans-serif;
8659 }
8660
8661 .memberList {
8662 display: table;
8663 }
8664
8665 .memberItem {
8666 display: table-row;
8667 }
8668
8669 .memberName, .memberValue {
8670 display: table-cell;
8671 vertical-align: top;
8672 padding: 3px 0 3px 1em;
8673 font: 400 14px 'Montserrat', sans-serif;
8674 }
8675
8676 .memberSmall {
8677 display: table-cell;
8678 vertical-align: top;
8679 padding: 3px 0 3px 1em;
8680 font: 400 12px 'Montserrat', sans-serif;
8681 }
8682
8683 .monospace {
8684 font-family: consolas, courier, monospace;
8685 font-size: 1em;
8686 line-height: 1.2em;
8687 white-space: nowrap;
8688 }
8689
8690 a {
8691 color: #0489c3;
8692 text-decoration: none;
8693 }
8694
8695 a:hover {
8696 text-decoration: underline;
8697 }
8698
8699 em {
8700 color: inherit;
8701 font-style: italic;
8702 }
8703
8704 b {
8705 color: inherit;
8706 font-weight: bold;
8707 }
8708
8709 hr {
8710 margin-top: 20px;
8711 margin-bottom: 20px;
8712 border: 0;
8713 border-top: 1px solid #eee;
8714 height: 0;
8715 box-sizing: content-box;
8716 }
8717
8718 .list-group {
8719 padding-left: 0;
8720 margin-bottom: 20px;
8721 }
8722
8723 .list-group-item {
8724 position: relative;
8725 display: block;
8726 padding: 10px 15px;
8727 margin-bottom: -1px;
8728 background-color: #fff;
8729 }
8730
8731 .list-group-item:first-child {
8732 /* rounded top corners */
8733 border-top-right-radius:4px;
8734 border-top-left-radius:4px;
8735 }
8736
8737 .list-group-item:last-child {
8738 margin-bottom: 0;
8739 /* rounded bottom corners */
8740 border-bottom-right-radius: 4px;
8741 border-bottom-left-radius:4px;
8742 }
8743
8744 /* Flex row container */
8745 .flex-row {
8746 display: flex;
8747 flex-direction: row;
8748 }
8749
8750 /* Flex column container */
8751 .flex-column {
8752 display: flex;
8753 flex-direction: column;
8754 }
8755
8756 .flex-item-fit {
8757 flex-grow: 1;
8758 flex-shrink: 1;
8759 flex-basis: auto;
8760 }
8761
8762 .flex-item-no-shrink {
8763 flex-grow: 0;
8764 flex-shrink: 0;
8765 flex-basis: auto;
8766 }
8767
8768 .flex-item-fill {
8769 flex-grow: 0;
8770 flex-shrink: 1; /* shrink when pressured */
8771 flex-basis: 100%; /* try and take 100% */
8772 }
8773
8774 .flex-item-fixed-1-12 {
8775 flex-grow: 0;
8776 flex-shrink: 0;
8777 flex-basis: 8.3%;
8778 }
8779
8780 .flex-item-fixed-2-12 {
8781 flex-grow: 0;
8782 flex-shrink: 0;
8783 flex-basis: 16.6%;
8784 }
8785
8786 .flex-item-fixed-4-12 {
8787 flex-grow: 0;
8788 flex-shrink: 0;
8789 flex-basis: 33.3333%;
8790 }
8791
8792 .flex-item-fixed-6-12, .flex-item-50-percent {
8793 flex-grow: 0;
8794 flex-shrink: 0;
8795 flex-basis: 50%;
8796 }
8797
8798 .flex-item-fixed-8-12 {
8799 flex-grow: 0;
8800 flex-shrink: 0;
8801 flex-basis: 66.6666%;
8802 }
8803
8804 .flex-item-fixed-9-12 {
8805 flex-grow: 0;
8806 flex-shrink: 0;
8807 flex-basis: 75%;
8808 }
8809
8810
8811 .flex-item-fixed-12-12 {
8812 flex-grow: 0;
8813 flex-shrink: 0;
8814 flex-basis: 100%;
8815 }
8816
8817 .flex-item-10-percent {
8818 flex-grow: 0;
8819 flex-shrink: 0;
8820 flex-basis: 10%;
8821 }
8822
8823 .flex-item-15-percent {
8824 flex-grow: 0;
8825 flex-shrink: 0;
8826 flex-basis: 15%;
8827 }
8828
8829 .flex-item-20-percent {
8830 flex-grow: 0;
8831 flex-shrink: 0;
8832 flex-basis: 20%;
8833 }
8834
8835 .flex-item-30-percent {
8836 flex-grow: 0;
8837 flex-shrink: 0;
8838 flex-basis: 30%;
8839 }
8840
8841 .flex-item-40-percent {
8842 flex-grow: 0;
8843 flex-shrink: 0;
8844 flex-basis: 40%;
8845 }
8846
8847 .flex-item-50-percent {
8848 flex-grow: 0;
8849 flex-shrink: 0;
8850 flex-basis: 50%;
8851 }
8852
8853 .flex-item-60-percent {
8854 flex-grow: 0;
8855 flex-shrink: 0;
8856 flex-basis: 60%;
8857 }
8858
8859 .flex-item-70-percent {
8860 flex-grow: 0;
8861 flex-shrink: 0;
8862 flex-basis: 70%;
8863 }
8864
8865 .flex-item-80-percent {
8866 flex-grow: 0;
8867 flex-shrink: 0;
8868 flex-basis: 80%;
8869 }
8870
8871 .well {
8872 min-height: 20px;
8873 padding: 19px;
8874 margin-bottom: 20px;
8875 background-color: #f5f5f5;
8876 border: 1px solid #e3e3e3;
8877 border-radius: 4px;
8878 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
8879 }
8880
8881 .break-wrap {
8882 word-wrap: break-word;
8883 }
8884 </style>
8885 <style>
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>
8915 </polymer-element>
8916
8917
8918
8919
8920
8921
8922
8923 <polymer-element name="io-view" extends="observatory-element">
8924 <template>
8925 <style>/* Global styles */
8926 * {
8927 margin: 0;
8928 padding: 0;
8929 font: 400 14px 'Montserrat', sans-serif;
8930 color: #333;
8931 box-sizing: border-box;
8932 }
8933
8934 .content {
8935 padding-left: 10%;
8936 font: 400 14px 'Montserrat', sans-serif;
8937 }
8938
8939 .content-centered {
8940 padding-left: 10%;
8941 padding-right: 10%;
8942 font: 400 14px 'Montserrat', sans-serif;
8943 }
8944
8945 .content-centered-big {
8946 padding-left: 5%;
8947 padding-right: 5%;
8948 font: 400 14px 'Montserrat', sans-serif;
8949 }
8950
8951 h1 {
8952 font: 400 18px 'Montserrat', sans-serif;
8953 }
8954
8955 .memberList {
8956 display: table;
8957 }
8958
8959 .memberItem {
8960 display: table-row;
8961 }
8962
8963 .memberName, .memberValue {
8964 display: table-cell;
8965 vertical-align: top;
8966 padding: 3px 0 3px 1em;
8967 font: 400 14px 'Montserrat', sans-serif;
8968 }
8969
8970 .memberSmall {
8971 display: table-cell;
8972 vertical-align: top;
8973 padding: 3px 0 3px 1em;
8974 font: 400 12px 'Montserrat', sans-serif;
8975 }
8976
8977 .monospace {
8978 font-family: consolas, courier, monospace;
8979 font-size: 1em;
8980 line-height: 1.2em;
8981 white-space: nowrap;
8982 }
8983
8984 a {
8985 color: #0489c3;
8986 text-decoration: none;
8987 }
8988
8989 a:hover {
8990 text-decoration: underline;
8991 }
8992
8993 em {
8994 color: inherit;
8995 font-style: italic;
8996 }
8997
8998 b {
8999 color: inherit;
9000 font-weight: bold;
9001 }
9002
9003 hr {
9004 margin-top: 20px;
9005 margin-bottom: 20px;
9006 border: 0;
9007 border-top: 1px solid #eee;
9008 height: 0;
9009 box-sizing: content-box;
9010 }
9011
9012 .list-group {
9013 padding-left: 0;
9014 margin-bottom: 20px;
9015 }
9016
9017 .list-group-item {
9018 position: relative;
9019 display: block;
9020 padding: 10px 15px;
9021 margin-bottom: -1px;
9022 background-color: #fff;
9023 }
9024
9025 .list-group-item:first-child {
9026 /* rounded top corners */
9027 border-top-right-radius:4px;
9028 border-top-left-radius:4px;
9029 }
9030
9031 .list-group-item:last-child {
9032 margin-bottom: 0;
9033 /* rounded bottom corners */
9034 border-bottom-right-radius: 4px;
9035 border-bottom-left-radius:4px;
9036 }
9037
9038 /* Flex row container */
9039 .flex-row {
9040 display: flex;
9041 flex-direction: row;
9042 }
9043
9044 /* Flex column container */
9045 .flex-column {
9046 display: flex;
9047 flex-direction: column;
9048 }
9049
9050 .flex-item-fit {
9051 flex-grow: 1;
9052 flex-shrink: 1;
9053 flex-basis: auto;
9054 }
9055
9056 .flex-item-no-shrink {
9057 flex-grow: 0;
9058 flex-shrink: 0;
9059 flex-basis: auto;
9060 }
9061
9062 .flex-item-fill {
9063 flex-grow: 0;
9064 flex-shrink: 1; /* shrink when pressured */
9065 flex-basis: 100%; /* try and take 100% */
9066 }
9067
9068 .flex-item-fixed-1-12 {
9069 flex-grow: 0;
9070 flex-shrink: 0;
9071 flex-basis: 8.3%;
9072 }
9073
9074 .flex-item-fixed-2-12 {
9075 flex-grow: 0;
9076 flex-shrink: 0;
9077 flex-basis: 16.6%;
9078 }
9079
9080 .flex-item-fixed-4-12 {
9081 flex-grow: 0;
9082 flex-shrink: 0;
9083 flex-basis: 33.3333%;
9084 }
9085
9086 .flex-item-fixed-6-12, .flex-item-50-percent {
9087 flex-grow: 0;
9088 flex-shrink: 0;
9089 flex-basis: 50%;
9090 }
9091
9092 .flex-item-fixed-8-12 {
9093 flex-grow: 0;
9094 flex-shrink: 0;
9095 flex-basis: 66.6666%;
9096 }
9097
9098 .flex-item-fixed-9-12 {
9099 flex-grow: 0;
9100 flex-shrink: 0;
9101 flex-basis: 75%;
9102 }
9103
9104
9105 .flex-item-fixed-12-12 {
9106 flex-grow: 0;
9107 flex-shrink: 0;
9108 flex-basis: 100%;
9109 }
9110
9111 .flex-item-10-percent {
9112 flex-grow: 0;
9113 flex-shrink: 0;
9114 flex-basis: 10%;
9115 }
9116
9117 .flex-item-15-percent {
9118 flex-grow: 0;
9119 flex-shrink: 0;
9120 flex-basis: 15%;
9121 }
9122
9123 .flex-item-20-percent {
9124 flex-grow: 0;
9125 flex-shrink: 0;
9126 flex-basis: 20%;
9127 }
9128
9129 .flex-item-30-percent {
9130 flex-grow: 0;
9131 flex-shrink: 0;
9132 flex-basis: 30%;
9133 }
9134
9135 .flex-item-40-percent {
9136 flex-grow: 0;
9137 flex-shrink: 0;
9138 flex-basis: 40%;
9139 }
9140
9141 .flex-item-50-percent {
9142 flex-grow: 0;
9143 flex-shrink: 0;
9144 flex-basis: 50%;
9145 }
9146
9147 .flex-item-60-percent {
9148 flex-grow: 0;
9149 flex-shrink: 0;
9150 flex-basis: 60%;
9151 }
9152
9153 .flex-item-70-percent {
9154 flex-grow: 0;
9155 flex-shrink: 0;
9156 flex-basis: 70%;
9157 }
9158
9159 .flex-item-80-percent {
9160 flex-grow: 0;
9161 flex-shrink: 0;
9162 flex-basis: 80%;
9163 }
9164
9165 .well {
9166 min-height: 20px;
9167 padding: 19px;
9168 margin-bottom: 20px;
9169 background-color: #f5f5f5;
9170 border: 1px solid #e3e3e3;
9171 border-radius: 4px;
9172 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
9173 }
9174
9175 .break-wrap {
9176 word-wrap: break-word;
9177 }
9178 </style>
9179
9180 <nav-bar>
9181 <top-nav-menu last="{{ true }}"></top-nav-menu>
9182 <nav-refresh callback="{{ refresh }}"></nav-refresh>
9183 <nav-control></nav-control>
9184 </nav-bar>
9185
9186 <div class="content">
9187 <h1>dart:io</h1>
9188
9189 <br>
9190
9191 <ul class="list-group">
9192 <li class="list-group-item">
9193 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /http/servers'))}}">HTTP Servers</a>
9194 </li>
9195 </ul>
9196
9197 <br>
9198
9199 <ul class="list-group">
9200 <li class="list-group-item">
9201 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /sockets'))}}">Sockets</a>
9202 </li>
9203 </ul>
9204
9205 <br>
9206
9207 <ul class="list-group">
9208 <li class="list-group-item">
9209 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /websockets'))}}">WebSockets</a>
9210 </li>
9211 </ul>
9212
9213 <br>
9214
9215 <ul class="list-group">
9216 <li class="list-group-item">
9217 <a on-click="{{ goto }}" _href="{{gotoLink(io.isolate.relativeLink('io /file/randomaccessfiles'))}}">Random Access Files</a>
9218 </li>
9219 </ul>
9220
9221 <br>
9222
9223 <ul class="list-group">
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
9229 </div>
9230 <br>
9231 <hr>
9232 </template>
9233 </polymer-element>
9234
9235 <polymer-element name="io-ref" extends="service-ref">
9236 <template>
9237 <style>/* Global styles */
9238 * {
9239 margin: 0;
9240 padding: 0;
9241 font: 400 14px 'Montserrat', sans-serif;
9242 color: #333;
9243 box-sizing: border-box;
9244 }
9245
9246 .content {
9247 padding-left: 10%;
9248 font: 400 14px 'Montserrat', sans-serif;
9249 }
9250
9251 .content-centered {
9252 padding-left: 10%;
9253 padding-right: 10%;
9254 font: 400 14px 'Montserrat', sans-serif;
9255 }
9256
9257 .content-centered-big {
9258 padding-left: 5%;
9259 padding-right: 5%;
9260 font: 400 14px 'Montserrat', sans-serif;
9261 }
9262
9263 h1 {
9264 font: 400 18px 'Montserrat', sans-serif;
9265 }
9266
9267 .memberList {
9268 display: table;
9269 }
9270
9271 .memberItem {
9272 display: table-row;
9273 }
9274
9275 .memberName, .memberValue {
9276 display: table-cell;
9277 vertical-align: top;
9278 padding: 3px 0 3px 1em;
9279 font: 400 14px 'Montserrat', sans-serif;
9280 }
9281
9282 .memberSmall {
9283 display: table-cell;
9284 vertical-align: top;
9285 padding: 3px 0 3px 1em;
9286 font: 400 12px 'Montserrat', sans-serif;
9287 }
9288
9289 .monospace {
9290 font-family: consolas, courier, monospace;
9291 font-size: 1em;
9292 line-height: 1.2em;
9293 white-space: nowrap;
9294 }
9295
9296 a {
9297 color: #0489c3;
9298 text-decoration: none;
9299 }
9300
9301 a:hover {
9302 text-decoration: underline;
9303 }
9304
9305 em {
9306 color: inherit;
9307 font-style: italic;
9308 }
9309
9310 b {
9311 color: inherit;
9312 font-weight: bold;
9313 }
9314
9315 hr {
9316 margin-top: 20px;
9317 margin-bottom: 20px;
9318 border: 0;
9319 border-top: 1px solid #eee;
9320 height: 0;
9321 box-sizing: content-box;
9322 }
9323
9324 .list-group {
9325 padding-left: 0;
9326 margin-bottom: 20px;
9327 }
9328
9329 .list-group-item {
9330 position: relative;
9331 display: block;
9332 padding: 10px 15px;
9333 margin-bottom: -1px;
9334 background-color: #fff;
9335 }
9336
9337 .list-group-item:first-child {
9338 /* rounded top corners */
9339 border-top-right-radius:4px;
9340 border-top-left-radius:4px;
9341 }
9342
9343 .list-group-item:last-child {
9344 margin-bottom: 0;
9345 /* rounded bottom corners */
9346 border-bottom-right-radius: 4px;
9347 border-bottom-left-radius:4px;
9348 }
9349
9350 /* Flex row container */
9351 .flex-row {
9352 display: flex;
9353 flex-direction: row;
9354 }
9355
9356 /* Flex column container */
9357 .flex-column {
9358 display: flex;
9359 flex-direction: column;
9360 }
9361
9362 .flex-item-fit {
9363 flex-grow: 1;
9364 flex-shrink: 1;
9365 flex-basis: auto;
9366 }
9367
9368 .flex-item-no-shrink {
9369 flex-grow: 0;
9370 flex-shrink: 0;
9371 flex-basis: auto;
9372 }
9373
9374 .flex-item-fill {
9375 flex-grow: 0;
9376 flex-shrink: 1; /* shrink when pressured */
9377 flex-basis: 100%; /* try and take 100% */
9378 }
9379
9380 .flex-item-fixed-1-12 {
9381 flex-grow: 0;
9382 flex-shrink: 0;
9383 flex-basis: 8.3%;
9384 }
9385
9386 .flex-item-fixed-2-12 {
9387 flex-grow: 0;
9388 flex-shrink: 0;
9389 flex-basis: 16.6%;
9390 }
9391
9392 .flex-item-fixed-4-12 {
9393 flex-grow: 0;
9394 flex-shrink: 0;
9395 flex-basis: 33.3333%;
9396 }
9397
9398 .flex-item-fixed-6-12, .flex-item-50-percent {
9399 flex-grow: 0;
9400 flex-shrink: 0;
9401 flex-basis: 50%;
9402 }
9403
9404 .flex-item-fixed-8-12 {
9405 flex-grow: 0;
9406 flex-shrink: 0;
9407 flex-basis: 66.6666%;
9408 }
9409
9410 .flex-item-fixed-9-12 {
9411 flex-grow: 0;
9412 flex-shrink: 0;
9413 flex-basis: 75%;
9414 }
9415
9416
9417 .flex-item-fixed-12-12 {
9418 flex-grow: 0;
9419 flex-shrink: 0;
9420 flex-basis: 100%;
9421 }
9422
9423 .flex-item-10-percent {
9424 flex-grow: 0;
9425 flex-shrink: 0;
9426 flex-basis: 10%;
9427 }
9428
9429 .flex-item-15-percent {
9430 flex-grow: 0;
9431 flex-shrink: 0;
9432 flex-basis: 15%;
9433 }
9434
9435 .flex-item-20-percent {
9436 flex-grow: 0;
9437 flex-shrink: 0;
9438 flex-basis: 20%;
9439 }
9440
9441 .flex-item-30-percent {
9442 flex-grow: 0;
9443 flex-shrink: 0;
9444 flex-basis: 30%;
9445 }
9446
9447 .flex-item-40-percent {
9448 flex-grow: 0;
9449 flex-shrink: 0;
9450 flex-basis: 40%;
9451 }
9452
9453 .flex-item-50-percent {
9454 flex-grow: 0;
9455 flex-shrink: 0;
9456 flex-basis: 50%;
9457 }
9458
9459 .flex-item-60-percent {
9460 flex-grow: 0;
9461 flex-shrink: 0;
9462 flex-basis: 60%;
9463 }
9464
9465 .flex-item-70-percent {
9466 flex-grow: 0;
9467 flex-shrink: 0;
9468 flex-basis: 70%;
9469 }
9470
9471 .flex-item-80-percent {
9472 flex-grow: 0;
9473 flex-shrink: 0;
9474 flex-basis: 80%;
9475 }
9476
9477 .well {
9478 min-height: 20px;
9479 padding: 19px;
9480 margin-bottom: 20px;
9481 background-color: #f5f5f5;
9482 border: 1px solid #e3e3e3;
9483 border-radius: 4px;
9484 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
9485 }
9486
9487 .break-wrap {
9488 word-wrap: break-word;
9489 }
9490 </style>
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>
9506 </template>
9507 </polymer-element>
9508
9509 <polymer-element name="io-http-server-list-view" extends="observatory-element">
9510 <template>
9511 <style>/* Global styles */
9512 * {
9513 margin: 0;
9514 padding: 0;
9515 font: 400 14px 'Montserrat', sans-serif;
9516 color: #333;
9517 box-sizing: border-box;
9518 }
9519
9520 .content {
9521 padding-left: 10%;
9522 font: 400 14px 'Montserrat', sans-serif;
9523 }
9524
9525 .content-centered {
9526 padding-left: 10%;
9527 padding-right: 10%;
9528 font: 400 14px 'Montserrat', sans-serif;
9529 }
9530
9531 .content-centered-big {
9532 padding-left: 5%;
9533 padding-right: 5%;
9534 font: 400 14px 'Montserrat', sans-serif;
9535 }
9536
9537 h1 {
9538 font: 400 18px 'Montserrat', sans-serif;
9539 }
9540
9541 .memberList {
9542 display: table;
9543 }
9544
9545 .memberItem {
9546 display: table-row;
9547 }
9548
9549 .memberName, .memberValue {
9550 display: table-cell;
9551 vertical-align: top;
9552 padding: 3px 0 3px 1em;
9553 font: 400 14px 'Montserrat', sans-serif;
9554 }
9555
9556 .memberSmall {
9557 display: table-cell;
9558 vertical-align: top;
9559 padding: 3px 0 3px 1em;
9560 font: 400 12px 'Montserrat', sans-serif;
9561 }
9562
9563 .monospace {
9564 font-family: consolas, courier, monospace;
9565 font-size: 1em;
9566 line-height: 1.2em;
9567 white-space: nowrap;
9568 }
9569
9570 a {
9571 color: #0489c3;
9572 text-decoration: none;
9573 }
9574
9575 a:hover {
9576 text-decoration: underline;
9577 }
9578
9579 em {
9580 color: inherit;
9581 font-style: italic;
9582 }
9583
9584 b {
9585 color: inherit;
9586 font-weight: bold;
9587 }
9588
9589 hr {
9590 margin-top: 20px;
9591 margin-bottom: 20px;
9592 border: 0;
9593 border-top: 1px solid #eee;
9594 height: 0;
9595 box-sizing: content-box;
9596 }
9597
9598 .list-group {
9599 padding-left: 0;
9600 margin-bottom: 20px;
9601 }
9602
9603 .list-group-item {
9604 position: relative;
9605 display: block;
9606 padding: 10px 15px;
9607 margin-bottom: -1px;
9608 background-color: #fff;
9609 }
9610
9611 .list-group-item:first-child {
9612 /* rounded top corners */
9613 border-top-right-radius:4px;
9614 border-top-left-radius:4px;
9615 }
9616
9617 .list-group-item:last-child {
9618 margin-bottom: 0;
9619 /* rounded bottom corners */
9620 border-bottom-right-radius: 4px;
9621 border-bottom-left-radius:4px;
9622 }
9623
9624 /* Flex row container */
9625 .flex-row {
9626 display: flex;
9627 flex-direction: row;
9628 }
9629
9630 /* Flex column container */
9631 .flex-column {
9632 display: flex;
9633 flex-direction: column;
9634 }
9635
9636 .flex-item-fit {
9637 flex-grow: 1;
9638 flex-shrink: 1;
9639 flex-basis: auto;
9640 }
9641
9642 .flex-item-no-shrink {
9643 flex-grow: 0;
9644 flex-shrink: 0;
9645 flex-basis: auto;
9646 }
9647
9648 .flex-item-fill {
9649 flex-grow: 0;
9650 flex-shrink: 1; /* shrink when pressured */
9651 flex-basis: 100%; /* try and take 100% */
9652 }
9653
9654 .flex-item-fixed-1-12 {
9655 flex-grow: 0;
9656 flex-shrink: 0;
9657 flex-basis: 8.3%;
9658 }
9659
9660 .flex-item-fixed-2-12 {
9661 flex-grow: 0;
9662 flex-shrink: 0;
9663 flex-basis: 16.6%;
9664 }
9665
9666 .flex-item-fixed-4-12 {
9667 flex-grow: 0;
9668 flex-shrink: 0;
9669 flex-basis: 33.3333%;
9670 }
9671
9672 .flex-item-fixed-6-12, .flex-item-50-percent {
9673 flex-grow: 0;
9674 flex-shrink: 0;
9675 flex-basis: 50%;
9676 }
9677
9678 .flex-item-fixed-8-12 {
9679 flex-grow: 0;
9680 flex-shrink: 0;
9681 flex-basis: 66.6666%;
9682 }
9683
9684 .flex-item-fixed-9-12 {
9685 flex-grow: 0;
9686 flex-shrink: 0;
9687 flex-basis: 75%;
9688 }
9689
9690
9691 .flex-item-fixed-12-12 {
9692 flex-grow: 0;
9693 flex-shrink: 0;
9694 flex-basis: 100%;
9695 }
9696
9697 .flex-item-10-percent {
9698 flex-grow: 0;
9699 flex-shrink: 0;
9700 flex-basis: 10%;
9701 }
9702
9703 .flex-item-15-percent {
9704 flex-grow: 0;
9705 flex-shrink: 0;
9706 flex-basis: 15%;
9707 }
9708
9709 .flex-item-20-percent {
9710 flex-grow: 0;
9711 flex-shrink: 0;
9712 flex-basis: 20%;
9713 }
9714
9715 .flex-item-30-percent {
9716 flex-grow: 0;
9717 flex-shrink: 0;
9718 flex-basis: 30%;
9719 }
9720
9721 .flex-item-40-percent {
9722 flex-grow: 0;
9723 flex-shrink: 0;
9724 flex-basis: 40%;
9725 }
9726
9727 .flex-item-50-percent {
9728 flex-grow: 0;
9729 flex-shrink: 0;
9730 flex-basis: 50%;
9731 }
9732
9733 .flex-item-60-percent {
9734 flex-grow: 0;
9735 flex-shrink: 0;
9736 flex-basis: 60%;
9737 }
9738
9739 .flex-item-70-percent {
9740 flex-grow: 0;
9741 flex-shrink: 0;
9742 flex-basis: 70%;
9743 }
9744
9745 .flex-item-80-percent {
9746 flex-grow: 0;
9747 flex-shrink: 0;
9748 flex-basis: 80%;
9749 }
9750
9751 .well {
9752 min-height: 20px;
9753 padding: 19px;
9754 margin-bottom: 20px;
9755 background-color: #f5f5f5;
9756 border: 1px solid #e3e3e3;
9757 border-radius: 4px;
9758 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
9759 }
9760
9761 .break-wrap {
9762 word-wrap: break-word;
9763 }
9764 </style>
9765
9766 <nav-bar>
9767 <top-nav-menu last="{{ true }}"></top-nav-menu>
9768 <nav-refresh callback="{{ refresh }}"></nav-refresh>
9769 </nav-bar>
9770
9771 <div class="content">
9772 <h1>HttpServers</h1>
9773
9774 <br>
9775
9776 <ul class="list-group">
9777 <template repeat="{{ httpServer in list['members'] }}">
9778 <li class="list-group-item">
9779 <io-http-server-ref ref="{{ httpServer }}"></io-http-server-ref>
9780 </li>
9781 </template>
9782 </ul>
9783 </div>
9784 <br>
9785 <hr>
9786 </template>
9787 </polymer-element>
9788
9789 <polymer-element name="io-http-server-ref" extends="service-ref">
9790 <template>
9791 <style>/* Global styles */
9792 * {
9793 margin: 0;
9794 padding: 0;
9795 font: 400 14px 'Montserrat', sans-serif;
9796 color: #333;
9797 box-sizing: border-box;
9798 }
9799
9800 .content {
9801 padding-left: 10%;
9802 font: 400 14px 'Montserrat', sans-serif;
9803 }
9804
9805 .content-centered {
9806 padding-left: 10%;
9807 padding-right: 10%;
9808 font: 400 14px 'Montserrat', sans-serif;
9809 }
9810
9811 .content-centered-big {
9812 padding-left: 5%;
9813 padding-right: 5%;
9814 font: 400 14px 'Montserrat', sans-serif;
9815 }
9816
9817 h1 {
9818 font: 400 18px 'Montserrat', sans-serif;
9819 }
9820
9821 .memberList {
9822 display: table;
9823 }
9824
9825 .memberItem {
9826 display: table-row;
9827 }
9828
9829 .memberName, .memberValue {
9830 display: table-cell;
9831 vertical-align: top;
9832 padding: 3px 0 3px 1em;
9833 font: 400 14px 'Montserrat', sans-serif;
9834 }
9835
9836 .memberSmall {
9837 display: table-cell;
9838 vertical-align: top;
9839 padding: 3px 0 3px 1em;
9840 font: 400 12px 'Montserrat', sans-serif;
9841 }
9842
9843 .monospace {
9844 font-family: consolas, courier, monospace;
9845 font-size: 1em;
9846 line-height: 1.2em;
9847 white-space: nowrap;
9848 }
9849
9850 a {
9851 color: #0489c3;
9852 text-decoration: none;
9853 }
9854
9855 a:hover {
9856 text-decoration: underline;
9857 }
9858
9859 em {
9860 color: inherit;
9861 font-style: italic;
9862 }
9863
9864 b {
9865 color: inherit;
9866 font-weight: bold;
9867 }
9868
9869 hr {
9870 margin-top: 20px;
9871 margin-bottom: 20px;
9872 border: 0;
9873 border-top: 1px solid #eee;
9874 height: 0;
9875 box-sizing: content-box;
9876 }
9877
9878 .list-group {
9879 padding-left: 0;
9880 margin-bottom: 20px;
9881 }
9882
9883 .list-group-item {
9884 position: relative;
9885 display: block;
9886 padding: 10px 15px;
9887 margin-bottom: -1px;
9888 background-color: #fff;
9889 }
9890
9891 .list-group-item:first-child {
9892 /* rounded top corners */
9893 border-top-right-radius:4px;
9894 border-top-left-radius:4px;
9895 }
9896
9897 .list-group-item:last-child {
9898 margin-bottom: 0;
9899 /* rounded bottom corners */
9900 border-bottom-right-radius: 4px;
9901 border-bottom-left-radius:4px;
9902 }
9903
9904 /* Flex row container */
9905 .flex-row {
9906 display: flex;
9907 flex-direction: row;
9908 }
9909
9910 /* Flex column container */
9911 .flex-column {
9912 display: flex;
9913 flex-direction: column;
9914 }
9915
9916 .flex-item-fit {
9917 flex-grow: 1;
9918 flex-shrink: 1;
9919 flex-basis: auto;
9920 }
9921
9922 .flex-item-no-shrink {
9923 flex-grow: 0;
9924 flex-shrink: 0;
9925 flex-basis: auto;
9926 }
9927
9928 .flex-item-fill {
9929 flex-grow: 0;
9930 flex-shrink: 1; /* shrink when pressured */
9931 flex-basis: 100%; /* try and take 100% */
9932 }
9933
9934 .flex-item-fixed-1-12 {
9935 flex-grow: 0;
9936 flex-shrink: 0;
9937 flex-basis: 8.3%;
9938 }
9939
9940 .flex-item-fixed-2-12 {
9941 flex-grow: 0;
9942 flex-shrink: 0;
9943 flex-basis: 16.6%;
9944 }
9945
9946 .flex-item-fixed-4-12 {
9947 flex-grow: 0;
9948 flex-shrink: 0;
9949 flex-basis: 33.3333%;
9950 }
9951
9952 .flex-item-fixed-6-12, .flex-item-50-percent {
9953 flex-grow: 0;
9954 flex-shrink: 0;
9955 flex-basis: 50%;
9956 }
9957
9958 .flex-item-fixed-8-12 {
9959 flex-grow: 0;
9960 flex-shrink: 0;
9961 flex-basis: 66.6666%;
9962 }
9963
9964 .flex-item-fixed-9-12 {
9965 flex-grow: 0;
9966 flex-shrink: 0;
9967 flex-basis: 75%;
9968 }
9969
9970
9971 .flex-item-fixed-12-12 {
9972 flex-grow: 0;
9973 flex-shrink: 0;
9974 flex-basis: 100%;
9975 }
9976
9977 .flex-item-10-percent {
9978 flex-grow: 0;
9979 flex-shrink: 0;
9980 flex-basis: 10%;
9981 }
9982
9983 .flex-item-15-percent {
9984 flex-grow: 0;
9985 flex-shrink: 0;
9986 flex-basis: 15%;
9987 }
9988
9989 .flex-item-20-percent {
9990 flex-grow: 0;
9991 flex-shrink: 0;
9992 flex-basis: 20%;
9993 }
9994
9995 .flex-item-30-percent {
9996 flex-grow: 0;
9997 flex-shrink: 0;
9998 flex-basis: 30%;
9999 }
10000
10001 .flex-item-40-percent {
10002 flex-grow: 0;
10003 flex-shrink: 0;
10004 flex-basis: 40%;
10005 }
10006
10007 .flex-item-50-percent {
10008 flex-grow: 0;
10009 flex-shrink: 0;
10010 flex-basis: 50%;
10011 }
10012
10013 .flex-item-60-percent {
10014 flex-grow: 0;
10015 flex-shrink: 0;
10016 flex-basis: 60%;
10017 }
10018
10019 .flex-item-70-percent {
10020 flex-grow: 0;
10021 flex-shrink: 0;
10022 flex-basis: 70%;
10023 }
10024
10025 .flex-item-80-percent {
10026 flex-grow: 0;
10027 flex-shrink: 0;
10028 flex-basis: 80%;
10029 }
10030
10031 .well {
10032 min-height: 20px;
10033 padding: 19px;
10034 margin-bottom: 20px;
10035 background-color: #f5f5f5;
10036 border: 1px solid #e3e3e3;
10037 border-radius: 4px;
10038 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
10039 }
10040
10041 .break-wrap {
10042 word-wrap: break-word;
10043 }
10044 </style>
10045 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
10046 </template>
10047 </polymer-element>
10048
10049 <polymer-element name="io-http-server-view" extends="observatory-element">
10050 <template>
10051 <style>/* Global styles */
10052 * {
10053 margin: 0;
10054 padding: 0;
10055 font: 400 14px 'Montserrat', sans-serif;
10056 color: #333;
10057 box-sizing: border-box;
10058 }
10059
10060 .content {
10061 padding-left: 10%;
10062 font: 400 14px 'Montserrat', sans-serif;
10063 }
10064
10065 .content-centered {
10066 padding-left: 10%;
10067 padding-right: 10%;
10068 font: 400 14px 'Montserrat', sans-serif;
10069 }
10070
10071 .content-centered-big {
10072 padding-left: 5%;
10073 padding-right: 5%;
10074 font: 400 14px 'Montserrat', sans-serif;
10075 }
10076
10077 h1 {
10078 font: 400 18px 'Montserrat', sans-serif;
10079 }
10080
10081 .memberList {
10082 display: table;
10083 }
10084
10085 .memberItem {
10086 display: table-row;
10087 }
10088
10089 .memberName, .memberValue {
10090 display: table-cell;
10091 vertical-align: top;
10092 padding: 3px 0 3px 1em;
10093 font: 400 14px 'Montserrat', sans-serif;
10094 }
10095
10096 .memberSmall {
10097 display: table-cell;
10098 vertical-align: top;
10099 padding: 3px 0 3px 1em;
10100 font: 400 12px 'Montserrat', sans-serif;
10101 }
10102
10103 .monospace {
10104 font-family: consolas, courier, monospace;
10105 font-size: 1em;
10106 line-height: 1.2em;
10107 white-space: nowrap;
10108 }
10109
10110 a {
10111 color: #0489c3;
10112 text-decoration: none;
10113 }
10114
10115 a:hover {
10116 text-decoration: underline;
10117 }
10118
10119 em {
10120 color: inherit;
10121 font-style: italic;
10122 }
10123
10124 b {
10125 color: inherit;
10126 font-weight: bold;
10127 }
10128
10129 hr {
10130 margin-top: 20px;
10131 margin-bottom: 20px;
10132 border: 0;
10133 border-top: 1px solid #eee;
10134 height: 0;
10135 box-sizing: content-box;
10136 }
10137
10138 .list-group {
10139 padding-left: 0;
10140 margin-bottom: 20px;
10141 }
10142
10143 .list-group-item {
10144 position: relative;
10145 display: block;
10146 padding: 10px 15px;
10147 margin-bottom: -1px;
10148 background-color: #fff;
10149 }
10150
10151 .list-group-item:first-child {
10152 /* rounded top corners */
10153 border-top-right-radius:4px;
10154 border-top-left-radius:4px;
10155 }
10156
10157 .list-group-item:last-child {
10158 margin-bottom: 0;
10159 /* rounded bottom corners */
10160 border-bottom-right-radius: 4px;
10161 border-bottom-left-radius:4px;
10162 }
10163
10164 /* Flex row container */
10165 .flex-row {
10166 display: flex;
10167 flex-direction: row;
10168 }
10169
10170 /* Flex column container */
10171 .flex-column {
10172 display: flex;
10173 flex-direction: column;
10174 }
10175
10176 .flex-item-fit {
10177 flex-grow: 1;
10178 flex-shrink: 1;
10179 flex-basis: auto;
10180 }
10181
10182 .flex-item-no-shrink {
10183 flex-grow: 0;
10184 flex-shrink: 0;
10185 flex-basis: auto;
10186 }
10187
10188 .flex-item-fill {
10189 flex-grow: 0;
10190 flex-shrink: 1; /* shrink when pressured */
10191 flex-basis: 100%; /* try and take 100% */
10192 }
10193
10194 .flex-item-fixed-1-12 {
10195 flex-grow: 0;
10196 flex-shrink: 0;
10197 flex-basis: 8.3%;
10198 }
10199
10200 .flex-item-fixed-2-12 {
10201 flex-grow: 0;
10202 flex-shrink: 0;
10203 flex-basis: 16.6%;
10204 }
10205
10206 .flex-item-fixed-4-12 {
10207 flex-grow: 0;
10208 flex-shrink: 0;
10209 flex-basis: 33.3333%;
10210 }
10211
10212 .flex-item-fixed-6-12, .flex-item-50-percent {
10213 flex-grow: 0;
10214 flex-shrink: 0;
10215 flex-basis: 50%;
10216 }
10217
10218 .flex-item-fixed-8-12 {
10219 flex-grow: 0;
10220 flex-shrink: 0;
10221 flex-basis: 66.6666%;
10222 }
10223
10224 .flex-item-fixed-9-12 {
10225 flex-grow: 0;
10226 flex-shrink: 0;
10227 flex-basis: 75%;
10228 }
10229
10230
10231 .flex-item-fixed-12-12 {
10232 flex-grow: 0;
10233 flex-shrink: 0;
10234 flex-basis: 100%;
10235 }
10236
10237 .flex-item-10-percent {
10238 flex-grow: 0;
10239 flex-shrink: 0;
10240 flex-basis: 10%;
10241 }
10242
10243 .flex-item-15-percent {
10244 flex-grow: 0;
10245 flex-shrink: 0;
10246 flex-basis: 15%;
10247 }
10248
10249 .flex-item-20-percent {
10250 flex-grow: 0;
10251 flex-shrink: 0;
10252 flex-basis: 20%;
10253 }
10254
10255 .flex-item-30-percent {
10256 flex-grow: 0;
10257 flex-shrink: 0;
10258 flex-basis: 30%;
10259 }
10260
10261 .flex-item-40-percent {
10262 flex-grow: 0;
10263 flex-shrink: 0;
10264 flex-basis: 40%;
10265 }
10266
10267 .flex-item-50-percent {
10268 flex-grow: 0;
10269 flex-shrink: 0;
10270 flex-basis: 50%;
10271 }
10272
10273 .flex-item-60-percent {
10274 flex-grow: 0;
10275 flex-shrink: 0;
10276 flex-basis: 60%;
10277 }
10278
10279 .flex-item-70-percent {
10280 flex-grow: 0;
10281 flex-shrink: 0;
10282 flex-basis: 70%;
10283 }
10284
10285 .flex-item-80-percent {
10286 flex-grow: 0;
10287 flex-shrink: 0;
10288 flex-basis: 80%;
10289 }
10290
10291 .well {
10292 min-height: 20px;
10293 padding: 19px;
10294 margin-bottom: 20px;
10295 background-color: #f5f5f5;
10296 border: 1px solid #e3e3e3;
10297 border-radius: 4px;
10298 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
10299 }
10300
10301 .break-wrap {
10302 word-wrap: break-word;
10303 }
10304 </style>
10305
10306 <nav-bar>
10307 <top-nav-menu last="{{ true }}"></top-nav-menu>
10308 <nav-refresh callback="{{ refresh }}"></nav-refresh>
10309 </nav-bar>
10310
10311 <div class="content">
10312 <h1>HttpServer</h1>
10313
10314 <br>
10315
10316 <div class="memberList">
10317 <div class="memberItem">
10318 <div class="memberName">Socket</div>
10319 <div class="memberValue"><io-socket-ref ref="{{ httpServer['socket'] } }"></io-socket-ref></div>
10320 </div>
10321 <div class="memberItem">
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>
10350 </div>
10351 <br>
10352 <hr>
10353 </template>
10354 </polymer-element>
10355
10356 <polymer-element name="io-http-server-connection-ref" extends="service-ref">
10357 <template>
10358 <style>/* Global styles */
10359 * {
10360 margin: 0;
10361 padding: 0;
10362 font: 400 14px 'Montserrat', sans-serif;
10363 color: #333;
10364 box-sizing: border-box;
10365 }
10366
10367 .content {
10368 padding-left: 10%;
10369 font: 400 14px 'Montserrat', sans-serif;
10370 }
10371
10372 .content-centered {
10373 padding-left: 10%;
10374 padding-right: 10%;
10375 font: 400 14px 'Montserrat', sans-serif;
10376 }
10377
10378 .content-centered-big {
10379 padding-left: 5%;
10380 padding-right: 5%;
10381 font: 400 14px 'Montserrat', sans-serif;
10382 }
10383
10384 h1 {
10385 font: 400 18px 'Montserrat', sans-serif;
10386 }
10387
10388 .memberList {
10389 display: table;
10390 }
10391
10392 .memberItem {
10393 display: table-row;
10394 }
10395
10396 .memberName, .memberValue {
10397 display: table-cell;
10398 vertical-align: top;
10399 padding: 3px 0 3px 1em;
10400 font: 400 14px 'Montserrat', sans-serif;
10401 }
10402
10403 .memberSmall {
10404 display: table-cell;
10405 vertical-align: top;
10406 padding: 3px 0 3px 1em;
10407 font: 400 12px 'Montserrat', sans-serif;
10408 }
10409
10410 .monospace {
10411 font-family: consolas, courier, monospace;
10412 font-size: 1em;
10413 line-height: 1.2em;
10414 white-space: nowrap;
10415 }
10416
10417 a {
10418 color: #0489c3;
10419 text-decoration: none;
10420 }
10421
10422 a:hover {
10423 text-decoration: underline;
10424 }
10425
10426 em {
10427 color: inherit;
10428 font-style: italic;
10429 }
10430
10431 b {
10432 color: inherit;
10433 font-weight: bold;
10434 }
10435
10436 hr {
10437 margin-top: 20px;
10438 margin-bottom: 20px;
10439 border: 0;
10440 border-top: 1px solid #eee;
10441 height: 0;
10442 box-sizing: content-box;
10443 }
10444
10445 .list-group {
10446 padding-left: 0;
10447 margin-bottom: 20px;
10448 }
10449
10450 .list-group-item {
10451 position: relative;
10452 display: block;
10453 padding: 10px 15px;
10454 margin-bottom: -1px;
10455 background-color: #fff;
10456 }
10457
10458 .list-group-item:first-child {
10459 /* rounded top corners */
10460 border-top-right-radius:4px;
10461 border-top-left-radius:4px;
10462 }
10463
10464 .list-group-item:last-child {
10465 margin-bottom: 0;
10466 /* rounded bottom corners */
10467 border-bottom-right-radius: 4px;
10468 border-bottom-left-radius:4px;
10469 }
10470
10471 /* Flex row container */
10472 .flex-row {
10473 display: flex;
10474 flex-direction: row;
10475 }
10476
10477 /* Flex column container */
10478 .flex-column {
10479 display: flex;
10480 flex-direction: column;
10481 }
10482
10483 .flex-item-fit {
10484 flex-grow: 1;
10485 flex-shrink: 1;
10486 flex-basis: auto;
10487 }
10488
10489 .flex-item-no-shrink {
10490 flex-grow: 0;
10491 flex-shrink: 0;
10492 flex-basis: auto;
10493 }
10494
10495 .flex-item-fill {
10496 flex-grow: 0;
10497 flex-shrink: 1; /* shrink when pressured */
10498 flex-basis: 100%; /* try and take 100% */
10499 }
10500
10501 .flex-item-fixed-1-12 {
10502 flex-grow: 0;
10503 flex-shrink: 0;
10504 flex-basis: 8.3%;
10505 }
10506
10507 .flex-item-fixed-2-12 {
10508 flex-grow: 0;
10509 flex-shrink: 0;
10510 flex-basis: 16.6%;
10511 }
10512
10513 .flex-item-fixed-4-12 {
10514 flex-grow: 0;
10515 flex-shrink: 0;
10516 flex-basis: 33.3333%;
10517 }
10518
10519 .flex-item-fixed-6-12, .flex-item-50-percent {
10520 flex-grow: 0;
10521 flex-shrink: 0;
10522 flex-basis: 50%;
10523 }
10524
10525 .flex-item-fixed-8-12 {
10526 flex-grow: 0;
10527 flex-shrink: 0;
10528 flex-basis: 66.6666%;
10529 }
10530
10531 .flex-item-fixed-9-12 {
10532 flex-grow: 0;
10533 flex-shrink: 0;
10534 flex-basis: 75%;
10535 }
10536
10537
10538 .flex-item-fixed-12-12 {
10539 flex-grow: 0;
10540 flex-shrink: 0;
10541 flex-basis: 100%;
10542 }
10543
10544 .flex-item-10-percent {
10545 flex-grow: 0;
10546 flex-shrink: 0;
10547 flex-basis: 10%;
10548 }
10549
10550 .flex-item-15-percent {
10551 flex-grow: 0;
10552 flex-shrink: 0;
10553 flex-basis: 15%;
10554 }
10555
10556 .flex-item-20-percent {
10557 flex-grow: 0;
10558 flex-shrink: 0;
10559 flex-basis: 20%;
10560 }
10561
10562 .flex-item-30-percent {
10563 flex-grow: 0;
10564 flex-shrink: 0;
10565 flex-basis: 30%;
10566 }
10567
10568 .flex-item-40-percent {
10569 flex-grow: 0;
10570 flex-shrink: 0;
10571 flex-basis: 40%;
10572 }
10573
10574 .flex-item-50-percent {
10575 flex-grow: 0;
10576 flex-shrink: 0;
10577 flex-basis: 50%;
10578 }
10579
10580 .flex-item-60-percent {
10581 flex-grow: 0;
10582 flex-shrink: 0;
10583 flex-basis: 60%;
10584 }
10585
10586 .flex-item-70-percent {
10587 flex-grow: 0;
10588 flex-shrink: 0;
10589 flex-basis: 70%;
10590 }
10591
10592 .flex-item-80-percent {
10593 flex-grow: 0;
10594 flex-shrink: 0;
10595 flex-basis: 80%;
10596 }
10597
10598 .well {
10599 min-height: 20px;
10600 padding: 19px;
10601 margin-bottom: 20px;
10602 background-color: #f5f5f5;
10603 border: 1px solid #e3e3e3;
10604 border-radius: 4px;
10605 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
10606 }
10607
10608 .break-wrap {
10609 word-wrap: break-word;
10610 }
10611 </style>
10612 <a _href="{{ url }}">{{ name }}</a>
10613 </template>
10614 </polymer-element>
10615
10616 <polymer-element name="io-http-server-connection-view" extends="observatory-elem ent">
10617 <template>
10618 <style>/* Global styles */
10619 * {
10620 margin: 0;
10621 padding: 0;
10622 font: 400 14px 'Montserrat', sans-serif;
10623 color: #333;
10624 box-sizing: border-box;
10625 }
10626
10627 .content {
10628 padding-left: 10%;
10629 font: 400 14px 'Montserrat', sans-serif;
10630 }
10631
10632 .content-centered {
10633 padding-left: 10%;
10634 padding-right: 10%;
10635 font: 400 14px 'Montserrat', sans-serif;
10636 }
10637
10638 .content-centered-big {
10639 padding-left: 5%;
10640 padding-right: 5%;
10641 font: 400 14px 'Montserrat', sans-serif;
10642 }
10643
10644 h1 {
10645 font: 400 18px 'Montserrat', sans-serif;
10646 }
10647
10648 .memberList {
10649 display: table;
10650 }
10651
10652 .memberItem {
10653 display: table-row;
10654 }
10655
10656 .memberName, .memberValue {
10657 display: table-cell;
10658 vertical-align: top;
10659 padding: 3px 0 3px 1em;
10660 font: 400 14px 'Montserrat', sans-serif;
10661 }
10662
10663 .memberSmall {
10664 display: table-cell;
10665 vertical-align: top;
10666 padding: 3px 0 3px 1em;
10667 font: 400 12px 'Montserrat', sans-serif;
10668 }
10669
10670 .monospace {
10671 font-family: consolas, courier, monospace;
10672 font-size: 1em;
10673 line-height: 1.2em;
10674 white-space: nowrap;
10675 }
10676
10677 a {
10678 color: #0489c3;
10679 text-decoration: none;
10680 }
10681
10682 a:hover {
10683 text-decoration: underline;
10684 }
10685
10686 em {
10687 color: inherit;
10688 font-style: italic;
10689 }
10690
10691 b {
10692 color: inherit;
10693 font-weight: bold;
10694 }
10695
10696 hr {
10697 margin-top: 20px;
10698 margin-bottom: 20px;
10699 border: 0;
10700 border-top: 1px solid #eee;
10701 height: 0;
10702 box-sizing: content-box;
10703 }
10704
10705 .list-group {
10706 padding-left: 0;
10707 margin-bottom: 20px;
10708 }
10709
10710 .list-group-item {
10711 position: relative;
10712 display: block;
10713 padding: 10px 15px;
10714 margin-bottom: -1px;
10715 background-color: #fff;
10716 }
10717
10718 .list-group-item:first-child {
10719 /* rounded top corners */
10720 border-top-right-radius:4px;
10721 border-top-left-radius:4px;
10722 }
10723
10724 .list-group-item:last-child {
10725 margin-bottom: 0;
10726 /* rounded bottom corners */
10727 border-bottom-right-radius: 4px;
10728 border-bottom-left-radius:4px;
10729 }
10730
10731 /* Flex row container */
10732 .flex-row {
10733 display: flex;
10734 flex-direction: row;
10735 }
10736
10737 /* Flex column container */
10738 .flex-column {
10739 display: flex;
10740 flex-direction: column;
10741 }
10742
10743 .flex-item-fit {
10744 flex-grow: 1;
10745 flex-shrink: 1;
10746 flex-basis: auto;
10747 }
10748
10749 .flex-item-no-shrink {
10750 flex-grow: 0;
10751 flex-shrink: 0;
10752 flex-basis: auto;
10753 }
10754
10755 .flex-item-fill {
10756 flex-grow: 0;
10757 flex-shrink: 1; /* shrink when pressured */
10758 flex-basis: 100%; /* try and take 100% */
10759 }
10760
10761 .flex-item-fixed-1-12 {
10762 flex-grow: 0;
10763 flex-shrink: 0;
10764 flex-basis: 8.3%;
10765 }
10766
10767 .flex-item-fixed-2-12 {
10768 flex-grow: 0;
10769 flex-shrink: 0;
10770 flex-basis: 16.6%;
10771 }
10772
10773 .flex-item-fixed-4-12 {
10774 flex-grow: 0;
10775 flex-shrink: 0;
10776 flex-basis: 33.3333%;
10777 }
10778
10779 .flex-item-fixed-6-12, .flex-item-50-percent {
10780 flex-grow: 0;
10781 flex-shrink: 0;
10782 flex-basis: 50%;
10783 }
10784
10785 .flex-item-fixed-8-12 {
10786 flex-grow: 0;
10787 flex-shrink: 0;
10788 flex-basis: 66.6666%;
10789 }
10790
10791 .flex-item-fixed-9-12 {
10792 flex-grow: 0;
10793 flex-shrink: 0;
10794 flex-basis: 75%;
10795 }
10796
10797
10798 .flex-item-fixed-12-12 {
10799 flex-grow: 0;
10800 flex-shrink: 0;
10801 flex-basis: 100%;
10802 }
10803
10804 .flex-item-10-percent {
10805 flex-grow: 0;
10806 flex-shrink: 0;
10807 flex-basis: 10%;
10808 }
10809
10810 .flex-item-15-percent {
10811 flex-grow: 0;
10812 flex-shrink: 0;
10813 flex-basis: 15%;
10814 }
10815
10816 .flex-item-20-percent {
10817 flex-grow: 0;
10818 flex-shrink: 0;
10819 flex-basis: 20%;
10820 }
10821
10822 .flex-item-30-percent {
10823 flex-grow: 0;
10824 flex-shrink: 0;
10825 flex-basis: 30%;
10826 }
10827
10828 .flex-item-40-percent {
10829 flex-grow: 0;
10830 flex-shrink: 0;
10831 flex-basis: 40%;
10832 }
10833
10834 .flex-item-50-percent {
10835 flex-grow: 0;
10836 flex-shrink: 0;
10837 flex-basis: 50%;
10838 }
10839
10840 .flex-item-60-percent {
10841 flex-grow: 0;
10842 flex-shrink: 0;
10843 flex-basis: 60%;
10844 }
10845
10846 .flex-item-70-percent {
10847 flex-grow: 0;
10848 flex-shrink: 0;
10849 flex-basis: 70%;
10850 }
10851
10852 .flex-item-80-percent {
10853 flex-grow: 0;
10854 flex-shrink: 0;
10855 flex-basis: 80%;
10856 }
10857
10858 .well {
10859 min-height: 20px;
10860 padding: 19px;
10861 margin-bottom: 20px;
10862 background-color: #f5f5f5;
10863 border: 1px solid #e3e3e3;
10864 border-radius: 4px;
10865 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
10866 }
10867
10868 .break-wrap {
10869 word-wrap: break-word;
10870 }
10871 </style>
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>
10900 </template>
10901 </polymer-element>
10902
10903 <polymer-element name="io-socket-ref" extends="service-ref">
10904 <template>
10905 <style>/* Global styles */
10906 * {
10907 margin: 0;
10908 padding: 0;
10909 font: 400 14px 'Montserrat', sans-serif;
10910 color: #333;
10911 box-sizing: border-box;
10912 }
10913
10914 .content {
10915 padding-left: 10%;
10916 font: 400 14px 'Montserrat', sans-serif;
10917 }
10918
10919 .content-centered {
10920 padding-left: 10%;
10921 padding-right: 10%;
10922 font: 400 14px 'Montserrat', sans-serif;
10923 }
10924
10925 .content-centered-big {
10926 padding-left: 5%;
10927 padding-right: 5%;
10928 font: 400 14px 'Montserrat', sans-serif;
10929 }
10930
10931 h1 {
10932 font: 400 18px 'Montserrat', sans-serif;
10933 }
10934
10935 .memberList {
10936 display: table;
10937 }
10938
10939 .memberItem {
10940 display: table-row;
10941 }
10942
10943 .memberName, .memberValue {
10944 display: table-cell;
10945 vertical-align: top;
10946 padding: 3px 0 3px 1em;
10947 font: 400 14px 'Montserrat', sans-serif;
10948 }
10949
10950 .memberSmall {
10951 display: table-cell;
10952 vertical-align: top;
10953 padding: 3px 0 3px 1em;
10954 font: 400 12px 'Montserrat', sans-serif;
10955 }
10956
10957 .monospace {
10958 font-family: consolas, courier, monospace;
10959 font-size: 1em;
10960 line-height: 1.2em;
10961 white-space: nowrap;
10962 }
10963
10964 a {
10965 color: #0489c3;
10966 text-decoration: none;
10967 }
10968
10969 a:hover {
10970 text-decoration: underline;
10971 }
10972
10973 em {
10974 color: inherit;
10975 font-style: italic;
10976 }
10977
10978 b {
10979 color: inherit;
10980 font-weight: bold;
10981 }
10982
10983 hr {
10984 margin-top: 20px;
10985 margin-bottom: 20px;
10986 border: 0;
10987 border-top: 1px solid #eee;
10988 height: 0;
10989 box-sizing: content-box;
10990 }
10991
10992 .list-group {
10993 padding-left: 0;
10994 margin-bottom: 20px;
10995 }
10996
10997 .list-group-item {
10998 position: relative;
10999 display: block;
11000 padding: 10px 15px;
11001 margin-bottom: -1px;
11002 background-color: #fff;
11003 }
11004
11005 .list-group-item:first-child {
11006 /* rounded top corners */
11007 border-top-right-radius:4px;
11008 border-top-left-radius:4px;
11009 }
11010
11011 .list-group-item:last-child {
11012 margin-bottom: 0;
11013 /* rounded bottom corners */
11014 border-bottom-right-radius: 4px;
11015 border-bottom-left-radius:4px;
11016 }
11017
11018 /* Flex row container */
11019 .flex-row {
11020 display: flex;
11021 flex-direction: row;
11022 }
11023
11024 /* Flex column container */
11025 .flex-column {
11026 display: flex;
11027 flex-direction: column;
11028 }
11029
11030 .flex-item-fit {
11031 flex-grow: 1;
11032 flex-shrink: 1;
11033 flex-basis: auto;
11034 }
11035
11036 .flex-item-no-shrink {
11037 flex-grow: 0;
11038 flex-shrink: 0;
11039 flex-basis: auto;
11040 }
11041
11042 .flex-item-fill {
11043 flex-grow: 0;
11044 flex-shrink: 1; /* shrink when pressured */
11045 flex-basis: 100%; /* try and take 100% */
11046 }
11047
11048 .flex-item-fixed-1-12 {
11049 flex-grow: 0;
11050 flex-shrink: 0;
11051 flex-basis: 8.3%;
11052 }
11053
11054 .flex-item-fixed-2-12 {
11055 flex-grow: 0;
11056 flex-shrink: 0;
11057 flex-basis: 16.6%;
11058 }
11059
11060 .flex-item-fixed-4-12 {
11061 flex-grow: 0;
11062 flex-shrink: 0;
11063 flex-basis: 33.3333%;
11064 }
11065
11066 .flex-item-fixed-6-12, .flex-item-50-percent {
11067 flex-grow: 0;
11068 flex-shrink: 0;
11069 flex-basis: 50%;
11070 }
11071
11072 .flex-item-fixed-8-12 {
11073 flex-grow: 0;
11074 flex-shrink: 0;
11075 flex-basis: 66.6666%;
11076 }
11077
11078 .flex-item-fixed-9-12 {
11079 flex-grow: 0;
11080 flex-shrink: 0;
11081 flex-basis: 75%;
11082 }
11083
11084
11085 .flex-item-fixed-12-12 {
11086 flex-grow: 0;
11087 flex-shrink: 0;
11088 flex-basis: 100%;
11089 }
11090
11091 .flex-item-10-percent {
11092 flex-grow: 0;
11093 flex-shrink: 0;
11094 flex-basis: 10%;
11095 }
11096
11097 .flex-item-15-percent {
11098 flex-grow: 0;
11099 flex-shrink: 0;
11100 flex-basis: 15%;
11101 }
11102
11103 .flex-item-20-percent {
11104 flex-grow: 0;
11105 flex-shrink: 0;
11106 flex-basis: 20%;
11107 }
11108
11109 .flex-item-30-percent {
11110 flex-grow: 0;
11111 flex-shrink: 0;
11112 flex-basis: 30%;
11113 }
11114
11115 .flex-item-40-percent {
11116 flex-grow: 0;
11117 flex-shrink: 0;
11118 flex-basis: 40%;
11119 }
11120
11121 .flex-item-50-percent {
11122 flex-grow: 0;
11123 flex-shrink: 0;
11124 flex-basis: 50%;
11125 }
11126
11127 .flex-item-60-percent {
11128 flex-grow: 0;
11129 flex-shrink: 0;
11130 flex-basis: 60%;
11131 }
11132
11133 .flex-item-70-percent {
11134 flex-grow: 0;
11135 flex-shrink: 0;
11136 flex-basis: 70%;
11137 }
11138
11139 .flex-item-80-percent {
11140 flex-grow: 0;
11141 flex-shrink: 0;
11142 flex-basis: 80%;
11143 }
11144
11145 .well {
11146 min-height: 20px;
11147 padding: 19px;
11148 margin-bottom: 20px;
11149 background-color: #f5f5f5;
11150 border: 1px solid #e3e3e3;
11151 border-radius: 4px;
11152 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
11153 }
11154
11155 .break-wrap {
11156 word-wrap: break-word;
11157 }
11158 </style>
11159 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
11160 </template>
11161 </polymer-element>
11162
11163 <polymer-element name="io-socket-list-view" extends="observatory-element">
11164 <template>
11165 <style>/* Global styles */
11166 * {
11167 margin: 0;
11168 padding: 0;
11169 font: 400 14px 'Montserrat', sans-serif;
11170 color: #333;
11171 box-sizing: border-box;
11172 }
11173
11174 .content {
11175 padding-left: 10%;
11176 font: 400 14px 'Montserrat', sans-serif;
11177 }
11178
11179 .content-centered {
11180 padding-left: 10%;
11181 padding-right: 10%;
11182 font: 400 14px 'Montserrat', sans-serif;
11183 }
11184
11185 .content-centered-big {
11186 padding-left: 5%;
11187 padding-right: 5%;
11188 font: 400 14px 'Montserrat', sans-serif;
11189 }
11190
11191 h1 {
11192 font: 400 18px 'Montserrat', sans-serif;
11193 }
11194
11195 .memberList {
11196 display: table;
11197 }
11198
11199 .memberItem {
11200 display: table-row;
11201 }
11202
11203 .memberName, .memberValue {
11204 display: table-cell;
11205 vertical-align: top;
11206 padding: 3px 0 3px 1em;
11207 font: 400 14px 'Montserrat', sans-serif;
11208 }
11209
11210 .memberSmall {
11211 display: table-cell;
11212 vertical-align: top;
11213 padding: 3px 0 3px 1em;
11214 font: 400 12px 'Montserrat', sans-serif;
11215 }
11216
11217 .monospace {
11218 font-family: consolas, courier, monospace;
11219 font-size: 1em;
11220 line-height: 1.2em;
11221 white-space: nowrap;
11222 }
11223
11224 a {
11225 color: #0489c3;
11226 text-decoration: none;
11227 }
11228
11229 a:hover {
11230 text-decoration: underline;
11231 }
11232
11233 em {
11234 color: inherit;
11235 font-style: italic;
11236 }
11237
11238 b {
11239 color: inherit;
11240 font-weight: bold;
11241 }
11242
11243 hr {
11244 margin-top: 20px;
11245 margin-bottom: 20px;
11246 border: 0;
11247 border-top: 1px solid #eee;
11248 height: 0;
11249 box-sizing: content-box;
11250 }
11251
11252 .list-group {
11253 padding-left: 0;
11254 margin-bottom: 20px;
11255 }
11256
11257 .list-group-item {
11258 position: relative;
11259 display: block;
11260 padding: 10px 15px;
11261 margin-bottom: -1px;
11262 background-color: #fff;
11263 }
11264
11265 .list-group-item:first-child {
11266 /* rounded top corners */
11267 border-top-right-radius:4px;
11268 border-top-left-radius:4px;
11269 }
11270
11271 .list-group-item:last-child {
11272 margin-bottom: 0;
11273 /* rounded bottom corners */
11274 border-bottom-right-radius: 4px;
11275 border-bottom-left-radius:4px;
11276 }
11277
11278 /* Flex row container */
11279 .flex-row {
11280 display: flex;
11281 flex-direction: row;
11282 }
11283
11284 /* Flex column container */
11285 .flex-column {
11286 display: flex;
11287 flex-direction: column;
11288 }
11289
11290 .flex-item-fit {
11291 flex-grow: 1;
11292 flex-shrink: 1;
11293 flex-basis: auto;
11294 }
11295
11296 .flex-item-no-shrink {
11297 flex-grow: 0;
11298 flex-shrink: 0;
11299 flex-basis: auto;
11300 }
11301
11302 .flex-item-fill {
11303 flex-grow: 0;
11304 flex-shrink: 1; /* shrink when pressured */
11305 flex-basis: 100%; /* try and take 100% */
11306 }
11307
11308 .flex-item-fixed-1-12 {
11309 flex-grow: 0;
11310 flex-shrink: 0;
11311 flex-basis: 8.3%;
11312 }
11313
11314 .flex-item-fixed-2-12 {
11315 flex-grow: 0;
11316 flex-shrink: 0;
11317 flex-basis: 16.6%;
11318 }
11319
11320 .flex-item-fixed-4-12 {
11321 flex-grow: 0;
11322 flex-shrink: 0;
11323 flex-basis: 33.3333%;
11324 }
11325
11326 .flex-item-fixed-6-12, .flex-item-50-percent {
11327 flex-grow: 0;
11328 flex-shrink: 0;
11329 flex-basis: 50%;
11330 }
11331
11332 .flex-item-fixed-8-12 {
11333 flex-grow: 0;
11334 flex-shrink: 0;
11335 flex-basis: 66.6666%;
11336 }
11337
11338 .flex-item-fixed-9-12 {
11339 flex-grow: 0;
11340 flex-shrink: 0;
11341 flex-basis: 75%;
11342 }
11343
11344
11345 .flex-item-fixed-12-12 {
11346 flex-grow: 0;
11347 flex-shrink: 0;
11348 flex-basis: 100%;
11349 }
11350
11351 .flex-item-10-percent {
11352 flex-grow: 0;
11353 flex-shrink: 0;
11354 flex-basis: 10%;
11355 }
11356
11357 .flex-item-15-percent {
11358 flex-grow: 0;
11359 flex-shrink: 0;
11360 flex-basis: 15%;
11361 }
11362
11363 .flex-item-20-percent {
11364 flex-grow: 0;
11365 flex-shrink: 0;
11366 flex-basis: 20%;
11367 }
11368
11369 .flex-item-30-percent {
11370 flex-grow: 0;
11371 flex-shrink: 0;
11372 flex-basis: 30%;
11373 }
11374
11375 .flex-item-40-percent {
11376 flex-grow: 0;
11377 flex-shrink: 0;
11378 flex-basis: 40%;
11379 }
11380
11381 .flex-item-50-percent {
11382 flex-grow: 0;
11383 flex-shrink: 0;
11384 flex-basis: 50%;
11385 }
11386
11387 .flex-item-60-percent {
11388 flex-grow: 0;
11389 flex-shrink: 0;
11390 flex-basis: 60%;
11391 }
11392
11393 .flex-item-70-percent {
11394 flex-grow: 0;
11395 flex-shrink: 0;
11396 flex-basis: 70%;
11397 }
11398
11399 .flex-item-80-percent {
11400 flex-grow: 0;
11401 flex-shrink: 0;
11402 flex-basis: 80%;
11403 }
11404
11405 .well {
11406 min-height: 20px;
11407 padding: 19px;
11408 margin-bottom: 20px;
11409 background-color: #f5f5f5;
11410 border: 1px solid #e3e3e3;
11411 border-radius: 4px;
11412 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
11413 }
11414
11415 .break-wrap {
11416 word-wrap: break-word;
11417 }
11418 </style>
11419
11420 <nav-bar>
11421 <top-nav-menu last="{{ true }}"></top-nav-menu>
11422 <nav-refresh callback="{{ refresh }}"></nav-refresh>
11423 </nav-bar>
11424
11425 <div class="content">
11426 <h1>Sockets</h1>
11427
11428 <br>
11429
11430 <ul class="list-group">
11431 <template repeat="{{ socket in list['members'] }}">
11432 <li class="list-group-item">
11433 <io-socket-ref ref="{{ socket }}"></io-socket-ref>
11434 </li>
11435 </template>
11436 </ul>
11437 </div>
11438 <br>
11439 <hr>
11440 </template>
11441 </polymer-element>
11442
11443 <polymer-element name="io-socket-view" extends="observatory-element">
11444 <template>
11445 <style>/* Global styles */
11446 * {
11447 margin: 0;
11448 padding: 0;
11449 font: 400 14px 'Montserrat', sans-serif;
11450 color: #333;
11451 box-sizing: border-box;
11452 }
11453
11454 .content {
11455 padding-left: 10%;
11456 font: 400 14px 'Montserrat', sans-serif;
11457 }
11458
11459 .content-centered {
11460 padding-left: 10%;
11461 padding-right: 10%;
11462 font: 400 14px 'Montserrat', sans-serif;
11463 }
11464
11465 .content-centered-big {
11466 padding-left: 5%;
11467 padding-right: 5%;
11468 font: 400 14px 'Montserrat', sans-serif;
11469 }
11470
11471 h1 {
11472 font: 400 18px 'Montserrat', sans-serif;
11473 }
11474
11475 .memberList {
11476 display: table;
11477 }
11478
11479 .memberItem {
11480 display: table-row;
11481 }
11482
11483 .memberName, .memberValue {
11484 display: table-cell;
11485 vertical-align: top;
11486 padding: 3px 0 3px 1em;
11487 font: 400 14px 'Montserrat', sans-serif;
11488 }
11489
11490 .memberSmall {
11491 display: table-cell;
11492 vertical-align: top;
11493 padding: 3px 0 3px 1em;
11494 font: 400 12px 'Montserrat', sans-serif;
11495 }
11496
11497 .monospace {
11498 font-family: consolas, courier, monospace;
11499 font-size: 1em;
11500 line-height: 1.2em;
11501 white-space: nowrap;
11502 }
11503
11504 a {
11505 color: #0489c3;
11506 text-decoration: none;
11507 }
11508
11509 a:hover {
11510 text-decoration: underline;
11511 }
11512
11513 em {
11514 color: inherit;
11515 font-style: italic;
11516 }
11517
11518 b {
11519 color: inherit;
11520 font-weight: bold;
11521 }
11522
11523 hr {
11524 margin-top: 20px;
11525 margin-bottom: 20px;
11526 border: 0;
11527 border-top: 1px solid #eee;
11528 height: 0;
11529 box-sizing: content-box;
11530 }
11531
11532 .list-group {
11533 padding-left: 0;
11534 margin-bottom: 20px;
11535 }
11536
11537 .list-group-item {
11538 position: relative;
11539 display: block;
11540 padding: 10px 15px;
11541 margin-bottom: -1px;
11542 background-color: #fff;
11543 }
11544
11545 .list-group-item:first-child {
11546 /* rounded top corners */
11547 border-top-right-radius:4px;
11548 border-top-left-radius:4px;
11549 }
11550
11551 .list-group-item:last-child {
11552 margin-bottom: 0;
11553 /* rounded bottom corners */
11554 border-bottom-right-radius: 4px;
11555 border-bottom-left-radius:4px;
11556 }
11557
11558 /* Flex row container */
11559 .flex-row {
11560 display: flex;
11561 flex-direction: row;
11562 }
11563
11564 /* Flex column container */
11565 .flex-column {
11566 display: flex;
11567 flex-direction: column;
11568 }
11569
11570 .flex-item-fit {
11571 flex-grow: 1;
11572 flex-shrink: 1;
11573 flex-basis: auto;
11574 }
11575
11576 .flex-item-no-shrink {
11577 flex-grow: 0;
11578 flex-shrink: 0;
11579 flex-basis: auto;
11580 }
11581
11582 .flex-item-fill {
11583 flex-grow: 0;
11584 flex-shrink: 1; /* shrink when pressured */
11585 flex-basis: 100%; /* try and take 100% */
11586 }
11587
11588 .flex-item-fixed-1-12 {
11589 flex-grow: 0;
11590 flex-shrink: 0;
11591 flex-basis: 8.3%;
11592 }
11593
11594 .flex-item-fixed-2-12 {
11595 flex-grow: 0;
11596 flex-shrink: 0;
11597 flex-basis: 16.6%;
11598 }
11599
11600 .flex-item-fixed-4-12 {
11601 flex-grow: 0;
11602 flex-shrink: 0;
11603 flex-basis: 33.3333%;
11604 }
11605
11606 .flex-item-fixed-6-12, .flex-item-50-percent {
11607 flex-grow: 0;
11608 flex-shrink: 0;
11609 flex-basis: 50%;
11610 }
11611
11612 .flex-item-fixed-8-12 {
11613 flex-grow: 0;
11614 flex-shrink: 0;
11615 flex-basis: 66.6666%;
11616 }
11617
11618 .flex-item-fixed-9-12 {
11619 flex-grow: 0;
11620 flex-shrink: 0;
11621 flex-basis: 75%;
11622 }
11623
11624
11625 .flex-item-fixed-12-12 {
11626 flex-grow: 0;
11627 flex-shrink: 0;
11628 flex-basis: 100%;
11629 }
11630
11631 .flex-item-10-percent {
11632 flex-grow: 0;
11633 flex-shrink: 0;
11634 flex-basis: 10%;
11635 }
11636
11637 .flex-item-15-percent {
11638 flex-grow: 0;
11639 flex-shrink: 0;
11640 flex-basis: 15%;
11641 }
11642
11643 .flex-item-20-percent {
11644 flex-grow: 0;
11645 flex-shrink: 0;
11646 flex-basis: 20%;
11647 }
11648
11649 .flex-item-30-percent {
11650 flex-grow: 0;
11651 flex-shrink: 0;
11652 flex-basis: 30%;
11653 }
11654
11655 .flex-item-40-percent {
11656 flex-grow: 0;
11657 flex-shrink: 0;
11658 flex-basis: 40%;
11659 }
11660
11661 .flex-item-50-percent {
11662 flex-grow: 0;
11663 flex-shrink: 0;
11664 flex-basis: 50%;
11665 }
11666
11667 .flex-item-60-percent {
11668 flex-grow: 0;
11669 flex-shrink: 0;
11670 flex-basis: 60%;
11671 }
11672
11673 .flex-item-70-percent {
11674 flex-grow: 0;
11675 flex-shrink: 0;
11676 flex-basis: 70%;
11677 }
11678
11679 .flex-item-80-percent {
11680 flex-grow: 0;
11681 flex-shrink: 0;
11682 flex-basis: 80%;
11683 }
11684
11685 .well {
11686 min-height: 20px;
11687 padding: 19px;
11688 margin-bottom: 20px;
11689 background-color: #f5f5f5;
11690 border: 1px solid #e3e3e3;
11691 border-radius: 4px;
11692 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
11693 }
11694
11695 .break-wrap {
11696 word-wrap: break-word;
11697 }
11698 </style>
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>
11789 </template>
11790 </polymer-element>
11791
11792 <polymer-element name="io-web-socket-ref" extends="service-ref">
11793 <template>
11794 <style>/* Global styles */
11795 * {
11796 margin: 0;
11797 padding: 0;
11798 font: 400 14px 'Montserrat', sans-serif;
11799 color: #333;
11800 box-sizing: border-box;
11801 }
11802
11803 .content {
11804 padding-left: 10%;
11805 font: 400 14px 'Montserrat', sans-serif;
11806 }
11807
11808 .content-centered {
11809 padding-left: 10%;
11810 padding-right: 10%;
11811 font: 400 14px 'Montserrat', sans-serif;
11812 }
11813
11814 .content-centered-big {
11815 padding-left: 5%;
11816 padding-right: 5%;
11817 font: 400 14px 'Montserrat', sans-serif;
11818 }
11819
11820 h1 {
11821 font: 400 18px 'Montserrat', sans-serif;
11822 }
11823
11824 .memberList {
11825 display: table;
11826 }
11827
11828 .memberItem {
11829 display: table-row;
11830 }
11831
11832 .memberName, .memberValue {
11833 display: table-cell;
11834 vertical-align: top;
11835 padding: 3px 0 3px 1em;
11836 font: 400 14px 'Montserrat', sans-serif;
11837 }
11838
11839 .memberSmall {
11840 display: table-cell;
11841 vertical-align: top;
11842 padding: 3px 0 3px 1em;
11843 font: 400 12px 'Montserrat', sans-serif;
11844 }
11845
11846 .monospace {
11847 font-family: consolas, courier, monospace;
11848 font-size: 1em;
11849 line-height: 1.2em;
11850 white-space: nowrap;
11851 }
11852
11853 a {
11854 color: #0489c3;
11855 text-decoration: none;
11856 }
11857
11858 a:hover {
11859 text-decoration: underline;
11860 }
11861
11862 em {
11863 color: inherit;
11864 font-style: italic;
11865 }
11866
11867 b {
11868 color: inherit;
11869 font-weight: bold;
11870 }
11871
11872 hr {
11873 margin-top: 20px;
11874 margin-bottom: 20px;
11875 border: 0;
11876 border-top: 1px solid #eee;
11877 height: 0;
11878 box-sizing: content-box;
11879 }
11880
11881 .list-group {
11882 padding-left: 0;
11883 margin-bottom: 20px;
11884 }
11885
11886 .list-group-item {
11887 position: relative;
11888 display: block;
11889 padding: 10px 15px;
11890 margin-bottom: -1px;
11891 background-color: #fff;
11892 }
11893
11894 .list-group-item:first-child {
11895 /* rounded top corners */
11896 border-top-right-radius:4px;
11897 border-top-left-radius:4px;
11898 }
11899
11900 .list-group-item:last-child {
11901 margin-bottom: 0;
11902 /* rounded bottom corners */
11903 border-bottom-right-radius: 4px;
11904 border-bottom-left-radius:4px;
11905 }
11906
11907 /* Flex row container */
11908 .flex-row {
11909 display: flex;
11910 flex-direction: row;
11911 }
11912
11913 /* Flex column container */
11914 .flex-column {
11915 display: flex;
11916 flex-direction: column;
11917 }
11918
11919 .flex-item-fit {
11920 flex-grow: 1;
11921 flex-shrink: 1;
11922 flex-basis: auto;
11923 }
11924
11925 .flex-item-no-shrink {
11926 flex-grow: 0;
11927 flex-shrink: 0;
11928 flex-basis: auto;
11929 }
11930
11931 .flex-item-fill {
11932 flex-grow: 0;
11933 flex-shrink: 1; /* shrink when pressured */
11934 flex-basis: 100%; /* try and take 100% */
11935 }
11936
11937 .flex-item-fixed-1-12 {
11938 flex-grow: 0;
11939 flex-shrink: 0;
11940 flex-basis: 8.3%;
11941 }
11942
11943 .flex-item-fixed-2-12 {
11944 flex-grow: 0;
11945 flex-shrink: 0;
11946 flex-basis: 16.6%;
11947 }
11948
11949 .flex-item-fixed-4-12 {
11950 flex-grow: 0;
11951 flex-shrink: 0;
11952 flex-basis: 33.3333%;
11953 }
11954
11955 .flex-item-fixed-6-12, .flex-item-50-percent {
11956 flex-grow: 0;
11957 flex-shrink: 0;
11958 flex-basis: 50%;
11959 }
11960
11961 .flex-item-fixed-8-12 {
11962 flex-grow: 0;
11963 flex-shrink: 0;
11964 flex-basis: 66.6666%;
11965 }
11966
11967 .flex-item-fixed-9-12 {
11968 flex-grow: 0;
11969 flex-shrink: 0;
11970 flex-basis: 75%;
11971 }
11972
11973
11974 .flex-item-fixed-12-12 {
11975 flex-grow: 0;
11976 flex-shrink: 0;
11977 flex-basis: 100%;
11978 }
11979
11980 .flex-item-10-percent {
11981 flex-grow: 0;
11982 flex-shrink: 0;
11983 flex-basis: 10%;
11984 }
11985
11986 .flex-item-15-percent {
11987 flex-grow: 0;
11988 flex-shrink: 0;
11989 flex-basis: 15%;
11990 }
11991
11992 .flex-item-20-percent {
11993 flex-grow: 0;
11994 flex-shrink: 0;
11995 flex-basis: 20%;
11996 }
11997
11998 .flex-item-30-percent {
11999 flex-grow: 0;
12000 flex-shrink: 0;
12001 flex-basis: 30%;
12002 }
12003
12004 .flex-item-40-percent {
12005 flex-grow: 0;
12006 flex-shrink: 0;
12007 flex-basis: 40%;
12008 }
12009
12010 .flex-item-50-percent {
12011 flex-grow: 0;
12012 flex-shrink: 0;
12013 flex-basis: 50%;
12014 }
12015
12016 .flex-item-60-percent {
12017 flex-grow: 0;
12018 flex-shrink: 0;
12019 flex-basis: 60%;
12020 }
12021
12022 .flex-item-70-percent {
12023 flex-grow: 0;
12024 flex-shrink: 0;
12025 flex-basis: 70%;
12026 }
12027
12028 .flex-item-80-percent {
12029 flex-grow: 0;
12030 flex-shrink: 0;
12031 flex-basis: 80%;
12032 }
12033
12034 .well {
12035 min-height: 20px;
12036 padding: 19px;
12037 margin-bottom: 20px;
12038 background-color: #f5f5f5;
12039 border: 1px solid #e3e3e3;
12040 border-radius: 4px;
12041 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
12042 }
12043
12044 .break-wrap {
12045 word-wrap: break-word;
12046 }
12047 </style>
12048 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
12049 </template>
12050 </polymer-element>
12051
12052 <polymer-element name="io-web-socket-list-view" extends="observatory-element">
12053 <template>
12054 <style>/* Global styles */
12055 * {
12056 margin: 0;
12057 padding: 0;
12058 font: 400 14px 'Montserrat', sans-serif;
12059 color: #333;
12060 box-sizing: border-box;
12061 }
12062
12063 .content {
12064 padding-left: 10%;
12065 font: 400 14px 'Montserrat', sans-serif;
12066 }
12067
12068 .content-centered {
12069 padding-left: 10%;
12070 padding-right: 10%;
12071 font: 400 14px 'Montserrat', sans-serif;
12072 }
12073
12074 .content-centered-big {
12075 padding-left: 5%;
12076 padding-right: 5%;
12077 font: 400 14px 'Montserrat', sans-serif;
12078 }
12079
12080 h1 {
12081 font: 400 18px 'Montserrat', sans-serif;
12082 }
12083
12084 .memberList {
12085 display: table;
12086 }
12087
12088 .memberItem {
12089 display: table-row;
12090 }
12091
12092 .memberName, .memberValue {
12093 display: table-cell;
12094 vertical-align: top;
12095 padding: 3px 0 3px 1em;
12096 font: 400 14px 'Montserrat', sans-serif;
12097 }
12098
12099 .memberSmall {
12100 display: table-cell;
12101 vertical-align: top;
12102 padding: 3px 0 3px 1em;
12103 font: 400 12px 'Montserrat', sans-serif;
12104 }
12105
12106 .monospace {
12107 font-family: consolas, courier, monospace;
12108 font-size: 1em;
12109 line-height: 1.2em;
12110 white-space: nowrap;
12111 }
12112
12113 a {
12114 color: #0489c3;
12115 text-decoration: none;
12116 }
12117
12118 a:hover {
12119 text-decoration: underline;
12120 }
12121
12122 em {
12123 color: inherit;
12124 font-style: italic;
12125 }
12126
12127 b {
12128 color: inherit;
12129 font-weight: bold;
12130 }
12131
12132 hr {
12133 margin-top: 20px;
12134 margin-bottom: 20px;
12135 border: 0;
12136 border-top: 1px solid #eee;
12137 height: 0;
12138 box-sizing: content-box;
12139 }
12140
12141 .list-group {
12142 padding-left: 0;
12143 margin-bottom: 20px;
12144 }
12145
12146 .list-group-item {
12147 position: relative;
12148 display: block;
12149 padding: 10px 15px;
12150 margin-bottom: -1px;
12151 background-color: #fff;
12152 }
12153
12154 .list-group-item:first-child {
12155 /* rounded top corners */
12156 border-top-right-radius:4px;
12157 border-top-left-radius:4px;
12158 }
12159
12160 .list-group-item:last-child {
12161 margin-bottom: 0;
12162 /* rounded bottom corners */
12163 border-bottom-right-radius: 4px;
12164 border-bottom-left-radius:4px;
12165 }
12166
12167 /* Flex row container */
12168 .flex-row {
12169 display: flex;
12170 flex-direction: row;
12171 }
12172
12173 /* Flex column container */
12174 .flex-column {
12175 display: flex;
12176 flex-direction: column;
12177 }
12178
12179 .flex-item-fit {
12180 flex-grow: 1;
12181 flex-shrink: 1;
12182 flex-basis: auto;
12183 }
12184
12185 .flex-item-no-shrink {
12186 flex-grow: 0;
12187 flex-shrink: 0;
12188 flex-basis: auto;
12189 }
12190
12191 .flex-item-fill {
12192 flex-grow: 0;
12193 flex-shrink: 1; /* shrink when pressured */
12194 flex-basis: 100%; /* try and take 100% */
12195 }
12196
12197 .flex-item-fixed-1-12 {
12198 flex-grow: 0;
12199 flex-shrink: 0;
12200 flex-basis: 8.3%;
12201 }
12202
12203 .flex-item-fixed-2-12 {
12204 flex-grow: 0;
12205 flex-shrink: 0;
12206 flex-basis: 16.6%;
12207 }
12208
12209 .flex-item-fixed-4-12 {
12210 flex-grow: 0;
12211 flex-shrink: 0;
12212 flex-basis: 33.3333%;
12213 }
12214
12215 .flex-item-fixed-6-12, .flex-item-50-percent {
12216 flex-grow: 0;
12217 flex-shrink: 0;
12218 flex-basis: 50%;
12219 }
12220
12221 .flex-item-fixed-8-12 {
12222 flex-grow: 0;
12223 flex-shrink: 0;
12224 flex-basis: 66.6666%;
12225 }
12226
12227 .flex-item-fixed-9-12 {
12228 flex-grow: 0;
12229 flex-shrink: 0;
12230 flex-basis: 75%;
12231 }
12232
12233
12234 .flex-item-fixed-12-12 {
12235 flex-grow: 0;
12236 flex-shrink: 0;
12237 flex-basis: 100%;
12238 }
12239
12240 .flex-item-10-percent {
12241 flex-grow: 0;
12242 flex-shrink: 0;
12243 flex-basis: 10%;
12244 }
12245
12246 .flex-item-15-percent {
12247 flex-grow: 0;
12248 flex-shrink: 0;
12249 flex-basis: 15%;
12250 }
12251
12252 .flex-item-20-percent {
12253 flex-grow: 0;
12254 flex-shrink: 0;
12255 flex-basis: 20%;
12256 }
12257
12258 .flex-item-30-percent {
12259 flex-grow: 0;
12260 flex-shrink: 0;
12261 flex-basis: 30%;
12262 }
12263
12264 .flex-item-40-percent {
12265 flex-grow: 0;
12266 flex-shrink: 0;
12267 flex-basis: 40%;
12268 }
12269
12270 .flex-item-50-percent {
12271 flex-grow: 0;
12272 flex-shrink: 0;
12273 flex-basis: 50%;
12274 }
12275
12276 .flex-item-60-percent {
12277 flex-grow: 0;
12278 flex-shrink: 0;
12279 flex-basis: 60%;
12280 }
12281
12282 .flex-item-70-percent {
12283 flex-grow: 0;
12284 flex-shrink: 0;
12285 flex-basis: 70%;
12286 }
12287
12288 .flex-item-80-percent {
12289 flex-grow: 0;
12290 flex-shrink: 0;
12291 flex-basis: 80%;
12292 }
12293
12294 .well {
12295 min-height: 20px;
12296 padding: 19px;
12297 margin-bottom: 20px;
12298 background-color: #f5f5f5;
12299 border: 1px solid #e3e3e3;
12300 border-radius: 4px;
12301 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
12302 }
12303
12304 .break-wrap {
12305 word-wrap: break-word;
12306 }
12307 </style>
12308
12309 <nav-bar>
12310 <top-nav-menu last="{{ true }}"></top-nav-menu>
12311 <nav-refresh callback="{{ refresh }}"></nav-refresh>
12312 </nav-bar>
12313
12314 <div class="content">
12315 <h1>WebSockets</h1>
12316
12317 <br>
12318
12319 <ul class="list-group">
12320 <template repeat="{{ webSocket in list['members'] }}">
12321 <li class="list-group-item">
12322 <io-web-socket-ref ref="{{ webSocket }}"></io-web-socket-ref>
12323 </li>
12324 </template>
12325 </ul>
12326 </div>
12327 <br>
12328 <hr>
12329 </template>
12330 </polymer-element>
12331
12332 <polymer-element name="io-web-socket-view" extends="observatory-element">
12333 <template>
12334 <style>/* Global styles */
12335 * {
12336 margin: 0;
12337 padding: 0;
12338 font: 400 14px 'Montserrat', sans-serif;
12339 color: #333;
12340 box-sizing: border-box;
12341 }
12342
12343 .content {
12344 padding-left: 10%;
12345 font: 400 14px 'Montserrat', sans-serif;
12346 }
12347
12348 .content-centered {
12349 padding-left: 10%;
12350 padding-right: 10%;
12351 font: 400 14px 'Montserrat', sans-serif;
12352 }
12353
12354 .content-centered-big {
12355 padding-left: 5%;
12356 padding-right: 5%;
12357 font: 400 14px 'Montserrat', sans-serif;
12358 }
12359
12360 h1 {
12361 font: 400 18px 'Montserrat', sans-serif;
12362 }
12363
12364 .memberList {
12365 display: table;
12366 }
12367
12368 .memberItem {
12369 display: table-row;
12370 }
12371
12372 .memberName, .memberValue {
12373 display: table-cell;
12374 vertical-align: top;
12375 padding: 3px 0 3px 1em;
12376 font: 400 14px 'Montserrat', sans-serif;
12377 }
12378
12379 .memberSmall {
12380 display: table-cell;
12381 vertical-align: top;
12382 padding: 3px 0 3px 1em;
12383 font: 400 12px 'Montserrat', sans-serif;
12384 }
12385
12386 .monospace {
12387 font-family: consolas, courier, monospace;
12388 font-size: 1em;
12389 line-height: 1.2em;
12390 white-space: nowrap;
12391 }
12392
12393 a {
12394 color: #0489c3;
12395 text-decoration: none;
12396 }
12397
12398 a:hover {
12399 text-decoration: underline;
12400 }
12401
12402 em {
12403 color: inherit;
12404 font-style: italic;
12405 }
12406
12407 b {
12408 color: inherit;
12409 font-weight: bold;
12410 }
12411
12412 hr {
12413 margin-top: 20px;
12414 margin-bottom: 20px;
12415 border: 0;
12416 border-top: 1px solid #eee;
12417 height: 0;
12418 box-sizing: content-box;
12419 }
12420
12421 .list-group {
12422 padding-left: 0;
12423 margin-bottom: 20px;
12424 }
12425
12426 .list-group-item {
12427 position: relative;
12428 display: block;
12429 padding: 10px 15px;
12430 margin-bottom: -1px;
12431 background-color: #fff;
12432 }
12433
12434 .list-group-item:first-child {
12435 /* rounded top corners */
12436 border-top-right-radius:4px;
12437 border-top-left-radius:4px;
12438 }
12439
12440 .list-group-item:last-child {
12441 margin-bottom: 0;
12442 /* rounded bottom corners */
12443 border-bottom-right-radius: 4px;
12444 border-bottom-left-radius:4px;
12445 }
12446
12447 /* Flex row container */
12448 .flex-row {
12449 display: flex;
12450 flex-direction: row;
12451 }
12452
12453 /* Flex column container */
12454 .flex-column {
12455 display: flex;
12456 flex-direction: column;
12457 }
12458
12459 .flex-item-fit {
12460 flex-grow: 1;
12461 flex-shrink: 1;
12462 flex-basis: auto;
12463 }
12464
12465 .flex-item-no-shrink {
12466 flex-grow: 0;
12467 flex-shrink: 0;
12468 flex-basis: auto;
12469 }
12470
12471 .flex-item-fill {
12472 flex-grow: 0;
12473 flex-shrink: 1; /* shrink when pressured */
12474 flex-basis: 100%; /* try and take 100% */
12475 }
12476
12477 .flex-item-fixed-1-12 {
12478 flex-grow: 0;
12479 flex-shrink: 0;
12480 flex-basis: 8.3%;
12481 }
12482
12483 .flex-item-fixed-2-12 {
12484 flex-grow: 0;
12485 flex-shrink: 0;
12486 flex-basis: 16.6%;
12487 }
12488
12489 .flex-item-fixed-4-12 {
12490 flex-grow: 0;
12491 flex-shrink: 0;
12492 flex-basis: 33.3333%;
12493 }
12494
12495 .flex-item-fixed-6-12, .flex-item-50-percent {
12496 flex-grow: 0;
12497 flex-shrink: 0;
12498 flex-basis: 50%;
12499 }
12500
12501 .flex-item-fixed-8-12 {
12502 flex-grow: 0;
12503 flex-shrink: 0;
12504 flex-basis: 66.6666%;
12505 }
12506
12507 .flex-item-fixed-9-12 {
12508 flex-grow: 0;
12509 flex-shrink: 0;
12510 flex-basis: 75%;
12511 }
12512
12513
12514 .flex-item-fixed-12-12 {
12515 flex-grow: 0;
12516 flex-shrink: 0;
12517 flex-basis: 100%;
12518 }
12519
12520 .flex-item-10-percent {
12521 flex-grow: 0;
12522 flex-shrink: 0;
12523 flex-basis: 10%;
12524 }
12525
12526 .flex-item-15-percent {
12527 flex-grow: 0;
12528 flex-shrink: 0;
12529 flex-basis: 15%;
12530 }
12531
12532 .flex-item-20-percent {
12533 flex-grow: 0;
12534 flex-shrink: 0;
12535 flex-basis: 20%;
12536 }
12537
12538 .flex-item-30-percent {
12539 flex-grow: 0;
12540 flex-shrink: 0;
12541 flex-basis: 30%;
12542 }
12543
12544 .flex-item-40-percent {
12545 flex-grow: 0;
12546 flex-shrink: 0;
12547 flex-basis: 40%;
12548 }
12549
12550 .flex-item-50-percent {
12551 flex-grow: 0;
12552 flex-shrink: 0;
12553 flex-basis: 50%;
12554 }
12555
12556 .flex-item-60-percent {
12557 flex-grow: 0;
12558 flex-shrink: 0;
12559 flex-basis: 60%;
12560 }
12561
12562 .flex-item-70-percent {
12563 flex-grow: 0;
12564 flex-shrink: 0;
12565 flex-basis: 70%;
12566 }
12567
12568 .flex-item-80-percent {
12569 flex-grow: 0;
12570 flex-shrink: 0;
12571 flex-basis: 80%;
12572 }
12573
12574 .well {
12575 min-height: 20px;
12576 padding: 19px;
12577 margin-bottom: 20px;
12578 background-color: #f5f5f5;
12579 border: 1px solid #e3e3e3;
12580 border-radius: 4px;
12581 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
12582 }
12583
12584 .break-wrap {
12585 word-wrap: break-word;
12586 }
12587 </style>
12588
12589 <nav-bar>
12590 <top-nav-menu last="{{ true }}"></top-nav-menu>
12591 <nav-refresh callback="{{ refresh }}"></nav-refresh>
12592 </nav-bar>
12593
12594 <div class="content">
12595 <h1>WebSocket</h1>
12596
12597 <br>
12598
12599 <div class="memberList">
12600 <div class="memberItem">
12601 <div class="memberName">Socket</div>
12602 <div class="memberValue"><io-socket-ref ref="{{ webSocket['socket'] }} "></io-socket-ref></div>
12603 </div>
12604 </div>
12605 </div>
12606 <br>
12607 <hr>
12608 </template>
12609 </polymer-element>
12610
12611 <polymer-element name="io-random-access-file-ref" extends="service-ref">
12612 <template>
12613 <style>/* Global styles */
12614 * {
12615 margin: 0;
12616 padding: 0;
12617 font: 400 14px 'Montserrat', sans-serif;
12618 color: #333;
12619 box-sizing: border-box;
12620 }
12621
12622 .content {
12623 padding-left: 10%;
12624 font: 400 14px 'Montserrat', sans-serif;
12625 }
12626
12627 .content-centered {
12628 padding-left: 10%;
12629 padding-right: 10%;
12630 font: 400 14px 'Montserrat', sans-serif;
12631 }
12632
12633 .content-centered-big {
12634 padding-left: 5%;
12635 padding-right: 5%;
12636 font: 400 14px 'Montserrat', sans-serif;
12637 }
12638
12639 h1 {
12640 font: 400 18px 'Montserrat', sans-serif;
12641 }
12642
12643 .memberList {
12644 display: table;
12645 }
12646
12647 .memberItem {
12648 display: table-row;
12649 }
12650
12651 .memberName, .memberValue {
12652 display: table-cell;
12653 vertical-align: top;
12654 padding: 3px 0 3px 1em;
12655 font: 400 14px 'Montserrat', sans-serif;
12656 }
12657
12658 .memberSmall {
12659 display: table-cell;
12660 vertical-align: top;
12661 padding: 3px 0 3px 1em;
12662 font: 400 12px 'Montserrat', sans-serif;
12663 }
12664
12665 .monospace {
12666 font-family: consolas, courier, monospace;
12667 font-size: 1em;
12668 line-height: 1.2em;
12669 white-space: nowrap;
12670 }
12671
12672 a {
12673 color: #0489c3;
12674 text-decoration: none;
12675 }
12676
12677 a:hover {
12678 text-decoration: underline;
12679 }
12680
12681 em {
12682 color: inherit;
12683 font-style: italic;
12684 }
12685
12686 b {
12687 color: inherit;
12688 font-weight: bold;
12689 }
12690
12691 hr {
12692 margin-top: 20px;
12693 margin-bottom: 20px;
12694 border: 0;
12695 border-top: 1px solid #eee;
12696 height: 0;
12697 box-sizing: content-box;
12698 }
12699
12700 .list-group {
12701 padding-left: 0;
12702 margin-bottom: 20px;
12703 }
12704
12705 .list-group-item {
12706 position: relative;
12707 display: block;
12708 padding: 10px 15px;
12709 margin-bottom: -1px;
12710 background-color: #fff;
12711 }
12712
12713 .list-group-item:first-child {
12714 /* rounded top corners */
12715 border-top-right-radius:4px;
12716 border-top-left-radius:4px;
12717 }
12718
12719 .list-group-item:last-child {
12720 margin-bottom: 0;
12721 /* rounded bottom corners */
12722 border-bottom-right-radius: 4px;
12723 border-bottom-left-radius:4px;
12724 }
12725
12726 /* Flex row container */
12727 .flex-row {
12728 display: flex;
12729 flex-direction: row;
12730 }
12731
12732 /* Flex column container */
12733 .flex-column {
12734 display: flex;
12735 flex-direction: column;
12736 }
12737
12738 .flex-item-fit {
12739 flex-grow: 1;
12740 flex-shrink: 1;
12741 flex-basis: auto;
12742 }
12743
12744 .flex-item-no-shrink {
12745 flex-grow: 0;
12746 flex-shrink: 0;
12747 flex-basis: auto;
12748 }
12749
12750 .flex-item-fill {
12751 flex-grow: 0;
12752 flex-shrink: 1; /* shrink when pressured */
12753 flex-basis: 100%; /* try and take 100% */
12754 }
12755
12756 .flex-item-fixed-1-12 {
12757 flex-grow: 0;
12758 flex-shrink: 0;
12759 flex-basis: 8.3%;
12760 }
12761
12762 .flex-item-fixed-2-12 {
12763 flex-grow: 0;
12764 flex-shrink: 0;
12765 flex-basis: 16.6%;
12766 }
12767
12768 .flex-item-fixed-4-12 {
12769 flex-grow: 0;
12770 flex-shrink: 0;
12771 flex-basis: 33.3333%;
12772 }
12773
12774 .flex-item-fixed-6-12, .flex-item-50-percent {
12775 flex-grow: 0;
12776 flex-shrink: 0;
12777 flex-basis: 50%;
12778 }
12779
12780 .flex-item-fixed-8-12 {
12781 flex-grow: 0;
12782 flex-shrink: 0;
12783 flex-basis: 66.6666%;
12784 }
12785
12786 .flex-item-fixed-9-12 {
12787 flex-grow: 0;
12788 flex-shrink: 0;
12789 flex-basis: 75%;
12790 }
12791
12792
12793 .flex-item-fixed-12-12 {
12794 flex-grow: 0;
12795 flex-shrink: 0;
12796 flex-basis: 100%;
12797 }
12798
12799 .flex-item-10-percent {
12800 flex-grow: 0;
12801 flex-shrink: 0;
12802 flex-basis: 10%;
12803 }
12804
12805 .flex-item-15-percent {
12806 flex-grow: 0;
12807 flex-shrink: 0;
12808 flex-basis: 15%;
12809 }
12810
12811 .flex-item-20-percent {
12812 flex-grow: 0;
12813 flex-shrink: 0;
12814 flex-basis: 20%;
12815 }
12816
12817 .flex-item-30-percent {
12818 flex-grow: 0;
12819 flex-shrink: 0;
12820 flex-basis: 30%;
12821 }
12822
12823 .flex-item-40-percent {
12824 flex-grow: 0;
12825 flex-shrink: 0;
12826 flex-basis: 40%;
12827 }
12828
12829 .flex-item-50-percent {
12830 flex-grow: 0;
12831 flex-shrink: 0;
12832 flex-basis: 50%;
12833 }
12834
12835 .flex-item-60-percent {
12836 flex-grow: 0;
12837 flex-shrink: 0;
12838 flex-basis: 60%;
12839 }
12840
12841 .flex-item-70-percent {
12842 flex-grow: 0;
12843 flex-shrink: 0;
12844 flex-basis: 70%;
12845 }
12846
12847 .flex-item-80-percent {
12848 flex-grow: 0;
12849 flex-shrink: 0;
12850 flex-basis: 80%;
12851 }
12852
12853 .well {
12854 min-height: 20px;
12855 padding: 19px;
12856 margin-bottom: 20px;
12857 background-color: #f5f5f5;
12858 border: 1px solid #e3e3e3;
12859 border-radius: 4px;
12860 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
12861 }
12862
12863 .break-wrap {
12864 word-wrap: break-word;
12865 }
12866 </style>
12867 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
12868 </template>
12869 </polymer-element>
12870
12871 <polymer-element name="io-random-access-file-list-view" extends="observatory-ele ment">
12872 <template>
12873 <style>/* Global styles */
12874 * {
12875 margin: 0;
12876 padding: 0;
12877 font: 400 14px 'Montserrat', sans-serif;
12878 color: #333;
12879 box-sizing: border-box;
12880 }
12881
12882 .content {
12883 padding-left: 10%;
12884 font: 400 14px 'Montserrat', sans-serif;
12885 }
12886
12887 .content-centered {
12888 padding-left: 10%;
12889 padding-right: 10%;
12890 font: 400 14px 'Montserrat', sans-serif;
12891 }
12892
12893 .content-centered-big {
12894 padding-left: 5%;
12895 padding-right: 5%;
12896 font: 400 14px 'Montserrat', sans-serif;
12897 }
12898
12899 h1 {
12900 font: 400 18px 'Montserrat', sans-serif;
12901 }
12902
12903 .memberList {
12904 display: table;
12905 }
12906
12907 .memberItem {
12908 display: table-row;
12909 }
12910
12911 .memberName, .memberValue {
12912 display: table-cell;
12913 vertical-align: top;
12914 padding: 3px 0 3px 1em;
12915 font: 400 14px 'Montserrat', sans-serif;
12916 }
12917
12918 .memberSmall {
12919 display: table-cell;
12920 vertical-align: top;
12921 padding: 3px 0 3px 1em;
12922 font: 400 12px 'Montserrat', sans-serif;
12923 }
12924
12925 .monospace {
12926 font-family: consolas, courier, monospace;
12927 font-size: 1em;
12928 line-height: 1.2em;
12929 white-space: nowrap;
12930 }
12931
12932 a {
12933 color: #0489c3;
12934 text-decoration: none;
12935 }
12936
12937 a:hover {
12938 text-decoration: underline;
12939 }
12940
12941 em {
12942 color: inherit;
12943 font-style: italic;
12944 }
12945
12946 b {
12947 color: inherit;
12948 font-weight: bold;
12949 }
12950
12951 hr {
12952 margin-top: 20px;
12953 margin-bottom: 20px;
12954 border: 0;
12955 border-top: 1px solid #eee;
12956 height: 0;
12957 box-sizing: content-box;
12958 }
12959
12960 .list-group {
12961 padding-left: 0;
12962 margin-bottom: 20px;
12963 }
12964
12965 .list-group-item {
12966 position: relative;
12967 display: block;
12968 padding: 10px 15px;
12969 margin-bottom: -1px;
12970 background-color: #fff;
12971 }
12972
12973 .list-group-item:first-child {
12974 /* rounded top corners */
12975 border-top-right-radius:4px;
12976 border-top-left-radius:4px;
12977 }
12978
12979 .list-group-item:last-child {
12980 margin-bottom: 0;
12981 /* rounded bottom corners */
12982 border-bottom-right-radius: 4px;
12983 border-bottom-left-radius:4px;
12984 }
12985
12986 /* Flex row container */
12987 .flex-row {
12988 display: flex;
12989 flex-direction: row;
12990 }
12991
12992 /* Flex column container */
12993 .flex-column {
12994 display: flex;
12995 flex-direction: column;
12996 }
12997
12998 .flex-item-fit {
12999 flex-grow: 1;
13000 flex-shrink: 1;
13001 flex-basis: auto;
13002 }
13003
13004 .flex-item-no-shrink {
13005 flex-grow: 0;
13006 flex-shrink: 0;
13007 flex-basis: auto;
13008 }
13009
13010 .flex-item-fill {
13011 flex-grow: 0;
13012 flex-shrink: 1; /* shrink when pressured */
13013 flex-basis: 100%; /* try and take 100% */
13014 }
13015
13016 .flex-item-fixed-1-12 {
13017 flex-grow: 0;
13018 flex-shrink: 0;
13019 flex-basis: 8.3%;
13020 }
13021
13022 .flex-item-fixed-2-12 {
13023 flex-grow: 0;
13024 flex-shrink: 0;
13025 flex-basis: 16.6%;
13026 }
13027
13028 .flex-item-fixed-4-12 {
13029 flex-grow: 0;
13030 flex-shrink: 0;
13031 flex-basis: 33.3333%;
13032 }
13033
13034 .flex-item-fixed-6-12, .flex-item-50-percent {
13035 flex-grow: 0;
13036 flex-shrink: 0;
13037 flex-basis: 50%;
13038 }
13039
13040 .flex-item-fixed-8-12 {
13041 flex-grow: 0;
13042 flex-shrink: 0;
13043 flex-basis: 66.6666%;
13044 }
13045
13046 .flex-item-fixed-9-12 {
13047 flex-grow: 0;
13048 flex-shrink: 0;
13049 flex-basis: 75%;
13050 }
13051
13052
13053 .flex-item-fixed-12-12 {
13054 flex-grow: 0;
13055 flex-shrink: 0;
13056 flex-basis: 100%;
13057 }
13058
13059 .flex-item-10-percent {
13060 flex-grow: 0;
13061 flex-shrink: 0;
13062 flex-basis: 10%;
13063 }
13064
13065 .flex-item-15-percent {
13066 flex-grow: 0;
13067 flex-shrink: 0;
13068 flex-basis: 15%;
13069 }
13070
13071 .flex-item-20-percent {
13072 flex-grow: 0;
13073 flex-shrink: 0;
13074 flex-basis: 20%;
13075 }
13076
13077 .flex-item-30-percent {
13078 flex-grow: 0;
13079 flex-shrink: 0;
13080 flex-basis: 30%;
13081 }
13082
13083 .flex-item-40-percent {
13084 flex-grow: 0;
13085 flex-shrink: 0;
13086 flex-basis: 40%;
13087 }
13088
13089 .flex-item-50-percent {
13090 flex-grow: 0;
13091 flex-shrink: 0;
13092 flex-basis: 50%;
13093 }
13094
13095 .flex-item-60-percent {
13096 flex-grow: 0;
13097 flex-shrink: 0;
13098 flex-basis: 60%;
13099 }
13100
13101 .flex-item-70-percent {
13102 flex-grow: 0;
13103 flex-shrink: 0;
13104 flex-basis: 70%;
13105 }
13106
13107 .flex-item-80-percent {
13108 flex-grow: 0;
13109 flex-shrink: 0;
13110 flex-basis: 80%;
13111 }
13112
13113 .well {
13114 min-height: 20px;
13115 padding: 19px;
13116 margin-bottom: 20px;
13117 background-color: #f5f5f5;
13118 border: 1px solid #e3e3e3;
13119 border-radius: 4px;
13120 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
13121 }
13122
13123 .break-wrap {
13124 word-wrap: break-word;
13125 }
13126 </style>
13127
13128 <nav-bar>
13129 <top-nav-menu last="{{ true }}"></top-nav-menu>
13130 <nav-refresh callback="{{ refresh }}"></nav-refresh>
13131 </nav-bar>
13132
13133 <div class="content">
13134 <h1>Random Access Files</h1>
13135
13136 <br>
13137
13138 <ul class="list-group">
13139 <template repeat="{{ file in list['members'] }}">
13140 <li class="list-group-item">
13141 <io-random-access-file-ref ref="{{ file }}"></io-random-access-file- ref>
13142 </li>
13143 </template>
13144 </ul>
13145 </div>
13146 <br>
13147 <hr>
13148 </template>
13149 </polymer-element>
13150
13151 <polymer-element name="io-random-access-file-view" extends="observatory-element" >
13152 <template>
13153 <style>/* Global styles */
13154 * {
13155 margin: 0;
13156 padding: 0;
13157 font: 400 14px 'Montserrat', sans-serif;
13158 color: #333;
13159 box-sizing: border-box;
13160 }
13161
13162 .content {
13163 padding-left: 10%;
13164 font: 400 14px 'Montserrat', sans-serif;
13165 }
13166
13167 .content-centered {
13168 padding-left: 10%;
13169 padding-right: 10%;
13170 font: 400 14px 'Montserrat', sans-serif;
13171 }
13172
13173 .content-centered-big {
13174 padding-left: 5%;
13175 padding-right: 5%;
13176 font: 400 14px 'Montserrat', sans-serif;
13177 }
13178
13179 h1 {
13180 font: 400 18px 'Montserrat', sans-serif;
13181 }
13182
13183 .memberList {
13184 display: table;
13185 }
13186
13187 .memberItem {
13188 display: table-row;
13189 }
13190
13191 .memberName, .memberValue {
13192 display: table-cell;
13193 vertical-align: top;
13194 padding: 3px 0 3px 1em;
13195 font: 400 14px 'Montserrat', sans-serif;
13196 }
13197
13198 .memberSmall {
13199 display: table-cell;
13200 vertical-align: top;
13201 padding: 3px 0 3px 1em;
13202 font: 400 12px 'Montserrat', sans-serif;
13203 }
13204
13205 .monospace {
13206 font-family: consolas, courier, monospace;
13207 font-size: 1em;
13208 line-height: 1.2em;
13209 white-space: nowrap;
13210 }
13211
13212 a {
13213 color: #0489c3;
13214 text-decoration: none;
13215 }
13216
13217 a:hover {
13218 text-decoration: underline;
13219 }
13220
13221 em {
13222 color: inherit;
13223 font-style: italic;
13224 }
13225
13226 b {
13227 color: inherit;
13228 font-weight: bold;
13229 }
13230
13231 hr {
13232 margin-top: 20px;
13233 margin-bottom: 20px;
13234 border: 0;
13235 border-top: 1px solid #eee;
13236 height: 0;
13237 box-sizing: content-box;
13238 }
13239
13240 .list-group {
13241 padding-left: 0;
13242 margin-bottom: 20px;
13243 }
13244
13245 .list-group-item {
13246 position: relative;
13247 display: block;
13248 padding: 10px 15px;
13249 margin-bottom: -1px;
13250 background-color: #fff;
13251 }
13252
13253 .list-group-item:first-child {
13254 /* rounded top corners */
13255 border-top-right-radius:4px;
13256 border-top-left-radius:4px;
13257 }
13258
13259 .list-group-item:last-child {
13260 margin-bottom: 0;
13261 /* rounded bottom corners */
13262 border-bottom-right-radius: 4px;
13263 border-bottom-left-radius:4px;
13264 }
13265
13266 /* Flex row container */
13267 .flex-row {
13268 display: flex;
13269 flex-direction: row;
13270 }
13271
13272 /* Flex column container */
13273 .flex-column {
13274 display: flex;
13275 flex-direction: column;
13276 }
13277
13278 .flex-item-fit {
13279 flex-grow: 1;
13280 flex-shrink: 1;
13281 flex-basis: auto;
13282 }
13283
13284 .flex-item-no-shrink {
13285 flex-grow: 0;
13286 flex-shrink: 0;
13287 flex-basis: auto;
13288 }
13289
13290 .flex-item-fill {
13291 flex-grow: 0;
13292 flex-shrink: 1; /* shrink when pressured */
13293 flex-basis: 100%; /* try and take 100% */
13294 }
13295
13296 .flex-item-fixed-1-12 {
13297 flex-grow: 0;
13298 flex-shrink: 0;
13299 flex-basis: 8.3%;
13300 }
13301
13302 .flex-item-fixed-2-12 {
13303 flex-grow: 0;
13304 flex-shrink: 0;
13305 flex-basis: 16.6%;
13306 }
13307
13308 .flex-item-fixed-4-12 {
13309 flex-grow: 0;
13310 flex-shrink: 0;
13311 flex-basis: 33.3333%;
13312 }
13313
13314 .flex-item-fixed-6-12, .flex-item-50-percent {
13315 flex-grow: 0;
13316 flex-shrink: 0;
13317 flex-basis: 50%;
13318 }
13319
13320 .flex-item-fixed-8-12 {
13321 flex-grow: 0;
13322 flex-shrink: 0;
13323 flex-basis: 66.6666%;
13324 }
13325
13326 .flex-item-fixed-9-12 {
13327 flex-grow: 0;
13328 flex-shrink: 0;
13329 flex-basis: 75%;
13330 }
13331
13332
13333 .flex-item-fixed-12-12 {
13334 flex-grow: 0;
13335 flex-shrink: 0;
13336 flex-basis: 100%;
13337 }
13338
13339 .flex-item-10-percent {
13340 flex-grow: 0;
13341 flex-shrink: 0;
13342 flex-basis: 10%;
13343 }
13344
13345 .flex-item-15-percent {
13346 flex-grow: 0;
13347 flex-shrink: 0;
13348 flex-basis: 15%;
13349 }
13350
13351 .flex-item-20-percent {
13352 flex-grow: 0;
13353 flex-shrink: 0;
13354 flex-basis: 20%;
13355 }
13356
13357 .flex-item-30-percent {
13358 flex-grow: 0;
13359 flex-shrink: 0;
13360 flex-basis: 30%;
13361 }
13362
13363 .flex-item-40-percent {
13364 flex-grow: 0;
13365 flex-shrink: 0;
13366 flex-basis: 40%;
13367 }
13368
13369 .flex-item-50-percent {
13370 flex-grow: 0;
13371 flex-shrink: 0;
13372 flex-basis: 50%;
13373 }
13374
13375 .flex-item-60-percent {
13376 flex-grow: 0;
13377 flex-shrink: 0;
13378 flex-basis: 60%;
13379 }
13380
13381 .flex-item-70-percent {
13382 flex-grow: 0;
13383 flex-shrink: 0;
13384 flex-basis: 70%;
13385 }
13386
13387 .flex-item-80-percent {
13388 flex-grow: 0;
13389 flex-shrink: 0;
13390 flex-basis: 80%;
13391 }
13392
13393 .well {
13394 min-height: 20px;
13395 padding: 19px;
13396 margin-bottom: 20px;
13397 background-color: #f5f5f5;
13398 border: 1px solid #e3e3e3;
13399 border-radius: 4px;
13400 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
13401 }
13402
13403 .break-wrap {
13404 word-wrap: break-word;
13405 }
13406 </style>
13407
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>
13436 </polymer-element>
13437
13438 <polymer-element name="io-process-list-view" extends="observatory-element">
13439 <template>
13440 <style>/* Global styles */
13441 * {
13442 margin: 0;
13443 padding: 0;
13444 font: 400 14px 'Montserrat', sans-serif;
13445 color: #333;
13446 box-sizing: border-box;
13447 }
13448
13449 .content {
13450 padding-left: 10%;
13451 font: 400 14px 'Montserrat', sans-serif;
13452 }
13453
13454 .content-centered {
13455 padding-left: 10%;
13456 padding-right: 10%;
13457 font: 400 14px 'Montserrat', sans-serif;
13458 }
13459
13460 .content-centered-big {
13461 padding-left: 5%;
13462 padding-right: 5%;
13463 font: 400 14px 'Montserrat', sans-serif;
13464 }
13465
13466 h1 {
13467 font: 400 18px 'Montserrat', sans-serif;
13468 }
13469
13470 .memberList {
13471 display: table;
13472 }
13473
13474 .memberItem {
13475 display: table-row;
13476 }
13477
13478 .memberName, .memberValue {
13479 display: table-cell;
13480 vertical-align: top;
13481 padding: 3px 0 3px 1em;
13482 font: 400 14px 'Montserrat', sans-serif;
13483 }
13484
13485 .memberSmall {
13486 display: table-cell;
13487 vertical-align: top;
13488 padding: 3px 0 3px 1em;
13489 font: 400 12px 'Montserrat', sans-serif;
13490 }
13491
13492 .monospace {
13493 font-family: consolas, courier, monospace;
13494 font-size: 1em;
13495 line-height: 1.2em;
13496 white-space: nowrap;
13497 }
13498
13499 a {
13500 color: #0489c3;
13501 text-decoration: none;
13502 }
13503
13504 a:hover {
13505 text-decoration: underline;
13506 }
13507
13508 em {
13509 color: inherit;
13510 font-style: italic;
13511 }
13512
13513 b {
13514 color: inherit;
13515 font-weight: bold;
13516 }
13517
13518 hr {
13519 margin-top: 20px;
13520 margin-bottom: 20px;
13521 border: 0;
13522 border-top: 1px solid #eee;
13523 height: 0;
13524 box-sizing: content-box;
13525 }
13526
13527 .list-group {
13528 padding-left: 0;
13529 margin-bottom: 20px;
13530 }
13531
13532 .list-group-item {
13533 position: relative;
13534 display: block;
13535 padding: 10px 15px;
13536 margin-bottom: -1px;
13537 background-color: #fff;
13538 }
13539
13540 .list-group-item:first-child {
13541 /* rounded top corners */
13542 border-top-right-radius:4px;
13543 border-top-left-radius:4px;
13544 }
13545
13546 .list-group-item:last-child {
13547 margin-bottom: 0;
13548 /* rounded bottom corners */
13549 border-bottom-right-radius: 4px;
13550 border-bottom-left-radius:4px;
13551 }
13552
13553 /* Flex row container */
13554 .flex-row {
13555 display: flex;
13556 flex-direction: row;
13557 }
13558
13559 /* Flex column container */
13560 .flex-column {
13561 display: flex;
13562 flex-direction: column;
13563 }
13564
13565 .flex-item-fit {
13566 flex-grow: 1;
13567 flex-shrink: 1;
13568 flex-basis: auto;
13569 }
13570
13571 .flex-item-no-shrink {
13572 flex-grow: 0;
13573 flex-shrink: 0;
13574 flex-basis: auto;
13575 }
13576
13577 .flex-item-fill {
13578 flex-grow: 0;
13579 flex-shrink: 1; /* shrink when pressured */
13580 flex-basis: 100%; /* try and take 100% */
13581 }
13582
13583 .flex-item-fixed-1-12 {
13584 flex-grow: 0;
13585 flex-shrink: 0;
13586 flex-basis: 8.3%;
13587 }
13588
13589 .flex-item-fixed-2-12 {
13590 flex-grow: 0;
13591 flex-shrink: 0;
13592 flex-basis: 16.6%;
13593 }
13594
13595 .flex-item-fixed-4-12 {
13596 flex-grow: 0;
13597 flex-shrink: 0;
13598 flex-basis: 33.3333%;
13599 }
13600
13601 .flex-item-fixed-6-12, .flex-item-50-percent {
13602 flex-grow: 0;
13603 flex-shrink: 0;
13604 flex-basis: 50%;
13605 }
13606
13607 .flex-item-fixed-8-12 {
13608 flex-grow: 0;
13609 flex-shrink: 0;
13610 flex-basis: 66.6666%;
13611 }
13612
13613 .flex-item-fixed-9-12 {
13614 flex-grow: 0;
13615 flex-shrink: 0;
13616 flex-basis: 75%;
13617 }
13618
13619
13620 .flex-item-fixed-12-12 {
13621 flex-grow: 0;
13622 flex-shrink: 0;
13623 flex-basis: 100%;
13624 }
13625
13626 .flex-item-10-percent {
13627 flex-grow: 0;
13628 flex-shrink: 0;
13629 flex-basis: 10%;
13630 }
13631
13632 .flex-item-15-percent {
13633 flex-grow: 0;
13634 flex-shrink: 0;
13635 flex-basis: 15%;
13636 }
13637
13638 .flex-item-20-percent {
13639 flex-grow: 0;
13640 flex-shrink: 0;
13641 flex-basis: 20%;
13642 }
13643
13644 .flex-item-30-percent {
13645 flex-grow: 0;
13646 flex-shrink: 0;
13647 flex-basis: 30%;
13648 }
13649
13650 .flex-item-40-percent {
13651 flex-grow: 0;
13652 flex-shrink: 0;
13653 flex-basis: 40%;
13654 }
13655
13656 .flex-item-50-percent {
13657 flex-grow: 0;
13658 flex-shrink: 0;
13659 flex-basis: 50%;
13660 }
13661
13662 .flex-item-60-percent {
13663 flex-grow: 0;
13664 flex-shrink: 0;
13665 flex-basis: 60%;
13666 }
13667
13668 .flex-item-70-percent {
13669 flex-grow: 0;
13670 flex-shrink: 0;
13671 flex-basis: 70%;
13672 }
13673
13674 .flex-item-80-percent {
13675 flex-grow: 0;
13676 flex-shrink: 0;
13677 flex-basis: 80%;
13678 }
13679
13680 .well {
13681 min-height: 20px;
13682 padding: 19px;
13683 margin-bottom: 20px;
13684 background-color: #f5f5f5;
13685 border: 1px solid #e3e3e3;
13686 border-radius: 4px;
13687 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
13688 }
13689
13690 .break-wrap {
13691 word-wrap: break-word;
13692 }
13693 </style>
13694
13695 <nav-bar>
13696 <top-nav-menu last="{{ true }}"></top-nav-menu>
13697 <nav-refresh callback="{{ refresh }}"></nav-refresh>
13698 </nav-bar>
13699
13700 <div class="content">
13701 <h1>Processes</h1>
13702
13703 <br>
13704
13705 <ul class="list-group">
13706 <template repeat="{{ process in list['members'] }}">
13707 <li class="list-group-item">
13708 <io-process-ref ref="{{ process }}"></io-process-ref>
13709 </li>
13710 </template>
13711 </ul>
13712 </div>
13713 <br>
13714 <hr>
13715 </template>
13716 </polymer-element>
13717
13718 <polymer-element name="io-process-ref" extends="service-ref">
13719 <template>
13720 <style>/* Global styles */
13721 * {
13722 margin: 0;
13723 padding: 0;
13724 font: 400 14px 'Montserrat', sans-serif;
13725 color: #333;
13726 box-sizing: border-box;
13727 }
13728
13729 .content {
13730 padding-left: 10%;
13731 font: 400 14px 'Montserrat', sans-serif;
13732 }
13733
13734 .content-centered {
13735 padding-left: 10%;
13736 padding-right: 10%;
13737 font: 400 14px 'Montserrat', sans-serif;
13738 }
13739
13740 .content-centered-big {
13741 padding-left: 5%;
13742 padding-right: 5%;
13743 font: 400 14px 'Montserrat', sans-serif;
13744 }
13745
13746 h1 {
13747 font: 400 18px 'Montserrat', sans-serif;
13748 }
13749
13750 .memberList {
13751 display: table;
13752 }
13753
13754 .memberItem {
13755 display: table-row;
13756 }
13757
13758 .memberName, .memberValue {
13759 display: table-cell;
13760 vertical-align: top;
13761 padding: 3px 0 3px 1em;
13762 font: 400 14px 'Montserrat', sans-serif;
13763 }
13764
13765 .memberSmall {
13766 display: table-cell;
13767 vertical-align: top;
13768 padding: 3px 0 3px 1em;
13769 font: 400 12px 'Montserrat', sans-serif;
13770 }
13771
13772 .monospace {
13773 font-family: consolas, courier, monospace;
13774 font-size: 1em;
13775 line-height: 1.2em;
13776 white-space: nowrap;
13777 }
13778
13779 a {
13780 color: #0489c3;
13781 text-decoration: none;
13782 }
13783
13784 a:hover {
13785 text-decoration: underline;
13786 }
13787
13788 em {
13789 color: inherit;
13790 font-style: italic;
13791 }
13792
13793 b {
13794 color: inherit;
13795 font-weight: bold;
13796 }
13797
13798 hr {
13799 margin-top: 20px;
13800 margin-bottom: 20px;
13801 border: 0;
13802 border-top: 1px solid #eee;
13803 height: 0;
13804 box-sizing: content-box;
13805 }
13806
13807 .list-group {
13808 padding-left: 0;
13809 margin-bottom: 20px;
13810 }
13811
13812 .list-group-item {
13813 position: relative;
13814 display: block;
13815 padding: 10px 15px;
13816 margin-bottom: -1px;
13817 background-color: #fff;
13818 }
13819
13820 .list-group-item:first-child {
13821 /* rounded top corners */
13822 border-top-right-radius:4px;
13823 border-top-left-radius:4px;
13824 }
13825
13826 .list-group-item:last-child {
13827 margin-bottom: 0;
13828 /* rounded bottom corners */
13829 border-bottom-right-radius: 4px;
13830 border-bottom-left-radius:4px;
13831 }
13832
13833 /* Flex row container */
13834 .flex-row {
13835 display: flex;
13836 flex-direction: row;
13837 }
13838
13839 /* Flex column container */
13840 .flex-column {
13841 display: flex;
13842 flex-direction: column;
13843 }
13844
13845 .flex-item-fit {
13846 flex-grow: 1;
13847 flex-shrink: 1;
13848 flex-basis: auto;
13849 }
13850
13851 .flex-item-no-shrink {
13852 flex-grow: 0;
13853 flex-shrink: 0;
13854 flex-basis: auto;
13855 }
13856
13857 .flex-item-fill {
13858 flex-grow: 0;
13859 flex-shrink: 1; /* shrink when pressured */
13860 flex-basis: 100%; /* try and take 100% */
13861 }
13862
13863 .flex-item-fixed-1-12 {
13864 flex-grow: 0;
13865 flex-shrink: 0;
13866 flex-basis: 8.3%;
13867 }
13868
13869 .flex-item-fixed-2-12 {
13870 flex-grow: 0;
13871 flex-shrink: 0;
13872 flex-basis: 16.6%;
13873 }
13874
13875 .flex-item-fixed-4-12 {
13876 flex-grow: 0;
13877 flex-shrink: 0;
13878 flex-basis: 33.3333%;
13879 }
13880
13881 .flex-item-fixed-6-12, .flex-item-50-percent {
13882 flex-grow: 0;
13883 flex-shrink: 0;
13884 flex-basis: 50%;
13885 }
13886
13887 .flex-item-fixed-8-12 {
13888 flex-grow: 0;
13889 flex-shrink: 0;
13890 flex-basis: 66.6666%;
13891 }
13892
13893 .flex-item-fixed-9-12 {
13894 flex-grow: 0;
13895 flex-shrink: 0;
13896 flex-basis: 75%;
13897 }
13898
13899
13900 .flex-item-fixed-12-12 {
13901 flex-grow: 0;
13902 flex-shrink: 0;
13903 flex-basis: 100%;
13904 }
13905
13906 .flex-item-10-percent {
13907 flex-grow: 0;
13908 flex-shrink: 0;
13909 flex-basis: 10%;
13910 }
13911
13912 .flex-item-15-percent {
13913 flex-grow: 0;
13914 flex-shrink: 0;
13915 flex-basis: 15%;
13916 }
13917
13918 .flex-item-20-percent {
13919 flex-grow: 0;
13920 flex-shrink: 0;
13921 flex-basis: 20%;
13922 }
13923
13924 .flex-item-30-percent {
13925 flex-grow: 0;
13926 flex-shrink: 0;
13927 flex-basis: 30%;
13928 }
13929
13930 .flex-item-40-percent {
13931 flex-grow: 0;
13932 flex-shrink: 0;
13933 flex-basis: 40%;
13934 }
13935
13936 .flex-item-50-percent {
13937 flex-grow: 0;
13938 flex-shrink: 0;
13939 flex-basis: 50%;
13940 }
13941
13942 .flex-item-60-percent {
13943 flex-grow: 0;
13944 flex-shrink: 0;
13945 flex-basis: 60%;
13946 }
13947
13948 .flex-item-70-percent {
13949 flex-grow: 0;
13950 flex-shrink: 0;
13951 flex-basis: 70%;
13952 }
13953
13954 .flex-item-80-percent {
13955 flex-grow: 0;
13956 flex-shrink: 0;
13957 flex-basis: 80%;
13958 }
13959
13960 .well {
13961 min-height: 20px;
13962 padding: 19px;
13963 margin-bottom: 20px;
13964 background-color: #f5f5f5;
13965 border: 1px solid #e3e3e3;
13966 border-radius: 4px;
13967 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
13968 }
13969
13970 .break-wrap {
13971 word-wrap: break-word;
13972 }
13973 </style>
13974 <template if="{{ small }}">
13975 <a on-click="{{ goto }}" _href="{{ url }}">{{ name }}</a>
13976 </template>
13977 <template if="{{ !small }}">
13978 <a on-click="{{ goto }}" _href="{{ url }}">({{ ref['pid'] }}) {{ name }} { { ref['arguments'] }}</a>
13979 </template>
13980 </template>
13981 </polymer-element>
13982
13983 <polymer-element name="io-process-view" extends="observatory-element">
13984 <template>
13985 <style>/* Global styles */
13986 * {
13987 margin: 0;
13988 padding: 0;
13989 font: 400 14px 'Montserrat', sans-serif;
13990 color: #333;
13991 box-sizing: border-box;
13992 }
13993
13994 .content {
13995 padding-left: 10%;
13996 font: 400 14px 'Montserrat', sans-serif;
13997 }
13998
13999 .content-centered {
14000 padding-left: 10%;
14001 padding-right: 10%;
14002 font: 400 14px 'Montserrat', sans-serif;
14003 }
14004
14005 .content-centered-big {
14006 padding-left: 5%;
14007 padding-right: 5%;
14008 font: 400 14px 'Montserrat', sans-serif;
14009 }
14010
14011 h1 {
14012 font: 400 18px 'Montserrat', sans-serif;
14013 }
14014
14015 .memberList {
14016 display: table;
14017 }
14018
14019 .memberItem {
14020 display: table-row;
14021 }
14022
14023 .memberName, .memberValue {
14024 display: table-cell;
14025 vertical-align: top;
14026 padding: 3px 0 3px 1em;
14027 font: 400 14px 'Montserrat', sans-serif;
14028 }
14029
14030 .memberSmall {
14031 display: table-cell;
14032 vertical-align: top;
14033 padding: 3px 0 3px 1em;
14034 font: 400 12px 'Montserrat', sans-serif;
14035 }
14036
14037 .monospace {
14038 font-family: consolas, courier, monospace;
14039 font-size: 1em;
14040 line-height: 1.2em;
14041 white-space: nowrap;
14042 }
14043
14044 a {
14045 color: #0489c3;
14046 text-decoration: none;
14047 }
14048
14049 a:hover {
14050 text-decoration: underline;
14051 }
14052
14053 em {
14054 color: inherit;
14055 font-style: italic;
14056 }
14057
14058 b {
14059 color: inherit;
14060 font-weight: bold;
14061 }
14062
14063 hr {
14064 margin-top: 20px;
14065 margin-bottom: 20px;
14066 border: 0;
14067 border-top: 1px solid #eee;
14068 height: 0;
14069 box-sizing: content-box;
14070 }
14071
14072 .list-group {
14073 padding-left: 0;
14074 margin-bottom: 20px;
14075 }
14076
14077 .list-group-item {
14078 position: relative;
14079 display: block;
14080 padding: 10px 15px;
14081 margin-bottom: -1px;
14082 background-color: #fff;
14083 }
14084
14085 .list-group-item:first-child {
14086 /* rounded top corners */
14087 border-top-right-radius:4px;
14088 border-top-left-radius:4px;
14089 }
14090
14091 .list-group-item:last-child {
14092 margin-bottom: 0;
14093 /* rounded bottom corners */
14094 border-bottom-right-radius: 4px;
14095 border-bottom-left-radius:4px;
14096 }
14097
14098 /* Flex row container */
14099 .flex-row {
14100 display: flex;
14101 flex-direction: row;
14102 }
14103
14104 /* Flex column container */
14105 .flex-column {
14106 display: flex;
14107 flex-direction: column;
14108 }
14109
14110 .flex-item-fit {
14111 flex-grow: 1;
14112 flex-shrink: 1;
14113 flex-basis: auto;
14114 }
14115
14116 .flex-item-no-shrink {
14117 flex-grow: 0;
14118 flex-shrink: 0;
14119 flex-basis: auto;
14120 }
14121
14122 .flex-item-fill {
14123 flex-grow: 0;
14124 flex-shrink: 1; /* shrink when pressured */
14125 flex-basis: 100%; /* try and take 100% */
14126 }
14127
14128 .flex-item-fixed-1-12 {
14129 flex-grow: 0;
14130 flex-shrink: 0;
14131 flex-basis: 8.3%;
14132 }
14133
14134 .flex-item-fixed-2-12 {
14135 flex-grow: 0;
14136 flex-shrink: 0;
14137 flex-basis: 16.6%;
14138 }
14139
14140 .flex-item-fixed-4-12 {
14141 flex-grow: 0;
14142 flex-shrink: 0;
14143 flex-basis: 33.3333%;
14144 }
14145
14146 .flex-item-fixed-6-12, .flex-item-50-percent {
14147 flex-grow: 0;
14148 flex-shrink: 0;
14149 flex-basis: 50%;
14150 }
14151
14152 .flex-item-fixed-8-12 {
14153 flex-grow: 0;
14154 flex-shrink: 0;
14155 flex-basis: 66.6666%;
14156 }
14157
14158 .flex-item-fixed-9-12 {
14159 flex-grow: 0;
14160 flex-shrink: 0;
14161 flex-basis: 75%;
14162 }
14163
14164
14165 .flex-item-fixed-12-12 {
14166 flex-grow: 0;
14167 flex-shrink: 0;
14168 flex-basis: 100%;
14169 }
14170
14171 .flex-item-10-percent {
14172 flex-grow: 0;
14173 flex-shrink: 0;
14174 flex-basis: 10%;
14175 }
14176
14177 .flex-item-15-percent {
14178 flex-grow: 0;
14179 flex-shrink: 0;
14180 flex-basis: 15%;
14181 }
14182
14183 .flex-item-20-percent {
14184 flex-grow: 0;
14185 flex-shrink: 0;
14186 flex-basis: 20%;
14187 }
14188
14189 .flex-item-30-percent {
14190 flex-grow: 0;
14191 flex-shrink: 0;
14192 flex-basis: 30%;
14193 }
14194
14195 .flex-item-40-percent {
14196 flex-grow: 0;
14197 flex-shrink: 0;
14198 flex-basis: 40%;
14199 }
14200
14201 .flex-item-50-percent {
14202 flex-grow: 0;
14203 flex-shrink: 0;
14204 flex-basis: 50%;
14205 }
14206
14207 .flex-item-60-percent {
14208 flex-grow: 0;
14209 flex-shrink: 0;
14210 flex-basis: 60%;
14211 }
14212
14213 .flex-item-70-percent {
14214 flex-grow: 0;
14215 flex-shrink: 0;
14216 flex-basis: 70%;
14217 }
14218
14219 .flex-item-80-percent {
14220 flex-grow: 0;
14221 flex-shrink: 0;
14222 flex-basis: 80%;
14223 }
14224
14225 .well {
14226 min-height: 20px;
14227 padding: 19px;
14228 margin-bottom: 20px;
14229 background-color: #f5f5f5;
14230 border: 1px solid #e3e3e3;
14231 border-radius: 4px;
14232 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
14233 }
14234
14235 .break-wrap {
14236 word-wrap: break-word;
14237 }
14238 </style>
14239
14240 <nav-bar>
14241 <top-nav-menu last="{{ true }}"></top-nav-menu>
14242 <nav-refresh callback="{{ refresh }}"></nav-refresh>
14243 </nav-bar>
14244
14245 <div class="content">
14246 <h1>Process</h1>
14247
14248 <br>
14249
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>
14295 </div>
14296
14297 <br>
14298
14299 <h2>Environment</h2>
14300 <div class="well">
14301 <div class="monospace break-wrap">
14302 <template repeat="{{ variable in process['environment'] }}">
14303 {{ variable }}
14304 <br>
14305 </template>
14306 </div>
14307 </div>
14308 </div>
14309 <br>
14310 <hr>
14311 </template>
14312 </polymer-element>
14313
14314
14315
14316
14317
14318 <polymer-element name="isolate-ref" extends="service-ref">
14319 <template><style>/* Global styles */
14320 * {
14321 margin: 0;
14322 padding: 0;
14323 font: 400 14px 'Montserrat', sans-serif;
14324 color: #333;
14325 box-sizing: border-box;
14326 }
14327
14328 .content {
14329 padding-left: 10%;
14330 font: 400 14px 'Montserrat', sans-serif;
14331 }
14332
14333 .content-centered {
14334 padding-left: 10%;
14335 padding-right: 10%;
14336 font: 400 14px 'Montserrat', sans-serif;
14337 }
14338
14339 .content-centered-big {
14340 padding-left: 5%;
14341 padding-right: 5%;
14342 font: 400 14px 'Montserrat', sans-serif;
14343 }
14344
14345 h1 {
14346 font: 400 18px 'Montserrat', sans-serif;
14347 }
14348
14349 .memberList {
14350 display: table;
14351 }
14352
14353 .memberItem {
14354 display: table-row;
14355 }
14356
14357 .memberName, .memberValue {
14358 display: table-cell;
14359 vertical-align: top;
14360 padding: 3px 0 3px 1em;
14361 font: 400 14px 'Montserrat', sans-serif;
14362 }
14363
14364 .memberSmall {
14365 display: table-cell;
14366 vertical-align: top;
14367 padding: 3px 0 3px 1em;
14368 font: 400 12px 'Montserrat', sans-serif;
14369 }
14370
14371 .monospace {
14372 font-family: consolas, courier, monospace;
14373 font-size: 1em;
14374 line-height: 1.2em;
14375 white-space: nowrap;
14376 }
14377
14378 a {
14379 color: #0489c3;
14380 text-decoration: none;
14381 }
14382
14383 a:hover {
14384 text-decoration: underline;
14385 }
14386
14387 em {
14388 color: inherit;
14389 font-style: italic;
14390 }
14391
14392 b {
14393 color: inherit;
14394 font-weight: bold;
14395 }
14396
14397 hr {
14398 margin-top: 20px;
14399 margin-bottom: 20px;
14400 border: 0;
14401 border-top: 1px solid #eee;
14402 height: 0;
14403 box-sizing: content-box;
14404 }
14405
14406 .list-group {
14407 padding-left: 0;
14408 margin-bottom: 20px;
14409 }
14410
14411 .list-group-item {
14412 position: relative;
14413 display: block;
14414 padding: 10px 15px;
14415 margin-bottom: -1px;
14416 background-color: #fff;
14417 }
14418
14419 .list-group-item:first-child {
14420 /* rounded top corners */
14421 border-top-right-radius:4px;
14422 border-top-left-radius:4px;
14423 }
14424
14425 .list-group-item:last-child {
14426 margin-bottom: 0;
14427 /* rounded bottom corners */
14428 border-bottom-right-radius: 4px;
14429 border-bottom-left-radius:4px;
14430 }
14431
14432 /* Flex row container */
14433 .flex-row {
14434 display: flex;
14435 flex-direction: row;
14436 }
14437
14438 /* Flex column container */
14439 .flex-column {
14440 display: flex;
14441 flex-direction: column;
14442 }
14443
14444 .flex-item-fit {
14445 flex-grow: 1;
14446 flex-shrink: 1;
14447 flex-basis: auto;
14448 }
14449
14450 .flex-item-no-shrink {
14451 flex-grow: 0;
14452 flex-shrink: 0;
14453 flex-basis: auto;
14454 }
14455
14456 .flex-item-fill {
14457 flex-grow: 0;
14458 flex-shrink: 1; /* shrink when pressured */
14459 flex-basis: 100%; /* try and take 100% */
14460 }
14461
14462 .flex-item-fixed-1-12 {
14463 flex-grow: 0;
14464 flex-shrink: 0;
14465 flex-basis: 8.3%;
14466 }
14467
14468 .flex-item-fixed-2-12 {
14469 flex-grow: 0;
14470 flex-shrink: 0;
14471 flex-basis: 16.6%;
14472 }
14473
14474 .flex-item-fixed-4-12 {
14475 flex-grow: 0;
14476 flex-shrink: 0;
14477 flex-basis: 33.3333%;
14478 }
14479
14480 .flex-item-fixed-6-12, .flex-item-50-percent {
14481 flex-grow: 0;
14482 flex-shrink: 0;
14483 flex-basis: 50%;
14484 }
14485
14486 .flex-item-fixed-8-12 {
14487 flex-grow: 0;
14488 flex-shrink: 0;
14489 flex-basis: 66.6666%;
14490 }
14491
14492 .flex-item-fixed-9-12 {
14493 flex-grow: 0;
14494 flex-shrink: 0;
14495 flex-basis: 75%;
14496 }
14497
14498
14499 .flex-item-fixed-12-12 {
14500 flex-grow: 0;
14501 flex-shrink: 0;
14502 flex-basis: 100%;
14503 }
14504
14505 .flex-item-10-percent {
14506 flex-grow: 0;
14507 flex-shrink: 0;
14508 flex-basis: 10%;
14509 }
14510
14511 .flex-item-15-percent {
14512 flex-grow: 0;
14513 flex-shrink: 0;
14514 flex-basis: 15%;
14515 }
14516
14517 .flex-item-20-percent {
14518 flex-grow: 0;
14519 flex-shrink: 0;
14520 flex-basis: 20%;
14521 }
14522
14523 .flex-item-30-percent {
14524 flex-grow: 0;
14525 flex-shrink: 0;
14526 flex-basis: 30%;
14527 }
14528
14529 .flex-item-40-percent {
14530 flex-grow: 0;
14531 flex-shrink: 0;
14532 flex-basis: 40%;
14533 }
14534
14535 .flex-item-50-percent {
14536 flex-grow: 0;
14537 flex-shrink: 0;
14538 flex-basis: 50%;
14539 }
14540
14541 .flex-item-60-percent {
14542 flex-grow: 0;
14543 flex-shrink: 0;
14544 flex-basis: 60%;
14545 }
14546
14547 .flex-item-70-percent {
14548 flex-grow: 0;
14549 flex-shrink: 0;
14550 flex-basis: 70%;
14551 }
14552
14553 .flex-item-80-percent {
14554 flex-grow: 0;
14555 flex-shrink: 0;
14556 flex-basis: 80%;
14557 }
14558
14559 .well {
14560 min-height: 20px;
14561 padding: 19px;
14562 margin-bottom: 20px;
14563 background-color: #f5f5f5;
14564 border: 1px solid #e3e3e3;
14565 border-radius: 4px;
14566 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
14567 }
14568
14569 .break-wrap {
14570 word-wrap: break-word;
14571 }
14572 </style>
14573 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
14574 </template>
14575 </polymer-element>
14576
14577
14578
14579
14580
14581
14582
14583
14584
14585
14586 <polymer-element name="isolate-summary" extends="observatory-element">
14587 <template>
14588 <style>/* Global styles */
14589 * {
14590 margin: 0;
14591 padding: 0;
14592 font: 400 14px 'Montserrat', sans-serif;
14593 color: #333;
14594 box-sizing: border-box;
14595 }
14596
14597 .content {
14598 padding-left: 10%;
14599 font: 400 14px 'Montserrat', sans-serif;
14600 }
14601
14602 .content-centered {
14603 padding-left: 10%;
14604 padding-right: 10%;
14605 font: 400 14px 'Montserrat', sans-serif;
14606 }
14607
14608 .content-centered-big {
14609 padding-left: 5%;
14610 padding-right: 5%;
14611 font: 400 14px 'Montserrat', sans-serif;
14612 }
14613
14614 h1 {
14615 font: 400 18px 'Montserrat', sans-serif;
14616 }
14617
14618 .memberList {
14619 display: table;
14620 }
14621
14622 .memberItem {
14623 display: table-row;
14624 }
14625
14626 .memberName, .memberValue {
14627 display: table-cell;
14628 vertical-align: top;
14629 padding: 3px 0 3px 1em;
14630 font: 400 14px 'Montserrat', sans-serif;
14631 }
14632
14633 .memberSmall {
14634 display: table-cell;
14635 vertical-align: top;
14636 padding: 3px 0 3px 1em;
14637 font: 400 12px 'Montserrat', sans-serif;
14638 }
14639
14640 .monospace {
14641 font-family: consolas, courier, monospace;
14642 font-size: 1em;
14643 line-height: 1.2em;
14644 white-space: nowrap;
14645 }
14646
14647 a {
14648 color: #0489c3;
14649 text-decoration: none;
14650 }
14651
14652 a:hover {
14653 text-decoration: underline;
14654 }
14655
14656 em {
14657 color: inherit;
14658 font-style: italic;
14659 }
14660
14661 b {
14662 color: inherit;
14663 font-weight: bold;
14664 }
14665
14666 hr {
14667 margin-top: 20px;
14668 margin-bottom: 20px;
14669 border: 0;
14670 border-top: 1px solid #eee;
14671 height: 0;
14672 box-sizing: content-box;
14673 }
14674
14675 .list-group {
14676 padding-left: 0;
14677 margin-bottom: 20px;
14678 }
14679
14680 .list-group-item {
14681 position: relative;
14682 display: block;
14683 padding: 10px 15px;
14684 margin-bottom: -1px;
14685 background-color: #fff;
14686 }
14687
14688 .list-group-item:first-child {
14689 /* rounded top corners */
14690 border-top-right-radius:4px;
14691 border-top-left-radius:4px;
14692 }
14693
14694 .list-group-item:last-child {
14695 margin-bottom: 0;
14696 /* rounded bottom corners */
14697 border-bottom-right-radius: 4px;
14698 border-bottom-left-radius:4px;
14699 }
14700
14701 /* Flex row container */
14702 .flex-row {
14703 display: flex;
14704 flex-direction: row;
14705 }
14706
14707 /* Flex column container */
14708 .flex-column {
14709 display: flex;
14710 flex-direction: column;
14711 }
14712
14713 .flex-item-fit {
14714 flex-grow: 1;
14715 flex-shrink: 1;
14716 flex-basis: auto;
14717 }
14718
14719 .flex-item-no-shrink {
14720 flex-grow: 0;
14721 flex-shrink: 0;
14722 flex-basis: auto;
14723 }
14724
14725 .flex-item-fill {
14726 flex-grow: 0;
14727 flex-shrink: 1; /* shrink when pressured */
14728 flex-basis: 100%; /* try and take 100% */
14729 }
14730
14731 .flex-item-fixed-1-12 {
14732 flex-grow: 0;
14733 flex-shrink: 0;
14734 flex-basis: 8.3%;
14735 }
14736
14737 .flex-item-fixed-2-12 {
14738 flex-grow: 0;
14739 flex-shrink: 0;
14740 flex-basis: 16.6%;
14741 }
14742
14743 .flex-item-fixed-4-12 {
14744 flex-grow: 0;
14745 flex-shrink: 0;
14746 flex-basis: 33.3333%;
14747 }
14748
14749 .flex-item-fixed-6-12, .flex-item-50-percent {
14750 flex-grow: 0;
14751 flex-shrink: 0;
14752 flex-basis: 50%;
14753 }
14754
14755 .flex-item-fixed-8-12 {
14756 flex-grow: 0;
14757 flex-shrink: 0;
14758 flex-basis: 66.6666%;
14759 }
14760
14761 .flex-item-fixed-9-12 {
14762 flex-grow: 0;
14763 flex-shrink: 0;
14764 flex-basis: 75%;
14765 }
14766
14767
14768 .flex-item-fixed-12-12 {
14769 flex-grow: 0;
14770 flex-shrink: 0;
14771 flex-basis: 100%;
14772 }
14773
14774 .flex-item-10-percent {
14775 flex-grow: 0;
14776 flex-shrink: 0;
14777 flex-basis: 10%;
14778 }
14779
14780 .flex-item-15-percent {
14781 flex-grow: 0;
14782 flex-shrink: 0;
14783 flex-basis: 15%;
14784 }
14785
14786 .flex-item-20-percent {
14787 flex-grow: 0;
14788 flex-shrink: 0;
14789 flex-basis: 20%;
14790 }
14791
14792 .flex-item-30-percent {
14793 flex-grow: 0;
14794 flex-shrink: 0;
14795 flex-basis: 30%;
14796 }
14797
14798 .flex-item-40-percent {
14799 flex-grow: 0;
14800 flex-shrink: 0;
14801 flex-basis: 40%;
14802 }
14803
14804 .flex-item-50-percent {
14805 flex-grow: 0;
14806 flex-shrink: 0;
14807 flex-basis: 50%;
14808 }
14809
14810 .flex-item-60-percent {
14811 flex-grow: 0;
14812 flex-shrink: 0;
14813 flex-basis: 60%;
14814 }
14815
14816 .flex-item-70-percent {
14817 flex-grow: 0;
14818 flex-shrink: 0;
14819 flex-basis: 70%;
14820 }
14821
14822 .flex-item-80-percent {
14823 flex-grow: 0;
14824 flex-shrink: 0;
14825 flex-basis: 80%;
14826 }
14827
14828 .well {
14829 min-height: 20px;
14830 padding: 19px;
14831 margin-bottom: 20px;
14832 background-color: #f5f5f5;
14833 border: 1px solid #e3e3e3;
14834 border-radius: 4px;
14835 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
14836 }
14837
14838 .break-wrap {
14839 word-wrap: break-word;
14840 }
14841 </style>
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>
14858
14859 <div class="flex-row">
14860 <div class="flex-item-20-percent"></div>
14861 <div class="flex-item-60-percent">
14862 <hr>
14863 </div>
14864 <div class="flex-item-20-percent"></div>
14865 </div>
14866
14867 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
14868
14869 </template>
14870 </polymer-element>
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>
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>
14882
14883 <template if="{{ isolate.running }}">
14884 <strong>running</strong>
14885 <action-link callback="{{ pause }}" label="pause"></action-link>
14886 </template>
14887
14888 <template if="{{ isolate.idle }}">
14889 <strong>idle</strong>
14890 <action-link callback="{{ pause }}" label="pause"></action-link>
14891 </template>
14892
14893 <template if="{{ isolate.loading }}">
14894 <strong>loading...</strong>
14895 </template>
14896 </template>
14897 </polymer-element>
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>
14905
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">
14937 <template>
14938 <style>
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 */
14950 * {
14951 margin: 0;
14952 padding: 0;
14953 font: 400 14px 'Montserrat', sans-serif;
14954 color: #333;
14955 box-sizing: border-box;
14956 }
14957
14958 .content {
14959 padding-left: 10%;
14960 font: 400 14px 'Montserrat', sans-serif;
14961 }
14962
14963 .content-centered {
14964 padding-left: 10%;
14965 padding-right: 10%;
14966 font: 400 14px 'Montserrat', sans-serif;
14967 }
14968
14969 .content-centered-big {
14970 padding-left: 5%;
14971 padding-right: 5%;
14972 font: 400 14px 'Montserrat', sans-serif;
14973 }
14974
14975 h1 {
14976 font: 400 18px 'Montserrat', sans-serif;
14977 }
14978
14979 .memberList {
14980 display: table;
14981 }
14982
14983 .memberItem {
14984 display: table-row;
14985 }
14986
14987 .memberName, .memberValue {
14988 display: table-cell;
14989 vertical-align: top;
14990 padding: 3px 0 3px 1em;
14991 font: 400 14px 'Montserrat', sans-serif;
14992 }
14993
14994 .memberSmall {
14995 display: table-cell;
14996 vertical-align: top;
14997 padding: 3px 0 3px 1em;
14998 font: 400 12px 'Montserrat', sans-serif;
14999 }
15000
15001 .monospace {
15002 font-family: consolas, courier, monospace;
15003 font-size: 1em;
15004 line-height: 1.2em;
15005 white-space: nowrap;
15006 }
15007
15008 a {
15009 color: #0489c3;
15010 text-decoration: none;
15011 }
15012
15013 a:hover {
15014 text-decoration: underline;
15015 }
15016
15017 em {
15018 color: inherit;
15019 font-style: italic;
15020 }
15021
15022 b {
15023 color: inherit;
15024 font-weight: bold;
15025 }
15026
15027 hr {
15028 margin-top: 20px;
15029 margin-bottom: 20px;
15030 border: 0;
15031 border-top: 1px solid #eee;
15032 height: 0;
15033 box-sizing: content-box;
15034 }
15035
15036 .list-group {
15037 padding-left: 0;
15038 margin-bottom: 20px;
15039 }
15040
15041 .list-group-item {
15042 position: relative;
15043 display: block;
15044 padding: 10px 15px;
15045 margin-bottom: -1px;
15046 background-color: #fff;
15047 }
15048
15049 .list-group-item:first-child {
15050 /* rounded top corners */
15051 border-top-right-radius:4px;
15052 border-top-left-radius:4px;
15053 }
15054
15055 .list-group-item:last-child {
15056 margin-bottom: 0;
15057 /* rounded bottom corners */
15058 border-bottom-right-radius: 4px;
15059 border-bottom-left-radius:4px;
15060 }
15061
15062 /* Flex row container */
15063 .flex-row {
15064 display: flex;
15065 flex-direction: row;
15066 }
15067
15068 /* Flex column container */
15069 .flex-column {
15070 display: flex;
15071 flex-direction: column;
15072 }
15073
15074 .flex-item-fit {
15075 flex-grow: 1;
15076 flex-shrink: 1;
15077 flex-basis: auto;
15078 }
15079
15080 .flex-item-no-shrink {
15081 flex-grow: 0;
15082 flex-shrink: 0;
15083 flex-basis: auto;
15084 }
15085
15086 .flex-item-fill {
15087 flex-grow: 0;
15088 flex-shrink: 1; /* shrink when pressured */
15089 flex-basis: 100%; /* try and take 100% */
15090 }
15091
15092 .flex-item-fixed-1-12 {
15093 flex-grow: 0;
15094 flex-shrink: 0;
15095 flex-basis: 8.3%;
15096 }
15097
15098 .flex-item-fixed-2-12 {
15099 flex-grow: 0;
15100 flex-shrink: 0;
15101 flex-basis: 16.6%;
15102 }
15103
15104 .flex-item-fixed-4-12 {
15105 flex-grow: 0;
15106 flex-shrink: 0;
15107 flex-basis: 33.3333%;
15108 }
15109
15110 .flex-item-fixed-6-12, .flex-item-50-percent {
15111 flex-grow: 0;
15112 flex-shrink: 0;
15113 flex-basis: 50%;
15114 }
15115
15116 .flex-item-fixed-8-12 {
15117 flex-grow: 0;
15118 flex-shrink: 0;
15119 flex-basis: 66.6666%;
15120 }
15121
15122 .flex-item-fixed-9-12 {
15123 flex-grow: 0;
15124 flex-shrink: 0;
15125 flex-basis: 75%;
15126 }
15127
15128
15129 .flex-item-fixed-12-12 {
15130 flex-grow: 0;
15131 flex-shrink: 0;
15132 flex-basis: 100%;
15133 }
15134
15135 .flex-item-10-percent {
15136 flex-grow: 0;
15137 flex-shrink: 0;
15138 flex-basis: 10%;
15139 }
15140
15141 .flex-item-15-percent {
15142 flex-grow: 0;
15143 flex-shrink: 0;
15144 flex-basis: 15%;
15145 }
15146
15147 .flex-item-20-percent {
15148 flex-grow: 0;
15149 flex-shrink: 0;
15150 flex-basis: 20%;
15151 }
15152
15153 .flex-item-30-percent {
15154 flex-grow: 0;
15155 flex-shrink: 0;
15156 flex-basis: 30%;
15157 }
15158
15159 .flex-item-40-percent {
15160 flex-grow: 0;
15161 flex-shrink: 0;
15162 flex-basis: 40%;
15163 }
15164
15165 .flex-item-50-percent {
15166 flex-grow: 0;
15167 flex-shrink: 0;
15168 flex-basis: 50%;
15169 }
15170
15171 .flex-item-60-percent {
15172 flex-grow: 0;
15173 flex-shrink: 0;
15174 flex-basis: 60%;
15175 }
15176
15177 .flex-item-70-percent {
15178 flex-grow: 0;
15179 flex-shrink: 0;
15180 flex-basis: 70%;
15181 }
15182
15183 .flex-item-80-percent {
15184 flex-grow: 0;
15185 flex-shrink: 0;
15186 flex-basis: 80%;
15187 }
15188
15189 .well {
15190 min-height: 20px;
15191 padding: 19px;
15192 margin-bottom: 20px;
15193 background-color: #f5f5f5;
15194 border: 1px solid #e3e3e3;
15195 border-radius: 4px;
15196 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
15197 }
15198
15199 .break-wrap {
15200 word-wrap: break-word;
15201 }
15202 </style>
15203 <template if="{{ isolate.error != null }}">
15204 <div class="content-centered">
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">
15216 <div class="memberList">
15217 <div class="memberItem">
15218 <div class="memberName">new heap</div>
15219 <div class="memberValue">
15220 {{ isolate.newSpace.used | formatSize }}
15221 of
15222 {{ isolate.newSpace.capacity | formatSize }}
15223 </div>
15224 </div>
15225 <div class="memberItem">
15226 <div class="memberName">old heap</div>
15227 <div class="memberValue">
15228 {{ isolate.oldSpace.used | formatSize }}
15229 of
15230 {{ isolate.oldSpace.capacity | formatSize }}
15231 </div>
15232 </div>
15233 </div>
15234 <br>
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>
15284 </template>
15285 </polymer-element>
15286
15287
15288
15289
15290
15291
15292
15293
15294
15295
15296
15297
15298
15299
15300
15301 <polymer-element name="isolate-view" extends="observatory-element">
15302 <template>
15303 <style>/* Global styles */
15304 * {
15305 margin: 0;
15306 padding: 0;
15307 font: 400 14px 'Montserrat', sans-serif;
15308 color: #333;
15309 box-sizing: border-box;
15310 }
15311
15312 .content {
15313 padding-left: 10%;
15314 font: 400 14px 'Montserrat', sans-serif;
15315 }
15316
15317 .content-centered {
15318 padding-left: 10%;
15319 padding-right: 10%;
15320 font: 400 14px 'Montserrat', sans-serif;
15321 }
15322
15323 .content-centered-big {
15324 padding-left: 5%;
15325 padding-right: 5%;
15326 font: 400 14px 'Montserrat', sans-serif;
15327 }
15328
15329 h1 {
15330 font: 400 18px 'Montserrat', sans-serif;
15331 }
15332
15333 .memberList {
15334 display: table;
15335 }
15336
15337 .memberItem {
15338 display: table-row;
15339 }
15340
15341 .memberName, .memberValue {
15342 display: table-cell;
15343 vertical-align: top;
15344 padding: 3px 0 3px 1em;
15345 font: 400 14px 'Montserrat', sans-serif;
15346 }
15347
15348 .memberSmall {
15349 display: table-cell;
15350 vertical-align: top;
15351 padding: 3px 0 3px 1em;
15352 font: 400 12px 'Montserrat', sans-serif;
15353 }
15354
15355 .monospace {
15356 font-family: consolas, courier, monospace;
15357 font-size: 1em;
15358 line-height: 1.2em;
15359 white-space: nowrap;
15360 }
15361
15362 a {
15363 color: #0489c3;
15364 text-decoration: none;
15365 }
15366
15367 a:hover {
15368 text-decoration: underline;
15369 }
15370
15371 em {
15372 color: inherit;
15373 font-style: italic;
15374 }
15375
15376 b {
15377 color: inherit;
15378 font-weight: bold;
15379 }
15380
15381 hr {
15382 margin-top: 20px;
15383 margin-bottom: 20px;
15384 border: 0;
15385 border-top: 1px solid #eee;
15386 height: 0;
15387 box-sizing: content-box;
15388 }
15389
15390 .list-group {
15391 padding-left: 0;
15392 margin-bottom: 20px;
15393 }
15394
15395 .list-group-item {
15396 position: relative;
15397 display: block;
15398 padding: 10px 15px;
15399 margin-bottom: -1px;
15400 background-color: #fff;
15401 }
15402
15403 .list-group-item:first-child {
15404 /* rounded top corners */
15405 border-top-right-radius:4px;
15406 border-top-left-radius:4px;
15407 }
15408
15409 .list-group-item:last-child {
15410 margin-bottom: 0;
15411 /* rounded bottom corners */
15412 border-bottom-right-radius: 4px;
15413 border-bottom-left-radius:4px;
15414 }
15415
15416 /* Flex row container */
15417 .flex-row {
15418 display: flex;
15419 flex-direction: row;
15420 }
15421
15422 /* Flex column container */
15423 .flex-column {
15424 display: flex;
15425 flex-direction: column;
15426 }
15427
15428 .flex-item-fit {
15429 flex-grow: 1;
15430 flex-shrink: 1;
15431 flex-basis: auto;
15432 }
15433
15434 .flex-item-no-shrink {
15435 flex-grow: 0;
15436 flex-shrink: 0;
15437 flex-basis: auto;
15438 }
15439
15440 .flex-item-fill {
15441 flex-grow: 0;
15442 flex-shrink: 1; /* shrink when pressured */
15443 flex-basis: 100%; /* try and take 100% */
15444 }
15445
15446 .flex-item-fixed-1-12 {
15447 flex-grow: 0;
15448 flex-shrink: 0;
15449 flex-basis: 8.3%;
15450 }
15451
15452 .flex-item-fixed-2-12 {
15453 flex-grow: 0;
15454 flex-shrink: 0;
15455 flex-basis: 16.6%;
15456 }
15457
15458 .flex-item-fixed-4-12 {
15459 flex-grow: 0;
15460 flex-shrink: 0;
15461 flex-basis: 33.3333%;
15462 }
15463
15464 .flex-item-fixed-6-12, .flex-item-50-percent {
15465 flex-grow: 0;
15466 flex-shrink: 0;
15467 flex-basis: 50%;
15468 }
15469
15470 .flex-item-fixed-8-12 {
15471 flex-grow: 0;
15472 flex-shrink: 0;
15473 flex-basis: 66.6666%;
15474 }
15475
15476 .flex-item-fixed-9-12 {
15477 flex-grow: 0;
15478 flex-shrink: 0;
15479 flex-basis: 75%;
15480 }
15481
15482
15483 .flex-item-fixed-12-12 {
15484 flex-grow: 0;
15485 flex-shrink: 0;
15486 flex-basis: 100%;
15487 }
15488
15489 .flex-item-10-percent {
15490 flex-grow: 0;
15491 flex-shrink: 0;
15492 flex-basis: 10%;
15493 }
15494
15495 .flex-item-15-percent {
15496 flex-grow: 0;
15497 flex-shrink: 0;
15498 flex-basis: 15%;
15499 }
15500
15501 .flex-item-20-percent {
15502 flex-grow: 0;
15503 flex-shrink: 0;
15504 flex-basis: 20%;
15505 }
15506
15507 .flex-item-30-percent {
15508 flex-grow: 0;
15509 flex-shrink: 0;
15510 flex-basis: 30%;
15511 }
15512
15513 .flex-item-40-percent {
15514 flex-grow: 0;
15515 flex-shrink: 0;
15516 flex-basis: 40%;
15517 }
15518
15519 .flex-item-50-percent {
15520 flex-grow: 0;
15521 flex-shrink: 0;
15522 flex-basis: 50%;
15523 }
15524
15525 .flex-item-60-percent {
15526 flex-grow: 0;
15527 flex-shrink: 0;
15528 flex-basis: 60%;
15529 }
15530
15531 .flex-item-70-percent {
15532 flex-grow: 0;
15533 flex-shrink: 0;
15534 flex-basis: 70%;
15535 }
15536
15537 .flex-item-80-percent {
15538 flex-grow: 0;
15539 flex-shrink: 0;
15540 flex-basis: 80%;
15541 }
15542
15543 .well {
15544 min-height: 20px;
15545 padding: 19px;
15546 margin-bottom: 20px;
15547 background-color: #f5f5f5;
15548 border: 1px solid #e3e3e3;
15549 border-radius: 4px;
15550 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
15551 }
15552
15553 .break-wrap {
15554 word-wrap: break-word;
15555 }
15556 </style>
15557 <style>
15558 .sourceInset {
15559 padding-left: 15%;
15560 padding-right: 15%;
15561 }
15562 .miniProfileChart {
15563 width: 80%;
15564 }
15565 </style>
15566
15567 <nav-bar>
15568 <top-nav-menu></top-nav-menu>
15569 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
15570 </isolate-nav-menu>
15571 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
15572 <nav-refresh callback="{{ refresh }}"></nav-refresh>
15573 <nav-control></nav-control>
15574 </nav-bar>
15575
15576 <div class="content">
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>
15599 </template>
15600
15601 <div class="flex-row">
15602 <div class="flex-item-20-percent"></div>
15603 <div class="flex-item-60-percent"><hr></div>
15604 <div class="flex-item-20-percent"></div>
15605 </div>
15606
15607 <br>
15608
15609 <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
15610
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">
15621 <div class="memberItem">
15622 <div class="memberName">root library</div>
15623 <div class="memberValue">
15624 <library-ref ref="{{ isolate.rootLib }}"></library-ref>
15625 </div>
15626 </div>
15627 <div class="memberItem">
15628 <template if="{{ isolate.entry != null }}">
15629 <div class="memberName">entry</div>
15630 <div class="memberValue">
15631 <function-ref ref="{{ isolate.entry }}"></function-ref>
15632 </div>
15633 </template>
15634 </div>
15635 <div class="memberItem">
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">
15642 <div class="memberItem">
15643 <div class="memberValue">
15644 See <a on-click="{{ goto }}" _href="{{ gotoLink(isolate.relativeLi nk('debug/breakpoints')) }}">breakpoints</a>
15645 </div>
15646 </div>
15647 </div>
15648 </div>
15649 </div>
15650
15651 <hr>
15652
15653 <div class="content">
15654 libraries ({{ isolate.libraries.length }})
15655 <curly-block expand="{{ isolate.libraries.length <= 8 }}">
15656 <div class="memberList">
15657 <template repeat="{{ lib in isolate.libraries }}">
15658 <div class="memberItem">
15659 <div class="memberName">
15660 <library-ref ref="{{ lib }}"></library-ref>
15661 </div>
15662 </div>
15663 </template>
15664 </div>
15665 </curly-block>
15666 </div>
15667
15668 <hr>
15669
15670 <div class="content">
15671 <div id="tagProfileChart" class="miniProfileChart" style="height: 600px">< /div>
15672 </div>
15673
15674 <hr>
15675
15676 <div class="content">
15677 <eval-box callback="{{ eval }}"></eval-box>
15678 </div>
15679 <br><br><br><br>
15680 <br><br><br><br>
15681 </template>
15682 </polymer-element>
15683
15684
15685
15686
15687
15688
15689
15690
15691
15692
15693
15694
15695
15696
15697
15698
15699
15700 <polymer-element name="inbound-reference" extends="service-ref">
15701 <template>
15702 <style>/* Global styles */
15703 * {
15704 margin: 0;
15705 padding: 0;
15706 font: 400 14px 'Montserrat', sans-serif;
15707 color: #333;
15708 box-sizing: border-box;
15709 }
15710
15711 .content {
15712 padding-left: 10%;
15713 font: 400 14px 'Montserrat', sans-serif;
15714 }
15715
15716 .content-centered {
15717 padding-left: 10%;
15718 padding-right: 10%;
15719 font: 400 14px 'Montserrat', sans-serif;
15720 }
15721
15722 .content-centered-big {
15723 padding-left: 5%;
15724 padding-right: 5%;
15725 font: 400 14px 'Montserrat', sans-serif;
15726 }
15727
15728 h1 {
15729 font: 400 18px 'Montserrat', sans-serif;
15730 }
15731
15732 .memberList {
15733 display: table;
15734 }
15735
15736 .memberItem {
15737 display: table-row;
15738 }
15739
15740 .memberName, .memberValue {
15741 display: table-cell;
15742 vertical-align: top;
15743 padding: 3px 0 3px 1em;
15744 font: 400 14px 'Montserrat', sans-serif;
15745 }
15746
15747 .memberSmall {
15748 display: table-cell;
15749 vertical-align: top;
15750 padding: 3px 0 3px 1em;
15751 font: 400 12px 'Montserrat', sans-serif;
15752 }
15753
15754 .monospace {
15755 font-family: consolas, courier, monospace;
15756 font-size: 1em;
15757 line-height: 1.2em;
15758 white-space: nowrap;
15759 }
15760
15761 a {
15762 color: #0489c3;
15763 text-decoration: none;
15764 }
15765
15766 a:hover {
15767 text-decoration: underline;
15768 }
15769
15770 em {
15771 color: inherit;
15772 font-style: italic;
15773 }
15774
15775 b {
15776 color: inherit;
15777 font-weight: bold;
15778 }
15779
15780 hr {
15781 margin-top: 20px;
15782 margin-bottom: 20px;
15783 border: 0;
15784 border-top: 1px solid #eee;
15785 height: 0;
15786 box-sizing: content-box;
15787 }
15788
15789 .list-group {
15790 padding-left: 0;
15791 margin-bottom: 20px;
15792 }
15793
15794 .list-group-item {
15795 position: relative;
15796 display: block;
15797 padding: 10px 15px;
15798 margin-bottom: -1px;
15799 background-color: #fff;
15800 }
15801
15802 .list-group-item:first-child {
15803 /* rounded top corners */
15804 border-top-right-radius:4px;
15805 border-top-left-radius:4px;
15806 }
15807
15808 .list-group-item:last-child {
15809 margin-bottom: 0;
15810 /* rounded bottom corners */
15811 border-bottom-right-radius: 4px;
15812 border-bottom-left-radius:4px;
15813 }
15814
15815 /* Flex row container */
15816 .flex-row {
15817 display: flex;
15818 flex-direction: row;
15819 }
15820
15821 /* Flex column container */
15822 .flex-column {
15823 display: flex;
15824 flex-direction: column;
15825 }
15826
15827 .flex-item-fit {
15828 flex-grow: 1;
15829 flex-shrink: 1;
15830 flex-basis: auto;
15831 }
15832
15833 .flex-item-no-shrink {
15834 flex-grow: 0;
15835 flex-shrink: 0;
15836 flex-basis: auto;
15837 }
15838
15839 .flex-item-fill {
15840 flex-grow: 0;
15841 flex-shrink: 1; /* shrink when pressured */
15842 flex-basis: 100%; /* try and take 100% */
15843 }
15844
15845 .flex-item-fixed-1-12 {
15846 flex-grow: 0;
15847 flex-shrink: 0;
15848 flex-basis: 8.3%;
15849 }
15850
15851 .flex-item-fixed-2-12 {
15852 flex-grow: 0;
15853 flex-shrink: 0;
15854 flex-basis: 16.6%;
15855 }
15856
15857 .flex-item-fixed-4-12 {
15858 flex-grow: 0;
15859 flex-shrink: 0;
15860 flex-basis: 33.3333%;
15861 }
15862
15863 .flex-item-fixed-6-12, .flex-item-50-percent {
15864 flex-grow: 0;
15865 flex-shrink: 0;
15866 flex-basis: 50%;
15867 }
15868
15869 .flex-item-fixed-8-12 {
15870 flex-grow: 0;
15871 flex-shrink: 0;
15872 flex-basis: 66.6666%;
15873 }
15874
15875 .flex-item-fixed-9-12 {
15876 flex-grow: 0;
15877 flex-shrink: 0;
15878 flex-basis: 75%;
15879 }
15880
15881
15882 .flex-item-fixed-12-12 {
15883 flex-grow: 0;
15884 flex-shrink: 0;
15885 flex-basis: 100%;
15886 }
15887
15888 .flex-item-10-percent {
15889 flex-grow: 0;
15890 flex-shrink: 0;
15891 flex-basis: 10%;
15892 }
15893
15894 .flex-item-15-percent {
15895 flex-grow: 0;
15896 flex-shrink: 0;
15897 flex-basis: 15%;
15898 }
15899
15900 .flex-item-20-percent {
15901 flex-grow: 0;
15902 flex-shrink: 0;
15903 flex-basis: 20%;
15904 }
15905
15906 .flex-item-30-percent {
15907 flex-grow: 0;
15908 flex-shrink: 0;
15909 flex-basis: 30%;
15910 }
15911
15912 .flex-item-40-percent {
15913 flex-grow: 0;
15914 flex-shrink: 0;
15915 flex-basis: 40%;
15916 }
15917
15918 .flex-item-50-percent {
15919 flex-grow: 0;
15920 flex-shrink: 0;
15921 flex-basis: 50%;
15922 }
15923
15924 .flex-item-60-percent {
15925 flex-grow: 0;
15926 flex-shrink: 0;
15927 flex-basis: 60%;
15928 }
15929
15930 .flex-item-70-percent {
15931 flex-grow: 0;
15932 flex-shrink: 0;
15933 flex-basis: 70%;
15934 }
15935
15936 .flex-item-80-percent {
15937 flex-grow: 0;
15938 flex-shrink: 0;
15939 flex-basis: 80%;
15940 }
15941
15942 .well {
15943 min-height: 20px;
15944 padding: 19px;
15945 margin-bottom: 20px;
15946 background-color: #f5f5f5;
15947 border: 1px solid #e3e3e3;
15948 border-radius: 4px;
15949 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
15950 }
15951
15952 .break-wrap {
15953 word-wrap: break-word;
15954 }
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>
15960
15961 <curly-block callback="{{ expander() }}">
15962 <div class="memberList">
15963 <div class="memberItem">
15964 <div class="memberName">
15965 <template repeat="{{ reference in inboundReferences] }}">
15966 <inbound-reference ref="{{ reference }}"></inbound-reference>
15967 </template>
15968 </div>
15969 </div>
15970 </div>
15971 </curly-block>
15972 </div>
15973 </template>
15974 </polymer-element>
15975
15976
15977
15978
15979
15980
15981
15982
15983
15984
15985
15986
15987
15988
15989
15990
15991
15992 <polymer-element name="object-common" extends="observatory-element">
15993 <template>
15994 <style>/* Global styles */
15995 * {
15996 margin: 0;
15997 padding: 0;
15998 font: 400 14px 'Montserrat', sans-serif;
15999 color: #333;
16000 box-sizing: border-box;
16001 }
16002
16003 .content {
16004 padding-left: 10%;
16005 font: 400 14px 'Montserrat', sans-serif;
16006 }
16007
16008 .content-centered {
16009 padding-left: 10%;
16010 padding-right: 10%;
16011 font: 400 14px 'Montserrat', sans-serif;
16012 }
16013
16014 .content-centered-big {
16015 padding-left: 5%;
16016 padding-right: 5%;
16017 font: 400 14px 'Montserrat', sans-serif;
16018 }
16019
16020 h1 {
16021 font: 400 18px 'Montserrat', sans-serif;
16022 }
16023
16024 .memberList {
16025 display: table;
16026 }
16027
16028 .memberItem {
16029 display: table-row;
16030 }
16031
16032 .memberName, .memberValue {
16033 display: table-cell;
16034 vertical-align: top;
16035 padding: 3px 0 3px 1em;
16036 font: 400 14px 'Montserrat', sans-serif;
16037 }
16038
16039 .memberSmall {
16040 display: table-cell;
16041 vertical-align: top;
16042 padding: 3px 0 3px 1em;
16043 font: 400 12px 'Montserrat', sans-serif;
16044 }
16045
16046 .monospace {
16047 font-family: consolas, courier, monospace;
16048 font-size: 1em;
16049 line-height: 1.2em;
16050 white-space: nowrap;
16051 }
16052
16053 a {
16054 color: #0489c3;
16055 text-decoration: none;
16056 }
16057
16058 a:hover {
16059 text-decoration: underline;
16060 }
16061
16062 em {
16063 color: inherit;
16064 font-style: italic;
16065 }
16066
16067 b {
16068 color: inherit;
16069 font-weight: bold;
16070 }
16071
16072 hr {
16073 margin-top: 20px;
16074 margin-bottom: 20px;
16075 border: 0;
16076 border-top: 1px solid #eee;
16077 height: 0;
16078 box-sizing: content-box;
16079 }
16080
16081 .list-group {
16082 padding-left: 0;
16083 margin-bottom: 20px;
16084 }
16085
16086 .list-group-item {
16087 position: relative;
16088 display: block;
16089 padding: 10px 15px;
16090 margin-bottom: -1px;
16091 background-color: #fff;
16092 }
16093
16094 .list-group-item:first-child {
16095 /* rounded top corners */
16096 border-top-right-radius:4px;
16097 border-top-left-radius:4px;
16098 }
16099
16100 .list-group-item:last-child {
16101 margin-bottom: 0;
16102 /* rounded bottom corners */
16103 border-bottom-right-radius: 4px;
16104 border-bottom-left-radius:4px;
16105 }
16106
16107 /* Flex row container */
16108 .flex-row {
16109 display: flex;
16110 flex-direction: row;
16111 }
16112
16113 /* Flex column container */
16114 .flex-column {
16115 display: flex;
16116 flex-direction: column;
16117 }
16118
16119 .flex-item-fit {
16120 flex-grow: 1;
16121 flex-shrink: 1;
16122 flex-basis: auto;
16123 }
16124
16125 .flex-item-no-shrink {
16126 flex-grow: 0;
16127 flex-shrink: 0;
16128 flex-basis: auto;
16129 }
16130
16131 .flex-item-fill {
16132 flex-grow: 0;
16133 flex-shrink: 1; /* shrink when pressured */
16134 flex-basis: 100%; /* try and take 100% */
16135 }
16136
16137 .flex-item-fixed-1-12 {
16138 flex-grow: 0;
16139 flex-shrink: 0;
16140 flex-basis: 8.3%;
16141 }
16142
16143 .flex-item-fixed-2-12 {
16144 flex-grow: 0;
16145 flex-shrink: 0;
16146 flex-basis: 16.6%;
16147 }
16148
16149 .flex-item-fixed-4-12 {
16150 flex-grow: 0;
16151 flex-shrink: 0;
16152 flex-basis: 33.3333%;
16153 }
16154
16155 .flex-item-fixed-6-12, .flex-item-50-percent {
16156 flex-grow: 0;
16157 flex-shrink: 0;
16158 flex-basis: 50%;
16159 }
16160
16161 .flex-item-fixed-8-12 {
16162 flex-grow: 0;
16163 flex-shrink: 0;
16164 flex-basis: 66.6666%;
16165 }
16166
16167 .flex-item-fixed-9-12 {
16168 flex-grow: 0;
16169 flex-shrink: 0;
16170 flex-basis: 75%;
16171 }
16172
16173
16174 .flex-item-fixed-12-12 {
16175 flex-grow: 0;
16176 flex-shrink: 0;
16177 flex-basis: 100%;
16178 }
16179
16180 .flex-item-10-percent {
16181 flex-grow: 0;
16182 flex-shrink: 0;
16183 flex-basis: 10%;
16184 }
16185
16186 .flex-item-15-percent {
16187 flex-grow: 0;
16188 flex-shrink: 0;
16189 flex-basis: 15%;
16190 }
16191
16192 .flex-item-20-percent {
16193 flex-grow: 0;
16194 flex-shrink: 0;
16195 flex-basis: 20%;
16196 }
16197
16198 .flex-item-30-percent {
16199 flex-grow: 0;
16200 flex-shrink: 0;
16201 flex-basis: 30%;
16202 }
16203
16204 .flex-item-40-percent {
16205 flex-grow: 0;
16206 flex-shrink: 0;
16207 flex-basis: 40%;
16208 }
16209
16210 .flex-item-50-percent {
16211 flex-grow: 0;
16212 flex-shrink: 0;
16213 flex-basis: 50%;
16214 }
16215
16216 .flex-item-60-percent {
16217 flex-grow: 0;
16218 flex-shrink: 0;
16219 flex-basis: 60%;
16220 }
16221
16222 .flex-item-70-percent {
16223 flex-grow: 0;
16224 flex-shrink: 0;
16225 flex-basis: 70%;
16226 }
16227
16228 .flex-item-80-percent {
16229 flex-grow: 0;
16230 flex-shrink: 0;
16231 flex-basis: 80%;
16232 }
16233
16234 .well {
16235 min-height: 20px;
16236 padding: 19px;
16237 margin-bottom: 20px;
16238 background-color: #f5f5f5;
16239 border: 1px solid #e3e3e3;
16240 border-radius: 4px;
16241 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
16242 }
16243
16244 .break-wrap {
16245 word-wrap: break-word;
16246 }
16247 </style>
16248 <div class="memberList">
16249
16250 <div class="memberItem">
16251 <div class="memberName">class</div>
16252 <div class="memberValue">
16253 <class-ref ref="{{ object.clazz }}"></class-ref>
16254 </div>
16255 </div>
16256
16257 <template if="{{ object.size != null }}">
16258 <div class="memberItem" title="Space for this object in memory">
16259 <div class="memberName">size</div>
16260 <div class="memberValue">{{ object.size | formatSize }}</div>
16261 </div>
16262 </template>
16263
16264 <template if="{{ object.size == null }}">
16265 <div class="memberItem" title="Space for this object in memory">
16266 <div class="memberName">size</div>
16267 <div class="memberValue">0</div>
16268 </div>
16269 </template>
16270
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>
16305 </template>
16306 <template if="{{ path['length'] > path['elements'].length }}">
16307 showing {{ path['elements'].length }} of {{ path['length'] }}
16308 <eval-link callback="{{ retainingPath }}" label="[find more]" expr ="{{ path['elements'].length * 2 }}">
16309 </eval-link>
16310 </template>
16311 </template>
16312 </div>
16313 </div>
16314
16315 <div class="memberItem" title="Objects which directly reference this objec t">
16316 <div class="memberName">inbound references</div>
16317 <div class="memberValue">
16318 <template if="{{ inboundReferences == null }}">
16319 <eval-link callback="{{ fetchInboundReferences }}" label="[find]" ex pr="100">
16320 </eval-link>
16321 </template>
16322 <template if="{{ inboundReferences != null }}">
16323 <template repeat="{{ reference in inboundReferences['references'] }} ">
16324 <inbound-reference ref="{{ reference }}"></inbound-reference>
16325 </template>
16326 </template>
16327 </div>
16328 </div>
16329
16330 </div>
16331 </template>
16332 </polymer-element>
16333
16334
16335
16336
16337
16338
16339
16340
16341 <polymer-element name="context-ref" extends="service-ref">
16342 <template>
16343 <style>/* Global styles */
16344 * {
16345 margin: 0;
16346 padding: 0;
16347 font: 400 14px 'Montserrat', sans-serif;
16348 color: #333;
16349 box-sizing: border-box;
16350 }
16351
16352 .content {
16353 padding-left: 10%;
16354 font: 400 14px 'Montserrat', sans-serif;
16355 }
16356
16357 .content-centered {
16358 padding-left: 10%;
16359 padding-right: 10%;
16360 font: 400 14px 'Montserrat', sans-serif;
16361 }
16362
16363 .content-centered-big {
16364 padding-left: 5%;
16365 padding-right: 5%;
16366 font: 400 14px 'Montserrat', sans-serif;
16367 }
16368
16369 h1 {
16370 font: 400 18px 'Montserrat', sans-serif;
16371 }
16372
16373 .memberList {
16374 display: table;
16375 }
16376
16377 .memberItem {
16378 display: table-row;
16379 }
16380
16381 .memberName, .memberValue {
16382 display: table-cell;
16383 vertical-align: top;
16384 padding: 3px 0 3px 1em;
16385 font: 400 14px 'Montserrat', sans-serif;
16386 }
16387
16388 .memberSmall {
16389 display: table-cell;
16390 vertical-align: top;
16391 padding: 3px 0 3px 1em;
16392 font: 400 12px 'Montserrat', sans-serif;
16393 }
16394
16395 .monospace {
16396 font-family: consolas, courier, monospace;
16397 font-size: 1em;
16398 line-height: 1.2em;
16399 white-space: nowrap;
16400 }
16401
16402 a {
16403 color: #0489c3;
16404 text-decoration: none;
16405 }
16406
16407 a:hover {
16408 text-decoration: underline;
16409 }
16410
16411 em {
16412 color: inherit;
16413 font-style: italic;
16414 }
16415
16416 b {
16417 color: inherit;
16418 font-weight: bold;
16419 }
16420
16421 hr {
16422 margin-top: 20px;
16423 margin-bottom: 20px;
16424 border: 0;
16425 border-top: 1px solid #eee;
16426 height: 0;
16427 box-sizing: content-box;
16428 }
16429
16430 .list-group {
16431 padding-left: 0;
16432 margin-bottom: 20px;
16433 }
16434
16435 .list-group-item {
16436 position: relative;
16437 display: block;
16438 padding: 10px 15px;
16439 margin-bottom: -1px;
16440 background-color: #fff;
16441 }
16442
16443 .list-group-item:first-child {
16444 /* rounded top corners */
16445 border-top-right-radius:4px;
16446 border-top-left-radius:4px;
16447 }
16448
16449 .list-group-item:last-child {
16450 margin-bottom: 0;
16451 /* rounded bottom corners */
16452 border-bottom-right-radius: 4px;
16453 border-bottom-left-radius:4px;
16454 }
16455
16456 /* Flex row container */
16457 .flex-row {
16458 display: flex;
16459 flex-direction: row;
16460 }
16461
16462 /* Flex column container */
16463 .flex-column {
16464 display: flex;
16465 flex-direction: column;
16466 }
16467
16468 .flex-item-fit {
16469 flex-grow: 1;
16470 flex-shrink: 1;
16471 flex-basis: auto;
16472 }
16473
16474 .flex-item-no-shrink {
16475 flex-grow: 0;
16476 flex-shrink: 0;
16477 flex-basis: auto;
16478 }
16479
16480 .flex-item-fill {
16481 flex-grow: 0;
16482 flex-shrink: 1; /* shrink when pressured */
16483 flex-basis: 100%; /* try and take 100% */
16484 }
16485
16486 .flex-item-fixed-1-12 {
16487 flex-grow: 0;
16488 flex-shrink: 0;
16489 flex-basis: 8.3%;
16490 }
16491
16492 .flex-item-fixed-2-12 {
16493 flex-grow: 0;
16494 flex-shrink: 0;
16495 flex-basis: 16.6%;
16496 }
16497
16498 .flex-item-fixed-4-12 {
16499 flex-grow: 0;
16500 flex-shrink: 0;
16501 flex-basis: 33.3333%;
16502 }
16503
16504 .flex-item-fixed-6-12, .flex-item-50-percent {
16505 flex-grow: 0;
16506 flex-shrink: 0;
16507 flex-basis: 50%;
16508 }
16509
16510 .flex-item-fixed-8-12 {
16511 flex-grow: 0;
16512 flex-shrink: 0;
16513 flex-basis: 66.6666%;
16514 }
16515
16516 .flex-item-fixed-9-12 {
16517 flex-grow: 0;
16518 flex-shrink: 0;
16519 flex-basis: 75%;
16520 }
16521
16522
16523 .flex-item-fixed-12-12 {
16524 flex-grow: 0;
16525 flex-shrink: 0;
16526 flex-basis: 100%;
16527 }
16528
16529 .flex-item-10-percent {
16530 flex-grow: 0;
16531 flex-shrink: 0;
16532 flex-basis: 10%;
16533 }
16534
16535 .flex-item-15-percent {
16536 flex-grow: 0;
16537 flex-shrink: 0;
16538 flex-basis: 15%;
16539 }
16540
16541 .flex-item-20-percent {
16542 flex-grow: 0;
16543 flex-shrink: 0;
16544 flex-basis: 20%;
16545 }
16546
16547 .flex-item-30-percent {
16548 flex-grow: 0;
16549 flex-shrink: 0;
16550 flex-basis: 30%;
16551 }
16552
16553 .flex-item-40-percent {
16554 flex-grow: 0;
16555 flex-shrink: 0;
16556 flex-basis: 40%;
16557 }
16558
16559 .flex-item-50-percent {
16560 flex-grow: 0;
16561 flex-shrink: 0;
16562 flex-basis: 50%;
16563 }
16564
16565 .flex-item-60-percent {
16566 flex-grow: 0;
16567 flex-shrink: 0;
16568 flex-basis: 60%;
16569 }
16570
16571 .flex-item-70-percent {
16572 flex-grow: 0;
16573 flex-shrink: 0;
16574 flex-basis: 70%;
16575 }
16576
16577 .flex-item-80-percent {
16578 flex-grow: 0;
16579 flex-shrink: 0;
16580 flex-basis: 80%;
16581 }
16582
16583 .well {
16584 min-height: 20px;
16585 padding: 19px;
16586 margin-bottom: 20px;
16587 background-color: #f5f5f5;
16588 border: 1px solid #e3e3e3;
16589 border-radius: 4px;
16590 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
16591 }
16592
16593 .break-wrap {
16594 word-wrap: break-word;
16595 }
16596 </style>
16597 <span>
16598 <a on-click="{{ goto }}" _href="{{ url }}"><em>Context</em> ({{ ref.length }})</a>
16599 <curly-block callback="{{ expander() }}">
16600 <div class="memberList">
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>
16615 </div>
16616 </curly-block>
16617 </span>
16618 </template>
16619 </polymer-element>
16620
16621
16622
16623
16624 <polymer-element name="instance-view" extends="observatory-element">
16625 <template>
16626 <style>/* Global styles */
16627 * {
16628 margin: 0;
16629 padding: 0;
16630 font: 400 14px 'Montserrat', sans-serif;
16631 color: #333;
16632 box-sizing: border-box;
16633 }
16634
16635 .content {
16636 padding-left: 10%;
16637 font: 400 14px 'Montserrat', sans-serif;
16638 }
16639
16640 .content-centered {
16641 padding-left: 10%;
16642 padding-right: 10%;
16643 font: 400 14px 'Montserrat', sans-serif;
16644 }
16645
16646 .content-centered-big {
16647 padding-left: 5%;
16648 padding-right: 5%;
16649 font: 400 14px 'Montserrat', sans-serif;
16650 }
16651
16652 h1 {
16653 font: 400 18px 'Montserrat', sans-serif;
16654 }
16655
16656 .memberList {
16657 display: table;
16658 }
16659
16660 .memberItem {
16661 display: table-row;
16662 }
16663
16664 .memberName, .memberValue {
16665 display: table-cell;
16666 vertical-align: top;
16667 padding: 3px 0 3px 1em;
16668 font: 400 14px 'Montserrat', sans-serif;
16669 }
16670
16671 .memberSmall {
16672 display: table-cell;
16673 vertical-align: top;
16674 padding: 3px 0 3px 1em;
16675 font: 400 12px 'Montserrat', sans-serif;
16676 }
16677
16678 .monospace {
16679 font-family: consolas, courier, monospace;
16680 font-size: 1em;
16681 line-height: 1.2em;
16682 white-space: nowrap;
16683 }
16684
16685 a {
16686 color: #0489c3;
16687 text-decoration: none;
16688 }
16689
16690 a:hover {
16691 text-decoration: underline;
16692 }
16693
16694 em {
16695 color: inherit;
16696 font-style: italic;
16697 }
16698
16699 b {
16700 color: inherit;
16701 font-weight: bold;
16702 }
16703
16704 hr {
16705 margin-top: 20px;
16706 margin-bottom: 20px;
16707 border: 0;
16708 border-top: 1px solid #eee;
16709 height: 0;
16710 box-sizing: content-box;
16711 }
16712
16713 .list-group {
16714 padding-left: 0;
16715 margin-bottom: 20px;
16716 }
16717
16718 .list-group-item {
16719 position: relative;
16720 display: block;
16721 padding: 10px 15px;
16722 margin-bottom: -1px;
16723 background-color: #fff;
16724 }
16725
16726 .list-group-item:first-child {
16727 /* rounded top corners */
16728 border-top-right-radius:4px;
16729 border-top-left-radius:4px;
16730 }
16731
16732 .list-group-item:last-child {
16733 margin-bottom: 0;
16734 /* rounded bottom corners */
16735 border-bottom-right-radius: 4px;
16736 border-bottom-left-radius:4px;
16737 }
16738
16739 /* Flex row container */
16740 .flex-row {
16741 display: flex;
16742 flex-direction: row;
16743 }
16744
16745 /* Flex column container */
16746 .flex-column {
16747 display: flex;
16748 flex-direction: column;
16749 }
16750
16751 .flex-item-fit {
16752 flex-grow: 1;
16753 flex-shrink: 1;
16754 flex-basis: auto;
16755 }
16756
16757 .flex-item-no-shrink {
16758 flex-grow: 0;
16759 flex-shrink: 0;
16760 flex-basis: auto;
16761 }
16762
16763 .flex-item-fill {
16764 flex-grow: 0;
16765 flex-shrink: 1; /* shrink when pressured */
16766 flex-basis: 100%; /* try and take 100% */
16767 }
16768
16769 .flex-item-fixed-1-12 {
16770 flex-grow: 0;
16771 flex-shrink: 0;
16772 flex-basis: 8.3%;
16773 }
16774
16775 .flex-item-fixed-2-12 {
16776 flex-grow: 0;
16777 flex-shrink: 0;
16778 flex-basis: 16.6%;
16779 }
16780
16781 .flex-item-fixed-4-12 {
16782 flex-grow: 0;
16783 flex-shrink: 0;
16784 flex-basis: 33.3333%;
16785 }
16786
16787 .flex-item-fixed-6-12, .flex-item-50-percent {
16788 flex-grow: 0;
16789 flex-shrink: 0;
16790 flex-basis: 50%;
16791 }
16792
16793 .flex-item-fixed-8-12 {
16794 flex-grow: 0;
16795 flex-shrink: 0;
16796 flex-basis: 66.6666%;
16797 }
16798
16799 .flex-item-fixed-9-12 {
16800 flex-grow: 0;
16801 flex-shrink: 0;
16802 flex-basis: 75%;
16803 }
16804
16805
16806 .flex-item-fixed-12-12 {
16807 flex-grow: 0;
16808 flex-shrink: 0;
16809 flex-basis: 100%;
16810 }
16811
16812 .flex-item-10-percent {
16813 flex-grow: 0;
16814 flex-shrink: 0;
16815 flex-basis: 10%;
16816 }
16817
16818 .flex-item-15-percent {
16819 flex-grow: 0;
16820 flex-shrink: 0;
16821 flex-basis: 15%;
16822 }
16823
16824 .flex-item-20-percent {
16825 flex-grow: 0;
16826 flex-shrink: 0;
16827 flex-basis: 20%;
16828 }
16829
16830 .flex-item-30-percent {
16831 flex-grow: 0;
16832 flex-shrink: 0;
16833 flex-basis: 30%;
16834 }
16835
16836 .flex-item-40-percent {
16837 flex-grow: 0;
16838 flex-shrink: 0;
16839 flex-basis: 40%;
16840 }
16841
16842 .flex-item-50-percent {
16843 flex-grow: 0;
16844 flex-shrink: 0;
16845 flex-basis: 50%;
16846 }
16847
16848 .flex-item-60-percent {
16849 flex-grow: 0;
16850 flex-shrink: 0;
16851 flex-basis: 60%;
16852 }
16853
16854 .flex-item-70-percent {
16855 flex-grow: 0;
16856 flex-shrink: 0;
16857 flex-basis: 70%;
16858 }
16859
16860 .flex-item-80-percent {
16861 flex-grow: 0;
16862 flex-shrink: 0;
16863 flex-basis: 80%;
16864 }
16865
16866 .well {
16867 min-height: 20px;
16868 padding: 19px;
16869 margin-bottom: 20px;
16870 background-color: #f5f5f5;
16871 border: 1px solid #e3e3e3;
16872 border-radius: 4px;
16873 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
16874 }
16875
16876 .break-wrap {
16877 word-wrap: break-word;
16878 }
16879 </style>
16880 <nav-bar>
16881 <top-nav-menu></top-nav-menu>
16882 <isolate-nav-menu isolate="{{ instance.isolate }}"></isolate-nav-menu>
16883 <!-- TODO(turnidge): Add library nav menu here. -->
16884 <class-nav-menu cls="{{ instance.clazz }}"></class-nav-menu>
16885 <nav-menu link="." anchor="instance" last="{{ true }}"></nav-menu>
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>
17049 </template>
17050 </polymer-element>
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
17066
17067
17068
17069
17070
17071
17072
17073
17074
17075
17076
17077
17078
17079
17080
17081 <polymer-element name="library-view" extends="observatory-element">
17082 <template>
17083 <style>/* Global styles */
17084 * {
17085 margin: 0;
17086 padding: 0;
17087 font: 400 14px 'Montserrat', sans-serif;
17088 color: #333;
17089 box-sizing: border-box;
17090 }
17091
17092 .content {
17093 padding-left: 10%;
17094 font: 400 14px 'Montserrat', sans-serif;
17095 }
17096
17097 .content-centered {
17098 padding-left: 10%;
17099 padding-right: 10%;
17100 font: 400 14px 'Montserrat', sans-serif;
17101 }
17102
17103 .content-centered-big {
17104 padding-left: 5%;
17105 padding-right: 5%;
17106 font: 400 14px 'Montserrat', sans-serif;
17107 }
17108
17109 h1 {
17110 font: 400 18px 'Montserrat', sans-serif;
17111 }
17112
17113 .memberList {
17114 display: table;
17115 }
17116
17117 .memberItem {
17118 display: table-row;
17119 }
17120
17121 .memberName, .memberValue {
17122 display: table-cell;
17123 vertical-align: top;
17124 padding: 3px 0 3px 1em;
17125 font: 400 14px 'Montserrat', sans-serif;
17126 }
17127
17128 .memberSmall {
17129 display: table-cell;
17130 vertical-align: top;
17131 padding: 3px 0 3px 1em;
17132 font: 400 12px 'Montserrat', sans-serif;
17133 }
17134
17135 .monospace {
17136 font-family: consolas, courier, monospace;
17137 font-size: 1em;
17138 line-height: 1.2em;
17139 white-space: nowrap;
17140 }
17141
17142 a {
17143 color: #0489c3;
17144 text-decoration: none;
17145 }
17146
17147 a:hover {
17148 text-decoration: underline;
17149 }
17150
17151 em {
17152 color: inherit;
17153 font-style: italic;
17154 }
17155
17156 b {
17157 color: inherit;
17158 font-weight: bold;
17159 }
17160
17161 hr {
17162 margin-top: 20px;
17163 margin-bottom: 20px;
17164 border: 0;
17165 border-top: 1px solid #eee;
17166 height: 0;
17167 box-sizing: content-box;
17168 }
17169
17170 .list-group {
17171 padding-left: 0;
17172 margin-bottom: 20px;
17173 }
17174
17175 .list-group-item {
17176 position: relative;
17177 display: block;
17178 padding: 10px 15px;
17179 margin-bottom: -1px;
17180 background-color: #fff;
17181 }
17182
17183 .list-group-item:first-child {
17184 /* rounded top corners */
17185 border-top-right-radius:4px;
17186 border-top-left-radius:4px;
17187 }
17188
17189 .list-group-item:last-child {
17190 margin-bottom: 0;
17191 /* rounded bottom corners */
17192 border-bottom-right-radius: 4px;
17193 border-bottom-left-radius:4px;
17194 }
17195
17196 /* Flex row container */
17197 .flex-row {
17198 display: flex;
17199 flex-direction: row;
17200 }
17201
17202 /* Flex column container */
17203 .flex-column {
17204 display: flex;
17205 flex-direction: column;
17206 }
17207
17208 .flex-item-fit {
17209 flex-grow: 1;
17210 flex-shrink: 1;
17211 flex-basis: auto;
17212 }
17213
17214 .flex-item-no-shrink {
17215 flex-grow: 0;
17216 flex-shrink: 0;
17217 flex-basis: auto;
17218 }
17219
17220 .flex-item-fill {
17221 flex-grow: 0;
17222 flex-shrink: 1; /* shrink when pressured */
17223 flex-basis: 100%; /* try and take 100% */
17224 }
17225
17226 .flex-item-fixed-1-12 {
17227 flex-grow: 0;
17228 flex-shrink: 0;
17229 flex-basis: 8.3%;
17230 }
17231
17232 .flex-item-fixed-2-12 {
17233 flex-grow: 0;
17234 flex-shrink: 0;
17235 flex-basis: 16.6%;
17236 }
17237
17238 .flex-item-fixed-4-12 {
17239 flex-grow: 0;
17240 flex-shrink: 0;
17241 flex-basis: 33.3333%;
17242 }
17243
17244 .flex-item-fixed-6-12, .flex-item-50-percent {
17245 flex-grow: 0;
17246 flex-shrink: 0;
17247 flex-basis: 50%;
17248 }
17249
17250 .flex-item-fixed-8-12 {
17251 flex-grow: 0;
17252 flex-shrink: 0;
17253 flex-basis: 66.6666%;
17254 }
17255
17256 .flex-item-fixed-9-12 {
17257 flex-grow: 0;
17258 flex-shrink: 0;
17259 flex-basis: 75%;
17260 }
17261
17262
17263 .flex-item-fixed-12-12 {
17264 flex-grow: 0;
17265 flex-shrink: 0;
17266 flex-basis: 100%;
17267 }
17268
17269 .flex-item-10-percent {
17270 flex-grow: 0;
17271 flex-shrink: 0;
17272 flex-basis: 10%;
17273 }
17274
17275 .flex-item-15-percent {
17276 flex-grow: 0;
17277 flex-shrink: 0;
17278 flex-basis: 15%;
17279 }
17280
17281 .flex-item-20-percent {
17282 flex-grow: 0;
17283 flex-shrink: 0;
17284 flex-basis: 20%;
17285 }
17286
17287 .flex-item-30-percent {
17288 flex-grow: 0;
17289 flex-shrink: 0;
17290 flex-basis: 30%;
17291 }
17292
17293 .flex-item-40-percent {
17294 flex-grow: 0;
17295 flex-shrink: 0;
17296 flex-basis: 40%;
17297 }
17298
17299 .flex-item-50-percent {
17300 flex-grow: 0;
17301 flex-shrink: 0;
17302 flex-basis: 50%;
17303 }
17304
17305 .flex-item-60-percent {
17306 flex-grow: 0;
17307 flex-shrink: 0;
17308 flex-basis: 60%;
17309 }
17310
17311 .flex-item-70-percent {
17312 flex-grow: 0;
17313 flex-shrink: 0;
17314 flex-basis: 70%;
17315 }
17316
17317 .flex-item-80-percent {
17318 flex-grow: 0;
17319 flex-shrink: 0;
17320 flex-basis: 80%;
17321 }
17322
17323 .well {
17324 min-height: 20px;
17325 padding: 19px;
17326 margin-bottom: 20px;
17327 background-color: #f5f5f5;
17328 border: 1px solid #e3e3e3;
17329 border-radius: 4px;
17330 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
17331 }
17332
17333 .break-wrap {
17334 word-wrap: break-word;
17335 }
17336 </style>
17337
17338 <nav-bar>
17339 <top-nav-menu></top-nav-menu>
17340 <isolate-nav-menu isolate="{{ library.isolate }}"></isolate-nav-menu>
17341 <library-nav-menu library="{{ library }}" last="{{ true }}"></library-nav- menu>
17342 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></n av-refresh>
17343 <nav-refresh callback="{{ refresh }}"></nav-refresh>
17344 <nav-control></nav-control>
17345 </nav-bar>
17346
17347 <div class="content">
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>
17364 </div>
17365
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>
17462 </template>
17463 </polymer-element>
17464
17465
17466
17467
17468
17469
17470
17471 <polymer-element name="metrics-page" extends="observatory-element">
17472 <template>
17473 <style>/* Global styles */
17474 * {
17475 margin: 0;
17476 padding: 0;
17477 font: 400 14px 'Montserrat', sans-serif;
17478 color: #333;
17479 box-sizing: border-box;
17480 }
17481
17482 .content {
17483 padding-left: 10%;
17484 font: 400 14px 'Montserrat', sans-serif;
17485 }
17486
17487 .content-centered {
17488 padding-left: 10%;
17489 padding-right: 10%;
17490 font: 400 14px 'Montserrat', sans-serif;
17491 }
17492
17493 .content-centered-big {
17494 padding-left: 5%;
17495 padding-right: 5%;
17496 font: 400 14px 'Montserrat', sans-serif;
17497 }
17498
17499 h1 {
17500 font: 400 18px 'Montserrat', sans-serif;
17501 }
17502
17503 .memberList {
17504 display: table;
17505 }
17506
17507 .memberItem {
17508 display: table-row;
17509 }
17510
17511 .memberName, .memberValue {
17512 display: table-cell;
17513 vertical-align: top;
17514 padding: 3px 0 3px 1em;
17515 font: 400 14px 'Montserrat', sans-serif;
17516 }
17517
17518 .memberSmall {
17519 display: table-cell;
17520 vertical-align: top;
17521 padding: 3px 0 3px 1em;
17522 font: 400 12px 'Montserrat', sans-serif;
17523 }
17524
17525 .monospace {
17526 font-family: consolas, courier, monospace;
17527 font-size: 1em;
17528 line-height: 1.2em;
17529 white-space: nowrap;
17530 }
17531
17532 a {
17533 color: #0489c3;
17534 text-decoration: none;
17535 }
17536
17537 a:hover {
17538 text-decoration: underline;
17539 }
17540
17541 em {
17542 color: inherit;
17543 font-style: italic;
17544 }
17545
17546 b {
17547 color: inherit;
17548 font-weight: bold;
17549 }
17550
17551 hr {
17552 margin-top: 20px;
17553 margin-bottom: 20px;
17554 border: 0;
17555 border-top: 1px solid #eee;
17556 height: 0;
17557 box-sizing: content-box;
17558 }
17559
17560 .list-group {
17561 padding-left: 0;
17562 margin-bottom: 20px;
17563 }
17564
17565 .list-group-item {
17566 position: relative;
17567 display: block;
17568 padding: 10px 15px;
17569 margin-bottom: -1px;
17570 background-color: #fff;
17571 }
17572
17573 .list-group-item:first-child {
17574 /* rounded top corners */
17575 border-top-right-radius:4px;
17576 border-top-left-radius:4px;
17577 }
17578
17579 .list-group-item:last-child {
17580 margin-bottom: 0;
17581 /* rounded bottom corners */
17582 border-bottom-right-radius: 4px;
17583 border-bottom-left-radius:4px;
17584 }
17585
17586 /* Flex row container */
17587 .flex-row {
17588 display: flex;
17589 flex-direction: row;
17590 }
17591
17592 /* Flex column container */
17593 .flex-column {
17594 display: flex;
17595 flex-direction: column;
17596 }
17597
17598 .flex-item-fit {
17599 flex-grow: 1;
17600 flex-shrink: 1;
17601 flex-basis: auto;
17602 }
17603
17604 .flex-item-no-shrink {
17605 flex-grow: 0;
17606 flex-shrink: 0;
17607 flex-basis: auto;
17608 }
17609
17610 .flex-item-fill {
17611 flex-grow: 0;
17612 flex-shrink: 1; /* shrink when pressured */
17613 flex-basis: 100%; /* try and take 100% */
17614 }
17615
17616 .flex-item-fixed-1-12 {
17617 flex-grow: 0;
17618 flex-shrink: 0;
17619 flex-basis: 8.3%;
17620 }
17621
17622 .flex-item-fixed-2-12 {
17623 flex-grow: 0;
17624 flex-shrink: 0;
17625 flex-basis: 16.6%;
17626 }
17627
17628 .flex-item-fixed-4-12 {
17629 flex-grow: 0;
17630 flex-shrink: 0;
17631 flex-basis: 33.3333%;
17632 }
17633
17634 .flex-item-fixed-6-12, .flex-item-50-percent {
17635 flex-grow: 0;
17636 flex-shrink: 0;
17637 flex-basis: 50%;
17638 }
17639
17640 .flex-item-fixed-8-12 {
17641 flex-grow: 0;
17642 flex-shrink: 0;
17643 flex-basis: 66.6666%;
17644 }
17645
17646 .flex-item-fixed-9-12 {
17647 flex-grow: 0;
17648 flex-shrink: 0;
17649 flex-basis: 75%;
17650 }
17651
17652
17653 .flex-item-fixed-12-12 {
17654 flex-grow: 0;
17655 flex-shrink: 0;
17656 flex-basis: 100%;
17657 }
17658
17659 .flex-item-10-percent {
17660 flex-grow: 0;
17661 flex-shrink: 0;
17662 flex-basis: 10%;
17663 }
17664
17665 .flex-item-15-percent {
17666 flex-grow: 0;
17667 flex-shrink: 0;
17668 flex-basis: 15%;
17669 }
17670
17671 .flex-item-20-percent {
17672 flex-grow: 0;
17673 flex-shrink: 0;
17674 flex-basis: 20%;
17675 }
17676
17677 .flex-item-30-percent {
17678 flex-grow: 0;
17679 flex-shrink: 0;
17680 flex-basis: 30%;
17681 }
17682
17683 .flex-item-40-percent {
17684 flex-grow: 0;
17685 flex-shrink: 0;
17686 flex-basis: 40%;
17687 }
17688
17689 .flex-item-50-percent {
17690 flex-grow: 0;
17691 flex-shrink: 0;
17692 flex-basis: 50%;
17693 }
17694
17695 .flex-item-60-percent {
17696 flex-grow: 0;
17697 flex-shrink: 0;
17698 flex-basis: 60%;
17699 }
17700
17701 .flex-item-70-percent {
17702 flex-grow: 0;
17703 flex-shrink: 0;
17704 flex-basis: 70%;
17705 }
17706
17707 .flex-item-80-percent {
17708 flex-grow: 0;
17709 flex-shrink: 0;
17710 flex-basis: 80%;
17711 }
17712
17713 .well {
17714 min-height: 20px;
17715 padding: 19px;
17716 margin-bottom: 20px;
17717 background-color: #f5f5f5;
17718 border: 1px solid #e3e3e3;
17719 border-radius: 4px;
17720 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
17721 }
17722
17723 .break-wrap {
17724 word-wrap: break-word;
17725 }
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>
17738 <nav-bar>
17739 <top-nav-menu last="{{ true }}"></top-nav-menu>
17740 <nav-refresh callback="{{ refresh }}"></nav-refresh>
17741 <nav-control></nav-control>
17742 </nav-bar>
17743 <div class="flex-row">
17744 <div class="flex-item-20-percent">
17745 <ul>
17746 <template repeat="{{ metric in isolate.dartMetrics.values }}">
17747 <template if="{{ metric == selectedMetric }}">
17748 <li class="selected">
17749 {{ metric.name }}
17750 </li>
17751 </template>
17752 <template if="{{ metric != selectedMetric }}">
17753 <li on-click="{{ selectMetric }}" data-id="{{ metric.id }}">
17754 {{ metric.name }}
17755 </li>
17756 </template>
17757 </template>
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>
17778 </div>
17779 </div>
17780 </div>
17781 </template>
17782 </polymer-element>
17783
17784 <polymer-element name="metric-details" extends="observatory-element">
17785 <template>
17786 <style>/* Global styles */
17787 * {
17788 margin: 0;
17789 padding: 0;
17790 font: 400 14px 'Montserrat', sans-serif;
17791 color: #333;
17792 box-sizing: border-box;
17793 }
17794
17795 .content {
17796 padding-left: 10%;
17797 font: 400 14px 'Montserrat', sans-serif;
17798 }
17799
17800 .content-centered {
17801 padding-left: 10%;
17802 padding-right: 10%;
17803 font: 400 14px 'Montserrat', sans-serif;
17804 }
17805
17806 .content-centered-big {
17807 padding-left: 5%;
17808 padding-right: 5%;
17809 font: 400 14px 'Montserrat', sans-serif;
17810 }
17811
17812 h1 {
17813 font: 400 18px 'Montserrat', sans-serif;
17814 }
17815
17816 .memberList {
17817 display: table;
17818 }
17819
17820 .memberItem {
17821 display: table-row;
17822 }
17823
17824 .memberName, .memberValue {
17825 display: table-cell;
17826 vertical-align: top;
17827 padding: 3px 0 3px 1em;
17828 font: 400 14px 'Montserrat', sans-serif;
17829 }
17830
17831 .memberSmall {
17832 display: table-cell;
17833 vertical-align: top;
17834 padding: 3px 0 3px 1em;
17835 font: 400 12px 'Montserrat', sans-serif;
17836 }
17837
17838 .monospace {
17839 font-family: consolas, courier, monospace;
17840 font-size: 1em;
17841 line-height: 1.2em;
17842 white-space: nowrap;
17843 }
17844
17845 a {
17846 color: #0489c3;
17847 text-decoration: none;
17848 }
17849
17850 a:hover {
17851 text-decoration: underline;
17852 }
17853
17854 em {
17855 color: inherit;
17856 font-style: italic;
17857 }
17858
17859 b {
17860 color: inherit;
17861 font-weight: bold;
17862 }
17863
17864 hr {
17865 margin-top: 20px;
17866 margin-bottom: 20px;
17867 border: 0;
17868 border-top: 1px solid #eee;
17869 height: 0;
17870 box-sizing: content-box;
17871 }
17872
17873 .list-group {
17874 padding-left: 0;
17875 margin-bottom: 20px;
17876 }
17877
17878 .list-group-item {
17879 position: relative;
17880 display: block;
17881 padding: 10px 15px;
17882 margin-bottom: -1px;
17883 background-color: #fff;
17884 }
17885
17886 .list-group-item:first-child {
17887 /* rounded top corners */
17888 border-top-right-radius:4px;
17889 border-top-left-radius:4px;
17890 }
17891
17892 .list-group-item:last-child {
17893 margin-bottom: 0;
17894 /* rounded bottom corners */
17895 border-bottom-right-radius: 4px;
17896 border-bottom-left-radius:4px;
17897 }
17898
17899 /* Flex row container */
17900 .flex-row {
17901 display: flex;
17902 flex-direction: row;
17903 }
17904
17905 /* Flex column container */
17906 .flex-column {
17907 display: flex;
17908 flex-direction: column;
17909 }
17910
17911 .flex-item-fit {
17912 flex-grow: 1;
17913 flex-shrink: 1;
17914 flex-basis: auto;
17915 }
17916
17917 .flex-item-no-shrink {
17918 flex-grow: 0;
17919 flex-shrink: 0;
17920 flex-basis: auto;
17921 }
17922
17923 .flex-item-fill {
17924 flex-grow: 0;
17925 flex-shrink: 1; /* shrink when pressured */
17926 flex-basis: 100%; /* try and take 100% */
17927 }
17928
17929 .flex-item-fixed-1-12 {
17930 flex-grow: 0;
17931 flex-shrink: 0;
17932 flex-basis: 8.3%;
17933 }
17934
17935 .flex-item-fixed-2-12 {
17936 flex-grow: 0;
17937 flex-shrink: 0;
17938 flex-basis: 16.6%;
17939 }
17940
17941 .flex-item-fixed-4-12 {
17942 flex-grow: 0;
17943 flex-shrink: 0;
17944 flex-basis: 33.3333%;
17945 }
17946
17947 .flex-item-fixed-6-12, .flex-item-50-percent {
17948 flex-grow: 0;
17949 flex-shrink: 0;
17950 flex-basis: 50%;
17951 }
17952
17953 .flex-item-fixed-8-12 {
17954 flex-grow: 0;
17955 flex-shrink: 0;
17956 flex-basis: 66.6666%;
17957 }
17958
17959 .flex-item-fixed-9-12 {
17960 flex-grow: 0;
17961 flex-shrink: 0;
17962 flex-basis: 75%;
17963 }
17964
17965
17966 .flex-item-fixed-12-12 {
17967 flex-grow: 0;
17968 flex-shrink: 0;
17969 flex-basis: 100%;
17970 }
17971
17972 .flex-item-10-percent {
17973 flex-grow: 0;
17974 flex-shrink: 0;
17975 flex-basis: 10%;
17976 }
17977
17978 .flex-item-15-percent {
17979 flex-grow: 0;
17980 flex-shrink: 0;
17981 flex-basis: 15%;
17982 }
17983
17984 .flex-item-20-percent {
17985 flex-grow: 0;
17986 flex-shrink: 0;
17987 flex-basis: 20%;
17988 }
17989
17990 .flex-item-30-percent {
17991 flex-grow: 0;
17992 flex-shrink: 0;
17993 flex-basis: 30%;
17994 }
17995
17996 .flex-item-40-percent {
17997 flex-grow: 0;
17998 flex-shrink: 0;
17999 flex-basis: 40%;
18000 }
18001
18002 .flex-item-50-percent {
18003 flex-grow: 0;
18004 flex-shrink: 0;
18005 flex-basis: 50%;
18006 }
18007
18008 .flex-item-60-percent {
18009 flex-grow: 0;
18010 flex-shrink: 0;
18011 flex-basis: 60%;
18012 }
18013
18014 .flex-item-70-percent {
18015 flex-grow: 0;
18016 flex-shrink: 0;
18017 flex-basis: 70%;
18018 }
18019
18020 .flex-item-80-percent {
18021 flex-grow: 0;
18022 flex-shrink: 0;
18023 flex-basis: 80%;
18024 }
18025
18026 .well {
18027 min-height: 20px;
18028 padding: 19px;
18029 margin-bottom: 20px;
18030 background-color: #f5f5f5;
18031 border: 1px solid #e3e3e3;
18032 border-radius: 4px;
18033 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
18034 }
18035
18036 .break-wrap {
18037 word-wrap: break-word;
18038 }
18039 </style>
18040 <div class="content-centered">
18041 <div class="memberList">
18042 <div class="memberItem">
18043 <div class="memberName">name</div>
18044 <div class="memberValue">{{ metric.name }}</div>
18045 </div>
18046 <div class="memberItem">
18047 <div class="memberName">description</div>
18048 <div class="memberValue">{{ metric.description }}</div>
18049 </div>
18050 <div class="memberItem">
18051 <div class="memberName">current value</div>
18052 <div class="memberValue">{{ metric.value }}</div>
18053 </div>
18054 <template if="{{ (metric != null) &amp;&amp; (metric.min != null) }}">
18055 <div class="memberItem">
18056 <div class="memberName">minimum</div>
18057 <div class="memberValue">{{ metric.min }}</div>
18058 </div>
18059 </template>
18060 <template if="{{ (metric != null) &amp;&amp; (metric.max != null) }}">
18061 <div class="memberItem">
18062 <div class="memberName">maximum</div>
18063 <div class="memberValue">{{ metric.max }}</div>
18064 </div>
18065 </template>
18066 <div class="memberItem">
18067 <div class="memberName">refresh rate</div>
18068 <div class="memberValue">
18069 <select id="refreshrate" on-change="{{ refreshRateChange }}">
18070 <!-- These must be kept in sync with POLL_PERIODS in MetricsPage
18071 in object.dart -->
18072 <option value="8000">Every eight seconds</option>
18073 <option value="4000">Every four seconds</option>
18074 <option value="2000">Every two seconds</option>
18075 <option value="1000">Once a second</option>
18076 <option value="100">Ten times per second</option>
18077 <option value="0" selected="selected">Never</option>
18078 </select>
18079 </div>
18080 </div>
18081 <div class="memberItem">
18082 <div class="memberName">sample buffer size</div>
18083 <div class="memberValue">
18084 <select id="buffersize" on-change="{{ sampleBufferSizeChange }}">
18085 <option value="10">10</option>
18086 <option value="100" selected="selected">100</option>
18087 <option value="1000">1000</option>
18088 </select>
18089 </div>
18090 </div>
18091 </div>
18092 </div>
18093 </template>
18094 </polymer-element>
18095
18096 <polymer-element name="metrics-graph" extends="observatory-element">
18097 <template>
18098 <style>/* Global styles */
18099 * {
18100 margin: 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 4062
18990 <polymer-element name="heap-profile" extends="observatory-element"> 4063 <polymer-element name="heap-profile" extends="observatory-element">
18991 <template> 4064 <template>
18992 <style>/* Global styles */ 4065 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
18993 * {
18994 margin: 0;
18995 padding: 0;
18996 font: 400 14px 'Montserrat', sans-serif;
18997 color: #333;
18998 box-sizing: border-box;
18999 }
19000
19001 .content {
19002 padding-left: 10%;
19003 font: 400 14px 'Montserrat', sans-serif;
19004 }
19005
19006 .content-centered {
19007 padding-left: 10%;
19008 padding-right: 10%;
19009 font: 400 14px 'Montserrat', sans-serif;
19010 }
19011
19012 .content-centered-big {
19013 padding-left: 5%;
19014 padding-right: 5%;
19015 font: 400 14px 'Montserrat', sans-serif;
19016 }
19017
19018 h1 {
19019 font: 400 18px 'Montserrat', sans-serif;
19020 }
19021
19022 .memberList {
19023 display: table;
19024 }
19025
19026 .memberItem {
19027 display: table-row;
19028 }
19029
19030 .memberName, .memberValue {
19031 display: table-cell;
19032 vertical-align: top;
19033 padding: 3px 0 3px 1em;
19034 font: 400 14px 'Montserrat', sans-serif;
19035 }
19036
19037 .memberSmall {
19038 display: table-cell;
19039 vertical-align: top;
19040 padding: 3px 0 3px 1em;
19041 font: 400 12px 'Montserrat', sans-serif;
19042 }
19043
19044 .monospace {
19045 font-family: consolas, courier, monospace;
19046 font-size: 1em;
19047 line-height: 1.2em;
19048 white-space: nowrap;
19049 }
19050
19051 a {
19052 color: #0489c3;
19053 text-decoration: none;
19054 }
19055
19056 a:hover {
19057 text-decoration: underline;
19058 }
19059
19060 em {
19061 color: inherit;
19062 font-style: italic;
19063 }
19064
19065 b {
19066 color: inherit;
19067 font-weight: bold;
19068 }
19069
19070 hr {
19071 margin-top: 20px;
19072 margin-bottom: 20px;
19073 border: 0;
19074 border-top: 1px solid #eee;
19075 height: 0;
19076 box-sizing: content-box;
19077 }
19078
19079 .list-group {
19080 padding-left: 0;
19081 margin-bottom: 20px;
19082 }
19083
19084 .list-group-item {
19085 position: relative;
19086 display: block;
19087 padding: 10px 15px;
19088 margin-bottom: -1px;
19089 background-color: #fff;
19090 }
19091
19092 .list-group-item:first-child {
19093 /* rounded top corners */
19094 border-top-right-radius:4px;
19095 border-top-left-radius:4px;
19096 }
19097
19098 .list-group-item:last-child {
19099 margin-bottom: 0;
19100 /* rounded bottom corners */
19101 border-bottom-right-radius: 4px;
19102 border-bottom-left-radius:4px;
19103 }
19104
19105 /* Flex row container */
19106 .flex-row {
19107 display: flex;
19108 flex-direction: row;
19109 }
19110
19111 /* Flex column container */
19112 .flex-column {
19113 display: flex;
19114 flex-direction: column;
19115 }
19116
19117 .flex-item-fit {
19118 flex-grow: 1;
19119 flex-shrink: 1;
19120 flex-basis: auto;
19121 }
19122
19123 .flex-item-no-shrink {
19124 flex-grow: 0;
19125 flex-shrink: 0;
19126 flex-basis: auto;
19127 }
19128
19129 .flex-item-fill {
19130 flex-grow: 0;
19131 flex-shrink: 1; /* shrink when pressured */
19132 flex-basis: 100%; /* try and take 100% */
19133 }
19134
19135 .flex-item-fixed-1-12 {
19136 flex-grow: 0;
19137 flex-shrink: 0;
19138 flex-basis: 8.3%;
19139 }
19140
19141 .flex-item-fixed-2-12 {
19142 flex-grow: 0;
19143 flex-shrink: 0;
19144 flex-basis: 16.6%;
19145 }
19146
19147 .flex-item-fixed-4-12 {
19148 flex-grow: 0;
19149 flex-shrink: 0;
19150 flex-basis: 33.3333%;
19151 }
19152
19153 .flex-item-fixed-6-12, .flex-item-50-percent {
19154 flex-grow: 0;
19155 flex-shrink: 0;
19156 flex-basis: 50%;
19157 }
19158
19159 .flex-item-fixed-8-12 {
19160 flex-grow: 0;
19161 flex-shrink: 0;
19162 flex-basis: 66.6666%;
19163 }
19164
19165 .flex-item-fixed-9-12 {
19166 flex-grow: 0;
19167 flex-shrink: 0;
19168 flex-basis: 75%;
19169 }
19170
19171
19172 .flex-item-fixed-12-12 {
19173 flex-grow: 0;
19174 flex-shrink: 0;
19175 flex-basis: 100%;
19176 }
19177
19178 .flex-item-10-percent {
19179 flex-grow: 0;
19180 flex-shrink: 0;
19181 flex-basis: 10%;
19182 }
19183
19184 .flex-item-15-percent {
19185 flex-grow: 0;
19186 flex-shrink: 0;
19187 flex-basis: 15%;
19188 }
19189
19190 .flex-item-20-percent {
19191 flex-grow: 0;
19192 flex-shrink: 0;
19193 flex-basis: 20%;
19194 }
19195
19196 .flex-item-30-percent {
19197 flex-grow: 0;
19198 flex-shrink: 0;
19199 flex-basis: 30%;
19200 }
19201
19202 .flex-item-40-percent {
19203 flex-grow: 0;
19204 flex-shrink: 0;
19205 flex-basis: 40%;
19206 }
19207
19208 .flex-item-50-percent {
19209 flex-grow: 0;
19210 flex-shrink: 0;
19211 flex-basis: 50%;
19212 }
19213
19214 .flex-item-60-percent {
19215 flex-grow: 0;
19216 flex-shrink: 0;
19217 flex-basis: 60%;
19218 }
19219
19220 .flex-item-70-percent {
19221 flex-grow: 0;
19222 flex-shrink: 0;
19223 flex-basis: 70%;
19224 }
19225
19226 .flex-item-80-percent {
19227 flex-grow: 0;
19228 flex-shrink: 0;
19229 flex-basis: 80%;
19230 }
19231
19232 .well {
19233 min-height: 20px;
19234 padding: 19px;
19235 margin-bottom: 20px;
19236 background-color: #f5f5f5;
19237 border: 1px solid #e3e3e3;
19238 border-radius: 4px;
19239 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
19240 }
19241
19242 .break-wrap {
19243 word-wrap: break-word;
19244 }
19245 </style>
19246 <style> 4066 <style>
19247 .table { 4067 .table {
19248 border-collapse: collapse!important; 4068 border-collapse: collapse!important;
19249 margin-bottom: 20px 4069 margin-bottom: 20px
19250 table-layout: fixed; 4070 table-layout: fixed;
19251 } 4071 }
19252 .table td:nth-of-type(1) { 4072 .table td:nth-of-type(1) {
19253 width: 30%; 4073 width: 30%;
19254 } 4074 }
19255 .th, .td { 4075 .th, .td {
(...skipping 149 matching lines...) Expand 10 before | Expand all | Expand 10 after
19405 <tbody id="classTableBody"> 4225 <tbody id="classTableBody">
19406 </tbody> 4226 </tbody>
19407 </table> 4227 </table>
19408 <br><br><br> 4228 <br><br><br>
19409 <br><br><br> 4229 <br><br><br>
19410 </div> 4230 </div>
19411 </template> 4231 </template>
19412 </polymer-element> 4232 </polymer-element>
19413 4233
19414 4234
19415
19416
19417
19418
19419
19420
19421
19422
19423 <polymer-element name="sliding-checkbox">
19424 <template>
19425 <style>
19426 .switch {
19427 position: relative;
19428 width: 121px;
19429 -webkit-user-select: none;
19430 -moz-user-select: none;
19431 -ms-user-select: none;
19432 }
19433 .hide {
19434 display: none;
19435 }
19436 .label {
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;
19481 position: absolute;
19482 top: 0;
19483 bottom: 0;
19484 right: 87px;
19485 -moz-transition: all 0.3s ease-in 0s;
19486 -webkit-transition: all 0.3s ease-in 0s;
19487 -o-transition: all 0.3s ease-in 0s;
19488 transition: all 0.3s ease-in 0s;
19489 }
19490 :checked + .label .content {
19491 margin-left: 0;
19492 }
19493 :checked + .label .dot {
19494 right: 0px;
19495 }
19496 </style>
19497 <div class="switch">
19498 <input type="checkbox" class="hide" id="slide-switch" on-change="{{ change }}">
19499 <label class="label" for="slide-switch">
19500 <div class="content"></div>
19501 <div class="dot"></div>
19502 </label>
19503 </div>
19504 </template>
19505 </polymer-element>
19506
19507
19508
19509 <polymer-element name="isolate-profile" extends="observatory-element">
19510 <template>
19511 <style>/* Global styles */
19512 * {
19513 margin: 0;
19514 padding: 0;
19515 font: 400 14px 'Montserrat', sans-serif;
19516 color: #333;
19517 box-sizing: border-box;
19518 }
19519
19520 .content {
19521 padding-left: 10%;
19522 font: 400 14px 'Montserrat', sans-serif;
19523 }
19524
19525 .content-centered {
19526 padding-left: 10%;
19527 padding-right: 10%;
19528 font: 400 14px 'Montserrat', sans-serif;
19529 }
19530
19531 .content-centered-big {
19532 padding-left: 5%;
19533 padding-right: 5%;
19534 font: 400 14px 'Montserrat', sans-serif;
19535 }
19536
19537 h1 {
19538 font: 400 18px 'Montserrat', sans-serif;
19539 }
19540
19541 .memberList {
19542 display: table;
19543 }
19544
19545 .memberItem {
19546 display: table-row;
19547 }
19548
19549 .memberName, .memberValue {
19550 display: table-cell;
19551 vertical-align: top;
19552 padding: 3px 0 3px 1em;
19553 font: 400 14px 'Montserrat', sans-serif;
19554 }
19555
19556 .memberSmall {
19557 display: table-cell;
19558 vertical-align: top;
19559 padding: 3px 0 3px 1em;
19560 font: 400 12px 'Montserrat', sans-serif;
19561 }
19562
19563 .monospace {
19564 font-family: consolas, courier, monospace;
19565 font-size: 1em;
19566 line-height: 1.2em;
19567 white-space: nowrap;
19568 }
19569
19570 a {
19571 color: #0489c3;
19572 text-decoration: none;
19573 }
19574
19575 a:hover {
19576 text-decoration: underline;
19577 }
19578
19579 em {
19580 color: inherit;
19581 font-style: italic;
19582 }
19583
19584 b {
19585 color: inherit;
19586 font-weight: bold;
19587 }
19588
19589 hr {
19590 margin-top: 20px;
19591 margin-bottom: 20px;
19592 border: 0;
19593 border-top: 1px solid #eee;
19594 height: 0;
19595 box-sizing: content-box;
19596 }
19597
19598 .list-group {
19599 padding-left: 0;
19600 margin-bottom: 20px;
19601 }
19602
19603 .list-group-item {
19604 position: relative;
19605 display: block;
19606 padding: 10px 15px;
19607 margin-bottom: -1px;
19608 background-color: #fff;
19609 }
19610
19611 .list-group-item:first-child {
19612 /* rounded top corners */
19613 border-top-right-radius:4px;
19614 border-top-left-radius:4px;
19615 }
19616
19617 .list-group-item:last-child {
19618 margin-bottom: 0;
19619 /* rounded bottom corners */
19620 border-bottom-right-radius: 4px;
19621 border-bottom-left-radius:4px;
19622 }
19623
19624 /* Flex row container */
19625 .flex-row {
19626 display: flex;
19627 flex-direction: row;
19628 }
19629
19630 /* Flex column container */
19631 .flex-column {
19632 display: flex;
19633 flex-direction: column;
19634 }
19635
19636 .flex-item-fit {
19637 flex-grow: 1;
19638 flex-shrink: 1;
19639 flex-basis: auto;
19640 }
19641
19642 .flex-item-no-shrink {
19643 flex-grow: 0;
19644 flex-shrink: 0;
19645 flex-basis: auto;
19646 }
19647
19648 .flex-item-fill {
19649 flex-grow: 0;
19650 flex-shrink: 1; /* shrink when pressured */
19651 flex-basis: 100%; /* try and take 100% */
19652 }
19653
19654 .flex-item-fixed-1-12 {
19655 flex-grow: 0;
19656 flex-shrink: 0;
19657 flex-basis: 8.3%;
19658 }
19659
19660 .flex-item-fixed-2-12 {
19661 flex-grow: 0;
19662 flex-shrink: 0;
19663 flex-basis: 16.6%;
19664 }
19665
19666 .flex-item-fixed-4-12 {
19667 flex-grow: 0;
19668 flex-shrink: 0;
19669 flex-basis: 33.3333%;
19670 }
19671
19672 .flex-item-fixed-6-12, .flex-item-50-percent {
19673 flex-grow: 0;
19674 flex-shrink: 0;
19675 flex-basis: 50%;
19676 }
19677
19678 .flex-item-fixed-8-12 {
19679 flex-grow: 0;
19680 flex-shrink: 0;
19681 flex-basis: 66.6666%;
19682 }
19683
19684 .flex-item-fixed-9-12 {
19685 flex-grow: 0;
19686 flex-shrink: 0;
19687 flex-basis: 75%;
19688 }
19689
19690
19691 .flex-item-fixed-12-12 {
19692 flex-grow: 0;
19693 flex-shrink: 0;
19694 flex-basis: 100%;
19695 }
19696
19697 .flex-item-10-percent {
19698 flex-grow: 0;
19699 flex-shrink: 0;
19700 flex-basis: 10%;
19701 }
19702
19703 .flex-item-15-percent {
19704 flex-grow: 0;
19705 flex-shrink: 0;
19706 flex-basis: 15%;
19707 }
19708
19709 .flex-item-20-percent {
19710 flex-grow: 0;
19711 flex-shrink: 0;
19712 flex-basis: 20%;
19713 }
19714
19715 .flex-item-30-percent {
19716 flex-grow: 0;
19717 flex-shrink: 0;
19718 flex-basis: 30%;
19719 }
19720
19721 .flex-item-40-percent {
19722 flex-grow: 0;
19723 flex-shrink: 0;
19724 flex-basis: 40%;
19725 }
19726
19727 .flex-item-50-percent {
19728 flex-grow: 0;
19729 flex-shrink: 0;
19730 flex-basis: 50%;
19731 }
19732
19733 .flex-item-60-percent {
19734 flex-grow: 0;
19735 flex-shrink: 0;
19736 flex-basis: 60%;
19737 }
19738
19739 .flex-item-70-percent {
19740 flex-grow: 0;
19741 flex-shrink: 0;
19742 flex-basis: 70%;
19743 }
19744
19745 .flex-item-80-percent {
19746 flex-grow: 0;
19747 flex-shrink: 0;
19748 flex-basis: 80%;
19749 }
19750
19751 .well {
19752 min-height: 20px;
19753 padding: 19px;
19754 margin-bottom: 20px;
19755 background-color: #f5f5f5;
19756 border: 1px solid #e3e3e3;
19757 border-radius: 4px;
19758 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
19759 }
19760
19761 .break-wrap {
19762 word-wrap: break-word;
19763 }
19764 </style>
19765 <nav-bar>
19766 <top-nav-menu></top-nav-menu>
19767 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
19768 <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
19769 <nav-refresh callback="{{ refresh }}"></nav-refresh>
19770 <nav-control></nav-control>
19771 </nav-bar>
19772 <style>
19773 .table {
19774 border-collapse: collapse!important;
19775 width: 100%;
19776 margin-bottom: 20px
19777 }
19778 .table thead > tr > th,
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>
19941 </template>
19942 </polymer-element>
19943
19944
19945
19946
19947
19948
19949
19950
19951
19952
19953 <polymer-element name="script-view" extends="observatory-element">
19954 <template>
19955 <style>/* Global styles */
19956 * {
19957 margin: 0;
19958 padding: 0;
19959 font: 400 14px 'Montserrat', sans-serif;
19960 color: #333;
19961 box-sizing: border-box;
19962 }
19963
19964 .content {
19965 padding-left: 10%;
19966 font: 400 14px 'Montserrat', sans-serif;
19967 }
19968
19969 .content-centered {
19970 padding-left: 10%;
19971 padding-right: 10%;
19972 font: 400 14px 'Montserrat', sans-serif;
19973 }
19974
19975 .content-centered-big {
19976 padding-left: 5%;
19977 padding-right: 5%;
19978 font: 400 14px 'Montserrat', sans-serif;
19979 }
19980
19981 h1 {
19982 font: 400 18px 'Montserrat', sans-serif;
19983 }
19984
19985 .memberList {
19986 display: table;
19987 }
19988
19989 .memberItem {
19990 display: table-row;
19991 }
19992
19993 .memberName, .memberValue {
19994 display: table-cell;
19995 vertical-align: top;
19996 padding: 3px 0 3px 1em;
19997 font: 400 14px 'Montserrat', sans-serif;
19998 }
19999
20000 .memberSmall {
20001 display: table-cell;
20002 vertical-align: top;
20003 padding: 3px 0 3px 1em;
20004 font: 400 12px 'Montserrat', sans-serif;
20005 }
20006
20007 .monospace {
20008 font-family: consolas, courier, monospace;
20009 font-size: 1em;
20010 line-height: 1.2em;
20011 white-space: nowrap;
20012 }
20013
20014 a {
20015 color: #0489c3;
20016 text-decoration: none;
20017 }
20018
20019 a:hover {
20020 text-decoration: underline;
20021 }
20022
20023 em {
20024 color: inherit;
20025 font-style: italic;
20026 }
20027
20028 b {
20029 color: inherit;
20030 font-weight: bold;
20031 }
20032
20033 hr {
20034 margin-top: 20px;
20035 margin-bottom: 20px;
20036 border: 0;
20037 border-top: 1px solid #eee;
20038 height: 0;
20039 box-sizing: content-box;
20040 }
20041
20042 .list-group {
20043 padding-left: 0;
20044 margin-bottom: 20px;
20045 }
20046
20047 .list-group-item {
20048 position: relative;
20049 display: block;
20050 padding: 10px 15px;
20051 margin-bottom: -1px;
20052 background-color: #fff;
20053 }
20054
20055 .list-group-item:first-child {
20056 /* rounded top corners */
20057 border-top-right-radius:4px;
20058 border-top-left-radius:4px;
20059 }
20060
20061 .list-group-item:last-child {
20062 margin-bottom: 0;
20063 /* rounded bottom corners */
20064 border-bottom-right-radius: 4px;
20065 border-bottom-left-radius:4px;
20066 }
20067
20068 /* Flex row container */
20069 .flex-row {
20070 display: flex;
20071 flex-direction: row;
20072 }
20073
20074 /* Flex column container */
20075 .flex-column {
20076 display: flex;
20077 flex-direction: column;
20078 }
20079
20080 .flex-item-fit {
20081 flex-grow: 1;
20082 flex-shrink: 1;
20083 flex-basis: auto;
20084 }
20085
20086 .flex-item-no-shrink {
20087 flex-grow: 0;
20088 flex-shrink: 0;
20089 flex-basis: auto;
20090 }
20091
20092 .flex-item-fill {
20093 flex-grow: 0;
20094 flex-shrink: 1; /* shrink when pressured */
20095 flex-basis: 100%; /* try and take 100% */
20096 }
20097
20098 .flex-item-fixed-1-12 {
20099 flex-grow: 0;
20100 flex-shrink: 0;
20101 flex-basis: 8.3%;
20102 }
20103
20104 .flex-item-fixed-2-12 {
20105 flex-grow: 0;
20106 flex-shrink: 0;
20107 flex-basis: 16.6%;
20108 }
20109
20110 .flex-item-fixed-4-12 {
20111 flex-grow: 0;
20112 flex-shrink: 0;
20113 flex-basis: 33.3333%;
20114 }
20115
20116 .flex-item-fixed-6-12, .flex-item-50-percent {
20117 flex-grow: 0;
20118 flex-shrink: 0;
20119 flex-basis: 50%;
20120 }
20121
20122 .flex-item-fixed-8-12 {
20123 flex-grow: 0;
20124 flex-shrink: 0;
20125 flex-basis: 66.6666%;
20126 }
20127
20128 .flex-item-fixed-9-12 {
20129 flex-grow: 0;
20130 flex-shrink: 0;
20131 flex-basis: 75%;
20132 }
20133
20134
20135 .flex-item-fixed-12-12 {
20136 flex-grow: 0;
20137 flex-shrink: 0;
20138 flex-basis: 100%;
20139 }
20140
20141 .flex-item-10-percent {
20142 flex-grow: 0;
20143 flex-shrink: 0;
20144 flex-basis: 10%;
20145 }
20146
20147 .flex-item-15-percent {
20148 flex-grow: 0;
20149 flex-shrink: 0;
20150 flex-basis: 15%;
20151 }
20152
20153 .flex-item-20-percent {
20154 flex-grow: 0;
20155 flex-shrink: 0;
20156 flex-basis: 20%;
20157 }
20158
20159 .flex-item-30-percent {
20160 flex-grow: 0;
20161 flex-shrink: 0;
20162 flex-basis: 30%;
20163 }
20164
20165 .flex-item-40-percent {
20166 flex-grow: 0;
20167 flex-shrink: 0;
20168 flex-basis: 40%;
20169 }
20170
20171 .flex-item-50-percent {
20172 flex-grow: 0;
20173 flex-shrink: 0;
20174 flex-basis: 50%;
20175 }
20176
20177 .flex-item-60-percent {
20178 flex-grow: 0;
20179 flex-shrink: 0;
20180 flex-basis: 60%;
20181 }
20182
20183 .flex-item-70-percent {
20184 flex-grow: 0;
20185 flex-shrink: 0;
20186 flex-basis: 70%;
20187 }
20188
20189 .flex-item-80-percent {
20190 flex-grow: 0;
20191 flex-shrink: 0;
20192 flex-basis: 80%;
20193 }
20194
20195 .well {
20196 min-height: 20px;
20197 padding: 19px;
20198 margin-bottom: 20px;
20199 background-color: #f5f5f5;
20200 border: 1px solid #e3e3e3;
20201 border-radius: 4px;
20202 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
20203 }
20204
20205 .break-wrap {
20206 word-wrap: break-word;
20207 }
20208 </style>
20209 <nav-bar>
20210 <top-nav-menu></top-nav-menu>
20211 <isolate-nav-menu isolate="{{ script.isolate }}">
20212 </isolate-nav-menu>
20213 <nav-menu link="{{ script.owningLibrary.link }}" anchor="{{ script.owningLib rary.name }}"></nav-menu>
20214 <nav-menu link="{{ script.link }}" anchor="{{ script.name }}" last="{{ true }}"></nav-menu>
20215 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav -refresh>
20216 <nav-refresh callback="{{ refresh }}"></nav-refresh>
20217 <nav-control></nav-control>
20218 </nav-bar>
20219
20220 <template if="{{ args['pos'] == null }}">
20221 <script-inset id="scriptInset" script="{{ script }}">
20222 <h1>script {{ script.name }}</h1>
20223 </script-inset>
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>
20233 </polymer-element>
20234
20235
20236
20237
20238
20239
20240
20241
20242
20243
20244
20245
20246
20247 <polymer-element name="vm-view" extends="observatory-element">
20248 <template>
20249 <style>/* Global styles */
20250 * {
20251 margin: 0;
20252 padding: 0;
20253 font: 400 14px 'Montserrat', sans-serif;
20254 color: #333;
20255 box-sizing: border-box;
20256 }
20257
20258 .content {
20259 padding-left: 10%;
20260 font: 400 14px 'Montserrat', sans-serif;
20261 }
20262
20263 .content-centered {
20264 padding-left: 10%;
20265 padding-right: 10%;
20266 font: 400 14px 'Montserrat', sans-serif;
20267 }
20268
20269 .content-centered-big {
20270 padding-left: 5%;
20271 padding-right: 5%;
20272 font: 400 14px 'Montserrat', sans-serif;
20273 }
20274
20275 h1 {
20276 font: 400 18px 'Montserrat', sans-serif;
20277 }
20278
20279 .memberList {
20280 display: table;
20281 }
20282
20283 .memberItem {
20284 display: table-row;
20285 }
20286
20287 .memberName, .memberValue {
20288 display: table-cell;
20289 vertical-align: top;
20290 padding: 3px 0 3px 1em;
20291 font: 400 14px 'Montserrat', sans-serif;
20292 }
20293
20294 .memberSmall {
20295 display: table-cell;
20296 vertical-align: top;
20297 padding: 3px 0 3px 1em;
20298 font: 400 12px 'Montserrat', sans-serif;
20299 }
20300
20301 .monospace {
20302 font-family: consolas, courier, monospace;
20303 font-size: 1em;
20304 line-height: 1.2em;
20305 white-space: nowrap;
20306 }
20307
20308 a {
20309 color: #0489c3;
20310 text-decoration: none;
20311 }
20312
20313 a:hover {
20314 text-decoration: underline;
20315 }
20316
20317 em {
20318 color: inherit;
20319 font-style: italic;
20320 }
20321
20322 b {
20323 color: inherit;
20324 font-weight: bold;
20325 }
20326
20327 hr {
20328 margin-top: 20px;
20329 margin-bottom: 20px;
20330 border: 0;
20331 border-top: 1px solid #eee;
20332 height: 0;
20333 box-sizing: content-box;
20334 }
20335
20336 .list-group {
20337 padding-left: 0;
20338 margin-bottom: 20px;
20339 }
20340
20341 .list-group-item {
20342 position: relative;
20343 display: block;
20344 padding: 10px 15px;
20345 margin-bottom: -1px;
20346 background-color: #fff;
20347 }
20348
20349 .list-group-item:first-child {
20350 /* rounded top corners */
20351 border-top-right-radius:4px;
20352 border-top-left-radius:4px;
20353 }
20354
20355 .list-group-item:last-child {
20356 margin-bottom: 0;
20357 /* rounded bottom corners */
20358 border-bottom-right-radius: 4px;
20359 border-bottom-left-radius:4px;
20360 }
20361
20362 /* Flex row container */
20363 .flex-row {
20364 display: flex;
20365 flex-direction: row;
20366 }
20367
20368 /* Flex column container */
20369 .flex-column {
20370 display: flex;
20371 flex-direction: column;
20372 }
20373
20374 .flex-item-fit {
20375 flex-grow: 1;
20376 flex-shrink: 1;
20377 flex-basis: auto;
20378 }
20379
20380 .flex-item-no-shrink {
20381 flex-grow: 0;
20382 flex-shrink: 0;
20383 flex-basis: auto;
20384 }
20385
20386 .flex-item-fill {
20387 flex-grow: 0;
20388 flex-shrink: 1; /* shrink when pressured */
20389 flex-basis: 100%; /* try and take 100% */
20390 }
20391
20392 .flex-item-fixed-1-12 {
20393 flex-grow: 0;
20394 flex-shrink: 0;
20395 flex-basis: 8.3%;
20396 }
20397
20398 .flex-item-fixed-2-12 {
20399 flex-grow: 0;
20400 flex-shrink: 0;
20401 flex-basis: 16.6%;
20402 }
20403
20404 .flex-item-fixed-4-12 {
20405 flex-grow: 0;
20406 flex-shrink: 0;
20407 flex-basis: 33.3333%;
20408 }
20409
20410 .flex-item-fixed-6-12, .flex-item-50-percent {
20411 flex-grow: 0;
20412 flex-shrink: 0;
20413 flex-basis: 50%;
20414 }
20415
20416 .flex-item-fixed-8-12 {
20417 flex-grow: 0;
20418 flex-shrink: 0;
20419 flex-basis: 66.6666%;
20420 }
20421
20422 .flex-item-fixed-9-12 {
20423 flex-grow: 0;
20424 flex-shrink: 0;
20425 flex-basis: 75%;
20426 }
20427
20428
20429 .flex-item-fixed-12-12 {
20430 flex-grow: 0;
20431 flex-shrink: 0;
20432 flex-basis: 100%;
20433 }
20434
20435 .flex-item-10-percent {
20436 flex-grow: 0;
20437 flex-shrink: 0;
20438 flex-basis: 10%;
20439 }
20440
20441 .flex-item-15-percent {
20442 flex-grow: 0;
20443 flex-shrink: 0;
20444 flex-basis: 15%;
20445 }
20446
20447 .flex-item-20-percent {
20448 flex-grow: 0;
20449 flex-shrink: 0;
20450 flex-basis: 20%;
20451 }
20452
20453 .flex-item-30-percent {
20454 flex-grow: 0;
20455 flex-shrink: 0;
20456 flex-basis: 30%;
20457 }
20458
20459 .flex-item-40-percent {
20460 flex-grow: 0;
20461 flex-shrink: 0;
20462 flex-basis: 40%;
20463 }
20464
20465 .flex-item-50-percent {
20466 flex-grow: 0;
20467 flex-shrink: 0;
20468 flex-basis: 50%;
20469 }
20470
20471 .flex-item-60-percent {
20472 flex-grow: 0;
20473 flex-shrink: 0;
20474 flex-basis: 60%;
20475 }
20476
20477 .flex-item-70-percent {
20478 flex-grow: 0;
20479 flex-shrink: 0;
20480 flex-basis: 70%;
20481 }
20482
20483 .flex-item-80-percent {
20484 flex-grow: 0;
20485 flex-shrink: 0;
20486 flex-basis: 80%;
20487 }
20488
20489 .well {
20490 min-height: 20px;
20491 padding: 19px;
20492 margin-bottom: 20px;
20493 background-color: #f5f5f5;
20494 border: 1px solid #e3e3e3;
20495 border-radius: 4px;
20496 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
20497 }
20498
20499 .break-wrap {
20500 word-wrap: break-word;
20501 }
20502 </style>
20503
20504 <nav-bar>
20505 <top-nav-menu last="{{ true }}"></top-nav-menu>
20506 <nav-refresh callback="{{ refresh }}"></nav-refresh>
20507 <nav-control></nav-control>
20508 </nav-bar>
20509
20510 <div class="content">
20511 <h1>VM</h1>
20512 <div class="memberList">
20513 <div class="memberItem">
20514 <div class="memberName">version</div>
20515 <div class="memberValue">{{ vm.version }}</div>
20516 </div>
20517 <div class="memberItem">
20518 <div class="memberName">uptime</div>
20519 <div class="memberValue">{{ vm.uptime | formatTime }}</div>
20520 </div>
20521 <div class="memberItem">
20522 <div class="memberName">type checks enabled</div>
20523 <div class="memberValue">{{ vm.typeChecksEnabled }}</div>
20524 </div>
20525 <div class="memberItem">
20526 <div class="memberName">asserts enabled</div>
20527 <div class="memberValue">{{ vm.assertsEnabled }}</div>
20528 </div>
20529 <div class="memberItem">
20530 <div class="memberName">pid</div>
20531 <div class="memberValue">{{ vm.pid }}</div>
20532 </div>
20533 <div class="memberItem">
20534 <div class="memberName">refreshed at</div>
20535 <div class="memberValue">{{ vm.lastUpdate }}</div>
20536 </div>
20537 <br>
20538 <div class="memberItem">
20539 <div class="memberValue">
20540 See <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">flags< /a>
20541 </div>
20542 </div>
20543 </div>
20544 </div>
20545
20546 <br>
20547 <hr>
20548
20549 <ul class="list-group">
20550 <template repeat="{{ isolate in vm.isolates }}">
20551 <li class="list-group-item">
20552 <isolate-summary isolate="{{ isolate }}"></isolate-summary>
20553 </li>
20554 <hr>
20555 </template>
20556 </ul>
20557 </template>
20558 </polymer-element>
20559
20560
20561 <polymer-element name="service-view" extends="observatory-element">
20562 <!-- This element explicitly manages the child elements to avoid setting
20563 an observable property on the old element to an invalid type. -->
20564 </polymer-element>
20565
20566 <polymer-element name="trace-view" extends="observatory-element">
20567 <template>
20568 <style>/* Global styles */
20569 * {
20570 margin: 0;
20571 padding: 0;
20572 font: 400 14px 'Montserrat', sans-serif;
20573 color: #333;
20574 box-sizing: border-box;
20575 }
20576
20577 .content {
20578 padding-left: 10%;
20579 font: 400 14px 'Montserrat', sans-serif;
20580 }
20581
20582 .content-centered {
20583 padding-left: 10%;
20584 padding-right: 10%;
20585 font: 400 14px 'Montserrat', sans-serif;
20586 }
20587
20588 .content-centered-big {
20589 padding-left: 5%;
20590 padding-right: 5%;
20591 font: 400 14px 'Montserrat', sans-serif;
20592 }
20593
20594 h1 {
20595 font: 400 18px 'Montserrat', sans-serif;
20596 }
20597
20598 .memberList {
20599 display: table;
20600 }
20601
20602 .memberItem {
20603 display: table-row;
20604 }
20605
20606 .memberName, .memberValue {
20607 display: table-cell;
20608 vertical-align: top;
20609 padding: 3px 0 3px 1em;
20610 font: 400 14px 'Montserrat', sans-serif;
20611 }
20612
20613 .memberSmall {
20614 display: table-cell;
20615 vertical-align: top;
20616 padding: 3px 0 3px 1em;
20617 font: 400 12px 'Montserrat', sans-serif;
20618 }
20619
20620 .monospace {
20621 font-family: consolas, courier, monospace;
20622 font-size: 1em;
20623 line-height: 1.2em;
20624 white-space: nowrap;
20625 }
20626
20627 a {
20628 color: #0489c3;
20629 text-decoration: none;
20630 }
20631
20632 a:hover {
20633 text-decoration: underline;
20634 }
20635
20636 em {
20637 color: inherit;
20638 font-style: italic;
20639 }
20640
20641 b {
20642 color: inherit;
20643 font-weight: bold;
20644 }
20645
20646 hr {
20647 margin-top: 20px;
20648 margin-bottom: 20px;
20649 border: 0;
20650 border-top: 1px solid #eee;
20651 height: 0;
20652 box-sizing: content-box;
20653 }
20654
20655 .list-group {
20656 padding-left: 0;
20657 margin-bottom: 20px;
20658 }
20659
20660 .list-group-item {
20661 position: relative;
20662 display: block;
20663 padding: 10px 15px;
20664 margin-bottom: -1px;
20665 background-color: #fff;
20666 }
20667
20668 .list-group-item:first-child {
20669 /* rounded top corners */
20670 border-top-right-radius:4px;
20671 border-top-left-radius:4px;
20672 }
20673
20674 .list-group-item:last-child {
20675 margin-bottom: 0;
20676 /* rounded bottom corners */
20677 border-bottom-right-radius: 4px;
20678 border-bottom-left-radius:4px;
20679 }
20680
20681 /* Flex row container */
20682 .flex-row {
20683 display: flex;
20684 flex-direction: row;
20685 }
20686
20687 /* Flex column container */
20688 .flex-column {
20689 display: flex;
20690 flex-direction: column;
20691 }
20692
20693 .flex-item-fit {
20694 flex-grow: 1;
20695 flex-shrink: 1;
20696 flex-basis: auto;
20697 }
20698
20699 .flex-item-no-shrink {
20700 flex-grow: 0;
20701 flex-shrink: 0;
20702 flex-basis: auto;
20703 }
20704
20705 .flex-item-fill {
20706 flex-grow: 0;
20707 flex-shrink: 1; /* shrink when pressured */
20708 flex-basis: 100%; /* try and take 100% */
20709 }
20710
20711 .flex-item-fixed-1-12 {
20712 flex-grow: 0;
20713 flex-shrink: 0;
20714 flex-basis: 8.3%;
20715 }
20716
20717 .flex-item-fixed-2-12 {
20718 flex-grow: 0;
20719 flex-shrink: 0;
20720 flex-basis: 16.6%;
20721 }
20722
20723 .flex-item-fixed-4-12 {
20724 flex-grow: 0;
20725 flex-shrink: 0;
20726 flex-basis: 33.3333%;
20727 }
20728
20729 .flex-item-fixed-6-12, .flex-item-50-percent {
20730 flex-grow: 0;
20731 flex-shrink: 0;
20732 flex-basis: 50%;
20733 }
20734
20735 .flex-item-fixed-8-12 {
20736 flex-grow: 0;
20737 flex-shrink: 0;
20738 flex-basis: 66.6666%;
20739 }
20740
20741 .flex-item-fixed-9-12 {
20742 flex-grow: 0;
20743 flex-shrink: 0;
20744 flex-basis: 75%;
20745 }
20746
20747
20748 .flex-item-fixed-12-12 {
20749 flex-grow: 0;
20750 flex-shrink: 0;
20751 flex-basis: 100%;
20752 }
20753
20754 .flex-item-10-percent {
20755 flex-grow: 0;
20756 flex-shrink: 0;
20757 flex-basis: 10%;
20758 }
20759
20760 .flex-item-15-percent {
20761 flex-grow: 0;
20762 flex-shrink: 0;
20763 flex-basis: 15%;
20764 }
20765
20766 .flex-item-20-percent {
20767 flex-grow: 0;
20768 flex-shrink: 0;
20769 flex-basis: 20%;
20770 }
20771
20772 .flex-item-30-percent {
20773 flex-grow: 0;
20774 flex-shrink: 0;
20775 flex-basis: 30%;
20776 }
20777
20778 .flex-item-40-percent {
20779 flex-grow: 0;
20780 flex-shrink: 0;
20781 flex-basis: 40%;
20782 }
20783
20784 .flex-item-50-percent {
20785 flex-grow: 0;
20786 flex-shrink: 0;
20787 flex-basis: 50%;
20788 }
20789
20790 .flex-item-60-percent {
20791 flex-grow: 0;
20792 flex-shrink: 0;
20793 flex-basis: 60%;
20794 }
20795
20796 .flex-item-70-percent {
20797 flex-grow: 0;
20798 flex-shrink: 0;
20799 flex-basis: 70%;
20800 }
20801
20802 .flex-item-80-percent {
20803 flex-grow: 0;
20804 flex-shrink: 0;
20805 flex-basis: 80%;
20806 }
20807
20808 .well {
20809 min-height: 20px;
20810 padding: 19px;
20811 margin-bottom: 20px;
20812 background-color: #f5f5f5;
20813 border: 1px solid #e3e3e3;
20814 border-radius: 4px;
20815 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
20816 }
20817
20818 .break-wrap {
20819 word-wrap: break-word;
20820 }
20821 </style>
20822
20823 <template if="{{ tracer != null }}">
20824 <div class="memberList">
20825 <template repeat="{{ event in tracer.events }}">
20826 <div class="memberItem">
20827 <div class="memberSmall">
20828 {{ event.timeStamp }}
20829 </div>
20830 <div class="memberSmall">
20831 {{ event.message }}
20832 <template if="{{ event.map != null }}">
20833 <br>
20834 <map-viewer map="{{ event.map }}"></map-viewer>
20835 </template>
20836 </div>
20837 </div>
20838 </template>
20839 </div>
20840 <br>
20841 <br>
20842 <br>
20843 </template>
20844 </template>
20845 </polymer-element>
20846
20847 <polymer-element name="map-viewer" extends="observatory-element">
20848 <template>
20849 <style>/* Global styles */
20850 * {
20851 margin: 0;
20852 padding: 0;
20853 font: 400 14px 'Montserrat', sans-serif;
20854 color: #333;
20855 box-sizing: border-box;
20856 }
20857
20858 .content {
20859 padding-left: 10%;
20860 font: 400 14px 'Montserrat', sans-serif;
20861 }
20862
20863 .content-centered {
20864 padding-left: 10%;
20865 padding-right: 10%;
20866 font: 400 14px 'Montserrat', sans-serif;
20867 }
20868
20869 .content-centered-big {
20870 padding-left: 5%;
20871 padding-right: 5%;
20872 font: 400 14px 'Montserrat', sans-serif;
20873 }
20874
20875 h1 {
20876 font: 400 18px 'Montserrat', sans-serif;
20877 }
20878
20879 .memberList {
20880 display: table;
20881 }
20882
20883 .memberItem {
20884 display: table-row;
20885 }
20886
20887 .memberName, .memberValue {
20888 display: table-cell;
20889 vertical-align: top;
20890 padding: 3px 0 3px 1em;
20891 font: 400 14px 'Montserrat', sans-serif;
20892 }
20893
20894 .memberSmall {
20895 display: table-cell;
20896 vertical-align: top;
20897 padding: 3px 0 3px 1em;
20898 font: 400 12px 'Montserrat', sans-serif;
20899 }
20900
20901 .monospace {
20902 font-family: consolas, courier, monospace;
20903 font-size: 1em;
20904 line-height: 1.2em;
20905 white-space: nowrap;
20906 }
20907
20908 a {
20909 color: #0489c3;
20910 text-decoration: none;
20911 }
20912
20913 a:hover {
20914 text-decoration: underline;
20915 }
20916
20917 em {
20918 color: inherit;
20919 font-style: italic;
20920 }
20921
20922 b {
20923 color: inherit;
20924 font-weight: bold;
20925 }
20926
20927 hr {
20928 margin-top: 20px;
20929 margin-bottom: 20px;
20930 border: 0;
20931 border-top: 1px solid #eee;
20932 height: 0;
20933 box-sizing: content-box;
20934 }
20935
20936 .list-group {
20937 padding-left: 0;
20938 margin-bottom: 20px;
20939 }
20940
20941 .list-group-item {
20942 position: relative;
20943 display: block;
20944 padding: 10px 15px;
20945 margin-bottom: -1px;
20946 background-color: #fff;
20947 }
20948
20949 .list-group-item:first-child {
20950 /* rounded top corners */
20951 border-top-right-radius:4px;
20952 border-top-left-radius:4px;
20953 }
20954
20955 .list-group-item:last-child {
20956 margin-bottom: 0;
20957 /* rounded bottom corners */
20958 border-bottom-right-radius: 4px;
20959 border-bottom-left-radius:4px;
20960 }
20961
20962 /* Flex row container */
20963 .flex-row {
20964 display: flex;
20965 flex-direction: row;
20966 }
20967
20968 /* Flex column container */
20969 .flex-column {
20970 display: flex;
20971 flex-direction: column;
20972 }
20973
20974 .flex-item-fit {
20975 flex-grow: 1;
20976 flex-shrink: 1;
20977 flex-basis: auto;
20978 }
20979
20980 .flex-item-no-shrink {
20981 flex-grow: 0;
20982 flex-shrink: 0;
20983 flex-basis: auto;
20984 }
20985
20986 .flex-item-fill {
20987 flex-grow: 0;
20988 flex-shrink: 1; /* shrink when pressured */
20989 flex-basis: 100%; /* try and take 100% */
20990 }
20991
20992 .flex-item-fixed-1-12 {
20993 flex-grow: 0;
20994 flex-shrink: 0;
20995 flex-basis: 8.3%;
20996 }
20997
20998 .flex-item-fixed-2-12 {
20999 flex-grow: 0;
21000 flex-shrink: 0;
21001 flex-basis: 16.6%;
21002 }
21003
21004 .flex-item-fixed-4-12 {
21005 flex-grow: 0;
21006 flex-shrink: 0;
21007 flex-basis: 33.3333%;
21008 }
21009
21010 .flex-item-fixed-6-12, .flex-item-50-percent {
21011 flex-grow: 0;
21012 flex-shrink: 0;
21013 flex-basis: 50%;
21014 }
21015
21016 .flex-item-fixed-8-12 {
21017 flex-grow: 0;
21018 flex-shrink: 0;
21019 flex-basis: 66.6666%;
21020 }
21021
21022 .flex-item-fixed-9-12 {
21023 flex-grow: 0;
21024 flex-shrink: 0;
21025 flex-basis: 75%;
21026 }
21027
21028
21029 .flex-item-fixed-12-12 {
21030 flex-grow: 0;
21031 flex-shrink: 0;
21032 flex-basis: 100%;
21033 }
21034
21035 .flex-item-10-percent {
21036 flex-grow: 0;
21037 flex-shrink: 0;
21038 flex-basis: 10%;
21039 }
21040
21041 .flex-item-15-percent {
21042 flex-grow: 0;
21043 flex-shrink: 0;
21044 flex-basis: 15%;
21045 }
21046
21047 .flex-item-20-percent {
21048 flex-grow: 0;
21049 flex-shrink: 0;
21050 flex-basis: 20%;
21051 }
21052
21053 .flex-item-30-percent {
21054 flex-grow: 0;
21055 flex-shrink: 0;
21056 flex-basis: 30%;
21057 }
21058
21059 .flex-item-40-percent {
21060 flex-grow: 0;
21061 flex-shrink: 0;
21062 flex-basis: 40%;
21063 }
21064
21065 .flex-item-50-percent {
21066 flex-grow: 0;
21067 flex-shrink: 0;
21068 flex-basis: 50%;
21069 }
21070
21071 .flex-item-60-percent {
21072 flex-grow: 0;
21073 flex-shrink: 0;
21074 flex-basis: 60%;
21075 }
21076
21077 .flex-item-70-percent {
21078 flex-grow: 0;
21079 flex-shrink: 0;
21080 flex-basis: 70%;
21081 }
21082
21083 .flex-item-80-percent {
21084 flex-grow: 0;
21085 flex-shrink: 0;
21086 flex-basis: 80%;
21087 }
21088
21089 .well {
21090 min-height: 20px;
21091 padding: 19px;
21092 margin-bottom: 20px;
21093 background-color: #f5f5f5;
21094 border: 1px solid #e3e3e3;
21095 border-radius: 4px;
21096 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
21097 }
21098
21099 .break-wrap {
21100 word-wrap: break-word;
21101 }
21102 </style>
21103
21104 <template if="{{ map.length > 0 }}">
21105 <curly-block callback="{{ expander() }}">
21106 <template if="{{ expand }}">
21107 <div class="memberList">
21108 <template repeat="{{ key in map.keys }}">
21109 <div class="memberItem">
21110 <div class="memberSmall">{{ key }}</div>
21111 <div class="memberSmall">:</div>
21112 <div class="memberSmall">
21113 <template if="{{ isMap(map[key]) }}">
21114 <map-viewer map="{{ map[key] }}"></map-viewer>
21115 </template>
21116 <template if="{{ isList(map[key]) }}">
21117 <list-viewer list="{{ map[key] }}"></list-viewer>
21118 </template>
21119 <template if="{{ !isMap(map[key]) &amp;&amp; !isList(map[key]) }}">
21120 {{ map[key] }}
21121 </template>
21122 </div>
21123 </div>
21124 </template>
21125 </div>
21126 </template>
21127 </curly-block>
21128 </template>
21129 </template>
21130 </polymer-element>
21131
21132 <polymer-element name="list-viewer" extends="observatory-element">
21133 <template>
21134 <style>/* Global styles */
21135 * {
21136 margin: 0;
21137 padding: 0;
21138 font: 400 14px 'Montserrat', sans-serif;
21139 color: #333;
21140 box-sizing: border-box;
21141 }
21142
21143 .content {
21144 padding-left: 10%;
21145 font: 400 14px 'Montserrat', sans-serif;
21146 }
21147
21148 .content-centered {
21149 padding-left: 10%;
21150 padding-right: 10%;
21151 font: 400 14px 'Montserrat', sans-serif;
21152 }
21153
21154 .content-centered-big {
21155 padding-left: 5%;
21156 padding-right: 5%;
21157 font: 400 14px 'Montserrat', sans-serif;
21158 }
21159
21160 h1 {
21161 font: 400 18px 'Montserrat', sans-serif;
21162 }
21163
21164 .memberList {
21165 display: table;
21166 }
21167
21168 .memberItem {
21169 display: table-row;
21170 }
21171
21172 .memberName, .memberValue {
21173 display: table-cell;
21174 vertical-align: top;
21175 padding: 3px 0 3px 1em;
21176 font: 400 14px 'Montserrat', sans-serif;
21177 }
21178
21179 .memberSmall {
21180 display: table-cell;
21181 vertical-align: top;
21182 padding: 3px 0 3px 1em;
21183 font: 400 12px 'Montserrat', sans-serif;
21184 }
21185
21186 .monospace {
21187 font-family: consolas, courier, monospace;
21188 font-size: 1em;
21189 line-height: 1.2em;
21190 white-space: nowrap;
21191 }
21192
21193 a {
21194 color: #0489c3;
21195 text-decoration: none;
21196 }
21197
21198 a:hover {
21199 text-decoration: underline;
21200 }
21201
21202 em {
21203 color: inherit;
21204 font-style: italic;
21205 }
21206
21207 b {
21208 color: inherit;
21209 font-weight: bold;
21210 }
21211
21212 hr {
21213 margin-top: 20px;
21214 margin-bottom: 20px;
21215 border: 0;
21216 border-top: 1px solid #eee;
21217 height: 0;
21218 box-sizing: content-box;
21219 }
21220
21221 .list-group {
21222 padding-left: 0;
21223 margin-bottom: 20px;
21224 }
21225
21226 .list-group-item {
21227 position: relative;
21228 display: block;
21229 padding: 10px 15px;
21230 margin-bottom: -1px;
21231 background-color: #fff;
21232 }
21233
21234 .list-group-item:first-child {
21235 /* rounded top corners */
21236 border-top-right-radius:4px;
21237 border-top-left-radius:4px;
21238 }
21239
21240 .list-group-item:last-child {
21241 margin-bottom: 0;
21242 /* rounded bottom corners */
21243 border-bottom-right-radius: 4px;
21244 border-bottom-left-radius:4px;
21245 }
21246
21247 /* Flex row container */
21248 .flex-row {
21249 display: flex;
21250 flex-direction: row;
21251 }
21252
21253 /* Flex column container */
21254 .flex-column {
21255 display: flex;
21256 flex-direction: column;
21257 }
21258
21259 .flex-item-fit {
21260 flex-grow: 1;
21261 flex-shrink: 1;
21262 flex-basis: auto;
21263 }
21264
21265 .flex-item-no-shrink {
21266 flex-grow: 0;
21267 flex-shrink: 0;
21268 flex-basis: auto;
21269 }
21270
21271 .flex-item-fill {
21272 flex-grow: 0;
21273 flex-shrink: 1; /* shrink when pressured */
21274 flex-basis: 100%; /* try and take 100% */
21275 }
21276
21277 .flex-item-fixed-1-12 {
21278 flex-grow: 0;
21279 flex-shrink: 0;
21280 flex-basis: 8.3%;
21281 }
21282
21283 .flex-item-fixed-2-12 {
21284 flex-grow: 0;
21285 flex-shrink: 0;
21286 flex-basis: 16.6%;
21287 }
21288
21289 .flex-item-fixed-4-12 {
21290 flex-grow: 0;
21291 flex-shrink: 0;
21292 flex-basis: 33.3333%;
21293 }
21294
21295 .flex-item-fixed-6-12, .flex-item-50-percent {
21296 flex-grow: 0;
21297 flex-shrink: 0;
21298 flex-basis: 50%;
21299 }
21300
21301 .flex-item-fixed-8-12 {
21302 flex-grow: 0;
21303 flex-shrink: 0;
21304 flex-basis: 66.6666%;
21305 }
21306
21307 .flex-item-fixed-9-12 {
21308 flex-grow: 0;
21309 flex-shrink: 0;
21310 flex-basis: 75%;
21311 }
21312
21313
21314 .flex-item-fixed-12-12 {
21315 flex-grow: 0;
21316 flex-shrink: 0;
21317 flex-basis: 100%;
21318 }
21319
21320 .flex-item-10-percent {
21321 flex-grow: 0;
21322 flex-shrink: 0;
21323 flex-basis: 10%;
21324 }
21325
21326 .flex-item-15-percent {
21327 flex-grow: 0;
21328 flex-shrink: 0;
21329 flex-basis: 15%;
21330 }
21331
21332 .flex-item-20-percent {
21333 flex-grow: 0;
21334 flex-shrink: 0;
21335 flex-basis: 20%;
21336 }
21337
21338 .flex-item-30-percent {
21339 flex-grow: 0;
21340 flex-shrink: 0;
21341 flex-basis: 30%;
21342 }
21343
21344 .flex-item-40-percent {
21345 flex-grow: 0;
21346 flex-shrink: 0;
21347 flex-basis: 40%;
21348 }
21349
21350 .flex-item-50-percent {
21351 flex-grow: 0;
21352 flex-shrink: 0;
21353 flex-basis: 50%;
21354 }
21355
21356 .flex-item-60-percent {
21357 flex-grow: 0;
21358 flex-shrink: 0;
21359 flex-basis: 60%;
21360 }
21361
21362 .flex-item-70-percent {
21363 flex-grow: 0;
21364 flex-shrink: 0;
21365 flex-basis: 70%;
21366 }
21367
21368 .flex-item-80-percent {
21369 flex-grow: 0;
21370 flex-shrink: 0;
21371 flex-basis: 80%;
21372 }
21373
21374 .well {
21375 min-height: 20px;
21376 padding: 19px;
21377 margin-bottom: 20px;
21378 background-color: #f5f5f5;
21379 border: 1px solid #e3e3e3;
21380 border-radius: 4px;
21381 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
21382 }
21383
21384 .break-wrap {
21385 word-wrap: break-word;
21386 }
21387 </style>
21388
21389 <template if="{{ list.length > 0 }}">
21390 <curly-block callback="{{ expander() }}">
21391 <template if="{{ expand }}">
21392 <div class="memberList">
21393 <template repeat="{{ element in list }}">
21394 <div class="memberItem">
21395 <div class="memberSmall">
21396 <template if="{{ isMap(element) }}">
21397 <map-viewer map="{{ element }}"></map-viewer>
21398 </template>
21399 <template if="{{ isList(element) }}">
21400 <list-viewer list="{{ element }}"></list-viewer>
21401 </template>
21402 <template if="{{ !isMap(element) &amp;&amp; !isList(element) } }">
21403 {{ element }}
21404 </template>
21405 </div>
21406 </div>
21407 </template>
21408 </div>
21409 </template>
21410 </curly-block>
21411 </template>
21412 </template>
21413 </polymer-element>
21414
21415
21416
21417 <polymer-element name="observatory-application" extends="observatory-element">
21418 <!-- This element explicitly manages its child elements -->
21419 </polymer-element>
21420
21421
21422 4235
21423 4236
21424 4237
21425 4238
21426 4239
21427 4240
21428 4241
21429 4242
4243 <polymer-element name="sliding-checkbox">
4244 <template>
4245 <style>
4246 .switch {
4247 position: relative;
4248 width: 121px;
4249 -webkit-user-select: none;
4250 -moz-user-select: none;
4251 -ms-user-select: none;
4252 }
4253 .hide {
4254 display: none;
4255 }
4256 .label {
4257 display: block;
4258 overflow: hidden;
4259 cursor: pointer;
4260 border: 2px solid #999999;
4261 border-radius: 15px;
4262 }
4263 .content {
4264 width: 200%;
4265 margin-left: -100%;
4266 -moz-transition: margin 0.3s ease-in 0s;
4267 -webkit-transition: margin 0.3s ease-in 0s;
4268 -o-transition: margin 0.3s ease-in 0s;
4269 transition: margin 0.3s ease-in 0s;
4270 }
4271 .content:before, .content:after {
4272 float: left;
4273 width: 50%;
4274 height: 30px;
4275 padding: 0;
4276 line-height: 30px;
4277 color: white;
4278 font: 400 14px 'Montserrat', sans-serif;
4279 -moz-box-sizing: border-box;
4280 -webkit-box-sizing: border-box;
4281 box-sizing: border-box;
4282 }
4283 .content:before {
4284 content: {{ checkedText }};
4285 padding-left: 10px;
4286 background-color: #0489C3;
4287 }
4288 .content:after {
4289 content: {{ uncheckedText }};
4290 padding-right: 10px;
4291 background-color: #EEEEEE;
4292 color: #999999;
4293 text-align: right;
4294 }
4295 .dot {
4296 width: 14px;
4297 margin: 8px;
4298 background: #FFFFFF;
4299 border: 2px solid #999999;
4300 border-radius: 15px;
4301 position: absolute;
4302 top: 0;
4303 bottom: 0;
4304 right: 87px;
4305 -moz-transition: all 0.3s ease-in 0s;
4306 -webkit-transition: all 0.3s ease-in 0s;
4307 -o-transition: all 0.3s ease-in 0s;
4308 transition: all 0.3s ease-in 0s;
4309 }
4310 :checked + .label .content {
4311 margin-left: 0;
4312 }
4313 :checked + .label .dot {
4314 right: 0px;
4315 }
4316 </style>
4317 <div class="switch">
4318 <input type="checkbox" class="hide" id="slide-switch" on-change="{{ change }}">
4319 <label class="label" for="slide-switch">
4320 <div class="content"></div>
4321 <div class="dot"></div>
4322 </label>
4323 </div>
4324 </template>
4325 </polymer-element>
4326
4327
4328
4329 <polymer-element name="isolate-profile" extends="observatory-element">
4330 <template>
4331 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4332 <nav-bar>
4333 <top-nav-menu></top-nav-menu>
4334 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu>
4335 <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
4336 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4337 <nav-control></nav-control>
4338 </nav-bar>
4339 <style>
4340 .table {
4341 border-collapse: collapse!important;
4342 width: 100%;
4343 margin-bottom: 20px
4344 }
4345 .table thead > tr > th,
4346 .table tbody > tr > th,
4347 .table tfoot > tr > th,
4348 .table thead > tr > td,
4349 .table tbody > tr > td,
4350 .table tfoot > tr > td {
4351 padding: 8px;
4352 vertical-align: top;
4353 }
4354 .table thead > tr > th {
4355 vertical-align: bottom;
4356 text-align: left;
4357 border-bottom:2px solid #ddd;
4358 }
4359
4360 tr:hover > td {
4361 background-color: #FFF3E3;
4362 }
4363 .rowColor0 {
4364 background-color: #FFE9CC;
4365 }
4366 .rowColor1 {
4367 background-color: #FFDEB2;
4368 }
4369 .rowColor2 {
4370 background-color: #FFD399;
4371 }
4372 .rowColor3 {
4373 background-color: #FFC87F;
4374 }
4375 .rowColor4 {
4376 background-color: #FFBD66;
4377 }
4378 .rowColor5 {
4379 background-color: #FFB24C;
4380 }
4381 .rowColor6 {
4382 background-color: #FFA733;
4383 }
4384 .rowColor7 {
4385 background-color: #FF9C19;
4386 }
4387 .rowColor8 {
4388 background-color: #FF9100;
4389 }
4390
4391 .tooltip {
4392 display: block;
4393 position: absolute;
4394 visibility: hidden;
4395 opacity: 0;
4396 transition: visibility 0s linear 0.5s;
4397 transition: opacity .4s ease-in-out;
4398 }
4399
4400 tr:hover .tooltip {
4401 display: block;
4402 position: absolute;
4403 top: 100%;
4404 right: 100%;
4405 visibility: visible;
4406 z-index: 999;
4407 width: 400px;
4408 color: #ffffff;
4409 background-color: #0489c3;
4410 border-top-right-radius: 8px;
4411 border-top-left-radius: 8px;
4412 border-bottom-right-radius: 8px;
4413 border-bottom-left-radius: 8px;
4414 transition: visibility 0s linear 0.5s;
4415 transition: opacity .4s ease-in-out;
4416 opacity: 1;
4417 }
4418
4419 .white {
4420 color: #ffffff;
4421 }
4422
4423 </style>
4424 <div class="content">
4425 <h1>Sampled CPU profile</h1>
4426 <div class="memberList">
4427 <div class="memberItem">
4428 <div class="memberName">Timestamp</div>
4429 <div class="memberValue">{{ refreshTime }}</div>
4430 </div>
4431 <div class="memberItem">
4432 <div class="memberName">Time span</div>
4433 <div class="memberValue">{{ timeSpan }}</div>
4434 </div>
4435 <div class="memberItem">
4436 <div class="memberName">Sample count</div>
4437 <div class="memberValue">{{ sampleCount }}</div>
4438 </div>
4439 <div class="memberItem">
4440 <div class="memberName">Sample rate</div>
4441 <div class="memberValue">{{ sampleRate }} Hz</div>
4442 </div>
4443 <div class="memberItem">
4444 <div class="memberName">Sample depth</div>
4445 <div class="memberValue">{{ sampleDepth }} stack frames</div>
4446 </div>
4447 <div class="memberItem">
4448 <div class="memberName">Display cutoff</div>
4449 <div class="memberValue">{{ displayCutoff }}</div>
4450 </div>
4451 <div class="memberItem">
4452 <div class="memberName">Tags</div>
4453 <div class="memberValue">
4454 <select value="{{tagSelector}}">
4455 <option value="uv">User &gt; VM</option>
4456 <option value="u">User</option>
4457 <option value="vu">VM &gt; User</option>
4458 <option value="v">VM</option>
4459 <option value="hide">None</option>
4460 </select>
4461 </div>
4462 </div>
4463 </div>
4464 <hr>
4465 <table id="tableTree" class="table">
4466 <thead>
4467 <tr>
4468 <th>Method</th>
4469 <th>Self</th>
4470 </tr>
4471 </thead>
4472 <tbody>
4473 <tr template="" repeat="{{row in tree.rows }}" style="{{}}">
4474 <td on-click="{{toggleExpanded}}" class="{{ coloring(row) }}" style= "{{ padding(row) }}">
4475 <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander }}</span>
4476 <div style="position: relative;display: inline">
4477 {{row.columns[0]}}
4478 </div>
4479 <code-ref ref="{{ row.code }}"></code-ref>
4480 </td>
4481 <td class="{{ coloring(row) }}" style="position: relative">
4482 {{row.columns[1]}}
4483 <div class="tooltip">
4484 <div class="memberList">
4485 <div class="memberItem">
4486 <div class="memberName white">Kind</div>
4487 <div class="memberValue white">{{ row.tipKind }}</div>
4488 </div>
4489 <div class="memberItem">
4490 <div class="memberName white">Percent of Parent</div>
4491 <div class="memberValue white">{{ row.tipParent }}</div>
4492 </div>
4493 <div class="memberItem">
4494 <div class="memberName white">Sample Count</div>
4495 <div class="memberValue white">{{ row.tipTicks }} ({{ row.tip Exclusive }})</div>
4496 </div>
4497 <div class="memberItem">
4498 <div class="memberName white">Approximate Execution Time</div >
4499 <div class="memberValue white">{{ row.tipTime }}</div>
4500 </div>
4501 </div>
4502 </div>
4503 </td>
4504 </tr>
4505 </tbody>
4506 </table>
4507 </div>
4508 </template>
4509 </polymer-element>
4510
4511
4512
4513
4514
4515
4516
4517
4518
4519
4520 <polymer-element name="script-view" extends="observatory-element">
4521 <template>
4522 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.css" >
4523 <nav-bar>
4524 <top-nav-menu></top-nav-menu>
4525 <isolate-nav-menu isolate="{{ script.isolate }}">
4526 </isolate-nav-menu>
4527 <nav-menu link="{{ script.owningLibrary.link }}" anchor="{{ script.owningLib rary.name }}"></nav-menu>
4528 <nav-menu link="{{ script.link }}" anchor="{{ script.name }}" last="{{ true }}"></nav-menu>
4529 <nav-refresh callback="{{ refreshCoverage }}" label="Refresh Coverage"></nav -refresh>
4530 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4531 <nav-control></nav-control>
4532 </nav-bar>
4533
4534 <template if="{{ args['pos'] == null }}">
4535 <script-inset id="scriptInset" script="{{ script }}">
4536 <h1>script {{ script.name }}</h1>
4537 </script-inset>
4538 </template>
4539
4540 <template if="{{ args['pos'] != null }}">
4541 <script-inset id="scriptInset" script="{{ script }}" currentpos="{{ args['po s'] | parseInt }}">
4542 <h1>script {{ script.name }}</h1>
4543 </script-inset>
4544 </template>
4545
4546 </template>
4547 </polymer-element>
4548
4549
4550
4551
4552
4553
4554
4555
4556
4557
4558
4559
4560
4561 <polymer-element name="vm-view" extends="observatory-element">
4562 <template>
4563 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4564
4565 <nav-bar>
4566 <top-nav-menu last="{{ true }}"></top-nav-menu>
4567 <nav-refresh callback="{{ refresh }}"></nav-refresh>
4568 <nav-control></nav-control>
4569 </nav-bar>
4570
4571 <div class="content">
4572 <h1>VM</h1>
4573 <div class="memberList">
4574 <div class="memberItem">
4575 <div class="memberName">version</div>
4576 <div class="memberValue">{{ vm.version }}</div>
4577 </div>
4578 <div class="memberItem">
4579 <div class="memberName">uptime</div>
4580 <div class="memberValue">{{ vm.uptime | formatTime }}</div>
4581 </div>
4582 <div class="memberItem">
4583 <div class="memberName">type checks enabled</div>
4584 <div class="memberValue">{{ vm.typeChecksEnabled }}</div>
4585 </div>
4586 <div class="memberItem">
4587 <div class="memberName">asserts enabled</div>
4588 <div class="memberValue">{{ vm.assertsEnabled }}</div>
4589 </div>
4590 <div class="memberItem">
4591 <div class="memberName">pid</div>
4592 <div class="memberValue">{{ vm.pid }}</div>
4593 </div>
4594 <div class="memberItem">
4595 <div class="memberName">refreshed at</div>
4596 <div class="memberValue">{{ vm.lastUpdate }}</div>
4597 </div>
4598 <br>
4599 <div class="memberItem">
4600 <div class="memberValue">
4601 See <a on-click="{{ goto }}" _href="{{ gotoLink('/flags') }}">flags< /a>
4602 </div>
4603 </div>
4604 </div>
4605 </div>
4606
4607 <br>
4608 <hr>
4609
4610 <ul class="list-group">
4611 <template repeat="{{ isolate in vm.isolates }}">
4612 <li class="list-group-item">
4613 <isolate-summary isolate="{{ isolate }}"></isolate-summary>
4614 </li>
4615 <hr>
4616 </template>
4617 </ul>
4618 </template>
4619 </polymer-element>
4620
4621
4622 <polymer-element name="service-view" extends="observatory-element">
4623 <!-- This element explicitly manages the child elements to avoid setting
4624 an observable property on the old element to an invalid type. -->
4625 </polymer-element>
4626
4627 <polymer-element name="trace-view" extends="observatory-element">
4628 <template>
4629 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4630
4631 <template if="{{ tracer != null }}">
4632 <div class="memberList">
4633 <template repeat="{{ event in tracer.events }}">
4634 <div class="memberItem">
4635 <div class="memberSmall">
4636 {{ event.timeStamp }}
4637 </div>
4638 <div class="memberSmall">
4639 {{ event.message }}
4640 <template if="{{ event.map != null }}">
4641 <br>
4642 <map-viewer map="{{ event.map }}"></map-viewer>
4643 </template>
4644 </div>
4645 </div>
4646 </template>
4647 </div>
4648 <br>
4649 <br>
4650 <br>
4651 </template>
4652 </template>
4653 </polymer-element>
4654
4655 <polymer-element name="map-viewer" extends="observatory-element">
4656 <template>
4657 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4658
4659 <template if="{{ map.length > 0 }}">
4660 <curly-block callback="{{ expander() }}">
4661 <template if="{{ expand }}">
4662 <div class="memberList">
4663 <template repeat="{{ key in map.keys }}">
4664 <div class="memberItem">
4665 <div class="memberSmall">{{ key }}</div>
4666 <div class="memberSmall">:</div>
4667 <div class="memberSmall">
4668 <template if="{{ isMap(map[key]) }}">
4669 <map-viewer map="{{ map[key] }}"></map-viewer>
4670 </template>
4671 <template if="{{ isList(map[key]) }}">
4672 <list-viewer list="{{ map[key] }}"></list-viewer>
4673 </template>
4674 <template if="{{ !isMap(map[key]) &amp;&amp; !isList(map[key]) }}">
4675 {{ map[key] }}
4676 </template>
4677 </div>
4678 </div>
4679 </template>
4680 </div>
4681 </template>
4682 </curly-block>
4683 </template>
4684 </template>
4685 </polymer-element>
4686
4687 <polymer-element name="list-viewer" extends="observatory-element">
4688 <template>
4689 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
4690
4691 <template if="{{ list.length > 0 }}">
4692 <curly-block callback="{{ expander() }}">
4693 <template if="{{ expand }}">
4694 <div class="memberList">
4695 <template repeat="{{ element in list }}">
4696 <div class="memberItem">
4697 <div class="memberSmall">
4698 <template if="{{ isMap(element) }}">
4699 <map-viewer map="{{ element }}"></map-viewer>
4700 </template>
4701 <template if="{{ isList(element) }}">
4702 <list-viewer list="{{ element }}"></list-viewer>
4703 </template>
4704 <template if="{{ !isMap(element) &amp;&amp; !isList(element) } }">
4705 {{ element }}
4706 </template>
4707 </div>
4708 </div>
4709 </template>
4710 </div>
4711 </template>
4712 </curly-block>
4713 </template>
4714 </template>
4715 </polymer-element>
4716
4717
4718
4719 <polymer-element name="observatory-application" extends="observatory-element">
4720 <!-- This element explicitly manages its child elements -->
4721 </polymer-element>
4722
4723
4724
4725
4726
4727
4728
4729
4730
4731
21430 4732
21431 <polymer-element name="service-exception-view" extends="observatory-element"> 4733 <polymer-element name="service-exception-view" extends="observatory-element">
21432 <template> 4734 <template>
21433 <style>/* Global styles */ 4735 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
21434 * {
21435 margin: 0;
21436 padding: 0;
21437 font: 400 14px 'Montserrat', sans-serif;
21438 color: #333;
21439 box-sizing: border-box;
21440 }
21441
21442 .content {
21443 padding-left: 10%;
21444 font: 400 14px 'Montserrat', sans-serif;
21445 }
21446
21447 .content-centered {
21448 padding-left: 10%;
21449 padding-right: 10%;
21450 font: 400 14px 'Montserrat', sans-serif;
21451 }
21452
21453 .content-centered-big {
21454 padding-left: 5%;
21455 padding-right: 5%;
21456 font: 400 14px 'Montserrat', sans-serif;
21457 }
21458
21459 h1 {
21460 font: 400 18px 'Montserrat', sans-serif;
21461 }
21462
21463 .memberList {
21464 display: table;
21465 }
21466
21467 .memberItem {
21468 display: table-row;
21469 }
21470
21471 .memberName, .memberValue {
21472 display: table-cell;
21473 vertical-align: top;
21474 padding: 3px 0 3px 1em;
21475 font: 400 14px 'Montserrat', sans-serif;
21476 }
21477
21478 .memberSmall {
21479 display: table-cell;
21480 vertical-align: top;
21481 padding: 3px 0 3px 1em;
21482 font: 400 12px 'Montserrat', sans-serif;
21483 }
21484
21485 .monospace {
21486 font-family: consolas, courier, monospace;
21487 font-size: 1em;
21488 line-height: 1.2em;
21489 white-space: nowrap;
21490 }
21491
21492 a {
21493 color: #0489c3;
21494 text-decoration: none;
21495 }
21496
21497 a:hover {
21498 text-decoration: underline;
21499 }
21500
21501 em {
21502 color: inherit;
21503 font-style: italic;
21504 }
21505
21506 b {
21507 color: inherit;
21508 font-weight: bold;
21509 }
21510
21511 hr {
21512 margin-top: 20px;
21513 margin-bottom: 20px;
21514 border: 0;
21515 border-top: 1px solid #eee;
21516 height: 0;
21517 box-sizing: content-box;
21518 }
21519
21520 .list-group {
21521 padding-left: 0;
21522 margin-bottom: 20px;
21523 }
21524
21525 .list-group-item {
21526 position: relative;
21527 display: block;
21528 padding: 10px 15px;
21529 margin-bottom: -1px;
21530 background-color: #fff;
21531 }
21532
21533 .list-group-item:first-child {
21534 /* rounded top corners */
21535 border-top-right-radius:4px;
21536 border-top-left-radius:4px;
21537 }
21538
21539 .list-group-item:last-child {
21540 margin-bottom: 0;
21541 /* rounded bottom corners */
21542 border-bottom-right-radius: 4px;
21543 border-bottom-left-radius:4px;
21544 }
21545
21546 /* Flex row container */
21547 .flex-row {
21548 display: flex;
21549 flex-direction: row;
21550 }
21551
21552 /* Flex column container */
21553 .flex-column {
21554 display: flex;
21555 flex-direction: column;
21556 }
21557
21558 .flex-item-fit {
21559 flex-grow: 1;
21560 flex-shrink: 1;
21561 flex-basis: auto;
21562 }
21563
21564 .flex-item-no-shrink {
21565 flex-grow: 0;
21566 flex-shrink: 0;
21567 flex-basis: auto;
21568 }
21569
21570 .flex-item-fill {
21571 flex-grow: 0;
21572 flex-shrink: 1; /* shrink when pressured */
21573 flex-basis: 100%; /* try and take 100% */
21574 }
21575
21576 .flex-item-fixed-1-12 {
21577 flex-grow: 0;
21578 flex-shrink: 0;
21579 flex-basis: 8.3%;
21580 }
21581
21582 .flex-item-fixed-2-12 {
21583 flex-grow: 0;
21584 flex-shrink: 0;
21585 flex-basis: 16.6%;
21586 }
21587
21588 .flex-item-fixed-4-12 {
21589 flex-grow: 0;
21590 flex-shrink: 0;
21591 flex-basis: 33.3333%;
21592 }
21593
21594 .flex-item-fixed-6-12, .flex-item-50-percent {
21595 flex-grow: 0;
21596 flex-shrink: 0;
21597 flex-basis: 50%;
21598 }
21599
21600 .flex-item-fixed-8-12 {
21601 flex-grow: 0;
21602 flex-shrink: 0;
21603 flex-basis: 66.6666%;
21604 }
21605
21606 .flex-item-fixed-9-12 {
21607 flex-grow: 0;
21608 flex-shrink: 0;
21609 flex-basis: 75%;
21610 }
21611
21612
21613 .flex-item-fixed-12-12 {
21614 flex-grow: 0;
21615 flex-shrink: 0;
21616 flex-basis: 100%;
21617 }
21618
21619 .flex-item-10-percent {
21620 flex-grow: 0;
21621 flex-shrink: 0;
21622 flex-basis: 10%;
21623 }
21624
21625 .flex-item-15-percent {
21626 flex-grow: 0;
21627 flex-shrink: 0;
21628 flex-basis: 15%;
21629 }
21630
21631 .flex-item-20-percent {
21632 flex-grow: 0;
21633 flex-shrink: 0;
21634 flex-basis: 20%;
21635 }
21636
21637 .flex-item-30-percent {
21638 flex-grow: 0;
21639 flex-shrink: 0;
21640 flex-basis: 30%;
21641 }
21642
21643 .flex-item-40-percent {
21644 flex-grow: 0;
21645 flex-shrink: 0;
21646 flex-basis: 40%;
21647 }
21648
21649 .flex-item-50-percent {
21650 flex-grow: 0;
21651 flex-shrink: 0;
21652 flex-basis: 50%;
21653 }
21654
21655 .flex-item-60-percent {
21656 flex-grow: 0;
21657 flex-shrink: 0;
21658 flex-basis: 60%;
21659 }
21660
21661 .flex-item-70-percent {
21662 flex-grow: 0;
21663 flex-shrink: 0;
21664 flex-basis: 70%;
21665 }
21666
21667 .flex-item-80-percent {
21668 flex-grow: 0;
21669 flex-shrink: 0;
21670 flex-basis: 80%;
21671 }
21672
21673 .well {
21674 min-height: 20px;
21675 padding: 19px;
21676 margin-bottom: 20px;
21677 background-color: #f5f5f5;
21678 border: 1px solid #e3e3e3;
21679 border-radius: 4px;
21680 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
21681 }
21682
21683 .break-wrap {
21684 word-wrap: break-word;
21685 }
21686 </style>
21687 <nav-bar> 4736 <nav-bar>
21688 <top-nav-menu last="{{ true }}"></top-nav-menu> 4737 <top-nav-menu last="{{ true }}"></top-nav-menu>
21689 <nav-control></nav-control> 4738 <nav-control></nav-control>
21690 </nav-bar> 4739 </nav-bar>
21691 <div class="content-centered"> 4740 <div class="content-centered">
21692 <h1>{{ exception.kind }}</h1> 4741 <h1>{{ exception.kind }}</h1>
21693 <br> 4742 <br>
21694 <div class="well">{{ exception.message }}</div> 4743 <div class="well">{{ exception.message }}</div>
21695 <template if="{{ exception.response != '' }}"> 4744 <template if="{{ exception.response != '' }}">
21696 <div class="well">{{ exception.response }}</div> 4745 <div class="well">{{ exception.response }}</div>
21697 </template> 4746 </template>
21698 </div> 4747 </div>
21699 </template> 4748 </template>
21700 </polymer-element> 4749 </polymer-element>
21701 4750
21702 4751
21703 4752
21704 4753
21705 4754
21706 4755
21707 4756
21708 <polymer-element name="service-error-view" extends="observatory-element"> 4757 <polymer-element name="service-error-view" extends="observatory-element">
21709 <template> 4758 <template>
21710 <style>/* Global styles */ 4759 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
21711 * {
21712 margin: 0;
21713 padding: 0;
21714 font: 400 14px 'Montserrat', sans-serif;
21715 color: #333;
21716 box-sizing: border-box;
21717 }
21718
21719 .content {
21720 padding-left: 10%;
21721 font: 400 14px 'Montserrat', sans-serif;
21722 }
21723
21724 .content-centered {
21725 padding-left: 10%;
21726 padding-right: 10%;
21727 font: 400 14px 'Montserrat', sans-serif;
21728 }
21729
21730 .content-centered-big {
21731 padding-left: 5%;
21732 padding-right: 5%;
21733 font: 400 14px 'Montserrat', sans-serif;
21734 }
21735
21736 h1 {
21737 font: 400 18px 'Montserrat', sans-serif;
21738 }
21739
21740 .memberList {
21741 display: table;
21742 }
21743
21744 .memberItem {
21745 display: table-row;
21746 }
21747
21748 .memberName, .memberValue {
21749 display: table-cell;
21750 vertical-align: top;
21751 padding: 3px 0 3px 1em;
21752 font: 400 14px 'Montserrat', sans-serif;
21753 }
21754
21755 .memberSmall {
21756 display: table-cell;
21757 vertical-align: top;
21758 padding: 3px 0 3px 1em;
21759 font: 400 12px 'Montserrat', sans-serif;
21760 }
21761
21762 .monospace {
21763 font-family: consolas, courier, monospace;
21764 font-size: 1em;
21765 line-height: 1.2em;
21766 white-space: nowrap;
21767 }
21768
21769 a {
21770 color: #0489c3;
21771 text-decoration: none;
21772 }
21773
21774 a:hover {
21775 text-decoration: underline;
21776 }
21777
21778 em {
21779 color: inherit;
21780 font-style: italic;
21781 }
21782
21783 b {
21784 color: inherit;
21785 font-weight: bold;
21786 }
21787
21788 hr {
21789 margin-top: 20px;
21790 margin-bottom: 20px;
21791 border: 0;
21792 border-top: 1px solid #eee;
21793 height: 0;
21794 box-sizing: content-box;
21795 }
21796
21797 .list-group {
21798 padding-left: 0;
21799 margin-bottom: 20px;
21800 }
21801
21802 .list-group-item {
21803 position: relative;
21804 display: block;
21805 padding: 10px 15px;
21806 margin-bottom: -1px;
21807 background-color: #fff;
21808 }
21809
21810 .list-group-item:first-child {
21811 /* rounded top corners */
21812 border-top-right-radius:4px;
21813 border-top-left-radius:4px;
21814 }
21815
21816 .list-group-item:last-child {
21817 margin-bottom: 0;
21818 /* rounded bottom corners */
21819 border-bottom-right-radius: 4px;
21820 border-bottom-left-radius:4px;
21821 }
21822
21823 /* Flex row container */
21824 .flex-row {
21825 display: flex;
21826 flex-direction: row;
21827 }
21828
21829 /* Flex column container */
21830 .flex-column {
21831 display: flex;
21832 flex-direction: column;
21833 }
21834
21835 .flex-item-fit {
21836 flex-grow: 1;
21837 flex-shrink: 1;
21838 flex-basis: auto;
21839 }
21840
21841 .flex-item-no-shrink {
21842 flex-grow: 0;
21843 flex-shrink: 0;
21844 flex-basis: auto;
21845 }
21846
21847 .flex-item-fill {
21848 flex-grow: 0;
21849 flex-shrink: 1; /* shrink when pressured */
21850 flex-basis: 100%; /* try and take 100% */
21851 }
21852
21853 .flex-item-fixed-1-12 {
21854 flex-grow: 0;
21855 flex-shrink: 0;
21856 flex-basis: 8.3%;
21857 }
21858
21859 .flex-item-fixed-2-12 {
21860 flex-grow: 0;
21861 flex-shrink: 0;
21862 flex-basis: 16.6%;
21863 }
21864
21865 .flex-item-fixed-4-12 {
21866 flex-grow: 0;
21867 flex-shrink: 0;
21868 flex-basis: 33.3333%;
21869 }
21870
21871 .flex-item-fixed-6-12, .flex-item-50-percent {
21872 flex-grow: 0;
21873 flex-shrink: 0;
21874 flex-basis: 50%;
21875 }
21876
21877 .flex-item-fixed-8-12 {
21878 flex-grow: 0;
21879 flex-shrink: 0;
21880 flex-basis: 66.6666%;
21881 }
21882
21883 .flex-item-fixed-9-12 {
21884 flex-grow: 0;
21885 flex-shrink: 0;
21886 flex-basis: 75%;
21887 }
21888
21889
21890 .flex-item-fixed-12-12 {
21891 flex-grow: 0;
21892 flex-shrink: 0;
21893 flex-basis: 100%;
21894 }
21895
21896 .flex-item-10-percent {
21897 flex-grow: 0;
21898 flex-shrink: 0;
21899 flex-basis: 10%;
21900 }
21901
21902 .flex-item-15-percent {
21903 flex-grow: 0;
21904 flex-shrink: 0;
21905 flex-basis: 15%;
21906 }
21907
21908 .flex-item-20-percent {
21909 flex-grow: 0;
21910 flex-shrink: 0;
21911 flex-basis: 20%;
21912 }
21913
21914 .flex-item-30-percent {
21915 flex-grow: 0;
21916 flex-shrink: 0;
21917 flex-basis: 30%;
21918 }
21919
21920 .flex-item-40-percent {
21921 flex-grow: 0;
21922 flex-shrink: 0;
21923 flex-basis: 40%;
21924 }
21925
21926 .flex-item-50-percent {
21927 flex-grow: 0;
21928 flex-shrink: 0;
21929 flex-basis: 50%;
21930 }
21931
21932 .flex-item-60-percent {
21933 flex-grow: 0;
21934 flex-shrink: 0;
21935 flex-basis: 60%;
21936 }
21937
21938 .flex-item-70-percent {
21939 flex-grow: 0;
21940 flex-shrink: 0;
21941 flex-basis: 70%;
21942 }
21943
21944 .flex-item-80-percent {
21945 flex-grow: 0;
21946 flex-shrink: 0;
21947 flex-basis: 80%;
21948 }
21949
21950 .well {
21951 min-height: 20px;
21952 padding: 19px;
21953 margin-bottom: 20px;
21954 background-color: #f5f5f5;
21955 border: 1px solid #e3e3e3;
21956 border-radius: 4px;
21957 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
21958 }
21959
21960 .break-wrap {
21961 word-wrap: break-word;
21962 }
21963 </style>
21964 <nav-bar> 4760 <nav-bar>
21965 <top-nav-menu last="{{ true }}"></top-nav-menu> 4761 <top-nav-menu last="{{ true }}"></top-nav-menu>
21966 <nav-control></nav-control> 4762 <nav-control></nav-control>
21967 </nav-bar> 4763 </nav-bar>
21968 <div class="content-centered"> 4764 <div class="content-centered">
21969 <h1>{{ error.kind }}</h1> 4765 <h1>{{ error.kind }}</h1>
21970 <br> 4766 <br>
21971 <div class="well">{{ error.message }}</div> 4767 <div class="well">{{ error.message }}</div>
21972 </div> 4768 </div>
21973 </template> 4769 </template>
(...skipping 10 matching lines...) Expand all
21984 <style> 4780 <style>
21985 .delete-button { 4781 .delete-button {
21986 padding: 4px; 4782 padding: 4px;
21987 background: transparent; 4783 background: transparent;
21988 border: none !important; 4784 border: none !important;
21989 } 4785 }
21990 .delete-button:hover { 4786 .delete-button:hover {
21991 background: #ff0000; 4787 background: #ff0000;
21992 } 4788 }
21993 </style> 4789 </style>
21994 <style>/* Global styles */ 4790 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
21995 * {
21996 margin: 0;
21997 padding: 0;
21998 font: 400 14px 'Montserrat', sans-serif;
21999 color: #333;
22000 box-sizing: border-box;
22001 }
22002
22003 .content {
22004 padding-left: 10%;
22005 font: 400 14px 'Montserrat', sans-serif;
22006 }
22007
22008 .content-centered {
22009 padding-left: 10%;
22010 padding-right: 10%;
22011 font: 400 14px 'Montserrat', sans-serif;
22012 }
22013
22014 .content-centered-big {
22015 padding-left: 5%;
22016 padding-right: 5%;
22017 font: 400 14px 'Montserrat', sans-serif;
22018 }
22019
22020 h1 {
22021 font: 400 18px 'Montserrat', sans-serif;
22022 }
22023
22024 .memberList {
22025 display: table;
22026 }
22027
22028 .memberItem {
22029 display: table-row;
22030 }
22031
22032 .memberName, .memberValue {
22033 display: table-cell;
22034 vertical-align: top;
22035 padding: 3px 0 3px 1em;
22036 font: 400 14px 'Montserrat', sans-serif;
22037 }
22038
22039 .memberSmall {
22040 display: table-cell;
22041 vertical-align: top;
22042 padding: 3px 0 3px 1em;
22043 font: 400 12px 'Montserrat', sans-serif;
22044 }
22045
22046 .monospace {
22047 font-family: consolas, courier, monospace;
22048 font-size: 1em;
22049 line-height: 1.2em;
22050 white-space: nowrap;
22051 }
22052
22053 a {
22054 color: #0489c3;
22055 text-decoration: none;
22056 }
22057
22058 a:hover {
22059 text-decoration: underline;
22060 }
22061
22062 em {
22063 color: inherit;
22064 font-style: italic;
22065 }
22066
22067 b {
22068 color: inherit;
22069 font-weight: bold;
22070 }
22071
22072 hr {
22073 margin-top: 20px;
22074 margin-bottom: 20px;
22075 border: 0;
22076 border-top: 1px solid #eee;
22077 height: 0;
22078 box-sizing: content-box;
22079 }
22080
22081 .list-group {
22082 padding-left: 0;
22083 margin-bottom: 20px;
22084 }
22085
22086 .list-group-item {
22087 position: relative;
22088 display: block;
22089 padding: 10px 15px;
22090 margin-bottom: -1px;
22091 background-color: #fff;
22092 }
22093
22094 .list-group-item:first-child {
22095 /* rounded top corners */
22096 border-top-right-radius:4px;
22097 border-top-left-radius:4px;
22098 }
22099
22100 .list-group-item:last-child {
22101 margin-bottom: 0;
22102 /* rounded bottom corners */
22103 border-bottom-right-radius: 4px;
22104 border-bottom-left-radius:4px;
22105 }
22106
22107 /* Flex row container */
22108 .flex-row {
22109 display: flex;
22110 flex-direction: row;
22111 }
22112
22113 /* Flex column container */
22114 .flex-column {
22115 display: flex;
22116 flex-direction: column;
22117 }
22118
22119 .flex-item-fit {
22120 flex-grow: 1;
22121 flex-shrink: 1;
22122 flex-basis: auto;
22123 }
22124
22125 .flex-item-no-shrink {
22126 flex-grow: 0;
22127 flex-shrink: 0;
22128 flex-basis: auto;
22129 }
22130
22131 .flex-item-fill {
22132 flex-grow: 0;
22133 flex-shrink: 1; /* shrink when pressured */
22134 flex-basis: 100%; /* try and take 100% */
22135 }
22136
22137 .flex-item-fixed-1-12 {
22138 flex-grow: 0;
22139 flex-shrink: 0;
22140 flex-basis: 8.3%;
22141 }
22142
22143 .flex-item-fixed-2-12 {
22144 flex-grow: 0;
22145 flex-shrink: 0;
22146 flex-basis: 16.6%;
22147 }
22148
22149 .flex-item-fixed-4-12 {
22150 flex-grow: 0;
22151 flex-shrink: 0;
22152 flex-basis: 33.3333%;
22153 }
22154
22155 .flex-item-fixed-6-12, .flex-item-50-percent {
22156 flex-grow: 0;
22157 flex-shrink: 0;
22158 flex-basis: 50%;
22159 }
22160
22161 .flex-item-fixed-8-12 {
22162 flex-grow: 0;
22163 flex-shrink: 0;
22164 flex-basis: 66.6666%;
22165 }
22166
22167 .flex-item-fixed-9-12 {
22168 flex-grow: 0;
22169 flex-shrink: 0;
22170 flex-basis: 75%;
22171 }
22172
22173
22174 .flex-item-fixed-12-12 {
22175 flex-grow: 0;
22176 flex-shrink: 0;
22177 flex-basis: 100%;
22178 }
22179
22180 .flex-item-10-percent {
22181 flex-grow: 0;
22182 flex-shrink: 0;
22183 flex-basis: 10%;
22184 }
22185
22186 .flex-item-15-percent {
22187 flex-grow: 0;
22188 flex-shrink: 0;
22189 flex-basis: 15%;
22190 }
22191
22192 .flex-item-20-percent {
22193 flex-grow: 0;
22194 flex-shrink: 0;
22195 flex-basis: 20%;
22196 }
22197
22198 .flex-item-30-percent {
22199 flex-grow: 0;
22200 flex-shrink: 0;
22201 flex-basis: 30%;
22202 }
22203
22204 .flex-item-40-percent {
22205 flex-grow: 0;
22206 flex-shrink: 0;
22207 flex-basis: 40%;
22208 }
22209
22210 .flex-item-50-percent {
22211 flex-grow: 0;
22212 flex-shrink: 0;
22213 flex-basis: 50%;
22214 }
22215
22216 .flex-item-60-percent {
22217 flex-grow: 0;
22218 flex-shrink: 0;
22219 flex-basis: 60%;
22220 }
22221
22222 .flex-item-70-percent {
22223 flex-grow: 0;
22224 flex-shrink: 0;
22225 flex-basis: 70%;
22226 }
22227
22228 .flex-item-80-percent {
22229 flex-grow: 0;
22230 flex-shrink: 0;
22231 flex-basis: 80%;
22232 }
22233
22234 .well {
22235 min-height: 20px;
22236 padding: 19px;
22237 margin-bottom: 20px;
22238 background-color: #f5f5f5;
22239 border: 1px solid #e3e3e3;
22240 border-radius: 4px;
22241 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
22242 }
22243
22244 .break-wrap {
22245 word-wrap: break-word;
22246 }
22247 </style>
22248 <span> 4791 <span>
22249 <template if="{{ isCurrentTarget }}"> 4792 <template if="{{ isCurrentTarget }}">
22250 <a on-click="{{ connectToVm }}" _href="{{ gotoLink('/vm') }}">{{ target. name }} (Connected)</a> 4793 <a on-click="{{ connectToVm }}" _href="{{ gotoLink('/vm') }}">{{ target. name }} (Connected)</a>
22251 </template> 4794 </template>
22252 <template if="{{ !isCurrentTarget }}"> 4795 <template if="{{ !isCurrentTarget }}">
22253 <a on-click="{{ connectToVm }}" _href="{{ gotoLink('/vm') }}">{{ target. name }}</a> 4796 <a on-click="{{ connectToVm }}" _href="{{ gotoLink('/vm') }}">{{ target. name }}</a>
22254 </template> 4797 </template>
22255 <template if="{{ !isChromeTarget }}"> 4798 <template if="{{ !isChromeTarget }}">
22256 <button class="delete-button" on-click="{{ deleteVm }}">✖ Remove</button > 4799 <button class="delete-button" on-click="{{ deleteVm }}">✖ Remove</button >
22257 </template> 4800 </template>
22258 </span> 4801 </span>
22259 </template> 4802 </template>
22260 </polymer-element> 4803 </polymer-element>
22261 4804
22262 <polymer-element name="vm-connect" extends="observatory-element"> 4805 <polymer-element name="vm-connect" extends="observatory-element">
22263 <template> 4806 <template>
22264 <style>/* Global styles */ 4807 <link rel="stylesheet" href="packages/observatory/src/elements/css/shared.cs s">
22265 * {
22266 margin: 0;
22267 padding: 0;
22268 font: 400 14px 'Montserrat', sans-serif;
22269 color: #333;
22270 box-sizing: border-box;
22271 }
22272
22273 .content {
22274 padding-left: 10%;
22275 font: 400 14px 'Montserrat', sans-serif;
22276 }
22277
22278 .content-centered {
22279 padding-left: 10%;
22280 padding-right: 10%;
22281 font: 400 14px 'Montserrat', sans-serif;
22282 }
22283
22284 .content-centered-big {
22285 padding-left: 5%;
22286 padding-right: 5%;
22287 font: 400 14px 'Montserrat', sans-serif;
22288 }
22289
22290 h1 {
22291 font: 400 18px 'Montserrat', sans-serif;
22292 }
22293
22294 .memberList {
22295 display: table;
22296 }
22297
22298 .memberItem {
22299 display: table-row;
22300 }
22301
22302 .memberName, .memberValue {
22303 display: table-cell;
22304 vertical-align: top;
22305 padding: 3px 0 3px 1em;
22306 font: 400 14px 'Montserrat', sans-serif;
22307 }
22308
22309 .memberSmall {
22310 display: table-cell;
22311 vertical-align: top;
22312 padding: 3px 0 3px 1em;
22313 font: 400 12px 'Montserrat', sans-serif;
22314 }
22315
22316 .monospace {
22317 font-family: consolas, courier, monospace;
22318 font-size: 1em;
22319 line-height: 1.2em;
22320 white-space: nowrap;
22321 }
22322
22323 a {
22324 color: #0489c3;
22325 text-decoration: none;
22326 }
22327
22328 a:hover {
22329 text-decoration: underline;
22330 }
22331
22332 em {
22333 color: inherit;
22334 font-style: italic;
22335 }
22336
22337 b {
22338 color: inherit;
22339 font-weight: bold;
22340 }
22341
22342 hr {
22343 margin-top: 20px;
22344 margin-bottom: 20px;
22345 border: 0;
22346 border-top: 1px solid #eee;
22347 height: 0;
22348 box-sizing: content-box;
22349 }
22350
22351 .list-group {
22352 padding-left: 0;
22353 margin-bottom: 20px;
22354 }
22355
22356 .list-group-item {
22357 position: relative;
22358 display: block;
22359 padding: 10px 15px;
22360 margin-bottom: -1px;
22361 background-color: #fff;
22362 }
22363
22364 .list-group-item:first-child {
22365 /* rounded top corners */
22366 border-top-right-radius:4px;
22367 border-top-left-radius:4px;
22368 }
22369
22370 .list-group-item:last-child {
22371 margin-bottom: 0;
22372 /* rounded bottom corners */
22373 border-bottom-right-radius: 4px;
22374 border-bottom-left-radius:4px;
22375 }
22376
22377 /* Flex row container */
22378 .flex-row {
22379 display: flex;
22380 flex-direction: row;
22381 }
22382
22383 /* Flex column container */
22384 .flex-column {
22385 display: flex;
22386 flex-direction: column;
22387 }
22388
22389 .flex-item-fit {
22390 flex-grow: 1;
22391 flex-shrink: 1;
22392 flex-basis: auto;
22393 }
22394
22395 .flex-item-no-shrink {
22396 flex-grow: 0;
22397 flex-shrink: 0;
22398 flex-basis: auto;
22399 }
22400
22401 .flex-item-fill {
22402 flex-grow: 0;
22403 flex-shrink: 1; /* shrink when pressured */
22404 flex-basis: 100%; /* try and take 100% */
22405 }
22406
22407 .flex-item-fixed-1-12 {
22408 flex-grow: 0;
22409 flex-shrink: 0;
22410 flex-basis: 8.3%;
22411 }
22412
22413 .flex-item-fixed-2-12 {
22414 flex-grow: 0;
22415 flex-shrink: 0;
22416 flex-basis: 16.6%;
22417 }
22418
22419 .flex-item-fixed-4-12 {
22420 flex-grow: 0;
22421 flex-shrink: 0;
22422 flex-basis: 33.3333%;
22423 }
22424
22425 .flex-item-fixed-6-12, .flex-item-50-percent {
22426 flex-grow: 0;
22427 flex-shrink: 0;
22428 flex-basis: 50%;
22429 }
22430
22431 .flex-item-fixed-8-12 {
22432 flex-grow: 0;
22433 flex-shrink: 0;
22434 flex-basis: 66.6666%;
22435 }
22436
22437 .flex-item-fixed-9-12 {
22438 flex-grow: 0;
22439 flex-shrink: 0;
22440 flex-basis: 75%;
22441 }
22442
22443
22444 .flex-item-fixed-12-12 {
22445 flex-grow: 0;
22446 flex-shrink: 0;
22447 flex-basis: 100%;
22448 }
22449
22450 .flex-item-10-percent {
22451 flex-grow: 0;
22452 flex-shrink: 0;
22453 flex-basis: 10%;
22454 }
22455
22456 .flex-item-15-percent {
22457 flex-grow: 0;
22458 flex-shrink: 0;
22459 flex-basis: 15%;
22460 }
22461
22462 .flex-item-20-percent {
22463 flex-grow: 0;
22464 flex-shrink: 0;
22465 flex-basis: 20%;
22466 }
22467
22468 .flex-item-30-percent {
22469 flex-grow: 0;
22470 flex-shrink: 0;
22471 flex-basis: 30%;
22472 }
22473
22474 .flex-item-40-percent {
22475 flex-grow: 0;
22476 flex-shrink: 0;
22477 flex-basis: 40%;
22478 }
22479
22480 .flex-item-50-percent {
22481 flex-grow: 0;
22482 flex-shrink: 0;
22483 flex-basis: 50%;
22484 }
22485
22486 .flex-item-60-percent {
22487 flex-grow: 0;
22488 flex-shrink: 0;
22489 flex-basis: 60%;
22490 }
22491
22492 .flex-item-70-percent {
22493 flex-grow: 0;
22494 flex-shrink: 0;
22495 flex-basis: 70%;
22496 }
22497
22498 .flex-item-80-percent {
22499 flex-grow: 0;
22500 flex-shrink: 0;
22501 flex-basis: 80%;
22502 }
22503
22504 .well {
22505 min-height: 20px;
22506 padding: 19px;
22507 margin-bottom: 20px;
22508 background-color: #f5f5f5;
22509 border: 1px solid #e3e3e3;
22510 border-radius: 4px;
22511 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
22512 }
22513
22514 .break-wrap {
22515 word-wrap: break-word;
22516 }
22517 </style>
22518 <style> 4808 <style>
22519 .textbox { 4809 .textbox {
22520 width: 20em; 4810 width: 20em;
22521 font: 400 16px 'Montserrat', sans-serif; 4811 font: 400 16px 'Montserrat', sans-serif;
22522 } 4812 }
22523 </style> 4813 </style>
22524 4814
22525 <nav-bar> 4815 <nav-bar>
22526 <top-nav-menu last="{{ true }}"></top-nav-menu> 4816 <top-nav-menu last="{{ true }}"></top-nav-menu>
22527 <nav-control></nav-control> 4817 <nav-control></nav-control>
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after
22575 </div> 4865 </div>
22576 </template> 4866 </template>
22577 </polymer-element> 4867 </polymer-element>
22578 4868
22579 4869
22580 4870
22581 4871
22582 4872
22583 4873
22584 <polymer-element name="vm-ref" extends="service-ref"> 4874 <polymer-element name="vm-ref" extends="service-ref">
22585 <template><style>/* Global styles */ 4875 <template><link rel="stylesheet" href="packages/observatory/src/elements/css/s hared.css">
22586 * {
22587 margin: 0;
22588 padding: 0;
22589 font: 400 14px 'Montserrat', sans-serif;
22590 color: #333;
22591 box-sizing: border-box;
22592 }
22593
22594 .content {
22595 padding-left: 10%;
22596 font: 400 14px 'Montserrat', sans-serif;
22597 }
22598
22599 .content-centered {
22600 padding-left: 10%;
22601 padding-right: 10%;
22602 font: 400 14px 'Montserrat', sans-serif;
22603 }
22604
22605 .content-centered-big {
22606 padding-left: 5%;
22607 padding-right: 5%;
22608 font: 400 14px 'Montserrat', sans-serif;
22609 }
22610
22611 h1 {
22612 font: 400 18px 'Montserrat', sans-serif;
22613 }
22614
22615 .memberList {
22616 display: table;
22617 }
22618
22619 .memberItem {
22620 display: table-row;
22621 }
22622
22623 .memberName, .memberValue {
22624 display: table-cell;
22625 vertical-align: top;
22626 padding: 3px 0 3px 1em;
22627 font: 400 14px 'Montserrat', sans-serif;
22628 }
22629
22630 .memberSmall {
22631 display: table-cell;
22632 vertical-align: top;
22633 padding: 3px 0 3px 1em;
22634 font: 400 12px 'Montserrat', sans-serif;
22635 }
22636
22637 .monospace {
22638 font-family: consolas, courier, monospace;
22639 font-size: 1em;
22640 line-height: 1.2em;
22641 white-space: nowrap;
22642 }
22643
22644 a {
22645 color: #0489c3;
22646 text-decoration: none;
22647 }
22648
22649 a:hover {
22650 text-decoration: underline;
22651 }
22652
22653 em {
22654 color: inherit;
22655 font-style: italic;
22656 }
22657
22658 b {
22659 color: inherit;
22660 font-weight: bold;
22661 }
22662
22663 hr {
22664 margin-top: 20px;
22665 margin-bottom: 20px;
22666 border: 0;
22667 border-top: 1px solid #eee;
22668 height: 0;
22669 box-sizing: content-box;
22670 }
22671
22672 .list-group {
22673 padding-left: 0;
22674 margin-bottom: 20px;
22675 }
22676
22677 .list-group-item {
22678 position: relative;
22679 display: block;
22680 padding: 10px 15px;
22681 margin-bottom: -1px;
22682 background-color: #fff;
22683 }
22684
22685 .list-group-item:first-child {
22686 /* rounded top corners */
22687 border-top-right-radius:4px;
22688 border-top-left-radius:4px;
22689 }
22690
22691 .list-group-item:last-child {
22692 margin-bottom: 0;
22693 /* rounded bottom corners */
22694 border-bottom-right-radius: 4px;
22695 border-bottom-left-radius:4px;
22696 }
22697
22698 /* Flex row container */
22699 .flex-row {
22700 display: flex;
22701 flex-direction: row;
22702 }
22703
22704 /* Flex column container */
22705 .flex-column {
22706 display: flex;
22707 flex-direction: column;
22708 }
22709
22710 .flex-item-fit {
22711 flex-grow: 1;
22712 flex-shrink: 1;
22713 flex-basis: auto;
22714 }
22715
22716 .flex-item-no-shrink {
22717 flex-grow: 0;
22718 flex-shrink: 0;
22719 flex-basis: auto;
22720 }
22721
22722 .flex-item-fill {
22723 flex-grow: 0;
22724 flex-shrink: 1; /* shrink when pressured */
22725 flex-basis: 100%; /* try and take 100% */
22726 }
22727
22728 .flex-item-fixed-1-12 {
22729 flex-grow: 0;
22730 flex-shrink: 0;
22731 flex-basis: 8.3%;
22732 }
22733
22734 .flex-item-fixed-2-12 {
22735 flex-grow: 0;
22736 flex-shrink: 0;
22737 flex-basis: 16.6%;
22738 }
22739
22740 .flex-item-fixed-4-12 {
22741 flex-grow: 0;
22742 flex-shrink: 0;
22743 flex-basis: 33.3333%;
22744 }
22745
22746 .flex-item-fixed-6-12, .flex-item-50-percent {
22747 flex-grow: 0;
22748 flex-shrink: 0;
22749 flex-basis: 50%;
22750 }
22751
22752 .flex-item-fixed-8-12 {
22753 flex-grow: 0;
22754 flex-shrink: 0;
22755 flex-basis: 66.6666%;
22756 }
22757
22758 .flex-item-fixed-9-12 {
22759 flex-grow: 0;
22760 flex-shrink: 0;
22761 flex-basis: 75%;
22762 }
22763
22764
22765 .flex-item-fixed-12-12 {
22766 flex-grow: 0;
22767 flex-shrink: 0;
22768 flex-basis: 100%;
22769 }
22770
22771 .flex-item-10-percent {
22772 flex-grow: 0;
22773 flex-shrink: 0;
22774 flex-basis: 10%;
22775 }
22776
22777 .flex-item-15-percent {
22778 flex-grow: 0;
22779 flex-shrink: 0;
22780 flex-basis: 15%;
22781 }
22782
22783 .flex-item-20-percent {
22784 flex-grow: 0;
22785 flex-shrink: 0;
22786 flex-basis: 20%;
22787 }
22788
22789 .flex-item-30-percent {
22790 flex-grow: 0;
22791 flex-shrink: 0;
22792 flex-basis: 30%;
22793 }
22794
22795 .flex-item-40-percent {
22796 flex-grow: 0;
22797 flex-shrink: 0;
22798 flex-basis: 40%;
22799 }
22800
22801 .flex-item-50-percent {
22802 flex-grow: 0;
22803 flex-shrink: 0;
22804 flex-basis: 50%;
22805 }
22806
22807 .flex-item-60-percent {
22808 flex-grow: 0;
22809 flex-shrink: 0;
22810 flex-basis: 60%;
22811 }
22812
22813 .flex-item-70-percent {
22814 flex-grow: 0;
22815 flex-shrink: 0;
22816 flex-basis: 70%;
22817 }
22818
22819 .flex-item-80-percent {
22820 flex-grow: 0;
22821 flex-shrink: 0;
22822 flex-basis: 80%;
22823 }
22824
22825 .well {
22826 min-height: 20px;
22827 padding: 19px;
22828 margin-bottom: 20px;
22829 background-color: #f5f5f5;
22830 border: 1px solid #e3e3e3;
22831 border-radius: 4px;
22832 box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
22833 }
22834
22835 .break-wrap {
22836 word-wrap: break-word;
22837 }
22838 </style>
22839 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a> 4876 <a on-click="{{ goto }}" _href="{{ url }}">{{ ref.name }}</a>
22840 </template> 4877 </template>
22841 </polymer-element> 4878 </polymer-element>
22842 4879
22843 4880
22844 4881
22845 4882
22846 </div> 4883 </div>
22847 <observatory-application devtools="true"></observatory-application> 4884 <observatory-application devtools="true"></observatory-application>
22848 4885
22849 4886
22850 <script src="index_devtools.html_bootstrap.dart.js" async=""></script></body></h tml> 4887 <script src="index_devtools.html_bootstrap.dart.js" async=""></script></body></h tml>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698