@yuebai008/cli/dist/cli-server/client/front_end/panels/application/BackgroundServiceView.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as SDK from"../../core/sdk/sdk.js";import*as Bindings from"../../models/bindings/bindings.js";import*as DataGrid from"../../ui/legacy/components/data_grid/data_grid.js";import emptyWidgetStyles from"../../ui/legacy/emptyWidget.css.js";import*as UI from"../../ui/legacy/legacy.js";import backgroundServiceViewStyles from"./backgroundServiceView.css.js";import{Events}from"./BackgroundServiceModel.js";const UIStrings={backgroundFetch:"Background fetch",backgroundSync:"Background sync",pushMessaging:"Push messaging",notifications:"Notifications",paymentHandler:"Payment handler",periodicBackgroundSync:"Periodic background sync",clear:"Clear",saveEvents:"Save events",showEventsFromOtherDomains:"Show events from other domains",showEventsForOtherStorageKeys:"Show events from other storage partitions",stopRecordingEvents:"Stop recording events",startRecordingEvents:"Start recording events",timestamp:"Timestamp",event:"Event",origin:"Origin",storageKey:"Storage Key",swScope:"Service Worker Scope",instanceId:"Instance ID",backgroundServices:"Background services",learnMore:"Learn more",selectAnEntryToViewMetadata:"Select an entry to view metadata",recordingSActivity:"Recording {PH1} activity...",devtoolsWillRecordAllSActivity:"DevTools will record all {PH1} activity for up to 3 days, even when closed.",clickTheRecordButtonSOrHitSTo:"Click the record button {PH1} or hit {PH2} to start recording.",empty:"empty",noMetadataForThisEvent:"No metadata for this event"},str_=i18n.i18n.registerUIStrings("panels/application/BackgroundServiceView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class BackgroundServiceView extends UI.Widget.VBox{serviceName;model;serviceWorkerManager;securityOriginManager;storageKeyManager;recordAction;recordButton;originCheckbox;storageKeyCheckbox;saveButton;toolbar;splitWidget;dataGrid;previewPanel;selectedEventNode;preview;static getUIString(e){switch(e){case"backgroundFetch":return i18nString(UIStrings.backgroundFetch);case"backgroundSync":return i18nString(UIStrings.backgroundSync);case"pushMessaging":return i18nString(UIStrings.pushMessaging);case"notifications":return i18nString(UIStrings.notifications);case"paymentHandler":return i18nString(UIStrings.paymentHandler);case"periodicBackgroundSync":return i18nString(UIStrings.periodicBackgroundSync);default:return""}}constructor(e,t){if(super(!0),this.serviceName=e,this.model=t,this.model.addEventListener(Events.RecordingStateChanged,this.onRecordingStateChanged,this),this.model.addEventListener(Events.BackgroundServiceEventReceived,this.onEventReceived,this),this.model.enable(this.serviceName),this.serviceWorkerManager=this.model.target().model(SDK.ServiceWorkerManager.ServiceWorkerManager),this.securityOriginManager=this.model.target().model(SDK.SecurityOriginManager.SecurityOriginManager),!this.securityOriginManager)throw new Error("SecurityOriginManager instance is missing");if(this.securityOriginManager.addEventListener(SDK.SecurityOriginManager.Events.MainSecurityOriginChanged,(()=>this.onOriginChanged())),this.storageKeyManager=this.model.target().model(SDK.StorageKeyManager.StorageKeyManager),!this.storageKeyManager)throw new Error("StorageKeyManager instance is missing");this.storageKeyManager.addEventListener(SDK.StorageKeyManager.Events.MainStorageKeyChanged,(()=>this.onStorageKeyChanged())),this.recordAction=UI.ActionRegistry.ActionRegistry.instance().action("background-service.toggle-recording"),this.toolbar=new UI.Toolbar.Toolbar("background-service-toolbar",this.contentElement),this.setupToolbar(),this.splitWidget=new UI.SplitWidget.SplitWidget(!1,!0),this.splitWidget.show(this.contentElement),this.dataGrid=this.createDataGrid(),this.previewPanel=new UI.Widget.VBox,this.selectedEventNode=null,this.preview=null,this.splitWidget.setMainWidget(this.dataGrid.asWidget()),this.splitWidget.setSidebarWidget(this.previewPanel),this.showPreview(null)}getDataGrid(){return this.dataGrid}async setupToolbar(){this.recordButton=UI.Toolbar.Toolbar.createActionButton(this.recordAction),this.toolbar.appendToolbarItem(this.recordButton);const e=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clear),"clear");e.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(()=>this.clearEvents())),this.toolbar.appendToolbarItem(e),this.toolbar.appendSeparator(),this.saveButton=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.saveEvents),"download"),this.saveButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(e=>{this.saveToFile()})),this.saveButton.setEnabled(!1),this.toolbar.appendToolbarItem(this.saveButton),this.toolbar.appendSeparator(),this.originCheckbox=new UI.Toolbar.ToolbarCheckbox(i18nString(UIStrings.showEventsFromOtherDomains),i18nString(UIStrings.showEventsFromOtherDomains),(()=>this.refreshView())),this.toolbar.appendToolbarItem(this.originCheckbox),this.storageKeyCheckbox=new UI.Toolbar.ToolbarCheckbox(i18nString(UIStrings.showEventsForOtherStorageKeys),i18nString(UIStrings.showEventsForOtherStorageKeys),(()=>this.refreshView())),this.toolbar.appendToolbarItem(this.storageKeyCheckbox)}refreshView(){this.clearView();const e=this.model.getEvents(this.serviceName).filter((e=>this.acceptEvent(e)));for(const t of e)this.addEvent(t)}clearView(){this.selectedEventNode=null,this.dataGrid.rootNode().removeChildren(),this.saveButton.setEnabled(!1),this.showPreview(null)}toggleRecording(){this.model.setRecording(!this.recordButton.toggled(),this.serviceName)}clearEvents(){this.model.clearEvents(this.serviceName),this.clearView()}onRecordingStateChanged({data:e}){e.serviceName===this.serviceName&&e.isRecording!==this.recordButton.toggled()&&(this.recordButton.setToggled(e.isRecording),this.updateRecordButtonTooltip(),this.showPreview(this.selectedEventNode))}updateRecordButtonTooltip(){const e=this.recordButton.toggled()?i18nString(UIStrings.stopRecordingEvents):i18nString(UIStrings.startRecordingEvents);this.recordButton.setTitle(e,"background-service.toggle-recording")}onEventReceived({data:e}){this.acceptEvent(e)&&this.addEvent(e)}onOriginChanged(){this.originCheckbox.checked()||this.refreshView()}onStorageKeyChanged(){this.storageKeyCheckbox.checked()||this.refreshView()}addEvent(e){const t=this.createEventData(e),i=new EventDataNode(t,e.eventMetadata);this.dataGrid.rootNode().appendChild(i),1===this.dataGrid.rootNode().children.length&&(this.saveButton.setEnabled(!0),this.showPreview(this.selectedEventNode))}createDataGrid(){const e=[{id:"id",title:"#",weight:1},{id:"timestamp",title:i18nString(UIStrings.timestamp),weight:7},{id:"eventName",title:i18nString(UIStrings.event),weight:8},{id:"origin",title:i18nString(UIStrings.origin),weight:8},{id:"storageKey",title:i18nString(UIStrings.storageKey),weight:8},{id:"swScope",title:i18nString(UIStrings.swScope),weight:4},{id:"instanceId",title:i18nString(UIStrings.instanceId),weight:8}],t=new DataGrid.DataGrid.DataGridImpl({displayName:i18nString(UIStrings.backgroundServices),columns:e,editCallback:void 0,refreshCallback:void 0,deleteCallback:void 0});return t.setStriped(!0),t.addEventListener(DataGrid.DataGrid.Events.SelectedNode,(e=>this.showPreview(e.data))),t}createEventData(e){let t="";const i=this.serviceWorkerManager?this.serviceWorkerManager.registrations().get(e.serviceWorkerRegistrationId):void 0;return i&&(t=i.scopeURL.substr(i.securityOrigin.length)),{id:this.dataGrid.rootNode().children.length+1,timestamp:UI.UIUtils.formatTimestamp(1e3*e.timestamp,!0),origin:e.origin,storageKey:e.storageKey,swScope:t,eventName:e.eventName,instanceId:e.instanceId}}acceptEvent(e){if(e.service!==this.serviceName)return!1;if(this.originCheckbox.checked()||this.storageKeyCheckbox.checked())return!0;const t=e.origin.substr(0,e.origin.length-1),i=e.storageKey;return this.securityOriginManager.securityOrigins().includes(t)||this.storageKeyManager.storageKeys().includes(i)}createLearnMoreLink(){let e="https://developer.chrome.com/docs/devtools/javascript/background-services/?utm_source=devtools";switch(this.serviceName){case"backgroundFetch":e+="#fetch";break;case"backgroundSync":e+="#sync";break;case"pushMessaging":e+="#push";break;case"notifications":e+="#notifications"}return UI.XLink.XLink.create(e,i18nString(UIStrings.learnMore))}showPreview(e){if(this.selectedEventNode&&this.selectedEventNode===e)return;if(this.selectedEventNode=e,this.preview&&this.preview.detach(),this.selectedEventNode)return this.preview=this.selectedEventNode.createPreview(),void this.preview.show(this.previewPanel.contentElement);this.preview=new UI.Widget.VBox,this.preview.contentElement.classList.add("background-service-preview","fill");const t=this.preview.contentElement.createChild("div");if(this.dataGrid.rootNode().children.length)t.createChild("p").textContent=i18nString(UIStrings.selectAnEntryToViewMetadata);else if(this.recordButton.toggled()){const e=BackgroundServiceView.getUIString(this.serviceName).toLowerCase();t.createChild("p").textContent=i18nString(UIStrings.recordingSActivity,{PH1:e}),t.createChild("p").textContent=i18nString(UIStrings.devtoolsWillRecordAllSActivity,{PH1:e})}else{const e=UI.Toolbar.Toolbar.createActionButton(this.recordAction),i=document.createElement("b");i.classList.add("background-service-shortcut"),i.textContent=UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction("background-service.toggle-recording")[0].title();const r=UI.UIUtils.createInlineButton(e);r.classList.add("background-service-record-inline-button"),t.createChild("p").appendChild(i18n.i18n.getFormatLocalizedString(str_,UIStrings.clickTheRecordButtonSOrHitSTo,{PH1:r,PH2:i})),t.appendChild(this.createLearnMoreLink())}this.preview.show(this.previewPanel.contentElement)}async saveToFile(){const e=`${this.serviceName}-${Platform.DateUtilities.toISO8601Compact(new Date)}.json`,t=new Bindings.FileUtils.FileOutputStream;if(!await t.open(e))return;const i=this.model.getEvents(this.serviceName).filter((e=>this.acceptEvent(e)));await t.write(JSON.stringify(i,void 0,2)),t.close()}wasShown(){super.wasShown(),this.registerCSSFiles([emptyWidgetStyles,backgroundServiceViewStyles])}}export class EventDataNode extends DataGrid.DataGrid.DataGridNode{eventMetadata;constructor(e,t){super(e),this.eventMetadata=t.sort(((e,t)=>Platform.StringUtilities.compare(e.key,t.key)))}createPreview(){const e=new UI.Widget.VBox;e.element.classList.add("background-service-metadata");for(const t of this.eventMetadata){const i=document.createElement("div");i.classList.add("background-service-metadata-entry"),i.createChild("div","background-service-metadata-name").textContent=t.key+": ",t.value?i.createChild("div","background-service-metadata-value source-code").textContent=t.value:i.createChild("div","background-service-metadata-value background-service-empty-value").textContent=i18nString(UIStrings.empty),e.element.appendChild(i)}if(!e.element.children.length){const t=document.createElement("div");t.classList.add("background-service-metadata-entry"),t.createChild("div","background-service-metadata-name background-service-empty-value").textContent=i18nString(UIStrings.noMetadataForThisEvent),e.element.appendChild(t)}return e}}let actionDelegateInstance;export class ActionDelegate{static instance(e={forceNew:null}){const{forceNew:t}=e;return actionDelegateInstance&&!t||(actionDelegateInstance=new ActionDelegate),actionDelegateInstance}handleAction(e,t){const i=e.flavor(BackgroundServiceView);if("background-service.toggle-recording"===t){if(!i)throw new Error("BackgroundServiceView instance is missing");return i.toggleRecording(),!0}return!1}}