about:tracing support for TRACE_ASYNC_START/FINISH events.

chrome/browser/resources/tracing/timeline_model.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 TimelineModel is a parsed representation of the
  * TraceEvents obtained from base/trace_event in which the begin-end
  * tokens are converted into a hierarchy of processes, threads,
  * subrows, and slices.
  *
  * The building block of the model is a slice. A slice is roughly
  * equivalent to function call executing on a specific thread. As a
  * result, slices may have one or more subslices.
  *
  * A thread contains one or more subrows of slices. Row 0 corresponds to
  * the "root" slices, e.g. the topmost slices. Row 1 contains slices that
  * are nested 1 deep in the stack, and so on. We use these subrows to draw
  * nesting tasks.
  *
  */
 cr.define('tracing', function() {
   /**
-   * A TimelineSlice represents an interval of time on a given resource plus
-   * parameters associated with that interval.
-   *
-   * A slice is typically associated with a specific trace event pair on a
-   * specific thread.
-   * For example,
-   *   TRACE_EVENT_BEGIN1("x","myArg", 7) at time=0.1ms
-   *   TRACE_EVENT_END()                  at time=0.3ms
-   * This results in a single timeline slice from 0.1 with duration 0.2 on a
-   * specific thread.
-   *
-   * A slice can also be an interval of time on a Cpu on a TimelineCpu.
+   * A TimelineSlice represents an interval of time plus parameters associated
+   * with that interval.
    *
    * All time units are stored in milliseconds.
    * @constructor
    */
   function TimelineSlice(title, colorId, start, args, opt_duration) {
     this.title = title;
     this.start = start;
     this.colorId = colorId;
     this.args = args;
     this.didNotFinish = false;
-    this.subSlices = [];
     if (opt_duration !== undefined)
       this.duration = opt_duration;
   }
 
   TimelineSlice.prototype = {
     selected: false,
 
     duration: undefined,
 
     get end() {
       return this.start + this.duration;
     }
   };
 
   /**
+   * A TimelineThreadSlice represents an interval of time on a thread resource
+   * with associated nestinged slice information.
+   *
+   * ThreadSlices are typically associated with a specific trace event pair on a
+   * specific thread.
+   * For example,
+   *   TRACE_EVENT_BEGIN1("x","myArg", 7) at time=0.1ms
+   *   TRACE_EVENT_END()                  at time=0.3ms

[jbates, 2012/03/15 00:17:15]

nit: TRACE_EVENT_END0("x") so noobs aren't confused

+   * This results in a single timeline slice from 0.1 with duration 0.2 on a
+   * specific thread.
+   *
+   * @constructor
+   */
+  function TimelineThreadSlice(title, colorId, start, args, opt_duration) {
+    TimelineSlice.call(this, title, colorId, start, args, opt_duration);
+    this.subSlices = [];
+  }
+
+  TimelineThreadSlice.prototype = {
+    __proto__: TimelineSlice.prototype
+  }
+
+
+  /**
+   * A TimelineAsyncSlice represents an interval of time during which an
+   * asynchronous operation is in progress. An AsyncSlice consumes no CPU time
+   * itself and so is only associated with Threads at its start and end point.
+   *
+   * @constructor
+   */
+  function TimelineAsyncSlice(title, colorId, start, args) {
+    TimelineSlice.call(this, title, colorId, start, args);
+  };
+
+  TimelineAsyncSlice.prototype = {
+    __proto__: TimelineSlice.prototype,
+
+    id: undefined,
+
+    startThread: undefined,
+
+    endThread: undefined
+  };
+
+  /**
    * A TimelineThread stores all the trace events collected for a particular
-   * thread. We organize the slices on a thread by "subrows," where subrow 0
-   * has all the root slices, subrow 1 those nested 1 deep, and so on. There
-   * is also a set of non-nested subrows.
+   * thread. We organize the synchronous slices on a thread by "subrows," where
+   * subrow 0 has all the root slices, subrow 1 those nested 1 deep, and so on.
+   * The asynchronous slices ar stored in an TimelineAsyncSliceGroup object.

[jbates, 2012/03/15 00:17:15]

ar->are

+   *
+   * The slices stored on a TimelineThread should be instances of
+   * TimelineThreadSlice.
    *
    * @constructor
    */
   function TimelineThread(parent, tid) {
+    if (!parent)
+      throw "parent must be provided.";
     this.parent = parent;
     this.tid = tid;
     this.subRows = [[]];
-    this.nonNestedSubRows = [];
+    this.asyncSlices = new TimelineAsyncSliceGroup(
+        "AsyncSliceGroup for " + this.ptid);

[jbates, 2012/03/15 00:17:15]

Is "AsyncSliceGroup for ptid" the title presented to the user? If so can we
rename to something easier for end-users to read? "ptid async events" or
something like that?

+  }
+
+  var ptidMap = {};
+
+  /**
+   * @return {String} A string that can be used as a unique key for a specific
+   * thread within a process.
+   */
+  TimelineThread.getPTIDFromPidAndTid = function(pid, tid) {
+    if (!ptidMap[pid])
+      ptidMap[pid] = {};
+    if (!ptidMap[pid][tid])
+      ptidMap[pid][tid] = pid + ':' + tid;;
+    return ptidMap[pid][tid];
   }
 
   TimelineThread.prototype = {
     /**
      * Name of the thread, if present.
      */
     name: undefined,
 
+    /**
+     * @return {string} A concatenation of the parent id and the thread's
+     * tid. Can be used to uniquely identify a thread.
+     */
+    get ptid() {
+      return TimelineThread.getPTIDFromPidAndTid(this.tid, this.parent.pid);
+    },
+
     getSubrow: function(i) {
       while (i >= this.subRows.length)
         this.subRows.push([]);
       return this.subRows[i];
     },
 
-    addNonNestedSlice: function(slice) {
-      for (var i = 0; i < this.nonNestedSubRows.length; i++) {
-        var currSubRow = this.nonNestedSubRows[i];
-        var lastSlice = currSubRow[currSubRow.length - 1];
-        if (slice.start >= lastSlice.start + lastSlice.duration) {
-          currSubRow.push(slice);
-          return;
-        }
+
+    shiftSubRow_: function(subRow, amount) {
+      for (var tS = 0; tS < subRow.length; tS++) {
+        var slice = subRow[tS];
+        slice.start = (slice.start + amount);
       }
-      this.nonNestedSubRows.push([slice]);
+    },
+
+    /**
+     * Shifts all the timestamps inside this thread forward by the amount
+     * specified.
+     */
+    shiftTimestampsForward: function(amount) {
+      if (this.cpuSlices)
+        this.shiftSubRow_(this.cpuSlices, amount);
+
+      for (var tSR = 0; tSR < this.subRows.length; tSR++) {
+        this.shiftSubRow_(this.subRows[tSR], amount);
+      }
+
+      this.asyncSlices.shiftTimestampsForward(amount);
     },
 
     /**
      * Updates the minTimestamp and maxTimestamp fields based on the
-     * current slices and nonNestedSubRows attached to the thread.
+     * current objects associated with the thread.
      */
     updateBounds: function() {
       var values = [];
       var slices;
       if (this.subRows[0].length != 0) {
         slices = this.subRows[0];
         values.push(slices[0].start);
         values.push(slices[slices.length - 1].end);
       }
-      for (var i = 0; i < this.nonNestedSubRows.length; ++i) {
-        slices = this.nonNestedSubRows[i];
-        values.push(slices[0].start);
-        values.push(slices[slices.length - 1].end);
+      if (this.asyncSlices.slices.length) {
+        this.asyncSlices.updateBounds();
+        values.push(this.asyncSlices.minTimestamp);
+        values.push(this.asyncSlices.maxTimestamp);
       }
       if (values.length) {
         this.minTimestamp = Math.min.apply(Math, values);
         this.maxTimestamp = Math.max.apply(Math, values);
       } else {
         this.minTimestamp = undefined;
         this.maxTimestamp = undefined;
       }
     },
 
     /**
      * @return {String} A user-friendly name for this thread.
      */
     get userFriendlyName() {
       var tname = this.name || this.tid;
       return this.parent.pid + ': ' + tname;
     },
 
     /**
      * @return {String} User friendly details about this thread.
      */
-    get userFriendlyDetials() {
+    get userFriendlyDetails() {
       return 'pid: ' + this.parent.pid +
           ', tid: ' + this.tid +
           (this.name ? ', name: ' + this.name : '');
     }
 
   };
 
   /**
    * Comparison between threads that orders first by pid,
    * then by names, then by tid.
@@ skipping 36 matching lines @@
 
     get numSeries() {
       return this.seriesNames.length;
     },
 
     get numSamples() {
       return this.timestamps.length;
     },
 
     /**
+     * Shifts all the timestamps inside this counter forward by the amount
+     * specified.
+     */
+    shiftTimestampsForward: function(amount) {
+      for (var sI = 0; sI < this.timestamps.length; sI++)
+        this.timestamps[sI] = (this.timestamps[sI] + amount);
+    },
+
+    /**
      * Updates the bounds for this counter based on the samples it contains.
      */
     updateBounds: function() {
       if (this.seriesNames.length != this.seriesColors.length)
         throw 'seriesNames.length must match seriesColors.length';
       if (this.numSeries * this.numSamples != this.samples.length)
         throw 'samples.length must be a multiple of numSamples.';
 
       this.totals = [];
       if (this.samples.length == 0) {
@@ skipping 49 matching lines @@
   TimelineProcess.prototype = {
     get numThreads() {
       var n = 0;
       for (var p in this.threads) {
         n++;
       }
       return n;
     },
 
     /**
+     * Shifts all the timestamps inside this process forward by the amount
+     * specified.
+     */
+    shiftTimestampsForward: function(amount) {
+      for (var tid in this.threads)
+        this.threads[tid].shiftTimestampsForward(amount);
+      for (var id in this.counters)
+        this.counters[id].shiftTimestampsForward(amount);
+    },
+
+    /**
      * @return {TimlineThread} The thread identified by tid on this process,
      * creating it if it doesn't exist.
      */
     getOrCreateThread: function(tid) {
       if (!this.threads[tid])
         this.threads[tid] = new TimelineThread(this, tid);
       return this.threads[tid];
     },
 
     /**
@@ skipping 35 matching lines @@
       if (cat.length)
         id = cat + '.' + name;
       else
         id = name;
       if (!this.counters[id])
         this.counters[id] = new TimelineCounter(this, id, name);
       return this.counters[id];
     },
 
     /**
+     * Shifts all the timestamps inside this CPU forward by the amount
+     * specified.
+     */
+    shiftTimestampsForward: function(amount) {
+      for (var sI = 0; sI < this.slices.length; sI++)
+        this.slices[sI].start = (this.slices[sI].start + amount);
+      for (var id in this.counters)
+        this.counters[id].shiftTimestampsForward(amount);
+    },
+
+    /**
      * Updates the minTimestamp and maxTimestamp fields based on the
      * current slices attached to the cpu.
      */
     updateBounds: function() {
       var values = [];
       if (this.slices.length) {
         this.minTimestamp = this.slices[0].start;
         this.maxTimestamp = this.slices[this.slices.length - 1].end;
       } else {
         this.minTimestamp = undefined;
         this.maxTimestamp = undefined;
       }
     }
   };
 
   /**
    * Comparison between processes that orders by cpuNumber.
    */
   TimelineCpu.compare = function(x, y) {
     return x.cpuNumber - y.cpuNumber;
   };
 
+  /**
+   * A group of AsyncSlices.
+   * @constructor
+   */
+  function TimelineAsyncSliceGroup(name) {
+    this.name = name;
+    this.slices = [];
+  }
+
+  TimelineAsyncSliceGroup.prototype = {
+    __proto__: Object.prototype,
+
+    /**
+     * Helper function that pushes the provided slice onto the slices array.
+     */
+    push: function(slice) {
+      this.slices.push(slice);
+    },
+
+    /**
+     * @return {Number} The number of slices in this group.
+     */
+    get length() {
+      return this.slices.length;
+    },
+
+    /**
+     * Built automatically rebuildSubRows()

[jbates, 2012/03/15 00:17:15]

Built automatically by rebuildSubRows

+     */
+    subRows_: undefined,
+
+    /**
+     * Updates the bounds for this group based on the slices it contains.
+     */
+    sortSlices_: function() {
+      this.slices.sort(function(x,y) {
+        return x.start - y.start;
+      });
+    },
+
+    /**
+     * Shifts all the timestamps inside this group forward by the amount
+     * specified.
+     */
+    shiftTimestampsForward: function(amount) {
+      for (var sI = 0; sI < this.slices.length; sI++)
+        this.slices[sI].start = (this.slices[sI].start + amount);
+    },
+
+    /**
+     * Updates the bounds for this group based on the slices it contains.
+     */
+    updateBounds: function() {
+      this.sortSlices_();
+      if (this.slices.length) {
+        this.minTimestamp = this.slices[0].start;
+        this.maxTimestamp = this.slices[this.slices.length - 1].end;
+      } else {
+        this.minTimestamp = undefined;
+        this.maxTimestamp = undefined;
+      }
+      this.subRows_ = undefined;
+    },
+
+    get subRows() {
+      if (!this.subRows_)
+        this.rebuildSubRows_();
+      return this.subRows_;
+    },
+
+    /**
+     * Breaks up the list of slices into N rows, each of which is a list of
+     * slices that are non overlapping.
+     *
+     * It uses a very simple approach: walk through the slices in sorted order
+     * by start time. For each slice, try to fit it in an existing subRow. If it
+     * doesn't fit in any subrow, make another subRow.
+     */
+    rebuildSubRows_: function() {
+      this.sortSlices_();
+      var subRows = [];
+      for (var i = 0; i < this.slices.length; i++) {
+        var slice = this.slices[i];
+
+        var found = false;
+        for (var j = 0; j < subRows.length; j++) {
+          var subRow = subRows[j];
+          var lastSliceInSubRow = subRow[subRow.length - 1];
+          if (slice.start >= lastSliceInSubRow.end) {
+            found = true;
+            subRow.push(slice);
+          }
+        }
+        if (!found) {
+          subRows.push([slice]);
+        }
+      }
+      this.subRows_ = subRows;
+    },
+
+    /**
+     * Breaks up this group into slices based on start thread.
+     *
+     * @return {Array} An array of TimelineAsyncSliceGroups where each group has
+     * slices that started on the same thread.
+     **/
+    computeSubGroups: function() {
+      var subGroupsByPTID = {};
+      for (var i = 0; i < this.slices.length; ++i) {
+        var slice = this.slices[i];
+        var slicePTID = slice.startThread.ptid;
+        if (!subGroupsByPTID[slicePTID])
+          subGroupsByPTID[slicePTID] = new TimelineAsyncSliceGroup(this.name)
+        subGroupsByPTID[slicePTID].slices.push(slice);
+      }
+      var groups = []
+      for (var ptid in subGroupsByPTID)  {
+        var group = subGroupsByPTID[ptid];
+        group.updateBounds()
+        groups.push(group);
+      }
+      return groups;
+    }
+
+  };
+
+  /**
+   * Comparison between counters that orders by pid, then name.
+   */
+  TimelineCounter.compare = function(x, y) {
+    if (x.parent.pid != y.parent.pid) {
+      return TimelineProcess.compare(x.parent, y.parent.pid);
+    }
+    var tmp = x.name.localeCompare(y.name);
+    if (tmp == 0)
+      return x.tid - y.tid;
+    return tmp;
+  };
+
   // The color pallette is split in half, with the upper
   // half of the pallette being the "highlighted" verison
   // of the base color. So, color 7's highlighted form is
   // 7 + (pallette.length / 2).
   //
   // These bright versions of colors are automatically generated
   // from the base colors.
   //
   // Within the color pallette, there are "regular" colors,
   // which can be used for random color selection, and
@@ skipping 130 matching lines @@
    *     See TimelineModel.importEvents for details and more advanced ways to
    *     import data.
    * @param {bool=} opt_zeroAndBoost Whether to align to zero and boost the
    *     by 15%. Defaults to true.
    * @constructor
    */
   function TimelineModel(opt_eventData, opt_zeroAndBoost) {
     this.cpus = {};
     this.processes = {};
     this.importErrors = [];
+    this.asyncSliceGroups = {};
 
     if (opt_eventData)
       this.importEvents(opt_eventData, opt_zeroAndBoost);
   }
 
   var importerConstructors = [];
 
   /**
    * Registers an importer. All registered importers are considered
    * when processing an import request.
@@ skipping 72 matching lines @@
 
           // Begin-events without matching end events leave a thread in a state
           // where the toplevel subrows are empty but child subrows have
           // entries. The autocloser will fix this up later. But, for the
           // purposes of pruning, such threads need to be treated as having
           // content.
           var hasNonEmptySubrow = false;
           for (var s = 0; s < thread.subRows.length; s++)
             hasNonEmptySubrow |= thread.subRows[s].length > 0;
 
-          if (hasNonEmptySubrow || thread.nonNestedSubRows.legnth)
+          if (hasNonEmptySubrow || thread.asyncSlices.length > 0)
             prunedThreads[tid] = thread;
         }
         process.threads = prunedThreads;
       }
     },
 
     updateBounds: function() {
       var wmin = Infinity;
       var wmax = -wmin;
       var hasData = false;
@@ skipping 38 matching lines @@
       } else {
         this.maxTimestamp = undefined;
         this.minTimestamp = undefined;
       }
     },
 
     shiftWorldToZero: function() {
       if (this.minTimestamp === undefined)
         return;
       var timeBase = this.minTimestamp;
-      var threads = this.getAllThreads();
-      for (var tI = 0; tI < threads.length; tI++) {
-        var thread = threads[tI];
-        var shiftSubRow = function(subRow) {
-          for (var tS = 0; tS < subRow.length; tS++) {
-            var slice = subRow[tS];
-            slice.start = (slice.start - timeBase);
-          }
-        };
-
-        if (thread.cpuSlices)
-          shiftSubRow(thread.cpuSlices);
-
-        for (var tSR = 0; tSR < thread.subRows.length; tSR++) {
-          shiftSubRow(thread.subRows[tSR]);
-        }
-        for (var tSR = 0; tSR < thread.nonNestedSubRows.length; tSR++) {
-          shiftSubRow(thread.nonNestedSubRows[tSR]);
-        }
-      }
-      var counters = this.getAllCounters();
-      for (var tI = 0; tI < counters.length; tI++) {
-        var counter = counters[tI];
-        for (var sI = 0; sI < counter.timestamps.length; sI++)
-          counter.timestamps[sI] = (counter.timestamps[sI] - timeBase);
-      }
-      var cpus = this.getAllCpus();
-      for (var tI = 0; tI < cpus.length; tI++) {
-        var cpu = cpus[tI];
-        for (var sI = 0; sI < cpu.slices.length; sI++)
-          cpu.slices[sI].start = (cpu.slices[sI].start - timeBase);
-      }
+      for (var pid in this.processes)
+        this.processes[pid].shiftTimestampsForward(-timeBase);
+      for (var cpuNumber in this.cpus)
+        this.cpus[cpuNumber].shiftTimestampsForward(-timeBase);
       this.updateBounds();
     },
 
     getAllThreads: function() {
       var threads = [];
       for (var pid in this.processes) {
         var process = this.processes[pid];
         for (var tid in process.threads) {
           threads.push(process.threads[tid]);
         }
@@ skipping 42 matching lines @@
 
     /**
      * Imports the provided events into the model. The eventData type
      * is undefined and will be passed to all the timeline importers registered
      * via TimelineModel.registerImporter. The first importer that returns true
      * for canImport(events) will be used to import the events.
      *
      * @param {Object} events Events to import.
      * @param {boolean} isChildImport True the eventData being imported is an
      *     additional trace after the primary eventData.
+     * @returns {TimelineModelImporter} The importer used for the eventData.
      */
     importOneTrace_: function(eventData, isAdditionalImport) {
       var importerConstructor;
       for (var i = 0; i < importerConstructors.length; ++i) {
         if (importerConstructors[i].canImport(eventData)) {
           importerConstructor = importerConstructors[i];
           break;
         }
       }
       if (!importerConstructor)
         throw 'Could not find an importer for the provided eventData.';
 
       var importer = new importerConstructor(
           this, eventData, isAdditionalImport);
       importer.importEvents();
-      this.pruneEmptyThreads();
+      return importer;
     },
 
     /**
      * Imports the provided traces into the model. The eventData type
      * is undefined and will be passed to all the timeline importers registered
      * via TimelineModel.registerImporter. The first importer that returns true
      * for canImport(events) will be used to import the events.
      *
      * The primary trace is provided via the eventData variable. If multiple
      * traces are to be imported, specify the first one as events, and the
      * remainder in the opt_additionalEventData array.
      *
      * @param {Object} eventData Events to import.
      * @param {bool=} opt_zeroAndBoost Whether to align to zero and boost the
      *     by 15%. Defaults to true.
      * @param {Array=} opt_additionalEventData An array of eventData objects
      *     (e.g. array of arrays) to
      * import after importing the primary events.
      */
     importEvents: function(eventData,
                            opt_zeroAndBoost, opt_additionalEventData) {
       if (opt_zeroAndBoost === undefined)
         opt_zeroAndBoost = true;
 
-      this.importOneTrace_(eventData, false);
+      activeImporters = [];
+      var importer = this.importOneTrace_(eventData, false);
+      activeImporters.push(importer);
       if (opt_additionalEventData) {
         for (var i = 0; i < opt_additionalEventData.length; ++i) {
-          this.importOneTrace_(opt_additionalEventData[i], true);
+          importer = this.importOneTrace_(opt_additionalEventData[i], true);
+          activeImporters.push(importer);
         }
       }
+      for(var i = 0; i < activeImporters.length; ++i)
+        activeImporters[i].finalizeImport();
+
+      for(var i = 0; i < activeImporters.length; ++i)
+        this.pruneEmptyThreads();
 
       this.updateBounds();
 
       if (opt_zeroAndBoost)
         this.shiftWorldToZero();
 
       if (opt_zeroAndBoost &&
           this.minTimestamp !== undefined &&
           this.maxTimestamp !== undefined) {
         var boost = (this.maxTimestamp - this.minTimestamp) * 0.15;
         this.minTimestamp = this.minTimestamp - boost;
         this.maxTimestamp = this.maxTimestamp + boost;
       }
     }
   };
 
   return {
     getPallette: getPallette,
     getPalletteHighlightIdBoost: getPalletteHighlightIdBoost,
     getColorIdByName: getColorIdByName,
     getStringHash: getStringHash,
     getStringColorId: getStringColorId,
 
     TimelineSlice: TimelineSlice,
+    TimelineThreadSlice: TimelineThreadSlice,
+    TimelineAsyncSlice: TimelineAsyncSlice,
     TimelineThread: TimelineThread,
     TimelineCounter: TimelineCounter,
     TimelineProcess: TimelineProcess,
     TimelineCpu: TimelineCpu,
+    TimelineAsyncSliceGroup: TimelineAsyncSliceGroup,
     TimelineModel: TimelineModel
   };
 
 });