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

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

Review Board
8215, 8214

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.
Loading file attachments...