Merge branch 'main' into users/devanb/frames

Author: sbuggay

config/gni/devtools_grd_files.gni

@@ -995,7 +995,7 @@ grd_files_debug_sources = [
   "front_end/entrypoints/node_app/NodeMain.js",
   "front_end/entrypoints/node_app/nodeConnectionsPanel.css.js",
   "front_end/entrypoints/rn_fusebox/FuseboxAppMetadataObserver.js",
-  "front_end/entrypoints/rn_fusebox/FuseboxExperimentsObserver.js",
+  "front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.js",
   "front_end/entrypoints/rn_fusebox/FuseboxReconnectDeviceButton.js",
   "front_end/entrypoints/rn_fusebox/FuseboxWindowTitleManager.js",
   "front_end/entrypoints/shell/browser_compatibility_guard.js",
@@ -1941,9 +1941,12 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/NetworkThrottlingSelector.js",
   "front_end/panels/timeline/components/OriginMap.js",
   "front_end/panels/timeline/components/RelatedInsightChips.js",
+  "front_end/panels/timeline/components/RNPerfIssueTypes.js",
   "front_end/panels/timeline/components/Sidebar.js",
   "front_end/panels/timeline/components/SidebarAnnotationsTab.js",
   "front_end/panels/timeline/components/SidebarInsightsTab.js",
+  "front_end/panels/timeline/components/SidebarRNPerfSignalsTab.js",
+  "front_end/panels/timeline/components/SidebarRNPerfIssueItem.js",
   "front_end/panels/timeline/components/SidebarSingleInsightSet.js",
   "front_end/panels/timeline/components/TimelineSummary.js",
   "front_end/panels/timeline/components/Utils.js",
@@ -1994,6 +1997,8 @@ grd_files_debug_sources = [
   "front_end/panels/timeline/components/relatedInsightChips.css.js",
   "front_end/panels/timeline/components/sidebarAnnotationsTab.css.js",
   "front_end/panels/timeline/components/sidebarInsightsTab.css.js",
+  "front_end/panels/timeline/components/sidebarRNPerfIssuesTab.css.js",
+  "front_end/panels/timeline/components/sidebarRNPerfIssueItem.css.js",
   "front_end/panels/timeline/components/sidebarSingleInsightSet.css.js",
   "front_end/panels/timeline/components/timelineSummary.css.js",
   "front_end/panels/timeline/extensions/ExtensionUI.js",

front_end/core/common/SettingRegistration.ts

@@ -136,6 +136,7 @@ export const enum SettingCategory {
   APPEARANCE = 'APPEARANCE',
   SOURCES = 'SOURCES',
   NETWORK = 'NETWORK',
+  NETWORK_UNLESS_RN = '',
   PERFORMANCE = 'PERFORMANCE',
   CONSOLE = 'CONSOLE',
   PERSISTENCE = 'PERSISTENCE',

front_end/core/host/RNPerfMetrics.ts

@@ -216,6 +216,10 @@ class RNPerfMetrics {
     }
   }
 
+  traceRequested(): void {
+    this.sendEvent({eventName: 'Tracing.TraceRequested'});
+  }
+
   heapSnapshotStarted(): void {
     this.sendEvent({
       eventName: 'MemoryPanelActionStarted',
@@ -539,12 +543,17 @@ export type ManualBreakpointSetSucceeded = Readonly<{
   }>,
 }>;
 
+export type TracingTraceRequestedEvent = Readonly<{
+  eventName: 'Tracing.TraceRequested',
+}>;
+
 export type ReactNativeChromeDevToolsEvent =
     EntrypointLoadingStartedEvent|EntrypointLoadingFinishedEvent|DebuggerReadyEvent|BrowserVisibilityChangeEvent|
     BrowserErrorEvent|RemoteDebuggingTerminatedEvent|DeveloperResourcesStartupLoadingFinishedEvent|
     DeveloperResourceLoadingStartedEvent|DeveloperResourceLoadingFinishedEvent|FuseboxSetClientMetadataStartedEvent|
-    FuseboxSetClientMetadataFinishedEvent|MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|PanelShownEvent|
-    PanelClosedEvent|StackTraceSymbolicationSucceeded|StackTraceSymbolicationFailed|StackTraceFrameUrlResolutionSucceeded|
-    StackTraceFrameUrlResolutionFailed|ManualBreakpointSetSucceeded|StackTraceFrameClicked;
+    FuseboxSetClientMetadataFinishedEvent|TracingTraceRequestedEvent|MemoryPanelActionStartedEvent|MemoryPanelActionFinishedEvent|
+    PanelShownEvent|PanelClosedEvent|StackTraceSymbolicationSucceeded|StackTraceSymbolicationFailed|
+    StackTraceFrameUrlResolutionSucceeded|StackTraceFrameUrlResolutionFailed|ManualBreakpointSetSucceeded|
+    StackTraceFrameClicked;
 
 export type DecoratedReactNativeChromeDevToolsEvent = CommonEventFields&ReactNativeChromeDevToolsEvent;

front_end/core/root/Runtime.ts

@@ -305,8 +305,6 @@ export const experiments = new ExperimentsSupport();
 export enum RNExperimentName {
   REACT_NATIVE_SPECIFIC_UI = 'react-native-specific-ui',
   JS_HEAP_PROFILER_ENABLE = 'js-heap-profiler-enable',
-  ENABLE_NETWORK_PANEL = 'enable-network-panel',
-  ENABLE_TIMELINE_FRAMES = 'enable-timeline-frames',
 }
 
 export enum ConditionName {
@@ -517,7 +515,5 @@ export type Condition = (config?: HostConfig) => boolean;
 export const conditions = {
   canDock: () => Boolean(Runtime.queryParam('can_dock')),
   notSourcesHideAddFolder: () => Boolean(Runtime.queryParam(ConditionName.NOT_SOURCES_HIDE_ADD_FOLDER)),
-  reactNativeUnstableNetworkPanel: () =>
-      Boolean(Runtime.queryParam(ConditionName.REACT_NATIVE_UNSTABLE_NETWORK_PANEL)) ||
-      experiments.isEnabled(ExperimentName.ENABLE_NETWORK_PANEL),
+  reactNativeExpoNetworkPanel: () => Boolean(Runtime.queryParam(ConditionName.REACT_NATIVE_UNSTABLE_NETWORK_PANEL)),
 };

front_end/core/sdk/ReactNativeApplicationModel.ts

@@ -52,17 +52,24 @@ export class ReactNativeApplicationModel extends SDKModel<EventTypes> implements
     this.dispatchEventToListeners(Events.METADATA_UPDATED, metadata);
   }
 
+  systemStateChanged(params: Protocol.ReactNativeApplication.SystemStateChangedEvent): void {
+    this.dispatchEventToListeners(Events.SYSTEM_STATE_CHANGED, params);
+  }
+
   traceRequested(): void {
+    Host.rnPerfMetrics.traceRequested();
     this.dispatchEventToListeners(Events.TRACE_REQUESTED);
   }
 }
 
 export const enum Events {
   METADATA_UPDATED = 'MetadataUpdated',
+  SYSTEM_STATE_CHANGED = 'SystemStateChanged',
   TRACE_REQUESTED = 'TraceRequested',
 }
 
 export interface EventTypes {
   [Events.METADATA_UPDATED]: Protocol.ReactNativeApplication.MetadataUpdatedEvent;
+  [Events.SYSTEM_STATE_CHANGED]: Protocol.ReactNativeApplication.SystemStateChangedEvent;
   [Events.TRACE_REQUESTED]: void;
 }

front_end/core/sdk/sdk-meta.ts

@@ -1009,7 +1009,7 @@ Common.Settings.registerSettingExtension({
 });
 
 Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.NETWORK,
+  category: Common.Settings.SettingCategory.NETWORK_UNLESS_RN,
   title: i18nLazyString(UIStrings.networkRequestBlocking),
   settingName: 'request-blocking-enabled',
   settingType: Common.Settings.SettingType.BOOLEAN,

front_end/entrypoints/inspector_main/inspector_main-meta.ts

@@ -207,7 +207,7 @@ UI.ActionRegistration.registerActionExtension({
 });
 
 Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.NETWORK,
+  category: Common.Settings.SettingCategory.NETWORK_UNLESS_RN,
   title: i18nLazyString(UIStrings.forceAdBlocking),
   settingName: 'network.ad-blocking-enabled',
   settingType: Common.Settings.SettingType.BOOLEAN,

front_end/entrypoints/rn_fusebox/BUILD.gn

@@ -11,7 +11,7 @@ devtools_module("rn_fusebox") {
   sources = [
     "FuseboxAppMetadataObserver.ts",
     "FuseboxReconnectDeviceButton.ts",
-    "FuseboxExperimentsObserver.ts",
+    "FuseboxFeatureObserver.ts",
     "FuseboxWindowTitleManager.ts",
   ]