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 bandHeight = height - numBands; |
163 var devicePixelRatio = window.devicePixelRatio; | 163 const timeOffset = this._model.minimumRecordTime(); |
164 var timeOffset = this._model.minimumRecordTime(); | 164 const timeSpan = this._model.maximumRecordTime() - timeOffset; |
165 var timeSpan = this._model.maximumRecordTime() - timeOffset; | 165 const canvasWidth = this.width(); |
166 var canvasWidth = this.width(); | 166 const scale = canvasWidth / timeSpan; |
167 var scale = canvasWidth / timeSpan; | 167 const ctx = this.context(); |
168 var ctx = this.context(); | 168 const requests = this._model.networkRequests(); |
169 var requests = this._model.networkRequests(); | 169 const paths = new Array(numBands).fill(0).map(() => ({style: '', path: new P ath2D()})); |
170 /** @type {!Map<string,!{waiting:!Path2D,transfer:!Path2D}>} */ | |
171 var paths = new Map(); | |
172 requests.forEach(drawRequest); | 170 requests.forEach(drawRequest); |
caseq
2017/01/20 23:07:02
let's make changes to path more explicit?
| |
173 for (var path of paths) { | 171 ctx.globalAlpha = 0.7; |
174 ctx.fillStyle = path[0]; | 172 paths.reverse().forEach(path => { |
175 ctx.globalAlpha = 0.3; | 173 ctx.fillStyle = 'white'; |
176 ctx.fill(path[1]['waiting']); | 174 ctx.fill(path.path); |
177 ctx.globalAlpha = 1; | 175 ctx.fillStyle = path.style; |
178 ctx.fill(path[1]['transfer']); | 176 ctx.fill(path.path); |
179 } | 177 }); |
180 | 178 |
181 /** | 179 /** |
182 * @param {!Timeline.TimelineUIUtils.NetworkCategory} category | 180 * @param {!Timeline.TimelineUIUtils.NetworkCategory} category |
183 * @return {number} | 181 * @return {number} |
184 */ | 182 */ |
185 function categoryBand(category) { | 183 function categoryBand(category) { |
186 var categories = Timeline.TimelineUIUtils.NetworkCategory; | 184 var categories = Timeline.TimelineUIUtils.NetworkCategory; |
187 switch (category) { | 185 switch (category) { |
188 case categories.HTML: | 186 case categories.HTML: |
189 return 0; | 187 return 0; |
190 case categories.Script: | 188 case categories.Script: |
191 return 1; | 189 return 1; |
192 case categories.Style: | 190 case categories.Style: |
193 return 2; | 191 return 2; |
194 case categories.Media: | 192 case categories.Media: |
195 return 3; | 193 return 3; |
196 default: | 194 default: |
197 return 4; | 195 return 4; |
198 } | 196 } |
199 } | 197 } |
200 | 198 |
201 /** | 199 /** |
202 * @param {!TimelineModel.TimelineModel.NetworkRequest} request | 200 * @param {!TimelineModel.TimelineModel.NetworkRequest} request |
203 */ | 201 */ |
204 function drawRequest(request) { | 202 function drawRequest(request) { |
205 var tickWidth = 2 * devicePixelRatio; | 203 const category = Timeline.TimelineUIUtils.networkRequestCategory(request); |
206 var category = Timeline.TimelineUIUtils.networkRequestCategory(request); | 204 const style = Timeline.TimelineUIUtils.networkCategoryColor(category); |
caseq
2017/01/20 23:07:02
inline?
| |
207 var style = Timeline.TimelineUIUtils.networkCategoryColor(category); | 205 const band = categoryBand(category); |
208 var band = categoryBand(category); | 206 const path = paths[band]; |
209 var y = band * bandHeight; | 207 const y = (numBands - band - 1); |
210 var path = paths.get(style); | 208 const s = Math.max(Math.floor((request.startTime - timeOffset) * scale), 0 ); |
211 if (!path) { | 209 const e = Math.min(Math.ceil((request.endTime - timeOffset) * scale), canv asWidth); |
212 path = {waiting: new Path2D(), transfer: new Path2D()}; | 210 path.style = style; |
caseq
2017/01/20 23:07:02
why do we change band path's style each time?
| |
213 paths.set(style, path); | 211 path.path.rect(s, y, e - s, bandHeight - 1); |
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 } | 212 } |
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 |
(...skipping 545 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 |