chrome-devtools-frontend 1.0.1660788 → 1.0.1662289

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

@@ -0,0 +1,143 @@
+---
+name: evaluate-ai-css-completion
+description: Expose a temporary evaluation hook in DevTools and run a Puppeteer script to validate CSS code completion trigger rates.
+---
+
+# Evaluate CSS Completion Skill
+
+This skill allows you to temporarily expose an evaluation hook in DevTools to measure CSS code completion trigger rates using a Puppeteer script.
+
+> [!WARNING]
+> **NEVER commit the `devtools_app.ts` patch.** It is only for local evaluation. Always revert it before uploading your CL.
+
+## Step 1: Apply the Temporary Patch
+
+Modify `front_end/entrypoints/devtools_app/devtools_app.ts` to expose the global `testCssCompletion` hook.
+
+Add the following code at the end of `front_end/entrypoints/devtools_app/devtools_app.ts`:
+
+```typescript
+// --- TEMPORARY EVALUATION HOOK ---
+// TEMPORARY PATCH - REMOVE BEFORE COMMIT
+
+import * as Host from '../../core/host/host.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+
+(self as any).testCss = {
+  getCases() {
+    return [
+      {
+        name: 'Generic CSS Test Case',
+        url: null,
+        prefix: 'h1 { font-s',
+        suffix: ' }',
+      },
+      // Add more test cases here
+    ];
+  },
+
+  async evaluate(uiSourceCodeUrl: string | null, prefix: string, suffix: string, additionalFiles?: any[]) {
+    const aidaClient = new Host.AidaClient.AidaClient();
+    const completion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+      {aidaClient},
+      AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES
+    );
+
+    const formattedAdditionalFiles = additionalFiles?.map(f => ({
+      path: f.path || f.name,
+      content: f.content || f.text,
+      included_reason: f.included_reason ?? Host.AidaClient.Reason.RELATED_FILE,
+    }));
+
+    const result = await completion.completeCode(
+      prefix,
+      suffix,
+      prefix.length,
+      Host.AidaClient.AidaInferenceLanguage.CSS,
+      formattedAdditionalFiles
+    );
+
+    return {
+      hasSuggestion: result.response !== null && result.response.generatedSamples.length > 0,
+      suggestions: result.response?.generatedSamples.map(s => s.generationString) ?? [],
+      injectedFiles: formattedAdditionalFiles?.map(f => f.path) ?? [],
+    };
+  }
+};
+// ----------------------------------
+```
+
+## Step 2: Launch Chrome with Local DevTools
+
+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 -- --no-watch --browser=canary --remote-debugging-port=9222 --user-data-dir=/tmp/devtools-ai-evaluate-css-completion
+```
+
+> [!IMPORTANT]
+> **Instructions for the Agent:**
+> 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. 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() {
+    return [
+      {
+        name: 'With CSS Context',
+        url: null,
+        prefix: 'h1 { font-s',
+        suffix: ' }',
+        additionalFiles: [
+          {
+            path: 'other.css',
+            content: 'body { color: red; }',
+          }
+        ]
+      }
+    ];
+  }
+```
+
+## Step 4: Run the Evaluation Script
+
+Run the Puppeteer script to execute the evaluation:
+
+```bash
+node .agents/skills/evaluate-ai-css-completion/scripts/evaluate.js
+```
+
+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`:
+
+```bash
+git checkout front_end/entrypoints/devtools_app/devtools_app.ts
+```

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

@@ -0,0 +1,104 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* eslint-disable no-console */
+
+const puppeteer = require('puppeteer-core');
+
+async function runEvaluation() {
+  console.log('Connecting to Chrome...');
+  const browser = await puppeteer.connect({browserURL: 'http://127.0.0.1:9222', defaultViewport: null});
+
+  try {
+    console.log('Opening test page (example.com)...');
+    const testPage = await browser.newPage();
+    await testPage.goto('https://example.com');
+
+    console.log('Waiting for DevTools target...');
+    const devtoolsTarget = await browser.waitForTarget(t => {
+      return t.url().startsWith('devtools://') || t.url().includes('inspector.html');
+    }, {timeout: 10000});
+
+    console.log('Connecting to DevTools page...');
+    const devtoolsPage = await devtoolsTarget.page();
+    if (!devtoolsPage) {
+      throw new Error('Could not get DevTools page object. Make sure DevTools is undocked or opened in a tab.');
+    }
+    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...');
+    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 {
+      await devtoolsPage.waitForFunction(() => typeof self.testCss?.getCases === 'function', {timeout: 15000});
+    } catch {
+      throw new Error('testCss.getCases hook not found. Did you apply the patch and build? Is this the local build?');
+    }
+
+    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. Running each case 5 times.`);
+
+    let totalQueries = 0;
+    for (const tc of testCases) {
+      console.log(`\nRunning: ${tc.name}`);
+      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);
+
+          if (result.hasSuggestion) {
+            successCount++;
+            for (const s of result.suggestions) {
+              suggestions.add(s);
+            }
+          }
+        } catch (e) {
+          console.error(`  [Run ${run}] Failed:`, 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));
+        }
+      }
+
+      console.log(`  Result: [Success Rate: ${successCount}/5]`);
+      if (suggestions.size > 0) {
+        console.log('  Unique Suggestions:', Array.from(suggestions));
+      }
+    }
+
+    // Cleanup tabs
+    await devtoolsPage.close();
+    await testPage.close();
+  } finally {
+    console.log('Disconnecting from Chrome...');
+    await browser.disconnect();
+  }
+}
+
+runEvaluation().catch(console.error);

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,10 @@ 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. Uploading a CL with your changes using the `version-control` skill. And **STRICTLY** follow the following additional template
+- **Title**: `[test-migration] Migrating <chromium-test-name> to unit test`
+- **Body**: `Migrated <link-to-chromium-test> to <devtools-test-name>`
+- **Footer**: Use `Fixed: <issue number>` trailer instead of `Bug: <issue number>`.
 
 ## Example Conversion
 
@@ -69,7 +74,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/eslint.config.mjs

@@ -691,6 +691,13 @@ export default defineConfig([
       'lit/quoted-expressions': ['error', 'never'],
     },
   },
+  {
+    name: 'Front-end core files',
+    files: ['front_end/core/**/*.ts'],
+    rules: {
+      '@devtools/no-instance-of-migrated-singletons': 'error',
+    },
+  },
   {
     name: 'Front-end meta files',
     files: ['front_end/**/*-meta.ts'],