[Devtools] Added hover support for network timeline experiment

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
index b3965fd96b56633ff16bd236fa27dcdf124af2ce..b12c0a3dbc762a0b1d8a9879fe387c4a06f9d538 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js
@@ -354,25 +354,59 @@ WebInspector.NetworkLogView.prototype = {
         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, null), true);
     },
 
     /**
      * @param {!Event} event
      */
-    _dataGridMouseDown: function(event)
+    _dataGridMouseMove: function(event)

[dgozman, 2016/10/12 17:31:32]

Where do you disable default data grid highlight?

[allada, 2016/10/12 19:15:29]

There isnt a default highlight... Network panel did it inside NetworkLogView
using CSS.

     {
-        if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName("a"))
-            event.consume();
+        var node = this._dataGrid.dataGridNodeFromNode(event.target);

[dgozman, 2016/10/12 17:31:32]

Just call this._setHoveredNode(node)

[allada, 2016/10/12 19:15:29]

Done.

+        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);
+        this._highlightInitiatorChain((event.shiftKey && node) ? node.request() : null);
+    },
+
+    _dataGridMouseLeave: function(event)

[dgozman, 2016/10/12 17:31:32]

JSDocs

[allada, 2016/10/12 19:15:29]

Done.

+    {
+        if (this._hoveredNode) {
+            this._hoveredNode.element().classList.remove("hover");
+            this._hoveredNode = null;
+            this._timelineColumn.setHoveredRequest(null);
+        }
+        this._highlightInitiatorChain(null);
+    },
+
+    setHoveredRequest: function(request)
+    {
+        var requestId = null;
+        if (request)
+            requestId = request.requestId;
+        this._setHoveredNode(this._nodesByRequestId.get(requestId) || null);
+    },
+
+    _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
      */
-    _dataGridMouseMove: function(event)
+    _dataGridMouseDown: function(event)
     {
-        var node = event.shiftKey ? this._dataGrid.dataGridNodeFromNode(event.target) : null;
-        this._highlightInitiatorChain(node ? node.request() : null);
+        if ((!this._dataGrid.selectedNode && event.button) || event.target.enclosingNodeOrSelfWithNodeName("a"))
+            event.consume();
     },
 
     /**