chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/.agents/skills/devtools-testing-guidance/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: devtools-testing-guidance
+description: Guidance on selecting the appropriate test suite (Unit, API, or E2E tests) when writing new tests in Chrome DevTools. MUST be used when writing new tests.
+---
+
+# Testing Guidance
+
+This guide outlines when and how to select the appropriate test suite when writing new tests in Chrome DevTools.
+
+> [!NOTE]
+> This skill provides guidance on **which** test suite to choose when writing tests. To learn **how** to run tests, build targets, or execute linters, refer to the `devtools-verification` skill.
+
+## Choosing a Test Suite
+
+### 1. Unit Tests
+
+**Default choice:** The vast majority of tests in DevTools should be unit tests.
+
+Use unit tests for isolated testing of individual functions, classes, models, helpers, and UI components.
+
+- **Utilities & Framework:**
+  - Use `TestUniverse` (and foundation test helpers) for easy, isolated setup of required dependencies and models.
+  - For testing UI widgets, use stubbed view functions and screenshot assertions rather than spinning up heavy DOM/browser infrastructure.
+- **Location:** Co-located next to their implementation files (e.g. `TimelinePanel.ts` and `TimelinePanel.test.ts`).
+
+---
+
+### 2. API Tests
+
+Use API tests for integration tests that verify business logic requiring more complex setups or extensive CDP (Chrome DevTools Protocol) traffic, without needing the full DevTools frontend UI.
+
+- **When to use:**
+  - Evaluating JavaScript expressions in the target page (e.g. via `Runtime.evaluate`).
+  - Complex source map setups and symbolization.
+  - Multi-context or target setups (workers, iframes, OOPIFs).
+  - Verifying the "foundational layer" of DevTools models against a real browser/web page.
+- **Location:** Defined in `front_end/` with `.test.api.ts` extension (e.g. `Universe.test.api.ts`).
+
+---
+
+### 3. End-to-End (E2E) Tests
+
+Use E2E tests to verify real end-to-end user stories and user journeys.
+
+- **When to use:**
+  - Verifying full user journeys across DevTools panels and drawers.
+  - Complex UI behaviors that require extensive user interaction setup and benefit from a complete DevTools frontend page connected to an inspected target page over CDP.
+- **Location:** Defined in `test/e2e/` (e.g. `test/e2e/console/console-log.test.ts`).

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

@@ -52,7 +52,7 @@ Locate all TypeScript files in the target folder that define `const UIStrings =
    * *Check sibling references:* If you change a setting name or label (for example, changing “Preserve log” to “Keep log”), search sibling files in the folder for explanatory text or status strings that reference the old name in quotes (for example, “console.clear() was prevented due to ‘Preserve log’”), and update them to match.
 2. **Cut unnecessary words:** Eliminate politeness (`please`, `sorry`), filler (`very`, `strongly`, `there is` or `there are`), and marketing fluff (`seamless`, `awesome`, `fast`, `quick`).
 3. **Contractions:** Use contractions (`don’t`, `can’t`, `isn’t`, `won’t`) instead of formal spellings (`do not`, `cannot`, `is not`, `will not`).
-4. **Curly apostrophes, quotation marks, and ellipses:** Use curly apostrophes (`’`) in user-facing `UIStrings` values for contractions and possessives, and quotation marks (`“ ”`) for improved readability. Use the ellipsis character (`…`) instead of three periods (`...`). Use prime (`′`) and double prime (`″`) symbols as needed for measurements like length or coordinates.
+4. **Curly apostrophes, quotation marks, and ellipses:** Use curly apostrophes (`’`) in user-facing `UIStrings` values for contractions and possessives. Double quotes should be straight (`"`) to avoid usability issues when users want to copy string literals, though consider not using double quotes at all where not necessary. Note that using both double quotes and backticks (for example, `"`Permissions-Policy`"`) is valid and useful when a fixed term needs to be visually enclosed in quotes in the UI, as backticks are used for localization locking and are often not rendered visually. Use the ellipsis character (`…`) instead of three periods (`...`). Use prime (`′`) and double prime (`″`) symbols as needed for measurements like length or coordinates.
 5. **Sentence case and capitalization:** Use sentence case for headings, labels, and UI element names. Capitalize only the first word, proper nouns, product names (`Chrome DevTools`), and web APIs (`Background Fetch API`).
    * Don’t capitalize feature names (for example, `conditional breakpoint` or `command menu`).
    * Capitalize panel names and UX elements that are named after panels (for example, `Show Application`, `Toggle Console`, `Console sidebar`, or `Styles`).
@@ -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/ui-eng-vision-local-lit-renderer/SKILL.md

@@ -47,6 +47,10 @@ existing element containers.
     *   Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for
         specific migration examples.
     *   If unsure, also consult the [automatic migration code](../../../scripts/eslint_rules/lib/no-imperative-dom-api.ts)
+    *   **Prefer Component Built-Ins Over Legacy Boilerplate**: Before porting
+        legacy event handlers, comparators, or state variables, check if the
+        modern component handles them natively. Drop host-level workarounds in
+        favor of declarative component attributes.
 
 5.  **Local Modular Renders**:
 
@@ -70,6 +74,7 @@ existing element containers.
     *   Do not attempt to rewrite complex historical subsystems (like Linkifiers
         or specialized UI utilities) to be "pure Lit" during this pass.
     *   Capitalize on Lit's ability to interpolate standard `HTMLElement` or `Element` instances directly. Treat unmigrated utilities as "black boxes" that generate DOM, and embed their output in standard template expressions: `html`<div>${this.legacyElement}</div>``.
+    *   **CRITICAL:** Before treating any component as "unmigrated," you MUST follow steps in Section 4. You are only allowed to use this escape hatch if no declarative migration instructions exist.
 
 8.  **Handle Asynchronous DOM Updates**:
 
@@ -87,9 +92,10 @@ existing element containers.
         functions inside the class scope returning `LitTemplate`. This avoids
         monoliths, preserves readability, and reuses template cache strategies.
 
-10. **Visual Parity and Accessibility**:
+10. **Visual Parity, CSS Adaptation, and Accessibility**:
 
     *   **Zero-Tolerance Regression**: Screenshot tests are the ground truth for this phase. Any visual diff (above 0%) in the generated screenshots is unacceptable and must be resolved before proceeding.
+    *   **CSS Selector Migration**: When replacing legacy imperative components/widgets with modern web components (e.g., replacing legacy `DataGrid` with `<devtools-data-grid>`), inspect and update the associated `.css` file. Replace legacy class selectors (`.data-grid`) with tag selectors (`devtools-data-grid`).
     *   **Strict Tag/Class Parity**: Do not change tag types (e.g., `span` to
         `div`) or drop class names during template translation, as CSS may
         depend on them.

package/.agents/skills/ui-eng-vision-widget-promoter/SKILL.md

@@ -14,6 +14,8 @@ clean `UI.Widget` classes that use native update rendering delegates.
 
 ## 1. Widget Promotion Guidelines
 
+*   **Widget Framework Rules**: Follow the rules defined in [`devtools-ui-widgets`](../ui-widgets/SKILL.md).
+
 1.  **Change Class Inheritance**:
 
     *   Rewrite class declarations to extend `UI.Widget` (or specialized

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

@@ -103,6 +103,7 @@ export default defineConfig([
       '@stylistic/semi': 'error',
       '@stylistic/no-extra-semi': 'error',
       '@stylistic/comma-style': ['error', 'last'],
+      '@stylistic/comma-dangle': ['error', 'always-multiline'],
       '@stylistic/wrap-iife': ['error', 'inside'],
 
       '@stylistic/spaced-comment': [
@@ -621,10 +622,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',
     },
   },
   {
@@ -720,6 +720,13 @@ export default defineConfig([
       'no-console': 'off',
     },
   },
+  {
+    name: 'API test files',
+    files: ['**/*.test.api.ts'],
+    rules: {
+      '@devtools/no-api-test-unit-helpers': 'error',
+    },
+  },
   {
     name: 'TypeScript test files',
     files: [

package/front_end/Images/rollup.config.mjs

@@ -30,7 +30,7 @@ export default {
               return data;
             }
             return null;
-          }
+          },
         }),
       ],
 };

package/front_end/Tests.js

@@ -850,7 +850,7 @@
           'LenVOavSot+3i9DAgBkcRcAtjOj4LaR0VknFBbVPFd5uRHg5h6h+u/N5GJG7' +
           '9G+dwfCMNYxdAfvDbbnvRG15RjF+Cv6pgsH/76tuIMRQyV+dTZsXjAzlAcmg' +
           'QWpzU/qlULRuJQ/7TBj0/VLZjmmx6BEP3ojY+x1J96relc8geMJgEtslQIxq' +
-          '/H5COEBkEveegeGTLg=='
+          '/H5COEBkEveegeGTLg==',
     ]);
   };
 
@@ -901,22 +901,21 @@
     step1();
 
     function step1() {
-      testPreset(
-          MobileThrottling.networkPresets[3],
-          [
-            'offline event: online = false', 'connection change event: type = none; downlinkMax = 0; effectiveType = 4g'
-          ],
-          step2);
+      testPreset(MobileThrottling.networkPresets[3],
+                 [
+                   'offline event: online = false',
+                   'connection change event: type = none; downlinkMax = 0; effectiveType = 4g',
+                 ],
+                 step2);
     }
 
     function step2() {
-      testPreset(
-          MobileThrottling.networkPresets[2],
-          [
-            'online event: online = true',
-            'connection change event: type = cellular; downlinkMax = 0.3814697265625; effectiveType = 2g'
-          ],
-          step3);
+      testPreset(MobileThrottling.networkPresets[2],
+                 [
+                   'online event: online = true',
+                   'connection change event: type = cellular; downlinkMax = 0.3814697265625; effectiveType = 2g',
+                 ],
+                 step3);
     }
 
     function step3() {
@@ -1311,14 +1310,14 @@
     await SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.runtimeAgent().invoke_evaluate({
       expression: `fetch("/set-cookie?devtools-test-cookie=Bar",
                          {credentials: 'include'})`,
-      awaitPromise: true
+      awaitPromise: true,
     });
     await testCase(baseURL + 'echoheader?Cookie', undefined, 200, ['cache-control'], 'devtools-test-cookie=Bar');
 
     await SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.runtimeAgent().invoke_evaluate({
       expression: `fetch("/set-cookie?devtools-test-cookie=same-site-cookie;SameSite=Lax",
                          {credentials: 'include'})`,
-      awaitPromise: true
+      awaitPromise: true,
     });
     await testCase(
         baseURL + 'echoheader?Cookie', undefined, 200, ['cache-control'], 'devtools-test-cookie=same-site-cookie');

package/front_end/core/common/Gzip.ts

@@ -78,7 +78,7 @@ async function gzipCodec(
     start(controller) {
       controller.enqueue(buffer instanceof ArrayBuffer ? new Uint8Array(buffer) : buffer);
       controller.close();
-    }
+    },
   });
   const codecReadable = readable.pipeThrough(codecStream);
   // A response is a convenient way to get an ArrayBuffer from a ReadableStream.
@@ -104,7 +104,7 @@ export function createMonitoredStream(stream: ReadableStream, onProgress: (bytes
       bytesRead += chunk.byteLength;
       onProgress(bytesRead);
       controller.enqueue(chunk);
-    }
+    },
   });
 
   return stream.pipeThrough(progressTransformer);

package/front_end/core/common/Settings.ts

@@ -126,7 +126,7 @@ export class Settings {
     settingRegistrations,
     logSettingAccess,
     runSettingsMigration,
-    console
+    console,
   }: SettingsCreationOptions) {
     this.#console = console;
     this.syncedStorage = syncedStorage;
@@ -145,7 +145,6 @@ export class Settings {
           this.createRegExpSetting(settingName, evaluatedDefaultValue, undefined, storageType) :
           this.createSetting(settingName, evaluatedDefaultValue, storageType);
 
-      setting.setTitleFunction(registration.title);
       setting.setRegistration(registration);
 
       this.registerModuleSetting(setting);
@@ -179,7 +178,7 @@ export class Settings {
     globalStorage: null,
     localStorage: null,
     settingRegistrations: null,
-    console: null
+    console: null,
   }): Settings {
     const {
       forceNew,
@@ -511,8 +510,6 @@ export class Deprecation {
 }
 
 export class Setting<V> {
-  #titleFunction?: () => Platform.UIString.LocalizedString;
-  #title!: Platform.UIString.LocalizedString;
   #registration: SettingRegistration|null = null;
   #requiresUserAction?: boolean;
   #value?: V;
@@ -555,25 +552,12 @@ export class Setting<V> {
   }
 
   title(): Platform.UIString.LocalizedString {
-    if (this.#title) {
-      return this.#title;
-    }
-    if (this.#titleFunction) {
-      return this.#titleFunction();
+    if (this.#registration?.title) {
+      return this.#registration.title();
     }
     return '' as Platform.UIString.LocalizedString;
   }
 
-  setTitleFunction(titleFunction?: (() => Platform.UIString.LocalizedString)): void {
-    if (titleFunction) {
-      this.#titleFunction = titleFunction;
-    }
-  }
-
-  setTitle(title: Platform.UIString.LocalizedString): void {
-    this.#title = title;
-  }
-
   setRequiresUserAction(requiresUserAction: boolean): void {
     this.#requiresUserAction = requiresUserAction;
   }

package/front_end/core/common/Srcset.ts

@@ -4,7 +4,7 @@
 
 export const enum TokenType {
   LITERAL = 0,
-  URL = 1
+  URL = 1,
 }
 
 export interface Token {

package/front_end/core/common/VersionController.ts

@@ -759,7 +759,7 @@ export class VersionController {
       'Slow 4G': 'SPEED_SLOW_4G',
       '3G': 'SPEED_3G',
       'No throttling': 'NO_THROTTLING',
-      Offline: 'OFFLINE'
+      Offline: 'OFFLINE',
     };
     try {
       const networkSetting = JSON.parse(setting) as unknown as {

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/AidaGcaTranslation.ts

@@ -219,7 +219,7 @@ function inFileEditRequestToSourceFile(request: AIDA.CompletionRequest): GCA.Sou
       {
         content: '',
         isSelected: true,  // Cursor position
-      }
+      },
     ],
   };
   if (request.suffix) {
@@ -481,7 +481,7 @@ export function gcaChunkResponseToAidaChunkResponse(response: GCA.GenerateConten
     const parts = candidate?.content?.parts || [];
     const metadata: AIDA.ResponseMetadata = {
       rpcGlobalId: response.responseId,
-      inferenceOptionMetadata: {modelId: response.modelVersion}
+      inferenceOptionMetadata: {modelId: response.modelVersion},
     };
 
     if (candidate?.citationMetadata?.citations) {

package/front_end/core/host/GcaClient.ts

@@ -11,7 +11,7 @@ import {
   debugLog,
   type DoConversationRequest,
   type GenerateCodeRequest,
-  type GenerateCodeResponse
+  type GenerateCodeResponse,
 } from './AidaClientTypes.js';
 import {
   aidaCompletionRequestToGcaRequest,
@@ -19,7 +19,7 @@ import {
   aidaEventToGcaTelemetryRequest,
   aidaGenerateCodeRequestToGcaRequest,
   gcaResponseToAidaCompletionResponse,
-  gcaResponseToAidaGenerateCodeResponse
+  gcaResponseToAidaGenerateCodeResponse,
 } from './AidaGcaTranslation.js';
 import * as DispatchHttpRequestClient from './DispatchHttpRequestClient.js';
 import type {GenerateContentRequest, GenerateContentResponse} from './GcaTypes.js';

package/front_end/core/host/GdpClient.ts

@@ -193,7 +193,7 @@ export class GdpClient {
         queryParams: {
           allowMissing: 'true',
           names,
-        }
+        },
       });
 
       return new Set(response.awards?.map(award => normalizeBadgeName(award.name)) ?? []);
@@ -214,7 +214,7 @@ export class GdpClient {
           newsletter_email: emailPreference,
           creation_origin: {
             origin_application: ORIGIN_APPLICATION_NAME,
-          }
+          },
         }),
       });
       this.#clearCache();
@@ -238,7 +238,7 @@ export class GdpClient {
         body: JSON.stringify({
           awardingUri: 'devtools://devtools',
           name,
-        })
+        }),
       });
       return response;
     } catch {

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}',