blob: caf89515b5aaa7b4fb4a79cf78c26be1b6434e38 [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
Tim van der Lippe132b4ba2020-09-02 15:00:485// @ts-nocheck
6// TODO(crbug.com/1011811): Enable TypeScript compiler checks
7
Adam Raine3226e932020-10-08 14:42:218import * as Common from '../common/common.js'; // eslint-disable-line no-unused-vars
Paul Lewisdaac1062020-03-05 14:37:109import * as UI from '../ui/ui.js'; // eslint-disable-line no-unused-vars
10
Connor Clark2bc3be22020-02-14 22:34:1911import {Events, LighthouseController, Presets, RuntimeSettings} from './LighthouseController.js'; // eslint-disable-line no-unused-vars
Paul Lewis51474192020-01-09 16:02:2212import {RadioSetting} from './RadioSetting.js';
13
Patrick Hulcea087f622018-05-18 00:37:5314/**
15 * @unrestricted
16 */
Paul Lewisdaac1062020-03-05 14:37:1017export class StartView extends UI.Widget.Widget {
Patrick Hulcea087f622018-05-18 00:37:5318 /**
Connor Clark2bc3be22020-02-14 22:34:1919 * @param {!LighthouseController} controller
Patrick Hulcea087f622018-05-18 00:37:5320 */
21 constructor(controller) {
22 super();
Jack Franklin71519f82020-11-03 12:08:5923 this.registerRequiredCSS('lighthouse/lighthouseStartView.css', {enableLegacyPatching: true});
Patrick Hulcea087f622018-05-18 00:37:5324 this._controller = controller;
Paul Lewisdaac1062020-03-05 14:37:1025 this._settingsToolbar = new UI.Toolbar.Toolbar('');
Patrick Hulcea087f622018-05-18 00:37:5326 this._render();
27 }
28
29 /**
Paul Lewisdaac1062020-03-05 14:37:1030 * @return {!UI.Toolbar.Toolbar}
Connor Clarke66080e2019-11-07 00:35:5131 */
32 settingsToolbar() {
33 return this._settingsToolbar;
34 }
35
36 /**
Patrick Hulcea087f622018-05-18 00:37:5337 * @param {string} settingName
John Emau73477162019-07-17 00:30:5138 * @param {string} label
Patrick Hulcea087f622018-05-18 00:37:5339 * @param {!Element} parentElement
40 */
John Emau73477162019-07-17 00:30:5141 _populateRuntimeSettingAsRadio(settingName, label, parentElement) {
Paul Lewis51474192020-01-09 16:02:2242 const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
Tim van der Lippe1d6e57a2019-09-30 11:55:3443 if (!runtimeSetting || !runtimeSetting.options) {
Patrick Hulce05c18ce2018-05-24 00:34:5644 throw new Error(`${settingName} is not a setting with options`);
Tim van der Lippe1d6e57a2019-09-30 11:55:3445 }
Patrick Hulce05c18ce2018-05-24 00:34:5646
Paul Lewis51474192020-01-09 16:02:2247 const control = new RadioSetting(runtimeSetting.options, runtimeSetting.setting, runtimeSetting.description);
Patrick Hulcea087f622018-05-18 00:37:5348 parentElement.appendChild(control.element);
John Emau73477162019-07-17 00:30:5149 UI.ARIAUtils.setAccessibleName(control.element, label);
Patrick Hulcea087f622018-05-18 00:37:5350 }
51
52 /**
Patrick Hulce05c18ce2018-05-24 00:34:5653 * @param {string} settingName
Paul Lewisdaac1062020-03-05 14:37:1054 * @param {!UI.Toolbar.Toolbar} toolbar
Patrick Hulce05c18ce2018-05-24 00:34:5655 */
Connor Clarke66080e2019-11-07 00:35:5156 _populateRuntimeSettingAsToolbarCheckbox(settingName, toolbar) {
Paul Lewis51474192020-01-09 16:02:2257 const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
Tim van der Lippe1d6e57a2019-09-30 11:55:3458 if (!runtimeSetting || !runtimeSetting.title) {
Patrick Hulce05c18ce2018-05-24 00:34:5659 throw new Error(`${settingName} is not a setting with a title`);
Tim van der Lippe1d6e57a2019-09-30 11:55:3460 }
Patrick Hulce05c18ce2018-05-24 00:34:5661
62 runtimeSetting.setting.setTitle(runtimeSetting.title);
Paul Lewisdaac1062020-03-05 14:37:1063 const control = new UI.Toolbar.ToolbarSettingCheckbox(runtimeSetting.setting, runtimeSetting.description);
Connor Clarke66080e2019-11-07 00:35:5164 toolbar.appendToolbarItem(control);
65 if (runtimeSetting.learnMore) {
Paul Lewisdaac1062020-03-05 14:37:1066 const link = UI.XLink.XLink.create(runtimeSetting.learnMore, ls`Learn more`, 'lighthouse-learn-more');
Connor Clarke66080e2019-11-07 00:35:5167 link.style.padding = '5px';
68 control.element.appendChild(link);
69 }
Patrick Hulce05c18ce2018-05-24 00:34:5670 }
71
72 /**
Paul Lewisdaac1062020-03-05 14:37:1073 * @param {!UI.Fragment.Fragment} fragment
Patrick Hulcea087f622018-05-18 00:37:5374 */
75 _populateFormControls(fragment) {
76 // Populate the device type
77 const deviceTypeFormElements = fragment.$('device-type-form-elements');
Connor Clark2bc3be22020-02-14 22:34:1978 this._populateRuntimeSettingAsRadio('lighthouse.device_type', ls`Device`, deviceTypeFormElements);
Patrick Hulcea087f622018-05-18 00:37:5379
Connor Clarke66080e2019-11-07 00:35:5180 // Populate the categories
Patrick Hulcea087f622018-05-18 00:37:5381 const categoryFormElements = fragment.$('categories-form-elements');
Connor Clark3ee5ac72019-11-07 23:11:5882 const pluginFormElements = fragment.$('plugins-form-elements');
Paul Lewis51474192020-01-09 16:02:2283 for (const preset of Presets) {
Connor Clark3ee5ac72019-11-07 23:11:5884 const formElements = preset.plugin ? pluginFormElements : categoryFormElements;
Patrick Hulcea087f622018-05-18 00:37:5385 preset.setting.setTitle(preset.title);
Christy Chen5358c082020-08-12 06:57:0986 const checkbox = new UI.Toolbar.ToolbarSettingCheckbox(preset.setting, preset.description);
Connor Clark2bc3be22020-02-14 22:34:1987 const row = formElements.createChild('div', 'vbox lighthouse-launcher-row');
Patrick Hulcea087f622018-05-18 00:37:5388 row.appendChild(checkbox.element);
Patrick Hulcea087f622018-05-18 00:37:5389 }
John Emau62fdcee2019-10-16 00:08:5290 UI.ARIAUtils.markAsGroup(categoryFormElements);
Connor Clarke66080e2019-11-07 00:35:5191 UI.ARIAUtils.setAccessibleName(categoryFormElements, ls`Categories`);
Connor Clark3ee5ac72019-11-07 23:11:5892 UI.ARIAUtils.markAsGroup(pluginFormElements);
93 UI.ARIAUtils.setAccessibleName(pluginFormElements, ls`Community Plugins (beta)`);
Patrick Hulcea087f622018-05-18 00:37:5394 }
95
96 _render() {
Connor Clark2bc3be22020-02-14 22:34:1997 this._populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this._settingsToolbar);
98 this._populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this._settingsToolbar);
Connor Clarke66080e2019-11-07 00:35:5199
Paul Lewisdaac1062020-03-05 14:37:10100 this._startButton = UI.UIUtils.createTextButton(
Brandon Goddard04d5ba92019-12-19 16:31:55101 ls`Generate report`,
102 () => this._controller.dispatchEventToListeners(
Connor Clark2bc3be22020-02-14 22:34:19103 Events.RequestLighthouseStart,
Peter Marshallde3fee72020-08-24 14:12:49104 /* keyboardInitiated */ this._startButton.matches(':focus-visible')),
Brandon Goddard04d5ba92019-12-19 16:31:55105 /* className */ '', /* primary */ true);
Patrick Hulce05c18ce2018-05-24 00:34:56106 this.setDefaultFocusedElement(this._startButton);
107
Christy Chen1eea03c2019-06-26 19:31:24108 const auditsDescription = ls
109 `Identify and fix common problems that affect your site's performance, accessibility, and user experience.`; // crbug.com/972969
Patrick Hulcea087f622018-05-18 00:37:53110
Paul Lewisdaac1062020-03-05 14:37:10111 const fragment = UI.Fragment.Fragment.build`
Connor Clark2bc3be22020-02-14 22:34:19112 <div class="vbox lighthouse-start-view">
Patrick Hulcea087f622018-05-18 00:37:53113 <header>
Connor Clark2bc3be22020-02-14 22:34:19114 <div class="lighthouse-logo"></div>
115 <div class="lighthouse-start-button-container hbox">
Connor Clarke66080e2019-11-07 00:35:51116 ${this._startButton}
117 </div>
Connor Clark2bc3be22020-02-14 22:34:19118 <div $="help-text" class="lighthouse-help-text hidden"></div>
119 <div class="lighthouse-start-view-text">
Connor Clarke66080e2019-11-07 00:35:51120 <span>${auditsDescription}</span>
Paul Lewisdaac1062020-03-05 14:37:10121 ${UI.XLink.XLink.create('https://developers.google.com/web/tools/lighthouse/', ls`Learn more`)}
Patrick Hulcea087f622018-05-18 00:37:53122 </div>
Adam Raine3226e932020-10-08 14:42:21123 <div $="warning-text" class="lighthouse-warning-text hidden"></div>
Patrick Hulcea087f622018-05-18 00:37:53124 </header>
125 <form>
Connor Clark2bc3be22020-02-14 22:34:19126 <div class="lighthouse-form-categories">
127 <div class="lighthouse-form-section">
128 <div class="lighthouse-form-section-label">
Connor Clark3ee5ac72019-11-07 23:11:58129 ${ls`Categories`}
130 </div>
Connor Clark2bc3be22020-02-14 22:34:19131 <div class="lighthouse-form-elements" $="categories-form-elements"></div>
Patrick Hulcea087f622018-05-18 00:37:53132 </div>
Connor Clark2bc3be22020-02-14 22:34:19133 <div class="lighthouse-form-section">
134 <div class="lighthouse-form-section-label">
135 <div class="lighthouse-icon-label">${ls`Community Plugins (beta)`}</div>
Connor Clark3ee5ac72019-11-07 23:11:58136 </div>
Connor Clark2bc3be22020-02-14 22:34:19137 <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
Connor Clark3ee5ac72019-11-07 23:11:58138 </div>
Patrick Hulcea087f622018-05-18 00:37:53139 </div>
Connor Clark2bc3be22020-02-14 22:34:19140 <div class="lighthouse-form-section">
141 <div class="lighthouse-form-section-label">
Connor Clarke66080e2019-11-07 00:35:51142 ${ls`Device`}
Patrick Hulcea087f622018-05-18 00:37:53143 </div>
Connor Clark2bc3be22020-02-14 22:34:19144 <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
Patrick Hulcea087f622018-05-18 00:37:53145 </div>
146 </form>
147 </div>
148 `;
149
150 this._helpText = fragment.$('help-text');
Adam Raine3226e932020-10-08 14:42:21151 this._warningText = fragment.$('warning-text');
Patrick Hulcea087f622018-05-18 00:37:53152 this._populateFormControls(fragment);
153 this.contentElement.appendChild(fragment.element());
154 this.contentElement.style.overflow = 'auto';
155 }
156
Connor Clarke66080e2019-11-07 00:35:51157 /**
158 * @override
159 */
160 onResize() {
161 const useNarrowLayout = this.contentElement.offsetWidth < 560;
Connor Clark2bc3be22020-02-14 22:34:19162 const startViewEl = this.contentElement.querySelector('.lighthouse-start-view');
Connor Clarke66080e2019-11-07 00:35:51163 startViewEl.classList.toggle('hbox', !useNarrowLayout);
164 startViewEl.classList.toggle('vbox', useNarrowLayout);
165 }
166
Patrick Hulce8d387f12018-05-29 18:54:54167 focusStartButton() {
168 this._startButton.focus();
169 }
170
Patrick Hulcea087f622018-05-18 00:37:53171 /**
172 * @param {boolean} isEnabled
173 */
174 setStartButtonEnabled(isEnabled) {
Tim van der Lippe1d6e57a2019-09-30 11:55:34175 if (this._helpText) {
Patrick Hulcea087f622018-05-18 00:37:53176 this._helpText.classList.toggle('hidden', isEnabled);
Tim van der Lippe1d6e57a2019-09-30 11:55:34177 }
Patrick Hulcea087f622018-05-18 00:37:53178
Tim van der Lippe1d6e57a2019-09-30 11:55:34179 if (this._startButton) {
Patrick Hulcea087f622018-05-18 00:37:53180 this._startButton.disabled = !isEnabled;
Tim van der Lippe1d6e57a2019-09-30 11:55:34181 }
Patrick Hulcea087f622018-05-18 00:37:53182 }
183
184 /**
185 * @param {?string} text
186 */
187 setUnauditableExplanation(text) {
Tim van der Lippe1d6e57a2019-09-30 11:55:34188 if (this._helpText) {
Patrick Hulcea087f622018-05-18 00:37:53189 this._helpText.textContent = text;
Tim van der Lippe1d6e57a2019-09-30 11:55:34190 }
Patrick Hulcea087f622018-05-18 00:37:53191 }
Adam Raine3226e932020-10-08 14:42:21192
193 /**
194 * @param {?string} text
195 */
196 setWarningText(text) {
197 if (this._warningText) {
198 this._warningText.textContent = text;
199 this._warningText.classList.toggle('hidden', !text);
200 this._shouldConfirm = !!text;
201 }
202 }
Paul Lewiscf2ef222019-11-22 14:55:35203}