chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -49,7 +49,7 @@ import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Elements from '../../models/elements/elements.js';
-import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -65,7 +65,6 @@ import * as PanelsCommon from '../common/common.js';
 import * as Media from '../media/media.js';
 
 import * as ElementsComponents from './components/components.js';
-import {cssPath, jsPath, xPath} from './DOMPath.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
@@ -73,7 +72,7 @@ import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutlin
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
-const {html, nothing, render, Directives: {ref, repeat}} = Lit;
+const {html, nothing, render, Directives: {classMap, ref, repeat, until}} = Lit;
 const {animateOn} = UI.UIUtils;
 
 const UIStrings = {
@@ -268,6 +267,7 @@ export interface ViewInput {
   updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null;
   onHighlightSearchResults: () => void;
   onExpand: () => void;
+  issues?: IssuesManager.Issue.Issue[];
 
   containerAdornerActive: boolean;
   flexAdornerActive: boolean;
@@ -360,7 +360,7 @@ export interface Decoration {
 
 const DOM_UPDATE_ANIMATION_CLASS_NAME = 'dom-update-highlight';
 
-function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
+export function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
   return (event: KeyboardEvent) => {
     if (event.code === 'Enter' || event.code === 'Space') {
       cb(event);
@@ -379,10 +379,12 @@ function renderTitle(
     updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
     onUpdateSearchHighlight: () => void,
     onExpand: () => void,
+    issues?: IssuesManager.Issue.Issue[],
     ): Lit.LitTemplate {
   switch (node.nodeType()) {
     case Node.ATTRIBUTE_NODE:
-      return renderAttribute({name: node.name as string, value: node.value as string}, updateRecord, true, node);
+      return renderAttribute({name: node.name as string, value: node.value as string}, updateRecord, true, node,
+                             issues);
 
     case Node.ELEMENT_NODE: {
       if (node.pseudoType()) {
@@ -396,10 +398,10 @@ function renderTitle(
 
       const tagName = node.nodeNameInCorrectCase();
       if (isClosingTag) {
-        return renderTag(node, tagName, true, expanded, true, updateRecord);
+        return renderTag(node, tagName, true, expanded, true, updateRecord, issues);
       }
 
-      const openingTag = renderTag(node, tagName, false, expanded, false, updateRecord);
+      const openingTag = renderTag(node, tagName, false, expanded, false, updateRecord, issues);
 
       if (isExpandable) {
         if (!expanded) {
@@ -407,7 +409,7 @@ function renderTitle(
               {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)}`;
+                  >…</span>\u200B${renderTag(node, tagName, true, expanded, false, updateRecord, issues)}`;
         }
         return openingTag;
       }
@@ -429,14 +431,13 @@ function renderTitle(
 
         return html`${openingTag}<span class="webkit-html-text-node" jslog=${
             VisualLogging.value('text-node').track({change: true, dblclick: true})} ${
-            animateOn(
-                Boolean((updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified())),
-                DOM_UPDATE_ANIMATION_CLASS_NAME)} ${renderTextNode}></span>\u200B${
-            renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+            animateOn(Boolean((updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified())),
+                      DOM_UPDATE_ANIMATION_CLASS_NAME)} ${renderTextNode}></span>\u200B${
+            renderTag(node, tagName, true, expanded, false, updateRecord, issues)}`;
       }
 
       if (isXMLMimeType || !ForbiddenClosingTagElements.has(tagName)) {
-        return html`${openingTag}${renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+        return html`${openingTag}${renderTag(node, tagName, true, expanded, false, updateRecord, issues)}`;
       }
       return openingTag;
     }
@@ -609,9 +610,9 @@ function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.Te
 const relationPromisesCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, Promise<string|Lit.LitTemplate>>>();
 const relatedElementsCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, SDK.DOMModel.DOMNode|null>>();
 
-function renderAttribute(
-    attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
-    isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
+function renderAttribute(attr: {name: string, value?: string},
+                         updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null, isDiff: boolean,
+                         node: SDK.DOMModel.DOMNode, issues?: IssuesManager.Issue.Issue[]): Lit.LitTemplate {
   const name = attr.name;
   const value = attr.value || '';
   const forceValue = isDiff;
@@ -716,9 +717,15 @@ function renderAttribute(
     dblclick: true,
   });
 
-  return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name"
+  const hasAttributeIssues = Boolean(issues?.some(issue => getElementIssueDetails(issue)?.attribute === name));
+  const attributeNameClasses = {
+    'webkit-html-attribute-name': true,
+    'violating-element': hasAttributeIssues,
+  };
+
+  return html`<span class="webkit-html-attribute" jslog=${jslog}><span class=${classMap(attributeNameClasses)}
       ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)}>${
-      linkifyName && relationPromise ? Lit.Directives.until(relationPromise, name) : name}</span>${
+      linkifyName && relationPromise ? until(relationPromise, name) : name}</span>${
       hasText ?
           html`=\u200B"<span class="webkit-html-attribute-value" ${
               animateOn(Boolean(updateRecord?.isAttributeModified(name) && hasText),
@@ -726,16 +733,15 @@ function renderAttribute(
                         ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
                         ${
               valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
-                        ${linkifyValue && relationPromise ? Lit.Directives.until(relationPromise, value) : nothing}
+                        ${linkifyValue && relationPromise ? until(relationPromise, value) : nothing}
                 </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 = {
+function renderTag(node: SDK.DOMModel.DOMNode, tagName: string, isClosingTag: boolean, expanded: boolean,
+                   isDistinctTreeElement: boolean, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
+                   issues?: IssuesManager.Issue.Issue[]): Lit.LitTemplate {
+  const tagClasses = {
     'webkit-html-tag': true,
     close: isClosingTag && isDistinctTreeElement,
   };
@@ -757,14 +763,22 @@ function renderTag(
   });
 
   const tagNameClass = isClosingTag ? 'webkit-html-close-tag-name' : 'webkit-html-tag-name';
+  const hasTagIssues = !isClosingTag && Boolean(issues?.some(issue => {
+    const details = getElementIssueDetails(issue);
+    return Boolean(details && !details.attribute);
+  }));
+  const tagNameClasses = {
+    [tagNameClass]: true,
+    'violating-element': hasTagIssues,
+  };
   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} ${
+      class=${classMap(tagClasses)} ${setAriaLabel}
+      >&lt;<span class=${classMap(tagNameClasses)} jslog=${jslog || nothing} ${
       animateOn(hasUpdates, DOM_UPDATE_ANIMATION_CLASS_NAME)}>${tagString}</span>${
-      attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node)}`)}&gt;</span>\u200B`;
+      attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node, issues)}`)}&gt;</span>\u200B`;
 }
 
 function maybeRenderAdAdorner(input: ViewInput): Lit.TemplateResult|typeof nothing {
@@ -848,11 +862,12 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     input.updateRecord,
     input.onHighlightSearchResults,
     input.onExpand,
+    input.issues,
   )}</span>` : nothing}
       ${input.isHovered || input.isSelected ? html`
         <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
       ` : nothing}
-      <div class=${Lit.Directives.classMap(gutterContainerClasses)}
+      <div class=${classMap(gutterContainerClasses)}
            style="left: ${-input.indent}px"
            @click=${input.onGutterClick}>
         <devtools-icon name="dots-horizontal"></devtools-icon>
@@ -866,10 +881,14 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ${hasAdorners ? html`<div class="adorner-container ${(input.editorState) ? 'hidden' : ''}">
         ${maybeRenderAdAdorner(input)}
         ${input.showViewSourceAdorner ? html`<devtools-adorner
+          class="clickable"
+          role=button
+          tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE)}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE).track({ click: true })}
           aria-label=${i18nString(UIStrings.viewSourceCode)}
           @click=${input.onViewSourceAdornerClick}
+          @keydown=${handleAdornerKeydown(input.onViewSourceAdornerClick)}
           ${adornerRef()}>
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}</span>
         </devtools-adorner>` : nothing}
@@ -1001,7 +1020,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           </span>
         </devtools-adorner>`: nothing}
         ${input.showStartingStyleAdorner ? html`<devtools-adorner
-          class="starting-style"
+          class="starting-style clickable"
+          role=button
+          tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE}
           jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE).track({ click: true })}
           active=${input.startingStyleAdornerActive}
@@ -1035,7 +1056,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           </span>
         </devtools-adorner>`: nothing}
         ${input.showScrollSnapAdorner ? html`<devtools-adorner
-          class="scroll-snap"
+          class="scroll-snap clickable"
+          role=button
+          tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}
           jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP).track({ click: true })}
           active=${input.scrollSnapAdornerActive}
@@ -1077,7 +1100,19 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
 
 type View = typeof DEFAULT_VIEW;
 
+export interface InitialEditState {
+  attributeName?: string;
+  isNewAttribute?: boolean;
+  isProcessingInstruction?: boolean;
+  isTextNode?: boolean;
+  isEditAsHTML?: boolean;
+  editAsHTMLCallback?: (success: boolean) => void;
+}
+
 export class ElementsTreeWidget extends UI.Widget.Widget {
+  static override readonly INJECT = [IssuesManager.DOMIssuesManager.DOMIssuesManager] as const;
+  #domIssuesManager?: IssuesManager.DOMIssuesManager.DOMIssuesManager;
+
   #node!: SDK.DOMModel.DOMNode;
   isClosingTag = false;
   #expanded = false;
@@ -1087,6 +1122,8 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   disableEdits = false;
   showAIButton = false;
   isDOMNodeSelected = false;
+  initialEdit?: InitialEditState|null;
+  onInitialEditCompleted?: () => void;
 
   expand?: () => void;
   collapse?: () => void;
@@ -1096,23 +1133,18 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   childCount?: () => number;
   closingTagElement?: () => Element | null;
   updateShadowRootDepth?: (depth: number) => void;
-  computeLeftIndent?: () => number;
+  computeLeftIndent?: number|(() => number);
   setChildrenListElementVisible?: (visible: boolean) => void;
 
   findStartTagWidget?: () => ElementsTreeWidget | null;
   selectDOMNode?: (node: SDK.DOMModel.DOMNode, selectedByUser?: boolean) => void;
   revealInTopLayer?: (node: SDK.DOMModel.DOMNode) => void;
-  showContextMenu?: (event: Event) => void;
+  showContextMenu?: (event: Event, widget?: ElementsTreeWidget) => void;
   populateTreeElement?: () => Promise<void>;
-  updateNodeElementToIssue?: (nodeElement: Element, issues: IssuesManager.Issue.Issue[]) => void;
-  performCopyOrCut?: (isCut: boolean, node: SDK.DOMModel.DOMNode, isElement?: boolean) => void;
-  duplicateNode?: (node: SDK.DOMModel.DOMNode) => void;
-  pasteNode?: (node: SDK.DOMModel.DOMNode) => void;
-  canPaste?: (node: SDK.DOMModel.DOMNode) => boolean;
   toggleHideElement?: (node: SDK.DOMModel.DOMNode) => Promise<void>;
   isToggledToHidden?: (node: SDK.DOMModel.DOMNode) => boolean;
-  selectNodeAfterEdit?: (wasExpanded: boolean, error: string|null,
-                         newNode: SDK.DOMModel.DOMNode|null) => ElementsTreeWidget | null;
+  selectNodeAfterEdit?: (wasExpanded: boolean, error: string|null, newNode: SDK.DOMModel.DOMNode|null,
+                         moveDirection?: string) => void;
   runPendingUpdates?: () => void;
   focusOutline?: () => void;
   setMultilineEditing?: (multilineEditing: EditorHandles|null) => void;
@@ -1120,10 +1152,10 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #view: View;
 
-  private searchQuery: string|null;
+  #searchQuery: string|null = null;
   #expandedChildrenLimit: number;
-  private readonly decorationsThrottler: Common.Throttler.Throttler;
-  private inClipboard: boolean;
+  #decorationsThrottler = new Common.Throttler.Throttler(100);
+  inClipboard = false;
   #hovered: boolean;
   editing: EditorHandles|null;
   #editorRef?: TextEditor.TextEditor.TextEditor;
@@ -1133,8 +1165,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   #editorState: CodeMirror.EditorState|null = null;
   #editorWidth: number|null = null;
   expandAllButtonElement: UI.TreeOutline.TreeElement|null;
-  #elementIssues = new Map<string, IssuesManager.Issue.Issue>();
-  #nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue[]>();
   #highlights: Range[] = [];
 
   #adornersThrottler = new Common.Throttler.Throttler(100);
@@ -1165,6 +1195,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.#node = node;
     if (!this.isClosingTag) {
       void this.#updateAdorners();
+      this.updateDecorations();
     }
   }
 
@@ -1174,6 +1205,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   set expanded(expanded: boolean) {
     this.#expanded = expanded;
+    this.updateDecorations();
     this.requestUpdate();
   }
 
@@ -1195,6 +1227,18 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  get searchQuery(): string|null {
+    return this.#searchQuery;
+  }
+
+  set searchQuery(query: string|null) {
+    if (this.#searchQuery === query) {
+      return;
+    }
+    this.#searchQuery = query;
+    this.requestUpdate();
+  }
+
   get tagTypeContext(): TagTypeContext {
     if (this.isClosingTag) {
       return {tagType: TagType.CLOSING};
@@ -1205,13 +1249,31 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     };
   }
 
-  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+  get issues(): IssuesManager.Issue.Issue[] {
+    // The widget is currently created for non-widget ElementsTreeElement so
+    // the domIssuesManager can be empty, relying on the manual resolution.
+    if (!this.#domIssuesManager) {
+      const universe = UI.Widget.lookupUniverseForElement(this.contentElement);
+      if (universe) {
+        this.#domIssuesManager = universe.get(IssuesManager.DOMIssuesManager.DOMIssuesManager);
+        if (this.node?.id) {
+          this.#domIssuesManager.subscribeByNodeId(this.node.id, this.#onDOMIssueUpdated);
+        }
+      }
+    }
+    return this.#domIssuesManager?.issuesForNode(this.node) ?? [];
+  }
+
+  constructor(
+      element?: HTMLElement,
+      [domIssuesManager]: UI.Widget.WidgetDependencies<typeof ElementsTreeWidget>|[undefined] = [undefined],
+      view: View = DEFAULT_VIEW,
+  ) {
     super(element);
+    this.#domIssuesManager = domIssuesManager;
     this.#view = view;
 
-    this.searchQuery = null;
     this.#expandedChildrenLimit = InitialChildrenLimit;
-    this.decorationsThrottler = new Common.Throttler.Throttler(100);
 
     this.inClipboard = false;
     this.#hovered = false;
@@ -1280,6 +1342,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   #clearDOMNextUpdate = false;
 
+  override wasShown(): void {
+    super.wasShown();
+    if (!this.isClosingTag) {
+      void this.#updateAdorners();
+      this.updateDecorations();
+    }
+  }
+
   override performUpdate(): void {
     // Skip updating when in-place editing (not HTML editing indicated by the
     // editorState) is happening. Doing an update would break editing
@@ -1287,6 +1357,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     if (this.editing && !this.#editorState) {
       return;
     }
+    this.updateDecorations();
     if (this.#clearDOMNextUpdate) {
       this.#clearDOMNextUpdate = false;
       Lit.render(Lit.nothing, this.contentElement, {host: this});
@@ -1330,7 +1401,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       decorations: this.#decorations,
       descendantDecorations: this.#expanded ? [] : this.#descendantDecorations,
       decorationsTooltip: this.#decorationsTooltip,
-      indent: this.computeLeftIndent ? this.computeLeftIndent() : 0,
+      indent: this.#getLeftIndent(),
       showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !isClosingTag,
       scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
       showSlotAdorner: Boolean(this.node.assignedSlot) && !isClosingTag,
@@ -1352,7 +1423,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
           },
       topLayerIndex: this.node.topLayerIndex(),
       onViewSourceAdornerClick: this.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
-      onGutterClick: this.showContextMenu ? (event: Event) => this.showContextMenu?.(event) : () => {},
+      onGutterClick: this.showContextMenu ? (event: Event) => this.showContextMenu?.(event, this) : () => {},
       onContainerAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onContainerAdornerClick(event),
       onFlexAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onFlexAdornerClick(event),
       onGridAdornerClick: this.disableEdits ? () => {} : (event: Event) => this.#onGridAdornerClick(event),
@@ -1382,6 +1453,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       },
       editorState: this.#editorState,
       editorWidth: this.#editorWidth,
+      issues: this.issues,
     },
                output, this.contentElement);
 
@@ -1389,6 +1461,30 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     if (this.#updateRecord) {
       this.#updateRecord = null;
     }
+    if (this.#searchQuery && !this.editing) {
+      this.#highlightSearchResults();
+    } else if (!this.#searchQuery && this.#highlights.length) {
+      this.hideSearchHighlights();
+    }
+    if (this.initialEdit) {
+      const edit = this.initialEdit;
+      this.initialEdit = null;
+      this.onInitialEditCompleted?.();
+      if (edit.isEditAsHTML) {
+        this.toggleEditAsHTML(edit.editAsHTMLCallback);
+      } else if (edit.isProcessingInstruction) {
+        this.startEditingProcessingInstructionValue();
+      } else if (edit.isTextNode) {
+        const textNode = this.contentElement.querySelector('.webkit-html-text-node');
+        if (textNode) {
+          this.startEditingTextNode(textNode);
+        }
+      } else if (edit.isNewAttribute) {
+        this.addNewAttribute();
+      } else if (edit.attributeName) {
+        this.triggerEditAttribute(edit.attributeName);
+      }
+    }
   }
 
   async #onCustomElementAdornerClick(event: Event): Promise<void> {
@@ -1560,121 +1656,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  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.contentElement.querySelectorAll('.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.#recordAndNotifyIssue(attributeElement, issue);
-      }
-    }
-  }
-
-  #highlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
-    const tagElement = this.contentElement.querySelectorAll('.webkit-html-tag-name')[0];
-    tagElement.classList.add('violating-element');
-    this.#recordAndNotifyIssue(tagElement, issue);
-  }
-
-  #recordAndNotifyIssue(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.updateNodeElementToIssue?.(nodeElement, issues);
-  }
-
-  removeIssue(issue: IssuesManager.Issue.Issue): void {
-    if (!this.#elementIssues.has(issue.primaryKey())) {
-      return;
-    }
-
-    this.#removeIssueStyleAndTooltip(issue);
-    this.#elementIssues.delete(issue.primaryKey());
-  }
-
-  #removeIssueStyleAndTooltip(issue: IssuesManager.Issue.Issue): void {
-    const elementIssueDetails = getElementIssueDetails(issue);
-    if (!elementIssueDetails) {
-      return;
-    }
-
-    if (elementIssueDetails.attribute) {
-      this.#undoHighlightViolatingAttr(elementIssueDetails.attribute, issue);
-    } else {
-      this.#undoHighlightTagAsViolating(issue);
-    }
-  }
-
-  #undoHighlightViolatingAttr(name: string, issue: IssuesManager.Issue.Issue): void {
-    const violatingAttributes = this.contentElement.querySelectorAll('.webkit-html-attribute-name.violating-element');
-    for (const attributeElement of violatingAttributes) {
-      if (attributeElement.textContent === name) {
-        this.#removeFromNodeElementToIssue(attributeElement, issue);
-        if (!this.#nodeElementToIssue.has(attributeElement)) {
-          attributeElement.classList.remove('violating-element');
-        }
-      }
-    }
-  }
-
-  #undoHighlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
-    const tagElement = this.contentElement.querySelectorAll('.webkit-html-tag-name')[0];
-    if (!tagElement) {
-      return;
-    }
-
-    this.#removeFromNodeElementToIssue(tagElement, issue);
-    if (!this.#nodeElementToIssue.has(tagElement)) {
-      tagElement.classList.remove('violating-element');
-    }
-  }
-
-  #removeFromNodeElementToIssue(nodeElement: Element, issue: IssuesManager.Issue.Issue): void {
-    let issues = this.#nodeElementToIssue.get(nodeElement);
-    if (!issues) {
-      return;
-    }
-
-    issues = issues.filter(i => i !== issue);
-    if (issues.length === 0) {
-      this.#nodeElementToIssue.delete(nodeElement);
-    } else {
-      this.#nodeElementToIssue.set(nodeElement, issues);
-    }
-    this.updateNodeElementToIssue?.(nodeElement, issues);
-  }
-
   expandedChildrenLimit(): number {
     return this.#expandedChildrenLimit;
   }
@@ -1703,6 +1684,9 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
                                  this.#onPersistentGridOverlayStateChanged, this);
       this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED,
                                  this.#onPersistentScrollSnapOverlayStateChanged, this);
+      if (this.#domIssuesManager && this.node.id) {
+        this.#domIssuesManager.subscribeByNodeId(this.node.id, this.#onDOMIssueUpdated);
+      }
     }
   }
 
@@ -1771,6 +1755,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       indent: 0,
       editorState: null,
       editorWidth: null,
+      issues: [],
     },
                {}, this.contentElement);
   }
@@ -1794,8 +1779,15 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
                                   this.#onPersistentGridOverlayStateChanged, this);
     this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED,
                                   this.#onPersistentScrollSnapOverlayStateChanged, this);
+    if (this.#domIssuesManager && this.node.id) {
+      this.#domIssuesManager.unsubscribeByNodeId(this.node.id, this.#onDOMIssueUpdated);
+    }
   }
 
+  #onDOMIssueUpdated = (): void => {
+    this.performUpdate();
+  };
+
   #onScrollableFlagUpdated(): void {
     void this.#updateAdorners();
   }
@@ -1980,7 +1972,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     return UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button');
   }
 
-  private startEditing(): boolean|undefined {
+  startEditing(): boolean|undefined {
     if (!this.isDOMNodeSelected) {
       return;
     }
@@ -2339,7 +2331,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     function resize(this: ElementsTreeWidget): void {
       if (this.visibleWidth) {
-        this.#editorWidth = this.visibleWidth() - (this.computeLeftIndent ? this.computeLeftIndent() : 0) - 30;
+        this.#editorWidth = this.visibleWidth() - this.#getLeftIndent() - 30;
         this.requestUpdate();
       }
     }
@@ -2352,7 +2344,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     function dispose(this: ElementsTreeWidget): void {
-      if (!this.#editorRef) {
+      if (!this.editing && !this.#editorState) {
         return;
       }
       this.editing = null;
@@ -2378,6 +2370,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       moveDirection: string,
       ): void {
     this.editing = null;
+    this.#clearDOMNextUpdate = true;
 
     function moveToNextAttributeIfNeeded(this: ElementsTreeWidget, error?: string|null): void {
       if (error) {
@@ -2499,10 +2492,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       }
 
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
-      const newWidget = this.selectNodeAfterEdit(wasExpanded, error, newNode);
-      if (newWidget) {
-        moveToNextAttributeIfNeeded.call(newWidget);
-      }
+      this.selectNodeAfterEdit(wasExpanded, error, newNode, moveDirection);
     });
   }
 
@@ -2561,18 +2551,20 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
     this.updateDecorations();
 
-    // If there is an issue with this node, make sure to update it.
-    for (const issue of this.#elementIssues.values()) {
-      this.#applyIssueStyleAndTooltip(issue);
-    }
-
     this.#highlightSearchResults();
   }
 
+  #getLeftIndent(): number {
+    if (typeof this.computeLeftIndent === 'function') {
+      return this.computeLeftIndent();
+    }
+    return this.computeLeftIndent ?? 0;
+  }
+
   updateDecorations(): void {
     // Important to keep the entire tree node row as a clickable area for that
     // node.
-    this.element.style.setProperty('--indent', (this.computeLeftIndent ? this.computeLeftIndent() : 0) + 'px');
+    this.element.style.setProperty('--indent', this.#getLeftIndent() + 'px');
 
     if (this.isClosingTag) {
       return;
@@ -2582,7 +2574,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       return;
     }
 
-    void this.decorationsThrottler.schedule(this.#updateDecorations.bind(this));
+    void this.#decorationsThrottler.schedule(this.#updateDecorations.bind(this));
   }
 
   #updateDecorations(): Promise<void> {
@@ -2624,15 +2616,23 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     return Promise.all(promises).then(updateDecorationsUI.bind(this));
 
     function updateDecorationsUI(this: ElementsTreeWidget): void {
-      this.#decorations = decorations;
-      this.#descendantDecorations = descendantDecorations;
+      if (!this.isShowing()) {
+        return;
+      }
 
       if (!decorations.length && !descendantDecorations.length) {
-        this.#decorationsTooltip = '';
-        this.requestUpdate();
+        if (this.#decorations.length || this.#descendantDecorations.length || this.#decorationsTooltip) {
+          this.#decorations = [];
+          this.#descendantDecorations = [];
+          this.#decorationsTooltip = '';
+          this.requestUpdate();
+        }
         return;
       }
 
+      this.#decorations = decorations;
+      this.#descendantDecorations = descendantDecorations;
+
       const tooltip: string[] = [];
       for (const decoration of decorations) {
         tooltip.push(decoration.title);
@@ -2695,53 +2695,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     void node.getOuterHTML().then(this.startEditingAsHTML.bind(this, commitChange, disposeCallback));
   }
 
-  copyCSSPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(cssPath(this.node, true));
-  }
-
-  copyJSPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(jsPath(this.node, true));
-  }
-
-  copyXPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.node, true));
-  }
-
-  copyFullXPath(): void {
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(xPath(this.node, false));
-  }
-
-  async copyStyles(): Promise<void> {
-    const node = this.node;
-    const cssModel = node.domModel().cssModel();
-    const cascade = await cssModel.cachedMatchedCascadeForNode(node);
-    if (!cascade) {
-      return;
-    }
-
-    const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
-    const lines: string[] = [];
-    for (const style of cascade.nodeStyles().reverse()) {
-      for (const property of style.leadingProperties()) {
-        if (!property.parsedOk || property.disabled || !property.activeInStyle() || property.implicit) {
-          continue;
-        }
-        if (cascade.isInherited(style) && !SDK.CSSMetadata.cssMetadata().isPropertyInherited(property.name)) {
-          continue;
-        }
-        if (style.parentRule?.isUserAgent()) {
-          continue;
-        }
-        if (cascade.propertyState(property) !== SDK.CSSMatchedStyles.PropertyState.ACTIVE) {
-          continue;
-        }
-        lines.push(`${indent}${property.name}: ${property.value};`);
-      }
-    }
-
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(lines.join('\n'));
-  }
-
   #highlightSearchResults(): void {
     this.hideSearchHighlights();
 
@@ -2859,7 +2812,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     };
   }
 
-  constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
+  constructor(
+      node: SDK.DOMModel.DOMNode,
+      isClosingTag?: boolean,
+  ) {
     super();
     this.nodeInternal = node;
     this.#isClosingTag = Boolean(isClosingTag);
@@ -2874,6 +2830,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.widgetWrapper = document.createElement('div');
     this.widgetWrapper.style.display = 'contents';
     this.title = this.widgetWrapper;
+    this.listItemElement.draggable = true;
     this.widget = new ElementsTreeWidget();
     this.widget.isClosingTag = this.#isClosingTag;
     this.widget.node = this.nodeInternal;
@@ -2942,16 +2899,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.widget.hideSearchHighlights();
   }
   copyStyles(): Promise<void> {
-    return this.widget.copyStyles();
-  }
-  addIssue(issue: IssuesManager.Issue.Issue): void {
-    this.widget.addIssue(issue);
-  }
-  get issuesByNodeElement(): Map<Element, IssuesManager.Issue.Issue[]> {
-    return this.widget.issuesByNodeElement;
-  }
-  removeIssue(issue: IssuesManager.Issue.Issue): void {
-    this.widget.removeIssue(issue);
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    return outline?.domTreeWidget?.copyStyles(this.nodeInternal) ?? Promise.resolve();
   }
   setInClipboard(inClipboard: boolean): void {
     this.widget.setInClipboard(inClipboard);
@@ -2972,6 +2921,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   highlightAttribute(name: string): void {
     this.widget.highlightAttribute(name);
   }
+  startEditing(): boolean|undefined {
+    return this.widget.startEditing();
+  }
   startEditingAttribute(attribute: Element, elementForSelection: Element): boolean {
     return this.widget.startEditingAttribute(attribute, elementForSelection);
   }
@@ -2982,16 +2934,20 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.widget.editAsHTML();
   }
   copyCSSPath(): void {
-    this.widget.copyCSSPath();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    outline?.domTreeWidget?.copyCSSPath(this.nodeInternal);
   }
   copyJSPath(): void {
-    this.widget.copyJSPath();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    outline?.domTreeWidget?.copyJSPath(this.nodeInternal);
   }
   copyXPath(): void {
-    this.widget.copyXPath();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    outline?.domTreeWidget?.copyXPath(this.nodeInternal);
   }
   copyFullXPath(): void {
-    this.widget.copyFullXPath();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    outline?.domTreeWidget?.copyFullXPath(this.nodeInternal);
   }
   hasEditableNode(): boolean {
     return this.widget.hasEditableNode();
@@ -3036,21 +2992,17 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.widget.revealInTopLayer = node => outline.revealInTopLayer(node);
       this.widget.showContextMenu = event => void outline.showContextMenu(this, event);
       this.widget.populateTreeElement = async () => await outline.populateTreeElement(this);
-      this.widget.updateNodeElementToIssue = (el, issues) => outline.updateNodeElementToIssue(el, issues);
-      this.widget.performCopyOrCut = (isCut, node, isElement) => outline.performCopyOrCut(isCut, node, isElement);
-      this.widget.duplicateNode = node => outline.duplicateNode(node);
-      this.widget.pasteNode = node => outline.pasteNode(node);
-      this.widget.canPaste = node => outline.canPaste(node);
       this.widget.toggleHideElement = node => outline.toggleHideElement(node);
       this.widget.isToggledToHidden = node => outline.isToggledToHidden(node);
-      this.widget.selectNodeAfterEdit = (wasExpanded, error, newNode) => {
-        const newTreeItem = outline.selectNodeAfterEdit(wasExpanded, error, newNode);
-        return newTreeItem?.widget ?? null;
+      this.widget.selectNodeAfterEdit = (wasExpanded, error, newNode, moveDirection) => {
+        outline.domTreeWidget?.selectNodeAfterEdit(wasExpanded, error, newNode, moveDirection);
       };
       this.widget.runPendingUpdates = () => outline.runPendingUpdates();
       this.widget.focusOutline = () => outline.focus();
-      this.widget.setMultilineEditing = multilineEditing => outline.setMultilineEditing(multilineEditing);
-      this.widget.visibleWidth = () => outline.visibleWidth();
+      this.widget.setMultilineEditing = multilineEditing => {
+        outline.domTreeWidget?.setMultilineEditing(multilineEditing);
+      };
+      this.widget.visibleWidth = () => outline.domTreeWidget?.visibleWidth ?? outline.visibleWidth();
     }
   }
 
@@ -3110,6 +3062,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   override onenter(): boolean {
     this.#syncOutlineProperties();
+    const outline = this.treeOutline as ElementsTreeOutline | null;
+    if (outline?.domTreeWidget) {
+      outline.domTreeWidget.startEditing(this.nodeInternal);
+      return true;
+    }
     return this.widget.onenter();
   }