Skip to content

feat(debugbar): collapse panel to stylized W logo - #3559

Merged
bpamiri merged 3 commits into
developfrom
cursor/debugbar-collapse-logo-c730
Sep 9, 2026
Merged

feat(debugbar): collapse panel to stylized W logo#3559
bpamiri merged 3 commits into
developfrom
cursor/debugbar-collapse-logo-c730

Conversation

@bpamiri

@bpamiri bpamiri commented Sep 9, 2026

Copy link
Copy Markdown
Collaborator

Summary

Closes the debug bar to a logo-sized black strip with the stylized red W, instead of a floating "Debug" button. Clicking the collapsed logo expands the bar back across the bottom of the page.

When the bar is open, chrome stays as specified: stylized W first, X last. The X animates a CSS width transition from 100% to 40px (left-anchored), so the page underneath is revealed as the bar shrinks. Session restore still uses sessionStorage (wdb-hidden), without playing the animation on load.

Related Issue

Closes #3547

Type of Change

  • Enhancement to existing feature

Feature Completeness Checklist

  • DCO sign-off -- Every commit carries Signed-off-by:
  • Tests -- DebugBarCollapseSpec asserts logo-first / X-last chrome, no floating Debug button, and CSS/JS collapse hooks
  • Framework Docs -- N/A (chrome-only; no public API or guide change)
  • AI Reference Docs -- N/A
  • CLAUDE.md -- N/A
  • Changelog fragment -- changelog.d/3547-debugbar-collapse.changed.md
  • Test runner passes -- re-running events specs after the notice-selector fix

Test Plan

  • Rendered debug bar HTML has wdb-logo first and wdb-close last
  • No #wdb-minimized / floating "Debug" button
  • CSS defines .wdb-collapsed at 40px with a width transition
  • JS toggles .wdb-collapsed instead of display:none
  • Core events specs via bash tools/test-local.sh wheels.tests.specs.events
  • Hand-check collapse/expand animation if a local server is available

Approach

Keep collapse inside #wheels-debugbar (no sibling restore control). wdbMinimize() adds .wdb-collapsed; wdbLogoClick() restores when collapsed and still opens the Request panel when expanded. Overflow clips the tabs as the bar shrinks left, which is the slide.

Collapsed extras (panels, reload-refused banner) are hidden with #wheels-debugbar.wdb-collapsed > :not(.wdb-bar) so the CSS does not contain the data-wdb-reload-refused string that the #3311 notice specs scan for.

Out of scope: other debug tab content.

Open in Web Open in Cursor 

Replace the floating "Debug" restore button with an in-place slide:
the X shrinks the bar to a logo-sized black strip on the left, and
clicking the red W expands it back across the bottom of the page.

Signed-off-by: Cursor Agent <cursoragent@cursor.com>

Co-authored-by: Peter Amiri <peter@alurium.com>
@github-actions github-actions Bot added docs enhancement javascript Pull requests that update javascript code labels Sep 9, 2026
cursoragent and others added 2 commits September 9, 2026 17:20
The collapsed-state CSS used a [data-wdb-reload-refused] selector, so
the attribute string appeared in every debug-bar render and broke the
#3311 "no notice" assertions. Hide non-chrome children with :not(.wdb-bar)
instead.

Signed-off-by: Cursor Agent <cursoragent@cursor.com>

Co-authored-by: Peter Amiri <peter@alurium.com>
@bpamiri
bpamiri marked this pull request as ready for review September 9, 2026 17:45
@bpamiri
bpamiri merged commit c0abc7d into develop Sep 9, 2026
15 checks passed
@bpamiri
bpamiri deleted the cursor/debugbar-collapse-logo-c730 branch September 9, 2026 17:45
bpamiri added a commit that referenced this pull request Sep 9, 2026
Follow-up to #3559 / #3547. Remove the inline width pin next to \`all:initial\` so the stylesheet width transition can slide to a logo-only strip; hide non-logo bar chrome while collapsed; update guides copy.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs enhancement javascript Pull requests that update javascript code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

debug: collapse panel to stylized W logo with slide animation

2 participants