about:tracing support for TRACE_ASYNC_START/FINISH events.

chrome/browser/resources/tracing/timeline.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 Interactive visualizaiton of TimelineModel objects
  * based loosely on gantt charts. Each thread in the TimelineModel is given a
  * set of TimelineTracks, one per subrow in the thread. The Timeline class
  * acts as a controller, creating the individual tracks, while TimelineTracks
  * do actual drawing.
@@ skipping 378 matching lines @@
         // Get a sorted list of threads.
         var threads = [];
         for (var tid in process.threads)
           threads.push(process.threads[tid]);
         threads.sort(tracing.TimelineThread.compare);
 
         // Create the threads.
         threads.forEach(function(thread) {
           var track = new tracing.TimelineThreadTrack();
           track.heading = thread.userFriendlyName + ':';
-          track.tooltip = thread.userFriendlyDetials;
+          track.tooltip = thread.userFriendlyDetails;
           track.headingWidth = maxHeadingWidth;
           track.viewport = this.viewport_;
           track.thread = thread;
           this.tracks_.appendChild(track);
         }.bind(this));
       }.bind(this));
 
       // Set up a reasonable viewport.
       this.viewport_.setWhenPossible(function() {
         var rangeTimestamp = this.model_.maxTimestamp -
@@ skipping 244 matching lines @@
 
       // Shift the timebase left until its just left of minTimestamp.
       var numInterfvalsSinceStart = Math.ceil((tb - this.model_.minTimestamp) /
           this.viewport_.gridStep_);
       this.viewport_.gridTimebase = tb -
           (numInterfvalsSinceStart + 1) * this.viewport_.gridStep_;
       this.viewport_.gridEnabled = true;
     },
 
     onMouseDown_: function(e) {
-      rect = this.tracks_.getClientRects()[0];
+      var canv = this.firstCanvas;
+      var rect = this.tracks_.getClientRects()[0];
       var inside = rect &&
           e.clientX >= rect.left &&
           e.clientX < rect.right &&
           e.clientY >= rect.top &&
-          e.clientY < rect.bottom;
+          e.clientY < rect.bottom &&
+          e.x >= canv.offsetLeft;
       if (!inside)
         return;
 
-      var canv = this.firstCanvas;
       var pos = {
         x: e.clientX - canv.offsetLeft,
         y: e.clientY - canv.offsetTop
       };
 
       var wX = this.viewport_.xViewToWorld(pos.x);
 
       this.dragBeginEvent_ = e;
       e.preventDefault();
       if (this.focusElement.tabIndex >= 0)
@@ skipping 52 matching lines @@
           if (a <= b) {
             track.pickRange(loWX, hiWX, loY, hiY, addHit);
           }
         }
         // Activate the new selection.
         this.selection = selection;
       }
     },
 
     onDblClick_: function(e) {
+      var canv = this.firstCanvas;
+      if (e.x < canv.offsetLeft)
+        return;
+
       var scale = 4;
       if (e.shiftKey)
         scale = 1 / scale;
       this.zoomBy_(scale);
       e.preventDefault();
     }
   };
 
   /**
    * The TimelineModel being viewed by the timeline
    * @type {TimelineModel}
    */
   cr.defineProperty(Timeline, 'model', cr.PropertyKind.JS);
 
   return {
     Timeline: Timeline,
     TimelineViewport: TimelineViewport
   };
 });