From f4b3168926a87f5fbbd13e729ce2652578c4bec2 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 5 May 2026 12:17:11 +0100 Subject: [PATCH 1/4] Improve transition timings and delays for titlebar widget animations --- .../contrib/chat/browser/media/openInVSCode.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/vs/sessions/contrib/chat/browser/media/openInVSCode.css b/src/vs/sessions/contrib/chat/browser/media/openInVSCode.css index 9d9e8eff0d136..277dc1b34d93b 100644 --- a/src/vs/sessions/contrib/chat/browser/media/openInVSCode.css +++ b/src/vs/sessions/contrib/chat/browser/media/openInVSCode.css @@ -56,7 +56,7 @@ .monaco-enable-motion .monaco-workbench .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-icon, .monaco-workbench.monaco-enable-motion .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-icon { - transition: filter 150ms ease; + transition: filter 160ms ease; } .monaco-reduce-motion .monaco-workbench .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-icon, @@ -82,7 +82,15 @@ .monaco-enable-motion .monaco-workbench .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-label, .monaco-workbench.monaco-enable-motion .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-label { - transition: max-width 150ms ease, opacity 150ms ease, margin-left 150ms ease; + transition: max-width 160ms ease, opacity 160ms ease, margin-left 160ms ease; + transition-delay: 200ms; +} + +.monaco-enable-motion .monaco-workbench .open-in-vscode-titlebar-widget:hover > .open-in-vscode-titlebar-widget-label, +.monaco-enable-motion .monaco-workbench .open-in-vscode-titlebar-widget:focus-visible > .open-in-vscode-titlebar-widget-label, +.monaco-workbench.monaco-enable-motion .open-in-vscode-titlebar-widget:hover > .open-in-vscode-titlebar-widget-label, +.monaco-workbench.monaco-enable-motion .open-in-vscode-titlebar-widget:focus-visible > .open-in-vscode-titlebar-widget-label { + transition-delay: 0ms; } .monaco-reduce-motion .monaco-workbench .open-in-vscode-titlebar-widget > .open-in-vscode-titlebar-widget-label, From 394abae2287dc656de1e495f45eabe0abe1fc3a3 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 5 May 2026 12:27:10 +0100 Subject: [PATCH 2/4] Enhance transition timings and delays for "Open in Agents" titlebar widget --- .../electron-browser/agentSessions/media/openInAgents.css | 6 ++++-- .../electron-browser/actions/media/openInAgents.css | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css b/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css index d544c03df5cfc..6c4f78afb81e0 100644 --- a/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css +++ b/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css @@ -40,7 +40,7 @@ background-size: contain; /* Keep desaturated for legibility against light/dark titlebar backgrounds; brighten on hover/focus. */ filter: grayscale(1); - transition: filter 150ms ease; + transition: filter 160ms ease; } .monaco-workbench .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-icon, @@ -57,7 +57,8 @@ font: inherit; overflow: hidden; white-space: nowrap; - transition: max-width 150ms ease, opacity 150ms ease, margin-left 150ms ease; + transition: max-width 160ms ease, opacity 160ms ease, margin-left 160ms ease; + transition-delay: 200ms; } .monaco-workbench .open-in-agents-titlebar-widget:hover, @@ -71,6 +72,7 @@ max-width: 200px; opacity: 1; margin-left: 6px; + transition-delay: 0ms; } .monaco-workbench .open-in-agents-titlebar-widget:focus-visible { diff --git a/src/vs/workbench/electron-browser/actions/media/openInAgents.css b/src/vs/workbench/electron-browser/actions/media/openInAgents.css index 332f60b418987..ab3825e7e9f87 100644 --- a/src/vs/workbench/electron-browser/actions/media/openInAgents.css +++ b/src/vs/workbench/electron-browser/actions/media/openInAgents.css @@ -40,7 +40,7 @@ background-size: contain; /* Keep desaturated for legibility against light/dark titlebar backgrounds; brighten on hover/focus. */ filter: grayscale(1); - transition: filter 150ms ease; + transition: filter 160ms ease; } .monaco-workbench .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-icon, @@ -57,7 +57,8 @@ font: inherit; overflow: hidden; white-space: nowrap; - transition: max-width 150ms ease, opacity 150ms ease, margin-left 150ms ease; + transition: max-width 160ms ease, opacity 160ms ease, margin-left 160ms ease; + transition-delay: 200ms; } .monaco-workbench .open-in-agents-titlebar-widget:hover, @@ -71,6 +72,7 @@ max-width: 200px; opacity: 1; margin-left: 6px; + transition-delay: 0ms; } .monaco-workbench .open-in-agents-titlebar-widget:focus-visible { From 0018ca2189c8ee66e2999fdc7c17383f4a4d5f45 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Tue, 5 May 2026 13:02:13 +0100 Subject: [PATCH 3/4] Enhance transition effects for "Open in Agents" titlebar widget and improve accessibility for reduced motion settings Co-authored-by: Copilot --- .../agentSessions/media/openInAgents.css | 25 +++++++++++++++++++ .../actions/media/openInAgents.css | 25 +++++++++++++++++++ 2 files changed, 50 insertions(+) diff --git a/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css b/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css index 6c4f78afb81e0..ba6fb93218dfc 100644 --- a/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css +++ b/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css @@ -40,9 +40,18 @@ background-size: contain; /* Keep desaturated for legibility against light/dark titlebar backgrounds; brighten on hover/focus. */ filter: grayscale(1); +} + +.monaco-enable-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon, +.monaco-workbench.monaco-enable-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon { transition: filter 160ms ease; } +.monaco-reduce-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon, +.monaco-workbench.monaco-reduce-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon { + transition-duration: 0ms !important; +} + .monaco-workbench .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-icon, .monaco-workbench .open-in-agents-titlebar-widget:focus-visible > .open-in-agents-titlebar-widget-icon { filter: none; @@ -57,10 +66,20 @@ font: inherit; overflow: hidden; white-space: nowrap; +} + +.monaco-enable-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label, +.monaco-workbench.monaco-enable-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label { transition: max-width 160ms ease, opacity 160ms ease, margin-left 160ms ease; transition-delay: 200ms; } +.monaco-reduce-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label, +.monaco-workbench.monaco-reduce-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label { + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + .monaco-workbench .open-in-agents-titlebar-widget:hover, .monaco-workbench .open-in-agents-titlebar-widget:focus-visible { background-color: var(--vscode-toolbar-hoverBackground); @@ -72,6 +91,12 @@ max-width: 200px; opacity: 1; margin-left: 6px; +} + +.monaco-enable-motion .monaco-workbench .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-label, +.monaco-enable-motion .monaco-workbench .open-in-agents-titlebar-widget:focus-visible > .open-in-agents-titlebar-widget-label, +.monaco-workbench.monaco-enable-motion .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-label, +.monaco-workbench.monaco-enable-motion .open-in-agents-titlebar-widget:focus-visible > .open-in-agents-titlebar-widget-label { transition-delay: 0ms; } diff --git a/src/vs/workbench/electron-browser/actions/media/openInAgents.css b/src/vs/workbench/electron-browser/actions/media/openInAgents.css index ab3825e7e9f87..53ccf47771ce5 100644 --- a/src/vs/workbench/electron-browser/actions/media/openInAgents.css +++ b/src/vs/workbench/electron-browser/actions/media/openInAgents.css @@ -40,9 +40,18 @@ background-size: contain; /* Keep desaturated for legibility against light/dark titlebar backgrounds; brighten on hover/focus. */ filter: grayscale(1); +} + +.monaco-enable-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon, +.monaco-workbench.monaco-enable-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon { transition: filter 160ms ease; } +.monaco-reduce-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon, +.monaco-workbench.monaco-reduce-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon { + transition-duration: 0ms !important; +} + .monaco-workbench .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-icon, .monaco-workbench .open-in-agents-titlebar-widget:focus-visible > .open-in-agents-titlebar-widget-icon { filter: none; @@ -57,10 +66,20 @@ font: inherit; overflow: hidden; white-space: nowrap; +} + +.monaco-enable-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label, +.monaco-workbench.monaco-enable-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label { transition: max-width 160ms ease, opacity 160ms ease, margin-left 160ms ease; transition-delay: 200ms; } +.monaco-reduce-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label, +.monaco-workbench.monaco-reduce-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label { + transition-duration: 0ms !important; + transition-delay: 0ms !important; +} + .monaco-workbench .open-in-agents-titlebar-widget:hover, .monaco-workbench .open-in-agents-titlebar-widget:focus-visible { background-color: var(--vscode-toolbar-hoverBackground); @@ -72,6 +91,12 @@ max-width: 200px; opacity: 1; margin-left: 6px; +} + +.monaco-enable-motion .monaco-workbench .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-label, +.monaco-enable-motion .monaco-workbench .open-in-agents-titlebar-widget:focus-visible > .open-in-agents-titlebar-widget-label, +.monaco-workbench.monaco-enable-motion .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-label, +.monaco-workbench.monaco-enable-motion .open-in-agents-titlebar-widget:focus-visible > .open-in-agents-titlebar-widget-label { transition-delay: 0ms; } From f6b02ad90d906c8c139c09b2417ad748a9dfa0d5 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Wed, 6 May 2026 11:50:44 +0100 Subject: [PATCH 4/4] Remove transition effects for reduced motion settings in "Open in Agents" titlebar widget --- .../agentSessions/media/openInAgents.css | 11 ----------- .../electron-browser/actions/media/openInAgents.css | 11 ----------- 2 files changed, 22 deletions(-) diff --git a/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css b/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css index ba6fb93218dfc..c5f4913836309 100644 --- a/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css +++ b/src/vs/workbench/contrib/chat/electron-browser/agentSessions/media/openInAgents.css @@ -47,11 +47,6 @@ transition: filter 160ms ease; } -.monaco-reduce-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon, -.monaco-workbench.monaco-reduce-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon { - transition-duration: 0ms !important; -} - .monaco-workbench .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-icon, .monaco-workbench .open-in-agents-titlebar-widget:focus-visible > .open-in-agents-titlebar-widget-icon { filter: none; @@ -74,12 +69,6 @@ transition-delay: 200ms; } -.monaco-reduce-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label, -.monaco-workbench.monaco-reduce-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label { - transition-duration: 0ms !important; - transition-delay: 0ms !important; -} - .monaco-workbench .open-in-agents-titlebar-widget:hover, .monaco-workbench .open-in-agents-titlebar-widget:focus-visible { background-color: var(--vscode-toolbar-hoverBackground); diff --git a/src/vs/workbench/electron-browser/actions/media/openInAgents.css b/src/vs/workbench/electron-browser/actions/media/openInAgents.css index 53ccf47771ce5..4494e6d65d4f1 100644 --- a/src/vs/workbench/electron-browser/actions/media/openInAgents.css +++ b/src/vs/workbench/electron-browser/actions/media/openInAgents.css @@ -47,11 +47,6 @@ transition: filter 160ms ease; } -.monaco-reduce-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon, -.monaco-workbench.monaco-reduce-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-icon { - transition-duration: 0ms !important; -} - .monaco-workbench .open-in-agents-titlebar-widget:hover > .open-in-agents-titlebar-widget-icon, .monaco-workbench .open-in-agents-titlebar-widget:focus-visible > .open-in-agents-titlebar-widget-icon { filter: none; @@ -74,12 +69,6 @@ transition-delay: 200ms; } -.monaco-reduce-motion .monaco-workbench .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label, -.monaco-workbench.monaco-reduce-motion .open-in-agents-titlebar-widget > .open-in-agents-titlebar-widget-label { - transition-duration: 0ms !important; - transition-delay: 0ms !important; -} - .monaco-workbench .open-in-agents-titlebar-widget:hover, .monaco-workbench .open-in-agents-titlebar-widget:focus-visible { background-color: var(--vscode-toolbar-hoverBackground);