[RPP] Use main thread and treeView bottomUpRootNode for 3P insight

This also simplifies the insight shape closer to how we use it in RPP,
and how we will use it in LH. This also simplifies some tests.

This modifies how we generate eventIDs when grouping by 3P. This fixes a
bug where when grouping by 3P, generateEventID can incorrectly group
events of different entities.

This fixes:
- misalignment in main thread times insight<->3P table
(by using same data source, including instant events, filters)
- incorrect event grouping: breaking bottomUp button and causing further
incorrect selftime/transfersize (bottomUp tree node ID generation)

Bug: 394651390
Change-Id: I1660a5b5b9a90be89815aad858caea94f153eabb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6341914
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>

Author: Adriana Ixba

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

@@ -6,44 +6,39 @@ import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
+function extractUrlsFromSummaries(summaries: Trace.Extras.ThirdParties.Summary[]): Array<[string, string[]]> {
+  return summaries.map(s => {
+    const uniqueUrls = new Set<string>();
+    s.relatedEvents?.forEach(e => {
+      const url = e.args?.data?.url;
+      if (url) {
+        uniqueUrls.add(url);
+      }
+    });
+    return [s.entity.name, Array.from(uniqueUrls)];
+  });
+}
+
 describeWithEnvironment('ThirdParties', function() {
   describe('byTraceBounds', function() {
     it('full trace bounds', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const summaries = Trace.Extras.ThirdParties.summarizeThirdParties(parsedTrace, parsedTrace.Meta.traceBounds);
 
-      const requests = parsedTrace.NetworkRequests.byTime.filter(
-          request => Trace.Helpers.Timing.eventIsInBounds(request, parsedTrace.Meta.traceBounds));
-      const thirdPartySummary =
-          Trace.Extras.ThirdParties.summarizeThirdParties(parsedTrace, parsedTrace.Meta.traceBounds, requests);
-
-      const results = [...thirdPartySummary.byEntity.entries()].map(([entity, summary]) => [entity.name, summary]);
+      const results = summaries.map(s => [s.entity.name, s.mainThreadTime, s.transferSize]);
       assert.deepEqual(results, [
-        ['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}
-        ],
+        ['localhost', 24.947999954223633, 2254],
+        ['Google Fonts', 0, 25325],
       ]);
-
-      const urls = [...thirdPartySummary.urlsByEntity.entries()].map(([entity, urls]) => [entity.name, [...urls]]);
+      const urls = extractUrlsFromSummaries(summaries);
       assert.deepEqual(urls, [
         [
           'localhost',
           [
             'http://localhost:8080/',
+            'http://localhost:8080/styles.css',
             'http://localhost:8080/blocking.js',
             'http://localhost:8080/module.js',
-            'http://localhost:8080/styles.css',
           ]
         ],
         [
@@ -56,38 +51,6 @@ describeWithEnvironment('ThirdParties', function() {
       ]);
     });
 
-    it('works even without network requests', async function() {
-      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
-
-      const thirdPartySummary =
-          Trace.Extras.ThirdParties.summarizeThirdParties(parsedTrace, parsedTrace.Meta.traceBounds, []);
-
-      const results = [...thirdPartySummary.byEntity.entries()].map(([entity, summary]) => [entity.name, summary]);
-      assert.deepEqual(results, [
-        // 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() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
 
@@ -96,14 +59,12 @@ describeWithEnvironment('ThirdParties', function() {
       const max = Trace.Types.Timing.Micro(1634222320000);
       const bounds = {min, max, range: Trace.Types.Timing.Micro(max - min)};
 
-      const requests =
-          parsedTrace.NetworkRequests.byTime.filter(request => Trace.Helpers.Timing.eventIsInBounds(request, bounds));
-      const thirdPartySummary = Trace.Extras.ThirdParties.summarizeThirdParties(parsedTrace, bounds, requests);
+      const summaries = Trace.Extras.ThirdParties.summarizeThirdParties(parsedTrace, bounds);
 
-      const results = [...thirdPartySummary.byEntity.entries()].map(([entity, summary]) => [entity.name, summary]);
+      const results = summaries.map(s => [s.entity.name, s.mainThreadTime, s.transferSize]);
       assert.deepEqual(results, [
         // No main thread during given bounds. Some network.
-        ['localhost', {mainThreadTime: 0, transferSize: 751}],
+        ['localhost', 0, 419],
       ]);
     });
 
@@ -113,12 +74,9 @@ describeWithEnvironment('ThirdParties', function() {
       const min = Trace.Types.Timing.Micro(1634230000000);
       const max = Trace.Types.Timing.Micro(1634231000000);
       const bounds = {min, max, range: Trace.Types.Timing.Micro(max - min)};
+      const summaries = Trace.Extras.ThirdParties.summarizeThirdParties(parsedTrace, bounds);
 
-      const requests =
-          parsedTrace.NetworkRequests.byTime.filter(request => Trace.Helpers.Timing.eventIsInBounds(request, bounds));
-      const thirdPartySummary = Trace.Extras.ThirdParties.summarizeThirdParties(parsedTrace, bounds, requests);
-
-      const results = [...thirdPartySummary.byEntity.entries()].map(([entity, summary]) => [entity.name, summary]);
+      const results = summaries.map(s => [s.entity.name, s.mainThreadTime, s.transferSize]);
       assert.deepEqual(results, []);
     });
   });