@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 28 kB
JavaScript
import*as Common from"../../core/common/common.js";import*as Host from"../../core/host/host.js";import*as i18n from"../../core/i18n/i18n.js";import*as Platform from"../../core/platform/platform.js";import*as Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import*as Extensions from"../../models/extensions/extensions.js";import elementsPanelStyles from"./elementsPanel.css.js";import*as Buttons from"../../ui/components/buttons/buttons.js";import*as UI from"../../ui/legacy/legacy.js";import*as TreeOutline from"../../ui/components/tree_outline/tree_outline.js";import{AccessibilityTreeView}from"./AccessibilityTreeView.js";import*as ElementsComponents from"./components/components.js";import{ComputedStyleWidget}from"./ComputedStyleWidget.js";import{ElementsTreeElementHighlighter}from"./ElementsTreeElementHighlighter.js";import{ElementsTreeOutline}from"./ElementsTreeOutline.js";import{MetricsSidebarPane}from"./MetricsSidebarPane.js";import{StylesSidebarPane}from"./StylesSidebarPane.js";import{ColorSwatchPopoverIcon}from"./ColorSwatchPopoverIcon.js";const UIStrings={findByStringSelectorOrXpath:"Find by string, selector, or `XPath`",switchToAccessibilityTreeView:"Switch to Accessibility Tree view",switchToDomTreeView:"Switch to DOM Tree view",showComputedStylesSidebar:"Show Computed Styles sidebar",hideComputedStylesSidebar:"Hide Computed Styles sidebar",computedStylesShown:"Computed Styles sidebar shown",computedStylesHidden:"Computed Styles sidebar hidden",computed:"Computed",styles:"Styles",revealInElementsPanel:"Reveal in Elements panel",nodeCannotBeFoundInTheCurrent:"Node cannot be found in the current page.",theRemoteObjectCouldNotBe:"The remote object could not be resolved to a valid node.",theDeferredDomNodeCouldNotBe:"The deferred `DOM` Node could not be resolved to a valid node.",elementStateS:"Element state: {PH1}",sidePanelToolbar:"Side panel toolbar",sidePanelContent:"Side panel content",domTreeExplorer:"DOM tree explorer"},str_=i18n.i18n.registerUIStrings("panels/elements/ElementsPanel.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),createAccessibilityTreeToggleButton=e=>{const t=new Buttons.Button.Button,n=i18nString(e?UIStrings.switchToDomTreeView:UIStrings.switchToAccessibilityTreeView);return t.data={active:e,variant:"toolbar",iconUrl:new URL("../../Images/person.svg",import.meta.url).toString(),title:n},t.tabIndex=0,t.classList.add("axtree-button"),e&&t.classList.add("active"),t};let elementsPanelInstance;export class ElementsPanel extends UI.Panel.Panel{splitWidget;searchableViewInternal;mainContainer;domTreeContainer;splitMode;accessibilityTreeView;breadcrumbs;stylesWidget;computedStyleWidget;metricsWidget;treeOutlines=new Set;searchResults;currentSearchResultIndex;pendingNodeReveal;adornerManager;adornerSettingsPane;adornersByName;accessibilityTreeButton;domTreeButton;selectedNodeOnReset;hasNonDefaultSelectedNode;searchConfig;omitDefaultSelection;notFirstInspectElement;sidebarPaneView;stylesViewToReveal;cssStyleTrackerByCSSModel;constructor(){super("elements"),this.splitWidget=new UI.SplitWidget.SplitWidget(!0,!0,"elementsPanelSplitViewState",325,325),this.splitWidget.addEventListener(UI.SplitWidget.Events.SidebarSizeChanged,this.updateTreeOutlineVisibleWidth.bind(this)),this.splitWidget.show(this.element),this.searchableViewInternal=new UI.SearchableView.SearchableView(this,null),this.searchableViewInternal.setMinimumSize(25,28),this.searchableViewInternal.setPlaceholder(i18nString(UIStrings.findByStringSelectorOrXpath));const e=this.searchableViewInternal.element;this.mainContainer=document.createElement("div"),this.domTreeContainer=document.createElement("div");const t=document.createElement("div");Root.Runtime.experiments.isEnabled("fullAccessibilityTree")&&this.initializeFullAccessibilityTreeView(),this.mainContainer.appendChild(this.domTreeContainer),e.appendChild(this.mainContainer),e.appendChild(t),UI.ARIAUtils.markAsMain(this.domTreeContainer),UI.ARIAUtils.setLabel(this.domTreeContainer,i18nString(UIStrings.domTreeExplorer)),this.splitWidget.setMainWidget(this.searchableViewInternal),this.splitMode=null,this.mainContainer.id="main-content",this.domTreeContainer.id="elements-content",this.domTreeContainer.tabIndex=-1,Common.Settings.Settings.instance().moduleSetting("domWordWrap").get()&&this.domTreeContainer.classList.add("elements-wrap"),Common.Settings.Settings.instance().moduleSetting("domWordWrap").addChangeListener(this.domWordWrapSettingChanged.bind(this)),t.id="elements-crumbs",this.domTreeButton&&(this.accessibilityTreeView=new AccessibilityTreeView(this.domTreeButton,new TreeOutline.TreeOutline.TreeOutline)),this.breadcrumbs=new ElementsComponents.ElementsBreadcrumbs.ElementsBreadcrumbs,this.breadcrumbs.addEventListener("breadcrumbsnodeselected",(e=>{this.crumbNodeSelected(e)})),t.appendChild(this.breadcrumbs),this.stylesWidget=StylesSidebarPane.instance(),this.computedStyleWidget=new ComputedStyleWidget,this.metricsWidget=new MetricsSidebarPane,Common.Settings.Settings.instance().moduleSetting("sidebarPosition").addChangeListener(this.updateSidebarPosition.bind(this)),this.updateSidebarPosition(),this.cssStyleTrackerByCSSModel=new Map,SDK.TargetManager.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel,this,{scoped:!0}),SDK.TargetManager.TargetManager.instance().addEventListener(SDK.TargetManager.Events.NameChanged,(e=>this.targetNameChanged(e.data))),Common.Settings.Settings.instance().moduleSetting("showUAShadowDOM").addChangeListener(this.showUAShadowDOMChanged.bind(this)),Extensions.ExtensionServer.ExtensionServer.instance().addEventListener(Extensions.ExtensionServer.Events.SidebarPaneAdded,this.extensionSidebarPaneAdded,this),this.currentSearchResultIndex=-1,this.pendingNodeReveal=!1,this.adornerManager=new ElementsComponents.AdornerManager.AdornerManager(Common.Settings.Settings.instance().moduleSetting("adornerSettings")),this.adornerSettingsPane=null,this.adornersByName=new Map}initializeFullAccessibilityTreeView(){this.accessibilityTreeButton=createAccessibilityTreeToggleButton(!1),this.accessibilityTreeButton.addEventListener("click",this.showAccessibilityTree.bind(this)),this.domTreeButton=createAccessibilityTreeToggleButton(!0),this.domTreeButton.addEventListener("click",this.showDOMTree.bind(this)),this.mainContainer.appendChild(this.accessibilityTreeButton)}showAccessibilityTree(){this.accessibilityTreeView&&this.splitWidget.setMainWidget(this.accessibilityTreeView)}showDOMTree(){this.splitWidget.setMainWidget(this.searchableViewInternal);const e=this.selectedDOMNode();if(!e)return;const t=this.treeElementForNode(e);t&&t.select()}static instance(e={forceNew:null}){const{forceNew:t}=e;return elementsPanelInstance&&!t||(elementsPanelInstance=new ElementsPanel),elementsPanelInstance}revealProperty(e){return this.sidebarPaneView&&this.stylesViewToReveal?this.sidebarPaneView.showView(this.stylesViewToReveal).then((()=>{this.stylesWidget.revealProperty(e)})):Promise.resolve()}resolveLocation(e){return this.sidebarPaneView||null}showToolbarPane(e,t){this.stylesWidget.showToolbarPane(e,t)}modelAdded(e){const t=e.parentModel();let n=t?ElementsTreeOutline.forDOMModel(t):null;n||(n=new ElementsTreeOutline(!0,!0),n.setWordWrap(Common.Settings.Settings.instance().moduleSetting("domWordWrap").get()),n.addEventListener(ElementsTreeOutline.Events.SelectedNodeChanged,this.selectedNodeChanged,this),n.addEventListener(ElementsTreeOutline.Events.ElementsTreeUpdated,this.updateBreadcrumbIfNeeded,this),new ElementsTreeElementHighlighter(n,new Common.Throttler.Throttler(100)),this.treeOutlines.add(n)),n.wireToDOMModel(e),this.setupStyleTracking(e.cssModel()),this.isShowing()&&this.wasShown(),this.domTreeContainer.hasFocus()&&n.focus(),e.addEventListener(SDK.DOMModel.Events.DocumentUpdated,this.documentUpdatedEvent,this)}modelRemoved(e){e.removeEventListener(SDK.DOMModel.Events.DocumentUpdated,this.documentUpdatedEvent,this);const t=ElementsTreeOutline.forDOMModel(e);t&&(t.unwireFromDOMModel(e),e.parentModel()||(this.treeOutlines.delete(t),t.element.remove(),this.removeStyleTracking(e.cssModel())))}targetNameChanged(e){const t=e.model(SDK.DOMModel.DOMModel);if(!t)return;ElementsTreeOutline.forDOMModel(t)}updateTreeOutlineVisibleWidth(){if(!this.treeOutlines.size)return;let e=this.splitWidget.element.offsetWidth;this.splitWidget.isVertical()&&(e-=this.splitWidget.sidebarSize());for(const t of this.treeOutlines)t.setVisibleWidth(e)}focus(){this.treeOutlines.size?this.treeOutlines.values().next().value.focus():this.domTreeContainer.focus()}searchableView(){return this.searchableViewInternal}wasShown(){super.wasShown(),UI.Context.Context.instance().setFlavor(ElementsPanel,this),this.registerCSSFiles([elementsPanelStyles]);for(const e of this.treeOutlines)e.element.parentElement!==this.domTreeContainer&&this.domTreeContainer.appendChild(e.element);const e=SDK.TargetManager.TargetManager.instance().models(SDK.DOMModel.DOMModel,{scoped:!0});for(const t of e){if(t.parentModel())continue;const e=ElementsTreeOutline.forDOMModel(t);e&&(e.setVisible(!0),e.rootDOMNode||(t.existingDocument()?(e.rootDOMNode=t.existingDocument(),this.documentUpdated(t)):t.requestDocument()))}}willHide(){SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();for(const e of this.treeOutlines)e.setVisible(!1),this.domTreeContainer.removeChild(e.element);super.willHide(),UI.Context.Context.instance().setFlavor(ElementsPanel,null)}onResize(){this.element.window().requestAnimationFrame(this.updateSidebarPosition.bind(this)),this.updateTreeOutlineVisibleWidth()}selectedNodeChanged(e){let t=e.data.node;t&&t.pseudoType()&&!t.parentNode&&(t=null);const{focus:n}=e.data;for(const e of this.treeOutlines)t&&ElementsTreeOutline.forDOMModel(t.domModel())===e||e.selectDOMNode(null);if(t){const e=[ElementsComponents.Helper.legacyNodeToElementsComponentsNode(t)];for(let n=t.parentNode;n;n=n.parentNode)e.push(ElementsComponents.Helper.legacyNodeToElementsComponentsNode(n));this.breadcrumbs.data={crumbs:e,selectedNode:ElementsComponents.Helper.legacyNodeToElementsComponentsNode(t)},this.accessibilityTreeView&&this.accessibilityTreeView.selectedNodeChanged(t)}else this.breadcrumbs.data={crumbs:[],selectedNode:null};if(UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode,t),!t)return;t.setAsInspectedNode(),n&&(this.selectedNodeOnReset=t,this.hasNonDefaultSelectedNode=!0);const s=t.domModel().runtimeModel().executionContexts(),i=t.frameId();for(const e of s)if(e.frameId===i){UI.Context.Context.instance().setFlavor(SDK.RuntimeModel.ExecutionContext,e);break}}documentUpdatedEvent(e){const t=e.data;this.documentUpdated(t),this.removeStyleTracking(t.cssModel()),this.setupStyleTracking(t.cssModel())}documentUpdated(e){if(this.searchableViewInternal.cancelSearch(),!e.existingDocument())return void(this.isShowing()&&e.requestDocument());if(this.hasNonDefaultSelectedNode=!1,this.omitDefaultSelection)return;const t=this.selectedNodeOnReset;(async function(e,n){const s=n?n.path():null,i=s?await e.pushNodeByPathToFrontend(s):null;if(t!==this.selectedNodeOnReset)return;let r=i?e.nodeForId(i):null;if(!r){const t=e.existingDocument();r=t?t.body||t.documentElement:null}r&&(this.setDefaultSelectedNode(r),this.lastSelectedNodeSelectedForTest())}).call(this,e,this.selectedNodeOnReset||null)}lastSelectedNodeSelectedForTest(){}setDefaultSelectedNode(e){if(!e||this.hasNonDefaultSelectedNode||this.pendingNodeReveal)return;const t=ElementsTreeOutline.forDOMModel(e.domModel());t&&(this.selectDOMNode(e),t.selectedTreeElement&&t.selectedTreeElement.expand())}onSearchClosed(){const e=this.selectedDOMNode();if(!e)return;const t=this.treeElementForNode(e);t&&t.select()}onSearchCanceled(){this.searchConfig=void 0,this.hideSearchHighlights(),this.searchableViewInternal.updateSearchMatchesCount(0),this.currentSearchResultIndex=-1,delete this.searchResults,SDK.DOMModel.DOMModel.cancelSearch()}performSearch(e,t,n){const s=e.query,i=s.trim();if(!i.length)return;this.searchConfig&&this.searchConfig.query===s?this.hideSearchHighlights():this.onSearchCanceled(),this.searchConfig=e;const r=Common.Settings.Settings.instance().moduleSetting("showUAShadowDOM").get(),o=SDK.TargetManager.TargetManager.instance().models(SDK.DOMModel.DOMModel,{scoped:!0}),a=o.map((e=>e.performSearch(i,r)));Promise.all(a).then((e=>{this.searchResults=[];for(let t=0;t<e.length;++t){const n=e[t];for(let e=0;e<n;++e)this.searchResults.push({domModel:o[t],index:e,node:void 0})}if(this.searchableViewInternal.updateSearchMatchesCount(this.searchResults.length),!this.searchResults.length)return;this.currentSearchResultIndex>=this.searchResults.length&&(this.currentSearchResultIndex=-1);let s=this.currentSearchResultIndex;t&&(s=-1===this.currentSearchResultIndex?n?-1:0:n?s-1:s+1,this.jumpToSearchResult(s))}))}domWordWrapSettingChanged(e){this.domTreeContainer.classList.toggle("elements-wrap",e.data);for(const t of this.treeOutlines)t.setWordWrap(e.data)}switchToAndFocus(e){this.searchableViewInternal.cancelSearch(),UI.ViewManager.ViewManager.instance().showView("elements").then((()=>this.selectDOMNode(e,!0)))}jumpToSearchResult(e){this.searchResults&&(this.currentSearchResultIndex=(e+this.searchResults.length)%this.searchResults.length,this.highlightCurrentSearchResult())}jumpToNextSearchResult(){this.searchResults&&this.searchConfig&&this.performSearch(this.searchConfig,!0)}jumpToPreviousSearchResult(){this.searchResults&&this.searchConfig&&this.performSearch(this.searchConfig,!0,!0)}supportsCaseSensitiveSearch(){return!1}supportsRegexSearch(){return!1}highlightCurrentSearchResult(){const e=this.currentSearchResultIndex,t=this.searchResults;if(!t)return;const n=t[e];if(this.searchableViewInternal.updateCurrentMatchIndex(e),null===n.node)return;if(void 0===n.node)return void n.domModel.searchResult(n.index).then((e=>{n.node=e;this.searchConfig&&this.searchResults&&-1!==this.currentSearchResultIndex&&this.highlightCurrentSearchResult()}));const s=this.treeElementForNode(n.node);if(n.node.scrollIntoView(),s){this.searchConfig&&s.highlightSearchResults(this.searchConfig.query),s.reveal();const e=s.listItemElement.getElementsByClassName(UI.UIUtils.highlightedSearchResultClassName);e.length&&e[0].scrollIntoViewIfNeeded(!1),s.select(!0)}}hideSearchHighlights(){if(!this.searchResults||!this.searchResults.length||-1===this.currentSearchResultIndex)return;const e=this.searchResults[this.currentSearchResultIndex];if(!e.node)return;const t=this.treeElementForNode(e.node);t&&t.hideSearchHighlights()}selectedDOMNode(){for(const e of this.treeOutlines)if(e.selectedDOMNode())return e.selectedDOMNode();return null}selectDOMNode(e,t){for(const n of this.treeOutlines){ElementsTreeOutline.forDOMModel(e.domModel())===n?n.selectDOMNode(e,t):n.selectDOMNode(null)}}selectAndShowSidebarTab(e){this.sidebarPaneView&&(this.sidebarPaneView.tabbedPane().selectTab(e),this.isShowing()||UI.ViewManager.ViewManager.instance().showView("elements"))}updateBreadcrumbIfNeeded(e){const t=e.data,n=this.selectedDOMNode();if(!n)return void(this.breadcrumbs.data={crumbs:[],selectedNode:null});const s=ElementsComponents.Helper.legacyNodeToElementsComponentsNode(n),i=[s];for(let e=n.parentNode;e;e=e.parentNode)i.push(ElementsComponents.Helper.legacyNodeToElementsComponentsNode(e));const r=t.map(ElementsComponents.Helper.legacyNodeToElementsComponentsNode),o=new Map;r.forEach((e=>o.set(e.id,e)));const a=i.map((e=>o.get(e.id)||e));this.breadcrumbs.data={crumbs:a,selectedNode:s}}crumbNodeSelected(e){this.selectDOMNode(e.legacyDomNode,!0)}treeOutlineForNode(e){return e?ElementsTreeOutline.forDOMModel(e.domModel()):null}treeElementForNode(e){const t=this.treeOutlineForNode(e);return t?t.findTreeElement(e):null}leaveUserAgentShadowDOM(e){let t;for(;(t=e.ancestorUserAgentShadowRoot())&&t.parentNode;)e=t.parentNode;return e}async revealAndSelectNode(e,t,n){this.omitDefaultSelection=!0;const s=Common.Settings.Settings.instance().moduleSetting("showUAShadowDOM").get()?e:this.leaveUserAgentShadowDOM(e);n||s.highlightForTwoSeconds(),this.accessibilityTreeView&&this.accessibilityTreeView.revealAndSelectNode(e),await UI.ViewManager.ViewManager.instance().showView("elements",!1,!t),this.selectDOMNode(s,t),delete this.omitDefaultSelection,this.notFirstInspectElement||(ElementsPanel.firstInspectElementNodeNameForTest=s.nodeName(),ElementsPanel.firstInspectElementCompletedForTest(),Host.InspectorFrontendHost.InspectorFrontendHostInstance.inspectElementCompleted()),this.notFirstInspectElement=!0}showUAShadowDOMChanged(){for(const e of this.treeOutlines)e.update()}setupTextSelectionHack(e){const t=s.bind(this),n=e=>{0===e.buttons&&s.call(this)};function s(){this.splitWidget.element.classList.remove("disable-resizer-for-elements-hack"),e.style.removeProperty("left"),e.style.removeProperty("padding-left"),e.style.removeProperty("width"),e.style.removeProperty("position"),e.window().removeEventListener("blur",t),e.window().removeEventListener("contextmenu",t,!0),e.window().removeEventListener("dragstart",t,!0),e.window().removeEventListener("mousemove",n,!0),e.window().removeEventListener("mouseup",t,!0),e.window().removeEventListener("visibilitychange",t)}e.addEventListener("mousedown",(s=>{if(0!==s.button)return;this.splitWidget.element.classList.add("disable-resizer-for-elements-hack"),e.style.setProperty("height",`${e.offsetHeight}px`);e.style.setProperty("left","-1000000px"),e.style.setProperty("padding-left","1000000px"),e.style.setProperty("width","calc(100% + 1000000px)"),e.style.setProperty("position","fixed"),e.window().addEventListener("blur",t),e.window().addEventListener("contextmenu",t,!0),e.window().addEventListener("dragstart",t,!0),e.window().addEventListener("mousemove",n,!0),e.window().addEventListener("mouseup",t,!0),e.window().addEventListener("visibilitychange",t)}),!0)}initializeSidebarPanes(e){this.splitWidget.setVertical("Vertical"===e),this.showToolbarPane(null,null);const t=new UI.Widget.VBox;t.element.classList.add("style-panes-wrapper"),this.stylesWidget.show(t.element),this.setupTextSelectionHack(t.element);const n=new UI.Widget.VBox;n.element.classList.add("style-panes-wrapper"),this.computedStyleWidget.show(n.element);const s=new UI.SplitWidget.SplitWidget(!0,!0,"elements.styles.sidebar.width",100);s.setMainWidget(t),s.hideSidebar(),s.enableShowModeSaving(),s.addEventListener(UI.SplitWidget.Events.ShowModeChanged,(()=>{r()})),this.stylesWidget.addEventListener("InitialUpdateCompleted",(()=>{this.stylesWidget.appendToolbarItem(s.createShowHideSidebarButton(i18nString(UIStrings.showComputedStylesSidebar),i18nString(UIStrings.hideComputedStylesSidebar),i18nString(UIStrings.computedStylesShown),i18nString(UIStrings.computedStylesHidden)))}));const i=()=>{this.metricsWidget.show(n.element,this.computedStyleWidget.element),this.metricsWidget.toggleVisibility(!0),this.stylesWidget.removeEventListener("StylesUpdateCompleted",a)},r=()=>{s.showMode()===UI.SplitWidget.ShowMode.Both?i():(this.metricsWidget.show(t.element),this.stylesWidget.hasMatchedStyles||this.metricsWidget.toggleVisibility(!1),this.stylesWidget.addEventListener("StylesUpdateCompleted",a))};let o=!1;const a=e=>{this.metricsWidget.toggleVisibility(e.data.hasMatchedStyles)};this.sidebarPaneView=UI.ViewManager.ViewManager.instance().createTabbedLocation((()=>UI.ViewManager.ViewManager.instance().showView("elements")),"Styles-pane-sidebar",!1,!0);const l=this.sidebarPaneView.tabbedPane();"Vertical"!==this.splitMode&&this.splitWidget.installResizer(l.headerElement());const d=l.headerElement();UI.ARIAUtils.markAsNavigation(d),UI.ARIAUtils.setLabel(d,i18nString(UIStrings.sidePanelToolbar));const c=l.tabbedPaneContentElement();UI.ARIAUtils.markAsComplementary(c),UI.ARIAUtils.setLabel(c,i18nString(UIStrings.sidePanelContent));const h=new UI.View.SimpleView(i18nString(UIStrings.styles),void 0,"Styles");this.sidebarPaneView.appendView(h),h.element.classList.add("flex-auto"),s.show(h.element);const m=new UI.View.SimpleView(i18nString(UIStrings.computed),void 0,"Computed");m.element.classList.add("composite","fill"),l.addEventListener(UI.TabbedPane.Events.TabSelected,(e=>{const{tabId:t}=e.data;"Computed"===t?(n.show(m.element),i()):"Styles"===t&&(s.setSidebarWidget(n),r()),o?Host.userMetrics.elementsSidebarTabShown(t):o=!0}),this),this.sidebarPaneView.appendView(m),this.stylesViewToReveal=h,this.sidebarPaneView.appendApplicableItems("elements-sidebar");const u=Extensions.ExtensionServer.ExtensionServer.instance().sidebarPanes();for(let e=0;e<u.length;++e)this.addExtensionSidebarPane(u[e]);this.splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane())}updateSidebarPosition(){if(this.sidebarPaneView&&this.sidebarPaneView.tabbedPane().shouldHideOnDetach())return;const e=Common.Settings.Settings.instance().moduleSetting("sidebarPosition").get();let t="Horizontal";if(("right"===e||"auto"===e&&UI.InspectorView.InspectorView.instance().element.offsetWidth>680)&&(t="Vertical"),!this.sidebarPaneView)return void this.initializeSidebarPanes(t);if(t===this.splitMode)return;this.splitMode=t;const n=this.sidebarPaneView.tabbedPane();this.splitWidget.uninstallResizer(n.headerElement()),this.splitWidget.setVertical("Vertical"===this.splitMode),this.showToolbarPane(null,null),"Vertical"!==this.splitMode&&this.splitWidget.installResizer(n.headerElement())}extensionSidebarPaneAdded(e){this.addExtensionSidebarPane(e.data)}addExtensionSidebarPane(e){this.sidebarPaneView&&e.panelName()===this.name&&this.sidebarPaneView.appendView(e)}getComputedStyleWidget(){return this.computedStyleWidget}setupStyleTracking(e){const t=e.createCSSPropertyTracker(TrackedCSSProperties);t.start(),this.cssStyleTrackerByCSSModel.set(e,t),t.addEventListener(SDK.CSSModel.CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated,this.trackedCSSPropertiesUpdated,this)}removeStyleTracking(e){const t=this.cssStyleTrackerByCSSModel.get(e);t&&(t.stop(),this.cssStyleTrackerByCSSModel.delete(e),t.removeEventListener(SDK.CSSModel.CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated,this.trackedCSSPropertiesUpdated,this))}trackedCSSPropertiesUpdated({data:e}){for(const t of e){if(!t)continue;const e=this.treeElementForNode(t);e&&e.updateStyleAdorners(),ElementsComponents.LayoutPane.LayoutPane.instance().render()}}showAdornerSettingsPane(){this.adornerSettingsPane||(this.adornerSettingsPane=new ElementsComponents.AdornerSettingsPane.AdornerSettingsPane,this.adornerSettingsPane.addEventListener("adornersettingupdated",(e=>{const{adornerName:t,isEnabledNow:n,newSettings:s}=e.data,i=this.adornersByName.get(t);if(i)for(const e of i)n?e.show():e.hide();this.adornerManager.updateSettings(s)})),this.searchableViewInternal.element.prepend(this.adornerSettingsPane));const e=this.adornerManager.getSettings();this.adornerSettingsPane.data={settings:e},this.adornerSettingsPane.show()}isAdornerEnabled(e){return this.adornerManager.isAdornerEnabled(e)}registerAdorner(e){let t=this.adornersByName.get(e.name);t||(t=new Set,this.adornersByName.set(e.name,t)),t.add(e),this.isAdornerEnabled(e.name)||e.hide()}deregisterAdorner(e){const t=this.adornersByName.get(e.name);t&&t.delete(e)}static firstInspectElementCompletedForTest=function(){};static firstInspectElementNodeNameForTest=""}globalThis.Elements=globalThis.Elements||{},globalThis.Elements.ElementsPanel=ElementsPanel;const TrackedCSSProperties=[{name:"display",value:"grid"},{name:"display",value:"inline-grid"},{name:"display",value:"flex"},{name:"display",value:"inline-flex"},{name:"container-type",value:"inline-size"},{name:"container-type",value:"block-size"},{name:"container-type",value:"size"}];let contextMenuProviderInstance,dOMNodeRevealerInstance,cSSPropertyRevealerInstance,elementsActionDelegateInstance,pseudoStateMarkerDecoratorInstance;export class ContextMenuProvider{appendApplicableItems(e,t,n){if(!(n instanceof SDK.RemoteObject.RemoteObject&&n.isNode()||n instanceof SDK.DOMModel.DOMNode||n instanceof SDK.DOMModel.DeferredDOMNode))return;if(ElementsPanel.instance().element.isAncestor(e.target))return;const s=Common.Revealer.reveal.bind(Common.Revealer.Revealer,n);t.revealSection().appendItem(i18nString(UIStrings.revealInElementsPanel),s)}static instance(){return contextMenuProviderInstance||(contextMenuProviderInstance=new ContextMenuProvider),contextMenuProviderInstance}}export class DOMNodeRevealer{static instance(e={forceNew:null}){const{forceNew:t}=e;return dOMNodeRevealerInstance&&!t||(dOMNodeRevealerInstance=new DOMNodeRevealer),dOMNodeRevealerInstance}reveal(e,t){const n=ElementsPanel.instance();return n.pendingNodeReveal=!0,new Promise((function(s,i){if(e instanceof SDK.DOMModel.DOMNode)r(e);else if(e instanceof SDK.DOMModel.DeferredDOMNode)e.resolve((function(e){if(!e){const e=i18nString(UIStrings.theDeferredDomNodeCouldNotBe);return void i(new Platform.UserVisibleError.UserVisibleError(e))}r(e)}));else if(e instanceof SDK.RemoteObject.RemoteObject){const t=e.runtimeModel().target().model(SDK.DOMModel.DOMModel);if(t)t.pushObjectAsNodeToFrontend(e).then((function(e){if(!e){const e=i18nString(UIStrings.theRemoteObjectCouldNotBe);return void i(new Platform.UserVisibleError.UserVisibleError(e))}r(e)}));else{const e=i18nString(UIStrings.nodeCannotBeFoundInTheCurrent);i(new Platform.UserVisibleError.UserVisibleError(e))}}else{const e=i18nString(UIStrings.theRemoteObjectCouldNotBe);i(new Platform.UserVisibleError.UserVisibleError(e)),n.pendingNodeReveal=!1}function r(r){n.pendingNodeReveal=!1;let o=r;for(;o.parentNode;)o=o.parentNode;const a=!(o instanceof SDK.DOMModel.DOMDocument);if(!(e instanceof SDK.DOMModel.DOMDocument)&&a){const e=i18nString(UIStrings.nodeCannotBeFoundInTheCurrent);return void i(new Platform.UserVisibleError.UserVisibleError(e))}if(r)return void n.revealAndSelectNode(r,!t).then(s);const l=i18nString(UIStrings.nodeCannotBeFoundInTheCurrent);i(new Platform.UserVisibleError.UserVisibleError(l))}})).catch((e=>{let t;throw t=Platform.UserVisibleError.isUserVisibleError(e)?e.message:i18nString(UIStrings.nodeCannotBeFoundInTheCurrent),Common.Console.Console.instance().warn(t),e}))}}export class CSSPropertyRevealer{static instance(e={forceNew:null}){const{forceNew:t}=e;return cSSPropertyRevealerInstance&&!t||(cSSPropertyRevealerInstance=new CSSPropertyRevealer),cSSPropertyRevealerInstance}reveal(e){return ElementsPanel.instance().revealProperty(e)}}export class ElementsActionDelegate{handleAction(e,t){const n=UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);if(!n)return!0;const s=ElementsTreeOutline.forDOMModel(n.domModel());if(!s)return!0;switch(t){case"elements.hide-element":return s.toggleHideElement(n),!0;case"elements.edit-as-html":return s.toggleEditAsHTML(n),!0;case"elements.duplicate-element":return s.duplicateNode(n),!0;case"elements.copy-styles":return s.findTreeElement(n)?.copyStyles(),!0;case"elements.undo":return SDK.DOMModel.DOMModelUndoStack.instance().undo(),ElementsPanel.instance().stylesWidget.forceUpdate(),!0;case"elements.redo":return SDK.DOMModel.DOMModelUndoStack.instance().redo(),ElementsPanel.instance().stylesWidget.forceUpdate(),!0;case"elements.show-styles":return ElementsPanel.instance().selectAndShowSidebarTab("Styles"),!0;case"elements.show-computed":return ElementsPanel.instance().selectAndShowSidebarTab("Computed"),!0;case"elements.toggle-eye-dropper":{const e=UI.Context.Context.instance().flavor(ColorSwatchPopoverIcon);if(!e)return!1;e.toggleEyeDropper()}}return!1}static instance(e={forceNew:null}){const{forceNew:t}=e;return elementsActionDelegateInstance&&!t||(elementsActionDelegateInstance=new ElementsActionDelegate),elementsActionDelegateInstance}}export class PseudoStateMarkerDecorator{static instance(e={forceNew:null}){const{forceNew:t}=e;return pseudoStateMarkerDecoratorInstance&&!t||(pseudoStateMarkerDecoratorInstance=new PseudoStateMarkerDecorator),pseudoStateMarkerDecoratorInstance}decorate(e){const t=e.domModel().cssModel().pseudoState(e);return t?{color:"orange",title:i18nString(UIStrings.elementStateS,{PH1:":"+t.join(", :")})}:null}}