Feature request: Background image for tab, not per split pane #8319

Closed
opened 2026-01-31 01:26:23 +00:00 by claunia · 13 comments
Owner

Originally created by @maciejmiara on GitHub (May 20, 2020).

Description of the new feature/enhancement

Currently, when I have a tab opened in terminal, it uses background image of specific profile. If I add more split panes from the same profile or from different ones, background image tries to fit pane for specific profile.

So it looks like this for single pane in tab:
single_pane

And like this for multiple panes in tab:
multiple_panes

I'd like to have single background image for tab, even if it has multiple panes (image would be just "cut" by panes borders). So I'd like to have only one background image like in first screenshot, but still use many panes, like in second.

For this scenario, background images of specific profiles would be ignored or only background image of first pane opened in tab would be taken into consideration and shown.

Lots of other configuration options which control how terminal looks like could be also configurable per tab.

Originally created by @maciejmiara on GitHub (May 20, 2020). <!-- 🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨 I ACKNOWLEDGE THE FOLLOWING BEFORE PROCEEDING: 1. If I delete this entire template and go my own path, the core team may close my issue without further explanation or engagement. 2. If I list multiple bugs/concerns in this one issue, the core team may close my issue without further explanation or engagement. 3. If I write an issue that has many duplicates, the core team may close my issue without further explanation or engagement (and without necessarily spending time to find the exact duplicate ID number). 4. If I leave the title incomplete when filing the issue, the core team may close my issue without further explanation or engagement. 5. If I file something completely blank in the body, the core team may close my issue without further explanation or engagement. All good? Then proceed! --> # Description of the new feature/enhancement Currently, when I have a tab opened in terminal, it uses background image of specific profile. If I add more split panes from the same profile or from different ones, background image tries to fit pane for specific profile. So it looks like this for single pane in tab: ![single_pane](https://user-images.githubusercontent.com/1774613/82426936-bddf9e00-9a88-11ea-8902-8b67f2b106a4.jpg) And like this for multiple panes in tab: ![multiple_panes](https://user-images.githubusercontent.com/1774613/82427435-6857c100-9a89-11ea-8f11-d510d22f7bf2.jpg) I'd like to have single background image for tab, even if it has multiple panes (image would be just "cut" by panes borders). So I'd like to have only one background image like in first screenshot, but still use many panes, like in second. For this scenario, background images of specific profiles would be ignored or only background image of first pane opened in tab would be taken into consideration and shown. Lots of other configuration options which control how terminal looks like could be also configurable per tab.
Author
Owner

@zadjii-msft commented on GitHub (May 20, 2020):

This would make a neat extension idea. I've tagged it up as such and added it to our mega extensions list, thanks!

@zadjii-msft commented on GitHub (May 20, 2020): This would make a neat extension idea. I've tagged it up as such and added it to our mega extensions list, thanks!
Author
Owner

@DHowett commented on GitHub (May 21, 2020):

I'd love this, even if it were in core.

@DHowett commented on GitHub (May 21, 2020): I'd love this, even if it were in core.
Author
Owner

@maciejmiara commented on GitHub (May 21, 2020):

@DHowett Do you think this idea could make it through to the core?
If yes, I can start thinking, how it should work.
It'd be easy to have only one "tab profile", which would simply overwrite view-related profiles settings for all tabs if enabled. More hardcore scenario is having several "tab profiles" and having possibility to switch between them somehow (every tab can use different profile).

Extensions system will probably start working in two years perspective, cause there are some Windows changes required.

@maciejmiara commented on GitHub (May 21, 2020): @DHowett Do you think this idea could make it through to the core? If yes, I can start thinking, how it should work. It'd be easy to have only one "tab profile", which would simply overwrite view-related profiles settings for all tabs if enabled. More hardcore scenario is having several "tab profiles" and having possibility to switch between them somehow (every tab can use different profile). Extensions system will probably start working in two years perspective, cause there are some Windows changes required.
Author
Owner

@Ennea commented on GitHub (Aug 30, 2020):

@maciejmiara The solution to this could be made much simpler from a user's point of view: give the user another option for backgroundImageStretchMode, or another setting entirely, that makes the background image always align to the tab instead of the pane. The pane will then just show the portion of that tab aligned background image inside its boundaries. This way, if all panes are of the same profile, they will all show the full background image together. And if one pane is of a different profile, it will show a portion of its background image instead of the full one (assuming that profile's background image is also configured like that).

@Ennea commented on GitHub (Aug 30, 2020): @maciejmiara The solution to this could be made much simpler from a user's point of view: give the user another option for `backgroundImageStretchMode`, or another setting entirely, that makes the background image always align to the tab instead of the pane. The pane will then just show the portion of that tab aligned background image inside its boundaries. This way, if all panes are of the same profile, they will all show the full background image together. And if one pane is of a different profile, it will show a portion of its background image instead of the full one (assuming that profile's background image is also configured like that).
Author
Owner

@omeryagmurlu commented on GitHub (Sep 9, 2020):

It's also possible to have the background of the profile that is in focus be the tab background. Just throwing an idea here. Either way, I would love being able to toggle 'per tab'/'per pane' background image behavior.

@omeryagmurlu commented on GitHub (Sep 9, 2020): It's also possible to have the background of the profile that is _in focus_ be the tab background. Just throwing an idea here. Either way, I would love being able to toggle 'per tab'/'per pane' background image behavior.
Author
Owner

@nico-abram commented on GitHub (Apr 11, 2022):

I'd love this, even if it were in core.

@DHowett I tried to start implementing this, adding a Grid.Background ImageBrush to TerminalPage's Root.TabContent, but I'm running into some trouble finding the correct settings to set the image with.
This snippet: b64fd774ce/src/cascadia/TerminalApp/TerminalPage.cpp (L2555-L2573)
Seems to imply that each pane/split within the same tab can have a different profile/settings. Am I understanding that correctly? What would be the correct background image to use, if that's the case?

@nico-abram commented on GitHub (Apr 11, 2022): > I'd love this, even if it were in core. @DHowett I tried to start implementing this, adding a Grid.Background ImageBrush to TerminalPage's Root.TabContent, but I'm running into some trouble finding the correct settings to set the image with. This snippet: https://github.com/microsoft/terminal/blob/b64fd774ce48d8f10c88ac171b134a43cc2791a2/src/cascadia/TerminalApp/TerminalPage.cpp#L2555-L2573 Seems to imply that *each pane/split within the same tab* can have a different profile/settings. Am I understanding that correctly? What would be the correct background image to use, if that's the case?
Author
Owner

@zadjii-msft commented on GitHub (Apr 11, 2022):

Seems to imply that each pane/split within the same tab can have a different profile/settings

Yep, that's exactly correct. And probably what would make this particular feature a bit more challenging. Theoretically, you could just change the image based on what the active profile was. Like, always use the active pane's BG as the whole window BG. But I personally think this needs to be an entirely new setting.

I've discussed this a bit in #12530, as it pertained to the mockup here: https://user-images.githubusercontent.com/6630660/105511648-17305900-5d0b-11eb-8bba-3502468e2110.png

FOR DISCUSSION: In [this comment], the poster shows a pretty cool mockup of what a backgound image for the window might look like. This kinda fills a similar problem space as Mica. If there were a background image for the whole Terminal window, then in-app acrylic would apply on top of the image. Vintage transparency wouldn't work through the image, it would apply on top of the image. Perhaps, because of these related concerns, there should be a singular window.background property, that contains an object of settings. Or, to follow the solely dot notation from before

{
    "theme": "My Background Theme",
    "themes": [
        {
            "name": "My Background Theme",
            "window.background.useMica": true, // Use mica behind the window
            "window.background.image": "some/path/to/image", // Use a BG image
            "window.background.imageOpacity": 25, // Image is mostly transparent
            "tabRow.background": "#00000000", // Make the TabView Transparent
        }
    ],
    "profiles": {
        "defaults": {
            "opacity": 0 // Panes are all totally transparent
        }
    }
}

Perhaps, buy nesting Mica usage under the "window.background", then it'll be clearer that it's something that applies to the whole window, as the background for everything.

Now, proper theming support is more than a little while off, but if you're interested in doing this now, I think we could find a way to make it work. I think we could add this setting as a Global property, like useAcrylicInTabRow, and migrating it later. (i'd personally want to toss it in as an experimental. setting, just so we don't need to worry about migrating it in the future, but we didn't do that for the acrylic one so 🤷)

Sorry for maybe rambling a bit to get my thoughts in order. I'd asy go ahead and add the setting (name it something like window.backgroundImage) to the GlobalAppSettings, and then use that image to set the BG of the Root.TabContent. Add the setting to:

  1. MTSM_GLOBAL_SETTINGS in src\cascadia\TerminalSettingsModel\MTSMSettings.h
  2. GlobalAppSettings in src\cascadia\TerminalSettingsModel\GlobalAppSettings.idl

After that, you should be able to get it out of _settings.GlobalSettings() in TerminalPage.

@zadjii-msft commented on GitHub (Apr 11, 2022): > Seems to imply that _each pane/split within the same tab_ can have a different profile/settings Yep, that's exactly correct. And probably what would make this particular feature a bit more challenging. Theoretically, you could just change the image based on what the active profile was. Like, always use the active pane's BG as the whole window BG. But I personally think this needs to be an entirely new setting. I've discussed this _a bit_ in #12530, as it pertained to the mockup here: https://user-images.githubusercontent.com/6630660/105511648-17305900-5d0b-11eb-8bba-3502468e2110.png > **FOR DISCUSSION**: In [this comment], the poster shows a pretty cool mockup of what a backgound image for the _window_ might look like. This kinda fills a similar problem space as Mica. If there were a background image for the whole Terminal window, then in-app acrylic would apply on top of the image. Vintage transparency wouldn't work through the image, it would apply on _top_ of the image. Perhaps, because of these related concerns, there should be a singular `window.background` property, that contains an object of settings. Or, to follow the solely dot notation from before > ```jsonc > { > "theme": "My Background Theme", > "themes": [ > { > "name": "My Background Theme", > "window.background.useMica": true, // Use mica behind the window > "window.background.image": "some/path/to/image", // Use a BG image > "window.background.imageOpacity": 25, // Image is mostly transparent > "tabRow.background": "#00000000", // Make the TabView Transparent > } > ], > "profiles": { > "defaults": { > "opacity": 0 // Panes are all totally transparent > } > } > } > ``` > > Perhaps, buy nesting Mica usage under the `"window.background"`, then it'll be clearer that it's something that applies to the whole window, as the background for everything. Now, proper theming support is more than a little while off, but if you're interested in doing this now, I think we could find a way to make it work. I think we could add this setting as a Global property, like `useAcrylicInTabRow`, and [migrating it later](ttps://github.com/microsoft/terminal/pull/10864#pullrequestreview-726403388). (i'd personally want to toss it in as an `experimental.` setting, just so we don't need to worry about migrating it in the future, but we didn't do that for the acrylic one so 🤷) Sorry for maybe rambling a bit to get my thoughts in order. I'd asy go ahead and add the setting (name it something like `window.backgroundImage`) to the `GlobalAppSettings`, and then use _that image_ to set the BG of the `Root.TabContent`. Add the setting to: 1. `MTSM_GLOBAL_SETTINGS` in `src\cascadia\TerminalSettingsModel\MTSMSettings.h` 2. `GlobalAppSettings` in `src\cascadia\TerminalSettingsModel\GlobalAppSettings.idl` After that, you should be able to get it out of `_settings.GlobalSettings()` in `TerminalPage`.
Author
Owner

@zadjii-msft commented on GitHub (Apr 11, 2022):

Small; corrections to the above following discussion with the team today:

  1. We concurred on the design of experimental.useBackgroundImageForWindow, as a global boolean setting. When that's true, set the Root.TabContent to the background image. (You may also need to plumb that information down through IControlAppearance to prevent the control setting it's BG image when that setting is enabled.)
  • a single boolean would make it easier to migrate this in the future.
  • It didn't seem like folks wanted to be able to layer the pane background on top of the window background
  • Folks did want it in the experimental. namespace because we were REALLY unsure as to how this would blend with the bigger picture of themes, which aren't that far down the backlog.
  1. There was majority consensus that the image that should be used was the image of the first pane (the top-leftmost one). We also agreed that might be hard to implement, so we were fine with just using the "active pane"'s BG image (which would be quite a bit easier to set).
@zadjii-msft commented on GitHub (Apr 11, 2022): Small; corrections to the above following discussion with the team today: 1. We concurred on the design of `experimental.useBackgroundImageForWindow`, as a global `boolean` setting. When that's true, set the `Root.TabContent` to the background image. (You may also need to plumb that information down through `IControlAppearance` to prevent the control setting it's BG image when that setting is enabled.) * a single boolean would make it easier to migrate this in the future. * It didn't seem like folks wanted to be able to layer the pane background on top of the window background * Folks did want it in the `experimental.` namespace because we were REALLY unsure as to how this would blend with the bigger picture of themes, which aren't _that_ far down the backlog. 2. There was majority consensus that the image that should be used was the image of the first pane (the top-leftmost one). We also agreed _that might be hard to implement_, so we were fine with just using the "active pane"'s BG image (which would be quite a bit easier to set).
Author
Owner

@nico-abram commented on GitHub (Apr 12, 2022):

(You may also need to plumb that information down through IControlAppearance to prevent the control setting it's BG image when that setting is enabled.)

How would I go about doing this? I tried adding it to the .idl file but that results in errors, and having to add it to ControlSettings and TerminalSettings, which seem to require adding it to macros a second time, with another JSON key, which I assume is wrong since it should canonically be a single global key. I could try plumbing the IGlobalAppSettings through UpdateSettings->UpdateControlSettings->_UpdateAppearanceFromUIThread->_SetBackgroundImage but I'm not sure if that's what you meant.

@nico-abram commented on GitHub (Apr 12, 2022): > (You may also need to plumb that information down through IControlAppearance to prevent the control setting it's BG image when that setting is enabled.) How would I go about doing this? I tried adding it to the `.idl` file but that results in errors, and having to add it to ControlSettings and TerminalSettings, which seem to require adding it to macros a second time, with another JSON key, which I assume is wrong since it should canonically be a single global key. I could try plumbing the IGlobalAppSettings through `UpdateSettings->UpdateControlSettings->_UpdateAppearanceFromUIThread->_SetBackgroundImage` but I'm not sure if that's what you meant.
Author
Owner

@nico-abram commented on GitHub (Apr 12, 2022):

I have it somewhat working, just need to figure out how to get the global boolean setting in TermControl to know if the pane backgrounds need to be transparent (This image is hardcoded to always make them transparent):
imagen

@nico-abram commented on GitHub (Apr 12, 2022): I have it *somewhat* working, just need to figure out how to get the global boolean setting in TermControl to know if the pane backgrounds need to be transparent (This image is hardcoded to always make them transparent): ![imagen](https://user-images.githubusercontent.com/24706838/162854334-ee1d199d-a542-4cc3-86a0-38cbc91b257c.png)
Author
Owner

@zadjii-msft commented on GitHub (Apr 12, 2022):

How would I go about doing this? I tried adding it to the .idl file but that results in errors, and having to add it to ControlSettings and TerminalSettings

Yea, there is another place that does need to get added. There are kinda two halves to the settings:

  1. Whether a setting is global or per-profile. These are defined in GLobalAppSettings and Profile, and in the MTSMSettings.h macros
  2. Whether a setting applies to the Control or the "core" of the Terminal. This one's a little trickier to wrap the head around, but for this case, since the BG image only affects the actual XAML TermControl, it's a ControlSetting. Those are defined in CONTROL_SETTINGS in src\cascadia\inc\ControlProperties.h

You will also need to add it to IControlSettings.idl and TerminalSettings.h (haven't figured how to get those generated by the macro yet), and the also set it in TerminalSettings::_ApplyGlobalSettings.

There's a lot of plumbing to deal with, I know. That should be everything.

@zadjii-msft commented on GitHub (Apr 12, 2022): > How would I go about doing this? I tried adding it to the `.idl` file but that results in errors, and having to add it to ControlSettings and TerminalSettings Yea, there is another place that does need to get added. There are kinda two halves to the settings: 1. Whether a setting is global or per-profile. These are defined in GLobalAppSettings and Profile, and in the MTSMSettings.h macros 2. Whether a setting applies to the Control or the "core" of the Terminal. This one's a little trickier to wrap the head around, but for this case, since the BG image only affects the actual XAML TermControl, it's a ControlSetting. Those are defined in `CONTROL_SETTINGS` in `src\cascadia\inc\ControlProperties.h` You will also need to add it to `IControlSettings.idl` and `TerminalSettings.h` (haven't figured how to get those generated by the macro yet), and the also set it in `TerminalSettings::_ApplyGlobalSettings`. There's a lot of plumbing to deal with, I know. That _should_ be everything.
Author
Owner

@nico-abram commented on GitHub (Apr 12, 2022):

Sent https://github.com/microsoft/terminal/pull/12893

Here's what it looks like:
xqMUWpo1JK

@nico-abram commented on GitHub (Apr 12, 2022): Sent https://github.com/microsoft/terminal/pull/12893 Here's what it looks like: ![xqMUWpo1JK](https://user-images.githubusercontent.com/24706838/162996037-ce2ec077-d0e8-43ab-ad5b-0e5c0354fc30.gif)
Author
Owner

@ghost commented on GitHub (May 24, 2022):

:tada:This issue was addressed in #12893, which has now been successfully released as Windows Terminal Preview v1.14.143.🎉

Handy links:

@ghost commented on GitHub (May 24, 2022): :tada:This issue was addressed in #12893, which has now been successfully released as `Windows Terminal Preview v1.14.143`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v1.14.143) * [Store Download](https://www.microsoft.com/store/apps/9n8g5rfz9xk3?cid=storebadge&ocid=badge)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#8319