Attachment 360794 Details for Bug 194118 – [PATCH] Proposed Fix

[patch] [PATCH] Proposed Fix

circle-chart-1.patch (text/plain), 6.08 KB, created by Joseph Pecoraro on 2019-01-31 15:31:51 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Joseph Pecoraro

Created: 2019-01-31 15:31:51 PST

Size: 6.08 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 5c810bcbe38..fcda42f78d0 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,19 @@
>+2019-01-31  Joseph Pecoraro  <pecoraro@apple.com>
>+
>+        Web Inspector: Make WI.CircleChart a WI.View subclass
>+        https://bugs.webkit.org/show_bug.cgi?id=194118
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        * 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-01-31  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Web Inspector: Timeline Detail Views do not reset properly when new time range selection contains nothing
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CircleChart.js b/Source/WebInspectorUI/UserInterface/Views/CircleChart.js
>index fce54691ab5..be440b1bdc0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CircleChart.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/CircleChart.js
>@@ -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 = [];
>@@ -74,14 +75,13 @@ WI.CircleChart = class CircleChart
> 
>     // 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 +130,15 @@ WI.CircleChart = class CircleChart
>         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;
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
>index 7303d8e5025..8ead30e7071 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
>@@ -58,6 +58,7 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
>         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 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
>         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");

Flags:

mattbaker: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 194118: 360794