DevTools: group by frame, not product in the network panel.

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 14 matching lines @@
     this._eventDividersShown = false;
 
     this._gridMode = true;
 
     /** @type {!Array.<!Network.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
     this._waterfallRequestsAreStale = false;
     this._waterfallScrollerWidthIsStale = true;
 
-    /** @type {?ProductRegistry.Registry} */
-    this._productRegistryInstance = null;
-
     /** @type {!Components.Linkifier} */
     this._popupLinkifier = new Components.Linkifier();
 
     /** @type {!Map<string, !Network.NetworkTimeCalculator>} */
     this._calculatorsMap = new Map();
     this._calculatorsMap.set(Network.NetworkLogViewColumns._calculatorTypes.Time, timeCalculator);
     this._calculatorsMap.set(Network.NetworkLogViewColumns._calculatorTypes.Duration, durationCalculator);
 
     this._setupDataGrid();
     this._setupWaterfall();
@@ skipping 24 matching lines @@
 
   reset() {
     if (this._popoverHelper)
       this._popoverHelper.hidePopover();
     this._eventDividers.clear();
   }
 
   _setupDataGrid() {
     var defaultColumns = Network.NetworkLogViewColumns._defaultColumns;
 
-    if (Runtime.experiments.isEnabled('networkGroupingRequests')) {
-      defaultColumns.splice(1, 0, /** @type {!Network.NetworkLogViewColumns.Descriptor} */ ({
-                              id: 'product',
-                              title: Common.UIString('Product'),
-                              visible: true
-                            }));
-    }
-
     var defaultColumnConfig = Network.NetworkLogViewColumns._defaultColumnConfig;
 
     this._columns = /** @type {!Array<!Network.NetworkLogViewColumns.Descriptor>} */ ([]);
     for (var currentConfigColumn of defaultColumns) {
       var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} */ (
           Object.assign({}, defaultColumnConfig, currentConfigColumn));
       columnConfig.id = columnConfig.id;
       if (columnConfig.subtitle)
         columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.title, columnConfig.subtitle);
       this._columns.push(columnConfig);
@@ skipping 181 matching lines @@
     if (columnId === 'waterfall') {
       if (this._dataGrid.sortOrder() === DataGrid.DataGrid.Order.Ascending)
         this._waterfallColumnSortIcon.setIconType('smallicon-triangle-up');
       else
         this._waterfallColumnSortIcon.setIconType('smallicon-triangle-down');
 
       var sortFunction = Network.NetworkRequestNode.RequestPropertyComparator.bind(null, this._activeWaterfallSortId);
       this._dataGrid.sortNodes(sortFunction, !this._dataGrid.isSortOrderAscending());
       this._networkLogView.dataGridSorted();
       return;
-    } else if (columnId === 'product' && !this._productRegistryInstance) {
-      ProductRegistry.instance().then(productRegistry => {
-        this._productRegistryInstance = productRegistry;
-        var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
-        if (!columnConfig)
-          return;
-        columnConfig.sortingFunction = Network.NetworkRequestNode.ProductComparator.bind(null, productRegistry);
-        if (this._dataGrid.sortColumnId() === 'product')
-          this._sortHandler();
-      });
-      return;
     }
     this._waterfallColumnSortIcon.setIconType('');
 
     var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
     if (!columnConfig || !columnConfig.sortingFunction)
       return;
 
     this._dataGrid.sortNodes(columnConfig.sortingFunction, !this._dataGrid.isSortOrderAscending());
     this._networkLogView.dataGridSorted();
   }
@@ skipping 54 matching lines @@
     this._persistantSettings.set(saveableSettings);
   }
 
   _loadCustomColumnsAndSettings() {
     var savedSettings = this._persistantSettings.get();
     var columnIds = Object.keys(savedSettings);
     for (var columnId of columnIds) {
       var setting = savedSettings[columnId];
       var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
       if (!columnConfig)
-        columnConfig = this._addCustomHeader(setting.title, columnId);

[allada, 2017/05/11 23:58:36]

This should still be needed.

[pfeldman, 2017/05/12 23:16:20]

What does it do? I noticed that it only breaks things, never fixes anything.

+        continue;
       if (columnConfig.hideable && typeof setting.visible === 'boolean')
         columnConfig.visible = !!setting.visible;
       if (typeof setting.title === 'string')
         columnConfig.title = setting.title;
     }
   }
 
   /**
    * @param {string} title
    * @param {string} subtitle
@@ skipping 160 matching lines @@
    * @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('product-column');
-    if (anchor) {
-      return {
-        box: anchor.boxInWindow(),
-        show: hoveredNode.handleProductPopover.bind(hoveredNode),
-        hide: this._popupLinkifier.reset.bind(this._popupLinkifier)
-      };
+    if (hoveredNode instanceof Network.FrameGroupNode) {

[allada, 2017/05/11 23:58:36]

Lets only have the popover for the name column.

[allada, 2017/05/11 23:58:36]

Also, can we add a TODO to not use instanceof and instead expose a better api
for this?

[pfeldman, 2017/05/12 23:16:20]

I'll have a new patch for the rest...

+      var frameNode = /** @type {!Network.FrameGroupNode} */ (hoveredNode);
+      return {box: event.target.boxInWindow(), show: frameNode.handleProductPopover.bind(frameNode)};
     }
 
-    anchor = event.target.enclosingNodeOrSelfWithClass('network-script-initiated');
+    var 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(
@@ skipping 45 matching lines @@
     this._redrawWaterfallColumn();
   }
 
   clearFilmStripFrame() {
     this._eventDividers.delete(Network.NetworkLogViewColumns._filmStripDividerColor);
     this._redrawWaterfallColumn();
   }
 };
 
 Network.NetworkLogViewColumns._initialSortColumn = 'waterfall';
-/** @type {?ProductRegistry.Registry} */
-Network.NetworkRequestNode._productRegistryInstance = null;
 
 /**
  * @typedef {{
  *     id: string,
  *     title: string,
  *     titleDOMFragment: (!DocumentFragment|undefined),
  *     subtitle: (string|null),
  *     visible: boolean,
  *     weight: number,
  *     hideable: boolean,
@@ skipping 192 matching lines @@
 /**
  * @enum {string}
  */
 Network.NetworkLogViewColumns.WaterfallSortIds = {
   StartTime: 'startTime',
   ResponseTime: 'responseReceivedTime',
   EndTime: 'endTime',
   Duration: 'duration',
   Latency: 'latency'
 };