chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -4,62 +4,38 @@
  * found in the LICENSE file.
  */
 
-header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  flex: none;
-  margin-bottom: 16px;
-}
-
-h1 {
-  font-size: 18px;
-  font-weight: normal;
-  padding-bottom: 3px;
-  margin: 0;
-}
-
-[role="list"] {
-  overflow: auto;
-
-  > * {
-    min-width: 300px;
-  }
+.shortcut-list {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .keybinds-key {
-  padding: 0.1em 0.6em;
-  border: 1px solid var(--sys-color-neutral-outline);
-  font-size: 11px;
-  background-color: var(--sys-color-neutral-container);
-  color: var(--sys-color-on-surface);
-  box-shadow: var(--box-shadow-outline-color);
-  border-radius: 3px;
-  display: inline-block;
-  margin: 0 0.1em;
-  text-shadow: 0 1px 0 var(--sys-color-cdt-base-container);
-  line-height: 1.5;
+  display:flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--sys-size-11);
+  min-width: var(--sys-size-11);
+  font: var(--sys-typescale-body5-medium);
   white-space: nowrap;
+  border-radius: var(--sys-shape-corner-small);
+  background: var(--sys-color-tonal-container);
+  padding: 0px var(--sys-size-4);
 }
 
 .keybinds-list-item {
-  min-height: 30px;
+  margin: 0 var(--sys-size-6);
+  padding: var(--sys-size-4) 0;
   display: grid;
-  grid-template-rows: repeat(auto-fit, minmax(30px, auto));
+  grid-template-rows: 1fr ;
   grid-template-columns: 1fr 30px 2fr 30px 30px;
-  flex: auto 1 1;
-}
-
-.keybinds-list-item:focus-visible {
-  background-color: var(--sys-color-tonal-container);
 }
 
 .keybinds-list-item:not(.keybinds-category-header) {
-  padding: 4px 0 4px 20px;
-  border-radius: 7px;
+  border-top: 1px solid var(--sys-color-divider);
 }
 
-.keybinds-list-item:not(.keybinds-category-header):last-child {
-  margin-bottom: 5px;
+.keybinds-list-item:focus-visible {
+  background-color: var(--sys-color-tonal-container);
 }
 
 .keybinds-list-item.keybinds-editing {
@@ -67,7 +43,6 @@ h1 {
 }
 
 .keybinds-list-text.keybinds-action-name {
-  padding-top: 7px;
   grid-row: 1 / 3;
 }
 
@@ -77,44 +52,21 @@ h1 {
   grid-column: 3 / span 1;
 }
 
-.keybinds-shortcut.devtools-link {
-  align-items: center;
-  margin-left: 3px;
-}
-
-.keybinds-shortcut .devtools-link {
-  padding: 4px 0;
-}
-
-.keybinds-info .devtools-link {
-  padding-top: 6px;
-}
-
 .keybinds-error {
   color: var(--sys-color-error);
 }
 
+.keybinds-shortcut {
+  gap: var(--sys-size-4);
+}
+
 .keybinds-list-item.keybinds-editing .keybinds-shortcut {
   display: flex;
 }
 
 .keybinds-modified {
   grid-column: 2 / span 1;
-  margin-top: 2px;
-}
-
-.keybinds-list-item button {
-  border: none;
-  padding: 0;
-  background: transparent;
-}
-
-.keybinds-list-item button:hover devtools-icon {
-  color: var(--icon-default-hover);
-}
-
-.keybinds-list-item button:focus-visible {
-  background-color: var(--sys-color-tonal-container);
+  margin-top: var(--sys-size-3);
 }
 
 .keybinds-list-item button[disabled] {
@@ -128,7 +80,7 @@ h1 {
 .keybinds-edit-button {
   display: none;
   grid-row: 1 / span 1;
-  grid-column: 4 / span 1;
+  grid-column: 5 / span 1;
 }
 
 .keybinds-list-item:not(.keybinds-editing):hover .keybinds-edit-button,
@@ -137,7 +89,9 @@ h1 {
 }
 
 .keybinds-list-text {
-  padding: 3px 0;
+  min-height: var(--sys-size-12);
+  display: flex;
+  align-items: center;
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: start;
@@ -146,35 +100,28 @@ h1 {
 }
 
 .keybinds-category-header {
-  font-weight: bold;
-  line-height: 30px;
+  display: flex;
+  align-items: center;
+  font: var(--sys-typescale-body4-bold);
+  height: var(--sys-size-13);
+  padding: var(--sys-size-4) var(--sys-size-7);
   white-space: nowrap;
 }
 
-.keybinds-category-header:not(:nth-child(2)) {
-  border-top: 1px solid var(--sys-color-divider);
+.keybinds-header-wrapper + .keybinds-list-item-wrapper > .keybinds-list-item {
+  border: none;
 }
 
-.keybinds-list-item:not(.keybinds-category-header):hover,
-.keybinds-list-item:not(.keybinds-editing):focus-within {
+.keybinds-list-item-wrapper:has(:not(.keybinds-category-header):hover),
+.keybinds-list-item-wrapper:has(.keybinds-list-item:not(.keybinds-editing)):focus-within {
   background: var(--sys-color-state-hover-on-subtle);
 }
 
-.keybinds-set-select {
-  text-align: right;
-  margin-bottom: 16px;
-}
-
 .keybinds-set-select label p {
   display: inline;
   color: var(--sys-color-on-surface);
 }
 
-.keybinds-set-select select {
-  margin-left: 6px;
-  margin-top: 6px;
-}
-
 button.text-button {
   width: fit-content;
   align-self: flex-end;
@@ -184,6 +131,20 @@ button.text-button {
   margin: 0 2px;
 }
 
+.keybinds-set-select {
+  margin: 0;
+  padding: var(--sys-size-5) var(--sys-size-7);
+
+  & .settings-select {
+    display: flex;
+    justify-content: space-between;
+
+    & label {
+      padding: 0;
+    }
+  }
+}
+
 .keybinds-list-text:has(.keybinds-delete-button) {
   grid-column: 3 / -1;
 }
@@ -196,6 +157,7 @@ button.text-button {
 }
 
 .keybinds-footer {
+  padding: var(--sys-size-5) var(--sys-size-7);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;

package/front_end/panels/settings/settingsScreen.css

@@ -144,6 +144,30 @@ label {
   border-top: 1px solid var(--sys-color-divider);
 }
 
+.settings-card-container-wrapper {
+  padding-top: var(--sys-size-8);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+@media (max-width: 1000px) {
+  .settings-card-container-wrapper {
+    position: absolute;
+    top: var(--sys-size-8);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+  }
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
+}
+
 .settings-tab.settings-content {
   margin: 0;
   padding: 0;
@@ -189,15 +213,15 @@ label {
 .settings-experiment {
   display: grid;
   grid-template-columns: auto min-content auto 1fr;
-}
 
-.settings-experiment .devtools-link {
-  display: flex !important; /* stylelint-disable-line declaration-no-important */
-  align-items: center;
+  & .devtools-link {
+    display: flex !important; /* stylelint-disable-line declaration-no-important */
+    align-items: center;
+  }
 }
 
-.settings-experiment .devtools-link:has(.link-icon) {
-  outline-offset: 0;
+devtools-button.link-icon {
+  cursor: pointer;
 }
 
 .experiment-label {

package/front_end/panels/sources/AddSourceMapURLDialog.ts

@@ -31,7 +31,7 @@ export class AddDebugInfoURLDialog extends UI.Widget.HBox {
   private constructor(
       label: Platform.UIString.LocalizedString, jslogContext: string,
       callback: (arg0: Platform.DevToolsPath.UrlString) => void) {
-    super(/* isWebComponent */ true);
+    super(/* useShadowDom */ true);
 
     this.contentElement.createChild('label').textContent = label;
 

package/front_end/panels/sources/CSSPlugin.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-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 {assertNotNullOrUndefined} from '../../core/platform/platform.js';
@@ -258,7 +257,6 @@ function createCSSTooltip(active: ActiveTooltip): CodeMirror.Tooltip {
         spectrum.addEventListener(ColorPicker.Spectrum.Events.SIZE_CHANGED, () => view.requestMeasure());
         spectrum.setColor(active.color);
         widget = spectrum;
-        Host.userMetrics.colorPickerOpenedFrom(Host.UserMetrics.ColorPickerOpenedFrom.SOURCES_PANEL);
       } else {
         const spectrum = new InlineEditor.BezierEditor.BezierEditor(active.curve);
         widget = spectrum;

package/front_end/panels/sources/NavigatorView.ts

@@ -37,10 +37,12 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as FloatingButton from '../../ui/components/floating_button/floating_button.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Snippets from '../snippets/snippets.js';
+import {PanelUtils} from '../utils/utils.js';
 
 import navigatorTreeStyles from './navigatorTree.css.js';
 import navigatorViewStyles from './navigatorView.css.js';
@@ -1375,6 +1377,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
   readonly node: NavigatorUISourceCodeTreeNode;
   private readonly navigatorView: NavigatorView;
   uiSourceCodeInternal: Workspace.UISourceCode.UISourceCode;
+  private aiButtonContainer?: HTMLElement;
 
   constructor(
       navigatorView: NavigatorView, uiSourceCode: Workspace.UISourceCode.UISourceCode, title: string,
@@ -1395,29 +1398,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateIcon(): void {
-    const binding = Persistence.Persistence.PersistenceImpl.instance().binding(this.uiSourceCodeInternal);
-    const networkPersistenceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
-    let iconType = 'document';
-    let iconStyles: string[] = [];
-    if (binding) {
-      if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(binding.fileSystem)) {
-        iconType = 'snippet';
-      }
-      const badgeIsPurple = networkPersistenceManager.project() === binding.fileSystem.project();
-      iconStyles = badgeIsPurple ? ['dot', 'purple'] : ['dot', 'green'];
-    } else if (networkPersistenceManager.isActiveHeaderOverrides(this.uiSourceCode)) {
-      iconStyles = ['dot', 'purple'];
-    } else {
-      if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCodeInternal)) {
-        iconType = 'snippet';
-      }
-    }
-
-    const icon = IconButton.Icon.create(iconType, iconStyles.join(' '));
-    if (binding) {
-      UI.Tooltip.Tooltip.install(
-          icon, Persistence.PersistenceUtils.PersistenceUtils.tooltipForUISourceCode(this.uiSourceCodeInternal));
-    }
+    const icon = PanelUtils.getIconForSourceFile(this.uiSourceCodeInternal);
     this.setLeadingIcons([icon]);
   }
 
@@ -1425,6 +1406,32 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     UI.ARIAUtils.setLabel(this.listItemElement, `${this.uiSourceCodeInternal.name()}, ${this.nodeType}`);
   }
 
+  private createAiButton(): void {
+    if (!UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-floating-button')) {
+      return;
+    }
+    if (!this.uiSourceCode.contentType().isTextType() ||
+        Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCode)) {
+      return;
+    }
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('drjones.sources-floating-button');
+    if (!this.aiButtonContainer) {
+      this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
+      const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        iconName: 'smart-assistant',
+      });
+      floatingButton.addEventListener('click', ev => {
+        ev.stopPropagation();
+        this.navigatorView.sourceSelected(this.uiSourceCode, false);
+        void action.execute();
+      }, {capture: true});
+      floatingButton.addEventListener('mousedown', ev => {
+        ev.stopPropagation();
+      }, {capture: true});
+      this.aiButtonContainer.appendChild(floatingButton);
+    }
+  }
+
   get uiSourceCode(): Workspace.UISourceCode.UISourceCode {
     return this.uiSourceCodeInternal;
   }
@@ -1434,6 +1441,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.addEventListener('click', this.onclick.bind(this), false);
     this.listItemElement.addEventListener('contextmenu', this.handleContextMenuEvent.bind(this), false);
     this.listItemElement.addEventListener('dragstart', this.ondragstart.bind(this), false);
+    this.createAiButton();
   }
 
   private shouldRenameOnMouseDown(): boolean {

package/front_end/panels/sources/SourcesPanel.ts

@@ -206,6 +206,9 @@ export class SourcesPanel extends UI.Panel.Panel implements
   private tabbedLocationHeader?: Element|null;
   private extensionSidebarPanesContainer?: UI.View.ViewLocation;
   sidebarPaneView?: UI.Widget.VBox|UI.SplitWidget.SplitWidget;
+
+  #lastPausedTarget: WeakRef<SDK.Target.Target>|null = null;
+
   constructor() {
     super('sources');
 
@@ -483,6 +486,16 @@ export class SourcesPanel extends UI.Panel.Panel implements
     UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.DebuggerPausedDetails, details);
     this.toggleDebuggerSidebarButton.setEnabled(false);
     this.revealDebuggerSidebar();
+    const pausedTarget = details.debuggerModel.target();
+    if (this.threadsSidebarPane && this.#lastPausedTarget?.deref() !== pausedTarget &&
+        pausedTarget !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
+      // If we pause in something other than the main frame (e.g. worker), we should expand the
+      // "Threads" list to make it more clear which target is paused. We do this only if the target of
+      // the previous pause is different from the new pause to prevent annoying the user by re-opening
+      // the "Threads" list while stepping or hitting the same breakpoint multiple points.
+      void this.sidebarPaneStack?.showView(this.threadsSidebarPane);
+    }
+
     window.focus();
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
     const withOverlay = UI.Context.Context.instance().flavor(SDK.Target.Target)?.model(SDK.OverlayModel.OverlayModel) &&
@@ -498,6 +511,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
           this.overlayLoggables.stepOverButton, `${VisualLogging.action('debugger.step-over')}`,
           this.overlayLoggables.debuggerPausedMessage);
     }
+    this.#lastPausedTarget = new WeakRef(details.debuggerModel.target());
   }
 
   private maybeLogOverlayAction(): void {
@@ -905,12 +919,6 @@ export class SourcesPanel extends UI.Panel.Panel implements
       SDK.NetworkRequest.NetworkRequest|UISourceCodeFrame): void {
     if (target instanceof Workspace.UISourceCode.UISourceCode) {
       this.appendUISourceCodeItems(event, contextMenu, target);
-      if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-panel-context')) {
-        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, target);
-        contextMenu.headerSection().appendAction(
-            'drjones.sources-panel-context',
-        );
-      }
       return;
     }
     if (target instanceof UISourceCodeFrame) {
@@ -945,6 +953,17 @@ export class SourcesPanel extends UI.Panel.Panel implements
             jslogContext: 'sources.reveal-in-navigator-sidebar',
           });
     }
+
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.sources-panel-context')) {
+      const editorElement = this.element.querySelector('devtools-text-editor');
+      if (!eventTarget.isSelfOrDescendant(editorElement) && uiSourceCode.contentType().isTextType()) {
+        UI.Context.Context.instance().setFlavor(Workspace.UISourceCode.UISourceCode, uiSourceCode);
+        contextMenu.headerSection().appendAction(
+            'drjones.sources-panel-context',
+        );
+      }
+    }
+
     // Ignore list only works for JavaScript debugging.
     if (uiSourceCode.contentType().hasScripts() &&
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()

package/front_end/panels/sources/SourcesView.test.ts

@@ -93,6 +93,7 @@ describeWithEnvironment('SourcesView', () => {
         {} as Persistence.FileSystemWorkspaceBinding.FileSystem,
         'file:///path/to/overrides/www.example.com/.headers' as Platform.DevToolsPath.UrlString,
         Common.ResourceType.resourceTypes.Document);
+    sinon.stub(uiSourceCode, 'mimeType').returns('text/plain');
     sourcesView.viewForFile(uiSourceCode);
     assert.isTrue(sourcesView.getSourceView(uiSourceCode) instanceof SourcesComponents.HeadersView.HeadersView);
   });

package/front_end/panels/sources/SourcesView.ts

@@ -367,9 +367,9 @@ export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     let sourceView;
     const contentType = uiSourceCode.contentType();
 
-    if (contentType === Common.ResourceType.resourceTypes.Image) {
+    if (contentType === Common.ResourceType.resourceTypes.Image || uiSourceCode.mimeType().startsWith('image/')) {
       sourceView = new SourceFrame.ImageView.ImageView(uiSourceCode.mimeType(), uiSourceCode);
-    } else if (contentType === Common.ResourceType.resourceTypes.Font) {
+    } else if (contentType === Common.ResourceType.resourceTypes.Font || uiSourceCode.mimeType().includes('font')) {
       sourceView = new SourceFrame.FontView.FontView(uiSourceCode.mimeType(), uiSourceCode);
     } else if (uiSourceCode.name() === HEADER_OVERRIDES_FILENAME) {
       sourceView = new Components.HeadersView.HeadersView(uiSourceCode);

package/front_end/panels/sources/components/BreakpointsView.ts

@@ -535,7 +535,6 @@ export class BreakpointsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     void this.#controller.update();
   }
 
-  static readonly litTagName = LitHtml.literal`devtools-breakpoint-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #pauseOnUncaughtExceptions: boolean = false;

package/front_end/panels/sources/components/HeadersView.ts

@@ -128,7 +128,6 @@ export interface HeadersViewComponentData {
 }
 
 export class HeadersViewComponent extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[] = [];

package/front_end/panels/sources/navigatorTree.css

@@ -61,6 +61,17 @@
   color: var(--icon-file-script);
 }
 
+.navigator-file-tree-item .ai-button-container {
+  display: none;
+  position: absolute;
+  z-index: 999;
+  right: var(--sys-size-3);
+}
+
+.navigator-file-tree-item:hover .ai-button-container {
+  display: inline-flex;
+}
+
 .navigator-file-tree-item devtools-icon.dot::before {
   width: 7px;
   height: 7px;

package/front_end/panels/timeline/AnnotationHelpers.ts

@@ -7,9 +7,9 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 
-import * as TimelineComponents from './components/components.js';
 import type {AnnotationModifiedEvent} from './ModificationsManager.js';
 import type * as Overlays from './overlays/overlays.js';
+import * as Utils from './utils/utils.js';
 
 const UIStrings = {
   /**
@@ -219,8 +219,8 @@ export function ariaAnnouncementForModifiedEvent(event: AnnotationModifiedEvent)
     }
     case 'UpdateLinkToEntry': {
       if (isEntriesLink(overlay) && overlay.entryFrom && overlay.entryTo) {
-        const from = TimelineComponents.EntryName.nameForEntry(overlay.entryFrom);
-        const to = TimelineComponents.EntryName.nameForEntry(overlay.entryTo);
+        const from = Utils.EntryName.nameForEntry(overlay.entryFrom);
+        const to = Utils.EntryName.nameForEntry(overlay.entryTo);
         return (i18nString(UIStrings.srEntriesLinked, {PH1: from, PH2: to}));
       }
       break;

package/front_end/panels/timeline/AppenderUtils.ts

@@ -62,8 +62,7 @@ export function buildGroupStyle(extra?: Partial<PerfUI.FlameChart.GroupStyle>):
  */
 export function buildTrackHeader(
     jslogContext: VisualLoggingTrackName|null, startLevel: number, name: string, style: PerfUI.FlameChart.GroupStyle,
-    selectable: boolean, expanded?: boolean, showStackContextMenu?: boolean,
-    legends?: PerfUI.FlameChart.Legend[]): PerfUI.FlameChart.Group {
+    selectable: boolean, expanded?: boolean, showStackContextMenu?: boolean): PerfUI.FlameChart.Group {
   const group: PerfUI.FlameChart.Group = {
     startLevel,
     name: name as Common.UIString.LocalizedString,
@@ -71,7 +70,6 @@ export function buildTrackHeader(
     selectable,
     expanded,
     showStackContextMenu,
-    legends,
   };
   if (jslogContext !== null) {
     group.jslogContext = jslogContext;

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -21,9 +21,9 @@ import {ThreadAppender} from './ThreadAppender.js';
 import {
   EntryType,
   InstantEventVisibleDurationMs,
-  type TimelineFlameChartEntry,
 } from './TimelineFlameChartDataProvider.js';
 import {TimingsTrackAppender} from './TimingsTrackAppender.js';
+import * as TimelineUtils from './utils/utils.js';
 
 export type HighlightedEntryInfo = {
   title: string,
@@ -32,6 +32,17 @@ export type HighlightedEntryInfo = {
   additionalElement?: HTMLElement,
 };
 
+let showPostMessageEvents: boolean|undefined;
+function isShowPostMessageEventsEnabled(): boolean {
+  // Everytime the experiment is toggled devtools is reloaded so the
+  // cache is updated automatically.
+  if (showPostMessageEvents === undefined) {
+    showPostMessageEvents =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
+  }
+  return showPostMessageEvents;
+}
+
 export function entryIsVisibleInTimeline(
     entry: Trace.Types.Events.Event, parsedTrace?: Trace.Handlers.Types.ParsedTrace): boolean {
   if (parsedTrace && parsedTrace.Meta.traceIsGeneric) {
@@ -49,9 +60,10 @@ export function entryIsVisibleInTimeline(
     return true;
   }
 
-  // Gate the visibility of post message events behind the experiement flag
-  if (Trace.Types.Events.isSchedulePostMessage(entry) || Trace.Types.Events.isHandlePostMessage(entry)) {
-    return Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_SHOW_POST_MESSAGE_EVENTS);
+  if (isShowPostMessageEventsEnabled()) {
+    if (Trace.Types.Events.isSchedulePostMessage(entry) || Trace.Types.Events.isHandlePostMessage(entry)) {
+      return true;
+    }
   }
 
   if (Trace.Types.Extensions.isSyntheticExtensionEntry(entry) || Trace.Types.Events.isSyntheticServerTiming(entry)) {
@@ -60,7 +72,7 @@ export function entryIsVisibleInTimeline(
 
   // Default styles are globally defined for each event name. Some
   // events are hidden by default.
-  const eventStyle = TimelineComponents.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name);
+  const eventStyle = TimelineUtils.EntryStyles.getEventStyle(entry.name as Trace.Types.Events.Name);
   const eventIsTiming = Trace.Types.Events.isConsoleTime(entry) || Trace.Types.Events.isPerformanceMeasure(entry) ||
       Trace.Types.Events.isPerformanceMark(entry);
 
@@ -175,7 +187,7 @@ export class CompatibilityTracksAppender {
   #trackEventsForTreeview = new Map<TrackAppender, Trace.Types.Events.Event[]>();
   #flameChartData: PerfUI.FlameChart.FlameChartTimelineData;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
-  #entryData: TimelineFlameChartEntry[];
+  #entryData: Trace.Types.Events.Event[];
   #colorGenerator: Common.Color.Generator;
   #allTrackAppenders: TrackAppender[] = [];
   #visibleTrackNames: Set<TrackAppenderName> = new Set([...TrackNames]);
@@ -204,7 +216,7 @@ export class CompatibilityTracksAppender {
    */
   constructor(
       flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      entryData: TimelineFlameChartEntry[], legacyEntryTypeByLevel: EntryType[]) {
+      entryData: Trace.Types.Events.Event[], legacyEntryTypeByLevel: EntryType[]) {
     this.#flameChartData = flameChartData;
     this.#parsedTrace = parsedTrace;
     this.#entryData = entryData;
@@ -244,7 +256,7 @@ export class CompatibilityTracksAppender {
   }
 
   setFlameChartDataAndEntryData(
-      flameChartData: PerfUI.FlameChart.FlameChartTimelineData, entryData: TimelineFlameChartEntry[],
+      flameChartData: PerfUI.FlameChart.FlameChartTimelineData, entryData: Trace.Types.Events.Event[],
       legacyEntryTypeByLevel: EntryType[]): void {
     this.#trackForGroup.clear();
     this.#flameChartData = flameChartData;
@@ -628,7 +640,7 @@ export class CompatibilityTracksAppender {
     if (track.titleForEvent) {
       return track.titleForEvent(event);
     }
-    return TimelineComponents.EntryName.nameForEntry(event, this.#parsedTrace);
+    return TimelineUtils.EntryName.nameForEntry(event, this.#parsedTrace);
   }
   /**
    * Returns the info shown when an event in the timeline is hovered.