src/third_party/trace-viewer/src/tracing/tracks/slice_track_test.js

   1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 tvcm.require('tracing.test_utils');
   8 tvcm.require('tracing.trace_model.slice');
   9 tvcm.require('tracing.timeline_track_view');
  10 tvcm.require('tracing.draw_helpers');
  11 tvcm.require('tvcm.ui.dom_helpers');
  12
  13 tvcm.unittest.testSuite('tracing.tracks.slice_track_test', function() {
  14   var Selection = tracing.Selection;
  15   var SliceTrack = tracing.tracks.SliceTrack;
  16   var Slice = tracing.trace_model.Slice;
  17   var Viewport = tracing.TimelineViewport;
  18
  19   test('instantiate', function() {
  20     var div = document.createElement('div');
  21     this.addHTMLOutput(div);
  22
  23     var viewport = new Viewport(div);
  24     var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
  25     div.appendChild(drawingContainer);
  26
  27     var track = SliceTrack(viewport);
  28     drawingContainer.appendChild(track);
  29     drawingContainer.invalidate();
  30
  31     track.heading = 'testBasicSlices';
  32     track.slices = [
  33       new Slice('', 'a', 0, 1, {}, 1),
  34       new Slice('', 'b', 1, 2.1, {}, 4.8),
  35       new Slice('', 'b', 1, 7, {}, 0.5),
  36       new Slice('', 'c', 2, 7.6, {}, 0.4)
  37     ];
  38
  39     var dt = new tracing.TimelineDisplayTransform();
  40     dt.xSetWorldBounds(0, 8.8, track.clientWidth);
  41     track.viewport.setDisplayTransformImmediately(dt);
  42   });
  43
  44   test('instantiate_shrinkingSliceSize', function() {
  45     var div = document.createElement('div');
  46     this.addHTMLOutput(div);
  47
  48     var viewport = new Viewport(div);
  49     var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
  50     div.appendChild(drawingContainer);
  51
  52     var track = SliceTrack(viewport);
  53     drawingContainer.appendChild(track);
  54     drawingContainer.invalidate();
  55
  56     track.heading = 'testShrinkingSliceSizes';
  57     var x = 0;
  58     var widths = [10, 5, 4, 3, 2, 1, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05];
  59     var slices = [];
  60     for (var i = 0; i < widths.length; i++) {
  61       var s = new Slice('', 'a', 1, x, {}, widths[i]);
  62       x += s.duration + 0.5;
  63       slices.push(s);
  64     }
  65     track.slices = slices;
  66     var dt = new tracing.TimelineDisplayTransform();
  67     dt.xSetWorldBounds(0, 1.1 * x, track.clientWidth);
  68     track.viewport.setDisplayTransformImmediately(dt);
  69   });
  70
  71   test('instantiate_elide', function() {
  72     var optDicts = [{ trackName: 'elideOff', elide: false },
  73                     { trackName: 'elideOn', elide: true }];
  74
  75     var tooLongTitle = 'Unless eliding this SHOULD NOT BE DISPLAYED.  ';
  76     var bigTitle = 'Very big title name that goes on longer ' +
  77                    'than you may expect';
  78
  79     for (var dictIndex in optDicts) {
  80       var dict = optDicts[dictIndex];
  81
  82       var div = document.createElement('div');
  83       div.appendChild(document.createTextNode(dict.trackName));
  84       this.addHTMLOutput(div);
  85
  86       var viewport = new Viewport(div);
  87       var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
  88       div.appendChild(drawingContainer);
  89
  90       var track = new SliceTrack(viewport);
  91       drawingContainer.appendChild(track);
  92       drawingContainer.invalidate();
  93
  94       track.SHOULD_ELIDE_TEXT = dict.elide;
  95       track.heading = 'Visual: ' + dict.trackName;
  96       track.slices = [
  97         // title, colorId, start, args, opt_duration
  98         new Slice('', 'a ' + tooLongTitle + bigTitle, 0, 1, {}, 1),
  99         new Slice('', bigTitle, 1, 2.1, {}, 4.8),
 100         new Slice('', 'cccc cccc cccc', 1, 7, {}, 0.5),
 101         new Slice('', 'd', 2, 7.6, {}, 1.0)
 102       ];
 103       var dt = new tracing.TimelineDisplayTransform();
 104       dt.xSetWorldBounds(0, 9.5, track.clientWidth);
 105       track.viewport.setDisplayTransformImmediately(dt);
 106     }
 107   });
 108
 109   test('findAllObjectsMatchingInSliceTrack', function() {
 110     var track = SliceTrack(new tracing.TimelineViewport());
 111     track.slices = [
 112       new Slice('', 'a', 0, 1, {}, 1),
 113       new Slice('', 'b', 1, 2.1, {}, 4.8),
 114       new Slice('', 'b', 1, 7, {}, 0.5),
 115       new Slice('', 'c', 2, 7.6, {}, 0.4)
 116     ];
 117     var selection = new Selection();
 118     track.addAllObjectsMatchingFilterToSelection(
 119         new tracing.TitleFilter('b'), selection);
 120
 121     assertEquals(2, selection.length);
 122     assertEquals(track.slices[1], selection[0]);
 123     assertEquals(track.slices[2], selection[1]);
 124   });
 125
 126   test('selectionHitTesting', function() {
 127     var testEl = document.createElement('div');
 128     testEl.appendChild(tvcm.ui.createScopedStyle('heading { width: 100px; }'));
 129     testEl.style.width = '600px';
 130     this.addHTMLOutput(testEl);
 131
 132     var viewport = new Viewport(testEl);
 133     var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
 134     testEl.appendChild(drawingContainer);
 135
 136     var track = new SliceTrack(viewport);
 137     drawingContainer.appendChild(track);
 138     drawingContainer.updateCanvasSizeIfNeeded_();
 139
 140     track.heading = 'testSelectionHitTesting';
 141     track.slices = [
 142       new Slice('', 'a', 0, 1, {}, 1),
 143       new Slice('', 'b', 1, 5, {}, 4.8)
 144     ];
 145     var y = track.getBoundingClientRect().top + 5;
 146     var pixelRatio = window.devicePixelRatio || 1;
 147     var wW = 10;
 148     var vW = drawingContainer.canvas.getBoundingClientRect().width;
 149
 150     var dt = new tracing.TimelineDisplayTransform();
 151     dt.xSetWorldBounds(0, wW, vW * pixelRatio);
 152     track.viewport.setDisplayTransformImmediately(dt);
 153
 154     var selection = new Selection();
 155     var x = (1.5 / wW) * vW;
 156     track.addIntersectingItemsInRangeToSelection(x, x + 1, y, y + 1, selection);
 157     assertEquals(track.slices[0], selection[0]);
 158
 159     var selection = new Selection();
 160     x = (2.1 / wW) * vW;
 161     track.addIntersectingItemsInRangeToSelection(x, x + 1, y, y + 1, selection);
 162     assertEquals(0, selection.length);
 163
 164     var selection = new Selection();
 165     x = (6.8 / wW) * vW;
 166     track.addIntersectingItemsInRangeToSelection(x, x + 1, y, y + 1, selection);
 167     assertEquals(track.slices[1], selection[0]);
 168
 169     var selection = new Selection();
 170     x = (9.9 / wW) * vW;
 171     track.addIntersectingItemsInRangeToSelection(x, x + 1, y, y + 1, selection);
 172     assertEquals(0, selection.length);
 173   });
 174
 175   test('elide', function() {
 176     var testEl = document.createElement('div');
 177     this.addHTMLOutput(testEl);
 178
 179     var viewport = new Viewport(testEl);
 180     var drawingContainer = new tracing.tracks.DrawingContainer(viewport);
 181     testEl.appendChild(drawingContainer);
 182
 183     var track = new SliceTrack(viewport);
 184     drawingContainer.appendChild(track);
 185     drawingContainer.updateCanvasSizeIfNeeded_();
 186
 187     var bigtitle = 'Super duper long long title ' +
 188         'holy moly when did you get so verbose?';
 189     var smalltitle = 'small';
 190     track.heading = 'testElide';
 191     track.slices = [
 192       // title, colorId, start, args, opt_duration
 193       new Slice('', bigtitle, 0, 1, {}, 1),
 194       new Slice('', smalltitle, 1, 2, {}, 1)
 195     ];
 196     var dt = new tracing.TimelineDisplayTransform();
 197     dt.xSetWorldBounds(0, 3.3, track.clientWidth);
 198     track.viewport.setDisplayTransformImmediately(dt);
 199
 200     var stringWidthPair = undefined;
 201     var pixWidth = dt.xViewVectorToWorld(1);
 202
 203     // Small titles on big slices are not elided.
 204     stringWidthPair =
 205         tracing.elidedTitleCache_.get(
 206             track.context(),
 207             pixWidth,
 208             smalltitle,
 209             tracing.elidedTitleCache_.labelWidth(
 210                 track.context(),
 211                 smalltitle),
 212             1);
 213     assertEquals(smalltitle, stringWidthPair.string);
 214
 215     // Keep shrinking the slice until eliding starts.
 216     var elidedWhenSmallEnough = false;
 217     for (var sliceLength = 1; sliceLength >= 0.00001; sliceLength /= 2.0) {
 218       stringWidthPair =
 219           tracing.elidedTitleCache_.get(
 220               track.context(),
 221               pixWidth,
 222               smalltitle,
 223               tracing.elidedTitleCache_.labelWidth(
 224                   track.context(),
 225                   smalltitle),
 226               sliceLength);
 227       if (stringWidthPair.string.length < smalltitle.length) {
 228         elidedWhenSmallEnough = true;
 229         break;
 230       }
 231     }
 232     assertTrue(elidedWhenSmallEnough);
 233
 234     // Big titles are elided immediately.
 235     var superBigTitle = '';
 236     for (var x = 0; x < 10; x++) {
 237       superBigTitle += bigtitle;
 238     }
 239     stringWidthPair =
 240         tracing.elidedTitleCache_.get(
 241             track.context(),
 242             pixWidth,
 243             superBigTitle,
 244             tracing.elidedTitleCache_.labelWidth(
 245                 track.context(),
 246                 superBigTitle),
 247             1);
 248     assertTrue(stringWidthPair.string.length < superBigTitle.length);
 249
 250     // And elided text ends with ...
 251     var len = stringWidthPair.string.length;
 252     assertEquals('...', stringWidthPair.string.substring(len - 3, len));
 253   });
 254
 255   test('sliceTrackAddItemNearToProvidedEvent', function() {
 256     var track = new SliceTrack(new tracing.TimelineViewport());
 257     track.slices = [
 258       new Slice('', 'a', 0, 1, {}, 1),
 259       new Slice('', 'b', 1, 2.1, {}, 4.8),
 260       new Slice('', 'b', 1, 7, {}, 0.5),
 261       new Slice('', 'c', 2, 7.6, {}, 0.4)
 262     ];
 263     var sel = new Selection();
 264     track.addAllObjectsMatchingFilterToSelection(
 265         new tracing.TitleFilter('b'), sel);
 266     var ret;
 267
 268     // Select to the right of B.
 269     var selRight = new Selection();
 270     ret = track.addItemNearToProvidedEventToSelection(sel[0], 1, selRight);
 271     assertTrue(ret);
 272     assertEquals(track.slices[2], selRight[0]);
 273
 274     // Select to the right of the 2nd b.
 275     var selRight2 = new Selection();
 276     ret = track.addItemNearToProvidedEventToSelection(sel[0], 2, selRight2);
 277     assertTrue(ret);
 278     assertEquals(track.slices[3], selRight2[0]);
 279
 280     // Select to 2 to the right of the 2nd b.
 281     var selRightOfRight = new Selection();
 282     ret = track.addItemNearToProvidedEventToSelection(
 283         selRight[0], 1, selRightOfRight);
 284     assertTrue(ret);
 285     assertEquals(track.slices[3], selRightOfRight[0]);
 286
 287     // Select to the right of the rightmost slice.
 288     var selNone = new Selection();
 289     ret = track.addItemNearToProvidedEventToSelection(
 290         selRightOfRight[0], 1, selNone);
 291     assertFalse(ret);
 292     assertEquals(0, selNone.length);
 293
 294     // Select A and then select left.
 295     var sel = new Selection();
 296     track.addAllObjectsMatchingFilterToSelection(
 297         new tracing.TitleFilter('a'), sel);
 298     var ret;
 299
 300     selNone = new Selection();
 301     ret = track.addItemNearToProvidedEventToSelection(sel[0], -1, selNone);
 302     assertFalse(ret);
 303     assertEquals(0, selNone.length);
 304   });
 305
 306   test('sliceTrackAddClosestEventToSelection', function() {
 307     var track = new SliceTrack(new tracing.TimelineViewport());
 308     track.slices = [
 309       new Slice('', 'a', 0, 1, {}, 1),
 310       new Slice('', 'b', 1, 2.1, {}, 4.8),
 311       new Slice('', 'b', 1, 7, {}, 0.5),
 312       new Slice('', 'c', 2, 7.6, {}, 0.4)
 313     ];
 314
 315     // Before with not range.
 316     var sel = new Selection();
 317     track.addClosestEventToSelection(0, 0, 0, 0, sel);
 318     assertEquals(0, sel.length);
 319
 320     // Before with negative range.
 321     var sel = new Selection();
 322     track.addClosestEventToSelection(1.5, -10, 0, 0, sel);
 323     assertEquals(0, sel.length);
 324
 325     // Before first slice.
 326     var sel = new Selection();
 327     track.addClosestEventToSelection(0.5, 1, 0, 0, sel);
 328     assertEquals(1, sel.length);
 329     assertEquals(track.slices[0], sel[0]);
 330
 331     // Within first slice closer to start.
 332     var sel = new Selection();
 333     track.addClosestEventToSelection(1.3, 1, 0, 0, sel);
 334     assertEquals(track.slices[0], sel[0]);
 335
 336     // Between slices with good range.
 337     var sel = new Selection();
 338     track.addClosestEventToSelection(2.08, 3, 0, 0, sel);
 339     assertEquals(track.slices[1], sel[0]);
 340
 341     // Between slices with bad range.
 342     var sel = new Selection();
 343     track.addClosestEventToSelection(2.05, 0.03, 0, 0, sel);
 344     assertEquals(0, sel.length);
 345
 346     // Within slice closer to end.
 347     var sel = new Selection();
 348     track.addClosestEventToSelection(6, 100, 0, 0, sel);
 349     assertEquals(track.slices[1], sel[0]);
 350
 351     // Within slice with bad range.
 352     var sel = new Selection();
 353     track.addClosestEventToSelection(1.8, 0.1, 0, 0, sel);
 354     assertEquals(0, sel.length);
 355
 356     // After last slice with good range.
 357     var sel = new Selection();
 358     track.addClosestEventToSelection(8.5, 1, 0, 0, sel);
 359     assertEquals(track.slices[3], sel[0]);
 360
 361     // After last slice with bad range.
 362     var sel = new Selection();
 363     track.addClosestEventToSelection(10, 1, 0, 0, sel);
 364     assertEquals(0, sel.length);
 365   });
 366 });