Panes should have editable titles

[HunterMitchell]

Description of the new feature/enhancement

Having a title per tab is nice, but I have run into situations where I would much rather name each pane to help with multitasking. I have not seen this feature listed on #1000 and I feel like this can be of use for #7075. Below is Terminator on linux. Double-clicking the title allows editing and the title bar can be click-dragged to move panes around.

[HunterMitchell]

Currently working on a PR for this feature.

[zadjii-msft]

I'm okay with this feature, as long as we make it disable-able with a setting ☺️

[DHowett]

This fits in with the vision I have of panes having titlebars, yeah. I'm yanking Triage 😄

[DHowett]

Titlebars make good drag handles for reordering... and snapping... and everything. This almost blocks that. I'm surprised we didn't have a workitem for it!

[HunterMitchell]

I will be creating a draft PR soon, but had a few questions I wanted to run past you guys ( @zadjii-msft / @DHowett ). Since this pane titlebar is global, I assume it should be located in the GlobalAppSettings. Below is what I'm currently thinking these settings should look like.

{
    "paneTitlebar": {
        "show": true,
        "backgroundColor": "#FF0000",
        "foregroundColor": "#000000"
    }
}

On another note, most of my edits are in "Pane.h/Pane.cpp". Am I missing something, or is there not an easy way to get GlobalAppSettings? Maybe I missing something due to my lack of sleep lately 😁.

What I have so far (would like to see some border customization to match a theme down the road):

[zadjii-msft]

Okay first off, that's amazing. Great work!

Secondly: I'd maybe hold off on the foreground/background color configuration until after #3327/#5772. Those are properties that IMO make more sense to be part of the visual "theme", which is a concept we're still working on. We're planning on throwing all sorts of visual customizations in there, including tab colors, titlebar colors, pane border colors, etc, so I think that's probably the best place for those settings to eventually live. I think for now we should probably just stick with some theme color to use as the pane titlebar BG. I'm really excited to see the possibility for colors in the (near) future though!

Third: Yea, the app settings are pretty hard to get at from Pane. You've gotta use const auto& settings = CascadiaSettings::GetCurrentAppSettings(); to get at the CascadiaSettings instance.

Forthly: I keep watching that gif and seeing new additional things you've already implemented in the pane title and I'm just constantly impressed. You've already got the context menu and double click renaming down. That's awesome. I'm excited.

[HunterMitchell]

I really appreciate the feedback and I'm pretty excited for theme support myself! It's been a hot minute since I've written some C++, so adding this feature I would like myself gave me the motivation to get back in the C++ realm.

I think for now we should probably just stick with some theme color to use as the pane titlebar BG.

Do you have a specific color in mind? You already know I have to support red, but I assume it needs to be some neutral color for now.

[zadjii-msft]

What if we started with the ChromeLow theme resource for now, and we'll let the design experts weigh in for the PR? 😉 That'll give us "a little darker" in dark theme, and "a little lighter" in light theme.

For the record, the titlebar uses ChromeDisabledHigh by default:

(from https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/xaml-theme-resources)

Sound good?

---

EDIT Oh man I had an idea, what if we just used the same color as the tab background. (Refer to #7134, #7162) So if the control's "tabColor" changes, we should use that value as the pane color. So a profile's tabColor would apply to the pane titlebar. If there's no color set, then we'll use whatever value we pick as the default for the pane titlebars - this could either be ChromeLow or TabViewBackground(=ChromeDisabledHigh). But using the color picker to change the tab's color would set a value for the tab to use regardless of the pane titlebar color.

I'm rambling and brainstorming now.

[HunterMitchell]

Sorry for the delay, I've been a bit busy. I went ahead and implemented the tab color change as requested, and it seems to work fine other than the fact I was unable to get it to change when the user uses the tab's color picker. I also have one small bug (or at least I hope it's small), that ill mention in the draft pull request ill be throwing up today. Maybe someone can give me some guidance on how to fix it.

I was also thinking a bit about the border for each pane and wanted to get your and other peoples opinion on using the pane's titlebar to indicate if a pane is focused or not. If you look at the image in my initial comment, terminator provides different colors (foreground / background) of the titlebar when active or not. In this case, the active pane has a white foreground and a darker background than the others. I am kinda wanting to get rid of the borders for a cleaner look (as seen in terminator), but I understand this might not be what the team has in mind for the UI. Of course, this would be an issue for user's who prefer not to use pane titlebars, but we might could only apply borders then? Just throwing out some ideas.