Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (240762 => 240763)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-01-31 06:52:35 UTC (rev 240763)
@@ -1,3 +1,104 @@
+2019-01-30 Devin Rousso <[email protected]>
+
+ Web Inspector: Memory Timeline View should be responsive / resizable
+ https://bugs.webkit.org/show_bug.cgi?id=153758
+ <rdar://problem/24444320>
+
+ Reviewed by Joseph Pecoraro.
+
+ Leverage the SVG `viewBox` (which was misspelled) to scale the graphs when the width of the
+ container changes. The `viewBox` used is equal to the total amount of time that is visible.
+
+ Make `WI.LineChart` (and its container classes) into subclasses of `WI.View` to leverage the
+ existing layout system.
+
+ Prevent any work from being done when resizing, as this is now handled by CSS/SVG.
+
+ * UserInterface/Views/LineChart.js:
+ (WI.LineChart):
+ (WI.LineChart.prototype.set size):
+ (WI.LineChart.prototype.addPoint):
+ (WI.LineChart.prototype.clear):
+ (WI.LineChart.prototype.layout):
+ (WI.LineChart.prototype.get element): Deleted.
+ (WI.LineChart.prototype.get points): Deleted.
+ (WI.LineChart.prototype.needsLayout): Deleted.
+ (WI.LineChart.prototype.updateLayout): Deleted.
+
+ * UserInterface/Views/CPUUsageView.js:
+ (WI.CPUUsageView):
+ (WI.CPUUsageView.prototype.clear):
+ (WI.CPUUsageView.prototype.updateChart): Added.
+ (WI.CPUUsageView.prototype.get element): Deleted.
+ (WI.CPUUsageView.prototype.layoutWithDataPoints): Deleted.
+ * UserInterface/Views/CPUUsageView.css:
+ (.cpu-usage-view):
+ (.cpu-usage-view > .details):
+ (.cpu-usage-view > .graph, .cpu-usage-view > .graph > .line-chart, .cpu-usage-view > .graph > .line-chart > svg): Added.
+ (.cpu-usage-view > .graph): Deleted.
+
+ * UserInterface/Views/CPUTimelineView.js:
+ (WI.CPUTimelineView):
+ (WI.CPUTimelineView.prototype.layout):
+ (WI.CPUTimelineView.prototype.layout.layoutView):
+ (WI.CPUTimelineView.prototype.layout.layoutView.xScale):
+ (WI.CPUTimelineView.prototype.layout.layoutView.yScale):
+ * UserInterface/Views/CPUTimelineView.css:
+ (body .timeline-view.cpu): Added.
+ (.timeline-view.cpu > .content):
+ (.timeline-view.cpu): Deleted.
+
+ * UserInterface/Views/MemoryCategoryView.js:
+ (WI.MemoryCategoryView):
+ (WI.MemoryCategoryView.prototype.clear):
+ (WI.MemoryCategoryView.prototype.updateChart): Added.
+ (WI.MemoryCategoryView.prototype.get element): Deleted.
+ (WI.MemoryCategoryView.prototype.layoutWithDataPoints): Deleted.
+ * UserInterface/Views/MemoryCategoryView.css:
+ (.memory-category-view):
+ (.memory-category-view > .details):
+ (.memory-category-view > .graph, .memory-category-view > .graph > .line-chart, .memory-category-view > .graph > .line-chart > svg): Added.
+ (.memory-category-view > .graph): Deleted.
+
+ * UserInterface/Views/MemoryTimelineView.js:
+ (WI.MemoryTimelineView.prototype.layout):
+ (WI.MemoryTimelineView.prototype.layout.layoutCategoryView):
+ (WI.MemoryTimelineView.prototype.layout.layoutCategoryView.xScale):
+ (WI.MemoryTimelineView.prototype.layout.layoutCategoryView.yScale):
+ (WI.MemoryTimelineView.prototype._initializeCategoryViews):
+ (WI.MemoryTimelineView.prototype._initializeCategoryViews.appendLegendRow):
+ * UserInterface/Views/MemoryTimelineView.css:
+ (.timeline-view.memory > .content > .overview):
+ (.timeline-view.memory > .content > .overview > .divider):
+ (.timeline-view.memory > .content > .overview .total-usage, .timeline-view.memory > .content > .overview .max-percentage, .timeline-view.memory > .content > .overview .legend .size): Added.
+ (.timeline-view.memory .legend):
+ (.timeline-view.memory .legend .row): Added.
+ (.timeline-view.memory .legend .row + .row): Added.
+ (.timeline-view.memory .legend .swatch): Addd.
+ (.timeline-view.memory .legend .swatch._javascript_): Addd.
+ (.timeline-view.memory .legend .swatch.images): Addd.
+ (.timeline-view.memory .legend .swatch.layers): Addd.
+ (.timeline-view.memory .legend .swatch.page): Addd.
+ (.timeline-view.memory .legend .swatch.current): Addd.
+ (.timeline-view.memory > .content): Deleted.
+ (.timeline-view.memory > .content > .overview .total-usage, .timeline-view.memory > .content > .overview .max-percentage):
+ (body[dir=ltr] .timeline-view.memory .legend): Deleted.
+ (body[dir=rtl] .timeline-view.memory .legend): Deleted.
+ (.timeline-view.memory .legend > .row): Deleted.
+ (.timeline-view.memory .legend > .row > .swatch): Deleted.
+ (body[dir=ltr] .timeline-view.memory .legend > .row > .swatch): Deleted.
+ (body[dir=rtl] .timeline-view.memory .legend > .row > .swatch): Deleted.
+ (.timeline-view.memory .legend > .row > p): Deleted.
+ (body[dir=ltr] .timeline-view.memory .legend > .row > :matches(.label, .size)): Deleted.
+ (body[dir=rtl] .timeline-view.memory .legend > .row > :matches(.label, .size)): Deleted.
+ (.timeline-view.memory .legend > .row > .label): Deleted.
+ (.timeline-view.memory .legend > .row > .size): Deleted.
+ (.timeline-view.memory .legend > .row > .swatch._javascript_): Deleted.
+ (.timeline-view.memory .legend > .row > .swatch.images): Deleted.
+ (.timeline-view.memory .legend > .row > .swatch.layers): Deleted.
+ (.timeline-view.memory .legend > .row > .swatch.page): Deleted.
+ (.timeline-view.memory .legend > .row > .swatch.current): Deleted.
+
2019-01-30 Nikita Vasilyev <[email protected]>
Web Inspector: Changes: group CSS rules by resource
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css 2019-01-31 06:52:35 UTC (rev 240763)
@@ -23,13 +23,12 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.timeline-view.cpu {
+body .timeline-view.cpu {
overflow: scroll;
}
.timeline-view.cpu > .content {
- width: 970px;
- margin: 10px auto;
+ margin-top: 10px;
}
.timeline-view.cpu > .content .subtitle {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js 2019-01-31 06:52:35 UTC (rev 240763)
@@ -53,6 +53,7 @@
detailsSubtitleElement.textContent = WI.UIString("CPU Usage");
this._cpuUsageView = new WI.CPUUsageView;
+ this.addSubview(this._cpuUsageView);
this._detailsContainerElement.appendChild(this._cpuUsageView.element);
timeline.addEventListener(WI.Timeline.Event.RecordAdded, this._cpuTimelineRecordAdded, this);
@@ -93,13 +94,19 @@
layout()
{
+ if (this.layoutReason === WI.View.LayoutReason.Resize)
+ return;
+
// Always update timeline ruler.
this._timelineRuler.zeroTime = this.zeroTime;
this._timelineRuler.startTime = this.startTime;
this._timelineRuler.endTime = this.endTime;
+ const cpuUsageViewHeight = 75; // Keep this in sync with .cpu-usage-view
+
let graphStartTime = this.startTime;
let graphEndTime = this.endTime;
+ let secondsPerPixel = this._timelineRuler.secondsPerPixel;
let visibleEndTime = Math.min(this.endTime, this.currentTime);
let discontinuities = this._recording.discontinuitiesInTimeRange(graphStartTime, visibleEndTime);
@@ -116,12 +123,6 @@
// FIXME: Left chart.
// FIXME: Right chart.
- // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory / CPU Timeline Views should be responsive / resizable
- const cpuUsageViewWidth = 800;
- const cpuUsageViewHeight = 150;
-
- let secondsPerPixel = (graphEndTime - graphStartTime) / cpuUsageViewWidth;
-
let dataPoints = [];
let max = -Infinity;
let min = Infinity;
@@ -164,11 +165,14 @@
function xScale(time) {
return (time - graphStartTime) / secondsPerPixel;
}
- function yScale(size) {
- return cpuUsageViewHeight - (((size - graphMin) / graphMax) * cpuUsageViewHeight);
+
+ let size = new WI.Size(xScale(graphEndTime), cpuUsageViewHeight);
+
+ function yScale(value) {
+ return size.height - (((value - graphMin) / graphMax) * size.height);
}
- view.layoutWithDataPoints(dataPoints, visibleEndTime, min, max, average, xScale, yScale);
+ view.updateChart(dataPoints, size, visibleEndTime, min, max, average, xScale, yScale);
}
layoutView(this._cpuUsageView, {dataPoints, min, max, average});
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css 2019-01-31 06:52:35 UTC (rev 240763)
@@ -25,10 +25,13 @@
.cpu-usage-view {
display: flex;
+ width: 100%;
+ height: 76px; /* Keep this in sync with cpuUsageViewHeight + 1 (for border-bottom) */
border-bottom: 1px solid var(--border-color);
}
.cpu-usage-view > .details {
+ flex-shrink: 0;
width: 150px;
padding-top: 10px;
font-family: -webkit-system-font, sans-serif;
@@ -47,11 +50,13 @@
border-left: var(--cpu-usage-view-details-border-end);
}
-.cpu-usage-view > .graph {
- position: relative;
- bottom: -3px;
-}
-
body[dir=rtl] .cpu-usage-view > .graph {
transform: scaleX(-1);
}
+
+.cpu-usage-view > .graph,
+.cpu-usage-view > .graph > .line-chart,
+.cpu-usage-view > .graph > .line-chart > svg {
+ width: 100%;
+ height: 100%;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js 2019-01-31 06:52:35 UTC (rev 240763)
@@ -23,17 +23,18 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WI.CPUUsageView = class CPUUsageView
+WI.CPUUsageView = class CPUUsageView extends WI.View
{
constructor()
{
- this._element = document.createElement("div");
- this._element.classList.add("cpu-usage-view");
+ super();
- this._detailsElement = this._element.appendChild(document.createElement("div"));
+ this.element.classList.add("cpu-usage-view");
+
+ this._detailsElement = this.element.appendChild(document.createElement("div"));
this._detailsElement.classList.add("details");
- this._detailsAverageElement = this._detailsElement.appendChild(document.createElement("span"));
+ this._detailsAverageElement = this._detailsElement.appendChild(document.createElement("span"));
this._detailsElement.appendChild(document.createElement("br"));
this._detailsMaxElement = this._detailsElement.appendChild(document.createElement("span"));
this._detailsElement.appendChild(document.createElement("br"));
@@ -40,19 +41,16 @@
this._detailsMinElement = this._detailsElement.appendChild(document.createElement("span"));
this._updateDetails(NaN, NaN);
- this._graphElement = this._element.appendChild(document.createElement("div"));
+ this._graphElement = this.element.appendChild(document.createElement("div"));
this._graphElement.classList.add("graph");
- // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory / CPU Timeline Views should be responsive / resizable
- let size = new WI.Size(800, 150);
- this._chart = new WI.LineChart(size);
+ this._chart = new WI.LineChart;
+ this.addSubview(this._chart);
this._graphElement.appendChild(this._chart.element);
}
// Public
- get element() { return this._element; }
-
clear()
{
this._cachedAverageSize = undefined;
@@ -61,23 +59,27 @@
this._updateDetails(NaN, NaN);
this._chart.clear();
- this._chart.needsLayout();
}
- layoutWithDataPoints(dataPoints, lastTime, minSize, maxSize, averageSize, xScale, yScale)
+ updateChart(dataPoints, size, visibleEndTime, min, max, average, xScale, yScale)
{
- console.assert(minSize >= 0);
- console.assert(maxSize >= 0);
- console.assert(minSize <= maxSize);
+ console.assert(size instanceof WI.Size);
+ console.assert(min >= 0);
+ console.assert(max >= 0);
+ console.assert(min <= max);
+ console.assert(min <= average && average <= max);
- this._updateDetails(minSize, maxSize, averageSize);
+ this._updateDetails(min, max, average);
+
this._chart.clear();
+ this._chart.size = size;
+ this._chart.needsLayout();
if (!dataPoints.length)
return;
// Ensure an empty graph is empty.
- if (!maxSize)
+ if (!max)
return;
// Extend the first data point to the start so it doesn't look like we originate at zero size.
@@ -94,11 +96,9 @@
// Extend the last data point to the end time.
let lastDataPoint = dataPoints.lastValue;
- let lastX = Math.floor(xScale(lastTime));
+ let lastX = Math.floor(xScale(visibleEndTime));
let lastY = yScale(lastDataPoint.size);
this._chart.addPoint(lastX, lastY);
-
- this._chart.updateLayout();
}
// Private
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LineChart.js (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LineChart.js 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LineChart.js 2019-01-31 06:52:35 UTC (rev 240763)
@@ -33,30 +33,30 @@
// - There is a single path for line.
//
// <div class="line-chart">
-// <svg width="800" height="75" viewbox="0 0 800 75">
+// <svg width="800" height="75" viewBox="0 0 800 75">
// <path d="..."/>
// </svg>
// </div>
-WI.LineChart = class LineChart
+WI.LineChart = class LineChart extends WI.View
{
- constructor(size)
+ constructor()
{
- this._element = document.createElement("div");
- this._element.classList.add("line-chart");
+ super();
- this._chartElement = this._element.appendChild(createSVGElement("svg"));
+ 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 = size;
+ this._size = null;
}
// Public
- get element() { return this._element; }
- get points() { return this._points; }
-
get size()
{
return this._size;
@@ -64,11 +64,14 @@
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();
}
addPoint(x, y)
@@ -81,21 +84,16 @@
this._points = [];
}
- needsLayout()
+ // Protected
+
+ layout()
{
- if (this._scheduledLayoutUpdateIdentifier)
+ if (this.layoutReason === WI.View.LayoutReason.Resize)
return;
- this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
- }
+ if (!this._size)
+ return;
- updateLayout()
- {
- if (this._scheduledLayoutUpdateIdentifier) {
- cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
- this._scheduledLayoutUpdateIdentifier = undefined;
- }
-
let pathComponents = [];
pathComponents.push(`M 0 ${this._size.height}`);
for (let point of this._points)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css 2019-01-31 06:52:35 UTC (rev 240763)
@@ -25,10 +25,13 @@
.memory-category-view {
display: flex;
+ width: 100%;
+ height: 76px; /* Keep this in sync with memoryCategoryViewHeight + 1 (for border-bottom) */
border-bottom: 1px solid var(--border-color);
}
.memory-category-view > .details {
+ flex-shrink: 0;
width: 150px;
padding-top: 10px;
font-family: -webkit-system-font, sans-serif;
@@ -51,11 +54,14 @@
color: var(--text-color);
}
-.memory-category-view > .graph {
- position: relative;
- bottom: -3px;
-}
body[dir=rtl] .memory-category-view > .graph {
transform: scaleX(-1);
}
+
+.memory-category-view > .graph,
+.memory-category-view > .graph > .line-chart,
+.memory-category-view > .graph > .line-chart > svg {
+ width: 100%;
+ height: 100%;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js 2019-01-31 06:52:35 UTC (rev 240763)
@@ -23,18 +23,19 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WI.MemoryCategoryView = class MemoryCategoryView
+WI.MemoryCategoryView = class MemoryCategoryView extends WI.View
{
constructor(category, displayName)
{
console.assert(typeof category === "string");
+ super();
+
this._category = category;
- this._element = document.createElement("div");
- this._element.classList.add("memory-category-view", category);
+ this.element.classList.add("memory-category-view", category);
- this._detailsElement = this._element.appendChild(document.createElement("div"));
+ this._detailsElement = this.element.appendChild(document.createElement("div"));
this._detailsElement.classList.add("details");
let detailsNameElement = this._detailsElement.appendChild(document.createElement("span"));
@@ -46,18 +47,16 @@
this._detailsMinElement = this._detailsElement.appendChild(document.createElement("span"));
this._updateDetails(NaN, NaN);
- this._graphElement = this._element.appendChild(document.createElement("div"));
+ this._graphElement = this.element.appendChild(document.createElement("div"));
this._graphElement.classList.add("graph");
- // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory / CPU Timeline Views should be responsive / resizable
- let size = new WI.Size(800, 75);
- this._chart = new WI.LineChart(size);
+ this._chart = new WI.LineChart;
+ this.addSubview(this._chart);
this._graphElement.appendChild(this._chart.element);
}
// Public
- get element() { return this._element; }
get category() { return this._category; }
clear()
@@ -67,23 +66,26 @@
this._updateDetails(NaN, NaN);
this._chart.clear();
- this._chart.needsLayout();
}
- layoutWithDataPoints(dataPoints, lastTime, minSize, maxSize, xScale, yScale)
+ updateChart(dataPoints, size, visibleEndTime, min, max, xScale, yScale)
{
- console.assert(minSize >= 0);
- console.assert(maxSize >= 0);
- console.assert(minSize <= maxSize);
+ console.assert(size instanceof WI.Size);
+ console.assert(min >= 0);
+ console.assert(max >= 0);
+ console.assert(min <= max);
- this._updateDetails(minSize, maxSize);
+ this._updateDetails(min, max);
+
this._chart.clear();
+ this._chart.size = size;
+ this._chart.needsLayout();
if (!dataPoints.length)
return;
// Ensure an empty graph is empty.
- if (!maxSize)
+ if (!max)
return;
// Extend the first data point to the start so it doesn't look like we originate at zero size.
@@ -100,11 +102,9 @@
// Extend the last data point to the end time.
let lastDataPoint = dataPoints.lastValue;
- let lastX = Math.floor(xScale(lastTime));
+ let lastX = Math.floor(xScale(visibleEndTime));
let lastY = yScale(lastDataPoint.size);
this._chart.addPoint(lastX, lastY);
-
- this._chart.updateLayout();
}
// Private
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css 2019-01-31 06:52:35 UTC (rev 240763)
@@ -27,13 +27,8 @@
overflow: scroll;
}
-.timeline-view.memory > .content {
- width: 970px;
- margin: 10px auto;
-}
-
.timeline-view.memory > .content > .overview {
- padding-bottom: 10px;
+ padding: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
@@ -90,8 +85,7 @@
}
.timeline-view.memory > .content > .overview > .divider {
- margin-left: 10px;
- margin-right: 10px;
+ margin: 0 5px;
--memory-timeline-view-overview-divider-border-end: 1px solid var(--border-color);
}
@@ -105,91 +99,56 @@
}
.timeline-view.memory > .content > .overview .total-usage,
-.timeline-view.memory > .content > .overview .max-percentage {
+.timeline-view.memory > .content > .overview .max-percentage,
+.timeline-view.memory > .content > .overview .legend .size {
margin: auto;
color: var(--text-color-secondary);
}
.timeline-view.memory .legend {
+ -webkit-padding-start: 20px;
text-align: start;
-
- --memory-timeline-view-legent-padding-start: 20px;
}
-body[dir=ltr] .timeline-view.memory .legend {
- padding-left: var(--memory-timeline-view-legent-padding-start);
+.timeline-view.memory .legend .row {
+ display: flex;
}
-body[dir=rtl] .timeline-view.memory .legend {
- padding-right: var(--memory-timeline-view-legent-padding-start);
+.timeline-view.memory .legend .row + .row {
+ margin-top: 4px;
}
-.timeline-view.memory .legend > .row {
- position: relative;
- width: 100px;
- height: 27px;
-
- --memory-timeline-view-legend-row-offset-start: 20px;
-}
-
-.timeline-view.memory .legend > .row > .swatch {
- position: absolute;
- top: 1px;
+.timeline-view.memory .legend .swatch {
width: 1em;
height: 1em;
+ margin-top: 1px;
+ -webkit-margin-end: 8px;
}
-body[dir=ltr] .timeline-view.memory .legend > .row > .swatch {
- left: 0;
-}
-
-body[dir=rtl] .timeline-view.memory .legend > .row > .swatch {
- right: 0;
-}
-
-.timeline-view.memory .legend > .row > p {
- margin: 0;
-}
-
-body[dir=ltr] .timeline-view.memory .legend > .row > :matches(.label, .size) {
- left: var(--memory-timeline-view-legend-row-offset-start);
-}
-
-body[dir=rtl] .timeline-view.memory .legend > .row > :matches(.label, .size) {
- right: var(--memory-timeline-view-legend-row-offset-start);
-}
-
-.timeline-view.memory .legend > .row > .label {
- position: absolute;
- top: 0;
-}
-
-.timeline-view.memory .legend > .row > .size {
- position: absolute;
- top: 12px;
- color: var(--text-color-secondary);
-}
-
-.timeline-view.memory .legend > .row > .swatch._javascript_ {
+.timeline-view.memory .legend .swatch._javascript_ {
border: 1px solid var(--memory-_javascript_-stroke-color);
background: var(--memory-_javascript_-fill-color);
}
-.timeline-view.memory .legend > .row > .swatch.images {
+.timeline-view.memory .legend .swatch.images {
border: 1px solid var(--memory-images-stroke-color);
background: var(--memory-images-fill-color);
}
-.timeline-view.memory .legend > .row > .swatch.layers {
+.timeline-view.memory .legend .swatch.layers {
border: 1px solid var(--memory-layers-stroke-color);
background: var(--memory-layers-fill-color);
}
-.timeline-view.memory .legend > .row > .swatch.page {
+.timeline-view.memory .legend .swatch.page {
border: 1px solid var(--memory-page-stroke-color);
background: var(--memory-page-fill-color);
}
+.timeline-view.memory .legend .swatch.current {
+ border: 1px solid var(--memory-max-comparison-stroke-color);
+ background: var(--memory-max-comparison-fill-color);
+}
.timeline-view.memory .circle-chart > svg > path._javascript_,
.memory-category-view._javascript_ .line-chart > svg > path {
@@ -215,11 +174,6 @@
fill: var(--memory-page-fill-color);
}
-.timeline-view.memory .legend > .row > .swatch.current {
- border: 1px solid var(--memory-max-comparison-stroke-color);
- background: var(--memory-max-comparison-fill-color);
-}
-
.timeline-view.memory .circle-chart > svg > path.current {
stroke: var(--memory-max-comparison-stroke-color);
fill: var(--memory-max-comparison-fill-color);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js (240762 => 240763)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js 2019-01-31 06:33:35 UTC (rev 240762)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js 2019-01-31 06:52:35 UTC (rev 240763)
@@ -158,6 +158,9 @@
layout()
{
+ if (this.layoutReason === WI.View.LayoutReason.Resize)
+ return;
+
// Always update timeline ruler.
this._timelineRuler.zeroTime = this.zeroTime;
this._timelineRuler.startTime = this.startTime;
@@ -166,8 +169,11 @@
if (!this._didInitializeCategories)
return;
+ const memoryCategoryViewHeight = 75; // Keep this in sync with .memory-category-view
+
let graphStartTime = this.startTime;
let graphEndTime = this.endTime;
+ let secondsPerPixel = this._timelineRuler.secondsPerPixel;
let visibleEndTime = Math.min(this.endTime, this.currentTime);
let discontinuities = this._recording.discontinuitiesInTimeRange(graphStartTime, visibleEndTime);
@@ -194,12 +200,6 @@
this._maxComparisonCircleChart.updateLayout();
this._updateMaxComparisonLegend(lastRecord.totalSize);
- // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory / CPU Timeline Views should be responsive / resizable
- const categoryViewWidth = 800;
- const categoryViewHeight = 75;
-
- let secondsPerPixel = (graphEndTime - graphStartTime) / categoryViewWidth;
-
let categoryDataMap = {};
for (let categoryView of this._categoryViews)
categoryDataMap[categoryView.category] = {dataPoints: [], max: -Infinity, min: Infinity};
@@ -235,9 +235,7 @@
if (discontinuities.length)
visibleEndTime = discontinuities[0].startTime;
- function layoutCategoryView(categoryView, categoryData) {
- let {dataPoints, min, max} = categoryData;
-
+ function layoutCategoryView(categoryView, {dataPoints, min, max}) {
if (min === Infinity)
min = 0;
if (max === -Infinity)
@@ -250,11 +248,14 @@
function xScale(time) {
return (time - graphStartTime) / secondsPerPixel;
}
- function yScale(size) {
- return categoryViewHeight - (((size - graphMin) / graphMax) * categoryViewHeight);
+
+ let size = new WI.Size(xScale(graphEndTime), memoryCategoryViewHeight);
+
+ function yScale(value) {
+ return size.height - (((value - graphMin) / graphMax) * size.height);
}
- categoryView.layoutWithDataPoints(dataPoints, visibleEndTime, min, max, xScale, yScale);
+ categoryView.updateChart(dataPoints, size, visibleEndTime, min, max, xScale, yScale);
}
for (let categoryView of this._categoryViews)
@@ -349,12 +350,18 @@
function appendLegendRow(legendElement, swatchClass, label, tooltip) {
let rowElement = legendElement.appendChild(document.createElement("div"));
rowElement.classList.add("row");
+
let swatchElement = rowElement.appendChild(document.createElement("div"));
swatchElement.classList.add("swatch", swatchClass);
- let labelElement = rowElement.appendChild(document.createElement("p"));
+
+ let valueContainer = rowElement.appendChild(document.createElement("div"));
+ valueContainer.classList.add("value");
+
+ let labelElement = valueContainer.appendChild(document.createElement("div"));
labelElement.classList.add("label");
labelElement.textContent = label;
- let sizeElement = rowElement.appendChild(document.createElement("p"));
+
+ let sizeElement = valueContainer.appendChild(document.createElement("div"));
sizeElement.classList.add("size");
if (tooltip)
@@ -369,6 +376,7 @@
// Per-category graph.
let categoryView = new WI.MemoryCategoryView(type, WI.MemoryTimelineView.displayNameForCategory(type));
this._categoryViews.push(categoryView);
+ this.addSubview(categoryView);
if (!lastCategoryViewElement)
this._detailsContainerElement.appendChild(categoryView.element);
else
