Web Inspector: Make WI.CircleChart a WI.View subclass
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Feb 2019 21:24:18 +0000 (21:24 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Feb 2019 21:24:18 +0000 (21:24 +0000)
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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@240870 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CircleChart.js
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js

index 532f6b5..92f522c 100644 (file)
@@ -1,5 +1,21 @@
 2019-02-01  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 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  <pecoraro@apple.com>
+
         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>
index fce5469..91c9ffc 100644 (file)
@@ -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="..."/>
 //      <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 = [];
         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,20 +129,14 @@ WI.CircleChart = class CircleChart
         this.values = new Array(this._values.length).fill(0);
     }
 
-    needsLayout()
-    {
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
-
-        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
-    }
+    // Protected
 
-    updateLayout()
+    layout()
     {
-        if (this._scheduledLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
-            this._scheduledLayoutUpdateIdentifier = undefined;
-        }
+        super.layout();
+
+        if (this.layoutReason === WI.View.LayoutReason.Resize)
+            return;
 
         if (!this._values.length)
             return;
index a361710..9a5b098 100644 (file)
@@ -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");