chrome-devtools-frontend 1.0.1651641 → 1.0.1654411

package/.agents/skills/fixing-skipped-tests/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: fixing-skipped-tests
+description: Use this skill when unskipping a test that was previously skipped.
+---
+# Fixing Skipped Tests
+
+This skill outlines the workflow for fixing skipped tests in the DevTools codebase, typically given a Chromium bug link (e.g., `crbug.com/1234567`).
+
+## Workflow
+
+1. **Extract the Bug ID**
+   - The input is typically a bug link like `crbug.com/<bugid>`. Extract the `<bugid>` from the link.
+
+2. **Create a Branch**
+   - Create a new branch named `fixed-<bugid>`.
+   - Ensure you use the instructions from the `devtools-version-control` skill to create and switch branches appropriately.
+
+3. **Search for the Skipped Tests**
+   - Search the codebase for the `<bugid>` to find skipped tests.
+   - You should look for occurrences like `it.skip('[crbug.com/<bugid>] ...', ...)` or skipped describes that mention the bug ID.
+
+4. **Iterative Fix Process**
+   - **Step 1:** Change `it.skip` or `describe.skip` to `it.only` or `describe.only` for *one* of the tests associated with the bug, so that only that specific test runs.
+   - **Step 2:** Re-run the tests (e.g., `npm run test -- <path_to_test_file>`) using the guidelines from the `devtools-verification` skill. If you are dealing with flaky tests, you can use the `--repeat=x` flag (e.g. `npm run test -- <path_to_test_file> --repeat=20`) to run the test multiple times to reproduce the flakiness.
+   - **Step 3:** Analyze the test failure and make the necessary fixes to the code or the test itself.
+   - **Step 4:** Re-run the test to ensure the fix is correct. Remove `.only`.
+   - **Step 5:** Remove the `[crbug.com/<bugid>]` prefix from the test name string if it is present.
+   - **Step 6:** Remove any comments directly above the test that explain the reason why the test was skipped (e.g., `// TODO(crbug...): Flaky`).
+   - **Step 7:** Apply the fix to the remaining tests, un-skipping them one by one or in batches, and verifying until all are passing.
+
+5. **Verify Full Build**
+   - Before finishing, run the full verification process (TypeScript checks, linters, full test run) as required by the repository best practices.

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

@@ -0,0 +1,144 @@
+---
+name: devtools-migrate-chromium-test
+description: Use when migrating chromium `third_party/blink/web_tests/http/tests/devtools/` tests to modern unit tests in `third_party/devtools-frontend/src/front_end/`.
+---
+
+# Migrating Legacy DevTools Tests
+
+The skill should be used from within a Chromium check out. The agent should make a devtools CL for the changes in `third_party/devtools-frontend`.
+
+## Workflow
+
+1.  **Identify the Test to Move**:
+
+- Locate the legacy test file (usually `.js`) and its expectation file (`-expected.txt`) in `third_party/blink/web_tests/http/tests/devtools/`.
+- Example: `unit/datagrid-editable-longtext.js`
+
+2.  **Identify the Target Location**:
+
+- Find the file being tested in `third_party/devtools-frontend/src/front_end/`.
+- Place the new test file next to the file being tested, following the naming convention `[FileName].test.ts`.
+- Example: If testing `ui/legacy/components/data_grid/DataGrid.ts`, the test should be `ui/legacy/components/data_grid/DataGrid.test.ts`.
+
+3.  **Convert the Test Content**:
+
+- Rewrite the test from the legacy `TestRunner` style to the modern Mocha/Chai style used in DevTools.
+- Use `describeWithEnvironment` or `describe` as appropriate.
+- Replace `TestRunner.addResult` and expectation comparisons with standard assertions (`assert.strictEqual`, `assert.isTrue`, etc.).
+- 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.
+
+4.  **Update BUILD.gn**:
+
+- Add the new test file to the `sources` list of the `devtools_ui_module("unittests")` or `devtools_foundation_module("foundation_unittests")` target in the corresponding `BUILD.gn` file.
+
+5.  **Verify the Changes**:
+
+- Build the unittests target: `autoninja -C out/Default <target_path>:unittests`
+- Run the test using the DevTools test runner: `npm run test -- <relative_path_to_test>`
+- Ensure the test passes.
+
+6.  **Clean Up**:
+
+- Delete the original legacy test file and its expectation file from `third_party/blink/web_tests/...`.
+- _(Optional)_ If instructed by the user, you may leave the files or handle them differently.
+
+## Example Conversion
+
+### Legacy Test (`datagrid-editable-longtext.js`)
+
+```javascript
+import { TestRunner } from 'test_runner';
+import * as DataGrid from 'devtools/ui/legacy/components/data_grid/data_grid.js';
+
+(async function () {
+  TestRunner.addResult('This tests long text in datagrid.');
+  // ... setup grid ...
+  TestRunner.addResult('Original lengths');
+  // ... dump results ...
+  TestRunner.completeTest();
+})();
+```
+
+### Converted Test (`DataGrid.test.ts`)
+
+```typescript
+import * as DataGrid from './data_grid.js';
+import { renderElementIntoDOM } from '../../../../testing/DOMHelpers.js';
+import { describeWithEnvironment } from '../../../../testing/EnvironmentHelpers.js';
+
+describeWithEnvironment('DataGrid', () => {
+  it('tests long text in datagrid', () => {
+    // ... setup grid ...
+    // Use assertions instead of printing results
+    assert.strictEqual(keyElement.textContent.length, 1500);
+  });
+});
+```
+
+## Tips & Troubleshooting
+
+- **TypeScript Type Mismatches**: Legacy tests often use plain strings for properties that now require specific branded types like `LocalizedString`. You can often bypass this in tests by casting the object array `as DataGrid.DataGrid.ColumnDescriptor[]` or similar, or by using `i18n.i18n.lockedString` if appropriate.
+- **Accessing Private Methods**: Legacy tests frequently called private methods (e.g., `dataGrid.update()`). In TypeScript unit tests, you should avoid this. Look for public alternatives (e.g., `updateInstantly()`) or trigger the behavior by dispatching standard DOM events (e.g., `element.dispatchEvent(new Event('scroll'))` instead of calling `onScroll()`).
+- **Recursive Expansion Limits**: Methods like `TreeElement.expandRecursively()` have a default depth limit (e.g., 3) to prevent infinite loops. If your test requires expanding deeper trees, remember to pass a higher max depth argument: `expandRecursively(10)`.
+- **Mocking Objects**: When testing UI components that display objects (like `RemoteObject`), look for existing mock helpers in related test files (e.g., `createDeepRemoteObjectMock` in `ObjectPropertiesSection.test.ts`) instead of trying to create real SDK objects or complex mocks from scratch. Other helpers live inside `front_end/testing`.
+- **Ignoring Environment Failures**: In some environments, `npm run test` may exit with code 1 due to memory leaks (e.g., `WebFrame LEAKED`) or infrastructure issues (e.g., `gpkg` or `Corp Airlock` logs), even if the tests themselves passed. Always check the end of the test log for `TOTAL: X SUCCESS` to confirm if the test logic was successful.
+- **Rendering issue**: If you encounter an issue where checking values never gives correct information it may be due to async rendering. To resolve that you may trying using `raf()` from `front_end/testing/DOMHelpers.ts` to wait for the next rendering cycle.
+
+## Creating a DevTools CL from a Chromium Checkout
+
+To create a DevTools Change List (CL) from a Chromium checkout, you'll be working within the devtools-frontend repository, which is located inside your Chromium source tree. The depot_tools package (which includes git cl) must be in your PATH.
+
+Here's the typical workflow:
+
+1.  **Navigate to the DevTools Frontend Directory**:
+    The DevTools frontend code resides in `third_party/devtools-frontend/src/` within your Chromium checkout (`chromium/src`).
+
+```bash
+cd path/to/chromium/src/third_party/devtools-frontend/src/
+```
+
+2.  **Create a New Branch**:
+    It's best practice to create a new branch for your changes:
+
+```bash
+git new-branch my-devtools-feature
+```
+
+(Or use `git checkout -b my-devtools-feature`)
+
+3.  **Make Your Code Changes**:
+    Edit the files as needed for your feature or bug fix.
+
+4.  **Commit Changes Locally**:
+    Stage and commit your changes using standard Git commands:
+
+```bash
+git add .
+git commit -m "My DevTools feature description"
+```
+
+_See the Chromium guide on commit messages for best practices on formatting descriptions, including the use of tags like Bug:. _
+
+5.  **Upload the CL for Review**:
+    Use `git cl upload` to send your changes to the Chromium Gerrit code review system:
+
+```bash
+git cl upload
+```
+
+This command will create a CL on `https://chromium-review.googlesource.com`. Follow the prompts to add a description, reviewers, etc. You can also add reviewers and trigger builds through the Gerrit web UI.
+
+6.  **Code Review Process**:
+    Your CL will be reviewed by DevTools owners. You may need to address feedback by amending your commit and uploading new patch sets using `git cl upload` again. Once approved, you can land the change via the Commit Queue (CQ).
+
+### Working on Changes Across DevTools and Chromium Core
+
+- DevTools frontend (`third_party/devtools-frontend/src/`) and the main Chromium codebase (`chromium/src`) are distinct Git repositories.
+- If your work involves changes in both areas, you generally need to create separate CLs: one within the devtools-frontend repo and one within the main `chromium/src` repo.
+- The "Juggling the git submodules" section of the DevTools documentation provides guidance on managing these cross-repository changes.
+
+## After finishing the migration
+
+Identify any helping tips that you discovered during the migration and add them to this skill.

package/docs/get_the_code.md

@@ -56,8 +56,7 @@ out of bundling by setting `devtools_bundle` to `false`
 gn gen out/fast-build --args="devtools_skip_typecheck=true devtools_bundle=false"
 ```
 
-and use `npm run build -- -t fast-build` to build this target (you can of course
-also just change the `Default` target to skip bundling and type checking).
+and use `npm run build -- -t fast-build` to build this target.
 
 ### Rebuilding automatically
 

package/docs/ui_engineering.md

@@ -209,7 +209,9 @@ assert.deepStrictEqual((await viewCall).headersForSourceURL, [{...}]);
 
 // ❌ not recommended: mocking CDP responses to make the models behave in a certain way
 // while testing a presenter is fragile.
-setMockConnectionResponseHandler('CSS.getHeaders', () => ({}));
+const connection = new MockCDPConnection();
+connection.setSuccessHandler('CSS.getHeaders', () => ({}));
+createTarget({connection});
 const presenter = new Presenter();
 presenter.doSomething();
 ```

package/eslint.config.mjs

@@ -775,11 +775,6 @@ export default defineConfig([
 
     settings: {
       'mocha/additionalCustomNames': [
-        {
-          name: 'describeWithDevtoolsExtension',
-          type: 'suite',
-          interfaces: ['BDD', 'TDD'],
-        },
         {
           name: 'describeWithEnvironment',
           type: 'suite',

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../i18n/i18n.js';
+import * as Root from '../root/root.js';
 
 import {EmulationModel} from './EmulationModel.js';
 import {type SDKModelObserver, TargetManager} from './TargetManager.js';
@@ -35,8 +36,6 @@ const str_ = i18n.i18n.registerUIStrings('core/sdk/CPUThrottlingManager.ts', UIS
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-let throttlingManagerInstance: CPUThrottlingManager|undefined;
-
 export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDKModelObserver<EmulationModel> {
   readonly #targetManager: TargetManager;
@@ -55,18 +54,24 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
     targetManager.observeModels(EmulationModel, this);
   }
 
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): CPUThrottlingManager {
+  static instance(opts: {
+    forceNew?: boolean|null,
+    settings?: Common.Settings.Settings,
+    targetManager?: TargetManager,
+  } = {forceNew: null}): CPUThrottlingManager {
     const {forceNew} = opts;
-    if (!throttlingManagerInstance || forceNew) {
-      throttlingManagerInstance =
-          new CPUThrottlingManager(Common.Settings.Settings.instance(), TargetManager.instance());
+    if (!Root.DevToolsContext.globalInstance().has(CPUThrottlingManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          CPUThrottlingManager,
+          new CPUThrottlingManager(opts.settings ?? Common.Settings.Settings.instance(),
+                                   opts.targetManager ?? TargetManager.instance()));
     }
 
-    return throttlingManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(CPUThrottlingManager);
   }
 
   static removeInstance(): void {
-    throttlingManagerInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(CPUThrottlingManager);
   }
 
   cpuThrottlingRate(): number {

package/front_end/core/sdk/CSSMetadata.ts

@@ -108,6 +108,29 @@ export class CSSMetadata {
         propertyValueSets.set(propertyName, extraValues);
       }
     }
+    // and add common keywords for shorthands
+    const commonKeywordSet = new Set(CommonKeywords);
+    for (const propertyName of this.#longhands.keys()) {
+      // skip "all" because it is a CSS-wide keyword
+      // skip shorthands that are defined in generatedPropertyValues because they have their own value sets
+      if (propertyName === 'all' || propertyValueSets.has(propertyName)) {
+        continue;
+      }
+      const longhands = this.#longhands.get(propertyName);
+      if (!longhands) {
+        continue;
+      }
+      const values = new Array<string>();
+      for (const longhand of longhands) {
+        const longhandValues = propertyValueSets.get(longhand);
+        if (!longhandValues) {
+          continue;
+        }
+        const commonKeywordsInLonghandValues = longhandValues.intersection(commonKeywordSet);
+        values.push(...commonKeywordsInLonghandValues);
+      }
+      propertyValueSets.set(propertyName, new Set(values));
+    }
     // finally add keywords from alias property, common keywords to value sets and convert property #values
     // into arrays since callers expect arrays
     for (const [propertyName, values] of propertyValueSets) {

package/front_end/core/sdk/CompilerSourceMappingContentProvider.ts

@@ -25,13 +25,17 @@ export class CompilerSourceMappingContentProvider implements TextUtils.ContentPr
   readonly #sourceURL: Platform.DevToolsPath.UrlString;
   readonly #contentType: Common.ResourceType.ResourceType;
   readonly #initiator: PageResourceLoadInitiator;
+  readonly #pageResourceLoader: PageResourceLoader;
 
-  constructor(
-      sourceURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType,
-      initiator: PageResourceLoadInitiator) {
+  constructor(sourceURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType,
+              initiator: PageResourceLoadInitiator,
+              pageResourceLoader: PageResourceLoader = initiator.target ?
+                  initiator.target.targetManager().context.get(PageResourceLoader) :
+                  PageResourceLoader.instance()) {
     this.#sourceURL = sourceURL;
     this.#contentType = contentType;
     this.#initiator = initiator;
+    this.#pageResourceLoader = pageResourceLoader;
   }
 
   contentURL(): Platform.DevToolsPath.UrlString {
@@ -44,7 +48,7 @@ export class CompilerSourceMappingContentProvider implements TextUtils.ContentPr
 
   async requestContentData(): Promise<TextUtils.ContentData.ContentDataOrError> {
     try {
-      const {content} = await PageResourceLoader.instance().loadResource(this.#sourceURL, this.#initiator);
+      const {content} = await this.#pageResourceLoader.loadResource(this.#sourceURL, this.#initiator);
       return new TextUtils.ContentData.ContentData(
           content, /* isBase64=*/ false, this.#contentType.canonicalMimeType());
     } catch (e) {

package/front_end/core/sdk/DOMModel.ts

@@ -512,6 +512,10 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
     return this.#pseudoElements.get(Protocol.DOM.PseudoType.PickerIcon)?.at(-1);
   }
 
+  interestButtonPseudoElement(): DOMNode|undefined {
+    return this.#pseudoElements.get(Protocol.DOM.PseudoType.InterestButton)?.at(-1);
+  }
+
   markerPseudoElement(): DOMNode|undefined {
     return this.#pseudoElements.get(Protocol.DOM.PseudoType.Marker)?.at(-1);
   }

package/front_end/core/sdk/EmulationModel.ts

@@ -250,6 +250,10 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
     }
   }
 
+  async setSafeAreaInsets(insets: Protocol.Emulation.SafeAreaInsets): Promise<void> {
+    await this.#emulationAgent.invoke_setSafeAreaInsetsOverride({insets});
+  }
+
   overlayModel(): OverlayModel|null {
     return this.#overlayModel;
   }

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -92,8 +92,9 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     return null;
   }
 
-  static reloadAllPages(bypassCache?: boolean, scriptToEvaluateOnLoad?: string): void {
-    for (const resourceTreeModel of TargetManager.instance().models(ResourceTreeModel)) {
+  static reloadAllPages(bypassCache?: boolean, scriptToEvaluateOnLoad?: string,
+                        targetManager: TargetManager = TargetManager.instance()): void {
+    for (const resourceTreeModel of targetManager.models(ResourceTreeModel)) {
       if (resourceTreeModel.target().parentTarget()?.type() !== Type.FRAME) {
         resourceTreeModel.reloadPage(bypassCache, scriptToEvaluateOnLoad);
       }