Test: Connected editor tab geometry and customizations #339385

Refs: #339028, #338796

• anyOS Kyle Cutler (@kycutler)
• anyOS Benjamin Christopher Simmonds (@benibenj)

Complexity: 3

Authors: Cherry Wang (@chryw)

Create Issue

Connected editor tabs should form a continuous boundary with the editor without uneven row heights, shifting Close/Unpin targets, or missing custom borders. This iteration aligns wrapped and pinned geometry and restores border customizations, including the new tab.divider color.

Allow about 45-60 minutes. Test the main scenarios once, then use the focused visual sweep below rather than every combination of settings.

Set up

1. Use a 1.141.0 Insiders build containing both editor: align connected tab geometry across wrapped states #339028 and editor: restore connected tab border and divider customizations #338796. The latter merged on October 2; do not use an earlier build or Stable 1.140.0 for this TPI.

2. Start with:

   {
     "workbench.experimental.modernUI": true,
     "workbench.experimental.modernUIEditorTabStyle": "connected",
     "workbench.editor.showTabs": "multiple",
     "workbench.editor.tabSizing": "fit",
     "workbench.editor.wrapTabs": false,
     "window.density.editorTabHeight": "default",
     "window.density.layout": "default",
     "window.zoomLevel": 0
   }

3. Open at least eight files with a mix of short and long names. Keep one file dirty, open one in preview mode, and pin two tabs using their context menu. Split the editor into two groups so focused and unfocused states can be compared.

4. Record your existing settings/color customizations so they can be restored afterward. The before/after geometry in editor: align connected tab geometry across wrapped states #339028 and the matched Legacy/Pill/Connected color examples in editor: restore connected tab border and divider customizations #338796 show the intended result.

Row geometry and actions

1. Compare a single row with multiple rows after enabling workbench.editor.wrapTabs and narrowing the editor group. Upper rows remain separate pills; the active tab on the bottom row connects to the editor. Tab hitbox heights should agree across rows, and the curved shoulders should meet the separator without a gap, doubled stroke, or protruding join.
2. Select tabs on different rows, hover inactive tabs, and dirty/save a file. Labels and Close/dirty targets should not jump as selection or hover changes. Resize back through the wrapping threshold; there should be no oscillating wrap or stale row outlines.
3. Change window.density.editorTabHeight to compact. Compare Close and Unpin controls in ordinary, wrapped, and separate pinned rows (workbench.editor.pinnedTabsOnSeparateRow: true). They should have matching edge clearance and stay centered, without changing the row's height.
4. Repeat the action check with workbench.editor.tabActionLocation: "left", then "right". Toggle workbench.editor.tabActionReserveSpace; a dirty or pinned indicator must still have room. With tabActionCloseVisibility or tabActionUnpinVisibility disabled (both under workbench.editor), no orphaned action background should remain.
5. Unpin the last tab in the separate row. The remaining first row must retain the correct top boundary, with no empty-row gap. Disable wrapping, set workbench.editor.pinnedTabSizing to compact, and scroll overflowing tabs through both edges. The clipped active cap should stay rounded; scrolled content must not show through or beneath the sticky pinned region.
6. Navigate tabs and available actions using the keyboard. Focus indicators must stay visible, including near clipping edges. Closing/unpinning must affect the intended tab, not its neighbor.

Borders, dividers, and compatibility

1. In a non-high-contrast theme, add these distinct colors to workbench.colorCustomizations:

   {
     "tab.border": "#ffff00",
     "tab.divider": "#ffffff",
     "tab.activeBorder": "#ff0000",
     "tab.activeBorderTop": "#00ffff"
   }

   Check the active outline and top/bottom accents in a single row and a wrapped bottom row with neighbors on both sides. Connected tabs should show dedicated dividers only between inactive neighbors, not an extra line through the active connection.

2. Remove only tab.divider. Dividers should inherit tab.border; restore a distinct divider color and confirm the two can be customized independently.

3. Set workbench.experimental.modernUIEditorTabStyle to pill. Pill tabs retain their separate rounded geometry and adjacency dividers. Disable workbench.experimental.modernUI for Legacy: existing separators must not acquire a second divider. Switch back to Connected and confirm the geometry restores cleanly.

4. In Dark+, remove the explicit tab.activeBorderTop override and set tab.selectedBorderTop to a distinct color. Multi-select tabs: the active tab should retain the selected-top fallback. Restore an explicit active-top color and verify that it takes precedence.

5. Give modernEditorTab.hoverActionBackground a different color from modernEditorTab.hoverBackground. Hover Close/Unpin on ordinary, upper wrapped, and separate pinned tabs, including an unfocused group. The action customization should not disappear in one layout or spill outside its target.

6. Remove the test color overrides and switch to Dark High Contrast and Light High Contrast. Inspect both shoulders, row-start boundaries, and the surrounding frame with breadcrumbs.enabled on/off. Expect continuous theme-owned outlines without redundant dedicated dividers.

Focused visual sweep

• Run the core checks in the default dark/light themes and both high-contrast themes. In each remaining built-in color theme, briefly inspect the same wrapped/dirty/pinned scene in active, hover, and keyboard-focus states. Check label readability, distinguishable selection/focus, continuous borders, and action contrast.
• Check window.density.layout at default and compact, independently of window.density.editorTabHeight (default / compact). There is no spacious value for these settings.
• At window.zoomLevel -1, 0, and 1, inspect shoulders, row joins, clipped caps, and action centering at narrow and wide group widths.
• Try workbench.editor.tabSizing at fit, shrink, and fixed with long labels. Actions must remain reachable and must not overlap text. The full theme/density/zoom Cartesian product is not required.

Restore your settings afterward. File issues with the theme, zoom, relevant tab settings, reproduction steps, and a screenshot or short recording.

Earlier connected-tab work (#337126, #337568, #337986) is regression context, not a request to repeat or retroactively complete #335914. This item covers the 1.141.0 changes.