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 TextUtils from"../text_utils/text_utils.js";import*as UI from"../ui/ui.js";import*as Workspace from"../workspace/workspace.js";const UIStrings={image:"Image",dropImageFileHere:"Drop image file here",imageFromS:"Image from {PH1}",dD:"{PH1} \xd7 {PH2}",copyImageUrl:"Copy image URL",copyImageAsDataUri:"Copy image as data URI",openImageInNewTab:"Open image in new tab",saveImageAs:"Save image as...",download:"download"},str_=i18n.i18n.registerUIStrings("source_frame/ImageView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ImageView extends UI.View.SimpleView{constructor(e,t){super(i18nString(UIStrings.image)),this.registerRequiredCSS("source_frame/imageView.css",{enableLegacyPatching:!1}),this.element.tabIndex=-1,this.element.classList.add("image-view"),this._url=t.contentURL(),this._parsedURL=new Common.ParsedURL.ParsedURL(this._url),this._mimeType=e,this._contentProvider=t,this._uiSourceCode=t instanceof Workspace.UISourceCode.UISourceCode?t:null,this._uiSourceCode&&(this._uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,this._workingCopyCommitted,this),new UI.DropTarget.DropTarget(this.element,[UI.DropTarget.Type.ImageFile,UI.DropTarget.Type.URI],i18nString(UIStrings.dropImageFileHere),this._handleDrop.bind(this))),this._sizeLabel=new UI.Toolbar.ToolbarText,this._dimensionsLabel=new UI.Toolbar.ToolbarText,this._mimeTypeLabel=new UI.Toolbar.ToolbarText(e),this._container=this.element.createChild("div","image"),this._imagePreviewElement=this._container.createChild("img","resource-image-view"),this._imagePreviewElement.addEventListener("contextmenu",this._contextMenu.bind(this),!0)}async toolbarItems(){return await this._updateContentIfNeeded(),[this._sizeLabel,new UI.Toolbar.ToolbarSeparator,this._dimensionsLabel,new UI.Toolbar.ToolbarSeparator,this._mimeTypeLabel]}wasShown(){this._updateContentIfNeeded()}disposeView(){this._uiSourceCode&&this._uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted,this._workingCopyCommitted,this)}_workingCopyCommitted(){this._updateContentIfNeeded()}async _updateContentIfNeeded(){const{content:e}=await this._contentProvider.requestContent();if(this._cachedContent===e)return;const t=await this._contentProvider.contentEncoded();this._cachedContent=e;const i=TextUtils.ContentProvider.contentAsDataURL(e,this._mimeType,t)||this._url,n=new Promise((e=>{this._imagePreviewElement.onload=e}));this._imagePreviewElement.src=i,this._imagePreviewElement.alt=i18nString(UIStrings.imageFromS,{PH1:this._url});const o=e&&!t?e.length:base64ToSize(e);this._sizeLabel.setText(Platform.NumberUtilities.bytesToString(o)),await n,this._dimensionsLabel.setText(i18nString(UIStrings.dD,{PH1:this._imagePreviewElement.naturalWidth,PH2:this._imagePreviewElement.naturalHeight}))}_contextMenu(e){const t=new UI.ContextMenu.ContextMenu(e),i=new Common.ParsedURL.ParsedURL(this._imagePreviewElement.src);this._parsedURL.isDataURL()||t.clipboardSection().appendItem(i18nString(UIStrings.copyImageUrl),this._copyImageURL.bind(this)),i.isDataURL()&&t.clipboardSection().appendItem(i18nString(UIStrings.copyImageAsDataUri),this._copyImageAsDataURL.bind(this)),t.clipboardSection().appendItem(i18nString(UIStrings.openImageInNewTab),this._openInNewTab.bind(this)),t.clipboardSection().appendItem(i18nString(UIStrings.saveImageAs),(async()=>{await this._saveImage()})),t.show()}_copyImageAsDataURL(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this._imagePreviewElement.src)}_copyImageURL(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this._url)}async _saveImage(){const e=await this._contentProvider.contentEncoded();if(!this._cachedContent)return;const t=this._cachedContent,i=TextUtils.ContentProvider.contentAsDataURL(t,this._mimeType,e,"",!1);if(!i)return;const n=document.createElement("a");n.href=i,n.download=this._parsedURL.isDataURL()?i18nString(UIStrings.download):decodeURIComponent(this._parsedURL.displayName),n.click(),n.remove()}_openInNewTab(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this._url)}async _handleDrop(e){const t=e.items;if(!t.length||"file"!==t[0].kind)return;const i=t[0].webkitGetAsEntry(),n=!i.name.endsWith(".svg");i.file((e=>{const t=new FileReader;t.onloadend=()=>{let e;try{e=t.result}catch(i){e=null,console.error("Can't read file: "+i)}"string"===typeof e&&this._uiSourceCode&&this._uiSourceCode.setContent(n?btoa(e):e,n)},n?t.readAsBinaryString(e):t.readAsText(e)}))}}