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..60c11b032456ebf5d6e558fc72f401d055a411cb 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -80,6 +80,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,8 +278,6 @@ 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);
     this._recordingOptionUIControls.push(checkboxItem);
     return checkboxItem;
@@ -287,11 +290,14 @@ Timeline.TimelinePanel = class extends UI.Panel {
         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 +310,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 +369,43 @@ 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 (!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')) {
@@ -535,16 +557,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 +577,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 +590,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);
@@ -678,6 +704,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._sessionGeneration = null;
     this._recordingStartTime = 0;
     this._reset();
+    this._recreateToolbarItems();
   }
 
   _reset() {
@@ -870,6 +897,8 @@ 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._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());