OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2013 Google Inc. All rights reserved. | 2 * Copyright (C) 2013 Google Inc. All rights reserved. |
3 * | 3 * |
4 * Redistribution and use in source and binary forms, with or without | 4 * Redistribution and use in source and binary forms, with or without |
5 * modification, are permitted provided that the following conditions are | 5 * modification, are permitted provided that the following conditions are |
6 * met: | 6 * met: |
7 * | 7 * |
8 * * Redistributions of source code must retain the above copyright | 8 * * Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * * Redistributions in binary form must reproduce the above | 10 * * Redistributions in binary form must reproduce the above |
(...skipping 139 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
150 */ | 150 */ |
151 constructor(model) { | 151 constructor(model) { |
152 super('network', Common.UIString('NET'), model); | 152 super('network', Common.UIString('NET'), model); |
153 } | 153 } |
154 | 154 |
155 /** | 155 /** |
156 * @override | 156 * @override |
157 */ | 157 */ |
158 update() { | 158 update() { |
159 super.update(); | 159 super.update(); |
160 var height = this.height(); | 160 const height = this.height(); |
161 var numBands = categoryBand(Timeline.TimelineUIUtils.NetworkCategory.Other)
+ 1; | 161 const numBands = categoryBand(Timeline.TimelineUIUtils.NetworkCategory.Other
) + 1; |
162 var bandHeight = Math.floor(height / numBands); | 162 const devicePixelRatio = window.devicePixelRatio; |
163 var devicePixelRatio = window.devicePixelRatio; | 163 const bandHeight = height - (numBands + 1) * devicePixelRatio; |
164 var timeOffset = this._model.minimumRecordTime(); | 164 const timeOffset = this._model.minimumRecordTime(); |
165 var timeSpan = this._model.maximumRecordTime() - timeOffset; | 165 const timeSpan = this._model.maximumRecordTime() - timeOffset; |
166 var canvasWidth = this.width(); | 166 const canvasWidth = this.width(); |
167 var scale = canvasWidth / timeSpan; | 167 const scale = canvasWidth / timeSpan; |
168 var ctx = this.context(); | 168 const ctx = this.context(); |
169 var requests = this._model.networkRequests(); | 169 const paths = []; |
170 /** @type {!Map<string,!{waiting:!Path2D,transfer:!Path2D}>} */ | 170 for (const categoryName in Timeline.TimelineUIUtils.NetworkCategory) { |
171 var paths = new Map(); | 171 const category = Timeline.TimelineUIUtils.NetworkCategory[categoryName]; |
172 requests.forEach(drawRequest); | 172 paths[categoryBand(category)] = { |
173 for (var path of paths) { | 173 style: Timeline.TimelineUIUtils.networkCategoryColor(category), |
174 ctx.fillStyle = path[0]; | 174 path: new Path2D() |
175 ctx.globalAlpha = 0.3; | 175 }; |
176 ctx.fill(path[1]['waiting']); | 176 } |
| 177 for (const request of this._model.networkRequests()) { |
| 178 const category = Timeline.TimelineUIUtils.networkRequestCategory(request); |
| 179 const band = categoryBand(category); |
| 180 const y = (numBands - band - 1) * devicePixelRatio; |
| 181 const s = Math.max(Math.floor((request.startTime - timeOffset) * scale), 0
); |
| 182 const e = Math.min(Math.ceil((request.endTime - timeOffset) * scale + 1),
canvasWidth); |
| 183 paths[band].path.rect(s, y, e - s, bandHeight); |
| 184 } |
| 185 for (const path of paths.reverse()) { |
177 ctx.globalAlpha = 1; | 186 ctx.globalAlpha = 1; |
178 ctx.fill(path[1]['transfer']); | 187 ctx.fillStyle = path.style; |
| 188 ctx.fill(path.path); |
| 189 ctx.globalAlpha = 0.4; |
| 190 ctx.fillStyle = 'white'; |
| 191 ctx.fill(path.path); |
179 } | 192 } |
180 | 193 |
181 /** | 194 /** |
182 * @param {!Timeline.TimelineUIUtils.NetworkCategory} category | 195 * @param {!Timeline.TimelineUIUtils.NetworkCategory} category |
183 * @return {number} | 196 * @return {number} |
184 */ | 197 */ |
185 function categoryBand(category) { | 198 function categoryBand(category) { |
186 var categories = Timeline.TimelineUIUtils.NetworkCategory; | 199 const categories = Timeline.TimelineUIUtils.NetworkCategory; |
187 switch (category) { | 200 switch (category) { |
188 case categories.HTML: | 201 case categories.HTML: |
189 return 0; | 202 return 0; |
190 case categories.Script: | 203 case categories.Script: |
191 return 1; | 204 return 1; |
192 case categories.Style: | 205 case categories.Style: |
193 return 2; | 206 return 2; |
194 case categories.Media: | 207 case categories.Media: |
195 return 3; | 208 return 3; |
196 default: | 209 default: |
197 return 4; | 210 return 4; |
198 } | 211 } |
199 } | 212 } |
200 | |
201 /** | |
202 * @param {!TimelineModel.TimelineModel.NetworkRequest} request | |
203 */ | |
204 function drawRequest(request) { | |
205 var tickWidth = 2 * devicePixelRatio; | |
206 var category = Timeline.TimelineUIUtils.networkRequestCategory(request); | |
207 var style = Timeline.TimelineUIUtils.networkCategoryColor(category); | |
208 var band = categoryBand(category); | |
209 var y = band * bandHeight; | |
210 var path = paths.get(style); | |
211 if (!path) { | |
212 path = {waiting: new Path2D(), transfer: new Path2D()}; | |
213 paths.set(style, path); | |
214 } | |
215 var s = Math.max(Math.floor((request.startTime - timeOffset) * scale), 0); | |
216 var e = Math.min(Math.ceil((request.endTime - timeOffset) * scale), canvas
Width); | |
217 path['waiting'].rect(s, y, e - s, bandHeight - 1); | |
218 path['transfer'].rect(e - tickWidth / 2, y, tickWidth, bandHeight - 1); | |
219 if (!request.responseTime) | |
220 return; | |
221 var r = Math.ceil((request.responseTime - timeOffset) * scale); | |
222 path['transfer'].rect(r - tickWidth / 2, y, tickWidth, bandHeight - 1); | |
223 } | |
224 } | 213 } |
225 }; | 214 }; |
226 | 215 |
227 /** | 216 /** |
228 * @unrestricted | 217 * @unrestricted |
229 */ | 218 */ |
230 Timeline.TimelineEventOverviewCPUActivity = class extends Timeline.TimelineEvent
Overview { | 219 Timeline.TimelineEventOverviewCPUActivity = class extends Timeline.TimelineEvent
Overview { |
231 /** | 220 /** |
232 * @param {!TimelineModel.TimelineModel} model | 221 * @param {!TimelineModel.TimelineModel} model |
233 */ | 222 */ |
(...skipping 544 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
778 counters[group] = this._quantDuration; | 767 counters[group] = this._quantDuration; |
779 this._callback(counters); | 768 this._callback(counters); |
780 interval -= this._quantDuration; | 769 interval -= this._quantDuration; |
781 } | 770 } |
782 this._counters = []; | 771 this._counters = []; |
783 this._counters[group] = interval; | 772 this._counters[group] = interval; |
784 this._lastTime = time; | 773 this._lastTime = time; |
785 this._remainder = this._quantDuration - interval; | 774 this._remainder = this._quantDuration - interval; |
786 } | 775 } |
787 }; | 776 }; |
OLD | NEW |