chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -329,6 +329,9 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         const inpEvent: InpValue = {
           value: webVitalsEvent.value,
           subparts: webVitalsEvent.subparts,
+          // Use our own "interactionId" rather than the Chrome/web-vitals
+          // provided one, so we can group events with same start time
+          // (e.g. `pointerup` and `click` are one interaction log entry)
           interactionId: `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}`,
         };
         this.#inpValue = inpEvent;
@@ -339,13 +342,17 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
             Platform.MapUtilities.getWithDefault(this.#interactionsByGroupId, webVitalsEvent.entryGroupId, () => []);
 
         // `nextPaintTime` uses the event duration which is rounded to the nearest 8ms. The best we can do
-        // is check if the `nextPaintTime`s are within 8ms.
+        // is check if the `nextPaintTime`s are within 8ms. Exclude undefined/null/0 nextPaintTimes.
         // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry/duration#event
-        let interaction = groupInteractions.find(
-            interaction => Math.abs(interaction.nextPaintTime - webVitalsEvent.nextPaintTime) < 8);
+        let interaction =
+            groupInteractions.find(interaction => interaction.nextPaintTime && webVitalsEvent.nextPaintTime &&
+                                       Math.abs(interaction.nextPaintTime - webVitalsEvent.nextPaintTime) < 8);
 
         if (!interaction) {
           interaction = {
+            // Use our own "interactionId" rather than the Chrome/web-vitals
+            // provided one, so we can group events with same start time
+            // (e.g. `pointerup` and `click` are one interaction log entry)
             interactionId: `interaction-${webVitalsEvent.entryGroupId}-${webVitalsEvent.startTime}`,
             interactionType: webVitalsEvent.interactionType,
             duration: webVitalsEvent.duration,
@@ -625,6 +632,9 @@ export const enum Events {
   STATUS = 'status',
 }
 
+// Use our own "interactionId" rather than the Chrome/web-vitals
+// provided one, so we can group events with same start time
+// (e.g. `pointerup` and `click` are one interaction log entry)
 export type InteractionId = `interaction-${number}-${number}`;
 
 export interface MetricValue {
@@ -652,13 +662,20 @@ export interface LayoutShift {
   affectedNodeRefs: SDK.DOMModel.DOMNode[];
 }
 
+/*
+ * Note web-vitals can emit "fake" INP events without an interactionType nor a
+ * nextPaintTime for small interactions after soft navs or bfcache restores.
+ * For hardNavs these would have a FID event, but for soft navs or bfcache
+ * restores there is no FID equivalent (it's only emitted once per page)
+ * so dummy events without full details are used.
+ */
 export interface Interaction {
   interactionId: InteractionId;
-  interactionType: Spec.InteractionEntryEvent['interactionType'];
+  interactionType?: Spec.InteractionEntryEvent['interactionType'];
   eventNames: string[];
   duration: number;
   startTime: number;
-  nextPaintTime: number;
+  nextPaintTime?: number;
   subparts: Spec.InpSubparts;
   longAnimationFrameTimings: Spec.PerformanceLongAnimationFrameTimingJSON[];
   nodeRef?: SDK.DOMModel.DOMNode;

package/front_end/models/live-metrics/web-vitals-injected/rollup.config.mjs

@@ -16,5 +16,5 @@ function isEnvVarTrue(envVar) {
 export default {
   treeshake: true,
   output: [{format: 'iife'}],
-  plugins: isEnvVarTrue(process.env.DEBUG_INJECTED) ? [] : [terser()]
+  plugins: isEnvVarTrue(process.env.DEBUG_INJECTED) ? [] : [terser()],
 };

package/front_end/models/live-metrics/web-vitals-injected/spec/spec.ts

@@ -84,16 +84,22 @@ export interface PerformanceLongAnimationFrameTimingJSON {
 }
 
 /**
- * This event is not 1:1 with the interactions that the user sees in the interactions log.
- * It is 1:1 with a `PerformanceEventTiming` entry.
+ * This event is not 1:1 with the interactions that the user sees in the
+ * interactions log. It is 1:1 with a web-vitals entry.
+ *
+ * Note web-vitals can emit "fake" INP events without an interactionType nor a
+ * nextPaintTime for small interactions after soft navs or bfcache restores.
+ * For hardNavs these would have a FID event, but for soft navs or bfcache
+ * restores there is no FID equivalent (it's only emitted once per page)
+ * so dummy events without full details are used.
  */
 export interface InteractionEntryEvent {
   name: 'InteractionEntry';
-  interactionType: INPAttribution['interactionType'];
+  interactionType?: INPAttribution['interactionType'];
   eventName: string;
   entryGroupId: InteractionEntryGroupId;
   startTime: number;
-  nextPaintTime: number;
+  nextPaintTime?: number;
   duration: Trace.Types.Timing.Milli;
   subparts: InpSubparts;
   nodeIndex?: number;

package/front_end/models/logs/logs-meta.ts

@@ -7,37 +7,43 @@ import * as i18n from '../../core/i18n/i18n.js';
 
 const UIStrings = {
   /**
-   * @description Text to preserve the log after refreshing
+   * @description Text to keep the log after refreshing.
    */
-  preserveLog: 'Keep log',
+  keepLog: 'Keep log',
   /**
    * @description A term that can be used to search in the command menu, and will find the search
-   * result 'Preserve log on page reload / navigation'. This is an additional search term to help
-   * user find the setting even when they don't know the exact name of it.
+   * result 'Keep log on page reload / navigation'. This is an additional search term to help
+   * the user find the setting even when they don't know the exact name of it.
+   */
+  keep: 'keep',
+  /**
+   * @description A term that can be used to search in the command menu, and will find the search
+   * result 'Keep log on page reload / navigation'. This is an additional search term to help
+   * the user find the setting even when they don't know the exact name of it.
    */
   preserve: 'preserve',
   /**
    * @description A term that can be used to search in the command menu, and will find the search
-   * result 'Preserve log on page reload / navigation'. This is an additional search term to help
-   * user find the setting even when they don't know the exact name of it.
+   * result 'Keep log on page reload / navigation'. This is an additional search term to help
+   * the user find the setting even when they don't know the exact name of it.
    */
   clear: 'clear',
   /**
    * @description A term that can be used to search in the command menu, and will find the search
-   * result 'Preserve log on page reload / navigation'. This is an additional search term to help
-   * user find the setting even when they don't know the exact name of it.
+   * result 'Keep log on page reload / navigation'. This is an additional search term to help
+   * the user find the setting even when they don't know the exact name of it.
    */
   reset: 'reset',
   /**
-   * @description Title of a setting under the Network category that can be invoked through the Command Menu
+   * @description Title of a setting under the Network category that can be invoked through the Command Menu.
    */
-  preserveLogOnPageReload: 'Keep log on page reload / navigation',
+  keepLogOnPageReload: 'Keep log on page reload / navigation',
   /**
-   * @description Title of a setting under the Network category that can be invoked through the Command Menu
+   * @description Title of a setting under the Network category that can be invoked through the Command Menu.
    */
-  doNotPreserveLogOnPageReload: 'Don’t keep log on page reload / navigation',
+  doNotKeepLogOnPageReload: 'Don’t keep log on page reload / navigation',
   /**
-   * @description Title of an action in the network tool to toggle recording
+   * @description Title of an action in the network tool to toggle recording.
    */
   recordNetworkLog: 'Record network log',
 } as const;
@@ -46,11 +52,12 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.NETWORK,
-  title: i18nLazyString(UIStrings.preserveLog),
+  title: i18nLazyString(UIStrings.keepLog),
   settingName: 'network-log.preserve-log',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: false,
   tags: [
+    i18nLazyString(UIStrings.keep),
     i18nLazyString(UIStrings.preserve),
     i18nLazyString(UIStrings.clear),
     i18nLazyString(UIStrings.reset),
@@ -58,11 +65,11 @@ Common.Settings.registerSettingExtension({
   options: [
     {
       value: true,
-      title: i18nLazyString(UIStrings.preserveLogOnPageReload),
+      title: i18nLazyString(UIStrings.keepLogOnPageReload),
     },
     {
       value: false,
-      title: i18nLazyString(UIStrings.doNotPreserveLogOnPageReload),
+      title: i18nLazyString(UIStrings.doNotKeepLogOnPageReload),
     },
   ],
 });

package/front_end/models/persistence/AutomaticFileSystemWorkspaceBinding.ts

@@ -13,11 +13,11 @@ import * as Workspace from '../workspace/workspace.js';
 import {
   type AutomaticFileSystem,
   type AutomaticFileSystemManager,
-  Events as AutomaticFileSystemManagerEvents
+  Events as AutomaticFileSystemManagerEvents,
 } from './AutomaticFileSystemManager.js';
 import {
   Events as IsolatedFileSystemManagerEvents,
-  type IsolatedFileSystemManager
+  type IsolatedFileSystemManager,
 } from './IsolatedFileSystemManager.js';
 
 /**

package/front_end/models/persistence/IsolatedFileSystem.ts

@@ -42,7 +42,7 @@ const UIStrings = {
    * @description Error message shown when devtools failed to create a file system directory.
    * @example {path/} PH1
    */
-  createDirFailed: 'Overrides: Failed to create directory {PH1}. Are the workspace or overrides configured correctly?'
+  createDirFailed: 'Overrides: Failed to create directory {PH1}. Are the workspace or overrides configured correctly?',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('models/persistence/IsolatedFileSystem.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/models/persistence/IsolatedFileSystemManager.ts

@@ -13,7 +13,7 @@ import {IsolatedFileSystem} from './IsolatedFileSystem.js';
 import {
   Events as PlatformFileSystemEvents,
   type PlatformFileSystem,
-  PlatformFileSystemType
+  PlatformFileSystemType,
 } from './PlatformFileSystem.js';
 
 const UIStrings = {

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -5,7 +5,7 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as Bindings from '../bindings/bindings.js';
+import type * as Bindings from '../bindings/bindings.js';
 import * as Formatter from '../formatter/formatter.js';
 
 interface CachedScopeMap {
@@ -187,7 +187,9 @@ const enum Punctuation {
   EQUALS = 'equals',
 }
 
-const resolveDebuggerScope = async(scope: SDK.DebuggerModel.ScopeChainEntry):
+const resolveDebuggerScope = async(
+    scope: SDK.DebuggerModel.ScopeChainEntry,
+    debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
     Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
       if (!scope.callFrame()
                .debuggerModel.target()
@@ -198,10 +200,11 @@ const resolveDebuggerScope = async(scope: SDK.DebuggerModel.ScopeChainEntry):
       }
       const script = scope.callFrame().script;
       const scopeChain = await findScopeChainForDebuggerScope(scope);
-      return await resolveScope(script, scopeChain);
+      return await resolveScope(script, scopeChain, debuggerWorkspaceBinding);
     };
 
-const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.FormatterWorkerPool.ScopeTreeNode[]):
+const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.FormatterWorkerPool.ScopeTreeNode[],
+                           debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
     Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
       const parsedScope = scopeChain[scopeChain.length - 1];
       if (!parsedScope) {
@@ -242,7 +245,8 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
                   // mappings agree. However, that can be expensive for identifiers with many uses,
                   // so we iterate sequentially, stopping at the first non-empty mapping.
                   for (const position of id.positions) {
-                    const sourceName = await resolveSourceName(script, sourceMap, id.name, position);
+                    const sourceName =
+                        await resolveSourceName(script, sourceMap, id.name, position, debuggerWorkspaceBinding);
                     if (sourceName) {
                       handler(sourceName);
                       return;
@@ -282,8 +286,7 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
       async function resolveSourceName(
           script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, name: string,
           position: {lineNumber: number, columnNumber: number},
-          debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-              Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()): Promise<string|null> {
+          debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): Promise<string|null> {
         const ranges = sourceMap.findEntryRanges(position.lineNumber, position.columnNumber);
         if (!ranges) {
           return null;
@@ -368,8 +371,7 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
 
 export const resolveScopeChain =
     async function(callFrame: SDK.DebuggerModel.CallFrame,
-                   debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-                       Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()):
+                   debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
         Promise<SDK.DebuggerModel.ScopeChainEntry[]> {
           const {pluginManager} = debuggerWorkspaceBinding;
           const scopeChain: SDK.DebuggerModel.ScopeChainEntry[]|null|undefined =
@@ -385,96 +387,104 @@ export const resolveScopeChain =
           if (callFrame.script.isWasm()) {
             return callFrame.scopeChain();
           }
-          const thisObject = await resolveThisObject(callFrame);
-          return callFrame.scopeChain().map(scope => new ScopeWithSourceMappedVariables(scope, thisObject));
+          const thisObject = await resolveThisObject(callFrame, debuggerWorkspaceBinding);
+          return callFrame.scopeChain().map(
+              scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
         };
 
 /**
  * @returns A mapping from original name -> compiled name. If the orignal name is unavailable (e.g. because the compiled name was
  * shadowed) we set it to `null`.
  */
-export const allVariablesInCallFrame =
-    async(callFrame: SDK.DebuggerModel.CallFrame): Promise<Map<string, string|null>> => {
-  if (!callFrame.debuggerModel.target().targetManager().settings.moduleSetting('js-source-maps-enabled').get()) {
-    return new Map<string, string|null>();
-  }
-  const cachedMap = cachedMapByCallFrame.get(callFrame);
-  if (cachedMap) {
-    return cachedMap;
-  }
-
-  const scopeChain = callFrame.scopeChain();
-  const nameMappings = await Promise.all(scopeChain.map(resolveDebuggerScope));
-  const reverseMapping = new Map<string, string|null>();
-  const compiledNames = new Set<string>();
-  for (const {variableMapping} of nameMappings) {
-    for (const [compiledName, originalName] of variableMapping) {
-      if (!originalName) {
-        continue;
+export const allVariablesInCallFrame = async(
+    callFrame: SDK.DebuggerModel.CallFrame,
+    debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
+    Promise<Map<string, string|null>> => {
+      if (!callFrame.debuggerModel.target().targetManager().settings.moduleSetting('js-source-maps-enabled').get()) {
+        return new Map<string, string|null>();
       }
-      if (!reverseMapping.has(originalName)) {
-        // An inner scope might have shadowed {compiledName}. Mark it as "unavailable" in that case.
-        const compiledNameOrNull = compiledNames.has(compiledName) ? null : compiledName;
-        reverseMapping.set(originalName, compiledNameOrNull);
+      const cachedMap = cachedMapByCallFrame.get(callFrame);
+      if (cachedMap) {
+        return cachedMap;
       }
-      compiledNames.add(compiledName);
-    }
-  }
-  cachedMapByCallFrame.set(callFrame, reverseMapping);
-  return reverseMapping;
-};
+
+      const scopeChain = callFrame.scopeChain();
+      const nameMappings =
+          await Promise.all(scopeChain.map(scope => resolveDebuggerScope(scope, debuggerWorkspaceBinding)));
+      const reverseMapping = new Map<string, string|null>();
+      const compiledNames = new Set<string>();
+      for (const {variableMapping} of nameMappings) {
+        for (const [compiledName, originalName] of variableMapping) {
+          if (!originalName) {
+            continue;
+          }
+          if (!reverseMapping.has(originalName)) {
+            // An inner scope might have shadowed {compiledName}. Mark it as "unavailable" in that case.
+            const compiledNameOrNull = compiledNames.has(compiledName) ? null : compiledName;
+            reverseMapping.set(originalName, compiledNameOrNull);
+          }
+          compiledNames.add(compiledName);
+        }
+      }
+      cachedMapByCallFrame.set(callFrame, reverseMapping);
+      return reverseMapping;
+    };
 
 /**
  * @returns A mapping from original name -> compiled name. If the orignal name is unavailable (e.g. because the compiled name was
  * shadowed) we set it to `null`.
  */
 export const allVariablesAtPosition =
-    async(location: SDK.DebuggerModel.Location): Promise<Map<string, string|null>> => {
-  const reverseMapping = new Map<string, string|null>();
-  const script = location.script();
-  if (!script) {
-    return reverseMapping;
-  }
-  if (!script.debuggerModel.target().targetManager().settings.moduleSetting('js-source-maps-enabled').get()) {
-    return reverseMapping;
-  }
+    async(location: SDK.DebuggerModel.Location,
+          debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
+        Promise<Map<string, string|null>> => {
+          const reverseMapping = new Map<string, string|null>();
+          const script = location.script();
+          if (!script) {
+            return reverseMapping;
+          }
+          if (!script.debuggerModel.target().targetManager().settings.moduleSetting('js-source-maps-enabled').get()) {
+            return reverseMapping;
+          }
 
-  const scopeTreeAndText = await computeScopeTree(script);
-  if (!scopeTreeAndText) {
-    return reverseMapping;
-  }
+          const scopeTreeAndText = await computeScopeTree(script);
+          if (!scopeTreeAndText) {
+            return reverseMapping;
+          }
 
-  const {scopeTree, text} = scopeTreeAndText;
-  const locationOffset = text.offsetFromPosition(location.lineNumber, location.columnNumber);
-  const scopeChain = findScopeChain(scopeTree, {start: locationOffset, end: locationOffset});
-  const compiledNames = new Set<string>();
-
-  while (scopeChain.length > 0) {
-    const {variableMapping} = await resolveScope(script, scopeChain);
-    for (const [compiledName, originalName] of variableMapping) {
-      if (!originalName) {
-        continue;
-      }
-      if (!reverseMapping.has(originalName)) {
-        // An inner scope might have shadowed {compiledName}. Mark it as "unavailable" in that case.
-        const compiledNameOrNull = compiledNames.has(compiledName) ? null : compiledName;
-        reverseMapping.set(originalName, compiledNameOrNull);
-      }
-      compiledNames.add(compiledName);
-    }
-    scopeChain.pop();
-  }
-  return reverseMapping;
-};
+          const {scopeTree, text} = scopeTreeAndText;
+          const locationOffset = text.offsetFromPosition(location.lineNumber, location.columnNumber);
+          const scopeChain = findScopeChain(scopeTree, {start: locationOffset, end: locationOffset});
+          const compiledNames = new Set<string>();
+
+          while (scopeChain.length > 0) {
+            const {variableMapping} = await resolveScope(script, scopeChain, debuggerWorkspaceBinding);
+            for (const [compiledName, originalName] of variableMapping) {
+              if (!originalName) {
+                continue;
+              }
+              if (!reverseMapping.has(originalName)) {
+                // An inner scope might have shadowed {compiledName}. Mark it as "unavailable" in that case.
+                const compiledNameOrNull = compiledNames.has(compiledName) ? null : compiledName;
+                reverseMapping.set(originalName, compiledNameOrNull);
+              }
+              compiledNames.add(compiledName);
+            }
+            scopeChain.pop();
+          }
+          return reverseMapping;
+        };
 
-export const resolveThisObject =
-    async(callFrame: SDK.DebuggerModel.CallFrame): Promise<SDK.RemoteObject.RemoteObject|null> => {
+export const resolveThisObject = async(
+    callFrame: SDK.DebuggerModel.CallFrame,
+    debuggerWorkspaceBinding:
+        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): Promise<SDK.RemoteObject.RemoteObject|null> => {
   const scopeChain = callFrame.scopeChain();
   if (scopeChain.length === 0) {
     return callFrame.thisObject();
   }
 
-  const {thisMapping} = await resolveDebuggerScope(scopeChain[0]);
+  const {thisMapping} = await resolveDebuggerScope(scopeChain[0], debuggerWorkspaceBinding);
   if (!thisMapping) {
     return callFrame.thisObject();
   }
@@ -493,7 +503,9 @@ export const resolveThisObject =
   return null;
 };
 
-export const resolveScopeInObject = function(scope: SDK.DebuggerModel.ScopeChainEntry): SDK.RemoteObject.RemoteObject {
+export const resolveScopeInObject = function(scope: SDK.DebuggerModel.ScopeChainEntry,
+                                             debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding
+                                                 .DebuggerWorkspaceBinding): SDK.RemoteObject.RemoteObject {
   const endLocation = scope.range()?.end;
   const startLocationScript = scope.range()?.start.script() ?? null;
 
@@ -502,7 +514,7 @@ export const resolveScopeInObject = function(scope: SDK.DebuggerModel.ScopeChain
     return scope.object();
   }
 
-  return new RemoteObject(scope);
+  return new RemoteObject(scope, debuggerWorkspaceBinding);
 };
 
 /**
@@ -516,10 +528,13 @@ class ScopeWithSourceMappedVariables implements SDK.DebuggerModel.ScopeChainEntr
   readonly #debuggerScope: SDK.DebuggerModel.ScopeChainEntry;
   /** The resolved `this` of the current call frame */
   readonly #thisObject: SDK.RemoteObject.RemoteObject|null;
+  readonly #debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
 
-  constructor(scope: SDK.DebuggerModel.ScopeChainEntry, thisObject: SDK.RemoteObject.RemoteObject|null) {
+  constructor(scope: SDK.DebuggerModel.ScopeChainEntry, thisObject: SDK.RemoteObject.RemoteObject|null,
+              debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding) {
     this.#debuggerScope = scope;
     this.#thisObject = thisObject;
+    this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
   }
 
   callFrame(): SDK.DebuggerModel.CallFrame {
@@ -543,7 +558,7 @@ class ScopeWithSourceMappedVariables implements SDK.DebuggerModel.ScopeChainEntr
   }
 
   object(): SDK.RemoteObject.RemoteObject {
-    return resolveScopeInObject(this.#debuggerScope);
+    return resolveScopeInObject(this.#debuggerScope, this.#debuggerWorkspaceBinding);
   }
 
   description(): string {
@@ -567,10 +582,14 @@ class ScopeWithSourceMappedVariables implements SDK.DebuggerModel.ScopeChainEntr
 export class RemoteObject extends SDK.RemoteObject.RemoteObject {
   private readonly scope: SDK.DebuggerModel.ScopeChainEntry;
   private readonly object: SDK.RemoteObject.RemoteObject;
-  constructor(scope: SDK.DebuggerModel.ScopeChainEntry) {
+  readonly #debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
+
+  constructor(scope: SDK.DebuggerModel.ScopeChainEntry,
+              debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding) {
     super();
     this.scope = scope;
     this.object = scope.object();
+    this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
   }
 
   override customPreview(): Protocol.Runtime.CustomPreview|null {
@@ -616,7 +635,7 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
   override async getAllProperties(accessorPropertiesOnly: boolean, generatePreview: boolean):
       Promise<SDK.RemoteObject.GetPropertiesResult> {
     const allProperties = await this.object.getAllProperties(accessorPropertiesOnly, generatePreview);
-    const {variableMapping} = await resolveDebuggerScope(this.scope);
+    const {variableMapping} = await resolveDebuggerScope(this.scope, this.#debuggerWorkspaceBinding);
 
     const properties = allProperties.properties;
     const internalProperties = allProperties.internalProperties;
@@ -629,7 +648,7 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
 
   override async setPropertyValue(argumentName: string|Protocol.Runtime.CallArgument, value: string):
       Promise<string|undefined> {
-    const {variableMapping} = await resolveDebuggerScope(this.scope);
+    const {variableMapping} = await resolveDebuggerScope(this.scope, this.#debuggerWorkspaceBinding);
 
     let name;
     if (typeof argumentName === 'string') {
@@ -735,8 +754,7 @@ export async function resolveDebuggerFrameFunctionName(frame: SDK.DebuggerModel.
 
 export async function resolveProfileFrameFunctionName(
     {scriptId, lineNumber, columnNumber}: Partial<Protocol.Runtime.CallFrame>, target: SDK.Target.Target|null,
-    debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()): Promise<string|null> {
+    debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): Promise<string|null> {
   if (!target || lineNumber === undefined || columnNumber === undefined || scriptId === undefined) {
     return null;
   }

package/front_end/models/source_map_scopes/ScopeChainModel.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Bindings from '../bindings/bindings.js';
 
 import {resolveScopeChain} from './NamesResolver.js';
 
@@ -21,14 +22,17 @@ import {resolveScopeChain} from './NamesResolver.js';
  */
 export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly #callFrame: SDK.DebuggerModel.CallFrame;
+  readonly #debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
 
   /** We use the `Throttler` here to make sure that `#boundUpdate` is not run multiple times simultanously */
   readonly #throttler = new Common.Throttler.Throttler(5);
   readonly #boundUpdate = this.#update.bind(this);
 
-  constructor(callFrame: SDK.DebuggerModel.CallFrame) {
+  constructor(callFrame: SDK.DebuggerModel.CallFrame,
+              debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding) {
     super();
     this.#callFrame = callFrame;
+    this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
     this.#callFrame.debuggerModel.addEventListener(
         SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
     this.#callFrame.debuggerModel.sourceMapManager().addEventListener(
@@ -46,7 +50,7 @@ export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   async #update(): Promise<void> {
-    const scopeChain = await resolveScopeChain(this.#callFrame);
+    const scopeChain = await resolveScopeChain(this.#callFrame, this.#debuggerWorkspaceBinding);
     this.dispatchEventToListeners(Events.SCOPE_CHAIN_UPDATED, new ScopeChain(scopeChain));
   }
 

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -17,7 +17,7 @@ import {
   FragmentImpl,
   FrameImpl,
   ParsedErrorStackFragmentImpl,
-  StackTraceImpl
+  StackTraceImpl,
 } from './StackTraceImpl.js';
 import {EvalOrigin, type FrameNode, type RawFrame, Trie} from './Trie.js';
 

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

@@ -135,7 +135,7 @@ export function extractConsoleAPIExtensionEntries(): void {
       ph: Types.Events.Phase.COMPLETE,
       ts: entryStartTime,
       dur: Types.Timing.Micro(entryEndTime - entryStartTime),
-      rawSourceEvent: currentTimeStamp
+      rawSourceEvent: currentTimeStamp,
     };
     const syntheticTimeStamp =
         Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticConsoleTimeStamp>(

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

@@ -171,7 +171,7 @@ function getEventTrack(event: Types.Events.SyntheticEventPair|Types.Events.Conso
  *
  */
 export function userTimingComparator<T extends Types.Events.SyntheticEventPair|Types.Events.ConsoleTimeStamp>(
-    a: T, b: T, originalArray: readonly T[]): number {
+    a: T, b: T, originalIndex: ReadonlyMap<T, number>): number {
   const {start: aStart, end: aEnd} = getEventTimings(a);
   const {start: bStart, end: bEnd} = getEventTimings(b);
   const timeDifference = Helpers.Trace.compareBeginAndEnd(aStart, bStart, aEnd, bEnd);
@@ -186,9 +186,13 @@ export function userTimingComparator<T extends Types.Events.SyntheticEventPair|T
     return 0;  // Preserve current positions.
   }
 
-  // Prefer the event located in a further position in the original array.
-  const aIndex = originalArray.indexOf(a);
-  const bIndex = originalArray.indexOf(b);
+  // When events share the same timestamp, use their original array position
+  // to determine stacking order: children are appended after their parents,
+  // so reversing by index ensures children render on top.
+  // Uses a pre-computed index map for O(1) lookups instead of indexOf
+  // to keep the overall sort at O(N log N).
+  const aIndex = originalIndex.get(a) ?? -1;
+  const bIndex = originalIndex.get(b) ?? -1;
   return bIndex - aIndex;
 }
 
@@ -217,8 +221,15 @@ export function handleEvent(event: Types.Events.Event): void {
 export async function finalize(): Promise<void> {
   const asyncEvents = [...performanceMeasureEvents, ...consoleTimings];
   syntheticEvents = Helpers.Trace.createMatchedSortedSyntheticEvents(asyncEvents);
-  syntheticEvents = syntheticEvents.sort((a, b) => userTimingComparator(a, b, [...syntheticEvents]));
-  timestampEvents = timestampEvents.sort((a, b) => userTimingComparator(a, b, [...timestampEvents]));
+
+  // Pre-compute event→index maps before sorting so the comparator can
+  // resolve original positions in O(1). This keeps the sort O(N log N)
+  // rather than O(N² log N) which would occur if the index were looked
+  // up via indexOf or if the array were re-spread per comparison.
+  const syntheticIndex = new Map(syntheticEvents.map((e, i) => [e, i] as const));
+  syntheticEvents = syntheticEvents.sort((a, b) => userTimingComparator(a, b, syntheticIndex));
+  const timestampIndex = new Map(timestampEvents.map((e, i) => [e, i] as const));
+  timestampEvents = timestampEvents.sort((a, b) => userTimingComparator(a, b, timestampIndex));
 }
 
 export function data(): UserTimingsData {

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

@@ -531,7 +531,7 @@ export class SamplesIntegrator {
       traceEvents: [cpuProfileEvent],
       metadata: {
         dataOrigin: Types.File.DataOrigin.CPU_PROFILE,
-      }
+      },
     };
   }