chrome-devtools-frontend 1.0.1643855 → 1.0.1646286

package/front_end/models/trace/Styles.ts

@@ -291,6 +291,10 @@ const UIStrings = {
    * @description Text in Timeline UIUtils of the Performance panel
    */
   frameStartedLoading: 'Frame started loading',
+  /**
+   * @description Text in Timeline UIUtils of the Performance panel
+   */
+  softNavigationStart: 'Soft navigation start',
   /**
    * @description Text in Timeline UIUtils of the Performance panel
    */
@@ -307,6 +311,10 @@ const UIStrings = {
    * @description Text in Timeline UIUtils of the Performance panel
    */
   firstContentfulPaint: 'First Contentful Paint',
+  /**
+   * @description Text in Timeline UIUtils of the Performance panel
+   */
+  softFirstContentfulPaint: 'Soft First Contentful Paint',
   /**
    * @description Text in Timeline UIUtils of the Performance panel
    */
@@ -866,6 +874,12 @@ export function maybeInitSylesMap(): EventStylesMap {
         true,
         ),
 
+    [Types.Events.Name.SOFT_NAVIGATION_START]: new TimelineRecordStyle(
+        i18nString(UIStrings.softNavigationStart),
+        defaultCategoryStyles.loading,
+        true,
+        ),
+
     [Types.Events.Name.MARK_FIRST_PAINT]: new TimelineRecordStyle(
         i18nString(UIStrings.firstPaint),
         defaultCategoryStyles.painting,
@@ -878,6 +892,12 @@ export function maybeInitSylesMap(): EventStylesMap {
         true,
         ),
 
+    [Types.Events.Name.MARK_SOFT_FCP]: new TimelineRecordStyle(
+        i18nString(UIStrings.softFirstContentfulPaint),
+        defaultCategoryStyles.rendering,
+        true,
+        ),
+
     [Types.Events.Name.MARK_LCP_CANDIDATE]: new TimelineRecordStyle(
         i18nString(UIStrings.largestContentfulPaint),
         defaultCategoryStyles.rendering,
@@ -1024,11 +1044,11 @@ export function maybeInitSylesMap(): EventStylesMap {
     [Types.Events.Name.ASYNC_TASK]:
         new TimelineRecordStyle(i18nString(UIStrings.asyncTask), defaultCategoryStyles.async),
 
-    [Types.Events.Name.LAYOUT_SHIFT]: new TimelineRecordStyle(
-        i18nString(UIStrings.layoutShift), defaultCategoryStyles.experience,
-        /* Mark LayoutShifts as hidden; in the timeline we render
-        * SyntheticLayoutShifts so those are the ones visible to the user */
-        true),
+    [Types.Events.Name.LAYOUT_SHIFT]:
+        new TimelineRecordStyle(i18nString(UIStrings.layoutShift), defaultCategoryStyles.experience,
+                                /* Mark LayoutShifts as hidden; in the timeline we render
+                                 * SyntheticLayoutShifts so those are the ones visible to the user */
+                                true),
 
     [Types.Events.Name.SYNTHETIC_LAYOUT_SHIFT]:
         new TimelineRecordStyle(i18nString(UIStrings.layoutShift), defaultCategoryStyles.experience),
@@ -1123,9 +1143,11 @@ export function markerDetailsForEvent(event: Types.Events.Event): {
 } {
   let title = '';
   let color = 'var(--color-text-primary)';
-  if (Types.Events.isFirstContentfulPaint(event)) {
+  if (Types.Events.isAnyFirstContentfulPaint(event)) {
     color = 'var(--sys-color-green-bright)';
-    title = Handlers.ModelHandlers.PageLoadMetrics.MetricName.FCP;
+    title = (Types.Events.isSoftFirstContentfulPaint(event)) ?
+        Handlers.ModelHandlers.PageLoadMetrics.MetricName.SOFT_FCP :
+        Handlers.ModelHandlers.PageLoadMetrics.MetricName.FCP;
   }
   if (Types.Events.isAnyLargestContentfulPaintCandidate(event)) {
     color = 'var(--sys-color-green)';

package/front_end/models/trace/handlers/NetworkRequestsHandler.ts

@@ -213,6 +213,14 @@ export function handleEvent(event: Types.Events.Event): void {
 
 export async function finalize(): Promise<void> {
   const {rendererProcessesByFrame} = metaHandlerData();
+
+  const allowedProtocols = [
+    'blob:',
+    'file:',
+    'filesystem:',
+    'http:',
+    'https:',
+  ];
   for (const [requestId, request] of requestMap.entries()) {
     // If we have an incomplete set of events here, we choose to drop the network
     // request rather than attempt to synthesize the missing data.
@@ -248,7 +256,7 @@ export async function finalize(): Promise<void> {
       }
 
       redirects.push({
-        url: sendRequest.args.data.url,
+        url: allowedProtocols.some(p => sendRequest.args.data.url.startsWith(p)) ? sendRequest.args.data.url : '',
         priority: sendRequest.args.data.priority,
         requestMethod: sendRequest.args.data.requestMethod,
         ts,
@@ -360,15 +368,7 @@ export async function finalize(): Promise<void> {
       }
     }
 
-    // TODO: consider allowing chrome / about.
-    const allowedProtocols = [
-      'blob:',
-      'file:',
-      'filesystem:',
-      'http:',
-      'https:',
-    ];
-    if (!allowedProtocols.some(p => firstSendRequest.args.data.url.startsWith(p))) {
+    if (!allowedProtocols.some(p => finalSendRequest.args.data.url.startsWith(p))) {
       continue;
     }
 
@@ -572,7 +572,11 @@ export async function finalize(): Promise<void> {
               responseHeaders: request.receiveResponse?.args.data.headers ?? null,
               fetchPriorityHint: finalSendRequest.args.data.fetchPriorityHint ?? 'auto',
               initiator: finalSendRequest.args.data.initiator,
-              stackTrace: finalSendRequest.args.data.stackTrace,
+              stackTrace: finalSendRequest.args.data.stackTrace?.map(
+                  frame => ({
+                    ...frame,
+                    url: allowedProtocols.some(p => frame.url.startsWith(p)) ? frame.url : '',
+                  })),
               timing,
               lrServerResponseTime,
               url,

package/front_end/models/trace/handlers/PageLoadMetricsHandler.ts

@@ -75,6 +75,28 @@ export function handleEvent(event: Types.Events.Event): void {
     return;
   }
   pageLoadEventsArray.push(event);
+
+  // A soft nav entry includes the Soft FCP details but we want to process both
+  // so push a separate Soft FCP event
+  if (Types.Events.isSoftNavigationStart(event) && event.args?.context?.firstContentfulPaint) {
+    const syntheticSoftFcpEvent = Helpers.SyntheticEvents.SyntheticEventsManager
+                                      .registerSyntheticEvent<Types.Events.SyntheticSoftFirstContentfulPaint>({
+                                        name: Types.Events.Name.MARK_SOFT_FCP,
+                                        ph: Types.Events.Phase.MARK,
+                                        rawSourceEvent: event,
+                                        pid: event.pid,
+                                        tid: event.tid,
+                                        ts: Types.Timing.Micro(event.args.context.firstContentfulPaint),
+                                        cat: event.cat,
+                                        args: {
+                                          frame: event.args.frame,
+                                          context: {
+                                            ...event.args.context,
+                                          },
+                                        },
+                                      });
+    pageLoadEventsArray.push(syntheticSoftFcpEvent);
+  }
 }
 
 function storePageLoadMetricAgainstNavigationId(
@@ -101,7 +123,7 @@ function storePageLoadMetricAgainstNavigationId(
     return;
   }
 
-  if (Types.Events.isFirstContentfulPaint(event)) {
+  if (Types.Events.isAnyFirstContentfulPaint(event)) {
     const fcpTime = Types.Timing.Micro(event.ts - navigation.ts);
     const classification = scoreClassificationForFirstContentfulPaint(fcpTime);
     const metricScore = {event, metricName: MetricName.FCP, classification, navigation, timing: fcpTime};
@@ -226,7 +248,7 @@ function storeMetricScore(frameId: string, navigation: AnyNavigationStart, metri
 }
 
 export function getFrameIdForPageLoadEvent(event: Types.Events.PageLoadEvent): string {
-  if (Types.Events.isFirstContentfulPaint(event) || Types.Events.isInteractiveTime(event) ||
+  if (Types.Events.isAnyFirstContentfulPaint(event) || Types.Events.isInteractiveTime(event) ||
       Types.Events.isAnyLargestContentfulPaintCandidate(event) || Types.Events.isNavigationStart(event) ||
       Types.Events.isSoftNavigationStart(event) || Types.Events.isLayoutShift(event) ||
       Types.Events.isFirstPaint(event)) {
@@ -243,7 +265,7 @@ export function getFrameIdForPageLoadEvent(event: Types.Events.PageLoadEvent): s
 }
 
 function getNavigationForPageLoadEvent(event: Types.Events.PageLoadEvent): AnyNavigationStart|null {
-  if (Types.Events.isFirstContentfulPaint(event) || Types.Events.isAnyLargestContentfulPaintCandidate(event) ||
+  if (Types.Events.isAnyFirstContentfulPaint(event) || Types.Events.isAnyLargestContentfulPaintCandidate(event) ||
       Types.Events.isFirstPaint(event)) {
     const {navigationsByNavigationId, softNavigationsById} = metaHandlerData();
 
@@ -255,6 +277,12 @@ function getNavigationForPageLoadEvent(event: Types.Events.PageLoadEvent): AnyNa
         // The most recent soft navigation must have been before the trace started.
         return null;
       }
+    } else if (Types.Events.isSoftFirstContentfulPaint(event) && event.args.context?.performanceTimelineNavigationId) {
+      navigation = softNavigationsById.get(event.args.context.performanceTimelineNavigationId);
+      if (!navigation) {
+        // The most recent soft navigation must have been before the trace started.
+        return null;
+      }
     } else {
       const navigationId = event.args.data?.navigationId;
       if (!navigationId) {
@@ -428,7 +456,7 @@ export async function finalize(): Promise<void> {
   // Filter out LCP candidates to use only definitive LCP values
   const allEventsButLCP =
       pageLoadEventsArray.filter(event => !Types.Events.isAnyLargestContentfulPaintCandidate(event));
-  const markerEvents = [...allFinalLCPEvents, ...allEventsButLCP].filter(Types.Events.isMarkerEvent);
+  const markerEvents = [...allEventsButLCP, ...allFinalLCPEvents].filter(Types.Events.isMarkerEvent);
   // Filter by main frame and sort.
   allMarkerEvents =
       markerEvents.filter(event => getFrameIdForPageLoadEvent(event) === mainFrame).sort((a, b) => a.ts - b.ts);
@@ -495,6 +523,7 @@ export const enum MetricName {
   NAV = 'Nav',
   // Soft Navigation and Soft Metrics
   SOFT_NAV = 'Nav*',
+  SOFT_FCP = 'FCP*',
   SOFT_LCP = 'LCP*',
   // Note: INP is handled in UserInteractionsHandler
 }

package/front_end/models/trace/helpers/Timing.ts

@@ -32,6 +32,16 @@ export function timeStampForEventAdjustedByClosestNavigation(
     if (navigationForEvent) {
       eventTimeStamp = event.ts - navigationForEvent.ts;
     }
+  } else if (Types.Events.isSoftFirstContentfulPaint(event) && event.args?.context?.performanceTimelineNavigationId) {
+    const navigationForEvent = softNavigationsById.get(event.args.context.performanceTimelineNavigationId);
+    if (navigationForEvent) {
+      eventTimeStamp = event.ts - navigationForEvent.ts;
+    }
+  } else if (Types.Events.isSoftNavigationStart(event)) {
+    const navigationForEvent = getNavigationForTraceEvent(event, event.args.frame, navigationsByFrameId);
+    if (navigationForEvent) {
+      eventTimeStamp = event.ts - navigationForEvent.ts;
+    }
   } else if (event.args?.data?.navigationId) {
     const navigationForEvent = navigationsByNavigationId.get(event.args.data.navigationId);
     if (navigationForEvent) {

package/front_end/models/trace/types/TraceEvents.ts

@@ -737,6 +737,16 @@ export interface FirstContentfulPaint extends Mark {
   };
 }
 
+// Soft FCP is basically a copy of SoftNavigationStart but with a different name
+// and a different ts.
+export interface SyntheticSoftFirstContentfulPaint extends Omit<SoftNavigationStart, 'name'|'ph'>,
+                                                           Omit<SyntheticBased, 'name'|'ph'|'args'> {
+  name: Name.MARK_SOFT_FCP;
+  ph: Phase.MARK;
+}
+
+export type AnyFirstContentfulPaint = FirstContentfulPaint|SyntheticSoftFirstContentfulPaint;
+
 export interface FirstPaint extends Mark {
   name: Name.MARK_FIRST_PAINT;
   args: Args&{
@@ -747,14 +757,14 @@ export interface FirstPaint extends Mark {
   };
 }
 
-export type PageLoadEvent = FirstContentfulPaint|MarkDOMContent|InteractiveTime|AnyLargestContentfulPaintCandidate|
+export type PageLoadEvent = AnyFirstContentfulPaint|MarkDOMContent|InteractiveTime|AnyLargestContentfulPaintCandidate|
     LayoutShift|FirstPaint|MarkLoad|NavigationStart|SoftNavigationStart;
 
 const markerTypeGuards = [
   isMarkDOMContent,
   isMarkLoad,
   isFirstPaint,
-  isFirstContentfulPaint,
+  isAnyFirstContentfulPaint,
   isAnyLargestContentfulPaintCandidate,
   isNavigationStart,
   isSoftNavigationStart,
@@ -765,6 +775,7 @@ export const MarkerName = [
   Name.MARK_LOAD,
   Name.MARK_FIRST_PAINT,
   Name.MARK_FCP,
+  Name.MARK_SOFT_FCP,
   Name.MARK_LCP_CANDIDATE,
   Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION,
   Name.NAVIGATION_START,
@@ -2285,6 +2296,14 @@ export function isFirstContentfulPaint(event: Event): event is FirstContentfulPa
   return event.name === Name.MARK_FCP;
 }
 
+export function isSoftFirstContentfulPaint(event: Event): event is SyntheticSoftFirstContentfulPaint {
+  return event.name === Name.MARK_SOFT_FCP;
+}
+
+export function isAnyFirstContentfulPaint(event: Event): event is AnyFirstContentfulPaint {
+  return event.name === Name.MARK_FCP || event.name === Name.MARK_SOFT_FCP;
+}
+
 export function isAnyLargestContentfulPaintCandidate(event: Event): event is AnyLargestContentfulPaintCandidate {
   return event.name === Name.MARK_LCP_CANDIDATE || event.name === Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION;
 }
@@ -3168,6 +3187,7 @@ export const enum Name {
   MARK_DOM_CONTENT = 'MarkDOMContent',
   MARK_FIRST_PAINT = 'firstPaint',
   MARK_FCP = 'firstContentfulPaint',
+  MARK_SOFT_FCP = 'SyntheticSoftFirstContentfulPaint',
   MARK_LCP_CANDIDATE = 'largestContentfulPaint::Candidate',
   MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION = 'largestContentfulPaint::CandidateForSoftNavigation',
   MARK_LCP_INVALIDATE = 'largestContentfulPaint::Invalidate',

package/front_end/models/web_mcp/WebMCPModel.ts

@@ -9,7 +9,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../bindings/bindings.js';
-import * as StackTrace from '../stack_trace/stack_trace.js';
+import type * as StackTrace from '../stack_trace/stack_trace.js';
 
 export const enum Events {
   TOOLS_ADDED = 'ToolsAdded',
@@ -18,20 +18,13 @@ export const enum Events {
   TOOL_RESPONDED = 'ToolResponded',
 }
 
-export interface ExceptionDetails {
-  readonly error: SDK.RemoteObject.RemoteObject;
-  readonly description: string;
-  readonly frames: StackTrace.ErrorStackParser.ParsedErrorFrame[];
-  readonly cause?: ExceptionDetails;
-}
-
 export class Result {
   readonly status: Protocol.WebMCP.InvocationStatus;
   readonly output?: unknown;
   readonly errorText?: string;
   // TODO(crbug.com/494516094) Clean this up if the target disappears?
   readonly #exception?: SDK.RemoteObject.RemoteObject;
-  #exceptionDetails?: Promise<ExceptionDetails|undefined>;
+  #symbolizedError?: Promise<Bindings.SymbolizedError.SymbolizedError|null>;
 
   constructor(
       status: Protocol.WebMCP.InvocationStatus, output: unknown|undefined, errorText: string|undefined,
@@ -42,46 +35,13 @@ export class Result {
     this.output = output;
   }
 
-  get exceptionDetails(): Promise<ExceptionDetails|undefined>|undefined {
-    if (!this.#exceptionDetails) {
-      this.#exceptionDetails = this.#resolveExceptionDetails(this.#exception);
-    }
-    return this.#exceptionDetails;
-  }
-
-  async #resolveExceptionDetails(errorObj: SDK.RemoteObject.RemoteObject|undefined):
-      Promise<ExceptionDetails|undefined> {
-    if (!errorObj) {
-      return undefined;
-    }
-    const error = SDK.RemoteObject.RemoteError.objectAsError(errorObj);
-    const [details, cause] = await Promise.all([error.exceptionDetails(), error.cause()]);
-    const description = error.errorStack;
-
-    const frames =
-        StackTrace.ErrorStackParser.parseSourcePositionsFromErrorStack(errorObj.runtimeModel(), error.errorStack) || [];
-    if (details?.stackTrace) {
-      StackTrace.ErrorStackParser.augmentErrorStackWithScriptIds(frames, details.stackTrace);
+  get symbolizedError(): Promise<Bindings.SymbolizedError.SymbolizedError|null>|undefined {
+    if (!this.#symbolizedError) {
+      this.#symbolizedError = this.#exception ?
+          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createSymbolizedError(this.#exception) :
+          Promise.resolve(null);
     }
-
-    if (cause?.subtype === 'error') {
-      return {error: errorObj, description, frames, cause: await this.#resolveExceptionDetails(cause)};
-    }
-
-    if (cause?.type === 'string') {
-      return {
-        error: errorObj,
-        description,
-        frames,
-        cause: {
-          error: cause,
-          description: cause.value as string,
-          frames: [],
-        }
-      };
-    }
-
-    return {error: errorObj, description, frames};
+    return this.#symbolizedError;
   }
 }
 

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -576,12 +576,12 @@ function createDOMNodeContext(node: SDK.DOMModel.DOMNode|null): AiAssistanceMode
   return new AiAssistanceModel.DOMNodeContext.DOMNodeContext(node);
 }
 
-function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): AiAssistanceModel.FileAgent.FileContext|
+function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): AiAssistanceModel.FileContext.FileContext|
     null {
   if (!file) {
     return null;
   }
-  return new AiAssistanceModel.FileAgent.FileContext(file);
+  return new AiAssistanceModel.FileContext.FileContext(file);
 }
 
 function createAccessibilityContext(report: LighthousePanel.LighthousePanel.ActiveLighthouseReport|null):
@@ -592,13 +592,13 @@ function createAccessibilityContext(report: LighthousePanel.LighthousePanel.Acti
   return new AiAssistanceModel.AccessibilityAgent.AccessibilityContext(report.report);
 }
 
-function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null):
-    AiAssistanceModel.NetworkAgent.RequestContext|null {
+function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|
+                              null): AiAssistanceModel.RequestContext.RequestContext|null {
   if (!request) {
     return null;
   }
   const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
-  return new AiAssistanceModel.NetworkAgent.RequestContext(request, calculator);
+  return new AiAssistanceModel.RequestContext.RequestContext(request, calculator);
 }
 
 function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentFocus|null):
@@ -666,10 +666,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #conversation?: AiAssistanceModel.AiConversation.AiConversation;
 
-  #selectedFile: AiAssistanceModel.FileAgent.FileContext|null = null;
+  #selectedFile: AiAssistanceModel.FileContext.FileContext|null = null;
   #selectedElement: AiAssistanceModel.DOMNodeContext.DOMNodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
-  #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
+  #selectedRequest: AiAssistanceModel.RequestContext.RequestContext|null = null;
 
   #selectedAccessibility: AiAssistanceModel.AccessibilityAgent.AccessibilityContext|null = null;
   #selectedStorage: AiAssistanceModel.StorageAgent.StorageContext|null = null;
@@ -1254,7 +1254,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
         if (Boolean(ev.data)) {
           const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
-          this.#selectedRequest = new AiAssistanceModel.NetworkAgent.RequestContext(ev.data, calculator);
+          this.#selectedRequest = new AiAssistanceModel.RequestContext.RequestContext(ev.data, calculator);
         } else {
           this.#selectedRequest = null;
         }
@@ -1280,7 +1280,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         if (!newFile || this.#selectedFile?.getItem() === newFile) {
           return;
         }
-        this.#selectedFile = new AiAssistanceModel.FileAgent.FileContext(ev.data);
+        this.#selectedFile = new AiAssistanceModel.FileContext.FileContext(ev.data);
         this.#updateConversationState(this.#conversation);
       };
 
@@ -1488,12 +1488,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     const context = this.#conversation.selectedContext;
-    if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+    if (context instanceof AiAssistanceModel.RequestContext.RequestContext) {
       const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
           context.getItem(), NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
       return Common.Revealer.reveal(requestLocation);
     }
-    if (context instanceof AiAssistanceModel.FileAgent.FileContext) {
+    if (context instanceof AiAssistanceModel.FileContext.FileContext) {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
     if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
@@ -1575,7 +1575,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         break;
       }
       case 'ai-assistance.storage-floating-button': {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromStoragePanelFloatingButton);
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromApplicationPanelFloatingButton);
+        targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE;
+        break;
+      }
+      case 'ai-assistance.application-panel-context': {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceOpenedFromApplicationPanel);
         targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE;
         break;
       }
@@ -1728,11 +1733,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #handleConversationContextChange = (data: unknown): void => {
-    if (data instanceof AiAssistanceModel.FileAgent.FileContext) {
+    if (data instanceof AiAssistanceModel.FileContext.FileContext) {
       this.#selectedFile = data;
     } else if (data instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext) {
       this.#selectedElement = data;
-    } else if (data instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+    } else if (data instanceof AiAssistanceModel.RequestContext.RequestContext) {
       this.#selectedRequest = data;
     } else if (data instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
       this.#selectedPerformanceTrace = data;
@@ -2116,7 +2121,8 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'drjones.performance-panel-context':
       case 'drjones.sources-floating-button':
       case 'drjones.sources-panel-context':
-      case 'ai-assistance.storage-floating-button': {
+      case 'ai-assistance.storage-floating-button':
+      case 'ai-assistance.application-panel-context': {
         void (async () => {
           const view = UI.ViewManager.ViewManager.instance().view(
               AiAssistancePanel.panelName,

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -313,3 +313,19 @@ UI.ActionRegistration.registerActionExtension({
   condition: config =>
       isStorageAgentFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
 });
+
+UI.ActionRegistration.registerActionExtension({
+  actionId: 'ai-assistance.application-panel-context',
+  contextTypes(): [] {
+    return [];
+  },
+  category: UI.ActionRegistration.ActionCategory.GLOBAL,
+  title: i18nAiBrandedString(UIStrings.debugWithGemini, UIStrings.debugWithAi),
+  configurableBindings: false,
+  async loadActionDelegate() {
+    const AiAssistance = await loadAiAssistanceModule();
+    return new AiAssistance.ActionDelegate();
+  },
+  condition: config =>
+      isStorageAgentFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
+});

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

@@ -171,13 +171,13 @@ export type ViewOutput = undefined;
 
 function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationContext<unknown>):
     Platform.UIString.LocalizedString {
-  if (context instanceof AiAssistanceModel.FileAgent.FileContext) {
+  if (context instanceof AiAssistanceModel.FileContext.FileContext) {
     return lockedString(UIStringsNotTranslate.removeContextFile);
   }
   if (context instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext) {
     return lockedString(UIStringsNotTranslate.removeContextElement);
   }
-  if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+  if (context instanceof AiAssistanceModel.RequestContext.RequestContext) {
     return lockedString(UIStringsNotTranslate.removeContextRequest);
   }
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
@@ -351,9 +351,9 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                                 })}
                               ></devtools-widget>` :
                             html`
-                          ${input.context instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
+                          ${input.context instanceof AiAssistanceModel.RequestContext.RequestContext ?
                             PanelUtils.PanelUtils.getIconForNetworkRequest(input.context.getItem()) :
-                            input.context instanceof AiAssistanceModel.FileAgent.FileContext ?
+                            input.context instanceof AiAssistanceModel.FileContext.FileContext ?
                             PanelUtils.PanelUtils.getIconForSourceFile(input.context.getItem()) :
                             input.context instanceof AiAssistanceModel.AccessibilityAgent.AccessibilityContext ?
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -52,6 +52,7 @@ import {BackForwardCacheTreeElement} from './BackForwardCacheTreeElement.js';
 import {BackgroundServiceModel} from './BackgroundServiceModel.js';
 import {BackgroundServiceView} from './BackgroundServiceView.js';
 import {BounceTrackingMitigationsTreeElement} from './BounceTrackingMitigationsTreeElement.js';
+import * as ApplicationComponents from './components/components.js';
 import {DeviceBoundSessionsModel} from './DeviceBoundSessionsModel.js';
 import {RootTreeElement as DeviceBoundSessionsRootTreeElement} from './DeviceBoundSessionsTreeElement.js';
 import {
@@ -94,10 +95,26 @@ import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
 import {WebMCPTreeElement} from './WebMCPTreeElement.js';
 
 const UIStrings = {
+  /**
+   * @description Text of a context menu item to start a chat with AI
+   */
+  startAChat: 'Start a chat',
+  /**
+   * @description Text of a context menu item to explain contents of a local/session storage bucket with AI
+   */
+  explainStorage: 'Explain storage',
+  /**
+   * @description Text of a context menu item to explain web cookies with AI
+   */
+  explainCookies: 'Explain cookies',
   /**
    * @description Text in Application Panel Sidebar of the Application panel
    */
   application: 'Application',
+  /**
+   * @description Text in Application Panel Sidebar of the Application panel
+   */
+  ads: 'Ads',
   /**
    * @description Text in Application Panel Sidebar of the Application panel
    */
@@ -342,6 +359,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   pushMessagingTreeElement: BackgroundServiceTreeElement;
   reportingApiTreeElement: ReportingApiTreeElement;
   webMcpTreeElement?: WebMCPTreeElement;
+  adsTreeElement?: ApplicationPanelTreeElement;
   deviceBoundSessionsRootTreeElement: DeviceBoundSessionsRootTreeElement|undefined;
   deviceBoundSessionsModel: DeviceBoundSessionsModel|undefined;
   preloadingSummaryTreeElement: PreloadingSummaryTreeElement|undefined;
@@ -391,6 +409,25 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
       this.applicationTreeElement.appendChild(this.webMcpTreeElement);
     }
 
+    if (Root.Runtime.hostConfig.devToolsAdsPanel?.enabled) {
+      const adsTreeElement = new ApplicationPanelTreeElement(panel, i18nString(UIStrings.ads), false, 'ads');
+      const icon = createIcon('experiment');
+      adsTreeElement.setLeadingIcons([icon]);
+      adsTreeElement.itemURL = 'ads://' as Platform.DevToolsPath.UrlString;
+      let adsView: ApplicationComponents.AdsView.AdsView;
+      adsTreeElement.onselect = (selectedByUser?: boolean): boolean => {
+        ApplicationPanelTreeElement.prototype.onselect.call(adsTreeElement, selectedByUser);
+        if (!adsView) {
+          adsView = new ApplicationComponents.AdsView.AdsView();
+        }
+        adsTreeElement.showView(adsView);
+        UI.UIUserMetrics.UIUserMetrics.instance().panelShown('ads');
+        return false;
+      };
+      this.adsTreeElement = adsTreeElement;
+      this.applicationTreeElement.appendChild(this.adsTreeElement);
+    }
+
     const storageSectionTitle = i18nString(UIStrings.storage);
     const storageTreeElement = this.addSidebarSection(storageSectionTitle, 'storage');
     this.localStorageListTreeElement = new ExpandableApplicationPanelTreeElement(
@@ -1792,6 +1829,22 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.clear), () => this.domStorage.clear(), {jslogContext: 'clear'});
+
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      const openAiAssistanceId = 'ai-assistance.application-panel-context';
+      if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+        submenu.defaultSection().appendItem(
+            i18nString(UIStrings.explainStorage),
+            () => action.execute({prompt: 'What is the purpose of this storage bucket?'}),
+            {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.storage'});
+      }
+    }
+
     void contextMenu.show();
   }
 }
@@ -1900,6 +1953,22 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.clear), () => this.resourcesPanel.clearCookies(this.target, this.#cookieDomain),
         {jslogContext: 'clear'});
+
+    const storageItem = this.#getStorageItem();
+    if (storageItem) {
+      const openAiAssistanceId = 'ai-assistance.application-panel-context';
+      if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+        UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+        submenu.defaultSection().appendItem(
+            i18nString(UIStrings.explainCookies),
+            () => action.execute({prompt: 'What is the purpose of these cookies?'}),
+            {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.cookies'});
+      }
+    }
+
     void contextMenu.show();
   }