chrome-devtools-frontend 1.0.1541552 → 1.0.1542501

package/docs/get_the_code.md

@@ -368,6 +368,15 @@ out/Default/chrome --custom-devtools-frontend=file://$(realpath out/Default/gen/
 afterwards, which can be quite a bit faster than building and linking the full
 Chromium binary.
 
+Alternatively you can use `npm start` from the DevTools sub folder (`third_party/devtools-frontend/src/`) with the browser set to `chromium`.
+This will tell the command that you are in a Chromium checkout and try to find the correct browser executable path to resolve.
+Or alternately you can use a `.env` file, see [set up here](#using-a-env-file-for-default-script-options).
+
+```bash
+cd third_party/devtools-frontend/src/
+npm start -- --browser=chromium
+```
+
 ### Testing
 
 To run the test suite, use `npm test` from within the DevTools front-end folder:

package/front_end/Tests.js

@@ -955,6 +955,7 @@
       Common.Settings.Settings.instance({
         forceNew: true,
         ...Main.Main.instanceForTest.createSettingsStorage(prefs),
+        settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
         runSettingsMigration: false,
       });
 

package/front_end/core/common/Settings.ts

@@ -10,7 +10,6 @@ import type {EventDescriptor, EventTargetEvent, GenericEvents} from './EventTarg
 import {ObjectWrapper} from './Object.js';
 import {
   getLocalizedSettingsCategory,
-  getRegisteredSettings as getRegisteredSettingsInternal,
   type LearnMore,
   maybeRemoveSettingExtension,
   type RegExpSettingItem,
@@ -25,7 +24,21 @@ import {
 
 let settingsInstance: Settings|undefined;
 
+export interface SettingsCreationOptions {
+  syncedStorage: SettingsStorage;
+  globalStorage: SettingsStorage;
+  localStorage: SettingsStorage;
+  settingRegistrations: SettingRegistration[];
+  logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>;
+  runSettingsMigration?: boolean;
+}
+
 export class Settings {
+  readonly syncedStorage: SettingsStorage;
+  readonly globalStorage: SettingsStorage;
+  readonly localStorage: SettingsStorage;
+
+  readonly #settingRegistrations: SettingRegistration[];
   readonly #sessionStorage = new SettingsStorage({});
   settingNameSet = new Set<string>();
   orderValuesBySettingCategory = new Map<SettingCategory, Set<number>>();
@@ -34,16 +47,16 @@ export class Settings {
   readonly moduleSettings = new Map<string, Setting<unknown>>();
   #logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>;
 
-  private constructor(
-      readonly syncedStorage: SettingsStorage,
-      readonly globalStorage: SettingsStorage,
-      readonly localStorage: SettingsStorage,
-      logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>,
-      runSettingsMigration?: boolean,
-  ) {
+  constructor(
+      {syncedStorage, globalStorage, localStorage, settingRegistrations, logSettingAccess, runSettingsMigration}:
+          SettingsCreationOptions) {
+    this.syncedStorage = syncedStorage;
+    this.globalStorage = globalStorage;
+    this.localStorage = localStorage;
+    this.#settingRegistrations = settingRegistrations;
     this.#logSettingAccess = logSettingAccess;
 
-    for (const registration of this.getRegisteredSettings()) {
+    for (const registration of this.#settingRegistrations) {
       const {settingName, defaultValue, storageType} = registration;
       const isRegex = registration.settingType === SettingType.REGEX;
 
@@ -68,7 +81,7 @@ export class Settings {
   }
 
   getRegisteredSettings(): SettingRegistration[] {
-    return getRegisteredSettingsInternal();
+    return this.#settingRegistrations;
   }
 
   static hasInstance(): boolean {
@@ -80,17 +93,27 @@ export class Settings {
     syncedStorage: SettingsStorage|null,
     globalStorage: SettingsStorage|null,
     localStorage: SettingsStorage|null,
+    settingRegistrations: SettingRegistration[]|null,
     logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>,
     runSettingsMigration?: boolean,
-  } = {forceNew: null, syncedStorage: null, globalStorage: null, localStorage: null}): Settings {
-    const {forceNew, syncedStorage, globalStorage, localStorage, logSettingAccess, runSettingsMigration} = opts;
+  } = {forceNew: null, syncedStorage: null, globalStorage: null, localStorage: null, settingRegistrations: null}):
+      Settings {
+    const {
+      forceNew,
+      syncedStorage,
+      globalStorage,
+      localStorage,
+      settingRegistrations,
+      logSettingAccess,
+      runSettingsMigration
+    } = opts;
     if (!settingsInstance || forceNew) {
-      if (!syncedStorage || !globalStorage || !localStorage) {
+      if (!syncedStorage || !globalStorage || !localStorage || !settingRegistrations) {
         throw new Error(`Unable to create settings: global and local storage must be provided: ${new Error().stack}`);
       }
 
-      settingsInstance =
-          new Settings(syncedStorage, globalStorage, localStorage, logSettingAccess, runSettingsMigration);
+      settingsInstance = new Settings(
+          {syncedStorage, globalStorage, localStorage, settingRegistrations, logSettingAccess, runSettingsMigration});
     }
 
     return settingsInstance;

package/front_end/core/host/UserMetrics.ts

@@ -317,6 +317,11 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordPerformanceHistogram(
         'DevTools.Insights.TeaserGenerationTime', timeInMilliseconds);
   }
+
+  consoleInsightTeaserFirstChunkGenerated(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogram(
+        'DevTools.Insights.TeaserFirstChunkGenerationTime', timeInMilliseconds);
+  }
 }
 
 /**

package/front_end/core/sdk/IOModel.ts

@@ -25,10 +25,7 @@ export class IOModel extends SDKModel<void> {
   }
 
   async close(handle: Protocol.IO.StreamHandle): Promise<void> {
-    const result = await this.target().ioAgent().invoke_close({handle});
-    if (result.getError()) {
-      console.error('Could not close stream.');
-    }
+    await this.target().ioAgent().invoke_close({handle});
   }
 
   async resolveBlob(objectOrObjectId: Protocol.Runtime.RemoteObjectId|RemoteObject): Promise<string> {

package/front_end/core/sdk/ServerSentEventsProtocol.ts

@@ -35,6 +35,10 @@ export class ServerSentEventsParser {
     await this.#decoder.addBase64Chunk(raw);
   }
 
+  addTextChunk(chunk: string): void {
+    this.#onTextChunk(chunk);
+  }
+
   #onTextChunk(chunk: string): void {
     // A line consists of "this.#line" plus a slice of "chunk[start:<next new cr/lf>]".
     let start = 0;

package/front_end/entrypoints/main/MainImpl.ts

@@ -168,9 +168,12 @@ export class MainImpl {
     Object.assign(Root.Runtime.hostConfig, config);
 
     const creationOptions: Foundation.Universe.CreationOptions = {
-      ...this.createSettingsStorage(prefs),
-      logSettingAccess: VisualLogging.logSettingAccess,
-      runSettingsMigration: !Host.InspectorFrontendHost.isUnderTest(),
+      settingsCreationOptions: {
+        ...this.createSettingsStorage(prefs),
+        settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
+        logSettingAccess: VisualLogging.logSettingAccess,
+        runSettingsMigration: !Host.InspectorFrontendHost.isUnderTest(),
+      },
     };
     new Foundation.Universe.Universe(creationOptions);
 

package/front_end/foundation/Universe.ts

@@ -6,11 +6,7 @@ import * as Common from '../core/common/common.js';
 
 export interface CreationOptions {
   // Settings things
-  syncedStorage: Common.Settings.SettingsStorage;
-  globalStorage: Common.Settings.SettingsStorage;
-  localStorage: Common.Settings.SettingsStorage;
-  logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>;
-  runSettingsMigration?: boolean;
+  settingsCreationOptions: Common.Settings.SettingsCreationOptions;
 }
 
 export class Universe {
@@ -19,11 +15,7 @@ export class Universe {
     //                            For now the global is fine as we don't anticipate the MCP server to change settings.
     Common.Settings.Settings.instance({
       forceNew: true,
-      syncedStorage: options.syncedStorage,
-      globalStorage: options.globalStorage,
-      localStorage: options.localStorage,
-      logSettingAccess: options.logSettingAccess,
-      runSettingsMigration: options.runSettingsMigration,
+      ...options.settingsCreationOptions,
     });
   }
 }

package/front_end/generated/SupportedCSSProperties.js

@@ -419,10 +419,10 @@ export const generatedProperties = [
    "column-height",
    "column-rule-break",
    "column-rule-color",
-   "column-rule-edge-end-outset",
-   "column-rule-edge-start-outset",
-   "column-rule-interior-end-outset",
-   "column-rule-interior-start-outset",
+   "column-rule-edge-end-inset",
+   "column-rule-edge-start-inset",
+   "column-rule-interior-end-inset",
+   "column-rule-interior-start-inset",
    "column-rule-style",
    "column-rule-visibility-items",
    "column-rule-width",
@@ -642,10 +642,10 @@ export const generatedProperties = [
    "row-gap",
    "row-rule-break",
    "row-rule-color",
-   "row-rule-edge-end-outset",
-   "row-rule-edge-start-outset",
-   "row-rule-interior-end-outset",
-   "row-rule-interior-start-outset",
+   "row-rule-edge-end-inset",
+   "row-rule-edge-start-inset",
+   "row-rule-interior-end-inset",
+   "row-rule-interior-start-inset",
    "row-rule-style",
    "row-rule-visibility-items",
    "row-rule-width",
@@ -1729,28 +1729,28 @@ export const generatedProperties = [
  },
  {
   "inherited": false,
-  "name": "column-rule-edge-end-outset"
+  "name": "column-rule-edge-end-inset"
  },
  {
   "inherited": false,
-  "name": "column-rule-edge-start-outset"
+  "name": "column-rule-edge-start-inset"
  },
  {
-  "inherited": false,
-  "name": "column-rule-interior-end-outset"
+  "longhands": [
+   "column-rule-edge-start-inset",
+   "column-rule-edge-end-inset",
+   "column-rule-interior-start-inset",
+   "column-rule-interior-end-inset"
+  ],
+  "name": "column-rule-inset"
  },
  {
   "inherited": false,
-  "name": "column-rule-interior-start-outset"
+  "name": "column-rule-interior-end-inset"
  },
  {
-  "longhands": [
-   "column-rule-edge-start-outset",
-   "column-rule-edge-end-outset",
-   "column-rule-interior-start-outset",
-   "column-rule-interior-end-outset"
-  ],
-  "name": "column-rule-outset"
+  "inherited": false,
+  "name": "column-rule-interior-start-inset"
  },
  {
   "keywords": [
@@ -3738,28 +3738,28 @@ export const generatedProperties = [
  },
  {
   "inherited": false,
-  "name": "row-rule-edge-end-outset"
+  "name": "row-rule-edge-end-inset"
  },
  {
   "inherited": false,
-  "name": "row-rule-edge-start-outset"
+  "name": "row-rule-edge-start-inset"
  },
  {
-  "inherited": false,
-  "name": "row-rule-interior-end-outset"
+  "longhands": [
+   "row-rule-edge-start-inset",
+   "row-rule-edge-end-inset",
+   "row-rule-interior-start-inset",
+   "row-rule-interior-end-inset"
+  ],
+  "name": "row-rule-inset"
  },
  {
   "inherited": false,
-  "name": "row-rule-interior-start-outset"
+  "name": "row-rule-interior-end-inset"
  },
  {
-  "longhands": [
-   "row-rule-edge-start-outset",
-   "row-rule-edge-end-outset",
-   "row-rule-interior-start-outset",
-   "row-rule-interior-end-outset"
-  ],
-  "name": "row-rule-outset"
+  "inherited": false,
+  "name": "row-rule-interior-start-inset"
  },
  {
   "keywords": [
@@ -3847,16 +3847,16 @@ export const generatedProperties = [
  },
  {
   "longhands": [
-   "row-rule-edge-start-outset",
-   "row-rule-edge-end-outset",
-   "row-rule-interior-start-outset",
-   "row-rule-interior-end-outset",
-   "column-rule-edge-start-outset",
-   "column-rule-edge-end-outset",
-   "column-rule-interior-start-outset",
-   "column-rule-interior-end-outset"
-  ],
-  "name": "rule-outset"
+   "row-rule-edge-start-inset",
+   "row-rule-edge-end-inset",
+   "row-rule-interior-start-inset",
+   "row-rule-interior-end-inset",
+   "column-rule-edge-start-inset",
+   "column-rule-edge-end-inset",
+   "column-rule-interior-start-inset",
+   "column-rule-interior-end-inset"
+  ],
+  "name": "rule-inset"
  },
  {
   "longhands": [

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
-import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 
 import {debugLog} from './debug.js';
 
@@ -32,6 +31,20 @@ interface CachedRequest {
   response: Host.AidaClient.CompletionResponse;
 }
 
+export interface Callbacks {
+  getSelectionHead: () => number;
+  getCompletionHint: () => string | undefined | null;
+  setAiAutoCompletion: (args: {
+    text: string,
+    from: number,
+    startTime: number,
+    onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void,
+    clearCachedRequest: () => void,
+    rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+    sampleId?: number,
+  }|null) => void;
+}
+
 /* clang-format off */
 const consoleAdditionalContextFileContent = `/**
  * This file describes the execution environment of the Chrome DevTools Console.
@@ -141,24 +154,24 @@ const console = {
  *    the suggestion is displayed.
  */
 export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  #editor: TextEditor.TextEditor.TextEditor;
   #stopSequences: string[];
   #renderingTimeout?: number;
   #aidaRequestCache?: CachedRequest;
+  // TODO(b/445394511): Remove panel from the class
   #panel: ContextFlavor;
+  #callbacks?: Callbacks;
 
   readonly #sessionId: string = crypto.randomUUID();
   readonly #aidaClient: Host.AidaClient.AidaClient;
   readonly #serverSideLoggingEnabled: boolean;
 
-  constructor(
-      opts: AgentOptions, editor: TextEditor.TextEditor.TextEditor, panel: ContextFlavor, stopSequences?: string[]) {
+  constructor(opts: AgentOptions, panel: ContextFlavor, callbacks?: Callbacks, stopSequences?: string[]) {
     super();
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
-    this.#editor = editor;
     this.#panel = panel;
     this.#stopSequences = stopSequences ?? [];
+    this.#callbacks = callbacks;
   }
 
   #debouncedRequestAidaSuggestion = Common.Debouncer.debounce(
@@ -171,8 +184,8 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
 
   #buildRequest(
       prefix: string, suffix: string,
-      inferenceLanguage: Host.AidaClient.AidaInferenceLanguage = Host.AidaClient.AidaInferenceLanguage.JAVASCRIPT):
-      Host.AidaClient.CompletionRequest {
+      inferenceLanguage: Host.AidaClient.AidaInferenceLanguage = Host.AidaClient.AidaInferenceLanguage.JAVASCRIPT,
+      additionalFiles?: Host.AidaClient.AdditionalFile[]): Host.AidaClient.CompletionRequest {
     const userTier = Host.AidaClient.convertToUserTierEnum(this.#userTier);
     function validTemperature(temperature: number|undefined): number|undefined {
       return typeof temperature === 'number' && temperature >= 0 ? temperature : undefined;
@@ -180,13 +193,15 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     // As a temporary fix for b/441221870 we are prepending a newline for each prefix.
     prefix = '\n' + prefix;
 
-    const additionalFiles = this.#panel === ContextFlavor.CONSOLE ? [{
-      path: 'devtools-console-context.js',
-      content: consoleAdditionalContextFileContent,
-      included_reason: Host.AidaClient.Reason.RELATED_FILE,
-    }] :
-                                                                    undefined;
-
+    let additionalContextFiles = additionalFiles ?? undefined;
+    if (!additionalContextFiles) {
+      additionalContextFiles = this.#panel === ContextFlavor.CONSOLE ? [{
+        path: 'devtools-console-context.js',
+        content: consoleAdditionalContextFileContent,
+        included_reason: Host.AidaClient.Reason.RELATED_FILE,
+      }] :
+                                                                       undefined;
+    }
     return {
       client: Host.AidaClient.CLIENT_NAME,
       prefix,
@@ -203,7 +218,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
         user_tier: userTier,
         client_version: Root.Runtime.getChromeVersion(),
       },
-      additional_files: additionalFiles,
+      additional_files: additionalContextFiles,
     };
   }
 
@@ -239,7 +254,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     // `currentHint` is the portion of a standard autocomplete suggestion that the user has not yet typed.
     // For example, if the user types `document.queryS` and the autocomplete suggests `document.querySelector`,
     // the `currentHint` is `elector`.
-    const currentHintInMenu = this.#editor.editor.plugin(TextEditor.Config.showCompletionHint)?.currentHint;
+    const currentHintInMenu = this.#callbacks?.getCompletionHint();
     // TODO(ergunsh): We should not do this check here. Instead, the AI code suggestions should be provided
     // as it is to the view plugin. The view plugin should choose which one to use based on the completion hint
     // and selected completion.
@@ -321,21 +336,19 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
       } = sampleResponse;
       const remainingDelay = Math.max(DELAY_BEFORE_SHOWING_RESPONSE_MS - (performance.now() - startTime), 0);
       this.#renderingTimeout = window.setTimeout(() => {
-        const currentCursorPosition = this.#editor.editor.state.selection.main.head;
+        const currentCursorPosition = this.#callbacks?.getSelectionHead();
         if (currentCursorPosition !== cursorPositionAtRequest) {
           this.dispatchEventToListeners(Events.RESPONSE_RECEIVED, {});
           return;
         }
-        this.#editor.dispatch({
-          effects: TextEditor.Config.setAiAutoCompleteSuggestion.of({
-            text: suggestionText,
-            from: cursorPositionAtRequest,
-            rpcGlobalId,
-            sampleId,
-            startTime,
-            onImpression: this.#registerUserImpression.bind(this),
-            clearCachedRequest: this.clearCachedRequest.bind(this),
-          })
+        this.#callbacks?.setAiAutoCompletion({
+          text: suggestionText,
+          from: cursorPositionAtRequest,
+          rpcGlobalId,
+          sampleId,
+          startTime,
+          onImpression: this.registerUserImpression.bind(this),
+          clearCachedRequest: this.clearCachedRequest.bind(this),
         });
 
         if (fromCache) {
@@ -417,7 +430,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#aidaRequestCache = {request, response};
   }
 
-  #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number): void {
+  registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number): void {
     const seconds = Math.floor(latency / 1_000);
     const remainingMs = latency % 1_000;
     const nanos = Math.floor(remainingMs * 1_000_000);
@@ -469,14 +482,42 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#debouncedRequestAidaSuggestion(prefix, suffix, cursorPositionAtRequest, inferenceLanguage);
   }
 
+  async completeCode(
+      prefix: string, suffix: string, cursorPositionAtRequest: number,
+      inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage,
+      additionalFiles?: Host.AidaClient.AdditionalFile[]): Promise<{
+    response: Host.AidaClient.CompletionResponse | null,
+    fromCache: boolean,
+  }> {
+    const request = this.#buildRequest(prefix, suffix, inferenceLanguage, additionalFiles);
+    const {response, fromCache} = await this.#completeCodeCached(request);
+
+    debugLog('At cursor position', cursorPositionAtRequest, {request, response, fromCache});
+    if (!response) {
+      return {response: null, fromCache: false};
+    }
+
+    return {response, fromCache};
+  }
+
   remove(): void {
     if (this.#renderingTimeout) {
       clearTimeout(this.#renderingTimeout);
       this.#renderingTimeout = undefined;
     }
-    this.#editor.dispatch({
-      effects: TextEditor.Config.setAiAutoCompleteSuggestion.of(null),
-    });
+    this.#callbacks?.setAiAutoCompletion(null);
+  }
+
+  static isAiCodeCompletionEnabled(locale: string): boolean {
+    if (!locale.startsWith('en-')) {
+      return false;
+    }
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!aidaAvailability || aidaAvailability.blockedByGeo || aidaAvailability.blockedByAge ||
+        aidaAvailability.blockedByEnterprisePolicy) {
+      return false;
+    }
+    return Boolean(aidaAvailability.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
   }
 }
 

package/front_end/models/har/Importer.ts

@@ -137,6 +137,20 @@ export class Importer {
         async () =>
             new TextUtils.ContentData.ContentData(contentText ?? '', isBase64, mimeType ?? '', charset ?? undefined));
 
+    if (request.mimeType === Platform.MimeType.MimeType.EVENTSTREAM && contentText) {
+      const issueTime = entry.startedDateTime.getTime() / 1000;
+      const onEvent = (eventName: string, data: string, eventId: string): void => {
+        request.addEventSourceMessage(issueTime, eventName, eventId, data);
+      };
+      const parser = new SDK.ServerSentEventProtocol.ServerSentEventsParser(onEvent, charset ?? undefined);
+      let text = contentText;
+      if (isBase64) {
+        const bytes = Common.Base64.decode(contentText);
+        text = new TextDecoder(charset ?? undefined).decode(bytes);
+      }
+      parser.addTextChunk(text);
+    }
+
     // Timing data.
     Importer.setupTiming(request, issueTime, entry.time, entry.timings);
 

package/front_end/models/issues_manager/IssuesManager.ts

@@ -33,7 +33,6 @@ import {SourceFrameIssuesManager} from './SourceFrameIssuesManager.js';
 import {SRIMessageSignatureIssue} from './SRIMessageSignatureIssue.js';
 import {StylesheetLoadingIssue} from './StylesheetLoadingIssue.js';
 import {UnencodedDigestIssue} from './UnencodedDigestIssue.js';
-import {UserReidentificationIssue} from './UserReidentificationIssue.js';
 
 export {Events} from './IssuesManagerEvents.js';
 
@@ -145,10 +144,6 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.UnencodedDigestIssue,
     UnencodedDigestIssue.fromInspectorIssue,
   ],
-  [
-    Protocol.Audits.InspectorIssueCode.UserReidentificationIssue,
-    UserReidentificationIssue.fromInspectorIssue,
-  ],
 ]);
 
 /**

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7617,10 +7617,6 @@ export const NativeFunctions = [
     name: "drawElementImage",
     signatures: [["element","x","y","?dwidth","?dheight"]]
   },
-  {
-    name: "setHitTestRegions",
-    signatures: [["hitTestRegions"]]
-  },
   {
     name: "Path2D",
     signatures: [["?path"]]

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

@@ -44,6 +44,7 @@ type GeneratedFileSizes = {
 }|{files: Record<string, number>, unmappedBytes: number, totalBytes: number};
 
 let scriptById = new Map<string, Script>();
+let frameIdByIsolate = new Map<string, string>();
 
 export function deps(): HandlerName[] {
   return ['Meta', 'NetworkRequests'];
@@ -51,6 +52,7 @@ export function deps(): HandlerName[] {
 
 export function reset(): void {
   scriptById = new Map();
+  frameIdByIsolate = new Map();
 }
 
 export function handleEvent(event: Types.Events.Event): void {
@@ -73,6 +75,9 @@ export function handleEvent(event: Types.Events.Event): void {
   if (Types.Events.isRundownScript(event)) {
     const {isolate, scriptId, url, sourceUrl, sourceMapUrl, sourceMapUrlElided} = event.args.data;
     const script = getOrMakeScript(isolate, scriptId);
+    if (!script.frame) {
+      script.frame = frameIdByIsolate.get(String(isolate)) ?? '';
+    }
     script.url = url;
     script.ts = event.ts;
     if (sourceUrl) {
@@ -105,6 +110,27 @@ export function handleEvent(event: Types.Events.Event): void {
     script.content = (script.content ?? '') + sourceText;
     return;
   }
+
+  // Setup frameIdByIsolate, which is used only in the case that we are missing
+  // rundown events for a script. We won't get a frame association from the rundown
+  // events if the recording started only after the script was first compiled. In
+  // that scenario, derive the frame via the isolate / FunctionCall events.
+  // TODO: ideally, we put the frame on ScriptCatchup event. So much easier. This approach has some
+  // issues.
+  if (Types.Events.isFunctionCall(event) && event.args.data?.isolate && event.args.data.frame) {
+    const {isolate, frame} = event.args.data;
+    const existingValue = frameIdByIsolate.get(isolate);
+    if (existingValue !== frame) {
+      frameIdByIsolate.set(isolate, frame);
+
+      // Update the scripts we discovered but without knowing their frame.
+      for (const script of scriptById.values()) {
+        if (!script.frame && script.isolate === isolate) {
+          script.frame = frame;
+        }
+      }
+    }
+  }
 }
 
 function findFrame(meta: MetaHandlerData, frameId: string): Types.Events.TraceFrame|null {

package/front_end/models/trace/types/TraceEvents.ts

@@ -2804,7 +2804,7 @@ export interface FunctionCall extends Complete {
   args: Args&{
     data?: Partial<CallFrame>& {
       frame?: string,
-      isolate?: number,
+      isolate?: string,
     },
   };
 }