chrome-devtools-frontend 1.0.1625854 → 1.0.1626840

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -14,6 +14,7 @@ import * as NetworkAgent from './agents/NetworkAgent.js';
 import * as PatchAgent from './agents/PatchAgent.js';
 import * as PerformanceAgent from './agents/PerformanceAgent.js';
 import * as PerformanceAnnotationsAgent from './agents/PerformanceAnnotationsAgent.js';
+import * as StorageAgent from './agents/StorageAgent.js';
 import * as StylingAgent from './agents/StylingAgent.js';
 import * as AiConversation from './AiConversation.js';
 import * as AiHistoryStorage from './AiHistoryStorage.js';
@@ -33,6 +34,7 @@ import * as Injected from './injected.js';
 import * as AICallTree from './performance/AICallTree.js';
 import * as AIContext from './performance/AIContext.js';
 import * as AIQueries from './performance/AIQueries.js';
+import * as StorageItem from './StorageItem.js';
 
 export {
   AccessibilityAgent,
@@ -64,6 +66,8 @@ export {
   PerformanceAnnotationsAgent,
   PerformanceInsightFormatter,
   PerformanceTraceFormatter,
+  StorageAgent,
+  StorageItem,
   StylingAgent,
   UnitFormatters,
 };

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

@@ -332,33 +332,21 @@ IMPORTANT: Never show eventKey to the user.
 
 The following are markdown block(s) of code that ran in the page, each representing a separate function. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.
 
-Here are 3 relevant functions:
+Here is the first line of 3 relevant functions:
 
-(anonymous) @ https://s.yimg.com/aaq/prebid/prebid-2.0.js:12:53984. With added context, chunk is from 9:0 to 18:0
+(anonymous) @ https://s.yimg.com/aaq/prebid/prebid-2.0.js:12:53984
 ```
-// context ...
-
 () => { /* some code from https://s.yimg.com/aaq/prebid/prebid-2.0.js... */ }
-
-// context ...
 ```
 
-(anonymous) @ https://s.yimg.com/aaq/f10d509c/d1irmdsmbztlvx.js:0:43042. With added context, chunk is from 0:0 to 6:0
+(anonymous) @ https://s.yimg.com/aaq/f10d509c/d1irmdsmbztlvx.js:0:43042
 ```
-// context ...
-
 () => { /* some code from https://s.yimg.com/aaq/f10d509c/d1irmdsmbztlvx.js... */ }
-
-// context ...
 ```
 
-(anonymous) @ https://s.yimg.com/aaq/prebid/prebid-2.0.js:12:15854. With added context, chunk is from 9:0 to 18:0
+(anonymous) @ https://s.yimg.com/aaq/prebid/prebid-2.0.js:12:15854
 ```
-// context ...
-
 () => { /* some code from https://s.yimg.com/aaq/prebid/prebid-2.0.js... */ }
-
-// context ...
 ```
 
 # Bottom-up main thread summary
@@ -1019,42 +1007,26 @@ IMPORTANT: Never show eventKey to the user.
 
 The following are markdown block(s) of code that ran in the page, each representing a separate function. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.
 
-Here are 4 relevant functions:
+Here is the first line of 4 relevant functions:
 
-(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:0. With added context, chunk is from 0:0 to 6:0
+(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:0
 ```
-// context ...
-
 () => { /* some code from https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js... */ }
-
-// context ...
 ```
 
-(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:231. With added context, chunk is from 0:0 to 6:0
+(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:231
 ```
-// context ...
-
 () => { /* some code from https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js... */ }
-
-// context ...
 ```
 
-(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:292. With added context, chunk is from 0:0 to 6:0
+(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:292
 ```
-// context ...
-
 () => { /* some code from https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js... */ }
-
-// context ...
 ```
 
-(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:155034. With added context, chunk is from 0:0 to 6:0
+(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:155034
 ```
-// context ...
-
 () => { /* some code from https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js... */ }
-
-// context ...
 ```
 === end content
 

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

@@ -901,6 +901,29 @@ The order of headers corresponds to an internal fixed list. If a header is not p
     return parts.join('\n');
   }
 
+  /**
+   * Formats only the first line of the function code to save space in summaries.
+   * The agent can use this information (url, line, column) to get the whole function source.
+   */
+  #formatFunctionCodeSummary(code: SourceMapScopes.FunctionCodeResolver.FunctionCode): string {
+    this.#formattedFunctionCodes.add(this.#functionCodeToKey(code));
+
+    const {startLine, startColumn} = code.range;
+    const name = code.functionBounds.name || '(anonymous)';
+    const url = code.functionBounds.uiSourceCode.url();
+
+    const lines = code.code.split('\n');
+    const firstLine = lines[0] || '';
+
+    const parts = [];
+    parts.push(`${name} @ ${url}:${startLine}:${startColumn}`);
+    parts.push('```');
+    parts.push(firstLine);
+    parts.push('```');
+
+    return parts.join('\n');
+  }
+
   /**
    * Appends the code of each call frame's function, but only if the function was not
    * serialized previously.
@@ -917,7 +940,7 @@ The order of headers corresponds to an internal fixed list. If a header is not p
             resolveFunctionCode(frame.url as Platform.DevToolsPath.UrlString, frame.lineNumber, frame.columnNumber)));
     for (const code of functionCodes) {
       if (code && !this.#hasFormattedFunctionCode(code)) {
-        functionCodeStrings.push(this.#formatFunctionCode(code));
+        functionCodeStrings.push(this.#formatFunctionCodeSummary(code));
       }
     }
 
@@ -927,8 +950,8 @@ The order of headers corresponds to an internal fixed list. If a header is not p
 
     return '\n' + [
       this.#getFormattedFunctionCodeExplainer(),
-      functionCodeStrings.length > 1 ? `Here are ${functionCodeStrings.length} relevant functions:` :
-                                       `Here is a relevant function:`,
+      functionCodeStrings.length > 1 ? `Here is the first line of ${functionCodeStrings.length} relevant functions:` :
+                                       `Here is the first line of a relevant function:`,
       ...functionCodeStrings,
     ].join('\n\n');
   }

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7960,10 +7960,6 @@ export const NativeFunctions = [
     name: "strokeTextCluster",
     signatures: [["textCluster","x","y","?options"]]
   },
-  {
-    name: "transferToGPUTexture",
-    signatures: [["options"]]
-  },
   {
     name: "beginLayer",
     signatures: [["?options"]]

package/front_end/models/lighthouse/RunTypes.ts

@@ -5,7 +5,7 @@ import type * as Common from '../../core/common/common.js';
 import type * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 
-export type CategoryId = 'performance'|'accessibility'|'best-practices'|'seo';
+export type CategoryId = 'performance'|'accessibility'|'best-practices'|'seo'|'agentic-browsing';
 export type RunMode = 'navigation'|'timespan'|'snapshot';
 
 export interface Preset {

package/front_end/models/web_mcp/WebMCPModel.ts

@@ -147,12 +147,17 @@ export class Tool {
         new SDK.DOMModel.DeferredDOMNode(target, this.#protocolTool.backendNodeId);
   }
 
-  async invoke(input: unknown): Promise<Protocol.WebMCP.InvokeToolResponse|undefined> {
-    return await this.#target.deref()?.webMCPAgent().invoke_invokeTool({
+  async invoke(input: unknown): Promise<string|undefined> {
+    const target = this.#target.deref();
+    const response = await target?.webMCPAgent().invoke_invokeTool({
       toolName: this.name,
       frameId: this.#protocolTool.frameId,
       input,
     });
+    if (!response || response.getError()) {
+      return undefined;
+    }
+    return response.invocationId;
   }
 }
 export interface EventTypes {
@@ -190,6 +195,10 @@ export class WebMCPModel extends SDK.SDKModel.SDKModel<EventTypes> implements Pr
     return [...this.#calls.values()];
   }
 
+  toolCallForId(invocationId: string): Call|undefined {
+    return this.#calls.get(invocationId);
+  }
+
   clearCalls(): void {
     this.#calls.clear();
   }

package/front_end/models/workspace/UISourceCode.ts

@@ -719,7 +719,6 @@ export class UISourceCodeMetadata {
 
 export const enum DecoratorType {
   PERFORMANCE = 'performance',
-  MEMORY = 'memory',
   COVERAGE = 'coverage',
 }
 

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

@@ -115,9 +115,14 @@ function isFileAgentFeatureAvailable(config?: Root.Runtime.HostConfig): boolean
   return (config?.aidaAvailability?.enabled && (config?.devToolsAiAssistanceFileAgent?.enabled)) === true;
 }
 
+function isStorageAgentFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
+  return (config?.aidaAvailability?.enabled && (config?.devToolsAiAssistanceStorageAgent?.enabled)) === true;
+}
+
 function isAnyFeatureAvailable(config?: Root.Runtime.HostConfig): boolean {
   return isStylingAgentFeatureAvailable(config) || isNetworkAgentFeatureAvailable(config) ||
-      isPerformanceAgentFeatureAvailable(config) || isFileAgentFeatureAvailable(config);
+      isPerformanceAgentFeatureAvailable(config) || isFileAgentFeatureAvailable(config) ||
+      isStorageAgentFeatureAvailable(config);
 }
 
 UI.ViewManager.registerViewExtension({

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

@@ -1330,17 +1330,18 @@ function renderNetworkRequestPreview(networkRequest: NonNullable<DomTreeAiWidget
   const resourceType = Common.ResourceType.resourceTypes[networkRequest.resourceType];
   const {iconName, color} = PanelUtils.iconDataForResourceType(resourceType);
 
+  const imageUrl = networkRequest.imageContent?.asImagePreviewUrl() ?? networkRequest.url;
+
   return html`
     <div class="network-request-preview">
       <div class="network-request-header">
         <div class="network-request-icon">
           ${
-      resourceType.isImage() ? html`<img src=${networkRequest.imageUrl ?? networkRequest.url} alt=${filename} />` :
+      resourceType.isImage() ? html`<img src=${imageUrl} alt=${filename} />` :
                                html`<devtools-icon name=${iconName} style=${Lit.Directives.styleMap({
                                  color: color ?? ''
                                })}></devtools-icon>`}
-        </div>
-        <div class="network-request-details">
+        </div>        <div class="network-request-details">
           <div class="network-request-name" title=${networkRequest.url}>${filename}</div>
           <div class="network-request-size">${size}</div>
         </div>

package/front_end/panels/application/WebMCPView.ts

@@ -191,6 +191,10 @@ const UIStrings = {
    * @description Notice to display when a tool has been unregistered
    */
   toolUnregisteredNotice: 'This tool has been unregistered',
+  /**
+   * @description Text preceding a nested error in a stack trace
+   */
+  causedBy: 'Caused by:',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -219,6 +223,11 @@ export interface FilterMenuButtons {
   toolTypes: FilterMenuButton;
   statusTypes: FilterMenuButton;
 }
+export const enum TabId {
+  DETAILS = 'webmcp.tool-details',
+  INPUT = 'webmcp.call-inputs',
+  OUTPUT = 'webmcp.call-outputs',
+}
 export interface SelectedTool {
   tool: WebMCP.WebMCPModel.Tool;
   parameters?: Record<string, unknown>;
@@ -229,7 +238,8 @@ export interface ViewInput {
   onToolSelect: (tool: WebMCP.WebMCPModel.Tool|null) => void;
   onRevealTool: (tool: WebMCP.WebMCPModel.Tool, parameters?: Record<string, unknown>) => void;
   selectedCall: WebMCP.WebMCPModel.Call|null;
-  onCallSelect: (call: WebMCP.WebMCPModel.Call|null) => void;
+  selectedTab?: TabId;
+  onCallSelect: (call: WebMCP.WebMCPModel.Call|null, tabId?: TabId) => void;
   filters: FilterState;
   filterButtons: FilterMenuButtons;
   onClearLogClick: () => void;
@@ -508,7 +518,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                             }, {jslogContext: 'webmcp.cancel-call'});
                           }
                         }}>
-                      <td>
+                      <td @click=${(e: Event) => {
+                        e.stopPropagation();
+                        input.onCallSelect(call, TabId.DETAILS);
+                      }}>
                         <div class="name-cell">
                           <span>${call.tool.name}</span>
                           <button class="run-tool-action-button"
@@ -524,7 +537,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                           </button>
                         </div>
                       </td>
-                      <td>
+                      <td @click=${(e: Event) => {
+                        e.stopPropagation();
+                        input.onCallSelect(call, TabId.OUTPUT);
+                      }}>
                         <div class="status-cell">
                           ${iconName(call) ? html`<devtools-icon class="small" name=${iconName(call)}></devtools-icon>`
                                            : ''}
@@ -532,8 +548,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                         </div>
                       </td>
                       ${!input.selectedCall ? html`
-                        <td>${call.input}</td>
-                        <td>${call.result?.output ? JSON.stringify(call.result.output)
+                        <td @click=${(e: Event) => {
+                          e.stopPropagation();
+                          input.onCallSelect(call, TabId.INPUT);
+                        }}>${call.input}</td>
+                        <td @click=${(e: Event) => {
+                          e.stopPropagation();
+                          input.onCallSelect(call, TabId.OUTPUT);
+                        }}>${call.result?.output ? JSON.stringify(call.result.output)
                                                     : call.result?.errorText ?? ''}</td>
                         ` : nothing}
                     </tr>
@@ -552,17 +574,20 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   @click=${() => input.onCallSelect(null)}
                 ></devtools-button>
                 <devtools-widget
-                  id="webmcp.tool-details"
+                  id=${TabId.DETAILS}
+                  ?selected=${input.selectedTab === TabId.DETAILS}
                   title=${i18nString(UIStrings.toolDetails)}
                   ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool, isUnregistered: input.selectedCall ? !input.tools.includes(input.selectedCall.tool) : false})}>
                 </devtools-widget>
                 <devtools-widget
-                  id="webmcp.call-inputs"
+                  id=${TabId.INPUT}
+                  ?selected=${input.selectedTab === TabId.INPUT}
                   title=${i18nString(UIStrings.input)}
                   ${widget(PayloadWidget, parsePayload(input.selectedCall?.input))}>
                 </devtools-widget>
                 <devtools-widget
-                  id="webmcp.call-outputs"
+                  id=${TabId.OUTPUT}
+                  ?selected=${input.selectedTab === TabId.OUTPUT}
                   title=${i18nString(UIStrings.output)}
                   ${widget(PayloadWidget, {
                           valueObject: input.selectedCall?.result?.output,
@@ -697,6 +722,8 @@ export class WebMCPView extends UI.Widget.VBox {
   readonly #view: View;
   #selectedTool: SelectedTool|null = null;
   #selectedCall: WebMCP.WebMCPModel.Call|null = null;
+  #selectedTab: TabId|undefined = undefined;
+  #lastDevToolsInvocationId: string|null = null;
 
   #filterState: FilterState = {
     text: '',
@@ -799,17 +826,26 @@ export class WebMCPView extends UI.Widget.VBox {
   #webMCPModelAdded(model: WebMCP.WebMCPModel.WebMCPModel): void {
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.#toolsRemoved, this);
-    model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
+    model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.#toolInvoked, this);
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
   #webMCPModelRemoved(model: WebMCP.WebMCPModel.WebMCPModel): void {
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.#toolsRemoved, this);
-    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
+    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.#toolInvoked, this);
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
+  #toolInvoked(event: Common.EventTarget.EventTargetEvent<WebMCP.WebMCPModel.Call>): void {
+    const call = event.data;
+    if (call.invocationId === this.#lastDevToolsInvocationId) {
+      this.#selectedCall = call;
+      this.#lastDevToolsInvocationId = null;
+    }
+    this.requestUpdate();
+  }
+
   #toolsRemoved(event: Common.EventTarget.EventTargetEvent<readonly WebMCP.WebMCPModel.Tool[]>): void {
     if (this.#selectedTool && event.data.includes(this.#selectedTool.tool)) {
       this.#selectedTool = null;
@@ -861,8 +897,16 @@ export class WebMCPView extends UI.Widget.VBox {
         this.requestUpdate();
       },
       selectedCall: this.#selectedCall,
-      onCallSelect: call => {
-        this.#selectedCall = call;
+      selectedTab: this.#selectedTab,
+      onCallSelect: (call, tabId) => {
+        if (call === null) {
+          this.#selectedCall = null;
+        } else if (this.#selectedCall === null) {
+          this.#selectedCall = call;
+          this.#selectedTab = tabId;
+        } else {
+          this.#selectedCall = call;
+        }
         this.requestUpdate();
       },
       toolCalls: filteredCalls,
@@ -870,9 +914,20 @@ export class WebMCPView extends UI.Widget.VBox {
       filterButtons: this.#filterButtons,
       onClearLogClick: this.#handleClearLogClick,
       onFilterChange: this.#handleFilterChange,
-      onRunTool: event => {
+      onRunTool: async event => {
         if (this.#selectedTool) {
-          void this.#selectedTool.tool.invoke(event.data.parameters || {});
+          this.#selectedTool.parameters = event.data.parameters || {};
+          this.#lastDevToolsInvocationId = await this.#selectedTool.tool.invoke(this.#selectedTool.parameters) ?? null;
+          if (this.#lastDevToolsInvocationId) {
+            const models = SDK.TargetManager.TargetManager.instance().models(WebMCP.WebMCPModel.WebMCPModel);
+            const call =
+                models.flatMap(model => model.toolCalls).find(c => c.invocationId === this.#lastDevToolsInvocationId);
+            if (call) {
+              this.#selectedCall = call;
+              this.#lastDevToolsInvocationId = null;
+            }
+          }
+          this.requestUpdate();
         }
       },
       onPaste: async () => {
@@ -891,6 +946,7 @@ export class WebMCPView extends UI.Widget.VBox {
       },
     };
     this.#view(input, {}, this.contentElement);
+    this.#selectedTab = undefined;
   }
 }
 export interface PayloadViewInput {
@@ -972,7 +1028,9 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
       <div class="payload-value source-code error-text">
         ${details.frames.length === 0 && details.description ? html`<span>${details.description}\n</span>` : nothing}
         <div>${details.frames.map(renderFrame)}</div>
-        ${details.cause ? html`\nCaused by:\n${createException(details.cause, linkifier)}` : nothing}</div>`;
+        ${
+        details.cause ? html`\n${i18nString(UIStrings.causedBy)}\n${createException(details.cause, linkifier)}` :
+                        nothing}</div>`;
   };
 
   render(
@@ -1124,7 +1182,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
            ></devtools-button>
       </div>` : origin ? html`
       <div class="label">Origin</div>
-      <div class="value">
+      <div class="value stack-trace">
         ${widget(Components.JSPresentationUtils.StackTracePreviewContent,
                  {stackTrace: origin, options: { expandable: true}})}
       </div>` : nothing}

package/front_end/panels/application/webMCPView.css

@@ -88,6 +88,14 @@
     display: flex;
     gap: var(--sys-size-5);
     align-items: center;
+    min-width: 0;
+  }
+
+  .name-cell > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
   }
 
   .run-tool-action-button {
@@ -141,8 +149,11 @@
       color: var(--sys-color-on-surface);
       overflow-wrap: anywhere;
 
-      &:has(> .stack-preview-container) {
-        padding: var(--sys-size-4) 0;
+      &.stack-trace {
+        display: flex;
+        padding: 0;
+        margin-top: calc(-1 * (var(--sys-size-1) + var(--sys-size-2)));
+        margin-left: calc(-1 * var(--sys-size-3));
       }
 
       &.tool-origin-container {

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -9,6 +9,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -163,6 +164,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 
 interface AiCodeCompletionTeaserConfig {
   onDetach: () => void;
+  panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 }
 
 export class AiCodeCompletionTeaser extends UI.Widget.Widget {
@@ -172,6 +174,7 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
   #boundOnAidaAvailabilityChange: () => Promise<void>;
   #boundOnAiCodeCompletionSettingChanged: () => void;
   #onDetach: () => void;
+  #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 
   // Whether the user completed first run experience dialog or not.
   #aiCodeCompletionFreCompletedSetting =
@@ -186,6 +189,7 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     super();
     this.markAsExternallyManaged();
     this.#onDetach = config.onDetach;
+    this.#panel = config.panel;
     this.#view = view ?? DEFAULT_VIEW;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.#boundOnAiCodeCompletionSettingChanged = this.#onAiCodeCompletionSettingChanged.bind(this);
@@ -283,6 +287,11 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
 
     if (result) {
       this.#aiCodeCompletionFreCompletedSetting.set(true);
+      if (this.#panel === AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE) {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionFreCompletedFromConsole);
+      } else if (this.#panel === AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES) {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionFreCompletedFromSources);
+      }
       this.detach();
     } else {
       this.requestUpdate();

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -314,6 +314,9 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   jumpToFontPaletteDefinition(_paletteName: string): void {
   }
 
+  jumpToCounterStyleDefinition(_counterStyleName: string): void {
+  }
+
   jumpToDeclaration(_valueSource: SDK.CSSMatchedStyles.CSSValueSource): void {
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1156,10 +1156,19 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
         return {
           jslogContext: 'css-font-palette',
           metric: null,
-          ruleBlock: '@font-*',
+          ruleBlock: '',  // Not used
           isDefined: Boolean(this.#matchedStyles.atRules().find(
               ar => ar.type() === 'font-palette-values' && ar.name()?.text === match.text)),
         };
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE:
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE_TYPE:
+        return {
+          jslogContext: 'css-list-style-type',
+          metric: null,
+          ruleBlock: '',  // Not used
+          isDefined: Boolean(this.#matchedStyles.atRules().find(
+              ar => ar.type() === 'counter-style' && ar.name()?.text === match.text)),
+        };
       case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY:
       case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY_FALLBACKS:
         return {
@@ -1182,6 +1191,10 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
         metric && Host.userMetrics.swatchActivated(metric);
         if (match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.FONT_PALETTE) {
           this.#stylesContainer.jumpToFontPaletteDefinition(match.text);
+        } else if (
+            match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE ||
+            match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE_TYPE) {
+          this.#stylesContainer.jumpToCounterStyleDefinition(match.text);
         } else {
           this.#stylesContainer.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
         }
@@ -3635,6 +3648,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     this.#clearGhostTextInValue();
+    if (this.value === text) {
+      return;
+    }
     if (this.value) {
       // If there is an existing value, and user is editing the name field
       // which leads to a new value suggestion, then the previous value should no
@@ -3648,7 +3664,24 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   #clearGhostTextInValue(): void {
-    this.listItemElement.querySelector('.ghost-value-prediction')?.remove();
+    const ghostTextElement = this.listItemElement.querySelector('.ghost-value-prediction');
+    if (!ghostTextElement) {
+      return;
+    }
+    ghostTextElement.remove();
+    // If there's no value, there's nothing to restore
+    if (!this.value) {
+      return;
+    }
+    // Restore original classes
+    if (this.property.parsedOk) {
+      this.listItemElement.classList.remove('not-parsed-ok', 'invalid-property-value');
+    } else {
+      const invalidPropertyValue = SDK.CSSMetadata.cssMetadata().isCSSPropertyName(this.property.name);
+      if (!invalidPropertyValue) {
+        this.listItemElement.classList.remove('invalid-property-value');
+      }
+    }
   }
 }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -166,7 +166,7 @@ export class StylesAiCodeCompletionProvider {
   }|null> {
     this.#aiCodeCompletionConfig?.onRequestTriggered();
     // Registering AiCodeCompletionRequestTriggered metric even if the request is served from cache
-    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionRequestTriggered);
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionRequestTriggeredFromStyles);
 
     try {
       const completionResponse = await this.#aiCodeCompletion?.completeCode(

package/front_end/panels/elements/StylesContainer.ts

@@ -52,6 +52,7 @@ export interface StylesContainer {
   jumpToProperty(propertyName: string, sectionName?: string, blockName?: string): boolean;
   jumpToSectionBlock(section: string): void;
   jumpToFontPaletteDefinition(paletteName: string): void;
+  jumpToCounterStyleDefinition(counterStyleName: string): void;
   jumpToDeclaration(valueSource: SDK.CSSMatchedStyles.CSSValueSource): void;
   setActiveProperty(treeElement: StylePropertyTreeElement|null): void;
   addStyleUpdateListener(listener: () => void): void;