about:tracing support for TRACE_ASYNC_START/FINISH events.

chrome/browser/resources/tracing/timeline_track_test.html

Index: chrome/browser/resources/tracing/timeline_track_test.html
diff --git a/chrome/browser/resources/tracing/timeline_track_test.html b/chrome/browser/resources/tracing/timeline_track_test.html
index f99bf776aac09e4783aa122f9b0329df9ceb92c4..8852e82e9e263e4f03a18bc260e8ed214699cd63 100644
--- a/chrome/browser/resources/tracing/timeline_track_test.html
+++ b/chrome/browser/resources/tracing/timeline_track_test.html
@@ -40,15 +40,30 @@ found in the LICENSE file.
 <script>
 </script>
 <script>
+  var TimelineAsyncSlice = tracing.TimelineAsyncSlice;
+  var TimelineAsyncSliceGroup = tracing.TimelineAsyncSliceGroup;
   var TimelineCounter = tracing.TimelineCounter;
   var TimelineCounterTrack = tracing.TimelineCounterTrack;
   var TimelineCpu = tracing.TimelineCpu;
   var TimelineCpuTrack = tracing.TimelineCpuTrack;
+  var TimelineProcess = tracing.TimelineProcess;
   var TimelineSliceTrack = tracing.TimelineSliceTrack;
   var TimelineSlice = tracing.TimelineSlice;
+  var TimelineThread = tracing.TimelineThread;
+  var TimelineThreadSlice = tracing.TimelineThreadSlice;
+  var TimelineThreadTrack = tracing.TimelineThreadTrack;
   var TimelineViewport = tracing.TimelineViewport;
   var testDivs = {};
 
+  // Helper function to create a slice.
+  function newAsyncSlice(start, duration, startThread, endThread) {
+    var s = new TimelineAsyncSlice("a", 0, start);
+    s.duration = duration;
+    s.startThread = startThread;
+    s.endThread = endThread;
+    return s;
+  }
+
   function getTestDiv(name) {
     if (!testDivs[name]) {
       testDivs[name] = document.createElement('div');
@@ -74,6 +89,23 @@ found in the LICENSE file.
        track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end));
   }
 
+  function testBasicSlicesWithAsyncFlag() {
+    var testEl = getTestDiv('testBasicSlicesWithAsyncFlag');
+    var track = TimelineSliceTrack();
+    testEl.appendChild(track);
+    track.asyncStyle = true;
+    track.heading = 'testBasicSlices+AsyncFlag';
+    track.slices = [
+      new TimelineSlice('a', 0, 1, {}, 1),
+      new TimelineSlice('b', 1, 2.1, {}, 4.8),
+      new TimelineSlice('b', 1, 7, {}, 0.5),
+      new TimelineSlice('c', 2, 7.6, {}, 0.4)
+    ];
+    track.viewport = new TimelineViewport(testEl);
+    track.viewport.setPanAndScale(0,
+       track.clientWidth / (1.1 * track.slices[track.slices.length - 1].end));
+  }
+
   function testShrinkingSliceSizes() {
     var testEl = getTestDiv('testShrinkingSliceSizes');
     var track = TimelineSliceTrack();
@@ -264,6 +296,63 @@ found in the LICENSE file.
     assertEquals('...', stringWidthPair.string.substring(len-3, len));
   }
 
+  function testTimelineThreadTrackWithRegularSlices() {
+    var testEl = getTestDiv('testTimelineThreadTrackWithRegularSlices');
+    var track = TimelineThreadTrack();
+    testEl.appendChild(track);
+    track.heading = 'testTimelineThreadTrackWithRegularSlices';
+    var thread = new TimelineThread(new TimelineProcess(7), 1)
+    thread.subRows = [
+      [
+        new TimelineThreadSlice('a', 0, 1, {}, 1),
+        new TimelineThreadSlice('b', 1, 2.1, {}, 4.8),
+        new TimelineThreadSlice('b', 1, 7, {}, 0.5),
+        new TimelineThreadSlice('c', 2, 7.6, {}, 0.4)
+      ],
+      [
+        new TimelineThreadSlice('d', 3, 1.1, {}, 0.8),
+        new TimelineThreadSlice('e', 4, 7.1, {}, 0.3),
+      ]
+    ];
+    thread.updateBounds();
+    track.heading = 'thread regular'
+    track.headingWidth = '150px';
+    track.toolTip = thread.userFriendlyDetails + ':';
+    track.thread = thread;
+    track.viewport = new TimelineViewport(testEl);
+    track.viewport.setPanAndScale(0,
+                                  track.clientWidth / (1.1 * (thread.maxTimestamp - thread.minTimestamp)));
+  }
+
+  function testTimelineThreadTrackWithRegularAndAsyncSlices() {
+    var testEl = getTestDiv('testTimelineThreadTrackWithAsyncSlices');
+    var track = TimelineThreadTrack();
+    testEl.appendChild(track);
+    var thread = new TimelineThread(new TimelineProcess(7), 1)
+    thread.subRows = [
+      [
+        new TimelineThreadSlice('a', 0, 1, {}, 1),
+        new TimelineThreadSlice('b', 1, 2.1, {}, 4.8),
+        new TimelineThreadSlice('b', 1, 7, {}, 0.5),
+        new TimelineThreadSlice('c', 2, 7.6, {}, 0.4)
+      ],
+      [
+        new TimelineThreadSlice('d', 3, 1.1, {}, 0.8),
+        new TimelineThreadSlice('e', 4, 7.1, {}, 0.3),
+      ]
+    ];
+    thread.asyncSlices.push(newAsyncSlice(1.2, 7.2 - 1.2, thread, thread))
+    thread.asyncSlices.push(newAsyncSlice(1.3, 7.3 - 1.3, thread, thread))
+    thread.updateBounds();
+    track.heading = 'thread regular + async'
+    track.headingWidth = '150px';
+    track.toolTip = thread.userFriendlyDetails + ':';
+    track.thread = thread;
+    track.viewport = new TimelineViewport(testEl);
+    track.viewport.setPanAndScale(0,
+                                  track.clientWidth / (1.1 * (thread.maxTimestamp - thread.minTimestamp)));
+  }
+
 </script>
 </body>
 </html>