core(lhr): support printf displayValues

lighthouse-core/audits/audit.js

@@ -166,8 +166,6 @@ class Audit {
       result.rawValue = true;
     }
 
-    const displayValue = result.displayValue ? `${result.displayValue}` : '';
-
     let auditDescription = audit.meta.description;
     if (audit.meta.failureDescription) {
       if (score < Util.PASS_THRESHOLD) {
@@ -177,7 +175,7 @@ class Audit {
 
     return {
       score,
-      displayValue,
+      displayValue: result.displayValue || '',
       rawValue: result.rawValue,
       error: result.error,
       debugString: result.debugString,

lighthouse-core/audits/bootup-time.js

@@ -124,7 +124,7 @@ class BootupTime extends Audit {
       return {
         score,
         rawValue: totalBootupTime,
-        displayValue: Util.formatMilliseconds(totalBootupTime),
+        displayValue: [Util.MS_DISPLAY_VALUE, totalBootupTime],
         details,
         extendedInfo: {
           value: extendedInfo,

lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js

@@ -172,9 +172,10 @@ class UnusedBytes extends Audit {
     const wastedKb = Math.round(wastedBytes / KB_IN_BYTES);
     const wastedMs = this.computeWasteWithTTIGraph(results, graph, simulator);
 
+    /** @type {LH.Audit.DisplayValue} */
     let displayValue = result.displayValue || '';
     if (typeof result.displayValue === 'undefined' && wastedBytes) {
-      displayValue = `Potential savings of ${wastedBytes} bytes`;
+      displayValue = ['Potential savings of %d\xa0KB', wastedKb];
     }
 
     const summary = {

lighthouse-core/audits/byte-efficiency/total-byte-weight.js

@@ -6,7 +6,6 @@
 'use strict';
 
 const ByteEfficiencyAudit = require('./byte-efficiency-audit');
-const Util = require('../../report/html/renderer/util');
 
 class TotalByteWeight extends ByteEfficiencyAudit {
   /**
@@ -92,7 +91,10 @@ class TotalByteWeight extends ByteEfficiencyAudit {
       return {
         score,
         rawValue: totalBytes,
-        displayValue: `Total size was ${Util.formatBytesToKB(totalBytes, 1)}`,
+        displayValue: [
+          'Total size was %d\xa0KB',
+          totalBytes / 1024,
+        ],
         extendedInfo: {
           value: {
             results,

lighthouse-core/audits/dobetterweb/dom-size.js

@@ -93,7 +93,7 @@ class DOMSize extends Audit {
     return {
       score,
       rawValue: stats.totalDOMNodes,
-      displayValue: `${Util.formatNumber(stats.totalDOMNodes)} nodes`,
+      displayValue: ['%d nodes', stats.totalDOMNodes],
       extendedInfo: {
         value: items,
       },

lighthouse-core/audits/estimated-input-latency.js

@@ -6,7 +6,6 @@
 'use strict';
 
 const Audit = require('./audit');
-const Util = require('../report/html/renderer/util');
 
 class EstimatedInputLatency extends Audit {
   /**
@@ -57,7 +56,7 @@ class EstimatedInputLatency extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: Util.formatMilliseconds(metricResult.timing, 1),
+      displayValue: ['%d\xa0ms', metricResult.timing],
     };
   }
 }

lighthouse-core/audits/first-contentful-paint.js

@@ -54,7 +54,7 @@ class FirstContentfulPaint extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: Util.formatMilliseconds(metricResult.timing),
+      displayValue: [Util.MS_DISPLAY_VALUE, metricResult.timing],
     };
   }
 }

lighthouse-core/audits/first-cpu-idle.js

@@ -58,7 +58,7 @@ class FirstCPUIdle extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: Util.formatMilliseconds(metricResult.timing),
+      displayValue: [Util.MS_DISPLAY_VALUE, metricResult.timing],
     };
   }
 }

lighthouse-core/audits/first-meaningful-paint.js

@@ -57,7 +57,7 @@ class FirstMeaningfulPaint extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: Util.formatMilliseconds(metricResult.timing),
+      displayValue: [Util.MS_DISPLAY_VALUE, metricResult.timing],
     };
   }
 }

lighthouse-core/audits/interactive.js

@@ -69,7 +69,7 @@ class InteractiveMetric extends Audit {
         context.options.scoreMedian
       ),
       rawValue: timeInMs,
-      displayValue: Util.formatMilliseconds(timeInMs),
+      displayValue: [Util.MS_DISPLAY_VALUE, timeInMs],
       extendedInfo: {
         value: extendedInfo,
       },

lighthouse-core/audits/mainthread-work-breakdown.js

@@ -106,7 +106,7 @@ class MainThreadWorkBreakdown extends Audit {
         return {
           score,
           rawValue: totalExecutionTime,
-          displayValue: Util.formatMilliseconds(totalExecutionTime),
+          displayValue: ['%d\xa0ms', totalExecutionTime],
           details: tableDetails,
           extendedInfo: {
             value: extendedInfo,

lighthouse-core/audits/redirects.js

@@ -6,7 +6,6 @@
 'use strict';
 
 const Audit = require('./audit');
-const Util = require('../report/html/renderer/util');
 const UnusedBytes = require('./byte-efficiency/byte-efficiency-audit');
 
 class Redirects extends Audit {
@@ -97,7 +96,7 @@ class Redirects extends Audit {
       // We award a passing grade if you only have 1 redirect
       score: redirectRequests.length <= 2 ? 1 : UnusedBytes.scoreForWastedMs(totalWastedMs),
       rawValue: totalWastedMs,
-      displayValue: Util.formatMilliseconds(totalWastedMs, 1),
+      displayValue: ['%d\xa0ms', totalWastedMs],
       extendedInfo: {
         value: {
           wastedMs: totalWastedMs,

lighthouse-core/audits/speed-index.js

@@ -56,7 +56,7 @@ class SpeedIndex extends Audit {
         context.options.scoreMedian
       ),
       rawValue: metricResult.timing,
-      displayValue: Util.formatMilliseconds(metricResult.timing),
+      displayValue: [Util.MS_DISPLAY_VALUE, metricResult.timing],
     };
   }
 }

lighthouse-core/audits/uses-rel-preconnect.js

@@ -7,7 +7,6 @@
 'use strict';
 
 const Audit = require('./audit');
-const Util = require('../report/html/renderer/util');
 const UnusedBytes = require('./byte-efficiency/byte-efficiency-audit');
 // Preconnect establishes a "clean" socket. Chrome's socket manager will keep an unused socket
 // around for 10s. Meaning, the time delta between processing preconnect a request should be <10s,
@@ -158,7 +157,7 @@ class UsesRelPreconnectAudit extends Audit {
     return {
       score: UnusedBytes.scoreForWastedMs(maxWasted),
       rawValue: maxWasted,
-      displayValue: Util.formatMilliseconds(maxWasted),
+      displayValue: ['Potential savings of %10d\xa0ms', maxWasted],
       extendedInfo: {
         value: results,
       },

lighthouse-core/audits/uses-rel-preload.js

@@ -6,7 +6,6 @@
 'use strict';
 
 const Audit = require('./audit');
-const Util = require('../report/html/renderer/util');
 const UnusedBytes = require('./byte-efficiency/byte-efficiency-audit');
 const THRESHOLD_IN_MS = 100;
 
@@ -183,7 +182,7 @@ class UsesRelPreloadAudit extends Audit {
       return {
         score: UnusedBytes.scoreForWastedMs(wastedMs),
         rawValue: wastedMs,
-        displayValue: Util.formatMilliseconds(wastedMs),
+        displayValue: ['Potential savings of %10d\xa0ms', wastedMs],
         extendedInfo: {
           value: results,
         },

lighthouse-core/report/html/renderer/category-renderer.js

@@ -37,7 +37,7 @@ class CategoryRenderer {
     let title = audit.result.description;
 
     if (audit.result.displayValue) {
-      title += `:  ${audit.result.displayValue}`;
+      title += `:  ${Util.formatDisplayValue(audit.result.displayValue)}`;
     }
 
     if (audit.result.debugString) {

lighthouse-core/report/html/renderer/performance-category-renderer.js

@@ -22,7 +22,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     titleEl.textContent = audit.result.description;
 
     const valueEl = this.dom.find('.lh-perf-metric__value span', tmpl);
-    valueEl.textContent = audit.result.displayValue;
+    valueEl.textContent = Util.formatDisplayValue(audit.result.displayValue);
 
     const descriptionEl = this.dom.find('.lh-perf-metric__description', tmpl);
     descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText));
@@ -42,7 +42,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
    * @return {!Element}
    */
   _renderPerfHintAudit(audit, scale) {
-    const tooltipAttrs = {title: audit.result.displayValue};
+    const tooltipAttrs = {title: Util.formatDisplayValue(audit.result.displayValue)};
 
     const element = this.dom.createElement('details', [
       'lh-perf-hint',

lighthouse-core/report/html/renderer/report-renderer.js

@@ -211,7 +211,7 @@ if (typeof module !== 'undefined' && module.exports) {
  *     manual: (boolean|undefined),
  *     notApplicable: (boolean|undefined),
  *     debugString: (string|undefined),
- *     displayValue: string,
+ *     displayValue: (string|Array<string|number>),
  *     helpText: string,
  *     scoreDisplayMode: string,
  *     extendedInfo: Object,

lighthouse-core/report/html/renderer/util.js

@@ -26,6 +26,40 @@ class Util {
     return PASS_THRESHOLD;
   }
 
+  static get MS_DISPLAY_VALUE() {
+    return `%10d${NBSP}ms`;
+  }
+
+  /**
+   * @param {string|Array<string|number>=} displayValue
+   * @return {string}
+   */
+  static formatDisplayValue(displayValue) {
+    if (typeof displayValue === 'string' || typeof displayValue === 'undefined') {
+      return displayValue || '';
+    }
+
+    const template = /** @type {string} */ displayValue.shift();
+    if (typeof template !== 'string') {
+      // First value should always be the format string, but we don't want to fail to build
+      // a report, return a placeholder.
+      return 'UNKNOWN';
+    }
+
+    let output = template;
+    while (displayValue.length) {
+      const replacement = /** @type {number|string} */ (displayValue.shift());
+      output = output.replace(/%([0-9.]+)?(d|s)/, match => {
+        const granularity = Number(match.match(/[0-9.]+/)) || 1;
+        return match === '%s' ?
+          replacement.toLocaleString() :
+          (Math.round(Number(replacement) / granularity) * granularity).toLocaleString();
+      });
+    }
+
+    return output;
+  }
+
   /**
    * Convert a score to a rating label.
    * @param {number} score

lighthouse-core/test/audits/byte-efficiency/byte-efficiency-audit-test.js

@@ -176,7 +176,7 @@ describe('Byte efficiency base audit', () => {
       ],
     }, graph, simulator);
 
-    assert.ok(result.displayValue.includes('2048 bytes'), 'contains correct bytes');
+    assert.ok(result.displayValue.includes(2), 'contains correct KB');
   });
 
   it('should work on real graphs', async () => {

lighthouse-core/test/audits/dobetterweb/dom-size-test.js

@@ -25,7 +25,7 @@ describe('Num DOM nodes audit', () => {
     const auditResult = DOMSize.audit(artifact, {options});
     assert.equal(auditResult.score, 0.43);
     assert.equal(auditResult.rawValue, numNodes);
-    assert.equal(auditResult.displayValue, `${numNodes.toLocaleString()} nodes`);
+    assert.deepEqual(auditResult.displayValue, ['%d nodes', numNodes]);
     assert.equal(auditResult.details.items[0].totalNodes, numNodes.toLocaleString());
     assert.equal(auditResult.details.items[0].depth, '1');
     assert.equal(auditResult.details.items[0].width, '2');

lighthouse-core/test/audits/estimated-input-latency-test.js

@@ -7,6 +7,7 @@
 
 const Audit = require('../../audits/estimated-input-latency');
 const Runner = require('../../runner');
+const Util = require('../../report/html/renderer/util');
 const assert = require('assert');
 const options = Audit.defaultOptions;
 
@@ -29,7 +30,7 @@ describe('Performance: estimated-input-latency audit', () => {
     return Audit.audit(artifacts, {options, settings}).then(output => {
       assert.equal(output.debugString, undefined);
       assert.equal(Math.round(output.rawValue * 10) / 10, 17.1);
-      assert.equal(output.displayValue, '17\xa0ms');
+      assert.equal(Util.formatDisplayValue(output.displayValue), '17\xa0ms');
       assert.equal(output.score, 1);
     });
   });

lighthouse-core/test/audits/first-meaningful-paint-test.js

@@ -7,6 +7,7 @@
 
 const FMPAudit = require('../../audits/first-meaningful-paint.js');
 const Audit = require('../../audits/audit.js');
+const Util = require('../../report/html/renderer/util');
 const assert = require('assert');
 const options = FMPAudit.defaultOptions;
 const trace = require('../fixtures/traces/progressive-app-m60.json');
@@ -26,7 +27,7 @@ describe('Performance: first-meaningful-paint audit', () => {
     const fmpResult = await FMPAudit.audit(artifacts, context);
 
     assert.equal(fmpResult.score, 1);
-    assert.equal(fmpResult.displayValue, '780\xa0ms');
+    assert.equal(Util.formatDisplayValue(fmpResult.displayValue), '780\xa0ms');
     assert.equal(fmpResult.rawValue, 783.328);
   });
 
@@ -39,7 +40,7 @@ describe('Performance: first-meaningful-paint audit', () => {
     const fmpResult = await FMPAudit.audit(artifacts, context);
 
     assert.equal(fmpResult.score, 0.79);
-    assert.equal(fmpResult.displayValue, '2,850\xa0ms');
+    assert.equal(Util.formatDisplayValue(fmpResult.displayValue), '2,850\xa0ms');
     assert.equal(Math.round(fmpResult.rawValue), 2851);
   });
 });

lighthouse-core/test/audits/interactive-test.js

@@ -7,6 +7,7 @@
 
 const Interactive = require('../../audits/interactive.js');
 const Runner = require('../../runner.js');
+const Util = require('../../report/html/renderer/util');
 const assert = require('assert');
 const options = Interactive.defaultOptions;
 
@@ -33,7 +34,7 @@ describe('Performance: interactive audit', () => {
     return Interactive.audit(artifacts, {options, settings}).then(output => {
       assert.equal(output.score, 1);
       assert.equal(Math.round(output.rawValue), 1582);
-      assert.equal(output.displayValue, '1,580\xa0ms');
+      assert.equal(Util.formatDisplayValue(output.displayValue), '1,580\xa0ms');
     });
   });
 
@@ -51,7 +52,7 @@ describe('Performance: interactive audit', () => {
     return Interactive.audit(artifacts, {options, settings}).then(output => {
       assert.equal(output.score, 0.97);
       assert.equal(Math.round(output.rawValue), 2712);
-      assert.equal(output.displayValue, '2,710\xa0ms');
+      assert.equal(Util.formatDisplayValue(output.displayValue), '2,710\xa0ms');
     });
   });
 });

lighthouse-core/test/report/html/renderer/util-test.js

@@ -53,4 +53,16 @@ describe('util helpers', () => {
     assert.equal(Util.calculateRating(0.80), 'pass');
     assert.equal(Util.calculateRating(1.00), 'pass');
   });
+
+  it('formats display values', () => {
+    const format = (...args) => Util.formatDisplayValue(...args);
+    assert.equal(format(undefined), '');
+    assert.equal(format([1]), 'UNKNOWN');
+    assert.equal(format(['%s %s', 'Hello', 'Paul']), 'Hello Paul');
+    assert.equal(format(['%s%', 99.9]), '99.9%');
+    assert.equal(format(['%d%', 99.9]), '100%');
+    assert.equal(format(['%s ms', 12345.678]), '12,345.678 ms');
+    assert.equal(format(['%10d ms', 12345.678]), '12,350 ms');
+    assert.equal(format(['%.01d ms', 12345.678]), '12,345.68 ms');
+  });
 });