Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (242076 => 242077)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-02-26 07:38:55 UTC (rev 242077)
@@ -1,3 +1,28 @@
+2019-02-25 Joseph Pecoraro <[email protected]>
+
+ Web Inspector: Rename LineChart to AreaChart
+ https://bugs.webkit.org/show_bug.cgi?id=195038
+
+ Rubber-stamped by Matt Baker.
+
+ * UserInterface/Main.html:
+ New file names.
+
+ * UserInterface/Views/AreaChart.js: Renamed from Source/WebInspectorUI/UserInterface/Views/LineChart.js.
+ * UserInterface/Views/StackedAreaChart.js: Renamed from Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js.
+ Renamed.
+
+ * UserInterface/Views/CPUTimelineView.css:
+ * UserInterface/Views/CPUUsageStackedView.css:
+ * UserInterface/Views/CPUUsageStackedView.js:
+ * UserInterface/Views/CPUUsageView.css:
+ * UserInterface/Views/CPUUsageView.js:
+ * UserInterface/Views/LegacyCPUTimelineView.css:
+ * UserInterface/Views/MemoryCategoryView.css:
+ * UserInterface/Views/MemoryCategoryView.js:
+ * UserInterface/Views/MemoryTimelineOverviewGraph.css:
+ Update references.
+
2019-02-25 Devin Rousso <[email protected]>
Web Inspector: hovering a node inside an object preview should highlight it
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2019-02-26 07:38:55 UTC (rev 242077)
@@ -582,6 +582,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
@@ -710,7 +711,6 @@
<script src=""
<script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
<script src=""
@@ -808,8 +808,8 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
- <script src=""
<script src=""
<script src=""
<script src=""
Copied: trunk/Source/WebInspectorUI/UserInterface/Views/AreaChart.js (from rev 242076, trunk/Source/WebInspectorUI/UserInterface/Views/LineChart.js) (0 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/AreaChart.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/AreaChart.js 2019-02-26 07:38:55 UTC (rev 242077)
@@ -0,0 +1,111 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// AreaChart creates a single filled area chart.
+//
+// Initialize the chart with a size. You can then include a new point
+// in the area chart by providing an (x, y) point via `addPoint`.
+//
+// SVG:
+//
+// - There is a single path for line.
+//
+// <div class="area-chart">
+// <svg viewBox="0 0 800 75">
+// <path d="..."/>
+// </svg>
+// </div>
+
+WI.AreaChart = class AreaChart extends WI.View
+{
+ constructor()
+ {
+ super();
+
+ this.element.classList.add("area-chart");
+
+ this._chartElement = this.element.appendChild(createSVGElement("svg"));
+ this._chartElement.setAttribute("preserveAspectRatio", "none");
+
+ this._pathElement = this._chartElement.appendChild(createSVGElement("path"));
+
+ this._points = [];
+ this._size = null;
+ }
+
+ // Public
+
+ get size()
+ {
+ return this._size;
+ }
+
+ set size(size)
+ {
+ if (this._size && this._size.equals(size))
+ return;
+
+ this._size = size;
+
+ this._chartElement.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
+
+ this.needsLayout();
+ }
+
+ addPoint(x, y)
+ {
+ this._points.push({x, y});
+ }
+
+ clear()
+ {
+ this._points = [];
+ }
+
+ // Protected
+
+ layout()
+ {
+ super.layout();
+
+ if (this.layoutReason === WI.View.LayoutReason.Resize)
+ return;
+
+ if (!this._size)
+ return;
+
+ let pathComponents = [];
+ pathComponents.push(`M 0 ${this._size.height}`);
+ for (let point of this._points)
+ pathComponents.push(`L ${point.x} ${point.y}`);
+
+ let lastX = this._points.length ? this._points.lastValue.x : 0;
+ pathComponents.push(`L ${lastX} ${this._size.height}`);
+ pathComponents.push("Z");
+
+ let pathString = pathComponents.join(" ");
+ this._pathElement.setAttribute("d", pathString);
+ }
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css 2019-02-26 07:38:55 UTC (rev 242077)
@@ -183,7 +183,7 @@
display: none;
}
-.timeline-view.cpu :matches(.line-chart, .stacked-line-chart) .markers {
+.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers {
position: absolute;
top: 0;
left: 0;
@@ -192,7 +192,7 @@
pointer-events: none;
}
-.timeline-view.cpu :matches(.line-chart, .stacked-line-chart) .markers > div {
+.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
position: absolute;
z-index: 10;
width: 100%;
@@ -200,15 +200,15 @@
background-color: hsla(0, 0%, var(--foreground-lightness), 0.07);
}
-body[dir=ltr] .timeline-view.cpu :matches(.line-chart, .stacked-line-chart) .markers > div {
+body[dir=ltr] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
text-align: end;
}
-body[dir=rtl] .timeline-view.cpu :matches(.line-chart, .stacked-line-chart) .markers > div {
+body[dir=rtl] .timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div {
transform: scaleX(-1);
}
-.timeline-view.cpu :matches(.line-chart, .stacked-line-chart) .markers > div > .label {
+.timeline-view.cpu :matches(.area-chart, .stacked-area-chart) .markers > div > .label {
padding: 2px;
font-size: 8px;
color: var(--text-color-secondary);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageStackedView.css (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageStackedView.css 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageStackedView.css 2019-02-26 07:38:55 UTC (rev 242077)
@@ -57,8 +57,8 @@
}
.cpu-usage-stacked-view > .graph,
-.cpu-usage-stacked-view > .graph > .stacked-line-chart,
-.cpu-usage-stacked-view > .graph > .stacked-line-chart > svg {
+.cpu-usage-stacked-view > .graph > .stacked-area-chart,
+.cpu-usage-stacked-view > .graph > .stacked-area-chart > svg {
width: 100%;
height: 100%;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageStackedView.js (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageStackedView.js 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageStackedView.js 2019-02-26 07:38:55 UTC (rev 242077)
@@ -49,7 +49,7 @@
this._graphElement = this.element.appendChild(document.createElement("div"));
this._graphElement.classList.add("graph");
- this._chart = new WI.StackedLineChart;
+ this._chart = new WI.StackedAreaChart;
this._chart.initializeSections(["main-thread-usage", "worker-thread-usage", "total-usage"]);
this.addSubview(this._chart);
this._graphElement.appendChild(this._chart.element);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css 2019-02-26 07:38:55 UTC (rev 242077)
@@ -57,8 +57,8 @@
}
.cpu-usage-view > .graph,
-.cpu-usage-view > .graph > .line-chart,
-.cpu-usage-view > .graph > .line-chart > svg {
+.cpu-usage-view > .graph > .area-chart,
+.cpu-usage-view > .graph > .area-chart > svg {
width: 100%;
height: 100%;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js 2019-02-26 07:38:55 UTC (rev 242077)
@@ -49,7 +49,7 @@
this._graphElement = this.element.appendChild(document.createElement("div"));
this._graphElement.classList.add("graph");
- this._chart = new WI.LineChart;
+ this._chart = new WI.AreaChart;
this.addSubview(this._chart);
this._graphElement.appendChild(this._chart.element);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css 2019-02-26 07:38:55 UTC (rev 242077)
@@ -63,7 +63,7 @@
border-bottom: 1px solid var(--border-color);
}
-.timeline-view.legacy-cpu .cpu-usage-view .line-chart > svg > path {
+.timeline-view.legacy-cpu .cpu-usage-view .area-chart > svg > path {
stroke: var(--cpu-stroke-color);
fill: var(--cpu-main-thread-fill-color);
}
Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/LineChart.js (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LineChart.js 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LineChart.js 2019-02-26 07:38:55 UTC (rev 242077)
@@ -1,111 +0,0 @@
-/*
- * Copyright (C) 2016 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-// LineChart creates a single filled line chart.
-//
-// Initialize the chart with a size. You can then include a new point
-// in the line chart by providing an (x, y) point via `addPoint`.
-//
-// SVG:
-//
-// - There is a single path for line.
-//
-// <div class="line-chart">
-// <svg viewBox="0 0 800 75">
-// <path d="..."/>
-// </svg>
-// </div>
-
-WI.LineChart = class LineChart extends WI.View
-{
- constructor()
- {
- super();
-
- this.element.classList.add("line-chart");
-
- this._chartElement = this.element.appendChild(createSVGElement("svg"));
- this._chartElement.setAttribute("preserveAspectRatio", "none");
-
- this._pathElement = this._chartElement.appendChild(createSVGElement("path"));
-
- this._points = [];
- this._size = null;
- }
-
- // Public
-
- get size()
- {
- return this._size;
- }
-
- set size(size)
- {
- if (this._size && this._size.equals(size))
- return;
-
- this._size = size;
-
- this._chartElement.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
-
- this.needsLayout();
- }
-
- addPoint(x, y)
- {
- this._points.push({x, y});
- }
-
- clear()
- {
- this._points = [];
- }
-
- // Protected
-
- layout()
- {
- super.layout();
-
- if (this.layoutReason === WI.View.LayoutReason.Resize)
- return;
-
- if (!this._size)
- return;
-
- let pathComponents = [];
- pathComponents.push(`M 0 ${this._size.height}`);
- for (let point of this._points)
- pathComponents.push(`L ${point.x} ${point.y}`);
-
- let lastX = this._points.length ? this._points.lastValue.x : 0;
- pathComponents.push(`L ${lastX} ${this._size.height}`);
- pathComponents.push("Z");
-
- let pathString = pathComponents.join(" ");
- this._pathElement.setAttribute("d", pathString);
- }
-};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css 2019-02-26 07:38:55 UTC (rev 242077)
@@ -53,8 +53,8 @@
}
.memory-category-view > .graph,
-.memory-category-view > .graph > .line-chart,
-.memory-category-view > .graph > .line-chart > svg {
+.memory-category-view > .graph > .area-chart,
+.memory-category-view > .graph > .area-chart > svg {
width: 100%;
height: 100%;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js 2019-02-26 07:38:55 UTC (rev 242077)
@@ -50,7 +50,7 @@
this._graphElement = this.element.appendChild(document.createElement("div"));
this._graphElement.classList.add("graph");
- this._chart = new WI.LineChart;
+ this._chart = new WI.AreaChart;
this.addSubview(this._chart);
this._graphElement.appendChild(this._chart.element);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css 2019-02-26 07:38:55 UTC (rev 242077)
@@ -71,26 +71,26 @@
background-color: var(--timeline-even-background-color);
}
-body[dir=rtl] .timeline-overview-graph.memory > .stacked-line-chart {
+body[dir=rtl] .timeline-overview-graph.memory > .stacked-area-chart {
transform: scaleX(-1);
}
-.timeline-overview-graph.memory > .stacked-line-chart > svg > path._javascript_ {
+.timeline-overview-graph.memory > .stacked-area-chart > svg > path._javascript_ {
stroke: var(--memory-_javascript_-stroke-color);
fill: var(--memory-_javascript_-fill-color);
}
-.timeline-overview-graph.memory > .stacked-line-chart > svg > path.images {
+.timeline-overview-graph.memory > .stacked-area-chart > svg > path.images {
stroke: var(--memory-images-stroke-color);
fill: var(--memory-images-fill-color);
}
-.timeline-overview-graph.memory > .stacked-line-chart > svg > path.layers {
+.timeline-overview-graph.memory > .stacked-area-chart > svg > path.layers {
stroke: var(--memory-layers-stroke-color);
fill: var(--memory-layers-fill-color);
}
-.timeline-overview-graph.memory > .stacked-line-chart > svg > path.page {
+.timeline-overview-graph.memory > .stacked-area-chart > svg > path.page {
stroke: var(--memory-page-stroke-color);
fill: var(--memory-page-fill-color);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js 2019-02-26 07:38:55 UTC (rev 242077)
@@ -39,7 +39,7 @@
this._didInitializeCategories = false;
- this._chart = new WI.StackedLineChart;
+ this._chart = new WI.StackedAreaChart;
this._chart.size = new WI.Size(0, this.height);
this.addSubview(this._chart);
this.element.appendChild(this._chart.element);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css 2019-02-26 07:38:55 UTC (rev 242077)
@@ -151,25 +151,25 @@
}
.timeline-view.memory .circle-chart > svg > path._javascript_,
-.memory-category-view._javascript_ .line-chart > svg > path {
+.memory-category-view._javascript_ .area-chart > svg > path {
stroke: var(--memory-_javascript_-stroke-color);
fill: var(--memory-_javascript_-fill-color);
}
.timeline-view.memory .circle-chart > svg > path.images,
-.memory-category-view.images .line-chart > svg > path {
+.memory-category-view.images .area-chart > svg > path {
stroke: var(--memory-images-stroke-color);
fill: var(--memory-images-fill-color);
}
.timeline-view.memory .circle-chart > svg > path.layers,
-.memory-category-view.layers .line-chart > svg > path {
+.memory-category-view.layers .area-chart > svg > path {
stroke: var(--memory-layers-stroke-color);
fill: var(--memory-layers-fill-color);
}
.timeline-view.memory .circle-chart > svg > path.page,
-.memory-category-view.page .line-chart > svg > path {
+.memory-category-view.page .area-chart > svg > path {
stroke: var(--memory-page-stroke-color);
fill: var(--memory-page-fill-color);
}
Copied: trunk/Source/WebInspectorUI/UserInterface/Views/StackedAreaChart.js (from rev 242076, trunk/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js) (0 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/StackedAreaChart.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StackedAreaChart.js 2019-02-26 07:38:55 UTC (rev 242077)
@@ -0,0 +1,140 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// StackedAreaChart creates a area chart stratified with sections.
+//
+// Initialize the chart with a size.
+// To populate with data, first initialize the sections. The class names you
+// provide for the segments will allow you to style them. You can then include
+// a new set of (x, [y1, y2, y3]) points in the chart via `addPointSet`. The
+// order of `y` values must be in the same order as the sections.
+//
+// SVG:
+//
+// - There is a single path for each stratification.
+// - Each path extends all the way down to the bottom, they are layered such
+// that the paths for lower sections overlap the paths for upper sections.
+//
+// <div class="stacked-area-chart">
+// <svg viewBox="0 0 1000 100">
+// <path class="section-class-name-2" d="..."/>
+// <path class="section-class-name-1" d="..."/>
+// </svg>
+// </div>
+
+WI.StackedAreaChart = class StackedAreaChart extends WI.View
+{
+ constructor()
+ {
+ super();
+
+ this.element.classList.add("stacked-area-chart");
+
+ this._chartElement = this.element.appendChild(createSVGElement("svg"));
+ this._chartElement.setAttribute("preserveAspectRatio", "none");
+
+ this._pathElements = [];
+
+ this._points = [];
+ this._size = null;
+ }
+
+ // Public
+
+ get size()
+ {
+ return this._size;
+ }
+
+ set size(size)
+ {
+ if (this._size && this._size.equals(size))
+ return;
+
+ this._size = size;
+
+ this._chartElement.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
+
+ this.needsLayout();
+ }
+
+ initializeSections(sectionClassNames)
+ {
+ console.assert(!this._pathElements.length, "Should not initialize multiple times");
+
+ sectionClassNames.reverse();
+
+ for (let i = 0; i < sectionClassNames.length; ++i) {
+ let pathElement = this._chartElement.appendChild(createSVGElement("path"));
+ pathElement.classList.add(sectionClassNames[i]);
+ this._pathElements.push(pathElement);
+ }
+
+ this._pathElements.reverse();
+ }
+
+ addPointSet(x, ys)
+ {
+ console.assert(ys.length === this._pathElements.length);
+ this._points.push({x, ys});
+ }
+
+ clear()
+ {
+ this._points = [];
+ }
+
+ // Protected
+
+ layout()
+ {
+ super.layout();
+
+ if (this.layoutReason === WI.View.LayoutReason.Resize)
+ return;
+
+ if (!this._size)
+ return;
+
+ let pathComponents = [];
+ let length = this._pathElements.length;
+
+ for (let i = 0; i < length; ++i)
+ pathComponents[i] = [`M 0 ${this._size.height}`];
+
+ for (let {x, ys} of this._points) {
+ for (let i = 0; i < length; ++i)
+ pathComponents[i].push(`L ${x} ${ys[i]}`);
+ }
+
+ let lastX = this._points.length ? this._points.lastValue.x : 0;
+ for (let i = 0; i < length; ++i) {
+ pathComponents[i].push(`L ${lastX} ${this._size.height}`);
+ pathComponents[i].push("Z");
+ let pathString = pathComponents[i].join(" ");
+ this._pathElements[i].setAttribute("d", pathString);
+ }
+ }
+};
Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js (242076 => 242077)
--- trunk/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js 2019-02-26 07:36:29 UTC (rev 242076)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js 2019-02-26 07:38:55 UTC (rev 242077)
@@ -1,140 +0,0 @@
-/*
- * Copyright (C) 2016 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-// StackedLineChart creates a line chart stratified with sections.
-//
-// Initialize the chart with a size.
-// To populate with data, first initialize the sections. The class names you
-// provide for the segments will allow you to style them. You can then include
-// a new set of (x, [y1, y2, y3]) points in the chart via `addPointSet`. The
-// order of `y` values must be in the same order as the sections.
-//
-// SVG:
-//
-// - There is a single path for each stratification.
-// - Each path extends all the way down to the bottom, they are layered such
-// that the paths for lower sections overlap the paths for upper sections.
-//
-// <div class="stacked-line-chart">
-// <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 extends WI.View
-{
- constructor()
- {
- super();
-
- this.element.classList.add("stacked-line-chart");
-
- this._chartElement = this.element.appendChild(createSVGElement("svg"));
- this._chartElement.setAttribute("preserveAspectRatio", "none");
-
- this._pathElements = [];
-
- this._points = [];
- this._size = null;
- }
-
- // Public
-
- get size()
- {
- return this._size;
- }
-
- set size(size)
- {
- if (this._size && this._size.equals(size))
- return;
-
- this._size = size;
-
- this._chartElement.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
-
- this.needsLayout();
- }
-
- initializeSections(sectionClassNames)
- {
- console.assert(!this._pathElements.length, "Should not initialize multiple times");
-
- sectionClassNames.reverse();
-
- for (let i = 0; i < sectionClassNames.length; ++i) {
- let pathElement = this._chartElement.appendChild(createSVGElement("path"));
- pathElement.classList.add(sectionClassNames[i]);
- this._pathElements.push(pathElement);
- }
-
- this._pathElements.reverse();
- }
-
- addPointSet(x, ys)
- {
- console.assert(ys.length === this._pathElements.length);
- this._points.push({x, ys});
- }
-
- clear()
- {
- this._points = [];
- }
-
- // Protected
-
- layout()
- {
- super.layout();
-
- if (this.layoutReason === WI.View.LayoutReason.Resize)
- return;
-
- if (!this._size)
- return;
-
- let pathComponents = [];
- let length = this._pathElements.length;
-
- for (let i = 0; i < length; ++i)
- pathComponents[i] = [`M 0 ${this._size.height}`];
-
- for (let {x, ys} of this._points) {
- for (let i = 0; i < length; ++i)
- pathComponents[i].push(`L ${x} ${ys[i]}`);
- }
-
- let lastX = this._points.length ? this._points.lastValue.x : 0;
- for (let i = 0; i < length; ++i) {
- pathComponents[i].push(`L ${lastX} ${this._size.height}`);
- pathComponents[i].push("Z");
- let pathString = pathComponents[i].join(" ");
- this._pathElements[i].setAttribute("d", pathString);
- }
- }
-};
