Add prominent "Open in Editor" button to customization editor header#311756
Add prominent "Open in Editor" button to customization editor header#311756joshspicer wants to merge 2 commits intomainfrom
Conversation
Refs #311433 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Adds a prominent Open in Editor button to the embedded editor header in the AI Customizations management editor, surfacing the existing “open file” behavior directly in the embedded editing experience (per #311433).
Changes:
- Add a new header button in
AICustomizationManagementEditorthat calls the existingaiCustomizationManagement.openFilecommand for the currently edited URI. - Add CSS styling for the new button (secondary button styling with icon + label).
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/chat/browser/aiCustomization/aiCustomizationManagementEditor.ts | Adds the “Open in Editor” header button and wires it to the existing open-file command using the current embedded-editor context. |
| src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css | Styles the new header button to be visually prominent and discoverable. |
Copilot's findings
- Files reviewed: 2/2 changed files
- Comments generated: 1
| background: var(--vscode-button-secondaryHoverBackground); | ||
| } | ||
|
|
||
| .ai-customization-management-editor .editor-open-in-editor-button:focus { |
There was a problem hiding this comment.
Use :focus-visible instead of :focus for the button focus ring to match other controls in this stylesheet (e.g. .sidebar-home-button, .section-back-arrow-button). :focus will also show the outline on mouse click, which is usually not desired and is inconsistent with the surrounding patterns.
| .ai-customization-management-editor .editor-open-in-editor-button:focus { | |
| .ai-customization-management-editor .editor-open-in-editor-button:focus-visible { |
- Replace custom button with MenuWorkbenchToolBar bound to a new AICustomizationManagementEmbeddedEditorTitle MenuId - Switch icon from goToFile to openInWindow (matches modal popout icon) - Expose the menu via 'chat/customizations/embeddedEditor/title' for extensions (gated by the chatSessionCustomizationProvider proposed API) - Action title becomes 'Open in Editor' Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
| this.editorHeaderToolbar = this.editorDisposables.add(scopedInstantiationService.createInstance( | ||
| MenuWorkbenchToolBar, | ||
| toolbarContainer, | ||
| AICustomizationManagementEmbeddedEditorTitleMenuId, | ||
| { | ||
| menuOptions: { shouldForwardArgs: true }, | ||
| hiddenItemStrategy: HiddenItemStrategy.Ignore, | ||
| } | ||
| )); |
There was a problem hiding this comment.
The PR description mentions a prominent “Open in Editor” button with a visible label, but using MenuWorkbenchToolBar here will render MenuItemActions with an icon as icon-only (the default MenuEntryActionViewItem hides the text label when item.icon is present). If the label needs to be visible, consider registering a custom IActionViewItemService provider for AICustomizationManagementEmbeddedEditorTitleMenuId (similar to other “icon + label” toolbar items) or otherwise using a button-style component that explicitly renders both icon and text.
| this.editorItemNameElement.textContent = displayName; | ||
| this.editorItemPathElement.textContent = basename(uri); | ||
| this.updateEditorHeaderToolbarContext(uri, storage, promptType, displayName); | ||
| this._editorContentChanged = false; | ||
| this.resetEditorSaveIndicator(); |
There was a problem hiding this comment.
updateEditorHeaderToolbarContext is set before the built-in editing session swaps the embedded editor over to an in-memory model (ai-customization-builtin scheme). For storage === BUILTIN_STORAGE prompts/skills this means “Open in Editor” will open the original resource URI (likely read-only) and won’t reflect the user’s current unsaved edits from the embedded editor session. Consider either (a) updating the toolbar context after the built-in session model is created to point at the actual editable target, or (b) hiding/altering the action for built-in items (e.g. prompt to save an override first, then open that file).
| MenuRegistry.appendMenuItem(AICustomizationManagementEmbeddedEditorTitleMenuId, { | ||
| command: { | ||
| id: OPEN_AI_CUSTOMIZATION_MGMT_FILE_ID, | ||
| title: localize2('openInEditor', "Open in Editor"), | ||
| icon: Codicon.openInWindow, | ||
| }, |
There was a problem hiding this comment.
This new embedded-editor toolbar entry uses “Open in Editor”, but the existing item context menu entry for the same command still labels it “Open” (a few lines above). For consistency across surfaces (and to avoid maintaining two localized titles for the same command), consider reusing the same localized title everywhere or updating the item menu label to match.
Refs #311433
Adds a prominent Open in Editor button to the embedded editor header in the AI Customizations management editor. The "Open" action already existed in the right-click context menu of list items — this surfaces it where users actually need it: while looking at the embedded editor and realizing they want the full editor experience (file explorer, chat widget, agent iteration) instead of the limited modal.
Changes
aiCustomizationManagementEditor.ts: NeweditorOpenInEditorButton(icon + label) appended to the editor header. Click invokes the existingaiCustomizationManagement.openFilecommand with the current URI / storage / promptType, preserving the read-only behavior for extension/plugin files.media/aiCustomizationManagement.css: Styled as a secondary button with both icon and visible label so it's discoverable (per @aeschli's suggestion in the issue).Notes
aiCustomizationManagement.openFileaction — no duplicated open logic.