chrome-devtools-frontend 1.0.1697595 → 1.0.1697998

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -337,7 +337,9 @@ function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiC
     return new AccessibilityAgentMarkdownRenderer(mainDocumentURL);
   }
 
-  return new MarkdownRendererWithCodeBlock();
+  return new MarkdownRendererWithCodeBlock({
+    getEstablishedOrigin: () => conversation?.origin,
+  });
 }
 
 interface ToolbarViewInput {

package/front_end/panels/ai_assistance/components/MarkdownRendererWithCodeBlock.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Logs from '../../../models/logs/logs.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
@@ -12,7 +13,18 @@ import * as Lit from '../../../ui/lit/lit.js';
 
 const {html} = Lit;
 
+export interface MarkdownRendererWithCodeBlockOptions {
+  /**
+   * Retrieves the established origin locked for the active conversation.
+   * Required to authorize #file-<id> links and prevent cross-origin file leakage.
+   * When omitted or unauthorized, file links safely render as plain inert text.
+   */
+  getEstablishedOrigin?: () => SDK.SecurityOrigin.SecurityOrigin | undefined;
+}
+
 /**
+ * Markdown renderer for AI assistance conversations.
+ *
  * The model returns multiline code blocks in an erroneous way with the language being in new line.
  * This renderer takes that into account and correctly updates the parsed multiline token with the language
  * correctly identified and stripped from the content.
@@ -23,8 +35,13 @@ const {html} = Lit;
  * color: red;
  * }
  * ```
- **/
+ *
+ * Also handles linkifying DevTools internal resource links (#req- and origin-locked #file-).
+ */
 export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  constructor(private readonly options: MarkdownRendererWithCodeBlockOptions = {}) {
+    super();
+  }
   #revealableLink(revealable: unknown, label: string): Lit.LitTemplate {
     return html`<devtools-link @click=${(e: Event) => {
       e.preventDefault();
@@ -48,13 +65,16 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
       return html`${fallbackText}`;
     }
     if (href.startsWith('#file-')) {
-      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
-          file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
-              Number(href.substring(6)));
+      const fileId = Number(href.substring(6));
+      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getSourceById(
+          fileId,
+          this.options.getEstablishedOrigin?.(),
+      );
 
       if (file) {
         return this.#revealableLink(file, file.name());
       }
+      // Fall back to plain text to prevent rendering unauthorized or unverified links.
       return html`${fallbackText}`;
     }
     return null;
@@ -78,7 +98,7 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
 
     if (token.type === 'codespan') {
       // LLM likes outputting the link inside a codespan block.
-      // Remove the codespan and render the link directly
+      // Remove the codespan and render the link directly.
       const matches = token.text.match(/^\[(.*)\]\((.+)\)$/);
       if (matches?.[2]) {
         const link = this.#renderLink(

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -20,8 +20,6 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.global-listeners')}`);
 
     this.eventListenersView = new EventListeners.EventListenersView.EventListenersView();
-    this.eventListenersView.changeCallback = this.requestUpdate.bind(this);
-    this.eventListenersView.enableDefaultTreeFocus = true;
     this.eventListenersView.show(this.element);
     this.setDefaultFocusedChild(this.eventListenersView);
     this.requestUpdate();
@@ -57,7 +55,8 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
         windowObjects.push(result.object);
       }
     }
-    await this.eventListenersView.addObjects(windowObjects);
+    this.eventListenersView.objects = windowObjects;
+    await this.eventListenersView.updateComplete;
   }
 
   override wasShown(): 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;
 
@@ -770,14 +799,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 +811,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`;
@@ -1102,7 +1128,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 +1153,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;
@@ -1370,13 +1404,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 +1507,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   }
 
   #clearDOMNextUpdate = false;
+
   #isBound = false;
 
   override wasShown(): void {
@@ -2448,7 +2495,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 +2643,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 +2714,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 +2725,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 +2884,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 +2893,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 +2921,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);
+        });
       }
     };