[RPP] Include url-level breakdown in ThirdParties insight model

This is needed for sub-items in Lighthouse.

Bug: 388723721
Change-Id: I1674ce4de3684a6776eb5d4778d89dd66c13b1fc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6245118
Commit-Queue: Connor Clark <[email protected]>
Commit-Queue: Adam Raine <[email protected]>
Reviewed-by: Adam Raine <[email protected]>
Auto-Submit: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/trace/extras/ThirdParties.test.ts

@@ -21,6 +21,39 @@ describeWithEnvironment('ThirdParties', function() {
         ['localhost', {mainThreadTime: 26381, transferSize: 751}],
         ['Google Fonts', {mainThreadTime: 0, transferSize: 0}],
       ]);
+
+      assert.deepEqual([...thirdPartySummary.byUrl.entries()], [
+        ['extensions::SafeBuiltins', {mainThreadTime: 1448, transferSize: 0}],
+        ['http://localhost:8080/', {mainThreadTime: 21674, transferSize: 751}],
+        ['http://localhost:8080/blocking.js', {mainThreadTime: 2451, transferSize: 0}],
+        ['http://localhost:8080/module.js', {mainThreadTime: 2256, transferSize: 0}],
+        ['https://fonts.googleapis.com/css2?family=Orelega+One&display=swap', {mainThreadTime: 0, transferSize: 0}],
+        ['http://localhost:8080/styles.css', {mainThreadTime: 0, transferSize: 0}],
+        [
+          'https://fonts.gstatic.com/s/orelegaone/v1/3qTpojOggD2XtAdFb-QXZFt93kY.woff2',
+          {mainThreadTime: 0, transferSize: 0}
+        ],
+      ]);
+
+      const urls = [...thirdPartySummary.urlsByEntity.entries()].map(([entity, urls]) => [entity.name, [...urls]]);
+      assert.deepEqual(urls, [
+        [
+          'localhost',
+          [
+            'http://localhost:8080/',
+            'http://localhost:8080/blocking.js',
+            'http://localhost:8080/module.js',
+            'http://localhost:8080/styles.css',
+          ]
+        ],
+        [
+          'Google Fonts',
+          [
+            'https://fonts.googleapis.com/css2?family=Orelega+One&display=swap',
+            'https://fonts.gstatic.com/s/orelegaone/v1/3qTpojOggD2XtAdFb-QXZFt93kY.woff2',
+          ]
+        ],
+      ]);
     });
 
     it('works even without network requests', async function() {
@@ -34,6 +67,25 @@ describeWithEnvironment('ThirdParties', function() {
         // Since network requests were not given, there is no transfer size.
         ['localhost', {mainThreadTime: 26381, transferSize: 0}],
       ]);
+
+      assert.deepEqual([...thirdPartySummary.byUrl.entries()], [
+        ['extensions::SafeBuiltins', {mainThreadTime: 1448, transferSize: 0}],
+        ['http://localhost:8080/', {mainThreadTime: 21674, transferSize: 0}],
+        ['http://localhost:8080/blocking.js', {mainThreadTime: 2451, transferSize: 0}],
+        ['http://localhost:8080/module.js', {mainThreadTime: 2256, transferSize: 0}],
+      ]);
+
+      const urls = [...thirdPartySummary.urlsByEntity.entries()].map(([entity, urls]) => [entity.name, [...urls]]);
+      assert.deepEqual(urls, [
+        [
+          'localhost',
+          [
+            'http://localhost:8080/',
+            'http://localhost:8080/blocking.js',
+            'http://localhost:8080/module.js',
+          ]
+        ],
+      ]);
     });
 
     it('partial trace bounds', async function() {

front_end/models/trace/extras/ThirdParties.ts

@@ -16,31 +16,46 @@ export interface Summary {
 
 export interface ThirdPartySummary {
   byEntity: Map<Entity, Summary>;
-  byEvent: Map<Types.Events.Event, Summary>;
+  byUrl: Map<string, Summary>;
+  urlsByEntity: Map<Entity, Set<string>>;
   eventsByEntity: Map<Entity, Types.Events.Event[]>;
   madeUpEntityCache: Map<string, Entity>;
 }
 
-function getOrMakeSummary(thirdPartySummary: ThirdPartySummary, event: Types.Events.Event, url: string): Summary|null {
+function getOrMakeSummaryByEntity(
+    thirdPartySummary: ThirdPartySummary, event: Types.Events.Event, url: string): Summary|null {
   const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ??
       Handlers.Helpers.makeUpEntity(thirdPartySummary.madeUpEntityCache, url);
   if (!entity) {
     return null;
   }
 
+  const urls = thirdPartySummary.urlsByEntity.get(entity) ?? new Set();
+  urls.add(url);
+  thirdPartySummary.urlsByEntity.set(entity, urls);
+
   const events = thirdPartySummary.eventsByEntity.get(entity) ?? [];
   events.push(event);
   thirdPartySummary.eventsByEntity.set(entity, events);
 
   let summary = thirdPartySummary.byEntity.get(entity);
   if (summary) {
-    thirdPartySummary.byEvent.set(event, summary);
     return summary;
   }
 
   summary = {transferSize: 0, mainThreadTime: Types.Timing.Micro(0)};
   thirdPartySummary.byEntity.set(entity, summary);
-  thirdPartySummary.byEvent.set(event, summary);
+  return summary;
+}
+
+function getOrMakeSummaryByURL(thirdPartySummary: ThirdPartySummary, url: string): Summary|null {
+  let summary = thirdPartySummary.byUrl.get(url);
+  if (summary) {
+    return summary;
+  }
+
+  summary = {transferSize: 0, mainThreadTime: Types.Timing.Micro(0)};
+  thirdPartySummary.byUrl.set(url, summary);
   return summary;
 }
 
@@ -73,7 +88,12 @@ function collectMainThreadActivity(
             continue;
           }
 
-          const summary = getOrMakeSummary(thirdPartySummary, event, url);
+          let summary = getOrMakeSummaryByEntity(thirdPartySummary, event, url);
+          if (summary) {
+            summary.mainThreadTime = (summary.mainThreadTime + node.selfTime) as Types.Timing.Micro;
+          }
+
+          summary = getOrMakeSummaryByURL(thirdPartySummary, url);
           if (summary) {
             summary.mainThreadTime = (summary.mainThreadTime + node.selfTime) as Types.Timing.Micro;
           }
@@ -87,7 +107,13 @@ function collectNetworkActivity(
     thirdPartySummary: ThirdPartySummary, requests: Types.Events.SyntheticNetworkRequest[]): void {
   for (const request of requests) {
     const url = request.args.data.url;
-    const summary = getOrMakeSummary(thirdPartySummary, request, url);
+
+    let summary = getOrMakeSummaryByEntity(thirdPartySummary, request, url);
+    if (summary) {
+      summary.transferSize += request.args.data.encodedDataLength;
+    }
+
+    summary = getOrMakeSummaryByURL(thirdPartySummary, url);
     if (summary) {
       summary.transferSize += request.args.data.encodedDataLength;
     }
@@ -102,7 +128,8 @@ export function summarizeThirdParties(
     networkRequests: Types.Events.SyntheticNetworkRequest[]): ThirdPartySummary {
   const thirdPartySummary: ThirdPartySummary = {
     byEntity: new Map(),
-    byEvent: new Map(),
+    byUrl: new Map(),
+    urlsByEntity: new Map(),
     eventsByEntity: new Map(),
     madeUpEntityCache: new Map(),
   };
@@ -141,7 +168,7 @@ function getSummaryMapWithMapping(
     byEntity.set(entity, entitySummary);
   }
 
-  return {byEntity, byEvent, eventsByEntity, madeUpEntityCache: new Map()};
+  return {byEntity, eventsByEntity, madeUpEntityCache: new Map(), byUrl: new Map(), urlsByEntity: new Map()};
 }
 
 // TODO(crbug.com/352244718): Remove or refactor to use summarizeThirdParties/collectMainThreadActivity/etc.

front_end/models/trace/insights/ThirdParties.ts

@@ -30,8 +30,8 @@ export const UIStrings = {
   columnThirdParty: 'Third party',
   /** Label for a column in a data table; entries will be the download size of a web resource in kilobytes. */
   columnTransferSize: 'Transfer size',
-  /** Label for a table column that displays how much time each row spent blocking other work on the main thread, entries will be the number of milliseconds spent. */
-  columnBlockingTime: 'Blocking time',
+  /** Label for a table column that displays how much time each row spent running on the main thread, entries will be the number of milliseconds spent. */
+  columnMainThreadTimeTime: 'Main thread time',
   /**
    * @description Text block indicating that no third party content was detected on the page
    */

front_end/panels/timeline/components/insights/ThirdParties.ts

@@ -96,7 +96,7 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
           <devtools-performance-table
             .data=${{
               insight: this,
-              headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnBlockingTime)],
+              headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnMainThreadTimeTime)],
               rows: topMainThreadTimeEntries.map(([entity, summary]) => ({
                 values: [
                   entity.name,