Web Inspector: Make WI.StackedLineChart a WI.View subclass
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Feb 2019 21:24:20 +0000 (21:24 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Feb 2019 21:24:20 +0000 (21:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=194119

Rubber-stamped by Devin Rousso.

* UserInterface/Views/LineChart.js:
(WI.LineChart.prototype.layout):
(WI.LineChart):
* UserInterface/Views/MemoryTimelineOverviewGraph.js:
(WI.MemoryTimelineOverviewGraph):
* UserInterface/Views/StackedLineChart.js:
(WI.StackedLineChart):
(WI.StackedLineChart.prototype.set size):
(WI.StackedLineChart.prototype.layout):
(WI.StackedLineChart.prototype.get element): Deleted.
(WI.StackedLineChart.prototype.get points): Deleted.
(WI.StackedLineChart.prototype.needsLayout): Deleted.
(WI.StackedLineChart.prototype.updateLayout): Deleted.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/LineChart.js
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js
Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js

index 92f522c..98fa25e 100644 (file)
@@ -1,5 +1,26 @@
 2019-02-01  Joseph Pecoraro  <pecoraro@apple.com>
 
+        Web Inspector: Make WI.StackedLineChart a WI.View subclass
+        https://bugs.webkit.org/show_bug.cgi?id=194119
+
+        Rubber-stamped by Devin Rousso.
+
+        * UserInterface/Views/LineChart.js:
+        (WI.LineChart.prototype.layout):
+        (WI.LineChart):
+        * UserInterface/Views/MemoryTimelineOverviewGraph.js:
+        (WI.MemoryTimelineOverviewGraph):
+        * UserInterface/Views/StackedLineChart.js:
+        (WI.StackedLineChart):
+        (WI.StackedLineChart.prototype.set size):
+        (WI.StackedLineChart.prototype.layout):
+        (WI.StackedLineChart.prototype.get element): Deleted.
+        (WI.StackedLineChart.prototype.get points): Deleted.
+        (WI.StackedLineChart.prototype.needsLayout): Deleted.
+        (WI.StackedLineChart.prototype.updateLayout): Deleted.
+
+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
 
index 21f4160..19ed0a5 100644 (file)
@@ -33,7 +33,7 @@
 // - There is a single path for line.
 //
 //  <div class="line-chart">
-//      <svg width="800" height="75" viewBox="0 0 800 75">
+//      <svg viewBox="0 0 800 75">
 //          <path d="..."/>
 //      </svg>
 //  </div>
@@ -88,6 +88,8 @@ WI.LineChart = class LineChart extends WI.View
 
     layout()
     {
+        super.layout();
+
         if (this.layoutReason === WI.View.LayoutReason.Resize)
             return;
 
index 3545249..17e7431 100644 (file)
@@ -39,8 +39,9 @@ WI.MemoryTimelineOverviewGraph = class MemoryTimelineOverviewGraph extends WI.Ti
 
         this._didInitializeCategories = false;
 
-        let size = new WI.Size(0, this.height);
-        this._chart = new WI.StackedLineChart(size);
+        this._chart = new WI.StackedLineChart;
+        this._chart.size = new WI.Size(0, this.height);
+        this.addSubview(this._chart);
         this.element.appendChild(this._chart.element);
 
         this._legendElement = this.element.appendChild(document.createElement("div"));
index b8b7db1..ea0a00f 100644 (file)
 //   that the paths for lower sections overlap the paths for upper sections.
 //
 //  <div class="stacked-line-chart">
-//      <svg width="1000" height="100" viewbox="0 0 1000 100">
-//          <path class="section-class-name-1" d="..."/>
+//      <svg viewBox="0 0 1000 100">
 //          <path class="section-class-name-2" d="..."/>
+//          <path class="section-class-name-1" d="..."/>
 //      </svg>
 //  </div>
 
-WI.StackedLineChart = class StackedLineChart
+WI.StackedLineChart = class StackedLineChart extends WI.View
 {
-    constructor(size)
+    constructor()
     {
-        this._element = document.createElement("div");
-        this._element.classList.add("stacked-line-chart");
+        super();
+
+        this.element.classList.add("stacked-line-chart");
+
+        this._chartElement = this.element.appendChild(createSVGElement("svg"));
+        this._chartElement.setAttribute("preserveAspectRatio", "none");
 
-        this._chartElement = this._element.appendChild(createSVGElement("svg"));
         this._pathElements = [];
 
         this._points = [];
-        this.size = size;
+        this._size = null;
     }
 
     // Public
 
-    get element() { return this._element; }
-
     get size()
     {
         return this._size;
@@ -69,11 +70,14 @@ WI.StackedLineChart = class StackedLineChart
 
     set size(size)
     {
+        if (this._size && this._size.equals(size))
+            return;
+
         this._size = size;
 
-        this._chartElement.setAttribute("width", size.width);
-        this._chartElement.setAttribute("height", size.height);
-        this._chartElement.setAttribute("viewbox", `0 0 ${size.width} ${size.height}`);
+        this._chartElement.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
+
+        this.needsLayout();
     }
 
     initializeSections(sectionClassNames)
@@ -102,20 +106,17 @@ WI.StackedLineChart = class StackedLineChart
         this._points = [];
     }
 
-    needsLayout()
+    // Protected
+
+    layout()
     {
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
+        super.layout();
 
-        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
-    }
+        if (this.layoutReason === WI.View.LayoutReason.Resize)
+            return;
 
-    updateLayout()
-    {
-        if (this._scheduledLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
-            this._scheduledLayoutUpdateIdentifier = undefined;
-        }
+        if (!this._size)
+            return;
 
         let pathComponents = [];
         let length = this._pathElements.length;