From a218bf626684584c7f75910d8326bbffbbf9e19a Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Tue, 2 Nov 2021 14:59:56 -0400 Subject: [PATCH 1/3] report(flow): network throttling settings --- flow-report/src/i18n/ui-strings.js | 4 +++ flow-report/src/icons.tsx | 8 +++++ flow-report/src/sidebar/sidebar.tsx | 31 ++++++++++++++-- flow-report/test/sidebar/sidebar-test.tsx | 44 ++++++++++++++++++++++- 4 files changed, 84 insertions(+), 3 deletions(-) diff --git a/flow-report/src/i18n/ui-strings.js b/flow-report/src/i18n/ui-strings.js index ab15a272d95d..094e496d199c 100644 --- a/flow-report/src/i18n/ui-strings.js +++ b/flow-report/src/i18n/ui-strings.js @@ -133,4 +133,8 @@ export const UIStrings = { }`, /** Label for a list of Lighthouse audits that are the most impactful. */ highestImpact: 'Highest impact', + /** Label indicating that Lighthouse throttled the page to emulate a slow 4G network connection. */ + runtimeSlow4g: 'Slow 4G', + /** Label indicating that Lighthouse throttled the page using custom throttling settings. */ + runtimeCustom: 'Custom throttling', }; diff --git a/flow-report/src/icons.tsx b/flow-report/src/icons.tsx index c73ed95c5e06..85814f908d16 100644 --- a/flow-report/src/icons.tsx +++ b/flow-report/src/icons.tsx @@ -104,6 +104,14 @@ export const EnvIcon: FunctionComponent = () => { ); }; +export const NetworkIcon: FunctionComponent = () => { + return ( + + + + ); +}; + export const CpuIcon: FunctionComponent = () => { return ( diff --git a/flow-report/src/sidebar/sidebar.tsx b/flow-report/src/sidebar/sidebar.tsx index 0fcbf13930ba..f36b918b23ed 100644 --- a/flow-report/src/sidebar/sidebar.tsx +++ b/flow-report/src/sidebar/sidebar.tsx @@ -8,10 +8,25 @@ import {FunctionComponent} from 'preact'; import {Separator} from '../common'; import {useI18n, useLocalizedStrings} from '../i18n/i18n'; -import {CpuIcon, EnvIcon, SummaryIcon} from '../icons'; +import {CpuIcon, EnvIcon, NetworkIcon, SummaryIcon} from '../icons'; import {classNames, useHashState, useFlowResult} from '../util'; import {SidebarFlow} from './flow'; +function isSlow4g(settings: LH.ConfigSettings) { + const throttling = settings.throttling; + switch (settings.throttlingMethod) { + case 'devtools': + return throttling.requestLatencyMs === 150 * 3.75 && + throttling.downloadThroughputKbps === 1.6 * 1024 * 0.9 && + throttling.uploadThroughputKbps === 750 * 0.9; + case 'simulate': + return throttling.rttMs === 150 && + throttling.throughputKbps === 1.6 * 1024; + default: + return false; + } +} + export const SidebarSummary: FunctionComponent = () => { const hashState = useHashState(); const strings = useLocalizedStrings(); @@ -32,7 +47,8 @@ export const SidebarSummary: FunctionComponent = () => { ); }; -const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => { +export const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = +({settings}) => { const strings = useLocalizedStrings(); return ( @@ -47,6 +63,17 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = strings.runtimeMobileEmulation } +
+
+ +
+ { + isSlow4g(settings) ? strings.runtimeSlow4g : strings.runtimeCustom + } +
diff --git a/flow-report/test/sidebar/sidebar-test.tsx b/flow-report/test/sidebar/sidebar-test.tsx index a7a7f1d804ba..17087bde36df 100644 --- a/flow-report/test/sidebar/sidebar-test.tsx +++ b/flow-report/test/sidebar/sidebar-test.tsx @@ -8,7 +8,7 @@ import {render} from '@testing-library/preact'; import {FunctionComponent} from 'preact'; import {I18nProvider} from '../../src/i18n/i18n'; -import {SidebarHeader, SidebarSummary} from '../../src/sidebar/sidebar'; +import {SidebarHeader, SidebarRuntimeSettings, SidebarSummary} from '../../src/sidebar/sidebar'; import {FlowResultContext} from '../../src/util'; import {flowResult} from '../sample-flow'; @@ -45,3 +45,45 @@ describe('SidebarSummary', () => { expect(link.classList).toContain('Sidebar--current'); }); }); + +describe('SidebarRuntimeSettings', () => { + it('displays default runtime settings', async () => { + const settings = { + formFactor: 'mobile', + throttlingMethod: 'simulate', + throttling: { + cpuSlowdownMultiplier: 4, + requestLatencyMs: 150 * 3.75, + downloadThroughputKbps: 1.6 * 1024 * 0.9, + uploadThroughputKbps: 750 * 0.9, + throughputKbps: 1.6 * 1024, + rttMs: 150, + }, + } as any; + const root = render(, {wrapper}); + + expect(root.getByText('Emulated Moto G4')).toBeTruthy(); + expect(root.getByText('Slow 4G')).toBeTruthy(); + expect(root.getByText('4x slowdown')); + }); + + it('displays custom runtime settings', async () => { + const settings = { + formFactor: 'desktop', + throttlingMethod: 'devtools', + throttling: { + cpuSlowdownMultiplier: 1, + requestLatencyMs: 1, + downloadThroughputKbps: 1, + uploadThroughputKbps: 1, + throughputKbps: 1, + rttMs: 1, + }, + } as any; + const root = render(, {wrapper}); + + expect(root.getByText('Emulated Desktop')).toBeTruthy(); + expect(root.getByText('Custom throttling')).toBeTruthy(); + expect(root.getByText('1x slowdown')); + }); +}); From c5f43eece005ea7472a262a7cbde15a8c4843a19 Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Tue, 2 Nov 2021 20:04:06 -0400 Subject: [PATCH 2/3] bump --- flow-report/src/i18n/ui-strings.js | 4 ---- flow-report/src/sidebar/sidebar.tsx | 23 ++++------------------- flow-report/test/sidebar/sidebar-test.tsx | 2 +- 3 files changed, 5 insertions(+), 24 deletions(-) diff --git a/flow-report/src/i18n/ui-strings.js b/flow-report/src/i18n/ui-strings.js index 094e496d199c..ab15a272d95d 100644 --- a/flow-report/src/i18n/ui-strings.js +++ b/flow-report/src/i18n/ui-strings.js @@ -133,8 +133,4 @@ export const UIStrings = { }`, /** Label for a list of Lighthouse audits that are the most impactful. */ highestImpact: 'Highest impact', - /** Label indicating that Lighthouse throttled the page to emulate a slow 4G network connection. */ - runtimeSlow4g: 'Slow 4G', - /** Label indicating that Lighthouse throttled the page using custom throttling settings. */ - runtimeCustom: 'Custom throttling', }; diff --git a/flow-report/src/sidebar/sidebar.tsx b/flow-report/src/sidebar/sidebar.tsx index f36b918b23ed..1b66fb712f6f 100644 --- a/flow-report/src/sidebar/sidebar.tsx +++ b/flow-report/src/sidebar/sidebar.tsx @@ -6,27 +6,13 @@ import {FunctionComponent} from 'preact'; +import {Util} from '../../../report/renderer/util'; import {Separator} from '../common'; import {useI18n, useLocalizedStrings} from '../i18n/i18n'; import {CpuIcon, EnvIcon, NetworkIcon, SummaryIcon} from '../icons'; import {classNames, useHashState, useFlowResult} from '../util'; import {SidebarFlow} from './flow'; -function isSlow4g(settings: LH.ConfigSettings) { - const throttling = settings.throttling; - switch (settings.throttlingMethod) { - case 'devtools': - return throttling.requestLatencyMs === 150 * 3.75 && - throttling.downloadThroughputKbps === 1.6 * 1024 * 0.9 && - throttling.uploadThroughputKbps === 750 * 0.9; - case 'simulate': - return throttling.rttMs === 150 && - throttling.throughputKbps === 1.6 * 1024; - default: - return false; - } -} - export const SidebarSummary: FunctionComponent = () => { const hashState = useHashState(); const strings = useLocalizedStrings(); @@ -50,6 +36,7 @@ export const SidebarSummary: FunctionComponent = () => { export const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => { const strings = useLocalizedStrings(); + const env = Util.getEmulationDescriptions(settings); return (
@@ -58,9 +45,7 @@ export const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSetti
{ - settings.formFactor === 'desktop' ? - strings.runtimeDesktopEmulation : - strings.runtimeMobileEmulation + env.deviceEmulation }
{ - isSlow4g(settings) ? strings.runtimeSlow4g : strings.runtimeCustom + env.summary }
diff --git a/flow-report/test/sidebar/sidebar-test.tsx b/flow-report/test/sidebar/sidebar-test.tsx index 17087bde36df..6967050f45c0 100644 --- a/flow-report/test/sidebar/sidebar-test.tsx +++ b/flow-report/test/sidebar/sidebar-test.tsx @@ -63,7 +63,7 @@ describe('SidebarRuntimeSettings', () => { const root = render(, {wrapper}); expect(root.getByText('Emulated Moto G4')).toBeTruthy(); - expect(root.getByText('Slow 4G')).toBeTruthy(); + expect(root.getByText('Slow 4G throttling')).toBeTruthy(); expect(root.getByText('4x slowdown')); }); From c24f9351ed6d761426ac3709c032ed3877fff7dd Mon Sep 17 00:00:00 2001 From: Adam Raine Date: Wed, 3 Nov 2021 11:03:40 -0400 Subject: [PATCH 3/3] fix --- flow-report/src/sidebar/sidebar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/flow-report/src/sidebar/sidebar.tsx b/flow-report/src/sidebar/sidebar.tsx index 7c8f0bd7f8ff..3c39aa77a8ef 100644 --- a/flow-report/src/sidebar/sidebar.tsx +++ b/flow-report/src/sidebar/sidebar.tsx @@ -33,7 +33,7 @@ const SidebarSummary: FunctionComponent = () => { ); }; -export const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = +const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => { const strings = useLocalizedStrings(); const env = Util.getEmulationDescriptions(settings); @@ -99,6 +99,7 @@ const Sidebar: FunctionComponent = () => { export { SidebarSummary, + SidebarRuntimeSettings, SidebarHeader, Sidebar, };