Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(451)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/timeline/TimelineLandingPage.js

Issue 2581003002: DevTools: remove extra options from Timeline Advanced mode. (Closed)
Patch Set: Bring back JavaScript option Created 4 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/timeline/TimelineController.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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 };
OLDNEW
« no previous file with comments | « third_party/WebKit/Source/devtools/front_end/timeline/TimelineController.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698