chore: attach screen render collector to the app lifecycle and ui traces , add unit tests.

Author: AndrewAminInstabug

example/lib/main.dart

@@ -48,6 +48,8 @@ part 'src/components/screen_render.dart';
 
 part 'src/components/animated_box.dart';
 
+part 'src/components/ui_traces_content.dart';
+
 void main() {
   runZonedGuarded(
     () {

example/lib/src/components/ui_traces_content.dart

@@ -0,0 +1,75 @@
+part of '../../main.dart';
+
+class UITracesContent extends StatefulWidget {
+  const UITracesContent({Key? key}) : super(key: key);
+
+  @override
+  State<UITracesContent> createState() => _UITracesContentState();
+}
+
+class _UITracesContentState extends State<UITracesContent> {
+  final traceNameController = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    return Column(
+      children: [
+        InstabugTextField(
+          label: 'UI Trace name',
+          labelStyle: textTheme.labelMedium,
+          controller: traceNameController,
+        ),
+        SizedBox.fromSize(
+          size: const Size.fromHeight(10.0),
+        ),
+        Row(
+          children: [
+            Flexible(
+              flex: 5,
+              child: InstabugButton.smallFontSize(
+                text: 'Start UI Trace',
+                onPressed: () => _startTrace(traceNameController.text),
+                margin: const EdgeInsetsDirectional.only(
+                  start: 20.0,
+                  end: 10.0,
+                ),
+              ),
+            ),
+            Flexible(
+              flex: 5,
+              child: InstabugButton.smallFontSize(
+                text: 'End UI Trace',
+                onPressed: () => _endTrace(),
+                margin: const EdgeInsetsDirectional.only(
+                  start: 10.0,
+                  end: 20.0,
+                ),
+              ),
+            ),
+          ],
+        ),
+
+      ],
+    );
+  }
+
+  void _startTrace(
+    String traceName, {
+    int delayInMilliseconds = 0,
+  }) {
+    if (traceName.trim().isNotEmpty) {
+      log('_startTrace — traceName: $traceName, delay in Milliseconds: $delayInMilliseconds');
+      log('traceName: $traceName');
+      Future.delayed(Duration(milliseconds: delayInMilliseconds),
+          () => APM.startUITrace(traceName));
+    } else {
+      log('startUITrace - Please enter a trace name');
+    }
+  }
+
+  void _endTrace() {
+    log('endUITrace - ');
+    APM.endUITrace();
+  }
+}

example/lib/src/screens/apm_page.dart

@@ -40,6 +40,8 @@ class _ApmPageState extends State<ApmPage> {
         const TracesContent(),
         const SectionTitle('Flows'),
         const FlowsContent(),
+        const SectionTitle('Custom UI Traces'),
+        const UITracesContent(),
         const SectionTitle('Screen Loading'),
         SizedBox.fromSize(
           size: const Size.fromHeight(12),

lib/src/models/InstabugFrameData.dart

@@ -1,9 +1,16 @@
-class InstabugFrameData{
+class InstabugFrameData {
   int startTimeTimestamp;
   int duration;
 
   InstabugFrameData(this.startTimeTimestamp, this.duration);
 
   @override
-  String toString() => "startTime: $startTimeTimestamp, duration: $duration";
-}
+  String toString() => "start time: $startTimeTimestamp, duration: $duration";
+
+  @override
+  bool operator == (covariant InstabugFrameData other) {
+    if (identical(this, other)) return true;
+    return startTimeTimestamp == other.startTimeTimestamp &&
+        duration == other.duration;
+  }
+}

lib/src/models/InstabugScreenRenderData.dart

@@ -1,15 +1,16 @@
+import 'package:flutter/foundation.dart';
 import 'package:instabug_flutter/src/models/InstabugFrameData.dart';
 
 class InstabugScreenRenderData {
   int traceId;
-  int totalSlowFramesDurations;
-  int totalFrozenFramesDurations;
+  int slowFramesTotalDuration;
+  int frozenFramesTotalDuration;
   List<InstabugFrameData> frameData;
 
   InstabugScreenRenderData({
-    this.totalSlowFramesDurations = 0,
-    this.totalFrozenFramesDurations = 0,
-    required this.frameData ,
+    this.slowFramesTotalDuration = 0,
+    this.frozenFramesTotalDuration = 0,
+    required this.frameData,
     this.traceId = -1,
   });
 
@@ -19,14 +20,25 @@ class InstabugScreenRenderData {
 
   void clear() {
     traceId = -1;
-    totalFrozenFramesDurations = 0;
-    totalSlowFramesDurations = 0;
+    frozenFramesTotalDuration = 0;
+    slowFramesTotalDuration = 0;
     frameData.clear();
   }
 
   @override
-  String toString() => '\nTraceId $traceId\n'
-      'TotalSlowFramesDurations: $totalSlowFramesDurations\n'
-      'TotalFrozenFramesDurations $totalFrozenFramesDurations\n'
-      'FrameData[\n${frameData.map((element) => '\t\n$element')}\n]';
+  String toString() => '\nTrace Id $traceId\n'
+      'Slow Frames Total Duration: $slowFramesTotalDuration\n'
+      'Frozen Frames Total Duration $frozenFramesTotalDuration\n'
+      'Frame Data[\n${frameData.map((element) => '\t\n$element')}\n]';
+
+  @override
+  bool operator ==(covariant InstabugScreenRenderData other) {
+    if (identical(this, other)) return true;
+    return traceId == other.traceId &&
+        slowFramesTotalDuration == other.slowFramesTotalDuration &&
+        frozenFramesTotalDuration == other.frozenFramesTotalDuration &&
+        listEquals(frameData, other.frameData);
+  }
+
+
 }

lib/src/modules/apm.dart

@@ -10,6 +10,8 @@ import 'package:instabug_flutter/src/utils/ibg_build_info.dart';
 import 'package:instabug_flutter/src/utils/ibg_date_time.dart';
 import 'package:instabug_flutter/src/utils/instabug_logger.dart';
 import 'package:instabug_flutter/src/utils/screen_loading/screen_loading_manager.dart';
+import 'package:instabug_flutter/src/utils/screen_rendering/instabug_screen_render_manager.dart';
+import 'package:instabug_flutter/src/utils/ui_trace/flags_config.dart';
 import 'package:meta/meta.dart';
 
 class APM {
@@ -189,14 +191,27 @@ class APM {
   /// Returns:
   ///   The method is returning a `Future<void>`.
   static Future<void> startUITrace(String name) async {
-    return _host.startUITrace(name);
+    return _host.startUITrace(name).then(
+      (_) async {
+        // Start screen render collector for custom ui trace if enabled.
+        if (await FlagsConfig.screenRendering.isEnabled()) {
+          InstabugScreenRenderManager.I.startScreenRenderCollectorForTraceId(0 ,UiTraceType.custom);
+        }
+      },
+    );
   }
 
   /// The [endUITrace] function ends a UI trace.
   ///
   /// Returns:
   ///   The method is returning a `Future<void>`.
   static Future<void> endUITrace() async {
+    // End screen render collector for custom ui trace if enabled.
+    if (await FlagsConfig.screenRendering.isEnabled()) {
+      return InstabugScreenRenderManager.I
+          .endScreenRenderCollectorForCustomUiTrace();
+    }
+
     return _host.endUITrace();
   }
 
@@ -353,7 +368,7 @@ class APM {
   /// Returns:
   ///   A Future<bool> is being returned.
   @internal
-  static Future<bool> isScreenRenderEnabled() async{
+  static Future<bool> isScreenRenderEnabled() async {
     return _host.isScreenRenderEnabled();
   }
 

lib/src/modules/instabug.dart

@@ -11,6 +11,7 @@ import 'dart:typed_data';
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+
 // to maintain supported versions prior to Flutter 3.3
 // ignore: unused_import
 import 'package:flutter/services.dart';
@@ -23,6 +24,7 @@ import 'package:instabug_flutter/src/utils/instabug_logger.dart';
 import 'package:instabug_flutter/src/utils/screen_name_masker.dart';
 import 'package:instabug_flutter/src/utils/screen_rendering/instabug_screen_render_manager.dart';
 import 'package:instabug_flutter/src/utils/screen_rendering/instabug_widget_binding_observer.dart';
+import 'package:instabug_flutter/src/utils/ui_trace/flags_config.dart';
 import 'package:meta/meta.dart';
 
 enum InvocationEvent {
@@ -194,7 +196,10 @@ class Instabug {
       debugLogsLevel.toString(),
     );
 
-    await InstabugScreenRenderManager.I.init();
+    if (await FlagsConfig.screenRendering.isEnabled()) {
+      checkForWidgetBinding();
+      await InstabugScreenRenderManager.I.init(WidgetsBinding.instance);
+    }
 
     return FeatureFlagsManager().registerW3CFlagsListener();
   }