Improve diff comment bubble tooltips to show rendered comment content
Review Request #6932 — Created Feb. 10, 2015 and submitted
This is the first part in improving the diff comment bubbles. The tooltip previews for the comment text will show the full rendered comment text together with the name of the reviewer, with the size of the tooltip maximized to the screen width. Updated js tests as the comment reviewer needs to be loaded with each comment.
Ran tests, added markdown and plain text comments to check visually.
Added unit testing for XSS vulnerabilites. Manually checked by creating comments containing script tags for both markdown and plain text, scripts were escaped and not executed for both first load of the page and subsequent asynchronous updating of comments.
Description | From | Last Updated |
---|---|---|
Can we set a maximum width for this popup? The entire width of the page is a little excessive. |
david | |
Can you go through and make sure that the styles of this match exactly what you see on the "View … |
david | |
Col: 80 E501 line too long (89 > 79 characters) |
reviewbot | |
Col: 80 E501 line too long (93 > 79 characters) |
reviewbot | |
Col: 25 E131 continuation line unaligned for hanging indent |
reviewbot | |
This will allow non-Markdown text to inject tags into the page. Make sure you escape the text. |
chipx86 | |
Blank line between these. Though, you probably want RB.UserSession.instance instead. |
chipx86 | |
Can you make use of Underscore.js templates instead? That will help to keep all this more readable and maintainable. |
chipx86 | |
Col: 80 E501 line too long (80 > 79 characters) |
reviewbot | |
The opening ' characters should all line up, and indentation for the templates should happen within the string rather than … |
david | |
What if the text is neither expected type nor SafeText? |
Chester | |
This should end in a period, and use the imperative mood ("Return" rather than "Returns"). |
david | |
Have seen the "insert in alphabetical order" comment before, perhaps applicable in this case. |
SU Sunxperous | |
Same here for alphabetical order... |
SU Sunxperous | |
A bit nitpicking, but is it better for row to be $row instead? |
SU Sunxperous | |
I feel the name of the function doesn't clearly describe what this is for. Without the context of this being … |
chipx86 | |
"HTML". |
chipx86 | |
This isn't the right thing to pass to the comments in the serializedCommentBlocks. You should just be passing a dictionary, … |
chipx86 | |
This should stay a standalone function. If you're having a problem with this, then you can instead pull out this.tooltipTemplate … |
chipx86 | |
This can be one statement: list.append(tooltipTemplate({ ... })); |
chipx86 | |
Leftover debug code? |
david | |
Can you rename list to be $list? |
david | |
Because this is just one statement, it doesn't make a lot of sense to define a new function for it, … |
david |
- Commit:
-
bdfa6c1c3471a59f4a3fbac68ab4567b178fcb0225ffc3a19c9cda887b5b2dea6a0b9ac30bca31fd
- Diff:
-
Revision 2 (+40 -10)
-
Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/resources/models/diffCommentModel.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: Pyflakes Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/resources/models/diffCommentModel.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
-
- Commit:
-
25ffc3a19c9cda887b5b2dea6a0b9ac30bca31fdfec6342e08464db639ea472057818b3132f93fc2
- Diff:
-
Revision 3 (+44 -10)
-
Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/resources/models/diffCommentModel.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: Pyflakes Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/resources/models/diffCommentModel.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
- Change Summary:
-
Deserialize html_text_fields in baseCommentModel
- Commit:
-
fec6342e08464db639ea472057818b3132f93fc250fde97295625a2c8dcc57566e902e91bf2fe169
- Diff:
-
Revision 4 (+44 -10)
-
Tool: Pyflakes Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
- Change Summary:
-
Reduce max-width of tooltip
- Commit:
-
50fde97295625a2c8dcc57566e902e91bf2fe1695b2342106e8af4f924600d94a22e76f0f8c090cf
- Diff:
-
Revision 5 (+44 -10)
- Added Files:
-
Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: Pyflakes Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
-
Looking good.
I want to make sure that the text is displayed just like it would be for reviews. I'd make use of the
.rich-text
CSS class for the tooltips, so that all styling is consistent.Also, please add testing (manual and unit tests) on XSS vulnerabilities. Neither rich text nor plain text should be able to inject any tags.
-
-
-
Can you make use of Underscore.js templates instead? That will help to keep all this more readable and maintainable.
- Commit:
-
5b2342106e8af4f924600d94a22e76f0f8c090cf5eefbbb15113452238a2f702f98145140ab48d76
- Diff:
-
Revision 6 (+75 -13)
-
Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: Pyflakes Processed Files: reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
- Change Summary:
-
Add testing for XSS vulnerabilities
- Testing Done:
-
Ran tests, added markdown and plain text comments to check visually.
+ + Added unit testing for XSS vulnerabilites. Manually checked by creating comments containing script tags for both markdown and plain text, scripts were escaped and not executed for both first load of the page and subsequent asynchronous updating of comments.
- Commit:
-
5eefbbb15113452238a2f702f98145140ab48d7693a1b8f6feb4429d5d67f39ed4559df10cf6b2bc
- Diff:
-
Revision 7 (+92 -13)
-
Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
-
- Commit:
-
93a1b8f6feb4429d5d67f39ed4559df10cf6b2bcf5f508b4e3a7c86c29b37ae46644ce357b5fd621
- Diff:
-
Revision 8 (+93 -13)
-
Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
- Commit:
-
f5f508b4e3a7c86c29b37ae46644ce357b5fd6213742993d5d7a41e6f34946ecc0db4bc574907ba0
- Diff:
-
Revision 9 (+93 -13)
-
Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
-
Would you mind uploading a screenshot that compares what is shown in the tooltip to what is shown on the reviews page?
- Change Summary:
-
Make the tooltips styling consistent with the styling in the "View Reviews" page
- Commit:
-
3742993d5d7a41e6f34946ecc0db4bc574907ba0f169b4764e6f5256f45fd3dd8aea94400e2fc4dd
- Diff:
-
Revision 10 (+90 -16)
- Added Files:
-
Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
- Commit:
-
f169b4764e6f5256f45fd3dd8aea94400e2fc4dd5df25dd7948eb10c80e6d3bf0576b7603132bbde
- Diff:
-
Revision 11 (+90 -16)
-
Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
- Commit:
-
5df25dd7948eb10c80e6d3bf0576b7603132bbde6de235f14eea181b3306c741f010e0e9823c89f8
- Diff:
-
Revision 12 (+80 -18)
-
Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/css/pages/search.less reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/css/pages/search.less reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
-
-
I feel the name of the function doesn't clearly describe what this is for. Without the context of this being in Markdown-related code, it's confusing what this is for.
How about
markdown_render_conditional
? -
-
This isn't the right thing to pass to the comments in the
serializedCommentBlocks
. You should just be passing a dictionary, just like what's passed to the page. aUserSession
is a very different thing. -
This should stay a standalone function. If you're having a problem with
this
, then you can instead pull outthis.tooltipTemplate
into a variable in_updateTooltip
. -
- Commit:
-
6de235f14eea181b3306c741f010e0e9823c89f8ae33f2832ed2680528884c1555b561d6762b36f8
- Diff:
-
Revision 13 (+75 -16)
- Added Files:
-
Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/ui/base.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/css/pages/search.less reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/ui/base.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/css/pages/search.less reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
- Commit:
-
ae33f2832ed2680528884c1555b561d6762b36f8fab01f3abb16350c4a0ab4a9b9dabe7f0aedc0ba
- Diff:
-
Revision 14 (+75 -16)
-
Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/ui/base.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/css/pages/search.less reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/ui/base.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/css/pages/search.less reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js
- Commit:
-
fab01f3abb16350c4a0ab4a9b9dabe7f0aedc0baf1b0a6b67e4468a7f6497e00d05f62d078387390
- Diff:
-
Revision 15 (+78 -19)
-
Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/ui/base.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/css/pages/search.less reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js Tool: Pyflakes Processed Files: reviewboard/reviews/markdown_utils.py reviewboard/reviews/tests.py reviewboard/reviews/ui/base.py reviewboard/reviews/context.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/js/diffviewer/views/tests/diffReviewableViewTests.js reviewboard/static/rb/css/pages/search.less reviewboard/static/rb/js/models/abstractCommentBlockModel.js reviewboard/static/rb/js/resources/models/baseCommentModel.js reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/commentEditorModel.js