Expose ::checkmark pseudo-element in devtools

Bug: 379805728
Change-Id: I8c6c478fe7bef0d93a50354ad450a9fd91c49ce5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6170906
Reviewed-by: Philip Pfaffe <[email protected]>
Commit-Queue: Traian Captan <[email protected]>
Reviewed-by: Eric Leese <[email protected]>

Author: tcaptan-cr

front_end/core/sdk/DOMModel.ts

@@ -353,6 +353,10 @@ export class DOMNode {
     return this.#pseudoElements;
   }
 
+  checkmarkPseudoElement(): DOMNode|undefined {
+    return this.#pseudoElements.get(Protocol.DOM.PseudoType.Checkmark)?.at(-1);
+  }
+
   beforePseudoElement(): DOMNode|undefined {
     return this.#pseudoElements.get(Protocol.DOM.PseudoType.Before)?.at(-1);
   }

front_end/panels/elements/BUILD.gn

@@ -162,6 +162,7 @@ ts_library("unittests") {
     "ElementStatePaneWidget.test.ts",
     "ElementsPanel.test.ts",
     "ElementsTreeElementHighlighter.test.ts",
+    "ElementsTreeOutline.test.ts",
     "InspectElementModeController.test.ts",
     "PlatformFontsWidget.test.ts",
     "PropertiesWidget.test.ts",

front_end/panels/elements/ElementsTreeOutline.test.ts

@@ -0,0 +1,63 @@
+// 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 SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {
+  describeWithMockConnection,
+} from '../../testing/MockConnection.js';
+
+import * as Elements from './elements.js';
+
+describeWithMockConnection('ElementsTreeOutline', () => {
+  let target: SDK.Target.Target;
+  let model: SDK.DOMModel.DOMModel;
+  let treeOutline: Elements.ElementsTreeOutline.ElementsTreeOutline;
+
+  beforeEach(() => {
+    target = createTarget();
+
+    treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline(/* omitRootDOMNode */ true);
+    treeOutline.wireToDOMModel(target.model(SDK.DOMModel.DOMModel) as SDK.DOMModel.DOMModel);
+
+    const modelBeforeAssertion = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(modelBeforeAssertion);
+    model = modelBeforeAssertion;
+  });
+
+  afterEach(() => {
+    target.dispose('NO_REASON');
+  });
+
+  it('should include the ::checkmark pseudo element', () => {
+    const optionNode = SDK.DOMModel.DOMNode.create(model, null, false, {
+      nodeId: 1 as Protocol.DOM.NodeId,
+      backendNodeId: 1 as Protocol.DOM.BackendNodeId,
+      nodeType: Node.ELEMENT_NODE,
+      nodeName: 'option',
+      localName: 'option',
+      nodeValue: 'An Option',
+      childNodeCount: 1,
+      pseudoElements: [{
+        parentId: 1 as Protocol.DOM.NodeId,
+        nodeId: 2 as Protocol.DOM.NodeId,
+        backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+        nodeType: Node.ELEMENT_NODE,
+        pseudoType: Protocol.DOM.PseudoType.Checkmark,
+        pseudoIdentifier: '::checkmark',
+        nodeName: '::checkmark',
+        localName: '::checkmark',
+        nodeValue: '*',
+      }],
+    });
+    assert.isNotNull(optionNode);
+
+    const checkmarkNode = optionNode.checkmarkPseudoElement();
+    assert.isNotNull(checkmarkNode);
+
+    treeOutline.rootDOMNode = optionNode;
+    assert.isNotNull(treeOutline.findTreeElement(checkmarkNode!));
+  });
+});

front_end/panels/elements/ElementsTreeOutline.ts

@@ -1382,6 +1382,11 @@ export class ElementsTreeOutline extends
       visibleChildren.push(markerPseudoElement);
     }
 
+    const checkmarkPseudoElement = node.checkmarkPseudoElement();
+    if (checkmarkPseudoElement) {
+      visibleChildren.push(checkmarkPseudoElement);
+    }
+
     const beforePseudoElement = node.beforePseudoElement();
     if (beforePseudoElement) {
       visibleChildren.push(beforePseudoElement);