@yuebai008/cli/dist/cli-server/client/front_end/ui/legacy/components/perf_ui/FilmStripView.js

Command line interface for rapid qg-minigame development

import*as Common from"../../../../core/common/common.js";import*as Host from"../../../../core/host/host.js";import*as i18n from"../../../../core/i18n/i18n.js";import*as TraceEngine from"../../../../models/trace/trace.js";import*as UI from"../../legacy.js";import filmStripViewStyles from"./filmStripView.css.legacy.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("ui/legacy/components/perf_ui/FilmStripView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class FilmStripView extends(Common.ObjectWrapper.eventMixin(UI.Widget.HBox)){statusLabel;zeroTime=TraceEngine.Types.Timing.MilliSeconds(0);#e=null;constructor(){super(!0),this.registerRequiredCSS(filmStripViewStyles),this.contentElement.classList.add("film-strip-view"),this.statusLabel=this.contentElement.createChild("div","label"),this.reset()}static setImageData(e,t){t&&(e.src="data:image/jpg;base64,"+t)}setModel(e){this.#e=e,this.zeroTime=TraceEngine.Helpers.Timing.microSecondsToMilliseconds(e.zeroTime),this.#e.frames.length?this.update():this.reset()}createFrameElement(e){const t=TraceEngine.Helpers.Timing.microSecondsToMilliseconds(e.screenshotEvent.ts),i=i18n.TimeUtilities.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)})),FilmStripView.setImageData(n,e.screenshotAsString),s}update(){const e=this.#e?.frames;if(!e||e.length<1)return;const t=e.map((e=>this.createFrameElement(e)));this.contentElement.removeChildren();for(const e of t)this.contentElement.appendChild(e)}onMouseEvent(e,t){this.dispatchEventToListeners(e,t)}onDoubleClick(e){this.#e&&Dialog.fromFilmStrip(this.#e,e.index)}reset(){this.zeroTime=TraceEngine.Types.Timing.MilliSeconds(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 class Dialog{fragment;widget;index;dialog=null;#t;static fromFilmStrip(e,t){const i={source:"TraceEngine",frames:e.frames,index:t,zeroTime:TraceEngine.Helpers.Timing.microSecondsToMilliseconds(e.zeroTime)};return new Dialog(i)}constructor(e){this.#t=e,this.index=e.index;const t=UI.UIUtils.createTextButton("◀",this.onPrevFrame.bind(this));UI.Tooltip.Tooltip.install(t,i18nString(UIStrings.previousFrame));const i=UI.UIUtils.createTextButton("▶",this.onNextFrame.bind(this));UI.Tooltip.Tooltip.install(i,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' data-film-strip-dialog-img style="max-height: 80vh; max-width: 80vw;"></img>
        </x-hbox>
        <x-hbox x-center justify-content=center margin-top=10px>
          ${t}
          <x-hbox $='time' margin=8px></x-hbox>
          ${i}
        </x-hbox>
      </x-widget>
    `,this.widget=this.fragment.element(),this.widget.tabIndex=0,this.widget.addEventListener("keydown",this.keyDown.bind(this),!1),this.dialog=null,this.render()}hide(){this.dialog&&this.dialog.hide()}#i(){return this.#t.frames.length}#s(){return this.#t.zeroTime}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("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.#i()-1&&++this.index,this.render()}onFirstFrame(){this.index=0,this.render()}onLastFrame(){this.index=this.#i()-1,this.render()}#n(){const e=this.#t.frames[this.index];return{snapshot:e.screenshotAsString,timestamp:TraceEngine.Helpers.Timing.microSecondsToMilliseconds(e.screenshotEvent.ts)}}render(){const e=this.#n();this.fragment.$("time").textContent=i18n.TimeUtilities.millisToString(e.timestamp-this.#s());const t=this.fragment.$("image");t.setAttribute("data-frame-index",this.index.toString()),FilmStripView.setImageData(t,e.snapshot),this.resize()}}