Add "zoom" functionality for high-dpi image review.

Review Request #8216 — Created June 3, 2016 and submitted

david
Review Board
release-3.0.x
8215, 8214
d6fee91...
reviewboard

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.

Description From Last Updated

2.0 => 200%

brenniebrennie

2.0

brenniebrennie

2.0

brenniebrennie

2.0

brenniebrennie

/* and */

brenniebrennie

Should we maybe check that the @2x. and @3x. come before the file extension?

brenniebrennie

2.0

brenniebrennie
reviewbot
  1. 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
    
    
  2. 
      
brennie
  1. 
      
  2. Should we maybe check that the @2x. and @3x. come before the file extension?

    1. I figured this was probably good enough without trying to parse the whole filename (especially considering it has the period in there).

  3. 
      
david
reviewbot
  1. 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
    
    
  2. 
      
brennie
  1. Ship It!
  2. 
      
david
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-3.0.x (4f03328)
Loading...