format-tab-title with string return value yields incorrect tab widths for hover

[serhez]

What Operating System(s) are you seeing this problem on?

macOS

Which Wayland compositor or X11 Window manager(s) are you using?

No response

WezTerm version

20230408-200110-397593be

Did you try the latest nightly build to see if the issue is better (or worse!) than your current version?

Yes, and I updated the version box above to show the version of the nightly that I tried

Describe the bug

Tab hover on the tab bar highlights all tabs up until the actual tab being hovered, instead of just that one.

To Reproduce

No response

Configuration

Snippet from wezterm.lua:

return {
    enable_wayland = false,
    pane_focus_follows_mouse = false,
    front_end = "WebGpu",
    
    window_decorations = "RESIZE"
    
    inactive_pane_hsb = {
    saturation = 1.0,
    brightness = 0.85,
    },
    tab_bar_at_bottom = true,
    use_fancy_tab_bar = false,
    show_new_tab_button_in_tab_bar = false,
    show_tab_index_in_tab_bar = false,
    window_background_opacity = 1.0,
    tab_max_width = 50,
    hide_tab_bar_if_only_one_tab = false,
    switch_to_last_active_tab_when_closing_tab = true,
    
    color_scheme = "tokyonight-dark",
}

Snippet from colors/tokyonight-dark.toml:

[colors.tab_bar]
background = "#15161e"

[colors.tab_bar.active_tab]
bg_color = "#7aa2f7"
fg_color = "#15161e"
intensity = "Bold"

[colors.tab_bar.inactive_tab]
bg_color = "#33467c"
fg_color = "#c0caf5"

Expected Behavior

Only the tab being hovered would be highlighted.

Logs

No response

Anything else?

A video of the bug:

Screen.Recording.2023-04-09.at.14.21.47.mov

[wez]

I can't reproduce this with the config you shared. I snipped it down to this:

return {
    window_decorations = "RESIZE",
    tab_bar_at_bottom = true,
    use_fancy_tab_bar = false,
    show_new_tab_button_in_tab_bar = false,
    switch_to_last_active_tab_when_closing_tab = true,
}

in your recording it seems like you have additional configuration to format your tabs.
I'd suggest that you look at that and report back.

[serhez]

The problem is indeed with the formatting of the tabs' text, when I remove it the behaviour shown in the video does not happen. Apologies for not providing the full context. I've tried to find the cause of the problem but I can't seem to identify anything suspicious in the code. Here is the snippet:

local icon_colors = {
	rosewater = "#F5E0DC",
	flamingo = "#F2CDCD",
	pink = "#F5C2E7",
	mauve = "#CBA6F7",
	red = "#F38BA8",
	maroon = "#EBA0AC",
	peach = "#DFA44B",
	yellow = "#F9E2AF",
	green = "#669149",
	teal = "#94E2D5",
	sky = "#89DCEB",
	sapphire = "#74C7EC",
	blue = "#89B4FA",
	lavender = "#B4BEFE",

	text = "#CDD6F4",
	subtext1 = "#BAC2DE",
	subtext0 = "#A6ADC8",
	overlay2 = "#9399B2",
	overlay1 = "#7F849C",
	overlay0 = "#6C7086",
	surface2 = "#585B70",
	surface1 = "#45475A",
	surface0 = "#313244",

	base = "#1E1E2E",
	mantle = "#181825",
	crust = "#11111B",
}

local function get_process(tab)
	local process_icons = {
		["docker"] = {
			{ Foreground = { Color = icon_colors.blue } },
			{ Text = wezterm.nerdfonts.linux_docker },
		},
		["docker-compose"] = {
			{ Foreground = { Color = icon_colors.blue } },
			{ Text = wezterm.nerdfonts.linux_docker },
		},
		["nvim"] = {
			{ Foreground = { Color = icon_colors.green } },
			{ Text = wezterm.nerdfonts.custom_vim },
		},
		["vim"] = {
			{ Foreground = { Color = icon_colors.green } },
			{ Text = wezterm.nerdfonts.dev_vim },
		},
		["node"] = {
			{ Foreground = { Color = icon_colors.green } },
			{ Text = wezterm.nerdfonts.mdi_hexagon },
		},
		["zsh"] = {
			{ Foreground = { Color = icon_colors.peach } },
			{ Text = wezterm.nerdfonts.dev_terminal },
		},
		["bash"] = {
			{ Foreground = { Color = icon_colors.subtext0 } },
			{ Text = wezterm.nerdfonts.cod_terminal_bash },
		},
		["paru"] = {
			{ Foreground = { Color = icon_colors.lavender } },
			{ Text = wezterm.nerdfonts.linux_archlinux },
		},
		["htop"] = {
			{ Foreground = { Color = icon_colors.yellow } },
			{ Text = wezterm.nerdfonts.mdi_chart_donut_variant },
		},
		["cargo"] = {
			{ Foreground = { Color = icon_colors.peach } },
			{ Text = wezterm.nerdfonts.dev_rust },
		},
		["go"] = {
			{ Foreground = { Color = icon_colors.sapphire } },
			{ Text = wezterm.nerdfonts.mdi_language_go },
		},
		["lazydocker"] = {
			{ Foreground = { Color = icon_colors.blue } },
			{ Text = wezterm.nerdfonts.linux_docker },
		},
		["git"] = {
			{ Foreground = { Color = icon_colors.peach } },
			{ Text = wezterm.nerdfonts.dev_git },
		},
		["lazygit"] = {
			{ Foreground = { Color = icon_colors.peach } },
			{ Text = wezterm.nerdfonts.dev_git },
		},
		["lua"] = {
			{ Foreground = { Color = icon_colors.blue } },
			{ Text = wezterm.nerdfonts.seti_lua },
		},
		["wget"] = {
			{ Foreground = { Color = icon_colors.yellow } },
			{ Text = wezterm.nerdfonts.mdi_arrow_down_box },
		},
		["curl"] = {
			{ Foreground = { Color = icon_colors.yellow } },
			{ Text = wezterm.nerdfonts.mdi_flattr },
		},
		["gh"] = {
			{ Foreground = { Color = icon_colors.mauve } },
			{ Text = wezterm.nerdfonts.dev_github_badge },
		},
	}

	local process_name = string.gsub(tab.active_pane.foreground_process_name, "(.*[/\\])(.*)", "%2")

	return wezterm.format(
		process_icons[process_name]
			or { { Foreground = { Color = icon_colors.sky } }, { Text = string.format("[%s]", process_name) } }
	)
end

local function get_current_working_dir(tab)
	local current_dir = tab.active_pane.current_working_dir
	local HOME_DIR = string.format("file://%s", os.getenv("HOME"))

	return current_dir == HOME_DIR and "~" or string.format("%s", string.gsub(current_dir, "(.*[/\\])(.*)", "%2"))
end

wezterm.on("format-tab-title", function(tab)
	return wezterm.format({
		"ResetAttributes",
		{ Text = " " .. get_process(tab) .. " " .. get_current_working_dir(tab) .. " " },
	})
end)

[serhez]

Upon further inspection it seems that the problem lies in setting the foreground color of the process icons; if I comment out { Foreground = { Color = [...] } }, the bug does not happen. How can setting the foreground color of a piece of text in one tab affect the hover background color of all other tabs?

[wez]

change your event handler to this:

wezterm.on("format-tab-title", function(tab)
	return {
		{ Text = " " .. get_process(tab) .. " " .. get_current_working_dir(tab) .. " " },
	}
end)

The difference is that you should return the format table directly, rather than passing it to wezterm.format yourself.
When you return a string from format-tab-title, the length of the string, including the escape sequences used to style it, is used when computing the hover bounds, and that is what is messing things up.

[serhez]

@wez that works! Thank you and sorry about the trouble. I'll close the issue now. 🚀

[wez]

I do think this is a bug for the string case, so I'll reopen it to track that

[github-actions]

I'm going to lock this issue because it has been closed for 30 days ⏳. This helps our maintainers find and focus on the active issues. If you have found a problem that seems similar to this, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.