HTML Report renderer incorrect labels for custom throttling & device

[benschwarz]

Provide the steps to reproduce

1. Configure lighthouse to run with custom throttling settings, mark the throttling method as devtools, mark the emulatedFormFactor as "none"
2. Run LH on [any url]
3. Load the report JSON into lighthouse-viewer

What is the current behaviour?

• The network throttling summary is hardcoded to "Throttled Slow 4G network"
• The device summary is hardcoded to "No emulation"
• The device summary, is technically correct (emulated form factor set to none), but the other configuration options for emulatedFormFactor (mobile, desktop) will result in a hardcoded value of either "Emulated Nexus 5X" or "Emulated Desktop"

What is the expected behaviour?

• Network throttling summary should describe the network settings used
• Device summary should describe the device used

Environment Information

• Affected Channels: Node
• Lighthouse version: 4.0.0
• Node.js version: 11
• Operating System: All

Reference: renderer/util.js#getEmulationDescriptions (Link)

[paulirish]

@benschwarz wanna give this PR a shot?

[paulirish]

So we thought of two options for this today

1. you set config.throttlingMethod to provided but then you also set the rest of the config settings. in the report we can then construct the same sort of strings.. just with "(Provided)" or something... like:

We think it's a little weird that you are providing all the configuration for throttling but also telling LH to not use the config (except for creating this text string). But.. it's something.

2. We add config settings for you to provide those strings directly.

Maybe... providedDeviceString, providedNetworkThrottlingString, providedCPUThrottlingString and they just end up right there in the report area. Pretty explicit and kinda dirty but... you get control.

Maybe there's a third option too.

cc @wildlyinaccurate @alekseykulikov @mattzeunert in case ya'll want to tweak how the LH report runtime settings are displayed