Title: [240870] trunk/Source/WebInspectorUI
- Revision
- 240870
- Author
- [email protected]
- Date
- 2019-02-01 13:24:18 -0800 (Fri, 01 Feb 2019)
Log Message
Web Inspector: Make WI.CircleChart a WI.View subclass
https://bugs.webkit.org/show_bug.cgi?id=194118
Reviewed by Matt Baker.
* UserInterface/Views/CircleChart.js:
(WI.CircleChart.prototype.get centerElement):
(WI.CircleChart.prototype.layout):
(WI.CircleChart.prototype.get element): Deleted.
(WI.CircleChart.prototype.needsLayout): Deleted.
(WI.CircleChart.prototype.updateLayout): Deleted.
* UserInterface/Views/MemoryTimelineView.js:
(WI.MemoryTimelineView):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (240869 => 240870)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-02-01 21:24:16 UTC (rev 240869)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-02-01 21:24:18 UTC (rev 240870)
@@ -1,5 +1,21 @@
2019-02-01 Joseph Pecoraro <[email protected]>
+ Web Inspector: Make WI.CircleChart a WI.View subclass
+ https://bugs.webkit.org/show_bug.cgi?id=194118
+
+ Reviewed by Matt Baker.
+
+ * UserInterface/Views/CircleChart.js:
+ (WI.CircleChart.prototype.get centerElement):
+ (WI.CircleChart.prototype.layout):
+ (WI.CircleChart.prototype.get element): Deleted.
+ (WI.CircleChart.prototype.needsLayout): Deleted.
+ (WI.CircleChart.prototype.updateLayout): Deleted.
+ * UserInterface/Views/MemoryTimelineView.js:
+ (WI.MemoryTimelineView):
+
+2019-02-01 Joseph Pecoraro <[email protected]>
+
Web Inspector: Timeline Detail Views do not reset properly when new time range selection contains nothing
https://bugs.webkit.org/show_bug.cgi?id=194115
<rdar://problem/47716693>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CircleChart.js (240869 => 240870)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CircleChart.js 2019-02-01 21:24:16 UTC (rev 240869)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CircleChart.js 2019-02-01 21:24:18 UTC (rev 240870)
@@ -37,7 +37,7 @@
// - If you want to put something inside the middle of the chart you can use `centerElement`.
//
// <div class="circle-chart">
-// <svg width="120" height="120" viewbox="0 0 120 120">
+// <svg width="120" height="120" viewBox="0 0 120 120">
// <path class="background" d="..."/>
// <path class="segment segment-class-name-1" d="..."/>
// <path class="segment segment-class-name-2" d="..."/>
@@ -46,22 +46,23 @@
// <div class="center"></div>
// </div>
-WI.CircleChart = class CircleChart
+WI.CircleChart = class CircleChart extends WI.View
{
constructor({size, innerRadiusRatio})
{
+ super();
+
this._data = [];
this._size = size;
this._radius = (size / 2) - 1;
this._innerRadius = innerRadiusRatio ? Math.floor(this._radius * innerRadiusRatio) : 0;
- this._element = document.createElement("div");
- this._element.classList.add("circle-chart");
+ this.element.classList.add("circle-chart");
- this._chartElement = this._element.appendChild(createSVGElement("svg"));
+ this._chartElement = this.element.appendChild(createSVGElement("svg"));
this._chartElement.setAttribute("width", size);
this._chartElement.setAttribute("height", size);
- this._chartElement.setAttribute("viewbox", `0 0 ${size} ${size}`);
+ this._chartElement.setAttribute("viewBox", `0 0 ${size} ${size}`);
this._pathElements = [];
this._values = [];
@@ -68,20 +69,18 @@
this._total = 0;
let backgroundPath = this._chartElement.appendChild(createSVGElement("path"));
- backgroundPath.setAttribute("d", this._createCompleteCirclePathData(this.size / 2, this._radius, this._innerRadius));
+ backgroundPath.setAttribute("d", this._createCompleteCirclePathData(this._size / 2, this._radius, this._innerRadius));
backgroundPath.classList.add("background");
}
// Public
- get element() { return this._element; }
- get points() { return this._points; }
get size() { return this._size; }
get centerElement()
{
if (!this._centerElement) {
- this._centerElement = this._element.appendChild(document.createElement("div"));
+ this._centerElement = this.element.appendChild(document.createElement("div"));
this._centerElement.classList.add("center");
this._centerElement.style.width = this._centerElement.style.height = this._radius + "px";
this._centerElement.style.top = this._centerElement.style.left = (this._radius - this._innerRadius) + "px";
@@ -130,21 +129,15 @@
this.values = new Array(this._values.length).fill(0);
}
- needsLayout()
+ // Protected
+
+ layout()
{
- if (this._scheduledLayoutUpdateIdentifier)
+ super.layout();
+
+ if (this.layoutReason === WI.View.LayoutReason.Resize)
return;
- this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
- }
-
- updateLayout()
- {
- if (this._scheduledLayoutUpdateIdentifier) {
- cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
- this._scheduledLayoutUpdateIdentifier = undefined;
- }
-
if (!this._values.length)
return;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js (240869 => 240870)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js 2019-02-01 21:24:16 UTC (rev 240869)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js 2019-02-01 21:24:18 UTC (rev 240870)
@@ -58,6 +58,7 @@
let usageTooltip = WI.UIString("Breakdown of each memory category at the end of the selected time range");
let usageChartContainerElement = createChartContainer(overviewElement, WI.UIString("Breakdown"), usageTooltip);
this._usageCircleChart = new WI.CircleChart({size: 120, innerRadiusRatio: 0.5});
+ this.addSubview(this._usageCircleChart);
usageChartContainerElement.appendChild(this._usageCircleChart.element);
this._usageLegendElement = usageChartContainerElement.appendChild(document.createElement("div"));
this._usageLegendElement.classList.add("legend", "usage");
@@ -68,6 +69,7 @@
let maxComparisonTooltip = WI.UIString("Comparison of total memory size at the end of the selected time range to the maximum memory size in this recording");
let maxComparisonChartContainerElement = createChartContainer(overviewElement, WI.UIString("Max Comparison"), maxComparisonTooltip);
this._maxComparisonCircleChart = new WI.CircleChart({size: 120, innerRadiusRatio: 0.5});
+ this.addSubview(this._maxComparisonCircleChart);
maxComparisonChartContainerElement.appendChild(this._maxComparisonCircleChart.element);
this._maxComparisonLegendElement = maxComparisonChartContainerElement.appendChild(document.createElement("div"));
this._maxComparisonLegendElement.classList.add("legend", "maximum");
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
