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

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

keanweng
Review Board
release-4.0.x
46
reviewboard, students

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)
Summary
The current diff viewer does not have a column indicator that shows the

Description From Last Updated

I tried hosting the patched server on my local machine and the column indicator looks great! I agree with Jacob ...

bniebnie

It looks like some lines in the description are longer than the format expected. Could you target ~70 (upwards of ...

ceciliaweiceciliawei

When referencing a JavaScript method in the docs, you'll want to use the js:meth: role, like: :js:meth:`_moveColumnIndicator` Same with docs ...

chipx86chipx86

Rather than var, this should use const. Or just pass the expression into the call that needs it. I would ...

chipx86chipx86

You can define these where they're needed. Either const or let should be used instead of var, depending on whether ...

chipx86chipx86

Let's use .text(), to better communicate that we're not inserting HTML.

chipx86chipx86

Where does this number come from?

chipx86chipx86

Blank line between statements that form blocks.

chipx86chipx86

The - operator should go on the previous line, and each line of the expression should be aligned.

chipx86chipx86

Each parameter to Math.min() should be aligned.

chipx86chipx86

You can use template literals here and above: `translateX(${columnNum * charWidth}px)`

chipx86chipx86
keanweng
keanweng
keanweng
keanweng
keanweng
keanweng
chipx86
  1. 
      
  2. When referencing a JavaScript method in the docs, you'll want to use the js:meth: role, like:

    :js:meth:`_moveColumnIndicator`
    

    Same with docs below.

  3. Rather than var, this should use const. Or just pass the expression into the call that needs it.

    I would rework this to properly use the chaining syntax:

    cons newColumnNum =
        this.$el
        .find('....')
        .val()
    

    That's often used with jQuery, and it helps make each step in the chain clear.

  4. You can define these where they're needed. Either const or let should be used instead of var, depending on whether the variable needs to be reassigned.

  5. Let's use .text(), to better communicate that we're not inserting HTML.

  6. Where does this number come from?

    1. This is the value of one ch in my Chrome browser, it's different across browsers as they render the font sizes differently. It shouldn't affect much as this value is only used to move the input box on deleted files in the diff viewer (deleted files does not show the column indicator by default, so there is no way to measure ch). This is so that the user can still move the input box, although it won't be 100% accurate.

    2. The updated version does not require this value anymore since the input box will not be moving.

  7. Blank line between statements that form blocks.

  8. The - operator should go on the previous line, and each line of the expression should be aligned.

  9. Each parameter to Math.min() should be aligned.

  10. You can use template literals here and above:

    `translateX(${columnNum * charWidth}px)`
    
  11. 
      
keanweng
jblazusi
  1. I pulled down the patch, ran it locally, and it works great. Awesome work Kean! Not sure that I am too familiar with the code, so I will comment mostly on my user experience. Firstly, I noticed that the column indicator input text can overlap with the New File Download button if set to 0, this could be annoying especially for users that are uninterested in seeing the column indicator. In addition, I think that it could be useful to have a toggle button on the indicator to turn it on/off and give users more flexibility. I also noticed that the input field works with hexadecimal numbers such as 0xf, not sure if that is the intended behavior. But it's kind of cool nonetheless.

    1. Thanks for checking it out, Jacob! The input box now has a fixed position. I like that suggestion, I will include it in my future TODO's.

  2. 
      
bnie
  1. 
      
  2. I tried hosting the patched server on my local machine and the column indicator looks great!
    I agree with Jacob on the part when user sets the column indicator to around 5, the indicator overlaps with the text below it.
    Also, I tested the diff viewer on both Chrome Version 86 and Safari 14. The indicator works perfectly on Chrome but on Safari, the indicator text box does not align with the indicator line, I've attached a picture below. This only happends when you first load the page and if you set it to something else and set it back later, the text box does align with the line indicator.
    Image

    1. Thanks for noticing this bug, Bruce! The input box's position is now fixed. (details)

  3. 
      
keanweng
keanweng
ceciliawei
  1. 
      
  2. It looks like some lines in the description are longer than the format expected. Could you target ~70 (upwards of 75) characters for the wrap point?

    1. I've updated it to wrap at 70 characters, thanks for catching that!

  3. 
      
keanweng
keanweng
  1. 
      
  2. 
      
keanweng
Review request changed

Change Summary:

Update description.

Description:

   

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)
Loading...