Skip to content

feat: add collapse/expand controls for file tree and file diffs; compactible with new/old pr diff page#8

Merged
rrbe merged 17 commits intomainfrom
worktree-feature-pr-collapse-expand
Apr 15, 2026
Merged

feat: add collapse/expand controls for file tree and file diffs; compactible with new/old pr diff page#8
rrbe merged 17 commits intomainfrom
worktree-feature-pr-collapse-expand

Conversation

@rrbe
Copy link
Copy Markdown
Owner

@rrbe rrbe commented Apr 14, 2026

Summary

  • Add two toggle buttons to PR/commit/compare diff pages:
    • Collapse/Expand tree — inside the file tree sidebar, collapses or expands all folder nodes with a single click (handles nested directories by processing deepest-first)
    • Collapse/Expand all files — in the right toolbar area, collapses or expands all file diff sections at once
  • Both buttons use GitHub Octicon icons (fold/unfold) for visual clarity
  • Single settings toggle controls both buttons (feature-pr-collapse-expand, default ON)
  • Works on PR Files Changed, commit detail, and compare pages (tree toggle is PR-only since only PR pages have the file tree sidebar)
  • Compatible with both old and new GitHub "files changed" UI — uses TreeFolder/DiffFile interfaces to abstract DOM differences, falling back to old selectors (file-tree, .diffbar, .file-header) when the new feature preview is not enabled

Test plan

  • On a PR Files Changed page (new experience), verify "Collapse tree / Expand tree" button appears in the file tree sidebar and toggles all folder nodes in one click
  • On a PR Files Changed page (old experience, without feature preview), verify the same tree toggle works with ActionList-based file tree
  • On a PR Files Changed page, verify "Collapse all files / Expand all files" button appears in the toolbar and toggles all file diffs
  • On a commit page, verify "Collapse all files / Expand all files" button appears and works
  • On a compare page, verify "Collapse all files / Expand all files" button appears and works
  • In extension settings, verify toggling off "Collapse/Expand All Files" removes both buttons

🤖 Generated with Claude Code

rrbe and others added 17 commits April 14, 2026 23:07
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move the button from the right controls area to right after the file
tree toggle in the left section, where it logically belongs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- "Hide tree / Show tree" button near the file tree icon toggle (PR pages only)
- "Collapse all / Expand all" button in the right controls area (all diff pages)
- Tree toggle proxies GitHub's native toggle and stays in sync via MutationObserver

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace the "Hide tree / Show tree" button with a "Collapse tree /
Expand tree" button placed inside the file tree sidebar. It toggles
all folder nodes in the file tree open/closed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Tree button: chevron-down/chevron-right icons matching folder chevrons
- Files button: fold-down/unfold icons for collapse/expand semantics

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…lder chevrons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Collapse deepest folders first, expand shallowest first, ensuring
nested directory trees fully toggle with a single button click.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The collapse/expand feature relied on DOM selectors specific to GitHub's
"New files changed experience" feature preview. This adds fallback
selectors for the old experience so both versions work:
- File tree: fall back to `file-tree` web component with ActionList buttons
- Diff toolbar: inject into `.diffbar` before `.pr-review-tools`
- File headers: use `.file-header` with `.js-details-target` toggle buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@rrbe rrbe changed the title feat: add collapse/expand controls for file tree and file diffs feat: add collapse/expand controls for file tree and file diffs; compactible with new/old pr diff page Apr 15, 2026
@rrbe rrbe merged commit 3938e75 into main Apr 15, 2026
@rrbe rrbe deleted the worktree-feature-pr-collapse-expand branch April 15, 2026 02:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant