chrome-devtools-frontend 1.0.1661063 → 1.0.1662289

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,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/front_end/core/common/SettingRegistration.ts

@@ -273,11 +273,6 @@ export interface SettingRegistration {
    * 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

package/front_end/core/platform/ArrayUtilities.ts

@@ -152,6 +152,16 @@ export function lowerBound<S, T, A extends S[]>(
   return r;
 }
 
+/**
+ * Inserts a value into a sorted array in O(n) time (O(log n) search using the provided comparator and O(n) insertion).
+ * Returns the index at which the value was inserted.
+ */
+export function insertWithComparator<T>(array: T[], value: T, comparator: (a: T, b: T) => number): number {
+  const index = lowerBound(array, value, comparator);
+  array.splice(index, 0, value);
+  return index;
+}
+
 /**
  * Returns the index of the element closest to the needle that is greater than
  * it. Assumes that the provided array is sorted.

package/front_end/foundation/README.md

@@ -8,3 +8,89 @@ As such, allowed use of APIs is restricted to what is available in both runtimes
 A `DevToolsUniverse` is a concrete, encapsulated instance of "foundation" scoped
 to a single root CDP target. It is valid to create multiple `DevToolsUniverse`
 instances simultaneously.
+
+## Architecture Shortcomings & Code Health Projects
+
+The following is a prioritized list of architectural shortcomings and refactoring projects aimed at reducing coupling, eliminating global state, and improving the modularity of the DevTools foundation.
+
+### Priority 1: Move `models/text_utils` to `core/text_utils`
+*   **Problem**: 22 files in `front_end/core/sdk` depend directly on `front_end/models/text_utils` for basic text structures (layering violation).
+*   **Rationale**: `text_utils` contains fundamental, non-business-logic utilities (`TextRange`, `TextCursor`, `ContentData`, `ContentProvider`) that represent the base data structures of the editor, debugger, and network panels. It only depends on `core/common` and `core/platform`. Moving it to `core` is a natural fit and resolves the majority of `core` -> `models` layering violations.
+*   **Action**:
+    1. Move the directory `front_end/models/text_utils` to `front_end/core/text_utils`.
+    2. Update all imports across the codebase.
+
+### Priority 2: Break Circular Dependencies in Bindings (`ResourceMapping` <-> Bindings)
+*   **Problem**: Bidirectional dependencies between `ResourceMapping` and `DebuggerWorkspaceBinding`/`CSSWorkspaceBinding` prevent isolated testing.
+*   **Rationale**: Decoupling `ResourceMapping` from concrete bindings allows better testing and modularity.
+*   **Action**: Introduce abstract listener interfaces in `ResourceMapping` (Dependency Inversion). `DebuggerWorkspaceBinding` and `CSSWorkspaceBinding` should implement these interfaces and register themselves, allowing `ResourceMapping` to invoke them without depending on concrete classes.
+
+### Priority 3: Move `IgnoreListManager` from `workspace` to `bindings`
+*   **Problem**: `models/workspace` depends on `core/sdk` via `IgnoreListManager.ts`.
+*   **Rationale**: Ignore-listing is conceptually a debugger-binding concern, not a basic workspace/file-system concern.
+*   **Action**:
+    1. Remove the convenience helper `UISourceCode.isIgnoreListed()` (and related methods in `UILocation`) from `models/workspace`.
+    2. Update callers to query `IgnoreListManager` directly.
+    3. Move `IgnoreListManager.ts` to `models/bindings`.
+    4. This removes the value-level dependency of `workspace` on `sdk`.
+
+### Priority 4: Decouple `Workspace.Project` from `SDK.Target`
+*   **Problem**: `Workspace.Project` exposes `target()`, coupling the VFS to runtime targets.
+*   **Rationale**: A workspace should be able to exist without knowing about browser targets.
+*   **Action**:
+    1. Remove `target()` from the `Project` interface and `ProjectStore` in `front_end/models/workspace/WorkspaceImpl.ts`.
+    2. In the `bindings` module, maintain a private `WeakMap<Workspace.Project, SDK.Target.Target>` to associate projects with targets.
+    3. Update `NetworkProject.targetForUISourceCode(uiSourceCode)` to look up the target from this `WeakMap`.
+
+### Priority 5: Decouple `core/sdk` from `models/formatter` (AST Scope Fallback)
+*   **Problem**: `SDK/SourceMap.ts` depends on `models/formatter` for fallback scope calculation.
+*   **Rationale**: `SDK` should not depend on high-level formatting/parsing worker pools.
+*   **Action**:
+    1. Remove the fallback scope calculation logic from `SourceMap.ts` and expose a clean API (e.g., `setScopesInfo(...)`).
+    2. Move the AST fallback scope calculation logic to `front_end/models/bindings` (e.g., in `DebuggerWorkspaceBinding`), which coordinates script and source map loading.
+    3. Have the bindings layer calculate the fallback scopes and attach them to the `SourceMap` object.
+
+### Priority 6: Refactor Mapping Engines & Inner Helpers in Bindings
+*   **Problem**: Engines and helpers query global `DebuggerWorkspaceBinding.instance()` directly.
+*   **Rationale**: High coupling hinders testing and isolation.
+*   **Action**: Eliminate direct global singleton queries. Update helpers to access parent mapping engines or pass references via constructors.
+
+### Priority 7: Universe-scoped Embedder Host and HostConfig
+*   **Problem**: `InspectorFrontendHostInstance` and `Root.Runtime.hostConfig` are treated as global mutable singletons. Core classes (`Connections`, `IsolatedFileSystemManager`, `FileManager`) and UI components access them directly, leading to global state pollution and state leaks in tests.
+*   **Rationale**: The host interface and its configuration represent the boundary between DevTools and the Chromium browser. To support multiple isolated `DevToolsUniverse` instances, both the host interface and host configuration must be scoped to the universe context.
+*   **Action**:
+    1. Store the scoped `InspectorFrontendHostAPI` (wrapped in `ScopedInspectorFrontendHost`) in the `DevToolsUniverse` context.
+    2. Refactor core classes (`Connections`, `IsolatedFileSystemManager`, `FileManager`, `UserMetrics`) to receive the scoped host via constructor injection.
+    3. Introduce a scoped `HostConfigProvider` service in the `Universe` context to manage `HostConfig` fetching and caching.
+    4. Move polling and configuration update logic from `HostConfigTracker` in `AidaClient.ts` to `HostConfigProvider`.
+    5. Provide a compatibility Proxy for `Root.Runtime.hostConfig` to allow gradual migration of the 200+ call sites.
+    6. Remove the global side-effect initialization in `InspectorFrontendHost.ts`.
+
+### Priority 8: View-Level Dependency Injection (Universe-ification)
+*   **Problem**: UI panels query global `.instance()` for bindings, causing state leaks in tests.
+*   **Rationale**: DevTools is transitioning to a scoped "Universe" architecture where dependencies are injected. UI panels should receive their dependencies rather than querying globals.
+*   **Action**:
+    1. Expose bindings on `Universe` and inject them via the view loading pipeline.
+    2. Leverage the view loading pipeline (`-meta.ts` files) to pass these bindings to panel constructors upon initialization, avoiding global calls in UI panels.
+
+### Priority 9: Decouple `persistence` from `bindings`
+*   **Problem**: `models/persistence` depends on `models/bindings` to check if a target is Node.js.
+*   **Rationale**: `persistence` (which maps network files to local files) should ideally only depend on `workspace` and not on the complex debugger/bindings layer.
+*   **Action**: Introduce a capability/property on `Workspace.Project` (e.g., `isNodeProject`) to avoid direct target queries.
+
+### Priority 10: Move `SourceFrameIssuesManager` to `bindings`
+*   **Problem**: `models/issues_manager` depends on `workspace` and `bindings` only for placing issue badges.
+*   **Rationale**: Showing badges on source frames is a binding/presentation concern, similar to showing console messages. `issues_manager` itself should be a clean, independent leaf module.
+*   **Action**: Move `SourceFrameIssuesManager.ts` to `models/bindings/` and remove `workspace` and `bindings` dependencies from `issues_manager/BUILD.gn`.
+
+### Priority 11: Decouple UI via Interfaces / Revealers
+*   **Problem**: General UI components (like `Linkifier`) depend on heavy concrete bindings.
+*   **Rationale**: UI components should not be tightly coupled to complex mapping logic.
+*   **Action**: Use light interfaces or `Common.Revealer`.
+
+### Priority 12: Decouple Core Modules from `i18n` (UI Localization)
+*   **Problem**: Core infra/parser modules import `i18n` for localized strings.
+*   **Rationale**: Business logic and core infrastructure should not be tied to UI localization libraries.
+*   **Action**:
+    1. Refactor parsers to return structured error data and let UI handle localization.
+    2. Update registries to use string IDs/keys.