@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 41.2 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 SDK from"../../core/sdk/sdk.js";import*as TextUtils from"../../models/text_utils/text_utils.js";import*as CodeMirror from"../../third_party/codemirror.next/codemirror.next.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 TextEditor from"../../ui/components/text_editor/text_editor.js";import*as Components from"../../ui/legacy/components/utils/utils.js";import*as UI from"../../ui/legacy/legacy.js";import*as Emulation from"../emulation/emulation.js";import*as ElementsComponents from"./components/components.js";import{canGetJSPath,cssPath,jsPath,xPath}from"./DOMPath.js";import{ElementsPanel}from"./ElementsPanel.js";import{MappedCharToEntity}from"./ElementsTreeOutline.js";import{ImagePreviewPopover}from"./ImagePreviewPopover.js";import{getRegisteredDecorators}from"./MarkerDecorator.js";const UIStrings={thisFrameWasIdentifiedAsAnAd:"This frame was identified as an ad frame",forceState:"Force state",useSInTheConsoleToReferToThis:"Use {PH1} in the console to refer to this element.",addAttribute:"Add attribute",editAttribute:"Edit attribute",focus:"Focus",scrollIntoView:"Scroll into view",editText:"Edit text",editAsHtml:"Edit as HTML",cut:"Cut",copy:"Copy",paste:"Paste",copyOuterhtml:"Copy outerHTML",copySelector:"Copy `selector`",copyJsPath:"Copy JS path",copyStyles:"Copy styles",copyXpath:"Copy XPath",copyFullXpath:"Copy full XPath",copyElement:"Copy element",duplicateElement:"Duplicate element",hideElement:"Hide element",deleteElement:"Delete element",expandRecursively:"Expand recursively",collapseChildren:"Collapse children",captureNodeScreenshot:"Capture node screenshot",showFrameDetails:"Show `iframe` details",valueIsTooLargeToEdit:"<value is too large to edit>",children:"Children:",enableGridMode:"Enable grid mode",disableGridMode:"Disable grid mode",enableFlexMode:"Enable flex mode",disableFlexMode:"Disable flex mode",enableScrollSnap:"Enable scroll-snap overlay",disableScrollSnap:"Disable scroll-snap overlay"},str_=i18n.i18n.registerUIStrings("panels/elements/ElementsTreeElement.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);function isOpeningTag(e){return"OPENING_TAG"===e.tagType}export class ElementsTreeElement extends UI.TreeOutline.TreeElement{nodeInternal;treeOutline;gutterContainer;decorationsElement;searchQuery;expandedChildrenLimitInternal;decorationsThrottler;inClipboard;hoveredInternal;editing;highlightResult;htmlEditElement;expandAllButtonElement;searchHighlightsVisible;selectionElement;hintElement;contentElement;#e=new Map;#t=new Map;tagTypeContext;constructor(e,t){super(),this.nodeInternal=e,this.treeOutline=null,this.contentElement=this.listItemElement.createChild("div"),this.gutterContainer=this.contentElement.createChild("div","gutter-container"),this.gutterContainer.addEventListener("click",this.showContextMenu.bind(this));const n=new IconButton.Icon.Icon;if(n.data={color:"var(--icon-default)",iconName:"dots-horizontal",height:"16px",width:"16px"},this.gutterContainer.append(n),this.decorationsElement=this.gutterContainer.createChild("div","hidden"),this.searchQuery=null,this.expandedChildrenLimitInternal=InitialChildrenLimit,this.decorationsThrottler=new Common.Throttler.Throttler(100),this.inClipboard=!1,this.hoveredInternal=!1,this.editing=null,this.highlightResult=[],t)this.tagTypeContext={tagType:"CLOSING_TAG"};else if(this.tagTypeContext={tagType:"OPENING_TAG",adornerContainer:this.contentElement.createChild("div","adorner-container hidden"),adorners:[],styleAdorners:[],adornersThrottler:new Common.Throttler.Throttler(100),canAddAttributes:this.nodeInternal.nodeType()===Node.ELEMENT_NODE},this.updateStyleAdorners(),e.isAdFrameNode()){const e=ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD),t=this.adorn(e);UI.Tooltip.Tooltip.install(t,i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd))}this.expandAllButtonElement=null}static animateOnDOMUpdate(e){const t=e.listItemElement.querySelector(".webkit-html-tag-name");UI.UIUtils.runCSSAnimationOnce(t||e.listItemElement,"dom-update-highlight")}static visibleShadowRoots(e){let t=e.shadowRoots();return t.length&&!Common.Settings.Settings.instance().moduleSetting("showUAShadowDOM").get()&&(t=t.filter((function(e){return e.shadowRootType()!==SDK.DOMModel.DOMNode.ShadowRootTypes.UserAgent}))),t}static canShowInlineText(e){if(e.contentDocument()||e.templateContent()||ElementsTreeElement.visibleShadowRoots(e).length||e.hasPseudoElements())return!1;if(e.nodeType()!==Node.ELEMENT_NODE)return!1;if(!e.firstChild||e.firstChild!==e.lastChild||e.firstChild.nodeType()!==Node.TEXT_NODE)return!1;return e.firstChild.nodeValue().length<80}static populateForcedPseudoStateItems(e,t){const n=["active","hover","focus","visited","focus-within","focus-visible"],i=t.domModel().cssModel().pseudoState(t),s=e.debugSection().appendSubMenuItem(i18nString(UIStrings.forceState));for(const e of n){const t=!!i&&i.indexOf(e)>=0;s.defaultSection().appendCheckboxItem(":"+e,o.bind(null,e,!t),t,!1)}function o(e,n){t.domModel().cssModel().forcePseudoState(t,e,n)}}isClosingTag(){return!isOpeningTag(this.tagTypeContext)}node(){return this.nodeInternal}isEditing(){return Boolean(this.editing)}highlightSearchResults(e){this.searchQuery!==e&&this.hideSearchHighlight(),this.searchQuery=e,this.searchHighlightsVisible=!0,this.updateTitle(null,!0)}hideSearchHighlights(){delete this.searchHighlightsVisible,this.hideSearchHighlight()}hideSearchHighlight(){if(0!==this.highlightResult.length){for(let e=this.highlightResult.length-1;e>=0;--e){const t=this.highlightResult[e];switch(t.type){case"added":t.node.remove();break;case"changed":t.node.textContent=t.oldText||null}}this.highlightResult=[]}}setInClipboard(e){this.inClipboard!==e&&(this.inClipboard=e,this.listItemElement.classList.toggle("in-clipboard",e))}get hovered(){return this.hoveredInternal}set hovered(e){this.hoveredInternal!==e&&(this.hoveredInternal=e,this.listItemElement&&(e?(this.createSelection(),this.listItemElement.classList.add("hovered")):this.listItemElement.classList.remove("hovered")))}addIssue(e){this.#e.has(e.primaryKey())||(this.#e.set(e.primaryKey(),e),this.#n(e))}#n(e){const t=e.details();t.violatingNodeAttribute?this.#i(t.violatingNodeAttribute,e):this.#s(e)}get issuesByNodeElement(){return this.#t}#i(e,t){const n=this.listItemElement.getElementsByClassName("webkit-html-tag")[0].getElementsByClassName("webkit-html-attribute");for(const i of n)if(i.getElementsByClassName("webkit-html-attribute-name")[0].textContent===e){const e=i.getElementsByClassName("webkit-html-attribute-name")[0];e.classList.add("violating-element"),this.#t.set(e,t)}}#s(e){const t=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0];t.classList.add("violating-element"),this.#t.set(t,e)}expandedChildrenLimit(){return this.expandedChildrenLimitInternal}setExpandedChildrenLimit(e){this.expandedChildrenLimitInternal=e}createSlotLink(e){if(isOpeningTag(this.tagTypeContext)&&e){const t=ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.SLOT);this.tagTypeContext.slot=this.adornSlot(t,this.tagTypeContext);const n=e.deferredNode;this.tagTypeContext.slot.addEventListener("click",(()=>{Host.userMetrics.badgeActivated(6),n.resolve((e=>{Common.Revealer.reveal(e)}))})),this.tagTypeContext.slot.addEventListener("mousedown",(e=>e.consume()),!1)}}createSelection(){const e=this.contentElement;e&&(this.selectionElement||(this.selectionElement=document.createElement("div"),this.selectionElement.className="selection fill",this.selectionElement.style.setProperty("margin-left",-this.computeLeftIndent()+"px"),e.prepend(this.selectionElement)))}createHint(){if(this.contentElement&&!this.hintElement){this.hintElement=this.contentElement.createChild("span","selected-hint");const e="$0";UI.Tooltip.Tooltip.install(this.hintElement,i18nString(UIStrings.useSInTheConsoleToReferToThis,{PH1:e})),UI.ARIAUtils.markAsHidden(this.hintElement)}}onbind(){this.treeOutline&&!this.isClosingTag()&&this.treeOutline.treeElementByNode.set(this.nodeInternal,this)}onunbind(){this.editing&&this.editing.cancel(),this.treeOutline&&this.treeOutline.treeElementByNode.get(this.nodeInternal)===this&&this.treeOutline.treeElementByNode.delete(this.nodeInternal)}onattach(){this.hoveredInternal&&(this.createSelection(),this.listItemElement.classList.add("hovered")),this.updateTitle(),this.listItemElement.draggable=!0}async onpopulate(){if(this.treeOutline)return this.treeOutline.populateTreeElement(this)}async expandRecursively(){await this.nodeInternal.getSubtree(-1,!0),await super.expandRecursively(Number.MAX_VALUE)}onexpand(){this.isClosingTag()||this.updateTitle()}oncollapse(){this.isClosingTag()||this.updateTitle()}select(e,t){return!this.editing&&super.select(e,t)}onselect(e){return!!this.treeOutline&&(this.treeOutline.suppressRevealAndSelect=!0,this.treeOutline.selectDOMNode(this.nodeInternal,e),e&&(this.nodeInternal.highlight(),Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel)),this.createSelection(),this.createHint(),this.treeOutline.suppressRevealAndSelect=!1,!0)}ondelete(){if(!this.treeOutline)return!1;const e=this.treeOutline.findTreeElement(this.nodeInternal);return e?e.remove():this.remove(),!0}onenter(){return!this.editing&&(this.startEditing(),!0)}selectOnMouseDown(e){super.selectOnMouseDown(e),this.editing||e.detail>=2&&e.preventDefault()}ondblclick(e){return this.editing||this.isClosingTag()||this.startEditingTarget(e.target)||this.isExpandable()&&!this.expanded&&this.expand(),!1}hasEditableNode(){return!this.nodeInternal.isShadowRoot()&&!this.nodeInternal.ancestorUserAgentShadowRoot()}insertInLastAttributePosition(e,t){if(e.getElementsByClassName("webkit-html-attribute").length>0)e.insertBefore(t,e.lastChild);else if(null!==e.textContent){const n=e.textContent.match(/^<(.*?)>$/);if(!n)return;const i=n[1];e.textContent="",UI.UIUtils.createTextChild(e,"<"+i),e.appendChild(t),UI.UIUtils.createTextChild(e,">")}}startEditingTarget(e){if(!this.treeOutline||this.treeOutline.selectedDOMNode()!==this.nodeInternal)return!1;if(this.nodeInternal.nodeType()!==Node.ELEMENT_NODE&&this.nodeInternal.nodeType()!==Node.TEXT_NODE)return!1;const t=e.enclosingNodeOrSelfWithClass("webkit-html-text-node");if(t)return this.startEditingTextNode(t);const n=e.enclosingNodeOrSelfWithClass("webkit-html-attribute");if(n)return this.startEditingAttribute(n,e);const i=e.enclosingNodeOrSelfWithClass("webkit-html-tag-name");if(i)return this.startEditingTagName(i);return!!e.enclosingNodeOrSelfWithClass("add-attribute")&&this.addNewAttribute()}showContextMenu(e){this.treeOutline&&this.treeOutline.showContextMenu(this,e)}populateTagContextMenu(e,t){const n=this.isClosingTag()&&this.treeOutline?this.treeOutline.findTreeElement(this.nodeInternal):this;if(!n)return;e.editSection().appendItem(i18nString(UIStrings.addAttribute),n.addNewAttribute.bind(n));const i=t.target,s=i.enclosingNodeOrSelfWithClass("webkit-html-attribute"),o=i.enclosingNodeOrSelfWithClass("add-attribute");s&&!o&&e.editSection().appendItem(i18nString(UIStrings.editAttribute),this.startEditingAttribute.bind(this,s,i)),this.populateNodeContextMenu(e),ElementsTreeElement.populateForcedPseudoStateItems(e,n.node()),this.populateScrollIntoView(e),e.viewSection().appendItem(i18nString(UIStrings.focus),(async()=>{await this.nodeInternal.focus()}))}populateScrollIntoView(e){e.viewSection().appendItem(i18nString(UIStrings.scrollIntoView),(()=>this.nodeInternal.scrollIntoView()))}populateTextContextMenu(e,t){this.editing||e.editSection().appendItem(i18nString(UIStrings.editText),this.startEditingTextNode.bind(this,t)),this.populateNodeContextMenu(e)}populateNodeContextMenu(e){const t=this.hasEditableNode();t&&!this.editing&&e.editSection().appendItem(i18nString(UIStrings.editAsHtml),this.editAsHTML.bind(this));const n=this.nodeInternal.isShadowRoot(),i=UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null),s=UI.KeyboardShortcut.Modifiers.CtrlOrMeta,o=this.treeOutline;if(!o)return;let r;r=e.clipboardSection().appendItem(i18nString(UIStrings.cut),o.performCopyOrCut.bind(o,!0,this.nodeInternal),!this.hasEditableNode()),r.setShortcut(i("X",s));const l=e.clipboardSection().appendSubMenuItem(i18nString(UIStrings.copy)),a=l.section();if(n||(r=a.appendItem(i18nString(UIStrings.copyOuterhtml),o.performCopyOrCut.bind(o,!1,this.nodeInternal)),r.setShortcut(i("V",s))),this.nodeInternal.nodeType()===Node.ELEMENT_NODE&&(a.appendItem(i18nString(UIStrings.copySelector),this.copyCSSPath.bind(this)),a.appendItem(i18nString(UIStrings.copyJsPath),this.copyJSPath.bind(this),!canGetJSPath(this.nodeInternal)),a.appendItem(i18nString(UIStrings.copyStyles),this.copyStyles.bind(this))),n||(a.appendItem(i18nString(UIStrings.copyXpath),this.copyXPath.bind(this)),a.appendItem(i18nString(UIStrings.copyFullXpath),this.copyFullXPath.bind(this))),!n){r=l.clipboardSection().appendItem(i18nString(UIStrings.copyElement),o.performCopyOrCut.bind(o,!1,this.nodeInternal)),r.setShortcut(i("C",s));const t=!this.nodeInternal.parentNode||"#document"===this.nodeInternal.parentNode.nodeName();r=e.editSection().appendItem(i18nString(UIStrings.duplicateElement),o.duplicateNode.bind(o,this.nodeInternal),this.nodeInternal.isInShadowTree()||t)}r=e.clipboardSection().appendItem(i18nString(UIStrings.paste),o.pasteNode.bind(o,this.nodeInternal),!o.canPaste(this.nodeInternal)),r.setShortcut(i("V",s)),r=e.debugSection().appendCheckboxItem(i18nString(UIStrings.hideElement),o.toggleHideElement.bind(o,this.nodeInternal),o.isToggledToHidden(this.nodeInternal)),r.setShortcut(UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction("elements.hide-element")||""),t&&e.editSection().appendItem(i18nString(UIStrings.deleteElement),this.remove.bind(this)),e.viewSection().appendItem(i18nString(UIStrings.expandRecursively),this.expandRecursively.bind(this)),e.viewSection().appendItem(i18nString(UIStrings.collapseChildren),this.collapseChildren.bind(this));const d=new Emulation.DeviceModeWrapper.ActionDelegate;e.viewSection().appendItem(i18nString(UIStrings.captureNodeScreenshot),d.handleAction.bind(null,UI.Context.Context.instance(),"emulation.capture-node-screenshot")),this.nodeInternal.frameOwnerFrameId()&&e.viewSection().appendItem(i18nString(UIStrings.showFrameDetails),(()=>{const e=this.nodeInternal.frameOwnerFrameId();if(e){const t=SDK.FrameManager.FrameManager.instance().getFrame(e);Common.Revealer.reveal(t)}}))}startEditing(){if(!this.treeOutline||this.treeOutline.selectedDOMNode()!==this.nodeInternal)return;const e=this.listItemElement;if(isOpeningTag(this.tagTypeContext)&&this.tagTypeContext.canAddAttributes){const t=e.getElementsByClassName("webkit-html-attribute")[0];return t?this.startEditingAttribute(t,t.getElementsByClassName("webkit-html-attribute-value")[0]):this.addNewAttribute()}if(this.nodeInternal.nodeType()===Node.TEXT_NODE){const t=e.getElementsByClassName("webkit-html-text-node")[0];if(t)return this.startEditingTextNode(t)}}addNewAttribute(){const e=document.createElement("span"),t=this.buildAttributeDOM(e," ","",null);t.style.marginLeft="2px",t.style.marginRight="2px";const n=this.listItemElement.getElementsByClassName("webkit-html-tag")[0];return this.insertInLastAttributePosition(n,t),t.scrollIntoViewIfNeeded(!0),this.startEditingAttribute(t,t)}triggerEditAttribute(e){const t=this.listItemElement.getElementsByClassName("webkit-html-attribute-name");for(let n=0,i=t.length;n<i;++n)if(t[n].textContent===e)for(let e=t[n].nextSibling;e;e=e.nextSibling)if(e.nodeType===Node.ELEMENT_NODE&&e.classList.contains("webkit-html-attribute-value"))return this.startEditingAttribute(e.parentElement,e)}startEditingAttribute(e,t){if(console.assert(this.listItemElement.isAncestor(e)),UI.UIUtils.isBeingEdited(e))return!0;const n=e.getElementsByClassName("webkit-html-attribute-name")[0];if(!n)return!1;const i=n.textContent,s=e.getElementsByClassName("webkit-html-attribute-value")[0];t=s.isAncestor(t)?s:t;const o=i&&s?this.nodeInternal.getAttribute(i)?.replaceAll('"',"""):void 0;void 0!==o&&s.setTextContentTruncatedIfNeeded(o,i18nString(UIStrings.valueIsTooLargeToEdit)),function e(t){if(t.nodeType!==Node.TEXT_NODE){if(t.nodeType===Node.ELEMENT_NODE)for(let n=t.firstChild;n;n=n.nextSibling)e(n)}else t.nodeValue=t.nodeValue?t.nodeValue.replace(/\u200B/g,""):""}(e);const r=new UI.InplaceEditor.Config(this.attributeEditingCommitted.bind(this),this.editingCancelled.bind(this),i||void 0);Common.ParsedURL.ParsedURL.fromString(s.textContent||"")||r.setPostKeydownFinishHandler((function(t){return UI.UIUtils.handleElementValueModifications(t,e),""})),this.updateEditorHandles(e,r);const l=this.listItemElement.getComponentSelection();return l&&l.selectAllChildren(t),!0}startEditingTextNode(e){if(UI.UIUtils.isBeingEdited(e))return!0;let t=this.nodeInternal;t.nodeType()===Node.ELEMENT_NODE&&t.firstChild&&(t=t.firstChild);const n=e.enclosingNodeOrSelfWithClass("webkit-html-text-node");n&&(n.textContent=t.nodeValue());const i=new UI.InplaceEditor.Config(this.textNodeEditingCommitted.bind(this,t),this.editingCancelled.bind(this));this.updateEditorHandles(e,i);const s=this.listItemElement.getComponentSelection();return s&&s.selectAllChildren(e),!0}startEditingTagName(e){if(!e&&!(e=this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0]))return!1;const t=e.textContent;if(null!==t&&EditTagBlocklist.has(t.toLowerCase()))return!1;if(UI.UIUtils.isBeingEdited(e))return!0;const n=this.distinctClosingTagElement();function i(){n&&e&&(n.textContent="</"+e.textContent+">")}const s=e=>{" "===e.key&&(this.editing&&this.editing.commit(),e.consume(!0))};e.addEventListener("keyup",i,!1),e.addEventListener("keydown",s,!1);const o=new UI.InplaceEditor.Config(function(t,n,o,r,l){e&&(e.removeEventListener("keyup",i,!1),e.removeEventListener("keydown",s,!1),this.tagNameEditingCommitted(t,n,o,r,l))}.bind(this),function(t,n){e&&(e.removeEventListener("keyup",i,!1),e.removeEventListener("keydown",s,!1),this.editingCancelled(t,n))}.bind(this),t);this.updateEditorHandles(e,o);const r=this.listItemElement.getComponentSelection();return r&&r.selectAllChildren(e),!0}updateEditorHandles(e,t){const n=UI.InplaceEditor.InplaceEditor.startEditing(e,t);this.editing=n?{commit:n.commit,cancel:n.cancel,editor:void 0,resize:()=>{}}:null}async startEditingAsHTML(e,t,n){if(null===n)return;if(this.editing)return;const i=this.convertWhitespaceToEntities(n).text;this.htmlEditElement=document.createElement("div"),this.htmlEditElement.className="source-code elements-tree-editor";let s=this.listItemElement.firstChild;for(;s;)s.style.display="none",s=s.nextSibling;this.childrenListElement&&(this.childrenListElement.style.display="none"),this.listItemElement.append(this.htmlEditElement),this.htmlEditElement.addEventListener("keydown",(e=>{"Escape"===e.key&&e.consume(!0)}));const o=new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({doc:i,extensions:[CodeMirror.keymap.of([{key:"Mod-Enter",run:()=>(this.editing?.commit(),!0)},{key:"Escape",run:()=>(this.editing?.cancel(),!0)}]),TextEditor.Config.baseConfiguration(i),TextEditor.Config.closeBrackets,TextEditor.Config.autocompletion.instance(),CodeMirror.html.html(),TextEditor.Config.domWordWrap.instance(),CodeMirror.EditorView.theme({"&.cm-editor":{maxHeight:"300px"},".cm-scroller":{overflowY:"auto"}}),CodeMirror.EditorView.domEventHandlers({focusout:e=>{const t=e.relatedTarget;t&&!t.isSelfOrDescendant(o)&&this.editing&&this.editing.commit()}})]}));function r(){this.treeOutline&&this.htmlEditElement&&(this.htmlEditElement.style.width=this.treeOutline.visibleWidth()-this.computeLeftIndent()-30+"px")}function l(){if(!this.editing||!this.editing.editor)return;this.editing=null,this.htmlEditElement&&this.listItemElement.removeChild(this.htmlEditElement),this.htmlEditElement=void 0,this.childrenListElement&&this.childrenListElement.style.removeProperty("display");let e=this.listItemElement.firstChild;for(;e;)e.style.removeProperty("display"),e=e.nextSibling;this.treeOutline&&(this.treeOutline.setMultilineEditing(null),this.treeOutline.focus()),t()}this.editing={commit:function(){this.editing&&this.editing.editor&&e(i,this.editing.editor.state.doc.toString());l.call(this)}.bind(this),cancel:l.bind(this),editor:o,resize:r.bind(this)},r.call(this),this.htmlEditElement.appendChild(o),o.editor.focus(),this.treeOutline&&this.treeOutline.setMultilineEditing(this.editing)}attributeEditingCommitted(e,t,n,i,s){this.editing=null;const o=this.treeOutline;function r(n){if(n&&this.editingCancelled(e,i),!s)return;o&&(o.runPendingUpdates(),o.focus());const r=this.nodeInternal.attributes();for(let e=0;e<r.length;++e)if(r[e].name===i)return void("backward"===s?0===e?this.startEditingTagName():this.triggerEditAttribute(r[e-1].name):e===r.length-1?this.addNewAttribute():this.triggerEditAttribute(r[e+1].name));"backward"===s?" "===t?r.length>0&&this.triggerEditAttribute(r[r.length-1].name):r.length>1&&this.triggerEditAttribute(r[r.length-2].name):"forward"===s&&(Platform.StringUtilities.isWhitespace(t)?this.startEditingTagName():this.addNewAttribute())}!i.trim()&&!t.trim()||n===t?(this.updateTitle(),r.call(this)):this.nodeInternal.setAttribute(i,t,r.bind(this))}tagNameEditingCommitted(e,t,n,i,s){this.editing=null;const o=this;function r(){const t=o.distinctClosingTagElement();t&&(t.textContent="</"+i+">"),o.editingCancelled(e,i),l.call(o)}function l(){if("forward"!==s)return void this.addNewAttribute();const e=this.nodeInternal.attributes();e.length>0?this.triggerEditAttribute(e[0].name):this.addNewAttribute()}if((t=t.trim())===n)return void r();const a=this.treeOutline,d=this.expanded;this.nodeInternal.setNodeName(t,((e,t)=>{if(e||!t)return void r();if(!a)return;const n=a.selectNodeAfterEdit(d,e,t);l.call(n)}))}textNodeEditingCommitted(e,t,n){this.editing=null,e.setNodeValue(n,function(){this.updateTitle()}.bind(this))}editingCancelled(e,t){this.editing=null,this.updateTitle()}distinctClosingTagElement(){if(this.expanded){const e=this.childrenListElement.querySelectorAll(".close");return e[e.length-1]}const e=this.listItemElement.getElementsByClassName("webkit-html-tag");return 1===e.length?null:e[e.length-1]}updateTitle(e,t){if(!this.editing){if(t)this.hideSearchHighlight();else{const t=this.nodeTitleInfo(e||null);if(this.nodeInternal.nodeType()===Node.DOCUMENT_FRAGMENT_NODE&&this.nodeInternal.isInShadowTree()&&this.nodeInternal.shadowRootType()){this.childrenListElement.classList.add("shadow-root");let e=4;for(let t=this.nodeInternal;e&&t;t=t.parentNode)t.nodeType()===Node.DOCUMENT_FRAGMENT_NODE&&e--;e?this.childrenListElement.classList.add("shadow-root-depth-"+e):this.childrenListElement.classList.add("shadow-root-deep")}this.contentElement.removeChildren();this.contentElement.createChild("span","highlight").append(t),this.title=this.contentElement,this.updateDecorations(),this.contentElement.prepend(this.gutterContainer),isOpeningTag(this.tagTypeContext)&&(this.contentElement.append(this.tagTypeContext.adornerContainer),this.tagTypeContext.slot&&this.contentElement.append(this.tagTypeContext.slot)),this.highlightResult=[],delete this.selectionElement,delete this.hintElement,this.selected&&(this.createSelection(),this.createHint());for(const e of this.#e.values())this.#n(e)}this.highlightSearchResultsInternal()}}computeLeftIndent(){let e=this.parent,t=0;for(;null!==e;)t++,e=e.parent;return 12*(t-2)+(this.isExpandable()&&this.isCollapsible()?1:12)}updateDecorations(){const e=this.computeLeftIndent();this.gutterContainer.style.left=-e+"px",this.listItemElement.style.setProperty("--indent",e+"px"),this.isClosingTag()||this.nodeInternal.nodeType()===Node.ELEMENT_NODE&&this.decorationsThrottler.schedule(this.updateDecorationsInternal.bind(this))}updateDecorationsInternal(){if(!this.treeOutline)return Promise.resolve();const e=this.nodeInternal;this.treeOutline.decoratorExtensions||(this.treeOutline.decoratorExtensions=getRegisteredDecorators());const t=new Map;for(const e of this.treeOutline.decoratorExtensions)t.set(e.marker,e);const n=[],i=[],s=[];function o(t,n){const o=n.decorate(t);o&&(t===e?i:s).push(o)}return e.traverseMarkers((function(e,i){const s=t.get(i);if(!s)return;n.push(Promise.resolve(s.decorator()).then(o.bind(null,e)))})),Promise.all(n).then(function(){if(this.decorationsElement.removeChildren(),this.decorationsElement.classList.add("hidden"),this.gutterContainer.classList.toggle("has-decorations",Boolean(i.length||s.length)),UI.ARIAUtils.setLabel(this.decorationsElement,""),!i.length&&!s.length)return;const e=new Set,t=document.createElement("div");for(const n of i){t.createChild("div").textContent=n.title,e.add(n.color)}if(this.expanded&&!i.length)return;const n=new Set;if(s.length){let e=t.createChild("div");e.textContent=i18nString(UIStrings.children);for(const i of s)e=t.createChild("div"),e.style.marginLeft="15px",e.textContent=i.title,n.add(i.color)}let o=0;r.call(this,e,"elements-gutter-decoration"),this.expanded||r.call(this,n,"elements-gutter-decoration elements-has-decorated-children");function r(e,t){for(const n of e){const e=this.decorationsElement.createChild("div",t);this.decorationsElement.classList.remove("hidden"),e.style.backgroundColor=n,e.style.borderColor=n,o&&(e.style.marginLeft=o+"px"),o+=3}}UI.Tooltip.Tooltip.install(this.decorationsElement,t.textContent),UI.ARIAUtils.setLabel(this.decorationsElement,t.textContent||"")}.bind(this))}buildAttributeDOM(e,t,n,i,s,o){const r=/[\/;:\)\]\}]/g;let l=0,a=0,d=0;function h(e,t){const n=this.convertWhitespaceToEntities(t);for(a=n.entityRanges.length,t=n.text.replace(r,((e,t)=>{for(;l<a&&n.entityRanges[l].offset<t;)n.entityRanges[l].offset+=d,++l;return d+=1,e+""})).replaceAll('"',""");l<a;)n.entityRanges[l].offset+=d,++l;e.setTextContentTruncatedIfNeeded(t),UI.UIUtils.highlightRangesWithStyleClass(e,n.entityRanges,"webkit-html-entity-value")}const c=s||n.length>0,m=e.createChild("span","webkit-html-attribute"),g=m.createChild("span","webkit-html-attribute-name");g.textContent=t,c&&UI.UIUtils.createTextChild(m,'="');const u=m.createChild("span","webkit-html-attribute-value");function p(e){const t=o?o.resolveURL(e):null;if(null===t){const t=document.createElement("span");return h.call(this,t,e),t}(e=e.replace(r,"$&")).startsWith("data:")&&(e=Platform.StringUtilities.trimMiddle(e,60));const n=o&&"a"===o.nodeName().toLowerCase()?UI.XLink.XLink.create(t,e,"",!0):Components.Linkifier.Linkifier.linkifyURL(t,{text:e,preventClick:!0,showColumnNumber:!1,inlineFrameIndex:0});return ImagePreviewPopover.setImageUrl(n,t)}i&&i.isAttributeModified(t)&&UI.UIUtils.runCSSAnimationOnce(c?u:g,"dom-update-highlight");const I=o?o.nodeName().toLowerCase():"";function E(e){const t=document.createDocumentFragment();let n=0;for(;e.length;){n++>0&&UI.UIUtils.createTextChild(t," ");let i="",s="";const o=(e=e.trim()).search(/\s/);if(-1===o)i=e;else if(o>0&&","===e[o-1])i=e.substring(0,o);else{i=e.substring(0,o);const t=e.indexOf(",",o);s=-1!==t?e.substring(o,t+1):e.substring(o)}i&&(i.endsWith(",")?(t.appendChild(p.call(this,i.substring(0,i.length-1))),UI.UIUtils.createTextChild(t,",")):t.appendChild(p.call(this,i))),s&&UI.UIUtils.createTextChild(t,s),e=e.substring(i.length+s.length)}return t}return I&&("src"===t||"href"===t)&&n?u.appendChild(p.call(this,n)):("img"!==I&&"source"!==I||"srcset"!==t)&&("image"!==I||"xlink:href"!==t&&"href"!==t)?h.call(this,u,n):u.appendChild(E.call(this,n)),c&&UI.UIUtils.createTextChild(m,'"'),m}buildPseudoElementDOM(e,t){e.createChild("span","webkit-html-pseudo-element").textContent="::"+t,UI.UIUtils.createTextChild(e,"")}buildTagDOM(e,t,n,i,s){const o=this.nodeInternal,r=["webkit-html-tag"];n&&i&&r.push("close");const l=e.createChild("span",r.join(" "));UI.UIUtils.createTextChild(l,"<");const a=l.createChild("span",n?"webkit-html-close-tag-name":"webkit-html-tag-name");if(a.textContent=(n?"/":"")+t,!n){if(o.hasAttributes()){const e=o.attributes();for(let t=0;t<e.length;++t){const n=e[t];UI.UIUtils.createTextChild(l," "),this.buildAttributeDOM(l,n.name,n.value,s,!1,o)}}if(s){let e=s.hasRemovedAttributes()||s.hasRemovedChildren();e=e||!this.expanded&&s.hasChangedChildren(),e&&UI.UIUtils.runCSSAnimationOnce(a,"dom-update-highlight")}}UI.UIUtils.createTextChild(l,">"),UI.UIUtils.createTextChild(e,""),l.textContent&&UI.ARIAUtils.setLabel(l,l.textContent)}convertWhitespaceToEntities(e){let t="",n=0;const i=[],s=MappedCharToEntity;for(let o=0,r=e.length;o<r;++o){const r=e.charAt(o);if(s.has(r)){t+=e.substring(n,o);const l="&"+s.get(r)+";";i.push({offset:t.length,length:l.length}),t+=l,n=o+1}}return t&&(t+=e.substring(n)),{text:t||e,entityRanges:i}}nodeTitleInfo(e){const t=this.nodeInternal,n=document.createDocumentFragment(),i=()=>{this.highlightResult=[],this.highlightSearchResultsInternal()};switch(t.nodeType()){case Node.ATTRIBUTE_NODE:this.buildAttributeDOM(n,t.name,t.value,e,!0);break;case Node.ELEMENT_NODE:{let i=t.pseudoType();if(i){const e=t.pseudoIdentifier();e&&(i+=`(${e})`),this.buildPseudoElementDOM(n,i);break}const s=t.nodeNameInCorrectCase();if(this.isClosingTag()){this.buildTagDOM(n,s,!0,!0,e);break}if(this.buildTagDOM(n,s,!1,!1,e),this.isExpandable()){if(!this.expanded){const t=new ElementsComponents.ElementsTreeExpandButton.ElementsTreeExpandButton;t.data={clickHandler:()=>this.expand()},n.appendChild(t);const i=document.createElement("span");i.textContent="…",i.style.fontSize="0",n.appendChild(i),UI.UIUtils.createTextChild(n,""),this.buildTagDOM(n,s,!0,!1,e)}break}if(ElementsTreeElement.canShowInlineText(t)){const i=n.createChild("span","webkit-html-text-node"),o=t.firstChild;if(!o)throw new Error("ElementsTreeElement._nodeTitleInfo expects node.firstChild to be defined.");const r=this.convertWhitespaceToEntities(o.nodeValue());i.textContent=Platform.StringUtilities.collapseWhitespace(r.text),UI.UIUtils.highlightRangesWithStyleClass(i,r.entityRanges,"webkit-html-entity-value"),UI.UIUtils.createTextChild(n,""),this.buildTagDOM(n,s,!0,!1,e),e&&e.hasChangedChildren()&&UI.UIUtils.runCSSAnimationOnce(i,"dom-update-highlight"),e&&e.isCharDataModified()&&UI.UIUtils.runCSSAnimationOnce(i,"dom-update-highlight");break}(this.treeOutline&&this.treeOutline.isXMLMimeType||!ForbiddenClosingTagElements.has(s))&&this.buildTagDOM(n,s,!0,!1,e);break}case Node.TEXT_NODE:if(t.parentNode&&"script"===t.parentNode.nodeName().toLowerCase()){const e=n.createChild("span","webkit-html-text-node webkit-html-js-node"),s=t.nodeValue();e.textContent=s.replace(/^[\n\r]+|\s+$/g,""),CodeHighlighter.CodeHighlighter.highlightNode(e,"text/javascript").then(i)}else if(t.parentNode&&"style"===t.parentNode.nodeName().toLowerCase()){const e=n.createChild("span","webkit-html-text-node webkit-html-css-node"),s=t.nodeValue();e.textContent=s.replace(/^[\n\r]+|\s+$/g,""),CodeHighlighter.CodeHighlighter.highlightNode(e,"text/css").then(i)}else{UI.UIUtils.createTextChild(n,'"');const i=n.createChild("span","webkit-html-text-node"),s=this.convertWhitespaceToEntities(t.nodeValue());i.textContent=Platform.StringUtilities.collapseWhitespace(s.text),UI.UIUtils.highlightRangesWithStyleClass(i,s.entityRanges,"webkit-html-entity-value"),UI.UIUtils.createTextChild(n,'"'),e&&e.isCharDataModified()&&UI.UIUtils.runCSSAnimationOnce(i,"dom-update-highlight")}break;case Node.COMMENT_NODE:{const e=n.createChild("span","webkit-html-comment");UI.UIUtils.createTextChild(e,"\x3c!--"+t.nodeValue()+"--\x3e");break}case Node.DOCUMENT_TYPE_NODE:{const e=n.createChild("span","webkit-html-doctype");UI.UIUtils.createTextChild(e,"<!DOCTYPE "+t.nodeName()),t.publicId?(UI.UIUtils.createTextChild(e,' PUBLIC "'+t.publicId+'"'),t.systemId&&UI.UIUtils.createTextChild(e,' "'+t.systemId+'"')):t.systemId&&UI.UIUtils.createTextChild(e,' SYSTEM "'+t.systemId+'"'),t.internalSubset&&UI.UIUtils.createTextChild(e," ["+t.internalSubset+"]"),UI.UIUtils.createTextChild(e,">");break}case Node.CDATA_SECTION_NODE:{const e=n.createChild("span","webkit-html-text-node");UI.UIUtils.createTextChild(e,"<![CDATA["+t.nodeValue()+"]]>");break}case Node.DOCUMENT_FRAGMENT_NODE:n.createChild("span","webkit-html-fragment").textContent=Platform.StringUtilities.collapseWhitespace(t.nodeNameInCorrectCase());break;default:{const e=Platform.StringUtilities.collapseWhitespace(t.nodeNameInCorrectCase());UI.UIUtils.createTextChild(n,e)}}return n}remove(){if(this.nodeInternal.pseudoType())return;this.parent&&this.nodeInternal.parentNode&&this.nodeInternal.parentNode.nodeType()!==Node.DOCUMENT_NODE&&this.nodeInternal.removeNode()}toggleEditAsHTML(e,t){if(this.editing&&this.htmlEditElement)return void this.editing.commit();if(!1===t)return;function n(t){e&&e(!t)}const i=this.nodeInternal;i.getOuterHTML().then(this.startEditingAsHTML.bind(this,(function(e,t){e!==t&&i.setOuterHTML(t,n)}),(function(){e&&e(!1)})))}copyCSSPath(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssPath(this.nodeInternal,!0))}copyJSPath(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(jsPath(this.nodeInternal,!0))}copyXPath(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.nodeInternal,!0))}copyFullXPath(){Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.nodeInternal,!1))}async copyStyles(){const e=this.nodeInternal,t=e.domModel().cssModel(),n=await t.cachedMatchedCascadeForNode(e);if(!n)return;const i=Common.Settings.Settings.instance().moduleSetting("textEditorIndent").get(),s=[];for(const e of n.nodeStyles().reverse())for(const t of e.leadingProperties())t.parsedOk&&!t.disabled&&t.activeInStyle()&&!t.implicit&&(n.isInherited(e)&&!SDK.CSSMetadata.cssMetadata().isPropertyInherited(t.name)||e.parentRule&&e.parentRule.isUserAgent()||n.propertyState(t)===SDK.CSSMatchedStyles.PropertyState.Active&&s.push(`${i}${t.name}: ${t.value};`));Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(s.join("\n"))}highlightSearchResultsInternal(){if(!this.searchQuery||!this.searchHighlightsVisible)return;this.hideSearchHighlight();const e=this.listItemElement.textContent||"",t=Platform.StringUtilities.createPlainTextSearchRegex(this.searchQuery,"gi");let n=t.exec(e);const i=[];for(;n;)i.push(new TextUtils.TextRange.SourceRange(n.index,n[0].length)),n=t.exec(e);i.length||i.push(new TextUtils.TextRange.SourceRange(0,e.length)),this.highlightResult=[],UI.UIUtils.highlightSearchResults(this.listItemElement,i,this.highlightResult)}editAsHTML(){Common.Revealer.reveal(this.node()).then((()=>{const e=UI.ActionRegistry.ActionRegistry.instance().action("elements.edit-as-html");if(e)return e.execute()}))}adorn({name:e},t){let n=t;n||(n=document.createElement("span"),n.textContent=e);const i=new Adorners.Adorner.Adorner;return i.data={name:e,content:n},isOpeningTag(this.tagTypeContext)&&(this.tagTypeContext.adorners.push(i),ElementsPanel.instance().registerAdorner(i),this.updateAdorners(this.tagTypeContext)),i}adornSlot({name:e},t){const n=new IconButton.Icon.Icon;n.data={iconName:"select-element",color:"var(--icon-default)",width:"14px",height:"14px"};const i=document.createElement("span");i.textContent=e;const s=document.createElement("span");s.append(n),s.append(i),s.classList.add("adorner-with-icon");const o=new Adorners.Adorner.Adorner;return o.data={name:e,content:s},t.adorners.push(o),ElementsPanel.instance().registerAdorner(o),this.updateAdorners(t),o}removeAdorner(e,t){const n=t.adorners;ElementsPanel.instance().deregisterAdorner(e),e.remove();for(let i=0;i<n.length;++i)if(n[i]===e)return n.splice(i,1),void this.updateAdorners(t)}removeAllAdorners(){if(isOpeningTag(this.tagTypeContext)){for(const e of this.tagTypeContext.adorners)ElementsPanel.instance().deregisterAdorner(e),e.remove();this.tagTypeContext.adorners=[],this.updateAdorners(this.tagTypeContext)}}updateAdorners(e){e.adornersThrottler.schedule(this.updateAdornersInternal.bind(null,e))}updateAdornersInternal(e){const t=e.adornerContainer;if(!t)return Promise.resolve();const n=e.adorners;if(0===n.length)return t.classList.add("hidden"),Promise.resolve();n.sort(adornerComparator),t.removeChildren();for(const e of n)t.appendChild(e);return t.classList.remove("hidden"),Promise.resolve()}async updateStyleAdorners(){if(!isOpeningTag(this.tagTypeContext))return;const e=this.node(),t=e.id;if(e.nodeType()===Node.COMMENT_NODE||e.nodeType()===Node.DOCUMENT_FRAGMENT_NODE||e.nodeType()===Node.TEXT_NODE||void 0===t)return;const n=await e.domModel().cssModel().getComputedStyle(t);for(const e of this.tagTypeContext.styleAdorners)this.removeAdorner(e,this.tagTypeContext);if(this.tagTypeContext.styleAdorners=[],!n)return;const i=n.get("display"),s="grid"===i||"inline-grid"===i,o="flex"===i||"inline-flex"===i,r=(s&&(n.get("grid-template-columns")?.startsWith("subgrid")||n.get("grid-template-rows")?.startsWith("subgrid")))??!1,l=n.get("container-type"),a=n.get("contain"),d=""!==SDK.CSSContainerQuery.getQueryAxis(`${l} ${a}`);s&&this.pushGridAdorner(this.tagTypeContext,r),o&&this.pushFlexAdorner(this.tagTypeContext),n.get("scroll-snap-type")&&"none"!==n.get("scroll-snap-type")&&this.pushScrollSnapAdorner(this.tagTypeContext),d&&this.pushContainerAdorner(this.tagTypeContext)}pushGridAdorner(e,t){const n=this.node(),i=n.id;if(!i)return;const s=ElementsComponents.AdornerManager.getRegisteredAdorner(t?ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID:ElementsComponents.AdornerManager.RegisteredAdorners.GRID),o=this.adorn(s);o.classList.add("grid");o.addInteraction((()=>{o.isActive()?(n.domModel().overlayModel().highlightGridInPersistentOverlay(i),Host.userMetrics.badgeActivated(t?1:0)):n.domModel().overlayModel().hideGridInPersistentOverlay(i)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:i18nString(UIStrings.enableGridMode),ariaLabelActive:i18nString(UIStrings.disableGridMode)}),n.domModel().overlayModel().addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged,(e=>{const{nodeId:t,enabled:n}=e.data;t===i&&o.toggle(n)})),e.styleAdorners.push(o)}pushScrollSnapAdorner(e){const t=this.node(),n=t.id;if(!n)return;const i=ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP),s=this.adorn(i);s.classList.add("scroll-snap");s.addInteraction((()=>{const e=t.domModel().overlayModel();s.isActive()?(e.highlightScrollSnapInPersistentOverlay(n),Host.userMetrics.badgeActivated(4)):e.hideScrollSnapInPersistentOverlay(n)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:i18nString(UIStrings.enableScrollSnap),ariaLabelActive:i18nString(UIStrings.disableScrollSnap)}),t.domModel().overlayModel().addEventListener(SDK.OverlayModel.Events.PersistentScrollSnapOverlayStateChanged,(e=>{const{nodeId:t,enabled:i}=e.data;t===n&&s.toggle(i)})),e.styleAdorners.push(s)}pushFlexAdorner(e){const t=this.node(),n=t.id;if(!n)return;const i=ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX),s=this.adorn(i);s.classList.add("flex");s.addInteraction((()=>{const e=t.domModel().overlayModel();s.isActive()?(e.highlightFlexContainerInPersistentOverlay(n),Host.userMetrics.badgeActivated(2)):e.hideFlexContainerInPersistentOverlay(n)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:i18nString(UIStrings.enableFlexMode),ariaLabelActive:i18nString(UIStrings.disableFlexMode)}),t.domModel().overlayModel().addEventListener(SDK.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged,(e=>{const{nodeId:t,enabled:i}=e.data;t===n&&s.toggle(i)})),e.styleAdorners.push(s)}pushContainerAdorner(e){const t=this.node(),n=t.id;if(!n)return;const i=ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER),s=this.adorn(i);s.classList.add("container");s.addInteraction((()=>{const e=t.domModel().overlayModel();s.isActive()?(e.highlightContainerQueryInPersistentOverlay(n),Host.userMetrics.badgeActivated(5)):e.hideContainerQueryInPersistentOverlay(n)}),{isToggle:!0,shouldPropagateOnKeydown:!1,ariaLabelDefault:i18nString(UIStrings.enableScrollSnap),ariaLabelActive:i18nString(UIStrings.disableScrollSnap)}),t.domModel().overlayModel().addEventListener(SDK.OverlayModel.Events.PersistentContainerQueryOverlayStateChanged,(e=>{const{nodeId:t,enabled:i}=e.data;t===n&&s.toggle(i)})),e.styleAdorners.push(s)}}export const InitialChildrenLimit=500;export const ForbiddenClosingTagElements=new Set(["area","base","basefont","br","canvas","col","command","embed","frame","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]);export const EditTagBlocklist=new Set(["html","head","body"]);export function adornerComparator(e,t){const n=ElementsComponents.AdornerManager.compareAdornerNamesByCategory(t.name,t.name);return 0===n?e.name.localeCompare(t.name):n}