DevTools: Rearrange Timeline toolbar for landing page mode

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 7fe395698eae53c38f4d8399c86e9ca86dde808f..ee4b00e5fa4a005dd818d8382a51c1f40d49b3f7 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -44,6 +44,8 @@ Timeline.TimelinePanel = class extends UI.Panel {
         this.element, [UI.DropTarget.Types.Files, UI.DropTarget.Types.URIList],
         Common.UIString('Drop timeline file or URL here'), this._handleDrop.bind(this));
 
+    /** @type {!Array<!UI.ToolbarItem>} */
+    this._recordingOptionUIControls = [];
     this._state = Timeline.TimelinePanel.State.Idle;
     this._detailsLinkifier = new Components.Linkifier();
     this._windowStartTime = 0;
@@ -80,6 +82,11 @@ Timeline.TimelinePanel = class extends UI.Panel {
     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);
+
     this._markUnusedCSS = Common.settings.createSetting('timelineMarkUnusedCSS', false);
 
     this._panelToolbar = new UI.Toolbar('', this.element);
@@ -273,9 +280,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
    * @return {!UI.ToolbarItem}
    */
   _createSettingCheckbox(name, setting, tooltip) {
-    if (!this._recordingOptionUIControls)
-      this._recordingOptionUIControls = [];
-    var checkboxItem = new UI.ToolbarCheckbox(name, tooltip, setting);
+    const checkboxItem = new UI.ToolbarCheckbox(name, tooltip, setting);
     this._recordingOptionUIControls.push(checkboxItem);
     return checkboxItem;
   }
@@ -283,15 +288,18 @@ Timeline.TimelinePanel = class extends UI.Panel {
   _recreateToolbarItems() {
     this._panelToolbar.removeToolbarItems();
 
-    var perspectiveSetting =
+    const perspectiveSetting =
         Common.settings.createSetting('timelinePerspective', Timeline.TimelinePanel.Perspectives.Load);
 
     // Record
-    if (Runtime.experiments.isEnabled('timelineRecordingPerspectives') &&
+    if (Runtime.experiments.isEnabled('timelineLandingPage')) {
+      this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButton(this._toggleRecordAction));
+      this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButtonForId('main.reload'));
+    } else if (Runtime.experiments.isEnabled('timelineRecordingPerspectives') &&
         perspectiveSetting.get() === Timeline.TimelinePanel.Perspectives.Load) {
-      this._reloadButton = new UI.ToolbarButton(Common.UIString('Record & Reload'), 'largeicon-refresh');
-      this._reloadButton.addEventListener(UI.ToolbarButton.Events.Click, () => SDK.targetManager.reloadPage());
-      this._panelToolbar.appendToolbarItem(this._reloadButton);
+      const reloadButton = new UI.ToolbarButton(Common.UIString('Record & Reload'), 'largeicon-refresh');
+      reloadButton.addEventListener(UI.ToolbarButton.Events.Click, () => SDK.targetManager.reloadPage());
+      this._panelToolbar.appendToolbarItem(reloadButton);
     } else {
       this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButton(this._toggleRecordAction));
     }
@@ -304,7 +312,8 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._panelToolbar.appendSeparator();
 
     // Combo
-    if (Runtime.experiments.isEnabled('timelineRecordingPerspectives')) {
+    if (!Runtime.experiments.isEnabled('timelineLandingPage') &&
+        Runtime.experiments.isEnabled('timelineRecordingPerspectives')) {
       /**
        * @this {!Timeline.TimelinePanel}
        */
@@ -362,28 +371,40 @@ Timeline.TimelinePanel = class extends UI.Panel {
       this._onModeChanged();
     }
 
-    var screenshotCheckbox = this._createSettingCheckbox(
-        Common.UIString('Screenshots'), this._captureFilmStripSetting,
-        Common.UIString('Capture screenshots while recording. (Has small performance overhead)'));
-
-    if (!Runtime.experiments.isEnabled('timelineRecordingPerspectives') ||
-        perspectiveSetting.get() === Timeline.TimelinePanel.Perspectives.Custom) {
-      this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
-          Common.UIString('Network'), this._captureNetworkSetting,
-          Common.UIString('Show network requests information')));
-      this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
-          Common.UIString('JS Profile'), this._captureJSProfileSetting,
-          Common.UIString('Capture JavaScript stacks with sampling profiler. (Has small performance overhead)')));
-      this._panelToolbar.appendToolbarItem(screenshotCheckbox);
-      this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
-          Common.UIString('Memory'), this._captureMemorySetting,
-          Common.UIString('Capture memory information on every timeline event.')));
-      this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
-          Common.UIString('Paint'), this._captureLayersAndPicturesSetting,
-          Common.UIString(
-              'Capture graphics layer positions and rasterization draw calls. (Has large performance overhead)')));
+    if (Runtime.experiments.isEnabled('timelineLandingPage')) {
+      if (!this._model.isEmpty()) {
+        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.')));
+        }
+      }
     } else {
-      this._panelToolbar.appendToolbarItem(screenshotCheckbox);
+      const screenshotCheckbox = this._createSettingCheckbox(
+          Common.UIString('Screenshots'), this._captureFilmStripSetting,
+          Common.UIString('Capture screenshots while recording. (Has small performance overhead)'));
+
+      if (!Runtime.experiments.isEnabled('timelineRecordingPerspectives') ||
+          perspectiveSetting.get() === Timeline.TimelinePanel.Perspectives.Custom) {
+        this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+            Common.UIString('Network'), this._captureNetworkSetting,
+            Common.UIString('Show network requests information')));
+        this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+            Common.UIString('JS Profile'), this._captureJSProfileSetting,
+            Common.UIString('Capture JavaScript stacks with sampling profiler. (Has small performance overhead)')));
+        this._panelToolbar.appendToolbarItem(screenshotCheckbox);
+        this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+            Common.UIString('Memory'), this._captureMemorySetting,
+            Common.UIString('Capture memory information on every timeline event.')));
+        this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+            Common.UIString('Paint'), this._captureLayersAndPicturesSetting,
+            Common.UIString(
+                'Capture graphics layer positions and rasterization draw calls. (Has large performance overhead)')));
+      } else {
+        this._panelToolbar.appendToolbarItem(screenshotCheckbox);
+      }
     }
 
     if (Runtime.experiments.isEnabled('timelineRuleUsageRecording')) {
@@ -535,16 +556,18 @@ Timeline.TimelinePanel = class extends UI.Panel {
   }
 
   _refreshViews() {
-    for (var i = 0; i < this._currentViews.length; ++i) {
-      var view = this._currentViews[i];
-      view.refreshRecords();
-    }
+    this._currentViews.forEach(view => view.refreshRecords());
     this._updateSelectionDetails();
   }
 
   _onModeChanged() {
     if (this._bulkUpdate)
       return;
+    const showMemory = Runtime.experiments.isEnabled('timelineLandingPage')
+        ? this._showMemorySetting.get() : this._captureMemorySetting.get();
+    const showScreenshots = Runtime.experiments.isEnabled('timelineLandingPage')
+        ? this._showScreenshotsSetting.get() && this._filmStripModel.frames().length
+        : this._captureFilmStripSetting.get();
     // Set up overview controls.
     this._overviewControls = [];
     this._overviewControls.push(new Timeline.TimelineEventOverviewResponsiveness(this._model, this._frameModel));
@@ -553,9 +576,9 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._overviewControls.push(new Timeline.TimelineEventOverviewFrames(this._model, this._frameModel));
     this._overviewControls.push(new Timeline.TimelineEventOverviewCPUActivity(this._model));
     this._overviewControls.push(new Timeline.TimelineEventOverviewNetwork(this._model));
-    if (this._captureFilmStripSetting.get())
+    if (showScreenshots)
       this._overviewControls.push(new Timeline.TimelineFilmStripOverview(this._model, this._filmStripModel));
-    if (this._captureMemorySetting.get())
+    if (showMemory)
       this._overviewControls.push(new Timeline.TimelineEventOverviewMemory(this._model));
     this._overviewPane.setOverviewControls(this._overviewControls);
 
@@ -566,10 +589,12 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._flameChart.enableNetworkPane(this._captureNetworkSetting.get());
     this._addModeView(this._flameChart);
 
-    if (this._captureMemorySetting.get()) {
-      this._addModeView(
-          new Timeline.MemoryCountersGraph(this, this._model, [Timeline.TimelineUIUtils.visibleEventsFilter()]));
+    if (showMemory) {
+      this._addModeView(new Timeline.MemoryCountersGraph(
+          this, this._model, [Timeline.TimelineUIUtils.visibleEventsFilter()]));
     }
+    if (Runtime.experiments.isEnabled('timelineLandingPage'))
+      this._flameChart.enableNetworkPane(true);
 
     this.doResize();
     this.select(null);
@@ -591,13 +616,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
    * @param {boolean} enabled
    */
   _setUIControlsEnabled(enabled) {
-    /**
-     * @param {!UI.ToolbarButton} toolbarButton
-     */
-    function handler(toolbarButton) {
-      toolbarButton.setEnabled(enabled);
-    }
-    this._recordingOptionUIControls.forEach(handler);
+    this._recordingOptionUIControls.forEach(control => control.setEnabled(enabled));
   }
 
   /**
@@ -678,6 +697,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._sessionGeneration = null;
     this._recordingStartTime = 0;
     this._reset();
+    this._recreateToolbarItems();
   }
 
   _reset() {
@@ -870,6 +890,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
     for (let entry of this._extensionTracingModels)
       entry.model.adjustTime(this._model.minimumRecordTime() + (entry.timeOffset / 1000) - this._recordingStartTime);
 
+    this._recreateToolbarItems();
     this._flameChart.resizeToPreferredHeights();
     this._overviewPane.reset();
     this._overviewPane.setBounds(this._model.minimumRecordTime(), this._model.maximumRecordTime());