blob: 0f0109b0433d5cbdfa35c0b225e5bb2938e7b113 [file] [log] [blame]
Patrick Hulcea087f622018-05-18 00:37:531// Copyright 2018 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5/**
6 * @unrestricted
7 */
Paul Lewiscf2ef222019-11-22 14:55:358export default class StartView extends UI.Widget {
Patrick Hulcea087f622018-05-18 00:37:539 /**
[email protected]aa1532c2019-05-31 03:01:2410 * @param {!Audits.AuditController} controller
Patrick Hulcea087f622018-05-18 00:37:5311 */
12 constructor(controller) {
13 super();
[email protected]aa1532c2019-05-31 03:01:2414 this.registerRequiredCSS('audits/auditsStartView.css');
Patrick Hulcea087f622018-05-18 00:37:5315 this._controller = controller;
Connor Clarke66080e2019-11-07 00:35:5116 this._settingsToolbar = new UI.Toolbar('');
Patrick Hulcea087f622018-05-18 00:37:5317 this._render();
18 }
19
20 /**
Connor Clarke66080e2019-11-07 00:35:5121 * @return {!UI.Toolbar}
22 */
23 settingsToolbar() {
24 return this._settingsToolbar;
25 }
26
27 /**
Patrick Hulcea087f622018-05-18 00:37:5328 * @param {string} settingName
John Emau73477162019-07-17 00:30:5129 * @param {string} label
Patrick Hulcea087f622018-05-18 00:37:5330 * @param {!Element} parentElement
31 */
John Emau73477162019-07-17 00:30:5132 _populateRuntimeSettingAsRadio(settingName, label, parentElement) {
[email protected]aa1532c2019-05-31 03:01:2433 const runtimeSetting = Audits.RuntimeSettings.find(item => item.setting.name === settingName);
Tim van der Lippe1d6e57a2019-09-30 11:55:3434 if (!runtimeSetting || !runtimeSetting.options) {
Patrick Hulce05c18ce2018-05-24 00:34:5635 throw new Error(`${settingName} is not a setting with options`);
Tim van der Lippe1d6e57a2019-09-30 11:55:3436 }
Patrick Hulce05c18ce2018-05-24 00:34:5637
John Emau84ddefb2019-07-16 19:25:5638 const control = new Audits.RadioSetting(runtimeSetting.options, runtimeSetting.setting, runtimeSetting.description);
Patrick Hulcea087f622018-05-18 00:37:5339 parentElement.appendChild(control.element);
John Emau73477162019-07-17 00:30:5140 UI.ARIAUtils.setAccessibleName(control.element, label);
Patrick Hulcea087f622018-05-18 00:37:5341 }
42
43 /**
Patrick Hulce05c18ce2018-05-24 00:34:5644 * @param {string} settingName
Connor Clarke66080e2019-11-07 00:35:5145 * @param {!UI.Toolbar} toolbar
Patrick Hulce05c18ce2018-05-24 00:34:5646 */
Connor Clarke66080e2019-11-07 00:35:5147 _populateRuntimeSettingAsToolbarCheckbox(settingName, toolbar) {
[email protected]aa1532c2019-05-31 03:01:2448 const runtimeSetting = Audits.RuntimeSettings.find(item => item.setting.name === settingName);
Tim van der Lippe1d6e57a2019-09-30 11:55:3449 if (!runtimeSetting || !runtimeSetting.title) {
Patrick Hulce05c18ce2018-05-24 00:34:5650 throw new Error(`${settingName} is not a setting with a title`);
Tim van der Lippe1d6e57a2019-09-30 11:55:3451 }
Patrick Hulce05c18ce2018-05-24 00:34:5652
53 runtimeSetting.setting.setTitle(runtimeSetting.title);
54 const control = new UI.ToolbarSettingCheckbox(runtimeSetting.setting, runtimeSetting.description);
Connor Clarke66080e2019-11-07 00:35:5155 toolbar.appendToolbarItem(control);
56 if (runtimeSetting.learnMore) {
57 const link = UI.XLink.create(runtimeSetting.learnMore, ls`Learn more`, 'audits-learn-more');
58 link.style.padding = '5px';
59 control.element.appendChild(link);
60 }
Patrick Hulce05c18ce2018-05-24 00:34:5661 }
62
63 /**
Patrick Hulcea087f622018-05-18 00:37:5364 * @param {!UI.Fragment} fragment
65 */
66 _populateFormControls(fragment) {
67 // Populate the device type
68 const deviceTypeFormElements = fragment.$('device-type-form-elements');
John Emau73477162019-07-17 00:30:5169 this._populateRuntimeSettingAsRadio('audits.device_type', ls`Device`, deviceTypeFormElements);
Patrick Hulcea087f622018-05-18 00:37:5370
Connor Clarke66080e2019-11-07 00:35:5171 // Populate the categories
Patrick Hulcea087f622018-05-18 00:37:5372 const categoryFormElements = fragment.$('categories-form-elements');
Connor Clark3ee5ac72019-11-07 23:11:5873 const pluginFormElements = fragment.$('plugins-form-elements');
[email protected]aa1532c2019-05-31 03:01:2474 for (const preset of Audits.Presets) {
Connor Clark3ee5ac72019-11-07 23:11:5875 const formElements = preset.plugin ? pluginFormElements : categoryFormElements;
Patrick Hulcea087f622018-05-18 00:37:5376 preset.setting.setTitle(preset.title);
77 const checkbox = new UI.ToolbarSettingCheckbox(preset.setting);
Connor Clark3ee5ac72019-11-07 23:11:5878 const row = formElements.createChild('div', 'vbox audits-launcher-row');
Patrick Hulce05c18ce2018-05-24 00:34:5679 row.title = preset.description;
Patrick Hulcea087f622018-05-18 00:37:5380 row.appendChild(checkbox.element);
Patrick Hulcea087f622018-05-18 00:37:5381 }
John Emau62fdcee2019-10-16 00:08:5282 UI.ARIAUtils.markAsGroup(categoryFormElements);
Connor Clarke66080e2019-11-07 00:35:5183 UI.ARIAUtils.setAccessibleName(categoryFormElements, ls`Categories`);
Connor Clark3ee5ac72019-11-07 23:11:5884 UI.ARIAUtils.markAsGroup(pluginFormElements);
85 UI.ARIAUtils.setAccessibleName(pluginFormElements, ls`Community Plugins (beta)`);
Patrick Hulcea087f622018-05-18 00:37:5386 }
87
88 _render() {
Connor Clarke66080e2019-11-07 00:35:5189 this._populateRuntimeSettingAsToolbarCheckbox('audits.clear_storage', this._settingsToolbar);
90 this._populateRuntimeSettingAsToolbarCheckbox('audits.throttling', this._settingsToolbar);
91
Patrick Hulcea087f622018-05-18 00:37:5392 this._startButton = UI.createTextButton(
Brandon Goddard04d5ba92019-12-19 16:31:5593 ls`Generate report`,
94 () => this._controller.dispatchEventToListeners(
95 Audits.Events.RequestAuditStart,
96 /* keyboardInitiated */ UI.elementIsFocusedByKeyboard(this._startButton)),
97 /* className */ '', /* primary */ true);
Patrick Hulce05c18ce2018-05-24 00:34:5698 this.setDefaultFocusedElement(this._startButton);
99
Christy Chen1eea03c2019-06-26 19:31:24100 const auditsDescription = ls
101 `Identify and fix common problems that affect your site's performance, accessibility, and user experience.`; // crbug.com/972969
Patrick Hulcea087f622018-05-18 00:37:53102
103 const fragment = UI.Fragment.build`
[email protected]aa1532c2019-05-31 03:01:24104 <div class="vbox audits-start-view">
Patrick Hulcea087f622018-05-18 00:37:53105 <header>
[email protected]aa1532c2019-05-31 03:01:24106 <div class="audits-logo"></div>
Connor Clarke66080e2019-11-07 00:35:51107 <div class="audits-start-button-container hbox">
108 ${this._startButton}
109 </div>
110 <div $="help-text" class="audits-help-text hidden"></div>
[email protected]aa1532c2019-05-31 03:01:24111 <div class="audits-start-view-text">
Connor Clarke66080e2019-11-07 00:35:51112 <span>${auditsDescription}</span>
John Emau97832ab2019-07-16 00:37:34113 ${UI.XLink.create('https://developers.google.com/web/tools/lighthouse/', ls`Learn more`)}
Patrick Hulcea087f622018-05-18 00:37:53114 </div>
115 </header>
116 <form>
Connor Clark3ee5ac72019-11-07 23:11:58117 <div class="audits-form-categories">
118 <div class="audits-form-section">
119 <div class="audits-form-section-label">
120 ${ls`Categories`}
121 </div>
122 <div class="audits-form-elements" $="categories-form-elements"></div>
Patrick Hulcea087f622018-05-18 00:37:53123 </div>
Connor Clark3ee5ac72019-11-07 23:11:58124 <div class="audits-form-section">
125 <div class="audits-form-section-label">
126 <div class="audits-icon-label">${ls`Community Plugins (beta)`}</div>
127 </div>
128 <div class="audits-form-elements" $="plugins-form-elements"></div>
129 </div>
Patrick Hulcea087f622018-05-18 00:37:53130 </div>
[email protected]aa1532c2019-05-31 03:01:24131 <div class="audits-form-section">
132 <div class="audits-form-section-label">
Connor Clarke66080e2019-11-07 00:35:51133 ${ls`Device`}
Patrick Hulcea087f622018-05-18 00:37:53134 </div>
Connor Clarke66080e2019-11-07 00:35:51135 <div class="audits-form-elements" $="device-type-form-elements"></div>
Patrick Hulcea087f622018-05-18 00:37:53136 </div>
137 </form>
138 </div>
139 `;
140
141 this._helpText = fragment.$('help-text');
Patrick Hulcea087f622018-05-18 00:37:53142 this._populateFormControls(fragment);
143 this.contentElement.appendChild(fragment.element());
144 this.contentElement.style.overflow = 'auto';
145 }
146
Connor Clarke66080e2019-11-07 00:35:51147 /**
148 * @override
149 */
150 onResize() {
151 const useNarrowLayout = this.contentElement.offsetWidth < 560;
152 const startViewEl = this.contentElement.querySelector('.audits-start-view');
153 startViewEl.classList.toggle('hbox', !useNarrowLayout);
154 startViewEl.classList.toggle('vbox', useNarrowLayout);
155 }
156
Patrick Hulce8d387f12018-05-29 18:54:54157 focusStartButton() {
158 this._startButton.focus();
159 }
160
Patrick Hulcea087f622018-05-18 00:37:53161 /**
162 * @param {boolean} isEnabled
163 */
164 setStartButtonEnabled(isEnabled) {
Tim van der Lippe1d6e57a2019-09-30 11:55:34165 if (this._helpText) {
Patrick Hulcea087f622018-05-18 00:37:53166 this._helpText.classList.toggle('hidden', isEnabled);
Tim van der Lippe1d6e57a2019-09-30 11:55:34167 }
Patrick Hulcea087f622018-05-18 00:37:53168
Tim van der Lippe1d6e57a2019-09-30 11:55:34169 if (this._startButton) {
Patrick Hulcea087f622018-05-18 00:37:53170 this._startButton.disabled = !isEnabled;
Tim van der Lippe1d6e57a2019-09-30 11:55:34171 }
Patrick Hulcea087f622018-05-18 00:37:53172 }
173
174 /**
175 * @param {?string} text
176 */
177 setUnauditableExplanation(text) {
Tim van der Lippe1d6e57a2019-09-30 11:55:34178 if (this._helpText) {
Patrick Hulcea087f622018-05-18 00:37:53179 this._helpText.textContent = text;
Tim van der Lippe1d6e57a2019-09-30 11:55:34180 }
Patrick Hulcea087f622018-05-18 00:37:53181 }
Paul Lewiscf2ef222019-11-22 14:55:35182}
183
184/* Legacy exported object */
185self.Audits = self.Audits || {};
186
187/* Legacy exported object */
188Audits = Audits || {};
189
190/**
191 * @constructor
192 */
193Audits.StartView = StartView;