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

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

Information

Review Board
release-3.0.x
d6fee91...

Reviewers

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. Show all issues

    2.0 => 200%

  3. Show all issues

    2.0

  4. Show all issues

    2.0

  5. Show all issues

    2.0

  6. Show all issues

    /* and */

  7. Show all issues

    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).

  8. Show all issues

    2.0

  9. 
      
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:
Completed
Change Summary:
Pushed to release-3.0.x (4f03328)