Performance: hide more unsupported features (#150)

front_end/models/timeline_model/TimelineModelFilter.test.ts

@@ -5,8 +5,14 @@
 import {TraceLoader} from '../../testing/TraceLoader.js';
 import * as TimelineModel from '../timeline_model/timeline_model.js';
 import * as TraceEngine from '../trace/trace.js';
+import {initializeGlobalVars} from '../../testing/EnvironmentHelpers.js';
 
 describe('TimelineModelFilter', () => {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   describe('TimelineVisibleEventsFilter', () => {
     it('accepts events that are set in the constructor and rejects other events', async function() {
       const {traceData} = await TraceLoader.traceEngine(this, 'user-timings.json.gz');
@@ -78,6 +84,11 @@ describe('TimelineModelFilter', () => {
   });
 
   describe('ExclusiveNameFilter', () => {
+    before(async () => {
+      // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+      await initializeGlobalVars();
+    });
+
     it('accepts events that do not match the provided set of names to exclude', async function() {
       const {traceData} = await TraceLoader.traceEngine(this, 'user-timings.json.gz');
       const userTimingEvent = (traceData.UserTimings.performanceMeasures).at(0);

front_end/models/trace/EntriesFilter.test.ts

@@ -8,6 +8,7 @@
 
 import {TraceLoader} from '../../testing/TraceLoader.js';
 import * as TraceEngine from '../trace/trace.js';
+import {initializeGlobalVars} from '../../testing/EnvironmentHelpers.js';
 
 function getMainThread(traceData: TraceEngine.Handlers.ModelHandlers.Renderer.RendererHandlerData):
     TraceEngine.Handlers.ModelHandlers.Renderer.RendererThread {
@@ -38,6 +39,11 @@ function findFirstEntry(
 }
 
 describe('EntriesFilter', function() {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   it('parses a stack and returns an empty list of invisible entries', async function() {
     const {traceData} = await TraceLoader.traceEngine(this, 'basic-stack.json.gz');
     const stack = new TraceEngine.EntriesFilter.EntriesFilter(traceData.Renderer.entryToNode);

front_end/models/trace/handlers/RendererHandler.ts

@@ -10,6 +10,7 @@ import {data as auctionWorkletsData} from './AuctionWorkletsHandler.js';
 import {data as metaHandlerData, type FrameProcessData} from './MetaHandler.js';
 import {data as samplesHandlerData} from './SamplesHandler.js';
 import {HandlerState, type TraceEventHandlerName} from './types.js';
+import * as Root from '../../../core/root/root.js';
 
 /**
  * This handler builds the hierarchy of trace events and profile calls
@@ -23,6 +24,8 @@ import {HandlerState, type TraceEventHandlerName} from './types.js';
  * event type.
  */
 
+let isReactNative: boolean;
+
 const processes = new Map<Types.TraceEvents.ProcessID, RendererProcess>();
 
 // We track the compositor tile worker thread name events so that at the end we
@@ -80,6 +83,11 @@ export function initialize(): void {
     throw new Error('Renderer Handler was not reset');
   }
 
+  // [RN] Used to scope down available features for React Native targets
+  isReactNative = Root.Runtime.experiments.isEnabled(
+    Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
+  );
+
   handlerState = HandlerState.INITIALIZED;
 }
 
@@ -245,6 +253,11 @@ export function assignThreadName(
  *  - Deletes processes with an unkonwn origin.
  */
 export function sanitizeProcesses(processes: Map<Types.TraceEvents.ProcessID, RendererProcess>): void {
+  // See https://docs.google.com/document/d/1_mtLIHEd9bFQN4xWBSVDR357GaRo56khB1aOxgWDeu4/edit?tab=t.0 for context.
+  if (isReactNative) {
+    return;
+  }
+
   const auctionWorklets = auctionWorkletsData().worklets;
   const metaData = metaHandlerData();
   if (metaData.traceIsGeneric) {

front_end/models/trace/handlers/WarningsHandler.test.ts

@@ -4,8 +4,14 @@
 
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as TraceEngine from '../trace.js';
+import {initializeGlobalVars} from '../../../testing/EnvironmentHelpers.js';
 
 describe('WarningsHandler', function() {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   beforeEach(() => {
     TraceEngine.Handlers.ModelHandlers.Warnings.reset();
   });

front_end/models/trace/helpers/SyntheticEvents.test.ts

@@ -4,8 +4,14 @@
 
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as TraceModel from '../trace.js';
+import {initializeGlobalVars} from '../../../testing/EnvironmentHelpers.js';
 
 describe('SyntheticEvents', function() {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   beforeEach(() => {
     TraceModel.Helpers.SyntheticEvents.SyntheticEventsManager.reset();
   });

front_end/models/trace/insights/CumulativeLayoutShift.test.ts

@@ -8,6 +8,7 @@ import type * as TraceModel from '../trace.js';
 import * as Types from '../types/types.js';
 
 import {InsightRunners} from './insights.js';
+import {initializeGlobalVars} from '../../../testing/EnvironmentHelpers.js';
 
 export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
   const {traceData, insights} = await TraceLoader.traceEngine(testContext, traceFile);
@@ -34,6 +35,11 @@ function getInsight(insights: TraceModel.Insights.Types.TraceInsightData, naviga
 const INVALIDATION_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
 
 describe('CumulativeLayoutShift', function() {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   describe('non composited animations', function() {
     it('gets the correct non composited animations', async function() {
       const {data, insights} = await processTrace(this, 'non-composited-animation.json.gz');

front_end/models/trace/insights/DocumentLatency.test.ts

@@ -5,6 +5,7 @@
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as TraceModel from '../trace.js';
 import * as Types from '../types/types.js';
+import {initializeGlobalVars} from '../../../testing/EnvironmentHelpers.js';
 
 export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
   const {traceData, insights} = await TraceLoader.traceEngine(testContext, traceFile);
@@ -28,6 +29,11 @@ function getInsight(insights: TraceModel.Insights.Types.TraceInsightData, naviga
 }
 
 describe('DocumentLatency', function() {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   it('reports savings for main document with redirects', async () => {
     const {data, insights} = await processTrace(this, 'lantern/redirect/trace.json.gz');
     const insight = getInsight(insights, data.Meta.navigationsByNavigationId.keys().next().value);

front_end/models/trace/insights/InteractionToNextPaint.test.ts

@@ -4,6 +4,7 @@
 
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as TraceModel from '../trace.js';
+import {initializeGlobalVars} from '../../../testing/EnvironmentHelpers.js';
 
 export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
   const {traceData, insights} = await TraceLoader.traceEngine(testContext, traceFile);
@@ -15,6 +16,11 @@ export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null,
 }
 
 describe('InteractionToNextPaint', function() {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   const test = (traceFile: string, longest?: number, highPercentile?: number) => {
     if (highPercentile === undefined) {
       highPercentile = longest;

front_end/models/trace/insights/LargestContentfulPaint.test.ts

@@ -5,6 +5,7 @@
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import type * as TraceModel from '../trace.js';
 import * as Types from '../types/types.js';
+import {initializeGlobalVars} from '../../../testing/EnvironmentHelpers.js';
 
 export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
   const {traceData, insights} = await TraceLoader.traceEngine(testContext, traceFile);
@@ -28,6 +29,11 @@ function getInsight(insights: TraceModel.Insights.Types.TraceInsightData, naviga
 }
 
 describe('LargestContentfulPaint', function() {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   it('text lcp phases', async () => {
     const {data, insights} = await processTrace(this, 'lcp-web-font.json.gz');
     const insight = getInsight(insights, data.Meta.navigationsByNavigationId.keys().next().value);

front_end/models/trace/lantern/core/NetworkAnalyzer.test.ts

@@ -7,6 +7,7 @@
 import * as TraceModel from '../../trace.js';
 import * as Lantern from '../lantern.js';
 import {loadTrace, runTraceEngine} from '../testing/testing.js';
+import {initializeGlobalVars} from '../../../../testing/EnvironmentHelpers.js';
 
 const {NetworkAnalyzer} = Lantern.Core;
 
@@ -19,6 +20,8 @@ describe('NetworkAnalyzer', () => {
   let trace: Lantern.Types.Trace;
   let traceWithRedirect: Lantern.Types.Trace;
   before(async function() {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
     trace = await loadTrace(this, 'lantern/paul/trace.json.gz');
     traceWithRedirect = await loadTrace(this, 'lantern/redirect/trace.json.gz');
   });

front_end/panels/timeline/Initiators.test.ts

@@ -4,10 +4,16 @@
 
 import * as TraceEngine from '../../models/trace/trace.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
+import {initializeGlobalVars} from '../../testing/EnvironmentHelpers.js';
 
 import * as Timeline from './timeline.js';
 
 describe('Initiators', () => {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   it('returns the initiator data', async function() {
     const {traceData} = await TraceLoader.traceEngine(this, 'set-timeout-long-task.json.gz');
 

front_end/panels/timeline/ModificationsManager.test.ts

@@ -5,8 +5,14 @@
 import type * as TraceEngine from '../../models/trace/trace.js';
 import {TraceLoader} from '../../testing/TraceLoader.js';
 import * as Timeline from './timeline.js';
+import {initializeGlobalVars} from '../../testing/EnvironmentHelpers.js';
 
 describe('ModificationsManager', () => {
+  before(async () => {
+    // [RN] This will register required REACT_NATIVE_SPECIFIC_UI experiment.
+    await initializeGlobalVars();
+  });
+
   it('applies modifications when present in a trace file', async function() {
     await TraceLoader.traceEngine(null, 'web-dev-modifications.json.gz');
     const modificationsManager = Timeline.ModificationsManager.ModificationsManager.activeManager();

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -80,6 +80,8 @@ export type TimelineFlameChartEntry =
 
 export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     PerfUI.FlameChart.FlameChartDataProvider {
+  private isReactNative: boolean = false;
+
   private droppedFramePatternCanvas: HTMLCanvasElement;
   private partialFramePatternCanvas: HTMLCanvasElement;
   private timelineDataInternal: PerfUI.FlameChart.FlameChartTimelineData|null;
@@ -114,6 +116,12 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
 
   constructor() {
     super();
+
+    // [RN] Used to scope down available features for React Native targets
+    this.isReactNative = Root.Runtime.experiments.isEnabled(
+      Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
+    );
+
     this.reset();
     this.#font = `${PerfUI.Font.DEFAULT_FONT_SIZE} ${PerfUI.Font.getFontFamilyForCanvas()}`;
     this.droppedFramePatternCanvas = document.createElement('canvas');
@@ -364,7 +372,10 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   #processInspectorTrace(): void {
     if (!this.isCpuProfile) {
       // CPU Profiles do not have frames and screenshots.
-      this.#appendFramesAndScreenshotsTrack();
+      // See https://docs.google.com/document/d/1_mtLIHEd9bFQN4xWBSVDR357GaRo56khB1aOxgWDeu4/edit?tab=t.0 for context.
+      if (!this.isReactNative) {
+        this.#appendFramesAndScreenshotsTrack();
+      }
     }
 
     const weight = (track: {type?: string, forMainFrame?: boolean, appenderName?: TrackAppenderName}): number => {

front_end/panels/timeline/TimelineLandingPage.ts

@@ -48,11 +48,17 @@ interface Options {
 }
 
 export class TimelineLandingPage extends UI.Widget.VBox {
+  private readonly isReactNative: boolean = false;
   private readonly toggleRecordAction: UI.ActionRegistration.Action;
 
   constructor(toggleRecordAction: UI.ActionRegistration.Action, options?: Options) {
     super();
 
+    // [RN] Used to scope down available features for React Native targets
+    this.isReactNative = Root.Runtime.experiments.isEnabled(
+      Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI,
+    );
+
     this.toggleRecordAction = toggleRecordAction;
 
     this.contentElement.classList.add('timeline-landing-page', 'fill');
@@ -83,22 +89,27 @@ export class TimelineLandingPage extends UI.Widget.VBox {
     const recordKey = encloseWithTag(
         'b',
         UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('timeline.toggle-recording')[0].title());
-    const reloadKey = encloseWithTag(
+    // See https://docs.google.com/document/d/1_mtLIHEd9bFQN4xWBSVDR357GaRo56khB1aOxgWDeu4/edit?tab=t.0 for context.
+    const reloadKey = this.isReactNative ? null : encloseWithTag(
         'b', UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('timeline.record-reload')[0].title());
     const navigateNode = encloseWithTag('b', i18nString(UIStrings.wasd));
 
     this.contentElement.classList.add('legacy');
     const centered = this.contentElement.createChild('div');
 
     const recordButton = UI.UIUtils.createInlineButton(UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction));
-    const reloadButton =
+    // See https://docs.google.com/document/d/1_mtLIHEd9bFQN4xWBSVDR357GaRo56khB1aOxgWDeu4/edit?tab=t.0 for context.
+    const reloadButton = this.isReactNative ? null :
         UI.UIUtils.createInlineButton(UI.Toolbar.Toolbar.createActionButtonForId('timeline.record-reload'));
 
     centered.createChild('p').appendChild(i18n.i18n.getFormatLocalizedString(
         str_, UIStrings.clickTheRecordButtonSOrHitSTo, {PH1: recordButton, PH2: recordKey}));
 
-    centered.createChild('p').appendChild(i18n.i18n.getFormatLocalizedString(
+    // See https://docs.google.com/document/d/1_mtLIHEd9bFQN4xWBSVDR357GaRo56khB1aOxgWDeu4/edit?tab=t.0 for context.
+    if (!this.isReactNative && reloadButton !== null && reloadKey !== null) {
+      centered.createChild('p').appendChild(i18n.i18n.getFormatLocalizedString(
         str_, UIStrings.clickTheReloadButtonSOrHitSTo, {PH1: reloadButton, PH2: reloadKey}));
+    }
 
     centered.createChild('p').appendChild(i18n.i18n.getFormatLocalizedString(
         str_, UIStrings.afterRecordingSelectAnAreaOf, {PH1: navigateNode, PH2: learnMoreNode}));