Add wasm opt-in setting

packages/devtools_app/lib/src/framework/settings_dialog.dart

@@ -37,6 +37,7 @@ class SettingsDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     final analyticsController = Provider.of<AnalyticsController>(context);
     return DevToolsDialog(
       title: const DialogTitleText('Settings'),
@@ -50,6 +51,7 @@ class SettingsDialog extends StatelessWidget {
                 title: 'Use a dark theme',
                 notifier: preferences.darkModeEnabled,
                 onChanged: preferences.toggleDarkModeTheme,
+                gaScreen: gac.settingsDialog,
                 gaItem: gac.darkTheme,
               ),
             ),
@@ -61,6 +63,7 @@ class SettingsDialog extends StatelessWidget {
                 onChanged: (enable) => unawaited(
                   analyticsController.toggleAnalyticsEnabled(enable),
                 ),
+                gaScreen: gac.settingsDialog,
                 gaItem: gac.analytics,
               ),
             ),
@@ -69,10 +72,26 @@ class SettingsDialog extends StatelessWidget {
               title: 'Enable VM developer mode',
               notifier: preferences.vmDeveloperModeEnabled,
               onChanged: preferences.toggleVmDeveloperMode,
+              gaScreen: gac.settingsDialog,
               gaItem: gac.vmDeveloperMode,
             ),
           ),
-          const PaddedDivider(),
+          const SizedBox(height: largeSpacing),
+          ...dialogSubHeader(theme, 'Experimental Features'),
+          Flexible(
+            child: CheckboxSetting(
+              title: 'Enable Skwasm renderer',
+              description:
+                  'This will trigger a reload of the page to load DevTools '
+                  'with the skwasm renderer.',
+              notifier: preferences.skwasmEnabled,
+              onChanged: preferences.toggleSkasmEnabled,
+              gaScreen: gac.settingsDialog,
+              gaItem: gac.skwasm,
+            ),
+          ),
+          const SizedBox(height: largeSpacing),
+          ...dialogSubHeader(theme, 'Troubleshooting'),
           const _VerboseLoggingSetting(),
         ],
       ),
@@ -99,6 +118,7 @@ class _VerboseLoggingSetting extends StatelessWidget {
                 title: 'Enable verbose logging',
                 notifier: preferences.verboseLoggingEnabled,
                 onChanged: (enable) => preferences.toggleVerboseLogging(enable),
+                gaScreen:  gac.settingsDialog,
                 gaItem: gac.verboseLogging,
               ),
             ),

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

@@ -280,7 +280,7 @@ class TraceWidgetBuildsCheckbox extends StatelessWidget {
             tooltip: extension.tooltip,
             onChanged: _checkboxChanged,
             enabled: enabled,
-            gaScreenName: extension.gaScreenName,
+            gaScreen: extension.gaScreenName,
             gaItem: extension.gaItem,
           ),
         ),

packages/devtools_app/lib/src/service/service_extension_widgets.dart

@@ -588,7 +588,7 @@ class _ServiceExtensionCheckboxState extends State<ServiceExtensionCheckbox>
                 tooltip: widget.serviceExtension.tooltip,
                 onChanged: _onChanged,
                 enabled: available,
-                gaScreenName: widget.serviceExtension.gaScreenName,
+                gaScreen: widget.serviceExtension.gaScreenName,
                 gaItem: widget.serviceExtension.gaItem,
               ),
             ),

packages/devtools_app/lib/src/shared/analytics/constants.dart

@@ -114,6 +114,7 @@ const settingsDialog = 'settings';
 const darkTheme = 'darkTheme';
 const analytics = 'analytics';
 const vmDeveloperMode = 'vmDeveloperMode';
+const skwasm = 'skwasm';
 const verboseLogging = 'verboseLogging';
 const inspectorHoverEvalMode = 'inspectorHoverEvalMode';
 const clearLogs = 'clearLogs';

packages/devtools_app/lib/src/shared/common_widgets.dart

@@ -1521,7 +1521,7 @@ class CheckboxSetting extends StatelessWidget {
     this.tooltip,
     this.onChanged,
     this.enabled = true,
-    this.gaScreenName,
+    this.gaScreen,
     this.gaItem,
     this.checkboxKey,
   });
@@ -1539,7 +1539,7 @@ class CheckboxSetting extends StatelessWidget {
   /// Whether this checkbox setting should be enabled for interaction.
   final bool enabled;
 
-  final String? gaScreenName;
+  final String? gaScreen;
 
   final String? gaItem;
 
@@ -1554,10 +1554,10 @@ class CheckboxSetting extends StatelessWidget {
         NotifierCheckbox(
           notifier: notifier,
           onChanged: (bool? value) {
-            final gaScreenName = this.gaScreenName;
+            final gaScreen = this.gaScreen;
             final gaItem = this.gaItem;
-            if (gaScreenName != null && gaItem != null) {
-              ga.select(gaScreenName, gaItem);
+            if (gaScreen != null && gaItem != null) {
+              ga.select(gaScreen, '$gaItem-$value');
             }
             final onChanged = this.onChanged;
             if (onChanged != null) {

packages/devtools_app/lib/src/shared/preferences/preferences.dart

@@ -17,6 +17,7 @@ import '../config_specific/logger/logger_helpers.dart';
 import '../constants.dart';
 import '../diagnostics/inspector_service.dart';
 import '../globals.dart';
+import '../query_parameters.dart';
 import '../utils.dart';
 
 part '_extension_preferences.dart';
@@ -28,6 +29,32 @@ part '_performance_preferences.dart';
 
 const _thirdPartyPathSegment = 'third_party';
 
+/// DevTools preferences for experimental features.
+enum _ExperimentPreferences {
+  skwasm;
+
+  String get storageKey => '$storagePrefix.$name';
+
+  static const storagePrefix = 'experiment';
+}
+
+/// DevTools preferences for UI-related settings.
+enum _UiPreferences {
+  darkMode,
+  vmDeveloperMode;
+
+  String get storageKey => '$storagePrefix.$name';
+
+  static const storagePrefix = 'ui';
+}
+
+/// DevTools preferences for general settings.
+///
+/// These values are not stored in the DevTools storage file with a prefix.
+enum _GeneralPreferences {
+  verboseLogging,
+}
+
 /// A controller for global application preferences.
 class PreferencesController extends DisposableController
     with AutoDisposeControllerMixin {
@@ -43,9 +70,12 @@ class PreferencesController extends DisposableController
 
   final vmDeveloperModeEnabled = ValueNotifier<bool>(false);
 
+  /// Whether DevTools should be rendered with the skwasm renderer instead of
+  /// canvaskit.
+  final skwasmEnabled = ValueNotifier<bool>(false);
+
   final verboseLoggingEnabled =
       ValueNotifier<bool>(Logger.root.level == verboseLoggingLevel);
-  static const _verboseLoggingStorageId = 'verboseLogging';
 
   // TODO(https://github.com/flutter/devtools/issues/7860): Clean-up after
   // Inspector V2 has been released.
@@ -69,44 +99,95 @@ class PreferencesController extends DisposableController
 
   Future<void> init() async {
     // Get the current values and listen for and write back changes.
-    final darkModeValue = await storage.getValue('ui.darkMode');
+    await _initDarkMode();
+    await _initVmDeveloperMode();
+    await _initWasmEnabled();
+    await _initVerboseLogging();
+
+    await inspector.init();
+    await memory.init();
+    await logging.init();
+    await performance.init();
+    await devToolsExtensions.init();
+
+    setGlobal(PreferencesController, this);
+  }
+
+  Future<void> _initDarkMode() async {
+    final darkModeValue =
+        await storage.getValue(_UiPreferences.darkMode.storageKey);
     final useDarkMode = (darkModeValue == null && useDarkThemeAsDefault) ||
         darkModeValue == 'true';
     ga.impression(gac.devToolsMain, gac.startingTheme(darkMode: useDarkMode));
     toggleDarkModeTheme(useDarkMode);
     addAutoDisposeListener(darkModeEnabled, () {
-      storage.setValue('ui.darkMode', '${darkModeEnabled.value}');
+      storage.setValue(
+        _UiPreferences.darkMode.storageKey,
+        '${darkModeEnabled.value}',
+      );
     });
+  }
 
+  Future<void> _initVmDeveloperMode() async {
     final vmDeveloperModeValue = await boolValueFromStorage(
-      'ui.vmDeveloperMode',
+      _UiPreferences.vmDeveloperMode.storageKey,
       defaultsTo: false,
     );
     toggleVmDeveloperMode(vmDeveloperModeValue);
     addAutoDisposeListener(vmDeveloperModeEnabled, () {
-      storage.setValue('ui.vmDeveloperMode', '${vmDeveloperModeEnabled.value}');
+      storage.setValue(
+        _UiPreferences.vmDeveloperMode.storageKey,
+        '${vmDeveloperModeEnabled.value}',
+      );
     });
+  }
 
-    await _initVerboseLogging();
+  Future<void> _initWasmEnabled() async {
+    // TODO(https://github.com/flutter/devtools/issues/7856): set the current
+    // value based on whether DevTools is actually loaded with skwasm.
+    skwasmEnabled.value = false;
+
+    // It is important that this listener is added before we set the initial
+    // state of the skwasm mode setting below. This is because the query
+    // parameter for skwasm may need to be updated based on the value of the
+    // preference in the storage file, which we take into account when we call
+    // [toggleSkasmEnabled] at the end of this method.
+    addAutoDisposeListener(skwasmEnabled, () async {
+      final enabled = skwasmEnabled.value;
+      await storage.setValue(
+        _ExperimentPreferences.skwasm.storageKey,
+        '$enabled',
+      );
 
-    await inspector.init();
-    await memory.init();
-    await logging.init();
-    await performance.init();
-    await devToolsExtensions.init();
+      // Update the wasm mode query parameter if it does not match the value of
+      // the setting.
+      final skwasmEnabledFromQueryParams = DevToolsQueryParams.load().useSkwasm;
+      if (skwasmEnabledFromQueryParams != enabled) {
+        updateQueryParameter(
+          DevToolsQueryParams.skwasmKey,
+          '$enabled',
+          reload: true,
+        );
+      }
+    });
 
-    setGlobal(PreferencesController, this);
+    final enabledFromStorage = await boolValueFromStorage(
+      _ExperimentPreferences.skwasm.storageKey,
+      defaultsTo: false,
+    );
+    final enabledFromQueryParams = DevToolsQueryParams.load().useSkwasm;
+    toggleSkasmEnabled(enabledFromStorage || enabledFromQueryParams);
   }
 
   Future<void> _initVerboseLogging() async {
     final verboseLoggingEnabledValue = await boolValueFromStorage(
-      _verboseLoggingStorageId,
+      _GeneralPreferences.verboseLogging.name,
       defaultsTo: false,
     );
     toggleVerboseLogging(verboseLoggingEnabledValue);
     addAutoDisposeListener(verboseLoggingEnabled, () {
       storage.setValue(
-        'verboseLogging',
+        _GeneralPreferences.verboseLogging.name,
         verboseLoggingEnabled.value.toString(),
       );
     });
@@ -122,21 +203,28 @@ class PreferencesController extends DisposableController
     super.dispose();
   }
 
-  /// Change the value for the dark mode setting.
+  /// Change the value of the dark mode setting.
   void toggleDarkModeTheme(bool? useDarkMode) {
     if (useDarkMode != null) {
       darkModeEnabled.value = useDarkMode;
     }
   }
 
-  /// Change the value for the VM developer mode setting.
+  /// Change the value of the VM developer mode setting.
   void toggleVmDeveloperMode(bool? enableVmDeveloperMode) {
     if (enableVmDeveloperMode != null) {
       vmDeveloperModeEnabled.value = enableVmDeveloperMode;
       VmServiceWrapper.enablePrivateRpcs = enableVmDeveloperMode;
     }
   }
 
+  /// Change the value of the wasm mode setting.
+  void toggleSkasmEnabled(bool? enable) {
+    if (enable != null) {
+      skwasmEnabled.value = enable;
+    }
+  }
+
   void toggleVerboseLogging(bool? enableVerboseLogging) {
     if (enableVerboseLogging != null) {
       verboseLoggingEnabled.value = enableVerboseLogging;

packages/devtools_app/lib/src/shared/query_parameters.dart

@@ -39,12 +39,17 @@ extension type DevToolsQueryParams(Map<String, String?> params) {
   // Keys for theming values that an IDE may pass in the embedded DevTools URI.
   IdeThemeQueryParams get ideThemeParams => IdeThemeQueryParams(params);
 
+  /// Whether DevTools should be loaded using the skwasm renderer instead of
+  /// canvaskit.
+  bool get useSkwasm => params[skwasmKey] == 'true';
+
   static const vmServiceUriKey = 'uri';
   static const hideScreensKey = 'hide';
   static const hideExtensionsValue = 'extensions';
   static const hideAllExceptExtensionsValue = 'all-except-extensions';
   static const offlineScreenIdKey = 'screen';
   static const inspectorRefKey = 'inspectorRef';
+  static const skwasmKey = 'skwasm';
 
   // TODO(kenz): remove legacy value in May of 2025 when all IDEs are not using
   // these and 12 months have passed to allow users ample upgrade time.

packages/devtools_app/web/flutter_bootstrap.js

@@ -23,12 +23,15 @@ function unregisterDevToolsServiceWorker() {
 
 // Bootstrap app for 3P environments:
 function bootstrapAppFor3P() {
+  const searchParams = new URLSearchParams(window.location.search);
+  const useSkwasm = searchParams.get('skwasm');
   _flutter.loader.load({
     serviceWorkerSettings: {
       serviceWorkerVersion: {{flutter_service_worker_version}},
     },
     config: {
-      canvasKitBaseUrl: 'canvaskit/'
+      canvasKitBaseUrl: 'canvaskit/',
+      renderer: useSkwasm ? 'skwasm' : 'canvaskit'
     }
   });
 }

packages/devtools_app_shared/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.2.4
+* Add `updateQueryParameter` utility method.
+
 ## 0.2.3
 * Bump `web` dependency to `^1.0.0`
 * Bump `pointer_interceptor` dependency to `^0.10.1+1`

packages/devtools_app_shared/lib/src/utils/url/_url_stub.dart

@@ -15,3 +15,9 @@ String? getWebUrl() => null;
 // Unused parameter lint doesn't make sense for stub files.
 // ignore: avoid-unused-parameters
 void webRedirect(String url) {}
+
+/// Updates the query parameter with [key] to the new [value], and optionally
+/// reloads the page when [reload] is true.
+/// 
+/// No-op for non-web platforms.
+void updateQueryParameter(String key, String? value, {bool reload = false}) {}

packages/devtools_app_shared/lib/src/utils/url/_url_web.dart

@@ -15,3 +15,23 @@ String? getWebUrl() => window.location.toString();
 void webRedirect(String url) {
   window.location.replace(url);
 }
+
+void updateQueryParameter(String key, String? value, {bool reload = false}) {
+  final newQueryParams = Map.of(loadQueryParams());
+  if (value == null) {
+    newQueryParams.remove(key);
+  } else {
+    newQueryParams[key] = value;
+  }
+  final newUri = Uri.parse(window.location.toString())
+      .replace(queryParameters: newQueryParams);
+  window.history.replaceState(
+    window.history.state,
+    '',
+    newUri.toString(),
+  );
+
+  if (reload) {
+    window.location.reload();
+  }
+}

packages/devtools_app_shared/pubspec.yaml

@@ -1,6 +1,6 @@
 name: devtools_app_shared
 description: Package of Dart & Flutter structures shared between devtools_app and devtools extensions.
-version: 0.2.3
+version: 0.2.4
 repository: https://github.com/flutter/devtools/tree/master/packages/devtools_app_shared
 
 environment: