Feature Request: Setting to hide/remove close ("x") button from tabs

[dpaoliello]

Add a setting to hide/remove close ("x") button from tabs

Issue Details:
Given that the size of tabs can change depending on each tab's title, attempting to use the mouse to change the current tab is fraught with danger: if a title suddenly changes, then you may end up hitting the close-tab button instead of switching.

Fix Details:
A possible solution to this is an option (disabled by default) to hide the close button for all tabs: users can still close tab with middle-click or Ctrl+W (or whatever hotkey they've set), but there is no risk of accidentally hitting the close button, with the added bonus of reducing the size of each tab.

NOTE: There are a number of other possible fixes for the problem I've described above (including "Restore closed tab" #960, "Confirmation prompt when closing a tab" #2976 and "Keep the width of tabs the same while the user is hovering over the tab bar"), but those are out-of-scope for this request.

[zadjii-msft]

Honestly I think that would just be a plain simple cool UI, even if all of the other issues referenced were fixed. I'm gonna tag this as a subset of #3327, and cc @cinnamon-msft, though this would probably be achievable without #3327.

[austin-beer]

I would love to see this feature implemented as well. Hopefully some progress can be made on this as part of #3327.

[ADTC]

I accidentally clicked X on a tab when trying to switch to it, and it killed off an ng build --watch process that took me 5 minutes to load. There goes another 5 minutes!

Please, we need this, and we also need confirmation prompts for closing. It's not the same as accidentally closing a browser tab, for which you could click "Reopen closed tab" and just reload the page. The data loss implications are much greater here - you're killing off running foreground processes.

[lapo-luchini]

Myself, I'd also like an option to only show "×" on hover (mainly to better use horizontal space when I have a lot of tabs)… which in parts is aligned with this issue (more customizability of UI) in part is exactly opposed (I guess it would make easier to close by mistake).
(But I'd like a completely missing "×" close button as well.)

[regnaio]

Is this going to be implemented?

[zadjii-msft]

Probably at some point, sure. We've got the foundation for theming in PR over in #12992. Once that lands, I don't suspect it would be that hard to add a

"tab.showCloseButton": "always"|"hover"|"never"

setting to a theme. hover might be hard to implement, but I'd bet that never wouldn't be that hard.

[zadjii-msft]

TabView is a part of WinUI, and that code is available over at https://github.com/microsoft/microsoft-ui-xaml/

I want to know if it's even possible on the current version of TabView to actualize what that enum would represent?

Hm.

terminal/src/cascadia/TerminalApp/TerminalPage.cpp

Lines 2740 to 2772 in a9c3b77

	if (const auto theme = _settings.GlobalSettings().CurrentTheme())
	{
	const auto visibility = theme.Tab() ? theme.Tab().ShowCloseButton() : Settings::Model::TabCloseButtonVisibility::Always;
	for (const auto& tab : _tabs)
	{
	switch (visibility)
	{
	case Settings::Model::TabCloseButtonVisibility::Never:
	tab.TabViewItem().IsClosable(false);
	break;
	case Settings::Model::TabCloseButtonVisibility::Hover:
	tab.TabViewItem().IsClosable(true);
	break;
	default:
	tab.TabViewItem().IsClosable(true);
	break;
	}
	}
	switch (visibility)
	{
	case Settings::Model::TabCloseButtonVisibility::Never:
	_tabView.CloseButtonOverlayMode(MUX::Controls::TabViewCloseButtonOverlayMode::Auto);
	break;
	case Settings::Model::TabCloseButtonVisibility::Hover:
	_tabView.CloseButtonOverlayMode(MUX::Controls::TabViewCloseButtonOverlayMode::OnPointerOver);
	break;
	default:
	_tabView.CloseButtonOverlayMode(MUX::Controls::TabViewCloseButtonOverlayMode::Always);
	break;
	}
	}

• We could take that, turn that into a method.
• Call that method every time the active tab changes...
• ... or the set of tabs changes.
• Get rid of all the calls to _updateTabCloseButton, cause that only updates a single tab.
• Add logic in that method
  • Inside the loop, if the mode is ActiveOnly, and the tab is active, then IsClosable(true). else false
  • Outside the loop, set CloseButtonOverlayMode to Auto, probably a sensible default.

That sounds like it would work on paper. Wanna file a PR? 😄

[ADTC]

IDK maybe in the weekend. Haven't touched C++ in 10 years. 😄

Theory looks great though! Much love and thanks for your effort.

[mailinglists35]

Could someone please mention the link here if there ever an issue is filed for TabView/WinUI, so we can follow the progress?

I find it a usability regression to not be able to middle click only because there is no close button.

[dezren39]

I use scaled windows with a big mouse cursor and many tabs, the inability to remove the close button means I usually avoid it entirely for fear of misclick. I'm confident in my middle-click and keyboard use, less so in single left click territory. It would be great if this could be resolved, sometimes I'm not careful and close very long-running processes by mistake. Even once is painful.

[zadjii-msft]

@dezren39 Then you might be interested in

[zohozer]

Hi. Any working solution for this issue?

[zadjii-msft]

@zohozer Please read the thread. This has been fixed in main, and will be a part of Terminal 1.16.

[ghost]

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

Handy links:

• Release Notes
• Store Download

[mailinglists35]

how would this be enabled in the settings? I can't figure out from the release notes nor the commit. thanks

[zadjii-msft]

Docs link

As an example from my test themes:

    "theme": "ninety eight",
    "themes":
    [
        {
            "name": "ninety eight",
            "tab":
            {
                "background": "#e0e3e4",
                "unfocusedBackground": "#c0c0c0",
                "showCloseButton": "never"
            },
            "tabRow":
            {
                "background": "#0000aa",
                "unfocusedBackground": "#87888f"
            },
            "window":
            {
                "applicationTheme": "light",
                "useMica": true
            }
        }
    ]

[mailinglists35]

this is the themes contents in the default config file (well I changed from dark to light using the gui settings) :

    "theme": "light",
    "themes": [],

what is the minimal modification needed to enable showCloseButton on all default themes?

[mailinglists35]

would this be sufficient?

    "themes":
    [
        {
            "name": "light",
            "tab":
            {
                "showCloseButton": "never"
            },
        }
    ]

[zadjii-msft]

You'll need to change the name to something else, but yea, that'd do it. Then just change the theme property to whatever name you gave your theme.

[atc0005]

@zadjii-msft: You'll need to change the name to something else, but yea, that'd do it. Then just change the theme property to whatever name you gave your theme.

FWIW, I think I initially ran into the same problem as @mailinglists35.

I copied the example theme from the docs as-is and then added the "showCloseButton": "never" line. After looking at & testing your example from #3335 (comment) I realized that my attempt to create a custom theme (named dark) was conflicting with the default theme instead of overriding it.

It wasn't until I got things working that I went back to the docs and saw this:

This is the name of the theme. Names should be unique. The names dark, light, and system are reserved for the built-in default themes.

My attempt to use dark as the custom theme name is not allowed, but this is not emphasized by an error message. If you go strictly by the error message shown here:

The user might misunderstand that to mean that theme and themes[0].name should be set to one of the stock theme names.

I'm guessing that this will be fixed by a future schema update (regarding the warning message), but wanted to note it in case it helps someone else in the meantime.

[mailinglists35]

oh, so what is the way to go if I just want the light/dark theme plus this setting?

[ALERTua]

@atc0005 I just had to update my Windows Terminal Preview for this error to disappear.

    "themes":
    [
		{
			"name": "my_theme",
			"tab": {
				"showCloseButton": "never"
			},
			"window": {
				"applicationTheme": "system"
			}
		}
	],
    "theme": "my_theme"

This does hide the close button, but the middle mouse click stops closing the tab :\

even with

"pointerbindings": [
  {
  "device": "mouse",
  "event": "middleClick",
  "where": "tab",
  "command": "closeTab"
  }
]

what do

[zadjii-msft]

what do

Read the thread: #3335 (comment).

IsClosable hides the X, but also disables middle click closing. There's no other easy way of changing that, short of wholesale forking the control.

Alas, that's just a limitation of TabView for the time being.

even with pointerbindings

That's... not a setting? Where'd you conjure that from?

oh, so what is the way to go if I just want the light/dark theme plus this setting?

1. Copypasta

   terminal/src/cascadia/TerminalSettingsModel/defaults.json

   Lines 297 to 309 in 71fc4b1

   	{
   	"name": "dark",
   	"window": {
   	"applicationTheme": "dark"
   	},
   	"tab": {
   	"background": "terminalBackground",
   	"unfocusedBackground": "#00000000"
   	},
   	"tabRow": {
   	"unfocusedBackground": "#333333FF"
   	}
   	},

   into your settings file.
2. add the theme property you want. (in this case, "tab":{"showCloseButton": "never"})
3. Set the name to foo.
4. Change theme to "foo".
5. Save the file.

[mailinglists35]

did I copy it wrong? I still see the close button.

{
    "$help": "https://aka.ms/terminal-documentation",
    "$schema": "https://aka.ms/terminal-profiles-schema",
    "actions": 
    [
        {
            "command": "find",
            "keys": "ctrl+shift+f"
        },
        {
            "command": "scrollUpPage",
            "keys": "shift+pgup"
        },
        {
            "command": "scrollDownPage",
            "keys": "shift+pgdn"
        },
        {
            "command": 
            {
                "action": "copy",
                "singleLine": false
            },
            "keys": "ctrl+c"
        },
        {
            "command": "paste",
            "keys": "ctrl+v"
        },
        {
            "command": 
            {
                "action": "splitPane",
                "split": "auto",
                "splitMode": "duplicate"
            },
            "keys": "alt+shift+d"
        }
    ],
    "copyFormatting": "none",
    "copyOnSelect": false,
    "defaultProfile": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "disableAnimations": true,
    "newTabMenu": 
    [
        {
            "type": "remainingProfiles"
        }
    ],
    "profiles": 
    {
        "defaults": 
        {
            "adjustIndistinguishableColors": "always",
            "bellStyle": "taskbar",
            "colorScheme": "Tango Dark",
            "cursorShape": "filledBox",
            "font": 
            {
                "face": "Fantasque Sans Mono",
                "size": 16.0
            },
            "historySize": 99999
        },
        "list": 
        [
            {
                "colorScheme": "Tango Dark",
                "commandline": "%SystemRoot%\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
                "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
                "hidden": false,
                "name": "Windows PowerShell"
            },
            {
                "colorScheme": "Tango Dark",
                "commandline": "%SystemRoot%\\System32\\cmd.exe",
                "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
                "hidden": false,
                "name": "Command Prompt",
                "startingDirectory": "c:\\"
            },
            {
                "colorScheme": "Tango Dark",
                "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
                "hidden": false,
                "name": "Ubuntu-work",
                "source": "Windows.Terminal.Wsl"
            },
            {
                "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
                "hidden": false,
                "name": "Azure Cloud Shell",
                "source": "Windows.Terminal.Azure"
            },
            {
                "guid": "{51855cb2-8cce-5362-8f54-464b92b32386}",
                "hidden": false,
                "name": "Ubuntu",
                "source": "CanonicalGroupLimited.Ubuntu_79rhkp1fndgsc"
            },
            {
                "guid": "{8c701c6d-1341-546d-84ae-1a1fb3a809ed}",
                "hidden": false,
                "name": "Ubuntu (Preview)",
                "source": "CanonicalGroupLimited.UbuntuPreview_79rhkp1fndgsc"
            },
            {
                "guid": "{491fa895-2dca-5d90-ba62-3da4b59cffe2}",
                "hidden": true,
                "name": "Ubuntu-Preview",
                "source": "Windows.Terminal.Wsl"
            },
            {
                "guid": "{2c4de342-38b7-51cf-b940-2309a097f518}",
                "hidden": true,
                "name": "Ubuntu",
                "source": "Windows.Terminal.Wsl"
            },
            {
                "guid": "{17bf3de4-5353-5709-bcf9-835bd952a95e}",
                "hidden": true,
                "name": "Ubuntu-22.04",
                "source": "Windows.Terminal.Wsl"
            },
            {
                "guid": "{d7b20cea-47a9-518c-95a4-c8bd91e2e1c6}",
                "hidden": false,
                "name": "Ubuntu 22.04.2 LTS",
                "source": "CanonicalGroupLimited.Ubuntu22.04LTS_79rhkp1fndgsc"
            }
        ]
    },
    "schemes": 
    [
        {
            "background": "#0C0C0C",
            "black": "#0C0C0C",
            "blue": "#0037DA",
            "brightBlack": "#767676",
            "brightBlue": "#3B78FF",
            "brightCyan": "#61D6D6",
            "brightGreen": "#16C60C",
            "brightPurple": "#B4009E",
            "brightRed": "#E74856",
            "brightWhite": "#F2F2F2",
            "brightYellow": "#F9F1A5",
            "cursorColor": "#FFFFFF",
            "cyan": "#3A96DD",
            "foreground": "#CCCCCC",
            "green": "#13A10E",
            "name": "Campbell",
            "purple": "#881798",
            "red": "#C50F1F",
            "selectionBackground": "#FFFFFF",
            "white": "#CCCCCC",
            "yellow": "#C19C00"
        },
        {
            "background": "#012456",
            "black": "#0C0C0C",
            "blue": "#0037DA",
            "brightBlack": "#767676",
            "brightBlue": "#3B78FF",
            "brightCyan": "#61D6D6",
            "brightGreen": "#16C60C",
            "brightPurple": "#B4009E",
            "brightRed": "#E74856",
            "brightWhite": "#F2F2F2",
            "brightYellow": "#F9F1A5",
            "cursorColor": "#FFFFFF",
            "cyan": "#3A96DD",
            "foreground": "#CCCCCC",
            "green": "#13A10E",
            "name": "Campbell Powershell",
            "purple": "#881798",
            "red": "#C50F1F",
            "selectionBackground": "#FFFFFF",
            "white": "#CCCCCC",
            "yellow": "#C19C00"
        },
        {
            "background": "#282C34",
            "black": "#282C34",
            "blue": "#61AFEF",
            "brightBlack": "#5A6374",
            "brightBlue": "#61AFEF",
            "brightCyan": "#56B6C2",
            "brightGreen": "#98C379",
            "brightPurple": "#C678DD",
            "brightRed": "#E06C75",
            "brightWhite": "#DCDFE4",
            "brightYellow": "#E5C07B",
            "cursorColor": "#FFFFFF",
            "cyan": "#56B6C2",
            "foreground": "#DCDFE4",
            "green": "#98C379",
            "name": "One Half Dark",
            "purple": "#C678DD",
            "red": "#E06C75",
            "selectionBackground": "#FFFFFF",
            "white": "#DCDFE4",
            "yellow": "#E5C07B"
        },
        {
            "background": "#FAFAFA",
            "black": "#383A42",
            "blue": "#0184BC",
            "brightBlack": "#4F525D",
            "brightBlue": "#61AFEF",
            "brightCyan": "#56B5C1",
            "brightGreen": "#98C379",
            "brightPurple": "#C577DD",
            "brightRed": "#DF6C75",
            "brightWhite": "#FFFFFF",
            "brightYellow": "#E4C07A",
            "cursorColor": "#4F525D",
            "cyan": "#0997B3",
            "foreground": "#383A42",
            "green": "#50A14F",
            "name": "One Half Light",
            "purple": "#A626A4",
            "red": "#E45649",
            "selectionBackground": "#FFFFFF",
            "white": "#FAFAFA",
            "yellow": "#C18301"
        },
        {
            "background": "#002B36",
            "black": "#002B36",
            "blue": "#268BD2",
            "brightBlack": "#073642",
            "brightBlue": "#839496",
            "brightCyan": "#93A1A1",
            "brightGreen": "#586E75",
            "brightPurple": "#6C71C4",
            "brightRed": "#CB4B16",
            "brightWhite": "#FDF6E3",
            "brightYellow": "#657B83",
            "cursorColor": "#FFFFFF",
            "cyan": "#2AA198",
            "foreground": "#839496",
            "green": "#859900",
            "name": "Solarized Dark",
            "purple": "#D33682",
            "red": "#DC322F",
            "selectionBackground": "#FFFFFF",
            "white": "#EEE8D5",
            "yellow": "#B58900"
        },
        {
            "background": "#FDF6E3",
            "black": "#002B36",
            "blue": "#268BD2",
            "brightBlack": "#073642",
            "brightBlue": "#839496",
            "brightCyan": "#93A1A1",
            "brightGreen": "#586E75",
            "brightPurple": "#6C71C4",
            "brightRed": "#CB4B16",
            "brightWhite": "#FDF6E3",
            "brightYellow": "#657B83",
            "cursorColor": "#002B36",
            "cyan": "#2AA198",
            "foreground": "#657B83",
            "green": "#859900",
            "name": "Solarized Light",
            "purple": "#D33682",
            "red": "#DC322F",
            "selectionBackground": "#FFFFFF",
            "white": "#EEE8D5",
            "yellow": "#B58900"
        },
        {
            "background": "#000000",
            "black": "#000000",
            "blue": "#3465A4",
            "brightBlack": "#555753",
            "brightBlue": "#729FCF",
            "brightCyan": "#34E2E2",
            "brightGreen": "#8AE234",
            "brightPurple": "#AD7FA8",
            "brightRed": "#EF2929",
            "brightWhite": "#EEEEEC",
            "brightYellow": "#FCE94F",
            "cursorColor": "#FFFFFF",
            "cyan": "#06989A",
            "foreground": "#D3D7CF",
            "green": "#4E9A06",
            "name": "Tango Dark",
            "purple": "#75507B",
            "red": "#CC0000",
            "selectionBackground": "#FFFFFF",
            "white": "#D3D7CF",
            "yellow": "#C4A000"
        },
        {
            "background": "#FFFFFF",
            "black": "#000000",
            "blue": "#3465A4",
            "brightBlack": "#555753",
            "brightBlue": "#729FCF",
            "brightCyan": "#34E2E2",
            "brightGreen": "#8AE234",
            "brightPurple": "#AD7FA8",
            "brightRed": "#EF2929",
            "brightWhite": "#EEEEEC",
            "brightYellow": "#FCE94F",
            "cursorColor": "#000000",
            "cyan": "#06989A",
            "foreground": "#555753",
            "green": "#4E9A06",
            "name": "Tango Light",
            "purple": "#75507B",
            "red": "#CC0000",
            "selectionBackground": "#FFFFFF",
            "white": "#D3D7CF",
            "yellow": "#C4A000"
        },
        {
            "background": "#300A24",
            "black": "#171421",
            "blue": "#0037DA",
            "brightBlack": "#767676",
            "brightBlue": "#08458F",
            "brightCyan": "#2C9FB3",
            "brightGreen": "#26A269",
            "brightPurple": "#A347BA",
            "brightRed": "#C01C28",
            "brightWhite": "#F2F2F2",
            "brightYellow": "#A2734C",
            "cursorColor": "#FFFFFF",
            "cyan": "#3A96DD",
            "foreground": "#FFFFFF",
            "green": "#26A269",
            "name": "Ubuntu-22.04-ColorScheme",
            "purple": "#881798",
            "red": "#C21A23",
            "selectionBackground": "#FFFFFF",
            "white": "#CCCCCC",
            "yellow": "#A2734C"
        },
        {
            "background": "#300A24",
            "black": "#171421",
            "blue": "#0037DA",
            "brightBlack": "#767676",
            "brightBlue": "#08458F",
            "brightCyan": "#2C9FB3",
            "brightGreen": "#26A269",
            "brightPurple": "#A347BA",
            "brightRed": "#C01C28",
            "brightWhite": "#F2F2F2",
            "brightYellow": "#A2734C",
            "cursorColor": "#FFFFFF",
            "cyan": "#3A96DD",
            "foreground": "#FFFFFF",
            "green": "#26A269",
            "name": "Ubuntu-ColorScheme",
            "purple": "#881798",
            "red": "#C21A23",
            "selectionBackground": "#FFFFFF",
            "white": "#CCCCCC",
            "yellow": "#A2734C"
        },
        {
            "background": "#300A24",
            "black": "#171421",
            "blue": "#0037DA",
            "brightBlack": "#767676",
            "brightBlue": "#08458F",
            "brightCyan": "#2C9FB3",
            "brightGreen": "#26A269",
            "brightPurple": "#A347BA",
            "brightRed": "#C01C28",
            "brightWhite": "#F2F2F2",
            "brightYellow": "#A2734C",
            "cursorColor": "#FFFFFF",
            "cyan": "#3A96DD",
            "foreground": "#FFFFFF",
            "green": "#26A269",
            "name": "Ubuntu-Preview-ColorScheme",
            "purple": "#881798",
            "red": "#C21A23",
            "selectionBackground": "#FFFFFF",
            "white": "#CCCCCC",
            "yellow": "#A2734C"
        },
        {
            "background": "#000000",
            "black": "#000000",
            "blue": "#000080",
            "brightBlack": "#808080",
            "brightBlue": "#0000FF",
            "brightCyan": "#00FFFF",
            "brightGreen": "#00FF00",
            "brightPurple": "#FF00FF",
            "brightRed": "#FF0000",
            "brightWhite": "#FFFFFF",
            "brightYellow": "#FFFF00",
            "cursorColor": "#FFFFFF",
            "cyan": "#008080",
            "foreground": "#C0C0C0",
            "green": "#008000",
            "name": "Vintage",
            "purple": "#800080",
            "red": "#800000",
            "selectionBackground": "#FFFFFF",
            "white": "#C0C0C0",
            "yellow": "#808000"
        }
    ],
    "theme": "dark",
    "themes": [
    { 
     "name": "dark", 
     "window": { 
         "applicationTheme": "dark" 
     }, 
     "tab": { 
         "background": "terminalBackground", 
         "unfocusedBackground": "#00000000" 
     }, 
     "tabRow": { 
         "unfocusedBackground": "#333333FF" 
     },
     "tab": {"showCloseButton": "never"} 
     }
],
    "wordDelimiters": " \\()\"',;<>~!#$%^&*|+[]{}~?\u2502"
}

[mailinglists35]

before it was simply

"themes": []

[zadjii-msft]

Ah, you missed a crucial pair of steps:

3. Set the name to "foo".
4. Change theme to "foo"

Themes don't let you directly override built-in theme names (dark, light, system)

[mailinglists35]

a w e s o m e

I am finally worry-free clicking anywhere in the tab bar!

thank you

[lapo-luchini]

Even better! 🎉
"showCloseButton": "hover"

[mreymann]

It would be great if this feature could be activated by just an option in the settings. Is this planned?

[mreymann]

Ok, my annoyance level grew so much that I eventually edited my settings.json accordingly, using "showCloseButton": "activeOnly". I'll see if that works out. Still would prefer a simple selection in the options.

[2x2xplz]

The "close tab" area is significantly larger than just the visible X and takes up more than half of a minimized tab:

It's way too easy to accidentally click "close" even when you give yourself extra margin, especially with no close tab confirmation. Please, as @mreymann suggested, just make this a simple setting to change (without needing to create a whole new theme) -- and preferably, add a confirmation the first few times for new Terminal users.

Sticking with ConEmu in the meantime.