[Devtools] Added hover support for network timeline experiment

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 276 matching lines @@
             this._splitWidget.setSidebarWidget(this._dataGrid.asWidget());
 
             this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
 
             this._timelineWidget = new WebInspector.VBox();
             this._createTimelineHeader();
             this._timelineWidget.element.classList.add("network-timeline-view");
             this._splitWidget.setMainWidget(this._timelineWidget);
 
             this._timelineColumn = new WebInspector.NetworkTimelineColumn(this, this._dataGrid);
+            this._timelineColumn.addEventListener(WebInspector.NetworkTimelineColumn.Events.RequestHovered, requestHovered.bind(this));
             this._timelineColumn.show(this._timelineWidget.element);
             this.switchViewMode(false);
         } else {
             this._createTable();
             this._dataGrid.asWidget().show(this.element);
             this._summaryBarElement = this.element.createChild("div", "network-summary-bar");
         }
 
         this._columns.sortByCurrentColumn();
         this._updateRowsSize();
+
+        /**
+         * @param {!WebInspector.Event} event
+         * @this {WebInspector.NetworkLogView}
+         */
+        function requestHovered(event)
+        {
+            var request = /** @type {?WebInspector.NetworkRequest} */ (event.data);
+            var node = request ? this._nodesByRequestId.get(request.requestId) : null;
+            this._setHoveredNode(node || null);
+        }
     },
 
     _showRecordingHint: function()
     {
         this._hideRecordingHint();
         this._recordingHint = this.element.createChild("div", "network-status-pane fill");
         var hintText = this._recordingHint.createChild("div", "recording-hint");
         var reloadShortcutNode = this._recordingHint.createChild("b");
         reloadShortcutNode.textContent = WebInspector.shortcutRegistry.shortcutDescriptorsForAction("main.reload")[0].name;
 
@@ skipping 30 matching lines @@
     _createTable: function()
     {
         this._dataGrid = this._columns.createGrid(this._timeCalculator, this._durationCalculator);
         this._dataGrid.setStickToBottom(true);
         this._dataGrid.setName("networkLog");
         this._dataGrid.setResizeMethod(WebInspector.DataGrid.ResizeMethod.Last);
         this._dataGrid.element.classList.add("network-log-grid");
         this._dataGrid.element.addEventListener("contextmenu", this._contextMenu.bind(this), true);
         this._dataGrid.element.addEventListener("mousedown", this._dataGridMouseDown.bind(this), true);
         this._dataGrid.element.addEventListener("mousemove", this._dataGridMouseMove.bind(this), true);
-        this._dataGrid.element.addEventListener("mouseleave", this._highlightInitiatorChain.bind(this, null), true);
+        this._dataGrid.element.addEventListener("mouseleave", this._dataGridMouseLeave.bind(this), true);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _dataGridMouseMove: function(event)
+    {
+        var node = this._dataGrid.dataGridNodeFromNode(event.target);
+        this._setHoveredNode(node);
+        this._highlightInitiatorChain((event.shiftKey && node) ? node.request() : null);
+    },
+
+    _dataGridMouseLeave: function()
+    {
+        this._setHoveredNode(null);
+        this._highlightInitiatorChain(null);
+    },
+
+    /**
+     * @param {?WebInspector.NetworkDataGridNode} node
+     */
+    _setHoveredNode: function(node)
+    {
+        if (this._hoveredNode)
+            this._hoveredNode.element().classList.remove("hover");
+        this._hoveredNode = node;
+        if (this._hoveredNode)
+            this._hoveredNode.element().classList.add("hover");
+        this._timelineColumn.setHoveredRequest(this._hoveredNode ? this._hoveredNode.request() : null);
     },
 
     /**
      * @param {!Event} event
      */
     _dataGridMouseDown: function(event)
     {
         if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName("a"))
             event.consume();
     },
 
     /**
-     * @param {!Event} event
-     */
-    _dataGridMouseMove: function(event)
-    {
-        var node = event.shiftKey ? this._dataGrid.dataGridNodeFromNode(event.target) : null;
-        this._highlightInitiatorChain(node ? node.request() : null);
-    },
-
-    /**
      * @param {?WebInspector.NetworkRequest} request
      */
     _highlightInitiatorChain: function(request)
     {
         if (this._requestWithHighlightedInitiators === request)
             return;
         this._requestWithHighlightedInitiators = request;
 
         if (!request) {
             for (var node of this._nodesByRequestId.values()) {
@@ skipping 1428 matching lines @@
  * @return {boolean}
  */
 WebInspector.NetworkLogView._requestTimeFilter = function(windowStart, windowEnd, request)
 {
     if (request.issueTime() > windowEnd)
         return false;
     if (request.endTime !== -1 && request.endTime < windowStart)
         return false;
     return true;
 }