chrome-devtools-frontend 1.0.1522585 → 1.0.1525561

package/front_end/models/ai_assistance/performance/AIContext.ts

@@ -16,11 +16,26 @@ interface AgentFocusData {
   insight: Trace.Insights.Types.InsightModel|null;
 }
 
+/**
+ * Gets the first, most relevant InsightSet to use, following the logic of:
+ * 1. If there is only one InsightSet, use that.
+ * 2. If there are more, prefer the first we find that has a navigation associated with it.
+ * 3. If none with a navigation are found, fallback to the first one.
+ * 4. Otherwise, return null.
+ *
+ * TODO(cjamcl): we should just give the agent the entire insight set, and give
+ * summary detail about all of them + the ability to query each.
+ */
 function getFirstInsightSet(insights: Trace.Insights.Types.TraceInsightSets): Trace.Insights.Types.InsightSet|null {
-  // Currently only support a single insight set. Pick the first one with a navigation.
-  // TODO(cjamcl): we should just give the agent the entire insight set, and give
-  // summary detail about all of them + the ability to query each.
-  return [...insights.values()].filter(insightSet => insightSet.navigation).at(0) ?? null;
+  const insightSets = Array.from(insights.values());
+  if (insightSets.length === 0) {
+    return null;
+  }
+  if (insightSets.length === 1) {
+    return insightSets[0];
+  }
+
+  return insightSets.filter(set => set.navigation).at(0) ?? insightSets.at(0) ?? null;
 }
 
 export class AgentFocus {

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -12,8 +12,10 @@ import {debugLog} from './debug.js';
 export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
 export const AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS = 200;
 
-// TODO(b/404796739): Remove these definitions of AgentOptions and RequestOptions and
-// use the existing ones which are used for AI assistance panel agents.
+/**
+ * TODO(b/404796739): Remove these definitions of AgentOptions and RequestOptions and
+ * use the existing ones which are used for AI assistance panel agents.
+ **/
 interface AgentOptions {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;

package/front_end/models/autofill_manager/AutofillManager.ts

@@ -102,8 +102,10 @@ export class AutofillManager extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 }
 
-// A Match describes how the value of a filled field corresponds to a substring
-// of address from startIndex to endIndex.
+/**
+ * A Match describes how the value of a filled field corresponds to a substring
+ * of address from startIndex to endIndex.
+ **/
 export interface Match {
   startIndex: number;
   endIndex: number;

package/front_end/models/cpu_profile/CPUProfileDataModel.ts

@@ -552,7 +552,7 @@ export class CPUProfileDataModel extends ProfileTreeModel {
   }
 }
 
-// Format used by profiles coming from traces.
+/** Format used by profiles coming from traces. **/
 export type ExtendedProfileNode = Protocol.Profiler.ProfileNode&{parent?: number};
 export type ExtendedProfile = Protocol.Profiler.Profile&{
   nodes: Protocol.Profiler.ProfileNode[] | ExtendedProfileNode[],

package/front_end/models/crux-manager/CrUXManager.ts

@@ -103,7 +103,7 @@ export interface ConfigSetting {
 
 let cruxManagerInstance: CrUXManager;
 
-// TODO: Potentially support `TABLET`. Tablet field data will always be `null` until then.
+/** TODO: Potentially support `TABLET`. Tablet field data will always be `null` until then. **/
 export const DEVICE_SCOPE_LIST: DeviceScope[] = ['ALL', 'DESKTOP', 'PHONE'];
 
 const pageScopeList: PageScope[] = ['origin', 'url'];

package/front_end/models/extensions/HostUrlPattern.ts

@@ -82,7 +82,7 @@ function parseHostAndPort(pattern: string, scheme: string): {host: string, port:
     return undefined;
   }
 
-  // The URL constructor strips off the default port for the scheme, even if it was given explicitely
+  // The URL constructor strips off the default port for the scheme, even if it was given explicitly
   const httpPort = defaultPort('http');
   if (!httpPort) {
     return undefined;
@@ -100,8 +100,15 @@ function parseHostAndPort(pattern: string, scheme: string): {host: string, port:
   };
 }
 
-// HostUrlPatterns define permissions in for extensions in the form of `*://*.example.com:*/`. Since these aren't valid
-// URLs Common.ParsedURL can't handle them and we need a separate implementation.
+/**
+ * HostUrlPatterns define permissions in for extensions in the form of "<protocol>://<sub-domain>.example.com:<port>/".
+ * Where the respected parts can be patters like "*".
+ * Since these aren't valid {@link Common.ParsedURL.ParsedURL}
+ * can't handle them and we need a separate implementation.
+ *
+ * More information in the Chromium code base -
+ * {@link https://crsrc.org/c/chrome/browser/extensions/extension_management_internal.h;l=137 | here}.
+ */
 export class HostUrlPattern {
   static parse(pattern: string): HostUrlPattern|undefined {
     if (pattern === '<all_urls>') {
@@ -122,8 +129,9 @@ export class HostUrlPattern {
     return new HostUrlPattern({scheme, host, port, matchesAll: false});
   }
 
-  private constructor(readonly pattern: {matchesAll: true}|
-                      {readonly scheme: string, readonly host: string, readonly port: string, matchesAll: false}) {
+  private constructor(readonly pattern: {
+    matchesAll: true,
+  }|{readonly scheme: string, readonly host: string, readonly port: string, matchesAll: false}) {
   }
 
   get scheme(): string {

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line rulesdir/es-modules-import
 
-export {DefinitionKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
+export {DefinitionKind, ScopeKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
 
 let formatterWorkerPoolInstance: FormatterWorkerPool;
 

package/front_end/models/issues_manager/CookieDeprecationMetadataIssue.ts

@@ -18,7 +18,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/CookieDeprecationMetadataIssue.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// TODO(b/305738703): Move this issue into a warning on CookieIssue.
+/** TODO(b/305738703): Move this issue into a warning on CookieIssue. **/
 export class CookieDeprecationMetadataIssue extends Issue {
   readonly #issueDetails: Protocol.Audits.CookieDeprecationMetadataIssueDetails;
 

package/front_end/models/issues_manager/CookieIssue.ts

@@ -44,14 +44,14 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('models/issues_manager/CookieIssue.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-// The enum string values need to match the IssueExpanded enum values in UserMetrics.ts.
+/** The enum string values need to match the IssueExpanded enum values in UserMetrics.ts. **/
 export const enum CookieIssueSubCategory {
   GENERIC_COOKIE = 'GenericCookie',
   SAME_SITE_COOKIE = 'SameSiteCookie',
   THIRD_PARTY_PHASEOUT_COOKIE = 'ThirdPartyPhaseoutCookie',
 }
 
-// Enum to show cookie status from the security panel's third-party cookie report tool
+/** Enum to show cookie status from the security panel's third-party cookie report tool **/
 export const enum CookieStatus {
   BLOCKED = 0,
   ALLOWED = 1,

package/front_end/models/issues_manager/MarkdownIssueDescription.ts

@@ -129,7 +129,7 @@ export function substitutePlaceholders(markdown: string, substitutions?: Map<str
   return result;
 }
 
-// Ensure that all provided placeholders match the naming pattern.
+/** Ensure that all provided placeholders match the naming pattern. **/
 function validatePlaceholders(placeholders: Set<string>): void {
   const invalidPlaceholders = [...placeholders].filter(placeholder => !validPlaceholderNamePattern.test(placeholder));
   if (invalidPlaceholders.length > 0) {

package/front_end/models/issues_manager/SharedDictionaryIssue.ts

@@ -34,8 +34,10 @@ export const enum IssueCode {
   WRITE_ERROR_INSUFFICIENT_RESOURCES = 'SharedDictionaryIssue::WriteErrorInsufficientResources',
   WRITE_ERROR_INVALID_MATCH_FIELD = 'SharedDictionaryIssue::WriteErrorInvalidMatchField',
   WRITE_ERROR_INVALID_STRUCTURED_HEADER = 'SharedDictionaryIssue::WriteErrorInvalidStructuredHeader',
+  WRITE_ERROR_INVALID_TTL_FIELD = 'SharedDictionaryIssue::WriteErrorInvalidTTLField',
   WRITE_ERROR_NAVIGATION_REQUEST = 'SharedDictionaryIssue::WriteErrorNavigationRequest',
   WRITE_ERROR_NO_MATCH_FIELD = 'SharedDictionaryIssue::WriteErrorNoMatchField',
+  WRITE_ERROR_NON_INTEGER_TTL_FIELD = 'SharedDictionaryIssue::WriteErrorNonIntegerTTLField',
   WRITE_ERROR_NON_LIST_MATCH_DEST_FIELD = 'SharedDictionaryIssue::WriteErrorNonListMatchDestField',
   WRITE_ERROR_NON_SECURE_CONTEXT = 'SharedDictionaryIssue::WriteErrorNonSecureContext',
   WRITE_ERROR_NON_STRING_ID_FIELD = 'SharedDictionaryIssue::WriteErrorNonStringIdField',
@@ -73,10 +75,14 @@ function getIssueCode(details: Protocol.Audits.SharedDictionaryIssueDetails): Is
       return IssueCode.WRITE_ERROR_INVALID_MATCH_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorInvalidStructuredHeader:
       return IssueCode.WRITE_ERROR_INVALID_STRUCTURED_HEADER;
+    case Protocol.Audits.SharedDictionaryError.WriteErrorInvalidTTLField:
+      return IssueCode.WRITE_ERROR_INVALID_TTL_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNavigationRequest:
       return IssueCode.WRITE_ERROR_NAVIGATION_REQUEST;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNoMatchField:
       return IssueCode.WRITE_ERROR_NO_MATCH_FIELD;
+    case Protocol.Audits.SharedDictionaryError.WriteErrorNonIntegerTTLField:
+      return IssueCode.WRITE_ERROR_NON_INTEGER_TTL_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNonListMatchDestField:
       return IssueCode.WRITE_ERROR_NON_LIST_MATCH_DEST_FIELD;
     case Protocol.Audits.SharedDictionaryError.WriteErrorNonSecureContext:
@@ -243,6 +249,13 @@ const issueDescriptions = new Map<Protocol.Audits.SharedDictionaryError, LazyMar
       links: specLinks,
     },
   ],
+  [
+    Protocol.Audits.SharedDictionaryError.WriteErrorInvalidTTLField,
+    {
+      file: 'sharedDictionaryWriteErrorInvalidTTLField.md',
+      links: specLinks,
+    },
+  ],
   [
     Protocol.Audits.SharedDictionaryError.WriteErrorNavigationRequest,
     {
@@ -257,6 +270,13 @@ const issueDescriptions = new Map<Protocol.Audits.SharedDictionaryError, LazyMar
       links: specLinks,
     },
   ],
+  [
+    Protocol.Audits.SharedDictionaryError.WriteErrorNonIntegerTTLField,
+    {
+      file: 'sharedDictionaryWriteErrorNonIntegerTTLField.md',
+      links: specLinks,
+    },
+  ],
   [
     Protocol.Audits.SharedDictionaryError.WriteErrorNonListMatchDestField,
     {

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

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

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"]]
@@ -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

@@ -9,8 +9,6 @@ import * as Bindings from '../bindings/bindings.js';
 import * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 
-import {scopeTreeForScript} from './ScopeTreeCache.js';
-
 interface CachedScopeMap {
   sourceMap: SDK.SourceMap.SourceMap|undefined;
   mappingPromise: Promise<{variableMapping: Map<string, string>, thisMapping: string|null}>;
@@ -55,7 +53,7 @@ scopeTree:
     return null;
   }
 
-  const scopeTree = await scopeTreeForScript(script);
+  const scopeTree = await SDK.ScopeTreeCache.scopeTreeForScript(script);
   if (!scopeTree) {
     return null;
   }
@@ -240,7 +238,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 +682,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/source_map_scopes/source_map_scopes.ts

@@ -4,10 +4,8 @@
 
 import * as NamesResolver from './NamesResolver.js';
 import * as ScopeChainModel from './ScopeChainModel.js';
-import * as ScopeTreeCache from './ScopeTreeCache.js';
 
 export {
   NamesResolver,
   ScopeChainModel,
-  ScopeTreeCache,
 };

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/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[];
@@ -446,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.
@@ -511,6 +522,7 @@ export async function finalize(): Promise<void> {
                 stalled,
                 totalTime,
                 waiting,
+                serverResponseTime,
               },
               // All fields below are from TraceEventsForNetworkRequest.
               decodedBodyLength,

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 {