chrome-devtools-frontend 1.0.1664496 → 1.0.1664619

package/.agents/skills/devtools-ux-writing-refactor/SKILL.md

@@ -112,9 +112,9 @@ When all tests and presubmit checks pass, commit your changes and upload the CL
    *(If you update an existing commit on this branch, use `git commit --amend`).*
 
 2. **Upload the CL to Gerrit**
-   Upload the CL using `git cl upload`. Provide a dynamic summary of changes (depending on the actual content of the change) and the bug trailer:
+   Upload the CL using `git cl upload -f`. Always pass `-f` (`--force`) to prevent `git cl upload` from prompting or opening an interactive text editor in background agent shells:
    ```bash
-   git cl upload -d --commit-description="Ensure consistent UI Strings in <folder_path>
+   git cl upload -f -d --commit-description="Ensure consistent UI Strings in <folder_path>
 
    Summary of changes:
    - <dynamically list specific words replaced, contractions adopted, or sentence case fixes>

package/.agents/skills/repro-flaky-tests/SKILL.md

@@ -43,7 +43,7 @@ The second bot should do the following:
 - Ensure you use the instructions from the `devtools-version-control` skill to create and switch branches appropriately.
 - Make a minor, harmless modification directly to the test file being investigated (e.g., adding a comment `// Trigger stressor bot`) to ensure the commit is not empty.
 - Add this file (with `git add`) and commit it using a meaningful commit message (e.g., `git commit -m "Deflake <test name>"`). Ask the user which bug number to use for the changelist description.
-- Upload this change using `git cl upload`. This creates a debugging CL that all agents (like the fix agent) will continue to work on.
+- Upload this change using `git cl upload -f`. Always use `-f` (`--force`) so the upload runs non-interactively without opening a text editor or prompt. This creates a debugging CL that all agents (like the fix agent) will continue to work on.
 - Note the <issue number> created during upload.
 - To start the stressor bot, run this command (substituting `<test file>:exact_test_id` with the actual file and exact test ID):
   `git cl try -B devtools-frontend/try -b e2e_stressor_linux -b e2e_stressor_win64 -b e2e_stressor_mac -p runner_args='<test file>:exact_test_id --repeat=100'`
@@ -81,7 +81,7 @@ The test fixing sub-agent should do the following:
 - Compile and run the test locally, to make sure there are no obvious errors introduced.
 - Commit the changes (to the branch created earlier). Make sure to list (in the changelist description) the test name, the fix, reasoning for why the test failed, why the fix fixes the issue and the failure rate (if non-zero). If you were not able to reproduce the error, state that the fix is speculative. Ask the user to provide the bug number to use in the changelist description.
 - CRITICAL: Iff the 'local-repro' bot does not reproduce the error, the 'fix-test' agent MUST wait until the stressor bot finishes its run before uploading the fix to the server (so that the stressor try run isn't aborted prematurely). If the error reproduces locally, you can upload immediately.
-- Once it is safe to do so, upload the change with `git cl upload`.
+- Once it is safe to do so, upload the change with `git cl upload -f`.
 
 ## Results
 

package/.agents/skills/version-control/SKILL.md

@@ -60,8 +60,9 @@ git rebase-update
 ### Initial upload
 When a CL is ready, upload it with:
 ```bash
-git cl upload -d --commit-description="<description>"
+git cl upload -f -d --commit-description="<description>"
 ```
+* Always include `-f` (`--force`) so that `git cl upload` runs non-interactively without opening a text editor or prompting.
 * Use the same writing style as the current committer
 * Keep line length below 72
 * Add a "Bug: <issue number>" or "Bug: None" trailer on a separate line.
@@ -70,7 +71,7 @@ git cl upload -d --commit-description="<description>"
 ### Subsequent upload
 To upload an updated CL:
 ```bash
-git cl upload -d -t "<one sentence patch set description>"
+git cl upload -f -d -t "<one sentence patch set description>"
 ```
 
 ## Release and Roll Status
@@ -86,7 +87,7 @@ To check whether a DevTools commit (`devtools/devtools-frontend`) has rolled int
 | Create new CL from main | `git new-branch <name>` |
 | Create stacked CL | `git new-branch --upstream_current <name>` |
 | Update current CL | `git commit --amend` |
-| Upload to Gerrit | `git cl upload` |
+| Upload to Gerrit | `git cl upload -f` |
 | Change branch parent | `git reparent-branch <new-parent>` |
 | Sync all branches | `git rebase-update` |
 | Check release & roll status | Query `https://chromiumdash.appspot.com/fetch_commit?commit=<sha>` |

package/docs/ui_engineering.md

@@ -1515,3 +1515,92 @@ The component will automatically sort and merge the ranges provided.
 
 In this example, the ranges `1,3` and `2,3` will be merged into `1,4`. The
 ranges `10,2` and the current range `5,3` will also be highlighted.
+
+## Migrating `UI.ListWidget.ListWidget`
+
+Replace the legacy imperative `UI.ListWidget.ListWidget` (which rendered inline editing controls and required custom delegates) with the modern `<devtools-list>` component.
+
+### Guidelines
+1. **Dialogue Modals for Complex Editors:** If the editor contains multiple input fields (e.g., location details, headers), show the editor in a modal card dialog powered by `UI.Dialog.Dialog`.
+2. **Inline Prompts for Trivial Editors:** If the editor is trivial (i.e., a single text input, such as URL pattern blocking rules), handle editing inline using a `<devtools-prompt>` component. In this case, clicking the item focuses the prompt and toggles `editing` mode inline, dispatching `@commit` and `@cancel` events to update the state. See `RequestConditionsDrawer` for a reference implementation.
+3. **Conditionally render list:** Use `<devtools-list>` and conditionally render it inside the card only if the list has elements (`input.locations.length > 0`). This ensures empty state layout rules are correctly applied and prevents extra spacing/gaps.
+4. **Declarative dialog views:** Define the edit/add modal content in a separate, customizable view function (e.g. `DEFAULT_DIALOG_VIEW`). Instantiating `UI.Dialog.Dialog` in the class is fine, but its content rendering should be driven declaratively by the dialog view function.
+5. **Common styles integration:** Ensure `{includeCommonStyles: true}` is passed when rendering elements into the DOM inside test setups to import proper layout variables and global typography styles (e.g. Roboto).
+
+**Before:**
+```typescript
+class SettingsTab extends UI.Widget.VBox implements UI.ListWidget.Delegate<Location> {
+  private readonly listWidget: UI.ListWidget.ListWidget<Location>;
+  constructor() {
+    super();
+    this.listWidget = new UI.ListWidget.ListWidget(this);
+    this.listWidget.show(this.element);
+  }
+
+  renderItem(item: Location, editable: boolean): Element {
+    const element = document.createElement('div');
+    element.createChild('span').textContent = item.title;
+    return element;
+  }
+
+  beginEdit(item: Location): UI.ListWidget.Editor<Location> {
+    const editor = new UI.ListWidget.Editor<Location>();
+    editor.createInput('title', 'text', 'Title', titleValidator);
+    return editor;
+  }
+
+  commitEdit(item: Location, editor: UI.ListWidget.Editor<Location>, isNew: boolean): void {
+    item.title = editor.control('title').value;
+    this.update();
+  }
+}
+```
+
+**After:**
+```typescript
+export interface SettingsTabInput {
+  items: Location[];
+  onAddClicked: () => void;
+  onEdit: (index: number) => void;
+  onDelete: (index: number) => void;
+}
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  render(html`
+    <devtools-card heading="Locations">
+      ${input.items.length > 0 ? html`
+        <devtools-list
+          .editable=${true}
+          .deletable=${true}
+          @edit=${(e: Lists.List.ItemEditEvent) => input.onEdit(e.detail.index)}
+          @delete=${(e: Lists.List.ItemRemoveEvent) => input.onDelete(e.detail.index)}>
+          ${input.items.map((item, index) => html`
+            <div slot="slot-${index}">
+              <span>${item.title}</span>
+            </div>
+          `)}
+        </devtools-list>
+      ` : nothing}
+      <devtools-button @click=${input.onAddClicked}>Add location</devtools-button>
+    </devtools-card>
+  `, target);
+};
+
+export interface SettingsTabDialogInput {
+  editingValues: {title: string};
+  validationErrors: {title: string | null};
+  onTitleInput: (val: string) => void;
+  onCancel: () => void;
+  onSave: () => void;
+}
+
+export const DEFAULT_DIALOG_VIEW = (input: SettingsTabDialogInput, target: HTMLElement) => {
+  render(html`
+    <div class="editor-container">
+      <input type="text" .value=${input.editingValues.title} @input=${(e: Event) => input.onTitleInput((e.target as HTMLInputElement).value)}>
+      <devtools-button @click=${input.onCancel}>Cancel</devtools-button>
+      <devtools-button @click=${input.onSave}>Save</devtools-button>
+    </div>
+  `, target);
+};
+```

package/eslint.config.mjs

@@ -621,10 +621,9 @@ export default defineConfig([
       ],
       '@devtools/l10n-i18nString-call-only-with-uistrings': 'error',
       '@devtools/l10n-no-i18nString-calls-module-instantiation': 'error',
-      '@devtools/l10n-no-locked-or-placeholder-only-phrase': 'error',
       '@devtools/l10n-no-uistrings-export': 'error',
       '@devtools/l10n-no-unused-message': 'error',
-      '@devtools/l10n-use-curly-apostrophes': 'error',
+      '@devtools/l10n-uistrings-text-style': 'error',
     },
   },
   {

package/front_end/core/host/AidaClient.ts

@@ -64,6 +64,7 @@ const AidaLanguageToMarkdown: Record<AidaInferenceLanguage, string> = {
 export class AidaAbortError extends Error {}
 export class AidaBlockError extends Error {}
 export class AidaQuotaError extends Error {}
+export class AidaPayloadTooLargeError extends Error {}
 
 interface AiStream {
   write: (data: string) => Promise<void>;
@@ -195,13 +196,16 @@ export class AidaClient {
               return;
             }
             if ('error' in result && result.error) {
-              const errorStr = typeof result.error === 'string' ? result.error : '';
-              const detailStr = typeof result.detail === 'string' ? result.detail : '';
-              if (errorStr.toLowerCase().includes('quota') || detailStr.toLowerCase().includes('quota')) {
+              if (isQuotaError(result.error, result.detail)) {
                 stream.fail(new AidaQuotaError(
                     `Cannot send request: ${result.error}${result.detail ? ` ${result.detail}` : ''}`));
                 return;
               }
+              if (isPayloadTooLargeError(result.error, result.detail)) {
+                stream.fail(new AidaPayloadTooLargeError(
+                    `Cannot send request: ${result.error}${result.detail ? ` ${result.detail}` : ''}`));
+                return;
+              }
               stream.fail(new Error(`Cannot send request: ${result.error}${result.detail ? ` ${result.detail}` : ''}`));
               return;
             }
@@ -261,9 +265,12 @@ export class AidaClient {
             thoughtSignature: result.functionCallChunk.functionCall.thoughtSignature,
           });
         } else if ('error' in result) {
-          if (typeof result.error === 'string' && result.error.toLowerCase().includes('quota')) {
+          if (isQuotaError(result.error)) {
             throw new AidaQuotaError(`Server responded: ${JSON.stringify(result)}`);
           }
+          if (isPayloadTooLargeError(result.error)) {
+            throw new AidaPayloadTooLargeError(`Server responded: ${JSON.stringify(result)}`);
+          }
           throw new Error(`Server responded: ${JSON.stringify(result)}`);
         } else {
           throw new Error(`Unknown chunk result ${JSON.stringify(result)}`);
@@ -519,3 +526,11 @@ export const enum Events {
 export interface EventTypes {
   [Events.AIDA_AVAILABILITY_CHANGED]: void;
 }
+
+function isQuotaError(...inputs: Array<string|undefined>): boolean {
+  return inputs.some(input => input?.toLowerCase().includes('quota'));
+}
+
+function isPayloadTooLargeError(...inputs: Array<string|undefined>): boolean {
+  return inputs.some(input => input?.toLowerCase().includes('payload size exceeds the limit'));
+}

package/front_end/core/host/InspectorFrontendHostStub.ts

@@ -37,7 +37,7 @@ import {streamWrite as resourceLoaderStreamWrite} from './ResourceLoader.js';
 
 const UIStrings = {
   /**
-   * @description Document title in Inspector Frontend Host of the DevTools window
+   * @description Document title in Inspector Frontend Host of the DevTools window.
    * @example {example.com} PH1
    */
   devtoolsS: 'DevTools - {PH1}',

package/front_end/core/host/ResourceLoader.ts

@@ -12,59 +12,59 @@ import type {LoadNetworkResourceResult} from './InspectorFrontendHostAPI.js';
 
 const UIStrings = {
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   systemError: 'System error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   connectionError: 'Connection error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   certificateError: 'Certificate error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   httpError: 'HTTP error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   cacheError: 'Cache error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
-  signedExchangeError: 'Signed Exchange error',
+  signedExchangeError: '`Signed Exchange` error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   ftpError: 'FTP error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   certificateManagerError: 'Certificate manager error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   dnsResolverError: 'DNS resolver error',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   unknownError: 'Unknown error',
   /**
-   * @description Phrase used in error messages that carry a network error name
+   * @description Phrase used in error messages that carry a network error name.
    * @example {404} PH1
    * @example {net::ERR_INSUFFICIENT_RESOURCES} PH2
    */
   httpErrorStatusCodeSS: 'HTTP error: status code {PH1}, {PH2}',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
   invalidUrl: 'Invalid URL',
   /**
-   * @description Name of an error category used in error messages
+   * @description Name of an error category used in error messages.
    */
-  decodingDataUrlFailed: 'Decoding Data URL failed',
+  decodingDataUrlFailed: 'Decoding data URL failed',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('core/host/ResourceLoader.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -886,6 +886,81 @@ export class CSSMatchedStyles {
     return new Set(this.#customHighlightPseudoDOMCascades.keys());
   }
 
+  /**
+   * Looks for a rule with the same selector chain as a specific parent rule of the current one.
+   * This finds a rule with the same guaranteed specificity, not necessarily THE parent rule,
+   * as the same selector string can be used on multiple rules in the same scope, in the same
+   * or different stylesheet.
+   *
+   * @param rule The (nested) rule whose parent rule selector should be matched
+   * @param nestingIndex Nesting depth of the parent selector to be matched, with 0 meaning direct parent, 1 grandparent rule and so on
+   * @returns A rule with the same selector chain and specificity as selected parent rule, if found. `null` otherwise
+   */
+  findParentRule(rule: CSSStyleRule, nestingIndex: number): CSSStyleRule|null {
+    const selectorText = rule.nestingSelectors?.[nestingIndex];
+    if (!selectorText) {
+      return null;
+    }
+    const nestingSelectors = rule.nestingSelectors?.slice(nestingIndex + 1) ?? [];
+
+    const matchCascade = (cascade: DOMInheritanceCascade): CSSStyleRule|null => {
+      for (const style of cascade.styles()) {
+        if (this.isInherited(style)) {
+          continue;
+        }
+        const parentRule = style.parentRule;
+        if (!(parentRule instanceof CSSStyleRule)) {
+          continue;
+        }
+        if (parentRule.selectorText() !== selectorText) {
+          continue;
+        }
+        const ruleNestingSelectors = parentRule.nestingSelectors ?? [];
+        if (ruleNestingSelectors.length !== nestingSelectors.length) {
+          continue;
+        }
+        let matchesChain = true;
+        for (let i = 0; i < nestingSelectors.length; i++) {
+          if (ruleNestingSelectors[i] !== nestingSelectors[i]) {
+            matchesChain = false;
+            break;
+          }
+        }
+        if (matchesChain) {
+          return parentRule;
+        }
+      }
+      return null;
+    };
+
+    if (this.#mainDOMCascade) {
+      const match = matchCascade(this.#mainDOMCascade);
+      if (match) {
+        return match;
+      }
+    }
+
+    if (this.#pseudoDOMCascades) {
+      for (const cascade of this.#pseudoDOMCascades.values()) {
+        const match = matchCascade(cascade);
+        if (match) {
+          return match;
+        }
+      }
+    }
+
+    if (this.#customHighlightPseudoDOMCascades) {
+      for (const cascade of this.#customHighlightPseudoDOMCascades.values()) {
+        const match = matchCascade(cascade);
+        if (match) {
+          return match;
+        }
+      }
+    }
+
+    return null;
+  }
+
   nodeForStyle(style: CSSStyleDeclaration): DOMNode|null {
     return this.#addedStyles.get(style) || this.#nodeForStyle.get(style) || null;
   }

package/front_end/core/sdk/NetworkRequest.ts

@@ -33,7 +33,7 @@ const UIStrings = {
   /**
    * @description Tooltip to explain why a cookie was blocked
    */
-  notOnPath: 'This cookie was blocked because its path was not an exact match for or a superdirectory of the request url’s path.',
+  notOnPath: 'This cookie was blocked because its path was not an exact match for or a superdirectory of the request URL’s path.',
   /**
    * @description Tooltip to explain why a cookie was blocked
    */
@@ -139,7 +139,7 @@ const UIStrings = {
   /**
    * @description Tooltip to explain why an attempt to set a cookie via a `Set-Cookie` HTTP header on a request's response was blocked.
    */
-  blockedReasonInvalidDomain: 'This attempt to set a cookie via a `Set-Cookie` header was blocked because its Domain attribute was invalid with regards to the current host url.',
+  blockedReasonInvalidDomain: 'This attempt to set a cookie via a `Set-Cookie` header was blocked because its Domain attribute was invalid with regards to the current host URL.',
   /**
    * @description Tooltip to explain why an attempt to set a cookie via a `Set-Cookie` HTTP header on a request's response was blocked.
    */
@@ -152,7 +152,7 @@ const UIStrings = {
    * @description Text in Network Manager
    * @example {https://example.com} PH1
    */
-  setcookieHeaderIsIgnoredIn: 'Set-Cookie header is ignored in response from url: {PH1}. The combined size of the name and value must be less than or equal to 4096 characters.',
+  setcookieHeaderIsIgnoredIn: 'Set-Cookie header is ignored in response from URL: {PH1}. The combined size of the name and value must be less than or equal to 4096 characters.',
   /**
    * @description Tooltip to explain why the cookie should have been blocked by third-party cookie phaseout but is exempted.
    */
@@ -172,7 +172,7 @@ const UIStrings = {
    /**
     * @description Tooltip to explain why the cookie should have been blocked by third-party cookie phaseout but is exempted.
     */
-    exemptionReasonScheme: 'This cookie is allowed by the top-level url scheme',
+    exemptionReasonScheme: 'This cookie is allowed by the top-level URL scheme',
 } as const;
 // clang-format on
 

package/front_end/entrypoints/main/MainImpl.ts

@@ -460,7 +460,8 @@ export class MainImpl {
     targetManager.addEventListener(
         SDK.TargetManager.Events.SUSPEND_STATE_CHANGED, this.#onSuspendStateChanged.bind(this));
 
-    new Bindings.PresentationConsoleMessageHelper.PresentationConsoleMessageManager(targetManager);
+    new Bindings.PresentationConsoleMessageHelper.PresentationConsoleMessageManager(targetManager,
+                                                                                    this.#universe.workspace);
     targetManager.setScopeTarget(targetManager.primaryPageTarget());
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, ({data}) => {
       const outermostTarget = data?.outermostTarget();

package/front_end/entrypoints/main/main-meta.ts

@@ -192,11 +192,6 @@ const UIStrings = {
    * of saving settings to their Google account.
    */
   saveSettings: 'Save `DevTools` settings to your `Google` account',
-  /**
-   * @description Label for a checkbox in the settings UI. Allows developers to opt-in/opt-out
-   * of receiving Google Developer Program (GDP) badges based on their activity in Chrome DevTools.
-   */
-  earnBadges: 'Earn badges',
   /**
    * @description A command available in the command menu to perform searches, for example in the
    * elements panel, as user types, rather than only when they press Enter.
@@ -795,16 +790,6 @@ Common.Settings.registerSettingExtension({
   reloadRequired: true,
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.ACCOUNT,
-  settingName: 'receive-gdp-badges',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.earnBadges),
-  defaultValue: false,
-  reloadRequired: true,
-});
-
 Common.Settings.registerSettingExtension({
   storageType: Common.Settings.SettingStorageType.SYNCED,
   settingName: 'user-shortcuts',

package/front_end/entrypoints/shell/shell.ts

@@ -18,6 +18,7 @@ import '../../panels/settings/settings-meta.js';
 import '../../panels/protocol_monitor/protocol_monitor-meta.js';
 import '../../models/persistence/persistence-meta.js';
 import '../../models/logs/logs-meta.js';
+import '../../models/badges/badges-meta.js';
 import '../main/main-meta.js';
 import '../../ui/legacy/components/perf_ui/perf_ui-meta.js';
 import '../../ui/legacy/components/quick_open/quick_open-meta.js';

package/front_end/entrypoints/trace_app/trace_app.ts

@@ -13,6 +13,7 @@ import '../../models/workspace/workspace-meta.js';
 import '../../Images/Images.js';
 import '../../models/logs/logs-meta.js';
 import '../../models/persistence/persistence-meta.js';
+import '../../models/badges/badges-meta.js';
 import '../../panels/browser_debugger/browser_debugger-meta.js';
 import '../../panels/developer_resources/developer_resources-meta.js';
 // panels/timeline depends on mobile_throttling for settings UI

package/front_end/foundation/Universe.ts

@@ -173,6 +173,7 @@ export class Universe {
         workspace,
         persistence,
         networkPersistenceManager,
+        settings,
     );
     context.set(WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl, workspaceDiff);
 

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -38,6 +38,7 @@ export const enum ErrorType {
   BLOCK = 'block',
   CROSS_ORIGIN = 'cross-origin',
   QUOTA = 'quota',
+  PAYLOAD_TOO_LARGE = 'payload-too-large',
 }
 
 export const enum MultimodalInputType {
@@ -806,6 +807,9 @@ export abstract class AiAgent<T> {
         } else if (err instanceof Host.AidaClient.AidaQuotaError ||
                    (err instanceof Error && err.message.toLowerCase().includes('quota'))) {
           error = ErrorType.QUOTA;
+        } else if (err instanceof Host.AidaClient.AidaPayloadTooLargeError ||
+                   (err instanceof Error && /payload size exceeds the limit/i.test(err.message))) {
+          error = ErrorType.PAYLOAD_TOO_LARGE;
         }
         yield this.#createErrorResponse(error);
 
@@ -1096,7 +1100,11 @@ export abstract class AiAgent<T> {
         request: structuredClone(request),
         aidaResponse,
       });
-      localStorage.setItem('aiAssistanceStructuredLog', JSON.stringify(this.#structuredLog));
+      try {
+        localStorage.setItem('aiAssistanceStructuredLog', JSON.stringify(this.#structuredLog));
+      } catch (err) {
+        console.warn('Failed to write to local storage "aiAssistanceStructuredLog":', err);
+      }
     }
   }
 

package/front_end/models/ai_assistance/data_formatters/FileFormatter.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Bindings from '../../bindings/bindings.js';
+import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import type * as Workspace from '../../workspace/workspace.js';
 
@@ -51,12 +52,18 @@ export class FileFormatter {
 
   #file: Workspace.UISourceCode.UISourceCode;
   #debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
-  constructor(file: Workspace.UISourceCode.UISourceCode,
-              debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
-                  Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()) {
+  #networkLog: Logs.NetworkLog.NetworkLog;
+  constructor(
+      file: Workspace.UISourceCode.UISourceCode,
+      debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding =
+          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
+      networkLog: Logs.NetworkLog.NetworkLog = Logs.NetworkLog.NetworkLog.instance(),
+  ) {
     this.#file = file;
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+    this.#networkLog = networkLog;
   }
+
   formatFile(): string {
     const sourceMapDetails = FileFormatter.formatSourceMapDetails(this.#file, this.#debuggerWorkspaceBinding);
     const lines = [
@@ -69,7 +76,7 @@ export class FileFormatter {
       const calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
       calculator.updateBoundaries(resource.request);
       lines.push(`Request initiator chain:
-${new NetworkRequestFormatter(resource.request, calculator).formatRequestInitiatorChain()}`);
+${new NetworkRequestFormatter(resource.request, calculator, this.#networkLog).formatRequestInitiatorChain()}`);
     }
     lines.push(`File content:
 ${this.#formatFileContent()}`);

package/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -131,10 +131,16 @@ export class NetworkRequestFormatter {
     return lines.length > 0 ? `${lines.join('\n')}\n` : '';
   }
 
+  readonly #networkLog: Logs.NetworkLog.NetworkLog;
+
   constructor(
-      request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator) {
+      request: SDK.NetworkRequest.NetworkRequest,
+      calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator,
+      networkLog: Logs.NetworkLog.NetworkLog = Logs.NetworkLog.NetworkLog.instance(),
+  ) {
     this.#request = request;
     this.#calculator = calculator;
+    this.#networkLog = networkLog;
   }
 
   formatRequestHeaders(): string {
@@ -199,7 +205,7 @@ Request initiator chain:\n${this.formatRequestInitiatorChain()}`;
     const allowedOrigin = Common.ParsedURL.ParsedURL.extractOrigin(this.#request.url());
     let initiatorChain = '';
     let lineStart = '- URL: ';
-    const graph = Logs.NetworkLog.NetworkLog.instance().initiatorGraphForRequest(this.#request);
+    const graph = this.#networkLog.initiatorGraphForRequest(this.#request);
 
     for (const initiator of Array.from(graph.initiators).reverse()) {
       initiatorChain = initiatorChain + lineStart +

package/front_end/models/ai_assistance/performance/AICallTree.ts

@@ -33,6 +33,7 @@ export class AICallTree {
       public selectedNode: Trace.Extras.TraceTree.Node|null,
       public rootNode: Trace.Extras.TraceTree.TopDownRootNode,
       public parsedTrace: Trace.TraceModel.ParsedTrace,
+      public workspace: Workspace.Workspace.WorkspaceImpl = Workspace.Workspace.WorkspaceImpl.instance(),
   ) {
   }
 
@@ -336,8 +337,7 @@ export class AICallTree {
     const selfTimeStr = roundToTenths(node.selfTime);
 
     // 6. URL Index
-    const location = SourceMapsResolver.SourceMapsResolver.codeLocationForEntry(
-        parsedTrace, event, Workspace.Workspace.WorkspaceImpl.instance());
+    const location = SourceMapsResolver.SourceMapsResolver.codeLocationForEntry(parsedTrace, event, this.workspace);
     const url = location?.url;
     let urlIndexStr = '';
     if (url) {

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

@@ -38,6 +38,12 @@ export class GetNetworkRequestDetailsTool implements
   readonly description =
       'Retrieves the full headers, timing, status, and body details of a specific network request by ID.';
 
+  readonly #networkLog?: Logs.NetworkLog.NetworkLog;
+
+  constructor(networkLog?: Logs.NetworkLog.NetworkLog) {
+    this.#networkLog = networkLog;
+  }
+
   readonly parameters: Host.AidaClient.FunctionObjectParam<keyof GetNetworkRequestDetailsArgs> = {
     type: Host.AidaClient.ParametersTypes.OBJECT,
     description: 'Arguments for retrieving detailed information about a specific network request.',
@@ -81,7 +87,8 @@ export class GetNetworkRequestDetailsTool implements
       };
     }
 
-    const request = Logs.NetworkLog.NetworkLog.instance().requests().find(req => {
+    const networkLog = this.#networkLog ?? Logs.NetworkLog.NetworkLog.instance();
+    const request = networkLog.requests().find(req => {
       if (req.requestId() !== args.id) {
         return false;
       }
@@ -102,7 +109,7 @@ export class GetNetworkRequestDetailsTool implements
     }
 
     const calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
-    const formatter = new NetworkRequestFormatter(request, calculator);
+    const formatter = new NetworkRequestFormatter(request, calculator, networkLog);
     const formattedDetails = await formatter.formatNetworkRequest();
 
     return {