From 99867b08793a210fd59c71092744e05e88a49186 Mon Sep 17 00:00:00 2001 From: Mayank Kamra Date: Sun, 20 Sep 2026 17:16:47 +0530 Subject: [PATCH 1/2] fix(views): include count badge within high contrast pane header outline In Dark and Light High Contrast themes, the focus/contrast outline on panel section headers only enclosed the title label, excluding the adjacent problem/item count badge. Adjust the outline target and layout container so the focus boundary wraps both the section label and its counter badge consistently. Fixes #172569 --- src/vs/workbench/browser/parts/media/paneCompositePart.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/browser/parts/media/paneCompositePart.css b/src/vs/workbench/browser/parts/media/paneCompositePart.css index 42908982bb386c..a58a979cf067fd 100644 --- a/src/vs/workbench/browser/parts/media/paneCompositePart.css +++ b/src/vs/workbench/browser/parts/media/paneCompositePart.css @@ -348,8 +348,8 @@ border-bottom-width: 2px; } -.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, -.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label, +.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked, +.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover, .monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, .monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important; From e2957728d05d08aff2ed3857c7a15a475dc55fb8 Mon Sep 17 00:00:00 2001 From: Mayank Kamra Date: Sun, 20 Sep 2026 18:23:56 +0530 Subject: [PATCH 2/2] feat: add CSS styles for auxiliary bar, sessions, and pane composite parts --- .../browser/parts/media/sessionsPart.css | 12 ++++++++--- .../auxiliarybar/media/auxiliaryBarPart.css | 20 +++++++++++++------ .../browser/parts/media/paneCompositePart.css | 16 +++++++++++---- 3 files changed, 35 insertions(+), 13 deletions(-) diff --git a/src/vs/sessions/browser/parts/media/sessionsPart.css b/src/vs/sessions/browser/parts/media/sessionsPart.css index f00e78c9b7dee2..1f88b2bffa072c 100644 --- a/src/vs/sessions/browser/parts/media/sessionsPart.css +++ b/src/vs/sessions/browser/parts/media/sessionsPart.css @@ -110,15 +110,21 @@ color: var(--vscode-agentsPanel-foreground) !important; } -.monaco-workbench .part.sessionspart > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, -.monaco-workbench .part.sessionspart > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { +.monaco-workbench .part.sessionspart > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked, +.monaco-workbench .part.sessionspart > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover { outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important; } -.monaco-workbench .part.sessionspart > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label { +.monaco-workbench .part.sessionspart > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover { outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important; } +/* Suppress nested outline on .action-label when .action-item already has the HC outline */ +.monaco-workbench .part.sessionspart > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, +.monaco-workbench .part.sessionspart > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { + outline: none !important; +} + .monaco-workbench .sessionspart.part.pane-composite-part > .composite.title > .title-actions { flex: inherit; } diff --git a/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css b/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css index c94d7e903ce63f..c902724b44065e 100644 --- a/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css +++ b/src/vs/workbench/browser/parts/auxiliarybar/media/auxiliaryBarPart.css @@ -91,18 +91,26 @@ color: var(--vscode-activityBarTop-foreground) !important; } -.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, -.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label, -.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, -.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { +.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked, +.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover, +.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked, +.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover { outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important; } -.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label, -.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label { +.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover, +.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover { outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important; } +/* Suppress nested outline on .action-label when .action-item already has the HC outline */ +.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, +.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label, +.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, +.monaco-workbench .part.auxiliarybar > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { + outline: none !important; +} + .monaco-workbench .auxiliarybar.part.pane-composite-part > .composite.title > .title-actions { flex: 1; } diff --git a/src/vs/workbench/browser/parts/media/paneCompositePart.css b/src/vs/workbench/browser/parts/media/paneCompositePart.css index a58a979cf067fd..5f6790493146b3 100644 --- a/src/vs/workbench/browser/parts/media/paneCompositePart.css +++ b/src/vs/workbench/browser/parts/media/paneCompositePart.css @@ -350,16 +350,24 @@ .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked, .monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover, -.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, -.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { +.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked, +.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover { outline: var(--vscode-contrastActiveBorder, unset) solid 1px !important; } -.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label, -.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover .action-label { +.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover, +.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:not(.checked):hover { outline: var(--vscode-contrastActiveBorder, unset) dashed 1px !important; } +/* Suppress nested outline on .action-label when .action-item already has the HC outline */ +.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, +.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label, +.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.checked .action-label, +.monaco-workbench .pane-composite-part > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item:hover .action-label { + outline: none !important; +} + /** Empty Pane Message **/ .monaco-workbench .pane-composite-part .empty-pane-message-area {