Modified styling for diff viewer lines to be colorblind-friendly

 






 

 


  Review Request #10981
  —
  Created March 29, 2020 and updated 

 


















 

  

   Information

  





 
 

  kpatenio
 









 
 

  Review Board
 









 
 

  release-4.0.x
 









 
 

  
 









 
 

  
 









 
 

  87859c5...
 






 




 

  

   Reviewers

  





 
 

  reviewboard
 









 
 

  
 






 








 





  


 
 

  
The red, green, and yellow colors used in Review Board's diff viewer aren't

easily dintinguishable for users with various colorblind disabilities. 


To address this, icons have been added to inserted, replaced, and deleted

diff viewer lines (+, ~, and - respectively) to visually represent the type

of change made without having to solely rely on color. Alignment for equal

lines (unmodified lines of code) was also updated; line numbers for all

diff types should now be aligned.


I've attached a video below showing how the diff viewer would like with my

new changes.


For more information on how I came up with these changes, see my notes here.

 








  


 
 

  
All current unit tests pass. No additional tests were made.

 







 









 





  








 

  
  


   

    

     

     

     

    

   


   

  

 







 
 
 

  

   

    

     
    

    
    
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
    

   

   

    
     

      Description
      From
      Last Updated
     

    
    



     

      
       
       
Could we perhaps reuse some of the builtin colors already defined in reviewboard/reviewboard/static/rb/css/ui/colors.less? For example, #rb-ns-ui.colors[@red-60]; You'll just need to …

      		
      
       bui1bui1
      
      
       
      
     




     

      
       
       
Same comment here about reusing colors #rb-ns-ui.colors[@green-70];

      		
      
       bui1bui1
      
      
       
      
     




     

      
       
       
Same comment here about colors #rb-ns-ui.colors[@yellow-90];. I know the shades of yellow here are limited so if they don't work …

      		
      
       bui1bui1
      
      
       
      
     




     

      
       
       
I think this comment should use /* ... */

      		
      
       hxqlinhxqlin
      
      
       
      
     


    
   

  

 







 






  

 



















 




 




 














 



 

  

   




kpatenio




   

   

  

 



 















 





 

  

   




bui1




   

   







  

 



 

  


   

   

    
 
bui1


    
   


  

  

  



    




  1. 
 
    
  
    
   
    The screenshots look good to me! The icons themselves are easier to see given the size and boldness. 
    

    Just another question (maybe since I'm not sure of the current state of the project), did we scrap the idea of changing colors altogether per mode of colorblindness?
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      Sorry the delayed response! I believe we did scrap the idea of changing colours. If we do decide to do that, I'd ideally like to do that change in another request if possible.
      
 
      

      2. 


 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Could we perhaps reuse some of the builtin colors already defined in reviewboard/reviewboard/static/rb/css/ui/colors.less? 
    

    For example,
    
#rb-ns-ui.colors[@red-60];
    

    You'll just need to play around with the different shades of red to get the best one you need for the job
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 






  3. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Same comment here about reusing colors
    

    #rb-ns-ui.colors[@green-70];
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 






  4. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Same comment here about colors
    
#rb-ns-ui.colors[@yellow-90];.
    

    I know the shades of yellow here are limited so if they don't work out, I think leaving it as is should ok or even defining it as a variable for future reusability is also a good idea.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    5. 




  5. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    6. 




  

 
















 



 

  

   




kpatenio




   

   

  

 



 















 





 

  

   




hxqlin




   

   







  

 



 

  


   

   

    
 
hxqlin


    
   


  

  

  



    




  1. 
 
    
  
    
   
    This looks pretty good! One another suggestion is to add a short comment of what the attached screenshots are for and possibly updating their captions. For a small change like this, it's relatively obvious that they're showing the UI changes but in a review request that might have multiple attached files to explain different parts of the change, it might not be so clear.
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      Oops just to clarify the add a short comment bit - I meant for this to be added in the description.
      
 
      

      2. 



    2. 
 
 
      
 
      
  
 
      
 
      
  
      Thanks for your feedback Hannah! I've updated the description to more clear. :)
      
 
      

      3. 


 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    I think this comment should use /* ... */
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  3. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 
















 



 

  

   




kpatenio




   

   

  

 



 















 



 

  

   




kpatenio




   

   

  

 



 















 



 

  

   




kpatenio




   

   

  

 



 















 



 

  

   




kpatenio




   

   

  

 



 















 



 

  

   




kpatenio




   

   

  

 



 

  


   

   

    
 Review request changed

    
   


  

  

  








 
Change Summary:

 
Updated description





 



  

   
Description:

   
    
     
The red, green, and yellow colors used in Review Board's diff viewer aren't
     easily dintinguishable for users with various colorblind disabilities. 
     

     
To address this, icons have been added to inserted, replaced, and deleted
     diff viewer lines (+, ~, and - respectively) to visually represent the type
 ~   of change made without having to solely rely on color.
   ~ of change made without having to solely rely on color. Alignment for equal
   + lines (unmodified lines of code) was also updated; line numbers for all
   + diff types should now be aligned.
     

 ~   
For a visual representation of these changes, I've attached screenshots
 ~   below. I chose screenshots showing the three different types of diffs; this
   ~ 
I've attached a video below showing how the diff viewer would like with my
   ~ new changes.
 -   is to demonstrate the readability of the diffs with the newly added icons.
     

 ~   
For more information, see my notes here.
   ~ 
For more information on how I came up with these changes, see my notes here.

   		
  



 










  

 









     

    

   

  

  

   
   Loading...