DevTools: Introduce Landing page for Timeline panel.

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineLandingPage.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineLandingPage.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineLandingPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..b0410648b176fd177f9b24d04dbaaedd485e6ff3
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineLandingPage.js
@@ -0,0 +1,171 @@
+// 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': {
+    value: false,

[caseq, 2016/12/08 17:59:04]

So what do these values mean? They are global and each perspective is going to
modify a different subset of those.

[alph, 2016/12/08 21:45:48]

These are meta defaults. I have to pass a default when creating a setting
object. Each perspective can then adjust them.

+    title: Common.UIString('Network'),
+    description: Common.UIString('Capture network requests information.'),
+    setting: 'timelineCaptureNetwork'
+  },
+  'javascript': {
+    value: true,
+    title: Common.UIString('JavaScript'),
+    description: Common.UIString('Use sampling CPU profiler to collect JavaScript stacks.'),
+    setting: 'timelineEnableJSSampling'
+  },
+  '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': {
+    value: false,
+    title: Common.UIString('Paints'),
+    description: Common.UIString(
+        'Capture graphics layer positions and rasterization draw calls (moderate performance overhead).'),
+    setting: 'timelineCaptureLayersAndPictures'
+  },
+  '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} id
+   * @param {string} title
+   * @param {string} description
+   * @param {!Array<string>=} visibleOptions
+   */
+  constructor(id, title, description, visibleOptions) {
+    super(false);
+    this.id = id;

[caseq, 2016/12/08 17:59:04]

is this used?

[alph, 2016/12/08 21:45:48]

Done.

+    this.title = title;

[caseq, 2016/12/08 17:59:04]

ditto.

[alph, 2016/12/08 21:45:48]

Done.

+    this.description = description;

[caseq, 2016/12/08 17:59:04]

do we need it as a member?

[alph, 2016/12/08 21:45:48]

Done.

+    this._visibleOptions = visibleOptions || [];

[caseq, 2016/12/08 17:59:04]

why is this necessary?

[alph, 2016/12/08 21:45:48]

Done.

+    this.contentElement.classList.add('timeline-perspective-body');
+    this.contentElement.createChild('div', 'timeline-perspective-description').textContent = this.description;
+    for (let id of this._visibleOptions)

[caseq, 2016/12/08 17:59:04]

this shadows a function parameter, can we have a different name? I know someone
who can get confused by this.

[alph, 2016/12/08 21:45:48]

Done.

+      this._createSettingCheckBox(this.contentElement, id, Timeline.RecordingConfig[id]);
+    const footer = this.contentElement.createChild('div', 'timeline-perspective-footer');
+    const actionButton = footer.createChild('button');
+    actionButton.textContent = Common.UIString('Start');
+    actionButton.addEventListener('click', () => this.action());
+  }
+
+  /**
+   * @param {!Element} parent
+   * @param {string} id
+   * @param {!Timeline.RecordingOption} config
+   */
+  _createSettingCheckBox(parent, id, config) {
+    const setting = config.setting ? Common.settings.createSetting(config.setting, config.value) : 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', id);
+    if (setting ? setting.get() : config.value)
+      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(
+        Timeline.TimelinePanel.Perspectives.Load, Common.UIString('Page Load'),
+        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.'),
+        ['screenshots']);
+    Timeline.RecordingConfig.network.value = true;

[caseq, 2016/12/08 17:59:04]

Does it actually have any effect?

[alph, 2016/12/08 21:45:48]

Done.

+    Timeline.RecordingConfig.screenshots.value = true;
+  }
+
+  /**
+   * @override
+   */
+  action() {
+    SDK.targetManager.reloadPage();
+  }
+};
+
+Timeline.ResponsivenessPerspective = class extends Timeline.Perspective {
+  constructor() {
+    super(
+        Timeline.TimelinePanel.Perspectives.Responsiveness, Common.UIString('Responsiveness'),
+        Common.UIString('Record page responsiveness.'), ['screenshots']);
+    Timeline.RecordingConfig.network.value = true;
+  }
+};
+
+Timeline.JavaScriptPerspective = class extends Timeline.Perspective {
+  constructor() {
+    super(
+        Timeline.TimelinePanel.Perspectives.JavaScript, Common.UIString('JavaScript'),
+        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() {
+    super(
+        Timeline.TimelinePanel.Perspectives.Custom, Common.UIString('Custom'),
+        Common.UIString('Advanced mode that allows you to customize recording options.'),
+        ['network', 'javascript', 'screenshots', 'memory', 'paints']);

[caseq, 2016/12/08 17:59:04]

I'd prefer variables instead of strings there, so the compiler could do its job.

[alph, 2016/12/08 21:45:48]

Done.

+  }
+};
+
+Timeline.LandingPage = class extends UI.VBox {
+  constructor() {
+    super(true);
+    this.registerRequiredCSS('timeline/timelineLandingPage.css');
+    this.contentElement.classList.add('timeline-landing-page', 'fill');
+    this._tabbedLocation = UI.viewManager.createTabbedLocation(() => {}, 'timeline-landing-page');
+    this._tabbedPane = this._tabbedLocation.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.addEventListener(UI.TabbedPane.Events.TabSelected, this._tabSelected, this);
+    this._tabbedPane.show(this.contentElement);
+    this._perspectiveSetting = Common.settings.createSetting('timelinePerspective', 'load');
+    this._perspectiveSetting.addChangeListener(this._perspectiveChanged, this);
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _tabSelected(event) {
+    this._perspectiveSetting.set(event.data.tabId)
+  }
+
+  _perspectiveChanged() {
+    this._tabbedPane.selectTab(this._perspectiveSetting.get());
+  }
+};