Add Use Legacy Trace Viewer setting to the Performance page (flutter#4579)

Author: kenzieschmoll

packages/devtools_app/lib/src/screens/performance/panes/controls/performance_settings.dart

@@ -4,6 +4,7 @@
 
 import 'package:flutter/material.dart';
 
+import '../../../../primitives/feature_flags.dart';
 import '../../../../shared/common_widgets.dart';
 import '../../../../shared/dialogs.dart';
 import '../../../../shared/globals.dart';
@@ -137,6 +138,12 @@ class FlutterSettings extends StatelessWidget {
           notifier: controller.badgeTabForJankyFrames as ValueNotifier<bool?>,
           title: 'Badge Performance tab when Flutter UI jank is detected',
         ),
+        if (FeatureFlags.embeddedPerfetto)
+          CheckboxSetting(
+            notifier: controller.useLegacyTraceViewer,
+            title: 'Use legacy trace viewer',
+            onChanged: controller.toggleUseLegacyTraceViewer,
+          ),
       ],
     );
   }

packages/devtools_app/lib/src/screens/performance/panes/timeline_events/perfetto/_perfetto_controller_web.dart

@@ -133,11 +133,28 @@ class PerfettoController extends DisposableController
     );
   }
 
-  void _postMessage(dynamic message) {
-    _perfettoIFrame.contentWindow!.postMessage(
-      message,
-      _perfettoUrl,
-    );
+  void _postMessage(dynamic message) async {
+    final callback = () {
+      _perfettoIFrame.contentWindow!.postMessage(
+        message,
+        _perfettoUrl,
+      );
+    };
+    if (_perfettoIFrame.contentWindow != null) {
+      callback.call();
+    } else {
+      late StreamSubscription? onLoad;
+      onLoad = _perfettoIFrame.onLoad.listen((event) {
+        assert(
+          _perfettoIFrame.contentWindow != null,
+          'Something went wrong. The iFrame\'s contentWindow is null after the'
+          ' onLoad event.',
+        );
+        callback.call();
+        onLoad?.cancel();
+        onLoad = null;
+      });
+    }
   }
 
   void _postMessageWithId(String id, {Map<String, dynamic> args = const {}}) {

packages/devtools_app/lib/src/screens/performance/performance_controller.dart

@@ -72,6 +72,9 @@ class PerformanceController extends DisposableController
 
   final perfettoController = createPerfettoController();
 
+  final useLegacyTraceViewer =
+      ValueNotifier<bool>(!FeatureFlags.embeddedPerfetto || !kIsWeb);
+
   final _exportController = ExportController();
 
   /// The currently selected timeline event.
@@ -699,7 +702,7 @@ class PerformanceController extends DisposableController
   }
 
   FutureOr<void> processTraceEvents(List<TraceEventWrapper> traceEvents) async {
-    if (FeatureFlags.embeddedPerfetto) {
+    if (FeatureFlags.embeddedPerfetto && !useLegacyTraceViewer.value) {
       await perfettoController.loadTrace(traceEvents);
     } else {
       await _processTraceEvents(traceEvents);
@@ -929,6 +932,11 @@ class PerformanceController extends DisposableController
     _httpTimelineLoggingEnabled.value = state;
   }
 
+  void toggleUseLegacyTraceViewer(bool? value) {
+    useLegacyTraceViewer.value = value ?? false;
+    processAvailableEvents();
+  }
+
   /// Clears the timeline data currently stored by the controller as well the
   /// VM timeline if a connected app is present.
   Future<void> clearData() async {

packages/devtools_app/lib/src/screens/performance/performance_screen.dart

@@ -164,21 +164,26 @@ class PerformanceScreenBodyState extends State<PerformanceScreenBody>
             },
           ),
         Expanded(
-          child: FeatureFlags.embeddedPerfetto
-              ? tabbedPerformanceView
-              : Split(
-                  axis: Axis.vertical,
-                  initialFractions: const [0.7, 0.3],
-                  children: [
-                    tabbedPerformanceView,
-                    ValueListenableBuilder<TimelineEvent?>(
-                      valueListenable: controller.selectedTimelineEvent,
-                      builder: (context, selectedEvent, _) {
-                        return EventDetails(selectedEvent);
-                      },
-                    ),
-                  ],
-                ),
+          child: ValueListenableBuilder<bool>(
+            valueListenable: controller.useLegacyTraceViewer,
+            builder: (context, useLegacy, _) {
+              return FeatureFlags.embeddedPerfetto && !useLegacy
+                  ? tabbedPerformanceView
+                  : Split(
+                      axis: Axis.vertical,
+                      initialFractions: const [0.7, 0.3],
+                      children: [
+                        tabbedPerformanceView,
+                        ValueListenableBuilder<TimelineEvent?>(
+                          valueListenable: controller.selectedTimelineEvent,
+                          builder: (context, selectedEvent, _) {
+                            return EventDetails(selectedEvent);
+                          },
+                        ),
+                      ],
+                    );
+            },
+          ),
         ),
       ],
     );

packages/devtools_app/lib/src/screens/performance/tabbed_performance_view.dart

@@ -84,19 +84,25 @@ class _TabbedPerformanceViewState extends State<TabbedPerformanceView>
 
     final isFlutterApp = serviceManager.connectedApp!.isFlutterAppNow!;
     final tabViews = [
-      FeatureFlags.embeddedPerfetto
-          ? KeepAliveWrapper(
-              child: EmbeddedPerfetto(
-                perfettoController: controller.perfettoController,
-              ),
-            )
-          : KeepAliveWrapper(
+      ValueListenableBuilder<bool>(
+        valueListenable: controller.useLegacyTraceViewer,
+        builder: (context, useLegacy, _) {
+          if (useLegacy || !FeatureFlags.embeddedPerfetto) {
+            return KeepAliveWrapper(
               child: TimelineEventsView(
                 controller: controller,
                 processing: widget.processing,
                 processingProgress: widget.processingProgress,
               ),
+            );
+          }
+          return KeepAliveWrapper(
+            child: EmbeddedPerfetto(
+              perfettoController: controller.perfettoController,
             ),
+          );
+        },
+      ),
       if (frameAnalysisSupported && isFlutterApp)
         KeepAliveWrapper(
           child: frameAnalysisView,
@@ -121,18 +127,23 @@ class _TabbedPerformanceViewState extends State<TabbedPerformanceView>
     return [
       _buildTab(
         tabName: 'Timeline Events',
-        trailing: Row(
-          mainAxisAlignment: MainAxisAlignment.end,
-          children: [
-            if (!FeatureFlags.embeddedPerfetto) ...[
-              _buildSearchField(searchFieldEnabled),
-              const FlameChartHelpButton(
-                gaScreen: PerformanceScreen.id,
-                gaSelection: analytics_constants.timelineFlameChartHelp,
-              ),
-            ],
-            RefreshTimelineEventsButton(controller: controller),
-          ],
+        trailing: ValueListenableBuilder<bool>(
+          valueListenable: controller.useLegacyTraceViewer,
+          builder: (context, useLegacy, _) {
+            return Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                if (useLegacy || !FeatureFlags.embeddedPerfetto) ...[
+                  _buildSearchField(searchFieldEnabled),
+                  const FlameChartHelpButton(
+                    gaScreen: PerformanceScreen.id,
+                    gaSelection: analytics_constants.timelineFlameChartHelp,
+                  ),
+                ],
+                RefreshTimelineEventsButton(controller: controller),
+              ],
+            );
+          },
         ),
       ),
       if (frameAnalysisSupported && isFlutterApp)

packages/devtools_test/lib/src/mocks/generated_mocks_factories.dart

@@ -23,6 +23,7 @@ MockPerformanceController createMockPerformanceControllerWithDefaults() {
   when(controller.selectedFrame)
       .thenReturn(const FixedValueListenable<FlutterFrame?>(null));
   when(controller.displayRefreshRate).thenReturn(ValueNotifier<double>(60.0));
+  when(controller.useLegacyTraceViewer).thenReturn(ValueNotifier<bool>(true));
   return controller;
 }