Drag & Drop Tabs to create a Pane

[simonferquel]

Description of the new feature/enhancement

The current way of splitting panes using written commands or shortcuts is awesome but difficult to discover. There is already some drag & drop support for reordering tabs. It would be awesome to be able to drag & drop a tab to split a pane in the previous tab. An exemple of user interaction sequence:

• Open Windows terminal: it shows a single tab with a single pane with powershell
• Hit ctrl+shift+3 to open a ubuntu tab
• drag the ubuntu tab > it shows me the previous tab (powershell)
• using my mouse I can move the ubuntu tab into sensitive zones an preview the resulting split (a bit like Visual Studio/code UI)
• I can then drop, and get a nice splitted pane.

Optionally, show a popup saying "Want to automate that ? click here to copy an automation script to your clipboard", which would copy a script that would do the same thing.

Proposed technical implementation details (optional)

Well, I am sure it is possible to do that by writing some code :)

[simonferquel]

In this context, hard to discover means also "easy to forget"

[zadjii-msft]

Thanks for the suggestion! This is actually already being tracked by another issue on our repo - please refer to #992 for more discussion.

/dup #992

[ghost]

Hi! We've identified this issue as a duplicate of another one that already exists on this Issue Tracker. This specific instance is being closed in favor of tracking the concern over on the referenced thread. Thanks for your report!

[simonferquel]

@zadjii-msft I don't think it is a duplicate. #992 only talks about resizing the panes, not for merging tabs into a multi-pane view by drag and drop.

[zadjii-msft]

D'oh, yea okay reading this more carefully (and with more coffee), I see what you mean. Yea this definitely isn't a dupe. Sorry about that!

[randomascii]

I thought about filing a separate issue but decided to comment on this one instead. In the web browser world it is now assumed that users can drag tabs out of windows, back into windows, etc. This tearing off of tabs is an essential and elegant tool. The Windows Terminal should copy this UI paradigm. That is, in addition to being able to drag tabs to rearrange their order, and drag tabs to create panes, users should also be able to drag panes to other terminal windows, or drag them out to create new terminal windows.

[DHowett-MSFT]

I actually really like the WPF/Visual Studio tab hover/drag/drop controls. I'd love to see us implement something like that.

[DHowett-MSFT]

(I thought they were obnoxious at first, but now that I'm older and either more or less opinionated, I find them "usable" :grin:)

[DHowett]

@randomascii I realized I never saw your comment. We've got an issue tracking tab tearoff/window merging, and we're evaluating it for the post-v1 timeframe. That's over in #1256!

[davkean]

Just to add my +1, I could have sworn that I saw that you could split tabs - I spent a long time trying to figure out how to do it and gave up. Only figured out how to do this when I read the settings file and saw there was a shortcut for it. I also like VS approach and was my first attempt at splitting panels (note: I work on VS, I am biased).

[zadjii-msft]

From @schuelermine in #6291:

Currently, dragging a tab allows you to rearrange the tab order.

I suggest that it should also be possible to adjust panes this way. Please see the attached image.

Dragging a tab onto a seam between to panes or near the edge of a tab should create a new pane there and place the tab in there. It should also be possible to swap a tab and a pane by dragging onto the center.

The upper-right example is dubious, as it requires the addition of a draggable icon to every pane. It has been greyed out to clarify this.

[Andrei-Paul]

I would very much prefer if panes also had a tab indicator, maybe grouping panes in consecutive tabs marked with the same color to mark a pane group, or a single "fatter" tab with some markings from each contained pane. Clicking on the "sub-tab" could directly bring that pane to focus.

But I can work with just drag-drop-able tabs / panes. 😁

[schuelermine]

@zadjii-msft I've made a slightly better version of that mockup, you might want to replace that image with this one: https://drive.google.com/file/d/1h6YLEPTmdB0woqNMep-npFMqTEJGY3HX/view?usp=sharing

[zadjii-msft]

Meh, I'll just upload the new version here, that's easier 😉

[lucianotres]

Please don't forget the drag out to create new window, like browser tabs do. It's very quickly and easy when you have more than one screen.

[luzhkovvv]

I'd like to vote this feature up by describing important use-case. That feature is more than only cosmetics or "mouse-friendly" way to split tab vs keyboard-only. The main point of that feature for me is moving existing tab (session) with all context into split view. Every now and then I find myself working in several tabs with several servers, multiple sessions to one server, different virtual environments, opening different files and applications, and then thinking "this is it! I have to view that session side-by-side with that one". And it takes time to recreate the session again in a new empty split pane. Sometimes it may take so much time that I keep working in different tabs constantly switching (like, logging to some server, optionally through an intermediate server, executing some actions, waiting for results, etc). To be honest, I almost never know I will need split-tab before I have some active sessions I'd like to split. It may (should) be problems with me planning the work, but so it is, and I think that problem is pretty common. 😉 Also, the need for the split view is sometimes dynamic, when at one point you need session1 + session2, than session1 + session3, than session2 and session3 and so on, so you can't work this around by planning layout in advance or sacrificing screen space to split view everything you may need.

[jonathanmarston]

I would like to echo @luzhkovvv's comment. This would be very useful as I frequently find myself starting multiple tabs initially to get stuff kicked off, and then moving more into a "monitoring" mode, where I'd like to move the existing sessions into panes so I can see them all at once.

I'd be willing to contribute some coding time to make this happen if it is approved and up for grabs.

[piradata]

Also one use case for this would be to reorganize the position of existing tabs for time when you badly positioned then and there is too much info on one pane horizontally like a running a "docker ps" or a "kubectl get pods -o wide"

And we get

If I am not mistaken, the Terminator terminal already permit this, could be useful looking at their code for reference.

https://terminator-gtk3.readthedocs.io/en/latest/gettingstarted.html

[dhirschfeld]

If you're looking for some prior-art to guide the implementation I think the JupyterLab experience is an excellent (and battle-tested) UI/UX.

The tab drag & drop functionality is provided by the lumino DockPanel widget - e.g.

https://lumino.readthedocs.io/en/latest/examples/dockpanel/index.html

[SinanAkkoyun]

Any updates on this? Also, please add it that when tabs are pulled outside the window, a new winterm should spawn (and vice versa, like in google chrome)

[zadjii-msft]

Nope. We'll make sure to update this thread when there is. In the meantime, might I recommend the Subscribe button? That way you'll be notified of any updates to this thread, without needlessly pinging everyone on this thread ☺️

Also, tab tear-out is tracked in #1256 and implemented in the series of PRs terminating in #14935

[bar0n36]

The lack of this functionality is incredibly frustrating when you are setting up something in one tab, pop a new one to do something else and want to be able to watch them side-by-side. The non-intuitive, non-standard 'well right click and split tabs first' would be wonderful except nothing else does this. This is my biggest issue and makes me want to use a different terminal emulator every time I encounter it.

[piradata]

by the way, if this were to be implemented, where would be the "drag region"? like, we don't have currently anything in the terminal that is draggable or is a panel indicator in each panel, as they have a clean design and I think they should remain that way.

Any suggestions?

[zadjii-msft]

Dragging and dropping a tab to create a pane is pretty straightforward - we could have some sort of overlay like VS or VSCode.

Dragging a Pane to somewhere else would probably require #4717 first, so that there's something attached to the pane to drag.

[SinanAkkoyun]

I tested it, it already works. Sometimes not, but most of the time with the preview app.

[zadjii-msft]

@SinanAkkoyun Sounds like you're talking about tab tear-out, which was added in 1.18 and was tracked originally in #1256.

[piradata]

yea, dragging a tab is ok, my point was the pane part. personally i think it is a little ugly the idea of pane title because i like how the windows terminal is "clean" compared to others like terminator, but we also need something draggable

[klkvsk]

Here's an idea I want to share, what can be done instead of permanently visible drag handles:

So, by default we have alt-shift-arrow hotkeys to resize pane, alt-shift-plus/minus to create a pane. It is mnemonical that all pane modifications are done with alt-shift.

I suggest a alt-shift-control combo, that while pressed would enable an overlay mode called Pane Control Mode.

While alt-shift-control is down, we get

• Pane index hints, because we have "Move pane, index: X" actions, but as of now, how does the user know the correct index? Also, "Focus/Close pane, index: X" actions can be added later. This is also a visible marker to know that you're in pane control mode.
• Borders of panes become resizable with a mouse.
• Panes become draggable. Dragging one pane to another switches their positions. Dragging pane to tab bar ejects in to a new tab. Dragging out of window ejects to new window.
• (debatable) hovering over edges of an active pane shows "+" button to add a pane from that side.

[piradata]

I suggest a alt-shift-control combo, that while pressed would enable an overlay mode called Pane Control Mode.

I like this idea @klkvsk , and if we combine this with the lumino demo that @dhirschfeld mentioned would be perfect.

https://lumino.readthedocs.io/en/latest/examples/dockpanel/index.html