Change linenum color of diff viewer for better user visibility.

Review Request #7687 — Created Oct. 9, 2015 and submitted

Information

Review Board
release-2.0.x

Reviewers

I have changed the line number color of diff viewer for better user visibility. The color in diff viewer before was black by default and was a distraction to the actual code. I have made this line number color lighter and less noticable so that the code is easier to read.

Reloaded the page to see if the color had changed.
Fixed the order of code in diffviewer.less
Updated the diff-line-num to #444444


Description From Last Updated

Hmm. This color might still be too low contrast. Let's darken it a bit.

daviddavid

This is the same as after. I think you uploaded the wrong image because thats supposed to be black.

brenniebrennie

Instead of using transparency, can we just make this a medium grey color? Something like #777777?

daviddavid

We should probably also add font-weight: normal to avoid the browser bolding everything.

daviddavid

Should be in alphabetical order.

chipx86chipx86
reviewbot
  1. Tool: Pyflakes
    Ignored Files:
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/diffviewer.less
    
    
    
    Tool: PEP8 Style Checker
    Ignored Files:
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/diffviewer.less
    
    
  2. 
      
david
  1. Please attach before/after screenshots.

  2. 
      
EK
david
  1. 
      
    1. Hey Edward,

      If you've addressed the issues below (and it looks like you have), please click "Fixed" on them. We're unlikely to give your changes more rounds of review if we see they still have open issues.

  2. reviewboard/static/rb/css/defs.less (Diff revision 1)
     
     
    Show all issues

    Instead of using transparency, can we just make this a medium grey color? Something like #777777?

  3. reviewboard/static/rb/css/diffviewer.less (Diff revision 1)
     
     
     
    Show all issues

    We should probably also add font-weight: normal to avoid the browser bolding everything.

  4. 
      
EK
reviewbot
  1. Tool: Pyflakes
    Ignored Files:
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/diffviewer.less
    
    
    
    Tool: PEP8 Style Checker
    Ignored Files:
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/diffviewer.less
    
    
  2. 
      
EK
david
  1. Your description still talks about transparency, but we're not using transparency anymore.

    Please also attach screenshots of equals, removed, and changed blocks (so we can see what it looks like against all color backgrounds).

  2. Show all issues

    Hmm. This color might still be too low contrast. Let's darken it a bit.

  3. 
      
EK
reviewbot
  1. Tool: Pyflakes
    Ignored Files:
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/diffviewer.less
    
    
    
    Tool: PEP8 Style Checker
    Ignored Files:
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/diffviewer.less
    
    
  2. 
      
EK
brennie
  1. 
      
  2. Show all issues

    This is the same as after. I think you uploaded the wrong image because thats supposed to be black.

    1. They are similar but not the same, the before was #777777 that was David wanted darker, so I've changed it to #666666

    2. The difference between 777777 and 666666 is pretty subtle. Let's try 444444.

  3. 
      
brennie
  1. Your summary needs to be updated. Other than that, it looks good to me, pending David's approval.

  2. 
      
chipx86
  1. 
      
  2. reviewboard/static/rb/css/diffviewer.less (Diff revision 3)
     
     
     
     
    Show all issues

    Should be in alphabetical order.

  3. 
      
EK
mike_conley
  1. This looks good to me - thanks!

  2. 
      
david
  1. Edward, I'm still waiting on you updating the description to be accurate (we're not using transparency anymore).

    1. Ok, I have made that change.

  2. 
      
EK
reviewbot
  1. Tool: PEP8 Style Checker
    Ignored Files:
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/diffviewer.less
    
    
    
    Tool: Pyflakes
    Ignored Files:
        reviewboard/static/rb/css/defs.less
        reviewboard/static/rb/css/diffviewer.less
    
    
  2. 
      
david
  1. I don't agree with this new description of the change. Making the line numbers lighter weight and a lighter color makes them less noticible, not more. The initial problem was that the heavy-weight numbers distracted from the real focus of the page, which should be the code itself.

  2. 
      
EK
david
  1. Ship It!
  2. 
      
EK
Review request changed
Status:
Completed
Change Summary:
Pushed to release-2.5.x (d397b2d)
EK
  1. Ship It!
  2.