remove input chevrons and add dividers between each dropdown label#315599
Draft
justschen wants to merge 1 commit into
Draft
remove input chevrons and add dividers between each dropdown label#315599justschen wants to merge 1 commit into
justschen wants to merge 1 commit into
Conversation
Contributor
Screenshot ChangesBase: Changed (46)
|
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Default/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifacts/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifacts/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodos/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodos/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodosAndFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodosAndFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifactsAndFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifactsAndFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Full/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Full/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/SimpleQA/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/SimpleQA/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/PendingToolApproval/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/PendingToolApproval/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/MultiTurn/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/MultiTurn/Light
| Before | After |
|---|---|
 |
 |
editor/inlineChatZoneWidget/InlineChatZoneWidget/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineChatZoneWidget/InlineChatZoneWidget/Light
| Before | After |
|---|---|
 |
 |
agentSessionsViewer/WithBadge/Dark
| Before | After |
|---|---|
 |
 |
agentSessionsViewer/WithBadge/Light
| Before | After |
|---|---|
 |
 |
blocks-ci screenshots changed
Replace the contents of test/componentFixtures/blocks-ci-screenshots.md with:
Updated blocks-ci-screenshots.md
<!-- auto-generated by CI — do not edit manually -->
#### editor/codeEditor/CodeEditor/Dark
#### editor/codeEditor/CodeEditor/Light
#### editor/inlineChatZoneWidget/InlineChatZoneWidget/Dark
#### editor/inlineChatZoneWidget/InlineChatZoneWidget/Light
#### editor/inlineChatZoneWidget/InlineChatZoneWidgetTerminated/Dark
#### editor/inlineChatZoneWidget/InlineChatZoneWidgetTerminated/Light
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the chat input/toolbars styling and picker rendering so dropdown labels no longer show chevrons and adjacent pickers are visually separated with divider lines, across both the workbench chat widget and the Agents (sessions) experience.
Changes:
- Add CSS-based dividers and spacing adjustments for chat input/secondary toolbars and session picker containers.
- Make picker action items conditionally omit the chevron icon based on
hideChevrons. - Force
hideChevronstotruefor specific pickers (primary session pickers, secondary toolbar pickers, agent host session config picker) to remove chevrons consistently.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/chat/browser/widget/media/chat.css | Adds divider styling between adjacent toolbar items and adjusts picker label padding/gaps. |
| src/vs/workbench/contrib/chat/browser/widget/input/sessionTargetPickerActionItem.ts | Makes chevron rendering conditional on pickerOptions.hideChevrons. |
| src/vs/workbench/contrib/chat/browser/widget/input/permissionPickerActionItem.ts | Makes chevron rendering conditional on pickerOptions.hideChevrons. |
| src/vs/workbench/contrib/chat/browser/widget/input/chatInputPart.ts | Introduces constObservable(true) options to hide chevrons for primary session pickers and all secondary toolbar pickers. |
| src/vs/workbench/contrib/chat/browser/chatSessions/chatSessionPickerActionItem.ts | Re-renders label when hideChevrons changes and conditionally renders the chevron. |
| src/vs/sessions/contrib/chat/browser/media/newChatInSession.css | Updates spacing/padding to align with the new divider/no-chevron styling. |
| src/vs/sessions/contrib/chat/browser/media/chatWidget.css | Hides chevrons and adds divider-like separation (via gaps/box-shadows) in the sessions new-chat widget UI. |
| src/vs/sessions/contrib/chat/browser/media/chatInput.css | Removes now-obsolete divider styling tied to the old chevron-based layout. |
| src/vs/sessions/contrib/chat/browser/agentHost/agentHostSessionConfigPicker.ts | Forces chevrons hidden for the running-session permission picker via constObservable(true). |
Copilot's findings
- Files reviewed: 9/9 changed files
- Comments generated: 1
Comment on lines
67
to
72
| /* Input toolbar: match VS Code chat-input-toolbars gap */ | ||
| .new-chat-in-session .sessions-chat-toolbar { | ||
| margin-top: 4px; | ||
| padding: 0px; | ||
| gap: 6px; | ||
| gap: 10px; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.