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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 206213004: Add a VM page to the observatory. (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | runtime/bin/vmservice/client/deployed/web/index.html_bootstrap.dart.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html><html><head> 1 <!DOCTYPE html><html><head>
2 2
3 3
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <link type="text/css" rel="stylesheet" href="bootstrap_css/css/bootstrap.min.c ss"> 5 <link type="text/css" rel="stylesheet" href="bootstrap_css/css/bootstrap.min.c ss">
6 6
7 <title>Dart VM Observatory</title> 7 <title>Dart VM Observatory</title>
8 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 8 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
9 9
10 10
(...skipping 145 matching lines...) Expand 10 before | Expand all | Expand 10 after
156 </template> 156 </template>
157 <template if="{{ !active }}"> 157 <template if="{{ !active }}">
158 <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button> 158 <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button>
159 </template> 159 </template>
160 </li> 160 </li>
161 </template> 161 </template>
162 </polymer-element> 162 </polymer-element>
163 163
164 <polymer-element name="top-nav-menu"> 164 <polymer-element name="top-nav-menu">
165 <template> 165 <template>
166 <nav-menu link="#" anchor="Observatory" last="{{ last }}"> 166 <nav-menu link="#/vm" anchor="Observatory" last="{{ last }}">
167 <content></content> 167 <content></content>
168 </nav-menu> 168 </nav-menu>
169 </template> 169 </template>
170 </polymer-element> 170 </polymer-element>
171 171
172 <polymer-element name="isolate-nav-menu" extends="observatory-element"> 172 <polymer-element name="isolate-nav-menu" extends="observatory-element">
173 <template> 173 <template>
174 <nav-menu link="{{ isolate.hashLink }}" anchor="{{ isolate.name }}" last="{{ last }}"> 174 <nav-menu link="{{ isolate.hashLink }}" anchor="{{ isolate.name }}" last="{{ last }}">
175 <nav-menu-item link="{{ isolate.relativeHashLink('stacktrace') }}" anchor= "stack trace"></nav-menu-item> 175 <nav-menu-item link="{{ isolate.relativeHashLink('stacktrace') }}" anchor= "stack trace"></nav-menu-item>
176 <nav-menu-item link="{{ isolate.relativeHashLink('profile') }}" anchor="cp u profile"></nav-menu-item> 176 <nav-menu-item link="{{ isolate.relativeHashLink('profile') }}" anchor="cp u profile"></nav-menu-item>
(...skipping 546 matching lines...) Expand 10 before | Expand all | Expand 10 after
723 Raw message... <i class="{{ iconClass }}"></i> 723 Raw message... <i class="{{ iconClass }}"></i>
724 </a> 724 </a>
725 <div style="display: {{ displayValue }}" class="well"> 725 <div style="display: {{ displayValue }}" class="well">
726 <content></content> 726 <content></content>
727 </div> 727 </div>
728 </div> 728 </div>
729 </template> 729 </template>
730 730
731 </polymer-element><polymer-element name="error-view" extends="observatory-elemen t"> 731 </polymer-element><polymer-element name="error-view" extends="observatory-elemen t">
732 <template> 732 <template>
733 <nav-bar>
734 <top-nav-menu last="{{ true }}"></top-nav-menu>
735 </nav-bar>
736
733 <div class="row"> 737 <div class="row">
734 <div class="col-md-8 col-md-offset-2"> 738 <div class="col-md-8 col-md-offset-2">
735 <div class="panel panel-danger"> 739 <div class="panel panel-danger">
736 <div class="panel-heading">{{ error.kind }}</div> 740 <div class="panel-heading">{{ error.kind }}</div>
737 <div class="panel-body"> 741 <div class="panel-body">
738 <p>{{ error.message }}</p> 742 <p>{{ error.message }}</p>
739 </div> 743 </div>
740 </div> 744 </div>
741 </div> 745 </div>
742 </div> 746 </div>
743 </template> 747 </template>
744 748
745 </polymer-element><polymer-element name="field-view" extends="observatory-elemen t"> 749 </polymer-element>
750 <polymer-element name="field-view" extends="observatory-element">
746 <template> 751 <template>
747 <nav-bar> 752 <nav-bar>
748 <top-nav-menu></top-nav-menu> 753 <top-nav-menu></top-nav-menu>
749 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu> 754 <isolate-nav-menu isolate="{{ field.isolate }}"></isolate-nav-menu>
750 <template if="{{ field['owner'].serviceType == 'Class' }}"> 755 <template if="{{ field['owner'].serviceType == 'Class' }}">
751 <!-- TODO(turnidge): Add library nav menu here. --> 756 <!-- TODO(turnidge): Add library nav menu here. -->
752 <class-nav-menu cls="{{ field['owner'] }}"></class-nav-menu> 757 <class-nav-menu cls="{{ field['owner'] }}"></class-nav-menu>
753 </template> 758 </template>
754 <template if="{{ field['owner'].serviceType == 'Library' }}"> 759 <template if="{{ field['owner'].serviceType == 'Library' }}">
755 <library-nav-menu library="{{ field['owner'] }}"></library-nav-menu> 760 <library-nav-menu library="{{ field['owner'] }}"></library-nav-menu>
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after
881 </template> 886 </template>
882 887
883 </polymer-element> 888 </polymer-element>
884 <polymer-element name="isolate-summary" extends="observatory-element"> 889 <polymer-element name="isolate-summary" extends="observatory-element">
885 <template> 890 <template>
886 <div class="row"> 891 <div class="row">
887 <div class="col-md-1"> 892 <div class="col-md-1">
888 <img src="img/isolate_icon.png" class="img-polaroid"> 893 <img src="img/isolate_icon.png" class="img-polaroid">
889 </div> 894 </div>
890 895
891 <div class="col-md-1">{{ isolate.vmName }}</div> 896 <div class="col-md-1">{{ isolate.mainPort }}</div>
892 897
893 <!-- TODO(turnidge): Use function-ref when it can take isolate param --> 898 <!-- TODO(turnidge): Use function-ref when it can take isolate param -->
894 <div class="col-md-4"> 899 <div class="col-md-4">
895 900
896 <div class="row"> 901 <div class="row">
897 <isolate-ref ref="{{ isolate }}"></isolate-ref> 902 <isolate-ref ref="{{ isolate }}"></isolate-ref>
898 </div> 903 </div>
899 904
900 <div class="row"> 905 <div class="row">
901 <small> 906 <small>
902 (<a href="{{ isolate.rootLib.hashLink }}">library</a>) 907 (<a href="{{ isolate.rootLib.hashLink }}">library</a>)
903 (<a href="{{ isolate.relativeHashLink('debug/breakpoints') }}">break points</a>) 908 (<a href="{{ isolate.relativeHashLink('debug/breakpoints') }}">break points</a>)
904 (<a href="{{ isolate.relativeHashLink('profile') }}">profile</a>) 909 (<a href="{{ isolate.relativeHashLink('profile') }}">profile</a>)
905 </small> 910 </small>
906 </div> 911 </div>
907 </div> 912 </div>
908 913
909 <div class="col-md-2"> 914 <div class="col-md-2">
910 <div class="row"> 915 <div class="row">
911 <div class="col-md-3">{{ isolate.timers['total'] | formatTime }}</div> 916 <div class="col-md-5">{{ isolate.timers['total'] | formatTimePrecise } }</div>
912 <div class="col-md-1"></div> 917 <div class="col-md-1"></div>
913 <div class="col-md-3"><p class="text-muted">total</p></div> 918 <div class="col-md-3"><p class="text-muted">total</p></div>
914 </div> 919 </div>
915 <div class="row"> 920 <div class="row">
916 <div class="col-md-3">{{ isolate.timers['dart'] | formatTime }}</div> 921 <div class="col-md-5">{{ isolate.timers['dart'] | formatTimePrecise }} </div>
917 <div class="col-md-1"></div> 922 <div class="col-md-1"></div>
918 <div class="col-md-3"><p class="text-muted">dart</p></div> 923 <div class="col-md-3"><p class="text-muted">dart</p></div>
919 </div> 924 </div>
920 <div class="row"> 925 <div class="row">
921 <div class="col-md-3">{{ isolate.timers['compile'] | formatTime }}</di v> 926 <div class="col-md-5">{{ isolate.timers['compile'] | formatTimePrecise }}</div>
922 <div class="col-md-1"></div> 927 <div class="col-md-1"></div>
923 <div class="col-md-3"><p class="text-muted">compile</p></div> 928 <div class="col-md-3"><p class="text-muted">compile</p></div>
924 </div> 929 </div>
925 <div class="row"> 930 <div class="row">
926 <div class="col-md-3">{{ isolate.timers['gc'] | formatTime }}</div> 931 <div class="col-md-5">{{ isolate.timers['gc'] | formatTimePrecise }}</ div>
927 <div class="col-md-1"></div> 932 <div class="col-md-1"></div>
928 <div class="col-md-3"><p class="text-muted">gc</p></div> 933 <div class="col-md-3"><p class="text-muted">gc</p></div>
929 </div> 934 </div>
930 <div class="row"> 935 <div class="row">
931 <div class="col-md-3">{{ isolate.timers['init'] | formatTime }}</div> 936 <div class="col-md-5">{{ isolate.timers['init'] | formatTimePrecise }} </div>
932 <div class="col-md-1"></div> 937 <div class="col-md-1"></div>
933 <div class="col-md-3"><p class="text-muted">init</p></div> 938 <div class="col-md-3"><p class="text-muted">init</p></div>
934 </div> 939 </div>
935 </div> 940 </div>
936 <div class="col-md-2"> 941 <div class="col-md-2">
937 <a href="{{ isolate.relativeHashLink('allocationprofile') }}"> 942 <a href="{{ isolate.relativeHashLink('allocationprofile') }}">
938 {{ isolate.newHeapUsed | formatSize }}/{{ isolate.oldHeapUsed | format Size }} 943 {{ isolate.newHeapUsed | formatSize }}/{{ isolate.oldHeapUsed | format Size }}
939 </a> 944 </a>
940 ( <a href="{{ isolate.relativeHashLink('heapmap') }}">map</a> ) 945 ( <a href="{{ isolate.relativeHashLink('heapmap') }}">map</a> )
941 </div> 946 </div>
(...skipping 17 matching lines...) Expand all
959 <br> 964 <br>
960 <pre>{{ isolate.topFrame['line'] }} &nbsp; {{ isolate.topFrame['lineSt ring'] }}</pre> 965 <pre>{{ isolate.topFrame['line'] }} &nbsp; {{ isolate.topFrame['lineSt ring'] }}</pre>
961 </template> 966 </template>
962 </div> 967 </div>
963 <div class="col-md-3"> 968 <div class="col-md-3">
964 </div> 969 </div>
965 </div> 970 </div>
966 </template> 971 </template>
967 972
968 </polymer-element> 973 </polymer-element>
969 <polymer-element name="isolate-list" extends="observatory-element">
970 <template>
971 <nav-bar>
972 <top-nav-menu last="{{ true }}"></top-nav-menu>
973 <!-- TODO(turnidge): Why doesn't "this.refresh" work? -->
974 <nav-refresh callback="{{ refresh } }}"></nav-refresh>
975 </nav-bar>
976 <ul class="list-group">
977 <template repeat="{{ isolate in isolates.isolates.values }}">
978 <li class="list-group-item">
979 <isolate-summary isolate="{{ isolate }}"></isolate-summary>
980 </li>
981 </template>
982 </ul>
983 </template>
984
985 </polymer-element>
986 <polymer-element name="isolate-view" extends="observatory-element"> 974 <polymer-element name="isolate-view" extends="observatory-element">
987 <template> 975 <template>
988 <style> 976 <style>
989 .content { 977 .content {
990 padding-left: 10%; 978 padding-left: 10%;
991 font: 400 14px 'Montserrat', sans-serif; 979 font: 400 14px 'Montserrat', sans-serif;
992 } 980 }
993 h1 { 981 h1 {
994 font: 400 18px 'Montserrat', sans-serif; 982 font: 400 18px 'Montserrat', sans-serif;
995 } 983 }
(...skipping 12 matching lines...) Expand all
1008 .sourceInset { 996 .sourceInset {
1009 padding-left: 15%; 997 padding-left: 15%;
1010 padding-right: 15%; 998 padding-right: 15%;
1011 } 999 }
1012 </style> 1000 </style>
1013 1001
1014 <nav-bar> 1002 <nav-bar>
1015 <top-nav-menu></top-nav-menu> 1003 <top-nav-menu></top-nav-menu>
1016 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}"> 1004 <isolate-nav-menu isolate="{{ isolate }}" last="{{ true }}">
1017 </isolate-nav-menu> 1005 </isolate-nav-menu>
1006 <nav-refresh callback="{{ refresh }}"></nav-refresh>
1018 </nav-bar> 1007 </nav-bar>
1019 1008
1020 <div class="content"> 1009 <div class="content">
1021 <h1>isolate '{{ isolate.name }}'</h1> 1010 <h1>isolate '{{ isolate.name }}'</h1>
1022 <div class="memberList"> 1011 <div class="memberList">
1023 <div class="memberItem"> 1012 <div class="memberItem">
1024 <div class="memberName">status</div> 1013 <div class="memberName">status</div>
1025 <div class="memberValue"> 1014 <div class="memberValue">
1026 <template if="{{ isolate.topFrame == null }}"> 1015 <template if="{{ isolate.pausedOnStart }}">
1027 <strong>idle</strong> 1016 <strong style="color:darkred;">paused</strong> @ isolate start
1017 <span style="padding-left:20px;">
1018 [<a on-click="{{ resume }}">resume</a>]
1019 </span>
1028 </template> 1020 </template>
1029 <template if="{{ isolate.topFrame != null }}"> 1021
1022 <template if="{{ isolate.pausedOnExit }}">
1023 <strong style="color:darkred;">paused</strong> @ isolate exit
1024 <span style="padding-left:20px;">
1025 [<a on-click="{{ resume }}">resume</a>]
1026 </span>
1027 </template>
1028
1029 <template if="{{ isolate.running }}">
1030 <strong>running</strong> 1030 <strong>running</strong>
1031 @ 1031 @
1032 <function-ref ref="{{ isolate.topFrame['function'] }}"> 1032 <function-ref ref="{{ isolate.topFrame['function'] }}">
1033 </function-ref> 1033 </function-ref>
1034 (<script-ref ref="{{ isolate.topFrame['script'] }}" line="{{ isola te.topFrame['line'] }}"></script-ref>) 1034 (<script-ref ref="{{ isolate.topFrame['script'] }}" line="{{ isola te.topFrame['line'] }}"></script-ref>)
1035 </template> 1035 </template>
1036
1037 <template if="{{ isolate.idle }}">
1038 <strong>idle</strong>
1039 </template>
1036 </div> 1040 </div>
1037 </div> 1041 </div>
1038 </div> 1042 </div>
1039 </div> 1043 </div>
1040 1044
1041 <template if="{{ isolate.topFrame != null }}"> 1045 <template if="{{ isolate.topFrame != null }}">
1042 <br> 1046 <br>
1043 <div class="sourceInset"> 1047 <div class="sourceInset">
1044 <pre> {{ isolate.topFrame['line'] }} &nbsp; {{ isolate.topFrame ['lineString'] }}</pre> 1048 <pre> {{ isolate.topFrame['line'] }} &nbsp; {{ isolate.topFrame ['lineString'] }}</pre>
1045 </div> 1049 </div>
(...skipping 12 matching lines...) Expand all
1058 <div class="memberItem"> 1062 <div class="memberItem">
1059 <template if="{{ isolate.entry != null }}"> 1063 <template if="{{ isolate.entry != null }}">
1060 <div class="memberName">entry</div> 1064 <div class="memberName">entry</div>
1061 <div class="memberValue"> 1065 <div class="memberValue">
1062 <function-ref ref="{{ isolate.entry }}"></function-ref> 1066 <function-ref ref="{{ isolate.entry }}"></function-ref>
1063 </div> 1067 </div>
1064 </template> 1068 </template>
1065 </div> 1069 </div>
1066 <div class="memberItem"> 1070 <div class="memberItem">
1067 <div class="memberName">id</div> 1071 <div class="memberName">id</div>
1068 <div class="memberValue">{{ isolate.vmName }}</div> 1072 <div class="memberValue">{{ isolate.mainPort }}</div>
1069 </div> 1073 </div>
1070 <br> 1074 <br>
1071 <div class="memberItem"> 1075 <div class="memberItem">
1072 <div class="memberValue"> 1076 <div class="memberValue">
1073 See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack tra ce</a> 1077 See <a href="{{ isolate.relativeHashLink('stacktrace') }}">stack tra ce</a>
1074 </div> 1078 </div>
1075 </div> 1079 </div>
1076 <div class="memberItem"> 1080 <div class="memberItem">
1077 <div class="memberValue"> 1081 <div class="memberValue">
1078 See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profile< /a> 1082 See <a href="{{ isolate.relativeHashLink('profile') }}">cpu profile< /a>
(...skipping 28 matching lines...) Expand all
1107 {{ isolate.oldHeapCapacity | formatSize }} 1111 {{ isolate.oldHeapCapacity | formatSize }}
1108 </div> 1112 </div>
1109 </div> 1113 </div>
1110 </div> 1114 </div>
1111 1115
1112 <br> 1116 <br>
1113 1117
1114 <div class="memberList"> 1118 <div class="memberList">
1115 <div class="memberItem"> 1119 <div class="memberItem">
1116 <div class="memberValue"> 1120 <div class="memberValue">
1117 See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">he ap profile</a> 1121 See <a href="{{ isolate.relativeHashLink('allocationprofile') }}">al location profile</a>
1118 </div> 1122 </div>
1119 </div> 1123 </div>
1120 <div class="memberItem"> 1124 <div class="memberItem">
1121 <div class="memberValue"> 1125 <div class="memberValue">
1122 See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map</a> 1126 See <a href="{{ isolate.relativeHashLink('heapmap') }}">heap map</a>
1123 </div> 1127 </div>
1124 </div> 1128 </div>
1125 </div> 1129 </div>
1126 </div> 1130 </div>
1127 1131
(...skipping 643 matching lines...) Expand 10 before | Expand all | Expand 10 after
1771 <template repeat="{{ frame in trace['members'] }}"> 1775 <template repeat="{{ frame in trace['members'] }}">
1772 <li class="list-group-item"> 1776 <li class="list-group-item">
1773 <stack-frame frame="{{ frame }}"></stack-frame> 1777 <stack-frame frame="{{ frame }}"></stack-frame>
1774 </li> 1778 </li>
1775 </template> 1779 </template>
1776 </ul> 1780 </ul>
1777 </template> 1781 </template>
1778 </template> 1782 </template>
1779 1783
1780 </polymer-element> 1784 </polymer-element>
1785 <polymer-element name="vm-view" extends="observatory-element">
1786 <template>
1787 <style>
1788 .content {
1789 padding-left: 10%;
1790 font: 400 14px 'Montserrat', sans-serif;
1791 }
1792 h1 {
1793 font: 400 18px 'Montserrat', sans-serif;
1794 }
1795 .memberList {
1796 display: table;
1797 }
1798 .memberItem {
1799 display: table-row;
1800 }
1801 .memberName, .memberValue {
1802 display: table-cell;
1803 vertical-align: top;
1804 padding: 3px 0 3px 1em;
1805 font: 400 14px 'Montserrat', sans-serif;
1806 }
1807 .sourceInset {
1808 padding-left: 15%;
1809 padding-right: 15%;
1810 }
1811 </style>
1812
1813 <nav-bar>
1814 <top-nav-menu last="{{ true }}"></top-nav-menu>
1815 <nav-refresh callback="{{ refresh }}"></nav-refresh>
1816 </nav-bar>
1817
1818 <div class="content">
1819 <h1>VM</h1>
1820 <div class="memberList">
1821 <div class="memberItem">
1822 <div class="memberName">version</div>
1823 <div class="memberValue">{{ vm.version }}</div>
1824 </div>
1825 <div class="memberItem">
1826 <div class="memberName">uptime</div>
1827 <div class="memberValue">{{ vm.uptime | formatTime }}</div>
1828 </div>
1829 </div>
1830 </div>
1831
1832 <br>
1833
1834 <ul class="list-group">
1835 <template repeat="{{ isolate in vm.allIsolates }}">
1836 <li class="list-group-item">
1837 <isolate-summary isolate="{{ isolate }}"></isolate-summary>
1838 </li>
1839 </template>
1840 </ul>
1841 </template>
1842
1843 </polymer-element>
1781 <polymer-element name="service-view" extends="observatory-element"> 1844 <polymer-element name="service-view" extends="observatory-element">
1782 <!-- This element explicitly manages the child elements to avoid setting 1845 <!-- This element explicitly manages the child elements to avoid setting
1783 an observable property on the old element to an invalid type. --> 1846 an observable property on the old element to an invalid type. -->
1784 1847
1785 </polymer-element> 1848 </polymer-element>
1786 <polymer-element name="response-viewer" extends="observatory-element"> 1849 <polymer-element name="response-viewer" extends="observatory-element">
1787 <template> 1850 <template>
1788 <service-view object="{{ app.response }}"></service-view> 1851 <service-view object="{{ app.response }}"></service-view>
1789 </template> 1852 </template>
1790 1853
1791 </polymer-element><polymer-element name="observatory-application" extends="obser vatory-element"> 1854 </polymer-element><polymer-element name="observatory-application" extends="obser vatory-element">
1792 <template> 1855 <template>
1793 <response-viewer app="{{ app }}"></response-viewer> 1856 <response-viewer app="{{ app }}"></response-viewer>
1794 </template> 1857 </template>
1795 1858
1796 </polymer-element> 1859 </polymer-element>
1860 <polymer-element name="vm-ref" extends="service-ref">
1861 <template>
1862 <a href="{{ url }}">{{ ref.name }}</a>
1863 </template>
1864
1865 </polymer-element>
1797 1866
1798 1867
1799 <observatory-application></observatory-application> 1868 <observatory-application></observatory-application>
1800 1869
1801 </body></html> 1870 </body></html>
OLDNEW
« no previous file with comments | « no previous file | runtime/bin/vmservice/client/deployed/web/index.html_bootstrap.dart.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698