chrome-devtools-frontend 1.0.1516909 → 1.0.1518653

package/front_end/panels/accessibility/accessibilityProperties.css

@@ -4,6 +4,7 @@
  * found in the LICENSE file.
  */
 
+@scope to (devtools-widget > *) {
 .ax-name {
   color: var(--sys-color-token-attribute);
   flex-shrink: 0;
@@ -38,3 +39,4 @@ span.ax-internal-role {
   overflow-x: hidden;
   white-space: normal;
 }
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -35,6 +35,8 @@ import {
   type Step
 } from './components/ChatView.js';
 import {ExploreWidget} from './components/ExploreWidget.js';
+import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
+import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
 import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 
 const {html} = Lit;
@@ -263,6 +265,16 @@ async function getEmptyStateSuggestions(
   }
 }
 
+function getMarkdownRenderer(context: AiAssistanceModel.ConversationContext<unknown>|null):
+    MarkdownRendererWithCodeBlock {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext && !context.external) {
+    const focus = context.getItem();
+    return new PerformanceAgentMarkdownRenderer(focus.lookupEvent.bind(focus));
+  }
+
+  return new MarkdownRendererWithCodeBlock();
+}
+
 interface ToolbarViewInput {
   onNewChatClick: () => void;
   populateHistoryMenu: (contextMenu: UI.ContextMenu.ContextMenu) => void;
@@ -837,6 +849,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   override async performUpdate(): Promise<void> {
     const emptyStateSuggestions = await getEmptyStateSuggestions(this.#selectedContext, this.#conversation);
+    const markdownRenderer = getMarkdownRenderer(this.#selectedContext);
 
     this.view(
         {
@@ -865,6 +878,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           changeManager: this.#changeManager,
           uploadImageInputEnabled: isAiAssistanceMultimodalUploadInputEnabled() &&
               this.#conversation?.type === AiAssistanceModel.ConversationType.STYLING,
+          markdownRenderer,
           onNewChatClick: this.#handleNewChatRequest.bind(this),
           populateHistoryMenu: this.#populateHistoryMenu.bind(this),
           onDeleteClick: this.#onDeleteClicked.bind(this),
@@ -1054,8 +1068,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       const focus = context.getItem().data;
       if (focus.callTree) {
         const event = focus.callTree.selectedNode?.event ?? focus.callTree.rootNode.event;
-        const trace = new SDK.TraceObject.RevealableEvent(event);
-        return Common.Revealer.reveal(trace);
+        const revealable = new SDK.TraceObject.RevealableEvent(event);
+        return Common.Revealer.reveal(revealable);
       }
       if (focus.insight) {
         return Common.Revealer.reveal(focus.insight);

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

@@ -18,13 +18,13 @@ import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
+import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {PatchWidget} from '../PatchWidget.js';
 
 import chatViewStyles from './chatView.css.js';
-import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 import {UserActionRow} from './UserActionRow.js';
 
 const {html, Directives: {ifDefined, ref}} = Lit;
@@ -303,11 +303,11 @@ export interface Props {
   disclaimerText: Platform.UIString.LocalizedString;
   isTextInputEmpty: boolean;
   uploadImageInputEnabled?: boolean;
+  markdownRenderer: MarkdownLitRenderer;
 }
 
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
-  #markdownRenderer = new MarkdownRendererWithCodeBlock();
   #scrollTop?: number;
   #props: Props;
   #messagesContainerElement?: Element;
@@ -338,7 +338,6 @@ export class ChatView extends HTMLElement {
   }
 
   set props(props: Props) {
-    this.#markdownRenderer = new MarkdownRendererWithCodeBlock();
     this.#props = props;
     this.#render();
   }
@@ -624,7 +623,7 @@ export class ChatView extends HTMLElement {
             isTextInputDisabled: this.#props.isTextInputDisabled,
             suggestions: this.#props.emptyStateSuggestions,
             userInfo: this.#props.userInfo,
-            markdownRenderer: this.#markdownRenderer,
+            markdownRenderer: this.#props.markdownRenderer,
             conversationType: this.#props.conversationType,
             changeSummary: this.#props.changeSummary,
             changeManager: this.#props.changeManager,
@@ -672,7 +671,7 @@ export class ChatView extends HTMLElement {
   }
 }
 
-function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownRendererWithCodeBlock, {animate, ref: refFn}: {
+function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownLitRenderer, {animate, ref: refFn}: {
   animate?: boolean,
   ref?: (element?: Element) => void,
 } = {}): Lit.TemplateResult {
@@ -753,7 +752,7 @@ function renderStepDetails({
   isLast,
 }: {
   step: Step,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
   const sideEffects = isLast && step.sideEffect ? renderSideEffectConfirmationUi(step) : Lit.nothing;
@@ -817,7 +816,7 @@ function renderStepBadge({step, isLoading, isLast}: {
 function renderStep({step, isLoading, markdownRenderer, isLast}: {
   step: Step,
   isLoading: boolean,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
   const stepClasses = Lit.Directives.classMap({
@@ -926,7 +925,7 @@ function renderChatMessage({
   canShowFeedbackForm: boolean,
   isLast: boolean,
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
   onCopyResponseClick: (message: ModelChatMessage) => void,
@@ -1156,7 +1155,7 @@ function renderMessages({
   isReadOnly: boolean,
   canShowFeedbackForm: boolean,
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
   onCopyResponseClick: (message: ModelChatMessage) => void,
@@ -1657,7 +1656,7 @@ function renderMainContents({
   isTextInputDisabled: boolean,
   suggestions: AiAssistanceModel.ConversationSuggestion[],
   userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownRendererWithCodeBlock,
+  markdownRenderer: MarkdownLitRenderer,
   changeManager: AiAssistanceModel.ChangeManager,
   onSuggestionClick: (suggestion: string) => void,
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,

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

@@ -0,0 +1,42 @@
+// Copyright 2025 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 SDK from '../../../core/sdk/sdk.js';
+import * as Trace from '../../../models/trace/trace.js';
+import type * as Marked from '../../../third_party/marked/marked.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
+
+const {html} = Lit;
+
+export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
+  constructor(private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null) {
+    super();
+  }
+
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.TemplateResult|null {
+    if (token.type === 'link' && token.href.startsWith('#')) {
+      const event = this.lookupEvent(token.href.slice(1) as Trace.Types.File.SerializableKey);
+      if (event) {
+        let label = token.text;
+        let title = '';
+        if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+          title = event.args.data.url;
+        } else {
+          label += ` (${event.name})`;
+        }
+
+        // eslint-disable-next-line rulesdir/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 super.templateForToken(token);
+  }
+}

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -33,6 +33,10 @@ const UIStringsNotTranslate = {
    */
   tooltipDisclaimerTextForAiCodeCompletionNoLogging:
       'To generate code suggestions, your console input and the history of your current console session are shared with Google. This data will not be used to improve Google’s AI models.',
+  /**
+   * Text for tooltip shown on hovering over spinner.
+   */
+  tooltipTextForSpinner: 'Shows when data is being sent to Google to generate code suggestions',
   /**
    * @description Text for tooltip button which redirects to AI settings
    */
@@ -47,6 +51,7 @@ const lockedString = i18n.i18n.lockedString;
 
 export interface ViewInput {
   disclaimerTooltipId?: string;
+  spinnerTooltipId?: string;
   noLogging: boolean;
   aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   onManageInSettingsTooltipClick: () => void;
@@ -59,12 +64,14 @@ export interface ViewOutput {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
-  if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE || !input.disclaimerTooltipId) {
-    render(nothing, target);
-    return;
-  }
-  // clang-format off
+export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
+    (input, output, target) => {
+      if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE || !input.disclaimerTooltipId ||
+          !input.spinnerTooltipId) {
+        render(nothing, target);
+        return;
+      }
+      // clang-format off
   render(
     html`
         <style>${styles}</style>
@@ -76,7 +83,16 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                 el.toggleAttribute('active', isLoading);
               };
             }
-          })}></devtools-spinner>
+          })}
+          aria-details=${input.spinnerTooltipId}
+          aria-describedby=${input.spinnerTooltipId}></devtools-spinner>
+          <devtools-tooltip
+              id=${input.spinnerTooltipId}
+              variant=${'rich'}
+              jslogContext=${'ai-code-completion-spinner-tooltip'}>
+          <div class="disclaimer-tooltip-container"><div class="tooltip-text">
+            ${lockedString(UIStringsNotTranslate.tooltipTextForSpinner)}
+          </div></div></devtools-tooltip>
           <span
               tabIndex="0"
               class="link"
@@ -115,8 +131,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                 >${lockedString(UIStringsNotTranslate.manageInSettings)}</span></div></devtools-tooltip>
           </div>
         `, target);
-  // clang-format on
-};
+      // clang-format on
+    };
 
 const MINIMUM_LOADING_STATE_TIMEOUT = 1000;
 
@@ -124,6 +140,7 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
   readonly #view: View;
   #viewOutput: ViewOutput = {};
 
+  #spinnerTooltipId?: string;
   #disclaimerTooltipId?: string;
   #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #loading = false;
@@ -147,6 +164,11 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  set spinnerTooltipId(spinnerTooltipId: string) {
+    this.#spinnerTooltipId = spinnerTooltipId;
+    this.requestUpdate();
+  }
+
   set loading(loading: boolean) {
     if (!loading && !this.#loading) {
       return;
@@ -191,6 +213,7 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     this.#view(
         {
           disclaimerTooltipId: this.#disclaimerTooltipId,
+          spinnerTooltipId: this.#spinnerTooltipId,
           noLogging: this.#noLogging,
           aidaAvailability: this.#aidaAvailability,
           onManageInSettingsTooltipClick: this.#onManageInSettingsTooltipClick.bind(this),

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -30,11 +30,13 @@ const lockedString = i18n.i18n.lockedString;
 export interface AiCodeCompletionSummaryToolbarProps {
   citationsTooltipId: string;
   disclaimerTooltipId?: string;
+  spinnerTooltipId?: string;
   hasTopBorder?: boolean;
 }
 
 export interface ViewInput {
   disclaimerTooltipId?: string;
+  spinnerTooltipId?: string;
   citations?: Set<string>;
   citationsTooltipId: string;
   loading: boolean;
@@ -57,10 +59,11 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
   });
 
   // clang-format off
-  const disclaimer = input.disclaimerTooltipId ?
+  const disclaimer = input.disclaimerTooltipId && input.spinnerTooltipId ?
     html`<devtools-widget
             .widgetConfig=${UI.Widget.widgetConfig(AiCodeCompletionDisclaimer, {
       disclaimerTooltipId: input.disclaimerTooltipId,
+      spinnerTooltipId: input.spinnerTooltipId,
       loading: input.loading,
     })} class="disclaimer-widget"></devtools-widget>` : nothing;
 
@@ -102,6 +105,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
   readonly #view: View;
 
   #disclaimerTooltipId?: string;
+  #spinnerTooltipId?: string;
   #citationsTooltipId: string;
   #citations = new Set<string>();
   #loading = false;
@@ -113,6 +117,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
   constructor(props: AiCodeCompletionSummaryToolbarProps, view?: View) {
     super();
     this.#disclaimerTooltipId = props.disclaimerTooltipId;
+    this.#spinnerTooltipId = props.spinnerTooltipId;
     this.#citationsTooltipId = props.citationsTooltipId;
     this.#hasTopBorder = props.hasTopBorder ?? false;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
@@ -147,6 +152,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
     this.#view(
         {
           disclaimerTooltipId: this.#disclaimerTooltipId,
+          spinnerTooltipId: this.#spinnerTooltipId,
           citations: this.#citations,
           citationsTooltipId: this.#citationsTooltipId,
           loading: this.#loading,

package/front_end/panels/common/BadgeNotification.ts

@@ -73,13 +73,14 @@ const AUTO_CLOSE_TIME_IN_MS = 30000;
 
 export interface BadgeNotificationAction {
   label: string;
-  jslogContext?: string;
+  jslogContext: string;
   title?: string;
   onClick: () => void;
 }
 
 export interface BadgeNotificationProperties {
   message: HTMLElement|string;
+  jslogContext: string;
   imageUri: string;
   actions: BadgeNotificationAction[];
   isStarterBadge: boolean;
@@ -115,8 +116,8 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 
   render(html`
     <style>${badgeNotificationStyles}</style>
-    <div class="container">
-      <div class="badge-container">
+    <div class="container" jslog=${VisualLogging.dialog('badge-notification')}>
+      <div class="badge-container" jslog=${VisualLogging.item(input.jslogContext)}>
         <img class="badge-image" role="presentation" src=${input.imageUri}>
       </div>
       <div class="action-and-text-container">
@@ -138,6 +139,7 @@ function revealBadgeSettings(): void {
 }
 
 export class BadgeNotification extends UI.Widget.Widget {
+  jslogContext = '';
   message: HTMLElement|string = '';
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
@@ -175,6 +177,7 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.imageUri = properties.imageUri;
     this.actions = properties.actions;
     this.isStarterBadge = properties.isStarterBadge;
+    this.jslogContext = properties.jslogContext;
     this.requestUpdate();
     this.show(document.body);
 
@@ -193,7 +196,7 @@ export class BadgeNotification extends UI.Widget.Widget {
     const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
     const googleDeveloperProgramLink = UI.XLink.XLink.create(
         'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
-        'gdp.program-link');
+        'program-link');
 
     // If the user already has a GDP profile and the receive badges setting enabled,
     // starter badge behaves as if it's an activity based badge.
@@ -208,9 +211,11 @@ export class BadgeNotification extends UI.Widget.Widget {
       this.#show({
         message: i18nFormatString(
             UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+        jslogContext: badge.name,
         actions: [
           {
             label: i18nString(UIStrings.remindMeLater),
+            jslogContext: 'remind-me-later',
             onClick: () => {
               this.detach();
               Badges.UserBadges.instance().snoozeStarterBadge();
@@ -218,6 +223,7 @@ export class BadgeNotification extends UI.Widget.Widget {
           },
           {
             label: i18nString(UIStrings.receiveBadges),
+            jslogContext: 'receive-badges',
             onClick: () => {
               this.detach();
               revealBadgeSettings();
@@ -234,9 +240,11 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#show({
       message: i18nFormatString(
           UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      jslogContext: badge.name,
       actions: [
         {
           label: i18nString(UIStrings.remindMeLater),
+          jslogContext: 'remind-me-later',
           onClick: () => {
             this.detach();
             Badges.UserBadges.instance().snoozeStarterBadge();
@@ -244,9 +252,13 @@ export class BadgeNotification extends UI.Widget.Widget {
         },
         {
           label: i18nString(UIStrings.createProfile),
+          jslogContext: 'create-profile',
           onClick: () => {
             this.detach();
-            GdpSignUpDialog.GdpSignUpDialog.show();
+            GdpSignUpDialog.GdpSignUpDialog.show({
+              // We want to consider cancelling from the starter badge as a "snooze" for starter badge.
+              onCancel: () => Badges.UserBadges.instance().snoozeStarterBadge(),
+            });
           }
         }
       ],
@@ -258,9 +270,11 @@ export class BadgeNotification extends UI.Widget.Widget {
   #presentActivityBasedBadge(badge: Badges.Badge): void {
     this.#show({
       message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
+      jslogContext: badge.name,
       actions: [
         {
           label: i18nString(UIStrings.manageSettings),
+          jslogContext: 'manage-settings',
           onClick: () => {
             this.detach();
             revealBadgeSettings();
@@ -268,6 +282,7 @@ export class BadgeNotification extends UI.Widget.Widget {
         },
         {
           label: i18nString(UIStrings.viewProfile),
+          jslogContext: 'view-profile',
           onClick: () => {
             UI.UIUtils.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
           }
@@ -310,6 +325,7 @@ export class BadgeNotification extends UI.Widget.Widget {
       actions: this.actions,
       isStarterBadge: this.isStarterBadge,
       onDismissClick: this.#onDismissClick,
+      jslogContext: this.jslogContext,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -137,7 +137,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <devtools-switch
             .checked=${input.keepMeUpdated}
             @switchchange=${(e: Switch.Switch.SwitchChangeEvent) => input.onKeepMeUpdatedChange(e.checked)}
-            jslog=${VisualLogging.toggle('gdp.signup.keep-me-updated').track({ click: true })}
+            jslog=${VisualLogging.toggle('keep-me-updated').track({ click: true })}
             aria-label=${i18nString(UIStrings.keepUpdated)}
           >
             </devtools-switch>
@@ -152,11 +152,11 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <div class="section-text">
               <div>${i18nString(UIStrings.tailorProfileBody)}</div><br/>
               <div>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.tailorProfileBodyDisclaimer, {
-      PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'gdp.content-policy'),
+      PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'content-policy'),
       PH2: UI.XLink.XLink.create(TERMS_OF_SERVICE_URL, i18nString(UIStrings.termsOfService), 'link',
-        undefined, 'gdp.terms-of-service'),
+        undefined, 'terms-of-service'),
       PH3: UI.XLink.XLink.create(PRIVACY_POLICY_URL, i18nString(UIStrings.privacyPolicy), 'link',
-        undefined, 'gdp.privacy-policy'),
+        undefined, 'privacy-policy'),
     })}</div>
             </div>
           </div>
@@ -176,7 +176,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             @click=${input.onCancelClick}>${i18nString(UIStrings.cancel)}</devtools-button>
           <devtools-button
             .variant=${Buttons.Button.Variant.PRIMARY}
-            .jslogContext=${'gdp.sign-up'}
+            .jslogContext=${'sign-up'}
             .spinner=${input.isSigningUp}
             .disabled=${input.isSigningUp}
             @click=${input.onSignUpClick}>${i18nString(UIStrings.signUp)}</devtools-button>
@@ -194,11 +194,19 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
   #keepMeUpdated = false;
   #isSigningUp = false;
   #onSuccess?: () => void;
+  #onCancel?: () => void;
 
-  constructor(options: {dialog: UI.Dialog.Dialog, onSuccess?: () => void}, view?: View) {
+  constructor(
+      options: {
+        dialog: UI.Dialog.Dialog,
+        onSuccess?: () => void,
+        onCancel?: () => void,
+      },
+      view?: View) {
     super();
     this.#dialog = options.dialog;
     this.#onSuccess = options.onSuccess;
+    this.#onCancel = options.onCancel;
     this.#view = view ?? DEFAULT_VIEW;
     this.requestUpdate();
   }
@@ -231,6 +239,7 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
       onSignUpClick: this.#onSignUpClick.bind(this),
       onCancelClick: () => {
         this.#dialog.hide();
+        this.#onCancel?.();
       },
       keepMeUpdated: this.#keepMeUpdated,
       onKeepMeUpdatedChange: (value: boolean) => {
@@ -243,14 +252,14 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
     this.#view(viewInput, undefined, this.contentElement);
   }
 
-  static show({onSuccess}: {onSuccess?: () => void} = {}): void {
-    const dialog = new UI.Dialog.Dialog();
+  static show({onSuccess, onCancel}: {onSuccess?: () => void, onCancel?: () => void} = {}): void {
+    const dialog = new UI.Dialog.Dialog('gdp-sign-up-dialog');
     dialog.setAriaLabel(i18nString(UIStrings.gdpDialogAriaLabel));
     dialog.setMaxContentSize(new Geometry.Size(384, 500));
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     dialog.setDimmed(true);
 
-    new GdpSignUpDialog({dialog, onSuccess}).show(dialog.contentElement);
+    new GdpSignUpDialog({dialog, onSuccess, onCancel}).show(dialog.contentElement);
     dialog.show(undefined, /* stack */ true);
   }
 }

package/front_end/panels/console/ConsolePrompt.ts

@@ -529,7 +529,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.teaser = undefined;
     }
     this.aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.aidaClient}, this.editor, AiCodeCompletion.AiCodeCompletion.Panel.CONSOLE, ['\n\n']);
+        {aidaClient: this.aidaClient}, this.editor, AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE, ['\n\n']);
     this.aiCodeCompletion.addEventListener(AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, event => {
       this.aiCodeCompletionCitations = event.data.citations;
       this.dispatchEventToListeners(Events.AI_CODE_COMPLETION_RESPONSE_RECEIVED, event.data);

package/front_end/panels/console/ConsoleView.ts

@@ -270,6 +270,7 @@ let consoleViewInstance: ConsoleView;
 
 const MIN_HISTORY_LENGTH_FOR_DISABLING_SELF_XSS_WARNING = 5;
 const DISCLAIMER_TOOLTIP_ID = 'console-ai-code-completion-disclaimer-tooltip';
+const SPINNER_TOOLTIP_ID = 'console-ai-code-completion-spinner-tooltip';
 const CITATIONS_TOOLTIP_ID = 'console-ai-code-completion-citations-tooltip';
 
 export class ConsoleView extends UI.Widget.VBox implements
@@ -624,8 +625,11 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   createAiCodeCompletionSummaryToolbar(): void {
-    this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar(
-        {citationsTooltipId: CITATIONS_TOOLTIP_ID, disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID});
+    this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar({
+      citationsTooltipId: CITATIONS_TOOLTIP_ID,
+      disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
+      spinnerTooltipId: SPINNER_TOOLTIP_ID
+    });
     this.aiCodeCompletionSummaryToolbarContainer = this.element.createChild('div');
     this.aiCodeCompletionSummaryToolbar.show(this.aiCodeCompletionSummaryToolbarContainer, undefined, true);
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -774,6 +774,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.selectDOMNode(node, focus);
   }
 
+  highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
+    this.#domTreeWidget.highlightNodeAttribute(node, attribute);
+  }
+
   selectAndShowSidebarTab(tabId: SidebarPaneTabId): void {
     if (!this.sidebarPaneView) {
       return;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -488,6 +488,24 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  highlightAttribute(attributeName: string): void {
+    // If the attribute is not found, we highlight the tag name instead.
+    let animationElement = this.listItemElement.querySelector('.webkit-html-tag-name') ?? this.listItemElement;
+
+    if (this.nodeInternal.getAttribute(attributeName) !== undefined) {
+      const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0];
+      const attributes = tag.getElementsByClassName('webkit-html-attribute');
+      for (const attribute of attributes) {
+        const attributeElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0];
+        if (attributeElement.textContent === attributeName) {
+          animationElement = attributeElement;
+          break;
+        }
+      }
+    }
+    UI.UIUtils.runCSSAnimationOnce(animationElement, 'dom-update-highlight');
+  }
+
   isClosingTag(): boolean {
     return !isOpeningTag(this.tagTypeContext);
   }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -260,6 +260,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
   }
 
+  highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
+    this.#viewOutput?.elementsTreeOutline?.highlightNodeAttribute(node, attribute);
+  }
+
   setWordWrap(wrap: boolean): void {
     this.#wrap = wrap;
     this.performUpdate();
@@ -1006,6 +1010,15 @@ export class ElementsTreeOutline extends
     treeElement.revealAndSelect(omitFocus);
   }
 
+  highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
+    const treeElement = this.findTreeElement(node);
+    if (!treeElement) {
+      return;
+    }
+    treeElement.reveal();
+    treeElement.highlightAttribute(attribute);
+  }
+
   treeElementFromEventInternal(event: MouseEvent): UI.TreeOutline.TreeElement|null {
     const scrollContainer = this.element.parentElement;
     if (!scrollContainer) {