Feature/floating draggable position

[H4ck3r-x0]

Add Floating/Draggable Position Mode

Summary

This PR introduces a new floating position mode that allows users to drag the debugbar anywhere on the screen, providing a more flexible debugging experience especially when working with full-height layouts or when the bottom-fixed debugbar obscures important UI elements.

Motivation

The current debugbar is fixed to the bottom of the viewport, which can be problematic when:

• Debugging layouts with important content at the bottom of the screen
• Working with full-height applications where the debugbar covers content
• Preferring to keep the debugbar in a corner while developing
• Using smaller screens where the fixed bar takes up valuable space

Features

Feature	Description
Drag & Drop	Drag the debugbar anywhere on screen via the header
Snap Zones	Snap to edges and corners with visual preview (8 zones)
Position Memory	Position persists in localStorage across page loads
Touch Support	Full support for touch devices
Settings Toggle	Switch between modes via Settings panel dropdown
FOUC Prevention	Smooth initialization without flash of unstyled content
Viewport Bounds	Debugbar stays within visible viewport
Minimize/Maximize	Fully compatible with existing minimize functionality

Configuration

// config/debugbar.php

'position' => 'floating', // 'bottom' (default) or 'floating'

'floating' => [
    'initial_x' => null,         // Initial X position (null = bottom-right)
    'initial_y' => null,         // Initial Y position (null = bottom-right)
    'remember_position' => true, // Persist position in localStorage
],

Snap Zones

When dragging near screen edges, users see a preview of where the debugbar will snap:

Zone	Behavior
Bottom	Full-width, fixed to bottom (like default mode)
Top	Full-width, fixed to top
Left/Right	Half-width, full-height sidebar
Corners	Quarter-screen in each corner

Technical Implementation

• New file: src/Resources/draggable.js (766 lines) - Standalone draggable functionality
• CSS additions: Floating mode styles, snap preview, transitions
• PHP integration: Position config injection, JS asset registration
• Performance: Throttled snap detection, RAF-based updates, optimized event handling

Screenshots

Testing

• Unit tests: FloatingPositionTest.php (14 tests)

  • Configuration options
  • Default values
  • Position config injection
  • CSS/JS file registration

• Browser tests: FloatingDebugbarBrowserTest.php (16 tests)

  • Floating mode initialization
  • Drag functionality
  • Position persistence
  • Snap zones and preview
  • Settings panel integration
  • FOUC prevention
  • Minimize/maximize compatibility

# Run tests
./vendor/bin/phpunit tests/FloatingPositionTest.php tests/FloatingDebugbarBrowserTest.php

Breaking Changes

None. Default behavior remains unchanged ('position' => 'bottom').

Checklist

• Code follows existing project conventions
• All existing tests pass
• New tests added for new functionality
• Documentation updated in README
• No console.log/debug statements in production code
• Works with existing minimize/maximize functionality
• Touch device support included
• FOUC prevention implemented
• Position respects viewport bounds

[barryvdh]

Thanks, I’ll look into this. I was in the progress of updating php-debugbar, so might be better to do this upstream. And would probably add it to the settings panel, where the current options for left/right are.

[barryvdh]

Also see php-debugbar/php-debugbar#660 and php-debugbar/php-debugbar#697 but reverted in php-debugbar/php-debugbar#701 because I wasn’t too happy with the UX, but maybe this Pr solves that :)

[barryvdh]

Oh you have the panel integration already, nevermind :)

[barryvdh]

This looks promising but I see a few issues:

• Not sure what it's supposed to do on the right, but it doesn't stick in the bottom
• When on top, it switches to smaller version.

[barryvdh]

I struggled with this a bit too, because it's tricky to differentiate between drag/drop start or a click on the tabs.

Might be solved by adding a drag button, if floating is enabled? Or adding a drag radius before activating dragging.

Also it seems a bit funky about resizing, especially on the right top.

[H4ck3r-x0]

Thanks for the feedback @barryvdh! I've addressed all the issues:

Fixes:

• Added 5px drag threshold to differentiate clicks from drags
• Simplified snap zones to bottom/top only (removed side snaps)
• Fixed top snap showing smaller version - now full width
• Fixed resize behavior on corners
• Fixed closed state showing wide container

New:

• Added resize handles for floating mode (when not snapped)
• Added "Top (Fixed)" position mode option
• Allow dragging from Laravel icon when closed

Let me know if anything else needs tweaking!

[barryvdh]

Hmm yeah I tested this, looks better but not 100% sure convinced about the dragging. I kinda get it if you want the toolbar on top, but not sure why you ever want it floating?

If I wanted to have it floating, I think I'd rather have a popup that I can actually move outside the window (which might not be a bad idea, but a bit more to have communication between tab/debugbar).

I DO like the blue areas for dragging, but probably more so for the icon itself (which also has 4 places). I kinda would expect that if I drag the icon to top right, it should stay there.

For the fixed top:

• When selecting fixed to top, the styling for borders is missing (they are correct when dragging to the top)
• When opening the debugbar on tap, the height of the page increases, but it still increases on the bottom. It should offset the top instead of bottom.

When floating

• Size fluctuates between clicking on tabs
• Personally don't see the use for floating.

[mrzuliann]

Done i thins this done

[mrzuliann]

Hi @, thanks for reviewing. This PR . CI/checks are <passing/green>. Please merge if there are no further comments. Thanks!

[barryvdh]

Hi @, thanks for reviewing. This PR . CI/checks are <passing/green>. Please merge if there are no further comments. Thanks!

See my last reply

[mrzuliann]

Yes true

[mrzuliann]

Ok

[barryvdh]

I added the top bar position here: #1831

It should probably be simpler to add the dragging there, just for the closed button. I don't really see a use for the floating though, sorry. Maybe if others do it might change though.