story #11667 display diff side by side
display diff side by side

Functional overview

  • In the "file" view, there is a new toggle to display diff either in side-by-side or in unidiff.
  • When diff is changed, the preference for user is kept and will be used by default (user can change at any time).
  • Default is still unidiff

The diff is then displayed side by side and all features of diff works the same (comment & co).

Technical overview

  • CSS will be tricky to be right and efficient (esp. big files). Should be done on top of burning parrot pages
  • Most of the work is front end (angular). REST backend isn't supposed to change
  • Point of attention
    • Storage of comments (should be ok as we already store the offset)
    • Autocollapse of common diff parts
    • Scroll synchro should be managed manually
    • Code need to be prepared to introduce side-by-side
    • Bump of CodeMirror to latest version
  • [ ] Does it involves User Interface? 
  • [ ] Are there any mockups?
  • [ ] Are permissions checked?
  • [ ] Does it need Javascript development?
  • [ ] Does it need a forge upgrade bucket?
  • [ ] Does it need to execute things in system events?
  • [ ] Does it impact project creation (templates)?
  • [ ] Is it exploratory?
Manuel Vacelet (vaceletm)
2018-12-13 11:45
2018-06-22 15:06

Referencing story #11667

Git commit


Add the Diff toggle button and store user preference ee3556483c
Refactoring: Diff directive clean-up 76f50e25e6
Refactoring: have two dedicated diff components dac1256c76
Display code in side-by-side diff ebe74403e7
Synchronize scrolling with two diffs fde69b240f
Display comments in side-by-side diff 11a5eaccd2
Autocollapse common code sections for unified diff 5e6667d343
Keep new comments in sync when switching diff mode d2c760f4b8
Have syntaxe colorization dcd753135d
Autofocus the new inline comment textarea 36a24a71df
Take wrapped lines into account for placeholders 28a3d79db0
Add comment in side-by-side diff 5e0ff23456
Add left or right position to inline_comment representation 7950ee848f
Possibility to add inline-comments on left side for deleted lines 7cc4f37154
Handle properly side by side comments 04f4260ce3
Pull request diff design check 7d170445e7
Collapse code properly when last line is commented 83371dbf52


User avatar

It means that the team had to write the javascript code to manage the synchronisation between the 2 views (left/right) when someones scroll in diff side by side

User avatar
gerrit #12510 integrated into Tuleap

  • Acceptance criteria
    Something went wrong, the follow up content couldn't be loaded
    Only formatting have been changed, you should switch to markup to see the changes