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

third_party/WebKit/Source/devtools/front_end/network/NetworkPanel.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 144 matching lines @@
 
     var largerRequestsButton = new UI.ToolbarSettingToggle(
         this._networkLogLargeRowsSetting, 'largeicon-large-list', Common.UIString('Use large request rows'),
         Common.UIString('Use small request rows'));
     this._panelToolbar.appendToolbarItem(largerRequestsButton);
 
     var showOverviewButton = new UI.ToolbarSettingToggle(
         this._networkLogShowOverviewSetting, 'largeicon-waterfall', Common.UIString('Show overview'),
         Common.UIString('Hide overview'));
     this._panelToolbar.appendToolbarItem(showOverviewButton);
+
+    if (Runtime.experiments.isEnabled('networkGroupingRequests')) {
+      this._panelToolbar.appendToolbarItem(new UI.ToolbarSettingCheckbox(
+          Common.moduleSetting('network.group-by-frame'), '', Common.UIString('Group by frame')));
+    }
+
     this._panelToolbar.appendSeparator();
 
     this._preserveLogCheckbox = new UI.ToolbarCheckbox(
         Common.UIString('Preserve log'), Common.UIString('Do not clear log on page reload / navigation'));
     this._preserveLogCheckbox.inputElement.addEventListener(
         'change', this._onPreserveLogCheckboxChanged.bind(this), false);
     this._panelToolbar.appendToolbarItem(this._preserveLogCheckbox);
 
     this._disableCacheCheckbox = new UI.ToolbarSettingCheckbox(
         Common.moduleSetting('cacheDisabled'), Common.UIString('Disable cache (while DevTools is open)'),
         Common.UIString('Disable cache'));
     this._panelToolbar.appendToolbarItem(this._disableCacheCheckbox);
 
     this._panelToolbar.appendSeparator();
     this._panelToolbar.appendToolbarItem(NetworkConditions.NetworkConditionsSelector.createOfflineToolbarCheckbox());
     this._panelToolbar.appendToolbarItem(this._createNetworkConditionsSelect());
 
-    this._setupGroupingCombo();
-
     this._panelToolbar.appendToolbarItem(new UI.ToolbarItem(this._progressBarContainer));
   }
 
-  _setupGroupingCombo() {
-    if (!Runtime.experiments.isEnabled('networkGroupingRequests'))
-      return;
-    /** @type {!Array<!{value: string, label: string, title: string}>} */
-    var options = [{value: '', label: Common.UIString('No grouping'), title: Common.UIString('No grouping')}];
-    for (var name of this._networkLogView.groupLookups().keys())
-      options.push({value: name, label: Common.UIString(name), title: Common.UIString(name)});
-
-    var setting = Common.settings.createSetting('networkGrouping', '');
-    this._panelToolbar.appendToolbarItem(new UI.ToolbarSettingComboBox(options, setting, Common.UIString('Group by')));
-    setting.addChangeListener(event => this._networkLogView.setGrouping(/** @type {string} */ (event.data)));
-    this._networkLogView.setGrouping(/** @type {string} */ (setting.get()));
-  }
-
   /**
    * @return {!UI.ToolbarComboBox}
    */
   _createNetworkConditionsSelect() {
     var toolbarItem = new UI.ToolbarComboBox(null);
     toolbarItem.setMaxWidth(140);
     NetworkConditions.NetworkConditionsSelector.decorateSelect(toolbarItem.selectElement());
     return toolbarItem;
   }
 
@@ skipping 515 matching lines @@
    * @param {string} actionId
    * @return {boolean}
    */
   handleAction(context, actionId) {
     var panel = UI.context.flavor(Network.NetworkPanel);
     console.assert(panel && panel instanceof Network.NetworkPanel);
     panel._toggleRecording();
     return true;
   }
 };