import*as Common from"../common/common.js";import*as Host from"../host/host.js";import*as i18n from"../i18n/i18n.js";import*as SDK from"../sdk/sdk.js";import{AffectedResourcesView}from"./AffectedResourcesView.js";const UIStrings={element:"element",elements:"elements"},str_=i18n.i18n.registerUIStrings("issues/AffectedElementsView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class AffectedElementsView extends AffectedResourcesView{constructor(e,t){super(e,{singular:i18nString(UIStrings.element),plural:i18nString(UIStrings.elements)}),this.issue=t}sendTelemetry(){Host.userMetrics.issuesPanelResourceOpened(this.issue.getCategory(),"Element")}async appendAffectedElements(e){let t=0;for(const s of e)await this.appendAffectedElement(s),t++;this.updateAffectedResourceCount(t)}async appendAffectedElement(e){const t=await this.renderElementCell(e),s=document.createElement("tr");s.appendChild(t),this.affectedResources.appendChild(s)}async renderElementCell({backendNodeId:e,nodeName:t}){const s=SDK.SDKModel.TargetManager.instance().mainTarget(),n=new SDK.DOMModel.DeferredDOMNode(s,e),i=await Common.Linkifier.Linkifier.linkify(n);i.textContent=t,i.addEventListener("click",(()=>this.sendTelemetry())),i.addEventListener("keydown",(e=>{"Enter"===e.key&&this.sendTelemetry()}));const r=document.createElement("td");return r.classList.add("affected-resource-element","devtools-link"),r.appendChild(i),r}update(){this.clear(),this.appendAffectedElements(this.issue.elements())}}