chrome-devtools-frontend 1.0.1515988 → 1.0.1518653

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -1,14 +1,15 @@
 // Copyright 2016 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import accessibilityPropertiesStyles from './accessibilityProperties.css.js';
 import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 import {ariaMetadata} from './ARIAMetadata.js';
 
@@ -24,214 +25,135 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/ARIAAttributesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {render, html} = Lit;
+
+interface ViewInput {
+  propertyCompletions: Map<SDK.DOMModel.Attribute, string[]>;
+  onStartEditing: (attribute: SDK.DOMModel.Attribute) => void;
+  onCommitEditing: (attribute: SDK.DOMModel.Attribute, result: string) => void;
+  onCancelEditing: (attribute: SDK.DOMModel.Attribute) => void;
+  attributeBeingEdited: SDK.DOMModel.Attribute|null;
+  attributes: SDK.DOMModel.Attribute[];
+}
+
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const MAX_CONTENT_LENGTH = 10000;
+
+  const onStartEditing = (attribute: SDK.DOMModel.Attribute, e: MouseEvent): void => {
+    e.consume(true);
+    input.onStartEditing(attribute);
+  };
+
+  const propertyCompletions = (attribute: SDK.DOMModel.Attribute): Lit.LitTemplate => {
+    const values = input.propertyCompletions.get(attribute);
+    if (!values?.length) {
+      return Lit.nothing;
+    }
+
+    return html`<datalist id=completions>
+      ${values.map(value => html`<option>${value}</option>`)}
+    </datalist>`;
+  };
+
+  render(
+      // clang-format off
+      input.attributes.length === 0 ?
+         html`
+          <style>${accessibilityPropertiesStyles}</style>
+          <devtools-widget
+            .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget,
+                                                   {text: i18nString(UIStrings.noAriaAttributes)})}
+            class="gray-info-message info-message-overflow"></devtools-widget>` :
+         html`<devtools-tree
+           hide-overflow
+           .template=${html`
+             <ul role="tree">
+              ${input.attributes?.map(attribute => html`
+                <li role="treeitem">
+                  <style>${accessibilityPropertiesStyles}</style>
+                  <span class="ax-name monospace" @mousedown=${onStartEditing.bind(null, attribute)}>
+                    ${attribute.name}
+                  </span>
+                  <span class="separator" @mousedown=${onStartEditing.bind(null, attribute)}>${':\xA0'}</span>
+                  <devtools-prompt
+                    completions=completions
+                    class="monospace"
+                    @mousedown=${onStartEditing.bind(null, attribute)}
+                    .completionTimeout=${0}
+                    ?editing=${input.attributeBeingEdited === attribute}
+                    @commit=${(e: UI.TextPrompt.TextPromptElement.CommitEvent) =>
+                      input.onCommitEditing(attribute, e.detail)}
+                    @cancel=${() => input.onCancelEditing(attribute)}>
+                      ${Platform.StringUtilities.trimMiddle(attribute.value, MAX_CONTENT_LENGTH)}
+                      ${propertyCompletions(attribute)}
+                  </devtools-prompt>
+                </li>`)}
+             </ul>
+           `}></devtools-tree>`,
+      // clang-format on
+      target);
+};
+
 export class ARIAAttributesPane extends AccessibilitySubPane {
-  private readonly noPropertiesInfo: Element;
-  private readonly treeOutline: UI.TreeOutline.TreeOutline;
+  readonly #view: View;
+  #attributeBeingEdited: SDK.DOMModel.Attribute|null = null;
 
-  constructor() {
+  constructor(view = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.ariaAttributes),
       viewId: 'aria-attributes',
       jslog: `${VisualLogging.section('aria-attributes')}`,
     });
 
-    this.noPropertiesInfo = this.createInfo(i18nString(UIStrings.noAriaAttributes));
-    this.treeOutline = this.createTreeOutline();
+    this.#view = view;
   }
 
   override setNode(node: SDK.DOMModel.DOMNode|null): void {
     super.setNode(node);
-    this.treeOutline.removeChildren();
-    if (!node) {
-      return;
-    }
-    const target = node.domModel().target();
-    const attributes = node.attributes();
-    for (let i = 0; i < attributes.length; ++i) {
-      const attribute = attributes[i];
-      if (!this.isARIAAttribute(attribute)) {
-        continue;
-      }
+    this.requestUpdate();
+  }
 
-      this.treeOutline.appendChild(new ARIAAttributesTreeElement(this, attribute, target));
-    }
+  override performUpdate(): void {
+    const onStartEditing = (attribute: SDK.DOMModel.Attribute): void => {
+      this.#attributeBeingEdited = attribute;
+      this.requestUpdate();
+    };
+    const onCancelEditing = (attribute: SDK.DOMModel.Attribute): void => {
+      if (attribute === this.#attributeBeingEdited) {
+        this.#attributeBeingEdited = null;
+      }
+      this.requestUpdate();
+    };
+
+    const onCommitEditing = (attribute: SDK.DOMModel.Attribute, result: string): void => {
+      // Make the changes to the attribute
+      const node = this.node();
+      if (node && attribute.value !== result) {
+        node.setAttributeValue(attribute.name, result);
+      }
+      if (attribute === this.#attributeBeingEdited) {
+        this.#attributeBeingEdited = null;
+      }
+      this.requestUpdate();
+    };
 
-    const foundAttributes = (this.treeOutline.rootElement().childCount() !== 0);
-    this.noPropertiesInfo.classList.toggle('hidden', foundAttributes);
-    this.treeOutline.element.classList.toggle('hidden', !foundAttributes);
-  }
+    const attributes = this.node()?.attributes()?.filter(attribute => this.isARIAAttribute(attribute)) ?? [];
+    const propertyCompletions =
+        new Map(attributes.map(attribute => [attribute, ariaMetadata().valuesForProperty(attribute.name)]));
 
-  getTreeOutlineForTesting(): Readonly<UI.TreeOutline.TreeOutline>|undefined {
-    return this.treeOutline;
+    const input: ViewInput = {
+      attributeBeingEdited: this.#attributeBeingEdited,
+      attributes,
+      onStartEditing,
+      onCommitEditing,
+      onCancelEditing,
+      propertyCompletions,
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
   private isARIAAttribute(attribute: SDK.DOMModel.Attribute): boolean {
     return SDK.DOMModel.ARIA_ATTRIBUTES.has(attribute.name);
   }
 }
-
-export class ARIAAttributesTreeElement extends UI.TreeOutline.TreeElement {
-  private readonly parentPane: ARIAAttributesPane;
-  private readonly attribute: SDK.DOMModel.Attribute;
-  private nameElement?: HTMLSpanElement;
-  private valueElement?: Element;
-  private prompt?: ARIAAttributePrompt;
-
-  constructor(parentPane: ARIAAttributesPane, attribute: SDK.DOMModel.Attribute, _target: SDK.Target.Target) {
-    super('');
-
-    this.parentPane = parentPane;
-    this.attribute = attribute;
-
-    this.selectable = false;
-  }
-
-  static createARIAValueElement(value: string): Element {
-    const valueElement = document.createElement('span');
-    valueElement.classList.add('monospace');
-    // TODO(aboxhall): quotation marks?
-    valueElement.setTextContentTruncatedIfNeeded(value || '');
-    return valueElement;
-  }
-
-  override onattach(): void {
-    this.populateListItem();
-    this.listItemElement.addEventListener('click', this.mouseClick.bind(this));
-  }
-
-  getPromptForTesting(): Readonly<ARIAAttributePrompt>|undefined {
-    return this.prompt;
-  }
-
-  private populateListItem(): void {
-    this.listItemElement.removeChildren();
-    this.appendNameElement(this.attribute.name);
-    this.listItemElement.createChild('span', 'separator').textContent = ':\xA0';
-    this.appendAttributeValueElement(this.attribute.value);
-  }
-
-  appendNameElement(name: string): void {
-    this.nameElement = document.createElement('span');
-    this.nameElement.textContent = name;
-    this.nameElement.classList.add('ax-name');
-    this.nameElement.classList.add('monospace');
-    this.listItemElement.appendChild(this.nameElement);
-  }
-
-  appendAttributeValueElement(value: string): void {
-    this.valueElement = ARIAAttributesTreeElement.createARIAValueElement(value);
-    this.listItemElement.appendChild(this.valueElement);
-  }
-
-  private mouseClick(event: Event): void {
-    if (event.target === this.listItemElement) {
-      return;
-    }
-
-    event.consume(true);
-
-    this.startEditing();
-  }
-
-  private startEditing(): void {
-    const valueElement = this.valueElement;
-
-    if (!valueElement || UI.UIUtils.isBeingEdited(valueElement)) {
-      return;
-    }
-
-    const previousContent = valueElement.textContent || '';
-
-    function blurListener(this: ARIAAttributesTreeElement, previousContent: string, event: Event): void {
-      const target = event.target as HTMLElement;
-      const text = target.textContent || '';
-      this.editingCommitted(text, previousContent);
-    }
-
-    const attributeName = (this.nameElement as HTMLSpanElement).textContent || '';
-    this.prompt = new ARIAAttributePrompt(ariaMetadata().valuesForProperty(attributeName));
-    this.prompt.setAutocompletionTimeout(0);
-    const proxyElement =
-        this.prompt.attachAndStartEditing(valueElement, blurListener.bind(this, previousContent)) as HTMLElement;
-
-    proxyElement.addEventListener('keydown', event => this.editingValueKeyDown(previousContent, event), false);
-
-    const selection = valueElement.getComponentSelection();
-    if (selection) {
-      selection.selectAllChildren(valueElement);
-    }
-  }
-
-  private removePrompt(): void {
-    if (!this.prompt) {
-      return;
-    }
-    this.prompt.detach();
-    delete this.prompt;
-  }
-
-  private editingCommitted(userInput: string, previousContent: string): void {
-    this.removePrompt();
-
-    // Make the changes to the attribute
-    if (userInput !== previousContent) {
-      const node = this.parentPane.node() as SDK.DOMModel.DOMNode;
-      node.setAttributeValue(this.attribute.name, userInput);
-    }
-  }
-
-  private editingCancelled(): void {
-    this.removePrompt();
-    this.populateListItem();
-  }
-
-  private editingValueKeyDown(previousContent: string, event: KeyboardEvent): void {
-    if (event.handled) {
-      return;
-    }
-
-    if (event.key === 'Enter') {
-      const target = event.target as HTMLElement;
-      this.editingCommitted(target.textContent || '', previousContent);
-      event.consume();
-      return;
-    }
-
-    if (Platform.KeyboardUtilities.isEscKey(event)) {
-      this.editingCancelled();
-      event.consume();
-      return;
-    }
-  }
-}
-
-export class ARIAAttributePrompt extends UI.TextPrompt.TextPrompt {
-  private readonly ariaCompletions: string[];
-  constructor(ariaCompletions: string[]) {
-    super();
-    this.initialize(this.buildPropertyCompletions.bind(this));
-
-    this.ariaCompletions = ariaCompletions;
-  }
-
-  private async buildPropertyCompletions(expression: string, prefix: string, force?: boolean):
-      Promise<UI.SuggestBox.Suggestions> {
-    prefix = prefix.toLowerCase();
-    if (!prefix && !force && expression) {
-      return [];
-    }
-    return this.ariaCompletions.filter(value => value.startsWith(prefix)).map(c => {
-      return {
-        text: c,
-        title: undefined,
-        subtitle: undefined,
-        priority: undefined,
-        isSecondary: undefined,
-        subtitleRenderer: undefined,
-        selectionRange: undefined,
-        hideGhostText: undefined,
-        iconElement: undefined,
-      };
-    });
-  }
-}

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -120,8 +120,8 @@ const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityNode
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class AXNodeSubPane extends AccessibilitySubPane {
   override axNode: SDK.AccessibilityModel.AccessibilityNode|null;
-  private readonly noNodeInfo: Element;
-  private readonly ignoredInfo: Element;
+  private readonly noNodeInfo: UI.Widget.Widget;
+  private readonly ignoredInfo: UI.Widget.Widget;
   private readonly treeOutline: UI.TreeOutline.TreeOutline;
   private readonly ignoredReasonsTree: UI.TreeOutline.TreeOutline;
   constructor() {
@@ -137,7 +137,7 @@ export class AXNodeSubPane extends AccessibilitySubPane {
     this.contentElement.classList.add('ax-subpane');
 
     this.noNodeInfo = this.createInfo(i18nString(UIStrings.noAccessibilityNode));
-    this.ignoredInfo = this.createInfo(i18nString(UIStrings.accessibilityNodeNotExposed), 'ax-ignored-info hidden');
+    this.ignoredInfo = this.createInfo(i18nString(UIStrings.accessibilityNodeNotExposed), 'ax-ignored-info', 'hidden');
 
     this.treeOutline = this.createTreeOutline();
     this.ignoredReasonsTree = this.createTreeOutline();
@@ -160,21 +160,21 @@ export class AXNodeSubPane extends AccessibilitySubPane {
 
     if (!axNode) {
       treeOutline.element.classList.add('hidden');
-      this.ignoredInfo.classList.add('hidden');
+      this.ignoredInfo.element.classList.add('hidden');
       ignoredReasons.element.classList.add('hidden');
 
-      this.noNodeInfo.classList.remove('hidden');
+      this.noNodeInfo.element.classList.remove('hidden');
       this.element.classList.add('ax-ignored-node-pane');
 
       return;
     }
 
     if (axNode.ignored()) {
-      this.noNodeInfo.classList.add('hidden');
+      this.noNodeInfo.element.classList.add('hidden');
       treeOutline.element.classList.add('hidden');
       this.element.classList.add('ax-ignored-node-pane');
 
-      this.ignoredInfo.classList.remove('hidden');
+      this.ignoredInfo.element.classList.remove('hidden');
       ignoredReasons.element.classList.remove('hidden');
       function addIgnoredReason(property: Protocol.Accessibility.AXProperty): void {
         ignoredReasons.appendChild(
@@ -191,9 +191,9 @@ export class AXNodeSubPane extends AccessibilitySubPane {
     }
     this.element.classList.remove('ax-ignored-node-pane');
 
-    this.ignoredInfo.classList.add('hidden');
+    this.ignoredInfo.element.classList.add('hidden');
     ignoredReasons.element.classList.add('hidden');
-    this.noNodeInfo.classList.add('hidden');
+    this.noNodeInfo.element.classList.add('hidden');
 
     treeOutline.element.classList.remove('hidden');
 

package/front_end/panels/accessibility/AccessibilitySubPane.ts

@@ -33,10 +33,12 @@ export class AccessibilitySubPane extends UI.View.SimpleView {
     this.nodeInternal = node;
   }
 
-  createInfo(textContent: string, className?: string): Element {
-    const info = this.element.createChild('div', className || 'gray-info-message');
-    info.classList.add('info-message-overflow');
-    info.textContent = textContent;
+  createInfo(textContent: string, ...classNames: string[]): UI.Widget.Widget {
+    const info = new UI.EmptyWidget.EmptyWidget(textContent);
+    if (classNames.length === 0) {
+      classNames.push('gray-info-message');
+    }
+    info.element.classList.add(...classNames, 'info-message-overflow');
     return info;
   }
 

package/front_end/panels/accessibility/accessibilityProperties.css

@@ -4,6 +4,7 @@
  * found in the LICENSE file.
  */
 
+@scope to (devtools-widget > *) {
 .ax-name {
   color: var(--sys-color-token-attribute);
   flex-shrink: 0;
@@ -38,3 +39,4 @@ span.ax-internal-role {
   overflow-x: hidden;
   white-space: normal;
 }
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -35,6 +35,8 @@ import {
   type Step
 } from './components/ChatView.js';
 import {ExploreWidget} from './components/ExploreWidget.js';
+import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
+import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
 import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 
 const {html} = Lit;
@@ -263,6 +265,16 @@ async function getEmptyStateSuggestions(
   }
 }
 
+function getMarkdownRenderer(context: AiAssistanceModel.ConversationContext<unknown>|null):
+    MarkdownRendererWithCodeBlock {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext && !context.external) {
+    const focus = context.getItem();
+    return new PerformanceAgentMarkdownRenderer(focus.lookupEvent.bind(focus));
+  }
+
+  return new MarkdownRendererWithCodeBlock();
+}
+
 interface ToolbarViewInput {
   onNewChatClick: () => void;
   populateHistoryMenu: (contextMenu: UI.ContextMenu.ContextMenu) => void;
@@ -837,6 +849,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   override async performUpdate(): Promise<void> {
     const emptyStateSuggestions = await getEmptyStateSuggestions(this.#selectedContext, this.#conversation);
+    const markdownRenderer = getMarkdownRenderer(this.#selectedContext);
 
     this.view(
         {
@@ -865,6 +878,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           changeManager: this.#changeManager,
           uploadImageInputEnabled: isAiAssistanceMultimodalUploadInputEnabled() &&
               this.#conversation?.type === AiAssistanceModel.ConversationType.STYLING,
+          markdownRenderer,
           onNewChatClick: this.#handleNewChatRequest.bind(this),
           populateHistoryMenu: this.#populateHistoryMenu.bind(this),
           onDeleteClick: this.#onDeleteClicked.bind(this),
@@ -1054,8 +1068,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       const focus = context.getItem().data;
       if (focus.callTree) {
         const event = focus.callTree.selectedNode?.event ?? focus.callTree.rootNode.event;
-        const trace = new SDK.TraceObject.RevealableEvent(event);
-        return Common.Revealer.reveal(trace);
+        const revealable = new SDK.TraceObject.RevealableEvent(event);
+        return Common.Revealer.reveal(revealable);
       }
       if (focus.insight) {
         return Common.Revealer.reveal(focus.insight);

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

@@ -18,13 +18,13 @@ import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
+import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {PatchWidget} from '../PatchWidget.js';
 
 import chatViewStyles from './chatView.css.js';
-import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 import {UserActionRow} from './UserActionRow.js';
 
 const {html, Directives: {ifDefined, ref}} = Lit;
@@ -303,11 +303,11 @@ export interface Props {
   disclaimerText: Platform.UIString.LocalizedString;
   isTextInputEmpty: boolean;
   uploadImageInputEnabled?: boolean;
+  markdownRenderer: MarkdownLitRenderer;
 }
 
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #markdownRenderer = new MarkdownRendererWithCodeBlock();
   #scrollTop?: number;
   #props: Props;
   #messagesContainerElement?: Element;
@@ -338,7 +338,6 @@ export class ChatView extends HTMLElement {
   }
 
   set props(props: Props) {
-    this.#markdownRenderer = new MarkdownRendererWithCodeBlock();
     this.#props = props;
     this.#render();
   }
@@ -624,7 +623,7 @@ export class ChatView extends HTMLElement {
             isTextInputDisabled: this.#props.isTextInputDisabled,
             suggestions: this.#props.emptyStateSuggestions,
             userInfo: this.#props.userInfo,
-            markdownRenderer: this.#markdownRenderer,
+            markdownRenderer: this.#props.markdownRenderer,
             conversationType: this.#props.conversationType,
             changeSummary: this.#props.changeSummary,
             changeManager: this.#props.changeManager,
@@ -672,7 +671,7 @@ export class ChatView extends HTMLElement {
   }
 }
 
-function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownRendererWithCodeBlock, {animate, ref: refFn}: {
+function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownLitRenderer, {animate, ref: refFn}: {
   animate?: boolean,
   ref?: (element?: Element) => void,
 } = {}): Lit.TemplateResult {
@@ -753,7 +752,7 @@ function renderStepDetails({
   isLast,
 }: {
   step: Step,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
   const sideEffects = isLast && step.sideEffect ? renderSideEffectConfirmationUi(step) : Lit.nothing;
@@ -817,7 +816,7 @@ function renderStepBadge({step, isLoading, isLast}: {
 function renderStep({step, isLoading, markdownRenderer, isLast}: {
   step: Step,
   isLoading: boolean,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
   const stepClasses = Lit.Directives.classMap({
@@ -926,7 +925,7 @@ function renderChatMessage({
   canShowFeedbackForm: boolean,
   isLast: boolean,
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
   onCopyResponseClick: (message: ModelChatMessage) => void,
@@ -1156,7 +1155,7 @@ function renderMessages({
   isReadOnly: boolean,
   canShowFeedbackForm: boolean,
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
   onCopyResponseClick: (message: ModelChatMessage) => void,
@@ -1657,7 +1656,7 @@ function renderMainContents({
   isTextInputDisabled: boolean,
   suggestions: AiAssistanceModel.ConversationSuggestion[],
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   changeManager: AiAssistanceModel.ChangeManager,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,

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

@@ -0,0 +1,42 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../../core/common/common.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import * as Trace from '../../../models/trace/trace.js';
+import type * as Marked from '../../../third_party/marked/marked.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
+
+const {html} = Lit;
+
+export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
+  constructor(private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null) {
+    super();
+  }
+
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.TemplateResult|null {
+    if (token.type === 'link' && token.href.startsWith('#')) {
+      const event = this.lookupEvent(token.href.slice(1) as Trace.Types.File.SerializableKey);
+      if (event) {
+        let label = token.text;
+        let title = '';
+        if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+          title = event.args.data.url;
+        } else {
+          label += ` (${event.name})`;
+        }
+
+        // eslint-disable-next-line rulesdir/no-a-tags-in-lit
+        return html`<a href="#" draggable=false .title=${title} @click=${(e: Event) => {
+          e.stopPropagation();
+          void Common.Revealer.reveal(new SDK.TraceObject.RevealableEvent(event));
+        }}>${label}</a>`;
+      }
+    }
+
+    return super.templateForToken(token);
+  }
+}