chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/timeline/overlays/components/EntriesLinkOverlay.ts

@@ -15,7 +15,7 @@ import entriesLinkOverlayStyles from './entriesLinkOverlay.css.js';
 
 const UIStrings = {
   /**
-   *@description Accessible label used to explain to a user that they are viewing an arrow representing a link between two entries.
+   * @description Accessible label used to explain to a user that they are viewing an arrow representing a link between two entries.
    */
   diagram: 'Links between entries',
 } as const;

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -32,23 +32,23 @@ const UIStrings = {
    */
   entryLabel: 'Entry label',
   /**
-   *@description Accessible label used to prompt the user to input text into the field.
+   * @description Accessible label used to prompt the user to input text into the field.
    */
   inputTextPrompt: 'Enter an annotation label',
   /**
-   *@description Text displayed on a button that generates an AI label.
+   * @description Text displayed on a button that generates an AI label.
    */
   generateLabelButton: 'Generate label',
   /**
-   *@description Label used for screenreaders on the FRE dialog
+   * @description Label used for screenreaders on the FRE dialog
    */
   freDialog: 'Get AI-powered annotation suggestions dialog',
   /**
-   *@description Screen-reader text for a tooltip link for navigating to "AI innovations" settings where the user can learn more about auto-annotations.
+   * @description Screen-reader text for a tooltip link for navigating to "AI innovations" settings where the user can learn more about auto-annotations.
    */
   learnMoreAriaLabel: 'Learn more about auto annotations in settings',
   /**
-   *@description Screen-reader text for a tooltip icon.
+   * @description Screen-reader text for a tooltip icon.
    */
   moreInfoAriaLabel: 'More information about this feature',
 } as const;
@@ -58,59 +58,57 @@ const UIStrings = {
 */
 const UIStringsNotTranslate = {
   /**
-   *@description Tooltip link for the navigating to "AI innovations" page in settings.
+   * @description Tooltip link for the navigating to "AI innovations" page in settings.
    */
   learnMore: 'Learn more in settings',
   /**
-   *@description Security disclaimer text displayed when the information icon on a button that generates an AI label is hovered.
+   * @description Security disclaimer text displayed when the information icon on a button that generates an AI label is hovered.
    */
   generateLabelSecurityDisclaimer:
       'The selected call stack is sent to Google. The content you submit and that is generated by this feature will be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
-   *@description Enterprise users with logging off - Security disclaimer text displayed when the information icon on a button that generates an AI label is hovered.
+   * @description Enterprise users with logging off - Security disclaimer text displayed when the information icon on a button that generates an AI label is hovered.
    */
   generateLabelSecurityDisclaimerLogginOff:
       'The selected call stack is sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
-   *@description The `Generate AI label button` tooltip disclaimer for when the feature is not available and the reason can be checked in settings.
+   * @description The `Generate AI label button` tooltip disclaimer for when the feature is not available and the reason can be checked in settings.
    */
   autoAnnotationNotAvailableDisclaimer: 'Auto annotations are not available.',
   /**
-   *@description The `Generate AI label button` tooltip disclaimer for when the feature is not available because the user is offline.
+   * @description The `Generate AI label button` tooltip disclaimer for when the feature is not available because the user is offline.
    */
   autoAnnotationNotAvailableOfflineDisclaimer: 'Auto annotations are not available because you are offline.',
   /**
-   *@description Header text for the AI-powered annotations suggestions disclaimer dialog.
+   * @description Header text for the AI-powered annotations suggestions disclaimer dialog.
    */
   freDisclaimerHeader: 'Get AI-powered annotation suggestions',
   /**
-   *@description Text shown when the AI-powered annotation is being generated.
+   * @description Text shown when the AI-powered annotation is being generated.
    */
   generatingLabel: 'Generating label',
   /**
-   *@description Text shown when the generation of the AI-powered annotation failed.
+   * @description Text shown when the generation of the AI-powered annotation failed.
    */
   generationFailed: 'Generation failed',
   /**
-   *@description First disclaimer item text for the fre dialog - AI won't always get it right.
+   * @description First disclaimer item text for the fre dialog - AI won't always get it right.
    */
   freDisclaimerAiWontAlwaysGetItRight: 'This feature uses AI and won’t always get it right',
   /**
-   *@description Second disclaimer item text for the fre dialog - trace data is sent to Google.
+   * @description Second disclaimer item text for the fre dialog - trace data is sent to Google.
    */
-  freDisclaimerPrivacyDataSentToGoogle: 'Performance trace is sent to Google to generate annotation suggestions',
+  freDisclaimerPrivacyDataSentToGoogle:
+      'To generate annotation suggestions, your performance trace is sent to Google. This data may be seen by human reviewers to improve this feature.',
   /**
-   *@description Third disclaimer item text part for the fre dialog part - you can control this setting from the settings panel (because 'settings panel' part of the string is a link, it is attached separately).
+   * @description Second disclaimer item text for the fre dialog - trace data is sent to Google.
    */
-  freDisclaimerControlSettingFrom: 'You can control this feature in the',
+  freDisclaimerPrivacyDataSentToGoogleNoLogging:
+      'To generate annotation suggestions, your performance trace is sent to Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
-   *@description Third disclaimer item text part for the fre dialog part - settings panel text.
+   * @description Text for the 'learn more' button displayed in fre.
    */
-  settingsPanel: 'settings panel',
-  /**
-   *@description Text for the 'learn more' button displayed in fre.
-   */
-  learnMoreButton: 'Learn more about auto annotations',
+  learnMoreButton: 'Learn more',
 } as const;
 
 const enum AIButtonState {
@@ -129,11 +127,11 @@ function isAiAssistanceServerSideLoggingEnabled(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }
 
-export class EmptyEntryLabelRemoveEvent extends Event {
-  static readonly eventName = 'emptyentrylabelremoveevent';
+export class EntryLabelRemoveEvent extends Event {
+  static readonly eventName = 'entrylabelremoveevent';
 
   constructor() {
-    super(EmptyEntryLabelRemoveEvent.eventName);
+    super(EntryLabelRemoveEvent.eventName);
   }
 }
 
@@ -158,10 +156,6 @@ export class EntryLabelOverlay extends HTMLElement {
   static readonly LABEL_AND_CONNECTOR_SHIFT_LENGTH = 8;
   // Length of the line that connects the label to the entry.
   static readonly LABEL_CONNECTOR_HEIGHT = 7;
-  static readonly LABEL_HEIGHT = 17;
-  static readonly LABEL_PADDING = 4;
-  static readonly LABEL_AND_CONNECTOR_HEIGHT =
-      EntryLabelOverlay.LABEL_HEIGHT + EntryLabelOverlay.LABEL_PADDING * 2 + EntryLabelOverlay.LABEL_CONNECTOR_HEIGHT;
   // Set the max label length to avoid labels that could signicantly increase the file size.
   static readonly MAX_LABEL_LENGTH = 100;
 
@@ -186,7 +180,7 @@ export class EntryLabelOverlay extends HTMLElement {
   #label: string;
   #shouldDrawBelowEntry: boolean;
   #richTooltip: Lit.Directives.Ref<HTMLElement> = Directives.createRef();
-
+  #noLogging: boolean;
   /**
    * Required to generate a label with AI.
    */
@@ -236,6 +230,8 @@ export class EntryLabelOverlay extends HTMLElement {
     this.#entryHighlightWrapper =
         this.#labelPartsWrapper?.querySelector<HTMLElement>('.entry-highlight-wrapper') ?? null;
     this.#label = label;
+    this.#noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
     this.#drawLabel(label);
     // If the label is not empty, it was loaded from the trace file.
     // In that case, do not auto-focus it as if the user were creating it for the first time
@@ -269,6 +265,10 @@ export class EntryLabelOverlay extends HTMLElement {
       // But we want to listen to the change event in the VE logs, so we dispatch it here.
       this.#inputField?.dispatchEvent(new Event('change', {bubbles: true, composed: true}));
     }
+    this.#setAIButtonRenderState();
+    // Rerender the label component when the label text changes because we need to
+    // make sure the 'auto annotation' button is only shown when the label is empty.
+    this.#render();
     this.#inputField?.setAttribute('aria-label', labelBoxTextContent);
   }
 
@@ -332,7 +332,8 @@ export class EntryLabelOverlay extends HTMLElement {
       return;
     }
 
-    const pastedText = clipboardData.getData('text');
+    // Remove newline characters to ensure single-line paste.
+    const pastedText = clipboardData.getData('text').replace(/(\r\n|\n|\r)/gm, '');
     const newText = this.#inputField.textContent + pastedText;
     const trimmedText = newText.slice(0, EntryLabelOverlay.MAX_LABEL_LENGTH + 1);
     this.#inputField.textContent = trimmedText;
@@ -340,12 +341,6 @@ export class EntryLabelOverlay extends HTMLElement {
   }
 
   set entryLabelVisibleHeight(entryLabelVisibleHeight: number) {
-    if (entryLabelVisibleHeight === this.#entryLabelVisibleHeight) {
-      // Even the position is not changed, the theme color might change, so we need to redraw the connector here.
-      this.#drawConnector();
-      return;
-    }
-
     this.#entryLabelVisibleHeight = entryLabelVisibleHeight;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
     // If the label is editable, focus cursor on it.
@@ -428,8 +423,8 @@ export class EntryLabelOverlay extends HTMLElement {
       // Move the label down from above the entry to below it. The label is positioned by default quite far above the entry, hence why we add:
       // 1. the height of the entry + of the label (inc its padding)
       // 2. the height of the connector (*2), so we have room to draw it
-      const verticalTransform = this.#entryLabelVisibleHeight + EntryLabelOverlay.LABEL_HEIGHT +
-          EntryLabelOverlay.LABEL_PADDING * 2 + EntryLabelOverlay.LABEL_CONNECTOR_HEIGHT * 2;
+      const verticalTransform = this.#entryLabelVisibleHeight + (EntryLabelOverlay.LABEL_CONNECTOR_HEIGHT * 2) +
+          this.#inputField?.offsetHeight;
 
       yTranslation = verticalTransform;
     }
@@ -482,7 +477,7 @@ export class EntryLabelOverlay extends HTMLElement {
     // If the label is empty when it is being navigated away from, dispatch an event to remove this entry overlay
     if (!editable && newLabelText.length === 0 && !this.#isPendingRemoval) {
       this.#isPendingRemoval = true;
-      this.dispatchEvent(new EmptyEntryLabelRemoveEvent());
+      this.dispatchEvent(new EntryLabelRemoveEvent());
     }
   }
 
@@ -524,7 +519,7 @@ export class EntryLabelOverlay extends HTMLElement {
       try {
         // Trigger a re-render to display the loading component in the place of the button when the label is being generated.
         this.#currAIButtonState = AIButtonState.GENERATING_LABEL;
-        UI.ARIAUtils.alert(UIStringsNotTranslate.generatingLabel);
+        UI.ARIAUtils.LiveAnnouncer.alert(UIStringsNotTranslate.generatingLabel);
         // Trigger a re-render to put focus back on the input box, otherwise
         // when the button changes to a loading spinner, it loses focus and the
         // editing state is reset because the component loses focus.
@@ -575,31 +570,14 @@ export class EntryLabelOverlay extends HTMLElement {
         },
         {
           iconName: 'google',
-          content: lockedString(UIStringsNotTranslate.freDisclaimerPrivacyDataSentToGoogle),
-        },
-        {
-          iconName: 'gear',
-          // clang-format off
-          content: html`
-            ${lockedString(UIStringsNotTranslate.freDisclaimerControlSettingFrom)}
-            <button
-              @click=${() => {
-                void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-              }}
-              class="link"
-              role="link"
-              jslog=${VisualLogging.link('open-ai-settings').track({
-                click: true
-              })}
-              tabindex="0"
-            >${lockedString(UIStringsNotTranslate.settingsPanel)}</button>`,
-          // clang-format on
+          content: this.#noLogging ? lockedString(UIStringsNotTranslate.freDisclaimerPrivacyDataSentToGoogleNoLogging) :
+                                     lockedString(UIStringsNotTranslate.freDisclaimerPrivacyDataSentToGoogle),
         },
       ],
       onLearnMoreClick: () => {
         UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations');
       },
-      learnMoreButtonTitle: UIStringsNotTranslate.learnMoreButton,
+      learnMoreButtonText: UIStringsNotTranslate.learnMoreButton,
     });
     this.dispatchEvent(new LabelAnnotationsConsentDialogVisibilityChange(false));
 
@@ -675,9 +653,6 @@ export class EntryLabelOverlay extends HTMLElement {
   }
 
   #renderAiButton(): Lit.LitTemplate {
-    const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
-        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
-
     if (this.#currAIButtonState === AIButtonState.GENERATION_FAILED) {
       // Only show the error message on the first component render render after the failure.
       // clang-format off
@@ -685,10 +660,9 @@ export class EntryLabelOverlay extends HTMLElement {
         <span
           class="ai-label-error">
           <devtools-icon
-            class="warning"
-            .name=${'warning'}
-            .data=${{
-            iconName: 'warning', color: 'var(--ref-palette-error50)', width: '20px'}}>
+            class="warning extra-large"
+            name="warning"
+            style="color: var(--ref-palette-error50)">
           </devtools-icon>
           <span class="generate-label-text">${lockedString(UIStringsNotTranslate.generationFailed)}</span>
         </span>
@@ -705,10 +679,9 @@ export class EntryLabelOverlay extends HTMLElement {
           class="ai-label-button enabled"
           @click=${this.#handleAiButtonClick}>
           <devtools-icon
-            class="pen-icon"
-            .name=${'pen-spark'}
-            .data=${{
-            iconName: 'pen-spark', color: 'var(--color-primary)', width: '20px'}}>
+            class="pen-icon extra-large"
+            name="pen-spark"
+            style="color: var(--icon-primary);">
           </devtools-icon>
           <span class="generate-label-text">${i18nString(UIStrings.generateLabelButton)}</span>
         </button>
@@ -720,7 +693,7 @@ export class EntryLabelOverlay extends HTMLElement {
           .variant=${Buttons.Button.Variant.ICON}
           ></devtools-button>
         ${this.#renderAITooltip({
-         textContent: noLogging ? lockedString(UIStringsNotTranslate.generateLabelSecurityDisclaimerLogginOff) : lockedString(UIStringsNotTranslate.generateLabelSecurityDisclaimer),
+         textContent: this.#noLogging ? lockedString(UIStringsNotTranslate.generateLabelSecurityDisclaimerLogginOff) : lockedString(UIStringsNotTranslate.generateLabelSecurityDisclaimer),
          includeSettingsButton: true,
         })}
       </span>
@@ -751,10 +724,9 @@ export class EntryLabelOverlay extends HTMLElement {
           @click=${this.#handleAiButtonClick}>
           <devtools-icon
             aria-details="info-tooltip"
-            class="pen-icon"
-            .name=${'pen-spark'}
-            .data=${{
-            iconName: 'pen-spark', color: 'var(--sys-color-state-disabled)', width: '20px'}}>
+            class="pen-icon extra-large"
+            name="pen-spark"
+            style="color: var(--sys-color-state-disabled);">
           </devtools-icon>
         </button>
         ${this.#renderAITooltip({
@@ -766,32 +738,22 @@ export class EntryLabelOverlay extends HTMLElement {
     // clang-format on
   }
 
-  #handleFocusOutEvent(): void {
+  #handleFocusOutEvent(event: FocusEvent): void {
     /**
      * Usually when the text box loses focus, we want to stop the edit mode and
      * just display the annotation. However, if the user tabs from the text box
      * to focus the GenerateAI button, we need to ensure that we do not exit
      * edit mode. The only reliable method is to listen to the focusout event
      * (which bubbles, unlike `blur`) on the parent.
-     * This means we get any updates on the focus state of anything inside this component.
-     * Once we get the event, we check to see if focus is still within this
-     * component (which means either the input, or the button, or the disclaimer popup).
-     * If it is, we do nothing, but if we have lost focus,  we can then exit editable mode.
-     *
-     * If you are thinking "why not `blur` on the span" it's because blur does
-     * not propagate; the span itself never blurs, but the elements inside it
-     * do as the span is not focusable.
-     *
-     * The reason we do it inside a rAF is because on the first run the values
-     * for `this.hasFocus()` are not accurate. I'm not quite sure why, but by
-     * letting the browser have a frame to update, it then accurately reports
-     * the up to date values for `this.hasFocus()`
      */
-    requestAnimationFrame(() => {
-      if (!this.hasFocus()) {
-        this.setLabelEditabilityAndRemoveEmptyLabel(false);
-      }
-    });
+    const relatedTarget = event.relatedTarget as Node | null;
+    // If the related target is null, it means the focus has left the browser
+    // window. If it's not null, we check if the new focused element is a
+    // descendant of this component's shadow root. If it is, we don't do anything.
+    if (relatedTarget && this.#shadow.contains(relatedTarget)) {
+      return;
+    }
+    this.setLabelEditabilityAndRemoveEmptyLabel(false);
   }
 
   #render(): void {
@@ -821,17 +783,20 @@ export class EntryLabelOverlay extends HTMLElement {
               }}
               @keydown=${this.#handleLabelInputKeyDown}
               @paste=${this.#handleLabelInputPaste}
-              @keyup=${() => {
-                this.#handleLabelInputKeyUp();
-                this.#setAIButtonRenderState();
-                // Rerender the label component when the label text changes because we need to
-                // make sure the 'auto annotation' button is only shown when the label is empty.
-                this.#render();
-                }}
+              @input=${this.#handleLabelInputKeyUp}
               contenteditable=${this.#isLabelEditable ? 'plaintext-only' : false}
               jslog=${VisualLogging.textField('timeline.annotations.entry-label-input').track({keydown: true, click: true, change: true})}
               tabindex="0"
             ></span>
+            ${this.#isLabelEditable && this.#inputField?.innerText !== '' ? html`
+              <button
+                class="delete-button"
+                @click=${() => this.dispatchEvent(new EntryLabelRemoveEvent())}
+                jslog=${VisualLogging.action('timeline.annotations.delete-entry-label').track({click: true})}>
+              <devtools-icon name="cross" class="small" style="color: var(--color-background);"
+              ></devtools-icon>
+              </button>
+            ` : Lit.nothing}
             ${(() => {
               switch (this.#currAIButtonState) {
                 case AIButtonState.HIDDEN:

package/front_end/panels/timeline/overlays/components/TimeRangeOverlay.ts

@@ -13,7 +13,7 @@ import timeRangeOverlayStyles from './timeRangeOverlay.css.js';
 
 const UIStrings = {
   /**
-   *@description Accessible label used to explain to a user that they are viewing an entry label.
+   * @description Accessible label used to explain to a user that they are viewing an entry label.
    */
   timeRange: 'Time range',
 } as const;

package/front_end/panels/timeline/overlays/components/TimespanBreakdownOverlay.ts

@@ -11,19 +11,10 @@ import timespanBreakdownOverlayStyles from './timespanBreakdownOverlay.css.js';
 
 const {html} = Lit;
 
-/**
- * An EntryBreakdown, or section, that makes up a TimespanBreakdown.
- */
-export interface EntryBreakdown {
-  bounds: Trace.Types.Timing.TraceWindowMicro;
-  label: string|Lit.LitTemplate;
-  showDuration: boolean;
-}
-
 export class TimespanBreakdownOverlay extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #canvasRect: DOMRect|null = null;
-  #sections: EntryBreakdown[]|null = null;
+  #sections: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown[]|null = null;
 
   set isBelowEntry(isBelow: boolean) {
     this.classList.toggle('is-below', isBelow);
@@ -37,7 +28,7 @@ export class TimespanBreakdownOverlay extends HTMLElement {
     this.#render();
   }
 
-  set sections(sections: EntryBreakdown[]|null) {
+  set sections(sections: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown[]|null) {
     if (sections === this.#sections) {
       return;
     }
@@ -152,7 +143,7 @@ export class TimespanBreakdownOverlay extends HTMLElement {
     return Array.from(this.#shadow.querySelectorAll('.timespan-breakdown-overlay-section'));
   }
 
-  #renderSection(section: EntryBreakdown): Lit.TemplateResult {
+  #renderSection(section: Trace.Types.Overlays.TimespanBreakdownEntryBreakdown): Lit.TemplateResult {
     // clang-format off
     return html`
       <div class="timespan-breakdown-overlay-section">

package/front_end/panels/timeline/overlays/components/entryLabelOverlay.css

@@ -50,6 +50,18 @@
   }
 }
 
+.delete-button {
+  display: flex;
+  pointer-events: auto;
+  position: absolute;
+  right: 0;
+  top: -5px;
+  border-radius: 50%;
+  padding: 0;
+  border: none;
+  background: var(--color-background-inverted);
+}
+
 .ai-label-loading,
 .ai-label-error {
   gap: var(--sys-size-6);
@@ -105,6 +117,7 @@
   font-family: var(--default-font-family);
   font-size: var(--sys-typescale-body2-size);
   font-weight: var(--ref-typeface-weight-medium);
+  outline: 2px solid var(--color-background);
 }
 
 

package/front_end/panels/timeline/overlays/components/timeRangeOverlay.css

@@ -71,12 +71,13 @@
   display: -webkit-box;
   white-space: break-spaces;
   background: var(--sys-color-cdt-base-container);
+  line-clamp: 2;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
 .duration {
-  background: var(--sys-color-cdt-base-container) ;
+  background: var(--sys-color-cdt-base-container);
 }
 
 .label-text[contenteditable='true'] {

package/front_end/panels/timeline/timeline-meta.ts

@@ -11,55 +11,55 @@ import type * as Timeline from './timeline.js';
 
 const UIStrings = {
   /**
-   *@description Text for the performance of something
+   * @description Text for the performance of something
    */
   performance: 'Performance',
   /**
-   *@description Command for showing the 'Performance' tool
+   * @description Command for showing the 'Performance' tool
    */
   showPerformance: 'Show Performance',
   /**
-   *@description Text to record a series of actions for analysis
+   * @description Text to record a series of actions for analysis
    */
   record: 'Record',
   /**
-   *@description Text of an item that stops the running task
+   * @description Text of an item that stops the running task
    */
   stop: 'Stop',
   /**
-   *@description Title of an action in the timeline tool to record reload
+   * @description Title of an action in the timeline tool to record reload
    */
   recordAndReload: 'Record and reload',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon download button
+   * @description Tooltip text that appears when hovering over the largeicon download button
    */
   saveProfile: 'Save profile…',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon load button
+   * @description Tooltip text that appears when hovering over the largeicon load button
    */
   loadProfile: 'Load profile…',
   /**
-   *@description Prev button title in Film Strip View of the Performance panel
+   * @description Prev button title in Film Strip View of the Performance panel
    */
   previousFrame: 'Previous frame',
   /**
-   *@description Next button title in Film Strip View of the Performance panel
+   * @description Next button title in Film Strip View of the Performance panel
    */
   nextFrame: 'Next frame',
   /**
-   *@description Title of an action in the timeline tool to show history
+   * @description Title of an action in the timeline tool to show history
    */
   showRecentTimelineSessions: 'Show recent timeline sessions',
   /**
-   *@description Title of an action that opens the previous recording in the performance panel
+   * @description Title of an action that opens the previous recording in the performance panel
    */
   previousRecording: 'Previous recording',
   /**
-   *@description Title of an action that opens the next recording in the performance panel
+   * @description Title of an action that opens the next recording in the performance panel
    */
   nextRecording: 'Next recording',
   /**
-   *@description Title of a setting under the Performance category in Settings
+   * @description Title of a setting under the Performance category in Settings
    */
   hideChromeFrameInLayersView: 'Hide `chrome` frame in Layers view',
 } as const;
@@ -369,7 +369,7 @@ Common.Revealer.registerRevealer({
 
 Common.Revealer.registerRevealer({
   contextTypes() {
-    return maybeRetrieveContextTypes(Timeline => [Timeline.Utils.InsightAIContext.ActiveInsight]);
+    return maybeRetrieveContextTypes(Timeline => [Timeline.Utils.Helpers.RevealableInsight]);
   },
   destination: Common.Revealer.RevealerDestination.TIMELINE_PANEL,
   async loadRevealer() {

package/front_end/panels/timeline/timeline.ts

@@ -10,16 +10,15 @@ import * as CLSLinkifier from './CLSLinkifier.js';
 import * as CompatibilityTracksAppender from './CompatibilityTracksAppender.js';
 import * as CountersGraph from './CountersGraph.js';
 import * as EntriesFilter from './EntriesFilter.js';
-import * as EventsSerializer from './EventsSerializer.js';
 import * as EventsTimelineTreeView from './EventsTimelineTreeView.js';
 import * as ExtensionTrackAppender from './ExtensionTrackAppender.js';
-import * as FreshRecording from './FreshRecording.js';
 import * as GPUTrackAppender from './GPUTrackAppender.js';
 import * as Initiators from './Initiators.js';
 import * as InteractionsTrackAppender from './InteractionsTrackAppender.js';
 import * as LayoutShiftsTrackAppender from './LayoutShiftsTrackAppender.js';
 import * as ModificationsManager from './ModificationsManager.js';
 import * as NetworkTrackAppender from './NetworkTrackAppender.js';
+import * as RecordingMetadata from './RecordingMetadata.js';
 import * as SaveFileFormatter from './SaveFileFormatter.js';
 import * as TargetForEvent from './TargetForEvent.js';
 import * as ThirdPartyTreeView from './ThirdPartyTreeView.js';
@@ -41,6 +40,7 @@ import * as TimelineSelection from './TimelineSelection.js';
 import * as TimelineTreeView from './TimelineTreeView.js';
 import * as TimelineUIUtils from './TimelineUIUtils.js';
 import * as TimingsTrackAppender from './TimingsTrackAppender.js';
+import * as TrackConfigBanner from './TrackConfigBanner.js';
 import * as TrackConfiguration from './TrackConfiguration.js';
 import * as UIDevtoolsController from './UIDevtoolsController.js';
 import * as UIDevtoolsUtils from './UIDevtoolsUtils.js';
@@ -55,16 +55,15 @@ export {
   CompatibilityTracksAppender,
   CountersGraph,
   EntriesFilter,
-  EventsSerializer,
   EventsTimelineTreeView,
   ExtensionTrackAppender,
-  FreshRecording,
   GPUTrackAppender,
   Initiators,
   InteractionsTrackAppender,
   LayoutShiftsTrackAppender,
   ModificationsManager,
   NetworkTrackAppender,
+  RecordingMetadata,
   SaveFileFormatter,
   TargetForEvent,
   ThirdPartyTreeView,
@@ -86,6 +85,7 @@ export {
   TimelineTreeView,
   TimelineUIUtils,
   TimingsTrackAppender,
+  TrackConfigBanner,
   TrackConfiguration,
   UIDevtoolsController,
   UIDevtoolsUtils,