chrome-devtools-frontend 1.0.1704172 → 1.0.1706026

package/AUTHORS

@@ -124,6 +124,7 @@ Yoichiro Hibara <hibarayoichiro871@gmail.com>
 Yoni Feigelson <yfeigelson@gmail.com>
 Young Min Kim <y@ylem.kim>
 Yuan Zhuang <joann.yuanzhuang@gmail.com>
+Zeeshan Ahmad <zeeshanahmad125114@gmail.com>
 Zuyao Chen <zuyaocat@gmail.com>
 # Please DO NOT APPEND here. See comments at the top of the file.
 # END individuals section.

package/docs/architecture_of_devtools.md

@@ -121,7 +121,7 @@ There are multiple variants of the DevTools application.
 The main DevTools application is [devtools_app.ts](../front_end/entrypoints/devtools_app/devtools_app.ts), which developers can open via F12 or "Right click -> Inspect element" in their Chromium browser.
 Other application entrypoints are a dedicated tool for debugging Node on which multiple targets can be inspected ([node_app.ts](../front_end/entrypoints/node_app/node_app.ts)), a non-browser context debugger for V8 targets ([js_app.ts](../front_end/entrypoints/js_app/js_app.ts)), a (service) worker context ([worker_app.ts](../front_end/entrypoints/worker_app/worker_app.ts)), remote debugging of (Android) devices ([inspector.ts](../front_end/entrypoints/inspector/inspector.ts)) and a basic version of DevTools which was initially intended for non-browser targets but doesn't have any particular use case that differentiates it from the other variants ([ndb_app.ts](../front_end/entrypoints/ndb_app/ndb_app.ts)).
 
-Each application entrypoint has a corresponding `.html` file with the same name, that is automatically in the frontend generated and can be loaded by the Chromium DevTools backend.
+Each application entrypoint has a corresponding `.html` file with the same name, that is automatically generated in the frontend and can be loaded by the Chromium DevTools backend.
 The JavaScript files import the relevant "meta" files containing the declarations of DevTools features.
 
 ## Upfront declaration of DevTools features

package/docs/cookbook/localization.md

@@ -286,8 +286,8 @@ const UIStrings = {
 
 ## How to prevent a term being localized
 
-Any text within the backticks will not be translated. For example, if the
-'robots.txt' in string 'Requesting for robots.txt …' should not be translated:
+Any text within the backticks will not be translated. For example,
+'robots.txt' in the string 'Requesting for robots.txt …' should not be translated:
 
 ```ts
 // in example.js file

package/eslint.config.mjs

@@ -628,6 +628,7 @@ export default defineConfig([
       '@devtools/l10n-no-i18nString-calls-module-instantiation': 'error',
       '@devtools/l10n-no-uistrings-export': 'error',
       '@devtools/l10n-no-unused-message': 'error',
+      '@devtools/l10n-uistrings-sentence-punctuation': 'error',
       '@devtools/l10n-uistrings-text-style': 'error',
     },
   },

package/front_end/Images/src/nodejsHex.svg

@@ -0,0 +1,28 @@
+<svg width="200" height="200" viewBox="0 0 44 50" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="hexClip">
+      <path d="M22.8725 0.4166C22.136 0 21.2616 0 20.5253 0.4166L1.1505 11.6694C0.4142 12.0862 0 12.8733 0 13.707V36.2584C0 37.0921 0.4602 37.8791 1.1505 38.296L20.5253 49.5487C21.2616 49.9653 22.136 49.9653 22.8725 49.5487L42.2471 38.296C42.9836 37.8791 43.3976 37.0921 43.3976 36.2584V13.707C43.3976 12.8733 42.9375 12.0862 42.2471 11.6694L22.8725 0.4166Z" />
+    </clipPath>
+    <linearGradient id="main" x1="30.33" y1="8.56" x2="14.9" y2="44.7" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#3F8B3D"/>
+      <stop offset="0.64" stop-color="#3F873F"/>
+      <stop offset="0.93" stop-color="#3DA92E"/>
+      <stop offset="1" stop-color="#3DAE2B"/>
+    </linearGradient>
+    <linearGradient id="r1" x1="18.8" y1="26.8" x2="68" y2="0.4" gradientUnits="userSpaceOnUse">
+      <stop offset="0.14" stop-color="#3F873F"/>
+      <stop offset="0.4" stop-color="#52A044"/>
+      <stop offset="0.71" stop-color="#64B749"/>
+      <stop offset="0.91" stop-color="#6ABF4B"/>
+    </linearGradient>
+    <linearGradient id="r2" x1="0.25" y1="24.5" x2="44" y2="24.5" gradientUnits="userSpaceOnUse">
+      <stop offset="0.09" stop-color="#6ABF4B"/>
+      <stop offset="0.29" stop-color="#64B749"/>
+      <stop offset="0.6" stop-color="#52A044"/>
+      <stop offset="0.86" stop-color="#3F873F"/>
+    </linearGradient>
+  </defs>
+  <path fill="url(#main)" d="M22.8725 0.4166C22.136 0 21.2616 0 20.5253 0.4166L1.1505 11.6694C0.4142 12.0862 0 12.8733 0 13.707V36.2584C0 37.0921 0.4602 37.8791 1.1505 38.296L20.5253 49.5487C21.2616 49.9653 22.136 49.9653 22.8725 49.5487L42.2471 38.296C42.9836 37.8791 43.3976 37.0921 43.3976 36.2584V13.707C43.3976 12.8733 42.9375 12.0862 42.2471 11.6694L22.8725 0.4166Z" />
+  <polygon fill="url(#r1)" clip-path="url(#hexClip)" points="21.698901,-1.046618 43.20532,11.948247 21.698901,51.072715 0.152778,38.055107" />
+  <polygon fill="url(#r2)" clip-path="url(#hexClip)" points="21.698901,-1.046618 0.152778,11.948247 21.698901,51.072715 43.20532,38.055107" />
+</svg>

package/front_end/core/common/README.md

@@ -6,14 +6,15 @@ A settings registration is represented by the `SettingRegistration` interface, d
 
 All settings have to be registered using the function `Common.Settings.registerSettingExtension` which expects an object of type `SettingRegistration` as parameter.
 
-As an example, take the registration of the `showHTMLComments` setting, which allows users to determine if HTML comments are shown in the Elements tree:
+As an example, take the registration of the `show-html-comments` setting, which allows users to determine if HTML comments are shown in the Elements tree:
 
 ```ts
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.ELEMENTS,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
   order: 3,
-  title: ls`Show HTML comments`,
-  settingName: 'showHTMLComments',
+  title: ls`HTML comments`,
+  settingName: 'show-html-comments',
   settingType: Common.Settings.SettingType.BOOLEAN,
   defaultValue: true,
   options: [

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -191,19 +191,22 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
     }
   }
 
-  #isCPUPerformanceOverrideActive(): boolean {
-    return this.#manualCPUPerformanceOverride !== undefined || this.#cpuThrottlingRate !== 1;
+  #activeCPUPerformanceOverride(): CPUPerformanceTier|undefined {
+    // If neither a manual override nor CPU throttling is enabled, no override is active.
+    if (this.#manualCPUPerformanceOverride === undefined && this.#cpuThrottlingRate === 1) {
+      return undefined;
+    }
+    return this.effectiveCPUPerformanceTier();
   }
 
   #syncCPUPerformanceTier(): void {
-    const effectiveTier = this.effectiveCPUPerformanceTier();
     // Synchronize with Chromium backend, via CDP.
-    const activeOverride = this.#isCPUPerformanceOverrideActive() ? effectiveTier : undefined;
+    const activeOverride = this.#activeCPUPerformanceOverride();
     for (const emulationModel of this.#targetManager.models(EmulationModel)) {
       void emulationModel.setCPUPerformanceOverride(activeOverride);
     }
     // Notify UI and other listeners.
-    this.dispatchEventToListeners(Events.CPU_PERFORMANCE_TIER_CHANGED, effectiveTier);
+    this.dispatchEventToListeners(Events.CPU_PERFORMANCE_TIER_CHANGED, this.effectiveCPUPerformanceTier());
   }
 
   setCPUThrottlingRate(rate: number): void {
@@ -282,9 +285,9 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   async updateHostDefaultCPUPerformanceTier(): Promise<void> {
-    if (this.#isCPUPerformanceOverrideActive()) {
-      // We do not want to update the host default tier when it is overridden
-      // (in which case, `navigator.cpuPerformance` would return the override).
+    if (this.#activeCPUPerformanceOverride() !== undefined) {
+      // We do not want to update the host default tier if an override has already been sent
+      // to the backend (in which case, `navigator.cpuPerformance` would return the override).
       return;
     }
     const target = this.#targetManager.primaryPageTarget();
@@ -314,8 +317,9 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
     if (this.#hardwareConcurrency !== undefined) {
       void emulationModel.setHardwareConcurrency(this.#hardwareConcurrency);
     }
-    if (this.#isCPUPerformanceOverrideActive()) {
-      void emulationModel.setCPUPerformanceOverride(this.effectiveCPUPerformanceTier());
+    const activeOverride = this.#activeCPUPerformanceOverride();
+    if (activeOverride !== undefined) {
+      void emulationModel.setCPUPerformanceOverride(activeOverride);
     }
 
     // If there are any callers blocked on a getHardwareConcurrency call, let's wake them now.

package/front_end/core/sdk/DOMModel.ts

@@ -319,7 +319,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
 
     const frameOwnerTags = new Set(['EMBED', 'IFRAME', 'OBJECT', 'FENCEDFRAME']);
     if (payload.contentDocument) {
-      this.contentDocumentInternal = new DOMDocument(this.#domModel, payload.contentDocument);
+      this.contentDocumentInternal = new DOMDocument(this.#domModel, payload.contentDocument, payload.frameId);
       this.contentDocumentInternal.parentNode = this;
       this.childrenInternal = [];
     } else if (payload.frameId && frameOwnerTags.has(payload.nodeName)) {
@@ -1391,17 +1391,27 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   async takeSnapshot(ownerDocumentSnapshot?: DOMDocument): Promise<DOMNode> {
-    const snapshot = (this instanceof DOMDocument) ? new DOMDocumentSnapshot(this.domModel(), {
-      nodeId: this.id,
-      backendNodeId: this.backendNodeId(),
-      nodeType: this.nodeType(),
-      nodeName: this.nodeName(),
-      localName: this.localName(),
-      nodeValue: this.nodeValueInternal,
-      documentURL: this.documentURL,
-      baseURL: this.baseURL,
-    } as Protocol.DOM.Node) :
-                                                     new DOMNodeSnapshot(this.domModel());
+    let snapshot: DOMNode;
+    if (this instanceof DOMDocument) {
+      const doc: DOMDocument = this;
+      snapshot = new DOMDocumentSnapshot(
+          this.domModel(),
+          {
+            nodeId: this.id,
+            backendNodeId: this.backendNodeId(),
+            nodeType: this.nodeType(),
+            nodeName: this.nodeName(),
+            localName: this.localName(),
+            nodeValue: this.nodeValueInternal,
+            documentURL: this.documentURL,
+            baseURL: this.baseURL,
+          } as Protocol.DOM.Node,
+          this.frameId(),
+          doc.securityOrigin(),
+      );
+    } else {
+      snapshot = new DOMNodeSnapshot(this.domModel());
+    }
     snapshot.id = this.id;
     snapshot.#backendNodeId = this.#backendNodeId;
     snapshot.#frameOwnerFrameId = this.#frameOwnerFrameId;
@@ -1573,16 +1583,28 @@ export class DOMDocument extends DOMNode {
   documentElement: DOMNode|null;
   #documentURL: Platform.DevToolsPath.UrlString;
   #baseURL: Platform.DevToolsPath.UrlString;
+  #frameId: Protocol.Page.FrameId|null;
   #securityOrigin: SecurityOrigin;
 
-  constructor(domModel: DOMModel, payload: Protocol.DOM.Node) {
+  constructor(
+      domModel: DOMModel,
+      payload: Protocol.DOM.Node,
+      frameId?: Protocol.Page.FrameId|null,
+  ) {
     super(domModel);
     this.body = null;
     this.documentElement = null;
     this.init(this, false, payload);
     this.#documentURL = (payload.documentURL || '') as Platform.DevToolsPath.UrlString;
     this.#baseURL = (payload.baseURL || '') as Platform.DevToolsPath.UrlString;
-    this.#securityOrigin = SecurityOrigin.create(this.#documentURL);
+    this.#frameId = frameId ?? null;
+
+    const resourceTreeModel = this.domModel().target().model(ResourceTreeModel);
+    const frame = this.#frameId ? resourceTreeModel?.frameForId(this.#frameId) : resourceTreeModel?.mainFrame;
+    // In production, DOMDocument should always resolve its security origin from an
+    // associated frame, but falls back to SecurityOrigin.create() as a last resort
+    // for test environments where no frame exists.
+    this.#securityOrigin = frame?.securityOrigin() ?? SecurityOrigin.create(this.#documentURL);
   }
 
   get documentURL(): Platform.DevToolsPath.UrlString {
@@ -1593,10 +1615,14 @@ export class DOMDocument extends DOMNode {
     return this.#baseURL;
   }
 
+  override frameId(): Protocol.Page.FrameId|null {
+    return this.#frameId;
+  }
+
   /**
    * Returns the security origin of this document.
    *
-   * The security origin is derived from the document URL and is recomputed
+   * The security origin is resolved from the document's frame and is recomputed
    * when the document navigates to a new URL via `setDocumentURL`.
    */
   override securityOrigin(): SecurityOrigin {
@@ -1604,12 +1630,14 @@ export class DOMDocument extends DOMNode {
   }
 
   /**
-   * Updates the document and base URLs, and recomputes the document's security origin.
+   * Updates the document and base URLs, and updates the document's security origin.
    */
-  setDocumentURL(url: Platform.DevToolsPath.UrlString): void {
+  setDocumentURL(url: Platform.DevToolsPath.UrlString, securityOrigin?: SecurityOrigin|null): void {
     this.#documentURL = url;
     this.#baseURL = url;
-    this.#securityOrigin = SecurityOrigin.create(url);
+    // Prefer the canonical security origin from the frame, falling back to creating
+    // an origin from the URL as a last resort for test environments.
+    this.#securityOrigin = securityOrigin ?? SecurityOrigin.create(url);
   }
 }
 
@@ -1695,7 +1723,7 @@ export class DOMModel extends SDKModel<EventTypes> {
     if (node) {
       const contentDocument = node.contentDocument();
       if (contentDocument && contentDocument.documentURL !== frame.url) {
-        contentDocument.setDocumentURL(frame.url);
+        contentDocument.setDocumentURL(frame.url, frame.securityOrigin());
         this.dispatchEventToListeners(Events.DocumentURLChanged, contentDocument);
       }
     }
@@ -1879,7 +1907,8 @@ export class DOMModel extends SDKModel<EventTypes> {
     this.idToDOMNode = new Map();
     this.frameIdToOwnerNode = new Map();
     if (payload && 'nodeId' in payload) {
-      this.#document = new DOMDocument(this, payload);
+      const mainFrameId = this.target().model(ResourceTreeModel)?.mainFrame?.id;
+      this.#document = new DOMDocument(this, payload, mainFrameId);
     } else {
       this.#document = null;
     }
@@ -2543,6 +2572,22 @@ export class DOMNodeSnapshot extends DOMNode {
 }
 
 export class DOMDocumentSnapshot extends DOMDocument {
+  readonly #snapshotSecurityOrigin: SecurityOrigin;
+
+  constructor(
+      domModel: DOMModel,
+      payload: Protocol.DOM.Node,
+      frameId: Protocol.Page.FrameId|null|undefined,
+      securityOrigin: SecurityOrigin,
+  ) {
+    super(domModel, payload, frameId);
+    this.#snapshotSecurityOrigin = securityOrigin;
+  }
+
+  override securityOrigin(): SecurityOrigin {
+    return this.#snapshotSecurityOrigin;
+  }
+
   override init(
       _doc: DOMDocument|null, _isInShadowTree: boolean, _payload: Protocol.DOM.Node,
       _retainedNodes?: Set<Protocol.DOM.BackendNodeId>|undefined): void {

package/front_end/core/sdk/DebuggerModel.ts

@@ -1480,10 +1480,6 @@ export class Scope implements ScopeChainEntry {
     return undefined;
   }
 
-  empty(): boolean {
-    return Boolean(this.#payload.empty);
-  }
-
   extraProperties(): RemoteObjectProperty[] {
     if (this !== this.#callFrame.localScope() || this.#callFrame.script.isWasm()) {
       return [];

package/front_end/core/sdk/PageResourceLoader.ts

@@ -343,24 +343,25 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
       // directive is present. A null/error response keeps the guard armed so that a
       // detached-frame or protocol-error path cannot fall through to loadFromHostBindings.
       let mustEnforceCSP = isHttp;
-      if (isHttp && initiator.target) {
-        const networkManager = initiator.target.model(NetworkManager);
+      let frameTarget: Target|null = initiator.target;
+      while (frameTarget && !frameTarget.model(ResourceTreeModel)) {
+        frameTarget = frameTarget.parentTarget();
+      }
+      const frameId = initiator.frameId ?? frameTarget?.model(ResourceTreeModel)?.mainFrame?.id ?? null;
+      if (isHttp && frameTarget) {
+        const networkManager = frameTarget.model(NetworkManager);
         if (networkManager) {
-          let status = await networkManager.getSecurityIsolationStatus(initiator.frameId);
-          if (!status && initiator.frameId) {
-            status = await networkManager.getSecurityIsolationStatus(null);
-          }
-          if (status) {
-            const csps = status.csp ?? [];
-            mustEnforceCSP = csps.some(csp => csp.effectiveDirectives.includes('connect-src') ||
-                                           csp.effectiveDirectives.includes('default-src'));
+          const status = await networkManager.getSecurityIsolationStatus(frameId);
+          if (status?.csp) {
+            mustEnforceCSP = status.csp.some(csp => csp.effectiveDirectives.includes('connect-src') ||
+                                                 csp.effectiveDirectives.includes('default-src'));
           }
         }
       }
 
       try {
         Host.userMetrics.developerResourceLoaded(Host.UserMetrics.DeveloperResourceLoaded.LOAD_THROUGH_PAGE_VIA_TARGET);
-        const result = await this.loadFromTarget(initiator.target, initiator.frameId, url, isBinary);
+        const result = await this.loadFromTarget(frameTarget ?? initiator.target, frameId, url, isBinary);
         return result;
       } catch (e) {
         if (e instanceof Error) {

package/front_end/core/sdk/SourceMap.ts

@@ -33,7 +33,8 @@ export interface SourceMapV3Object {
 
   names?: string[];
   ignoreList?: number[];
-  scopes?: string;
+  scopes?: Array<string|null>;
+  ranges?: string[];
   rangeMappings?: string;
   debugId?: string;
   x_google_linecount?: number;
@@ -609,11 +610,11 @@ export class SourceMap {
     if (!this.#scopesInfo) {
       this.#scopesInfo = new SourceMapScopesInfo(this, {scopes: [], ranges: []});
     }
-    if (map.scopes) {
+    if (map.scopes || map.ranges) {
       const {scopes, ranges} = ScopesCodec.decode(
           map as ScopesCodec.SourceMapJson,
           {mode: ScopesCodec.DecodeMode.LAX, generatedOffset: {line: baseLineNumber, column: baseColumnNumber}});
-      this.#scopesInfo.addOriginalScopes(scopes);
+      this.#scopesInfo.addOriginalScopes(scopes.length ? scopes : new Array(map.sources.length).fill(null));
       this.#scopesInfo.addGeneratedRanges(ranges);
     } else if (map.x_com_bloomberg_sourcesFunctionMappings) {
       const originalScopes = this.parseBloombergScopes(map);
@@ -662,7 +663,7 @@ export class SourceMap {
     }
   }
 
-  private parseBloombergScopes(map: SourceMapV3Object): Array<ScopesCodec.OriginalScope|null> {
+  private parseBloombergScopes(map: SourceMapV3Object): Array<ScopesCodec.OriginalScope[]|null> {
     const scopeList = map.x_com_bloomberg_sourcesFunctionMappings;
     if (!scopeList) {
       throw new Error('Cant decode pasta scopes without x_com_bloomberg_sourcesFunctionMappings field');
@@ -851,7 +852,8 @@ export class SourceMap {
     }
 
     const {line, column} = scriptRelativePosition(location);
-    return this.#scopesInfo.resolveMappedVariablesAtPosition(line, column, ignoreInnerBlockScopes);
+    return this.#scopesInfo.resolveMappedVariablesAtPosition(line, column, ignoreInnerBlockScopes,
+                                                             location.inlineFrameIndex);
   }
 
   findOriginalFunctionName(position: ScopesCodec.Position): string|null {

package/front_end/core/sdk/SourceMapFunctionRanges.ts

@@ -13,19 +13,16 @@ export interface NamedFunctionRange {
 }
 
 /**
- * Turns a list of {@link NamedFunctionRange}s into a single {@link OriginalScope} tree nested
- * according to the start/end position. Each range is turned into a OriginalScope with the `isStackFrame`
+ * Turns a list of {@link NamedFunctionRange}s into a list of {@link OriginalScope} trees nested
+ * according to the start/end position. Each range is turned into an OriginalScope with the `isStackFrame`
  * bit set to denote it as a function and a generic "Function" label.
  *
- * We nest all these function scopes underneath a single global scope that always starts at (0, 0) and
- * reaches to the largest end position.
- *
  * `ranges` can be unsorted but will be sorted in-place.
  *
  * @throws if the ranges are not nested properly. Concretely: start < end for each range, and no
  * "straddling" (i.e. partially overlapping ranges).
  */
-export function buildOriginalScopes(ranges: NamedFunctionRange[]): ScopesCodec.OriginalScope {
+export function buildOriginalScopes(ranges: NamedFunctionRange[]): ScopesCodec.OriginalScope[] {
   validateStartBeforeEnd(ranges);
 
   // 1. Sort ranges by ascending start position.
@@ -33,27 +30,15 @@ export function buildOriginalScopes(ranges: NamedFunctionRange[]): ScopesCodec.O
   //    with the higher end position first, because it's the parent.
   ranges.sort((a, b) => comparePositions(a.start, b.start) || comparePositions(b.end, a.end));
 
-  const root: ScopesCodec.OriginalScope = {
-    start: {line: 0, column: 0},
-    end: {line: Number.POSITIVE_INFINITY, column: Number.POSITIVE_INFINITY},
-    kind: 'Global',
-    isStackFrame: false,
-    children: [],
-    variables: [],
-  };
-
-  // 2. Build the tree from the ranges.
-  const stack: ScopesCodec.OriginalScope[] = [root];
+  // 2. Build the trees from the ranges.
+  const roots: ScopesCodec.OriginalScope[] = [];
+  const stack: ScopesCodec.OriginalScope[] = [];
   for (const range of ranges) {
     // Pop all scopes that precede the current entry (to find the right parent).
-    let stackTop = stack.at(-1) as ScopesCodec.OriginalScope;
-    while (true) {
-      if (comparePositions(stackTop.end, range.start) <= 0) {
-        stack.pop();
-        stackTop = stack.at(-1) as ScopesCodec.OriginalScope;
-      } else {
-        break;
-      }
+    let stackTop = stack.at(-1);
+    while (stackTop && comparePositions(stackTop.end, range.start) <= 0) {
+      stack.pop();
+      stackTop = stack.at(-1);
     }
 
     /*
@@ -66,22 +51,21 @@ export function buildOriginalScopes(ranges: NamedFunctionRange[]): ScopesCodec.O
      *
      *i.e.: B.start < A.end < B.end
      */
-    if (comparePositions(range.start, stackTop.end) < 0 && comparePositions(stackTop.end, range.end) < 0) {
-      throw new Error(`Range ${JSON.stringify(range)} and ${JSON.stringify(stackTop)} partially overlap.`);
+    if (stackTop && comparePositions(range.start, stackTop.end) < 0 && comparePositions(stackTop.end, range.end) < 0) {
+      throw new Error(`Range ${JSON.stringify(range)} and ${
+          JSON.stringify(stackTop, (key, value) => key === 'parent' ? undefined : value)} partially overlap.`);
     }
 
-    const scope = createScopeFrom(range);
-    stackTop.children.push(scope);
+    const scope = createScopeFrom(range, stackTop);
+    if (stackTop) {
+      stackTop.children.push(scope);
+    } else {
+      roots.push(scope);
+    }
     stack.push(scope);
   }
 
-  // 3. Update root.end.
-  const lastChild = root.children.at(-1);
-  if (lastChild) {
-    root.end = lastChild.end;
-  }
-
-  return root;
+  return roots;
 }
 
 function validateStartBeforeEnd(ranges: NamedFunctionRange[]): void {
@@ -92,11 +76,12 @@ function validateStartBeforeEnd(ranges: NamedFunctionRange[]): void {
   }
 }
 
-function createScopeFrom(range: NamedFunctionRange): ScopesCodec.OriginalScope {
+function createScopeFrom(range: NamedFunctionRange, parent?: ScopesCodec.OriginalScope): ScopesCodec.OriginalScope {
   return {
     ...range,
     kind: 'Function',
     isStackFrame: true,
+    parent,
     children: [],
     variables: [],
   };

package/front_end/core/sdk/SourceMapScopeChainEntry.ts

@@ -183,7 +183,7 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
       if (value === null) {
         return SourceMapScopeRemoteObject.#unavailableProperty(variable);
       }
-      return new RemoteObjectProperty(variable, value, /* enumerable */ false, /* writable */ false, /* isOwn */ true,
+      return new RemoteObjectProperty(variable, value, /* enumerable */ true, /* writable */ false, /* isOwn */ true,
                                       /* wasThrown */ false);
     });
 
@@ -269,7 +269,7 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
   }
 
   static #unavailableProperty(name: string): RemoteObjectProperty {
-    return new RemoteObjectProperty(
-        name, null, /* enumerable */ false, /* writeable */ false, /* isOwn */ true, /* wasThrown */ false);
+    return new RemoteObjectProperty(name, null, /* enumerable */ true, /* writeable */ false, /* isOwn */ true,
+                                    /* wasThrown */ false);
   }
 }