User:Prtksxna/VeDiff

This document looks at the new visual diffs at different levels. Everything here could be on Phabricator, but I wasn't sure what should and should not. Some of the things here might already be ✅,, or tracked. Feel free to add necessary templates, like Template:Tracked to the relevant subheadings.
 * Very specific, like particular kinds of diffs that are hard to figure out.
 * General comments on how the diffs are shown with some specific examples.
 * High level, about the idea and scope of this feature.

Scope
Is it a diff of all the visual changes of the page, or a visual way to see the diff of all the changes that have occurred in the page?Is the scope of this feature to also surface hidden changes like those to the metadata of the page or adding a comment to the page?

The changes are currently being shown in two ways, the red and green diffs, or as a comment in the sidebar. There usually is a blue highlight in the diff that corresponds to a comment in the sidebar. How are we deciding which changes need to be shown in which way? The way I see it, it can be reasoned about in two ways: Picking an approach would depend on what a majority of users expect from it. We should be consistent about it either way.
 * Visual change should be shown in the red/green way. This would mean that formatting changes, and converting some text to a link would show up in the diff.
 * Text change should be shown in the red/green way. This would mean that formatting changes, and converting some text to link would not show up in the diff, and in the comment sidebar instead.

Adding a link as a meta change
Adding a link to some existing text could be shown in the 'comments' instead of in the diff.

Simple formatting changes
Simple formatting changes like bold or italicized could be shown in the 'comments' instead of in the diff.

✅ Link comments with the change in the diff
Sometimes it is hard to figure out what the comment is about. Like comments in Google Docs, it should be possible to select it and see what part of the document it is referring to.

Remove strike-through on hover
Will improve readability.



Showing comments
Currently a new comment shows up as an added space in the content. Should this be complemented with a 'comment'?



for paragraphs?
Is it possible to add the  tag inside paragraphs that are  ? This would make the interface consistent with simple word removals and more accessible.

Contrast of surrounding context text
The context text surrounding the actual change is black and at 40% opacity. Thus, the resulting color is about  which has a contrast ratio of 2.88:1 against the white background. This does not pass the WCAG AA or AAA standard. Bumping up the opacity to 60%, making the color, has a contrast ratio of 5.83:1 which passes WCAG AA.

Templates on top
When there are templates on the top of the page, and the lead section of the article is edited, it adds a vertical ellipsis on the top which is confusing. This is one of the things that need to be discussed as part of scope, should we show the ellipsis for non-visual content?

Functionality
The vertical ellipsis can be a bit confusing: We could:
 * They don't offer any interaction or information.
 * The hover surface is limited and doesn't give context.
 * Add hover text that tells how many lines/paragraphs have been skipped in between.
 * Add gerrit like functionality that lets you see more context where needed.Gerrit-diff-context.png

Removing a space
Removing a space is shown as a space with a red background and strike-through. This looks the same as removing a hyphen.

Removing a space near a line-break
This change is really hard to spot. See the small red line at the end of the second line.



Edit first template
Editing the first template on the page shows a comment annotating an empty space and shows no content.