Dragging inactive terminal task tab does not work properly

[NonerDude]

Type: Bug

Open "Terminal" Tab
Click "+" symbol, to have 2 tabs
Click on one of the shell task tabs to make it active, notice active tab has distinctive background color,
Give it a distinctive output from the second tab (something like "echo Active")
Drag the second tab, which is inactive, to the active tab place, so that they switch places

Notice that the open tab is now the previously inactive for the distinctive output content is now gone (Possibly intentionaly due to dragging), but the highlighted tab is the still the previosly active tab.
By clicking on the highlighted tab, it will switch to the previously active tab, showing the distinctive output (echo "Active"), even though the highlight suggests that the tab was open before.

Either the dragging should not switch tabs, or the background highlight of the tab should update accordingly.

VS Code version: Code 1.84.2 (Universal) (1a5daa3, 2023-11-09T10:52:33.687Z)
OS version: Darwin arm64 23.1.0
Modes:

System Info

Item	Value
CPUs	Apple M2 Pro (10 x 24)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: enabled_on direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	5, 3, 3
Memory (System)	16.00GB (2.28GB free)
Process Argv	--disable-extensions --crash-reporter-id 0eec0223-f944-4a8f-8a3e-b14e68b05ef9
Screen Reader	no
VM	0%

Extensions disabled

A/B Experiments

vsliv368:30146709
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
vserr242:30382549
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263:30335439
vscoreces:30445986
vscod805cf:30301675
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
vsaa593cf:30376535
pythonvs932:30410667
py29gd2263:30899288
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
azure-dev_surveyone:30548225
2e4cg342:30602488
f6dab269:30613381
showlangstatbar:30737416
fixshowwlkth:30771522
showindicator:30805244
pythongtdpath:30769146
i26e3531:30792625
welcomedialogc:30910334
pythonnosmt12:30797651
pythonidxpt:30866567
pythonnoceb:30805159
asynctok:30898717
dsvsc013:30795093
dsvsc014:30804076
dsvsc015:30845448
pythontestfixt:30902429
pyreplss1:30897532
pythonmypyd1:30879173
pythoncet0:30885854
pythontbext0:30879054
accentitlementst:30887150
dsvsc016:30899300
dsvsc017:30899301
dsvsc018:30899302
aa_t_chat:30882232
dsvsc019cf:30909685

[NonerDude]

Screen.Recording.2023-12-04.at.10.16.56.mov

[joyceerhl]

I can repro the described behavior, though the active terminal is indicated by the blue vertical decoration and not the background color, it could be confusing that they get out of sync on a drag and drop

[Tyriar]

👍 we should select the tab either at the start or end of the drag

[RaazKH]

@Tyriar can I take this one or is someone else working on it?

[Tyriar]

@RaazKH that would be great! No one on it currently.

[RaazKH]

The issue seems to be because the hover behavior is inherited from here:

vscode/src/vs/base/browser/ui/list/listWidget.ts

Lines 921 to 924 in 57ea32b

	if (styles.listInactiveSelectionBackground) {
	content.push(`.monaco-list${suffix} .monaco-list-row.selected { background-color: ${styles.listInactiveSelectionBackground}; }`);
	content.push(`.monaco-list${suffix} .monaco-list-row.selected:hover { background-color: ${styles.listInactiveSelectionBackground}; }`); // overwrite :hover style in this case!
	}

The code where the active instance is updated with drag/drop:

vscode/src/vs/workbench/contrib/terminal/browser/terminalTabsList.ts

Lines 697 to 710 in 57ea32b

	if (!targetInstance) {
	this._terminalGroupService.moveGroupToEnd(sourceInstances[0]);
	this._terminalService.setActiveInstance(sourceInstances[0]);
	return;
	}
	let focused = false;
	for (const instance of sourceInstances) {
	this._terminalGroupService.moveGroup(instance, targetInstance);
	if (!focused) {
	this._terminalService.setActiveInstance(instance);
	focused = true;
	}
	}

The focused and selected classes are still on the non-active terminal (zsh in the screenshot below)

The focused and selected classes need to be moved to the active terminal. I've been trying to figure out the best way to do this but I thought to ask incase there were any ideas. Should I override the hover behavior in the terminal class so that it can be updated?