DevTools: bring back old landing page in timeline/performance.

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 58 matching lines @@
         new TimelineModel.TimelineFrameModel(event => Timeline.TimelineUIUtils.eventStyle(event).category.name);
     this._filmStripModel = new SDK.FilmStripModel(this._tracingModel);
     this._irModel = new TimelineModel.TimelineIRModel();
     /** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */
     this._extensionTracingModels = [];
     this._cpuThrottlingManager = new Components.CPUThrottlingManager();
 
     /** @type {!Array<!Timeline.TimelineModeView>} */
     this._currentViews = [];
 
-    this._captureJSProfileSetting = Common.settings.createSetting('timelineEnableJSSampling', true);
+    this._disableCaptureJSProfileSetting = Common.settings.createSetting('timelineDisableJSSampling', false);
     this._captureLayersAndPicturesSetting = Common.settings.createSetting('timelineCaptureLayersAndPictures', false);
-    this._captureFilmStripSetting = Common.settings.createSetting('timelineCaptureFilmStrip', false);
 
-    this._showScreenshotsSetting = Common.settings.createLocalSetting('timelineShowScreenshots', false);
+    this._showScreenshotsSetting = Common.settings.createLocalSetting('timelineShowScreenshots', true);
     this._showScreenshotsSetting.addChangeListener(this._onModeChanged, this);
     this._showMemorySetting = Common.settings.createLocalSetting('timelineShowMemory', false);
     this._showMemorySetting.addChangeListener(this._onModeChanged, this);
 
     this._panelToolbar = new UI.Toolbar('', this.element);
+    this._createSettingsPane();
+    this._updateShowSettingsToolbarButton();
 
     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.
     this._overviewPane = new PerfUI.TimelineOverviewPane('timeline');
     this._overviewPane.addEventListener(
         PerfUI.TimelineOverviewPane.Events.WindowChanged, this._onWindowChanged.bind(this));
     this._overviewPane.show(topPaneElement);
     this._statusPaneContainer = this._timelinePane.element.createChild('div', 'status-pane-container fill');
 
     this._createFileSelector();
 
     SDK.targetManager.addEventListener(SDK.TargetManager.Events.PageReloadRequested, this._pageReloadRequested, this);
     SDK.targetManager.addEventListener(SDK.TargetManager.Events.Load, this._loadEventFired, this);
 
-    this._landingPage = new Timeline.TimelineLandingPage();
-
     // Create top level properties splitter.
     this._detailsSplitWidget = new UI.SplitWidget(false, true, 'timelinePanelDetailsSplitViewState');
     this._detailsSplitWidget.element.classList.add('timeline-details-split');
     this._detailsView = new Timeline.TimelineDetailsView(this._model, this._filters, this);
     this._detailsSplitWidget.installResizer(this._detailsView.headerElement());
     this._detailsSplitWidget.setSidebarWidget(this._detailsView);
 
     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._cpuThrottlingManager.addEventListener(
-        Components.CPUThrottlingManager.Events.RateChanged, this._updateConfigureThrottlingButton.bind(this));
-    this._throttlingToolbar = new UI.Toolbar('', this.element);
-    this._throttlingToolbar.appendText(Common.UIString('Network:'));
-    this._throttlingToolbar.appendToolbarItem(this._createNetworkConditionsSelect());
-    this._throttlingToolbar.appendSeparator();
-    this._throttlingToolbar.appendText(Common.UIString('CPU:'));
-    this._throttlingToolbar.appendToolbarItem(this._cpuThrottlingManager.createControl());
-    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._configureThrottlingSetting.addChangeListener(this._updateThrottlingToolbarVisibility.bind(this));
-    this._updateThrottlingToolbarVisibility();
-
+    this._populateToolbar();
     this._showLandingPage();
-    this._recreateToolbarItems();
 
     Extensions.extensionServer.addEventListener(
-        Extensions.ExtensionServer.Events.TraceProviderAdded, this._recreateToolbarItems, this);
-
-    this._captureFilmStripSetting.addChangeListener(this._onModeChanged, this);
+        Extensions.ExtensionServer.Events.TraceProviderAdded, this._appendExtensionsToToolbar, this);
 
     this._detailsSplitWidget.show(this._timelinePane.element);
     this._detailsSplitWidget.hideSidebar();
     SDK.targetManager.addEventListener(SDK.TargetManager.Events.SuspendStateChanged, this._onSuspendStateChanged, this);
 
     /** @type {!SDK.TracingModel.Event}|undefined */
     this._selectedSearchResult;
     /** @type {!Array<!SDK.TracingModel.Event>}|undefined */
     this._searchResults;
     /** @type {?symbol} */
@@ skipping 132 matching lines @@
    * @param {!Common.Setting} setting
    * @param {string} tooltip
    * @return {!UI.ToolbarItem}
    */
   _createSettingCheckbox(name, setting, tooltip) {
     const checkboxItem = new UI.ToolbarCheckbox(name, tooltip, setting);
     this._recordingOptionUIControls.push(checkboxItem);
     return checkboxItem;
   }
 
-  _recreateToolbarItems() {
-    this._panelToolbar.removeToolbarItems();
-
-    // Close
-    if (!this._model.isEmpty()) {
-      const clearButton = new UI.ToolbarButton(Common.UIString('Close profile'), 'largeicon-delete');
-      clearButton.addEventListener(UI.ToolbarButton.Events.Click, this._clear, this);
-      this._panelToolbar.appendToolbarItem(clearButton);
-      this._panelToolbar.appendSeparator();
-    }
-
+  _populateToolbar() {
     // Record
     this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButton(this._toggleRecordAction));
     this._panelToolbar.appendToolbarItem(UI.Toolbar.createActionButtonForId('main.reload'));
+    var clearButton = new UI.ToolbarButton(Common.UIString('Clear'), 'largeicon-clear');
+    clearButton.addEventListener(UI.ToolbarButton.Events.Click, () => this._clear());
+    this._panelToolbar.appendToolbarItem(clearButton);
     this._panelToolbar.appendSeparator();
-    this._panelToolbar.appendToolbarItem(this._configureThrottlingButton);
+
+    // View
+    this._panelToolbar.appendSeparator();
+    this._showScreenshotsToolbarCheckbox = this._createSettingCheckbox(
+        Common.UIString('Screenshots'), this._showScreenshotsSetting, Common.UIString('Capture screenshots'));
+    this._panelToolbar.appendToolbarItem(this._showScreenshotsToolbarCheckbox);
+
+    this._showMemoryToolbarCheckbox = this._createSettingCheckbox(
+        Common.UIString('Memory'), this._showMemorySetting, Common.UIString('Show memory timeline.'));
+    this._panelToolbar.appendToolbarItem(this._showMemoryToolbarCheckbox);
+
+    // Settings
+    this._panelToolbar.appendToolbarItem(this._showSettingsPaneButton);
+
+    // GC
     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.')));
-      }
-    }
+  _createSettingsPane() {
+    this._showSettingsPaneSetting = Common.settings.createSetting('timelineShowSettingsToolbar', false);
+    this._showSettingsPaneButton = new UI.ToolbarSettingToggle(
+        this._showSettingsPaneSetting, 'largeicon-settings-gear', Common.UIString('Capture settings'));
+    SDK.multitargetNetworkManager.addEventListener(
+        SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._updateShowSettingsToolbarButton, this);
+    this._cpuThrottlingManager.addEventListener(
+        Components.CPUThrottlingManager.Events.RateChanged, this._updateShowSettingsToolbarButton, this);
+    this._disableCaptureJSProfileSetting.addChangeListener(this._updateShowSettingsToolbarButton, this);
+    this._captureLayersAndPicturesSetting.addChangeListener(this._updateShowSettingsToolbarButton, this);
 
-    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._settingsPane = new UI.HBox();
+    this._settingsPane.element.classList.add('timeline-settings-pane');
+    this._settingsPane.show(this.element);
 
-    this._updateTimelineControls();
+    var captureToolbar = new UI.Toolbar('', this._settingsPane.element);
+    captureToolbar.element.classList.add('flex-auto');
+    captureToolbar.makeVertical();
+    captureToolbar.appendToolbarItem(this._createSettingCheckbox(
+        Common.UIString('Disable JavaScript Samples'), this._disableCaptureJSProfileSetting,
+        Common.UIString('Disables JavaScript sampling, reduces overhead when running against mobile devices')));
+    captureToolbar.appendToolbarItem(this._createSettingCheckbox(
+        Common.UIString('Enable advanced paint instrumentation (slow)'), this._captureLayersAndPicturesSetting,
+        Common.UIString('Captures advanced paint instrumentation, introduces significant performance overhead')));
+
+    var throttlingPane = new UI.VBox();
+    throttlingPane.element.classList.add('flex-auto');
+    throttlingPane.show(this._settingsPane.element);
+
+    var throttlingToolbar1 = new UI.Toolbar('', throttlingPane.element);
+    throttlingToolbar1.appendText(Common.UIString('Network:'));
+    throttlingToolbar1.appendToolbarItem(this._createNetworkConditionsSelect());
+    var throttlingToolbar2 = new UI.Toolbar('', throttlingPane.element);
+    throttlingToolbar2.appendText(Common.UIString('CPU:'));
+    throttlingToolbar2.appendToolbarItem(this._cpuThrottlingManager.createControl());
+
+    this._showSettingsPaneSetting.addChangeListener(this._updateSettingsPaneVisibility.bind(this));
+    this._updateSettingsPaneVisibility();
   }
 
   /**
+    * @param {!Common.Event} event
+    */
+  _appendExtensionsToToolbar(event) {
+    var provider = /** @type {!Extensions.ExtensionTraceProvider} */ (event.data);
+    const setting = Timeline.TimelinePanel._settingForTraceProvider(provider);
+    const checkbox = this._createSettingCheckbox(provider.shortDisplayName(), setting, provider.longDisplayName());
+    this._panelToolbar.appendToolbarItem(checkbox);
+  }
+
+  /**
    * @param {!Extensions.ExtensionTraceProvider} traceProvider
    * @return {!Common.Setting<boolean>}
    */
   static _settingForTraceProvider(traceProvider) {
     var setting = traceProvider[Timeline.TimelinePanel._traceProviderSettingSymbol];
     if (!setting) {
       var providerId = traceProvider.persistentIdentifier();
       setting = Common.settings.createSetting(providerId, false);
       traceProvider[Timeline.TimelinePanel._traceProviderSettingSymbol] = setting;
     }
@@ skipping 12 matching lines @@
 
   _prepareToLoadTimeline() {
     console.assert(this._state === Timeline.TimelinePanel.State.Idle);
     this._setState(Timeline.TimelinePanel.State.Loading);
   }
 
   _createFileSelector() {
     if (this._fileSelectorElement)
       this._fileSelectorElement.remove();
     this._fileSelectorElement = UI.createFileSelectorElement(this._loadFromFile.bind(this));
-    this.element.appendChild(this._fileSelectorElement);
+    this._timelinePane.element.appendChild(this._fileSelectorElement);
   }
 
   /**
    * @param {!Event} event
    */
   _contextMenu(event) {
     var contextMenu = new UI.ContextMenu(event);
     contextMenu.appendItemsAtLocation('timelineMenu');
     contextMenu.show();
   }
@@ skipping 54 matching lines @@
     this._loader = Timeline.TimelineLoader.loadFromURL(this._tracingModel, url, this);
   }
 
   _refreshViews() {
     this._currentViews.forEach(view => view.refreshRecords());
     this._updateSelectionDetails();
   }
 
   _onModeChanged() {
     const showMemory = this._showMemorySetting.get();
-    const showScreenshots = this._showScreenshotsSetting.get() && this._filmStripModel.frames().length;
+    const showScreenshots = this._showScreenshotsSetting.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 (showScreenshots)
       this._overviewControls.push(new Timeline.TimelineFilmStripOverview(this._model, this._filmStripModel));
     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._addModeView(this._flameChart);
 
     if (showMemory) {
       this._addModeView(
           new Timeline.MemoryCountersGraph(this, this._model, [Timeline.TimelineUIUtils.visibleEventsFilter()]));
     }
 
     this.doResize();
     this.select(null);
   }
 
-  _updateThrottlingToolbarVisibility() {
-    this._throttlingToolbar.element.classList.toggle('hidden', !this._configureThrottlingSetting.get());
+  _updateSettingsPaneVisibility() {
+    if (this._showSettingsPaneSetting.get())
+      this._settingsPane.showWidget();
+    else
+      this._settingsPane.hideWidget();
   }
 
-  _updateConfigureThrottlingButton() {
-    var makeRed = this._cpuThrottlingManager.rate() !== 1 || SDK.multitargetNetworkManager.isThrottling();
-    this._configureThrottlingButton.setDefaultWithRedColor(makeRed);
-    this._configureThrottlingButton.setToggleWithRedColor(makeRed);
+  _updateShowSettingsToolbarButton() {
+    var messages = [];
+    if (this._cpuThrottlingManager.rate() !== 1)
+      messages.push(Common.UIString('- CPU throttling is enabled'));
+    if (SDK.multitargetNetworkManager.isThrottling())
+      messages.push(Common.UIString('- Network throttling is enabled'));
+    if (this._captureLayersAndPicturesSetting.get())
+      messages.push(Common.UIString('- Significant overhead due to paint instrumentation'));
+    if (this._disableCaptureJSProfileSetting.get())
+      messages.push(Common.UIString('- JavaScript sampling is disabled'));
+
+    this._showSettingsPaneButton.setDefaultWithRedColor(messages.length);
+    this._showSettingsPaneButton.setToggleWithRedColor(messages.length);
+
+    if (messages.length) {
+      var tooltipElement = createElement('div');
+      messages.forEach(message => {
+        tooltipElement.createChild('div').textContent = message;
+      });
+      this._showSettingsPaneButton.setTitle(tooltipElement);
+    } else {
+      this._showSettingsPaneButton.setTitle(Common.UIString('Capture settings'));
+    }
   }
 
   /**
    * @param {boolean} enabled
    */
   _setUIControlsEnabled(enabled) {
     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;
     this._setState(Timeline.TimelinePanel.State.StartPending);
     this._showRecordingStarted();
 
     this._sessionGeneration = Symbol('timelineSessionGeneration');
     this._autoRecordGeneration = userInitiated ? null : Symbol('Generation');
     var enabledTraceProviders = Extensions.extensionServer.traceProviders().filter(
         provider => Timeline.TimelinePanel._settingForTraceProvider(provider).get());
 
-    const recordingOptions = this._landingPage.recordingOptions();
+    const recordingOptions = {
+      enableJSSampling: !this._disableCaptureJSProfileSetting.get(),
+      capturePictures: this._captureLayersAndPicturesSetting.get(),
+      captureFilmStrip: this._showScreenshotsSetting.get()
+    };
+
     this._controller = new Timeline.TimelineController(mainTarget, this, this._tracingModel);
     this._controller.startRecording(recordingOptions, enabledTraceProviders);
     this._recordingStartTime = Date.now();
 
     for (var i = 0; i < this._overviewControls.length; ++i)
       this._overviewControls[i].timelineStarted();
 
     Host.userMetrics.actionTaken(
         userInitiated ? Host.UserMetrics.Action.TimelineStarted : Host.UserMetrics.Action.TimelinePageReloadStarted);
     this._setUIControlsEnabled(false);
@@ skipping 31 matching lines @@
     else if (this._state === Timeline.TimelinePanel.State.Recording)
       this._stopRecording();
   }
 
   _clear() {
     this._showLandingPage();
     this._detailsSplitWidget.hideSidebar();
     this._sessionGeneration = null;
     this._recordingStartTime = 0;
     this._reset();
-    this._recreateToolbarItems();
   }
 
   _reset() {
     PerfUI.LineLevelProfile.instance().reset();
     this._tracingModel.reset();
     this._model.reset();
     for (let extensionEntry of this._extensionTracingModels)
       extensionEntry.model.reset();
     this._extensionTracingModels.splice(0);
 
@@ skipping 45 matching lines @@
 
   /**
    * @override
    * @return {?symbol}
    */
   sessionGeneration() {
     return this._sessionGeneration;
   }
 
   _showLandingPage() {
-    this._timelinePane.detach();
-    this._landingPage.show(this.element);
+    if (this._landingPage) {
+      this._landingPage.show(this._statusPaneContainer);
+      return;
+    }
+
+    /**
+     * @param {string} tagName
+     * @param {string} contents
+     */
+    function encloseWithTag(tagName, contents) {
+      var e = createElement(tagName);
+      e.textContent = contents;
+      return e;
+    }
+
+    var learnMoreNode = UI.createExternalLink(
+        'https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/', Common.UIString('Learn more'));
+    var recordNode =
+        encloseWithTag('b', UI.shortcutRegistry.shortcutDescriptorsForAction('timeline.toggle-recording')[0].name);
+    var reloadNode = encloseWithTag('b', UI.shortcutRegistry.shortcutDescriptorsForAction('main.reload')[0].name);
+    var navigateNode = encloseWithTag('b', Common.UIString('WASD'));
+
+    this._landingPage = new UI.VBox();
+    this._landingPage.contentElement.classList.add('timeline-landing-page', 'fill');
+    var centered = this._landingPage.contentElement.createChild('div');
+
+    var p = centered.createChild('p');
+    p.createTextChild(Common.UIString(
+        'The Performance panel lets you record what the browser does during page load and user interaction. The timeline it generates can help you determine why certain parts of your page are slow.'));
+
+    p = centered.createChild('p');
+    p.appendChild(UI.formatLocalized(
+        'To capture a new recording, click the record toolbar button or hit %s. To evaluate page load performance, hit %s to record the reload.',
+        [recordNode, reloadNode]));
+
+    p = centered.createChild('p');
+    p.appendChild(UI.formatLocalized(
+        'After recording, select an area of interest in the overview by dragging. Then, zoom and pan the timeline with the mousewheel or %s keys.',
+        [navigateNode]));
+
+    p = centered.createChild('p');
+    p.appendChild(learnMoreNode);
+
+    this._landingPage.show(this._statusPaneContainer);
   }
 
   _hideLandingPage() {
     this._landingPage.detach();
-    this._timelinePane.show(this.element);
   }
 
   /**
    * @override
    */
   loadingStarted() {
     this._hideLandingPage();
 
     if (this._statusPane)
       this._statusPane.hide();
@@ skipping 42 matching lines @@
     var asyncEventsByGroup = this._model.mainThreadAsyncEvents();
     this._irModel.populate(asyncEventsByGroup.get(groups.input), asyncEventsByGroup.get(groups.animation));
     this._model.cpuProfiles().forEach(profile => PerfUI.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 1124 matching lines @@
 };
 
 Timeline.TimelinePanel._traceProviderSettingSymbol = Symbol('traceProviderSetting');
 
 /** @enum {symbol} */
 Timeline.TimelineFilters.Events = {
   FilterChanged: Symbol('FilterChanged')
 };
 
 Timeline.TimelineFilters._durationFilterPresetsMs = [0, 1, 15];