80- (or n-) column indicator in diff viewer

Review Request #11294 — Created Nov. 20, 2020 and updated — Latest diff uploaded

Information

Review Board
release-4.0.x
46

Reviewers

The current diff viewer does not have a column indicator that shows
the character boundary. Adding the feature will allow reviewers to see
when a line exceeds n characters.

We added a red dashed line on the diff viewer at the specified column.
The indicator defaults to 80 characters and the user can specify a
number at the input box on top. With file changes, the indicator shows
on both side of the diff viewer and changes together. We also check
for the maximum column number based on the diff viewer's size. If the
diff viewer is shrunk beyond the indicator, the indicator will be
hidden.

We added the indicator as a div which the CSS property
border-left: 1px dashed red. Whenever the column number is changed,
moveColumnIndicator() does the calculation and moves the indicator
to the new position with jQuery's css(). Although JS function does
the calculations everytime the position changes, in theory, a user
will not be changing the position too often.

Testing Done:

Tested following behaviours:

  • Set column indicator to 0 (check underflow)
  • Set column indicator to 999 (check overflow)
  • Check indicator line

Browsers tested:

  • Chrome (Version 87.0.4280)
  • Edge (Version 87.0.664.5)
  • Firefox (Version 83.0)
  • Safari (Version 14.0.1)

Tested following behaviours:

  • Set column indicator to 0 (check underflow)
  • Set column indicator to 999 (check overflow)
  • Check indicator line

Browsers tested:

  • Chrome (Version 87.0.4280)
  • Edge (Version 87.0.664.5)
  • Firefox (Version 83.0)
  • Safari (Version 14.0.1)

Diff Revision 3

This is not the most recent revision of the diff. The latest diff is revision 6. See what's changed.

orig
1
2
3
4
5
6

Commits

First Last Summary ID Author
Add indicator line.
a08332bb78a1dd1dbe06710103ac70d1caa071d5 Kean Weng Yap
Add input to switch n-column.
a8b47243d3cdb7c7669a2ccef7da7fa30451cc19 Kean Weng Yap
Update indicator to div, working.
f570cddeca3982a058bbe12458a3d2d394fac696 Kean Weng Yap
The current diff viewer does not have a column indicator that shows the
character boundary. Adding the feature will allow reviewers to see when a line exceeds n characters. We added a red dashed line on the diff viewer at the specified column. The indicator defaults to 80 characters and the user can specify a number at the input box on top. With file changes, the indicator shows on both side of the diff viewer and changes together. We also check for the maximum column number based on the diff viewer's size. If the diff viewer is shrunk beyond the indicator, the indicator will be hidden. We added the indicator as a `div` which the CSS property `border-left: 1px dashed red`. Whenever the column number is changed, `moveColumnIndicator()` does the calculation and moves the indicator to the new position with jQuery's `css()`. Although JS function does the calculations everytime the position changes, in theory, a user will not be changing the position too often.
61113b7f86f900914de399bb031a659a24e66109 Kean Weng Yap
reviewboard/static/rb/css/pages/diffviewer.less
reviewboard/static/rb/js/diffviewer/views/diffReviewableView.es6.js
reviewboard/templates/diffviewer/diff_file_fragment.html
Loading...