import*as Common from"../common/common.js";import*as Host from"../host/host.js";import*as i18n from"../i18n/i18n.js";import*as Platform from"../platform/platform.js";import*as SDK from"../sdk/sdk.js";import*as UI from"../ui/ui.js";const UIStrings={unknownSource:"unknown source",imageFromS:"Image from {PH1}",fileSize:"File size:",intrinsicSize:"Intrinsic size:",renderedSize:"Rendered size:",currentSource:"Current source:",renderedAspectRatio:"Rendered aspect ratio:",intrinsicAspectRatio:"Intrinsic aspect ratio:"},str_=i18n.i18n.registerUIStrings("components/ImagePreview.js",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export let PrecomputedFeatures;export class ImagePreview{static async build(e,t,r,n={precomputedFeatures:void 0,imageAltText:void 0}){const{precomputedFeatures:i,imageAltText:o}=n,s=e.model(SDK.ResourceTreeModel.ResourceTreeModel);if(!s)return null;let c=s.resourceForURL(t),a=t;if(!h(c)&&i&&i.currentSrc&&(a=i.currentSrc,c=s.resourceForURL(a)),!c||!h(c))return null;const d=c.displayName,l=c.content?c.content:c.url.split("base64,")[1],m=c.contentSize(),u=m||base64ToSize(l),p=u>0?Platform.NumberUtilities.bytesToString(u):"";let S;const g=new Promise((e=>{S=e})),C=document.createElement("img");return C.addEventListener("load",(function(){const e=document.createElement("table");UI.Utils.appendStyle(e,"components/imagePreview.css",{enableLegacyPatching:!1}),e.className="image-preview-container";const n=e.createChild("tr").createChild("td","image-container");n.colSpan=2;const o=n.createChild("div");o.title=d,o.appendChild(C),o.addEventListener("click",(()=>{Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(a)}));const s=C.naturalWidth,c=C.naturalHeight,l=i?i.renderedWidth:s,m=i?i.renderedHeight:c;if(r){const t=e.createChild("tr","row");t.createChild("td","title").textContent=i18nString(UIStrings.renderedSize),t.createChild("td","description").textContent=`${l} \xd7 ${m} px`;const r=e.createChild("tr","row");if(r.createChild("td","title").textContent=i18nString(UIStrings.renderedAspectRatio),r.createChild("td","description").textContent=Platform.NumberUtilities.aspectRatio(l,m),m!==c||l!==s){const t=e.createChild("tr","row");t.createChild("td","title").textContent=i18nString(UIStrings.intrinsicSize),t.createChild("td","description").textContent=`${s} \xd7 ${c} px`;const r=e.createChild("tr","row");r.createChild("td","title").textContent=i18nString(UIStrings.intrinsicAspectRatio),r.createChild("td","description").textContent=Platform.NumberUtilities.aspectRatio(s,c)}}const u=e.createChild("tr","row");if(u.createChild("td","title").textContent=i18nString(UIStrings.fileSize),u.createChild("td","description").textContent=p,a!==t){const t=e.createChild("tr","row");t.createChild("td","title").textContent=i18nString(UIStrings.currentSource);const r=Platform.StringUtilities.trimMiddle(a,100),n=t.createChild("td","description description-link").createChild("span","source-link");n.textContent=r,n.addEventListener("click",(()=>{Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(a)}))}S(e)}),!1),C.addEventListener("error",(()=>S(null)),!1),o&&(C.alt=o),c.populateImageSource(C),g;function h(e){return null!==e&&e.resourceType()===Common.ResourceType.resourceTypes.Image}}static async loadDimensionsForNode(e){if(!e.nodeName()||"img"!==e.nodeName().toLowerCase())return;const t=await e.resolveToObject("");if(!t)return;const r=t.callFunctionJSON((function(){return{renderedWidth:this.width,renderedHeight:this.height,currentSrc:this.currentSrc}}),void 0);return t.release(),r}static defaultAltTextForImageURL(e){const t=new Common.ParsedURL.ParsedURL(e),r=t.isValid?t.displayName:i18nString(UIStrings.unknownSource);return i18nString(UIStrings.imageFromS,{PH1:r})}}