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.

[pfeldman, 2016/12/10 00:05:20]

The class name should match the file name. You define 6 classes in one file and
none of the names match the file name. You should have:

Timeline.TimelineLandingPage
Timeline.TimelineLandingPage.PresetsTab
Timeline.TimelineLandingPage.RecordingOption

etc.

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/** @typedef {!{id: string, title: string, description: string, setting: string}} */
+Timeline.RecordingOption;
+
+/** @type {!Object<string, !Timeline.RecordingOption>} */
+Timeline.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.Perspective = class extends UI.VBox {

[pfeldman, 2016/12/10 00:05:20]

...TabWidget?

+  /**
+   * @param {string} description
+   * @param {!Array<!Timeline.RecordingOption>=} visibleOptions
+   * @param {!Array<!Timeline.RecordingOption>=} enabledOptions
+   */
+  constructor(description, visibleOptions, enabledOptions) {
+    super(false);
+    enabledOptions = enabledOptions || [];
+    this._enabledOptions = new Set(enabledOptions.map(option => option.id));
+    this._enabledOptions.add(Timeline.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', () => this.action());
+  }
+
+  /**
+   * @param {!Element} parent
+   * @param {!Timeline.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.RecordingConfig) {
+      const config = Timeline.RecordingConfig[id];
+      const setting = Common.settings.createSetting(config.setting, false);
+      setting.set(this._enabledOptions.has(id));
+    }
+  }
+
+  action() {
+    UI.actionRegistry.action('timeline.toggle-recording').execute();
+  }
+};
+
+Timeline.LoadPerspective = class extends Timeline.Perspective {

[pfeldman, 2016/12/10 00:05:20]

Inheritance should be out last resort, you don't need it here.

+  constructor() {
+    const config = Timeline.RecordingConfig;
+    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.'),
+        [config.screenshots], [config.network, config.screenshots]);
+  }
+
+  /**
+   * @override
+   */
+  action() {
+    SDK.targetManager.reloadPage();
+  }
+};
+
+Timeline.ResponsivenessPerspective = class extends Timeline.Perspective {
+  constructor() {
+    const config = Timeline.RecordingConfig;
+    super(Common.UIString('Record page responsiveness.'), [config.screenshots], [config.network]);
+  }
+};
+
+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, config.javascript, config.screenshots, config.memory, config.paints],
+        [config.network, config.screenshots]);
+  }
+};
+
+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');

[pfeldman, 2016/12/10 00:05:20]

We should not abuse tabbed pane and style it externally.

+    this._tabbedPane.registerRequiredCSS('ui_lazy/dialog.css');

[pfeldman, 2016/12/10 00:05:20]

ditto

+    this._tabbedPane.contentElement.classList.add('timeline-landing-page');

[pfeldman, 2016/12/10 00:05:20]

Also don't

+    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());
+    const perspective = /** @type {!Timeline.Perspective} */ (this._tabbedPane.visibleView);
+    perspective.activate();
+  }
+};