chrome-devtools-frontend 1.0.1515988 → 1.0.1518653

package/front_end/panels/search/SearchView.ts

@@ -106,15 +106,16 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {ref} = Directives;
+const {ref, live} = Directives;
+const {widgetConfig} = UI.Widget;
 
 interface SearchViewInput {
   query: string;
-  focusSearchInput: boolean;
   matchCase: boolean;
   isRegex: boolean;
   searchMessage: string;
   searchResultsMessage: string;
+  searchResultsPane: SearchResultsPane|null;
   progress: Common.Progress.Progress|null;
   onQueryChange: (query: string) => void;
   onQueryKeyDown: (evt: KeyboardEvent) => void;
@@ -127,7 +128,7 @@ interface SearchViewInput {
 }
 
 interface SearchViewOutput {
-  searchResultsElement?: HTMLElement;
+  focusSearchInput: () => void;
 }
 
 type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
@@ -135,10 +136,10 @@ type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLEleme
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const {
     query,
-    focusSearchInput,
     matchCase,
     isRegex,
     searchMessage,
+    searchResultsPane,
     searchResultsMessage,
     progress,
     onQueryChange,
@@ -150,6 +151,18 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     onRefresh,
     onClearSearch,
   } = input;
+  let header = '', text = '';
+  if (!query) {
+    header = i18nString(UIStrings.noSearchResult);
+    text = i18nString(
+        UIStrings.typeAndPressSToSearch,
+        {PH1: UI.KeyboardShortcut.KeyboardShortcut.shortcutToString(UI.KeyboardShortcut.Keys.Enter)});
+  } else if (progress) {
+    header = i18nString(UIStrings.searching);
+  } else if (!searchResultsPane) {
+    header = i18nString(UIStrings.noMatchesFound);
+    text = i18nString(UIStrings.nothingMatchedTheQuery);
+  }
   // clang-format off
   render(html`
       <style>${searchViewStyles}</style>
@@ -164,14 +177,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                     change: true, keydown: 'ArrowUp|ArrowDown|Enter'})}
                 aria-label=${i18nString(UIStrings.find)}
                 size="100" results="0"
-                .value=${query}
+                .value=${live(query)}
                 @keydown=${onQueryKeyDown}
                 @input=${(e: Event) => onQueryChange((e.target as HTMLInputElement).value)}
                 ${ref(e => {
-                  if (e instanceof HTMLInputElement && focusSearchInput) {
-                    e.focus();
-                    e.select();
-                  }
+                  output.focusSearchInput = () => {
+                    if (e instanceof HTMLInputElement) {
+                      e.focus();
+                      e.select();
+                    }
+                  };
                 })}>
             <devtools-button class="clear-button" tabindex="-1"
                 @click=${onClearSearchInput}
@@ -224,8 +239,13 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               } as Buttons.Button.ButtonData}></devtools-button>
         </devtools-toolbar>
       </div>
-      <div class="search-results" @keydown=${onPanelKeyDown}
-           ${ref(e => {output.searchResultsElement = e as HTMLElement;})}>
+      <div class="search-results" @keydown=${onPanelKeyDown}>
+        ${searchResultsPane
+           ? html`<devtools-widget .widgetConfig=${widgetConfig(UI.Widget.VBox)}>
+              ${searchResultsPane.element}
+            </devtools-widget>`
+           : html`<devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {header, text})}>
+                  </devtools-widget>`}
       </div>
       <div class="search-toolbar-summary" @keydown=${onPanelKeyDown}>
         <div class="search-message">${searchMessage}</div>
@@ -242,20 +262,17 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
 export class SearchView extends UI.Widget.VBox {
   readonly #view: View;
-  #focusSearchInput: boolean;
+  #focusSearchInput = (): void => {};
   #isIndexing: boolean;
   #searchId: number;
   #searchMatchesCount: number;
   #searchResultsCount: number;
   #nonEmptySearchResultsCount: number;
   #searchingView: UI.Widget.Widget|null;
-  #notFoundView: UI.Widget.Widget|null;
   #searchConfig: Workspace.SearchConfig.SearchConfig|null;
   #pendingSearchConfig: Workspace.SearchConfig.SearchConfig|null;
   #searchResultsPane: SearchResultsPane|null;
   #progress: Common.Progress.Progress|null;
-  #visiblePane: UI.Widget.Widget|null;
-  #searchResultsElement!: HTMLElement;
   #query: string;
   #matchCase = false;
   #isRegex = false;
@@ -272,7 +289,6 @@ export class SearchView extends UI.Widget.VBox {
   // result added.
   #throttler: Common.Throttler.Throttler;
   #pendingSearchResults: SearchResult[] = [];
-  #emptyStartView: UI.EmptyWidget.EmptyWidget;
 
   constructor(settingKey: string, throttler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
     super({
@@ -282,7 +298,6 @@ export class SearchView extends UI.Widget.VBox {
     this.#view = view;
     this.setMinimumSize(0, 40);
 
-    this.#focusSearchInput = false;
     this.#isIndexing = false;
     this.#searchId = 1;
     this.#query = '';
@@ -290,12 +305,10 @@ export class SearchView extends UI.Widget.VBox {
     this.#searchResultsCount = 0;
     this.#nonEmptySearchResultsCount = 0;
     this.#searchingView = null;
-    this.#notFoundView = null;
     this.#searchConfig = null;
     this.#pendingSearchConfig = null;
     this.#searchResultsPane = null;
     this.#progress = null;
-    this.#visiblePane = null;
     this.#throttler = throttler;
 
     this.#advancedSearchConfig = Common.Settings.Settings.instance().createLocalSetting(
@@ -305,21 +318,15 @@ export class SearchView extends UI.Widget.VBox {
     this.#load();
     this.performUpdate();
     this.#searchScope = null;
-
-    this.#emptyStartView = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noSearchResult), i18nString(UIStrings.typeAndPressSToSearch, {
-          PH1: UI.KeyboardShortcut.KeyboardShortcut.shortcutToString(UI.KeyboardShortcut.Keys.Enter)
-        }));
-    this.#showPane(this.#emptyStartView);
   }
 
   override performUpdate(): void {
     const input: SearchViewInput = {
       query: this.#query,
-      focusSearchInput: this.#focusSearchInput,
       matchCase: this.#matchCase,
       isRegex: this.#isRegex,
       searchMessage: this.#searchMessage,
+      searchResultsPane: this.#searchResultsPane,
       searchResultsMessage: this.#searchResultsMessage,
       progress: this.#progress,
       onQueryChange: (query: string) => {
@@ -333,12 +340,13 @@ export class SearchView extends UI.Widget.VBox {
       onRefresh: this.#onRefresh.bind(this),
       onClearSearch: this.#onClearSearch.bind(this),
     };
-    const output: SearchViewOutput = {};
+    const that = this;
+    const output: SearchViewOutput = {
+      set focusSearchInput(value: () => void) {
+        that.#focusSearchInput = value;
+      }
+    };
     this.#view(input, output, this.contentElement);
-    this.#focusSearchInput = false;
-    if (output.searchResultsElement) {
-      this.#searchResultsElement = output.searchResultsElement;
-    }
   }
 
   #onToggleRegex(): void {
@@ -358,7 +366,9 @@ export class SearchView extends UI.Widget.VBox {
   toggle(queryCandidate: string, searchImmediately?: boolean): void {
     this.#query = queryCandidate;
     this.requestUpdate();
-    this.focus();
+    void this.updateComplete.then(() => {
+      this.focus();
+    });
 
     this.#initScope();
     if (searchImmediately) {
@@ -416,7 +426,6 @@ export class SearchView extends UI.Widget.VBox {
     this.requestUpdate();
     this.#save();
     this.focus();
-    this.#showPane(this.#emptyStartView);
   }
 
   #onSearchResult(searchId: number, searchResult: SearchResult): void {
@@ -429,7 +438,6 @@ export class SearchView extends UI.Widget.VBox {
     }
     if (!this.#searchResultsPane) {
       this.#searchResultsPane = this.createSearchResultsPane();
-      this.#showPane(this.#searchResultsPane);
     }
     this.#pendingSearchResults.push(searchResult);
     void this.#throttler.schedule(async () => this.#addPendingSearchResults());
@@ -453,9 +461,6 @@ export class SearchView extends UI.Widget.VBox {
     if (searchId !== this.#searchId || !this.#progress) {
       return;
     }
-    if (!this.#searchResultsPane) {
-      this.#nothingFound();
-    }
     this.#progress = null;
     this.#searchFinished(finished);
     this.#searchConfig = null;
@@ -479,7 +484,6 @@ export class SearchView extends UI.Widget.VBox {
 
   #resetSearch(): void {
     this.#stopSearch();
-    this.#showPane(null);
     this.#searchResultsPane = null;
     this.#searchMessage = '';
     this.#searchResultsMessage = '';
@@ -503,7 +507,6 @@ export class SearchView extends UI.Widget.VBox {
     if (!this.#searchingView) {
       this.#searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), '');
     }
-    this.#showPane(this.#searchingView);
     this.#searchMessage = i18nString(UIStrings.searching);
     this.performUpdate();
     this.#updateSearchResultsMessage();
@@ -526,24 +529,6 @@ export class SearchView extends UI.Widget.VBox {
     this.performUpdate();
   }
 
-  #showPane(panel: UI.Widget.Widget|null): void {
-    if (this.#visiblePane) {
-      this.#visiblePane.detach();
-    }
-    if (panel) {
-      panel.show(this.#searchResultsElement);
-    }
-    this.#visiblePane = panel;
-  }
-
-  #nothingFound(): void {
-    if (!this.#notFoundView) {
-      this.#notFoundView = new UI.EmptyWidget.EmptyWidget(
-          i18nString(UIStrings.noMatchesFound), i18nString(UIStrings.nothingMatchedTheQuery));
-    }
-    this.#showPane(this.#notFoundView);
-  }
-
   #addSearchResult(searchResult: SearchResult): void {
     const matchesCount = searchResult.matchesCount();
     this.#searchMatchesCount += matchesCount;
@@ -560,8 +545,7 @@ export class SearchView extends UI.Widget.VBox {
   }
 
   override focus(): void {
-    this.#focusSearchInput = true;
-    this.requestUpdate();
+    this.#focusSearchInput();
   }
 
   override willHide(): void {

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

@@ -17,6 +17,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as SettingsComponents from '../../../ui/components/settings/settings.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as PanelCommon from '../../common/common.js';
 import * as PanelUtils from '../../utils/utils.js';
 
@@ -212,7 +213,7 @@ export class SyncSection extends HTMLElement {
   }
 
   async #fetchGdpDetails(): Promise<void> {
-    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled) {
+    if (!Host.GdpClient.isGdpProfilesAvailable()) {
       return;
     }
 
@@ -304,21 +305,25 @@ function renderGdpSectionIfNeeded({
   gdpProfile?: Host.GdpClient.Profile,
   isEligibleToCreateProfile?: boolean,
 }): Lit.LitTemplate {
-  // clang-format off
-  if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || (!gdpProfile && !isEligibleToCreateProfile)) {
+  if (!Host.GdpClient.isGdpProfilesAvailable() || (!gdpProfile && !isEligibleToCreateProfile)) {
     return Lit.nothing;
   }
+  const hasReceiveBadgesCheckbox = receiveBadgesSetting &&
+      Host.GdpClient.getGdpProfilesEnterprisePolicy() === Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED;
 
   function renderBrand(): Lit.LitTemplate {
+    // clang-format off
     return html`
       <div class="gdp-profile-header">
         <div class="gdp-logo" role="img" tabindex="0" aria-label="Google Developer Program"></div>
       </div>
     `;
+    // clang-format on
   }
 
+  // clang-format off
   return html`
-    <div class="gdp-profile-container">
+    <div class="gdp-profile-container" jslog=${VisualLogging.section().context('gdp-profile')}>
       <div class="divider"></div>
       ${gdpProfile ? html`
         <div class="gdp-profile-details-content">
@@ -326,10 +331,13 @@ function renderGdpSectionIfNeeded({
           <div class="plan-details">
             ${getGdpSubscriptionText(gdpProfile)}
             &nbsp;·&nbsp;
-            <x-link class="link" href=${Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
+            <x-link
+              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('view-profile')}
+              class="link"
+              href=${Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK}>
               ${i18nString(UIStrings.viewProfile)}
             </x-link></div>
-            ${receiveBadgesSetting ? html`
+            ${hasReceiveBadgesCheckbox ? html`
               <div class="setting-container"  ${ref(receiveBadgesSettingContainerRef)}>
                 <setting-checkbox class="setting-checkbox" .data=${{setting: receiveBadgesSetting}} @change=${(e: Event) => {
                   const settingCheckbox = e.target as SettingsComponents.SettingCheckbox.SettingCheckbox;
@@ -351,7 +359,7 @@ function renderGdpSectionIfNeeded({
             @click=${() => PanelCommon.GdpSignUpDialog.show({
               onSuccess: onSignUpSuccess
             })}
-            .jslogContext=${'gdp.sign-up-dialog-open'}
+            .jslogContext=${'open-sign-up-dialog'}
             .variant=${Buttons.Button.Variant.OUTLINED}>
               ${i18nString(UIStrings.signUp)}
           </devtools-button>
@@ -359,8 +367,8 @@ function renderGdpSectionIfNeeded({
       `}
     </div>
   `;
+  // clang-format on
 }
-// clang-format on
 
 customElements.define('devtools-sync-section', SyncSection);
 

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -18,6 +18,7 @@ import {Plugin} from './Plugin.js';
 
 const AI_CODE_COMPLETION_CHARACTER_LIMIT = 20_000;
 const DISCLAIMER_TOOLTIP_ID = 'sources-ai-code-completion-disclaimer-tooltip';
+const SPINNER_TOOLTIP_ID = 'sources-ai-code-completion-spinner-tooltip';
 const CITATIONS_TOOLTIP_ID = 'sources-ai-code-completion-citations-tooltip';
 
 export class AiCodeCompletionPlugin extends Plugin {
@@ -212,8 +213,11 @@ export class AiCodeCompletionPlugin extends Plugin {
       this.#teaser = undefined;
     }
     if (!this.#aiCodeCompletion) {
+      const contextFlavor = this.uiSourceCode.url().startsWith('snippet://') ?
+          AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE :
+          AiCodeCompletion.AiCodeCompletion.ContextFlavor.SOURCES;
       this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-          {aidaClient: this.#aidaClient}, this.#editor, AiCodeCompletion.AiCodeCompletion.Panel.SOURCES);
+          {aidaClient: this.#aidaClient}, this.#editor, contextFlavor);
       this.#aiCodeCompletion.addEventListener(
           AiCodeCompletion.AiCodeCompletion.Events.REQUEST_TRIGGERED, this.#onAiRequestTriggered, this);
       this.#aiCodeCompletion.addEventListener(
@@ -229,6 +233,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
     this.#aiCodeCompletionDisclaimer = new PanelCommon.AiCodeCompletionDisclaimer();
     this.#aiCodeCompletionDisclaimer.disclaimerTooltipId = DISCLAIMER_TOOLTIP_ID;
+    this.#aiCodeCompletionDisclaimer.spinnerTooltipId = SPINNER_TOOLTIP_ID;
     this.#aiCodeCompletionDisclaimer.show(this.#aiCodeCompletionDisclaimerContainer, undefined, true);
   }
 

package/front_end/panels/sources/OutlineQuickOpen.ts

@@ -44,7 +44,9 @@ export function outline(state: CodeMirror.EditorState): OutlineItem[] {
 
   function subtitleFromParamList(): string {
     while (cursor.name !== 'ParamList') {
-      cursor.nextSibling();
+      if (!cursor.nextSibling()) {
+        break;
+      }
     }
     let parameters = '';
     if (cursor.name === 'ParamList' && cursor.firstChild()) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -38,6 +38,7 @@ import * as Platform from '../../core/platform/platform.js';
 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 Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
 import * as Extensions from '../../models/extensions/extensions.js';
@@ -484,6 +485,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
     } else if (!this.#paused) {
       UI.Context.Context.instance().setFlavor(SDK.Target.Target, debuggerModel.target());
     }
+
+    Badges.UserBadges.instance().recordAction(Badges.BadgeAction.DEBUGGER_PAUSED);
   }
 
   private debugInfoAttached(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {

package/front_end/panels/timeline/AppenderUtils.ts

@@ -4,7 +4,7 @@
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
-import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import type {VisualLoggingTrackName} from './CompatibilityTracksAppender.js';
@@ -36,7 +36,7 @@ export function buildGroupStyle(extra?: Partial<PerfUI.FlameChart.GroupStyle>):
   const defaultGroupStyle: PerfUI.FlameChart.GroupStyle = {
     padding: 4,
     height: 17,
-    collapsible: true,
+    collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS,
     color: ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-on-surface'),
     backgroundColor: ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-cdt-base-container'),
     nestingLevel: 0,

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader, getDurationString} from './AppenderUtils.js';
@@ -42,7 +43,8 @@ export class ExtensionTrackAppender implements TrackAppender {
     if (totalEntryCount === 0) {
       return trackStartLevel;
     }
-    this.#appendTopLevelHeaderAtLevel(trackStartLevel, expanded);
+    const compact = !this.#extensionTopLevelTrack.isTrackGroup && totalEntryCount < 2;
+    this.#appendTopLevelHeaderAtLevel(trackStartLevel, compact, expanded);
     return this.#appendExtensionTrackData(trackStartLevel);
   }
 
@@ -52,8 +54,10 @@ export class ExtensionTrackAppender implements TrackAppender {
    * header corresponds to the track name, in the latter it corresponds
    * to the track group name.
    */
-  #appendTopLevelHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
-    const style = buildGroupStyle({shareHeaderLine: false, collapsible: true});
+  #appendTopLevelHeaderAtLevel(currentLevel: number, compact: boolean, expanded?: boolean): void {
+    const style = compact ?
+        buildGroupStyle({shareHeaderLine: true, collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER}) :
+        buildGroupStyle({shareHeaderLine: false, collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS});
     const headerTitle = this.#extensionTopLevelTrack.name;
     const jsLogContext = this.#extensionTopLevelTrack.name === '🅰️ Angular' ? VisualLoggingTrackName.ANGULAR_TRACK :
                                                                              VisualLoggingTrackName.EXTENSION;
@@ -69,7 +73,12 @@ export class ExtensionTrackAppender implements TrackAppender {
    * corresponds to the track name itself, instead of the track name.
    */
   #appendSecondLevelHeader(trackStartLevel: number, headerTitle: string): void {
-    const style = buildGroupStyle({shareHeaderLine: false, padding: 2, nestingLevel: 1, collapsible: true});
+    const style = buildGroupStyle({
+      shareHeaderLine: false,
+      padding: 2,
+      nestingLevel: 1,
+      collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS
+    });
     const group = buildTrackHeader(
         VisualLoggingTrackName.EXTENSION, trackStartLevel, headerTitle, style,
         /* selectable= */ true);

package/front_end/panels/timeline/GPUTrackAppender.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
@@ -63,7 +64,7 @@ export class GPUTrackAppender implements TrackAppender {
    * @param expanded whether the track should be rendered expanded.
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
-    const style = buildGroupStyle({collapsible: false});
+    const style = buildGroupStyle({collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER});
     const group = buildTrackHeader(
         VisualLoggingTrackName.GPU, currentLevel, i18nString(UIStrings.gpu), style, /* selectable= */ true, expanded);
     this.#compatibilityBuilder.registerTrackForGroup(group, this);

package/front_end/panels/timeline/InteractionsTrackAppender.ts

@@ -69,7 +69,11 @@ export class InteractionsTrackAppender implements TrackAppender {
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
     const trackIsCollapsible = this.#parsedTrace.data.UserInteractions.interactionEvents.length > 0;
-    const style = buildGroupStyle({collapsible: trackIsCollapsible, useDecoratorsForOverview: true});
+    const style = buildGroupStyle({
+      collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS :
+                                        PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+      useDecoratorsForOverview: true,
+    });
     const group = buildTrackHeader(
         VisualLoggingTrackName.INTERACTIONS, currentLevel, i18nString(UIStrings.interactions), style,
         /* selectable= */ true, expanded);

package/front_end/panels/timeline/LayoutShiftsTrackAppender.ts

@@ -8,6 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
@@ -85,7 +86,7 @@ export class LayoutShiftsTrackAppender implements TrackAppender {
    * appended.
    */
   #appendTrackHeaderAtLevel(currentLevel: number, expanded?: boolean): void {
-    const style = buildGroupStyle({collapsible: false});
+    const style = buildGroupStyle({collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER});
     const group = buildTrackHeader(
         VisualLoggingTrackName.LAYOUT_SHIFTS, currentLevel, i18nString(UIStrings.layoutShifts), style,
         /* selectable= */ true, expanded);

package/front_end/panels/timeline/ThreadAppender.ts

@@ -262,7 +262,11 @@ export class ThreadAppender implements TrackAppender {
    */
   #appendTrackHeaderAtLevel(currentLevel: number): void {
     const trackIsCollapsible = this.#entries.length > 0;
-    const style = buildGroupStyle({shareHeaderLine: false, collapsible: trackIsCollapsible});
+    const style = buildGroupStyle({
+      shareHeaderLine: false,
+      collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS :
+                                        PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+    });
     if (this.#headerNestingLevel !== null) {
       style.nestingLevel = this.#headerNestingLevel;
     }
@@ -304,7 +308,11 @@ export class ThreadAppender implements TrackAppender {
     const currentTrackCount = this.#compatibilityBuilder.getCurrentTrackCountForThreadType(threadType);
     if (currentTrackCount === 0) {
       const trackIsCollapsible = this.#entries.length > 0;
-      const headerStyle = buildGroupStyle({shareHeaderLine: false, collapsible: trackIsCollapsible});
+      const headerStyle = buildGroupStyle({
+        shareHeaderLine: false,
+        collapsible: trackIsCollapsible ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS :
+                                          PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+      });
 
       // Don't set any jslogcontext (first argument) because this is a shared
       // header group. Each child will have its context set.
@@ -315,7 +323,8 @@ export class ThreadAppender implements TrackAppender {
 
     // Nesting is set to 1 because the track is appended inside the
     // header for all raster threads.
-    const titleStyle = buildGroupStyle({padding: 2, nestingLevel: 1, collapsible: false});
+    const titleStyle =
+        buildGroupStyle({padding: 2, nestingLevel: 1, collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER});
     const rasterizerTitle = this.threadType === Trace.Handlers.Threads.ThreadType.RASTERIZER ?
         i18nString(UIStrings.rasterizerThreadS, {PH1: currentTrackCount + 1}) :
         i18nString(UIStrings.threadPoolThreadS, {PH1: currentTrackCount + 1});

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -152,8 +152,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     [this.droppedFramePattern, this.partialFramePattern] = this.preparePatternCanvas();
 
     this.framesGroupStyle = this.buildGroupStyle({useFirstLineForOverview: true});
-    this.screenshotsGroupStyle =
-        this.buildGroupStyle({useFirstLineForOverview: true, nestingLevel: 1, collapsible: false, itemsHeight: 150});
+    this.screenshotsGroupStyle = this.buildGroupStyle({
+      useFirstLineForOverview: true,
+      nestingLevel: 1,
+      collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER,
+      itemsHeight: 150
+    });
 
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
       const headers = [
@@ -427,7 +431,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     const defaultGroupStyle = {
       padding: 4,
       height: 17,
-      collapsible: true,
+      collapsible: PerfUI.FlameChart.GroupCollapsibleState.ALWAYS,
       color: ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-on-surface'),
       backgroundColor: ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-cdt-base-container'),
       nestingLevel: 0,
@@ -774,7 +778,8 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       return;
     }
 
-    this.framesGroupStyle.collapsible = hasScreenshots;
+    this.framesGroupStyle.collapsible =
+        hasScreenshots ? PerfUI.FlameChart.GroupCollapsibleState.ALWAYS : PerfUI.FlameChart.GroupCollapsibleState.NEVER;
     const expanded = Root.Runtime.Runtime.queryParam('flamechart-force-expand') === 'frames';
 
     this.appendHeader(i18nString(UIStrings.frames), this.framesGroupStyle, false /* selectable */, expanded);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2242,7 +2242,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
 
     UI.Context.Context.instance().setFlavor(
-        AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.full(parsedTrace));
+        AiAssistanceModel.AgentFocus, AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace));
   }
 
   #onAnnotationModifiedEvent(e: Event): void {
@@ -3079,7 +3079,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       for (const modelName in insightsForNav.model) {
         const model = modelName as keyof Trace.Insights.Types.InsightModelsType;
         const insight = insightsForNav.model[model];
-        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(parsedTrace, insight);
+        const focus = AiAssistanceModel.AgentFocus.fromParsedTrace(parsedTrace);
+        const formatter = new AiAssistanceModel.PerformanceInsightFormatter(focus, insight);
         if (!formatter.insightIsSupported()) {
           // Not all Insights are integrated with "Ask AI" yet, let's avoid
           // filling up the response with those ones because there will be no