lighthouse 9.5.0-dev.20220426 → 9.5.0-dev.20220427

package/lighthouse-cli/test/smokehouse/frontends/lib.js

@@ -12,13 +12,11 @@
 
 /* eslint-disable no-console */
 
-import _ from 'lodash';
+import cloneDeep from 'lodash/cloneDeep.js';
 
 import smokeTests from '../core-tests.js';
 import {runSmokehouse, getShardedDefinitions} from '../smokehouse.js';
 
-const {cloneDeep} = _;
-
 /**
  * @param {Smokehouse.SmokehouseLibOptions} options
  */

package/lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js

@@ -16,7 +16,7 @@ import path from 'path';
 import fs from 'fs';
 import url from 'url';
 
-import _ from 'lodash';
+import cloneDeep from 'lodash/cloneDeep.js';
 import yargs from 'yargs';
 import * as yargsHelpers from 'yargs/helpers';
 import log from 'lighthouse-logger';
@@ -25,8 +25,6 @@ import {runSmokehouse, getShardedDefinitions} from '../smokehouse.js';
 import {updateTestDefnFormat} from './back-compat-util.js';
 import {LH_ROOT} from '../../../../root.js';
 
-const {cloneDeep} = _;
-
 const coreTestDefnsPath =
   path.join(LH_ROOT, 'lighthouse-cli/test/smokehouse/core-tests.js');
 

package/lighthouse-cli/test/smokehouse/report-assert.js

@@ -9,14 +9,12 @@
  * against the results actually collected from Lighthouse.
  */
 
-import _ from 'lodash';
+import cloneDeep from 'lodash/cloneDeep.js';
 import log from 'lighthouse-logger';
 
 import {LocalConsole} from './lib/local-console.js';
 import {chromiumVersionCheck} from './version-check.js';
 
-const {cloneDeep} = _;
-
 /**
  * @typedef Difference
  * @property {string} path

package/lighthouse-core/audits/deprecations.js

@@ -7,12 +7,8 @@
 
 /**
  * @fileoverview Audits a page to determine if it is calling deprecated APIs.
- * This is done by collecting console log messages and filtering them by ones
- * that contain deprecated API warnings sent by Chrome.
  */
 
-// TODO: when M97 is sufficiently old, drop support for console messages
-
 const Audit = require('./audit.js');
 const JsBundles = require('../computed/js-bundles.js');
 const i18n = require('../lib/i18n/i18n.js');
@@ -48,7 +44,7 @@ class Deprecations extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['ConsoleMessages', 'InspectorIssues', 'SourceMaps', 'Scripts'],
+      requiredArtifacts: ['InspectorIssues', 'SourceMaps', 'Scripts'],
     };
   }
 
@@ -58,35 +54,21 @@ class Deprecations extends Audit {
    * @return {Promise<LH.Audit.Product>}
    */
   static async audit(artifacts, context) {
-    const entries = artifacts.ConsoleMessages;
     const bundles = await JsBundles.request(artifacts, context);
 
-    let deprecations;
-    if (artifacts.InspectorIssues.deprecationIssue.length) {
-      deprecations = artifacts.InspectorIssues.deprecationIssue
-        // TODO: translate these strings.
-        // see https://github.com/GoogleChrome/lighthouse/issues/13895
-        .filter(deprecation => !deprecation.type || deprecation.type === 'Untranslated')
-        .map(deprecation => {
-          const {scriptId, url, lineNumber, columnNumber} = deprecation.sourceCodeLocation;
-          const bundle = bundles.find(bundle => bundle.script.scriptId === scriptId);
-          return {
-            value: deprecation.message || '',
-            // Protocol.Audits.SourceCodeLocation.columnNumber is 1-indexed, but we use 0-indexed.
-            source: Audit.makeSourceLocation(url, lineNumber, columnNumber - 1, bundle),
-          };
-        });
-    } else {
-      // Backcompat for <M97.
-      // https://bugs.chromium.org/p/chromium/issues/detail?id=1248484
-      deprecations = entries.filter(log => log.source === 'deprecation')
-        .map(log => {
-          return {
-            value: log.text,
-            source: Audit.makeSourceLocationFromConsoleMessage(log),
-          };
-        });
-    }
+    const deprecations = artifacts.InspectorIssues.deprecationIssue
+      // TODO: translate these strings.
+      // see https://github.com/GoogleChrome/lighthouse/issues/13895
+      .filter(deprecation => !deprecation.type || deprecation.type === 'Untranslated')
+      .map(deprecation => {
+        const {scriptId, url, lineNumber, columnNumber} = deprecation.sourceCodeLocation;
+        const bundle = bundles.find(bundle => bundle.script.scriptId === scriptId);
+        return {
+          value: deprecation.message || '',
+          // Protocol.Audits.SourceCodeLocation.columnNumber is 1-indexed, but we use 0-indexed.
+          source: Audit.makeSourceLocation(url, lineNumber, columnNumber - 1, bundle),
+        };
+      });
 
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [

package/lighthouse-core/audits/metrics/experimental-interaction-to-next-paint.js

@@ -0,0 +1,84 @@
+/**
+ * @license Copyright 2022 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const Audit = require('../audit.js');
+const ComputedResponsivenes = require('../../computed/metrics/responsiveness.js');
+const i18n = require('../../lib/i18n/i18n.js');
+
+const UIStrings = {
+  /** Description of the Interaction to Next Paint metric. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'Interaction to Next Paint measures page responsiveness, how long it ' +
+               'takes the page to visibly respond to user input. [Learn more](https://web.dev/inp/).',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+/**
+ * @fileoverview This metric gives a high-percentile measure of responsiveness to input.
+ */
+class ExperimentalInteractionToNextPaint extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'experimental-interaction-to-next-paint',
+      title: str_(i18n.UIStrings.interactionToNextPaint),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      supportedModes: ['timespan'],
+      requiredArtifacts: ['traces'],
+    };
+  }
+
+  /**
+   * @return {LH.Audit.ScoreOptions}
+   */
+  static get defaultOptions() {
+    return {
+      // https://web.dev/inp/
+      // This is using the same threshold as field tools since only supported in
+      // unsimulated user flows for now.
+      // see https://www.desmos.com/calculator/4xtrhg51th
+      p10: 200,
+      median: 500,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const {settings} = context;
+    // TODO: responsiveness isn't yet supported by lantern.
+    if (settings.throttlingMethod === 'simulate') {
+      return {score: null, notApplicable: true};
+    }
+
+    const trace = artifacts.traces[Audit.DEFAULT_PASS];
+    const metricData = {trace, settings};
+    const metricResult = await ComputedResponsivenes.request(metricData, context);
+
+    // TODO: include the no-interaction state in the report instead of using n/a.
+    if (metricResult === null) {
+      return {score: null, notApplicable: true};
+    }
+
+    return {
+      score: Audit.computeLogNormalScore({p10: context.options.p10, median: context.options.median},
+        metricResult.timing),
+      numericValue: metricResult.timing,
+      numericUnit: 'millisecond',
+      displayValue: str_(i18n.UIStrings.ms, {timeInMs: metricResult.timing}),
+    };
+  }
+}
+
+module.exports = ExperimentalInteractionToNextPaint;
+module.exports.UIStrings = UIStrings;

package/lighthouse-core/computed/metrics/responsiveness.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright 2022 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+/**
+ * @fileoverview Returns a high-percentle (usually 98th) measure of how long it
+ * takes the page to visibly respond to user input (or null, if there was no
+ * user input in the provided trace).
+ */
+
+const makeComputedArtifact = require('../computed-artifact.js');
+const ProcessedTrace = require('../processed-trace.js');
+
+class Responsiveness {
+  /**
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @return {{timing: number}|null}
+   */
+  static getHighPercentileResponsiveness(processedTrace) {
+    const durations = processedTrace.frameTreeEvents
+      // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/responsiveness_metrics.cc;l=146-150;drc=a1a2302f30b0a58f7669a41c80acdf1fa11958dd
+      .filter(e => e.name === 'Responsiveness.Renderer.UserInteraction')
+      .map(evt => evt.args.data?.maxDuration)
+      .filter(/** @return {duration is number} */duration => duration !== undefined)
+      .sort((a, b) => b - a);
+
+    // If there were no interactions with the page, the metric is N/A.
+    if (durations.length === 0) {
+      return null;
+    }
+
+    // INP is the "nearest-rank"/inverted_cdf 98th percentile, except Chrome only
+    // keeps the 10 worst events around, so it can never be more than the 10th from
+    // last array element. To keep things simpler, sort desc and pick from front.
+    // See https://source.chromium.org/chromium/chromium/src/+/main:components/page_load_metrics/browser/responsiveness_metrics_normalization.cc;l=45-59;drc=cb0f9c8b559d9c7c3cb4ca94fc1118cc015d38ad
+    const index = Math.min(9, Math.floor(durations.length / 50));
+
+    return {
+      timing: durations[index],
+    };
+  }
+
+  /**
+   * @param {{trace: LH.Trace, settings: Immutable<LH.Config.Settings>}} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<LH.Artifacts.Metric|null>}
+   */
+  static async compute_(data, context) {
+    if (data.settings.throttlingMethod === 'simulate') {
+      throw new Error('Responsiveness currently unsupported by simulated throttling');
+    }
+
+    const processedTrace = await ProcessedTrace.request(data.trace, context);
+    return Responsiveness.getHighPercentileResponsiveness(processedTrace);
+  }
+}
+
+module.exports = makeComputedArtifact(Responsiveness, [
+  'trace',
+  'settings',
+]);

package/lighthouse-core/config/config-helpers.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const path = require('path');
-const {isEqual: isDeepEqual} = require('lodash');
+const isDeepEqual = require('lodash/isEqual.js');
 const constants = require('./constants.js');
 const Budget = require('./budget.js');
 const ConfigPlugin = require('./config-plugin.js');

package/lighthouse-core/fraggle-rock/config/default-config.js

@@ -11,12 +11,14 @@ const {deepClone} = require('../../config/config-helpers.js');
 /** @type {LH.Config.AuditJson[]} */
 const frAudits = [
   'byte-efficiency/uses-responsive-images-snapshot',
+  'metrics/experimental-interaction-to-next-paint',
 ];
 
 /** @type {Record<string, LH.Config.AuditRefJson[]>} */
 const frCategoryAuditRefExtensions = {
   'performance': [
     {id: 'uses-responsive-images-snapshot', weight: 0},
+    {id: 'experimental-interaction-to-next-paint', weight: 0, group: 'metrics', acronym: 'INP'},
   ],
 };
 

package/lighthouse-core/fraggle-rock/gather/base-artifacts.js

@@ -6,7 +6,7 @@
 'use strict';
 
 const log = require('lighthouse-logger');
-const {isEqual} = require('lodash');
+const isDeepEqual = require('lodash/isEqual.js');
 const {
   getBrowserVersion,
   getBenchmarkIndex,
@@ -61,7 +61,7 @@ function deduplicateWarnings(warnings) {
   const unique = [];
 
   for (const warning of warnings) {
-    if (unique.some(existing => isEqual(warning, existing))) continue;
+    if (unique.some(existing => isDeepEqual(warning, existing))) continue;
     unique.push(warning);
   }
 

package/lighthouse-core/lib/arbitrary-equality-map.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const {isEqual} = require('lodash');
+const isDeepEqual = require('lodash/isEqual.js');
 
 /**
  * @fileoverview This class is designed to allow maps with arbitrary equality functions.
@@ -74,7 +74,7 @@ class ArbitraryEqualityMap {
    * @return {boolean}
    */
   static deepEquals(objA, objB) {
-    return isEqual(objA, objB);
+    return isDeepEqual(objA, objB);
   }
 }
 

package/lighthouse-core/lib/i18n/i18n.js

@@ -105,6 +105,8 @@ const UIStrings = {
   largestContentfulPaintMetric: 'Largest Contentful Paint',
   /** The name of the metric "Cumulative Layout Shift" that indicates how much the page changes its layout while it loads. If big segments of the page shift their location during load, the Cumulative Layout Shift will be higher. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */
   cumulativeLayoutShiftMetric: 'Cumulative Layout Shift',
+  /** The name of the "Interaction to Next Paint" metric that measures the time between a user interaction and when the browser displays a response on screen. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */
+  interactionToNextPaint: 'Interaction to Next Paint',
   /** Table item value for the severity of a small, or low impact vulnerability. Part of a ranking scale in the form: low, medium, high. */
   itemSeverityLow: 'Low',
   /** Table item value for the severity of a vulnerability. Part of a ranking scale in the form: low, medium, high. */

package/lighthouse-core/lib/minify-trace.js

@@ -44,6 +44,8 @@ const traceEventsToAlwaysKeep = new Set([
   'EventDispatch',
   'LayoutShift',
   'FrameCommittedInBrowser',
+  'EventTiming',
+  'Responsiveness.Renderer.UserInteraction',
   // Not currently used by Lighthouse but might be used in the future for cross-frame LCP
   'NavStartToLargestContentfulPaint::Invalidate::AllFrames::UKM',
   'NavStartToLargestContentfulPaint::Candidate::AllFrames::UKM',

package/lighthouse-core/runner.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const {isEqual: isDeepEqual} = require('lodash');
+const isDeepEqual = require('lodash/isEqual.js');
 const Driver = require('./gather/driver.js');
 const GatherRunner = require('./gather/gather-runner.js');
 const ReportScoring = require('./scoring.js');

package/lighthouse-core/util-commonjs.js

@@ -433,11 +433,9 @@ class Util {
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
-        // TODO: better api in i18n formatter such that this isn't needed.
-        const cpuGranularity = Number.isInteger(cpuSlowdownMultiplier) ? 1 : 0.1;
         // eslint-disable-next-line max-len
-        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier, cpuGranularity)}x slowdown (DevTools)`;
-        networkThrottling = `${Util.i18n.formatMilliseconds(requestLatencyMs, 1)} HTTP RTT, ` +
+        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`;
+        networkThrottling = `${Util.i18n.formatMilliseconds(requestLatencyMs)} HTTP RTT, ` +
           `${Util.i18n.formatKbps(throttling.downloadThroughputKbps)} down, ` +
           `${Util.i18n.formatKbps(throttling.uploadThroughputKbps)} up (DevTools)`;
 
@@ -451,10 +449,8 @@ class Util {
       }
       case 'simulate': {
         const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
-        // TODO: better api in i18n formatter such that this isn't needed.
-        const cpuGranularity = Number.isInteger(cpuSlowdownMultiplier) ? 1 : 0.1;
         // eslint-disable-next-line max-len
-        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier, cpuGranularity)}x slowdown (Simulated)`;
+        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
         networkThrottling = `${Util.i18n.formatMilliseconds(rttMs)} TCP RTT, ` +
           `${Util.i18n.formatKbps(throughputKbps)} throughput (Simulated)`;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220426",
+  "version": "9.5.0-dev.20220427",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/report/renderer/details-renderer.js

@@ -78,9 +78,8 @@ export class DetailsRenderer {
    * @return {Element}
    */
   _renderBytes(details) {
-    // TODO: handle displayUnit once we have something other than 'kb'
-    // Note that 'kb' is historical and actually represents KiB.
-    const value = Util.i18n.formatBytesToKiB(details.value, details.granularity);
+    // TODO: handle displayUnit once we have something other than 'KiB'
+    const value = Util.i18n.formatBytesToKiB(details.value, details.granularity || 0.1);
     const textEl = this._renderText(value);
     textEl.title = Util.i18n.formatBytes(details.value);
     return textEl;
@@ -91,9 +90,11 @@ export class DetailsRenderer {
    * @return {Element}
    */
   _renderMilliseconds(details) {
-    let value = Util.i18n.formatMilliseconds(details.value, details.granularity);
+    let value;
     if (details.displayUnit === 'duration') {
       value = Util.i18n.formatDuration(details.value);
+    } else {
+      value = Util.i18n.formatMilliseconds(details.value, details.granularity || 10);
     }
 
     return this._renderText(value);
@@ -172,7 +173,7 @@ export class DetailsRenderer {
    * @return {Element}
    */
   _renderNumeric(details) {
-    const value = Util.i18n.formatNumber(details.value, details.granularity);
+    const value = Util.i18n.formatNumber(details.value, details.granularity || 0.1);
     const element = this._dom.createElement('div', 'lh-numeric');
     element.textContent = value;
     return element;

package/report/renderer/i18n.js

@@ -31,26 +31,31 @@ export class I18n {
 
   /**
    * @param {number} number
-   * @param {number} granularity
-   * @param {Intl.NumberFormatOptions} opts
+   * @param {number|undefined} granularity
+   * @param {Intl.NumberFormatOptions=} opts
    * @return {string}
    */
   _formatNumberWithGranularity(number, granularity, opts = {}) {
-    opts = {...opts};
-    const log10 = -Math.log10(granularity);
-    if (!Number.isFinite(log10) || (granularity > 1 && !Number.isInteger(log10))) {
-      console.warn(`granularity of ${granularity} is invalid, defaulting to value of 1`);
-      granularity = 1;
-    }
+    if (granularity !== undefined) {
+      const log10 = -Math.log10(granularity);
+      if (!Number.isInteger(log10)) {
+        console.warn(`granularity of ${granularity} is invalid. Using 1 instead`);
+        granularity = 1;
+      }
 
-    if (granularity < 1) {
-      opts.minimumFractionDigits = opts.maximumFractionDigits = Math.ceil(log10);
-    }
+      if (granularity < 1) {
+        opts = {...opts};
+        opts.minimumFractionDigits = opts.maximumFractionDigits = Math.ceil(log10);
+      }
 
-    number = Math.round(number / granularity) * granularity;
+      number = Math.round(number / granularity) * granularity;
 
-    // Avoid displaying a negative value that rounds to zero as "0".
-    if (Object.is(number, -0)) number = 0;
+      // Avoid displaying a negative value that rounds to zero as "0".
+      if (Object.is(number, -0)) number = 0;
+    } else if (Math.abs(number) < 0.0005) {
+      // Also avoids "-0".
+      number = 0;
+    }
 
     return new Intl.NumberFormat(this._locale, opts).format(number).replace(' ', NBSP2);
   }
@@ -58,10 +63,12 @@ export class I18n {
   /**
    * Format number.
    * @param {number} number
-   * @param {number=} granularity Number of decimal places to include. Defaults to 0.1.
+   * @param {number=} granularity Controls how coarse the displayed value is.
+   *                              If undefined, the number will be displayed as described
+   *                              by the Intl defaults: tinyurl.com/7s67w5x7
    * @return {string}
    */
-  formatNumber(number, granularity = 0.1) {
+  formatNumber(number, granularity) {
     return this._formatNumberWithGranularity(number, granularity);
   }
 
@@ -87,25 +94,28 @@ export class I18n {
 
   /**
    * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
+   * @param {number=} granularity Controls how coarse the displayed value is.
+   *                              If undefined, the number will be displayed in full.
    * @return {string}
    */
-  formatBytesToKiB(size, granularity = 0.1) {
+  formatBytesToKiB(size, granularity = undefined) {
     return this._formatNumberWithGranularity(size / KiB, granularity) + `${NBSP2}KiB`;
   }
 
   /**
    * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
+   * @param {number=} granularity Controls how coarse the displayed value is.
+   *                              If undefined, the number will be displayed in full.
    * @return {string}
    */
-  formatBytesToMiB(size, granularity = 0.1) {
+  formatBytesToMiB(size, granularity = undefined) {
     return this._formatNumberWithGranularity(size / MiB, granularity) + `${NBSP2}MiB`;
   }
 
   /**
    * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 1
+   * @param {number=} granularity Controls how coarse the displayed value is.
+   *                              If undefined, the number will be displayed in full.
    * @return {string}
    */
   formatBytes(size, granularity = 1) {
@@ -118,10 +128,11 @@ export class I18n {
 
   /**
    * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
+   * @param {number=} granularity Controls how coarse the displayed value is.
+   *                              If undefined, the number will be displayed in full.
    * @return {string}
    */
-  formatBytesWithBestUnit(size, granularity = 0.1) {
+  formatBytesWithBestUnit(size, granularity = undefined) {
     if (size >= MiB) return this.formatBytesToMiB(size, granularity);
     if (size >= KiB) return this.formatBytesToKiB(size, granularity);
     return this._formatNumberWithGranularity(size, granularity, {
@@ -133,10 +144,11 @@ export class I18n {
 
   /**
    * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 1
+   * @param {number=} granularity Controls how coarse the displayed value is.
+   *                              If undefined, the number will be displayed in full.
    * @return {string}
    */
-  formatKbps(size, granularity = 1) {
+  formatKbps(size, granularity = undefined) {
     return this._formatNumberWithGranularity(size, granularity, {
       style: 'unit',
       unit: 'kilobit-per-second',
@@ -146,10 +158,11 @@ export class I18n {
 
   /**
    * @param {number} ms
-   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 10
+   * @param {number=} granularity Controls how coarse the displayed value is.
+   *                              If undefined, the number will be displayed in full.
    * @return {string}
    */
-  formatMilliseconds(ms, granularity = 10) {
+  formatMilliseconds(ms, granularity = undefined) {
     return this._formatNumberWithGranularity(ms, granularity, {
       style: 'unit',
       unit: 'millisecond',
@@ -159,10 +172,11 @@ export class I18n {
 
   /**
    * @param {number} ms
-   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
+   * @param {number=} granularity Controls how coarse the displayed value is.
+   *                              If undefined, the number will be displayed in full.
    * @return {string}
    */
-  formatSeconds(ms, granularity = 0.1) {
+  formatSeconds(ms, granularity = undefined) {
     return this._formatNumberWithGranularity(ms / 1000, granularity, {
       style: 'unit',
       unit: 'second',

package/report/renderer/util.js

@@ -429,11 +429,9 @@ class Util {
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
-        // TODO: better api in i18n formatter such that this isn't needed.
-        const cpuGranularity = Number.isInteger(cpuSlowdownMultiplier) ? 1 : 0.1;
         // eslint-disable-next-line max-len
-        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier, cpuGranularity)}x slowdown (DevTools)`;
-        networkThrottling = `${Util.i18n.formatMilliseconds(requestLatencyMs, 1)} HTTP RTT, ` +
+        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`;
+        networkThrottling = `${Util.i18n.formatMilliseconds(requestLatencyMs)} HTTP RTT, ` +
           `${Util.i18n.formatKbps(throttling.downloadThroughputKbps)} down, ` +
           `${Util.i18n.formatKbps(throttling.uploadThroughputKbps)} up (DevTools)`;
 
@@ -447,10 +445,8 @@ class Util {
       }
       case 'simulate': {
         const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
-        // TODO: better api in i18n formatter such that this isn't needed.
-        const cpuGranularity = Number.isInteger(cpuSlowdownMultiplier) ? 1 : 0.1;
         // eslint-disable-next-line max-len
-        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier, cpuGranularity)}x slowdown (Simulated)`;
+        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
         networkThrottling = `${Util.i18n.formatMilliseconds(rttMs)} TCP RTT, ` +
           `${Util.i18n.formatKbps(throughputKbps)} throughput (Simulated)`;