- Revision
- 108989
- Author
- yu...@chromium.org
- Date
- 2012-02-27 06:56:52 -0800 (Mon, 27 Feb 2012)
Log Message
Web Inspector: reveal corresponding timeline record when user clicks on memory graph
https://bugs.webkit.org/show_bug.cgi?id=79669
When user clicks on DOM counter graph corresponding timeline record is
revealed in timelime grid and all its ancestors are expanded.
Reviewed by Pavel Feldman.
* inspector/front-end/MemoryStatistics.js:
(WebInspector.MemoryStatistics.prototype._onClick):
* inspector/front-end/TimelineOverviewPane.js:
(WebInspector.TimelineOverviewPane.prototype.update):
(WebInspector.HeapGraph.prototype.update):
(WebInspector.HeapGraph.prototype._clear):
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel.prototype.revealRecordAt.recordFinder):
(WebInspector.TimelinePanel.prototype.revealRecordAt):
(WebInspector.TimelinePanel.prototype._refreshRecords):
(WebInspector.TimelinePanel.forAllRecords):
(WebInspector.TimelinePanel.FormattedRecord.prototype.containsTime):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (108988 => 108989)
--- trunk/Source/WebCore/ChangeLog 2012-02-27 14:43:34 UTC (rev 108988)
+++ trunk/Source/WebCore/ChangeLog 2012-02-27 14:56:52 UTC (rev 108989)
@@ -1,3 +1,26 @@
+2012-02-27 Yury Semikhatsky <yu...@chromium.org>
+
+ Web Inspector: reveal corresponding timeline record when user clicks on memory graph
+ https://bugs.webkit.org/show_bug.cgi?id=79669
+
+ When user clicks on DOM counter graph corresponding timeline record is
+ revealed in timelime grid and all its ancestors are expanded.
+
+ Reviewed by Pavel Feldman.
+
+ * inspector/front-end/MemoryStatistics.js:
+ (WebInspector.MemoryStatistics.prototype._onClick):
+ * inspector/front-end/TimelineOverviewPane.js:
+ (WebInspector.TimelineOverviewPane.prototype.update):
+ (WebInspector.HeapGraph.prototype.update):
+ (WebInspector.HeapGraph.prototype._clear):
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel.prototype.revealRecordAt.recordFinder):
+ (WebInspector.TimelinePanel.prototype.revealRecordAt):
+ (WebInspector.TimelinePanel.prototype._refreshRecords):
+ (WebInspector.TimelinePanel.forAllRecords):
+ (WebInspector.TimelinePanel.FormattedRecord.prototype.containsTime):
+
2012-02-27 Ilya Tikhonovsky <loi...@chromium.org>
Unreviewed single line fix for r108983.
Modified: trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js (108988 => 108989)
--- trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js 2012-02-27 14:43:34 UTC (rev 108988)
+++ trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js 2012-02-27 14:56:52 UTC (rev 108989)
@@ -52,9 +52,10 @@
this._canvas.id = "memory-counters-graph";
this._lastMarkerXPosition = 0;
- this._canvasContainer.addEventListener("mouseover", this._onMouseOver.bind(this), true);
- this._canvasContainer.addEventListener("mousemove", this._onMouseMove.bind(this), true);
- this._canvasContainer.addEventListener("mouseout", this._onMouseOut.bind(this), true);
+ this._canvas.addEventListener("mouseover", this._onMouseOver.bind(this), true);
+ this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), true);
+ this._canvas.addEventListener("mouseout", this._onMouseOut.bind(this), true);
+ this._canvas.addEventListener("click", this._onClick.bind(this), true);
// Populate sidebar
this._memorySplitView.sidebarElement.createChild("div", "sidebar-tree sidebar-tree-section").textContent = WebInspector.UIString("COUNTERS");
@@ -278,6 +279,14 @@
this._maxTime = end;
},
+ _onClick: function(event)
+ {
+ var x = event.x - event.target.offsetParent.offsetLeft
+ var i = this._recordIndexAt(x);
+ var counter = this._counters[i];
+ this._timelinePanel.revealRecordAt(counter.time / 1000);
+ },
+
_onMouseOut: function(event)
{
delete this._markerXPosition;
Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (108988 => 108989)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-02-27 14:43:34 UTC (rev 108988)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-02-27 14:56:52 UTC (rev 108989)
@@ -161,25 +161,6 @@
this._categoryGraphs[category.name].dimmed = category.hidden;
},
- _forAllRecords: function(recordsArray, callback)
- {
- if (!recordsArray)
- return;
- var stack = [{array: recordsArray, index: 0}];
- while (stack.length) {
- var entry = stack[stack.length - 1];
- var records = entry.array;
- if (entry.index < records.length) {
- var record = records[entry.index];
- callback(record);
- if (record.children)
- stack.push({array: record.children, index: 0});
- ++entry.index;
- } else
- stack.pop();
- }
- },
-
update: function(records, showShortEvents)
{
this._records = records;
@@ -193,7 +174,7 @@
// Create sparse arrays with 101 cells each to fill with chunks for a given category.
this._overviewCalculator.reset();
- this._forAllRecords(records, this._overviewCalculator.updateBoundaries.bind(this._overviewCalculator));
+ WebInspector.TimelinePanel.forAllRecords(records, this._overviewCalculator.updateBoundaries.bind(this._overviewCalculator));
function markPercentagesForRecord(record)
{
@@ -206,7 +187,7 @@
for (var j = Math.round(percentages.start); j <= end; ++j)
timelines[categoryName][j] = true;
}
- this._forAllRecords(records, markPercentagesForRecord.bind(this));
+ WebInspector.TimelinePanel.forAllRecords(records, markPercentagesForRecord.bind(this));
// Convert sparse arrays to continuous segments, render graphs for each.
for (var category in this._presentationModel.categories) {
@@ -662,7 +643,7 @@
var minUsedHeapSize = 100000000000;
var minTime;
var maxTime;
- this._forAllRecords(records, function(r) {
+ WebInspector.TimelinePanel.forAllRecords(records, function(r) {
maxUsedHeapSize = Math.max(maxUsedHeapSize, r.usedHeapSize || maxUsedHeapSize);
minUsedHeapSize = Math.min(minUsedHeapSize, r.usedHeapSize || minUsedHeapSize);
@@ -679,7 +660,7 @@
var yFactor = height / (maxUsedHeapSize - minUsedHeapSize);
var histogram = new Array(width);
- this._forAllRecords(records, function(r) {
+ WebInspector.TimelinePanel.forAllRecords(records, function(r) {
if (!r.usedHeapSize)
return;
var x = Math.round((r.endTime - minTime) * xFactor);
@@ -728,8 +709,6 @@
ctx.fillStyle = "rgba(255,255,255,0.8)";
ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);
},
-
- _forAllRecords: WebInspector.TimelineOverviewPane.prototype._forAllRecords
}
/**
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (108988 => 108989)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-02-27 14:43:34 UTC (rev 108988)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-02-27 14:56:52 UTC (rev 108989)
@@ -767,10 +767,40 @@
return recordsInWindow;
},
- _refreshRecords: function(updateBoundaries)
+ revealRecordAt: function(time)
{
+ if (this._startAtZero)
+ return;
+ var filter = new WebInspector.TimelineRecordFilter(this._calculator, this._showShortEvents);
+ var recordToReveal;
+ function recordFinder(record)
+ {
+ if (filter.accept(record) && record.containsTime(time)) {
+ recordToReveal = record;
+ return true;
+ }
+ return false;
+ }
+ WebInspector.TimelinePanel.forAllRecords(this._rootRecord.children, recordFinder);
+
+ // The record ends before the window left bound so scroll to the top.
+ if (!recordToReveal) {
+ this._containerElement.scrollTop = 0;
+ return;
+ }
+
+ // Expand all ancestors.
+ for (var parent = recordToReveal.parent; parent !== this._rootRecord; parent = parent.parent)
+ parent.collapsed = false;
var recordsInWindow = this._filterRecords();
+ var index = recordsInWindow.indexOf(recordToReveal);
+ this._containerElement.scrollTop = index * WebInspector.TimelinePanel.rowHeight;
+ },
+ _refreshRecords: function(updateBoundaries, recordToReveal)
+ {
+ var recordsInWindow = this._filterRecords();
+
// Calculate the visible area.
this._scrollTop = this._containerElement.scrollTop;
var visibleTop = this._scrollTop;
@@ -1160,6 +1190,26 @@
}
}
+WebInspector.TimelinePanel.forAllRecords = function(recordsArray, callback)
+{
+ if (!recordsArray)
+ return;
+ var stack = [{array: recordsArray, index: 0}];
+ while (stack.length) {
+ var entry = stack[stack.length - 1];
+ var records = entry.array;
+ if (entry.index < records.length) {
+ var record = records[entry.index];
+ if (callback(record))
+ return;
+ if (record.children)
+ stack.push({array: record.children, index: 0});
+ ++entry.index;
+ } else
+ stack.pop();
+ }
+}
+
/**
* @constructor
*/
@@ -1244,6 +1294,11 @@
return this._children;
},
+ containsTime: function(time)
+ {
+ return this.startTime <= time && time <= this.endTime;
+ },
+
_generateAggregatedInfo: function()
{
var cell = document.createElement("span");
