Summary:

Support for users with red-green colour-blindness

Review Request #9251 — Created Oct. 8, 2017 and updated Dec. 2, 2017, 5:57 p.m.

Information
Owner:	Claudz
Repository:	Review Board
Branch:	release-3.0.x
Bugs:
Depends On:
Commit:	0d6022d...
Reviewers
Groups:	reviewboard, students
People:

Description

Users who are red-green colour blind will likely have more difficulty using the diff viewer and reading change descriptions, as we use red for "line removed" and green for "line added". We should have a preference for changing the add & remove colours to another set of colours that are more distinguishable. This preference would apply to anywhere we use this visual metaphor.

A more colourblind-friendly alternative to green is blue for inserts and yellow instead of red for deletes. Because yellow is used by default for replaced lines, replacement lines will be a new shade of blue that appears as a cool grey for colourblind users.
I've added a new colorblind setting in user preferences which is saved under the user's profile's settings and added a colorblind class to be applied to the diffviewer (including the diff viewer in review comments) to enable the alternate color scheme.

Testing Done

Added a test under the profile tests of the accounts tests that tests whether the new setting saves to the profile correctly and that the setting is evaluated as false by default.

Issues

Description	From	Last Updated
One more thing--can you add some screenshots to this review request?	david	Nov. 25, 2017, 3:54 p.m.
E501 line too long (80 > 79 characters)	reviewbot	Oct. 28, 2017, 4 p.m.
E501 line too long (81 > 79 characters)	reviewbot	Oct. 28, 2017, 4 p.m.
W391 blank line at end of file	reviewbot	Oct. 28, 2017, 4 p.m.
E501 line too long (80 > 79 characters)	reviewbot	Oct. 28, 2017, 4 p.m.
W293 blank line contains whitespace	reviewbot	Oct. 28, 2017, 4:01 p.m.
E501 line too long (81 > 79 characters)	reviewbot	Oct. 28, 2017, 4:01 p.m.
W391 blank line at end of file	reviewbot	Oct. 28, 2017, 4:01 p.m.
Because we will never care about querying on this field, instead of adding a new model field for this, which …	david	Oct. 28, 2017, 4:17 p.m.
W291 trailing whitespace	reviewbot	Oct. 21, 2017, 4:18 p.m.
The first line of docstrings (the summary) should fit on a single line. You can be pretty terse in these …	david	Oct. 21, 2017, 4:21 p.m.
E251 unexpected spaces around keyword / parameter equals	reviewbot	Oct. 28, 2017, 4:25 p.m.
E131 continuation line unaligned for hanging indent	reviewbot	Oct. 28, 2017, 4:25 p.m.
E128 continuation line under-indented for visual indent	reviewbot	Oct. 28, 2017, 4:25 p.m.
E251 unexpected spaces around keyword / parameter equals	reviewbot	Oct. 28, 2017, 4:31 p.m.
E502 the backslash is redundant between brackets	reviewbot	Oct. 28, 2017, 4:31 p.m.
E131 continuation line unaligned for hanging indent	reviewbot	Oct. 28, 2017, 4:31 p.m.
E251 unexpected spaces around keyword / parameter equals	reviewbot	Oct. 28, 2017, 4:33 p.m.
All your other code assumes the .rg-colorblind class on the body element, but these don't. Can't we use the same …	david	Nov. 25, 2017, 3:19 p.m.
There's trailing whitespace on this line.	david	Nov. 25, 2017, 2:18 p.m.
Variable name should be rgColorblind to match the code style. That said, if we change the stylesheet to respect the …	david	Nov. 25, 2017, 2:18 p.m.
This variable should be "rgColorblindScheme" to match the casing on the other nearby ones (we use camelCase within javascript code).	david	Nov. 25, 2017, 3:19 p.m.
Can you undo this deletion?	david	Nov. 25, 2017, 3:46 p.m.
For properties, even though they're methods, they should be documented as if they're attributes. So the docstring can just be …	david	Dec. 2, 2017, 11:59 a.m.
I think this needs a docstring, but confirm with the mentors. Please see the link for details about docstrings. https://www.notion.so/reviewboard/Standard-Documentation-Format-4388f594d86547cc949b365cda3cf391	MU mukhtar	Dec. 12, 2017, 4:23 p.m.
Indentation is funky here. Can we add a blank line between the color: rule and the .rg-colorblind block?	david	Dec. 1, 2017, 9:02 p.m.
Can we add a blank line between the color: rule and the .rg-colorblind block?	david	Dec. 1, 2017, 9:02 p.m.
Can we add a blank line between the color: rule and the .rg-colorblind block?	david	Dec. 1, 2017, 9:02 p.m.
Can we add a blank line between the color: rule and the .rg-colorblind block?	david	Dec. 1, 2017, 9:16 p.m.
Can we add a blank line between the color: rule and the .rg-colorblind block?	david	Dec. 1, 2017, 9:16 p.m.
Space between ) and {	david	Dec. 1, 2017, 9:04 p.m.
Can we add a blank line between the .deletebase() macro and the .rg-colorblind block?	david	Dec. 1, 2017, 9:15 p.m.
Need a space between insert and {	david	Dec. 1, 2017, 9:05 p.m.
Can we add a blank line between the .insertbase() macro and the .rg-colorblind block?	david	Dec. 1, 2017, 9:05 p.m.
Can we add a blank line between the .replacebase() macro and the .rg-colorblind block?	david	Dec. 1, 2017, 9:06 p.m.
Can we add a blank line between the background-color: rule and the .rg-colorblind block?	david	Dec. 1, 2017, 9:07 p.m.
Blank line	david	Dec. 1, 2017, 9:07 p.m.
Blank line.	david	Dec. 1, 2017, 9:07 p.m.
This should only be indented 1 space (should match the indentation of reviewable-page)	david	Dec. 1, 2017, 9:19 p.m.

flake8 failed.

JSHint passed.

flake8

reviewboard/accounts/forms/pages.py (Diff revision 1)
Show all issues
```
E501 line too long (80 > 79 characters)
```

Change Summary:

added the new colorblind preference to the database

Commit:

-	a0b68fdb61ee8b506c22ecafe1399abbeb986df1
+	ec7526ec0e16363ad627588c7e53a932f481d2fb

Diff:

Revision 2 (+39 -2)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/evolutions/__init__.py
	reviewboard/accounts/evolutions/profile_colorblind_scheme.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/pages/diffviewer.less

Checks run (1 failed, 1 succeeded)

flake8 failed.

JSHint passed.

flake8

reviewboard/accounts/evolutions/profile_colorblind_scheme.py (Diff revision 2)
Show all issues
```
E501 line too long (81 > 79 characters)
```
reviewboard/accounts/evolutions/profile_colorblind_scheme.py (Diff revision 2)
Show all issues
```
W391 blank line at end of file
```
reviewboard/accounts/forms/pages.py (Diff revision 2)
Show all issues
```
E501 line too long (80 > 79 characters)
```
reviewboard/accounts/models.py (Diff revision 2)
Show all issues
```
W293 blank line contains whitespace
```

Change Summary:

added colorblind colors to complexity icons that are assigned according to user setting

Commit:

-	ec7526ec0e16363ad627588c7e53a932f481d2fb
+	e5894a2a472433f39d7c3396f5b59cfaa43e2db1

Diff:

Revision 3 (+62 -3)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/evolutions/__init__.py
	reviewboard/accounts/evolutions/profile_colorblind_scheme.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js
	reviewboard/templates/base.html
	1 more

Checks run (1 failed, 1 succeeded)

flake8 failed.

JSHint passed.

flake8

reviewboard/accounts/evolutions/profile_colorblind_scheme.py (Diff revision 3)
Show all issues
```
E501 line too long (81 > 79 characters)
```
reviewboard/accounts/evolutions/profile_colorblind_scheme.py (Diff revision 3)
Show all issues
```
W391 blank line at end of file
```
reviewboard/accounts/models.py (Diff revision 3)
Show all issues
```
W291 trailing whitespace
```

When making changes to the UI, it's very useful to have screenshots to look at. The best for something like this is to have two: before and after.

reviewboard/accounts/models.py (Diff revision 3)

Show all issues

Because we will never care about querying on this field, instead of adding a new model field for this, which requires a database evolution, it would be nice to stick the value into the extra_data field (which works a lot like a Python dictionary but serializes to JSON).

All the other things in here that are model fields existed before we added extra_data.

reviewboard/accounts/models.py (Diff revision 3)

Show all issues

The first line of docstrings (the summary) should fit on a single line. You can be pretty terse in these and then flesh out the meaning with more paragraphs below.

Change Summary:

moved new colorblind setting under profile.settings and also fixed soem style issues

Commit:

-	e5894a2a472433f39d7c3396f5b59cfaa43e2db1
+	21ddc877ea771c69da2b405e9f6ae34e8528a94c

Diff:

Revision 4 (+61 -7)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js
	reviewboard/templates/base.html
	reviewboard/templates/reviews/reviewable_base.html

Checks run (1 failed, 1 succeeded)

flake8 failed.

JSHint passed.

flake8

reviewboard/accounts/forms/pages.py (Diff revision 4)
Show all issues
```
E251 unexpected spaces around keyword / parameter equals
```
reviewboard/accounts/forms/pages.py (Diff revision 4)
Show all issues
```
E131 continuation line unaligned for hanging indent
```

reviewboard/accounts/models.py (Diff revision 4)

Show all issues

E128 continuation line under-indented for visual indent

Commit:

-	21ddc877ea771c69da2b405e9f6ae34e8528a94c
+	3b09db04c363d1f15eb66f56b2bfcd3307c721cd

Diff:

Revision 5 (+61 -7)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js
	reviewboard/templates/base.html
	reviewboard/templates/reviews/reviewable_base.html

Checks run (1 failed, 1 succeeded)

flake8 failed.

JSHint passed.

flake8

reviewboard/accounts/forms/pages.py (Diff revision 5)
Show all issues
```
E251 unexpected spaces around keyword / parameter equals
```
reviewboard/accounts/forms/pages.py (Diff revision 5)
Show all issues
```
E502 the backslash is redundant between brackets
```
reviewboard/accounts/forms/pages.py (Diff revision 5)
Show all issues
```
E131 continuation line unaligned for hanging indent
```

Commit:

-	3b09db04c363d1f15eb66f56b2bfcd3307c721cd
+	f6445f09c580255efd29073095f21726086a0a78

Diff:

Revision 6 (+60 -7)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js
	reviewboard/templates/base.html
	reviewboard/templates/reviews/reviewable_base.html

Checks run (1 failed, 1 succeeded)

flake8 failed.

JSHint passed.

flake8

reviewboard/accounts/forms/pages.py (Diff revision 6)
Show all issues
```
E251 unexpected spaces around keyword / parameter equals
```

Commit:

-	f6445f09c580255efd29073095f21726086a0a78
+	cd07fbc2e1949c8c48c72aa1fbbf37052aa0ca6f

Diff:

Revision 7 (+60 -7)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js
	reviewboard/templates/base.html
	reviewboard/templates/reviews/reviewable_base.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Commit:

-	cd07fbc2e1949c8c48c72aa1fbbf37052aa0ca6f
+	02439f705c2944b669ef40ef10e5bc73d5c984da

Diff:

Revision 8 (+60 -7)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js
	reviewboard/templates/base.html
	reviewboard/templates/reviews/reviewable_base.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Description:

		[WIP] Users who are red-green colour blind will likely have more difficulty using the diff viewer and reading change descriptions, as we use red for "line removed" and green for "line added". We should have a preference for changing the add & remove colours to another set of colours that are more distinguishable. This preference would apply to anywhere we use this visual metaphor.
~		A more colourblind-friendly alternative to green is blue.
	~	A more colourblind-friendly alternative to green is blue for inserts and yellow instead of red for deletes. Because yellow is used by default for replaced lines, replacement lines will be a new shade of blue that appears as a cool grey for colourblind users.

		I've added a new colorblind setting in user preferences and added a colorblind class to be used in diffviewer.

Change Summary:

added new colours for replace and delete

Commit:

-	02439f705c2944b669ef40ef10e5bc73d5c984da
+	6a6f13967e58db1c89e6977a33e88972a5530741

Diff:

Revision 9 (+106 -11)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js
	reviewboard/templates/base.html
	reviewboard/templates/reviews/reviewable_base.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Description:

		[WIP] Users who are red-green colour blind will likely have more difficulty using the diff viewer and reading change descriptions, as we use red for "line removed" and green for "line added". We should have a preference for changing the add & remove colours to another set of colours that are more distinguishable. This preference would apply to anywhere we use this visual metaphor.
		A more colourblind-friendly alternative to green is blue for inserts and yellow instead of red for deletes. Because yellow is used by default for replaced lines, replacement lines will be a new shade of blue that appears as a cool grey for colourblind users.

		I've added a new colorblind setting in user preferences and added a colorblind class to be used in diffviewer.
	+
	+	WIP: pending tests

Description:

~		[WIP] Users who are red-green colour blind will likely have more difficulty using the diff viewer and reading change descriptions, as we use red for "line removed" and green for "line added". We should have a preference for changing the add & remove colours to another set of colours that are more distinguishable. This preference would apply to anywhere we use this visual metaphor.
	~	Users who are red-green colour blind will likely have more difficulty using the diff viewer and reading change descriptions, as we use red for "line removed" and green for "line added". We should have a preference for changing the add & remove colours to another set of colours that are more distinguishable. This preference would apply to anywhere we use this visual metaphor.
		A more colourblind-friendly alternative to green is blue for inserts and yellow instead of red for deletes. Because yellow is used by default for replaced lines, replacement lines will be a new shade of blue that appears as a cool grey for colourblind users.

~		I've added a new colorblind setting in user preferences and added a colorblind class to be used in diffviewer.
	~	I've added a new colorblind setting in user preferences which is saved under the user's profile's settings and added a colorblind class to be applied to the diffviewer to enable the alternate color scheme.
-
-		WIP: pending tests

Testing Done:

Added a test under the profile tests of the accounts tests that tests whether the new setting saves to the profile correctly and that the setting is evaluated as false by default.

Commit:

-	6a6f13967e58db1c89e6977a33e88972a5530741
+	e75066d12e328de980382df841cfcc89443ff63e

Diff:

Revision 10 (+117 -11)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/tests.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js
	reviewboard/templates/base.html
	reviewboard/templates/reviews/reviewable_base.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Summary:

-	[WIP] Support for users with red-green colour-blindness
+	Support for users with red-green colour-blindness

reviewboard/static/rb/css/pages/diffviewer.less (Diff revision 10)

Show all issues

All your other code assumes the .rg-colorblind class on the body element, but these don't. Can't we use the same mechanism here instead of changing the classes on the elements?

reviewboard/static/rb/css/pages/diffviewer.less (Diff revision 10)
Show all issues
```
There's trailing whitespace on this line.
```

reviewboard/static/rb/js/diffviewer/views/diffComplexityIconView.js (Diff revision 10)

Show all issues

Variable name should be rgColorblind to match the code style. That said, if we change the stylesheet to respect the body's .rg-colorblind class we don't need any of this.

reviewboard/templates/base.html (Diff revision 10)

Show all issues

This variable should be "rgColorblindScheme" to match the casing on the other nearby ones (we use camelCase within javascript code).

reviewboard/templates/reviews/reviewable_base.html (Diff revision 10)
Show all issues
```
Can you undo this deletion?
```

Show all issues

One more thing--can you add some screenshots to this review request?

Claudz Nov. 25, 2017, 2:07 p.m.

How do I do this? Do I need to put them on some sort of image hosting site?

david Nov. 25, 2017, 2:09 p.m.

Just go to "Update > Add File" at the top of the review request box.

Commit:

-	e75066d12e328de980382df841cfcc89443ff63e
+	daad3889f64b4c2e7b9c4e25779f3fa4565c32cf

Diff:

Revision 11 (+102 -7)

Show changes

	reviewboard/accounts/models.py
	reviewboard/accounts/tests.py
	reviewboard/accounts/forms/pages.py
	reviewboard/static/rb/css/defs.less
	reviewboard/static/rb/css/pages/diffviewer.less
	reviewboard/templates/reviews/reviewable_base.html

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Added Files:

Functionality looks good. Just some very minor spacing and documentation things.

reviewboard/accounts/models.py (Diff revision 11)

Show all issues

For properties, even though they're methods, they should be documented as if they're attributes. So the docstring can just be a single line:

"""Whether to use a colorblid-safe theme for this user."""

Claudz Dec. 1, 2017, 8:59 p.m.

I was following what was done for the "should_enable_desktop_notifications" property that is right above it. it had a docstring like:

    """Return whether desktop notifications should be used for this user.

    If the user has chosen whether or not to use desktop notifications
    explicitly, then that choice will be respected. Otherwise, we
    enable desktop notifications by default.

    Returns:
        bool:
            If the user has set whether they wish to recieve desktop
            notifications, then use their preference. Otherwise, we return
            ``True``.
    """

But, I have no problem changing it to one line

reviewboard/static/rb/css/pages/diffviewer.less (Diff revision 11)

Show all issues

Indentation is funky here.