OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @implements {Timeline.TimelineModeView} | 6 * @implements {Timeline.TimelineModeView} |
7 * @implements {PerfUI.FlameChartDelegate} | 7 * @implements {PerfUI.FlameChartDelegate} |
8 * @implements {UI.Searchable} | 8 * @implements {UI.Searchable} |
9 * @unrestricted | 9 * @unrestricted |
10 */ | 10 */ |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
72 this._detailsSplitWidget.show(this.element); | 72 this._detailsSplitWidget.show(this.element); |
73 | 73 |
74 this._onMainEntrySelected = this._onEntrySelected.bind(this, this._mainDataP
rovider); | 74 this._onMainEntrySelected = this._onEntrySelected.bind(this, this._mainDataP
rovider); |
75 this._onNetworkEntrySelected = this._onEntrySelected.bind(this, this._networ
kDataProvider); | 75 this._onNetworkEntrySelected = this._onEntrySelected.bind(this, this._networ
kDataProvider); |
76 this._mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntrySelected
, this._onMainEntrySelected, this); | 76 this._mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntrySelected
, this._onMainEntrySelected, this); |
77 this._networkFlameChart.addEventListener(PerfUI.FlameChart.Events.EntrySelec
ted, this._onNetworkEntrySelected, this); | 77 this._networkFlameChart.addEventListener(PerfUI.FlameChart.Events.EntrySelec
ted, this._onNetworkEntrySelected, this); |
78 this._mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntryHighligh
ted, this._onEntryHighlighted, this); | 78 this._mainFlameChart.addEventListener(PerfUI.FlameChart.Events.EntryHighligh
ted, this._onEntryHighlighted, this); |
79 this._nextExtensionIndex = 0; | 79 this._nextExtensionIndex = 0; |
80 | 80 |
81 this._boundRefresh = this._refresh.bind(this); | 81 this._boundRefresh = this._refresh.bind(this); |
| 82 |
| 83 this._mainDataProvider.setEventColorMapping(Timeline.TimelineUIUtils.eventCo
lor); |
| 84 if (Runtime.experiments.isEnabled('timelineColorByProduct')) |
| 85 ProductRegistry.instance().then(registry => this._productRegistry = regist
ry); |
82 } | 86 } |
83 | 87 |
84 /** | 88 /** |
| 89 * @param {!UI.Toolbar} toolbar |
| 90 */ |
| 91 populateToolbar(toolbar) { |
| 92 if (!Runtime.experiments.isEnabled('timelineColorByProduct')) |
| 93 return; |
| 94 toolbar.appendSeparator(); |
| 95 var colorBySetting = Common.settings.createSetting('timelineColorBy', Timeli
ne.TimelineFlameChartView._ColorBy.URL); |
| 96 colorBySetting.addChangeListener(this._onColorByChanged, this); |
| 97 var options = [ |
| 98 {value: Timeline.TimelineFlameChartView._ColorBy.URL, label: Common.UIStri
ng('Color by URL')}, |
| 99 {value: Timeline.TimelineFlameChartView._ColorBy.Product, label: Common.UI
String('Color by Product')} |
| 100 ]; |
| 101 this._colorByCombobox = new UI.ToolbarSettingComboBox(options, colorBySettin
g); |
| 102 toolbar.appendToolbarItem(this._colorByCombobox); |
| 103 this._onColorByChanged(); |
| 104 } |
| 105 |
| 106 _onColorByChanged() { |
| 107 /** @type {!Map<string, string>} */ |
| 108 this._urlToColorCache = new Map(); |
| 109 this._mainDataProvider.setEventColorMapping( |
| 110 this._colorByCombobox.selectedOption().value === Timeline.TimelineFlameC
hartView._ColorBy.Product ? |
| 111 colorByProduct.bind(this) : |
| 112 Timeline.TimelineUIUtils.eventColor); |
| 113 this._mainFlameChart.update(); |
| 114 |
| 115 /** |
| 116 * @param {!SDK.TracingModel.Event} event |
| 117 * @this {Timeline.TimelineFlameChartView} |
| 118 * @return {string} |
| 119 */ |
| 120 function colorByProduct(event) { |
| 121 if (event.name !== TimelineModel.TimelineModel.RecordType.JSFrame) |
| 122 return Timeline.TimelineUIUtils.eventStyle(event).category.color; |
| 123 var frame = event.args['data']; |
| 124 if (!Timeline.TimelineUIUtils.isUserFrame(frame)) |
| 125 return Timeline.TimelineUIUtils.eventStyle(event).category.color; |
| 126 var color = this._urlToColorCache.get(frame.url); |
| 127 if (!color) { |
| 128 var defaultColor = '#f2ecdc'; |
| 129 if (!this._productRegistry) |
| 130 return defaultColor; |
| 131 var parsedURL = frame.url.asParsedURL(); |
| 132 var name = parsedURL && this._productRegistry.nameForUrl(parsedURL); |
| 133 color = name ? Timeline.TimelineUIUtils.colorForId(name) : defaultColor; |
| 134 this._urlToColorCache.set(frame.url, color); |
| 135 } |
| 136 return color; |
| 137 } |
| 138 } |
| 139 |
| 140 /** |
85 * @override | 141 * @override |
86 * @return {?Element} | 142 * @return {?Element} |
87 */ | 143 */ |
88 resizerElement() { | 144 resizerElement() { |
89 return null; | 145 return null; |
90 } | 146 } |
91 | 147 |
92 /** | 148 /** |
93 * @override | 149 * @override |
94 * @param {number} windowStartTime | 150 * @param {number} windowStartTime |
(...skipping 431 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
526 context.translate(this._style.lineWidth < 1 || (this._style.lineWidth & 1)
? 0.5 : 0, 0.5); | 582 context.translate(this._style.lineWidth < 1 || (this._style.lineWidth & 1)
? 0.5 : 0, 0.5); |
527 context.beginPath(); | 583 context.beginPath(); |
528 context.moveTo(x, height); | 584 context.moveTo(x, height); |
529 context.setLineDash(this._style.dashStyle); | 585 context.setLineDash(this._style.dashStyle); |
530 context.lineTo(x, context.canvas.height); | 586 context.lineTo(x, context.canvas.height); |
531 context.stroke(); | 587 context.stroke(); |
532 } | 588 } |
533 context.restore(); | 589 context.restore(); |
534 } | 590 } |
535 }; | 591 }; |
| 592 |
| 593 /** @enum {string} */ |
| 594 Timeline.TimelineFlameChartView._ColorBy = { |
| 595 URL: 'URL', |
| 596 Product: 'Product' |
| 597 }; |
OLD | NEW |