chrome-devtools-frontend 1.0.1522145 → 1.0.1524741

package/front_end/models/issues_manager/descriptions/sharedDictionaryWriteErrorNonIntegerTTLField.md

@@ -0,0 +1 @@
+# The `ttl` field of the `Use-As-Dictionary` HTTP response header must be an integer

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7085,6 +7085,10 @@ export const NativeFunctions = [
     name: "sendMessageToEmbedder",
     signatures: [["message"]]
   },
+  {
+    name: "IntersectionObserver",
+    signatures: [["callback","?options"]]
+  },
   {
     name: "layoutNextFragment",
     signatures: [["?options"]]
@@ -7982,7 +7986,7 @@ export const NativeFunctions = [
   },
   {
     name: "constant",
-    signatures: [["tensor"],["desc","buffer"]]
+    signatures: [["tensor"],["desc","buffer"],["type","value"]]
   },
   {
     name: "argMin",
@@ -8830,6 +8834,10 @@ export const NativeFunctions = [
     name: "VideoEncoder",
     signatures: [["init"]]
   },
+  {
+    name: "VideoFrame",
+    signatures: [["source","?init"],["data","init"]]
+  },
   {
     name: "clipControlEXT",
     signatures: [["origin","depth"]]

package/front_end/models/network_time_calculator/Calculator.ts

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// The TimelineGrid is used in the Performance panel and Memory panel -> Allocating sampling, so the value can be either
-// milliseconds or bytes
+/**
+ * The TimelineGrid is used in the Performance panel and Memory panel -> Allocating sampling, so the value can be either
+ * milliseconds or bytes
+ **/
 export interface Calculator {
   computePosition(value: number): number;
   formatValue(value: number, precision?: number): string;

package/front_end/models/network_time_calculator/RequestTimeRanges.ts

@@ -72,10 +72,12 @@ export function calculateRequestTimeRanges(
     }
   }
 
-  // In some situations, argument `start` may come before `startTime` (`timing.requestStart`). This is especially true
-  // in cases such as SW static routing API where fields like `workerRouterEvaluationStart` or `workerCacheLookupStart`
-  // is set before setting `timing.requestStart`. If the `start` and `end` is known to be a valid value (i.e. not default
-  // invalid value -1 or undefined), we allow adding the range.
+  /**
+   * In some situations, argument `start` may come before `startTime` (`timing.requestStart`). This is especially true
+   * in cases such as SW static routing API where fields like `workerRouterEvaluationStart` or `workerCacheLookupStart`
+   * is set before setting `timing.requestStart`. If the `start` and `end` is known to be a valid value (i.e. not default
+   * invalid value -1 or undefined), we allow adding the range.
+   **/
   function addMaybeNegativeOffsetRange(name: RequestTimeRangeNames, start: number, end: number): void {
     addRange(name, startTime + (start / 1000), startTime + (end / 1000));
   }

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -240,7 +240,7 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
                     return;
                   }
                 }
-                // If there is no entry with the name field, try to infer the name from the source positions.
+                /** If there is no entry with the name field, try to infer the name from the source positions. **/
                 async function resolvePosition(): Promise<void> {
                   if (!sourceMap) {
                     return;
@@ -684,10 +684,12 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
   }
 }
 
-// Resolve the frame's function name using the name associated with the opening
-// paren that starts the scope. If there is no name associated with the scope
-// start or if the function scope does not start with a left paren (e.g., arrow
-// function with one parameter), the resolution returns null.
+/**
+ * Resolve the frame's function name using the name associated with the opening
+ * paren that starts the scope. If there is no name associated with the scope
+ * start or if the function scope does not start with a left paren (e.g., arrow
+ * function with one parameter), the resolution returns null.
+ **/
 async function getFunctionNameFromScopeStart(
     script: SDK.Script.Script, lineNumber: number, columnNumber: number): Promise<string|null> {
   // To reduce the overhead of resolving function names,

package/front_end/models/text_utils/ContentProvider.ts

@@ -53,10 +53,12 @@ export type DeferredContent = {
   isEncoded: boolean,
 };
 
-// Some ContentProvider like NetworkRequests might never actually be able to return
-// a fully completed "requestContentData" as the request keeps on going indefinitely.
-// Such proivders can implement the "StreamingContentProvider" addition, which allows
-// for partial/streaming content.
+/**
+ * Some ContentProvider like NetworkRequests might never actually be able to return
+ * a fully completed "requestContentData" as the request keeps on going indefinitely.
+ * Such proivders can implement the "StreamingContentProvider" addition, which allows
+ * for partial/streaming content.
+ **/
 export interface StreamingContentProvider extends ContentProvider {
   requestStreamingContent(): Promise<StreamingContentDataOrError>;
 }

package/front_end/models/trace/LanternComputationData.ts

@@ -192,6 +192,7 @@ function createLanternRequest(
     priority: request.args.data.priority,
     frameId: request.args.data.frame,
     fromWorker,
+    serverResponseTime: request.args.data.lrServerResponseTime ?? undefined,
     // Set later.
     redirects: undefined,
     redirectSource: undefined,

package/front_end/models/trace/extras/TraceTree.ts

@@ -668,7 +668,7 @@ export function eventStackFrame(event: Types.Events.Event): Protocol.Runtime.Cal
   return {...topFrame, scriptId: String(topFrame.scriptId) as Protocol.Runtime.ScriptId};
 }
 
-// TODO(paulirish): rename to generateNodeId
+/** TODO(paulirish): rename to generateNodeId **/
 export function generateEventID(event: Types.Events.Event): string {
   if (Types.Events.isProfileCall(event)) {
     const name = SamplesIntegrator.isNativeRuntimeFrame(event.callFrame) ?

package/front_end/models/trace/handlers/FramesHandler.ts

@@ -483,7 +483,7 @@ export class PendingFrame {
   }
 }
 
-// The parameters of an impl-side BeginFrame.
+/** The parameters of an impl-side BeginFrame. **/
 class BeginFrameInfo {
   seqId: number;
   startTime: Types.Timing.Micro;
@@ -497,10 +497,12 @@ class BeginFrameInfo {
   }
 }
 
-// A queue of BeginFrames pending visualization.
-// BeginFrames are added into this queue as they occur; later when their
-// corresponding DrawFrames occur (or lack thereof), the BeginFrames are removed
-// from the queue and their timestamps are used for visualization.
+/**
+ * A queue of BeginFrames pending visualization.
+ * BeginFrames are added into this queue as they occur; later when their
+ * corresponding DrawFrames occur (or lack thereof), the BeginFrames are removed
+ * from the queue and their timestamps are used for visualization.
+ **/
 export class TimelineFrameBeginFrameQueue {
   private queueFrames: number[] = [];
 

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -64,12 +64,16 @@ interface RemoteFont {
   beginRemoteFontLoadEvent: Types.Events.BeginRemoteFontLoad;
 }
 
-// This represents the maximum #time we will allow a cluster to go before we
-// reset it.
+/**
+ * This represents the maximum #time we will allow a cluster to go before we
+ * reset it.
+ **/
 export const MAX_CLUSTER_DURATION = Helpers.Timing.milliToMicro(Types.Timing.Milli(5000));
 
-// This represents the maximum #time we will allow between layout shift events
-// before considering it to be the start of a new cluster.
+/**
+ * This represents the maximum #time we will allow between layout shift events
+ * before considering it to be the start of a new cluster.
+ **/
 export const MAX_SHIFT_TIME_DELTA = Helpers.Timing.milliToMicro(Types.Timing.Milli(1000));
 
 // Layout shifts are reported globally to the developer, irrespective of which
@@ -108,8 +112,10 @@ let clsWindowID = -1;
 let clusters: Types.Events.SyntheticLayoutShiftCluster[] = [];
 let clustersByNavigationId = new Map<Types.Events.NavigationId, Types.Events.SyntheticLayoutShiftCluster[]>();
 
-// Represents a point in time in which a  LS score change
-// was recorded.
+/**
+ * Represents a point in time in which a  LS score change
+ * was recorded.
+ **/
 interface ScoreRecord {
   ts: number;
   score: number;
@@ -559,7 +565,7 @@ export function scoreClassificationForLayoutShift(score: number): ScoreClassific
   return state;
 }
 
-// Based on https://web.dev/cls/
+/** Based on https://web.dev/cls/ **/
 export const enum LayoutShiftsThreshold {
   GOOD = 0,
   NEEDS_IMPROVEMENT = 0.1,

package/front_end/models/trace/handlers/MetaHandler.ts

@@ -472,20 +472,22 @@ export interface MetaHandlerData {
   devicePixelRatio?: number;
 }
 
-// Each frame has a single render process at a given time but it can have
-// multiple render processes  during a trace, for example if a navigation
-// occurred in the frame. This map tracks the process that was active for
-// each frame at each point in time. Also, because a process can be
-// assigned to multiple URLs, there is a window for each URL a process
-// was assigned.
-//
-// Note that different sites always end up in different render
-// processes, however two different URLs can point to the same site.
-// For example: https://google.com and https://maps.google.com point to
-// the same site.
-// Read more about this in
-// https://developer.chrome.com/articles/renderingng-architecture/#threads
-// and https://web.dev/same-site-same-origin/
+/**
+ * Each frame has a single render process at a given time but it can have
+ * multiple render processes  during a trace, for example if a navigation
+ * occurred in the frame. This map tracks the process that was active for
+ * each frame at each point in time. Also, because a process can be
+ * assigned to multiple URLs, there is a window for each URL a process
+ * was assigned.
+ *
+ * Note that different sites always end up in different render
+ * processes, however two different URLs can point to the same site.
+ * For example: https://google.com and https://maps.google.com point to
+ * the same site.
+ * Read more about this in
+ * https://developer.chrome.com/articles/renderingng-architecture/#threads
+ * and https://web.dev/same-site-same-origin/
+ **/
 export type FrameProcessData =
     Map<string,
         Map<Types.Events.ProcessID, Array<{frame: Types.Events.TraceFrame, window: Types.Timing.TraceWindowMicro}>>>;

package/front_end/models/trace/handlers/NetworkRequestsHandler.ts

@@ -14,14 +14,16 @@ import type {HandlerName} from './types.js';
 const MILLISECONDS_TO_MICROSECONDS = 1000;
 const SECONDS_TO_MICROSECONDS = 1000000;
 
-// Network requests from traces are actually formed of 5 trace records.
-// This handler tracks all trace records based on the request ID, and
-// then creates a new synthetic trace event for those network requests.
-//
-// This interface, then, defines the shape of the object we intend to
-// keep for each request in the trace. In the finalize we will convert
-// these 5 types of trace records to a synthetic complete event that
-// represents a composite of these trace records.
+/**
+ * Network requests from traces are actually formed of 5 trace records.
+ * This handler tracks all trace records based on the request ID, and
+ * then creates a new synthetic trace event for those network requests.
+ *
+ * This interface, then, defines the shape of the object we intend to
+ * keep for each request in the trace. In the finalize we will convert
+ * these 5 types of trace records to a synthetic complete event that
+ * represents a composite of these trace records.
+ **/
 export interface TraceEventsForNetworkRequest {
   changePriority?: Types.Events.ResourceChangePriority;
   willSendRequests?: Types.Events.ResourceWillSendRequest[];
@@ -295,6 +297,7 @@ export async function finalize(): Promise<void> {
      *
      * See `_updateTimingsForLightrider` in Lighthouse for more detail.
      */
+    let lrServerResponseTime;
     if (isLightrider && request.receiveResponse?.args.data.headers) {
       timing = {
         requestTime: Helpers.Timing.microToSeconds(request.sendRequests.at(0)?.ts ?? 0 as Types.Timing.Micro),
@@ -330,6 +333,14 @@ export async function finalize(): Promise<void> {
         timing.connectEnd = TCPMs as Types.Timing.Milli;
         timing.sslEnd = TCPMs as Types.Timing.Milli;
       }
+
+      // Lightrider does not have any equivalent for `sendEnd` timing values. The
+      // closest we can get to the server response time is from a header that
+      // Lightrider sets.
+      const ResponseMsHeader = request.receiveResponse.args.data.headers.find(h => h.name === 'X-ResponseMs');
+      if (ResponseMsHeader) {
+        lrServerResponseTime = Math.max(0, parseInt(ResponseMsHeader.value, 10)) as Types.Timing.Milli;
+      }
     }
 
     // TODO: consider allowing chrome / about.
@@ -437,6 +448,15 @@ export async function finalize(): Promise<void> {
         Types.Timing.Micro((timing.receiveHeadersEnd - timing.sendEnd) * MILLISECONDS_TO_MICROSECONDS) :
         Types.Timing.Micro(0);
 
+    // Server Response Time
+    // =======================
+    // Time from when the send finished going to when the first byte of headers were received.
+    const serverResponseTime = timing ?
+        Types.Timing.Micro(
+            ((timing.receiveHeadersStart ?? timing.receiveHeadersEnd) - timing.sendEnd) *
+            MILLISECONDS_TO_MICROSECONDS) :
+        Types.Timing.Micro(0);
+
     // Download
     // =======================
     // Time from receipt of headers to the finish time.
@@ -502,6 +522,7 @@ export async function finalize(): Promise<void> {
                 stalled,
                 totalTime,
                 waiting,
+                serverResponseTime,
               },
               // All fields below are from TraceEventsForNetworkRequest.
               decodedBodyLength,
@@ -526,6 +547,7 @@ export async function finalize(): Promise<void> {
               initiator: finalSendRequest.args.data.initiator,
               stackTrace: finalSendRequest.args.data.stackTrace,
               timing,
+              lrServerResponseTime,
               url,
               failed: request.resourceFinish?.args.data.didFail ?? false,
               finished: Boolean(request.resourceFinish),

package/front_end/models/trace/handlers/helpers.ts

@@ -184,7 +184,7 @@ export function addEventToEntityMapping(event: Types.Events.Event, entityMapping
   entityMappings.entityByEvent.set(event, entity);
 }
 
-// A slight upgrade of addEventToEntityMapping to handle the sub-events of a network request.
+/** A slight upgrade of addEventToEntityMapping to handle the sub-events of a network request. **/
 export function addNetworkRequestToEntityMapping(
     networkRequest: Types.Events.SyntheticNetworkRequest, entityMappings: EntityMappings,
     requestTraceEvents: TraceEventsForNetworkRequest): void {

package/front_end/models/trace/handlers/types.ts

@@ -20,22 +20,24 @@ export interface Handler {
 
 export type HandlerName = keyof typeof ModelHandlers;
 
-// This type maps Handler names to the return type of their data
-// function. So, for example, if we are given an object with a key of 'foo'
-// and a value which is a TraceHandler containing a data() function that
-// returns a string, this type will be { foo: string }.
-//
-// This allows us to model the behavior of the TraceProcessor in the model,
-// which takes an object with Handlers as part of its config, and
-// which ultimately returns an object keyed off the names of the
-// Handlers, and with values that are derived from each
-// Handler's data function.
-//
-// So, concretely, we provide a Handler for calculating the #time
-// bounds of a trace called TraceBounds, whose data() function returns a
-// TraceWindow. The HandlerData, therefore, would determine that the
-// TraceProcessor would contain a key called 'TraceBounds' whose value is
-// a TraceWindow.
+/**
+ * This type maps Handler names to the return type of their data
+ * function. So, for example, if we are given an object with a key of 'foo'
+ * and a value which is a TraceHandler containing a data() function that
+ * returns a string, this type will be { foo: string }.
+ *
+ * This allows us to model the behavior of the TraceProcessor in the model,
+ * which takes an object with Handlers as part of its config, and
+ * which ultimately returns an object keyed off the names of the
+ * Handlers, and with values that are derived from each
+ * Handler's data function.
+ *
+ * So, concretely, we provide a Handler for calculating the #time
+ * bounds of a trace called TraceBounds, whose data() function returns a
+ * TraceWindow. The HandlerData, therefore, would determine that the
+ * TraceProcessor would contain a key called 'TraceBounds' whose value is
+ * a TraceWindow.
+ **/
 export type EnabledHandlerDataWithMeta<T extends Record<string, Handler>> = {
   // We allow the user to configure which handlers are created by passing them
   // in when constructing a model instance. However, we then ensure that the
@@ -58,9 +60,11 @@ export type HandlersWithMeta<T extends Record<string, Handler>> = {
   [K in keyof T]: T[K];
 };
 
-// Represents the final data from all of the handlers. If you instantiate a
-// TraceProcessor with a subset of handlers, you should instead use
-// `EnabledHandlerDataWithMeta<>`.
+/**
+ * Represents the final data from all of the handlers. If you instantiate a
+ * TraceProcessor with a subset of handlers, you should instead use
+ * `EnabledHandlerDataWithMeta<>`.
+ **/
 export type HandlerData = Readonly<EnabledHandlerDataWithMeta<typeof ModelHandlers>>;
 
 type DeepWriteable<T> = {

package/front_end/models/trace/helpers/Timing.ts

@@ -39,8 +39,10 @@ export function timeStampForEventAdjustedByClosestNavigation(
   return Types.Timing.Micro(eventTimeStamp);
 }
 
-// Expands the trace window by a provided percentage or, if it the expanded window is smaller than 1 millisecond, expands it to 1 millisecond.
-// If the expanded window is outside of the max trace window, cut the overflowing bound to the max trace window bound.
+/**
+ * Expands the trace window by a provided percentage or, if it the expanded window is smaller than 1 millisecond, expands it to 1 millisecond.
+ * If the expanded window is outside of the max trace window, cut the overflowing bound to the max trace window bound.
+ **/
 export function expandWindowByPercentOrToOneMillisecond(
     annotationWindow: Types.Timing.TraceWindowMicro, maxTraceWindow: Types.Timing.TraceWindowMicro,
     percentage: number): Types.Timing.TraceWindowMicro {

package/front_end/models/trace/helpers/Trace.ts

@@ -85,8 +85,10 @@ export function extractOriginFromTrace(firstNavigationURL: string): string|null
 }
 
 export type EventsInThread<T extends Types.Events.Event> = Map<Types.Events.ThreadID, T[]>;
-// Each thread contains events. Events indicate the thread and process IDs, which are
-// used to store the event in the correct process thread entry below.
+/**
+ * Each thread contains events. Events indicate the thread and process IDs, which are
+ * used to store the event in the correct process thread entry below.
+ **/
 export function addEventToProcessThread<T extends Types.Events.Event>(
     event: T,
     eventsInProcessThread: Map<Types.Events.ProcessID, EventsInThread<T>>,
@@ -822,8 +824,10 @@ export function extractSampleTraceId(event: Types.Events.Event): number|null {
   return event.args?.sampleTraceId ?? event.args?.data?.sampleTraceId ?? null;
 }
 
-// This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
-// TODO(crbug.com/410884528)
+/**
+ * This exactly matches Trace.Styles.visibleTypes. See the runtime verification in maybeInitStylesMap.
+ * TODO(crbug.com/410884528)
+ **/
 export const VISIBLE_TRACE_EVENT_TYPES = new Set<Types.Events.Name>([
   Types.Events.Name.ABORT_POST_TASK_CALLBACK,
   Types.Events.Name.ANIMATION,

package/front_end/models/trace/insights/DocumentLatency.ts

@@ -95,15 +95,14 @@ export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
   },
 }>;
 
-function getServerResponseTime(
-    request: Types.Events.SyntheticNetworkRequest, context: InsightSetContext): Types.Timing.Milli|null {
-  // Prefer the value as given by the Lantern provider.
-  // For PSI, Lighthouse uses this to set a better value for the server response
-  // time. For technical reasons, in Lightrider we do not have `sendEnd` timing
-  // values. See Lighthouse's `asLanternNetworkRequest` function for more.
-  const lanternRequest = context.navigation && context.lantern?.requests.find(r => r.rawRequest === request);
-  if (lanternRequest?.serverResponseTime !== undefined) {
-    return lanternRequest.serverResponseTime as Types.Timing.Milli;
+function getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {
+  // For technical reasons, Lightrider does not have `sendEnd` timing values. The
+  // closest we can get to the server response time is from a header that Lightrider
+  // sets.
+  // @ts-expect-error
+  const isLightrider = globalThis.isLightrider;
+  if (isLightrider) {
+    return request.args.data.lrServerResponseTime ?? null;
   }
 
   const timing = request.args.data.timing;
@@ -111,7 +110,7 @@ function getServerResponseTime(
     return null;
   }
 
-  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.waiting);
+  const ms = Helpers.Timing.microToMilli(request.args.data.syntheticData.serverResponseTime);
   return Math.round(ms) as Types.Timing.Milli;
 }
 
@@ -202,7 +201,7 @@ export function generateInsight(
     return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
   }
 
-  const serverResponseTime = getServerResponseTime(documentRequest, context);
+  const serverResponseTime = getServerResponseTime(documentRequest);
   if (serverResponseTime === null) {
     throw new Error('missing document request timing');
   }

package/front_end/models/trace/insights/INPBreakdown.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Handlers from '../handlers/handlers.js';
+import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type {SyntheticInteractionPair} from '../types/TraceEvents.js';
 import type * as Types from '../types/types.js';
@@ -67,13 +67,24 @@ export function isINPBreakdownInsight(insight: InsightModel): insight is INPBrea
 }
 
 function finalize(partialModel: PartialInsightModel<INPBreakdownInsightModel>): INPBreakdownInsightModel {
+  let state: INPBreakdownInsightModel['state'] = 'pass';
+  if (partialModel.longestInteractionEvent) {
+    const classification = Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(
+        partialModel.longestInteractionEvent.dur);
+    if (classification === Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD) {
+      state = 'informative';
+    } else {
+      state = 'fail';
+    }
+  }
+
   return {
     insightKey: InsightKeys.INP_BREAKDOWN,
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.INP,
-    state: partialModel.longestInteractionEvent ? 'informative' : 'pass',
+    state,
     ...partialModel,
   };
 }

package/front_end/models/trace/insights/LCPBreakdown.ts

@@ -65,7 +65,7 @@ export const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LCPBreakdown.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// A TraceWindow plus its UIString.
+/** A TraceWindow plus its UIString. **/
 export type Subpart = Types.Timing.TraceWindowMicro&{label: Common.UIString.LocalizedString};
 interface LCPSubparts {
   /**
@@ -180,13 +180,25 @@ function finalize(partialModel: PartialInsightModel<LCPBreakdownInsightModel>):
   if (partialModel.lcpRequest) {
     relatedEvents.push(partialModel.lcpRequest);
   }
+
+  let state: LCPBreakdownInsightModel['state'] = 'pass';
+  if (partialModel.lcpMs !== undefined) {
+    const classification = Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(
+        Helpers.Timing.milliToMicro(partialModel.lcpMs));
+    if (classification === Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD) {
+      state = 'informative';
+    } else {
+      state = 'fail';
+    }
+  }
+
   return {
     insightKey: InsightKeys.LCP_BREAKDOWN,
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
     category: InsightCategory.LCP,
-    state: partialModel.lcpEvent || partialModel.lcpRequest ? 'informative' : 'pass',
+    state,
     ...partialModel,
     relatedEvents,
   };

package/front_end/models/trace/insights/NetworkDependencyTree.ts

@@ -458,7 +458,7 @@ export function handleLinkResponseHeader(linkHeaderValue: string): Array<{url: s
   return preconnectedOrigins;
 }
 
-// Export the function for test purpose.
+/** Export the function for test purpose. **/
 export function generatePreconnectedOrigins(
     data: Handlers.Types.HandlerData, context: InsightSetContextWithNavigation,
     contextRequests: Types.Events.SyntheticNetworkRequest[],
@@ -584,7 +584,7 @@ function candidateRequestsByOrigin(
   return origins;
 }
 
-// Export the function for test purpose.
+/** Export the function for test purpose. **/
 export function generatePreconnectCandidates(
     data: Handlers.Types.HandlerData, context: InsightSetContextWithNavigation,
     contextRequests: Types.Events.SyntheticNetworkRequest[]): PreconnectCandidate[] {

package/front_end/models/trace/types/File.ts

@@ -124,17 +124,19 @@ export function isEntriesLinkAnnotation(annotation: Annotation): annotation is E
   return annotation.type === 'ENTRIES_LINK';
 }
 
-// Serializable keys are created for trace events to be able to save
-// references to timeline events in a trace file. These keys enable
-// user modifications that can be saved. See go/cpq:event-data-json for
-// more details on the key format.
+/**
+ * Serializable keys are created for trace events to be able to save
+ * references to timeline events in a trace file. These keys enable
+ * user modifications that can be saved. See go/cpq:event-data-json for
+ * more details on the key format.
+ **/
 export type RawEventKey = `${EventKeyType.RAW_EVENT}-${number}`;
 export type SyntheticEventKey = `${EventKeyType.SYNTHETIC_EVENT}-${number}`;
 export type ProfileCallKey = `${EventKeyType.PROFILE_CALL}-${ProcessID}-${ThreadID}-${SampleIndex}-${Protocol.integer}`;
 export type LegacyTimelineFrameKey = `${EventKeyType.LEGACY_TIMELINE_FRAME}-${number}`;
 export type SerializableKey = RawEventKey|ProfileCallKey|SyntheticEventKey|LegacyTimelineFrameKey;
 
-// Serializable keys values objects contain data that maps the keys to original Trace Events
+/** Serializable keys values objects contain data that maps the keys to original Trace Events **/
 export interface RawEventKeyValues {
   type: EventKeyType.RAW_EVENT;
   rawIndex: number;
@@ -172,9 +174,11 @@ export interface Modifications {
   annotations: SerializedAnnotations;
 }
 
-// IMPORTANT: this is the same as PerfUI.FlameChart.PersistedGroupConfig
-// However, the PerfUI code should not depend on the model/trace, and similarly
-// this model cannot depend on that code, so we duplicate it.
+/**
+ * IMPORTANT: this is the same as PerfUI.FlameChart.PersistedGroupConfig
+ * However, the PerfUI code should not depend on the model/trace, and similarly
+ * this model cannot depend on that code, so we duplicate it.
+ **/
 export interface TrackVisualConfig {
   hidden: boolean;
   expanded: boolean;

package/front_end/models/trace/types/Timing.ts

@@ -25,6 +25,6 @@ export interface TraceWindow<TimeFormat extends Micro|Milli> {
   range: TimeFormat;
 }
 
-// See front_end/models/trace/helpers/Timing.ts for helpful utility functions like traceWindowFromMicroSeconds
+/** See front_end/models/trace/helpers/Timing.ts for helpful utility functions like traceWindowFromMicroSeconds **/
 export type TraceWindowMicro = TraceWindow<Micro>;
 export type TraceWindowMilli = TraceWindow<Milli>;