Move FormattedJson to devtools_app_shared (flutter#6246)

Author: kenzieschmoll

packages/devtools_app/lib/src/screens/performance/panes/timeline_events/legacy/event_details.dart

@@ -5,7 +5,6 @@
 import 'package:devtools_app_shared/ui.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../../shared/common_widgets.dart';
 import '../../../../../shared/primitives/trace_event.dart';
 import '../../../../../shared/primitives/utils.dart';
 import '../../../performance_model.dart';

packages/devtools_app/lib/src/shared/common_widgets.dart

@@ -1252,34 +1252,6 @@ class _BreadcrumbPainter extends CustomPainter {
   }
 }
 
-// TODO(bkonyi): replace uses of this class with `JsonViewer`.
-class FormattedJson extends StatelessWidget {
-  const FormattedJson({
-    super.key,
-    this.json,
-    this.formattedString,
-    this.useSubtleStyle = false,
-  }) : assert((json == null) != (formattedString == null));
-
-  static const encoder = JsonEncoder.withIndent('  ');
-
-  final Map<String, dynamic>? json;
-
-  final String? formattedString;
-
-  final bool useSubtleStyle;
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    // TODO(kenz): we could consider using a prettier format like YAML.
-    return SelectableText(
-      json != null ? encoder.convert(json) : formattedString!,
-      style: useSubtleStyle ? theme.subtleFixedFontStyle : theme.fixedFontStyle,
-    );
-  }
-}
-
 class JsonViewer extends StatefulWidget {
   const JsonViewer({
     super.key,

packages/devtools_app_shared/example/ui/split_example.dart

@@ -8,7 +8,7 @@ import 'package:flutter/material.dart';
 /// Example of using the [Split] widget from
 /// 'package:devtools_app_shared/ui.dart' with two children laid across a
 /// horizontal axis.
-/// 
+///
 /// This example does not specify the [Split.splitters] parameter, so a
 /// default splitter is used.
 class SplitExample extends StatelessWidget {
@@ -31,7 +31,7 @@ class SplitExample extends StatelessWidget {
 /// Example of using the [Split] widget from
 /// 'package:devtools_app_shared/ui.dart' with three children laid across a
 /// vertical axis.
-/// 
+///
 /// This example uses custom splitters.
 class MultiSplitExample extends StatelessWidget {
   const MultiSplitExample({super.key});

packages/devtools_app_shared/example/utils/auto_dispose_example.dart

@@ -70,10 +70,10 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget>
   }
 }
 
-/// This is an example of a controller that uses the 
+/// This is an example of a controller that uses the
 /// [AutoDisposeControllerMixin] exposed by
 /// 'package:devtools_app_shared/utils.dart'.
-/// 
+///
 /// When [dispose] is called on this controller, any listeners or stream
 /// subscriptions added using the [AutoDisposeControllerMixin] will be disposed
 /// or canceled.

packages/devtools_app_shared/lib/src/service/eval_on_dart_library.dart

@@ -399,8 +399,7 @@ class EvalOnDartLibrary extends DisposableController
 
     // start awaiting the event before starting the evaluation, in case the
     // event is received before the eval function completes.
-    final future =
-        serviceManager.service!.onExtensionEvent.firstWhere((event) {
+    final future = serviceManager.service!.onExtensionEvent.firstWhere((event) {
       return event.extensionKind == 'future_completed' &&
           event.extensionData!.data['future_id'] == futureId &&
           // Using `_clientId` here as if two chrome tabs open the devtool, it is

packages/devtools_app_shared/lib/src/ui/common.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:convert';
+
 import 'package:flutter/material.dart';
 
 import '../utils/utils.dart';
@@ -110,10 +112,10 @@ class AreaPaneHeader extends StatelessWidget implements PreferredSizeWidget {
 }
 
 /// Wraps [child] in a rounded border with default styling.
-/// 
+///
 /// This border can optionally be made non-uniform by setting any of
 /// [showTop], [showBottom], [showLeft] or [showRight] to false.
-/// 
+///
 /// If [clip] is true, the child will be wrapped in a [ClipRRect] to ensure the
 /// rounded corner of the border is drawn as expected. This should not be
 /// necessary in most cases.
@@ -191,7 +193,7 @@ final class RoundedOutlinedBorder extends StatelessWidget {
 }
 
 /// Wraps [child] in a border with default styling.
-/// 
+///
 /// This border can optionally be made non-uniform by setting any of
 /// [showTop], [showBottom], [showLeft] or [showRight] to false.
 final class OutlineDecoration extends StatelessWidget {
@@ -684,3 +686,30 @@ Widget maybeWrapWithTooltip({
   }
   return child;
 }
+
+/// Displays a [json] map as selectable, formatted text.
+class FormattedJson extends StatelessWidget {
+  const FormattedJson({
+    super.key,
+    this.json,
+    this.formattedString,
+    this.useSubtleStyle = false,
+  }) : assert((json == null) != (formattedString == null));
+
+  static const encoder = JsonEncoder.withIndent('  ');
+
+  final Map<String, dynamic>? json;
+
+  final String? formattedString;
+
+  final bool useSubtleStyle;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return SelectableText(
+      json != null ? encoder.convert(json) : formattedString!,
+      style: useSubtleStyle ? theme.subtleFixedFontStyle : theme.fixedFontStyle,
+    );
+  }
+}