Tons of timeline tweaks

chrome/browser/resources/tracing/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
  * do actual drawing.
@@ skipping 117 matching lines @@
     get gridStep() {
       return this.gridStep_;
     },
 
     applyTransformToCanavs: function(ctx) {
       ctx.transform(this.scaleX_, 0, 0, 1, this.panX_ * this.scaleX_, 0);
     }
   };
 
   /**
+   * Uses an embedded iframe to measure provided elements without forcing layout
+   * on the main document.
+   * @constructor
+   * @extends {Object}
+   */
+  function MeasuringStick()
+  {
+    var iframe = document.createElement('iframe');
+    iframe.style.cssText = 'width:100%;height:0;border:0;visibility:hidden';
+    document.body.appendChild(iframe);
+    this._doc = iframe.contentDocument;
+    this._window = iframe.contentWindow;
+    this._doc.body.style.cssText = 'padding:0;margin:0;overflow:hidden';
+    [].forEach.call(document.querySelectorAll('link[rel=stylesheet]'),

[jbates, 2011/10/21 20:21:05]

What's this do?

+                    function(stylesheet) {
+                      var link = this._doc.createElement('link');
+                      link.rel = 'stylesheet';
+                      link.href = stylesheet.href;
+                      this._doc.head.appendChild(link);
+                    }, this);
+  }
+
+  MeasuringStick.prototype = {
+    __proto__: Object.prototype,
+
+    /**
+     * Converts measures like 50px to their size in pixels, if possible.
+     */
+    convertMeasureToPixels_: function(str) {
+      var g = /(\d+)px/.exec(str);
+      if (g)
+        return parseInt(g[0]);
+      throw 'Unrecognized unit on ' + str;
+    },
+
+    /**
+     * Measures the provided element without forcing layout on the main
+     * document.
+     */
+    measure: function(element)
+    {
+      this._doc.body.appendChild(element);
+      var style = this._window.getComputedStyle(element);
+      var width = this.convertMeasureToPixels_(style.width);
+      var height = this.convertMeasureToPixels_(style.height);
+      this._doc.body.removeChild(element);
+      return { width: width, height: height };
+    }
+  };
+
+  /**
    * Renders a TimelineModel into a div element, making one
    * TimelineTrack for each subrow in each thread of the model, managing
    * overall track layout, and handling user interaction with the
    * viewport.
    *
    * @constructor
    * @extends {HTMLDivElement}
    */
   Timeline = cr.ui.define('div');
 
@@ skipping 12 matching lines @@
 
       this.invalidatePending_ = false;
 
       this.tracks_ = this.ownerDocument.createElement('div');
       this.tracks_.invalidate = this.invalidate.bind(this);
       this.appendChild(this.tracks_);
 
       this.dragBox_ = this.ownerDocument.createElement('div');
       this.dragBox_.className = 'timeline-drag-box';
       this.appendChild(this.dragBox_);
+      this.hideDragBox_();
 
       // The following code uses a setInterval to monitor the timeline control
       // for size changes. This is so that we can keep the canvas' bitmap size
       // correctly synchronized with its presentation size.
       // TODO(nduca): detect this in a more efficient way, e.g. iframe hack.
       this.lastSize_ = this.clientWidth + 'x' + this.clientHeight;
-      this.ownerDocument.defaultView.setInterval(function() {
+      this.checkForResizeInterval_ =
+          this.ownerDocument.defaultView.setInterval(function() {
+        if (!this.isAttachedToDocument_)
+          return;
         var curSize = this.clientWidth + 'x' + this.clientHeight;
         if (this.clientWidth && curSize != this.lastSize_) {
           this.lastSize_ = curSize;
           this.onResize();
         }
       }.bind(this), 250);
 
-      document.addEventListener('keypress', this.onKeypress_.bind(this));
-      document.addEventListener('keydown', this.onKeydown_.bind(this));
-      document.addEventListener('mousedown', this.onMouseDown_.bind(this));
-      document.addEventListener('mousemove', this.onMouseMove_.bind(this));
-      document.addEventListener('mouseup', this.onMouseUp_.bind(this));
-      document.addEventListener('dblclick', this.onDblClick_.bind(this));
+      this.safeAddEventListener(document, 'keypress', this.onKeypress_, this);
+      this.safeAddEventListener(document, 'keydown', this.onKeydown_, this);
+      this.safeAddEventListener(document, 'mousedown', this.onMouseDown_, this);
+      this.safeAddEventListener(document, 'mousemove', this.onMouseMove_, this);
+      this.safeAddEventListener(document, 'mouseup', this.onMouseUp_, this);
+      this.safeAddEventListener(document, 'dblclick', this.onDblClick_, this);
 
       this.lastMouseViewPos_ = {x: 0, y: 0};
 
       this.selection_ = [];
     },
 
+    safeAddEventListener: function(object, event, func, target) {
+      if (!this.boundListeners_)
+        this.boundListeners_ = [];
+      var boundFunc = func.bind(target);
+      this.boundListeners_.push({object: object,
+        event: event,
+        boundFunc: boundFunc});
+      object.addEventListener(event, boundFunc);
+    },
+
+    detach: function() {
+      for (var i = 0; i < this.boundListeners_.length; ++i) {
+        var binding = this.boundListeners_[i];
+        binding.object.removeEventListener(binding.event, binding.boundFunc);
+      }
+      this.boundListeners_ = undefined;
+      window.clearInterval(this.checkForResizeInterval_);
+      this.checkForResizeInterval_ = undefined;
+    },
+
     get model() {
       return this.model_;
     },
 
     set model(model) {
       if (!model)
         throw Error('Model cannot be null');
       if (this.model) {
         throw Error('Cannot set model twice.');
       }
       this.model_ = model;
 
-      // Create tracks.
-      this.tracks_.textContent = '';
+      // Create tracks and measure their heading size
       var threads = model.getAllThreads();
-      threads.sort(tracing.TimelineThread.compare);
+      var maxHeadingWidth = 0;
+      var tracks = [];
+      var measuringStick = new MeasuringStick();
+      var headingEl = document.createElement('div');
+      headingEl.style.position = 'fixed';
+      headingEl.className = 'timeline-slice-track-title';
       for (var tI = 0; tI < threads.length; tI++) {
         var thread = threads[tI];
         var track = new TimelineThreadTrack();
         track.thread = thread;
         track.viewport = this.viewport_;
+        tracks.push(track);
+        headingEl.textContent = track.heading;
+        var w = measuringStick.measure(headingEl).width;
+        // limit heading width to 300px
+        if (w > 300)
+          w = 300;
+        if (w > maxHeadingWidth)
+          maxHeadingWidth = w;
+      }
+      maxHeadingWidth = (maxHeadingWidth + 4) + 'px';

[jbates, 2011/10/21 20:21:05]

nit: Is this normal practice to turn a num variable into a string? I stumbled on
this line until I realized it would evaluate to a string and then convert
maxHeadingWidth to a string.

+
+      // Attach tracks and set width
+      this.tracks_.textContent = '';
+      threads.sort(tracing.TimelineThread.compare);
+      for (var tI = 0; tI < tracks.length; tI++) {
+        var track = tracks[tI];
+        track.headingWidth = maxHeadingWidth;
         this.tracks_.appendChild(track);
-
       }
 
-      this.needsViewportReset_ = true;
+      if (this.isAttachedToDocument_)
+        this.onResize();
+      else
+        this.needsViewportReset_ = true;
     },
 
     viewportChange_: function() {
       this.invalidate();
     },
 
     invalidate: function() {
       if (this.invalidatePending_)
         return;
       this.invalidatePending_ = true;
-      window.setTimeout(function() {
-        this.invalidatePending_ = false;
-        this.redrawAllTracks_();
-      }.bind(this), 0);
+      if (this.isAttachedToDocument_)
+        window.setTimeout(function() {
+          this.invalidatePending_ = false;
+          this.redrawAllTracks_();
+        }.bind(this), 0);
+    },
+
+    get isAttachedToDocument_() {
+      var cur = this;
+      while (cur.parentNode)
+        cur = cur.parentNode;
+      return cur == this.ownerDocument;
     },
 
     onResize: function() {
+      if (!this.isAttachedToDocument_)
+        throw 'Not attached to document!';
       for (var i = 0; i < this.tracks_.children.length; ++i) {
         var track = this.tracks_.children[i];
         track.onResize();
       }
+      if (this.invalidatePending_) {
+        this.invalidatePending_ = false;
+        this.redrawAllTracks_();
+      }
     },
 
     redrawAllTracks_: function() {
       if (this.needsViewportReset_ && this.clientWidth != 0) {
+        if (!this.isAttachedToDocument_)
+          throw 'Not attached to document!';
         this.needsViewportReset_ = false;
         /* update viewport */
         var rangeTimestamp = this.model_.maxTimestamp -
             this.model_.minTimestamp;
         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() {
       for (var cI = 0; cI < this.tracks_.children.length; ++cI) {
         var child = this.tracks_.children[cI];
         child.setViewport(this.panX, this.scaleX);
       }
     },
 
+    get listenToKeys_() {
+      if (this.parentElement.parentElement.tabIndex >= 0)
+        return document.activeElement == this.parentElement.parentElement;
+      return true;
+    },
+
     onKeypress_: function(e) {
       var vp = this.viewport_;
       if (!this.firstCanvas)
         return;
+      if (!this.listenToKeys_)
+        return;
       var viewWidth = this.firstCanvas.clientWidth;
       var curMouseV, curCenterW;
       switch (e.keyCode) {
         case 101: // e
           var vX = this.lastMouseViewPos_.x;
           var wX = vp.xViewToWorld(this.lastMouseViewPos_.x);
           var distFromCenter = vX - (viewWidth / 2);
           var percFromCenter = distFromCenter / viewWidth;
           var percFromCenterSq = percFromCenter * percFromCenter;
           vp.xPanWorldPosToViewPos(wX, 'center', viewWidth);
@@ skipping 26 matching lines @@
           vp.panX += vp.xViewVectorToWorld(viewWidth * 0.5);
           break;
         case 68:  // D
           vp.panX -= vp.xViewVectorToWorld(viewWidth * 0.5);
           break;
       }
     },
 
     // Not all keys send a keypress.
     onKeydown_: function(e) {
+      if (!this.listenToKeys_)
+        return;
       switch (e.keyCode) {
         case 37:   // left arrow
           this.selectPrevious_(e);
           e.preventDefault();
           break;
         case 39:   // right arrow
           this.selectNext_(e);
           e.preventDefault();
           break;
         case 9:    // TAB
-          if (e.shiftKey)
-            this.selectPrevious_(e);
-          else
-            this.selectNext_(e);
-          e.preventDefault();
+          if (this.parentElement.parentElement.tabIndex == -1) {
+            if (e.shiftKey)
+              this.selectPrevious_(e);
+            else
+              this.selectNext_(e);
+            e.preventDefault();
+          }
           break;
       }
     },
 
     /**
      * Zoom in or out on the timeline by the given scale factor.
      * @param {integer} scale The scale factor to apply.  If <1, zooms out.
      */
     zoomBy_: function(scale) {
       if (!this.firstCanvas)
@@ skipping 22 matching lines @@
      * @param {boolean} forwardp If true, select one forward (next).
      *   Else, select previous.
      */
     selectAdjoining_: function(e, forwardp) {
       var i, track, slice, adjoining;
       var selection = [];
       // Clear old selection; try and select next.
       for (i = 0; i < this.selection_.length; ++i) {
         adjoining = undefined;
         this.selection_[i].slice.selected = false;
-        var track = this.selection_[i].track;
-        var slice = this.selection_[i].slice;
+        track = this.selection_[i].track;
+        slice = this.selection_[i].slice;
         if (slice) {
           if (forwardp)
             adjoining = track.pickNext(slice);
           else
             adjoining = track.pickPrevious(slice);
         }
         if (adjoining != undefined)
           selection.push({track: track, slice: adjoining});
       }
       // Activate the new selection.
       this.selection_ = selection;
       for (i = 0; i < this.selection_.length; ++i)
         this.selection_[i].slice.selected = true;
       cr.dispatchSimpleEvent(this, 'selectionChange');
       this.invalidate();  // Cause tracks to redraw.
       e.preventDefault();
     },
 
     get keyHelp() {
-      return 'Keyboard shortcuts:\n' +
+      var help = 'Keyboard shortcuts:\n' +
           ' w/s     : Zoom in/out    (with shift: go faster)\n' +
           ' a/d     : Pan left/right\n' +
           ' e       : Center on mouse\n' +
-          ' g/G     : Shows grid at the start/end of the selected task\n' +
-          ' <-,^TAB : Select previous event on current timeline\n' +
-          ' ->, TAB : Select next event on current timeline\n' +
-        '\n' +
-        'Dbl-click to zoom in; Shift dbl-click to zoom out\n';
+          ' g/G     : Shows grid at the start/end of the selected task\n';
 
+      if (this.parentElement.parentElement.tabIndex)
+        help += ' <-      : Select previous event on current timeline\n' +
+            ' ->      : Select next event on current timeline\n';
+      else
+        help += ' <-,^TAB : Select previous event on current timeline\n' +
+            ' ->, TAB : Select next event on current timeline\n';
 
+      help +=
+          '\n' +
+          'Dbl-click to zoom in; Shift dbl-click to zoom out\n';

[jbates, 2011/10/21 20:21:05]

We really should add mouse scroll zoom.

+      return help;
     },
 
     get selection() {
       return this.selection_;
     },
 
     get firstCanvas() {
       return this.tracks_.firstChild ?
           this.tracks_.firstChild.firstCanvas : undefined;
     },
 
-    showDragBox_: function() {
-      this.dragBox_.hidden = false;
-    },
-
     hideDragBox_: function() {
       this.dragBox_.style.left = '-1000px';
       this.dragBox_.style.top = '-1000px';
       this.dragBox_.style.width = 0;
       this.dragBox_.style.height = 0;
-      this.dragBox_.hidden = true;
-    },
-
-    get dragBoxVisible_() {
-      return this.dragBox_.hidden == false;
     },
 
     setDragBoxPosition_: function(eDown, eCur) {
       var loX = Math.min(eDown.clientX, eCur.clientX);
       var hiX = Math.max(eDown.clientX, eCur.clientX);
       var loY = Math.min(eDown.clientY, eCur.clientY);
       var hiY = Math.max(eDown.clientY, eCur.clientY);
 
       this.dragBox_.style.left = loX + 'px';
       this.dragBox_.style.top = loY + 'px';
@@ skipping 40 matching lines @@
       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.parentElement.parentElement.tabIndex)
+        this.parentElement.parentElement.focus();
     },
 
     onMouseMove_: function(e) {
       if (!this.firstCanvas)
         return;
       var canv = this.firstCanvas;
       var pos = {
         x: e.clientX - canv.offsetLeft,
         y: e.clientY - canv.offsetTop
       };
 
       // Remember position. Used during keyboard zooming.
       this.lastMouseViewPos_ = pos;
 
-      // Initiate the drag box if needed.
-      if (this.dragBeginEvent_ && !this.dragBoxVisible_) {
-        this.showDragBox_();
-        this.setDragBoxPosition_(e, e);
-      }
-
       // Update the drag box
       if (this.dragBeginEvent_) {
         this.setDragBoxPosition_(this.dragBeginEvent_, e);
       }
     },
 
     onMouseUp_: function(e) {
       var i;
       if (this.dragBeginEvent_) {
         // Stop the dragging.
@@ skipping 42 matching lines @@
         this.invalidate();  // Cause tracks to redraw.
       }
     },
 
     onDblClick_: function(e) {
       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
   };
 });