chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -43,11 +43,6 @@ const UIStrings = {
    *@description Text of a DOM element in Timeline Tree View of the Performance panel
    */
   selectItemForDetails: 'Select item for details.',
-  /**
-   *@description Time in miliseconds
-   *@example {30.1} PH1
-   */
-  fms: '{PH1} ms',
   /**
    *@description Number followed by percent sign
    *@example {20} PH1
@@ -191,7 +186,7 @@ export class TimelineTreeView extends
     if (!this.#parsedTrace) {
       return name;
     }
-    return name + ':@' + Trace.Extras.URLForEntry.getNonResolved(this.#parsedTrace, event);
+    return name + ':@' + Trace.Handlers.Helpers.getNonResolvedURL(event, this.#parsedTrace);
   }
 
   setSearchableView(searchableView: UI.SearchableView.SearchableView): void {
@@ -690,8 +685,8 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
         iconContainer.insertBefore(info.icon, icon);
       }
     } else if (event) {
-      name.textContent = TimelineUIUtils.eventTitle(event);
       const parsedTrace = this.treeView.parsedTrace();
+      name.textContent = TimelineUIUtils.eventTitle(event);
       const target = parsedTrace ? targetForEvent(parsedTrace, event) : null;
       const linkifier = this.treeView.linkifier;
       const isFreshRecording = Boolean(parsedTrace && Tracker.instance().recordingIsFresh(parsedTrace));
@@ -743,9 +738,9 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
     }
     const cell = this.createTD(columnId);
     cell.className = 'numeric-column';
-    cell.setAttribute('title', i18nString(UIStrings.fms, {PH1: value.toFixed(4)}));
+    cell.setAttribute('title', i18n.TimeUtilities.preciseMillisToString(value, 4));
     const textDiv = cell.createChild('div');
-    textDiv.createChild('span').textContent = i18nString(UIStrings.fms, {PH1: value.toFixed(1)});
+    textDiv.createChild('span').textContent = i18n.TimeUtilities.preciseMillisToString(value, 1);
 
     if (showPercents && this.treeView.exposePercentages()) {
       textDiv.createChild('span', 'percent-column').textContent =
@@ -961,7 +956,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
       case GroupBy.URL:
         return (event: Trace.Types.Events.Event) => {
           const parsedTrace = this.parsedTrace();
-          return parsedTrace ? Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event) ?? '' : '';
+          return parsedTrace ? Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace) ?? '' : '';
         };
       case GroupBy.Frame:
         return (event: Trace.Types.Events.Event) => {
@@ -979,7 +974,7 @@ export class AggregatedTimelineTreeView extends TimelineTreeView {
     if (!parsedTrace) {
       return '';
     }
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
     if (!url) {
       return '';
     }

package/front_end/panels/timeline/TimelineUIUtils.test.ts

@@ -22,9 +22,11 @@ import {
   setupPageResourceLoaderForSourceMap,
 } from '../../testing/SourceMapHelpers.js';
 import {
+  getBaseTraceParseModelData,
   getEventOfType,
   getMainThread,
   makeCompleteEvent,
+  makeMockRendererHandlerData,
   makeMockSamplesHandlerData,
   makeProfileCall,
 } from '../../testing/TraceHelpers.js';
@@ -247,22 +249,79 @@ describeWithMockConnection('TimelineUIUtils', function() {
         workerIdByThread: new Map(),
         workerURLById: new Map(),
       };
-      // This only includes data used in the SourceMapsResolver
-      const parsedTrace = {
+      // This only includes data used in the SourceMapsResolver and
+      // TimelineUIUtils
+      const parsedTrace = getBaseTraceParseModelData({
         Samples: makeMockSamplesHandlerData([profileCall]),
         Workers: workersData,
-      } as Trace.Handlers.Types.ParsedTrace;
+        Renderer: makeMockRendererHandlerData([profileCall]),
+      });
 
       const resolver = new Timeline.Utils.SourceMapsResolver.SourceMapsResolver(parsedTrace);
       await resolver.install();
 
-      const linkifier = new Components.Linkifier.Linkifier();
-      const node = await Timeline.TimelineUIUtils.TimelineUIUtils.buildDetailsNodeForTraceEvent(
-          profileCall, target, linkifier, true, parsedTrace);
-      if (!node) {
-        throw new Error('Node was unexpectedly null');
-      }
-      assert.isTrue(node.textContent?.startsWith('someFunction @'));
+      const details = await Timeline.TimelineUIUtils.TimelineUIUtils.buildTraceEventDetails(
+          parsedTrace,
+          profileCall,
+          new Components.Linkifier.Linkifier(),
+          false,
+      );
+      const stackTraceData = getStackTraceForDetailsElement(details);
+      assert.exists(stackTraceData);
+      assert.isTrue(stackTraceData[0].startsWith('someFunction @'));
+    });
+    it('maps to the authored name and script of a function call', async function() {
+      const {script} = await loadBasicSourceMapExample(target);
+      const [lineNumber, columnNumber, ts, dur, pid, tid] =
+          [0, 51, 10, 100, Trace.Types.Events.ProcessID(1), Trace.Types.Events.ThreadID(1)];
+      const profileCall = makeProfileCall('function', ts, dur, pid, tid);
+
+      profileCall.callFrame = {
+        columnNumber,
+        functionName: 'minified',
+        lineNumber: 0,
+        scriptId: script.scriptId,
+        url: 'file://gen.js',
+      };
+
+      const functionCall = makeCompleteEvent(Trace.Types.Events.Name.FUNCTION_CALL, ts, dur, '', pid, tid) as
+          Trace.Types.Events.FunctionCall;
+      functionCall.args = {
+        data: {
+          // line and column number of function calls have an offset
+          // from CPU profile values.
+          columnNumber: columnNumber + 1,
+          lineNumber: lineNumber + 1,
+          functionName: 'minified',
+          scriptId: script.scriptId,
+          url: 'file://gen.js',
+        },
+      };
+      const workersData: Trace.Handlers.ModelHandlers.Workers.WorkersData = {
+        workerSessionIdEvents: [],
+        workerIdByThread: new Map(),
+        workerURLById: new Map(),
+      };
+      // This only includes data used in the SourceMapsResolver and
+      // TimelineUIUtils
+      const parsedTrace = getBaseTraceParseModelData({
+        Samples: makeMockSamplesHandlerData([profileCall]),
+        Workers: workersData,
+        Renderer: makeMockRendererHandlerData([functionCall]),
+      });
+
+      const resolver = new Timeline.Utils.SourceMapsResolver.SourceMapsResolver(parsedTrace);
+      await resolver.install();
+
+      const details = await Timeline.TimelineUIUtils.TimelineUIUtils.buildTraceEventDetails(
+          parsedTrace,
+          functionCall,
+          new Components.Linkifier.Linkifier(),
+          false,
+      );
+      const detailsData = getRowDataForDetailsElement(details).at(0);
+      assert.exists(detailsData);
+      assert.deepEqual(detailsData, {title: 'Function', value: 'someFunction @ gen.js:1:52'});
     });
   });
   describe('adjusting timestamps for events and navigations', function() {
@@ -773,7 +832,7 @@ describeWithMockConnection('TimelineUIUtils', function() {
           new Components.Linkifier.Linkifier(),
           false,
       );
-      const rowData = getRowDataForDetailsElement(details);
+      const rowData = getRowDataForDetailsElement(details).slice(0, 2);
       assert.deepEqual(
           rowData,
           [
@@ -782,7 +841,6 @@ describeWithMockConnection('TimelineUIUtils', function() {
               value: 'This is a child task',
             },
             {title: 'Tip', value: 'Do something about it'},
-            {title: undefined, value: 'appendACorgi @ localhost:3000/static/js/bundle.js:274:19'},
           ],
       );
     });
@@ -801,16 +859,13 @@ describeWithMockConnection('TimelineUIUtils', function() {
           new Components.Linkifier.Linkifier(),
           false,
       );
-      const rowData = getRowDataForDetailsElement(details);
+      const rowData = getRowDataForDetailsElement(details)[0];
       assert.deepEqual(
           rowData,
-          [
             {
               title: 'Description',
               value: 'This marks the start of a task',
             },
-            {title: undefined, value: 'mockChangeDetection @ localhost:3000/static/js/bundle.js:295:17'},
-          ],
       );
     });
 
@@ -839,16 +894,9 @@ describeWithMockConnection('TimelineUIUtils', function() {
           new Components.Linkifier.Linkifier(),
           false,
       );
-      const rowData = getRowDataForDetailsElement(details);
-      assert.deepEqual(
-          rowData,
-          [
-            {
-              title: 'Function',
-              value: '(anonymous) @ www.google.com:21:17',
-            },
-          ],
-      );
+      const stackTraceData = getStackTraceForDetailsElement(details);
+      assert.exists(stackTraceData);
+      assert.strictEqual(stackTraceData[0], '(anonymous) @ www.google.com:21:17');
     });
     it('renders the stack trace of a ScheduleStyleRecalculation properly', async function() {
       Common.Linkifier.registerLinkifier({
@@ -939,9 +987,15 @@ describeWithMockConnection('TimelineUIUtils', function() {
           false,
       );
       const markerStackTraceData = getStackTraceForDetailsElement(markerDetails);
+      assert.exists(markerStackTraceData);
+      assert.lengthOf(markerStackTraceData, 15);
       assert.deepEqual(
-          markerStackTraceData,
-          ['mockChangeDetection @ localhost:3000/static/js/bundle.js:295:17'],
+          markerStackTraceData.slice(0, 3),
+          [
+            'mockChangeDetection @ localhost:3000/static/js/bundle.js:282:31',
+            'appendACorgi @ localhost:3000/static/js/bundle.js:216:24',
+            'invokeGuardedCallbackDev @ localhost:3000/static/js/bundle.js:11204:70',
+          ],
       );
 
       const trackEntryDetails = await Timeline.TimelineUIUtils.TimelineUIUtils.buildTraceEventDetails(
@@ -951,9 +1005,15 @@ describeWithMockConnection('TimelineUIUtils', function() {
           false,
       );
       const trackEntryStackTraceData = getStackTraceForDetailsElement(trackEntryDetails);
+      assert.exists(trackEntryStackTraceData);
+      assert.lengthOf(trackEntryStackTraceData, 14);
       assert.deepEqual(
-          trackEntryStackTraceData,
-          ['appendACorgi @ localhost:3000/static/js/bundle.js:274:19'],
+          trackEntryStackTraceData.slice(0, 3),
+          [
+            'appendACorgi @ localhost:3000/static/js/bundle.js:216:24',
+            'invokeGuardedCallbackDev @ localhost:3000/static/js/bundle.js:11204:70',
+            'invokeGuardedCallback @ localhost:3000/static/js/bundle.js:11347:35',
+          ],
       );
     });
     it('renders the stack trace of user timings properly', async function() {
@@ -1175,6 +1235,45 @@ describeWithMockConnection('TimelineUIUtils', function() {
         {title: 'Pending for', value: '200.1\xA0ms'},
       ]);
     });
+    it('renders the stack trace of a profile call event', async function() {
+      // uses source maps
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'async-js-calls.json.gz');
+      const jsCall = parsedTrace.Renderer.allTraceEntries.find(
+          e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
+      assert.exists(jsCall);
+      const details = await Timeline.TimelineUIUtils.TimelineUIUtils.buildTraceEventDetails(
+          parsedTrace,
+          jsCall,
+          new Components.Linkifier.Linkifier(),
+          false,
+      );
+      const container = document.createElement('div');
+      renderElementIntoDOM(container);
+      container.appendChild(details);
+      const stackTraceContainer = container.querySelector('.stack-preview-container');
+      const stackTracesElements =
+          stackTraceContainer?.shadowRoot?.querySelector('.stack-preview-container')?.querySelectorAll('tbody');
+      assert.exists(stackTracesElements);
+      const testData = [...stackTracesElements].map(stackTraceElement => {
+        const description = stackTraceElement.querySelector<HTMLTableRowElement>('.stack-preview-async-row');
+        const stackFrameElements =
+            stackTraceElement.querySelectorAll<HTMLTableRowElement>('tr:not(.stack-preview-async-row)');
+        const stackFrames = [...stackFrameElements].map(frame => frame.innerText);
+        return {description: description?.innerText || '', stackFrames};
+      });
+      assert.deepEqual(
+          testData,
+          [
+            {description: '', stackFrames: ['\tbaz\t@\tunknown']},
+            {description: '\trequestIdleCallback\t\t', stackFrames: ['\tbar\t@\tunknown']},
+            {description: '\tsetTimeout\t\t', stackFrames: ['\tfoo\t@\tunknown']},
+            {
+              description: '\trequestAnimationFrame\t\t',
+              stackFrames: ['\tstartExample\t@\tunknown', '\t(anonymous)\t@\tunknown'],
+            },
+          ],
+      );
+    });
   });
 
   it('can generate details for a frame', async function() {
@@ -1225,9 +1324,8 @@ describeWithMockConnection('TimelineUIUtils', function() {
       }
 
       // Fake that we resolved the entry's name from a sourcemap.
-      Timeline.Utils.SourceMapsResolver.SourceMapsResolver.storeResolvedNodeDataForEntry(
-          profileEntry.pid, profileEntry.tid, profileEntry.callFrame,
-          {name: 'resolved-function-test', devtoolsLocation: null, script: null});
+      Timeline.Utils.SourceMapsResolver.SourceMapsResolver.storeResolvedCodeDataForCallFrame(
+          profileEntry.callFrame, {name: 'resolved-function-test', devtoolsLocation: null, script: null});
 
       const title = Timeline.TimelineUIUtils.TimelineUIUtils.eventTitle(profileEntry);
       assert.strictEqual(title, 'resolved-function-test');

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -43,10 +43,10 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as TraceBounds from '../../services/trace_bounds/trace_bounds.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js';
 import * as LegacyComponents from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -66,7 +66,7 @@ const UIStrings = {
    *@description Text that only contain a placeholder
    *@example {100ms (at 200ms)} PH1
    */
-  emptyPlaceholder: '{PH1}',  // eslint-disable-line rulesdir/l10n_no_locked_or_placeholder_only_phrase
+  emptyPlaceholder: '{PH1}',  // eslint-disable-line rulesdir/l10n-no-locked-or-placeholder-only-phrase
   /**
    *@description Text for timestamps of items
    */
@@ -576,17 +576,19 @@ type LinkifyLocationOptions = {
 
 export class TimelineUIUtils {
   static frameDisplayName(frame: Protocol.Runtime.CallFrame): string {
+    const maybeResolvedData = Utils.SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForCallFrame(frame);
+    const functionName = maybeResolvedData?.name || frame.functionName;
     if (!Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.isNativeRuntimeFrame(frame)) {
-      return UI.UIUtils.beautifyFunctionName(frame.functionName);
+      return UI.UIUtils.beautifyFunctionName(functionName);
     }
-    const nativeGroup = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(frame.functionName);
+    const nativeGroup = Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.nativeGroup(functionName);
     switch (nativeGroup) {
       case Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups.COMPILE:
         return i18nString(UIStrings.compile);
       case Trace.Extras.TimelineJSProfile.TimelineJSProfileProcessor.NativeGroups.PARSE:
         return i18nString(UIStrings.parse);
     }
-    return frame.functionName;
+    return functionName;
   }
 
   static testContentMatching(
@@ -608,7 +610,7 @@ export class TimelineUIUtils {
       }
     }
     if (parsedTrace) {
-      const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, traceEvent);
+      const url = Trace.Handlers.Helpers.getNonResolvedURL(traceEvent, parsedTrace);
       if (url) {
         tokens.push(url);
       }
@@ -805,7 +807,7 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.PAINT_IMAGE:
       case Trace.Types.Events.Name.DECODE_IMAGE:
       case Trace.Types.Events.Name.DECODE_LAZY_PIXEL_REF: {
-        const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+        const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
         if (url) {
           detailsText = Bindings.ResourceUtils.displayNameForURL(url);
         }
@@ -887,7 +889,7 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.RESOURCE_RECEIVE_DATA:
       case Trace.Types.Events.Name.RESOURCE_RECEIVE_RESPONSE:
       case Trace.Types.Events.Name.RESOURCE_FINISH: {
-        const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+        const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
         if (url) {
           const options = {
             tabStop: true,
@@ -903,19 +905,18 @@ export class TimelineUIUtils {
         details = document.createElement('span');
 
         // FunctionCall events have an args.data that could be a CallFrame, if all the details are present, so we check for that.
-        if (Trace.Types.Events.isFunctionCall(event) && event.args.data &&
-            Trace.Types.Events.objectIsCallFrame(event.args.data)) {
+        const callFrame = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(event)?.at(0);
+        if (Trace.Types.Events.isFunctionCall(event) && callFrame) {
           UI.UIUtils.createTextChild(
               details,
               TimelineUIUtils.frameDisplayName(
-                  {...event.args.data, scriptId: String(event.args.data.scriptId) as Protocol.Runtime.ScriptId}));
+                  {...callFrame, scriptId: String(callFrame.scriptId) as Protocol.Runtime.ScriptId}));
         }
-        const {lineNumber, columnNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
         const location = this.linkifyLocation({
           scriptId: unsafeEventData['scriptId'],
           url: unsafeEventData['url'],
-          lineNumber: lineNumber || 0,
-          columnNumber,
+          lineNumber: callFrame?.lineNumber || 0,
+          columnNumber: callFrame?.columnNumber,
           target,
           isFreshRecording,
           linkifier,
@@ -969,30 +970,6 @@ export class TimelineUIUtils {
         }
         break;
       }
-      case Trace.Types.Events.Name.PROFILE_CALL: {
-        details = document.createElement('span');
-        // This check is only added for convenience with the type checker.
-        if (!Trace.Types.Events.isProfileCall(event)) {
-          break;
-        }
-        const maybeResolvedData = Utils.SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForEntry(event);
-        const functionName = maybeResolvedData?.name || TimelineUIUtils.frameDisplayName(event.callFrame);
-        UI.UIUtils.createTextChild(details, functionName);
-        const location = this.linkifyLocation({
-          scriptId: event.callFrame['scriptId'],
-          url: event.callFrame['url'],
-          lineNumber: event.callFrame['lineNumber'],
-          columnNumber: event.callFrame['columnNumber'],
-          target,
-          isFreshRecording,
-          linkifier,
-        });
-        if (location) {
-          UI.UIUtils.createTextChild(details, ' @ ');
-          details.appendChild(location);
-        }
-        break;
-      }
 
       default: {
         /**
@@ -1000,7 +977,8 @@ export class TimelineUIUtils {
          * thus, we prevent extracting the stack trace again here.
          */
         if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ||
-            Trace.Types.Events.isUserTiming(event) || Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
+            Trace.Types.Events.isUserTiming(event) || Trace.Types.Extensions.isSyntheticExtensionEntry(event) ||
+            Trace.Types.Events.isProfileCall(event)) {
           detailsText = null;
         } else {
           details = this.linkifyTopCallFrame(event, target, linkifier, isFreshRecording) ?? null;
@@ -1122,7 +1100,7 @@ export class TimelineUIUtils {
       // @ts-ignore TODO(crbug.com/1011811): Remove symbol usage.
       if (typeof event[previewElementSymbol] === 'undefined') {
         let previewElement: (Element|null)|null = null;
-        const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+        const url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
         if (url) {
           previewElement = await LegacyComponents.ImagePreview.ImagePreview.build(maybeTarget, url, false, {
             imageAltText: LegacyComponents.ImagePreview.ImagePreview.defaultAltTextForImageURL(url),
@@ -1362,7 +1340,7 @@ export class TimelineUIUtils {
       case Trace.Types.Events.Name.DECODE_IMAGE:
       case Trace.Types.Events.Name.DRAW_LAZY_PIXEL_REF: {
         relatedNodeLabel = i18nString(UIStrings.ownerElement);
-        url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, event);
+        url = Trace.Handlers.Helpers.getNonResolvedURL(event, parsedTrace);
         if (url) {
           const options = {
             tabStop: true,
@@ -1684,7 +1662,8 @@ export class TimelineUIUtils {
     }
 
     const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(event);
-    if (initiator || initiatorFor || stackTrace || parsedTrace?.Invalidations.invalidationsForEvent.get(event)) {
+    if (Trace.Types.Events.isProfileCall(event) || initiator || initiatorFor || stackTrace ||
+        parsedTrace?.Invalidations.invalidationsForEvent.get(event)) {
       await TimelineUIUtils.generateCauses(event, contentHelper, parsedTrace);
     }
 
@@ -1872,13 +1851,25 @@ export class TimelineUIUtils {
     return {callFrames} as Protocol.Runtime.StackTrace;
   }
 
-  private static async generateCauses(
+  static async generateCauses(
       event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper,
       parsedTrace: Trace.Handlers.Types.ParsedTrace): Promise<void> {
     const {startTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
     let initiatorStackLabel = i18nString(UIStrings.initiatorStackTrace);
     let stackLabel = i18nString(UIStrings.stackTrace);
-
+    const stackTraceForEvent = Trace.Extras.StackTraceForEvent.get(event, parsedTrace);
+    if (stackTraceForEvent) {
+      contentHelper.addSection(i18nString(UIStrings.stackTrace));
+      contentHelper.createChildStackTraceElement(stackTraceForEvent);
+      // TODO(andoli): also build stack trace component for other events
+      // that have a stack trace using the StackTraceForEvent helper.
+    } else {
+      const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(event);
+      if (stackTrace && stackTrace.length) {
+        contentHelper.addSection(stackLabel);
+        contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
+      }
+    }
     switch (event.name) {
       case Trace.Types.Events.Name.TIMER_FIRE:
         initiatorStackLabel = i18nString(UIStrings.timerInstalled);
@@ -1899,12 +1890,6 @@ export class TimelineUIUtils {
         break;
     }
 
-    const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(event);
-    if (stackTrace && stackTrace.length) {
-      contentHelper.addSection(stackLabel);
-      contentHelper.createChildStackTraceElement(TimelineUIUtils.stackTraceFromCallFrames(stackTrace));
-    }
-
     const initiator = parsedTrace.Initiators.eventToInitiator.get(event);
     const initiatorFor = parsedTrace.Initiators.initiatorToEvents.get(event);
     const invalidations = parsedTrace.Invalidations.invalidationsForEvent.get(event);
@@ -1979,7 +1964,7 @@ export class TimelineUIUtils {
       });
 
       link.addEventListener('keydown', event => {
-        if (event.key === 'Enter') {
+        if (event.key === Platform.KeyboardUtilities.ENTER_KEY) {
           TimelinePanel.instance().select(selectionFromEvent(entry));
           event.consume(true);
         }
@@ -2161,9 +2146,9 @@ export class TimelineUIUtils {
     const stylesContainer = document.createElement('div');
     const shadowRoot = stylesContainer.attachShadow({mode: 'open'});
     shadowRoot.adoptedStyleSheets = [imagePreviewStyles];
-    const container = shadowRoot.createChild('div') as HTMLDivElement;
+    const container = shadowRoot.createChild('div');
     container.classList.add('image-preview-container', 'vbox', 'link');
-    const img = (container.createChild('img') as HTMLImageElement);
+    const img = container.createChild('img');
     img.src = imageURL;
     img.alt = LegacyComponents.ImagePreview.ImagePreview.defaultAltTextForImageURL(imageURL);
     const paintProfilerButton = container.createChild('a');
@@ -2172,7 +2157,7 @@ export class TimelineUIUtils {
     container.tabIndex = 0;
     container.addEventListener('click', () => TimelinePanel.instance().select(selectionFromEvent(event)), false);
     container.addEventListener('keydown', keyEvent => {
-      if (keyEvent.key === 'Enter') {
+      if (keyEvent.key === Platform.KeyboardUtilities.ENTER_KEY) {
         TimelinePanel.instance().select(selectionFromEvent(event));
         keyEvent.consume(true);
       }
@@ -2180,7 +2165,7 @@ export class TimelineUIUtils {
     return stylesContainer;
   }
 
-  static createEventDivider(event: Trace.Types.Events.Event, zeroTime: number): Element {
+  static createEventDivider(event: Trace.Types.Events.Event, zeroTime: number): HTMLDivElement {
     const eventDivider = document.createElement('div');
     eventDivider.classList.add('resources-event-divider');
     const {startTime: eventStartTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
@@ -2389,12 +2374,14 @@ export class TimelineUIUtils {
   }
 
   static markerStyleForEvent(event: Trace.Types.Events.Event): TimelineMarkerStyle {
+    // Note: keep the colors matching that of `markerDetailsForEvent`.
+
     const tallMarkerDashStyle = [6, 4];
     const title = TimelineUIUtils.eventTitle(event);
 
     if (event.name !== Trace.Types.Events.Name.NAVIGATION_START &&
-            Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ||
-        Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.UserTiming)) {
+        (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.Console) ||
+         Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.UserTiming))) {
       return {
         title,
         dashStyle: tallMarkerDashStyle,
@@ -2408,7 +2395,7 @@ export class TimelineUIUtils {
     let color = 'grey';
     switch (event.name) {
       case Trace.Types.Events.Name.NAVIGATION_START:
-        color = '#FF9800';
+        color = 'var(--color-text-primary)';
         tall = true;
         break;
       case Trace.Types.Events.Name.FRAME_STARTED_LOADING:
@@ -2416,11 +2403,11 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_DOM_CONTENT:
-        color = '#0867CB';
+        color = 'var(--color-text-disabled)';
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_LOAD:
-        color = '#B31412';
+        color = 'var(--color-text-disabled)';
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_FIRST_PAINT:
@@ -2428,11 +2415,11 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_FCP:
-        color = '#1A6937';
+        color = 'var(--sys-color-green-bright)';
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE:
-        color = '#1A3422';
+        color = 'var(--sys-color-green)';
         tall = true;
         break;
       case Trace.Types.Events.Name.TIME_STAMP:
@@ -2589,11 +2576,22 @@ export class TimelineDetailsContentHelper {
     if (!this.linkifierInternal) {
       return;
     }
-
+    const resolvedStackTrace: Protocol.Runtime.StackTrace = structuredClone(stackTrace);
+    let currentResolvedStackTrace: Protocol.Runtime.StackTrace|undefined = resolvedStackTrace;
+    while (currentResolvedStackTrace) {
+      currentResolvedStackTrace.callFrames = currentResolvedStackTrace.callFrames.map(
+          callFrame => ({
+            ...callFrame,
+            functionName:
+                Utils.SourceMapsResolver.SourceMapsResolver.resolvedCodeLocationForCallFrame(callFrame)?.name ||
+                callFrame.functionName,
+          }));
+      currentResolvedStackTrace = currentResolvedStackTrace.parent;
+    }
     const stackTraceElement =
         this.tableElement.createChild('div', 'timeline-details-view-row timeline-details-stack-values');
     const callFrameContents = LegacyComponents.JSPresentationUtils.buildStackTracePreviewContents(
-        this.target, this.linkifierInternal, {stackTrace, tabStops: true, showColumnNumber: true});
+        this.target, this.linkifierInternal, {stackTrace: resolvedStackTrace, tabStops: true, showColumnNumber: true});
     stackTraceElement.appendChild(callFrameContents.element);
   }
 }
@@ -2640,7 +2638,7 @@ export function timeStampForEventAdjustedForClosestNavigationIfPossible(
 export function isMarkerEvent(parsedTrace: Trace.Handlers.Types.ParsedTrace, event: Trace.Types.Events.Event): boolean {
   const {Name} = Trace.Types.Events;
 
-  if (event.name === Name.TIME_STAMP) {
+  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START) {
     return true;
   }