@yuebai008/cli/dist/cli-server/client/front_end/panels/network/RequestHeadersView.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 Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import*as IssuesManager from"../../models/issues_manager/issues_manager.js";import*as Persistence from"../../models/persistence/persistence.js";import*as Workspace from"../../models/workspace/workspace.js";import*as NetworkForward from"../../panels/network/forward/forward.js";import*as ClientVariations from"../../third_party/chromium/client-variations/client-variations.js";import*as IconButton from"../../ui/components/icon_button/icon_button.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*as Sources from"../sources/sources.js";import requestHeadersTreeStyles from"./requestHeadersTree.css.js";import requestHeadersViewStyles from"./requestHeadersView.css.js";const UIStrings={general:"General",copyValue:"Copy value",learnMoreInTheIssuesTab:"Learn more in the issues tab",learnMore:"Learn more",requestUrl:"Request URL",showMore:"Show more",viewParsed:"View parsed",viewSource:"View source",requestHeaders:"Request Headers",responseHeaders:"Response Headers",statusCode:"Status Code",requestMethod:"Request Method",fromMemoryCache:"(from memory cache)",fromServiceWorker:"(from `service worker`)",fromSignedexchange:"(from signed-exchange)",fromPrefetchCache:"(from prefetch cache)",fromDiskCache:"(from disk cache)",fromWebBundle:"(from Web Bundle)",provisionalHeadersAreShownS:"Provisional headers are shown. Disable cache to see full headers.",onlyProvisionalHeadersAre:"Only provisional headers are available because this request was not sent over the network and instead was served from a local cache, which doesn’t store the original request headers. Disable cache to see full request headers.",provisionalHeadersAreShown:"Provisional headers are shown",activeClientExperimentVariation:"Active `client experiment variation IDs`.",activeClientExperimentVariationIds:"Active `client experiment variation IDs` that trigger server-side behavior.",decoded:"Decoded:",remoteAddress:"Remote Address",referrerPolicy:"Referrer Policy",toEmbedThisFrameInYourDocument:"To embed this frame in your document, the response needs to enable the cross-origin embedder policy by specifying the following response header:",toUseThisResourceFromADifferent:"To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:",chooseThisOptionIfTheResourceAnd:"Choose this option if the resource and the document are served from the same site.",onlyChooseThisOptionIfAn:"Only choose this option if an arbitrary website including this resource does not impose a security risk.",thisDocumentWasBlockedFrom:"The document was blocked from loading in a popup opened by a sandboxed iframe because this document specified a cross-origin opener policy.",toUseThisResourceFromADifferentSite:"To use this resource from a different site, the server may relax the cross-origin resource policy response header:",toUseThisResourceFromADifferentOrigin:"To use this resource from a different origin, the server may relax the cross-origin resource policy response header:"},str_=i18n.i18n.registerUIStrings("panels/network/RequestHeadersView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),i18nLazyString=i18n.i18n.getLazilyComputedLocalizedString.bind(void 0,str_);export class RequestHeadersView extends UI.Widget.VBox{request;showRequestHeadersText;showResponseHeadersText;highlightedElement;root;urlItem;requestMethodItem;statusCodeItem;remoteAddressItem;referrerPolicyItem;responseHeadersCategory;requestHeadersCategory;#e=Workspace.Workspace.WorkspaceImpl.instance();constructor(e){super(),this.element.classList.add("request-headers-view"),this.request=e,this.showRequestHeadersText=!1,this.showResponseHeadersText=!1,this.highlightedElement=null;const t=new UI.TreeOutline.TreeOutlineInShadow;t.registerCSSFiles([objectValueStyles,objectPropertiesSectionStyles,requestHeadersTreeStyles]),t.element.classList.add("request-headers-tree"),t.makeDense(),t.setUseLightSelectionColor(!0),this.element.appendChild(t.element);const s=new Category(t,"general",i18nString(UIStrings.general));s.hidden=!1,this.root=s,this.setDefaultFocusedElement(this.root.listItemElement),this.urlItem=s.createLeaf(),this.requestMethodItem=s.createLeaf(),headerNames.set(this.requestMethodItem,"Request-Method"),this.statusCodeItem=s.createLeaf(),headerNames.set(this.statusCodeItem,"Status-Code"),this.remoteAddressItem=s.createLeaf(),this.remoteAddressItem.hidden=!0,this.referrerPolicyItem=s.createLeaf(),this.referrerPolicyItem.hidden=!0,this.responseHeadersCategory=new Category(t,"responseHeaders",""),this.requestHeadersCategory=new Category(t,"requestHeaders","")}wasShown(){this.clearHighlight(),this.registerCSSFiles([requestHeadersViewStyles]),this.request.addEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged,this.refreshRemoteAddress,this),this.request.addEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged,this.refreshRequestHeaders,this),this.request.addEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged,this.refreshResponseHeaders,this),this.request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading,this.refreshHTTPInformation,this),this.#e.addEventListener(Workspace.Workspace.Events.UISourceCodeAdded,this.#t,this),this.#e.addEventListener(Workspace.Workspace.Events.UISourceCodeRemoved,this.#t,this),this.refreshURL(),this.refreshRequestHeaders(),this.refreshResponseHeaders(),this.refreshHTTPInformation(),this.refreshRemoteAddress(),this.refreshReferrerPolicy(),this.root.select(!0,!1)}willHide(){this.request.removeEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged,this.refreshRemoteAddress,this),this.request.removeEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged,this.refreshRequestHeaders,this),this.request.removeEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged,this.refreshResponseHeaders,this),this.request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading,this.refreshHTTPInformation,this),this.#e.removeEventListener(Workspace.Workspace.Events.UISourceCodeAdded,this.#t,this),this.#e.removeEventListener(Workspace.Workspace.Events.UISourceCodeRemoved,this.#t,this)}addEntryContextMenuHandler(e,t){e.listItemElement.addEventListener("contextmenu",(e=>{e.consume(!0);const s=new UI.ContextMenu.ContextMenu(e),r=decodeURIComponent(t);s.clipboardSection().appendItem(i18nString(UIStrings.copyValue),(()=>{Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue),Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(r)})),s.show()}))}formatHeader(e,t){const s=document.createDocumentFragment();return s.createChild("div","header-name").textContent=e+": ",s.createChild("span","header-separator"),s.createChild("div","header-value source-code").textContent=t,s}formatHeaderObject(e){const t=document.createDocumentFragment();e.headerNotSet&&(t.createChild("div","header-badge header-badge-text").textContent="not-set");const s=e.value?": ":"";if(t.createChild("div","header-name").textContent=e.name+s,t.createChild("span","header-separator"),e.value&&(e.headerValueIncorrect?t.createChild("div","header-value source-code header-warning").textContent=e.value.toString():t.createChild("div","header-value source-code").textContent=e.value.toString()),e.details){const s=t.createChild("div","header-details").createChild("div","call-to-action").createChild("div","call-to-action-body");s.createChild("div","explanation").textContent=e.details.explanation();for(const t of e.details.examples){const e=s.createChild("div","example");e.createChild("code").textContent=t.codeSnippet,t.comment&&(e.createChild("span","comment").textContent=t.comment())}if(IssuesManager.RelatedIssue.hasIssueOfCategory(this.request,IssuesManager.Issue.IssueCategory.CrossOriginEmbedderPolicy)){const e=document.createElement("div");e.classList.add("devtools-link"),e.onclick=()=>{Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.LearnMoreLinkCOEP),IssuesManager.RelatedIssue.reveal(this.request,IssuesManager.Issue.IssueCategory.CrossOriginEmbedderPolicy)};const t=document.createElement("span");t.classList.add("devtools-link"),t.textContent=i18nString(UIStrings.learnMoreInTheIssuesTab),e.appendChild(t);const r=new IconButton.Icon.Icon;r.data={iconName:"issue-exclamation-filled",color:"var(--icon-warning)",width:"20px",height:"20px"},e.prepend(r),s.appendChild(e)}else if(e.details.link){const t=UI.XLink.XLink.create(e.details.link.url,i18nString(UIStrings.learnMore),"link"),r=new IconButton.Icon.Icon;r.data={iconName:"open-externally",color:"var(--icon-default)",width:"20px",height:"20px"},t.prepend(r),s.appendChild(t)}}return t}refreshURL(){const e=this.request.url();this.urlItem.title=this.formatHeader(i18nString(UIStrings.requestUrl),e),this.addEntryContextMenuHandler(this.urlItem,e)}populateTreeElementWithSourceText(e,t){const s=(t||"").trim(),r=s.length>3e3,o=document.createElement("span");o.classList.add("header-value"),o.classList.add("source-code"),o.textContent=r?s.substr(0,3e3):s;const i=new UI.TreeOutline.TreeElement(o);if(e.removeChildren(),e.appendChild(i),!r)return;const n=document.createElement("button");function a(){n.remove(),o.textContent=s,i.listItemElement.removeEventListener("contextmenu",d)}function d(e){const t=new UI.ContextMenu.ContextMenu(e);t.newSection().appendItem(i18nString(UIStrings.showMore),a),t.show()}n.classList.add("request-headers-show-more-button"),n.textContent=i18nString(UIStrings.showMore),n.addEventListener("click",a),i.listItemElement.addEventListener("contextmenu",d),o.appendChild(n)}refreshRequestHeaders(){const e=this.requestHeadersCategory,t=this.request.requestHeaders().slice();t.sort((function(e,t){return Platform.StringUtilities.compare(e.name.toLowerCase(),t.name.toLowerCase())}));const s=this.request.requestHeadersText();if(this.showRequestHeadersText&&s?this.refreshHeadersText(i18nString(UIStrings.requestHeaders),t.length,s,e):this.refreshHeaders(i18nString(UIStrings.requestHeaders),t,e,!1,void 0===s),s){const t=this.createHeadersToggleButton(this.showRequestHeadersText);t.addEventListener("click",this.toggleRequestHeadersText.bind(this),!1),e.listItemElement.querySelector(".headers-title-left")?.appendChild(t)}}refreshResponseHeaders(){const e=this.responseHeadersCategory,t=this.request.sortedResponseHeaders.slice(),s=this.request.responseHeadersText;if(this.showResponseHeadersText)this.refreshHeadersText(i18nString(UIStrings.responseHeaders),t.length,s,e);else{const s=[];if(this.request.wasBlocked()){const e=BlockedReasonDetails.get(this.request.blockedReason());e&&s.push(e)}const r=Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES);this.refreshHeaders(i18nString(UIStrings.responseHeaders),function(e,t){let s=0,r=0;const o=[];for(;s<e.length||r<t.length;)s<e.length&&(r>=t.length||e[s].name<t[r].name)?o.push({...e[s++],headerNotSet:!1}):r<t.length&&(s>=e.length||e[s].name>t[r].name)?o.push({...t[r++],headerNotSet:!0}):s<e.length&&r<t.length&&e[s].name===t[r].name&&o.push({...t[r++],...e[s++],headerNotSet:!1});return o}(t,s),e,r,!1,this.request.blockedResponseCookies())}if(s){const t=this.createHeadersToggleButton(this.showResponseHeadersText);t.addEventListener("click",this.toggleResponseHeadersText.bind(this),!1),e.listItemElement.querySelector(".headers-title-left")?.appendChild(t)}}refreshHTTPInformation(){const e=this.requestMethodItem;e.hidden=!this.request.statusCode;const t=this.statusCodeItem;if(t.hidden=!this.request.statusCode,this.request.statusCode){const s=document.createDocumentFragment();s.createChild("div","header-name").textContent=i18nString(UIStrings.statusCode)+": ",s.createChild("span","header-separator");const r=s.createChild("span","resource-status-image","dt-icon-label");UI.Tooltip.Tooltip.install(r,this.request.statusCode+" "+this.request.statusText),this.request.statusCode<300||304===this.request.statusCode?r.data={iconName:"checkmark",color:"var(--icon-checkmark-green)",width:"14px",height:"14px"}:this.request.statusCode<400?r.data={iconName:"warning-filled",color:"var(--icon-warning)",width:"14px",height:"14px"}:r.data={iconName:"cross-circle-filled",color:"var(--icon-error)",width:"14px",height:"14px"},e.title=this.formatHeader(i18nString(UIStrings.requestMethod),this.request.requestMethod);const o=s.createChild("div","header-value source-code");let i=this.request.statusCode+" "+this.request.statusText;this.request.cachedInMemory()?(i+=" "+i18nString(UIStrings.fromMemoryCache),o.classList.add("status-from-cache")):this.request.fetchedViaServiceWorker?(i+=" "+i18nString(UIStrings.fromServiceWorker),o.classList.add("status-from-cache")):this.request.redirectSourceSignedExchangeInfoHasNoErrors()?(i+=" "+i18nString(UIStrings.fromSignedexchange),o.classList.add("status-from-cache")):this.request.webBundleInnerRequestInfo()?(i+=" "+i18nString(UIStrings.fromWebBundle),o.classList.add("status-from-cache")):this.request.fromPrefetchCache()?(i+=" "+i18nString(UIStrings.fromPrefetchCache),o.classList.add("status-from-cache")):this.request.cached()&&(i+=" "+i18nString(UIStrings.fromDiskCache),o.classList.add("status-from-cache")),o.textContent=i,t.title=s}}refreshHeadersTitle(e,t,s,r){t.listItemElement.removeChildren(),t.listItemElement.createChild("div","selection fill");const o=t.listItemElement.createChild("div","headers-title"),i=o.createChild("div","headers-title-left");UI.UIUtils.createTextChild(i,e);const n=` (${s})`;if(i.createChild("span","header-count").textContent=n,r&&this.#e.uiSourceCodeForURL(this.#s())){const e=Common.Settings.Settings.instance().moduleSetting("persistenceNetworkOverridesEnabled"),t=new IconButton.Icon.Icon;t.data={iconName:"document",color:"var(--icon-default)",width:"16px",height:"16px"},e.get()&&t.classList.add("dot","purple");const s=o.createChild("button","link devtools-link headers-link");s.appendChild(t),s.addEventListener("click",this.#r.bind(this));const r=document.createElement("span");r.textContent=Persistence.NetworkPersistenceManager.HEADERS_FILENAME,s.appendChild(r)}}#s(){const e=Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().fileUrlFromNetworkUrl(this.request.url(),!0);return e.substring(0,e.lastIndexOf("/"))+"/"+Persistence.NetworkPersistenceManager.HEADERS_FILENAME}#r(e){e.stopPropagation();const t=this.#e.uiSourceCodeForURL(this.#s());t&&Sources.SourcesPanel.SourcesPanel.instance().showUISourceCode(t)}#t(e){this.#s()===e.data.url()&&this.refreshResponseHeaders()}refreshHeaders(e,t,s,r,o,i){s.removeChildren();const n=t.length;if(this.refreshHeadersTitle(e,s,n,r),o){let e,t="";this.request.cachedInMemory()||this.request.cached()?(e=i18nString(UIStrings.provisionalHeadersAreShownS),t=i18nString(UIStrings.onlyProvisionalHeadersAre)):e=i18nString(UIStrings.provisionalHeadersAreShown);const r=document.createElement("div");r.classList.add("request-headers-caution"),UI.Tooltip.Tooltip.install(r,t),r.createChild("span","","dt-icon-label").data={iconName:"warning-filled",color:"var(--icon-warning)",width:"14px",height:"14px"},r.createChild("div","caution").textContent=e;const o=new UI.TreeOutline.TreeElement(r);r.createChild("div","learn-more").appendChild(UI.XLink.XLink.create("https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers",i18nString(UIStrings.learnMore))),s.appendChild(o)}const a=new Map;i&&i.forEach((e=>{a.set(e.cookieLine,e.blockedReasons)})),s.hidden=!n&&!o;for(const e of t){const t=new UI.TreeOutline.TreeElement(this.formatHeaderObject(e));headerNames.set(t,e.name);const r=e.name.toLowerCase();if("set-cookie"===r){const s=a.get(e.value);if(s){const e=new IconButton.Icon.Icon;e.data={iconName:"warning-filled",color:"var(--icon-warning)",width:"14px",height:"14px"},t.listItemElement.appendChild(e);let r="";for(const e of s)r&&(r+="\n"),r+=SDK.NetworkRequest.setCookieBlockedReasonToUiString(e);UI.Tooltip.Tooltip.install(e,r)}}if(this.addEntryContextMenuHandler(t,e.value),s.appendChild(t),"x-client-data"===r){const s=ClientVariations.parseClientVariations(e.value),r=ClientVariations.formatClientVariations(s,i18nString(UIStrings.activeClientExperimentVariation),i18nString(UIStrings.activeClientExperimentVariationIds)),o=document.createElement("div");o.classList.add("x-client-data-details"),UI.UIUtils.createTextChild(o,i18nString(UIStrings.decoded));const i=o.createChild("div");i.classList.add("source-code"),i.textContent=r,t.listItemElement.appendChild(o)}}}refreshHeadersText(e,t,s,r){this.populateTreeElementWithSourceText(r,s),this.refreshHeadersTitle(e,r,t,!1)}refreshRemoteAddress(){const e=this.request.remoteAddress(),t=this.remoteAddressItem;t.hidden=!e,e&&(t.title=this.formatHeader(i18nString(UIStrings.remoteAddress),e))}refreshReferrerPolicy(){const e=this.request.referrerPolicy(),t=this.referrerPolicyItem;t.hidden=!e,e&&(t.title=this.formatHeader(i18nString(UIStrings.referrerPolicy),e))}toggleRequestHeadersText(e){this.showRequestHeadersText=!this.showRequestHeadersText,this.refreshRequestHeaders(),e.consume()}toggleResponseHeadersText(e){this.showResponseHeadersText=!this.showResponseHeadersText,this.refreshResponseHeaders(),e.consume()}createToggleButton(e){const t=document.createElement("span");return t.classList.add("header-toggle"),t.textContent=e,t}createHeadersToggleButton(e){const t=i18nString(e?UIStrings.viewParsed:UIStrings.viewSource);return this.createToggleButton(t)}clearHighlight(){this.highlightedElement&&this.highlightedElement.listItemElement.classList.remove("header-highlight"),this.highlightedElement=null}revealAndHighlight(e,t){if(this.clearHighlight(),e){if(t)for(const s of e.children())if(headerNames.get(s)?.toUpperCase()===t.toUpperCase())return this.highlightedElement=s,s.reveal(),void s.listItemElement.classList.add("header-highlight");e.childCount()>0&&e.childAt(0)?.reveal()}}getCategoryForSection(e){switch(e){case NetworkForward.UIRequestLocation.UIHeaderSection.General:return this.root;case NetworkForward.UIRequestLocation.UIHeaderSection.Request:return this.requestHeadersCategory;case NetworkForward.UIRequestLocation.UIHeaderSection.Response:return this.responseHeadersCategory}}revealHeader(e,t){this.revealAndHighlight(this.getCategoryForSection(e),t)}}const headerNames=new WeakMap;export class Category extends UI.TreeOutline.TreeElement{toggleOnClick;expandedSetting;expanded;constructor(e,t,s){super(s||"",!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)}}const BlockedReasonDetails=new Map([["coep-frame-resource-needs-coep-header",{name:"cross-origin-embedder-policy",value:null,headerValueIncorrect:null,details:{explanation:i18nLazyString(UIStrings.toEmbedThisFrameInYourDocument),examples:[{codeSnippet:"Cross-Origin-Embedder-Policy: require-corp",comment:void 0}],link:{url:"https://web.dev/coop-coep/"}},headerNotSet:null}],["corp-not-same-origin-after-defaulted-to-same-origin-by-coep",{name:"cross-origin-resource-policy",value:null,headerValueIncorrect:null,details:{explanation:i18nLazyString(UIStrings.toUseThisResourceFromADifferent),examples:[{codeSnippet:"Cross-Origin-Resource-Policy: same-site",comment:i18nLazyString(UIStrings.chooseThisOptionIfTheResourceAnd)},{codeSnippet:"Cross-Origin-Resource-Policy: cross-origin",comment:i18nLazyString(UIStrings.onlyChooseThisOptionIfAn)}],link:{url:"https://web.dev/coop-coep/"}},headerNotSet:null}],["coop-sandboxed-iframe-cannot-navigate-to-coop-page",{name:"cross-origin-opener-policy",value:null,headerValueIncorrect:!1,details:{explanation:i18nLazyString(UIStrings.thisDocumentWasBlockedFrom),examples:[],link:{url:"https://web.dev/coop-coep/"}},headerNotSet:null}],["corp-not-same-site",{name:"cross-origin-resource-policy",value:null,headerValueIncorrect:!0,details:{explanation:i18nLazyString(UIStrings.toUseThisResourceFromADifferentSite),examples:[{codeSnippet:"Cross-Origin-Resource-Policy: cross-origin",comment:i18nLazyString(UIStrings.onlyChooseThisOptionIfAn)}],link:null},headerNotSet:null}],["corp-not-same-origin",{name:"cross-origin-resource-policy",value:null,headerValueIncorrect:!0,details:{explanation:i18nLazyString(UIStrings.toUseThisResourceFromADifferentOrigin),examples:[{codeSnippet:"Cross-Origin-Resource-Policy: same-site",comment:i18nLazyString(UIStrings.chooseThisOptionIfTheResourceAnd)},{codeSnippet:"Cross-Origin-Resource-Policy: cross-origin",comment:i18nLazyString(UIStrings.onlyChooseThisOptionIfAn)}],link:null},headerNotSet:null}]]);