Modified: trunk/Source/WebInspectorUI/ChangeLog (240864 => 240865)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-02-01 21:14:19 UTC (rev 240864)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-02-01 21:23:51 UTC (rev 240865)
@@ -1,3 +1,32 @@
+2019-02-01 Joseph Pecoraro <pecor...@apple.com>
+
+ Web Inspector: Improve API and documentation of ColumnChart
+ https://bugs.webkit.org/show_bug.cgi?id=193982
+
+ Reviewed by Devin Rousso.
+
+ This used to be named "BarChart". Convert remaining instances
+ of "bar" to "column" and clean up related things.
+
+ * UserInterface/Views/CPUTimelineOverviewGraph.css:
+ (body[dir=rtl] .timeline-overview-graph.cpu > .column-chart):
+ (.timeline-overview-graph.cpu > .column-chart > svg > rect):
+ (body[dir=rtl] .timeline-overview-graph.cpu > .bar-chart): Deleted.
+ (.timeline-overview-graph.cpu > .bar-chart > svg > rect): Deleted.
+ * UserInterface/Views/CPUTimelineOverviewGraph.js:
+ (WI.CPUTimelineOverviewGraph.prototype.layout):
+ * UserInterface/Views/ColumnChart.js:
+ (WI.ColumnChart):
+ (WI.ColumnChart.prototype.get columns):
+ (WI.ColumnChart.prototype.addColumn):
+ (WI.ColumnChart.prototype.clear):
+ (WI.ColumnChart.prototype.updateLayout):
+ (WI.ColumnChart.prototype.get bars): Deleted.
+ (WI.ColumnChart.prototype.addBar): Deleted.
+ * UserInterface/Views/StackedLineChart.js:
+ (WI.StackedLineChart.prototype.get element):
+ (WI.StackedLineChart.prototype.get points):
+
2019-01-31 Joseph Pecoraro <pecor...@apple.com>
Web Inspector: Timeline time range selection sometimes shows 0.000, should be just 0
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css (240864 => 240865)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-02-01 21:14:19 UTC (rev 240864)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-02-01 21:23:51 UTC (rev 240865)
@@ -67,11 +67,11 @@
}
}
-body[dir=rtl] .timeline-overview-graph.cpu > .bar-chart {
+body[dir=rtl] .timeline-overview-graph.cpu > .column-chart {
transform: scaleX(-1);
}
-.timeline-overview-graph.cpu > .bar-chart > svg > rect {
+.timeline-overview-graph.cpu > .column-chart > svg > rect {
stroke: var(--cpu-stroke-color);
fill: var(--cpu-fill-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.js (240864 => 240865)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.js 2019-02-01 21:14:19 UTC (rev 240864)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.js 2019-02-01 21:23:51 UTC (rev 240865)
@@ -116,7 +116,7 @@
let h = Math.max(minimumDisplayHeight, yScale(record.usage));
let x = xScale(record.startTime - (samplingRatePerSecond / 2));
let y = height - h;
- this._chart.addBar(x, y, w, h);
+ this._chart.addColumn(x, y, w, h);
}
this._chart.updateLayout();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColumnChart.js (240864 => 240865)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColumnChart.js 2019-02-01 21:14:19 UTC (rev 240864)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColumnChart.js 2019-02-01 21:23:51 UTC (rev 240865)
@@ -23,10 +23,10 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-// ColumnChart creates a single filled line chart.
+// ColumnChart creates a chart filled with singular columns.
//
-// Initialize the chart with a size. You can then include a new bar
-// in the bar chart by providing an (x, y, w, h) via `addBar`.
+// Initialize the chart with a size. You can then include a new column
+// in the column chart by providing an (x, y, w, h) via `addColumn`.
//
// SVG:
//
@@ -36,6 +36,7 @@
// <svg width="800" height="75" 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>
@@ -44,11 +45,11 @@
constructor(size)
{
this._element = document.createElement("div");
- this._element.classList.add("bar-chart");
+ this._element.classList.add("column-chart");
this._svgElement = this._element.appendChild(createSVGElement("svg"));
- this._bars = [];
+ this._columns = [];
this.size = size;
}
@@ -55,7 +56,6 @@
// Public
get element() { return this._element; }
- get bars() { return this._bars; }
get size()
{
@@ -71,14 +71,14 @@
this._svgElement.setAttribute("viewbox", `0 0 ${size.width} ${size.height}`);
}
- addBar(x, y, width, height)
+ addColumn(x, y, width, height)
{
- this._bars.push({x, y, width, height});
+ this._columns.push({x, y, width, height});
}
clear()
{
- this._bars = [];
+ this._columns = [];
}
needsLayout()
@@ -98,7 +98,7 @@
this._svgElement.removeChildren();
- for (let {x, y, width, height} of this._bars) {
+ for (let {x, y, width, height} of this._columns) {
let rect = this._svgElement.appendChild(createSVGElement("rect"));
rect.setAttribute("width", width);
rect.setAttribute("height", height);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js (240864 => 240865)
--- trunk/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js 2019-02-01 21:14:19 UTC (rev 240864)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js 2019-02-01 21:23:51 UTC (rev 240865)
@@ -60,16 +60,8 @@
// Public
- get element()
- {
- return this._element;
- }
+ get element() { return this._element; }
- get points()
- {
- return this._points;
- }
-
get size()
{
return this._size;
