AuditsStartView.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. export default class StartView extends UI.Widget{constructor(controller){super();this.registerRequiredCSS('audits/auditsStartView.css');this._controller=controller;this._settingsToolbar=new UI.Toolbar('');this._render();}
  2. settingsToolbar(){return this._settingsToolbar;}
  3. _populateRuntimeSettingAsRadio(settingName,label,parentElement){const runtimeSetting=Audits.RuntimeSettings.find(item=>item.setting.name===settingName);if(!runtimeSetting||!runtimeSetting.options){throw new Error(`${settingName} is not a setting with options`);}
  4. const control=new Audits.RadioSetting(runtimeSetting.options,runtimeSetting.setting,runtimeSetting.description);parentElement.appendChild(control.element);UI.ARIAUtils.setAccessibleName(control.element,label);}
  5. _populateRuntimeSettingAsToolbarCheckbox(settingName,toolbar){const runtimeSetting=Audits.RuntimeSettings.find(item=>item.setting.name===settingName);if(!runtimeSetting||!runtimeSetting.title){throw new Error(`${settingName} is not a setting with a title`);}
  6. runtimeSetting.setting.setTitle(runtimeSetting.title);const control=new UI.ToolbarSettingCheckbox(runtimeSetting.setting,runtimeSetting.description);toolbar.appendToolbarItem(control);if(runtimeSetting.learnMore){const link=UI.XLink.create(runtimeSetting.learnMore,ls`Learn more`,'audits-learn-more');link.style.padding='5px';control.element.appendChild(link);}}
  7. _populateFormControls(fragment){const deviceTypeFormElements=fragment.$('device-type-form-elements');this._populateRuntimeSettingAsRadio('audits.device_type',ls`Device`,deviceTypeFormElements);const categoryFormElements=fragment.$('categories-form-elements');const pluginFormElements=fragment.$('plugins-form-elements');for(const preset of Audits.Presets){const formElements=preset.plugin?pluginFormElements:categoryFormElements;preset.setting.setTitle(preset.title);const checkbox=new UI.ToolbarSettingCheckbox(preset.setting);const row=formElements.createChild('div','vbox audits-launcher-row');row.title=preset.description;row.appendChild(checkbox.element);}
  8. UI.ARIAUtils.markAsGroup(categoryFormElements);UI.ARIAUtils.setAccessibleName(categoryFormElements,ls`Categories`);UI.ARIAUtils.markAsGroup(pluginFormElements);UI.ARIAUtils.setAccessibleName(pluginFormElements,ls`Community Plugins (beta)`);}
  9. _render(){this._populateRuntimeSettingAsToolbarCheckbox('audits.clear_storage',this._settingsToolbar);this._populateRuntimeSettingAsToolbarCheckbox('audits.throttling',this._settingsToolbar);this._startButton=UI.createTextButton(ls`Generate report`,()=>this._controller.dispatchEventToListeners(Audits.Events.RequestAuditStart),'',true);this.setDefaultFocusedElement(this._startButton);const auditsDescription=ls`Identify and fix common problems that affect your site's performance, accessibility, and user experience.`;const fragment=UI.Fragment.build`
  10. <div class="vbox audits-start-view">
  11. <header>
  12. <div class="audits-logo"></div>
  13. <div class="audits-start-button-container hbox">
  14. ${this._startButton}
  15. </div>
  16. <div $="help-text" class="audits-help-text hidden"></div>
  17. <div class="audits-start-view-text">
  18. <span>${auditsDescription}</span>
  19. ${UI.XLink.create('https://developers.google.com/web/tools/lighthouse/', ls`Learn more`)}
  20. </div>
  21. </header>
  22. <form>
  23. <div class="audits-form-categories">
  24. <div class="audits-form-section">
  25. <div class="audits-form-section-label">
  26. ${ls`Categories`}
  27. </div>
  28. <div class="audits-form-elements" $="categories-form-elements"></div>
  29. </div>
  30. <div class="audits-form-section">
  31. <div class="audits-form-section-label">
  32. <div class="audits-icon-label">${ls`Community Plugins(beta)`}</div>
  33. </div>
  34. <div class="audits-form-elements" $="plugins-form-elements"></div>
  35. </div>
  36. </div>
  37. <div class="audits-form-section">
  38. <div class="audits-form-section-label">
  39. ${ls`Device`}
  40. </div>
  41. <div class="audits-form-elements" $="device-type-form-elements"></div>
  42. </div>
  43. </form>
  44. </div>
  45. `;this._helpText=fragment.$('help-text');this._populateFormControls(fragment);this.contentElement.appendChild(fragment.element());this.contentElement.style.overflow='auto';}
  46. onResize(){const useNarrowLayout=this.contentElement.offsetWidth<560;const startViewEl=this.contentElement.querySelector('.audits-start-view');startViewEl.classList.toggle('hbox',!useNarrowLayout);startViewEl.classList.toggle('vbox',useNarrowLayout);}
  47. focusStartButton(){this._startButton.focus();}
  48. setStartButtonEnabled(isEnabled){if(this._helpText){this._helpText.classList.toggle('hidden',isEnabled);}
  49. if(this._startButton){this._startButton.disabled=!isEnabled;}}
  50. setUnauditableExplanation(text){if(this._helpText){this._helpText.textContent=text;}}}
  51. self.Audits=self.Audits||{};Audits=Audits||{};Audits.StartView=StartView;