- Revision
- 107932
- Author
- yu...@chromium.org
- Date
- 2012-02-16 07:32:21 -0800 (Thu, 16 Feb 2012)
Log Message
Web Inspector: show memory counter graphics when switching to memory view
https://bugs.webkit.org/show_bug.cgi?id=78808
Switching to memory view in timeline will display memory counters. Counter
graphics know show fair data without approximations between sampling points.
Reviewed by Pavel Feldman.
* English.lproj/localizedStrings.js:
* inspector/front-end/MemoryStatistics.js:
(WebInspector.MemoryStatistics.prototype._calculateVisibleIndexes):
(WebInspector.MemoryStatistics.prototype._calculateXValues):
(WebInspector.MemoryStatistics.prototype._drawPolyline):
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel.prototype.get statusBarItems):
(WebInspector.TimelinePanel.prototype._createStatusbarButtons):
(WebInspector.TimelinePanel.prototype._timelinesOverviewItemSelected):
(WebInspector.TimelinePanel.prototype._memoryOverviewItemSelected):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (107931 => 107932)
--- trunk/Source/WebCore/ChangeLog 2012-02-16 15:16:44 UTC (rev 107931)
+++ trunk/Source/WebCore/ChangeLog 2012-02-16 15:32:21 UTC (rev 107932)
@@ -1,3 +1,24 @@
+2012-02-16 Yury Semikhatsky <yu...@chromium.org>
+
+ Web Inspector: show memory counter graphics when switching to memory view
+ https://bugs.webkit.org/show_bug.cgi?id=78808
+
+ Switching to memory view in timeline will display memory counters. Counter
+ graphics know show fair data without approximations between sampling points.
+
+ Reviewed by Pavel Feldman.
+
+ * English.lproj/localizedStrings.js:
+ * inspector/front-end/MemoryStatistics.js:
+ (WebInspector.MemoryStatistics.prototype._calculateVisibleIndexes):
+ (WebInspector.MemoryStatistics.prototype._calculateXValues):
+ (WebInspector.MemoryStatistics.prototype._drawPolyline):
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel.prototype.get statusBarItems):
+ (WebInspector.TimelinePanel.prototype._createStatusbarButtons):
+ (WebInspector.TimelinePanel.prototype._timelinesOverviewItemSelected):
+ (WebInspector.TimelinePanel.prototype._memoryOverviewItemSelected):
+
2012-02-16 Ilya Tikhonovsky <loi...@chromium.org>
Web Inspector: [heap snapshot] It could be useful to have access to the selected heap object from the console.
Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js
(Binary files differ)
Modified: trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js (107931 => 107932)
--- trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js 2012-02-16 15:16:44 UTC (rev 107931)
+++ trunk/Source/WebCore/inspector/front-end/MemoryStatistics.js 2012-02-16 15:32:21 UTC (rev 107932)
@@ -184,18 +184,27 @@
var calculator = this._timelinePanel.calculator;
var start = calculator.minimumBoundary * 1000;
var end = calculator.maximumBoundary * 1000;
- var firstIndex;
- var lastIndex;
+ var firstIndex = 0;
+ var lastIndex = this._counters.length - 1;
for (var i = 0; i < this._counters.length; i++) {
var time = this._counters[i].time;
- if (start <= time && time <= end) {
- if (firstIndex === undefined)
- firstIndex = i;
+ if (time <= start) {
+ firstIndex = i;
+ } else {
+ if (end < time)
+ break;
lastIndex = i;
}
}
+ // Maximum index of element whose time <= start.
this._minimumIndex = firstIndex;
+
+ // Maximum index of element whose time <= end.
this._maximumIndex = lastIndex;
+
+ // Current window bounds.
+ this._minTime = start;
+ this._maxTime = end;
},
_onMouseOver: function(event)
@@ -257,15 +266,12 @@
if (!this._counters.length)
return;
- var minTime = this._counters[this._minimumIndex].time;
- var maxTime = this._counters[this._maximumIndex].time;
-
var width = this._canvas.width;
- var xFactor = width / (maxTime - minTime);
+ var xFactor = width / (this._maxTime - this._minTime);
this._counters[this._minimumIndex].x = 0;
for (var i = this._minimumIndex + 1; i < this._maximumIndex; i++)
- this._counters[i].x = xFactor * (this._counters[i].time - minTime);
+ this._counters[i].x = xFactor * (this._counters[i].time - this._minTime);
this._counters[this._maximumIndex].x = width;
},
@@ -301,16 +307,19 @@
var originalValue = valueGetter(this._counters[this._minimumIndex]);
- var yFactor = height / (2 * Math.max(maxValue - originalValue, originalValue - minValue));
+ var maxYRange = Math.max(maxValue - originalValue, originalValue - minValue);
+ var yFactor = maxYRange ? height / (2 * maxYRange) : 0.5;
ctx.beginPath();
- ctx.moveTo(0, originY + height / 2);
+ var currentY = originY + height / 2;
+ ctx.moveTo(0, currentY);
for (var i = this._minimumIndex; i <= this._maximumIndex; i++) {
var x = this._counters[i].x;
- var y = originY + (height / 2 - (valueGetter(this._counters[i])- originalValue) * yFactor);
- ctx.lineTo(x, y);
+ ctx.lineTo(x, currentY);
+ currentY = originY + (height / 2 - (valueGetter(this._counters[i])- originalValue) * yFactor);
+ ctx.lineTo(x, currentY);
}
- ctx.lineTo(width, originY + (height / 2 - (valueGetter(this._counters[this._maximumIndex]) - originalValue) * yFactor));
+ ctx.lineTo(width, currentY);
ctx.lineWidth = 1;
ctx.strokeStyle = color;
ctx.stroke();
Modified: trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js (107931 => 107932)
--- trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-02-16 15:16:44 UTC (rev 107931)
+++ trunk/Source/WebCore/inspector/front-end/TimelineOverviewPane.js 2012-02-16 15:32:21 UTC (rev 107932)
@@ -50,11 +50,11 @@
var timelinesOverviewItem = new WebInspector.SidebarTreeElement("resources-time-graph-sidebar-item", WebInspector.UIString("Timelines"));
topPaneSidebarTree.appendChild(timelinesOverviewItem);
timelinesOverviewItem.revealAndSelect(false);
- timelinesOverviewItem._onselect_ = this.showTimelines.bind(this);
+ timelinesOverviewItem._onselect_ = this._showTimelines.bind(this);
var memoryOverviewItem = new WebInspector.SidebarTreeElement("resources-size-graph-sidebar-item", WebInspector.UIString("Memory"));
topPaneSidebarTree.appendChild(memoryOverviewItem);
- memoryOverviewItem._onselect_ = this.showMemoryGraph.bind(this);
+ memoryOverviewItem._onselect_ = this._showMemoryGraph.bind(this);
this._overviewGrid = new WebInspector.TimelineGrid();
this._overviewGrid.element.id = "timeline-overview-grid";
@@ -93,16 +93,27 @@
WebInspector.TimelineOverviewPane.ResizerOffset = 3.5; // half pixel because offset values are not rounded but ceiled
+WebInspector.TimelineOverviewPane.Mode = {
+ Events: "Timeline",
+ Memory: "Memory"
+};
+
+WebInspector.TimelineOverviewPane.Events = {
+ ModeChanged: "ModeChanged"
+};
+
WebInspector.TimelineOverviewPane.prototype = {
- showTimelines: function() {
+ _showTimelines: function() {
this._heapGraph.hide();
this._overviewGrid.itemsGraphsElement.removeStyleClass("hidden");
+ this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.ModeChanged, WebInspector.TimelineOverviewPane.Mode.Events);
},
- showMemoryGraph: function() {
+ _showMemoryGraph: function() {
this._heapGraph.show();
this._heapGraph.update(this._records);
this._overviewGrid.itemsGraphsElement.addStyleClass("hidden");
+ this.dispatchEventToListeners(WebInspector.TimelineOverviewPane.Events.ModeChanged, WebInspector.TimelineOverviewPane.Mode.Memory);
},
_onCategoryVisibilityChanged: function(event)
@@ -214,6 +225,8 @@
}
}
+WebInspector.TimelineOverviewPane.prototype.__proto__ = WebInspector.Object.prototype;
+
/**
* @constructor
* @param {Element} parentElement
Modified: trunk/Source/WebCore/inspector/front-end/TimelinePanel.js (107931 => 107932)
--- trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-02-16 15:16:44 UTC (rev 107931)
+++ trunk/Source/WebCore/inspector/front-end/TimelinePanel.js 2012-02-16 15:32:21 UTC (rev 107932)
@@ -65,6 +65,7 @@
this._timelineMemorySplitter.addEventListener("mousedown", this._startSplitterDragging.bind(this), false);
this._timelineMemorySplitter.addStyleClass("hidden");
this._memoryStatistics = new WebInspector.MemoryStatistics(this, this.splitView.preferredSidebarWidth());
+ this._overviewPane.addEventListener(WebInspector.TimelineOverviewPane.Events.ModeChanged, this._timelinesOverviewModeChanged, this);
}
var itemsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RECORDS"), {}, true);
@@ -202,11 +203,7 @@
get statusBarItems()
{
- var result = [this.toggleFilterButton.element, this.toggleTimelineButton.element, this.garbageCollectButton.element, this.clearButton.element];
- if (this._memoryStatisticsButton)
- result.push(this._memoryStatisticsButton.element);
- result.push(this.statusBarFilters);
- return result;
+ return [this.toggleFilterButton.element, this.toggleTimelineButton.element, this.garbageCollectButton.element, this.clearButton.element, this.statusBarFilters];
},
get defaultFocusedElement()
@@ -264,11 +261,6 @@
this.garbageCollectButton = new WebInspector.StatusBarButton(WebInspector.UIString("Collect Garbage"), "garbage-collect-status-bar-item");
this.garbageCollectButton.addEventListener("click", this._garbageCollectButtonClicked, this);
- if (WebInspector.experimentsSettings.showMemoryCounters.isEnabled()) {
- this._memoryStatisticsButton = new WebInspector.StatusBarButton(WebInspector.UIString("Toggle DOM counters graphs"), "dom-counters-status-bar-item");
- this._memoryStatisticsButton.addEventListener("click", this._toggleMemoryStatistics, this);
- }
-
this.recordsCounter = document.createElement("span");
this.recordsCounter.className = "timeline-records-counter";
@@ -412,6 +404,24 @@
return eventDividerPadding;
},
+ _timelinesOverviewModeChanged: function(event)
+ {
+ if (!this._memoryStatistics)
+ return;
+ if (event.data ="" WebInspector.TimelineOverviewPane.Mode.Events && this._memoryStatistics.visible()) {
+ this._timelineMemorySplitter.addStyleClass("hidden");
+ this._memoryStatistics.hide();
+ this.splitView.element.style.height = "auto";
+ this.splitView.element.style.bottom = "0";
+ this.onResize();
+ } else {
+ this._timelineMemorySplitter.removeStyleClass("hidden");
+ this._memoryStatistics.show();
+ this.splitView.element.style.bottom = "auto";
+ this._setSplitterPosition(600);
+ }
+ },
+
_toggleTimelineButtonClicked: function()
{
if (this.toggleTimelineButton.toggled)
@@ -436,22 +446,6 @@
ProfilerAgent.collectGarbage();
},
- _toggleMemoryStatistics: function()
- {
- if (this._memoryStatistics.visible()) {
- this._timelineMemorySplitter.addStyleClass("hidden");
- this._memoryStatistics.hide();
- this.splitView.element.style.height = "auto";
- this.splitView.element.style.bottom = "0";
- this.onResize();
- } else {
- this._timelineMemorySplitter.removeStyleClass("hidden");
- this._memoryStatistics.show();
- this.splitView.element.style.bottom = "auto";
- this._setSplitterPosition(600);
- }
- },
-
_onTimelineEventRecorded: function(event)
{
this._innerAddRecordToTimeline(event.data, this._rootRecord);
