import*as Common from"../common/common.js";import*as i18n from"../i18n/i18n.js";import*as LayerViewer from"../layer_viewer/layer_viewer.js";import*as SDK from"../sdk/sdk.js";import*as UI from"../ui/ui.js";import{LayerPaintProfilerView}from"./LayerPaintProfilerView.js";import{Events,LayerTreeModel}from"./LayerTreeModel.js";const UIStrings={details:"Details",profiler:"Profiler"},str_=i18n.i18n.registerUIStrings("layers/LayersPanel.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);let layersPanelInstance;export class LayersPanel extends UI.Panel.PanelWithSidebar{constructor(){super("layers",225),this._model=null,SDK.SDKModel.TargetManager.instance().observeTargets(this),this._layerViewHost=new LayerViewer.LayerViewHost.LayerViewHost,this._layerTreeOutline=new LayerViewer.LayerTreeOutline.LayerTreeOutline(this._layerViewHost),this._layerTreeOutline.addEventListener(LayerViewer.LayerTreeOutline.Events.PaintProfilerRequested,this._onPaintProfileRequested,this),this.panelSidebarElement().appendChild(this._layerTreeOutline.element),this.setDefaultFocusedElement(this._layerTreeOutline.element),this._rightSplitWidget=new UI.SplitWidget.SplitWidget(!1,!0,"layerDetailsSplitViewState"),this.splitWidget().setMainWidget(this._rightSplitWidget),this._layers3DView=new LayerViewer.Layers3DView.Layers3DView(this._layerViewHost),this._rightSplitWidget.setMainWidget(this._layers3DView),this._layers3DView.addEventListener(LayerViewer.Layers3DView.Events.PaintProfilerRequested,this._onPaintProfileRequested,this),this._layers3DView.addEventListener(LayerViewer.Layers3DView.Events.ScaleChanged,this._onScaleChanged,this),this._tabbedPane=new UI.TabbedPane.TabbedPane,this._rightSplitWidget.setSidebarWidget(this._tabbedPane),this._layerDetailsView=new LayerViewer.LayerDetailsView.LayerDetailsView(this._layerViewHost),this._layerDetailsView.addEventListener(LayerViewer.LayerDetailsView.Events.PaintProfilerRequested,this._onPaintProfileRequested,this),this._tabbedPane.appendTab(DetailsViewTabs.Details,i18nString(UIStrings.details),this._layerDetailsView),this._paintProfilerView=new LayerPaintProfilerView(this._showImage.bind(this)),this._tabbedPane.addEventListener(UI.TabbedPane.Events.TabClosed,this._onTabClosed,this),this._updateThrottler=new Common.Throttler.Throttler(100)}static instance(e={forceNew:null}){const{forceNew:i}=e;return layersPanelInstance&&!i||(layersPanelInstance=new LayersPanel),layersPanelInstance}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(LayerTreeModel),this._model&&(this._model.addEventListener(Events.LayerTreeChanged,this._onLayerTreeUpdated,this),this._model.addEventListener(Events.LayerPainted,this._onLayerPainted,this),this.isShowing()&&this._model.enable()))}targetRemoved(e){this._model&&this._model.target()===e&&(this._model.removeEventListener(Events.LayerTreeChanged,this._onLayerTreeUpdated,this),this._model.removeEventListener(Events.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(SDK.ResourceTreeModel.ResourceTreeModel);if(e){const i=e.mainFrame;if(i){const e=i.url;this.element.setAttribute("test-current-url",e)}}}return Promise.resolve()}_onLayerPainted(e){if(!this._model)return;const i=e.data,t=this._layerViewHost.selection();t&&t.layer()===i&&this._layerDetailsView.update(),this._layers3DView.updateLayerSnapshot(i)}_onPaintProfileRequested(e){const i=e.data;this._layers3DView.snapshotForSelection(i).then((e=>{e&&(this._layerBeingProfiled=i.layer(),this._tabbedPane.hasTab(DetailsViewTabs.Profiler)||this._tabbedPane.appendTab(DetailsViewTabs.Profiler,i18nString(UIStrings.profiler),this._paintProfilerView,void 0,!0,!0),this._tabbedPane.selectTab(DetailsViewTabs.Profiler),this._paintProfilerView.profile(e.snapshot))}))}_onTabClosed(e){e.data.tabId===DetailsViewTabs.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)}}export const DetailsViewTabs={Details:"details",Profiler:"profiler"};