@yuebai008/cli/dist/cli-server/client/front_end/panels/network/RequestPayloadView.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 SDK from"../../core/sdk/sdk.js";import*as ObjectUI from"../../ui/legacy/components/object_ui/object_ui.js";import objectPropertiesSectionStyles from"../../ui/legacy/components/object_ui/objectPropertiesSection.css.js";import objectValueStyles from"../../ui/legacy/components/object_ui/objectValue.css.js";import*as UI from"../../ui/legacy/legacy.js";import requestPayloadTreeStyles from"./requestPayloadTree.css.js";import requestPayloadViewStyles from"./requestPayloadView.css.js";const UIStrings={copyValue:"Copy value",requestPayload:"Request Payload",unableToDecodeValue:"(unable to decode value)",queryStringParameters:"Query String Parameters",formData:"Form Data",showMore:"Show more",viewParsed:"View parsed",empty:"(empty)",viewSource:"View source",viewUrlEncoded:"View URL-encoded",viewDecoded:"View decoded",viewUrlEncodedL:"view URL-encoded",viewDecodedL:"view decoded",viewParsedL:"view parsed",viewSourceL:"view source"},str_=i18n.i18n.registerUIStrings("panels/network/RequestPayloadView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class RequestPayloadView extends UI.Widget.VBox{request;decodeRequestParameters;queryStringCategory;formDataCategory;requestPayloadCategory;constructor(e){super(),this.element.classList.add("request-payload-view"),this.request=e,this.decodeRequestParameters=!0;const t=e.requestContentType();t&&(this.decodeRequestParameters=Boolean(t.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i)));const n=new UI.TreeOutline.TreeOutlineInShadow;n.registerCSSFiles([objectValueStyles,objectPropertiesSectionStyles,requestPayloadTreeStyles]),n.element.classList.add("request-payload-tree"),n.makeDense(),this.element.appendChild(n.element),this.queryStringCategory=new Category(n,"queryString",""),this.formDataCategory=new Category(n,"formData",""),this.requestPayloadCategory=new Category(n,"requestPayload",i18nString(UIStrings.requestPayload))}wasShown(){this.registerCSSFiles([requestPayloadViewStyles]),this.request.addEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged,this.refreshFormData,this),this.refreshQueryString(),this.refreshFormData()}willHide(){this.request.removeEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged,this.refreshFormData,this)}addEntryContextMenuHandler(e,t){e.listItemElement.addEventListener("contextmenu",(e=>{e.consume(!0);const n=new UI.ContextMenu.ContextMenu(e),r=decodeURIComponent(t);n.clipboardSection().appendItem(i18nString(UIStrings.copyValue),(()=>{Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue),Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(r)})),n.show()}))}formatParameter(e,t,n){let r=!1;if(n&&(e=e.replace(/\+/g," ")).indexOf("%")>=0)try{e=decodeURIComponent(e)}catch(e){r=!0}const s=document.createElement("div");return t&&(s.className=t),""===e&&s.classList.add("empty-value"),r?s.createChild("span","payload-decode-error").textContent=i18nString(UIStrings.unableToDecodeValue):s.textContent=e,s}refreshQueryString(){const e=this.request.queryString(),t=this.request.queryParameters;this.queryStringCategory.hidden=!t,t&&this.refreshParams(i18nString(UIStrings.queryStringParameters),t,e,this.queryStringCategory)}async refreshFormData(){const e=await this.request.requestFormData();if(!e)return this.formDataCategory.hidden=!0,void(this.requestPayloadCategory.hidden=!0);const t=await this.request.formParameters();if(t)this.formDataCategory.hidden=!1,this.requestPayloadCategory.hidden=!0,this.refreshParams(i18nString(UIStrings.formData),t,e,this.formDataCategory);else{this.requestPayloadCategory.hidden=!1,this.formDataCategory.hidden=!0;try{const t=JSON.parse(e);this.refreshRequestJSONPayload(t,e)}catch(t){this.populateTreeElementWithSourceText(this.requestPayloadCategory,e)}}}populateTreeElementWithSourceText(e,t){const n=(t||"").trim(),r=n.length>3e3,s=document.createElement("span");s.classList.add("payload-value"),s.classList.add("source-code"),s.textContent=r?n.substr(0,3e3):n;const o=new UI.TreeOutline.TreeElement(s);if(e.removeChildren(),e.appendChild(o),!r)return;const i=document.createElement("button");function a(){i.remove(),s.textContent=n,o.listItemElement.removeEventListener("contextmenu",d)}function d(e){const t=new UI.ContextMenu.ContextMenu(e);t.newSection().appendItem(i18nString(UIStrings.showMore),a),t.show()}i.classList.add("request-payload-show-more-button"),i.textContent=i18nString(UIStrings.showMore),i.addEventListener("click",a),o.listItemElement.addEventListener("contextmenu",d),s.appendChild(i)}refreshParams(e,t,n,r){r.removeChildren(),r.listItemElement.removeChildren(),r.listItemElement.createChild("div","selection fill"),UI.UIUtils.createTextChild(r.listItemElement,e);const s=document.createElement("span");s.classList.add("payload-count");const o=t?t.length:0;s.textContent=` (${o})`,r.listItemElement.appendChild(s);viewSourceForItems.has(r)?this.appendParamsSource(e,t,n,r):this.appendParamsParsed(e,t,n,r)}appendParamsSource(e,t,n,r){this.populateTreeElementWithSourceText(r,n);const s=r.listItemElement,o=function(o){s.removeEventListener("contextmenu",i),viewSourceForItems.delete(r),this.refreshParams(e,t,n,r),o.consume()},i=e=>{if(!r.expanded)return;const t=new UI.ContextMenu.ContextMenu(e);t.newSection().appendItem(i18nString(UIStrings.viewParsed),o.bind(this,e)),t.show()},a=this.createViewSourceToggle(!0,o.bind(this));s.appendChild(a),s.addEventListener("contextmenu",i)}appendParamsParsed(e,t,n,r){for(const e of t||[]){const t=document.createDocumentFragment();if(""!==e.name){const n=this.formatParameter(e.name+": ","payload-name",this.decodeRequestParameters),r=this.formatParameter(e.value,"payload-value source-code",this.decodeRequestParameters);t.appendChild(n),t.createChild("span","payload-separator"),t.appendChild(r)}else t.appendChild(this.formatParameter(i18nString(UIStrings.empty),"empty-request-payload",this.decodeRequestParameters));const n=new UI.TreeOutline.TreeElement(t);this.addEntryContextMenuHandler(n,e.value),r.appendChild(n)}const s=r.listItemElement,o=function(o){s.removeEventListener("contextmenu",a),viewSourceForItems.add(r),this.refreshParams(e,t,n,r),o.consume()},i=function(e){s.removeEventListener("contextmenu",a),this.toggleURLDecoding(e)},a=e=>{if(!r.expanded)return;const t=new UI.ContextMenu.ContextMenu(e),n=t.newSection();n.appendItem(i18nString(UIStrings.viewSource),o.bind(this,e));const s=this.decodeRequestParameters?i18nString(UIStrings.viewUrlEncoded):i18nString(UIStrings.viewDecoded);n.appendItem(s,i.bind(this,e)),t.show()},d=this.createViewSourceToggle(!1,o.bind(this));s.appendChild(d);const c=this.decodeRequestParameters?i18nString(UIStrings.viewUrlEncodedL):i18nString(UIStrings.viewDecodedL),l=this.createToggleButton(c);l.addEventListener("click",i.bind(this),!1),s.appendChild(l),s.addEventListener("contextmenu",a)}refreshRequestJSONPayload(e,t){const n=this.requestPayloadCategory;n.removeChildren();const r=n.listItemElement;r.removeChildren(),r.createChild("div","selection fill"),UI.UIUtils.createTextChild(r,this.requestPayloadCategory.title.toString()),viewSourceForItems.has(n)?this.appendJSONPayloadSource(n,e,t):this.appendJSONPayloadParsed(n,e,t)}appendJSONPayloadSource(e,t,n){const r=e.listItemElement;this.populateTreeElementWithSourceText(e,n);const s=function(s){r.removeEventListener("contextmenu",i),viewSourceForItems.delete(e),this.refreshRequestJSONPayload(t,n),s.consume()},o=this.createViewSourceToggle(!0,s.bind(this));r.appendChild(o);const i=t=>{if(!e.expanded)return;const n=new UI.ContextMenu.ContextMenu(t);n.newSection().appendItem(i18nString(UIStrings.viewParsed),s.bind(this,t)),n.show()};r.addEventListener("contextmenu",i)}appendJSONPayloadParsed(e,t,n){const r=SDK.RemoteObject.RemoteObject.fromLocalObject(t),s=new ObjectUI.ObjectPropertiesSection.RootElement(r);s.title=r.description,s.expand(),s.editable=!1,e.childrenListElement.classList.add("source-code","object-properties-section"),e.appendChild(s);const o=e.listItemElement,i=function(r){o.removeEventListener("contextmenu",a),viewSourceForItems.add(e),this.refreshRequestJSONPayload(t,n),r.consume()},a=t=>{if(!e.expanded)return;const n=new UI.ContextMenu.ContextMenu(t);n.newSection().appendItem(i18nString(UIStrings.viewSource),i.bind(this,t)),n.show()},d=this.createViewSourceToggle(!1,i.bind(this));o.appendChild(d),o.addEventListener("contextmenu",a)}createViewSourceToggle(e,t){const n=i18nString(e?UIStrings.viewParsedL:UIStrings.viewSourceL),r=this.createToggleButton(n);return r.addEventListener("click",t,!1),r}toggleURLDecoding(e){this.decodeRequestParameters=!this.decodeRequestParameters,this.refreshQueryString(),this.refreshFormData(),e.consume()}createToggleButton(e){const t=document.createElement("span");return t.classList.add("payload-toggle"),t.tabIndex=0,t.setAttribute("role","button"),t.textContent=e,t}}const viewSourceForItems=new WeakSet;export class Category extends UI.TreeOutline.TreeElement{toggleOnClick;expandedSetting;expanded;constructor(e,t,n){super(n||"",!0),this.toggleOnClick=!0,this.hidden=!0,this.expandedSetting=Common.Settings.Settings.instance().createSetting("request-info-"+t+"-category-expanded",!0),this.expanded=this.expandedSetting.get(),e.appendChild(this)}createLeaf(){const e=new UI.TreeOutline.TreeElement;return this.appendChild(e),e}onexpand(){this.expandedSetting.set(!0)}oncollapse(){this.expandedSetting.set(!1)}}