Visual diff UX improvements

[jaipreet-s]

Moving over the discussion from https://github.com/jupyterlab/jupyterlab-git/issues/317

---

Here's an initial draft for the diff view improvements:

Revision notes:

1. Simplify and reduce focus on hidden unchanged cells
2. Reduce visual noise on unchanged outputs
3. Added file level accordion wrapper around each file diff view to support multi-file diff views.

Alternative version that has a more explicit "Show" action on hidden unchanged cells

Questions:

1. What kind of meta-data can we provide about lines of code changed (on the file level view)?

Originally posted by @weihwang in https://github.com/jupyterlab/jupyterlab-git/issues/317#issuecomment-481454125

---

Proposal for changed output:

Originally posted by @weihwang in https://github.com/jupyterlab/jupyterlab-git/issues/317#issuecomment-481466025

---

[jaipreet-s]

In terms of the multi-file view, I think it makes sense to support it because users will want to see diffs across multiple files at some point in the development lifecycle.

This can be backwards compatible with the current single-file view as well and won't affect the current experience of the webapp. If the DiffWidget is provided a single filePath to diff then it can show a single file without the file-level accordion wrapper

[vidartf]

CC @tgeorgeux

@weihwang Did you make the screenshots only as a mock up, or do you have a proposal for the CSS? Do you want to submit a PR? If not, what are the color codes in question?

While the multi-file view might make sense in nbdime, it would at least be prudent to put it in a separate PR. One of the few candidate entry points for this is nbdiff-web with the git workaround. Here I am a little skeptical to introduce a multi-file view, as we are trying to mimic the behavior of git, which does one file at the time for diff tools (as far as I can remember). It might make sense for the hg folder diff entry point though.

[weihwang]

@tgeorgeux are there existing CSS palettes for the changes proposed? red/green is standard for diff, but I wanted to propose something softer to align with existing colors I saw in Jupyter. The "Outputs changed" color is something to indicate general change, so I am open to other suggestions there.

@vidartf These are mainly mocks, but I can provide CSS codes after I get some feedback from @tgeorgeux

[ellisonbg]

As a point of comparison, here is how diffs are rendered on GitHub:

[weihwang]

@tgeorgeux here's the figma link for commenting inline: https://www.figma.com/file/UyNpeQNuTj6Uv74MoEJDh3ji/Git-Design-Iterations?node-id=976%3A2344

[ellisonbg]

Some general comments:

• Given the space constraints, I think we want to use a dense layout with as little whitespace as possible. The GitHub design does a good job with that.
• The red/green coloring shouldn't be the only signifier of add/remove (also use +/- for accessibility)
• Blocks of added/removed content should be styled together (continguous block of green/red with no borders).
• The visual treatment of cell/putput+/- should probably be different than that of lines.

[weihwang]

Thanks for the feedback @tgeorgeux @ellisonbg-- I've updated the Figma file with a few iterations. I agree with all of the feedback, but another challenge on whitespace is a result of needing a place for actions to expand "unchanged notebook cells" since there is a bit more nesting relationships due to the additional cell container. I updated the density of information, removed some gutter spacing in this version. I posted a few notes for continued discussion.

[weihwang]

[weihwang]

@vidartf here are few revisions to the proposal after review with @tgeorgeux and @ellisonbg Prototype of interactions here: https://www.figma.com/proto/DeO8GFd8V63XRfeisAHarI2R/NBDIME?node-id=18%3A165&viewport=-3067%2C-446%2C0.5&scaling=min-zoom

Code change display • Showing the full cell for now, perhaps showing collapsed lines of code later

Proposed actions • Global show/hide of outputs (this assumes we can adjust Y-position to maintain the current view to avoid displacing the users view. • Global show/hide of all cells including unchanged cells (same adjustment needed for Y-position) • Individual expand action changes the checkbox action to "partial" state (see prototype by expanding just the output highlighted)

Proposed style changes • Highlighting of code changes and line # color • Highlight state when output changed (remains collapsed)

[tgeorgeux]

@weihwang thanks for working on this, this is looking great. I added a small update, in which we remove the 'in-out' on the cell prompt to match the existing JupyterLab notebook interface. This also gives us some more horizontal room.

[vidartf]

This all looks great! I have put it in my TODO queue, and hopefully I will have a PR in the not too distant future. I'm still open to further changes also. There is one question I have though:

Currently, to be agnostic to which theme is being used by the user, the highlighting colors are specified as semi-transparent RGBA/HSLA colors, with the intention that it should work on both light and dark themes. I'd appreciate any thoughts on this.