[Devtools] Added timeline event dividers bars to network timeline exp

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 {number} rowHeight
  * @param {!WebInspector.NetworkTimeCalculator} calculator
  */
@@ skipping 24 matching lines @@
 
     /** @type {!Array<!WebInspector.NetworkRequest>} */
     this._requestData = [];
 
     /** @type {?WebInspector.NetworkRequest} */
     this._hoveredRequest = null;
 
     /** @type {?WebInspector.NetworkRequest} */
     this._navigationRequest = null;
 
+    /** @type {!Map<string, !Array<number>>} */
+    this._eventDividers = new Map();
+
     var colorUsage = WebInspector.ThemeSupport.ColorUsage;
     this._rowNavigationRequestColor = WebInspector.themeSupport.patchColor("#def", colorUsage.Background);
     this._rowStripeColor = WebInspector.themeSupport.patchColor("#f5f5f5", colorUsage.Background);
     this._rowHoverColor = WebInspector.themeSupport.patchColor("#ebf2fc", /** @type {!WebInspector.ThemeSupport.ColorUsage} */ (colorUsage.Background | colorUsage.Selection));
 
     /** @type {!Map<!WebInspector.ResourceType, string>} */
     this._borderColorsForResourceTypeCache = new Map();
     /** @type {!Map<string, !CanvasGradient>} */
     this._colorsForResourceTypeCache = new Map();
 };
@@ skipping 126 matching lines @@
 
     scheduleDraw: function()
     {
         if (this._updateRequestID)
             return;
         this._updateRequestID = this.element.window().requestAnimationFrame(() => this.update());
     },
 
     /**
      * @param {number=} scrollTop
+     * @param {!Map<string, !Array<number>>=} eventDividers
      * @param {!{requests: !Array<!WebInspector.NetworkRequest>, navigationRequest: ?WebInspector.NetworkRequest}=} requestData
      */
-    update: function(scrollTop, requestData)
+    update: function(scrollTop, eventDividers, requestData)
     {
         if (scrollTop !== undefined)
             this._scrollTop = scrollTop;
         if (requestData) {
             this._requestData = requestData.requests;
             this._navigationRequest = requestData.navigationRequest;
             this._calculateCanvasSize();
         }
+        if (eventDividers !== undefined)
+            this._eventDividers = eventDividers;
         this.element.window().cancelAnimationFrame(this._updateRequestID);
         this._updateRequestID = null;
 
         this._startTime = this._calculator.minimumBoundary();
         this._endTime = this._calculator.maximumBoundary();
         this._resetCanvas();
         this._draw();
     },
 
     _resetCanvas: function()
@@ skipping 80 matching lines @@
         var lastRequestIndex = Math.min(requests.length, firstRequestIndex + Math.ceil(this._offsetHeight / this._rowHeight));
         for (var i = firstRequestIndex; i < lastRequestIndex; i++) {
             var rowOffset = this._rowHeight * i;
             var request = requests[i];
             this._decorateRow(context, request, i, rowOffset - this._scrollTop);
             if (useTimingBars)
                 this._drawTimingBars(context, request, rowOffset - this._scrollTop);
             else
                 this._drawSimplifiedBars(context, request, rowOffset - this._scrollTop);
         }
+        this._drawEventDividers(context);
         context.restore();
+        // This is outside of the save/restore above because it must draw in header.
         this._drawDividers(context);
     },
 
+    /**
+     * @param {!CanvasRenderingContext2D} context
+     */
+    _drawEventDividers: function(context)
+    {
+        context.save();
+        context.lineWidth = 1;
+        for (var color of this._eventDividers.keys()) {
+            context.strokeStyle = color;
+            for (var time of this._eventDividers.get(color)) {
+                context.beginPath();
+                var x = this._timeToPosition(time);
+                context.moveTo(x, 0);
+                context.lineTo(x, this._offsetHeight);
+            }
+            context.stroke();
+        }
+        context.restore();
+    },
+
+    /**
+     * @param {!CanvasRenderingContext2D} context
+     */
     _drawDividers: function(context)
     {
         context.save();
         /** @const */
         var minGridSlicePx = 64; // minimal distance between grid lines.
 
         var drawableWidth = this._offsetWidth - this._leftPadding;
         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.scale(window.devicePixelRatio, window.devicePixelRatio);

[dgozman, 2016/10/28 18:35:38]

Do this scaling just once at the top of draw.

[allada, 2016/10/28 21:09:07]

Done.

         context.lineWidth = 1;
         context.strokeStyle = "rgba(0, 0, 0, .1)";
         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);
@@ skipping 238 matching lines @@
             color = this._rowNavigationRequestColor;
 
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, this._rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 };