[devicelab] add regular old blur benchmark (#123879)

[devicelab] add regular old blur benchmark

Author: jonahwilliams

.ci.yaml

@@ -2439,6 +2439,16 @@ targets:
         ["devicelab", "android", "linux"]
       task_name: android_choreographer_do_frame_test
 
+  - name: Linux_android animated_blur_backdrop_filter_perf__timeline_summary
+    recipe: devicelab/devicelab_drone
+    presubmit: false
+    timeout: 60
+    bringup: true
+    properties:
+      tags: >
+        ["devicelab", "android", "linux"]
+      task_name: animated_blur_backdrop_filter_perf__timeline_summary
+
   - name: Staging_build_linux analyze
     presubmit: false
     bringup: true
@@ -4049,6 +4059,16 @@ targets:
         ["devicelab", "ios", "mac"]
       task_name: flutter_gallery__transition_perf_e2e_impeller_ios
 
+  - name: Mac_ios animated_blur_backdrop_filter_perf_ios__timeline_summary
+    recipe: devicelab/devicelab_drone
+    presubmit: false
+    timeout: 60
+    bringup: true
+    properties:
+      tags: >
+        ["devicelab", "ios", "mac"]
+      task_name: animated_blur_backdrop_filter_perf_ios__timeline_summary
+
   - name: Mac_ios spell_check_test
     recipe: devicelab/devicelab_drone
     presubmit: false

TESTOWNERS

@@ -89,6 +89,7 @@
 /dev/devicelab/bin/tasks/textfield_perf__e2e_summary.dart @zanderso @flutter/engine
 /dev/devicelab/bin/tasks/web_size__compile_test.dart @yjbanov @flutter/web
 /dev/devicelab/bin/tasks/wide_gamut_ios.dart @gaaclarke @flutter/engine
+/dev/devicelab/bin/tasks/animated_blur_backdrop_filter_perf__timeline_summary.dart @jonahwilliams @flutter/engine
 
 ## Windows Android DeviceLab tests
 /dev/devicelab/bin/tasks/basic_material_app_win__compile.dart @zanderso @flutter/tool
@@ -208,6 +209,7 @@
 /dev/devicelab/bin/tasks/simple_animation_perf_ios.dart @zanderso @flutter/engine
 /dev/devicelab/bin/tasks/tiles_scroll_perf_impeller_ios__timeline_summary.dart @zanderso @flutter/engine
 /dev/devicelab/bin/tasks/tiles_scroll_perf_ios__timeline_summary.dart @zanderso @flutter/engine
+/dev/devicelab/bin/tasks/animated_blur_backdrop_filter_perf_ios__timeline_summary.dart @jonahwilliams @flutter/engine
 
 ## Host only DeviceLab tests
 /dev/devicelab/bin/tasks/animated_complex_opacity_perf_macos__e2e_summary.dart @cbracken @flutter/desktop

dev/benchmarks/macrobenchmarks/lib/common.dart

@@ -33,6 +33,7 @@ const String kGradientPerfRouteName = '/gradient_perf';
 const String kAnimatedComplexOpacityPerfRouteName = '/animated_complex_opacity';
 const String kAnimatedComplexImageFilteredPerfRouteName = '/animated_complex_image_filtered';
 const String kListTextLayoutRouteName = '/list_text_layout';
+const String kAnimatedBlurBackdropFilter = '/animated_blur_backdrop_filter';
 
 const String kOpacityPeepholeOneRectRouteName = '$kOpacityPeepholeRouteName/one_big_rect';
 const String kOpacityPeepholeColumnOfOpacityRouteName = '$kOpacityPeepholeRouteName/column_of_opacity';

dev/benchmarks/macrobenchmarks/lib/main.dart

@@ -5,7 +5,7 @@
 import 'package:flutter/material.dart';
 
 import 'common.dart';
-
+import 'src/animated_blur_backdrop_filter.dart';
 import 'src/animated_complex_image_filtered.dart';
 import 'src/animated_complex_opacity.dart';
 import 'src/animated_image.dart';
@@ -84,6 +84,7 @@ class MacrobenchmarksApp extends StatelessWidget {
         kAnimatedComplexOpacityPerfRouteName: (BuildContext context) => const AnimatedComplexOpacity(),
         kListTextLayoutRouteName: (BuildContext context) => const ColumnOfText(),
         kAnimatedComplexImageFilteredPerfRouteName: (BuildContext context) => const AnimatedComplexImageFiltered(),
+        kAnimatedBlurBackdropFilter: (BuildContext context) => const AnimatedBlurBackdropFilter(),
       },
     );
   }
@@ -311,6 +312,13 @@ class HomePage extends StatelessWidget {
               Navigator.pushNamed(context, kListTextLayoutRouteName);
             },
           ),
+          ElevatedButton(
+            key: const Key(kAnimatedBlurBackdropFilter),
+            child: const Text('An animating backdrop filter'),
+            onPressed: () {
+              Navigator.pushNamed(context, kAnimatedBlurBackdropFilter);
+            },
+          ),
         ],
       ),
     );

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

@@ -0,0 +1,84 @@
+// 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' as ui;
+import 'package:flutter/material.dart';
+
+// Various tests to verify that animated image filtered layers do not
+// dirty children even without explicit repaint boundaries. These intentionally use
+// text to ensure we don't measure the opacity peephole case.
+class AnimatedBlurBackdropFilter extends StatefulWidget {
+  const AnimatedBlurBackdropFilter({ super.key });
+
+  @override
+  State<AnimatedBlurBackdropFilter> createState() => _AnimatedBlurBackdropFilterState();
+}
+
+class _AnimatedBlurBackdropFilterState extends State<AnimatedBlurBackdropFilter> with SingleTickerProviderStateMixin {
+  late final AnimationController controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 5000));
+  late final Animation<double> animation = controller.drive(Tween<double>(begin: 0.0, end: 1.0));
+  ui.ImageFilter imageFilter = ui.ImageFilter.blur();
+
+  @override
+  void initState() {
+    super.initState();
+    controller.repeat();
+    animation.addListener(() {
+      setState(() {
+        imageFilter = ui.ImageFilter.blur(
+          sigmaX: animation.value * 16,
+          sigmaY: animation.value * 16,
+          tileMode: TileMode.decal,
+        );
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Stack(
+          children: <Widget>[
+            ListView(
+              children: <Widget>[
+                for (int i = 0; i < 30; i++)
+                  Center(
+                    child: Transform.scale(scale: 1.01, child: const ModeratelyComplexWidget()),
+                  ),
+              ],
+            ),
+            BackdropFilter(
+              filter: imageFilter,
+              child: const SizedBox.expand(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class ModeratelyComplexWidget extends StatelessWidget {
+  const ModeratelyComplexWidget({ super.key });
+
+  @override
+  Widget build(BuildContext context) {
+    return const Material(
+      elevation: 10,
+      clipBehavior: Clip.hardEdge,
+      child: ListTile(
+        leading: Icon(Icons.abc, size: 24),
+        title: DecoratedBox(decoration: BoxDecoration(color: Colors.red), child: Text('Hello World')),
+        trailing: FlutterLogo(),
+      ),
+    );
+  }
+}

dev/benchmarks/macrobenchmarks/test_driver/animated_blur_backdrop_filter_perf_test.dart

@@ -0,0 +1,16 @@
+// 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() {
+  macroPerfTest(
+    'animated_blur_backdrop_filter_perf',
+    kAnimatedBlurBackdropFilter,
+    pageDelay: const Duration(seconds: 1),
+    duration: const Duration(seconds: 10),
+  );
+}

dev/benchmarks/macrobenchmarks/test_driver/util.dart

@@ -23,7 +23,7 @@ Future<void> runDriverTestForRoute(String routeName, DriverTestCallBack body) as
   expect(scrollable, isNotNull);
   final SerializableFinder button = find.byValueKey(routeName);
   expect(button, isNotNull);
-  await driver.scrollUntilVisible(scrollable, button, dyScroll: -50.0);
+  await driver.scrollUntilVisible(scrollable, button, dyScroll: -100.0);
   await driver.tap(button);
 
   await body(driver);

dev/devicelab/bin/tasks/animated_blur_backdrop_filter_perf__timeline_summary.dart

@@ -0,0 +1,14 @@
+// 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(createAnimatedBlurBackropFilterPerfTest(enableImpeller: true));
+}

dev/devicelab/bin/tasks/animated_blur_backdrop_filter_perf_ios__timeline_summary.dart

@@ -0,0 +1,14 @@
+// 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.ios;
+  await task(createAnimatedBlurBackropFilterPerfTest());
+}

dev/devicelab/lib/tasks/perf_tests.dart

@@ -620,6 +620,19 @@ TaskFunction createGradientStaticPerfE2ETest() {
   ).run;
 }
 
+TaskFunction createAnimatedBlurBackropFilterPerfTest({
+  bool enableImpeller = false,
+}) {
+  return PerfTest(
+    '${flutterDirectory.path}/dev/benchmarks/macrobenchmarks',
+    'test_driver/run_app.dart',
+    'animated_blur_backdrop_filter_perf',
+    enableImpeller: enableImpeller,
+    testDriver: 'test_driver/animated_blur_backdrop_filter_perf_test.dart',
+    saveTraceFile: true,
+  ).run;
+}
+
 TaskFunction createAnimatedComplexOpacityPerfE2ETest({
   bool enableImpeller = false,
 }) {