Browser-laptop: Improve Drag and Drop for Tabs

[cezaraugusto]

We have React-DnD implemented as a dependency, and already used on new tab page.

React-DnD is a great library and since it's already implemented, could be useful for all features that require drag-n-drop. In this case, tabs.

Specific tasks

• [ ] Animation should be nice and smooth. Sliding instead of popping (originally reported with https://github.com/brave/browser-laptop/issues/8291, https://github.com/brave/browser-laptop/issues/8288)
• [x] Drop zone needs to be clear to user (see https://github.com/brave/browser-laptop/issues/6863 for more info)
• [ ] moving mouse up and down (Y axis) should not move the tab (or the ghost preview) up or down (until the threshold for tear off is hit)
• [ ] tear off on Y axis should be about 15 pixels before it does a tear off (see https://github.com/brave/browser-laptop/issues/9211)
• [ ] dragging the tab moves the actual tab (not a ghosted preview of it)

Related

• Extend drag-n-drop functionality between URL, tabs, bookmarks, tiles, etc. #8067
• Tab.less conversion #11272

[cezaraugusto]

Setting as backlog until we can deep dive on it setting to 1.2.0

[cndouglas]

Specific issue: #6033

[lifeinchords]

It would be great to be able to drag + drop between windows, to group tabs by topic, ie:
These 10 have to do with a vacation
These 15 tabs in this window are for this project
etc

[bsclifton]

Assigning over to @cezaraugusto who did a great job with the New Tab page (which uses the mentioned React-DnD library) :smile:

@cezaraugusto let's check this one out AFTER you finish with these two issues:
https://github.com/brave/browser-laptop/pull/5918 (~tabs responsiveness~)
https://github.com/brave/browser-laptop/issues/5979 (~pref for always allow fullscreen~)

cc: @bbondy

[bsclifton]

@lifeinchords good call- we have an issue specifically tracking that if you wanted to subscribe :smile:

Check it out here: https://github.com/brave/browser-laptop/issues/4402

[bsclifton]

cc: @bradleyrichter per our recent discussions

One of the behaviors he wanted to address was accidental tab tear off. We may choose to restrict the Y axis (have to drag more than 20px above or below the tab, etc).

@bradleyrichter can you help me break this task into several tangible tasks? Like

• dragging tab should move it over to the next one once it's dragged 1/3 of the way into another tab
• tab should be shown sliding BEHIND the tab next to it
• etc

edit: updated original issue

[Tomalak]

I agree this needs work, the "accidental tab tear off" is a big annoyance for me.

It happens extremely often when switching tabs with the mouse (maybe HiDPI also has a negative effect here), and sometimes the torn-off tabs do not even want to re-integrate at all.

[bradleyrichter]

@petemill is on the scene, doing a deep dive on all things tab DnD.

https://github.com/brave/browser-laptop/pull/10686

We are modeling Chrome but dealing with some challenges that come with Electron.

[alexwykoff]

@petemill - just updating plan of record to pull out the easy fix and jettison the rest. :D

[bsclifton]

Marking as wontfix since we'll get this for free with Brave Core