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 |