Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(764)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/network/NetworkWaterfallColumn.js

Issue 2548663002: [Devtools] Rename logEntries to node in network (Closed)
Patch Set: Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 * @unrestricted 5 * @unrestricted
6 */ 6 */
7 Network.NetworkWaterfallColumn = class extends UI.VBox { 7 Network.NetworkWaterfallColumn = class extends UI.VBox {
8 /** 8 /**
9 * @param {number} rowHeight 9 * @param {number} rowHeight
10 * @param {!Network.NetworkTimeCalculator} calculator 10 * @param {!Network.NetworkTimeCalculator} calculator
(...skipping 16 matching lines...) Expand all
27 this._rightPadding = 0; 27 this._rightPadding = 0;
28 28
29 this._rowHeight = rowHeight; 29 this._rowHeight = rowHeight;
30 this._headerHeight = 0; 30 this._headerHeight = 0;
31 this._calculator = calculator; 31 this._calculator = calculator;
32 32
33 this._popoverHelper = new UI.PopoverHelper(this.element); 33 this._popoverHelper = new UI.PopoverHelper(this.element);
34 this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), t his._showPopover.bind(this)); 34 this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), t his._showPopover.bind(this));
35 this._popoverHelper.setTimeout(300, 300); 35 this._popoverHelper.setTimeout(300, 300);
36 36
37 /** @type {!Array<!Network.NetworkLogEntry>} */ 37 /** @type {!Array<!Network.NetworkDataGridNode>} */
38 this._logEntries = []; 38 this._nodes = [];
39 39
40 /** @type {?Network.NetworkLogEntry} */ 40 /** @type {?Network.NetworkDataGridNode} */
41 this._hoveredLogEntry = null; 41 this._hoveredNode = null;
42 /** @type {?SDK.NetworkRequest.InitiatorGraph} */ 42 /** @type {?SDK.NetworkRequest.InitiatorGraph} */
43 this._initiatorGraph = null; 43 this._initiatorGraph = null;
44 44
45 /** @type {!Map<string, !Array<number>>} */ 45 /** @type {!Map<string, !Array<number>>} */
46 this._eventDividers = new Map(); 46 this._eventDividers = new Map();
47 47
48 var colorUsage = UI.ThemeSupport.ColorUsage; 48 var colorUsage = UI.ThemeSupport.ColorUsage;
49 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs age.Background); 49 this._rowNavigationRequestColor = UI.themeSupport.patchColor('#def', colorUs age.Background);
50 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back ground); 50 this._rowStripeColor = UI.themeSupport.patchColor('#f5f5f5', colorUsage.Back ground);
51 this._rowHoverColor = UI.themeSupport.patchColor( 51 this._rowHoverColor = UI.themeSupport.patchColor(
(...skipping 20 matching lines...) Expand all
72 wasShown() { 72 wasShown() {
73 this.update(); 73 this.update();
74 } 74 }
75 75
76 /** 76 /**
77 * @param {!Element} element 77 * @param {!Element} element
78 * @param {!Event} event 78 * @param {!Event} event
79 * @return {!AnchorBox|undefined} 79 * @return {!AnchorBox|undefined}
80 */ 80 */
81 _getPopoverAnchor(element, event) { 81 _getPopoverAnchor(element, event) {
82 if (!this._hoveredLogEntry) 82 if (!this._hoveredNode)
83 return; 83 return;
84 var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').g et() && !this._calculator.startAtZero; 84 var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').g et() && !this._calculator.startAtZero;
85 if (useTimingBars) { 85 if (useTimingBars) {
86 var range = Network.RequestTimingView.calculateRequestTimeRanges(this._hov eredLogEntry.request(), 0) 86 var range = Network.RequestTimingView.calculateRequestTimeRanges(this._hov eredNode.request(), 0)
87 .find(data => data.name === Network.RequestTimeRangeNames. Total); 87 .find(data => data.name === Network.RequestTimeRangeNames. Total);
88 var start = this._timeToPosition(range.start); 88 var start = this._timeToPosition(range.start);
89 var end = this._timeToPosition(range.end); 89 var end = this._timeToPosition(range.end);
90 } else { 90 } else {
91 var range = this._getSimplifiedBarRange(this._hoveredLogEntry, 0); 91 var range = this._getSimplifiedBarRange(this._hoveredNode, 0);
92 var start = range.start; 92 var start = range.start;
93 var end = range.end; 93 var end = range.end;
94 } 94 }
95 95
96 if (end - start < 50) { 96 if (end - start < 50) {
97 var halfWidth = (end - start) / 2; 97 var halfWidth = (end - start) / 2;
98 start = start + halfWidth - 25; 98 start = start + halfWidth - 25;
99 end = end - halfWidth + 25; 99 end = end - halfWidth + 25;
100 } 100 }
101 101
102 if (event.clientX < this._canvasPosition.left + start || event.clientX > thi s._canvasPosition.left + end) 102 if (event.clientX < this._canvasPosition.left + start || event.clientX > thi s._canvasPosition.left + end)
103 return; 103 return;
104 104
105 var rowIndex = this._logEntries.findIndex(logEntry => this._hoveredLogEntry === logEntry); 105 var rowIndex = this._nodes.findIndex(node => this._hoveredNode === node);
106 var barHeight = this._getBarHeight(range.name); 106 var barHeight = this._getBarHeight(range.name);
107 var y = this._headerHeight + (this._rowHeight * rowIndex - this._scrollTop) + ((this._rowHeight - barHeight) / 2); 107 var y = this._headerHeight + (this._rowHeight * rowIndex - this._scrollTop) + ((this._rowHeight - barHeight) / 2);
108 108
109 if (event.clientY < this._canvasPosition.top + y || event.clientY > this._ca nvasPosition.top + y + barHeight) 109 if (event.clientY < this._canvasPosition.top + y || event.clientY > this._ca nvasPosition.top + y + barHeight)
110 return; 110 return;
111 111
112 var anchorBox = this.element.boxInWindow(); 112 var anchorBox = this.element.boxInWindow();
113 anchorBox.x += start; 113 anchorBox.x += start;
114 anchorBox.y += y; 114 anchorBox.y += y;
115 anchorBox.width = end - start; 115 anchorBox.width = end - start;
116 anchorBox.height = barHeight; 116 anchorBox.height = barHeight;
117 return anchorBox; 117 return anchorBox;
118 } 118 }
119 119
120 /** 120 /**
121 * @param {!Element|!AnchorBox} anchor 121 * @param {!Element|!AnchorBox} anchor
122 * @param {!UI.Popover} popover 122 * @param {!UI.Popover} popover
123 */ 123 */
124 _showPopover(anchor, popover) { 124 _showPopover(anchor, popover) {
125 if (!this._hoveredLogEntry) 125 if (!this._hoveredNode)
126 return; 126 return;
127 var content = Network.RequestTimingView.createTimingTable( 127 var content =
128 this._hoveredLogEntry.request(), this._calculator.minimumBoundary()); 128 Network.RequestTimingView.createTimingTable(this._hoveredNode.request(), this._calculator.minimumBoundary());
129 popover.showForAnchor(content, anchor); 129 popover.showForAnchor(content, anchor);
130 } 130 }
131 131
132 /** 132 /**
133 * @param {?Network.NetworkLogEntry} logEntry 133 * @param {?Network.NetworkDataGridNode} node
134 * @param {boolean} highlightInitiatorChain 134 * @param {boolean} highlightInitiatorChain
135 */ 135 */
136 setHoveredLogEntry(logEntry, highlightInitiatorChain) { 136 setHoveredNode(node, highlightInitiatorChain) {
137 this._hoveredLogEntry = logEntry; 137 this._hoveredNode = node;
138 this._initiatorGraph = (highlightInitiatorChain && logEntry) ? logEntry.requ est().initiatorGraph() : null; 138 this._initiatorGraph = (highlightInitiatorChain && node) ? node.request().in itiatorGraph() : null;
139 this.update(); 139 this.update();
140 } 140 }
141 141
142 /** 142 /**
143 * @param {number} height 143 * @param {number} height
144 */ 144 */
145 setRowHeight(height) { 145 setRowHeight(height) {
146 this._rowHeight = height; 146 this._rowHeight = height;
147 } 147 }
148 148
(...skipping 15 matching lines...) Expand all
164 /** 164 /**
165 * @param {!Network.NetworkTimeCalculator} calculator 165 * @param {!Network.NetworkTimeCalculator} calculator
166 */ 166 */
167 setCalculator(calculator) { 167 setCalculator(calculator) {
168 this._calculator = calculator; 168 this._calculator = calculator;
169 } 169 }
170 170
171 /** 171 /**
172 * @param {number} x 172 * @param {number} x
173 * @param {number} y 173 * @param {number} y
174 * @return {?Network.NetworkLogEntry} 174 * @return {?Network.NetworkDataGridNode}
175 */ 175 */
176 getLogEntryFromPoint(x, y) { 176 getNodeFromPoint(x, y) {
177 return this._logEntries[Math.floor((this._scrollTop + y - this._headerHeight ) / this._rowHeight)]; 177 return this._nodes[Math.floor((this._scrollTop + y - this._headerHeight) / t his._rowHeight)];
178 } 178 }
179 179
180 scheduleDraw() { 180 scheduleDraw() {
181 if (this._updateRequestID) 181 if (this._updateRequestID)
182 return; 182 return;
183 this._updateRequestID = this.element.window().requestAnimationFrame(() => th is.update()); 183 this._updateRequestID = this.element.window().requestAnimationFrame(() => th is.update());
184 } 184 }
185 185
186 /** 186 /**
187 * @param {number=} scrollTop 187 * @param {number=} scrollTop
188 * @param {!Map<string, !Array<number>>=} eventDividers 188 * @param {!Map<string, !Array<number>>=} eventDividers
189 * @param {!Array<!Network.NetworkLogEntry>=} logEntries 189 * @param {!Array<!Network.NetworkDataGridNode>=} nodes
190 */ 190 */
191 update(scrollTop, eventDividers, logEntries) { 191 update(scrollTop, eventDividers, nodes) {
192 if (scrollTop !== undefined) 192 if (scrollTop !== undefined)
193 this._scrollTop = scrollTop; 193 this._scrollTop = scrollTop;
194 if (logEntries) { 194 if (nodes) {
195 this._logEntries = logEntries; 195 this._nodes = nodes;
196 this._calculateCanvasSize(); 196 this._calculateCanvasSize();
197 } 197 }
198 if (eventDividers !== undefined) 198 if (eventDividers !== undefined)
199 this._eventDividers = eventDividers; 199 this._eventDividers = eventDividers;
200 this.element.window().cancelAnimationFrame(this._updateRequestID); 200 this.element.window().cancelAnimationFrame(this._updateRequestID);
201 this._updateRequestID = null; 201 this._updateRequestID = null;
202 202
203 this._startTime = this._calculator.minimumBoundary(); 203 this._startTime = this._calculator.minimumBoundary();
204 this._endTime = this._calculator.maximumBoundary(); 204 this._endTime = this._calculator.maximumBoundary();
205 this._resetCanvas(); 205 this._resetCanvas();
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
271 var availableWidth = this._offsetWidth - this._leftPadding; 271 var availableWidth = this._offsetWidth - this._leftPadding;
272 var timeToPixel = availableWidth / (this._endTime - this._startTime); 272 var timeToPixel = availableWidth / (this._endTime - this._startTime);
273 return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel ); 273 return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel );
274 } 274 }
275 275
276 _didDrawForTest() { 276 _didDrawForTest() {
277 } 277 }
278 278
279 _draw() { 279 _draw() {
280 var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').g et() && !this._calculator.startAtZero; 280 var useTimingBars = !Common.moduleSetting('networkColorCodeResourceTypes').g et() && !this._calculator.startAtZero;
281 var logEntries = this._logEntries; 281 var nodes = this._nodes;
282 var context = this._canvas.getContext('2d'); 282 var context = this._canvas.getContext('2d');
283 context.save(); 283 context.save();
284 context.scale(window.devicePixelRatio, window.devicePixelRatio); 284 context.scale(window.devicePixelRatio, window.devicePixelRatio);
285 context.translate(0, this._headerHeight); 285 context.translate(0, this._headerHeight);
286 context.rect(0, 0, this._offsetWidth, this._offsetHeight); 286 context.rect(0, 0, this._offsetWidth, this._offsetHeight);
287 context.clip(); 287 context.clip();
288 var firstRequestIndex = Math.floor(this._scrollTop / this._rowHeight); 288 var firstRequestIndex = Math.floor(this._scrollTop / this._rowHeight);
289 var lastRequestIndex = 289 var lastRequestIndex = Math.min(nodes.length, firstRequestIndex + Math.ceil( this._offsetHeight / this._rowHeight));
290 Math.min(logEntries.length, firstRequestIndex + Math.ceil(this._offsetHe ight / this._rowHeight));
291 for (var i = firstRequestIndex; i < lastRequestIndex; i++) { 290 for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
292 var rowOffset = this._rowHeight * i; 291 var rowOffset = this._rowHeight * i;
293 var logEntry = logEntries[i]; 292 var node = nodes[i];
294 this._decorateRow(context, logEntry, i, rowOffset - this._scrollTop); 293 this._decorateRow(context, node, i, rowOffset - this._scrollTop);
295 if (useTimingBars) 294 if (useTimingBars)
296 this._drawTimingBars(context, logEntry, rowOffset - this._scrollTop); 295 this._drawTimingBars(context, node, rowOffset - this._scrollTop);
297 else 296 else
298 this._drawSimplifiedBars(context, logEntry, rowOffset - this._scrollTop) ; 297 this._drawSimplifiedBars(context, node, rowOffset - this._scrollTop);
299 } 298 }
300 this._drawEventDividers(context); 299 this._drawEventDividers(context);
301 context.restore(); 300 context.restore();
302 301
303 const freeZoneAtLeft = 75; 302 const freeZoneAtLeft = 75;
304 const freeZoneAtRight = 18; 303 const freeZoneAtRight = 18;
305 UI.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize, th is._headerHeight, freeZoneAtLeft); 304 UI.TimelineGrid.drawCanvasGrid(context, this._calculator, this._fontSize, th is._headerHeight, freeZoneAtLeft);
306 context.clearRect(this._offsetWidth - freeZoneAtRight, 0, freeZoneAtRight, t his._headerHeight); 305 context.clearRect(this._offsetWidth - freeZoneAtRight, 0, freeZoneAtRight, t his._headerHeight);
307 this._didDrawForTest(); 306 this._didDrawForTest();
308 } 307 }
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
347 case types.Blocking: 346 case types.Blocking:
348 case types.Push: 347 case types.Push:
349 case types.Queueing: 348 case types.Queueing:
350 return 7; 349 return 7;
351 default: 350 default:
352 return 13; 351 return 13;
353 } 352 }
354 } 353 }
355 354
356 /** 355 /**
357 * @param {!Network.NetworkLogEntry} logEntry 356 * @param {!Network.NetworkDataGridNode} node
358 * @return {string} 357 * @return {string}
359 */ 358 */
360 _borderColorForResourceType(logEntry) { 359 _borderColorForResourceType(node) {
361 var resourceType = logEntry.request().resourceType(); 360 var resourceType = node.request().resourceType();
362 if (this._borderColorsForResourceTypeCache.has(resourceType)) 361 if (this._borderColorsForResourceTypeCache.has(resourceType))
363 return this._borderColorsForResourceTypeCache.get(resourceType); 362 return this._borderColorsForResourceTypeCache.get(resourceType);
364 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc eType; 363 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc eType;
365 var color = colorsForResourceType[resourceType] || colorsForResourceType.Oth er; 364 var color = colorsForResourceType[resourceType] || colorsForResourceType.Oth er;
366 var parsedColor = Common.Color.parse(color); 365 var parsedColor = Common.Color.parse(color);
367 var hsla = parsedColor.hsla(); 366 var hsla = parsedColor.hsla();
368 hsla[1] /= 2; 367 hsla[1] /= 2;
369 hsla[2] -= Math.min(hsla[2], 0.2); 368 hsla[2] -= Math.min(hsla[2], 0.2);
370 var resultColor = /** @type {string} */ (parsedColor.asString(null)); 369 var resultColor = /** @type {string} */ (parsedColor.asString(null));
371 this._borderColorsForResourceTypeCache.set(resourceType, resultColor); 370 this._borderColorsForResourceTypeCache.set(resourceType, resultColor);
372 return resultColor; 371 return resultColor;
373 } 372 }
374 373
375 /** 374 /**
376 * @param {!CanvasRenderingContext2D} context 375 * @param {!CanvasRenderingContext2D} context
377 * @param {!Network.NetworkLogEntry} logEntry 376 * @param {!Network.NetworkDataGridNode} node
378 * @return {string|!CanvasGradient} 377 * @return {string|!CanvasGradient}
379 */ 378 */
380 _colorForResourceType(context, logEntry) { 379 _colorForResourceType(context, node) {
381 var request = logEntry.request(); 380 var request = node.request();
382 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc eType; 381 var colorsForResourceType = Network.NetworkWaterfallColumn._colorsForResourc eType;
383 var resourceType = request.resourceType(); 382 var resourceType = request.resourceType();
384 var color = colorsForResourceType[resourceType] || colorsForResourceType.Oth er; 383 var color = colorsForResourceType[resourceType] || colorsForResourceType.Oth er;
385 if (request.cached()) 384 if (request.cached())
386 return color; 385 return color;
387 386
388 if (this._colorsForResourceTypeCache.has(color)) 387 if (this._colorsForResourceTypeCache.has(color))
389 return this._colorsForResourceTypeCache.get(color); 388 return this._colorsForResourceTypeCache.get(color);
390 var parsedColor = Common.Color.parse(color); 389 var parsedColor = Common.Color.parse(color);
391 var hsla = parsedColor.hsla(); 390 var hsla = parsedColor.hsla();
392 hsla[1] -= Math.min(hsla[1], 0.28); 391 hsla[1] -= Math.min(hsla[1], 0.28);
393 hsla[2] -= Math.min(hsla[2], 0.15); 392 hsla[2] -= Math.min(hsla[2], 0.15);
394 var gradient = context.createLinearGradient(0, 0, 0, this._getBarHeight()); 393 var gradient = context.createLinearGradient(0, 0, 0, this._getBarHeight());
395 gradient.addColorStop(0, color); 394 gradient.addColorStop(0, color);
396 gradient.addColorStop(1, /** @type {string} */ (parsedColor.asString(null))) ; 395 gradient.addColorStop(1, /** @type {string} */ (parsedColor.asString(null))) ;
397 this._colorsForResourceTypeCache.set(color, gradient); 396 this._colorsForResourceTypeCache.set(color, gradient);
398 return gradient; 397 return gradient;
399 } 398 }
400 399
401 /** 400 /**
402 * @param {!Network.NetworkLogEntry} logEntry 401 * @param {!Network.NetworkDataGridNode} node
403 * @param {number} borderOffset 402 * @param {number} borderOffset
404 * @return {!{start: number, mid: number, end: number}} 403 * @return {!{start: number, mid: number, end: number}}
405 */ 404 */
406 _getSimplifiedBarRange(logEntry, borderOffset) { 405 _getSimplifiedBarRange(node, borderOffset) {
407 var drawWidth = this._offsetWidth - this._leftPadding; 406 var drawWidth = this._offsetWidth - this._leftPadding;
408 var percentages = this._calculator.computeBarGraphPercentages(logEntry.reque st()); 407 var percentages = this._calculator.computeBarGraphPercentages(node.request() );
409 return { 408 return {
410 start: this._leftPadding + Math.floor((percentages.start / 100) * drawWidt h) + borderOffset, 409 start: this._leftPadding + Math.floor((percentages.start / 100) * drawWidt h) + borderOffset,
411 mid: this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth ) + borderOffset, 410 mid: this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth ) + borderOffset,
412 end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset 411 end: this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset
413 }; 412 };
414 } 413 }
415 414
416 /** 415 /**
417 * @param {!CanvasRenderingContext2D} context 416 * @param {!CanvasRenderingContext2D} context
418 * @param {!Network.NetworkLogEntry} logEntry 417 * @param {!Network.NetworkDataGridNode} node
419 * @param {number} y 418 * @param {number} y
420 */ 419 */
421 _drawSimplifiedBars(context, logEntry, y) { 420 _drawSimplifiedBars(context, node, y) {
422 const borderWidth = 1; 421 const borderWidth = 1;
423 var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5; 422 var borderOffset = borderWidth % 2 === 0 ? 0 : 0.5;
424 423
425 context.save(); 424 context.save();
426 var ranges = this._getSimplifiedBarRange(logEntry, borderOffset); 425 var ranges = this._getSimplifiedBarRange(node, borderOffset);
427 var height = this._getBarHeight(); 426 var height = this._getBarHeight();
428 y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidt h / 2; 427 y += Math.floor(this._rowHeight / 2 - height / 2 + borderWidth) - borderWidt h / 2;
429 428
430 context.translate(0, y); 429 context.translate(0, y);
431 context.fillStyle = this._colorForResourceType(context, logEntry); 430 context.fillStyle = this._colorForResourceType(context, node);
432 context.strokeStyle = this._borderColorForResourceType(logEntry); 431 context.strokeStyle = this._borderColorForResourceType(node);
433 context.lineWidth = borderWidth; 432 context.lineWidth = borderWidth;
434 433
435 context.beginPath(); 434 context.beginPath();
436 context.globalAlpha = 0.5; 435 context.globalAlpha = 0.5;
437 context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidt h); 436 context.rect(ranges.start, 0, ranges.mid - ranges.start, height - borderWidt h);
438 context.fill(); 437 context.fill();
439 context.stroke(); 438 context.stroke();
440 439
441 var barWidth = Math.max(2, ranges.end - ranges.mid); 440 var barWidth = Math.max(2, ranges.end - ranges.mid);
442 context.beginPath(); 441 context.beginPath();
443 context.globalAlpha = 1; 442 context.globalAlpha = 1;
444 context.rect(ranges.mid, 0, barWidth, height - borderWidth); 443 context.rect(ranges.mid, 0, barWidth, height - borderWidth);
445 context.fill(); 444 context.fill();
446 context.stroke(); 445 context.stroke();
447 446
448 /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */ 447 /** @type {?{left: string, right: string, tooltip: (string|undefined)}} */
449 var labels = null; 448 var labels = null;
450 if (logEntry === this._hoveredLogEntry) { 449 if (node === this._hoveredNode) {
451 labels = this._calculator.computeBarGraphLabels(logEntry.request()); 450 labels = this._calculator.computeBarGraphLabels(node.request());
452 this._drawSimplifiedBarDetails( 451 this._drawSimplifiedBarDetails(
453 context, labels.left, labels.right, ranges.start, ranges.mid, ranges.m id + barWidth + borderOffset); 452 context, labels.left, labels.right, ranges.start, ranges.mid, ranges.m id + barWidth + borderOffset);
454 } 453 }
455 454
456 if (!this._calculator.startAtZero) { 455 if (!this._calculator.startAtZero) {
457 var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(l ogEntry.request(), 0) 456 var queueingRange = Network.RequestTimingView.calculateRequestTimeRanges(n ode.request(), 0)
458 .find(data => data.name === Network.RequestTimeRan geNames.Total); 457 .find(data => data.name === Network.RequestTimeRan geNames.Total);
459 var leftLabelWidth = labels ? context.measureText(labels.left).width : 0; 458 var leftLabelWidth = labels ? context.measureText(labels.left).width : 0;
460 var leftTextPlacedInBar = leftLabelWidth < ranges.mid - ranges.start; 459 var leftTextPlacedInBar = leftLabelWidth < ranges.mid - ranges.start;
461 const wiskerTextPadding = 13; 460 const wiskerTextPadding = 13;
462 var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiske rTextPadding : 0; 461 var textOffset = (labels && !leftTextPlacedInBar) ? leftLabelWidth + wiske rTextPadding : 0;
463 var queueingStart = this._timeToPosition(queueingRange.start); 462 var queueingStart = this._timeToPosition(queueingRange.start);
464 if (ranges.start - textOffset > queueingStart) { 463 if (ranges.start - textOffset > queueingStart) {
465 context.beginPath(); 464 context.beginPath();
466 context.globalAlpha = 1; 465 context.globalAlpha = 1;
467 context.strokeStyle = UI.themeSupport.patchColor('#a5a5a5', UI.ThemeSupp ort.ColorUsage.Foreground); 466 context.strokeStyle = UI.themeSupport.patchColor('#a5a5a5', UI.ThemeSupp ort.ColorUsage.Foreground);
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
523 context.lineWidth = 1; 522 context.lineWidth = 1;
524 context.moveTo(endX, Math.floor(height / 2)); 523 context.moveTo(endX, Math.floor(height / 2));
525 context.lineTo(endX + barDotLineLength, Math.floor(height / 2)); 524 context.lineTo(endX + barDotLineLength, Math.floor(height / 2));
526 context.stroke(); 525 context.stroke();
527 } 526 }
528 context.restore(); 527 context.restore();
529 } 528 }
530 529
531 /** 530 /**
532 * @param {!CanvasRenderingContext2D} context 531 * @param {!CanvasRenderingContext2D} context
533 * @param {!Network.NetworkLogEntry} logEntry 532 * @param {!Network.NetworkDataGridNode} node
534 * @param {number} y 533 * @param {number} y
535 */ 534 */
536 _drawTimingBars(context, logEntry, y) { 535 _drawTimingBars(context, node, y) {
537 context.save(); 536 context.save();
538 var ranges = Network.RequestTimingView.calculateRequestTimeRanges(logEntry.r equest(), 0); 537 var ranges = Network.RequestTimingView.calculateRequestTimeRanges(node.reque st(), 0);
539 for (var range of ranges) { 538 for (var range of ranges) {
540 if (range.name === Network.RequestTimeRangeNames.Total || range.name === N etwork.RequestTimeRangeNames.Sending || 539 if (range.name === Network.RequestTimeRangeNames.Total || range.name === N etwork.RequestTimeRangeNames.Sending ||
541 range.end - range.start === 0) 540 range.end - range.start === 0)
542 continue; 541 continue;
543 context.beginPath(); 542 context.beginPath();
544 var lineWidth = 0; 543 var lineWidth = 0;
545 var color = this._colorForType(range.name); 544 var color = this._colorForType(range.name);
546 var borderColor = color; 545 var borderColor = color;
547 if (range.name === Network.RequestTimeRangeNames.Queueing) { 546 if (range.name === Network.RequestTimeRangeNames.Queueing) {
548 borderColor = 'lightgrey'; 547 borderColor = 'lightgrey';
(...skipping 12 matching lines...) Expand all
561 context.strokeStyle = borderColor; 560 context.strokeStyle = borderColor;
562 context.stroke(); 561 context.stroke();
563 } 562 }
564 context.fill(); 563 context.fill();
565 } 564 }
566 context.restore(); 565 context.restore();
567 } 566 }
568 567
569 /** 568 /**
570 * @param {!CanvasRenderingContext2D} context 569 * @param {!CanvasRenderingContext2D} context
571 * @param {!Network.NetworkLogEntry} logEntry 570 * @param {!Network.NetworkDataGridNode} node
572 * @param {number} rowNumber 571 * @param {number} rowNumber
573 * @param {number} y 572 * @param {number} y
574 */ 573 */
575 _decorateRow(context, logEntry, rowNumber, y) { 574 _decorateRow(context, node, rowNumber, y) {
576 var isOddRow = rowNumber % 2 === 1; 575 var isOddRow = rowNumber % 2 === 1;
577 if (isOddRow && this._hoveredLogEntry !== logEntry && !logEntry.isNavigation Request() && !this._initiatorGraph) 576 if (isOddRow && this._hoveredNode !== node && !node.isNavigationRequest() && !this._initiatorGraph)
578 return; 577 return;
579 578
580 var color = getRowColor.call(this); 579 var color = getRowColor.call(this);
581 if (color === 'transparent') 580 if (color === 'transparent')
582 return; 581 return;
583 context.save(); 582 context.save();
584 context.beginPath(); 583 context.beginPath();
585 context.fillStyle = color; 584 context.fillStyle = color;
586 context.rect(0, y, this._offsetWidth, this._rowHeight); 585 context.rect(0, y, this._offsetWidth, this._rowHeight);
587 context.fill(); 586 context.fill();
588 context.restore(); 587 context.restore();
589 588
590 /** 589 /**
591 * @return {string} 590 * @return {string}
592 * @this {Network.NetworkWaterfallColumn} 591 * @this {Network.NetworkWaterfallColumn}
593 */ 592 */
594 function getRowColor() { 593 function getRowColor() {
595 var request = logEntry.request(); 594 var request = node.request();
596 if (this._hoveredLogEntry === logEntry) 595 if (this._hoveredNode === node)
597 return this._rowHoverColor; 596 return this._rowHoverColor;
598 if (this._initiatorGraph) { 597 if (this._initiatorGraph) {
599 if (this._initiatorGraph.initiators.has(request)) 598 if (this._initiatorGraph.initiators.has(request))
600 return this._parentInitiatorColor; 599 return this._parentInitiatorColor;
601 if (this._initiatorGraph.initiated.has(request)) 600 if (this._initiatorGraph.initiated.has(request))
602 return this._initiatedColor; 601 return this._initiatedColor;
603 } 602 }
604 if (logEntry.isNavigationRequest()) 603 if (node.isNavigationRequest())
605 return this._rowNavigationRequestColor; 604 return this._rowNavigationRequestColor;
606 if (rowNumber % 2 === 1) 605 if (rowNumber % 2 === 1)
607 return 'transparent'; 606 return 'transparent';
608 return this._rowStripeColor; 607 return this._rowStripeColor;
609 } 608 }
610 } 609 }
611 }; 610 };
612 611
613 Network.NetworkWaterfallColumn._colorsForResourceType = { 612 Network.NetworkWaterfallColumn._colorsForResourceType = {
614 document: 'hsl(215, 100%, 80%)', 613 document: 'hsl(215, 100%, 80%)',
615 font: 'hsl(8, 100%, 80%)', 614 font: 'hsl(8, 100%, 80%)',
616 media: 'hsl(90, 50%, 80%)', 615 media: 'hsl(90, 50%, 80%)',
617 image: 'hsl(90, 50%, 80%)', 616 image: 'hsl(90, 50%, 80%)',
618 script: 'hsl(31, 100%, 80%)', 617 script: 'hsl(31, 100%, 80%)',
619 stylesheet: 'hsl(272, 64%, 80%)', 618 stylesheet: 'hsl(272, 64%, 80%)',
620 texttrack: 'hsl(8, 100%, 80%)', 619 texttrack: 'hsl(8, 100%, 80%)',
621 websocket: 'hsl(0, 0%, 95%)', 620 websocket: 'hsl(0, 0%, 95%)',
622 xhr: 'hsl(53, 100%, 80%)', 621 xhr: 'hsl(53, 100%, 80%)',
623 other: 'hsl(0, 0%, 95%)' 622 other: 'hsl(0, 0%, 95%)'
624 }; 623 };
OLDNEW
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698