chrome-devtools-frontend 1.0.1646714 → 1.0.1650035

package/front_end/generated/protocol.ts

@@ -2918,6 +2918,28 @@ export namespace CSS {
     specificity?: Specificity;
   }
 
+  /**
+   * Contribution of an individual simple selector to specificity.
+   */
+  export interface SpecificityComponent {
+    /**
+     * The simple selector text that contributes to specificity.
+     */
+    text: string;
+    /**
+     * The a component contribution.
+     */
+    a: integer;
+    /**
+     * The b component contribution.
+     */
+    b: integer;
+    /**
+     * The c component contribution.
+     */
+    c: integer;
+  }
+
   /**
    * Specificity:
    * https://drafts.csswg.org/selectors/#specificity-rules
@@ -2936,6 +2958,10 @@ export namespace CSS {
      * The c component, which represents the number of type selectors and pseudo-elements.
      */
     c: integer;
+    /**
+     * Per-simple-selector contributions used to explain this specificity.
+     */
+    components?: SpecificityComponent[];
   }
 
   /**
@@ -11136,10 +11162,6 @@ export namespace Network {
   export const enum CookieExemptionReason {
     None = 'None',
     UserSetting = 'UserSetting',
-    TPCDMetadata = 'TPCDMetadata',
-    TPCDDeprecationTrial = 'TPCDDeprecationTrial',
-    TopLevelTPCDDeprecationTrial = 'TopLevelTPCDDeprecationTrial',
-    TPCDHeuristics = 'TPCDHeuristics',
     EnterprisePolicy = 'EnterprisePolicy',
     StorageAccess = 'StorageAccess',
     TopLevelStorageAccess = 'TopLevelStorageAccess',

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -338,6 +338,13 @@ export interface NetworkRequestsListAiWidget {
     requests: SDK.NetworkRequest.NetworkRequest[],
   };
 }
+export interface NetworkTrackAiWidget {
+  name: 'NETWORK_TRACK';
+  data: {
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+    bounds: Trace.Types.Timing.TraceWindowMicro,
+  };
+}
 
 export interface LighthouseReportAiWidget {
   name: 'LIGHTHOUSE_REPORT';
@@ -376,7 +383,7 @@ export interface SourceCodeAiWidget {
 export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
     PerformanceTraceAiWidget|PerfInsightAiWidget|TimelineRangeSummaryAiWidget|BottomUpTreeAiWidget|SourceFileAiWidget|
     LighthouseReportAiWidget|TimelineEventSummaryAiWidget|NetworkRequestGeneralHeadersAiWidget|SourceCodeAiWidget|
-    SourceFilesListAiWidget|NetworkRequestsListAiWidget;
+    SourceFilesListAiWidget|NetworkRequestsListAiWidget|NetworkTrackAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -1232,6 +1232,13 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         this.#cacheFunctionResult(focus, key, summary);
         return {
           result: {summary},
+          widgets: [{
+            name: 'NETWORK_TRACK',
+            data: {
+              parsedTrace,
+              bounds,
+            },
+          }],
         };
       },
 

package/front_end/models/extensions/ExtensionAPI.ts

@@ -607,19 +607,29 @@ self.injectedExtensionAPI = function(
   }
 
   (Network.prototype as Pick<APIImpl.Network, 'getHAR'|'addRequestHeaders'>) = {
-    getHAR: function(this: PublicAPI.Chrome.DevTools.Network, callback?: (harLog: Object) => unknown): void {
-      function callbackWrapper(response: unknown): void {
-        const result =
-            response as ({entries: Array<HAR.Log.EntryDTO&{__proto__?: APIImpl.Request, _requestId?: number}>});
-        const entries = (result?.entries) || [];
-        for (let i = 0; i < entries.length; ++i) {
-          entries[i].__proto__ = new (Constructor(Request))(entries[i]._requestId as number);
-          delete entries[i]._requestId;
-        }
-        callback?.(result);
-      }
-      extensionServer.sendRequest({command: PrivateAPI.Commands.GetHAR}, callback && callbackWrapper);
-    },
+    getHAR: function(this: PublicAPI.Chrome.DevTools.Network, _callback?: (harLog: object) => unknown): Promise<object>|
+        void {
+          const {callback: callbackArg, promise, resolve, reject} = callbackOrPromise<object>(arguments);
+
+          function callbackWrapper(response: unknown): void {
+            if (checkErrorAndReject(response, reject)) {
+              return;
+            }
+
+            const result =
+                response as ({entries: Array<HAR.Log.EntryDTO&{__proto__?: APIImpl.Request, _requestId?: number}>});
+            const entries = (result?.entries) || [];
+            for (let i = 0; i < entries.length; ++i) {
+              entries[i].__proto__ = new (Constructor(Request))(entries[i]._requestId as number);
+              delete entries[i]._requestId;
+            }
+            resolve?.(result);
+            callbackArg?.(result);
+          }
+          extensionServer.sendRequest({command: PrivateAPI.Commands.GetHAR}, callbackWrapper);
+
+          return promise;
+        } as PublicAPI.Chrome.DevTools.Network['getHAR'],
 
     addRequestHeaders: function(headers: Record<string, string>): void {
       extensionServer.sendRequest(
@@ -631,15 +641,31 @@ self.injectedExtensionAPI = function(
     this._id = id;
   }
 
+  interface GetContentPromiseSignature {
+    content: string;
+    encoding: string;
+  }
+  type GetContentCallbackSignature = [content: string, encoding: string];
   (RequestImpl.prototype as Pick<APIImpl.Request, 'getContent'>) = {
-    getContent: function(this: APIImpl.Request, callback?: (content: string, encoding: string) => unknown): void {
-      function callbackWrapper(response: unknown): void {
-        const {content, encoding} = response as {content: string, encoding: string};
-        callback?.(content, encoding);
-      }
-      extensionServer.sendRequest(
-          {command: PrivateAPI.Commands.GetRequestContent, id: this._id}, callback && callbackWrapper);
-    },
+    getContent: function(this: APIImpl.Request, _callback?: (...args: GetContentCallbackSignature) => unknown):
+                    Promise<GetContentPromiseSignature>|
+        void {
+          const {callback: callbackArg, promise, resolve, reject} =
+              callbackOrPromise<GetContentPromiseSignature, GetContentCallbackSignature>(arguments);
+
+          function callbackWrapper(response: unknown): void {
+            if (checkErrorAndReject(response, reject)) {
+              return;
+            }
+
+            const {content, encoding} = response as {content: string, encoding: string};
+            resolve?.({content, encoding});
+            callbackArg?.(content, encoding);
+          }
+          extensionServer.sendRequest({command: PrivateAPI.Commands.GetRequestContent, id: this._id}, callbackWrapper);
+
+          return promise;
+        } as PublicAPI.Chrome.DevTools.Request['getContent'],
   };
 
   function Panels(this: APIImpl.Panels): void {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -1430,7 +1430,7 @@ export const NativeFunctions = [
   },
   {
     name: "add",
-    signatures: [["sub_apps_to_add"]],
+    signatures: [["install_paths"]],
     receivers: ["SubApps"]
   },
   {
@@ -2005,7 +2005,7 @@ export const NativeFunctions = [
   },
   {
     name: "remove",
-    signatures: [["app_ids"]],
+    signatures: [["manifest_ids"]],
     receivers: ["SubApps"]
   },
   {
@@ -6975,7 +6975,7 @@ export const NativeFunctions = [
   },
   {
     name: "install",
-    signatures: [["?install_url","?manifest_id"]],
+    signatures: [["?install_url","?manifest_id"],["params"]],
     receivers: ["Navigator"]
   },
   {
@@ -8398,6 +8398,10 @@ export const NativeFunctions = [
     name: "Profiler",
     signatures: [["options"]]
   },
+  {
+    name: "getPathData",
+    signatures: [["?settings"]]
+  },
   {
     name: "ByteLengthQueuingStrategy",
     signatures: [["init"]]

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -18,6 +18,7 @@ import type * as LHModel from '../../models/lighthouse/lighthouse.js';
 import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import type * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -30,6 +31,10 @@ import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
 import {AccessibilityAgentMarkdownRenderer} from './components/AccessibilityAgentMarkdownRenderer.js';
+import {
+  AIv2MarkdownRenderer,
+  type AIv2MarkdownRendererOptions,
+} from './components/AIv2MarkdownRenderer.js';
 import {
   type AnswerPart,
   ChatMessageEntity,
@@ -358,8 +363,41 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
   }
 }
 
+function createV2MarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiConversation):
+    AIv2MarkdownRenderer {
+  const options: AIv2MarkdownRendererOptions = {};
+  const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+  const domModel = primaryTarget?.model(SDK.DOMModel.DOMModel);
+  const resourceTreeModel = primaryTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
+  const context = conversation?.selectedContext;
+
+  if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
+    const focus = context.getItem();
+    options.mainFrameId = focus.parsedTrace.data.Meta.mainFrameId;
+    options.lookupTraceEvent = focus.lookupEvent.bind(focus);
+  } else {
+    if (domModel) {
+      options.mainDocumentURL = domModel.existingDocument()?.documentURL;
+    }
+    if (resourceTreeModel) {
+      options.mainFrameId = resourceTreeModel.mainFrame?.id;
+    }
+  }
+  return new AIv2MarkdownRenderer(options);
+}
+
 function getMarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiConversation):
-    MarkdownRendererWithCodeBlock {
+    MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  if (conversation?.type === AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE &&
+      conversation.isReadOnly) {
+    // Handle historical conversations (can't linkify anything).
+    return new PerformanceAgentMarkdownRenderer();
+  }
+
+  if (Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled && conversation && !conversation.isReadOnly) {
+    return createV2MarkdownRenderer(conversation);
+  }
+
   const context = conversation?.selectedContext;
 
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -5,6 +5,7 @@
 export * from './AiAssistancePanel.js';
 export * from './components/ChatView.js';
 export * from './components/AccessibilityAgentMarkdownRenderer.js';
+export * from './components/AIv2MarkdownRenderer.js';
 export * as ChatInput from './components/ChatInput.js';
 export * from './components/MarkdownRendererWithCodeBlock.js';
 export * from './SelectWorkspaceDialog.js';

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

@@ -0,0 +1,228 @@
+// Copyright 2026 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 Platform from '../../../core/platform/platform.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as Logs from '../../../models/logs/logs.js';
+import * as Trace from '../../../models/trace/trace.js';
+import type * as Marked from '../../../third_party/marked/marked.js';
+import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as PanelsCommon from '../../common/common.js';
+
+const {html} = Lit.StaticHtml;
+const {until} = Lit.Directives;
+
+export interface AIv2MarkdownRendererOptions {
+  mainFrameId?: string;
+  mainDocumentURL?: Platform.DevToolsPath.UrlString;
+  lookupTraceEvent?: (key: string) => Trace.Types.Events.Event | null;
+}
+
+type ParsedLink = {
+  type: 'path',
+  path: string,
+}|{
+  type: 'node',
+  nodeId: Protocol.DOM.BackendNodeId,
+};
+
+/**
+ * AIv2MarkdownRenderer is currently duplicated from the agent-specific renderers
+ * as part of the migration to the V2 architecture. It will eventually become
+ * the only markdown renderer used by AI assistance.
+ */
+export class AIv2MarkdownRenderer extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
+  constructor(private readonly options: AIv2MarkdownRendererOptions = {}) {
+    super();
+  }
+
+  #isSameOrigin(node: SDK.DOMModel.DOMNode): boolean {
+    if (!this.options.mainDocumentURL) {
+      return true;
+    }
+    const nodeDocumentURL = node.ownerDocument?.documentURL ?? '' as Platform.DevToolsPath.UrlString;
+    return AiAssistanceModel.AiUtils.isSameOrigin(this.options.mainDocumentURL, nodeDocumentURL);
+  }
+
+  #revealableLink(revealable: unknown, label: string): Lit.LitTemplate {
+    return html`<devtools-link @click=${(e: Event) => {
+      e.preventDefault();
+      e.stopPropagation();
+      void Common.Revealer.reveal(revealable);
+    }}>${Platform.StringUtilities.trimEndWithMaxLength(label, 100)}</devtools-link>`;
+  }
+
+  #renderLink(href: string, text: string): Lit.LitTemplate|null {
+    const devtoolsLink = this.#renderDevToolsLink(href, text);
+    if (devtoolsLink) {
+      return devtoolsLink;
+    }
+
+    if (href.startsWith('#')) {
+      const parsed = this.#parseLink(href);
+      if (parsed) {
+        const resultPromise =
+            parsed.type === 'path' ? this.#linkifyPath(parsed.path, text) : this.#linkifyNode(parsed.nodeId, text);
+
+        return html`<span>${until(resultPromise.then(node => node || text), text)}</span>`;
+      }
+
+      if (this.options.lookupTraceEvent) {
+        const event = this.options.lookupTraceEvent(href.slice(1));
+        if (event) {
+          let label = text;
+          let title = '';
+          if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+            title = event.args.data.url;
+          } else {
+            label += ` (${event.name})`;
+          }
+
+          // eslint-disable-next-line @devtools/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 null;
+  }
+
+  #renderDevToolsLink(
+      href: string,
+      fallbackText: string,
+      ): Lit.LitTemplate|null {
+    if (href.startsWith('#req-')) {
+      const request = Logs.NetworkLog.NetworkLog.instance().requests().find(
+          req => req.requestId() === href.substring(5),
+      );
+
+      if (request) {
+        return this.#revealableLink(request, request.url());
+      }
+      return html`${fallbackText}`;
+    }
+    if (href.startsWith('#file-')) {
+      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
+          file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
+              Number(href.substring(6)));
+
+      if (file) {
+        return this.#revealableLink(file, file.name());
+      }
+      return html`${fallbackText}`;
+    }
+    return null;
+  }
+
+  #parseLink(href: string): ParsedLink|null {
+    if (href.startsWith('#path-')) {
+      return {type: 'path', path: href.replace('#path-', '')};
+    }
+    if (href.startsWith('#1,HTML')) {
+      return {type: 'path', path: href.slice(1)};
+    }
+
+    let nodeIdStr = '';
+    if (href.startsWith('#node-')) {
+      nodeIdStr = href.replace('#node-', '');
+    } else if (href.startsWith('#')) {
+      nodeIdStr = href.slice(1);
+    }
+
+    if (nodeIdStr.trim() !== '') {
+      const nodeId = Number(nodeIdStr);
+      if (Number.isInteger(nodeId)) {
+        return {type: 'node', nodeId: nodeId as Protocol.DOM.BackendNodeId};
+      }
+    }
+
+    return null;
+  }
+
+  async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Lit.LitTemplate|undefined> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
+    const node = domNodesMap?.get(backendNodeId);
+    if (!node) {
+      return;
+    }
+
+    if (this.options.mainFrameId && node.frameId() !== this.options.mainFrameId) {
+      return;
+    }
+
+    if (!this.#isSameOrigin(node)) {
+      return;
+    }
+
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+
+  async #linkifyPath(path: string, label: string): Promise<Lit.LitTemplate|undefined> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const nodeId = await domModel.pushNodeByPathToFrontend(path);
+    if (!nodeId) {
+      return;
+    }
+    const node = domModel.nodeForId(nodeId);
+    if (!node) {
+      return;
+    }
+    if (!this.#isSameOrigin(node)) {
+      return;
+    }
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (token.type === 'link') {
+      const link = this.#renderLink(token.href, token.text);
+      if (link) {
+        return link;
+      }
+    }
+
+    if (token.type === 'code') {
+      const lines = (token.text).split('\n');
+      if (lines[0]?.trim() === 'css') {
+        token.lang = 'css';
+        token.text = lines.slice(1).join('\n');
+      }
+    }
+
+    if (token.type === 'codespan') {
+      // LLM likes outputting the link inside a codespan block.
+      // Remove the codespan and render the link directly
+      const matches = token.text.match(/^\[(.*)\]\((.+)\)$/);
+      if (matches?.[2]) {
+        const link = this.#renderLink(
+            matches[2],
+            matches[1],
+        );
+        if (link) {
+          return link;
+        }
+      }
+    }
+
+    return super.templateForToken(token);
+  }
+}

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

@@ -14,8 +14,8 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type {
   AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LighthouseReportAiWidget,
-  NetworkRequestGeneralHeadersAiWidget, NetworkRequestsListAiWidget, PerfInsightAiWidget, PerformanceTraceAiWidget,
-  SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget,
+  NetworkRequestGeneralHeadersAiWidget, NetworkRequestsListAiWidget, NetworkTrackAiWidget, PerfInsightAiWidget,
+  PerformanceTraceAiWidget, SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget,
   TimelineEventSummaryAiWidget, TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
@@ -231,6 +231,10 @@ const UIStringsNotTranslate = {
    * @description Accessible label for the reveal button in the performance summary widget.
    */
   revealPerformanceSummary: 'Reveal performance summary',
+  /**
+   * @description Accessible label for the reveal button in the network track widget.
+   */
+  revealNetworkActivity: 'Reveal network activity',
   /**
    * @description Accessible label for the reveal button in the bottom up thread activity widget.
    */
@@ -295,6 +299,10 @@ const UIStringsNotTranslate = {
    * @description Title for the performance summary widget.
    */
   performanceSummary: 'Performance summary',
+  /**
+   * @description Title for the network activity summary widget.
+   */
+  networkActivitySummary: 'Network activity',
   /**
    * @description The title of the button that allows exporting the conversation for agents.
    */
@@ -1658,6 +1666,8 @@ export function getWidgetSignature(widget: AiWidget): string {
       return `${widget.name}:${widget.data.track}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
     case 'BOTTOM_UP_TREE':
       return `${widget.name}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
+    case 'NETWORK_TRACK':
+      return `${widget.name}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
     case 'SOURCE_FILE':
       return `${widget.name}:${widget.data.uiSourceCode.url()}`;
     case 'SOURCE_FILES_LIST':
@@ -1755,6 +1765,9 @@ async function renderWidgets(
       case 'BOTTOM_UP_TREE':
         response = await makeBottomUpTimelineTreeWidget(widgetData);
         break;
+      case 'NETWORK_TRACK':
+        response = await makeNetworkTrackWidget(widgetData);
+        break;
       case 'SOURCE_FILE':
         response = await makeSourceFileWidget(widgetData);
         break;
@@ -2316,6 +2329,30 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
   };
 }
 
+async function makeNetworkTrackWidget(widgetData: NetworkTrackAiWidget): Promise<WidgetMakerResponse|null> {
+  const {parsedTrace, bounds} = widgetData.data;
+  const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
+
+  // clang-format off
+  const template = html`
+    <devtools-performance-agent-network-track
+      .data=${{
+        parsedTrace,
+        bounds,
+        dataProvider,
+      } as TimelineComponents.NetworkTrackWidget.NetworkTrackWidgetData}
+    ></devtools-performance-agent-network-track>`;
+  // clang-format on
+
+  return {
+    renderedWidget: template,
+    revealable: new TimelineUtils.Helpers.RevealableTimeRange(bounds),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealNetworkActivity),
+    title: lockedString(UIStringsNotTranslate.networkActivitySummary),
+    jslogContext: 'network-track-widget',
+  };
+}
+
 async function makeLighthouseReportWidget(widgetData: LighthouseReportAiWidget): Promise<WidgetMakerResponse|null> {
   const reportEl =
       Lighthouse.LighthouseReportRenderer.LighthouseReportRenderer.renderLighthouseScores(widgetData.data.report);

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1797,6 +1797,8 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
     super.onselect(selectedByUser);
     UI.UIUserMetrics.UIUserMetrics.instance().panelShown('dom-storage');
     this.resourcesPanel.showDOMStorage(this.domStorage);
+    const storageItem = this.#getStorageItem();
+    UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
     return false;
   }
 
@@ -1977,6 +1979,8 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     this.resourcesPanel.showCookies(this.target, this.#cookieDomain);
     UI.UIUserMetrics.UIUserMetrics.instance().panelShown(
         Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.cookies]);
+    const storageItem = this.#getStorageItem();
+    UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, storageItem);
     return false;
   }
 }