[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 66 matching lines @@
         return Math.floor(this._leftPadding + (time - this._startTime) * timeToPixel);
     },
 
     _draw: function()
     {
         var useTimingBars = !WebInspector.moduleSetting("networkColorCodeResourceTypes").get() && !this._calculator.startAtZero;
         var requests = this._requestData;
         var context = this._canvas.getContext("2d");
         context.save();
         context.scale(window.devicePixelRatio, window.devicePixelRatio);
+        context.save();
         context.translate(0, this._headerHeight);
         context.rect(0, 0, this._offsetWidth, this._offsetHeight);
         context.clip();
         var firstRequestIndex = Math.floor(this._scrollTop / this._rowHeight);
         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);
+        context.restore();
     },
 
+    /**
+     * @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;
@@ skipping 262 matching lines @@
             color = this._rowNavigationRequestColor;
 
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, this._rowHeight);
         context.fill();
         context.restore();
     },
 
     __proto__: WebInspector.VBox.prototype
 };