Attachment 360690 Details for Bug 153758 – Patch

[patch] Patch

bug-153758-20190130221502.patch (text/plain), 31.71 KB, created by Devin Rousso on 2019-01-30 22:15:03 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-01-30 22:15:03 PST

Size: 31.71 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 1acf60b95684b1c7870b1c64f7e8eda8b9f964d6..934c0a02ab09c2f980ffc59e05823092d356997c 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,104 @@
>+2019-01-30  Devin Rousso  <drousso@apple.com>
>+
>+        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-28  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Web Inspector: Remove unnecessary promise rejection handlers now that we use the global onunhandledrejection handler
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
>index c5ab00d7699e7e2647965f9d70256b546ca651cc..ef4c78e2631e391e68c43e5c75bbbf5502dbf280 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css
>@@ -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 {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js
>index ce48b38b880fd29dfa7c2485f486404d32bc9174..2187b2225051cc2e2050e4ff757f40c7836633c0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js
>@@ -53,6 +53,7 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView
>         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 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView
> 
>     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 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView
>         // 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 @@ WI.CPUTimelineView = class CPUTimelineView extends WI.TimelineView
>             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});
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css b/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css
>index 140117ae7526fecbccb785d9b84683fb3ee5dcd9..ad47598ca4f72d364568708d3370fc3aadf2c4bf 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css
>@@ -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 @@ body[dir=rtl] .cpu-usage-view > .details {
>     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%;
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js b/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js
>index 0360afcdd77cebed27ed53147f62e2ca25154658..c23aa2ba1088180ac4af7a8d1e6322838cd6edc9 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js
>@@ -23,36 +23,34 @@
>  * 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"));
>         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 @@ WI.CPUUsageView = class CPUUsageView
>         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(min, max, average);
> 
>-        this._updateDetails(minSize, maxSize, averageSize);
>         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 @@ WI.CPUUsageView = class CPUUsageView
> 
>         // 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
>diff --git a/Source/WebInspectorUI/UserInterface/Views/LineChart.js b/Source/WebInspectorUI/UserInterface/Views/LineChart.js
>index 867bdb931c1e2fec0c4328672b6a4674b891070c..21f416096783f6d6f871a6305e9e1aa59aa5d9f2 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/LineChart.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/LineChart.js
>@@ -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.element.classList.add("line-chart");
>+
>+        this._chartElement = this.element.appendChild(createSVGElement("svg"));
>+        this._chartElement.setAttribute("preserveAspectRatio", "none");
> 
>-        this._chartElement = this._element.appendChild(createSVGElement("svg"));
>         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 @@ WI.LineChart = class LineChart
> 
>     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,20 +84,15 @@ WI.LineChart = class LineChart
>         this._points = [];
>     }
> 
>-    needsLayout()
>+    // Protected
>+
>+    layout()
>     {
>-        if (this._scheduledLayoutUpdateIdentifier)
>+        if (this.layoutReason === WI.View.LayoutReason.Resize)
>             return;
> 
>-        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
>-    }
>-
>-    updateLayout()
>-    {
>-        if (this._scheduledLayoutUpdateIdentifier) {
>-            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
>-            this._scheduledLayoutUpdateIdentifier = undefined;
>-        }
>+        if (!this._size)
>+            return;
> 
>         let pathComponents = [];
>         pathComponents.push(`M 0 ${this._size.height}`);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
>index cbb1c73e3ebdbdac247a550ad34153bcb85d4c09..d5fd3d9ccaf7373f5fb3fbe8bcb8f6bab6f7f6a6 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
>@@ -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 @@ body[dir=rtl] .memory-category-view > .details {
>     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%;
>+}
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js
>index 89f6274d1d8a92a574e839a1e45ff26d2f86346a..cea23375ed8090f90f1820ae27e617d2abaacb32 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js
>@@ -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 @@ WI.MemoryCategoryView = class MemoryCategoryView
>         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 @@ WI.MemoryCategoryView = class MemoryCategoryView
>         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(min, max);
> 
>-        this._updateDetails(minSize, maxSize);
>         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 @@ WI.MemoryCategoryView = class MemoryCategoryView
> 
>         // 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
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
>index 376fdb624786983821d792068fcd5bf879cdb52c..060cf3397a9596bd1210e9ac3cd3091938aeea0f 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
>@@ -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 @@ body[dir=rtl] .timeline-view.memory > .content > .details > .timeline-ruler {
> }
> 
> .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 @@ body[dir=rtl] .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 .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 @@ body[dir=rtl] .timeline-view.memory .legend > .row > :matches(.label, .size) {
>     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);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
>index 577e9051070f078d951a9f25c07fb2b62194ebfd..66abb2c08c5e26ba5724d0e290b0c9a6e74b9aff 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
>@@ -158,6 +158,9 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
> 
>     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 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
>         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 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
>         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 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
>         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 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
>             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 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
>         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 @@ WI.MemoryTimelineView = class MemoryTimelineView extends WI.TimelineView
>             // 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

Actions: View | Formatted Diff | Diff

Attachments on bug 153758: 286123 | 286137 | 360672 | 360674 | 360675 | 360690