core: Support traces with TracingStartedInBrowser event

Since version 67 Chrome uses a new schema to describe page frame tree.
The tree is encoded within TracingStartedInBrowser trace event.
The patch makes lighthouse to support the new event.
Legacy TracingStartedInPage event is going to the removed soon.

lighthouse-core/gather/computed/trace-of-tab.js

@@ -45,18 +45,32 @@ class TraceOfTab extends ComputedArtifact {
       .filter(e => {
         return e.cat.includes('blink.user_timing') ||
           e.cat.includes('loading') ||
-          e.cat.includes('devtools.timeline') ||
-          e.name === 'TracingStartedInPage';
+          e.cat.includes('devtools.timeline');
       })
       // @ts-ignore - stableSort added to Array by WebInspector.
       .stableSort((event0, event1) => event0.ts - event1.ts);
 
-    // The first TracingStartedInPage in the trace is definitely our renderer thread of interest
-    // Beware: the tracingStartedInPage event can appear slightly after a navigationStart
-    const startedInPageEvt = keyEvents.find(e => e.name === 'TracingStartedInPage');
+    // Find out the inspected page frame.
+    let startedInPageEvt;
+    const startedInBrowserEvt = keyEvents.find(e => e.name === 'TracingStartedInBrowser');
+    if (startedInBrowserEvt && startedInBrowserEvt.args.data &&
+        startedInBrowserEvt.args.data.persistentIds) {
+      const mainFrame = startedInBrowserEvt.args.data.frames.find(frame => !frame.parent);
+      const mainFrameId = mainFrame && mainFrame.frame;
+      startedInPageEvt = mainFrameId ?
+        {...startedInBrowserEvt, name: 'TracingStartedInPage', args: {data: {page: mainFrameId}}} :
+        undefined;
+    }
+    // Support legacy browser versions that do not emit TracingStartedInBrowser event.
+    if (!startedInPageEvt) {
+      // The first TracingStartedInPage in the trace is definitely our renderer thread of interest
+      // Beware: the tracingStartedInPage event can appear slightly after a navigationStart
+      startedInPageEvt = keyEvents.find(e => e.name === 'TracingStartedInPage');
+    }
     if (!startedInPageEvt) throw new LHError(LHError.errors.NO_TRACING_STARTED);
     // @ts-ignore - property chain exists for 'TracingStartedInPage' event.
     const frameId = startedInPageEvt.args.data.page;
+
     // Filter to just events matching the frame ID for sanity
     const frameEvents = keyEvents.filter(e => e.args.frame === frameId);