@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
24 lines • 4.13 kB
JavaScript
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 Buttons from"../../../ui/components/buttons/buttons.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as Input from"../../../ui/components/input/input.js";import inspectorCommonStyles from"../../../ui/legacy/inspectorCommon.css.js";import*as UI from"../../../ui/legacy/legacy.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import protocolHandlersViewStyles from"./protocolHandlersView.css.js";const PROTOCOL_DOCUMENT_URL="https://web.dev/url-protocol-handler/",UIStrings={protocolDetected:"Found valid protocol handler registration in the {PH1}. With the app installed, test the registered protocols.",protocolNotDetected:"Define protocol handlers in the {PH1} to register your app as a handler for custom protocols when your app is installed.",needHelpReadOur:"Need help? Read {PH1}.",protocolHandlerRegistrations:"URL protocol handler registration for PWAs",manifest:"manifest",testProtocol:"Test protocol",dropdownLabel:"Select protocol handler",textboxLabel:"Query parameter or endpoint for protocol handler",textboxPlaceholder:"Enter URL"},str_=i18n.i18n.registerUIStrings("panels/application/components/ProtocolHandlersView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ProtocolHandlersView extends HTMLElement{static litTagName=LitHtml.literal`devtools-protocol-handlers-view`;#t=this.attachShadow({mode:"open"});#o=[];#e=Platform.DevToolsPath.EmptyUrlString;#r="";#n="";set data(t){const o=this.#e!==t.manifestLink;this.#o=t.protocolHandlers,this.#e=t.manifestLink,o&&this.#s()}#s(){this.#n="",this.#r=this.#o[0]?.protocol??"",this.#i()}#l(){const t=UI.XLink.XLink.create(this.#e,i18nString(UIStrings.manifest)),o=this.#o.length>0?UIStrings.protocolDetected:UIStrings.protocolNotDetected,e=this.#o.length>0?{iconName:"check-circle",color:"var(--icon-checkmark-green)",width:"16px",height:"16px"}:{iconName:"info",color:"var(--icon-default)",width:"16px",height:"16px"};return LitHtml.html`
<div class="protocol-handlers-row status">
<${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${e}>
</${IconButton.Icon.Icon.litTagName}>
${i18n.i18n.getFormatLocalizedString(str_,o,{PH1:t})}
</div>
`}#a(){if(0===this.#o.length)return LitHtml.nothing;const t=this.#o.filter((t=>t.protocol)).map((t=>LitHtml.html`<option value=${t.protocol}>${t.protocol}://</option>`));return LitHtml.html`
<div class="protocol-handlers-row">
<select class="chrome-select protocol-select" @change=${this.#c} aria-label=${i18nString(UIStrings.dropdownLabel)}>
${t}
</select>
<input .value=${this.#n} class="devtools-text-input" type="text" @change=${this.#p} aria-label=${i18nString(UIStrings.textboxLabel)}
placeholder=${i18nString(UIStrings.textboxPlaceholder)}/>
<${Buttons.Button.Button.litTagName} .variant=${"primary"} @click=${this.#d}>
${i18nString(UIStrings.testProtocol)}
</${Buttons.Button.Button.litTagName}>
</div>
`}#c=t=>{this.#r=t.target.value};#p=t=>{this.#n=t.target.value,this.#i()};#d=()=>{const t=`${this.#r}://${this.#n}`;Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(t),Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureTestProtocolClicked)};connectedCallback(){this.#t.adoptedStyleSheets=[protocolHandlersViewStyles,inspectorCommonStyles,Input.textInputStyles]}#i(){const t=UI.XLink.XLink.create(PROTOCOL_DOCUMENT_URL,i18nString(UIStrings.protocolHandlerRegistrations));LitHtml.render(LitHtml.html`
${this.#l()}
<div class="protocol-handlers-row">
${i18n.i18n.getFormatLocalizedString(str_,UIStrings.needHelpReadOur,{PH1:t})}
</div>
${this.#a()}
`,this.#t,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-protocol-handlers-view",ProtocolHandlersView);