[DO NOT SUBMIT] Debug Firefox failures in CI

lib/web_ui/dev/test_platform.dart

@@ -89,7 +89,7 @@ class BrowserPlatform extends PlatformPlugin {
         .add(_createSourceHandler())
 
         // Serves files from the root of web_ui. Some tests download assets that are embedded
-        // directly in the test folder, such as test/engine/image/sample_image1.png etc
+        // directly in the test folder, such as test/html/image/sample_image1.png etc
         .add(createStaticHandler(env.environment.webUiRootDir.path))
 
         // Serves absolute package URLs (i.e. not /packages/* but /Users/user/*/hosted/pub.dartlang.org/*).
@@ -1121,10 +1121,10 @@ class BrowserManager {
   /// Closes the manager and releases any resources it owns, including closing
   /// the browser.
   Future<void> close() => _closeMemoizer.runOnce(() {
-        if (Configuration.current.pauseAfterLoad) {
+        // if (Configuration.current.pauseAfterLoad) {
           print('Test run finished. Press enter to close browser...');
           stdin.readLineSync();
-        }
+        // }
         _closed = true;
         _timer.cancel();
         _pauseCompleter?.complete();

lib/web_ui/flutter_js/src/canvaskit_loader.js

@@ -6,8 +6,15 @@ import { createWasmInstantiator } from "./instantiate_wasm.js";
 import { resolveUrlWithSegments } from "./utils.js";
 
 export const loadCanvasKit = (deps, config, browserEnvironment, canvasKitBaseUrl) => {
-  window.flutterCanvasKitLoaded = (async () => {
+  window.printCanvasKitLoaded = () => {
+    console.log('## printCanvasKitLoaded:');
+    console.log('    window.flutterCanvasKit:', window.flutterCanvasKit);
+    console.log('    window.flutterCanvasKitLoaded:', window.flutterCanvasKitLoaded);
+  };
+  console.log('## loadCanvasKit:', deps, config, browserEnvironment, canvasKitBaseUrl);
+  window.flutterCanvasKitLoaded = new Promise((res, rej) => {
     if (window.flutterCanvasKit) {
+      console.log('## window.flutterCanvasKit:', window.flutterCanvasKit);
       // The user has set this global variable ahead of time, so we just return that.
       return window.flutterCanvasKit;
     }
@@ -21,15 +28,28 @@ export const loadCanvasKit = (deps, config, browserEnvironment, canvasKitBaseUrl
       baseUrl = resolveUrlWithSegments(baseUrl, "chromium");
     }
     let canvasKitUrl = resolveUrlWithSegments(baseUrl, "canvaskit.js");
+    console.log('## canvasKitUrl:', canvasKitUrl);
     if (deps.flutterTT.policy) {
       canvasKitUrl = deps.flutterTT.policy.createScriptURL(canvasKitUrl);
+      console.log('## flutterTT policy:', canvasKitUrl);
     }
     const wasmInstantiator = createWasmInstantiator(resolveUrlWithSegments(baseUrl, "canvaskit.wasm"));
-    const canvasKitModule = await import(canvasKitUrl);
-    window.flutterCanvasKit = await canvasKitModule.default({
-      instantiateWasm: wasmInstantiator,
+    console.log('## wasmInstantiator:', wasmInstantiator);
+    import(canvasKitUrl).then((canvasKitModule) => {
+      console.log('## canvasKitModule:', canvasKitModule);
+      let temp = canvasKitModule.default({
+        instantiateWasm: wasmInstantiator,
+      });
+      console.log('## canvasKitModule.default:', temp);
+      temp.then(() => {
+        console.log('## !!!');
+      });
+      return temp;
+    }).then((canvasKit) => {
+      window.flutterCanvasKit = canvasKit;
+      console.log('## flutterCanvasKit(resolving):', window.flutterCanvasKit);
+      res(window.flutterCanvasKit);
     });
-    return window.flutterCanvasKit;
-  })();
+  });
   return window.flutterCanvasKitLoaded;
 }

lib/web_ui/flutter_js/src/entrypoint_loader.js

@@ -60,6 +60,9 @@ export class FlutterEntrypointLoader {
    *   configuration.
    */
   async load(build, deps, config, nonce, onEntrypointLoaded) {
+    console.log('...load...');
+    console.log(build);
+    console.log(config);
     onEntrypointLoaded ??= (engineInitializer) => {
       engineInitializer.initializeEngine(config).then((appRunner) => appRunner.runApp())
     };

lib/web_ui/flutter_js/src/instantiate_wasm.js

@@ -5,11 +5,17 @@
 // This is a little helper function that helps us start the fetch and compilation
 // of an emscripten wasm module in parallel with the fetch of its script.
 export const createWasmInstantiator = (url) => {
+  console.log('## createWasmInstantiator:', url);
   const modulePromise = WebAssembly.compileStreaming(fetch(url));
+  console.log('## modulePromise:', modulePromise);
   return (imports, successCallback) => {
+    console.log('...wasmInstantiator...');
     (async () => {
+      console.log('await modulePromise');
       const module = await modulePromise;
+      console.log('## module:', module);
       const instance = await WebAssembly.instantiate(module, imports);
+      console.log('## instance:', instance);
       successCallback(instance, module);
     })();
     return {};

lib/web_ui/flutter_js/src/loader.js

@@ -126,8 +126,10 @@ export class FlutterLoader {
       });
     }
 
+    console.log('...load...');
     const canvasKitBaseUrl = getCanvaskitBaseUrl(config, buildConfig);
     if (build.renderer === "canvaskit") {
+      console.log('...loadCanvasKit...');
       deps.canvasKit = loadCanvasKit(deps, config, browserEnvironment, canvasKitBaseUrl);
     } else if (build.renderer === "skwasm") {
       deps.skwasm = loadSkwasm(deps, config, browserEnvironment, canvasKitBaseUrl);

lib/web_ui/lib/src/engine/canvaskit/fonts.dart

@@ -85,8 +85,10 @@ class SkiaFontCollection implements FlutterFontCollection {
       }
     }
 
+    // print('            <=await renderer.initialize();');
     // Make sure CanvasKit is actually loaded
     await renderer.initialize();
+    // print('            </await renderer.initialize();');
 
     final SkTypeface? typeface =
         canvasKit.Typeface.MakeFreeTypeFaceFromData(list.buffer);
@@ -125,16 +127,20 @@ class SkiaFontCollection implements FlutterFontCollection {
 
     final Map<String, FontLoadError> fontFailures = <String, FontLoadError>{};
     final List<(String, UnregisteredFont)> downloadedFonts = <(String, UnregisteredFont)>[];
+    // print('            <=await Future.wait(pendingDownloads);');
     for (final FontDownloadResult result in await Future.wait(pendingDownloads)) {
       if (result.font != null) {
         downloadedFonts.add((result.assetName, result.font!));
       } else {
         fontFailures[result.assetName] = result.error!;
       }
     }
+    // print('            </await Future.wait(pendingDownloads);');
 
+    // print('            <=await renderer.initialize();');
     // Make sure CanvasKit is actually loaded
     await renderer.initialize();
+    // print('            </await renderer.initialize();');
 
     final List<String> loadedFonts = <String>[];
     for (final (String assetName, UnregisteredFont unregisteredFont) in downloadedFonts) {

lib/web_ui/lib/src/engine/canvaskit/renderer.dart

@@ -11,6 +11,18 @@ import 'package:ui/src/engine.dart';
 import 'package:ui/ui.dart' as ui;
 import 'package:ui/ui_web/src/ui_web.dart' as ui_web;
 
+extension on JSPromise {
+  external JSPromise then(JSFunction callback);
+  @JS('catch')
+  external JSPromise onError(JSFunction callback);
+  @JS('finally')
+  external void onFinally(JSFunction callback);
+}
+
+
+@JS('window.printCanvasKitLoaded')
+external void printFlutterCanvasKitLoaded();
+
 enum CanvasKitVariant {
   /// The appropriate variant is chosen based on the browser.
   ///
@@ -73,16 +85,32 @@ class CanvasKitRenderer implements Renderer {
 
   @override
   Future<void> initialize() async {
+    // print('          == renderer.initialize();');
     _initialized ??= () async {
       if (windowFlutterCanvasKit != null) {
         canvasKit = windowFlutterCanvasKit!;
       } else if (windowFlutterCanvasKitLoaded != null) {
         // CanvasKit is being preloaded by flutter.js. Wait for it to complete.
-        canvasKit =
-            await promiseToFuture<CanvasKit>(windowFlutterCanvasKitLoaded!);
+        // print('          <=await promiseToFuture(windowFlutterCanvasKitLoaded!);');
+        // print('            [windowFlutterCanvasKitLoaded=$windowFlutterCanvasKitLoaded]');
+        windowFlutterCanvasKitLoaded!
+            .then(
+              ((JSAny? val) => print('            >>[val=$val]')).toJS,
+            )
+            .onError(
+              ((JSAny? err) => print('            >>[err=$err]')).toJS,
+            )
+            .onFinally(
+              ((          ) => print('            >>[finally=]')).toJS,
+            );
+        printFlutterCanvasKitLoaded();
+        canvasKit = await windowFlutterCanvasKitLoaded!.toDart as CanvasKit;
+        // print('          </await promiseToFuture(windowFlutterCanvasKitLoaded!);');
       } else {
+        // print('          <=await downloadCanvasKit();');
         canvasKit = await downloadCanvasKit();
         windowFlutterCanvasKit = canvasKit;
+        // print('          </await downloadCanvasKit();');
       }
       // Views may have been registered before this renderer was initialized.
       // Create rasterizers for them and then start listening for new view

lib/web_ui/lib/src/engine/dom.dart

@@ -187,7 +187,7 @@ extension DomConsoleExtension on DomConsole {
   void error(Object? arg) => _error(arg.toString().toJS);
 
   @JS('debug')
-  external void _debug(JSString? arg);
+  external void _debug(JSAny? arg);
   void debug(Object? arg) => _debug(arg.toString().toJS);
 }
 

lib/web_ui/lib/src/engine/initialization.dart

@@ -200,7 +200,9 @@ Future<void> initializeEngineServices({
   _setAssetManager(assetManager);
 
   Future<void> initializeRendererCallback () async => renderer.initialize();
+  // print('        <=await Future.wait([initializeRendererCallback(), _downloadAssetFonts()]);');
   await Future.wait<void>(<Future<void>>[initializeRendererCallback(), _downloadAssetFonts()]);
+  // print('        </await Future.wait([initializeRendererCallback(), _downloadAssetFonts()]);');
   _initializationState = DebugEngineInitializationState.initializedServices;
 }
 
@@ -262,14 +264,21 @@ Future<void> _downloadAssetFonts() async {
   if (ui_web.debugEmulateFlutterTesterEnvironment) {
     // Load the embedded test font before loading fonts from the assets so that
     // the embedded test font is the default (first) font.
+    // print('          <=await renderer.fontCollection.loadFontFromList(EmbeddedTestFont.flutterTest.data ...);');
     await renderer.fontCollection.loadFontFromList(
       EmbeddedTestFont.flutterTest.data,
       fontFamily: EmbeddedTestFont.flutterTest.fontFamily
     );
+    // print('          </await renderer.fontCollection.loadFontFromList(EmbeddedTestFont.flutterTest.data ...);');
   }
 
   if (_debugAssetManager != null || _assetManager != null) {
-    await renderer.fontCollection.loadAssetFonts(await fetchFontManifest(ui_web.assetManager));
+    // print('          <=await fetchFontManifest(ui_web.assetManager);');
+    final manifest = await fetchFontManifest(ui_web.assetManager);
+    // print('          </await fetchFontManifest(ui_web.assetManager);');
+    // print('          <=await renderer.fontCollection.loadAssetFonts(manifest);');
+    await renderer.fontCollection.loadAssetFonts(manifest);
+    // print('          </await renderer.fontCollection.loadAssetFonts(manifest);');
   }
 }
 

lib/web_ui/lib/ui_web/src/ui_web/initialization.dart

@@ -32,12 +32,16 @@ Future<void> bootstrapEngine({
   // Create the object that knows how to bootstrap an app from JS and Dart.
   final AppBootstrap bootstrap = AppBootstrap(
     initializeEngine: ([JsFlutterConfiguration? configuration]) async {
+      // print('      <=await initializeEngineServices(jsConfiguration: configuration);');
       await initializeEngineServices(jsConfiguration: configuration);
+      // print('      </await initializeEngineServices(jsConfiguration: configuration);');
     }, runApp: () async {
       if (registerPlugins != null) {
         registerPlugins();
       }
+      // print('      <=await initializeEngineUi();');
       await initializeEngineUi();
+      // print('      </await initializeEngineUi();');
       if (runApp != null) {
         runApp();
       }
@@ -50,6 +54,7 @@ Future<void> bootstrapEngine({
     await bootstrap.autoStart();
   } else {
     // Yield control of the bootstrap procedure to the user.
+    // print('      ==didCreateEngineInitializer(...);');
     loader.didCreateEngineInitializer(bootstrap.prepareEngineInitializer());
   }
 }

lib/web_ui/test/common/test_initialization.dart

@@ -14,20 +14,27 @@ import 'package:ui/ui_web/src/ui_web.dart' as ui_web;
 import 'fake_asset_manager.dart';
 import 'rendering.dart';
 
+@JS('window.dartPrint')
+external set dartPrint(JSFunction f);
+
 void setUpUnitTests({
   bool withImplicitView = false,
   bool emulateTesterEnvironment = true,
   bool setUpTestViewDimensions = true,
 }) {
   late final FakeAssetScope debugFontsScope;
   setUpAll(() async {
+    // dartPrint = ((JSAny x) => print(x)).toJS;
+    print('<=setUpAll');
     if (emulateTesterEnvironment) {
       ui_web.debugEmulateFlutterTesterEnvironment = true;
     }
 
     debugFontsScope = configureDebugFontsAssetScope(fakeAssetManager);
     debugOnlyAssetManager = fakeAssetManager;
+    // print('  <=await bootstrapAndRunApp(withImplicitView: $withImplicitView);');
     await bootstrapAndRunApp(withImplicitView: withImplicitView);
+    // print('  </await bootstrapAndRunApp(withImplicitView: $withImplicitView);');
     engine.debugOverrideJsConfiguration(<String, Object?>{
       'fontFallbackBaseUrl': 'assets/fallback_fonts/',
     }.jsify() as engine.JsFlutterConfiguration?);
@@ -44,17 +51,39 @@ void setUpUnitTests({
     }
 
     setUpRenderingForTests();
+    print('</setUpAll');
   });
 
   tearDownAll(() async {
     fakeAssetManager.popAssetScope(debugFontsScope);
   });
 }
 
+void setUpImplicitView() {
+  late engine.EngineFlutterWindow myWindow;
+
+  final engine.EnginePlatformDispatcher dispatcher = engine.EnginePlatformDispatcher.instance;
+
+  setUp(() {
+    myWindow = engine.EngineFlutterView.implicit(dispatcher, null);
+    dispatcher.viewManager.registerView(myWindow);
+  });
+
+  tearDown(() async {
+    dispatcher.viewManager.unregisterView(myWindow.viewId);
+    await myWindow.resetHistory();
+    myWindow.dispose();
+  });
+}
+
 Future<void> bootstrapAndRunApp({bool withImplicitView = false}) async {
   final Completer<void> completer = Completer<void>();
+  // print('    <=await ui_web.bootstrapEngine();');
   await ui_web.bootstrapEngine(runApp: () => completer.complete());
+  // print('    </await ui_web.bootstrapEngine();');
+  print('    <=await completer.future;');
   await completer.future;
+  print('    </await completer.future;');
   if (!withImplicitView) {
     _disableImplicitView();
   }

lib/web_ui/test/engine/clipboard_test.dart

@@ -16,7 +16,7 @@ void main() {
 }
 
 Future<void> testMain() async {
-  setUpUnitTests();
+  setUpImplicitView();
   group('message handler', () {
     const String testText = 'test text';
 

lib/web_ui/test/engine/composition_test.dart

@@ -51,7 +51,7 @@ GloballyPositionedTextEditingStrategy _enableEditingStrategy({
 }
 
 Future<void> testMain() async {
-  await bootstrapAndRunApp(withImplicitView: true);
+  setUpImplicitView();
 
   const String fakeComposingText = 'ImComposingText';
 
@@ -323,6 +323,14 @@ Future<void> testMain() async {
       _inputElement.dispatchEvent(createDomCompositionEvent(
           _MockWithCompositionAwareMixin._kCompositionUpdate,
           <Object?, Object?>{ 'data': newComposingText }));
+      // On Chrome and Safari, a `compositionupdate` event automatically
+      // triggers a `selectionchange` event, which leads to triggering
+      // `DefaultTextEditingStrategy.handleChange`.
+      //
+      // But in Firefox, `selectionchange` event is not triggered, so we need to
+      // manually dispatch an `input` event to trigger
+      // `DefaultTextEditingStrategy.handleChange`.
+      _inputElement.dispatchEvent(createDomInputEvent('input'));
 
       await containExpect;
     });