@yuebai008/cli/dist/cli-server/client/front_end/panels/protocol_monitor/ProtocolMonitor.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as Host from"../../core/host/host.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as ProtocolClient from"../../core/protocol_client/protocol_client.js";import*as SDK from"../../core/sdk/sdk.js";import*as Bindings from"../../models/bindings/bindings.js";import*as TextUtils from"../../models/text_utils/text_utils.js";import*as DataGrid from"../../ui/components/data_grid/data_grid.js";import*as IconButton from"../../ui/components/icon_button/icon_button.js";import*as SourceFrame from"../../ui/legacy/components/source_frame/source_frame.js";import*as UI from"../../ui/legacy/legacy.js";import*as LitHtml from"../../ui/lit-html/lit-html.js";import*as Components from"./components/components.js";import protocolMonitorStyles from"./protocolMonitor.css.js";const UIStrings={method:"Method",type:"Type",request:"Request",response:"Response",timestamp:"Timestamp",elapsedTime:"Elapsed time",target:"Target",record:"Record",clearAll:"Clear all",filter:"Filter",documentation:"Documentation",editAndResend:"Edit and resend",sMs:"{PH1} ms",noMessageSelected:"No message selected",save:"Save",session:"Session",sendRawCDPCommand:"Send a raw `CDP` command",sendRawCDPCommandExplanation:"Format: `'Domain.commandName'` for a command without parameters, or `'{\"command\":\"Domain.commandName\", \"parameters\": {...}}'` as a JSON object for a command with parameters. `'cmd'`/`'method'` and `'args'`/`'params'`/`'arguments'` are also supported as alternative keys for the `JSON` object.",selectTarget:"Select a target",showCDPCommandEditor:"Show CDP command editor",hideCDPCommandEditor:"Hide  CDP command editor",CDPCommandEditorShown:"CDP command editor shown",CDPCommandEditorHidden:"CDP command editor hidden"},str_=i18n.i18n.registerUIStrings("panels/protocol_monitor/ProtocolMonitor.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),timeRenderer=t=>LitHtml.html`${i18nString(UIStrings.sMs,{PH1:String(t)})}`;export const buildProtocolMetadata=t=>{const e=new Map;for(const o of t)for(const t of Object.keys(o.metadata))e.set(t,o.metadata[t]);return e};const metadataByCommand=buildProtocolMetadata(ProtocolClient.InspectorBackend.inspectorBackend.agentPrototypes.values()),typesByName=ProtocolClient.InspectorBackend.inspectorBackend.typeMap,enumsByName=ProtocolClient.InspectorBackend.inspectorBackend.enumMap;export class ProtocolMonitorDataGrid extends(Common.ObjectWrapper.eventMixin(UI.Widget.VBox)){started;startTime;requestTimeForId;dataGridRowForId;infoWidget;dataGridIntegrator;filterParser;suggestionBuilder;textFilterUI;messages=[];isRecording=!1;#t=new CommandAutocompleteSuggestionProvider;#e;#o;constructor(t){super(!0),this.started=!1,this.startTime=0,this.dataGridRowForId=new Map,this.requestTimeForId=new Map;const e=new UI.Toolbar.Toolbar("protocol-monitor-toolbar",this.contentElement);this.contentElement.classList.add("protocol-monitor");const o=new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.record),"record-start","record-stop");o.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(()=>{o.setToggled(!o.toggled()),this.setRecording(o.toggled())})),o.setToggleWithRedColor(!0),e.appendToolbarItem(o),o.setToggled(!0);const n=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAll),"clear");n.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(()=>{this.messages=[],this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),rows:[]}),this.infoWidget.render(null)})),e.appendToolbarItem(n);const r=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.save),"download");r.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(()=>{this.saveAsFile()})),e.appendToolbarItem(r),this.infoWidget=new InfoWidget;const i={paddingRowsCount:100,showScrollbar:!0,columns:[{id:"type",title:i18nString(UIStrings.type),sortable:!0,widthWeighting:1,visible:!0,hideable:!0,styles:{"text-align":"center"}},{id:"method",title:i18nString(UIStrings.method),sortable:!1,widthWeighting:5,visible:!0,hideable:!1},{id:"request",title:i18nString(UIStrings.request),sortable:!1,widthWeighting:5,visible:!0,hideable:!0},{id:"response",title:i18nString(UIStrings.response),sortable:!1,widthWeighting:5,visible:!0,hideable:!0},{id:"elapsedTime",title:i18nString(UIStrings.elapsedTime),sortable:!0,widthWeighting:2,visible:!0,hideable:!0},{id:"timestamp",title:i18nString(UIStrings.timestamp),sortable:!0,widthWeighting:5,visible:!1,hideable:!0},{id:"target",title:i18nString(UIStrings.target),sortable:!0,widthWeighting:5,visible:!1,hideable:!0},{id:"session",title:i18nString(UIStrings.session),sortable:!0,widthWeighting:5,visible:!1,hideable:!0}],rows:[],contextMenus:{bodyRow:(e,o,n)=>{const r=DataGrid.DataGridUtils.getRowEntryForColumnId(n,"method"),i=DataGrid.DataGridUtils.getRowEntryForColumnId(n,"type");e.editSection().appendItem(i18nString(UIStrings.editAndResend),(()=>{if(!r.value)return;const e=this.infoWidget.request,o=this.infoWidget.targetId,n=String(r.value);t.showMode()===UI.SplitWidget.ShowMode.OnlyMain&&t.toggleSidebar(),this.dispatchEventToListeners(Events.CommandChange,{command:n,parameters:e,targetId:o})})),e.editSection().appendItem(i18nString(UIStrings.filter),(()=>{const t=DataGrid.DataGridUtils.getRowEntryForColumnId(n,"method");this.textFilterUI.setValue(`method:${t.value}`,!0)})),e.footerSection().appendItem(i18nString(UIStrings.documentation),(()=>{if(!r.value)return;const[t,e]=String(r.value).split("."),o="sent"===i.value?"method":"event";Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(`https://chromedevtools.github.io/devtools-protocol/tot/${t}#${o}-${e}`)}))}}};this.dataGridIntegrator=new DataGrid.DataGridControllerIntegrator.DataGridControllerIntegrator(i),this.dataGridIntegrator.dataGrid.addEventListener("cellfocused",(t=>{const e=t.data.row,o={request:DataGrid.DataGridUtils.getRowEntryForColumnId(e,"request"),response:DataGrid.DataGridUtils.getRowEntryForColumnId(e,"response"),target:DataGrid.DataGridUtils.getRowEntryForColumnId(e,"target"),type:DataGrid.DataGridUtils.getRowEntryForColumnId(e,"type").title};this.infoWidget.render(o)})),this.dataGridIntegrator.dataGrid.addEventListener("newuserfiltertext",(t=>{this.textFilterUI.setValue(t.data.filterText,!0)}));const a=new UI.SplitWidget.SplitWidget(!0,!0,"protocol-monitor-panel-split",250);a.show(this.contentElement),a.setMainWidget(this.dataGridIntegrator),a.setSidebarWidget(this.infoWidget);const s=["method","request","response","type","target","session"];this.filterParser=new TextUtils.TextUtils.FilterParser(s),this.suggestionBuilder=new UI.FilterSuggestionBuilder.FilterSuggestionBuilder(s),this.textFilterUI=new UI.Toolbar.ToolbarInput(i18nString(UIStrings.filter),"",1,.2,"",this.suggestionBuilder.completions.bind(this.suggestionBuilder),!0),this.textFilterUI.addEventListener(UI.Toolbar.ToolbarInput.Event.TextChanged,(t=>{const e=t.data,o=this.filterParser.parse(e);this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),filters:o})}));const d=new UI.Toolbar.Toolbar("protocol-monitor-bottom-toolbar",this.contentElement);d.appendToolbarItem(t.createShowHideSidebarButton(i18nString(UIStrings.showCDPCommandEditor),i18nString(UIStrings.hideCDPCommandEditor),i18nString(UIStrings.CDPCommandEditorShown),i18nString(UIStrings.CDPCommandEditorHidden))),this.#o=this.#n(),d.appendToolbarItem(this.#o),d.appendToolbarItem(this.#r());const l=d.element?.shadowRoot,m=l?.querySelector(".toolbar-input"),c=l?.querySelector(".toolbar-select-container"),g=()=>{const e=t.sidebarWidget();if(!(e instanceof EditorWidget))return;const o=e.jsonEditor.getCommandJson();o&&this.#o.setValue(o)};t.addEventListener(UI.SplitWidget.Events.ShowModeChanged,(t=>{if("OnlyMain"===t.data)g(),m?.setAttribute("style","display:flex; flex-grow: 1"),c?.setAttribute("style","display:flex");else{const{command:t,parameters:e}=parseCommandInput(this.#o.value());this.dispatchEventToListeners(Events.CommandChange,{command:t,parameters:e,targetId:this.#e}),m?.setAttribute("style","display:none"),c?.setAttribute("style","display:none")}})),e.appendToolbarItem(this.textFilterUI)}#n(){const t=i18nString(UIStrings.sendRawCDPCommand),e=t,o=i18nString(UIStrings.sendRawCDPCommandExplanation),n=new UI.Toolbar.ToolbarInput(t,e,1,.2,o,this.#t.buildTextPromptCompletions,!1);return n.addEventListener(UI.Toolbar.ToolbarInput.Event.EnterPressed,(()=>{this.#t.addEntry(n.value());const{command:t,parameters:e}=parseCommandInput(n.value());this.onCommandSend(t,e,this.#e)})),n}#r(){const t=new UI.Toolbar.ToolbarComboBox((()=>{this.#e=t.selectedOption()?.value}),i18nString(UIStrings.selectTarget));t.setMaxWidth(120);const e=SDK.TargetManager.TargetManager.instance(),o=()=>{t.removeOptions();for(const o of e.targets())t.createOption(`${o.name()} (${o.inspectedURL()})`,o.id())};return e.addEventListener(SDK.TargetManager.Events.AvailableTargetsChanged,o),o(),t}onCommandSend(t,e,o){const n=ProtocolClient.InspectorBackend.test,r=SDK.TargetManager.TargetManager.instance(),i=o?r.targetById(o):null,a=i?i.sessionId:"";n.sendRawMessage(t,e,(()=>{}),a)}static instance(t={forceNew:null}){const{forceNew:e}=t;return protocolMonitorImplInstance&&!e||(protocolMonitorImplInstance=new ProtocolMonitorImpl),protocolMonitorImplInstance}wasShown(){this.started||(this.registerCSSFiles([protocolMonitorStyles]),this.started=!0,this.startTime=Date.now(),this.setRecording(!0))}setRecording(t){this.isRecording=t;const e=ProtocolClient.InspectorBackend.test;t?(e.onMessageSent=this.messageSent.bind(this),e.onMessageReceived=this.messageReceived.bind(this)):(e.onMessageSent=null,e.onMessageReceived=null)}targetToString(t){return t?t.decorateLabel(`${t.name()} ${t===SDK.TargetManager.TargetManager.instance().rootTarget()?"":t.id()}`):""}messageReceived(t,e){if(this.isRecording&&this.messages.push({...t,type:"recv",domain:"-"}),"id"in t&&t.id){const e=this.dataGridRowForId.get(t.id);if(!e)return;const o=this.dataGridIntegrator.data().rows.findIndex((t=>e===t)),n={...e,cells:e.cells.map((e=>{if("response"===e.columnId)return{...e,value:JSON.stringify(t.result||t.error)};if("elapsedTime"===e.columnId){const o=this.requestTimeForId.get(t.id);if(o)return{...e,value:Date.now()-o,renderer:timeRenderer}}return e}))},r=[...this.dataGridIntegrator.data().rows];return r[o]=n,this.dataGridRowForId.delete(t.id),void this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),rows:r})}const o=e,n=new IconButton.Icon.Icon;n.data={iconName:"arrow-down",color:"var(--icon-request)",width:"20px",height:"20px"};const r={cells:[{columnId:"method",value:t.method,title:t.method},{columnId:"request",value:"",renderer:DataGrid.DataGridRenderers.codeBlockRenderer},{columnId:"response",value:JSON.stringify(t.params),renderer:DataGrid.DataGridRenderers.codeBlockRenderer},{columnId:"timestamp",value:Date.now()-this.startTime,renderer:timeRenderer},{columnId:"elapsedTime",value:""},{columnId:"type",value:n,title:"received"},{columnId:"target",value:this.targetToString(o)},{columnId:"session",value:t.sessionId||""}],hidden:!1};this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),rows:this.dataGridIntegrator.data().rows.concat([r])})}messageSent(t,e){this.isRecording&&this.messages.push({...t,type:"send"});const o=e,n=new IconButton.Icon.Icon;n.data={iconName:"arrow-up-down",color:"var(--icon-request-response)",width:"20px",height:"20px"};const r={styles:{"--override-data-grid-row-background-color":"var(--override-data-grid-sent-message-row-background-color)"},cells:[{columnId:"method",value:t.method,title:t.method},{columnId:"request",value:JSON.stringify(t.params),renderer:DataGrid.DataGridRenderers.codeBlockRenderer},{columnId:"response",value:"(pending)",renderer:DataGrid.DataGridRenderers.codeBlockRenderer},{columnId:"timestamp",value:Date.now()-this.startTime,renderer:timeRenderer},{columnId:"elapsedTime",value:"(pending)"},{columnId:"type",value:n,title:"sent"},{columnId:"target",value:String(o?.id())},{columnId:"session",value:t.sessionId||""}],hidden:!1};this.requestTimeForId.set(t.id,Date.now()),this.dataGridRowForId.set(t.id,r),this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),rows:this.dataGridIntegrator.data().rows.concat([r])})}async saveAsFile(){const t=new Date,e="ProtocolMonitor-"+Platform.DateUtilities.toISO8601Compact(t)+".json",o=new Bindings.FileUtils.FileOutputStream;await o.open(e)&&(o.write(JSON.stringify(this.messages,null,"  ")),o.close())}}let protocolMonitorImplInstance;export class ProtocolMonitorImpl extends UI.Widget.VBox{#i;#a=new EditorWidget;#s;#d=400;constructor(){super(!0),this.#i=new UI.SplitWidget.SplitWidget(!0,!1,"protocol-monitor-split-container",this.#d),this.#i.show(this.contentElement),this.#s=new ProtocolMonitorDataGrid(this.#i),this.#s.addEventListener(Events.CommandChange,(t=>{this.#a.jsonEditor.displayCommand(t.data.command,t.data.parameters,t.data.targetId)})),this.#a.element.style.overflow="hidden",this.#i.setMainWidget(this.#s),this.#i.setSidebarWidget(this.#a),this.#i.hideSidebar(!0),this.#a.addEventListener(Events.CommandSent,(t=>{this.#s.onCommandSend(t.data.command,t.data.parameters,t.data.targetId)}))}static instance(t={forceNew:null}){const{forceNew:e}=t;return protocolMonitorImplInstance&&!e||(protocolMonitorImplInstance=new ProtocolMonitorImpl),protocolMonitorImplInstance}}export class CommandAutocompleteSuggestionProvider{#l=200;#m=new Set;constructor(t){void 0!==t&&(this.#l=t)}buildTextPromptCompletions=async(t,e,o)=>{if(!e&&!o&&t)return[];const n=[...this.#m].reverse();return n.push(...metadataByCommand.keys()),n.filter((t=>t.startsWith(e))).map((t=>({text:t})))};addEntry(t){if(this.#m.has(t)&&this.#m.delete(t),this.#m.add(t),this.#m.size>this.#l){const t=this.#m.values().next().value;this.#m.delete(t)}}}export class InfoWidget extends UI.Widget.VBox{tabbedPane;request;targetId="";constructor(){super(),this.tabbedPane=new UI.TabbedPane.TabbedPane,this.tabbedPane.appendTab("request",i18nString(UIStrings.request),new UI.Widget.Widget),this.tabbedPane.appendTab("response",i18nString(UIStrings.response),new UI.Widget.Widget),this.tabbedPane.show(this.contentElement),this.tabbedPane.selectTab("response"),this.request={},this.render(null)}render(t){if(!(t&&t.request&&t.response&&t.target))return this.tabbedPane.changeTabView("request",new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noMessageSelected))),void this.tabbedPane.changeTabView("response",new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noMessageSelected)));const e=t&&t.type&&"sent"===t.type;this.tabbedPane.setTabEnabled("request",Boolean(e)),e||this.tabbedPane.selectTab("response");const o=JSON.parse(String(t.request.value)||"null");this.request=o,this.targetId=String(t.target.value),this.tabbedPane.changeTabView("request",SourceFrame.JSONView.JSONView.createViewSync(o));const n="(pending)"===t.response.value?null:JSON.parse(String(t.response.value)||"null");this.tabbedPane.changeTabView("response",SourceFrame.JSONView.JSONView.createViewSync(n))}}export var Events;!function(t){t.CommandSent="CommandSent",t.CommandChange="CommandChange"}(Events||(Events={}));export class EditorWidget extends(Common.ObjectWrapper.eventMixin(UI.Widget.VBox)){jsonEditor;constructor(){super(),this.jsonEditor=new Components.JSONEditor.JSONEditor,this.jsonEditor.metadataByCommand=metadataByCommand,this.jsonEditor.typesByName=typesByName,this.jsonEditor.enumsByName=enumsByName,this.element.append(this.jsonEditor),this.jsonEditor.addEventListener(Components.JSONEditor.SubmitEditorEvent.eventName,(t=>{this.dispatchEventToListeners(Events.CommandSent,t.data)}))}}export function parseCommandInput(t){let e=null;try{e=JSON.parse(t)}catch(t){}return{command:e?e.command||e.method||e.cmd||"":t,parameters:e?.parameters||e?.params||e?.args||e?.arguments||{}}}