Index: third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js |
index ae611c8b343b8bd218f6a6f33f55066734ecceca..9d2e5f0081f64ee6279a9911d0cd4f6220045f38 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js |
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.js |
@@ -34,6 +34,12 @@ WebInspector.NetworkLogViewColumns = function(networkLogView, timeCalculator, du |
/** @type {!Array<{time: number, element: !Element}>} */ |
this._eventDividers = []; |
+ /** @type {!Map<string, !Array<number>>} */ |
+ this._shownEventDividers = new Map(); |
dgozman
2016/10/28 18:35:38
Why not just |_eventDividers|? The naming is confu
allada
2016/10/28 21:09:07
Done.
|
+ /** @type {!Array<number>} */ |
+ this._filmStripDividers = []; |
+ this._eventDividersShown = false; |
+ |
this._gridMode = true; |
/** @type {!Array.<!WebInspector.NetworkLogViewColumns.Descriptor>} */ |
@@ -360,6 +366,8 @@ WebInspector.NetworkLogViewColumns._defaultColumns = [ |
} |
]; |
+WebInspector.NetworkLogViewColumns._filmStripDividerColor = "#fccc49"; |
+ |
/** |
* @param {!WebInspector.NetworkLogViewColumns.Descriptor} columnConfig |
* @return {!WebInspector.DataGrid.ColumnDescriptor} |
@@ -392,6 +400,8 @@ WebInspector.NetworkLogViewColumns.prototype = { |
if (this._popoverHelper) |
this._popoverHelper.hidePopover(); |
this._timelineGrid.removeEventDividers(); |
+ this._shownEventDividers.clear(); |
+ this._filmStripDividers = []; |
this.updateDividersIfNeeded(); |
}, |
@@ -504,7 +514,7 @@ WebInspector.NetworkLogViewColumns.prototype = { |
{ |
if (!this._timelineRequestsAreStale) { |
this._updateScrollerWidthIfNeeded(); |
- this._timelineColumn.update(this._activeScroller.scrollTop); |
+ this._timelineColumn.update(this._activeScroller.scrollTop, this._eventDividersShown ? this._shownEventDividers : undefined); |
return; |
} |
var currentNode = this._dataGrid.rootNode(); |
@@ -517,7 +527,7 @@ WebInspector.NetworkLogViewColumns.prototype = { |
requestData.navigationRequest = currentNode.request(); |
requestData.requests.push(currentNode.request()); |
} |
- this._timelineColumn.update(this._activeScroller.scrollTop, requestData); |
+ this._timelineColumn.update(this._activeScroller.scrollTop, this._shownEventDividers, requestData); |
}, |
/** |
@@ -994,8 +1004,28 @@ WebInspector.NetworkLogViewColumns.prototype = { |
*/ |
addEventDividers: function(times, className) |
{ |
- if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) |
+ if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
+ // TODO(allada) When we remove old timeline remove this and pass in the color. |
+ var color = "transparent"; |
+ switch (className) { |
+ case "network-frame-divider": |
+ color = WebInspector.NetworkLogViewColumns._filmStripDividerColor; |
+ this._filmStripDividers = this._filmStripDividers.concat(times); |
+ return; |
+ case "network-blue-divider": |
+ color = "hsla(240, 100%, 80%, 0.7)"; |
+ break; |
+ case "network-red-divider": |
+ color = "rgba(255, 0, 0, 0.5)"; |
+ break; |
+ } |
+ var currentTimes = this._shownEventDividers.get(color) || []; |
+ this._shownEventDividers.set(color, currentTimes.concat(times)); |
+ |
+ this._networkLogView.scheduleRefresh(); |
return; |
+ } |
+ |
for (var i = 0; i < times.length; ++i) { |
var element = createElementWithClass("div", "network-event-divider " + className); |
this._timelineGrid.addEventDivider(element); |
@@ -1021,15 +1051,21 @@ WebInspector.NetworkLogViewColumns.prototype = { |
hideEventDividers: function() |
{ |
- if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) |
+ this._eventDividersShown = true; |
+ if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
+ this._redrawTimelineColumn(); |
return; |
+ } |
this._timelineGrid.hideEventDividers(); |
}, |
showEventDividers: function() |
{ |
- if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) |
+ this._eventDividersShown = false; |
+ if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
+ this._redrawTimelineColumn(); |
return; |
+ } |
this._timelineGrid.showEventDividers(); |
}, |
@@ -1038,12 +1074,26 @@ WebInspector.NetworkLogViewColumns.prototype = { |
*/ |
selectFilmStripFrame: function(time) |
{ |
+ if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
+ this._shownEventDividers.delete(WebInspector.NetworkLogViewColumns._filmStripDividerColor); |
+ for (var dividertime of this._filmStripDividers) { |
+ if (dividertime === time) |
+ this._shownEventDividers.set(WebInspector.NetworkLogViewColumns._filmStripDividerColor, [time]); |
+ } |
+ this._redrawTimelineColumn(); |
+ return; |
+ } |
for (var divider of this._eventDividers) |
divider.element.classList.toggle("network-frame-divider-selected", divider.time === time); |
}, |
clearFilmStripFrame: function() |
{ |
+ if (Runtime.experiments.isEnabled("canvasNetworkTimeline")) { |
+ this._shownEventDividers.delete(WebInspector.NetworkLogViewColumns._filmStripDividerColor); |
+ this._redrawTimelineColumn(); |
+ return; |
+ } |
for (var divider of this._eventDividers) |
divider.element.classList.toggle("network-frame-divider-selected", false); |
} |