DevTools: move throttling options into the secondary toolbar in Performance tab.

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
index 0ebe7ea014cc7d45ef14893f878fd403f995352d..e4b7939312b4336b328fe3ae8d884ac0d77269cc 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -75,7 +75,6 @@ Timeline.TimelinePanel = class extends UI.Panel {
 
     /** @type {!Array<!Timeline.TimelineModeView>} */
     this._currentViews = [];
-
     this._captureNetworkSetting = Common.settings.createSetting('timelineCaptureNetwork', false);
     this._captureJSProfileSetting = Common.settings.createSetting('timelineEnableJSSampling', true);
     this._captureMemorySetting = Common.settings.createSetting('timelineCaptureMemory', false);
@@ -122,6 +121,27 @@ Timeline.TimelinePanel = class extends UI.Panel {
 
     this._stackView.show(this._searchableView.element);
     this._onModeChanged();
+
+    this._configureThrottlingSetting = Common.settings.createSetting('timelineConfigureThrottling', false);

[caseq, 2016/12/21 00:35:28]

This does not have to be a member.

+    this._configureThrottlingButton = new UI.ToolbarSettingToggle(
+        this._configureThrottlingSetting, 'largeicon-settings-gear', Common.UIString('Configure throttling'));
+    SDK.multitargetNetworkManager.addEventListener(
+        SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._updateConfigureThrottlingButton.bind(this));
+    this._throttlingToolbar = new UI.Toolbar('', this.element);
+    this._cpuThrottlingCombobox = new UI.ToolbarComboBox(this._onCPUThrottlingChanged.bind(this));
+    this._throttlingToolbar.appendText(Common.UIString('Network:'));
+    this._throttlingToolbar.appendToolbarItem(this._createNetworkConditionsSelect());
+    this._throttlingToolbar.appendSeparator();
+    this._throttlingToolbar.appendText(Common.UIString('CPU:'));
+    this._throttlingToolbar.appendToolbarItem(this._cpuThrottlingCombobox);
+    this._throttlingToolbar.appendToolbarItem(new UI.ToolbarSeparator(true));
+    var hideToolbarItem = new UI.ToolbarButton(Common.UIString('Disable throttling'), 'largeicon-delete');

[alph, 2016/12/21 00:37:11]

Does it really disable throttling?

+    hideToolbarItem.addEventListener(UI.ToolbarButton.Events.Click, () => this._configureThrottlingSetting.set(false));
+    this._throttlingToolbar.appendToolbarItem(hideToolbarItem);
+    this._populateCPUThrottingCombobox();
+    this._configureThrottlingSetting.addChangeListener(this._updateThrottlingToolbarVisibility.bind(this));

[caseq, 2016/12/21 00:35:28]

nit: move up to where the setting is created.

+    this._updateThrottlingToolbarVisibility();
+
     this._recreateToolbarItems();
 
     Extensions.extensionServer.addEventListener(
@@ -290,13 +310,17 @@ Timeline.TimelinePanel = class extends UI.Panel {
     const newButton = new UI.ToolbarButton(Common.UIString('New recording'), 'largeicon-add', Common.UIString('New'));
     newButton.addEventListener(UI.ToolbarButton.Events.Click, this._clear, this);
     this._panelToolbar.appendToolbarItem(newButton);
+    this._panelToolbar.appendSeparator();
     this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButton(this._toggleRecordAction));
     this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButtonForId('main.reload'));
-
     this._panelToolbar.appendSeparator();
+    this._panelToolbar.appendToolbarItem(this._configureThrottlingButton);
+    this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButtonForId('components.collect-garbage'));
 
     // Checkboxes
     if (!this._model.isEmpty()) {
+      this._panelToolbar.appendSeparator();
+      this._panelToolbar.appendText(Common.UIString('Network:'));

[caseq, 2016/12/21 00:35:28]

Why do we add Network label before memory checkbox?!

       this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
           Common.UIString('Memory'), this._showMemorySetting, Common.UIString('Show memory timeline.')));
       if (this._filmStripModel.frames().length) {
@@ -317,15 +341,6 @@ Timeline.TimelinePanel = class extends UI.Panel {
       }
     }
 
-    this._panelToolbar.appendSeparator();
-    this._cpuThrottlingCombobox = new UI.ToolbarComboBox(this._onCPUThrottlingChanged.bind(this));
-    this._panelToolbar.appendToolbarItem(this._createNetworkConditionsSelect());
-    this._panelToolbar.appendToolbarItem(this._cpuThrottlingCombobox);
-    this._populateCPUThrottingCombobox();
-
-    this._panelToolbar.appendSeparator();
-    this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButtonForId('components.collect-garbage'));
-
     this._updateTimelineControls();
   }
 
@@ -370,7 +385,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
       cpuThrottlingCombobox.select(option);
       hasSelection = true;
     }
-    addOption(Common.UIString('No CPU throttling'), 1);
+    addOption(Common.UIString('No throttling'), 1);
     for (const rate of [2, 5, 10, 20])
       addOption(Common.UIString('%d\xD7 slowdown', rate), rate);
   }
@@ -501,6 +516,17 @@ Timeline.TimelinePanel = class extends UI.Panel {
       return;
     var text = this._cpuThrottlingCombobox.selectedOption().value;
     this._cpuThrottlingManager.setRate(Number.parseFloat(text));
+    this._updateConfigureThrottlingButton();
+  }
+
+  _updateThrottlingToolbarVisibility() {
+    this._throttlingToolbar.element.classList.toggle('hidden', !this._configureThrottlingSetting.get());
+  }
+
+  _updateConfigureThrottlingButton() {
+    var makeRed = this._cpuThrottlingManager.rate() !== 1 || SDK.multitargetNetworkManager.isThrottling();
+    this._configureThrottlingButton.setDefaultWithRedColor(makeRed);
+    this._configureThrottlingButton.setToggleWithRedColor(makeRed);
   }
 
   /**