Articles: add diff preview

[njoyard]

This PR is a proof-of-concept for article diff preview. It is only a graphical thing for now.

• There is no click interaction, maybe not necessary as the scrollbar is right next to it
• Maybe add click interaction, hide scrollbar and replace it with an indicator of the current position on the preview
• Maybe short articles should not show the preview (however there's no "clean" way of doing that, we either have to set a size threshold that will nearly always be wrong, or dynamically look for overflow)
• There are still some cases where it does not behave correctly (added/removed articles, should be easy to handle)
• We should handle colorblind-mode, too, with a different set of colors (red vs blue for example)

I don't want to get further into it without having reviews on the idea :)

Tell me how you feel about it, here's how it looks:

[RouxRC]

I really like it! It deserves to be in prod the soonest, but there are a few bugs left to handle:

• [ ] new articles don't have it but deleted articles do, being consistent I would not show it in both cases
• [ ] non modified articles show an empty one, I would not show it as well in those cases
• [ ] there is a display bug for short modified articles having the whole article fits in the sidebar height (ex art 1 quinquies pjl travail): the scrollbar being missing, text has more width and gets on top of the diffviewer

Regarding the other points:

• There is no click interaction, maybe not necessary as the scrollbar is right next to it

clicking on it could scroll down to the part but indeed with the exisiting scrollbar it's probably overkill

• Maybe add click interaction, hide scrollbar and replace it with an indicator of the current position on the preview

if we wanna go towards clickability then this is the way to go, except we need to handle cases when there's long text but no diff

• Maybe short articles should not show the preview (however there's no "clean" way of doing that, we either have to set a size threshold that will nearly always be wrong, or dynamically look for overflow)

that would be the logical continuation of adopting the second option above, otherwise having the diffviewer's height limited to the actual text's would be preferrable (but hardly clean as well)

• There are still some cases where it does not behave correctly (added/removed articles, should be easy to handle)

cf list above

• We should handle colorblind-mode, too, with a different set of colors (red vs blue for example)

yes indeed now that colorblind exists, it could certainly apply to the green/red of the articles view which is clearly not best for colorblinds

PS: then the next step I believe is to have a column diff instead of the inline one (or exchangeable?) when the sidebar is unfolded ;) I kinda remember the lib we use for the diff has methods that do exactly this but the doc/examples online disappeared unfortunately

[fmassot]

Really cool feature, +1

Regarding the click interaction on the "diff preview bar", even if the scrollbar is right next to it, it's common in diff viewer to click on it for two reasons according to me : you really want to click on it and click on the "diff bar" move the text exactly where you want to.

I think it's ok if the diff view is still here even for short article and prefer to keep a consistent interface for all articles. Juste like diff preview in diff viewer.

[njoyard]

Okay so I think I finished the implementation.

Now the diff preview, when visible, completely replaces the scrollbar and should have the same features (drag & drop, follow mouse scroll). Clicking on the bar outside the handle brings the cursor to the clicked position, which is different to what most UI scrollbars do ie. step the cursor towards the clicked direction. I think this is more appropriate here. Note that if you don't release the mouse button, you can drag the handle.

Unchanged, added or removed articles have no diff preview, hence they use the browser scrollbar when necessary. Diff preview is also hidden when the whole diff is visible without a need for scroll.

Tested with expanded mode, webkit and gecko. Should work with a touch screen, not tested much though (only touch simulation on PC). Colors are confirmed correct for red/blue colorblind people.

Maybe we'll want to adjust the handle look. I tried using just borders but it was not as legible IMO.

Here is an updated preview:

[RouxRC]

Again, really like it, but ;)

• it looks to me on long articles like the current position cursor is a bit shifted, for instance on the pic below, the cursor's top indicates the beginning of changes whereas int he text zone the changes only begin after the middle, and those at the bottom of the cursor do not appear in the view. Maybe this is due to not taking account of the header of the textbox (section/title/amendment button/...) ?
• not sure if there's any good solution for this, but whereas it's perfect in chrome since scrollbars are white with a grey cursor, on firefox it's the opposite and therefore when we pass from an article with a scroll but no diff to one with a diff, the cursor position gets inverted which is a bit confusing. Wondering maybe if we shouldn't always override the regular cursor and impose our own without colors but with the same style in all cases

[njoyard]

The position is inexact because the text that is compared is not how it is displayed. To be exact, the text would need to be displayed in monospaced font, without paragraphs, and without word-wrap (ie. break in the middle of a word at a fixed character count on each line).

As a consequence, the differences are:

• Text is displayed as paragraphs. The blank line between them is not taken into account in the diff preview (moreover its width is dependent on the display)
• Text is not displayed in a monospace font : all characters don't have the same display width (in the diff preview, we compute character counts so every characters are equal)
• Text is word-wrapped, so we have kind of a "random" blank at the end of each line and each paragraph.

This is most visible on long articles where the cumulative error gets very big the more you scroll. The header also adds an offset but most of the time it should be unnoticeable.

There may be solutions to this :) I think you'd see the same issues on a diff-viewer program.

Or maybe we should not count characters, but instead count paragraphs (alineas)... This may deserve to be tested.

[RouxRC]

i think it's about time to integrate this great feature :D