DevTools: Rearrange Timeline toolbar for landing page mode

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 26 matching lines @@
  */
 Timeline.TimelinePanel = class extends UI.Panel {
   constructor() {
     super('timeline');
     this.registerRequiredCSS('timeline/timelinePanel.css');
     this.element.addEventListener('contextmenu', this._contextMenu.bind(this), false);
     this._dropTarget = new UI.DropTarget(
         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;
     this._windowEndTime = Infinity;
     this._millisecondsToRecordAfterLoadEvent = 3000;
     this._toggleRecordAction =
         /** @type {!UI.Action }*/ (UI.actionRegistry.action('timeline.toggle-recording'));
 
     /** @type {!Array<!TimelineModel.TimelineModel.Filter>} */
     this._filters = [];
@@ skipping 16 matching lines @@
 
     /** @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);
+
     this._markUnusedCSS = Common.settings.createSetting('timelineMarkUnusedCSS', false);
 
     this._panelToolbar = new UI.Toolbar('', this.element);
 
     this._timelinePane = new UI.VBox();
     this._timelinePane.show(this.element);
     var topPaneElement = this._timelinePane.element.createChild('div', 'hbox');
     topPaneElement.id = 'timeline-overview-panel';
 
     // Create top overview component.
@@ skipping 173 matching lines @@
     this._updateTimelineControls();
   }
 
   /**
    * @param {string} name
    * @param {!Common.Setting} setting
    * @param {string} tooltip
    * @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;
   }
 
   _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));
     }
 
     // Clear
     var clearButton = new UI.ToolbarButton(Common.UIString('Clear recording'), 'largeicon-clear');
     clearButton.addEventListener(UI.ToolbarButton.Events.Click, this._clear, this);
     this._panelToolbar.appendToolbarItem(clearButton);
 
     this._panelToolbar.appendSeparator();
 
     // Combo
-    if (Runtime.experiments.isEnabled('timelineRecordingPerspectives')) {
+    if (!Runtime.experiments.isEnabled('timelineLandingPage') &&
+        Runtime.experiments.isEnabled('timelineRecordingPerspectives')) {
       /**
        * @this {!Timeline.TimelinePanel}
        */
       function onPerspectiveChanged() {
         perspectiveSetting.set(perspectiveCombobox.selectElement().value);
         this._recreateToolbarItems();
       }
 
       /**
        * @param {string} id
@@ skipping 37 matching lines @@
           this._captureLayersAndPicturesSetting.set(false);
           this._captureFilmStripSetting.set(false);
           this._detailsView.selectTab(Timeline.TimelinePanel.DetailsTab.BottomUp, false);
           break;
       }
 
       this._bulkUpdate = false;
       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('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 {
+      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('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')) {
       this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
           Common.UIString('CSS coverage'), this._markUnusedCSS, Common.UIString('Mark unused CSS in souces.')));
     }
 
     const traceProviders = Extensions.extensionServer.traceProviders();
     if (traceProviders.length) {
       this._panelToolbar.appendSeparator();
@@ skipping 131 matching lines @@
    * @param {string} url
    */
   _loadFromURL(url) {
     if (this._state !== Timeline.TimelinePanel.State.Idle)
       return;
     this._prepareToLoadTimeline();
     this._loader = Timeline.TimelineLoader.loadFromURL(this._tracingModel, url, this);
   }
 
   _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));
     if (Runtime.experiments.isEnabled('inputEventsOnTimelineOverview'))
       this._overviewControls.push(new Timeline.TimelineEventOverviewInput(this._model));
     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);
 
     // Set up the main view.
     this._removeAllModeViews();
     this._flameChart = new Timeline.TimelineFlameChartView(
         this, this._model, this._frameModel, this._irModel, this._extensionTracingModels, this._filters);
     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);
   }
 
   _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));
   }
 
   /**
    * @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));
   }
 
   /**
    * @param {boolean} userInitiated
    */
   _startRecording(userInitiated) {
     console.assert(!this._statusPane, 'Status pane is already opened.');
     var mainTarget = SDK.targetManager.mainTarget();
     if (!mainTarget)
       return;
@@ skipping 60 matching lines @@
     else if (this._state === Timeline.TimelinePanel.State.Recording)
       this._stopRecording();
   }
 
   _clear() {
     this._showRecordingHelpMessage();
     this._detailsSplitWidget.hideSidebar();
     this._sessionGeneration = null;
     this._recordingStartTime = 0;
     this._reset();
+    this._recreateToolbarItems();
   }
 
   _reset() {
     if (Runtime.experiments.isEnabled('timelineRuleUsageRecording') && this._markUnusedCSS.get())
       Components.CoverageProfile.instance().reset();
 
     Components.LineLevelProfile.instance().reset();
     this._tracingModel.reset();
     this._model.reset();
     for (let extensionEntry of this._extensionTracingModels)
@@ skipping 172 matching lines @@
     var asyncEventsByGroup = this._model.mainThreadAsyncEvents();
     this._irModel.populate(asyncEventsByGroup.get(groups.input), asyncEventsByGroup.get(groups.animation));
     this._model.cpuProfiles().forEach(profile => Components.LineLevelProfile.instance().appendCPUProfile(profile));
     if (this._statusPane)
       this._statusPane.hide();
     delete this._statusPane;
 
     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());
     this._setAutoWindowTimes();
     this._refreshViews();
     for (var i = 0; i < this._overviewControls.length; ++i)
       this._overviewControls[i].timelineStopped();
     this._setMarkers();
     this._overviewPane.scheduleUpdate();
     this._updateSearchHighlight(false, true);
@@ skipping 1182 matching lines @@
   }
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetRemoved(target) {
     this._targets.remove(target, true);
   }
 };