chrome-devtools-frontend/front_end/panels/elements/ElementsTreeElement.ts

Chrome DevTools UI

// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/* eslint-disable rulesdir/no-imperative-dom-api */

/*
 * 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 Root from '../../core/root/root.js';
import * as SDK from '../../core/sdk/sdk.js';
import * as Protocol from '../../generated/protocol.js';
import * as Badges from '../../models/badges/badges.js';
import type * as Elements from '../../models/elements/elements.js';
import type * as IssuesManager from '../../models/issues_manager/issues_manager.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 Buttons from '../../ui/components/buttons/buttons.js';
import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
import * as Highlighting from '../../ui/components/highlighting/highlighting.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 VisualLogging from '../../ui/visual_logging/visual_logging.js';
import * as Emulation from '../emulation/emulation.js';
import * as Media from '../media/media.js';

import * as ElementsComponents from './components/components.js';
import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js';
import {getElementIssueDetails} from './ElementIssueUtils.js';
import {ElementsPanel} from './ElementsPanel.js';
import {type ElementsTreeOutline, MappedCharToEntity} 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 ARIA label for Elements Tree adorners
   */
  enableMasonryMode: 'Enable masonry mode',
  /**
   * @description ARIA label for Elements Tree adorners
   */
  disableMasonryMode: 'Disable masonry mode',
  /**
   * @description ARIA label for an elements tree adorner
   */
  forceOpenPopover: 'Keep this popover open',
  /**
   * @description ARIA label for an elements tree adorner
   */
  stopForceOpenPopover: 'Stop keeping this popover open',
  /**
   * @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',
  /**
   * @description Label of an adorner in the Elements panel. When clicked, it forces
   * the element into applying its starting-style rules.
   */
  enableStartingStyle: 'Enable @starting-style mode',
  /**
   * @description Label of an adorner in the Elements panel. When clicked, it no longer
   * forces the element into applying its starting-style rules.
   */
  disableStartingStyle: 'Disable @starting-style mode',
  /**
   * @description Label of an adorner in the Elements panel. When clicked, it redirects
   * to the Media Panel.
   */
  openMediaPanel: 'Jump to Media panel',
  /**
   * @description Text of a tooltip to redirect to another element in the Elements panel
   */
  showPopoverTarget: 'Show element associated with the `popovertarget` attribute',
  /**
   * @description Text of a tooltip to redirect to another element in the Elements panel, associated with the `interesttarget` attribute
   */
  showInterestTarget: 'Show element associated with the `interesttarget` attribute',
  /**
   * @description Text of a tooltip to redirect to another element in the Elements panel, associated with the `commandfor` attribute
   */
  showCommandForTarget: 'Show element associated with the `commandfor` attribute',
  /**
   * @description Text of the tooltip for scroll adorner.
   */
  elementHasScrollableOverflow: 'This element has a scrollable overflow',
  /**
   * @description Text of a context menu item to redirect to the AI assistance panel and to start a chat.
   */
  startAChat: 'Start a chat',
  /**
   * @description Context menu item in Elements panel to assess visibility of an element via AI.
   */
  assessVisibility: 'Assess visibility',
  /**
   * @description Context menu item in Elements panel to center an element via AI.
   */
  centerElement: 'Center element',
  /**
   * @description Context menu item in Elements panel to wrap flex items via AI.
   */
  wrapTheseItems: 'Wrap these items',
  /**
   * @description Context menu item in Elements panel to distribute flex items evenly via AI.
   */
  distributeItemsEvenly: 'Distribute items evenly',
  /**
   * @description Context menu item in Elements panel to explain flexbox via AI.
   */
  explainFlexbox: 'Explain flexbox',
  /**
   * @description Context menu item in Elements panel to align grid items via AI.
   */
  alignItems: 'Align items',
  /**
   * @description Context menu item in Elements panel to add padding/gap to grid via AI.
   */
  addPadding: 'Add padding',
  /**
   * @description Context menu item in Elements panel to explain grid layout via AI.
   */
  explainGridLayout: 'Explain grid layout',
  /**
   * @description Context menu item in Elements panel to find grid definition for a subgrid item via AI.
   */
  findGridDefinition: 'Find grid definition',
  /**
   * @description Context menu item in Elements panel to change parent grid properties for a subgrid item via AI.
   */
  changeParentProperties: 'Change parent properties',
  /**
   * @description Context menu item in Elements panel to explain subgrids via AI.
   */
  explainSubgrids: 'Explain subgrids',
  /**
   * @description Context menu item in Elements panel to remove scrollbars via AI.
   */
  removeScrollbars: 'Remove scrollbars',
  /**
   * @description Context menu item in Elements panel to style scrollbars via AI.
   */
  styleScrollbars: 'Style scrollbars',
  /**
   * @description Context menu item in Elements panel to explain scrollbars via AI.
   */
  explainScrollbars: 'Explain scrollbars',
  /**
   * @description Context menu item in Elements panel to explain container queries via AI.
   */
  explainContainerQueries: 'Explain container queries',
  /**
   * @description Context menu item in Elements panel to explain container types via AI.
   */
  explainContainerTypes: 'Explain container types',
  /**
   * @description Context menu item in Elements panel to explain container context via AI.
   */
  explainContainerContext: 'Explain container context',
} as const;
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',
}

interface OpeningTagContext {
  tagType: TagType.OPENING;
  readonly adornerContainer: HTMLElement;
  adorners: Set<Adorners.Adorner.Adorner>;
  styleAdorners: Set<Adorners.Adorner.Adorner>;
  readonly adornersThrottler: Common.Throttler.Throttler;
  canAddAttributes: boolean;
  slot?: Adorners.Adorner.Adorner;
}

interface ClosingTagContext {
  tagType: TagType.CLOSING;
}

export type TagTypeContext = OpeningTagContext|ClosingTagContext;

export 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;
  #expandedChildrenLimit: number;
  private readonly decorationsThrottler: Common.Throttler.Throttler;
  private inClipboard: boolean;
  #hovered: boolean;
  private editing: EditorHandles|null;
  private htmlEditElement?: HTMLElement;
  expandAllButtonElement: UI.TreeOutline.TreeElement|null;
  selectionElement?: HTMLDivElement;
  private hintElement?: HTMLElement;
  private aiButtonContainer?: HTMLElement;
  private contentElement: HTMLElement;
  #elementIssues = new Map<string, IssuesManager.Issue.Issue>();
  #nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue[]>();
  #highlights: Range[] = [];

  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.listItemElement.setAttribute(
        'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
          keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
          drag: true,
          click: true,
        })}`);
    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.name = 'dots-horizontal';
    this.gutterContainer.append(gutterMenuIcon);
    this.decorationsElement = this.gutterContainer.createChild('div', 'hidden');

    this.searchQuery = null;
    this.#expandedChildrenLimit = InitialChildrenLimit;
    this.decorationsThrottler = new Common.Throttler.Throttler(100);

    this.inClipboard = false;
    this.#hovered = false;

    this.editing = null;

    if (isClosingTag) {
      this.tagTypeContext = {tagType: TagType.CLOSING};
    } else {
      this.tagTypeContext = {
        tagType: TagType.OPENING,
        adornerContainer: this.contentElement.createChild('div', 'adorner-container hidden'),
        adorners: new Set(),
        styleAdorners: new Set(),
        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));
      }

      void this.updateScrollAdorner();
    }
    this.expandAllButtonElement = null;

    if (this.nodeInternal.retained && !this.isClosingTag()) {
      const icon = new IconButton.Icon.Icon();
      icon.name = 'small-status-dot';
      icon.style.color = 'var(--icon-error)';
      icon.classList.add('extra-small');
      icon.style.setProperty('vertical-align', 'middle');
      this.setLeadingIcons([icon]);
      this.listItemNode.classList.add('detached-elements-detached-node');
      this.listItemNode.style.setProperty('display', '-webkit-box');
      this.listItemNode.setAttribute('title', 'Retained Node');
    }

    if (this.nodeInternal.detached && !this.isClosingTag()) {
      this.listItemNode.setAttribute('title', 'Detached Tree Node');
    }
  }

  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('show-ua-shadow-dom').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), false, 'force-state');
    for (const pseudoClass of pseudoClasses) {
      const pseudoClassForced = forcedPseudoState ? forcedPseudoState.indexOf(pseudoClass) >= 0 : false;
      stateMenu.defaultSection().appendCheckboxItem(
          ':' + pseudoClass, setPseudoStateCallback.bind(null, pseudoClass, !pseudoClassForced),
          {checked: pseudoClassForced, jslogContext: pseudoClass});
    }

    function setPseudoStateCallback(pseudoState: string, enabled: boolean): void {
      node.domModel().cssModel().forcePseudoState(node, pseudoState, enabled);
    }
  }

  highlightAttribute(attributeName: string): void {
    // If the attribute is not found, we highlight the tag name instead.
    let animationElement = this.listItemElement.querySelector('.webkit-html-tag-name') ?? this.listItemElement;

    if (this.nodeInternal.getAttribute(attributeName) !== undefined) {
      const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0];
      const attributes = tag.getElementsByClassName('webkit-html-attribute');
      for (const attribute of attributes) {
        const attributeElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0];
        if (attributeElement.textContent === attributeName) {
          animationElement = attributeElement;
          break;
        }
      }
    }
    UI.UIUtils.runCSSAnimationOnce(animationElement, 'dom-update-highlight');
  }

  isClosingTag(): boolean {
    return !isOpeningTag(this.tagTypeContext);
  }

  node(): SDK.DOMModel.DOMNode {
    return this.nodeInternal;
  }

  isEditing(): boolean {
    return Boolean(this.editing);
  }

  highlightSearchResults(searchQuery: string): void {
    this.searchQuery = searchQuery;
    if (!this.editing) {
      this.#highlightSearchResults();
    }
  }

  hideSearchHighlights(): void {
    Highlighting.HighlightManager.HighlightManager.instance().removeHighlights(this.#highlights);
    this.#highlights = [];
  }

  setInClipboard(inClipboard: boolean): void {
    if (this.inClipboard === inClipboard) {
      return;
    }
    this.inClipboard = inClipboard;
    this.listItemElement.classList.toggle('in-clipboard', inClipboard);
  }

  get hovered(): boolean {
    return this.#hovered;
  }

  set hovered(isHovered: boolean) {
    if (this.#hovered === isHovered) {
      return;
    }

    if (isHovered && !this.aiButtonContainer) {
      this.createAiButton();
    } else if (!isHovered && this.aiButtonContainer) {
      this.aiButtonContainer.remove();
      delete this.aiButtonContainer;
    }

    this.#hovered = isHovered;

    if (this.listItemElement) {
      if (isHovered) {
        this.createSelection();
        this.listItemElement.classList.add('hovered');
      } else {
        this.listItemElement.classList.remove('hovered');
      }
    }
  }

  addIssue(newIssue: IssuesManager.Issue.Issue): void {
    if (this.#elementIssues.has(newIssue.primaryKey())) {
      return;
    }

    this.#elementIssues.set(newIssue.primaryKey(), newIssue);
    this.#applyIssueStyleAndTooltip(newIssue);
  }

  #applyIssueStyleAndTooltip(issue: IssuesManager.Issue.Issue): void {
    const elementIssueDetails = getElementIssueDetails(issue);
    if (!elementIssueDetails) {
      return;
    }

    if (elementIssueDetails.attribute) {
      this.#highlightViolatingAttr(elementIssueDetails.attribute, issue);
    } else {
      this.#highlightTagAsViolating(issue);
    }
  }

  get issuesByNodeElement(): Map<Element, IssuesManager.Issue.Issue[]> {
    return this.#nodeElementToIssue;
  }

  #highlightViolatingAttr(name: string, issue: IssuesManager.Issue.Issue): 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.#updateNodeElementToIssue(attributeElement, issue);
      }
    }
  }

  #highlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
    const tagElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
    tagElement.classList.add('violating-element');
    this.#updateNodeElementToIssue(tagElement, issue);
  }

  #updateNodeElementToIssue(nodeElement: Element, issue: IssuesManager.Issue.Issue): void {
    let issues = this.#nodeElementToIssue.get(nodeElement);
    if (!issues) {
      issues = [];
      this.#nodeElementToIssue.set(nodeElement, issues);
    }
    issues.push(issue);
    this.treeOutline?.updateNodeElementToIssue(nodeElement, issues);
  }

  expandedChildrenLimit(): number {
    return this.#expandedChildrenLimit;
  }

  setExpandedChildrenLimit(expandedChildrenLimit: number): void {
    this.#expandedChildrenLimit = 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.setHidden(this.hintElement, true);
    }
  }

  private createAiButton(): void {
    const isElementNode = this.node().nodeType() === Node.ELEMENT_NODE;
    if (!isElementNode ||
        !UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button')) {
      return;
    }

    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
    if (this.contentElement && !this.aiButtonContainer) {
      this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
      const floatingButton = Buttons.FloatingButton.create('smart-assistant', action.title(), 'ask-ai');
      floatingButton.addEventListener('click', ev => {
        ev.stopPropagation();
        this.select(true, false);
        void action.execute();
      }, {capture: true});
      floatingButton.addEventListener('mousedown', ev => {
        ev.stopPropagation();
      }, {capture: true});
      this.aiButtonContainer.appendChild(floatingButton);
    }
  }

  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.#hovered) {
      this.createSelection();
      this.listItemElement.classList.add('hovered');
    }

    this.updateTitle();
    this.listItemElement.draggable = true;
  }

  override async onpopulate(): Promise<void> {
    if (this.treeOutline) {
      return await 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 ? (void startTagTreeElement.remove()) : (void 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 && void this.treeOutline.showContextMenu(this, event);
  }

  async populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): Promise<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),
        {jslogContext: 'add-attribute'});

    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),
          {jslogContext: 'edit-attribute'});
    }
    await this.populateNodeContextMenu(contextMenu);
    ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node());
    this.populateScrollIntoView(contextMenu);
    contextMenu.viewSection().appendItem(i18nString(UIStrings.focus), async () => {
      await this.nodeInternal.focus();
    }, {jslogContext: 'focus'});
  }

  populatePseudoElementContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
    if (this.childCount() !== 0) {
      this.populateExpandRecursively(contextMenu);
    }

    this.populateScrollIntoView(contextMenu);
  }

  private populateExpandRecursively(contextMenu: UI.ContextMenu.ContextMenu): void {
    contextMenu.viewSection().appendItem(
        i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this),
        {jslogContext: 'expand-recursively'});
  }

  private populateScrollIntoView(contextMenu: UI.ContextMenu.ContextMenu): void {
    contextMenu.viewSection().appendItem(
        i18nString(UIStrings.scrollIntoView), () => this.nodeInternal.scrollIntoView(),
        {jslogContext: 'scroll-into-view'});
  }

  async populateTextContextMenu(contextMenu: UI.ContextMenu.ContextMenu, textNode: Element): Promise<void> {
    if (!this.editing) {
      contextMenu.editSection().appendItem(
          i18nString(UIStrings.editText), this.startEditingTextNode.bind(this, textNode), {jslogContext: 'edit-text'});
    }
    return await this.populateNodeContextMenu(contextMenu);
  }

  async populateNodeContextMenu(contextMenu: UI.ContextMenu.ContextMenu): Promise<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), {jslogContext: 'elements.edit-as-html'});
    }
    // clang-format on
    const isShadowRoot = this.nodeInternal.isShadowRoot();

    const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta.value;
    const treeOutline = this.treeOutline;
    if (!treeOutline) {
      return;
    }
    let menuItem;

    const openAiAssistanceId = 'freestyler.element-panel-context';
    if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
      function appendSubmenuPromptAction(
          submenu: UI.ContextMenu.SubMenu, action: UI.ActionRegistration.Action, label: Common.UIString.LocalizedString,
          prompt: string, jslogContext: string): void {
        submenu.defaultSection().appendItem(label, () => {
          void action.execute({prompt});
          UI.UIUtils.PromotionManager.instance().recordFeatureInteraction(openAiAssistanceId);
        }, {disabled: !action.enabled(), jslogContext});
      }

      UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, this.nodeInternal);
      if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
        // Register new badge under the `devToolsAiSubmenuPrompts` feature, as the freestyler one is already used in ViewManager.
        // Additionally register with the PromotionManager. Since we use two features for freeestyler here (submenu or debug with ai),
        // the back-end will not be able to identify them as one as soon as we launch, and show the new badge
        // on the 'Debug with Ai' item even if the user was already seeing it during the study if they were in the other study group.
        const featureName = UI.UIUtils.PromotionManager.instance().maybeShowPromotion(openAiAssistanceId) ?
            Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.featureName :
            undefined;
        const submenu =
            contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId, featureName);
        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));

        const submenuConfigs = [
          {
            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isFlex),
            items: [
              {
                label: i18nString(UIStrings.wrapTheseItems),
                prompt: 'How can I make flex items wrap?',
                jslogContextSuffix: '.flex-wrap',
              },
              {
                label: i18nString(UIStrings.distributeItemsEvenly),
                prompt: 'How do I distribute flex items evenly?',
                jslogContextSuffix: '.flex-distribute',
              },
              {
                label: i18nString(UIStrings.explainFlexbox),
                prompt: 'What is flexbox?',
                jslogContextSuffix: '.flex-what',
              },
            ],
          },
          {
            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean =>
                Boolean(props?.isGrid && !props?.isSubgrid),
            items: [
              {
                label: i18nString(UIStrings.alignItems),
                prompt: 'How do I align items in a grid?',
                jslogContextSuffix: '.grid-align',
              },
              {
                label: i18nString(UIStrings.addPadding),
                prompt: 'How to add spacing between grid items?',
                jslogContextSuffix: '.grid-gap',
              },
              {
                label: i18nString(UIStrings.explainGridLayout),
                prompt: 'How does grid layout work?',
                jslogContextSuffix: '.grid-how',
              },
            ],
          },
          {
            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isSubgrid),
            items: [
              {
                label: i18nString(UIStrings.findGridDefinition),
                prompt: 'Where is this grid defined?',
                jslogContextSuffix: '.subgrid-where',
              },
              {
                label: i18nString(UIStrings.changeParentProperties),
                prompt: 'How to overwrite parent grid properties?',
                jslogContextSuffix: '.subgrid-override',
              },
              {
                label: i18nString(UIStrings.explainSubgrids),
                prompt: 'How do subgrids work?',
                jslogContextSuffix: '.subgrid-how',
              },
            ],
          },
          {
            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.hasScroll),
            items: [
              {
                label: i18nString(UIStrings.removeScrollbars),
                prompt: 'How do I remove scrollbars for this element?',
                jslogContextSuffix: '.scroll-remove',
              },
              {
                label: i18nString(UIStrings.styleScrollbars),
                prompt: 'How can I style a scrollbar?',
                jslogContextSuffix: '.scroll-style',
              },
              {
                label: i18nString(UIStrings.explainScrollbars),
                prompt: 'Why does this element scroll?',
                jslogContextSuffix: '.scroll-why',
              },
            ],
          },
          {
            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isContainer),
            items: [
              {
                label: i18nString(UIStrings.explainContainerQueries),
                prompt: 'What are container queries?',
                jslogContextSuffix: '.container-what',
              },
              {
                label: i18nString(UIStrings.explainContainerTypes),
                prompt: 'How do I use container-type?',
                jslogContextSuffix: '.container-how',
              },
              {
                label: i18nString(UIStrings.explainContainerContext),
                prompt: 'What\'s the container context for this element?',
                jslogContextSuffix: '.container-context',
              },
            ],
          },
          {
            // Default items
            condition: (): boolean => true,
            items: [
              {
                label: i18nString(UIStrings.assessVisibility),
                prompt: 'Why isn’t this element visible?',
                jslogContextSuffix: '.visibility',
              },
              {
                label: i18nString(UIStrings.centerElement),
                prompt: 'How do I center this element?',
                jslogContextSuffix: '.center',
              },
            ],
          },
        ];

        const layoutProps =
            await this.nodeInternal.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.nodeInternal.id);
        const config = submenuConfigs.find(c => c.condition(layoutProps));
        if (config) {
          for (const item of config.items) {
            appendSubmenuPromptAction(
                submenu, action, item.label, item.prompt, openAiAssistanceId + item.jslogContextSuffix);
          }
        }
      } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
        // Register new badge under the `devToolsAiDebugWithAi` feature, as the freestyler one is already used in ViewManager.
        // Additionally register with the PromotionManager. Since we use two different features for freeestyler here (submenu or debug with ai),
        // the back-end will not be able to identify them as one as soon as we launch, and show the new badge
        // on the 'Debug with Ai' item even if the user was already seeing it during the study if they were in the other study group.
        const featureName = UI.UIUtils.PromotionManager.instance().maybeShowPromotion(openAiAssistanceId) ?
            Root.Runtime.hostConfig.devToolsAiDebugWithAi?.featureName :
            undefined;
        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
        contextMenu.footerSection().appendItem(action.title(), () => {
          void action.execute();
          UI.UIUtils.PromotionManager.instance().recordFeatureInteraction(openAiAssistanceId);
        }, {jslogContext: openAiAssistanceId, disabled: !action.enabled(), featureName});

      } else {
        contextMenu.footerSection().appendAction(openAiAssistanceId);
      }
    }

    menuItem = contextMenu.clipboardSection().appendItem(
        i18nString(UIStrings.cut), treeOutline.performCopyOrCut.bind(treeOutline, true, this.nodeInternal),
        {disabled: !this.hasEditableNode(), jslogContext: 'cut'});
    menuItem.setShortcut(createShortcut('X', modifier));

    // Place it here so that all "Copy"-ing items stick together.
    const copyMenu = contextMenu.clipboardSection().appendSubMenuItem(i18nString(UIStrings.copy), false, 'copy');
    const section = copyMenu.section();
    if (!isShadowRoot) {
      menuItem = section.appendItem(
          i18nString(UIStrings.copyOuterhtml), treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal),
          {jslogContext: 'copy-outer-html'});
      menuItem.setShortcut(createShortcut('V', modifier));
    }
    if (this.nodeInternal.nodeType() === Node.ELEMENT_NODE) {
      section.appendItem(
          i18nString(UIStrings.copySelector), this.copyCSSPath.bind(this), {jslogContext: 'copy-selector'});
      section.appendItem(
          i18nString(UIStrings.copyJsPath), this.copyJSPath.bind(this),
          {disabled: !canGetJSPath(this.nodeInternal), jslogContext: 'copy-js-path'});
      section.appendItem(
          i18nString(UIStrings.copyStyles), this.copyStyles.bind(this), {jslogContext: 'elements.copy-styles'});
    }
    if (!isShadowRoot) {
      section.appendItem(i18nString(UIStrings.copyXpath), this.copyXPath.bind(this), {jslogContext: 'copy-xpath'});
      section.appendItem(
          i18nString(UIStrings.copyFullXpath), this.copyFullXPath.bind(this), {jslogContext: 'copy-full-xpath'});
    }

    menuItem = copyMenu.clipboardSection().appendItem(
        i18nString(UIStrings.copyElement),
        treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal, true), {jslogContext: 'copy-element'});
    menuItem.setShortcut(createShortcut('C', modifier));

    if (!isShadowRoot) {
      // 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), {
            disabled: (this.nodeInternal.isInShadowTree() || isRootElement),
            jslogContext: 'elements.duplicate-element',
          });
    }

    menuItem = contextMenu.clipboardSection().appendItem(
        i18nString(UIStrings.paste), treeOutline.pasteNode.bind(treeOutline, this.nodeInternal),
        {disabled: !treeOutline.canPaste(this.nodeInternal), jslogContext: 'paste'});
    menuItem.setShortcut(createShortcut('V', modifier));

    menuItem = contextMenu.debugSection().appendCheckboxItem(
        i18nString(UIStrings.hideElement), treeOutline.toggleHideElement.bind(treeOutline, this.nodeInternal),
        {checked: treeOutline.isToggledToHidden(this.nodeInternal), jslogContext: 'elements.hide-element'});
    menuItem.setShortcut(
        UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction('elements.hide-element') || '');

    if (isEditable) {
      contextMenu.editSection().appendItem(
          i18nString(UIStrings.deleteElement), this.remove.bind(this), {jslogContext: 'delete-element'});
    }

    this.populateExpandRecursively(contextMenu);
    contextMenu.viewSection().appendItem(
        i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this), {jslogContext: 'collapse-children'});
    const deviceModeWrapperAction = new Emulation.DeviceModeWrapper.ActionDelegate();
    contextMenu.viewSection().appendItem(
        i18nString(UIStrings.captureNodeScreenshot),
        deviceModeWrapperAction.handleAction.bind(
            null, UI.Context.Context.instance(), 'emulation.capture-node-screenshot'),
        {jslogContext: '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);
        }
      }, {jslogContext: 'show-frame-details'});
    }
  }

  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
    attr.setAttribute('jslog', `${VisualLogging.value('new-attribute').track({change: true, resize: true})}`);

    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));