☂️ Element screenshots

[connorjclark]

Initial PR by Matt: #8797

Picking it up again a year later, adding to experimental config

• report: add full-page-screenshot to experimental config #10716

Make full-page-screenshot resistant to layout shifts #11118

• Fix viewport width: core(full-page-screenshot): use layoutViewport width #11402
• Resolving nodes while emulating full-page screenshot: core(full-page-screenshot): resolve node rects during emulation #11536

handle elements beyond MAX_SCREENSHOT_HEIGHT #11121

• do not show element screenshot if out of bounds: report: do not show element screenshot if out of bounds #11538
• use dpr 1: core(full-page-screenshot): use dpr 1 #11688

node linkification in devtools overwrites element screenshot #11828

• Fix in DevTools: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2596168

Misc

• Get MAX_TEXTURE_SIZE from the browser core(full-page-screenshot): get the MAX_TEXTURE_SIZE from the browser #11847
• Handle shadow roots: core(full-page-screenshot): handle ShadowRoots #11852
• Improve element screenshot position, lifecycle, styles report: fix element screenshot position, lifecycle, styles #11846
• Special case full-page-screenshot audit in filtering: core(config): special case full-page-screenshot audit in filtering #11829
• Drop max datauri size constraints core(full-page-screenshot): drop max datauri size constraints #11689
• Simplify details shape: core(full-page-screenshot): simplify details shape #11768
• Move to default config: core(full-page-screenshot): move to default config #11769

PSI:

• Use css variable for element screenshot report: css var for FPS, move overlay to container #12201
• Enable in PSI

More

• core(full-page-screenshot): wait for doubleraf, network quiet #13663