UNPKG

chrome-devtools-frontend

Version:
1,395 lines (1,215 loc) • 85.6 kB
// Copyright 2021 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /* * Copyright (C) 2007, 2008 Apple Inc. All rights reserved. * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com> * Copyright (C) 2009 Joseph Pecoraro * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * 2. Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of * its contributors may be used to endorse or promote products derived * from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ 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 type * as IssuesManager from '../../models/issues_manager/issues_manager.js'; import * as ElementsComponents from './components/components.js'; import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js'; import {ElementsPanel} from './ElementsPanel.js'; import {MappedCharToEntity, type ElementsTreeOutline, type UpdateRecord} from './ElementsTreeOutline.js'; import {ImagePreviewPopover} from './ImagePreviewPopover.js'; import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js'; const UIStrings = { /** *@description Title for Ad adorner. This iframe is marked as advertisement frame. */ thisFrameWasIdentifiedAsAnAd: 'This frame was identified as an ad frame', /** *@description A context menu item in the Elements panel. Force is used as a verb, indicating intention to make the state change. */ forceState: 'Force state', /** *@description Hint element title in Elements Tree Element of the Elements panel *@example {0} PH1 */ useSInTheConsoleToReferToThis: 'Use {PH1} in the console to refer to this element.', /** *@description A context menu item in the Elements Tree Element of the Elements panel */ addAttribute: 'Add attribute', /** *@description Text to modify the attribute of an item */ editAttribute: 'Edit attribute', /** *@description Text to focus on something */ focus: 'Focus', /** *@description Text to scroll the displayed content into view */ scrollIntoView: 'Scroll into view', /** *@description A context menu item in the Elements Tree Element of the Elements panel */ editText: 'Edit text', /** *@description A context menu item in the Elements Tree Element of the Elements panel */ editAsHtml: 'Edit as HTML', /** *@description Text to cut an element, cut should be used as a verb */ cut: 'Cut', /** *@description Text for copying, copy should be used as a verb */ copy: 'Copy', /** *@description Text to paste an element, paste should be used as a verb */ paste: 'Paste', /** *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb */ copyOuterhtml: 'Copy outerHTML', /** *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb */ copySelector: 'Copy `selector`', /** *@description Text in Elements Tree Element of the Elements panel */ copyJsPath: 'Copy JS path', /** *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb */ copyStyles: 'Copy styles', /** *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb */ copyXpath: 'Copy XPath', /** *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb */ copyFullXpath: 'Copy full XPath', /** *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb */ copyElement: 'Copy element', /** *@description A context menu item in the Elements Tree Element of the Elements panel */ duplicateElement: 'Duplicate element', /** *@description Text to hide an element */ hideElement: 'Hide element', /** *@description A context menu item in the Elements Tree Element of the Elements panel */ deleteElement: 'Delete element', /** *@description Text to expand something recursively */ expandRecursively: 'Expand recursively', /** *@description Text to collapse children of a parent group */ collapseChildren: 'Collapse children', /** *@description Title of an action in the emulation tool to capture node screenshot */ captureNodeScreenshot: 'Capture node screenshot', /** *@description Title of a context menu item. When clicked DevTools goes to the Application panel and shows this specific iframe's details */ showFrameDetails: 'Show `iframe` details', /** *@description Text in Elements Tree Element of the Elements panel */ valueIsTooLargeToEdit: '<value is too large to edit>', /** *@description Element text content in Elements Tree Element of the Elements panel */ children: 'Children:', /** *@description ARIA label for Elements Tree adorners */ enableGridMode: 'Enable grid mode', /** *@description ARIA label for Elements Tree adorners */ disableGridMode: 'Disable grid mode', /** *@description Label of the adorner for flex elements in the Elements panel */ enableFlexMode: 'Enable flex mode', /** *@description Label of the adorner for flex elements in the Elements panel */ disableFlexMode: 'Disable flex mode', /** *@description Label of an adorner in the Elements panel. When clicked, it enables * the overlay showing CSS scroll snapping for the current element. */ enableScrollSnap: 'Enable scroll-snap overlay', /** *@description Label of an adorner in the Elements panel. When clicked, it disables * the overlay showing CSS scroll snapping for the current element. */ disableScrollSnap: 'Disable scroll-snap overlay', }; const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeElement.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); const enum TagType { OPENING = 'OPENING_TAG', CLOSING = 'CLOSING_TAG', } type OpeningTagContext = { tagType: TagType.OPENING, readonly adornerContainer: HTMLElement, adorners: Adorners.Adorner.Adorner[], styleAdorners: Adorners.Adorner.Adorner[], readonly adornersThrottler: Common.Throttler.Throttler, slot?: Adorners.Adorner.Adorner, canAddAttributes: boolean, }; type ClosingTagContext = { tagType: TagType.CLOSING, }; export type TagTypeContext = OpeningTagContext|ClosingTagContext; function isOpeningTag(context: TagTypeContext): context is OpeningTagContext { return context.tagType === TagType.OPENING; } export class ElementsTreeElement extends UI.TreeOutline.TreeElement { nodeInternal: SDK.DOMModel.DOMNode; override treeOutline: ElementsTreeOutline|null; private gutterContainer: HTMLElement; private readonly decorationsElement: HTMLElement; private searchQuery: string|null; private expandedChildrenLimitInternal: number; private readonly decorationsThrottler: Common.Throttler.Throttler; private inClipboard: boolean; private hoveredInternal: boolean; private editing: EditorHandles|null; private highlightResult: UI.UIUtils.HighlightChange[]; private htmlEditElement?: HTMLElement; expandAllButtonElement: UI.TreeOutline.TreeElement|null; private searchHighlightsVisible?: boolean; selectionElement?: HTMLDivElement; private hintElement?: HTMLElement; private contentElement: HTMLElement; #elementIssues: Map<string, IssuesManager.GenericIssue.GenericIssue> = new Map(); #nodeElementToIssue: Map<Element, IssuesManager.GenericIssue.GenericIssue> = new Map(); readonly tagTypeContext: TagTypeContext; constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) { // The title will be updated in onattach. super(); this.nodeInternal = node; 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 gutterMenuIcon = new IconButton.Icon.Icon(); gutterMenuIcon.data = { color: 'var(--icon-default)', iconName: 'dots-horizontal', height: '16px', width: '16px', }; this.gutterContainer.append(gutterMenuIcon); this.decorationsElement = this.gutterContainer.createChild('div', 'hidden'); this.searchQuery = null; this.expandedChildrenLimitInternal = InitialChildrenLimit; this.decorationsThrottler = new Common.Throttler.Throttler(100); this.inClipboard = false; this.hoveredInternal = false; this.editing = null; this.highlightResult = []; if (isClosingTag) { this.tagTypeContext = {tagType: TagType.CLOSING}; } else { this.tagTypeContext = { tagType: TagType.OPENING, adornerContainer: this.contentElement.createChild('div', 'adorner-container hidden'), adorners: [], styleAdorners: [], adornersThrottler: new Common.Throttler.Throttler(100), canAddAttributes: this.nodeInternal.nodeType() === Node.ELEMENT_NODE, }; void this.updateStyleAdorners(); if (node.isAdFrameNode()) { const config = ElementsComponents.AdornerManager.getRegisteredAdorner( ElementsComponents.AdornerManager.RegisteredAdorners.AD); const adorner = this.adorn(config); UI.Tooltip.Tooltip.install(adorner, i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd)); } } this.expandAllButtonElement = null; } static animateOnDOMUpdate(treeElement: ElementsTreeElement): void { const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name'); UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight'); } static visibleShadowRoots(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] { let roots = node.shadowRoots(); if (roots.length && !Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM').get()) { roots = roots.filter(filter); } function filter(root: SDK.DOMModel.DOMNode): boolean { return root.shadowRootType() !== SDK.DOMModel.DOMNode.ShadowRootTypes.UserAgent; } return roots; } static canShowInlineText(node: SDK.DOMModel.DOMNode): boolean { if (node.contentDocument() || node.templateContent() || ElementsTreeElement.visibleShadowRoots(node).length || node.hasPseudoElements()) { return false; } if (node.nodeType() !== Node.ELEMENT_NODE) { return false; } if (!node.firstChild || node.firstChild !== node.lastChild || node.firstChild.nodeType() !== Node.TEXT_NODE) { return false; } const textChild = node.firstChild; const maxInlineTextChildLength = 80; if (textChild.nodeValue().length < maxInlineTextChildLength) { return true; } return false; } static populateForcedPseudoStateItems(contextMenu: UI.ContextMenu.ContextMenu, node: SDK.DOMModel.DOMNode): void { const pseudoClasses = ['active', 'hover', 'focus', 'visited', 'focus-within', 'focus-visible']; const forcedPseudoState = node.domModel().cssModel().pseudoState(node); const stateMenu = contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.forceState)); for (const pseudoClass of pseudoClasses) { const pseudoClassForced = forcedPseudoState ? forcedPseudoState.indexOf(pseudoClass) >= 0 : false; stateMenu.defaultSection().appendCheckboxItem( ':' + pseudoClass, setPseudoStateCallback.bind(null, pseudoClass, !pseudoClassForced), pseudoClassForced, false); } function setPseudoStateCallback(pseudoState: string, enabled: boolean): void { node.domModel().cssModel().forcePseudoState(node, pseudoState, enabled); } } isClosingTag(): boolean { return !isOpeningTag(this.tagTypeContext); } node(): SDK.DOMModel.DOMNode { return this.nodeInternal; } isEditing(): boolean { return Boolean(this.editing); } highlightSearchResults(searchQuery: string): void { if (this.searchQuery !== searchQuery) { this.hideSearchHighlight(); } this.searchQuery = searchQuery; this.searchHighlightsVisible = true; this.updateTitle(null, true); } hideSearchHighlights(): void { delete this.searchHighlightsVisible; this.hideSearchHighlight(); } private hideSearchHighlight(): void { if (this.highlightResult.length === 0) { return; } for (let i = (this.highlightResult.length - 1); i >= 0; --i) { const entry = this.highlightResult[i]; switch (entry.type) { case 'added': entry.node.remove(); break; case 'changed': entry.node.textContent = entry.oldText || null; break; } } this.highlightResult = []; } setInClipboard(inClipboard: boolean): void { if (this.inClipboard === inClipboard) { return; } this.inClipboard = inClipboard; this.listItemElement.classList.toggle('in-clipboard', inClipboard); } get hovered(): boolean { return this.hoveredInternal; } set hovered(isHovered: boolean) { if (this.hoveredInternal === isHovered) { return; } this.hoveredInternal = isHovered; if (this.listItemElement) { if (isHovered) { this.createSelection(); this.listItemElement.classList.add('hovered'); } else { this.listItemElement.classList.remove('hovered'); } } } addIssue(newIssue: IssuesManager.GenericIssue.GenericIssue): void { if (this.#elementIssues.has(newIssue.primaryKey())) { return; } this.#elementIssues.set(newIssue.primaryKey(), newIssue); this.#applyIssueStyleAndTooltip(newIssue); } #applyIssueStyleAndTooltip(issue: IssuesManager.GenericIssue.GenericIssue): void { const issueDetails = issue.details(); if (issueDetails.violatingNodeAttribute) { this.#highlightViolatingAttr(issueDetails.violatingNodeAttribute, issue); } else { this.#highlightTagAsViolating(issue); } } get issuesByNodeElement(): Map<Element, IssuesManager.GenericIssue.GenericIssue> { return this.#nodeElementToIssue; } #highlightViolatingAttr(name: string, issue: IssuesManager.GenericIssue.GenericIssue): void { const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0]; const attributes = tag.getElementsByClassName('webkit-html-attribute'); for (const attribute of attributes) { if (attribute.getElementsByClassName('webkit-html-attribute-name')[0].textContent === name) { const attributeElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0]; attributeElement.classList.add('violating-element'); this.#nodeElementToIssue.set(attributeElement, issue); } } } #highlightTagAsViolating(issue: IssuesManager.GenericIssue.GenericIssue): void { const tagElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0]; tagElement.classList.add('violating-element'); this.#nodeElementToIssue.set(tagElement, issue); } expandedChildrenLimit(): number { return this.expandedChildrenLimitInternal; } setExpandedChildrenLimit(expandedChildrenLimit: number): void { this.expandedChildrenLimitInternal = expandedChildrenLimit; } createSlotLink(nodeShortcut: SDK.DOMModel.DOMNodeShortcut|null): void { if (!isOpeningTag(this.tagTypeContext)) { return; } if (nodeShortcut) { const config = ElementsComponents.AdornerManager.getRegisteredAdorner( ElementsComponents.AdornerManager.RegisteredAdorners.SLOT); this.tagTypeContext.slot = this.adornSlot(config, this.tagTypeContext); const deferredNode = nodeShortcut.deferredNode; this.tagTypeContext.slot.addEventListener('click', () => { deferredNode.resolve(node => { void Common.Revealer.reveal(node); }); }); this.tagTypeContext.slot.addEventListener('mousedown', e => e.consume(), false); } } private createSelection(): void { const contentElement = this.contentElement; if (!contentElement) { return; } if (!this.selectionElement) { this.selectionElement = document.createElement('div'); this.selectionElement.className = 'selection fill'; this.selectionElement.style.setProperty('margin-left', (-this.computeLeftIndent()) + 'px'); contentElement.prepend(this.selectionElement); } } private createHint(): void { if (this.contentElement && !this.hintElement) { this.hintElement = this.contentElement.createChild('span', 'selected-hint'); const selectedElementCommand = '$0'; UI.Tooltip.Tooltip.install( this.hintElement, i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: selectedElementCommand})); UI.ARIAUtils.markAsHidden(this.hintElement); } } override onbind(): void { if (this.treeOutline && !this.isClosingTag()) { this.treeOutline.treeElementByNode.set(this.nodeInternal, this); } } override onunbind(): void { if (this.editing) { this.editing.cancel(); } if (this.treeOutline && this.treeOutline.treeElementByNode.get(this.nodeInternal) === this) { this.treeOutline.treeElementByNode.delete(this.nodeInternal); } } override onattach(): void { if (this.hoveredInternal) { this.createSelection(); this.listItemElement.classList.add('hovered'); } this.updateTitle(); this.listItemElement.draggable = true; } override async onpopulate(): Promise<void> { if (this.treeOutline) { return this.treeOutline.populateTreeElement(this); } } override async expandRecursively(): Promise<void> { await this.nodeInternal.getSubtree(-1, true); await super.expandRecursively(Number.MAX_VALUE); } override onexpand(): void { if (this.isClosingTag()) { return; } this.updateTitle(); } override oncollapse(): void { if (this.isClosingTag()) { return; } this.updateTitle(); } override select(omitFocus?: boolean, selectedByUser?: boolean): boolean { if (this.editing) { return false; } return super.select(omitFocus, selectedByUser); } override onselect(selectedByUser?: boolean): boolean { if (!this.treeOutline) { return false; } this.treeOutline.suppressRevealAndSelect = true; this.treeOutline.selectDOMNode(this.nodeInternal, selectedByUser); if (selectedByUser) { this.nodeInternal.highlight(); Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel); } this.createSelection(); this.createHint(); this.treeOutline.suppressRevealAndSelect = false; return true; } override ondelete(): boolean { if (!this.treeOutline) { return false; } const startTagTreeElement = this.treeOutline.findTreeElement(this.nodeInternal); startTagTreeElement ? startTagTreeElement.remove() : this.remove(); return true; } override onenter(): boolean { // On Enter or Return start editing the first attribute // or create a new attribute on the selected element. if (this.editing) { return false; } this.startEditing(); // prevent a newline from being immediately inserted return true; } override selectOnMouseDown(event: MouseEvent): void { super.selectOnMouseDown(event); if (this.editing) { return; } // Prevent selecting the nearest word on double click. if (event.detail >= 2) { event.preventDefault(); } } override ondblclick(event: Event): boolean { if (this.editing || this.isClosingTag()) { return false; } if (this.startEditingTarget((event.target as Element))) { return false; } if (this.isExpandable() && !this.expanded) { this.expand(); } return false; } hasEditableNode(): boolean { return !this.nodeInternal.isShadowRoot() && !this.nodeInternal.ancestorUserAgentShadowRoot(); } private insertInLastAttributePosition(tag: Element, node: Element): void { if (tag.getElementsByClassName('webkit-html-attribute').length > 0) { tag.insertBefore(node, tag.lastChild); } else if (tag.textContent !== null) { const matchResult = tag.textContent.match(/^<(.*?)>$/); if (!matchResult) { return; } const nodeName = matchResult[1]; tag.textContent = ''; UI.UIUtils.createTextChild(tag, '<' + nodeName); tag.appendChild(node); UI.UIUtils.createTextChild(tag, '>'); } } private startEditingTarget(eventTarget: Element): boolean { if (!this.treeOutline || this.treeOutline.selectedDOMNode() !== this.nodeInternal) { return false; } if (this.nodeInternal.nodeType() !== Node.ELEMENT_NODE && this.nodeInternal.nodeType() !== Node.TEXT_NODE) { return false; } const textNode = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-text-node'); if (textNode) { return this.startEditingTextNode(textNode); } const attribute = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-attribute'); if (attribute) { return this.startEditingAttribute(attribute, eventTarget); } const tagName = eventTarget.enclosingNodeOrSelfWithClass('webkit-html-tag-name'); if (tagName) { return this.startEditingTagName(tagName); } const newAttribute = eventTarget.enclosingNodeOrSelfWithClass('add-attribute'); if (newAttribute) { return this.addNewAttribute(); } return false; } private showContextMenu(event: Event): void { this.treeOutline && this.treeOutline.showContextMenu(this, event); } populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): void { // Add attribute-related actions. const treeElement = this.isClosingTag() && this.treeOutline ? this.treeOutline.findTreeElement(this.nodeInternal) : this; if (!treeElement) { return; } contextMenu.editSection().appendItem( i18nString(UIStrings.addAttribute), treeElement.addNewAttribute.bind(treeElement)); const target = (event.target as Element); const attribute = target.enclosingNodeOrSelfWithClass('webkit-html-attribute'); const newAttribute = target.enclosingNodeOrSelfWithClass('add-attribute'); if (attribute && !newAttribute) { contextMenu.editSection().appendItem( i18nString(UIStrings.editAttribute), this.startEditingAttribute.bind(this, attribute, target)); } this.populateNodeContextMenu(contextMenu); ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node()); this.populateScrollIntoView(contextMenu); contextMenu.viewSection().appendItem(i18nString(UIStrings.focus), async () => { await this.nodeInternal.focus(); }); } populateScrollIntoView(contextMenu: UI.ContextMenu.ContextMenu): void { contextMenu.viewSection().appendItem( i18nString(UIStrings.scrollIntoView), () => this.nodeInternal.scrollIntoView()); } populateTextContextMenu(contextMenu: UI.ContextMenu.ContextMenu, textNode: Element): void { if (!this.editing) { contextMenu.editSection().appendItem( i18nString(UIStrings.editText), this.startEditingTextNode.bind(this, textNode)); } this.populateNodeContextMenu(contextMenu); } populateNodeContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void { // Add free-form node-related actions. const isEditable = this.hasEditableNode(); // clang-format off if (isEditable && !this.editing) { contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this)); } // clang-format on const isShadowRoot = this.nodeInternal.isShadowRoot(); const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null); const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta; const treeOutline = this.treeOutline; if (!treeOutline) { return; } let menuItem; menuItem = contextMenu.clipboardSection().appendItem( i18nString(UIStrings.cut), treeOutline.performCopyOrCut.bind(treeOutline, true, this.nodeInternal), !this.hasEditableNode()); menuItem.setShortcut(createShortcut('X', modifier)); // Place it here so that all "Copy"-ing items stick together. const copyMenu = contextMenu.clipboardSection().appendSubMenuItem(i18nString(UIStrings.copy)); const section = copyMenu.section(); if (!isShadowRoot) { menuItem = section.appendItem( i18nString(UIStrings.copyOuterhtml), treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal)); menuItem.setShortcut(createShortcut('V', modifier)); } if (this.nodeInternal.nodeType() === Node.ELEMENT_NODE) { section.appendItem(i18nString(UIStrings.copySelector), this.copyCSSPath.bind(this)); section.appendItem( i18nString(UIStrings.copyJsPath), this.copyJSPath.bind(this), !canGetJSPath(this.nodeInternal)); section.appendItem(i18nString(UIStrings.copyStyles), this.copyStyles.bind(this)); } if (!isShadowRoot) { section.appendItem(i18nString(UIStrings.copyXpath), this.copyXPath.bind(this)); section.appendItem(i18nString(UIStrings.copyFullXpath), this.copyFullXPath.bind(this)); } if (!isShadowRoot) { menuItem = copyMenu.clipboardSection().appendItem( i18nString(UIStrings.copyElement), treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal)); menuItem.setShortcut(createShortcut('C', modifier)); // Duplicate element, disabled on root element and ShadowDOM. const isRootElement = !this.nodeInternal.parentNode || this.nodeInternal.parentNode.nodeName() === '#document'; menuItem = contextMenu.editSection().appendItem( i18nString(UIStrings.duplicateElement), treeOutline.duplicateNode.bind(treeOutline, this.nodeInternal), (this.nodeInternal.isInShadowTree() || isRootElement)); } menuItem = contextMenu.clipboardSection().appendItem( i18nString(UIStrings.paste), treeOutline.pasteNode.bind(treeOutline, this.nodeInternal), !treeOutline.canPaste(this.nodeInternal)); menuItem.setShortcut(createShortcut('V', modifier)); menuItem = contextMenu.debugSection().appendCheckboxItem( i18nString(UIStrings.hideElement), treeOutline.toggleHideElement.bind(treeOutline, this.nodeInternal), treeOutline.isToggledToHidden(this.nodeInternal)); menuItem.setShortcut( UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction('elements.hide-element') || ''); if (isEditable) { contextMenu.editSection().appendItem(i18nString(UIStrings.deleteElement), this.remove.bind(this)); } contextMenu.viewSection().appendItem(i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this)); contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this)); const deviceModeWrapperAction = new Emulation.DeviceModeWrapper.ActionDelegate(); contextMenu.viewSection().appendItem( i18nString(UIStrings.captureNodeScreenshot), deviceModeWrapperAction.handleAction.bind( null, UI.Context.Context.instance(), 'emulation.capture-node-screenshot')); if (this.nodeInternal.frameOwnerFrameId()) { contextMenu.viewSection().appendItem(i18nString(UIStrings.showFrameDetails), () => { const frameOwnerFrameId = this.nodeInternal.frameOwnerFrameId(); if (frameOwnerFrameId) { const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameOwnerFrameId); void Common.Revealer.reveal(frame); } }); } } private startEditing(): boolean|undefined { if (!this.treeOutline || this.treeOutline.selectedDOMNode() !== this.nodeInternal) { return; } const listItem = this.listItemElement; if (isOpeningTag(this.tagTypeContext) && this.tagTypeContext.canAddAttributes) { const attribute = listItem.getElementsByClassName('webkit-html-attribute')[0]; if (attribute) { return this.startEditingAttribute( attribute, attribute.getElementsByClassName('webkit-html-attribute-value')[0]); } return this.addNewAttribute(); } if (this.nodeInternal.nodeType() === Node.TEXT_NODE) { const textNode = listItem.getElementsByClassName('webkit-html-text-node')[0]; if (textNode) { return this.startEditingTextNode(textNode); } } return; } private addNewAttribute(): boolean { // Cannot just convert the textual html into an element without // a parent node. Use a temporary span container for the HTML. const container = document.createElement('span'); const attr = this.buildAttributeDOM(container, ' ', '', null); attr.style.marginLeft = '2px'; // overrides the .editing margin rule attr.style.marginRight = '2px'; // overrides the .editing margin rule const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0]; this.insertInLastAttributePosition(tag, attr); attr.scrollIntoViewIfNeeded(true); return this.startEditingAttribute(attr, attr); } private triggerEditAttribute(attributeName: string): boolean|undefined { const attributeElements = this.listItemElement.getElementsByClassName('webkit-html-attribute-name'); for (let i = 0, len = attributeElements.length; i < len; ++i) { if (attributeElements[i].textContent === attributeName) { for (let elem: (ChildNode|null) = attributeElements[i].nextSibling; elem; elem = elem.nextSibling) { if (elem.nodeType !== Node.ELEMENT_NODE) { continue; } if ((elem as Element).classList.contains('webkit-html-attribute-value')) { return this.startEditingAttribute((elem.parentElement as HTMLElement), (elem as Element)); } } } } return; } private startEditingAttribute(attribute: Element, elementForSelection: Element): boolean { console.assert(this.listItemElement.isAncestor(attribute)); if (UI.UIUtils.isBeingEdited(attribute)) { return true; } const attributeNameElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0]; if (!attributeNameElement) { return false; } const attributeName = attributeNameElement.textContent; const attributeValueElement = attribute.getElementsByClassName('webkit-html-attribute-value')[0]; // Make sure elementForSelection is not a child of attributeValueElement. elementForSelection = attributeValueElement.isAncestor(elementForSelection) ? attributeValueElement : elementForSelection; function removeZeroWidthSpaceRecursive(node: Node): void { if (node.nodeType === Node.TEXT_NODE) { node.nodeValue = node.nodeValue ? node.nodeValue.replace(/\u200B/g, '') : ''; return; } if (node.nodeType !== Node.ELEMENT_NODE) { return; } for (let child: (ChildNode|null) = node.firstChild; child; child = child.nextSibling) { removeZeroWidthSpaceRecursive(child); } } const attributeValue = attributeName && attributeValueElement ? this.nodeInternal.getAttribute(attributeName)?.replaceAll('"', '&quot;') : undefined; if (attributeValue !== undefined) { attributeValueElement.setTextContentTruncatedIfNeeded( attributeValue, i18nString(UIStrings.valueIsTooLargeToEdit)); } // Remove zero-width spaces that were added by nodeTitleInfo. removeZeroWidthSpaceRecursive(attribute); const config = new UI.InplaceEditor.Config( this.attributeEditingCommitted.bind(this), this.editingCancelled.bind(this), attributeName || undefined); function postKeyDownFinishHandler(event: Event): string { UI.UIUtils.handleElementValueModifications(event, attribute); return ''; } if (!Common.ParsedURL.ParsedURL.fromString(attributeValueElement.textContent || '')) { config.setPostKeydownFinishHandler(postKeyDownFinishHandler); } this.updateEditorHandles(attribute, config); const componentSelection = this.listItemElement.getComponentSelection(); componentSelection && componentSelection.selectAllChildren(elementForSelection); return true; } private startEditingTextNode(textNodeElement: Element): boolean { if (UI.UIUtils.isBeingEdited(textNodeElement)) { return true; } let textNode: SDK.DOMModel.DOMNode = this.nodeInternal; // We only show text nodes inline in elements if the element only // has a single child, and that child is a text node. if (textNode.nodeType() === Node.ELEMENT_NODE && textNode.firstChild) { textNode = textNode.firstChild; } const container = textNodeElement.enclosingNodeOrSelfWithClass('webkit-html-text-node'); if (container) { container.textContent = textNode.nodeValue(); } // Strip the CSS or JS highlighting if present. const config = new UI.InplaceEditor.Config( this.textNodeEditingCommitted.bind(this, textNode), this.editingCancelled.bind(this)); this.updateEditorHandles(textNodeElement, config); const componentSelection = this.listItemElement.getComponentSelection(); componentSelection && componentSelection.selectAllChildren(textNodeElement); return true; } private startEditingTagName(tagNameElement?: Element): boolean { if (!tagNameElement) { tagNameElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0]; if (!tagNameElement) { return false; } } const tagName = tagNameElement.textContent; if (tagName !== null && EditTagBlocklist.has(tagName.toLowerCase())) { return false; } if (UI.UIUtils.isBeingEdited(tagNameElement)) { return true; } const closingTagElement = this.distinctClosingTagElement(); function keyupListener(): void { if (closingTagElement && tagNameElement) { closingTagElement.textContent = '</' + tagNameElement.textContent + '>'; } } const keydownListener = (event: Event): void => { if ((event as KeyboardEvent).key !== ' ') { return; } this.editing && this.editing.commit(); event.consume(true); }; function editingCommitted( this: ElementsTreeElement, element: Element, newTagName: string, oldText: string, tagName: string|null, moveDirection: string): void { if (!tagNameElement) { return; } tagNameElement.removeEventListener('keyup', keyupListener, false); tagNameElement.removeEventListener('keydown', keydownListener, false); this.tagNameEditingCommitted(element, newTagName, oldText, tagName, moveDirection); } // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration // eslint-disable-next-line @typescript-eslint/no-explicit-any function editingCancelled(this: ElementsTreeElement, element: Element, context: any): void { if (!tagNameElement) { return; } tagNameElement.removeEventListener('keyup', keyupListener, false); tagNameElement.removeEventListener('keydown', keydownListener, false); this.editingCancelled(element, context); } tagNameElement.addEventListener('keyup', keyupListener, false); tagNameElement.addEventListener('keydown', keydownListener, false); const config = new UI.InplaceEditor.Config<string|null>(editingCommitted.bind(this), editingCancelled.bind(this), tagName); this.updateEditorHandles(tagNameElement, config); const componentSelection = this.listItemElement.getComponentSelection(); componentSelection && componentSelection.selectAllChildren(tagNameElement); return true; } // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration // eslint-disable-next-line @typescript-eslint/no-explicit-any private updateEditorHandles(element: Element, config?: UI.InplaceEditor.Config<any>): void { const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(element, config); if (!editorHandles) { this.editing = null; } else { this.editing = { commit: editorHandles.commit, cancel: editorHandles.cancel, editor: undefined, resize: (): void => {}, }; } } private async startEditingAsHTML( commitCallback: (arg0: string, arg1: string) => void, disposeCallback: () => void, maybeInitialValue: string|null): Promise<void> { if (maybeInitialValue === null) { return; } if (this.editing) { return; } const initialValue = this.convertWhitespaceToEntities(maybeInitialValue).text; this.htmlEditElement = document.createElement('div'); this.htmlEditElement.className = 'source-code elements-tree-editor'; // Hide header items. let child: (ChildNode|null) = this.listItemElement.firstChild; while (child) { (child as HTMLElement).style.display = 'none'; child = child.nextSibling; } // Hide children item. if (this.childrenListElement) { this.childrenListElement.style.display = 'none'; } // Append editor. this.listItemElement.append(this.htmlEditElement); this.htmlEditElement.addEventListener('keydown', event => { if (event.key === 'Escape') { event.consume(true); } }); const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({ doc: initialValue, extensions: [ CodeMirror.keymap.of([ { key: 'Mod-Enter', run: (): boolean => { this.editing?.commit(); return true; }, }, { key: 'Escape', run: (): boolean => { this.editing?.cancel(); return true; }, }, ]), TextEditor.Config.baseConfiguration(initialValue), 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: event => { // The relatedTarget is null when no element gains focus, e.g. switching windows. const relatedTarget = (event.relatedTarget as Node | null); if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor)) { this.editing && this.editing.commit(); } }, }), ], })); this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), editor, resize: resize.bind(this)}; resize.call(this); this.htmlEditElement.appendChild(editor); editor.editor.focus(); this.treeOutline && this.treeOutline.setMultilineEditing(this.editing); function resize(this: ElementsTreeElement): void { if (this.treeOutline && this.htmlEditElement) { this.htmlEditElement.style.width = this.treeOutline.visibleWidth() - this.computeLeftIndent() - 30 + 'px'; } } function commit(this: ElementsTreeElement): void { if (this.editing && this.editing.editor) { commitCallback(initialValue, this.editing.editor.state.doc.toString()); } dispose.call(this); } function dispose(this: ElementsTreeElement): void { if (!this.editing || !this.editing.editor) { return; } this.editing = null; // Remove editor. if (this.htmlEditElement) { this.listItemElement.removeChild(this.htmlEditElement); } this.htmlEditElement = undefined; // Unhide children item. if (this.childrenListElement) { this.childrenListElement.style.removeProperty('display'); } // Unhide header items. let child: (ChildNode|null) = this.listItemElement.firstChild; while (child) { (child as HTMLElement).style.removeProperty('display'); child = child.nextSibling; } if (this.treeOutline) { this.treeOutline.setMultilineEditing(null); this.treeOutline.focus(); } disposeCallback(); } } private attributeEditingCommitted( element: Element, newText: string, oldText: string, attributeName: string, moveDirection: string): void { this.editing = null; const treeOutline = this.treeOutline; function moveToNextAttributeIfNeeded(this: ElementsTreeElement, error?: string|null): void { if (error) { this.editingCancelled(element, attributeName); } if (!moveDirection) { return; } if (treeOutline) { treeOutline.runPendingUpdates(); treeOutline.focus(); } // Search for the attribute's position, and then decide where to move to. const attributes = this.nodeInternal.attributes(); for (let i = 0; i < attributes.length; ++i) { if (attributes[i].name !== attributeName) { continue; } if (moveDirection === 'backward') { if (i === 0) { this.startEditingTagName(); } else { this.triggerEditAttribute(attributes[i - 1].name); } } else { if (i === attributes.length - 1) { this.addNewAttribute(); } else { this.triggerEditAttribute(attributes[i + 1].name); } } return; } // Moving From the "New Attribute" position. if (moveDirection === 'backward') { if (newText === ' ') { // Moving from "New Attribute" that was not edited if (attributes.length > 0) { this.triggerEditAttribute(attributes[attributes.length - 1].name); } } else { // Moving from "New Attribute" that holds new value if (attributes.length > 1) { this.triggerEditAttribute(attributes[attributes.length - 2].name); } } } else if (moveDirection === 'forward') { if (!Platform.StringUtilities.isWhitespace(newText)) { this.addNewAttribute(); } else { this.startEditingTagName(); } } } if ((attributeName.trim() || newText.trim()) && oldText !== newText) { this.nodeInternal.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this)); return; } this.updateTitle(); moveToNextAttributeIfNeeded.call(this); } private tagNameEditingCommitted( element: Element, newText: string, oldText: string, tagName: string|null, moveDirection: string): void { this.editing = null; const self = this; function cancel(): void { const closingTagElement = self.distinctClosingTagElement(); if (closingTagElement) { closingTagElement.textContent = '</' + tagName + '>'; } self.editingCancelled(element, tagName); moveToNextAttributeIfNeeded.call(self); } function moveToNextAttributeIfNeeded(this: ElementsTreeElement): void { if (moveDirection !== 'forward') { this.addNewAttribute(); return; } const attributes = this.nodeInternal.attributes(); if (attributes.length > 0) { this.triggerEditAttribute(attributes[0].name); } else { this.addNewAttribute(); } } newText = newText.trim(); if (newText === oldText) { cancel(); return; } const treeOutline = this.treeOutline; const wasExpanded = this.expanded; this.nodeInternal.setNodeName(newText, (error, newNode) => { if (error || !newNode) { cancel(); return; } if (!treeOutline) { return; } const newTreeItem = treeOutline.selectNodeAfterEdit(wasExpanded, error, newNode); // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration // @ts-expect-error moveToNextAttributeIfNeeded.call(newTreeItem); }); } private textNodeEditingCommitted(textNode: SDK.DOMModel.DOMNode, element: Element, newText: string): void { this.editing = null; function callback(this: ElementsTreeElement): void { this.updateTitle(); } textNode.setNodeValue(newText, callback.bind(this)); } // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration // eslint-disable-next-line @typescript-eslint/no-explicit-any private editingCancelled(_element: Element, _context: any): void { this.editing = null; // Need to restore attributes structure. this.updateTitle(); } private distinctClosingTagElement(): Element|null { // FIXME: Improve the Tree Element / Outline Abstraction to prevent crawling the DOM // For an expanded element, it will be the last element with class "close" // in the child element list. if (this.expanded) { const closers = this.childrenListElement.querySelectorAll('.close'); return closers[closers.length - 1]; } // Remaining cases are single line non-expanded elements with a closing // tag, or HTML elements without a closing tag (such as <br>). Return // null in the case where there isn't a closing tag. const tags = this.listItemElement.getElementsByClassName('webkit-html-tag'); return tags.length === 1 ? null : tags[tags.length - 1]; } updateTitle(updateRecord?: UpdateRecord|null, onlySearchQueryChanged?: boolean): void { // If we are editing, return early to prevent canceling the edit. // After editing is committed updateTitle will be called. if (this.editing) { return; } if (onlySearchQueryChanged) { this.hideSearchHighlight(); } else { const nodeInfo = this.nodeTitleInfo(updateRecord || null); if (this.nodeInternal.nodeType() === Node.DOCUMENT_FRAGMENT_NODE && this.nodeInternal.isInShadowTree() && this.nodeInternal.shadowRootType()) { this.childrenListElement.classList.add('shadow-root'); let depth = 4; for (let node: (SDK.DOMModel.DOMNode|null) = (this.nodeInternal as SDK.DOMModel.DOMNode | null); depth && node; node = node.parentNode) { if (node.nodeType() === Node.DOCUMENT_FRAGMENT_NODE) { depth--; } } if (!depth) { this.childrenListElement.classList.add('shadow-root-deep'); } else { this.childrenListElement.classList.add('shadow-root-depth-' + depth); } } this.contentElement.removeChildren(); const highlightElement = this.contentElement.createChild('span', 'highlight'); highlightElement.append(nodeInfo); // fixme: make it clear that `this.title = x` is a setter with significant side effects this.title = this.contentElement; this.updateDecorations(); this.contentElement.prepend(this.gutterContainer); if (isOpeningTag(this.tagTypeContext)) { this.contentElement.append(this.tagTypeContext.adornerContainer); if (this.tagTypeContext.slot) { this.contentElement.append(this.tagTypeContext.slot); } } this.highlightResult = []; delete this.selectionElement; delete this.hintElement; if (this.selected) { this.createSelection(); this.createHint(); } // If there is an issue with this node, make sure to update it. for (const issue of this.#elementIssues.values()) {