Determine the logging split view axis by the aspect ratio (#8435)

flutter · Oct 15, 2024 · f41c22f · f41c22f
1 parent 6935011
commit f41c22f
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 28 deletions.
diff --git a/packages/devtools_app/lib/src/screens/logging/logging_screen.dart b/packages/devtools_app/lib/src/screens/logging/logging_screen.dart
@@ -10,6 +10,7 @@ import 'package:provider/provider.dart';
 import '../../shared/analytics/analytics.dart' as ga;
 import '../../shared/analytics/constants.dart' as gac;
 import '../../shared/screen.dart';
+import '../../shared/ui/utils.dart';
 import '../../shared/utils.dart';
 import '_log_details.dart';
 import '_logs_table.dart';
@@ -70,43 +71,48 @@ class _LoggingScreenState extends State<LoggingScreenBody>
 
   @override
   Widget build(BuildContext context) {
+    final splitAxis = _splitAxisFor(context);
     return Column(
       children: [
         const LoggingControls(),
         const SizedBox(height: intermediateSpacing),
         Expanded(
-          child: _buildLoggingBody(),
+          child: SplitPane(
+            axis: splitAxis,
+            initialFractions: splitAxis == Axis.vertical
+                ? const [0.8, 0.2]
+                : const [0.7, 0.3],
+            children: [
+              RoundedOutlinedBorder(
+                clip: true,
+                child: LogsTable(
+                  controller: controller,
+                  data: controller.filteredData.value,
+                  selectionNotifier: controller.selectedLog,
+                  searchMatchesNotifier: controller.searchMatches,
+                  activeSearchMatchNotifier: controller.activeSearchMatch,
+                ),
+              ),
+              ValueListenableBuilder<LogData?>(
+                valueListenable: controller.selectedLog,
+                builder: (context, selected, _) {
+                  return LogDetails(log: selected);
+                },
+              ),
+            ],
+          ),
         ),
       ],
     );
   }
 
-  // TODO(kenz): replace with helper widget.
-  Widget _buildLoggingBody() {
-    return SplitPane(
-      axis: Axis.vertical,
-      initialFractions: const [0.72, 0.28],
-      // TODO(kenz): refactor so that the LogDetails header can be the splitter.
-      // This would be more consistent with other screens that use the console
-      // header as the splitter.
-      children: [
-        RoundedOutlinedBorder(
-          clip: true,
-          child: LogsTable(
-            controller: controller,
-            data: controller.filteredData.value,
-            selectionNotifier: controller.selectedLog,
-            searchMatchesNotifier: controller.searchMatches,
-            activeSearchMatchNotifier: controller.activeSearchMatch,
-          ),
-        ),
-        ValueListenableBuilder<LogData?>(
-          valueListenable: controller.selectedLog,
-          builder: (context, selected, _) {
-            return LogDetails(log: selected);
-          },
-        ),
-      ],
-    );
+  Axis _splitAxisFor(BuildContext context) {
+    final screenSize = MediaQuery.of(context).size;
+    final aspectRatio = screenSize.width / screenSize.height;
+    if (screenSize.height <= MediaSize.s.heightThreshold ||
+        aspectRatio >= 1.2) {
+      return Axis.horizontal;
+    }
+    return Axis.vertical;
   }
 }
diff --git a/packages/devtools_app/test/logging/logging_screen_test.dart b/packages/devtools_app/test/logging/logging_screen_test.dart
@@ -11,6 +11,7 @@ import 'package:devtools_app/src/screens/logging/_logs_table.dart';
 import 'package:devtools_app/src/screens/logging/_message_column.dart';
 import 'package:devtools_app/src/screens/logging/logging_controls.dart';
 import 'package:devtools_app/src/service/service_extension_widgets.dart';
+import 'package:devtools_app/src/shared/ui/utils.dart';
 import 'package:devtools_app_shared/ui.dart';
 import 'package:devtools_app_shared/utils.dart';
 import 'package:devtools_test/devtools_test.dart';
@@ -116,6 +117,39 @@ void main() {
       },
     );
 
+    testWidgetsWithWindowSize(
+      'builds with horizontal axis for small screens',
+      Size(600.0, MediaSize.s.heightThreshold), // 1.0 aspect ratio
+      (WidgetTester tester) async {
+        await pumpLoggingScreen(tester);
+        final splitPaneFinder = find.byType(SplitPane);
+        final splitPane = tester.widget(splitPaneFinder) as SplitPane;
+        expect(splitPane.axis, Axis.horizontal);
+      },
+    );
+
+    testWidgetsWithWindowSize(
+      'builds with horizontal axis for aspect ratio',
+      Size(722.0, MediaSize.s.heightThreshold + 1), // 1.20 aspect ratio
+      (WidgetTester tester) async {
+        await pumpLoggingScreen(tester);
+        final splitPaneFinder = find.byType(SplitPane);
+        final splitPane = tester.widget(splitPaneFinder) as SplitPane;
+        expect(splitPane.axis, Axis.horizontal);
+      },
+    );
+
+    testWidgetsWithWindowSize(
+      'builds with vertical axis for aspect ratio',
+      Size(721.0, MediaSize.s.heightThreshold + 1), // 1.19 aspect ratio
+      (WidgetTester tester) async {
+        await pumpLoggingScreen(tester);
+        final splitPaneFinder = find.byType(SplitPane);
+        final splitPane = tester.widget(splitPaneFinder) as SplitPane;
+        expect(splitPane.axis, Axis.vertical);
+      },
+    );
+
     testWidgetsWithWindowSize(
       'can clear logs',
       windowSize,