chrome-devtools-frontend 1.0.1518653 → 1.0.1520139

package/front_end/models/trace/handlers/UserInteractionsHandler.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
@@ -56,15 +57,15 @@ let longestInteractionEvent: Types.Events.SyntheticInteractionPair|null = null;
 
 let interactionEvents: Types.Events.SyntheticInteractionPair[] = [];
 let interactionEventsWithNoNesting: Types.Events.SyntheticInteractionPair[] = [];
-let eventTimingEndEventsById = new Map<string, Types.Events.EventTimingEnd>();
 let eventTimingStartEventsForInteractions: Types.Events.EventTimingBegin[] = [];
+let eventTimingEndEventsForInteractions: Types.Events.EventTimingEnd[] = [];
 
 export function reset(): void {
   beginCommitCompositorFrameEvents = [];
   parseMetaViewportEvents = [];
   interactionEvents = [];
   eventTimingStartEventsForInteractions = [];
-  eventTimingEndEventsById = new Map();
+  eventTimingEndEventsForInteractions = [];
   interactionEventsWithNoNesting = [];
   longestInteractionEvent = null;
 }
@@ -86,7 +87,7 @@ export function handleEvent(event: Types.Events.Event): void {
 
   if (Types.Events.isEventTimingEnd(event)) {
     // Store the end event; for each start event that is an interaction, we need the matching end event to calculate the duration correctly.
-    eventTimingEndEventsById.set(event.id, event);
+    eventTimingEndEventsForInteractions.push(event);
   }
 
   // From this point on we want to find events that represent interactions.
@@ -167,9 +168,18 @@ export function categoryOfInteraction(interaction: Types.Events.SyntheticInterac
  *   =======B=[keyup]=====
  *    ====C=[pointerdown]=
  *         =D=[pointerup]=
+ *
+ * Additionally, this method will also maximise the processing duration of the
+ * events that we keep as non-nested. We want to make sure we give an accurate
+ * representation of main thread activity, so if we keep an event + hide its
+ * nested children, we set the top level event's processing start &
+ * processing end to be the earliest processing start & the latest processing
+ * end of its children. This ensures we report a more accurate main thread
+ * activity time which is important as we want developers to focus on fixing
+ * this.
  **/
-export function removeNestedInteractions(interactions: readonly Types.Events.SyntheticInteractionPair[]):
-    readonly Types.Events.SyntheticInteractionPair[] {
+export function removeNestedInteractionsAndSetProcessingTime(
+    interactions: readonly Types.Events.SyntheticInteractionPair[]): readonly Types.Events.SyntheticInteractionPair[] {
   /**
    * Because we nest events only that are in the same category, we store the
    * longest event for a given end time by category.
@@ -257,77 +267,95 @@ function writeSyntheticTimespans(event: Types.Events.SyntheticInteractionPair):
 export async function finalize(): Promise<void> {
   const {navigationsByFrameId} = metaHandlerData();
 
-  // For each interaction start event, find the async end event by the ID, and then create the Synthetic Interaction event.
-  for (const interactionStartEvent of eventTimingStartEventsForInteractions) {
-    const endEvent = eventTimingEndEventsById.get(interactionStartEvent.id);
-    if (!endEvent) {
-      // If we cannot find an end event, bail and drop this event.
-      continue;
-    }
-    const {type, interactionId, timeStamp, processingStart, processingEnd} = interactionStartEvent.args.data;
-    if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
-      // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
-      // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
-      continue;
-    }
-
-    // In the future we will add microsecond timestamps to the trace events…
-    // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
-    // …but until then we can use the millisecond precision values that are in
-    // the trace event. To adjust them to be relative to the event.ts and the
-    // trace timestamps, for both processingStart and processingEnd we subtract
-    // the event timestamp (NOT event.ts, but the timeStamp millisecond value
-    // emitted in args.data), and then add that value to the event.ts. This
-    // will give us a processingStart and processingEnd time in microseconds
-    // that is relative to event.ts, and can be used when drawing boxes.
-    // There is some inaccuracy here as we are converting milliseconds to microseconds, but it is good enough until the backend emits more accurate numbers.
-    const processingStartRelativeToTraceTime = Types.Timing.Micro(
-        Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) +
-            interactionStartEvent.ts,
-    );
-
-    const processingEndRelativeToTraceTime = Types.Timing.Micro(
-        (Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) +
-        interactionStartEvent.ts);
-
-    // Ultimate frameId fallback only needed for TSC, see comments in the type.
-    const frameId = interactionStartEvent.args.frame ?? interactionStartEvent.args.data.frame ?? '';
-    const navigation = Helpers.Trace.getNavigationForTraceEvent(interactionStartEvent, frameId, navigationsByFrameId);
-    const navigationId = navigation?.args.data?.navigationId;
-    const interactionEvent =
-        Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticInteractionPair>({
-          // Use the start event to define the common fields.
-          rawSourceEvent: interactionStartEvent,
-          cat: interactionStartEvent.cat,
-          name: interactionStartEvent.name,
-          pid: interactionStartEvent.pid,
-          tid: interactionStartEvent.tid,
-          ph: interactionStartEvent.ph,
-          processingStart: processingStartRelativeToTraceTime,
-          processingEnd: processingEndRelativeToTraceTime,
-          // These will be set in writeSyntheticTimespans()
-          inputDelay: Types.Timing.Micro(-1),
-          mainThreadHandling: Types.Timing.Micro(-1),
-          presentationDelay: Types.Timing.Micro(-1),
-          args: {
-            data: {
-              beginEvent: interactionStartEvent,
-              endEvent,
-              frame: frameId,
-              navigationId,
+  const beginAndEndEvents = Platform.ArrayUtilities.mergeOrdered(
+                                eventTimingStartEventsForInteractions, eventTimingEndEventsForInteractions,
+                                Helpers.Trace.eventTimeComparator) as Types.Events.EventTimingBeginOrEnd[];
+
+  // Pair up the begin & end events and create synthetic user timing events.
+  const beginEventById = new Map<string, Types.Events.EventTimingBegin[]>();
+  for (const event of beginAndEndEvents) {
+    if (Types.Events.isEventTimingStart(event)) {
+      const forId = beginEventById.get(event.id) ?? [];
+      forId.push(event);
+      beginEventById.set(event.id, forId);
+    } else if (Types.Events.isEventTimingEnd(event)) {
+      const beginEvents = beginEventById.get(event.id) ?? [];
+      const beginEvent = beginEvents.pop();
+      if (!beginEvent) {
+        continue;
+      }
+      const {type, interactionId, timeStamp, processingStart, processingEnd} = beginEvent.args.data;
+      if (!type || !interactionId || !timeStamp || !processingStart || !processingEnd) {
+        // A valid interaction event that we care about has to have a type (e.g. pointerdown, keyup).
+        // We also need to ensure it has an interactionId and various timings. There are edge cases where these aren't included in the trace event.
+        continue;
+      }
+      // In the future we will add microsecond timestamps to the trace events…
+      // (See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7 )
+      // …but until then we can use the millisecond precision values that are in
+      // the trace event. To adjust them to be relative to the event.ts and the
+      // trace timestamps, for both processingStart and processingEnd we subtract
+      // the event timestamp (NOT event.ts, but the timeStamp millisecond value
+      // emitted in args.data), and then add that value to the event.ts. This
+      // will give us a processingStart and processingEnd time in microseconds
+      // that is relative to event.ts, and can be used when drawing boxes.
+      // There is some inaccuracy here as we are converting milliseconds to
+      // microseconds, but it is good enough until the backend emits more
+      // accurate numbers.
+      const processingStartRelativeToTraceTime = Types.Timing.Micro(
+          Helpers.Timing.milliToMicro(processingStart) - Helpers.Timing.milliToMicro(timeStamp) + beginEvent.ts,
+      );
+
+      const processingEndRelativeToTraceTime = Types.Timing.Micro(
+          (Helpers.Timing.milliToMicro(processingEnd) - Helpers.Timing.milliToMicro(timeStamp)) + beginEvent.ts);
+
+      // Ultimate frameId fallback only needed for TSC, see comments in the type.
+      const frameId = beginEvent.args.frame ?? beginEvent.args.data.frame ?? '';
+      const navigation = Helpers.Trace.getNavigationForTraceEvent(beginEvent, frameId, navigationsByFrameId);
+      const navigationId = navigation?.args.data?.navigationId;
+      const interactionEvent =
+          Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticInteractionPair>({
+            // Use the start event to define the common fields.
+            rawSourceEvent: beginEvent,
+            cat: beginEvent.cat,
+            name: beginEvent.name,
+            pid: beginEvent.pid,
+            tid: beginEvent.tid,
+            ph: beginEvent.ph,
+            processingStart: processingStartRelativeToTraceTime,
+            processingEnd: processingEndRelativeToTraceTime,
+            // These will be set in writeSyntheticTimespans()
+            inputDelay: Types.Timing.Micro(-1),
+            mainThreadHandling: Types.Timing.Micro(-1),
+            presentationDelay: Types.Timing.Micro(-1),
+            args: {
+              data: {
+                beginEvent,
+                endEvent: event,
+                frame: frameId,
+                navigationId,
+              },
             },
-          },
-          ts: interactionStartEvent.ts,
-          dur: Types.Timing.Micro(endEvent.ts - interactionStartEvent.ts),
-          type: interactionStartEvent.args.data.type,
-          interactionId: interactionStartEvent.args.data.interactionId,
-        });
-    writeSyntheticTimespans(interactionEvent);
-
-    interactionEvents.push(interactionEvent);
+            ts: beginEvent.ts,
+            dur: Types.Timing.Micro(event.ts - beginEvent.ts),
+            type: beginEvent.args.data.type,
+            interactionId: beginEvent.args.data.interactionId,
+          });
+      writeSyntheticTimespans(interactionEvent);
+      interactionEvents.push(interactionEvent);
+    }
   }
 
-  interactionEventsWithNoNesting.push(...removeNestedInteractions(interactionEvents));
+  // Once we gather up all the interactions, we want to remove nested
+  // interactions. Interactions can be nested because one user action (e.g. a
+  // click) will cause a pointerdown, pointerup and click. But we don't want to
+  // fill the interactions track with lots of noise. To fix this, we go through
+  // all the events and remove any nested ones so on the timeline we focus the
+  // user on the most important events, which we define as the longest one. But
+  // this algorithm assumes the events are in ASC order, so we first sort the
+  // set of interactions.
+  Helpers.Trace.sortTraceEventsInPlace(interactionEvents);
+  interactionEventsWithNoNesting.push(...removeNestedInteractionsAndSetProcessingTime(interactionEvents));
 
   // Pick the longest interactions from the set that were not nested, as we
   // know those are the set of the largest interactions.

package/front_end/models/trace/helpers/Timing.ts

@@ -221,7 +221,7 @@ export function boundsIncludeTimeRange(data: BoundsIncludeTimeRange): boolean {
 /** Checks to see if the event is within or overlaps the bounds */
 export function eventIsInBounds(event: Types.Events.Event, bounds: Types.Timing.TraceWindowMicro): boolean {
   const startTime = event.ts;
-  return startTime <= bounds.max && bounds.min <= (startTime + (event.dur ?? 0));
+  return startTime <= bounds.max && bounds.min < (startTime + (event.dur ?? 0));
 }
 
 export function timestampIsInBounds(bounds: Types.Timing.TraceWindowMicro, timestamp: Types.Timing.Micro): boolean {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -12,6 +12,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -265,11 +266,18 @@ 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));
+function getMarkdownRenderer(
+    context: AiAssistanceModel.ConversationContext<unknown>|null,
+    conversation?: AiAssistanceModel.Conversation): MarkdownRendererWithCodeBlock {
+  if (context instanceof AiAssistanceModel.PerformanceTraceContext) {
+    if (!context.external) {
+      const focus = context.getItem();
+      return new PerformanceAgentMarkdownRenderer(
+          focus.parsedTrace.data.Meta.mainFrameId, focus.lookupEvent.bind(focus));
+    }
+  } else if (conversation?.type === AiAssistanceModel.ConversationType.PERFORMANCE) {
+    // Handle historical conversations (can't linkify anything).
+    return new PerformanceAgentMarkdownRenderer();
   }
 
   return new MarkdownRendererWithCodeBlock();
@@ -849,7 +857,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);
+    const markdownRenderer = getMarkdownRenderer(this.#selectedContext, this.#conversation);
 
     this.view(
         {
@@ -1065,7 +1073,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
     if (context instanceof AiAssistanceModel.PerformanceTraceContext) {
-      const focus = context.getItem().data;
+      const focus = context.getItem();
       if (focus.callTree) {
         const event = focus.callTree.selectedNode?.event ?? focus.callTree.rootNode.event;
         const revealable = new SDK.TraceObject.RevealableEvent(event);
@@ -1409,7 +1417,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       // invariants do not hold anymore.
       throw new Error('cross-origin context data should not be included');
     }
-
+    if (this.#conversation?.isEmpty) {
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.STARTED_AI_CONVERSATION);
+    }
     const image = isAiAssistanceMultimodalInputEnabled() ? imageInput : undefined;
     const imageId = image ? crypto.randomUUID() : undefined;
     const multimodalInput = image && imageId && multimodalInputType ? {

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -182,7 +182,6 @@ export interface ViewInput {
 }
 
 export interface ViewOutput {
-  tooltipRef?: Directives.Ref<HTMLElement>;
   changeRef?: Directives.Ref<HTMLElement>;
   summaryRef?: Directives.Ref<HTMLElement>;
 }
@@ -211,7 +210,6 @@ export class PatchWidget extends UI.Widget.Widget {
   #automaticFileSystem =
       Persistence.AutomaticFileSystemManager.AutomaticFileSystemManager.instance().automaticFileSystem;
   #applyToDisconnectedAutomaticWorkspace = false;
-  #popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
   // `rpcId` from the `applyPatch` request
   #rpcId: Host.AidaClient.RpcGlobalId|null = null;
 
@@ -228,7 +226,7 @@ export class PatchWidget extends UI.Widget.Widget {
       if (!input.changeSummary && input.patchSuggestionState === PatchSuggestionState.INITIAL) {
         return;
       }
-      output.tooltipRef = output.tooltipRef ?? Directives.createRef<HTMLElement>();
+
       output.changeRef = output.changeRef ?? Directives.createRef<HTMLElement>();
       output.summaryRef = output.summaryRef ?? Directives.createRef<HTMLElement>();
 
@@ -390,8 +388,23 @@ export class PatchWidget extends UI.Widget.Widget {
               .jslogContext=${'patch-widget.info-tooltip-trigger'}
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}
-              .title=${input.applyToWorkspaceTooltipText}
             ></devtools-button>
+            <devtools-tooltip
+                id="info-tooltip"
+                variant=${'rich'}
+              >
+             <div class="info-tooltip-container">
+               ${input.applyToWorkspaceTooltipText}
+               <button
+                 class="link tooltip-link"
+                 role="link"
+                 jslog=${VisualLogging.link('open-ai-settings').track({
+                   click: true,
+                 })}
+                 @click=${input.onLearnMoreTooltipClick}
+               >${lockedString(UIStringsNotTranslate.learnMore)}</button>
+             </div>
+            </devtools-tooltip>
           </div>
         </div>`;
       }
@@ -417,62 +430,11 @@ export class PatchWidget extends UI.Widget.Widget {
 
       render(template, target, {host: target});
     });
-    // We're using PopoverHelper as a workaround instead of using <devtools-tooltip>. See the bug for more details.
-    // TODO: Update here when b/409965560 is fixed.
-    this.#popoverHelper = new UI.PopoverHelper.PopoverHelper(this.contentElement, event => {
-      // There are two ways this event is received for showing a popover case:
-      // * The latest element on the composed path is `<devtools-button>`
-      // * The 2nd element on the composed path is `<devtools-button>` (the last element is the `<button>` inside it.)
-      const hoveredNode = event.composedPath()[0];
-      const maybeDevToolsButton = event.composedPath()[2];
-
-      const popoverShownNode = hoveredNode instanceof HTMLElement && hoveredNode.getAttribute('aria-details') === 'info-tooltip' ? hoveredNode
-        : maybeDevToolsButton instanceof HTMLElement && maybeDevToolsButton.getAttribute('aria-details') === 'info-tooltip' ? maybeDevToolsButton
-        : null;
-      if (!popoverShownNode) {
-        return null;
-      }
-      return {
-        box: popoverShownNode.boxInWindow(),
-        show: async (popover: UI.GlassPane.GlassPane) => {
-          // clang-format off
-          render(html`
-            <style>
-              .info-tooltip-container {
-                max-width: var(--sys-size-28);
-                padding: var(--sys-size-4) var(--sys-size-5);
-
-                .tooltip-link {
-                  display: block;
-                  margin-top: var(--sys-size-4);
-                  color: var(--sys-color-primary);
-                  padding-left: 0;
-                }
-              }
-            </style>
-            <div class="info-tooltip-container">
-              ${UIStringsNotTranslate.applyToWorkspaceTooltip}
-              <button
-                class="link tooltip-link"
-                role="link"
-                jslog=${VisualLogging.link('open-ai-settings').track({
-                  click: true,
-                })}
-                @click=${this.#onLearnMoreTooltipClick}
-              >${lockedString(UIStringsNotTranslate.learnMore)}</button>
-            </div>`, popover.contentElement, {host: this});
-          // clang-forat on
-          return true;
-        },
-      };
-    }, 'patch-widget.info-tooltip');
-    this.#popoverHelper.setTimeout(0);
     // clang-format on
     this.requestUpdate();
   }
 
   #onLearnMoreTooltipClick(): void {
-    this.#viewOutput.tooltipRef?.value?.hidePopover();
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
   }
 

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

@@ -214,8 +214,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
 const SCROLL_ROUNDING_OFFSET = 1;
-const TOOLTIP_POPOVER_OFFSET = 4;
-const RELEVANT_DATA_LINK_ID = 'relevant-data-link';
+const RELEVANT_DATA_LINK_FOOTER_ID = 'relevant-data-link-footer';
+const RELEVANT_DATA_LINK_CHAT_ID = 'relevant-data-link-chat';
 
 export interface Step {
   isLoading: boolean;
@@ -313,7 +313,6 @@ export class ChatView extends HTMLElement {
   #messagesContainerElement?: Element;
   #mainElementRef?: Lit.Directives.Ref<Element> = Lit.Directives.createRef();
   #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
-  #popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
   /**
    * Indicates whether the chat scroll position should be pinned to the bottom.
    *
@@ -391,63 +390,6 @@ export class ChatView extends HTMLElement {
     this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
   }
 
-  #handleChatUiRef(el: Element|undefined): void {
-    if (!el || this.#popoverHelper) {
-      return;
-    }
-
-    // TODO: Update here when b/409965560 is fixed.
-    this.#popoverHelper = new UI.PopoverHelper.PopoverHelper((el as HTMLElement), event => {
-      const popoverShownNode =
-          event.target instanceof HTMLElement && event.target.id === RELEVANT_DATA_LINK_ID ? event.target : null;
-      if (!popoverShownNode) {
-        return null;
-      }
-
-      // We move the glass pane to be a bit lower so
-      // that it does not disappear when moving the cursor
-      // over to link.
-      const nodeBox = popoverShownNode.boxInWindow();
-      nodeBox.y = nodeBox.y + TOOLTIP_POPOVER_OFFSET;
-      return {
-        box: nodeBox,
-        show: async (popover: UI.GlassPane.GlassPane) => {
-          // clang-format off
-          Lit.render(html`
-            <style>
-              .info-tooltip-container {
-                max-width: var(--sys-size-28);
-                padding: var(--sys-size-4) var(--sys-size-5);
-
-                .tooltip-link {
-                  display: block;
-                  margin-top: var(--sys-size-4);
-                  color: var(--sys-color-primary);
-                  padding-left: 0;
-                }
-              }
-            </style>
-            <div class="info-tooltip-container">
-              ${this.#props.disclaimerText}
-              <button
-                class="link tooltip-link"
-                role="link"
-                jslog=${VisualLogging.link('open-ai-settings').track({
-                  click: true,
-                })}
-                @click=${() => {
-                  void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-                }}
-              >${i18nString(UIStrings.learnAbout)}</button>
-            </div>`, popover.contentElement, {host: this});
-          // clang-format on
-          return true;
-        },
-      };
-    });
-    this.#popoverHelper.setTimeout(0);
-  }
-
   #handleMessagesContainerResize(): void {
     if (!this.#pinScrollToBottom) {
       return;
@@ -583,9 +525,11 @@ export class ChatView extends HTMLElement {
       // clang-format off
       const footerContents = this.#props.conversationType
         ? renderRelevantDataDisclaimer({
-            isLoading: this.#props.isLoading,
-            blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-          })
+          isLoading: this.#props.isLoading,
+          blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+          tooltipId: RELEVANT_DATA_LINK_FOOTER_ID,
+          disclaimerText: this.#props.disclaimerText,
+        })
         : html`<p>
             ${lockedString(UIStringsNotTranslate.inputDisclaimerForEmptyState)}
             <button
@@ -611,7 +555,7 @@ export class ChatView extends HTMLElement {
     // clang-format off
     Lit.render(html`
       <style>${chatViewStyles}</style>
-      <div class="chat-ui" ${Lit.Directives.ref(this.#handleChatUiRef)}>
+      <div class="chat-ui">
         <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
           ${renderMainContents({
             state: this.#props.state,
@@ -643,6 +587,7 @@ export class ChatView extends HTMLElement {
                 isTextInputDisabled: this.#props.isTextInputDisabled,
                 inputPlaceholder: this.#props.inputPlaceholder,
                 state: this.#props.state,
+                disclaimerText: this.#props.disclaimerText,
                 selectedContext: this.#props.selectedContext,
                 inspectElementToggled: this.#props.inspectElementToggled,
                 multimodalInputEnabled: this.#props.multimodalInputEnabled,
@@ -1433,8 +1378,12 @@ function renderImageInput({
   // clang-format on
 }
 
-function renderRelevantDataDisclaimer(
-    {isLoading, blockedByCrossOrigin}: {isLoading: boolean, blockedByCrossOrigin: boolean}): Lit.LitTemplate {
+function renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin, tooltipId, disclaimerText}: {
+  isLoading: boolean,
+  blockedByCrossOrigin: boolean,
+  tooltipId: string,
+  disclaimerText: string,
+}): Lit.LitTemplate {
   const classes =
       Lit.Directives.classMap({'chat-input-disclaimer': true, 'hide-divider': !isLoading && blockedByCrossOrigin});
   // clang-format off
@@ -1443,7 +1392,7 @@ function renderRelevantDataDisclaimer(
       <button
         class="link"
         role="link"
-        id=${RELEVANT_DATA_LINK_ID}
+        aria-details=${tooltipId}
         jslog=${VisualLogging.link('open-ai-settings').track({
           click: true,
         })}
@@ -1451,6 +1400,7 @@ function renderRelevantDataDisclaimer(
           void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
         }}
       >${lockedString('Relevant data')}</button>&nbsp;${lockedString('is sent to Google')}
+      ${renderDisclamerTooltip(tooltipId, disclaimerText)}
     </p>
   `;
   // clang-format on
@@ -1470,6 +1420,7 @@ function renderChatInput({
   isTextInputEmpty,
   uploadImageInputEnabled,
   aidaAvailability,
+  disclaimerText,
   onContextClick,
   onInspectElementClick,
   onSubmit,
@@ -1490,6 +1441,7 @@ function renderChatInput({
   inspectElementToggled: boolean,
   isTextInputEmpty: boolean,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
+  disclaimerText: string,
   onContextClick: () => void,
   onInspectElementClick: () => void,
   onSubmit: (ev: SubmitEvent) => void,
@@ -1547,7 +1499,7 @@ function renderChatInput({
         </div>
         <div class="chat-input-actions-right">
           <div class="chat-input-disclaimer-container">
-            ${renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin})}
+            ${renderRelevantDataDisclaimer({ isLoading, blockedByCrossOrigin, tooltipId: RELEVANT_DATA_LINK_CHAT_ID, disclaimerText})}
           </div>
           ${renderMultimodalInputButtons({
             multimodalInputEnabled, blockedByCrossOrigin, isTextInputDisabled, imageInput, uploadImageInputEnabled, onTakeScreenshot, onImageUpload
@@ -1697,6 +1649,30 @@ function renderMainContents({
   return renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick});
 }
 
+function renderDisclamerTooltip(id: string, disclaimerText: string): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <devtools-tooltip
+      id=${id}
+      variant=${'rich'}
+    >
+      <div class="info-tooltip-container">
+        ${disclaimerText}
+        <button
+          class="link tooltip-link"
+          role="link"
+          jslog=${VisualLogging.link('open-ai-settings').track({
+            click: true,
+          })}
+          @click=${() => {
+            void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+          }}>${i18nString(UIStrings.learnAbout)}
+        </button>
+      </div>
+    </devtools-tooltip>`;
+  // clang-format on
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-ai-chat-view': ChatView;