fix: pinned tab bottom border color

[n-gist]

When workbench.editor.pinnedTabsOnSeparateRow: true, the active tab border color theme does not apply to pinned tabs:

The CSS selector :not(:first-child) is applied here, which excludes the bottom border container from styling. This appears to be a mistake, unless there is a reason for it.

[vs-code-engineering]

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@bpasero

Matched files:

• src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css

[bpasero]

The change was done to fix a related issue I reported, blame will tell you. Just removing it will bring back the bug.

[n-gist]

Seems like it is #194193
Underlining is quite common for highlighting selected tabs, but this makes tab.activeBorder unreliable.

[n-gist]

The issue here is not with the bottom border container itself. The problem is that the tab extends below the tabs row border, causing the tab background to overlap the separator. As a result, the separator disappears when a tab is selected, and the tab background visually merges with the editor background:

In a two-row layout, for tabs of the first row this behavior seems undesirable, since the separator is between tab rows rather than between the tabs and the editor, so it should remain visible.

A possible solution would be to reduce the height of the first-row tabs by 1px and move the bottom border container down by 1px to compensate.
Or inherit separator color when not explicitly set by theme or tab state. Not sure what would be more correct. Changing tab height affects tab icons position.

[n-gist]

@bpasero, @benibenj, I tried to fix this by reducing the tab height (for all rows) by 1px, moving the bottom border container down by 1px, and applying a different color based on the tab row number:

/* diff */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
	height: calc(var(--editor-group-tab-height) - 1px); /* reduce tab height to not overlap tabs row border */
}
/* diff */
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container {
	bottom: -1px; /* compensate reduced tab height */
}
/* new */
.monaco-workbench .part.editor > .content .editor-group-container > .title > :nth-last-child(1 of .tabs-and-actions-container) .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container {
	background-color: var(--tab-lastrow-border-bottom-color); /* apply different color for last tabs row */
}

And tried implementing the logic for --tab-lastrow-border-bottom-color in:

vscode/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts

Lines 1676 to 1681 in 03d87f6

	// Set border BOTTOM if theme defined color
	if (isActive) {
	const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
	tabContainer.classList.toggle('tab-border-bottom', !!activeTabBorderColorBottom);
	tabContainer.style.setProperty('--tab-border-bottom-color', activeTabBorderColorBottom ?? '');
	}

However, I was unable to achieve the correct result for existing themes that rely on the tab and editor background merging behavior.

A possible solution would be to introduce separate color settings for the last row, for example:

{
    "workbench.colorCustomizations": {
        "tab.activeBorder", /* existing */
        "tab.activeBorderLastrow", /* new, inherits from tab.activeBorder if not set */
        "tab.unfocusedActiveBorder", /* existing */
        "tab.unfocusedActiveBorderLastrow", /* new, inherits from tab.unfocusedActiveBorder if not set */
    }
}

Combined with the CSS adjustments above, this should make it possible to achieve background merging for the last row while still keeping the bottom border working for pinned tabs in stacked rows.

However, this would require updating existing themes that currently merge tab and editor backgrounds, for example:

{
    "workbench.colorCustomizations": {
        "tab.activeBorderLastrow", /* set to match tab and editor background to merge them (probably current tab.activeBorder value)*/
        "tab.activeBorder", /* none/transparent to keep row separator visible in stacked rows */
        "tab.unfocusedActiveBorderLastrow", /* set to tab.unfocusedActiveBorder current value */
        "tab.unfocusedActiveBorder", /* none/transparent to keep row separator visible in stacked rows */
    }
}

If updating existing themes is acceptable for this change, or someone take this to fix, please let me know. If not, and there is no simpler solution, this PR can likely be closed.