chrome-devtools-frontend 1.0.1646714 → 1.0.1649421

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/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

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -2038,11 +2038,23 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
   override onInput(event: Event): void {
     super.onInput(event);
     if (this.aiCodeCompletionProvider) {
-      this.#updateAiCodeSuggestion();
-      this.#debouncedTriggerAiCodeCompletion();
+      const inputEvent = event as InputEvent;
+      const isDeletion = inputEvent.inputType?.startsWith('delete');
+      if (isDeletion) {
+        this.#debouncedTriggerAiCodeCompletion.cancel();
+        this.setAiAutoCompletion(null);
+      } else {
+        this.#updateAiCodeSuggestion();
+        this.#debouncedTriggerAiCodeCompletion();
+      }
     }
   }
 
+  override detach(): void {
+    this.#debouncedTriggerAiCodeCompletion.cancel();
+    super.detach();
+  }
+
   #handleEscape(keyboardEvent: KeyboardEvent): boolean {
     if (!this.aiCodeCompletionProvider || !this.treeElement.section().activeAiSuggestion) {
       return false;
@@ -2050,12 +2062,13 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     keyboardEvent.preventDefault();
     if (this.isSuggestBoxVisible()) {
       this.suggestBox?.hide();
-      // Required for ensuring the suggestion is not cleared.
-      keyboardEvent.consume(true);
-      return true;
+    } else {
+      this.setAiAutoCompletion(null);
     }
-    this.setAiAutoCompletion(null);
-    return false;
+    // Consume the event to prevent it from bubbling up to cancel the editing session,
+    // and return true to prevent TextPrompt from processing it.
+    keyboardEvent.consume(true);
+    return true;
   }
 
   private handleNameOrValueUpDown(event: Event): boolean {
@@ -2331,6 +2344,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     if (!args) {
       this.treeElement.section().activeAiSuggestion = undefined;
       this.activeAiSuggestionInfo = undefined;
+      this.applySuggestion(null);
       return;
     }
 
@@ -2417,7 +2431,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
   }
 
   private acceptCodeComplete(): boolean {
-    if (this.isSuggestBoxVisible()) {
+    if (this.isSuggestBoxVisible() || this.currentSuggestion()) {
       // accept the suggestion from the traditional autocomplete menu
       this.acceptAutoComplete();