Polish AI Customization modal editor styles#318378
Draft
mrleemurray wants to merge 12 commits into
Draft
Conversation
…or border color Co-authored-by: Copilot <copilot@github.com>
… reflection Co-authored-by: Copilot <copilot@github.com>
…n styles Co-authored-by: Copilot <copilot@github.com>
…roved responsiveness Co-authored-by: Copilot <copilot@github.com>
…iveness Co-authored-by: Copilot <copilot@github.com>
…tions-modal-polish
…or components Co-authored-by: Copilot <copilot@github.com>
…tor layout handling Co-authored-by: Copilot <copilot@github.com>
…s in AI Customization Management Editor Co-authored-by: Copilot <copilot@github.com>
Contributor
Screenshot ChangesBase: Changed (68)
|
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabWithItems/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabEmpty/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabEmpty/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/WelcomePage/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/WelcomePage/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/CliHarness/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/CliHarness/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpBrowseMode/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpBrowseMode/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginBrowseMode/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginBrowseMode/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabNarrow/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemPreview/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemPreview/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemRaw/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemRaw/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemPreview/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemPreview/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemRaw/Dark
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemRaw/Light
| Before | After |
|---|---|
|
|
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetail/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetail/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetailNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetailNarrow/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetailNarrow/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetailNarrow/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailWorkspace/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailWorkspace/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailUser/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedMcpDetailUser/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailInstalled/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailInstalled/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailMarketplace/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationManagementEditor/EmbeddedPluginDetailMarketplace/Light
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationWelcomePages/WelcomePage/Dark
| Before | After |
|---|---|
 |
 |
chat/aiCustomizations/aiCustomizationWelcomePages/WelcomePage/Light
| Before | After |
|---|---|
 |
 |
…n integration in AI Customization Management Editor Co-authored-by: Copilot <copilot@github.com>
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.
This pull request introduces a new "compact header" mode for modal editors, allowing certain editors to opt into a simplified header chrome. It also updates the AI Customization Management Editor to use this new mode, improves layout handling for embedded editors, and refactors the detail views for better composability. The changes span core modal editor infrastructure, CSS, and the AI customization feature area.
Modal Editor Infrastructure Enhancements:
compactHeaderoption toIModalEditorPartOptions, enabling editors to request a simplified modal header (no icon, no border, taller height). Introduced theIModalEditorOptionsProviderinterface and a helper type guard for editors to provide these options. (src/vs/platform/editor/common/editor.ts)compact-headerclass and recalculate layout based on the actual rendered header height, ensuring correct sizing for both default and compact headers. Sidebar and sash positioning now use the measured header height for alignment. (src/vs/workbench/browser/parts/editor/modalEditorPart.ts,src/vs/workbench/browser/parts/editor/media/modalEditorPart.css) [1] [2] [3] [4] [5] [6] [7]AI Customization Management Editor Updates:
AICustomizationManagementEditorInputnow implementsIModalEditorOptionsProvider, opting into the compact header mode for a cleaner look. (src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditorInput.ts) [1] [2]src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts)src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts)src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts,src/vs/workbench/contrib/chat/browser/aiCustomization/embeddedAgentPluginDetail.ts) [1] [2] [3] [4] [5]Code Cleanup:
src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts) [1] [2]These changes make modal editors more flexible and allow feature areas like AI customization to provide a more integrated and visually consistent experience.