Drag & Drop Tabs to create a Pane #4587

simonferquel · 2020-02-14T11:10:45Z

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 · 2020-02-14T11:12:21Z

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

randomascii · 2020-03-17T00:05:18Z

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 · 2020-03-17T00:25:01Z

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 · 2020-03-17T00:25:21Z

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

DHowett · 2020-05-18T23:46:35Z

@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 · 2020-05-20T04:41:30Z

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 · 2020-06-02T11:28:31Z

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 · 2020-06-03T10:24:20Z

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 · 2020-06-11T15:28:11Z

@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 · 2020-06-11T15:31:45Z

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

lucianotres · 2020-08-08T14:29:23Z

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 · 2020-08-09T14:33:42Z

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 · 2021-06-18T02:21:50Z

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.

## Summary of the Pull Request Add functionality to move a pane to another tab. If the tab index is greater than the number of current tabs a new tab will be created with the pane as its root. Similarly, if the last pane on a tab is moved to another tab, the original tab will be closed. This is largely complete, but I know that I'm messing around with things that I am unfamiliar with, and would like to avoid footguns where possible.  ## References #4587  ## PR Checklist * [x] Closes #7075 * [x] CLA signed. If not, go over [here](https://cla.opensource.microsoft.com/microsoft/Terminal) and sign the CLA * [ ] Tests added/passed * [x] Documentation updated. If checked, please file a pull request on [our docs repo](https://github.com/MicrosoftDocs/terminal) and link it here: #xxx * [x] Schema updated. * [ ] I've discussed this with core contributors already. If not checked, I'm ready to accept this work might be rejected in favor of a different grand plan. Issue number where discussion took place: #xxx  ## Detailed Description of the Pull Request / Additional comments Things done: - Moving a pane to a new tab appears to work. Moving a pane to an existing tab mostly works. Moving a pane back to its original tab appears to work. - Set up {Attach,Detach}Pane methods to add or remove a pane from a pane. Detach is slightly different than Close in that we want to persist the tree structure and terminal controls. - Add `Detached` event on a pane that can be subscribed to to remove other event handlers if desired. - Added simple WalkTree abstraction for one-off recursion use cases that calls a provided function on each pane in order (and optionally terminates early). - Fixed an in-prod bug with closing panes. Specifically, if you have a tree (1; 2 3) and close the 1 pane, then 3 will lose its borders because of these lines clearing the border on both children https://github.com/microsoft/terminal/blob/main/src/cascadia/TerminalApp/Pane.cpp#L1197-L1201 . To do: - Right now I have `TerminalTab` as a friend class of `Pane` so I can access some extra properties in my `WalkTree` callbacks, but there is probably a better choice for the abstraction boundary. Next Steps: - In a future PR Drag & Drop handlers could be added that utilize the Attach/Detach infrastructure to provide a better UI. - Similarly once this is working, it should be possible to convert an entire tab into a pane on an existing tab (Tab::DetachRoot on original tab followed by Tab::AttachPane on the target tab). - Its been 10 years, I just really want to use concepts already.  ## Validation Steps Performed Manual testing by creating pane(s), and moving them between tabs and creating new tabs and destroying tabs by moving the last remaining pane.

piradata · 2022-07-05T05:35:25Z

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 · 2022-08-11T23:41:07Z

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

bar0n36 · 2023-08-21T23:23:47Z

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 · 2023-08-23T13:03:51Z

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 · 2023-08-23T13:39:47Z

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.

piradata · 2023-08-30T16:58:21Z

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 · 2023-11-13T20:04:12Z

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 · 2023-11-16T12:27:10Z

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

simonferquel added the Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. label Feb 14, 2020

ghost added Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Needs-Tag-Fix Doesn't match tag requirements labels Feb 14, 2020

This comment was marked as outdated.

Sign in to view

ghost closed this as completed Feb 18, 2020

ghost added Resolution-Duplicate There's another issue on the tracker that's pretty much the same thing. and removed Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Needs-Tag-Fix Doesn't match tag requirements labels Feb 18, 2020

This comment was marked as outdated.

Sign in to view

zadjii-msft added Area-User Interface Issues pertaining to the user interface of the Console or Terminal Product-Terminal The new Windows Terminal. and removed Resolution-Duplicate There's another issue on the tracker that's pretty much the same thing. labels Feb 24, 2020

This comment was marked as outdated.

Sign in to view

zadjii-msft reopened this Feb 24, 2020

ghost added the Needs-Tag-Fix Doesn't match tag requirements label Feb 24, 2020

zadjii-msft added this to Spec Needed ❓ in Specification Tracker via automation Feb 24, 2020

zadjii-msft added this to the Terminal Backlog milestone Feb 24, 2020

ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Feb 24, 2020

zadjii-msft changed the title ~~[UI] Drag & Drop for horizontal/vertical splits~~ Drag & Drop Tabs to create a Pane Feb 24, 2020

zadjii-msft mentioned this issue Feb 24, 2020

Scenario: Add support for panes #1000

Open

59 tasks

DHowett mentioned this issue May 18, 2020

Drag & Drop Tab/Pane Arrangement #5935

Closed

zadjii-msft mentioned this issue Jun 2, 2020

Allow drag&dropping to create and modify panes #6291

Closed

ghost mentioned this issue Aug 20, 2020

Need ability to merge one existing tab into another as a split pane #7356

Closed

zadjii-msft mentioned this issue Nov 12, 2020

Detaching panes and tabs #8244

Closed

zadjii-msft mentioned this issue Nov 23, 2020

Multiple tabs in the same view #8318

Closed

KalleOlaviNiemitalo mentioned this issue Dec 25, 2020

Auto display readme`s #8647

Open

zadjii-msft mentioned this issue Feb 23, 2021

Drag entries from the new tab menu to create panes #9229

Open

Rosefield mentioned this issue Aug 4, 2021

Move Pane to Tab (GH7075) #10780

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Drag & Drop Tabs to create a Pane #4587

Drag & Drop Tabs to create a Pane #4587

simonferquel commented Feb 14, 2020

simonferquel commented Feb 14, 2020

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

randomascii commented Mar 17, 2020

DHowett-MSFT commented Mar 17, 2020

DHowett-MSFT commented Mar 17, 2020 •

edited

DHowett commented May 18, 2020

davkean commented May 20, 2020

zadjii-msft commented Jun 2, 2020

Andrei-Paul commented Jun 3, 2020 •

edited

schuelermine commented Jun 11, 2020

zadjii-msft commented Jun 11, 2020

lucianotres commented Aug 8, 2020

luzhkovvv commented Aug 9, 2020

jonathanmarston commented Jun 18, 2021

piradata commented Jul 5, 2022

dhirschfeld commented Aug 11, 2022

This comment was marked as off-topic.

This comment was marked as off-topic.

bar0n36 commented Aug 21, 2023

piradata commented Aug 23, 2023

zadjii-msft commented Aug 23, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

piradata commented Aug 30, 2023 •

edited

klkvsk commented Nov 13, 2023 •

edited

piradata commented Nov 16, 2023

Drag & Drop Tabs to create a Pane #4587

Drag & Drop Tabs to create a Pane #4587

Comments

simonferquel commented Feb 14, 2020

Description of the new feature/enhancement

Proposed technical implementation details (optional)

simonferquel commented Feb 14, 2020

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

randomascii commented Mar 17, 2020

DHowett-MSFT commented Mar 17, 2020

DHowett-MSFT commented Mar 17, 2020 • edited

DHowett commented May 18, 2020

davkean commented May 20, 2020

zadjii-msft commented Jun 2, 2020

Andrei-Paul commented Jun 3, 2020 • edited

schuelermine commented Jun 11, 2020

zadjii-msft commented Jun 11, 2020

lucianotres commented Aug 8, 2020

luzhkovvv commented Aug 9, 2020

jonathanmarston commented Jun 18, 2021

piradata commented Jul 5, 2022

dhirschfeld commented Aug 11, 2022

This comment was marked as off-topic.

This comment was marked as off-topic.

bar0n36 commented Aug 21, 2023

piradata commented Aug 23, 2023

zadjii-msft commented Aug 23, 2023

This comment was marked as off-topic.

This comment was marked as off-topic.

piradata commented Aug 30, 2023 • edited

klkvsk commented Nov 13, 2023 • edited

piradata commented Nov 16, 2023

DHowett-MSFT commented Mar 17, 2020 •

edited

Andrei-Paul commented Jun 3, 2020 •

edited

piradata commented Aug 30, 2023 •

edited

klkvsk commented Nov 13, 2023 •

edited