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

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

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 1137b1dde24b1c67b7559e1124ef1b2100cb25b4..31f21bd17c5b3f34eccb293e49c8e65d79e604b5 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkTimelineColumn.js
@@ -42,6 +42,9 @@ WebInspector.NetworkTimelineColumn = function(rowHeight, calculator)
     /** @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);
@@ -188,9 +191,10 @@ WebInspector.NetworkTimelineColumn.prototype = {
 
     /**
      * @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;
@@ -199,6 +203,8 @@ WebInspector.NetworkTimelineColumn.prototype = {
             this._navigationRequest = requestData.navigationRequest;
             this._calculateCanvasSize();
         }
+        if (eventDividers !== undefined)
+            this._eventDividers = eventDividers;
         this.element.window().cancelAnimationFrame(this._updateRequestID);
         this._updateRequestID = null;
 
@@ -299,10 +305,35 @@ WebInspector.NetworkTimelineColumn.prototype = {
             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();
@@ -327,6 +358,7 @@ WebInspector.NetworkTimelineColumn.prototype = {
         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";