Allow about:tracing Counters to be selected

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.
 
 'use strict';
 
 /**
  * @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
@@ skipping 214 matching lines @@
 
     get gridStep() {
       return this.gridStep_;
     },
 
     applyTransformToCanavs: function(ctx) {
       ctx.transform(this.scaleX_, 0, 0, 1, this.panX_ * this.scaleX_, 0);
     }
   };
 
+  function TimelineSelectionSliceHit(track, slice) {
+    this.track = track;
+    this.slice = slice;
+  }
+  TimelineSelectionSliceHit.prototype = {
+    get selected() {
+      return this.slice.selected;
+    },
+    set selected(v) {
+      this.slice.selected = v;
+    }
+  };
+
+  function TimelineSelectionCounterSampleHit(track, counter, sampleIndex) {
+    this.track = track;
+    this.counter = counter;
+    this.sampleIndex = sampleIndex;
+  }
+  TimelineSelectionCounterSampleHit.prototype = {
+    get selected() {
+      return this.track.selectedSamples[this.sampleIndex] == true;
+    },
+    set selected(v) {
+      if (v)
+        this.track.selectedSamples[this.sampleIndex] = true;
+      else
+        this.track.selectedSamples[this.sampleIndex] = false;
+      this.track.invalidate();
+    }
+  };
+
+
+  /**
+   * Represents a selection within a Timeline and its associated set of tracks.
+   * @constructor
+   */
+  function TimelineSelection() {
+    this.range_dirty_ = true;
+    this.range_ = {};
+    this.length_ = 0;
+  }
+  TimelineSelection.prototype = {
+    __proto__: Object.prototype,
+
+    get range() {
+      if (this.range_dirty_) {
+        var wmin = Infinity;
+        var wmax = -wmin;
+        for (var i = 0; i < this.length_; i++) {
+          var hit = this[i];
+          if (hit.slice) {
+            wmin = Math.min(wmin, hit.slice.start);
+            wmax = Math.max(wmax, hit.slice.end);
+          }
+        }
+        this.range_ = {
+          min: wmin,
+          max: wmax
+        };
+        this.range_dirty_ = false;
+      }
+      return this.range_;
+    },
+
+    get duration() {
+      return this.range.max - this.range.min;
+    },
+
+    get length() {
+      return this.length_;
+    },
+
+    clear: function() {
+      for (var i = 0; i < this.length_; ++i)
+        delete this[i];
+      this.length_ = 0;
+      this.range_dirty_ = true;
+    },
+
+    push_: function(hit) {
+      this[this.length_++] = hit;
+      this.range_dirty_ = true;
+      return hit;
+    },
+
+    addSlice: function(track, slice) {
+      return this.push_(new TimelineSelectionSliceHit(track, slice));
+    },
+
+    addCounterSample: function(track, counter, sampleIndex) {
+      return this.push_(
+        new TimelineSelectionCounterSampleHit(
+          track, counter, sampleIndex));
+    },
+
+    subSelection: function(index, count) {
+      count = count || 1;
+
+      var selection = new TimelineSelection();
+      selection.range_dirty_ = true;
+      if (index < 0 || index + count > this.length_)
+        throw 'Index out of bounds';
+
+      for (var i = index; i < index + count; i++)
+        selection.push_(this[i]);
+
+      return selection;
+    },
+
+    getCounterSampleHits: function() {
+      var selection = new TimelineSelection();
+      for (var i = 0; i < this.length_; i++)
+        if (this[i] instanceof TimelineSelectionCounterSampleHit)
+          selection.push_(this[i]);
+      return selection;
+    },
+
+    getSliceHits: function() {
+      var selection = new TimelineSelection();
+      for (var i = 0; i < this.length_; i++)
+        if (this[i] instanceof TimelineSelectionSliceHit)
+          selection.push_(this[i]);
+      return selection;
+    },
+
+    map: function(fn) {
+      for (var i = 0; i < this.length_; i++)
+        fn(this[i]);
+    },
+
+    /**
+     * Helper for selection previous or next.
+     * @param {boolean} forwardp If true, select one forward (next).
+     *   Else, select previous.
+     * @return {boolean} true if current selection changed.
+     */
+    getShiftedSelection: function(offset) {
+      var newSelection = new TimelineSelection();
+      for (var i = 0; i < this.length_; i++) {
+        var hit = this[i];
+        hit.track.addItemNearToProvidedHitToSelection(
+            hit, offset, newSelection);
+      }
+
+      if (newSelection.length == 0)
+        return undefined;
+      return newSelection;
+    },
+  };
+
   /**
    * 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}
    */
   var Timeline = cr.ui.define('div');
@@ skipping 18 matching lines @@
 
       this.bindEventListener_(document, 'keypress', this.onKeypress_, this);
       this.bindEventListener_(document, 'keydown', this.onKeydown_, this);
       this.bindEventListener_(document, 'mousedown', this.onMouseDown_, this);
       this.bindEventListener_(document, 'mousemove', this.onMouseMove_, this);
       this.bindEventListener_(document, 'mouseup', this.onMouseUp_, this);
       this.bindEventListener_(document, 'dblclick', this.onDblClick_, this);
 
       this.lastMouseViewPos_ = {x: 0, y: 0};
 
-      this.selection_ = [];
+      this.selection_ = new TimelineSelection();
     },
 
     /**
      * Wraps the standard addEventListener but automatically binds the provided
      * func to the provided target, tracking the resulting closure. When detach
      * is called, these listeners will be automatically removed.
      */
     bindEventListener_: function(object, event, func, target) {
       if (!this.boundListeners_)
         this.boundListeners_ = [];
@@ skipping 139 matching lines @@
       // Set up a reasonable viewport.
       this.viewport_.setWhenPossible(function() {
         var w = this.firstCanvas.width;
         this.viewport_.xSetWorldRange(this.model_.minTimestamp,
                                       this.model_.maxTimestamp,
                                       w);
       }.bind(this));
     },
 
     /**
+     * @param {TimelineFilter} filter The filter to use for finding matches.
+     * @param {TimelineSelection} selection The selection to add matches to.
      * @return {Array} An array of objects that match the provided
      * TimelineFilter.
      */
-    findAllObjectsMatchingFilter: function(filter) {
-      var hits = [];
-      for (var i = 0; i < this.tracks_.children.length; ++i) {
-        var trackHits =
-          this.tracks_.children[i].findAllObjectsMatchingFilter(filter);
-        Array.prototype.push.apply(hits, trackHits);
-      }
-      return hits;
+    addAllObjectsMatchingFilterToSelection: function(filter, selection) {
+      for (var i = 0; i < this.tracks_.children.length; ++i)
+        this.tracks_.children[i].addAllObjectsMatchingFilterToSelection(
+          filter, selection);
     },
 
     /**
      * @return {Element} The element whose focused state determines
      * whether to respond to keyboard inputs.
      * Defaults to the parent element.
      */
     get focusElement() {
       if (this.focusElement_)
         return this.focusElement_;
@@ skipping 65 matching lines @@
         case 68:  // D
           vp.panX -= vp.xViewVectorToWorld(viewWidth * 0.5);
           break;
       }
     },
 
     // Not all keys send a keypress.
     onKeydown_: function(e) {
       if (!this.listenToKeys_)
         return;
+      var sel;
       switch (e.keyCode) {
         case 37:   // left arrow
-          this.selectPrevious_(e);
+          sel = this.selection.getShiftedSelection(-1);
+          if (sel) {
+            this.setSelectionAndMakeVisible(sel);
+            e.preventDefault();
+          }
           break;
         case 39:   // right arrow
-          this.selectNext_(e);
+          sel = this.selection.getShiftedSelection(1);
+          if (sel) {
+            this.setSelectionAndMakeVisible(sel);
+            e.preventDefault();
+          }
           break;
         case 9:    // TAB
           if (this.focusElement.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)
         return;
       var vp = this.viewport_;
       var viewWidth = this.firstCanvas.clientWidth;
       var curMouseV = this.lastMouseViewPos_.x;
       var curCenterW = vp.xViewToWorld(curMouseV);
       vp.scaleX = vp.scaleX * scale;
       vp.xPanWorldPosToViewPos(curCenterW, curMouseV, viewWidth);
     },
 
-    /** Select the next slice on the timeline.  Applies to each track. */
-    selectNext_: function(e) {
-      if (this.selectAdjoining_(true))
-        e.preventDefault();
-    },
-
-    /** Select the previous slice on the timeline.  Applies to each track. */
-    selectPrevious_: function(e) {
-      if (this.selectAdjoining_(false))
-        e.preventDefault();
-    },
-
-    /**
-     * Helper for selection previous or next.
-     * @param {boolean} forwardp If true, select one forward (next).
-     *   Else, select previous.
-     * @return {boolean} true if current selection changed.
-     */
-    selectAdjoining_: function(forwardp) {
-      var i, track, slice, adjoining;
-      var selection = [];
-      var minTime = Number.MAX_VALUE;
-      var maxTime = -Number.MAX_VALUE;
-      // Try and select next.
-      for (i = 0; i < this.selection_.length; i++) {
-        adjoining = undefined;
-        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});
-          if (slice.start < minTime)
-            minTime = slice.start;
-          if (slice.start + slice.duration > maxTime)
-            maxTime = slice.start + slice.duration;
-        }
-      }
-      if (selection.length == 0) {
-        // Nothing adjoining was found; leave the current selection.
-        return false;
-      }
-      this.selection = selection;
-
-      // Potentially move the viewport to keep the new selection in view.
-      this.viewport_.xPanWorldRangeIntoView(minTime, maxTime,
-          this.firstCanvas.width);
-      return true;
-    },
-
     get keyHelp() {
       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';
 
       if (this.focusElement.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';
       return help;
     },
 
     get selection() {
       return this.selection_;
     },
 
     set selection(selection) {
+      if (!(selection instanceof TimelineSelection))
+          throw 'Expected TimelineSelection';
+
       // Clear old selection.
       var i;
       for (i = 0; i < this.selection_.length; i++)
-        this.selection_[i].slice.selected = false;
+        this.selection_[i].selected = false;
 
       this.selection_ = selection;
 
       cr.dispatchSimpleEvent(this, 'selectionChange');
       for (i = 0; i < this.selection_.length; i++)
-        this.selection_[i].slice.selected = true;
+        this.selection_[i].selected = true;
       this.viewport_.dispatchChangeEvent(); // Triggers a redraw.
     },
 
-    getSelectionRange: function() {
-      var wmin = Infinity;
-      var wmax = -wmin;
-      for (var i = 0; i < this.selection_.length; i++) {
-        var hit = this.selection_[i];
-        if (hit.slice) {
-          wmin = Math.min(wmin, hit.slice.start);
-          wmax = Math.max(wmax, hit.slice.end);
-        }
-      }
-      return {
-        min: wmin,
-        max: wmax
-      };
-    },
-
     setSelectionAndMakeVisible: function(selection, zoomAllowed) {
+      if (!(selection instanceof TimelineSelection))
+          throw 'Expected TimelineSelection';
       this.selection = selection;
-      var range = this.getSelectionRange();
+      var range = this.selection.range;
       var size = this.viewport_.xWorldVectorToView(range.max - range.min);
       if (zoomAllowed && size < 50) {
         var worldCenter = range.min + (range.max - range.min) * 0.5;
         var worldRange = (range.max - range.min) * 5;
         this.viewport_.xSetWorldRange(worldCenter - worldRange * 0.5,
                                       worldCenter + worldRange * 0.5,
                                       this.firstCanvas.width);
         return;
       }
 
@@ skipping 33 matching lines @@
 
       var e = new cr.Event('selectionChanging');
       e.loWX = loWX;
       e.hiWX = hiWX;
       this.dispatchEvent(e);
     },
 
     onGridToggle_: function(left) {
       var tb;
       if (left)
-        tb = Math.min.apply(Math, this.selection_.map(
-            function(x) { return x.slice.start; }));
+        tb = this.selection_.range.min;
       else
-        tb = Math.max.apply(Math, this.selection_.map(
-            function(x) { return x.slice.end; }));
+        tb = this.selection_.range.max;
 
       // 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) {
@@ skipping 52 matching lines @@
         var hiX = Math.max(eDown.clientX, e.clientX);
         var loY = Math.min(eDown.clientY, e.clientY);
         var hiY = Math.max(eDown.clientY, e.clientY);
 
         // Convert to worldspace.
         var canv = this.firstCanvas;
         var loWX = this.viewport_.xViewToWorld(loX - canv.offsetLeft);
         var hiWX = this.viewport_.xViewToWorld(hiX - canv.offsetLeft);
 
         // Figure out what has been hit.
-        (function() {
-          var selection = [];
-          function addHit(type, track, slice) {
-            selection.push({track: track, slice: slice});
+        var selection = new TimelineSelection();
+        for (i = 0; i < this.tracks_.children.length; i++) {
+          var track = this.tracks_.children[i];
+
+          // Only check tracks that insersect the rect.
+          var trackClientRect = track.getBoundingClientRect();
+          var a = Math.max(loY, trackClientRect.top);
+          var b = Math.min(hiY, trackClientRect.bottom);
+          if (a <= b) {
+            track.addIntersectingItemsInRangeToSelection(
+              loWX, hiWX, loY, hiY, selection);
           }
-          for (i = 0; i < this.tracks_.children.length; i++) {
-            var track = this.tracks_.children[i];
-
-            // Only check tracks that insersect the rect.
-            var trackClientRect = track.getBoundingClientRect();
-            var a = Math.max(loY, trackClientRect.top);
-            var b = Math.min(hiY, trackClientRect.bottom);
-            if (a <= b) {
-              track.pickRange(loWX, hiWX, loY, hiY, addHit);
-            }
-          }
-          // Activate the new selection.
-          this.selection = selection;
-        }).call(this);
+        }
+        // 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,
+    TimelineSelectionSliceHit: TimelineSelectionSliceHit,
+    TimelineSelectionCounterSampleHit: TimelineSelectionCounterSampleHit,
+    TimelineSelection: TimelineSelection,
     TimelineViewport: TimelineViewport
   };
 });