@react-native/debugger-frontend 0.73.0

package/dist/third-party/front_end/panels/layer_viewer/layer_viewer.js

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as t from"../../core/i18n/i18n.js";import*as i from"../../core/platform/platform.js";import*as s from"../../core/sdk/sdk.js";import*as r from"../../ui/legacy/legacy.js";import*as n from"../../ui/legacy/components/perf_ui/perf_ui.js";const a=new CSSStyleSheet;a.replaceSync("table td{padding-left:8px}table td:first-child{font-weight:bold}.scroll-rect.active{--override-active-rect-color:rgb(100 100 100/20%);background-color:var(--override-active-rect-color)}.-theme-with-dark-background .scroll-rect.active,\n:host-context(.-theme-with-dark-background) .scroll-rect.active{--override-active-rect-color:rgb(155 155 155/20%)}ul{list-style:none;padding-inline-start:0;margin-block-start:0;margin-block-end:0}.devtools-link.link-margin{margin:8px;display:inline-block}\n/*# sourceURL=layerDetailsView.css */\n");const o={showInternalLayers:"Show internal layers"},l=t.i18n.registerUIStrings("panels/layer_viewer/LayerViewHost.ts",o),h=t.i18n.getLocalizedString.bind(void 0,l);class c{typeInternal;layerInternal;constructor(e,t){this.typeInternal=e,this.layerInternal=t}static isEqual(e,t){return e&&t?e.isEqual(t):e===t}type(){return this.typeInternal}layer(){return this.layerInternal}isEqual(e){return!1}}class d extends c{constructor(e){console.assert(Boolean(e),"LayerSelection with empty layer"),super("Layer",e)}isEqual(e){return"Layer"===e.typeInternal&&e.layer().id()===this.layer().id()}}class u extends c{scrollRectIndex;constructor(e,t){super("ScrollRect",e),this.scrollRectIndex=t}isEqual(e){return"ScrollRect"===e.typeInternal&&this.layer().id()===e.layer().id()&&this.scrollRectIndex===e.scrollRectIndex}}class p extends c{snapshotInternal;constructor(e,t){super("Snapshot",e),this.snapshotInternal=t}isEqual(e){return"Snapshot"===e.typeInternal&&this.layer().id()===e.layer().id()&&this.snapshotInternal===e.snapshotInternal}snapshot(){return this.snapshotInternal}}var m=Object.freeze({__proto__:null,LayerView:class{},Selection:c,LayerSelection:d,ScrollRectSelection:u,SnapshotSelection:p,LayerViewHost:class{views;selectedObject;hoveredObject;showInternalLayersSettingInternal;snapshotLayers;target;constructor(){this.views=[],this.selectedObject=null,this.hoveredObject=null,this.showInternalLayersSettingInternal=e.Settings.Settings.instance().createSetting("layersShowInternalLayers",!1),this.snapshotLayers=new Map}registerView(e){this.views.push(e)}setLayerSnapshotMap(e){this.snapshotLayers=e}getLayerSnapshotMap(){return this.snapshotLayers}setLayerTree(e){if(!e)return;this.target=e.target();const t=this.selectedObject&&this.selectedObject.layer();!t||e&&e.layerById(t.id())||this.selectObject(null);const i=this.hoveredObject&&this.hoveredObject.layer();!i||e&&e.layerById(i.id())||this.hoverObject(null);for(const t of this.views)t.setLayerTree(e)}hoverObject(e){if(c.isEqual(this.hoveredObject,e))return;this.hoveredObject=e;const t=e&&e.layer();this.toggleNodeHighlight(t?t.nodeForSelfOrAncestor():null);for(const t of this.views)t.hoverObject(e)}selectObject(e){if(!c.isEqual(this.selectedObject,e)){this.selectedObject=e;for(const t of this.views)t.selectObject(e)}}selection(){return this.selectedObject}showContextMenu(e,t){e.defaultSection().appendCheckboxItem(h(o.showInternalLayers),this.toggleShowInternalLayers.bind(this),this.showInternalLayersSettingInternal.get());const i=t&&t.layer()&&t.layer().nodeForSelfOrAncestor();i&&e.appendApplicableItems(i),e.show()}showInternalLayersSetting(){return this.showInternalLayersSettingInternal}toggleShowInternalLayers(){this.showInternalLayersSettingInternal.set(!this.showInternalLayersSettingInternal.get())}toggleNodeHighlight(e){e?e.highlightForTwoSeconds():s.OverlayModel.OverlayModel.hideDOMNodeHighlight()}}});const g={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"},y=t.i18n.registerUIStrings("panels/layer_viewer/LayerDetailsView.ts",g),f=t.i18n.getLocalizedString.bind(void 0,y),w=t.i18n.getLazilyComputedLocalizedString.bind(void 0,y);class v extends(e.ObjectWrapper.eventMixin(r.Widget.Widget)){layerViewHost;emptyWidget;layerSnapshotMap;tableElement;tbodyElement;sizeCell;compositingReasonsCell;memoryEstimateCell;paintCountCell;scrollRectsCell;stickyPositionConstraintCell;paintProfilerLink;selection;constructor(e){super(!0),this.layerViewHost=e,this.layerViewHost.registerView(this),this.emptyWidget=new r.EmptyWidget.EmptyWidget(f(g.selectALayerToSeeItsDetails)),this.layerSnapshotMap=this.layerViewHost.getLayerSnapshotMap(),this.buildContent(),this.selection=null}hoverObject(e){}selectObject(e){this.selection=e,this.isShowing()&&this.update()}setLayerTree(e){}wasShown(){super.wasShown(),this.registerCSSFiles([a]),this.update()}onScrollRectClicked(e,t){1===t.which&&this.selection&&this.layerViewHost.selectObject(new u(this.selection.layer(),e))}invokeProfilerLink(){if(!this.selection)return;const e="Snapshot"===this.selection.type()?this.selection:this.layerSnapshotMap.get(this.selection.layer());e&&this.dispatchEventToListeners(C.PaintProfilerRequested,e)}createScrollRectElement(e,t){t&&r.UIUtils.createTextChild(this.scrollRectsCell,", ");const i=this.scrollRectsCell.createChild("span","scroll-rect");this.selection&&this.selection.scrollRectIndex===t&&i.classList.add("active"),i.textContent=f(g.scrollRectangleDimensions,{PH1:String(S.get(e.type)?.()),PH2:e.rect.width,PH3:e.rect.height,PH4:e.rect.x,PH5:e.rect.y}),i.addEventListener("click",this.onScrollRectClicked.bind(this,t),!1)}formatStickyAncestorLayer(e,t){if(!t)return"";const i=t.nodeForSelfOrAncestor(),s=i?i.simpleSelector():f(g.unnamed);return f(g.stickyAncenstorLayersS,{PH1:e,PH2:s,PH3:t.id()})}createStickyAncestorChild(e,t){if(!t)return;r.UIUtils.createTextChild(this.stickyPositionConstraintCell,", ");this.stickyPositionConstraintCell.createChild("span").textContent=this.formatStickyAncestorLayer(e,t)}populateStickyPositionConstraintCell(e){if(this.stickyPositionConstraintCell.removeChildren(),!e)return;const t=e.stickyBoxRect();this.stickyPositionConstraintCell.createChild("span").textContent=f(g.stickyBoxRectangleDimensions,{PH1:t.width,PH2:t.height,PH3:t.x,PH4:t.y}),r.UIUtils.createTextChild(this.stickyPositionConstraintCell,", ");const i=e.containingBlockRect();this.stickyPositionConstraintCell.createChild("span").textContent=f(g.containingBlocRectangleDimensions,{PH1:i.width,PH2:i.height,PH3:i.x,PH4:i.y}),this.createStickyAncestorChild(f(g.nearestLayerShiftingStickyBox),e.nearestLayerShiftingStickyBox()),this.createStickyAncestorChild(f(g.nearestLayerShiftingContaining),e.nearestLayerShiftingContainingBlock())}update(){const e=this.selection&&this.selection.layer();if(!e)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=f(g.updateRectangleDimensions,{PH1:e.width(),PH2:e.height(),PH3:e.offsetX(),PH4:e.offsetY()}),this.paintCountCell.parentElement&&this.paintCountCell.parentElement.classList.toggle("hidden",!e.paintCount()),this.paintCountCell.textContent=String(e.paintCount()),this.memoryEstimateCell.textContent=i.NumberUtilities.bytesToString(e.gpuMemoryUsage()),e.requestCompositingReasons().then(this.updateCompositingReasons.bind(this)),this.scrollRectsCell.removeChildren(),e.scrollRects().forEach(this.createScrollRectElement.bind(this)),this.populateStickyPositionConstraintCell(e.stickyPositionConstraint());const t=this.selection&&"Snapshot"===this.selection.type()?this.selection.snapshot():null;this.paintProfilerLink.classList.toggle("hidden",!(this.layerSnapshotMap.has(e)||t))}buildContent(){this.tableElement=this.contentElement.createChild("table"),this.tbodyElement=this.tableElement.createChild("tbody"),this.sizeCell=this.createRow(f(g.size)),this.compositingReasonsCell=this.createRow(f(g.compositingReasons)),this.memoryEstimateCell=this.createRow(f(g.memoryEstimate)),this.paintCountCell=this.createRow(f(g.paintCount)),this.scrollRectsCell=this.createRow(f(g.slowScrollRegions)),this.stickyPositionConstraintCell=this.createRow(f(g.stickyPositionConstraint)),this.paintProfilerLink=this.contentElement.createChild("span","hidden devtools-link link-margin"),r.ARIAUtils.markAsLink(this.paintProfilerLink),this.paintProfilerLink.textContent=f(g.paintProfiler),this.paintProfilerLink.tabIndex=0,this.paintProfilerLink.addEventListener("click",(e=>{e.consume(!0),this.invokeProfilerLink()})),this.paintProfilerLink.addEventListener("keydown",(e=>{"Enter"===e.key&&(e.consume(),this.invokeProfilerLink())}))}createRow(e){const t=this.tbodyElement.createChild("tr");return t.createChild("td").textContent=e,t.createChild("td")}updateCompositingReasons(e){if(!e||!e.length)return void(this.compositingReasonsCell.textContent="n/a");this.compositingReasonsCell.removeChildren();const t=this.compositingReasonsCell.createChild("ul");for(const i of e)t.createChild("li").textContent=i}}var C;(C||(C={})).PaintProfilerRequested="PaintProfilerRequested";const S=new Map([[s.LayerTreeBase.Layer.ScrollRectType.NonFastScrollable,w(g.nonFastScrollable)],[s.LayerTreeBase.Layer.ScrollRectType.TouchEventHandler,w(g.touchEventHandler)],[s.LayerTreeBase.Layer.ScrollRectType.WheelEventHandler,w(g.wheelEventHandler)],[s.LayerTreeBase.Layer.ScrollRectType.RepaintsOnScroll,w(g.repaintsOnScroll)],[s.LayerTreeBase.Layer.ScrollRectType.MainThreadScrollingReason,w(g.mainThreadScrollingReason)]]);var b=Object.freeze({__proto__:null,LayerDetailsView:v,get Events(){return C},slowScrollRectNames:S});const T={layersTreePane:"Layers Tree Pane",showPaintProfiler:"Show Paint Profiler",updateChildDimension:" ({PH1} × {PH2})"},x=t.i18n.registerUIStrings("panels/layer_viewer/LayerTreeOutline.ts",T),P=t.i18n.getLocalizedString.bind(void 0,x);class L extends(e.ObjectWrapper.eventMixin(r.TreeOutline.TreeOutline)){layerViewHost;treeOutline;lastHoveredNode;element;layerTree;layerSnapshotMap;constructor(e){super(),this.layerViewHost=e,this.layerViewHost.registerView(this),this.treeOutline=new r.TreeOutline.TreeOutlineInShadow,this.treeOutline.element.classList.add("layer-tree","overflow-auto"),this.treeOutline.element.addEventListener("mousemove",this.onMouseMove.bind(this),!1),this.treeOutline.element.addEventListener("mouseout",this.onMouseMove.bind(this),!1),this.treeOutline.element.addEventListener("contextmenu",this.onContextMenu.bind(this),!0),r.ARIAUtils.setLabel(this.treeOutline.contentElement,P(T.layersTreePane)),this.lastHoveredNode=null,this.element=this.treeOutline.element,this.layerViewHost.showInternalLayersSetting().addChangeListener(this.update,this)}focus(){this.treeOutline.focus()}selectObject(e){this.hoverObject(null);const t=e&&e.layer(),i=t&&E.get(t);i?i.revealAndSelect(!0):this.treeOutline.selectedTreeElement&&this.treeOutline.selectedTreeElement.deselect()}hoverObject(e){const t=e&&e.layer(),i=t&&E.get(t);i!==this.lastHoveredNode&&(this.lastHoveredNode&&this.lastHoveredNode.setHovered(!1),i&&i.setHovered(!0),this.lastHoveredNode=i)}setLayerTree(e){this.layerTree=e,this.update()}update(){const e=this.layerViewHost.showInternalLayersSetting().get(),t=new Map;let i=null;this.layerTree&&(e||(i=this.layerTree.contentRoot()),i||(i=this.layerTree.root())),i&&this.layerTree&&this.layerTree.forEachLayer(function(s){if(!s.drawsContent()&&!e)return;t.get(s)&&console.assert(!1,"Duplicate layer: "+s.id()),t.set(s,!0);let r=E.get(s)||null,n=s.parent();for(;n&&n!==i&&!n.drawsContent()&&!e;)n=n.parent();const a=s===i?this.treeOutline.rootElement():n&&E.get(n);if(a)if(r){if(r.parent!==a){const e=this.treeOutline.selectedTreeElement;r.parent&&r.parent.removeChild(r),a.appendChild(r),e&&e!==this.treeOutline.selectedTreeElement&&e.select()}r.update()}else r=new R(this,s),a.appendChild(r),s.drawsContent()||r.expand();else console.assert(!1,"Parent is not in the tree")}.bind(this),i);for(let e=this.treeOutline.rootElement().firstChild();e instanceof R&&!e.root;)if(t.get(e.layer))e=e.traverseNextTreeElement(!1);else{const t=e.nextSibling||e.parent;e.parent&&e.parent.removeChild(e),e===this.lastHoveredNode&&(this.lastHoveredNode=null),e=t}if(!this.treeOutline.selectedTreeElement&&this.layerTree){const e=this.layerTree.contentRoot()||this.layerTree.root();if(e){const t=E.get(e);t&&t.revealAndSelect(!0)}}}onMouseMove(e){const t=this.treeOutline.treeElementFromEvent(e);t!==this.lastHoveredNode&&this.layerViewHost.hoverObject(this.selectionForNode(t))}selectedNodeChanged(e){this.layerViewHost.selectObject(this.selectionForNode(e))}onContextMenu(e){const t=this.selectionForNode(this.treeOutline.treeElementFromEvent(e)),i=new r.ContextMenu.ContextMenu(e),s=t&&t.layer();s&&(this.layerSnapshotMap=this.layerViewHost.getLayerSnapshotMap(),this.layerSnapshotMap.has(s)&&i.defaultSection().appendItem(P(T.showPaintProfiler),(()=>this.dispatchEventToListeners("PaintProfilerRequested",t)),!1)),this.layerViewHost.showContextMenu(i,t)}selectionForNode(e){return e&&e.layer?new d(e.layer):null}}class R extends r.TreeOutline.TreeElement{treeOutlineInternal;layer;constructor(e,t){super(),this.treeOutlineInternal=e,this.layer=t,E.set(t,this),this.update()}update(){const e=this.layer.nodeForSelfOrAncestor(),t=document.createDocumentFragment();r.UIUtils.createTextChild(t,e?e.simpleSelector():"#"+this.layer.id());t.createChild("span","dimmed").textContent=P(T.updateChildDimension,{PH1:this.layer.width(),PH2:this.layer.height()}),this.title=t}onselect(){return this.treeOutlineInternal.selectedNodeChanged(this),!1}setHovered(e){this.listItemElement.classList.toggle("hovered",e)}}const E=new WeakMap;var I=Object.freeze({__proto__:null,LayerTreeOutline:L,LayerTreeElement:R,layerToTreeElement:E});const O=new CSSStyleSheet;O.replaceSync(".layers-3d-view{overflow:hidden;user-select:none}.toolbar{background-color:var(--color-background-elevation-1);border-bottom:var(--legacy-divider-border)}canvas{flex:1 1}.layers-3d-view > canvas:focus-visible{outline:auto 5px -webkit-focus-ring-color}\n/*# sourceURL=layers3DView.css */\n");const M={panModeX:"Pan mode (X)",rotateModeV:"Rotate mode (V)",resetTransform:"Reset transform (0)"},B=t.i18n.registerUIStrings("panels/layer_viewer/TransformController.ts",M),H=t.i18n.getLocalizedString.bind(void 0,B);class D extends e.ObjectWrapper.ObjectWrapper{mode;scaleInternal;offsetXInternal;offsetYInternal;rotateXInternal;rotateYInternal;oldRotateX;oldRotateY;originX;originY;element;minScale;maxScale;controlPanelToolbar;modeButtons;constructor(e,t){if(super(),this.scaleInternal=1,this.offsetXInternal=0,this.offsetYInternal=0,this.rotateXInternal=0,this.rotateYInternal=0,this.oldRotateX=0,this.oldRotateY=0,this.originX=0,this.originY=0,this.element=e,this.registerShortcuts(),r.UIUtils.installDragHandle(e,this.onDragStart.bind(this),this.onDrag.bind(this),this.onDragEnd.bind(this),"move",null),e.addEventListener("wheel",this.onMouseWheel.bind(this),!1),this.minScale=0,this.maxScale=1/0,this.controlPanelToolbar=new r.Toolbar.Toolbar("transform-control-panel"),this.modeButtons={},!t){const e=new r.Toolbar.ToolbarToggle(H(M.panModeX),"3d-pan");e.addEventListener(r.Toolbar.ToolbarButton.Events.Click,this.setMode.bind(this,"Pan")),this.modeButtons.Pan=e,this.controlPanelToolbar.appendToolbarItem(e);const t=new r.Toolbar.ToolbarToggle(H(M.rotateModeV),"3d-rotate");t.addEventListener(r.Toolbar.ToolbarButton.Events.Click,this.setMode.bind(this,"Rotate")),this.modeButtons.Rotate=t,this.controlPanelToolbar.appendToolbarItem(t)}this.setMode("Pan");const i=new r.Toolbar.ToolbarButton(H(M.resetTransform),"3d-center");i.addEventListener(r.Toolbar.ToolbarButton.Events.Click,this.resetAndNotify.bind(this,void 0)),this.controlPanelToolbar.appendToolbarItem(i),this.reset()}toolbar(){return this.controlPanelToolbar}registerShortcuts(){r.ShortcutRegistry.ShortcutRegistry.instance().addShortcutListener(this.element,{"layers.reset-view":async()=>(this.resetAndNotify(),!0),"layers.pan-mode":async()=>(this.setMode("Pan"),!0),"layers.rotate-mode":async()=>(this.setMode("Rotate"),!0),"layers.zoom-in":this.onKeyboardZoom.bind(this,1.1),"layers.zoom-out":this.onKeyboardZoom.bind(this,1/1.1),"layers.up":this.onKeyboardPanOrRotate.bind(this,0,-1),"layers.down":this.onKeyboardPanOrRotate.bind(this,0,1),"layers.left":this.onKeyboardPanOrRotate.bind(this,-1,0),"layers.right":this.onKeyboardPanOrRotate.bind(this,1,0)})}postChangeEvent(){this.dispatchEventToListeners(k.TransformChanged)}reset(){this.scaleInternal=1,this.offsetXInternal=0,this.offsetYInternal=0,this.rotateXInternal=0,this.rotateYInternal=0}setMode(e){this.mode!==e&&(this.mode=e,this.updateModeButtons())}updateModeButtons(){for(const e in this.modeButtons)this.modeButtons[e].setToggled(e===this.mode)}resetAndNotify(e){this.reset(),this.postChangeEvent(),e&&e.preventDefault(),this.element.focus()}setScaleConstraints(e,t){this.minScale=e,this.maxScale=t,this.scaleInternal=i.NumberUtilities.clamp(this.scaleInternal,e,t)}clampOffsets(e,t,s,r){this.offsetXInternal=i.NumberUtilities.clamp(this.offsetXInternal,e,t),this.offsetYInternal=i.NumberUtilities.clamp(this.offsetYInternal,s,r)}scale(){return this.scaleInternal}offsetX(){return this.offsetXInternal}offsetY(){return this.offsetYInternal}rotateX(){return this.rotateXInternal}rotateY(){return this.rotateYInternal}onScale(e,t,s){e=i.NumberUtilities.clamp(this.scaleInternal*e,this.minScale,this.maxScale)/this.scaleInternal,this.scaleInternal*=e,this.offsetXInternal-=(t-this.offsetXInternal)*(e-1),this.offsetYInternal-=(s-this.offsetYInternal)*(e-1),this.postChangeEvent()}onPan(e,t){this.offsetXInternal+=e,this.offsetYInternal+=t,this.postChangeEvent()}onRotate(e,t){this.rotateXInternal=e,this.rotateYInternal=t,this.postChangeEvent()}async onKeyboardZoom(e){return this.onScale(e,this.element.clientWidth/2,this.element.clientHeight/2),!0}async onKeyboardPanOrRotate(e,t){return"Rotate"===this.mode?this.onRotate(this.rotateXInternal+5*t,this.rotateYInternal+5*e):this.onPan(6*e,6*t),!0}onMouseWheel(e){const t=e,i=Math.pow(1.1,-t.deltaY*(1/53));this.onScale(i,t.clientX-this.element.getBoundingClientRect().left,t.clientY-this.element.getBoundingClientRect().top)}onDrag(e){const{clientX:t,clientY:i}=e;"Rotate"===this.mode?this.onRotate(this.oldRotateX+(this.originY-i)/this.element.clientHeight*180,this.oldRotateY-(this.originX-t)/this.element.clientWidth*180):(this.onPan(t-this.originX,i-this.originY),this.originX=t,this.originY=i)}onDragStart(e){return this.element.focus(),this.originX=e.clientX,this.originY=e.clientY,this.oldRotateX=this.rotateXInternal,this.oldRotateY=this.rotateYInternal,!0}onDragEnd(){this.originX=0,this.originY=0,this.oldRotateX=0,this.oldRotateY=0}}var k;(k||(k={})).TransformChanged="TransformChanged";var W=Object.freeze({__proto__:null,TransformController:D,get Events(){return k}});const A={layerInformationIsNotYet:"Layer information is not yet available.",dLayersView:"3D Layers View",cantDisplayLayers:"Can't display layers,",webglSupportIsDisabledInYour:"WebGL support is disabled in your browser.",checkSForPossibleReasons:"Check {PH1} for possible reasons.",slowScrollRects:"Slow scroll rects",paints:"Paints",resetView:"Reset View",showPaintProfiler:"Show Paint Profiler"},V=t.i18n.registerUIStrings("panels/layer_viewer/Layers3DView.ts",A),U=t.i18n.getLocalizedString.bind(void 0,V),F=new Map,_=new Map,X=new Map,N=new Map,j=new Map,Y=new Map;class z extends(e.ObjectWrapper.eventMixin(r.Widget.VBox)){failBanner;layerViewHost;transformController;canvasElement;lastSelection;layerTree;textureManager;chromeTextures;rects;snapshotLayers;shaderProgram;oldTextureScale;depthByLayerId;visibleLayers;maxDepth;scale;layerTexture;projectionMatrix;whiteTexture;gl;dimensionsForAutoscale;needsUpdate;panelToolbar;showSlowScrollRectsSetting;showPaintsSetting;mouseDownX;mouseDownY;constructor(e){super(!0),this.contentElement.classList.add("layers-3d-view"),this.failBanner=new r.Widget.VBox,this.failBanner.element.classList.add("full-widget-dimmed-banner"),r.UIUtils.createTextChild(this.failBanner.element,U(A.layerInformationIsNotYet)),this.layerViewHost=e,this.layerViewHost.registerView(this),this.transformController=new D(this.contentElement),this.transformController.addEventListener(k.TransformChanged,this.update,this),this.initToolbar(),this.canvasElement=this.contentElement.createChild("canvas"),this.canvasElement.tabIndex=0,this.canvasElement.addEventListener("dblclick",this.onDoubleClick.bind(this),!1),this.canvasElement.addEventListener("mousedown",this.onMouseDown.bind(this),!1),this.canvasElement.addEventListener("mouseup",this.onMouseUp.bind(this),!1),this.canvasElement.addEventListener("mouseleave",this.onMouseMove.bind(this),!1),this.canvasElement.addEventListener("mousemove",this.onMouseMove.bind(this),!1),this.canvasElement.addEventListener("contextmenu",this.onContextMenu.bind(this),!1),r.ARIAUtils.setLabel(this.canvasElement,U(A.dLayersView)),this.lastSelection={},this.layerTree=null,this.textureManager=new le(this.update.bind(this)),this.chromeTextures=[],this.rects=[],this.snapshotLayers=new Map,this.layerViewHost.setLayerSnapshotMap(this.snapshotLayers),this.layerViewHost.showInternalLayersSetting().addChangeListener(this.update,this)}setLayerTree(e){this.layerTree=e,this.layerTexture=null,delete this.oldTextureScale,this.showPaints()&&this.textureManager.setLayerTree(e),this.update()}showImageForLayer(e,t){if(!t)return this.layerTexture=null,void this.update();r.UIUtils.loadImage(t).then((t=>{const i=t&&le.createTextureForImage(this.gl||null,t);this.layerTexture=i?{layer:e,texture:i}:null,this.update()}))}onResize(){this.resizeCanvas(),this.update()}willHide(){this.textureManager.suspend()}wasShown(){this.textureManager.resume(),this.registerCSSFiles([O]),this.needsUpdate&&(this.resizeCanvas(),this.update())}updateLayerSnapshot(e){this.textureManager.layerNeedsUpdate(e)}setOutline(e,t){this.lastSelection[e]=t,this.update()}hoverObject(e){this.setOutline(G.Hovered,e)}selectObject(e){this.setOutline(G.Hovered,null),this.setOutline(G.Selected,e)}snapshotForSelection(e){if("Snapshot"===e.type()){const t=e.snapshot();return t.snapshot.addReference(),Promise.resolve(t)}if(e.layer()){const t=e.layer().snapshots()[0];if(void 0!==t)return t}return Promise.resolve(null)}initGL(e){const t=e.getContext("webgl");return t?(t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),t.enable(t.BLEND),t.clearColor(0,0,0,0),t.enable(t.DEPTH_TEST),t):null}createShader(e,t){if(!this.gl)return;const i=this.gl.createShader(e);i&&this.shaderProgram&&(this.gl.shaderSource(i,t),this.gl.compileShader(i),this.gl.attachShader(this.shaderProgram,i))}initShaders(){if(!this.gl)return;if(this.shaderProgram=this.gl.createProgram(),!this.shaderProgram)return;this.createShader(this.gl.FRAGMENT_SHADER,K),this.createShader(this.gl.VERTEX_SHADER,Q),this.gl.linkProgram(this.shaderProgram),this.gl.useProgram(this.shaderProgram);const e=this.gl.getAttribLocation(this.shaderProgram,"aVertexPosition");this.gl.enableVertexAttribArray(e),F.set(this.shaderProgram,e);const t=this.gl.getAttribLocation(this.shaderProgram,"aVertexColor");this.gl.enableVertexAttribArray(t),_.set(this.shaderProgram,t);const i=this.gl.getAttribLocation(this.shaderProgram,"aTextureCoord");this.gl.enableVertexAttribArray(i),X.set(this.shaderProgram,i);const s=this.gl.getUniformLocation(this.shaderProgram,"uPMatrix");N.set(this.shaderProgram,s);const r=this.gl.getUniformLocation(this.shaderProgram,"uSampler");j.set(this.shaderProgram,r)}resizeCanvas(){this.canvasElement.width=this.canvasElement.offsetWidth*window.devicePixelRatio,this.canvasElement.height=this.canvasElement.offsetHeight*window.devicePixelRatio}updateTransformAndConstraints(){const e=this.dimensionsForAutoscale||{width:0,height:0},t=this.layerTree?this.layerTree.viewportSize():null,s=t?t.width:e.width,n=t?t.height:e.height,a=this.canvasElement.width,o=this.canvasElement.height,l=.1*a,h=.1*o,c=(a-2*l)/s,d=(o-2*h)/n,u=Math.min(c,d),p=Math.min(s/e.width,n/e.width)/2;this.transformController.setScaleConstraints(p,10/u);const m=this.transformController.scale(),g=this.transformController.rotateX(),y=this.transformController.rotateY();this.scale=m*u;const f=i.NumberUtilities.clamp(this.scale,.1,1);f!==this.oldTextureScale&&(this.oldTextureScale=f,this.textureManager.setScale(f),this.dispatchEventToListeners(q.ScaleChanged,f));const w=(new WebKitCSSMatrix).scale(m,m,m).translate(a/2,o/2,0).rotate(g,y,0).scale(u,u,u).translate(-s/2,-n/2,0);let v;for(let e=0;e<this.rects.length;++e)v=r.Geometry.boundsForTransformedPoints(w,this.rects[e].vertices,v);v&&this.transformController.clampOffsets((l-v.maxX)/window.devicePixelRatio,(a-l-v.minX)/window.devicePixelRatio,(h-v.maxY)/window.devicePixelRatio,(o-h-v.minY)/window.devicePixelRatio);const C=this.transformController.offsetX()*window.devicePixelRatio,S=this.transformController.offsetY()*window.devicePixelRatio;this.projectionMatrix=(new WebKitCSSMatrix).translate(C,S,0).multiply(w);const b=(new WebKitCSSMatrix).scale(1,-1,-1).translate(-1,-1,0).scale(2/this.canvasElement.width,2/this.canvasElement.height,1e-6).multiply(this.projectionMatrix);if(this.shaderProgram){const e=N.get(this.shaderProgram);this.gl&&e&&this.gl.uniformMatrix4fv(e,!1,this.arrayFromMatrix(b))}}arrayFromMatrix(e){return new Float32Array([e.m11,e.m12,e.m13,e.m14,e.m21,e.m22,e.m23,e.m24,e.m31,e.m32,e.m33,e.m34,e.m41,e.m42,e.m43,e.m44])}initWhiteTexture(){if(!this.gl)return;this.whiteTexture=this.gl.createTexture(),this.gl.bindTexture(this.gl.TEXTURE_2D,this.whiteTexture);const e=new Uint8Array([255,255,255,255]);this.gl.texImage2D(this.gl.TEXTURE_2D,0,this.gl.RGBA,1,1,0,this.gl.RGBA,this.gl.UNSIGNED_BYTE,e)}initChromeTextures(){function e(e,t){r.UIUtils.loadImage(t).then((t=>{this.chromeTextures[e]=t&&le.createTextureForImage(this.gl||null,t)||void 0}))}e.call(this,0,"Images/chromeLeft.avif"),e.call(this,1,"Images/chromeMiddle.avif"),e.call(this,2,"Images/chromeRight.avif")}initGLIfNecessary(){return this.gl?this.gl:(this.gl=this.initGL(this.canvasElement),this.gl?(this.initShaders(),this.initWhiteTexture(),this.initChromeTextures(),this.textureManager.setContext(this.gl),this.gl):null)}calculateDepthsAndVisibility(){this.depthByLayerId=new Map;let e=0;const t=this.layerViewHost.showInternalLayersSetting().get();if(!this.layerTree)return;const i=t?this.layerTree.root():this.layerTree.contentRoot()||this.layerTree.root();if(!i)return;const s=[i];for(this.depthByLayerId.set(i.id(),0),this.visibleLayers=new Set;s.length>0;){const i=s.shift();if(!i)break;(t||i.drawsContent())&&this.visibleLayers.add(i);const r=i.children();for(let t=0;t<r.length;++t)this.depthByLayerId.set(r[t].id(),++e),s.push(r[t])}this.maxDepth=e}depthForLayer(e){return(this.depthByLayerId.get(e.id())||0)*ae}calculateScrollRectDepth(e,t){return this.depthForLayer(e)+t*oe+1}updateDimensionsForAutoscale(e){this.dimensionsForAutoscale||(this.dimensionsForAutoscale={width:0,height:0}),this.dimensionsForAutoscale.width=Math.max(e.width(),this.dimensionsForAutoscale.width),this.dimensionsForAutoscale.height=Math.max(e.height(),this.dimensionsForAutoscale.height)}calculateLayerRect(e){if(!this.visibleLayers.has(e))return;const t=new d(e),i=new he(t);i.setVertices(e.quad(),this.depthForLayer(e)),this.appendRect(i),this.updateDimensionsForAutoscale(e)}appendRect(e){const t=e.relatedObject,i=c.isEqual(this.lastSelection[G.Selected],t),s=c.isEqual(this.lastSelection[G.Hovered],t);if(i)e.borderColor=J;else if(s){e.borderColor=Z;const t=e.fillColor||[255,255,255,1],i=ie;e.fillColor=[t[0]*i[0]/255,t[1]*i[1]/255,t[2]*i[2]/255,t[3]*i[3]]}else e.borderColor=$;e.lineWidth=i?re:se,this.rects.push(e)}calculateLayerScrollRects(e){const t=e.scrollRects();for(let i=0;i<t.length;++i){const s=new u(e,i),r=new he(s);r.calculateVerticesFromRect(e,t[i].rect,this.calculateScrollRectDepth(e,i)),r.fillColor=te,this.appendRect(r)}}calculateLayerTileRects(e){const t=this.textureManager.tilesForLayer(e);for(let i=0;i<t.length;++i){const s=t[i];if(!s.texture)continue;const r=new p(e,{rect:s.rect,snapshot:s.snapshot}),n=new he(r);this.snapshotLayers.has(e)||this.snapshotLayers.set(e,r),n.calculateVerticesFromRect(e,s.rect,this.depthForLayer(e)+1),n.texture=s.texture,this.appendRect(n)}}calculateRects(){if(this.rects=[],this.snapshotLayers.clear(),this.dimensionsForAutoscale={width:0,height:0},this.layerTree&&this.layerTree.forEachLayer(this.calculateLayerRect.bind(this)),this.showSlowScrollRectsSetting&&this.showSlowScrollRectsSetting.get()&&this.layerTree&&this.layerTree.forEachLayer(this.calculateLayerScrollRects.bind(this)),this.layerTexture&&this.visibleLayers.has(this.layerTexture.layer)){const e=this.layerTexture.layer,t=new d(e),i=new he(t);i.setVertices(e.quad(),this.depthForLayer(e)),i.texture=this.layerTexture.texture,this.appendRect(i)}else this.showPaints()&&this.layerTree&&this.layerTree.forEachLayer(this.calculateLayerTileRects.bind(this))}makeColorsArray(e){let t=[];const i=[e[0]/255,e[1]/255,e[2]/255,e[3]];for(let e=0;e<4;e++)t=t.concat(i);return t}setVertexAttribute(e,t,i){const s=this.gl;if(!s)return;const r=s.createBuffer();s.bindBuffer(s.ARRAY_BUFFER,r),s.bufferData(s.ARRAY_BUFFER,new Float32Array(t),s.STATIC_DRAW),s.vertexAttribPointer(e,i,s.FLOAT,!1,0,0)}drawRectangle(e,t,i,s){const r=this.gl;if(i=i||[255,255,255,1],!this.shaderProgram)return;const n=F.get(this.shaderProgram),a=X.get(this.shaderProgram),o=_.get(this.shaderProgram);if(void 0!==n&&this.setVertexAttribute(n,e,3),void 0!==a&&this.setVertexAttribute(a,[0,1,1,1,1,0,0,0],2),void 0!==o&&this.setVertexAttribute(o,this.makeColorsArray(i),i.length),!r)return;const l=j.get(this.shaderProgram);s?l&&(r.activeTexture(r.TEXTURE0),r.bindTexture(r.TEXTURE_2D,s),r.uniform1i(l,0)):this.whiteTexture&&r.bindTexture(r.TEXTURE_2D,this.whiteTexture);const h=e.length/3;r.drawArrays(t,0,h)}drawTexture(e,t,i){this.gl&&this.drawRectangle(e,this.gl.TRIANGLE_FAN,i,t)}drawViewportAndChrome(){if(!this.layerTree)return;const t=this.layerTree.viewportSize();if(!t)return;const i=!e.Settings.Settings.instance().moduleSetting("frameViewerHideChromeWindow").get()&&this.chromeTextures.length>=3&&this.chromeTextures.indexOf(void 0)<0,s=(this.maxDepth+1)*ae,r=Math.ceil(ne*this.scale);let n=[t.width,0,s,t.width,t.height,s,0,t.height,s,0,0,s];if(!this.gl)return;if(this.gl.lineWidth(r),this.drawRectangle(n,i?this.gl.LINE_STRIP:this.gl.LINE_LOOP,ee),!i)return;const a=this.layerTree.viewportSize();if(!a)return;const o=ne/2,l=a.width+2*o;if(this.chromeTextures[0]&&this.chromeTextures[2]){const e=Y.get(this.chromeTextures[0])||{naturalHeight:0,naturalWidth:0},t=e.naturalHeight,i=Y.get(this.chromeTextures[2])||{naturalHeight:0,naturalWidth:0},r=l-e.naturalWidth-i.naturalWidth;let a=-o;const h=-t;for(let e=0;e<this.chromeTextures.length;++e){const i=this.chromeTextures[e];if(!i)continue;const o=Y.get(i);if(!o)continue;const c=1===e?r:o.naturalWidth;if(c<0||a+c>l)break;n=[a,h,s,a+c,h,s,a+c,h+t,s,a,h+t,s],this.drawTexture(n,this.chromeTextures[e]),a+=c}}}drawViewRect(e){if(!this.gl)return;const t=e.vertices;e.texture?this.drawTexture(t,e.texture,e.fillColor||void 0):e.fillColor&&this.drawRectangle(t,this.gl.TRIANGLE_FAN,e.fillColor),this.gl.lineWidth(e.lineWidth),e.borderColor&&this.drawRectangle(t,this.gl.LINE_LOOP,e.borderColor)}update(){if(!this.isShowing())return void(this.needsUpdate=!0);if(!this.layerTree||!this.layerTree.root())return void this.failBanner.show(this.contentElement);const e=this.initGLIfNecessary();if(!e)return this.failBanner.element.removeChildren(),this.failBanner.element.appendChild(this.webglDisabledBanner()),void this.failBanner.show(this.contentElement);this.failBanner.detach();const t=this.canvasElement.width,i=this.canvasElement.height;this.calculateDepthsAndVisibility(),this.calculateRects(),this.updateTransformAndConstraints(),e.viewport(0,0,t,i),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),this.rects.forEach(this.drawViewRect.bind(this)),this.drawViewportAndChrome()}webglDisabledBanner(){const e=this.contentElement.ownerDocument.createDocumentFragment();return e.createChild("div").textContent=U(A.cantDisplayLayers),e.createChild("div").textContent=U(A.webglSupportIsDisabledInYour),e.appendChild(t.i18n.getFormatLocalizedString(V,A.checkSForPossibleReasons,{PH1:r.XLink.XLink.create("about:gpu")})),e}selectionFromEventPoint(e){const t=e;if(!this.layerTree)return null;let i=1/0,s=null;const r=(new WebKitCSSMatrix).scale(1,-1,-1).translate(-1,-1,0).multiply(this.projectionMatrix),n=(t.clientX-this.canvasElement.getBoundingClientRect().left)*window.devicePixelRatio,a=-(t.clientY-this.canvasElement.getBoundingClientRect().top)*window.devicePixelRatio;return this.rects.forEach((function(e){if(!e.relatedObject)return;const t=e.intersectWithLine(r,n,a);t&&t<i&&(i=t,s=e.relatedObject)})),s}createVisibilitySetting(t,i,s,n){const a=e.Settings.Settings.instance().createSetting(i,s);return a.setTitle(t),a.addChangeListener(this.update,this),n.appendToolbarItem(new r.Toolbar.ToolbarSettingCheckbox(a)),a}initToolbar(){this.panelToolbar=this.transformController.toolbar(),this.contentElement.appendChild(this.panelToolbar.element),this.showSlowScrollRectsSetting=this.createVisibilitySetting(U(A.slowScrollRects),"frameViewerShowSlowScrollRects",!0,this.panelToolbar),this.showPaintsSetting=this.createVisibilitySetting(U(A.paints),"frameViewerShowPaints",!0,this.panelToolbar),this.showPaintsSetting.addChangeListener(this.updatePaints,this),e.Settings.Settings.instance().moduleSetting("frameViewerHideChromeWindow").addChangeListener(this.update,this)}onContextMenu(e){const t=new r.ContextMenu.ContextMenu(e);t.defaultSection().appendItem(U(A.resetView),(()=>this.transformController.resetAndNotify()),!1);const i=this.selectionFromEventPoint(e);i&&"Snapshot"===i.type()&&t.defaultSection().appendItem(U(A.showPaintProfiler),(()=>this.dispatchEventToListeners(q.PaintProfilerRequested,i)),!1),this.layerViewHost.showContextMenu(t,i)}onMouseMove(e){e.which||this.layerViewHost.hoverObject(this.selectionFromEventPoint(e))}onMouseDown(e){const t=e;this.mouseDownX=t.clientX,this.mouseDownY=t.clientY}onMouseUp(e){const t=e;this.mouseDownX&&Math.abs(t.clientX-this.mouseDownX)<6&&Math.abs(t.clientY-(this.mouseDownY||0))<6&&(this.canvasElement.focus(),this.layerViewHost.selectObject(this.selectionFromEventPoint(e))),delete this.mouseDownX,delete this.mouseDownY}onDoubleClick(e){const t=this.selectionFromEventPoint(e);t&&("Snapshot"===t.type()||t.layer())&&this.dispatchEventToListeners(q.PaintProfilerRequested,t),e.stopPropagation()}updatePaints(){this.showPaints()?(this.textureManager.setLayerTree(this.layerTree),this.textureManager.forceUpdate()):this.textureManager.reset(),this.update()}showPaints(){return!!this.showPaintsSetting&&this.showPaintsSetting.get()}}var G,q;!function(e){e.Hovered="hovered",e.Selected="selected"}(G||(G={})),function(e){e.PaintProfilerRequested="PaintProfilerRequested",e.ScaleChanged="ScaleChanged"}(q||(q={}));const K="precision mediump float;\nvarying vec4 vColor;\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nvoid main(void)\n{\n    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)) * vColor;\n}",Q="attribute vec3 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aVertexColor;\nuniform mat4 uPMatrix;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvoid main(void)\n{\ngl_Position = uPMatrix * vec4(aVertexPosition, 1.0);\nvColor = aVertexColor;\nvTextureCoord = aTextureCoord;\n}",Z=[0,0,255,1],J=[0,255,0,1],$=[0,0,0,1],ee=[160,160,160,1],te=[178,100,100,.6],ie=[200,200,255,1],se=1,re=2,ne=3,ae=20,oe=4;class le{textureUpdatedCallback;throttler;scale;active;queue;tilesByLayer;gl;constructor(t){this.textureUpdatedCallback=t,this.throttler=new e.Throttler.Throttler(0),this.scale=0,this.active=!1,this.reset()}static createTextureForImage(e,t){if(!e)throw new Error("WebGLRenderingContext not provided");const i=e.createTexture();if(!i)throw new Error("Unable to create texture");return Y.set(i,t),e.bindTexture(e.TEXTURE_2D,i),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,1),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),i}reset(){this.tilesByLayer&&this.setLayerTree(null),this.tilesByLayer=new Map,this.queue=[]}setContext(e){this.gl=e,this.scale&&this.updateTextures()}suspend(){this.active=!1}resume(){this.active=!0,this.queue.length&&this.update()}setLayerTree(e){const t=new Set,i=Array.from(this.tilesByLayer.keys());e&&e.forEachLayer((e=>{e.drawsContent()&&(t.add(e),this.tilesByLayer.has(e)||(this.tilesByLayer.set(e,[]),this.layerNeedsUpdate(e)))})),i.length||this.forceUpdate();for(const e of i){if(t.has(e))continue;const i=this.tilesByLayer.get(e);i&&i.forEach((e=>e.dispose())),this.tilesByLayer.delete(e)}}setSnapshotsForLayer(e,t){const i=new Map((this.tilesByLayer.get(e)||[]).map((e=>[e.snapshot,e]))),s=[],r=[];for(const e of t){const t=i.get(e.snapshot);t?(r.push(t),i.delete(e.snapshot)):s.push(new ce(e))}this.tilesByLayer.set(e,r.concat(s));for(const e of i.values())e.dispose();const n=this.gl;return n&&this.scale?Promise.all(s.map((e=>e.update(n,this.scale)))).then(this.textureUpdatedCallback):Promise.resolve()}setScale(e){this.scale&&this.scale>=e||(this.scale=e,this.updateTextures())}tilesForLayer(e){return this.tilesByLayer.get(e)||[]}layerNeedsUpdate(e){this.queue.indexOf(e)<0&&this.queue.push(e),this.active&&this.throttler.schedule(this.update.bind(this))}forceUpdate(){this.queue.forEach((e=>this.updateLayer(e))),this.queue=[],this.update()}update(){const e=this.queue.shift();return e?(this.queue.length&&this.throttler.schedule(this.update.bind(this)),this.updateLayer(e)):Promise.resolve()}updateLayer(e){return Promise.all(e.snapshots()).then((t=>this.setSnapshotsForLayer(e,t.filter((e=>null!==e)))))}updateTextures(){if(this.gl&&this.scale)for(const e of this.tilesByLayer.values())for(const t of e){const e=t.updateScale(this.gl,this.scale);e&&e.then(this.textureUpdatedCallback)}}}class he{relatedObject;lineWidth;borderColor;fillColor;texture;vertices;constructor(e){this.relatedObject=e,this.lineWidth=1,this.borderColor=null,this.fillColor=null,this.texture=null}setVertices(e,t){this.vertices=[e[0],e[1],t,e[2],e[3],t,e[4],e[5],t,e[6],e[7],t]}calculatePointOnQuad(e,t,i){const s=e[0],r=e[1],n=e[2],a=e[3],o=e[4],l=e[5],h=e[6],c=e[7],d=s+t*(n-s),u=r+t*(a-r);return[d+i*(h+t*(o-h)-d),u+i*(c+t*(l-c)-u)]}calculateVerticesFromRect(e,t,i){const s=e.quad(),r=t.x/e.width(),n=(t.x+t.width)/e.width(),a=t.y/e.height(),o=(t.y+t.height)/e.height(),l=this.calculatePointOnQuad(s,r,a).concat(this.calculatePointOnQuad(s,n,a)).concat(this.calculatePointOnQuad(s,n,o)).concat(this.calculatePointOnQuad(s,r,o));this.setVertices(l,i)}intersectWithLine(e,t,i){let s;const n=[];for(s=0;s<4;++s)n[s]=r.Geometry.multiplyVectorByMatrixAndNormalize(new r.Geometry.Vector(this.vertices[3*s],this.vertices[3*s+1],this.vertices[3*s+2]),e);const a=r.Geometry.crossProduct(r.Geometry.subtract(n[1],n[0]),r.Geometry.subtract(n[2],n[1])),o=a.x,l=a.y,h=a.z,c=-(-(o*n[0].x+l*n[0].y+h*n[0].z)+o*t+l*i)/h,d=new r.Geometry.Vector(t,i,c),u=n.map(r.Geometry.subtract.bind(null,d));for(s=0;s<u.length;++s){if(r.Geometry.scalarProduct(a,r.Geometry.crossProduct(u[s],u[(s+1)%u.length]))<0)return}return c}}class ce{snapshot;rect;scale;texture;gl;constructor(e){this.snapshot=e.snapshot,this.rect=e.rect,this.scale=0,this.texture=null}dispose(){this.snapshot.release(),this.texture&&(this.gl.deleteTexture(this.texture),this.texture=null)}updateScale(e,t){return this.texture&&this.scale>=t?null:this.update(e,t)}async update(e,t){this.gl=e,this.scale=t;const i=await this.snapshot.replay(t),s=i?await r.UIUtils.loadImage(i):null;this.texture=s?le.createTextureForImage(e,s):null}}var de=Object.freeze({__proto__:null,Layers3DView:z,get OutlineType(){return G},get Events(){return q},FragmentShader:K,VertexShader:Q,HoveredBorderColor:Z,SelectedBorderColor:J,BorderColor:$,ViewportBorderColor:ee,ScrollRectBackgroundColor:te,HoveredImageMaskColor:ie,BorderWidth:se,SelectedBorderWidth:re,ViewportBorderWidth:ne,LayerSpacing:ae,ScrollRectSpacing:oe,LayerTextureManager:le,Rectangle:he,Tile:ce});const ue=new CSSStyleSheet;ue.replaceSync(".paint-profiler-overview{background-color:var(--color-background)}.paint-profiler-canvas-container{flex:auto;position:relative}.paint-profiler-pie-chart{width:60px!important;height:60px!important;padding:2px;overflow:hidden;font-size:10px}.paint-profiler-canvas-container canvas{z-index:200;background-color:var(--color-background);opacity:95%;height:100%;width:100%}.paint-profiler-canvas-container .overview-grid-window-resizer{z-index:2000}\n/*# sourceURL=paintProfiler.css */\n");const pe={profiling:"Profiling…",shapes:"Shapes",bitmap:"Bitmap",text:"Text",misc:"Misc",profilingResults:"Profiling results",commandLog:"Command Log"},me=t.i18n.registerUIStrings("panels/layer_viewer/PaintProfilerView.ts",pe),ge=t.i18n.getLocalizedString.bind(void 0,me);let ye=null,fe=null;class we extends(e.ObjectWrapper.eventMixin(r.Widget.HBox)){canvasContainer;progressBanner;pieChart;showImageCallback;canvas;context;selectionWindowInternal;innerBarWidth;minBarHeight;barPaddingWidth;outerBarWidth;pendingScale;scale;samplesPerBar;log;snapshot;logCategories;profiles;updateImageTimer;constructor(e){super(!0),this.contentElement.classList.add("paint-profiler-overview"),this.canvasContainer=this.contentElement.createChild("div","paint-profiler-canvas-container"),this.progressBanner=this.contentElement.createChild("div","full-widget-dimmed-banner hidden"),this.progressBanner.textContent=ge(pe.profiling),this.pieChart=new n.PieChart.PieChart,this.populatePieChart(0,[]),this.pieChart.classList.add("paint-profiler-pie-chart"),this.contentElement.appendChild(this.pieChart),this.showImageCallback=e,this.canvas=this.canvasContainer.createChild("canvas","fill"),this.context=this.canvas.getContext("2d"),this.selectionWindowInternal=new n.OverviewGrid.Window(this.canvasContainer),this.selectionWindowInternal.addEventListener(n.OverviewGrid.Events.WindowChanged,this.onWindowChanged,this),this.innerBarWidth=4*window.devicePixelRatio,this.minBarHeight=window.devicePixelRatio,this.barPaddingWidth=2*window.devicePixelRatio,this.outerBarWidth=this.innerBarWidth+this.barPaddingWidth,this.pendingScale=1,this.scale=this.pendingScale,this.samplesPerBar=0,this.log=[],this.reset()}static categories(){return ye||(ye={shapes:new Te("shapes",ge(pe.shapes),"rgb(255, 161, 129)"),bitmap:new Te("bitmap",ge(pe.bitmap),"rgb(136, 196, 255)"),text:new Te("text",ge(pe.text),"rgb(180, 255, 137)"),misc:new Te("misc",ge(pe.misc),"rgb(206, 160, 255)")}),ye}static initLogItemCategories(){if(!fe){const e=we.categories(),t={};t.Clear=e.misc,t.DrawPaint=e.misc,t.DrawData=e.misc,t.SetMatrix=e.misc,t.PushCull=e.misc,t.PopCull=e.misc,t.Translate=e.misc,t.Scale=e.misc,t.Concat=e.misc,t.Restore=e.misc,t.SaveLayer=e.misc,t.Save=e.misc,t.BeginCommentGroup=e.misc,t.AddComment=e.misc,t.EndCommentGroup=e.misc,t.ClipRect=e.misc,t.ClipRRect=e.misc,t.ClipPath=e.misc,t.ClipRegion=e.misc,t.DrawPoints=e.shapes,t.DrawRect=e.shapes,t.DrawOval=e.shapes,t.DrawRRect=e.shapes,t.DrawPath=e.shapes,t.DrawVertices=e.shapes,t.DrawDRRect=e.shapes,t.DrawBitmap=e.bitmap,t.DrawBitmapRectToRect=e.bitmap,t.DrawBitmapMatrix=e.bitmap,t.DrawBitmapNine=e.bitmap,t.DrawSprite=e.bitmap,t.DrawPicture=e.bitmap,t.DrawText=e.text,t.DrawPosText=e.text,t.DrawPosTextH=e.text,t.DrawTextOnPath=e.text,fe=t}return fe}static categoryForLogItem(e){const t=i.StringUtilities.toTitleCase(e.method),s=we.initLogItemCategories();let r=s[t];return r||(r=we.categories().misc,s[t]=r),r}onResize(){this.update()}async setSnapshotAndLog(e,t,i){if(this.reset(),this.snapshot=e,this.snapshot&&this.snapshot.addReference(),this.log=t,this.logCategories=this.log.map(we.categoryForLogItem),!e)return this.update(),this.populatePieChart(0,[]),void this.selectionWindowInternal.setEnabled(!1);this.selectionWindowInternal.setEnabled(!0),this.progressBanner.classList.remove("hidden"),this.updateImage();const s=await e.profile(i);this.progressBanner.classList.add("hidden"),this.profiles=s,this.update(),this.updatePieChart()}setScale(e){const t=e>this.scale;this.pendingScale=Math.min(1,2*e),t&&this.snapshot&&this.updateImage()}update(){if(this.canvas.width=this.canvasContainer.clientWidth*window.devicePixelRatio,this.canvas.height=this.canvasContainer.clientHeight*window.devicePixelRatio,this.samplesPerBar=0,!this.profiles||!this.profiles.length||!this.logCategories)return;const e=Math.floor((this.canvas.width-2*this.barPaddingWidth)/this.outerBarWidth),t=this.log.length;this.samplesPerBar=Math.ceil(t/e);let i=0;const s=[],r=[];let n={};for(let e=0,a=0,o=0;e<t;){let l=this.logCategories[e]&&this.logCategories[e].name||"misc";const h=this.log[e].commandIndex;for(let e=0;e<this.profiles.length;e++){const t=this.profiles[e][h];o+=t,n[l]=(n[l]||0)+t}if(++e,e-a===this.samplesPerBar||e===t){const t=this.profiles.length*(e-a);for(l in o/=t,n)n[l]/=t;s.push(o),r.push(n),o>i&&(i=o),o=0,n={},a=e}}const a=4*window.devicePixelRatio,o=(this.canvas.height-a-this.minBarHeight)/i;for(let e=0;e<s.length;++e){for(const t in r[e])r[e][t]*=(s[e]*o+this.minBarHeight)/s[e];this.renderBar(e,r[e])}}renderBar(e,t){const i=we.categories();let s=0;const r=this.barPaddingWidth+e*this.outerBarWidth;for(const e in i){if(!t[e])continue;s+=t[e];const n=this.canvas.height-s;this.context.fillStyle=i[e].color,this.context.fillRect(r,n,this.innerBarWidth,t[e])}}onWindowChanged(){this.dispatchEventToListeners(ve.WindowChanged),this.updatePieChart(),this.updateImageTimer||(this.updateImageTimer=window.setTimeout(this.updateImage.bind(this),100))}updatePieChart(){const{total:e,slices:t}=this.calculatePieChart();this.populatePieChart(e,t)}calculatePieChart(){const e=this.selectionWindow();if(!this.profiles||!this.profiles.length||!e)return{total:0,slices:[]};let t=0;const i={};for(let s=e.left;s<e.right;++s){const e=this.log[s],r=we.categoryForLogItem(e);i[r.color]=i[r.color]||0;for(let s=0;s<this.profiles.length;++s){const n=this.profiles[s][e.commandIndex];t+=n,i[r.color]+=n}}const s=[];for(const e in i)s.push({value:i[e]/this.profiles.length,color:e,title:""});return{total:t/this.profiles.length,slices:s}}populatePieChart(e,t){this.pieChart.data={chartName:ge(pe.profilingResults),size:55,formatter:this.formatPieChartTime.bind(this),showLegend:!1,total:e,slices:t}}formatPieChartTime(e){return t.TimeUtilities.millisToString(1e3*e,!0)}selectionWindow(){if(!this.log)return null;const e=(this.selectionWindowInternal.windowLeft||0)*this.canvas.width,t=(this.selectionWindowInternal.windowRight||0)*this.canvas.width,s=Math.floor(e/this.outerBarWidth),r=Math.floor((t+this.innerBarWidth-this.barPaddingWidth/2)/this.outerBarWidth);return{left:i.NumberUtilities.clamp(s*this.samplesPerBar,0,this.log.length-1),right:i.NumberUtilities.clamp(r*this.samplesPerBar,0,this.log.length)}}updateImage(){let e,t;delete this.updateImageTimer;const i=this.selectionWindow();this.profiles&&this.profiles.length&&i&&(e=this.log[i.left].commandIndex,t=this.log[i.right-1].commandIndex);const s=this.pendingScale;this.snapshot&&this.snapshot.replay(s,e,t).then((e=>{e&&(this.scale=s,this.showImageCallback(e))}))}reset(){this.snapshot&&this.snapshot.release(),this.snapshot=null,this.profiles=null,this.selectionWindowInternal.reset(),this.selectionWindowInternal.setEnabled(!1)}wasShown(){super.wasShown(),this.registerCSSFiles([ue])}}var ve;!function(e){e.WindowChanged="WindowChanged"}(ve||(ve={}));class Ce extends r.ThrottledWidget.ThrottledWidget{treeOutline;log;treeItemCache;selectionWindow;constructor(){super(),this.setMinimumSize(100,25),this.element.classList.add("overflow-auto"),this.treeOutline=new r.TreeOutline.TreeOutlineInShadow,r.ARIAUtils.setLabel(this.treeOutline.contentElement,ge(pe.commandLog)),this.element.appendChild(this.treeOutline.element),this.setDefaultFocusedElement(this.treeOutline.contentElement),this.log=[],this.treeItemCache=new Map}setCommandLog(e){this.log=e,this.updateWindow({left:0,right:this.log.length})}appendLogItem(e){let t=this.treeItemCache.get(e);if(t){if(t.parent)return}else t=new Se(this,e),this.treeItemCache.set(e,t);this.treeOutline.appendChild(t)}updateWindow(e){this.selectionWindow=e,this.update()}doUpdate(){if(!this.selectionWindow||!this.log.length)return this.treeOutline.removeChildren(),Promise.resolve();const e=this.treeOutline.rootElement();for(;;){const t=e.firstChild();if(!t||t.logItem.commandIndex>=this.selectionWindow.left)break;e.removeChildAtIndex(0)}for(;;){const t=e.lastChild();if(!t||t.logItem.commandIndex<this.selectionWindow.right)break;e.removeChildAtIndex(e.children().length-1)}for(let e=this.selectionWindow.left,t=this.selectionWindow.right;e<t;++e)this.appendLogItem(this.log[e]);return Promise.resolve()}}class Se extends r.TreeOutline.TreeElement{logItem;ownerView;filled;constructor(e,t){super("",Boolean(t.params)),this.logItem=t,this.ownerView=e,this.filled=!1}onattach(){this.update()}async onpopulate(){for(const e in this.logItem.params)be.appendLogPropertyItem(this,e,this.logItem.params[e])}paramToString(e,t){if("object"!=typeof e)return"string"==typeof e&&e.length>100?t:JSON.stringify(e);let i="",s=0;for(const r in e){const n=e[r];if(++s>4||"object"===n||"string"===n&&n.length>100)return t;i&&(i+=", "),i+=n}return i}paramsToString(e){let t="";for(const i in e)t&&(t+=", "),t+=this.paramToString(e[i],i);return t}update(){const e=document.createDocumentFragment();r.UIUtils.createTextChild(e,this.logItem.method+"("+this.paramsToString(this.logItem.params)+")"),this.title=e}}class be extends r.TreeOutline.TreeElement{property;constructor(e){super(),this.property=e}static appendLogPropertyItem(e,t,i){const s=new be({name:t,value:i});if(e.appendChild(s),i&&"object"==typeof i)for(const e in i)be.appendLogPropertyItem(s,e,i[e])}onattach(){const e=document.createDocumentFragment();e.createChild("span","name").textContent=this.property.name;if(e.createChild("span","separator").textContent=": ",null===this.property.value||"object"!=typeof this.property.value){const t=e.createChild("span","value");t.textContent=JSON.stringify(this.property.value),t.classList.add("cm-js-"+(null===this.property.value?"null":typeof this.property.value))}this.title=e}}class Te{name;title;color;constructor(e,t,i){this.name=e,this.title=t,this.color=i}}var xe=Object.freeze({__proto__:null,PaintProfilerView:we,get Events(){return ve},PaintProfilerCommandLogView:Ce,LogTreeElement:Se,LogPropertyTreeElement:be,PaintProfilerCategory:Te});export{b as LayerDetailsView,I as LayerTreeOutline,m as LayerViewHost,de as Layers3DView,xe as PaintProfilerView,W as TransformController};

package/dist/third-party/front_end/panels/layers/layers-meta.js

@@ -0,0 +1 @@
+import*as e from"../../core/i18n/i18n.js";import*as a from"../../ui/legacy/legacy.js";const s={layers:"Layers",showLayers:"Show Layers"},r=e.i18n.registerUIStrings("panels/layers/layers-meta.ts",s),i=e.i18n.getLazilyComputedLocalizedString.bind(void 0,r);let n;a.ViewManager.registerViewExtension({location:"panel",id:"layers",title:i(s.layers),commandPrompt:i(s.showLayers),order:100,persistence:"closeable",loadView:async()=>(await async function(){return n||(n=await import("./layers.js")),n}()).LayersPanel.LayersPanel.instance()});

package/dist/third-party/front_end/panels/layers/layers.js

@@ -0,0 +1 @@
+import*as e from"../layer_viewer/layer_viewer.js";import*as t from"../../ui/legacy/legacy.js";import*as r from"../../core/common/common.js";import*as i from"../../core/i18n/i18n.js";import*as a from"../../core/sdk/sdk.js";class n extends t.SplitWidget.SplitWidget{logTreeView;paintProfilerView;constructor(t){super(!0,!1),this.logTreeView=new e.PaintProfilerView.PaintProfilerCommandLogView,this.setSidebarWidget(this.logTreeView),this.paintProfilerView=new e.PaintProfilerView.PaintProfilerView(t),this.setMainWidget(this.paintProfilerView),this.paintProfilerView.addEventListener(e.PaintProfilerView.Events.WindowChanged,this.onWindowChanged,this),this.logTreeView.focus()}reset(){this.paintProfilerView.setSnapshotAndLog(null,[],null)}profile(e){function t(e,t){this.logTreeView.setCommandLog(t||[]),this.paintProfilerView.setSnapshotAndLog(e,t||[],null),e&&e.release()}e.commandLog().then((r=>t.call(this,e,r)))}setScale(e){this.paintProfilerView.setScale(e)}onWindowChanged(){this.logTreeView.updateWindow(this.paintProfilerView.selectionWindow())}}var s,l=Object.freeze({__proto__:null,LayerPaintProfilerView:n});class o extends a.SDKModel.SDKModel{layerTreeAgent;paintProfilerModel;layerTreeInternal;throttler;enabled;lastPaintRectByLayerId;constructor(e){super(e),this.layerTreeAgent=e.layerTreeAgent(),e.registerLayerTreeDispatcher(new y(this)),this.paintProfilerModel=e.model(a.PaintProfiler.PaintProfilerModel);const t=e.model(a.ResourceTreeModel.ResourceTreeModel);t&&t.addEventListener(a.ResourceTreeModel.Events.PrimaryPageChanged,this.onPrimaryPageChanged,this),this.layerTreeInternal=null,this.throttler=new r.Throttler.Throttler(20)}async disable(){this.enabled&&(this.enabled=!1,await this.layerTreeAgent.invoke_disable())}enable(){this.enabled||(this.enabled=!0,this.forceEnable())}async forceEnable(){this.lastPaintRectByLayerId=new Map,this.layerTreeInternal||(this.layerTreeInternal=new d(this)),await this.layerTreeAgent.invoke_enable()}layerTree(){return this.layerTreeInternal}async layerTreeChanged(e){this.enabled&&this.throttler.schedule(this.innerSetLayers.bind(this,e))}async innerSetLayers(e){const t=this.layerTreeInternal;await t.setLayers(e),this.lastPaintRectByLayerId||(this.lastPaintRectByLayerId=new Map);for(const e of this.lastPaintRectByLayerId.keys()){const r=this.lastPaintRectByLayerId.get(e),i=t.layerById(e);i&&i.setLastPaintRect(r)}this.lastPaintRectByLayerId=new Map,this.dispatchEventToListeners(s.LayerTreeChanged)}layerPainted(e,t){if(!this.enabled)return;const r=this.layerTreeInternal.layerById(e);if(!r)return this.lastPaintRectByLayerId||(this.lastPaintRectByLayerId=new Map),void this.lastPaintRectByLayerId.set(e,t);r.didPaint(t),this.dispatchEventToListeners(s.LayerPainted,r)}onPrimaryPageChanged(){this.layerTreeInternal=null,this.enabled&&this.forceEnable()}}a.SDKModel.SDKModel.register(o,{capabilities:a.Target.Capability.DOM,autostart:!1}),function(e){e.LayerTreeChanged="LayerTreeChanged",e.LayerPainted="LayerPainted"}(s||(s={}));class d extends a.LayerTreeBase.LayerTreeBase{layerTreeModel;constructor(e){super(e.target()),this.layerTreeModel=e}async setLayers(e){if(!e)return void this.innerSetLayers(e);const t=new Set;for(let r=0;r<e.length;++r){const i=e[r].backendNodeId;i&&!this.backendNodeIdToNode().has(i)&&t.add(i)}await this.resolveBackendNodeIds(t),this.innerSetLayers(e)}innerSetLayers(e){if(this.setRoot(null),this.setContentRoot(null),!e)return;let t;const r=this.layersById;this.layersById=new Map;for(let i=0;i<e.length;++i){const a=e[i].layerId;let n=r.get(a);n?n.reset(e[i]):n=new h(this.layerTreeModel,e[i]),this.layersById.set(a,n);const s=e[i].backendNodeId;s&&n.setNode(this.backendNodeIdToNode().get(s)||null),!this.contentRoot()&&n.drawsContent()&&this.setContentRoot(n);const l=n.parentId();if(l){const e=this.layersById.get(l);if(!e)throw new Error(`Missing parent ${l} for layer ${a}`);e.addChild(n)}else t&&console.assert(!1,"Multiple root layers"),t=n}t&&(this.setRoot(t),t.calculateQuad(new WebKitCSSMatrix))}}class h{scrollRectsInternal;quadInternal;childrenInternal;image;parentInternal;layerPayload;layerTreeModel;nodeInternal;lastPaintRectInternal;paintCountInternal;stickyPositionConstraintInternal;constructor(e,t){this.layerTreeModel=e,this.reset(t)}id(){return this.layerPayload.layerId}parentId(){return this.layerPayload.parentLayerId||null}parent(){return this.parentInternal}isRoot(){return!this.parentId()}children(){return this.childrenInternal}addChild(e){const t=e;t.parentInternal&&console.assert(!1,"Child already has a parent"),this.childrenInternal.push(t),t.parentInternal=this}setNode(e){this.nodeInternal=e}node(){return this.nodeInternal||null}nodeForSelfOrAncestor(){let e=this;for(;e;e=e.parentInternal)if(e.nodeInternal)return e.nodeInternal;return null}offsetX(){return this.layerPayload.offsetX}offsetY(){return this.layerPayload.offsetY}width(){return this.layerPayload.width}height(){return this.layerPayload.height}transform(){return this.layerPayload.transform||null}quad(){return this.quadInternal}anchorPoint(){return[this.layerPayload.anchorX||0,this.layerPayload.anchorY||0,this.layerPayload.anchorZ||0]}invisible(){return this.layerPayload.invisible||!1}paintCount(){return this.paintCountInternal||this.layerPayload.paintCount}lastPaintRect(){return this.lastPaintRectInternal||null}setLastPaintRect(e){this.lastPaintRectInternal=e}scrollRects(){return this.scrollRectsInternal}stickyPositionConstraint(){return this.stickyPositionConstraintInternal||null}async requestCompositingReasons(){return(await this.layerTreeModel.layerTreeAgent.invoke_compositingReasons({layerId:this.id()})).compositingReasons||[]}async requestCompositingReasonIds(){return(await this.layerTreeModel.layerTreeAgent.invoke_compositingReasons({layerId:this.id()})).compositingReasonIds||[]}drawsContent(){return this.layerPayload.drawsContent}gpuMemoryUsage(){return this.drawsContent()?this.width()*this.height()*4:0}snapshots(){return[this.layerTreeModel.paintProfilerModel.makeSnapshot(this.id()).then((e=>e?{rect:{x:0,y:0,width:this.width(),height:this.height()},snapshot:e}:null))]}didPaint(e){this.lastPaintRectInternal=e,this.paintCountInternal=this.paintCount()+1,this.image=null}reset(e){this.nodeInternal=null,this.childrenInternal=[],this.parentInternal=null,this.paintCountInternal=0,this.layerPayload=e,this.image=null,this.scrollRectsInternal=this.layerPayload.scrollRects||[],this.stickyPositionConstraintInternal=this.layerPayload.stickyPositionConstraint?new a.LayerTreeBase.StickyPositionConstraint(this.layerTreeModel.layerTree(),this.layerPayload.stickyPositionConstraint):null}matrixFromArray(e){return new WebKitCSSMatrix("matrix3d("+e.map((function(e){return e.toFixed(9)})).join(",")+")")}calculateTransformToViewport(e){let r=(new WebKitCSSMatrix).translate(this.layerPayload.offsetX,this.layerPayload.offsetY);if(this.layerPayload.transform){const e=this.matrixFromArray(this.layerPayload.transform),i=new t.Geometry.Vector(this.layerPayload.width*this.anchorPoint()[0],this.layerPayload.height*this.anchorPoint()[1],this.anchorPoint()[2]),a=t.Geometry.multiplyVectorByMatrixAndNormalize(i,r),n=(new WebKitCSSMatrix).translate(-a.x,-a.y,-a.z);r=n.inverse().multiply(e.multiply(n.multiply(r)))}return r=e.multiply(r),r}createVertexArrayForRect(e,t){return[0,0,0,e,0,0,e,t,0,0,t,0]}calculateQuad(e){const r=this.calculateTransformToViewport(e);this.quadInternal=[];const i=this.createVertexArrayForRect(this.layerPayload.width,this.layerPayload.height);for(let e=0;e<4;++e){const a=t.Geometry.multiplyVectorByMatrixAndNormalize(new t.Geometry.Vector(i[3*e],i[3*e+1],i[3*e+2]),r);this.quadInternal.push(a.x,a.y)}this.childrenInternal.forEach((function(e){e.calculateQuad(r)}))}}class y{layerTreeModel;constructor(e){this.layerTreeModel=e}layerTreeDidChange({layers:e}){this.layerTreeModel.layerTreeChanged(e||null)}layerPainted({layerId:e,clip:t}){this.layerTreeModel.layerPainted(e,t)}}var c=Object.freeze({__proto__:null,LayerTreeModel:o,get Events(){return s},AgentLayerTree:d,AgentLayer:h});const u={details:"Details",profiler:"Profiler"},P=i.i18n.registerUIStrings("panels/layers/LayersPanel.ts",u),w=i.i18n.getLocalizedString.bind(void 0,P);let p;class g extends t.Panel.PanelWithSidebar{model;layerViewHost;layerTreeOutline;rightSplitWidget;layers3DView;tabbedPane;layerDetailsView;paintProfilerView;updateThrottler;layerBeingProfiled;constructor(){super("layers",225),this.model=null,a.TargetManager.TargetManager.instance().observeTargets(this),this.layerViewHost=new e.LayerViewHost.LayerViewHost,this.layerTreeOutline=new e.LayerTreeOutline.LayerTreeOutline(this.layerViewHost),this.layerTreeOutline.addEventListener("PaintProfilerRequested",this.onPaintProfileRequested,this),this.panelSidebarElement().appendChild(this.layerTreeOutline.element),this.setDefaultFocusedElement(this.layerTreeOutline.element),this.rightSplitWidget=new t.SplitWidget.SplitWidget(!1,!0,"layerDetailsSplitViewState"),this.splitWidget().setMainWidget(this.rightSplitWidget),this.layers3DView=new e.Layers3DView.Layers3DView(this.layerViewHost),this.rightSplitWidget.setMainWidget(this.layers3DView),this.layers3DView.addEventListener(e.Layers3DView.Events.PaintProfilerRequested,this.onPaintProfileRequested,this),this.layers3DView.addEventListener(e.Layers3DView.Events.ScaleChanged,this.onScaleChanged,this),this.tabbedPane=new t.TabbedPane.TabbedPane,this.rightSplitWidget.setSidebarWidget(this.tabbedPane),this.layerDetailsView=new e.LayerDetailsView.LayerDetailsView(this.layerViewHost),this.layerDetailsView.addEventListener(e.LayerDetailsView.Events.PaintProfilerRequested,this.onPaintProfileRequested,this),this.tabbedPane.appendTab(f.Details,w(u.details),this.layerDetailsView),this.paintProfilerView=new n(this.showImage.bind(this)),this.tabbedPane.addEventListener(t.TabbedPane.Events.TabClosed,this.onTabClosed,this),this.updateThrottler=new r.Throttler.Throttler(100)}static instance(e){return p&&!e?.forceNew||(p=new g),p}focus(){this.layerTreeOutline.focus()}wasShown(){super.wasShown(),this.model&&this.model.enable()}willHide(){this.model&&this.model.disable(),super.willHide()}targetAdded(e){e===a.TargetManager.TargetManager.instance().primaryPageTarget()&&(this.model=e.model(o),this.model&&(this.model.addEventListener(s.LayerTreeChanged,this.onLayerTreeUpdated,this),this.model.addEventListener(s.LayerPainted,this.onLayerPainted,this),this.isShowing()&&this.model.enable()))}targetRemoved(e){this.model&&this.model.target()===e&&(this.model.removeEventListener(s.LayerTreeChanged,this.onLayerTreeUpdated,this),this.model.removeEventListener(s.LayerPainted,this.onLayerPainted,this),this.model.disable(),this.model=null)}onLayerTreeUpdated(){this.updateThrottler.schedule(this.update.bind(this))}update(){if(this.model){this.layerViewHost.setLayerTree(this.model.layerTree());const e=this.model.target().model(a.ResourceTreeModel.ResourceTreeModel);if(e){const t=e.mainFrame;if(t){const e=t.url;this.element.setAttribute("test-current-url",e)}}}return Promise.resolve()}onLayerPainted({data:e}){if(!this.model)return;const t=this.layerViewHost.selection();t&&t.layer()===e&&this.layerDetailsView.update(),this.layers3DView.updateLayerSnapshot(e)}onPaintProfileRequested({data:e}){this.layers3DView.snapshotForSelection(e).then((t=>{t&&(this.layerBeingProfiled=e.layer(),this.tabbedPane.hasTab(f.Profiler)||this.tabbedPane.appendTab(f.Profiler,w(u.profiler),this.paintProfilerView,void 0,!0,!0),this.tabbedPane.selectTab(f.Profiler),this.paintProfilerView.profile(t.snapshot))}))}onTabClosed(e){e.data.tabId===f.Profiler&&this.layerBeingProfiled&&(this.paintProfilerView.reset(),this.layers3DView.showImageForLayer(this.layerBeingProfiled,void 0),this.layerBeingProfiled=null)}showImage(e){this.layerBeingProfiled&&this.layers3DView.showImageForLayer(this.layerBeingProfiled,e)}onScaleChanged(e){this.paintProfilerView.setScale(e.data)}}const f={Details:"details",Profiler:"profiler"};var T=Object.freeze({__proto__:null,LayersPanel:g,DetailsViewTabs:f});export{l as LayerPaintProfilerView,c as LayerTreeModel,T as LayersPanel};

package/dist/third-party/front_end/panels/lighthouse/lighthouse-legacy.js

@@ -0,0 +1 @@
+import*as e from"./lighthouse.js";self.Lighthouse=self.Lighthouse||{},Lighthouse=Lighthouse||{},Lighthouse.ReportGenerator,Lighthouse.LighthousePanel=e.LighthousePanel.LighthousePanel,Lighthouse.ReportSelector=e.LighthouseReportSelector.ReportSelector,Lighthouse.StatusView=e.LighthouseStatusView.StatusView;

package/dist/third-party/front_end/panels/lighthouse/lighthouse-meta.js

@@ -0,0 +1 @@
+import*as i from"../../core/i18n/i18n.js";import*as e from"../../ui/legacy/legacy.js";const t={showLighthouse:"Show `Lighthouse`"},o=i.i18n.registerUIStrings("panels/lighthouse/lighthouse-meta.ts",t),n=i.i18n.getLazilyComputedLocalizedString.bind(void 0,o);let s;e.ViewManager.registerViewExtension({location:"panel",id:"lighthouse",title:i.i18n.lockedLazyString("Lighthouse"),commandPrompt:n(t.showLighthouse),order:90,loadView:async()=>(await async function(){return s||(s=await import("./lighthouse.js")),s}()).LighthousePanel.LighthousePanel.instance(),tags:[i.i18n.lockedLazyString("lighthouse"),i.i18n.lockedLazyString("pwa")]});