@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 32.6 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 Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import*as IssuesManager from"../../models/issues_manager/issues_manager.js";import*as Adorners from"../../ui/components/adorners/adorners.js";import*as CodeHighlighter from"../../ui/components/code_highlighter/code_highlighter.js";import*as IconButton from"../../ui/components/icon_button/icon_button.js";import*as IssueCounter from"../../ui/components/issue_counter/issue_counter.js";import*as UI from"../../ui/legacy/legacy.js";import{IssuesPane}from"../issues/IssuesPane.js";import*as ElementsComponents from"./components/components.js";import{ElementsPanel}from"./ElementsPanel.js";import{ElementsTreeElement,InitialChildrenLimit}from"./ElementsTreeElement.js";import elementsTreeOutlineStyles from"./elementsTreeOutline.css.js";import{ImagePreviewPopover}from"./ImagePreviewPopover.js";import{TopLayerContainer}from"./TopLayerContainer.js";const UIStrings={pageDom:"Page DOM",storeAsGlobalVariable:"Store as global variable",showAllNodesDMore:"Show All Nodes ({PH1} More)",reveal:"reveal",adornerSettings:"Badge settings…"},str_=i18n.i18n.registerUIStrings("panels/elements/ElementsTreeOutline.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),elementsTreeOutlineByDOMModel=new WeakMap,populatedTreeElements=new Set;export class ElementsTreeOutline extends(Common.ObjectWrapper.eventMixin(UI.TreeOutline.TreeOutline)){treeElementByNode;shadowRoot;elementInternal;includeRootDOMNode;selectEnabled;rootDOMNodeInternal;selectedDOMNodeInternal;visible;imagePreviewPopover;updateRecords;treeElementsBeingUpdated;decoratorExtensions;showHTMLCommentsSetting;multilineEditing;visibleWidthInternal;clipboardNodeData;isXMLMimeTypeInternal;suppressRevealAndSelect=!1;previousHoveredElement;treeElementBeingDragged;dragOverTreeElement;updateModifiedNodesTimeout;#e=[];#t=new Map;#n;#i;#o=new Map;constructor(e,t,n){if(super(),Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL)){this.#n=IssuesManager.IssuesManager.IssuesManager.instance(),this.#n.addEventListener("IssueAdded",this.#s,this);for(const e of this.#n.issues())e instanceof IssuesManager.GenericIssue.GenericIssue&&this.#r(e)}this.treeElementByNode=new WeakMap;const i=document.createElement("div");this.shadowRoot=UI.Utils.createShadowRootWithCoreStyles(i,{cssFile:[elementsTreeOutlineStyles,CodeHighlighter.Style.default],delegatesFocus:void 0});const o=this.shadowRoot.createChild("div","elements-disclosure");this.elementInternal=this.element,this.elementInternal.classList.add("elements-tree-outline","source-code"),n&&this.elementInternal.classList.add("elements-hide-gutter"),UI.ARIAUtils.setLabel(this.elementInternal,i18nString(UIStrings.pageDom)),this.elementInternal.addEventListener("focusout",this.onfocusout.bind(this),!1),this.elementInternal.addEventListener("mousedown",this.onmousedown.bind(this),!1),this.elementInternal.addEventListener("mousemove",this.onmousemove.bind(this),!1),this.elementInternal.addEventListener("mouseleave",this.onmouseleave.bind(this),!1),this.elementInternal.addEventListener("dragstart",this.ondragstart.bind(this),!1),this.elementInternal.addEventListener("dragover",this.ondragover.bind(this),!1),this.elementInternal.addEventListener("dragleave",this.ondragleave.bind(this),!1),this.elementInternal.addEventListener("drop",this.ondrop.bind(this),!1),this.elementInternal.addEventListener("dragend",this.ondragend.bind(this),!1),this.elementInternal.addEventListener("contextmenu",this.contextMenuEventFired.bind(this),!1),this.elementInternal.addEventListener("clipboard-beforecopy",this.onBeforeCopy.bind(this),!1),this.elementInternal.addEventListener("clipboard-copy",this.onCopyOrCut.bind(this,!1),!1),this.elementInternal.addEventListener("clipboard-cut",this.onCopyOrCut.bind(this,!0),!1),this.elementInternal.addEventListener("clipboard-paste",this.onPaste.bind(this),!1),this.elementInternal.addEventListener("keydown",this.onKeyDown.bind(this),!1),o.appendChild(this.elementInternal),this.element=i,this.includeRootDOMNode=!e,this.selectEnabled=t,this.rootDOMNodeInternal=null,this.selectedDOMNodeInternal=null,this.visible=!1,this.imagePreviewPopover=new ImagePreviewPopover(this.contentElement,(e=>{let t=e.target;for(;t&&!ImagePreviewPopover.getImageURL(t);)t=t.parentElementOrShadowHost();return t}),(e=>{const t=UI.UIUtils.enclosingNodeOrSelfWithNodeName(e,"li");if(!t)return null;const n=UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(t);return n?n.node():null})),this.updateRecords=new Map,this.treeElementsBeingUpdated=new Set,this.decoratorExtensions=null,this.showHTMLCommentsSetting=Common.Settings.Settings.instance().moduleSetting("showHTMLComments"),this.showHTMLCommentsSetting.addChangeListener(this.onShowHTMLCommentsChange.bind(this)),this.setUseLightSelectionColor(!0),Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL)&&(this.#i=new UI.PopoverHelper.PopoverHelper(this.elementInternal,(e=>{const t=e.composedPath()[0];if(!t||!t.matches(".violating-element"))return null;const n=this.#o.get(t);if(!n)return null;const i=n.details(),o=this.#d(i.errorType),s=new IconButton.Icon.Icon;s.data=IssueCounter.IssueCounter.getIssueKindIconData(n.getKind()),s.style.cursor="pointer";const r=document.createElement("a");r.href="#",r.textContent="View issue:";const d=document.createElement("span");d.textContent=o;const a=document.createElement("div");return a.appendChild(s),a.appendChild(r),a.appendChild(d),a.style.display="flex",a.style.alignItems="center",a.style.gap="5px",{box:t.boxInWindow(),show:async e=>{e.setIgnoreLeftMargin(!0);const t=()=>{UI.ViewManager.ViewManager.instance().showView("issues-pane"),IssuesPane.instance().reveal(n)};return r.addEventListener("click",(()=>t())),s.addEventListener("click",(()=>t())),e.contentElement.appendChild(a),!0}}})),this.#i.setTimeout(300),this.#i.setHasPadding(!0))}#d(e){switch(e){case"FormLabelForNameError":case"FormLabelForMatchesNonExistingIdError":return"Incorrect use of <label for=FORM_ELEMENT>";case"FormDuplicateIdForInputError":return"Duplicate form field id in the same form";case"FormInputWithNoLabelError":return"Form field without valid aria-labelledby attribute or associated label";case"FormAutocompleteAttributeEmptyError":return"Incorrect use of autocomplete attribute";case"FormEmptyIdAndNameAttributesForInputError":return"A form field element should have an id or name attribute";case"FormAriaLabelledByToNonExistingId":return"An aria-labelledby attribute doesn't match any element id";case"FormInputAssignedAutocompleteValueToIdOrNameAttributeError":return"An element doesn't have an autocomplete attribute";case"FormLabelHasNeitherForNorNestedInput":return"No label associated with a form field";case"FormInputHasWrongButWellIntendedAutocompleteValueError":return"Non-standard autocomplete attribute value";default:return""}}static forDOMModel(e){return elementsTreeOutlineByDOMModel.get(e)||null}async#s(e){e.data.issue instanceof IssuesManager.GenericIssue.GenericIssue&&(this.#r(e.data.issue),await this.#a(e.data.issue))}#r(e){this.#e.push(e)}#l(){for(const e of this.#e)this.#a(e)}async#a(e){const t=e.details();if(!this.#d(t.errorType))return;if(!this.rootDOMNode||!t.violatingNodeId)return;const n=new SDK.DOMModel.DeferredDOMNode(this.rootDOMNode.domModel().target(),t.violatingNodeId),i=await n.resolvePromise();if(!i)return;const o=this.findTreeElement(i);if(o){o.addIssue(e);const t=o.issuesByNodeElement;for(const[e,n]of t)this.#o.set(e,n)}}onShowHTMLCommentsChange(){const e=this.selectedDOMNode();e&&e.nodeType()===Node.COMMENT_NODE&&!this.showHTMLCommentsSetting.get()&&this.selectDOMNode(e.parentNode),this.update()}setWordWrap(e){this.elementInternal.classList.toggle("elements-tree-nowrap",!e)}setMultilineEditing(e){this.multilineEditing=e}visibleWidth(){return this.visibleWidthInternal||0}setVisibleWidth(e){this.visibleWidthInternal=e,this.multilineEditing&&this.multilineEditing.resize()}setClipboardData(e){if(this.clipboardNodeData){const e=this.findTreeElement(this.clipboardNodeData.node);e&&e.setInClipboard(!1),delete this.clipboardNodeData}if(e){const t=this.findTreeElement(e.node);t&&t.setInClipboard(!0),this.clipboardNodeData=e}}resetClipboardIfNeeded(e){this.clipboardNodeData&&this.clipboardNodeData.node===e&&this.setClipboardData(null)}onBeforeCopy(e){e.handled=!0}onCopyOrCut(e,t){this.setClipboardData(null);const n=t.original;if(!n||!n.target)return;if(n.target instanceof Node&&n.target.hasSelection())return;if(UI.UIUtils.isEditing())return;const i=this.selectedDOMNode();i&&n.clipboardData&&(n.clipboardData.clearData(),t.handled=!0,this.performCopyOrCut(e,i))}performCopyOrCut(e,t){t&&(e&&(t.isShadowRoot()||t.ancestorUserAgentShadowRoot())||(t.copyNode(),this.setClipboardData({node:t,isCut:e})))}canPaste(e){if(e.isShadowRoot()||e.ancestorUserAgentShadowRoot())return!1;if(!this.clipboardNodeData)return!1;const t=this.clipboardNodeData.node;return(!this.clipboardNodeData.isCut||t!==e&&!t.isAncestor(e))&&e.domModel()===t.domModel()}pasteNode(e){this.canPaste(e)&&this.performPaste(e)}duplicateNode(e){this.performDuplicate(e)}onPaste(e){if(UI.UIUtils.isEditing())return;const t=this.selectedDOMNode();t&&this.canPaste(t)&&(e.handled=!0,this.performPaste(t))}performPaste(e){function t(e,t){!e&&t&&this.selectDOMNode(t)}this.clipboardNodeData&&(this.clipboardNodeData.isCut?(this.clipboardNodeData.node.moveTo(e,null,t.bind(this)),this.setClipboardData(null)):this.clipboardNodeData.node.copyTo(e,null,t.bind(this)))}performDuplicate(e){if(e.isInShadowTree())return;const t=e.parentNode?e.parentNode:e;"#document"!==t.nodeName()&&e.copyTo(t,e.nextSibling)}setVisible(e){if(e!==this.visible){if(this.visible=e,!this.visible)return this.imagePreviewPopover.hide(),void(this.multilineEditing&&this.multilineEditing.cancel());this.runPendingUpdates(),this.selectedDOMNodeInternal&&this.revealAndSelectNode(this.selectedDOMNodeInternal,!1)}}get rootDOMNode(){return this.rootDOMNodeInternal}set rootDOMNode(e){this.rootDOMNodeInternal!==e&&(this.rootDOMNodeInternal=e,this.isXMLMimeTypeInternal=e&&e.isXMLNode(),this.update())}get isXMLMimeType(){return Boolean(this.isXMLMimeTypeInternal)}selectedDOMNode(){return this.selectedDOMNodeInternal}selectDOMNode(e,t){this.selectedDOMNodeInternal!==e?(this.selectedDOMNodeInternal=e,this.revealAndSelectNode(e,!t),this.selectedDOMNodeInternal===e&&this.selectedNodeChanged(Boolean(t))):this.revealAndSelectNode(e,!t)}editing(){const e=this.selectedDOMNode();if(!e)return!1;const t=this.findTreeElement(e);return t&&t.isEditing()||!1}update(){const e=this.selectedDOMNode();if(this.removeChildren(),this.rootDOMNode){if(this.includeRootDOMNode){const e=this.createElementTreeElement(this.rootDOMNode);this.appendChild(e)}else{const e=this.visibleChildren(this.rootDOMNode);for(const t of e){const e=this.createElementTreeElement(t);this.appendChild(e)}}this.rootDOMNode instanceof SDK.DOMModel.DOMDocument&&this.createTopLayerContainer(this.rootElement(),this.rootDOMNode),e&&this.revealAndSelectNode(e,!0)}}selectedNodeChanged(e){this.dispatchEventToListeners(ElementsTreeOutline.Events.SelectedNodeChanged,{node:this.selectedDOMNodeInternal,focus:e})}fireElementsTreeUpdated(e){this.dispatchEventToListeners(ElementsTreeOutline.Events.ElementsTreeUpdated,e)}findTreeElement(e){let t=this.lookUpTreeElement(e);return t||e.nodeType()!==Node.TEXT_NODE||(t=this.lookUpTreeElement(e.parentNode)),t}lookUpTreeElement(e){if(!e)return null;const t=this.treeElementByNode.get(e);if(t)return t;const n=[];let i;for(i=e.parentNode;i&&(n.push(i),!this.treeElementByNode.has(i));i=i.parentNode);if(!i)return null;for(let t=n.length-1;t>=0;--t){const i=n[t-1]||e,o=this.treeElementByNode.get(n[t]);o&&(o.onpopulate(),i.index&&i.index>=o.expandedChildrenLimit()&&this.setExpandedChildrenLimit(o,i.index+1))}return this.treeElementByNode.get(e)||null}createTreeElementFor(e){let t=this.findTreeElement(e);return t||(e.parentNode?(t=this.createTreeElementFor(e.parentNode),t?this.showChild(t,e):null):null)}revealAndSelectNode(e,t){if(this.suppressRevealAndSelect)return;if(!this.includeRootDOMNode&&e===this.rootDOMNode&&this.rootDOMNode&&(e=this.rootDOMNode.firstChild),!e)return;const n=this.createTreeElementFor(e);n&&n.revealAndSelect(t)}treeElementFromEventInternal(e){if(!this.element.parentElement)return null;const t=e.pageX,n=e.pageY,i=this.treeElementFromPoint(t,n);let o;return o=i===this.treeElementFromPoint(t,n-2)?i:this.treeElementFromPoint(t,n+2),o}onfocusout(e){SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}onmousedown(e){const t=this.treeElementFromEventInternal(e);t&&t.select()}setHoverEffect(e){this.previousHoveredElement!==e&&(this.previousHoveredElement instanceof ElementsTreeElement&&(this.previousHoveredElement.hovered=!1,delete this.previousHoveredElement),e instanceof ElementsTreeElement&&(e.hovered=!0,this.previousHoveredElement=e))}onmousemove(e){const t=this.treeElementFromEventInternal(e);t&&this.previousHoveredElement===t||(this.setHoverEffect(t),this.highlightTreeElement(t,!UI.KeyboardShortcut.KeyboardShortcut.eventHasEitherCtrlOrMeta(e)))}highlightTreeElement(e,t){e instanceof ElementsTreeElement?e.node().domModel().overlayModel().highlightInOverlay({node:e.node(),selectorList:void 0},"all",t):e instanceof ShortcutTreeElement&&e.domModel().overlayModel().highlightInOverlay({deferredNode:e.deferredNode(),selectorList:void 0},"all",t)}onmouseleave(e){this.setHoverEffect(null),SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}ondragstart(e){const t=e.target;if(!t||t.hasSelection())return!1;if("A"===t.nodeName)return!1;const n=this.validDragSourceOrTarget(this.treeElementFromEventInternal(e));return!!n&&("BODY"!==n.node().nodeName()&&"HEAD"!==n.node().nodeName()&&(e.dataTransfer&&n.listItemElement.textContent?(e.dataTransfer.setData("text/plain",n.listItemElement.textContent.replace(/\u200b/g,"")),e.dataTransfer.effectAllowed="copyMove",this.treeElementBeingDragged=n,SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(),!0):void 0))}ondragover(e){if(!this.treeElementBeingDragged)return!1;const t=this.validDragSourceOrTarget(this.treeElementFromEventInternal(e));if(!t)return!1;let n=t.node();for(;n;){if(n===this.treeElementBeingDragged.nodeInternal)return!1;n=n.parentNode}return t.listItemElement.classList.add("elements-drag-over"),this.dragOverTreeElement=t,e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),!1}ondragleave(e){return this.clearDragOverTreeElementMarker(),e.preventDefault(),!1}validDragSourceOrTarget(e){if(!e)return null;if(!(e instanceof ElementsTreeElement))return null;const t=e,n=t.node();return n.parentNode&&n.parentNode.nodeType()===Node.ELEMENT_NODE?t:null}ondrop(e){e.preventDefault();const t=this.treeElementFromEventInternal(e);t instanceof ElementsTreeElement&&this.doMove(t)}doMove(e){if(!this.treeElementBeingDragged)return;let t,n;if(e.isClosingTag())t=e.node();else{const i=e.node();t=i.parentNode,n=i}if(!t||!n)return;const i=this.treeElementBeingDragged.expanded;this.treeElementBeingDragged.nodeInternal.moveTo(t,n,this.selectNodeAfterEdit.bind(this,i)),delete this.treeElementBeingDragged}ondragend(e){e.preventDefault(),this.clearDragOverTreeElementMarker(),delete this.treeElementBeingDragged}clearDragOverTreeElementMarker(){this.dragOverTreeElement&&(this.dragOverTreeElement.listItemElement.classList.remove("elements-drag-over"),delete this.dragOverTreeElement)}contextMenuEventFired(e){const t=this.treeElementFromEventInternal(e);t instanceof ElementsTreeElement&&this.showContextMenu(t,e)}showContextMenu(e,t){if(UI.UIUtils.isEditing())return;const n=new UI.ContextMenu.ContextMenu(t),i=Boolean(e.node().pseudoType()),o=e.node().nodeType()===Node.ELEMENT_NODE&&!i,s=t.target;if(!s)return;let r=s.enclosingNodeOrSelfWithClass("webkit-html-text-node");r&&r.classList.contains("bogus")&&(r=null);const d=s.enclosingNodeOrSelfWithClass("webkit-html-comment");n.saveSection().appendItem(i18nString(UIStrings.storeAsGlobalVariable),this.saveNodeToTempVariable.bind(this,e.node())),r?e.populateTextContextMenu(n,r):o?e.populateTagContextMenu(n,t):d?e.populateNodeContextMenu(n):i&&e.populateScrollIntoView(n),n.viewSection().appendItem(i18nString(UIStrings.adornerSettings),(()=>{ElementsPanel.instance().showAdornerSettingsPane()})),n.appendApplicableItems(e.node()),n.show()}async saveNodeToTempVariable(e){const t=await e.resolveToObject(),n=t?.runtimeModel().target()?.model(SDK.ConsoleModel.ConsoleModel);await(n?.saveToTempVariable(UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext),t))}runPendingUpdates(){this.updateModifiedNodes()}onKeyDown(e){const t=e;if(UI.UIUtils.isEditing())return;const n=this.selectedDOMNode();if(!n)return;const i=this.treeElementByNode.get(n);if(i&&UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(t)&&n.parentNode){if("ArrowUp"===t.key&&n.previousSibling)return n.moveTo(n.parentNode,n.previousSibling,this.selectNodeAfterEdit.bind(this,i.expanded)),void t.consume(!0);if("ArrowDown"===t.key&&n.nextSibling)return n.moveTo(n.parentNode,n.nextSibling.nextSibling,this.selectNodeAfterEdit.bind(this,i.expanded)),void t.consume(!0)}}toggleEditAsHTML(e,t,n){const i=this.treeElementByNode.get(e);if(!i||!i.hasEditableNode())return;if(e.pseudoType())return;const o=e.parentNode,s=e.index,r=i.expanded;i.toggleEditAsHTML(function(e){n&&n();if(!e)return;if(this.runPendingUpdates(),!s)return;const t=o&&o.children(),i=t&&t[s]||o;if(!i)return;if(this.selectDOMNode(i,!0),r){const e=this.findTreeElement(i);e&&e.expand()}}.bind(this),t)}selectNodeAfterEdit(e,t,n){if(t)return null;if(this.runPendingUpdates(),!n)return null;this.selectDOMNode(n,!0);const i=this.findTreeElement(n);return e&&i&&i.expand(),i}async toggleHideElement(e){const t=e.pseudoType(),n=t?e.parentNode:e;if(!n)return;const i=e.marker("hidden-marker"),o=await n.resolveToObject("");o&&(await o.callFunction((function(e,t){const n="__web-inspector-hide-shortcut-style__",i=[];i.push(".__web-inspector-hide-shortcut__"),i.push(".__web-inspector-hide-shortcut__ *"),i.push(".__web-inspector-hidebefore-shortcut__::before"),i.push(".__web-inspector-hideafter-shortcut__::after");const o=i.join(", "),s="\n"+o+"\n{\n visibility: hidden !important;\n}\n",r="__web-inspector-hide"+(e||"")+"-shortcut__";this.classList.toggle(r,t);let d=this;for(;d.parentNode;)d=d.parentNode;d.nodeType===Node.DOCUMENT_NODE&&(d=document.head);let a=d.querySelector("style#"+n);if(a)return;a=document.createElement("style"),a.id=n,a.textContent=s,d.appendChild(a)}),[{value:t},{value:!i}]),o.release(),e.setMarker("hidden-marker",!i||null))}isToggledToHidden(e){return Boolean(e.marker("hidden-marker"))}reset(){this.rootDOMNode=null,this.selectDOMNode(null,!1),this.imagePreviewPopover.hide(),delete this.clipboardNodeData,SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(),this.updateRecords.clear()}wireToDOMModel(e){elementsTreeOutlineByDOMModel.set(e,this),e.addEventListener(SDK.DOMModel.Events.MarkersChanged,this.markersChanged,this),e.addEventListener(SDK.DOMModel.Events.NodeInserted,this.nodeInserted,this),e.addEventListener(SDK.DOMModel.Events.NodeRemoved,this.nodeRemoved,this),e.addEventListener(SDK.DOMModel.Events.AttrModified,this.attributeModified,this),e.addEventListener(SDK.DOMModel.Events.AttrRemoved,this.attributeRemoved,this),e.addEventListener(SDK.DOMModel.Events.CharacterDataModified,this.characterDataModified,this),e.addEventListener(SDK.DOMModel.Events.DocumentUpdated,this.documentUpdated,this),e.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated,this.childNodeCountUpdated,this),e.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged,this.distributedNodesChanged,this),e.addEventListener(SDK.DOMModel.Events.TopLayerElementsChanged,this.topLayerElementsChanged,this)}unwireFromDOMModel(e){e.removeEventListener(SDK.DOMModel.Events.MarkersChanged,this.markersChanged,this),e.removeEventListener(SDK.DOMModel.Events.NodeInserted,this.nodeInserted,this),e.removeEventListener(SDK.DOMModel.Events.NodeRemoved,this.nodeRemoved,this),e.removeEventListener(SDK.DOMModel.Events.AttrModified,this.attributeModified,this),e.removeEventListener(SDK.DOMModel.Events.AttrRemoved,this.attributeRemoved,this),e.removeEventListener(SDK.DOMModel.Events.CharacterDataModified,this.characterDataModified,this),e.removeEventListener(SDK.DOMModel.Events.DocumentUpdated,this.documentUpdated,this),e.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated,this.childNodeCountUpdated,this),e.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged,this.distributedNodesChanged,this),e.removeEventListener(SDK.DOMModel.Events.TopLayerElementsChanged,this.topLayerElementsChanged,this),elementsTreeOutlineByDOMModel.delete(e)}addUpdateRecord(e){let t=this.updateRecords.get(e);return t||(t=new UpdateRecord,this.updateRecords.set(e,t)),t}updateRecordForHighlight(e){return this.visible&&this.updateRecords.get(e)||null}documentUpdated(e){const t=e.data;this.reset(),t.existingDocument()&&(this.rootDOMNode=t.existingDocument(),Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL)&&this.#l())}attributeModified(e){const{node:t}=e.data;this.addUpdateRecord(t).attributeModified(e.data.name),this.updateModifiedNodesSoon()}attributeRemoved(e){const{node:t}=e.data;this.addUpdateRecord(t).attributeRemoved(e.data.name),this.updateModifiedNodesSoon()}characterDataModified(e){const t=e.data;this.addUpdateRecord(t).charDataModified(),t.parentNode&&t.parentNode.firstChild===t.parentNode.lastChild&&this.addUpdateRecord(t.parentNode).childrenModified(),this.updateModifiedNodesSoon()}nodeInserted(e){const t=e.data;this.addUpdateRecord(t.parentNode).nodeInserted(t),this.updateModifiedNodesSoon()}nodeRemoved(e){const{node:t,parent:n}=e.data;this.resetClipboardIfNeeded(t),this.addUpdateRecord(n).nodeRemoved(t),this.updateModifiedNodesSoon()}childNodeCountUpdated(e){const t=e.data;this.addUpdateRecord(t).childrenModified(),this.updateModifiedNodesSoon()}distributedNodesChanged(e){const t=e.data;this.addUpdateRecord(t).childrenModified(),this.updateModifiedNodesSoon()}updateModifiedNodesSoon(){this.updateRecords.size&&(this.updateModifiedNodesTimeout||(this.updateModifiedNodesTimeout=window.setTimeout(this.updateModifiedNodes.bind(this),50)))}updateModifiedNodes(){this.updateModifiedNodesTimeout&&(clearTimeout(this.updateModifiedNodesTimeout),delete this.updateModifiedNodesTimeout);const e=[...this.updateRecords.keys()],t=e.length>10;let n,i;t&&(n=this.element.parentNode,i=n?n.scrollTop:0,this.elementInternal.classList.add("hidden"));const o=this.rootDOMNodeInternal&&this.updateRecords.get(this.rootDOMNodeInternal);if(o&&o.hasChangedChildren())this.update();else for(const[e,t]of this.updateRecords)t.hasChangedChildren()?this.updateModifiedParentNode(e):this.updateModifiedNode(e);t&&(this.elementInternal.classList.remove("hidden"),n&&i&&(n.scrollTop=i)),this.updateRecords.clear(),this.fireElementsTreeUpdated(e)}updateModifiedNode(e){const t=this.findTreeElement(e);t&&t.updateTitle(this.updateRecordForHighlight(e))}updateModifiedParentNode(e){const t=this.findTreeElement(e);t&&(t.setExpandable(this.hasVisibleChildren(e)),t.updateTitle(this.updateRecordForHighlight(e)),populatedTreeElements.has(t)&&this.updateChildren(t))}populateTreeElement(e){return e.childCount()||!e.isExpandable()?Promise.resolve():new Promise((t=>{e.node().getChildNodes((()=>{populatedTreeElements.add(e),this.updateModifiedParentNode(e.node()),t()}))}))}async createTopLayerContainer(e,t){if(!(e.treeOutline&&e.treeOutline instanceof ElementsTreeOutline))return;const n=new TopLayerContainer(e.treeOutline,t);await n.throttledUpdateTopLayerElements(),n.currentTopLayerDOMNodes.size>0&&e.appendChild(n),this.#t.set(e,n)}createElementTreeElement(e,t){const n=new ElementsTreeElement(e,t);return n.setExpandable(!t&&this.hasVisibleChildren(e)),e.nodeType()===Node.ELEMENT_NODE&&e.parentNode&&e.parentNode.nodeType()===Node.DOCUMENT_NODE&&!e.parentNode.parentNode&&n.setCollapsible(!1),e.hasAssignedSlot()&&n.createSlotLink(e.assignedSlot),n.selectable=Boolean(this.selectEnabled),n}showChild(e,t){if(e.isClosingTag())return null;const n=this.visibleChildren(e.node()).indexOf(t);return-1===n?null:(n>=e.expandedChildrenLimit()&&this.setExpandedChildrenLimit(e,n+1),e.childAt(n))}visibleChildren(e){let t=ElementsTreeElement.visibleShadowRoots(e);const n=e.contentDocument();n&&t.push(n);const i=e.templateContent();i&&t.push(i),t.push(...e.viewTransitionPseudoElements());const o=e.markerPseudoElement();o&&t.push(o);const s=e.beforePseudoElement();if(s&&t.push(s),e.childNodeCount()){let n=e.children()||[];this.showHTMLCommentsSetting.get()||(n=n.filter((e=>e.nodeType()!==Node.COMMENT_NODE))),t=t.concat(n)}const r=e.afterPseudoElement();r&&t.push(r);const d=e.backdropPseudoElement();return d&&t.push(d),t}hasVisibleChildren(e){return!!e.isIframe()||(!!e.isPortal()||(!!e.contentDocument()||(!!e.templateContent()||(!!ElementsTreeElement.visibleShadowRoots(e).length||(!!e.hasPseudoElements()||(!!e.isInsertionPoint()||Boolean(e.childNodeCount())&&!ElementsTreeElement.canShowInlineText(e)))))))}createExpandAllButtonTreeElement(e){const t=UI.UIUtils.createTextButton("",function(t){const n=this.visibleChildren(e.node()).length;this.setExpandedChildrenLimit(e,Math.max(n,e.expandedChildrenLimit()+InitialChildrenLimit)),t.consume()}.bind(this));t.value="";const n=new UI.TreeOutline.TreeElement(t);return n.selectable=!1,n.button=t,n}setExpandedChildrenLimit(e,t){e.expandedChildrenLimit()!==t&&(e.setExpandedChildrenLimit(t),e.treeOutline&&!this.treeElementsBeingUpdated.has(e)&&this.updateModifiedParentNode(e.node()))}updateChildren(e){if(!e.isExpandable()){if(!e.treeOutline)return;const t=e.treeOutline.selectedTreeElement;return t&&t.hasAncestor(e)&&e.select(!0),void e.removeChildren()}console.assert(!e.isClosingTag()),this.innerUpdateChildren(e)}insertChildElement(e,t,n,i){const o=this.createElementTreeElement(t,i);return e.insertChild(o,n),t instanceof SDK.DOMModel.DOMDocument&&this.createTopLayerContainer(o,t),o}moveChild(e,t,n){if(e.indexOfChild(t)===n)return;const i=t.selected;t.parent&&t.parent.removeChild(t),e.insertChild(t,n),i&&t.select()}innerUpdateChildren(e){if(this.treeElementsBeingUpdated.has(e))return;this.treeElementsBeingUpdated.add(e);const t=e.node(),n=this.visibleChildren(t),i=new Set(n),o=new Map;for(let t=e.childCount()-1;t>=0;--t){const n=e.childAt(t);if(!(n instanceof ElementsTreeElement)){e.removeChildAtIndex(t);continue}const s=n.node();i.has(s)?o.set(s,n):e.removeChildAtIndex(t)}for(let i=0;i<n.length&&i<e.expandedChildrenLimit();++i){const s=n[i],r=o.get(s)||this.findTreeElement(s);if(r&&r!==e)this.moveChild(e,r,i);else{const n=this.insertChildElement(e,s,i);this.updateRecordForHighlight(t)&&e.expanded&&ElementsTreeElement.animateOnDOMUpdate(n),e.childCount()>e.expandedChildrenLimit()&&this.setExpandedChildrenLimit(e,e.expandedChildrenLimit()+1)}}const s=e.childCount();if(n.length>s){const t=s;e.expandAllButtonElement||(e.expandAllButtonElement=this.createExpandAllButtonTreeElement(e)),e.insertChild(e.expandAllButtonElement,t),e.expandAllButtonElement.title=i18nString(UIStrings.showAllNodesDMore,{PH1:n.length-s})}else e.expandAllButtonElement&&(e.expandAllButtonElement=null);if(t.isInsertionPoint())for(const n of t.distributedNodes())e.appendChild(new ShortcutTreeElement(n));t.nodeType()===Node.ELEMENT_NODE&&!t.pseudoType()&&e.isExpandable()&&this.insertChildElement(e,t,e.childCount(),!0),this.treeElementsBeingUpdated.delete(e)}markersChanged(e){const t=e.data,n=this.treeElementByNode.get(t);n&&n.updateDecorations()}async topLayerElementsChanged(){for(const[e,t]of this.#t)await t.throttledUpdateTopLayerElements(),t.currentTopLayerDOMNodes.size>0&&t.parent!==e&&e.appendChild(t),t.hidden=0===t.currentTopLayerDOMNodes.size}static treeOutlineSymbol=Symbol("treeOutline")}!function(e){let t;!function(e){e.SelectedNodeChanged="SelectedNodeChanged",e.ElementsTreeUpdated="ElementsTreeUpdated"}(t=e.Events||(e.Events={}))}(ElementsTreeOutline||(ElementsTreeOutline={}));export const MappedCharToEntity=new Map([[" ","nbsp"],["","shy"],[" ","ensp"],[" ","emsp"],[" ","thinsp"],[" ","hairsp"],["","ZeroWidthSpace"],["","zwnj"],["","zwj"],["","lrm"],["","rlm"],["","#x202A"],["","#x202B"],["","#x202C"],["","#x202D"],["","#x202E"],["","NoBreak"],["\ufeff","#xFEFF"]]);export class UpdateRecord{modifiedAttributes;removedAttributes;hasChangedChildrenInternal;hasRemovedChildrenInternal;charDataModifiedInternal;attributeModified(e){this.removedAttributes&&this.removedAttributes.has(e)&&this.removedAttributes.delete(e),this.modifiedAttributes||(this.modifiedAttributes=new Set),this.modifiedAttributes.add(e)}attributeRemoved(e){this.modifiedAttributes&&this.modifiedAttributes.has(e)&&this.modifiedAttributes.delete(e),this.removedAttributes||(this.removedAttributes=new Set),this.removedAttributes.add(e)}nodeInserted(e){this.hasChangedChildrenInternal=!0}nodeRemoved(e){this.hasChangedChildrenInternal=!0,this.hasRemovedChildrenInternal=!0}charDataModified(){this.charDataModifiedInternal=!0}childrenModified(){this.hasChangedChildrenInternal=!0}isAttributeModified(e){return null!==this.modifiedAttributes&&void 0!==this.modifiedAttributes&&this.modifiedAttributes.has(e)}hasRemovedAttributes(){return null!==this.removedAttributes&&void 0!==this.removedAttributes&&Boolean(this.removedAttributes.size)}isCharDataModified(){return Boolean(this.charDataModifiedInternal)}hasChangedChildren(){return Boolean(this.hasChangedChildrenInternal)}hasRemovedChildren(){return Boolean(this.hasRemovedChildrenInternal)}}let rendererInstance;export class Renderer{static instance(e={forceNew:null}){const{forceNew:t}=e;return rendererInstance&&!t||(rendererInstance=new Renderer),rendererInstance}async render(e){let t=null;if(e instanceof SDK.DOMModel.DOMNode?t=e:e instanceof SDK.DOMModel.DeferredDOMNode&&(t=await e.resolvePromise()),!t)return null;const n=new ElementsTreeOutline(!1,!0,!0);n.rootDOMNode=t;const i=n.firstChild();return i&&!i.isExpandable()&&n.element.classList.add("single-node"),n.setVisible(!0),n.element.treeElementForTest=i,n.setShowSelectionOnKeyboardFocus(!0,!0),{node:n.element,tree:n}}}export class ShortcutTreeElement extends UI.TreeOutline.TreeElement{nodeShortcut;hoveredInternal;constructor(e){super(""),this.listItemElement.createChild("div","selection fill");const t=this.listItemElement.createChild("span","elements-tree-shortcut-title");let n=e.nodeName.toLowerCase();e.nodeType===Node.ELEMENT_NODE&&(n="<"+n+">"),t.textContent="↪ "+n,this.nodeShortcut=e,this.addRevealAdorner()}addRevealAdorner(){const e=new Adorners.Adorner.Adorner;e.classList.add("adorner-reveal");const t=ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL).name,n=document.createElement("span"),i=new IconButton.Icon.Icon;i.data={iconName:"select-element",color:"var(--icon-default)",width:"14px",height:"14px"};const o=document.createElement("span");o.textContent=t,n.append(i),n.append(o),n.classList.add("adorner-with-icon"),e.data={name:t,content:n},this.listItemElement.appendChild(e);e.addInteraction((()=>{Host.userMetrics.badgeActivated(8),this.nodeShortcut.deferredNode.resolve((e=>{Common.Revealer.reveal(e)}))}),{isToggle:!1,shouldPropagateOnKeydown:!1,ariaLabelDefault:i18nString(UIStrings.reveal),ariaLabelActive:i18nString(UIStrings.reveal)}),e.addEventListener("mousedown",(e=>e.consume()),!1),ElementsPanel.instance().registerAdorner(e)}get hovered(){return Boolean(this.hoveredInternal)}set hovered(e){this.hoveredInternal!==e&&(this.hoveredInternal=e,this.listItemElement.classList.toggle("hovered",e))}deferredNode(){return this.nodeShortcut.deferredNode}domModel(){return this.nodeShortcut.deferredNode.domModel()}setLeftIndentOverlay(){let e=24;if(this.parent&&this.parent instanceof ElementsTreeElement){e+=parseFloat(this.parent.listItemElement.style.getPropertyValue("--indent"))||0}this.listItemElement.style.setProperty("--indent",e+"px")}onattach(){this.setLeftIndentOverlay()}onselect(e){if(!e)return!0;return this.nodeShortcut.deferredNode.highlight(),this.nodeShortcut.deferredNode.resolve(function(e){e&&this.treeOutline instanceof ElementsTreeOutline&&(this.treeOutline.selectedDOMNodeInternal=e,this.treeOutline.selectedNodeChanged(!1))}.bind(this)),!0}}