@yuebai008/cli/dist/cli-server/client/front_end/panels/sources/components/HeadersView.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../../core/i18n/i18n.js";import*as Persistence from"../../../models/persistence/persistence.js";import*as Workspace from"../../../models/workspace/workspace.js";import*as Buttons from"../../../ui/components/buttons/buttons.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as UI from"../../../ui/legacy/legacy.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Host from"../../../core/host/host.js";import HeadersViewStyles from"./HeadersView.css.js";const UIStrings={addHeader:"Add a header",removeHeader:"Remove this header",removeBlock:"Remove this '`ApplyTo`'-section",errorWhenParsing:"Error when parsing ''{PH1}''.",parsingErrorExplainer:"This is most likely due to a syntax error in ''{PH1}''. Try opening this file in an external editor to fix the error or delete the file and re-create the override.",addOverrideRule:"Add override rule",learnMore:"Learn more"},str_=i18n.i18n.registerUIStrings("panels/sources/components/HeadersView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),plusIconUrl=new URL("../../../Images/plus.svg",import.meta.url).toString(),trashIconUrl=new URL("../../../Images/bin.svg",import.meta.url).toString();export class HeadersView extends UI.View.SimpleView{#e=new HeadersViewComponent;#t;constructor(e){super(i18n.i18n.lockedString("HeadersView")),this.#t=e,this.#t.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged,this.#r,this),this.#t.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,this.#n,this),this.element.appendChild(this.#e),this.#s()}async#s(){const e=await this.#t.requestContent();this.#i(e.content||"")}#i(e){let t=!1,r=[];e=e||"[]";try{if(r=JSON.parse(e),!r.every(Persistence.NetworkPersistenceManager.isHeaderOverride))throw"Type mismatch after parsing"}catch(e){console.error("Failed to parse",this.#t.url(),"for locally overriding headers."),t=!0}this.#e.data={headerOverrides:r,uiSourceCode:this.#t,parsingError:t}}#r(){this.#i(this.#t.workingCopy())}#n(){this.#i(this.#t.workingCopy())}getComponent(){return this.#e}dispose(){this.#t.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged,this.#r,this),this.#t.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,this.#n,this)}}export class HeadersViewComponent extends HTMLElement{static litTagName=LitHtml.literal`devtools-sources-headers-view`;#o=this.attachShadow({mode:"open"});#a=this.#d.bind(this);#h=[];#t=null;#l=!1;#c=null;#u="";constructor(){super(),this.#o.addEventListener("focusin",this.#m.bind(this)),this.#o.addEventListener("focusout",this.#p.bind(this)),this.#o.addEventListener("click",this.#g.bind(this)),this.#o.addEventListener("input",this.#v.bind(this)),this.#o.addEventListener("keydown",this.#C.bind(this)),this.#o.addEventListener("paste",this.#w.bind(this)),this.addEventListener("contextmenu",this.#S.bind(this))}connectedCallback(){this.#o.adoptedStyleSheets=[HeadersViewStyles]}set data(e){this.#h=e.headerOverrides,this.#t=e.uiSourceCode,this.#l=e.parsingError,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#a)}#C(e){const t=e.target;if(!t.matches(".editable"))return;const r=e;!t.matches(".header-name")||""!==t.innerText||"Enter"!==r.key&&"Tab"!==r.key?"Enter"===r.key?(e.preventDefault(),t.blur(),this.#x(t)):"Escape"===r.key&&(e.consume(),t.innerText=this.#u,t.blur(),this.#H(t)):(e.preventDefault(),t.blur())}#x(e){const t=Array.from(this.#o.querySelectorAll(".editable")),r=t.indexOf(e);-1!==r&&r+1<t.length&&t[r+1].focus()}#b(e){const t=window.getSelection(),r=document.createRange();r.selectNodeContents(e),t?.removeAllRanges(),t?.addRange(r)}#m(e){const t=e.target;t.matches(".editable")&&(this.#b(t),this.#u=t.innerText)}#p(e){const t=e.target;if(""===t.innerText){const e=t.closest(".row"),r=Number(e.dataset.blockIndex),n=Number(e.dataset.headerIndex);t.matches(".apply-to")?(t.innerText="*",this.#h[r].applyTo="*",this.#k()):t.matches(".header-name")&&this.#y(r,n)}const r=window.getSelection();r?.removeAllRanges(),this.#t?.commitWorkingCopy()}#S(e){if(!this.#t)return;const t=new UI.ContextMenu.ContextMenu(e);t.appendApplicableItems(this.#t),t.show()}#f(e){const t=new Set(e.map((e=>e.name)));let r=1;for(;t.has("header-name-"+r);)r++;return"header-name-"+r}#g(e){const t=e.target,r=t.closest(".row"),n=Number(r?.dataset.blockIndex||0),s=Number(r?.dataset.headerIndex||0);t.matches(".add-header")?(this.#h[n].headers.splice(s+1,0,{name:this.#f(this.#h[n].headers),value:"header value"}),this.#c={blockIndex:n,headerIndex:s+1},this.#k()):t.matches(".remove-header")?this.#y(n,s):t.matches(".add-block")?(this.#h.push({applyTo:"*",headers:[{name:"header-name-1",value:"header value"}]}),this.#c={blockIndex:this.#h.length-1},this.#k()):t.matches(".remove-block")&&(this.#h.splice(n,1),this.#k())}#y(e,t){this.#h[e].headers.splice(t,1),0===this.#h[e].headers.length&&this.#h[e].headers.push({name:this.#f(this.#h[e].headers),value:"header value"}),this.#k()}#v(e){this.#H(e.target)}#H(e){const t=e.closest(".row"),r=Number(t.dataset.blockIndex),n=Number(t.dataset.headerIndex);e.matches(".header-name")&&(this.#h[r].headers[n].name=e.innerText,this.#k()),e.matches(".header-value")&&(this.#h[r].headers[n].value=e.innerText,this.#k()),e.matches(".apply-to")&&(this.#h[r].applyTo=e.innerText,this.#k())}#k(){this.#t?.setWorkingCopy(JSON.stringify(this.#h,null,2)),Host.userMetrics.actionTaken(Host.UserMetrics.Action.HeaderOverrideHeadersFileEdited)}#w(e){const t=e;if(e.preventDefault(),t.clipboardData){const r=t.clipboardData.getData("text/plain"),n=this.#o.getSelection()?.getRangeAt(0);if(!n)return;n.deleteContents();const s=document.createTextNode(r);n.insertNode(s),n.selectNodeContents(s),n.collapse(!1);const i=window.getSelection();i?.removeAllRanges(),i?.addRange(n),this.#H(e.target)}}#d(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("HeadersView render was not scheduled");if(this.#l){const e=this.#t?.name()||".headers";LitHtml.render(LitHtml.html`
        <div class="center-wrapper">
          <div class="centered">
            <div class="error-header">${i18nString(UIStrings.errorWhenParsing,{PH1:e})}</div>
            <div class="error-body">${i18nString(UIStrings.parsingErrorExplainer,{PH1:e})}</div>
          </div>
        </div>
      `,this.#o,{host:this})}else if(LitHtml.render(LitHtml.html`
      ${this.#h.map(((e,t)=>LitHtml.html`
          ${this.#I(e.applyTo,t)}
          ${e.headers.map(((e,r)=>LitHtml.html`
              ${this.#$(e,t,r)}
            `))}
        `))}
      <${Buttons.Button.Button.litTagName} .variant=${"secondary"} class="add-block">
        ${i18nString(UIStrings.addOverrideRule)}
      </${Buttons.Button.Button.litTagName}>
      <div class="learn-more-row">
        <x-link href="https://goo.gle/devtools-override" class="link">${i18nString(UIStrings.learnMore)}</x-link>
      </div>
    `,this.#o,{host:this}),this.#c){let e=null;e=this.#c.headerIndex?this.#o.querySelector(`[data-block-index="${this.#c.blockIndex}"][data-header-index="${this.#c.headerIndex}"] .header-name`):this.#o.querySelector(`[data-block-index="${this.#c.blockIndex}"] .apply-to`),e&&e.focus(),this.#c=null}}#I(e,t){return LitHtml.html`
      <div class="row" data-block-index=${t}>
        <div>${i18n.i18n.lockedString("Apply to")}</div>
        <div class="separator">:</div>
        ${this.#E(e,"apply-to")}
        <${Buttons.Button.Button.litTagName}
        title=${i18nString(UIStrings.removeBlock)}
        .size=${"SMALL"}
        .iconUrl=${trashIconUrl}
        .iconWidth=${"14px"}
        .iconHeight=${"14px"}
        .variant=${"round"}
        class="remove-block inline-button"
      ></${Buttons.Button.Button.litTagName}>
      </div>
    `}#$(e,t,r){return LitHtml.html`
      <div class="row padded" data-block-index=${t} data-header-index=${r}>
        ${this.#E(e.name,"header-name red")}
        <div class="separator">:</div>
        ${this.#E(e.value,"header-value")}
        <${Buttons.Button.Button.litTagName}
          title=${i18nString(UIStrings.addHeader)}
          .size=${"SMALL"}
          .iconUrl=${plusIconUrl}
          .iconWidth=${"20px"}
          .iconHeight=${"20px"}
          .variant=${"round"}
          class="add-header inline-button"
        ></${Buttons.Button.Button.litTagName}>
        <${Buttons.Button.Button.litTagName}
          title=${i18nString(UIStrings.removeHeader)}
          .size=${"SMALL"}
          .iconUrl=${trashIconUrl}
          .iconWidth=${"14px"}
          .iconHeight=${"14px"}
          .variant=${"round"}
          class="remove-header inline-button"
        ></${Buttons.Button.Button.litTagName}>
      </div>
    `}#E(e,t){return LitHtml.html`<span contenteditable="true" class="editable ${t}" tabindex="0" .innerText=${LitHtml.Directives.live(e)}></span>`}}ComponentHelpers.CustomElements.defineComponent("devtools-sources-headers-view",HeadersViewComponent);