@yuebai008/cli/dist/cli-server/client/front_end/panels/lighthouse/LighthouseStartView.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../core/i18n/i18n.js";import*as UI from"../../ui/legacy/legacy.js";import{Presets,RuntimeSettings}from"./LighthouseController.js";import{RadioSetting}from"./RadioSetting.js";import lighthouseStartViewStyles from"./lighthouseStartView.css.js";const UIStrings={generateLighthouseReport:"Generate a Lighthouse report",mode:"Mode",categories:"Categories",plugins:"Plugins",analyzeNavigation:"Analyze page load",analyzeSnapshot:"Analyze page state",startTimespan:"Start timespan",learnMore:"Learn more",device:"Device"},str_=i18n.i18n.registerUIStrings("panels/lighthouse/LighthouseStartView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class StartView extends UI.Widget.Widget{controller;panel;settingsToolbarInternal;startButton;helpText;warningText;checkboxes=[];changeFormMode;constructor(t,e){super(),this.controller=t,this.panel=e,this.settingsToolbarInternal=new UI.Toolbar.Toolbar(""),this.render()}populateRuntimeSettingAsRadio(t,e,i){const s=RuntimeSettings.find((e=>e.setting.name===t));if(!s||!s.options)throw new Error(`${t} is not a setting with options`);const n=document.createElement("div");if(n.classList.add("lighthouse-form-section-label"),n.textContent=e,s.learnMore){const t=UI.XLink.XLink.create(s.learnMore,i18nString(UIStrings.learnMore),"lighthouse-learn-more");n.append(t)}i.appendChild(n);const o=new RadioSetting(s.options,s.setting,s.description());i.appendChild(o.element),UI.ARIAUtils.setLabel(o.element,e)}populateRuntimeSettingAsToolbarCheckbox(t,e){const i=RuntimeSettings.find((e=>e.setting.name===t));if(!i||!i.title)throw new Error(`${t} is not a setting with a title`);i.setting.setTitle(i.title());const s=new UI.Toolbar.ToolbarSettingCheckbox(i.setting,i.description());if(e.appendToolbarItem(s),i.learnMore){const t=UI.XLink.XLink.create(i.learnMore,i18nString(UIStrings.learnMore),"lighthouse-learn-more");t.style.margin="5px",s.element.appendChild(t)}}populateRuntimeSettingAsToolbarDropdown(t,e){const i=RuntimeSettings.find((e=>e.setting.name===t));if(!i||!i.title)throw new Error(`${t} is not a setting with a title`);const s=i.options?.map((t=>({label:t.label(),value:t.value})))||[];i.setting.setTitle(i.title());const n=new UI.Toolbar.ToolbarSettingComboBox(s,i.setting,i.title());if(n.setTitle(i.description()),e.appendToolbarItem(n),i.learnMore){const t=UI.XLink.XLink.create(i.learnMore,i18nString(UIStrings.learnMore),"lighthouse-learn-more");t.style.margin="5px",n.element.appendChild(t)}}populateFormControls(t,e){const i=t.$("device-type-form-elements");this.populateRuntimeSettingAsRadio("lighthouse.device_type",i18nString(UIStrings.device),i);const s=t.$("categories-form-elements"),n=t.$("plugins-form-elements");this.checkboxes=[];for(const t of Presets){const i=t.plugin?n:s;t.setting.setTitle(t.title());const o=new UI.Toolbar.ToolbarSettingCheckbox(t.setting,t.description());i.createChild("div","vbox lighthouse-launcher-row").appendChild(o.element),o.element.setAttribute("data-lh-category",t.configID),this.checkboxes.push({preset:t,checkbox:o}),e&&!t.supportedModes.includes(e)&&(o.setEnabled(!1),o.setIndeterminate(!0))}UI.ARIAUtils.markAsGroup(s),UI.ARIAUtils.setLabel(s,i18nString(UIStrings.categories)),UI.ARIAUtils.markAsGroup(n),UI.ARIAUtils.setLabel(n,i18nString(UIStrings.plugins))}render(){this.populateRuntimeSettingAsToolbarCheckbox("lighthouse.clear_storage",this.settingsToolbarInternal),this.populateRuntimeSettingAsToolbarDropdown("lighthouse.throttling",this.settingsToolbarInternal);const{mode:t}=this.controller.getFlags();this.populateStartButton(t);const e=UI.Fragment.Fragment.build`
<form class="lighthouse-start-view">
  <header class="hbox">
    <div class="lighthouse-logo"></div>
    <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
    <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
  </header>
  <div $="help-text" class="lighthouse-help-text hidden"></div>
  <div class="lighthouse-options hbox">
    <div class="lighthouse-form-section">
      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
    </div>
    <div class="lighthouse-form-section">
      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
    </div>
    <div class="lighthouse-form-categories">
      <div class="lighthouse-form-section">
        <div class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</div>
        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
      </div>
      <div class="lighthouse-form-section">
        <div class="lighthouse-form-section-label">
          <div class="lighthouse-icon-label">${i18nString(UIStrings.plugins)}</div>
        </div>
        <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
      </div>
    </div>
  </div>
  <div $="warning-text" class="lighthouse-warning-text hidden"></div>
</form>
    `;this.helpText=e.$("help-text"),this.warningText=e.$("warning-text");const i=e.$("mode-form-elements");this.populateRuntimeSettingAsRadio("lighthouse.mode",i18nString(UIStrings.mode),i),this.populateFormControls(e,t),this.contentElement.textContent="",this.contentElement.append(e.element()),this.refresh()}populateStartButton(t){let e,i;"timespan"===t?(e=i18nString(UIStrings.startTimespan),i=()=>{this.panel.handleTimespanStart()}):"snapshot"===t?(e=i18nString(UIStrings.analyzeSnapshot),i=()=>{this.panel.handleCompleteRun()}):(e=i18nString(UIStrings.analyzeNavigation),i=()=>{this.panel.handleCompleteRun()});const s=this.contentElement.querySelector(".lighthouse-start-button-container");s&&(s.textContent="",this.startButton=UI.UIUtils.createTextButton(e,i,"",!0),s.append(this.startButton))}refresh(){const{mode:t}=this.controller.getFlags();this.populateStartButton(t);for(const{checkbox:e,preset:i}of this.checkboxes)i.supportedModes.includes(t)?(e.setEnabled(!0),e.setIndeterminate(!1)):(e.setEnabled(!1),e.setIndeterminate(!0));this.onResize()}onResize(){const t=this.contentElement.offsetWidth<500,e=this.contentElement.offsetWidth>800,i=this.contentElement.querySelector(".lighthouse-start-view header"),s=this.contentElement.querySelector(".lighthouse-options");i&&(i.classList.toggle("hbox",!t),i.classList.toggle("vbox",t)),s&&(s.classList.toggle("wide",e),s.classList.toggle("narrow",t))}focusStartButton(){this.startButton.focus()}setStartButtonEnabled(t){this.helpText&&this.helpText.classList.toggle("hidden",t),this.startButton&&(this.startButton.disabled=!t)}setUnauditableExplanation(t){this.helpText&&(this.helpText.textContent=t)}setWarningText(t){this.warningText&&(this.warningText.textContent=t,this.warningText.classList.toggle("hidden",!t))}wasShown(){super.wasShown(),this.controller.recomputePageAuditability(),this.registerCSSFiles([lighthouseStartViewStyles])}settingsToolbar(){return this.settingsToolbarInternal}}