@yuebai008/cli/dist/cli-server/client/front_end/panels/layer_viewer/LayerDetailsView.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";import layerDetailsViewStyles from"./layerDetailsView.css.js";import{ScrollRectSelection}from"./LayerViewHost.js";const UIStrings={selectALayerToSeeItsDetails:"Select a layer to see its details",scrollRectangleDimensions:"{PH1} {PH2} × {PH3} (at {PH4}, {PH5})",unnamed:"<unnamed>",stickyAncenstorLayersS:"{PH1}: {PH2} ({PH3})",stickyBoxRectangleDimensions:"Sticky Box {PH1} × {PH2} (at {PH3}, {PH4})",containingBlocRectangleDimensions:"Containing Block {PH1} × {PH2} (at {PH3}, {PH4})",nearestLayerShiftingStickyBox:"Nearest Layer Shifting Sticky Box",nearestLayerShiftingContaining:"Nearest Layer Shifting Containing Block",updateRectangleDimensions:"{PH1} × {PH2} (at {PH3}, {PH4})",size:"Size",compositingReasons:"Compositing Reasons",memoryEstimate:"Memory estimate",paintCount:"Paint count",slowScrollRegions:"Slow scroll regions",stickyPositionConstraint:"Sticky position constraint",paintProfiler:"Paint Profiler",nonFastScrollable:"Non fast scrollable",touchEventHandler:"Touch event handler",wheelEventHandler:"Wheel event handler",repaintsOnScroll:"Repaints on scroll",mainThreadScrollingReason:"Main thread scrolling reason"},str_=i18n.i18n.registerUIStrings("panels/layer_viewer/LayerDetailsView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),i18nLazyString=i18n.i18n.getLazilyComputedLocalizedString.bind(void 0,str_);export class LayerDetailsView extends(Common.ObjectWrapper.eventMixin(UI.Widget.Widget)){layerViewHost;emptyWidget;layerSnapshotMap;tableElement;tbodyElement;sizeCell;compositingReasonsCell;memoryEstimateCell;paintCountCell;scrollRectsCell;stickyPositionConstraintCell;paintProfilerLink;selection;constructor(t){super(!0),this.layerViewHost=t,this.layerViewHost.registerView(this),this.emptyWidget=new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.selectALayerToSeeItsDetails)),this.layerSnapshotMap=this.layerViewHost.getLayerSnapshotMap(),this.buildContent(),this.selection=null}hoverObject(t){}selectObject(t){this.selection=t,this.isShowing()&&this.update()}setLayerTree(t){}wasShown(){super.wasShown(),this.registerCSSFiles([layerDetailsViewStyles]),this.update()}onScrollRectClicked(t,e){1===e.which&&this.selection&&this.layerViewHost.selectObject(new ScrollRectSelection(this.selection.layer(),t))}invokeProfilerLink(){if(!this.selection)return;const t="Snapshot"===this.selection.type()?this.selection:this.layerSnapshotMap.get(this.selection.layer());t&&this.dispatchEventToListeners(Events.PaintProfilerRequested,t)}createScrollRectElement(t,e){e&&UI.UIUtils.createTextChild(this.scrollRectsCell,", ");const i=this.scrollRectsCell.createChild("span","scroll-rect");this.selection&&this.selection.scrollRectIndex===e&&i.classList.add("active"),i.textContent=i18nString(UIStrings.scrollRectangleDimensions,{PH1:String(slowScrollRectNames.get(t.type)?.()),PH2:t.rect.width,PH3:t.rect.height,PH4:t.rect.x,PH5:t.rect.y}),i.addEventListener("click",this.onScrollRectClicked.bind(this,e),!1)}formatStickyAncestorLayer(t,e){if(!e)return"";const i=e.nodeForSelfOrAncestor(),n=i?i.simpleSelector():i18nString(UIStrings.unnamed);return i18nString(UIStrings.stickyAncenstorLayersS,{PH1:t,PH2:n,PH3:e.id()})}createStickyAncestorChild(t,e){if(!e)return;UI.UIUtils.createTextChild(this.stickyPositionConstraintCell,", ");this.stickyPositionConstraintCell.createChild("span").textContent=this.formatStickyAncestorLayer(t,e)}populateStickyPositionConstraintCell(t){if(this.stickyPositionConstraintCell.removeChildren(),!t)return;const e=t.stickyBoxRect();this.stickyPositionConstraintCell.createChild("span").textContent=i18nString(UIStrings.stickyBoxRectangleDimensions,{PH1:e.width,PH2:e.height,PH3:e.x,PH4:e.y}),UI.UIUtils.createTextChild(this.stickyPositionConstraintCell,", ");const i=t.containingBlockRect();this.stickyPositionConstraintCell.createChild("span").textContent=i18nString(UIStrings.containingBlocRectangleDimensions,{PH1:i.width,PH2:i.height,PH3:i.x,PH4:i.y}),this.createStickyAncestorChild(i18nString(UIStrings.nearestLayerShiftingStickyBox),t.nearestLayerShiftingStickyBox()),this.createStickyAncestorChild(i18nString(UIStrings.nearestLayerShiftingContaining),t.nearestLayerShiftingContainingBlock())}update(){const t=this.selection&&this.selection.layer();if(!t)return this.tableElement.remove(),this.paintProfilerLink.remove(),void this.emptyWidget.show(this.contentElement);this.emptyWidget.detach(),this.contentElement.appendChild(this.tableElement),this.contentElement.appendChild(this.paintProfilerLink),this.sizeCell.textContent=i18nString(UIStrings.updateRectangleDimensions,{PH1:t.width(),PH2:t.height(),PH3:t.offsetX(),PH4:t.offsetY()}),this.paintCountCell.parentElement&&this.paintCountCell.parentElement.classList.toggle("hidden",!t.paintCount()),this.paintCountCell.textContent=String(t.paintCount()),this.memoryEstimateCell.textContent=Platform.NumberUtilities.bytesToString(t.gpuMemoryUsage()),t.requestCompositingReasons().then(this.updateCompositingReasons.bind(this)),this.scrollRectsCell.removeChildren(),t.scrollRects().forEach(this.createScrollRectElement.bind(this)),this.populateStickyPositionConstraintCell(t.stickyPositionConstraint());const e=this.selection&&"Snapshot"===this.selection.type()?this.selection.snapshot():null;this.paintProfilerLink.classList.toggle("hidden",!(this.layerSnapshotMap.has(t)||e))}buildContent(){this.tableElement=this.contentElement.createChild("table"),this.tbodyElement=this.tableElement.createChild("tbody"),this.sizeCell=this.createRow(i18nString(UIStrings.size)),this.compositingReasonsCell=this.createRow(i18nString(UIStrings.compositingReasons)),this.memoryEstimateCell=this.createRow(i18nString(UIStrings.memoryEstimate)),this.paintCountCell=this.createRow(i18nString(UIStrings.paintCount)),this.scrollRectsCell=this.createRow(i18nString(UIStrings.slowScrollRegions)),this.stickyPositionConstraintCell=this.createRow(i18nString(UIStrings.stickyPositionConstraint)),this.paintProfilerLink=this.contentElement.createChild("span","hidden devtools-link link-margin"),UI.ARIAUtils.markAsLink(this.paintProfilerLink),this.paintProfilerLink.textContent=i18nString(UIStrings.paintProfiler),this.paintProfilerLink.tabIndex=0,this.paintProfilerLink.addEventListener("click",(t=>{t.consume(!0),this.invokeProfilerLink()})),this.paintProfilerLink.addEventListener("keydown",(t=>{"Enter"===t.key&&(t.consume(),this.invokeProfilerLink())}))}createRow(t){const e=this.tbodyElement.createChild("tr");return e.createChild("td").textContent=t,e.createChild("td")}updateCompositingReasons(t){if(!t||!t.length)return void(this.compositingReasonsCell.textContent="n/a");this.compositingReasonsCell.removeChildren();const e=this.compositingReasonsCell.createChild("ul");for(const i of t)e.createChild("li").textContent=i}}export var Events;!function(t){t.PaintProfilerRequested="PaintProfilerRequested"}(Events||(Events={}));export const slowScrollRectNames=new Map([[SDK.LayerTreeBase.Layer.ScrollRectType.NonFastScrollable,i18nLazyString(UIStrings.nonFastScrollable)],[SDK.LayerTreeBase.Layer.ScrollRectType.TouchEventHandler,i18nLazyString(UIStrings.touchEventHandler)],[SDK.LayerTreeBase.Layer.ScrollRectType.WheelEventHandler,i18nLazyString(UIStrings.wheelEventHandler)],[SDK.LayerTreeBase.Layer.ScrollRectType.RepaintsOnScroll,i18nLazyString(UIStrings.repaintsOnScroll)],[SDK.LayerTreeBase.Layer.ScrollRectType.MainThreadScrollingReason,i18nLazyString(UIStrings.mainThreadScrollingReason)]]);