@yuebai008/cli/dist/cli-server/client/front_end/panels/application/components/PermissionsPolicySection.js

Command line interface for rapid qg-minigame development

import*as i18n from"../../../core/i18n/i18n.js";import*as SDK from"../../../core/sdk/sdk.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 Coordinator from"../../../ui/components/render_coordinator/render_coordinator.js";import*as ReportView from"../../../ui/components/report_view/report_view.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import permissionsPolicySectionStyles from"./permissionsPolicySection.css.js";import*as Common from"../../../core/common/common.js";const UIStrings={showDetails:"Show details",hideDetails:"Hide details",allowedFeatures:"Allowed Features",disabledFeatures:"Disabled Features",clickToShowHeader:'Click to reveal the request whose "`Permissions-Policy`" HTTP header disables this feature.',clickToShowIframe:"Click to reveal the top-most iframe which does not allow this feature in the elements panel.",disabledByIframe:'missing in iframe "`allow`" attribute',disabledByHeader:'disabled by "`Permissions-Policy`" header',disabledByFencedFrame:"disabled inside a `fencedframe`"},str_=i18n.i18n.registerUIStrings("panels/application/components/PermissionsPolicySection.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance();export function renderIconLink(e,i,t){return LitHtml.html`
    <button class="link" role="link" tabindex=0 @click=${t} title=${i}>
      <${IconButton.Icon.Icon.litTagName} .data=${{iconName:e,color:"var(--icon-link)",width:"16px",height:"16px"}}>
      </${IconButton.Icon.Icon.litTagName}>
    </button>
  `}export class PermissionsPolicySection extends HTMLElement{static litTagName=LitHtml.literal`devtools-resources-permissions-policy-section`;#e=this.attachShadow({mode:"open"});#i={policies:[],showDetails:!1};set data(e){this.#i=e,this.#t()}connectedCallback(){this.#e.adoptedStyleSheets=[permissionsPolicySectionStyles]}#o(){this.#i.showDetails=!this.#i.showDetails,this.#t()}#r(){const e=this.#i.policies.filter((e=>e.allowed)).map((e=>e.feature)).sort();return e.length?LitHtml.html`
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.allowedFeatures)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
        ${e.join(", ")}
      </${ReportView.ReportView.ReportValue.litTagName}>
    `:LitHtml.nothing}async#s(){const e=this.#i.policies.filter((e=>!e.allowed)).sort(((e,i)=>e.feature.localeCompare(i.feature)));if(!e.length)return LitHtml.nothing;if(!this.#i.showDetails)return LitHtml.html`
        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.disabledFeatures)}</${ReportView.ReportView.ReportKey.litTagName}>
        <${ReportView.ReportView.ReportValue.litTagName}>
          ${e.map((e=>e.feature)).join(", ")}
          <button class="link" @click=${()=>this.#o()}>
            ${i18nString(UIStrings.showDetails)}
          </button>
        </${ReportView.ReportView.ReportValue.litTagName}>
      `;const i=SDK.FrameManager.FrameManager.instance(),t=await Promise.all(e.map((async e=>{const t=e.locator?i.getFrame(e.locator.frameId):null,o=e.locator?.blockReason,r=await("IframeAttribute"===o&&t&&t.getOwnerDOMNodeOrDocument()),s=t&&t.resourceForURL(t.url),n="Header"===o&&s&&s.request,a=(()=>{switch(o){case"IframeAttribute":return i18nString(UIStrings.disabledByIframe);case"Header":return i18nString(UIStrings.disabledByHeader);case"InFencedFrameTree":return i18nString(UIStrings.disabledByFencedFrame);default:return""}})();return LitHtml.html`
        <div class="permissions-row">
          <div>
            <${IconButton.Icon.Icon.litTagName} class="allowed-icon"
              .data=${{color:"var(--icon-error)",iconName:"cross-circle",width:"20px",height:"20px"}}>
            </${IconButton.Icon.Icon.litTagName}>
          </div>
          <div class="feature-name text-ellipsis">
            ${e.feature}
          </div>
          <div class="block-reason">${a}</div>
          <div>
            ${r?renderIconLink("code-circle",i18nString(UIStrings.clickToShowIframe),(()=>Common.Revealer.reveal(r))):LitHtml.nothing}
            ${n?renderIconLink("arrow-up-down-circle",i18nString(UIStrings.clickToShowHeader),(async()=>{if(!n)return;const e=n.responseHeaderValue("permissions-policy")?"permissions-policy":"feature-policy",i=NetworkForward.UIRequestLocation.UIRequestLocation.responseHeaderMatch(n,{name:e,value:""});await Common.Revealer.reveal(i)})):LitHtml.nothing}
          </div>
        </div>
      `})));return LitHtml.html`
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.disabledFeatures)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName} class="policies-list">
        ${t}
        <div class="permissions-row">
          <button class="link" @click=${()=>this.#o()}>
            ${i18nString(UIStrings.hideDetails)}
          </button>
        </div>
      </${ReportView.ReportView.ReportValue.litTagName}>
    `}async#t(){await coordinator.write("PermissionsPolicySection render",(()=>{LitHtml.render(LitHtml.html`
          <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18n.i18n.lockedString("Permissions Policy")}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
          ${this.#r()}
          ${LitHtml.Directives.until(this.#s(),LitHtml.nothing)}
          <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>
        `,this.#e,{host:this})}))}}ComponentHelpers.CustomElements.defineComponent("devtools-resources-permissions-policy-section",PermissionsPolicySection);