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

Command line interface for rapid qg-minigame development

import{StackTrace}from"./StackTrace.js";import{PermissionsPolicySection,renderIconLink}from"./PermissionsPolicySection.js";import*as Bindings from"../../../models/bindings/bindings.js";import*as Common from"../../../core/common/common.js";import*as i18n from"../../../core/i18n/i18n.js";import*as NetworkForward from"../../../panels/network/forward/forward.js";import*as Platform from"../../../core/platform/platform.js";import*as Root from"../../../core/root/root.js";import*as SDK from"../../../core/sdk/sdk.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as ExpandableList from"../../../ui/components/expandable_list/expandable_list.js";import*as ReportView from"../../../ui/components/report_view/report_view.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LegacyWrapper from"../../../ui/components/legacy_wrapper/legacy_wrapper.js";import*as Workspace from"../../../models/workspace/workspace.js";import*as Components from"../../../ui/legacy/components/utils/utils.js";import{OriginTrialTreeView}from"./OriginTrialTreeView.js";import*as Coordinator from"../../../ui/components/render_coordinator/render_coordinator.js";import frameDetailsReportViewStyles from"./frameDetailsReportView.css.js";import{Prerender2ReasonDescription}from"./Prerender2.js";const UIStrings={additionalInformation:"Additional Information",thisAdditionalDebugging:"This additional (debugging) information is shown because the 'Protocol Monitor' experiment is enabled.",frameId:"Frame ID",document:"Document",url:"URL",clickToRevealInSourcesPanel:"Click to reveal in Sources panel",clickToRevealInNetworkPanel:"Click to reveal in Network panel",unreachableUrl:"Unreachable URL",clickToRevealInNetworkPanelMight:"Click to reveal in Network panel (might require page reload)",origin:"Origin",ownerElement:"Owner Element",clickToRevealInElementsPanel:"Click to reveal in Elements panel",adStatus:"Ad Status",rootDescription:"This frame has been identified as the root frame of an ad",root:"root",childDescription:"This frame has been identified as a child frame of an ad",child:"child",securityIsolation:"Security & Isolation",secureContext:"Secure Context",yes:"Yes",no:"No",crossoriginIsolated:"Cross-Origin Isolated",localhostIsAlwaysASecureContext:"`Localhost` is always a secure context",aFrameAncestorIsAnInsecure:"A frame ancestor is an insecure context",theFramesSchemeIsInsecure:"The frame's scheme is insecure",reportingTo:"reporting to",apiAvailability:"API availability",availabilityOfCertainApisDepends:"Availability of certain APIs depends on the document being cross-origin isolated.",availableTransferable:"available, transferable",availableNotTransferable:"available, not transferable",unavailable:"unavailable",sharedarraybufferConstructorIs:"`SharedArrayBuffer` constructor is available and `SABs` can be transferred via `postMessage`",sharedarraybufferConstructorIsAvailable:"`SharedArrayBuffer` constructor is available but `SABs` cannot be transferred via `postMessage`",willRequireCrossoriginIsolated:"⚠️ will require cross-origin isolated context in the future",requiresCrossoriginIsolated:"requires cross-origin isolated context",transferRequiresCrossoriginIsolatedPermission:"`SharedArrayBuffer` transfer requires enabling the permission policy:",available:"available",thePerformanceAPI:"The `performance.measureUserAgentSpecificMemory()` API is available",thePerformancemeasureuseragentspecificmemory:"The `performance.measureUserAgentSpecificMemory()` API is not available",measureMemory:"Measure Memory",learnMore:"Learn more",creationStackTrace:"Frame Creation `Stack Trace`",creationStackTraceExplanation:"This frame was created programmatically. The `stack trace` shows where this happened.",parentIsAdExplanation:"This frame is considered an ad frame because its parent frame is an ad frame.",matchedBlockingRuleExplanation:"This frame is considered an ad frame because its current (or previous) main document is an ad resource.",createdByAdScriptExplanation:"There was an ad script in the `(async) stack` when this frame was created. Examining the creation `stack trace` of this frame might provide more insight.",refresh:"Refresh",prerendering:"Prerendering",prerenderingStatus:"Prerendering Status",creatorAdScript:"Creator Ad Script"},str_=i18n.i18n.registerUIStrings("panels/application/components/FrameDetailsView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance();export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent{static litTagName=LitHtml.literal`devtools-resources-frame-details-view`;#e=this.attachShadow({mode:"open"});#t;#i;#r;#a=!1;#o=null;#n={policies:[],showDetails:!1};#s=new OriginTrialTreeView;#l=new Components.Linkifier.Linkifier;#p=null;constructor(e){super(),this.#t=e,this.#r="",SDK.TargetManager.TargetManager.instance().addModelListener(SDK.ChildTargetManager.ChildTargetManager,SDK.ChildTargetManager.Events.TargetInfoChanged,this.targetChanged,this),e.resourceTreeModel().addEventListener(SDK.ResourceTreeModel.Events.PrerenderingStatusUpdated,this.render,this),this.render()}targetChanged(e){const t=e.data;"prerender"===t.subtype&&(this.#r=t.url,this.render())}connectedCallback(){this.parentElement?.classList.add("overflow-auto"),this.#a=Root.Runtime.experiments.isEnabled("protocolMonitor"),this.#e.adoptedStyleSheets=[frameDetailsReportViewStyles]}async render(){this.#p=await(this.#t?.parentFrame()?.getAdScriptId(this.#t?.id))||null;const e=this.#p?.debuggerId?await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(this.#p?.debuggerId):null;this.#i=e?.target(),!this.#o&&this.#t&&(this.#o=this.#t.getPermissionsPolicyState()),await coordinator.write("FrameDetailsView render",(()=>{this.#t&&LitHtml.render(LitHtml.html`
        <${ReportView.ReportView.Report.litTagName} .data=${{reportTitle:this.#t.displayName()}}>
          ${this.#m()}
          ${this.#c()}
          ${this.#g()}
          ${this.#d()}
          ${LitHtml.Directives.until(this.#o?.then((e=>(this.#n.policies=e||[],LitHtml.html`
              <${PermissionsPolicySection.litTagName}
                .data=${this.#n}
              >
              </${PermissionsPolicySection.litTagName}>
            `))),LitHtml.nothing)}
          ${this.#R()}
          ${this.#a?this.#u():LitHtml.nothing}
        </${ReportView.ReportView.Report.litTagName}>
      `,this.#e,{host:this})}))}#d(){if(!this.#t)return LitHtml.nothing;this.#s.classList.add("span-cols");const e=this.#t,t=()=>{e.getOriginTrials().then((e=>{this.#s.data={trials:e}}))};return t(),LitHtml.html`
    <${ReportView.ReportView.ReportSectionHeader.litTagName}>
      ${i18n.i18n.lockedString("Origin Trials")}
      <${IconButton.IconButton.IconButton.litTagName} class="inline-button" .data=${{clickHandler:t,groups:[{iconName:"refresh",text:i18nString(UIStrings.refresh),iconColor:"var(--icon-default-hover)",iconWidth:"14px",iconHeight:"14px"}]}}>
      </${IconButton.IconButton.IconButton.litTagName}>
    </${ReportView.ReportView.ReportSectionHeader.litTagName}>
    ${this.#s}
    <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>
    `}#m(){return this.#t?LitHtml.html`
      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.document)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
        <div class="inline-items">
          ${this.#h()}
          ${this.#w()}
          <div class="text-ellipsis" title=${this.#t.url}>${this.#t.url}</div>
        </div>
      </${ReportView.ReportView.ReportValue.litTagName}>
      ${this.#S()}
      ${this.#V()}
      ${LitHtml.Directives.until(this.#f(),LitHtml.nothing)}
      ${this.#$()}
      ${this.#T()}
      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>
    `:LitHtml.nothing}#h(){if(!this.#t||this.#t.unreachableUrl())return LitHtml.nothing;const e=this.#I(this.#t);return renderIconLink("breakpoint-circle",i18nString(UIStrings.clickToRevealInSourcesPanel),(()=>Common.Revealer.reveal(e)))}#w(){if(this.#t){const e=this.#t.resourceForURL(this.#t.url);if(e&&e.request){const t=e.request;return renderIconLink("arrow-up-down-circle",i18nString(UIStrings.clickToRevealInNetworkPanel),(()=>{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,e);return Common.Revealer.reveal(i)}))}}return LitHtml.nothing}#I(e){for(const t of Workspace.Workspace.WorkspaceImpl.instance().projects()){const i=Bindings.NetworkProject.NetworkProject.getTargetForProject(t);if(i&&i===e.resourceTreeModel().target()){const i=t.uiSourceCodeForURL(e.url);if(i)return i}}return null}#S(){return this.#t&&this.#t.unreachableUrl()?LitHtml.html`
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.unreachableUrl)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
        <div class="inline-items">
          ${this.#y()}
          <div class="text-ellipsis" title=${this.#t.unreachableUrl()}>${this.#t.unreachableUrl()}</div>
        </div>
      </${ReportView.ReportView.ReportValue.litTagName}>
    `:LitHtml.nothing}#y(){if(this.#t){const e=Common.ParsedURL.ParsedURL.fromString(this.#t.unreachableUrl());if(e)return renderIconLink("arrow-up-down-circle",i18nString(UIStrings.clickToRevealInNetworkPanelMight),(()=>{Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters([{filterType:NetworkForward.UIFilter.FilterType.Domain,filterValue:e.domain()},{filterType:null,filterValue:e.path}]))}))}return LitHtml.nothing}#V(){return this.#t&&this.#t.securityOrigin&&"://"!==this.#t.securityOrigin?LitHtml.html`
        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${ReportView.ReportView.ReportKey.litTagName}>
        <${ReportView.ReportView.ReportValue.litTagName}>
          <div class="text-ellipsis" title=${this.#t.securityOrigin}>${this.#t.securityOrigin}</div>
        </${ReportView.ReportView.ReportValue.litTagName}>
      `:LitHtml.nothing}async#f(){if(this.#t){const e=await this.#t.getOwnerDOMNodeOrDocument();if(e)return LitHtml.html`
          <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.ownerElement)}</${ReportView.ReportView.ReportKey.litTagName}>
          <${ReportView.ReportView.ReportValue.litTagName} class="without-min-width">
            <div class="inline-items">
              <button class="link" role="link" tabindex=0
                @mouseenter=${()=>this.#t?.highlight()}
                @mouseleave=${()=>SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}
                @click=${()=>Common.Revealer.reveal(e)}
                title=${i18nString(UIStrings.clickToRevealInElementsPanel)}
              >
                <${IconButton.Icon.Icon.litTagName} .data=${{iconName:"code-circle",color:"var(--icon-link)",width:"16px",height:"16px"}}>
                </${IconButton.Icon.Icon.litTagName}>
              </button>
              <button class="link text-link" role="link" tabindex=0 title=${i18nString(UIStrings.clickToRevealInElementsPanel)}
                @mouseenter=${()=>this.#t?.highlight()}
                @mouseleave=${()=>SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}
                @click=${()=>Common.Revealer.reveal(e)}
              >
                &lt;${e.nodeName().toLocaleLowerCase()}&gt;
              </button>
            </div>
          </${ReportView.ReportView.ReportValue.litTagName}>
        `}return LitHtml.nothing}#$(){const e=this.#t?.getCreationStackTraceData();return e&&e.creationStackTrace?LitHtml.html`
        <${ReportView.ReportView.ReportKey.litTagName} title=${i18nString(UIStrings.creationStackTraceExplanation)}>${i18nString(UIStrings.creationStackTrace)}</${ReportView.ReportView.ReportKey.litTagName}>
        <${ReportView.ReportView.ReportValue.litTagName}>
          <${StackTrace.litTagName} .data=${{frame:this.#t,buildStackTraceRows:Components.JSPresentationUtils.buildStackTraceRows}}>
          </${StackTrace.litTagName}>
        </${ReportView.ReportView.ReportValue.litTagName}>
      `:LitHtml.nothing}#N(e){switch(e){case"child":return{value:i18nString(UIStrings.child),description:i18nString(UIStrings.childDescription)};case"root":return{value:i18nString(UIStrings.root),description:i18nString(UIStrings.rootDescription)}}}#v(e){switch(e){case"CreatedByAdScript":return i18nString(UIStrings.createdByAdScriptExplanation);case"MatchedBlockingRule":return i18nString(UIStrings.matchedBlockingRuleExplanation);case"ParentIsAd":return i18nString(UIStrings.parentIsAdExplanation)}}#T(){if(!this.#t)return LitHtml.nothing;const e=this.#t.adFrameType();if("none"===e)return LitHtml.nothing;const t=this.#N(e),i=[LitHtml.html`<div title=${t.description}>${t.value}</div>`];for(const e of this.#t.adFrameStatus()?.explanations||[])i.push(LitHtml.html`<div>${this.#v(e)}</div>`);const r=this.#i?this.#l.linkifyScriptLocation(this.#i,this.#p?.scriptId||null,Platform.DevToolsPath.EmptyUrlString,void 0,void 0):null;return LitHtml.html`
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.adStatus)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
        <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${{rows:i}}></${ExpandableList.ExpandableList.ExpandableList.litTagName}></${ReportView.ReportView.ReportValue.litTagName}>
      ${this.#i?LitHtml.html`
        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.creatorAdScript)}</${ReportView.ReportView.ReportKey.litTagName}>
        <${ReportView.ReportView.ReportValue.litTagName} class="ad-script-link">${r}</${ReportView.ReportView.ReportValue.litTagName}>
      `:LitHtml.nothing}
    `}#c(){return this.#t?LitHtml.html`
      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.securityIsolation)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.secureContext)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
        ${this.#t.isSecureContext()?i18nString(UIStrings.yes):i18nString(UIStrings.no)}\xA0${this.#b()}
      </${ReportView.ReportView.ReportValue.litTagName}>
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.crossoriginIsolated)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
        ${this.#t.isCrossOriginIsolated()?i18nString(UIStrings.yes):i18nString(UIStrings.no)}
      </${ReportView.ReportView.ReportValue.litTagName}>
      ${LitHtml.Directives.until(this.#L(),LitHtml.nothing)}
      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>
    `:LitHtml.nothing}#b(){const e=this.#U();return e?LitHtml.html`<span class="inline-comment">${e}</span>`:LitHtml.nothing}#U(){switch(this.#t?.getSecureContextType()){case"Secure":return null;case"SecureLocalhost":return i18nString(UIStrings.localhostIsAlwaysASecureContext);case"InsecureAncestor":return i18nString(UIStrings.aFrameAncestorIsAnInsecure);case"InsecureScheme":return i18nString(UIStrings.theFramesSchemeIsInsecure)}return null}async#L(){if(this.#t){const e=this.#t.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager),t=e&&await e.getSecurityIsolationStatus(this.#t.id);if(t)return LitHtml.html`
          ${this.#k(t.coep,i18n.i18n.lockedString("Cross-Origin Embedder Policy (COEP)"),"None")}
          ${this.#k(t.coop,i18n.i18n.lockedString("Cross-Origin Opener Policy (COOP)"),"UnsafeNone")}
        `}return LitHtml.nothing}#k(e,t,i){if(!e)return LitHtml.nothing;const r=e.value!==i,a=!r&&e.reportOnlyValue!==i,o=r?e.reportingEndpoint:e.reportOnlyReportingEndpoint;return LitHtml.html`
      <${ReportView.ReportView.ReportKey.litTagName}>${t}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
        ${r?e.value:e.reportOnlyValue}
        ${a?LitHtml.html`<span class="inline-comment">report-only</span>`:LitHtml.nothing}
        ${o?LitHtml.html`<span class="inline-name">${i18nString(UIStrings.reportingTo)}</span>${o}`:LitHtml.nothing}
      </${ReportView.ReportView.ReportValue.litTagName}>
    `}#g(){return this.#t?LitHtml.html`
      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.apiAvailability)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
      <div class="span-cols">
        ${i18nString(UIStrings.availabilityOfCertainApisDepends)}
        <x-link href="https://web.dev/why-coop-coep/" class="link">${i18nString(UIStrings.learnMore)}</x-link>
      </div>
      ${this.#H()}
      ${this.#C()}
      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>
    `:LitHtml.nothing}#H(){if(this.#t){const e=this.#t.getGatedAPIFeatures();if(e){const t=e.includes("SharedArrayBuffers"),i=t&&e.includes("SharedArrayBuffersTransferAllowed"),r=i18nString(i?UIStrings.availableTransferable:t?UIStrings.availableNotTransferable:UIStrings.unavailable),a=i?i18nString(UIStrings.sharedarraybufferConstructorIs):t?i18nString(UIStrings.sharedarraybufferConstructorIsAvailable):"";function o(e){switch(e.getCrossOriginIsolatedContextType()){case"Isolated":return LitHtml.nothing;case"NotIsolated":return t?LitHtml.html`<span class="inline-comment">${i18nString(UIStrings.willRequireCrossoriginIsolated)}</span>`:LitHtml.html`<span class="inline-comment">${i18nString(UIStrings.requiresCrossoriginIsolated)}</span>`;case"NotIsolatedFeatureDisabled":if(!i)return LitHtml.html`<span class="inline-comment">${i18nString(UIStrings.transferRequiresCrossoriginIsolatedPermission)} <code>cross-origin-isolated</code></span>`}return LitHtml.nothing}return LitHtml.html`
          <${ReportView.ReportView.ReportKey.litTagName}>SharedArrayBuffers</${ReportView.ReportView.ReportKey.litTagName}>
          <${ReportView.ReportView.ReportValue.litTagName} title=${a}>
            ${r}\xA0${o(this.#t)}
          </${ReportView.ReportView.ReportValue.litTagName}>
        `}}return LitHtml.nothing}#C(){if(this.#t){const e=this.#t.isCrossOriginIsolated(),t=i18nString(e?UIStrings.available:UIStrings.unavailable),i=i18nString(e?UIStrings.thePerformanceAPI:UIStrings.thePerformancemeasureuseragentspecificmemory);return LitHtml.html`
        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.measureMemory)}</${ReportView.ReportView.ReportKey.litTagName}>
        <${ReportView.ReportView.ReportValue.litTagName}>
          <span title=${i}>${t}</span>\xA0<x-link class="link" href="https://web.dev/monitor-total-page-memory-usage/">${i18nString(UIStrings.learnMore)}</x-link>
        </${ReportView.ReportView.ReportValue.litTagName}>
      `}return LitHtml.nothing}#R(){if(this.#r&&""!==this.#r){const e=Prerender2ReasonDescription.PrerenderingOngoing.name()+" "+this.#r;return LitHtml.html`
      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
      ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.prerenderingStatus)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
      <div class="text-ellipsis" title=${e}>${e}</div>
      </${ReportView.ReportView.ReportValue.litTagName}>
      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>`}if(!this.#t||!this.#t.prerenderFinalStatus)return LitHtml.nothing;const e=Prerender2ReasonDescription[this.#t.prerenderFinalStatus].name();if(this.#t.prerenderDisallowedApiMethod){const t=Prerender2ReasonDescription.DisallowedApiMethod.name();return LitHtml.html`
      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
      ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.prerenderingStatus)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
      <div class="text-ellipsis" title=${e}>${e}</div>
      </${ReportView.ReportView.ReportValue.litTagName}>
      <${ReportView.ReportView.ReportKey.litTagName}>${t}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
      <div class="text-ellipsis" title=${this.#t.prerenderDisallowedApiMethod}>
        ${this.#t.prerenderDisallowedApiMethod}
      </div>
      </${ReportView.ReportView.ReportValue.litTagName}>
      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>`}return LitHtml.html`
      <${ReportView.ReportView.ReportSectionHeader.litTagName}>
      ${i18nString(UIStrings.prerendering)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.prerenderingStatus)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
      <div class="text-ellipsis" title=${e}>${e}</div>
      </${ReportView.ReportView.ReportValue.litTagName}>
      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>`}#u(){return this.#t?LitHtml.html`
      <${ReportView.ReportView.ReportSectionHeader.litTagName}
        title=${i18nString(UIStrings.thisAdditionalDebugging)}
      >${i18nString(UIStrings.additionalInformation)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.frameId)}</${ReportView.ReportView.ReportKey.litTagName}>
      <${ReportView.ReportView.ReportValue.litTagName}>
        <div class="text-ellipsis" title=${this.#t.id}>${this.#t.id}</div>
      </${ReportView.ReportView.ReportValue.litTagName}>
      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${ReportView.ReportView.ReportSectionDivider.litTagName}>
    `:LitHtml.nothing}}ComponentHelpers.CustomElements.defineComponent("devtools-resources-frame-details-view",FrameDetailsReportView);