chrome-devtools-frontend 1.0.1514545 → 1.0.1515796

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -591,7 +591,7 @@ export class ShortcutListItem {
     const activeElement = Platform.DOMUtilities.deepActiveElement(document);
     for (const [shortcut, shortcutInput] of this.shortcutInputs.entries()) {
       if (activeElement === shortcutInput) {
-        this.onShortcutInputKeyDown(shortcut, shortcutInput as HTMLInputElement, event as KeyboardEvent);
+        this.onShortcutInputKeyDown(shortcut, shortcutInput as HTMLInputElement, event);
       }
     }
   }

package/front_end/panels/settings/SettingsScreen.ts

@@ -208,7 +208,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
     Host.userMetrics.settingsPanelShown(tabId);
   }
 
-  private onEscapeKeyPressed(event: Event): void {
+  private onEscapeKeyPressed(event: KeyboardEvent): void {
     if (this.tabbedLocation.tabbedPane().selectedTabId === 'keybinds' && this.keybindsTab) {
       this.keybindsTab.onEscapeKeyPressed(event);
     }

package/front_end/panels/settings/components/SyncSection.ts

@@ -77,21 +77,56 @@ const UIStrings = {
    * @description Label for Sign-Up button for the Google Developer Program profiles.
    */
   signUp: 'Sign up',
+  /**
+   * @description Link text for opening the Google Developer Program profile page.
+   */
+  viewProfile: 'View profile',
+  /**
+   * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code completion.
+   */
+  tooltipDisclaimerText:
+      'When you qualify for a badge, the badge’s identifier and the type of activity you did to earn it are sent to Google',
   /**
    * @description Text for the data notice right after the settings checkbox.
    */
-  relevantDataDisclaimer: '(Relevant data is sent to Google)',
+  relevantData: 'Relevant data',
   /**
-   * @description Link text for opening the Google Developer Program profile page.
+   * @description Text for the data notice right after the settings checkbox.
+   * @example {Relevant data} PH1
    */
-  viewProfile: 'View profile',
+  dataDisclaimer: '({PH1} is sent to Google)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/components/SyncSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const lockedString = i18n.i18n.lockedString;
 
 const {html, Directives: {ref, createRef}} = Lit;
 
+let cachedTooltipElement: HTMLElement|undefined;
+
+function renderDataDisclaimer(): HTMLElement {
+  if (cachedTooltipElement) {
+    return cachedTooltipElement;
+  }
+
+  const relevantDataTooltipTemplate = html`
+    <span
+      tabIndex="0"
+      class="link"
+      aria-details="gdp-profile-tooltip"
+      aria-describedby="gdp-profile-tooltip"
+      >${i18nString(UIStrings.relevantData)}</span>
+    <devtools-tooltip id="gdp-profile-tooltip" variant=${'rich'}>
+      <div class="tooltip-content" tabindex="0">${i18nString(UIStrings.tooltipDisclaimerText)}</div>
+    </devtools-tooltip>`;
+
+  const container = document.createElement('span');
+  Lit.render(relevantDataTooltipTemplate, container);
+  cachedTooltipElement = i18n.i18n.getFormatLocalizedString(str_, UIStrings.dataDisclaimer, {
+    PH1: container,
+  });
+  return cachedTooltipElement;
+}
+
 function getGdpSubscriptionText(profile: Host.GdpClient.Profile): Platform.UIString.LocalizedString {
   if (!profile.activeSubscription ||
       profile.activeSubscription.subscriptionStatus !== Host.GdpClient.SubscriptionStatus.ENABLED) {
@@ -112,8 +147,6 @@ function getGdpSubscriptionText(profile: Host.GdpClient.Profile): Platform.UIStr
   }
 }
 
-const GDP_LOGO_IMAGE_URL = new URL('../../../Images/gdp-logo-standalone.svg', import.meta.url).toString();
-
 export interface SyncSectionData {
   syncInfo: Host.InspectorFrontendHostAPI.SyncInformation;
   syncSetting: Common.Settings.Setting<boolean>;
@@ -127,14 +160,19 @@ export class SyncSection extends HTMLElement {
   #syncSetting?: Common.Settings.Setting<boolean>;
   #receiveBadgesSetting?: Common.Settings.Setting<boolean>;
   #receiveBadgesSettingContainerRef = createRef<HTMLElement>();
+  #isEligibleToCreateGdpProfile = false;
   #gdpProfile?: Host.GdpClient.Profile;
 
   set data(data: SyncSectionData) {
     this.#syncInfo = data.syncInfo;
     this.#syncSetting = data.syncSetting;
     this.#receiveBadgesSetting = data.receiveBadgesSetting;
-    void this.#updateGdpProfile();
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+
+    // Trigger fetching GDP profile if the user is signed in.
+    if (data.syncInfo.accountEmail) {
+      void this.#fetchGdpDetails();
+    }
   }
 
   async highlightReceiveBadgesSetting(): Promise<void> {
@@ -164,15 +202,21 @@ export class SyncSection extends HTMLElement {
         ${renderGdpSectionIfNeeded({
           receiveBadgesSetting: this.#receiveBadgesSetting,
           receiveBadgesSettingContainerRef: this.#receiveBadgesSettingContainerRef,
-          gdpProfile: this.#gdpProfile
+          gdpProfile: this.#gdpProfile,
+          isEligibleToCreateProfile: this.#isEligibleToCreateGdpProfile,
         })}
       </fieldset>
     `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  async #updateGdpProfile(): Promise<void> {
+  async #fetchGdpDetails(): Promise<void> {
+    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+      return;
+    }
+
     this.#gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile() ?? undefined;
+    this.#isEligibleToCreateGdpProfile = await Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile();
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 }
@@ -237,7 +281,7 @@ function renderAccountInfo(syncInfo: Host.InspectorFrontendHostAPI.SyncInformati
   // clang-format off
   return html`
     <div class="account-info">
-      <img src="data:image/png;base64, ${syncInfo.accountImage}" alt="Account avatar" />
+      <img class="account-avatar" src="data:image/png;base64, ${syncInfo.accountImage}" alt="Account avatar" />
       <div class="account-email">
         <span>${i18nString(UIStrings.signedIn)}</span>
         <span>${syncInfo.accountEmail}</span>
@@ -250,21 +294,22 @@ function renderGdpSectionIfNeeded({
   receiveBadgesSetting,
   receiveBadgesSettingContainerRef,
   gdpProfile,
+  isEligibleToCreateProfile,
 }: {
   receiveBadgesSettingContainerRef: Lit.Directives.Ref<HTMLElement>,
   receiveBadgesSetting?: Common.Settings.Setting<boolean>,
   gdpProfile?: Host.GdpClient.Profile,
+  isEligibleToCreateProfile?: boolean,
 }): Lit.LitTemplate {
   // clang-format off
-  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || (!gdpProfile && !isEligibleToCreateProfile)) {
     return Lit.nothing;
   }
 
   function renderBrand(): Lit.LitTemplate {
     return html`
       <div class="gdp-profile-header">
-        <img src=${GDP_LOGO_IMAGE_URL} class="gdp-logo" alt="Google Developer Program">
-        ${lockedString('Google Developer Program')}
+        <div class="gdp-logo" role="img" tabindex="0" aria-label="Google Developer Program"></div>
       </div>
     `;
   }
@@ -293,7 +338,7 @@ function renderGdpSectionIfNeeded({
                     Badges.UserBadges.instance().recordAction(Badges.BadgeAction.RECEIVE_BADGES_SETTING_ENABLED);
                   });
                 }}></setting-checkbox>
-                <span>${i18nString(UIStrings.relevantDataDisclaimer)}</span>
+                ${renderDataDisclaimer()}
               </div>` : Lit.nothing}
         </div>
       ` : html`

package/front_end/panels/settings/components/syncSection.css

@@ -24,7 +24,7 @@ fieldset {
   outline-offset: 2px;
 }
 
-img {
+.account-avatar {
   border: 0;
   border-radius: var(--sys-shape-corner-full);
   display: block;
@@ -76,9 +76,16 @@ img {
     font-size: var(--sys-typescale-body3-size);
     height: var(--sys-size-11);
 
-    .gdp-logo {
-      width: 34px;
-      height: fit-content;
+    & .gdp-logo {
+      background-image: var(--image-file-gdp-logo-light);
+      background-size: contain;
+      width: 203px;
+      height: 18px;
+      background-repeat: no-repeat;
+    }
+
+    :host-context(.theme-with-dark-background) & .gdp-logo {
+      background-image: var(--image-file-gdp-logo-dark);
     }
   }
 
@@ -107,5 +114,11 @@ img {
       align-items: center;
       gap: var(--sys-size-2);
     }
+
+    & .tooltip-content {
+      max-width: 278px;
+      padding: var(--sys-size-2) var(--sys-size-3);
+      font: var(--sys-typescale-body5-regular);
+    }
   }
 }

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -40,7 +40,7 @@ export class AiCodeCompletionPlugin extends Plugin {
   #aiCodeCompletionCitationsToolbarContainer = document.createElement('div');
   #aiCodeCompletionCitationsToolbarAttached = false;
 
-  #boundEditorKeyDown: (event: Event) => Promise<void>;
+  #boundEditorKeyDown: (event: KeyboardEvent) => Promise<void>;
   #boundOnAiCodeCompletionSettingChanged: () => void;
 
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
@@ -87,10 +87,7 @@ export class AiCodeCompletionPlugin extends Plugin {
   override editorExtension(): CodeMirror.Extension {
     return [
       CodeMirror.EditorView.updateListener.of(update => this.#editorUpdate(update)), this.#teaserCompartment.of([]),
-      // conservativeCompletion is required so that the completion suggestions in the traditional
-      // autocomplete menu are only activated after the first keyDown/keyUp events.
-      TextEditor.Config.conservativeCompletion, TextEditor.Config.aiAutoCompleteSuggestion,
-      CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap()))
+      TextEditor.Config.aiAutoCompleteSuggestion, CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap()))
     ];
   }
 
@@ -167,11 +164,11 @@ export class AiCodeCompletionPlugin extends Plugin {
     ];
   }
 
-  async #editorKeyDown(event: Event): Promise<void> {
+  async #editorKeyDown(event: KeyboardEvent): Promise<void> {
     if (!this.#teaser?.isShowing()) {
       return;
     }
-    const keyboardEvent = (event as KeyboardEvent);
+    const keyboardEvent = event;
     if (UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent)) {
       if (keyboardEvent.key === 'i') {
         keyboardEvent.consume(true);

package/front_end/panels/sources/SourcesView.ts

@@ -575,6 +575,10 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     return true;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return true;
+  }
+
   supportsRegexSearch(): boolean {
     return true;
   }

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -536,9 +536,9 @@ export class WatchExpression extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     });
   }
 
-  private onSectionClick(event: Event): void {
+  private onSectionClick(event: MouseEvent): void {
     event.consume(true);
-    const mouseEvent = (event as MouseEvent);
+    const mouseEvent = event;
     if (mouseEvent.detail === 1) {
       this.preventClickTimeout = window.setTimeout(handleClick.bind(this), 333);
     } else if (this.preventClickTimeout !== undefined) {

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -81,6 +81,10 @@ export function entryIsVisibleInTimeline(
   return (eventStyle && !eventStyle.hidden) || eventIsTiming;
 }
 
+// These threads have no useful information. Omit them from the UI.
+const HIDDEN_THREAD_NAMES: ReadonlySet<string> =
+    new Set(['Chrome_ChildIOThread', 'Compositor', 'GpuMemoryThread', 'PerfettoTrace']);
+
 /**
  * Track appenders add the data of each track into the timeline flame
  * chart. Each track appender also implements functions tha allow the
@@ -330,8 +334,7 @@ export class CompatibilityTracksAppender {
             this, this.#parsedTrace, pid, tid, name, Trace.Handlers.Threads.ThreadType.OTHER, entries, tree));
         continue;
       }
-      // These threads have no useful information. Omit them
-      if ((name === 'Chrome_ChildIOThread' || name === 'Compositor' || name === 'GpuMemoryThread') && !showAllEvents) {
+      if ((name && HIDDEN_THREAD_NAMES.has(name)) && !showAllEvents) {
         continue;
       }
 
@@ -604,7 +607,7 @@ export class CompatibilityTracksAppender {
 
     // Historically all tracks would have a titleForEvent() method. However a
     // lot of these were duplicated so we worked on removing them in favour of
-    // the EntryName.nameForEntry method called below (see crbug.com/365047728).
+    // the Name.forEntry method called below (see crbug.com/365047728).
     // However, sometimes an appender needs to customise the titles slightly;
     // for example the LayoutShiftsTrackAppender does not show any titles as we
     // use diamonds to represent layout shifts.

package/front_end/panels/timeline/CountersGraph.ts

@@ -196,7 +196,7 @@ export class CountersGraph extends UI.Widget.VBox {
     return counter;
   }
 
-  resizerElement(): Element|null {
+  resizerElement(): Element {
     return this.header.element;
   }
 
@@ -228,8 +228,8 @@ export class CountersGraph extends UI.Widget.VBox {
     }
   }
 
-  private onClick(event: Event): void {
-    const x = (event as MouseEvent).x - this.canvasContainer.getBoundingClientRect().left;
+  private onClick(event: MouseEvent): void {
+    const x = event.x - this.canvasContainer.getBoundingClientRect().left;
     let minDistance = Infinity;
     let bestTime;
     for (const counterUI of this.counterUI) {
@@ -259,8 +259,8 @@ export class CountersGraph extends UI.Widget.VBox {
     }
   }
 
-  private onMouseMove(event: Event): void {
-    const x = (event as MouseEvent).x - this.canvasContainer.getBoundingClientRect().left;
+  private onMouseMove(event: MouseEvent): void {
+    const x = event.x - this.canvasContainer.getBoundingClientRect().left;
     this.markerXPosition = x;
     this.refreshCurrentValues();
   }

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -9,6 +9,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
+import * as Tracing from '../../services/tracing/tracing.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
@@ -38,7 +39,6 @@ import {
 } from './TimelineTreeView.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
 import {TracingFrameLayerTree} from './TracingLayerTree.js';
-import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -679,7 +679,7 @@ async function renderSelectedEventDetails(
     return nothing;
   }
   const traceRecordingIsFresh =
-      parsedTrace ? Utils.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace) : false;
+      parsedTrace ? Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace) : false;
 
   if (Trace.Types.Events.isSyntheticLayoutShift(selectedEvent) ||
       Trace.Types.Events.isSyntheticLayoutShiftCluster(selectedEvent)) {

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -6,6 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -247,12 +248,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
     const contextMenu = new UI.ContextMenu.ContextMenu(mouseEvent);
     if (perfAIEntryPointEnabled && this.parsedTrace) {
-      const aiCallTree = Utils.AICallTree.AICallTree.fromEvent(entry, this.parsedTrace);
+      const aiCallTree = AIAssistance.AICallTree.fromEvent(entry, this.parsedTrace);
       if (aiCallTree) {
         const action = UI.ActionRegistry.ActionRegistry.instance().getAction(PERF_AI_ACTION_ID);
         // The other side of setFlavor is handleTraceEntryNodeFlavorChange() in FreestylerPanel
-        const context = Utils.AIContext.AgentFocus.fromCallTree(aiCallTree);
-        UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, context);
+        const context = AIAssistance.AgentFocus.fromCallTree(aiCallTree);
+        UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, context);
 
         if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
           function appendSubmenuPromptAction(

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -7,6 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
@@ -374,7 +375,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.chartSplitWidget.setMainWidget(flameChartsContainer);
     this.chartSplitWidget.setSidebarWidget(this.countersView);
     this.chartSplitWidget.hideDefaultResizer();
-    this.chartSplitWidget.installResizer((this.countersView.resizerElement() as Element));
+    this.chartSplitWidget.installResizer(this.countersView.resizerElement());
 
     // Create top level properties splitter.
     this.detailsSplitWidget = new UI.SplitWidget.SplitWidget(false, true, 'timeline-panel-details-split-view-state');
@@ -1518,10 +1519,10 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
         if (!this.#parsedTrace) {
           return;
         }
-        const aiCallTree = Utils.AICallTree.AICallTree.fromEvent(selection.event, this.#parsedTrace);
+        const aiCallTree = AIAssistance.AICallTree.fromEvent(selection.event, this.#parsedTrace);
         if (aiCallTree) {
-          const context = Utils.AIContext.AgentFocus.fromCallTree(aiCallTree);
-          UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, context);
+          const context = AIAssistance.AgentFocus.fromCallTree(aiCallTree);
+          UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, context);
         }
       });
     }
@@ -1762,6 +1763,10 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     return true;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return true;
+  }
+
   supportsRegexSearch(): boolean {
     return true;
   }

package/front_end/panels/timeline/TimelineHistoryManager.ts

@@ -539,8 +539,8 @@ export class DropDown implements UI.ListControl.ListDelegate<number> {
     this.close(this.listControl.selectedItem());
   }
 
-  private onKeyDown(event: Event): void {
-    switch ((event as KeyboardEvent).key) {
+  private onKeyDown(event: KeyboardEvent): void {
+    switch (event.key) {
       case 'Tab':
       case 'Escape':
         this.close(null);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -50,6 +50,7 @@ import * as Trace from '../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
+import * as Tracing from '../../services/tracing/tracing.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
@@ -934,7 +935,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   getOrCreateExternalAIConversationData(): AiAssistanceModel.ExternalPerformanceAIConversationData {
     if (!this.#externalAIConversationData) {
       const conversationHandler = AiAssistanceModel.ConversationHandler.instance();
-      const focus = Utils.AIContext.getPerformanceAgentFocusFromModel(this.model);
+      const focus = AiAssistanceModel.getPerformanceAgentFocusFromModel(this.model);
       if (!focus) {
         throw new Error('could not create performance agent focus');
       }
@@ -2043,7 +2044,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.flameChart.getNetworkDataProvider().reset();
     this.flameChart.reset();
     this.#changeView({mode: 'LANDING_PAGE'});
-    UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, null);
+    UI.Context.Context.instance().setFlavor(AiAssistanceModel.AgentFocus, null);
   }
 
   #hasActiveTrace(): boolean {
@@ -2535,7 +2536,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
 
       if (recordingIsFresh) {
-        Utils.FreshRecording.Tracker.instance().registerFreshRecording(parsedTrace);
+        Tracing.FreshRecording.Tracker.instance().registerFreshRecording(parsedTrace);
       }
 
       // We store the index of the active trace so we can load it back easily

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -9,6 +9,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
+import * as Tracing from '../../services/tracing/tracing.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -24,7 +25,6 @@ import {TimelineRegExp} from './TimelineFilters.js';
 import {rangeForSelection, type TimelineSelection} from './TimelineSelection.js';
 import timelineTreeViewStyles from './timelineTreeView.css.js';
 import {TimelineUIUtils} from './TimelineUIUtils.js';
-import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -702,6 +702,10 @@ export class TimelineTreeView extends
     return true;
   }
 
+  supportsWholeWordSearch(): boolean {
+    return true;
+  }
+
   supportsRegexSearch(): boolean {
     return true;
   }
@@ -795,7 +799,7 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
       const target = parsedTrace ? targetForEvent(parsedTrace, event) : null;
       const linkifier = this.treeView.linkifier;
       const isFreshRecording =
-          Boolean(parsedTrace && Utils.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace));
+          Boolean(parsedTrace && Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace));
       this.linkElement = TimelineUIUtils.linkifyTopCallFrame(event, target, linkifier, isFreshRecording);
       if (this.linkElement) {
         container.createChild('div', 'activity-link').appendChild(this.linkElement);

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -44,6 +44,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
+import * as Tracing from '../../services/tracing/tracing.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 // eslint-disable-next-line rulesdir/es-modules-import
 import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
@@ -1072,7 +1073,7 @@ export class TimelineUIUtils {
     }
 
     const isFreshRecording =
-        Boolean(parsedTrace && Utils.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace));
+        Boolean(parsedTrace && Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace));
 
     switch (event.name) {
       case Trace.Types.Events.Name.GC:

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -5,13 +5,13 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as AIAssistance from '../../../models/ai_assistance/ai_assistance.js';
 import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as Utils from '../utils/utils.js';
 
 import type {BaseInsightComponent} from './insights/BaseInsightComponent.js';
 import {md, shouldRenderForCategory} from './insights/Helpers.js';
@@ -434,7 +434,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
         return html``;
       }
 
-      const agentFocus = Utils.AIContext.AgentFocus.fromInsight(this.#data.parsedTrace, model);
+      const agentFocus = AIAssistance.AgentFocus.fromInsight(this.#data.parsedTrace, model);
       // clang-format off
       return html`<div>
         <${componentClass.litTagName}

package/front_end/panels/timeline/components/insights/BaseInsightComponent.ts

@@ -7,6 +7,7 @@ import '../../../../ui/components/markdown_view/markdown_view.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Root from '../../../../core/root/root.js';
+import * as AIAssistance from '../../../../models/ai_assistance/ai_assistance.js';
 import type {InsightModel} from '../../../../models/trace/insights/types.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
@@ -15,7 +16,6 @@ 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 type * as Overlays from '../../overlays/overlays.js';
-import * as Utils from '../../utils/utils.js';
 
 import baseInsightComponentStyles from './baseInsightComponent.css.js';
 import {md} from './Helpers.js';
@@ -86,7 +86,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
 
   #selected = false;
   #model: T|null = null;
-  #agentFocus: Utils.AIContext.AgentFocus|null = null;
+  #agentFocus: AIAssistance.AgentFocus|null = null;
   #fieldMetrics: Trace.Insights.Common.CrUXFieldMetricResults|null = null;
 
   get model(): T|null {
@@ -158,7 +158,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
   }
 
-  set agentFocus(agentFocus: Utils.AIContext.AgentFocus) {
+  set agentFocus(agentFocus: AIAssistance.AgentFocus) {
     this.#agentFocus = agentFocus;
   }
 
@@ -179,9 +179,9 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
       this.dispatchEvent(new SidebarInsight.InsightDeactivated());
 
       // Clear agent (but only if currently focused on an insight).
-      const focus = UI.Context.Context.instance().flavor(Utils.AIContext.AgentFocus);
+      const focus = UI.Context.Context.instance().flavor(AIAssistance.AgentFocus);
       if (focus && focus.data.type === 'insight') {
-        UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, null);
+        UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, null);
       }
       return;
     }
@@ -359,7 +359,7 @@ export abstract class BaseInsightComponent<T extends InsightModel> extends HTMLE
       return;
     }
 
-    UI.Context.Context.instance().setFlavor(Utils.AIContext.AgentFocus, this.#agentFocus);
+    UI.Context.Context.instance().setFlavor(AIAssistance.AgentFocus, this.#agentFocus);
 
     // Trigger the AI Assistance panel to open.
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction(actionId);

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -6,10 +6,10 @@
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as AIAssistance from '../../../models/ai_assistance/ai_assistance.js';
 import * as Trace from '../../../models/trace/trace.js';
 import type * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as Utils from '../utils/utils.js';
 
 import * as Components from './components/components.js';
 
@@ -1476,7 +1476,7 @@ export class Overlays extends EventTarget {
         const component = new Components.EntryLabelOverlay.EntryLabelOverlay(overlay.label, shouldDrawLabelBelowEntry);
         // Generate the AI Call Tree for the AI Auto-Annotation feature.
         const parsedTrace = this.#queries.parsedTrace();
-        const callTree = parsedTrace ? Utils.AICallTree.AICallTree.fromEvent(overlay.entry, parsedTrace) : null;
+        const callTree = parsedTrace ? AIAssistance.AICallTree.fromEvent(overlay.entry, parsedTrace) : null;
         component.callTree = callTree;
 
         component.addEventListener(