[New feature] Add flip-view and close buttons to pane-headers

[petetnt]

This new feature improves the Splitscreen UX by adding buttons to panel headers that allow user to quickly flip the current view to another pane. It's not a complete solution, but another alternative to dragging the files over to another panel which can be a bit cumbersome, as evidenced in #11308, #11448, #11345 and others.

When Split View is enabled, arrow buttons are added to the panel that indicate flipping

Clicking such button flips the view to the other panel, revealing the last used file in the pane it was flipped from

If there's no files open in the new other pane, the button obviously isn't there

This of course works in vertical split mode too:

The first commit doesn't include unit tests because Jasmine Spec Runner won't work for whatever reason: while I am looking at that issue, any feedback, improvements or questions are welcome.

edit: Build failed because the API rate limit exceeded

edit: 2
The panes now contain a close buttons too as similar to what @zaggino suggested.

Clicking the x closes the file, or prompts for confirmation if a file is dirty. If pane contains no files, the close button collapses the views by setting the layout scheme to 1x1

[zaggino]

Love it, gave me an idea -> X mark in the corner to close split view quickly (one click instead of two), would solve my #11746 problem.

[le717]

Forget to remove a line?

[petetnt]

@zaggino yeah that is an great idea to me!

[petetnt]

Added an unit test

[petetnt]

The panes now contain a close buttons too as similar to what @zaggino suggested.

Clicking the x closes the file, or prompts for confirmation if a file is dirty. If pane contains no files, the close button collapses the views by setting the layout scheme to 1x1

[zaggino]

few comments:

1. i like how the close highlights when hovered, can you make the same with the arrows? right now arrow icon doesn't highlight but some weird border around it highlights

2. the icons doesn't have to be there all the time, maybe they can appear only when I hover over the title area? (i mean the .pane-header element)

3. when i click close icon on the last file in the right panel, it doesn't close but i have to click again to close the empty panel? <- this actually might be a feature, not a problem, just saying

4. if i have one file in the left panel and one file in the right panel, when i close the left file and then close the left pane, the right file disappears (it works fine closing the right panel, left file stays open)

[petetnt]

Thanks for the comments @zaggino. I'll look into those asap, esp. 4), not sure what's up with that 🔨 It seems that getCurrentlyViewedFile() returns the file in the active pane and just clicking on the x doesn't active the pane itself -> wrong file closes.

I was putting some behavior for 2) and 3) behind some prefs: hover, always and off for the panel buttons (default being hover) and something like CLOSE_PANE_AFTER_LAST for the panes:

[zaggino]

Ah right, I didn't read the code before testing this so I didn't knew about the various preferences. But show on hover seems to be reasonable default.

[petetnt]

@zaggino You didn't miss anything, the prefs haven't been implemented yet :)

[zaggino]

Ah right, keep the work coming then, it'd be great to see this in 1.6 :)

[petetnt]

Made additions and modifications according to @zaggino 's comments

• Unified hover styles for the flip view buttons
• Added preferences for showing the buttons and collapsing the pane after last file is closed
• Fixed bug where close button would close the wrong file if the panel was not active

[sprintr]

You seems to have forgotten to add "hover" "always" "never" to values array here so it can be shown in the hints.

[petetnt]

Thanks @sprintr , fixed that.

[abose]

@petetnt I can't see the close button when i tested this out. Do I need to do something more to enable close butoon?

[petetnt]

@abose good catch, the close button is there but you cannot see it when you are using a light theme such as Brackets default. Didn't test it out on a lighter theme after adding the close button, will fix asap

[petetnt]

@abose It's now fixed 🔨

[abose]

works now 😎

When a pane is empty, the flip button seems to be confused.

[petetnt]

@abose fixed that regression (nitpicky CSS inheriting 🚒).

[abose]

Thanks for this feature @petetnt .
All unit/integration tests passing. LGTM.
When this is ok to be merged, Please remove the [review] tag from the title.

[petetnt]

Ready to be merged as far as I am concerned unless others have something else to add.

[abose]

Thanks @zaggino @sprintr @le717 for reviewing.
Merging.

[petetnt]

🎆 🎉 👍

[zaggino]

cool stuff, nice work @petetnt ;)

[arctwelve]

@petetnt Congrats on the new feature.