chrome-devtools-frontend 1.0.1661063 → 1.0.1662965

package/.agents/skills/devtools-unicode-escaping/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: devtools-unicode-escaping
+description: Guidelines for escaping strings and handling user-controlled data in DevTools to prevent layout bleed-through, XSS, and security issues.
+---
+
+# Unicode Escaping and User-Controlled Data Guidelines
+
+When displaying inspected data, user-controlled strings, or untrusted input in the DevTools UI (e.g., console messages, object properties, DOM tree nodes, or UI titles/descriptions), you must ensure they are properly escaped to prevent layout bleed-through (such as Right-to-Left leaks) or security vulnerabilities.
+
+DevTools provides two primary Unicode escaping functions in `Platform.StringUtilities`:
+
+## 1. Escaping for Text Representation (`escapeUnicodeAsText`)
+
+Use `Platform.StringUtilities.escapeUnicodeAsText(content)` when rendering values that developers need to inspect (e.g. string values inside the Console or the Object properties view) where hidden, invisible, or formatting characters should be made explicitly visible.
+
+* **Behavior**: Escapes all formatting and surrogate characters into literal Unicode escape sequences (e.g., `\u202E`, `\u200B`).
+* **Example Usage**:
+  ```typescript
+  const text = Platform.StringUtilities.escapeUnicodeAsText(JSON.stringify(description));
+  ```
+
+## 2. Escaping for UI Rendering (`safeEscapeUnicode`)
+
+Use `Platform.StringUtilities.safeEscapeUnicode(content)` when rendering content inside templates or HTML markup where you want safe layout-critical zero-width formatting characters to function normally for word wrapping or rendering layout, but want to escape dangerous layout-disrupting characters (like bidi overrides).
+
+* **Behavior**: Escapes dangerous formatting and surrogate characters (like `\u202E`), but leaves safe formatting characters untouched:
+  * Zero Width Space (`\u200B`)
+  * Zero Width Non-Joiner (`\u200C`)
+  * Zero Width Joiner (`\u200D`)
+* **Example Usage**:
+  Used automatically by the global Lit template wrapper.
+
+---
+
+## 3. Global Lit Template Wrapper
+
+DevTools wraps Lit's default `html` function inside `front_end/ui/lit/strip-whitespace.ts` (re-exported via `ui/lit/lit.js`). This wrapper automatically intercepts and escapes standard string values using `Platform.StringUtilities.safeEscapeUnicode(val)` at runtime.
+
+* **What is escaped automatically**: Any standard string interpolated directly in a template (e.g., `html`<span>${myString}</span>``).
+* **Array items**: Array values are traversed recursively, and string elements inside arrays are escaped automatically.
+* **Lit directives**: Directives (like `ifDefined`, `live`, `repeat`, `classMap`, etc.) are automatically traversed, and any string arguments inside their `values` array are escaped recursively.
+
+### Directives Rule:
+Because the wrapper automatically processes directive arguments, you **do not** need to manually escape strings passed to standard Lit directives. They will be handled safely at runtime.
+
+### Correct Example:
+```typescript
+title=${ifDefined(tooLong ? undefined : description)} // Automatically escaped!
+```
+
+---
+
+## 4. Manual DOM Assignments & Non-Lit Rendering
+
+Any manual assignments that bypass Lit entirely (e.g., setting `element.textContent`, `element.title`, or constructing DOM elements imperatively) will also bypass the Lit wrapper.
+
+* Always wrap user-controlled strings in these contexts with the appropriate escaping helper:
+  * Use `escapeUnicodeAsText` if you want hidden characters to display as text (e.g., showing `\\u202E`).
+  * Use `safeEscapeUnicode` if you want zero-width spaces to function but other dangerous characters to be escaped.
+
+### Correct Example:
+```typescript
+nameElement.textContent = Platform.StringUtilities.escapeUnicodeAsText(name);
+```

package/.agents/skills/evaluate-ai-css-completion/SKILL.md

@@ -69,12 +69,12 @@ import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_compl
 
 ## Step 2: Launch Chrome with Local DevTools
 
-Use the `npm start` script to build DevTools, launch Chrome Canary with remote debugging, and automatically load your local build.
+Use the `npm start` script to build DevTools, launch Chrome Canary with remote debugging, and disable watch mode (so we build manually instead).
 
 You must specify a persistent user data directory so you can log in once and reuse the session:
 
 ```bash
-npm start -- --browser=canary --remote-debugging-port=9222 --user-data-dir=/tmp/devtools-ai-evaluate-css-completion
+npm start -- --no-watch --browser=canary --remote-debugging-port=9222 --user-data-dir=/tmp/devtools-ai-evaluate-css-completion
 ```
 
 > [!IMPORTANT]
@@ -82,14 +82,18 @@ npm start -- --browser=canary --remote-debugging-port=9222 --user-data-dir=/tmp/
 > After launching Chrome, you MUST print the following checklist to the user and wait for their explicit confirmation before running the evaluation script:
 > 1. Sign in to Chrome with your corporate account in the new window.
 > 2. Open DevTools, go to **Settings** (gear icon) > **AI Innovations**, and ensure **Code Completions** is enabled.
-> 3. Ask the user to reply when they are ready.
-
-*   Keep this process running (it will watch and rebuild changes).
+> 3. Focus the DevTools window and press `Cmd + Option + I` (on macOS) or `Ctrl + Shift + I` (on Windows/Linux) to open DevTools-on-DevTools (inspecting DevTools itself). Go to the Network tab of the second DevTools instance and check the **Disable cache** checkbox. This ensures your local builds are loaded instead of cached versions when reloaded.
+> 4. Ask the user to reply when they are ready.
 
 ## Step 3: Configure Test Cases
 
 Before running the evaluation, configure your test cases directly in `front_end/entrypoints/devtools_app/devtools_app.ts` inside the `getCases()` method of the patch you applied in Step 1.
 
+After modifying the test cases, manually run a build to compile the changes:
+```bash
+autoninja -C out/Default
+```
+
 For example, to test spacing sensitivity, update the returned array:
 ```typescript
   getCases() {
@@ -118,12 +122,18 @@ Run the Puppeteer script to execute the evaluation:
 node .agents/skills/evaluate-ai-css-completion/scripts/evaluate.js
 ```
 
-> [!IMPORTANT]
-> **Instructions for the Agent:**
-> Since the evaluation script runs asynchronously as a background task, you MUST use the `schedule` tool to check the log file of the evaluation task every 10 seconds until it completes. Do not poll using status checks in a loop.
-
 The script will connect to the DevTools instance, trigger completions, and output the results.
 
+### Debugging and Diagnostics
+
+If you get 0% trigger rate or unexpected errors, check the following:
+
+1.  **Browser Logs:** The evaluation script forwards browser console logs (prefixed with `BROWSER LOG:`). Look for these in your terminal.
+2.  **Host Config:** The script prints the DevTools `Host Config` at the start. Verify that `"devToolsAiCodeCompletionStyles": { "enabled": true }` is present.
+3.  **GCA/AIDA Logs:** The script automatically enables verbose AIDA logging. Look for `GCA request succeeded:` in the logs:
+    *   If the response has `"usageMetadata": { "candidatesTokenCount": X }` (where X > 0) but the `candidates` array is missing or empty, the backend generated tokens but they were filtered out (e.g., due to safety classifiers or recitation blocks).
+4.  **Context Requirement:** The CSS model is sensitive to context. A minimal prompt like `h1 { font-s` might not trigger AIDA. Ensure your test cases have enough context in the `prefix` (e.g., several preceding CSS rules) or pass them via `additionalFiles` to simulate a larger stylesheet.
+
 ## Step 5: Revert the Patch
 
 Once the evaluation is complete and you have recorded the results, revert the patch in `devtools_app.ts`:

package/.agents/skills/evaluate-ai-css-completion/scripts/evaluate.js

@@ -27,8 +27,20 @@ async function runEvaluation() {
     }
     console.log('DevTools URL:', devtoolsPage.url());
 
+    devtoolsPage.on('console', msg => console.log('BROWSER LOG:', msg.text()));
+
     console.log('Reloading DevTools to ensure patch is loaded...');
-    await devtoolsPage.reload();
+    try {
+      await devtoolsPage.setCacheEnabled(false);
+      await devtoolsPage.reload({waitUntil: 'domcontentloaded', timeout: 10000});
+    } catch (e) {
+      console.log('Reload warning (proceeding anyway):', e.message);
+    }
+
+    await devtoolsPage.evaluate(() => localStorage.setItem('debugAiCodeCompletionEnabled', 'true'));
+    await devtoolsPage.evaluate(() => localStorage.setItem('debugAiServicesEnabled', 'true'));
+    await devtoolsPage.evaluate(() => localStorage.setItem('debugAiAssistancePanelEnabled', 'true'));
+    await devtoolsPage.evaluate(() => localStorage.setItem('aiAssistanceStructuredLogEnabled', 'true'));
 
     console.log('Waiting for DevTools to initialize and hook to be available...');
     try {
@@ -38,29 +50,45 @@ async function runEvaluation() {
     }
 
     console.log('Fetching test cases from DevTools...');
+    const hostConfig = await devtoolsPage.evaluate(() => self.testCss.getHostConfig());
+    console.log('Host Config:', JSON.stringify(hostConfig, null, 2));
     const testCases = await devtoolsPage.evaluate(() => self.testCss.getCases());
-    console.log(`Found ${testCases.length} test cases.`);
+    console.log(`Found ${testCases.length} test cases. Running each case 5 times.`);
 
-    let testCount = 0;
+    let totalQueries = 0;
     for (const tc of testCases) {
       console.log(`\nRunning: ${tc.name}`);
-      // Delay to avoid rate limiting
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      let successCount = 0;
+      const suggestions = new Set();
+
+      for (let run = 1; run <= 5; run++) {
+        // Delay to avoid rate limiting
+        await new Promise(resolve => setTimeout(resolve, 1200));
+        try {
+          const result = await devtoolsPage.evaluate(async (url, prefix, suffix, additionalFiles) => {
+            return await self.testCss.evaluate(url, prefix, suffix, additionalFiles);
+          }, tc.url, tc.prefix, tc.suffix, tc.additionalFiles);
 
-      try {
-        const result = await devtoolsPage.evaluate(async (url, prefix, suffix, additionalFiles) => {
-          return await self.testCss.evaluate(url, prefix, suffix, additionalFiles);
-        }, tc.url, tc.prefix, tc.suffix, tc.additionalFiles);
+          if (result.hasSuggestion) {
+            successCount++;
+            for (const s of result.suggestions) {
+              suggestions.add(s);
+            }
+          }
+        } catch (e) {
+          console.error(`  [Run ${run}] Failed:`, e.message);
+        }
 
-        console.log('  Result:', result);
-      } catch (e) {
-        console.error('  Failed to run test case:', e.message);
+        totalQueries++;
+        if (totalQueries % 20 === 0) {
+          console.log('[INFO] Pausing for 8 seconds to prevent rate limiting...');
+          await new Promise(resolve => setTimeout(resolve, 8000));
+        }
       }
 
-      testCount++;
-      if (testCount % 20 === 0 && testCount < testCases.length) {
-        console.log('\n[INFO] Pausing for 10 seconds to avoid rate limiting...');
-        await new Promise(resolve => setTimeout(resolve, 10000));
+      console.log(`  Result: [Success Rate: ${successCount}/5]`);
+      if (suggestions.size > 0) {
+        console.log('  Unique Suggestions:', Array.from(suggestions));
       }
     }
 

package/.agents/skills/migrate-chromium-test/SKILL.md

@@ -24,6 +24,8 @@ description: Use when migrating Chromium layout tests to DevTools unit tests
 - If the test requires rendering, use `renderElementIntoDOM` to attach elements to a test container.
 - If testing legacy components that require internal tokens or have private methods, try to use public APIs or events instead. If impossible, consider using structural typing workarounds or updating the component to be more testable.
 - If tests require a repetitive setup extract it into a test helper function at the top of the file.
+- Code comments must be full sentences ending with a period, except when the entire comment is a URL.
+- Do not include comments of the form `// Replaces web test: http/tests/devtools/persistence/automapping-absolute-paths.js`. Since we plan to remove migrated web tests, these are not useful references.
 
 4.  **Update BUILD.gn**:
 
@@ -40,7 +42,35 @@ description: Use when migrating Chromium layout tests to DevTools unit tests
 - If the newly added test does not test any logic from the component but just the getters from the mocked data explain to the user that this test does not add value and it's better to close it without adding the test. Provide a command without executing it to close the issue as "Fixed".
 - If the newly added test uses too extensive mocks of CDP objects and methods explain to the user that the test should be foundation e2e test instead of unit test and we won't migrate it. Provide a command without executing it to close the issue as "Won't Fix (Infeasible)".
 
-7. Upload a CL with your changes using the `version-control` skill. Make sure the CL description has a `Fixed: <issue number>` trailer instead of `Bug: <issue number>`.
+7. **Upload the CL:**
+
+## Commit message & CL upload requirements
+
+When committing and uploading CLs, **STRICTLY** follow this format and constraints:
+
+1. **Title line**: `[test-migration] Migrate <short test name> test to unit test`
+2. **Body**: `This CL migrates the legacy layout test <long test name> to a unit test in <new test name>. <optional additional explanation>`
+2. **Body appendix**: `https://crsrc.org/c/third_party/blink/web_tests/<long test name>;drc=4d51e9cab50efd0f8029c45a486e199a1d519fd1`
+3. **Bug line**: `Fixed: <issue number>`
+4. **Formatting constraints**: Wrap all lines to a maximum of 72 characters per line.
+
+Example commit message:
+
+```text
+[test-migration] Migrate console-eval-global test to unit test
+
+This CL migrates the legacy layout test
+http/tests/devtools/console/console-eval-global.js to a unit test in
+ConsolePrompt.test.ts. It verifies that the evaluation in ConsolePrompt
+is performed in the correct execution context (the active one) and with
+the correct expression.
+
+https://crsrc.org/c/third_party/blink/web_tests/http/tests/devtools/console/console-eval-global.js;drc=4d51e9cab50efd0f8029c45a486e199a1d519fd1
+
+Fixed: <issue number>
+```
+
+Use the `version-control` skill to upload the CL.
 
 ## Example Conversion
 
@@ -69,7 +99,7 @@ import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js
 describeWithEnvironment('DataGrid', () => {
   it('tests long text in datagrid', () => {
     // ... setup grid ...
-    // Use assertions instead of printing results
+    // Use assertions instead of printing results.
     assert.strictEqual(keyElement.textContent.length, 1500);
   });
 });

package/.agents/skills/ui-eng-vision-local-lit-renderer/SKILL.md

@@ -110,7 +110,13 @@ existing element containers.
     *   The Gerrit Code Review UI cannot identify moved blocks of unchanged code.
     *   If blocks of code need to be reordered, create a "prefactoring" change that first extracts the code that needs to be reordered into a named helper functions and pause the migration, waiting user confirmation.
 
-12. **Wait for confirmation**:
+12. **Micro-Commit Strategy**:
+
+    *   Do not attempt to convert every helper method and UI component in a single monolithic commit. Break the template extraction into **small, self-contained micro-commits** (e.g., migrating one helper method, toolbar button, or list item render at a time).
+    *   Verify with build and run tests after each micro-commit to guarantee zero regressions and 100% visual parity before moving to the next compartment.
+    *   Provide the exact list of files and commit message when presenting progress so the change history remains atomic and easy to review.
+
+13. **Wait for confirmation**:
 
     *   Wait for an explicit confirmation from the user before proceeding to the
         next step.

package/docs/ui_engineering.md

@@ -222,25 +222,38 @@ This section provides a series of examples for migrating from imperative DOM man
 
 ## Setting `className` on `this.element`
 
-Instead of setting `className` directly on `this.element`, define the component's structure declaratively using a lit-html template.
+Instead of setting `className` directly on `this.element`, define the component's structure declaratively using a lit-html template. When classes or attributes (`jslog`) must be set directly on `target` itself (for example when `target` is positioned externally via `.positionAt()`), use the `container` option in DevTools' custom `render()` (`front_end/ui/lit/render.ts`).
 
 **Before:**
 ```typescript
 class SomeWidget extends UI.Widget.Widget {
-          constructor() {
-            super();
-            this.element.className = 'some-class';
-          }
-      }
+  constructor(element?: HTMLElement) {
+    super(element, {jslog: `${VisualLogging.deviceModeRuler().track({click: true})}`});
+    this.element.className = 'some-class';
+  }
+}
 ```
 
-**After:**
+**After (when creating an inner wrapper):**
 ```typescript
-
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html`
     <div class="some-class"></div>`,
-    target, {host: input});
+    target);
+};
+```
+
+**After (when classes or attributes must be applied directly to `target` itself):**
+```typescript
+export const DEFAULT_VIEW = (input, _output, target) => {
+  render(html`
+    <div class="some-content">...</div>`,
+    target, {
+      container: {
+        classes: ['some-class'],
+        attributes: {jslog: VisualLogging.deviceModeRuler().track({click: true})},
+      },
+    });
 };
 ```
 
@@ -268,7 +281,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     <div>
       <div></div>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -296,7 +309,7 @@ class SomeWidget extends UI.Widget.Widget {
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html`
     <div class="some-class" aria-label="some-label">some-text</div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -326,7 +339,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     <div>
       <div class="some-class container" @click=${this.onClick.bind(this)}></div>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -353,7 +366,7 @@ class SomeWidget extends UI.Widget.Widget {
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html`
     <div style="width:100%; margin-left:10px"></div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -383,7 +396,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     <div>
       <div class="some-class"></div>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -411,7 +424,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     <div>
       <span class="some-class">some-text</span>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -450,7 +463,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         </devtools-toolbar-input>
       </devtools-toolbar>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -483,7 +496,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
             aria-label="accessible-placeholder" style="flex-grow:0.5; flex-shrink:1"></devtools-toolbar-input>
       </devtools-toolbar>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -523,7 +536,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         <span><div style="font-size: 12px;">💫</div></span>
       </devtools-adorner>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -558,7 +571,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
             .jslogContext=${'edit-name'}></devtools-button>
       </devtools-toolbar>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -618,7 +631,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
       <input type="text" placeholder="some-placeholder" value="some-value"
           ?disabled=${!this.enabled} checked>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -661,7 +674,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
       <devtools-button class="some-class" title=${i18nString(UIStrings.someTitle)} @click=${onClick}
           .jslogContext=${'some-button'} .variant=${Buttons.Button.Variant.PRIMARY}>Some button</devtools-button>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -689,7 +702,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     <div>
       <div class="some-class">some-text</div>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -760,7 +773,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
       <devtools-icon name="checkmark"
           style="color:var(--icon-checkmark-green); width:14px; height:14px"></devtools-icon>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -811,7 +824,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         <devtools-checkbox ${bindToSetting(this.someOtherSetting)}>${this.someOtherSetting.title()}</devtools-checkbox>
       </devtools-toolbar>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -844,7 +857,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         <devtools-button ${bindToAction('elements.refresh-event-listeners')}></devtools-button>
       </devtools-toolbar>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -878,7 +891,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         </devtools-checkbox>
       </devtools-toolbar>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -910,7 +923,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
             @change=${this.someToolbarComboBoxClicked.bind(this)}></select>
       </devtools-toolbar>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -970,7 +983,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         <div class="toolbar-spacer"></div>
       </devtools-toolbar>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -1001,7 +1014,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     <div>
       <iframe sandbox tabindex="-1"></iframe>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -1030,7 +1043,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
       <input class="harmony-input add-source-map" spellcheck="false" type="text"
           jslog=${VisualLogging.textField('url').track({keydown: 'Enter', change: true})}>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -1098,7 +1111,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         </table>
       </devtools-data-grid>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -1182,7 +1195,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         </devtools-split-view>
       </devtools-split-view>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -1233,7 +1246,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
       <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0.5"
           aria-valuetext="50% done"></div>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -1265,15 +1278,20 @@ export const DEFAULT_VIEW = (input, _output, target) => {
           header: i18nString(UIStrings.nothingToSeeHere), text: this.explanation,
           link: 'http://www.google.com',})}
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
-## Migrating `TextPrompt`
+## Migrating `TextPrompt` and `InplaceEditor`
 
-Replace imperative `TextPrompt` creation with the declarative `<devtools-prompt>` component, providing completions via `<datalist>`.
+Replace imperative `TextPrompt` or `UI.InplaceEditor` creation with the declarative `<devtools-prompt>` component, providing completions via `<datalist>`.
 
-**Before:**
+### Critical Rules for `<devtools-prompt>`:
+1. **Prompt Owns the Content (`<slot>`)**: When `editing` is `false`, `<devtools-prompt>` renders `<span class="entrypoint"><slot></slot></span>` in shadow DOM. Therefore, `<devtools-prompt>` **must contain the display text/title directly as a child** (`<devtools-prompt ...>${title}</devtools-prompt>`) and live inside the element container (e.g., inside `<devtools-checkbox>`).
+2. **Do Not Conditionally Swap Elements**: Do NOT render `<devtools-prompt>` conditionally *in place of* a `<span>` or text node (`isEditing ? html`<devtools-prompt>...` : html`<span>${title}</span>``). Mount `<devtools-prompt>` unconditionally, holding the text content at all times, and only toggle its boolean property `?editing=${item === input.editingItem}`.
+3. **Conditional Input Styling**: Because `<devtools-prompt>` is present in both display and editing modes, any input-mode borders or background classes must be applied conditionally (e.g., `class=${Directives.classMap({'condition-input': isEditing})}`) so non-editing rows remain unbordered.
+
+**Before (`InplaceEditor` or imperative `TextPrompt`):**
 ```typescript
 class SomeWidget extends UI.Widget.Widget {
   constructor() {
@@ -1286,10 +1304,15 @@ class SomeWidget extends UI.Widget.Widget {
     const promptElement = this.contentElement.createChild('span');
     prompt.attach(promptElement);
   }
+
+  #startEditing(item: string, element: HTMLElement): void {
+    const config = new UI.InplaceEditor.Config(this.#commit.bind(this), this.#cancel.bind(this), element);
+    UI.InplaceEditor.InplaceEditor.startEditing(element, config);
+  }
 }
 ```
 
-**After:**
+**After (Declarative `<devtools-prompt>` inside Lit):**
 ```typescript
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html`
@@ -1298,9 +1321,19 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         <option>completion1</option>
         <option>completion2</option>
       </datalist>
-      <devtools-prompt completions="my-completions" editing></devtools-prompt>
+      <devtools-checkbox .checked=${input.enabled}>
+        <devtools-prompt
+            value=${input.item}
+            completions="my-completions"
+            ?editing=${input.item === input.editingItem}
+            class=${Directives.classMap({'prompt-editing-border': input.item === input.editingItem})}
+            @commit=${(e: CustomEvent) => input.onCommit(input.item, e.detail)}
+            @cancel=${() => input.onCancel(input.item)}>
+          ${input.title}
+        </devtools-prompt>
+      </devtools-checkbox>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -1346,7 +1379,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         </ul>
       `}></devtools-tree>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 
@@ -1372,7 +1405,7 @@ export const DEFAULT_VIEW = (input, _output, target) => {
         </ul>
       `}></devtools-tree>
     </div>`,
-    target, {host: input});
+    target);
 };
 ```
 

package/front_end/core/common/SettingRegistration.ts

@@ -268,16 +268,6 @@ export interface SettingRegistration {
    * Determines if the setting value is stored in the global, local or session storage.
    */
   storageType?: SettingStorageType;
-  /**
-   * A condition that, when present in the queryParamsObject of Runtime, constraints the value
-   * of the setting to be changed only if the user set it.
-   */
-  userActionCondition?: string;
-  /**
-   * The name of the experiment a setting is associated with. Enabling and disabling the declared
-   * experiment will enable and disable the setting respectively.
-   */
-  experiment?: Root.ExperimentNames.ExperimentName;
   /**
    * A condition is a function that will make the setting available if it
    * returns true, and not available, otherwise. Make sure that objects you