Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 1 | // 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 Lippe | 132b4ba | 2020-09-02 15:00:48 | [diff] [blame] | 5 | // @ts-nocheck |
| 6 | // TODO(crbug.com/1011811): Enable TypeScript compiler checks |
| 7 | |
Adam Raine | 3226e93 | 2020-10-08 14:42:21 | [diff] [blame] | 8 | import * as Common from '../common/common.js'; // eslint-disable-line no-unused-vars |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 9 | import * as UI from '../ui/ui.js'; // eslint-disable-line no-unused-vars |
| 10 | |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 11 | import {Events, LighthouseController, Presets, RuntimeSettings} from './LighthouseController.js'; // eslint-disable-line no-unused-vars |
Paul Lewis | 5147419 | 2020-01-09 16:02:22 | [diff] [blame] | 12 | import {RadioSetting} from './RadioSetting.js'; |
| 13 | |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 14 | /** |
| 15 | * @unrestricted |
| 16 | */ |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 17 | export class StartView extends UI.Widget.Widget { |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 18 | /** |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 19 | * @param {!LighthouseController} controller |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 20 | */ |
| 21 | constructor(controller) { |
| 22 | super(); |
Jack Franklin | 71519f8 | 2020-11-03 12:08:59 | [diff] [blame^] | 23 | this.registerRequiredCSS('lighthouse/lighthouseStartView.css', {enableLegacyPatching: true}); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 24 | this._controller = controller; |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 25 | this._settingsToolbar = new UI.Toolbar.Toolbar(''); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 26 | this._render(); |
| 27 | } |
| 28 | |
| 29 | /** |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 30 | * @return {!UI.Toolbar.Toolbar} |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 31 | */ |
| 32 | settingsToolbar() { |
| 33 | return this._settingsToolbar; |
| 34 | } |
| 35 | |
| 36 | /** |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 37 | * @param {string} settingName |
John Emau | 7347716 | 2019-07-17 00:30:51 | [diff] [blame] | 38 | * @param {string} label |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 39 | * @param {!Element} parentElement |
| 40 | */ |
John Emau | 7347716 | 2019-07-17 00:30:51 | [diff] [blame] | 41 | _populateRuntimeSettingAsRadio(settingName, label, parentElement) { |
Paul Lewis | 5147419 | 2020-01-09 16:02:22 | [diff] [blame] | 42 | const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 43 | if (!runtimeSetting || !runtimeSetting.options) { |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 44 | throw new Error(`${settingName} is not a setting with options`); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 45 | } |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 46 | |
Paul Lewis | 5147419 | 2020-01-09 16:02:22 | [diff] [blame] | 47 | const control = new RadioSetting(runtimeSetting.options, runtimeSetting.setting, runtimeSetting.description); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 48 | parentElement.appendChild(control.element); |
John Emau | 7347716 | 2019-07-17 00:30:51 | [diff] [blame] | 49 | UI.ARIAUtils.setAccessibleName(control.element, label); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 50 | } |
| 51 | |
| 52 | /** |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 53 | * @param {string} settingName |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 54 | * @param {!UI.Toolbar.Toolbar} toolbar |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 55 | */ |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 56 | _populateRuntimeSettingAsToolbarCheckbox(settingName, toolbar) { |
Paul Lewis | 5147419 | 2020-01-09 16:02:22 | [diff] [blame] | 57 | const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 58 | if (!runtimeSetting || !runtimeSetting.title) { |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 59 | throw new Error(`${settingName} is not a setting with a title`); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 60 | } |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 61 | |
| 62 | runtimeSetting.setting.setTitle(runtimeSetting.title); |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 63 | const control = new UI.Toolbar.ToolbarSettingCheckbox(runtimeSetting.setting, runtimeSetting.description); |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 64 | toolbar.appendToolbarItem(control); |
| 65 | if (runtimeSetting.learnMore) { |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 66 | const link = UI.XLink.XLink.create(runtimeSetting.learnMore, ls`Learn more`, 'lighthouse-learn-more'); |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 67 | link.style.padding = '5px'; |
| 68 | control.element.appendChild(link); |
| 69 | } |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 70 | } |
| 71 | |
| 72 | /** |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 73 | * @param {!UI.Fragment.Fragment} fragment |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 74 | */ |
| 75 | _populateFormControls(fragment) { |
| 76 | // Populate the device type |
| 77 | const deviceTypeFormElements = fragment.$('device-type-form-elements'); |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 78 | this._populateRuntimeSettingAsRadio('lighthouse.device_type', ls`Device`, deviceTypeFormElements); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 79 | |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 80 | // Populate the categories |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 81 | const categoryFormElements = fragment.$('categories-form-elements'); |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 82 | const pluginFormElements = fragment.$('plugins-form-elements'); |
Paul Lewis | 5147419 | 2020-01-09 16:02:22 | [diff] [blame] | 83 | for (const preset of Presets) { |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 84 | const formElements = preset.plugin ? pluginFormElements : categoryFormElements; |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 85 | preset.setting.setTitle(preset.title); |
Christy Chen | 5358c08 | 2020-08-12 06:57:09 | [diff] [blame] | 86 | const checkbox = new UI.Toolbar.ToolbarSettingCheckbox(preset.setting, preset.description); |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 87 | const row = formElements.createChild('div', 'vbox lighthouse-launcher-row'); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 88 | row.appendChild(checkbox.element); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 89 | } |
John Emau | 62fdcee | 2019-10-16 00:08:52 | [diff] [blame] | 90 | UI.ARIAUtils.markAsGroup(categoryFormElements); |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 91 | UI.ARIAUtils.setAccessibleName(categoryFormElements, ls`Categories`); |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 92 | UI.ARIAUtils.markAsGroup(pluginFormElements); |
| 93 | UI.ARIAUtils.setAccessibleName(pluginFormElements, ls`Community Plugins (beta)`); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 94 | } |
| 95 | |
| 96 | _render() { |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 97 | this._populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this._settingsToolbar); |
| 98 | this._populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this._settingsToolbar); |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 99 | |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 100 | this._startButton = UI.UIUtils.createTextButton( |
Brandon Goddard | 04d5ba9 | 2019-12-19 16:31:55 | [diff] [blame] | 101 | ls`Generate report`, |
| 102 | () => this._controller.dispatchEventToListeners( |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 103 | Events.RequestLighthouseStart, |
Peter Marshall | de3fee7 | 2020-08-24 14:12:49 | [diff] [blame] | 104 | /* keyboardInitiated */ this._startButton.matches(':focus-visible')), |
Brandon Goddard | 04d5ba9 | 2019-12-19 16:31:55 | [diff] [blame] | 105 | /* className */ '', /* primary */ true); |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 106 | this.setDefaultFocusedElement(this._startButton); |
| 107 | |
Christy Chen | 1eea03c | 2019-06-26 19:31:24 | [diff] [blame] | 108 | const auditsDescription = ls |
| 109 | `Identify and fix common problems that affect your site's performance, accessibility, and user experience.`; // crbug.com/972969 |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 110 | |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 111 | const fragment = UI.Fragment.Fragment.build` |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 112 | <div class="vbox lighthouse-start-view"> |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 113 | <header> |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 114 | <div class="lighthouse-logo"></div> |
| 115 | <div class="lighthouse-start-button-container hbox"> |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 116 | ${this._startButton} |
| 117 | </div> |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 118 | <div $="help-text" class="lighthouse-help-text hidden"></div> |
| 119 | <div class="lighthouse-start-view-text"> |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 120 | <span>${auditsDescription}</span> |
Paul Lewis | daac106 | 2020-03-05 14:37:10 | [diff] [blame] | 121 | ${UI.XLink.XLink.create('https://developers.google.com/web/tools/lighthouse/', ls`Learn more`)} |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 122 | </div> |
Adam Raine | 3226e93 | 2020-10-08 14:42:21 | [diff] [blame] | 123 | <div $="warning-text" class="lighthouse-warning-text hidden"></div> |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 124 | </header> |
| 125 | <form> |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 126 | <div class="lighthouse-form-categories"> |
| 127 | <div class="lighthouse-form-section"> |
| 128 | <div class="lighthouse-form-section-label"> |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 129 | ${ls`Categories`} |
| 130 | </div> |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 131 | <div class="lighthouse-form-elements" $="categories-form-elements"></div> |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 132 | </div> |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 133 | <div class="lighthouse-form-section"> |
| 134 | <div class="lighthouse-form-section-label"> |
| 135 | <div class="lighthouse-icon-label">${ls`Community Plugins (beta)`}</div> |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 136 | </div> |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 137 | <div class="lighthouse-form-elements" $="plugins-form-elements"></div> |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 138 | </div> |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 139 | </div> |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 140 | <div class="lighthouse-form-section"> |
| 141 | <div class="lighthouse-form-section-label"> |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 142 | ${ls`Device`} |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 143 | </div> |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 144 | <div class="lighthouse-form-elements" $="device-type-form-elements"></div> |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 145 | </div> |
| 146 | </form> |
| 147 | </div> |
| 148 | `; |
| 149 | |
| 150 | this._helpText = fragment.$('help-text'); |
Adam Raine | 3226e93 | 2020-10-08 14:42:21 | [diff] [blame] | 151 | this._warningText = fragment.$('warning-text'); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 152 | this._populateFormControls(fragment); |
| 153 | this.contentElement.appendChild(fragment.element()); |
| 154 | this.contentElement.style.overflow = 'auto'; |
| 155 | } |
| 156 | |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 157 | /** |
| 158 | * @override |
| 159 | */ |
| 160 | onResize() { |
| 161 | const useNarrowLayout = this.contentElement.offsetWidth < 560; |
Connor Clark | 2bc3be2 | 2020-02-14 22:34:19 | [diff] [blame] | 162 | const startViewEl = this.contentElement.querySelector('.lighthouse-start-view'); |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 163 | startViewEl.classList.toggle('hbox', !useNarrowLayout); |
| 164 | startViewEl.classList.toggle('vbox', useNarrowLayout); |
| 165 | } |
| 166 | |
Patrick Hulce | 8d387f1 | 2018-05-29 18:54:54 | [diff] [blame] | 167 | focusStartButton() { |
| 168 | this._startButton.focus(); |
| 169 | } |
| 170 | |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 171 | /** |
| 172 | * @param {boolean} isEnabled |
| 173 | */ |
| 174 | setStartButtonEnabled(isEnabled) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 175 | if (this._helpText) { |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 176 | this._helpText.classList.toggle('hidden', isEnabled); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 177 | } |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 178 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 179 | if (this._startButton) { |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 180 | this._startButton.disabled = !isEnabled; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 181 | } |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 182 | } |
| 183 | |
| 184 | /** |
| 185 | * @param {?string} text |
| 186 | */ |
| 187 | setUnauditableExplanation(text) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 188 | if (this._helpText) { |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 189 | this._helpText.textContent = text; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 190 | } |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 191 | } |
Adam Raine | 3226e93 | 2020-10-08 14:42:21 | [diff] [blame] | 192 | |
| 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 Lewis | cf2ef22 | 2019-11-22 14:55:35 | [diff] [blame] | 203 | } |