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

Side by Side Diff: runtime/bin/vmservice/observatory/lib/src/elements/isolate_profile.html

Issue 837723004: Build Observatory as part of runtime (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <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 &gt; VM</option>
135 <option value="u">User</option>
136 <option value="vu">VM &gt; 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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698