diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 1a512c67bd483..6a99e81b5a424 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -706,7 +706,9 @@ "--vscode-widget-border", "--vscode-widget-shadow", "--vscode-window-activeBorder", - "--vscode-window-inactiveBorder" + "--vscode-window-inactiveBorder", + "--vscode-voiceRecording-background", + "--vscode-voiceRecording-dimmedBackground" ], "others": [ "--background-dark", @@ -780,4 +782,4 @@ "--z-index-notebook-sticky-scroll", "--zoom-factor" ] -} \ No newline at end of file +} diff --git a/src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css b/src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css index 4c5f41831a28a..d12f2d06eb21a 100644 --- a/src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css +++ b/src/vs/workbench/contrib/chat/electron-sandbox/actions/media/voiceChatActions.css @@ -4,79 +4,53 @@ *--------------------------------------------------------------------------------------------*/ /* - * Stop the running animation, we only use it as a hint to apply CSS rules. + * Show a "microphone" icon when recording is in progress that glows via outline. */ .monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled), .monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled) { - animation: none; -} - -/* - * Clear styles and replace icon to "stop" when hovering over it. - */ -.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::before, -.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::before { - content: "\ead7"; /* use `debug-stop` icon unicode for hovering over running voice recording */ - background-color: inherit; - border-radius: 0; - color: inherit; - outline: none; + color: var(--vscode-voiceRecording-background); + outline: 1px solid var(--vscode-voiceRecording-background); + outline-offset: -1px; + animation: pulseAnimation 1s infinite; + border-radius: 50%; } -/* - * Remove ::after element to improve "stop" visuals when hovering over it. - */ -.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::after, -.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::after { - display: none; +@keyframes pulseAnimation { + 0% { + outline-width: 1px; + } + 50% { + outline-width: 3px; + outline-color: var(--vscode-voiceRecording-dimmedBackground); + } + 100% { + outline-width: 1px; + } } /* - * Show a "microphone" icon when recording is in progress that: - * - uses z-index:1 and applies a background color to draw over the glowing animation (below) - * - emphasizes activity by drawing with badge colors + * Replace with "microphone" icon. */ .monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::before, .monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::before { content: "\ec12"; - z-index: 1; - border-radius: 50%; - background-color: var(--vscode-input-background); - color: var(--vscode-activityBarBadge-background); - outline: 1px solid var(--vscode-activityBarBadge-background); } /* - * Draw an ::after element for the glowing effect over the "microphone" icon that: - * - uses badge colors to emphasize activity - * - uses a "pulseAnimation" to indicate activity + * Clear animation styles when hovering. */ -.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::after, -.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled)::after { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 18px; - height: 18px; - background-color: var(--vscode-activityBarBadge-background); - border-radius: 50%; - animation: pulseAnimation 1s infinite; - transform: translate(-50%, -50%) scale(0); - opacity: 0; +.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover, +.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover { + color: inherit; + outline: none; + animation: none; + border-radius: 5px; } -@keyframes pulseAnimation { - 0% { - transform: translate(-50%, -50%) scale(1); - opacity: 1; - } - 50% { - transform: translate(-50%, -50%) scale(1.3); - opacity: 0.5; - } - 100% { - transform: translate(-50%, -50%) scale(1); - opacity: 1; - } +/* + * Replace with "stop" icon when hovering. + */ +.monaco-workbench .interactive-input-part .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::before, +.monaco-workbench .inline-chat .monaco-action-bar .action-label.codicon-loading.codicon-modifier-spin:not(.disabled):hover::before { + content: "\ead7"; /* use `debug-stop` icon unicode for hovering over running voice recording */ } diff --git a/src/vs/workbench/contrib/chat/electron-sandbox/actions/voiceChatActions.ts b/src/vs/workbench/contrib/chat/electron-sandbox/actions/voiceChatActions.ts index 100d11d79b89d..d99b19e6e1cb1 100644 --- a/src/vs/workbench/contrib/chat/electron-sandbox/actions/voiceChatActions.ts +++ b/src/vs/workbench/contrib/chat/electron-sandbox/actions/voiceChatActions.ts @@ -33,6 +33,8 @@ import { isExecuteActionContext } from 'vs/workbench/contrib/chat/browser/action import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService'; import { ISpeechService, SpeechToTextStatus } from 'vs/workbench/contrib/speech/common/speechService'; import { RunOnceScheduler } from 'vs/base/common/async'; +import { registerColor, transparent } from 'vs/platform/theme/common/colorRegistry'; +import { ACTIVITY_BAR_BADGE_BACKGROUND } from 'vs/workbench/common/theme'; const CONTEXT_VOICE_CHAT_GETTING_READY = new RawContextKey('voiceChatGettingReady', false, { type: 'boolean', description: localize('voiceChatGettingReady', "True when getting ready for receiving voice input from the microphone for voice chat.") }); const CONTEXT_VOICE_CHAT_IN_PROGRESS = new RawContextKey('voiceChatInProgress', false, { type: 'boolean', description: localize('voiceChatInProgress', "True when voice recording from microphone is in progress for voice chat.") }); @@ -59,6 +61,20 @@ interface IVoiceChatSessionController { clearInputPlaceholder(): void; } +export const VOICE_RECORDING_BACKGROUND = registerColor('voiceRecording.background', { + dark: ACTIVITY_BAR_BADGE_BACKGROUND, + light: ACTIVITY_BAR_BADGE_BACKGROUND, + hcDark: ACTIVITY_BAR_BADGE_BACKGROUND, + hcLight: ACTIVITY_BAR_BADGE_BACKGROUND +}, localize('voiceRecording.background', "Background color for voice recording icon when recording.")); + +export const VOICE_RECORDING_BACKGROUND_DIMMED = registerColor('voiceRecording.dimmedBackground', { + dark: transparent(ACTIVITY_BAR_BADGE_BACKGROUND, 0.4), + light: transparent(ACTIVITY_BAR_BADGE_BACKGROUND, 0.4), + hcDark: ACTIVITY_BAR_BADGE_BACKGROUND, + hcLight: ACTIVITY_BAR_BADGE_BACKGROUND +}, localize('voiceRecording.dimmedBackground', "Dimmed background color for voice recording icon when recording.")); + class VoiceChatSessionControllerFactory { static create(accessor: ServicesAccessor, context: 'inline'): Promise;