Add TRACE_COUNTER support to about:tracing

chrome/browser/resources/tracing/timeline_model.js

 // Copyright (c) 2011 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.
@@ skipping 12 matching lines @@
   /**
    * A TimelineSlice represents an interval of time on a given thread
    * associated with a specific trace event. For example,
    *   TRACE_EVENT_BEGIN1("x","myArg", 7) at time=0.1ms
    *   TRACE_EVENT_END()                  at time=0.3ms
    * Results in a single timeline slice from 0.1 with duration 0.2.
    *
    * All time units are stored in milliseconds.
    * @constructor
    */
-  function TimelineSlice(title, colorId, start, args) {
+  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;
     }
@@ skipping 55 matching lines @@
         values.push(slices[0].start);
         values.push(slices[slices.length - 1].end);
       }
       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() {
+      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.
    */
   TimelineThread.compare = function(x, y) {
     if (x.parent.pid != y.parent.pid) {
-      return x.parent.pid - y.parent.pid;
+      return TimelineProcess.compare(x.parent, y.parent.pid);
     }
 
     if (x.name && y.name) {
       var tmp = x.name.localeCompare(y.name);
       if (tmp == 0)
         return x.tid - y.tid;
       return tmp;
     } else if (x.name) {
       return -1;
     } else if (y.name) {
       return 1;
     } else {
       return x.tid - y.tid;
     }
   };
 
+  /**
+   * Stores all the samples for a given counter.
+   * @constructor
+   */
+  function TimelineCounter(parent, name) {
+    this.parent = parent;
+    this.name = name;
+    this.seriesNames = [];
+    this.seriesColors = [];
+    this.timestamps = [];
+    this.samples = [];
+  }
+
+  TimelineCounter.prototype = {
+    __proto__: Object.prototype,
+
+    get numSeries() {
+      return this.seriesNames.length;
+    },
+
+    get numSamples() {
+      return this.timestamps.length;
+    },
+
+    /**
+     * 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) {
+        this.minTimestamp = undefined;
+        this.maxTimestamp = undefined;
+        this.maxTotal = 0;
+        return;
+      }
+      this.minTimestamp = this.timestamps[0];
+      this.maxTimestamp = this.timestamps[this.timestamps.length - 1];
+
+      var N = this.numSeries;

[James Hawkins, 2011/11/16 17:41:38]

s/N/n/

[nduca, 2011/11/16 19:03:56]

Done.

+      var maxTotal = -Infinity;
+      for (var i = 0; i < this.timestamps.length; i++) {
+        var total = 0;
+        for (var j = 0; j < N; j++) {
+          total += this.samples[i * N + j];
+          this.totals.push(total);
+        }
+        if (total > maxTotal)
+          maxTotal = total;
+      }
+      this.maxTotal = maxTotal;
+    }
+
+  };
+
+  /**
+   * 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 TimelineProcess represents a single process in the
    * trace. Right now, we keep this around purely for bookkeeping
    * reasons.
    * @constructor
    */
   function TimelineProcess(pid) {
     this.pid = pid;
     this.threads = {};
+    this.counters = {};
   };
 
   TimelineProcess.prototype = {
     get numThreads() {
       var n = 0;
       for (var p in this.threads) {
         n++;
       }
       return n;
     },
 
     getOrCreateThread: function(tid) {
       if (!this.threads[tid])
         this.threads[tid] = new TimelineThread(this, tid);
       return this.threads[tid];
+    },
+
+    getOrCreateCounter: function(name) {

[James Hawkins, 2011/11/16 17:41:38]

Document this method.

[nduca, 2011/11/16 19:03:56]

Done.

+      if (!this.counters[name])
+        this.counters[name] = new TimelineCounter(this, name);
+      return this.counters[name];
     }
   };
 
   /**
+   * Comparison between processes that orders by pid.
+   */
+  TimelineProcess.compare = function(x, y) {
+    return x.pid - y.pid;
+  };
+
+  /**
    * Computes a simplistic hashcode of the provide name. Used to chose colors
    * for slices.
    * @param {string} name The string to hash.
    */
   function getStringHash(name) {
     var hash = 0;
     for (var i = 0; i < name.length; ++i)
       hash = (hash + 37 * hash + 11 * name.charCodeAt(i)) % 0xFFFFFFFF;
     return hash;
   }
 
+  const numColorIds = 30;

[James Hawkins, 2011/11/16 17:41:38]

Document this var.

[nduca, 2011/11/16 19:03:56]

Done.

+  /**
+   * @return {Number} A color ID that is stably associated to the provided via
+   * the getStringHash method.
+   */
+  function getStringColorId(string) {
+    var hash = getStringHash(string);
+    return hash % numColorIds;
+  }
+
   /**
    * Builds a model from an array of TraceEvent objects.
    * @param {Array} events An array of TraceEvents created by
    *     TraceEvent.ToJSON().
    * @constructor
    */
   function TimelineModel(events) {
     this.processes = {};
     this.importErrors = [];
 
@@ skipping 19 matching lines @@
 
     /**
      * The import takes an array of json-ified TraceEvents and adds them into
      * the TimelineModel as processes, threads, and slices.
      */
     importEvents: function(events) {
       // A ptid is a pid and tid joined together x:y fashion, eg 1024:130
       // The ptid is a unique key for a thread in the trace.
       this.importErrors = [];
 
-      // Threadstate
-      const numColorIds = 30;
+      // Threadstate.
       function ThreadState(tid) {
         this.openSlices = [];
         this.openNonNestedSlices = {};
       }
       var threadStateByPTID = {};
 
       var nameToColorMap = {};
       function getColor(name) {
         if (!(name in nameToColorMap)) {
-          var hash = getStringHash(name);
-          nameToColorMap[name] = hash % numColorIds;
+          nameToColorMap[name] = getStringColorId(name);
         }
         return nameToColorMap[name];
       }
 
       var self = this;
 
       /**
        * Helper to process a 'begin' event (e.g. initiate a slice).
        * @param {ThreadState} state Thread state (holds slices).
        * @param {Object} event The current trace event.
@@ skipping 77 matching lines @@
 
         if (event.ph == 'B') {
           processBegin(state, event);
         } else if (event.ph == 'E') {
           processEnd(state, event);
         } else if (event.ph == 'I') {
           // Treat an Instant event as a duration 0 slice.
           // TimelineSliceTrack's redraw() knows how to handle this.
           processBegin(state, event);
           processEnd(state, event);
+        } else if (event.ph == 'C') {
+          var ctr = this.getOrCreateProcess(event.pid)
+                        .getOrCreateCounter(event.name);
+          // Initialize the counter's series fields if needed.
+          if (ctr.numSeries == 0) {
+            for (var seriesName in event.args) {
+              ctr.seriesNames.push(seriesName);
+              ctr.seriesColors.push(getStringHash(ctr.name + '.' + seriesName));
+            }
+            if (ctr.numSeries == 0) {
+              this.importErrors.push('Expected counter ' + event.name +
+                  ' to have at least one argument to use as a value.');
+              // Drop the counter.
+              delete ctr.parent.counters[ctr.name];
+              continue;
+            }
+          }
+
+          // Add the sample values.
+          ctr.timestamps.push(event.ts);
+          for (var i = 0; i < ctr.numSeries; i++) {
+            var seriesName = ctr.seriesNames[i];
+            if (event.args[seriesName] === undefined) {
+              ctr.samples.push(0);
+              continue;
+            }
+            ctr.samples.push(event.args[seriesName]);
+          }
+
         } else if (event.ph == 'M') {
           if (event.name == 'thread_name') {
             var thread = this.getOrCreateProcess(event.pid)
                              .getOrCreateThread(event.tid);
             thread.name = event.args.name;
           } else {
             this.importErrors.push('Unrecognized metadata name: ' + event.name);
           }
         } else {
           this.importErrors.push('Unrecognized event phase: ' + event.ph +
@@ skipping 57 matching lines @@
       var threads = this.getAllThreads();
       for (var tI = 0; tI < threads.length; tI++) {
         var thread = threads[tI];
         thread.updateBounds();
         if (thread.minTimestamp != undefined &&
             thread.maxTimestamp != undefined) {
           wmin = Math.min(wmin, thread.minTimestamp);
           wmax = Math.max(wmax, thread.maxTimestamp);
         }
       }
+      var counters = this.getAllCounters();
+      for (var tI = 0; tI < counters.length; tI++) {
+        var counter = counters[tI];
+        counter.updateBounds();
+        if (counter.minTimestamp != undefined &&
+            counter.maxTimestamp != undefined) {
+          wmin = Math.min(wmin, counter.minTimestamp);
+          wmax = Math.max(wmax, counter.maxTimestamp);
+        }
+      }
       this.minTimestamp = wmin;
       this.maxTimestamp = wmax;
     },
 
     shiftWorldToMicroseconds: function() {
       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) / 1000;
             slice.duration /= 1000;
             if (slice.startInUserTime)
               slice.startInUserTime /= 1000;
             if (slice.durationInUserTime)
               slice.durationInUserTime /= 1000;
           }
         };
         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) / 1000;
+      }
       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]);
         }
       }
       return threads;
+    },
+
+    /**
+     * @return {Array} An array of all the counters in the model.
+     */
+    getAllCounters: function() {
+      var counters = [];
+      for (var pid in this.processes) {
+        var process = this.processes[pid];
+        for (var tid in process.counters) {
+          counters.push(process.counters[tid]);
+        }
+      }
+      return counters;
     }
 
   };
 
   return {
     getStringHash: getStringHash,
+    getStringColorId: getStringColorId,
     TimelineSlice: TimelineSlice,
     TimelineThread: TimelineThread,
+    TimelineCounter: TimelineCounter,
     TimelineProcess: TimelineProcess,
     TimelineModel: TimelineModel
   };
 });