@yuebai008/cli/dist/cli-server/client/front_end/panels/network/components/HeaderSectionRow.js

Command line interface for rapid qg-minigame development

import*as SDK from"../../../core/sdk/sdk.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as i18n from"../../../core/i18n/i18n.js";import*as Host from"../../../core/host/host.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as ClientVariations from"../../../third_party/chromium/client-variations/client-variations.js";import*as Platform from"../../../core/platform/platform.js";import*as Buttons from"../../../ui/components/buttons/buttons.js";import{EditableSpan}from"./EditableSpan.js";import headerSectionRowStyles from"./HeaderSectionRow.css.js";const{render:render,html:html}=LitHtml,UIStrings={activeClientExperimentVariation:"Active `client experiment variation IDs`.",activeClientExperimentVariationIds:"Active `client experiment variation IDs` that trigger server-side behavior.",decoded:"Decoded:",editHeader:"Override header",headerNamesOnlyLetters:"Header names should contain only letters, digits, hyphens or underscores",learnMore:"Learn more",learnMoreInTheIssuesTab:"Learn more in the issues tab",reloadPrompt:"Refresh the page/request for these changes to take effect",removeOverride:"Remove this header override"},str_=i18n.i18n.registerUIStrings("panels/network/components/HeaderSectionRow.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),trashIconUrl=new URL("../../../Images/bin.svg",import.meta.url).toString(),editIconUrl=new URL("../../../Images/edit.svg",import.meta.url).toString();export const isValidHeaderName=e=>/^[a-z0-9_\-]+$/i.test(e);export const compareHeaders=(e,t)=>e?.replaceAll(/\s/g," ")===t?.replaceAll(/\s/g," ");export class HeaderEditedEvent extends Event{static eventName="headeredited";headerName;headerValue;constructor(e,t){super(HeaderEditedEvent.eventName,{}),this.headerName=e,this.headerValue=t}}export class HeaderRemovedEvent extends Event{static eventName="headerremoved";headerName;headerValue;constructor(e,t){super(HeaderRemovedEvent.eventName,{}),this.headerName=e,this.headerValue=t}}export class EnableHeaderEditingEvent extends Event{static eventName="enableheaderediting";constructor(){super(EnableHeaderEditingEvent.eventName,{})}}export class HeaderSectionRow extends HTMLElement{static litTagName=LitHtml.literal`devtools-header-section-row`;#e=this.attachShadow({mode:"open"});#t=null;#i=this.#a.bind(this);#n=!1;#r=!0;connectedCallback(){this.#e.adoptedStyleSheets=[headerSectionRowStyles]}set data(e){this.#t=e.header,this.#n=void 0!==this.#t.originalValue&&this.#t.value!==this.#t.originalValue,this.#r=isValidHeaderName(this.#t.name),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#i)}#a(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("HeaderSectionRow render was not scheduled");if(!this.#t)return;const e=LitHtml.Directives.classMap({row:!0,"header-highlight":Boolean(this.#t.highlight),"header-overridden":Boolean(this.#t.isOverride)||this.#n,"header-editable":Boolean(this.#t.valueEditable),"header-deleted":Boolean(this.#t.isDeleted)}),t=LitHtml.Directives.classMap({"header-name":!0,"pseudo-header":this.#t.name.startsWith(":")}),i=LitHtml.Directives.classMap({"header-value":!0,"header-warning":Boolean(this.#t.headerValueIncorrect),"flex-columns":"x-client-data"===this.#t.name&&!this.#t.isResponseHeader}),a=this.#t.nameEditable&&this.#t.valueEditable,n=this.#t.nameEditable||this.#t.isDeleted||this.#n;render(html`
      <div class=${e}>
        <div class=${t}>
          ${this.#t.headerNotSet?html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString("not-set")}</div> `:LitHtml.nothing}
          ${a&&!this.#r?html`<${IconButton.Icon.Icon.litTagName} class="inline-icon disallowed-characters" title=${UIStrings.headerNamesOnlyLetters} .data=${{iconName:"cross-circle-filled",width:"16px",height:"16px",color:"var(--icon-error)"}}>
            </${IconButton.Icon.Icon.litTagName}>`:LitHtml.nothing}
          ${a&&!this.#t.isDeleted?html`<${EditableSpan.litTagName}
              @focusout=${this.#o}
              @keydown=${this.#s}
              @input=${this.#d}
              @paste=${this.#d}
              .data=${{value:this.#t.name}}
            ></${EditableSpan.litTagName}>`:this.#t.name}:
        </div>
        <div
          class=${i}
          @copy=${()=>Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
        >
          ${this.#l()}
        </div>
        ${n?html`<${IconButton.Icon.Icon.litTagName} class="row-flex-icon flex-right" title=${UIStrings.reloadPrompt} .data=${{iconName:"info",width:"16px",height:"16px",color:"var(--icon-default)"}}>
          </${IconButton.Icon.Icon.litTagName}>`:LitHtml.nothing}
      </div>
      ${this.#h(this.#t.blockedDetails)}
    `,this.#e,{host:this}),this.#t.highlight&&this.scrollIntoView({behavior:"auto"})}#l(){return this.#t?"x-client-data"!==this.#t.name||this.#t.isResponseHeader?this.#t.isDeleted||!this.#t.valueEditable?html`
      ${this.#t.value||""}
      ${this.#c(this.#t)}
      ${this.#t.isResponseHeader&&!this.#t.isDeleted?html`
        <${Buttons.Button.Button.litTagName}
          title=${i18nString(UIStrings.editHeader)}
          .size=${"TINY"}
          .iconUrl=${editIconUrl}
          .variant=${"round"}
          .iconWidth=${"16px"}
          .iconHeight=${"16px"}
          @click=${()=>{this.dispatchEvent(new EnableHeaderEditingEvent)}}
          class="enable-editing inline-button"
        ></${Buttons.Button.Button.litTagName}>
      `:LitHtml.nothing}
    `:html`
      <${EditableSpan.litTagName}
        @focusout=${this.#m}
        @input=${this.#u}
        @paste=${this.#u}
        @keydown=${this.#s}
        .data=${{value:this.#t.value||""}}
      ></${EditableSpan.litTagName}>
      ${this.#c(this.#t)}
      <${Buttons.Button.Button.litTagName}
        title=${i18nString(UIStrings.removeOverride)}
        .size=${"TINY"}
        .iconUrl=${trashIconUrl}
        .variant=${"round"}
        .iconWidth=${"13px"}
        .iconHeight=${"13px"}
        class="remove-header inline-button"
        @click=${this.#v}
      ></${Buttons.Button.Button.litTagName}>
    `:this.#p(this.#t):LitHtml.nothing}#p(e){const t=ClientVariations.parseClientVariations(e.value||""),i=ClientVariations.formatClientVariations(t,i18nString(UIStrings.activeClientExperimentVariation),i18nString(UIStrings.activeClientExperimentVariationIds));return html`
      <div>${e.value||""}</div>
      <div>${i18nString(UIStrings.decoded)}</div>
      <code>${i}</code>
    `}focus(){requestAnimationFrame((()=>{const e=this.#e.querySelector(".header-name devtools-editable-span");e?.focus()}))}#c(e){if("set-cookie"===e.name&&e.setCookieBlockedReasons){const t=e.setCookieBlockedReasons.map(SDK.NetworkRequest.setCookieBlockedReasonToUiString).join("\n");return html`
        <${IconButton.Icon.Icon.litTagName} class="row-flex-icon" title=${t} .data=${{iconName:"warning-filled",color:"var(--icon-warning)",width:"16px",height:"16px"}}>
        </${IconButton.Icon.Icon.litTagName}>
      `}return LitHtml.nothing}#h(e){return e?html`
      <div class="call-to-action">
        <div class="call-to-action-body">
          <div class="explanation">${e.explanation()}</div>
          ${e.examples.map((e=>html`
            <div class="example">
              <code>${e.codeSnippet}</code>
              ${e.comment?html`
                <span class="comment">${e.comment()}</span>
              `:""}
            </div>
          `))}
          ${this.#g(e)}
        </div>
      </div>
    `:LitHtml.nothing}#g(e){return e?.reveal?html`
        <div class="devtools-link" @click=${e.reveal}>
          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{iconName:"issue-exclamation-filled",color:"var(--icon-warning)",width:"16px",height:"16px"}}>
          </${IconButton.Icon.Icon.litTagName}
          >${i18nString(UIStrings.learnMoreInTheIssuesTab)}
        </div>
      `:e?.link?html`
        <x-link href=${e.link.url} class="link">
          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{iconName:"open-externally",color:"var(--icon-link)",width:"20px",height:"20px"}}>
          </${IconButton.Icon.Icon.litTagName}
          >${i18nString(UIStrings.learnMore)}
        </x-link>
      `:LitHtml.nothing}#m(e){const t=e.target;if(!this.#t)return;const i=t.value.trim();compareHeaders(i,this.#t.value?.trim())||(this.#t.value=i,this.dispatchEvent(new HeaderEditedEvent(this.#t.name,i)),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#i));const a=window.getSelection();a?.removeAllRanges()}#o(e){const t=e.target;if(!this.#t)return;const i=Platform.StringUtilities.toLowerCaseString(t.value.trim());""===i?t.value=this.#t.name:compareHeaders(i,this.#t.name.trim())||(this.#t.name=i,this.dispatchEvent(new HeaderEditedEvent(i,this.#t.value||"")),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#i));const a=window.getSelection();a?.removeAllRanges()}#v(){if(!this.#t)return;const e=this.#e.querySelector(".header-value devtools-editable-span");this.#t.originalValue&&(e.value=this.#t?.originalValue),this.dispatchEvent(new HeaderRemovedEvent(this.#t.name,this.#t.value||""))}#s(e){const t=e,i=e.target;"Escape"===t.key&&(e.consume(),i.matches(".header-name devtools-editable-span")?(i.value=this.#t?.name||"",this.#d(e)):i.matches(".header-value devtools-editable-span")&&(i.value=this.#t?.value||"",this.#u(e)),i.blur())}#d(e){const t=e.target,i=isValidHeaderName(t.value);this.#r!==i&&(this.#r=i,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#i))}#u(e){const t=e.target,i=void 0!==this.#t?.originalValue&&!compareHeaders(this.#t?.originalValue||"",t.value);this.#n!==i&&(this.#n=i,this.#t&&(this.#t.highlight=!1),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#i))}}ComponentHelpers.CustomElements.defineComponent("devtools-header-section-row",HeaderSectionRow);