Changeset 188916 in webkit


Ignore:
Timestamp:
Aug 25, 2015 10:55:07 AM (9 years ago)
Author:
Matt Baker
Message:

Web Inspector: Rendering Frames pie chart should use the needsLayout/updateLayout idiom
​https://bugs.webkit.org/show_bug.cgi?id=148412

Reviewed by Timothy Hatcher.

  • UserInterface/Views/ChartDetailsSectionRow.js:

(WebInspector.ChartDetailsSectionRow):
(WebInspector.ChartDetailsSectionRow.prototype.set innerLabel):
(WebInspector.ChartDetailsSectionRow.prototype.set innerRadius):
Schedule a layout.
(WebInspector.ChartDetailsSectionRow.prototype.set data): Deleted.
Replaced by addItem, setItemValue, and clearItems.
(WebInspector.ChartDetailsSectionRow.prototype.addItem):
(WebInspector.ChartDetailsSectionRow.prototype.setItemValue):
(WebInspector.ChartDetailsSectionRow.prototype.clearItems):
Add/update data points and schedule a layout.
(WebInspector.ChartDetailsSectionRow.prototype._needsLayout):
(WebInspector.ChartDetailsSectionRow.prototype.updateLayout):
Update legend and draw pie chart.
(WebInspector.ChartDetailsSectionRow.prototype._createLegend): Deleted.
Refactored as _updateLegend.
(WebInspector.ChartDetailsSectionRow.prototype._refresh): Deleted.
Refactored as updateLayout.

  • UserInterface/Views/TimelineSidebarPanel.js:

(WebInspector.TimelineSidebarPanel):
Add chart data points once.
(WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart):
Update chart values.

Location:
trunk/Source/WebInspectorUI
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r188897 r188916  
     12015-08-25  Matt Baker  <mattbaker@apple.com>
     2
     3        Web Inspector: Rendering Frames pie chart should use the needsLayout/updateLayout idiom
     4        https://bugs.webkit.org/show_bug.cgi?id=148412
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * UserInterface/Views/ChartDetailsSectionRow.js:
     9        (WebInspector.ChartDetailsSectionRow):
     10        (WebInspector.ChartDetailsSectionRow.prototype.set innerLabel):
     11        (WebInspector.ChartDetailsSectionRow.prototype.set innerRadius):
     12        Schedule a layout.
     13        (WebInspector.ChartDetailsSectionRow.prototype.set data): Deleted.
     14        Replaced by addItem, setItemValue, and clearItems.
     15        (WebInspector.ChartDetailsSectionRow.prototype.addItem):
     16        (WebInspector.ChartDetailsSectionRow.prototype.setItemValue):
     17        (WebInspector.ChartDetailsSectionRow.prototype.clearItems):
     18        Add/update data points and schedule a layout.
     19        (WebInspector.ChartDetailsSectionRow.prototype._needsLayout):
     20        (WebInspector.ChartDetailsSectionRow.prototype.updateLayout):
     21        Update legend and draw pie chart.
     22        (WebInspector.ChartDetailsSectionRow.prototype._createLegend): Deleted.
     23        Refactored as _updateLegend.
     24        (WebInspector.ChartDetailsSectionRow.prototype._refresh): Deleted.
     25        Refactored as updateLayout.
     26
     27        * UserInterface/Views/TimelineSidebarPanel.js:
     28        (WebInspector.TimelineSidebarPanel):
     29        Add chart data points once.
     30        (WebInspector.TimelineSidebarPanel._refreshFrameSelectionChart):
     31        Update chart values.
     32
    1332015-08-24  Brian Burg  <bburg@apple.com>
    234

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

    r188861 r188916  
    4949
    5050        this._delegate = delegate;
    51         this._items = [];
     51        this._items = new Map;
    5252        this._title = "";
    5353        this._innerLabel = "";
    … …  
    8484        this._innerLabel = label;
    8585
    86         this._refresh();
     86        this._needsLayout();
    8787    }
    8888
    … …  
    9494        this._innerRadius = radius;
    9595
    96         this._refresh();
     96        this._needsLayout();
    9797    }
    9898
    … …  
    102102    }
    103103
    104     set data(items)
    105     {
    106         if (!(items instanceof Array))
    107             items = [items];
    108 
    109         items = items.filter(function(item) { return item.value >= 0; });
    110         if (!this._items.length && !items.length)
    111             return;
    112 
    113         if (this._items.length === items.length && this._items.every(function(item, index) { return JSON.stringify(item) === JSON.stringify(items[index]); }))
    114             return;
    115 
    116         this._items = items;
    117         this._total = this._items.reduce(function(previousValue, currentValue) { return previousValue + currentValue.value; }, 0);;
    118 
    119         this._createLegend();
    120         this._refresh();
     104    addItem(id, label, value, color, checkbox, checked)
     105    {
     106        console.assert(!this._items.has(id), "Already added item with id: " + id);
     107        if (this._items.has(id))
     108            return;
     109
     110        console.assert(value >= 0, "Value cannot be negative.");
     111        if (value < 0)
     112            return;
     113
     114        this._items.set(id, {label, value, color, checkbox, checked});
     115        this._total += value;
     116
     117        this._needsLayout();
     118    }
     119
     120    setItemValue(id, value)
     121    {
     122        let item = this._items.get(id);
     123        console.assert(item, "Cannot set value for invalid item id: " + id);
     124        if (!item)
     125            return;
     126
     127        console.assert(value >= 0, "Value cannot be negative.");
     128        if (value < 0)
     129            return;
     130
     131        if (item.value === value)
     132            return;
     133
     134        this._total += value - item.value;
     135        item.value = value;
     136
     137        this._needsLayout();
     138    }
     139
     140    clearItems()
     141    {
     142        this._total = 0;
     143        this._items.clear();
     144
     145        this._needsLayout();
    121146    }
    122147
    … …  
    166191    }
    167192
    168     _createLegend()
    169     {
    170         this._legendElement.removeChildren();
    171 
    172         for (let item of this._items) {
     193    _updateLegend()
     194    {
     195        if (!this._items.size) {
     196            this._legendElement.removeChildren();
     197            return;
     198        }
     199
     200        function formatItemValue(item)
     201        {
     202            if (this._delegate && typeof this._delegate.formatChartValue === "function")
     203                return this._delegate.formatChartValue(item.value);
     204            return item.value;
     205        }
     206
     207        for (let [id, item] of this._items) {
     208            if (item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol]) {
     209                let valueElement = item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol];
     210                valueElement.textContent = formatItemValue.call(this, item);
     211                continue;
     212            }
     213
    173214            let labelElement = document.createElement("label");
    174215            let keyElement;
    175216            if (item.checkbox) {
    176                 let className = item.id.toLowerCase();
     217                let className = id.toLowerCase();
    177218                let rgb = item.color.substring(4, item.color.length - 1).replace(/ /g, "").split(",");
    178219                if (rgb[0] === rgb[1] && rgb[1] === rgb[2])
    … …  
    183224                keyElement.classList.add(className);
    184225                keyElement.checked = item.checked;
    185                 keyElement[WebInspector.ChartDetailsSectionRow.DataItemIdSymbol] = item.id;
     226                keyElement[WebInspector.ChartDetailsSectionRow.DataItemIdSymbol] = id;
    186227
    187228                keyElement.addEventListener("change", this._legendItemCheckboxValueChanged.bind(this));
    … …  
    198239            let valueElement = document.createElement("div");
    199240            valueElement.classList.add("value");
    200 
    201             if (this._delegate && typeof this._delegate.formatChartValue === "function")
    202                 valueElement.textContent = this._delegate.formatChartValue(item.value);
    203             else
    204                 valueElement.textContent = item.value;
     241            valueElement.textContent = formatItemValue.call(this, item);
     242
     243            item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol] = valueElement;
    205244
    206245            let legendItemElement = document.createElement("div");
    … …  
    219258    }
    220259
    221     _refresh()
    222     {
     260    _needsLayout()
     261    {
     262        if (this._scheduledLayoutUpdateIdentifier)
     263            return;
     264
     265        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
     266    }
     267
     268    updateLayout()
     269    {
     270        if (this._scheduledLayoutUpdateIdentifier) {
     271            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
     272            this._scheduledLayoutUpdateIdentifier = undefined;
     273        }
     274
     275        this._updateLegend();
     276
    223277        var width = this._canvas.clientWidth * window.devicePixelRatio;
    224278        var height = this._canvas.clientHeight * window.devicePixelRatio;
    … …  
    254308        context.restore();
    255309
    256         for (var item of this._items) {
     310        for (let [id, item] of this._items) {
    257311            if (item.value === 0)
    258312                continue;
    … …  
    273327
    274328WebInspector.ChartDetailsSectionRow.DataItemIdSymbol = Symbol("chart-details-section-row-data-item-id");
     329WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol = Symbol("chart-details-section-row-legend-item-value-element");
    275330
    276331WebInspector.ChartDetailsSectionRow.Event = {

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

    r188861 r188916  
    9898            this._frameSelectionChartRow.addEventListener(WebInspector.ChartDetailsSectionRow.Event.LegendItemChecked, this._frameSelectionLegendItemChecked, this);
    9999
     100            for (let key in WebInspector.RenderingFrameTimelineRecord.TaskType) {
     101                let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
     102                let label = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(taskType);
     103                let color = this._chartColors.get(taskType);
     104                let checkbox = taskType !== WebInspector.RenderingFrameTimelineRecord.TaskType.Other;
     105                this._frameSelectionChartRow.addItem(taskType, label, 0, color, checkbox, true);
     106            }
     107
    100108            this._renderingFrameTaskFilter = new Set;
    101109
    … …  
    894902        }
    895903
    896         var chart = this._frameSelectionChartRow;
    897         var records = getSelectedRecords.call(this);
    898         var chartData = Object.keys(WebInspector.RenderingFrameTimelineRecord.TaskType).map(function(taskTypeKey) {
    899             let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[taskTypeKey];
    900             let label = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(taskType);
     904        let records = getSelectedRecords.call(this);
     905        for (let key in WebInspector.RenderingFrameTimelineRecord.TaskType) {
     906            let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
    901907            let value = records.reduce(function(previousValue, currentValue) { return previousValue + currentValue.durationForTask(taskType); }, 0);
    902             let color = this._chartColors.get(taskType);
    903             let checkbox = taskType !== WebInspector.RenderingFrameTimelineRecord.TaskType.Other;
    904             let checked = checkbox && !this._renderingFrameTaskFilter.has(taskType);
    905             return {id: taskType, label, value, color, checkbox, checked};
    906         }, this);
    907 
    908         this._frameSelectionChartRow.data = chartData;
     908            this._frameSelectionChartRow.setItemValue(taskType, value);
     909        }
    909910
    910911        if (!records.length) {
Note: See TracChangeset for help on using the changeset viewer.