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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: runtime/observatory/lib/src/elements/cpu_profile.html

Issue 965593002: Improved profiler view and inclusive profile tree (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 5 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
« runtime/observatory/lib/src/app/view_model.dart ('K') | « runtime/observatory/lib/src/elements/cpu_profile.dart ('k') | runtime/observatory/lib/src/elements/css/shared.css » ('j') | runtime/vm/object.cc » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <link rel="import" href="../../../../packages/polymer/polymer.html"> 1 <link rel="import" href="../../../../packages/polymer/polymer.html">
2 <link rel="import" href="code_ref.html"> 2 <link rel="import" href="code_ref.html">
3 <link rel="import" href="function_ref.html"> 3 <link rel="import" href="function_ref.html">
4 <link rel="import" href="nav_bar.html"> 4 <link rel="import" href="nav_bar.html">
5 <link rel="import" href="observatory_element.html"> 5 <link rel="import" href="observatory_element.html">
6 <link rel="import" href="sliding_checkbox.html"> 6 <link rel="import" href="sliding_checkbox.html">
7 7
8 <polymer-element name="cpu-profile" extends="observatory-element"> 8 <polymer-element name="cpu-profile" extends="observatory-element">
9 <template> 9 <template>
10 <link rel="stylesheet" href="css/shared.css"> 10 <link rel="stylesheet" href="css/shared.css">
11 <nav-bar> 11 <nav-bar>
12 <top-nav-menu></top-nav-menu> 12 <top-nav-menu></top-nav-menu>
13 <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu> 13 <isolate-nav-menu isolate="{{ isolate }}"></isolate-nav-menu>
14 <nav-menu link="{{ makeLink('/profiler', isolate) }}" anchor="cpu profile" last="{{ true }}"></nav-menu> 14 <nav-menu link="{{ makeLink('/profiler', isolate) }}" anchor="cpu profile" last="{{ true }}"></nav-menu>
15 <nav-refresh callback="{{ refresh }}"></nav-refresh> 15 <nav-refresh callback="{{ refresh }}"></nav-refresh>
16 <nav-refresh callback="{{ clear }}" label="Clear"></nav-refresh> 16 <nav-refresh callback="{{ clear }}" label="Clear"></nav-refresh>
17 <nav-control></nav-control> 17 <nav-control></nav-control>
18 </nav-bar> 18 </nav-bar>
19 <style> 19 <style>
20 .tableWell {
21 background-color: #ECECEC;
22 padding: 0.2em;
23 }
24
20 .table { 25 .table {
21 border-collapse: collapse!important; 26 border-spacing: 0px;
22 width: 100%; 27 width: 100%;
23 margin-bottom: 20px 28 margin-bottom: 20px
24 table-layout: fixed; 29 vertical-align: middle;
25 } 30 }
26 .table thead > tr > th, 31
27 .table tbody > tr > th, 32 tr {
28 .table tfoot > tr > th, 33 background-color: #FFFFFF;
29 .table thead > tr > td, 34 }
30 .table tbody > tr > td, 35
31 .table tfoot > tr > td { 36 tbody tr {
37 animation: fadeIn 0.5s;
38 -moz-animation: fadeIn 0.5s;
39 -webkit-animation: fadeIn 0.5s;
40 }
41
42 tbody tr:hover {
43 background-color: #FAFAFA;
44 }
45
46 tr td:first-child,
47 tr th:first-child {
48 width: 100%;
49 }
50
51 .table thead > tr > th {
32 padding: 8px; 52 padding: 8px;
33 vertical-align: top;
34 }
35 .table thead > tr > th {
36 vertical-align: bottom; 53 vertical-align: bottom;
37 text-align: left; 54 text-align: left;
38 border-bottom:2px solid #ddd; 55 border-bottom: 1px solid #ddd;
39 } 56 }
40 57
41 tr:hover > td { 58 .infoBox {
42 background-color: #FFF3E3; 59 position: absolute;
43 } 60 top: 100%;
44 .rowColor0 { 61 left: 0%;
45 background-color: #FFE9CC; 62 z-index: 999;
46 } 63 opacity: 1;
47 .rowColor1 { 64 padding: 1em;
48 background-color: #FFDEB2; 65 background-color: #ffffff;
49 } 66 border-left: solid 2px #ECECEC;
50 .rowColor2 { 67 border-bottom: solid 2px #ECECEC;
51 background-color: #FFD399; 68 border-right: solid 2px #ECECEC;
52 }
53 .rowColor3 {
54 background-color: #FFC87F;
55 }
56 .rowColor4 {
57 background-color: #FFBD66;
58 }
59 .rowColor5 {
60 background-color: #FFB24C;
61 }
62 .rowColor6 {
63 background-color: #FFA733;
64 }
65 .rowColor7 {
66 background-color: #FF9C19;
67 }
68 .rowColor8 {
69 background-color: #FF9100;
70 } 69 }
71 70
72 .tooltip { 71 .statusMessage {
73 display: block; 72 font-size: 150%;
74 position: absolute; 73 font-weight: bold;
75 visibility: hidden;
76 opacity: 0;
77 transition: visibility 0s linear 0.5s;
78 transition: opacity .4s ease-in-out;
79 } 74 }
80 75
81 tr:hover .tooltip { 76 .statusBox {
82 display: block; 77 height: 100%;
83 position: absolute; 78 padding: 1em;
84 top: 100%;
85 right: 100%;
86 visibility: visible;
87 z-index: 999;
88 width: 400px;
89 color: #ffffff;
90 background-color: #0489c3;
91 border-top-right-radius: 8px;
92 border-top-left-radius: 8px;
93 border-bottom-right-radius: 8px;
94 border-bottom-left-radius: 8px;
95 transition: visibility 0s linear 0.5s;
96 transition: opacity .4s ease-in-out;
97 opacity: 1;
98 } 79 }
99 80
100 .white { 81 .center {
101 color: #ffffff; 82 align-items: center;
83 justify-content: center;
84 }
85
86 .notice {
87 background-color: #fcf8e3;
88 }
89
90 .red {
91 background-color: #f2dede;
102 } 92 }
103 93
104 </style> 94 </style>
105 <div class="content"> 95 <div class="content-centered-big">
106 <h1>Sampled CPU profile</h1> 96 <h1>Sampled CPU profile</h1>
107 <div class="memberList"> 97 <hr>
108 <div class="memberItem"> 98 <template if="{{ state == 'Requested' }}">
109 <div class="memberName">Timestamp</div> 99 <div class="statusBox shadow center">
110 <div class="memberValue">{{ refreshTime }}</div> 100 <div class="statusMessage">Fetching profile from VM...</div>
111 </div> 101 </div>
112 <div class="memberItem"> 102 </template>
113 <div class="memberName">Time span</div> 103 <template if="{{ state == 'Loading' }}">
114 <div class="memberValue">{{ timeSpan }}</div> 104 <div class="statusBox shadow center">
105 <div class="statusMessage">Loading profile...</div>
115 </div> 106 </div>
116 <div class="memberItem"> 107 </template>
117 <div class="memberName">Sample count</div> 108 <template if="{{ state == 'Exception' }}">
118 <div class="memberValue">{{ sampleCount }}</div> 109 <div class="statusBox shadow center">
119 </div> 110 <div class="statusMessage">
120 <div class="memberItem"> 111 <h1>Exception:</h1>
121 <div class="memberName">Sample rate</div> 112 <br>
122 <div class="memberValue">{{ sampleRate }} Hz</div> 113 <pre>{{ exception.toString() }}</pre>
123 </div> 114 <br>
124 <div class="memberItem"> 115 <h1>Stack trace:</h1>
125 <div class="memberName">Stack depth</div> 116 <br>
126 <div class="memberValue">{{ stackDepth }} stack frames</div> 117 <pre>{{ stackTrace.toString() }}</pre>
127 </div>
128 <div class="memberItem">
129 <div class="memberName">Display cutoff</div>
130 <div class="memberValue">{{ displayCutoff }}</div>
131 </div>
132 <div class="memberItem">
133 <div class="memberName">Tags</div>
134 <div class="memberValue">
135 <select value="{{tagSelector}}">
136 <option value="UserVM">User &gt; VM</option>
137 <option value="UserOnly">User</option>
138 <option value="VMUser">VM &gt; User</option>
139 <option value="VMOnly">VM</option>
140 <option value="None">None</option>
141 </select>
142 </div>
143 </div>
144 <div class="memberItem">
145 <div class="memberName">Mode</div>
146 <div class="memberValue">
147 <select value="{{modeSelector}}">
148 <option value="Code">Code</option>
149 <option value="Function">Function</option>
150 </select>
151 </div> 118 </div>
152 </div> 119 </div>
120 </template>
121 <template if="{{ state == 'Loaded' }}">
122 <div class="memberList">
123 <div class="memberItem">
124 <div class="memberName">Refreshed at </div>
125 <div class="memberValue">{{ refreshTime }} (fetched in {{ fetchTime }}) (loaded in {{ loadTime }})</div>
rmacnak 2015/03/02 22:25:26 units: fetched in XX seconds, loaded in XX seconds
Cutch 2015/03/02 22:48:19 These are formatted with formatTime which adds uni
126 </div>
127 <div class="memberItem">
128 <div class="memberName">Profile contains</div>
129 <div class="memberValue">{{ sampleCount }} samples (spanning {{ time Span }})</div>
130 </div>
131 <div class="memberItem">
132 <div class="memberName">Sampling</div>
133 <div class="memberValue">{{ stackDepth }} stack frames @ {{ sampleRa te }} Hz</div>
134 </div>
135 <div class="memberItem">
136 <div class="memberName">Mode</div>
137 <div class="memberValue">
138 <select value="{{modeSelector}}">
139 <option value="Code">Code</option>
140 <option value="Function">Function</option>
141 </select>
142 </div>
143 </div>
144 <div class="memberItem">
145 <div class="memberName">Tag Order</div>
146 <div class="memberValue">
147 <select value="{{tagSelector}}">
148 <option value="UserVM">User &gt; VM</option>
149 <option value="UserOnly">User</option>
150 <option value="VMUser">VM &gt; User</option>
151 <option value="VMOnly">VM</option>
152 <option value="None">None</option>
153 </select>
154 </div>
155 </div>
156 <div class="memberItem">
157 <div class="memberName">Call Tree Direction</div>
158 <div class="memberValue">
159 <select value="{{directionSelector}}">
160 <option value="Down">Top down</option>
161 <option value="Up">Bottom up</option>
162 </select>
163 </div>
164 </div>
165 </div>
166 </template>
167 <template if="{{ state == 'Loaded' && directionSelector == 'Down' }}">
168 <br>
169 <div class="statusBox shadow">
170 <div>Tree is rooted at main.</div>
171 <br>
172 <div>Child nodes are callees.</div>
173 <br>
174 <div class="notice">To get the most out of this mode you may need to l aunch Dart with a higher --profile-depth flag value.</div>
175 <div class="notice">Try 16, 32, ... up to 256 until each sample captur es the entire call stack.</div>
176 <div class="red">NOTE: Higher values will impact performance</div>
177 </div>
178 </template>
179 <template if="{{ state == 'Loaded' && directionSelector == 'Up' }}">
180 <br>
181 <div class="statusBox shadow">
182 <div>Tree is rooted at executing function / code.</div>
183 <br>
184 <div>Child nodes are callers.</div>
185 </div>
186 </template>
187 <br><br>
188 <div class="tableWell shadow">
189 <table class="table">
190 <thead id="treeHeader">
191 <tr>
192 <th>Method</th>
193 <th>Self</th>
194 </tr>
195 </thead>
196 <tbody id="treeBody">
197 </tbody>
198 </table>
153 </div> 199 </div>
154 <hr>
155 <table class="table">
156 <thead id="treeHeader">
157 <tr>
158 <th>Method</th>
159 <th>Self</th>
160 </tr>
161 </thead>
162 <tbody id="treeBody">
163 </tbody>
164 </table>
165 <hr>
166 </div> 200 </div>
167 </template> 201 </template>
168 </polymer-element> 202 </polymer-element>
169 203
170 <script type="application/dart" src="cpu_profile.dart"></script> 204 <script type="application/dart" src="cpu_profile.dart"></script>
OLDNEW
« runtime/observatory/lib/src/app/view_model.dart ('K') | « runtime/observatory/lib/src/elements/cpu_profile.dart ('k') | runtime/observatory/lib/src/elements/css/shared.css » ('j') | runtime/vm/object.cc » ('J')

Powered by Google App Engine
This is Rietveld 408576698