[Devtools] New network canvas timeline now properly shows initiators

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 20 matching lines @@
 
     this._popoverHelper = new WebInspector.PopoverHelper(this.element);
     this._popoverHelper.initializeCallbacks(this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(300, 300);
 
     /** @type {!Array<!WebInspector.NetworkRequest>} */
     this._requestData = [];
 
     /** @type {?WebInspector.NetworkRequest} */
     this._hoveredRequest = null;
+    /** @type {?WebInspector.NetworkRequest.InitiatorGraph} */
+    this._initiatorGraph = 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));
+    this._parentInitiatorColor = WebInspector.themeSupport.patchColor("hsla(120, 68%, 54%, 0.2)", colorUsage.Background);
+    this._initiatedColor = WebInspector.themeSupport.patchColor("hsla(0, 68%, 54%, 0.2)", colorUsage.Background);
 
     /** @type {!Map<!WebInspector.ResourceType, string>} */
     this._borderColorsForResourceTypeCache = new Map();
     /** @type {!Map<string, !CanvasGradient>} */
     this._colorsForResourceTypeCache = new Map();
 };
 
 WebInspector.NetworkTimelineColumn._colorsForResourceType = {
     document: "hsl(215, 100%, 80%)",
     font: "hsl(8, 100%, 80%)",
@@ skipping 63 matching lines @@
     _showPopover: function(anchor, popover)
     {
         if (!this._hoveredRequest)
             return;
         var content = WebInspector.RequestTimingView.createTimingTable(this._hoveredRequest, this._calculator.minimumBoundary());
         popover.showForAnchor(content, anchor);
     },
 
     /**
      * @param {?WebInspector.NetworkRequest} request
+     * @param {boolean} highlightInitiatorChain
      */
-    setHoveredRequest: function(request)
+    setHoveredRequest: function(request, highlightInitiatorChain)
     {
         this._hoveredRequest = request;
+        this._initiatorGraph = (highlightInitiatorChain && request) ? request.initiatorGraph() : null;
         this.update();
     },
 
     /**
      * @param {number} height
      */
     setRowHeight: function(height)
     {
         this._rowHeight = height;
     },
@@ skipping 444 matching lines @@
     },
 
     /**
      * @param {!CanvasRenderingContext2D} context
      * @param {!WebInspector.NetworkRequest} request
      * @param {number} rowNumber
      * @param {number} y
      */
     _decorateRow: function(context, request, rowNumber, y)
     {
-        if (rowNumber % 2 === 1 && this._hoveredRequest !== request && this._navigationRequest !== request)
+        if (rowNumber % 2 === 1 && this._hoveredRequest !== request && this._navigationRequest !== request && !this._initiatorGraph)
+            return;
+
+        var color = getRowColor.call(this);
+        if (color === "transparent")
             return;
         context.save();
         context.beginPath();
-        var color = this._rowStripeColor;
-        if (this._hoveredRequest === request)
-            color = this._rowHoverColor;
-        else if (this._navigationRequest === request)
-            color = this._rowNavigationRequestColor;
-
         context.fillStyle = color;
         context.rect(0, y, this._offsetWidth, this._rowHeight);
         context.fill();
         context.restore();
+
+        /**
+         * @return {string}
+         * @this {WebInspector.NetworkTimelineColumn}
+         */
+        function getRowColor()
+        {
+            if (this._hoveredRequest === request)
+                return this._rowHoverColor;
+            if (this._initiatorGraph) {
+                if (this._initiatorGraph.initiators.has(request))
+                    return this._parentInitiatorColor;
+                if (this._initiatorGraph.initiated.has(request))
+                    return this._initiatedColor;
+            }
+            if (this._navigationRequest === request)
+                return this._rowNavigationRequestColor;
+            if (rowNumber % 2 === 1)
+                return "transparent";
+            return this._rowStripeColor;
+        }
     },
 
     __proto__: WebInspector.VBox.prototype
 };