Add squiggly line support for <select> issues in DOM tree

This CL adds a separate utility collection for issues in the Elements
panel, which will be used for both the DOM tree and the a11y tree. This utility collection is responsible for adapting various types of issues and return "normalized" result for the Elements panel to display. This way, we keep the DOM tree agnostic to the adaption and the types of issues, hence the relaxation of the issue type from GenericIssue to Issue.

For now, the state management of Elements panel-related issues stays in the Elements outline.

Bug: 378738916, 393245109
Change-Id: Ifbabc14b735cc0f7568e7a46bd7ea1807b52dc25
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6297955
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>

Author: hanselfmu-chromium

config/gni/devtools_grd_files.gni

@@ -1395,6 +1395,7 @@ grd_files_debug_sources = [
   "front_end/panels/elements/ComputedStyleWidget.js",
   "front_end/panels/elements/DOMLinkifier.js",
   "front_end/panels/elements/DOMPath.js",
+  "front_end/panels/elements/ElementIssueUtils.js",
   "front_end/panels/elements/ElementStatePaneWidget.js",
   "front_end/panels/elements/ElementsPanel.js",
   "front_end/panels/elements/ElementsSidebarPane.js",

front_end/core/root/Runtime.ts

@@ -140,7 +140,7 @@ export class ExperimentsSupport {
       experimentName: string, experimentTitle: string, unstable?: boolean, docLink?: string,
       feedbackLink?: string): void {
     if (this.#experimentNames.has(experimentName)) {
-      throw new Error(`Duplicate registraction of experiment '${experimentName}'`);
+      throw new Error(`Duplicate registration of experiment '${experimentName}'`);
     }
     this.#experimentNames.add(experimentName);
     this.#experiments.push(new Experiment(

front_end/entrypoints/main/MainImpl.ts

@@ -338,7 +338,6 @@ export class MainImpl {
         Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES, 'Sync CSS changes in the Styles tab');
 
     // Highlights a violating node or attribute by rendering a squiggly line under it and adding a tooltip linking to the issues panel.
-    // Right now violating nodes are exclusively form fields that contain an HTML issue, for example, and <input /> whose id is duplicate inside the form.
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL,
         'Highlights a violating node or attribute in the Elements panel DOM tree');

front_end/panels/elements/BUILD.gn

@@ -41,6 +41,7 @@ devtools_module("elements") {
     "ComputedStyleWidget.ts",
     "DOMLinkifier.ts",
     "DOMPath.ts",
+    "ElementIssueUtils.ts",
     "ElementStatePaneWidget.ts",
     "ElementsPanel.ts",
     "ElementsSidebarPane.ts",

front_end/panels/elements/ElementIssueUtils.ts

@@ -0,0 +1,144 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Protocol from '../../generated/protocol.js';
+import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+
+const UIStrings = {
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formLabelForNameError: 'Incorrect use of <label for=FORM_ELEMENT>',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formDuplicateIdForInputError: 'Duplicate form field id in the same form',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formInputWithNoLabelError: 'Form field without valid aria-labelledby attribute or associated label',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formAutocompleteAttributeEmptyError: 'Incorrect use of autocomplete attribute',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formEmptyIdAndNameAttributesForInputError: 'A form field element should have an id or name attribute',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formAriaLabelledByToNonExistingId: 'An aria-labelledby attribute doesn\'t match any element id',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formInputAssignedAutocompleteValueToIdOrNameAttributeError: 'An element doesn\'t have an autocomplete attribute',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formLabelHasNeitherForNorNestedInput: 'No label associated with a form field',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formLabelForMatchesNonExistingIdError: 'Incorrect use of <label for=FORM_ELEMENT>',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  formInputHasWrongButWellIntendedAutocompleteValueError: 'Non-standard autocomplete attribute value',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  disallowedSelectChild: 'Invalid element or text node within <select>',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  disallowedOptGroupChild: 'Invalid element or text node within <optgroup>',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  nonPhrasingContentOptionChild: 'Non-phrasing content used within an <option> element',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  interactiveContentOptionChild: 'Interactive element inside of an <option> element',
+  /**
+   * @description Tooltip text shown in the Elements panel when an element has an error.
+   */
+  interactiveContentLegendChild: 'Interactive element inside of a <legend> element',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementIssueUtils.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ElementIssueDetails {
+  tooltip: string;
+  nodeId?: Protocol.DOM.BackendNodeId;
+  attribute?: string;
+}
+
+export function getElementIssueDetails(issue: IssuesManager.Issue.Issue): ElementIssueDetails|undefined {
+  if (issue instanceof IssuesManager.GenericIssue.GenericIssue) {
+    const issueDetails = issue.details();
+    return {
+      tooltip: getTooltipFromGenericIssue(issueDetails.errorType),
+      nodeId: issueDetails.violatingNodeId,
+      attribute: issueDetails.violatingNodeAttribute,
+    };
+  }
+  if (issue instanceof IssuesManager.SelectElementAccessibilityIssue.SelectElementAccessibilityIssue) {
+    const issueDetails = issue.details();
+    return {
+      tooltip: getTooltipFromSelectElementAccessibilityIssue(issueDetails.selectElementAccessibilityIssueReason),
+      nodeId: issueDetails.nodeId,
+    };
+  }
+
+  return undefined;
+}
+
+function getTooltipFromGenericIssue(errorType: Protocol.Audits.GenericIssueErrorType): string {
+  switch (errorType) {
+    case Protocol.Audits.GenericIssueErrorType.FormLabelForNameError:
+      return i18nString(UIStrings.formLabelForNameError);
+    case Protocol.Audits.GenericIssueErrorType.FormDuplicateIdForInputError:
+      return i18nString(UIStrings.formDuplicateIdForInputError);
+    case Protocol.Audits.GenericIssueErrorType.FormInputWithNoLabelError:
+      return i18nString(UIStrings.formInputWithNoLabelError);
+    case Protocol.Audits.GenericIssueErrorType.FormAutocompleteAttributeEmptyError:
+      return i18nString(UIStrings.formAutocompleteAttributeEmptyError);
+    case Protocol.Audits.GenericIssueErrorType.FormEmptyIdAndNameAttributesForInputError:
+      return i18nString(UIStrings.formEmptyIdAndNameAttributesForInputError);
+    case Protocol.Audits.GenericIssueErrorType.FormAriaLabelledByToNonExistingId:
+      return i18nString(UIStrings.formAriaLabelledByToNonExistingId);
+    case Protocol.Audits.GenericIssueErrorType.FormInputAssignedAutocompleteValueToIdOrNameAttributeError:
+      return i18nString(UIStrings.formInputAssignedAutocompleteValueToIdOrNameAttributeError);
+    case Protocol.Audits.GenericIssueErrorType.FormLabelHasNeitherForNorNestedInput:
+      return i18nString(UIStrings.formLabelHasNeitherForNorNestedInput);
+    case Protocol.Audits.GenericIssueErrorType.FormLabelForMatchesNonExistingIdError:
+      return i18nString(UIStrings.formLabelForMatchesNonExistingIdError);
+    case Protocol.Audits.GenericIssueErrorType.FormInputHasWrongButWellIntendedAutocompleteValueError:
+      return i18nString(UIStrings.formInputHasWrongButWellIntendedAutocompleteValueError);
+    default:
+      return '';
+  }
+}
+
+function getTooltipFromSelectElementAccessibilityIssue(reason: Protocol.Audits.SelectElementAccessibilityIssueReason):
+    string {
+  switch (reason) {
+    case Protocol.Audits.SelectElementAccessibilityIssueReason.DisallowedSelectChild:
+      return i18nString(UIStrings.disallowedSelectChild);
+    case Protocol.Audits.SelectElementAccessibilityIssueReason.DisallowedOptGroupChild:
+      return i18nString(UIStrings.disallowedOptGroupChild);
+    case Protocol.Audits.SelectElementAccessibilityIssueReason.NonPhrasingContentOptionChild:
+      return i18nString(UIStrings.nonPhrasingContentOptionChild);
+    case Protocol.Audits.SelectElementAccessibilityIssueReason.InteractiveContentOptionChild:
+      return i18nString(UIStrings.interactiveContentOptionChild);
+    case Protocol.Audits.SelectElementAccessibilityIssueReason.InteractiveContentLegendChild:
+      return i18nString(UIStrings.interactiveContentLegendChild);
+    default:
+      return '';
+  }
+}

front_end/panels/elements/ElementsTreeElement.ts

@@ -54,6 +54,7 @@ import * as Emulation from '../emulation/emulation.js';
 
 import * as ElementsComponents from './components/components.js';
 import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js';
+import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {type ElementsTreeOutline, MappedCharToEntity, type UpdateRecord} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -262,8 +263,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private hintElement?: HTMLElement;
   private aiButtonContainer?: HTMLElement;
   private contentElement: HTMLElement;
-  #elementIssues = new Map<string, IssuesManager.GenericIssue.GenericIssue>();
-  #nodeElementToIssue = new Map<Element, IssuesManager.GenericIssue.GenericIssue>();
+  #elementIssues = new Map<string, IssuesManager.Issue.Issue>();
+  #nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue>();
   #highlights: Range[] = [];
 
   readonly tagTypeContext: TagTypeContext;
@@ -434,7 +435,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  addIssue(newIssue: IssuesManager.GenericIssue.GenericIssue): void {
+  addIssue(newIssue: IssuesManager.Issue.Issue): void {
     if (this.#elementIssues.has(newIssue.primaryKey())) {
       return;
     }
@@ -443,21 +444,24 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#applyIssueStyleAndTooltip(newIssue);
   }
 
-  #applyIssueStyleAndTooltip(issue: IssuesManager.GenericIssue.GenericIssue): void {
-    const issueDetails = issue.details();
+  #applyIssueStyleAndTooltip(issue: IssuesManager.Issue.Issue): void {
+    const elementIssueDetails = getElementIssueDetails(issue);
+    if (!elementIssueDetails) {
+      return;
+    }
 
-    if (issueDetails.violatingNodeAttribute) {
-      this.#highlightViolatingAttr(issueDetails.violatingNodeAttribute, issue);
+    if (elementIssueDetails.attribute) {
+      this.#highlightViolatingAttr(elementIssueDetails.attribute, issue);
     } else {
       this.#highlightTagAsViolating(issue);
     }
   }
 
-  get issuesByNodeElement(): Map<Element, IssuesManager.GenericIssue.GenericIssue> {
+  get issuesByNodeElement(): Map<Element, IssuesManager.Issue.Issue> {
     return this.#nodeElementToIssue;
   }
 
-  #highlightViolatingAttr(name: string, issue: IssuesManager.GenericIssue.GenericIssue): void {
+  #highlightViolatingAttr(name: string, issue: IssuesManager.Issue.Issue): void {
     const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0];
     const attributes = tag.getElementsByClassName('webkit-html-attribute');
     for (const attribute of attributes) {
@@ -469,7 +473,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  #highlightTagAsViolating(issue: IssuesManager.GenericIssue.GenericIssue): void {
+  #highlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
     const tagElement = this.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
     tagElement.classList.add('violating-element');
     this.#nodeElementToIssue.set(tagElement, issue);

front_end/panels/elements/ElementsTreeOutline.test.ts

@@ -2,12 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
 } from '../../testing/MockConnection.js';
+import {MockIssuesModel} from '../../testing/MockIssuesModel.js';
 
 import * as Elements from './elements.js';
 
@@ -19,6 +22,7 @@ describeWithMockConnection('ElementsTreeOutline', () => {
   beforeEach(() => {
     target = createTarget();
 
+    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.HIGHLIGHT_ERRORS_ELEMENTS_PANEL);
     treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline(/* omitRootDOMNode */ true);
     treeOutline.wireToDOMModel(target.model(SDK.DOMModel.DOMModel) as SDK.DOMModel.DOMModel);
 
@@ -90,4 +94,98 @@ describeWithMockConnection('ElementsTreeOutline', () => {
     treeOutline.rootDOMNode = selectNode;
     assert.isNotNull(treeOutline.findTreeElement(pickerIconNode!));
   });
+
+  it('should add an element-related issue to the relevant tree element', async () => {
+    const divNodePayload = {
+      nodeId: 2 as Protocol.DOM.NodeId,
+      parentId: 1 as Protocol.DOM.NodeId,
+      backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+      nodeType: Node.ELEMENT_NODE,
+      nodeName: 'DIV',
+      childNodeCount: 0,
+      localName: 'div',
+      nodeValue: 'A div',
+    };
+    const rootNode = SDK.DOMModel.DOMNode.create(model, null, false, {
+      nodeId: 1 as Protocol.DOM.NodeId,
+      backendNodeId: 1 as Protocol.DOM.BackendNodeId,
+      nodeType: Node.ELEMENT_NODE,
+      nodeName: 'BODY',
+      localName: 'body',
+      nodeValue: 'Body',
+      childNodeCount: 1,
+      children: [divNodePayload],
+    });
+    assert.isNotNull(rootNode);
+    treeOutline.rootDOMNode = rootNode;
+    const divNode = rootNode.children()![0];
+    assert.isNotNull(divNode);
+    const treeElement = treeOutline.findTreeElement(divNode);
+    assert.isNotNull(treeElement);
+    const deferredDOMNodeStub = sinon.stub(SDK.DOMModel.DeferredDOMNode.prototype, 'resolvePromise').resolves(divNode);
+
+    const issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
+    const mockModel = new MockIssuesModel([]) as unknown as SDK.IssuesModel.IssuesModel;
+
+    // Test that generic issue can be added to the tree element.
+    {
+      const inspectorIssue = {
+        code: Protocol.Audits.InspectorIssueCode.GenericIssue,
+        details: {
+          genericIssueDetails: {
+            errorType: Protocol.Audits.GenericIssueErrorType.FormLabelForNameError,
+            frameId: 'main' as Protocol.Page.FrameId,
+            violatingNodeId: 2 as Protocol.DOM.BackendNodeId,
+          },
+        },
+      };
+      const issue = IssuesManager.GenericIssue.GenericIssue.fromInspectorIssue(mockModel, inspectorIssue)[0];
+      issuesManager.dispatchEventToListeners(
+          IssuesManager.IssuesManager.Events.ISSUE_ADDED, {issuesModel: mockModel, issue});
+      await deferredDOMNodeStub();
+      const tagElement = treeElement.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
+      assert.isTrue(tagElement.classList.contains('violating-element'));
+      // Reset tag to prepare for subsequent tests.
+      tagElement.classList.remove('violating-element');
+    }
+
+    // Test that <select> issue can be added to the tree element.
+    {
+      const inspectorIssue = {
+        code: Protocol.Audits.InspectorIssueCode.SelectElementAccessibilityIssue,
+        details: {
+          selectElementAccessibilityIssueDetails: {
+            nodeId: 2 as Protocol.DOM.BackendNodeId,
+            selectElementAccessibilityIssueReason:
+                Protocol.Audits.SelectElementAccessibilityIssueReason.DisallowedSelectChild,
+            hasDisallowedAttributes: false,
+          },
+        },
+      };
+      const issue = IssuesManager.SelectElementAccessibilityIssue.SelectElementAccessibilityIssue.fromInspectorIssue(
+          mockModel, inspectorIssue)[0];
+      issuesManager.dispatchEventToListeners(
+          IssuesManager.IssuesManager.Events.ISSUE_ADDED, {issuesModel: mockModel, issue});
+      await deferredDOMNodeStub();
+      const tagElement = treeElement.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
+      assert.isTrue(tagElement.classList.contains('violating-element'));
+      // Reset tag to prepare for subsequent tests.
+      tagElement.classList.remove('violating-element');
+    }
+
+    // Test that non-supported issue won't be added to the tree element.
+    {
+      const inspectorIssue = {
+        code: Protocol.Audits.InspectorIssueCode.ContentSecurityPolicyIssue,
+        details: {},
+      };
+      const issue = IssuesManager.ContentSecurityPolicyIssue.ContentSecurityPolicyIssue.fromInspectorIssue(
+          mockModel, inspectorIssue)[0];
+      issuesManager.dispatchEventToListeners(
+          IssuesManager.IssuesManager.Events.ISSUE_ADDED, {issuesModel: mockModel, issue});
+      await deferredDOMNodeStub();
+      const tagElement = treeElement.listItemElement.getElementsByClassName('webkit-html-tag-name')[0];
+      assert.isFalse(tagElement.classList.contains('violating-element'));
+    }
+  });
 });