Add benchmarks to measure impact of alpha saveLayers in DisplayLists (#97336)

.ci.yaml

@@ -2282,6 +2282,28 @@ targets:
       task_name: opacity_peephole_fade_transition_text_perf__e2e_summary
     scheduler: luci
 
+  - name: Linux_android opacity_peephole_grid_of_alpha_savelayers_perf__e2e_summary
+    bringup: true
+    recipe: devicelab/devicelab_drone
+    presubmit: false
+    timeout: 60
+    properties:
+      tags: >
+        ["devicelab","android","linux"]
+      task_name: opacity_peephole_grid_of_alpha_savelayers_perf__e2e_summary
+    scheduler: luci
+
+  - name: Linux_android opacity_peephole_col_of_alpha_savelayer_rows_perf__e2e_summary
+    bringup: true
+    recipe: devicelab/devicelab_drone
+    presubmit: false
+    timeout: 60
+    properties:
+      tags: >
+        ["devicelab","android","linux"]
+      task_name: opacity_peephole_col_of_alpha_savelayer_rows_perf__e2e_summary
+    scheduler: luci
+
   - name: Mac build_aar_module_test
     recipe: devicelab/devicelab_drone
     timeout: 60

TESTOWNERS

@@ -66,6 +66,8 @@
 /dev/devicelab/bin/tasks/opacity_peephole_one_rect_perf__e2e_summary.dart @flar @flutter/engine
 /dev/devicelab/bin/tasks/opacity_peephole_opacity_of_grid_perf__e2e_summary.dart @flar @flutter/engine
 /dev/devicelab/bin/tasks/opacity_peephole_fade_transition_text_perf__e2e_summary.dart @flar @flutter/engine
+/dev/devicelab/bin/tasks/opacity_peephole_col_of_alpha_savelayer_rows_perf__e2e_summary.dart @flar @flutter/engine
+/dev/devicelab/bin/tasks/opacity_peephole_grid_of_alpha_savelayers_perf__e2e_summary.dart @flar @flutter/engine
 
 ## Windows Android DeviceLab tests
 /dev/devicelab/bin/tasks/basic_material_app_win__compile.dart @zanderso @flutter/tool

dev/benchmarks/macrobenchmarks/lib/common.dart

@@ -32,6 +32,9 @@ const String kOpacityPeepholeGridOfOpacityRouteName = '$kOpacityPeepholeRouteNam
 const String kOpacityPeepholeOpacityOfGridRouteName = '$kOpacityPeepholeRouteName/opacity_of_grid';
 const String kOpacityPeepholeOpacityOfColOfRowsRouteName = '$kOpacityPeepholeRouteName/opacity_of_col_of_rows';
 const String kOpacityPeepholeFadeTransitionTextRouteName = '$kOpacityPeepholeRouteName/fade_transition_text';
+const String kOpacityPeepholeGridOfRectsWithAlphaRouteName = '$kOpacityPeepholeRouteName/grid_of_rects_with_alpha';
+const String kOpacityPeepholeGridOfAlphaSaveLayerRectsRouteName = '$kOpacityPeepholeRouteName/grid_of_alpha_savelayer_rects';
+const String kOpacityPeepholeColumnOfAlphaSaveLayerRowsOfRectsRouteName = '$kOpacityPeepholeRouteName/column_of_alpha_save_layer_rows_of_rects';
 
 const String kScrollableName = '/macrobenchmark_listview';
 const String kOpacityScrollableName = '$kOpacityPeepholeRouteName/listview';

dev/benchmarks/macrobenchmarks/lib/src/opacity_peephole.dart

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 
 import '../common.dart';
@@ -284,8 +286,133 @@ List<OpacityPeepholeCase> allOpacityPeepholeCases = <OpacityPeepholeCase>[
       );
     },
   ),
+  OpacityPeepholeCase.forValue(
+    route: kOpacityPeepholeGridOfRectsWithAlphaRouteName,
+    name: 'Grid of Rectangles with alpha',
+    builder: (double v) {
+      return Opacity(
+        opacity: _opacity(v),
+        child: SizedBox.expand(
+          child: CustomPaint(
+            painter: RectGridPainter((Canvas canvas, Size size) {
+              const int numRows = 10;
+              const int numCols = 7;
+              const double rectWidth = 30;
+              const double rectHeight = 30;
+              final double hGap = (size.width - numCols * rectWidth) / (numCols + 1);
+              final double vGap = (size.height - numRows * rectHeight) / (numRows + 1);
+              final double gap = min(hGap, vGap);
+              final double xOffset = (size.width - (numCols * (rectWidth + gap) - gap)) * 0.5;
+              final double yOffset = (size.height - (numRows * (rectHeight + gap) - gap)) * 0.5;
+              final Paint rectPaint = Paint();
+              for (int r = 0; r < numRows; r++, v = 1 - v) {
+                final double y = yOffset + r * (rectHeight + gap);
+                double cv = v;
+                for (int c = 0; c < numCols; c++, cv = 1 - cv) {
+                  final double x = xOffset + c * (rectWidth + gap);
+                  rectPaint.color = Color.fromRGBO(_red(cv), _green(cv), _blue(cv), _opacity(cv));
+                  final Rect rect = Rect.fromLTWH(x, y, rectWidth, rectHeight);
+                  canvas.drawRect(rect, rectPaint);
+                }
+              }
+            }),
+          ),
+        ),
+      );
+    },
+  ),
+  OpacityPeepholeCase.forValue(
+    route: kOpacityPeepholeGridOfAlphaSaveLayerRectsRouteName,
+    name: 'Grid of alpha SaveLayers of Rectangles',
+    builder: (double v) {
+      return Opacity(
+        opacity: _opacity(v),
+        child: SizedBox.expand(
+          child: CustomPaint(
+            painter: RectGridPainter((Canvas canvas, Size size) {
+              const int numRows = 10;
+              const int numCols = 7;
+              const double rectWidth = 30;
+              const double rectHeight = 30;
+              final double hGap = (size.width - numCols * rectWidth) / (numCols + 1);
+              final double vGap = (size.height - numRows * rectHeight) / (numRows + 1);
+              final double gap = min(hGap, vGap);
+              final double xOffset = (size.width - (numCols * (rectWidth + gap) - gap)) * 0.5;
+              final double yOffset = (size.height - (numRows * (rectHeight + gap) - gap)) * 0.5;
+              final Paint rectPaint = Paint();
+              final Paint layerPaint = Paint();
+              for (int r = 0; r < numRows; r++, v = 1 - v) {
+                final double y = yOffset + r * (rectHeight + gap);
+                double cv = v;
+                for (int c = 0; c < numCols; c++, cv = 1 - cv) {
+                  final double x = xOffset + c * (rectWidth + gap);
+                  rectPaint.color = Color.fromRGBO(_red(cv), _green(cv), _blue(cv), 1.0);
+                  layerPaint.color = Color.fromRGBO(255, 255, 255, _opacity(cv));
+                  final Rect rect = Rect.fromLTWH(x, y, rectWidth, rectHeight);
+                  canvas.saveLayer(null, layerPaint);
+                  canvas.drawRect(rect, rectPaint);
+                  canvas.restore();
+                }
+              }
+            }),
+          ),
+        ),
+      );
+    },
+  ),
+  OpacityPeepholeCase.forValue(
+    route: kOpacityPeepholeColumnOfAlphaSaveLayerRowsOfRectsRouteName,
+    name: 'Grid with alpha SaveLayer on Rows',
+    builder: (double v) {
+      return Opacity(
+        opacity: _opacity(v),
+        child: SizedBox.expand(
+          child: CustomPaint(
+            painter: RectGridPainter((Canvas canvas, Size size) {
+              const int numRows = 10;
+              const int numCols = 7;
+              const double rectWidth = 30;
+              const double rectHeight = 30;
+              final double hGap = (size.width - numCols * rectWidth) / (numCols + 1);
+              final double vGap = (size.height - numRows * rectHeight) / (numRows + 1);
+              final double gap = min(hGap, vGap);
+              final double xOffset = (size.width - (numCols * (rectWidth + gap) - gap)) * 0.5;
+              final double yOffset = (size.height - (numRows * (rectHeight + gap) - gap)) * 0.5;
+              final Paint rectPaint = Paint();
+              final Paint layerPaint = Paint();
+              for (int r = 0; r < numRows; r++, v = 1 - v) {
+                final double y = yOffset + r * (rectHeight + gap);
+                layerPaint.color = Color.fromRGBO(255, 255, 255, _opacity(v));
+                canvas.saveLayer(null, layerPaint);
+                double cv = v;
+                for (int c = 0; c < numCols; c++, cv = 1 - cv) {
+                  final double x = xOffset + c * (rectWidth + gap);
+                  rectPaint.color = Color.fromRGBO(_red(cv), _green(cv), _blue(cv), 1.0);
+                  final Rect rect = Rect.fromLTWH(x, y, rectWidth, rectHeight);
+                  canvas.drawRect(rect, rectPaint);
+                }
+                canvas.restore();
+              }
+            }),
+          ),
+        ),
+      );
+    },
+  ),
 ];
 
+class RectGridPainter extends CustomPainter {
+  RectGridPainter(this.painter);
+
+  final void Function(Canvas canvas, Size size) painter;
+
+  @override
+  void paint(Canvas canvas, Size size) => painter(canvas, size);
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}
+
 Map<String, WidgetBuilder> opacityPeepholeRoutes = <String, WidgetBuilder>{
   for (OpacityPeepholeCase variant in allOpacityPeepholeCases)
     variant.route: variant.buildPage,

dev/benchmarks/macrobenchmarks/test/opacity_peephole_col_of_alpha_savelayer_rows_perf_e2e.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 'package:macrobenchmarks/common.dart';
+
+import 'util.dart';
+
+void main() {
+  macroPerfTestMultiPageE2E(
+    'opacity_peephole_col_of_alpha_save_layer_rows',
+    <ScrollableButtonRoute>[
+      ScrollableButtonRoute(kScrollableName, kOpacityPeepholeRouteName),
+      ScrollableButtonRoute(kOpacityScrollableName, kOpacityPeepholeColumnOfAlphaSaveLayerRowsOfRectsRouteName),
+    ],
+    pageDelay: const Duration(seconds: 1),
+    duration: const Duration(seconds: 10),
+  );
+}

dev/benchmarks/macrobenchmarks/test/opacity_peephole_grid_of_alpha_savelayers_perf_e2e.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 'package:macrobenchmarks/common.dart';
+
+import 'util.dart';
+
+void main() {
+  macroPerfTestMultiPageE2E(
+    'opacity_peephole_grid_of_alpha_savelayers',
+    <ScrollableButtonRoute>[
+      ScrollableButtonRoute(kScrollableName, kOpacityPeepholeRouteName),
+      ScrollableButtonRoute(kOpacityScrollableName, kOpacityPeepholeGridOfAlphaSaveLayerRectsRouteName),
+    ],
+    pageDelay: const Duration(seconds: 1),
+    duration: const Duration(seconds: 10),
+  );
+}

dev/devicelab/bin/tasks/opacity_peephole_col_of_alpha_savelayer_rows_perf__e2e_summary.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:async';
+
+import 'package:flutter_devicelab/framework/devices.dart';
+import 'package:flutter_devicelab/framework/framework.dart';
+import 'package:flutter_devicelab/tasks/perf_tests.dart';
+
+Future<void> main() async {
+  deviceOperatingSystem = DeviceOperatingSystem.android;
+  await task(createOpacityPeepholeColOfAlphaSaveLayerRowsPerfE2ETest());
+}

dev/devicelab/bin/tasks/opacity_peephole_grid_of_alpha_savelayers_perf__e2e_summary.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:async';
+
+import 'package:flutter_devicelab/framework/devices.dart';
+import 'package:flutter_devicelab/framework/framework.dart';
+import 'package:flutter_devicelab/tasks/perf_tests.dart';
+
+Future<void> main() async {
+  deviceOperatingSystem = DeviceOperatingSystem.android;
+  await task(createOpacityPeepholeGridOfAlphaSaveLayersPerfE2ETest());
+}

dev/devicelab/lib/tasks/perf_tests.dart

@@ -519,6 +519,20 @@ TaskFunction createOpacityPeepholeFadeTransitionTextPerfE2ETest() {
   ).run;
 }
 
+TaskFunction createOpacityPeepholeGridOfAlphaSaveLayersPerfE2ETest() {
+  return PerfTest.e2e(
+    '${flutterDirectory.path}/dev/benchmarks/macrobenchmarks',
+    'test/opacity_peephole_grid_of_alpha_savelayers_perf_e2e.dart',
+  ).run;
+}
+
+TaskFunction createOpacityPeepholeColOfAlphaSaveLayerRowsPerfE2ETest() {
+  return PerfTest.e2e(
+    '${flutterDirectory.path}/dev/benchmarks/macrobenchmarks',
+    'test/opacity_peephole_col_of_alpha_savelayer_rows_perf_e2e.dart',
+  ).run;
+}
+
 Map<String, dynamic> _average(List<Map<String, dynamic>> results, int iterations) {
   final Map<String, dynamic> tally = <String, dynamic>{};
   for (final Map<String, dynamic> item in results) {