chrome-devtools-frontend 1.0.1706026 → 1.0.1709383

package/.agents/skills/code-review/SKILL.md

@@ -0,0 +1,121 @@
+---
+name: code-review
+description: Generic checklist for reviewing DevTools CLs (your own before upload, or someone else's on Gerrit). Covers test correctness (tautological/vacuous tests, cleanup, leaks), code clarity, CL hygiene, and points to the specialized skills to consult for imports, UI, testing, strings, models, and verification. Use when asked to review a CL, a diff, a patch, or to self-review before `git cl upload`.
+---
+
+# Code Review
+
+This checklist comes from recurring reviewer feedback on landed DevTools CLs.
+Use it for self-review before upload and for reviewing other people's CLs.
+
+## 1. Gather context
+
+- **Local change:** `git diff origin/main...HEAD` (or `git show HEAD` for a
+  single-commit branch). To learn about the branch and upload workflow, see the
+  `devtools-version-control` skill.
+- **Gerrit CL:** strip the leading `)]}'` line from each response to get JSON:
+  - Diff: `git cl diff` (for the current branch), or fetch the patch set.
+  - Inline comments:
+    `curl -s https://chromium-review.googlesource.com/changes/devtools%2Fdevtools-frontend~<CL_NUMBER>/comments | tail -n +2`
+  - Messages:
+    `.../changes/devtools%2Fdevtools-frontend~<CL_NUMBER>/messages`
+- Read the CL description first. Then check that the diff does what the
+  description says, and nothing else.
+
+## 2. Consult the specialized skills
+
+Load the skill that matches what the diff touches, and apply its rules:
+
+| If the diff touches… | Use skill |
+| :--- | :--- |
+| Any `import` statement, or a new cross-module dependency | `devtools-imports` |
+| `UI.Widget`, lit-html views, components, CSS | `devtools-ui-widgets` |
+| Migration of legacy imperative DOM to widgets or Lit | `ui-eng-vision-orchestrator` (and its sub-skills) |
+| New or changed tests: choosing unit, API, or E2E | `devtools-testing-guidance` |
+| Tests that use `describeWithEnvironment` or `describeWithMockConnection`, or foundation modules | `foundation-test-migration` |
+| Ported Chromium web tests (`web_tests/http/tests/devtools`) | `migrate-chromium-test` |
+| Flaky or disabled tests, or `it.skip` / `it.skipOnPlatforms` | `fix-tests` |
+| `UIStrings` / user-facing text | `devtools-ux-writing-refactor` |
+| Rendering user-controlled strings (URLs, names, console text) | `devtools-unicode-escaping` |
+| `front_end/models/*`, `BUILD.gn`, `devtools_grd_files.gni`, entrypoints | `devtools-model-management` |
+| Merging modules or consolidating `BUILD.gn` | `merging-devtools-module` |
+| `Settings` registrations and descriptors | `devtools-setting-migration` |
+| Stack traces, source maps, `DebuggerWorkspaceBinding` | `devtools-source-maps` |
+| Building, running tests, or lint | `devtools-verification` |
+
+## 3. Test correctness (the most common review feedback)
+
+- **Tautological tests:** A test must exercise real production code. If a
+  mock does the thing the test asserts (for example, a mocked `DOM.undo` that
+  calls `removeSection()` directly, followed by an assertion that the section
+  was removed), the test checks the mock and nothing else. Mock the *boundary*
+  instead (for example, have the CDP stub emit `CSSModel.Events.StyleSheetChanged`)
+  and let production code react to it.
+- **Vacuous tests:** Look for local promises or data that are never connected
+  to DevTools logic, or stubs (like `initialize`) that skip the code path under
+  test. These tests pass because nothing happens.
+- **Assertions that check the setup:** For example,
+  `assert.isNull(pane.node())` right after `pane.setNodeForTest(null)`. Each
+  assertion should verify the behavior that the test name describes.
+- **Test lives where it belongs:** A test in `Foo.test.ts` should exercise
+  `Foo`. Move logic-only tests to the model's test file (for example,
+  `CSSMatchedStyles.test.ts`). Otherwise, render the UI and assert on the DOM.
+- **Test covers the scenario it claims:** For example, an "iframe event
+  listeners" test must select a node *inside* the iframe. It is not enough
+  that it passes on `<body>` of the main frame.
+- **Right suite:** Ask whether an E2E test could be a unit test, or whether the
+  E2E coverage is intentional for a user story. See `devtools-testing-guidance`.
+- **E2E selectors match real UI:** Labels and `aria-label`s must match the
+  actual strings, for example "Show user agent shadow DOM" and not "User agent
+  shadow DOM". Check that the setting being toggled actually affects the
+  scenario.
+- **Fail fast:** Throw or assert when a required value is missing. Don't let
+  the test time out later.
+
+## 4. Test hygiene and cleanup
+
+- Pair every `beforeEach` singleton creation with a cleanup in `afterEach`
+  (for example, `CSSWorkspaceBinding.removeInstance()` or
+  `WorkspaceImpl.removeInstance()`) so that state does not leak between tests.
+- Restore fake timers in `try { … } finally { clock.restore(); }`, or use the
+  sandbox or cleanup that the test runner provides. Keep the scope of fake
+  timers small.
+- Don't stub the same method twice without calling `restore()` first. Sinon
+  throws `Attempted to wrap … which is already wrapped` when the object is the
+  same instance.
+- Remove guards that were copied from helpers for no reason (for example,
+  `if (!stub.called) …` in a test that stubs the method only once).
+
+## 5. Code clarity
+
+- Don't take detours to reach a value. If a module is imported, call
+  `TextUtils.TextRange.TextRange.fromObject(...)` directly instead of going
+  through `rule.style.range.constructor`.
+- Look for dead code, leftover debug code, commented-out blocks, and unrelated
+  formatting churn.
+- Check that the change stays in scope. Flag unrelated refactors that should be
+  split into a separate CL.
+- Check for lifecycle issues: event listeners and observers that are added
+  without being removed, and async work that continues after a widget is
+  detached.
+
+## 6. CL hygiene
+
+- The description explains *why*, including external dependencies (for
+  example, "V8 will stop emitting X; this must land first").
+- Include a `Bug:` or `Fixed:` trailer, or `Bug: None`. Keep lines under 72
+  characters.
+- For migrations and stacked series, list the legacy tests or files covered,
+  and number the series (for example, `(13/16)`).
+- Disabled tests reference a bug.
+- Presubmit, lint, and format pass. See `devtools-verification`.
+
+## 7. Writing review comments
+
+- Be specific: cite file and line, explain the concrete failure mode (such as
+  a leak, a hang, or "passes vacuously"), and suggest a fix. Include a code
+  snippet when it helps.
+- Separate blocking issues from nits and questions (for example, "Should we
+  move this to a unit test?").
+- When a reviewer's concern is not an actual bug, reply with the rationale.
+  Don't make a silent change.

package/AUTHORS

@@ -53,6 +53,7 @@ Han Xu <suyanhanx@gmail.com>
 Helmut Januschka <helmut@januschka.com>
 Henry Lim <henry@limhenry.xyz>
 Hojeong Park <parkhj062@gmail.com>
+Ivan Akulov <gxoptg@gmail.com>
 Jacky Hu <flameddd@gmail.com>
 Jake Mulhern <mulherje@gmail.com>
 Jan Keitel <jan.keitel@gmail.com>
@@ -99,6 +100,7 @@ Ryuhei Shima <shimaryuhei@gmail.com>
 Samuel Maddock <samuelmaddock@electronjs.org>
 Satvic Dhawan <satvicdhawan14@gmail.com>
 Sebastian Markbåge <sebastian@calyptus.eu>
+Sebeen Kwon <a856412@gmail.com>
 Semih Dogan <semih702do@gmail.com>
 Serg Kryvonos <sergeikrivonos@gmail.com>
 Sergio Avalos <sergio.avalos@gmail.com>

package/front_end/core/common/Color.ts

@@ -2458,6 +2458,12 @@ export const PageHighlight: Record<string, Legacy> = {
   GapBackground: Legacy.fromRGBA([...LAYOUT_LINES_HIGHLIGHT_COLOR, .3]),
   GapHatch: Legacy.fromRGBA([...LAYOUT_LINES_HIGHLIGHT_COLOR, .8]),
   GridAreaBorder: Legacy.fromRGBA([26, 115, 232, 1]),
+  AnchorIMCB: Legacy.fromRGBA([127, 32, 210, 1]),
+  AnchorIMCBBackground: Legacy.fromRGBA([127, 32, 210, 0.15]),
+  AnchorInsetsBackground: Legacy.fromRGBA([246, 178, 107, 0.25]),
+  AnchorInsetsHatch: Legacy.fromRGBA([246, 178, 107, 0.8]),
+  AnchorTarget: Legacy.fromRGBA([26, 115, 232, 1]),
+  AnchorTargetBackground: Legacy.fromRGBA([26, 115, 232, 0.15]),
 };
 
 export const SourceOrderHighlight: Record<string, Legacy> = {

package/front_end/core/common/VersionController.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Platform from '../platform/platform.js';
-import * as Root from '../root/root.js';
 
 /* eslint @devtools/enforce-version-controller-methods: "error" */
 
@@ -834,67 +833,15 @@ export class VersionController {
   }
 
   updateVersionFrom42To43(): void {
-    const timelineShowAllEventsExperimentEnabled =
-        Root.Runtime.experiments.getValueFromStorage('timeline-show-all-events' as Root.ExperimentNames.ExperimentName);
-    if (timelineShowAllEventsExperimentEnabled !== undefined) {
-      if (this.#settings.syncedStorage.has('timeline-show-all-events')) {
-        return;  // Already migrated
-      }
-      try {
-        const timelineShowAllEventsSetting = this.#settings.moduleSetting('timeline-show-all-events');
-        timelineShowAllEventsSetting.set(timelineShowAllEventsExperimentEnabled);
-      } catch {
-        // If the setting is not registered yet (e.g. in tests), skip.
-      }
-    }
   }
 
   updateVersionFrom43To44(): void {
-    const apcaExperimentEnabled =
-        Root.Runtime.experiments.getValueFromStorage('apca' as Root.ExperimentNames.ExperimentName);
-    if (apcaExperimentEnabled !== undefined) {
-      if (this.#settings.syncedStorage.has('apca')) {
-        return;  // Already migrated
-      }
-      try {
-        const apcaSetting = this.#settings.moduleSetting('apca');
-        apcaSetting.set(apcaExperimentEnabled);
-      } catch {
-        // If the setting is not registered yet (e.g. in tests), skip.
-      }
-    }
   }
 
   updateVersionFrom44To45(): void {
-    const timelineDebugModeExperimentEnabled =
-        Root.Runtime.experiments.getValueFromStorage('timeline-debug-mode' as Root.ExperimentNames.ExperimentName);
-    if (timelineDebugModeExperimentEnabled !== undefined) {
-      if (this.#settings.syncedStorage.has('timeline-debug-mode')) {
-        return;  // Already migrated
-      }
-      try {
-        const timelineDebugModeSetting = this.#settings.moduleSetting('timeline-debug-mode');
-        timelineDebugModeSetting.set(timelineDebugModeExperimentEnabled);
-      } catch {
-        // If the setting is not registered yet (e.g. in tests), skip.
-      }
-    }
   }
 
   updateVersionFrom45To46(): void {
-    const timelineInvalidationTrackingExperimentEnabled = Root.Runtime.experiments.getValueFromStorage(
-        'timeline-invalidation-tracking' as Root.ExperimentNames.ExperimentName);
-    if (timelineInvalidationTrackingExperimentEnabled !== undefined) {
-      if (this.#settings.syncedStorage.has('timeline-invalidation-tracking')) {
-        return;  // Already migrated
-      }
-      try {
-        const timelineInvalidationTrackingSetting = this.#settings.moduleSetting('timeline-invalidation-tracking');
-        timelineInvalidationTrackingSetting.set(timelineInvalidationTrackingExperimentEnabled);
-      } catch {
-        // If the setting is not registered yet (e.g. in tests), skip.
-      }
-    }
   }
 
   updateVersionFrom46To47(): void {

package/front_end/core/root/Runtime.ts

@@ -175,7 +175,6 @@ export interface Option {
 export class ExperimentsSupport {
   #experiments = new Map<ExperimentName, Experiment>();
   readonly #enabledForTests = new Set<ExperimentName>();
-  readonly #storage = new ExperimentStorage();
 
   allConfigurableExperiments(): Experiment[] {
     return [...this.#experiments.values()];
@@ -205,10 +204,6 @@ export class ExperimentsSupport {
     throw new Error(`Unknown experiment '${experimentName}'`);
   }
 
-  getValueFromStorage(experimentName: ExperimentName): boolean|undefined {
-    return this.#storage.get(experimentName);
-  }
-
   setEnabled(experimentName: ExperimentName, enabled: boolean): void {
     if (this.#isExperiment(experimentName)) {
       this.#experiments.get(experimentName)?.setEnabled(enabled);
@@ -240,47 +235,11 @@ export class ExperimentsSupport {
     this.#enabledForTests.clear();
   }
 
-  // TODO(crbug.com/464173054) remove after M156
-  removeAllExperimentsFromLocalStorage(): void {
-    this.#storage.removeAllExperimentsFromLocalStorage();
-  }
-
   #isExperiment(experimentName: ExperimentName): boolean {
     return this.#experiments.has(experimentName);
   }
 }
 
-// TODO(crbug.com/464173054) remove after M156
-/** Manages the 'experiments' dictionary in globalThis.localStorage */
-class ExperimentStorage {
-  readonly #experiments: Record<string, boolean|undefined> = {};
-
-  constructor() {
-    try {
-      const storedExperiments = Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.getItem('experiments');
-      if (storedExperiments) {
-        this.#experiments = JSON.parse(storedExperiments);
-      }
-    } catch (err) {
-      console.error('Failed to parse localStorage[\'experiments\']: ' + err.message);
-    }
-  }
-
-  /**
-   * Experiments are stored with a tri-state:
-   *   - true: Explicitly enabled.
-   *   - false: Explicitly disabled.
-   *   - undefined: Disabled.
-   */
-  get(experimentName: ExperimentName): boolean|undefined {
-    return this.#experiments[experimentName];
-  }
-
-  removeAllExperimentsFromLocalStorage(): void {
-    Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.removeItem('experiments');
-  }
-}
-
 export class Experiment {
   name: ExperimentName;
   title: string;

package/front_end/core/sdk/CSSModel.ts

@@ -44,6 +44,60 @@ export interface LayoutProperties {
   isContents?: boolean;
   containerType?: string;
   hasScroll: boolean;
+  isAnchorPositioned?: boolean;
+}
+
+function isAnchorPositioned(computedStyle: Map<string, string>, matchedStyles?: CSSMatchedStyles|null): boolean {
+  const position = computedStyle.get('position');
+  if (position !== 'absolute' && position !== 'fixed') {
+    return false;
+  }
+  const positionAnchor = computedStyle.get('position-anchor');
+  if (positionAnchor && positionAnchor !== 'none') {
+    return true;
+  }
+  const positionArea = computedStyle.get('position-area');
+  if (positionArea && positionArea !== 'none') {
+    return true;
+  }
+  const anchorProperties = [
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'inset',
+    'inset-block',
+    'inset-inline',
+    'inset-block-start',
+    'inset-block-end',
+    'inset-inline-start',
+    'inset-inline-end',
+    'width',
+    'height',
+    'min-width',
+    'min-height',
+    'max-width',
+    'max-height',
+  ];
+  if (anchorProperties.some(prop => {
+        const val = computedStyle.get(prop);
+        return Boolean(val && (val.includes('anchor(') || val.includes('anchor-size(')));
+      })) {
+    return true;
+  }
+  if (matchedStyles) {
+    for (const style of matchedStyles.nodeStyles()) {
+      for (const property of style.allProperties()) {
+        if (!property.activeInStyle() || !matchedStyles.propertyState(property)) {
+          continue;
+        }
+        if (property.value.includes('anchor(') || property.value.includes('anchor-size(')) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
 }
 
 export class CSSModel extends SDKModel<EventTypes> {
@@ -408,6 +462,8 @@ export class CSSModel extends SDKModel<EventTypes> {
     const isContainer = Boolean(containerType) && containerType !== '' && containerType !== 'normal';
     const hasScroll = Boolean(styles.get('scroll-snap-type')) && styles.get('scroll-snap-type') !== 'none';
 
+    const isAnchored = isAnchorPositioned(styles);
+
     return {
       isFlex,
       isGrid,
@@ -416,6 +472,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       isContents,
       containerType: isContainer ? containerType : undefined,
       hasScroll,
+      isAnchorPositioned: isAnchored,
     };
   }
 

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -87,9 +87,8 @@ export class SyntaxTree {
   readonly tree: CodeMirror.SyntaxNode;
   readonly trailingNodes: CodeMirror.SyntaxNode[];
   readonly propertyName: string|undefined;
-  constructor(
-      propertyValue: string, rule: string, tree: CodeMirror.SyntaxNode, propertyName?: string,
-      trailingNodes: CodeMirror.SyntaxNode[] = []) {
+  constructor(propertyValue: string, rule: string, tree: CodeMirror.SyntaxNode, propertyName?: string,
+              trailingNodes: CodeMirror.SyntaxNode[] = []) {
     this.propertyName = propertyName;
     this.propertyValue = propertyValue;
     this.rule = rule;
@@ -135,8 +134,8 @@ export abstract class TreeWalker {
     }
     return instance;
   }
-  static walk<T extends TreeWalker, ArgTs extends unknown[]>(
-      this: {new(ast: SyntaxTree, ...args: ArgTs): T}, propertyValue: SyntaxTree, ...args: ArgTs): T {
+  static walk<T extends TreeWalker, ArgTs extends unknown[]>(this: {new(ast: SyntaxTree, ...args: ArgTs): T},
+                                                             propertyValue: SyntaxTree, ...args: ArgTs): T {
     const instance = new this(propertyValue, ...args);
     if (propertyValue.tree.name === 'Declaration') {
       instance.iterateDeclaration(propertyValue.tree);
@@ -279,9 +278,8 @@ export class BottomUpTreeMatching extends TreeWalker {
     return this.getComputedTextRange(from ?? this.ast.tree, to ?? this.ast.tree, substitutionHook);
   }
 
-  getComputedTextRange(
-      from: CodeMirror.SyntaxNode|undefined, to: CodeMirror.SyntaxNode|undefined,
-      substitutionHook?: (match: Match) => string | null): string {
+  getComputedTextRange(from: CodeMirror.SyntaxNode|undefined, to: CodeMirror.SyntaxNode|undefined,
+                       substitutionHook?: (match: Match) => string | null): string {
     if (!from || !to) {
       return '';
     }
@@ -481,10 +479,9 @@ export class ComputedText {
 
   countTopLevelValues(begin: number, end: number): number {
     const pieces = Array.from(this.#getPieces(begin, end));
-    const counts = pieces.map(
-        chunk =>
-            (chunk instanceof ComputedTextChunk ? chunk.topLevelValueCount :
-                                                  this.#countTopLevelValuesInStringPiece(chunk)));
+    const counts =
+        pieces.map(chunk => (chunk instanceof ComputedTextChunk ? chunk.topLevelValueCount :
+                                                                  this.#countTopLevelValuesInStringPiece(chunk)));
     const count = counts.reduce((sum, v) => sum + v, 0);
     return count;
   }
@@ -496,11 +493,7 @@ export class ComputedText {
  * sequences that make up the pieces of text may contain non-text nodes/trees. Any such element in between the texts is
  * ignored for the spacing requirement.
  **/
-export function requiresSpace(a: string, b: string): boolean;
-export function requiresSpace(a: Array<{textContent?: string | null}>,
-                              b: Array<{textContent?: string | null}>): boolean;
-export function requiresSpace(a: Array<{textContent?: string | null}>|string|undefined,
-                              b: Array<{textContent?: string | null}>|string|undefined): boolean {
+export function requiresSpace(a: string, b: string): boolean {
   const tail = Array.isArray(a) ? a.findLast(node => node.textContent)?.textContent : a;
   const head = Array.isArray(b) ? b.find(node => node.textContent)?.textContent : b;
   const trailingChar = tail ? tail[tail.length - 1] : '';

package/front_end/core/sdk/DOMModel.ts

@@ -1139,7 +1139,7 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
   }
 
   isCustomElement(): boolean {
-    if (this.nodeType() !== NodeType.ELEMENT_NODE || this.isXMLNode()) {
+    if (this.nodeType() !== NodeType.ELEMENT_NODE || this.isXMLNode() || Boolean(this.pseudoType())) {
       return false;
     }
     const localName = this.localName() || this.nodeName().toLowerCase();
@@ -1600,11 +1600,18 @@ export class DOMDocument extends DOMNode {
     this.#frameId = frameId ?? null;
 
     const resourceTreeModel = this.domModel().target().model(ResourceTreeModel);
-    const frame = this.#frameId ? resourceTreeModel?.frameForId(this.#frameId) : resourceTreeModel?.mainFrame;
-    // In production, DOMDocument should always resolve its security origin from an
-    // associated frame, but falls back to SecurityOrigin.create() as a last resort
-    // for test environments where no frame exists.
-    this.#securityOrigin = frame?.securityOrigin() ?? SecurityOrigin.create(this.#documentURL);
+    const frame = this.#frameId ? resourceTreeModel?.frameForId(this.#frameId) : null;
+    if (frame) {
+      this.#securityOrigin = frame.securityOrigin();
+    } else if (resourceTreeModel?.mainFrame) {
+      // If the target has an active frame tree, a DOMDocument without a matching
+      // frame is a detached document and must be isolated with an opaque origin.
+      this.#securityOrigin = SecurityOrigin.createUniqueOpaque();
+    } else {
+      // TODO(b/567434846): Migrate synthetic unit tests to attach frames so this
+      // fallback to parsing documentURL can be removed.
+      this.#securityOrigin = SecurityOrigin.create(this.#documentURL);
+    }
   }
 
   get documentURL(): Platform.DevToolsPath.UrlString {