[Windows][Impeller] Scrolling basic LinearGradient decorations causes severe raster slowdown #190401

import 'dart:async';
import 'dart:developer';
import 'dart:math' as math;
import 'dart:ui';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter/services.dart';

void main() => runApp(const ReproductionApp());

class ReproductionApp extends StatefulWidget {
  const ReproductionApp({super.key});

  @override
  State<ReproductionApp> createState() => _ReproductionAppState();
}

class _ReproductionAppState extends State<ReproductionApp> {
  bool _showPerformanceOverlay = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      showPerformanceOverlay: _showPerformanceOverlay,
      theme: ThemeData.dark(useMaterial3: true),
      home: ReproductionScreen(
        showPerformanceOverlay: _showPerformanceOverlay,
        onPerformanceOverlayChanged: (bool value) {
          setState(() => _showPerformanceOverlay = value);
        },
      ),
    );
  }
}

class ReproductionScreen extends StatefulWidget {
  const ReproductionScreen({
    super.key,
    required this.showPerformanceOverlay,
    required this.onPerformanceOverlayChanged,
  });

  final bool showPerformanceOverlay;
  final ValueChanged<bool> onPerformanceOverlayChanged;

  @override
  State<ReproductionScreen> createState() => _ReproductionScreenState();
}

class _ReproductionScreenState extends State<ReproductionScreen>
    with TickerProviderStateMixin {
  final ScrollController _scrollController = ScrollController();
  late final FrameComparisonRunner _runner;
  bool _useGradient = false;
  bool _running = false;
  String _status = 'Maximize the window, then run the comparison.';
  List<ComparisonResult>? _results;

  @override
  void initState() {
    super.initState();
    _runner = FrameComparisonRunner(vsync: this, controller: _scrollController);
  }

  @override
  void dispose() {
    _runner.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  Future<void> _runComparison() async {
    if (_running) {
      return;
    }
    if (!_scrollController.hasClients ||
        !_scrollController.position.hasContentDimensions ||
        _scrollController.position.maxScrollExtent <= 0) {
      setState(() => _status = 'The scroll view is not ready. Try again.');
      return;
    }

    setState(() {
      _running = true;
      _results = null;
      _status =
          'Running automatically: solid color, 1-second pause, then gradient.';
    });
    try {
      final List<ComparisonResult> results = await _runner.run(
        view: View.of(context),
        onGradientChanged: (bool enabled) {
          if (mounted) {
            setState(() => _useGradient = enabled);
          }
        },
      );
      if (mounted) {
        setState(() {
          _results = results;
          _status = 'Comparison complete. Results are shown below.';
        });
      }
    } catch (error, stackTrace) {
      debugPrint('Comparison failed: $error\n$stackTrace');
      if (mounted) {
        setState(() => _status = 'Comparison failed: $error');
      }
    } finally {
      _running = false;
      if (mounted) {
        setState(() {});
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return CallbackShortcuts(
      bindings: <ShortcutActivator, VoidCallback>{
        const SingleActivator(LogicalKeyboardKey.f10): _runComparison,
      },
      child: Focus(
        autofocus: true,
        child: Scaffold(
          backgroundColor: const Color(0xff080808),
          body: Column(
            children: <Widget>[
              SizedBox(height: 190, child: _buildControls()),
              Expanded(
                child: _GradientScrollScene(
                  controller: _scrollController,
                  useGradient: _useGradient,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildControls() {
    return ColoredBox(
      color: const Color(0xff202020),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Row(
              children: <Widget>[
                const Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Windows linear-gradient comparison',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Text(
                        'Automatic solid-color / gradient comparison',
                        style: TextStyle(color: Colors.white60, fontSize: 12),
                      ),
                    ],
                  ),
                ),
                Text(
                  kProfileMode ? 'PROFILE MODE' : 'NOT PROFILE',
                  style: TextStyle(
                    color: kProfileMode
                        ? const Color(0xff65e6a8)
                        : const Color(0xffffad66),
                    fontWeight: FontWeight.bold,
                    fontSize: 12,
                  ),
                ),
                const SizedBox(width: 16),
                const Text('Performance overlay'),
                Switch(
                  value: widget.showPerformanceOverlay,
                  onChanged: _running
                      ? null
                      : widget.onPerformanceOverlayChanged,
                ),
                const SizedBox(width: 12),
                FilledButton(
                  onPressed: _running ? null : _runComparison,
                  child: const Text('Run comparison (F10)'),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Text(
              _status,
              style: const TextStyle(color: Color(0xff79e4ff), fontSize: 12),
            ),
            const SizedBox(height: 8),
            Expanded(child: _buildResults()),
          ],
        ),
      ),
    );
  }

  Widget _buildResults() {
    final List<ComparisonResult>? results = _results;
    if (results == null) {
      return Text(
        kProfileMode
            ? 'Leave the overlay off for the numeric run.'
            : 'Relaunch with --profile before collecting reportable results.',
        style: const TextStyle(color: Colors.white54, fontSize: 12),
      );
    }
    return SelectableText(
      <String>[
        'Mode                 FPS    UI p50/p95       '
            'Raster p50/p95/p99/max                 Over budget',
        ...results.map((ComparisonResult result) => result.displayLine),
      ].join('\n'),
      style: const TextStyle(
        color: Colors.white,
        fontFamily: 'Consolas',
        fontSize: 11,
        height: 1.45,
      ),
    );
  }
}

class _GradientScrollScene extends StatelessWidget {
  const _GradientScrollScene({
    required this.controller,
    required this.useGradient,
  });

  static const int _columnCount = 7;
  static const int _groupsPerColumn = 28;

  final ScrollController controller;
  final bool useGradient;

  @override
  Widget build(BuildContext context) {
    // Seven columns keep the visible workload consistent in both phases.
    return ScrollConfiguration(
      behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
      child: SingleChildScrollView(
        controller: controller,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: List<Widget>.generate(_columnCount, (int column) {
            return Expanded(
              child: Padding(
                padding: const EdgeInsets.all(6),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: List<Widget>.generate(_groupsPerColumn, (int row) {
                    return _GradientCell(useGradient: useGradient);
                  }),
                ),
              ),
            );
          }),
        ),
      ),
    );
  }
}

class _GradientCell extends StatelessWidget {
  const _GradientCell({required this.useGradient});

  final bool useGradient;

  @override
  Widget build(BuildContext context) {
    final Decoration decoration = useGradient
        ? const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: <Color>[Color(0xff164d66), Color(0xff7b285d)],
            ),
          )
        : const BoxDecoration(color: Color(0xff164d66));

    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: SizedBox(height: 230, child: DecoratedBox(decoration: decoration)),
    );
  }
}

/// Runs the solid-color/gradient sequence and summarizes Flutter's engine-reported
/// [FrameTiming] values for each measurement window.
class FrameComparisonRunner {
  FrameComparisonRunner({required this._vsync, required this._controller});

  static const double _scrollSpeed = 1400;
  static const Duration _unmeasuredScrollDuration = Duration(seconds: 2);
  static const Duration _measurementDuration = Duration(seconds: 4);
  static const Duration _timingDrainDuration = Duration(seconds: 1);
  static const Duration _interPhasePause = Duration(seconds: 1);
  static const double _maximumDeltaSeconds = 1 / 30;

  final TickerProvider _vsync;
  final ScrollController _controller;
  Ticker? _activeTicker;
  bool _running = false;
  bool _disposed = false;

  Future<List<ComparisonResult>> run({
    required FlutterView view,
    required ValueChanged<bool> onGradientChanged,
  }) async {
    if (_running || _disposed) {
      return const <ComparisonResult>[];
    }

    _running = true;
    try {
      final ComparisonResult solidColor = await _runPhase(
        view: view,
        label: 'Solid color',
        timelineLabel: 'GradientRepro_SolidColor',
        useGradient: false,
        onGradientChanged: onGradientChanged,
      );

      _controller.jumpTo(0);
      await Future<void>.delayed(_interPhasePause);

      final ComparisonResult gradient = await _runPhase(
        view: view,
        label: 'Linear gradient',
        timelineLabel: 'GradientRepro_LinearGradient',
        useGradient: true,
        onGradientChanged: onGradientChanged,
      );
      final List<ComparisonResult> results = <ComparisonResult>[
        solidColor,
        gradient,
      ];
      _printResults(results);
      return results;
    } finally {
      _running = false;
    }
  }

  Future<ComparisonResult> _runPhase({
    required FlutterView view,
    required String label,
    required String timelineLabel,
    required bool useGradient,
    required ValueChanged<bool> onGradientChanged,
  }) async {
    onGradientChanged(useGradient);
    await SchedulerBinding.instance.endOfFrame;

    final double extent = _controller.position.maxScrollExtent;
    _controller.jumpTo(0);
    await SchedulerBinding.instance.endOfFrame;
    await _drive(duration: _unmeasuredScrollDuration, extent: extent);

    _controller.jumpTo(0);
    await SchedulerBinding.instance.endOfFrame;

    final List<FrameTiming> timings = <FrameTiming>[];
    int? startMicros;
    int? endMicros;
    void collect(List<FrameTiming> batch) => timings.addAll(batch);

    SchedulerBinding.instance.addTimingsCallback(collect);
    final TimelineTask task = TimelineTask()
      ..start(
        timelineLabel,
        arguments: <String, Object>{'gradient_enabled': useGradient},
      );
    try {
      await _drive(
        duration: _measurementDuration,
        extent: extent,
        onFirstFrame: (int value) => startMicros = value,
        onLastFrame: (int value) => endMicros = value,
      );
      // FrameTiming batches can arrive after their frames have completed.
      await Future<void>.delayed(_timingDrainDuration);
    } finally {
      task.finish();
      SchedulerBinding.instance.removeTimingsCallback(collect);
    }

    // Keep only frames whose build started inside the driven measurement.
    final List<FrameTiming> measurementWindow =
        timings.where((FrameTiming timing) {
          final int timestamp = timing.timestampInMicroseconds(
            FramePhase.buildStart,
          );
          return startMicros != null &&
              endMicros != null &&
              timestamp >= startMicros! &&
              timestamp <= endMicros!;
        }).toList()..sort((FrameTiming a, FrameTiming b) {
          return a
              .timestampInMicroseconds(FramePhase.buildStart)
              .compareTo(b.timestampInMicroseconds(FramePhase.buildStart));
        });

    return ComparisonResult.fromTimings(
      label: label,
      timings: measurementWindow,
      measurementDuration: _measurementDuration,
      refreshRate: view.display.refreshRate,
    );
  }

  /// Moves the scroll offset once per ticker callback. The delta cap prevents
  /// a delayed callback from producing one abnormally large scroll jump.
  Future<void> _drive({
    required Duration duration,
    required double extent,
    ValueChanged<int>? onFirstFrame,
    ValueChanged<int>? onLastFrame,
  }) async {
    final Completer<void> done = Completer<void>();
    Duration? previous;
    double direction = 1;
    bool started = false;

    late final Ticker ticker;
    ticker = _vsync.createTicker((Duration elapsed) {
      final Duration? last = previous;
      previous = elapsed;
      if (last == null) {
        return;
      }

      final double deltaSeconds = math.min(
        (elapsed - last).inMicroseconds / Duration.microsecondsPerSecond,
        _maximumDeltaSeconds,
      );
      final int frameTimestamp =
          SchedulerBinding.instance.currentSystemFrameTimeStamp.inMicroseconds;
      if (!started) {
        started = true;
        onFirstFrame?.call(frameTimestamp);
      }

      double target =
          _controller.offset + _scrollSpeed * direction * deltaSeconds;
      if (target >= extent) {
        target = extent;
        direction = -1;
      } else if (target <= 0) {
        target = 0;
        direction = 1;
      }
      _controller.jumpTo(target);

      if (elapsed >= duration) {
        onLastFrame?.call(frameTimestamp);
        ticker.stop();
        done.complete();
      }
    });
    _activeTicker = ticker;
    ticker.start();
    await done.future;
    ticker.dispose();
    if (identical(_activeTicker, ticker)) {
      _activeTicker = null;
    }
  }

  void _printResults(List<ComparisonResult> results) {
    debugPrint('=== Windows linear-gradient comparison ===');
    debugPrint(
      'mode=${kProfileMode ? 'profile' : 'NOT_PROFILE'} '
      'speed=${_scrollSpeed.round()}px/s',
    );
    for (final ComparisonResult result in results) {
      debugPrint(result.consoleLine);
    }
    debugPrint('================================================');
  }

  void dispose() {
    _disposed = true;
    _activeTicker?.dispose();
    _activeTicker = null;
  }
}

class ComparisonResult {
  const ComparisonResult({
    required this.label,
    required this.frameCount,
    required this.fps,
    required this.build,
    required this.raster,
    required this.rasterOverBudget,
    required this.rasterOverBudgetPercent,
  });

  factory ComparisonResult.fromTimings({
    required String label,
    required List<FrameTiming> timings,
    required Duration measurementDuration,
    required double refreshRate,
  }) {
    final List<int> buildMicros = timings
        .map((FrameTiming timing) => timing.buildDuration.inMicroseconds)
        .toList();
    final List<int> rasterMicros = timings
        .map((FrameTiming timing) => timing.rasterDuration.inMicroseconds)
        .toList();
    final double budgetMicros = Duration.microsecondsPerSecond / refreshRate;
    final int overBudget = rasterMicros
        .where((int value) => value > budgetMicros)
        .length;
    final double seconds =
        measurementDuration.inMicroseconds / Duration.microsecondsPerSecond;

    return ComparisonResult(
      label: label,
      frameCount: timings.length,
      fps: timings.length < 2 ? 0 : (timings.length - 1) / seconds,
      build: TimingSummary.fromMicroseconds(buildMicros),
      raster: TimingSummary.fromMicroseconds(rasterMicros),
      rasterOverBudget: overBudget,
      rasterOverBudgetPercent: timings.isEmpty
          ? 0
          : overBudget * 100 / timings.length,
    );
  }

  final String label;
  final int frameCount;
  final double fps;
  final TimingSummary build;
  final TimingSummary raster;
  final int rasterOverBudget;
  final double rasterOverBudgetPercent;

  String get displayLine =>
      '${label.padRight(20)} '
      '${fps.toStringAsFixed(2).padLeft(6)}  '
      '${build.p50.toStringAsFixed(2).padLeft(5)}/'
      '${build.p95.toStringAsFixed(2).padRight(5)} ms   '
      '${raster.p50.toStringAsFixed(2).padLeft(6)}/'
      '${raster.p95.toStringAsFixed(2)}/'
      '${raster.p99.toStringAsFixed(2)}/'
      '${raster.max.toStringAsFixed(2)} ms   '
      '$rasterOverBudget/$frameCount '
      '(${rasterOverBudgetPercent.toStringAsFixed(1)}%)';

  String get consoleLine =>
      '$label | frames=$frameCount fps=${fps.toStringAsFixed(2)} '
      '| ui p50/p95=${build.p50.toStringAsFixed(3)}/'
      '${build.p95.toStringAsFixed(3)}ms '
      '| raster p50/p90/p95/p99/max=${raster.p50.toStringAsFixed(3)}/'
      '${raster.p90.toStringAsFixed(3)}/'
      '${raster.p95.toStringAsFixed(3)}/'
      '${raster.p99.toStringAsFixed(3)}/'
      '${raster.max.toStringAsFixed(3)}ms '
      '| raster_over_budget=$rasterOverBudget/$frameCount '
      '(${rasterOverBudgetPercent.toStringAsFixed(1)}%)';
}

class TimingSummary {
  const TimingSummary({
    required this.p50,
    required this.p90,
    required this.p95,
    required this.p99,
    required this.max,
  });

  factory TimingSummary.fromMicroseconds(List<int> values) {
    if (values.isEmpty) {
      return const TimingSummary(p50: 0, p90: 0, p95: 0, p99: 0, max: 0);
    }
    final List<int> sorted = List<int>.of(values)..sort();
    return TimingSummary(
      p50: _percentile(sorted, 0.50) / 1000,
      p90: _percentile(sorted, 0.90) / 1000,
      p95: _percentile(sorted, 0.95) / 1000,
      p99: _percentile(sorted, 0.99) / 1000,
      max: sorted.last / 1000,
    );
  }

  final double p50;
  final double p90;
  final double p95;
  final double p99;
  final double max;

  static double _percentile(List<int> sorted, double fraction) {
    final double position = (sorted.length - 1) * fraction;
    final int lower = position.floor();
    final int upper = position.ceil();
    if (lower == upper) {
      return sorted[lower].toDouble();
    }
    return sorted[lower] + (sorted[upper] - sorted[lower]) * (position - lower);
  }
}