chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/settings/settingsScreen.css

@@ -17,54 +17,8 @@
   flex: auto;
 }
 
-.settings-container {
-  width: 100%;
-  column-width: 288px;
-}
-
-.settings-block {
-  display: block;
-  padding-bottom: 9px;
-  width: 288px;
-  break-inside: avoid;
-}
-
-.settings-tab.settings-container {
-  column-width: 308px;
-}
-
-.settings-tab .settings-block {
-  margin-left: 20px;
-}
-
-.settings-line {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-}
-
-.settings-key-cell {
-  display: inline-block;
-  width: 153px;
-  white-space: nowrap;
-  text-align: right;
-  vertical-align: middle;
-  padding-right: 6px;
-}
-
-.settings-cell {
-  display: inline-block;
-  width: 135px;
-  vertical-align: middle;
-}
-
-.settings-section-title {
-  font-size: 120%;
-  text-align: left;
-}
-
-.settings-combine-keys {
-  margin: 0 0.3em;
-  font-size: 9px;
+.settings-experiments-block {
+  padding: 0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-4);
 }
 
 fieldset {
@@ -81,36 +35,20 @@ fieldset {
 
 label {
   padding-right: 8px;
-  padding-bottom: 8px;
 }
 
 .experiments-filter label {
   padding-bottom: 0;
 }
 
-.settings-tab p {
-  margin: 6px 0;
-}
-
-.settings-block p p {
-  padding-left: 30px;
-}
-
 .settings-select {
   align-items: center;
   display: grid;
+  row-gap: var(--sys-size-3);
 }
 
-.settings-experiments-warning-subsection-warning {
-  color: var(--sys-color-error);
-}
-
-.settings-experiments-warning-subsection-message {
-  color: inherit;
-}
-
-.settings-content input[type="checkbox"] {
-  margin: 1px 7px 1px 2px;
+div:has(.settings-select) + div:has(.settings-select) {
+  padding-top: var(--sys-size-5);
 }
 
 .settings-window-label-element {
@@ -133,32 +71,12 @@ label {
   }
 }
 
-.settings-container-wrapper {
-  position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
-  padding-top: 9px;
-  border-top: 1px solid var(--sys-color-divider);
-}
-
 .settings-card-container-wrapper {
-  padding-top: var(--sys-size-8);
+  scrollbar-gutter: stable;
+  padding-bottom: 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;
-  }
+  position: absolute;
+  inset: var(--sys-size-8) 0 0;
 }
 
 .settings-card-container {
@@ -168,49 +86,33 @@ label {
   gap: var(--sys-size-9);
 }
 
-.settings-tab.settings-content {
-  margin: 0;
-  padding: 0;
-}
-
-.settings-tab-container {
-  flex: auto;
-  overflow: hidden;
-}
-
-.settings-tab-container header {
-  padding: 0 0 6px;
-}
-
-#experiments-tab-content .settings-container {
-  column-width: auto;
-}
+.settings-multicolumn-card-container {
+  column-width: var(--sys-size-32);
+  column-gap: var(--sys-size-11);
 
-#experiments-tab-content .settings-block {
-  width: auto;
-  margin-left: 0;
-  margin-right: 10px;
-}
+  > * + * {
+    margin-top: var(--sys-size-8);
+  }
 
-.settings-tab-container header > h1 {
-  font-size: 18px;
-  font-weight: normal;
-  margin: 0;
-  padding-bottom: 3px;
-  white-space: nowrap;
+  > devtools-button {
+    margin-left: var(--sys-size-5);
+  }
 }
 
-.settings-tab .settings-section-title {
-  margin-left: -20px;
-  color: var(--sys-color-on-surface-subtle);
+.settings-card-container-wrapper select {
+  margin-left: 10px;
+  width: var(--sys-size-28);
 }
 
-.settings-tab select {
-  margin-left: 10px;
-  width: 80%;
+.settings-card-container-wrapper setting-checkbox { /* stylelint-disable-line selector-type-no-unknown */
+  min-height: var(--sys-size-13);
+  position: relative;
+  left: calc(var(--sys-size-4) * -1);
 }
 
 .settings-experiment {
+  margin: 0;
+  min-height: var(--sys-size-13);
   display: grid;
   grid-template-columns: auto min-content auto 1fr;
 
@@ -244,6 +146,16 @@ devtools-button.link-icon {
   overflow: visible !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.experiments-warning-subsection {
+  display: flex;
+  align-items: center;
+
+  > devtools-icon {
+    color: var(--sys-color-orange-bright);
+    margin-right: var(--sys-size-4);
+  }
+}
+
 @media (forced-colors: active) {
   .settings-window-title {
     color: canvastext;

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -202,11 +202,11 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     }
   }
 
-  private update(): void {
+  override update(): void {
     void this.updateThrottler.schedule(() => this.doUpdate());
   }
 
-  private async doUpdate(): Promise<void> {
+  override async doUpdate(): Promise<void> {
     this.locationPool.disposeAll();
 
     this.callFrameWarningsElement.classList.add('hidden');

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -566,18 +566,23 @@ export class DebuggerPlugin extends Plugin {
       scriptFile.addSourceMapURL(url);
     }
 
-    function addDebugInfoURL(scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
+    function addDebugInfoURL(
+        this: DebuggerPlugin, scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
       const dialog =
-          AddDebugInfoURLDialog.createAddDWARFSymbolsURLDialog(addDebugInfoURLDialogCallback.bind(null, scriptFile));
+          AddDebugInfoURLDialog.createAddDWARFSymbolsURLDialog(addDebugInfoURLDialogCallback.bind(this, scriptFile));
       dialog.show();
     }
 
     function addDebugInfoURLDialogCallback(
-        scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile, url: Platform.DevToolsPath.UrlString): void {
+        this: DebuggerPlugin, scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile,
+        url: Platform.DevToolsPath.UrlString): void {
       if (!url) {
         return;
       }
       scriptFile.addDebugInfoURL(url);
+      if (scriptFile.script?.debuggerModel) {
+        this.updateScriptFile(scriptFile.script?.debuggerModel);
+      }
     }
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
@@ -593,7 +598,7 @@ export class DebuggerPlugin extends Plugin {
             !Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().pluginManager.hasPluginForScript(
                 scriptFile.script)) {
           contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.addWasmDebugInfo), addDebugInfoURL.bind(null, scriptFile),
+              i18nString(UIStrings.addWasmDebugInfo), addDebugInfoURL.bind(this, scriptFile),
               {jslogContext: 'add-wasm-debug-info'});
         }
       }

package/front_end/panels/sources/NavigatorView.ts

@@ -1418,6 +1418,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     if (!this.aiButtonContainer) {
       this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
       const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        title: action.title(),
         iconName: 'smart-assistant',
       });
       floatingButton.addEventListener('click', ev => {
@@ -1766,7 +1767,7 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
     }
   }
 
-  rename(callback?: ((arg0: boolean) => void)): void {
+  rename(callback?: ((committed: boolean) => void)): void {
     if (!this.treeElement) {
       return;
     }
@@ -1781,21 +1782,19 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
     const treeOutlineElement = this.treeElement.treeOutline.element;
     UI.UIUtils.markBeingEdited(treeOutlineElement, true);
 
-    function commitHandler(
-        this: NavigatorUISourceCodeTreeNode, element: Element, newTitle: string, oldTitle: string): void {
+    const commitHandler = (_element: Element, newTitle: string, oldTitle: string|null): void => {
       if (newTitle !== oldTitle) {
         if (this.treeElement) {
           this.treeElement.title = newTitle;
         }
         // necessary cast to RawPathString as alternative would be altering type of Config<T>
-        void this.uiSourceCodeInternal.rename(newTitle as Platform.DevToolsPath.RawPathString)
-            .then(renameCallback.bind(this));
+        void this.uiSourceCodeInternal.rename(newTitle as Platform.DevToolsPath.RawPathString).then(renameCallback);
         return;
       }
-      afterEditing.call(this, true);
-    }
+      afterEditing(true);
+    };
 
-    function renameCallback(this: NavigatorUISourceCodeTreeNode, success: boolean): void {
+    const renameCallback = (success: boolean): void => {
       if (!success) {
         UI.UIUtils.markBeingEdited(treeOutlineElement, false);
         this.updateTitle();
@@ -1810,20 +1809,20 @@ export class NavigatorUISourceCodeTreeNode extends NavigatorTreeNode {
           this.treeElement.select();
         }
       }
-      afterEditing.call(this, true);
-    }
+      afterEditing(true);
+    };
 
-    function afterEditing(this: NavigatorUISourceCodeTreeNode, committed: boolean): void {
+    const afterEditing = (committed: boolean): void => {
       UI.UIUtils.markBeingEdited(treeOutlineElement, false);
       this.updateTitle();
       if (callback) {
         callback(committed);
       }
-    }
+    };
 
     this.updateTitle(true);
     this.treeElement.startEditingTitle(
-        new UI.InplaceEditor.Config(commitHandler.bind(this), afterEditing.bind(this, false)));
+        new UI.InplaceEditor.Config(commitHandler, () => afterEditing(false), undefined));
   }
 }
 

package/front_end/panels/sources/navigatorTree.css

@@ -127,7 +127,7 @@
   }
 
   .tree-outline li:hover:not(.selected) .selection,
-  .tree-outline li:hover:not(:has(span[is="dt-checkbox"])) .selection {
+  .tree-outline li:hover:not(:has(dt-checkbox)) .selection {
     forced-color-adjust: none;
     background-color: Highlight;
   }

package/front_end/panels/sources/sourcesPanel.css

@@ -56,13 +56,13 @@
   margin-top: 0;
 }
 
-.scripts-debug-toolbar-drawer > [is="dt-checkbox"] {
+.scripts-debug-toolbar-drawer > dt-checkbox {
   display: none;
   padding-left: 3px;
   height: 28px;
 }
 
-.scripts-debug-toolbar-drawer.expanded > [is="dt-checkbox"] {
+.scripts-debug-toolbar-drawer.expanded > dt-checkbox {
   display: flex;
 }
 

package/front_end/panels/timeline/ActiveFilters.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import type * as Trace from '../../models/trace/trace.js';
 
 let instance: ActiveFilters|null = null;
@@ -23,13 +22,13 @@ export class ActiveFilters {
     instance = null;
   }
 
-  #activeFilters: TimelineModel.TimelineModelFilter.TimelineModelFilter[] = [];
+  #activeFilters: Trace.Extras.TraceFilter.TraceFilter[] = [];
 
-  activeFilters(): readonly TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  activeFilters(): readonly Trace.Extras.TraceFilter.TraceFilter[] {
     return this.#activeFilters;
   }
 
-  setFilters(newFilters: TimelineModel.TimelineModelFilter.TimelineModelFilter[]): void {
+  setFilters(newFilters: Trace.Extras.TraceFilter.TraceFilter[]): void {
     this.#activeFilters = newFilters;
   }
 

package/front_end/panels/timeline/AnimationsTrackAppender.ts

@@ -7,10 +7,9 @@ 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 {addDecorationToEvent, buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
+import {addDecorationToEvent, buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -58,8 +57,7 @@ export class AnimationsTrackAppender implements TrackAppender {
 
   #eventAppendedCallbackFunction(event: Trace.Types.Events.Event, index: number): void {
     if (event && Trace.Types.Events.isSyntheticAnimation(event)) {
-      const CLSInsight = Trace.Insights.InsightRunners.CumulativeLayoutShift;
-      const failures = CLSInsight.getNonCompositedFailure(event);
+      const failures = Trace.Insights.Models.CLSCulprits.getNonCompositedFailure(event);
       if (failures.length) {
         addDecorationToEvent(this.#compatibilityBuilder.getFlameChartTimelineData(), index, {
           type: PerfUI.FlameChart.FlameChartDecorationType.WARNING_TRIANGLE,
@@ -76,9 +74,4 @@ export class AnimationsTrackAppender implements TrackAppender {
     const {displayName} = event.args.data.beginEvent.args.data;
     return displayName || event.name;
   }
-
-  highlightedEntryInfo(event: Trace.Types.Events.SyntheticAnimationPair): HighlightedEntryInfo {
-    const title = this.titleForEvent(event);
-    return {title, formattedTime: getFormattedTime(event.dur)};
-  }
 }

package/front_end/panels/timeline/AppenderUtils.ts

@@ -81,7 +81,7 @@ export function buildTrackHeader(
  * Returns the time info shown when an event is hovered in the timeline.
  * @param totalTime the total time of the hovered event.
  * @param selfTime the self time of the hovered event.
- * @returns the formatted time string for highlightedEntryInfo
+ * @returns the formatted time string for popoverInfo
  */
 export function getFormattedTime(
     totalTime?: Trace.Types.Timing.MicroSeconds, selfTime?: Trace.Types.Timing.MicroSeconds): string {

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -25,11 +26,12 @@ import {
 import {TimingsTrackAppender} from './TimingsTrackAppender.js';
 import * as TimelineUtils from './utils/utils.js';
 
-export type HighlightedEntryInfo = {
+export type PopoverInfo = {
   title: string,
   formattedTime: string,
-  warningElements?: HTMLSpanElement[],
-  additionalElement?: HTMLElement,
+  url: string|null,
+  warningElements: HTMLSpanElement[],
+  additionalElements: HTMLElement[],
 };
 
 let showPostMessageEvents: boolean|undefined;
@@ -124,9 +126,9 @@ export interface TrackAppender {
    */
   titleForEvent?(event: Trace.Types.Events.Event): string;
   /**
-   * Returns the info shown when an event in the timeline is hovered.
+   * Updates the standard popover (AKA tooltip) some appender specific details.
    */
-  highlightedEntryInfo?(event: Trace.Types.Events.Event): Partial<HighlightedEntryInfo>;
+  setPopoverInfo?(event: Trace.Types.Events.Event, info: PopoverInfo): void;
   /**
    * Returns the a callback function to draw an event to overrides the normal rectangle draw operation.
    */
@@ -645,47 +647,42 @@ export class CompatibilityTracksAppender {
   /**
    * Returns the info shown when an event in the timeline is hovered.
    */
-  highlightedEntryInfo(event: Trace.Types.Events.Event, level: number): HighlightedEntryInfo {
+  popoverInfo(event: Trace.Types.Events.Event, level: number): PopoverInfo {
     const track = this.#trackForLevel.get(level);
     if (!track) {
       throw new Error('Track not found for level');
     }
 
-    // Add any warnings information to the tooltip. Done here to avoid duplicating this call in every appender.
-    // By doing this here, we ensure that any warnings that are
-    // added to the WarningsHandler are automatically used and added
-    // to the tooltip.
-    const warningElements: HTMLSpanElement[] =
-        TimelineComponents.DetailsView.buildWarningElementsForEvent(event, this.#parsedTrace);
-
-    let title = this.titleForEvent(event, level);
-    let formattedTime = getFormattedTime(event.dur);
-    let additionalElement;
-
-    // If the track defines a custom highlight, call it and use its values.
-    if (track.highlightedEntryInfo) {
-      const {
-        title: customTitle,
-        formattedTime: customFormattedTime,
-        warningElements: extraWarningElements,
-        additionalElement: element,
-      } = track.highlightedEntryInfo(event);
-      if (customTitle) {
-        title = customTitle;
-      }
-      if (customFormattedTime) {
-        formattedTime = customFormattedTime;
-      }
-      if (extraWarningElements) {
-        warningElements.push(...extraWarningElements);
-      }
-      additionalElement = element;
-    }
-    return {
-      title,
-      formattedTime,
-      warningElements,
-      additionalElement,
+    // Defaults here, though tracks may chose to redefine title/formattedTime
+    const info: PopoverInfo = {
+      title: this.titleForEvent(event, level),
+      formattedTime: getFormattedTime(event.dur),
+      warningElements: TimelineComponents.DetailsView.buildWarningElementsForEvent(event, this.#parsedTrace),
+      additionalElements: [],
+      url: null,
     };
+
+    // If the track defines its own popoverInfo(), it'll update values within
+    if (track.setPopoverInfo) {
+      track.setPopoverInfo(event, info);
+    }
+
+    // If there's a url associated, add into additionalElements
+    const url = URL.parse(
+        info.url ?? TimelineUtils.SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(this.#parsedTrace, event) ??
+        '');
+    if (url) {
+      const MAX_PATH_LENGTH = 45;
+      const MAX_ORIGIN_LENGTH = 30;
+      const path = Platform.StringUtilities.trimMiddle(url.href.replace(url.origin, ''), MAX_PATH_LENGTH);
+      const origin =
+          Platform.StringUtilities.trimEndWithMaxLength(url.origin.replace('https://', ''), MAX_ORIGIN_LENGTH);
+      const urlElems = document.createElement('div');
+      urlElems.createChild('span', 'popoverinfo-url-path').textContent = path;
+      urlElems.createChild('span', 'popoverinfo-url-origin').textContent = `(${origin})`;
+      info.additionalElements.push(urlElems);
+    }
+
+    return info;
   }
 }

package/front_end/panels/timeline/CountersGraph.ts

@@ -141,8 +141,7 @@ export class CountersGraph extends UI.Widget.VBox {
     this.countersByName.set(
         'jsHeapSizeUsed',
         this.createCounter(
-            i18nString(UIStrings.jsHeap), 'js-heap-size-used', 'hsl(220, 90%, 43%)',
-            Platform.NumberUtilities.bytesToString));
+            i18nString(UIStrings.jsHeap), 'js-heap-size-used', 'hsl(220, 90%, 43%)', i18n.ByteUtilities.bytesToString));
     this.countersByName.set(
         'documents', this.createCounter(i18nString(UIStrings.documents), 'documents', 'hsl(0, 90%, 43%)'));
     this.countersByName.set('nodes', this.createCounter(i18nString(UIStrings.nodes), 'nodes', 'hsl(120, 90%, 43%)'));
@@ -151,8 +150,7 @@ export class CountersGraph extends UI.Widget.VBox {
         this.createCounter(i18nString(UIStrings.listeners), 'js-event-listeners', 'hsl(38, 90%, 43%)'));
 
     this.gpuMemoryCounter = this.createCounter(
-        i18nString(UIStrings.gpuMemory), 'gpu-memory-used-kb', 'hsl(300, 90%, 43%)',
-        Platform.NumberUtilities.bytesToString);
+        i18nString(UIStrings.gpuMemory), 'gpu-memory-used-kb', 'hsl(300, 90%, 43%)', i18n.ByteUtilities.bytesToString);
     this.countersByName.set('gpuMemoryUsedKB', this.gpuMemoryCounter);
 
     TraceBounds.TraceBounds.onChange(this.#onTraceBoundsChangeBound);

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
-import type * as TimelineModel from '../../models/timeline_model/timeline_model.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -41,7 +40,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class EventsTimelineTreeView extends TimelineTreeView {
   private readonly filtersControl: Filters;
   private readonly delegate: TimelineModeViewDelegate;
-  private currentTree!: TimelineModel.TimelineProfileTree.Node;
+  private currentTree!: Trace.Extras.TraceTree.Node;
   constructor(delegate: TimelineModeViewDelegate) {
     super();
     this.element.setAttribute('jslog', `${VisualLogging.pane('event-log').track({resize: true})}`);
@@ -53,7 +52,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     this.splitWidget.showBoth();
   }
 
-  override filters(): TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  override filters(): Trace.Extras.TraceFilter.TraceFilter[] {
     return [...super.filters(), ...this.filtersControl.filters()];
   }
 
@@ -64,7 +63,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     }
   }
 
-  override buildTree(): TimelineModel.TimelineProfileTree.Node {
+  override buildTree(): Trace.Extras.TraceTree.Node {
     this.currentTree = this.buildTopDownTree(true, null);
     return this.currentTree;
   }
@@ -78,7 +77,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     }
   }
 
-  private findNodeWithEvent(event: Trace.Types.Events.Event): TimelineModel.TimelineProfileTree.Node|null {
+  private findNodeWithEvent(event: Trace.Types.Events.Event): Trace.Extras.TraceTree.Node|null {
     if (event.name === Trace.Types.Events.Name.RUN_TASK) {
       // No node is ever created for the top level RunTask event, so
       // bail out preemptively
@@ -132,7 +131,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     this.filtersControl.populateToolbar(toolbar);
   }
 
-  override showDetailsForNode(node: TimelineModel.TimelineProfileTree.Node): boolean {
+  override showDetailsForNode(node: Trace.Extras.TraceTree.Node): boolean {
     const parsedTrace = this.parsedTrace();
     if (!parsedTrace) {
       return false;
@@ -146,7 +145,7 @@ export class EventsTimelineTreeView extends TimelineTreeView {
     return true;
   }
 
-  override onHover(node: TimelineModel.TimelineProfileTree.Node|null): void {
+  override onHover(node: Trace.Extras.TraceTree.Node|null): void {
     this.delegate.highlightEvent(node && node.event);
   }
 }
@@ -162,7 +161,7 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     this.filtersInternal = [this.categoryFilter, this.durationFilter];
   }
 
-  filters(): TimelineModel.TimelineModelFilter.TimelineModelFilter[] {
+  filters(): Trace.Extras.TraceFilter.TraceFilter[] {
     return this.filtersInternal;
   }
 

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -5,10 +5,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
+import {buildGroupStyle, buildTrackHeader} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -100,17 +99,9 @@ export class ExtensionTrackAppender implements TrackAppender {
   }
 
   titleForEvent(event: Trace.Types.Events.Event): string {
+    if (Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText) {
+      return event.args.tooltipText;
+    }
     return event.name;
   }
-
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
-    const title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
-        event.args.tooltipText :
-        this.titleForEvent(event);
-    return {title, formattedTime: getFormattedTime(event.dur)};
-  }
 }