chrome-devtools-frontend 1.0.1700561 → 1.0.1702515

package/eslint.config.mjs

@@ -59,6 +59,7 @@ export default defineConfig([
     'scripts/migration/**/*.js',
     'scripts/protocol_typescript/*.js',
     'scripts/deps/tests/fixtures',
+    'scripts/gn_deps_verifier/tests/fixtures',
     'test/**/fixtures/',
     'test/e2e/**/*.js',
     'test/shared/**/*.js',
@@ -740,7 +741,8 @@ export default defineConfig([
       'front_end/**/*.docs.ts',
       'test/**/*.ts',
       '**/testing/*.ts',
-      'scripts/eslint_rules/test/**/*',
+      'scripts/eslint_rules/tests/**/*',
+      'scripts/gn_deps_verifier/tests/**/*',
       'extensions/cxx_debugging/e2e/**/*.ts',
       'extensions/cxx_debugging/tests/**/*.ts',
     ],

package/front_end/core/host/UserMetricsEnums.ts

@@ -498,10 +498,11 @@ export enum DevtoolsExperiments {
   'durable-messages' = 110,
   'jpeg-xl' = 111,
   'plus-button' = 112,
+  'source-map-scopes-in-sources-panel' = 113,
   /* eslint-enable @typescript-eslint/naming-convention */
 
   // Increment this when new experiments are added.
-  MAX_VALUE = 113,
+  MAX_VALUE = 114,
 }
 
 /** Update DevToolsIssuesPanelIssueExpanded from tools/metrics/histograms/enums.xml if new enum is added. **/

package/front_end/core/root/ExperimentNames.ts

@@ -9,6 +9,7 @@ export enum ExperimentName {
   DURABLE_MESSAGES = 'durable-messages',
   JPEG_XL = 'jpeg-xl',
   PLUS_BUTTON = 'plus-button',
+  SOURCE_MAP_SCOPES_IN_SOURCES_PANEL = 'source-map-scopes-in-sources-panel',
   // Adding or removing an entry from this enum?
   // You will need to update:
   // 1. DevToolsExperiments enum in host/UserMetrics.ts

package/front_end/core/root/Runtime.ts

@@ -549,6 +549,10 @@ interface DevToolsNetworkBackendLinking {
   enabled: boolean;
 }
 
+interface DevToolsAiNaturalLanguageInterface {
+  enabled: boolean;
+}
+
 /**
  * The host configuration that we expect from the DevTools back-end.
  *
@@ -579,6 +583,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiCodeGeneration: HostConfigAiCodeGeneration,
   devToolsAiCodeCompletionStyles: HostConfigAiCodeCompletionStyles,
   devToolsVeLogging: HostConfigVeLogging,
+  devToolsAiNaturalLanguageInterface: DevToolsAiNaturalLanguageInterface,
   /**
    * OffTheRecord here indicates that the user's profile is either incognito,
    * or guest mode, rather than a "normal" profile.

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -56,6 +56,10 @@ export class BaseVariableMatch implements Match {
   }
 }
 
+function isVariableNameNode(node: CodeMirror.SyntaxNode|null|undefined, ast: SyntaxTree): boolean {
+  return node?.name === 'VariableName' && ast.text(node).length > 2;
+}
+
 const BaseVariableMatcherBase: MatcherClass<BaseVariableMatch> = matcherBase(BaseVariableMatch);
 // This matcher provides matching for var() functions and basic computedText support. Computed text is resolved by a
 // callback. This matcher is intended to be used directly only in environments where CSSMatchedStyles is not available.
@@ -83,15 +87,11 @@ export class BaseVariableMatcher extends BaseVariableMatcherBase {
     const nameNode = args[0][0];
     const fallback = args.length === 2 ? args[1] : undefined;
 
-    if (nameNode?.name !== 'VariableName' && nameNode?.name !== 'ValueName') {
+    if (!isVariableNameNode(nameNode, matching.ast)) {
       return null;
     }
 
     const varName = matching.ast.text(nameNode);
-    if (!varName.startsWith('--') || varName.length <= 2) {
-      return null;
-    }
-
     return new BaseVariableMatch(
         matching.ast.text(node), node, varName, fallback, matching, this.#computedTextCallback);
   }
@@ -903,7 +903,7 @@ export class LinkableNameMatcher extends LinkableNameMatcherBase {
         propertyName === LinkableNameProperties.POSITION_TRY_FALLBACKS;
     // We only mark top level nodes or nodes that are inside `var()` expressions as linkable names.
     if (!propertyName || (node.name !== 'ValueName' && node.name !== 'VariableName') ||
-        !isAParentDeclarationOrVarCall || (node.name === 'ValueName' && shouldMatchOnlyVariableName)) {
+        !isAParentDeclarationOrVarCall || (shouldMatchOnlyVariableName && !isVariableNameNode(node, matching.ast))) {
       return null;
     }
 
@@ -1118,7 +1118,7 @@ export class CustomFunctionMatcher extends CustomFunctionMatcherBase {
       return null;
     }
     const callee = matching.ast.text(node.getChild('VariableName'));
-    if (!callee?.startsWith('--')) {
+    if (!callee || callee.length <= 2 || !callee.startsWith('--')) {
       return null;
     }
     const args = ASTUtils.callArgs(node);
@@ -1295,7 +1295,7 @@ export class AnchorFunctionMatcher extends AnchorFunctionMatcherBase {
   }
 
   override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): AnchorFunctionMatch|null {
-    if (node.name === 'VariableName') {
+    if (isVariableNameNode(node, matching.ast)) {
       // Double-dashed anchor reference to be rendered with a link to its matching anchor.
       let parent = node.parent;
       if (parent?.name !== 'ArgList') {
@@ -1316,7 +1316,7 @@ export class AnchorFunctionMatcher extends AnchorFunctionMatcherBase {
     if (calleeText === 'anchor' && args.length <= 2) {
       return null;
     }
-    if (args.find(arg => arg.name === 'VariableName')) {
+    if (args.find(arg => isVariableNameNode(arg, matching.ast))) {
       // We have an explicit anchor reference, no need to render swatch.
       return null;
     }
@@ -1339,7 +1339,7 @@ export class PositionAnchorMatcher extends PositionAnchorMatcherBase {
   }
 
   override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): PositionAnchorMatch|null {
-    if (node.name !== 'VariableName') {
+    if (!isVariableNameNode(node, matching.ast)) {
       return null;
     }
 

package/front_end/core/sdk/NetworkManager.ts

@@ -2629,6 +2629,13 @@ export class InterceptedRequest {
       this.networkRequest.setCookieHeaders =
           InterceptedRequest.mergeSetCookieHeaders(originalSetCookieHeaders, setCookieHeadersFromOverrides);
       this.networkRequest.hasOverriddenContent = isBodyOverridden;
+      if (isBodyOverridden) {
+        this.networkRequest.setContentDataProvider(async () => {
+          const {mimeType, charset} = this.getMimeTypeAndCharset();
+          return new TextUtils.ContentData.ContentData(body, /* isBase64= */ true,
+                                                       mimeType ?? 'application/octet-stream', charset ?? undefined);
+        });
+      }
     }
 
     void this.#fetchAgent.invoke_fulfillRequest({requestId: this.requestId, responseCode, body, responseHeaders});

package/front_end/core/sdk/SecurityOrigin.ts

@@ -28,6 +28,7 @@ const OPAQUE_PREFIXES = [
   'about:',
   'blob:about',
   'blob:data',
+  'blob:file',
   'blob:null',
 ] as const;
 

package/front_end/core/sdk/SourceMap.ts

@@ -7,7 +7,7 @@ import * as Common from '../common/common.js';
 import * as Platform from '../platform/platform.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 
-import type {CallFrame, ScopeChainEntry} from './DebuggerModel.js';
+import type {CallFrame, Location, ScopeChainEntry} from './DebuggerModel.js';
 import {scopeTreeForScript} from './ScopeTreeCache.js';
 import type {Script} from './Script.js';
 import {buildOriginalScopes, decodePastaRanges, type NamedFunctionRange} from './SourceMapFunctionRanges.js';
@@ -843,6 +843,17 @@ export class SourceMap {
     return this.#scopesInfo.resolveMappedScopeChain(frame);
   }
 
+  resolveMappedVariablesAtPosition(location: Location,
+                                   ignoreInnerBlockScopes = false): Array<Map<string, string|null>>|null {
+    this.#ensureSourceMapProcessed();
+    if (this.#provenance === SourceMapProvenance.USER || !this.#scopesInfo?.hasVariablesAndBindings()) {
+      return null;
+    }
+
+    return this.#scopesInfo.resolveMappedVariablesAtPosition(location.lineNumber, location.columnNumber,
+                                                             ignoreInnerBlockScopes);
+  }
+
   findOriginalFunctionName(position: ScopesCodec.Position): string|null {
     this.#ensureSourceMapProcessed();
     return this.#scopesInfo?.findOriginalFunctionName(position) ?? null;

package/front_end/core/sdk/SourceMapCache.ts

@@ -28,11 +28,17 @@ export class SourceMapCache {
   }
 
   async set(debugId: DebugId, securityOrigin: Platform.DevToolsPath.UrlString, sourceMap: SourceMapV3): Promise<void> {
+    if (!securityOrigin || securityOrigin === 'file://') {
+      return;
+    }
     const cache = await this.#cache();
     await cache?.put(SourceMapCache.#urlForDebugId(debugId, securityOrigin), new Response(JSON.stringify(sourceMap)));
   }
 
   async get(debugId: DebugId, securityOrigin: Platform.DevToolsPath.UrlString): Promise<SourceMapV3|null> {
+    if (!securityOrigin || securityOrigin === 'file://') {
+      return null;
+    }
     const cache = await this.#cache();
     const response = await cache?.match(SourceMapCache.#urlForDebugId(debugId, securityOrigin));
     return (await response?.json() as SourceMapV3 | undefined) ?? null;
@@ -65,10 +71,16 @@ const IN_MEMORY_INSTANCE = new (class implements Pick<SourceMapCache, 'get'|'set
   readonly #cache = new Map<string, SourceMapV3>();
 
   async set(debugId: DebugId, securityOrigin: Platform.DevToolsPath.UrlString, sourceMap: SourceMapV3): Promise<void> {
+    if (!securityOrigin || securityOrigin === 'file://') {
+      return;
+    }
     this.#cache.set(`${debugId}|${securityOrigin}`, sourceMap);
   }
 
   async get(debugId: DebugId, securityOrigin: Platform.DevToolsPath.UrlString): Promise<SourceMapV3|null> {
+    if (!securityOrigin || securityOrigin === 'file://') {
+      return null;
+    }
     return this.#cache.get(`${debugId}|${securityOrigin}`) ?? null;
   }
 

package/front_end/core/sdk/SourceMapManager.ts

@@ -7,6 +7,7 @@ import * as Platform from '../platform/platform.js';
 
 import type {FrameAssociated} from './FrameAssociated.js';
 import {PageResourceLoader, type PageResourceLoadInitiator, type ResourceLoader} from './PageResourceLoader.js';
+import {SecurityOrigin} from './SecurityOrigin.js';
 import {type DebugId, parseSourceMap, SourceMap, type SourceMapProvenance, type SourceMapV3} from './SourceMap.js';
 import {SourceMapCache} from './SourceMapCache.js';
 import {type Target, Type} from './Target.js';
@@ -215,14 +216,24 @@ export class SourceMapManager<T extends FrameAssociated> extends Common.ObjectWr
   }
 }
 
+function getCacheOrigin(initiator: PageResourceLoadInitiator): Platform.DevToolsPath.UrlString|null {
+  if (!initiator.initiatorUrl) {
+    return null;
+  }
+  const securityOrigin = SecurityOrigin.create(initiator.initiatorUrl);
+  if (securityOrigin.isOpaque() || (securityOrigin.isFile() && securityOrigin.siteId() === 'file:///')) {
+    return null;
+  }
+  return securityOrigin.siteId() as Platform.DevToolsPath.UrlString;
+}
+
 async function loadSourceMap(resourceLoader: ResourceLoader, sourceMapCache: SourceMapCache,
                              url: Platform.DevToolsPath.UrlString, debugId: DebugId|null,
                              initiator: PageResourceLoadInitiator): Promise<SourceMapV3> {
   try {
-    if (debugId) {
-      const securityOrigin = initiator.initiatorUrl ? Common.ParsedURL.ParsedURL.extractOrigin(initiator.initiatorUrl) :
-                                                      Platform.DevToolsPath.EmptyUrlString;
-      const cachedSourceMap = await sourceMapCache.get(debugId, securityOrigin);
+    const cacheOrigin = debugId ? getCacheOrigin(initiator) : null;
+    if (debugId && cacheOrigin) {
+      const cachedSourceMap = await sourceMapCache.get(debugId, cacheOrigin);
       if (cachedSourceMap) {
         return cachedSourceMap;
       }
@@ -230,11 +241,9 @@ async function loadSourceMap(resourceLoader: ResourceLoader, sourceMapCache: Sou
 
     const {content} = await resourceLoader.loadResource(url, initiator);
     const sourceMap = parseSourceMap(content);
-    if (debugId && 'debugId' in sourceMap && sourceMap.debugId === debugId) {
+    if (debugId && cacheOrigin && 'debugId' in sourceMap && sourceMap.debugId === debugId) {
       // In case something goes wrong with updating the cache, we still want to use the source map.
-      const securityOrigin = initiator.initiatorUrl ? Common.ParsedURL.ParsedURL.extractOrigin(initiator.initiatorUrl) :
-                                                      Platform.DevToolsPath.EmptyUrlString;
-      await sourceMapCache.set(sourceMap.debugId as DebugId, securityOrigin, sourceMap).catch();
+      await sourceMapCache.set(sourceMap.debugId as DebugId, cacheOrigin, sourceMap).catch();
     }
     return sourceMap;
   } catch (cause) {

package/front_end/core/sdk/SourceMapScopeChainEntry.ts

@@ -8,7 +8,7 @@ import * as i18n from '../i18n/i18n.js';
 
 import type {CallFrame, LocationRange, ScopeChainEntry} from './DebuggerModel.js';
 import {type GetPropertiesResult, type RemoteObject, RemoteObjectImpl, RemoteObjectProperty} from './RemoteObject.js';
-import {contains} from './SourceMapScopesInfo.js';
+import {findExpression} from './SourceMapScopesInfo.js';
 
 const UIStrings = {
   /**
@@ -263,25 +263,8 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
 
   /** @returns null if the variable is unavailable at the current paused location */
   #findExpression(index: number): string|null {
-    if (!this.#range) {
-      return null;
-    }
-
-    const expressionOrSubRanges = this.#range.values[index];
-    if (typeof expressionOrSubRanges === 'string') {
-      return expressionOrSubRanges;
-    }
-    if (!expressionOrSubRanges) {
-      return null;
-    }
-
     const pausedPosition = this.#callFrame.location();
-    for (const range of expressionOrSubRanges) {
-      if (contains({start: range.from, end: range.to}, pausedPosition.lineNumber, pausedPosition.columnNumber)) {
-        return range.value ?? null;
-      }
-    }
-    return null;
+    return findExpression(this.#range, index, pausedPosition?.lineNumber, pausedPosition?.columnNumber);
   }
 
   static #unavailableProperty(name: string): RemoteObjectProperty {

package/front_end/core/sdk/SourceMapScopesInfo.ts

@@ -406,6 +406,20 @@ export class SourceMapScopesInfo {
     return rangeChain;
   }
 
+  resolveMappedVariablesAtPosition(line: number, column: number,
+                                   ignoreInnerBlockScopes = false): Array<Map<string, string|null>>|null {
+    const rangeChain = this.#findGeneratedRangeChain(line, column);
+    const startScope = rangeChain.at(-1)?.originalScope;
+    const innerMostScope =
+        (startScope && ignoreInnerBlockScopes && this.#findFunctionScopeInOriginalScopeChain(startScope)) || startScope;
+    const result: Array<Map<string, string|null>> = [];
+    for (let scope = innerMostScope; scope; scope = scope.parent) {
+      const range = rangeChain.findLast(r => r.originalScope === scope);
+      result.push(new Map(scope.variables.map((v, i) => [v, findExpression(range, i, line, column)])));
+    }
+    return innerMostScope ? result : null;
+  }
+
   /**
    * Returns the authored function name of the function containing the provided generated position.
    */
@@ -570,6 +584,13 @@ export interface TranslatedFrame {
   url?: Platform.DevToolsPath.UrlString;
 }
 
+export function findExpression(range: ScopesCodec.GeneratedRange|undefined, index: number, line = 0,
+                               column = 0): string|null {
+  const val = range?.values[index];
+  return (typeof val === 'string' ? val : val?.find(r => contains({start: r.from, end: r.to}, line, column))?.value) ??
+      null;
+}
+
 export function contains(
     range: Pick<ScopesCodec.GeneratedRange, 'start'|'end'>, line: number, column: number): boolean {
   if (range.start.line > line || (range.start.line === line && range.start.column > column)) {

package/front_end/devtools_compatibility.js

@@ -876,7 +876,8 @@
       'durable-messages': 110,
       'jpeg-xl': 111,
       'plus-button': 112,
-      MAX_VALUE: 113,
+      'source-map-scopes-in-sources-panel': 113,
+      MAX_VALUE: 114,
     },
     IssueExpanded: {
       CrossOriginEmbedderPolicy: 0,

package/front_end/entrypoints/formatter_worker/ScopeParser.ts

@@ -11,9 +11,13 @@ export function parseScopes(expression: string, sourceType: 'module'|'script' =
   // Parse the expression and find variables and scopes.
   let root: Acorn.ESTree.Node|null = null;
   try {
-    root = Acorn.parse(
-               expression, {ecmaVersion: ECMA_VERSION, allowAwaitOutsideFunction: true, ranges: false, sourceType}) as
-        Acorn.ESTree.Node;
+    root = Acorn.parse(expression, {
+      ecmaVersion: ECMA_VERSION,
+      allowAwaitOutsideFunction: true,
+      checkPrivateFields: false,
+      ranges: false,
+      sourceType,
+    }) as Acorn.ESTree.Node;
   } catch {
     return null;
   }

package/front_end/entrypoints/formatter_worker/Substitute.ts

@@ -6,10 +6,10 @@ import * as Acorn from '../../third_party/acorn/acorn.js';
 import {DefinitionKind} from '../formatter_actions/formatter_actions.js';
 
 import {ECMA_VERSION} from './AcornTokenizer.js';
-import {ScopeVariableAnalysis} from './ScopeParser.js';
+import {ScopeVariableAnalysis, type VariableUses} from './ScopeParser.js';
 
-export function substituteExpression(expression: string, nameMap: Map<string, string|null>): string {
-  const replacements = computeSubstitution(expression, nameMap);
+export function substituteExpression(expression: string, nameMaps: Array<Map<string, string|null>>): string {
+  const replacements = computeSubstitution(expression, nameMaps);
   return applySubstitution(expression, replacements);
 }
 
@@ -20,13 +20,44 @@ interface Replacement {
   isShorthandAssignmentProperty: boolean;
 }
 
+function parseBindingExpression(expression: string): {
+  replacement: string,
+  freeVariables: string[],
+  allNames: Set<string>,
+} {
+  const options = {
+    ecmaVersion: ECMA_VERSION,
+    allowAwaitOutsideFunction: true,
+    allowImportExportEverywhere: true,
+    checkPrivateFields: false,
+    ranges: false,
+  } as const;
+  const root = Acorn.parse(`(${expression})`, options);
+  const exprAt = Acorn.Parser.parseExpressionAt(expression, 0, options);
+  if (root.body.length !== 1 || root.body[0].type !== 'ExpressionStatement') {
+    throw new SyntaxError(`Invalid binding expression '${expression}'`);
+  }
+  const expr = root.body[0].expression;
+  if (exprAt.start !== expr.start - 1 || exprAt.end !== expr.end - 1) {
+    throw new SyntaxError(`Invalid binding expression '${expression}'`);
+  }
+  const analysis = new ScopeVariableAnalysis(root as Acorn.ESTree.Node, `(${expression})`);
+  analysis.run();
+  const needsParens = expr.type !== 'Identifier' && expr.type !== 'MemberExpression' && expr.type !== 'ThisExpression';
+  return {
+    replacement: needsParens ? `(${expression})` : expression,
+    freeVariables: [...analysis.getFreeVariables().keys()],
+    allNames: analysis.getAllNames(),
+  };
+}
+
 /**
  * Given an |expression| and a mapping from names to new names, the |computeSubstitution|
  * function returns a list of replacements sorted by the offset. The function throws if
  * it cannot parse the expression or the substitution is impossible to perform (for example
  * if the substitution target is 'this' within a function, it would become bound there).
  **/
-function computeSubstitution(expression: string, nameMap: Map<string, string|null>): Replacement[] {
+function computeSubstitution(expression: string, nameMaps: Array<Map<string, string|null>>): Replacement[] {
   // Parse the expression and find variables and scopes.
   const root = Acorn.parse(expression, {
     ecmaVersion: ECMA_VERSION,
@@ -42,10 +73,33 @@ function computeSubstitution(expression: string, nameMap: Map<string, string|nul
 
   // Prepare the machinery for generating fresh names (to avoid variable captures).
   const allNames = scopeVariables.getAllNames();
-  for (const rename of nameMap.values()) {
-    if (rename) {
-      allNames.add(rename);
+  const nameMap = new Map<string, string|null>();
+  const parsedBindings = new Map<string, ReturnType<typeof parseBindingExpression>>();
+  const shadowedNames = new Set<string>();
+  for (const scopeMap of nameMaps) {
+    const scopeNames = new Set<string>();
+    for (const [name, rename] of scopeMap.entries()) {
+      let parsed: ReturnType<typeof parseBindingExpression>|undefined;
+      if (rename !== null) {
+        try {
+          parsed = parseBindingExpression(rename);
+          parsed.allNames.forEach(id => allNames.add(id));
+          parsed.freeVariables.forEach(id => scopeNames.add(id));
+        } catch (error) {
+          if (!nameMap.has(name) && freeVariables.has(name)) {
+            throw error;
+          }
+        }
+      }
+      if (!nameMap.has(name)) {
+        const isShadowed = parsed?.freeVariables.some(id => shadowedNames.has(id));
+        nameMap.set(name, isShadowed ? null : rename);
+        if (parsed && !isShadowed) {
+          parsedBindings.set(name, parsed);
+        }
+      }
     }
+    scopeNames.forEach(id => shadowedNames.add(id));
   }
   function getNewName(base: string): string {
     let i = 1;
@@ -58,6 +112,7 @@ function computeSubstitution(expression: string, nameMap: Map<string, string|nul
   }
 
   // Perform the substitutions.
+  const capturedBinders = new Map<VariableUses, string>();
   for (const [name, rename] of nameMap.entries()) {
     const defUse = freeVariables.get(name);
     if (!defUse) {
@@ -68,34 +123,43 @@ function computeSubstitution(expression: string, nameMap: Map<string, string|nul
       throw new Error(`Cannot substitute '${name}' as the underlying variable '${rename}' is unavailable`);
     }
 
-    const binders = [];
+    const parsed = parsedBindings.get(name);
+    if (!parsed) {
+      continue;
+    }
+    const freeIds = [...parsed.freeVariables];
     for (const use of defUse) {
       result.push({
         from: name,
-        to: rename,
+        to: parsed.replacement,
         offset: use.offset,
         isShorthandAssignmentProperty: use.isShorthandAssignmentProperty,
       });
-      binders.push(...use.scope.findBinders(rename));
-    }
-    // If there is a capturing binder, rename the bound variable.
-    for (const binder of binders) {
-      if (binder.definitionKind === DefinitionKind.FIXED) {
-        // If the identifier is bound to a fixed name, such as 'this',
-        // then refuse to do the substitution.
-        throw new Error(`Cannot avoid capture of '${rename}'`);
-      }
-      const newName = getNewName(rename);
-      for (const use of binder.uses) {
-        result.push({
-          from: rename,
-          to: newName,
-          offset: use.offset,
-          isShorthandAssignmentProperty: use.isShorthandAssignmentProperty,
-        });
+      for (const freeId of freeIds) {
+        for (const binder of use.scope.findBinders(freeId)) {
+          capturedBinders.set(binder, freeId);
+        }
       }
     }
   }
+
+  // If there is a capturing binder, rename the bound variable.
+  for (const [binder, freeId] of capturedBinders.entries()) {
+    if (binder.definitionKind === DefinitionKind.FIXED) {
+      // If the identifier is bound to a fixed name, such as 'this',
+      // then refuse to do the substitution.
+      throw new Error(`Cannot avoid capture of '${freeId}'`);
+    }
+    const newName = getNewName(freeId);
+    for (const use of binder.uses) {
+      result.push({
+        from: freeId,
+        to: newName,
+        offset: use.offset,
+        isShorthandAssignmentProperty: use.isShorthandAssignmentProperty,
+      });
+    }
+  }
   result.sort((l, r) => l.offset - r.offset);
   return result;
 }

package/front_end/entrypoints/formatter_worker/formatter_worker-entrypoint.ts

@@ -13,7 +13,7 @@ Platform.HostRuntime.HOST_RUNTIME.workerScope.onmessage = function(event): void
     indentString: string,
     content: string,
     mimeType: string,
-    mapping: Map<string, string|null>,
+    mapping: Array<Map<string, string|null>>,
     sourceType: 'module'|'script',
   } = event.data.params;
   if (!method) {

package/front_end/entrypoints/main/ExecutionContextSelector.ts

@@ -37,7 +37,7 @@ export class ExecutionContextSelector implements SDK.TargetManager.SDKModelObser
 
     function deferred(this: ExecutionContextSelector): void {
       // We always want the second context for the service worker targets.
-      if (!this.#context.flavor(SDK.Target.Target)) {
+      if (!this.#context.flavor(SDK.Target.Target) && !runtimeModel.target().targetInfo()?.subtype) {
         this.#context.setFlavor(SDK.Target.Target, runtimeModel.target());
       }
     }
@@ -51,7 +51,8 @@ export class ExecutionContextSelector implements SDK.TargetManager.SDKModelObser
 
     const models = this.#targetManager.models(SDK.RuntimeModel.RuntimeModel);
     if (this.#context.flavor(SDK.Target.Target) === runtimeModel.target() && models.length) {
-      this.#context.setFlavor(SDK.Target.Target, models[0].target());
+      const nextModel = models.find(m => !m.target().targetInfo()?.subtype);
+      this.#context.setFlavor(SDK.Target.Target, nextModel ? nextModel.target() : null);
     }
   }
 
@@ -100,7 +101,8 @@ export class ExecutionContextSelector implements SDK.TargetManager.SDKModelObser
   }
 
   #shouldSwitchToContext(executionContext: SDK.RuntimeModel.ExecutionContext): boolean {
-    if (executionContext.target().targetInfo()?.subtype) {
+    if (executionContext.target().targetInfo()?.subtype &&
+        this.#context.flavor(SDK.Target.Target) !== executionContext.target()) {
       return false;
     }
     if (this.#lastSelectedContextId && this.#lastSelectedContextId === this.#contextPersistentId(executionContext)) {
@@ -164,7 +166,10 @@ export class ExecutionContextSelector implements SDK.TargetManager.SDKModelObser
   }
 
   #switchContextIfNecessary(executionContext: SDK.RuntimeModel.ExecutionContext): boolean {
-    if (!this.#context.flavor(SDK.RuntimeModel.ExecutionContext) || this.#shouldSwitchToContext(executionContext)) {
+    if ((!this.#context.flavor(SDK.RuntimeModel.ExecutionContext) &&
+         (!executionContext.target().targetInfo()?.subtype ||
+          this.#context.flavor(SDK.Target.Target) === executionContext.target())) ||
+        this.#shouldSwitchToContext(executionContext)) {
       this.#ignoreContextChanged = true;
       this.#context.setFlavor(SDK.RuntimeModel.ExecutionContext, executionContext);
       this.#ignoreContextChanged = false;
@@ -177,6 +182,10 @@ export class ExecutionContextSelector implements SDK.TargetManager.SDKModelObser
     const runtimeModels = this.#targetManager.models(SDK.RuntimeModel.RuntimeModel);
     let newContext: SDK.RuntimeModel.ExecutionContext|null = null;
     for (let i = 0; i < runtimeModels.length && !newContext; ++i) {
+      if (runtimeModels[i].target().targetInfo()?.subtype &&
+          this.#context.flavor(SDK.Target.Target) !== runtimeModels[i].target()) {
+        continue;
+      }
       const executionContexts = runtimeModels[i].executionContexts();
       for (const executionContext of executionContexts) {
         if (this.#isDefaultContext(executionContext)) {
@@ -187,6 +196,10 @@ export class ExecutionContextSelector implements SDK.TargetManager.SDKModelObser
     }
     if (!newContext) {
       for (let i = 0; i < runtimeModels.length && !newContext; ++i) {
+        if (runtimeModels[i].target().targetInfo()?.subtype &&
+            this.#context.flavor(SDK.Target.Target) !== runtimeModels[i].target()) {
+          continue;
+        }
         const executionContexts = runtimeModels[i].executionContexts();
         if (executionContexts.length) {
           newContext = executionContexts[0];

package/front_end/entrypoints/main/MainImpl.ts

@@ -415,6 +415,14 @@ export class MainImpl {
       requiresChromeRestart: false,
     });
 
+    Root.Runtime.experiments.register({
+      name: Root.ExperimentNames.ExperimentName.SOURCE_MAP_SCOPES_IN_SOURCES_PANEL,
+      title: 'Source map scopes in the Sources panel',
+      aboutFlag: 'devtools-source-map-scopes-in-sources-panel',
+      isEnabled: Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled ?? false,
+      requiresChromeRestart: false,
+    });
+
     for (const experiment of Root.Runtime.experiments.allConfigurableExperiments()) {
       if (experiment.isEnabled()) {
         Host.userMetrics.experimentEnabledAtLaunch(experiment.name);