DevTools: Introduce Landing page for Timeline panel.

third_party/WebKit/Source/devtools/front_end/timeline/TimelineLandingPage.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+Timeline.TimelineLandingPage = class extends UI.VBox {
+  constructor() {
+    super(true);
+    this.registerRequiredCSS('timeline/timelineLandingPage.css');
+    this.contentElement.classList.add('timeline-landing-page', 'fill');
+    const perspectives = Timeline.TimelinePanel.Perspectives;
+    const config = Timeline.TimelineLandingPage.RecordingConfig;
+    this._tabbedPane = new UI.TabbedPane();
+    this._tabbedPane.setTabSlider(true);
+    this._tabbedPane.renderWithNoHeaderBackground();
+    this._tabbedPane.renderWithNoTabBorders();
+    this._tabbedPane.appendTab(perspectives.Load, Common.UIString('Page Load'),
+        new Timeline.TimelineLandingPage.PerspectiveTabWidget(Common.UIString(
+            'Page Load mode allows you to analyze how fast the page is loaded and becomes responsive.\n' +
+            'In this mode the page is automatically reloaded right after the recording has started. ' +
+            'During recording it collects information about network requests, screen state updates, ' +
+            'and CPU threads acivity along with JavaScript stacks. ' +
+            'Recording is stopped automatically shortly after the page processes load event.'), recordAndReload,
+            [config.screenshots], [config.network, config.screenshots]));
+    this._tabbedPane.appendTab(perspectives.Responsiveness, Common.UIString('Responsiveness'),
+        new Timeline.TimelineLandingPage.PerspectiveTabWidget(Common.UIString('Record page responsiveness.'),
+            record, [config.screenshots], [config.network]));
+    this._tabbedPane.appendTab(perspectives.JavaScript, Common.UIString('JavaScript'),
+        new Timeline.TimelineLandingPage.PerspectiveTabWidget(Common.UIString(
+            'This mode is useful when you want to focus on JavaScript performance. ' +
+            'All the options besides sampling CPU profiler are turned off to minimize measurement errors.'), record));
+    this._tabbedPane.appendTab(perspectives.Custom, Common.UIString('Custom'),
+        new Timeline.TimelineLandingPage.PerspectiveTabWidget(Common.UIString(
+            'Advanced mode that allows you to customize recording options.'), record,
+            [config.network, config.javascript, config.screenshots, config.memory, config.paints],

[pfeldman, 2016/12/10 02:15:59]

var tab = new Tab(id);
tab.setDescription(.....);
tab.appendSetting(config.network, true, true);
tab.appendSetting(config.javascript, true, false);
tab.appendAction(button);
tab.appendAction(button);
...
appendTab(tab);

+            [config.network, config.screenshots]));
+    this._tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, this._tabSelected, this);
+    this._tabbedPane.show(this.contentElement);
+    this._perspectiveSetting =
+        Common.settings.createSetting('timelinePerspective', Timeline.TimelinePanel.Perspectives.Load);
+    this._perspectiveSetting.addChangeListener(this._perspectiveChanged, this);
+
+    function record() {
+      UI.actionRegistry.action('timeline.toggle-recording').execute();
+    }
+
+    function recordAndReload() {
+      SDK.targetManager.reloadPage();
+    }
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _tabSelected(event) {
+    if (this._perspectiveSetting.get() !== event.data.tabId)
+      this._perspectiveSetting.set(event.data.tabId);
+  }
+
+  _perspectiveChanged() {
+    this._tabbedPane.selectTab(this._perspectiveSetting.get());
+    const tabWidget = /** @type {!Timeline.TimelineLandingPage.PerspectiveTabWidget} */ (this._tabbedPane.visibleView);
+    tabWidget.activate();
+  }
+};
+
+/** @typedef {!{id: string, title: string, description: string, setting: string}} */
+Timeline.TimelineLandingPage.RecordingOption;
+
+/** @type {!Object<string, !Timeline.TimelineLandingPage.RecordingOption>} */
+Timeline.TimelineLandingPage.RecordingConfig = {
+  network: {
+    id: 'network',
+    title: Common.UIString('Network'),
+    description: Common.UIString('Capture network requests information.'),
+    setting: 'timelineCaptureNetwork'
+  },
+  javascript: {
+    id: 'javascript',
+    title: Common.UIString('JavaScript'),
+    description: Common.UIString('Use sampling CPU profiler to collect JavaScript stacks.'),
+    setting: 'timelineEnableJSSampling'
+  },
+  screenshots: {
+    id: 'screenshots',
+    title: Common.UIString('Screenshots'),
+    description:
+        Common.UIString('Collect page screenshots, so you can observe how the page was evolving during recording.'),
+    setting: 'timelineCaptureFilmStrip'
+  },
+  paints: {
+    id: 'paints',
+    title: Common.UIString('Paints'),
+    description: Common.UIString(
+        'Capture graphics layer positions and rasterization draw calls (moderate performance overhead).'),
+    setting: 'timelineCaptureLayersAndPictures'
+  },
+  memory: {
+    id: 'memory',
+    title: Common.UIString('Memory'),
+    description: Common.UIString('Capture memory statistics on every timeline event.'),
+    setting: 'timelineCaptureMemory'
+  }
+};
+
+Timeline.TimelineLandingPage.PerspectiveTabWidget = class extends UI.VBox {
+  /**
+   * @param {string} description
+   * @param {function()} action
+   * @param {!Array<!Timeline.TimelineLandingPage.RecordingOption>=} visibleOptions
+   * @param {!Array<!Timeline.TimelineLandingPage.RecordingOption>=} enabledOptions
+   */
+  constructor(description, action, visibleOptions, enabledOptions) {
+    super(false);
+    enabledOptions = enabledOptions || [];
+    this._enabledOptions = new Set(enabledOptions.map(option => option.id));
+    this._enabledOptions.add(Timeline.TimelineLandingPage.RecordingConfig.javascript.id);
+    this.contentElement.classList.add('timeline-perspective-body');
+    this.contentElement.createChild('div', 'timeline-perspective-description').textContent = description;
+    for (const config of visibleOptions || [])
+      this._createSettingCheckBox(this.contentElement, config);
+    const actionButton = this.contentElement.createChild('div').createChild('button', 'action-button');
+    actionButton.textContent = Common.UIString('Start');
+    actionButton.addEventListener('click', action);
+  }
+
+  /**
+   * @param {!Element} parent
+   * @param {!Timeline.TimelineLandingPage.RecordingOption} config
+   */
+  _createSettingCheckBox(parent, config) {
+    const div = parent.createChild('div', 'recording-setting');
+    const value = this._enabledOptions.has(config.id);
+    const setting = Common.settings.createSetting(config.setting, value);
+    div.appendChild(UI.SettingsUI.createSettingCheckbox(config.title, setting, true));
+    if (config.description)
+      div.createChild('div', 'recording-setting-description').textContent = config.description;
+  }
+
+  activate() {
+    for (let id in Timeline.TimelineLandingPage.RecordingConfig) {
+      const config = Timeline.TimelineLandingPage.RecordingConfig[id];
+      const setting = Common.settings.createSetting(config.setting, false);
+      setting.set(this._enabledOptions.has(id));
+    }
+  }
+};