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 62 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);
     this._recordingOptionUIControls.push(checkboxItem);
     return checkboxItem;
   }
 
   _recreateToolbarItems() {
     this._panelToolbar.removeToolbarItems();
 
     var 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 (!this._recordingOptionUIControls)
+      this._recordingOptionUIControls = [];

[caseq, 2016/12/16 01:47:40]

Let's move to constructor.

[alph, 2016/12/16 01:59:55]

Done.

 
-    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')) {
       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);
   }
 
@@ skipping 88 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._onModeChanged();

[caseq, 2016/12/16 01:47:40]

Why is this added?

[alph, 2016/12/16 01:59:55]

accidentally.

     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);
   }
 };