import*as Host from"../host/host.js";import*as i18n from"../i18n/i18n.js";import*as Platform from"../platform/platform.js";import*as UI from"../ui/ui.js";const UIStrings={doubleclickToZoomImageClickTo:"Doubleclick to zoom image. Click to view preceding requests.",screenshotForSSelectToView:"Screenshot for {PH1} - select to view preceding requests.",screenshot:"Screenshot",previousFrame:"Previous frame",nextFrame:"Next frame"},str_=i18n.i18n.registerUIStrings("perf_ui/FilmStripView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class FilmStripView extends UI.Widget.HBox{constructor(){super(!0),this.registerRequiredCSS("perf_ui/filmStripView.css",{enableLegacyPatching:!1}),this.contentElement.classList.add("film-strip-view"),this._statusLabel=this.contentElement.createChild("div","label"),this.reset(),this.setMode(Modes.TimeBased)}static _setImageData(e,t){t&&(e.src="data:image/jpg;base64,"+t)}setMode(e){this._mode=e,this.contentElement.classList.toggle("time-based",e===Modes.TimeBased),this.update()}setModel(e,t,i){this._model=e,this._zeroTime=t,this._spanTime=i;e.frames().length?this.update():this.reset()}createFrameElement(e){const t=e.timestamp,i=Number.millisToString(t-this._zeroTime),s=document.createElement("div");s.classList.add("frame"),UI.Tooltip.Tooltip.install(s,i18nString(UIStrings.doubleclickToZoomImageClickTo)),s.createChild("div","time").textContent=i,s.tabIndex=0,s.setAttribute("aria-label",i18nString(UIStrings.screenshotForSSelectToView,{PH1:i})),UI.ARIAUtils.markAsButton(s);const n=s.createChild("div","thumbnail").createChild("img");return n.alt=i18nString(UIStrings.screenshot),s.addEventListener("mousedown",this._onMouseEvent.bind(this,Events.FrameSelected,t),!1),s.addEventListener("mouseenter",this._onMouseEvent.bind(this,Events.FrameEnter,t),!1),s.addEventListener("mouseout",this._onMouseEvent.bind(this,Events.FrameExit,t),!1),s.addEventListener("dblclick",this._onDoubleClick.bind(this,e),!1),s.addEventListener("focusin",this._onMouseEvent.bind(this,Events.FrameEnter,t),!1),s.addEventListener("focusout",this._onMouseEvent.bind(this,Events.FrameExit,t),!1),s.addEventListener("keydown",(e=>{"Enter"!==e.code&&"Space"!==e.code||this._onMouseEvent(Events.FrameSelected,t)})),e.imageDataPromise().then(FilmStripView._setImageData.bind(null,n)).then((function(){return s}))}frameByTime(e){const t=this._model.frames(),i=Math.max(Platform.ArrayUtilities.upperBound(t,e,(function(e,t){return e-t.timestamp}))-1,0);return t[i]}update(){if(!this._model)return;const e=this._model.frames();if(!e.length)return;if(this._mode===Modes.FrameBased)return void Promise.all(e.map(this.createFrameElement.bind(this))).then(s.bind(this));const t=this.contentElement.clientWidth,i=this._spanTime/t;function s(e){this.contentElement.removeChildren();for(let t=0;t<e.length;++t)this.contentElement.appendChild(e[t])}this.createFrameElement(e[0]).then(function(e){const n=Math.ceil(UI.UIUtils.measurePreferredSize(e,this.contentElement).width);if(!n)return;const r=[];for(let s=n;s<t;s+=n){const e=s*i+this._zeroTime;r.push(this.createFrameElement(this.frameByTime(e)).then(o))}function o(e){return e.style.width=n+"px",e}Promise.all(r).then(s.bind(this))}.bind(this))}onResize(){this._mode!==Modes.FrameBased&&this.update()}_onMouseEvent(e,t){this.dispatchEventToListeners(e,t)}_onDoubleClick(e){new Dialog(e,this._zeroTime)}reset(){this._zeroTime=0,this.contentElement.removeChildren(),this.contentElement.appendChild(this._statusLabel)}setStatusText(e){this._statusLabel.textContent=e}}export var Events;!function(e){e.FrameSelected="FrameSelected",e.FrameEnter="FrameEnter",e.FrameExit="FrameExit"}(Events||(Events={}));export const Modes={TimeBased:"TimeBased",FrameBased:"FrameBased"};export class Dialog{constructor(e,t){const i=UI.UIUtils.createTextButton("\u25c0",this._onPrevFrame.bind(this));UI.Tooltip.Tooltip.install(i,i18nString(UIStrings.previousFrame));const s=UI.UIUtils.createTextButton("\u25b6",this._onNextFrame.bind(this));UI.Tooltip.Tooltip.install(s,i18nString(UIStrings.nextFrame)),this._fragment=UI.Fragment.Fragment.build`
      <x-widget flex=none margin=12px>
        <x-hbox overflow=auto border='1px solid #ddd'>
          <img $='image' style="max-height: 80vh; max-width: 80vw;"></img>
        </x-hbox>
        <x-hbox x-center justify-content=center margin-top=10px>
          ${i}
          <x-hbox $='time' margin=8px></x-hbox>
          ${s}
        </x-hbox>
      </x-widget>
    `,this._widget=this._fragment.element(),this._widget.tabIndex=0,this._widget.addEventListener("keydown",this._keyDown.bind(this),!1),this._frames=e.model().frames(),this._index=e.index,this._zeroTime=t||e.model().zeroTime(),this._dialog=null,this._render()}_resize(){this._dialog||(this._dialog=new UI.Dialog.Dialog,this._dialog.contentElement.appendChild(this._widget),this._dialog.setDefaultFocusedElement(this._widget),this._dialog.show()),this._dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MeasureContent)}_keyDown(e){const t=e;switch(t.key){case"ArrowLeft":Host.Platform.isMac()&&t.metaKey?this._onFirstFrame():this._onPrevFrame();break;case"ArrowRight":Host.Platform.isMac()&&t.metaKey?this._onLastFrame():this._onNextFrame();break;case"Home":this._onFirstFrame();break;case"End":this._onLastFrame()}}_onPrevFrame(){this._index>0&&--this._index,this._render()}_onNextFrame(){this._index<this._frames.length-1&&++this._index,this._render()}_onFirstFrame(){this._index=0,this._render()}_onLastFrame(){this._index=this._frames.length-1,this._render()}_render(){const e=this._frames[this._index];return this._fragment.$("time").textContent=Number.millisToString(e.timestamp-this._zeroTime),e.imageDataPromise().then((e=>{const t=this._fragment.$("image");return FilmStripView._setImageData(t,e)})).then(this._resize.bind(this))}}