Web Inspector: Always show percents together with counters in heap inspector.

https://bugs.webkit.org/show_bug.cgi?id=77434

Source/WebCore:

Patch by Alexei Filippov <alexeif@chromium.org> on 2012-02-02
Reviewed by Pavel Feldman.

* inspector/front-end/DetailedHeapshotGridNodes.js:
(WebInspector.HeapSnapshotGridNode.prototype._toPercentString):
(WebInspector.HeapSnapshotGridNode.prototype._createValueCell):
(WebInspector.HeapSnapshotGenericObjectNode.prototype.createCell):
(WebInspector.HeapSnapshotGenericObjectNode.prototype.get data):
(WebInspector.HeapSnapshotConstructorNode.prototype.createCell):
(WebInspector.HeapSnapshotConstructorNode.prototype.get data):
(WebInspector.HeapSnapshotDiffNode.prototype.get data):
* inspector/front-end/DetailedHeapshotView.js:
(WebInspector.HeapSnapshotContainmentDataGrid):
(WebInspector.HeapSnapshotConstructorsDataGrid):
(WebInspector.HeapSnapshotDiffDataGrid):
(WebInspector.HeapSnapshotDominatorsDataGrid):
(WebInspector.DetailedHeapshotView.prototype._mouseDownInContentsGrid):
(WebInspector.DetailedHeapshotView.prototype.get _isShowingAsPercent):
(WebInspector.DetailedHeapshotView.prototype._percentClicked):
* inspector/front-end/heapProfiler.css:
(.detailed-heapshot-view .data-grid span.percent-column):

LayoutTests:

Added parseInt conversion as counters are now strings not ints.

Patch by Alexei Filippov <alexeif@chromium.org> on 2012-02-02
Reviewed by Pavel Feldman.

* inspector/profiler/detailed-heapshots-comparison-show-all.html:
* inspector/profiler/detailed-heapshots-comparison-show-next.html:
* inspector/profiler/detailed-heapshots-summary-show-all.html:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@106633 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 335d75e4
2012-02-02 Alexei Filippov <alexeif@chromium.org>
Web Inspector: Always show percents together with counters in heap inspector.
https://bugs.webkit.org/show_bug.cgi?id=77434
Added parseInt conversion as counters are now strings not ints.
Reviewed by Pavel Feldman.
* inspector/profiler/detailed-heapshots-comparison-show-all.html:
* inspector/profiler/detailed-heapshots-comparison-show-next.html:
* inspector/profiler/detailed-heapshots-summary-show-all.html:
2012-02-02 Matt Falkenhagen <falken@chromium.org>
Use content-language from http-equiv to set document locale and font
......@@ -47,7 +47,7 @@ function test()
for (var i = 0; i < words.length; ++i) {
var maybeNumber = parseInt(words[i], 10);
if (!isNaN(maybeNumber))
InspectorTest.assertEquals(countA, maybeNumber, buttonsNode.showAll.textContent);
InspectorTest.assertEquals(countA, words[i], buttonsNode.showAll.textContent);
}
InspectorTest.clickShowMoreButton("showAll", buttonsNode, step4);
}
......@@ -56,7 +56,7 @@ function test()
function step4(row)
{
var rowsShown = InspectorTest.countDataRows(row, function(node) { return node.data.addedCount; });
InspectorTest.assertEquals(countA, rowsShown, "after showAll click 1");
InspectorTest.assertEquals(countA, rowsShown.toString(), "after showAll click 1");
countB = row.data["removedCount"];
InspectorTest.assertEquals(true, countB > 0, "countB > 0");
......@@ -66,7 +66,7 @@ function test()
for (var i = 0; i < words.length; ++i) {
var maybeNumber = parseInt(words[i], 10);
if (!isNaN(maybeNumber))
InspectorTest.assertEquals(countB, maybeNumber, buttonsNode.showAll.textContent);
InspectorTest.assertEquals(countB, words[i], buttonsNode.showAll.textContent);
}
InspectorTest.clickShowMoreButton("showAll", buttonsNode, step5);
}
......@@ -74,7 +74,7 @@ function test()
function step5(row)
{
var rowsShown = InspectorTest.countDataRows(row, function(node) { return node.data.removedCount; });
InspectorTest.assertEquals(countB, rowsShown, "after showAll click 2");
InspectorTest.assertEquals(countB, rowsShown.toString(), "after showAll click 2");
var buttonsNode = InspectorTest.findButtonsNode(row);
InspectorTest.assertEquals(false, !!buttonsNode, "buttons node found after all rows shown");
setTimeout(next, 0);
......
......@@ -38,7 +38,7 @@ function test()
function step3(row)
{
var expectedRowCountA = row.data["addedCount"];
var expectedRowCountA = parseInt(row.data["addedCount"]);
var rowsShown = InspectorTest.countDataRows(row, function(node) { return node.data.addedCount; });
InspectorTest.assertEquals(true, rowsShown <= expectedRowCountA, "shown more instances than created: " + rowsShown + " > " + expectedRowCountA);
if (rowsShown < expectedRowCountA) {
......@@ -51,7 +51,7 @@ function test()
function step4(row)
{
var expectedRowCountB = row.data["removedCount"];
var expectedRowCountB = parseInt(row.data["removedCount"]);
var rowsShown = InspectorTest.countDataRows(row, function(node) { return node.data.removedCount; });
InspectorTest.assertEquals(true, rowsShown <= expectedRowCountB, "shown more instances than created: " + rowsShown + " > " + expectedRowCountB);
if (rowsShown < expectedRowCountB) {
......
......@@ -32,7 +32,7 @@ function test()
function step3(row)
{
var count = row.data["count"];
InspectorTest.assertEquals(instanceCount, count);
InspectorTest.assertEquals(instanceCount.toString(), count);
var buttonsNode = InspectorTest.findButtonsNode(row);
InspectorTest.assertEquals(true, !!buttonsNode, "buttons node");
var words = buttonsNode.showAll.textContent.split(" ");
......
2012-02-02 Alexei Filippov <alexeif@chromium.org>
Web Inspector: Always show percents together with counters in heap inspector.
https://bugs.webkit.org/show_bug.cgi?id=77434
Reviewed by Pavel Feldman.
* inspector/front-end/DetailedHeapshotGridNodes.js:
(WebInspector.HeapSnapshotGridNode.prototype._toPercentString):
(WebInspector.HeapSnapshotGridNode.prototype._createValueCell):
(WebInspector.HeapSnapshotGenericObjectNode.prototype.createCell):
(WebInspector.HeapSnapshotGenericObjectNode.prototype.get data):
(WebInspector.HeapSnapshotConstructorNode.prototype.createCell):
(WebInspector.HeapSnapshotConstructorNode.prototype.get data):
(WebInspector.HeapSnapshotDiffNode.prototype.get data):
* inspector/front-end/DetailedHeapshotView.js:
(WebInspector.HeapSnapshotContainmentDataGrid):
(WebInspector.HeapSnapshotConstructorsDataGrid):
(WebInspector.HeapSnapshotDiffDataGrid):
(WebInspector.HeapSnapshotDominatorsDataGrid):
(WebInspector.DetailedHeapshotView.prototype._mouseDownInContentsGrid):
(WebInspector.DetailedHeapshotView.prototype.get _isShowingAsPercent):
(WebInspector.DetailedHeapshotView.prototype._percentClicked):
* inspector/front-end/heapProfiler.css:
(.detailed-heapshot-view .data-grid span.percent-column):
2012-02-02 Matt Falkenhagen <falken@chromium.org>
Use content-language from http-equiv to set document locale and font
......@@ -60,6 +60,30 @@ WebInspector.HeapSnapshotGridNode.prototype = {
{
},
_toPercentString: function(num)
{
return num.toFixed(2) + "%";
},
_createValueCell: function(columnIdentifier)
{
var cell = document.createElement("td");
cell.className = columnIdentifier + "-column";
var div = document.createElement("div");
var valueSpan = document.createElement("span");
valueSpan.textContent = this.data[columnIdentifier];
var percentColumn = columnIdentifier + "-percent";
if (percentColumn in this.data) {
var percentSpan = document.createElement("span");
percentSpan.className = "percent-column";
percentSpan.textContent = this.data[percentColumn];
div.appendChild(percentSpan);
}
div.appendChild(valueSpan);
cell.appendChild(div);
return cell;
},
_populate: function(event)
{
this.removeEventListener("populate", this._populate, this);
......@@ -195,7 +219,7 @@ WebInspector.HeapSnapshotGenericObjectNode = function(tree, node)
WebInspector.HeapSnapshotGenericObjectNode.prototype = {
createCell: function(columnIdentifier)
{
var cell = columnIdentifier !== "object" ? WebInspector.DataGridNode.prototype.createCell.call(this, columnIdentifier) : this._createObjectCell();
var cell = columnIdentifier !== "object" ? this._createValueCell(columnIdentifier) : this._createObjectCell();
if (this._searchMatched)
cell.addStyleClass("highlight");
return cell;
......@@ -268,8 +292,12 @@ WebInspector.HeapSnapshotGenericObjectNode.prototype = {
data["object"] = { valueStyle: valueStyle, value: value + ": @" + this.snapshotNodeId };
var view = this.dataGrid.snapshotView;
data["shallowSize"] = view.showShallowSizeAsPercent ? WebInspector.UIString("%.2f%%", this._shallowSizePercent) : Number.withThousandsSeparator(this._shallowSize);
data["retainedSize"] = view.showRetainedSizeAsPercent ? WebInspector.UIString("%.2f%%", this._retainedSizePercent) : Number.withThousandsSeparator(this._retainedSize);
data["shallowSize"] = Number.withThousandsSeparator(this._shallowSize);
data["retainedSize"] = Number.withThousandsSeparator(this._retainedSize);
if (view._showPercentage) {
data["shallowSize-percent"] = this._toPercentString(this._shallowSizePercent);
data["retainedSize-percent"] = this._toPercentString(this._retainedSizePercent);
}
return this._enhanceData ? this._enhanceData(data) : data;
},
......@@ -532,6 +560,14 @@ WebInspector.HeapSnapshotConstructorNode = function(tree, className, aggregate,
}
WebInspector.HeapSnapshotConstructorNode.prototype = {
createCell: function(columnIdentifier)
{
var cell = columnIdentifier !== "object" ? this._createValueCell(columnIdentifier) : WebInspector.HeapSnapshotGridNode.prototype.createCell.call(this, columnIdentifier);
if (this._searchMatched)
cell.addStyleClass("highlight");
return cell;
},
_createChildNode: function(item)
{
return new WebInspector.HeapSnapshotInstanceNode(this.dataGrid, null, this.dataGrid.snapshot, item);
......@@ -567,11 +603,15 @@ WebInspector.HeapSnapshotConstructorNode.prototype = {
get data()
{
var data = {object: this._name, count: this._count};
var data = {object: this._name};
var view = this.dataGrid.snapshotView;
data["count"] = view.showCountAsPercent ? WebInspector.UIString("%.2f%%", this._countPercent) : this._count;
data["shallowSize"] = view.showShallowSizeAsPercent ? WebInspector.UIString("%.2f%%", this._shallowSizePercent) : Number.withThousandsSeparator(this._shallowSize);
data["retainedSize"] = view.showRetainedSizeAsPercent ? "~" + WebInspector.UIString("%.2f%%", this._retainedSizePercent) : Number.withThousandsSeparator(this._retainedSize) + "+";
data["count"] = Number.withThousandsSeparator(this._count);
data["shallowSize"] = Number.withThousandsSeparator(this._shallowSize);
data["retainedSize"] = Number.withThousandsSeparator(this._retainedSize) + "+";
if (view._showPercentage) {
data["shallowSize-percent"] = this._toPercentString(this._shallowSizePercent);
data["retainedSize-percent"] = this._toPercentString(this._retainedSizePercent);
}
return data;
},
......@@ -748,12 +788,12 @@ WebInspector.HeapSnapshotDiffNode.prototype = {
{
var data = {object: this._name};
data["addedCount"] = this._addedCount;
data["removedCount"] = this._removedCount;
data["countDelta"] = WebInspector.UIString("%s%d", this._signForDelta(this._countDelta), Math.abs(this._countDelta));
data["addedCount"] = Number.withThousandsSeparator(this._addedCount);
data["removedCount"] = Number.withThousandsSeparator(this._removedCount);
data["countDelta"] = this._signForDelta(this._countDelta) + Number.withThousandsSeparator(Math.abs(this._countDelta));
data["addedSize"] = Number.withThousandsSeparator(this._addedSize);
data["removedSize"] = Number.withThousandsSeparator(this._removedSize);
data["sizeDelta"] = WebInspector.UIString("%s%s", this._signForDelta(this._sizeDelta), Number.withThousandsSeparator(Math.abs(this._sizeDelta)));
data["sizeDelta"] = this._signForDelta(this._sizeDelta) + Number.withThousandsSeparator(Math.abs(this._sizeDelta));
return data;
}
......
......@@ -115,9 +115,9 @@ WebInspector.HeapSnapshotSortableDataGrid.prototype.__proto__ = WebInspector.Dat
WebInspector.HeapSnapshotContainmentDataGrid = function()
{
var columns = {
object: { title: WebInspector.UIString("Object"), disclosure: true, sortable: true, sort: "ascending" },
shallowSize: { title: WebInspector.UIString("Shallow Size"), width: "90px", sortable: true },
retainedSize: { title: WebInspector.UIString("Retained Size"), width: "90px", sortable: true }
object: { title: WebInspector.UIString("Object"), disclosure: true, sortable: true },
shallowSize: { title: WebInspector.UIString("Shallow Size"), width: "120px", sortable: true },
retainedSize: { title: WebInspector.UIString("Retained Size"), width: "120px", sortable: true, sort: "descending" }
};
WebInspector.HeapSnapshotSortableDataGrid.call(this, columns);
}
......@@ -200,9 +200,9 @@ WebInspector.HeapSnapshotConstructorsDataGrid = function()
{
var columns = {
object: { title: WebInspector.UIString("Constructor"), disclosure: true, sortable: true },
count: { title: WebInspector.UIString("#"), width: "45px", sortable: true },
shallowSize: { title: WebInspector.UIString("Shallow Size"), width: "90px", sortable: true },
retainedSize: { title: WebInspector.UIString("Retained Size"), width: "90px", sort: "descending", sortable: true }
count: { title: WebInspector.UIString("Objects Count"), width: "90px", sortable: true },
shallowSize: { title: WebInspector.UIString("Shallow Size"), width: "120px", sortable: true },
retainedSize: { title: WebInspector.UIString("Retained Size"), width: "120px", sort: "descending", sortable: true }
};
WebInspector.HeapSnapshotSortableDataGrid.call(this, columns);
this._filterProfileIndex = -1;
......@@ -291,13 +291,12 @@ WebInspector.HeapSnapshotDiffDataGrid = function()
{
var columns = {
object: { title: WebInspector.UIString("Constructor"), disclosure: true, sortable: true },
addedCount: { title: WebInspector.UIString("# New"), width: "72px", sortable: true, sort: "descending" },
addedCount: { title: WebInspector.UIString("# New"), width: "72px", sortable: true },
removedCount: { title: WebInspector.UIString("# Deleted"), width: "72px", sortable: true },
// \u0394 is a Greek delta letter.
countDelta: { title: "\u0394", width: "40px", sortable: true },
addedSize: { title: WebInspector.UIString("Alloc. Size"), width: "72px", sortable: true },
countDelta: { title: "# Delta", width: "64px", sortable: true },
addedSize: { title: WebInspector.UIString("Alloc. Size"), width: "72px", sortable: true, sort: "descending" },
removedSize: { title: WebInspector.UIString("Freed Size"), width: "72px", sortable: true },
sizeDelta: { title: "\u0394", width: "72px", sortable: true }
sizeDelta: { title: "Size Delta", width: "72px", sortable: true }
};
WebInspector.HeapSnapshotSortableDataGrid.call(this, columns);
}
......@@ -381,8 +380,8 @@ WebInspector.HeapSnapshotDominatorsDataGrid = function()
{
var columns = {
object: { title: WebInspector.UIString("Object"), disclosure: true, sortable: true },
shallowSize: { title: WebInspector.UIString("Shallow Size"), width: "90px", sortable: true },
retainedSize: { title: WebInspector.UIString("Retained Size"), width: "90px", sort: "descending", sortable: true }
shallowSize: { title: WebInspector.UIString("Shallow Size"), width: "120px", sortable: true },
retainedSize: { title: WebInspector.UIString("Retained Size"), width: "120px", sort: "descending", sortable: true }
};
WebInspector.HeapSnapshotSortableDataGrid.call(this, columns);
}
......@@ -418,9 +417,7 @@ WebInspector.DetailedHeapshotView = function(parent, profile)
this.parent.addEventListener("profile added", this._updateBaseOptions, this);
this.parent.addEventListener("profile added", this._updateFilterOptions, this);
this.showCountAsPercent = false;
this.showShallowSizeAsPercent = false;
this.showRetainedSizeAsPercent = false;
this._showPercentage = false;
this.viewsContainer = document.createElement("div");
this.viewsContainer.addStyleClass("views-container");
......@@ -602,7 +599,7 @@ WebInspector.DetailedHeapshotView.prototype = {
this._updateRetainmentViewHeight(height);
},
refreshShowAsPercents: function()
refreshShowPercents: function()
{
this._updatePercentButton();
this.refreshVisibleData();
......@@ -833,13 +830,7 @@ WebInspector.DetailedHeapshotView.prototype = {
if (!cell || (!cell.hasStyleClass("count-column") && !cell.hasStyleClass("shallowSize-column") && !cell.hasStyleClass("retainedSize-column")))
return;
if (cell.hasStyleClass("count-column"))
this.showCountAsPercent = !this.showCountAsPercent;
else if (cell.hasStyleClass("shallowSize-column"))
this.showShallowSizeAsPercent = !this.showShallowSizeAsPercent;
else if (cell.hasStyleClass("retainedSize-column"))
this.showRetainedSizeAsPercent = !this.showRetainedSizeAsPercent;
this.refreshShowAsPercents();
this.refreshShowPercents();
event.preventDefault();
event.stopPropagation();
......@@ -942,18 +933,10 @@ WebInspector.DetailedHeapshotView.prototype = {
return span;
},
get _isShowingAsPercent()
{
return this.showCountAsPercent && this.showShallowSizeAsPercent && this.showRetainedSizeAsPercent;
},
_percentClicked: function(event)
{
var currentState = this._isShowingAsPercent;
this.showCountAsPercent = !currentState;
this.showShallowSizeAsPercent = !currentState;
this.showRetainedSizeAsPercent = !currentState;
this.refreshShowAsPercents();
this._showPercentage = !this._showPercentage;
this.refreshShowPercents();
},
_showObjectPopover: function(element, showCallback)
......@@ -1103,11 +1086,11 @@ WebInspector.DetailedHeapshotView.prototype = {
_updatePercentButton: function()
{
if (this._isShowingAsPercent) {
this.percentButton.title = WebInspector.UIString("Show absolute counts and sizes.");
if (this._showPercentage) {
this.percentButton.title = WebInspector.UIString("Hide percentages of counts and sizes.");
this.percentButton.toggled = true;
} else {
this.percentButton.title = WebInspector.UIString("Show counts and sizes as percentages.");
this.percentButton.title = WebInspector.UIString("Show percentages of counts and sizes.");
this.percentButton.toggled = false;
}
}
......
......@@ -115,6 +115,12 @@ body.inactive .heap-snapshot-sidebar-tree-item.wait.selected .icon {
text-align: right;
}
.detailed-heapshot-view .data-grid span.percent-column {
color: grey;
width: 42px;
float: left;
}
.detailed-heapshot-view .console-formatted-object, .console-formatted-node {
display: inline;
position: static;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment