chrome-devtools-frontend 1.0.1646714 → 1.0.1650035

package/front_end/panels/application/CookieItemsView.ts

@@ -50,6 +50,14 @@ const UIStrings = {
    * @description Label for checkbox to show URL-decoded cookie values
    */
   showUrlDecoded: 'Show URL-decoded',
+  /**
+   * @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 a web cookie with AI
+   */
+  explainCookie: 'Explain this cookie',
   /**
    * @description Text in Cookie Items View of the Application panel to indicate that no cookie has been selected for preview
    */
@@ -174,6 +182,10 @@ interface CookieItemsViewInput {
   onDeleteSelectedItems: () => void;
   onDeleteAllItems: () => void;
   onRefreshItems: () => void;
+  aiButtonIsEnabled: boolean;
+  onPopulateAiContextMenu: (cookie: SDK.Cookie.Cookie, contextMenu: UI.ContextMenu.ContextMenu) => void;
+  onAiButtonClick: (cookie: SDK.Cookie.Cookie, event: Event) => void;
+  aiButtonTitle?: string;
   selectedCookie: SDK.Cookie.Cookie|null;
 }
 
@@ -203,6 +215,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             refreshCallback: input.onRefresh,
             selectedCallback: input.onSelect,
             deleteCallback: input.onDelete,
+            aiButtonIsEnabled: input.aiButtonIsEnabled,
+            onAiButtonClick: input.onAiButtonClick,
+            onPopulateAiContextMenu: input.onPopulateAiContextMenu,
+            aiButtonTitle: input.aiButtonTitle,
             editable: true,
           })}
           ></devtools-widget>
@@ -220,8 +236,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       </devtools-split-view>
     </devtools-widget>
   `,
-      // clang-format on
-      target, {container: {attributes: {jslog: `${VisualLogging.pane('cookies-data')}`}}});
+         // clang-format on
+         target, {container: {attributes: {jslog: `${VisualLogging.pane('cookies-data')}`}}});
 };
 
 export class CookieItemsView extends UI.Widget.VBox {
@@ -261,7 +277,6 @@ export class CookieItemsView extends UI.Widget.VBox {
     this.cookieDomain = domain;
     this.refreshItems();
     this.model.addEventListener(SDK.CookieModel.Events.COOKIE_LIST_UPDATED, this.onCookieListUpdate, this);
-    this.updateAiAssistanceContext(null);
   }
 
   override performUpdate(): void {
@@ -296,6 +311,12 @@ export class CookieItemsView extends UI.Widget.VBox {
       onDeleteAllItems: this.deleteAllItems.bind(this),
       onRefreshItems: this.refreshItems.bind(this),
       selectedCookie: this.selectedCookie,
+      aiButtonIsEnabled: this.isAiButtonEnabled(),
+      onPopulateAiContextMenu: this.#onPopulateAiContextMenu.bind(this),
+      onAiButtonClick: this.#onAiButtonClick.bind(this),
+      aiButtonTitle: this.isAiButtonEnabled() ?
+          UI.ActionRegistry.ActionRegistry.instance().getAction('ai-assistance.storage-floating-button').title() :
+          undefined,
     };
 
     this.view(input, output, this.contentElement);
@@ -304,7 +325,6 @@ export class CookieItemsView extends UI.Widget.VBox {
   override wasShown(): void {
     super.wasShown();
     this.refreshItems();
-    this.updateAiAssistanceContext(this.selectedCookie);
   }
 
   private showPreview(cookie: SDK.Cookie.Cookie|null): void {
@@ -313,10 +333,9 @@ export class CookieItemsView extends UI.Widget.VBox {
     }
     this.selectedCookie = cookie;
     this.requestUpdate();
-    this.updateAiAssistanceContext(cookie);
   }
 
-  private updateAiAssistanceContext(cookie: SDK.Cookie.Cookie|null): void {
+  #updateAiAssistanceContext(cookie: SDK.Cookie.Cookie|null): void {
     if (cookie && cookie.httpOnly()) {
       UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
       return;
@@ -342,6 +361,7 @@ export class CookieItemsView extends UI.Widget.VBox {
     }
     this.#toolbar.setCanDeleteSelected(Boolean(selectedCookie));
     this.showPreview(selectedCookie);
+    this.#updateAiAssistanceContext(selectedCookie);
   }
 
   private async saveCookie(newCookie: SDK.Cookie.Cookie, oldCookie: SDK.Cookie.Cookie|null): Promise<boolean> {
@@ -393,6 +413,7 @@ export class CookieItemsView extends UI.Widget.VBox {
    * This will only delete the currently visible cookies.
    */
   deleteAllItems(): void {
+    UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
     this.showPreview(null);
     void this.model.deleteCookies(this.shownCookies);
   }
@@ -412,4 +433,32 @@ export class CookieItemsView extends UI.Widget.VBox {
   refreshItems(): void {
     void this.model.getCookiesForDomain(this.cookieDomain, true).then(this.updateWithCookies.bind(this));
   }
+
+  private isAiButtonEnabled(): boolean {
+    return UI.ActionRegistry.ActionRegistry.instance().hasAction('ai-assistance.storage-floating-button');
+  }
+
+  #onPopulateAiContextMenu(cookie: SDK.Cookie.Cookie, contextMenu: UI.ContextMenu.ContextMenu): void {
+    const openAiAssistanceId = 'ai-assistance.application-panel-context';
+    if (this.isAiButtonEnabled() && UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+      this.#updateAiAssistanceContext(cookie);
+      if (UI.Context.Context.instance().flavor(AiAssistanceModel.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.explainCookie), () => action.execute({prompt: 'What is the purpose of this cookie?'}),
+            {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.cookies'});
+      }
+    }
+  }
+
+  #onAiButtonClick(cookie: SDK.Cookie.Cookie, _event: Event): void {
+    this.#updateAiAssistanceContext(cookie);
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    const storageFloatingButtonId = 'ai-assistance.storage-floating-button';
+    if (actionRegistry.hasAction(storageFloatingButtonId)) {
+      void actionRegistry.getAction(storageFloatingButtonId).execute();
+    }
+  }
 }

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -55,6 +55,14 @@ const UIStrings = {
    * @description Text for announcing a DOM Storage key/value item has been deleted
    */
   domStorageItemDeleted: 'The storage item was deleted.',
+  /**
+   * @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 a storage item of a storage bucket with AI
+   */
+  explainItem: 'Explain this item',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/DOMStorageItemsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -111,7 +119,6 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
           SDK.DOMStorageModel.DOMStorage.Events.DOM_STORAGE_ITEM_UPDATED, this.domStorageItemUpdated, this),
     ];
     this.refreshItems();
-    this.selectedItemChanged(null);
   }
 
   private domStorageItemsCleared(): void {
@@ -174,13 +181,7 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     this.showItems(filteredItems);
   }
 
-  override deleteAllItems(): void {
-    this.domStorage.clear();
-    // explicitly clear the view because the event won't be fired when it has no items
-    this.domStorageItemsCleared();
-  }
-
-  protected override selectedItemChanged(item: {key: string, value: string}|null): void {
+  #setAiStorageContext(item: {key: string, value: string}|null): void {
     const storageKey = this.domStorage.storageKey;
     if (!storageKey) {
       return;
@@ -205,10 +206,44 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 
+  override deleteAllItems(): void {
+    this.domStorage.clear();
+    // explicitly clear the view because the event won't be fired when it has no items
+    this.domStorageItemsCleared();
+  }
+
+  protected override selectedItemChanged(item: {key: string, value: string}|null): void {
+    this.#setAiStorageContext(item);
+  }
+
   protected override isAiButtonEnabled(): boolean {
     return UI.ActionRegistry.ActionRegistry.instance().hasAction('ai-assistance.storage-floating-button');
   }
 
+  protected override populateContextMenu(item: {key: string, value: string},
+                                         contextMenu: UI.ContextMenu.ContextMenu): void {
+    const openAiAssistanceId = 'ai-assistance.application-panel-context';
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    if (actionRegistry.hasAction(openAiAssistanceId)) {
+      this.#setAiStorageContext(item);
+      const action = actionRegistry.getAction(openAiAssistanceId);
+      const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+      submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+      submenu.defaultSection().appendItem(i18nString(UIStrings.explainItem),
+                                          () => action.execute({prompt: 'Explain this storage item.'}),
+                                          {disabled: !action.enabled(), jslogContext: openAiAssistanceId + '.storage'});
+    }
+  }
+
+  protected override onAiButtonClick(item: {key: string, value: string}, _event: Event): void {
+    this.#setAiStorageContext(item);
+    const aiFloatingActionId = 'ai-assistance.storage-floating-button';
+    const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
+    if (actionRegistry.hasAction(aiFloatingActionId)) {
+      void actionRegistry.getAction(aiFloatingActionId).execute();
+    }
+  }
+
   protected removeItem(key: string): void {
     this.domStorage?.removeItem(key);
   }

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -92,6 +92,7 @@ export interface ViewInput {
   onDelete: (key: string) => void;
   onDeleteSelected: () => void;
   onDeleteAll: () => void;
+  onContextMenu?: (item: {key: string, value: string}, contextMenu: UI.ContextMenu.ContextMenu) => void;
   jslog?: string;
   classes?: string[];
   aiButtonTitle?: string;
@@ -175,6 +176,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                           @edit=${(e: CustomEvent<{columnId: string, valueBeforeEditing: string, newText: string}>) =>
                             input.onEdit(item.key, item.value, e.detail.columnId, e.detail.valueBeforeEditing, e.detail.newText)}
                           @delete=${() => input.onDelete(item.key)}
+                          @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => input.onContextMenu?.(item, e.detail)}
                           selected=${(input.selectedKey === item.key) || nothing}>
                         <td>${input.showAiButton ? html`
                             <span class="ai-button-container">
@@ -198,8 +200,8 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                ${input.preview?.element}
               </devtools-widget>
             </devtools-split-view>`,
-            // clang-format on
-            target, {container: {attributes: {jslog: input.jslog}, classes: input.classes}});
+               // clang-format on
+               target, {container: {attributes: {jslog: input.jslog}, classes: input.classes}});
       };
     }
     super();
@@ -246,13 +248,13 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
         void this.#previewEntry(item);
         this.selectedItemChanged(item);
       },
-      onAiButtonClick: (item: {key: string, value: string}, event: Event) => {
-        event.stopPropagation();
-        viewInput.onSelect(item);
-        const actionRegistry = UI.ActionRegistry.ActionRegistry.instance();
-        if (actionRegistry.hasAction(STORAGE_FLOATING_BUTTON_ACTION_ID)) {
-          void actionRegistry.getAction(STORAGE_FLOATING_BUTTON_ACTION_ID).execute();
-        }
+      onAiButtonClick: this.isAiButtonEnabled() ?
+          (item: {key: string, value: string}, event: Event) => {
+            this.onAiButtonClick(item, event);
+          } :
+          undefined,
+      onContextMenu: (item: {key: string, value: string}, contextMenu: UI.ContextMenu.ContextMenu) => {
+        this.populateContextMenu(item, contextMenu);
       },
 
       onSort: (ascending: boolean) => {
@@ -284,6 +286,12 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     return false;
   }
 
+  protected populateContextMenu(_item: {key: string, value: string}, _contextMenu: UI.ContextMenu.ContextMenu): void {
+  }
+
+  protected onAiButtonClick(_item: {key: string, value: string}, _event: Event): void {
+  }
+
   protected get toolbar(): StorageItemsToolbar|undefined {
     return this.#toolbar;
   }

package/front_end/panels/console/ConsolePinPane.ts

@@ -403,6 +403,7 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
       CodeMirror.EditorView.domEventHandlers({
         blur: (_e, view) => this.#onBlur(view),
         paste: () => this.#onPaste(),
+        drop: event => event.preventDefault(),
       }),
       TextEditor.Config.baseConfiguration(doc),
       TextEditor.Config.closeBrackets.instance(),

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -738,65 +738,86 @@ function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.Te
   });
 }
 
+const relationPromisesCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, Promise<string|Lit.LitTemplate>>>();
+const relatedElementsCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, SDK.DOMModel.DOMNode|null>>();
+
 function renderAttribute(
     attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
     isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
   const name = attr.name;
   const value = attr.value || '';
   const forceValue = isDiff;
+  const isRelation = name === 'popovertarget' || name === 'interesttarget' || name === 'commandfor';
   const hasText = (forceValue || value.length > 0);
-  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
-    change: true,
-    dblclick: true,
-  });
-
-  const relationRef =
-      (relation: Protocol.DOM.GetElementByRelationRequestRelation, tooltip: string): ReturnType<typeof ref> =>
-          ref((el): void => {
-            if (!el) {
-              return;
-            }
-            void (async(): Promise<void> => {
-              const relatedElementId = await node.domModel().getElementByRelation(node.id, relation);
-              const relatedElement = node.domModel().nodeForId(relatedElementId);
-              if (!relatedElement) {
-                return;
-              }
-              const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, {
-                preventKeyboardFocus: true,
-                tooltip,
-                textContent: el.textContent || undefined,
-                isDynamicLink: true,
-              });
-              render(link, el as HTMLElement);
-            })();
-          });
+  const linkifyName = isRelation && value.length === 0;
+  const linkifyValue = isRelation && value.length > 0;
 
-  let relationRefDirective: ReturnType<typeof relationRef> = ref(() => {});
-  if (!value) {
+  let relation: Protocol.DOM.GetElementByRelationRequestRelation|undefined = undefined;
+  let tooltip = '';
+  if (isRelation) {
     if (name === 'popovertarget') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget, i18nString(UIStrings.showPopoverTarget));
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget;
+      tooltip = i18nString(UIStrings.showPopoverTarget);
     } else if (name === 'interesttarget') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget, i18nString(UIStrings.showInterestTarget));
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget;
+      tooltip = i18nString(UIStrings.showInterestTarget);
     } else if (name === 'commandfor') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.CommandFor, i18nString(UIStrings.showCommandForTarget));
-    }
-  }
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.CommandFor;
+      tooltip = i18nString(UIStrings.showCommandForTarget);
+    }
+  }
+
+  let relationPromise: Promise<string|Lit.LitTemplate>|undefined = undefined;
+  if (isRelation && relation) {
+    let nodeCache = relationPromisesCache.get(node);
+    if (!nodeCache) {
+      nodeCache = new Map();
+      relationPromisesCache.set(node, nodeCache);
+    }
+    const cacheKey = `${relation}:${value}`;
+    relationPromise = nodeCache.get(cacheKey);
+    const relationType = relation;
+    if (!relationPromise) {
+      relationPromise = (async () => {
+        try {
+          const relatedElementId = await node.domModel().getElementByRelation(node.id, relationType);
+          const relatedElement = node.domModel().nodeForId(relatedElementId);
+
+          let elemCache = relatedElementsCache.get(node);
+          if (!elemCache) {
+            elemCache = new Map();
+            relatedElementsCache.set(node, elemCache);
+          }
+          elemCache.set(`${name}:${value}`, relatedElement || null);
 
-  let valueRelationRefDirective: ReturnType<typeof relationRef> = ref(() => {});
-  if (value) {
-    if (name === 'popovertarget') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget, i18nString(UIStrings.showPopoverTarget));
-    } else if (name === 'interesttarget') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget, i18nString(UIStrings.showInterestTarget));
-    } else if (name === 'commandfor') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.CommandFor, i18nString(UIStrings.showCommandForTarget));
+          const isNameLinking = value.length === 0;
+          const fallback = isNameLinking ? name : value;
+
+          if (!relatedElement) {
+            return fallback;
+          }
+
+          const linkOptions: PanelsCommon.DOMLinkifier.Options = {
+            preventKeyboardFocus: true,
+            tooltip,
+            isDynamicLink: true,
+          };
+
+          if (isNameLinking) {
+            linkOptions.textContent = name;
+          } else {
+            const targetId = relatedElement.getAttribute('id');
+            if (targetId) {
+              linkOptions.textContent = targetId;
+            }
+          }
+
+          return PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, linkOptions);
+        } catch {
+          return value.length === 0 ? name : value;
+        }
+      })();
+      nodeCache.set(cacheKey, relationPromise);
     }
   }
 
@@ -815,23 +836,31 @@ function renderAttribute(
     valueType = ValueType.SRCSET;
   }
 
-  const withEntitiesRef = valueType === ValueType.UNKNOWN ? ref(el => {
+  const withEntitiesRef = (valueType === ValueType.UNKNOWN && !isRelation) ? ref(el => {
     if (el) {
       setValueWithEntities(el, value);
     }
   }) :
-                                                            nothing;
+                                                                             nothing;
+
+  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
+    change: true,
+    dblclick: true,
+  });
 
-  // clang-format off
   return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name"
-      ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${relationRefDirective}>${name}</span>${hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${animateOn(
-    Boolean(updateRecord?.isAttributeModified(name) && hasText),
-    DOM_UPDATE_ANIMATION_CLASS_NAME)} ${valueRelationRefDirective} ${withEntitiesRef}>
+      ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)}>${
+      linkifyName && relationPromise ? Lit.Directives.until(relationPromise, name) : name}</span>${
+      hasText ?
+          html`=\u200B"<span class="webkit-html-attribute-value" ${
+              animateOn(Boolean(updateRecord?.isAttributeModified(name) && hasText),
+                        DOM_UPDATE_ANIMATION_CLASS_NAME)} ${withEntitiesRef}>
                         ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
-                        ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
+                        ${
+              valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
+                        ${linkifyValue && relationPromise ? Lit.Directives.until(relationPromise, value) : nothing}
                 </span>"` :
-      nothing}</span>`;
-  // clang-format on
+          nothing}</span>`;
 }
 
 function renderTag(
@@ -2440,9 +2469,20 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    const attributeValue = attributeName && attributeValueElement ?
+    let attributeValue = attributeName && attributeValueElement ?
         this.nodeInternal.getAttribute(attributeName)?.replaceAll('"', '&quot;') :
         undefined;
+
+    const isRelation =
+        attributeName === 'popovertarget' || attributeName === 'interesttarget' || attributeName === 'commandfor';
+    if (isRelation && attributeName && attributeValueElement) {
+      const rawValue = this.nodeInternal.getAttribute(attributeName) || '';
+      const relatedElement = relatedElementsCache.get(this.nodeInternal)?.get(`${attributeName}:${rawValue}`);
+      if (relatedElement) {
+        attributeValue = relatedElement.getAttribute('id') || '';
+      }
+    }
+
     if (attributeValue !== undefined) {
       attributeValueElement.setTextContentTruncatedIfNeeded(
           attributeValue, i18nString(UIStrings.valueIsTooLargeToEdit));

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -316,6 +316,21 @@ export class CSSWideKeywordRenderer extends rendererBase(SDK.CSSPropertyParserMa
   }
 }
 
+function handleVarDefinitionActivate(variable: string|SDK.CSSMatchedStyles.CSSValueSource,
+                                     stylesContainer: StylesContainer): void {
+  Host.userMetrics.actionTaken(Host.UserMetrics.Action.CustomPropertyLinkClicked);
+  Host.userMetrics.swatchActivated(Host.UserMetrics.SwatchType.VAR_LINK);
+
+  if (typeof variable === 'string') {
+    stylesContainer.jumpToProperty(variable) ||
+        stylesContainer.jumpToProperty('initial-value', variable, REGISTERED_PROPERTY_SECTION_NAME);
+  } else if (variable.declaration instanceof SDK.CSSProperty.CSSProperty) {
+    stylesContainer.revealProperty(variable.declaration);
+  } else if (variable.declaration instanceof SDK.CSSMatchedStyles.CSSRegisteredProperty) {
+    stylesContainer.jumpToProperty('initial-value', variable.name, REGISTERED_PROPERTY_SECTION_NAME);
+  }
+}
+
 // clang-format off
 export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.VariableMatch) {
   // clang-format on
@@ -344,7 +359,8 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     const {declaration, value: variableValue} = match.resolveVariable() ?? {};
     const fromFallback = variableValue === undefined;
     const computedValue = variableValue ?? match.fallbackValue();
-    const onLinkActivate = (name: string): void => this.#handleVarDefinitionActivate(declaration ?? name);
+    const onLinkActivate = (name: string): void =>
+        handleVarDefinitionActivate(declaration ?? name, this.#stylesContainer);
     const varSwatch = document.createElement('span');
 
     const substitution = context.tracing?.substitution({match, context});
@@ -416,19 +432,59 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
 
     return [colorSwatch, varSwatch];
   }
+}
 
-  #handleVarDefinitionActivate(variable: string|SDK.CSSMatchedStyles.CSSValueSource): void {
-    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CustomPropertyLinkClicked);
-    Host.userMetrics.swatchActivated(Host.UserMetrics.SwatchType.VAR_LINK);
+// clang-format off
+export class VariableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.VariableNameMatch) {
+  // clang-format on
+  readonly #stylesContainer: StylesContainer;
+  readonly #treeElement: StylePropertyTreeElement|null;
+  readonly #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  constructor(stylesContainer: StylesContainer, treeElement: StylePropertyTreeElement|null,
+              matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles) {
+    super();
+    this.#treeElement = treeElement;
+    this.#stylesContainer = stylesContainer;
+    this.#matchedStyles = matchedStyles;
+  }
 
-    if (typeof variable === 'string') {
-      this.#stylesContainer.jumpToProperty(variable) ||
-          this.#stylesContainer.jumpToProperty('initial-value', variable, REGISTERED_PROPERTY_SECTION_NAME);
-    } else if (variable.declaration instanceof SDK.CSSProperty.CSSProperty) {
-      this.#stylesContainer.revealProperty(variable.declaration);
-    } else if (variable.declaration instanceof SDK.CSSMatchedStyles.CSSRegisteredProperty) {
-      this.#stylesContainer.jumpToProperty('initial-value', variable.name, REGISTERED_PROPERTY_SECTION_NAME);
+  override render(match: SDK.CSSPropertyParserMatchers.VariableNameMatch, context: RenderingContext): Node[] {
+    if (this.#treeElement?.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule) {
+      return Renderer.render(ASTUtils.children(match.node), context).nodes;
     }
+
+    const {declaration, value: variableValue} = match.resolveVariable() ?? {};
+    const isDefined = variableValue !== undefined;
+    const onLinkActivate = (name: string): void =>
+        handleVarDefinitionActivate(declaration ?? name, this.#stylesContainer);
+    const varSwatch = document.createElement('span');
+
+    const tooltipContents =
+        this.#stylesContainer.getVariablePopoverContents(this.#matchedStyles, match.text, variableValue ?? null);
+    const tooltipId = this.#treeElement?.getTooltipId('custom-property-var');
+    const tooltip = tooltipId ? {tooltipId} : undefined;
+    // clang-format off
+    render(html`
+        <devtools-link-swatch class=css-var-link .data=${{
+            tooltip,
+            text: match.text,
+            isDefined,
+            onLinkActivate,
+          }}>
+        </devtools-link-swatch>
+        ${tooltipId ? html`
+          <devtools-tooltip
+            id=${tooltipId}
+            variant=rich
+            jslogContext=elements.css-var
+          >
+            ${tooltipContents}
+          </devtools-tooltip>
+        ` : ''}
+    `, varSwatch);
+    // clang-format on
+
+    return [varSwatch];
   }
 }
 
@@ -2007,6 +2063,7 @@ export function getPropertyRenderers(
     Array<MatchRenderer<SDK.CSSPropertyParser.Match>> {
   return [
     new VariableRenderer(stylesContainer, treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
+    new VariableNameRenderer(stylesContainer, treeElement, matchedStyles),
     new ColorRenderer(stylesContainer, treeElement),
     new ColorMixRenderer(stylesContainer, matchedStyles, computedStyles, computedStyleExtraFields, treeElement),
     new ContrastColorRenderer(stylesContainer, treeElement),
@@ -2026,10 +2083,10 @@ export function getPropertyRenderers(
     new EnvFunctionRenderer(treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
     new PositionTryRenderer(matchedStyles),
     new LengthRenderer(stylesContainer, propertyName, treeElement),
-    new MathFunctionRenderer(
-        stylesContainer, matchedStyles, computedStyles, computedStyleExtraFields, propertyName, treeElement),
-    new CustomFunctionRenderer(
-        stylesContainer, matchedStyles, computedStyles, computedStyleExtraFields, propertyName, treeElement),
+    new MathFunctionRenderer(stylesContainer, matchedStyles, computedStyles, computedStyleExtraFields, propertyName,
+                             treeElement),
+    new CustomFunctionRenderer(stylesContainer, matchedStyles, computedStyles, computedStyleExtraFields, propertyName,
+                               treeElement),
     new AutoBaseRenderer(computedStyles, computedStyleExtraFields),
     new BinOpRenderer(),
     new RelativeColorChannelRenderer(treeElement),
@@ -2082,7 +2139,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.#parentSection = section;
     this.isShorthand = isShorthand;
     this.newProperty = newProperty;
-    this.#lazyRender = stylesContainer.shouldRenderLazily();
+    this.#lazyRender = !this.newProperty && stylesContainer.shouldRenderLazily();
     if (this.newProperty) {
       this.listItemElement.textContent = '';
     }

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -137,7 +137,15 @@ export class StylesAiCodeCompletionProvider {
     }
     currentPropertyString = currentPropertyString + text;
     prefix = prefix + text;
-    const suffix = content.substring(propertyEndOffset);
+    let suffix = content.substring(propertyEndOffset);
+
+    const maxLength = TextEditor.AiCodeCompletionProvider.MAX_PREFIX_SUFFIX_LENGTH;
+    if (prefix.length > maxLength) {
+      prefix = prefix.substring(prefix.length - maxLength);
+    }
+    if (suffix.length > maxLength) {
+      suffix = suffix.substring(0, maxLength);
+    }
 
     const startTime = performance.now();
     // TODO(b/476098133): Consider adjusting cursor position