report: group third-party entities

core/audits/audit.js

@@ -124,9 +124,12 @@ class Audit {
    * @param {LH.Audit.Details.Table['headings']} headings
    * @param {LH.Audit.Details.Table['items']} results
    * @param {LH.Audit.Details.Table['summary']=} summary
+   * @param {LH.Audit.Details.Table['sortedBy']=} sortedBy
+   * @param {LH.Audit.Details.Table['skipSumming']=} skipSumming
+   * @param {LH.Audit.Details.Table['isEntityGrouped']=} isEntityGrouped
    * @return {LH.Audit.Details.Table}
    */
-  static makeTableDetails(headings, results, summary) {
+  static makeTableDetails(headings, results, summary, sortedBy, skipSumming, isEntityGrouped) {
     if (results.length === 0) {
       return {
         type: 'table',
@@ -143,6 +146,9 @@ class Audit {
       headings: headings,
       items: results,
       summary,
+      sortedBy,
+      skipSumming,
+      isEntityGrouped,
     };
   }
 
@@ -217,9 +223,13 @@ class Audit {
    * @param {LH.Audit.Details.Opportunity['items']} items
    * @param {number} overallSavingsMs
    * @param {number=} overallSavingsBytes
+   * @param {LH.Audit.Details.Opportunity['sortedBy']=} sortedBy
+   * @param {LH.Audit.Details.Opportunity['skipSumming']=} skipSumming
+   * @param {LH.Audit.Details.Opportunity['isEntityGrouped']=} isEntityGrouped
    * @return {LH.Audit.Details.Opportunity}
    */
-  static makeOpportunityDetails(headings, items, overallSavingsMs, overallSavingsBytes) {
+  static makeOpportunityDetails(headings, items, overallSavingsMs, overallSavingsBytes,
+      sortedBy, skipSumming, isEntityGrouped) {
     Audit.assertHeadingKeysExist(headings, items);
 
     return {
@@ -228,6 +238,9 @@ class Audit {
       items,
       overallSavingsMs,
       overallSavingsBytes,
+      sortedBy,
+      skipSumming,
+      isEntityGrouped,
     };
   }
 

core/audits/bootup-time.js

@@ -128,7 +128,7 @@ class BootupTime extends Audit {
         label: str_(UIStrings.columnScriptParse)},
     ];
 
-    const details = BootupTime.makeTableDetails(headings, results, summary);
+    const details = BootupTime.makeTableDetails(headings, results, summary, ['total']);
 
     const score = Audit.computeLogNormalScore(
       {p10: context.options.p10, median: context.options.median},

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

@@ -29,6 +29,7 @@ const WASTED_MS_FOR_SCORE_OF_ZERO = 5000;
  * @property {LH.IcuMessage} [displayValue]
  * @property {LH.IcuMessage} [explanation]
  * @property {Array<string | LH.IcuMessage>} [warnings]
+ * @property {Array<string>} [sortedBy]
  */
 
 /**
@@ -228,7 +229,10 @@ class ByteEfficiencyAudit extends Audit {
       displayValue = str_(i18n.UIStrings.displayValueByteSavings, {wastedBytes});
     }
 
-    const details = Audit.makeOpportunityDetails(result.headings, results, wastedMs, wastedBytes);
+    const sortedBy = result.sortedBy || ['wastedBytes'];
+
+    const details = Audit.makeOpportunityDetails(
+      result.headings, results, wastedMs, wastedBytes, sortedBy);
 
     return {
       explanation: result.explanation,

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

@@ -93,7 +93,7 @@ class TotalByteWeight extends Audit {
       {key: 'totalBytes', valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize)},
     ];
 
-    const tableDetails = Audit.makeTableDetails(headings, results);
+    const tableDetails = Audit.makeTableDetails(headings, results, undefined, ['totalBytes']);
 
     return {
       score,

core/audits/byte-efficiency/uses-long-cache-ttl.js

@@ -281,7 +281,8 @@ class CacheHeaders extends Audit {
     ];
 
     const summary = {wastedBytes: totalWastedBytes};
-    const details = Audit.makeTableDetails(headings, results, summary);
+    const details = Audit.makeTableDetails(headings, results, summary,
+      ['totalBytes'], ['cacheLifetimeMs']);
 
     return {
       score,

core/audits/long-tasks.js

@@ -104,7 +104,8 @@ class LongTasks extends Audit {
       /* eslint-enable max-len */
     ];
 
-    const tableDetails = Audit.makeTableDetails(headings, results);
+    const tableDetails = Audit.makeTableDetails(headings, results, undefined,
+      ['duration'], ['startTime']);
 
     let displayValue;
     if (results.length > 0) {

core/audits/mainthread-work-breakdown.js

@@ -114,7 +114,8 @@ class MainThreadWorkBreakdown extends Audit {
     ];
 
     results.sort((a, b) => categoryTotals[b.group] - categoryTotals[a.group]);
-    const tableDetails = MainThreadWorkBreakdown.makeTableDetails(headings, results);
+    const tableDetails = MainThreadWorkBreakdown.makeTableDetails(
+      headings, results, undefined, ['duration']);
 
     const score = Audit.computeLogNormalScore(
       {p10: context.options.p10, median: context.options.median},

core/audits/network-rtt.js

@@ -73,7 +73,7 @@ class NetworkRTT extends Audit {
       {key: 'rtt', valueType: 'ms', granularity: 1, label: str_(i18n.UIStrings.columnTimeSpent)},
     ];
 
-    const tableDetails = Audit.makeTableDetails(headings, results);
+    const tableDetails = Audit.makeTableDetails(headings, results, undefined, ['rtt']);
 
     return {
       score: 1,

core/audits/network-server-latency.js

@@ -72,7 +72,8 @@ class NetworkServerLatency extends Audit {
         label: str_(i18n.UIStrings.columnTimeSpent)},
     ];
 
-    const tableDetails = Audit.makeTableDetails(headings, results);
+    const tableDetails = Audit.makeTableDetails(headings, results, undefined,
+      ['serverResponseTime']);
 
     return {
       score: Math.max(1 - (maxLatency / 500), 0),

core/audits/performance-budget.js

@@ -144,7 +144,7 @@ class ResourceBudget extends Audit {
 
     return {
       details: Audit.makeTableDetails(headers,
-        this.tableItems(budget, summary)),
+        this.tableItems(budget, summary), undefined, ['sizeOverBudget']),
       score: 1,
     };
   }

core/audits/preload-lcp-image.js

@@ -261,7 +261,8 @@ class PreloadLCPImageAudit extends Audit {
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
       {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
     ];
-    const details = Audit.makeOpportunityDetails(headings, results, wastedMs);
+    const details = Audit.makeOpportunityDetails(headings, results, wastedMs,
+      undefined, ['wastedMs']);
 
     // If LCP element was an image and had valid network records (regardless of
     // if it should be preloaded), it will be found first in the `initiatorPath`.

core/audits/third-party-summary.js

@@ -217,11 +217,7 @@ class ThirdPartySummary extends Audit {
 
         return {
           ...stats,
-          entity: {
-            type: /** @type {const} */ ('link'),
-            text: entity.name,
-            url: entity.homepage || '',
-          },
+          entity: entity.name,
           subItems: {
             type: /** @type {const} */ ('subitems'),
             items: ThirdPartySummary.makeSubItems(entity, summaries, stats),
@@ -234,7 +230,7 @@ class ThirdPartySummary extends Audit {
     /** @type {LH.Audit.Details.Table['headings']} */
     const headings = [
       /* eslint-disable max-len */
-      {key: 'entity', valueType: 'link', label: str_(UIStrings.columnThirdParty), subItemsHeading: {key: 'url', valueType: 'url'}},
+      {key: 'entity', valueType: 'text', label: str_(UIStrings.columnThirdParty), subItemsHeading: {key: 'url', valueType: 'url'}},
       {key: 'transferSize', granularity: 1, valueType: 'bytes', label: str_(i18n.UIStrings.columnTransferSize), subItemsHeading: {key: 'transferSize'}},
       {key: 'blockingTime', granularity: 1, valueType: 'ms', label: str_(i18n.UIStrings.columnBlockingTime), subItemsHeading: {key: 'blockingTime'}},
       /* eslint-enable max-len */
@@ -247,12 +243,15 @@ class ThirdPartySummary extends Audit {
       };
     }
 
+    const details = Audit.makeTableDetails(headings, results, overallSummary,
+      undefined, undefined, true);
+
     return {
       score: Number(overallSummary.wastedMs <= PASS_THRESHOLD_IN_MS),
       displayValue: str_(UIStrings.displayValue, {
         timeInMs: overallSummary.wastedMs,
       }),
-      details: Audit.makeTableDetails(headings, results, overallSummary),
+      details,
     };
   }
 }

core/audits/timing-budget.js

@@ -164,7 +164,8 @@ class TimingBudget extends Audit {
     ];
 
     return {
-      details: Audit.makeTableDetails(headers, this.tableItems(budget, summary)),
+      details: Audit.makeTableDetails(headers, this.tableItems(budget, summary),
+        undefined, ['overBudget']),
       score: 1,
     };
   }

core/audits/uses-rel-preconnect.js

@@ -233,7 +233,8 @@ class UsesRelPreconnectAudit extends Audit {
       {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
     ];
 
-    const details = Audit.makeOpportunityDetails(headings, results, maxWasted);
+    const details = Audit.makeOpportunityDetails(headings, results, maxWasted,
+      undefined, ['wastedMs']);
 
     return {
       score: ByteEfficiencyAudit.scoreForWastedMs(maxWasted),

core/audits/uses-rel-preload.js

@@ -239,7 +239,8 @@ class UsesRelPreloadAudit extends Audit {
       {key: 'url', valueType: 'url', label: str_(i18n.UIStrings.columnURL)},
       {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
     ];
-    const details = Audit.makeOpportunityDetails(headings, results, wastedMs);
+    const details = Audit.makeOpportunityDetails(headings, results, wastedMs,
+      undefined, ['wastedMs']);
 
     return {
       score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),

core/audits/work-during-interaction.js

@@ -193,7 +193,7 @@ class WorkDuringInteraction extends Audit {
     ];
 
     return {
-      table: Audit.makeTableDetails(headings, items),
+      table: Audit.makeTableDetails(headings, items, undefined, ['total']),
       phases,
     };
   }

core/lib/lighthouse-compatibility.js

@@ -81,6 +81,23 @@ function upgradeLhrForCompatibility(lhr) {
         }
       }
 
+      // In 10.0, third-party-summary deprecated entity: LinkValue and switched to entity name string
+      if (audit.id === 'third-party-summary') {
+        if (audit.details.type === 'opportunity' || audit.details.type === 'table') {
+          const {headings, items} = audit.details;
+          if (headings[0].valueType === 'link') {
+            // Apply upgrade only if we are dealing with an older version (valueType=link marker).
+            headings[0].valueType = 'text';
+            for (const item of items) {
+              if (typeof item.entity === 'object' && item.entity.type === 'link') {
+                item.entity = item.entity.text;
+              }
+            }
+            audit.details.isEntityGrouped = true;
+          }
+        }
+      }
+
       // TODO: convert printf-style displayValue.
       // Added:   #5099, v3
       // Removed: #6767, v4

core/runner.js

@@ -170,6 +170,7 @@ class Runner {
       // Reduce payload size in LHR JSON by omitting whats falsy.
       if (entity === classifiedEntities.firstParty) shortEntity.isFirstParty = true;
       if (entity.isUnrecognized) shortEntity.isUnrecognized = true;
+      if (entity.category) shortEntity.category = entity.category;
       entities.push(shortEntity);
     }
 

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

@@ -356,6 +356,7 @@ describe('Byte efficiency base audit', () => {
       GatherContext: {gatherMode: 'timespan'},
       traces: {defaultPass: trace},
       devtoolsLogs: {defaultPass: []},
+      URL: {},
     };
     const computedCache = new Map();
 

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

@@ -34,6 +34,7 @@ function generateArtifacts(records) {
 
   return {
     devtoolsLogs: {defaultPass: networkRecordsToDevtoolsLog(records)},
+    URL: {},
   };
 }
 

core/test/audits/byte-efficiency/uses-long-cache-ttl-test.js

@@ -48,6 +48,7 @@ describe('Cache headers audit', () => {
       devtoolsLogs: {
         [CacheHeadersAudit.DEFAULT_PASS]: devtoolLogs,
       },
+      URL: {},
     };
   }
 

core/test/audits/third-party-summary-test.js

@@ -28,11 +28,7 @@ describe('Third party summary', () => {
     );
     expect(results.details.items).toEqual([
       {
-        entity: {
-          text: 'Google Tag Manager',
-          type: 'link',
-          url: 'https://marketingplatform.google.com/about/tag-manager/',
-        },
+        entity: 'Google Tag Manager',
         mainThreadTime: 127.15300000000003,
         blockingTime: 18.186999999999998,
         transferSize: 30827,
@@ -49,11 +45,7 @@ describe('Third party summary', () => {
         },
       },
       {
-        entity: {
-          text: 'Google Analytics',
-          type: 'link',
-          url: 'https://marketingplatform.google.com/about/analytics/',
-        },
+        entity: 'Google Analytics',
         mainThreadTime: 95.15599999999999,
         blockingTime: 0,
         transferSize: 20913,
@@ -154,8 +146,8 @@ describe('Third party summary', () => {
     const resultsOnExternal = await ThirdPartySummary.audit(externalArtifacts, context);
     const resultsOnFacebook = await ThirdPartySummary.audit(facebookArtifacts, context);
 
-    const externalEntities = resultsOnExternal.details.items.map(item => item.entity.text);
-    const facebookEntities = resultsOnFacebook.details.items.map(item => item.entity.text);
+    const externalEntities = resultsOnExternal.details.items.map(item => item.entity);
+    const facebookEntities = resultsOnFacebook.details.items.map(item => item.entity);
 
     expect(externalEntities).toEqual([
       'Google Tag Manager', 'Facebook', 'pwa.rocks', 'Google Analytics']);

core/test/audits/work-during-interaction-test.js

@@ -63,6 +63,7 @@ Object {
             "valueType": "node",
           },
         ],
+        "isEntityGrouped": undefined,
         "items": Array [
           Object {
             "node": Object {
@@ -83,6 +84,8 @@ Object {
             },
           },
         ],
+        "skipSumming": undefined,
+        "sortedBy": undefined,
         "summary": undefined,
         "type": "table",
       },
@@ -139,6 +142,7 @@ Object {
             "valueType": "ms",
           },
         ],
+        "isEntityGrouped": undefined,
         "items": Array [
           Object {
             "phase": Object {
@@ -215,6 +219,10 @@ Object {
             "total": 285,
           },
         ],
+        "skipSumming": undefined,
+        "sortedBy": Array [
+          "total",
+        ],
         "summary": undefined,
         "type": "table",
       },