DevTools issue highlight hide/unhide sampler

Chromium #40272723 Status: New Priority: P4 Severity: S5

Purpose

This page replaces the offline form-problems.glitch.me repro for issue #40272723.

It includes form markup that triggers form-related Issues and attribute-level highlighting in the Elements tree.

How to reproduce in DevTools

  1. Open this page and keep DevTools open.
  2. In Elements, inspect <label id="middle-name-label" ...>.
  3. Confirm the for attribute gets issue highlighting.
  4. Open the Issues panel and enable Group by kind.
  5. In Page Errors, open the 3-dot menu and click Hide all current Page Errors.
  6. Go back to Elements and inspect the same label again.

Expected vs old behavior

Expected

After hiding current Page Errors, the corresponding attribute highlight in Elements is removed.

Old behavior

The highlight remained visible even after the issue was hidden.

Live sampler

Relevant HTML snippet

<label id="middle-name-label" for="middle-name">Middle name</label>
<input id="middle-name-input" name="middle-name" autocomplete="additional-name">

<label id="ghost-id-label" for="does-not-exist">Secondary problematic label</label>

Links

Issue 40272723

No linked CL yet.