report: redesign runtime settings

lighthouse-core/scripts/i18n/collect-strings.js

@@ -675,8 +675,6 @@ function resolveMessageCollisions(strings) {
       'Name',
       'Potential Savings',
       'Potential Savings',
-      'URL',
-      'URL',
     ]);
   } catch (err) {
     console.log('The number of duplicate strings has changed. Consider duplicating the `description` to match existing strings so they\'re translated together or update this assertion if they must absolutely be translated separately');

lighthouse-core/test/results/sample_v2.json

@@ -8065,15 +8065,11 @@
       "runtimeNoEmulation": "No emulation",
       "runtimeSettingsAxeVersion": "Axe version",
       "runtimeSettingsBenchmark": "CPU/Memory Power",
-      "runtimeSettingsChannel": "Channel",
       "runtimeSettingsCPUThrottling": "CPU throttling",
-      "runtimeSettingsDevice": "Device",
-      "runtimeSettingsFetchTime": "Fetch Time",
       "runtimeSettingsNetworkThrottling": "Network throttling",
-      "runtimeSettingsTitle": "Runtime Settings",
-      "runtimeSettingsUA": "User agent (host)",
       "runtimeSettingsUANetwork": "User agent (network)",
-      "runtimeSettingsUrl": "URL",
+      "runtimeSingleLoad": "Single page load",
+      "runtimeSingleLoadTooltip": "This data represents a single page load. Field data often summarizes many sessions.",
       "runtimeUnknown": "Unknown",
       "showRelevantAudits": "Show audits relevant to:",
       "snippetCollapseButtonLabel": "Collapse snippet",

lighthouse-core/util-commonjs.js

@@ -390,62 +390,44 @@ class Util {
     return hostname.split('.').slice(-splitTld.length).join('.');
   }
 
-  /**
-   * @param {LH.Result['configSettings']} settings
-   * @return {!Array<{name: string, description: string}>}
-   */
-  static getEnvironmentDisplayValues(settings) {
-    const emulationDesc = Util.getEmulationDescriptions(settings);
-
-    return [
-      {
-        name: Util.i18n.strings.runtimeSettingsDevice,
-        description: emulationDesc.deviceEmulation,
-      },
-      {
-        name: Util.i18n.strings.runtimeSettingsNetworkThrottling,
-        description: emulationDesc.networkThrottling,
-      },
-      {
-        name: Util.i18n.strings.runtimeSettingsCPUThrottling,
-        description: emulationDesc.cpuThrottling,
-      },
-    ];
-  }
 
   /**
    * @param {LH.Result['configSettings']} settings
-   * @return {{deviceEmulation: string, networkThrottling: string, cpuThrottling: string}}
+   * @return {!{deviceEmulation: string, networkThrottling: string, cpuThrottling: string, summary: string}}
    */
   static getEmulationDescriptions(settings) {
     let cpuThrottling;
     let networkThrottling;
+    let summary;
 
     const throttling = settings.throttling;
 
     switch (settings.throttlingMethod) {
       case 'provided':
-        cpuThrottling = Util.i18n.strings.throttlingProvided;
-        networkThrottling = Util.i18n.strings.throttlingProvided;
+        summary = networkThrottling = cpuThrottling = Util.i18n.strings.throttlingProvided;
         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;
+        summary = `${isSlow4G ? 'Slow 4G' : 'Custom'} throttling by DevTools`;
         break;
       }
       case 'simulate': {
         const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
         networkThrottling = `${Util.i18n.formatNumber(rttMs)}${NBSP}ms TCP RTT, ` +
           `${Util.i18n.formatNumber(throughputKbps)}${NBSP}Kbps throughput (Simulated)`;
+        const isSlow4G = rttMs === 150;
+        summary = isSlow4G ? 'Simulated slow 4G' : 'Custom simulated throttling';
         break;
       }
       default:
-        cpuThrottling = Util.i18n.strings.runtimeUnknown;
-        networkThrottling = Util.i18n.strings.runtimeUnknown;
+        summary = cpuThrottling = networkThrottling = Util.i18n.strings.runtimeUnknown;
     }
 
     // TODO(paulirish): revise Runtime Settings strings: https://github.com/GoogleChrome/lighthouse/pull/11796
@@ -458,6 +440,7 @@ class Util {
       deviceEmulation,
       cpuThrottling,
       networkThrottling,
+      summary,
     };
   }
 
@@ -624,22 +607,10 @@ Util.UIStrings = {
   /** Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. */
   dropdownDarkTheme: 'Toggle Dark Theme',
 
-  /** Title of the Runtime settings table in a Lighthouse report.  Runtime settings are the environment configurations that a specific report used at auditing time. */
-  runtimeSettingsTitle: 'Runtime Settings',
-  /** Label for a row in a table that shows the URL that was audited during a Lighthouse run. */
-  runtimeSettingsUrl: 'URL',
-  /** Label for a row in a table that shows the time at which a Lighthouse run was conducted; formatted as a timestamp, e.g. Jan 1, 1970 12:00 AM UTC. */
-  runtimeSettingsFetchTime: 'Fetch Time',
-  /** Label for a row in a table that describes the kind of device that was emulated for the Lighthouse run.  Example values for row elements: 'No Emulation', 'Emulated Desktop', etc. */
-  runtimeSettingsDevice: 'Device',
   /** Label for a row in a table that describes the network throttling conditions that were used during a Lighthouse run, if any. */
   runtimeSettingsNetworkThrottling: 'Network throttling',
   /** Label for a row in a table that describes the CPU throttling conditions that were used during a Lighthouse run, if any.*/
   runtimeSettingsCPUThrottling: 'CPU throttling',
-  /** Label for a row in a table that shows in what tool Lighthouse is being run (e.g. The lighthouse CLI, Chrome DevTools, Lightrider, WebPageTest, etc). */
-  runtimeSettingsChannel: 'Channel',
-  /** Label for a row in a table that shows the User Agent that was detected on the Host machine that ran Lighthouse. */
-  runtimeSettingsUA: 'User agent (host)',
   /** Label for a row in a table that shows the User Agent that was used to send out all network requests during the Lighthouse run. */
   runtimeSettingsUANetwork: 'User agent (network)',
   /** Label for a row in a table that shows the estimated CPU power of the machine running Lighthouse. Example row values: 532, 1492, 783. */
@@ -658,6 +629,10 @@ Util.UIStrings = {
   runtimeDesktopEmulation: 'Emulated Desktop',
   /** Descriptive explanation for a runtime setting that is set to an unknown value. */
   runtimeUnknown: 'Unknown',
+  /** 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
 
   /** Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling. */
   throttlingProvided: 'Provided by environment',

package.json

@@ -23,7 +23,7 @@
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
     "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js && rollup lighthouse-cli/test/fixtures/static-server.js -o dist/lightrider/static-server.js -f commonjs -p commonjs -p node-resolve -e mime-types,glob",
     "build-pack": "bash build/build-pack.sh",
-    "build-report": "node build/build-report-components.js && yarn eslint --fix report/renderer/components.js && node build/build-report.js",
+    "build-report": "node build/build-report-components.js && yarn eslint --fix report/renderer/components.js && node build/build-report.js && bash lighthouse-core/scripts/copy-util-commonjs.sh",
     "build-sample-reports": "yarn build-report && node build/build-sample-reports.js",
     "build-treemap": "node ./build/build-treemap.js",
     "build-viewer": "node ./build/build-viewer.js",

proto/lighthouse-result.proto

@@ -414,11 +414,11 @@ message I18n {
     // Label for a row in a table that describes the kind of device that was
     // emulated for the Lighthouse run.  Example values for row elements: 'No
     // Emulation', 'Emulated Desktop', etc.
-    string runtime_settings_device = 26;
+    string runtime_settings_device = 26 [deprecated = true];
 
     // Label for a row in a table that shows the time at which a Lighthouse run
     // was conducted; formatted as a timestamp, e.g. Jan 1, 1970 12:00 AM UTC.
-    string runtime_settings_fetch_time = 27;
+    string runtime_settings_fetch_time = 27 [deprecated = true];
 
     // Label for a row in a table that describes the network throttling
     // conditions that were used during a Lighthouse run, if any.
@@ -427,19 +427,19 @@ message I18n {
     // Title of the Runtime settings table in a Lighthouse report.  Runtime
     // settings are the environment configurations that a specific report used
     // at auditing time.
-    string runtime_settings_title = 29;
+    string runtime_settings_title = 29 [deprecated = true];
 
     // Label for a row in a table that shows the User Agent that was detected on
     // the Host machine that ran Lighthouse.
-    string runtime_settings_UA = 30;
+    string runtime_settings_UA = 30 [deprecated = true];
 
     // Label for a row in a table that shows the User Agent that was used to
     // send out all network requests during the Lighthouse run.
     string runtime_settings_UA_network = 31;
 
     // Label for a row in a table that shows the URL that was audited during a
     // Lighthouse run.
-    string runtime_settings_Url = 32;
+    string runtime_settings_Url = 32 [deprecated = true];
 
     // Descriptive explanation for a runtime setting that is set to an unknown
     // value.
@@ -488,7 +488,7 @@ message I18n {
     // Label for a row in a table that shows in what tool Lighthouse is being
     // run (e.g. The lighthouse CLI, Chrome DevTools, Lightrider, WebPageTest,
     // etc).
-    string runtime_settings_channel = 44;
+    string runtime_settings_channel = 44 [deprecated = true];
 
     // Text link pointing to the Lighthouse scoring calculator. This link
     // immediately follows a sentence stating the performance score is
@@ -506,6 +506,16 @@ message I18n {
     // chosen, the audits in the report are hidden if they are not relevant to
     // the selected metric.
     string show_relevant_audits = 48;
+
+    // Descriptive label that this analysis run was from a single pageload
+    // of a browser (not a summary of hundreds of loads)
+    string runtime_single_load = 49;
+
+    // Descriptive explanation that this analysis run was from a single pageload
+    // of a browser, whereas field data often summarizes hundreds+ of page loads
+    string runtime_single_load_tooltip = 50;
+
+
   }
 
   // The message holding all formatted strings used in the renderer.