core(bf-cache): count failures based on affected frames (#14823)

core/audits/bf-cache.js

@@ -74,6 +74,8 @@ class BFCache extends Audit {
     // TODO: Analyze more than one bf cache failure.
     const {notRestoredReasonsTree} = failures[0];
 
+    let totalIssues = 0;
+
     /** @type {LH.Audit.Details.TableItem[]} */
     const results = [];
 
@@ -81,6 +83,8 @@ class BFCache extends Audit {
       const reasonsMap = notRestoredReasonsTree[failureType];
 
       for (const [reason, frameUrls] of Object.entries(reasonsMap)) {
+        totalIssues += frameUrls.length;
+
         results.push({
           reason: NotRestoredReasonDescription[reason]?.name ?? reason,
           failureType: FAILURE_TYPE_TO_STRING[failureType],
@@ -104,8 +108,8 @@ class BFCache extends Audit {
 
     const details = Audit.makeTableDetails(headings, results);
 
-    const displayValue = results.length ?
-      str_(UIStrings.displayValue, {itemCount: results.length}) :
+    const displayValue = totalIssues ?
+      str_(UIStrings.displayValue, {itemCount: totalIssues}) :
       undefined;
 
     return {

core/test/audits/bf-cache-test.js

@@ -27,7 +27,7 @@ describe('BFCache audit', () => {
 
     const result = await BFCache.audit(artifacts);
 
-    expect(result.displayValue).toBeDisplayString('3 failure reasons');
+    expect(result.displayValue).toBeDisplayString('4 failure reasons');
     expect(result.score).toEqual(0);
 
     if (result.details?.type !== 'table') throw new Error('details were not a table');