DevTools: implement search for CPUProfiler FlameChart view

Source/devtools/front_end/components/FlameChart.js

 /**
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 422 matching lines @@
     _cancelAnimation: function()
     {
         if (this._cancelWindowTimesAnimation) {
             this._timeWindowLeft = this._pendingAnimationTimeLeft;
             this._timeWindowRight = this._pendingAnimationTimeRight;
             this._cancelWindowTimesAnimation();
             delete this._cancelWindowTimesAnimation;
         }
     },
 
+    _revealEntry: function(entryIndex)
+    {
+        var timelineData = this._timelineData();

[yurys, 2014/11/06 11:39:58]

Should we check for null data like in some other places?

[loislo, 2014/11/09 15:32:57]

Done.

+        var entryStartTime = timelineData.entryStartTimes[entryIndex];
+        var entryTotalTime = timelineData.entryTotalTimes[entryIndex];
+        var entryEndTime = entryStartTime + entryTotalTime;
+        var minEntryTimeWindow = Math.min(entryTotalTime, this._timeWindowRight - this._timeWindowLeft);
+
+        var y = this._levelToHeight(timelineData.entryLevels[entryIndex]);
+        if (y < this._vScrollElement.scrollTop)
+            this._vScrollElement.scrollTop = y;

[yurys, 2014/11/06 11:39:58]

Did you consider scrolling it so that selected bar would be close to the center
rather than top of the viewport? Would that make sense?

+        else if (y > this._vScrollElement.scrollTop + this._offsetHeight + this._barHeightDelta)
+            this._vScrollElement.scrollTop = y - this._offsetHeight - this._barHeightDelta;
+
+        if (this._timeWindowLeft > entryEndTime) {
+            var delta = this._timeWindowLeft - entryEndTime + minEntryTimeWindow;

[yurys, 2014/11/06 11:39:58]

How about  delta = this._timeWindowLeft - entryStartTime so that leftmost part
of the selected record is always visible. Otherwise if I'm reading the code
correctly you may show right part of the record and cut the label.

[loislo, 2014/11/09 15:32:57]

The idea is to do the minimal scrolling but show all the element if it is
possible. If it is not then we will show the rightmost part of the element here.

As far as I can remember if we moves the visible window to the right side of the
chart the label on the element will stick to the leftmost visible point of the
element.

+            this._flameChartDelegate.requestWindowTimes(this._timeWindowLeft - delta, this._timeWindowRight - delta);
+        } else if (this._timeWindowRight < entryStartTime) {
+            var delta = entryStartTime - this._timeWindowRight + minEntryTimeWindow;

[yurys, 2014/11/06 11:39:58]

Maybe delta = entryStartTime - this._timeWindowLeft?

[loislo, 2014/11/09 15:32:57]

ditto

+            this._flameChartDelegate.requestWindowTimes(this._timeWindowLeft + delta, this._timeWindowRight + delta);
+        }
+    },
+
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     setWindowTimes: function(startTime, endTime)
     {
         if (this._muteAnimation || this._timeWindowLeft === 0 || this._timeWindowRight === Infinity || (startTime === 0 && endTime === Infinity)) {
             // Initial setup.
             this._timeWindowLeft = startTime;
             this._timeWindowRight = endTime;
@@ skipping 633 matching lines @@
         this._rawTimelineData = timelineData;
         this._rawTimelineDataLength = timelineData.entryStartTimes.length;
     },
 
     /**
      * @param {number} entryIndex
      */
     setSelectedEntry: function(entryIndex)
     {
         this._selectedEntryIndex = entryIndex;
+        this._revealEntry(entryIndex);
         this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
     },
 
     _updateElementPosition: function(element, entryIndex)
     {
         if (element.parentElement)
             element.remove();
         if (entryIndex === -1)
             return;
         var timeRange = this._dataProvider.highlightTimeRange(entryIndex);
@@ skipping 161 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }