about:tracing support for TRACE_ASYNC_START/FINISH events.

chrome/browser/resources/tracing/timeline_track.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 
 /**
  * @fileoverview Renders an array of slices into the provided div,
  * using a child canvas element. Uses a FastRectRenderer to draw only
  * the visible slices.
  */
@@ skipping 163 matching lines @@
     updateChildTracks_: function() {
       this.detach();
       this.textContent = '';
       this.tracks_ = [];
       if (this.thread_) {
         if (this.thread_.cpuSlices) {
           var track = this.addTrack_(this.thread_.cpuSlices);
           track.height = '4px';
         }
 
-        for (var srI = 0; srI < this.thread_.nonNestedSubRows.length; ++srI) {
-          this.addTrack_(this.thread_.nonNestedSubRows[srI]);
+        if (this.thread_.asyncSlices.length) {
+          var subRows = this.thread_.asyncSlices.subRows;
+          for (var srI = 0; srI < subRows.length; srI++) {
+            var track = this.addTrack_(subRows[srI]);
+            track.asyncStyle = true;
+          }
         }
-        for (var srI = 0; srI < this.thread_.subRows.length; ++srI) {
+
+        for (var srI = 0; srI < this.thread_.subRows.length; srI++) {
           this.addTrack_(this.thread_.subRows[srI]);
         }
+
         if (this.tracks_.length > 0) {
           if (this.thread_.cpuSlices) {
             this.tracks_[1].heading = this.heading_;
             this.tracks_[1].tooltip = this.tooltip_;
           } else {
             this.tracks_[0].heading = this.heading_;
             this.tracks_[0].tooltip = this.tooltip_;
           }
         }
       }
@@ skipping 236 matching lines @@
     * Without eliding, text that is too wide isn't drawn at all.
     * Disable if you feel this causes a performance problem.
     * This is a default value that can be overridden in tracks for testing.
     * @const
     */
     SHOULD_ELIDE_TEXT: true,
 
     decorate: function() {
       this.classList.add('timeline-slice-track');
       this.elidedTitleCache = new ElidedTitleCache();
+      this.asyncStyle_ = false;
+    },
+
+    get asyncStyle() {
+      return this.asyncStyle_;
+    },
+
+    set asyncStyle(v) {
+      this.asyncStyle_ = !!v;
+      this.invalidate();
     },
 
     get slices() {
       return this.slices_;
     },
 
     set slices(slices) {
       this.slices_ = slices;
       this.invalidate();
     },
@@ skipping 40 matching lines @@
         }
         ctx.strokeStyle = 'rgba(255,0,0,0.25)';
         ctx.stroke();
       }
 
       // Begin rendering in world space.
       ctx.save();
       vp.applyTransformToCanavs(ctx);
 
       // Slices.
+      if (this.asyncStyle_)
+        ctx.globalAlpha = 0.25;
       var tr = new tracing.FastRectRenderer(ctx, viewLWorld, 2 * pixWidth,
                                             2 * pixWidth, viewRWorld, pallette);
       tr.setYandH(0, canvasH);
       var slices = this.slices_;
       for (var i = 0; i < slices.length; ++i) {
         var slice = slices[i];
         var x = slice.start;
         // Less than 0.001 causes short events to disappear when zoomed in.
         var w = Math.max(slice.duration, 0.001);
         var colorId = slice.selected ?
@@ skipping 457 matching lines @@
   };
 
   return {
     TimelineCounterTrack: TimelineCounterTrack,
     TimelineSliceTrack: TimelineSliceTrack,
     TimelineThreadTrack: TimelineThreadTrack,
     TimelineViewportTrack: TimelineViewportTrack,
     TimelineCpuTrack: TimelineCpuTrack
   };
 });