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.
+
+/** @typedef {!{value: boolean, title: string, description: string, setting: string}} */
+Timeline.RecordingOption;
+
+/** @type {!Object<string, !Timeline.RecordingOption>} */
+Timeline.RecordingConfig = {
+  network: {
+    id: 'network',
+    value: false,

[caseq, 2016/12/09 02:11:12]

s/value/forceEnable/?

[alph, 2016/12/09 21:36:10]

Done.

+    title: Common.UIString('Network'),
+    description: Common.UIString('Capture network requests information.'),
+    setting: 'timelineCaptureNetwork'
+  },
+  javascript: {
+    id: 'javascript',
+    value: true,
+    title: Common.UIString('JavaScript'),
+    description: Common.UIString('Use sampling CPU profiler to collect JavaScript stacks.'),
+    setting: 'timelineEnableJSSampling'
+  },
+  screenshots: {
+    id: 'screenshots',
+    value: false,
+    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',
+    value: false,
+    title: Common.UIString('Paints'),
+    description: Common.UIString(
+        'Capture graphics layer positions and rasterization draw calls (moderate performance overhead).'),
+    setting: 'timelineCaptureLayersAndPictures'
+  },
+  memory: {
+    id: 'memory',
+    value: true,
+    title: Common.UIString('Memory'),
+    description: Common.UIString('Capture memory information on every timeline event.'),
+    setting: 'timelineCaptureMemory'
+  }
+};
+
+Timeline.Perspective = class extends UI.VBox {
+  /**
+   * @param {string} description
+   * @param {!Array<string>=} visibleOptions
+   * @param {!Array<string>=} enabledOptions
+   */
+  constructor(description, visibleOptions, enabledOptions) {
+    super(false);
+    this.contentElement.classList.add('timeline-perspective-body');
+    this.contentElement.createChild('div', 'timeline-perspective-description').textContent = description;
+    for (const id of visibleOptions || []) {
+      const config = Timeline.RecordingConfig[id];
+      const enable = config.value || enabledOptions && enabledOptions.indexOf(id) !== -1;
+      this._createSettingCheckBox(this.contentElement, config, enable);

[caseq, 2016/12/09 02:11:12]

This queitly looses the "forceEnable" value semantics as we convert it to
defaultValue -- so when the setting already exists, the forceEnable is actually
not taken into account.

[alph, 2016/12/09 21:36:10]

Done.

+    }
+    const actionButton = this.contentElement.createChild('div').createChild('button', 'action-button');
+    actionButton.textContent = Common.UIString('Start');
+    actionButton.addEventListener('click', () => this.action());
+  }
+
+  /**
+   * @param {!Element} parent
+   * @param {!Timeline.RecordingOption} config
+   * @param {boolean} defaultValue
+   */
+  _createSettingCheckBox(parent, config, defaultValue) {
+    const setting = config.setting ? Common.settings.createSetting(config.setting, defaultValue) : null;
+    const div = parent.createChild('div', 'recording-setting');
+    const label = div.createChild('label');
+    const checkbox = label.createChild('input');
+    checkbox.setAttribute('type', 'checkbox');
+    checkbox.setAttribute('id', config.id);
+    if (setting ? setting.get() : defaultValue)
+      checkbox.setAttribute('checked', true);
+    if (setting)
+      checkbox.addEventListener('change', event => setting.set(event.target.checked));
+    label.createTextChild(config.title);
+    if (config.description)
+      div.createChild('div', 'recording-setting-description').textContent = config.description;
+  }
+
+  action() {
+    UI.actionRegistry.action('timeline.toggle-recording').execute();
+  }
+};
+
+Timeline.LoadPerspective = class extends Timeline.Perspective {
+  constructor() {
+    super(
+        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.'),
+        [Timeline.RecordingConfig.screenshots.id],

[caseq, 2016/12/09 02:11:12]

Let's pass Timeline.RecordingConfig.screenshots,
Timeline.RecordingConfig.network etc?

[alph, 2016/12/09 21:36:10]

Done.

+        [Timeline.RecordingConfig.network.id, Timeline.RecordingConfig.screenshots.id]);
+  }
+
+  /**
+   * @override
+   */
+  action() {
+    SDK.targetManager.reloadPage();
+  }
+};
+
+Timeline.ResponsivenessPerspective = class extends Timeline.Perspective {
+  constructor() {
+    super(
+        Common.UIString('Record page responsiveness.'), [Timeline.RecordingConfig.screenshots.id],
+        [Timeline.RecordingConfig.network.id]);
+  }
+};
+
+Timeline.JavaScriptPerspective = class extends Timeline.Perspective {
+  constructor() {
+    super(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.'));
+  }
+};
+
+Timeline.CustomPerspective = class extends Timeline.Perspective {
+  constructor() {
+    const config = Timeline.RecordingConfig;
+    super(
+        Common.UIString('Advanced mode that allows you to customize recording options.'),
+        [config.network.id, config.javascript.id, config.screenshots.id, config.memory.id, config.paints.id],
+        [config.network.id, config.screenshots.id]);
+  }
+};
+
+Timeline.LandingPage = 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;
+    this._tabbedPane = new UI.TabbedPane();
+    this._tabbedPane.registerRequiredCSS('timeline/timelineLandingPage.css');
+    this._tabbedPane.registerRequiredCSS('ui_lazy/dialog.css');
+    this._tabbedPane.contentElement.classList.add('timeline-landing-page');
+    this._tabbedPane.setTabSlider(true);
+    this._tabbedPane.appendTab(perspectives.Load, Common.UIString('Page Load'), new Timeline.LoadPerspective());
+    this._tabbedPane.appendTab(
+        perspectives.Responsiveness, Common.UIString('Responsiveness'), new Timeline.ResponsivenessPerspective());
+    this._tabbedPane.appendTab(
+        perspectives.JavaScript, Common.UIString('JavaScript'), new Timeline.JavaScriptPerspective());
+    this._tabbedPane.appendTab(perspectives.Custom, Common.UIString('Custom'), new Timeline.CustomPerspective());
+    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);
+  }
+
+  /**
+   * @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());
+  }
+};