[Devtools] Added report miss-match link to network product entries

third_party/WebKit/Source/devtools/front_end/network/NetworkLogViewColumns.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.
 /**
  * @unrestricted
  */
 Network.NetworkLogViewColumns = class {
   /**
    * @param {!Network.NetworkLogView} networkLogView
    * @param {!Network.NetworkTransferTimeCalculator} timeCalculator
@@ skipping 84 matching lines @@
           Object.assign({}, defaultColumnConfig, currentConfigColumn));
       columnConfig.id = columnConfig.id;
       if (columnConfig.subtitle)
         columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.title, columnConfig.subtitle);
       this._columns.push(columnConfig);
     }
     this._loadCustomColumnsAndSettings();
 
     this._popoverHelper = new UI.PopoverHelper(this._networkLogView.element, this._getPopoverRequest.bind(this));
     this._popoverHelper.setHasPadding(true);
+    this._popoverHelper.setTimeout(300, 300);
 
     /** @type {!DataGrid.SortableDataGrid<!Network.NetworkNode>} */
     this._dataGrid =
         new DataGrid.SortableDataGrid(this._columns.map(Network.NetworkLogViewColumns._convertToDataGridDescriptor));
     this._dataGrid.element.addEventListener('mousedown', event => {
       if (!this._dataGrid.selectedNode && event.button)
         event.consume();
     }, true);
 
     this._dataGridScroller = this._dataGrid.scrollContainer;
@@ skipping 427 matching lines @@
     return true;
   }
 
   /**
    * @param {!Event} event
    * @return {?UI.PopoverRequest}
    */
   _getPopoverRequest(event) {
     if (!this._gridMode)
       return null;
+    var hoveredNode = this._networkLogView.hoveredNode();
+    if (!hoveredNode)
+      return null;
 
-    var anchor = event.target.enclosingNodeOrSelfWithClass('network-script-initiated');
-    var request = /** @type {?SDK.NetworkRequest} */ (anchor ? anchor.request : null);
+    var anchor = event.target.enclosingNodeOrSelfWithClass('product-column');
+    if (anchor) {
+      return {
+        box: anchor.boxInWindow(),
+        show: hoveredNode.handleProductPopover.bind(hoveredNode),
+        hide: this._popupLinkifier.reset.bind(this._popupLinkifier)
+      };
+    }
+
+    anchor = event.target.enclosingNodeOrSelfWithClass('network-script-initiated');
+    if (!anchor)
+      return null;
+    var request = hoveredNode.request();
     var initiator = request ? request.initiator() : null;
     if (!initiator || !initiator.stack)
       return null;
-
     return {
       box: anchor.boxInWindow(),
       show: popover => {
         var content = Components.DOMPresentationUtils.buildStackTracePreviewContents(
             anchor.request.networkManager().target(), this._popupLinkifier, initiator.stack);
         popover.contentElement.appendChild(content);
         return Promise.resolve(true);
       },
-      hide: () => {
-        this._popupLinkifier.reset();
-      }
+      hide: this._popupLinkifier.reset.bind(this._popupLinkifier)
     };
   }
 
   /**
    * @param {!Array<number>} times
    * @param {string} className
    */
   addEventDividers(times, className) {
     // TODO(allada) Remove this and pass in the color.
     var color = 'transparent';
@@ skipping 244 matching lines @@
 /**
  * @enum {string}
  */
 Network.NetworkLogViewColumns.WaterfallSortIds = {
   StartTime: 'startTime',
   ResponseTime: 'responseReceivedTime',
   EndTime: 'endTime',
   Duration: 'duration',
   Latency: 'latency'
 };