Add "zoom" functionality for high-dpi image review.
Review Request #8216 — Created June 3, 2016 and submitted
With the advent of high-resolution screens for mobile devices and laptops (and
more and more for desktops), it's common for UIs and the icons/graphics
displayed therein to be shown at a pixel ratio where the browser uses multiple
physical pixels (either 4 or 9) for a single "virtual" pixel.This means that most screenshot tools will produce images that show super huge
inside Review Board.This change adds a new drop-down menu to the image review UI to select a zoom
level. We offer 33% (good for 3x ratios), 50% (for 2x), 100%, and 200% (which
is good for getting a close look at alignment and such). In the case where the
filename of the image being reviewed includes the magic text "@2x" or "@3x",
the appropriate zoom level will be pre-selected.
- Checked each zoom level with:
- A plain image file attachment.
- An image attachment with multiple revisions (no diff)
- An image attachment with multiple revisions for each diff mode.
- Tested the pre-selection of the right zoom level for both plain image
attachments and each diff mode. - Tested loading existing comments at various zoom levels.
- Tested creating comments with different review modes and zoom levels.
Verified that the comment regions were assigned correctly. - Tested moving/resizing comment regions at different zoom levels and verified
the results. - Changed zoom levels and verified that comment regions were resized along with
the images. - Checked functionality of the drop-down menu for each of the different display
modes in mobile sizes. - Ran js-tests.
- Ran unit tests.
- Commit:
-
41059ce1dfa2b7889be8d3b533d6ea6f7bddc31ed6fee918ba986837f41b5fc85e0787dfccea16e4
- Diff:
-
Revision 2 (+475 -167)
-
Tool: Pyflakes Processed Files: reviewboard/reviews/ui/base.py reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/css/ui/menus.less reviewboard/static/rb/css/pages/image-review-ui.less reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/fileAttachmentReviewableModel.js reviewboard/static/rb/js/views/imageReviewableView.es6.js reviewboard/static/rb/js/views/regionCommentBlockView.es6.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/ui/base.py reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/css/ui/menus.less reviewboard/static/rb/css/pages/image-review-ui.less reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/fileAttachmentReviewableModel.js reviewboard/static/rb/js/views/imageReviewableView.es6.js reviewboard/static/rb/js/views/regionCommentBlockView.es6.js
Tool: Pyflakes Processed Files: reviewboard/reviews/ui/base.py reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/css/ui/menus.less reviewboard/static/rb/css/pages/image-review-ui.less reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/fileAttachmentReviewableModel.js reviewboard/static/rb/js/views/imageReviewableView.es6.js reviewboard/static/rb/js/views/regionCommentBlockView.es6.js Tool: PEP8 Style Checker Processed Files: reviewboard/reviews/ui/base.py reviewboard/staticbundles.py Ignored Files: reviewboard/static/rb/js/views/abstractCommentBlockView.js reviewboard/static/rb/css/ui/menus.less reviewboard/static/rb/css/pages/image-review-ui.less reviewboard/static/rb/css/pages/reviews.less reviewboard/static/rb/js/models/fileAttachmentReviewableModel.js reviewboard/static/rb/js/views/imageReviewableView.es6.js reviewboard/static/rb/js/views/regionCommentBlockView.es6.js