report(flow): network throttling settings

flow-report/src/icons.tsx

@@ -104,6 +104,14 @@ const EnvIcon: FunctionComponent = () => {
   );
 };
 
+const NetworkIcon: FunctionComponent = () => {
+  return (
+    <svg width="16" height="11" viewBox="0 0 16 11" fill="none" role="img">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666687 3.26663L2.00002 4.59997C3.92002 2.67997 6.52669 1.87997 9.02002 2.18663L9.81335 0.399966C6.59335 -0.173367 3.16002 0.779966 0.666687 3.26663ZM10.6 0.599966C10.4867 0.599966 10.3867 0.659966 10.3267 0.753299L10.28 0.853299L6.82669 8.61996C6.72002 8.8133 6.65335 9.02663 6.65335 9.25996C6.65335 9.99996 7.25335 10.6 7.99335 10.6C8.63335 10.6 9.17335 10.1466 9.30002 9.53996L9.30669 9.51997L10.9334 0.933299C10.9334 0.746633 10.7867 0.599966 10.6 0.599966ZM15.3334 3.26663L14 4.59997C13.1867 3.78663 12.2534 3.17997 11.2534 2.76663L11.6067 0.886633C12.9667 1.38663 14.24 2.1733 15.3334 3.26663ZM11.3334 7.26663L12.6667 5.9333C12.1334 5.39997 11.5334 4.98663 10.8934 4.6733L10.5267 6.61997C10.8067 6.79997 11.08 7.0133 11.3334 7.26663ZM4.66669 7.26663L3.33335 5.9333C4.67335 4.5933 6.45335 3.95997 8.20669 4.0133L7.35335 5.9333C6.37335 6.0733 5.42002 6.5133 4.66669 7.26663Z" fill="currentColor"/>
+    </svg>
+  );
+};
+
 const CpuIcon: FunctionComponent = () => {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" role="img">
@@ -137,6 +145,7 @@ export {
   SnapshotIcon,
   CloseIcon,
   EnvIcon,
+  NetworkIcon,
   CpuIcon,
   HamburgerIcon,
   InfoIcon,

flow-report/src/sidebar/sidebar.tsx

@@ -6,9 +6,10 @@
 
 import {FunctionComponent} from 'preact';
 
+import {Util} from '../../../report/renderer/util';
 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';
 
@@ -32,8 +33,10 @@ const SidebarSummary: FunctionComponent = () => {
   );
 };
 
-const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => {
+const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
+({settings}) => {
   const strings = useLocalizedStrings();
+  const env = Util.getEmulationDescriptions(settings);
 
   return (
     <div className="SidebarRuntimeSettings">
@@ -42,9 +45,18 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
           <EnvIcon/>
         </div>
         {
-          settings.formFactor === 'desktop' ?
-            strings.runtimeDesktopEmulation :
-            strings.runtimeMobileEmulation
+          env.deviceEmulation
+        }
+      </div>
+      <div
+        className="SidebarRuntimeSettings__item"
+        title={strings.runtimeSettingsNetworkThrottling}
+      >
+        <div className="SidebarRuntimeSettings__item--icon">
+          <NetworkIcon/>
+        </div>
+        {
+          env.summary
         }
       </div>
       <div className="SidebarRuntimeSettings__item" title={strings.runtimeSettingsCPUThrottling}>
@@ -87,6 +99,7 @@ const Sidebar: FunctionComponent = () => {
 
 export {
   SidebarSummary,
+  SidebarRuntimeSettings,
   SidebarHeader,
   Sidebar,
 };

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(<SidebarRuntimeSettings settings={settings}/>, {wrapper});
+
+    expect(root.getByText('Emulated Moto G4')).toBeTruthy();
+    expect(root.getByText('Slow 4G throttling')).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(<SidebarRuntimeSettings settings={settings}/>, {wrapper});
+
+    expect(root.getByText('Emulated Desktop')).toBeTruthy();
+    expect(root.getByText('Custom throttling')).toBeTruthy();
+    expect(root.getByText('1x slowdown'));
+  });
+});