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 | |
| 5 | /** |
| 6 | * @unrestricted |
| 7 | */ |
Paul Lewis | cf2ef22 | 2019-11-22 14:55:35 | [diff] [blame] | 8 | export default class StartView extends UI.Widget { |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 9 | /** |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 10 | * @param {!Audits.AuditController} controller |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 11 | */ |
| 12 | constructor(controller) { |
| 13 | super(); |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 14 | this.registerRequiredCSS('audits/auditsStartView.css'); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 15 | this._controller = controller; |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 16 | this._settingsToolbar = new UI.Toolbar(''); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 17 | this._render(); |
| 18 | } |
| 19 | |
| 20 | /** |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 21 | * @return {!UI.Toolbar} |
| 22 | */ |
| 23 | settingsToolbar() { |
| 24 | return this._settingsToolbar; |
| 25 | } |
| 26 | |
| 27 | /** |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 28 | * @param {string} settingName |
John Emau | 7347716 | 2019-07-17 00:30:51 | [diff] [blame] | 29 | * @param {string} label |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 30 | * @param {!Element} parentElement |
| 31 | */ |
John Emau | 7347716 | 2019-07-17 00:30:51 | [diff] [blame] | 32 | _populateRuntimeSettingAsRadio(settingName, label, parentElement) { |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 33 | const runtimeSetting = Audits.RuntimeSettings.find(item => item.setting.name === settingName); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 34 | if (!runtimeSetting || !runtimeSetting.options) { |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 35 | throw new Error(`${settingName} is not a setting with options`); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 36 | } |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 37 | |
John Emau | 84ddefb | 2019-07-16 19:25:56 | [diff] [blame] | 38 | const control = new Audits.RadioSetting(runtimeSetting.options, runtimeSetting.setting, runtimeSetting.description); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 39 | parentElement.appendChild(control.element); |
John Emau | 7347716 | 2019-07-17 00:30:51 | [diff] [blame] | 40 | UI.ARIAUtils.setAccessibleName(control.element, label); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 41 | } |
| 42 | |
| 43 | /** |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 44 | * @param {string} settingName |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 45 | * @param {!UI.Toolbar} toolbar |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 46 | */ |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 47 | _populateRuntimeSettingAsToolbarCheckbox(settingName, toolbar) { |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 48 | const runtimeSetting = Audits.RuntimeSettings.find(item => item.setting.name === settingName); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 49 | if (!runtimeSetting || !runtimeSetting.title) { |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 50 | throw new Error(`${settingName} is not a setting with a title`); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 51 | } |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 52 | |
| 53 | runtimeSetting.setting.setTitle(runtimeSetting.title); |
| 54 | const control = new UI.ToolbarSettingCheckbox(runtimeSetting.setting, runtimeSetting.description); |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 55 | 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 Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 61 | } |
| 62 | |
| 63 | /** |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 64 | * @param {!UI.Fragment} fragment |
| 65 | */ |
| 66 | _populateFormControls(fragment) { |
| 67 | // Populate the device type |
| 68 | const deviceTypeFormElements = fragment.$('device-type-form-elements'); |
John Emau | 7347716 | 2019-07-17 00:30:51 | [diff] [blame] | 69 | this._populateRuntimeSettingAsRadio('audits.device_type', ls`Device`, deviceTypeFormElements); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 70 | |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 71 | // Populate the categories |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 72 | const categoryFormElements = fragment.$('categories-form-elements'); |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 73 | const pluginFormElements = fragment.$('plugins-form-elements'); |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 74 | for (const preset of Audits.Presets) { |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 75 | const formElements = preset.plugin ? pluginFormElements : categoryFormElements; |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 76 | preset.setting.setTitle(preset.title); |
| 77 | const checkbox = new UI.ToolbarSettingCheckbox(preset.setting); |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 78 | const row = formElements.createChild('div', 'vbox audits-launcher-row'); |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 79 | row.title = preset.description; |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 80 | row.appendChild(checkbox.element); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 81 | } |
John Emau | 62fdcee | 2019-10-16 00:08:52 | [diff] [blame] | 82 | UI.ARIAUtils.markAsGroup(categoryFormElements); |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 83 | UI.ARIAUtils.setAccessibleName(categoryFormElements, ls`Categories`); |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 84 | UI.ARIAUtils.markAsGroup(pluginFormElements); |
| 85 | UI.ARIAUtils.setAccessibleName(pluginFormElements, ls`Community Plugins (beta)`); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 86 | } |
| 87 | |
| 88 | _render() { |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 89 | this._populateRuntimeSettingAsToolbarCheckbox('audits.clear_storage', this._settingsToolbar); |
| 90 | this._populateRuntimeSettingAsToolbarCheckbox('audits.throttling', this._settingsToolbar); |
| 91 | |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 92 | this._startButton = UI.createTextButton( |
Brandon Goddard | 04d5ba9 | 2019-12-19 16:31:55 | [diff] [blame] | 93 | ls`Generate report`, |
| 94 | () => this._controller.dispatchEventToListeners( |
| 95 | Audits.Events.RequestAuditStart, |
| 96 | /* keyboardInitiated */ UI.elementIsFocusedByKeyboard(this._startButton)), |
| 97 | /* className */ '', /* primary */ true); |
Patrick Hulce | 05c18ce | 2018-05-24 00:34:56 | [diff] [blame] | 98 | this.setDefaultFocusedElement(this._startButton); |
| 99 | |
Christy Chen | 1eea03c | 2019-06-26 19:31:24 | [diff] [blame] | 100 | const auditsDescription = ls |
| 101 | `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] | 102 | |
| 103 | const fragment = UI.Fragment.build` |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 104 | <div class="vbox audits-start-view"> |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 105 | <header> |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 106 | <div class="audits-logo"></div> |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 107 | <div class="audits-start-button-container hbox"> |
| 108 | ${this._startButton} |
| 109 | </div> |
| 110 | <div $="help-text" class="audits-help-text hidden"></div> |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 111 | <div class="audits-start-view-text"> |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 112 | <span>${auditsDescription}</span> |
John Emau | 97832ab | 2019-07-16 00:37:34 | [diff] [blame] | 113 | ${UI.XLink.create('https://developers.google.com/web/tools/lighthouse/', ls`Learn more`)} |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 114 | </div> |
| 115 | </header> |
| 116 | <form> |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 117 | <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 Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 123 | </div> |
Connor Clark | 3ee5ac7 | 2019-11-07 23:11:58 | [diff] [blame] | 124 | <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 Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 130 | </div> |
[email protected] | aa1532c | 2019-05-31 03:01:24 | [diff] [blame] | 131 | <div class="audits-form-section"> |
| 132 | <div class="audits-form-section-label"> |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 133 | ${ls`Device`} |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 134 | </div> |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 135 | <div class="audits-form-elements" $="device-type-form-elements"></div> |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 136 | </div> |
| 137 | </form> |
| 138 | </div> |
| 139 | `; |
| 140 | |
| 141 | this._helpText = fragment.$('help-text'); |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 142 | this._populateFormControls(fragment); |
| 143 | this.contentElement.appendChild(fragment.element()); |
| 144 | this.contentElement.style.overflow = 'auto'; |
| 145 | } |
| 146 | |
Connor Clark | e66080e | 2019-11-07 00:35:51 | [diff] [blame] | 147 | /** |
| 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 Hulce | 8d387f1 | 2018-05-29 18:54:54 | [diff] [blame] | 157 | focusStartButton() { |
| 158 | this._startButton.focus(); |
| 159 | } |
| 160 | |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 161 | /** |
| 162 | * @param {boolean} isEnabled |
| 163 | */ |
| 164 | setStartButtonEnabled(isEnabled) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 165 | if (this._helpText) { |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 166 | this._helpText.classList.toggle('hidden', isEnabled); |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 167 | } |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 168 | |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 169 | if (this._startButton) { |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 170 | this._startButton.disabled = !isEnabled; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 171 | } |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 172 | } |
| 173 | |
| 174 | /** |
| 175 | * @param {?string} text |
| 176 | */ |
| 177 | setUnauditableExplanation(text) { |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 178 | if (this._helpText) { |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 179 | this._helpText.textContent = text; |
Tim van der Lippe | 1d6e57a | 2019-09-30 11:55:34 | [diff] [blame] | 180 | } |
Patrick Hulce | a087f62 | 2018-05-18 00:37:53 | [diff] [blame] | 181 | } |
Paul Lewis | cf2ef22 | 2019-11-22 14:55:35 | [diff] [blame] | 182 | } |
| 183 | |
| 184 | /* Legacy exported object */ |
| 185 | self.Audits = self.Audits || {}; |
| 186 | |
| 187 | /* Legacy exported object */ |
| 188 | Audits = Audits || {}; |
| 189 | |
| 190 | /** |
| 191 | * @constructor |
| 192 | */ |
| 193 | Audits.StartView = StartView; |