Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 10, 2025

VS Code's diff editor supports both inline and side-by-side rendering via the diffEditor.renderSideBySide setting, but lacked a UI toggle to switch between views.

Changes

Added ToggleDiffSideBySide action that:

  • Toggles diffEditor.renderSideBySide configuration
  • Appears in diff editor title bar with split-horizontal icon
  • Button state reflects current mode via diffEditorInlineMode context key
  • Accessible via command palette: "Diff Editor: Toggle Inline View"

Implementation

export class ToggleDiffSideBySide extends Action2 {
  constructor() {
    super({
      id: 'diffEditor.toggleDiffSideBySide',
      title: localize2('toggleDiffSideBySide', 'Toggle Inline View'),
      icon: Codicon.splitHorizontal,
      toggled: EditorContextKeys.diffEditorInlineMode.toNegated(),
      menu: {
        when: ContextKeyExpr.has('isInDiffEditor'),
        id: MenuId.EditorTitle,
        order: 21,
        group: 'navigation',
      },
    });
  }
}

Files modified:

  • src/vs/editor/browser/widget/diffEditor/commands.ts - Added toggle action
  • src/vs/editor/browser/widget/diffEditor/diffEditor.contribution.ts - Registered action
Original prompt

This section details on the original issue you should resolve

<issue_title>Support for Inline Diff view in addition to Side by Side</issue_title>
<issue_description>This feature is requrest in jupyterlab, and I find it useful in jupyter for vscode as well, so I paste it here.

It would be great to be able to switch to an inline diff view in addition to the default side by side diff view.

Here is an example of this feature implemented in VS Code. Thanks!

image
</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 2 commits December 10, 2025 02:30
- Added ToggleDiffSideBySide action to toggle between inline and side-by-side diff views
- Registered the action with icon and menu placement in editor title bar
- Action appears in diff editor navigation with split horizontal icon
- Toggles renderSideBySide configuration setting

Co-authored-by: DonJayamanne <1948812+DonJayamanne@users.noreply.github.com>
- Added f1: true and category to make command discoverable in command palette
- Moved diffEditorCategory definition before usage for proper scope
- Command now accessible via "Diff Editor: Toggle Inline View" in command palette

Co-authored-by: DonJayamanne <1948812+DonJayamanne@users.noreply.github.com>
Copilot AI changed the title [WIP] Add support for inline diff view in addition to side by side Add toggle button for inline/side-by-side diff view Dec 10, 2025
Copilot AI requested a review from DonJayamanne December 10, 2025 02:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support for Inline Diff view in addition to Side by Side

2 participants