chrome-devtools-frontend 1.0.1697595 → 1.0.1698733

package/front_end/panels/common/commentThreadWidget.css

@@ -0,0 +1,173 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  .comment-thread-widget {
+    display: flex;
+    width: var(--sys-size-30);
+    padding: var(--sys-size-8);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--sys-size-4);
+    border-radius: var(--sys-shape-corner-medium);
+    background: var(--sys-color-base);
+    box-shadow: var(--sys-elevation-level2);
+    cursor: default;
+  }
+
+  .comment-thread-widget.submitted {
+    background: var(--sys-color-surface2);
+  }
+
+  .header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .sent-status {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-2);
+    font-size: var(--sys-typescale-body5-size);
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .check-icon {
+    width: var(--sys-size-7);
+    height: var(--sys-size-7);
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .selected-item {
+    display: flex;
+    height: calc(var(--sys-size-8) + var(--sys-size-2));
+    padding: var(--sys-size-2) var(--sys-size-4) var(--sys-size-2) var(--sys-size-3);
+    align-items: center;
+    border-radius: var(--sys-shape-corner-extra-small);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+    background: var(--sys-color-base);
+    font-family: var(--source-code-font-family);
+    font-size: var(--monospace-font-size);
+    color: var(--sys-color-token-tag);
+    overflow: hidden;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .comment-text {
+    width: 100%;
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body4-size);
+    color: var(--sys-color-on-surface-subtle);
+    line-height: var(--sys-size-9);
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  .agent-response {
+    display: flex;
+    gap: var(--sys-size-2);
+    margin-top: var(--sys-size-4);
+    width: 100%;
+    align-items: flex-start;
+  }
+
+  .elbow {
+    width: var(--sys-size-6);
+    height: var(--sys-size-6);
+    margin-left: var(--sys-size-3);
+    margin-right: var(--sys-size-3);
+    border-left: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+    border-bottom-left-radius: var(--sys-size-6);
+    flex-shrink: 0;
+  }
+
+  .response-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+
+    --code-block-background-color: var(--sys-color-base);
+    --code-background-color: var(--sys-color-base);
+  }
+
+  .response-header {
+    font-weight: bold;
+    margin-bottom: var(--sys-size-2);
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body5-size);
+    line-height: var(--sys-size-8);
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .response-content devtools-markdown-view {
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body4-size);
+    color: var(--sys-color-on-surface-subtle);
+    line-height: var(--sys-size-9);
+  }
+
+  .input {
+    height: auto;
+    min-height: var(--sys-size-14);
+    max-height: var(--sys-size-27);
+    field-sizing: content;
+    resize: none;
+    scrollbar-width: none;
+    padding: var(--sys-size-5) var(--sys-size-8);
+    border-radius: var(--sys-shape-corner-small);
+    border: var(--sys-size-1) solid var(--sys-color-outline);
+    background: var(--sys-color-base);
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body5-size);
+    line-height: var(--sys-size-9);
+    letter-spacing: 0;
+  }
+
+  .input::placeholder {
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .footer {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--sys-size-5);
+  }
+
+  .info-icon {
+    color: var(--sys-color-on-surface-subtle);
+    cursor: pointer;
+  }
+
+  .info-tooltip-container {
+    max-width: var(--sys-size-28);
+    padding: var(--sys-size-4) var(--sys-size-5);
+  }
+
+  .tooltip-link {
+    display: block;
+    margin-top: var(--sys-size-4);
+    color: var(--sys-color-primary);
+    padding-left: 0;
+    background: none;
+    border: none;
+    font: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .selected-item-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}

package/front_end/{ui/comments → panels/common}/commentsOverlay.css

@@ -10,7 +10,8 @@
     position: fixed;
     inset: 0;
     pointer-events: none;
-    /* Needs to be above regular panel widgets (e.g. flame chart at z-index 2000) but below floating glass panes (which start at z-index 3000). */
+    /* Needs to be above regular panel widgets (e.g. flame chart at z-index 2000)
+       but below floating glass panes (which start at z-index 3000). */
     z-index: 2500;
     overflow: hidden;
     width: 100vw;
@@ -66,4 +67,10 @@
     background-color: color-mix(in srgb, var(--sys-color-primary), transparent 85%);
     box-sizing: border-box;
   }
+
+  .comment-popup-widget {
+    position: absolute;
+    z-index: 2501;
+    pointer-events: auto;
+  }
 }

package/front_end/{ui/comments/comments-meta.ts → panels/common/common-meta.ts}

@@ -6,7 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type * as Comments from './comments.js';
+import type * as Common from './common.js';
 
 const UIStrings = {
   /**
@@ -22,16 +22,16 @@ const UIStrings = {
    */
   comments: 'Comments',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('ui/comments/comments-meta.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/common/common-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-let loadedCommentsModule: (typeof Comments|undefined);
+let loadedCommonModule: (typeof Common|undefined);
 
-async function loadCommentsModule(): Promise<typeof Comments> {
-  if (!loadedCommentsModule) {
-    loadedCommentsModule = await import('./comments.js');
+async function loadCommonModule(): Promise<typeof Common> {
+  if (!loadedCommonModule) {
+    loadedCommonModule = await import('./common.js');
   }
-  return loadedCommentsModule;
+  return loadedCommonModule;
 }
 
 function isCommentsEnabled(config?: Root.Runtime.HostConfig): boolean {
@@ -46,8 +46,8 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showComments),
   title: i18nLazyString(UIStrings.comments),
   async loadView(universe) {
-    const Comments = await loadCommentsModule();
-    return new Comments.CommentsStatusBarPill.CommentsStatusBarPill(undefined, [universe.commentManager]);
+    const Common = await loadCommonModule();
+    return new Common.CommentsStatusBarPill.CommentsStatusBarPill(undefined, [universe.commentManager]);
   },
 });
 
@@ -59,8 +59,8 @@ UI.ActionRegistration.registerActionExtension({
   toggleable: true,
   condition: isCommentsEnabled,
   async loadActionDelegate() {
-    const Comments = await loadCommentsModule();
-    return new Comments.CommentsOverlayWidget.ActionDelegate();
+    const Common = await loadCommonModule();
+    return new Common.CommentsOverlayWidget.ActionDelegate();
   },
 });
 

package/front_end/panels/common/common.ts

@@ -13,3 +13,6 @@ export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
 export * as ExtensionIframe from './ExtensionView.js';
+export * as CommentThreadWidget from './CommentThreadWidget.js';
+export * as CommentsOverlayWidget from './CommentsOverlayWidget.js';
+export * as CommentsStatusBarPill from './CommentsStatusBarPill.js';

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -20,7 +20,7 @@ const {Directives: {ref}, html, render} = Lit;
 
 export class AdoptedStyleSheetSetTreeElement extends UI.TreeOutline.TreeElement {
   constructor(readonly adoptedStyleSheets: SDK.DOMModel.AdoptedStyleSheet[]) {
-    super('');
+    super('', undefined, 'adopted-style-sheets');
     const documentElement = this.listItemElement.createChild('span');
     UI.UIUtils.createTextChild(documentElement, '#adopted-style-sheets');
     for (const adoptedStyleSheet of adoptedStyleSheets) {
@@ -33,7 +33,7 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
   private eventListener: Common.EventTarget.EventDescriptor|null = null;
 
   constructor(readonly adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet) {
-    super('');
+    super('', undefined, 'adopted-style-sheet');
     const header = adoptedStyleSheet.cssModel.styleSheetHeaderForId(adoptedStyleSheet.id);
     if (header) {
       AdoptedStyleSheetTreeElement.createContents(header, this);
@@ -79,7 +79,7 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
   private readonly widgetWrapper: HTMLElement;
 
   constructor(styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader) {
-    super('');
+    super('', undefined, 'adopted-style-sheet-contents');
     this.widgetWrapper = document.createElement('div');
     this.widgetWrapper.style.display = 'contents';
     this.title = this.widgetWrapper;

package/front_end/panels/elements/ElementsPanel.ts

@@ -228,6 +228,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     return this.#domTreeWidget.getTreeOutlineForTesting();
   }
 
+  getDOMTreeWidgetForTesting(): DOMTreeWidget {
+    return this.#domTreeWidget;
+  }
+
   constructor(
       targetManager?: SDK.TargetManager.TargetManager,
       settings?: Common.Settings.Settings,
@@ -1300,7 +1304,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   toggleHideElement(node: SDK.DOMModel.DOMNode): void {
-    this.#domTreeWidget.toggleHideElement(node);
+    void this.#domTreeWidget.toggleHideElement(node);
   }
 
   toggleEditAsHTML(node: SDK.DOMModel.DOMNode): void {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -48,7 +48,8 @@ import * as Protocol from '../../generated/protocol.js';
 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 * as ChangeTracker from '../../models/change_tracker/change_tracker.js';
+import * as Elements from '../../models/elements/elements.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';
@@ -65,6 +66,7 @@ import * as PanelsCommon from '../common/common.js';
 import * as Media from '../media/media.js';
 
 import * as ElementsComponents from './components/components.js';
+import {cssPath} from './DOMPath.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
@@ -72,6 +74,33 @@ import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutlin
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
+/**
+ * Returns the CSS selector of `node` that is used as the text signature of the anchor a change is
+ * recorded on, or `undefined` if `tracker` is absent or not recording changes.
+ *
+ * Resolving the selector walks the ancestor chain and scans sibling lists, so it is skipped
+ * entirely while change tracking is disabled.
+ */
+export function buildChangeSelector(tracker: ChangeTracker.ChangeTracker.ChangeTracker|undefined,
+                                    node: SDK.DOMModel.DOMNode): string|undefined {
+  if (!tracker?.isTracking) {
+    return undefined;
+  }
+  if (node.nodeType() === Node.ELEMENT_NODE) {
+    const selector = cssPath(node, true);
+    if (selector) {
+      return selector;
+    }
+  } else if (node.parentNode && node.parentNode.nodeType() === Node.ELEMENT_NODE) {
+    const selector = cssPath(node.parentNode, true);
+    if (selector) {
+      return selector;
+    }
+  }
+
+  return undefined;
+}
+
 const {html, nothing, render, Directives: {classMap, ref, repeat, until}} = Lit;
 const {animateOn} = UI.UIUtils;
 
@@ -325,6 +354,7 @@ export interface ViewInput {
   descendantDecorations: Decoration[];
   decorationsTooltip: string;
   indent: number;
+  renderSelection?: boolean;
 
   editorState: CodeMirror.EditorState|null;
   editorWidth: number|null;
@@ -770,14 +800,6 @@ function renderTag(node: SDK.DOMModel.DOMNode, tagName: string, isClosingTag: bo
     hasUpdates = hasUpdates || (!expanded && updateRecord.hasChangedChildren());
   }
 
-  // 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 hasTagIssues = !isClosingTag && Boolean(issues?.some(issue => {
     const details = getElementIssueDetails(issue);
@@ -790,8 +812,13 @@ function renderTag(node: SDK.DOMModel.DOMNode, tagName: string, isClosingTag: bo
   const tagString = (isClosingTag ? '/' : '') + tagName;
   const jslog = !isClosingTag ? VisualLogging.value('tag-name').track({change: true, dblclick: true}) : '';
 
+  const ariaLabel = isClosingTag ?
+      `</${tagName}>` :
+      `<${tagName}${
+          attributes.map(attr => (attr.value ? ` ${attr.name}="${attr.value}"` : ` ${attr.name}`)).join('')}>`;
+
   return html`<span
-      class=${classMap(tagClasses)} ${setAriaLabel}
+      class=${classMap(tagClasses)} aria-label=${ariaLabel}
       >&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, issues)}`)}&gt;</span>\u200B`;
@@ -880,7 +907,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     input.onExpand,
     input.issues,
   )}</span>` : nothing}
-      <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
+      ${input.renderSelection !== false ? html`<div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>` : nothing}
       <div class=${classMap(gutterContainerClasses)}
            style="left: ${-input.indent}px"
            @click=${input.onGutterClick}>
@@ -1102,7 +1129,10 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         if (event.key === 'Escape') {
           event.consume(true);
         }
-      }} class="source-code elements-tree-editor" style="width: ${input.editorWidth ?? 0}px;">
+      }}
+      @mousedown=${(event: Event) => event.stopPropagation()}
+      @click=${(event: Event) => event.stopPropagation()}
+      class="source-code elements-tree-editor" style="width: ${input.editorWidth ?? 0}px;">
         <devtools-text-editor .state=${input.editorState} ${ref(el => {
           output.editorRef = el as TextEditor.TextEditor.TextEditor;
         })}></devtools-text-editor>
@@ -1124,9 +1154,14 @@ export interface InitialEditState {
 }
 
 export class ElementsTreeWidget extends UI.Widget.Widget {
-  static override readonly INJECT: readonly[typeof IssuesManager.DOMIssuesManager.DOMIssuesManager] =
-      [IssuesManager.DOMIssuesManager.DOMIssuesManager] as const;
+  static override readonly INJECT: readonly[typeof IssuesManager.DOMIssuesManager.DOMIssuesManager,
+                                            typeof ChangeTracker.ChangeTracker.ChangeTracker] =
+      [
+        IssuesManager.DOMIssuesManager.DOMIssuesManager,
+        ChangeTracker.ChangeTracker.ChangeTracker,
+      ] as const;
   #domIssuesManager?: IssuesManager.DOMIssuesManager.DOMIssuesManager;
+  #changeTracker?: ChangeTracker.ChangeTracker.ChangeTracker;
 
   #node!: SDK.DOMModel.DOMNode;
   #eventsBound = false;
@@ -1137,6 +1172,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   isXMLMimeType = false;
   disableEdits = false;
   showAIButton = false;
+  renderSelection = true;
   isDOMNodeSelected = false;
   initialEdit?: InitialEditState|null;
   onInitialEditCompleted?: () => void;
@@ -1370,13 +1406,25 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     return this.#domIssuesManager?.issuesForNode(this.node) ?? [];
   }
 
+  get changeTracker(): ChangeTracker.ChangeTracker.ChangeTracker|undefined {
+    // The widget is currently created for non-widget ElementsTreeElement so
+    // the changeTracker can be empty, relying on the manual resolution.
+    // Note that this only works once the widget is attached to the DOM.
+    this.#changeTracker ??=
+        UI.Widget.lookupUniverseForElement(this.contentElement)?.get(ChangeTracker.ChangeTracker.ChangeTracker);
+    return this.#changeTracker;
+  }
+
   constructor(
       element?: HTMLElement,
-      [domIssuesManager]: UI.Widget.WidgetDependencies<typeof ElementsTreeWidget>|[undefined] = [undefined],
+      [domIssuesManager, changeTracker]:
+          UI.Widget.WidgetDependencies<typeof ElementsTreeWidget>|[IssuesManager.DOMIssuesManager.DOMIssuesManager?,
+                                                                   ChangeTracker.ChangeTracker.ChangeTracker?] = [],
       view: View = DEFAULT_VIEW,
   ) {
     super(element);
     this.#domIssuesManager = domIssuesManager;
+    this.#changeTracker = changeTracker;
     this.#view = view;
 
     this.#expandedChildrenLimit = InitialChildrenLimit;
@@ -1461,6 +1509,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   #clearDOMNextUpdate = false;
+
   #isBound = false;
 
   override wasShown(): void {
@@ -1537,6 +1586,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       descendantDecorations: this.#expanded ? [] : this.#descendantDecorations,
       decorationsTooltip: this.#decorationsTooltip,
       indent: this.#getLeftIndent(),
+      renderSelection: this.renderSelection,
       showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !isClosingTag,
       scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
       showSlotAdorner: Boolean(this.node.assignedSlot) && !isClosingTag,
@@ -2448,7 +2498,8 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
             }
             // The relatedTarget is null when no element gains focus, e.g. switching windows.
             const relatedTarget = (event.relatedTarget as Node | null);
-            if (relatedTarget && !relatedTarget.isSelfOrDescendant(this.#editorRef)) {
+            if (relatedTarget && !relatedTarget.isSelfOrDescendant(this.#editorRef) &&
+                !relatedTarget.isSelfOrDescendant(this.contentElement)) {
               this.editing?.commit();
             }
           },
@@ -2595,10 +2646,16 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     if (attributeName !== null && (attributeName.trim() || newText.trim()) && oldText !== newText) {
+      const edit = {attributeName, oldText, newText};
       this.node.setAttribute(attributeName, newText, (error: string|null) => {
+        if (!error) {
+          const changeTracker = this.changeTracker;
+          Elements.DOMChanges.trackAttributeEdit(changeTracker, this.node,
+                                                 buildChangeSelector(changeTracker, this.node), edit);
+          Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
+        }
         moveToNextAttributeIfNeeded.call(this, error);
       });
-      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
       return;
     }
 
@@ -2660,6 +2717,9 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       }
 
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED);
+      const changeTracker = this.changeTracker;
+      Elements.DOMChanges.trackTagNameEdit(changeTracker, newNode, buildChangeSelector(changeTracker, newNode),
+                                           oldText ?? tagName ?? '', newText);
       if (this.selectNodeAfterEdit) {
         this.selectNodeAfterEdit(wasExpanded, error, newNode, moveDirection);
       }
@@ -2668,8 +2728,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
   private textNodeEditingCommitted(textNode: SDK.DOMModel.DOMNode, _element: Element, newText: string): void {
     this.editing = null;
+    const oldValue = textNode.nodeValue() ?? '';
 
-    function callback(this: ElementsTreeWidget): void {
+    function callback(this: ElementsTreeWidget, error?: string|null): void {
+      if (!error && oldValue !== newText) {
+        const changeTracker = this.changeTracker;
+        Elements.DOMChanges.trackTextNodeEdit(changeTracker, textNode, buildChangeSelector(changeTracker, textNode),
+                                              oldValue, newText);
+      }
       this.#clearDOMNextUpdate = true;
       this.updateTitle();
     }
@@ -2821,7 +2887,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   async remove(): Promise<void> {
     if (this.isToggledToHidden?.(this.node)) {
       // Unhide the node before removing. This avoids inconsistent state if the node is restored via undo.
-      await this.toggleHideElement?.(this.node);
+      await this.node.toggleHideElement();
     }
     if (this.node.pseudoType()) {
       return;
@@ -2830,7 +2896,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     if (!this.node.parentNode || this.node.parentNode.nodeType() === Node.DOCUMENT_NODE) {
       return;
     }
-    void this.node.removeNode();
+    // The selector has to be resolved before the node is detached from the tree.
+    const changeTracker = this.changeTracker;
+    const selector = buildChangeSelector(changeTracker, this.node);
+    await this.node.removeNode((err: string|null) => {
+      if (!err) {
+        Elements.DOMChanges.trackNodeRemoval(changeTracker, this.node, selector);
+      }
+    });
   }
 
   toggleEditAsHTML(callback?: ((arg0: boolean) => void), startEditing?: boolean): void {
@@ -2851,7 +2924,15 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     const commitChange = (initialValue: string, value: string): void => {
       if (initialValue !== value) {
-        node.setOuterHTML(value, selectNode);
+        // The selector has to be resolved before the node is detached from the tree.
+        const changeTracker = this.changeTracker;
+        const selector = buildChangeSelector(changeTracker, node);
+        node.setOuterHTML(value, (error: string|null) => {
+          if (!error) {
+            Elements.DOMChanges.trackHTMLEdit(changeTracker, node, selector, initialValue, value);
+          }
+          selectNode(error);
+        });
       }
     };