chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

package/front_end/panels/search/SearchView.ts

@@ -106,12 +106,11 @@ 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;
@@ -128,12 +127,15 @@ interface SearchViewInput {
   onClearSearch: () => void;
 }
 
-type View = (input: SearchViewInput, output: object, target: HTMLElement) => void;
+interface SearchViewOutput {
+  focusSearchInput: () => void;
+}
+
+type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const {
     query,
-    focusSearchInput,
     matchCase,
     isRegex,
     searchMessage,
@@ -175,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}
@@ -258,7 +262,7 @@ 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;
@@ -284,7 +288,7 @@ export class SearchView extends UI.Widget.VBox {
   // We throttle adding search results, otherwise we trigger DOM layout for each
   // result added.
   #throttler: Common.Throttler.Throttler;
-  #pendingSearchResults: SearchResult[] = [];
+  #searchResults: SearchResult[] = [];
 
   constructor(settingKey: string, throttler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
     super({
@@ -294,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 = '';
@@ -320,7 +323,6 @@ export class SearchView extends UI.Widget.VBox {
   override performUpdate(): void {
     const input: SearchViewInput = {
       query: this.#query,
-      focusSearchInput: this.#focusSearchInput,
       matchCase: this.#matchCase,
       isRegex: this.#isRegex,
       searchMessage: this.#searchMessage,
@@ -338,9 +340,13 @@ export class SearchView extends UI.Widget.VBox {
       onRefresh: this.#onRefresh.bind(this),
       onClearSearch: this.#onClearSearch.bind(this),
     };
-    const output = {};
+    const that = this;
+    const output: SearchViewOutput = {
+      set focusSearchInput(value: () => void) {
+        that.#focusSearchInput = value;
+      }
+    };
     this.#view(input, output, this.contentElement);
-    this.#focusSearchInput = false;
   }
 
   #onToggleRegex(): void {
@@ -360,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) {
@@ -431,22 +439,24 @@ export class SearchView extends UI.Widget.VBox {
     if (!this.#searchResultsPane) {
       this.#searchResultsPane = this.createSearchResultsPane();
     }
-    this.#pendingSearchResults.push(searchResult);
-    void this.#throttler.schedule(async () => this.#addPendingSearchResults());
+    this.#searchResults.push(searchResult);
+    void this.#throttler.schedule(async () => this.#setSearchResults());
   }
 
   protected createSearchResultsPane(): SearchResultsPane {
     return new SearchResultsPane((this.#searchConfig as Workspace.SearchConfig.SearchConfig));
   }
 
-  #addPendingSearchResults(): void {
-    for (const searchResult of this.#pendingSearchResults) {
+  #setSearchResults(): void {
+    this.#searchMatchesCount = 0;
+    this.#searchResultsCount = 0;
+    this.#nonEmptySearchResultsCount = 0;
+    for (const searchResult of this.#searchResults) {
       this.#addSearchResult(searchResult);
-      if (searchResult.matchesCount()) {
-        this.#searchResultsPane?.addSearchResult(searchResult);
-      }
     }
-    this.#pendingSearchResults = [];
+    if (this.#searchResultsPane) {
+      this.#searchResultsPane.searchResults = this.#searchResults.filter(searchResult => searchResult.matchesCount());
+    }
   }
 
   #onSearchFinished(searchId: number, finished: boolean): void {
@@ -495,6 +505,7 @@ export class SearchView extends UI.Widget.VBox {
   #searchStarted(): void {
     this.#searchMatchesCount = 0;
     this.#searchResultsCount = 0;
+    this.#searchResults = [];
     this.#nonEmptySearchResultsCount = 0;
     if (!this.#searchingView) {
       this.#searchingView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.searching), '');
@@ -537,8 +548,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/search/searchResultsPane.css

@@ -31,6 +31,11 @@ li.search-result {
   white-space: pre;
 }
 
+li.search-result .tree-element-title {
+  display: flex;
+  width: 100%;
+}
+
 li.search-result:hover {
   background-color: var(--sys-color-state-hover-on-subtle);
 }
@@ -68,6 +73,10 @@ li.search-match {
   white-space: pre;
 }
 
+li.search-match .tree-element-title {
+  display: flex;
+}
+
 li.search-match.selected:focus-visible {
   background: var(--sys-color-tonal-container);
 }

package/front_end/panels/security/CookieControlsView.ts

@@ -186,8 +186,9 @@ export class CookieControlsView extends UI.Widget.VBox {
           <devtools-switch
             .checked=${Boolean(toggleEnabledSetting.get())}
             .disabled=${Boolean(enterpriseEnabledSetting.get())}
+            .label=${'Temporarily limit third-party cookies, only when DevTools is open'}
+            data-testid="cookie-control-override"
             @switchchange=${()=>{input.inputChanged(!toggleEnabledSetting.get(), toggleEnabledSetting);}}
-            aria-label="Temporarily limit third-party cookies, only when DevTools is open"
             jslog=${VisualLogging.toggle(toggleEnabledSetting.name).track({click: true})}
           >
           </devtools-switch>

package/front_end/panels/settings/AISettingsTab.ts

@@ -381,8 +381,10 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
           text: noLogging ? i18nString(UIStrings.codeSuggestionsSendDataNoLogging) :
                             i18nString(UIStrings.codeSuggestionsSendData)
         }],
-        // TODO: Add a relevant link
-        learnMoreLink: {url: '', linkJSLogContext: 'learn-more.code-completion'},
+        learnMoreLink: {
+          url: ' https://developers.chrome.com/docs/devtools/ai-assistance/code-completion',
+          linkJSLogContext: 'learn-more.code-completion'
+        },
         settingExpandState: {
           isSettingExpanded: false,
           expandSettingJSLogContext: 'code-completion.accordion',
@@ -590,8 +592,9 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
           .checked=${Boolean(setting.get()) && !isDisabled}
           .jslogContext=${setting.name || ''}
           .disabled=${isDisabled}
+          .label=${disabledReasonsJoined || settingData.enableSettingText}
+          data-testid=${settingData.enableSettingText}
           @switchchange=${this.#toggleSetting.bind(this, setting)}
-          aria-label=${disabledReasonsJoined || settingData.enableSettingText}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>

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

@@ -12,11 +12,13 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * 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 Badges from '../../../models/badges/badges.js';
 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 +214,7 @@ export class SyncSection extends HTMLElement {
   }
 
   async #fetchGdpDetails(): Promise<void> {
-    if (!Root.Runtime.hostConfig.devToolsGdpProfiles?.enabled || Root.Runtime.hostConfig.isOffTheRecord) {
+    if (!Host.GdpClient.isGdpProfilesAvailable()) {
       return;
     }
 
@@ -251,16 +253,29 @@ function renderWarningIfNeeded(syncInfo: Host.InspectorFrontendHostAPI.SyncInfor
       'chrome://settings/syncSetup/advanced' as Platform.DevToolsPath.UrlString;
   const warningText =
       !syncInfo.isSyncActive ? i18nString(UIStrings.syncDisabled) : i18nString(UIStrings.preferencesSyncDisabled);
+  const handleClick = (event: Event): void => {
+    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (rootTarget === null) {
+      return;
+    }
+
+    void rootTarget.targetAgent().invoke_createTarget({url: warningLink}).then(result => {
+      if (result.getError()) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(warningLink);
+      }
+    });
+    event.consume();
+  };
   // clang-format off
   return html`
-    <devtools-chrome-link .href=${warningLink}>
-      <devtools-button
-        aria-describedby=settings-sync-info
-        .iconName=${'info'}
-        .variant=${Buttons.Button.Variant.ICON}
-        .size=${Buttons.Button.Size.SMALL}>
-      </devtools-button>
-    </devtools-chrome-link>
+    <devtools-button
+      aria-describedby=settings-sync-info
+      aria-label=${warningText}
+      .iconName=${'info'}
+      .variant=${Buttons.Button.Variant.ICON}
+      .size=${Buttons.Button.Size.SMALL}
+      @click=${handleClick}>
+    </devtools-button>
     <devtools-tooltip
         id=settings-sync-info
         variant=simple>
@@ -304,21 +319,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 class="gdp-logo" role="img" 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 +345,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 +373,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 +381,8 @@ function renderGdpSectionIfNeeded({
       `}
     </div>
   `;
+  // clang-format on
 }
-// clang-format on
 
 customElements.define('devtools-sync-section', SyncSection);
 

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -585,7 +585,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         ${i18nString(UIStrings.mobileCheckboxLabel)}
       </label>
     ` :
-                                                           html``;
+                                                           Lit.nothing;
     return html`
       <span class="full-row label">${i18nString(UIStrings.deviceModel)}</span>
       <div class="full-row brand-row" aria-label=${i18nString(UIStrings.deviceProperties)} role="group">

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 {
@@ -58,6 +59,9 @@ export class AiCodeCompletionPlugin extends Plugin {
     if (showTeaser) {
       this.#teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.#detachAiCodeCompletionTeaser.bind(this)});
     }
+
+    this.#aiCodeCompletionDisclaimerContainer.classList.add('ai-code-completion-disclaimer-container');
+    this.#aiCodeCompletionDisclaimerContainer.style.paddingInline = 'var(--sys-size-3)';
   }
 
   static override accepts(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
@@ -212,8 +216,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 +236,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/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 {
@@ -1194,7 +1197,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
     } else if (position === 'bottom') {
       vertically = true;
     } else {
-      vertically = UI.InspectorView.InspectorView.instance().element.offsetWidth < 680;
+      vertically = this.splitWidget.element.offsetWidth < 680;
     }
 
     if (this.sidebarPaneView && vertically === !this.splitWidget.isVertical()) {

package/front_end/panels/sources/sourcesView.css

@@ -14,11 +14,16 @@
 
 #sources-panel-sources-view .sources-toolbar {
   display: flex;
-  flex: 0 0 27px;
+  flex: 0 0 auto;
   background-color: var(--sys-color-cdt-base-container);
   border-top: 1px solid var(--sys-color-divider);
   overflow: hidden;
   z-index: 0;
+  align-items: flex-end;
+
+  devtools-toolbar:first-of-type {
+    flex-wrap: wrap;
+  }
 }
 
 .source-frame-debugger-script {

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