Fix CustomTreeView indentation for single-level nodes with checkboxes

[Copilot]

Problem

When a CustomTreeView contains only first-level nodes with checkboxes (no hierarchy), there's excessive left indentation that wastes horizontal space and creates visual imbalance. The red box in the issue image highlights this unnecessary spacing:

Root Cause

The TreeRenderer.renderElement method in abstractTree.ts always applies a base indentation of 8px (TreeRenderer.DefaultIndent) regardless of whether nodes are collapsible or need hierarchy visualization:

templateData.indentSize = TreeRenderer.DefaultIndent + (node.depth - 1) * this.indent;

For single-level trees with checkboxes, this creates 8px of unnecessary left padding since there are no expand/collapse twisties or hierarchical structure to visualize.

Solution

Modified the indentation calculation to use minimal indentation for first-level non-collapsible nodes:

// For first-level nodes that are not collapsible, use minimal indentation to avoid excessive spacing
const baseIndent = (node.depth === 1 && !node.collapsible) ? 0 : TreeRenderer.DefaultIndent;
templateData.indentSize = baseIndent + (node.depth - 1) * this.indent;

This change:

• ✅ Eliminates excessive spacing for single-level trees with checkboxes
• ✅ Preserves normal indentation for hierarchical trees
• ✅ Maintains indentation for collapsible first-level nodes
• ✅ No impact on deeper hierarchy levels

Testing

Created comprehensive test cases validating that:

• First-level non-collapsible nodes now have 0px base indentation (fixes the issue)
• First-level collapsible nodes still have 8px indentation (preserved functionality)
• Multi-level trees remain unaffected (no regression)

The fix specifically targets the problematic case (single-level trees with checkboxes) while maintaining backward compatibility for all other tree view scenarios.

Fixes #252934.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• electronjs.org
  • Triggering command: node-gyp (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[alexr00]

@copilot, I think we need to check that all the sibling nodes are also not collapsible.

[Copilot]

I've updated the implementation to check that all sibling first-level nodes are non-collapsible before applying the minimal indentation. The new approach:

1. Tracks whether any first-level nodes are collapsible via hasCollapsibleFirstLevelNodes property
2. Uses the model to check all first-level nodes (via this.model.getNode().children) to ensure consistency
3. Only applies 0 indentation when ALL first-level nodes are non-collapsible
4. Automatically recalculates state when tree structure changes or collapse states change

This ensures visual consistency when there's a mix of collapsible and non-collapsible first-level nodes. Commit 8b425c1 contains the updated implementation.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• electronjs.org
  • Triggering command: node-gyp (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list