[web] Introduce platform message to enable experiment flags on web

Author: mdebbar

lib/web_ui/lib/src/engine.dart

@@ -117,6 +117,7 @@ part 'engine/text_editing/text_editing.dart';
 part 'engine/util.dart';
 part 'engine/validators.dart';
 part 'engine/vector_math.dart';
+part 'engine/web_experiments.dart';
 part 'engine/window.dart';
 
 bool _engineInitialized = false;

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

@@ -6,8 +6,7 @@
 part of engine;
 
 /// EXPERIMENTAL: Enable the Skia-based rendering backend.
-const bool experimentalUseSkia =
-    bool.fromEnvironment('FLUTTER_WEB_USE_SKIA', defaultValue: false);
+bool get experimentalUseSkia => webExperiments.useSkia;
 
 /// The URL to use when downloading the CanvasKit script and associated wasm.
 ///

lib/web_ui/lib/src/engine/text/measurement.dart

@@ -187,13 +187,6 @@ abstract class TextMeasurementService {
   static TextMeasurementService get canvasInstance =>
       CanvasTextMeasurementService.instance;
 
-  /// Whether the new experimental implementation of canvas-based text
-  /// measurement is enabled or not.
-  ///
-  /// This is only used for testing at the moment. Once the implementation is
-  /// complete and production-ready, we'll get rid of this flag.
-  static bool enableExperimentalCanvasImplementation = const bool.fromEnvironment('FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT', defaultValue: false);
-
   /// Gets the appropriate [TextMeasurementService] instance for the given
   /// [paragraph].
   static TextMeasurementService forParagraph(ui.Paragraph paragraph) {
@@ -206,7 +199,7 @@ abstract class TextMeasurementService {
     // Skip using canvas measurements until the iframe becomes visible.
     // see: https://github.com/flutter/flutter/issues/36341
     if (!window.physicalSize.isEmpty &&
-        enableExperimentalCanvasImplementation &&
+        webExperiments.useCanvasText &&
         _canUseCanvasMeasurement(paragraph)) {
       return canvasInstance;
     }

lib/web_ui/lib/src/engine/web_experiments.dart

@@ -0,0 +1,55 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// @dart = 2.6
+part of engine;
+
+const MethodCodec codec = JSONMethodCodec();
+
+final WebExperiments webExperiments = WebExperiments._();
+
+/// A bag of all experiment flags in the web engine.
+///
+/// This class also handles platform messages that can be sent to enable/disable
+/// certain experiments at runtime without the need to access engine internals.
+class WebExperiments {
+  WebExperiments._();
+
+  /// Experiment flag for using the Skia-based rendering backend.
+  bool get useSkia => _useSkia ?? false;
+  set useSkia(bool enabled) {
+    _useSkia = enabled;
+  }
+  bool _useSkia = const bool.fromEnvironment('FLUTTER_WEB_USE_SKIA');
+
+  /// Experiment flag for using canvas-based text measurement.
+  bool get useCanvasText => _useCanvasText ?? false;
+  set useCanvasText(bool enabled) {
+    _useCanvasText = enabled;
+  }
+  bool _useCanvasText =
+      const bool.fromEnvironment('FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT');
+
+  /// Reset all experimental flags to their default values.
+  void reset() {
+    _useSkia = null;
+    _useCanvasText = null;
+  }
+
+  /// Handles the platform message used to enable/disable web experiments in the
+  /// web engine.
+  void enableWebExperiments(Map<String, dynamic> message) {
+    for (final String name in message.keys) {
+      final bool enabled = message[name];
+      switch (name) {
+        case 'useSkia':
+          _useSkia = enabled;
+          break;
+        case 'useCanvasText':
+          _useCanvasText = enabled;
+          break;
+      }
+    }
+  }
+}

lib/web_ui/lib/src/engine/window.dart

@@ -210,6 +210,16 @@ class EngineWindow extends ui.Window {
             break;
         }
         return;
+
+      case 'flutter/experiments':
+        const MethodCodec codec = JSONMethodCodec();
+        final MethodCall decoded = codec.decodeMethodCall(data);
+        final Map<String, dynamic> arguments = decoded.arguments;
+        switch (decoded.method) {
+          case 'enableWebExperiments':
+            webExperiments.enableWebExperiments(arguments);
+            return;
+        }
     }
 
     if (pluginMessageCallHandler != null) {

lib/web_ui/test/engine/web_experiments_test.dart

@@ -0,0 +1,74 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// @dart = 2.6
+import 'package:test/test.dart';
+import 'package:ui/src/engine.dart';
+
+void main() {
+  tearDown(() {
+    webExperiments.reset();
+  });
+
+  test('default web experiment values', () {
+    expect(webExperiments.useSkia, false);
+    expect(webExperiments.useCanvasText, false);
+  });
+
+  test('can turn on/off web experiments', () {
+    webExperiments.enableWebExperiments(<String, bool>{
+      'useSkia': true,
+    });
+    expect(webExperiments.useSkia, true);
+    expect(webExperiments.useCanvasText, false);
+
+    webExperiments.enableWebExperiments(<String, bool>{
+      'useSkia': false,
+      'useCanvasText': true,
+    });
+    expect(webExperiments.useSkia, false);
+    expect(webExperiments.useCanvasText, true);
+
+    webExperiments.enableWebExperiments(<String, bool>{
+      'useSkia': true,
+      'useCanvasText': null,
+    });
+    expect(webExperiments.useSkia, true);
+    // Goes back to default value.
+    expect(webExperiments.useCanvasText, false);
+
+    webExperiments.enableWebExperiments(<String, bool>{
+      'useSkia': null,
+    });
+    // Goes back to default value.
+    expect(webExperiments.useSkia, false);
+    expect(webExperiments.useCanvasText, false);
+  });
+
+  test('can reset web experiments', () {
+    webExperiments.enableWebExperiments(<String, bool>{
+      'useSkia': true,
+      'useCanvasText': false,
+    });
+    webExperiments.reset();
+    expect(webExperiments.useSkia, false);
+    expect(webExperiments.useCanvasText, false);
+
+    webExperiments.enableWebExperiments(<String, bool>{
+      'useSkia': false,
+      'useCanvasText': true,
+    });
+    webExperiments.reset();
+    expect(webExperiments.useSkia, false);
+    expect(webExperiments.useCanvasText, false);
+
+    webExperiments.enableWebExperiments(<String, bool>{
+      'useSkia': true,
+      'useCanvasText': true,
+    });
+    webExperiments.reset();
+    expect(webExperiments.useSkia, false);
+    expect(webExperiments.useCanvasText, false);
+  });
+}

lib/web_ui/test/golden_tests/engine/scuba.dart

@@ -71,7 +71,7 @@ class EngineScubaTester {
       sceneElement.append(canvas.rootElement);
       html.document.body.append(sceneElement);
       String screenshotName = '${fileName}_${canvas.runtimeType}';
-      if (TextMeasurementService.enableExperimentalCanvasImplementation) {
+      if (webExperiments.useCanvasText) {
         screenshotName += '+canvas_measurement';
       }
       await diffScreenshot(
@@ -96,18 +96,20 @@ void testEachCanvas(String description, CanvasTest body,
   test('$description (bitmap)', () {
     try {
       TextMeasurementService.initialize(rulerCacheCapacity: 2);
+      webExperiments.useCanvasText = false;
       return body(BitmapCanvas(bounds));
     } finally {
+      webExperiments.useCanvasText = null;
       TextMeasurementService.clearCache();
     }
   });
   test('$description (bitmap + canvas measurement)', () async {
     try {
       TextMeasurementService.initialize(rulerCacheCapacity: 2);
-      TextMeasurementService.enableExperimentalCanvasImplementation = true;
+      webExperiments.useCanvasText = true;
       await body(BitmapCanvas(bounds));
     } finally {
-      TextMeasurementService.enableExperimentalCanvasImplementation = false;
+      webExperiments.useCanvasText = null;
       TextMeasurementService.clearCache();
     }
   });

lib/web_ui/test/golden_tests/engine/text_overflow_golden_test.dart

@@ -5,7 +5,7 @@
 // @dart = 2.6
 import 'dart:async';
 
-import 'package:ui/ui.dart';
+import 'package:ui/ui.dart' hide window;
 import 'package:ui/src/engine.dart';
 
 import 'scuba.dart';
@@ -89,7 +89,7 @@ void main() async {
     offset = offset.translate(0, p.height + 10);
 
     // Only the first line is rendered with an ellipsis.
-    if (!TextMeasurementService.enableExperimentalCanvasImplementation) {
+    if (!webExperiments.useCanvasText) {
       // This is now correct with the canvas-based measurement, so we shouldn't
       // print the "(wrong)" warning.
       p = warning('(wrong)');
@@ -106,7 +106,7 @@ void main() async {
 
     // Only the first two lines are rendered and the ellipsis appears on the 2nd
     // line.
-    if (!TextMeasurementService.enableExperimentalCanvasImplementation) {
+    if (!webExperiments.useCanvasText) {
       // This is now correct with the canvas-based measurement, so we shouldn't
       // print the "(wrong)" warning.
       p = warning('(wrong)');

lib/web_ui/test/paragraph_test.dart

@@ -4,26 +4,28 @@
 
 // @dart = 2.6
 import 'package:ui/src/engine.dart';
-import 'package:ui/ui.dart';
+import 'package:ui/ui.dart' hide window;
 
 import 'package:test/test.dart';
 
 void testEachMeasurement(String description, VoidCallback body, {bool skip}) {
   test('$description (dom measurement)', () async {
     try {
       TextMeasurementService.initialize(rulerCacheCapacity: 2);
+      webExperiments.useCanvasText = false;
       return body();
     } finally {
+      webExperiments.useCanvasText = null;
       TextMeasurementService.clearCache();
     }
   }, skip: skip);
   test('$description (canvas measurement)', () async {
     try {
       TextMeasurementService.initialize(rulerCacheCapacity: 2);
-      TextMeasurementService.enableExperimentalCanvasImplementation = true;
+      webExperiments.useCanvasText = true;
       return body();
     } finally {
-      TextMeasurementService.enableExperimentalCanvasImplementation = false;
+      webExperiments.useCanvasText = null;
       TextMeasurementService.clearCache();
     }
   }, skip: skip);
@@ -184,7 +186,7 @@ void main() async {
   test('getPositionForOffset multi-line', () {
     // [Paragraph.getPositionForOffset] for multi-line text doesn't work well
     // with dom-based measurement.
-    TextMeasurementService.enableExperimentalCanvasImplementation = true;
+    webExperiments.useCanvasText = true;
     TextMeasurementService.initialize(rulerCacheCapacity: 2);
 
     final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle(
@@ -280,11 +282,11 @@ void main() async {
     );
 
     TextMeasurementService.clearCache();
-    TextMeasurementService.enableExperimentalCanvasImplementation = false;
+    webExperiments.useCanvasText = null;
   });
 
   test('getPositionForOffset multi-line centered', () {
-    TextMeasurementService.enableExperimentalCanvasImplementation = true;
+    webExperiments.useCanvasText = true;
     TextMeasurementService.initialize(rulerCacheCapacity: 2);
 
     final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle(
@@ -387,7 +389,7 @@ void main() async {
     );
 
     TextMeasurementService.clearCache();
-    TextMeasurementService.enableExperimentalCanvasImplementation = false;
+    webExperiments.useCanvasText = null;
   });
 
   testEachMeasurement('getBoxesForRange returns a box', () {
@@ -782,7 +784,7 @@ void main() async {
 
   test('longestLine', () {
     // [Paragraph.longestLine] is only supported by canvas-based measurement.
-    TextMeasurementService.enableExperimentalCanvasImplementation = true;
+    webExperiments.useCanvasText = true;
     TextMeasurementService.initialize(rulerCacheCapacity: 2);
 
     final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle(
@@ -797,7 +799,7 @@ void main() async {
     expect(paragraph.longestLine, 50.0);
 
     TextMeasurementService.clearCache();
-    TextMeasurementService.enableExperimentalCanvasImplementation = false;
+    webExperiments.useCanvasText = null;
   });
 
   testEachMeasurement('getLineBoundary (single-line)', () {
@@ -824,7 +826,7 @@ void main() async {
   test('getLineBoundary (multi-line)', () {
     // [Paragraph.getLineBoundary] for multi-line paragraphs is only supported
     // by canvas-based measurement.
-    TextMeasurementService.enableExperimentalCanvasImplementation = true;
+    webExperiments.useCanvasText = true;
     TextMeasurementService.initialize(rulerCacheCapacity: 2);
 
     final ParagraphBuilder builder = ParagraphBuilder(ParagraphStyle(
@@ -867,7 +869,7 @@ void main() async {
     }
 
     TextMeasurementService.clearCache();
-    TextMeasurementService.enableExperimentalCanvasImplementation = false;
+    webExperiments.useCanvasText = null;
   });
 
   testEachMeasurement('width should be a whole integer', () {