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 Tab moving needs a better ui #8291, Fixed jumpy tab drag and drop #8288)
• Drop zone needs to be clear to user (see when you drag the tab and drop it exactly where 🚫 is displayed, the drop is canceled (follow-up of #6033) #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 Improve tab tear-off sensitivity #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. Extend drag-n-drop functionality between URL, tabs, bookmarks, tiles, etc. #8067
• Tab.less conversion Convert tabs bar with Aphrodite to remove tabs.less #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) 😄

@cezaraugusto let's check this one out AFTER you finish with these two issues:
#5918 (tabs responsiveness)
#5979 (pref for always allow fullscreen)

cc: @bbondy

[bsclifton]

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

Check it out here: #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.

#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