chrome-devtools-frontend 1.0.1721762 → 1.0.1724140

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -4,155 +4,170 @@
  * found in the LICENSE file.
  */
 
-.root {
-  color: var(--sys-color-on-surface);
-  width: 100%;
-}
+@scope to (devtools-widget > *) {
+  /* Host styles can now reach the elements of this form. For example,
+   * the inspector common styles set "box-sizing: border-box" on all
+   * elements, and ListWidget editors set margins on all inputs. Restore
+   * the default box sizing and input margins of the browser. */
+  :scope * {
+    box-sizing: revert;
+  }
 
-.tree-title {
-  font-weight: 700;
-  display: flex;
-  align-items: center;
+  :scope input {
+    margin: revert;
+  }
 
-  & > [aria-controls="form-container"] {
-    margin-left: var(--sys-size-2);
-    padding-right: var(--sys-size-3);
+  .root {
+    color: var(--sys-color-on-surface);
+    width: 100%;
+  }
 
-    & > [name="triangle-right"],
-    & > [name="triangle-down"] {
-      vertical-align: bottom;
-    }
+  .tree-title {
+    font-weight: 700;
+    display: flex;
+    align-items: center;
 
-    &[aria-expanded="true"] > [name="triangle-right"] {
-      display: none;
-    }
+    & > [aria-controls="form-container"] {
+      margin-left: var(--sys-size-2);
+      padding-right: var(--sys-size-3);
+
+      & > [name="triangle-right"],
+      & > [name="triangle-down"] {
+        vertical-align: bottom;
+      }
 
-    &[aria-expanded="false"] > [name="triangle-down"] {
-      display: none;
+      &[aria-expanded="true"] > [name="triangle-right"] {
+        display: none;
+      }
+
+      &[aria-expanded="false"] > [name="triangle-down"] {
+        display: none;
+      }
     }
   }
-}
-
-.form-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr auto;
-  align-items: center;
-  gap: var(--sys-size-5) 10px;
-  padding: 0 10px;
-}
 
-.full-row {
-  grid-column: 1 / 5;
-}
+  .form-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr auto;
+    align-items: center;
+    gap: var(--sys-size-5) 10px;
+    padding: 0 10px;
+  }
 
-.form-factors-checkbox-group {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--sys-size-4) 10px;
-}
+  .full-row {
+    grid-column: 1 / 5;
+  }
 
-.form-factor-checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-size-4);
-  white-space: nowrap;
-}
+  .form-factors-checkbox-group {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--sys-size-4) 10px;
+  }
 
-hr.section-separator {
-  grid-column: 1 / 5; /* Ensures the separator spans all columns */
-  border: none;
-  margin-top: var(--sys-size-1);
-}
+  .form-factor-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-4);
+    white-space: nowrap;
+  }
 
-.half-row {
-  grid-column: span 2;
-}
+  hr.section-separator {
+    grid-column: 1 / 5; /* Ensures the separator spans all columns */
+    border: none;
+    margin-top: var(--sys-size-1);
+  }
 
-.mobile-checkbox-container {
-  display: flex;
-}
+  .half-row {
+    grid-column: span 2;
+  }
 
-.device-model-input {
-  grid-column: 1 / 4;
-}
+  .mobile-checkbox-container {
+    display: flex;
+  }
 
-.input-field {
-  color: var(--sys-color-on-surface);
-  padding: 3px var(--sys-size-4);
-  border-radius: var(--sys-size-2);
-  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
-  background-color: var(--sys-color-cdt-base-container);
-  font-size: inherit;
-  height: 18px;
-}
+  .device-model-input {
+    grid-column: 1 / 4;
+  }
 
-.input-field::placeholder {
-    color: var(--sys-color-on-surface-subtle);
-}
+  .input-field {
+    color: var(--sys-color-on-surface);
+    padding: 3px var(--sys-size-4);
+    border-radius: var(--sys-size-2);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+    background-color: var(--sys-color-cdt-base-container);
+    font-family: inherit;
+    font-size: inherit;
+    height: 18px;
+  }
 
-.input-field:focus {
-  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
-  outline-style: none;
-}
+  .input-field::placeholder {
+      color: var(--sys-color-on-surface-subtle);
+  }
 
-.add-container {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--sys-size-4);
-}
+  .input-field:focus {
+    border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
+    outline-style: none;
+  }
 
-.add-icon {
-  margin-right: 5px;
-}
+  .add-container {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-4);
+  }
 
-.brand-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  justify-content: space-between;
-}
+  .add-icon {
+    margin-right: 5px;
+  }
 
-.brand-row > input {
-  width: 100%;
-}
+  .brand-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    justify-content: space-between;
+  }
 
-.info-icon {
-  margin-left: 5px;
-  margin-right: var(--sys-size-1);
-  height: var(--sys-size-8);
-  width: var(--sys-size-8);
-}
+  .brand-row > input {
+    width: 100%;
+  }
 
-.link,
-.devtools-link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: var(--sys-size-2);
-  font-weight: 400;
-}
+  .info-icon {
+    margin-left: 5px;
+    margin-right: var(--sys-size-1);
+    height: var(--sys-size-8);
+    width: var(--sys-size-8);
+  }
 
-devtools-icon + .link {
-  margin-inline-start: var(--sys-size-2);
-}
+  .link,
+  .devtools-link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: var(--sys-size-2);
+    font-weight: 400;
+  }
 
-.hide-container {
-  display: none;
-}
+  devtools-icon + .link {
+    margin-inline-start: var(--sys-size-2);
+  }
 
-.input-field-label-container {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+  .hide-container {
+    display: none;
+  }
 
-@media (forced-colors: active) {
-  .input-field {
-    border: var(--sys-size-1) solid;
+  .input-field-label-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
   }
 
-  .tree-title[aria-disabled="true"] {
-    color: GrayText;
+  @media (forced-colors: active) {
+    .input-field {
+      border: var(--sys-size-1) solid;
+    }
+
+    .tree-title[aria-disabled="true"] {
+      color: GrayText;
+    }
   }
 }

package/front_end/panels/sources/SourcesPanel.ts

@@ -916,7 +916,9 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
   #editorClosed({data: {uiSourceCode}}: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): void {
     const context = UI.Context.Context.instance();
-    if (context.flavor(Workspace.UISourceCode.UISourceCode) === uiSourceCode) {
+    const currentFlavor = context.flavor(Workspace.UISourceCode.UISourceCode);
+    const flavorScriptId = currentFlavor?.canonicalScriptId();
+    if (currentFlavor === uiSourceCode || (flavorScriptId && flavorScriptId === uiSourceCode.canonicalScriptId())) {
       context.setFlavor(Workspace.UISourceCode.UISourceCode, null);
     }
   }

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -346,6 +346,7 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
         const icon = !hasLoadError ?
             (PanelCommon.PersistenceUtils.PersistenceUtils.iconForUISourceCode(uiSourceCode) ?? undefined) :
             undefined;
+        const viewSourceCode = this.#tabViewSourceCodes.get(tabId) ?? uiSourceCode;
         return {
           tabId,
           title: titleForFile(uiSourceCode),
@@ -357,8 +358,8 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
           disconnectedAutomaticFileSystemRoot,
           icon,
           widget: (this.#currentFile?.canonicalScriptId() === uiSourceCode.canonicalScriptId()) ?
-              this.#getOrCreateSourceView(this.#currentFile) :
-              this.getCreatedSourceView(uiSourceCode),
+              this.#getOrCreateSourceView(viewSourceCode) :
+              this.getCreatedSourceView(viewSourceCode),
         };
       }),
       activeTabId: this.#currentFile ? this.#tabIdForUISourceCode(this.#currentFile) : undefined,
@@ -457,6 +458,12 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   readonly #tabDelegate: EditorContainerTabDelegate;
   #tabIds: Map<Workspace.UISourceCode.UISourceCode, string>;
   #files: Map<string, Workspace.UISourceCode.UISourceCode>;
+  /**
+   * Maps a tab id to the UISourceCode whose view is currently bound to that
+   * tab. This can differ from the canonical UISourceCode in `#files` when the
+   * tab's view was recycled to show a duplicate script with the same URL.
+   */
+  readonly #tabViewSourceCodes = new Map<string, Workspace.UISourceCode.UISourceCode>();
   readonly #loadErrorFiles = new Set<Workspace.UISourceCode.UISourceCode>();
   #previouslyViewedFilesSetting: Common.Settings.Setting<SerializedHistoryItem[]>;
   #history: History;
@@ -602,7 +609,9 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   }
 
   fileViews(): UI.Widget.Widget[] {
-    return Array.from(this.#files.values()).map(getViewByUISourceCode).filter(Boolean) as UI.Widget.Widget[];
+    return Array.from(this.#files.entries())
+               .map(([tabId, file]) => getViewByUISourceCode(this.#tabViewSourceCodes.get(tabId) ?? file))
+               .filter(Boolean) as UI.Widget.Widget[];
   }
 
   showSourceLocation(uiSourceCode: Workspace.UISourceCode.UISourceCode,
@@ -785,13 +794,30 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     this.#removeViewListeners();
     this.#currentFile = uiSourceCode;
 
+    let tabId: string;
     try {
       // Selecting the tab may cause showFile to be called again, but with the canonical source code,
       // which is not what we want, so we prevent reentrant calls.
       this.#reentrantShow = true;
-      const tabId = this.#tabIds.get(canonicalSourceCode) || this.#appendFileTab(canonicalSourceCode);
+      tabId = this.#tabIds.get(canonicalSourceCode) || this.#appendFileTab(canonicalSourceCode);
       this.#appendHistory(tabId);
 
+      const tabViewSourceCode = this.#tabViewSourceCodes.get(tabId) ?? canonicalSourceCode;
+      const tabView = this.#getOrCreateSourceView(tabViewSourceCode);
+      if (tabView instanceof UISourceCodeFrame && tabViewSourceCode !== uiSourceCode) {
+        // We are showing a different UISourceCode in the same tab (because it has the same URL). This
+        // commonly happens when switching between workers or iframes containing the same code, and while the
+        // contents are usually identical they may not be and it is important to show users when they aren't.
+        this.#recycleUISourceCodeFrame(tabView, uiSourceCode);
+        if (uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.FileSystem) {
+          // Disable editing, because it may confuse users that only one of the copies of this code changes.
+          uiSourceCode.disableEdit();
+        }
+      } else {
+        this.#getOrCreateSourceView(uiSourceCode);
+      }
+      this.#tabViewSourceCodes.set(tabId, uiSourceCode);
+
       this.#scheduleUpdate();
     } finally {
       this.#reentrantShow = false;
@@ -802,23 +828,9 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
     }
 
     const previousView = this.#currentView;
-    if (uiSourceCode) {
-      this.#getOrCreateSourceView(uiSourceCode);
-    }
     this.#currentView = this.visibleView;
     this.#addViewListeners();
 
-    if (this.#currentView instanceof UISourceCodeFrame && this.#currentView.uiSourceCode() !== uiSourceCode) {
-      // We are showing a different UISourceCode in the same tab (because it has the same URL). This
-      // commonly happens when switching between workers or iframes containing the same code, and while the
-      // contents are usually identical they may not be and it is important to show users when they aren't.
-      this.#recycleUISourceCodeFrame(this.#currentView, uiSourceCode);
-      if (uiSourceCode.project().type() !== Workspace.Workspace.projectTypes.FileSystem) {
-        // Disable editing, because it may confuse users that only one of the copies of this code changes.
-        uiSourceCode.disableEdit();
-      }
-    }
-
     const eventData = {
       currentFile: this.#currentFile,
       currentView: this.#currentView,
@@ -954,6 +966,11 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
         tabIds.push(tabId);
       } else {
         this.#removeSourceFrame(uiSourceCode);
+        for (const [k, v] of this.#tabViewSourceCodes) {
+          if (v === uiSourceCode) {
+            this.#tabViewSourceCodes.delete(k);
+          }
+        }
       }
       for (const [k, v] of this.#uriToUISourceCode) {
         if (v === uiSourceCode) {
@@ -999,6 +1016,7 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   #appendFileTab(uiSourceCode: Workspace.UISourceCode.UISourceCode, index?: number, ignoreHistory?: boolean): string {
     const tabId = this.#generateTabId();
     this.#tabIds.set(uiSourceCode, tabId);
+    this.#tabViewSourceCodes.set(tabId, uiSourceCode);
 
     if (index !== undefined) {
       const entries = Array.from(this.#files.entries());
@@ -1065,6 +1083,11 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
       this.#currentView = null;
       this.#currentFile = null;
     }
+    const viewSourceCode = this.#tabViewSourceCodes.get(tabId);
+    if (viewSourceCode) {
+      this.#removeSourceFrame(viewSourceCode);
+      this.#tabViewSourceCodes.delete(tabId);
+    }
     if (uiSourceCode) {
       this.#tabIds.delete(uiSourceCode);
       this.#loadErrorFiles.delete(uiSourceCode);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -337,7 +337,7 @@ export class UISourceCodeFrame extends UISourceCodeFrameBase {
   private reloadPlugins(): void {
     this.disposePlugins();
     this.loadPlugins();
-    if (!this.loaded) {
+    if (!pluginCompartment.get(this.textEditor.state)) {
       // Until the content is loaded the editor still holds the placeholder
       // state, which doesn't contain `pluginCompartment` at all. Reconfiguring
       // a compartment that isn't part of the state is a no-op, so the plugins

package/front_end/panels/timeline/TimelineCommentContext.ts

@@ -0,0 +1,171 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Platform from '../../core/platform/platform.js';
+import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
+import * as Trace from '../../models/trace/trace.js';
+import * as SourceMapsResolver from '../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
+
+/**
+ * A long call path keeps this many outermost entries, which usually say why
+ * the code ran, such as `Task > Event: click > Function call`.
+ */
+const CALL_PATH_OUTER_ENTRIES = 3;
+/**
+ * A long call path keeps this many innermost entries, ending with the
+ * commented entry itself.
+ */
+const CALL_PATH_INNER_ENTRIES = 15;
+
+/**
+ * Returns the English label of a trace warning. These lines are read by the
+ * AI agent, not shown in the UI, so they are not localized.
+ */
+function labelForWarning(warning: Trace.Handlers.ModelHandlers.Warnings.Warning): string {
+  switch (warning) {
+    case 'LONG_TASK':
+      return 'Long task';
+    case 'IDLE_CALLBACK_OVER_TIME':
+      return 'Idle callback over time';
+    case 'FORCED_REFLOW':
+      return 'Forced reflow';
+    case 'LONG_INTERACTION':
+      return 'Long interaction';
+    default:
+      Platform.assertNever(warning, `Unknown warning: ${warning}`);
+  }
+}
+
+/**
+ * Returns the location of the entry's code as `url:line:column`, with
+ * 1-based line and column numbers as editors show them, or null if the entry
+ * has no code location. The location is in the authored source if a source
+ * map resolved it.
+ *
+ * This follows SourceMapsResolver.codeLocationForEntry() but skips its
+ * Workspace lookup, which only maps a bare URL to a workspace URL, so that
+ * the controller does not need a Workspace.
+ *
+ * Network requests are skipped: their URL is the request, not code, and a
+ * cross-origin request's final URL must be redacted.
+ */
+function sourceLocationForEntry(event: Trace.Types.Events.Event, parsedTrace: Trace.TraceModel.ParsedTrace): string|
+    null {
+  if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+    return null;
+  }
+  let url: string|null = null;
+  let line: number|undefined;
+  let column: number|undefined;
+  const uiLocation = SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForEntry(event)?.devtoolsLocation;
+  const rawCallFrame = uiLocation ? null : Trace.Helpers.Trace.rawCallFrameForEntry(event);
+  if (uiLocation) {
+    url = uiLocation.uiSourceCode.url();
+    line = uiLocation.lineNumber;
+    column = uiLocation.columnNumber;
+  } else if (rawCallFrame) {
+    url = rawCallFrame.url;
+    line = rawCallFrame.lineNumber >= 0 ? rawCallFrame.lineNumber : undefined;
+    column = rawCallFrame.columnNumber >= 0 ? rawCallFrame.columnNumber : undefined;
+  } else {
+    url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace.data);
+  }
+  if (!url) {
+    return null;
+  }
+  if (line === undefined) {
+    return url;
+  }
+  return column === undefined ? `${url}:${line + 1}` : `${url}:${line + 1}:${column + 1}`;
+}
+
+/**
+ * Returns the names of the entry's ancestors and the entry itself, outermost
+ * first, for example `Task > Timer fired > Function call > handleClick`, or
+ * null if the entry has no ancestors.
+ *
+ * JS call stacks can be hundreds of entries deep, so a long call path keeps
+ * only its outermost and innermost entries and says how many it skipped, for
+ * example `Task > Event: click > Function call > … (240 more) > render > …`.
+ */
+function callPathForEntry(event: Trace.Types.Events.Event, parsedTrace: Trace.TraceModel.ParsedTrace): string|null {
+  const node = parsedTrace.data.Renderer.entryToNode.get(event) ?? parsedTrace.data.Samples.entryToNode.get(event);
+  if (!node?.parent) {
+    return null;
+  }
+  const names: string[] = [];
+  for (let current: Trace.Helpers.TreeHelpers.TraceEntryNode|null = node; current; current = current.parent) {
+    names.push(Trace.Name.forEntry(current.entry, parsedTrace));
+  }
+  // The walk goes from the entry up to the root, so reverse it to put the
+  // outermost entry first.
+  names.reverse();
+  const skippedCount = names.length - CALL_PATH_OUTER_ENTRIES - CALL_PATH_INNER_ENTRIES;
+  // Replacing a single entry with a placeholder would not shorten the path.
+  if (skippedCount > 1) {
+    names.splice(CALL_PATH_OUTER_ENTRIES, skippedCount, `… (${skippedCount} more)`);
+  }
+  return names.join(' > ');
+}
+
+/**
+ * Describes a flame chart entry for the AI agent that receives comments on
+ * it. The entry title is already sent as the anchor's text signature, so the
+ * lines add what identifies the entry in the trace and where its code is: the
+ * trace event name, the entry's timing, its track, its source location, its
+ * call path, its warnings and the page that was traced.
+ *
+ * Times are relative to the start of the trace, which is where the
+ * Performance panel's time ruler starts.
+ *
+ * Lines without a value are omitted.
+ */
+export function agentContextForEntry(
+    event: Trace.Types.Events.Event,
+    trackName: string|null,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+    ): string[] {
+  const {micros} = AIAssistance.UnitFormatters;
+  const lines: string[] = [];
+
+  lines.push(`Trace event: ${event.name}`);
+
+  const timing = [`starts at ${micros(event.ts - parsedTrace.data.Meta.traceBounds.min)}`];
+  if (event.dur) {
+    timing.push(`duration ${micros(event.dur)}`);
+  }
+  const selfTime = parsedTrace.data.Renderer.entryToNode.get(event)?.selfTime;
+  if (selfTime !== undefined) {
+    timing.push(`self time ${micros(selfTime)}`);
+  }
+  lines.push(`Timing: ${timing.join(', ')}`);
+
+  if (trackName) {
+    lines.push(`Track: ${trackName}`);
+  }
+
+  const sourceLocation = sourceLocationForEntry(event, parsedTrace);
+  if (sourceLocation) {
+    lines.push(`Source: ${sourceLocation}`);
+  }
+
+  const callPath = callPathForEntry(event, parsedTrace);
+  if (callPath) {
+    lines.push(`Call path: ${callPath}`);
+  }
+
+  const warnings = parsedTrace.data.Warnings.perEvent.get(event);
+  if (warnings?.length) {
+    lines.push(`Warnings: ${warnings.map(labelForWarning).join(', ')}`);
+  }
+
+  // The main frame URL is same-origin with the trace by definition, so it
+  // does not need redaction.
+  const mainFrameURL = parsedTrace.data.Meta.mainFrameURL;
+  if (mainFrameURL) {
+    lines.push(`Traced page: ${mainFrameURL}`);
+  }
+
+  return lines;
+}

package/front_end/panels/timeline/TimelineCommentController.ts

@@ -9,6 +9,7 @@ import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as Overlays from './overlays/overlays.js';
+import {agentContextForEntry} from './TimelineCommentContext.js';
 import type {TimelineFlameChartDataProvider} from './TimelineFlameChartDataProvider.js';
 import type {TimelineFlameChartNetworkDataProvider} from './TimelineFlameChartNetworkDataProvider.js';
 
@@ -338,9 +339,44 @@ export class TimelineCommentController {
           durationMicro,
           chartLocation,
         },
+        agentContext: this.#agentContextFor(entry),
       },
       anchorElement: canvas,
       highlightRect,
     };
   }
+
+  /**
+   * Returns the lines that describe the entry to the AI agent, or undefined
+   * if no trace is active.
+   */
+  #agentContextFor(entry: ResolvedEntry): string[]|undefined {
+    if (!this.#parsedTrace) {
+      return undefined;
+    }
+    return agentContextForEntry(entry.event, this.#trackNameFor(entry), this.#parsedTrace);
+  }
+
+  /**
+   * Returns the name of the track that contains the entry. Groups are stored
+   * in level order and nested groups follow their parent, so the entry's
+   * track is the last group that starts at or above the entry's level. The
+   * data provider's groupForEvent() is not used because it only knows tracks
+   * built by track appenders, and not, for example, the Frames track.
+   */
+  #trackNameFor(entry: ResolvedEntry): string|null {
+    const timelineData = entry.flameChart.timelineData();
+    if (!timelineData) {
+      return null;
+    }
+    const level = timelineData.entryLevels[entry.entryIndex];
+    let trackName: string|null = null;
+    for (const group of timelineData.groups) {
+      if (group.startLevel > level) {
+        break;
+      }
+      trackName = group.name;
+    }
+    return trackName;
+  }
 }

package/front_end/panels/timeline/timeline.ts

@@ -23,6 +23,7 @@ import * as StatusDialog from './StatusDialog.js';
 import * as TargetForEvent from './TargetForEvent.js';
 import * as ThirdPartyTreeView from './ThirdPartyTreeView.js';
 import * as ThreadAppender from './ThreadAppender.js';
+import * as TimelineCommentContext from './TimelineCommentContext.js';
 import * as TimelineCommentController from './TimelineCommentController.js';
 import * as TimelineController from './TimelineController.js';
 import * as TimelineDetailsView from './TimelineDetailsView.js';
@@ -69,6 +70,7 @@ export {
   TargetForEvent,
   ThirdPartyTreeView,
   ThreadAppender,
+  TimelineCommentContext,
   TimelineCommentController,
   TimelineController,
   TimelineDetailsView,