[web] Add benchmarks for text layout (#51663)

dev/benchmarks/macrobenchmarks/lib/src/web/bench_draw_rect.dart

@@ -9,7 +9,7 @@ import 'recorder.dart';
 /// Repeatedly paints a grid of rectangles.
 ///
 /// Measures the performance of the `drawRect` operation.
-class BenchDrawRect extends RawRecorder {
+class BenchDrawRect extends SceneBuilderRecorder {
   BenchDrawRect() : super(name: benchmarkName);
 
   static const String benchmarkName = 'draw_rect';

dev/benchmarks/macrobenchmarks/lib/src/web/bench_text_layout.dart

+// Copyright 2014 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.
+
+import 'dart:ui';
+
+import 'recorder.dart';
+
+int _counter = 0;
+
+Paragraph _generateParagraph() {
+  final ParagraphBuilder builder =
+      ParagraphBuilder(ParagraphStyle(fontFamily: 'sans-serif'))
+        ..pushStyle(TextStyle(fontSize: 12.0))
+        ..addText(
+          '$_counter Lorem ipsum dolor sit amet, consectetur adipiscing elit, '
+          'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        );
+  _counter++;
+  return builder.build();
+}
+
+/// Repeatedly lays out a paragraph using the DOM measurement approach.
+///
+/// Creates a different paragraph each time in order to avoid hitting the cache.
+class BenchTextDomLayout extends RawRecorder {
+  BenchTextDomLayout() : super(name: benchmarkName);
+
+  static const String benchmarkName = 'text_dom_layout';
+
+  @override
+  void body(Profile profile) {
+    final Paragraph paragraph = _generateParagraph();
+    profile.record('layout', () {
+      paragraph.layout(const ParagraphConstraints(width: double.infinity));
+    });
+  }
+}
+
+/// Repeatedly lays out a paragraph using the DOM measurement approach.
+///
+/// Uses the same paragraph content to make sure we hit the cache. It doesn't
+/// use the same paragraph instance because the layout method will shortcircuit
+/// in that case.
+class BenchTextDomCachedLayout extends RawRecorder {
+  BenchTextDomCachedLayout() : super(name: benchmarkName);
+
+  static const String benchmarkName = 'text_dom_cached_layout';
+
+  final ParagraphBuilder builder =
+      ParagraphBuilder(ParagraphStyle(fontFamily: 'sans-serif'))
+        ..pushStyle(TextStyle(fontSize: 12.0))
+        ..addText(
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, '
+          'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+        );
+
+  @override
+  void body(Profile profile) {
+    final Paragraph paragraph = builder.build();
+    profile.record('layout', () {
+      paragraph.layout(const ParagraphConstraints(width: double.infinity));
+    });
+  }
+}

dev/benchmarks/macrobenchmarks/lib/src/web/bench_text_out_of_picture_bounds.dart

@@ -27,7 +27,7 @@ import 'test_data.dart';
 ///
 /// This reproduces the bug where we render more than visible causing
 /// performance issues: https://github.com/flutter/flutter/issues/48516
-class BenchTextOutOfPictureBounds extends RawRecorder {
+class BenchTextOutOfPictureBounds extends SceneBuilderRecorder {
   BenchTextOutOfPictureBounds() : super(name: benchmarkName) {
     const Color red = Color.fromARGB(255, 255, 0, 0);
     const Color green = Color.fromARGB(255, 0, 255, 0);

dev/benchmarks/macrobenchmarks/lib/web_benchmarks.dart

@@ -6,6 +6,7 @@ import 'dart:async';
 import 'dart:convert' show json;
 import 'dart:html' as html;
 
+import 'package:macrobenchmarks/src/web/bench_text_layout.dart';
 import 'package:macrobenchmarks/src/web/bench_text_out_of_picture_bounds.dart';
 
 import 'src/web/bench_build_material_checkbox.dart';
@@ -17,6 +18,8 @@ import 'src/web/recorder.dart';
 
 typedef RecorderFactory = Recorder Function();
 
+const bool isCanvasKit = bool.fromEnvironment('FLUTTER_WEB_USE_SKIA', defaultValue: false);
+
 /// List of all benchmarks that run in the devicelab.
 ///
 /// When adding a new benchmark, add it to this map. Make sure that the name
@@ -27,6 +30,12 @@ final Map<String, RecorderFactory> benchmarks = <String, RecorderFactory>{
   BenchTextOutOfPictureBounds.benchmarkName: () => BenchTextOutOfPictureBounds(),
   BenchSimpleLazyTextScroll.benchmarkName: () => BenchSimpleLazyTextScroll(),
   BenchBuildMaterialCheckbox.benchmarkName: () => BenchBuildMaterialCheckbox(),
+
+  // Benchmarks that we don't want to run using CanvasKit.
+  if (!isCanvasKit) ...<String, RecorderFactory>{
+    BenchTextDomLayout.benchmarkName: () => BenchTextDomLayout(),
+    BenchTextDomCachedLayout.benchmarkName: () => BenchTextDomCachedLayout(),
+  }
 };
 
 /// Whether we fell back to manual mode.

dev/devicelab/lib/tasks/web_benchmarks.dart

@@ -138,10 +138,6 @@ Future<TaskResult> runWebBenchmark({ @required bool useCanvasKit }) async {
             throw 'Score key is empty in benchmark "$benchmarkName". '
                 'Received [${scoreKeys.join(', ')}]';
           }
-          if (scoreKey.contains('.')) {
-            throw 'Score key contain dots in benchmark "$benchmarkName". '
-                'Received [${scoreKeys.join(', ')}]';
-          }
           benchmarkScoreKeys.add('$namespace.$scoreKey');
         }