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

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

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 57 matching lines @@
     this._frameModel =
         new TimelineModel.TimelineFrameModel(event => Timeline.TimelineUIUtils.eventStyle(event).category.name);
     this._filmStripModel = new Components.FilmStripModel(this._tracingModel);
     this._irModel = new TimelineModel.TimelineIRModel();
     /** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */
     this._extensionTracingModels = [];
     this._cpuThrottlingManager = new Timeline.CPUThrottlingManager();
 
     /** @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);
     this._captureLayersAndPicturesSetting = Common.settings.createSetting('timelineCaptureLayersAndPictures', false);
     this._captureFilmStripSetting = Common.settings.createSetting('timelineCaptureFilmStrip', false);
 
     this._showScreenshotsSetting = Common.settings.createLocalSetting('timelineShowScreenshots', false);
     this._showScreenshotsSetting.addChangeListener(this._onModeChanged, this);
     this._showMemorySetting = Common.settings.createLocalSetting('timelineShowMemory', false);
     this._showMemorySetting.addChangeListener(this._onModeChanged, this);
@@ skipping 26 matching lines @@
     this._searchableView = new UI.SearchableView(this);
     this._searchableView.setMinimumSize(0, 100);
     this._searchableView.element.classList.add('searchable-view');
     this._detailsSplitWidget.setMainWidget(this._searchableView);
 
     this._stackView = new UI.StackView(false);
     this._stackView.element.classList.add('timeline-view-stack');
 
     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(
         Extensions.ExtensionServer.Events.TraceProviderAdded, this._recreateToolbarItems, this);
 
     this._captureNetworkSetting.addChangeListener(this._onNetworkChanged, this);
     this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
     this._captureFilmStripSetting.addChangeListener(this._onModeChanged, this);
 
     this._detailsSplitWidget.show(this._timelinePane.element);
@@ skipping 148 matching lines @@
     return checkboxItem;
   }
 
   _recreateToolbarItems() {
     this._panelToolbar.removeToolbarItems();
 
     // Record
     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) {
         this._showScreenshotsSetting.set(true);
         this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
             Common.UIString('Screenshots'), this._showScreenshotsSetting,
             Common.UIString('Show captured screenshots.')));
       }
     }
 
     const traceProviders = Extensions.extensionServer.traceProviders();
     if (traceProviders.length) {
       this._panelToolbar.appendSeparator();
       for (let provider of traceProviders) {
         const setting = Timeline.TimelinePanel._settingForTraceProvider(provider);
         const checkbox = this._createSettingCheckbox(provider.shortDisplayName(), setting, provider.longDisplayName());
         this._panelToolbar.appendToolbarItem(checkbox);
       }
     }
 
-    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();
   }
 
   /**
    * @param {!Extensions.ExtensionTraceProvider} traceProvider
    * @return {!Common.Setting<boolean>}
    */
   static _settingForTraceProvider(traceProvider) {
     var setting = traceProvider[Timeline.TimelinePanel._traceProviderSettingSymbol];
     if (!setting) {
@@ skipping 24 matching lines @@
      * @param {number} value
      */
     function addOption(name, value) {
       var option = cpuThrottlingCombobox.createOption(name, '', String(value));
       cpuThrottlingCombobox.addOption(option);
       if (hasSelection || (value && value !== currentRate))
         return;
       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);
   }
 
   _prepareToLoadTimeline() {
     console.assert(this._state === Timeline.TimelinePanel.State.Idle);
     this._setState(Timeline.TimelinePanel.State.Loading);
   }
 
   _createFileSelector() {
@@ skipping 110 matching lines @@
   _onNetworkChanged() {
     if (this._flameChart)
       this._flameChart.enableNetworkPane(this._captureNetworkSetting.get(), true);
   }
 
   _onCPUThrottlingChanged() {
     if (!this._cpuThrottlingManager)
       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);
   }
 
   /**
    * @param {boolean} enabled
    */
   _setUIControlsEnabled(enabled) {
     this._recordingOptionUIControls.forEach(control => control.setEnabled(enabled));
   }
 
   /**
@@ skipping 1400 matching lines @@
   }
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetRemoved(target) {
     this._targets.remove(target, true);
   }
 };