Add infinite scrolling to the diff viewer
Review Request #7047 — Created March 12, 2015 and discarded
Add infinite scrolling to the diff viewer.
When working with long diffs, it's common for the diffs to be split up across
several pages. This can end up being a pain to review, as it means having to
deal with manual pagination.This change replaces the pagination to scroll loading. When user scroll to the
bottom of the page, diffs will be loaded automatically without having to click
anything.First bind a listening function to the window to check the position. And when
it detect scroll bar touch the bottom, it will active the loading function to
load next diffs. The loading function use ajax to load pagination's diffs, and
append to the current pagination. Similar to the set, when update the diffs,
properties should update one by one.Remove the pagination and page selection, and modify the description of 'paginate
by' and 'paginate orphans'.
Passed all js-tests.
Manual tests with a 25 diff files review request.
Paginate by 2, and paginate orphans is 10.When first load the pages, the page loads 2 diffs, and scroll to the bottom, it
loads 2 another difss. At last, the page loads 10 diffs.
Description | From | Last Updated |
---|---|---|
Col: 80 E501 line too long (80 > 79 characters) |
![]() |
|
I believe you can just remove the else part. |
SU Sunxperous | |
obejct -> object |
VT VTL-Developer | |
I suppose this should be ===? I think it will be clearer if ($(document).scrollTop() + $(window).height()) == ($(document).height()) is defined … |
SU Sunxperous | |
You can do this.isScrolling without the equality check. |
VT VTL-Developer | |
You don't actually use attrs anywhere in this function except to feature gate emptying the items table. If this is … |
|
|
maybe try "Append another page object into the current page so that add(parse(...)) can't be called, due to part of … |
CR cristocrat | |
You're missing a space between that and add. How about "Append another set of diffs into the current page." |
|
|
No blank line here. |
|
|
Why are you checking this.attributes.property_name instead of attrs.property_name ? |
|
|
All var statements should be at the top of the function. |
|
|
Clarify what "has the next page" means. |
|
|
This seems to be private data that doesn't leave the DiffViewerPageView. This should be _isScrolling in that case. |
|
|
Can we rename this to _onScroll or _onWindowScroll or similar? |
|
|
maybe try "Listens to a scroll action and check whether it reaches the bottom of the page" |
CR cristocrat | |
This logic is kind of hard to grok. Can we assign the computed window top to a variable and then … |
|
|
This is a simplified statement so these should be fine on the same line. |
|
|
Only one var statement at the top of the function. |
|
|
Isn't the default behaviour to fetch the first page if the page query parameter isn't provided? If that is the … |
|
|
Won't there be no more references to the XHR object anyway? Shouldn't it get automatically garbage collected? |
|
|
How about "Load the next page of diff content" ? |
|
|
maybe try "Use AJAX to load the next pagination page and append..." |
CR cristocrat | |
Again, why won't the GC kick in to get rid of the XHR object? |
|
|
We usually do if (positive_case) { // ... } else { // ... } instead of ```javascript if (!positive_case) { … |
|
|
See my previous comment about XHR objects getting GC'ed. |
|
|
How about "before loading the diff viewer another time." ? |
|
|
Remove trailing whitespace. |
|
|
Blank line between these. |
|
|
Semicolon, not comma. |
|
|
Semicolon, not comma. |
|
|
We're not actually setting it to null anymore so can we remove this line? |
|
|
Doesn't look like this is used. |
|
|
Wrapping window and document is expensive. We should do that once, in render, storing as this._$window and this._$document, so it'll … |
|
|
No need for the parens around the comparison. |
|
|
You can do if (!attrs) |
|
|
Similar to Christian's comment earlier, (!attrs)? |
SU Sunxperous | |
Add a blank line between the two lines, multi-line documentation should have a summary, followed by a blank line, then … |
SU Sunxperous | |
There's an extra *. |
SU Sunxperous | |
Not very sure here, but maybe this can be on the same line. |
SU Sunxperous | |
Why not just assign $diffs = $('#diffs'); in the beginning, and then only call $diffs.empty(); in the if block? |
SU Sunxperous | |
How about nextPage instead of nextpage? |
SU Sunxperous |
Change Summary:
Fix the bugs and new bug
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 2 (+111 -30) |

-
Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
Change Summary:
Rebase
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 3 (+72 -25) |

-
Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
Change Summary:
Fix load Revision bugs
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 4 (+124 -56) |

-
Tool: PEP8 Style Checker Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: Pyflakes Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
Change Summary:
Modify description, rebase from master, cut down part of the memory use.
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 5 (+115 -48) |

-
Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
-
Commit: |
|
||||
---|---|---|---|---|---|
Groups: |
|
||||
Diff: |
Revision 6 (+115 -48) |

-
Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
Change Summary:
Change the summary, description, testing.
Summary: |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Description: |
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Testing Done: |
|
-
-
reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js (Diff revision 6) I believe you can just remove the
else
part. -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 6) I suppose this should be
===
? I think it will be clearer if($(document).scrollTop() + $(window).height()) == ($(document).height())
is defined a variable first.
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 7 (+115 -48) |

-
Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 8 (+113 -48) |
-
-
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 6) Is there a reason to set XHR to null?
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 6) You can do
this.isScrolling
without the equality check. -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 6) Same question as above, is there a reason to set XHR to null?

-
Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 9 (+113 -48) |

-
Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
-
Code looks good, just a few wordings suggestions!
-
reviewboard/static/rb/js/pages/models/diffViewerPageModel.js (Diff revision 9) maybe try "Append another page object into the current page so that add(parse(...)) can't be called, due to part of the model's property"
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) maybe try "Listens to a scroll action and check whether it reaches the bottom of the page"
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) maybe try "Use AJAX to load the next pagination page and append..."
-
-
reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js (Diff revision 9) You don't actually use
attrs
anywhere in this function except to feature gate emptying the items table.If this is a flag, we should be explicit and call it something like
dontEmptyTable
and explicitly check if it is nottrue
. -
-
reviewboard/static/rb/js/pages/models/diffViewerPageModel.js (Diff revision 9) Why are you checking
this.attributes.property_name
instead ofattrs.property_name
? -
reviewboard/static/rb/js/pages/models/diffViewerPageModel.js (Diff revision 9) All
var
statements should be at the top of the function. -
reviewboard/static/rb/js/pages/models/diffViewerPageModel.js (Diff revision 9) Clarify what "has the next page" means.
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) This seems to be private data that doesn't leave the
DiffViewerPageView
. This should be_isScrolling
in that case. -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) Can we rename this to
_onScroll
or_onWindowScroll
or similar? -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) This logic is kind of hard to grok.
Can we assign the computed window top to a variable and then do the comparison? Also when we break up an if statment we try to have each condition on a single line, e.g.:
if (really_long_condition_one && really_long_condition_two) { // ... }
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) Only one
var
statement at the top of the function. -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) Isn't the default behaviour to fetch the first page if the
page
query parameter isn't provided? If that is the case, we don't need to append&page=1
to the URL all the time. -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) Won't there be no more references to the XHR object anyway? Shouldn't it get automatically garbage collected?
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) How about "Load the next page of diff content" ?
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) Again, why won't the GC kick in to get rid of the XHR object?
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) We usually do
if (positive_case) { // ... } else { // ... }
instead of
```javascript
if (!positive_case) {
// ...
} else {
// ...
} -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 9) See my previous comment about XHR objects getting GC'ed.
Change Summary:
Fix issues
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 10 (+117 -48) |

-
Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
-
-
reviewboard/static/rb/js/pages/models/diffViewerPageModel.js (Diff revisions 9 - 10) You're missing a space between
that
andadd
.How about
"Append another set of diffs into the current page."
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revisions 9 - 10) This is a simplified statement so these should be fine on the same line.
-
reviewboard/admin/forms.py (Diff revision 10) How about "before loading the diff viewer another time." ?
Change Summary:
Fix revision 10 issues
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 11 (+117 -48) |

-
Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 12 (+112 -47) |

-
Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
-
-
reviewboard/static/rb/js/pages/models/diffViewerPageModel.js (Diff revision 12) Remove trailing whitespace.
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 12) Blank line between these.
-
-
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 12) We're not actually setting it to
null
anymore so can we remove this line?
Change Summary:
Fix Revision 12 Issues
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 13 (+111 -47) |

-
Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js

-
Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
-
-
reviewboard/static/rb/js/pages/models/diffViewerPageModel.js (Diff revision 14) Doesn't look like this is used.
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 14) Wrapping
window
anddocument
is expensive. We should do that once, inrender
, storing asthis._$window
andthis._$document
, so it'll be faster to handle scrolls.Another way to improve performance is to listen for
resize
events and cache the window height and document height there, so tha scrolling doesn't need to recompute each time. That would make this function very fast. -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 14) No need for the parens around the comparison.
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 14) You can do
if (!attrs)
Change Summary:
Fix revision 14 issues
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 15 (+120 -47) |

-
Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
Change Summary:
Rebase from master
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 16 (+120 -47) |

-
Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js
-
-
reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js (Diff revision 16) Similar to Christian's comment earlier,
(!attrs)
? -
reviewboard/static/rb/js/pages/models/diffViewerPageModel.js (Diff revision 16) Add a blank line between the two lines, multi-line documentation should have a summary, followed by a blank line, then the description.
-
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 16) Not very sure here, but maybe this can be on the same line.
-
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 16) Why not just assign
$diffs = $('#diffs');
in the beginning, and then only call$diffs.empty();
in the if block? -
reviewboard/static/rb/js/pages/views/diffViewerPageView.js (Diff revision 16) How about
nextPage
instead ofnextpage
?
Change Summary:
Fix revision 16 issues.
Commit: |
|
||||
---|---|---|---|---|---|
Diff: |
Revision 17 (+121 -48) |

-
Tool: Pyflakes Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/admin/forms.py Ignored Files: reviewboard/static/rb/js/pages/views/diffViewerPageView.js reviewboard/static/rb/js/diffviewer/views/diffFileIndexView.js reviewboard/static/rb/js/pages/models/diffViewerPageModel.js