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 102 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);
+    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('Close'), 'largeicon-delete');
+    hideToolbarItem.addEventListener(UI.ToolbarButton.Events.Click, () => this._configureThrottlingSetting.set(false));
+    this._throttlingToolbar.appendToolbarItem(hideToolbarItem);
+    this._populateCPUThrottingCombobox();
+    this._configureThrottlingSetting.addChangeListener(this._updateThrottlingToolbarVisibility.bind(this));
+    this._updateThrottlingToolbarVisibility();
+
+    this._showLandingPage();
     this._recreateToolbarItems();
 
     Extensions.extensionServer.addEventListener(
         Extensions.ExtensionServer.Events.TraceProviderAdded, this._recreateToolbarItems, this);
 
     this._captureFilmStripSetting.addChangeListener(this._onModeChanged, this);
 
     this._detailsSplitWidget.show(this._timelinePane.element);
     this._detailsSplitWidget.hideSidebar();
     SDK.targetManager.addEventListener(SDK.TargetManager.Events.SuspendStateChanged, this._onSuspendStateChanged, this);
-    this._showLandingPage();
 
     /** @type {!SDK.TracingModel.Event}|undefined */
     this._selectedSearchResult;
     /** @type {!Array<!SDK.TracingModel.Event>}|undefined */
     this._searchResults;
     /** @type {?symbol} */
     this._sessionGeneration = null;
     /** @type {number} */
     this._recordingStartTime = 0;
   }
@@ skipping 133 matching lines @@
     const checkboxItem = new UI.ToolbarCheckbox(name, tooltip, setting);
     this._recordingOptionUIControls.push(checkboxItem);
     return checkboxItem;
   }
 
   _recreateToolbarItems() {
     this._panelToolbar.removeToolbarItems();
 
     // Record
     const newButton = new UI.ToolbarButton(Common.UIString('New recording'), 'largeicon-add', Common.UIString('New'));
+    newButton.setEnabled(!this._landingPage);
     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('View:'));
       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 103 matching lines @@
 
     this.doResize();
     this.select(null);
   }
 
   _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 1398 matching lines @@
   }
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetRemoved(target) {
     this._targets.remove(target, true);
   }
 };