Problem/Motivation
When working with the Navigator tree panel, users currently need to single-click a tree node to open the settings sidebar, or hover over a node to see a brief highlight on the corresponding canvas element. There is no way to quickly locate a node's position on the builder/scaffold canvas without manually scrolling.
Proposed resolution
Add double-click support to Navigator tree nodes. When a user double-clicks a tree node (component, block, or slot), the corresponding element on the currently visible canvas panel (Builder, Wireframe, or Scaffold) is scrolled into view and briefly highlighted.
Implementation approach (client-side only, panel_tree.js):
1. Capture-phase click interception — A capture-phase click listener on .db-tree intercepts clicks before HTMX processes them. A 200ms debounce timer distinguishes single-click from double-click on the same node.
2. Double-click action — scrollToNodeAndHighlight():
- Finds the matching element in the visible non-tree view panel using the existing data-node-id / data-slot-id attributes
- Calls element.scrollIntoView({ behavior: 'smooth', block: 'center' })
- Adds .db-tree--selected class (purple/fuchsia outline, same as hover highlight) for 2 seconds
- Uses offsetParent check to only scroll the currently active/visible panel (since Shoelace tabs hide inactive panes via display: none CSS class, not the [hidden] attribute)
3. Single-click action (debounce timer expires) — For component/block nodes: programmatically fires the HTMX GET request (htmx.ajax()) and opens the settings sidebar (handleSecondDrawer()), preserving existing behavior. For slot nodes: toggles collapse/expand (toggleNode()).
4. Chevron button clicks — Still excluded from interception, so existing expand/collapse behavior is unaffected.
User interface changes
N/A
API changes
N/A
Data model changes
N/A
Issue fork display_builder-3613255
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
ipumpkinComment #4
mogtofu33 commented