diff --git a/lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js b/lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js index c3337b04e106..9c99a78fcd69 100644 --- a/lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js +++ b/lighthouse-core/audits/byte-efficiency/byte-efficiency-audit.js @@ -197,7 +197,6 @@ 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 = str_(i18n.UIStrings.displayValueByteSavings, {wastedBytes}); diff --git a/lighthouse-core/audits/load-fast-enough-for-pwa.js b/lighthouse-core/audits/load-fast-enough-for-pwa.js index 28614db8b480..102fd9796c80 100644 --- a/lighthouse-core/audits/load-fast-enough-for-pwa.js +++ b/lighthouse-core/audits/load-fast-enough-for-pwa.js @@ -80,7 +80,7 @@ class LoadFastEnough4Pwa extends Audit { const score = Number(tti.timing < MAXIMUM_TTI); - /** @type {LH.Audit.DisplayValue|undefined} */ + /** @type {string|undefined} */ let displayValue; /** @type {string|undefined} */ let explanation; diff --git a/lighthouse-core/audits/seo/font-size.js b/lighthouse-core/audits/seo/font-size.js index 2dad98bc93f0..2faab58c8d66 100644 --- a/lighthouse-core/audits/seo/font-size.js +++ b/lighthouse-core/audits/seo/font-size.js @@ -296,7 +296,6 @@ class FontSize extends Audit { } const decimalProportion = (percentageOfPassingText / 100); - /** @type {LH.Audit.DisplayValue} */ const displayValue = str_(UIStrings.displayValue, {decimalProportion}); const details = Audit.makeTableDetails(headings, tableData); const passed = percentageOfPassingText >= MINIMAL_PERCENTAGE_OF_LEGIBLE_TEXT; diff --git a/lighthouse-core/audits/user-timings.js b/lighthouse-core/audits/user-timings.js index 339b528a56e2..2d8f64d27e5b 100644 --- a/lighthouse-core/audits/user-timings.js +++ b/lighthouse-core/audits/user-timings.js @@ -105,7 +105,7 @@ class UserTimings extends Audit { const details = Audit.makeTableDetails(headings, tableRows); - /** @type {LH.Audit.Product['displayValue']} */ + /** @type {string|undefined} */ let displayValue; if (userTimings.length) { displayValue = str_(UIStrings.displayValue, {itemCount: userTimings.length}); diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index 377cbe3e9280..549572ca9b82 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -75,8 +75,7 @@ class CategoryRenderer { const scoreDisplayMode = audit.result.scoreDisplayMode; if (audit.result.displayValue) { - const displayValue = Util.formatDisplayValue(audit.result.displayValue); - this.dom.find('.lh-audit__display-text', auditEl).textContent = displayValue; + this.dom.find('.lh-audit__display-text', auditEl).textContent = audit.result.displayValue; } const titleEl = this.dom.find('.lh-audit__title', auditEl); diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js index 42a3e6c2ca30..b3be31a80a2a 100644 --- a/lighthouse-core/report/html/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/html/renderer/performance-category-renderer.js @@ -36,7 +36,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { titleEl.textContent = audit.result.title; const valueEl = this.dom.find('.lh-metric__value', tmpl); - valueEl.textContent = Util.formatDisplayValue(audit.result.displayValue); + valueEl.textContent = audit.result.displayValue || ''; const descriptionEl = this.dom.find('.lh-metric__description', tmpl); descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description)); @@ -78,7 +78,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { // Set [title] tooltips if (audit.result.displayValue) { - const displayValue = Util.formatDisplayValue(audit.result.displayValue); + const displayValue = audit.result.displayValue; this.dom.find('.lh-load-opportunity__sparkline', element).title = displayValue; displayEl.title = displayValue; } diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js index 5da98dfaaa64..5e7ce488415d 100644 --- a/lighthouse-core/report/html/renderer/util.js +++ b/lighthouse-core/report/html/renderer/util.js @@ -94,46 +94,6 @@ class Util { } } - /** - * @param {string|Array=} displayValue - * @return {string} - */ - static formatDisplayValue(displayValue) { - if (typeof displayValue === 'string') return displayValue; - if (!displayValue) return ''; - - const replacementRegex = /%([0-9]*(\.[0-9]+)?d|s)/; - const template = /** @type {string} */ (displayValue[0]); - 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; - for (const replacement of displayValue.slice(1)) { - if (!replacementRegex.test(output)) { - // eslint-disable-next-line no-console - console.warn('Too many replacements given'); - break; - } - - output = output.replace(replacementRegex, match => { - const granularity = Number(match.match(/[0-9.]+/)) || 1; - return match === '%s' ? - replacement.toLocaleString() : - (Math.round(Number(replacement) / granularity) * granularity).toLocaleString(); - }); - } - - if (replacementRegex.test(output)) { - // eslint-disable-next-line no-console - console.warn('Not enough replacements given'); - } - - return output; - } - /** * Used to determine if the "passed" for the purposes of showing up in the "failed" or "passed" * sections of the report. diff --git a/lighthouse-core/test/report/html/renderer/util-test.js b/lighthouse-core/test/report/html/renderer/util-test.js index 6fcd9b5a3120..f65c59bc7f36 100644 --- a/lighthouse-core/test/report/html/renderer/util-test.js +++ b/lighthouse-core/test/report/html/renderer/util-test.js @@ -138,38 +138,6 @@ describe('util helpers', () => { assert.equal(descriptions.cpuThrottling, '2x slowdown (Simulated)'); }); - it('formats display values', () => { - const format = arg => Util.formatDisplayValue(arg); - assert.equal(format(undefined), ''); - assert.equal(format('Foo %s %d'), 'Foo %s %d'); - assert.equal(format([]), 'UNKNOWN'); - assert.equal(format(['%s %s', 'Hello', 'formatDisplayValue']), 'Hello formatDisplayValue'); - 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'); - // handle edge cases - assert.equal(format(['%.01s literal', 1234]), '%.01s literal'); - assert.equal(format(['%1.01.1d junk', 1234]), '%1.01.1d junk'); - }); - - it('warns on improper display value formatting', () => { - assert.equal(Util.formatDisplayValue(['%s']), '%s'); - assert.equal(Util.formatDisplayValue(['%s', 'foo', 'bar']), 'foo'); - assert.deepEqual(consoleWarnCalls, [ - 'Not enough replacements given', - 'Too many replacements given', - ]); - }); - - it('does not mutate the provided array', () => { - const displayValue = ['one:%s, two:%s', 'foo', 'bar']; - const cloned = JSON.parse(JSON.stringify(displayValue)); - Util.formatDisplayValue(displayValue); - assert.deepStrictEqual(displayValue, cloned, 'displayValue was mutated'); - }); - describe('#prepareReportResult', () => { it('corrects underscored `notApplicable` scoreDisplayMode', () => { const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult)); diff --git a/types/audit.d.ts b/types/audit.d.ts index 0afbc416f0ce..dddf009cf603 100644 --- a/types/audit.d.ts +++ b/types/audit.d.ts @@ -38,8 +38,6 @@ declare global { export type ScoreDisplayMode = Audit.ScoreDisplayModes[keyof Audit.ScoreDisplayModes]; - export type DisplayValue = string; - export interface Meta { /** The string identifier of the audit, in kebab case. */ id: string; @@ -65,7 +63,7 @@ declare global { // Type returned by Audit.audit(). Only rawValue is required. export interface Product { rawValue: boolean | number | null; - displayValue?: DisplayValue; + displayValue?: string; explanation?: string; errorMessage?: string; warnings?: string[]; @@ -79,7 +77,7 @@ declare global { /* Audit result returned in Lighthouse report. All audits offer a description and score of 0-1 */ export interface Result { rawValue: boolean | number | null; - displayValue?: DisplayValue; + displayValue?: string; explanation?: string; errorMessage?: string; warnings?: string[];