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

Rubber-stamped by Devin Rousso.

* UserInterface/Views/CPUTimelineOverviewGraph.js:
(WI.CPUTimelineOverviewGraph):
* UserInterface/Views/ColumnChart.js:
(WI.ColumnChart):
(WI.ColumnChart.prototype.set size):
(WI.ColumnChart.prototype.layout):
(WI.ColumnChart.prototype.get element): Deleted.
(WI.ColumnChart.prototype.needsLayout): Deleted.
(WI.ColumnChart.prototype.updateLayout): Deleted.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.js
Source/WebInspectorUI/UserInterface/Views/ColumnChart.js

index 98fa25e..08a49fe 100644 (file)
@@ -1,5 +1,22 @@
 2019-02-01  Joseph Pecoraro  <pecoraro@apple.com>
 
+        Web Inspector: Make WI.ColumnChart a WI.View subclass
+        https://bugs.webkit.org/show_bug.cgi?id=194171
+
+        Rubber-stamped by Devin Rousso.
+
+        * UserInterface/Views/CPUTimelineOverviewGraph.js:
+        (WI.CPUTimelineOverviewGraph):
+        * UserInterface/Views/ColumnChart.js:
+        (WI.ColumnChart):
+        (WI.ColumnChart.prototype.set size):
+        (WI.ColumnChart.prototype.layout):
+        (WI.ColumnChart.prototype.get element): Deleted.
+        (WI.ColumnChart.prototype.needsLayout): Deleted.
+        (WI.ColumnChart.prototype.updateLayout): Deleted.
+
+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
 
index c58fa8b..221d88f 100644 (file)
@@ -39,6 +39,7 @@ WI.CPUTimelineOverviewGraph = class CPUTimelineOverviewGraph extends WI.Timeline
 
         let size = new WI.Size(0, this.height);
         this._chart = new WI.ColumnChart(size);
+        this.addSubview(this._chart);
         this.element.appendChild(this._chart.element);
 
         this._legendElement = this.element.appendChild(document.createElement("div"));
index 67ec984..6e63d75 100644 (file)
 //
 // - There is a single rect for each bar.
 //
-//  <div class="line-chart">
-//      <svg width="800" height="75" viewbox="0 0 800 75">
+//  <div class="column-chart">
+//      <svg viewBox="0 0 800 75">
 //          <rect width="<w>" height="<h>" transform="translate(<x>, <y>)" />
 //          <rect width="<w>" height="<h>" transform="translate(<x>, <y>)" />
 //          ...
 //      </svg>
 //  </div>
 
-WI.ColumnChart = class ColumnChart
+WI.ColumnChart = class ColumnChart extends WI.View
 {
     constructor(size)
     {
-        this._element = document.createElement("div");
-        this._element.classList.add("column-chart");
+        super();
 
-        this._svgElement = this._element.appendChild(createSVGElement("svg"));
+        this.element.classList.add("column-chart");
+
+        this._svgElement = this.element.appendChild(createSVGElement("svg"));
+        this._svgElement.setAttribute("preserveAspectRatio", "none");
 
         this._columns = [];
         this.size = size;
@@ -55,8 +57,6 @@ WI.ColumnChart = class ColumnChart
 
     // Public
 
-    get element() { return this._element; }
-
     get size()
     {
         return this._size;
@@ -66,9 +66,7 @@ WI.ColumnChart = class ColumnChart
     {
         this._size = size;
 
-        this._svgElement.setAttribute("width", size.width);
-        this._svgElement.setAttribute("height", size.height);
-        this._svgElement.setAttribute("viewbox", `0 0 ${size.width} ${size.height}`);
+        this._svgElement.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
     }
 
     addColumn(x, y, width, height)
@@ -81,20 +79,14 @@ WI.ColumnChart = class ColumnChart
         this._columns = [];
     }
 
-    needsLayout()
-    {
-        if (this._scheduledLayoutUpdateIdentifier)
-            return;
+    // Protected
 
-        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
-    }
-
-    updateLayout()
+    layout()
     {
-        if (this._scheduledLayoutUpdateIdentifier) {
-            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
-            this._scheduledLayoutUpdateIdentifier = undefined;
-        }
+        super.layout();
+
+        if (this.layoutReason === WI.View.LayoutReason.Resize)
+            return;
 
         this._svgElement.removeChildren();