OLD | NEW |
| (Empty) |
1 <link rel="import" href="../../../../packages/polymer/polymer.html"> | |
2 <link rel="import" href="code_ref.html"> | |
3 <link rel="import" href="function_ref.html"> | |
4 <link rel="import" href="nav_bar.html"> | |
5 <link rel="import" href="observatory_element.html"> | |
6 <link rel="import" href="sliding_checkbox.html"> | |
7 | |
8 <polymer-element name="isolate-profile" extends="observatory-element"> | |
9 <template> | |
10 <link rel="stylesheet" href="css/shared.css"> | |
11 <nav-bar> | |
12 <top-nav-menu></top-nav-menu> | |
13 <isolate-nav-menu isolate="{{ profile.isolate }}"></isolate-nav-menu> | |
14 <nav-menu link="{{ profile.isolate.relativeLink('profile') }}" anchor="cpu
profile" last="{{ true }}"></nav-menu> | |
15 <nav-refresh callback="{{ refresh }}"></nav-refresh> | |
16 <nav-control></nav-control> | |
17 </nav-bar> | |
18 <style> | |
19 .table { | |
20 border-collapse: collapse!important; | |
21 width: 100%; | |
22 margin-bottom: 20px | |
23 } | |
24 .table thead > tr > th, | |
25 .table tbody > tr > th, | |
26 .table tfoot > tr > th, | |
27 .table thead > tr > td, | |
28 .table tbody > tr > td, | |
29 .table tfoot > tr > td { | |
30 padding: 8px; | |
31 vertical-align: top; | |
32 } | |
33 .table thead > tr > th { | |
34 vertical-align: bottom; | |
35 text-align: left; | |
36 border-bottom:2px solid #ddd; | |
37 } | |
38 | |
39 tr:hover > td { | |
40 background-color: #FFF3E3; | |
41 } | |
42 .rowColor0 { | |
43 background-color: #FFE9CC; | |
44 } | |
45 .rowColor1 { | |
46 background-color: #FFDEB2; | |
47 } | |
48 .rowColor2 { | |
49 background-color: #FFD399; | |
50 } | |
51 .rowColor3 { | |
52 background-color: #FFC87F; | |
53 } | |
54 .rowColor4 { | |
55 background-color: #FFBD66; | |
56 } | |
57 .rowColor5 { | |
58 background-color: #FFB24C; | |
59 } | |
60 .rowColor6 { | |
61 background-color: #FFA733; | |
62 } | |
63 .rowColor7 { | |
64 background-color: #FF9C19; | |
65 } | |
66 .rowColor8 { | |
67 background-color: #FF9100; | |
68 } | |
69 | |
70 .tooltip { | |
71 display: block; | |
72 position: absolute; | |
73 visibility: hidden; | |
74 opacity: 0; | |
75 transition: visibility 0s linear 0.5s; | |
76 transition: opacity .4s ease-in-out; | |
77 } | |
78 | |
79 tr:hover .tooltip { | |
80 display: block; | |
81 position: absolute; | |
82 top: 100%; | |
83 right: 100%; | |
84 visibility: visible; | |
85 z-index: 999; | |
86 width: 400px; | |
87 color: #ffffff; | |
88 background-color: #0489c3; | |
89 border-top-right-radius: 8px; | |
90 border-top-left-radius: 8px; | |
91 border-bottom-right-radius: 8px; | |
92 border-bottom-left-radius: 8px; | |
93 transition: visibility 0s linear 0.5s; | |
94 transition: opacity .4s ease-in-out; | |
95 opacity: 1; | |
96 } | |
97 | |
98 .white { | |
99 color: #ffffff; | |
100 } | |
101 | |
102 </style> | |
103 <div class="content"> | |
104 <h1>Sampled CPU profile</h1> | |
105 <div class="memberList"> | |
106 <div class="memberItem"> | |
107 <div class="memberName">Timestamp</div> | |
108 <div class="memberValue">{{ refreshTime }}</div> | |
109 </div> | |
110 <div class="memberItem"> | |
111 <div class="memberName">Time span</div> | |
112 <div class="memberValue">{{ timeSpan }}</div> | |
113 </div> | |
114 <div class="memberItem"> | |
115 <div class="memberName">Sample count</div> | |
116 <div class="memberValue">{{ sampleCount }}</div> | |
117 </div> | |
118 <div class="memberItem"> | |
119 <div class="memberName">Sample rate</div> | |
120 <div class="memberValue">{{ sampleRate }} Hz</div> | |
121 </div> | |
122 <div class="memberItem"> | |
123 <div class="memberName">Sample depth</div> | |
124 <div class="memberValue">{{ sampleDepth }} stack frames</div> | |
125 </div> | |
126 <div class="memberItem"> | |
127 <div class="memberName">Display cutoff</div> | |
128 <div class="memberValue">{{ displayCutoff }}</div> | |
129 </div> | |
130 <div class="memberItem"> | |
131 <div class="memberName">Tags</div> | |
132 <div class="memberValue"> | |
133 <select value="{{tagSelector}}"> | |
134 <option value="uv">User > VM</option> | |
135 <option value="u">User</option> | |
136 <option value="vu">VM > User</option> | |
137 <option value="v">VM</option> | |
138 <option value="hide">None</option> | |
139 </select> | |
140 </div> | |
141 </div> | |
142 </div> | |
143 <hr> | |
144 <table id="tableTree" class="table"> | |
145 <thead> | |
146 <tr> | |
147 <th>Method</th> | |
148 <th>Self</th> | |
149 </tr> | |
150 </thead> | |
151 <tbody> | |
152 <tr template repeat="{{row in tree.rows }}" style="{{}}"> | |
153 <td on-click="{{toggleExpanded}}" | |
154 class="{{ coloring(row) }}" | |
155 style="{{ padding(row) }}"> | |
156 <span id="expand" style="{{ row.expanderStyle }}">{{ row.expander
}}</span> | |
157 <div style="position: relative;display: inline"> | |
158 {{row.columns[0]}} | |
159 </div> | |
160 <code-ref ref="{{ row.code }}"></code-ref> | |
161 </td> | |
162 <td class="{{ coloring(row) }}" style="position: relative"> | |
163 {{row.columns[1]}} | |
164 <div class="tooltip"> | |
165 <div class="memberList"> | |
166 <div class="memberItem"> | |
167 <div class="memberName white">Kind</div> | |
168 <div class="memberValue white">{{ row.tipKind }}</div> | |
169 </div> | |
170 <div class="memberItem"> | |
171 <div class="memberName white">Percent of Parent</div> | |
172 <div class="memberValue white">{{ row.tipParent }}</div> | |
173 </div> | |
174 <div class="memberItem"> | |
175 <div class="memberName white">Sample Count</div> | |
176 <div class="memberValue white">{{ row.tipTicks }} ({{ row.tip
Exclusive }})</div> | |
177 </div> | |
178 <div class="memberItem"> | |
179 <div class="memberName white">Approximate Execution Time</div
> | |
180 <div class="memberValue white">{{ row.tipTime }}</div> | |
181 </div> | |
182 </div> | |
183 </div> | |
184 </td> | |
185 </tr> | |
186 </tbody> | |
187 </table> | |
188 </div> | |
189 </template> | |
190 </polymer-element> | |
191 | |
192 <script type="application/dart" src="isolate_profile.dart"></script> | |
OLD | NEW |