@yuebai008/cli/dist/cli-server/client/front_end/ui/components/request_link_icon/RequestLinkIcon.js

Command line interface for rapid qg-minigame development

import*as Root from"../../../core/root/root.js";import*as i18n from"../../../core/i18n/i18n.js";import*as Common from"../../../core/common/common.js";import*as NetworkForward from"../../../panels/network/forward/forward.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Coordinator from"../../../ui/components/render_coordinator/render_coordinator.js";import requestLinkIconStyles from"./requestLinkIcon.css.js";const UIStrings={clickToShowRequestInTheNetwork:"Click to open the network panel and show request for URL: {url}",requestUnavailableInTheNetwork:"Request unavailable in the network panel, try reloading the inspected page",shortenedURL:"Shortened URL"},str_=i18n.i18n.registerUIStrings("ui/components/request_link_icon/RequestLinkIcon.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export const extractShortPath=e=>(/[^/]+$/.exec(e)||/[^/]+\/$/.exec(e)||[""])[0];const coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance();export class RequestLinkIcon extends HTMLElement{static litTagName=LitHtml.literal`devtools-request-link-icon`;#e=this.attachShadow({mode:"open"});#t;#i;#r;#o;#s=!1;#n;#a;#l;#h;#d=Common.Revealer.reveal;#u=Promise.resolve(void 0);set data(e){this.#t=e.linkToPreflight,this.#i=e.request,e.affectedRequest&&(this.#l={...e.affectedRequest}),this.#r=e.highlightHeader,this.#a=e.networkTab,this.#o=e.requestResolver,this.#s=e.displayURL??!1,this.#n=e.urlToDisplay,this.#h=e.additionalOnClickAction,e.revealOverride&&(this.#d=e.revealOverride),!this.#i&&e.affectedRequest&&(this.#u=this.#c(e.affectedRequest.requestId)),this.#m()}connectedCallback(){this.#e.adoptedStyleSheets=[requestLinkIconStyles]}#c(e){if(!this.#o)throw new Error("A `RequestResolver` must be provided if an `affectedRequest` is provided.");return this.#o.waitFor(e).then((e=>{this.#i=e})).catch((()=>{this.#i=null}))}get data(){return{linkToPreflight:this.#t,request:this.#i,affectedRequest:this.#l,highlightHeader:this.#r,networkTab:this.#a,requestResolver:this.#o,displayURL:this.#s,urlToDisplay:this.#n,additionalOnClickAction:this.#h,revealOverride:this.#d!==Common.Revealer.reveal?this.#d:void 0}}#p(){return this.#i?"--icon-link":"--icon-no-request"}iconData(){return{iconName:"arrow-up-down-circle",color:`var(${this.#p()})`,width:"16px",height:"16px"}}handleClick(e){if(0!==e.button)return;const t=this.#t?this.#i?.preflightRequest():this.#i;if(t){if(this.#r){const e=NetworkForward.UIRequestLocation.UIRequestLocation.header(t,this.#r.section,this.#r.name);this.#d(e)}else{const e=Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)?NetworkForward.UIRequestLocation.UIRequestTabs.HeadersComponent:NetworkForward.UIRequestLocation.UIRequestTabs.Headers,i=NetworkForward.UIRequestLocation.UIRequestLocation.tab(t,this.#a??e);this.#d(i)}this.#h?.()}}#q(){return this.#i?i18nString(UIStrings.clickToShowRequestInTheNetwork,{url:this.#i.url()}):i18nString(UIStrings.requestUnavailableInTheNetwork)}#R(){return this.#i?this.#i.url():this.#l?.url}#g(){if(!this.#s)return LitHtml.nothing;const e=this.#R();if(!e)return LitHtml.nothing;if(this.#n)return LitHtml.html`<span title=${e}>${this.#n}</span>`;const t=(/[^/]+$/.exec(i=e)||/[^/]+\/$/.exec(i)||[""])[0];var i;return LitHtml.html`<span aria-label=${i18nString(UIStrings.shortenedURL)} title=${e}>${t}</span>`}#m(){return coordinator.write((()=>{LitHtml.render(LitHtml.html`
        ${LitHtml.Directives.until(this.#u.then((()=>this.#f())),this.#f())}
      `,this.#e,{host:this})}))}#f(){return LitHtml.html`
      <span class=${LitHtml.Directives.classMap({link:Boolean(this.#i)})}
            tabindex="0"
            @click=${this.handleClick}>
        <${IconButton.Icon.Icon.litTagName} .data=${this.iconData()}
          title=${this.#q()}></${IconButton.Icon.Icon.litTagName}>
        ${this.#g()}
      </span>`}}ComponentHelpers.CustomElements.defineComponent("devtools-request-link-icon",RequestLinkIcon);