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 93 matching lines @@
       for (var i = 0; i < this.tracks_.length; i++) {
         var trackClientRect = this.tracks_[i].getBoundingClientRect();
         var a = Math.max(loY, trackClientRect.top);
         var b = Math.min(hiY, trackClientRect.bottom);
         if (a <= b)
           this.tracks_[i].pickRange(loWX, hiWX, loY, hiY, onHitCallback);
       }
     }
   };
 
+  function addCloseButtonElement(el) {
+    var closeEl = document.createElement('div');
+    closeEl.classList.add('timeline-track-button');
+    closeEl.classList.add('timeline-track-close-button');
+    closeEl.textContent = String.fromCharCode(215); // &times;
+    closeEl.addEventListener('click', function() {
+      el.style.display = 'None';
+    });
+    el.appendChild(closeEl);
+  }
+
   /**
    * Visualizes a TimelineThread using a series of of TimelineSliceTracks.
    * @constructor
    */
   var TimelineThreadTrack = cr.ui.define(TimelineContainerTrack);
   TimelineThreadTrack.prototype = {
     __proto__: TimelineContainerTrack.prototype,
 
     decorate: function() {
       this.classList.add('timeline-thread-track');
@@ skipping 50 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_;
           }
         }
       }
+      addCloseButtonElement(this);
     }
   };
 
   /**
    * Visualizes a TimelineCpu using a series of of TimelineSliceTracks.
    * @constructor
    */
   var TimelineCpuTrack = cr.ui.define(TimelineContainerTrack);
   TimelineCpuTrack.prototype = {
     __proto__: TimelineContainerTrack.prototype,
@@ skipping 47 matching lines @@
         track.slices = this.cpu_.slices;
         track.headingWidth = this.headingWidth_;
         track.viewport = this.viewport_;
 
         this.tracks_.push(track);
         this.appendChild(track);
 
         this.tracks_[0].heading = this.heading_;
         this.tracks_[0].tooltip = this.tooltip_;
       }
+      addCloseButtonElement(this);
     }
   };
 
   /**
    * A canvas-based track constructed. Provides the basic heading and
    * invalidation-managment infrastructure. Subclasses must implement drawing
    * and picking code.
    * @constructor
    * @extends {HTMLDivElement}
    */
@@ skipping 82 matching lines @@
       }.bind(this), this);
       this.rafPending_ = true;
     },
 
     get firstCanvas() {
       return this.canvas_;
     }
 
   };
 
-   /**
-     * A pair representing an elided string and world-coordinate width
-     * to draw it.
-     * @constructor
+  /**
+   * A pair representing an elided string and world-coordinate width
+   * to draw it.
+   * @constructor
      */
-   function ElidedStringWidthPair(string, width) {
-     this.string = string;
-     this.width = width;
-   }
+  function ElidedStringWidthPair(string, width) {
+    this.string = string;
+    this.width = width;
+  }
 
+  /**
+   * A cache for elided strings.
+   * @constructor
+   */
+  function ElidedTitleCache() {
+  }
+
+  ElidedTitleCache.prototype = {
     /**
-    * A cache for elided strings.
-    * @constructor
-    */
-   function ElidedTitleCache() {
-   }
-
-   ElidedTitleCache.prototype = {
-     /**
-      * Return elided text.
-      * @param {track} A timeline slice track or other object that defines
-      *                functions labelWidth() and labelWidthWorld().
-      * @param {pixWidth} Pixel width.
-      * @param {title} Original title text.
-      * @param {width} Drawn width in world coords.
-      * @param {sliceDuration} Where the title must fit (in world coords).
-      * @return {ElidedStringWidthPair} Elided string and width.
-      */
-     get: function(track, pixWidth, title, width, sliceDuration) {
-       var elidedDict = elidedTitleCacheDict[title];
-       if (!elidedDict) {
-         elidedDict = {};
-         elidedTitleCacheDict[title] = elidedDict;
-       }
-       var stringWidthPair = elidedDict[sliceDuration];
-       if (stringWidthPair === undefined) {
-          var newtitle = title;
-          var elided = false;
-          while (track.labelWidthWorld(newtitle, pixWidth) > sliceDuration) {
-            newtitle = newtitle.substring(0, newtitle.length * 0.75);
-            elided = true;
-          }
-          if (elided && newtitle.length > 3)
-            newtitle = newtitle.substring(0, newtitle.length - 3) + '...';
-         stringWidthPair = new ElidedStringWidthPair(
-                             newtitle,
-                             track.labelWidth(newtitle));
-         elidedDict[sliceDuration] = stringWidthPair;
-       }
-       return stringWidthPair;
-     },
-   };
+     * Return elided text.
+     * @param {track} A timeline slice track or other object that defines
+     *                functions labelWidth() and labelWidthWorld().
+     * @param {pixWidth} Pixel width.
+     * @param {title} Original title text.
+     * @param {width} Drawn width in world coords.
+     * @param {sliceDuration} Where the title must fit (in world coords).
+     * @return {ElidedStringWidthPair} Elided string and width.
+     */
+    get: function(track, pixWidth, title, width, sliceDuration) {
+      var elidedDict = elidedTitleCacheDict[title];
+      if (!elidedDict) {
+        elidedDict = {};
+        elidedTitleCacheDict[title] = elidedDict;
+      }
+      var elidedDictForPixWidth = elidedDict[pixWidth];
+      if (!elidedDictForPixWidth) {
+        elidedDict[pixWidth] = {};
+        elidedDictForPixWidth = elidedDict[pixWidth];
+      }
+      var stringWidthPair = elidedDictForPixWidth[sliceDuration];
+      if (stringWidthPair === undefined) {
+        var newtitle = title;
+        var elided = false;
+        while (track.labelWidthWorld(newtitle, pixWidth) > sliceDuration) {
+          newtitle = newtitle.substring(0, newtitle.length * 0.75);
+          elided = true;
+        }
+        if (elided && newtitle.length > 3)
+          newtitle = newtitle.substring(0, newtitle.length - 3) + '...';
+        stringWidthPair = new ElidedStringWidthPair(
+            newtitle,
+            track.labelWidth(newtitle));
+        elidedDictForPixWidth[sliceDuration] = stringWidthPair;
+      }
+      return stringWidthPair;
+    }
+  };
 
   /**
    * A track that displays an array of TimelineSlice objects.
    * @constructor
    * @extends {CanvasBasedTrack}
    */
 
   var TimelineSliceTrack = cr.ui.define(CanvasBasedTrack);
 
   TimelineSliceTrack.prototype = {
 
     __proto__: CanvasBasedTrack.prototype,
 
-   /**
-    * Should we elide text on trace labels?
-    * 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 we elide text on trace labels?
+     * 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 37 matching lines @@
           var slice = slices[i];
           if (slice.duration > quickDiscardThresshold) {
             var title = slice.title;
             if (slice.didNotFinish) {
               title += ' (Did Not Finish)';
             }
             var drawnTitle = title;
             var drawnWidth = this.labelWidth(drawnTitle);
             if (shouldElide &&
                 this.labelWidthWorld(drawnTitle, pixWidth) > slice.duration) {
-                var elidedValues = this.elidedTitleCache.get(
-                    this, pixWidth,
-                    drawnTitle, drawnWidth,
-                    slice.duration);
-                drawnTitle = elidedValues.string;
-                drawnWidth = elidedValues.width;
+              var elidedValues = this.elidedTitleCache.get(
+                  this, pixWidth,
+                  drawnTitle, drawnWidth,
+                  slice.duration);
+              drawnTitle = elidedValues.string;
+              drawnWidth = elidedValues.width;
             }
             if (drawnWidth * pixWidth < slice.duration) {
               var cX = vp.xWorldToView(slice.start + 0.5 * slice.duration);
               ctx.fillText(drawnTitle, cX, 2.5, drawnWidth);
             }
           }
         }
       }
     },
 
@@ skipping 105 matching lines @@
   /**
    * A track that displays the viewport size and scale.
    * @constructor
    * @extends {CanvasBasedTrack}
    */
 
   var TimelineViewportTrack = cr.ui.define(CanvasBasedTrack);
 
   const logOf10 = Math.log(10);
   function log10(x) {
-    return Math.log(x) / logOf10;;
+    return Math.log(x) / logOf10;
   }
 
   TimelineViewportTrack.prototype = {
 
     __proto__: CanvasBasedTrack.prototype,
 
     decorate: function() {
       this.classList.add('timeline-viewport-track');
       this.strings_ = {};
     },
@@ skipping 17 matching lines @@
 
       // The conservative guess is the nearest enclosing 0.1, 1, 10, 100, etc
       var conservativeGuess =
           Math.pow(10, Math.ceil(log10(idealMajorMarkDistanceWorld)));
 
       // Once we have a conservative guess, consider things that evenly add up
       // to the conservative guess, e.g. 0.5, 0.2, 0.1 Pick the one that still
       // exceeds the ideal mark distance.
       var divisors = [10, 5, 2, 1];
       for (var i = 0; i < divisors.length; ++i) {
-        var tightenedGuess = conservativeGuess / divisors[i]
+        var tightenedGuess = conservativeGuess / divisors[i];
         if (vp.xWorldVectorToView(tightenedGuess) < idealMajorMarkDistancePix)
           continue;
-        majorMarkDistanceWorld = conservativeGuess / divisors[i-1];
+        majorMarkDistanceWorld = conservativeGuess / divisors[i - 1];
         break;
       }
       if (majorMarkDistanceWorld < 100) {
         unit = 'ms';
         unitDivisor = 1;
       } else {
         unit = 's';
         unitDivisor = 1000;
       }
 
       var numTicksPerMajor = 5;
       var minorMarkDistanceWorld = majorMarkDistanceWorld / numTicksPerMajor;
       var minorMarkDistancePx = vp.xWorldVectorToView(minorMarkDistanceWorld);
 
       var firstMajorMark =
-        Math.floor(viewLWorld / majorMarkDistanceWorld) *
-        majorMarkDistanceWorld;
+          Math.floor(viewLWorld / majorMarkDistanceWorld) *
+              majorMarkDistanceWorld;
 
       var minorTickH = Math.floor(canvasH * 0.25);
 
       ctx.fillStyle = 'rgb(0, 0, 0)';
       ctx.strokeStyle = 'rgb(0, 0, 0)';
       ctx.textAlign = 'left';
       ctx.textBaseline = 'top';
       ctx.font = '9px sans-serif';
 
       // Each iteration of this loop draws one major mark
@@ skipping 71 matching lines @@
    */
 
   var TimelineCounterTrack = cr.ui.define(CanvasBasedTrack);
 
   TimelineCounterTrack.prototype = {
 
     __proto__: CanvasBasedTrack.prototype,
 
     decorate: function() {
       this.classList.add('timeline-counter-track');
+      addCloseButtonElement(this);
     },
 
     get counter() {
       return this.counter_;
     },
 
     set counter(counter) {
       this.counter_ = counter;
       this.invalidate();
     },
@@ skipping 119 matching lines @@
   };
 
   return {
     TimelineCounterTrack: TimelineCounterTrack,
     TimelineSliceTrack: TimelineSliceTrack,
     TimelineThreadTrack: TimelineThreadTrack,
     TimelineViewportTrack: TimelineViewportTrack,
     TimelineCpuTrack: TimelineCpuTrack
   };
 });