pseudo-elements not directly identifiable by backend node ID

[brendankenny]

Node IDs are shared between an element and any of its pseudo-elements. Any time Lighthouse tries to identify an element by DOMNodeId/backendNodeId it targets the main element, even if the culprit was actually in a pseudo-element.

I believe DOM.resolveNode usage is limited to TraceElements and AnchorElements these days, but it means that element screenshots can be wrong (e.g. if it's ::before content that had a layout shift, not the main element) and the wrong opportunities suggested (e.g. the LCP image is in an ::after, not the main element).

Same example as in #14350: https://earthy-picayune-albertonykus.glitch.me/ (the actual LCP is the ::after Lighthouse logo, but largest-contentful-paint-element identifies the whole .wrapper element as the LCP).

I'm not sure what a good solution would look like.

For TraceElements, the DOMNodeId is all you get, but e.g. for LCP there are more specific LargestImagePaint::Candidate and LargestTextPaint::Candidate trace events that give frame and root coordinates that could possibly be helpful (or hopelessly out of date by the time TraceElements is running). LargestImagePaint::Candidate also gives the URL of the image being painted, which could be used in the specific image LCP case once #14350 has a solution.

I haven't really looked into this, but the debugger protocol also lets you manipulate pseudo-elements (e.g. in the Elements panel), so they must be targetable to some extent. Maybe there's more that could be done to dig in with that.

[connorjclark]

let's see if we can get the various trace surfaces to emit node ids of PEs, not just the parent. (LCP, CLS are the big ones).

also we need a way for getNodeDetails to reference a pseudo element (what would need to call it w/ a pseudo el? there's no JS way to do that so it would need to be a new function...). basically for ImageElements (for example) we would need to fill in the node property WITHOUT using in-page JS (getNodeDetails).

We also need to update FPS gatherer to use protocol to get rect bounds, since PEs are not js-exposed

[paulirish]

The node id handling is done in the LCP calculator.. https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/paint/timing/largest_contentful_paint_calculator.cc;l=57;drc=7972c3d25cbbd57b38bb275c36c105a7e03bcacb

It's unclear where the psuedo node to parent/host node swap happens.