| OLD | NEW |
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 Timeline.TimelineLandingPage = class extends UI.VBox { | 5 Timeline.TimelineLandingPage = class extends UI.VBox { |
| 6 constructor() { | 6 constructor() { |
| 7 super(true); | 7 super(true); |
| 8 this.registerRequiredCSS('timeline/timelineLandingPage.css'); | 8 this.registerRequiredCSS('timeline/timelineLandingPage.css'); |
| 9 this.contentElement.classList.add('timeline-landing-page', 'fill'); | 9 this.contentElement.classList.add('timeline-landing-page', 'fill'); |
| 10 const perspectives = Timeline.TimelinePanel.Perspectives; | 10 const perspectives = Timeline.TimelinePanel.Perspectives; |
| 11 const config = Timeline.TimelineLandingPage.RecordingConfig; | 11 const config = Timeline.TimelineLandingPage.RecordingConfig; |
| 12 this._tabbedPane = new UI.TabbedPane(); | 12 this._tabbedPane = new UI.TabbedPane(); |
| 13 this._tabbedPane.setTabSlider(true); | 13 this._tabbedPane.setTabSlider(true); |
| 14 this._tabbedPane.renderWithNoHeaderBackground(); | 14 this._tabbedPane.renderWithNoHeaderBackground(); |
| 15 | 15 |
| 16 var tab = new Timeline.TimelineLandingPage.PerspectiveTabWidget(); | 16 var tab = new Timeline.TimelineLandingPage.PerspectiveTabWidget(); |
| 17 tab.appendDescription(Common.UIString( | 17 tab.appendDescription(Common.UIString( |
| 18 'The Performance panel lets you record what the browser does during page
load and user interaction. ' + | 18 'The Performance panel lets you record what the browser does during page
load and user interaction. ' + |
| 19 'The timeline it generates can help you determine why certain parts of y
our page are slow.\u2002')); | 19 'The timeline it generates can help you determine why certain parts of y
our page are slow.\u2002')); |
| 20 tab.appendDescription(learnMore()); | 20 tab.appendDescription(learnMore()); |
| 21 tab.appendDescription(createElement('p')); | 21 tab.appendDescription(createElement('p')); |
| 22 tab.appendDescription(Common.UIString( | 22 tab.appendDescription(Common.UIString( |
| 23 'The basic profile collects network, JavaScript and browser activity as
you interact with the page.')); | 23 'The basic profile collects network, JavaScript and browser activity as
you interact with the page.')); |
| 24 tab.appendOption(config.network, false, true); | 24 tab.appendOption(config.screenshots, true); |
| 25 tab.appendOption(config.screenshots, true, true); | |
| 26 this._tabbedPane.appendTab(perspectives.Responsiveness, Common.UIString('Bas
ic'), tab); | 25 this._tabbedPane.appendTab(perspectives.Responsiveness, Common.UIString('Bas
ic'), tab); |
| 27 | 26 |
| 28 tab = new Timeline.TimelineLandingPage.PerspectiveTabWidget(); | 27 tab = new Timeline.TimelineLandingPage.PerspectiveTabWidget(); |
| 29 tab.appendDescription(Common.UIString( | 28 tab.appendDescription(Common.UIString( |
| 30 'Select what additional details you’d like to record. ' + | 29 'Select what additional details you’d like to record. ' + |
| 31 'By default, the advanced profile will collect all data of the basic pro
file.\u2002')); | 30 'By default, the advanced profile will collect all data of the basic pro
file.\u2002')); |
| 32 tab.appendDescription(learnMore()); | 31 tab.appendDescription(learnMore()); |
| 33 tab.appendOption(config.network, true, true); | 32 tab.appendOption(config.screenshots, true); |
| 34 tab.appendOption(config.javascript, true, true); | 33 tab.appendOption(config.javascript, true); |
| 35 tab.appendOption(config.screenshots, true, true); | 34 tab.appendOption(config.paints, false); |
| 36 tab.appendOption(config.memory, true, false); | |
| 37 tab.appendOption(config.paints, true, false); | |
| 38 this._tabbedPane.appendTab(perspectives.Custom, Common.UIString('Advanced'),
tab); | 35 this._tabbedPane.appendTab(perspectives.Custom, Common.UIString('Advanced'),
tab); |
| 39 | 36 |
| 40 this._tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, this._ta
bSelected, this); | 37 this._tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, this._ta
bSelected, this); |
| 41 this._tabbedPane.show(this.contentElement); | 38 this._tabbedPane.show(this.contentElement); |
| 42 this._perspectiveSetting = | 39 this._perspectiveSetting = |
| 43 Common.settings.createSetting('timelinePerspective', Timeline.TimelinePa
nel.Perspectives.Load); | 40 Common.settings.createSetting('timelinePerspective', Timeline.TimelinePa
nel.Perspectives.Load); |
| 44 this._perspectiveSetting.addChangeListener(this._perspectiveChanged, this); | 41 this._perspectiveSetting.addChangeListener(this._perspectiveChanged, this); |
| 45 | 42 |
| 46 /** | 43 /** |
| 47 * @return {!Element} | 44 * @return {!Element} |
| (...skipping 18 matching lines...) Expand all Loading... |
| 66 const tabWidget = /** @type {!Timeline.TimelineLandingPage.PerspectiveTabWid
get} */ (this._tabbedPane.visibleView); | 63 const tabWidget = /** @type {!Timeline.TimelineLandingPage.PerspectiveTabWid
get} */ (this._tabbedPane.visibleView); |
| 67 tabWidget.activate(); | 64 tabWidget.activate(); |
| 68 } | 65 } |
| 69 }; | 66 }; |
| 70 | 67 |
| 71 /** @typedef {!{id: string, title: string, description: string, setting: string}
} */ | 68 /** @typedef {!{id: string, title: string, description: string, setting: string}
} */ |
| 72 Timeline.TimelineLandingPage.RecordingOption; | 69 Timeline.TimelineLandingPage.RecordingOption; |
| 73 | 70 |
| 74 /** @type {!Object<string, !Timeline.TimelineLandingPage.RecordingOption>} */ | 71 /** @type {!Object<string, !Timeline.TimelineLandingPage.RecordingOption>} */ |
| 75 Timeline.TimelineLandingPage.RecordingConfig = { | 72 Timeline.TimelineLandingPage.RecordingConfig = { |
| 76 network: { | |
| 77 id: 'network', | |
| 78 title: Common.UIString('Network'), | |
| 79 description: Common.UIString('Capture network requests information.'), | |
| 80 setting: 'timelineCaptureNetwork' | |
| 81 }, | |
| 82 javascript: { | 73 javascript: { |
| 83 id: 'javascript', | 74 id: 'javascript', |
| 84 title: Common.UIString('JavaScript'), | 75 title: Common.UIString('JavaScript'), |
| 85 description: Common.UIString('Use sampling CPU profiler to collect JavaScrip
t stacks.'), | 76 description: Common.UIString('Use sampling CPU profiler to collect JavaScrip
t stacks.'), |
| 86 setting: 'timelineEnableJSSampling' | 77 setting: 'timelineEnableJSSampling' |
| 87 }, | 78 }, |
| 88 screenshots: { | 79 screenshots: { |
| 89 id: 'screenshots', | 80 id: 'screenshots', |
| 90 title: Common.UIString('Screenshots'), | 81 title: Common.UIString('Screenshots'), |
| 91 description: | 82 description: |
| 92 Common.UIString('Collect page screenshots, so you can observe how the pa
ge was evolving during recording.'), | 83 Common.UIString('Collect page screenshots, so you can observe how the pa
ge was evolving during recording.'), |
| 93 setting: 'timelineCaptureFilmStrip' | 84 setting: 'timelineCaptureFilmStrip' |
| 94 }, | 85 }, |
| 95 paints: { | 86 paints: { |
| 96 id: 'paints', | 87 id: 'paints', |
| 97 title: Common.UIString('Paints'), | 88 title: Common.UIString('Paints'), |
| 98 description: Common.UIString( | 89 description: Common.UIString( |
| 99 'Capture graphics layer positions and rasterization draw calls (moderate
performance overhead).'), | 90 'Capture graphics layer positions and rasterization draw calls (moderate
performance overhead).'), |
| 100 setting: 'timelineCaptureLayersAndPictures' | 91 setting: 'timelineCaptureLayersAndPictures' |
| 101 }, | |
| 102 memory: { | |
| 103 id: 'memory', | |
| 104 title: Common.UIString('Memory'), | |
| 105 description: Common.UIString('Capture memory statistics on every timeline ev
ent.'), | |
| 106 setting: 'timelineCaptureMemory' | |
| 107 } | 92 } |
| 108 }; | 93 }; |
| 109 | 94 |
| 110 Timeline.TimelineLandingPage.PerspectiveTabWidget = class extends UI.VBox { | 95 Timeline.TimelineLandingPage.PerspectiveTabWidget = class extends UI.VBox { |
| 111 constructor() { | 96 constructor() { |
| 112 super(false); | 97 super(false); |
| 113 this.contentElement.classList.add('timeline-perspective-body'); | 98 this.contentElement.classList.add('timeline-perspective-body'); |
| 114 this._enabledOptions = new Set([Timeline.TimelineLandingPage.RecordingConfig
.javascript.id]); | 99 this._enabledOptions = new Set([Timeline.TimelineLandingPage.RecordingConfig
.javascript.id]); |
| 115 this._descriptionDiv = this.contentElement.createChild('div', 'timeline-pers
pective-description'); | 100 this._descriptionDiv = this.contentElement.createChild('div', 'timeline-pers
pective-description'); |
| 116 this._actionButtonDiv = this.contentElement.createChild('div'); | 101 this._actionButtonDiv = this.contentElement.createChild('div'); |
| 117 this._actionButtonDiv.appendChild(createTextButton(Common.UIString('Record')
, this._record.bind(this))); | 102 this._actionButtonDiv.appendChild(createTextButton(Common.UIString('Record')
, this._record.bind(this))); |
| 118 this._actionButtonDiv.appendChild(createTextButton(Common.UIString('Record P
age Load'), | 103 this._actionButtonDiv.appendChild(createTextButton(Common.UIString('Record P
age Load'), |
| 119 this._recordPageLoad.bind(this))); | 104 this._recordPageLoad.bind(this))); |
| 120 } | 105 } |
| 121 | 106 |
| 122 /** | 107 /** |
| 123 * @param {!Element|string} value | 108 * @param {!Element|string} value |
| 124 */ | 109 */ |
| 125 appendDescription(value) { | 110 appendDescription(value) { |
| 126 if (typeof value === 'string') | 111 if (typeof value === 'string') |
| 127 this._descriptionDiv.createTextChild(value); | 112 this._descriptionDiv.createTextChild(value); |
| 128 else | 113 else |
| 129 this._descriptionDiv.appendChild(value); | 114 this._descriptionDiv.appendChild(value); |
| 130 } | 115 } |
| 131 | 116 |
| 132 /** | 117 /** |
| 133 * @param {!Timeline.TimelineLandingPage.RecordingOption} option | 118 * @param {!Timeline.TimelineLandingPage.RecordingOption} option |
| 134 * @param {boolean} visible | |
| 135 * @param {boolean} enabled | 119 * @param {boolean} enabled |
| 136 */ | 120 */ |
| 137 appendOption(option, visible, enabled) { | 121 appendOption(option, enabled) { |
| 138 if (enabled) | 122 if (enabled) |
| 139 this._enabledOptions.add(option.id); | 123 this._enabledOptions.add(option.id); |
| 140 if (!visible) | |
| 141 return; | |
| 142 const div = createElementWithClass('div', 'recording-setting'); | 124 const div = createElementWithClass('div', 'recording-setting'); |
| 143 const value = this._enabledOptions.has(option.id); | 125 const value = this._enabledOptions.has(option.id); |
| 144 const setting = Common.settings.createSetting(option.setting, value); | 126 const setting = Common.settings.createSetting(option.setting, value); |
| 145 div.appendChild(UI.SettingsUI.createSettingCheckbox(option.title, setting, t
rue)); | 127 div.appendChild(UI.SettingsUI.createSettingCheckbox(option.title, setting, t
rue)); |
| 146 if (option.description) | 128 if (option.description) |
| 147 div.createChild('div', 'recording-setting-description').textContent = opti
on.description; | 129 div.createChild('div', 'recording-setting-description').textContent = opti
on.description; |
| 148 this.contentElement.insertBefore(div, this._actionButtonDiv); | 130 this.contentElement.insertBefore(div, this._actionButtonDiv); |
| 149 } | 131 } |
| 150 | 132 |
| 151 activate() { | 133 activate() { |
| 152 for (const id in Timeline.TimelineLandingPage.RecordingConfig) { | 134 for (const id in Timeline.TimelineLandingPage.RecordingConfig) { |
| 153 const config = Timeline.TimelineLandingPage.RecordingConfig[id]; | 135 const config = Timeline.TimelineLandingPage.RecordingConfig[id]; |
| 154 const setting = Common.settings.createSetting(config.setting, false); | 136 const setting = Common.settings.createSetting(config.setting, false); |
| 155 setting.set(this._enabledOptions.has(id)); | 137 setting.set(this._enabledOptions.has(id)); |
| 156 } | 138 } |
| 157 } | 139 } |
| 158 | 140 |
| 159 _record() { | 141 _record() { |
| 160 UI.actionRegistry.action('timeline.toggle-recording').execute(); | 142 UI.actionRegistry.action('timeline.toggle-recording').execute(); |
| 161 } | 143 } |
| 162 | 144 |
| 163 _recordPageLoad() { | 145 _recordPageLoad() { |
| 164 SDK.targetManager.reloadPage(); | 146 SDK.targetManager.reloadPage(); |
| 165 } | 147 } |
| 166 }; | 148 }; |
| OLD | NEW |