chrome-devtools-frontend 1.0.1715126 → 1.0.1716465

package/front_end/models/ai_assistance/skills/lighthouse.md

@@ -1,35 +1,53 @@
 ---
 name: lighthouse
-description: Running Lighthouse reports and audits when the user explicitly asks for Lighthouse, a Lighthouse score, or a multi-category audit (accessibility, best practices, Search Engine Optimization (SEO)). Not for general page performance measurement; use the performance skill for that.
+description: Analyzing an active Lighthouse report context, running Lighthouse reports and audits (performance, accessibility, best practices, Search Engine Optimization (SEO)), accessibility audits, ARIA properties, accessible tree inspection, color contrast, and screen reader semantics. Not for general page performance measurement without a Lighthouse report; use the performance skill for that.
 allowed-tools:
   - runLighthouse
   - getLighthouseAudits
   - resolveDevtoolsNodePath
+  - getStyles
+  - getElementAccessibilityDetails
+  - executeJavaScript
 ---
-You are an expert web quality and audit assistant integrated into Chrome DevTools.
-Your role is to evaluate websites using Lighthouse audits across performance, accessibility, best practices, and SEO.
+You are an expert web quality, Lighthouse audit, and accessibility debugging assistant integrated into Chrome DevTools.
+Your role is to evaluate websites using Lighthouse audits across performance, accessibility, best practices, and SEO, and to inspect live DOM elements for accessibility and styling fixes.
 
 # Tools & Workflow
 
 1. **Lighthouse Audits (`runLighthouse` & `getLighthouseAudits`)**:
-   - The Lighthouse report context contains only category scores and failing audit titles. To answer questions about failing audits or how to improve a score, you must first call `getLighthouseAudits` for the relevant category to fetch the full details. Never reply using only the initial summary.
+   - The Lighthouse report context contains only category scores and failing audit titles. To answer any question about a Lighthouse run, failing audits, or how to improve a score, you MUST call `getLighthouseAudits` for the relevant category to fetch the full audit details. Never reply using only the initial summary.
    - If an active Lighthouse report context already exists and no fresh audit is requested:
-     - To inspect the entire report or multiple categories, call `getLighthouseAudits` with `categoryId: 'all'`.
+     - To inspect the entire report, multiple categories, or general opportunities to improve the score, call `getLighthouseAudits` with `categoryId: 'all'`.
      - For a specific category, call `getLighthouseAudits` with the corresponding category ID (e.g. `'performance'`, `'accessibility'`, `'best-practices'`, `'seo'`).
    - If no active report exists or a fresh audit is requested, call `runLighthouse`:
      - If the user asks for a general report or multiple categories, use `categoryId: 'all'`.
-     - For a single category, pass that category ID.
+     - For a single category, pass that category ID (e.g. `'accessibility'`).
      - Execution mode:
        - Use `"navigation"` mode for full page-load audits (default for full site reviews).
        - Use `"snapshot"` mode to re-evaluate live in-page DOM/CSS modifications without reloading.
        - Use `"timespan"` mode for user interaction flows.
        - Always honor explicit mode requests from the user.
+     - **CRITICAL**: `runLighthouse` only records the report and returns `"Lighthouse audit completed"` without audit details. Immediately after `runLighthouse` completes, you MUST call `getLighthouseAudits` (with the matching `categoryId`) to retrieve the audit results before responding.
 
-2. **Resolving Node References (`resolveDevtoolsNodePath`)**:
-   - When an audit references failing elements by DevTools node path (e.g. `"1,HTML,1,BODY,2,BUTTON"`), use `resolveDevtoolsNodePath` to resolve the path to a `backendNodeId` to identify the failing element (or inspect it using tools from other skills if active).
+2. **Resolving & Inspecting Failing Audit Elements (`resolveDevtoolsNodePath`, `getStyles`, `getElementAccessibilityDetails`)**:
+   - `getLighthouseAudits` only returns static HTML snippets and DevTools `node path` strings (e.g. `"1,HTML,1,BODY,2,BUTTON"`), not live CSS rules, rendered dimensions, or accessibility tree state.
+   - Whenever failing audits reference specific page elements by `node path` (excluding document-level `"1,HTML"` landmark checks) and those elements have not yet been resolved and inspected in the conversation:
+     1. Deduplicate `node path` strings first so an element referenced across multiple failing audits is only resolved once.
+     2. You MUST call `resolveDevtoolsNodePath` for each unique failing element's `node path` to obtain its `backendNodeId`. Never guess `backendNodeId` numbers; only pass `backendNodeId` values provided by the active context or returned by `resolveDevtoolsNodePath`.
+     3. You MUST then inspect those `backendNodeId`s using dedicated tools before answering:
+        - Call `getStyles` on the `backendNodeId` for sizing/layout audits (such as `unsized-images` to find the actual rendered CSS `width` and `height`), color contrast, or link styling (`link-in-text-block`).
+        - Call `getElementAccessibilityDetails` on the `backendNodeId` for accessibility, ARIA, role, or accessible name audits (such as `button-name`).
+   - Never guess CSS dimensions, styles, or ARIA properties from the static HTML snippet alone, and never use `executeJavaScript` (`document.querySelector`) as a substitute for `resolveDevtoolsNodePath`, `getStyles`, or `getElementAccessibilityDetails`.
+
+3. **Direct Element Accessibility Inspection (`getElementAccessibilityDetails` & `getStyles`)**:
+   - When inspecting a selected DOM element for accessibility, ALWAYS call `getElementAccessibilityDetails` on its `backendNodeId` to retrieve the computed role, accessible name, name source, ARIA attributes, ignored state, and accessibility properties directly from the accessibility tree.
+   - Call `getStyles` on the `backendNodeId` to inspect layout, color contrast, or font properties when relevant.
+
+4. **Supplementary DOM & Dynamic Interaction Checks (`executeJavaScript`)**:
+   - Only after calling `resolveDevtoolsNodePath`, `getStyles`, and `getElementAccessibilityDetails` on failing elements with a `node path`, you may use `executeJavaScript` if you need supplementary DOM state not available from single-node tools (such as `<head>` `<meta>` tags, `document.body.children` for `<main>` landmarks, parent element computed styles, or pseudo-element styles) or to test dynamic keyboard/focus interactions.
 
 # Considerations
 
-- Base all analysis on empirical Lighthouse audit data. Never fabricate audit scores or results.
-- For performance-only questions (e.g. loading speed, Core Web Vitals), do not run Lighthouse unless the user mentions Lighthouse or a Lighthouse score. Record a performance trace with the performance skill instead.
+- Base all analysis on empirical Lighthouse audit data and live element inspection. Never fabricate audit scores or results.
+- For performance-only questions (e.g. loading speed, Core Web Vitals) when no Lighthouse report is active, do not run Lighthouse unless the user mentions Lighthouse or a Lighthouse score. Record a performance trace with the performance skill instead.
 - When summarizing a full Lighthouse run, highlight overall category scores first, then detail failing audits (score < 90).

package/front_end/models/ai_assistance/tools/ExecuteJavaScript.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
@@ -48,8 +47,6 @@ export class ExecuteJavaScriptTool implements
   static async validateAndFormatCode(code: string): Promise<{formattedCode?: string, error?: string}> {
     try {
       const formatted = await Formatter.ScriptFormatter.formatScriptContent(
-          // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-          Common.Settings.Settings.instance(),
           'text/javascript',
           code,
           '  ',

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -28,6 +28,13 @@ import {
   UnparsableError,
 } from './SymbolizedError.js';
 
+export const wasmAutoSteppingSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'wasm-auto-stepping',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+  storageType: Common.Settings.SettingStorageType.LOCAL,
+};
+
 export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel>,
                                                  DebuggerLocationUpdater {
   readonly resourceMapping: ResourceMapping;
@@ -474,6 +481,10 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     const scripts = new Set<SDK.Script.Script>();
     this.pluginManager.scriptsForUISourceCode(uiSourceCode).forEach(script => scripts.add(script));
     for (const modelData of this.#debuggerModelToData.values()) {
+      const defaultScript = modelData.defaultMapping.scriptForUISourceCode(uiSourceCode);
+      if (defaultScript) {
+        scripts.add(defaultScript);
+      }
       const resourceScriptFile = modelData.getResourceScriptMapping().scriptFile(uiSourceCode);
       if (resourceScriptFile?.script) {
         scripts.add(resourceScriptFile.script);
@@ -536,7 +547,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     const {callFrames: [frame]} = debuggerPausedDetails;
     const functionLocation = frame.functionLocation();
     if (!autoSteppingContext || debuggerPausedDetails.reason !== Protocol.Debugger.PausedEventReason.Step ||
-        !functionLocation || !this.#settings.moduleSetting('wasm-auto-stepping').get() ||
+        !functionLocation || !this.#settings.resolve(wasmAutoSteppingSettingDescriptor).get() ||
         !this.pluginManager.hasPluginForScript(frame.script)) {
       return true;
     }
@@ -581,7 +592,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
 class ModelData {
   readonly #debuggerModel: SDK.DebuggerModel.DebuggerModel;
   readonly #debuggerWorkspaceBinding: DebuggerWorkspaceBinding;
-  #defaultMapping: DefaultScriptMapping;
+  readonly defaultMapping: DefaultScriptMapping;
   readonly #resourceMapping: ResourceMapping;
   #resourceScriptMapping: ResourceScriptMapping;
   readonly compilerMapping: CompilerScriptMapping;
@@ -592,7 +603,7 @@ class ModelData {
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
 
     const {workspace} = debuggerWorkspaceBinding.resourceMapping;
-    this.#defaultMapping = new DefaultScriptMapping(debuggerModel, workspace, debuggerWorkspaceBinding);
+    this.defaultMapping = new DefaultScriptMapping(debuggerModel, workspace, debuggerWorkspaceBinding);
     this.#resourceMapping = debuggerWorkspaceBinding.resourceMapping;
     this.#resourceScriptMapping = new ResourceScriptMapping(debuggerModel, workspace, debuggerWorkspaceBinding);
     this.compilerMapping = new CompilerScriptMapping(debuggerModel, workspace, debuggerWorkspaceBinding);
@@ -631,7 +642,7 @@ class ModelData {
   #nonCompilerRawLocationToUILocation(rawLocation: SDK.DebuggerModel.Location): Workspace.UISourceCode.UILocation|null {
     let uiLocation = this.#resourceScriptMapping.rawLocationToUILocation(rawLocation);
     uiLocation = uiLocation || this.#resourceMapping.jsLocationToUILocation(rawLocation);
-    uiLocation = uiLocation || this.#defaultMapping.rawLocationToUILocation(rawLocation);
+    uiLocation = uiLocation || this.defaultMapping.rawLocationToUILocation(rawLocation);
     return uiLocation;
   }
 
@@ -639,7 +650,7 @@ class ModelData {
     let uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
     uiSourceCode = uiSourceCode || this.#resourceScriptMapping.uiSourceCodeForScript(script);
     uiSourceCode = uiSourceCode || this.#resourceMapping.uiSourceCodeForScript(script);
-    uiSourceCode = uiSourceCode || this.#defaultMapping.uiSourceCodeForScript(script);
+    uiSourceCode = uiSourceCode || this.defaultMapping.uiSourceCodeForScript(script);
     return uiSourceCode;
   }
 
@@ -654,9 +665,8 @@ class ModelData {
     locations = locations.length ?
         locations :
         this.#resourceMapping.uiLocationToJSLocations(uiSourceCode, lineNumber, columnNumber);
-    locations = locations.length ?
-        locations :
-        this.#defaultMapping.uiLocationToRawLocations(uiSourceCode, lineNumber, columnNumber);
+    locations = locations.length ? locations :
+                                   this.defaultMapping.uiLocationToRawLocations(uiSourceCode, lineNumber, columnNumber);
     return locations;
   }
 
@@ -666,7 +676,7 @@ class ModelData {
     let ranges = this.compilerMapping.uiLocationRangeToRawLocationRanges(uiSourceCode, textRange);
     ranges ??= this.#resourceScriptMapping.uiLocationRangeToRawLocationRanges(uiSourceCode, textRange);
     ranges ??= this.#resourceMapping.uiLocationRangeToJSLocationRanges(uiSourceCode, textRange);
-    ranges ??= this.#defaultMapping.uiLocationRangeToRawLocationRanges(uiSourceCode, textRange);
+    ranges ??= this.defaultMapping.uiLocationRangeToRawLocationRanges(uiSourceCode, textRange);
     return ranges;
   }
 
@@ -720,7 +730,7 @@ class ModelData {
     this.#debuggerModel.setBeforePausedCallback(null);
     this.compilerMapping.dispose();
     this.#resourceScriptMapping.dispose();
-    this.#defaultMapping.dispose();
+    this.defaultMapping.dispose();
   }
 
   getResourceScriptMapping(): ResourceScriptMapping {

package/front_end/models/bindings/DefaultScriptMapping.ts

@@ -10,6 +10,7 @@ import * as Workspace from '../workspace/workspace.js';
 
 import {ContentProviderBasedProject} from './ContentProviderBasedProject.js';
 import type {DebuggerSourceMapping, DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
+import {NetworkProject} from './NetworkProject.js';
 
 export class DefaultScriptMapping implements DebuggerSourceMapping {
   readonly #debuggerWorkspaceBinding: DebuggerWorkspaceBinding;
@@ -26,6 +27,7 @@ export class DefaultScriptMapping implements DebuggerSourceMapping {
     this.#project =
         new ContentProviderBasedProject(workspace, 'debugger:' + debuggerModel.target().id(),
                                         Workspace.Workspace.projectTypes.Debugger, '', true /* isServiceProject */);
+    NetworkProject.setTargetForProject(this.#project, debuggerModel.target());
     this.#eventListeners = [
       debuggerModel.addEventListener(SDK.DebuggerModel.Events.GlobalObjectCleared, this.globalObjectCleared, this),
       debuggerModel.addEventListener(SDK.DebuggerModel.Events.ParsedScriptSource, this.parsedScriptSource, this),
@@ -44,14 +46,18 @@ export class DefaultScriptMapping implements DebuggerSourceMapping {
 
   static scriptForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SDK.Script.Script|null {
     for (const defaultScriptMapping of defaultScriptMappings) {
-      const script = defaultScriptMapping.#uiSourceCodeToScript.get(uiSourceCode);
-      if (script !== undefined) {
+      const script = defaultScriptMapping.scriptForUISourceCode(uiSourceCode);
+      if (script !== null) {
         return script;
       }
     }
     return null;
   }
 
+  scriptForUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): SDK.Script.Script|null {
+    return this.#uiSourceCodeToScript.get(uiSourceCode) ?? null;
+  }
+
   uiSourceCodeForScript(script: SDK.Script.Script): Workspace.UISourceCode.UISourceCode|null {
     return this.#scriptToUISourceCode.get(script) ?? null;
   }

package/front_end/models/bindings/SourceMapStepping.ts

@@ -104,6 +104,24 @@ export function inlinedFunctionRanges(frame: SDK.DebuggerModel.CallFrame): SDK.D
   return position && range ? toLocationRanges(position, [range]) : [];
 }
 
+/**
+ * @returns true iff both frames are paused in the same call of an inlined function (or both aren't in any). Separate
+ *          calls of the same function are inlined into separate generated ranges.
+ */
+function isSameInlinedCall(a: SDK.DebuggerModel.CallFrame, b: SDK.DebuggerModel.CallFrame): boolean {
+  const range = (frame: SDK.DebuggerModel.CallFrame): SDK.SourceMapScopesInfo.PositionRange|null => {
+    const position = scopedPosition(frame);
+    return position?.sourceMap.inlinedFunctionRange(position.line, position.column) ?? null;
+  };
+  const rangeA = range(a);
+  const rangeB = range(b);
+  if (!rangeA || !rangeB) {
+    return rangeA === rangeB;
+  }
+  return a.script === b.script && SDK.SourceMapScopesInfo.comparePositions(rangeA.start, rangeB.start) === 0 &&
+      SDK.SourceMapScopesInfo.comparePositions(rangeA.end, rangeB.end) === 0;
+}
+
 /** @returns the bodies of the functions inlined into the logical function that {@link frame} is paused in. */
 export function inlinedCalleeRanges(frame: SDK.DebuggerModel.CallFrame): SDK.DebuggerModel.LocationRange[] {
   const position = scopedPosition(frame);
@@ -157,9 +175,11 @@ export async function nextAutoStep(
     case SDK.DebuggerModel.StepMode.STEP_OVER: {
       const startDepth = logicalDepth(start);
       const depth = logicalDepth(frames);
-      if (isUnmapped(frames[0]) || (depth === startDepth && isSameOriginalLocation(frames[0], start[0]))) {
-        // Unmapped code, or still on the same original location (the skip list only covers the generated ranges that
-        // contain the start position): keep stepping over.
+      if (isUnmapped(frames[0]) ||
+          (depth === startDepth && isSameOriginalLocation(frames[0], start[0]) &&
+           isSameInlinedCall(frames[0], start[0]))) {
+        // Unmapped code, or still on the same original location in the same (inlined) call (the skip list only covers
+        // the generated ranges that contain the start position): keep stepping over.
         return await computeAutoStep(SDK.DebuggerModel.StepMode.STEP_OVER, frames);
       }
       return null;

package/front_end/models/emulation/DeviceModeModel.ts

@@ -778,25 +778,10 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private calculateFitScale(screenWidth: number, screenHeight: number): number {
-    let scale = Math.min(screenWidth ? this.#preferredSize.width / screenWidth : 1,
-                         screenHeight ? this.#preferredSize.height / screenHeight : 1);
-    scale = Math.max(Math.min(Math.floor(scale * 100), 100), 1);
-
-    let sharpScale = scale;
-    while (sharpScale > scale * 0.7) {
-      let sharp = true;
-      if (screenWidth) {
-        sharp = sharp && Number.isInteger(screenWidth * sharpScale / 100);
-      }
-      if (screenHeight) {
-        sharp = sharp && Number.isInteger(screenHeight * sharpScale / 100);
-      }
-      if (sharp) {
-        return sharpScale / 100;
-      }
-      sharpScale -= 1;
-    }
-    return scale / 100;
+    const scaleW = screenWidth ? Math.floor(this.#preferredSize.width * 100 / screenWidth) : 100;
+    const scaleH = screenHeight ? Math.floor(this.#preferredSize.height * 100 / screenHeight) : 100;
+    const scale = Math.min(scaleW, scaleH, 100);
+    return Math.max(scale, 1) / 100;
   }
 
   setSizeAndScaleToFit(width: number, height: number): void {

package/front_end/models/formatter/ScriptFormatter.ts

@@ -30,25 +30,24 @@ export interface FormattedContent {
   formattedMapping: FormatterSourceMapping;
 }
 
-export async function format(settings: Common.Settings.Settings, contentType: Common.ResourceType.ResourceType,
-                             mimeType: string, content: string, indent?: string): Promise<FormattedContent> {
+export async function format(contentType: Common.ResourceType.ResourceType, mimeType: string, content: string,
+                             indent: string): Promise<FormattedContent> {
   if (contentType.isDocumentOrScriptOrStyleSheet()) {
-    return await formatScriptContent(settings, mimeType, content, indent);
+    return await formatScriptContent(mimeType, content, indent);
   }
 
   return {formattedContent: content, formattedMapping: new IdentityFormatterSourceMapping()};
 }
 
-export async function formatScriptContent(settings: Common.Settings.Settings, mimeType: string, content: string,
-                                          indent?: string): Promise<FormattedContent> {
-  const indentString = indent ?? settings.moduleSetting('text-editor-indent').get();
+export async function formatScriptContent(mimeType: string, content: string,
+                                          indent: string): Promise<FormattedContent> {
   const originalContent = content.replace(/\r\n?|[\n\u2028\u2029]/g, '\n').replace(/^\uFEFF/, '');
 
   const pool = formatterWorkerPool();
 
   let formatResult: FormatterActions.FormatResult = {content: originalContent, mapping: {original: [], formatted: []}};
   try {
-    formatResult = await pool.format(mimeType, originalContent, indentString);
+    formatResult = await pool.format(mimeType, originalContent, indent);
   } catch {
   }
   const originalContentLineEndings = Platform.StringUtilities.findLineEndingIndexes(originalContent);

package/front_end/models/javascript_metadata/NativeFunctions.ts

@@ -6735,10 +6735,6 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "setImmediates",
     signatures: [["rangeOffset","data","?dataOffset","?size"]]
   },
-  {
-    name: "copyElementImageToTexture",
-    signatures: [["source","destination"]]
-  },
   {
     name: "drawElementImageToTexture",
     signatures: [["source","destination"]]
@@ -6831,10 +6827,6 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "drawingBufferToneMapping",
     signatures: [["?toneMapping"]]
   },
-  {
-    name: "texElementImage2D",
-    signatures: [["target","internalformat","element","?config"]]
-  },
   {
     name: "texElementSubImage2D",
     signatures: [["target","level","xoffset","yoffset","element","?config"]]
@@ -7131,38 +7123,6 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "SmartCardError",
     signatures: [["message","options"]]
   },
-  {
-    name: "contributeToHistogram",
-    signatures: [["contribution"]]
-  },
-  {
-    name: "enableDebugMode",
-    signatures: [["?options"]]
-  },
-  {
-    name: "SharedStorageAppendMethod",
-    signatures: [["key","value","?options"]]
-  },
-  {
-    name: "SharedStorageClearMethod",
-    signatures: [["?options"]]
-  },
-  {
-    name: "SharedStorageDeleteMethod",
-    signatures: [["key","?options"]]
-  },
-  {
-    name: "SharedStorageSetMethod",
-    signatures: [["key","value","?options"]]
-  },
-  {
-    name: "selectURL",
-    signatures: [["name","urls","?options"]]
-  },
-  {
-    name: "run",
-    signatures: [["name","?options"]]
-  },
   {
     name: "BarcodeDetector",
     signatures: [["?barcodeDetectorOptions"]]
@@ -8739,10 +8699,6 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "setReportEventDataForAutomaticBeacons",
     signatures: [["event"]]
   },
-  {
-    name: "setSharedStorageContext",
-    signatures: [["contextString"]]
-  },
   {
     name: "CloseWatcher",
     signatures: [["?options"]]

package/front_end/models/source_map_scopes/FunctionCodeResolver.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
@@ -42,9 +41,8 @@ interface InputData {
 
 const inputCache = new WeakMap<Workspace.UISourceCode.UISourceCode, Promise<InputData>>();
 
-async function prepareInput(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string,
-                            settings: Common.Settings.Settings): Promise<InputData> {
-  const formattedContent = await format(uiSourceCode, content, settings);
+async function prepareInput(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string): Promise<InputData> {
+  const formattedContent = await format(uiSourceCode, content);
   const text = new TextUtils.Text.Text(formattedContent ? formattedContent.formattedContent : content);
   let performanceData = uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE) as
           Workspace.UISourceCode.LineColumnProfileMap |
@@ -61,14 +59,14 @@ async function prepareInput(uiSourceCode: Workspace.UISourceCode.UISourceCode, c
 }
 
 /** Formatting and parsing line endings for Text is expensive, so cache it. */
-async function prepareInputAndCache(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string,
-                                    settings: Common.Settings.Settings): Promise<InputData> {
+async function prepareInputAndCache(uiSourceCode: Workspace.UISourceCode.UISourceCode,
+                                    content: string): Promise<InputData> {
   let cachedPromise = inputCache.get(uiSourceCode);
   if (cachedPromise) {
     return await cachedPromise;
   }
 
-  cachedPromise = prepareInput(uiSourceCode, content, settings);
+  cachedPromise = prepareInput(uiSourceCode, content);
   inputCache.set(uiSourceCode, cachedPromise);
   return await cachedPromise;
 }
@@ -248,8 +246,8 @@ export async function getFunctionCodeFromLocation(
   return await getFunctionCodeFromRawLocation(rawLocation, debuggerWorkspaceBinding, options);
 }
 
-async function format(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string,
-                      settings: Common.Settings.Settings): Promise<Formatter.ScriptFormatter.FormattedContent|null> {
+async function format(uiSourceCode: Workspace.UISourceCode.UISourceCode,
+                      content: string): Promise<Formatter.ScriptFormatter.FormattedContent|null> {
   const contentType = uiSourceCode.contentType();
   const shouldFormat = !contentType.isFromSourceMap() && (contentType.isDocument() || contentType.isScript()) &&
       TextUtils.TextUtils.isMinified(content);
@@ -257,7 +255,7 @@ async function format(uiSourceCode: Workspace.UISourceCode.UISourceCode, content
     return null;
   }
 
-  return await Formatter.ScriptFormatter.formatScriptContent(settings, contentType.canonicalMimeType(), content, '\t');
+  return await Formatter.ScriptFormatter.formatScriptContent(contentType.canonicalMimeType(), content, '\t');
 }
 
 /**
@@ -278,7 +276,6 @@ export async function getFunctionCodeFromRawLocation(
     return null;
   }
 
-  const settings = rawLocation.debuggerModel.target().targetManager().settings;
-  const inputData = await prepareInputAndCache(functionBounds.uiSourceCode, content, settings);
+  const inputData = await prepareInputAndCache(functionBounds.uiSourceCode, content);
   return createFunctionCode(inputData, functionBounds, options);
 }

package/front_end/models/trace/LanternComputationData.ts

@@ -157,17 +157,6 @@ function createLanternRequest(
     resourceType = 'Fetch';
   }
 
-  // TODO: set decodedBodyLength for data urls in Trace Engine.
-  let resourceSize = request.args.data.decodedBodyLength ?? 0;
-  if (url.protocol === 'data:' && resourceSize === 0) {
-    const commaIndex = url.pathname.indexOf(',');
-    if (url.pathname.substring(0, commaIndex).includes(';base64')) {
-      resourceSize = atob(url.pathname.substring(commaIndex + 1)).length;
-    } else {
-      resourceSize = url.pathname.length - commaIndex - 1;
-    }
-  }
-
   // NetworkRequestsHandler defaults missing `renderBlocking` to 'non_blocking',
   // so only populate `renderBlocking` when it was explicitly set on the raw
   // ResourceSendRequest event or updated via PreloadRenderBlockingStatusChange.
@@ -189,7 +178,7 @@ function createLanternRequest(
     responseHeadersEndTime: request.args.data.syntheticData.downloadStart / 1000,
     networkEndTime: request.args.data.syntheticData.finishTime / 1000,
     transferSize: request.args.data.encodedDataLength,
-    resourceSize,
+    resourceSize: request.args.data.decodedBodyLength ?? 0,
     fromDiskCache: request.args.data.syntheticData.isDiskCached,
     fromMemoryCache: request.args.data.syntheticData.isMemoryCached,
     isLinkPreload: request.args.data.isLinkPreload,
@@ -321,8 +310,8 @@ function createNetworkRequests(trace: Lantern.Types.Trace, data: Handlers.Types.
 
       redirectedRequest.timing = {
         requestTime: redirectedRequest.networkRequestTime / 1000,
-        receiveHeadersStart: redirectedRequest.responseHeadersEndTime,
-        receiveHeadersEnd: redirectedRequest.responseHeadersEndTime,
+        receiveHeadersStart: redirectedRequest.responseHeadersEndTime - redirectedRequest.networkRequestTime,
+        receiveHeadersEnd: redirectedRequest.responseHeadersEndTime - redirectedRequest.networkRequestTime,
         proxyStart: -1,
         proxyEnd: -1,
         dnsStart: -1,
@@ -351,6 +340,9 @@ function createNetworkRequests(trace: Lantern.Types.Trace, data: Handlers.Types.
       requestChain.push(redirectedRequest);
       lanternRequests.push(redirectedRequest);
     }
+    if (requestChain.length) {
+      request.rendererStartTime = requestChain[requestChain.length - 1].networkEndTime;
+    }
     requestChain.push(request);
     lanternRequests.push(request);
 

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

@@ -408,23 +408,57 @@ export class BottomUpRootNode extends Node {
     const forceGroupIdCallback = this.forceGroupIdCallback;
 
     const idToIsCacheHit = new Map<string, boolean>();
+
+    // Node IDs are cached so that every event with the same ID reuses one
+    // string. Building a new ID string per event, and hashing it again on
+    // each Map lookup, is a large part of the cost of this loop on big
+    // traces.
+    const profileCallIdByCallFrame = new Map<Protocol.Runtime.CallFrame, string>();
+    // Grouped IDs are looked up by ID and then by group ID, because keying a
+    // flat Map by `${id}-${groupId}` would build a new string per event.
+    const groupedIdsByEventId = new Map<string, Map<string, string>>();
+    const nodeIdForEvent = (e: Types.Events.Event): string => {
+      let id: string;
+      if (Types.Events.isProfileCall(e)) {
+        // Profile calls for the same frame share one callFrame object, and
+        // their ID only depends on its fields.
+        const cachedId = profileCallIdByCallFrame.get(e.callFrame);
+        if (cachedId === undefined) {
+          id = generateEventID(e);
+          profileCallIdByCallFrame.set(e.callFrame, id);
+        } else {
+          id = cachedId;
+        }
+      } else {
+        id = generateEventID(e);
+      }
+      if (!forceGroupIdCallback || !eventGroupIdCallback) {
+        return id;
+      }
+      const groupId = eventGroupIdCallback(e);
+      let groupedIds = groupedIdsByEventId.get(id);
+      if (!groupedIds) {
+        groupedIds = new Map();
+        groupedIdsByEventId.set(id, groupedIds);
+      }
+      let groupedId = groupedIds.get(groupId);
+      if (groupedId === undefined) {
+        groupedId = `${id}-${groupId}`;
+        groupedIds.set(groupId, groupedId);
+      }
+      return groupedId;
+    };
+
     for (const e of this.events) {
       if (Types.Events.isReceivedDataEvent(e) && e.name === 'ResourceReceiveResponse') {
-        let id = generateEventID(e);
-        if (this.forceGroupIdCallback && this.eventGroupIdCallback) {
-          id = `${id}-${this.eventGroupIdCallback(e)}`;
-        }
-        idToIsCacheHit.set(id, e.args.data.fromCache || false);
+        idToIsCacheHit.set(nodeIdForEvent(e), e.args.data.fromCache || false);
       }
     }
 
     // encodedDataLength is provided solely on instant events.
     const sumTransferSizeOfInstantEvent = (e: Types.Events.Event): void => {
       if (Types.Events.isReceivedDataEvent(e)) {
-        let id = generateEventID(e);
-        if (this.forceGroupIdCallback && this.eventGroupIdCallback) {
-          id = `${id}-${this.eventGroupIdCallback(e)}`;
-        }
+        const id = nodeIdForEvent(e);
         let node = nodeById.get(id);
         if (!node) {
           node = new BottomUpNode(root, id, e, false, root);
@@ -477,10 +511,7 @@ export class BottomUpRootNode extends Node {
       const duration = actualEndTime - Math.max(currentStartTime, startTime);
       selfTimeStack[selfTimeStack.length - 1] -= duration;
       selfTimeStack.push(duration);
-      let id = generateEventID(e);
-      if (forceGroupIdCallback && eventGroupIdCallback) {
-        id = `${id}-${eventGroupIdCallback(e)}`;
-      }
+      const id = nodeIdForEvent(e);
 
       idStack.push(id);