chrome-devtools-frontend 1.0.1519267 → 1.0.1520535

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -21,17 +21,17 @@ export class PerformanceTraceFormatter {
   #focus: AgentFocus;
   #parsedTrace: Trace.TraceModel.ParsedTrace;
   #insightSet: Trace.Insights.Types.InsightSet|null;
-  protected eventsSerializer: Trace.EventsSerializer.EventsSerializer;
+  #eventsSerializer: Trace.EventsSerializer.EventsSerializer;
 
   constructor(focus: AgentFocus) {
     this.#focus = focus;
-    this.#parsedTrace = focus.data.parsedTrace;
-    this.#insightSet = focus.data.insightSet;
-    this.eventsSerializer = focus.eventsSerializer;
+    this.#parsedTrace = focus.parsedTrace;
+    this.#insightSet = focus.insightSet;
+    this.#eventsSerializer = focus.eventsSerializer;
   }
 
   serializeEvent(event: Trace.Types.Events.Event): string {
-    const key = this.eventsSerializer.keyForEvent(event);
+    const key = this.#eventsSerializer.keyForEvent(event);
     return `(eventKey: ${key}, ts: ${event.ts})`;
   }
 
@@ -133,7 +133,10 @@ export class PerformanceTraceFormatter {
     if (lcp || cls || inp) {
       parts.push('Metrics (lab / observed):');
       if (lcp) {
-        parts.push(`  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}`);
+        const nodeId = insightSet?.model.LCPBreakdown.lcpEvent?.args.data?.nodeId;
+        const nodeIdText = nodeId !== undefined ? `, nodeId: ${nodeId}` : '';
+        parts.push(
+            `  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}${nodeIdText}`);
         const subparts = insightSet?.model.LCPBreakdown.subparts;
         if (subparts) {
           const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
@@ -442,19 +445,7 @@ export class PerformanceTraceFormatter {
   }
 
   formatCallTree(tree: AICallTree, headerLevel = 1): string {
-    const results = [tree.serialize(headerLevel), ''];
-
-    // TODO(b/425270067): add eventKey to tree.serialize, but need to wait for other
-    // performance agent to be consolidated.
-    results.push('#'.repeat(headerLevel) + ' Node id to eventKey\n');
-    results.push('These node ids correspond to the call tree nodes listed in the above section.\n');
-    tree.breadthFirstWalk(tree.rootNode.children().values(), (node, nodeId) => {
-      results.push(`${nodeId}: ${this.eventsSerializer.keyForEvent(node.event)}`);
-    });
-
-    results.push('\nIMPORTANT: Never show eventKey to the user.');
-
-    return results.join('\n');
+    return `${tree.serialize(headerLevel)}\n\nIMPORTANT: Never show eventKey to the user.`;
   }
 
   formatNetworkRequests(
@@ -580,7 +571,7 @@ export class PerformanceTraceFormatter {
     const initiators = this.#getInitiatorChain(parsedTrace, request);
     const initiatorUrls = initiators.map(initiator => initiator.args.data.url);
 
-    const eventKey = this.eventsSerializer.keyForEvent(request);
+    const eventKey = this.#eventsSerializer.keyForEvent(request);
     const eventKeyLine = eventKey ? `eventKey: ${eventKey}\n` : '';
 
     return `${titlePrefix}: ${url}
@@ -635,6 +626,30 @@ Network requests data:
     return networkDataString + '\n\n' + urlsMapString + '\n\n' + allRequestsText;
   }
 
+  static callFrameDataFormatDescription = `Each call frame is presented in the following format:
+
+'id;eventKey;name;duration;selfTime;urlIndex;childRange;[S]'
+
+Key definitions:
+
+* id: A unique numerical identifier for the call frame. Never mention this id in the output to the user.
+* eventKey: String that uniquely identifies this event in the flame chart.
+* name: A concise string describing the call frame (e.g., 'Evaluate Script', 'render', 'fetchData').
+* duration: The total execution time of the call frame, including its children.
+* selfTime: The time spent directly within the call frame, excluding its children's execution.
+* urlIndex: Index referencing the "All URLs" list. Empty if no specific script URL is associated.
+* childRange: Specifies the direct children of this node using their IDs. If empty ('' or 'S' at the end), the node has no children. If a single number (e.g., '4'), the node has one child with that ID. If in the format 'firstId-lastId' (e.g., '4-5'), it indicates a consecutive range of child IDs from 'firstId' to 'lastId', inclusive.
+* S: _Optional_. The letter 'S' terminates the line if that call frame was selected by the user.
+
+Example Call Tree:
+
+1;r-123;main;500;100;;
+2;r-124;update;200;50;;3
+3;p-49575-15428179-2834-374;animate;150;20;0;4-5;S
+4;p-49575-15428179-3505-1162;calculatePosition;80;80;;
+5;p-49575-15428179-5391-2767;applyStyles;50;50;;
+`;
+
   /**
    * Network requests format description that is sent to the model as a fact.
    */
@@ -727,7 +742,7 @@ The order of headers corresponds to an internal fixed list. If a header is not p
 
     const parts = [
       urlIndex,
-      this.eventsSerializer.keyForEvent(request) ?? '',
+      this.#eventsSerializer.keyForEvent(request) ?? '',
       queuedTime,
       requestSentTime,
       downloadCompleteTime,

package/front_end/models/ai_assistance/performance/AICallTree.snapshot.txt

@@ -0,0 +1,75 @@
+Title: AICallTree supports NodeJS traces that do not have a "main thread"
+Content:
+# All URLs:
+
+  * 0: node:internal/main/run_main_module
+  * 1: node:internal/modules/run_main
+  * 2: node:internal/modules/cjs/loader
+  * 3: file:///Users/andoli/Desktop/mocks/fixnodeinspector/app.js
+
+# Call tree:
+
+1;p-1-1-0-2;(anonymous);2370;;0;2
+2;p-1-1-0-3;executeUserEntryPoint;2370;;1;3
+3;p-1-1-0-4;Module._load;2370;;2;4
+4;p-1-1-0-5;Module.load;2370;;2;5
+5;p-1-1-0-6;Module._extensions..js;2370;;2;6
+6;p-1-1-0-7;Module._compile;2370;;2;7
+7;p-1-1-0-8;callAndPauseOnStart;2370;;;8;S
+8;p-1-1-0-9;(anonymous);2370;2370;3;
+=== end content
+
+Title: AICallTree serializes a simple tree
+Content:
+# All URLs:
+
+  * 0: https://www.gstatic.com/devrel-devsite/prod/vafe2e13ca17bb026e70df42a2ead1c8192750e86a12923a88eda839025dabf95/js/devsite_app_module.js
+
+# Call tree:
+
+1;r-36071;Task;0.2;;;2
+2;r-36072;Timer fired;0.2;;;3
+3;r-36076;Function call;0.2;;0;4
+4;p-74406-259-16342-528;_ds.q.ns;0.2;;0;5;S
+5;p-74406-259-16342-529;clearTimeout;0.2;0;;6
+6;r-36082;Recalculate style;0.2;0.2;;
+=== end content
+
+Title: AICallTree serializes a simple tree in a concise format
+Content:
+# All URLs:
+
+  * 0: https://www.gstatic.com/devrel-devsite/prod/vafe2e13ca17bb026e70df42a2ead1c8192750e86a12923a88eda839025dabf95/js/devsite_app_module.js
+
+# Call tree:
+
+1;r-36071;Task;0.2;;;2
+2;r-36072;Timer fired;0.2;;;3
+3;r-36076;Function call;0.2;;0;4
+4;p-74406-259-16342-528;_ds.q.ns;0.2;;0;5;S
+5;p-74406-259-16342-529;clearTimeout;0.2;0;;6
+6;r-36082;Recalculate style;0.2;0.2;;
+=== end content
+
+Title: AICallTree serializes a tree in a concise format
+Content:
+# All URLs:
+
+  * 0: https://www.gstatic.com/firebasejs/6.6.1/firebase-performance.js
+
+# Call tree:
+
+1;r-5764;Task;0.9;0;;2;S
+2;r-5765;Timer fired;0.9;0;;3
+3;r-5766;Function call;0.9;0.1;0;4
+4;p-73704-775-2873-705;(anonymous);0.8;;0;5
+5;p-73704-775-2873-706;(anonymous);0.8;;0;6-8
+6;p-73704-775-2873-707;Ot.getEntriesByType;0.1;;0;8
+7;p-73704-775-2874-709;le.createOobTrace;0.6;0.2;0;9-11
+8;p-73704-775-2873-708;getEntriesByType;0.1;0.1;;
+9;p-73704-775-2875-710;le;0.1;0.1;0;
+10;p-73704-775-2877-711;ie;0.2;;0;11-13
+11;p-73704-775-2877-712;Ot.requiredApisAvailable;0.2;0.2;0;
+12;p-73704-775-2879-713;oe;0;;0;13
+13;p-73704-775-2879-714;setTimeout;0;0;;
+=== end content

package/front_end/models/ai_assistance/performance/AICallTree.ts

@@ -24,6 +24,10 @@ export interface FromTimeOnThreadOptions {
 }
 
 export class AICallTree {
+  // Note: ideally this is passed in (or lived on ParsedTrace), but this class is
+  // stateless (mostly, there's a cache for some stuff) so it doesn't match much.
+  #eventsSerializer = new Trace.EventsSerializer.EventsSerializer();
+
   constructor(
       public selectedNode: Trace.Extras.TraceTree.Node|null,
       public rootNode: Trace.Extras.TraceTree.TopDownRootNode,
@@ -307,7 +311,10 @@ export class AICallTree {
     // 1. ID
     const idStr = String(nodeId);
 
-    // 2. Name
+    // 2. eventKey
+    const eventKey = this.#eventsSerializer.keyForEvent(node.event);
+
+    // 3. Name
     const name = Trace.Name.forEntry(event, parsedTrace);
 
     // Round milliseconds to one decimal place, return empty string if zero/undefined
@@ -318,13 +325,13 @@ export class AICallTree {
       return String(Math.round(num * 10) / 10);
     };
 
-    // 3. Duration
+    // 4. Duration
     const durationStr = roundToTenths(node.totalTime);
 
-    // 4. Self Time
+    // 5. Self Time
     const selfTimeStr = roundToTenths(node.selfTime);
 
-    // 5. URL Index
+    // 6. URL Index
     const url = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(parsedTrace, event);
     let urlIndexStr = '';
     if (url) {
@@ -336,7 +343,7 @@ export class AICallTree {
       }
     }
 
-    // 6. Child Range
+    // 7. Child Range
     const children = Array.from(node.children().values());
     let childRangeStr = '';
     if (childStartingNodeIndex) {
@@ -344,11 +351,12 @@ export class AICallTree {
                                                 `${childStartingNodeIndex}-${childStartingNodeIndex + children.length}`;
     }
 
-    // 7. Selected Marker
+    // 8. Selected Marker
     const selectedMarker = selectedNode?.event === node.event ? 'S' : '';
 
     // Combine fields
     let line = idStr;
+    line += ';' + eventKey;
     line += ';' + name;
     line += ';' + durationStr;
     line += ';' + selfTimeStr;

package/front_end/models/ai_assistance/performance/AIContext.ts

@@ -4,11 +4,14 @@
 
 import * as Trace from '../../../models/trace/trace.js';
 
-import type {AICallTree} from './AICallTree.js';
+import {AICallTree} from './AICallTree.js';
 
-export interface AgentFocusData {
+interface AgentFocusData {
   parsedTrace: Trace.TraceModel.ParsedTrace;
   insightSet: Trace.Insights.Types.InsightSet|null;
+  /** Note: at most one of event or callTree is non-null. */
+  event: Trace.Types.Events.Event|null;
+  /** Note: at most one of event or callTree is non-null. */
   callTree: AICallTree|null;
   insight: Trace.Insights.Types.InsightModel|null;
 }
@@ -30,6 +33,7 @@ export class AgentFocus {
     return new AgentFocus({
       parsedTrace,
       insightSet,
+      event: null,
       callTree: null,
       insight: null,
     });
@@ -45,11 +49,22 @@ export class AgentFocus {
     return new AgentFocus({
       parsedTrace,
       insightSet,
+      event: null,
       callTree: null,
       insight,
     });
   }
 
+  static fromEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event): AgentFocus {
+    if (!parsedTrace.insights) {
+      throw new Error('missing insights');
+    }
+
+    const insightSet = getFirstInsightSet(parsedTrace.insights);
+    const result = AgentFocus.#getCallTreeOrEvent(parsedTrace, event);
+    return new AgentFocus({parsedTrace, insightSet, event: result.event, callTree: result.callTree, insight: null});
+  }
+
   static fromCallTree(callTree: AICallTree): AgentFocus {
     const insights = callTree.parsedTrace.insights;
 
@@ -65,7 +80,7 @@ export class AgentFocus {
           getFirstInsightSet(insights);
     }
 
-    return new AgentFocus({parsedTrace: callTree.parsedTrace, insightSet, callTree, insight: null});
+    return new AgentFocus({parsedTrace: callTree.parsedTrace, insightSet, event: null, callTree, insight: null});
   }
 
   #data: AgentFocusData;
@@ -75,8 +90,26 @@ export class AgentFocus {
     this.#data = data;
   }
 
-  get data(): AgentFocusData {
-    return this.#data;
+  get parsedTrace(): Trace.TraceModel.ParsedTrace {
+    return this.#data.parsedTrace;
+  }
+
+  get insightSet(): Trace.Insights.Types.InsightSet|null {
+    return this.#data.insightSet;
+  }
+
+  /** Note: at most one of event or callTree is non-null. */
+  get event(): Trace.Types.Events.Event|null {
+    return this.#data.event;
+  }
+
+  /** Note: at most one of event or callTree is non-null. */
+  get callTree(): AICallTree|null {
+    return this.#data.callTree;
+  }
+
+  get insight(): Trace.Insights.Types.InsightModel|null {
+    return this.#data.insight;
   }
 
   withInsight(insight: Trace.Insights.Types.InsightModel|null): AgentFocus {
@@ -85,9 +118,11 @@ export class AgentFocus {
     return focus;
   }
 
-  withCallTree(callTree: AICallTree|null): AgentFocus {
+  withEvent(event: Trace.Types.Events.Event|null): AgentFocus {
     const focus = new AgentFocus(this.#data);
-    focus.#data.callTree = callTree;
+    const result = AgentFocus.#getCallTreeOrEvent(this.#data.parsedTrace, event);
+    focus.#data.callTree = result.callTree;
+    focus.#data.event = result.event;
     return focus;
   }
 
@@ -102,6 +137,26 @@ export class AgentFocus {
       throw err;
     }
   }
+
+  /**
+   * If an event is a call tree, this returns that call tree and a null event.
+   * If not a call tree, this only returns a non-null event if the event is a network
+   * request.
+   * This is an arbitrary limitation – it should be removed, but first we need to
+   * improve the agent's knowledge of events that are not main-thread or network
+   * events.
+   */
+  static #getCallTreeOrEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event|null):
+      {callTree: AICallTree|null, event: Trace.Types.Events.Event|null} {
+    const callTree = event && AICallTree.fromEvent(event, parsedTrace);
+    if (callTree) {
+      return {callTree, event: null};
+    }
+    if (event && Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+      return {callTree: null, event};
+    }
+    return {callTree: null, event: null};
+  }
 }
 
 export function getPerformanceAgentFocusFromModel(model: Trace.TraceModel.Model): AgentFocus|null {

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -332,7 +332,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
             sampleId,
             startTime,
             onImpression: this.#registerUserImpression.bind(this),
-            clearCachedRequest: this.#clearCachedRequest.bind(this),
+            clearCachedRequest: this.clearCachedRequest.bind(this),
           })
         });
 
@@ -415,10 +415,6 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#aidaRequestCache = {request, response};
   }
 
-  #clearCachedRequest(): void {
-    this.#aidaRequestCache = undefined;
-  }
-
   #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number, latency: number): void {
     const seconds = Math.floor(latency / 1_000);
     const remainingMs = latency % 1_000;
@@ -461,6 +457,10 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionSuggestionAccepted);
   }
 
+  clearCachedRequest(): void {
+    this.#aidaRequestCache = undefined;
+  }
+
   onTextChanged(
       prefix: string, suffix: string, cursorPositionAtRequest: number,
       inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage): void {

package/front_end/models/badges/Badge.ts

@@ -13,7 +13,12 @@ export enum BadgeAction {
   STARTED_AI_CONVERSATION = 'started-ai-conversation',
   // TODO(ergunsh): Instrument performance insight clicks.
   PERFORMANCE_INSIGHT_CLICKED = 'performance-insight-clicked',
-  DEBUGGER_PAUSED = 'debugger-paused'
+  DEBUGGER_PAUSED = 'debugger-paused',
+  BREAKPOINT_ADDED = 'breakpoint-added',
+  CONSOLE_PROMPT_EXECUTED = 'console-prompt-executed',
+  PERFORMANCE_RECORDING_STARTED = 'performance-recording-started',
+  NETWORK_SPEED_THROTTLED = 'network-speed-throttled',
+  RECORDER_RECORDING_STARTED = 'recorder-recording-started',
 }
 
 export type BadgeActionEvents = Record<BadgeAction, void>;

package/front_end/models/badges/StarterBadge.ts

@@ -19,6 +19,11 @@ export class StarterBadge extends Badge {
     BadgeAction.RECEIVE_BADGES_SETTING_ENABLED,
     BadgeAction.CSS_RULE_MODIFIED,
     BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
+    BadgeAction.BREAKPOINT_ADDED,
+    BadgeAction.CONSOLE_PROMPT_EXECUTED,
+    BadgeAction.PERFORMANCE_RECORDING_STARTED,
+    BadgeAction.NETWORK_SPEED_THROTTLED,
+    BadgeAction.RECORDER_RECORDING_STARTED,
   ] as const;
 
   handleAction(action: BadgeAction): void {

package/front_end/models/badges/UserBadges.ts

@@ -163,10 +163,11 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       return;
     }
 
-    const [gdpProfile, isEligibleToCreateProfile] = await Promise.all([
-      Host.GdpClient.GdpClient.instance().getProfile(),
-      Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile(),
-    ]);
+    const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+    let isEligibleToCreateProfile = Boolean(gdpProfile);
+    if (!gdpProfile) {
+      isEligibleToCreateProfile = await Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile();
+    }
 
     // User does not have a GDP profile & not eligible to create one.
     // So, we don't activate any badges for them.

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7277,6 +7277,10 @@ export const NativeFunctions = [
     name: "unregisterTool",
     signatures: [["tool_name"]]
   },
+  {
+    name: "provideContext",
+    signatures: [["params"]]
+  },
   {
     name: "SnapEvent",
     signatures: [["type","?eventInitDict"]]
@@ -7978,7 +7982,7 @@ export const NativeFunctions = [
   },
   {
     name: "constant",
-    signatures: [["tensor"],["desc","buffer"],["type","value"]]
+    signatures: [["tensor"],["desc","buffer"]]
   },
   {
     name: "argMin",

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -266,11 +266,18 @@ 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));
+function getMarkdownRenderer(
+    context: AiAssistanceModel.ConversationContext<unknown>|null,
+    conversation?: AiAssistanceModel.Conversation): MarkdownRendererWithCodeBlock {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext) {
+    if (!context.external) {
+      const focus = context.getItem();
+      return new PerformanceAgentMarkdownRenderer(
+          focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
+    }
+  } else if (conversation?.type === AiAssistanceModel.ConversationType.PERFORMANCE) {
+    // Handle historical conversations (can't linkify anything).
+    return new PerformanceAgentMarkdownRenderer();
   }
 
   return new MarkdownRendererWithCodeBlock();
@@ -850,7 +857,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);
+    const markdownRenderer = getMarkdownRenderer(this.#selectedContext, this.#conversation);
 
     this.view(
         {
@@ -1066,7 +1073,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
     if (context instanceof AiAssistanceModel.PerformanceTraceContext) {
-      const focus = context.getItem().data;
+      const focus = context.getItem();
       if (focus.callTree) {
         const event = focus.callTree.selectedNode?.event ?? focus.callTree.rootNode.event;
         const revealable = new SDK.TraceObject.RevealableEvent(event);

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -182,7 +182,6 @@ export interface ViewInput {
 }
 
 export interface ViewOutput {
-  tooltipRef?: Directives.Ref<HTMLElement>;
   changeRef?: Directives.Ref<HTMLElement>;
   summaryRef?: Directives.Ref<HTMLElement>;
 }
@@ -211,7 +210,6 @@ export class PatchWidget extends UI.Widget.Widget {
   #automaticFileSystem =
       Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
   #applyToDisconnectedAutomaticWorkspace = false;
-  #popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
   // `rpcId` from the `applyPatch` request
   #rpcId: Host.AidaClient.RpcGlobalId|null = null;
 
@@ -228,7 +226,7 @@ export class PatchWidget extends UI.Widget.Widget {
       if (!input.changeSummary && input.patchSuggestionState === PatchSuggestionState.INITIAL) {
         return;
       }
-      output.tooltipRef = output.tooltipRef ?? Directives.createRef<HTMLElement>();
+
       output.changeRef = output.changeRef ?? Directives.createRef<HTMLElement>();
       output.summaryRef = output.summaryRef ?? Directives.createRef<HTMLElement>();
 
@@ -390,8 +388,23 @@ export class PatchWidget extends UI.Widget.Widget {
               .jslogContext=${'patch-widget.info-tooltip-trigger'}
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}
-              .title=${input.applyToWorkspaceTooltipText}
             ></devtools-button>
+            <devtools-tooltip
+                id="info-tooltip"
+                variant=${'rich'}
+              >
+             <div class="info-tooltip-container">
+               ${input.applyToWorkspaceTooltipText}
+               <button
+                 class="link tooltip-link"
+                 role="link"
+                 jslog=${VisualLogging.link('open-ai-settings').track({
+                   click: true,
+                 })}
+                 @click=${input.onLearnMoreTooltipClick}
+               >${lockedString(UIStringsNotTranslate.learnMore)}</button>
+             </div>
+            </devtools-tooltip>
           </div>
         </div>`;
       }
@@ -417,62 +430,11 @@ export class PatchWidget extends UI.Widget.Widget {
 
       render(template, target, {host: target});
     });
-    // We're using PopoverHelper as a workaround instead of using <devtools-tooltip>. See the bug for more details.
-    // TODO: Update here when b/409965560 is fixed.
-    this.#popoverHelper = new UI.PopoverHelper.PopoverHelper(this.contentElement, event => {
-      // There are two ways this event is received for showing a popover case:
-      // * The latest element on the composed path is `<devtools-button>`
-      // * The 2nd element on the composed path is `<devtools-button>` (the last element is the `<button>` inside it.)
-      const hoveredNode = event.composedPath()[0];
-      const maybeDevToolsButton = event.composedPath()[2];
-
-      const popoverShownNode = hoveredNode instanceof HTMLElement && hoveredNode.getAttribute('aria-details') === 'info-tooltip' ? hoveredNode
-        : maybeDevToolsButton instanceof HTMLElement && maybeDevToolsButton.getAttribute('aria-details') === 'info-tooltip' ? maybeDevToolsButton
-        : null;
-      if (!popoverShownNode) {
-        return null;
-      }
-      return {
-        box: popoverShownNode.boxInWindow(),
-        show: async (popover: UI.GlassPane.GlassPane) => {
-          // clang-format off
-          render(html`
-            <style>
-              .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;
-                }
-              }
-            </style>
-            <div class="info-tooltip-container">
-              ${UIStringsNotTranslate.applyToWorkspaceTooltip}
-              <button
-                class="link tooltip-link"
-                role="link"
-                jslog=${VisualLogging.link('open-ai-settings').track({
-                  click: true,
-                })}
-                @click=${this.#onLearnMoreTooltipClick}
-              >${lockedString(UIStringsNotTranslate.learnMore)}</button>
-            </div>`, popover.contentElement, {host: this});
-          // clang-forat on
-          return true;
-        },
-      };
-    }, 'patch-widget.info-tooltip');
-    this.#popoverHelper.setTimeout(0);
     // clang-format on
     this.requestUpdate();
   }
 
   #onLearnMoreTooltipClick(): void {
-    this.#viewOutput.tooltipRef?.value?.hidePopover();
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
   }