[Devtools] Added simplified/latency view to network timeline experiment

third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.NetworkLogView} networkLogView
  * @param {!WebInspector.SortableDataGrid} dataGrid
  */
 WebInspector.NetworkTimelineColumn = function(networkLogView, dataGrid)
 {
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("network/networkTimelineColumn.css");
 
     this._canvas = this.contentElement.createChild("canvas");
     this._canvas.tabIndex = 1;
     this.setDefaultFocusedElement(this._canvas);
 
     /** @const */
     this._leftPadding = 5;
     /** @const */
     this._rightPadding = 5;
+    /** @const */
+    this._fontSize = 10;
 
     this._dataGrid = dataGrid;
     this._networkLogView = networkLogView;
 
     this._popoverAnchor = this.contentElement.createChild("div", "network-timeline-popover");
     this._popoverHelper = new WebInspector.PopoverHelper(this._popoverAnchor, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
 
     this._vScrollElement = this.contentElement.createChild("div", "network-timeline-v-scroll");
     this._vScrollElement.addEventListener("scroll", this._onScroll.bind(this), { passive: true });
     this._vScrollElement.addEventListener("mousewheel", this._onMouseWheel.bind(this), { passive: true });
@@ skipping 25 matching lines @@
     this._rowStripeColor = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);
     this._rowHoverColor = WebInspector.themeSupport.patchColor("#ebf2fc", WebInspector.ThemeSupport.ColorUsage.Background);
 }
 
 WebInspector.NetworkTimelineColumn.Events = {
     RequestHovered: Symbol("RequestHovered")
 }
 
 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()
     {
         this._popoverHelper.hidePopover();
     },
     /**
      * @param {!Element} element
      * @param {!Event} event
      * @return {!Element|!AnchorBox|undefined}
      */
     _getPopoverAnchor: function(element, event)
     {
         if (!this._hoveredRequest)
             return;
         return this._popoverAnchor;
     },
 
     /**
      * @param {!Element} anchor
      * @param {!WebInspector.Popover} popover
      */
     _showPopover: function(anchor, popover)
     {
         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);
     },
 
     wasShown: function()
     {
         this.scheduleUpdate();
     },
 
     scheduleRefreshData: function()
     {
@@ skipping 49 matching lines @@
     {
         this._dataGridScrollContainer.scrollTop = this._vScrollElement.scrollTop;
         this._popoverHelper.hidePopover();
     },
 
     _positionPopoverAnchor: function()
     {
         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"
         this._popoverAnchor.style.height = barHeight + "px";
         this._popoverAnchor.style.top = this._networkLogView.headerHeight() + (rowHeight * rowIndex - this._vScrollElement.scrollTop) + ((rowHeight - barHeight) / 2) + "px";
     },
 
     /**
      * @param {number} x
      * @param {number} y
@@ skipping 92 matching lines @@
      */
     _timeToPosition: function(time)
     {
         var availableWidth = this._offsetWidth - this._leftPadding - this._rightPadding;
         var timeToPixel = availableWidth / (this._endTime - this._startTime);
         return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel);
     },
 
     _draw: function()
     {
+        var useTimingBars = !WebInspector.moduleSetting("networkColorCodeResourceTypes").get() && !this._networkLogView.calculator().startAtZero;
         var requests = this._requestData;
         var context = this._canvas.getContext("2d");
         context.save();
         context.scale(window.devicePixelRatio, window.devicePixelRatio);
         context.translate(0, this._networkLogView.headerHeight());
         context.rect(0, 0, this._offsetWidth, this._offsetHeight);
         context.clip();
         var rowHeight = this._networkLogView.rowHeight();
         var scrollTop = this._vScrollElement.scrollTop;
         var firstRequestIndex = Math.floor(scrollTop / rowHeight);
         var lastRequestIndex = Math.min(requests.length, firstRequestIndex + Math.ceil(this._offsetHeight / rowHeight));
         for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
             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);
     },
 
     _drawDividers: function(context)
     {
         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();
         var dividersCount = drawableWidth / minGridSlicePx;
         var gridSliceTime = timelineDuration / dividersCount;
         var pixelsPerTime = drawableWidth / timelineDuration;
 
         // Align gridSliceTime to a nearest round value.
         // We allow spans that fit into the formula: span = (1|2|5)x10^n,
         // e.g.: ...  .1  .2  .5  1  2  5  10  20  50  ...
         // After a span has been chosen make grid lines at multiples of the span.
 
         var logGridSliceTime = Math.ceil(Math.log(gridSliceTime) / Math.LN10);
         gridSliceTime = Math.pow(10, logGridSliceTime);
         if (gridSliceTime * pixelsPerTime >= 5 * minGridSlicePx)
             gridSliceTime = gridSliceTime / 5;
         if (gridSliceTime * pixelsPerTime >= 2 * minGridSlicePx)
             gridSliceTime = gridSliceTime / 2;
 
         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) {
             // Added .5 because canvas drawing points are between pixels.
             var drawPosition = Math.floor(position) + this._leftPadding + .5;
             context.beginPath();
             context.moveTo(drawPosition, 0);
             context.lineTo(drawPosition, this._offsetHeight);
             context.stroke();
             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();
     },
 
     /**
      * @return {number}
      */
     _timelineDuration: function()
     {
         return this._networkLogView.calculator().maximumBoundary() - this._networkLogView.calculator().minimumBoundary();
     },
 
     /**
-     * @param {!WebInspector.RequestTimeRangeNames} type
+     * @param {!WebInspector.RequestTimeRangeNames=} type
      * @return {number}
      */
     _getBarHeight: function(type)
     {
         var types = WebInspector.RequestTimeRangeNames;
         switch (type) {
         case types.Connecting:
         case types.SSL:
         case types.DNS:
         case types.Proxy:
         case types.Blocking:
         case types.Push:
         case types.Queueing:
             return 7;
         default:
             return 13;
         }
     },
 
     /**
+     * @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 background colors for resource
types.

[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}
+     */
+    _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
      */
-    _drawBar: function(context, range, 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();
-        var lineWidth = 0;
-        var color = this._colorForType(range.name);
-        var borderColor = color;
-        if (range.name === WebInspector.RequestTimeRangeNames.Queueing) {
-            borderColor = "lightgrey";
-            lineWidth = 2;
+        context.globalAlpha = .5;
+        context.rect(start, y, mid - start, height - borderWidth);
+        context.fill();
+        context.stroke();
+
+        var barWidth = Math.max(2, end - mid);
+        context.beginPath();
+        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.stroke();
-        }
-        context.fill();
+
         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.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();
+    },
+
     /**
      * @param {!CanvasRenderingContext2D} context
      * @param {!WebInspector.NetworkRequest} request
      * @param {number} rowNumber
      * @param {number} y
      * @param {number} rowHeight
      */
     _decorateRow: function(context, request, rowNumber, y, rowHeight)
     {
         if (rowNumber % 2 === 1 && this._hoveredRequest !== request)
             return;
         context.save();
         context.beginPath();
         var color = this._rowStripeColor;
         if (this._hoveredRequest === request)
             color = this._rowHoverColor;
 
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 }