Web Inspector: Rename LineChart to AreaChart
authorjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 26 Feb 2019 07:38:55 +0000 (07:38 +0000)
committerjoepeck@webkit.org <joepeck@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 26 Feb 2019 07:38:55 +0000 (07:38 +0000)
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.

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

15 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/AreaChart.js [moved from Source/WebInspectorUI/UserInterface/Views/LineChart.js with 92% similarity]
Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
Source/WebInspectorUI/UserInterface/Views/CPUUsageStackedView.css
Source/WebInspectorUI/UserInterface/Views/CPUUsageStackedView.js
Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css
Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js
Source/WebInspectorUI/UserInterface/Views/LegacyCPUTimelineView.css
Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js
Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
Source/WebInspectorUI/UserInterface/Views/StackedAreaChart.js [moved from Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js with 95% similarity]

index 0c5b183..70675d6 100644 (file)
@@ -1,3 +1,28 @@
+2019-02-25  Joseph Pecoraro  <pecoraro@apple.com>
+
+        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  <drousso@apple.com>
 
         Web Inspector: hovering a node inside an object preview should highlight it
index a09b30a..d3cd636 100644 (file)
     <script src="Views/ApplicationCacheFrameContentView.js"></script>
     <script src="Views/ApplicationCacheFrameTreeElement.js"></script>
     <script src="Views/ApplicationCacheManifestTreeElement.js"></script>
+    <script src="Views/AreaChart.js"></script>
     <script src="Views/AuditNavigationSidebarPanel.js"></script>
     <script src="Views/AuditTestCaseContentView.js"></script>
     <script src="Views/AuditTestGroupContentView.js"></script>
     <script src="Views/LayoutTimelineOverviewGraph.js"></script>
     <script src="Views/LayoutTimelineView.js"></script>
     <script src="Views/LegacyCPUTimelineView.js"></script>
-    <script src="Views/LineChart.js"></script>
     <script src="Views/LogContentView.js"></script>
     <script src="Views/MediaTimelineDataGridNode.js"></script>
     <script src="Views/MediaTimelineOverviewGraph.js"></script>
     <script src="Views/SpringEditor.js"></script>
     <script src="Views/SVGImageResourceClusterContentView.js"></script>
     <script src="Views/StackTraceView.js"></script>
+    <script src="Views/StackedAreaChart.js"></script>
     <script src="Views/StackedColumnChart.js"></script>
-    <script src="Views/StackedLineChart.js"></script>
     <script src="Views/StorageSidebarPanel.js"></script>
     <script src="Views/SyntaxHighlightingSupport.js"></script>
     <script src="Views/TextContentView.js"></script>
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-// LineChart creates a single filled line chart.
+// AreaChart creates a single filled area 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`.
+// in the area chart by providing an (x, y) point via `addPoint`.
 //
 // SVG:
 //
 // - There is a single path for line.
 //
-//  <div class="line-chart">
+//  <div class="area-chart">
 //      <svg viewBox="0 0 800 75">
 //          <path d="..."/>
 //      </svg>
 //  </div>
 
-WI.LineChart = class LineChart extends WI.View
+WI.AreaChart = class AreaChart extends WI.View
 {
     constructor()
     {
         super();
 
-        this.element.classList.add("line-chart");
+        this.element.classList.add("area-chart");
 
         this._chartElement = this.element.appendChild(createSVGElement("svg"));
         this._chartElement.setAttribute("preserveAspectRatio", "none");
index bab51d7..f062060 100644 (file)
@@ -183,7 +183,7 @@ body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler {
     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 @@ body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler {
     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 @@ body[dir=rtl] .timeline-view.cpu > .content > .details > .timeline-ruler {
     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);
index ee07bdf..a04c5ec 100644 (file)
@@ -57,8 +57,8 @@ body[dir=rtl] .cpu-usage-stacked-view > .graph {
 }
 
 .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%;
 }
index a170f0d..10956ba 100644 (file)
@@ -49,7 +49,7 @@ WI.CPUUsageStackedView = class CPUUsageStackedView extends WI.View
         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);
index 91b10f6..a08a5ed 100644 (file)
@@ -57,8 +57,8 @@ body[dir=rtl] .cpu-usage-view > .graph {
 }
 
 .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%;
 }
index 80988d2..9622248 100644 (file)
@@ -49,7 +49,7 @@ WI.CPUUsageView = class CPUUsageView extends WI.View
         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);
     }
index 48ad3af..d5a4ff0 100644 (file)
@@ -63,7 +63,7 @@ body[dir=rtl] .timeline-view.legacy-cpu > .content > .details > .timeline-ruler
     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);
 }
index 36c0de8..11d849b 100644 (file)
@@ -53,8 +53,8 @@ body[dir=rtl] .memory-category-view > .graph {
 }
 
 .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%;
 }
index cea2337..5c9991f 100644 (file)
@@ -50,7 +50,7 @@ WI.MemoryCategoryView = class MemoryCategoryView extends WI.View
         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);
     }
index 0db3800..eaf94de 100644 (file)
@@ -71,26 +71,26 @@ body[dir=rtl] .timeline-overview-graph.memory .memory-pressure-event {
     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);
 }
index 498270d..c184cdf 100644 (file)
@@ -39,7 +39,7 @@ WI.MemoryTimelineOverviewGraph = class MemoryTimelineOverviewGraph extends WI.Ti
 
         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);
index 48f5906..9c5c226 100644 (file)
@@ -151,25 +151,25 @@ body[dir=rtl] .timeline-view.memory > .content > .overview > .divider {
 }
 
 .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);
 }
@@ -23,7 +23,7 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-// StackedLineChart creates a line chart stratified with sections.
+// 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
 // - 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">
+//  <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.StackedLineChart = class StackedLineChart extends WI.View
+WI.StackedAreaChart = class StackedAreaChart extends WI.View
 {
     constructor()
     {
         super();
 
-        this.element.classList.add("stacked-line-chart");
+        this.element.classList.add("stacked-area-chart");
 
         this._chartElement = this.element.appendChild(createSVGElement("svg"));
         this._chartElement.setAttribute("preserveAspectRatio", "none");