diff --git a/packages/devtools_app/lib/src/screens/logging/logging_screen.dart b/packages/devtools_app/lib/src/screens/logging/logging_screen.dart index c1bbf86fb9e..965c484b3e0 100644 --- 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 @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( + 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( - 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 index 7b5a5ecb051..6aae437603e 100644 --- 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,