chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

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

@@ -14,12 +14,12 @@ import {bytes, micros, millis} from './UnitFormatters.js';
 /**
  * For a given frame ID and navigation ID, returns the LCP Event and the LCP Request, if the resource was an image.
  */
-function getLCPData(parsedTrace: Trace.Handlers.Types.ParsedTrace, frameId: string, navigationId: string): {
+function getLCPData(parsedTrace: Trace.TraceModel.ParsedTrace, frameId: string, navigationId: string): {
   lcpEvent: Trace.Types.Events.LargestContentfulPaintCandidate,
   metricScore: Trace.Handlers.ModelHandlers.PageLoadMetrics.LCPMetricScore,
   lcpRequest?: Trace.Types.Events.SyntheticNetworkRequest,
 }|null {
-  const navMetrics = parsedTrace.PageLoadMetrics.metricScoresByFrameId.get(frameId)?.get(navigationId);
+  const navMetrics = parsedTrace.data.PageLoadMetrics.metricScoresByFrameId.get(frameId)?.get(navigationId);
   if (!navMetrics) {
     return null;
   }
@@ -35,16 +35,16 @@ function getLCPData(parsedTrace: Trace.Handlers.Types.ParsedTrace, frameId: stri
 
   return {
     lcpEvent,
-    lcpRequest: parsedTrace.LargestImagePaint.lcpRequestByNavigationId.get(navigationId),
+    lcpRequest: parsedTrace.data.LargestImagePaint.lcpRequestByNavigationId.get(navigationId),
     metricScore: metric,
   };
 }
 
 export class PerformanceInsightFormatter {
   #insight: Trace.Insights.Types.InsightModel;
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  #parsedTrace: Trace.TraceModel.ParsedTrace;
 
-  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace, insight: Trace.Insights.Types.InsightModel) {
+  constructor(parsedTrace: Trace.TraceModel.ParsedTrace, insight: Trace.Insights.Types.InsightModel) {
     this.#insight = insight;
     this.#parsedTrace = parsedTrace;
   }
@@ -181,6 +181,87 @@ export class PerformanceInsightFormatter {
     }
   }
 
+  /**
+   * Create an AI prompt string out of the Cache Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within Cache to help build the
+   * AI prompt, but does not (and should not) call i18nString to localize these strings. They
+   * should all be sent in English (at least for now).
+   * @param insight The Cache Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatCacheInsight(insight: Trace.Insights.Models.Cache.CacheInsightModel): string {
+    if (insight.requests.length === 0) {
+      return Trace.Insights.Models.Cache.UIStrings.noRequestsToCache + '.';
+    }
+
+    let output = 'The following resources were associated with ineffficient cache policies:\n';
+
+    for (const entry of insight.requests) {
+      output += `\n- ${entry.request.args.data.url}`;
+      output += `\n  - Cache Time to Live (TTL): ${entry.ttl} seconds`;
+      output += `\n  - Wasted bytes: ${bytes(entry.wastedBytes)}`;
+    }
+
+    output += '\n\n' + Trace.Insights.Models.Cache.UIStrings.description;
+    return output;
+  }
+
+  /**
+   * Create an AI prompt string out of the DOM Size model to use with Ask AI.
+   * Note: This function accesses the UIStrings within DomSize to help build the
+   * AI prompt, but does not (and should not) call i18nString to localize these strings. They
+   * should all be sent in English (at least for now).
+   * @param insight The DOM Size Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatDomSizeInsight(insight: Trace.Insights.Models.DOMSize.DOMSizeInsightModel): string {
+    if (insight.state === 'pass') {
+      return 'No DOM size issues were detected.';
+    }
+
+    let output = Trace.Insights.Models.DOMSize.UIStrings.description + '\n';
+
+    if (insight.maxDOMStats) {
+      output += '\n' + Trace.Insights.Models.DOMSize.UIStrings.statistic + ':\n\n';
+
+      const maxDepthStats = insight.maxDOMStats.args.data.maxDepth;
+      const maxChildrenStats = insight.maxDOMStats.args.data.maxChildren;
+      output += Trace.Insights.Models.DOMSize.UIStrings.totalElements + ': ' +
+          insight.maxDOMStats.args.data.totalElements + '.\n';
+      if (maxDepthStats) {
+        output += Trace.Insights.Models.DOMSize.UIStrings.maxDOMDepth + ': ' + maxDepthStats.depth +
+            ` nodes, starting with element '${maxDepthStats.nodeName}'` +
+            ' (node id: ' + maxDepthStats.nodeId + ').\n';
+      }
+      if (maxChildrenStats) {
+        output += Trace.Insights.Models.DOMSize.UIStrings.maxChildren + ': ' + maxChildrenStats.numChildren +
+            `, for parent '${maxChildrenStats.nodeName}'` +
+            ' (node id: ' + maxChildrenStats.nodeId + ').\n';
+      }
+    }
+
+    if (insight.largeLayoutUpdates.length > 0 || insight.largeStyleRecalcs.length > 0) {
+      output += `\nLarge layout updates/style calculations:\n`;
+    }
+
+    if (insight.largeLayoutUpdates.length > 0) {
+      for (const update of insight.largeLayoutUpdates) {
+        output += `\n  - Layout update: Duration: ${this.#formatMicro(update.dur)},`;
+        output += ` with ${update.args.beginData.dirtyObjects} of ${
+            update.args.beginData.totalObjects} nodes needing layout.`;
+      }
+    }
+
+    if (insight.largeStyleRecalcs.length > 0) {
+      for (const recalc of insight.largeStyleRecalcs) {
+        output += `\n  - Style recalculation: Duration: ${this.#formatMicro(recalc.dur)}, `;
+        output += `with ${recalc.args.elementCount} elements affected.`;
+      }
+    }
+
+    return output;
+  }
+
   /**
    * Create an AI prompt string out of the NetworkDependencyTree Insight model to use with Ask AI.
    * Note: This function accesses the UIStrings within NetworkDependencyTree to help build the
@@ -432,6 +513,32 @@ export class PerformanceInsightFormatter {
     return output;
   }
 
+  /**
+   * Create an AI prompt string out of the Viewport [Mobile] Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within Viewport to help build the
+   * AI prompt, but does not (and should not) call i18nString to localize these strings. They
+   * should all be sent in English (at least for now).
+   * @param insight The Network Dependency Tree Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatViewportInsight(insight: Trace.Insights.Models.Viewport.ViewportInsightModel): string {
+    let output = '';
+
+    output += 'The webpage is ' + (insight.mobileOptimized ? 'already' : 'not') + ' optimized for mobile viewing.\n';
+
+    const hasMetaTag = insight.viewportEvent;
+    if (hasMetaTag) {
+      output += `\nThe viewport meta tag was found: \`${insight.viewportEvent?.args?.data.content}\`.`;
+    } else {
+      output += `\nThe viewport meta tag is missing.`;
+    }
+
+    if (!hasMetaTag) {
+      output += '\n\n' + Trace.Insights.Models.Viewport.UIStrings.description;
+    }
+    return output;
+  }
+
   /**
    * Formats and outputs the insight's data.
    * Pass `{headingLevel: X}` to determine what heading level to use for the
@@ -609,7 +716,7 @@ ${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED'
         return '';
       }
 
-      const baseTime = this.#parsedTrace.Meta.traceBounds.min;
+      const baseTime = this.#parsedTrace.data.Meta.traceBounds.min;
 
       const clusterTimes = {
         start: worstCluster.ts - baseTime,
@@ -682,6 +789,14 @@ Legacy JavaScript by file:
 ${filesFormatted}`;
     }
 
+    if (Trace.Insights.Models.Cache.isCacheInsight(this.#insight)) {
+      return this.formatCacheInsight(this.#insight);
+    }
+
+    if (Trace.Insights.Models.DOMSize.isDomSizeInsight(this.#insight)) {
+      return this.formatDomSizeInsight(this.#insight);
+    }
+
     if (Trace.Insights.Models.FontDisplay.isFontDisplayInsight(this.#insight)) {
       return this.formatFontDisplayInsight(this.#insight);
     }
@@ -702,6 +817,10 @@ ${filesFormatted}`;
       return this.formatThirdPartiesInsight(this.#insight);
     }
 
+    if (Trace.Insights.Models.Viewport.isViewportInsight(this.#insight)) {
+      return this.formatViewportInsight(this.#insight);
+    }
+
     return '';
   }
 
@@ -724,7 +843,7 @@ ${filesFormatted}`;
       case 'DocumentLatency':
         return '- https://web.dev/articles/optimize-ttfb';
       case 'DOMSize':
-        return '';
+        return '- https://developer.chrome.com/docs/lighthouse/performance/dom-size/';
       case 'DuplicatedJavaScript':
         return '';
       case 'FontDisplay':
@@ -757,9 +876,9 @@ ${filesFormatted}`;
       case 'ThirdParties':
         return '- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/';
       case 'Viewport':
-        return '';
+        return '- https://developer.chrome.com/blog/300ms-tap-delay-gone-away/';
       case 'Cache':
-        return '';
+        return '- https://web.dev/uses-long-cache-ttl/';
       case 'ModernHTTP':
         return '- https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2';
       case 'LegacyJavaScript':
@@ -781,7 +900,11 @@ ${filesFormatted}`;
 2. Did the server respond in 600ms or less? We want developers to aim for as close to 100ms as possible, but our threshold for this insight is 600ms.
 3. Was there compression applied to the response to minimize the transfer size?`;
       case 'DOMSize':
-        return '';
+        return `This insight evaluates some key metrics about the Document Object Model (DOM) and identifies excess in the DOM tree, for example:
+- The maximum number of elements within the DOM.
+- The maximum number of children for any given element.
+- Excessive depth of the DOM structure.
+- The largest layout and style recalculation events.`;
       case 'DuplicatedJavaScript':
         return `This insight identifies large, duplicated JavaScript modules that are present in your application and create redundant code.
   This wastes network bandwidth and slows down your page, as the user's browser must download and process the same code multiple times.`;
@@ -827,9 +950,9 @@ It is important that all of these checks pass to minimize the delay between the
       case 'ThirdParties':
         return 'This insight analyzes the performance impact of resources loaded from third-party servers and aggregates the performance cost, in terms of download transfer sizes and total amount of time that third party scripts spent executing on the main thread.';
       case 'Viewport':
-        return '';
+        return 'The insight identifies web pages that are not specifying the viewport meta tag for mobile devies, which avoids the artificial 300-350ms delay designed to help differentiate between tap and double-click.';
       case 'Cache':
-        return '';
+        return 'This insight identifies static resources that are not cached effectively by the browser.';
       case 'ModernHTTP':
         return `Modern HTTP protocols, such as HTTP/2, are more efficient than older versions like HTTP/1.1 because they allow for multiple requests and responses to be sent over a single network connection, significantly improving page load performance by reducing latency and overhead. This insight identifies requests that can be upgraded to a modern HTTP protocol.
 
@@ -854,9 +977,9 @@ export interface NetworkRequestFormatOptions {
 
 export class TraceEventFormatter {
   static layoutShift(
-      shift: Trace.Types.Events.SyntheticLayoutShift, index: number, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      shift: Trace.Types.Events.SyntheticLayoutShift, index: number, parsedTrace: Trace.TraceModel.ParsedTrace,
       rootCauses?: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData): string {
-    const baseTime = parsedTrace.Meta.traceBounds.min;
+    const baseTime = parsedTrace.data.Meta.traceBounds.min;
 
     const potentialRootCauses: string[] = [];
     if (rootCauses) {
@@ -895,7 +1018,7 @@ ${rootCauseText}`;
 
   // Stringify network requests for the LLM model.
   static networkRequests(
-      requests: readonly Trace.Types.Events.SyntheticNetworkRequest[], parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      requests: readonly Trace.Types.Events.SyntheticNetworkRequest[], parsedTrace: Trace.TraceModel.ParsedTrace,
       options?: NetworkRequestFormatOptions): string {
     if (requests.length === 0) {
       return '';
@@ -929,7 +1052,7 @@ ${rootCauseText}`;
    * talk to jacktfranklin@.
    */
   static #networkRequestVerbosely(
-      request: Trace.Types.Events.SyntheticNetworkRequest, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      request: Trace.Types.Events.SyntheticNetworkRequest, parsedTrace: Trace.TraceModel.ParsedTrace,
       customTitle?: string): string {
     const {
       url,
@@ -950,9 +1073,9 @@ ${rootCauseText}`;
     const navigationForEvent = Trace.Helpers.Trace.getNavigationForTraceEvent(
         request,
         request.args.data.frame,
-        parsedTrace.Meta.navigationsByFrameId,
+        parsedTrace.data.Meta.navigationsByFrameId,
     );
-    const baseTime = navigationForEvent?.ts ?? parsedTrace.Meta.traceBounds.min;
+    const baseTime = navigationForEvent?.ts ?? parsedTrace.data.Meta.traceBounds.min;
 
     // Gets all the timings for this request, relative to the base time.
     // Note that this is the start time, not total time. E.g. "queuedAt: X"
@@ -969,7 +1092,7 @@ ${rootCauseText}`;
     const downloadTime = syntheticData.finishTime - syntheticData.downloadStart;
 
     const renderBlocking = Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(request);
-    const initiator = parsedTrace.NetworkRequests.eventToInitiator.get(request);
+    const initiator = parsedTrace.data.NetworkRequests.eventToInitiator.get(request);
 
     const priorityLines = [];
     if (initialPriority === priority) {
@@ -1029,7 +1152,7 @@ ${NetworkRequestFormatter.formatHeaders('Response headers', responseHeaders ?? [
   // format description.
   static #networkRequestsArrayCompressed(
       requests: readonly Trace.Types.Events.SyntheticNetworkRequest[],
-      parsedTrace: Trace.Handlers.Types.ParsedTrace): string {
+      parsedTrace: Trace.TraceModel.ParsedTrace): string {
     const networkDataString = `
 Network requests data:
 
@@ -1095,8 +1218,8 @@ The order of headers corresponds to an internal fixed list. If a header is not p
    * See `networkDataFormatDescription` above for specifics.
    */
   static #networkRequestCompressedFormat(
-      urlIndex: number, request: Trace.Types.Events.SyntheticNetworkRequest,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace, urlIdToIndex: Map<string, number>): string {
+      urlIndex: number, request: Trace.Types.Events.SyntheticNetworkRequest, parsedTrace: Trace.TraceModel.ParsedTrace,
+      urlIdToIndex: Map<string, number>): string {
     const {
       statusCode,
       initialPriority,
@@ -1111,9 +1234,9 @@ The order of headers corresponds to an internal fixed list. If a header is not p
     const navigationForEvent = Trace.Helpers.Trace.getNavigationForTraceEvent(
         request,
         request.args.data.frame,
-        parsedTrace.Meta.navigationsByFrameId,
+        parsedTrace.data.Meta.navigationsByFrameId,
     );
-    const baseTime = navigationForEvent?.ts ?? parsedTrace.Meta.traceBounds.min;
+    const baseTime = navigationForEvent?.ts ?? parsedTrace.data.Meta.traceBounds.min;
     const queuedTime = micros(request.ts - baseTime);
     const requestSentTime = micros(syntheticData.sendStartTime - baseTime);
     const downloadCompleteTime = micros(syntheticData.finishTime - baseTime);
@@ -1168,13 +1291,13 @@ The order of headers corresponds to an internal fixed list. If a header is not p
   }
 
   static #getInitiatorChain(
-      parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      parsedTrace: Trace.TraceModel.ParsedTrace,
       request: Trace.Types.Events.SyntheticNetworkRequest): Trace.Types.Events.SyntheticNetworkRequest[] {
     const initiators: Trace.Types.Events.SyntheticNetworkRequest[] = [];
 
     let cur: Trace.Types.Events.SyntheticNetworkRequest|undefined = request;
     while (cur) {
-      const initiator = parsedTrace.NetworkRequests.eventToInitiator.get(cur);
+      const initiator = parsedTrace.data.NetworkRequests.eventToInitiator.get(cur);
       if (initiator) {
         // Should never happen, but if it did that would be an infinite loop.
         if (initiators.includes(initiator)) {

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -900,6 +900,12 @@ Available insights:
     description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
     relevant trace bounds: {min: 157423742399, max: 157427277086}
     example question: Which third parties are having the largest impact on my page performance?
+  - insight name: Cache
+    description: A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).
+    relevant trace bounds: {min: 157423742399, max: 157426980482}
+    estimated metric savings: FCP 0 ms, LCP 0 ms
+    estimated wasted bytes: 847.4 kB
+    example question: What caching strategies can I apply to improve my page performance?
   - insight name: LegacyJavaScript
     description: Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)
     relevant trace bounds: {min: 157423489126, max: 157426132225}

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

@@ -9,9 +9,8 @@ import {PerformanceInsightFormatter, TraceEventFormatter} from './PerformanceIns
 import {bytes, micros, millis} from './UnitFormatters.js';
 
 export class PerformanceTraceFormatter {
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  #parsedTrace: Trace.TraceModel.ParsedTrace;
   #insightSet: Trace.Insights.Types.InsightSet|null;
-  #traceMetadata: Trace.Types.File.MetaData;
   #eventsSerializer: Trace.EventsSerializer.EventsSerializer;
 
   constructor(focus: TimelineUtils.AIContext.AgentFocus, eventsSerializer: Trace.EventsSerializer.EventsSerializer) {
@@ -21,7 +20,6 @@ export class PerformanceTraceFormatter {
 
     this.#parsedTrace = focus.data.parsedTrace;
     this.#insightSet = focus.data.insightSet;
-    this.#traceMetadata = focus.data.traceMetadata;
     this.#eventsSerializer = eventsSerializer;
   }
 
@@ -37,7 +35,8 @@ export class PerformanceTraceFormatter {
   formatTraceSummary(): string {
     const parsedTrace = this.#parsedTrace;
     const insightSet = this.#insightSet;
-    const traceMetadata = this.#traceMetadata;
+    const traceMetadata = this.#parsedTrace.metadata;
+    const data = parsedTrace.data;
 
     const parts = [];
 
@@ -45,8 +44,8 @@ export class PerformanceTraceFormatter {
     const cls = insightSet ? Trace.Insights.Common.getCLS(insightSet) : null;
     const inp = insightSet ? Trace.Insights.Common.getINP(insightSet) : null;
 
-    parts.push(`URL: ${parsedTrace.Meta.mainFrameURL}`);
-    parts.push(`Bounds: ${this.serializeBounds(parsedTrace.Meta.traceBounds)}`);
+    parts.push(`URL: ${data.Meta.mainFrameURL}`);
+    parts.push(`Bounds: ${this.serializeBounds(data.Meta.traceBounds)}`);
     parts.push('CPU throttling: ' + (traceMetadata.cpuThrottling ? `${traceMetadata.cpuThrottling}x` : 'none'));
     parts.push(`Network throttling: ${traceMetadata.networkThrottling ?? 'none'}`);
     if (lcp || cls || inp) {
@@ -178,7 +177,7 @@ export class PerformanceTraceFormatter {
     const parsedTrace = this.#parsedTrace;
     const insightSet = this.#insightSet;
 
-    const bounds = parsedTrace.Meta.traceBounds;
+    const bounds = parsedTrace.data.Meta.traceBounds;
     const rootNode = TimelineUtils.InsightAIContext.AIQueries.mainThreadActivityBottomUp(
         insightSet?.navigation?.args.data?.navigationId,
         bounds,
@@ -231,7 +230,7 @@ export class PerformanceTraceFormatter {
     const parsedTrace = this.#parsedTrace;
     const insightSet = this.#insightSet;
 
-    const bounds = parsedTrace.Meta.traceBounds;
+    const bounds = parsedTrace.data.Meta.traceBounds;
     const longestTaskTrees = TimelineUtils.InsightAIContext.AIQueries.longestTasks(
         insightSet?.navigation?.args.data?.navigationId, bounds, parsedTrace, 3);
     if (!longestTaskTrees || longestTaskTrees.length === 0) {
@@ -312,7 +311,7 @@ export class PerformanceTraceFormatter {
       results.push(this.#serializeBottomUpRootNode(bottomUpRootNode, 20));
     }
 
-    const thirdPartySummaries = Trace.Extras.ThirdParties.summarizeByThirdParty(this.#parsedTrace, bounds);
+    const thirdPartySummaries = Trace.Extras.ThirdParties.summarizeByThirdParty(this.#parsedTrace.data, bounds);
     if (thirdPartySummaries.length) {
       results.push('# Third parties');
       results.push(this.#formatThirdPartyEntitySummaries(thirdPartySummaries));
@@ -337,7 +336,7 @@ export class PerformanceTraceFormatter {
   formatNetworkTrackSummary(bounds: Trace.Types.Timing.TraceWindowMicro): string {
     const results = [];
 
-    const requests = this.#parsedTrace.NetworkRequests.byTime.filter(
+    const requests = this.#parsedTrace.data.NetworkRequests.byTime.filter(
         request => Trace.Helpers.Timing.eventIsInBounds(request, bounds));
     const requestsText = TraceEventFormatter.networkRequests(requests, this.#parsedTrace, {verbose: false});
     results.push('# Network requests summary');

package/front_end/models/badges/AiExplorerBadge.ts

@@ -0,0 +1,21 @@
+// 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 {Badge, type BadgeAction} from './Badge.js';
+
+const AI_EXPLORER_BADGE_URI = new URL('../../Images/ai-explorer-badge.svg', import.meta.url).toString();
+export class AiExplorerBadge extends Badge {
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fai-explorer';
+  override readonly title = 'AI Explorer';
+  override readonly imageUri = AI_EXPLORER_BADGE_URI;
+
+  override readonly interestedActions = [
+    // TODO(ergunsh): Instrument related actions.
+  ] as const;
+
+  handleAction(_action: BadgeAction): void {
+    this.trigger();
+  }
+}

package/front_end/models/badges/Badge.ts

@@ -5,9 +5,11 @@
 import * as Common from '../../core/common/common.js';
 
 export enum BadgeAction {
+  GDP_SIGN_UP_COMPLETE = 'gdp-sign-up-complete',
   CSS_RULE_MODIFIED = 'css-rule-modified',
   DOM_ELEMENT_OR_ATTRIBUTE_EDITED = 'dom-element-or-attribute-edited',
   MODERN_DOM_BADGE_CLICKED = 'modern-dom-badge-clicked',
+  // TODO(ergunsh): Instrument performance insight clicks.
   PERFORMANCE_INSIGHT_CLICKED = 'performance-insight-clicked',
 }
 
@@ -47,11 +49,6 @@ export abstract class Badge {
   }
 
   activate(): void {
-    // We don't reactivate a badge that's triggered before.
-    if (this.#triggeredBefore) {
-      return;
-    }
-
     // The event listeners are already registered, we don't re-register them.
     if (this.#eventListeners.length > 0) {
       return;
@@ -70,5 +67,6 @@ export abstract class Badge {
 
     Common.EventTarget.removeEventListeners(this.#eventListeners);
     this.#eventListeners = [];
+    this.#triggeredBefore = false;
   }
 }

package/front_end/models/badges/CodeWhispererBadge.ts

@@ -0,0 +1,21 @@
+// 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 {Badge, type BadgeAction} from './Badge.js';
+
+const CODE_WHISPERER_BADGE_IMAGE_URI = new URL('../../Images/code-whisperer-badge.svg', import.meta.url).toString();
+export class CodeWhispererBadge extends Badge {
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fcode-whisperer';
+  override readonly title = 'Code Whisperer';
+  override readonly imageUri = CODE_WHISPERER_BADGE_IMAGE_URI;
+
+  override readonly interestedActions = [
+    // TODO(ergunsh): Instrument related actions.
+  ] as const;
+
+  handleAction(_action: BadgeAction): void {
+    this.trigger();
+  }
+}

package/front_end/models/badges/DOMDetectiveBadge.ts

@@ -4,14 +4,15 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
-const DOM_DETECTIVE_BADGE_IMAGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
+const DOM_DETECTIVE_BADGE_IMAGE_URI = new URL('../../Images/dom-detective-badge.svg', import.meta.url).toString();
 export class DOMDetectiveBadge extends Badge {
-  override readonly name = 'awards/dom-detective-badge';
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fdom-detective';
   override readonly title = 'DOM Detective';
   override readonly imageUri = DOM_DETECTIVE_BADGE_IMAGE_URI;
 
   override readonly interestedActions = [
-    BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
+    BadgeAction.MODERN_DOM_BADGE_CLICKED,
   ] as const;
 
   handleAction(_action: BadgeAction): void {

package/front_end/models/badges/SpeedsterBadge.ts

@@ -4,12 +4,14 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
-const SPEEDSTER_BADGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
+const SPEEDSTER_BADGE_URI = new URL('../../Images/speedster-badge.svg', import.meta.url).toString();
 export class SpeedsterBadge extends Badge {
-  // TODO(ergunsh): Update the name to be the actual badge for DevTools.
-  override readonly name = 'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Flegacy%2Ftest';
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fspeedster';
   override readonly title = 'Speedster';
-  override readonly interestedActions = [BadgeAction.PERFORMANCE_INSIGHT_CLICKED] as const;
+  override readonly interestedActions = [
+    BadgeAction.PERFORMANCE_INSIGHT_CLICKED,
+  ] as const;
   override readonly imageUri = SPEEDSTER_BADGE_URI;
 
   handleAction(_action: BadgeAction): void {

package/front_end/models/badges/StarterBadge.ts

@@ -4,16 +4,17 @@
 
 import {Badge, BadgeAction} from './Badge.js';
 
-const STARTER_BADGE_IMAGE_URI = new URL('../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
+const STARTER_BADGE_IMAGE_URI = new URL('../../Images/devtools-user-badge.svg', import.meta.url).toString();
 export class StarterBadge extends Badge {
   override readonly isStarterBadge = true;
-  // TODO(ergunsh): Update the name to be the actual badge for DevTools.
-  override readonly name = 'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Fprofile%2Fcreated-profile';
+  override readonly name =
+      'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fchrome-devtools-user';
   override readonly title = 'Chrome DevTools User';
   override readonly imageUri = STARTER_BADGE_IMAGE_URI;
 
   // TODO(ergunsh): Add remaining non-trivial event definitions
   override readonly interestedActions = [
+    BadgeAction.GDP_SIGN_UP_COMPLETE,
     BadgeAction.CSS_RULE_MODIFIED,
     BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
   ] as const;

package/front_end/models/badges/UserBadges.ts

@@ -5,7 +5,9 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 
+import {AiExplorerBadge} from './AiExplorerBadge.js';
 import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext} from './Badge.js';
+import {CodeWhispererBadge} from './CodeWhispererBadge.js';
 import {DOMDetectiveBadge} from './DOMDetectiveBadge.js';
 import {SpeedsterBadge} from './SpeedsterBadge.js';
 import {StarterBadge} from './StarterBadge.js';
@@ -31,6 +33,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     StarterBadge,
     SpeedsterBadge,
     DOMDetectiveBadge,
+    CodeWhispererBadge,
+    AiExplorerBadge,
   ];
 
   private constructor() {
@@ -98,7 +102,6 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   // TODO(ergunsh): Implement starter badge dismissal, snooze count & timestamp checks.
-  // TODO(ergunsh): Implement checking for previously awarded badges.
   async #reconcileBadges(): Promise<void> {
     const syncInfo = await new Promise<Host.InspectorFrontendHostAPI.SyncInformation>(
         resolve => Host.InspectorFrontendHost.InspectorFrontendHostInstance.getSyncInformation(resolve));
@@ -120,8 +123,31 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       return;
     }
 
-    const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting?.get());
+    let awardedBadgeNames: Set<string>|null = null;
+    if (gdpProfile) {
+      awardedBadgeNames = await Host.GdpClient.GdpClient.instance().getAwardedBadgeNames(
+          {names: this.#allBadges.map(badge => badge.name)});
+      // This is a conservative approach. We bail out if `awardedBadgeNames` is null
+      // when there is a profile to prevent a negative user experience.
+      //
+      // A failure here (e.g., from a typo in a badge name) could cause us to
+      // re-trigger the "Receive badges" nudge for a user who has already earned the
+      // starter badge and opted out of receiving badges.
+      //
+      // The trade-off is, we silently failing to enable badge mechanism rather than annoying the user.
+      if (!awardedBadgeNames) {
+        this.#deactivateAllBadges();
+        return;
+      }
+    }
+
+    const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting.get());
     for (const badge of this.#allBadges) {
+      if (awardedBadgeNames?.has(badge.name)) {
+        badge.deactivate();
+        continue;
+      }
+
       const shouldActivateStarterBadge = badge.isStarterBadge && isEligibleToCreateProfile;
       const shouldActivateActivityBasedBadge =
           !badge.isStarterBadge && Boolean(gdpProfile) && receiveBadgesSettingEnabled;
@@ -139,6 +165,6 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   isReceiveBadgesSettingEnabled(): boolean {
-    return Boolean(this.#receiveBadgesSetting?.get());
+    return Boolean(this.#receiveBadgesSetting.get());
   }
 }

package/front_end/models/bindings/CSSWorkspaceBinding.ts

@@ -283,7 +283,7 @@ export class LiveLocation extends LiveLocationWithPool {
   readonly #lineNumber: number;
   readonly #columnNumber: number;
   readonly #info: ModelInfo;
-  headerInternal: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null;
+  #header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null;
   constructor(
       rawLocation: SDK.CSSModel.CSSLocation, info: ModelInfo,
       updateDelegate: (arg0: LiveLocationInterface) => Promise<void>, locationPool: LiveLocationPool) {
@@ -292,22 +292,22 @@ export class LiveLocation extends LiveLocationWithPool {
     this.#lineNumber = rawLocation.lineNumber;
     this.#columnNumber = rawLocation.columnNumber;
     this.#info = info;
-    this.headerInternal = null;
+    this.#header = null;
   }
 
   header(): SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null {
-    return this.headerInternal;
+    return this.#header;
   }
 
   setHeader(header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader|null): void {
-    this.headerInternal = header;
+    this.#header = header;
   }
 
   override async uiLocation(): Promise<Workspace.UISourceCode.UILocation|null> {
-    if (!this.headerInternal) {
+    if (!this.#header) {
       return null;
     }
-    const rawLocation = new SDK.CSSModel.CSSLocation(this.headerInternal, this.#lineNumber, this.#columnNumber);
+    const rawLocation = new SDK.CSSModel.CSSLocation(this.#header, this.#lineNumber, this.#columnNumber);
     return CSSWorkspaceBinding.instance().rawLocationToUILocation(rawLocation);
   }