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

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as UI from"../../ui/legacy/legacy.js";import{Events,LighthouseController}from"./LighthouseController.js";import lighthousePanelStyles from"./lighthousePanel.css.js";import{ProtocolService}from"./LighthouseProtocolService.js";import{LighthouseReportRenderer}from"./LighthouseReportRenderer.js";import{Item,ReportSelector}from"./LighthouseReportSelector.js";import{StartView}from"./LighthouseStartView.js";import{StatusView}from"./LighthouseStatusView.js";import{TimespanView}from"./LighthouseTimespanView.js";const UIStrings={dropLighthouseJsonHere:"Drop `Lighthouse` JSON here",performAnAudit:"Perform an audit…",clearAll:"Clear all",lighthouseSettings:"`Lighthouse` settings",printing:"Printing",thePrintPopupWindowIsOpenPlease:"The print popup window is open. Please close it to continue.",cancelling:"Cancelling"},str_=i18n.i18n.registerUIStrings("panels/lighthouse/LighthousePanel.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let lighthousePanelInstace;export class LighthousePanel extends UI.Panel.Panel{controller;startView;statusView;timespanView;warningText;unauditableExplanation;cachedRenderedReports;dropTarget;auditResultsElement;clearButton;newButton;reportSelector;settingsPane;rightToolbar;showSettingsPaneSetting;constructor(t){super("lighthouse"),this.controller=t,this.startView=new StartView(this.controller,this),this.timespanView=new TimespanView(this),this.statusView=new StatusView(this),this.warningText=null,this.unauditableExplanation=null,this.cachedRenderedReports=new Map,this.dropTarget=new UI.DropTarget.DropTarget(this.contentElement,[UI.DropTarget.Type.File],i18nString(UIStrings.dropLighthouseJsonHere),this.handleDrop.bind(this)),this.controller.addEventListener(Events.PageAuditabilityChanged,this.refreshStartAuditUI.bind(this)),this.controller.addEventListener(Events.PageWarningsChanged,this.refreshWarningsUI.bind(this)),this.controller.addEventListener(Events.AuditProgressChanged,this.refreshStatusUI.bind(this)),this.renderToolbar(),this.auditResultsElement=this.contentElement.createChild("div","lighthouse-results-container"),this.renderStartView(),this.controller.recomputePageAuditability()}static instance(t){if(!lighthousePanelInstace||t?.forceNew){const e=t?.protocolService??new ProtocolService,i=t?.controller??new LighthouseController(e);lighthousePanelInstace=new LighthousePanel(i)}return lighthousePanelInstace}static getEvents(){return Events}async handleTimespanStart(){try{this.timespanView.show(this.contentElement),await this.controller.startLighthouse(),this.timespanView.ready()}catch(t){this.handleError(t)}}async handleTimespanEnd(){try{this.timespanView.hide(),this.renderStatusView();const{lhr:t,artifacts:e}=await this.controller.collectLighthouseResults();this.buildReportUI(t,e)}catch(t){this.handleError(t)}}async handleCompleteRun(){try{await this.controller.startLighthouse(),this.renderStatusView();const{lhr:t,artifacts:e}=await this.controller.collectLighthouseResults();this.buildReportUI(t,e)}catch(t){this.handleError(t)}}async handleRunCancel(){this.statusView.updateStatus(i18nString(UIStrings.cancelling)),this.timespanView.hide(),await this.controller.cancelLighthouse(),this.renderStartView()}handleError(t){t instanceof Error&&this.statusView.renderBugReport(t)}refreshWarningsUI(t){this.controller.getCurrentRun()||(this.warningText=t.data.warning,this.startView.setWarningText(t.data.warning))}refreshStartAuditUI(t){this.controller.getCurrentRun()||(this.startView.refresh(),this.unauditableExplanation=t.data.helpText,this.startView.setUnauditableExplanation(t.data.helpText),this.startView.setStartButtonEnabled(!t.data.helpText))}refreshStatusUI(t){this.statusView.updateStatus(t.data.message)}refreshToolbarUI(){this.clearButton.setEnabled(this.reportSelector.hasItems())}clearAll(){this.reportSelector.clearAll(),this.renderStartView(),this.refreshToolbarUI()}renderToolbar(){const t=this.element.createChild("div","lighthouse-toolbar-container"),e=new UI.Toolbar.Toolbar("",t);this.newButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.performAnAudit),"plus"),e.appendToolbarItem(this.newButton),this.newButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.renderStartView.bind(this)),e.appendSeparator(),this.reportSelector=new ReportSelector((()=>this.renderStartView())),e.appendToolbarItem(this.reportSelector.comboBox()),this.clearButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAll),"clear"),e.appendToolbarItem(this.clearButton),this.clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.clearAll.bind(this)),this.settingsPane=new UI.Widget.HBox,this.settingsPane.show(this.contentElement),this.settingsPane.element.classList.add("lighthouse-settings-pane"),this.settingsPane.element.appendChild(this.startView.settingsToolbar().element),this.showSettingsPaneSetting=Common.Settings.Settings.instance().createSetting("lighthouseShowSettingsToolbar",!1,Common.Settings.SettingStorageType.Synced),this.rightToolbar=new UI.Toolbar.Toolbar("",t),this.rightToolbar.appendSeparator(),this.rightToolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingToggle(this.showSettingsPaneSetting,"gear",i18nString(UIStrings.lighthouseSettings),"gear-filled")),this.showSettingsPaneSetting.addChangeListener(this.updateSettingsPaneVisibility.bind(this)),this.updateSettingsPaneVisibility(),this.refreshToolbarUI()}updateSettingsPaneVisibility(){this.settingsPane.element.classList.toggle("hidden",!this.showSettingsPaneSetting.get())}toggleSettingsDisplay(t){this.rightToolbar.element.classList.toggle("hidden",!t),this.settingsPane.element.classList.toggle("hidden",!t),this.updateSettingsPaneVisibility()}renderStartView(){this.auditResultsElement.removeChildren(),this.statusView.hide(),this.reportSelector.selectNewReport(),this.contentElement.classList.toggle("in-progress",!1),this.startView.show(this.contentElement),this.toggleSettingsDisplay(!0),this.startView.setUnauditableExplanation(this.unauditableExplanation),this.startView.setStartButtonEnabled(!this.unauditableExplanation),this.unauditableExplanation||this.startView.focusStartButton(),this.startView.setWarningText(this.warningText),this.newButton.setEnabled(!1),this.refreshToolbarUI(),this.setDefaultFocusedChild(this.startView)}renderStatusView(){const t=this.controller.getCurrentRun()?.inspectedURL;this.contentElement.classList.toggle("in-progress",!0),this.statusView.setInspectedURL(t),this.statusView.show(this.contentElement)}beforePrint(){this.statusView.show(this.contentElement),this.statusView.toggleCancelButton(!1),this.statusView.renderText(i18nString(UIStrings.printing),i18nString(UIStrings.thePrintPopupWindowIsOpenPlease))}afterPrint(){this.statusView.hide(),this.statusView.toggleCancelButton(!0)}renderReport(t,e){this.toggleSettingsDisplay(!1),this.contentElement.classList.toggle("in-progress",!1),this.startView.hideWidget(),this.statusView.hide(),this.auditResultsElement.removeChildren(),this.newButton.setEnabled(!0),this.refreshToolbarUI();const i=this.cachedRenderedReports.get(t);if(i)return void this.auditResultsElement.appendChild(i);const s=LighthouseReportRenderer.renderLighthouseReport(t,e,{beforePrint:this.beforePrint.bind(this),afterPrint:this.afterPrint.bind(this)});this.cachedRenderedReports.set(t,s)}buildReportUI(t,e){if(null===t)return;const i=new Item(t,(()=>this.renderReport(t,e)),this.renderStartView.bind(this));this.reportSelector.prepend(i),this.refreshToolbarUI(),this.renderReport(t),this.newButton.element.focus()}handleDrop(t){const e=t.items;if(!e.length)return;if("file"===e[0].kind){const t=e[0].getAsFile();if(!t)return;const i=new FileReader;i.onload=()=>this.loadedFromFile(i.result),i.readAsText(t)}}loadedFromFile(t){const e=JSON.parse(t);e.lighthouseVersion&&this.buildReportUI(e)}elementsToRestoreScrollPositionsFor(){const t=super.elementsToRestoreScrollPositionsFor(),e=this.auditResultsElement.querySelector(".lh-container");return e&&t.push(e),t}wasShown(){super.wasShown(),this.registerCSSFiles([lighthousePanelStyles])}}