Changeset 240763 in webkit


Ignore:
Timestamp:
Jan 30, 2019 10:52:35 PM (5 years ago)
Author:
Devin Rousso
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r240741 r240763  
     12019-01-30  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Memory Timeline View should be responsive / resizable
     4        https://bugs.webkit.org/show_bug.cgi?id=153758
     5        <rdar://problem/24444320>
     6
     7        Reviewed by Joseph Pecoraro.
     8
     9        Leverage the SVG `viewBox` (which was misspelled) to scale the graphs when the width of the
     10        container changes. The `viewBox` used is equal to the total amount of time that is visible.
     11
     12        Make `WI.LineChart` (and its container classes) into subclasses of `WI.View` to leverage the
     13        existing layout system.
     14
     15        Prevent any work from being done when resizing, as this is now handled by CSS/SVG.
     16
     17        * UserInterface/Views/LineChart.js:
     18        (WI.LineChart):
     19        (WI.LineChart.prototype.set size):
     20        (WI.LineChart.prototype.addPoint):
     21        (WI.LineChart.prototype.clear):
     22        (WI.LineChart.prototype.layout):
     23        (WI.LineChart.prototype.get element): Deleted.
     24        (WI.LineChart.prototype.get points): Deleted.
     25        (WI.LineChart.prototype.needsLayout): Deleted.
     26        (WI.LineChart.prototype.updateLayout): Deleted.
     27
     28        * UserInterface/Views/CPUUsageView.js:
     29        (WI.CPUUsageView):
     30        (WI.CPUUsageView.prototype.clear):
     31        (WI.CPUUsageView.prototype.updateChart): Added.
     32        (WI.CPUUsageView.prototype.get element): Deleted.
     33        (WI.CPUUsageView.prototype.layoutWithDataPoints): Deleted.
     34        * UserInterface/Views/CPUUsageView.css:
     35        (.cpu-usage-view):
     36        (.cpu-usage-view > .details):
     37        (.cpu-usage-view > .graph, .cpu-usage-view > .graph > .line-chart, .cpu-usage-view > .graph > .line-chart > svg): Added.
     38        (.cpu-usage-view > .graph): Deleted.
     39
     40        * UserInterface/Views/CPUTimelineView.js:
     41        (WI.CPUTimelineView):
     42        (WI.CPUTimelineView.prototype.layout):
     43        (WI.CPUTimelineView.prototype.layout.layoutView):
     44        (WI.CPUTimelineView.prototype.layout.layoutView.xScale):
     45        (WI.CPUTimelineView.prototype.layout.layoutView.yScale):
     46        * UserInterface/Views/CPUTimelineView.css:
     47        (body .timeline-view.cpu): Added.
     48        (.timeline-view.cpu > .content):
     49        (.timeline-view.cpu): Deleted.
     50
     51        * UserInterface/Views/MemoryCategoryView.js:
     52        (WI.MemoryCategoryView):
     53        (WI.MemoryCategoryView.prototype.clear):
     54        (WI.MemoryCategoryView.prototype.updateChart): Added.
     55        (WI.MemoryCategoryView.prototype.get element): Deleted.
     56        (WI.MemoryCategoryView.prototype.layoutWithDataPoints): Deleted.
     57        * UserInterface/Views/MemoryCategoryView.css:
     58        (.memory-category-view):
     59        (.memory-category-view > .details):
     60        (.memory-category-view > .graph, .memory-category-view > .graph > .line-chart, .memory-category-view > .graph > .line-chart > svg): Added.
     61        (.memory-category-view > .graph): Deleted.
     62
     63        * UserInterface/Views/MemoryTimelineView.js:
     64        (WI.MemoryTimelineView.prototype.layout):
     65        (WI.MemoryTimelineView.prototype.layout.layoutCategoryView):
     66        (WI.MemoryTimelineView.prototype.layout.layoutCategoryView.xScale):
     67        (WI.MemoryTimelineView.prototype.layout.layoutCategoryView.yScale):
     68        (WI.MemoryTimelineView.prototype._initializeCategoryViews):
     69        (WI.MemoryTimelineView.prototype._initializeCategoryViews.appendLegendRow):
     70        * UserInterface/Views/MemoryTimelineView.css:
     71        (.timeline-view.memory > .content > .overview):
     72        (.timeline-view.memory > .content > .overview > .divider):
     73        (.timeline-view.memory > .content > .overview .total-usage, .timeline-view.memory > .content > .overview .max-percentage, .timeline-view.memory > .content > .overview .legend .size): Added.
     74        (.timeline-view.memory .legend):
     75        (.timeline-view.memory .legend .row): Added.
     76        (.timeline-view.memory .legend .row + .row): Added.
     77        (.timeline-view.memory .legend .swatch): Addd.
     78        (.timeline-view.memory .legend .swatch.javascript): Addd.
     79        (.timeline-view.memory .legend .swatch.images): Addd.
     80        (.timeline-view.memory .legend .swatch.layers): Addd.
     81        (.timeline-view.memory .legend .swatch.page): Addd.
     82        (.timeline-view.memory .legend .swatch.current): Addd.
     83        (.timeline-view.memory > .content): Deleted.
     84        (.timeline-view.memory > .content > .overview .total-usage, .timeline-view.memory > .content > .overview .max-percentage):
     85        (body[dir=ltr] .timeline-view.memory .legend): Deleted.
     86        (body[dir=rtl] .timeline-view.memory .legend): Deleted.
     87        (.timeline-view.memory .legend > .row): Deleted.
     88        (.timeline-view.memory .legend > .row > .swatch): Deleted.
     89        (body[dir=ltr] .timeline-view.memory .legend > .row > .swatch): Deleted.
     90        (body[dir=rtl] .timeline-view.memory .legend > .row > .swatch): Deleted.
     91        (.timeline-view.memory .legend > .row > p): Deleted.
     92        (body[dir=ltr] .timeline-view.memory .legend > .row > :matches(.label, .size)): Deleted.
     93        (body[dir=rtl] .timeline-view.memory .legend > .row > :matches(.label, .size)): Deleted.
     94        (.timeline-view.memory .legend > .row > .label): Deleted.
     95        (.timeline-view.memory .legend > .row > .size): Deleted.
     96        (.timeline-view.memory .legend > .row > .swatch.javascript): Deleted.
     97        (.timeline-view.memory .legend > .row > .swatch.images): Deleted.
     98        (.timeline-view.memory .legend > .row > .swatch.layers): Deleted.
     99        (.timeline-view.memory .legend > .row > .swatch.page): Deleted.
     100        (.timeline-view.memory .legend > .row > .swatch.current): Deleted.
     101
    11022019-01-30  Nikita Vasilyev  <nvasilyev@apple.com>
    2103

  • trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.css

    r240457 r240763  
    2424 */
    2525
    26 .timeline-view.cpu {
     26body .timeline-view.cpu {
    2727    overflow: scroll;
    2828}
    2929
    3030.timeline-view.cpu > .content {
    31     width: 970px;
    32     margin: 10px auto;
     31    margin-top: 10px;
    3332}
    3433

  • trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js

    r240457 r240763  
    5454
    5555        this._cpuUsageView = new WI.CPUUsageView;
     56        this.addSubview(this._cpuUsageView);
    5657        this._detailsContainerElement.appendChild(this._cpuUsageView.element);
    5758
    … …  
    9495    layout()
    9596    {
     97        if (this.layoutReason === WI.View.LayoutReason.Resize)
     98            return;
     99
    96100        // Always update timeline ruler.
    97101        this._timelineRuler.zeroTime = this.zeroTime;
    … …  
    99103        this._timelineRuler.endTime = this.endTime;
    100104
     105        const cpuUsageViewHeight = 75; // Keep this in sync with .cpu-usage-view
     106
    101107        let graphStartTime = this.startTime;
    102108        let graphEndTime = this.endTime;
     109        let secondsPerPixel = this._timelineRuler.secondsPerPixel;
    103110        let visibleEndTime = Math.min(this.endTime, this.currentTime);
    104111
    … …  
    116123        // FIXME: Left chart.
    117124        // FIXME: Right chart.
    118 
    119         // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory / CPU Timeline Views should be responsive / resizable
    120         const cpuUsageViewWidth = 800;
    121         const cpuUsageViewHeight = 150;
    122 
    123         let secondsPerPixel = (graphEndTime - graphStartTime) / cpuUsageViewWidth;
    124125
    125126        let dataPoints = [];
    … …  
    165166                return (time - graphStartTime) / secondsPerPixel;
    166167            }
    167             function yScale(size) {
    168                 return cpuUsageViewHeight - (((size - graphMin) / graphMax) * cpuUsageViewHeight);
     168
     169            let size = new WI.Size(xScale(graphEndTime), cpuUsageViewHeight);
     170
     171            function yScale(value) {
     172                return size.height - (((value - graphMin) / graphMax) * size.height);
    169173            }
    170174
    171             view.layoutWithDataPoints(dataPoints, visibleEndTime, min, max, average, xScale, yScale);
     175            view.updateChart(dataPoints, size, visibleEndTime, min, max, average, xScale, yScale);
    172176        }
    173177

  • trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.css

    r240518 r240763  
    2626.cpu-usage-view {
    2727    display: flex;
     28    width: 100%;
     29    height: 76px; /* Keep this in sync with cpuUsageViewHeight + 1 (for border-bottom) */
    2830    border-bottom: 1px solid var(--border-color);
    2931}
    3032
    3133.cpu-usage-view > .details {
     34    flex-shrink: 0;
    3235    width: 150px;
    3336    padding-top: 10px;
    … …  
    4851}
    4952
    50 .cpu-usage-view > .graph {
    51     position: relative;
    52     bottom: -3px;
    53 }
    54 
    5553body[dir=rtl] .cpu-usage-view > .graph {
    5654    transform: scaleX(-1);
    5755}
     56
     57.cpu-usage-view > .graph,
     58.cpu-usage-view > .graph > .line-chart,
     59.cpu-usage-view > .graph > .line-chart > svg {
     60    width: 100%;
     61    height: 100%;
     62}

  • trunk/Source/WebInspectorUI/UserInterface/Views/CPUUsageView.js

    r240457 r240763  
    2424 */
    2525
    26 WI.CPUUsageView = class CPUUsageView
     26WI.CPUUsageView = class CPUUsageView extends WI.View
    2727{
    2828    constructor()
    2929    {
    30         this._element = document.createElement("div");
    31         this._element.classList.add("cpu-usage-view");
     30        super();
    3231
    33         this._detailsElement = this._element.appendChild(document.createElement("div"));
     32        this.element.classList.add("cpu-usage-view");
     33
     34        this._detailsElement = this.element.appendChild(document.createElement("div"));
    3435        this._detailsElement.classList.add("details");
    3536
    36         this._detailsAverageElement = this._detailsElement.appendChild(document.createElement("span"));       
     37        this._detailsAverageElement = this._detailsElement.appendChild(document.createElement("span"));
    3738        this._detailsElement.appendChild(document.createElement("br"));
    3839        this._detailsMaxElement = this._detailsElement.appendChild(document.createElement("span"));
    … …  
    4142        this._updateDetails(NaN, NaN);
    4243
    43         this._graphElement = this._element.appendChild(document.createElement("div"));
     44        this._graphElement = this.element.appendChild(document.createElement("div"));
    4445        this._graphElement.classList.add("graph");
    4546
    46         // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory / CPU Timeline Views should be responsive / resizable
    47         let size = new WI.Size(800, 150);
    48         this._chart = new WI.LineChart(size);
     47        this._chart = new WI.LineChart;
     48        this.addSubview(this._chart);
    4949        this._graphElement.appendChild(this._chart.element);
    5050    }
    5151
    5252    // Public
    53 
    54     get element() { return this._element; }
    5553
    5654    clear()
    … …  
    6260
    6361        this._chart.clear();
    64         this._chart.needsLayout();
    6562    }
    6663
    67     layoutWithDataPoints(dataPoints, lastTime, minSize, maxSize, averageSize, xScale, yScale)
     64    updateChart(dataPoints, size, visibleEndTime, min, max, average, xScale, yScale)
    6865    {
    69         console.assert(minSize >= 0);
    70         console.assert(maxSize >= 0);
    71         console.assert(minSize <= maxSize);
     66        console.assert(size instanceof WI.Size);
     67        console.assert(min >= 0);
     68        console.assert(max >= 0);
     69        console.assert(min <= max);
     70        console.assert(min <= average && average <= max);
    7271
    73         this._updateDetails(minSize, maxSize, averageSize);
     72        this._updateDetails(min, max, average);
     73
    7474        this._chart.clear();
     75        this._chart.size = size;
     76        this._chart.needsLayout();
    7577
    7678        if (!dataPoints.length)
    … …  
    7880
    7981        // Ensure an empty graph is empty.
    80         if (!maxSize)
     82        if (!max)
    8183            return;
    8284
    … …  
    9597        // Extend the last data point to the end time.
    9698        let lastDataPoint = dataPoints.lastValue;
    97         let lastX = Math.floor(xScale(lastTime));
     99        let lastX = Math.floor(xScale(visibleEndTime));
    98100        let lastY = yScale(lastDataPoint.size);
    99101        this._chart.addPoint(lastX, lastY);
    100 
    101         this._chart.updateLayout();
    102102    }
    103103

  • trunk/Source/WebInspectorUI/UserInterface/Views/LineChart.js

    r220119 r240763  
    3434//
    3535//  <div class="line-chart">
    36 //      <svg width="800" height="75" viewbox="0 0 800 75">
     36//      <svg width="800" height="75" viewBox="0 0 800 75">
    3737//          <path d="..."/>
    3838//      </svg>
    3939//  </div>
    4040
    41 WI.LineChart = class LineChart
     41WI.LineChart = class LineChart extends WI.View
    4242{
    43     constructor(size)
     43    constructor()
    4444    {
    45         this._element = document.createElement("div");
    46         this._element.classList.add("line-chart");
     45        super();
    4746
    48         this._chartElement = this._element.appendChild(createSVGElement("svg"));
     47        this.element.classList.add("line-chart");
     48
     49        this._chartElement = this.element.appendChild(createSVGElement("svg"));
     50        this._chartElement.setAttribute("preserveAspectRatio", "none");
     51
    4952        this._pathElement = this._chartElement.appendChild(createSVGElement("path"));
    5053
    5154        this._points = [];
    52         this.size = size;
     55        this._size = null;
    5356    }
    5457
    5558    // Public
    56 
    57     get element() { return this._element; }
    58     get points() { return this._points; }
    5959
    6060    get size()
    … …  
    6565    set size(size)
    6666    {
     67        if (this._size && this._size.equals(size))
     68            return;
     69
    6770        this._size = size;
    6871
    69         this._chartElement.setAttribute("width", size.width);
    70         this._chartElement.setAttribute("height", size.height);
    71         this._chartElement.setAttribute("viewbox", `0 0 ${size.width} ${size.height}`);
     72        this._chartElement.setAttribute("viewBox", `0 0 ${size.width} ${size.height}`);
     73
     74        this.needsLayout();
    7275    }
    7376
    … …  
    8285    }
    8386
    84     needsLayout()
     87    // Protected
     88
     89    layout()
    8590    {
    86         if (this._scheduledLayoutUpdateIdentifier)
     91        if (this.layoutReason === WI.View.LayoutReason.Resize)
    8792            return;
    8893
    89         this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
    90     }
    91 
    92     updateLayout()
    93     {
    94         if (this._scheduledLayoutUpdateIdentifier) {
    95             cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
    96             this._scheduledLayoutUpdateIdentifier = undefined;
    97         }
     94        if (!this._size)
     95            return;
    9896
    9997        let pathComponents = [];

  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css

    r240518 r240763  
    2626.memory-category-view {
    2727    display: flex;
     28    width: 100%;
     29    height: 76px; /* Keep this in sync with memoryCategoryViewHeight + 1 (for border-bottom) */
    2830    border-bottom: 1px solid var(--border-color);
    2931}
    3032
    3133.memory-category-view > .details {
     34    flex-shrink: 0;
    3235    width: 150px;
    3336    padding-top: 10px;
    … …  
    5255}
    5356
    54 .memory-category-view > .graph {
    55     position: relative;
    56     bottom: -3px;
    57 }
    5857
    5958body[dir=rtl] .memory-category-view > .graph {
    6059    transform: scaleX(-1);
    6160}
     61
     62.memory-category-view > .graph,
     63.memory-category-view > .graph > .line-chart,
     64.memory-category-view > .graph > .line-chart > svg {
     65    width: 100%;
     66    height: 100%;
     67}

  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js

    r240457 r240763  
    2424 */
    2525
    26 WI.MemoryCategoryView = class MemoryCategoryView
     26WI.MemoryCategoryView = class MemoryCategoryView extends WI.View
    2727{
    2828    constructor(category, displayName)
    … …  
    3030        console.assert(typeof category === "string");
    3131
     32        super();
     33
    3234        this._category = category;
    3335
    34         this._element = document.createElement("div");
    35         this._element.classList.add("memory-category-view", category);
     36        this.element.classList.add("memory-category-view", category);
    3637
    37         this._detailsElement = this._element.appendChild(document.createElement("div"));
     38        this._detailsElement = this.element.appendChild(document.createElement("div"));
    3839        this._detailsElement.classList.add("details");
    3940
    … …  
    4748        this._updateDetails(NaN, NaN);
    4849
    49         this._graphElement = this._element.appendChild(document.createElement("div"));
     50        this._graphElement = this.element.appendChild(document.createElement("div"));
    5051        this._graphElement.classList.add("graph");
    5152
    52         // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory / CPU Timeline Views should be responsive / resizable
    53         let size = new WI.Size(800, 75);
    54         this._chart = new WI.LineChart(size);
     53        this._chart = new WI.LineChart;
     54        this.addSubview(this._chart);
    5555        this._graphElement.appendChild(this._chart.element);
    5656    }
    … …  
    5858    // Public
    5959
    60     get element() { return this._element; }
    6160    get category() { return this._category; }
    6261
    … …  
    6867
    6968        this._chart.clear();
    70         this._chart.needsLayout();
    7169    }
    7270
    73     layoutWithDataPoints(dataPoints, lastTime, minSize, maxSize, xScale, yScale)
     71    updateChart(dataPoints, size, visibleEndTime, min, max, xScale, yScale)
    7472    {
    75         console.assert(minSize >= 0);
    76         console.assert(maxSize >= 0);
    77         console.assert(minSize <= maxSize);
     73        console.assert(size instanceof WI.Size);
     74        console.assert(min >= 0);
     75        console.assert(max >= 0);
     76        console.assert(min <= max);
    7877
    79         this._updateDetails(minSize, maxSize);
     78        this._updateDetails(min, max);
     79
    8080        this._chart.clear();
     81        this._chart.size = size;
     82        this._chart.needsLayout();
    8183
    8284        if (!dataPoints.length)
    … …  
    8486
    8587        // Ensure an empty graph is empty.
    86         if (!maxSize)
     88        if (!max)
    8789            return;
    8890
    … …  
    101103        // Extend the last data point to the end time.
    102104        let lastDataPoint = dataPoints.lastValue;
    103         let lastX = Math.floor(xScale(lastTime));
     105        let lastX = Math.floor(xScale(visibleEndTime));
    104106        let lastY = yScale(lastDataPoint.size);
    105107        this._chart.addPoint(lastX, lastY);
    106 
    107         this._chart.updateLayout();
    108108    }
    109109

  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css

    r240518 r240763  
    2828}
    2929
    30 .timeline-view.memory > .content {
    31     width: 970px;
    32     margin: 10px auto;
    33 }
    34 
    3530.timeline-view.memory > .content > .overview {
    36     padding-bottom: 10px;
     31    padding: 10px;
    3732    margin-bottom: 10px;
    3833    border-bottom: 1px solid var(--border-color);
    … …  
    9186
    9287.timeline-view.memory > .content > .overview > .divider {
    93     margin-left: 10px;
    94     margin-right: 10px;
     88    margin: 0 5px;
    9589
    9690    --memory-timeline-view-overview-divider-border-end: 1px solid var(--border-color);
    … …  
    106100
    107101.timeline-view.memory > .content > .overview .total-usage,
    108 .timeline-view.memory > .content > .overview .max-percentage {
     102.timeline-view.memory > .content > .overview .max-percentage,
     103.timeline-view.memory > .content > .overview .legend .size {
    109104    margin: auto;
    110105    color: var(--text-color-secondary);
    … …  
    112107
    113108.timeline-view.memory .legend {
     109    -webkit-padding-start: 20px;
    114110    text-align: start;
    115 
    116     --memory-timeline-view-legent-padding-start: 20px;
    117111}
    118112
    119 body[dir=ltr] .timeline-view.memory .legend {
    120     padding-left: var(--memory-timeline-view-legent-padding-start);
     113.timeline-view.memory .legend .row {
     114    display: flex;
    121115}
    122116
    123 body[dir=rtl] .timeline-view.memory .legend {
    124     padding-right: var(--memory-timeline-view-legent-padding-start);
     117.timeline-view.memory .legend .row + .row {
     118    margin-top: 4px;
    125119}
    126120
    127 .timeline-view.memory .legend > .row {
    128     position: relative;
    129     width: 100px;
    130     height: 27px;
    131 
    132     --memory-timeline-view-legend-row-offset-start: 20px;
     121.timeline-view.memory .legend .swatch {
     122    width: 1em;
     123    height: 1em;
     124    margin-top: 1px;
     125    -webkit-margin-end: 8px;
    133126}
    134127
    135 .timeline-view.memory .legend > .row > .swatch {
    136     position: absolute;
    137     top: 1px;
    138     width: 1em;
    139     height: 1em;
    140 }
    141 
    142 body[dir=ltr] .timeline-view.memory .legend > .row > .swatch {
    143     left: 0;
    144 }
    145 
    146 body[dir=rtl] .timeline-view.memory .legend > .row > .swatch {
    147     right: 0;
    148 }
    149 
    150 .timeline-view.memory .legend > .row > p {
    151     margin: 0;
    152 }
    153 
    154 body[dir=ltr] .timeline-view.memory .legend > .row > :matches(.label, .size) {
    155     left: var(--memory-timeline-view-legend-row-offset-start);
    156 }
    157 
    158 body[dir=rtl] .timeline-view.memory .legend > .row > :matches(.label, .size) {
    159     right: var(--memory-timeline-view-legend-row-offset-start);
    160 }
    161 
    162 .timeline-view.memory .legend > .row > .label {
    163     position: absolute;
    164     top: 0;
    165 }
    166 
    167 .timeline-view.memory .legend > .row > .size {
    168     position: absolute;
    169     top: 12px;
    170     color: var(--text-color-secondary);
    171 }
    172 
    173 .timeline-view.memory .legend > .row > .swatch.javascript {
     128.timeline-view.memory .legend .swatch.javascript {
    174129    border: 1px solid var(--memory-javascript-stroke-color);
    175130    background: var(--memory-javascript-fill-color);
    176131}
    177132
    178 .timeline-view.memory .legend > .row > .swatch.images {
     133.timeline-view.memory .legend .swatch.images {
    179134    border: 1px solid var(--memory-images-stroke-color);
    180135    background: var(--memory-images-fill-color);
    181136}
    182137
    183 .timeline-view.memory .legend > .row > .swatch.layers {
     138.timeline-view.memory .legend .swatch.layers {
    184139    border: 1px solid var(--memory-layers-stroke-color);
    185140    background: var(--memory-layers-fill-color);
    186141}
    187142
    188 .timeline-view.memory .legend > .row > .swatch.page {
     143.timeline-view.memory .legend .swatch.page {
    189144    border: 1px solid var(--memory-page-stroke-color);
    190145    background: var(--memory-page-fill-color);
    191146}
    192147
     148.timeline-view.memory .legend .swatch.current {
     149    border: 1px solid var(--memory-max-comparison-stroke-color);
     150    background: var(--memory-max-comparison-fill-color);
     151}
    193152
    194153.timeline-view.memory .circle-chart > svg > path.javascript,
    … …  
    216175}
    217176
    218 .timeline-view.memory .legend > .row > .swatch.current {
    219     border: 1px solid var(--memory-max-comparison-stroke-color);
    220     background: var(--memory-max-comparison-fill-color);
    221 }
    222 
    223177.timeline-view.memory .circle-chart > svg > path.current {
    224178    stroke: var(--memory-max-comparison-stroke-color);

  • trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js

    r240457 r240763  
    159159    layout()
    160160    {
     161        if (this.layoutReason === WI.View.LayoutReason.Resize)
     162            return;
     163
    161164        // Always update timeline ruler.
    162165        this._timelineRuler.zeroTime = this.zeroTime;
    … …  
    167170            return;
    168171
     172        const memoryCategoryViewHeight = 75; // Keep this in sync with .memory-category-view
     173
    169174        let graphStartTime = this.startTime;
    170175        let graphEndTime = this.endTime;
     176        let secondsPerPixel = this._timelineRuler.secondsPerPixel;
    171177        let visibleEndTime = Math.min(this.endTime, this.currentTime);
    172178
    … …  
    195201        this._updateMaxComparisonLegend(lastRecord.totalSize);
    196202
    197         // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory / CPU Timeline Views should be responsive / resizable
    198         const categoryViewWidth = 800;
    199         const categoryViewHeight = 75;
    200 
    201         let secondsPerPixel = (graphEndTime - graphStartTime) / categoryViewWidth;
    202 
    203203        let categoryDataMap = {};
    204204        for (let categoryView of this._categoryViews)
    … …  
    236236            visibleEndTime = discontinuities[0].startTime;
    237237
    238         function layoutCategoryView(categoryView, categoryData) {
    239             let {dataPoints, min, max} = categoryData;
    240 
     238        function layoutCategoryView(categoryView, {dataPoints, min, max}) {
    241239            if (min === Infinity)
    242240                min = 0;
    … …  
    251249                return (time - graphStartTime) / secondsPerPixel;
    252250            }
    253             function yScale(size) {
    254                 return categoryViewHeight - (((size - graphMin) / graphMax) * categoryViewHeight);
     251
     252            let size = new WI.Size(xScale(graphEndTime), memoryCategoryViewHeight);
     253
     254            function yScale(value) {
     255                return size.height - (((value - graphMin) / graphMax) * size.height);
    255256            }
    256257
    257             categoryView.layoutWithDataPoints(dataPoints, visibleEndTime, min, max, xScale, yScale);
     258            categoryView.updateChart(dataPoints, size, visibleEndTime, min, max, xScale, yScale);
    258259        }
    259260
    … …  
    350351            let rowElement = legendElement.appendChild(document.createElement("div"));
    351352            rowElement.classList.add("row");
     353
    352354            let swatchElement = rowElement.appendChild(document.createElement("div"));
    353355            swatchElement.classList.add("swatch", swatchClass);
    354             let labelElement = rowElement.appendChild(document.createElement("p"));
     356
     357            let valueContainer = rowElement.appendChild(document.createElement("div"));
     358            valueContainer.classList.add("value");
     359
     360            let labelElement = valueContainer.appendChild(document.createElement("div"));
    355361            labelElement.classList.add("label");
    356362            labelElement.textContent = label;
    357             let sizeElement = rowElement.appendChild(document.createElement("p"));
     363
     364            let sizeElement = valueContainer.appendChild(document.createElement("div"));
    358365            sizeElement.classList.add("size");
    359366
    … …  
    370377            let categoryView = new WI.MemoryCategoryView(type, WI.MemoryTimelineView.displayNameForCategory(type));
    371378            this._categoryViews.push(categoryView);
     379            this.addSubview(categoryView);
    372380            if (!lastCategoryViewElement)
    373381                this._detailsContainerElement.appendChild(categoryView.element);
Note: See TracChangeset for help on using the changeset viewer.