Modified: trunk/Source/WebInspectorUI/ChangeLog (188915 => 188916)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-25 17:36:41 UTC (rev 188915)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-25 17:55:07 UTC (rev 188916)
@@ -1,3 +1,35 @@
+2015-08-25 Matt Baker <mattba...@apple.com>
+
+ Web Inspector: Rendering Frames pie chart should use the needsLayout/updateLayout idiom
+ https://bugs.webkit.org/show_bug.cgi?id=148412
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/ChartDetailsSectionRow.js:
+ (WebInspector.ChartDetailsSectionRow):
+ (WebInspector.ChartDetailsSectionRow.prototype.set innerLabel):
+ (WebInspector.ChartDetailsSectionRow.prototype.set innerRadius):
+ Schedule a layout.
+ (WebInspector.ChartDetailsSectionRow.prototype.set data): Deleted.
+ Replaced by addItem, setItemValue, and clearItems.
+ (WebInspector.ChartDetailsSectionRow.prototype.addItem):
+ (WebInspector.ChartDetailsSectionRow.prototype.setItemValue):
+ (WebInspector.ChartDetailsSectionRow.prototype.clearItems):
+ Add/update data points and schedule a layout.
+ (WebInspector.ChartDetailsSectionRow.prototype._needsLayout):
+ (WebInspector.ChartDetailsSectionRow.prototype.updateLayout):
+ Update legend and draw pie chart.
+ (WebInspector.ChartDetailsSectionRow.prototype._createLegend): Deleted.
+ Refactored as _updateLegend.
+ (WebInspector.ChartDetailsSectionRow.prototype._refresh): Deleted.
+ Refactored as updateLayout.
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ (WebInspector.TimelineSidebarPanel):
+ Add chart data points once.
+ (WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart):
+ Update chart values.
+
2015-08-24 Brian Burg <bb...@apple.com>
Web Inspector: add protocol test for existing error handling performed by the backend
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js (188915 => 188916)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js 2015-08-25 17:36:41 UTC (rev 188915)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js 2015-08-25 17:55:07 UTC (rev 188916)
@@ -48,7 +48,7 @@
chartContentElement.appendChild(this._legendElement);
this._delegate = delegate;
- this._items = [];
+ this._items = new Map;
this._title = "";
this._innerLabel = "";
this._innerRadius = 0;
@@ -83,7 +83,7 @@
this._innerLabel = label;
- this._refresh();
+ this._needsLayout();
}
set innerRadius(radius)
@@ -93,7 +93,7 @@
this._innerRadius = radius;
- this._refresh();
+ this._needsLayout();
}
get total()
@@ -101,25 +101,50 @@
return this._total;
}
- set data(items)
+ addItem(id, label, value, color, checkbox, checked)
{
- if (!(items instanceof Array))
- items = [items];
+ console.assert(!this._items.has(id), "Already added item with id: " + id);
+ if (this._items.has(id))
+ return;
- items = items.filter(function(item) { return item.value >= 0; });
- if (!this._items.length && !items.length)
+ console.assert(value >= 0, "Value cannot be negative.");
+ if (value < 0)
return;
- if (this._items.length === items.length && this._items.every(function(item, index) { return JSON.stringify(item) === JSON.stringify(items[index]); }))
+ this._items.set(id, {label, value, color, checkbox, checked});
+ this._total += value;
+
+ this._needsLayout();
+ }
+
+ setItemValue(id, value)
+ {
+ let item = this._items.get(id);
+ console.assert(item, "Cannot set value for invalid item id: " + id);
+ if (!item)
return;
- this._items = items;
- this._total = this._items.reduce(function(previousValue, currentValue) { return previousValue + currentValue.value; }, 0);;
+ console.assert(value >= 0, "Value cannot be negative.");
+ if (value < 0)
+ return;
- this._createLegend();
- this._refresh();
+ if (item.value === value)
+ return;
+
+ this._total += value - item.value;
+ item.value = value;
+
+ this._needsLayout();
}
+ clearItems()
+ {
+ this._total = 0;
+ this._items.clear();
+
+ this._needsLayout();
+ }
+
// Private
_addCheckboxColorFilter(id, r, g, b)
@@ -165,15 +190,31 @@
styleSheet.insertRule(".details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]." + id + " { filter: grayscale(1) url(#" + id + ") }", 0);
}
- _createLegend()
+ _updateLegend()
{
- this._legendElement.removeChildren();
+ if (!this._items.size) {
+ this._legendElement.removeChildren();
+ return;
+ }
- for (let item of this._items) {
+ function formatItemValue(item)
+ {
+ if (this._delegate && typeof this._delegate.formatChartValue === "function")
+ return this._delegate.formatChartValue(item.value);
+ return item.value;
+ }
+
+ for (let [id, item] of this._items) {
+ if (item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol]) {
+ let valueElement = item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol];
+ valueElement.textContent = formatItemValue.call(this, item);
+ continue;
+ }
+
let labelElement = document.createElement("label");
let keyElement;
if (item.checkbox) {
- let className = item.id.toLowerCase();
+ let className = id.toLowerCase();
let rgb = item.color.substring(4, item.color.length - 1).replace(/ /g, "").split(",");
if (rgb[0] === rgb[1] && rgb[1] === rgb[2])
rgb[0] = rgb[1] = rgb[2] = Math.min(160, rgb[0]);
@@ -182,7 +223,7 @@
keyElement.type = "checkbox";
keyElement.classList.add(className);
keyElement.checked = item.checked;
- keyElement[WebInspector.ChartDetailsSectionRow.DataItemIdSymbol] = item.id;
+ keyElement[WebInspector.ChartDetailsSectionRow.DataItemIdSymbol] = id;
keyElement.addEventListener("change", this._legendItemCheckboxValueChanged.bind(this));
@@ -197,11 +238,9 @@
let valueElement = document.createElement("div");
valueElement.classList.add("value");
+ valueElement.textContent = formatItemValue.call(this, item);
- if (this._delegate && typeof this._delegate.formatChartValue === "function")
- valueElement.textContent = this._delegate.formatChartValue(item.value);
- else
- valueElement.textContent = item.value;
+ item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol] = valueElement;
let legendItemElement = document.createElement("div");
legendItemElement.classList.add("legend-item");
@@ -218,8 +257,23 @@
this.dispatchEventToListeners(WebInspector.ChartDetailsSectionRow.Event.LegendItemChecked, {id, checked: checkbox.checked});
}
- _refresh()
+ _needsLayout()
{
+ if (this._scheduledLayoutUpdateIdentifier)
+ return;
+
+ this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
+ }
+
+ updateLayout()
+ {
+ if (this._scheduledLayoutUpdateIdentifier) {
+ cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
+ this._scheduledLayoutUpdateIdentifier = undefined;
+ }
+
+ this._updateLegend();
+
var width = this._canvas.clientWidth * window.devicePixelRatio;
var height = this._canvas.clientHeight * window.devicePixelRatio;
this._canvas.width = width;
@@ -253,7 +307,7 @@
drawSlice(x, y, 0, 2.0 * Math.PI, "rgb(242, 242, 242)");
context.restore();
- for (var item of this._items) {
+ for (let [id, item] of this._items) {
if (item.value === 0)
continue;
endAngle += (item.value / this._total) * 2.0 * Math.PI;
@@ -272,6 +326,7 @@
};
WebInspector.ChartDetailsSectionRow.DataItemIdSymbol = Symbol("chart-details-section-row-data-item-id");
+WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol = Symbol("chart-details-section-row-legend-item-value-element");
WebInspector.ChartDetailsSectionRow.Event = {
LegendItemChecked: "chart-details-section-row-legend-item-checked"
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (188915 => 188916)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-08-25 17:36:41 UTC (rev 188915)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-08-25 17:55:07 UTC (rev 188916)
@@ -97,6 +97,14 @@
this._frameSelectionChartRow.innerRadius = 0.5;
this._frameSelectionChartRow.addEventListener(WebInspector.ChartDetailsSectionRow.Event.LegendItemChecked, this._frameSelectionLegendItemChecked, this);
+ for (let key in WebInspector.RenderingFrameTimelineRecord.TaskType) {
+ let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+ let label = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(taskType);
+ let color = this._chartColors.get(taskType);
+ let checkbox = taskType !== WebInspector.RenderingFrameTimelineRecord.TaskType.Other;
+ this._frameSelectionChartRow.addItem(taskType, label, 0, color, checkbox, true);
+ }
+
this._renderingFrameTaskFilter = new Set;
var chartGroup = new WebInspector.DetailsSectionGroup([this._frameSelectionChartRow]);
@@ -893,20 +901,13 @@
return selectedRecords;
}
- var chart = this._frameSelectionChartRow;
- var records = getSelectedRecords.call(this);
- var chartData = Object.keys(WebInspector.RenderingFrameTimelineRecord.TaskType).map(function(taskTypeKey) {
- let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[taskTypeKey];
- let label = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(taskType);
+ let records = getSelectedRecords.call(this);
+ for (let key in WebInspector.RenderingFrameTimelineRecord.TaskType) {
+ let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
let value = records.reduce(function(previousValue, currentValue) { return previousValue + currentValue.durationForTask(taskType); }, 0);
- let color = this._chartColors.get(taskType);
- let checkbox = taskType !== WebInspector.RenderingFrameTimelineRecord.TaskType.Other;
- let checked = checkbox && !this._renderingFrameTaskFilter.has(taskType);
- return {id: taskType, label, value, color, checkbox, checked};
- }, this);
+ this._frameSelectionChartRow.setItemValue(taskType, value);
+ }
- this._frameSelectionChartRow.data = ""
-
if (!records.length) {
this._frameSelectionChartRow.title = WebInspector.UIString("Frames: None Selected");
return;
