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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/tracing/timeline_track_test.html

Issue 9706010: about:tracing support for TRACE_ASYNC_START/FINISH events. (Closed) Base URL: http://git.chromium.org/chromium/src.git@master
Patch Set: try again Created 8 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
« no previous file with comments | « chrome/browser/resources/tracing/timeline_track.js ('k') | chrome/browser/resources/tracing/trace_event_importer.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> 1 <!DOCTYPE HTML>
2 <html> 2 <html>
3 <!-- 3 <!--
4 Copyright (c) 2012 The Chromium Authors. All rights reserved. 4 Copyright (c) 2012 The Chromium Authors. All rights reserved.
5 Use of this source code is governed by a BSD-style license that can be 5 Use of this source code is governed by a BSD-style license that can be
6 found in the LICENSE file. 6 found in the LICENSE file.
7 --> 7 -->
8 <head i18n-values="dir:textdirection;"> 8 <head i18n-values="dir:textdirection;">
9 <title>TimelineTrack tests</title> 9 <title>TimelineTrack tests</title>
10 <script 10 <script
(...skipping 22 matching lines...) Expand all
33 <script src="sorted_array_utils.js"></script> 33 <script src="sorted_array_utils.js"></script>
34 <script src="measuring_stick.js"></script> 34 <script src="measuring_stick.js"></script>
35 <script src="timeline.js"></script> 35 <script src="timeline.js"></script>
36 <script src="timeline_track.js"></script> 36 <script src="timeline_track.js"></script>
37 <script src="fast_rect_renderer.js"></script> 37 <script src="fast_rect_renderer.js"></script>
38 </head> 38 </head>
39 <body> 39 <body>
40 <script> 40 <script>
41 </script> 41 </script>
42 <script> 42 <script>
43 var TimelineAsyncSlice = tracing.TimelineAsyncSlice;
44 var TimelineAsyncSliceGroup = tracing.TimelineAsyncSliceGroup;
43 var TimelineCounter = tracing.TimelineCounter; 45 var TimelineCounter = tracing.TimelineCounter;
44 var TimelineCounterTrack = tracing.TimelineCounterTrack; 46 var TimelineCounterTrack = tracing.TimelineCounterTrack;
45 var TimelineCpu = tracing.TimelineCpu; 47 var TimelineCpu = tracing.TimelineCpu;
46 var TimelineCpuTrack = tracing.TimelineCpuTrack; 48 var TimelineCpuTrack = tracing.TimelineCpuTrack;
49 var TimelineProcess = tracing.TimelineProcess;
47 var TimelineSliceTrack = tracing.TimelineSliceTrack; 50 var TimelineSliceTrack = tracing.TimelineSliceTrack;
48 var TimelineSlice = tracing.TimelineSlice; 51 var TimelineSlice = tracing.TimelineSlice;
52 var TimelineThread = tracing.TimelineThread;
53 var TimelineThreadSlice = tracing.TimelineThreadSlice;
54 var TimelineThreadTrack = tracing.TimelineThreadTrack;
49 var TimelineViewport = tracing.TimelineViewport; 55 var TimelineViewport = tracing.TimelineViewport;
50 var testDivs = {}; 56 var testDivs = {};
51 57
58 // Helper function to create a slice.
59 function newAsyncSlice(start, duration, startThread, endThread) {
60 var s = new TimelineAsyncSlice('a', 0, start);
61 s.duration = duration;
62 s.startThread = startThread;
63 s.endThread = endThread;
64 return s;
65 }
66
52 function getTestDiv(name) { 67 function getTestDiv(name) {
53 if (!testDivs[name]) { 68 if (!testDivs[name]) {
54 testDivs[name] = document.createElement('div'); 69 testDivs[name] = document.createElement('div');
55 document.body.appendChild(testDivs[name]); 70 document.body.appendChild(testDivs[name]);
56 } 71 }
57 testDivs[name].textContent = ''; 72 testDivs[name].textContent = '';
58 return testDivs[name]; 73 return testDivs[name];
59 } 74 }
60 75
61 function testBasicSlices() { 76 function testBasicSlices() {
62 var testEl = getTestDiv('testBasicSlices'); 77 var testEl = getTestDiv('testBasicSlices');
63 var track = TimelineSliceTrack(); 78 var track = TimelineSliceTrack();
64 testEl.appendChild(track); 79 testEl.appendChild(track);
65 track.heading = 'testBasicSlices'; 80 track.heading = 'testBasicSlices';
66 track.slices = [ 81 track.slices = [
67 new TimelineSlice('a', 0, 1, {}, 1), 82 new TimelineSlice('a', 0, 1, {}, 1),
68 new TimelineSlice('b', 1, 2.1, {}, 4.8), 83 new TimelineSlice('b', 1, 2.1, {}, 4.8),
69 new TimelineSlice('b', 1, 7, {}, 0.5), 84 new TimelineSlice('b', 1, 7, {}, 0.5),
70 new TimelineSlice('c', 2, 7.6, {}, 0.4) 85 new TimelineSlice('c', 2, 7.6, {}, 0.4)
71 ]; 86 ];
72 track.viewport = new TimelineViewport(testEl); 87 track.viewport = new TimelineViewport(testEl);
73 track.viewport.setPanAndScale(0, 88 track.viewport.setPanAndScale(0,
74 track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end)); 89 track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end));
75 } 90 }
76 91
92 function testBasicSlicesWithAsyncFlag() {
93 var testEl = getTestDiv('testBasicSlicesWithAsyncFlag');
94 var track = TimelineSliceTrack();
95 testEl.appendChild(track);
96 track.asyncStyle = true;
97 track.heading = 'testBasicSlices+AsyncFlag';
98 track.slices = [
99 new TimelineSlice('a', 0, 1, {}, 1),
100 new TimelineSlice('b', 1, 2.1, {}, 4.8),
101 new TimelineSlice('b', 1, 7, {}, 0.5),
102 new TimelineSlice('c', 2, 7.6, {}, 0.4)
103 ];
104 track.viewport = new TimelineViewport(testEl);
105 track.viewport.setPanAndScale(0,
106 track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end));
107 }
108
77 function testShrinkingSliceSizes() { 109 function testShrinkingSliceSizes() {
78 var testEl = getTestDiv('testShrinkingSliceSizes'); 110 var testEl = getTestDiv('testShrinkingSliceSizes');
79 var track = TimelineSliceTrack(); 111 var track = TimelineSliceTrack();
80 testEl.appendChild(track); 112 testEl.appendChild(track);
81 track.heading = 'testShrinkingSliceSizes'; 113 track.heading = 'testShrinkingSliceSizes';
82 var x = 0; 114 var x = 0;
83 var widths = [10, 5, 4, 3, 2, 1, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05]; 115 var widths = [10, 5, 4, 3, 2, 1, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05];
84 var slices = []; 116 var slices = [];
85 for (var i = 0; i < widths.length; i++) { 117 for (var i = 0; i < widths.length; i++) {
86 var s = new TimelineSlice('a', 1, x, {}, widths[i]); 118 var s = new TimelineSlice('a', 1, x, {}, widths[i]);
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after
179 testEl.appendChild(track); 211 testEl.appendChild(track);
180 track.heading = ctr.name; 212 track.heading = ctr.name;
181 track.counter = ctr; 213 track.counter = ctr;
182 track.viewport = new TimelineViewport(testEl); 214 track.viewport = new TimelineViewport(testEl);
183 track.viewport.setPanAndScale(0, 215 track.viewport.setPanAndScale(0,
184 track.clientWidth / (1.1 * ctr.maxTimestamp)); 216 track.clientWidth / (1.1 * ctr.maxTimestamp));
185 } 217 }
186 218
187 /* You'll need visual inspection to test eliding with this one. */ 219 /* You'll need visual inspection to test eliding with this one. */
188 function testElideVisualInspection() { 220 function testElideVisualInspection() {
189 var optDicts = [ { trackName: 'elideOff', elide: false }, 221 var optDicts = [{ trackName: 'elideOff', elide: false },
190 { trackName: 'elideOn', elide: true } ]; 222 { trackName: 'elideOn', elide: true }];
191 for (dictIndex in optDicts) { 223 for (dictIndex in optDicts) {
192 dict = optDicts[dictIndex]; 224 dict = optDicts[dictIndex];
193 var testEl = getTestDiv(dict.trackName); 225 var testEl = getTestDiv(dict.trackName);
194 var track = TimelineSliceTrack(); 226 var track = TimelineSliceTrack();
195 if (dict.elide) { 227 if (dict.elide) {
196 track.SHOULD_ELIDE_TEXT = true; 228 track.SHOULD_ELIDE_TEXT = true;
197 } else { 229 } else {
198 track.SHOULD_ELIDE_TEXT = false; 230 track.SHOULD_ELIDE_TEXT = false;
199 } 231 }
200 var tooLongTitle = 'Unless eliding this SHOULD NOT BE DISPLAYED. '; 232 var tooLongTitle = 'Unless eliding this SHOULD NOT BE DISPLAYED. ';
201 var bigTitle = 'Very big title name that goes on longer ' + 233 var bigTitle = 'Very big title name that goes on longer ' +
202 'than you may expect'; 234 'than you may expect';
203 testEl.appendChild(track); 235 testEl.appendChild(track);
204 track.heading = 'Visual: ' + dict.trackName; 236 track.heading = 'Visual: ' + dict.trackName;
205 track.slices = [ 237 track.slices = [
206 // title, colorId, start, args, opt_duration 238 // title, colorId, start, args, opt_duration
207 new TimelineSlice('a ' + tooLongTitle + bigTitle, 0, 1, {}, 1), 239 new TimelineSlice('a ' + tooLongTitle + bigTitle, 0, 1, {}, 1),
208 new TimelineSlice(bigTitle, 1, 2.1, {}, 4.8), 240 new TimelineSlice(bigTitle, 1, 2.1, {}, 4.8),
209 new TimelineSlice('cccc cccc cccc', 1, 7, {}, 0.5), 241 new TimelineSlice('cccc cccc cccc', 1, 7, {}, 0.5),
210 new TimelineSlice('d', 2, 7.6, {}, 1.0) 242 new TimelineSlice('d', 2, 7.6, {}, 1.0)
211 ]; 243 ];
212 track.viewport = new TimelineViewport(testEl); 244 track.viewport = new TimelineViewport(testEl);
213 track.viewport.setPanAndScale(0, 245 track.viewport.setPanAndScale(0,
214 track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end)); 246 track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end));
215 } 247 }
216 } 248 }
217 249
218 function testElide() { 250 function testElide() {
219 var testEl = getTestDiv('testElide'); 251 var testEl = getTestDiv('testElide');
220 var track = TimelineSliceTrack(); 252 var track = TimelineSliceTrack();
221 testEl.appendChild(track); 253 testEl.appendChild(track);
222 var bigtitle = 'Super duper long long title ' + 254 var bigtitle = 'Super duper long long title ' +
223 'holy moly when did you get so verbose?'; 255 'holy moly when did you get so verbose?';
224 var smalltitle = 'small'; 256 var smalltitle = 'small';
225 track.viewport = new TimelineViewport(testEl); 257 track.viewport = new TimelineViewport(testEl);
226 track.heading = 'testElide'; 258 track.heading = 'testElide';
227 track.slices = [ 259 track.slices = [
228 // title, colorId, start, args, opt_duration 260 // title, colorId, start, args, opt_duration
229 new TimelineSlice(bigtitle, 0, 1, {}, 1), 261 new TimelineSlice(bigtitle, 0, 1, {}, 1),
230 new TimelineSlice(smalltitle, 1, 2, {}, 1), 262 new TimelineSlice(smalltitle, 1, 2, {}, 1)
231 ]; 263 ];
232 track.viewport = new TimelineViewport(testEl); 264 track.viewport = new TimelineViewport(testEl);
233 track.viewport.setPanAndScale(0, 265 track.viewport.setPanAndScale(0,
234 track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end)); 266 track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end));
235 var stringWidthPair = undefined; 267 var stringWidthPair = undefined;
236 var pixWidth = track.viewport_.xViewVectorToWorld(1); 268 var pixWidth = track.viewport_.xViewVectorToWorld(1);
237 269
238 // Small titles on big slices are not elided. 270 // Small titles on big slices are not elided.
239 stringWidthPair = track.elidedTitleCache.get(track, pixWidth, smalltitle, 271 stringWidthPair = track.elidedTitleCache.get(track, pixWidth, smalltitle,
240 track.labelWidth(smalltitle), 1); 272 track.labelWidth(smalltitle), 1);
241 assertEquals(smalltitle, stringWidthPair.string); 273 assertEquals(smalltitle, stringWidthPair.string);
242 // Keep shrinking the slice until eliding starts. 274 // Keep shrinking the slice until eliding starts.
243 var elidedWhenSmallEnough = false; 275 var elidedWhenSmallEnough = false;
244 for (var sliceLength = 1; sliceLength >= 0.00001; sliceLength /= 2.0) { 276 for (var sliceLength = 1; sliceLength >= 0.00001; sliceLength /= 2.0) {
245 stringWidthPair = track.elidedTitleCache.get(track, pixWidth, smalltitle, 277 stringWidthPair = track.elidedTitleCache.get(track, pixWidth, smalltitle,
246 track.labelWidth(smalltitle), sliceLength); 278 track.labelWidth(smalltitle), sliceLength);
247 if (stringWidthPair.string.length < smalltitle.length) { 279 if (stringWidthPair.string.length < smalltitle.length) {
248 » elidedWhenSmallEnough = true; 280 elidedWhenSmallEnough = true;
249 » break; 281 break;
250 } 282 }
251 } 283 }
252 assertTrue(elidedWhenSmallEnough); 284 assertTrue(elidedWhenSmallEnough);
253 285
254 // Big titles are elided immediately. 286 // Big titles are elided immediately.
255 var superBigTitle = ''; 287 var superBigTitle = '';
256 for (var x = 0; x < 10; x++) { 288 for (var x = 0; x < 10; x++) {
257 superBigTitle += bigtitle; 289 superBigTitle += bigtitle;
258 } 290 }
259 stringWidthPair = track.elidedTitleCache.get(track, pixWidth, 291 stringWidthPair = track.elidedTitleCache.get(track, pixWidth,
260 superBigTitle, track.labelWidth(superBigTitle), 1); 292 superBigTitle, track.labelWidth(superBigTitle), 1);
261 assertTrue(stringWidthPair.string.length < superBigTitle.length); 293 assertTrue(stringWidthPair.string.length < superBigTitle.length);
262 // And elided text ends with ... 294 // And elided text ends with ...
263 var len = stringWidthPair.string.length; 295 var len = stringWidthPair.string.length;
264 assertEquals('...', stringWidthPair.string.substring(len-3, len)); 296 assertEquals('...', stringWidthPair.string.substring(len - 3, len));
297 }
298
299 function testTimelineThreadTrackWithRegularSlices() {
300 var testEl = getTestDiv('testTimelineThreadTrackWithRegularSlices');
301 var track = TimelineThreadTrack();
302 testEl.appendChild(track);
303 track.heading = 'testTimelineThreadTrackWithRegularSlices';
304 var thread = new TimelineThread(new TimelineProcess(7), 1);
305 thread.subRows = [
306 [
307 new TimelineThreadSlice('a', 0, 1, {}, 1),
308 new TimelineThreadSlice('b', 1, 2.1, {}, 4.8),
309 new TimelineThreadSlice('b', 1, 7, {}, 0.5),
310 new TimelineThreadSlice('c', 2, 7.6, {}, 0.4)
311 ],
312 [
313 new TimelineThreadSlice('d', 3, 1.1, {}, 0.8),
314 new TimelineThreadSlice('e', 4, 7.1, {}, 0.3)
315 ]
316 ];
317 thread.updateBounds();
318 track.heading = 'thread regular';
319 track.headingWidth = '150px';
320 track.toolTip = thread.userFriendlyDetails + ':';
321 track.thread = thread;
322 track.viewport = new TimelineViewport(testEl);
323 track.viewport.setPanAndScale(0,
324 track.clientWidth / (1.1 * (thread.maxTimestamp - thread.minTimestamp));
325 }
326
327 function testTimelineThreadTrackWithRegularAndAsyncSlices() {
328 var testEl = getTestDiv('testTimelineThreadTrackWithAsyncSlices');
329 var track = TimelineThreadTrack();
330 testEl.appendChild(track);
331 var thread = new TimelineThread(new TimelineProcess(7), 1);
332 thread.subRows = [
333 [
334 new TimelineThreadSlice('a', 0, 1, {}, 1),
335 new TimelineThreadSlice('b', 1, 2.1, {}, 4.8),
336 new TimelineThreadSlice('b', 1, 7, {}, 0.5),
337 new TimelineThreadSlice('c', 2, 7.6, {}, 0.4)
338 ],
339 [
340 new TimelineThreadSlice('d', 3, 1.1, {}, 0.8),
341 new TimelineThreadSlice('e', 4, 7.1, {}, 0.3)
342 ]
343 ];
344 thread.asyncSlices.push(newAsyncSlice(1.2, 7.2 - 1.2, thread, thread));
345 thread.asyncSlices.push(newAsyncSlice(1.3, 7.3 - 1.3, thread, thread));
346 thread.updateBounds();
347 track.heading = 'thread regular + async';
348 track.headingWidth = '150px';
349 track.toolTip = thread.userFriendlyDetails + ':';
350 track.thread = thread;
351 track.viewport = new TimelineViewport(testEl);
352 track.viewport.setPanAndScale(0,
353 track.clientWidth /
354 (1.1 * (thread.maxTimestamp - thread.minTimestamp)));
265 } 355 }
266 356
267 </script> 357 </script>
268 </body> 358 </body>
269 </html> 359 </html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/tracing/timeline_track.js ('k') | chrome/browser/resources/tracing/trace_event_importer.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698