core(fr): convert image-elements gatherer

[adamraine]

Opening as a draft to get some initial thoughts on the new test file which is not exhaustive yet. I restructured ImageElements a bit to make it easier to test.

Ref #11313

[patrickhulce]

This restructure is definitely an improvement, IMO, so this draft LGTM to polish if this is the first step we'd like to take here. We will eventually have to be much more aggressive with restructuring this gatherer to make it work well for other modes, but understood if you'd prefer to do it in small chunks 👍

I'll also throw out #12077 in case there was anything you were looking at restructuring that aligns with imminent breaking change work we'd like to tackle.

[patrickhulce]

FWIW isPicture and isCss should never be true at the same time.

[adamraine]

I'm pretty sure the function this is testing is bugged. networkRecord will always be true because {} is truthy.

[adamraine]

Possible second bug:

lighthouse/lighthouse-core/gather/gatherers/image-elements.js

Lines 235 to 239 in 8769ff8

	async fetchElementWithSizeInformation(driver, element) {
	const url = element.src;
	if (this._naturalSizeCache.has(url)) {
	Object.assign(element, this._naturalSizeCache.get(url));
	}

Shouldn't we return after the cache hit?

[patrickhulce]

heh, whoops, yes indeed @adamraine . at least that's a new one

[patrickhulce]

oh wait now that you mention it both of those little bugs come from that PR, both quite new then :)

[connorjclark]

also LGTM, nice job!

[connorjclark]

👀

[patrickhulce]

nice work!