[Inspector V2] Align tree connection lines to widget icons (#8842)

flutter · Feb 10, 2025 · 1a7e403 · 1a7e403
1 parent d4dd0fd
commit 1a7e403
Show file tree

Hide file tree

Showing 11 changed files with 8 additions and 13 deletions.
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
@@ -1237,14 +1237,10 @@ Paint _defaultPaint(ColorScheme colorScheme) =>
       ..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 @@ class _RowPainter extends CustomPainter {
 
     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 @@ class _RowPainter extends CustomPainter {
     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
@@ -27,7 +27,7 @@ typedef TreeEventCallback = void Function(InspectorTreeNode node);
 
 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/..._app/test/test_infra/goldens/integration_inspector_v2_errors_1_initial_load.png b/..._app/test/test_infra/goldens/integration_inspector_v2_errors_1_initial_load.png
diff --git a/...pp/test/test_infra/goldens/integration_inspector_v2_errors_2_error_selected.png b/...pp/test/test_infra/goldens/integration_inspector_v2_errors_2_error_selected.png
diff --git a/...p/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected.png b/...p/test/test_infra/goldens/integration_inspector_v2_hideable_widget_selected.png
diff --git a/...infra/goldens/integration_inspector_v2_hideable_widget_selected_from_search.png b/...infra/goldens/integration_inspector_v2_hideable_widget_selected_from_search.png
diff --git a/...est_infra/goldens/integration_inspector_v2_implementation_widgets_collapsed.png b/...est_infra/goldens/integration_inspector_v2_implementation_widgets_collapsed.png
diff --git a/...test_infra/goldens/integration_inspector_v2_implementation_widgets_expanded.png b/...test_infra/goldens/integration_inspector_v2_implementation_widgets_expanded.png
diff --git a/...t/test_infra/goldens/integration_inspector_v2_implementation_widgets_hidden.png b/...t/test_infra/goldens/integration_inspector_v2_implementation_widgets_hidden.png
diff --git a/.../devtools_app/test/test_infra/goldens/integration_inspector_v2_initial_load.png b/.../devtools_app/test/test_infra/goldens/integration_inspector_v2_initial_load.png
diff --git a/...devtools_app/test/test_infra/goldens/integration_inspector_v2_select_center.png b/...devtools_app/test/test_infra/goldens/integration_inspector_v2_select_center.png