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 * @constructor | 6 * @constructor |
7 * @param {!WebInspector.NetworkLogView} networkLogView | 7 * @param {!WebInspector.NetworkLogView} networkLogView |
8 * @param {!WebInspector.NetworkTransferTimeCalculator} timeCalculator | 8 * @param {!WebInspector.NetworkTransferTimeCalculator} timeCalculator |
9 * @param {!WebInspector.NetworkTransferDurationCalculator} durationCalculator | 9 * @param {!WebInspector.NetworkTransferDurationCalculator} durationCalculator |
10 * @param {!WebInspector.Setting} networkLogLargeRowsSetting | 10 * @param {!WebInspector.Setting} networkLogLargeRowsSetting |
(...skipping 16 matching lines...) Expand all Loading... |
27 | 27 |
28 /** @type {!Array<!Element>} */ | 28 /** @type {!Array<!Element>} */ |
29 this._dropDownColumnSelectors = []; | 29 this._dropDownColumnSelectors = []; |
30 | 30 |
31 this._networkLogLargeRowsSetting = networkLogLargeRowsSetting; | 31 this._networkLogLargeRowsSetting = networkLogLargeRowsSetting; |
32 this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, thi
s); | 32 this._networkLogLargeRowsSetting.addChangeListener(this._updateRowsSize, thi
s); |
33 | 33 |
34 /** @type {!Array<{time: number, element: !Element}>} */ | 34 /** @type {!Array<{time: number, element: !Element}>} */ |
35 this._eventDividers = []; | 35 this._eventDividers = []; |
36 | 36 |
| 37 /** @type {!Map<string, !Array<number>>} */ |
| 38 this._shownEventDividers = new Map(); |
| 39 this._eventDividersShown = false; |
| 40 |
37 this._gridMode = true; | 41 this._gridMode = true; |
38 | 42 |
39 /** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */ | 43 /** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */ |
40 this._columns = []; | 44 this._columns = []; |
41 | 45 |
42 /** @type {?WebInspector.TimelineGrid} */ | 46 /** @type {?WebInspector.TimelineGrid} */ |
43 this._timelineGrid = null; | 47 this._timelineGrid = null; |
44 this._timelineHeaderElement = null; | 48 this._timelineHeaderElement = null; |
45 this._timelineRequestsAreStale = false; | 49 this._timelineRequestsAreStale = false; |
46 this._timelineScrollerWidthIsStale = true; | 50 this._timelineScrollerWidthIsStale = true; |
(...skipping 306 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
353 title: WebInspector.UIString("Timeline \u2013 Latency"), | 357 title: WebInspector.UIString("Timeline \u2013 Latency"), |
354 sort: WebInspector.DataGrid.Order.Descending, | 358 sort: WebInspector.DataGrid.Order.Descending, |
355 sortingFunction: WebInspector.NetworkDataGridNode.RequestPro
pertyComparator.bind(null, "latency"), | 359 sortingFunction: WebInspector.NetworkDataGridNode.RequestPro
pertyComparator.bind(null, "latency"), |
356 calculator: WebInspector.NetworkLogViewColumns._calculatorTy
pes.Duration | 360 calculator: WebInspector.NetworkLogViewColumns._calculatorTy
pes.Duration |
357 } | 361 } |
358 ] | 362 ] |
359 } | 363 } |
360 } | 364 } |
361 ]; | 365 ]; |
362 | 366 |
| 367 WebInspector.NetworkLogViewColumns._filmStripDividerColor = "#fccc49"; |
| 368 |
363 /** | 369 /** |
364 * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig | 370 * @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig |
365 * @return {!WebInspector.DataGrid.ColumnDescriptor} | 371 * @return {!WebInspector.DataGrid.ColumnDescriptor} |
366 */ | 372 */ |
367 WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor = function(colum
nConfig) | 373 WebInspector.NetworkLogViewColumns._convertToDataGridDescriptor = function(colum
nConfig) |
368 { | 374 { |
369 return /** @type {!WebInspector.DataGrid.ColumnDescriptor} */ ({ | 375 return /** @type {!WebInspector.DataGrid.ColumnDescriptor} */ ({ |
370 id: columnConfig.id, | 376 id: columnConfig.id, |
371 title: columnConfig.title, | 377 title: columnConfig.title, |
372 sortable: columnConfig.sortable, | 378 sortable: columnConfig.sortable, |
(...skipping 12 matching lines...) Expand all Loading... |
385 willHide: function() | 391 willHide: function() |
386 { | 392 { |
387 this._popoverHelper.hidePopover(); | 393 this._popoverHelper.hidePopover(); |
388 }, | 394 }, |
389 | 395 |
390 reset: function() | 396 reset: function() |
391 { | 397 { |
392 if (this._popoverHelper) | 398 if (this._popoverHelper) |
393 this._popoverHelper.hidePopover(); | 399 this._popoverHelper.hidePopover(); |
394 this._timelineGrid.removeEventDividers(); | 400 this._timelineGrid.removeEventDividers(); |
| 401 this._shownEventDividers.clear(); |
395 this.updateDividersIfNeeded(); | 402 this.updateDividersIfNeeded(); |
396 }, | 403 }, |
397 | 404 |
398 _setupDataGrid: function() | 405 _setupDataGrid: function() |
399 { | 406 { |
400 var defaultColumns = WebInspector.NetworkLogViewColumns._defaultColumns; | 407 var defaultColumns = WebInspector.NetworkLogViewColumns._defaultColumns; |
401 var defaultColumnConfig = WebInspector.NetworkLogViewColumns._defaultCol
umnConfig; | 408 var defaultColumnConfig = WebInspector.NetworkLogViewColumns._defaultCol
umnConfig; |
402 | 409 |
403 this._columns = /** @type {!Array<!WebInspector.NetworkLogViewColumns.De
scriptor>} */ ([]); | 410 this._columns = /** @type {!Array<!WebInspector.NetworkLogViewColumns.De
scriptor>} */ ([]); |
404 for (var currentConfigColumn of defaultColumns) { | 411 for (var currentConfigColumn of defaultColumns) { |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
497 if (this._timelineScrollerWidthIsStale) { | 504 if (this._timelineScrollerWidthIsStale) { |
498 this._timelineScrollerWidthIsStale = false; | 505 this._timelineScrollerWidthIsStale = false; |
499 this._timelineColumn.setRightPadding(this._timelineScroller.offsetWi
dth - this._timelineScrollerContent.offsetWidth); | 506 this._timelineColumn.setRightPadding(this._timelineScroller.offsetWi
dth - this._timelineScrollerContent.offsetWidth); |
500 } | 507 } |
501 }, | 508 }, |
502 | 509 |
503 _redrawTimelineColumn: function() | 510 _redrawTimelineColumn: function() |
504 { | 511 { |
505 if (!this._timelineRequestsAreStale) { | 512 if (!this._timelineRequestsAreStale) { |
506 this._updateScrollerWidthIfNeeded(); | 513 this._updateScrollerWidthIfNeeded(); |
507 this._timelineColumn.update(this._activeScroller.scrollTop); | 514 this._timelineColumn.update(this._activeScroller.scrollTop, this._ev
entDividersShown ? this._shownEventDividers : undefined); |
508 return; | 515 return; |
509 } | 516 } |
510 var currentNode = this._dataGrid.rootNode(); | 517 var currentNode = this._dataGrid.rootNode(); |
511 var requestData = { | 518 var requestData = { |
512 requests: [], | 519 requests: [], |
513 navigationRequest: null | 520 navigationRequest: null |
514 }; | 521 }; |
515 while (currentNode = currentNode.traverseNextNode(true)) { | 522 while (currentNode = currentNode.traverseNextNode(true)) { |
516 if (currentNode.isNavigationRequest()) | 523 if (currentNode.isNavigationRequest()) |
517 requestData.navigationRequest = currentNode.request(); | 524 requestData.navigationRequest = currentNode.request(); |
518 requestData.requests.push(currentNode.request()); | 525 requestData.requests.push(currentNode.request()); |
519 } | 526 } |
520 this._timelineColumn.update(this._activeScroller.scrollTop, requestData)
; | 527 this._timelineColumn.update(this._activeScroller.scrollTop, this._shownE
ventDividers, requestData); |
521 }, | 528 }, |
522 | 529 |
523 /** | 530 /** |
524 * @param {?WebInspector.NetworkRequest} request | 531 * @param {?WebInspector.NetworkRequest} request |
525 */ | 532 */ |
526 setHoveredRequest: function(request) | 533 setHoveredRequest: function(request) |
527 { | 534 { |
528 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) | 535 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) |
529 this._timelineColumn.setHoveredRequest(request); | 536 this._timelineColumn.setHoveredRequest(request); |
530 }, | 537 }, |
(...skipping 456 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
987 { | 994 { |
988 this._popupLinkifier.reset(); | 995 this._popupLinkifier.reset(); |
989 }, | 996 }, |
990 | 997 |
991 /** | 998 /** |
992 * @param {!Array<number>} times | 999 * @param {!Array<number>} times |
993 * @param {string} className | 1000 * @param {string} className |
994 */ | 1001 */ |
995 addEventDividers: function(times, className) | 1002 addEventDividers: function(times, className) |
996 { | 1003 { |
997 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) | 1004 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
| 1005 // TODO(allada) When we remove old timeline remove this and pass in
the color. |
| 1006 var color = "transparent"; |
| 1007 switch (className) { |
| 1008 case "network-blue-divider": |
| 1009 color = "hsla(240, 100%, 80%, 0.7)"; |
| 1010 break; |
| 1011 case "network-red-divider": |
| 1012 color = "rgba(255, 0, 0, 0.5)"; |
| 1013 break; |
| 1014 default: |
| 1015 return; |
| 1016 } |
| 1017 var currentTimes = this._shownEventDividers.get(color) || []; |
| 1018 this._shownEventDividers.set(color, currentTimes.concat(times)); |
| 1019 |
| 1020 this._networkLogView.scheduleRefresh(); |
998 return; | 1021 return; |
| 1022 } |
| 1023 |
999 for (var i = 0; i < times.length; ++i) { | 1024 for (var i = 0; i < times.length; ++i) { |
1000 var element = createElementWithClass("div", "network-event-divider "
+ className); | 1025 var element = createElementWithClass("div", "network-event-divider "
+ className); |
1001 this._timelineGrid.addEventDivider(element); | 1026 this._timelineGrid.addEventDivider(element); |
1002 this._eventDividers.push({time: times[i], element: element}); | 1027 this._eventDividers.push({time: times[i], element: element}); |
1003 } | 1028 } |
1004 // Update event dividers immediately | 1029 // Update event dividers immediately |
1005 this._updateEventDividers(); | 1030 this._updateEventDividers(); |
1006 // Schedule refresh in case dividers change the calculator span. | 1031 // Schedule refresh in case dividers change the calculator span. |
1007 this._networkLogView.scheduleRefresh(); | 1032 this._networkLogView.scheduleRefresh(); |
1008 }, | 1033 }, |
1009 | 1034 |
1010 _updateEventDividers: function() | 1035 _updateEventDividers: function() |
1011 { | 1036 { |
1012 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) | 1037 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) |
1013 return; | 1038 return; |
1014 var calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewCol
umns._calculatorTypes.Time); | 1039 var calculator = this._calculatorsMap.get(WebInspector.NetworkLogViewCol
umns._calculatorTypes.Time); |
1015 for (var divider of this._eventDividers) { | 1040 for (var divider of this._eventDividers) { |
1016 var timePercent = calculator.computePercentageFromEventTime(divider.
time); | 1041 var timePercent = calculator.computePercentageFromEventTime(divider.
time); |
1017 divider.element.classList.toggle("invisible", timePercent < 0); | 1042 divider.element.classList.toggle("invisible", timePercent < 0); |
1018 divider.element.style.left = timePercent + "%"; | 1043 divider.element.style.left = timePercent + "%"; |
1019 } | 1044 } |
1020 }, | 1045 }, |
1021 | 1046 |
1022 hideEventDividers: function() | 1047 hideEventDividers: function() |
1023 { | 1048 { |
1024 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) | 1049 this._eventDividersShown = true; |
| 1050 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
| 1051 this._redrawTimelineColumn(); |
1025 return; | 1052 return; |
| 1053 } |
1026 this._timelineGrid.hideEventDividers(); | 1054 this._timelineGrid.hideEventDividers(); |
1027 }, | 1055 }, |
1028 | 1056 |
1029 showEventDividers: function() | 1057 showEventDividers: function() |
1030 { | 1058 { |
1031 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) | 1059 this._eventDividersShown = false; |
| 1060 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
| 1061 this._redrawTimelineColumn(); |
1032 return; | 1062 return; |
| 1063 } |
1033 this._timelineGrid.showEventDividers(); | 1064 this._timelineGrid.showEventDividers(); |
1034 }, | 1065 }, |
1035 | 1066 |
1036 /** | 1067 /** |
1037 * @param {number} time | 1068 * @param {number} time |
1038 */ | 1069 */ |
1039 selectFilmStripFrame: function(time) | 1070 selectFilmStripFrame: function(time) |
1040 { | 1071 { |
| 1072 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
| 1073 this._shownEventDividers.set(WebInspector.NetworkLogViewColumns._fil
mStripDividerColor, [time]); |
| 1074 this._redrawTimelineColumn(); |
| 1075 return; |
| 1076 } |
1041 for (var divider of this._eventDividers) | 1077 for (var divider of this._eventDividers) |
1042 divider.element.classList.toggle("network-frame-divider-selected", d
ivider.time === time); | 1078 divider.element.classList.toggle("network-frame-divider-selected", d
ivider.time === time); |
1043 }, | 1079 }, |
1044 | 1080 |
1045 clearFilmStripFrame: function() | 1081 clearFilmStripFrame: function() |
1046 { | 1082 { |
| 1083 if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
| 1084 this._shownEventDividers.delete(WebInspector.NetworkLogViewColumns._
filmStripDividerColor); |
| 1085 this._redrawTimelineColumn(); |
| 1086 return; |
| 1087 } |
1047 for (var divider of this._eventDividers) | 1088 for (var divider of this._eventDividers) |
1048 divider.element.classList.toggle("network-frame-divider-selected", f
alse); | 1089 divider.element.classList.toggle("network-frame-divider-selected", f
alse); |
1049 } | 1090 } |
1050 }; | 1091 }; |
OLD | NEW |