chrome-devtools-frontend 1.0.1581708 → 1.0.1583146

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -379,6 +379,15 @@ export function isOpeningTag(context: TagTypeContext): context is OpeningTagCont
 }
 
 export interface ViewInput {
+  node: SDK.DOMModel.DOMNode|null;
+  isClosingTag: boolean;
+  expanded: boolean;
+  isExpandable: boolean;
+  isXMLMimeType: boolean;
+  updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null;
+  onHighlightSearchResults: () => void;
+  onExpand: () => void;
+
   containerAdornerActive: boolean;
   flexAdornerActive: boolean;
   gridAdornerActive: boolean;
@@ -398,7 +407,6 @@ export interface ViewInput {
   showViewSourceAdorner: boolean;
   showScrollAdorner: boolean;
   showScrollSnapAdorner: boolean;
-  nodeInfo?: DocumentFragment;
   topLayerIndex: number;
   scrollSnapAdornerActive: boolean;
 
@@ -436,7 +444,7 @@ export interface ViewOutput {
 
 export function adornerRef(): DirectiveResult<typeof Lit.Directives.RefDirective> {
   let adorner: Adorners.Adorner.Adorner|undefined;
-  return ref((el?: Element) => {
+  return ref(el => {
     if (adorner) {
       ElementsPanel.instance().deregisterAdorner(adorner);
     }
@@ -467,6 +475,411 @@ function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent
   };
 }
 
+function renderTitle(
+    node: SDK.DOMModel.DOMNode,
+    isClosingTag: boolean,
+    expanded: boolean,
+    isExpandable: boolean,
+    isXMLMimeType: boolean,
+    updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
+    onUpdateSearchHighlight: () => void,
+    onExpand: () => void,
+    ): Lit.LitTemplate {
+  switch (node.nodeType()) {
+    case Node.ATTRIBUTE_NODE:
+      return renderAttribute({name: node.name as string, value: node.value as string}, updateRecord, true, node);
+
+    case Node.ELEMENT_NODE: {
+      if (node.pseudoType()) {
+        let pseudoElementName = node.nodeName();
+        const pseudoIdentifier = node.pseudoIdentifier();
+        if (pseudoIdentifier) {
+          pseudoElementName += `(${pseudoIdentifier})`;
+        }
+        return html`<span class="webkit-html-pseudo-element">${pseudoElementName}</span>\u200B`;
+      }
+
+      const tagName = node.nodeNameInCorrectCase();
+      if (isClosingTag) {
+        return renderTag(node, tagName, true, expanded, true, updateRecord);
+      }
+
+      const openingTag = renderTag(node, tagName, false, expanded, false, updateRecord);
+
+      if (isExpandable) {
+        if (!expanded) {
+          return html`${openingTag}<devtools-elements-tree-expand-button .data=${
+              {clickHandler: onExpand} as
+              ElementsComponents.ElementsTreeExpandButton
+                  .ElementsTreeExpandButtonData}></devtools-elements-tree-expand-button><span style="font-size: 0;"
+                  >…</span>\u200B${renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+        }
+        return openingTag;
+      }
+
+      if (ElementsTreeElement.canShowInlineText(node)) {
+        const firstChild = node.firstChild;
+        if (!firstChild) {
+          throw new Error('ElementsTreeElement._nodeTitleInfo expects node.firstChild to be defined.');
+        }
+        const result = convertUnicodeCharsToHTMLEntities(firstChild.nodeValue());
+        const textContent = Platform.StringUtilities.collapseWhitespace(result.text);
+
+        const highlightAnimation = (updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified()) ?
+            ref(el => {
+              if (el) {
+                UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
+              }
+            }) :
+            nothing;
+
+        const renderTextNode = ref(el => {
+          if (el) {
+            el.textContent = textContent;
+            Highlighting.highlightRangesWithStyleClass(el, result.entityRanges, 'webkit-html-entity-value');
+          }
+        });
+
+        return html`${openingTag}<span class="webkit-html-text-node" jslog=${
+            VisualLogging.value('text-node').track({change: true, dblclick: true})} ${highlightAnimation} ${
+            renderTextNode}></span>\u200B${renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+      }
+
+      if (isXMLMimeType || !ForbiddenClosingTagElements.has(tagName)) {
+        return html`${openingTag}${renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+      }
+      return openingTag;
+    }
+
+    case Node.TEXT_NODE: {
+      if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'script') {
+        const text = node.nodeValue();
+        const highlightNode = ref(el => {
+          if (el) {
+            el.textContent = text.replace(/^[\n\r]+|\s+$/g, '');
+            void CodeHighlighter.CodeHighlighter.highlightNode(el, 'text/javascript').then(onUpdateSearchHighlight);
+          }
+        });
+        return html`<span class="webkit-html-text-node webkit-html-js-node" jslog=${
+            VisualLogging.value('script-text-node').track({change: true, dblclick: true})} ${highlightNode}></span>`;
+      }
+      if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'style') {
+        const text = node.nodeValue();
+        const highlightNode = ref(el => {
+          if (el) {
+            el.textContent = text.replace(/^[\n\r]+|\s+$/g, '');
+            void CodeHighlighter.CodeHighlighter.highlightNode(el, 'text/css').then(onUpdateSearchHighlight);
+          }
+        });
+        return html`<span class="webkit-html-text-node webkit-html-css-node" jslog=${
+            VisualLogging.value('css-text-node').track({change: true, dblclick: true})} ${highlightNode}></span>`;
+      }
+
+      const result = convertUnicodeCharsToHTMLEntities(node.nodeValue());
+      const textContent = Platform.StringUtilities.collapseWhitespace(result.text);
+      const highlightAnimation = updateRecord?.isCharDataModified() ? ref(el => {
+        if (el) {
+          UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
+        }
+      }) :
+                                                                      nothing;
+      const renderTextNode = ref(el => {
+        if (el) {
+          el.textContent = textContent;
+          Highlighting.highlightRangesWithStyleClass(el, result.entityRanges, 'webkit-html-entity-value');
+        }
+      });
+      return html`"<span class="webkit-html-text-node" jslog=${VisualLogging.value('text-node').track({
+        change: true,
+        dblclick: true
+      })} ${highlightAnimation} ${renderTextNode}></span>"`;
+    }
+
+    case Node.COMMENT_NODE: {
+      return html`<span class="webkit-html-comment">&lt;!--${node.nodeValue()}--&gt;</span>`;
+    }
+
+    case Node.DOCUMENT_TYPE_NODE: {
+      let doctype = '<!DOCTYPE ' + node.nodeName();
+      if (node.publicId) {
+        doctype += ' PUBLIC "' + node.publicId + '"';
+        if (node.systemId) {
+          doctype += ' "' + node.systemId + '"';
+        }
+      } else if (node.systemId) {
+        doctype += ' SYSTEM "' + node.systemId + '"';
+      }
+      if (node.internalSubset) {
+        doctype += ' [' + node.internalSubset + ']';
+      }
+      doctype += '>';
+      return html`<span class="webkit-html-doctype">${doctype}</span>`;
+    }
+
+    case Node.CDATA_SECTION_NODE: {
+      return html`<span class="webkit-html-text-node">&lt;![CDATA[${node.nodeValue()}]]&gt;</span>`;
+    }
+
+    case Node.DOCUMENT_NODE: {
+      const text = (node as SDK.DOMModel.DOMDocument).documentURL;
+      const linkify = ref(el => {
+        if (el) {
+          el.removeChildren();
+          el.appendChild(Components.Linkifier.Linkifier.linkifyURL(text, {
+            text,
+            preventClick: true,
+            showColumnNumber: false,
+            inlineFrameIndex: 0,
+          }));
+        }
+      });
+      return html`<span>#document (<span ${linkify}></span>)</span>`;
+    }
+
+    case Node.DOCUMENT_FRAGMENT_NODE: {
+      return html`<span class="webkit-html-fragment">${
+          Platform.StringUtilities.collapseWhitespace(node.nodeNameInCorrectCase())}</span>`;
+    }
+
+    default: {
+      return html`${Platform.StringUtilities.collapseWhitespace(node.nodeNameInCorrectCase())}`;
+    }
+  }
+}
+
+function renderAttribute(
+    attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
+    isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
+  const name = attr.name;
+  const value = attr.value || '';
+  const forceValue = isDiff;
+  const closingPunctuationRegex = /[\/;:\)\]\}]/g;
+  let highlightIndex = 0;
+  let highlightCount = 0;
+  let additionalHighlightOffset = 0;
+
+  function setValueWithEntities(element: Element, value: string): void {
+    const result = convertUnicodeCharsToHTMLEntities(value);
+    highlightCount = result.entityRanges.length;
+    const newValue = result.text.replace(closingPunctuationRegex, (match, replaceOffset) => {
+      while (highlightIndex < highlightCount && result.entityRanges[highlightIndex].offset < replaceOffset) {
+        result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
+        ++highlightIndex;
+      }
+      additionalHighlightOffset += 1;
+      return match + '\u200B';
+    });
+
+    while (highlightIndex < highlightCount) {
+      result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
+      ++highlightIndex;
+    }
+    element.setTextContentTruncatedIfNeeded(newValue);
+    Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
+  }
+
+  const hasText = (forceValue || value.length > 0);
+  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
+    change: true,
+    dblclick: true,
+  });
+
+  const highlightNameAnimation = updateRecord?.isAttributeModified(name) && !hasText ? ref(el => {
+    if (el) {
+      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
+    }
+  }) :
+                                                                                       nothing;
+
+  const highlightValueAnimation = updateRecord?.isAttributeModified(name) && hasText ? ref(el => {
+    if (el) {
+      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
+    }
+  }) :
+                                                                                       nothing;
+
+  function linkifyValue(value: string): Element {
+    const rewrittenHref = node ? node.resolveURL(value) : null;
+    if (rewrittenHref === null) {
+      const span = document.createElement('span');
+      setValueWithEntities(span, value);
+      return span;
+    }
+    value = value.replace(closingPunctuationRegex, '$&\u200B');
+    if (value.startsWith('data:')) {
+      value = Platform.StringUtilities.trimMiddle(value, 60);
+    }
+    const link = node && node.nodeName().toLowerCase() === 'a' ?
+        Link.create(rewrittenHref, value, undefined, 'image-url') :
+        Components.Linkifier.Linkifier.linkifyURL(rewrittenHref, {
+          text: value,
+          preventClick: true,
+          showColumnNumber: false,
+          inlineFrameIndex: 0,
+        });
+    return ImagePreviewPopover.setImageUrl(link, rewrittenHref);
+  }
+
+  function linkifySrcset(value: string): DocumentFragment {
+    // Splitting normally on commas or spaces will break on valid srcsets "foo 1x,bar 2x" and "data:,foo 1x".
+    const fragment = document.createDocumentFragment();
+    let i = 0;
+    while (value.length) {
+      if (i++ > 0) {
+        UI.UIUtils.createTextChild(fragment, ' ');
+      }
+      value = value.trim();
+      let url = '';
+      let descriptor = '';
+      const indexOfSpace = value.search(/\s/);
+      if (indexOfSpace === -1) {
+        url = value;
+      } else if (indexOfSpace > 0 && value[indexOfSpace - 1] === ',') {
+        url = value.substring(0, indexOfSpace);
+      } else {
+        url = value.substring(0, indexOfSpace);
+        const indexOfComma = value.indexOf(',', indexOfSpace);
+        if (indexOfComma !== -1) {
+          descriptor = value.substring(indexOfSpace, indexOfComma + 1);
+        } else {
+          descriptor = value.substring(indexOfSpace);
+        }
+      }
+
+      if (url) {
+        if (url.endsWith(',')) {
+          fragment.appendChild(linkifyValue(url.substring(0, url.length - 1)));
+          UI.UIUtils.createTextChild(fragment, ',');
+        } else {
+          fragment.appendChild(linkifyValue(url));
+        }
+      }
+      if (descriptor) {
+        UI.UIUtils.createTextChild(fragment, descriptor);
+      }
+      value = value.substring(url.length + descriptor.length);
+    }
+    return fragment;
+  }
+
+  const nodeName = node ? node.nodeName().toLowerCase() : '';
+  const setAttrValue = ref(el => {
+    if (!el) {
+      return;
+    }
+    const valueElement = el as HTMLElement;
+    valueElement.removeChildren();
+    if (nodeName && (name === 'src' || name === 'href') && value) {
+      valueElement.appendChild(linkifyValue(value));
+    } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
+      valueElement.appendChild(linkifySrcset(value));
+    } else if (nodeName === 'image' && (name === 'xlink:href' || name === 'href')) {
+      valueElement.appendChild(linkifySrcset(value));
+    } else {
+      setValueWithEntities(valueElement, value);
+    }
+  });
+
+  const relationRef =
+      (relation: Protocol.DOM.GetElementByRelationRequestRelation, tooltip: string): ReturnType<typeof ref> =>
+          ref((el): void => {
+            if (!el) {
+              return;
+            }
+            void (async(): Promise<void> => {
+              const relatedElementId = await node.domModel().getElementByRelation(node.id, relation);
+              const relatedElement = node.domModel().nodeForId(relatedElementId);
+              if (!relatedElement) {
+                return;
+              }
+              const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, {
+                preventKeyboardFocus: true,
+                tooltip,
+                textContent: el.textContent || undefined,
+                isDynamicLink: true,
+              });
+              el.removeChildren();
+              el.append(link);
+            })();
+          });
+
+  let relationRefDirective: ReturnType<typeof relationRef> = ref(() => {});
+  if (!value) {
+    if (name === 'popovertarget') {
+      relationRefDirective = relationRef(
+          Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget, i18nString(UIStrings.showPopoverTarget));
+    } else if (name === 'interesttarget') {
+      relationRefDirective = relationRef(
+          Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget, i18nString(UIStrings.showInterestTarget));
+    } else if (name === 'commandfor') {
+      relationRefDirective = relationRef(
+          Protocol.DOM.GetElementByRelationRequestRelation.CommandFor, i18nString(UIStrings.showCommandForTarget));
+    }
+  }
+
+  let valueRelationRefDirective: ReturnType<typeof relationRef> = ref(() => {});
+  if (value) {
+    if (name === 'popovertarget') {
+      valueRelationRefDirective = relationRef(
+          Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget, i18nString(UIStrings.showPopoverTarget));
+    } else if (name === 'interesttarget') {
+      valueRelationRefDirective = relationRef(
+          Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget, i18nString(UIStrings.showInterestTarget));
+    } else if (name === 'commandfor') {
+      valueRelationRefDirective = relationRef(
+          Protocol.DOM.GetElementByRelationRequestRelation.CommandFor, i18nString(UIStrings.showCommandForTarget));
+    }
+  }
+
+  return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name" ${
+      highlightNameAnimation} ${relationRefDirective}>${name}</span>${
+      hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${highlightValueAnimation} ${setAttrValue} ${
+                    valueRelationRefDirective}></span>"` :
+                nothing}</span>`;
+}
+
+function renderTag(
+    node: SDK.DOMModel.DOMNode, tagName: string, isClosingTag: boolean, expanded: boolean,
+    isDistinctTreeElement: boolean,
+    updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null): Lit.LitTemplate {
+  const classMap = {
+    'webkit-html-tag': true,
+    close: isClosingTag && isDistinctTreeElement,
+  };
+
+  let hasUpdates = false;
+  const attributes = !isClosingTag && node.hasAttributes() ? node.attributes() : [];
+
+  if (!isClosingTag && updateRecord) {
+    hasUpdates = updateRecord.hasRemovedAttributes() || updateRecord.hasRemovedChildren();
+    hasUpdates = hasUpdates || (!expanded && updateRecord.hasChangedChildren());
+  }
+
+  const highlightAnimation = hasUpdates ? ref(el => {
+    if (el) {
+      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
+    }
+  }) :
+                                          nothing;
+
+  // We are taking full text content of the tag, including attributes and children, to set the aria label.
+  // FIXME: we should compute the aria label ourselves if it is event needed.
+  const setAriaLabel = ref(el => {
+    if (el?.textContent) {
+      UI.ARIAUtils.setLabel(el, el.textContent);
+    }
+  });
+
+  const tagNameClass = isClosingTag ? 'webkit-html-close-tag-name' : 'webkit-html-tag-name';
+  const tagString = (isClosingTag ? '/' : '') + tagName;
+  const jslog = !isClosingTag ? VisualLogging.value('tag-name').track({change: true, dblclick: true}) : '';
+
+  return html`<span
+      class=${Lit.Directives.classMap(classMap)} ${setAriaLabel}
+      >&lt;<span class=${tagNameClass} jslog=${jslog || nothing} ${highlightAnimation}>${tagString}</span>${
+      attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node)}`)}&gt;</span>\u200B`;
+}
+
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
   const hasAdorners = input.showAdAdorner || input.showContainerAdorner || input.showFlexAdorner ||
       input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner || input.showPopoverAdorner ||
@@ -479,7 +892,16 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
-      ${input.nodeInfo ? html`<span class="highlight">${input.nodeInfo}</span>` : nothing}
+      ${input.node ? html`<span class="highlight">${renderTitle(
+          input.node,
+          input.isClosingTag,
+          input.expanded,
+          input.isExpandable,
+          input.isXMLMimeType,
+          input.updateRecord,
+          input.onHighlightSearchResults,
+          input.onExpand,
+      )}</span>` : nothing}
       ${input.isHovered || input.isSelected ? html`
         <div class="selection fill" style=${`margin-left: ${-input.indent}px`}></div>
       ` : nothing}
@@ -681,9 +1103,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   nodeInternal: SDK.DOMModel.DOMNode;
   override treeOutline: ElementsTreeOutline|null;
 
-  // Handled by the view output for now.
-  contentElement!: HTMLElement;
-
   private searchQuery: string|null;
   #expandedChildrenLimit: number;
   private readonly decorationsThrottler: Common.Throttler.Throttler;
@@ -699,7 +1118,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   readonly tagTypeContext: TagTypeContext;
 
   #adornersThrottler = new Common.Throttler.Throttler(100);
-  #nodeInfo?: DocumentFragment;
   #containerAdornerActive = false;
   #flexAdornerActive = false;
   #gridAdornerActive = false;
@@ -713,6 +1131,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #descendantDecorations: Decoration[] = [];
   #decorationsTooltip = '';
 
+  #updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null = null;
+
+  // Used to add the content to TreeElement's title element.
+  // Relied on by web tests.
+  #contentElement?: HTMLElement;
+
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
     super();
@@ -816,9 +1240,23 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  performUpdate(): void {
+  // ClearNode param is used to clean DOM after in-place editing..
+  performUpdate(clearNode = false): void {
+    if (this.editing) {
+      return;
+    }
+    const output: ViewOutput = {};
     DEFAULT_VIEW(
         {
+          node: !clearNode ? this.nodeInternal : null,
+          isClosingTag: this.isClosingTag(),
+          expanded: this.expanded,
+          isExpandable: this.isExpandable(),
+          isXMLMimeType: Boolean(this.treeOutline?.isXMLMimeType),
+          updateRecord: this.#updateRecord,
+          onHighlightSearchResults: () => this.#highlightSearchResults(),
+          onExpand: () => this.expand(),
+
           containerAdornerActive: this.#containerAdornerActive,
           showAdAdorner: this.nodeInternal.isAdFrameNode(),
           showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
@@ -847,7 +1285,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
           showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !this.isClosingTag(),
           startingStyleAdornerActive: this.#startingStyleAdornerActive,
-          nodeInfo: this.#nodeInfo,
           onStartingStyleAdornerClick: (event: Event) => this.#onStartingStyleAdornerClick(event),
           onSlotAdornerClick: () => {
             if (this.nodeInternal.assignedSlot) {
@@ -888,7 +1325,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
             }
           },
         },
-        this, this.listItemElement);
+        output, this.listItemElement);
+
+    this.#contentElement = output.contentElement;
+    if (this.#updateRecord) {
+      this.#updateRecord = null;
+    }
   }
 
   #onContainerAdornerClick(event: Event): void {
@@ -1096,11 +1538,16 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#expandedChildrenLimit = expandedChildrenLimit;
   }
 
+  onTopLayerIndexChanged(): void {
+    this.performUpdate();
+  }
+
   override onbind(): void {
     this.performUpdate();
     if (this.treeOutline && !this.isClosingTag()) {
       this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
-      this.nodeInternal.addEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
+      this.nodeInternal.addEventListener(
+          SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.onTopLayerIndexChanged, this);
       this.nodeInternal.addEventListener(
           SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
       this.nodeInternal.addEventListener(
@@ -1127,6 +1574,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // element is bound again.
     DEFAULT_VIEW(
         {
+          node: null,
+          isClosingTag: false,
+          expanded: false,
+          isExpandable: false,
+          isXMLMimeType: false,
+          updateRecord: null,
+          onHighlightSearchResults: () => {},
+          onExpand: () => {},
           containerAdornerActive: false,
           showAdAdorner: false,
           showContainerAdorner: false,
@@ -1148,7 +1603,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           showSlotAdorner: false,
           showStartingStyleAdorner: false,
           startingStyleAdornerActive: false,
-          nodeInfo: this.#nodeInfo,
           onStartingStyleAdornerClick: () => {},
           onSlotAdornerClick: () => {},
           topLayerIndex: -1,
@@ -1170,12 +1624,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           decorationsTooltip: '',
           indent: 0,
         },
-        this, this.listItemElement);
+        {}, this.listItemElement);
 
     if (this.treeOutline && this.treeOutline.treeElementByNode.get(this.nodeInternal) === this) {
       this.treeOutline.treeElementByNode.delete(this.nodeInternal);
     }
-    this.nodeInternal.removeEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
+    this.nodeInternal.removeEventListener(
+        SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.onTopLayerIndexChanged, this);
     this.nodeInternal.removeEventListener(
         SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
     this.nodeInternal.removeEventListener(
@@ -1743,7 +2198,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // 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);
+
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    Lit.render(renderAttribute({name: ' ', value: ''}, null, false, this.nodeInternal), container);
+    const attr = container.firstElementChild as HTMLElement;
     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})}`);
@@ -1789,7 +2247,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
     // Make sure elementForSelection is not a child of attributeValueElement.
     elementForSelection =
-        attributeValueElement.isAncestor(elementForSelection) ? attributeValueElement : elementForSelection;
+        attributeValueElement?.isAncestor(elementForSelection) ? attributeValueElement : elementForSelection;
 
     function removeZeroWidthSpaceRecursive(node: Node): void {
       if (node.nodeType === Node.TEXT_NODE) {
@@ -1825,7 +2283,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return '';
     }
 
-    if (!Common.ParsedURL.ParsedURL.fromString(attributeValueElement.textContent || '')) {
+    if (!Common.ParsedURL.ParsedURL.fromString(attributeValueElement?.textContent || '')) {
       config.setPostKeydownFinishHandler(postKeyDownFinishHandler);
     }
 
@@ -1962,7 +2420,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // Hide header items.
     let child: (ChildNode|null) = this.listItemElement.firstChild;
     while (child) {
-      (child as HTMLElement).style.display = 'none';
+      if (child instanceof HTMLElement) {
+        child.style.display = 'none';
+      }
       child = child.nextSibling;
     }
     // Hide children item.
@@ -2054,7 +2514,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       // Unhide header items.
       let child: (ChildNode|null) = this.listItemElement.firstChild;
       while (child) {
-        (child as HTMLElement).style.removeProperty('display');
+        if (child instanceof HTMLElement) {
+          child.style.removeProperty('display');
+        }
         child = child.nextSibling;
       }
 
@@ -2242,8 +2704,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.editing) {
       return;
     }
-
-    this.#nodeInfo = this.nodeTitleInfo(updateRecord || null);
+    this.performUpdate(/* clearNode= */ true);
+    this.#updateRecord = updateRecord ?? null;
     if (this.nodeInternal.nodeType() === Node.DOCUMENT_FRAGMENT_NODE && this.nodeInternal.isInShadowTree() &&
         this.nodeInternal.shadowRootType()) {
       this.childrenListElement.classList.add('shadow-root');
@@ -2261,8 +2723,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
     this.performUpdate();
-    // fixme: make it clear that `this.title = x` is a setter with significant side effects
-    this.title = this.contentElement;
+    if (this.#contentElement) {
+      // fixme: we probably do not need a title element in the new tree outline.
+      this.title = this.#contentElement;
+    }
     this.updateDecorations();
 
     // If there is an issue with this node, make sure to update it.
@@ -2367,409 +2831,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private buildAttributeDOM(
-      parentElement: Element|DocumentFragment, name: string, value: string,
-      updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null, forceValue?: boolean,
-      node?: SDK.DOMModel.DOMNode): HTMLElement {
-    const closingPunctuationRegex = /[\/;:\)\]\}]/g;
-    let highlightIndex = 0;
-    let highlightCount = 0;
-    let additionalHighlightOffset = 0;
-
-    function setValueWithEntities(this: ElementsTreeElement, element: Element, value: string): void {
-      const result = convertUnicodeCharsToHTMLEntities(value);
-      highlightCount = result.entityRanges.length;
-      value = result.text.replace(closingPunctuationRegex, (match, replaceOffset) => {
-        while (highlightIndex < highlightCount && result.entityRanges[highlightIndex].offset < replaceOffset) {
-          result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
-          ++highlightIndex;
-        }
-        additionalHighlightOffset += 1;
-        return match + '\u200B';
-      });
-
-      while (highlightIndex < highlightCount) {
-        result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
-        ++highlightIndex;
-      }
-      element.setTextContentTruncatedIfNeeded(value);
-      Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
-    }
-
-    const hasText = (forceValue || value.length > 0);
-    const attrSpanElement = parentElement.createChild('span', 'webkit-html-attribute');
-    attrSpanElement.setAttribute(
-        'jslog', `${VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
-          change: true,
-          dblclick: true,
-        })}`);
-
-    const attrNameElement = attrSpanElement.createChild('span', 'webkit-html-attribute-name');
-    attrNameElement.textContent = name;
-
-    if (hasText) {
-      UI.UIUtils.createTextChild(attrSpanElement, '=\u200B"');
-    }
-
-    const attrValueElement = attrSpanElement.createChild('span', 'webkit-html-attribute-value');
-
-    if (updateRecord?.isAttributeModified(name)) {
-      UI.UIUtils.runCSSAnimationOnce(hasText ? attrValueElement : attrNameElement, 'dom-update-highlight');
-    }
-
-    function linkifyValue(this: ElementsTreeElement, value: string): Element {
-      const rewrittenHref = node ? node.resolveURL(value) : null;
-      if (rewrittenHref === null) {
-        const span = document.createElement('span');
-        setValueWithEntities.call(this, span, value);
-        return span;
-      }
-      value = value.replace(closingPunctuationRegex, '$&\u200B');
-      if (value.startsWith('data:')) {
-        value = Platform.StringUtilities.trimMiddle(value, 60);
-      }
-      const link = node && node.nodeName().toLowerCase() === 'a' ?
-          Link.create(rewrittenHref, value, undefined, 'image-url') :
-          Components.Linkifier.Linkifier.linkifyURL(rewrittenHref, {
-            text: value,
-            preventClick: true,
-            showColumnNumber: false,
-            inlineFrameIndex: 0,
-          });
-      return ImagePreviewPopover.setImageUrl(link, rewrittenHref);
-    }
-
-    const nodeName = node ? node.nodeName().toLowerCase() : '';
-    // If the href/src attribute has a value, attempt to link it.
-    // There's no point trying to link it if the value is empty (e.g. <a href=''>).
-    if (nodeName && (name === 'src' || name === 'href') && value) {
-      attrValueElement.appendChild(linkifyValue.call(this, value));
-    } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
-      attrValueElement.appendChild(linkifySrcset.call(this, value));
-    } else if (nodeName === 'image' && (name === 'xlink:href' || name === 'href')) {
-      attrValueElement.appendChild(linkifySrcset.call(this, value));
-    } else {
-      setValueWithEntities.call(this, attrValueElement, value);
-    }
-
-    switch (name) {
-      case 'popovertarget': {
-        const linkedPart = value ? attrValueElement : attrNameElement;
-        void this.linkifyElementByRelation(
-            linkedPart, Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget,
-            i18nString(UIStrings.showPopoverTarget));
-        break;
-      }
-      case 'interesttarget': {
-        const linkedPart = value ? attrValueElement : attrNameElement;
-        void this.linkifyElementByRelation(
-            linkedPart, Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget,
-            i18nString(UIStrings.showInterestTarget));
-        break;
-      }
-      case 'commandfor': {
-        const linkedPart = value ? attrValueElement : attrNameElement;
-        void this.linkifyElementByRelation(
-            linkedPart, Protocol.DOM.GetElementByRelationRequestRelation.CommandFor,
-            i18nString(UIStrings.showCommandForTarget));
-        break;
-      }
-    }
-
-    if (hasText) {
-      UI.UIUtils.createTextChild(attrSpanElement, '"');
-    }
-
-    function linkifySrcset(this: ElementsTreeElement, value: string): DocumentFragment {
-      // Splitting normally on commas or spaces will break on valid srcsets "foo 1x,bar 2x" and "data:,foo 1x".
-      // 1) Let the index of the next space be `indexOfSpace`.
-      // 2a) If the character at `indexOfSpace - 1` is a comma, collect the preceding characters up to
-      //     `indexOfSpace - 1` as a URL and repeat step 1).
-      // 2b) Else, collect the preceding characters as a URL.
-      // 3) Collect the characters from `indexOfSpace` up to the next comma as the size descriptor and repeat step 1).
-      // https://html.spec.whatwg.org/C/#parse-a-srcset-attribute
-      const fragment = document.createDocumentFragment();
-      let i = 0;
-      while (value.length) {
-        if (i++ > 0) {
-          UI.UIUtils.createTextChild(fragment, ' ');
-        }
-        value = value.trim();
-        // The url and descriptor may end with a separating comma.
-        let url = '';
-        let descriptor = '';
-        const indexOfSpace = value.search(/\s/);
-        if (indexOfSpace === -1) {
-          url = value;
-        } else if (indexOfSpace > 0 && value[indexOfSpace - 1] === ',') {
-          url = value.substring(0, indexOfSpace);
-        } else {
-          url = value.substring(0, indexOfSpace);
-          const indexOfComma = value.indexOf(',', indexOfSpace);
-          if (indexOfComma !== -1) {
-            descriptor = value.substring(indexOfSpace, indexOfComma + 1);
-          } else {
-            descriptor = value.substring(indexOfSpace);
-          }
-        }
-
-        if (url) {
-          // Up to one trailing comma should be removed from `url`.
-          if (url.endsWith(',')) {
-            fragment.appendChild(linkifyValue.call(this, url.substring(0, url.length - 1)));
-            UI.UIUtils.createTextChild(fragment, ',');
-          } else {
-            fragment.appendChild(linkifyValue.call(this, url));
-          }
-        }
-        if (descriptor) {
-          UI.UIUtils.createTextChild(fragment, descriptor);
-        }
-        value = value.substring(url.length + descriptor.length);
-      }
-      return fragment;
-    }
-
-    return attrSpanElement;
-  }
-
-  private async linkifyElementByRelation(
-      linkContainer: Element, relation: Protocol.DOM.GetElementByRelationRequestRelation,
-      tooltip: string): Promise<void> {
-    const relatedElementId = await this.nodeInternal.domModel().getElementByRelation(this.nodeInternal.id, relation);
-    const relatedElement = this.nodeInternal.domModel().nodeForId(relatedElementId);
-    if (!relatedElement) {
-      return;
-    }
-    const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, {
-      preventKeyboardFocus: true,
-      tooltip,
-      textContent: linkContainer.textContent || undefined,
-      isDynamicLink: true,
-    });
-    linkContainer.removeChildren();
-    linkContainer.append(link);
-  }
-
-  private buildPseudoElementDOM(parentElement: DocumentFragment, pseudoElementName: string): void {
-    const pseudoElement = parentElement.createChild('span', 'webkit-html-pseudo-element');
-    pseudoElement.textContent = pseudoElementName;
-    UI.UIUtils.createTextChild(parentElement, '\u200B');
-  }
-
-  private buildTagDOM(
-      parentElement: DocumentFragment, tagName: string, isClosingTag: boolean, isDistinctTreeElement: boolean,
-      updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null): void {
-    const node = this.nodeInternal;
-    const classes = ['webkit-html-tag'];
-    if (isClosingTag && isDistinctTreeElement) {
-      classes.push('close');
-    }
-    const tagElement = parentElement.createChild('span', classes.join(' '));
-    UI.UIUtils.createTextChild(tagElement, '<');
-    const tagNameElement =
-        tagElement.createChild('span', isClosingTag ? 'webkit-html-close-tag-name' : 'webkit-html-tag-name');
-    if (!isClosingTag) {
-      tagNameElement.setAttribute('jslog', `${VisualLogging.value('tag-name').track({change: true, dblclick: true})}`);
-    }
-    tagNameElement.textContent = (isClosingTag ? '/' : '') + tagName;
-    if (!isClosingTag) {
-      if (node.hasAttributes()) {
-        const attributes = node.attributes();
-        for (let i = 0; i < attributes.length; ++i) {
-          const attr = attributes[i];
-          UI.UIUtils.createTextChild(tagElement, ' ');
-          this.buildAttributeDOM(tagElement, attr.name, attr.value, updateRecord, false, node);
-        }
-      }
-      if (updateRecord) {
-        let hasUpdates: boolean = updateRecord.hasRemovedAttributes() || updateRecord.hasRemovedChildren();
-        hasUpdates = hasUpdates || (!this.expanded && updateRecord.hasChangedChildren());
-        if (hasUpdates) {
-          UI.UIUtils.runCSSAnimationOnce(tagNameElement, 'dom-update-highlight');
-        }
-      }
-    }
-
-    UI.UIUtils.createTextChild(tagElement, '>');
-    UI.UIUtils.createTextChild(parentElement, '\u200B');
-    if (tagElement.textContent) {
-      UI.ARIAUtils.setLabel(tagElement, tagElement.textContent);
-    }
-  }
-
-  private nodeTitleInfo(updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null): DocumentFragment {
-    const node = this.nodeInternal;
-    const titleDOM = document.createDocumentFragment();
-    const updateSearchHighlight = (): void => {
-      this.#highlightSearchResults();
-    };
-
-    switch (node.nodeType()) {
-      case Node.ATTRIBUTE_NODE:
-        this.buildAttributeDOM(titleDOM, (node.name as string), (node.value as string), updateRecord, true);
-        break;
-
-      case Node.ELEMENT_NODE: {
-        if (node.pseudoType()) {
-          let pseudoElementName = node.nodeName();
-          const pseudoIdentifier = node.pseudoIdentifier();
-          if (pseudoIdentifier) {
-            pseudoElementName += `(${pseudoIdentifier})`;
-          }
-          this.buildPseudoElementDOM(titleDOM, pseudoElementName);
-          break;
-        }
-
-        const tagName = node.nodeNameInCorrectCase();
-        if (this.isClosingTag()) {
-          this.buildTagDOM(titleDOM, tagName, true, true, updateRecord);
-          break;
-        }
-
-        this.buildTagDOM(titleDOM, tagName, false, false, updateRecord);
-
-        if (this.isExpandable()) {
-          if (!this.expanded) {
-            const expandButton = new ElementsComponents.ElementsTreeExpandButton.ElementsTreeExpandButton();
-            expandButton.data = {
-              clickHandler: () => this.expand(),
-            };
-            titleDOM.appendChild(expandButton);
-
-            // This hidden span with … is for blink layout tests.
-            // The method dumpElementsTree(front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js)
-            // dumps … to identify expandable element.
-            const hidden = document.createElement('span');
-            hidden.textContent = '…';
-            hidden.style.fontSize = '0';
-            titleDOM.appendChild(hidden);
-
-            UI.UIUtils.createTextChild(titleDOM, '\u200B');
-            this.buildTagDOM(titleDOM, tagName, true, false, updateRecord);
-          }
-          break;
-        }
-
-        if (ElementsTreeElement.canShowInlineText(node)) {
-          const textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node');
-          textNodeElement.setAttribute(
-              'jslog', `${VisualLogging.value('text-node').track({change: true, dblclick: true})}`);
-          const firstChild = node.firstChild;
-          if (!firstChild) {
-            throw new Error('ElementsTreeElement._nodeTitleInfo expects node.firstChild to be defined.');
-          }
-          const result = convertUnicodeCharsToHTMLEntities(firstChild.nodeValue());
-          textNodeElement.textContent = Platform.StringUtilities.collapseWhitespace(result.text);
-          Highlighting.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
-          UI.UIUtils.createTextChild(titleDOM, '\u200B');
-          this.buildTagDOM(titleDOM, tagName, true, false, updateRecord);
-          if (updateRecord?.hasChangedChildren()) {
-            UI.UIUtils.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
-          }
-          if (updateRecord?.isCharDataModified()) {
-            UI.UIUtils.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
-          }
-          break;
-        }
-
-        if (this.treeOutline?.isXMLMimeType || !ForbiddenClosingTagElements.has(tagName)) {
-          this.buildTagDOM(titleDOM, tagName, true, false, updateRecord);
-        }
-        break;
-      }
-
-      case Node.TEXT_NODE:
-        if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'script') {
-          const newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-js-node');
-          newNode.setAttribute(
-              'jslog', `${VisualLogging.value('script-text-node').track({change: true, dblclick: true})}`);
-          const text = node.nodeValue();
-          newNode.textContent = text.replace(/^[\n\r]+|\s+$/g, '');
-          void CodeHighlighter.CodeHighlighter.highlightNode(newNode, 'text/javascript').then(updateSearchHighlight);
-        } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === 'style') {
-          const newNode = titleDOM.createChild('span', 'webkit-html-text-node webkit-html-css-node');
-          newNode.setAttribute(
-              'jslog', `${VisualLogging.value('css-text-node').track({change: true, dblclick: true})}`);
-          const text = node.nodeValue();
-          newNode.textContent = text.replace(/^[\n\r]+|\s+$/g, '');
-          void CodeHighlighter.CodeHighlighter.highlightNode(newNode, 'text/css').then(updateSearchHighlight);
-        } else {
-          UI.UIUtils.createTextChild(titleDOM, '"');
-          const textNodeElement = titleDOM.createChild('span', 'webkit-html-text-node');
-          textNodeElement.setAttribute(
-              'jslog', `${VisualLogging.value('text-node').track({change: true, dblclick: true})}`);
-          const result = convertUnicodeCharsToHTMLEntities(node.nodeValue());
-          textNodeElement.textContent = Platform.StringUtilities.collapseWhitespace(result.text);
-          Highlighting.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
-          UI.UIUtils.createTextChild(titleDOM, '"');
-          if (updateRecord?.isCharDataModified()) {
-            UI.UIUtils.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
-          }
-        }
-        break;
-
-      case Node.COMMENT_NODE: {
-        const commentElement = titleDOM.createChild('span', 'webkit-html-comment');
-        UI.UIUtils.createTextChild(commentElement, '<!--' + node.nodeValue() + '-->');
-        break;
-      }
-
-      case Node.DOCUMENT_TYPE_NODE: {
-        const docTypeElement = titleDOM.createChild('span', 'webkit-html-doctype');
-        UI.UIUtils.createTextChild(docTypeElement, '<!DOCTYPE ' + node.nodeName());
-        if (node.publicId) {
-          UI.UIUtils.createTextChild(docTypeElement, ' PUBLIC "' + node.publicId + '"');
-          if (node.systemId) {
-            UI.UIUtils.createTextChild(docTypeElement, ' "' + node.systemId + '"');
-          }
-        } else if (node.systemId) {
-          UI.UIUtils.createTextChild(docTypeElement, ' SYSTEM "' + node.systemId + '"');
-        }
-
-        if (node.internalSubset) {
-          UI.UIUtils.createTextChild(docTypeElement, ' [' + node.internalSubset + ']');
-        }
-
-        UI.UIUtils.createTextChild(docTypeElement, '>');
-        break;
-      }
-
-      case Node.CDATA_SECTION_NODE: {
-        const cdataElement = titleDOM.createChild('span', 'webkit-html-text-node');
-        UI.UIUtils.createTextChild(cdataElement, '<![CDATA[' + node.nodeValue() + ']]>');
-        break;
-      }
-
-      case Node.DOCUMENT_NODE: {
-        const documentElement = titleDOM.createChild('span');
-        UI.UIUtils.createTextChild(documentElement, '#document (');
-        const text = (node as SDK.DOMModel.DOMDocument).documentURL;
-        documentElement.appendChild(Components.Linkifier.Linkifier.linkifyURL(text, {
-          text,
-          preventClick: true,
-          showColumnNumber: false,
-          inlineFrameIndex: 0,
-        }));
-        UI.UIUtils.createTextChild(documentElement, ')');
-        break;
-      }
-
-      case Node.DOCUMENT_FRAGMENT_NODE: {
-        const fragmentElement = titleDOM.createChild('span', 'webkit-html-fragment');
-        fragmentElement.textContent = Platform.StringUtilities.collapseWhitespace(node.nodeNameInCorrectCase());
-        break;
-      }
-
-      default: {
-        const nameWithSpaceCollapsed = Platform.StringUtilities.collapseWhitespace(node.nodeNameInCorrectCase());
-        UI.UIUtils.createTextChild(titleDOM, nameWithSpaceCollapsed);
-      }
-    }
-
-    return titleDOM;
-  }
-
   async remove(): Promise<void> {
     if (this.treeOutline?.isToggledToHidden(this.nodeInternal)) {
       // Unhide the node before removing. This avoids inconsistent state if the node is restored via undo.