Vscode: [Feature Request] IntelliJ-style git gutter patch preview/operations (git checkout -p)

[jabooth]

IntelliJ has a very natural UI for managing individual git patches - click in the gutter at a change indicator, and you immediately have the previous version of the file displayed and options for that diff (by far the most useful of which is rollback)

Use case

You open back up your editor and look at the file you were working on last night. You see in the sidebar little symbols indicating additions removals and changes (handy!). You can't remember _what_ this particular change was though.

IntelliJ solution

Click the gutter symbol, see the old version of these few lines _immediately in context_. Ohh yeah that was just something you were fooling around with for debugging but it's not needed any more, click to rollback this single change.

VSCode solution

Change entirely to another view in the editor to see a full file-by-file diff of the two files (_Git: Open Change_). Unless I'm mistaken, manually change the file to undo the change (I looked for _Git: {Revert,Undo,Rollback} this {change,diff,patch}_) but came up empty).

Big picture

VSCode's inbuilt git UI is great for rolling back changes at the file level (git checkout), but weak at changes at the patch level (git checkout -p). This IntelliJ paradigm is the best GUI I have seen for handling this common operation.

I would love to contribute this feature to VSCode, whether though an extension or an addition to the core product. I would personally lobby for an inclusion in the core, as it complements and completes in my mind the existing git checkout/add features that do not require extensions. I also believe it is not presently possible to customise the gutter in extensions (https://github.com/Microsoft/vscode/issues/9561).

[joaomoreno]

Note that you already have these operations, although a bit hidden:

[jabooth]

@joaomoreno thanks hadn't seen that git add -p UI (and yeah, it's not very discoverable there IMHO).

Still seems that there is still no git checkout -p UI though?

If so, would you be open to a PR that simply added a new entry to that menu called Clean Selected Lines? The same as Stage Selected Lines but reverts the selected change rather than staging it?

This would complete a family of git operations offered within Code:

File operations (left file list panel)

• Stage
• Clean (revert)

Patch operations (select text + toolbar menu):

• Stage
• Clean (revert) _<- Proposed addition_

Understand the proposed gutter UI is a huge addition with many consequences, so would love to plug away at something more manageable in this area as a starting point...

[joaomoreno]

That action also is there, when you open a staged change file:

The functionality is there, just not very discoverable IMO. We can think about making it shine a bit more...

[joaomoreno]

Oh my bad, I mistook what you meant by your last comment. You meant checkout not reset.

I'd be totally interested in such a PR. The logic code is what matters, don't worry about UI; you can put the action right next to the Stage Selected Lines action. The Stage Selected Lines action will be a big help in getting there, namely the stageRanges.ts module. That would be an initial step, which we can then leverage to bring those actions to a regular, non-diff, editor.

[jabooth]

@joaomoreno great, I'll take a look at this when I get a free minute. Thanks a lot for the pointers!

[donaldpipowitch]

I'd love to see that feature as an interactive gutter indicator similar to IntelliJ. ♥

[jabooth]

@joaomoreno turns out it took me 7 months to get a spare minute, and in the interim @roblourens already got the revert patch action added in https://github.com/Microsoft/vscode/commit/1afc5b2c69e3e4a1e0265f4c69d455566d0a0bfc

So if I understand correctly, we now have:

1. Code that highlights in the gutter regions where a file is changed: dirtydiffDecorator.ts
2. Code that implements the correct actions to take place for a given patch: stageRanges.ts

I know from using some extensions that somewhere there is code that allows for a lightbulb icon in the gutter which, upon clicking, displays some options (not sure where this is though?)

I'm wondering if we could get a simple version of this up and running whereby we reuse this UI affordance to do this. By that I mean:

i. Coloured diffs are shown in the gutter exactly as they are now
ii. If a use mouses over a diff, the lightbulb suggested fixes icon is shown alongside the diff (centred vertically).
iii. Clicking on the lightbulb reveals the VCS options that are visible in the compare changes view presently.
iv. The lightbulb is only shown when the user mouses over the diff, so it's not too visually noisy.

Does this sound feasible? If so I think I could have a go at the implementation if you give me some pointers as to the API for the lightbulb suggestion thingy. All the difficult logic is already done, should only be a case of stringing together what's already there.

The one difficulty I see with this is handing collisions between the suggestion indicator for the VCS and other relevant suggestion indicators for the region of the diff...

[joaomoreno]

@jabooth Yeah this should be doable in the near future. We are currently stabilizing a large refactoring which moved git to an extension. I'd wait a few more weeks until that's done in order to tackle this.

Though I would refrain from using the lightbulb since it is an affordance to _fix a problem_, which doesn't relate to these actions. We should come up with an UI affordance somewhere on top of the gutter decorations themselves.

[jabooth]

We are currently stabilizing a large refactoring which moved git to an extension. I'd wait a few more weeks until that's done in order to tackle this.

Sure, makes sense.

Though I would refrain from using the lightbulb since it is an affordance to fix a problem, which doesn't relate to these actions. We should come up with an UI affordance somewhere on top of the gutter decorations themselves.

Yeah totally agree that's the better solution. Suggestion to reuse was only out of pragmatism of getting something going quickly, great to hear it's possible we could have a proper basic version of this in the near future. Thanks for the update @joaomoreno!

[mkasprz]

I just would like to add, that switching to another view (with some hotkey for example) would not be so horrible if it would automatically jump to current line in diff view. That probably another feature request though.

[4xmg]

Its been a year. An Atom like git-diff-popup add-on does a much better job than nothing at all or suggested "solutions".

Please! Just give us the API to hook a click/hover on the gutter event ...

[sideeffffect]

The implementation of Change Markers in Atom (it too has syntax highlighting, not like Git Diff Margin): https://atom.io/packages/git-change-marker

[ro-savage]

Bringing this up again, this is by far and away one of the most useful features of webstorm and one of things holding back our team from fully embracing vscode.

Being able to see inline the changes you have made since last commit is extremely useful, for finding incorrect commits and changes / comparing your new code/refactor to old code, having someone come and review your code before a commit, etc.

Is this any update on this from @jabooth?
@joaomoreno has the git extension been refactored?
@eamodio is this something you'd look at implementing in GitLens or should we think about creating a new plugin?

[eamodio]

@ro-savage For this to be an extension (thus within the confines of the vscode api), what would you envision this looking/behaving like? Other than using (read: bastardizing) code actions -- I'm not sure what available UI would work for something like this (I'm also not 100% sure code actions show up in diff view).

What are your thoughts?

[joaomoreno]

@ro-savage @eamodio You'll have a pretty hard time doing this as an extension, if we want cool UI for this. Let's investigate doing this in the core. The DirtyDiffDecorator has all the power to get this done. I can play around a bit there...

[chamini2]

Atom has this as an extension: https://github.com/jakesankey/line-diff-details/

[ro-savage]

This is what I suggested on the gitlens repo.:

---

I don't believe it requires code actions to the lightbulb.

Simply hover over the gutter or line (depending on settings) and it shows the same pop-up but instead of a

+ my new text
- sometext that i

you would see the whole chunk such as

sometext that i
delete or changed
from before
over multiple lines

underneath that would appear actions buttons
Revert | Copy | Commit | Diff

Revert: Replaces your changes unstaged changes with the original code
Copy: Copies the original code
Commit: Commits only that chunk of code - additional dialogs as per usual commits
Diff: Shows the hunk diff in the regular diff viewer

---

[ro-savage]

I had a play with this in the DirtyDiffDecorator and got it logging the diff. Giving me the ModelLine's that had changed and the raw text.
And then was able to use hoverMessage to display the old text/diff when hovering over the line.

So certainly seems doable with the tools there. However, having never worked on the vscode base (and not even using vscode). It'll be pretty hard for me to figure out the right way to do the popup/hover and interactions.

Would be great if someone with more experience could give it a shot. Or at least point me in the direction of how you would go about creating an interactive hover tooltip/popup/whatever.
And how you'd interact with and change the onscreen text. @joaomoreno @eamodio

[joaomoreno]

Guys, just pushed https://github.com/Microsoft/vscode/commit/3070c0bb663e73d1eac2114c00e7209ee38f8bc7 to master:

Give it a good go around on the next update and give me issues/suggestions.

[ro-savage]

@joaomoreno - Awesome job! Looks like a great implementation and was the only thing holding back myself and my team from moving to VS Code for everything.

Thanks for the hardwork!

[wyntau]

@joaomoreno I got in trouble with the feature.

If my diff is long, I will miss the navigation buttons. Because all diffs are in one diff editor. I have to scroll to very top in the whole diff editor to navigate prev or next.

In the screenshot, when I navigated to last diff, I lost the navigation buttons, and I have to scroll the whole diff editor to navigate again

[garth-newton]

Love the new functionality! Is there a way to disable the prompt when reverting a change? I couldn't find anything in settings by searching "confirm", "prompt" or "git".

[icatalina]

Love the functionality, but it clashes with the fold/unfold button...

Maybe require cmd+click to trigger it, or something like that...

[icatalina]

There's also a regression with "editor.showFoldingControls": "always". It is always as if mouseover was selected...

[andrei-ivanovici]

is there a way to disable this? It's really annoying when used with code folding ...

[jwdomingo]

How do I use this feature as @joaomoreno demonstrates in his gif?

[joaomoreno]

Using insiders, click on the gutter margin decoration on the left. For stable, wait for the next release.

[matt-matt]

Is there also going to be a hotkey for immediately rolling back a change at the current location?

It seems that the only way to rollback a change with this feature is by grabbing the mouse, then clicking on a thin line in the gutter, and then finally clicking the rollback button. In IntelliJ this can be done immediately just by pressing Ctrl-Alt-Z.

As @jabooth said, rollback is obviously the most useful feature, so it would be awesome if it could be assigned a hotkey

[23doors]

@joaomoreno Is it possible to make it a little more like IntelliJ? Here it seems to open a small subeditor that you can scroll and seems to show a few more lines before and after the change. Plus it shows both "before" and "after". While after is already visible so it's kinda redundant and results in more clutter than needed.

Also, right now you can stage and revert. Having a copy action (that copies old version of changed lines to clipboard) would be very useful.