More about:gpu tracing improvements.

chrome/browser/resources/gpu_internals/timeline.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 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
@@ skipping 160 matching lines @@
       if (this.model) {
         throw Error('Cannot set model twice.');
       }
       this.model_ = model;
 
       // Create tracks.
       this.tracks_.textContent = '';
       var threads = model.getAllThreads();
       for (var tI = 0; tI < threads.length; tI++) {
         var thread = threads[tI];
-        for (var srI = 0; srI < thread.subRows.length; ++srI) {
-          var track = document.createElement('div');
-          cr.ui.decorate(track, gpu.TimelineTrack);
-          track.viewport = this.viewport_;
-          if (srI == 0)
-            track.heading = thread.parent.pid + ': ' + thread.tid + ': ';
-          else
-            track.heading = '';
-          track.slices = thread.subRows[srI];
-          track.thread = thread;
-          this.tracks_.appendChild(track);
-        }
+        var track = new TimelineThreadTrack();
+        track.thread = thread;
+        track.viewport = this.viewport_;
+        this.tracks_.appendChild(track);
+
       }
 
       this.needsViewportReset_ = true;
     },
 
     invalidate: function() {
       if (this.invalidatePending_)
         return;
       this.invalidatePending_ = true;
       window.setTimeout(function() {
         this.invalidatePending_ = false;
         this.redrawAllTracks_();
       }.bind(this), 0);
     },
 
     onResize: function() {
       for (var i = 0; i < this.tracks_.children.length; ++i) {
         var track = this.tracks_.children[i];
         track.onResize();
       }
     },
 
     redrawAllTracks_: function() {
       if (this.needsViewportReset_ && this.clientWidth != 0) {
         this.needsViewportReset_ = false;
-        console.log('viewport was reset.');
         /* update viewport */
         var rangeTimestamp = this.model_.maxTimestamp -
             this.model_.minTimestamp;
-        var w = this.tracks_.firstChild.getCanvasWidth();
+        var w = this.firstCanvas.width;
+        console.log('viewport was reset with w=', w);
         var scaleX = w / rangeTimestamp;
         var panX = -this.model_.minTimestamp;
         this.viewport_.setPanAndScale(panX, scaleX);
       }
       for (var i = 0; i < this.tracks_.children.length; ++i) {
         this.tracks_.children[i].redraw();
       }
     },
 
     updateChildViewports_: function() {
@@ skipping 62 matching lines @@
           ' w/s   : Zoom in/out\n' +
           ' a/d   : Pan left/right\n' +
           ' e     : Center on mouse';
     },
 
     get selection() {
       return this.selection_;
     },
 
     get firstCanvas() {
-      if (this.tracks_.firstChild)
-        return this.tracks_.firstChild.canvas;
+      return this.tracks_.firstChild ?
+          this.tracks_.firstChild.firstCanvas : undefined;
     },
 
     showDragBox_: function() {
       this.dragBox_.hidden = false;
     },
 
     hideDragBox_: function() {
       this.dragBox_.hidden = true;
     },
 
@@ skipping 78 matching lines @@
         function addHit(type, track, slice) {
           selection.push({track: track, slice: slice});
         }
         for (i = 0; i < this.tracks_.children.length; ++i) {
           var track = this.tracks_.children[i];
 
           // Only check tracks that insersect the rect.
           var a = Math.max(loY, track.offsetTop);
           var b = Math.min(hiY, track.offsetTop + track.offsetHeight);
           if (a <= b) {
-            track.pickRange(loWX, hiWX, addHit);
+            track.pickRange(loWX, hiWX, loY, hiY, addHit);
           }
         }
         // Activate the new selection.
         this.selection_ = selection;
         cr.dispatchSimpleEvent(this, 'selectionChange');
         for (i = 0; i < this.selection_.length; ++i) {
           this.selection_[i].slice.selected = true;
         }
         this.invalidate();  // Cause tracks to redraw.
       }
     }
   };
 
   /**
    * The TimelineModel being viewed by the timeline
    * @type {TimelineModel}
    */
   cr.defineProperty(Timeline, 'model', cr.PropertyKind.JS);
 
   return {
     Timeline: Timeline
   };
 });