Diff fragments in review comments can now be expanded and collapsed.

Review Request #6380 — Created Sept. 28, 2014 and submitted — Latest diff uploaded


Review Board


Diff fragments can now be expanded in three ways:
- expanded above or below the current context by a fixed number of
lines (20);
- expanded up to the previous header (i.e., method definition); or
- expanded completely above or below.
After a diff fragment is expanded in one direction, it can be
collapsed via a floating button that follows the viewport. If there is
still more of the diff to be expanded, it may be expanded again.

The comment_diff_fragments view now takes an optional URL query
parameter, lines-of-context, which indicates the number of lines
above and below that should be included in the fragment. Likewise,
the build_diff_comment_fragments now takes a lines_of_context
parameter and uses that to calculate the first_line and
num_lines parameters for get_file_chunks_in_range.

The activity indicator functionality in RB.apiCall (in
apiUtils.js) has been refactored into another method in the same
file: RB.setActivityIndicator. Asynchronous activity that does not
involve API calls can use this method to enable or disable the
activity indicator.

Add the expand_fragment_link and expand_fragment_header_link
Django template tags. These tags create expansion links for use in
diff fragments. These functions use a new template:

Added Brian Cherne's hoverIntent jQuery plugin to the 3rd party static

The DiffFragmentQueueView (diffFragmentQueueView.js) now handles
the expansion and contraction of diff fragments. This view monitors
for clicks on expansion and contraction buttons and dynamically adds
a script tag which will replace the contents of the appropriate diff
fragment with the same fragment, but with expanded (or contracted)
context. The activity indicator is turned on when a diff fragment is
requested and off when the requested fragment has been received.

The expansion links for diff fragments are only shown when the mouse
is hovering over the comment container for that fragment. Once the
mouse moves off the comment container, the expansion links will become
hidden. The hoverIntent jQuery plugin ensures that clumsy mouse
movements will not result in the controls toggling on and off

The ReviewBoxListView now constructs the DiffFragmentQueueView
with an element (#container) on which it should listen for events.

The diff fragment template (diff_comment_fragment.html) has been
modified to only show 2 columns (instead of 4) when the file in the
diff is a new file. This change makes the diff comment fragment viewer
look more similar to the diffviewer.

When a diff fragment is expanded to have context, the lines that have
been flagged for review will be surrounded above and below by a gray

Unit tests pass.

Verified the following in Chrome and Firefox:

  • Expansion links are only visible if the diff fragment can be
    expanded in that direction.
  • When a review request is loaded, the expansion controls are hidden.
  • Upon hovering over a diff fragment, the expansion controls expand.
  • Upon stopping hovering over a diff fragment, this is a delay before
    the expansion controls become hidden again.
  • Upon stopping hovering over a diff fragment, if the mouse hovers
    over the diff fragment again before the delay expires, the
    expansion controls do not become hidden.
  • Clicking on the "expand by 20" lines buttons expands the context by
    20 lines in the appropriate direction.
  • Click on the expand to header button expands to that header.
  • Expanding multiple times expands upon the current context.
  • The collapse button smoothly follows scrolling, staying in the
    centre of the screen (if the fragment takes up the whole view) or
    the centre of the fragment (if the fragment does not take up the
    whole view).
  • Clicking the collapse button makes all context hidden and removes
    the collapse button.
  • The lines originally flagged for review have a border around them.
  • When the file is a new file, only one line number column is
  • If upon contracting a diff fragment the mouse is no longer above
    the fragment for a period, the diff fragment's controls will become

Also verified the following:

  • An invalid lines_of_context query parameter is interpreted as
    0 lines of context above and below
  • If too many lines_of_context query parameter values are passed
    (e.g., 0,0,0,0), it is interpreted as if only the first two
    values were present.
  • If the lines_of_context query parameter is passed with no value,
    it is interpreted as 0,0
  • If the lines_of_context query parameter is passed with only one
    value, it is interpreted as both the above and below context.