@yuebai008/cli/dist/cli-server/client/front_end/panels/screencast/ScreencastView.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 SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";import{InputModel}from"./InputModel.js";import screencastViewStyles from"./screencastView.css.js";const UIStrings={screencastViewOfDebugTarget:"Screencast view of debug target",theTabIsInactive:"The tab is inactive",profilingInProgress:"Profiling in progress",back:"back",forward:"forward",reload:"reload",addressBar:"Address bar"},str_=i18n.i18n.registerUIStrings("panels/screencast/ScreencastView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ScreencastView extends UI.Widget.VBox{screenCaptureModel;domModel;overlayModel;resourceTreeModel;networkManager;inputModel;shortcuts;scrollOffsetX;scrollOffsetY;screenZoom;screenOffsetTop;pageScaleFactor;imageElement;viewportElement;glassPaneElement;canvasElement;titleElement;context;imageZoom;tagNameElement;attributeElement;nodeWidthElement;nodeHeightElement;model;highlightConfig;navigationUrl;navigationBack;navigationForward;canvasContainerElement;isCasting;checkerboardPattern;targetInactive;deferredCasting;highlightNode;config;node;inspectModeConfig;navigationBar;navigationReload;navigationProgressBar;historyIndex;historyEntries;constructor(e){super(),this.screenCaptureModel=e,this.domModel=e.target().model(SDK.DOMModel.DOMModel),this.overlayModel=e.target().model(SDK.OverlayModel.OverlayModel),this.resourceTreeModel=e.target().model(SDK.ResourceTreeModel.ResourceTreeModel),this.networkManager=e.target().model(SDK.NetworkManager.NetworkManager),this.inputModel=e.target().model(InputModel),this.setMinimumSize(150,150),this.shortcuts={},this.scrollOffsetX=0,this.scrollOffsetY=0,this.screenZoom=1,this.screenOffsetTop=0,this.pageScaleFactor=1,this.imageZoom=1}initialize(){this.element.classList.add("screencast"),this.createNavigationBar(),this.viewportElement=this.element.createChild("div","screencast-viewport hidden"),this.canvasContainerElement=this.viewportElement.createChild("div","screencast-canvas-container"),this.glassPaneElement=this.canvasContainerElement.createChild("div","screencast-glasspane fill hidden"),this.canvasElement=this.canvasContainerElement.createChild("canvas"),UI.ARIAUtils.setLabel(this.canvasElement,i18nString(UIStrings.screencastViewOfDebugTarget)),this.canvasElement.tabIndex=0,this.canvasElement.addEventListener("mousedown",this.handleMouseEvent.bind(this),!1),this.canvasElement.addEventListener("mouseup",this.handleMouseEvent.bind(this),!1),this.canvasElement.addEventListener("mousemove",this.handleMouseEvent.bind(this),!1),this.canvasElement.addEventListener("mousewheel",this.handleMouseEvent.bind(this),!1),this.canvasElement.addEventListener("click",this.handleMouseEvent.bind(this),!1),this.canvasElement.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this),!1),this.canvasElement.addEventListener("keydown",this.handleKeyEvent.bind(this),!1),this.canvasElement.addEventListener("keyup",this.handleKeyEvent.bind(this),!1),this.canvasElement.addEventListener("keypress",this.handleKeyEvent.bind(this),!1),this.canvasElement.addEventListener("blur",this.handleBlurEvent.bind(this),!1),this.titleElement=this.canvasContainerElement.createChild("div","screencast-element-title monospace hidden"),this.tagNameElement=this.titleElement.createChild("span","screencast-tag-name"),this.attributeElement=this.titleElement.createChild("span","screencast-attribute"),UI.UIUtils.createTextChild(this.titleElement," ");const e=this.titleElement.createChild("span","screencast-dimension");this.nodeWidthElement=e.createChild("span"),UI.UIUtils.createTextChild(e," × "),this.nodeHeightElement=e.createChild("span"),this.titleElement.style.top="0",this.titleElement.style.left="0",this.imageElement=new Image,this.isCasting=!1,this.context=this.canvasElement.getContext("2d"),this.checkerboardPattern=this.createCheckerboardPattern(this.context),this.shortcuts[UI.KeyboardShortcut.KeyboardShortcut.makeKey("l",UI.KeyboardShortcut.Modifiers.Ctrl)]=this.focusNavigationBar.bind(this),SDK.TargetManager.TargetManager.instance().addEventListener(SDK.TargetManager.Events.SuspendStateChanged,this.onSuspendStateChange,this),this.updateGlasspane()}wasShown(){this.startCasting(),this.registerCSSFiles([screencastViewStyles])}willHide(){this.stopCasting()}startCasting(){if(SDK.TargetManager.TargetManager.instance().allTargetsSuspended())return;if(this.isCasting)return;this.isCasting=!0;const e=this.viewportDimensions();if(e.width<0||e.height<0)this.isCasting=!1;else{e.width*=window.devicePixelRatio,e.height*=window.devicePixelRatio,this.screenCaptureModel.startScreencast("jpeg",80,Math.floor(Math.min(2048,e.width)),Math.floor(Math.min(2048,e.height)),void 0,this.screencastFrame.bind(this),this.screencastVisibilityChanged.bind(this));for(const e of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel))e.overrideEmulateTouch(!0);this.overlayModel&&this.overlayModel.setHighlighter(this)}}stopCasting(){if(this.isCasting){this.isCasting=!1,this.screenCaptureModel.stopScreencast();for(const e of SDK.TargetManager.TargetManager.instance().models(SDK.EmulationModel.EmulationModel))e.overrideEmulateTouch(!1);this.overlayModel&&this.overlayModel.setHighlighter(null)}}screencastFrame(e,t){this.imageElement.onload=()=>{this.pageScaleFactor=t.pageScaleFactor,this.screenOffsetTop=t.offsetTop,this.scrollOffsetX=t.scrollOffsetX,this.scrollOffsetY=t.scrollOffsetY;const e=t.deviceHeight/t.deviceWidth,i=this.viewportDimensions();this.imageZoom=Math.min(i.width/this.imageElement.naturalWidth,i.height/(this.imageElement.naturalWidth*e)),this.viewportElement.classList.remove("hidden");const s=BORDERS_SIZE;this.imageZoom<1.01/window.devicePixelRatio&&(this.imageZoom=1/window.devicePixelRatio),this.screenZoom=this.imageElement.naturalWidth*this.imageZoom/t.deviceWidth,this.viewportElement.style.width=t.deviceWidth*this.screenZoom+s+"px",this.viewportElement.style.height=t.deviceHeight*this.screenZoom+s+"px";const n=this.highlightNode?{node:this.highlightNode,selectorList:void 0}:{clear:!0};this.updateHighlightInOverlayAndRepaint(n,this.highlightConfig)},this.imageElement.src="data:image/jpg;base64,"+e}isGlassPaneActive(){return!this.glassPaneElement.classList.contains("hidden")}screencastVisibilityChanged(e){this.targetInactive=!e,this.updateGlasspane()}onSuspendStateChange(){SDK.TargetManager.TargetManager.instance().allTargetsSuspended()?this.stopCasting():this.startCasting(),this.updateGlasspane()}updateGlasspane(){this.targetInactive?(this.glassPaneElement.textContent=i18nString(UIStrings.theTabIsInactive),this.glassPaneElement.classList.remove("hidden")):SDK.TargetManager.TargetManager.instance().allTargetsSuspended()?(this.glassPaneElement.textContent=i18nString(UIStrings.profilingInProgress),this.glassPaneElement.classList.remove("hidden")):this.glassPaneElement.classList.add("hidden")}async handleMouseEvent(e){if(this.isGlassPaneActive())return void e.consume();if(!this.pageScaleFactor||!this.domModel)return;if(!this.inspectModeConfig||"mousewheel"===e.type)return this.inputModel&&this.inputModel.emitTouchFromMouseEvent(e,this.screenOffsetTop,this.screenZoom),e.preventDefault(),void("mousedown"===e.type&&this.canvasElement.focus());const t=this.convertIntoScreenSpace(e),i=await this.domModel.nodeForLocation(Math.floor(t.x/this.pageScaleFactor+this.scrollOffsetX),Math.floor(t.y/this.pageScaleFactor+this.scrollOffsetY),Common.Settings.Settings.instance().moduleSetting("showUAShadowDOM").get());i&&("mousemove"===e.type?(this.updateHighlightInOverlayAndRepaint({node:i,selectorList:void 0},this.inspectModeConfig),this.domModel.overlayModel().nodeHighlightRequested({nodeId:i.id})):"click"===e.type&&this.domModel.overlayModel().inspectNodeRequested({backendNodeId:i.backendNodeId()}))}handleKeyEvent(e){if(this.isGlassPaneActive())return void e.consume();const t=UI.KeyboardShortcut.KeyboardShortcut.makeKeyFromEvent(e),i=this.shortcuts[t];i&&i(e)?e.consume():(this.inputModel&&this.inputModel.emitKeyEvent(e),e.consume(),this.canvasElement.focus())}handleContextMenuEvent(e){e.consume(!0)}handleBlurEvent(e){this.inputModel&&this.inputModel.cancelTouch()}convertIntoScreenSpace(e){return{x:Math.round(e.offsetX/this.screenZoom),y:Math.round(e.offsetY/this.screenZoom-this.screenOffsetTop)}}onResize(){this.deferredCasting&&(clearTimeout(this.deferredCasting),delete this.deferredCasting),this.stopCasting(),this.deferredCasting=window.setTimeout(this.startCasting.bind(this),100)}highlightInOverlay(e,t){this.updateHighlightInOverlayAndRepaint(e,t)}async updateHighlightInOverlayAndRepaint(e,t){let i=null;if("node"in e&&(i=e.node),!i&&"deferredNode"in e&&(i=await e.deferredNode.resolvePromise()),!i&&"object"in e){const t=e.object.runtimeModel().target().model(SDK.DOMModel.DOMModel);t&&(i=await t.pushObjectAsNodeToFrontend(e.object))}if(this.highlightNode=i,this.highlightConfig=t,!i)return this.model=null,this.config=null,this.node=null,this.titleElement.classList.add("hidden"),void this.repaint();this.node=i,i.boxModel().then((e=>{e&&this.pageScaleFactor?(this.model=this.scaleModel(e),this.config=t,this.repaint()):this.repaint()}))}scaleModel(e){function t(e){for(let t=0;t<e.length;t+=2)e[t]=e[t]*this.pageScaleFactor*this.screenZoom,e[t+1]=(e[t+1]*this.pageScaleFactor+this.screenOffsetTop)*this.screenZoom}return t.call(this,e.content),t.call(this,e.padding),t.call(this,e.border),t.call(this,e.margin),e}repaint(){const e=this.model,t=this.config,i=this.canvasElement.getBoundingClientRect().width,s=this.canvasElement.getBoundingClientRect().height;if(this.canvasElement.width=window.devicePixelRatio*i,this.canvasElement.height=window.devicePixelRatio*s,this.context.save(),this.context.scale(window.devicePixelRatio,window.devicePixelRatio),this.context.save(),this.checkerboardPattern&&(this.context.fillStyle=this.checkerboardPattern),this.context.fillRect(0,0,i,this.screenOffsetTop*this.screenZoom),this.context.fillRect(0,this.screenOffsetTop*this.screenZoom+this.imageElement.naturalHeight*this.imageZoom,i,s),this.context.restore(),e&&t){this.context.save();const i=[],s=e=>Boolean(e.a&&0===e.a);e.content&&t.contentColor&&!s(t.contentColor)&&i.push({quad:e.content,color:t.contentColor}),e.padding&&t.paddingColor&&!s(t.paddingColor)&&i.push({quad:e.padding,color:t.paddingColor}),e.border&&t.borderColor&&!s(t.borderColor)&&i.push({quad:e.border,color:t.borderColor}),e.margin&&t.marginColor&&!s(t.marginColor)&&i.push({quad:e.margin,color:t.marginColor});for(let e=i.length-1;e>0;--e)this.drawOutlinedQuadWithClip(i[e].quad,i[e-1].quad,i[e].color);i.length>0&&this.drawOutlinedQuad(i[0].quad,i[0].color),this.context.restore(),this.drawElementTitle(),this.context.globalCompositeOperation="destination-over"}this.context.drawImage(this.imageElement,0,this.screenOffsetTop*this.screenZoom,this.imageElement.naturalWidth*this.imageZoom,this.imageElement.naturalHeight*this.imageZoom),this.context.restore()}cssColor(e){return e?Common.Color.Legacy.fromRGBA([e.r,e.g,e.b,void 0!==e.a?e.a:1]).asString("rgba")||"":"transparent"}quadToPath(e){return this.context.beginPath(),this.context.moveTo(e[0],e[1]),this.context.lineTo(e[2],e[3]),this.context.lineTo(e[4],e[5]),this.context.lineTo(e[6],e[7]),this.context.closePath(),this.context}drawOutlinedQuad(e,t){this.context.save(),this.context.lineWidth=2,this.quadToPath(e).clip(),this.context.fillStyle=this.cssColor(t),this.context.fill(),this.context.restore()}drawOutlinedQuadWithClip(e,t,i){this.context.fillStyle=this.cssColor(i),this.context.save(),this.context.lineWidth=0,this.quadToPath(e).fill(),this.context.globalCompositeOperation="destination-out",this.context.fillStyle="red",this.quadToPath(t).fill(),this.context.restore()}drawElementTitle(){if(!this.node)return;const e=this.canvasElement.getBoundingClientRect().width,t=this.canvasElement.getBoundingClientRect().height,i=this.node.localName()||this.node.nodeName().toLowerCase();this.tagNameElement.textContent=i,this.attributeElement.textContent=getAttributesForElementTitle(this.node),this.nodeWidthElement.textContent=String(this.model?this.model.width:0),this.nodeHeightElement.textContent=String(this.model?this.model.height:0),this.titleElement.classList.remove("hidden");const s=this.titleElement.offsetWidth+6,n=this.titleElement.offsetHeight+4,a=this.model?this.model.margin[1]:0,o=this.model?this.model.margin[7]:0;let r,h=!1,l=!1,d=Math.max(2,this.model?this.model.margin[0]:0);d+s>e&&(d=e-s-2),a>t?(r=t-n-7,l=!0):o<0?(r=7,h=!0):o+n+7<t?(r=o+7-4,h=!0):a-n-7>0?(r=a-n-7+3,l=!0):r=7,this.context.save(),this.context.translate(.5,.5),this.context.beginPath(),this.context.moveTo(d,r),h&&(this.context.lineTo(d+14,r),this.context.lineTo(d+21,r-7),this.context.lineTo(d+28,r)),this.context.lineTo(d+s,r),this.context.lineTo(d+s,r+n),l&&(this.context.lineTo(d+28,r+n),this.context.lineTo(d+21,r+n+7),this.context.lineTo(d+14,r+n)),this.context.lineTo(d,r+n),this.context.closePath(),this.context.fillStyle="rgb(255, 255, 194)",this.context.fill(),this.context.strokeStyle="rgb(128, 128, 128)",this.context.stroke(),this.context.restore(),this.titleElement.style.top=r+3+"px",this.titleElement.style.left=d+3+"px"}viewportDimensions(){const e=BORDERS_SIZE;return{width:this.element.offsetWidth-e-30,height:this.element.offsetHeight-e-30-NAVBAR_HEIGHT}}setInspectMode(e,t){return this.inspectModeConfig="none"!==e?t:null,Promise.resolve()}highlightFrame(e){}createCheckerboardPattern(e){const t=document.createElement("canvas"),i=32;t.width=64,t.height=64;const s=t.getContext("2d");return s.fillStyle="rgb(195, 195, 195)",s.fillRect(0,0,64,64),s.fillStyle="rgb(225, 225, 225)",s.fillRect(0,0,i,i),s.fillRect(i,i,i,i),e.createPattern(t,"repeat")}createNavigationBar(){this.navigationBar=this.element.createChild("div","screencast-navigation"),this.navigationBack=this.navigationBar.createChild("button","back"),this.navigationBack.disabled=!0,UI.ARIAUtils.setLabel(this.navigationBack,i18nString(UIStrings.back)),this.navigationForward=this.navigationBar.createChild("button","forward"),this.navigationForward.disabled=!0,UI.ARIAUtils.setLabel(this.navigationForward,i18nString(UIStrings.forward)),this.navigationReload=this.navigationBar.createChild("button","reload"),UI.ARIAUtils.setLabel(this.navigationReload,i18nString(UIStrings.reload)),this.navigationUrl=UI.UIUtils.createInput(),UI.ARIAUtils.setLabel(this.navigationUrl,i18nString(UIStrings.addressBar)),this.navigationBar.appendChild(this.navigationUrl),this.navigationUrl.type="text",this.navigationProgressBar=new ProgressTracker(this.resourceTreeModel,this.networkManager,this.navigationBar.createChild("div","progress")),this.resourceTreeModel&&(this.navigationBack.addEventListener("click",this.navigateToHistoryEntry.bind(this,-1),!1),this.navigationForward.addEventListener("click",this.navigateToHistoryEntry.bind(this,1),!1),this.navigationReload.addEventListener("click",this.navigateReload.bind(this),!1),this.navigationUrl.addEventListener("keyup",this.navigationUrlKeyUp.bind(this),!0),this.requestNavigationHistory(),this.resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.PrimaryPageChanged,this.requestNavigationHistoryEvent,this),this.resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.CachedResourcesLoaded,this.requestNavigationHistoryEvent,this))}navigateToHistoryEntry(e){if(!this.resourceTreeModel)return;const t=(this.historyIndex||0)+e;!this.historyEntries||t<0||t>=this.historyEntries.length||(this.resourceTreeModel.navigateToHistoryEntry(this.historyEntries[t]),this.requestNavigationHistory())}navigateReload(){this.resourceTreeModel&&this.resourceTreeModel.reloadPage()}navigationUrlKeyUp(e){if("Enter"!==e.key)return;let t=this.navigationUrl.value;t&&(t.match(SCHEME_REGEX)||(t="http://"+t),this.resourceTreeModel&&this.resourceTreeModel.navigate(t),this.canvasElement.focus())}requestNavigationHistoryEvent(){this.requestNavigationHistory()}async requestNavigationHistory(){const e=this.resourceTreeModel?await this.resourceTreeModel.navigationHistory():null;if(!e)return;this.historyIndex=e.currentIndex,this.historyEntries=e.entries,this.navigationBack.disabled=0===this.historyIndex,this.navigationForward.disabled=this.historyIndex===this.historyEntries.length-1;let t=this.historyEntries[this.historyIndex].url;const i=t.match(HTTP_REGEX);i&&(t=i[1]),Host.InspectorFrontendHost.InspectorFrontendHostInstance.inspectedURLChanged(t),this.navigationUrl.value=decodeURI(t)}focusNavigationBar(){return this.navigationUrl.focus(),this.navigationUrl.select(),!0}}export const BORDERS_SIZE=44;export const NAVBAR_HEIGHT=29;export const HTTP_REGEX=/^http:\/\/(.+)/;export const SCHEME_REGEX=/^(https?|about|chrome):/;export class ProgressTracker{element;requestIds;startedRequests;finishedRequests;maxDisplayedProgress;constructor(e,t,i){this.element=i,e&&(e.addEventListener(SDK.ResourceTreeModel.Events.PrimaryPageChanged,this.onPrimaryPageChanged,this),e.addEventListener(SDK.ResourceTreeModel.Events.Load,this.onLoad,this)),t&&(t.addEventListener(SDK.NetworkManager.Events.RequestStarted,this.onRequestStarted,this),t.addEventListener(SDK.NetworkManager.Events.RequestFinished,this.onRequestFinished,this)),this.requestIds=null,this.startedRequests=0,this.finishedRequests=0,this.maxDisplayedProgress=0}onPrimaryPageChanged(){this.requestIds=new Map,this.startedRequests=0,this.finishedRequests=0,this.maxDisplayedProgress=0,this.updateProgress(.1)}onLoad(){this.requestIds=null,this.updateProgress(1),window.setTimeout((()=>{this.navigationProgressVisible()||this.displayProgress(0)}),500)}navigationProgressVisible(){return null!==this.requestIds}onRequestStarted(e){if(!this.navigationProgressVisible())return;const t=e.data.request;t.resourceType()!==Common.ResourceType.resourceTypes.WebSocket&&(this.requestIds&&this.requestIds.set(t.requestId(),t),++this.startedRequests)}onRequestFinished(e){if(!this.navigationProgressVisible())return;const t=e.data;this.requestIds&&!this.requestIds.has(t.requestId())||(++this.finishedRequests,window.setTimeout((()=>{this.updateProgress(this.finishedRequests/this.startedRequests*.9)}),500))}updateProgress(e){this.navigationProgressVisible()&&(this.maxDisplayedProgress>=e||(this.maxDisplayedProgress=e,this.displayProgress(e)))}displayProgress(e){this.element.style.width=100*e+"%"}}function getAttributesForElementTitle(e){const t=e.getAttribute("id"),i=e.getAttribute("class");let s=t?"#"+t:"";return i&&(s+="."+i.trim().replace(/\s+/g,".")),s.length>50&&(s=s.substring(0,50)+"…"),s}