[Devtools] Highlight navigation request in 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 {number} headerHeight
  * @param {!WebInspector.NetworkTransferTimeCalculator} calculator
@@ skipping 39 matching lines @@
 
     // TODO(allada) When timeline canvas moves out of experiment move this to stylesheet.
     this._boundScrollContainer.style.overflow = "hidden";
 
     /** @type {!Array<!WebInspector.NetworkRequest>} */
     this._requestData = [];
 
     /** @type {?WebInspector.NetworkRequest} */
     this._hoveredRequest = null;
 
-    this._rowStripeColor = WebInspector.themeSupport.patchColor("#f5f5f5", WebInspector.ThemeSupport.ColorUsage.Background);
-    this._rowHoverColor = WebInspector.themeSupport.patchColor("#ebf2fc", WebInspector.ThemeSupport.ColorUsage.Background);
+    /** @type {?WebInspector.NetworkRequest} */
+    this._navigationRequest = null;
+
+    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();
 }
 
 WebInspector.NetworkTimelineColumn.Events = {
     RequestHovered: Symbol("RequestHovered")
 }
@@ skipping 149 matching lines @@
     _getRequestFromPoint: function(x, y)
     {
         var scrollTop = this._vScrollElement.scrollTop;
         return this._requestData[Math.floor((scrollTop + y - this._headerHeight) / this._rowHeight)] || null;
     },
 
     scheduleDraw: function()
     {
         if (this._updateRequestID)
             return;
-        this._updateRequestID = this.element.window().requestAnimationFrame(this.update.bind(this, undefined));
+        this._updateRequestID = this.element.window().requestAnimationFrame(() => this.update());
     },
 
     /**
-     * @param {!Array<!WebInspector.NetworkRequest>=} requests
+     * @param {!{requests: !Array<!WebInspector.NetworkRequest>, navigationRequest: ?WebInspector.NetworkRequest}=} requestData
      */
-    update: function(requests)
+    update: function(requestData)
     {
-        if (requests)
-            this._requestData = requests;
+        if (requestData) {
+            this._requestData = requestData.requests;
+            this._navigationRequest = requestData.navigationRequest;
+        }
         this.element.window().cancelAnimationFrame(this._updateRequestID);
         this._updateRequestID = null;
 
         this._startTime = this._calculator.minimumBoundary();
         this._endTime = this._calculator.maximumBoundary();
         this._resetCanvas();
         this._draw();
     },
 
     /**
@@ skipping 352 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)
+        if (rowNumber % 2 === 1 && this._hoveredRequest !== request && this._navigationRequest !== request)
             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();
     },
 
     __proto__: WebInspector.VBox.prototype
 }