[Inspector V2] Align tree connection lines to widget icons (#8842)
diff --git a/packages/devtools_app/lib/src/screens/inspector_v2/inspector_tree_controller.dart b/packages/devtools_app/lib/src/screens/inspector_v2/inspector_tree_controller.dart index 857e462..5988ef1 100644 --- a/packages/devtools_app/lib/src/screens/inspector_v2/inspector_tree_controller.dart +++ b/packages/devtools_app/lib/src/screens/inspector_v2/inspector_tree_controller.dart
@@ -1237,14 +1237,10 @@ ..color = colorScheme.treeGuidelineColor ..strokeWidth = chartLineStrokeWidth; -/// The distance (on the x-axis) between the expand/collapse and the start of -/// the row, as determined by a percentage of the [inspectorColumnIndent]. -const _expandCollapseToRowStartXDistancePercentage = 0.68; - /// The distance (on the x-axis) between the center of the widget icon and the /// start of the row, as determined by a percentage of the /// [inspectorColumnIndent]. -const _iconCenterToRowStartXDistancePercentage = 0.15; +const _iconCenterToRowStartXDistancePercentage = 0.41; /// The distance (on the y-axis) between the bottom of the widget icon and the /// top of the row, as determined by a percentage of the [inspectorRowHeight]. @@ -1277,12 +1273,11 @@ final node = row.node; final showExpandCollapse = node.showExpandCollapse; - final distanceFromExpandCollapseToRowStart = - inspectorColumnIndent * _expandCollapseToRowStartXDistancePercentage; + final distanceFromIconCenterToRowStart = + inspectorColumnIndent * _iconCenterToRowStartXDistancePercentage; for (final tick in row.ticks) { final expandCollapseX = - _controller.getDepthIndent(tick) - - distanceFromExpandCollapseToRowStart; + _controller.getDepthIndent(tick) - distanceFromIconCenterToRowStart; // Draw a vertical line for each tick identifying a connection between // an ancestor of this node and some other node in the tree. canvas.drawLine( @@ -1296,11 +1291,11 @@ if (row.lineToParent) { final parentExpandCollapseX = _controller.getDepthIndent(row.depth - 1) - - distanceFromExpandCollapseToRowStart; + distanceFromIconCenterToRowStart; final width = showExpandCollapse - ? inspectorColumnIndent * 0.6 - : inspectorColumnIndent; + ? inspectorColumnIndent * 0.45 + : inspectorColumnIndent * .6; canvas.drawLine( Offset(parentExpandCollapseX, 0.0), Offset(parentExpandCollapseX, inspectorRowHeight * 0.5),
diff --git a/packages/devtools_app/lib/src/shared/console/eval/inspector_tree_v2.dart b/packages/devtools_app/lib/src/shared/console/eval/inspector_tree_v2.dart index 3bcca5c..ffe2502 100644 --- a/packages/devtools_app/lib/src/shared/console/eval/inspector_tree_v2.dart +++ b/packages/devtools_app/lib/src/shared/console/eval/inspector_tree_v2.dart
@@ -27,7 +27,7 @@ const iconPadding = 4.0; const chartLineStrokeWidth = 1.0; -double get inspectorColumnIndent => scaleByFontFactor(24.0); +double get inspectorColumnIndent => scaleByFontFactor(36.0); double get inspectorRowHeight => scaleByFontFactor(20.0); /// This class could be refactored out to be a reasonable generic collapsible
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_errors_1_initial_load.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_errors_1_initial_load.png index dba5bb0..8a85abb 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_errors_1_initial_load.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_errors_1_initial_load.png Binary files differ
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_errors_2_error_selected.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_errors_2_error_selected.png index 1e4f85d..5b29b3f 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_errors_2_error_selected.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_errors_2_error_selected.png Binary files differ
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected.png index 1db7248..1be1c6d 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected.png Binary files differ
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected_from_search.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected_from_search.png index 1db7248..1be1c6d 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected_from_search.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected_from_search.png Binary files differ
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_collapsed.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_collapsed.png index 25fefb1..df776da 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_collapsed.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_collapsed.png Binary files differ
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_expanded.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_expanded.png index 5fc3b1c..97d7267 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_expanded.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_expanded.png Binary files differ
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_hidden.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_hidden.png index 88eb5b3..0d32fd4 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_hidden.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_implementation_widgets_hidden.png Binary files differ
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_initial_load.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_initial_load.png index 328f8ed..84081cf 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_initial_load.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_initial_load.png Binary files differ
diff --git a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_select_center.png b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_select_center.png index cc9aa44..b183464 100644 --- a/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_select_center.png +++ b/packages/devtools_app/test/test_infra/goldens/integration_inspector_v2_select_center.png Binary files differ