report: redesign runtime settings #13125
Conversation
… from but its useless and svgomg doesnt strip it..
report/renderer/report-renderer.js
Outdated
| 'devices', | ||
| `Lighthouse ${report.lighthouseVersion}, ${envValues.deviceEmulation}`, | ||
| `Host CPU Power: ${report?.environment.benchmarkIndex.toFixed(0)}. ` + | ||
| `CPU throttling: ${envValues.cpuThrottling}. ` + | ||
| `${Util.i18n.strings.runtimeSettingsAxeVersion}: ${axeVersion}`, |
There was a problem hiding this comment.
WDYT about splitting this into three icons:
- Device emulation: Would use this "devices" icon
- CPU throttling: CPU icon (see image)
- Lighthouse version + axe version: Could use a grayscale lighthouse logo
I want to make sure our icon usage is consistent across reports. In the flow report we are currently using the "devices" icon exclusively for emulation settings:
There was a problem hiding this comment.
thanks for flagging this. i hadn't spotted those.
LH icon.. this visual language arose out of a need to differentiate lab/field.. but it wouldnt make sense to have an LH entry in the CrUX one.
cpu + device sharing an entry.. yeah i can somewhat defend this as we're trying to minimize the size of this thing. but.. breaking out CPU Throttling (and benchmark index) would make sense in flow where you have plenty of space.
the other bits i brought up in comments https://docs.google.com/document/d/1W66PKNDdcyNYDHnDBPvplyLAUfozdgk9FAZ3pjGieKA/edit# .. we can iterate there.
connorjclark
changed the title
report/renderer/util.js
Outdated
| /** Descriptive label that this analysis run was from a single pageload of a browser (not a summary of hundreds of loads) */ | ||
| runtimeSingleLoad: 'Single page load', | ||
| /** Descriptive explanation that this analysis run was from a single pageload of a browser, whereas field data often summarizes hundreds+ of page loads */ | ||
| runtimeSingleLoadTooltip: 'This data represents a single page load. Field data often summarizes many sessions.', // eslint-disable-line max-len |
There was a problem hiding this comment.
Slight reword, to make it clear that this is not field data.
| runtimeSingleLoadTooltip: 'This data represents a single page load. Field data often summarizes many sessions.', // eslint-disable-line max-len | |
| runtimeSingleLoadTooltip: 'This data is taken from a single page load, as opposed to field data summarizing many sessions.', // eslint-disable-line max-len |
report/renderer/util.js
Outdated
| break; | ||
| case 'devtools': { | ||
| const {cpuSlowdownMultiplier, requestLatencyMs} = throttling; | ||
| cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`; | ||
| networkThrottling = `${Util.i18n.formatNumber(requestLatencyMs)}${NBSP}ms HTTP RTT, ` + | ||
| `${Util.i18n.formatNumber(throttling.downloadThroughputKbps)}${NBSP}Kbps down, ` + | ||
| `${Util.i18n.formatNumber(throttling.uploadThroughputKbps)}${NBSP}Kbps up (DevTools)`; | ||
|
|
||
| const isSlow4G = requestLatencyMs === 150 * 3.75; |
There was a problem hiding this comment.
Could we use a isSlow4G function here that checks every throttling value, not just rtt?
fixes #10962
"design doc": https://docs.google.com/document/d/1W66PKNDdcyNYDHnDBPvplyLAUfozdgk9FAZ3pjGieKA/edit#
mock, though I've evolved it after working with things for a bit:
screenshot:
Admittedly, this takes some shortcuts with i18n.. but also the runtime settings never got full i18n treatment. (That said, I'd like to rectify that :)