Tons of timeline tweaks

chrome/browser/resources/tracing/timeline_track.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 Renders an array of slices into the provided div,
  * using a child canvas element. Uses a FastRectRenderer to draw only
  * the visible slices.
  */
@@ skipping 75 matching lines @@
 
     decorate: function() {
       this.className = 'timeline-thread-track';
     },
 
     set thread(thread) {
       this.thread_ = thread;
       this.updateChildTracks_();
     },
 
+    /**
+     * @return {string} A human-readable name for the track.
+     */
+    get heading() {
+      if (!this.thread_)
+        return '';
+      var tname = this.thread_.name || this.thread_.tid;
+      return this.thread_.parent.pid + ': ' +
+          tname + ':';
+    },
+
+    set headingWidth(width) {
+      for (var i = 0; i < this.tracks_.length; i++)
+        this.tracks_[i].headingWidth = width;
+    },
+
     set viewport(v) {
       this.viewport_ = v;
       for (var i = 0; i < this.tracks_.length; i++)
         this.tracks_[i].viewport = v;
       this.invalidate();
     },
 
     invalidate: function() {
       if (this.parentNode)
         this.parentNode.invalidate();
@@ skipping 19 matching lines @@
       this.textContent = '';
       this.tracks_ = [];
       if (this.thread_) {
         for (var srI = 0; srI < this.thread_.nonNestedSubRows.length; ++srI) {
           addTrack(this, this.thread_.nonNestedSubRows[srI]);
         }
         for (var srI = 0; srI < this.thread_.subRows.length; ++srI) {
           addTrack(this, this.thread_.subRows[srI]);
         }
         if (this.tracks_.length > 0) {
-          var tname = this.thread_.name || this.thread_.tid;
-          this.tracks_[0].heading = this.thread_.parent.pid + ': ' +
-              tname + ':';
+          this.tracks_[0].heading = this.heading;
           this.tracks_[0].tooltip = 'pid: ' + this.thread_.parent.pid +
               ', tid: ' + this.thread_.tid +
               (this.thread_.name ? ', name: ' + this.thread_.name : '');
         }
       }
     },
 
     /**
      * Picks a slice, if any, at a given location.
      * @param {number} wX X location to search at, in worldspace.
@@ skipping 57 matching lines @@
       this.canvasContainer_ = document.createElement('div');
       this.canvasContainer_.className = 'timeline-slice-track-canvas-container';
       this.appendChild(this.canvasContainer_);
       this.canvas_ = document.createElement('canvas');
       this.canvas_.className = 'timeline-slice-track-canvas';
       this.canvasContainer_.appendChild(this.canvas_);
 
       this.ctx_ = this.canvas_.getContext('2d');
     },
 
+    set headingWidth(width) {
+      this.headingDiv_.style.width = width;
+    },
+
+    get heading() {
+      return this.headingDiv_.textContent;
+    },
+
     set heading(text) {
       this.headingDiv_.textContent = text;
     },
 
     set tooltip(text) {
       this.headingDiv_.title = text;
     },
 
     set slices(slices) {
       this.slices_ = slices;
@@ skipping 103 matching lines @@
       ctx.strokeStyle = 'rgb(0,0,0)';
       ctx.fillStyle = 'rgb(0,0,0)';
       var quickDiscardThresshold = pixWidth * 20; // dont render until 20px wide
       for (var i = 0; i < slices.length; ++i) {
         var slice = slices[i];
         if (slice.duration > quickDiscardThresshold) {
           var title = slice.title;
           if (slice.didNotFinish) {
             title += ' (Did Not Finish)';
           }
-          function labelWidth() {
-            return quickMeasureText(ctx, title) + 2;
+          var labelWidth = quickMeasureText(ctx, title) + 2;
+          var labelWidthWorld = pixWidth * labelWidth;
+
+          if (labelWidthWorld < slice.duration) {
+            var cX = vp.xWorldToView(slice.start + 0.5 * slice.duration);
+            ctx.fillText(title, cX, 2.5, labelWidthWorld);
           }
-          function labelWidthWorld() {
-            return pixWidth * labelWidth();
-          }
-          var elided = false;
-          while (labelWidthWorld() > slice.duration) {
-            title = title.substring(0, title.length * 0.75);
-            elided = true;
-          }
-          if (elided && title.length > 3)
-            title = title.substring(0, title.length - 3) + '...';
-          var cX = vp.xWorldToView(slice.start + 0.5 * slice.duration);
-          ctx.fillText(title, cX, 2.5, labelWidthWorld());
         }
       }
     },
 
     /**
      * Picks a slice, if any, at a given location.
      * @param {number} wX X location to search at, in worldspace.
      * @param {number} wY Y location to search at, in offset space.
      *     offset space.
      * @param {function():*} onHitCallback Callback to call with the slice,
@@ skipping 73 matching lines @@
       var index = this.indexOfSlice_(slice);
       if (index != undefined) {
         if (index < this.slices_.length - 1)
           index++;
         else
           index = undefined;
       }
       return index != undefined ? this.slices_[index] : undefined;
     },
 
-   /**
+    /**
      * Return the previous slice, if any, before the given slice.
      * @param {slice} A slice.
      * @return {slice} The previous slice, or undefined.
      */
     pickPrevious: function(slice) {
       var index = this.indexOfSlice_(slice);
       if (index == 0)
         return undefined;
       else if ((index != undefined) && (index > 0))
         index--;
       return index != undefined ? this.slices_[index] : undefined;
-    },
+    }
 
   };
 
   return {
     TimelineSliceTrack: TimelineSliceTrack,
     TimelineThreadTrack: TimelineThreadTrack
   };
 });