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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js

Issue 2418953002: [Devtools] Added simplified/latency view to network timeline experiment (Closed)
Patch Set: Merge branch 'NETWORK_TIMELINE_7_POPOVER' into NETWORK_TIMELINE_8_LATENCY_VIEW Created 4 years, 2 months 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/network/networkLogView.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
index 7d2ec3ad370371c3dd2819ccad26c76ce55fc2a5..507ffcf6a6fae8ede79b4f46c1148e434f1919fa 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -21,6 +21,8 @@ WebInspector.NetworkTimelineColumn = function(networkLogView, dataGrid)
this._leftPadding = 5;
/** @const */
this._rightPadding = 5;
+ /** @const */
+ this._fontSize = 10;
this._dataGrid = dataGrid;
this._networkLogView = networkLogView;
@@ -66,6 +68,19 @@ WebInspector.NetworkTimelineColumn.Events = {
WebInspector.NetworkTimelineColumn._popoverShowDelay = 300;
+WebInspector.NetworkTimelineColumn._colorsForResourceType = {
+ document: "hsl(215, 100%, 80%)",
+ font: "hsl(8, 100%, 80%)",
+ media: "hsl(272, 64%, 80%)",
+ image: "hsl(272, 64%, 80%)",
+ script: "hsl(31, 100%, 80%)",
+ stylesheet: "hsl(90, 50%, 80%)",
+ texttrack: "hsl(8, 100%, 80%)",
+ websocket: "hsl(0, 0%, 95%)",
+ xhr: "hsl(53, 100%, 80%)",
+ other: "hsl(0, 0%, 95%)"
+}
+
WebInspector.NetworkTimelineColumn.prototype = {
willHide: function()
{
@@ -91,7 +106,7 @@ WebInspector.NetworkTimelineColumn.prototype = {
{
if (!this._hoveredRequest)
return;
- var content = WebInspector.RequestTimingView.createTimingTable(this._hoveredRequest, this._networkLogView.timeCalculator().minimumBoundary());
+ var content = WebInspector.RequestTimingView.createTimingTable(this._hoveredRequest, this._networkLogView.calculator().minimumBoundary());
popover.showForAnchor(content, anchor);
},
@@ -161,12 +176,13 @@ WebInspector.NetworkTimelineColumn.prototype = {
if (!this._hoveredRequest)
return;
var rowHeight = this._networkLogView.rowHeight();
- var range = WebInspector.RequestTimingView.calculateRequestTimeRanges(this._hoveredRequest, 0).find(data => data.name === "total");
- var start = this._timeToPosition(range.start);
- var end = this._timeToPosition(range.end);
+ var percentages = this._networkLogView.calculator().computeBarGraphPercentages(this._hoveredRequest);
+ var availableWidth = this._offsetWidth - this._leftPadding - this._rightPadding;
+ var start = (percentages.start / 100) * availableWidth + this._leftPadding;
+ var end = (percentages.end / 100) * availableWidth + this._leftPadding;
var rowIndex = this._requestData.findIndex(request => this._hoveredRequest === request);
- var barHeight = this._getBarHeight(range.name);
+ var barHeight = this._getBarHeight();
this._popoverAnchor.style.left = start + "px";
this._popoverAnchor.style.width = (end - start) + "px"
@@ -279,6 +295,7 @@ WebInspector.NetworkTimelineColumn.prototype = {
_draw: function()
{
+ var useTimingBars = !WebInspector.moduleSetting("networkColorCodeResourceTypes").get() && !this._networkLogView.calculator().startAtZero;
var requests = this._requestData;
var context = this._canvas.getContext("2d");
context.save();
@@ -294,14 +311,10 @@ WebInspector.NetworkTimelineColumn.prototype = {
var rowOffset = rowHeight * i;
var request = requests[i];
this._decorateRow(context, request, i, rowOffset - scrollTop, rowHeight);
- var ranges = WebInspector.RequestTimingView.calculateRequestTimeRanges(request, 0);
- for (var range of ranges) {
- if (range.name === WebInspector.RequestTimeRangeNames.Total ||
- range.name === WebInspector.RequestTimeRangeNames.Sending ||
- range.end - range.start === 0)
- continue;
- this._drawBar(context, range, rowOffset - scrollTop);
- }
+ if (useTimingBars)
+ this._drawTimingBars(context, request, rowOffset - scrollTop);
+ else
+ this._drawSimplifiedBars(context, request, rowOffset - scrollTop);
}
context.restore();
this._drawDividers(context);
@@ -312,8 +325,6 @@ WebInspector.NetworkTimelineColumn.prototype = {
context.save();
/** @const */
var minGridSlicePx = 64; // minimal distance between grid lines.
- /** @const */
- var fontSize = 10;
var drawableWidth = this._offsetWidth - this._leftPadding - this._rightPadding;
var timelineDuration = this._timelineDuration();
@@ -335,7 +346,7 @@ WebInspector.NetworkTimelineColumn.prototype = {
context.lineWidth = 1;
context.strokeStyle = "rgba(0, 0, 0, .1)";
- context.font = fontSize + "px sans-serif";
+ context.font = this._fontSize + "px sans-serif";
context.fillStyle = "#444"
gridSliceTime = gridSliceTime;
for (var position = gridSliceTime * pixelsPerTime; position < drawableWidth; position += gridSliceTime * pixelsPerTime) {
@@ -348,7 +359,7 @@ WebInspector.NetworkTimelineColumn.prototype = {
if (position <= gridSliceTime * pixelsPerTime)
continue;
var textData = Number.secondsToString(position / pixelsPerTime);
- context.fillText(textData, drawPosition - context.measureText(textData).width - 2, Math.floor(this._networkLogView.headerHeight() - fontSize / 2));
+ context.fillText(textData, drawPosition - context.measureText(textData).width - 2, Math.floor(this._networkLogView.headerHeight() - this._fontSize / 2));
}
context.restore();
},
@@ -362,7 +373,7 @@ WebInspector.NetworkTimelineColumn.prototype = {
},
/**
- * @param {!WebInspector.RequestTimeRangeNames} type
+ * @param {!WebInspector.RequestTimeRangeNames=} type
* @return {number}
*/
_getBarHeight: function(type)
@@ -383,35 +394,178 @@ WebInspector.NetworkTimelineColumn.prototype = {
},
/**
+ * @param {!WebInspector.NetworkRequest} request
+ * @return {string}
+ */
+ _borderColorForResourceType: function(request)
dgozman 2016/10/17 21:36:16 Let's calculate these once and for all next to bac
allada 2016/10/19 19:03:55 Done.
+ {
+ var colorsForResourceType = WebInspector.NetworkTimelineColumn._colorsForResourceType;
+ var resourceType = request.resourceType();
+ var color = colorsForResourceType[resourceType] || colorsForResourceType.Other;
+ var parsedColor = WebInspector.Color.parse(color);
+ var hsla = parsedColor.hsla();
+ hsla[1] /= 2;
+ hsla[2] -= Math.min(hsla[2], 0.2);
+ return /** @type {string} */ (parsedColor.asString(null));
+ },
+
+ /**
* @param {!CanvasRenderingContext2D} context
- * @param {!WebInspector.RequestTimeRange} range
+ * @param {!WebInspector.NetworkRequest} request
* @param {number} y
+ * @return {string|!CanvasGradient}
*/
- _drawBar: function(context, range, y)
+ _colorForResourceType: function(context, request, y)
{
+ var colorsForResourceType = WebInspector.NetworkTimelineColumn._colorsForResourceType;
+ var resourceType = request.resourceType();
+ var color = colorsForResourceType[resourceType] || colorsForResourceType.Other;
+ var height = this._getBarHeight();
+ if (request.cached())
+ return color;
+ return buildGradient(color);
+
+ /**
+ * @param {string} color
+ * @return {!CanvasGradient}
+ */
+ function buildGradient(color)
+ {
+ var parsedColor = WebInspector.Color.parse(color);
+ var hsla = parsedColor.hsla();
+ hsla[1] -= Math.min(hsla[1], 0.28);
+ hsla[2] -= Math.min(hsla[2], 0.15);
+ var gradient = context.createLinearGradient(0, y, 0, y + height);
+ gradient.addColorStop(0, color);
+ gradient.addColorStop(1, /** @type {string} */ (parsedColor.asString(null)));
dgozman 2016/10/17 21:36:16 Let's cache this string as well.
allada 2016/10/19 19:03:55 Done.
+ return gradient;
+ }
+ },
+
+ /**
+ * @param {!CanvasRenderingContext2D} context
+ * @param {!WebInspector.NetworkRequest} request
+ * @param {number} y
+ */
+ _drawSimplifiedBars: function(context, request, y)
+ {
+ /** @const */
+ var borderWidth = 1;
+
context.save();
+ var calculator = this._networkLogView.calculator();
+ var percentages = calculator.computeBarGraphPercentages(request);
+ var drawWidth = this._offsetWidth - this._leftPadding - this._rightPadding;
+ var borderOffset = borderWidth % 2 === 0 ? 0 : .5;
+ var start = this._leftPadding + Math.floor((percentages.start / 100) * drawWidth) + borderOffset;
+ var mid = this._leftPadding + Math.floor((percentages.middle / 100) * drawWidth) + borderOffset;
+ var end = this._leftPadding + Math.floor((percentages.end / 100) * drawWidth) + borderOffset;
+ var height = this._getBarHeight();
+ y += Math.floor(this._networkLogView.rowHeight() / 2 - height / 2 + borderWidth) - borderWidth / 2;
+ context.fillStyle = this._colorForResourceType(context, request, y);
+ context.strokeStyle = this._borderColorForResourceType(request);
+ context.lineWidth = borderWidth;
+
+ context.beginPath();
+ context.globalAlpha = .5;
+ context.rect(start, y, mid - start, height - borderWidth);
+ context.fill();
+ context.stroke();
+
+ var barWidth = Math.max(2, end - mid);
context.beginPath();
- var lineWidth = 0;
- var color = this._colorForType(range.name);
- var borderColor = color;
- if (range.name === WebInspector.RequestTimeRangeNames.Queueing) {
- borderColor = "lightgrey";
- lineWidth = 2;
+ context.globalAlpha = 1;
+ context.rect(mid, y, barWidth, height - borderWidth);
+ context.fill();
+ context.stroke();
+
+ if (request === this._hoveredRequest) {
+ var labels = calculator.computeBarGraphLabels(request);
+ this._drawSimplifiedBarDetails(context, labels.left, labels.right, y, start, mid, mid + barWidth + borderOffset)
}
- if (range.name === WebInspector.RequestTimeRangeNames.Receiving)
- lineWidth = 2;
- context.fillStyle = color;
- var height = this._getBarHeight(range.name);
- y += Math.floor(this._networkLogView.rowHeight() / 2 - height / 2) + lineWidth / 2;
- var start = this._timeToPosition(range.start);
- var end = this._timeToPosition(range.end);
- context.rect(start, y, end - start, height - lineWidth);
- if (lineWidth) {
- context.lineWidth = lineWidth;
- context.strokeStyle = borderColor;
+
+ context.restore();
+ },
+
+ /**
+ * @param {!CanvasRenderingContext2D} context
+ * @param {string} leftText
+ * @param {string} rightText
+ * @param {number} y
+ * @param {number} startX
+ * @param {number} midX
+ * @param {number} endX
+ */
+ _drawSimplifiedBarDetails: function(context, leftText, rightText, y, startX, midX, endX)
+ {
+ /** @const */
+ var rightBarDotLineLength = 10;
+
+ context.save();
+ var height = this._getBarHeight();
+ var leftLabelWidth = context.measureText(leftText).width;
+ var rightLabelWidth = context.measureText(rightText).width;
+ context.fillStyle = "#444";
+ context.strokeStyle = "#444";
+ if (leftLabelWidth < midX - startX) {
+ var midBarX = startX + (midX - startX) / 2 - leftLabelWidth / 2;
+ context.fillText(leftText, midBarX, y + this._fontSize);
+ }
+
+ if (rightLabelWidth < endX - midX) {
+ var midBarX = midX + (endX - midX) / 2 - rightLabelWidth / 2;
+ context.fillText(rightText, midBarX, y + this._fontSize);
+ } else if (endX + rightBarDotLineLength + rightLabelWidth < this._offsetWidth - this._leftPadding - this._rightPadding) {
+ context.beginPath();
+ context.arc(endX, Math.floor(y + height / 2), 2, 0, 2 * Math.PI);
+ context.fill();
+ context.fillText(rightText, endX + rightBarDotLineLength + 1, y + this._fontSize);
+ context.beginPath();
+ context.lineWidth = 1;
+ context.moveTo(endX, Math.floor(y + height / 2));
+ context.lineTo(endX + rightBarDotLineLength, Math.floor(y + height / 2));
context.stroke();
}
- context.fill();
+ context.restore();
+ },
+
+ /**
+ * @param {!CanvasRenderingContext2D} context
+ * @param {!WebInspector.NetworkRequest} request
+ * @param {number} y
+ */
+ _drawTimingBars: function(context, request, y)
+ {
+ context.save();
+ var ranges = WebInspector.RequestTimingView.calculateRequestTimeRanges(request, 0);
+ for (var range of ranges) {
+ if (range.name === WebInspector.RequestTimeRangeNames.Total ||
+ range.name === WebInspector.RequestTimeRangeNames.Sending ||
+ range.end - range.start === 0)
+ continue;
+ context.beginPath();
+ var lineWidth = 0;
+ var color = this._colorForType(range.name);
+ var borderColor = color;
+ if (range.name === WebInspector.RequestTimeRangeNames.Queueing) {
+ borderColor = "lightgrey";
+ lineWidth = 2;
+ }
+ if (range.name === WebInspector.RequestTimeRangeNames.Receiving)
+ lineWidth = 2;
+ context.fillStyle = color;
+ var height = this._getBarHeight(range.name);
+ var middleBarY = y + Math.floor(this._networkLogView.rowHeight() / 2 - height / 2) + lineWidth / 2;
+ var start = this._timeToPosition(range.start);
+ var end = this._timeToPosition(range.end);
+ context.rect(start, middleBarY, end - start, height - lineWidth);
+ if (lineWidth) {
+ context.lineWidth = lineWidth;
+ context.strokeStyle = borderColor;
+ context.stroke();
+ }
+ context.fill();
+ }
context.restore();
},
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/network/networkLogView.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698