"Avoids an excessive DOM size" audit shows NaN when it exceeds 1000

[sisidovski]

Provide the steps to reproduce

1. Run LH on https://www.yahoo.co.jp/ with desktop mode like this ./lighthouse-cli/index.js https://www.yahoo.co.jp/ --view --emulated-form-factor=desktop
2. See dom-size audit in HTML report

What is the current behavior?

When the number of total DOM size proceeds 1000, the Lighthouse HTML results shows NaN in the table.

What is the expected behavior?

Formatted number should be appeared, which is 1,114

I think it can be fixed by removing i18n.formatNumber in the audit from here. Currently formatNumber is called twice in here and details-renderer, which is injected to HTML report.

Environment Information

• Affected Channels: Node, DevTools etc
• Lighthouse version: 6.4.1
• Chrome version: 86.0.4240.75
• Node.js version: v12.16.1
• Operating System: MacOS

Related issues

[adamraine]

@sisidovski I think your assessment is correct. Looks like we need to address this TODO.

lighthouse/lighthouse-core/audits/dobetterweb/dom-size.js

Lines 98 to 104 in 8caa938

	const items = [
	{
	statistic: str_(UIStrings.statisticDOMElements),
	element: '',
	// TODO: these values should be numbers once `_renderNumeric` in details-renderer can handle them
	value: i18n.formatNumber(stats.totalBodyElements),
	},