@browserless.io/browserless 2.2.0-beta-6 → 2.2.0

package/static/devtools/layer_viewer/layer_viewer.js

@@ -0,0 +1 @@
+import{i18n as e}from"../i18n/i18n.js";import{NumberUtilities as t,StringUtilities as s}from"../platform/platform.js";import{OverlayModel as i,LayerTreeBase as r}from"../sdk/sdk.js";import{Widget as n,EmptyWidget as o,UIUtils as a,ARIAUtils as l,TreeOutline as h,ContextMenu as c,Toolbar as d,ShortcutRegistry as _,Geometry as p,XLink as u,ThrottledWidget as m}from"../ui/ui.js";import{Settings as g,ObjectWrapper as y,Throttler as f}from"../common/common.js";import{PieChart as w,OverviewGrid as v}from"../perf_ui/perf_ui.js";const C={showInternalLayers:"Show internal layers"},T=e.registerUIStrings("layer_viewer/LayerViewHost.ts",C),S=e.getLocalizedString.bind(void 0,T);class b{constructor(e,t){this._type=e,this._layer=t}static isEqual(e,t){return e&&t?e._isEqual(t):e===t}type(){return this._type}layer(){return this._layer}_isEqual(e){return!1}}class P extends b{constructor(e){console.assert(Boolean(e),"LayerSelection with empty layer"),super("Layer",e)}_isEqual(e){return"Layer"===e._type&&e.layer().id()===this.layer().id()}}class L extends b{constructor(e,t){super("ScrollRect",e),this.scrollRectIndex=t}_isEqual(e){return"ScrollRect"===e._type&&this.layer().id()===e.layer().id()&&this.scrollRectIndex===e.scrollRectIndex}}class x extends b{constructor(e,t){super("Snapshot",e),this._snapshot=t}_isEqual(e){return"Snapshot"===e._type&&this.layer().id()===e.layer().id()&&this._snapshot===e._snapshot}snapshot(){return this._snapshot}}var E=Object.freeze({__proto__:null,UIStrings:C,LayerView:class{},Selection:b,LayerSelection:P,ScrollRectSelection:L,SnapshotSelection:x,LayerViewHost:class{constructor(){this._views=[],this._selectedObject=null,this._hoveredObject=null,this._showInternalLayersSetting=g.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 s=this._hoveredObject&&this._hoveredObject.layer();!s||e&&e.layerById(s.id())||this.hoverObject(null);for(const t of this._views)t.setLayerTree(e)}hoverObject(e){if(b.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(!b.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(S(C.showInternalLayers),this._toggleShowInternalLayers.bind(this),this._showInternalLayersSetting.get());const s=t&&t.layer()&&t.layer().nodeForSelfOrAncestor();s&&e.appendApplicableItems(s),e.show()}showInternalLayersSetting(){return this._showInternalLayersSetting}_toggleShowInternalLayers(){this._showInternalLayersSetting.set(!this._showInternalLayersSetting.get())}_toggleNodeHighlight(e){e?e.highlightForTwoSeconds():i.OverlayModel.hideDOMNodeHighlight()}}});const R={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",hasADTransform:"Has a 3d transform.",isAnAcceleratedVideo:"Is an accelerated video.",isAnAcceleratedCanvasOrIsA:"Is an accelerated canvas, or is a display list backed canvas that was promoted to a layer based on a performance heuristic.",isAnAcceleratedPlugin:"Is an accelerated plugin.",isAnAcceleratedIframe:"Is an accelerated iFrame.",hasBackfacevisibilityHidden:"Has backface-visibility: hidden.",hasAnActiveAcceleratedTransform:"Has an active accelerated transform animation or transition.",hasAnActiveAcceleratedOpacity:"Has an active accelerated opacity animation or transition.",hasAnActiveAcceleratedFilter:"Has an active accelerated filter animation or transition.",hasAnActiveAcceleratedBackdrop:"Has an active accelerated backdrop filter animation or transition.",isDomOverlayForWebxrImmersivear:"Is DOM overlay for WebXR immersive-ar mode.",isFixedOrStickyPosition:"Is fixed or sticky position.",isAScrollableOverflowElement:"Is a scrollable overflow element.",scrollParentIsNotAnAncestor:"Scroll parent is not an ancestor.",hasClippingAncestor:"Has clipping ancestor.",isOverlayControlsForVideo:"Is overlay controls for video.",hasAWillchangeTransform:"Has a will-change: transform compositing hint.",hasAWillchangeOpacityCompositing:"Has a will-change: opacity compositing hint.",hasAWillchangeCompositingHint:"Has a will-change compositing hint other than transform and opacity.",hasABackdropFilter:"Has a backdrop filter.",isTheDocumentrootscroller:"Is the document.rootScroller.",mightOverlapOtherComposited:"Might overlap other composited content.",overlapsOtherCompositedContent:"Overlaps other composited content.",parentWithCompositedNegative:"Parent with composited negative z-index content.",layerWasSeparatelyComposited:"Layer was separately composited because it could not be squashed.",hasOpacityThatNeedsToBeAppliedBy:"Has opacity that needs to be applied by compositor because of composited descendants.",hasAMaskThatNeedsToBeKnownBy:"Has a mask that needs to be known by compositor because of composited descendants.",hasAReflectionThatNeedsToBeKnown:"Has a reflection that needs to be known by compositor because of composited descendants.",hasAFilterEffectThatNeedsToBe:"Has a filter effect that needs to be known by compositor because of composited descendants.",hasABlendingEffectThatNeedsToBe:"Has a blending effect that needs to be known by compositor because of composited descendants.",hasAClipThatNeedsToBeKnownBy:"Has a clip that needs to be known by compositor because of composited descendants.",hasAPerspectiveTransformThat:"Has a perspective transform that needs to be known by compositor because of 3d descendants.",hasAPreservesdPropertyThatNeeds:"Has a preserves-3d property that needs to be known by compositor because of 3d descendants.",shouldIsolateDescendantsToApplyA:"Should isolate descendants to apply a blend effect.",isAPositionfixedElementWith:"Is a position:fixed element with composited descendants.",isTheRootLayer:"Is the root layer.",secondaryLayerTheHorizontal:"Secondary layer, the horizontal scrollbar layer.",secondaryLayerTheVertical:"Secondary layer, the vertical scrollbar layer.",secondaryLayerTheOverflow:"Secondary layer, the overflow controls host layer.",secondaryLayerTheScrollCorner:"Secondary layer, the scroll corner layer.",secondaryLayerToHouseContents:"Secondary layer, to house contents that can be scrolled.",secondaryLayerUsedToPositionThe:"Secondary layer, used to position the scrolling contents while scrolling.",secondaryLayerHomeForAGroupOf:"Secondary layer, home for a group of squashable content.",secondaryLayerNoopLayerToPlace:"Secondary layer, no-op layer to place the squashing layer correctly in the composited layer tree.",secondaryLayerToContainAnyNormal:"Secondary layer, to contain any normal flow and positive z-index contents on top of a negative z-index layer.",secondaryLayerToContainTheMask:"Secondary layer, to contain the mask contents.",layerPaintedOnTopOfOtherLayersAs:"Layer painted on top of other layers as decoration.",layerForLinkHighlightFrame:"Layer for link highlight, frame overlay, etc.",nonFastScrollable:"Non fast scrollable",touchEventHandler:"Touch event handler",wheelEventHandler:"Wheel event handler",repaintsOnScroll:"Repaints on scroll",mainThreadScrollingReason:"Main thread scrolling reason"},A=e.registerUIStrings("layer_viewer/LayerDetailsView.ts",R),O=e.getLocalizedString.bind(void 0,A);class I extends n.Widget{constructor(e){super(!0),this.registerRequiredCSS("layer_viewer/layerDetailsView.css",{enableLegacyPatching:!0}),this._layerViewHost=e,this._layerViewHost.registerView(this),this._emptyWidget=new o.EmptyWidget(O(R.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.update()}_onScrollRectClicked(e,t){1===t.which&&this._selection&&this._layerViewHost.selectObject(new L(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(B.PaintProfilerRequested,e)}_createScrollRectElement(e,t){t&&a.createTextChild(this._scrollRectsCell,", ");const s=this._scrollRectsCell.createChild("span","scroll-rect");this._selection&&this._selection.scrollRectIndex===t&&s.classList.add("active"),s.textContent=O(R.scrollRectangleDimensions,{PH1:D.get(e.type),PH2:e.rect.width,PH3:e.rect.height,PH4:e.rect.x,PH5:e.rect.y}),s.addEventListener("click",this._onScrollRectClicked.bind(this,t),!1)}_formatStickyAncestorLayer(e,t){if(!t)return"";const s=t.nodeForSelfOrAncestor(),i=s?s.simpleSelector():O(R.unnamed);return O(R.stickyAncenstorLayersS,{PH1:e,PH2:i,PH3:t.id()})}_createStickyAncestorChild(e,t){if(!t)return;a.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=O(R.stickyBoxRectangleDimensions,{PH1:t.width,PH2:t.height,PH3:t.x,PH4:t.y}),a.createTextChild(this._stickyPositionConstraintCell,", ");const s=e.containingBlockRect();this._stickyPositionConstraintCell.createChild("span").textContent=O(R.containingBlocRectangleDimensions,{PH1:s.width,PH2:s.height,PH3:s.x,PH4:s.y}),this._createStickyAncestorChild(O(R.nearestLayerShiftingStickyBox),e.nearestLayerShiftingStickyBox()),this._createStickyAncestorChild(O(R.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=O(R.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=t.bytesToString(e.gpuMemoryUsage()),e.requestCompositingReasonIds().then(this._updateCompositingReasons.bind(this)),this._scrollRectsCell.removeChildren(),e.scrollRects().forEach(this._createScrollRectElement.bind(this)),this._populateStickyPositionConstraintCell(e.stickyPositionConstraint());const s=this._selection&&"Snapshot"===this._selection.type()?this._selection.snapshot():null;this._paintProfilerLink.classList.toggle("hidden",!(this._layerSnapshotMap.has(e)||s))}_buildContent(){this._tableElement=this.contentElement.createChild("table"),this._tbodyElement=this._tableElement.createChild("tbody"),this._sizeCell=this._createRow(O(R.size)),this._compositingReasonsCell=this._createRow(O(R.compositingReasons)),this._memoryEstimateCell=this._createRow(O(R.memoryEstimate)),this._paintCountCell=this._createRow(O(R.paintCount)),this._scrollRectsCell=this._createRow(O(R.slowScrollRegions)),this._stickyPositionConstraintCell=this._createRow(O(R.stickyPositionConstraint)),this._paintProfilerLink=this.contentElement.createChild("span","hidden devtools-link link-margin"),l.markAsLink(this._paintProfilerLink),this._paintProfilerLink.textContent=O(R.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"),s=I.getCompositingReasons(e);for(const e of s)t.createChild("li").textContent=e}static getCompositingReasons(e){const t=[];for(const s of e){const e=H.get(s);e?t.push(e):console.error(`Compositing reason id '${s}' is not recognized.`)}return t}}const H=new Map([["transform3D",O(R.hasADTransform)],["video",O(R.isAnAcceleratedVideo)],["canvas",O(R.isAnAcceleratedCanvasOrIsA)],["plugin",O(R.isAnAcceleratedPlugin)],["iFrame",O(R.isAnAcceleratedIframe)],["backfaceVisibilityHidden",O(R.hasBackfacevisibilityHidden)],["activeTransformAnimation",O(R.hasAnActiveAcceleratedTransform)],["activeOpacityAnimation",O(R.hasAnActiveAcceleratedOpacity)],["activeFilterAnimation",O(R.hasAnActiveAcceleratedFilter)],["activeBackdropFilterAnimation",O(R.hasAnActiveAcceleratedBackdrop)],["immersiveArOverlay",O(R.isDomOverlayForWebxrImmersivear)],["scrollDependentPosition",O(R.isFixedOrStickyPosition)],["overflowScrolling",O(R.isAScrollableOverflowElement)],["overflowScrollingParent",O(R.scrollParentIsNotAnAncestor)],["outOfFlowClipping",O(R.hasClippingAncestor)],["videoOverlay",O(R.isOverlayControlsForVideo)],["willChangeTransform",O(R.hasAWillchangeTransform)],["willChangeOpacity",O(R.hasAWillchangeOpacityCompositing)],["willChangeOther",O(R.hasAWillchangeCompositingHint)],["backdropFilter",O(R.hasABackdropFilter)],["rootScroller",O(R.isTheDocumentrootscroller)],["assumedOverlap",O(R.mightOverlapOtherComposited)],["overlap",O(R.overlapsOtherCompositedContent)],["negativeZIndexChildren",O(R.parentWithCompositedNegative)],["squashingDisallowed",O(R.layerWasSeparatelyComposited)],["opacityWithCompositedDescendants",O(R.hasOpacityThatNeedsToBeAppliedBy)],["maskWithCompositedDescendants",O(R.hasAMaskThatNeedsToBeKnownBy)],["reflectionWithCompositedDescendants",O(R.hasAReflectionThatNeedsToBeKnown)],["filterWithCompositedDescendants",O(R.hasAFilterEffectThatNeedsToBe)],["blendingWithCompositedDescendants",O(R.hasABlendingEffectThatNeedsToBe)],["clipsCompositingDescendants",O(R.hasAClipThatNeedsToBeKnownBy)],["perspectiveWith3DDescendants",O(R.hasAPerspectiveTransformThat)],["preserve3DWith3DDescendants",O(R.hasAPreservesdPropertyThatNeeds)],["isolateCompositedDescendants",O(R.shouldIsolateDescendantsToApplyA)],["positionFixedWithCompositedDescendants",O(R.isAPositionfixedElementWith)],["root",O(R.isTheRootLayer)],["layerForHorizontalScrollbar",O(R.secondaryLayerTheHorizontal)],["layerForVerticalScrollbar",O(R.secondaryLayerTheVertical)],["layerForOverflowControlsHost",O(R.secondaryLayerTheOverflow)],["layerForScrollCorner",O(R.secondaryLayerTheScrollCorner)],["layerForScrollingContents",O(R.secondaryLayerToHouseContents)],["layerForScrollingContainer",O(R.secondaryLayerUsedToPositionThe)],["layerForSquashingContents",O(R.secondaryLayerHomeForAGroupOf)],["layerForSquashingContainer",O(R.secondaryLayerNoopLayerToPlace)],["layerForForeground",O(R.secondaryLayerToContainAnyNormal)],["layerForMask",O(R.secondaryLayerToContainTheMask)],["layerForDecoration",O(R.layerPaintedOnTopOfOtherLayersAs)],["layerForOther",O(R.layerForLinkHighlightFrame)]]);var B;!function(e){e.PaintProfilerRequested="PaintProfilerRequested"}(B||(B={}));const D=new Map([[r.Layer.ScrollRectType.NonFastScrollable,O(R.nonFastScrollable)],[r.Layer.ScrollRectType.TouchEventHandler,O(R.touchEventHandler)],[r.Layer.ScrollRectType.WheelEventHandler,O(R.wheelEventHandler)],[r.Layer.ScrollRectType.RepaintsOnScroll,O(R.repaintsOnScroll)],[r.Layer.ScrollRectType.MainThreadScrollingReason,O(R.mainThreadScrollingReason)]]);var M=Object.freeze({__proto__:null,UIStrings:R,LayerDetailsView:I,get Events(){return B},slowScrollRectNames:D});const k={layersTreePane:"Layers Tree Pane",showPaintProfiler:"Show Paint Profiler",updateChildDimension:" ({PH1} × {PH2})"},F=e.registerUIStrings("layer_viewer/LayerTreeOutline.ts",k),W=e.getLocalizedString.bind(void 0,F);class V extends y.ObjectWrapper{constructor(e){super(),this._layerViewHost=e,this._layerViewHost.registerView(this),this._treeOutline=new h.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),l.setAccessibleName(this._treeOutline.contentElement,W(k.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(),s=t&&U.get(t);s?s.revealAndSelect(!0):this._treeOutline.selectedTreeElement&&this._treeOutline.selectedTreeElement.deselect()}hoverObject(e){const t=e&&e.layer(),s=t&&U.get(t);s!==this._lastHoveredNode&&(this._lastHoveredNode&&this._lastHoveredNode.setHovered(!1),s&&s.setHovered(!0),this._lastHoveredNode=s)}setLayerTree(e){this._layerTree=e,this._update()}_update(){const e=this._layerViewHost.showInternalLayersSetting().get(),t=new Map;let s=null;this._layerTree&&(e||(s=this._layerTree.contentRoot()),s||(s=this._layerTree.root())),s&&this._layerTree&&this._layerTree.forEachLayer(function(i){if(!i.drawsContent()&&!e)return;t.get(i)&&console.assert(!1,"Duplicate layer: "+i.id()),t.set(i,!0);let r=U.get(i)||null,n=i.parent();for(;n&&n!==s&&!n.drawsContent()&&!e;)n=n.parent();const o=i===s?this._treeOutline.rootElement():n&&U.get(n);if(o)if(r){if(r.parent!==o){const e=this._treeOutline.selectedTreeElement;r.parent&&r.parent.removeChild(r),o.appendChild(r),e&&e!==this._treeOutline.selectedTreeElement&&e.select()}r._update()}else r=new X(this,i),o.appendChild(r),i.drawsContent()||r.expand();else console.assert(!1,"Parent is not in the tree")}.bind(this),s);for(let e=this._treeOutline.rootElement().firstChild();e instanceof X&&!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=U.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)),s=new c.ContextMenu(e),i=t&&t.layer();i&&(this._layerSnapshotMap=this._layerViewHost.getLayerSnapshotMap(),this._layerSnapshotMap.has(i)&&s.defaultSection().appendItem(W(k.showPaintProfiler),this.dispatchEventToListeners.bind(this,N.PaintProfilerRequested,t),!1)),this._layerViewHost.showContextMenu(s,t)}_selectionForNode(e){return e&&e._layer?new P(e._layer):null}}var N;(N||(N={})).PaintProfilerRequested="PaintProfilerRequested";class X extends h.TreeElement{constructor(e,t){super(),this._treeOutline=e,this._layer=t,U.set(t,this),this._update()}_update(){const e=this._layer.nodeForSelfOrAncestor(),t=document.createDocumentFragment();a.createTextChild(t,e?e.simpleSelector():"#"+this._layer.id());t.createChild("span","dimmed").textContent=W(k.updateChildDimension,{PH1:this._layer.width(),PH2:this._layer.height()}),this.title=t}onselect(){return this._treeOutline._selectedNodeChanged(this),!1}setHovered(e){this.listItemElement.classList.toggle("hovered",e)}}const U=new WeakMap;var j=Object.freeze({__proto__:null,UIStrings:k,LayerTreeOutline:V,get Events(){return N},LayerTreeElement:X,layerToTreeElement:U});const Y={panModeX:"Pan mode (X)",rotateModeV:"Rotate mode (V)",resetTransform:"Reset transform (0)"},q=e.registerUIStrings("layer_viewer/TransformController.ts",Y),z=e.getLocalizedString.bind(void 0,q);class G extends y.ObjectWrapper{constructor(e,t){if(super(),this._scale=1,this._offsetX=0,this._offsetY=0,this._rotateX=0,this._rotateY=0,this._oldRotateX=0,this._oldRotateY=0,this._originX=0,this._originY=0,this.element=e,this._registerShortcuts(),a.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 d.Toolbar("transform-control-panel"),this._modeButtons={},!t){const e=new d.ToolbarToggle(z(Y.panModeX),"largeicon-pan");e.addEventListener(d.ToolbarButton.Events.Click,this._setMode.bind(this,"Pan")),this._modeButtons.Pan=e,this._controlPanelToolbar.appendToolbarItem(e);const t=new d.ToolbarToggle(z(Y.rotateModeV),"largeicon-rotate");t.addEventListener(d.ToolbarButton.Events.Click,this._setMode.bind(this,"Rotate")),this._modeButtons.Rotate=t,this._controlPanelToolbar.appendToolbarItem(t)}this._setMode("Pan");const s=new d.ToolbarButton(z(Y.resetTransform),"largeicon-center");s.addEventListener(d.ToolbarButton.Events.Click,this.resetAndNotify.bind(this,void 0)),this._controlPanelToolbar.appendToolbarItem(s),this._reset()}toolbar(){return this._controlPanelToolbar}_registerShortcuts(){_.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._scale=1,this._offsetX=0,this._offsetY=0,this._rotateX=0,this._rotateY=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,s){this._minScale=e,this._maxScale=s,this._scale=t.clamp(this._scale,e,s)}clampOffsets(e,s,i,r){this._offsetX=t.clamp(this._offsetX,e,s),this._offsetY=t.clamp(this._offsetY,i,r)}scale(){return this._scale}offsetX(){return this._offsetX}offsetY(){return this._offsetY}rotateX(){return this._rotateX}rotateY(){return this._rotateY}_onScale(e,s,i){e=t.clamp(this._scale*e,this._minScale,this._maxScale)/this._scale,this._scale*=e,this._offsetX-=(s-this._offsetX)*(e-1),this._offsetY-=(i-this._offsetY)*(e-1),this._postChangeEvent()}_onPan(e,t){this._offsetX+=e,this._offsetY+=t,this._postChangeEvent()}_onRotate(e,t){this._rotateX=e,this._rotateY=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._rotateX+5*t,this._rotateY+5*e):this._onPan(6*e,6*t),!0}_onMouseWheel(e){const t=e,s=Math.pow(1.1,-t.deltaY*(1/53));this._onScale(s,t.clientX-this.element.totalOffsetLeft(),t.clientY-this.element.totalOffsetTop())}_onDrag(e){const{clientX:t,clientY:s}=e;"Rotate"===this._mode?this._onRotate(this._oldRotateX+(this._originY-s)/this.element.clientHeight*180,this._oldRotateY-(this._originX-t)/this.element.clientWidth*180):(this._onPan(t-this._originX,s-this._originY),this._originX=t,this._originY=s)}_onDragStart(e){return this.element.focus(),this._originX=e.clientX,this._originY=e.clientY,this._oldRotateX=this._rotateX,this._oldRotateY=this._rotateY,!0}_onDragEnd(){this._originX=0,this._originY=0,this._oldRotateX=0,this._oldRotateY=0}}var K;(K||(K={})).TransformChanged="TransformChanged";var Q=Object.freeze({__proto__:null,UIStrings:Y,TransformController:G,get Events(){return K}});const Z={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",repaintsOnScroll:"repaints on scroll",touchEventListener:"touch event listener",mousewheelEventListener:"mousewheel event listener"},J=e.registerUIStrings("layer_viewer/Layers3DView.ts",Z),$=e.getLocalizedString.bind(void 0,J),ee=new Map,te=new Map,se=new Map,ie=new Map,re=new Map,ne=new Map;class oe extends n.VBox{constructor(e){super(!0),this.registerRequiredCSS("layer_viewer/layers3DView.css",{enableLegacyPatching:!0}),this.contentElement.classList.add("layers-3d-view"),this._failBanner=new n.VBox,this._failBanner.element.classList.add("full-widget-dimmed-banner"),a.createTextChild(this._failBanner.element,$(Z.layerInformationIsNotYet)),this._layerViewHost=e,this._layerViewHost.registerView(this),this._transformController=new G(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),l.setAccessibleName(this._canvasElement,$(Z.dLayersView)),this._lastSelection={},this._layerTree=null,this._textureManager=new Se(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();a.loadImage(t).then((t=>{const s=t&&Se._createTextureForImage(this._gl||null,t);this._layerTexture=s?{layer:e,texture:s}:null,this._update()}))}onResize(){this._resizeCanvas(),this._update()}willHide(){this._textureManager.suspend()}wasShown(){this._textureManager.resume(),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(ae.Hovered,e)}selectObject(e){this._setOutline(ae.Hovered,null),this._setOutline(ae.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(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 s=this._gl.createShader(e);s&&this._shaderProgram&&(this._gl.shaderSource(s,t),this._gl.compileShader(s),this._gl.attachShader(this._shaderProgram,s))}_initShaders(){if(!this._gl)return;if(this._shaderProgram=this._gl.createProgram(),!this._shaderProgram)return;this._createShader(this._gl.FRAGMENT_SHADER,ce),this._createShader(this._gl.VERTEX_SHADER,de),this._gl.linkProgram(this._shaderProgram),this._gl.useProgram(this._shaderProgram);const e=this._gl.getAttribLocation(this._shaderProgram,"aVertexPosition");this._gl.enableVertexAttribArray(e),ee.set(this._shaderProgram,e);const t=this._gl.getAttribLocation(this._shaderProgram,"aVertexColor");this._gl.enableVertexAttribArray(t),te.set(this._shaderProgram,t);const s=this._gl.getAttribLocation(this._shaderProgram,"aTextureCoord");this._gl.enableVertexAttribArray(s),se.set(this._shaderProgram,s);const i=this._gl.getUniformLocation(this._shaderProgram,"uPMatrix");ie.set(this._shaderProgram,i);const r=this._gl.getUniformLocation(this._shaderProgram,"uSampler");re.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},s=this._layerTree?this._layerTree.viewportSize():null,i=s?s.width:e.width,r=s?s.height:e.height,n=this._canvasElement.width,o=this._canvasElement.height,a=.1*n,l=.1*o,h=(n-2*a)/i,c=(o-2*l)/r,d=Math.min(h,c),_=Math.min(i/e.width,r/e.width)/2;this._transformController.setScaleConstraints(_,10/d);const u=this._transformController.scale(),m=this._transformController.rotateX(),g=this._transformController.rotateY();this._scale=u*d;const y=t.clamp(this._scale,.1,1);y!==this._oldTextureScale&&(this._oldTextureScale=y,this._textureManager.setScale(y),this.dispatchEventToListeners(le.ScaleChanged,y));const f=(new WebKitCSSMatrix).scale(u,u,u).translate(n/2,o/2,0).rotate(m,g,0).scale(d,d,d).translate(-i/2,-r/2,0);let w;for(let e=0;e<this._rects.length;++e)w=p.boundsForTransformedPoints(f,this._rects[e].vertices,w);w&&this._transformController.clampOffsets((a-w.maxX)/window.devicePixelRatio,(n-a-w.minX)/window.devicePixelRatio,(l-w.maxY)/window.devicePixelRatio,(o-l-w.minY)/window.devicePixelRatio);const v=this._transformController.offsetX()*window.devicePixelRatio,C=this._transformController.offsetY()*window.devicePixelRatio;this._projectionMatrix=(new WebKitCSSMatrix).translate(v,C,0).multiply(f);const T=(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=ie.get(this._shaderProgram);this._gl&&e&&this._gl.uniformMatrix4fv(e,!1,this._arrayFromMatrix(T))}}_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){a.loadImage(t).then((t=>{this._chromeTextures[e]=t&&Se._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 s=t?this._layerTree.root():this._layerTree.contentRoot()||this._layerTree.root();if(!s)return;const i=[s];for(this._depthByLayerId.set(s.id(),0),this._visibleLayers=new Set;i.length>0;){const s=i.shift();if(!s)break;(t||s.drawsContent())&&this._visibleLayers.add(s);const r=s.children();for(let t=0;t<r.length;++t)this._depthByLayerId.set(r[t].id(),++e),i.push(r[t])}this._maxDepth=e}_depthForLayer(e){return(this._depthByLayerId.get(e.id())||0)*Ce}_calculateScrollRectDepth(e,t){return this._depthForLayer(e)+t*Te+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 P(e),s=new be(t);s.setVertices(e.quad(),this._depthForLayer(e)),this._appendRect(s),this._updateDimensionsForAutoscale(e)}_appendRect(e){const t=e.relatedObject,s=b.isEqual(this._lastSelection[ae.Selected],t),i=b.isEqual(this._lastSelection[ae.Hovered],t);if(s)e.borderColor=pe;else if(i){e.borderColor=_e;const t=e.fillColor||[255,255,255,1],s=ye;e.fillColor=[t[0]*s[0]/255,t[1]*s[1]/255,t[2]*s[2]/255,t[3]*s[3]]}else e.borderColor=ue;e.lineWidth=s?we:fe,this._rects.push(e)}_calculateLayerScrollRects(e){const t=e.scrollRects();for(let s=0;s<t.length;++s){const i=new L(e,s),r=new be(i);r.calculateVerticesFromRect(e,t[s].rect,this._calculateScrollRectDepth(e,s)),r.fillColor=ge,this._appendRect(r)}}_calculateLayerTileRects(e){const t=this._textureManager.tilesForLayer(e);for(let s=0;s<t.length;++s){const i=t[s];if(!i.texture)continue;const r=new x(e,{rect:i.rect,snapshot:i.snapshot}),n=new be(r);this._snapshotLayers.has(e)||this._snapshotLayers.set(e,r),n.calculateVerticesFromRect(e,i.rect,this._depthForLayer(e)+1),n.texture=i.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 P(e),s=new be(t);s.setVertices(e.quad(),this._depthForLayer(e)),s.texture=this._layerTexture.texture,this._appendRect(s)}else this._showPaints()&&this._layerTree&&this._layerTree.forEachLayer(this._calculateLayerTileRects.bind(this))}_makeColorsArray(e){let t=[];const s=[e[0]/255,e[1]/255,e[2]/255,e[3]];for(let e=0;e<4;e++)t=t.concat(s);return t}_setVertexAttribute(e,t,s){const i=this._gl;if(!i)return;const r=i.createBuffer();i.bindBuffer(i.ARRAY_BUFFER,r),i.bufferData(i.ARRAY_BUFFER,new Float32Array(t),i.STATIC_DRAW),i.vertexAttribPointer(e,s,i.FLOAT,!1,0,0)}_drawRectangle(e,t,s,i){const r=this._gl;if(s=s||[255,255,255,1],!this._shaderProgram)return;const n=ee.get(this._shaderProgram),o=se.get(this._shaderProgram),a=te.get(this._shaderProgram);if(void 0!==n&&this._setVertexAttribute(n,e,3),void 0!==o&&this._setVertexAttribute(o,[0,1,1,1,1,0,0,0],2),void 0!==a&&this._setVertexAttribute(a,this._makeColorsArray(s),s.length),!r)return;const l=re.get(this._shaderProgram);i?l&&(r.activeTexture(r.TEXTURE0),r.bindTexture(r.TEXTURE_2D,i),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,s){this._gl&&this._drawRectangle(e,this._gl.TRIANGLE_FAN,s,t)}_drawViewportAndChrome(){if(!this._layerTree)return;const e=this._layerTree.viewportSize();if(!e)return;const t=!g.Settings.instance().moduleSetting("frameViewerHideChromeWindow").get()&&this._chromeTextures.length>=3&&this._chromeTextures.indexOf(void 0)<0,s=(this._maxDepth+1)*Ce,i=Math.ceil(ve*this._scale);let r=[e.width,0,s,e.width,e.height,s,0,e.height,s,0,0,s];if(!this._gl)return;if(this._gl.lineWidth(i),this._drawRectangle(r,t?this._gl.LINE_STRIP:this._gl.LINE_LOOP,me),!t)return;const n=this._layerTree.viewportSize();if(!n)return;const o=ve/2,a=n.width+2*o;if(this._chromeTextures[0]&&this._chromeTextures[2]){const e=ne.get(this._chromeTextures[0])||{naturalHeight:0,naturalWidth:0},t=e.naturalHeight,i=ne.get(this._chromeTextures[2])||{naturalHeight:0,naturalWidth:0},n=a-e.naturalWidth-i.naturalWidth;let l=-o;const h=-t;for(let e=0;e<this._chromeTextures.length;++e){const i=this._chromeTextures[e];if(!i)continue;const o=ne.get(i);if(!o)continue;const c=1===e?n:o.naturalWidth;if(c<0||l+c>a)break;r=[l,h,s,l+c,h,s,l+c,h+t,s,l,h+t,s],this._drawTexture(r,this._chromeTextures[e]),l+=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,s=this._canvasElement.height;this._calculateDepthsAndVisibility(),this._calculateRects(),this._updateTransformAndConstraints(),e.viewport(0,0,t,s),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),this._rects.forEach(this._drawViewRect.bind(this)),this._drawViewportAndChrome()}_webglDisabledBanner(){const t=this.contentElement.ownerDocument.createDocumentFragment();return t.createChild("div").textContent=$(Z.cantDisplayLayers),t.createChild("div").textContent=$(Z.webglSupportIsDisabledInYour),t.appendChild(e.getFormatLocalizedString(J,Z.checkSForPossibleReasons,{PH1:u.XLink.create("about:gpu")})),t}_selectionFromEventPoint(e){const t=e;if(!this._layerTree)return null;let s=1/0,i=null;const r=(new WebKitCSSMatrix).scale(1,-1,-1).translate(-1,-1,0).multiply(this._projectionMatrix),n=(t.clientX-this._canvasElement.totalOffsetLeft())*window.devicePixelRatio,o=-(t.clientY-this._canvasElement.totalOffsetTop())*window.devicePixelRatio;return this._rects.forEach((function(e){if(!e.relatedObject)return;const t=e.intersectWithLine(r,n,o);t&&t<s&&(s=t,i=e.relatedObject)})),i}_createVisibilitySetting(e,t,s,i){const r=g.Settings.instance().createSetting(t,s);return r.setTitle($(e)),r.addChangeListener(this._update,this),i.appendToolbarItem(new d.ToolbarSettingCheckbox(r)),r}_initToolbar(){this._panelToolbar=this._transformController.toolbar(),this.contentElement.appendChild(this._panelToolbar.element),this._showSlowScrollRectsSetting=this._createVisibilitySetting($(Z.slowScrollRects),"frameViewerShowSlowScrollRects",!0,this._panelToolbar),this._showPaintsSetting=this._createVisibilitySetting($(Z.paints),"frameViewerShowPaints",!0,this._panelToolbar),this._showPaintsSetting.addChangeListener(this._updatePaints,this),g.Settings.instance().moduleSetting("frameViewerHideChromeWindow").addChangeListener(this._update,this)}_onContextMenu(e){const t=new c.ContextMenu(e);t.defaultSection().appendItem($(Z.resetView),(()=>this._transformController.resetAndNotify()),!1);const s=this._selectionFromEventPoint(e);s&&"Snapshot"===s.type()&&t.defaultSection().appendItem($(Z.showPaintProfiler),this.dispatchEventToListeners.bind(this,le.PaintProfilerRequested,s),!1),this._layerViewHost.showContextMenu(t,s)}_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._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(le.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 ae,le;!function(e){e.Hovered="hovered",e.Selected="selected"}(ae||(ae={})),function(e){e.PaintProfilerRequested="PaintProfilerRequested",e.ScaleChanged="ScaleChanged"}(le||(le={}));const he={RepaintsOnScroll:$(Z.repaintsOnScroll),TouchEventHandler:$(Z.touchEventListener),WheelEventHandler:$(Z.mousewheelEventListener)},ce="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}",de="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}",_e=[0,0,255,1],pe=[0,255,0,1],ue=[0,0,0,1],me=[160,160,160,1],ge=[178,100,100,.6],ye=[200,200,255,1],fe=1,we=2,ve=3,Ce=20,Te=4;class Se{constructor(e){this._textureUpdatedCallback=e,this._throttler=new f.Throttler(0),this._scale=0,this._active=!1,this.reset()}static _createTextureForImage(e,t){if(!e)throw new Error("WebGLRenderingContext not provided");const s=e.createTexture();if(!s)throw new Error("Unable to create texture");return ne.set(s,t),e.bindTexture(e.TEXTURE_2D,s),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),s}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,s=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)))})),s.length||this.forceUpdate();for(const e of s){if(t.has(e))continue;const s=this._tilesByLayer.get(e);s&&s.forEach((e=>e.dispose())),this._tilesByLayer.delete(e)}}_setSnapshotsForLayer(e,t){const s=new Map((this._tilesByLayer.get(e)||[]).map((e=>[e.snapshot,e]))),i=[],r=[];for(const e of t){const t=s.get(e.snapshot);t?(r.push(t),s.delete(e.snapshot)):i.push(new Pe(e))}this._tilesByLayer.set(e,r.concat(i));for(const e of s.values())e.dispose();const n=this._gl;return n&&this._scale?Promise.all(i.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 be{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,s){const i=e[0],r=e[1],n=e[2],o=e[3],a=e[4],l=e[5],h=e[6],c=e[7],d=i+t*(n-i),_=r+t*(o-r);return[d+s*(h+t*(a-h)-d),_+s*(c+t*(l-c)-_)]}calculateVerticesFromRect(e,t,s){const i=e.quad(),r=t.x/e.width(),n=(t.x+t.width)/e.width(),o=t.y/e.height(),a=(t.y+t.height)/e.height(),l=this._calculatePointOnQuad(i,r,o).concat(this._calculatePointOnQuad(i,n,o)).concat(this._calculatePointOnQuad(i,n,a)).concat(this._calculatePointOnQuad(i,r,a));this.setVertices(l,s)}intersectWithLine(e,t,s){let i;const r=[];for(i=0;i<4;++i)r[i]=p.multiplyVectorByMatrixAndNormalize(new p.Vector(this.vertices[3*i],this.vertices[3*i+1],this.vertices[3*i+2]),e);const n=p.crossProduct(p.subtract(r[1],r[0]),p.subtract(r[2],r[1])),o=n.x,a=n.y,l=n.z,h=-(-(o*r[0].x+a*r[0].y+l*r[0].z)+o*t+a*s)/l,c=new p.Vector(t,s,h),d=r.map(p.subtract.bind(null,c));for(i=0;i<d.length;++i){if(p.scalarProduct(n,p.crossProduct(d[i],d[(i+1)%d.length]))<0)return}return h}}class Pe{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 s=await this.snapshot.replay(t),i=s?await a.loadImage(s):null;this.texture=i?Se._createTextureForImage(e,i):null}}var Le=Object.freeze({__proto__:null,UIStrings:Z,Layers3DView:oe,get OutlineType(){return ae},get Events(){return le},ScrollRectTitles:he,FragmentShader:ce,VertexShader:de,HoveredBorderColor:_e,SelectedBorderColor:pe,BorderColor:ue,ViewportBorderColor:me,ScrollRectBackgroundColor:ge,HoveredImageMaskColor:ye,BorderWidth:fe,SelectedBorderWidth:we,ViewportBorderWidth:ve,LayerSpacing:Ce,ScrollRectSpacing:Te,LayerTextureManager:Se,Rectangle:be,Tile:Pe});const xe={profiling:"Profiling…",shapes:"Shapes",bitmap:"Bitmap",text:"Text",misc:"Misc",profilingResults:"Profiling results",commandLog:"Command Log"},Ee=e.registerUIStrings("layer_viewer/PaintProfilerView.ts",xe),Re=e.getLocalizedString.bind(void 0,Ee);let Ae=null,Oe=null;class Ie extends n.HBox{constructor(e){super(!0),this.registerRequiredCSS("layer_viewer/paintProfiler.css",{enableLegacyPatching:!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=Re(xe.profiling),this._pieChart=new w.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._selectionWindow=new v.Window(this._canvasContainer),this._selectionWindow.addEventListener(v.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 Ae||(Ae={shapes:new ke("shapes",Re(xe.shapes),"rgb(255, 161, 129)"),bitmap:new ke("bitmap",Re(xe.bitmap),"rgb(136, 196, 255)"),text:new ke("text",Re(xe.text),"rgb(180, 255, 137)"),misc:new ke("misc",Re(xe.misc),"rgb(206, 160, 255)")}),Ae}static _initLogItemCategories(){if(!Oe){const e=Ie.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,Oe=t}return Oe}static _categoryForLogItem(e){const t=s.toTitleCase(e.method),i=Ie._initLogItemCategories();let r=i[t];return r||(r=Ie.categories().misc,i[t]=r),r}onResize(){this._update()}async setSnapshotAndLog(e,t,s){if(this._reset(),this._snapshot=e,this._snapshot&&this._snapshot.addReference(),this._log=t,this._logCategories=this._log.map(Ie._categoryForLogItem),!e)return this._update(),this._populatePieChart(0,[]),void this._selectionWindow.setEnabled(!1);this._selectionWindow.setEnabled(!0),this._progressBanner.classList.remove("hidden"),this._updateImage();const i=await e.profile(s);this._progressBanner.classList.add("hidden"),this._profiles=i,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 s=0;const i=[],r=[];let n={};for(let e=0,o=0,a=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];a+=t,n[l]=(n[l]||0)+t}if(++e,e-o===this._samplesPerBar||e===t){const t=this._profiles.length*(e-o);for(l in a/=t,n)n[l]/=t;i.push(a),r.push(n),a>s&&(s=a),a=0,n={},o=e}}const o=4*window.devicePixelRatio,a=(this._canvas.height-o-this._minBarHeight)/s;for(let e=0;e<i.length;++e){for(const t in r[e])r[e][t]*=(i[e]*a+this._minBarHeight)/i[e];this._renderBar(e,r[e])}}_renderBar(e,t){const s=Ie.categories();let i=0;const r=this._barPaddingWidth+e*this._outerBarWidth;for(const e in s){if(!t[e])continue;i+=t[e];const n=this._canvas.height-i;this._context.fillStyle=s[e].color,this._context.fillRect(r,n,this._innerBarWidth,t[e])}}_onWindowChanged(){this.dispatchEventToListeners(He.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 s={};for(let i=e.left;i<e.right;++i){const e=this._log[i],r=Ie._categoryForLogItem(e);s[r.color]=s[r.color]||0;for(let i=0;i<this._profiles.length;++i){const n=this._profiles[i][e.commandIndex];t+=n,s[r.color]+=n}}const i=[];for(const e in s)i.push({value:s[e]/this._profiles.length,color:e,title:""});return{total:t/this._profiles.length,slices:i}}_populatePieChart(e,t){this._pieChart.data={chartName:Re(xe.profilingResults),size:55,formatter:this._formatPieChartTime.bind(this),showLegend:!1,total:e,slices:t}}_formatPieChartTime(e){return Number.millisToString(1e3*e,!0)}selectionWindow(){if(!this._log)return null;const e=(this._selectionWindow.windowLeft||0)*this._canvas.width,s=(this._selectionWindow.windowRight||0)*this._canvas.width,i=Math.floor(e/this._outerBarWidth),r=Math.floor((s+this._innerBarWidth-this._barPaddingWidth/2)/this._outerBarWidth);return{left:t.clamp(i*this._samplesPerBar,0,this._log.length-1),right:t.clamp(r*this._samplesPerBar,0,this._log.length)}}_updateImage(){let e,t;delete this._updateImageTimer;const s=this.selectionWindow();this._profiles&&this._profiles.length&&s&&(e=this._log[s.left].commandIndex,t=this._log[s.right-1].commandIndex);const i=this._pendingScale;this._snapshot&&this._snapshot.replay(i,e,t).then((e=>{e&&(this._scale=i,this._showImageCallback(e))}))}_reset(){this._snapshot&&this._snapshot.release(),this._snapshot=null,this._profiles=null,this._selectionWindow.reset(),this._selectionWindow.setEnabled(!1)}}var He;(He||(He={})).WindowChanged="WindowChanged";class Be extends m.ThrottledWidget{constructor(){super(),this.setMinimumSize(100,25),this.element.classList.add("overflow-auto"),this._treeOutline=new h.TreeOutlineInShadow,l.setAccessibleName(this._treeOutline.contentElement,Re(xe.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 De(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 De extends h.TreeElement{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)Me._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 s="",i=0;for(const r in e){if(++i>4||"object"==typeof e[r]||"string"==typeof e[r]&&e[r].length>100)return t;s&&(s+=", "),s+=e[r]}return s}_paramsToString(e){let t="";for(const s in e)t&&(t+=", "),t+=this._paramToString(e[s],s);return t}_update(){const e=document.createDocumentFragment();a.createTextChild(e,this._logItem.method+"("+this._paramsToString(this._logItem.params)+")"),this.title=e}}class Me extends h.TreeElement{constructor(e){super(),this._property=e}static _appendLogPropertyItem(e,t,s){const i=new Me({name:t,value:s});if(e.appendChild(i),s&&"object"==typeof s)for(const e in s)Me._appendLogPropertyItem(i,e,s[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 ke{constructor(e,t,s){this.name=e,this.title=t,this.color=s}}var Fe=Object.freeze({__proto__:null,UIStrings:xe,PaintProfilerView:Ie,get Events(){return He},PaintProfilerCommandLogView:Be,LogTreeElement:De,LogPropertyTreeElement:Me,PaintProfilerCategory:ke});export{M as LayerDetailsView,j as LayerTreeOutline,E as LayerViewHost,Le as Layers3DView,Fe as PaintProfilerView,Q as TransformController};

package/static/devtools/layer_viewer/layer_viewer_module.js

@@ -0,0 +1 @@
+import*as RootModule from'../root/root.js';RootModule.Runtime.cachedResources.set("layer_viewer/layers3DView.css","/*\n * Copyright 2016 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.layers-3d-view {\n  overflow: hidden;\n  user-select: none;\n}\n\n.toolbar {\n  background-color: var(--toolbar-bg-color);\n  border-bottom: var(--divider-border);\n}\n\ncanvas {\n  flex: 1 1;\n}\n\n.layers-3d-view > canvas:focus-visible {\n  outline: auto 5px -webkit-focus-ring-color;\n}\n\n/*# sourceURL=layer_viewer/layers3DView.css */");RootModule.Runtime.cachedResources.set("layer_viewer/paintProfiler.css","/*\n * Copyright 2016 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\n.paint-profiler-overview {\n  background-color: #eee;\n}\n\n.paint-profiler-canvas-container {\n  flex: auto;\n  position: relative;\n}\n\n.paint-profiler-pie-chart {\n  width: 60px !important;\n  height: 60px !important;\n  padding: 2px;\n  overflow: hidden;\n  font-size: 10px;\n}\n\n.paint-profiler-canvas-container canvas {\n  z-index: 200;\n  background-color: var(--color-background);\n  opacity: 95%;\n  height: 100%;\n  width: 100%;\n}\n\n.paint-profiler-canvas-container .overview-grid-window-resizer {\n  z-index: 2000;\n}\n\n/*# sourceURL=layer_viewer/paintProfiler.css */");RootModule.Runtime.cachedResources.set("layer_viewer/layerDetailsView.css","/*\n * Copyright 2016 The Chromium Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style license that can be\n * found in the LICENSE file.\n */\n\ntable td {\n  padding-left: 8px;\n}\n\ntable td:first-child {\n  font-weight: bold;\n}\n\n.scroll-rect.active {\n  background-color: rgb(100 100 100 / 20%);\n}\n\nul {\n  list-style: none;\n  padding-inline-start: 0;\n  margin-block-start: 0;\n  margin-block-end: 0;\n}\n\n.devtools-link.link-margin {\n  margin: 8px;\n  display: inline-block;\n}\n\n/*# sourceURL=layer_viewer/layerDetailsView.css */");

package/static/devtools/layers/layers-legacy.js

@@ -0,0 +1 @@
+import{LayerTreeModel as e,LayersPanel as r}from"./layers.js";self.Layers=self.Layers||{},Layers=Layers||{},Layers.LayerTreeModel=e.LayerTreeModel,Layers.LayerTreeModel.Events=e.Events,Layers.AgentLayer=e.AgentLayer,Layers.LayersPanel=r.LayersPanel;

package/static/devtools/layers/layers-meta.js

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

package/static/devtools/layers/layers.js

@@ -0,0 +1 @@
+import{PaintProfilerView as e,LayerViewHost as t,LayerTreeOutline as i,Layers3DView as r,LayerDetailsView as a}from"../layer_viewer/layer_viewer.js";import{SplitWidget as s,Geometry as n,Panel as l,TabbedPane as o}from"../ui/ui.js";import{Throttler as h}from"../common/common.js";import{i18n as d}from"../i18n/i18n.js";import{SDKModel as _,PaintProfiler as y,ResourceTreeModel as c,LayerTreeBase as u}from"../sdk/sdk.js";class P extends s.SplitWidget{constructor(t){super(!0,!1),this._logTreeView=new e.PaintProfilerCommandLogView,this.setSidebarWidget(this._logTreeView),this._paintProfilerView=new e.PaintProfilerView(t),this.setMainWidget(this._paintProfilerView),this._paintProfilerView.addEventListener(e.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((i=>t.call(this,e,i)))}setScale(e){this._paintProfilerView.setScale(e)}_onWindowChanged(){this._logTreeView.updateWindow(this._paintProfilerView.selectionWindow())}}var w,p=Object.freeze({__proto__:null,LayerPaintProfilerView:P});class f extends _.SDKModel{constructor(e){super(e),this._layerTreeAgent=e.layerTreeAgent(),e.registerLayerTreeDispatcher(new T(this)),this._paintProfilerModel=e.model(y.PaintProfilerModel);const t=e.model(c.ResourceTreeModel);t&&t.addEventListener(c.Events.MainFrameNavigated,this._onMainFrameNavigated,this),this._layerTree=null,this._throttler=new h.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._layerTree||(this._layerTree=new g(this)),await this._layerTreeAgent.invoke_enable()}layerTree(){return this._layerTree}async _layerTreeChanged(e){this._enabled&&this._throttler.schedule(this._innerSetLayers.bind(this,e))}async _innerSetLayers(e){const t=this._layerTree;await t.setLayers(e),this._lastPaintRectByLayerId||(this._lastPaintRectByLayerId=new Map);for(const e of this._lastPaintRectByLayerId.keys()){const i=this._lastPaintRectByLayerId.get(e),r=t.layerById(e);r&&(r._lastPaintRect=i)}this._lastPaintRectByLayerId=new Map,this.dispatchEventToListeners(w.LayerTreeChanged)}_layerPainted(e,t){if(!this._enabled)return;const i=this._layerTree.layerById(e);if(!i)return this._lastPaintRectByLayerId||(this._lastPaintRectByLayerId=new Map),void this._lastPaintRectByLayerId.set(e,t);i._didPaint(t),this.dispatchEventToListeners(w.LayerPainted,i)}_onMainFrameNavigated(){this._layerTree=null,this._enabled&&this._forceEnable()}}_.SDKModel.register(f,_.Capability.DOM,!1),function(e){e.LayerTreeChanged="LayerTreeChanged",e.LayerPainted="LayerPainted"}(w||(w={}));class g extends u.LayerTreeBase{constructor(e){super(e.target()),this._layerTreeModel=e}async setLayers(e){if(!e)return void this._innerSetLayers(e);const t=new Set;for(let i=0;i<e.length;++i){const r=e[i].backendNodeId;r&&!this.backendNodeIdToNode().has(r)&&t.add(r)}await this.resolveBackendNodeIds(t),this._innerSetLayers(e)}_innerSetLayers(e){if(this.setRoot(null),this.setContentRoot(null),!e)return;let t;const i=this.layersById;this.layersById=new Map;for(let r=0;r<e.length;++r){const a=e[r].layerId;let s=i.get(a);s?s._reset(e[r]):s=new m(this._layerTreeModel,e[r]),this.layersById.set(a,s);const n=e[r].backendNodeId;n&&s._setNode(this.backendNodeIdToNode().get(n)||null),!this.contentRoot()&&s.drawsContent()&&this.setContentRoot(s);const l=s.parentId();if(l){const e=this.layersById.get(l);if(!e)throw new Error(`Missing parent ${l} for layer ${a}`);e.addChild(s)}else t&&console.assert(!1,"Multiple root layers"),t=s}t&&(this.setRoot(t),t._calculateQuad(new WebKitCSSMatrix))}}class m{constructor(e,t){this._layerTreeModel=e,this._reset(t)}id(){return this._layerPayload.layerId}parentId(){return this._layerPayload.parentLayerId||null}parent(){return this._parent}isRoot(){return!this.parentId()}children(){return this._children}addChild(e){const t=e;t._parent&&console.assert(!1,"Child already has a parent"),this._children.push(t),t._parent=this}_setNode(e){this._node=e}node(){return this._node||null}nodeForSelfOrAncestor(){let e=this;for(;e;e=e._parent)if(e._node)return e._node;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._quad}anchorPoint(){return[this._layerPayload.anchorX||0,this._layerPayload.anchorY||0,this._layerPayload.anchorZ||0]}invisible(){return this._layerPayload.invisible||!1}paintCount(){return this._paintCount||this._layerPayload.paintCount}lastPaintRect(){return this._lastPaintRect||null}scrollRects(){return this._scrollRects}stickyPositionConstraint(){return this._stickyPositionConstraint||null}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._lastPaintRect=e,this._paintCount=this.paintCount()+1,this._image=null}_reset(e){this._node=null,this._children=[],this._parent=null,this._paintCount=0,this._layerPayload=e,this._image=null,this._scrollRects=this._layerPayload.scrollRects||[],this._stickyPositionConstraint=this._layerPayload.stickyPositionConstraint?new u.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 t=(new WebKitCSSMatrix).translate(this._layerPayload.offsetX,this._layerPayload.offsetY);if(this._layerPayload.transform){const e=this._matrixFromArray(this._layerPayload.transform),i=new n.Vector(this._layerPayload.width*this.anchorPoint()[0],this._layerPayload.height*this.anchorPoint()[1],this.anchorPoint()[2]),r=n.multiplyVectorByMatrixAndNormalize(i,t),a=(new WebKitCSSMatrix).translate(-r.x,-r.y,-r.z);t=a.inverse().multiply(e.multiply(a.multiply(t)))}return t=e.multiply(t),t}_createVertexArrayForRect(e,t){return[0,0,0,e,0,0,e,t,0,0,t,0]}_calculateQuad(e){const t=this._calculateTransformToViewport(e);this._quad=[];const i=this._createVertexArrayForRect(this._layerPayload.width,this._layerPayload.height);for(let e=0;e<4;++e){const r=n.multiplyVectorByMatrixAndNormalize(new n.Vector(i[3*e],i[3*e+1],i[3*e+2]),t);this._quad.push(r.x,r.y)}this._children.forEach((function(e){e._calculateQuad(t)}))}}class T{constructor(e){this._layerTreeModel=e}layerTreeDidChange({layers:e}){this._layerTreeModel._layerTreeChanged(e||null)}layerPainted({layerId:e,clip:t}){this._layerTreeModel._layerPainted(e,t)}}var L=Object.freeze({__proto__:null,LayerTreeModel:f,get Events(){return w},AgentLayerTree:g,AgentLayer:m});const b={details:"Details",profiler:"Profiler"},V=d.registerUIStrings("layers/LayersPanel.ts",b),C=d.getLocalizedString.bind(void 0,V);let S;class v extends l.PanelWithSidebar{constructor(){super("layers",225),this._model=null,_.TargetManager.instance().observeTargets(this),this._layerViewHost=new t.LayerViewHost,this._layerTreeOutline=new i.LayerTreeOutline(this._layerViewHost),this._layerTreeOutline.addEventListener(i.Events.PaintProfilerRequested,this._onPaintProfileRequested,this),this.panelSidebarElement().appendChild(this._layerTreeOutline.element),this.setDefaultFocusedElement(this._layerTreeOutline.element),this._rightSplitWidget=new s.SplitWidget(!1,!0,"layerDetailsSplitViewState"),this.splitWidget().setMainWidget(this._rightSplitWidget),this._layers3DView=new r.Layers3DView(this._layerViewHost),this._rightSplitWidget.setMainWidget(this._layers3DView),this._layers3DView.addEventListener(r.Events.PaintProfilerRequested,this._onPaintProfileRequested,this),this._layers3DView.addEventListener(r.Events.ScaleChanged,this._onScaleChanged,this),this._tabbedPane=new o.TabbedPane,this._rightSplitWidget.setSidebarWidget(this._tabbedPane),this._layerDetailsView=new a.LayerDetailsView(this._layerViewHost),this._layerDetailsView.addEventListener(a.Events.PaintProfilerRequested,this._onPaintProfileRequested,this),this._tabbedPane.appendTab(M.Details,C(b.details),this._layerDetailsView),this._paintProfilerView=new P(this._showImage.bind(this)),this._tabbedPane.addEventListener(o.Events.TabClosed,this._onTabClosed,this),this._updateThrottler=new h.Throttler(100)}static instance(e={forceNew:null}){const{forceNew:t}=e;return S&&!t||(S=new v),S}focus(){this._layerTreeOutline.focus()}wasShown(){super.wasShown(),this._model&&this._model.enable()}willHide(){this._model&&this._model.disable(),super.willHide()}targetAdded(e){this._model||(this._model=e.model(f),this._model&&(this._model.addEventListener(w.LayerTreeChanged,this._onLayerTreeUpdated,this),this._model.addEventListener(w.LayerPainted,this._onLayerPainted,this),this.isShowing()&&this._model.enable()))}targetRemoved(e){this._model&&this._model.target()===e&&(this._model.removeEventListener(w.LayerTreeChanged,this._onLayerTreeUpdated,this),this._model.removeEventListener(w.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(c.ResourceTreeModel);if(e){const t=e.mainFrame;if(t){const e=t.url;this.element.setAttribute("test-current-url",e)}}}return Promise.resolve()}_onLayerPainted(e){if(!this._model)return;const t=e.data,i=this._layerViewHost.selection();i&&i.layer()===t&&this._layerDetailsView.update(),this._layers3DView.updateLayerSnapshot(t)}_onPaintProfileRequested(e){const t=e.data;this._layers3DView.snapshotForSelection(t).then((e=>{e&&(this._layerBeingProfiled=t.layer(),this._tabbedPane.hasTab(M.Profiler)||this._tabbedPane.appendTab(M.Profiler,C(b.profiler),this._paintProfilerView,void 0,!0,!0),this._tabbedPane.selectTab(M.Profiler),this._paintProfilerView.profile(e.snapshot))}))}_onTabClosed(e){e.data.tabId===M.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 M={Details:"details",Profiler:"profiler"};var R=Object.freeze({__proto__:null,UIStrings:b,LayersPanel:v,DetailsViewTabs:M});export{p as LayerPaintProfilerView,L as LayerTreeModel,R as LayersPanel};

package/static/devtools/layers_test_runner/layers_test_runner.js

@@ -0,0 +1,156 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview using private properties isn't a Closure violation in tests.
+ */
+self.LayersTestRunner = self.LayersTestRunner || {};
+
+LayersTestRunner.layerTreeModel = function() {
+  if (!LayersTestRunner._layerTreeModel) {
+    LayersTestRunner._layerTreeModel = TestRunner.mainTarget.model(Layers.LayerTreeModel);
+  }
+
+  return LayersTestRunner._layerTreeModel;
+};
+
+LayersTestRunner.labelForLayer = function(layer) {
+  const node = layer.nodeForSelfOrAncestor();
+  let label = (node ? Elements.DOMPath.fullQualifiedSelector(node, false) : '<invalid node id>');
+  const height = layer.height();
+  const width = layer.width();
+
+  if (height <= 200 && width <= 200) {
+    label += ' ' + height + 'x' + width;
+  }
+
+  if (typeof layer.__extraData !== 'undefined') {
+    label += ' (' + layer.__extraData + ')';
+  }
+
+  return label;
+};
+
+LayersTestRunner.dumpLayerTree = function(prefix, root) {
+  if (!prefix) {
+    prefix = '';
+  }
+
+  if (!root) {
+    root = LayersTestRunner.layerTreeModel().layerTree().contentRoot();
+
+    if (!root) {
+      TestRunner.addResult('No layer root, perhaps not in the composited mode! ');
+      TestRunner.completeTest();
+      return;
+    }
+  }
+
+  TestRunner.addResult(prefix + LayersTestRunner.labelForLayer(root));
+  root.children().forEach(LayersTestRunner.dumpLayerTree.bind(LayersTestRunner, prefix + '    '));
+};
+
+LayersTestRunner.dumpLayers3DView = function(prefix, root) {
+  if (!prefix) {
+    prefix = '';
+  }
+
+  if (!root) {
+    root = UI.panels.layers._layers3DView._rotatingContainerElement;
+  }
+
+  if (root.__layer) {
+    TestRunner.addResult(prefix + LayersTestRunner.labelForLayer(root.__layer));
+  }
+
+  for (let element = root.firstElementChild; element; element = element.nextSibling) {
+    LayersTestRunner.dumpLayers3DView(prefix + '    ', element);
+  }
+};
+
+LayersTestRunner.evaluateAndWaitForTreeChange = async function(expression) {
+  await TestRunner.evaluateInPageAnonymously(expression);
+  return LayersTestRunner.layerTreeModel().once(Layers.LayerTreeModel.Events.LayerTreeChanged);
+};
+
+LayersTestRunner.findLayerByNodeIdAttribute = function(nodeIdAttribute) {
+  let result;
+
+  function testLayer(layer) {
+    const node = layer.node();
+
+    if (!node) {
+      return false;
+    }
+
+    if (!node || node.getAttribute('id') !== nodeIdAttribute) {
+      return false;
+    }
+
+    result = layer;
+    return true;
+  }
+
+  LayersTestRunner.layerTreeModel().layerTree().forEachLayer(testLayer);
+
+  if (!result) {
+    TestRunner.addResult('ERROR: No layer for ' + nodeIdAttribute);
+  }
+
+  return result;
+};
+
+LayersTestRunner.requestLayers = function() {
+  LayersTestRunner.layerTreeModel().enable();
+  return LayersTestRunner.layerTreeModel().once(Layers.LayerTreeModel.Events.LayerTreeChanged);
+};
+
+LayersTestRunner.dispatchMouseEvent = function(eventType, button, element, offsetX, offsetY) {
+  const totalOffset = element.totalOffset();
+
+  const eventArguments = {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+    screenX: totalOffset.left - element.scrollLeft + offsetX,
+    screenY: totalOffset.top - element.scrollTop + offsetY,
+    clientX: totalOffset.left + offsetX,
+    clientY: totalOffset.top + offsetY,
+    button: button,
+    composed: true
+  };
+
+  if (eventType === 'mouseout') {
+    eventArguments.screenX = 0;
+    eventArguments.screenY = 0;
+    eventArguments.clientX = 0;
+    eventArguments.clientY = 0;
+  }
+
+  element.dispatchEvent(new MouseEvent(eventType, eventArguments));
+};
+
+LayersTestRunner.findLayerTreeElement = function(layer) {
+  const element = LayerViewer.LayerTreeElement.layerToTreeElement.get(layer);
+  element.reveal();
+  return element.listItemElement;
+};
+
+LayersTestRunner.dispatchMouseEventToLayerTree = function(eventType, button, layer) {
+  const element = LayersTestRunner.findLayerTreeElement(layer);
+  TestRunner.assertTrue(Boolean(element));
+  LayersTestRunner.dispatchMouseEvent(eventType, button, element, element.clientWidth >> 1, element.clientHeight >> 1);
+};
+
+LayersTestRunner.dumpSelectedStyles = function(message, element) {
+  const classes = [];
+  if (element.classList.contains('selected')) {
+    classes.push('selected');
+  }
+  if (element.classList.contains('hovered')) {
+    classes.push('hovered');
+  }
+
+  TestRunner.addResult(message + ': ' + classes.join(', '));
+};

package/static/devtools/lighthouse/lighthouse-legacy.js

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

package/static/devtools/lighthouse/lighthouse-meta.js

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