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

package/report/test/renderer/details-renderer-test.js

@@ -86,6 +86,55 @@ describe('DetailsRenderer', () => {
           '--thumbnail not set');
     });
 
+    it('renders with default granularity', () => {
+      const el = renderer.render({
+        type: 'table',
+        headings: [
+          {text: '', key: 'bytes', itemType: 'bytes'},
+          {text: '', key: 'numeric', itemType: 'numeric'},
+          {text: '', key: 'ms', itemType: 'ms'},
+          // Verify that 0 is ignored.
+          {text: '', key: 'ms', itemType: 'ms', granularity: 0},
+        ],
+        items: [
+          {
+            bytes: 1234.567,
+            numeric: 1234.567,
+            ms: 1234.567,
+          },
+        ],
+      });
+
+      assert.equal(el.querySelectorAll('td').length, 4, 'did not render table cells');
+      assert.equal(el.querySelectorAll('td')[0].textContent, '1.2\xa0KiB');
+      assert.equal(el.querySelectorAll('td')[1].textContent, '1,234.6');
+      assert.equal(el.querySelectorAll('td')[2].textContent, '1,230\xa0ms');
+      assert.equal(el.querySelectorAll('td')[3].textContent, '1,230\xa0ms');
+    });
+
+    it('renders with custom granularity', () => {
+      const el = renderer.render({
+        type: 'table',
+        headings: [
+          {text: '', key: 'bytes', itemType: 'bytes', granularity: 0.01},
+          {text: '', key: 'numeric', itemType: 'numeric', granularity: 100},
+          {text: '', key: 'ms', itemType: 'ms', granularity: 1},
+        ],
+        items: [
+          {
+            bytes: 1234.567,
+            numeric: 1234.567,
+            ms: 1234.567,
+          },
+        ],
+      });
+
+      assert.equal(el.querySelectorAll('td').length, 3, 'did not render table cells');
+      assert.equal(el.querySelectorAll('td')[0].textContent, '1.21\xa0KiB');
+      assert.equal(el.querySelectorAll('td')[1].textContent, '1,200');
+      assert.equal(el.querySelectorAll('td')[2].textContent, '1,235\xa0ms');
+    });
+
     it('renders critical request chains', () => {
       const details = {
         type: 'criticalrequestchain',

package/report/test/renderer/i18n-test.js

@@ -21,9 +21,27 @@ const NBSP = '\xa0';
 describe('util helpers', () => {
   it('formats a number', () => {
     const i18n = new I18n('en', {...Util.UIStrings});
-    assert.strictEqual(i18n.formatNumber(10), '10.0');
-    assert.strictEqual(i18n.formatNumber(100.01), '100.0');
-    assert.strictEqual(i18n.formatNumber(13000.456), '13,000.5');
+    assert.strictEqual(i18n.formatNumber(10), '10');
+    assert.strictEqual(i18n.formatNumber(100.01), '100.01');
+    assert.strictEqual(i18n.formatNumber(13000.456), '13,000.456');
+    assert.strictEqual(i18n.formatNumber(13000.456444), '13,000.456');
+
+    assert.strictEqual(i18n.formatNumber(10, 0.1), '10.0');
+    assert.strictEqual(i18n.formatNumber(100.01, 0.1), '100.0');
+    assert.strictEqual(i18n.formatNumber(13000.456, 0.1), '13,000.5');
+
+    assert.strictEqual(i18n.formatNumber(0), '0');
+    assert.strictEqual(i18n.formatNumber(-0), '0');
+    assert.strictEqual(i18n.formatNumber(-0, 0.1), '0.0');
+    assert.strictEqual(i18n.formatNumber(0.000001), '0');
+    assert.strictEqual(i18n.formatNumber(-0.000001), '0');
+    assert.strictEqual(i18n.formatNumber(0.000001, 0.1), '0.0');
+    assert.strictEqual(i18n.formatNumber(-0.000001, 0.1), '0.0');
+
+    assert.strictEqual(i18n.formatNumber(10), '10');
+    assert.strictEqual(i18n.formatNumber(100.01), '100.01');
+    assert.strictEqual(i18n.formatNumber(13000.456, 0.1), '13,000.5');
+
     assert.strictEqual(i18n.formatInteger(10), '10');
     assert.strictEqual(i18n.formatInteger(100.01), '100');
     assert.strictEqual(i18n.formatInteger(13000.6), '13,001');
@@ -41,9 +59,10 @@ describe('util helpers', () => {
 
   it('formats bytes', () => {
     const i18n = new I18n('en', {...Util.UIStrings});
-    assert.equal(i18n.formatBytesToKiB(100), `0.1${NBSP}KiB`);
-    assert.equal(i18n.formatBytesToKiB(2000), `2.0${NBSP}KiB`);
-    assert.equal(i18n.formatBytesToKiB(1014 * 1024), `1,014.0${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(100), `0.098${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(100, 0.1), `0.1${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(2000, 0.1), `2.0${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(1014 * 1024, 0.1), `1,014.0${NBSP}KiB`);
   });
 
   it('formats bytes with different granularities', () => {
@@ -59,11 +78,6 @@ describe('util helpers', () => {
     assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15${NBSP}bytes`);
     assert.strictEqual(i18n.formatBytes(15.54321, granularity), `16${NBSP}bytes`);
 
-    granularity = 0.5;
-    assert.strictEqual(i18n.formatBytes(15.0, granularity), `15.0${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15.0${NBSP}bytes`);
-    assert.strictEqual(i18n.formatBytes(15.54321, granularity), `15.5${NBSP}bytes`);
-
     granularity = 0.1;
     assert.strictEqual(i18n.formatBytes(15.0, granularity), `15.0${NBSP}bytes`);
     assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15.1${NBSP}bytes`);
@@ -75,6 +89,21 @@ describe('util helpers', () => {
     assert.strictEqual(i18n.formatBytes(15.19999, granularity), `15.20${NBSP}bytes`);
   });
 
+  it('formats bytes with invalid granularity', () => {
+    const i18n = new I18n('en', {...Util.UIStrings});
+    const granularity = 0.5;
+    const originalWarn = console.warn;
+
+    try {
+      console.warn = () => {};
+      assert.strictEqual(i18n.formatBytes(15.0, granularity), `15${NBSP}bytes`);
+      assert.strictEqual(i18n.formatBytes(15.12345, granularity), `15${NBSP}bytes`);
+      assert.strictEqual(i18n.formatBytes(15.54321, granularity), `16${NBSP}bytes`);
+    } finally {
+      console.warn = originalWarn;
+    }
+  });
+
   it('formats kibibytes with different granularities', () => {
     const i18n = new I18n('en', {...Util.UIStrings});
 
@@ -95,7 +124,7 @@ describe('util helpers', () => {
 
   it('formats ms', () => {
     const i18n = new I18n('en', {...Util.UIStrings});
-    assert.equal(i18n.formatMilliseconds(123), `120${NBSP}ms`);
+    assert.equal(i18n.formatMilliseconds(123, 10), `120${NBSP}ms`);
     assert.equal(i18n.formatMilliseconds(2456.5, 0.1), `2,456.5${NBSP}ms`);
     assert.equal(i18n.formatMilliseconds(0.000001), `0${NBSP}ms`);
     assert.equal(i18n.formatMilliseconds(-0.000001), `0${NBSP}ms`);
@@ -129,10 +158,10 @@ describe('util helpers', () => {
     const number = 12346.858558;
 
     const i18n = new I18n('de', {...Util.UIStrings});
-    assert.strictEqual(i18n.formatNumber(number), '12.346,9');
-    assert.strictEqual(i18n.formatBytesToKiB(number), `12,1${NBSP}KiB`);
-    assert.strictEqual(i18n.formatMilliseconds(number), `12.350${NBSP}ms`);
-    assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}Sek.`);
+    assert.strictEqual(i18n.formatNumber(number), '12.346,859');
+    assert.strictEqual(i18n.formatBytesToKiB(number, 0.1), `12,1${NBSP}KiB`);
+    assert.strictEqual(i18n.formatMilliseconds(number, 10), `12.350${NBSP}ms`);
+    assert.strictEqual(i18n.formatSeconds(number), `12,347${NBSP}Sek.`);
   });
 
   it('uses decimal comma with en-XA test locale', () => {
@@ -140,10 +169,10 @@ describe('util helpers', () => {
     const number = 12346.858558;
 
     const i18n = new I18n('en-XA', {...Util.UIStrings});
-    assert.strictEqual(i18n.formatNumber(number), '12.346,9');
-    assert.strictEqual(i18n.formatBytesToKiB(number), `12,1${NBSP}KiB`);
-    assert.strictEqual(i18n.formatMilliseconds(number), `12.350${NBSP}ms`);
-    assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}Sek.`);
+    assert.strictEqual(i18n.formatNumber(number), '12.346,859');
+    assert.strictEqual(i18n.formatBytesToKiB(number, 0.1), `12,1${NBSP}KiB`);
+    assert.strictEqual(i18n.formatMilliseconds(number, 100), `12.300${NBSP}ms`);
+    assert.strictEqual(i18n.formatSeconds(number, 1), `12${NBSP}Sek.`);
   });
 
   it('should not crash on unknown locales', () => {

package/shared/localization/locales/en-US.json

@@ -1190,6 +1190,9 @@
   "lighthouse-core/audits/metrics/cumulative-layout-shift.js | description": {
     "message": "Cumulative Layout Shift measures the movement of visible elements within the viewport. [Learn more](https://web.dev/cls/)."
   },
+  "lighthouse-core/audits/metrics/experimental-interaction-to-next-paint.js | description": {
+    "message": "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/)."
+  },
   "lighthouse-core/audits/metrics/first-contentful-paint.js | description": {
     "message": "First Contentful Paint marks the time at which the first text or image is painted. [Learn more](https://web.dev/first-contentful-paint/)."
   },
@@ -1961,6 +1964,9 @@
   "lighthouse-core/lib/i18n/i18n.js | imageResourceType": {
     "message": "Image"
   },
+  "lighthouse-core/lib/i18n/i18n.js | interactionToNextPaint": {
+    "message": "Interaction to Next Paint"
+  },
   "lighthouse-core/lib/i18n/i18n.js | interactiveMetric": {
     "message": "Time to Interactive"
   },

package/shared/localization/locales/en-XL.json

@@ -1190,6 +1190,9 @@
   "lighthouse-core/audits/metrics/cumulative-layout-shift.js | description": {
     "message": "Ĉúm̂úl̂át̂ív̂é L̂áŷóût́ Ŝh́îf́t̂ ḿêáŝúr̂éŝ t́ĥé m̂óv̂ém̂én̂t́ ôf́ v̂íŝíb̂ĺê él̂ém̂én̂t́ŝ ẃît́ĥín̂ t́ĥé v̂íêẃp̂ór̂t́. [L̂éâŕn̂ ḿôŕê](https://web.dev/cls/)."
   },
+  "lighthouse-core/audits/metrics/experimental-interaction-to-next-paint.js | description": {
+    "message": "Îńt̂ér̂áĉt́îón̂ t́ô Ńêx́t̂ Ṕâín̂t́ m̂éâśûŕêś p̂áĝé r̂éŝṕôńŝív̂én̂éŝś, ĥóŵ ĺôńĝ ít̂ t́âḱêś t̂h́ê ṕâǵê t́ô v́îśîb́l̂ý r̂éŝṕôńd̂ t́ô úŝér̂ ín̂ṕût́. [L̂éâŕn̂ ḿôŕê](https://web.dev/inp/)."
+  },
   "lighthouse-core/audits/metrics/first-contentful-paint.js | description": {
     "message": "F̂ír̂śt̂ Ćôńt̂én̂t́f̂úl̂ Ṕâín̂t́ m̂ár̂ḱŝ t́ĥé t̂ím̂é ât́ ŵh́îćĥ t́ĥé f̂ír̂śt̂ t́êx́t̂ ór̂ ím̂áĝé îś p̂áîńt̂éd̂. [Ĺêár̂ń m̂ór̂é](https://web.dev/first-contentful-paint/)."
   },
@@ -1961,6 +1964,9 @@
   "lighthouse-core/lib/i18n/i18n.js | imageResourceType": {
     "message": "Îḿâǵê"
   },
+  "lighthouse-core/lib/i18n/i18n.js | interactionToNextPaint": {
+    "message": "Îńt̂ér̂áĉt́îón̂ t́ô Ńêx́t̂ Ṕâín̂t́"
+  },
   "lighthouse-core/lib/i18n/i18n.js | interactiveMetric": {
     "message": "T̂ím̂é t̂ó Îńt̂ér̂áĉt́îv́ê"
   },

package/shared/localization/swap-locale.js

@@ -5,7 +5,8 @@
  */
 'use strict';
 
-const {set: _set, get: _get} = require('lodash');
+const _set = require('lodash/set.js');
+const _get = require('lodash/get.js');
 
 const format = require('./format.js');
 

package/types/artifacts.d.ts

@@ -999,6 +999,9 @@ export interface TraceEvent {
       compositeFailed?: number;
       unsupportedProperties?: string[];
       size?: number;
+      /** Responsiveness data. */
+      interactionType?: 'drag'|'keyboard'|'tapOrClick';
+      maxDuration?: number;
     };
     frame?: string;
     name?: string;